/* NKA Unified Shell v2 — Ink & Brass, elevated (Bodoni lockup + JetBrains Mono labels + brass glass).
   Presentation-only re-skin of v1; identical structure/selectors so the v1 JS/markup keep working.
   All selectors namespaced under .nka-shell. */
.nka-shell{
  --nka-bg:#141820; --nka-bg2:#1b2027; --nka-head:#f4f1ea; --nka-body:#d7d3c8;
  --nka-muted:#9aa1ac; --nka-accent:#d6bc82; --nka-accent-soft:#e6cf9a; --nka-line:rgba(214,188,130,.16);
  --nka-line2:#3b424d; --nka-cta-ink:#14181f; --nka-panel:#161b22;
  --nka-display:'Bodoni Moda',Georgia,serif;
  --nka-mono:'JetBrains Mono',ui-monospace,'SFMono-Regular',monospace;
  --nka-sans:'Inter',-apple-system,system-ui,sans-serif;
  font-family:var(--nka-sans); color:var(--nka-body);
  background:linear-gradient(180deg,var(--nka-bg2),var(--nka-bg));
  border-bottom:1px solid var(--nka-line);
  position:sticky; top:0; z-index:1000;   /* float + stay on scroll, all surfaces */
  box-shadow:0 2px 18px rgba(0,0,0,.28);
}
/* hairline of brass along the very top edge — the console's "proof authority" cue */
.nka-shell::before{content:'';position:absolute;left:0;right:0;top:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(214,188,130,.55),transparent);pointer-events:none}
/* ── LIGHT ────────────────────────────────────────────────────────────────────
   The light theme was a straight inversion of the dark palette and it dissolved
   the bar. --nka-bg and --nka-bg2 were BOTH #f7f3ea, which is also the apex's
   page --bg: the nav measured 1.00:1 against the page it floats over, and its
   only edge, --nka-line #e4ddcf, measured 1.22:1. The bar did not exist, and
   this bar carries the sign-in door.

   The tab strip made it worse. `rgba(0,0,0,.2)` is a recess cut into a DARK
   bar; painted on ivory it composites to #c6c2bb, on which the inactive tab
   (--nka-muted) measured 2.42:1 and the ACTIVE tab (--nka-accent) 2.23:1 — the
   active tab was the least readable thing in the chrome. The brass CTA's white
   label measured 3.96:1.

   What replaces it: the bar is a lifted sheet of paper (#fff → #fbf8f1) on the
   ivory page, held down by a brass rule at 3.34:1 against the page and 3.70:1
   against the bar. Non-text contrast lives in the BOUNDARY, which is what
   WCAG 1.4.11 actually asks for — a nav surface at 3:1 against the page would
   be a mid-grey slab. The recess is now a light one (--nka-recess, the apex's
   own --bg2 #efe9dc rather than a new value), and the brass is deep enough to
   be read as text on it and to carry white as a fill.

   Dark is untouched: every rule below is scoped to a light selector.

   TWO BLOCKS, IDENTICAL APART FROM THE PREFIX. The media query serves `auto`,
   which is everyone signed out and everyone who never picked a side —
   nka-shell.2.js only sets data-nka-theme for an explicit preference. The
   attribute block serves the explicit pick. tests/test_shell_contrast.py
   asserts the two stay in step; do not hand-edit one of them. */
