/* ============================================================================
   GBX-UI · the GREENBOX design system  ·  "The Verified Execution Layer"
   v2 · grounded · self-hosted type · zero dependencies
   ----------------------------------------------------------------------------
   One stylesheet, two brand faces (dark deep-space + warm paper), swapped by
   data-theme="dark" | "paper" on any ancestor. Everything is grounded to an
   8px baseline and a hairline structural grid · no floating decoration.

   Fonts are self-hosted (./fonts) so it renders perfectly offline · sovereign,
   free, local. Honors brand-hub canon: green #50c878 is the ONLY signal color
   (NEVER orange) · center dot · Title Case · the Seal + GC Card are the marks.
   ============================================================================ */

/* ============================================================================
   0 · SELF-HOSTED TYPE  (Satoshi · Hanken Grotesk · JetBrains Mono)
   ============================================================================ */
@font-face{font-family:"Satoshi";src:url("fonts/Satoshi-400.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Satoshi";src:url("fonts/Satoshi-500.woff2") format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"Satoshi";src:url("fonts/Satoshi-700.woff2") format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"Satoshi";src:url("fonts/Satoshi-900.woff2") format("woff2");font-weight:900;font-display:swap}
@font-face{font-family:"Hanken Grotesk";src:url("fonts/HankenGrotesk-400.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Hanken Grotesk";src:url("fonts/HankenGrotesk-500.woff2") format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"Hanken Grotesk";src:url("fonts/HankenGrotesk-600.woff2") format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"Hanken Grotesk";src:url("fonts/HankenGrotesk-700.woff2") format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"JetBrains Mono";src:url("fonts/JetBrainsMono-400.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"JetBrains Mono";src:url("fonts/JetBrainsMono-500.woff2") format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"JetBrains Mono";src:url("fonts/JetBrainsMono-700.woff2") format("woff2");font-weight:700;font-display:swap}

/* ============================================================================
   1 · TOKENS
   ============================================================================ */
:root{
  --font-display:"Satoshi",ui-sans-serif,-apple-system,system-ui,sans-serif;
  --font-body:"Hanken Grotesk",ui-sans-serif,-apple-system,system-ui,sans-serif;
  --font-mono:"JetBrains Mono",ui-monospace,"SF Mono",Menlo,monospace;

  /* type scale · 1.22 ratio, clamped · tuned for Satoshi/Hanken -------------- */
  --t-mega:clamp(3rem,1.7rem+4.9vw,5rem);
  --t-h1:clamp(2.05rem,1.4rem+2.3vw,3rem);
  --t-h2:clamp(1.5rem,1.2rem+1.05vw,1.95rem);
  --t-h3:1.24rem;
  --t-lg:1.06rem;
  --t-base:0.96rem;
  --t-sm:0.845rem;
  --t-xs:0.75rem;
  --t-micro:0.68rem;

  /* spacing · strict 4px baseline · use these ONLY (no ad-hoc px) ----------- */
  --s1:4px;--s2:8px;--s3:12px;--s4:16px;--s5:24px;--s6:32px;--s7:48px;--s8:72px;--s9:112px;
  --gutter:clamp(20px,4vw,44px);
  --section-y:clamp(52px,7vw,96px);
  --card-pad:clamp(20px,2.3vw,28px);
  --maxw:1160px;
  --nav-h:60px;

  --r1:8px;--r2:12px;--r3:16px;--r4:20px;--r-pill:999px;

  --ease:cubic-bezier(.4,0,.2,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
  --dur-1:.15s;--dur-2:.28s;--dur-3:.55s;--dur-4:1s;
}

/* ---- DARK · deep-space ---------------------------------------------------- */
[data-theme="dark"],:root{
  color-scheme:dark;
  --void:#060708; --canvas:#0a0b0d; --canvas-2:#0d0f12;
  --panel:#111318; --panel-2:#161920; --panel-3:#1c2028;
  --text:#eceadf; --text-soft:#9aa094; --text-faint:#666c62; --text-ghost:#3d423b;
  --hair:rgba(255,255,255,.08); --hair-2:rgba(255,255,255,.13); --hair-3:rgba(255,255,255,.2);

  --signal:#50c878; --signal-2:#74e89a; --signal-dim:#2f9c57; --signal-deep:#123f28;
  --signal-ink:#08130c; --signal-type:#6fdc94;
  --signal-ghost:rgba(80,200,120,.10); --signal-line:rgba(80,200,120,.30); --signal-glow:rgba(80,200,120,.22);
  --accent:#c8a98a; --accent-text:#d6bd9f; --accent-ghost:rgba(200,169,138,.11);
  --ok:#50c878; --warn:#d8a44a; --danger:#e08163; --info:#63b6cc;
  --ok-ghost:rgba(80,200,120,.12); --warn-ghost:rgba(216,164,74,.13);
  --danger-ghost:rgba(224,129,99,.13); --info-ghost:rgba(99,182,204,.13);

  --shadow-1:0 1px 0 rgba(255,255,255,.03);
  --shadow-2:0 12px 34px -18px rgba(0,0,0,.7);
  --card-edge:inset 0 1px 0 rgba(255,255,255,.04);
  --grid-line:rgba(255,255,255,.028);
}
/* ---- PAPER · warm light --------------------------------------------------- */
[data-theme="paper"]{
  color-scheme:light;
  --void:#e5e8de; --canvas:#f3f5ef; --canvas-2:#ecefe6;
  --panel:#fffefb; --panel-2:#f6f7f1; --panel-3:#edf0e7;
  --text:#22291f; --text-soft:#586150; --text-faint:#8b9280; --text-ghost:#b6bcaa;
  --hair:rgba(24,34,22,.11); --hair-2:rgba(24,34,22,.17); --hair-3:rgba(24,34,22,.28);

  --signal:#50c878; --signal-2:#2f9c57; --signal-dim:#3fa968; --signal-deep:#0f3f24;
  --signal-ink:#0a2013; --signal-type:#146236;
  --signal-ghost:#e5f3ea; --signal-line:rgba(47,156,87,.32); --signal-glow:rgba(80,200,120,.22);
  --accent:#c8a98a; --accent-text:#6b5234; --accent-ghost:#efe6d8;
  --ok:#2f9c57; --warn:#b8862b; --danger:#b5503e; --info:#2f6576;
  --ok-ghost:#dcefe2; --warn-ghost:#f3e9d3; --danger-ghost:#f3ded6; --info-ghost:#dae8ed;

  --shadow-1:0 1px 0 rgba(255,255,255,.6);
  --shadow-2:0 14px 34px -20px rgba(40,55,40,.22);
  --card-edge:inset 0 1px 0 rgba(255,255,255,.7);
  --grid-line:rgba(30,45,30,.04);
}

/* ============================================================================
   2 · RESET + BASE
   ============================================================================ */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--canvas);color:var(--text);
  font-family:var(--font-body);font-size:var(--t-base);line-height:1.6;font-weight:400;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;font-feature-settings:"kern";}
::selection{background:var(--signal);color:var(--signal-ink)}
a{color:var(--signal-type);text-decoration:none;transition:color var(--dur-1) var(--ease)}
a:hover{color:var(--signal-2)}
img,svg{display:block;max-width:100%}
:focus-visible{outline:2px solid var(--signal);outline-offset:3px;border-radius:3px}
*{scrollbar-width:thin;scrollbar-color:var(--hair-3) transparent}
*::-webkit-scrollbar{width:10px;height:10px}
*::-webkit-scrollbar-thumb{background:var(--hair-3);border-radius:99px;border:3px solid transparent;background-clip:content-box}

/* ============================================================================
   3 · LAYOUT  ·  grounded to a max-width column + consistent rhythm
   ============================================================================ */
.gbx-wrap{max-width:var(--maxw);margin:0 auto;padding-inline:var(--gutter)}
.gbx-section{padding-block:var(--section-y)}
.gbx-section + .gbx-section{border-top:1px solid var(--hair)}   /* structural divider, no voids */
.gbx-stack{display:flex;flex-direction:column;gap:var(--s4)}
.gbx-row{display:flex;flex-wrap:wrap;gap:var(--s3);align-items:center}
.gbx-grid{display:grid;gap:var(--s4)}
.cols-2{grid-template-columns:repeat(2,1fr)}
.cols-3{grid-template-columns:repeat(3,1fr)}
.cols-4{grid-template-columns:repeat(4,1fr)}
.cols-auto{grid-template-columns:repeat(auto-fill,minmax(232px,1fr))}
@media(max-width:880px){.cols-3,.cols-4{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.cols-2,.cols-3,.cols-4{grid-template-columns:1fr}}
.span-2{grid-column:span 2}@media(max-width:560px){.span-2{grid-column:span 1}}

/* section header · numbered mono kicker + a grounding hairline rule --------- */
.gbx-sectionhead{display:flex;align-items:baseline;gap:var(--s4);margin-bottom:var(--s6)}
.gbx-sectionhead .rule{flex:1;height:1px;background:var(--hair)}

/* ============================================================================
   4 · TYPOGRAPHY  ·  Satoshi display · Hanken body · JetBrains mono voice
   ============================================================================ */
.gbx-display{font-family:var(--font-display);font-weight:900;line-height:1;letter-spacing:-.035em;font-size:var(--t-mega);margin:0}
h1,.gbx-h1{font-family:var(--font-display);font-weight:700;line-height:1.05;letter-spacing:-.028em;font-size:var(--t-h1);margin:0 0 var(--s3)}
h2,.gbx-h2{font-family:var(--font-display);font-weight:700;line-height:1.1;letter-spacing:-.022em;font-size:var(--t-h2);margin:0 0 var(--s3)}
h3,.gbx-h3{font-family:var(--font-display);font-weight:500;letter-spacing:-.012em;font-size:var(--t-h3);margin:0 0 var(--s2)}
p{margin:0 0 var(--s3)}
.gbx-lead{font-size:var(--t-lg);color:var(--text-soft);line-height:1.6;max-width:62ch}
.gbx-lead b,.gbx-lead strong{color:var(--text);font-weight:600}

/* mono voice · kickers, labels, data, provenance --------------------------- */
.gbx-kicker{font-family:var(--font-mono);font-size:var(--t-micro);font-weight:500;letter-spacing:.22em;
  text-transform:uppercase;color:var(--signal-type);display:inline-flex;align-items:center;gap:9px;white-space:nowrap}
.gbx-kicker::before{content:"";width:18px;height:1px;background:currentColor;opacity:.65}
.gbx-kicker.plain{color:var(--text-faint)}
.gbx-kicker.accent{color:var(--accent-text)}
.gbx-kicker.bare::before{display:none}
.gbx-label{font-family:var(--font-mono);font-size:var(--t-micro);letter-spacing:.16em;text-transform:uppercase;color:var(--text-faint)}
.mono{font-family:var(--font-mono);font-variant-numeric:tabular-nums}
.gbx-num{font-family:var(--font-mono);font-variant-numeric:tabular-nums;letter-spacing:-.02em;font-feature-settings:"tnum"}
.muted{color:var(--text-soft)}.faint{color:var(--text-faint)}
code{font-family:var(--font-mono);font-size:.9em;background:var(--panel-3);border:1px solid var(--hair);border-radius:5px;padding:1px 6px}
.gbx-mark{color:var(--signal-type);font-weight:600}
.gbx-wordmark{font-family:var(--font-display);font-weight:900;letter-spacing:-.02em;text-transform:uppercase}

/* ============================================================================
   5 · CARD  ·  flat, grounded, hairline-defined (no float)
   ============================================================================ */
.gbx-card{position:relative;background:var(--panel);border:1px solid var(--hair);border-radius:var(--r3);
  padding:var(--card-pad);box-shadow:var(--shadow-1);
  transition:border-color var(--dur-2) var(--ease),background var(--dur-2) var(--ease),transform var(--dur-2) var(--ease-out)}
.gbx-card.raise{background:var(--panel-2)}
.gbx-card.interactive{cursor:pointer}
.gbx-card.interactive:hover{border-color:var(--hair-2);transform:translateY(-2px);box-shadow:var(--shadow-2)}
/* a top hairline of signal · the "certified / live" card treatment (grounded to the edge) */
.gbx-card.signal-top{border-top:2px solid var(--signal)}
.gbx-cardhead{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--s3);margin-bottom:var(--s4)}
.gbx-cardhead h3{margin:0}
.gbx-cardhead .sub{color:var(--text-soft);font-size:var(--t-sm);margin-top:2px}

/* ============================================================================
   6 · BUTTONS
   ============================================================================ */
.gbx-btn{--_bg:var(--panel-2);--_fg:var(--text);--_bd:var(--hair-2);
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-family:var(--font-body);font-weight:600;font-size:var(--t-sm);line-height:1;
  padding:11px 18px;border-radius:var(--r-pill);cursor:pointer;color:var(--_fg);background:var(--_bg);
  border:1px solid var(--_bd);transition:background var(--dur-2) var(--ease),border-color var(--dur-2) var(--ease),transform var(--dur-1) var(--ease);
  -webkit-user-select:none;user-select:none;text-decoration:none}
.gbx-btn:hover{transform:translateY(-1px)}
.gbx-btn:active{transform:translateY(0)}
.gbx-btn.primary{--_bg:var(--signal);--_fg:var(--signal-ink);--_bd:transparent}
.gbx-btn.primary:hover{--_bg:var(--signal-2)}
.gbx-btn.ghost{--_bg:transparent;--_fg:var(--signal-type);--_bd:var(--signal-line)}
.gbx-btn.ghost:hover{--_bg:var(--signal-ghost)}
.gbx-btn.quiet{--_bg:transparent;--_fg:var(--text-soft);--_bd:transparent}
.gbx-btn.quiet:hover{--_fg:var(--text);--_bd:var(--hair)}
.gbx-btn.sm{padding:8px 13px;font-size:var(--t-xs)}
.gbx-btn.block{width:100%}
.gbx-btn .arrow{transition:transform var(--dur-2) var(--ease-out)}
.gbx-btn:hover .arrow{transform:translateX(3px)}
/* VOICE · dictation mic button · on-device Web Speech API */
.gbx-mic{display:inline-flex;align-items:center;gap:7px;font-family:var(--font-body);font-weight:600;font-size:var(--t-xs);
  padding:8px 13px;border-radius:var(--r-pill);cursor:pointer;color:var(--text-soft);background:var(--panel-2);
  border:1px solid var(--hair-2);transition:color var(--dur-2) var(--ease),border-color var(--dur-2) var(--ease),background var(--dur-2) var(--ease)}
.gbx-mic:hover{color:var(--text);border-color:var(--hair-3)}
.gbx-mic.off{opacity:.5;cursor:not-allowed}
.gbx-mic.on{color:var(--signal-ink);background:var(--signal);border-color:transparent}
.gbx-mic.on svg{animation:gbx-mic-pulse 1.1s var(--ease) infinite}
@keyframes gbx-mic-pulse{0%,100%{opacity:1}50%{opacity:.35}}
@media(prefers-reduced-motion:reduce){.gbx-mic.on svg{animation:none}}

/* ============================================================================
   7 · PILLS · chips · dot
   ============================================================================ */
.gbx-pill{display:inline-flex;align-items:center;gap:6px;font-family:var(--font-mono);font-size:var(--t-micro);
  font-weight:500;letter-spacing:.08em;text-transform:uppercase;padding:4px 10px;border-radius:var(--r-pill);border:1px solid transparent;white-space:nowrap}
.gbx-pill.ok{background:var(--ok-ghost);color:var(--ok);border-color:var(--signal-line)}
.gbx-pill.warn{background:var(--warn-ghost);color:var(--warn);border-color:color-mix(in oklab,var(--warn) 32%,transparent)}
.gbx-pill.danger{background:var(--danger-ghost);color:var(--danger);border-color:color-mix(in oklab,var(--danger) 32%,transparent)}
.gbx-pill.info{background:var(--info-ghost);color:var(--info);border-color:color-mix(in oklab,var(--info) 32%,transparent)}
.gbx-pill.na{background:var(--panel-3);color:var(--text-faint);border-color:var(--hair)}
.gbx-pill.solid{background:var(--signal);color:var(--signal-ink)}
.gbx-chip{display:inline-flex;align-items:center;gap:6px;font-size:var(--t-xs);font-weight:600;padding:6px 12px;
  border-radius:var(--r-pill);background:var(--signal-ghost);color:var(--signal-type);border:1px solid var(--hair)}
.gbx-chip.accent{background:var(--accent-ghost);color:var(--accent-text)}
.gbx-chip.plain{background:var(--panel-3);color:var(--text-soft)}
button.gbx-chip{cursor:pointer;font-family:inherit;transition:border-color .15s,color .15s,background .15s}
.gbx-chip.is-on{background:var(--signal-ghost);color:var(--signal-type);border-color:var(--signal-type);box-shadow:0 0 0 1px var(--signal-type) inset}
.gbx-dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--text-faint);flex:none}
.gbx-dot.ok{background:var(--ok)}.gbx-dot.warn{background:var(--warn)}.gbx-dot.danger{background:var(--danger)}
.gbx-dot.live{background:var(--signal);position:relative}
.gbx-dot.live::after{content:"";position:absolute;inset:-4px;border-radius:50%;border:1px solid var(--signal);
  animation:gbx-ping 2.2s var(--ease-out) infinite;opacity:0}
@keyframes gbx-ping{0%{transform:scale(.6);opacity:.8}100%{transform:scale(1.6);opacity:0}}

/* ============================================================================
   8 · METRIC TILE  ·  fully grounded · sparkline sits in flow, not absolute
   ============================================================================ */
.gbx-metric{background:var(--panel);border:1px solid var(--hair);border-radius:var(--r3);
  padding:var(--card-pad);display:flex;flex-direction:column;gap:var(--s2);justify-content:flex-start}
.gbx-metric .m-label{font-family:var(--font-mono);font-size:var(--t-micro);letter-spacing:.14em;text-transform:uppercase;
  color:var(--text-faint);display:flex;align-items:center;gap:7px}
.gbx-metric .m-value{font-family:var(--font-display);font-weight:900;letter-spacing:-.04em;line-height:.95;
  font-size:clamp(2.1rem,1.3rem+2vw,2.8rem);font-variant-numeric:tabular-nums;color:var(--text)}
.gbx-metric .m-value .unit{font-size:.42em;font-weight:600;color:var(--text-faint);margin-left:5px;letter-spacing:0;font-family:var(--font-mono)}
.gbx-metric.is-hero .m-value{color:var(--signal-type)}
.gbx-metric .m-sub{font-size:var(--t-sm);color:var(--text-soft)}
.gbx-metric .m-foot{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);margin-top:var(--s2)}
.gbx-metric .m-spark{width:96px;height:30px;flex:none}
.gbx-metric .m-delta{font-family:var(--font-mono);font-size:var(--t-xs);font-weight:500}
.gbx-metric .m-delta.up{color:var(--ok)}.gbx-metric .m-delta.down{color:var(--danger)}

