/* ═══════════════════════════════════════════════════════════════════════════
   ui/theme.css — the NOCTIS chrome system, shared by the difference viewer.
   ---------------------------------------------------------------------------
   Same token names, same nav idiom, same card language as showcase/index.html,
   showcase/about.html and ui/cells.html/cells.css — so the viewer reads as a
   sibling of that family instead of its own separate dark-only skin.

   Scope: this file styles CHROME ONLY (nav, honesty strip, floating control
   panels, the file:// guard). It never touches #aladin-lite-container or
   anything inside it — the WebGL2/WASM rendering (colormaps, cuts, the
   texParameteri smoothing shim, the background-colour-forcing interval) stays
   exactly as index.html's own <style>/<script> blocks left it.

   Because this page is a full-bleed single-view app (nothing scrolls), the
   nav is always rendered in its "stuck" (opaque, blurred) state rather than
   fading in only after a scroll the way the marketing pages do — a
   permanently transparent bar over a busy sky image would be unreadable.
   Everything else (tokens, spacing, type, tab treatment) is unchanged.
   ═══════════════════════════════════════════════════════════════════════════ */

:root{
  --bg:#04060c;
  --bg-2:#080d18;
  --ink:#e8edf8;
  --ink-2:#96a1bb;
  --ink-3:#59647e;
  --line:rgba(160,185,235,.16);
  --line-2:rgba(160,185,235,.075);
  --cy:#7ae2ff;
  --am:#ff8a3d;
  --vi:#a68bfa;
  --gr:#5ff2b4;
  --card:rgba(11,17,30,.72);
  --card-2:rgba(11,17,30,.92);
  --shadow:0 30px 80px -30px rgba(0,0,0,.9);
  --scrim:rgba(4,6,12,.72);
  --sel:rgba(122,226,255,.28);

  --ff-d:'Archivo','Helvetica Neue',Arial,sans-serif;
  --ff-m:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;

  --gut:clamp(14px,2.6vw,28px);
  --e-out:cubic-bezier(.16,1,.3,1);
  --e-io:cubic-bezier(.76,0,.24,1);

  /* the chrome stack, top to bottom — every floating panel offsets from these
     so nothing has to hardcode "nav height + honesty height" arithmetic */
  /* Matches the padding-based .nav box in ui/cells.css and the showcase pages
     (16px + content + 16px = 67px measured), so the shared header is the same
     height everywhere. Every panel offset derives from --nav-h/--chrome-h, so
     this is the only number to change. */
  --nav-h:67px;
  --hbar-h:32px;
  --chrome-h:calc(var(--nav-h) + var(--hbar-h));
}
html[data-theme="plate"]{
  --bg:#e9e3d6;
  --bg-2:#ded6c5;
  --ink:#14120c;
  --ink-2:#453f2f;
  --ink-3:#5f5847;
  --line:rgba(30,26,14,.22);
  --line-2:rgba(30,26,14,.1);
  --cy:#0e6b7d;
  --am:#a8410c;
  --vi:#59379c;
  --gr:#1d6b46;
  --card:rgba(246,242,232,.82);
  --card-2:rgba(246,242,232,.95);
  --shadow:0 30px 70px -34px rgba(60,48,20,.5);
  --scrim:rgba(233,227,214,.78);
  --sel:rgba(14,107,125,.22);
}

*,*::before,*::after{box-sizing:border-box}
::selection{background:var(--sel);color:var(--ink)}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
:focus-visible{outline:2px solid var(--cy);outline-offset:2px}
.tag{font-family:var(--ff-m);font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-3)}

