/* apps2 shared styling — Helvetica, minimal, data-first. Every apps2 lens links this.
   VERSION v3 (2026-07-04): appended the shared UI primitives that were previously copied
   inline across ≥2 apps (divergence panel, sub-controls, chip pills, cohort legend,
   select-all buttons, key-figure block, tick/cue/sbar, heat-bar/tag pill). See the
   "SHARED PRIMITIVES" block at the bottom + shared/SHARED-API.md. Link with ?v=3. */
:root{
  --ink:#111; --dim:#777; --faint:#bbb; --line:#e3e3e3; --bg:#fff; --panel:#fafafa;
  --up:#1565c0; --down:#c62828; --warn:#e8a200; --hot:#c62828;
  --accent:#1565c0;
  /* spacing rhythm (2026-06-25 polish pass) */
  --sp:16px; --sp-sm:10px; --sp-xs:6px;
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);
  font-family:Helvetica,"Helvetica Neue",Arial,sans-serif;font-size:13px;line-height:1.45;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
h1{font-size:14px;font-weight:700;letter-spacing:.02em;margin:0}
a{color:var(--up)}
.sub{color:var(--dim);font-size:11px}
/* ── unified header (2026-06-25): app title · tagline · nav (right) · status (far right) ── */
header{display:flex;align-items:baseline;gap:10px 16px;flex-wrap:wrap;
  padding:11px 16px;border-bottom:1px solid var(--line);background:#fff;
  position:sticky;top:0;z-index:6}
header h1{white-space:nowrap}
header .sub.tag{flex:1 1 auto;min-width:120px}
.wrap{padding:var(--sp);display:grid;gap:var(--sp);max-width:1280px}
.panel{border:1px solid var(--line);background:var(--panel)}
.panel>.hd{padding:8px 12px;border-bottom:1px solid var(--line);font-size:11px;
  text-transform:uppercase;letter-spacing:.12em;color:var(--dim);font-weight:700;line-height:1.35}
.panel>.hd .hint{display:block;text-transform:none;letter-spacing:0;font-weight:400;
  font-size:11px;color:var(--faint);margin-top:2px}
.panel>.bd{padding:12px}
/* key figure — the single dominant number on a panel (2026-06-25) */
.keyfig{font-size:34px;font-weight:700;letter-spacing:-.02em;line-height:1;
  font-variant-numeric:tabular-nums;display:block}
.keyfig.pos{color:var(--up)} .keyfig.neg{color:var(--down)}
.keyfig-lbl{font-size:10px;text-transform:uppercase;letter-spacing:.12em;color:var(--dim);margin-top:5px}
/* cross-lens nav — consistent across hub + all lenses */
.nav{display:flex;gap:4px 2px;font-size:11px;flex-wrap:wrap;align-items:center;margin-left:auto}
.nav a{color:var(--dim);text-decoration:none;padding:3px 7px;border:1px solid transparent;
  border-radius:3px;white-space:nowrap;line-height:1.2}
