/* ═══════════════════════════════════════════════════════════════════════════
   ValWithProof — shadcn/ui design layer  (Sept 2026)

   Loaded LAST in every document, after shell.css / app.css / the portals'
   own <style> blocks / theme.css. It changes no markup and no behaviour: it
   re-points every token family the product already reads onto the shadcn/ui
   "neutral" system, then restyles the shared primitives (buttons, inputs,
   cards, tabs, chips, badges, sidebar, top bar, modals) to shadcn's shapes.

   Palette: shadcn neutral — white page, near-black primary, zinc/neutral
   greys, 1px #e5e5e5 borders, very soft shadows. Teal #16B8B0 survives only
   as a small accent: the logo, focus rings, verified / success marks.
   Type: Geist + Geist Mono.  Radius: 10px base (sm 6 · md 8 · lg 10 · xl 14).
   ═══════════════════════════════════════════════════════════════════════════ */

:root{
  /* ── the shadcn tokens, by their own names ─────────────────────────── */
  --background:#FFFFFF;          --foreground:#0A0A0A;
  --card:#FFFFFF;                --card-foreground:#0A0A0A;
  --popover:#FFFFFF;             --popover-foreground:#0A0A0A;
  --primary:#171717;             --primary-foreground:#FAFAFA;
  --secondary:#F5F5F5;           --secondary-foreground:#171717;
  --muted:#737373;               /* NB: the portals already use --muted as the muted TEXT colour */
  --muted-bg:#F5F5F5;            --muted-foreground:#737373;
  --accent-bg:#F5F5F5;           --accent-foreground:#171717;
  --destructive:#DC2626;
  --border:#E5E5E5;              --input:#E5E5E5;
  --ring:#16B8B0;                /* the teal, as the focus ring */
  --sidebar:#FAFAFA;
  --radius:10px;
  --shadow-xs:0 1px 2px 0 rgba(0,0,0,.05);
  --shadow-sm:0 1px 3px 0 rgba(0,0,0,.08),0 1px 2px -1px rgba(0,0,0,.08);
  --shadow-md:0 4px 6px -1px rgba(0,0,0,.08),0 2px 4px -2px rgba(0,0,0,.08);
  --shadow-lg:0 10px 15px -3px rgba(0,0,0,.08),0 4px 6px -4px rgba(0,0,0,.08);

  /* ── type ───────────────────────────────────────────────────────────── */
  --font:'Geist',ui-sans-serif,system-ui,-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  --mono:'Geist Mono',ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --font-sans:var(--font);
  --font-mono:var(--mono);

  /* ── theme.css literals ─────────────────────────────────────────────── */
  --th-surface:#FFFFFF; --th-page:#FFFFFF; --th-ink:#0A0A0A; --th-ink-rgb:10,10,10;
  --th-ink2:#404040; --th-muted:#737373; --th-well:#F5F5F5; --th-hover:#F5F5F5;
  --th-line:#E5E5E5; --th-line-strong:#D4D4D4;
  --th-teal-wash:#F5F5F5; --th-teal-wash-2:#F0F0F0; --th-teal-line:#E5E5E5;
  --th-danger-wash:#FEF2F2; --th-danger-line:#FECACA;
  --th-strong:#171717; --th-on-strong:#FAFAFA;
  --th-glass:rgba(255,255,255,.8); --th-surface-rgb:255,255,255; --th-danger:#DC2626;

  /* ── shell family (shell.css, pay, profile, journey, attach, home) ──── */
  --navy:#171717; --white:#FFFFFF; --teal:#16B8B0; --cyan:#16B8B0; --accent:#16B8B0;
  --bg:#FFFFFF; --bg-page:#FFFFFF; --bg-rail:#FAFAFA;
  --surface:#FFFFFF; --surface-2:#F5F5F5; --surface-hover:#F5F5F5;
  --wash:#F5F5F5; --wash-2:#F0F0F0;
  --line:#E5E5E5; --line-strong:#D4D4D4; --line-teal:#E5E5E5;
  --text:#0A0A0A; --text-2:#525252; --text-3:#737373;
  --brand:#171717; --brand-600:#171717; --brand-700:#0A0A0A; --indigo:#171717;
  --grad:linear-gradient(0deg,#171717,#171717);
  --grad-btn:linear-gradient(0deg,#171717,#171717);
  --grad-hair:linear-gradient(90deg,transparent,transparent);
  --glow:var(--shadow-sm); --glow-teal:var(--shadow-sm);
  --ok:#171717; --ok-mark:#16B8B0; --warn:#171717;
  --down:#DC2626; --down-lift:#F87171; --down-wash:#FEF2F2;
  --top-h:56px;
  --r-sm:6px; --r-md:8px; --r-lg:12px; --r-xl:14px; --r-pill:999px;

  /* ── founder app + portals family ───────────────────────────────────── */
  --panel:#FFFFFF; --ink:#0A0A0A; --ink2:#404040;
  --line2:#F0F0F0;
  --g900:#0A0A0A; --g800:#171717; --g700:#171717; --g600:#171717; --g500:#171717;
  --g100:#F5F5F5; --g50:#FAFAFA;
  --blue:#171717; --blue2:#171717;
  --gold:#171717; --gold-soft:#F5F5F5;
  --danger:#DC2626; --danger-soft:#FEF2F2;
  --warn-soft:#F5F5F5;
  --info:#171717; --info-soft:#F5F5F5;
  --surface-raised:#FFFFFF; --well:#F5F5F5;
  --teal-core:#16B8B0;
  --grad-ink:linear-gradient(0deg,#171717,#171717);
  --grad-mark:linear-gradient(0deg,#171717,#171717);
  --grad-teal:linear-gradient(0deg,#16B8B0,#16B8B0);
  --e1:var(--shadow-xs); --e2:var(--shadow-sm); --e3:var(--shadow-lg);
  --e-teal:var(--shadow-sm);
}

:root[data-theme="dark"]{
  color-scheme:dark;
  --background:#0A0A0A;          --foreground:#FAFAFA;
  --card:#0A0A0A;                --card-foreground:#FAFAFA;
  --popover:#171717;             --popover-foreground:#FAFAFA;
  --primary:#FAFAFA;             --primary-foreground:#171717;
  --secondary:#262626;           --secondary-foreground:#FAFAFA;
  --muted:#A3A3A3;
  --muted-bg:#262626;            --muted-foreground:#A3A3A3;
  --accent-bg:#262626;           --accent-foreground:#FAFAFA;
  --destructive:#F87171;
  --border:rgba(255,255,255,.1); --input:rgba(255,255,255,.15);
  --sidebar:#0A0A0A;
  --shadow-xs:0 1px 2px 0 rgba(0,0,0,.4);
  --shadow-sm:0 1px 3px 0 rgba(0,0,0,.5);
  --shadow-md:0 4px 6px -1px rgba(0,0,0,.5);
  --shadow-lg:0 10px 15px -3px rgba(0,0,0,.6),0 0 0 1px rgba(255,255,255,.06);

  --th-surface:#0A0A0A; --th-page:#0A0A0A; --th-ink:#FAFAFA; --th-ink-rgb:250,250,250;
  --th-ink2:#D4D4D4; --th-muted:#A3A3A3; --th-well:#171717; --th-hover:#262626;
  --th-line:rgba(255,255,255,.1); --th-line-strong:rgba(255,255,255,.18);
  --th-teal-wash:#171717; --th-teal-wash-2:#262626; --th-teal-line:rgba(255,255,255,.1);
  --th-danger-wash:rgba(248,113,113,.1); --th-danger-line:rgba(248,113,113,.35);
  --th-strong:#FAFAFA; --th-on-strong:#171717;
  --th-glass:rgba(10,10,10,.8); --th-surface-rgb:10,10,10; --th-danger:#F87171;

  --navy:#171717; --white:#FFFFFF;
  --bg:#0A0A0A; --bg-page:#0A0A0A; --bg-rail:#0A0A0A;
  --surface:#0A0A0A; --surface-2:#171717; --surface-hover:#262626;
  --wash:#171717; --wash-2:#262626;
  --line:rgba(255,255,255,.1); --line-strong:rgba(255,255,255,.18); --line-teal:rgba(255,255,255,.1);
  --text:#FAFAFA; --text-2:#D4D4D4; --text-3:#A3A3A3;
  --brand:#FAFAFA; --brand-600:#FAFAFA; --brand-700:#FFFFFF; --indigo:#FAFAFA;
  --grad:linear-gradient(0deg,#FAFAFA,#FAFAFA);
  --grad-btn:linear-gradient(0deg,#FAFAFA,#FAFAFA);
  --glow:var(--shadow-sm);
  --ok:#FAFAFA; --warn:#FAFAFA;
  --down:#F87171; --down-wash:rgba(248,113,113,.1);

  --panel:#0A0A0A; --ink:#FAFAFA; --ink2:#D4D4D4;
  --line2:rgba(255,255,255,.06);
  --g900:#FFFFFF; --g800:#FAFAFA; --g700:#FAFAFA; --g600:#FAFAFA; --g500:#FAFAFA;
  --g100:#262626; --g50:#171717;
  --blue:#FAFAFA; --blue2:#FAFAFA;
  --gold:#FAFAFA; --gold-soft:#171717;
  --danger:#F87171; --danger-soft:rgba(248,113,113,.1);
  --warn-soft:#171717;
  --info:#FAFAFA; --info-soft:#171717;
  --surface-raised:#171717; --well:#171717;
  --grad-ink:linear-gradient(0deg,#171717,#171717);
  --grad-mark:linear-gradient(0deg,#171717,#171717);
}

/* ══ base ══════════════════════════════════════════════════════════════════ */
html{-webkit-text-size-adjust:100%}
body{
  font-family:var(--font) !important;
  font-feature-settings:"rlig" 1,"calt" 1;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
}
:root[data-theme="dark"] body{background-color:var(--background)}
input,select,textarea,button{font-family:inherit}
code,kbd,pre,samp,.mono{font-family:var(--mono)}
h1,h2,h3,h4{letter-spacing:-.025em}
::selection{background:rgba(22,184,176,.22)}
:root[data-theme="dark"] ::selection{background:rgba(22,184,176,.35);color:#FAFAFA}

/* One focus ring, shadcn's: 3px, soft, in the accent. */
:where(a,button,input,select,textarea,summary,[tabindex]):focus-visible{
  outline:none !important;
  box-shadow:0 0 0 1px var(--ring),0 0 0 4px rgba(22,184,176,.25) !important;
  border-radius:var(--r-md);
}

/* No lifts, no glows. shadcn surfaces do not jump when hovered. */
:where(.btn,.btn-primary,.btn-ghost,.primary,.cta,button.go,a.card,.card,.xcard,.mcard,.team-card,.browse-card,.apicard,.tile,.mrow):hover{
  transform:none !important;
}

/* Scrollbars, thin and neutral */
*{scrollbar-width:thin;scrollbar-color:rgba(115,115,115,.35) transparent}

/* ══ buttons ═══════════════════════════════════════════════════════════════
   shadcn: h-9, px-4, rounded-md, text-sm, font-medium, shadow-xs.
   Variants: default (primary), outline, secondary, ghost, destructive.     */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:36px;height:auto;padding:8px 16px;
  border-radius:var(--r-md) !important;
  font-size:14px;font-weight:500;line-height:1.25;letter-spacing:0;white-space:nowrap;
  border:1px solid var(--border);
  background:var(--background);color:var(--foreground);
  box-shadow:var(--shadow-xs);
  transition:background-color .15s ease,border-color .15s ease,color .15s ease,box-shadow .15s ease,opacity .15s ease;
}
.btn:hover{background:var(--accent-bg);border-color:var(--border);color:var(--accent-foreground)}

/* primary */
.btn-primary,.btn.p,.btn.meet.p,button.go,.btn.gold{
  background:var(--primary) !important;border-color:var(--primary) !important;
  color:var(--primary-foreground) !important;box-shadow:var(--shadow-xs) !important;
  font-weight:500;
}
.btn-primary:hover,.btn.p:hover,.btn.meet.p:hover,button.go:hover,.btn.gold:hover{
  background:color-mix(in srgb,var(--primary) 90%,transparent) !important;
  border-color:transparent !important;
}
/* secondary / outline */
.btn-ghost{background:var(--background);border:1px solid var(--border);color:var(--foreground);box-shadow:var(--shadow-xs)}
.btn-ghost:hover{background:var(--accent-bg);border-color:var(--border)}
/* ghost */
.btn.q,.btn.gh{background:transparent;border-color:transparent;box-shadow:none;color:var(--foreground)}
.btn.q:hover,.btn.gh:hover{background:var(--accent-bg);color:var(--accent-foreground);border-color:transparent}
/* small */
.btn.sm{min-height:32px;padding:6px 12px;font-size:13px;border-radius:var(--r-md) !important;
  background:var(--background);border-color:var(--border);box-shadow:var(--shadow-xs)}
.btn.sm:hover{background:var(--accent-bg)}
.btn.sm.p{background:var(--primary) !important}
/* large */
.btn-lg,.btn.lg{min-height:40px;padding:10px 24px;font-size:14px;border-radius:var(--r-md) !important}
/* destructive (outline form, as the product used it) */
.btn.dg{color:var(--destructive);border-color:var(--border);background:var(--background)}
.btn.dg:hover{background:var(--danger-soft);border-color:color-mix(in srgb,var(--destructive) 40%,transparent);color:var(--destructive)}
/* disabled */
.btn:disabled,.btn[disabled],.btn[aria-disabled='true']{opacity:.5;pointer-events:none;box-shadow:none}
.btn.blk{width:100%}
.btn svg{flex:none}

/* ══ inputs ════════════════════════════════════════════════════════════════
   shadcn Input: h-9, rounded-md, border-input, bg-transparent, shadow-xs,
   focus ring 3px.                                                         */
.inp,.field input,.field select,.field textarea,
input[type='text'],input[type='email'],input[type='password'],input[type='tel'],
input[type='number'],input[type='url'],input[type='search'],input[type='date'],
input[type='time'],input:not([type]),select,textarea{
  border:1px solid var(--input);
  border-radius:var(--r-md);
  background-color:transparent;
  color:var(--foreground);
  font-size:14px;
  box-shadow:var(--shadow-xs);
  transition:border-color .15s ease,box-shadow .15s ease;
}
:root[data-theme="dark"] :is(.inp,input,select,textarea){background-color:rgba(255,255,255,.045)}
.inp{min-height:36px;padding:7px 12px}
:is(.inp,input,select,textarea)::placeholder{color:var(--muted-foreground)}
:is(.inp,input,select,textarea):focus,
:is(.inp,input,select,textarea):focus-visible{
  outline:none !important;border-color:var(--ring) !important;
  box-shadow:0 0 0 3px rgba(22,184,176,.22) !important;
}
input[type='checkbox'],input[type='radio'],input[type='range'],input[type='file'],input[type='color']{
  box-shadow:none;accent-color:var(--primary);
}
.idea-box textarea{border-radius:var(--r-lg) !important}
label{font-weight:500}

/* ══ cards ═════════════════════════════════════════════════════════════════
   shadcn Card: rounded-xl, border, bg-card, shadow-sm.                    */
.card,.xcard,.mcard,.fcard,.gatecard,.team-card,.browse-card,.ideacard,.apicard{
  background:var(--card);
  border:1px solid var(--border) !important;
  border-radius:var(--r-xl) !important;
  box-shadow:var(--shadow-sm);
  color:var(--card-foreground);
}
a.card:hover,.xcard:hover,.mcard:hover,.team-card:hover,.browse-card:hover,.apicard:hover{
  box-shadow:var(--shadow-md);border-color:var(--line-strong) !important;
}
.card h3,.xcard h3{font-weight:600;letter-spacing:-.015em}
.card p{color:var(--muted-foreground)}
.card-ico{
  background:var(--muted-bg) !important;color:var(--foreground) !important;
  border:1px solid var(--border);border-radius:var(--r-md) !important;box-shadow:none !important;
}

/* ══ badges / chips / pills ════════════════════════════════════════════════
   shadcn Badge: rounded-md, px-2 py-0.5, text-xs, font-medium.            */
.vbadge,.tkbadge,.ranbadge,.nav-tag,.pill{
  border-radius:var(--r-md) !important;font-size:12px;font-weight:500;
}
.vbadge{background:var(--secondary);color:var(--secondary-foreground);border:1px solid transparent}
.vbadge svg{color:var(--teal)}
.chip{
  border:1px solid var(--border);background:var(--background);color:var(--foreground);
  border-radius:var(--r-md) !important;font-size:13px;font-weight:500;box-shadow:var(--shadow-xs);
}
.chip:hover{background:var(--accent-bg)}
.chip.on{background:var(--primary) !important;border-color:var(--primary) !important;color:var(--primary-foreground) !important}
.eyebrow{
  display:inline-flex;align-items:center;gap:6px;
  color:var(--muted-foreground) !important;font-weight:500;letter-spacing:0 !important;
  text-transform:none !important;font-size:13px !important;
}

/* ══ tabs ══════════════════════════════════════════════════════════════════
   The product's tabs are underline tabs. Kept as underline (shadcn's "line"
   variant), in the foreground colour instead of the teal.                 */
.tabs button{font-weight:500;color:var(--muted-foreground);font-size:14px}
.tabs button:hover{color:var(--foreground)}
.tabs button.on{color:var(--foreground) !important;border-bottom-color:var(--foreground) !important;font-weight:500}
.tabs .count{background:var(--secondary);color:var(--secondary-foreground);border-radius:var(--r-md)}
.cwtabs button.on{color:var(--foreground)}

/* ══ top bar ═══════════════════════════════════════════════════════════════
   shadcn site header: h-14, bg-background/95 + blur, 1px bottom border,
   no coloured hairline.                                                   */
.topbar,.sitebar{
  background:color-mix(in srgb,var(--background) 92%,transparent) !important;
  backdrop-filter:saturate(180%) blur(12px);-webkit-backdrop-filter:saturate(180%) blur(12px);
  border-bottom:1px solid var(--border) !important;box-shadow:none !important;
}
.topbar::after,.sitebar::after{display:none !important;content:none !important}
.logo small{color:var(--muted-foreground) !important;font-weight:500;letter-spacing:.02em !important}
.acct-btn{border-radius:var(--r-md) !important;border:1px solid var(--border) !important;box-shadow:var(--shadow-xs)}
.acct-btn:hover{background:var(--accent-bg) !important}
.bell-btn{border-radius:var(--r-md) !important}
.bell-btn:hover{background:var(--accent-bg) !important;color:var(--foreground) !important}
.vwp-theme-btn{border-radius:var(--r-md) !important;border-color:var(--border) !important;box-shadow:var(--shadow-xs)}
.vwp-theme-btn:hover{background:var(--accent-bg) !important}

/* ══ sidebar (founder shell .rail, portals .side / .sidetabs) ══════════════
   shadcn Sidebar: bg-sidebar, 1px right border, menu buttons h-8 rounded-md
   text-sm; the active item is bg-accent + font-medium, no bar.            */
.rail{background:var(--sidebar) !important;border-right:1px solid var(--border) !important;box-shadow:none !important}
.nav-item{
  border-radius:var(--r-md) !important;font-size:14px;font-weight:400;color:var(--text-2);
}
.nav-item:hover{background:var(--accent-bg) !important;color:var(--foreground) !important}
.nav-item[aria-current='page']{
  background:var(--accent-bg) !important;color:var(--foreground) !important;font-weight:500;
  box-shadow:none !important;
}
:root[data-theme="dark"] .nav-item[aria-current='page']{background:#262626 !important}
.nav-item[aria-current='page']::before{display:none !important}
.nav-item[aria-current='page'] svg{color:var(--foreground) !important}
.side,.sidetabs{background:var(--sidebar)}
.sidetabs button,.side button,.side a{border-radius:var(--r-md)}
.sidetabs button.on,.side button.on,.side a.on,.sidetabs [aria-current='page']{
  background:var(--accent-bg) !important;color:var(--foreground) !important;box-shadow:none !important;font-weight:500;
}
.sidetabs button.on::before,.side button.on::before{display:none !important}
.rail-foot{color:var(--muted-foreground)}

/* ══ overlays: modal / sheet / popover / toast ═════════════════════════════
   shadcn Dialog: rounded-lg border shadow-lg; overlay black/50.           */
:where(.modal,.sheet,.acct-pop,.pop,.menu,.drawer){
  border:1px solid var(--border) !important;border-radius:var(--r-lg) !important;
  box-shadow:var(--shadow-lg) !important;background:var(--popover);color:var(--popover-foreground);
}
:where(.backdrop,.scrim,.modal-bg){background:rgba(0,0,0,.5) !important;backdrop-filter:none !important}
:where(.toast){border-radius:var(--r-lg) !important;border:1px solid var(--border);box-shadow:var(--shadow-lg) !important}

/* ══ tables ════════════════════════════════════════════════════════════════ */
table{border-collapse:collapse}
th{font-weight:500;color:var(--muted-foreground);text-align:left}
th,td{border-bottom:1px solid var(--border)}
tbody tr:hover{background:color-mix(in srgb,var(--muted-bg) 50%,transparent)}

/* ══ accordion (<details>) ═════════════════════════════════════════════════ */
details.qa{border:0 !important;border-bottom:1px solid var(--border) !important;border-radius:0 !important;
  background:transparent !important;box-shadow:none !important;padding:0 !important}
details.qa summary{padding:16px 0;font-weight:500;font-size:15px}
details.qa p{color:var(--muted-foreground);margin:0 0 16px}

/* ══ brand grounds that were dark bands ════════════════════════════════════
   shadcn has no dark bands on a light page. The hero plates keep one dark
   ground (#171717) with neutral hairline — flat, no gradient.             */
.xhero,.ring-top,.ringsheet-top,.arrive,.door.mentor{background:#171717 !important}
.grad{background:none !important;-webkit-text-fill-color:currentColor !important;color:inherit !important}

/* ══ the founder shell's landing sections (hero, band, steps, faq) ═══════ */
.hero h1{font-weight:600 !important;letter-spacing:-.035em !important}
.hero .lede,.band .sub{color:var(--muted-foreground) !important}
.band h2{font-weight:600 !important;letter-spacing:-.03em !important}
.band.alt{background:var(--background) !important;border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
.step{border-radius:var(--r-xl) !important;border:1px solid var(--border) !important;background:var(--card) !important;box-shadow:var(--shadow-sm) !important}

/* ══ the founders-and-mentors doodle backdrop ══════════════════════════════
   Kept, but washed down hard so the page reads as shadcn's plain background
   with the artwork as a faint texture, not a picture.                     */
.main::before{
  background:linear-gradient(rgba(255,255,255,.94),rgba(255,255,255,.94)),
    #FFFFFF url(/assets/bg/bg-light.webp) center / cover no-repeat !important;
}
:root[data-theme="dark"] .main::before{
  background:linear-gradient(rgba(10,10,10,.93),rgba(10,10,10,.93)),
    #0A0A0A url(/assets/bg/bg-dark.webp) center / cover no-repeat !important;
}
.main::after{background:#0A0A0A !important;opacity:.025 !important}
:root[data-theme="dark"] .main::after{background:#FFFFFF !important;opacity:.02 !important}
.topbar{background:color-mix(in srgb,var(--background) 80%,transparent) !important}

@media (prefers-reduced-motion:reduce){
  .btn,.card,.chip,.nav-item{transition:none !important}
}

/* ── founder shell touch-ups ── */
.nav-item{border:1px solid transparent !important}
.nav-item[aria-current='page']{border-color:transparent !important}
.idea-box textarea{background:transparent !important;box-shadow:var(--shadow-xs) !important;border:1px solid var(--input) !important}
:root[data-theme="dark"] .idea-box textarea{background:rgba(255,255,255,.045) !important}
.idea-box{border-radius:var(--r-xl) !important;box-shadow:var(--shadow-sm) !important;border:1px solid var(--border) !important;background:var(--card) !important}

/* ══ sidebar feature icons ═════════════════════════════════════════════════
   Each feature's icon sits in its own small tile, shadcn-style: outlined and
   quiet at rest, filled with the primary colour on the current feature. In
   the collapsed rail the tiles are the whole navigation, so each one names
   itself in a tooltip on hover or keyboard focus. */
.nav-item{gap:12px !important;padding:8px 10px !important}
.nav-ico{
  width:32px;height:32px;flex:none;display:grid;place-items:center;
  border-radius:var(--r-md);border:1px solid var(--border);
  background:var(--background);color:var(--muted-foreground);box-shadow:var(--shadow-xs);
  transition:background-color .15s ease,color .15s ease,border-color .15s ease;
}
.nav-ico svg{display:block;opacity:1 !important;color:currentColor !important}
.nav-item:hover .nav-ico{color:var(--foreground);border-color:var(--line-strong)}
.nav-item[aria-current='page'] .nav-ico{
  background:var(--primary);border-color:var(--primary);color:var(--primary-foreground);box-shadow:none;
}
.nav-item[aria-current='page'] .nav-ico svg{color:var(--primary-foreground) !important}
.nav-name{font-size:14px}
.nav-sub{font-size:12px !important}

/* collapsed rail: tiles only, centred, with a tooltip */
body.rail-collapsed .nav{gap:6px}
body.rail-collapsed .nav-item{justify-content:center;padding:4px 0 !important;background:transparent !important}
body.rail-collapsed .nav-ico{width:40px;height:40px}
body.rail-collapsed .nav-item:hover .nav-ico{background:var(--accent-bg)}
body.rail-collapsed .nav-item[aria-current='page'] .nav-ico{background:var(--primary)}
body.rail-collapsed .nav-item::after{
  content:attr(data-label);position:absolute;left:calc(100% + 10px);top:50%;z-index:60;
  transform:translate(-4px,-50%);opacity:0;pointer-events:none;white-space:nowrap;
  padding:5px 10px;border-radius:var(--r-md);font-size:12px;font-weight:500;
  background:var(--primary);color:var(--primary-foreground);box-shadow:var(--shadow-md);
  transition:opacity .12s ease,transform .12s ease;
}
body.rail-collapsed .nav-item:hover::after,
body.rail-collapsed .nav-item:focus-visible::after{opacity:1;transform:translate(0,-50%)}
/* the collapsed rail must let the tooltip out */
body.rail-collapsed .rail{overflow:visible;z-index:30}
@media (max-width:1000px){ body.rail-collapsed .nav-item::after{display:none} }
@media (prefers-reduced-motion:reduce){ .nav-ico,body.rail-collapsed .nav-item::after{transition:none} }

/* ══ sidebar feature icons, v3 — monochrome tiles, animated ═════════════════
   White tiles with a hairline border and a soft shadow, dark grey line icons;
   the current page is a solid black tile with a white icon. Each icon has
   its own small motion on hover/focus (the magnifier scans, the squares
   shuffle, the plus turns, the chat dots type, the plug pushes in, the trend
   draws itself), the tiles rise in one after another when the page opens,
   and the current tile settles in with a small pop. */
#nav .nav-ico{
  width:40px;height:40px;border-radius:12px;
  background:var(--background,#fff);color:#3f3f46;
  border:1px solid var(--border,#e5e5e5);
  box-shadow:0 1px 2px rgba(0,0,0,.05),0 2px 6px -2px rgba(0,0,0,.06);
  transition:background-color .2s ease,color .2s ease,border-color .2s ease,box-shadow .2s ease,transform .2s cubic-bezier(.2,.9,.3,1.3);
}
#nav .nav-ico svg{width:20px !important;height:20px !important;color:currentColor !important;overflow:visible}
#nav .nav-name{font-weight:500;color:var(--foreground);letter-spacing:-.005em}
#nav .nav-item[aria-current='page'] .nav-name{font-weight:600}
#nav .nav-item:hover .nav-ico,#nav .nav-item:focus-visible .nav-ico{
  color:#0a0a0a;border-color:#d4d4d8;transform:translateY(-2px);
  box-shadow:0 2px 4px rgba(0,0,0,.06),0 8px 16px -6px rgba(0,0,0,.14);
}
#nav .nav-item:active .nav-ico{transform:translateY(0) scale(.96)}
#nav .nav-item[aria-current='page'] .nav-ico{
  background:#0a0a0a;border-color:#0a0a0a;color:#fff;
  box-shadow:0 6px 16px -6px rgba(0,0,0,.45);
  animation:nv-pop .45s cubic-bezier(.2,.9,.3,1.4) both;
}
#nav .nav-item[aria-current='page'] .nav-ico svg{color:#fff !important}
:root[data-theme="dark"] #nav .nav-ico{background:#18181b;color:#d4d4d8;border-color:#27272a;box-shadow:none}
:root[data-theme="dark"] #nav .nav-item:hover .nav-ico{color:#fff;border-color:#3f3f46;box-shadow:0 8px 16px -8px rgba(0,0,0,.6)}
:root[data-theme="dark"] #nav .nav-item[aria-current='page'] .nav-ico{background:#fafafa;border-color:#fafafa;color:#0a0a0a}
:root[data-theme="dark"] #nav .nav-item[aria-current='page'] .nav-ico svg{color:#0a0a0a !important}
body.rail-collapsed #nav .nav-ico{width:42px;height:42px}

/* tiles rise in, one after another */
#nav .nav-item{animation:nv-in .45s cubic-bezier(.2,.8,.2,1) both}
#nav .nav-item:nth-child(1){animation-delay:.02s}#nav .nav-item:nth-child(2){animation-delay:.07s}
#nav .nav-item:nth-child(3){animation-delay:.12s}#nav .nav-item:nth-child(4){animation-delay:.17s}
#nav .nav-item:nth-child(5){animation-delay:.22s}#nav .nav-item:nth-child(6){animation-delay:.27s}
@keyframes nv-in{from{opacity:0;transform:translateX(-8px)}to{opacity:1;transform:none}}
@keyframes nv-pop{0%{transform:scale(.86)}60%{transform:scale(1.06)}100%{transform:scale(1)}}

/* per-icon motion */
#nav svg *{transform-box:fill-box;transform-origin:center}
#nav .a-lens{transform-origin:30% 30%}
#nav .nav-item:hover .a-lens,#nav .nav-item:focus-visible .a-lens{animation:nv-scan 1s ease-in-out infinite}
@keyframes nv-scan{0%,100%{transform:translate(0,0)}25%{transform:translate(-1.5px,-1px)}50%{transform:translate(0,-2px)}75%{transform:translate(1.5px,-1px)}}
#nav .nav-item:hover .a-ping{animation:nv-ping 1s ease-out infinite}
@keyframes nv-ping{0%{transform:scale(1);opacity:1}70%{transform:scale(2);opacity:0}100%{opacity:0}}

#nav .nav-item:hover .a-sq{animation:nv-sq .9s ease-in-out infinite}
#nav .nav-item:hover .a-sq.a2{animation-delay:.12s}#nav .nav-item:hover .a-sq.a4{animation-delay:.24s}#nav .nav-item:hover .a-sq.a3{animation-delay:.36s}
@keyframes nv-sq{0%,100%{transform:scale(1)}40%{transform:scale(.72)}}

#nav .a-plus{transition:transform .45s cubic-bezier(.2,.9,.3,1.3)}
#nav .nav-item:hover .a-plus,#nav .nav-item:focus-visible .a-plus{transform:rotate(90deg) scale(1.1)}

#nav .nav-item:hover .a-dot{animation:nv-type 1s ease-in-out infinite}
#nav .nav-item:hover .a-dot.d2{animation-delay:.15s}#nav .nav-item:hover .a-dot.d3{animation-delay:.3s}
@keyframes nv-type{0%,60%,100%{transform:translateY(0);opacity:.55}30%{transform:translateY(-1.8px);opacity:1}}
#nav .a-back{transition:transform .3s ease}
#nav .nav-item:hover .a-back{transform:translate(.8px,-.8px)}

#nav .a-plug{transition:transform .3s cubic-bezier(.2,.9,.3,1.4)}
#nav .nav-item:hover .a-plug{animation:nv-plug 1.1s ease-in-out infinite}
@keyframes nv-plug{0%,100%{transform:translateY(0)}45%{transform:translateY(2px)}55%{transform:translateY(2px)}}

#nav .a-trend path{stroke-dasharray:22;stroke-dashoffset:0}
#nav .nav-item:hover .a-trend path{animation:nv-draw 1.2s ease-in-out infinite}
@keyframes nv-draw{0%{stroke-dashoffset:22}55%,100%{stroke-dashoffset:0}}

@media (prefers-reduced-motion:reduce){
  #nav .nav-item,#nav .nav-ico,#nav .nav-item[aria-current='page'] .nav-ico,#nav svg *{animation:none !important;transition:none !important}
  #nav .nav-item:hover .nav-ico{transform:none}
}

/* ══ sidebar, larger (Sept 2026) ═══════════════════════════════════════════
   The feature tiles were 40–42px with 20px glyphs — small targets for the
   main navigation. Everything scales up one step: 48px tiles and 24px glyphs
   in the open rail, a 92px collapsed rail with 56px tiles and 26px glyphs,
   a larger mark, and bigger labels. */
:root{--rail-w:288px}
.brand{font-size:21px}
.brand-mark{width:38px;height:38px;border-radius:10px}
#nav .nav-item{gap:14px !important;padding:8px 10px !important}
#nav .nav-ico{width:48px;height:48px;border-radius:14px}
#nav .nav-ico svg{width:24px !important;height:24px !important}
#nav .nav-name{font-size:15.5px}
#nav .nav-sub{font-size:13px !important}

body.rail-collapsed .layout{grid-template-columns:92px 1fr}
body.rail-collapsed .rail{padding:22px 12px}
body.rail-collapsed .brand-mark{width:46px;height:46px;border-radius:12px}
body.rail-collapsed .nav{gap:12px}
body.rail-collapsed .nav-item{padding:3px 0 !important}
body.rail-collapsed #nav .nav-ico{width:58px;height:58px;border-radius:16px}
body.rail-collapsed #nav .nav-ico svg{width:27px !important;height:27px !important}
body.rail-collapsed .rail-collapse{width:40px;height:40px}
body.rail-collapsed .rail-collapse svg{width:22px;height:22px}
body.rail-collapsed .nav-item::after{font-size:13px;padding:7px 12px}
@media (max-width:1000px){
  body.rail-collapsed .layout{grid-template-columns:1fr}
  body.rail-collapsed .rail{padding:20px 16px}
  body.rail-collapsed #nav .nav-ico{width:48px;height:48px}
}