/* ═════════ NAV — identical language to cells.html, permanently "stuck" ═══ */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:1200;
  height:var(--nav-h);
  display:flex;align-items:center;gap:18px;
  padding:0 var(--gut);
  background:color-mix(in srgb,var(--bg) 78%,transparent);
  backdrop-filter:blur(16px) saturate(1.2);
  -webkit-backdrop-filter:blur(16px) saturate(1.2);
  border-bottom:1px solid var(--line-2);
  font-family:var(--ff-d);
}
.brand{display:flex;align-items:center;gap:9px;flex:0 0 auto}
.brand svg{width:19px;height:19px;overflow:visible}
.brand .b-cell{fill:none;stroke:var(--cy);stroke-width:1.3}
.brand .b-dot{fill:var(--am)}
.brand-txt{font-family:var(--ff-m);font-size:10.5px;letter-spacing:.26em;text-transform:uppercase;line-height:1;color:var(--ink)}
.brand-txt small{display:block;font-size:8px;letter-spacing:.18em;color:var(--ink-3);margin-top:3px}
.nav-links{display:flex;gap:2px;margin-left:auto}
.nav-links a{
  font-family:var(--ff-m);font-size:10px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink-2);padding:7px 11px;position:relative;transition:color .3s;
}
.nav-links a span{position:relative;z-index:1}
.nav-links a::after{
  content:'';position:absolute;left:11px;right:11px;bottom:4px;height:1px;
  background:var(--cy);transform:scaleX(0);transform-origin:0 50%;
  transition:transform .45s var(--e-out);
}
.nav-links a:hover{color:var(--ink)}
.nav-links a:hover::after,.nav-links a.on::after{transform:scaleX(1)}
.nav-links a.on{color:var(--ink)}
.tab{display:inline-flex;align-items:center;gap:8px}
.ctrl{display:flex;gap:8px;align-items:center;margin-left:12px;flex:0 0 auto}
.btn-i{
  width:32px;height:32px;display:grid;place-items:center;
  border:1px solid var(--line);border-radius:2px;color:var(--ink-2);
  transition:border-color .3s,color .3s,background .3s;
}
.btn-i:hover{border-color:var(--cy);color:var(--cy);background:color-mix(in srgb,var(--cy) 8%,transparent)}
.btn-i svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round}

/* Which tabs survive which width is decided ONCE, in ../site-nav.css, so the
   header is identical on every page that carries it. Only spacing lives here. */
@media (max-width:760px){
  .nav-links a{padding:7px 8px}
}
@media (max-width:520px){ .brand-txt small{display:none} }
@media (max-width:460px){ .brand-txt{display:none} }
@media (max-width:400px){
  .nav{gap:6px;padding:0 10px}
  .nav-links{gap:0}
  .nav-links a{padding:6px 6px}
  .ctrl{margin-left:4px}
  .btn-i{width:28px;height:28px}
}

/* ═════════ HONESTY STRIP — directly under the nav, full width ═══════════ */
#hbar{
  position:fixed;top:var(--nav-h);left:0;right:0;z-index:1190;
  height:var(--hbar-h);
  display:flex;align-items:center;gap:10px;
  padding:0 var(--gut);
  background:color-mix(in srgb,var(--am) 7%,var(--bg) 85%);
  border-bottom:1px solid var(--line-2);
  border-left:2px solid var(--am);
  overflow:hidden;
}
#hbar .tag{white-space:nowrap;flex:0 0 auto}
#hbar p{
  margin:0;color:var(--ink-2);font-family:var(--ff-m);font-size:10.5px;letter-spacing:.03em;
  line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  flex:1 1 auto;min-width:0;
}
#hbar strong{color:var(--am);font-weight:400}
/* below this, the field/exposure tag is a "nice to have" — the honesty
   sentence (the non-negotiable part) is what must survive */