/* ============================================================================
   9 · PROGRESS · meter
   ============================================================================ */
.gbx-progress{height:8px;border-radius:99px;background:var(--panel-3);overflow:hidden;border:1px solid var(--hair)}
.gbx-progress > i{display:block;height:100%;border-radius:99px;background:var(--signal);transform-origin:left}
.js .gbx-progress > i{animation:gbx-fill var(--dur-4) var(--ease-out) both}
@keyframes gbx-fill{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.gbx-meter{display:flex;gap:3px}
.gbx-meter i{flex:1;height:6px;border-radius:2px;background:var(--panel-3)}
.gbx-meter i.on{background:var(--signal)}
.gbx-kv{display:grid;grid-template-columns:1fr auto;gap:var(--s2) var(--s4);align-items:center}
.gbx-kv .k{font-family:var(--font-mono);font-size:var(--t-micro);letter-spacing:.1em;text-transform:uppercase;color:var(--text-faint)}
.gbx-kv .v{font-family:var(--font-mono);font-size:var(--t-sm);text-align:right;font-variant-numeric:tabular-nums}

/* ============================================================================
   10 · TABLE
   ============================================================================ */
.gbx-table{width:100%;border-collapse:collapse;font-size:var(--t-sm)}
.gbx-table th{text-align:left;font-family:var(--font-mono);font-size:var(--t-micro);letter-spacing:.13em;text-transform:uppercase;
  color:var(--text-faint);font-weight:500;padding:10px 14px;border-bottom:1px solid var(--hair-2)}
.gbx-table td{padding:13px 14px;border-bottom:1px solid var(--hair);vertical-align:middle}
.gbx-table tbody tr:last-child td{border-bottom:0}
.gbx-table tbody tr{transition:background var(--dur-1) var(--ease)}
.gbx-table tbody tr:hover{background:var(--panel-2)}
.gbx-table tr.flag td{background:var(--danger-ghost)}
.gbx-table .lead-cell{font-weight:600;color:var(--text)}

/* ============================================================================
   11 · THE SEAL  ·  crisp, STATIC emblem (grounded · painted by gbx-ui.js)
   ============================================================================ */
.gbx-seal{position:relative;flex:none;display:grid;place-items:center;color:var(--signal-type)}
.gbx-seal .core{position:absolute;inset:0;display:grid;place-items:center;
  font-family:var(--font-display);font-weight:900;letter-spacing:-.03em;color:var(--signal-type)}

/* ============================================================================
   12 · THE GC CARD  ·  house certificate (content-free, verifiable)
   ============================================================================ */
.gc-card{background:var(--panel);border:1px solid var(--hair-2);border-radius:var(--r4);overflow:hidden;box-shadow:var(--shadow-2)}
.gc-masthead{display:flex;align-items:center;justify-content:space-between;gap:var(--s4);padding:var(--s4) var(--s5);border-bottom:1px solid var(--hair)}
.gc-brand{display:flex;align-items:center;gap:13px}
.gc-brand .lockup{font-family:var(--font-display);font-weight:900;text-transform:uppercase;letter-spacing:-.02em;font-size:1.02rem;line-height:1}
.gc-brand .sub{font-family:var(--font-mono);font-size:var(--t-micro);letter-spacing:.12em;text-transform:uppercase;color:var(--text-faint);margin-top:3px}
.gc-body{display:grid;grid-template-columns:1.5fr 1fr;gap:var(--s5);padding:var(--s5)}
@media(max-width:620px){.gc-body{grid-template-columns:1fr}}
.gc-kicker{font-family:var(--font-mono);font-size:var(--t-micro);letter-spacing:.18em;text-transform:uppercase;color:var(--accent-text);margin-bottom:8px}
.gc-title{font-family:var(--font-display);font-weight:700;font-size:var(--t-h3);letter-spacing:-.018em;line-height:1.14;margin:0 0 var(--s3)}
.gc-summary{color:var(--text-soft);font-size:var(--t-sm);line-height:1.62;margin:0}
.gc-idbox{background:var(--panel-2);border:1px solid var(--hair);border-radius:var(--r2);padding:var(--s4);align-self:start}
.gc-idbox dl{margin:0;display:grid;grid-template-columns:auto 1fr;gap:11px 14px}
.gc-idbox dt{font-family:var(--font-mono);font-size:var(--t-micro);letter-spacing:.09em;text-transform:uppercase;color:var(--text-faint)}
.gc-idbox dd{margin:0;font-family:var(--font-mono);font-size:var(--t-xs);text-align:right;color:var(--text);font-variant-numeric:tabular-nums}
.gc-colophon{border-top:1px solid var(--hair);padding:var(--s3) var(--s5);font-family:var(--font-mono);font-size:var(--t-micro);
  letter-spacing:.05em;color:var(--text-faint);display:flex;align-items:center;gap:10px;flex-wrap:wrap}

/* ============================================================================
   13 · CALLOUT · note strip
   ============================================================================ */
.gbx-callout{border-left:2px solid var(--signal);background:var(--signal-ghost);border-radius:0 var(--r2) var(--r2) 0;
  padding:var(--s3) var(--s4);font-size:var(--t-sm);color:var(--text)}
.gbx-callout.accent{border-color:var(--accent);background:var(--accent-ghost)}
.gbx-callout b{color:var(--text);font-weight:600}
.gbx-strip{display:flex;gap:var(--s3);align-items:baseline;padding:12px 0;border-bottom:1px solid var(--hair)}
.gbx-strip:last-child{border-bottom:0}

/* ============================================================================
   14 · DATA-VIZ (SVG painted by gbx-ui.js) · grounded inside cards
   ============================================================================ */
.gbx-viz{display:block;width:100%}
.gbx-spark .line{fill:none;stroke:var(--signal);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.gbx-spark .area{fill:var(--signal);opacity:.12}
.gbx-spark .band{fill:var(--signal);opacity:.09}
.gbx-spark .dot-last{fill:var(--signal);stroke:var(--panel);stroke-width:2}
.gbx-gauge .track{fill:none;stroke:var(--panel-3);stroke-linecap:round}
.gbx-gauge .value{fill:none;stroke:var(--signal);stroke-linecap:round}
.gbx-gauge .cap{font-family:var(--font-display);font-weight:900;fill:var(--text);font-variant-numeric:tabular-nums}
.gbx-gauge .cap-sub{font-family:var(--font-mono);fill:var(--text-faint)}
.gbx-heat rect{transition:opacity var(--dur-1) var(--ease)}
.gbx-heat text{font-family:var(--font-mono);fill:var(--text-faint)}

/* ============================================================================
   15 · TIMELINE
   ============================================================================ */
.gbx-timeline{position:relative;padding-left:var(--s6)}
.gbx-timeline::before{content:"";position:absolute;left:6px;top:8px;bottom:8px;width:1px;background:var(--hair-2)}
.gbx-timeline .node{position:relative;padding-bottom:var(--s5)}
.gbx-timeline .node:last-child{padding-bottom:0}
.gbx-timeline .node::before{content:"";position:absolute;left:calc(-1 * var(--s6) + 1px);top:4px;width:13px;height:13px;border-radius:50%;
  background:var(--canvas);border:2px solid var(--signal)}
.gbx-timeline .node.done::before{background:var(--signal)}
.gbx-timeline .node.open::before{border-color:var(--warn)}
.gbx-timeline .node h4{margin:0 0 2px;font-family:var(--font-display);font-weight:600;font-size:var(--t-base)}

/* ============================================================================
   16 · APP-BAR
   ============================================================================ */
.gbx-appbar{position:sticky;top:0;z-index:100;height:var(--nav-h);display:flex;align-items:center;gap:4px;
  padding-inline:var(--gutter);border-bottom:1px solid var(--hair);
  background:color-mix(in oklab,var(--canvas) 85%,transparent);
  backdrop-filter:blur(16px) saturate(1.2);-webkit-backdrop-filter:blur(16px) saturate(1.2)}
.gbx-appbar .brand{font-family:var(--font-display);font-weight:900;text-transform:uppercase;letter-spacing:-.02em;color:var(--text);
  margin-right:var(--s4);display:inline-flex;align-items:center;gap:.42ch}
.gbx-appbar .brand .dot{color:var(--signal)}
.gbx-appbar .brand .labs{font-weight:400;text-transform:none;letter-spacing:normal;color:var(--text-soft)}  /* Title-case "Labs" · same size, thinner + lighter than GREENBOX */
.gbx-appbar .tab{font-size:var(--t-sm);font-weight:600;color:var(--text-soft);padding:7px 13px;border-radius:var(--r-pill);
  transition:color var(--dur-1) var(--ease),background var(--dur-1) var(--ease)}
.gbx-appbar .tab:hover{color:var(--text);background:var(--panel-2)}
.gbx-appbar .tab.on{color:var(--signal-ink);background:var(--signal)}
.gbx-appbar .spacer{margin-left:auto}
.gbx-theme-toggle{display:inline-flex;align-items:center;gap:8px;font-family:var(--font-mono);font-size:var(--t-micro);
  letter-spacing:.1em;text-transform:uppercase;color:var(--text-faint);cursor:pointer;background:var(--panel-2);
  border:1px solid var(--hair);border-radius:var(--r-pill);padding:7px 13px;transition:all var(--dur-1) var(--ease)}
.gbx-theme-toggle:hover{color:var(--text);border-color:var(--hair-2)}
/* nav groups + separator + per-tab hover tip */
.gbx-appbar .navtabs{display:flex;align-items:center;gap:2px}
.gbx-appbar .navsep{width:1px;height:18px;background:var(--hair-2);margin:0 8px}
.gbx-appbar .tab{position:relative}
.gbx-appbar .tab[data-tip]:hover::after{content:attr(data-tip);position:absolute;left:50%;top:calc(100% + 9px);transform:translateX(-50%);
  background:var(--void);color:var(--text-soft);border:1px solid var(--hair-2);border-radius:var(--r1);padding:6px 10px;
  font-family:var(--font-body);font-weight:500;font-size:var(--t-xs);white-space:nowrap;box-shadow:var(--shadow-2);z-index:120}
@media(max-width:900px){.gbx-appbar .navtabs{display:none}}
/* the ⌘K launcher */
.gbx-launch{display:inline-flex;align-items:center;gap:9px;cursor:pointer;background:var(--panel-2);border:1px solid var(--hair-2);
  border-radius:var(--r-pill);padding:6px 8px 6px 13px;color:var(--text-soft);font-family:var(--font-body);font-weight:600;font-size:var(--t-sm);
  transition:all var(--dur-1) var(--ease)}
.gbx-launch:hover{color:var(--text);border-color:var(--signal-line);background:var(--signal-ghost)}
kbd,.gbx-kbd{font-family:var(--font-mono);font-size:var(--t-micro);font-weight:600;color:var(--text-faint);background:var(--panel-3);
  border:1px solid var(--hair-2);border-bottom-width:2px;border-radius:5px;padding:2px 6px;line-height:1;min-width:16px;text-align:center;display:inline-block}
.gbx-launch .gbx-kbd{color:var(--text-soft)}

/* ============================================================================
   30 · COMMAND MENU  ·  the one nav · every destination, described, searchable
   ============================================================================ */
.gbx-cmd{position:fixed;inset:0;z-index:1000;display:grid;place-items:start center;padding-top:12vh;
  background:color-mix(in oklab,var(--void) 62%,transparent);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  opacity:0;pointer-events:none;transition:opacity var(--dur-2) var(--ease)}
.gbx-cmd.open{opacity:1;pointer-events:auto}
.gbx-cmd-panel{width:min(600px,92vw);max-height:74vh;overflow:hidden;display:flex;flex-direction:column;
  background:var(--panel);border:1px solid var(--hair-2);border-radius:var(--r4);box-shadow:0 40px 90px -30px rgba(0,0,0,.7);
  transform:translateY(10px) scale(.98);transition:transform var(--dur-2) var(--ease-out)}
.gbx-cmd.open .gbx-cmd-panel{transform:none}
.gbx-cmd-search{display:flex;align-items:center;gap:12px;padding:16px 18px;border-bottom:1px solid var(--hair)}
.gbx-cmd-search .mk{flex:none;color:var(--signal-type);display:flex}
.gbx-cmd-search input{flex:1;background:none;border:0;outline:none;color:var(--text);font-family:var(--font-body);font-size:1.02rem}
.gbx-cmd-search input::placeholder{color:var(--text-ghost)}
.gbx-cmd-scroll{overflow-y:auto;padding:8px}
.gbx-cmd-group{font-family:var(--font-mono);font-size:var(--t-micro);letter-spacing:.16em;text-transform:uppercase;
  color:var(--text-faint);padding:12px 12px 6px}
.gbx-cmd-row{display:flex;align-items:center;gap:13px;padding:11px 12px;border-radius:var(--r2);cursor:pointer;scroll-margin:12px;
  border:1px solid transparent}
.gbx-cmd-row .ico{width:34px;height:34px;border-radius:9px;flex:none;display:grid;place-items:center;background:var(--panel-3);
  border:1px solid var(--hair);color:var(--tint,var(--signal-type))}
.gbx-cmd-row .nm{font-weight:600;font-size:var(--t-base);color:var(--text)}
.gbx-cmd-row .ds{font-size:var(--t-sm);color:var(--text-faint)}
.gbx-cmd-row .go{margin-left:auto;opacity:0;transition:opacity var(--dur-1) var(--ease)}
.gbx-cmd-row.on{background:var(--signal-ghost);border-color:var(--signal-line)}
.gbx-cmd-row.on .ico{background:var(--panel);border-color:var(--signal-line)}
.gbx-cmd-row.on .go{opacity:1}
.gbx-cmd-row.here{opacity:.55}
.gbx-cmd-row.here .nm::after{content:" · you are here";font-family:var(--font-mono);font-size:var(--t-micro);color:var(--text-faint);font-weight:400}
.gbx-cmd-foot{display:flex;align-items:center;gap:16px;padding:11px 18px;border-top:1px solid var(--hair);
  font-family:var(--font-mono);font-size:var(--t-micro);color:var(--text-faint);letter-spacing:.04em}
.gbx-cmd-foot .sp{margin-left:auto}
.gbx-cmd-empty{padding:26px 18px;text-align:center;color:var(--text-faint);font-size:var(--t-sm)}
@media(prefers-reduced-motion:reduce){.gbx-cmd,.gbx-cmd-panel{transition:none}}

/* ============================================================================
   17 · MOTION  ·  progressive enhancement · content is VISIBLE without JS
   ---------------------------------------------------------------------------
   html.js is set by gbx-ui.js immediately. Only THEN do reveal elements start
   hidden and animate in on entry. No JS / no observer = fully visible · never
   a blank void. Grounded: content rises a few px + fades · nothing floats.
   ============================================================================ */
.js .gbx-reveal{opacity:0;transform:translateY(12px)}
.js .gbx-reveal.in{opacity:1;transform:none;transition:opacity var(--dur-3) var(--ease-out),transform var(--dur-3) var(--ease-out)}
@media(prefers-reduced-motion:reduce){
  .js .gbx-reveal{opacity:1;transform:none}
  .js .gbx-progress > i{animation:none}
  .gbx-dot.live::after{animation:none}
}
.gbx-shimmer{background:linear-gradient(100deg,var(--panel-3) 30%,var(--hair-2) 50%,var(--panel-3) 70%);
  background-size:200% 100%;animation:gbx-shim 1.4s linear infinite;border-radius:6px;color:transparent}
@keyframes gbx-shim{to{background-position:-200% 0}}

/* ============================================================================
   18 · ATMOSPHERE  ·  ONE grounded, contained texture (opt-in · not floating)
   ---------------------------------------------------------------------------
   A faint structural grid, masked to fade at edges so it reads as engineered
   graph paper behind a section · not a floating graphic. Use sparingly.
   ============================================================================ */
.gbx-grid-bg{position:relative;isolation:isolate}
.gbx-grid-bg::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:
    linear-gradient(var(--grid-line) 1px,transparent 1px) 0 0/34px 34px,
    linear-gradient(90deg,var(--grid-line) 1px,transparent 1px) 0 0/34px 34px;
  mask-image:linear-gradient(180deg,#000,transparent 92%);}

/* ---- utilities ------------------------------------------------------------ */
.flex{display:flex}.items-center{align-items:center}.items-baseline{align-items:baseline}
.justify-between{justify-content:space-between}.flex-col{flex-direction:column}.wrap{flex-wrap:wrap}.grow{flex:1}
.gap-1{gap:var(--s1)}.gap-2{gap:var(--s2)}.gap-3{gap:var(--s3)}.gap-4{gap:var(--s4)}
.mt-2{margin-top:var(--s2)}.mt-3{margin-top:var(--s3)}.mt-4{margin-top:var(--s4)}.mt-5{margin-top:var(--s5)}.mt-6{margin-top:var(--s6)}
.mb-0{margin-bottom:0}.mb-2{margin-bottom:var(--s2)}.mb-3{margin-bottom:var(--s3)}.mb-4{margin-bottom:var(--s4)}.mb-5{margin-bottom:var(--s5)}
.text-right{text-align:right}.text-center{text-align:center}.w-full{width:100%}

/* ============================================================================
   19 · FORM CONTROLS
   ============================================================================ */
.gbx-field{display:block;margin-bottom:var(--s4)}
.gbx-field > label{display:block;font-family:var(--font-mono);font-size:var(--t-micro);letter-spacing:.1em;
  text-transform:uppercase;color:var(--text-faint);margin-bottom:7px}
.gbx-input,.gbx-textarea,.gbx-select{width:100%;font-family:var(--font-body);font-size:var(--t-base);color:var(--text);
  background:var(--panel-2);border:1px solid var(--hair-2);border-radius:var(--r2);padding:11px 13px;
  transition:border-color var(--dur-1) var(--ease),background var(--dur-1) var(--ease)}
.gbx-input::placeholder,.gbx-textarea::placeholder{color:var(--text-ghost)}
.gbx-input:focus,.gbx-textarea:focus,.gbx-select:focus{outline:none;border-color:var(--signal);background:var(--panel)}
.gbx-textarea{min-height:96px;resize:vertical;line-height:1.55}
.gbx-select{appearance:none;-webkit-appearance:none;cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,var(--text-faint) 50%),linear-gradient(135deg,var(--text-faint) 50%,transparent 50%);
  background-position:calc(100% - 18px) center,calc(100% - 13px) center;background-size:5px 5px,5px 5px;background-repeat:no-repeat}
.gbx-search{position:relative}
.gbx-search .gbx-input{padding-left:38px}
.gbx-search::before{content:"";position:absolute;left:14px;top:50%;width:13px;height:13px;transform:translateY(-50%);
  border:1.6px solid var(--text-faint);border-radius:50%;box-shadow:7px 7px 0 -5px var(--text-faint)}
.gbx-help{font-size:var(--t-xs);color:var(--text-faint);margin-top:6px}
/* toggle switch */
.gbx-switch{display:inline-flex;align-items:center;gap:10px;cursor:pointer;user-select:none}
.gbx-switch input{position:absolute;opacity:0;width:0;height:0}
.gbx-switch .track{width:40px;height:23px;border-radius:99px;background:var(--panel-3);border:1px solid var(--hair-2);
  position:relative;transition:background var(--dur-2) var(--ease),border-color var(--dur-2) var(--ease);flex:none}
.gbx-switch .track::after{content:"";position:absolute;top:2px;left:2px;width:17px;height:17px;border-radius:50%;
  background:var(--text-soft);transition:transform var(--dur-2) var(--ease),background var(--dur-2) var(--ease)}
.gbx-switch input:checked + .track{background:var(--signal-ghost);border-color:var(--signal-line)}
.gbx-switch input:checked + .track::after{transform:translateX(17px);background:var(--signal)}
.gbx-switch input:focus-visible + .track{outline:2px solid var(--signal);outline-offset:2px}
/* checkbox + radio */
.gbx-check{display:inline-flex;align-items:center;gap:9px;cursor:pointer;user-select:none;font-size:var(--t-sm)}
.gbx-check input{position:absolute;opacity:0}
.gbx-check .box{width:18px;height:18px;border-radius:5px;border:1.5px solid var(--hair-3);background:var(--panel-2);
  display:grid;place-items:center;transition:all var(--dur-1) var(--ease);flex:none}
.gbx-check.radio .box{border-radius:50%}
.gbx-check .box::after{content:"";width:9px;height:9px;border-radius:2px;background:var(--signal);transform:scale(0);transition:transform var(--dur-1) var(--ease)}
.gbx-check.radio .box::after{border-radius:50%}
.gbx-check input:checked + .box{border-color:var(--signal)}
.gbx-check input:checked + .box::after{transform:scale(1)}

/* ============================================================================
   20 · TABS · segmented control
   ============================================================================ */
.gbx-tabs{display:flex;gap:2px;border-bottom:1px solid var(--hair)}
.gbx-tabs button{font-family:var(--font-body);font-weight:600;font-size:var(--t-sm);color:var(--text-soft);
  background:none;border:0;padding:11px 15px;cursor:pointer;position:relative;transition:color var(--dur-1) var(--ease)}
.gbx-tabs button::after{content:"";position:absolute;left:12px;right:12px;bottom:-1px;height:2px;background:var(--signal);
  transform:scaleX(0);transition:transform var(--dur-2) var(--ease-out)}
.gbx-tabs button:hover{color:var(--text)}
.gbx-tabs button.on{color:var(--text)}
.gbx-tabs button.on::after{transform:scaleX(1)}
.gbx-segment{display:inline-flex;background:var(--panel-3);border:1px solid var(--hair);border-radius:var(--r-pill);padding:3px}
.gbx-segment button{font-family:var(--font-body);font-weight:600;font-size:var(--t-xs);color:var(--text-soft);background:none;
  border:0;padding:7px 15px;border-radius:var(--r-pill);cursor:pointer;transition:all var(--dur-1) var(--ease)}
.gbx-segment button.on{background:var(--panel);color:var(--text);box-shadow:var(--shadow-1)}

/* ============================================================================
   21 · ACCORDION (details/summary)
   ============================================================================ */
.gbx-acc{border:1px solid var(--hair);border-radius:var(--r2);background:var(--panel);overflow:hidden}
.gbx-acc + .gbx-acc{margin-top:10px}
.gbx-acc summary{list-style:none;cursor:pointer;padding:14px 16px;font-weight:600;font-size:var(--t-sm);
  display:flex;align-items:center;justify-content:space-between;gap:var(--s3)}
.gbx-acc summary::-webkit-details-marker{display:none}
.gbx-acc summary .chev{width:9px;height:9px;border-right:1.5px solid var(--text-faint);border-bottom:1.5px solid var(--text-faint);
  transform:rotate(45deg);transition:transform var(--dur-2) var(--ease);flex:none}
.gbx-acc[open] summary .chev{transform:rotate(-135deg)}
.gbx-acc .acc-body{padding:0 16px 15px;color:var(--text-soft);font-size:var(--t-sm)}

/* ============================================================================
   22 · ALERT / BANNER
   ============================================================================ */
.gbx-alert{display:flex;gap:12px;align-items:flex-start;padding:13px 15px;border-radius:var(--r2);
  border:1px solid var(--hair);background:var(--panel);font-size:var(--t-sm)}
.gbx-alert .ico{width:20px;height:20px;border-radius:50%;flex:none;display:grid;place-items:center;font-family:var(--font-mono);
  font-size:12px;font-weight:700;margin-top:1px}
.gbx-alert.ok{background:var(--ok-ghost);border-color:var(--signal-line)}.gbx-alert.ok .ico{background:var(--signal);color:var(--signal-ink)}
.gbx-alert.warn{background:var(--warn-ghost);border-color:color-mix(in oklab,var(--warn) 30%,transparent)}.gbx-alert.warn .ico{background:var(--warn);color:#0a0a0a}
.gbx-alert.danger{background:var(--danger-ghost);border-color:color-mix(in oklab,var(--danger) 30%,transparent)}.gbx-alert.danger .ico{background:var(--danger);color:#0a0a0a}
.gbx-alert.info{background:var(--info-ghost);border-color:color-mix(in oklab,var(--info) 30%,transparent)}.gbx-alert.info .ico{background:var(--info);color:#0a0a0a}
.gbx-alert .at{font-weight:600;color:var(--text)}

/* ============================================================================
   23 · BADGE · AVATAR · avatar stack
   ============================================================================ */
.gbx-badge{display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:20px;padding:0 6px;
  border-radius:99px;background:var(--signal);color:var(--signal-ink);font-family:var(--font-mono);font-size:var(--t-micro);font-weight:600}
.gbx-badge.na{background:var(--panel-3);color:var(--text-soft)}
.gbx-avatar{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;font-family:var(--font-display);
  font-weight:700;font-size:var(--t-sm);color:var(--signal-ink);background:var(--signal);flex:none;border:2px solid var(--panel)}
.gbx-avatar.tan{background:var(--accent);color:#1a120a}
.gbx-avatar.ghost{background:var(--panel-3);color:var(--text-soft)}
.gbx-avatars{display:flex}
.gbx-avatars .gbx-avatar + .gbx-avatar{margin-left:-12px}

/* ============================================================================
   24 · TOOLTIP (CSS)
   ============================================================================ */
.gbx-tip{position:relative;border-bottom:1px dotted var(--text-faint);cursor:help}
.gbx-tip::after{content:attr(data-tip);position:absolute;left:50%;bottom:calc(100% + 8px);transform:translateX(-50%) translateY(4px);
  background:var(--void);color:var(--text);border:1px solid var(--hair-2);border-radius:var(--r1);padding:7px 10px;
  font-family:var(--font-body);font-size:var(--t-xs);font-weight:500;white-space:nowrap;box-shadow:var(--shadow-2);
  opacity:0;pointer-events:none;transition:opacity var(--dur-1) var(--ease),transform var(--dur-1) var(--ease);z-index:50}
.gbx-tip:hover::after{opacity:1;transform:translateX(-50%) translateY(0)}

/* ============================================================================
   25 · STEPPER · breadcrumb
   ============================================================================ */
.gbx-steps{display:flex;flex-wrap:wrap;gap:var(--s2)}
.gbx-step{display:flex;align-items:center;gap:9px;padding:8px 14px 8px 10px;border:1px solid var(--hair);border-radius:var(--r-pill);
  font-size:var(--t-sm);color:var(--text-soft)}
.gbx-step .n{width:20px;height:20px;border-radius:50%;display:grid;place-items:center;font-family:var(--font-mono);font-size:11px;
  background:var(--panel-3);color:var(--text-faint);flex:none}
.gbx-step.done{color:var(--text);border-color:var(--signal-line)}
.gbx-step.done .n{background:var(--signal);color:var(--signal-ink)}
.gbx-step.on{color:var(--text);border-color:var(--hair-3)}
.gbx-step.on .n{background:var(--panel);color:var(--signal-type);border:1px solid var(--signal)}
.gbx-crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-family:var(--font-mono);font-size:var(--t-xs);color:var(--text-faint)}
.gbx-crumbs a{color:var(--text-soft)}.gbx-crumbs a:hover{color:var(--signal-type)}
.gbx-crumbs .sep{opacity:.5}

/* ============================================================================
   26 · EMPTY STATE · SKELETON · code block · labelled divider
   ============================================================================ */
.gbx-empty{text-align:center;padding:var(--s7) var(--s4);color:var(--text-soft)}
.gbx-empty .glyph{width:52px;height:52px;margin:0 auto var(--s3);border-radius:50%;border:1px dashed var(--hair-3);display:grid;place-items:center;color:var(--text-faint)}
.gbx-empty h4{font-family:var(--font-display);font-weight:600;color:var(--text);margin:0 0 4px}
.gbx-skel{height:12px;border-radius:6px;background:linear-gradient(100deg,var(--panel-3) 30%,var(--hair-2) 50%,var(--panel-3) 70%);
  background-size:200% 100%;animation:gbx-shim 1.4s linear infinite}
.js .gbx-skel{}
.gbx-code{font-family:var(--font-mono);font-size:var(--t-sm);background:var(--void);border:1px solid var(--hair);border-radius:var(--r2);
  padding:14px 16px;color:var(--text-soft);overflow-x:auto;line-height:1.6}
.gbx-code .k{color:var(--signal-type)}.gbx-code .s{color:var(--accent-text)}.gbx-code .c{color:var(--text-faint)}
.gbx-divider{display:flex;align-items:center;gap:var(--s3);color:var(--text-faint);font-family:var(--font-mono);font-size:var(--t-micro);
  letter-spacing:.16em;text-transform:uppercase}
.gbx-divider::before,.gbx-divider::after{content:"";flex:1;height:1px;background:var(--hair)}

/* ============================================================================
   27 · KPI DELTA row · list row
   ============================================================================ */
.gbx-listrow{display:flex;align-items:center;gap:var(--s3);padding:13px 0;border-bottom:1px solid var(--hair)}
.gbx-listrow:last-child{border-bottom:0}
.gbx-listrow .grow{min-width:0}
.gbx-listrow .t{font-weight:600;font-size:var(--t-sm);color:var(--text)}
.gbx-listrow .d{font-size:var(--t-xs);color:var(--text-faint)}

/* ============================================================================
   28 · LOGO + PER-VERTICAL ACCENTS (wayfinding tints · NEVER the signal)
   ---------------------------------------------------------------------------
   Green stays the ONLY signal/action/status color. These accents are category
   wayfinding only (a dot, a top-border, a kicker) so each vertical/pilot reads
   distinct · they never color a button, pill, or live state.
   ============================================================================ */
.gbx-logo{display:block;flex:none}
.gbx-appbar .brand .gbx-logo{margin-right:2px}
:root{
  --v-pharma:#50c878;      /* lead · stays brand green            */
  --v-bioprocess:#3bb0a0;  /* teal                                 */
  --v-battery:#c9a24b;     /* brass (in-palette · not orange)      */
  --v-ag:#8bc34a;          /* lime                                 */
  --v-water:#4a9fd8;       /* blue                                 */
  --v-energy:#8a93a8;      /* slate                                */
  --v-cea:#9a6cff;         /* grow-light purple (OS/CEA)           */
}
.gbx-vtag{display:inline-flex;align-items:center;gap:8px;font-family:var(--font-mono);font-size:var(--t-micro);
  letter-spacing:.12em;text-transform:uppercase;color:var(--text-soft)}
.gbx-vtag::before{content:"";width:9px;height:9px;border-radius:3px;background:var(--tint,var(--signal));flex:none}
.gbx-vcard{border-top:2px solid var(--tint,var(--signal))}
.gbx-vdot{display:inline-block;width:9px;height:9px;border-radius:3px;background:var(--tint,var(--signal));flex:none}

/* ============================================================================
   29 · STAGE PIPELINE (pilot lifecycle) · ledger row · price ladder
   ============================================================================ */
.gbx-pipeline{display:flex;gap:0;flex-wrap:wrap}
.gbx-pipeline .stage{flex:1;min-width:110px;position:relative;padding:14px 12px 14px 22px;border:1px solid var(--hair);border-left:0;background:var(--panel)}
.gbx-pipeline .stage:first-child{border-left:1px solid var(--hair);border-radius:var(--r2) 0 0 var(--r2)}
.gbx-pipeline .stage:last-child{border-radius:0 var(--r2) var(--r2) 0}
.gbx-pipeline .stage::after{content:"";position:absolute;right:-8px;top:50%;width:14px;height:14px;transform:translateY(-50%) rotate(45deg);
  background:var(--panel);border-top:1px solid var(--hair);border-right:1px solid var(--hair);z-index:2}
.gbx-pipeline .stage:last-child::after{display:none}
.gbx-pipeline .stage.done{background:var(--signal-ghost);border-color:var(--signal-line)}
.gbx-pipeline .stage.done::after{background:var(--signal-ghost);border-color:var(--signal-line)}
.gbx-pipeline .stage.on{background:var(--panel-2)}
.gbx-pipeline .stage .sn{font-family:var(--font-mono);font-size:var(--t-micro);color:var(--text-faint);letter-spacing:.1em}
.gbx-pipeline .stage .st{font-weight:600;font-size:var(--t-sm);margin-top:3px}
.gbx-pipeline .stage.done .sn{color:var(--signal-type)}
@media(max-width:720px){.gbx-pipeline{flex-direction:column}.gbx-pipeline .stage,.gbx-pipeline .stage:first-child,.gbx-pipeline .stage:last-child{border-left:1px solid var(--hair);border-radius:var(--r2)}.gbx-pipeline .stage::after{display:none}.gbx-pipeline .stage{margin-bottom:6px}}
.gbx-ladder{display:grid;gap:10px}
.gbx-ladder .tier{display:grid;grid-template-columns:auto 1fr auto;gap:var(--s4);align-items:center;padding:14px 16px;border:1px solid var(--hair);border-radius:var(--r2);background:var(--panel)}
.gbx-ladder .tier.hot{border-color:var(--signal-line);background:var(--signal-ghost)}
.gbx-ladder .tier .tn{font-family:var(--font-mono);font-size:var(--t-micro);letter-spacing:.1em;text-transform:uppercase;color:var(--text-faint)}
.gbx-ladder .tier .price{font-family:var(--font-display);font-weight:800;font-size:1.05rem;white-space:nowrap;font-variant-numeric:tabular-nums}

/* ============================================================================
   30b · NAV-AWARE ANCHOR SCROLL · fixes "jumps under the sticky bar"
   ============================================================================ */
html{scroll-padding-top:calc(var(--nav-h) + 20px)}
:target,[id]{scroll-margin-top:calc(var(--nav-h) + 20px)}

/* ============================================================================
   31 · TOOLTIP · rich, floating · every graphic is informative
   ============================================================================ */
.gbx-tooltip{position:fixed;z-index:2000;max-width:290px;pointer-events:none;opacity:0;transform:translateY(4px);
  transition:opacity .12s var(--ease),transform .12s var(--ease);background:var(--void);color:var(--text);
  border:1px solid var(--hair-2);border-radius:var(--r2);box-shadow:var(--shadow-2);padding:11px 13px;font-size:var(--t-sm);line-height:1.5}
.gbx-tooltip.show{opacity:1;transform:none}
.gbx-tooltip .tt-h{font-family:var(--font-mono);font-size:var(--t-micro);letter-spacing:.12em;text-transform:uppercase;color:var(--signal-type);margin-bottom:5px;display:flex;align-items:center;gap:7px}
.gbx-tooltip .tt-h .swatch{width:9px;height:9px;border-radius:3px;background:var(--tint,var(--signal))}
.gbx-tooltip .tt-big{font-family:var(--font-display);font-weight:800;font-size:1.3rem;letter-spacing:-.02em;font-variant-numeric:tabular-nums;line-height:1.1}
.gbx-tooltip .tt-row{display:flex;justify-content:space-between;gap:16px;font-family:var(--font-mono);font-size:var(--t-xs);font-variant-numeric:tabular-nums;padding:1px 0}
.gbx-tooltip .tt-row .k{color:var(--text-faint)}
.gbx-tooltip .tt-d{color:var(--text-soft);font-size:var(--t-xs);margin-top:5px}
[data-tip]{cursor:help}
.gbx-appbar [data-tip]{cursor:pointer}
/* a defined term · dotted underline signals "hover for the plain-English meaning" */
.gbx-def{border-bottom:1px dashed var(--signal-line);cursor:help;text-decoration:none;color:inherit}
.gbx-def:hover{border-bottom-color:var(--signal)}

/* zoomable viz wrapper */
.gbx-viz-wrap{position:relative}
.gbx-viz-wrap.zoomable{cursor:zoom-in}
.gbx-viz-wrap .zbtn{position:absolute;top:4px;right:4px;width:26px;height:26px;border-radius:7px;display:grid;place-items:center;
  background:color-mix(in oklab,var(--panel) 80%,transparent);border:1px solid var(--hair);color:var(--text-faint);
  opacity:0;transition:opacity .15s var(--ease),color .15s var(--ease);cursor:zoom-in;font-size:13px}
.gbx-viz-wrap:hover .zbtn{opacity:1}
.gbx-viz-wrap .zbtn:hover{color:var(--signal-type);border-color:var(--signal-line)}

/* ============================================================================
   32 · MODAL · zoom / detail view
   ============================================================================ */
.gbx-modal{position:fixed;inset:0;z-index:1500;display:grid;place-items:center;padding:24px;
  background:color-mix(in oklab,var(--void) 66%,transparent);backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px);
  opacity:0;pointer-events:none;transition:opacity var(--dur-2) var(--ease)}
.gbx-modal.open{opacity:1;pointer-events:auto}
.gbx-modal-panel{width:min(780px,94vw);max-height:88vh;overflow:auto;background:var(--panel);border:1px solid var(--hair-2);
  border-radius:var(--r4);box-shadow:0 50px 100px -30px rgba(0,0,0,.7);transform:translateY(12px) scale(.985);transition:transform var(--dur-2) var(--ease-out)}
.gbx-modal.open .gbx-modal-panel{transform:none}
.gbx-modal-head{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--s4);padding:var(--s5) var(--s5) var(--s3);border-bottom:1px solid var(--hair)}
.gbx-modal-head h3{margin:0}.gbx-modal-head .sub{color:var(--text-soft);font-size:var(--t-sm);margin-top:3px}
.gbx-modal-x{width:32px;height:32px;border-radius:8px;flex:none;display:grid;place-items:center;background:var(--panel-2);border:1px solid var(--hair);color:var(--text-soft);cursor:pointer;font-size:15px}
.gbx-modal-x:hover{color:var(--text);border-color:var(--hair-2)}
.gbx-modal-body{padding:var(--s5)}
.gbx-detail-table{width:100%;border-collapse:collapse;font-size:var(--t-sm)}
.gbx-detail-table th,.gbx-detail-table td{text-align:left;padding:9px 12px;border-bottom:1px solid var(--hair)}
.gbx-detail-table th{font-family:var(--font-mono);font-size:var(--t-micro);letter-spacing:.1em;text-transform:uppercase;color:var(--text-faint);font-weight:500}
.gbx-detail-table td.num{text-align:right;font-family:var(--font-mono);font-variant-numeric:tabular-nums}
.gbx-detail-table tr.flag td{background:var(--danger-ghost)}
.gbx-detail-table tr:last-child td{border-bottom:0}

/* ============================================================================
   33 · RESPONSIVE OVERRIDES · MUST BE LAST (equal-specificity cascade wins by order)
   ============================================================================ */
@media(max-width:640px){
  .gbx-grid[style*="grid-template-columns"]{grid-template-columns:1fr !important}  /* inline 2-col grids collapse */
  .gbx-kicker{white-space:normal !important;display:block !important;line-height:1.7}  /* long context kickers wrap */
  .gbx-kicker::before{display:none}                                               /* drop the decorative rule */
  .gbx-card{overflow-x:auto}                                                      /* wide tables scroll in-card */
  .gbx-appbar{gap:3px;padding-inline:13px}
  .gbx-launch{padding:7px 9px;gap:6px}
  .gbx-launch .lbl,.gbx-theme-toggle .lbl{display:none}   /* mobile · icon-only launcher + theme toggle */
  #gbx-navstatus{display:none}                            /* mobile · drop the status pill to save room */
  .gbx-table{min-width:520px}                             /* keep columns; the card scrolls */
}

/* ============================================================================
   34 · PRINT · certificates and pages print clean (white, no chrome)
   ============================================================================ */
@media print{
  .gbx-appbar,.gbx-cmd,.gbx-tooltip,.gbx-modal,.gbx-launch,.gbx-theme-toggle,.gbx-btn,footer,.foot,.gbx-viz-wrap .zbtn{display:none !important}
  html,body{background:#fff !important;color:#1a1a1a !important}
  .gbx-grid-bg::before,.gbx-grid-bg::after{display:none !important}
  *{box-shadow:none !important;-webkit-print-color-adjust:exact;print-color-adjust:exact}
  .gbx-card,.gc-card,.gbx-metric,.gbx-code{background:#fff !important;border:1px solid #d9d9d9 !important;break-inside:avoid}
  .gbx-section{padding-block:18px;border-top:0}
  a{color:inherit !important;text-decoration:none}
  .gbx-reveal{opacity:1 !important;transform:none !important}
}