/* New Engen theme for the admin side (creator pages keep their brand themes).
   Taken from newengen.com: Figtree, cream page, near-black ink, heavy tight headings,
   outlined pill tags, a coral "Let's talk" button, lime used in small doses.

   Colour strategy: the page is neutral (cream, warm white, ink). Each brand colour has ONE job:
   - Greens lead. Lime (neon) = the main action and "live / you are here"; forest = headings,
     hovers, selection and depth; mist/sage = soft tints behind glass and hover states.
   - Plum   = the LookBooks colour and the quiet second accent: logo, links, scheduled, selection
     in menus and charts, focus outlines.
   - Coral  = destructive actions (delete) and small warm accents only.
   - Status hues (blue, gold, teal, green) appear only as small status dots and the pipeline bar.
   Contrast: ink on cream 14:1, muted on cream 5.5:1, ink on lime 11:1, ink on coral 8:1. */

:root {
  --ne-forest: #334238; --ne-forest-deep: #26322a; --ne-sage-text: #4a7258;
  --ne-lime: #cce561; --ne-lime-soft: #eef5cf; --ne-coral: #ff9c94; --ne-mist: #cce0d9; --ne-plum: #5b3f8f; --ne-plum-soft: #ece6f5;
  --ne-cream: #faf2e8; --ne-card: #fffcf7; --ne-ink: #242424; --ne-muted: #66625a;

  --background: var(--ne-cream); --foreground: var(--ne-ink); --muted-foreground: var(--ne-muted);
  --card: var(--ne-card); --border: #ddd2c2; --input: #e6dccd; --sidebar: #f3e9db; --muted: #ebe1d3; --sidebar-border: #e6dccd;
  --ring: var(--ne-forest); --primary: var(--ne-forest); --primary-strong: var(--ne-forest); --primary-stronger: var(--ne-forest-deep);
  --primary-foreground: var(--ne-cream); --accent: var(--ne-lime); --accent-foreground: var(--ne-forest);
  --plum: var(--ne-forest); --plum-deep: var(--ne-forest-deep);
  --tint: 97 140 112; --ink-rgb: 36 36 36; --shade-rgb: 38 50 42; --soft-rgb: 246 238 226;
  --line: #ebe1d2; --soft: #f6eee2;

  --font-sans: "Figtree", ui-sans-serif, system-ui, sans-serif;
  --font-serif: "Figtree", ui-sans-serif, system-ui, sans-serif;

  --chart-1: #2f7fb8; --chart-2: #f08a7e; --chart-3: #11764a; --chart-4: #c9a12c; --chart-5: #239fa5; --chart-6: #9c9384;
  --chart-rest: #e6dccd; --ramp-from: #26322a; --ramp-to: #d6e79a;

  /* One elevation scale, shadows tinted to the page */
  --ne-rest: 0 0 0 1px rgb(51 66 56 / 0.08), 0 1px 2px rgb(36 36 36 / 0.04), 0 12px 28px -20px rgb(38 50 42 / 0.28);
  --ne-lift: 0 0 0 1px rgb(51 66 56 / 0.12), 0 2px 4px rgb(36 36 36 / 0.05), 0 20px 40px -22px rgb(38 50 42 / 0.36);
  --ne-pop:  0 0 0 1px rgb(36 36 36 / 0.08), 0 4px 10px rgb(36 36 36 / 0.06), 0 24px 48px -20px rgb(38 50 42 / 0.4);
  --float: var(--ne-rest); --float-hover: var(--ne-lift); --shadow-card: var(--ne-rest);
}

/* One light setup for the whole page: a soft lime glow top right, a whisper of plum top left (the
   logo's colour), on cream. The header is clear glass over it, so the two always match. */
body { background:
  radial-gradient(1100px 640px at 88% -14%, rgb(204 229 97 / 0.26), transparent 64%),
  radial-gradient(900px 620px at -6% -8%, rgb(91 63 143 / 0.09), transparent 62%),
  linear-gradient(180deg, #f4f2e6 0, var(--ne-cream) 560px) !important; background-attachment: fixed !important; color: var(--ne-ink); font-family: var(--font-sans); }
h1, h2, h3 { font-family: var(--font-sans); letter-spacing: -0.015em; }
a { color: var(--ne-plum); }
::selection { background: var(--ne-lime); color: var(--ne-ink); }
/* New Engen pointers: a solid green arrow; over anything clickable it turns lime.
   Text fields keep the normal text cursor. */
:root { --cursor-hand: url(/cursors/hand.svg) 4 3, pointer; }
html { cursor: url(/cursors/arrow.svg) 4 3, auto; }
a[href], summary, select, label[for], input[type="checkbox"], input[type="radio"], input[type="file"] { cursor: var(--cursor-hand); }
:focus-visible { outline-color: var(--ne-plum); }
.page { padding-top: 40px !important; }

/* ---------- Top bar: floating frosted glass ---------- */
.topbar { top: 18px !important; margin-top: 20px !important; height: 58px !important;
  /* Clear frosted glass: no tint of its own, so it takes on the page behind it */
  background: rgb(255 253 248 / 0.78) !important; -webkit-backdrop-filter: blur(24px) saturate(1.08) !important; backdrop-filter: blur(24px) saturate(1.08) !important;
  border: 1px solid rgb(255 255 255 / 0.7) !important; color: var(--ne-ink);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.85), 0 0 0 1px rgb(36 36 36 / 0.05), 0 8px 28px -16px rgb(36 36 36 / 0.22) !important; }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .topbar { background: rgb(255 253 248 / 0.94) !important; } }