@media (prefers-color-scheme: light){
  .nka-shell:not([data-nka-theme="dark"]){
    --nka-bg:#fbf8f1; --nka-bg2:#ffffff; --nka-head:#1a1f27; --nka-body:#454b54;
    --nka-muted:#6a685f; --nka-accent:#7f642a; --nka-accent-soft:#63501f; --nka-line:#e4ddcf; --nka-line2:#95835b;
    --nka-cta-ink:#fff; --nka-panel:#fff; --nka-recess:#efe9dc; --nka-alert:#b3392a;
    border-bottom-color:var(--nka-line2);
    box-shadow:0 1px 12px rgba(26,31,39,.07);
  }
  .nka-shell:not([data-nka-theme="dark"])::before{background:linear-gradient(90deg,transparent,var(--nka-accent),transparent)}
  .nka-shell:not([data-nka-theme="dark"]) .nka-tabs{background:var(--nka-recess);border-top-color:var(--nka-line)}
  .nka-shell:not([data-nka-theme="dark"]) .nka-switch{background:var(--nka-recess);border-color:var(--nka-line2)}
  .nka-shell:not([data-nka-theme="dark"]) .nka-avatar{background:linear-gradient(135deg,var(--nka-accent),#5f4a1f)}
  .nka-shell:not([data-nka-theme="dark"]) .nka-pop{border-color:var(--nka-line2)}
  .nka-shell:not([data-nka-theme="dark"]) .nka-pop .nka-hd{background:var(--nka-recess)}
  .nka-shell:not([data-nka-theme="dark"]) .nka-badge{background:var(--nka-recess)}
  .nka-shell:not([data-nka-theme="dark"]) .nka-signout{color:var(--nka-alert)}
  /* The reserved-height block is a SIBLING of .nka-shell, so it inherits no
     token and no attribute — it only ever knows the OS. Left dark, it flashed
     a #141820 slab across a light page on every load. */
  .nka-shell-placeholder{background:#fbf8f1;border-bottom:1px solid #95835b}
}
.nka-shell[data-nka-theme="light"]{
  --nka-bg:#fbf8f1; --nka-bg2:#ffffff; --nka-head:#1a1f27; --nka-body:#454b54;
  --nka-muted:#6a685f; --nka-accent:#7f642a; --nka-accent-soft:#63501f; --nka-line:#e4ddcf; --nka-line2:#95835b;
  --nka-cta-ink:#fff; --nka-panel:#fff; --nka-recess:#efe9dc; --nka-alert:#b3392a;
  border-bottom-color:var(--nka-line2);
  box-shadow:0 1px 12px rgba(26,31,39,.07);
}
.nka-shell[data-nka-theme="light"]::before{background:linear-gradient(90deg,transparent,var(--nka-accent),transparent)}
.nka-shell[data-nka-theme="light"] .nka-tabs{background:var(--nka-recess);border-top-color:var(--nka-line)}
.nka-shell[data-nka-theme="light"] .nka-switch{background:var(--nka-recess);border-color:var(--nka-line2)}
.nka-shell[data-nka-theme="light"] .nka-avatar{background:linear-gradient(135deg,var(--nka-accent),#5f4a1f)}
.nka-shell[data-nka-theme="light"] .nka-pop{border-color:var(--nka-line2)}
.nka-shell[data-nka-theme="light"] .nka-pop .nka-hd{background:var(--nka-recess)}
.nka-shell[data-nka-theme="light"] .nka-badge{background:var(--nka-recess)}
.nka-shell[data-nka-theme="light"] .nka-signout{color:var(--nka-alert)}
.nka-shell *{box-sizing:border-box}
.nka-shell a{color:inherit;text-decoration:none}
.nka-shell .nka-top{display:flex;align-items:center;justify-content:space-between;padding:11px 20px;position:relative}
.nka-shell .nka-brand{display:flex;align-items:center;gap:12px}
.nka-shell .nka-logo{height:38px;width:auto;border-radius:6px;display:block}
.nka-shell .nka-product{display:block;font-family:var(--nka-display);font-size:1.16rem;font-weight:600;letter-spacing:-.01em;color:var(--nka-head);line-height:1.1}
.nka-shell .nka-sub{display:block;font-family:var(--nka-mono);font-size:.54rem;color:var(--nka-accent);letter-spacing:.18em;font-weight:500;text-transform:uppercase;margin-top:2px}
.nka-shell .nka-right{display:flex;align-items:center;gap:10px}
.nka-shell .nka-switch,.nka-shell .nka-cta,.nka-shell .nka-signin{cursor:pointer;border-radius:8px}
/* glass tile treatment on the products switcher */
.nka-shell .nka-switch{display:flex;align-items:center;gap:8px;font-family:var(--nka-mono);font-size:.64rem;letter-spacing:.12em;text-transform:uppercase;color:var(--nka-body);
  padding:8px 12px;border:1px solid var(--nka-line);background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.014));position:relative;transition:border-color .18s,transform .18s}
.nka-shell .nka-switch:hover{border-color:var(--nka-accent);transform:translateY(-1px)}
.nka-shell .nka-switch svg{width:14px;height:14px;stroke:var(--nka-accent);fill:none;stroke-width:1.7}
.nka-shell .nka-switch .nka-caret{font-size:.7rem;color:var(--nka-muted)}
.nka-shell .nka-cta{font-family:var(--nka-sans);background:var(--nka-accent);color:var(--nka-cta-ink);font-weight:700;font-size:.82rem;padding:8px 15px;box-shadow:0 6px 18px rgba(214,188,130,.22);transition:transform .18s,box-shadow .18s}
.nka-shell .nka-cta:hover{transform:translateY(-1px);box-shadow:0 9px 24px rgba(214,188,130,.32)}
.nka-shell .nka-signin{font-family:var(--nka-mono);font-size:.64rem;letter-spacing:.12em;text-transform:uppercase;color:var(--nka-body);padding:8px 8px}
.nka-shell .nka-signin:hover{color:var(--nka-accent-soft)}
.nka-shell .nka-user{display:flex;align-items:center;gap:8px;cursor:pointer;position:relative;padding:5px 8px;border-radius:8px;border:1px solid transparent;transition:border-color .18s}
.nka-shell .nka-user:hover{border-color:var(--nka-line)}
.nka-shell .nka-avatar{width:30px;height:30px;border-radius:50%;background:linear-gradient(135deg,var(--nka-accent),#b9985a);color:var(--nka-cta-ink);font-weight:800;font-size:.72rem;display:flex;align-items:center;justify-content:center}
.nka-shell .nka-uname{font-size:.82rem;color:var(--nka-body)}
.nka-shell .nka-tabs{display:flex;align-items:center;gap:2px;padding:0 20px;background:rgba(0,0,0,.2);border-top:1px solid rgba(255,255,255,.03)}
.nka-shell .nka-tab{font-family:var(--nka-mono);padding:11px 14px;font-size:.68rem;letter-spacing:.11em;text-transform:uppercase;color:var(--nka-muted);border-bottom:2px solid transparent;white-space:nowrap;transition:color .18s}
.nka-shell .nka-tab:hover{color:var(--nka-head)}
.nka-shell .nka-tab.active{color:var(--nka-accent);border-bottom-color:var(--nka-accent);font-weight:600}
.nka-shell .nka-tab-cta{font-family:var(--nka-sans);margin-left:auto;background:var(--nka-accent);color:var(--nka-cta-ink);border-radius:7px;padding:6px 13px;font-weight:700;font-size:.78rem;letter-spacing:0;text-transform:none;align-self:center;border-bottom:none}
/* dropdown panels (switcher + user) — glass */
.nka-shell .nka-pop{position:absolute;top:100%;right:0;z-index:1000;margin-top:8px;background:linear-gradient(180deg,rgba(28,34,44,.98),rgba(19,23,31,.98));border:1px solid var(--nka-line);border-radius:12px;min-width:236px;box-shadow:0 20px 56px rgba(0,0,0,.5);overflow:hidden;display:none}
.nka-shell[data-nka-theme="light"] .nka-pop,.nka-shell:not([data-nka-theme="dark"]) .nka-pop{background:var(--nka-panel)}
.nka-shell .nka-pop.open{display:block}
.nka-shell .nka-pop a,.nka-shell .nka-pop .nka-row{display:flex;align-items:center;gap:10px;padding:11px 14px;font-size:.83rem;color:var(--nka-head);border-bottom:1px solid var(--nka-line)}
.nka-shell .nka-pop a:hover{background:rgba(214,188,130,.1)}
.nka-shell .nka-pop .nka-hd{font-family:var(--nka-mono);font-size:.56rem;text-transform:uppercase;letter-spacing:.16em;color:var(--nka-accent);padding:10px 14px;background:rgba(0,0,0,.18)}
.nka-shell .nka-swatch{width:22px;height:22px;border-radius:5px;color:#000;font-family:var(--nka-mono);font-weight:700;font-size:.58rem;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.nka-shell .nka-uinfo{padding:12px 14px;border-bottom:1px solid var(--nka-line)}
.nka-shell .nka-uinfo b{color:var(--nka-head);font-size:.85rem}
.nka-shell .nka-uinfo span{display:block;color:var(--nka-muted);font-size:.72rem}
.nka-shell .nka-signout{color:#e07a6b}
.nka-shell .nka-badge{margin-left:auto;font-family:var(--nka-mono);font-size:.54rem;letter-spacing:.08em;background:rgba(214,188,130,.18);color:var(--nka-accent);padding:2px 8px;border-radius:10px}
/* mobile: collapse tabs to a More menu via .nka-more (JS toggles) */
.nka-shell .nka-more{display:none}
@media (max-width:720px){
  .nka-shell .nka-uname{display:none}
  .nka-shell .nka-product{font-size:1.04rem}
  .nka-shell .nka-tabs{overflow-x:auto;scrollbar-width:none}
  .nka-shell .nka-tabs::-webkit-scrollbar{display:none}
}
/* reserve header height to avoid layout jump before JS runs */
.nka-shell-placeholder{height:96px;background:#141820}
@media (prefers-reduced-motion:reduce){.nka-shell .nka-switch,.nka-shell .nka-cta,.nka-shell .nka-user{transition:none}}