@media (max-width:640px){ #hbar .tag{display:none} }

/* ═════════ SHARED FLOATING-PANEL CHROME ══════════════════════════════════
   Every control surface (display panel, hips picker, sidebar trigger row)
   pulls from this so they read as one instrument rather than N bolted-on
   widgets: same glass background, same border, same corner radius, same
   mono/uppercase label treatment. */
.zc-panel{
  background:var(--card-2);
  border:1px solid var(--line);
  border-radius:3px;
  backdrop-filter:blur(14px) saturate(1.25);
  -webkit-backdrop-filter:blur(14px) saturate(1.25);
  box-shadow:var(--shadow);
  color:var(--ink);
  font-family:var(--ff-d);
}
.zc-toolbar{
  display:flex;align-items:center;gap:6px;
  background:var(--card-2);
  border:1px solid var(--line);
  border-radius:3px;
  backdrop-filter:blur(14px) saturate(1.25);
  -webkit-backdrop-filter:blur(14px) saturate(1.25);
  padding:5px;
}
.zc-btn{
  height:30px;padding:0 11px;
  display:inline-flex;align-items:center;gap:5px;
  border:1px solid transparent;border-radius:2px;
  font-family:var(--ff-m);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--ink-2);white-space:nowrap;
  transition:color .2s,border-color .2s,background .2s;
}
.zc-btn:hover{color:var(--ink);border-color:var(--line);background:color-mix(in srgb,var(--cy) 6%,transparent)}
.zc-btn.on{color:var(--am);border-color:color-mix(in srgb,var(--am) 55%,var(--line));background:color-mix(in srgb,var(--am) 12%,transparent)}
.zc-btn-sq{width:30px;padding:0;justify-content:center;font-size:15px}
.zc-sep{width:1px;align-self:stretch;background:var(--line);margin:3px 1px}

.zc-panel-head{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:9px 11px;border-bottom:1px solid var(--line-2);
}
.zc-panel-title{
  font-family:var(--ff-m);font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--am);
}
.zc-close{
  width:22px;height:22px;display:grid;place-items:center;
  border:1px solid var(--line);border-radius:2px;color:var(--ink-2);font-size:13px;line-height:1;
  transition:border-color .2s,color .2s;
}
.zc-close:hover{border-color:var(--cy);color:var(--cy)}
.zc-section-label{
  font-family:var(--ff-m);font-size:9px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-3);
  padding:10px 11px 4px;
}
.zc-hint{color:var(--ink-3);font-size:10.5px;line-height:1.55;padding:0 11px 10px}
.zc-hint code{color:var(--ink-2)}

/* ═════════ FILE:// GUARD — identical contract to cells.html ═════════════ */
#fileGate{
  position:fixed;inset:0;z-index:3000;display:grid;place-items:center;
  background:color-mix(in srgb,var(--bg) 82%,transparent);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);padding:var(--gut);
}
#fileGate[hidden]{display:none}
.fg-card{
  width:min(520px,100%);background:var(--card-2);border:1px solid var(--line);
  padding:clamp(20px,3vw,30px);box-shadow:var(--shadow);display:grid;gap:13px;
  font-family:var(--ff-d);color:var(--ink);
}
.fg-card h3{font-size:clamp(17px,2vw,22px);line-height:1.16;letter-spacing:-.02em;font-variation-settings:'wght' 600,'wdth' 94;margin:0}
.fg-card p{margin:0;color:var(--ink-2);font-size:13px;line-height:1.6}
.fg-card code{font-family:var(--ff-m);font-size:.92em;color:var(--cy)}
.fg-cmd{display:flex;align-items:center;gap:10px;border:1px solid var(--line);padding:10px 12px;
  background:color-mix(in srgb,var(--cy) 5%,transparent)}
.fg-cmd code{flex:1;font-size:12.5px;color:var(--ink)}
.fg-cmd button{
  font-family:var(--ff-m);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-2);border:1px solid var(--line);padding:5px 9px;transition:border-color .2s,color .2s;
}
.fg-cmd button:hover{border-color:var(--cy);color:var(--cy)}
.fg-btn{
  font-family:var(--ff-m);font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;
  border:1px solid var(--cy);color:var(--cy);padding:11px 18px;justify-self:start;
  transition:background .3s var(--e-out),color .3s;
}
.fg-btn:hover{background:var(--cy);color:var(--bg)}

::view-transition-old(root),::view-transition-new(root){animation:none;mix-blend-mode:normal}
::view-transition-old(root){z-index:1}
::view-transition-new(root){z-index:2}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition-duration:.01ms!important}
}