.nav a:hover{color:var(--ink);border-color:var(--line)}
.nav a.cur{color:#fff;background:var(--ink);border-color:var(--ink);font-weight:700}
/* controls */
.ctl{display:flex;flex-wrap:wrap;gap:12px 18px;align-items:flex-end;padding:10px 16px;
  border-bottom:1px solid var(--line);background:#fff;position:sticky;top:43px;z-index:5}
.ctl label{display:inline-flex;flex-direction:column;gap:3px;font-size:10px;
  text-transform:uppercase;letter-spacing:.08em;color:var(--dim)}
.ctl label b{font-variant-numeric:tabular-nums;color:var(--ink);font-size:12px}
.ctl b{font-variant-numeric:tabular-nums;color:var(--ink);font-size:12px}
.ctl button{font:inherit;border:1px solid var(--line);background:#fff;padding:4px 9px;cursor:pointer;border-radius:3px}
.ctl button:hover{border-color:var(--dim)}
select,input[type=range]{font:inherit}
select{border:1px solid var(--line);background:#fff;padding:4px 6px;border-radius:3px}
input[type=range]{width:120px;max-width:38vw}
/* segmented toggle */
.seg{display:inline-flex;border:1px solid var(--line);border-radius:3px;overflow:hidden}
.seg button{font:inherit;font-size:12px;border:0;background:#fff;color:var(--ink);padding:4px 10px;cursor:pointer;border-right:1px solid var(--line)}
.seg button:last-child{border-right:0}
.seg button.active{background:var(--ink);color:#fff}
/* tables */
.tscroll{overflow-x:auto;-webkit-overflow-scrolling:touch}   /* wrap wide tables so they scroll, not overflow the page (2026-06-25) */
table{border-collapse:collapse;width:100%;font-variant-numeric:tabular-nums}
th,td{padding:5px 8px;text-align:right;border-bottom:1px solid var(--line);white-space:nowrap}
thead th,table>tr:first-child th{position:sticky;top:0;background:var(--panel);z-index:1}
th{font-size:10px;text-transform:uppercase;letter-spacing:.06em;color:var(--dim);font-weight:600;text-align:right}
td.name,th.name{text-align:left;font-weight:600}
tbody tr:hover,table tr:hover{background:rgba(0,0,0,.018)}
.num{font-variant-numeric:tabular-nums}
.pos{color:var(--up)} .neg{color:var(--down)} .mut{color:var(--faint)}
.tag{display:inline-block;font-size:9.5px;font-weight:700;letter-spacing:.06em;
  padding:1px 5px;border:1px solid currentColor;border-radius:2px;margin-left:4px}
/* breaks: persistent (brk-hold) = steady highlight; newly-fired-since-last-visit (brk-new) = pulse */
.brk-hold{background:rgba(232,162,0,.18)} .brk-hold.inv{background:rgba(198,40,40,.18)}
.brk-new{animation:rowFlash .9s ease-in-out infinite} .brk-new.inv{animation:rowFlashH .9s ease-in-out infinite}
tr.brk-hold,tr.brk-new{background:rgba(232,162,0,.12)} tr.brk-hold.inv,tr.brk-new.inv{background:rgba(198,40,40,.14)}
td.cc.brk-hold{box-shadow:inset 0 0 0 2px rgba(232,162,0,.95)} td.cc.brk-hold.inv{box-shadow:inset 0 0 0 2px #fff}
td.cc.brk-new{animation:cellFlash .9s ease-in-out infinite}
@keyframes rowFlash{0%,100%{background:rgba(232,162,0,.12)}50%{background:rgba(232,162,0,.5)}}
@keyframes rowFlashH{0%,100%{background:rgba(198,40,40,.14)}50%{background:rgba(198,40,40,.55)}}
@keyframes cellFlash{0%,100%{box-shadow:inset 0 0 0 0 transparent}50%{box-shadow:inset 0 0 0 3px #fff}}
body.calm .brk-new,body.calm tr.brk-new,body.calm td.cc.brk-new{animation:none}
body.calm td.cc.brk-new{box-shadow:inset 0 0 0 3px #fff}
/* newly-fired ticker */
.ticker{padding:8px 16px;border-bottom:1px solid var(--line);background:#fff8e1;font-size:12px}
.ticker.empty{background:#fafafa;color:var(--dim)} .ticker b{color:var(--hot)} .tk{display:inline-block;margin-right:14px}
/* corr matrix cells */
td.cc{text-align:center;color:#fff;font-size:11px;min-width:42px}
/* events */
.ev{display:flex;gap:10px;align-items:baseline;padding:5px 0;border-bottom:1px solid var(--line)}
.ev .h{font-weight:700;font-variant-numeric:tabular-nums;color:var(--hot);min-width:42px}
.ev .k{font-weight:600;min-width:150px}
.ev .d{color:var(--dim);font-size:12px}
canvas{display:block;width:100%;height:300px;border:1px solid var(--line);background:#fff}
/* stacked charts inside a panel body get a hairline of air between them instead of touching
   borders (2026-07-03, cohorts2 tape/detail/lane + calibration strips; a chart may or may not
   already be wrapped in .a2c-wrap when this applies, so cover both adjacencies) */
.bd canvas+canvas,.bd .a2c-wrap+.a2c-wrap,.bd .a2c-wrap+canvas,.bd canvas+.a2c-wrap{margin-top:var(--sp-xs)}
.legend{display:flex;flex-wrap:wrap;gap:12px;margin-top:8px;font-size:11px}
.legend span{display:inline-flex;align-items:center;gap:5px;cursor:pointer;user-select:none}
.legend i{width:18px;height:3px;display:inline-block}
.legend .off{opacity:.3}
.err{color:var(--down);font-size:12px}
.foot{color:var(--dim);font-size:11px;padding:0 16px 24px}
/* hub cards */
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:14px;padding:20px 16px;max-width:1180px}
.card{position:relative;border:1px solid var(--line);background:#fff;padding:16px 16px 18px;
  text-decoration:none;color:var(--ink);display:flex;flex-direction:column;
  transition:border-color .12s,transform .12s}
.card:hover{border-color:var(--ink);transform:translateY(-1px)} .card.soon{opacity:.7;cursor:default}
.card .ix{font-size:10px;font-weight:700;letter-spacing:.16em;color:var(--faint);text-transform:uppercase;margin-bottom:8px}
.card h3{margin:0 0 7px;font-size:15px;font-weight:700;letter-spacing:.01em}
.card p{margin:0;color:var(--dim);font-size:12px;line-height:1.5;flex:1}
.card .st{align-self:flex-start;margin-top:12px;font-size:9.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:2px 7px;border:1px solid currentColor;border-radius:2px}
.card .live{color:var(--up)} .card .soon-t{color:var(--warn)}

/* ── A2V micro-viz helpers (2026-07-03, R-UI-21 — shared/viz.js; per the drift mandate NO
   per-app copies of these; shaded numeric cells keep using td.cc above for decoup/gamma
   visual consistency — .a2v-chip is the inline/non-table variant of the same convention) ── */
.a2v-spark{display:inline-block;vertical-align:middle}
.a2v-chip{display:inline-block;min-width:34px;padding:1px 5px;border-radius:2px;font-size:11px;
  text-align:center;font-variant-numeric:tabular-nums}
.a2v-bar{position:relative;display:inline-block;width:100%;min-width:64px;height:14px;
  vertical-align:middle;font-variant-numeric:tabular-nums}
.a2v-bar i{position:absolute;left:0;top:1px;bottom:1px;opacity:.28}
.a2v-bar b{position:relative;display:block;font-weight:600;font-size:11px;line-height:14px;
  text-align:right;padding-right:3px;color:var(--ink)}
/* diverging pair (puts◄|►calls etc.): center axis, value labels at the bar ends */
.a2v-bar.dv{display:inline-flex;align-items:center;gap:4px;height:auto;width:100%}
.a2v-bar.dv b{position:static;display:inline;flex:0 0 auto;padding:0;line-height:1.2}
.a2v-bar.dv .tr{position:relative;flex:1 1 56px;min-width:56px;height:10px;background:rgba(0,0,0,.045)}
.a2v-bar.dv .tr::after{content:"";position:absolute;left:50%;top:0;bottom:0;width:1px;background:var(--faint)}
.a2v-bar.dv .tr i{position:absolute;left:auto;top:1px;bottom:1px;opacity:.75}
.a2v-bar.dv .tr i.dl{right:50%}
.a2v-bar.dv .tr i.dr{left:50%}

/* ── responsive (2026-06-25): never overflow on narrow; collapse gracefully ── */
@media (max-width:680px){
  header{position:static}
  .ctl{position:static;gap:10px 14px}
  .nav{margin-left:0;width:100%;order:3}
  header .sub.tag{flex-basis:100%}
  .wrap{padding:12px;gap:12px}
  .panel>.bd{padding:10px}
  .cards{grid-template-columns:1fr;padding:14px}
  .keyfig{font-size:30px}
  input[type=range]{width:100%;max-width:none}
  .ctl label{flex:1 1 130px}
}

/* ════════════════════════════════════════════════════════════════════════════
   SHARED PRIMITIVES (v3, 2026-07-04) — centralized from per-app inline <style>.
   Every rule below is BYTE-IDENTICAL to the inline copies it replaces (verified
   across the listed apps). Base classes that DIFFER per app (e.g. .chip base,
   table.divmx th.lbl/td.lbl, #divExplain, .callout, .big .score/.lvl, td.hb) are
   deliberately LEFT app-local and are NOT here. App agents remove the matching
   inline copies and rely on these. See shared/SHARED-API.md.
   ════════════════════════════════════════════════════════════════════════════ */

/* ── divergence panel (R-UI-27) — was inline in cohorts2·decoup·fx·landscape·movers·ratio·signal.
   NOTE: table.divmx th.lbl/td.lbl stays app-local (background: --panel vs #fff differs). ── */
table.divmx{border-collapse:collapse;font-variant-numeric:tabular-nums}
table.divmx th,table.divmx td{border:1px solid var(--line);padding:2px 4px;text-align:center;white-space:nowrap}
table.divmx td.lbl i{width:9px;height:9px;border-radius:50%;display:inline-block;margin-right:5px;vertical-align:baseline}
table.divmx th.tfhead{font-size:11px;color:var(--ink);border-bottom:2px solid var(--dim)}
table.divmx th.lkhead{font-size:9px;color:var(--faint);font-weight:600}
table.divmx th.sumhead{font-size:10px;color:var(--ink)}
table.divmx td.dcell{width:22px;height:20px;line-height:1;cursor:pointer}
table.divmx td.dcell.empty{background:#fff}
table.divmx td.dcell.na{background:repeating-linear-gradient(45deg,#f4f4f4,#f4f4f4 3px,#fff 3px,#fff 6px);color:var(--faint)}
table.divmx td.dcell.emph{outline:2px solid rgba(17,17,17,.35);outline-offset:-2px}
table.divmx td.dcell.wide{width:64px;height:44px}
table.divmx td.dcell.wide small{display:block;font-size:9px;line-height:1.05;margin-top:1px}
table.divmx td.dsum{font-size:11px;padding:2px 8px;min-width:56px}
table.divmx td.dsum.na{color:var(--faint);font-style:italic}
table.divmx td.dsum .tfnet{display:inline-block;margin:0 3px;font-size:10px;font-weight:700}
table.divmx tr.drow{cursor:pointer} table.divmx tr.drow:hover td{background:#f2f7ff}
table.divmx tr.drow.sel td.lbl{box-shadow:inset 3px 0 0 var(--ink)}
table.divmx tr.drow.sel td{background:#eef4ff}
table.divmx .fn{font-size:9px;color:var(--faint)}
.tkpick{margin:0 0 8px} .tkpick label{font-size:10px;text-transform:uppercase;letter-spacing:.08em;color:var(--dim);display:inline-flex;gap:6px;align-items:center}
#divRsi{margin-top:0;height:120px}   /* RSI sub-pane FLUSH under the price pane (TradingView) */

/* ── divergence sub-control row + amber flag — cohorts2·decoup·fx·movers (.subctl), cohorts2·decoup·fx (.amber) ── */
.subctl{display:flex;flex-wrap:wrap;gap:10px 18px;align-items:flex-end;margin:6px 0 8px}
.subctl label{display:inline-flex;flex-direction:column;gap:3px;font-size:10px;
  text-transform:uppercase;letter-spacing:.08em;color:var(--dim)}
.amber{color:var(--warn);font-weight:700}

/* ── toggle chip pills (shared idiom) — cohorts·cohorts2·decoup·fx·movers.
   NOTE: base .chip differs per app (white-space:nowrap etc.) — kept app-local. ── */
.chip i{width:11px;height:11px;border-radius:50%;display:inline-block;opacity:.3}
.chip.on{color:var(--ink);border-color:var(--dim)} .chip.on i{opacity:1}
.chip.loading{opacity:.5;text-decoration:line-through;cursor:default;border-style:dotted}
.chip.loading i{opacity:.3}
.chip.bench{border-style:dashed}

/* ── cohort legend row + label + swatch — cohorts·fx (.legwrap/.cohrow/td.sw i), cohorts·cohorts2·fx (.cohlbl) ── */
.legwrap{display:flex;flex-direction:column;gap:6px;margin-bottom:9px}
.cohrow{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.cohlbl{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.09em;cursor:pointer;
  padding:2px 8px;border-radius:3px;border:1px solid currentColor;user-select:none;white-space:nowrap}
td.sw i{width:11px;height:11px;border-radius:2px;display:inline-block;margin-right:6px;vertical-align:middle}

/* ── select-all / deselect-all buttons — cohorts2·landscape·retail ── */
.selbtn{font-size:10px;text-transform:uppercase;letter-spacing:.06em;cursor:pointer;user-select:none;
  padding:3px 8px;border-radius:3px;border:1px solid var(--line);color:var(--dim);background:#fff}
.selbtn:hover{border-color:var(--dim);color:var(--ink)}

/* ── headline key-figure block — betting·fundamentals·retail.
   NOTE: .big .score (3.4em vs 3.8em) and .big .lvl (20px vs 22px) differ — kept app-local. ── */
.big{display:flex;flex-wrap:wrap;gap:6px 40px;align-items:flex-end}
.big .keyhead{display:flex;flex-direction:column;gap:4px;line-height:1}
.big .scoreunit{font-size:11px;text-transform:uppercase;letter-spacing:.14em;color:var(--dim);font-weight:700}
.big .asof{font-size:10px;text-transform:uppercase;letter-spacing:.1em;color:var(--faint);font-weight:600}

/* ── scalar bar · pill button · help-cue · delta —
   .sbar betting·fundamentals·retail · .tick betting·fundamentals·retail·ratio ·
   [data-tip].cue betting·fundamentals·retail·signal · .delta betting·fundamentals ── */
.sbar{display:inline-block;height:9px;background:var(--hot);vertical-align:middle}
.tick{font-size:11px;border:1px solid var(--line);border-radius:12px;padding:2px 8px;cursor:pointer;color:var(--dim);white-space:nowrap}
.tick:hover{border-color:var(--down);color:var(--down)}
[data-tip].cue{text-decoration:underline dotted var(--faint);text-underline-offset:3px;text-decoration-thickness:1px;cursor:help}
.delta{font-size:13px;font-weight:700}

/* ── board heat-bar · direction · tag pill — landscape·movers.
   NOTE: td.hb (150px vs 160px) and .t.ex/.dc/... variants differ — kept app-local. ── */
.heatbar{display:inline-block;height:9px;background:var(--hot);vertical-align:middle;border-radius:1px}
.dir-up{color:var(--up);font-weight:700} .dir-dn{color:var(--down);font-weight:700}
.t{display:inline-block;font-size:9.5px;font-weight:700;letter-spacing:.04em;padding:1px 5px;border:1px solid currentColor;border-radius:2px;margin:0 3px 2px 0}