@media (prefers-reduced-transparency: reduce) { .topbar { background: rgb(255 253 248 / 0.96) !important; } }
.topbar > * { line-height: 1; }
.logo { font-family: var(--font-sans) !important; font-weight: 800 !important; letter-spacing: -0.045em; color: var(--ne-ink); }
.topbar .wordmark { border-right-color: rgb(36 36 36 / 0.12); }
.topbar .brand-btn { color: var(--ne-ink); }
.topbar .brand-btn .muted, .topbar .brand-btn svg { color: var(--ne-muted); }
.topbar .brand-btn:hover, .topbar .brand-btn[aria-expanded="true"], .topbar .btn:hover { background: rgb(204 229 97 / 0.45) !important; color: var(--ne-forest-deep) !important; }
.topbar .btn { border: 0 !important; background: transparent !important; box-shadow: none !important; color: var(--ne-ink) !important; font-weight: 500; }

/* ---------- Surfaces: warm white, one elevation scale ---------- */
.panel, .table-card, .lb-card, .login, .kpi, .who-card {
  background: var(--ne-card) !important; border: 0 !important; outline: 0 !important; box-shadow: var(--ne-rest) !important; }
.menu, .dt-pop, .msg-pop, .dd-list, .help-pop, .lb-menu {
  background: var(--ne-card) !important; border: 0 !important; box-shadow: var(--ne-pop) !important; }
