/* saltysignal.css — Signal & Salt shared brand system.
   Extracted from the /income/sentinel design tokens (the branding source of truth).
   Dark theme, Robinhood green/red accents, JetBrains Mono (data) + Fraunces (display).
   Mobile-first. Every saltysignal surface (home, hubs, dashboards) imports this. */

/* Fonts are NOT loaded from a third-party CDN (CSP default-src 'self'). We fall
   back to the system stacks below (Georgia / Menlo). Self-host Fraunces +
   JetBrains Mono under /assets/fonts and add @font-face here for brand fidelity. */

:root{
  /* surfaces — Graphite Sage palette */
  --bg:#15181a; --panel:#1c2022; --panel2:#20262a; --line:#2b3033;
  --rh-bg:#0f1112;
  /* ink */
  --ink:#dde2e0; --dim:#889089; --faint:#565d58;
  /* brand accent (sage) — unifies the old blue chrome + green wordmark/buttons */
  --blue:#7fae8a; --green:#51cf66; --red:#ff6b6b; --gold:#ffd43b; --violet:#a78bfa;
  /* Graphite Sage viz accents (all >=5:1 on --bg): sage2 highlight, brass, clay */
  --sage2:#a9c6b1; --brass:#c9a86a; --clay:#c98a7a;
  /* brand accent (sage); --rh-red kept as a semantic data color */
  --rh-green:#7fae8a; --rh-red:#FF5000;
  /* type */
  --mono:'JetBrains Mono',ui-monospace,Menlo,monospace;
  --disp:'Fraunces',Georgia,serif;
  /* spacing/radius */
  --r:12px; --r-sm:9px; --r-lg:16px;
  --maxw:1100px;
}

*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--mono);
  -webkit-text-size-adjust:100%;-webkit-font-smoothing:antialiased;overflow-x:hidden}
body{
  /* subtle sentinel grid */
  background-image:
    linear-gradient(rgba(255,255,255,.015) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.015) 1px,transparent 1px);
  background-size:44px 44px,44px 44px;
  min-height:100vh;
}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 18px}

/* header with the sentinel pulse */
header.ss{border-bottom:1px solid var(--line);padding:22px 0 16px;margin-bottom:22px}
.ss-brand{display:flex;align-items:center;gap:10px}
@media(prefers-reduced-motion:reduce){.tile{transition:none}}
/* Canonical wordmark — MUST stay identical to the landing's `.mono` wordmark
   (home/index.html): same font var, weight, letter-spacing, sizing, and colors.
   This single rule keeps login, Command Center, Gary, hubs — every page — typed
   exactly like the landing Brian approved. Do not diverge without changing both. */
.ss-brand h1{font-family:var(--mono);font-weight:500;font-size:clamp(11px,2.2vw,14px);
  margin:0;letter-spacing:.42em;text-indent:.42em;text-transform:uppercase;color:var(--dim)}
.ss-brand .sig{color:var(--blue);font-weight:600}   /* "Signal" = sage accent */
.ss-brand .salt{color:var(--ink);font-weight:600}   /* "Salt" = neutral ink */
.ss-brand .s{color:var(--dim)}                       /* separator = neutral dim */
.ss-sub{color:var(--dim);font-size:12px;margin-top:4px}

/* display headings */
h2.ss{font-family:var(--disp);font-weight:600;font-size:19px;margin:26px 0 12px}

/* tile grid — mobile-first, responsive */
.grid{display:grid;grid-template-columns:1fr;gap:14px}
@media(min-width:640px){.grid{grid-template-columns:1fr 1fr}}
@media(min-width:920px){.grid{grid-template-columns:1fr 1fr 1fr}}

.tile{display:block;background:linear-gradient(180deg,var(--panel),#101010);
  border:1px solid var(--line);border-radius:var(--r);padding:16px 16px 14px;
  position:relative;overflow:hidden;text-decoration:none;color:var(--ink);
  transition:border-color .15s, transform .1s}
.tile:hover{border-color:var(--rh-green);transform:translateY(-1px)}
.tile::before{content:"";position:absolute;left:0;right:0;top:0;height:2px;background:rgba(127,174,138,.32)}
.tile.accent-green::before{background:rgba(127,174,138,.5)}
.tile.accent-red::before{background:rgba(201,138,122,.5)}
.tile.accent-gold::before{background:rgba(201,168,106,.5)}
.tile .t-name{font-family:var(--disp);font-size:16px;font-weight:600;margin:0 0 6px}
.tile .t-desc{color:var(--dim);font-size:12.5px;line-height:1.5;margin:0}
.tile .t-tag{display:inline-block;margin-top:10px;font-size:10.5px;color:var(--faint);
  border:1px solid var(--line);border-radius:6px;padding:2px 7px;text-transform:uppercase;letter-spacing:.5px}
.tile.locked{opacity:.55}
.tile.locked::after{content:"🔒";position:absolute;top:14px;right:14px;font-size:12px}

/* download button — mobile-first, large tap target (>=44px), full-width on phone.
   Standing gate: Brian/Gary download on a phone. */
.btn-dl{display:flex;flex-direction:column;gap:3px;justify-content:center;
  width:100%;min-height:56px;margin:16px 0 4px;padding:13px 18px;
  background:linear-gradient(180deg,var(--panel),#101010);
  border:1px solid var(--line);border-left:3px solid var(--rh-green);
  border-radius:var(--r);text-decoration:none;color:var(--ink);
  transition:border-color .15s,transform .1s}
.btn-dl:hover,.btn-dl:focus-visible{border-color:var(--rh-green);transform:translateY(-1px)}
.btn-dl:active{transform:translateY(0)}
.btn-dl-main{font-family:var(--disp);font-size:16px;font-weight:600}
.btn-dl-sub{font-size:11.5px;color:var(--dim)}
@media(min-width:640px){.btn-dl{max-width:420px}}
@media(prefers-reduced-motion:reduce){.btn-dl{transition:none}}

.btn-dl-alt{display:inline-block;margin:2px 0 8px;font-size:12px;color:var(--blue);
  min-height:32px;line-height:32px}

/* ---- Command Center (mobile-first) ------------------------------------- */
.cc-legend{font-size:11.5px;color:var(--dim);line-height:1.7;margin:0 0 14px;
  padding:10px 12px;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--panel)}
.cc-legend b{color:var(--ink)}
.cc-panel{border:1px solid var(--line);border-radius:var(--r);background:var(--panel);
  padding:14px 14px 12px;margin:0 0 14px}
.cc-panel.cc-stub{opacity:.6}
.cc-panel-head{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:0 0 10px}
.cc-panel-head h3{font-family:var(--disp);font-size:16px;font-weight:600;margin:0;flex:1 1 auto}
.cc-fresh{display:inline-flex;align-items:center;gap:5px}
.cc-asof{font-size:10.5px;color:var(--faint)}
.cc-dot{width:8px;height:8px;border-radius:50%;display:inline-block;flex:0 0 auto}
.cc-dot-ok{background:var(--rh-green)} .cc-dot-warn{background:#c9a86a} .cc-dot-na{background:var(--faint)}
.cc-prov,.cc-tag-paper,.cc-tag-stub{font-size:10px;text-transform:uppercase;letter-spacing:.5px;
  border:1px solid var(--line);border-radius:6px;padding:2px 7px;color:var(--faint)}
.cc-tag-paper{color:#c9a86a;border-color:rgba(201,168,106,.5)}
.cc-tag-stub{color:var(--faint)}
.cc-src{font-size:10.5px;color:var(--faint);margin-top:6px}
/* KPI cards — 1 col on phone, more as width allows */
.cc-kpi-grid{display:grid;grid-template-columns:1fr;gap:10px}
@media(min-width:560px){.cc-kpi-grid{grid-template-columns:1fr 1fr}}
@media(min-width:900px){.cc-kpi-grid{grid-template-columns:1fr 1fr 1fr}}
.cc-kpi{border:1px solid var(--line);border-left:2px solid rgba(127,174,138,.4);border-radius:var(--r-sm);
  padding:11px 12px;background:linear-gradient(180deg,rgba(127,174,138,.04),#101010 42%)}
.cc-kpi.cc-green{border-left-color:rgba(127,174,138,.55)}
.cc-kpi.cc-amber{border-left-color:rgba(201,168,106,.55);background:linear-gradient(180deg,rgba(201,168,106,.05),#101010 42%)}
.cc-kpi.cc-red{border-left-color:rgba(201,138,122,.55);background:linear-gradient(180deg,rgba(201,138,122,.05),#101010 42%)}
.cc-kpi.cc-unknown,.cc-kpi.cc-na{border-left-color:var(--faint);background:#101010}
.cc-kpi.cc-green .cc-kpi-val{color:var(--rh-green)} .cc-kpi.cc-amber .cc-kpi-val{color:#c9a86a} .cc-kpi.cc-red .cc-kpi-val{color:#c98a7a}
.cc-kpi-top{display:flex;justify-content:space-between;align-items:baseline;gap:6px}
.cc-kpi-label{font-size:12.5px;color:var(--ink)}
.cc-grp{font-size:9.5px;text-transform:uppercase;color:var(--faint);letter-spacing:.5px}
.cc-kpi-val{font-family:var(--disp);font-size:24px;font-weight:600;margin:4px 0 1px}
.cc-kpi-tgt{font-size:11px;color:var(--dim)}
.cc-gauge{height:5px;border-radius:3px;background:var(--line);overflow:hidden;margin:8px 0 7px}
.cc-gauge span{display:block;height:100%;background:var(--rh-green)}
.cc-red .cc-gauge span{background:#c98a7a} .cc-amber .cc-gauge span{background:#c9a86a}
.cc-unknown .cc-gauge span,.cc-na .cc-gauge span{background:var(--faint)}
.cc-kpi-note{font-size:11px;color:var(--dim);line-height:1.5}
.cc-row{display:flex;justify-content:space-between;gap:10px;padding:6px 0;
  border-bottom:1px solid var(--line);font-size:13px}
.cc-row:last-child{border-bottom:0}
.cc-row.cc-muted{color:var(--faint)}
.cc-empty{font-size:12px;color:var(--faint);margin:6px 0 0;line-height:1.5}
/* Brian-only PII tile (deployable cash) — visually distinct, gold/PII accent */
.cc-pii{border:1px solid rgba(201,168,106,.4);border-left:2px solid #c9a86a;
  background:linear-gradient(180deg,rgba(201,168,106,.06),#101010 42%)}
.cc-tag-pii{font-size:10px;text-transform:uppercase;letter-spacing:.5px;
  border:1px solid rgba(201,168,106,.5);color:#c9a86a;border-radius:6px;padding:2px 7px}
.cc-big{font-size:clamp(30px,8vw,42px);line-height:1.05;color:var(--ink)}

/* numbers / pos-neg coloring (data surfaces) */
.pos{color:var(--rh-green)} .neg{color:#c98a7a}
code,.mono{font-family:var(--mono)}

footer.ss{border-top:1px solid var(--line);margin-top:34px;padding:16px 0 30px;color:var(--faint);font-size:11px}
a{color:var(--blue)}

/* ---- Lean Command Center: two cards (REAL + PAPER) --------------------- */
/* Brian-approved mock: solid-sage REAL card on top, dashed-brass striped PAPER
   card below. Server-rendered SVG sparklines (no JS). Mobile-first. */
.cc2-wrap{max-width:680px}
.cc2-card{border:1px solid var(--line);border-radius:12px;padding:18px;margin:0 0 16px}
.cc2-top{display:flex;justify-content:space-between;align-items:baseline;flex-wrap:wrap;gap:8px;margin-bottom:6px}
.cc2-h{font-family:var(--disp);font-size:17px;font-weight:600}
.cc2-badge{font-size:10px;text-transform:uppercase;letter-spacing:.6px;border-radius:6px;padding:3px 9px;border:1px solid var(--line);color:var(--dim)}
.cc2-up{color:var(--rh-green)} .cc2-down{color:#c98a7a}
.cc2-empty{font-size:12.5px;color:var(--faint);margin:10px 0 2px;line-height:1.5}

.cc2-valrow{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap;margin:12px 0 4px}
.cc2-val{font-family:var(--disp);font-size:clamp(30px,8vw,42px);font-weight:600;line-height:1.02}
.cc2-val-paper{font-size:clamp(26px,7vw,36px)}
.cc2-spark{flex:1 1 200px;max-width:280px;min-width:160px}
.cc2-spark svg{width:100%;height:46px;display:block}
.cc2-stag{font-size:11px;color:var(--faint);margin-left:8px;border:1px solid var(--line);border-radius:5px;padding:1px 6px}

.cc2-row{display:flex;gap:22px;flex-wrap:wrap;font-size:13px;color:var(--dim);margin-bottom:6px}
.cc2-row b{font-family:var(--mono);color:var(--ink)}
.cc2-row b.cc2-up,.cc2-psum b.cc2-up{color:var(--rh-green)} .cc2-row b.cc2-down,.cc2-psum b.cc2-down{color:#c98a7a}

/* REAL card — solid sage left rule + soft sage wash */
.cc2-real{border-left:2px solid rgba(127,174,138,.55);background:linear-gradient(180deg,rgba(127,174,138,.05),#101010 42%)}
.cc2-badge.cc2-real-b{color:var(--rh-green);border-color:rgba(127,174,138,.5)}
.cc2-hold{margin-top:14px;border-top:1px solid var(--line);padding-top:10px}
.cc2-hl{display:flex;justify-content:space-between;align-items:center;padding:6px 0;font-size:13px;border-bottom:1px solid rgba(43,48,51,.6)}
.cc2-hl:last-child{border-bottom:0}
.cc2-hl .cc2-t{color:var(--ink)} .cc2-hl .cc2-q{color:var(--faint);font-size:11px;margin-left:8px}
.cc2-hl .cc2-v{color:var(--dim)} .cc2-hl .cc2-d{margin-left:14px;display:inline-block;min-width:52px;text-align:right}

/* PAPER card — VISUALLY DISTINCT: dashed brass border + diagonal stripe */
.cc2-paper{border:1px dashed rgba(201,168,106,.55);
  background:repeating-linear-gradient(135deg,rgba(201,168,106,.03) 0 10px,transparent 10px 20px),#141414}
.cc2-badge.cc2-paper-b{color:#c9a86a;border-color:rgba(201,168,106,.6)}
.cc2-paper-sub{font-size:11px;color:#c9a86a;margin:2px 0 8px}
.cc2-psum{font-size:12.5px;color:var(--dim)}.cc2-psum b{font-family:var(--mono)}
.cc2-strat{border-top:1px solid var(--line);padding-top:10px;margin-top:12px}
.cc2-sr{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:8px 0;font-size:13px;border-bottom:1px solid rgba(43,48,51,.6)}
.cc2-sr:last-child{border-bottom:0}
.cc2-sn{color:var(--ink);display:flex;align-items:center;gap:8px}
.cc2-smeta{color:var(--faint);font-size:11px}
.cc2-dot{width:8px;height:8px;border-radius:50%;flex:0 0 auto;display:inline-block}
.cc2-sv{text-align:right;font-size:12px;min-width:96px}.cc2-sv .cc2-pp{display:block}
.cc2-halt{display:flex;gap:18px;flex-wrap:wrap;font-size:11.5px;color:var(--dim);margin-top:12px;border-top:1px solid var(--line);padding-top:10px}
.cc2-st{display:inline-flex;align-items:center;gap:7px}

/* ---- Gary dashboard (/gary) — Graphite Sage, mobile-first ---------------- */
.gd-stamps{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 14px}
.gd-stamp{flex:1 1 160px;border:1px solid var(--line);border-radius:var(--r-sm);
  background:var(--panel);padding:9px 11px}
.gd-stamp-k{display:block;font-size:10px;text-transform:uppercase;letter-spacing:.5px;color:var(--faint)}
.gd-stamp-v{display:block;font-size:13px;color:var(--ink);margin-top:2px}
.gd-ind{font-size:9.5px;color:#c9a86a;border:1px solid rgba(201,168,106,.5);border-radius:5px;padding:1px 5px;margin-left:4px}
.gd-actions{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 16px}
.gd-act-form{flex:1 1 auto;margin:0}
.gd-btn{display:flex;align-items:center;justify-content:center;width:100%;min-height:48px;
  padding:12px 18px;border-radius:var(--r);font-family:var(--mono);font-weight:600;font-size:14px;
  border:1px solid #7fae8a;background:rgba(127,174,138,.10);color:var(--ink);cursor:pointer;
  text-decoration:none;transition:background .2s,box-shadow .2s}
.gd-btn:hover{background:rgba(127,174,138,.18);box-shadow:0 0 26px rgba(127,174,138,.20)}
.gd-btn[disabled]{opacity:.6;cursor:default}
.gd-btn-alt{flex:1 1 auto;background:transparent;border-color:var(--line)}
.gd-btn-off{flex:1 1 auto;border-color:var(--line);background:transparent;color:var(--faint);cursor:default}
.gd-panel{border:1px solid var(--line);border-radius:var(--r);background:var(--panel);padding:14px;margin:0 0 14px}
.gd-panel-h{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:0 0 10px}
.gd-panel-h h3{font-family:var(--disp);font-size:16px;font-weight:600;margin:0;flex:1 1 auto}
.gd-tag{font-size:10px;text-transform:uppercase;letter-spacing:.5px;color:var(--faint);
  border:1px solid var(--line);border-radius:6px;padding:2px 7px}
.gd-adv{border-left:2px solid rgba(127,174,138,.5)}
.gd-cards{display:grid;grid-template-columns:1fr;gap:10px}
@media(min-width:640px){.gd-cards{grid-template-columns:1fr 1fr}}
.gd-card{border:1px solid var(--line);border-radius:var(--r-sm);background:#101010;padding:12px}
.gd-card.gd-banked{border-color:rgba(127,174,138,.4);background:linear-gradient(180deg,rgba(127,174,138,.05),#101010 45%)}
.gd-card.gd-empty{opacity:.7}
.gd-card-h{font-family:var(--disp);font-size:14px;font-weight:600;margin:0 0 8px;text-transform:capitalize}
.gd-row{display:flex;justify-content:space-between;gap:10px;padding:5px 0;border-bottom:1px solid var(--line);font-size:13px}
.gd-row:last-child{border-bottom:0}
.gd-row b{color:var(--ink);font-weight:600}
.gd-conf{font-size:12px;color:var(--dim);line-height:1.55;margin:10px 0 0;font-style:italic}
.gd-caveats{margin:10px 0 0;padding-left:18px;color:var(--faint);font-size:11px;line-height:1.5}
.gd-big{font-family:var(--disp);font-size:clamp(26px,7vw,34px);font-weight:600;color:var(--ink);margin:2px 0 6px}
.gd-cash .gd-big{color:#7fae8a}
.gd-sub{font-size:11px;color:var(--faint)}
.gd-note{font-size:12px;color:var(--dim);line-height:1.5;margin:8px 0 0}
.gd-ctx .gd-row{font-size:12.5px}

/* ---- Gary VIZ dashboard (/gary) — Lupi-style premium-fence landscape ----- */
.gv-wrap{max-width:760px}
.gv-stamps{display:flex;gap:18px;flex-wrap:wrap;font-size:10.5px;color:var(--faint);
  text-transform:uppercase;letter-spacing:.1em;margin:0 0 8px}
.gv-stamps b{color:var(--dim);font-weight:500}
.gv-hero{margin:4px 0 6px;padding:0}
/* ---- ON-AIR / MARKET-CLOSED badge — broadcast-style live-vs-stale sign -----
   Prominent near the top of the hero. Filled by gary-viz.js (CSP-clean DOM).
   OPEN: lit sage "ON AIR · LIVE" with a gently pulsing dot. CLOSED: muted
   "MARKET CLOSED" + a "showing … close" subline. Mobile-first; fits 360/390. */
.gv-onair{display:inline-flex;flex-wrap:wrap;align-items:baseline;gap:5px 10px;
  margin:0 0 10px;padding:7px 13px;border-radius:999px;border:1px solid var(--line);
  font-family:var(--mono);max-width:100%}
.gv-onair-lead{display:inline-flex;align-items:center;gap:8px}
.gv-onair-dot{width:9px;height:9px;border-radius:50%;flex:0 0 auto;
  background:var(--faint);box-shadow:none}
.gv-onair-label{font-weight:700;font-size:12px;letter-spacing:.14em;
  text-transform:uppercase;white-space:nowrap}
.gv-onair-sub{font-size:10.5px;letter-spacing:.05em;color:var(--dim);
  text-transform:none}
/* LIVE — glowing sage, lit pulsing dot */
.gv-onair-live{border-color:#7fae8a;background:rgba(127,174,138,.14);
  box-shadow:0 0 0 1px rgba(127,174,138,.18),0 0 14px rgba(127,174,138,.20)}
.gv-onair-live .gv-onair-label{color:var(--sage2)}
.gv-onair-live .gv-onair-dot{background:#7fae8a;
  box-shadow:0 0 5px rgba(127,174,138,.95),0 0 11px rgba(127,174,138,.65);
  animation:gv-onair-pulse 1.6s ease-in-out infinite}
/* CLOSED — muted, un-lit */
.gv-onair-off{border-color:var(--line);background:rgba(136,144,137,.07)}
.gv-onair-off .gv-onair-label{color:var(--dim)}
.gv-onair-off .gv-onair-dot{background:var(--faint);box-shadow:none;animation:none}
@keyframes gv-onair-pulse{
  0%,100%{transform:scale(1);opacity:.95}
  50%{transform:scale(1.45);opacity:.55}
}
/* honor reduced-motion: keep the dot LIT (glow stays) but DON'T pulse */
.gv-onair-reduced .gv-onair-dot{animation:none!important;transform:none}
@media(prefers-reduced-motion:reduce){
  .gv-onair-live .gv-onair-dot{animation:none}
}
@media(max-width:400px){
  .gv-onair{padding:6px 11px;gap:4px 8px}
  .gv-onair-label{font-size:11px;letter-spacing:.1em}
  .gv-onair-sub{font-size:10px}
}
/* ---- chart controls: chip + segmented-control row (mobile-first) ----------
   Graphite Sage palette. >=44px tap targets, wraps on phone. CSP-clean: the JS
   wires every button via addEventListener (no inline handlers). Off = the muted
   "line" border; on = sage outline + sage wash. */
.gv-controls{display:flex;flex-wrap:wrap;align-items:center;gap:8px;
  margin:0 0 10px;padding:2px 0}
.gv-ctl-row{display:inline-flex;flex-wrap:wrap;gap:6px;align-items:center}
.gv-layers{gap:6px}
/* segmented control — two joined buttons; the active segment carries the wash */
.gv-seg{min-height:44px;min-width:44px;padding:9px 14px;font-family:var(--mono);
  font-weight:600;font-size:12.5px;letter-spacing:.02em;cursor:pointer;
  border:1px solid var(--line);background:transparent;color:var(--dim);
  border-radius:0}
.gv-seg:first-child{border-radius:var(--r) 0 0 var(--r)}
.gv-seg:last-child{border-radius:0 var(--r) var(--r) 0;border-left:0}
.gv-seg[aria-checked="true"]{background:rgba(127,174,138,.16);
  border-color:#7fae8a;color:var(--ink)}
.gv-seg:hover{background:rgba(127,174,138,.10)}
/* tap-toggle chip — pill; on=sage outline+wash, off=muted line border */
.gv-chip{min-height:44px;padding:9px 13px;font-family:var(--mono);font-weight:600;
  font-size:12.5px;letter-spacing:.02em;cursor:pointer;border-radius:var(--r);
  border:1px solid var(--line);background:transparent;color:var(--dim)}
.gv-chip:hover{background:rgba(127,174,138,.08)}
.gv-chip.gv-chip-on{background:rgba(127,174,138,.16);border-color:#7fae8a;color:var(--ink)}
.gv-chip[aria-disabled="true"]{opacity:.4;cursor:default;pointer-events:none}
.gv-seg:focus-visible,.gv-chip:focus-visible{outline:2px solid var(--blue);
  outline-offset:2px}
@media(max-width:400px){
  .gv-seg,.gv-chip{font-size:12px;padding:9px 11px}
}
/* ---- v8 single-tenor: active-expiry caption + expiry selector ------------
   The caption names the ONE expiry the whole chart is pinned to ("26 Jun · 5d
   weekly"), so a pick's dollars always read against that single tenor. The
   selector is one chip per available expiry; the pinned/nearest is the active
   default. CSP-clean (JS DOM-builds + addEventListener). */
.gv-tenor-caption{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px;
  margin:0 0 8px}
.gv-tenor-lead{font-family:var(--disp,Georgia,serif);font-weight:600;
  font-size:15px;letter-spacing:.01em;color:var(--sage2)}
.gv-tenor-note{font-family:var(--mono);font-size:10.5px;letter-spacing:.04em;
  color:var(--dim)}
.gv-tenors{gap:6px}
/* the expiry chips read slightly tighter than layer chips (date·dte is wide) */
.gv-tenor-chip{font-size:12px;letter-spacing:.01em}
.gv-tenor-chip[aria-checked="true"]{background:rgba(127,174,138,.16);
  border-color:#7fae8a;color:var(--ink)}
/* refresh notice when an unpriced expiry is chosen — muted, never alarming */
.gv-tenor-refresh{flex-basis:100%;margin:2px 0 4px;font-family:var(--mono);
  font-size:11px;letter-spacing:.02em;color:var(--clay)}
@media(max-width:400px){
  .gv-tenor-lead{font-size:14px}
  .gv-tenor-chip{font-size:11.5px;padding:9px 10px}
}
/* the interactive D3 "Garden Ridge" hero — the dominant element of /gary */
.gv-stage{width:100%;min-height:300px;position:relative}
.gv-svg{width:100%;height:auto;display:block}
.gv-svg text{font-family:var(--mono)}
/* LEGIBILITY: every label class fills with an audited >=5:1 color on graphite.
   The --faint token (#565d58, CR 2.63) is NEVER used for text — it read as
   "invisible black" on #15181a. JS also sets these fills explicitly per element
   (defense in depth) so a missing stylesheet can never fall back to #000. */
.gv-tick{fill:var(--dim);font-size:11px}
/* v7 (Brian — design B): wordless capped fence posts. The raw fence number rides
   above its solid post-cap; the true-floor number rides under its lighter dashed
   companion cap. No more "put fence" / "call fence" / "true floor" words. */
.gv-fence-n{fill:var(--sage2);font-size:13px;font-weight:600;letter-spacing:.02em}
.gv-true{fill:var(--clay);font-size:11px;font-weight:600;letter-spacing:.04em}
.gv-spot-lbl{fill:var(--ink);font-size:11px;font-weight:600}
.gv-spot{fill:var(--ink);font-family:var(--disp);font-size:15px;font-weight:600}
.gv-meta{fill:var(--dim);font-size:11px;letter-spacing:.07em;text-transform:uppercase}
.gv-peak-lbl{fill:var(--sage2);font-size:10.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase}
.gv-peak-val{fill:var(--ink);font-family:var(--disp);font-size:15px;font-weight:600}
.gv-peak-sub{fill:var(--dim);font-size:10.5px;letter-spacing:.04em}
.gv-peak{outline:none}
.gv-peak:focus-visible{outline:2px solid var(--blue);outline-offset:3px;border-radius:4px}
.gv-title{fill:var(--ink);font-family:var(--disp);font-size:18px;font-weight:600;letter-spacing:.01em}
.gv-ytick{fill:var(--dim);font-size:10px;font-variant-numeric:tabular-nums}
.gv-yaxis-title{fill:var(--sage2);font-size:10px;font-weight:600;letter-spacing:.06em}
.gv-quiet{color:var(--dim);font-size:13px;text-align:center;padding:60px 20px;line-height:1.6}
/* the single live readout strip — the only text that updates on hover/tap */
.gv-readout-live{min-height:34px;display:flex;align-items:center;justify-content:center;
  text-align:center;font-size:12px;line-height:1.5;color:var(--dim);
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  padding:9px 10px;margin:2px 0 0;font-variant-numeric:tabular-nums}
.gv-readout-live b{color:var(--ink);font-weight:600}
.gv-ro-k{color:var(--blue);text-transform:uppercase;letter-spacing:.08em;font-size:11px}
.gv-ro-safe{color:var(--blue)}
.gv-ro-hint{color:var(--faint)}
.gv-cap{font-size:11px;color:var(--faint);text-align:center;margin:8px 0 0;letter-spacing:.04em}
.gv-readout{margin:14px 0 4px}
.gv-read{color:var(--dim);font-size:13px;line-height:1.62;margin:0 0 8px;max-width:64ch}
.gv-caveats{margin:6px 0 0;padding-left:16px;color:var(--faint);font-size:11px;line-height:1.5}
@media(max-width:380px){
  .gv-peak-val{font-size:15px}.gv-spot{font-size:14px}
  .gv-readout-live{font-size:11px}
}

/* ---- Clients · superuser view-as (on /me/) — mobile-first ---------------- */
.cc-clients{border:1px solid var(--line);border-radius:var(--r);background:var(--panel);
  padding:14px;margin:0 0 14px}
.cc-clients h3{font-family:var(--disp);font-size:15px;font-weight:600;margin:0 0 10px}
.cc-client-grid{display:grid;grid-template-columns:1fr;gap:8px}
@media(min-width:560px){.cc-client-grid{grid-template-columns:1fr 1fr}}
.cc-client{display:flex;flex-direction:column;gap:2px;min-height:48px;justify-content:center;
  padding:11px 14px;border:1px solid var(--line);border-left:3px solid var(--blue);
  border-radius:var(--r-sm);text-decoration:none;color:var(--ink);background:#101010;
  transition:border-color .15s,transform .1s}
.cc-client:hover{border-color:var(--blue);transform:translateY(-1px)}
.cc-client-name{font-family:var(--disp);font-size:15px;font-weight:600}
.cc-client-sub{font-size:11.5px;color:var(--dim)}