.menu a, .menu button, .menu [role="menuitem"] { color: var(--ne-ink) !important; }
.menu a:hover, .menu button:hover, .menu :focus-visible, .menu [aria-current="true"], .menu-item:hover, .menu-item:focus-visible { background: var(--ne-lime-soft) !important; color: var(--ne-forest-deep) !important; }
.menu [aria-checked="true"] { background: var(--ne-plum-soft) !important; color: var(--ne-plum) !important; }
.menu [aria-checked="true"]::after { color: var(--ne-plum) !important; }
.menu { background: linear-gradient(180deg, #fbfdf6, var(--ne-card)) !important; }
.menu .sep { background: rgb(36 36 36 / 0.1) !important; }
.lb-card { transition: transform .2s ease, box-shadow .2s ease; }
.lb-card:hover { transform: translateY(-2px); box-shadow: var(--ne-lift) !important; }
.lb-cover { background: var(--ne-mist) !important; }

/* ---------- Type: heavy, tight headings ---------- */
.crumbs { font-weight: 800 !important; letter-spacing: -0.025em !important; gap: 8px !important; }
.crumbs a { color: var(--ne-muted) !important; font-weight: 700; text-decoration: none; }
.crumbs a:hover { color: var(--ne-forest) !important; }
.crumbs .sep { color: rgb(36 36 36 / 0.25) !important; }
/* Lime marks the page you are on (site: "Creating impact for [SALT & STONE]") */
.crumb-now { background: var(--ne-lime); color: var(--ne-ink); padding: 0 0.22em 0.04em; border-radius: 6px; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.section-head h2, .lb-section > h2, .lb-info strong, .pie-head h2, .sun-card h2, .panel h2, .cover-name { font-family: var(--font-sans) !important; font-weight: 750 !important; letter-spacing: -0.02em; }
.crumbs, .home-head h1, .section-head h2, .panel h2 { color: var(--ne-forest-deep); }
.section-head h2 a { color: var(--ne-forest-deep) !important; text-decoration: none; }
.section-head h2 a:hover { color: var(--ne-forest) !important; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 5px; text-decoration-color: var(--ne-lime); }

/* ---------- All lookbooks: one compact line, no number blocks ---------- */
.home-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px 24px; flex-wrap: wrap; margin-bottom: 32px; }
.home-head h1 { font-size: clamp(2rem, 1.5rem + 1.6vw, 2.75rem); font-weight: 800; letter-spacing: -0.035em; line-height: 1.1; }
/* The site's lime marker: hugs the word, sits a touch low like a highlighter stroke */
.hl { background: linear-gradient(transparent 12%, var(--ne-lime) 12%, var(--ne-lime) 92%, transparent 92%); padding: 0 0.12em; margin: 0 -0.04em; border-radius: 4px; }
.home-sum { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; color: var(--ne-muted); font-size: var(--t-sm); }
.home-sum span + span::before { content: ""; display: inline-block; width: 3px; height: 3px; border-radius: 50%; background: var(--ne-muted); opacity: .5; margin-right: 16px; vertical-align: middle; }
.live-tag { background: var(--ne-lime); color: var(--ne-ink); font-weight: 600; padding: 2px 10px; border-radius: 999px; }
.lb-section { margin-bottom: 48px; }
.section-head { margin-bottom: 16px !important; }

/* ---------- Buttons ---------- */
.btn { border-radius: 8px; font-family: var(--font-sans); }
.btn-primary { background: var(--ne-lime) !important; border-color: var(--ne-lime) !important; color: var(--ne-forest-deep) !important; font-weight: 650 !important;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.5), 0 1px 2px rgb(38 50 42 / 0.12), 0 8px 18px -10px rgb(97 140 40 / 0.6) !important; }
.btn-primary:hover { background: #c0dc4c !important; border-color: #c0dc4c !important; }
.btn-primary:disabled { background: var(--muted) !important; border-color: var(--muted) !important; color: var(--ne-muted) !important; }
.btn-arrow::after { content: "→"; margin-left: 8px; font-weight: 600; transition: transform .15s ease; }
.btn-arrow:hover::after { transform: translateX(2px); }
.page .btn:not(.btn-primary):not(.btn-ghost) { background: transparent; border-color: rgb(36 36 36 / 0.18); color: var(--ne-ink); box-shadow: none; }
.page .btn:not(.btn-primary):not(.btn-ghost):hover { border-color: var(--ne-forest); color: var(--ne-forest-deep); background: rgb(204 224 217 / 0.4); }
/* Coral is for destructive actions */
.btn-danger, .page .btn.btn-danger { color: #b8463c !important; }
.btn-danger:hover:not(:disabled), .page .btn.btn-danger:hover:not(:disabled) { background: rgb(255 156 148 / 0.22) !important; border-color: transparent !important; color: #9c3a31 !important; }
.page .btn.btn-quiet { border-color: transparent !important; color: var(--ne-muted) !important; }
/* Dark green: a clear secondary action next to the lime primary */
.page .btn.btn-dark { background: var(--ne-forest) !important; border-color: var(--ne-forest) !important; color: var(--ne-cream, #fbf8f1) !important; font-weight: 600; }
.page .btn.btn-dark:hover { background: var(--ne-forest-deep) !important; border-color: var(--ne-forest-deep) !important; }
.page .btn.btn-quiet:hover { color: var(--ne-forest-deep) !important; background: var(--ne-lime-soft) !important; }

/* ---------- Badges and tags ---------- */
.badge-live { background: var(--ne-lime) !important; color: var(--ne-ink) !important; }
.badge-scheduled { background: var(--ne-plum-soft) !important; color: var(--ne-plum) !important; }
.badge-draft { background: #f1e6d3 !important; color: #6b5a3a !important; }
.lb-cover .badge { box-shadow: 0 2px 8px -2px rgb(36 36 36 / 0.25); }
.lb-stats .stat { background: transparent !important; border: 1px solid rgb(36 36 36 / 0.2); color: var(--ne-ink) !important; border-radius: 999px; }
.lb-stats .stat b { color: var(--ne-ink) !important; }

/* ---------- Lookbook cards: the photo fills the card, a dark fade holds the text ---------- */
.lb-card { position: relative; display: block !important; aspect-ratio: 4 / 5; border-radius: 18px !important; overflow: hidden; color: #fff !important; transform: none !important; }
.lb-card .lb-cover { position: absolute !important; inset: 0; aspect-ratio: auto !important; background: var(--ne-forest) !important; }
.lb-card .lb-cover img { width: 100%; height: 100%; object-fit: cover; object-position: top; transition: transform .4s ease; }
.lb-card .lb-cover-empty { color: rgb(250 242 232 / 0.7) !important; padding-bottom: 30%; }
.lb-card::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgb(20 24 21 / 0) 40%, rgb(20 24 21 / 0.35) 62%, rgb(20 24 21 / 0.85) 100%); }
.lb-card .lb-status { z-index: 2; }
.lb-card .lb-info { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: 18px !important; gap: 6px; }
.lb-card .lb-info strong { color: #fff; font-size: 1.25rem; line-height: 1.15; }
.lb-card .lb-meta { color: rgb(255 255 255 / 0.82) !important; }
.lb-card .lb-stats .stat { border-color: rgb(255 255 255 / 0.45) !important; color: #fff !important; background: rgb(255 255 255 / 0.08) !important;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.lb-card .lb-stats .stat b { color: #fff !important; }
/* Lift the whole card (photo, text and ⋯ together) */
.lb-card-wrap { transition: transform .2s ease; }
.lb-card-wrap:hover { transform: translateY(-2px); }
.lb-card-wrap:hover .lb-cover img { transform: scale(1.03); }
@media (prefers-reduced-motion: reduce) { .lb-card-wrap, .lb-card .lb-cover img { transition: none; } .lb-card-wrap:hover, .lb-card-wrap:hover .lb-cover img { transform: none; } }
.lb-card:focus-visible { outline: 2px solid var(--ne-plum) !important; outline-offset: 3px; }

/* ---------- Card ⋯ menu ---------- */
.lb-card-wrap { position: relative; display: flex; flex-direction: column; }
.lb-card-wrap > .lb-card { flex: 1; }
.lb-more { all: unset; box-sizing: border-box; position: absolute; top: 10px; right: 10px; width: 32px; height: 32px; display: grid; place-items: center; cursor: var(--cursor-hand, pointer);
  border-radius: 8px; color: #fff; background: rgb(36 36 36 / 0.18); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  opacity: 0; transition: opacity .15s ease, background .15s ease; }
.lb-more svg { fill: currentColor; }
.lb-card-wrap:hover .lb-more, .lb-more:focus-visible, .lb-more[aria-expanded="true"] { opacity: 1; }
.lb-more:hover, .lb-more[aria-expanded="true"] { background: rgb(36 36 36 / 0.4); }
.lb-more:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
@media (hover: none) { .lb-more { opacity: 1; } }
.lb-menu { position: absolute; top: 46px; right: 10px; z-index: 5; min-width: 160px; padding: 6px; border-radius: 10px; display: flex; flex-direction: column; }
.lb-menu[hidden] { display: none; }
.lb-menu button { all: unset; box-sizing: border-box; width: 100%; padding: 9px 12px; border-radius: 6px; font-size: var(--t-sm); font-weight: 500; color: var(--ne-ink); cursor: var(--cursor-hand, pointer); }
.lb-menu button:hover, .lb-menu button:focus-visible { background: var(--ne-lime-soft); color: var(--ne-forest-deep); }
.lb-menu .danger { color: #b8463c; }
.lb-menu .danger:hover { background: rgb(255 156 148 / 0.22); color: #9c3a31; }
.lb-menu button:disabled { color: rgb(36 36 36 / 0.35); cursor: not-allowed; background: none; }
.lb-menu .tip-wrap { display: block; }

/* ---------- Tabs and selection ---------- */
.tabs a { color: var(--ne-muted); }
.tabs a[aria-current="page"] { color: var(--ne-ink); border-bottom-color: var(--ne-lime) !important; border-bottom-width: 3px !important; background-image: none !important; font-weight: 600; }
.chip-toggle[aria-pressed="true"], .pie-row.sel { background: var(--ne-plum-soft) !important; color: var(--ne-ink); }
.pie-row.sel { box-shadow: inset 3px 0 0 var(--ne-plum) !important; }
.kpi-tag { background: var(--ne-lime) !important; color: var(--ne-ink) !important; }
.dt-day.on { background: var(--ne-forest) !important; color: var(--ne-cream) !important; }
.dt-day.today { box-shadow: inset 0 0 0 1.5px var(--ne-forest) !important; color: var(--ne-forest) !important; }

/* Status hues: small dots and the pipeline bar only */
.tone-new { background: #2f7fb8; } .tone-ordered { background: #c9a12c; } .tone-shipped { background: #239fa5; } .tone-delivered, .tone-live { background: #11764a; }

/* ---------- Requests: one flat summary line instead of number blocks ---------- */
.req-sum { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px 32px; margin: 0 4px 20px; }
.rs-total { font-size: var(--t-sm); color: var(--ne-muted); white-space: nowrap; }
.rs-total b, .rs-money b { font-size: 1.5rem; font-weight: 800; letter-spacing: -0.02em; color: var(--ne-ink); margin-right: 6px; font-variant-numeric: tabular-nums; }
.rs-pipe { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.rs-bar { display: flex; gap: 2px; height: 8px; border-radius: 4px; overflow: hidden; background: rgb(36 36 36 / 0.06); }
.rs-bar i { display: block; min-width: 6px; flex-basis: 0; }
.rs-legend { display: flex; flex-wrap: wrap; gap: 4px 18px; list-style: none; margin: 0; padding: 0; font-size: var(--t-xs); color: var(--ne-muted); }
.rs-legend li { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.rs-legend b { color: var(--ne-ink); font-weight: 700; font-variant-numeric: tabular-nums; }
.rs-legend li.zero { opacity: .55; }
.rs-money { font-size: var(--t-sm); color: var(--ne-muted); text-align: right; white-space: nowrap; }
.rs-money span { display: block; font-size: var(--t-xs); margin-top: 2px; }
@media (max-width: 760px) {
  .req-sum { grid-template-columns: auto auto; }
  .rs-pipe { grid-column: 1 / -1; grid-row: 2; }
}
.req-table thead th { background: rgb(204 224 217 / 0.45) !important; color: var(--ne-forest-deep); }
.avatar { background: var(--ne-mist) !important; color: var(--ne-forest) !important; }
.handle-link { color: var(--ne-plum) !important; }
.cf-ok svg { color: #11764a !important; }
#sync-now { background: transparent !important; border: 1px solid rgb(36 36 36 / 0.18) !important; color: var(--ne-ink) !important; box-shadow: none !important; }
#sync-now:hover { border-color: var(--ne-ink) !important; }

/* ---------- Setup cover ---------- */
.cover-card { background: radial-gradient(120% 140% at 0% 0%, #3d5043 0%, var(--ne-forest) 45%, var(--ne-forest-deep) 100%) !important; }
.cover-meta .badge { background: rgb(204 229 97 / 0.2) !important; color: var(--ne-lime) !important; }

/* ---------- Insights ---------- */
.pc-stat b, .kpi-ringwrap span { color: var(--ne-forest) !important; }
.kr-fill, .kb-paid, .kpi-pips i::after, .sum-meter span { stroke: var(--ne-forest); background: var(--ne-forest) !important; }
.kb-retail { background: var(--ne-mist) !important; }
.pie-slice, .sun-seg { stroke: var(--ne-card) !important; }
.pie-slice.hov, .sun-seg.hov { stroke: var(--ne-ink) !important; }
.ins-summary .kpi { background: none !important; box-shadow: none !important; transform: none !important; border-radius: 0 !important; }
.ins-summary .kpi + .kpi { border-left: 1px solid rgb(36 36 36 / 0.08) !important; }
@media (max-width: 900px) { .ins-summary .kpi + .kpi { border-left: 0 !important; border-top: 1px solid rgb(36 36 36 / 0.08) !important; } }

/* ---------- Sign-in ---------- */
.login-scene::before { background: rgb(204 229 97 / 0.35) !important; }
.login-scene::after { background: rgb(255 156 148 / 0.3) !important; }
.login.glass { background: rgb(255 252 247 / 0.8) !important; }

/* Manage brand: how products update (moved here from the old (i) popover) */
.sync-info { margin-top: 20px; }
.sync-info h2 { margin-bottom: 10px; }
.sync-info p { color: var(--ne-ink); margin-bottom: 10px; }
.sync-info ul { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 6px; color: var(--ne-muted); font-size: var(--t-sm); }
.sync-info code { font: 400 0.85em var(--font-mono); background: var(--soft); padding: 1px 5px; border-radius: 4px; }
.brand-title { font-size: clamp(1.75rem, 1.4rem + 1.2vw, 2.25rem) !important; letter-spacing: -0.03em !important; line-height: 1.1; }
.page .btn.btn-quiet.btn-danger, .page .btn.btn-ghost.btn-danger { color: #b8463c !important; }

/* Brand mark: initials on the brand's own creator-theme colour, beside the name */
.bmark { display: inline-grid; place-items: center; flex: none; width: 24px; height: 24px; border-radius: 7px; background: var(--bm);
  color: #fff; font: 800 10.5px/1 var(--font-sans); letter-spacing: 0.02em; box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.18), 0 1px 2px rgb(36 36 36 / 0.15); }
.brand-btn .bmark { width: 22px; height: 22px; font-size: 10px; }
.menu .bmark { width: 22px; height: 22px; font-size: 10px; }
.brand-title { display: flex !important; align-items: center !important; gap: 14px !important; }
.brand-title .bmark { width: 44px; height: 44px; border-radius: 12px; font-size: 17px; }
.with-mark { display: inline-flex; align-items: center; gap: 10px; }
.with-mark .bmark { width: 28px; height: 28px; border-radius: 8px; font-size: 11.5px; }
@media (max-width: 560px) { .brand-btn .bname { display: none; } }

/* Official brand logos, recoloured to deep forest; --k evens out each logo's optical size */
.bicon { display: inline-grid; place-items: center; flex: none; width: 22px; height: 22px; }
.bicon i { display: block; width: 100%; height: 100%; transform: scale(var(--k, 1)); background: var(--ne-forest-deep); -webkit-mask: var(--src) center / contain no-repeat; mask: var(--src) center / contain no-repeat; }
.blogo { display: block; flex: none; aspect-ratio: var(--ar); background: var(--ne-forest-deep); -webkit-mask: var(--src) left center / contain no-repeat; mask: var(--src) left center / contain no-repeat; }
.blogo-lg { height: calc(30px * var(--k, 1)); }
.blogo-sm { height: calc(28px * var(--k, 1)); }
.with-mark { min-height: 36px; }
.with-mark:hover .blogo { background: var(--ne-forest); }
@media (max-width: 560px) { .blogo-lg { height: calc(24px * var(--k, 1)); } .blogo-sm { height: calc(21px * var(--k, 1)); } }

/* Home: one group per brand: logo | counts | New lookbook, then its cards (no box) */
.shelf { margin-bottom: 48px; }
.shelf-head { display: flex; align-items: center; gap: 12px 16px; flex-wrap: wrap; margin-bottom: 20px; }
.shelf-head h2 { margin: 0; }
.shelf-meta { display: flex; align-items: center; gap: 10px; color: var(--ne-muted); font-size: var(--t-sm); padding-left: 16px; border-left: 1px solid rgb(51 66 56 / 0.15); }
.shelf-head .btn { margin-left: auto; }
.not-started { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 12px; margin-top: 8px; padding: 0 4px; }
.ns-label { color: var(--ne-muted); font-size: var(--t-sm); margin-right: 4px; }
.ns-chip { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 14px 0 10px; border-radius: 999px; text-decoration: none; color: var(--ne-ink);
  border: 1px dashed rgb(51 66 56 / 0.3); font-size: var(--t-sm); font-weight: 600; transition: background .15s ease, border-color .15s ease; }
.ns-chip b { font-weight: 500; color: var(--ne-muted); }
.ns-chip:hover { background: var(--ne-lime-soft); border-color: var(--ne-forest); border-style: solid; }
.ns-chip:hover b { color: var(--ne-forest-deep); }
@media (max-width: 560px) { .shelf-head h2 { flex-basis: 100%; } .shelf-meta { padding-left: 0; border-left: 0; } }

/* Brand logins (Manage brand) */
.team-access { margin-top: 20px; }
.team-access h2 { margin-bottom: 6px; }
.ta-sub { margin: 0 0 16px; font-size: var(--t-sm); }
.ta-list { list-style: none; margin: 0 0 18px; padding: 0; display: flex; flex-direction: column; }
.ta-list li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 0; border-top: 1px solid rgb(36 36 36 / 0.08); flex-wrap: wrap; }
.ta-list li:last-child { border-bottom: 1px solid rgb(36 36 36 / 0.08); }
.ta-who { display: flex; flex-direction: column; gap: 2px; }
.ta-who small { color: var(--ne-muted); font-size: var(--t-xs); }
.ta-actions { display: flex; gap: 8px; }
.ta-empty { color: var(--ne-muted); margin: 0 0 16px; font-size: var(--t-sm); }
.ta-add { display: grid; grid-template-columns: 1fr 1fr auto; gap: 12px; align-items: start; }
.ta-add .btn { margin-top: 26px; }
@media (max-width: 640px) { .ta-add { grid-template-columns: 1fr; } .ta-add .btn { margin-top: 0; } }
.ta-reveal { margin: 0 0 18px; padding: 16px 18px; border-radius: 12px; background: var(--ne-lime-soft); }
.ta-reveal-h { margin: 0 0 10px; font-weight: 700; color: var(--ne-forest-deep); }
.ta-reveal dl { margin: 0 0 10px; display: grid; gap: 6px; }
.ta-reveal dl div { display: grid; grid-template-columns: 110px 1fr; gap: 8px; }
.ta-reveal dt { color: var(--ne-muted); font-size: var(--t-sm); }
.ta-reveal dd { margin: 0; font-weight: 600; word-break: break-all; }
.ta-reveal .mono { font-family: "Fira Code", ui-monospace, monospace; letter-spacing: 0.02em; }
.ta-once { margin: 0 0 12px; font-size: var(--t-xs); }

/* Requests: a pick's photo opens it on the brand's site (colour and size chosen); text is copyable */
.pk-link { position: relative; display: block; cursor: var(--cursor-hand, pointer); transition: box-shadow .15s ease, transform .15s ease; }
.pk-link:hover { box-shadow: 0 0 0 2px var(--ne-plum); transform: scale(1.04); }
.pk-link:focus-visible { outline: 2px solid var(--ne-plum); outline-offset: 2px; }
.pk-ext { position: absolute; right: 2px; bottom: 2px; width: 14px; height: 14px; border-radius: 4px; display: grid; place-items: center;
  background: var(--ne-plum); color: #fff; opacity: 0; transition: opacity .15s ease; }
.pk-link:hover .pk-ext, .pk-link:focus-visible .pk-ext { opacity: 1; }
@media (hover: none) { .pk-ext { opacity: .85; } }
@media (prefers-reduced-motion: reduce) { .pk-link, .pk-link:hover { transition: none; transform: none; } }

/* Catalog panel: a short sync message that always wraps inside its box, and what changed */
.sync-err { margin: 0 0 14px !important; overflow-wrap: anywhere; word-break: break-word; line-height: 1.45; }
.sync-err b { font-weight: 700; }
.sync-quiet { margin: 0 0 14px; font-size: var(--t-sm); color: var(--ne-muted); }
.sync-changes { margin: 0 0 14px; font-size: var(--t-sm); border-radius: 10px; background: rgb(36 36 36 / 0.035); }
.sync-changes summary { cursor: var(--cursor-hand, pointer); padding: 10px 12px; font-weight: 600; color: var(--ne-ink); list-style: none; display: flex; align-items: center; gap: 8px; }
.sync-changes summary::-webkit-details-marker { display: none; }
.sync-changes summary::after { content: ""; width: 7px; height: 7px; margin-left: auto; border-right: 1.6px solid currentColor; border-bottom: 1.6px solid currentColor; transform: rotate(45deg) translateY(-2px); transition: transform .15s ease; }
.sync-changes[open] summary::after { transform: rotate(-135deg) translateY(-2px); }
.sync-changes summary:focus-visible { outline: 2px solid var(--ne-plum); outline-offset: 2px; border-radius: 10px; }
.sync-changes ul { list-style: none; margin: 0; padding: 0 12px 10px; max-height: 240px; overflow-y: auto; display: flex; flex-direction: column; gap: 6px; }
.sync-changes li { overflow-wrap: anywhere; line-height: 1.4; color: var(--ne-muted); }
.sync-changes li b { color: var(--ne-ink); font-weight: 600; }
.ch-off, .ch-add { display: inline-block; margin-left: 6px; font-size: var(--t-xs); font-weight: 600; padding: 1px 7px; border-radius: 999px; }
.ch-off { background: rgb(255 156 148 / 0.25); color: #9c3a31; }
.ch-add { background: var(--ne-lime-soft); color: var(--ne-forest-deep); }

/* ---------- Walkthrough fixes ---------- */
/* Lookbook settings: Status and limits in one row, then the open → close window on its own row,
   so "Oct 31 · 11:59 PM" always fits on one line. Phones stack the two dates. */
.settings-grid { grid-template-columns: repeat(6, minmax(0, 1fr)) !important; }
.settings-grid .field { grid-column: span 2; }
.settings-grid .field.f-when { grid-column: span 3; grid-row: 2; }
.settings-grid .dt-btn .dd-text { white-space: nowrap; }
@media (max-width: 520px) {
  .settings-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .settings-grid .field { grid-column: span 1; }
  .settings-grid .field:first-child, .settings-grid .field.f-when { grid-column: 1 / -1; grid-row: auto; }
}
/* Order summary: two short lines that wrap inside the button instead of being cut */
.order-btn .o-add { white-space: normal; line-height: 1.3; }
.order-btn .o1, .order-btn .o2 { white-space: normal; overflow-wrap: anywhere; text-overflow: clip; }
.order-btn .o2 { line-height: 1.35; }
/* Comfortable tap targets on touch screens */
.topbar .wordmark { padding-block: 10px; }
.search-box input { min-height: 36px; }

/* Requests on phones and tablets: each request is a card (no sideways scrolling, no squeezed columns) */
@media (max-width: 960px) {
  .req-table { overflow: visible !important; }
  .req-table table, .req-table tbody { display: block; width: 100%; }
  .req-table thead { display: none; }
  .req-table tbody tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px 12px; padding: 14px 14px 16px; border-top: 1px solid var(--line); align-items: start; }
  .req-table tbody tr:hover td { background: none; }
  .req-table tbody td { display: block; padding: 0 !important; border: 0 !important; min-width: 0 !important; max-width: none !important; width: auto !important; background: none !important; }
  .req-table td.name-cell, .req-table td:has(.picks), .req-table td.muted-cell, .req-table td:has(.addr), .req-table td.w-notes, .req-table td.order-cell { grid-column: 1 / -1; }
  .req-table td:has(.status-slot, .dd, .status-read) { grid-column: 2; grid-row: 1; justify-self: end; }
  .req-table td.name-cell { grid-column: 1; grid-row: 1; }
  .req-table .picks { max-width: none; min-width: 0; }
  .req-table td.w-notes .cell-input:placeholder-shown { background: rgb(36 36 36 / 0.04); }
  .req-table td.w-notes::before { content: "Team notes"; display: block; font-size: 11px; font-weight: 600; color: var(--ne-muted); margin: 0 0 4px 2px; }
  .req-table tr.order-row { display: block; padding: 0 14px 14px; border-top: 0; }
  .req-table tr.order-row td { padding: 12px !important; border-radius: 12px; background: var(--soft) !important; }
  .order-panel { grid-template-columns: 1fr 1fr; }
  .order-panel .o-actions { grid-column: 1 / -1; justify-content: flex-end; }
  .req-table tr.is-open { border-bottom: 0; }
  .empty-row { display: block; }
}
/* The small (i) help button keeps its look but gets a 32px tap area */
.info-btn { position: relative; }
.info-btn::after { content: ""; position: absolute; inset: -9px; }
@media (min-width: 521px) { .settings-grid .field:first-child { grid-column: span 2; } }
/* Every label in the settings tile is the same size and spacing */
.settings-grid .lbl, .settings-grid .field > label { display: block; font-size: var(--t-sm); font-weight: 600; line-height: 1.3; margin: 0 0 6px; }

/* ---------- Insights: facts only, in New Engen colours ----------
   Bars forest (the top piece lime), the comparison bar plum, tracks a soft mist, the size grid
   cream → forest. Every number is written next to its bar, so nothing needs hovering. */
.ins { display: flex; flex-direction: column; gap: 20px; }
.ins-facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; border-radius: 16px; background: var(--ne-card);
  box-shadow: var(--ne-rest); overflow: hidden; }
.fact { display: flex; flex-direction: column; gap: 4px; padding: 20px 22px; min-width: 0; }
.fact + .fact { border-left: 1px solid rgb(36 36 36 / 0.08); }
.fact b { font-size: 2rem; font-weight: 800; letter-spacing: -0.03em; line-height: 1; color: var(--ne-forest-deep); font-variant-numeric: tabular-nums; }
.fact b i { font-style: normal; font-size: 1rem; font-weight: 600; color: var(--ne-muted); margin-left: 2px; }
.fact span { font-size: var(--t-sm); color: var(--ne-ink); line-height: 1.35; }
.fact span strong { font-weight: 700; }
.fact small { font-size: var(--t-xs); color: var(--ne-muted); }
.ins-card { min-width: 0; }
.ins-h { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 14px; margin-bottom: 14px; }
.ins-h h2 { margin: 0; font-size: var(--t-md); display: inline-flex; align-items: center; gap: 8px; }
.ins-h p { margin: 0; font-size: var(--t-xs); color: var(--ne-muted); display: inline-flex; align-items: center; gap: 6px; }
.ins-count { font-size: var(--t-xs); font-weight: 700; padding: 2px 8px; border-radius: 999px; background: rgb(36 36 36 / 0.06); color: var(--ne-ink); }
.ins-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.ins-bar { display: block; height: 8px; border-radius: 4px; background: rgb(204 224 217 / 0.55); overflow: hidden; min-width: 40px; }
.ins-bar > span { display: block; height: 100%; border-radius: 4px; background: var(--ne-forest); }
.ins-bar.lead > span { background: var(--ne-lime); box-shadow: inset 0 0 0 1px rgb(51 66 56 / 0.25); }
.ins-bar.alt > span { background: var(--ne-plum); opacity: .75; }
.ins-foot { margin: 8px 0 0; font-size: var(--t-xs); color: var(--ne-muted); }

/* Most picked */
.mp-list { list-style: none; margin: 0; padding: 0; }
.mp-row + .mp-row { border-top: 1px solid rgb(36 36 36 / 0.06); }
.mp-btn { all: unset; box-sizing: border-box; cursor: var(--cursor-hand, pointer); width: 100%; display: grid; grid-template-columns: 22px 40px minmax(0, 1fr) minmax(80px, 28%) 34px 14px; align-items: center; gap: 12px; padding: 10px 8px; border-radius: 10px; }
.mp-btn:hover { background: rgb(36 36 36 / 0.03); }
.mp-btn:focus-visible { outline: 2px solid var(--ne-plum); outline-offset: -2px; }
.mp-btn[aria-expanded="true"] { background: var(--ne-plum-soft); }
.mp-rank { font-size: var(--t-xs); font-weight: 700; color: var(--ne-muted); text-align: center; font-variant-numeric: tabular-nums; }
.mp-btn .pk-img { width: 40px; height: 50px; }
.mp-main { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.mp-name { font-weight: 600; font-size: var(--t-sm); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mp-meta { font-size: var(--t-xs); color: var(--ne-muted); overflow-wrap: anywhere; }
.mp-meta b { color: var(--ne-ink); font-weight: 700; }
.mp-meta .sep { margin: 0 6px; opacity: .5; }
.mp-n { font-weight: 800; font-size: var(--t-md); text-align: right; font-variant-numeric: tabular-nums; color: var(--ne-forest-deep); }
.mp-chev { color: var(--ne-muted); transition: transform .15s ease; }
.mp-btn[aria-expanded="true"] .mp-chev { transform: rotate(180deg); }
.mp-who { padding: 4px 8px 14px 34px; }
.mp-more { margin-top: 10px; }

/* Size grid */
.hm-wrap { overflow-x: auto; }
.hm { width: 100%; border-collapse: separate; border-spacing: 4px; font-variant-numeric: tabular-nums; }
.hm th { font-size: var(--t-xs); font-weight: 600; color: var(--ne-muted); white-space: nowrap; padding: 0 4px; }
.hm thead th { text-align: center; }
.hm tbody th { text-align: left; color: var(--ne-ink); padding-right: 10px; }
.hm tbody th small { color: var(--ne-muted); font-weight: 500; margin-left: 4px; }
.hm td { height: 36px; min-width: 40px; text-align: center; border-radius: 6px; font-size: var(--t-sm); font-weight: 700; color: var(--ne-ink);
  background: color-mix(in srgb, var(--ne-forest) calc(var(--v) * 100%), #f3ede2); }
.hm td.dark { color: #fff; }
.fit-split { margin-top: 16px; display: grid; grid-template-columns: auto 1fr; gap: 8px 12px; align-items: center; }
.fs-lbl { font-size: var(--t-xs); font-weight: 600; color: var(--ne-muted); }
.fs-bar { display: flex; gap: 2px; height: 10px; border-radius: 5px; overflow: hidden; }
.fs-key { grid-column: 2; display: flex; flex-wrap: wrap; gap: 4px 16px; list-style: none; margin: 0; padding: 0; font-size: var(--t-xs); color: var(--ne-muted); }
.fs-key li { display: inline-flex; align-items: center; gap: 6px; }
.fs-key i { width: 8px; height: 8px; border-radius: 50%; }
.fs-key b { color: var(--ne-ink); }
.fs-0 { background: var(--ne-forest); } .fs-1 { background: var(--ne-plum); } .fs-2 { background: var(--ne-lime); } .fs-3 { background: var(--ne-coral); } .fs-4 { background: #9c9384; }

/* Categories */
.lg { display: inline-block; width: 10px; height: 10px; border-radius: 3px; }
.lg-a { background: var(--ne-forest); } .lg-b { background: var(--ne-plum); opacity: .75; margin-left: 8px; }
.cat-list, .cf-list, .st-list, .pair-list, .so-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.cat-list li { display: grid; grid-template-columns: 88px minmax(0, 1fr) 54px; gap: 12px; align-items: center; }
.cl-name { font-size: var(--t-sm); font-weight: 600; }
.cl-bars { display: flex; flex-direction: column; gap: 3px; }
.cl-bars .ins-bar { height: 7px; }
.cl-n { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.15; font-variant-numeric: tabular-nums; }
.cl-n b { font-size: var(--t-sm); } .cl-n small { font-size: 11px; color: var(--ne-plum); }

/* Colours, states */
.cf-list li { display: grid; grid-template-columns: 14px 120px minmax(0, 1fr) 30px; gap: 10px; align-items: center; font-size: var(--t-sm); }
.cf-sw { width: 14px; height: 14px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgb(0 0 0 / 0.12); }
.cf-n, .st-list b { text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; }
.st-list { margin-top: 14px; gap: 8px; }
.st-list li { display: grid; grid-template-columns: 34px minmax(0, 1fr) 28px; gap: 10px; align-items: center; font-size: var(--t-sm); }

/* Pairs, sold out */
.pair-list li, .so-list li { display: grid; grid-template-columns: 32px 32px minmax(0, 1fr) auto; gap: 8px 10px; align-items: center; }
.so-list li { grid-template-columns: 32px minmax(0, 1fr) auto; }
.pair-list .pk-img, .so-list .pk-img { width: 32px; height: 40px; }
.pl-names, .so-name { display: flex; flex-direction: column; gap: 2px; font-size: var(--t-sm); min-width: 0; }
.pl-names span, .so-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.so-name small { font-size: var(--t-xs); color: var(--ne-muted); }
.pl-n, .so-n { font-size: var(--t-xs); color: var(--ne-muted); white-space: nowrap; }
.pl-n b, .so-n b { font-size: var(--t-md); color: var(--ne-forest-deep); margin-right: 3px; }

/* Columns: pieces per request, requests by day */
.cols { display: flex; align-items: flex-end; gap: 8px; height: 150px; padding-top: 18px; }
.col { flex: 1; min-width: 0; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 4px; }
.col-b { width: 100%; max-width: 44px; min-height: 2px; border-radius: 6px 6px 2px 2px; background: var(--ne-forest); }
.col-n { font-size: var(--t-xs); font-weight: 700; font-variant-numeric: tabular-nums; }
.col-k { font-size: 11px; color: var(--ne-muted); white-space: nowrap; }
.cols.days { overflow-x: auto; }
.cols.days .col { min-width: 38px; }

/* Platforms */
.plat-split { display: flex; gap: 3px; border-radius: 10px; overflow: hidden; }
.ps-seg { min-width: 0; padding: 9px 12px; font-size: var(--t-xs); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; background: var(--ne-plum-soft); color: var(--ne-plum); }
.ps-seg.ps-instagram { background: var(--ne-forest); color: var(--ne-cream); }
.ps-seg b { margin-left: 4px; }

/* Not picked */
.np-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 14px; }
.np-list li { display: flex; flex-direction: column; gap: 6px; font-size: var(--t-xs); color: var(--ne-muted); min-width: 0; }
.np-list li span:last-child { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.np-img { width: 100% !important; height: auto !important; aspect-ratio: 4 / 5; }

@media (max-width: 900px) {
  .ins-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fact:nth-child(3) { border-left: 0; }
  .fact:nth-child(n+3) { border-top: 1px solid rgb(36 36 36 / 0.08); }
  .ins-grid { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .fact { padding: 16px; }
  .fact b { font-size: 1.6rem; }
  .mp-btn { grid-template-columns: 34px minmax(0, 1fr) 30px 12px; grid-template-areas: "img main n chev" "img bar bar bar"; gap: 6px 10px; }
  .mp-rank { display: none; }
  .mp-btn .pk-img { grid-area: img; width: 34px; height: 42px; }
  .mp-main { grid-area: main; } .mp-btn .ins-bar { grid-area: bar; } .mp-n { grid-area: n; } .mp-chev { grid-area: chev; }
  .mp-who { padding-left: 8px; }
  .cf-list li { grid-template-columns: 14px 96px minmax(0, 1fr) 28px; }
}
.ins-grid > .ins-card:last-child:nth-child(odd) { grid-column: 1 / -1; }
.ps-seg { padding: 0; height: 12px; }
.ps-key { display: flex; flex-wrap: wrap; gap: 4px 18px; list-style: none; margin: 10px 0 0; padding: 0; font-size: var(--t-xs); color: var(--ne-muted); }
.ps-key li { display: inline-flex; align-items: center; gap: 6px; } .ps-key b { color: var(--ne-ink); }
.ps-key i { width: 8px; height: 8px; border-radius: 50%; background: var(--ne-plum-soft); box-shadow: inset 0 0 0 1px var(--ne-plum); } .ps-key i.ps-instagram { background: var(--ne-forest); box-shadow: none; }
.np-card summary { cursor: var(--cursor-hand, pointer); list-style: none; margin: 0; }
.np-card summary::-webkit-details-marker { display: none; }
.np-card[open] summary { margin-bottom: 14px; }
.np-show { font-weight: 600; color: var(--ne-plum); margin-left: 6px; }
.np-card[open] .np-show { display: none; }
.np-card summary:focus-visible { outline: 2px solid var(--ne-plum); outline-offset: 4px; border-radius: 6px; }
.who-all { margin: 8px 0 0; }
@media (max-width: 560px) { .np-list { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; } }
/* Piece names wrap to two lines instead of being cut short */
.mp-name { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.3; }