/* WStonks terminal styles — extracted from index.html so the browser can
   cache them across visits. Deployed alongside index.html (see CLAUDE.md). */
/* ── RESET + ROOT ── */
*{margin:0;padding:0;box-sizing:border-box;scrollbar-width:thin;scrollbar-color:var(--p3) transparent;}
*::-webkit-scrollbar{width:4px;height:4px;}
*::-webkit-scrollbar-thumb{background:var(--p3);border-radius:2px;}
*::-webkit-scrollbar-track{background:transparent;}
:root{
  --bg:       #060806;
  --bg2:      #0a0d09;
  --bg3:      #0f130e;
  --p0:       #00ff41;   /* bright phosphor */
  --p1:       #00c832;   /* mid phosphor */
  /* Text tiers, all at or above WCAG AA 4.5:1 against --bg (#020302), measured
     2026-09-06. Hue and saturation are unchanged from the original phosphor
     ramp; only lightness moved, so the terminal reads the same and the tiers
     stay a clean 1.4x luminance step apart.
       --p1  9.16:1   --p2  6.53:1   --p2d  4.98:1   --red  4.93:1
     --p2 was #007a1f (3.74:1) and --red was #cc1515 (3.63:1); both failed at the
     10-13px sizes they are actually used at. --p3 was worse still at 1.65:1 and
     carried 118 text rules across the site -- it is NOT brightened here, it is
     RETIRED from text and those rules moved to --p2d. Brightening it to pass
     would have landed on #008a24, indistinguishable from --p2d, collapsing two
     tiers into one. */
  --p2:       #00a82b;   /* secondary text — 6.53:1 */
  --p2d:      #009127;   /* muted text — 4.98:1 on the page ground, 4.74:1 on the
                            lightest panel fill. It was #008923, which passed on
                            the ground and then measured 4.29:1 once a panel
                            background was under it -- a token named "the dimmest
                            that still passes" has to pass everywhere it is used. */
  --p3:       #003d10;   /* borders and decoration ONLY — never text */
  --p4:       #001a07;   /* almost off — borders only */
  --amber:    #ffb000;
  --red:      #f02626;
  --cyan:     #00ffcc;
  --mono:     'IBM Plex Mono', monospace;
  --scanline: rgba(0,0,0,0.12);
}
/* dvh, not vh: on mobile Safari/Chrome the 100vh/height:100% ICB resolves to the
   URL-bar-collapsed viewport, so panes overflow by exactly the chrome height and
   body{overflow:hidden} makes that unreachable. vh line first as the fallback. */
html,body{height:100%;height:100dvh;}
body{
  background:#020302;
  color:var(--p1);
  font-family:var(--mono);
  font-size:14px;
  line-height:1.5;
  min-height:100vh;
  min-height:100dvh;
  display:flex;
  flex-direction:column;
  overflow:hidden;
}

/* ── SCANLINES ── */
body::before{
  content:'';position:fixed;inset:0;
  background:repeating-linear-gradient(to bottom,transparent 0px,transparent 5px,var(--scanline) 5px,var(--scanline) 6px);
  pointer-events:none;z-index:9999;animation:flicker 8s infinite;
}
/* ── PHOSPHOR VIGNETTE ── */
body::after{
  content:'';position:fixed;inset:0;
  background:radial-gradient(ellipse at 50% 50%,rgba(0,255,65,0.03) 0%,transparent 70%);
  pointer-events:none;z-index:9998;
}

/* ── ANIMATIONS ── */
@keyframes flicker{0%,100%{opacity:1;}92%{opacity:1;}93%{opacity:.94;}94%{opacity:1;}96%{opacity:.97;}97%{opacity:1;}}
@keyframes blink{0%,49%{opacity:1;}50%,100%{opacity:0;}}
@keyframes fadePhosphor{from{opacity:0;text-shadow:0 0 20px var(--p0);}to{opacity:1;text-shadow:0 0 6px var(--p0),0 0 2px var(--p1);}}
@keyframes spin{to{transform:rotate(360deg);}}
@keyframes headlineGlow{0%,100%{text-shadow:0 0 14px var(--p0),0 0 5px var(--p1),0 0 2px var(--p0);}50%{text-shadow:0 0 22px var(--p0),0 0 10px var(--p1),0 0 40px rgba(0,255,65,.15);}}
@keyframes rowIn{from{opacity:0;transform:translateX(-4px);}to{opacity:1;transform:translateX(0);}}
/* Price update flashes — phosphor burst then settle */
@keyframes flashP{0%{opacity:.25;text-shadow:0 0 18px var(--p0),0 0 6px var(--p1);}100%{opacity:1;}}
@keyframes skelPulse{0%,100%{opacity:.15;}50%{opacity:.4;}}
.skel-bar{height:8px;border-radius:1px;background:var(--p0);animation:skelPulse 1.4s ease-in-out infinite;margin:5px 0;}
.skel-bar.w-60{width:60%;}
.skel-bar.w-80{width:80%;}
.skel-bar.w-40{width:40%;}
@keyframes flashR{0%{opacity:.25;text-shadow:0 0 18px var(--red),0 0 6px var(--red);}100%{opacity:1;}}
.price-flash   {animation:flashP .65s ease-out;}
.price-flash-dn{animation:flashR .65s ease-out;}

/* ── GLOW HELPERS ── */
.glow{text-shadow:0 0 1px var(--p0),0 0 5px var(--p0),0 0 12px rgba(0,255,65,.45);}
.glow2{text-shadow:0 0 1px var(--p1),0 0 5px var(--p1),0 0 10px rgba(0,200,50,.3);}
.glow-a{text-shadow:0 0 1px var(--amber),0 0 6px var(--amber),0 0 12px rgba(255,176,0,.4);color:var(--amber);}
.glow-r{text-shadow:0 0 1px var(--red),0 0 6px var(--red),0 0 12px rgba(255,51,0,.4);color:var(--red);}
.up{color:var(--p0);}
.dn{color:var(--red);text-shadow:0 0 4px var(--red);}

/* ── TICKER → CHART ──
   Worn by every ticker on the site that has bars behind it. Colour is
   inherited rather than set, so the link never restyles the surface it sits
   in: the brief's green symbol, a short's red one and the gov tab's amber one
   all keep their meaning and only gain the dotted rule that says "this opens".
   The one place that does set its own colour is the call sheet (.cs-tkr),
   which predates this and stays as it is. */
.tkr-link{color:inherit;cursor:pointer;border-bottom:1px dotted currentColor;}
.tkr-link:hover{border-bottom-style:solid;text-shadow:0 0 7px currentColor;}

/* ── TOP STATUS BAR ── */
/* Safe-area insets (needs viewport-fit=cover on the meta viewport tag): the
   topbar is the first in-flow element, so its own padding has to carry the
   notch — that keeps the green bar filling the inset instead of the body bg. */
.topbar{
  background:var(--p0);color:var(--bg);
  font-size:11px;font-weight:600;letter-spacing:.13em;
  padding:3px 14px;
  padding-top:calc(3px + env(safe-area-inset-top));
  padding-left:calc(14px + env(safe-area-inset-left));
  padding-right:calc(14px + env(safe-area-inset-right));
  display:flex;justify-content:space-between;align-items:center;
  user-select:none;
  box-shadow:0 0 20px rgba(0,255,65,.4);
  flex-shrink:0;
}
.topbar-admin{display:none;gap:8px;align-items:center;}
.topbar-admin.visible{display:flex;}
.admin-btn{
  font-size:11px;font-weight:600;letter-spacing:.1em;
  padding:2px 8px;border:1px solid var(--bg);background:transparent;
  color:var(--bg);cursor:pointer;font-family:var(--mono);
  transition:background .15s;
}
.admin-btn:hover{background:rgba(0,0,0,.2);}
.admin-btn:disabled{opacity:.5;cursor:not-allowed;}
.ua-step{font-size:11px;color:var(--p2d);letter-spacing:.06em;}
.ua-step.active{color:var(--p1);text-shadow:0 0 4px var(--p1);}
.ua-step.done{color:var(--p2d);text-decoration:line-through;}

/* ── HEADER ── */
header{
  border-bottom:1px solid var(--p3);
  padding:0 14px;
  padding-left:calc(14px + env(safe-area-inset-left));
  padding-right:calc(14px + env(safe-area-inset-right));
  background:var(--bg);
  flex-shrink:0;
  animation:fadePhosphor .4s ease both;
}
.header-row1{
  display:flex;align-items:center;justify-content:space-between;
  padding:8px 0 6px;border-bottom:1px solid var(--p4);
}
.logo{font-size:18px;font-weight:600;letter-spacing:.1em;color:var(--p0);text-shadow:0 0 1px var(--p0),0 0 7px var(--p0),0 0 18px rgba(0,255,65,.4);}
.logo-sub{font-size:10px;letter-spacing:.2em;color:var(--p1);margin-top:1px;text-shadow:0 0 1px var(--p1),0 0 6px var(--p1),0 0 12px rgba(0,200,50,.3);}

/* Market prices in header */
.mkt-kpi-bar{display:grid;grid-template-columns:repeat(4,1fr);background:var(--bg1);border-bottom:1px solid var(--p4);flex-shrink:0;}
.mkt-kpi-card{padding:10px 14px;border-right:1px solid var(--p4);}
.mkt-kpi-card:nth-child(4){border-right:none;}
.mkt-kpi-card:nth-child(n+5){border-top:1px solid var(--p4);}
.mkt-kpi-name{font-size:11px;letter-spacing:.1em;color:var(--p2);text-transform:uppercase;margin-bottom:5px;}
.mkt-kpi-price{font-size:16px;font-weight:700;color:var(--p1);letter-spacing:.02em;text-shadow:0 0 1px var(--p1),0 0 6px rgba(0,255,65,.3);}
.mkt-kpi-verdict{font-size:11px;color:var(--p2);margin-top:4px;letter-spacing:.02em;}
.mkt-kpi-verdict.up{color:var(--p0);text-shadow:0 0 4px rgba(0,255,65,.25);}
.mkt-kpi-verdict.dn{color:var(--red);}
.mkt-kpi-verdict.warn{color:var(--amber);}
.mkt-kpi-verdict.cyan{color:var(--cyan);text-shadow:0 0 4px rgba(0,255,204,.3);}

/* Header right: status + refresh */
.header-right{display:flex;align-items:center;gap:12px;}
.header-status{display:flex;align-items:center;gap:5px;font-size:10px;letter-spacing:.1em;color:var(--p1);text-shadow:0 0 1px var(--p1),0 0 6px var(--p1);}
.status-dot{width:6px;height:6px;border-radius:50%;background:var(--p0);box-shadow:0 0 6px var(--p0);animation:blink 1.2s step-end infinite;}
.refresh-btn{
  font-size:10px;font-weight:600;letter-spacing:.1em;
  padding:5px 10px;border:1px solid var(--p3);background:transparent;
  color:var(--p2);cursor:pointer;font-family:var(--mono);
  transition:color .1s,border-color .1s;
}
.refresh-btn:hover{color:var(--p0);border-color:var(--p2);}
.refresh-btn:disabled{opacity:.4;cursor:not-allowed;}
.refresh-btn.loading .r-icon{display:inline-block;animation:spin .7s linear infinite;}

/* ── TAB NAV ── */
.header-row2{
  display:flex;gap:0;padding:5px 0 0;
  overflow-x:auto;
  scrollbar-width:none;
}
.header-row2::-webkit-scrollbar{display:none;}
.nav-item{
  /* The nav items are <button> now, not <div>: a div with onclick is neither
     focusable nor announced as a control, so 23 of the 25 tabs could not be
     reached by keyboard at all. These four lines undo the UA button styling so
     the conversion is invisible. */
  background:none;border:none;font-family:inherit;text-align:left;
  padding:6px 16px 6px 0;font-size:13px;letter-spacing:.1em;
  color:var(--p1);cursor:pointer;text-transform:uppercase;white-space:nowrap;
  transition:color .1s,text-shadow .1s;user-select:none;
  text-shadow:0 0 1px var(--p1),0 0 5px var(--p1);
}
.nav-item:hover{color:var(--p0);text-shadow:0 0 6px var(--p0);}
.nav-item.active{color:var(--p0);text-shadow:0 0 6px var(--p0);}
.nav-item.active::before{content:'> ';}
.nav-item.ap-tab{color:var(--amber);text-shadow:0 0 4px var(--amber);}
.nav-item.ap-tab.active{text-shadow:0 0 8px var(--amber);}
/* Trade Sim is PUBLIC again (2026-08-14) — the nav item needs no gating rule, so
   the three `display:none` pairs that used to live here are gone.
   It was hidden because the accumulation sleeve exits almost entirely on the
   emergency stop, which reads as worse than the graded pick record says it is.
   That is still true of the closed trades, and is now a disclosure problem rather
   than a hiding one: the headline % is carried by unrealized gains on open
   positions while the realized record is negative. Whatever the pane says about
   performance has to make that split visible.
   What stays admin-only is the Brief Book sleeve inside the pane (#bb-section,
   below), so the published book is the signal-driven one alone. */

/* Brief Book — admin-only. renderBriefBookCRT() clears the inline display when it
   has data (`sec.style.display = ''`), which hands the decision to these rules
   rather than overriding them; it still sets an inline `none` when there's no
   data at all, so an admin sees nothing rather than an empty shell. NOTE: this is
   presentation only — /autopilot is a public endpoint and still returns the
   briefBook object, so the numbers are readable from the network tab. Strip it
   server-side if it ever needs to be genuinely private. */
#bb-section{display:none;}
body.admin-on #bb-section{display:block;}
.nav-item.ledger-tab{color:var(--cyan);text-shadow:0 0 4px var(--cyan);text-decoration:none;margin-left:auto;}
.nav-item.ledger-tab:hover{color:var(--cyan);text-shadow:0 0 10px var(--cyan),0 0 20px rgba(0,255,204,.3);}

/* ── MOBILE HAMBURGER + DRAWER ── */
.mob-ham-btn{display:none;}
.nav-more-wrap{position:relative;display:inline-flex;align-items:center;}
.nav-more-btn{cursor:pointer;}
/* Rendered position:fixed and appended to <body> on open (JS) so the nav row's
   overflow-x:auto can't clip it. */
.nav-more-menu{display:none;position:fixed;z-index:120;background:var(--bg);border:1px solid var(--p4);min-width:172px;box-shadow:0 6px 20px rgba(0,0,0,.65);}
.nav-more-menu.open{display:block;}
.nav-more-menu>.nav-item{display:block;padding:8px 14px;border-bottom:1px solid var(--p4);}
.nav-more-menu>.nav-item:last-child{border-bottom:none;}
#mob-nav-drawer{
  display:none;background:var(--bg);
  border-bottom:1px solid var(--p2);
  padding:2px 10px 8px;
  position:relative;z-index:50;
}
#mob-nav-drawer.open{display:block;}
#mob-nav-drawer .nav-item{
  display:flex;align-items:center;
  padding:13px 4px;font-size:13px;
  border-bottom:1px solid var(--p4);
  min-height:44px;text-decoration:none;
}
#mob-nav-drawer .nav-item:last-child{border-bottom:none;}
#mob-nav-drawer .nav-item.ap-tab{color:var(--amber);text-shadow:0 0 4px var(--amber);}
#mob-nav-drawer .nav-item.ledger-tab{color:var(--cyan);text-shadow:0 0 4px var(--cyan);margin-left:0;}

/* ── MAIN AREA ── */
.main-area{flex:1;overflow:hidden;display:flex;flex-direction:column;min-height:0;padding-bottom:env(safe-area-inset-bottom);}

/* ── STICKY CONTEXT BAR ──
   On phones body{overflow-y:auto} lets the header scroll away, taking the pane
   name and its headline number with it. This bar is a body-level child, so
   position:sticky pins it to the body scroll container once that happens.
   Hidden ≥769px, where the header never leaves the screen anyway. */
#ctx-bar{display:none;}
@media(max-width:768px){
  #ctx-bar{
    display:flex;align-items:center;justify-content:space-between;gap:10px;
    position:sticky;top:0;z-index:60;flex-shrink:0;
    background:var(--bg2);border-bottom:1px solid var(--p3);
    padding:5px 12px;
    padding-left:calc(12px + env(safe-area-inset-left));
    padding-right:calc(12px + env(safe-area-inset-right));
    font-size:11px;letter-spacing:.1em;
  }
  #ctx-pane{color:var(--p0);text-shadow:0 0 5px var(--p0);text-transform:uppercase;white-space:nowrap;}
  #ctx-meta{color:var(--p2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;}
  #ctx-meta .ctx-v{color:var(--p1);}
}

/* ── NEWS WIRE ──
   Compact feed rows: headline first, then ticker chips + source + age. */
.news-row{padding:7px 12px;border-bottom:1px solid var(--p4);}
.news-row:last-child{border-bottom:none;}
.news-title{font-size:13px;color:var(--p1);line-height:1.4;display:block;}
a.news-link{text-decoration:none;cursor:pointer;transition:color .12s,text-shadow .12s;}
a.news-link:hover{color:var(--p0);text-shadow:0 0 6px var(--p0);text-decoration:underline;}
/* Older wires predate URL capture — those rows stay plain text, so the cursor
   shouldn't promise a link that isn't there. */
div.news-title{cursor:default;}
.news-meta{
  display:flex;align-items:center;gap:6px;flex-wrap:wrap;
  margin-top:4px;font-size:10px;letter-spacing:.06em;color:var(--p2);
}
.news-tkr{
  color:var(--p0);border:1px solid var(--p3);padding:0 4px;
  text-shadow:0 0 4px var(--p0);white-space:nowrap;
}
.news-src{color:var(--p2);text-transform:uppercase;}
/* Age pinned right so the column scans as a timeline. */
.news-age{color:var(--p2d);margin-left:auto;white-space:nowrap;}

/* ── PANE SYSTEM ── */
.pane{display:none;flex:1;overflow:hidden;min-height:0;}
.pane.on{display:flex;}

/* Brief tab: single-column reading view — page scrolls, no nested scroll panes */
#pane-brief.on{display:block;overflow-y:auto;}
#pane-brief .col{display:block;border-right:none;overflow:visible;}
#pane-brief .col-body{flex:none;overflow:visible;}
/* A reading view needs a maximum measure. Uncapped, the brief prose ran the full
   window — ~349 characters per line on a 2560px monitor — and every panel below
   it stretched to match. Centring the measure is also what stops a capped panel
   from looking orphaned next to full-bleed neighbours. */
#pane-brief.on > .col,
#pane-brief.on > .mkt-kpi-bar{max-width:1280px;margin-left:auto;margin-right:auto;}
/* Heatmap: same compact size as before — detail panel gets the space rotation used to occupy */
#pane-brief .hm-grid{flex:0 0 auto;max-height:55%;}
/* Scorecard detail panel (replaces standalone scorecard list) */
#hm-detail-panel{
  display:none;padding:8px 12px;border-top:1px solid var(--p2);
  background:var(--bg2);flex-shrink:0;font-size:10px;
}
#hm-detail-panel.open{display:block;}

/* Other tabs: full-width flex column */
#pane-sectors.on,#pane-stocks.on,#pane-cycle.on,
#pane-history.on,#pane-record.on,#pane-exit.on,#pane-autopilot.on,#pane-intel.on,
#pane-news.on{
  flex-direction:column;
}
/* News Wire: single full-width column, the list itself scrolls. */
#pane-news .col{border-right:none;}
#pane-news #news-list{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;min-height:0;}

/* ── COLUMN CHROME ── */
.col{border-right:1px solid var(--p4);display:flex;flex-direction:column;overflow:hidden;min-height:0;}
.col:last-child{border-right:none;}
.col-header{
  padding:6px 12px 5px;border-bottom:1px solid var(--p3);
  display:flex;align-items:baseline;justify-content:space-between;
  background:var(--bg2);flex-shrink:0;
}
.col-title{font-size:13px;letter-spacing:.18em;text-transform:uppercase;color:var(--p0);text-shadow:0 0 6px var(--p0);}
.col-sub{font-size:10px;color:var(--p2);letter-spacing:.06em;}
.col-body{flex:1;overflow-y:auto;padding:12px 12px 0;}
.col-body::-webkit-scrollbar{width:2px;}
.col-body::-webkit-scrollbar-thumb{background:var(--p3);}

/* ── BRIEF COLUMN ── */
.brief-dateline{
  font-size:10px;letter-spacing:.14em;color:var(--p2);
  text-transform:uppercase;margin-bottom:10px;
  display:flex;align-items:center;gap:6px;
}
.cursor{animation:blink 1s step-end infinite;color:var(--p0);}
.brief-headline{
  font-size:20px;font-weight:600;color:var(--p0);
  text-shadow:0 0 14px var(--p0),0 0 5px var(--p1),0 0 2px var(--p0);
  line-height:1.25;letter-spacing:.02em;margin-bottom:14px;
  text-transform:uppercase;
  animation:headlineGlow 5s ease-in-out infinite;
}
.brief-headline.loading{color:var(--p2);text-shadow:none;font-size:14px;animation:none;}
/* Brief catalyst watch — nearest Regulatory Radar events surfaced on the brief */
.catwatch{border:1px solid var(--p4);border-left:2px solid var(--amber);background:var(--bg2);padding:7px 9px;margin-bottom:13px;}
.catwatch-hd{font-size:11px;letter-spacing:.1em;color:var(--amber);margin-bottom:5px;}
.catwatch-row{display:flex;align-items:baseline;gap:8px;cursor:pointer;padding:2px 0;}
.catwatch-row:hover .catwatch-tkr{text-shadow:0 0 5px var(--p0);}
.catwatch-tkr{color:var(--p0);font-weight:700;font-size:13px;letter-spacing:.03em;}
.catwatch-type{font-size:11px;color:var(--p2);}
.catwatch-cd{margin-left:auto;font-size:11px;color:var(--cyan);white-space:nowrap;}
.catwatch-stake{font-size:11px;color:var(--p1);line-height:1.4;margin:0 0 5px;}
/* Government Intelligence Digest — the "what it means for stocks" synthesis panel */
.gov-digest{flex-shrink:0;border:1px solid var(--p3);border-left:2px solid var(--cyan);background:var(--bg2);margin-bottom:10px;max-height:40vh;max-height:40dvh;overflow-y:auto;}
.gd-hd{position:sticky;top:0;background:var(--bg2);font-size:11px;letter-spacing:.1em;color:var(--cyan);padding:8px 10px;border-bottom:1px solid var(--p4);display:flex;align-items:baseline;justify-content:space-between;gap:10px;}
.gd-hd-meta{color:var(--p2);font-size:10px;letter-spacing:.05em;white-space:nowrap;flex-shrink:0;}
.gd-summary{font-size:13px;color:var(--p0);line-height:1.5;padding:8px 10px;border-bottom:1px solid var(--p4);}
.gd-item{padding:7px 10px;border-bottom:1px solid var(--p4);}
.gd-item:last-child{border-bottom:none;}
.gd-item-top{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;}
.gd-dir{font-size:10px;letter-spacing:.05em;border:1px solid;padding:0 5px;white-space:nowrap;}
.gd-theme{font-size:13px;color:var(--p1);font-weight:700;}
.gd-tickers{font-size:12px;color:var(--p0);margin-left:auto;letter-spacing:.03em;}
.gd-note{font-size:12px;color:var(--p2);line-height:1.45;margin-top:3px;}

/* Bias block */
.bias-block{
  display:flex;align-items:center;gap:10px;
  padding:8px 12px;border:1px solid var(--p3);
  margin-bottom:16px;background:var(--bg2);
}
.bias-label{font-size:13px;letter-spacing:.12em;text-transform:uppercase;font-weight:600;}
.bias-label.bull{color:var(--p0);text-shadow:0 0 8px var(--p0);}
.bias-label.bear{color:var(--red);text-shadow:0 0 8px var(--red);}
.bias-label.neutral{color:var(--amber);text-shadow:0 0 8px var(--amber);}
.bias-conf{font-size:13px;color:var(--p2);letter-spacing:.06em;margin-left:auto;}

/* Brief sections */
.brief-section{margin-bottom:14px;padding-bottom:14px;border-bottom:1px solid var(--p4);padding-left:9px;border-left:2px solid var(--p3);}
.brief-section:last-child{border-bottom:none;margin-bottom:0;}
.bs-label{
  font-size:11px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--p2);margin-bottom:6px;display:flex;align-items:center;gap:5px;
}
.bs-label::before{content:'//';color:var(--p2d);}
.bs-text{font-size:14px;color:var(--p1);line-height:1.65;}
.bs-text strong{color:var(--p0);font-weight:500;}
.bs-text em{color:var(--amber);font-style:normal;}

/* ── Credit & rates strip ──
   Reads as a table, not prose. A level on its own means nothing to someone who
   has never traded a bond, so every row carries a plain-English name, a change
   over a stated window, and a state word before the number appears. Six rows is
   the cap: this block is a referee on the equity read, not a dashboard.
   Numeric columns are fixed px rather than auto so rows line up vertically
   without making the strip one grid and the rows display:contents. */
/* Capped, not fluid: a 1fr name column on a wide pane strands the numbers at
   the far edge, a screen away from the row they belong to. This is a table of
   six values and it stops being more readable past this width. */
.cr-strip{display:flex;flex-direction:column;max-width:760px;}
.cr-row{
  display:grid;grid-template-columns:88px minmax(96px,1fr) 92px 116px 80px 104px;
  align-items:baseline;gap:10px;padding:9px 0 10px;
  border-bottom:1px solid var(--p4);font-size:13px;
}
.cr-row:last-of-type{border-bottom:none;}
/* 11px is this page's floor for real text — .hm-name, .mkt-kpi-name and
   .bias-pill-crt all sit there. Anything under it reads as a different product
   bolted on, which is what 9px looked like next to 14px brief copy. */
.cr-k{font-size:11px;letter-spacing:.1em;color:var(--p2);text-transform:uppercase;}
.cr-n{font-size:13px;color:var(--p1);}
/* The level is the payload of the row, so it gets what .mkt-kpi-price gets on
   the KPI bar: weighted, and glowing. One step down from that 16px because six
   of these stack in a table instead of each sitting in its own tile. */
.cr-v{
  font-size:15px;font-weight:600;color:var(--p0);text-align:right;
  letter-spacing:.02em;text-shadow:0 0 1px var(--p0),0 0 6px rgba(0,255,65,.3);
}
/* nowrap: "bull steepening" and "~2.8 cuts priced" both wrap at this size and
   a single double-height row breaks the scan down the value column. */
.cr-d{color:var(--p2);text-align:right;font-size:11px;white-space:nowrap;}
/* The second line of every row: where the level sits in its own range, then
   what the row means FOR STOCKS. A state word alone ("HEADWIND") leaves the
   reader asking headwind for what, which is the only question they had. */
.cr-why{
  grid-column:1/-1;font-size:12px;line-height:1.5;color:var(--p2);
  margin-top:3px;
}
.cr-where{color:var(--p1);border-bottom:1px dotted var(--p3);cursor:help;}
.cr-sep{color:var(--p2d);}
/* The trace. Up is amber, not green: on this block a rising spread or a rising
   real yield is the unfriendly direction, and phosphor-green would read as
   approval. non-scaling-stroke because preserveAspectRatio="none" would
   otherwise stretch the line weight along with the geometry. */
/* inline-block so the empty placeholder span still occupies its 16px and rows
   without a trace (FED PATH) line up with the rest. */
.cr-sp{display:inline-block;width:80px;height:22px;align-self:center;overflow:visible;}
.cr-sp polyline{fill:none;stroke-width:1.5;vector-effect:non-scaling-stroke;}
.cr-sp.up polyline{stroke:var(--amber);}
.cr-sp.dn polyline{stroke:var(--p1);}
/* Same metrics as .bias-pill-crt, so the two read as one component family. */
.cr-s{
  font-size:11px;letter-spacing:.06em;text-align:center;white-space:nowrap;
  padding:2px 6px;border:1px solid var(--p3);color:var(--p2);
}
.cr-s.warn{color:var(--amber);border-color:var(--amber);}
.cr-s.bad{color:var(--red);border-color:var(--red);}
.cr-hd{
  margin-top:12px;padding:7px 10px;border-left:2px solid var(--p3);
  font-size:13px;letter-spacing:.14em;color:var(--p0);
  text-shadow:0 0 6px rgba(0,255,65,.25);
}
.cr-hd.flagged{border-left-color:var(--red);color:var(--red);}
/* Computed from the three yield rows above, not written by the model, so it
   sits between the table and the prose and is styled as neither: the border-left
   of .cr-hd, the reading size of .cr-why. The question a reader has about a
   yield is why it moved, and the two answers sound identical. */
.cr-drv{
  margin-top:11px;padding:7px 10px;border-left:2px solid var(--p3);
  font-size:12px;color:var(--p1);line-height:1.5;max-width:760px;
}
.cr-drv-k{
  display:block;font-size:10px;letter-spacing:.1em;color:var(--p2);
  text-transform:uppercase;margin-bottom:3px;
}
.cr-drv-w{display:block;color:var(--p2);margin-top:4px;}
.cr-say{font-size:14px;color:var(--p1);line-height:1.65;margin-top:9px;}
/* --p2: the whole job of this line is that someone reads it and knows the
   spreads are a day old. At --p3 it is decoration and nobody does. */
.cr-asof{font-size:10px;letter-spacing:.08em;color:var(--p2);margin-top:9px;}
@media (max-width:600px){
  /* Restacked, but the trace survives: on a phone the shape of the last year is
     the most legible thing here, so it keeps its place beside the level. */
  .cr-row{grid-template-columns:auto 1fr auto;row-gap:3px;padding:11px 0;}
  .cr-k{grid-row:1;grid-column:1;}
  .cr-s{grid-row:1;grid-column:3;justify-self:end;}
  .cr-n{grid-row:2;grid-column:1/-1;}
  .cr-v{grid-row:3;grid-column:1;text-align:left;}
  .cr-sp{grid-row:3;grid-column:2;width:100%;max-width:104px;height:22px;}
  .cr-d{grid-row:3;grid-column:3;text-align:right;}
  .cr-why{grid-row:4;grid-column:1/-1;}
}

/* Top trades in brief */
.brief-trades{display:flex;flex-direction:column;gap:6px;margin-top:4px;}
.brief-trade-row{
  display:grid;grid-template-columns:48px 1fr auto;
  gap:6px;align-items:start;padding:7px 9px;
  border:1px solid var(--p4);background:var(--bg2);
  cursor:default;
}
.bt-sym{font-size:14px;font-weight:600;color:var(--p0);text-shadow:0 0 6px var(--p0);}
.bt-sym.short{color:var(--red);text-shadow:0 0 6px var(--red);}
.bt-thesis{font-size:13px;color:var(--p1);line-height:1.55;}
.bt-meta{display:flex;flex-direction:column;align-items:flex-end;gap:3px;}
.bt-dir{
  font-size:11px;letter-spacing:.08em;text-transform:uppercase;
  padding:2px 5px;border:1px solid;
}
.bt-dir.long{color:var(--p0);border-color:var(--p2);background:rgba(0,200,50,0.1);}
.bt-dir.short{color:var(--red);border-color:var(--red);background:rgba(255,51,0,0.1);}
.bt-levels{font-size:11px;color:var(--p2);white-space:nowrap;}

/* No-data state */
.no-data{font-size:13px;color:var(--p2);padding:20px 12px;letter-spacing:.08em;}

/* ── HEATMAP COLUMN ── */
.hm-grid{
  display:grid;grid-template-columns:1fr 1fr;
  grid-auto-rows:auto;
  gap:1px;background:var(--p4);margin:1px;
  align-content:start;
  overflow-y:auto;
}
.hm-grid::-webkit-scrollbar{width:2px;}
.hm-grid::-webkit-scrollbar-thumb{background:var(--p3);}
/* Phosphor scrollbars on all scroll panels */
#rot-list-crt::-webkit-scrollbar,
#brief-rot-list::-webkit-scrollbar,
#sc-scroll::-webkit-scrollbar,
#hm-detail-panel::-webkit-scrollbar,
#picks-list::-webkit-scrollbar{width:2px;}
#rot-list-crt::-webkit-scrollbar-thumb,
#brief-rot-list::-webkit-scrollbar-thumb,
#sc-scroll::-webkit-scrollbar-thumb,
#hm-detail-panel::-webkit-scrollbar-thumb,
#picks-list::-webkit-scrollbar-thumb{background:var(--p3);}
#rot-list-crt::-webkit-scrollbar-track,
#brief-rot-list::-webkit-scrollbar-track,
#sc-scroll::-webkit-scrollbar-track,
#hm-detail-panel::-webkit-scrollbar-track,
#picks-list::-webkit-scrollbar-track{background:transparent;}
.hm-cell{
  background:var(--bg);cursor:pointer;
  padding:8px 8px 8px 10px;
  display:flex;flex-direction:column;justify-content:space-between;gap:2px;
  cursor:default;min-height:80px;
  border-left:2px solid var(--p4);
  overflow:hidden;
}
/* Signal tint: left border only */
.hm-cell.sig-buy  {border-left-color:var(--p0);}
.hm-cell.sig-sell {border-left-color:var(--red);}
.hm-cell.sig-watch{border-left-color:var(--amber);}
.hm-cell.sig-hold {border-left-color:var(--p4);}
.hm-cell:hover{background:rgba(0,255,65,.05);}
.hm-cell.active{background:rgba(0,255,65,.08);border-left-color:var(--p2);}
/* Confidence dot — dot color = AI confidence in the signal, NOT direction */
.hm-dot{display:inline-block;width:8px;height:8px;border-radius:50%;flex-shrink:0;}
.hm-dot.high  {background:var(--cyan);box-shadow:0 0 4px var(--cyan),0 0 10px var(--cyan);}
.hm-dot.medium{background:var(--amber);box-shadow:0 0 4px var(--amber),0 0 8px var(--amber);}
.hm-dot.low   {background:var(--p2);box-shadow:none;}
.hm-dot.none  {background:var(--p4);box-shadow:none;}
/* Row 1: ETF ticker + signal badge */
.hm-top{display:flex;justify-content:space-between;align-items:center;gap:4px;}
.hm-etf{font-size:13px;font-weight:700;color:var(--p0);letter-spacing:.06em;text-shadow:0 0 5px var(--p0);}
.hm-name{font-size:11px;color:var(--p2);letter-spacing:.04em;text-transform:uppercase;}
.hm-sig{font-size:11px;letter-spacing:.05em;text-transform:uppercase;white-space:nowrap;flex-shrink:0;}
.hm-sig.buy  {color:var(--p0);text-shadow:0 0 6px var(--p0),0 0 16px var(--p0),0 0 30px rgba(0,255,65,.6);font-weight:700;}
.hm-sig.sell {color:var(--red);  text-shadow:0 0 6px var(--red), 0 0 16px var(--red), 0 0 30px rgba(240,38,38,.6); font-weight:700;}
.hm-sig.hold {color:var(--p2d);}
.hm-sig.watch{color:var(--amber);text-shadow:0 0 6px var(--amber),0 0 16px var(--amber),0 0 30px rgba(255,176,0,.6); font-weight:700;}
/* Row 2: day% large */
.hm-pct{font-size:14px;font-weight:700;line-height:1;margin:2px 0;}
.hm-pct.up{color:var(--p0);}
.hm-pct.dn{color:var(--red);}
/* Row 3: RSI + flow */
.hm-meta{display:flex;justify-content:space-between;align-items:center;gap:4px;}
.hm-rsi{font-size:12px;color:var(--p2);letter-spacing:.03em;}
.hm-rsi.ob{color:var(--amber);}
.hm-rsi.os{color:var(--cyan);}
.hm-flow{font-size:12px;letter-spacing:.02em;text-align:right;}
.hm-flow.fin       {color:var(--p1);}
.hm-flow.fin-strong{color:var(--p0);text-shadow:0 0 3px var(--p0);}
.hm-flow.fout      {color:var(--red);opacity:.85;}
.hm-flow.fout-strong{color:var(--red);text-shadow:0 0 3px var(--red);}
.hm-flow.fneutral  {color:var(--p2);}

/* ── PICKS + SCORECARD COLUMN ── */
.pick-row{
  padding:9px 12px;border-bottom:1px solid var(--p4);
  display:grid;grid-template-columns:50px 1fr auto;
  gap:7px;align-items:start;cursor:pointer;
}
/* Same hover affordance the scorecard rows use, so "this opens" reads the same
   way in both lists. The chevron brightens too — on a wide row the pointer can
   be far from the label, and the row tint is what the eye actually catches. */
.pick-row:hover{background:var(--bg2);}
.pick-row:hover .pick-more{color:var(--p1);}
.pick-row:focus-visible{outline:1px solid var(--p2);outline-offset:-1px;}
.pick-sym{font-size:14px;font-weight:600;letter-spacing:.04em;color:var(--p0);text-shadow:0 0 7px var(--p0);}
.pick-row.short .pick-sym{color:var(--red);text-shadow:0 0 7px var(--red);}
.pick-thesis{font-size:11px;color:var(--p1);line-height:1.5;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;}
.pick-row.expanded .pick-thesis{display:block;-webkit-line-clamp:unset;}
.pick-meta{text-align:right;display:flex;flex-direction:column;gap:3px;align-items:flex-end;}
.pick-dir{font-size:11px;letter-spacing:.1em;text-transform:uppercase;padding:2px 5px;border:1px solid;}
.pick-dir.long{color:var(--p0);border-color:var(--p2);background:rgba(0,200,50,0.1);}
.pick-dir.short{color:var(--red);border-color:var(--red);background:rgba(255,51,0,0.1);}
/* The third grid column is `auto`, so anything unbounded here is taken straight
   out of the thesis. Capped and ellipsised: the full entry lives in the panel. */
.pick-levels{font-size:11px;color:var(--p2);white-space:nowrap;max-width:104px;overflow:hidden;text-overflow:ellipsis;}

/* Expand affordance — label swaps on state, so no JS touches it. */
.pick-more{font-size:9px;letter-spacing:.09em;color:var(--p2d);}
.pick-more::after{content:'▸ DETAILS';}
.pick-row.expanded .pick-more{color:var(--p1);}
.pick-row.expanded .pick-more::after{content:'▾ LESS';}

/* Levels + conviction, hidden until the row is opened. */
.pick-detail{grid-column:1/-1;display:none;margin-top:8px;padding-top:8px;border-top:1px solid var(--p4);}
.pick-row.expanded .pick-detail{display:block;}
.pkd-row{display:grid;grid-template-columns:82px 1fr;gap:8px;padding:3px 0;align-items:start;}
.pkd-k{font-size:9px;letter-spacing:.09em;color:var(--p2d);padding-top:2px;}
.pkd-v{font-size:11px;color:var(--p1);line-height:1.5;overflow-wrap:anywhere;}
/* A stale entry zone. Dimmed to --p2 and struck through, because the failure it
   guards against is a reader acting on "at spot" hours after spot moved — and a
   level that merely looks normal will be read as normal. The note carries the
   reason on its own line rather than as a tooltip nobody opens on a phone. */
.pkd-v-stale{color:var(--p2);text-decoration:line-through;text-decoration-color:var(--p3);}
.pkd-stale-note{
  display:block;text-decoration:none;color:var(--amber);
  font-size:10px;letter-spacing:.04em;margin-top:2px;
}
/* Collapsed row: dimmed only, deliberately NOT struck through. The expanded row
   can afford a line-through because the note underneath says what it means; up
   here beside the ticker, with nothing to explain it, a struck-out price reads
   as a cancelled trade rather than a stale number. */
.mic-entry-stale{color:var(--p2d);}
.pick-bar-wrap{grid-column:1/-1;height:3px;background:var(--p4);margin-top:5px;border-radius:1px;}
.pick-bar{height:3px;background:var(--p0);box-shadow:0 0 6px var(--p0),0 0 2px var(--p1);transition:width 1.4s cubic-bezier(.4,0,.2,1);border-radius:1px;}
.pick-row.short .pick-bar{background:var(--red);box-shadow:0 0 6px var(--red);}

/* Scorecard rows */
.score-row{
  display:grid;grid-template-columns:40px 1fr 54px 64px;
  align-items:center;padding:5px 12px;
  border-bottom:1px solid var(--p4);cursor:default;gap:5px;
}
.score-row:hover{background:var(--bg2);}
.sc-etf{font-size:13px;font-weight:600;color:var(--p0);letter-spacing:.04em;}
.sc-name{font-size:11px;color:var(--p2);letter-spacing:.03em;}
.sc-pct{font-size:11px;text-align:right;font-weight:500;}
.sc-pct.up{color:var(--p0);}
.sc-pct.dn{color:var(--red);}
.sc-sig{font-size:11px;letter-spacing:.05em;text-transform:uppercase;text-align:center;padding:2px 4px;border:1px solid;}
.sc-sig.buy{color:var(--p0);border-color:var(--p2);background:rgba(0,200,50,0.1);}
.sc-sig.sell{color:var(--red);border-color:var(--red);background:rgba(255,51,0,0.1);}
.sc-sig.hold{color:var(--p2);border-color:var(--p2);}
.sc-sig.watch{color:var(--amber);border-color:var(--amber);background:rgba(255,176,0,0.08);}
.sc-sig.skip{color:var(--p2d);border-color:var(--p4);opacity:0.6;}

/* ── SECTORS TAB ── */
#pane-sectors.on{display:grid;grid-template-columns:3fr 2fr;}

/* ── INTELLIGENCE TAB ── */
#pane-intel.on{display:grid;grid-template-columns:1fr 1fr 1fr;overflow:hidden;}
#pane-intel .intel-col:nth-child(2){border-right:1px solid var(--p4);}
.intel-col{display:flex;flex-direction:column;overflow:hidden;min-height:0;}
.intel-col:first-child{border-right:1px solid var(--p4);}
.intel-sub{flex:1;overflow-y:auto;min-height:0;padding:8px 12px;}
.intel-sub::-webkit-scrollbar{width:2px;}
.intel-sub::-webkit-scrollbar-thumb{background:var(--p3);}

/* ── CONGRESS TAB: 3-col grid + click-to-detail panel ── */
#pane-congress.on{display:grid;grid-template-columns:1.1fr 1.1fr 1fr;}
#pane-congress .intel-col{border-right:1px solid var(--p4);}
#pane-congress .intel-col:last-child{border-right:none;}
#congress-tickers-section .gov-row,#congress-sectors-section .gov-bar-row{cursor:pointer;}
#congress-tickers-section .gov-row:hover,#congress-sectors-section .gov-bar-row:hover{background:rgba(0,255,65,.025);}
#pane-congress .cg-sel{background:rgba(0,255,65,.05);}
#congress-detail-section .cp-detail-empty{color:var(--p2d);font-size:12px;letter-spacing:.06em;padding-top:4px;}
.cg-d-hd{display:flex;align-items:baseline;padding-bottom:6px;border-bottom:1px solid var(--p4);}

/* ── CONVICTION STACKS (compact, under the Government AI read) ── */
#gov-conviction{flex-shrink:0;border:1px solid var(--p3);border-left:2px solid var(--p0);background:var(--bg2);margin-bottom:10px;}
.gov-conv-grid{display:grid;grid-template-columns:1fr 1fr;gap:7px;padding:7px 10px 9px;}
.conv-stack{border:1px solid var(--p0);background:rgba(0,255,65,.04);padding:7px 9px;}
.conv-stack-top{display:flex;align-items:center;gap:7px;flex-wrap:wrap;margin-bottom:5px;}
.conv-tk{font-size:15px;font-weight:700;color:var(--p0);text-shadow:0 0 5px var(--p0);}
.conv-n{font-size:10px;letter-spacing:.08em;color:var(--p2);}
.conv-badge{font-size:10px;letter-spacing:.04em;border:1px solid var(--p3);padding:1px 5px;color:var(--p1);}
.conv-line{font-size:12px;color:var(--p1);line-height:1.55;}
@media(max-width:760px){.gov-conv-grid{grid-template-columns:1fr;}}

.intel-col-hd{
  font-size:11px;letter-spacing:.14em;color:var(--p0);
  text-shadow:0 0 5px var(--p0);text-transform:uppercase;
  padding:7px 12px;border-bottom:1px solid var(--p4);
  background:var(--bg2);flex-shrink:0;
}

.tf-group{display:flex;gap:3px;align-items:center;}
.tf-btn{
  font-size:10px;font-weight:600;letter-spacing:.08em;
  padding:3px 8px;border:1px solid var(--p3);background:transparent;
  color:var(--p2);cursor:pointer;font-family:var(--mono);
  transition:color .1s,border-color .1s;
}
.tf-btn:hover{color:var(--p0);border-color:var(--p2);}
.tf-btn.on{color:var(--p0);border-color:var(--p0);}

/* Tactical strip */
.tact-strip{
  padding:6px 12px;border-bottom:1px solid var(--p4);
  display:flex;gap:8px;align-items:center;flex-shrink:0;
  flex-wrap:wrap;background:var(--bg2);
}
.tact-strip-lbl{font-size:10px;color:var(--p1);letter-spacing:.14em;white-space:nowrap;text-shadow:0 0 1px var(--p1),0 0 5px var(--p1);}
.tact-chip{font-size:11px;letter-spacing:.06em;padding:3px 8px;border:1px solid;white-space:nowrap;cursor:default;}
.tact-chip.enter{color:var(--p0);border-color:var(--p2);background:rgba(0,200,50,0.1);}
.tact-chip.dip{color:var(--cyan);border-color:var(--cyan);background:rgba(0,255,204,0.07);}
.tact-chip.watch{color:var(--amber);border-color:var(--amber);background:rgba(255,176,0,0.08);}
.tact-chip.avoid{color:var(--red);border-color:var(--red);background:rgba(255,51,0,0.1);}
.tact-chip.hold{color:var(--p2);border-color:var(--p2);}

/* Sector table rows */
.sec-row{
  display:grid;grid-template-columns:42px 1fr 64px 56px 36px 76px;
  padding:6px 12px 6px 14px;border-bottom:1px solid var(--p4);
  align-items:center;cursor:pointer;gap:4px;transition:background .12s;
  position:relative;
}
.sec-row::before{content:'';position:absolute;left:0;top:0;bottom:0;width:2px;background:var(--p0);opacity:0;transition:opacity .15s;}
.sec-row:hover{background:var(--bg2);}
.sec-row:hover::before{opacity:1;}
.sec-row.open{background:var(--bg2);}
.sec-row.open::before{opacity:.6;}
.sec-etf{font-size:13px;font-weight:600;color:var(--p0);letter-spacing:.04em;}
.sec-name{font-size:11px;color:var(--p1);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.sec-col-header{position:sticky;top:0;background:var(--bg);z-index:5;border-bottom:1px solid var(--p3) !important;}
.sec-price{font-size:11px;color:var(--p0);text-shadow:0 0 1px var(--p0),0 0 5px var(--p0);text-align:right;}
.sec-chg{font-size:11px;font-weight:500;text-align:right;}
.sec-rsi{font-size:10px;color:var(--p1);text-shadow:0 0 1px var(--p1),0 0 4px var(--p1);text-align:right;}
.sec-sig{font-size:11px;letter-spacing:.06em;padding:2px 5px;border:1px solid;text-align:center;white-space:nowrap;}
.sec-sig.buy{color:var(--p0);border-color:var(--p2);background:rgba(0,200,50,0.1);}
.sec-sig.sell{color:var(--red);border-color:var(--red);background:rgba(255,51,0,0.1);}
.sec-sig.hold{color:var(--p2);border-color:var(--p2);}
.sec-sig.watch{color:var(--amber);border-color:var(--amber);background:rgba(255,176,0,0.08);}
.sec-sig.dip{color:var(--cyan);border-color:var(--cyan);background:rgba(0,255,204,0.07);}

/* Tactical hero (top 3 ETFs with price/RSI) */
#tact-hero-crt{display:none;flex-direction:column;padding:4px 10px 6px;border-bottom:1px solid var(--p4);flex-shrink:0;gap:4px;}
.th-row-crt{display:flex;flex-direction:column;gap:4px;padding:9px 12px;border-left:3px solid var(--p3);background:rgba(0,255,65,.02);}
.th-row-crt.th-enter{border-left-color:var(--p1);background:rgba(0,200,50,.05);}
.th-row-crt.th-avoid{border-left-color:var(--red);background:rgba(255,51,0,.05);}
.th-row-crt.th-watch{border-left-color:var(--amber);background:rgba(255,176,0,.04);}
.th-row-crt.th-hold{border-left-color:var(--p3);}
.th-headline{display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
.th-etf{font-size:15px;font-weight:700;color:var(--p0);letter-spacing:.05em;text-shadow:0 0 1px var(--p0),0 0 6px var(--p0);}
.th-conf{font-size:14px;color:var(--p1);line-height:1.65;margin-top:3px;}

/* Sector drawer */
.sec-drawer{
  display:none;padding:9px 12px 10px;
  background:var(--bg2);border-bottom:1px solid var(--p3);
}
.sec-drawer.open{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;}
.sec-drawer-item{display:flex;flex-direction:column;gap:3px;}
.sec-drawer-lbl{font-size:10px;color:var(--p2);letter-spacing:.1em;text-transform:uppercase;}
.sec-drawer-val{font-size:13px;color:var(--p1);}
.sec-drawer-conflict{
  font-size:10px;color:var(--amber);letter-spacing:.05em;
  padding:4px 7px;border:1px solid #3d2000;
  grid-column:1/-1;margin-top:4px;
}
.sec-drawer-reason{
  grid-column:1/-1;font-size:11px;color:var(--p1);line-height:1.55;
  padding-bottom:8px;border-bottom:1px solid var(--p4);margin-bottom:4px;
}
.sec-drawer-spark{
  grid-column:1/-1;display:flex;align-items:flex-end;gap:3px;
  height:28px;padding:0;margin-top:2px;
}
.sec-drawer-accel{
  grid-column:1/-1;font-size:10px;color:var(--p2);letter-spacing:.07em;
  margin-top:2px;
}
.sec-drawer-holdings{
  grid-column:1/-1;display:flex;flex-wrap:wrap;gap:5px;margin-top:6px;
}
.sec-holding-chip{
  font-size:10px;font-weight:600;color:var(--p1);
  border:1px solid var(--p4);padding:2px 6px;letter-spacing:.04em;
}
.sec-drawer-footer{
  grid-column:1/-1;display:flex;gap:16px;align-items:center;
  margin-top:6px;font-size:10px;color:var(--p1);letter-spacing:.05em;
}

/* Rotation */
.rot-row-crt{
  display:grid;grid-template-columns:20px 40px 1fr 58px;
  padding:5px 12px;border-bottom:1px solid var(--p4);
  align-items:center;gap:5px;
}
.rot-rank-crt{font-size:11px;color:var(--p1);text-shadow:0 0 1px var(--p1),0 0 4px var(--p1);}
.rot-etf-crt{font-size:13px;font-weight:600;color:var(--p0);}
.rot-name-crt{font-size:11px;color:var(--p1);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.rot-pct-crt{font-size:11px;font-weight:500;text-align:right;}

/* Signal History */
.sh-wrap{flex:0 0 auto;max-height:42vh;max-height:42dvh;overflow:auto;padding:8px 10px;}
/* Flow intensity detail panel */
.fi-row{display:grid;grid-template-columns:48px 1fr 44px 54px;gap:6px;padding:5px 14px;border-bottom:1px solid var(--p4);align-items:center;}
.fi-hdr{background:var(--bg2);}
.fi-date{font-size:11px;color:var(--p2);white-space:nowrap;}
.fi-bar-col{min-width:0;}
.fi-bar-wrap{height:4px;background:var(--p4);overflow:hidden;}
.fi-bar-fill{height:100%;}
.fi-num{font-size:11px;text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums;}
.fi-net{padding:5px 14px;font-size:10px;letter-spacing:.06em;color:var(--p2);border-bottom:1px solid var(--p4);background:var(--bg2);}
.sh-wrap::-webkit-scrollbar{width:2px;height:2px;}
.sh-wrap::-webkit-scrollbar-thumb{background:var(--p3);}
.sh-toggle-crt{display:flex;gap:4px;margin-bottom:8px;align-items:center;}
.sh-legend-crt{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:9px;}
.sh-legend-item-crt{display:flex;align-items:center;gap:3px;font-size:11px;color:var(--p1);text-shadow:0 0 1px var(--p1),0 0 4px var(--p1);}
.sh-legend-dot-crt{width:8px;height:8px;border-radius:1px;flex-shrink:0;}
.sh-heat-crt{display:grid;gap:2px;align-content:start;}
.sh-row-crt{display:grid;gap:2px;align-items:center;margin-bottom:2px;}
.sh-label-crt{
  font-size:10px;font-weight:600;color:var(--p0);cursor:pointer;
  letter-spacing:.04em;padding-right:4px;white-space:nowrap;
  transition:text-shadow .1s;
}
.sh-label-crt:hover{text-shadow:0 0 6px var(--p0);}
.sh-cell-crt{
  height:14px;border-radius:1px;cursor:pointer;transition:opacity .1s;
  position:relative;overflow:hidden;
}
.sh-cell-crt:hover{opacity:.65;}
.sh-flip-crt::after{content:'';position:absolute;top:0;right:0;width:0;height:0;
  border-style:solid;border-width:0 5px 5px 0;
  border-color:transparent rgba(255,255,255,.5) transparent transparent;}
.sh-streak-chip{font-size:9px;color:var(--p2d);font-weight:400;margin-left:2px;letter-spacing:0;}
.sh-date-axis-crt{display:grid;gap:2px;margin-bottom:3px;}
.sh-date-cell-crt{font-size:9px;color:var(--p2d);text-align:center;overflow:hidden;white-space:nowrap;}
.sh-cell-tip{position:fixed;z-index:200;background:var(--bg2);border:1px solid var(--p3);
  padding:4px 9px;font-size:10px;color:var(--p1);white-space:nowrap;pointer-events:none;
  letter-spacing:.04em;font-family:var(--mono);}
.sh-stability-row{display:flex;flex-wrap:wrap;gap:4px;margin:4px 0 6px;}
.sh-stab-chip{font-size:10px;padding:2px 6px;border-radius:1px;font-family:var(--mono);letter-spacing:.04em;}
.sh-verdict-row{border-left:2px solid var(--p3);padding:4px 8px;margin:4px 0 8px;font-size:11px;color:var(--p1);line-height:1.5;}
.sh-detail-crt{
  grid-column:1/-1;background:var(--bg2);border:1px solid var(--p3);
  padding:10px 11px;margin:2px 0 4px;font-size:12px;
}
.sh-detail-title-crt{font-size:12px;color:var(--p0);letter-spacing:.1em;margin-bottom:7px;display:flex;justify-content:space-between;align-items:center;}
.sh-detail-close{font-size:11px;color:var(--p2);background:none;border:none;cursor:pointer;font-family:var(--mono);padding:0;}
.sh-detail-close:hover{color:var(--p0);}
.sh-change-row-crt{
  display:grid;grid-template-columns:52px 76px 1fr 38px;
  padding:4px 0;border-bottom:1px solid var(--p4);
  gap:6px;align-items:center;font-size:12px;
}
.sh-change-row-crt:last-child{border-bottom:none;}
/* Snapshot date footer on drawer */
.sec-drawer-date{font-size:10px;color:var(--p2);grid-column:1/-1;margin-top:4px;letter-spacing:.08em;}

/* ── STUB PANES (tabs not yet built) ── */
.pane-stub{
  flex:1;display:flex;align-items:center;justify-content:center;
  flex-direction:column;gap:12px;
}
.stub-box{
  border:1px solid var(--p3);padding:40px 60px;text-align:center;
  animation:fadePhosphor .4s ease both;
}
.stub-title{font-size:13px;color:var(--p0);text-shadow:0 0 8px var(--p0);letter-spacing:.18em;margin-bottom:7px;}
.stub-status{font-size:10px;color:var(--p2);letter-spacing:.12em;}
.stub-cursor{color:var(--p0);animation:blink 1s step-end infinite;}

/* ── STATUS BAR ── */
.statusbar{
  border-top:1px solid var(--p3);padding:4px 14px;
  display:flex;justify-content:space-between;align-items:center;
  font-size:10px;color:var(--p2);letter-spacing:.08em;
  background:var(--bg2);flex-shrink:0;
}
.statusbar span{display:flex;align-items:center;gap:8px;}
#data-status{font-size:10px;color:var(--p2);}
#data-status.live{color:var(--p0);}
#data-status.error{color:var(--red);}

/* ── BOOT OVERLAY ── */
#boot{
  position:fixed;inset:0;background:var(--bg);z-index:9000;
  display:flex;flex-direction:column;justify-content:center;
  padding:40px 60px;font-size:14px;
  transition:opacity .35s ease;
}
#boot.boot-dismiss{opacity:0;pointer-events:none;}
@keyframes bootFade{to{opacity:0;pointer-events:none;visibility:hidden;}}
.boot-line{color:var(--p1);margin-bottom:3px;opacity:0;animation:fadePhosphor .1s ease forwards;}
.boot-line:nth-child(1){animation-delay:.05s;}
.boot-line:nth-child(2){animation-delay:.18s;}
.boot-line:nth-child(3){animation-delay:.35s;}
.boot-line:nth-child(4){animation-delay:.55s;}
.boot-line:nth-child(5){animation-delay:.75s;}
.boot-line:nth-child(6){animation-delay:.95s;}
.boot-line:nth-child(7){animation-delay:1.15s;}
.boot-line:nth-child(8){animation-delay:1.4s;}
.boot-line:nth-child(9){animation-delay:1.7s;}
.boot-line.ok{color:var(--p0);}
.boot-line.err{color:var(--red);}

/* ═══════════════════════════════════════
   RESPONSIVE — TABLET (≤768px)
═══════════════════════════════════════ */
@media(max-width:768px){
  /* Logo: hide subtitle on tight screens */
  .logo{font-size:16px;}
  .logo-sub{display:none;}

  /* Nav: slightly larger touch target */
  .nav-item{padding:8px 14px 8px 0;font-size:11px;}

  /* Brief: 2-column (heatmap + picks share a col) */
  #pane-brief.on{grid-template-columns:1fr 1fr;}

  /* Scorecard: hide name col, keep ETF+pct+sig */
  .score-row{grid-template-columns:40px 1fr 64px;}
  .sc-name{display:none;}

  /* Sector rows: a bit more vertical padding */
  .sec-row{padding:7px 12px;}

  /* Track Record KPI: 2-col grid on tablet */
  #tr-kpi-strip{grid-template-columns:repeat(2,1fr);}
  /* Picks KPI: 5 tiles across a phone put "Graded Picks" 54px off the screen —
     and its sample size is the tile that makes the other four readable. */
  #tr-pk-kpi{grid-template-columns:repeat(3,1fr);}
  /* Exit Planner KPI: 2-col on tablet */
  #exit-kpi-strip{grid-template-columns:repeat(2,1fr);}
  /* AutoPilot KPI: 3-col on tablet (6 items → 2 rows of 3) */
  #ap-kpi-strip{grid-template-columns:repeat(3,1fr);}

  /* Cycle View: stack pred table + detail on tablet (prevents 480px-col overflow on Android/landscape) */
  #cycle-preds{grid-template-columns:1fr;overflow:visible;max-height:none;}
  #cycle-pred-table{border-right:none;border-bottom:1px solid var(--p4);}
  #cycle-pred-detail{min-height:120px;}

  /* Nav scroll affordance: gradient fade on right edge signals horizontal scroll */
  .header-row2{position:relative;}
  .header-row2::after{content:'';position:absolute;right:0;top:0;bottom:0;width:36px;background:linear-gradient(to right,transparent,var(--bg));pointer-events:none;z-index:2;}
}

/* ═══════════════════════════════════════
   RESPONSIVE — MOBILE (≤480px)
═══════════════════════════════════════ */
@media(max-width:480px){
  /* Body: allow native scroll instead of fixed-height overflow */
  body{overflow-y:auto;}

  /* Topbar: tighten, hide verbose text on phone */
  /* Keep the safe-area insets from the base rule — a bare `padding` shorthand
     here would reset them on exactly the devices that have a notch. */
  .topbar{font-size:10px;padding:4px 10px;
    padding-top:calc(4px + env(safe-area-inset-top));
    padding-left:calc(10px + env(safe-area-inset-left));
    padding-right:calc(10px + env(safe-area-inset-right));}
  #clock-str{display:none;}
  .topbar-session{display:none;}
  .topbar-sys{display:none;}

  /* Header */
  header{padding:0 10px;
    padding-left:calc(10px + env(safe-area-inset-left));
    padding-right:calc(10px + env(safe-area-inset-right));}
  .header-row1{padding:7px 0 5px;flex-wrap:wrap;gap:6px;}
  .logo{font-size:15px;}
  .logo-sub{display:none;}

  .header-right{order:1;}
  .header-status{display:none;}

  /* Nav: hamburger replaces horizontal scroll on mobile. The hamburger now sits
     in .header-right, so row2 has nothing visible left — drop the whole row. */
  .header-row2{display:none;}
  .mob-ham-btn{
    display:flex;align-items:center;gap:7px;
    background:none;border:1px solid var(--p3);
    color:var(--p1);font-family:inherit;font-size:11px;
    letter-spacing:.1em;cursor:pointer;
    padding:7px 14px;text-transform:uppercase;
    transition:color .1s,border-color .1s;
  }
  .mob-ham-btn:active{color:var(--p0);border-color:var(--p0);}

  /* Main area: scrollable container on mobile */
  .main-area{overflow-y:auto;overflow-x:hidden;}
  .pane{overflow:visible;min-height:auto;}
  .pane.on{flex-direction:column;overflow:visible;}

  /* Brief: single stacked column */
  #pane-brief.on{display:flex;flex-direction:column;overflow:visible;}

  /* Sector: single stacked column */
  #pane-sectors.on{display:flex;flex-direction:column;overflow:visible;}

  /* Columns: full-width, natural height, stacked sections */
  .col{
    border-right:none;
    border-bottom:1px solid var(--p4);
    overflow:visible;
    min-height:auto;
    max-height:none;
  }
  .col:last-child{border-bottom:none;}
  #pane-intel.on{grid-template-columns:1fr;}
  #pane-congress.on{grid-template-columns:1fr;}
  .gov-subview.on{grid-template-columns:1fr;}
  .intel-col:first-child{border-right:none;border-bottom:1px solid var(--p4);}
  #pane-congress .intel-col{border-right:none;border-bottom:1px solid var(--p4);}
  .col-body{overflow-y:visible;padding:10px 10px 8px;}
  .col-header{padding:7px 10px 6px;}
  .col-title{font-size:12px;}

  /* Brief headline: slightly tighter on phone */
  .brief-headline{font-size:16px;margin-bottom:12px;}

  /* Heatmap: natural height, no overflow */
  .hm-grid{flex:none;max-height:none;overflow:visible;}

  /* Sector table: 3-col on mobile (ETF | Sector | Signal) */
  .sec-row{
    grid-template-columns:42px 1fr 80px;
    padding:10px 10px;
  }
  .sec-price,.sec-chg,.sec-rsi{display:none;}

  /* Sector drawer: 2-col on mobile */
  .sec-drawer.open{grid-template-columns:1fr 1fr;}

  /* Signal history cells: 22px = minimum tappable touch target */
  .sh-cell-crt{height:22px;}
  .sh-wrap{padding:8px;}

  /* Picks: full-width card feel */
  .pick-row{padding:10px 10px;}
  .pick-thesis{font-size:12px;}
  /* Narrow screens are where the meta column hurt most — give the thesis the room. */
  .pick-levels{max-width:84px;}
  .pkd-row{grid-template-columns:70px 1fr;gap:6px;}

  /* Scorecard: hide name on mobile */
  .score-row{grid-template-columns:42px 1fr 66px;gap:4px;}
  .sc-name{display:none;}

  /* Buttons: minimum 44px touch targets */
  .refresh-btn{padding:9px 14px;font-size:11px;}
  .tf-btn{padding:6px 10px;font-size:11px;}
  .tact-chip{padding:5px 10px;font-size:11px;}

  /* Header actions wrap instead of running off the edge. The padding bump above
     is what pushes them over: on the Trade Ideas header the button row ends 19px
     past the viewport, and because nothing on this page scrolls sideways the
     overflow is clipped rather than reachable. */
  .stocks-hdr{flex-wrap:wrap;gap:6px 10px;}

  /* Stub pages: compact on mobile */
  .stub-box{padding:28px 24px;}

  /* Status bar: tighten */
  .statusbar{font-size:10px;padding:4px 10px;}
  .statusbar span:last-child{display:none;}

  /* Boot: full-bleed on phone */
  #boot{padding:24px 20px;font-size:13px;}

  /* Stocks tab: compact rows on mobile — hide PRICE + LEVELS cols, keep ticker/name/signal/conf */
  .pt-hd{grid-template-columns:56px 1fr 60px 48px;}
  .pt-row{grid-template-columns:56px 1fr 60px 48px;padding:8px 12px;}
  .pt-live{display:none;}
  .pt-lvl{display:none;}
  .pt-expand{padding:8px 12px 12px 16px;}
  .pt-ticker{font-size:14px;}

  /* Heatmap: don't force 80px min-height when stacking */
  .hm-cell{min-height:auto;}

  /* Cycle phase strip: 2-col on mobile (avoid 4-phase squeeze) */
  #cycle-phase-strip{grid-template-columns:1fr 1fr;gap:4px;}
  .cph-arrow{display:none;}

  /* ── P0: KPI strips compact on phone ── */
  #exit-kpi-strip{grid-template-columns:repeat(2,1fr);}
  #ap-kpi-strip{grid-template-columns:repeat(2,1fr);}
  .mkt-kpi-bar{grid-template-columns:repeat(2,1fr);}

  /* ── P0: Past Briefs — sidebar stacks above content ── */
  #pb-body{display:flex;flex-direction:column;}
  #pb-sidebar{border-right:none;border-bottom:1px solid var(--p4);max-height:130px;overflow-y:auto;}
  #pb-content{overflow-y:visible;padding:10px 10px 8px;}

  /* ── P0: Cycle View — stack narrative + chips ── */
  #cycle-body{display:flex;flex-direction:column;max-height:none;overflow:visible;}
  #cycle-narrative{border-right:none;border-bottom:1px solid var(--p4);}
  #cycle-chips-panel{overflow:visible;}

  /* ── P0: Cycle View — stack pred table + detail ── */
  #cycle-preds{grid-template-columns:1fr;overflow:visible;max-height:none;}
  #cycle-pred-table{border-right:none;border-bottom:1px solid var(--p4);}
  #cycle-pred-detail{min-height:160px;}

  /* ── P0: Track Record — stack history columns + analytics panels ── */
  #tr-view-h{grid-template-columns:1fr;grid-template-rows:auto 1fr;}
  #tr-left-col{border-right:none;border-bottom:1px solid var(--p4);max-height:160px;}
  #tr-pending-panel{max-height:120px;}
  #tr-analytics{grid-template-columns:1fr;}
  #tr-calibration{border-right:none;border-bottom:1px solid var(--p4);overflow:visible;}
  #tr-analytics-2{grid-template-columns:1fr;}
  #tr-sector-rates{border-right:none;border-bottom:1px solid var(--p4);}
  #tr-rg-body{grid-template-columns:1fr;}

  /* ── P1: Brief tab — mobile column order (intel-card is now child 2, cols shift) ── */
  /* Col1 Brief (child 3): order 0 — first (default, no rule needed) */
  /* Col3 Picks (child 5): order 2 — second */
  /* Col2 Heatmap (child 4): order 3 — last */
  #pane-brief.on .col:nth-child(5){order:2;}
  #pane-brief.on .col:nth-child(4){order:3;}

  /* ── P1: Exit Planner form — keep inputs readable on phone ── */
  #exit-form-bar{gap:4px;}
  .exit-inp{width:62px;}
  .exit-inp-ticker{width:50px;}

  /* ── P0: Positions tab card header — 6-col → 4-col, hide RSI chip ── */
  .ep-card-hd{grid-template-columns:56px 1fr auto 28px;gap:6px;}
  .ep-rsi{display:none;}

  /* ── P1: AutoPilot tables — horizontal scroll instead of overflow/clip ── */
  #ap-positions-inner,#ap-history-inner,#ap-decisions-inner{overflow-x:auto;-webkit-overflow-scrolling:touch;}
  .ap-table{min-width:520px;}

  /* ── Edge tab: don't force AutoPilot's 520px min-width on the slimmer Edge
       tables — size to content, shrink, nowrap + touch-scroll the small overflow ── */
  #edge-body{-webkit-overflow-scrolling:touch;}
  #edge-body .ap-table{min-width:0;font-size:11px;}
  #edge-body .ap-table th,#edge-body .ap-table td{padding:5px 6px;white-space:nowrap;}
  #edge-body .edge-sub{display:none;}  /* drop the secondary hit-rate/n on phone so horizons fit */

  /* ── P1: Signal history — ensure touch-scrollable, don't clip grid ── */
  .sh-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;}
  .sh-heat-crt{min-width:320px;}

  /* ── P2: Brief Archive topbar — wrap on narrow screens ── */
  #pb-topbar{flex-wrap:wrap;gap:6px;}

  /* ── P2: Exit Planner form inputs — minimum touch targets ── */
  .exit-inp,.exit-inp-ticker{min-height:36px;padding:6px 8px;font-size:12px;}
  .exit-add-btn{min-height:36px;padding:6px 14px;font-size:11px;}
}

/* ── STOCKS & ETFs FULL TAB ── */
.stocks-hdr{
  display:flex;align-items:center;justify-content:space-between;
  padding:12px 16px 10px;border-bottom:1px solid var(--p4);flex-shrink:0;
}
.stocks-filter-bar{
  display:flex;align-items:center;gap:8px;
  padding:8px 16px;border-bottom:1px solid var(--p4);flex-shrink:0;
  /* Seven filters do not fit a 375px phone — the seventh was being clipped at the
     right edge with no hint it was there. Scroll rather than wrap, so the bar
     stays one row high and the grid keeps its space. */
  overflow-x:auto;
}
.stocks-filter-bar::-webkit-scrollbar{height:2px;}
.stocks-filter-bar::-webkit-scrollbar-thumb{background:var(--p3);}
.stocks-filter-bar .tf-group{flex-wrap:nowrap;}
.stocks-filter-bar .tf-btn{white-space:nowrap;}
/* The running view is a different question from the five filters beside it, so
   it reads as a sibling of CALL SHEET rather than another slice of today. */
.stocks-filter-bar .ot-tab{color:var(--amber);border-color:var(--amber);}
.stocks-filter-bar .ot-tab.on{background:rgba(255,176,0,.12);}
.stocks-crt-grid{flex:1;overflow-y:auto;display:block;}
.stocks-crt-grid::-webkit-scrollbar{width:2px;}
.stocks-crt-grid::-webkit-scrollbar-thumb{background:var(--p3);}

/* Sticky column header */
.pt-hd{
  display:grid;
  grid-template-columns:64px 1fr 92px 66px 1fr 58px;
  padding:4px 16px;gap:10px;
  border-bottom:1px solid var(--p3);background:var(--bg2);
  position:sticky;top:0;z-index:1;
  font-size:11px;letter-spacing:.1em;color:var(--p2);text-transform:uppercase;
}
/* Pick row */
.pt-row{
  display:grid;
  grid-template-columns:64px 1fr 92px 66px 1fr 58px;
  align-items:center;padding:10px 16px;
  border-bottom:1px solid var(--p4);
  cursor:pointer;gap:10px;
  position:relative;transition:background .12s;
}
.pt-row::before{content:'';position:absolute;left:0;top:0;bottom:0;width:2px;background:var(--p0);opacity:0;transition:opacity .15s;}
.pt-row:hover{background:var(--bg2);}
.pt-row:hover::before,.pt-row.pt-open::before{opacity:.6;}
.pt-row.pt-avoid::before{background:var(--red);}

.pt-ticker{font-size:15px;font-weight:700;letter-spacing:.04em;color:var(--p0);text-shadow:0 0 6px var(--p0);}
.pt-row.pt-avoid .pt-ticker{color:var(--red);text-shadow:0 0 5px var(--red);}
.pt-info{min-width:0;}
.pt-name{font-size:13px;color:var(--p1);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.pt-meta{font-size:11px;color:var(--p2);letter-spacing:.04em;}
.pt-live{font-size:11px;color:var(--p1);text-align:right;white-space:nowrap;}
.pt-dir{font-size:11px;letter-spacing:.08em;text-transform:uppercase;padding:3px 7px;border:1px solid;text-align:center;font-weight:700;white-space:nowrap;}
.pt-dir.long{color:var(--p0);border-color:var(--p2);background:rgba(0,200,50,.1);}
.pt-dir.watch{color:var(--amber);border-color:var(--amber);background:rgba(255,176,0,.08);}
.pt-dir.avoid{color:var(--red);border-color:var(--red);background:rgba(255,51,0,.1);}
.pt-lvl{font-size:10px;color:var(--p2);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.pt-lvl .pv{color:var(--p1);}
.pt-lvl .pvup{color:var(--p0);}
.pt-lvl .pvdn{color:var(--red);}
.pt-lvl .ps{color:var(--p2d);margin:0 4px;}
.pt-conf-wrap{display:flex;flex-direction:column;gap:3px;}
.pt-conf-lbl{font-size:11px;letter-spacing:.08em;color:var(--p2);text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.pt-bar-wrap{height:3px;background:var(--p4);border-radius:1px;}
.pt-bar{height:3px;border-radius:1px;background:var(--p0);box-shadow:0 0 4px var(--p0);transition:width 1.4s cubic-bezier(.4,0,.2,1);}
.pt-bar.medium{background:var(--amber);box-shadow:0 0 4px var(--amber);}
.pt-bar.low{background:var(--p2);box-shadow:none;}
/* Expand section */
.pt-expand{display:none;padding:10px 16px 14px 90px;border-bottom:1px solid var(--p3);background:rgba(0,255,65,.012);}
.pt-expand.open{display:block;}
.pt-thesis{font-size:13px;color:var(--p1);line-height:1.6;margin-bottom:8px;}
.pt-exp-row{display:flex;gap:16px;flex-wrap:wrap;border-top:1px solid var(--p4);padding-top:6px;margin-top:4px;}
.pt-exp-item{display:flex;flex-direction:column;gap:2px;}
.pt-exp-lbl{font-size:11px;letter-spacing:.08em;color:var(--p2);}
.pt-exp-val{font-size:11px;color:var(--p1);}
.pt-sig-list{margin-top:6px;border-top:1px solid var(--p4);padding-top:6px;}
.pt-sig-row{display:flex;gap:5px;font-size:11px;color:var(--p1);line-height:1.5;margin-bottom:2px;}
.pt-sig-icon{color:var(--p2d);flex-shrink:0;}
.pt-algo-badge{font-size:11px;margin-top:5px;letter-spacing:.04em;}

/* ── BRIEF FULL TRADE ROWS (levels + expand) ── */
.bt-levels-full{
  grid-column:1/-1;display:flex;gap:14px;flex-wrap:wrap;
  font-size:13px;margin-top:5px;padding-top:5px;border-top:1px solid var(--p4);
}
.bt-lv-lbl{color:var(--p2);letter-spacing:.06em;font-size:11px;margin-right:3px;}
.bt-lv-val{color:var(--p1);}
.bt-lv-val.up{color:var(--p0);}
.bt-lv-val.dn{color:var(--red);}
.bt-expand{
  grid-column:1/-1;display:none;
  margin-top:6px;padding-top:6px;border-top:1px solid var(--p4);
}
.brief-trade-row.bt-open .bt-expand{display:block;}
.bt-exp-row{display:flex;gap:8px;align-items:baseline;font-size:13px;line-height:1.6;margin-bottom:3px;}
.bt-exp-lbl{color:var(--p2);letter-spacing:.06em;font-size:11px;white-space:nowrap;min-width:82px;}
.bt-exp-val{color:var(--p1);}
.brief-trade-row.bt-expandable{cursor:pointer;}
.brief-trade-row.bt-expandable:hover{background:rgba(0,255,65,.03);}

/* ── BRIEF EXTRA SECTIONS (earnings, catalysts, risks, preds) ── */
.earn-row-crt{display:grid;grid-template-columns:1fr auto;gap:2px 8px;padding:6px 0;border-bottom:1px solid var(--p4);align-items:start;}
.earn-co{font-size:13px;color:var(--p1);font-weight:600;}
.earn-date{font-size:13px;color:var(--p2);white-space:nowrap;}
.earn-detail{font-size:13px;color:var(--p2);grid-column:1/-1;line-height:1.5;margin-top:2px;}
.earn-hist-dots{display:flex;align-items:center;gap:5px;margin-top:2px;}
.earn-hist-lbl{font-size:11px;color:var(--p2);letter-spacing:.06em;}
.earn-dot{font-size:13px;line-height:1;}
.earn-dot.beat{color:var(--p0);text-shadow:0 0 4px var(--p0);}
.earn-dot.miss{color:var(--red);text-shadow:0 0 4px var(--red);}
.earn-dot.unk{color:var(--p2d);}
.earn-beat{color:var(--p0);}
.earn-miss{color:var(--red);}
.earn-exp{display:inline-block;font-size:10px;padding:1px 6px;border:1px solid;letter-spacing:.06em;margin-top:3px;grid-column:1/-1;}
.earn-exp.earn-beat{border-color:var(--p0);background:rgba(0,255,65,.07);}
.earn-exp.earn-miss{border-color:var(--red);background:rgba(255,34,34,.07);}
.earn-exp.earn-inline{color:var(--amber);border-color:var(--amber);background:rgba(255,176,0,.07);}
.earn-exp.earn-upcoming{color:var(--p2);border-color:var(--p3);}

.cat-row-crt{display:grid;grid-template-columns:58px 1fr auto;gap:3px 8px;padding:6px 0;border-bottom:1px solid var(--p4);align-items:start;}
.cat-date-crt{font-size:13px;color:var(--p2);padding-top:1px;}
.cat-title-crt{font-size:13px;color:var(--p1);font-weight:600;}
.cat-impact-crt{font-size:13px;color:var(--p2);line-height:1.5;grid-column:2/3;}
.cat-bdgs{display:flex;gap:4px;align-items:center;justify-content:flex-end;flex-wrap:wrap;}
.cat-bdg{font-size:10px;padding:1px 5px;border:1px solid;letter-spacing:.06em;white-space:nowrap;}
/* Severity (regimeRelevance) */
.cat-bdg.high{color:var(--red);border-color:var(--red);}
.cat-bdg.medium{color:var(--amber);border-color:var(--amber);}
.cat-bdg.low,.cat-bdg.watch{color:var(--p2);border-color:var(--p3);}
/* Sentiment (badge) — the pipeline emits cb-bull|cb-bear|cb-neut, which had no
   matching rule here, so the chip rendered uncoloured. */
.cat-bdg.cb-bull{color:var(--p0);border-color:var(--p2);}
.cat-bdg.cb-bear{color:var(--red);border-color:var(--red);}
.cat-bdg.cb-neut{color:var(--p2);border-color:var(--p3);}

/* ── Government tabs (Contracts / Policy / Lobbying) — 13px site baseline ── */
.gov-row{padding:9px 0;border-bottom:1px solid var(--p4);}
.gov-row-top{display:flex;align-items:baseline;gap:8px;}
.gov-tkr{color:var(--p0);font-weight:700;font-size:14px;letter-spacing:.03em;}
.gov-amt{color:var(--amber);font-weight:700;font-size:14px;}
.gov-badge{font-size:11px;letter-spacing:.05em;border:1px solid var(--p3);padding:1px 6px;white-space:nowrap;}
.gov-tag{margin-left:auto;font-size:12px;color:var(--p2);white-space:nowrap;}
.gov-meta{font-size:13px;color:var(--p2);margin-top:4px;line-height:1.45;}
.gov-desc{font-size:13px;color:var(--p1);margin-top:3px;line-height:1.45;}
.gov-title{font-size:13px;color:var(--p0);margin-top:5px;line-height:1.45;}
.gov-title a{color:var(--p0);text-decoration:none;}
.gov-title a:hover{text-decoration:underline;}
.gov-chips{margin-top:6px;display:flex;flex-wrap:wrap;gap:4px;}
.gov-chip{font-size:11px;color:var(--p1);border:1px solid var(--p3);padding:1px 6px;white-space:nowrap;}
.gov-cap{font-size:11px;color:var(--p2);padding-bottom:8px;line-height:1.45;}
.gov-bar-row{margin-bottom:9px;}
.gov-bar-hd{display:flex;justify-content:space-between;font-size:12px;}
.gov-bar-hd .n{color:var(--p1);}
.gov-bar-hd .v{color:var(--p2);}
.gov-bar{height:5px;background:var(--p4);margin-top:3px;}
.gov-bar-fill{height:100%;background:var(--p1);}
.gov-status{font-size:13px;color:var(--p2);line-height:1.7;}
.gov-status b{color:var(--p1);font-weight:400;}
.gov-disc{font-size:11px;color:var(--p2d);margin-top:10px;line-height:1.5;}
.gov-empty{font-size:12px;color:var(--p2);}
.gov-warn{font-size:12px;color:var(--amber);margin-bottom:7px;}
/* Government tab: vertical (sub-nav on top, sub-view fills) */
#pane-gov.on{flex-direction:column;}
/* Seven tabs do not fit a phone. Without a scroller the row simply overflows a
   container nothing scrolls sideways, so the last three tabs (CONGRESS, RADAR and
   the help button) are clipped off the right edge and cannot be reached at all —
   navigation that is present in the DOM and absent to the user. Scroll the strip
   rather than wrapping it: wrapping doubles the header height on the one tab that
   already has the least room for its content. */
.gov-subnav{display:flex;gap:6px;padding:8px 0 10px;flex-shrink:0;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;}
.gov-subnav::-webkit-scrollbar{height:0;}
.gov-subnav > *{flex:0 0 auto;}
.gov-subview{display:none;flex:1;min-height:0;overflow:hidden;}
.gov-subview.on{display:grid;grid-template-columns:1fr 1fr;}
#gov-view-congress.on{grid-template-columns:1fr 1fr 1fr;}
/* OVERVIEW sub-view: stack the AI read + conviction stacks full-width, scroll as one page */
#gov-view-overview.on{display:block;overflow-y:auto;}
#gov-view-overview .gov-digest{max-height:none;overflow:visible;}
/* compact feed-status footer (replaces the bulky FEED STATUS panel) */
.gov-foot{flex-shrink:0;border-top:1px solid var(--p4);padding:6px 2px 2px;font-size:11px;color:var(--p2);letter-spacing:.02em;}
.gov-foot b{color:var(--p1);font-weight:400;}
.gov-warn-i{color:var(--amber);}
/* collapsible help panel (? button uses the shared .help-btn) */
.gov-help{display:none;flex-shrink:0;border:1px solid var(--p3);background:var(--bg2);padding:10px 13px;margin-bottom:10px;font-size:12px;color:var(--p1);line-height:1.65;}
.gov-help.on{display:block;}
.gov-help b{color:var(--p0);font-weight:400;}

.risk-row-crt{padding:7px 0;border-bottom:1px solid var(--p4);}
.risk-hdr-crt{display:flex;justify-content:space-between;align-items:center;margin-bottom:3px;}
.risk-title-crt{font-size:13px;color:var(--p1);font-weight:600;}
.risk-lv{font-size:10px;padding:1px 5px;border:1px solid;letter-spacing:.06em;}
.risk-lv.high{color:var(--red);border-color:var(--red);}
.risk-lv.medium{color:var(--amber);border-color:var(--amber);}
.risk-lv.low{color:var(--p2);border-color:var(--p3);}
.risk-body-crt{font-size:13px;color:var(--p2);line-height:1.6;}

/* .pred-vdict is the verdict badge, rendered inside .brot-row (Rotation &
   Outlook). The old .pred-row-crt / .pred-etf-crt / .pred-outlook rules went with
   the standalone Sector Outlook panel. */
.pred-vdict{font-size:11px;padding:1px 5px;border:1px solid;white-space:nowrap;justify-self:start;min-width:64px;text-align:center;}
.pred-vdict.buy{color:var(--p0);border-color:var(--p2);background:rgba(0,200,50,.08);}
.pred-vdict.watch{color:var(--amber);border-color:var(--amber);background:rgba(255,176,0,.06);}
.pred-vdict.sell{color:var(--red);border-color:var(--red);background:rgba(255,51,0,.08);}
.pred-vdict.hold{color:var(--p2);border-color:var(--p3);}

.bias-row-crt{display:flex;gap:8px;align-items:flex-start;padding:6px 0;border-bottom:1px solid var(--p4);}
.bias-pill-crt{font-size:11px;padding:2px 6px;border:1px solid;white-space:nowrap;flex-shrink:0;letter-spacing:.06em;min-width:74px;text-align:center;}
.bias-pill-crt.over{color:var(--p0);border-color:var(--p2);background:rgba(0,200,50,.08);}
.bias-pill-crt.under{color:var(--red);border-color:var(--red);background:rgba(255,51,0,.08);}
.bias-pill-crt.neutral{color:var(--p2);border-color:var(--p3);}
.bias-asset-crt{font-size:13px;color:var(--p1);font-weight:600;margin-bottom:2px;}
.bias-note-crt{font-size:13px;color:var(--p2);line-height:1.6;}

/* Rotation & Outlook rows — rotation bar + 7-day verdict, one line per sector.
   max-width matters: this column goes full-width on a large monitor, and an
   uncapped 1fr bar track turned the top sector into a 2300px glowing green rule.
   Capping the row keeps a readable measure at any window size. */
/* Two columns once there's room — fills the width instead of leaving half the
   panel empty, halves the height, and keeps each bar short. Multi-column (not
   grid) so the ranking still reads top-to-bottom down column one, then column two. */
#brief-rot-list{column-gap:28px;}
@media(min-width:1000px){#brief-rot-list{column-count:2;}}
.brot-item{break-inside:avoid;}
.brot-row{display:grid;grid-template-columns:38px 1fr 52px 64px;gap:2px 6px;align-items:center;
  padding:4px 0;border-bottom:1px solid var(--p4);}
.brot-etf{font-size:11px;font-weight:700;color:var(--p0);}
.brot-bar-wrap{height:4px;background:var(--p4);border-radius:1px;overflow:hidden;}
/* --p2, not --p1: eleven mid-phosphor bars stacked read as a wall of green lines. */
.brot-bar{height:100%;border-radius:1px;transition:width .5s ease;}
.brot-bar.up{background:var(--p2);}
.brot-bar.dn{background:var(--red);opacity:.55;}
.brot-val{font-size:10px;text-align:right;}
.brot-val.up{color:var(--p0);}
.brot-val.dn{color:var(--red);}
.brot-novdict{font-size:10px;color:var(--p2d);text-align:center;}
/* "?" affordance + the help block it toggles */
.brot-q{width:15px;height:15px;line-height:13px;text-align:center;border:1px solid var(--p3);
  color:var(--p2);font-size:10px;border-radius:50%;cursor:pointer;flex:none;user-select:none;}
.brot-q:hover{color:var(--p0);border-color:var(--p2);}
/* No max-width of its own — the tab's 1280px measure already bounds it, and a
   narrower block left half the panel empty beside an expanded rationale. */
.brot-help{display:none;font-size:13px;color:var(--p2);line-height:1.65;
  margin:6px 10px 0;padding:8px 11px;border-left:2px solid var(--p3);background:rgba(0,60,16,.13);}
.brot-help b{color:var(--p1);font-weight:400;}
/* Outlook prose — collapsed by default; the row toggles .brot-open. Keeping it
   folded is the whole point of the merge, 11 paragraphs is what made this tall. */
.brot-clickable{cursor:pointer;}
.brot-clickable:hover .brot-etf{text-shadow:0 0 5px var(--p0);}
.brot-outlook{display:none;font-size:11px;color:var(--p2);line-height:1.5;padding:3px 0 5px 44px;border-bottom:1px solid var(--p4);}
.brot-row.brot-open + .brot-outlook{display:block;}
/* Mobile intel card copy — the card's rows carry their own 14px gutter
   (.mic-signal-row, .mic-trade-row), so match it instead of running edge-to-edge.
   Rows are tappable, so they also take the card's 40px min-height touch target
   and its 13px ticker size rather than the desktop column's tighter scale. */
#mic-rotation .brot-row{padding-left:14px;padding-right:14px;min-height:40px;max-width:none;}
#mic-rotation .brot-etf{font-size:13px;}
#mic-rotation .brot-val{font-size:11px;}
#mic-rotation .brot-outlook{padding-left:58px;padding-right:14px;font-size:12px;}
#mobile-intel-card .brot-help{margin:2px 14px 4px;max-width:none;font-size:13px;}
#mobile-intel-card .mic-section-lbl{display:flex;align-items:center;gap:7px;}

/* Scorecard expandable reason */
.score-row{cursor:pointer;}
.sc-reason-crt{
  display:none;font-size:10px;color:var(--p2);line-height:1.5;
  padding:4px 0 5px 10px;border-bottom:1px solid var(--p4);
}
.score-row.sc-open + .sc-reason-crt{display:block;}

/* ── CYCLE VIEW ─────────────────────────────────────────────────── */
#cycle-phase-strip{
  display:grid;
  grid-template-columns:1fr 22px 1fr 22px 1fr 22px 1fr;
  align-items:stretch;padding:8px 12px;
  border-bottom:1px solid var(--p4);
  flex-shrink:0;background:var(--bg2);gap:0;
}
.cph-arrow{
  display:flex;align-items:center;justify-content:center;
  color:var(--p2d);font-size:10px;letter-spacing:-.1em;
}
.cph-item{
  padding:7px 10px;border:1px solid var(--p4);
  cursor:default;transition:border-color .2s,background .2s;
}
.cph-item.active{border-color:var(--p1);background:rgba(0,200,50,.04);}
.cph-num{font-size:18px;font-weight:700;color:var(--p2d);letter-spacing:.04em;line-height:1;}
.cph-item.active .cph-num{color:var(--p0);text-shadow:0 0 10px var(--p0);}
.cph-name{font-size:11px;font-weight:700;color:var(--p2);letter-spacing:.1em;margin:3px 0 2px;text-transform:uppercase;}
.cph-item.active .cph-name{color:var(--p1);}
.cph-desc{font-size:11px;color:var(--p2);letter-spacing:.03em;}
.cph-item.active .cph-desc{color:var(--p1);}

#cycle-body{
  display:grid;grid-template-columns:1fr 260px;
  gap:0;border-bottom:1px solid var(--p4);
  flex:0 0 auto;max-height:44%;overflow:hidden;
}
#cycle-narrative{padding:10px 12px;overflow-y:auto;border-right:1px solid var(--p4);}
#cycle-chips-panel{padding:10px 12px;overflow-y:auto;}
#cycle-narrative::-webkit-scrollbar,#cycle-chips-panel::-webkit-scrollbar{width:2px;}
#cycle-narrative::-webkit-scrollbar-thumb,#cycle-chips-panel::-webkit-scrollbar-thumb{background:var(--p3);}

.cc-section-hd{
  font-size:11px;letter-spacing:.12em;color:var(--p0);text-shadow:0 0 6px var(--p0);
  text-transform:uppercase;padding-bottom:6px;border-bottom:1px solid var(--p4);
  margin-bottom:8px;
}
.cc-group{margin-bottom:10px;}
.cc-group-label{font-size:11px;letter-spacing:.1em;color:var(--p2);margin-bottom:5px;text-transform:uppercase;}
.cc-chips{display:flex;flex-wrap:wrap;gap:4px;}
.cc-chip{font-size:10px;padding:2px 8px;border:1px solid;cursor:default;letter-spacing:.05em;font-weight:700;}
.cc-chip.fav{border-color:var(--p1);color:var(--p1);}
.cc-chip.neu{border-color:var(--p3);color:var(--p2);}
.cc-chip.avoid{border-color:rgba(255,51,0,.45);color:var(--red);opacity:.85;}

#cycle-preds{flex:1;display:grid;grid-template-columns:480px 1fr;min-height:0;overflow:hidden;border-top:1px solid var(--p4);}
#cycle-pred-table{display:flex;flex-direction:column;overflow-y:auto;border-right:1px solid var(--p4);}
#cycle-pred-table::-webkit-scrollbar{width:2px;}
#cycle-pred-table::-webkit-scrollbar-thumb{background:var(--p3);}
#cycle-pred-detail{overflow-y:auto;padding:14px 16px;font-size:14px;color:var(--p2);line-height:1.65;}
#cycle-pred-detail::-webkit-scrollbar{width:2px;}
#cycle-pred-detail::-webkit-scrollbar-thumb{background:var(--p3);}
#cycle-pred-detail .cp-detail-empty{color:var(--p2d);font-size:12px;letter-spacing:.06em;padding-top:4px;}
.cp-hd{
  display:grid;grid-template-columns:56px 90px 130px 1fr 90px;
  font-size:10px;letter-spacing:.1em;color:var(--p2);
  padding:6px 12px;border-bottom:1px solid var(--p4);
  background:var(--bg2);position:sticky;top:0;z-index:1;
  text-transform:uppercase;
}
.cp-row{
  display:grid;grid-template-columns:56px 90px 130px 1fr 90px;
  align-items:center;padding:8px 12px;
  border-bottom:1px solid var(--p4);cursor:pointer;
  transition:background .1s;
}
.cp-row:hover{background:rgba(0,255,65,.025);}
.cp-row.active{background:rgba(0,255,65,.05);border-left:2px solid var(--p0);}
.cp-etf{font-size:15px;font-weight:700;color:var(--p0);}
.cp-outlook{font-size:13px;font-weight:700;letter-spacing:.07em;}
.cp-outlook.ol-bull{color:var(--p1);}
.cp-outlook.ol-bear{color:var(--red);}
.cp-outlook.ol-caut{color:var(--amber);}
.cp-outlook.ol-neut{color:var(--p2);}
.cp-bias{font-size:13px;font-weight:600;color:var(--p2);letter-spacing:.03em;text-transform:uppercase;}
.cp-align{font-size:13px;color:var(--p2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding-right:6px;}
.cp-grade{font-size:11px;padding:2px 6px;border:1px solid;letter-spacing:.05em;white-space:nowrap;align-self:center;}
.cp-grade.correct{color:var(--p0);border-color:var(--p0);background:rgba(0,255,65,.07);}
.cp-grade.incorrect{color:var(--red);border-color:var(--red);background:rgba(255,34,34,.07);}
.cp-grade.pending{color:var(--p2d);border-color:var(--p4);}
.cp-grade.ng{color:var(--p2d);border-color:var(--p4);}
.cp-detail{
  display:none;padding:6px 10px 8px 52px;
  border-bottom:1px solid var(--p4);
  font-size:12px;color:var(--p2);line-height:1.6;
  background:rgba(0,255,65,.01);
}
.cp-detail.open{display:block;}
.cp-earn{color:var(--p1);margin-bottom:4px;font-size:11px;letter-spacing:.04em;}
.sig-bull{color:var(--p0);}
.sig-bear{color:var(--red);}
.sig-caut{color:var(--amber);}
.sig-neut{color:var(--p2);}
.cp-chips{display:flex;flex-wrap:wrap;gap:5px;margin-bottom:6px;}
.cp-chip{font-size:10px;padding:1px 6px;border:1px solid currentColor;letter-spacing:.04em;opacity:.85;}

/* ── PAST BRIEFS tab ─────────────────────────────────────────────── */
#pb-topbar{
  display:flex;justify-content:space-between;align-items:center;
  padding:5px 12px;border-bottom:1px solid var(--p4);
  background:var(--bg2);flex-shrink:0;gap:12px;
}
#pb-body{
  display:grid;grid-template-columns:170px 1fr;
  flex:1;overflow:hidden;min-height:0;
}
#pb-sidebar{border-right:1px solid var(--p4);overflow-y:auto;flex-shrink:0;}
#pb-sidebar::-webkit-scrollbar{width:2px;}
#pb-sidebar::-webkit-scrollbar-thumb{background:var(--p3);}
#pb-content{overflow-y:auto;padding:12px 14px;}
#pb-content::-webkit-scrollbar{width:2px;}
#pb-content::-webkit-scrollbar-thumb{background:var(--p3);}
.pb-day-btn{
  display:block;width:100%;padding:6px 10px;text-align:left;
  border:none;border-bottom:1px solid var(--p4);background:none;
  cursor:pointer;font-family:var(--mono);transition:background .1s;
}
.pb-day-btn:hover{background:rgba(0,255,65,.02);}
.pb-day-btn.active{background:rgba(0,255,65,.04);border-left:2px solid var(--p1);}
.pb-day-date{font-size:10px;font-weight:600;color:var(--p1);letter-spacing:.06em;}
.pb-day-btn.active .pb-day-date{color:var(--p0);}
.pb-day-sub{display:flex;gap:4px;margin-top:2px;align-items:center;flex-wrap:wrap;}
.pb-chip{font-size:11px;padding:1px 5px;border:1px solid;letter-spacing:.06em;font-weight:700;}
.pb-chip.pre{border-color:var(--p1);color:var(--p1);}
.pb-chip.post{border-color:var(--amber);color:var(--amber);}
.pb-chip.manual{border-color:var(--p3);color:var(--p2);}
.pb-hd{
  padding-bottom:10px;border-bottom:1px solid var(--p4);margin-bottom:12px;
}
.pb-hd-date{font-size:13px;font-weight:700;color:var(--p0);letter-spacing:.08em;text-transform:uppercase;text-shadow:0 0 6px var(--p0);}
.pb-hd-meta{font-size:10px;color:var(--p2);margin-top:3px;letter-spacing:.04em;display:flex;align-items:center;flex-wrap:wrap;gap:6px;}

/* ── TRACK RECORD tab ───────────────────────────────────────────── */
#tr-topbar{
  display:flex;justify-content:space-between;align-items:center;
  padding:5px 12px;border-bottom:1px solid var(--p4);
  background:var(--bg2);flex-shrink:0;
}
#tr-kpi-strip{
  display:grid;grid-template-columns:repeat(4,1fr);
  border-bottom:1px solid var(--p4);flex-shrink:0;
}
/* Was inline on the element, which put it out of reach of every breakpoint below. */
#tr-pk-kpi{
  display:grid;grid-template-columns:repeat(5,1fr);gap:6px;margin:8px 0 14px;
}
.tr-kpi{
  padding:10px 14px;border-right:1px solid var(--p4);
  display:flex;flex-direction:column;gap:2px;
}
.tr-kpi:last-child{border-right:none;}
.tr-kpi-val{font-size:22px;font-weight:700;color:var(--p0);text-shadow:0 0 8px var(--p0);letter-spacing:.04em;}
.tr-kpi-val.warn{color:var(--amber);text-shadow:0 0 8px var(--amber);}
.tr-kpi-val.bad{color:var(--red);text-shadow:0 0 6px var(--red);}
/* No-verdict shade: the figure is real but not yet distinguishable from chance,
   so it must read as neither a pass nor a fail. Without this the default bright
   primary makes every unjudged rate look like a win. */
.tr-kpi-val.nov{color:var(--p2d);text-shadow:none;}
.tr-kpi-lbl{font-size:11px;letter-spacing:.1em;color:var(--p2);text-transform:uppercase;}

#tr-grade-bar{border-bottom:1px solid var(--p4);padding:8px 14px;display:flex;align-items:center;gap:14px;flex-shrink:0;}
#tr-grade-verdict{font-size:13px;letter-spacing:.18em;text-transform:uppercase;font-weight:700;}
#tr-grade-sub{font-size:10px;color:var(--p2d);letter-spacing:.04em;}
.tr-panel-sub{font-size:10px;color:var(--p2);letter-spacing:.04em;margin-top:-4px;margin-bottom:8px;}
#tr-cal-strip{border-bottom:1px solid var(--p4);padding:8px 12px;}
#tr-analytics{
  display:grid;grid-template-columns:1fr 1fr;
  border-bottom:1px solid var(--p4);
  align-items:stretch;
}
#tr-sector-rates{border-right:1px solid var(--p4);overflow-y:auto;padding:8px 12px;}
#tr-calibration{border-right:1px solid var(--p4);overflow-y:auto;padding:8px 12px;}
#tr-sector-rates::-webkit-scrollbar,#tr-calibration::-webkit-scrollbar{width:2px;}
#tr-sector-rates::-webkit-scrollbar-thumb,#tr-calibration::-webkit-scrollbar-thumb{background:var(--p3);}

.tr-panel-hd{
  font-size:12px;letter-spacing:.12em;color:var(--p0);text-shadow:0 0 5px var(--p0);
  text-transform:uppercase;padding-bottom:6px;border-bottom:1px solid var(--p4);
  margin-bottom:7px;
}
.tr-win-row{
  display:grid;grid-template-columns:52px 150px 40px auto 1fr;
  align-items:center;gap:4px;padding:3px 0;border-bottom:1px solid var(--p4);
}
.tr-win-etf{font-size:12px;font-weight:700;color:var(--p1);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.tr-win-bar-wrap,.tr-cc-bar-wrap{height:7px;background:var(--p4);border-radius:2px;overflow:visible;position:relative;}
/* benchmark markers: 50% = coin flip, 65% = real edge — make them legible, not decorative */
.tr-win-bar-wrap::before,.tr-cc-bar-wrap::before{content:'';position:absolute;top:-3px;height:13px;width:1px;left:50%;background:rgba(255,255,255,.32);z-index:2;pointer-events:none;}
.tr-win-bar-wrap::after,.tr-cc-bar-wrap::after{content:'';position:absolute;top:-2px;height:11px;width:1px;left:65%;background:rgba(0,220,60,.55);box-shadow:0 0 4px rgba(0,220,60,.5);z-index:2;pointer-events:none;}
.tr-win-bar,.tr-cc-bar{height:100%;border-radius:2px;transition:width .5s ease;overflow:hidden;}
/* plain-English read at the top of each panel */
.tr-takeaway{font-size:11px;color:var(--p1);letter-spacing:.01em;line-height:1.5;margin:0 0 9px;padding:6px 9px;background:rgba(0,200,50,.06);border-left:2px solid var(--p2);border-radius:2px;}
.tr-takeaway b{color:var(--p0);font-weight:700;}
.tr-takeaway .mut{color:var(--p2d);}
/* one-time legend decoding the bars */
.tr-bar-legend{display:flex;flex-wrap:wrap;gap:16px;align-items:center;font-size:10px;color:var(--p2d);letter-spacing:.04em;padding:7px 12px;border-bottom:1px solid var(--p4);}
.tr-bar-legend .lg{display:flex;align-items:center;gap:5px;}
.tr-bar-legend .ln{display:inline-block;width:2px;height:12px;}
.tr-bar-legend .sw{display:inline-block;width:14px;height:6px;border-radius:2px;}
.tr-win-pct{font-size:12px;text-align:right;font-weight:700;text-shadow:0 0 5px currentColor;}
.tr-win-n{font-size:11px;color:var(--p2);}
/* right-pinned secondary readout — fills the wide-panel gutter with real stats */
.tr-rail{justify-self:end;text-align:right;font-size:11px;color:var(--p2);white-space:nowrap;letter-spacing:.02em;overflow:hidden;}
.tr-rail .spk{font-family:var(--mono);letter-spacing:.14em;font-size:13px;}
.tr-rail .rl-mut{color:var(--p2d);font-size:9px;letter-spacing:.04em;}
.tr-cc-row{
  display:grid;grid-template-columns:96px 150px 40px auto 1fr;
  align-items:center;gap:4px;padding:3px 0;border-bottom:1px solid var(--p4);
}
.tr-cc-lbl{font-size:12px;color:var(--p2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.tr-cc-pct{font-size:12px;text-align:right;font-weight:700;text-shadow:0 0 5px currentColor;}
.tr-cc-n{font-size:11px;color:var(--p2);}

#tr-analytics-2{
  display:grid;grid-template-columns:1fr 1fr;
  border-bottom:1px solid var(--p4);
  align-items:start;
}
#tr-trend-panel{padding:8px 12px;}
#tr-regime-rates{padding:8px 12px;border-top:1px solid var(--p4);}
.tr-rg-row{display:grid;grid-template-columns:100px 150px 44px auto 1fr;align-items:center;gap:6px;padding:3px 0;border-bottom:1px solid var(--p4);}
.tr-rg-lbl{font-size:12px;color:var(--p1);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
#tr-rg-body{display:grid;grid-template-columns:1fr 1fr;column-gap:28px;}
.tr-pk-cols{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
#tr-verdict-dist{padding:8px 12px;}
.tr-vd-row{
  display:grid;grid-template-columns:52px 150px 40px auto 1fr;
  align-items:center;gap:4px;padding:3px 0;border-bottom:1px solid var(--p4);
}
.tr-vd-row:last-child{border-bottom:none;}
.tr-vd-lbl{font-size:12px;color:var(--p2);}
.tr-vd-tot{font-size:11px;color:var(--p2);text-align:right;}
.tr-cal-grid{display:flex;flex-wrap:wrap;gap:3px;margin-top:6px;}
.tr-cal-cell{
  width:22px;height:22px;border:1px solid var(--p4);
  display:flex;align-items:center;justify-content:center;
  font-size:11px;color:var(--p2);cursor:default;position:relative;
}
.tr-cal-cell.strong{background:rgba(0,200,50,.18);border-color:var(--p1);color:var(--p1);}
.tr-cal-cell.weak{background:rgba(255,176,0,.10);border-color:var(--amber);color:var(--amber);}
.tr-cal-cell.incorrect{background:rgba(255,51,0,.10);border-color:rgba(255,51,0,.4);color:var(--red);}
.tr-cal-cell.pending{border-color:var(--p3);color:var(--p2);}
.tr-cal-legend{display:flex;gap:12px;margin-top:5px;flex-wrap:wrap;}
.tr-cal-leg-item{display:flex;align-items:center;gap:4px;font-size:11px;color:var(--p2);}
.tr-cal-leg-swatch{width:10px;height:10px;border:1px solid;}

/* Track Record: HISTORY two-column layout */
#tr-view-h{display:grid;grid-template-columns:280px 1fr;grid-template-rows:1fr;}
#tr-left-col{
  display:flex;flex-direction:column;min-height:0;overflow:hidden;
  border-right:1px solid var(--p4);
}
#tr-right-col{
  display:flex;flex-direction:column;min-height:0;overflow:hidden;
}

/* Bias panel: lives inside left col, shown only when populated */
#tr-mid-row{display:contents;} /* neutralised — children placed by new layout */
#tr-bias-panel{
  display:none;flex-shrink:0;padding:8px 12px;
  border-bottom:1px solid var(--p4);
}
.tr-bias-flag-hd{
  font-size:11px;color:var(--amber);letter-spacing:.1em;text-transform:uppercase;
  margin-bottom:5px;
}
.tr-bias-item{
  font-size:10px;color:var(--p2);padding:4px 0;
  border-bottom:1px solid var(--p4);line-height:1.5;
}
.tr-bias-item:last-child{border-bottom:none;}
.tr-bias-sector{font-size:10px;color:var(--p1);font-weight:700;margin-bottom:2px;}

/* Pending panel: fills remaining left-col height */
#tr-pending-panel{flex:1;padding:8px 12px;overflow-y:auto;min-height:0;}
#tr-pending-panel::-webkit-scrollbar{width:2px;}
#tr-pending-panel::-webkit-scrollbar-thumb{background:var(--p3);}
.tr-pending-row{
  display:grid;grid-template-columns:36px 1fr auto;
  align-items:start;gap:3px;padding:4px 0;
  border-bottom:1px solid var(--p4);font-size:10px;
}
.tr-pending-row:last-child{border-bottom:none;}
.tr-pending-etf{font-weight:700;color:var(--p1);line-height:1.4;}
.tr-pending-date{color:var(--p2);}
.tr-pending-verdict{color:var(--p0);font-weight:700;text-align:right;}
.tr-pending-hz{color:var(--p2d);font-size:10px;grid-column:2/-1;}

/* Filters: top of right col */
#tr-filters{
  display:none;padding:5px 12px;border-bottom:1px solid var(--p4);
  background:var(--bg2);flex-shrink:0;
  align-items:center;gap:8px;flex-wrap:wrap;
}
.tr-filter-sel{
  font-family:var(--mono);font-size:11px;letter-spacing:.06em;
  background:var(--bg);border:1px solid var(--p3);color:var(--p2);
  padding:2px 6px;cursor:pointer;
}
.tr-filter-sel:focus{outline:none;border-color:var(--p1);}
.tr-filter-sel option{background:var(--bg);color:var(--p1);}
.tr-filter-lbl{font-size:11px;color:var(--p2);letter-spacing:.1em;text-transform:uppercase;}
#tr-f-count{font-size:11px;color:var(--p2);margin-left:auto;}

/* Cards wrap: scrollable right-col history */
#tr-cards-wrap{flex:1;overflow-y:auto;padding:0;}
#tr-cards-wrap::-webkit-scrollbar{width:2px;}
#tr-cards-wrap::-webkit-scrollbar-thumb{background:var(--p3);}

/* Compact table-row day cards */
.tr-card{border-bottom:1px solid var(--p4);margin-bottom:0;}
.tr-card-hd{
  display:grid;
  grid-template-columns:72px auto 1fr 34px 72px 36px;
  align-items:center;gap:6px;padding:5px 10px;
  cursor:pointer;background:var(--bg2);
}
.tr-card-hd:hover{background:rgba(0,255,65,.03);}
.tr-card-date{font-size:11px;font-weight:700;color:var(--p0);white-space:nowrap;}
.tr-card-regime{font-size:10px;color:var(--p2);white-space:nowrap;max-width:160px;overflow:hidden;text-overflow:ellipsis;}
.tr-card-badge{font-size:10px;padding:1px 5px;border:1px solid;letter-spacing:.06em;font-weight:700;white-space:nowrap;}
.tr-card-badge.strong{border-color:var(--p1);color:var(--p1);}
.tr-card-badge.weak{border-color:var(--amber);color:var(--amber);}
.tr-card-badge.incorrect{border-color:var(--red);color:var(--red);}
.tr-card-badge.pending{border-color:var(--p3);color:var(--p2);}
/* Inline outcome dots strip — fills the 1fr column */
.tr-card-dots{display:flex;gap:3px;align-items:center;flex-wrap:wrap;}
.tr-dot{
  width:7px;height:7px;border:1px solid;
  display:inline-block;flex-shrink:0;
}
.tr-dot.sc{background:rgba(0,200,50,.35);border-color:var(--p1);}
.tr-dot.wc{background:rgba(255,176,0,.25);border-color:var(--amber);}
.tr-dot.ic{background:rgba(255,51,0,.25);border-color:var(--red);}
.tr-dot.pend{background:transparent;border-color:var(--p3);}
/* Expanded detail */
.tr-card-body{display:none;padding:6px 10px;border-top:1px solid var(--p4);background:var(--bg);}
.tr-card-body.open{display:block;}
.tr-call-row{
  display:grid;grid-template-columns:40px 56px 1fr 56px;
  align-items:center;gap:4px;padding:3px 0;
  border-bottom:1px solid var(--p4);font-size:11px;
}
.tr-call-row:last-child{border-bottom:none;}
.tr-call-etf{font-weight:700;color:var(--p1);}
.tr-call-vdict{color:var(--p2);}
.tr-call-outcome.sc{color:var(--p1);}
.tr-call-outcome.wc{color:var(--amber);}
.tr-call-outcome.ic{color:var(--red);}
.tr-call-outcome.pend{color:var(--p2d);}

/* ── EXIT PLANNER tab ───────────────────────────────────────────── */
#exit-topbar{
  display:flex;justify-content:space-between;align-items:center;
  padding:5px 12px;border-bottom:1px solid var(--p4);
  background:var(--bg2);flex-shrink:0;
}
#exit-kpi-strip{
  display:grid;grid-template-columns:repeat(4,1fr);
  border-bottom:1px solid var(--p4);flex-shrink:0;
}
.exit-kpi{
  padding:8px 14px;border-right:1px solid var(--p4);
  display:flex;flex-direction:column;gap:2px;
}
.exit-kpi:last-child{border-right:none;}
.exit-kpi-val{font-size:18px;font-weight:700;color:var(--p1);letter-spacing:.04em;}
.exit-kpi-lbl{font-size:11px;letter-spacing:.1em;color:var(--p2);text-transform:uppercase;}

#exit-form-bar{
  display:flex;align-items:center;gap:8px;
  padding:7px 12px;border-bottom:1px solid var(--p4);
  background:var(--bg2);flex-shrink:0;flex-wrap:wrap;
}
.exit-inp-label{font-size:11px;letter-spacing:.1em;color:var(--p2);}
.exit-inp{
  background:var(--bg);border:1px solid var(--p3);color:var(--p0);
  font-family:var(--mono);font-size:11px;padding:3px 7px;width:80px;
  outline:none;letter-spacing:.06em;
}
.exit-inp:focus{border-color:var(--p1);box-shadow:0 0 6px rgba(0,200,50,.15);}
.exit-inp::placeholder{color:var(--p2d);}
.exit-inp-ticker{text-transform:uppercase;width:60px;}
.exit-add-btn{
  background:var(--p3);border:1px solid var(--p1);color:var(--p0);
  font-family:var(--mono);font-size:10px;padding:4px 12px;
  cursor:pointer;letter-spacing:.08em;font-weight:600;
  transition:background .15s;
}
.exit-add-btn:hover{background:rgba(0,200,50,.12);}
#exit-err{font-size:11px;color:var(--red);letter-spacing:.04em;display:none;}

#exit-positions-wrap{flex:1;overflow-y:auto;padding:0;}
#exit-positions-wrap::-webkit-scrollbar{width:2px;}
#exit-positions-wrap::-webkit-scrollbar-thumb{background:var(--p3);}

.ep-card{border-bottom:1px solid var(--p4);}
.ep-card-hd{
  display:grid;grid-template-columns:60px 1fr 70px 70px auto 30px;
  align-items:center;gap:8px;padding:7px 12px;
  cursor:pointer;background:var(--bg2);transition:background .1s;
}
.ep-card-hd:hover{background:rgba(0,255,65,.02);}
.ep-ticker{font-size:13px;font-weight:700;color:var(--p0);letter-spacing:.06em;}
.ep-price-line{display:flex;flex-direction:column;gap:1px;}
.ep-price{font-size:11px;font-weight:600;color:var(--p1);}
.ep-pnl{font-size:11px;font-weight:700;}
.ep-rsi{font-size:10px;color:var(--p2);text-align:right;}
.ep-sig-badge{font-size:11px;padding:2px 6px;border:1px solid;letter-spacing:.06em;font-weight:700;text-align:center;}
.ep-sig-badge.hold{border-color:var(--p3);color:var(--p2);}
.ep-sig-badge.trim{border-color:var(--amber);color:var(--amber);}
.ep-sig-badge.exit{border-color:var(--red);color:var(--red);text-shadow:0 0 4px var(--red);}
.ep-remove{background:none;border:none;color:var(--p2d);cursor:pointer;font-size:12px;padding:2px;font-family:var(--mono);}
.ep-remove:hover{color:var(--red);}

.ep-body{display:none;padding:8px 12px;border-top:1px solid var(--p4);background:rgba(0,255,65,.01);}
.ep-body.open{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
.ep-zone-wrap{position:relative;height:10px;border-radius:1px;overflow:hidden;background:var(--bg3);margin:8px 0 4px;}
.ep-zone-stop{position:absolute;left:0;height:100%;background:rgba(255,50,50,.35);}
.ep-zone-hold{position:absolute;height:100%;background:rgba(0,255,65,.08);}
.ep-zone-target{position:absolute;right:0;height:100%;background:rgba(0,255,65,.28);}
.ep-zone-marker{position:absolute;top:-1px;height:12px;width:2px;background:var(--p0);border-radius:1px;box-shadow:0 0 6px var(--p0);}
.ep-zone-labels{display:flex;justify-content:space-between;font-size:11px;color:var(--p2);letter-spacing:.04em;margin-bottom:6px;}
.ep-col-hd{font-size:11px;letter-spacing:.1em;color:var(--p0);text-shadow:0 0 5px var(--p0);text-transform:uppercase;margin-bottom:6px;padding-bottom:4px;border-bottom:1px solid var(--p4);}
.ep-level-row{display:flex;justify-content:space-between;align-items:center;padding:3px 0;border-bottom:1px solid var(--p4);font-size:11px;}
.ep-level-lbl{color:var(--p2);}
.ep-level-val{font-weight:700;}
.ep-level-row.stop .ep-level-val{color:var(--red);}
.ep-level-row.t1 .ep-level-val{color:var(--amber);}
.ep-level-row.t2 .ep-level-val{color:var(--p1);}
.ep-level-row.current .ep-level-val{color:var(--p0);}
.ep-rule{display:flex;gap:6px;padding:3px 0;font-size:11px;color:var(--p2);line-height:1.4;}
.ep-rule-icon{flex-shrink:0;font-size:11px;min-width:14px;}
.ep-rule-icon.stop{color:var(--red);}
.ep-rule-icon.trim{color:var(--amber);}
.ep-rule-icon.hold{color:var(--p2);}
.ep-thesis{font-size:11px;color:var(--p2);line-height:1.5;margin-top:8px;padding-top:6px;border-top:1px solid var(--p4);}

/* ── AUTOPILOT tab ──────────────────────────────────────────────── */
#ap-topbar{
  display:flex;justify-content:space-between;align-items:center;
  padding:5px 12px;border-bottom:1px solid var(--p4);
  background:var(--bg2);flex-shrink:0;gap:10px;flex-wrap:wrap;
}
#ap-entry-progress{
  display:none;padding:5px 12px;border-bottom:1px solid var(--p4);
  background:var(--bg2);flex-shrink:0;
}
.ap-steps{display:flex;align-items:center;gap:4px;font-size:12px;}
.ap-step{color:var(--p2d);letter-spacing:.06em;transition:color .2s;}
.ap-step.active{color:var(--p1);text-shadow:0 0 4px var(--p1);}
.ap-step.done{color:var(--p2d);text-decoration:line-through;}
.ap-step-sep{color:var(--p2d);margin:0 2px;}
#ap-entry-detail{font-size:12px;color:var(--p2);margin-top:3px;letter-spacing:.04em;}
#ap-kpi-strip{
  display:grid;grid-template-columns:repeat(7,1fr);
  border-bottom:1px solid var(--p4);flex-shrink:0;
}
.ap-kpi{
  padding:7px 12px;border-right:1px solid var(--p4);
  display:flex;flex-direction:column;gap:2px;
}
.ap-kpi:last-child{border-right:none;}
.ap-kpi-val{font-size:15px;font-weight:700;color:var(--p1);letter-spacing:.04em;}
.ap-kpi-val.pos{color:var(--p0);text-shadow:0 0 6px var(--p0);}
.ap-kpi-val.neg{color:var(--red);}
.ap-kpi-val.active{color:var(--p0);text-shadow:0 0 6px var(--p0);}
.ap-kpi-val.dead{color:var(--red);}
.ap-kpi-lbl{font-size:11px;letter-spacing:.1em;color:var(--p2);text-transform:uppercase;}

/* Jump from a book row to that instrument's chart. 9px and dim by default, the
   same weight as the saved-chart control — it sits inside a dense table and
   should read as available, not compete with the ticker it hangs off. */
.ap-chart-link{
  font-size:9px;letter-spacing:.08em;color:var(--p2d);
  margin-left:7px;cursor:pointer;vertical-align:middle;
}
.ap-chart-link:hover{color:var(--amber);text-shadow:0 0 5px var(--amber);}

#ap-chart-section{
  padding:8px 12px 10px;border-bottom:1px solid var(--p4);flex-shrink:0;
}
#ap-chart-head{
  display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:6px;
}
.ap-chart-titlewrap{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;}
.ap-chart-title{font-size:11px;letter-spacing:.1em;color:var(--p2);text-transform:uppercase;}
#ap-chart-stat{font-size:13px;font-weight:700;letter-spacing:.03em;color:var(--p1);}
#ap-chart-wrap{height:150px;width:100%;position:relative;cursor:crosshair;touch-action:pan-y;}
#ap-chart-wrap svg{display:block;width:100%;height:100%;}
.ap-chart-empty{
  display:flex;align-items:center;justify-content:center;height:100%;
  font-size:11px;color:var(--p2);letter-spacing:.04em;cursor:default;
}
.ap-cross-line{position:absolute;top:0;bottom:0;width:1px;background:var(--p3);opacity:.55;pointer-events:none;display:none;transform:translateX(-0.5px);}
.ap-cross-dot{position:absolute;width:7px;height:7px;border-radius:50%;pointer-events:none;display:none;transform:translate(-50%,-50%);}
.ap-cross-tip{position:absolute;top:2px;pointer-events:none;display:none;background:var(--bg1);border:1px solid var(--p4);border-radius:3px;padding:3px 7px;font-size:11px;line-height:1.35;white-space:nowrap;z-index:5;}
.ap-tip-val{font-weight:700;color:var(--p1);}
.ap-tip-chg{margin-left:6px;}
.ap-tip-date{display:block;color:var(--p2);font-size:10px;letter-spacing:.04em;margin-top:1px;}

#ap-commentary-section{
  padding:8px 12px;border-bottom:1px solid var(--p4);
  flex-shrink:0;
}
#ap-commentary-text{font-size:13px;color:var(--p1);line-height:1.6;letter-spacing:.02em;}
#ap-commentary-ts{font-size:11px;color:var(--p2);margin-top:4px;}
#ap-learn-strip{
  display:flex;flex-wrap:wrap;gap:10px;padding:5px 12px;
  border-bottom:1px solid var(--p4);flex-shrink:0;font-size:12px;
}
.ap-learn-stat{color:var(--p2);letter-spacing:.04em;}
.ap-learn-stat strong{color:var(--p1);}
.ap-learn-warn strong{color:var(--amber);}

#ap-body{flex:1;overflow-y:auto;min-height:0;}
#ap-body::-webkit-scrollbar{width:2px;}
#ap-body::-webkit-scrollbar-thumb{background:var(--p3);}
/* Short desktop viewports: the pinned sections (topbar/KPIs/chart/commentary)
   alone can exceed the pane height, crushing #ap-body to 0 and leaving nothing
   scrollable. Below that point, let the whole pane scroll naturally instead —
   same model the phone breakpoint uses for .pane. */
@media (max-height:820px){
  #pane-autopilot.on{overflow-y:auto;}
  #ap-body{flex:none;overflow:visible;min-height:auto;}
}

.ap-section-hd{
  font-size:11px;letter-spacing:.1em;color:var(--p0);text-shadow:0 0 5px var(--p0);
  text-transform:uppercase;padding:5px 12px;border-bottom:1px solid var(--p4);
  background:var(--bg2);position:sticky;top:0;z-index:1;
  display:flex;justify-content:space-between;align-items:center;
}
/* ── CALL SHEET (Trade Ideas) ─────────────────────────────────────────────
   Toggled by the CALL SHEET button. It takes the tab body over rather than
   stacking under the picks: "what did we call and how did it do" is a different
   question from "what should I trade today", and interleaving them invites
   reading an ungraded hypothetical as a live idea. */
#call-sheet-panel{display:none;flex:1;min-height:0;flex-direction:column;}
#pane-stocks.cs-open #stocks-trades-section,
#pane-stocks.cs-open .stocks-filter-bar,
#pane-stocks.cs-open #stocks-crt-grid{display:none !important;}
#pane-stocks.cs-open #call-sheet-panel{display:flex;}
#cs-toggle-btn.on{color:var(--amber);border-color:var(--amber);text-shadow:0 0 5px var(--amber);}
.cs-head{
  display:flex;align-items:baseline;justify-content:space-between;gap:10px;flex-wrap:wrap;
  padding:7px 12px;border-bottom:1px solid var(--p4);background:var(--bg2);flex-shrink:0;
}
.cs-title{font-size:11px;letter-spacing:.12em;color:var(--amber);text-shadow:0 0 6px var(--amber);}
.cs-sub{font-size:10px;color:var(--p2d);letter-spacing:.04em;margin-left:8px;}
.cs-summary{font-size:10px;color:var(--p2);letter-spacing:.07em;}
.cs-filter-bar{
  display:flex;align-items:center;gap:8px;
  padding:6px 12px;border-bottom:1px solid var(--p4);flex-shrink:0;flex-wrap:wrap;
}
/* Native date input, collapsed to just its calendar icon — the mm/dd/yyyy
   placeholder is noise next to four short range buttons, and the selected date is
   shown on the CLEAR chip instead. color-scheme:dark is what makes the browser's
   own calendar popup render dark rather than a white sheet over a black page. */
.cs-date{
  color-scheme:dark;
  width:22px;padding:2px;border:1px solid var(--p3);background:transparent;
  color:transparent;cursor:pointer;font-family:var(--mono);
}
.cs-date:hover,.cs-date:focus{border-color:var(--p2);outline:none;}
/* The text half of the control. Hidden in WebKit/Blink outright; the transparent
   colour above is the fallback that covers Firefox, which exposes no such part. */
.cs-date::-webkit-datetime-edit,
.cs-date::-webkit-inner-spin-button,
.cs-date::-webkit-clear-button{display:none;-webkit-appearance:none;}
.cs-date::-webkit-calendar-picker-indicator{
  margin:0;padding:0;opacity:1;cursor:pointer;
  filter:invert(64%) sepia(97%) saturate(1200%) hue-rotate(78deg) brightness(95%);
}
.cs-date:hover::-webkit-calendar-picker-indicator{filter:invert(74%) sepia(99%) saturate(2000%) hue-rotate(78deg) brightness(115%);}
.cs-body{flex:1;overflow:auto;min-height:0;}
.cs-empty{padding:26px 16px;font-size:11px;color:var(--p2);letter-spacing:.05em;line-height:1.7;max-width:560px;}
.cs-table{width:100%;border-collapse:collapse;font-size:12px;}
.cs-table th{
  padding:5px 8px;text-align:left;font-size:10px;letter-spacing:.07em;
  color:var(--p2);border-bottom:1px solid var(--p4);font-weight:400;
  background:var(--bg2);position:sticky;top:0;z-index:1;cursor:pointer;white-space:nowrap;
}
.cs-table th:hover{color:var(--p0);}
.cs-table th.on{color:var(--amber);}
.cs-table td{padding:5px 8px;border-bottom:1px solid var(--p4);color:var(--p2);white-space:nowrap;}
.cs-table tr:hover td{background:rgba(0,255,65,.02);}
.cs-table td.up{color:var(--cyan);font-weight:700;}
.cs-table td.dn{color:var(--red);font-weight:700;}
/* Tickers here are links to the chart, and nothing else in the row is clickable —
   so they get amber and an underline rather than relying on a hover the user has
   to discover. */
.cs-tkr{
  color:var(--amber);font-weight:700;cursor:pointer;
  border-bottom:1px dotted var(--amber);
}
.cs-tkr:hover{text-shadow:0 0 7px var(--amber);border-bottom-style:solid;}
/* CALLED and SIGNAL are data, not decoration — they were on --p3, which this
   palette reserves for borders, and read as greyed-out at table size. */
.cs-dim{color:var(--p2);}
.cs-recon{
  font-size:8.5px;letter-spacing:.08em;color:var(--p2);border:1px solid var(--p3);
  padding:0 3px;border-radius:2px;vertical-align:middle;cursor:help;
}
.cs-state{font-size:10px;letter-spacing:.06em;font-weight:700;}
.cs-state.cs-live{color:var(--p1);}
.cs-state.up{color:var(--cyan);}
.cs-state.dn{color:var(--red);}
.cs-foot{padding:10px 12px 16px;font-size:10.5px;color:var(--p1);letter-spacing:.04em;line-height:1.6;}

/* ── OPEN TRADES (Trade Ideas → OPEN) ───────────────────────────────────────
   Cards rather than the call sheet's table on purpose: this view has to carry
   four levels, a live price and a position between them, and seven columns of
   that is unreadable on the phone this tab is mostly read on. The number line
   does the work a table would make you do arithmetic for. */
.ot-head{
  display:flex;flex-direction:column;gap:7px;
  padding:8px 14px 9px;border-bottom:1px solid var(--p4);
}
.ot-head-l{display:flex;justify-content:space-between;align-items:baseline;gap:10px;flex-wrap:wrap;}
.ot-head-t{font-size:11px;letter-spacing:.12em;color:var(--p0);text-shadow:0 0 5px var(--p0);}
.ot-head-s{font-size:10.5px;color:var(--p2);letter-spacing:.04em;}
/* State filter. The counts replaced the "11 working · 17 under pressure" line
   that used to sit here — same numbers, but now you can click them. */
.ot-chips{display:flex;gap:6px;flex-wrap:wrap;}
.ot-chip{
  background:none;border:1px solid var(--p3);color:var(--p2);font-family:inherit;
  font-size:9.5px;letter-spacing:.08em;padding:3px 7px;border-radius:2px;cursor:pointer;
  white-space:nowrap;
}
.ot-chip b{color:var(--p1);font-weight:400;}
.ot-chip:hover{border-color:var(--p2);color:var(--p1);}
.ot-chip.ot-win{color:var(--cyan);border-color:rgba(0,255,204,.35);}
.ot-chip.ot-warn{color:var(--amber);border-color:rgba(255,176,0,.35);}
.ot-chip.ot-loss{color:var(--red);border-color:rgba(240,38,38,.45);}
.ot-chip.on{background:rgba(0,255,65,.10);border-color:currentColor;color:var(--p0);}
.ot-chip.on b{color:var(--p0);}
.ot-chip.ot-win.on{background:rgba(0,255,204,.12);}
.ot-chip.ot-warn.on{background:rgba(255,176,0,.12);}
.ot-chip.ot-loss.on{background:rgba(240,38,38,.15);}
/* The running list is a WALL on a wide screen, one column on a phone. A single
   full-width column left most of a desktop page empty and made scanning for the
   handful of positions that need attention a long scroll — the same reason the
   charts tile rather than stack. 300px is the narrowest a card can be and still
   fit "STOP $1,234.56  ENTRY …  TARGET …" on one line. */
.ot-grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));
  gap:10px;padding:12px 14px;
  /* Each card sizes to its OWN content. Without this, grid stretches every item
     to the tallest in its row, so opening one card inflated its neighbours into
     empty boxes — which is what made full-row expansion look like the only
     option. It is not: cards can now grow in place. */
  align-items:start;
}
/* Cards are OBJECTS, not rows in a table. A 1px hairline on a shared background
   made 56 of them read as one continuous green field, which is the opposite of
   scannable. Real gaps, a real border, and a lifted ground separate them. */
.ot-card{
  padding:9px 11px 10px;background:var(--bg2);
  border:1px solid var(--p3);border-radius:2px;
  /* The state colour, as a spine. This is the fastest way to find the calls that
     need a decision — you see the clusters before you read a word. */
  border-left:3px solid var(--p3);
  display:flex;flex-direction:column;gap:6px;
}
.ot-card:hover{background:var(--bg3);border-color:var(--p2);}
/* A floor, so a resolved call — which has no live price and therefore no track —
   does not sit two thirds the height of everything around it. Only collapsed
   cards: an open one is supposed to be taller. */
.ot-card:not(.on){min-height:157px;justify-content:flex-start;}
.ot-card.s-win{border-left-color:var(--cyan);}
.ot-card.s-warn{border-left-color:var(--amber);}
.ot-card.s-loss{border-left-color:var(--red);}
.ot-card.s-flat{border-left-color:var(--p3);}
/* Expanding grows the card in place rather than seizing the whole row. The row
   below it shifts down; its neighbours keep their own height. */
.ot-card.on{background:var(--bg3);border-color:var(--p2);}
/* One line, always. Wrapping here was the main source of ragged card heights —
   a long signal name pushed the state word onto a second row and made that card
   16px taller than its neighbours. The meta is the part that gives way. */
.ot-top{display:flex;align-items:baseline;gap:8px;flex-wrap:nowrap;}
.ot-tkr{
  font-size:14px;letter-spacing:.06em;color:var(--amber);cursor:pointer;
  border-bottom:1px dotted var(--amber);
}
.ot-tkr:hover{text-shadow:0 0 7px var(--amber);border-bottom-style:solid;}
.ot-meta{
  font-size:10px;color:var(--p2);letter-spacing:.04em;flex:1;
  min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.ot-short{
  font-size:8.5px;letter-spacing:.1em;color:var(--red);border:1px solid var(--red);
  padding:0 3px;border-radius:2px;vertical-align:middle;
}
.ot-state{font-size:10.5px;letter-spacing:.09em;font-weight:700;white-space:nowrap;}
.ot-state.ot-win{color:var(--cyan);}
.ot-state.ot-flat{color:var(--p1);}
.ot-state.ot-warn{color:var(--amber);}
.ot-state.ot-loss{color:var(--red);text-shadow:0 0 4px var(--red);}
.ot-nums{display:flex;gap:8px;flex-wrap:wrap;align-items:baseline;font-size:11px;color:var(--p2);letter-spacing:.03em;}
.ot-nums b{color:var(--p1);font-weight:400;font-size:12.5px;}
.ot-arrow{color:var(--p2d);}
.ot-pct{margin-left:auto;font-size:12.5px;}
.ot-dim{color:var(--p2);}
/* One line, guaranteed. The copy is short enough to fit today; the ellipsis is
   there so a longer horizon string in future data cannot silently make one card
   taller than the rest of the wall again. */
.ot-sub{
  font-size:10.5px;color:var(--p2);letter-spacing:.03em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
/* The move, on its own, where the numeric row used to be. Right-aligned so the
   eye can run a column of them down the list. */
.ot-move{font-size:15px;letter-spacing:.02em;text-align:right;line-height:1;}

/* stop |--|--o--| target. Target is always the right-hand end, including for
   shorts, so "moving right" reads as "working" whichever way the trade faces.
   Every mark is LABELLED — the first version leaned on title tooltips, which do
   not exist on a phone, so the scale showed unexplained ticks. */
.ot-track{display:flex;flex-direction:column;gap:2px;margin:9px 0 2px;}
.ot-now-lab{
  position:relative;transform:translateX(-50%);white-space:nowrap;
  font-size:9.5px;letter-spacing:.05em;line-height:1;width:max-content;
}
.ot-now-lab.up{color:var(--p0);}
.ot-now-lab.dn{color:var(--red);}
.ot-track-bar{position:relative;height:4px;background:var(--p4);border-radius:2px;}
.ot-fill{position:absolute;top:0;height:4px;border-radius:2px;opacity:.45;}
.ot-fill.up{background:var(--p0);}
.ot-fill.dn{background:var(--red);}
.ot-entry,.ot-now{position:absolute;top:50%;transform:translate(-50%,-50%);}
.ot-entry{width:1px;height:11px;background:var(--p1);}
.ot-now{width:8px;height:8px;border-radius:50%;background:var(--p0);box-shadow:0 0 7px var(--p0);}
.ot-now.dn{background:var(--red);box-shadow:0 0 7px var(--red);}
/* Three static anchors, laid out rather than positioned. The ENTRY label used to
   be absolutely placed over its own tick, which reads well until entry sits near
   an end — on a tight-stop call it printed straight through the STOP label
   ("STOP $16ENTRY $163.93"). No clamp fixes that, because the neighbouring
   labels are variable width, so the spatial link is given up for a layout that
   cannot collide. The tick on the bar still shows where entry actually sits. */
.ot-track-ends{
  display:flex;justify-content:space-between;gap:8px;
  font-size:9.5px;color:var(--p2);letter-spacing:.04em;
}
.ot-end-m{color:var(--p1);white-space:nowrap;}

.ot-more{
  font-size:9.5px;letter-spacing:.12em;color:var(--p2);margin-top:2px;
}
.ot-card.on .ot-more{display:none;}
.ot-card{cursor:pointer;}
.ot-card:focus-visible{outline:1px solid var(--amber);outline-offset:-1px;}
.ot-card.on{background:rgba(0,255,65,.03);}

/* Expanded call detail. Two columns so a label never wraps away from its value. */
.ot-detail{
  margin-top:6px;padding-top:8px;border-top:1px solid var(--p3);
  cursor:default;display:flex;flex-direction:column;gap:3px;
}
/* Short key/value pairs, two across even in a ~320px card — they are all a word
   and a number, so a single column wasted half the width and doubled the height
   the card grows by. */
.ot-dpairs{display:grid;grid-template-columns:1fr 1fr;gap:2px 12px;}
.ot-drow{display:grid;grid-template-columns:auto 1fr;gap:6px;font-size:10.5px;line-height:1.5;}
.ot-dregime{font-size:10px;color:var(--p2);letter-spacing:.03em;margin-top:3px;}
/* The detail stays one column: it now lives inside a ~320px card, not a
   full-width panel, so a two-across layout would put four characters per cell. */
.ot-dk{color:var(--p2);letter-spacing:.06em;text-transform:uppercase;font-size:9.5px;}
.ot-dv{color:var(--p1);}
.ot-detail .ot-thesis{margin-top:5px;padding-top:6px;border-top:1px solid var(--p4);font-size:10.5px;}
.ot-warnbox{
  margin-top:5px;padding:6px 8px;border-left:2px solid var(--amber);
  background:rgba(255,176,0,.05);font-size:10.5px;color:var(--amber);line-height:1.55;
}
.ot-acts{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:7px;}
.ot-act{
  background:none;border:1px solid var(--amber);color:var(--amber);font-family:inherit;
  font-size:10.5px;letter-spacing:.1em;padding:5px 10px;border-radius:2px;cursor:pointer;
}
.ot-act:hover{background:rgba(255,176,0,.12);text-shadow:0 0 6px var(--amber);}
.ot-acts .ot-dim{font-size:9.5px;}

.ot-hwrap{grid-column:1/-1;}
.ot-hwrap.on{background:rgba(0,255,65,.03);}
.ot-hwrap .ot-detail{margin:0 12px 10px;}
.ot-thesis{font-size:10.5px;color:var(--p1);letter-spacing:.02em;line-height:1.55;}
.ot-flag{
  font-size:8.5px;letter-spacing:.08em;color:var(--amber);border:1px solid var(--amber);
  padding:0 3px;border-radius:2px;white-space:nowrap;cursor:help;margin-left:4px;
  /* On the 52 of 56 cards that carry no thesis this badge is a direct child of
     the column flex, where it would stretch to the full card width and read as a
     banner rather than a tag. Inline inside .ot-thesis it is unaffected. */
  align-self:flex-start;margin-left:0;
}
.ot-thesis .ot-flag{margin-left:4px;}
.ot-foot{
  grid-column:1/-1;padding:10px 12px 16px;font-size:10.5px;color:var(--p1);
  letter-spacing:.04em;line-height:1.6;
}

/* Ticker search. Sticky because the history list runs to 100+ rows on the
   busiest names and the box has to stay reachable to clear it. */
.ot-search-bar{
  grid-column:1/-1;position:sticky;top:0;z-index:2;display:flex;align-items:center;gap:6px;
  padding:8px 12px;background:var(--bg2);border-bottom:1px solid var(--p4);
}
.ot-search{
  flex:1;min-width:0;background:var(--bg1);border:1px solid var(--p3);color:var(--p0);
  font-family:inherit;font-size:12px;letter-spacing:.08em;padding:6px 9px;border-radius:2px;
  text-transform:uppercase;
}
.ot-search::placeholder{color:var(--p2);letter-spacing:.03em;text-transform:none;}
.ot-search:focus{outline:none;border-color:var(--amber);box-shadow:0 0 6px rgba(255,176,0,.25);}
/* iOS renders its own clear affordance on type=search; ours is the only one. */
.ot-search::-webkit-search-decoration,.ot-search::-webkit-search-cancel-button{-webkit-appearance:none;}
.ot-search-x{
  background:none;border:1px solid var(--p3);color:var(--p2);font-family:inherit;
  font-size:11px;line-height:1;padding:6px 8px;border-radius:2px;cursor:pointer;
}
.ot-search-x:hover{color:var(--amber);border-color:var(--amber);}

.ot-hist{grid-column:1/-1;padding:10px 12px;border-bottom:1px solid var(--p4);}
.ot-hist-t{font-size:12px;letter-spacing:.1em;color:var(--p0);text-shadow:0 0 5px var(--p0);}
.ot-hist-s{margin-top:4px;font-size:11px;color:var(--p2);letter-spacing:.02em;line-height:1.65;}
/* One call per line. Denser than the running cards on purpose — this list is
   read as a record, not as a set of positions to act on. */
.ot-hrow{
  cursor:pointer;display:grid;
  grid-template-columns:44px 78px 1fr 96px 78px;
  gap:8px;align-items:baseline;padding:6px 12px;border-bottom:1px solid var(--p4);
  font-size:11px;color:var(--p1);letter-spacing:.02em;
}
.ot-hrow:hover{background:rgba(0,255,65,.02);}
.ot-hdate{color:var(--p2);}
@media (max-width:520px){
  /* 74px clipped "UNDER PRESSURE" to "UNDER PRESSUR". The right column carries
     the longest state word this view can produce, so it is sized for that. */
  .ot-hrow{grid-template-columns:38px 1fr 100px;row-gap:2px;}
  .ot-hrow .ot-state{font-size:9.5px;letter-spacing:.05em;}
  /* kind and the price pair share the middle column on a phone rather than
     shrinking every column past legibility. */
  .ot-hrow > :nth-child(2){grid-column:2;}
  .ot-hrow > :nth-child(3){grid-column:2;}
  .ot-hrow > :nth-child(4){grid-column:3;text-align:right;}
  .ot-hrow > :nth-child(5){grid-column:3;text-align:right;}
}
@media (max-width:820px){
  .cs-table{min-width:620px;}
  .cs-body{overflow-x:auto;}
}

.ap-table{width:100%;border-collapse:collapse;font-size:13px;}
.ap-table th{
  padding:5px 8px;text-align:left;font-size:11px;letter-spacing:.06em;
  color:var(--p2);border-bottom:1px solid var(--p4);font-weight:400;
  background:var(--bg2);
}
.ap-table td{padding:5px 8px;border-bottom:1px solid var(--p4);color:var(--p2);}
.ap-table tr:hover td{background:rgba(0,255,65,.02);}
.ap-td-ticker{font-weight:700;color:var(--p0);font-size:13px;}
.ap-td-long{color:var(--p1);font-weight:700;}
.ap-td-short{color:var(--red);font-weight:700;}
.ap-table td.ap-td-pos{color:var(--cyan);font-weight:700;text-shadow:0 0 4px rgba(0,255,204,.3);}
.ap-table td.ap-td-neg{color:var(--red);font-weight:700;text-shadow:0 0 1px var(--red),0 0 6px var(--red),0 0 12px rgba(255,51,0,.3);}
.ap-td-reason{color:var(--p2);font-style:italic;}
.ap-pos-row{cursor:pointer;}
.ap-pos-row .ap-caret{display:inline-block;width:9px;color:var(--p2d);transition:transform .12s;}
.ap-pos-row.expanded .ap-caret{transform:rotate(90deg);color:var(--p1);}
.ap-why-row td{background:rgba(0,255,65,.03);border-bottom:1px solid var(--p4);padding:8px 12px;}
.ap-why-src{font-size:10px;letter-spacing:.08em;color:var(--p1);font-weight:700;text-transform:uppercase;}
.ap-why-thesis{font-size:12px;color:var(--p1);line-height:1.55;margin-top:4px;}
.ap-why-size{font-size:11px;color:var(--amber);line-height:1.5;margin-top:5px;}
.ap-del-btn{background:none;border:none;color:var(--p2d);cursor:pointer;font-family:var(--mono);font-size:12px;padding:0 2px;}
.ap-del-btn:hover{color:var(--red);}
.ap-disclaimer{
  font-size:11px;color:var(--p2);letter-spacing:.04em;
  padding:5px 12px;border-top:1px solid var(--p4);
  flex-shrink:0;line-height:1.5;
}

/* ── DISCLAIMER / ORIENTATION MODAL ── */
.modal-overlay{
  position:fixed;inset:0;z-index:9999;
  background:rgba(0,0,0,.88);
  display:flex;align-items:center;justify-content:center;padding:20px;
}
.modal-crt{
  background:var(--bg);border:1px solid var(--p2);
  max-width:540px;width:100%;max-height:90vh;max-height:90dvh;
  display:flex;flex-direction:column;overflow:hidden;
  box-shadow:0 0 40px rgba(0,200,50,.15);
  animation:fadePhosphor .3s ease both;
}
.modal-crt-title{
  font-size:13px;font-weight:700;color:var(--p0);
  letter-spacing:.16em;text-transform:uppercase;
  text-shadow:0 0 8px var(--p0);
  padding:14px 16px 10px;border-bottom:1px solid var(--p4);
  flex-shrink:0;
}
.modal-crt-title span{font-size:11px;color:var(--p2);letter-spacing:.1em;margin-left:8px;font-weight:400;}
/* Multi-screen modals wrap each screen in its own div, so title/body/footer are
   grandchildren of .modal-crt and never become flex items. Without this the
   wrapper grows to its full content height and .modal-crt's overflow:hidden
   clips the footer — the Next button vanished on any viewport under ~810px. */
.modal-screen{display:flex;flex-direction:column;flex:1;min-height:0;}
.modal-crt-body{
  overflow-y:auto;padding:14px 16px;flex:1;min-height:0;
  font-size:13px;color:var(--p1);line-height:1.65;
}
.modal-crt-body::-webkit-scrollbar{width:2px;}
.modal-crt-body::-webkit-scrollbar-thumb{background:var(--p3);}
.modal-crt-body p{margin-bottom:10px;}
.modal-crt-body h3{font-size:10px;color:var(--p0);letter-spacing:.12em;text-transform:uppercase;margin:14px 0 4px;border-bottom:1px solid var(--p4);padding-bottom:4px;}
.modal-crt-body strong{color:var(--p0);}
.modal-crt-body .modal-note{font-size:10px;color:var(--p2);margin-top:10px;}
.modal-inline-link{
  background:none;border:none;color:var(--p1);cursor:pointer;
  font-family:var(--mono);font-size:inherit;padding:0;text-decoration:underline;
}
.modal-inline-link:hover{color:var(--p0);}
.modal-crt-footer{padding:10px 16px;border-top:1px solid var(--p4);flex-shrink:0;display:flex;gap:8px;justify-content:flex-end;}
.modal-crt-btn{
  font-family:var(--mono);font-size:10px;letter-spacing:.1em;
  padding:6px 16px;background:transparent;cursor:pointer;
  border:1px solid var(--p2);color:var(--p2);
  transition:color .1s,border-color .1s;
}
.modal-crt-btn:hover{color:var(--p0);border-color:var(--p0);}
.modal-crt-btn.primary{border-color:var(--p1);color:var(--p1);}
.modal-crt-btn.primary:hover{border-color:var(--p0);color:var(--p0);}
.help-btn{
  font-family:var(--mono);font-size:11px;font-weight:700;
  background:none;border:1px solid var(--p3);color:var(--p2);
  padding:2px 6px;cursor:pointer;letter-spacing:.06em;
  transition:color .1s,border-color .1s,opacity .1s;
}
.help-btn:hover{color:var(--p0);border-color:var(--p1);}
/* There are FIVE .help-btn on the page and only ONE is in the topbar. The topbar
   is a bright --p0 bar, so green-on-green measured 2.32:1 there -- but the other
   four sit on dark panes and need the green. Scope the dark treatment, or fixing
   the topbar breaks the other four the opposite way. */
.topbar .help-btn{border-color:rgba(6,8,6,.45);color:var(--bg);}
.topbar .help-btn:hover{color:var(--bg);opacity:.7;border-color:var(--bg);}
/* Terms modal: wider */
.modal-crt-terms{max-width:640px;}

/* ── MOBILE INTELLIGENCE CARD ── */
#mobile-intel-card{display:none;flex-direction:column;border-bottom:1px solid var(--p3);background:var(--bg);flex-shrink:0;}
.mic-header{display:flex;align-items:center;gap:8px;padding:10px 14px 8px;border-bottom:1px solid var(--p4);flex-shrink:0;}
.mic-title{font-size:11px;letter-spacing:.14em;color:var(--p0);text-shadow:0 0 6px var(--p0);flex:1;}
.mic-meta{font-size:10px;letter-spacing:.08em;color:var(--p2);}
.mic-refresh-btn{background:none;border:none;color:var(--p2);font-family:var(--mono);font-size:15px;cursor:pointer;padding:0 2px;line-height:1;transition:color .12s;}
.mic-refresh-btn:hover{color:var(--p0);}
.mic-headline{font-size:15px;font-weight:700;letter-spacing:.04em;color:var(--p0);text-shadow:0 0 8px var(--p0),0 0 20px rgba(0,255,65,.12);padding:12px 14px 8px;line-height:1.35;}
.mic-bias-row{display:flex;align-items:center;gap:10px;padding:0 14px 10px;flex-wrap:wrap;}
.mic-bias{font-size:13px;font-weight:700;letter-spacing:.08em;padding:3px 10px;border:1px solid;}
.mic-bias.bull{color:var(--p0);border-color:var(--p1);background:rgba(0,255,65,.07);text-shadow:0 0 5px var(--p0);}
.mic-bias.bear{color:var(--red);border-color:var(--red);background:rgba(255,51,0,.08);}
.mic-bias.neutral{color:var(--amber);border-color:var(--amber);background:rgba(255,176,0,.06);}
.mic-regime{font-size:11px;color:var(--p2);letter-spacing:.06em;}
.mic-credit{
  font-size:11px;letter-spacing:.06em;color:var(--p2);
  padding:0 14px 10px;
}
.mic-credit.flagged{color:var(--red);}
.mic-focus{font-size:13px;color:var(--p1);line-height:1.55;padding:0 14px 12px;border-bottom:1px solid var(--p4);}
.mic-section-lbl{font-size:10px;letter-spacing:.14em;color:var(--p2);text-transform:uppercase;padding:8px 14px 4px;}
.mic-signal-row{display:grid;grid-template-columns:40px 58px 1fr;align-items:center;gap:8px;padding:7px 14px;border-bottom:1px solid var(--p4);min-height:40px;}
.mic-sig-etf{font-size:13px;font-weight:700;color:var(--p0);letter-spacing:.04em;}
.mic-sig-badge{font-size:10px;font-weight:700;letter-spacing:.07em;padding:2px 5px;border:1px solid;text-align:center;}
.mic-sig-badge.bull{color:var(--p0);border-color:var(--p1);background:rgba(0,255,65,.07);}
.mic-sig-badge.bear{color:var(--red);border-color:var(--red);background:rgba(255,51,0,.08);}
.mic-sig-badge.neutral{color:var(--amber);border-color:var(--amber);}
.mic-sig-reason{font-size:11px;color:var(--p2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.mic-trade-row{display:flex;flex-direction:column;gap:3px;padding:9px 14px;border-bottom:1px solid var(--p4);}
.mic-trade-top{display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
.mic-trade-ticker{font-size:14px;font-weight:700;color:var(--p0);letter-spacing:.04em;}
.mic-trade-dir{font-size:10px;font-weight:700;letter-spacing:.08em;padding:2px 5px;border:1px solid;text-align:center;white-space:nowrap;}
.mic-trade-dir.bull{color:var(--p0);border-color:var(--p1);background:rgba(0,255,65,.07);}
.mic-trade-dir.bear{color:var(--red);border-color:var(--red);background:rgba(255,51,0,.08);}
.mic-trade-entry{font-size:11px;color:var(--p2);white-space:nowrap;}
/* Clamped, not truncated: the full thesis is in the DOM and opens on tap. */
.mic-trade-cat{font-size:11px;color:var(--p2);line-height:1.4;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;}
.mic-trade-row{cursor:pointer;}
.mic-trade-row.expanded .mic-trade-cat{display:block;-webkit-line-clamp:unset;}
.mic-trade-row.expanded .pick-more::after{content:'▾ LESS';}
.mic-trade-top .pick-more{margin-left:auto;}
.mic-trade-detail{display:none;margin-top:6px;padding-top:6px;border-top:1px solid var(--p4);}
.mic-trade-row.expanded .mic-trade-detail{display:block;}
.mic-toggle{display:block;width:100%;padding:13px;background:var(--bg2);border:none;border-top:1px solid var(--p3);color:var(--p1);font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:.12em;cursor:pointer;text-align:center;transition:background .15s,color .15s;}
.mic-toggle:hover{background:rgba(0,255,65,.04);color:var(--p0);}

/* ═══════════════════════════════════════
   LATE RESPONSIVE OVERRIDES
   Must be placed AFTER all component base CSS so cascade order is correct.
   Earlier @media blocks above are correct for components defined before line ~820;
   these rules handle components whose base CSS is defined after that point.
═══════════════════════════════════════ */
@media(max-width:768px){
  /* Cycle View — stack pred table+detail (base: grid-template-columns:480px 1fr) */
  #cycle-preds{grid-template-columns:1fr;overflow:visible;max-height:none;}
  #cycle-pred-table{border-right:none;border-bottom:1px solid var(--p4);}
  #cycle-pred-detail{min-height:120px;}

  /* Catalysts — stack 3-col → 1-col, flow sections into one page scroll (no nested 210px boxes) */
  #pane-intel.on{display:block;overflow-y:auto;}
  #pane-intel .intel-col{overflow:visible;border-right:none;border-bottom:1px solid var(--p4);}
  #pane-intel .intel-sub{max-height:none;flex:none;overflow:visible;}
  /* Congress — same fix: stack 3-col → 1-col, sections flow into one page scroll */
  #pane-congress.on{display:block;overflow-y:auto;}
  #pane-congress .intel-col{overflow:visible;border-right:none;border-bottom:1px solid var(--p4);}
  #pane-congress .intel-sub{max-height:none;flex:none;overflow:visible;}
  /* Government — same fix: stack subview cols, sections flow into one page scroll */
  #pane-gov.on{overflow-y:auto;}
  .gov-subview.on{display:block;}
  #pane-gov .intel-col{overflow:visible;border-right:none;border-bottom:1px solid var(--p4);}
  #pane-gov .intel-sub{max-height:none;flex:none;overflow:visible;}
  #pane-gov .gov-digest{max-height:none;overflow:visible;}
  .intel-col:first-child{border-right:none;border-bottom:1px solid var(--p4);}

  /* Nav scroll affordance — gradient fade signals horizontal scroll */
  .header-row2{position:relative;}
  .header-row2::after{content:'';position:absolute;right:0;top:0;bottom:0;width:36px;background:linear-gradient(to right,transparent,var(--bg));pointer-events:none;z-index:2;}
}

@media(max-width:480px){
  /* ── Performance/Analytics: flex bars so rows fit narrow phones (desktop caps them) ── */
  .tr-win-row{grid-template-columns:46px minmax(40px,1fr) 36px auto;}
  .tr-cc-row{grid-template-columns:72px minmax(40px,1fr) 34px auto;}
  .tr-rg-row{grid-template-columns:72px minmax(40px,1fr) 38px auto;}
  .tr-vd-row{grid-template-columns:46px minmax(40px,1fr) 34px auto;}
  .tr-rail{display:none;}                /* desktop-only enhancement; mobile stays compact */
  .tr-pk-cols{grid-template-columns:1fr;}

  /* ── Cycle View ── */
  #cycle-body{display:flex;flex-direction:column;max-height:none;overflow:visible;}
  #cycle-narrative{border-right:none;border-bottom:1px solid var(--p4);}
  #cycle-chips-panel{overflow:visible;}
  #cycle-preds{grid-template-columns:1fr;overflow:visible;max-height:none;}
  #cycle-pred-table{border-right:none;border-bottom:1px solid var(--p4);}
  #cycle-pred-detail{min-height:160px;}

  /* ── Brief Archive ── */
  #pb-topbar{flex-wrap:wrap;gap:6px;}
  #pb-body{display:flex;flex-direction:column;}
  #pb-sidebar{border-right:none;border-bottom:1px solid var(--p4);max-height:130px;overflow-y:auto;}
  #pb-content{overflow-y:visible;padding:10px 10px 8px;}

  /* ── Track Record ── */
  #tr-kpi-strip{grid-template-columns:repeat(2,1fr);}
  #tr-pk-kpi{grid-template-columns:repeat(2,1fr);}
  #tr-topbar{flex-wrap:wrap;gap:4px;padding:7px 10px;}
  #tr-topbar>div{flex-wrap:wrap;gap:5px;}
  #tr-status{display:none;}
  /* Compact card header: drop regime on narrow screens */
  .tr-card-hd{grid-template-columns:68px 28px 1fr auto auto;}
  .tr-card-regime{display:none;}
  /* Single-column stacked history — sections flow into one page scroll (no squished panels) */
  #pane-record.on{overflow-y:auto;}
  #tr-view-h{grid-template-columns:1fr !important;grid-template-rows:auto auto;}
  #tr-left-col{border-right:none;border-bottom:1px solid var(--p4);max-height:none;overflow:visible;}
  #tr-right-col{overflow:visible;}
  #tr-pending-panel{max-height:none;overflow:visible;flex:none;}
  #tr-cards-wrap{overflow:visible;flex:none;}
  #tr-analytics{grid-template-columns:1fr;}
  #tr-calibration{border-right:none;border-bottom:1px solid var(--p4);overflow:visible;}
  #tr-analytics-2{grid-template-columns:1fr;}
  #tr-sector-rates{border-right:none;border-bottom:1px solid var(--p4);}
  #tr-rg-body{grid-template-columns:1fr;}

  /* ── Trade Ideas — trades section + table flow into one page scroll ── */
  #pane-stocks.on{overflow-y:auto;}
  #stocks-trades-section{max-height:none !important;overflow:visible !important;}
  #pane-stocks .stocks-crt-grid{overflow:visible;flex:none;}

  /* ── Exit KPI + form inputs ── */
  #exit-kpi-strip{grid-template-columns:repeat(2,1fr);}
  #exit-form-bar{gap:4px;}
  .exit-inp{width:62px;min-height:36px;padding:6px 8px;font-size:12px;}
  .exit-inp-ticker{width:50px;min-height:36px;}
  .exit-add-btn{min-height:36px;padding:6px 14px;font-size:11px;}

  /* ── Positions (Exit Planner) card header — 6-col → 4-col ── */
  .ep-card-hd{grid-template-columns:56px 1fr auto 28px;gap:6px;}
  .ep-rsi{display:none;}

  /* ── AutoPilot ── */
  #ap-kpi-strip{grid-template-columns:repeat(2,1fr);}
  #ap-positions-inner,#ap-history-inner,#ap-decisions-inner{overflow-x:auto;-webkit-overflow-scrolling:touch;}
  .ap-table{min-width:520px;}

  /* ── Catalysts — cap section height so all 3 sections visible without marathon scroll ── */
  .intel-sub{max-height:210px;overflow-y:auto;-webkit-overflow-scrolling:touch;}

  /* ── Market Cycle — 5-col → 3-col; hide Regime Bias + Signal Alignment (visible in detail panel) ── */
  .cp-hd,.cp-row{grid-template-columns:52px 80px 60px;}
  .cp-bias,.cp-align{display:none;}
  .cp-hd span:nth-child(3),.cp-hd span:nth-child(4){display:none;}

  /* ── Trade Ideas — 6-col → 3-col; show Ticker + Name + Signal only ── */
  .pt-hd,.pt-row{grid-template-columns:52px 1fr auto;}
  .pt-live,.pt-lvl,.pt-conf-wrap{display:none;}
  .pt-hd span:nth-child(3),.pt-hd span:nth-child(5),.pt-hd span:nth-child(6){display:none;}
  .pt-expand{padding-left:16px;}

  /* ── Mobile Intelligence Card — show card, collapse full brief ── */
  #mobile-intel-card{display:flex;}
  #pane-brief .mkt-kpi-bar,#pane-brief .col{display:none;}
  /* Expanded: restore cols and KPI bar */
  #pane-brief.mic-expanded .mkt-kpi-bar{display:grid;}
  #pane-brief.mic-expanded .col{display:flex;}
}

/* -- auth overlay / verify banner (was the second style block) -- */
  /* ── Auth overlay ───────────────────────────────────────────────────────── */
  #auth-overlay {
    position: fixed; inset: 0; z-index: 10000;
    background: rgba(2,3,2,.97);
    display: flex; align-items: center; justify-content: center;
  }
  .auth-box {
    width: 100%; max-width: 400px;
    padding: 36px 32px;
    border: 1px solid var(--p3);
    background: var(--bg2);
    box-shadow: 0 0 40px rgba(0,255,65,.06);
  }
  .auth-logo {
    font-size: 12px; font-weight: 700; letter-spacing: .14em;
    color: var(--p0); margin-bottom: 4px;
    text-shadow: 0 0 8px rgba(0,255,65,.5);
  }
  .auth-sub { font-size: 10px; color: var(--p2d); margin-bottom: 24px; letter-spacing:.06em; }
  .auth-tabs {
    display: flex; margin-bottom: 20px;
    border-bottom: 1px solid var(--p4);
  }
  .auth-tab {
    background: none; border: none; cursor: pointer;
    font-family: 'IBM Plex Mono', monospace; font-size: 11px;
    font-weight: 600; letter-spacing: .1em;
    color: var(--p2d); padding: 5px 14px 7px;
    border-bottom: 2px solid transparent; margin-bottom: -1px;
  }
  .auth-tab.active { color: var(--p0); border-bottom-color: var(--p0); }
  .auth-field { margin-bottom: 14px; }
  .auth-label { display: block; font-size: 10px; color: var(--p2); margin-bottom: 4px; letter-spacing: .08em; }
  .auth-input {
    width: 100%; background: var(--bg); border: 1px solid var(--p3);
    color: var(--p0); font-family: 'IBM Plex Mono', monospace; font-size: 13px;
    padding: 8px 10px; outline: none; box-sizing: border-box;
  }
  .auth-input:focus { border-color: var(--p1); }
  .auth-input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 1000px var(--bg) inset !important;
    -webkit-text-fill-color: var(--p0) !important;
  }
  .auth-error { min-height: 16px; font-size: 11px; color: var(--red); margin-bottom: 12px; letter-spacing: .04em; }
  .auth-submit {
    width: 100%; background: var(--p4); border: 1px solid var(--p2);
    color: var(--p0); font-family: 'IBM Plex Mono', monospace;
    font-size: 12px; font-weight: 600; letter-spacing: .12em;
    padding: 10px; cursor: pointer;
  }
  .auth-submit:hover { background: var(--p3); }
  .auth-footer { margin-top: 14px; text-align: center; }
  .auth-guest-link {
    font-size: 10px; color: var(--p2d); cursor: pointer; letter-spacing: .06em;
    background: none; border: none; font-family: 'IBM Plex Mono', monospace;
    text-decoration: underline;
  }
  .auth-guest-link:hover { color: var(--p2); }
  .auth-consent {
    display: flex; align-items: flex-start; gap: 9px;
    margin-bottom: 14px; cursor: pointer;
  }
  .auth-consent input[type="checkbox"] {
    margin-top: 2px; flex-shrink: 0; accent-color: var(--p1);
    width: 13px; height: 13px; cursor: pointer;
  }
  .auth-consent-label {
    font-size: 10px; color: var(--p2d); letter-spacing: .05em; line-height: 1.5; cursor: pointer;
  }
  .auth-consent-label a { color: var(--p2); }
  .auth-consent-label a:hover { color: var(--p1); }
  /* topbar auth chip + dropdown */
  .auth-chip-btn {
    /* Same reason as .help-btn above — it renders inside the bright topbar. */
    background: none; border: 1px solid rgba(6,8,6,.4); color: var(--bg);
    font-family: 'IBM Plex Mono', monospace; font-size: 10px;
    padding: 2px 8px; cursor: pointer; letter-spacing: .06em;
  }
  .auth-chip-btn:hover { border-color: var(--bg); opacity: .75; }
  #auth-menu-wrap { position: relative; display: inline-block; }
  .auth-dropdown {
    position: absolute; right: 0; top: calc(100% + 6px);
    min-width: 210px; z-index: 9999;
    background: var(--bg2); border: 1px solid var(--p3);
    box-shadow: 0 0 24px rgba(0,255,65,.08);
    padding: 14px;
  }
  .auth-dd-email { font-size: 11px; color: var(--p1); word-break: break-all; margin-bottom: 2px; }
  .auth-dd-plan  { font-size: 10px; color: var(--p2d); letter-spacing: .08em; margin-bottom: 12px; }
  .auth-dd-actions { display: flex; gap: 6px; }
  .auth-dd-btn {
    flex: 1; background: none; border: 1px solid var(--p3); color: var(--p2);
    font-family: 'IBM Plex Mono', monospace; font-size: 10px;
    padding: 5px 4px; cursor: pointer; letter-spacing: .06em;
  }
  .auth-dd-btn:hover { border-color: var(--p2); color: var(--p1); }
  .auth-dd-delete { color: var(--red) !important; border-color: rgba(240,38,38,.35) !important; }
  .auth-dd-delete:hover { border-color: var(--red) !important; }
  @media (max-width: 480px) { .auth-box { padding: 24px 18px; } }
  /* ── Change-password modal ───────────────────────────────────────────────── */
  #cpw-overlay {
    position:fixed;inset:0;background:rgba(0,0,0,.75);display:flex;
    align-items:center;justify-content:center;z-index:1100;
  }
  .cpw-box {
    background:var(--bg);border:1px solid var(--p3);padding:28px 28px 24px;
    width:320px;max-width:90vw;font-family:var(--font);
  }
  .cpw-title { font-size:11px;color:var(--p1);letter-spacing:.1em;margin-bottom:20px; }
  /* ── Email verification banner ───────────────────────────────────────────── */
  #verify-banner {
    display:none;background:rgba(139,100,20,.18);border-bottom:1px solid rgba(200,185,122,.25);
    padding:7px 16px;font-size:10px;color:var(--p2);letter-spacing:.07em;
    display:none;align-items:center;gap:10px;justify-content:center;
  }
  #verify-banner a { color:var(--p1);cursor:pointer;text-decoration:underline; }

/* ── Charts tab — every instrument as a tile, or one of them full size ──── */
/* .pane.on is a flex ROW; this pane stacks a header over a grid and scrolls. */
#pane-glance.on{flex-direction:column;overflow-y:auto;}
.gl-head{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:9px 14px;border-bottom:1px solid var(--p4);flex-wrap:wrap;
}
.gl-head-l{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;}
.gl-title{font-size:11px;color:var(--p1);letter-spacing:.1em;}
.gl-sub{font-size:9px;color:var(--p2d);letter-spacing:.08em;}
.gl-grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(232px,1fr));
  gap:9px;padding:12px 14px;
}
.gl-empty{padding:20px 0;font-size:10px;color:var(--p2d);letter-spacing:.08em;}
.gl-retry{color:var(--p1);cursor:pointer;text-decoration:underline;margin-left:6px;}
/* Holds the sparkline's space while the batch call fills it in, so the tile
   doesn't reflow when bars arrive. */
.gl-spark-wait{height:40px;border-bottom:1px dashed var(--p4);opacity:.5;}
.gl-pick-tag{
  max-width:56%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  cursor:help;
}
/* Positions band: the footer's right half carries which book holds the name
   and what it's doing since the fill, so it has to stay on one line beside the
   90-day figure the way a verdict tag does. */
.gl-pos-ft{white-space:nowrap;cursor:help;}
.gl-retry:hover{color:var(--p0);}

/* Bands — each section of the page owns its own strip of header. */
.gl-band-hd{
  display:flex;align-items:baseline;gap:10px;
  padding:10px 14px 0;
}
.gl-band-hd-grid{padding-top:14px;}
.gl-band-t{font-size:10px;color:var(--p2);letter-spacing:.12em;}
.gl-band-sub{font-size:9px;color:var(--p2d);letter-spacing:.08em;}
/* Same grid metrics as the sector band, so a BTC tile and an XLK tile are
   the same object at the same size. */
.gl-band-body{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(232px,1fr));
  gap:9px;padding:7px 14px 0;
}
@media (max-width:600px){
  .gl-band-body{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:7px;padding:7px 10px 0;}
}
.gl-card{
  border:1px solid var(--p4);border-left:2px solid var(--p4);
  padding:8px 10px 7px;display:flex;flex-direction:column;gap:5px;cursor:pointer;
  transition:background .1s;
}
.gl-card:hover{background:rgba(0,255,65,.05);}
.gl-card.sp-enter{border-left-color:var(--p0);}
.gl-card.sp-watch{border-left-color:var(--amber);}
.gl-card.sp-avoid{border-left-color:var(--red);}
.gl-card.sp-hold {border-left-color:var(--p4);}
.gl-hd{display:flex;align-items:baseline;justify-content:space-between;gap:8px;}
.gl-etf{font-size:13px;color:var(--p0);letter-spacing:.08em;}
.gl-px{font-size:11px;color:var(--p1);white-space:nowrap;}
.gl-name{font-size:9px;color:var(--p2);letter-spacing:.1em;text-transform:uppercase;}
.gl-ctrls{display:flex;align-items:center;gap:10px;flex-wrap:wrap;}
.gl-chart{height:40px;overflow:hidden;}
.gl-svg{width:100%;height:40px;display:block;}
.gl-ft{
  display:flex;align-items:baseline;justify-content:space-between;gap:8px;
  font-size:9px;color:var(--p2);letter-spacing:.08em;
  border-top:1px solid var(--p4);padding-top:5px;
}


/* ── VOLATILITY FORECAST TAB ──
   Internals stay btcvol/bv-* per the Trade Sim convention: only user-facing
   strings carry the product name. */
/* .pane.on is display:flex with the default row direction, so without this the
   heading and the body sit side by side as two columns. */
#pane-btcvol.on{flex-direction:column;}
.bv-head{
  flex:none;
  display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;
  padding:8px 14px;border-bottom:1px solid var(--p4);
}
.bv-head-t{font-size:13px;color:var(--p0);letter-spacing:.12em;}
.bv-head-s{font-size:11px;color:var(--p2);letter-spacing:.1em;}
/* flex:1 + min-height:0 so the body scrolls inside the pane rather than
   overflowing it — .pane is overflow:hidden. */
.bv-wrap{
  flex:1;min-height:0;overflow-y:auto;
  padding:12px 14px 24px;display:flex;flex-direction:column;gap:14px;
}
/* Two forecasts, equal weight on purpose: neither is the house view. */
.bv-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:10px;}
.bv-card{
  border:1px solid var(--p4);border-left:2px solid var(--p0);
  padding:10px 12px;display:flex;flex-direction:column;gap:4px;
}
.bv-card-t{font-size:11px;color:var(--p2d);letter-spacing:.12em;}
.bv-big{font-size:26px;color:var(--p1);line-height:1.1;}
.bv-unit{font-size:12px;color:var(--p2d);letter-spacing:.08em;}
.bv-sub{font-size:12px;color:var(--p2);letter-spacing:.05em;}
.bv-meta{font-size:10px;color:var(--p2d);letter-spacing:.06em;line-height:1.5;}
.bv-spread{
  font-size:11px;color:var(--amber);letter-spacing:.1em;
  border-left:2px solid var(--amber);padding:5px 10px;
}
.bv-sec{display:flex;flex-direction:column;gap:5px;}
.bv-sec-t{font-size:12px;color:var(--p0);letter-spacing:.12em;}
.bv-sec-s{font-size:10px;color:var(--p2d);letter-spacing:.06em;text-transform:none;}

/* -- VOLATILITY TAB BODY --
   Body copy sits at 13px to match the brief, which is the page this one is read
   like: something you sit and study, not glance at. --p3 and --p4 are border and
   decoration tokens and are NOT legible as text here; every label uses --p2 or
   brighter. */

.bv-tabs{display:flex;gap:2px;flex-wrap:wrap;}
.bv-tab{
  font:inherit;font-size:12px;letter-spacing:.12em;cursor:pointer;
  color:var(--p2);background:var(--bg2);border:1px solid var(--p3);padding:7px 15px;
}
.bv-tab:hover{color:var(--p0);border-color:var(--p2);}
.bv-tab.on{color:var(--bg);background:var(--p1);border-color:var(--p1);}

/* The verdict: the whole page in one sentence, before any number. */
.bv-verdict{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;}
.bv-v-lead{font-size:14px;color:var(--p2);letter-spacing:.12em;}
.bv-v-word{font-size:30px;letter-spacing:.09em;text-shadow:0 0 14px currentColor;}
.bv-v-tail{font-size:14px;color:var(--p1);letter-spacing:.05em;}
.bv-v-tail > b{font-weight:normal;text-shadow:0 0 8px currentColor;}

.bv-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:11px;}
.bv-card{
  border:1px solid var(--p3);border-left:2px solid var(--p1);background:var(--bg2);
  padding:13px 15px;display:flex;flex-direction:column;gap:5px;align-items:flex-start;
}
.bv-card-t{font-size:11px;color:var(--p1);letter-spacing:.14em;}
.bv-card-peak{border-left-color:var(--amber);}
.bv-big{font-size:34px;line-height:1.05;text-shadow:0 0 12px currentColor;}
.bv-unit{font-size:14px;color:var(--p2);letter-spacing:.06em;margin-left:2px;text-shadow:none;}
.bv-badge{
  font-size:11px;letter-spacing:.18em;border:1px solid;padding:2px 8px;
}
.bv-sub{font-size:13px;color:var(--p1);letter-spacing:.03em;}
.bv-meta{font-size:12px;color:var(--p2);letter-spacing:.01em;line-height:1.7;}
.bv-warnword{color:var(--amber);font-weight:normal;}
/* The overnight-gap caveat. Amber because it is a limit on the number above it,
   not extra detail about it -- a reader skimming the big figure needs the eye
   to catch this. AUDIT.md R-5. */
.bv-gap{display:block;margin-top:6px;color:var(--amber);}

/* The next-session nowcast. Deliberately NOT styled like the two cards above:
   it answers a different question on a different clock, and it is the one number
   here that is not part of the graded record. Left rule + inset ground reads as
   an aside rather than a peer. AUDIT.md R-6. */
.bv-now{
  border-left:2px solid var(--p2);padding:10px 14px;background:rgba(255,255,255,.02);
  display:flex;flex-direction:column;gap:8px;
}
.bv-now-hd{font-size:12px;color:var(--p1);letter-spacing:.14em;}
.bv-now-s{display:block;font-size:11px;color:var(--p2);letter-spacing:.01em;
  line-height:1.6;margin-top:3px;text-transform:none;}
.bv-now-body{display:flex;align-items:baseline;gap:16px;flex-wrap:wrap;}
.bv-now-big{font-size:24px;line-height:1.05;text-shadow:0 0 10px currentColor;}
.bv-now-txt{font-size:12px;color:var(--p2);letter-spacing:.01em;line-height:1.7;flex:1;min-width:240px;}
.bv-spread{
  font-size:12px;color:var(--amber);letter-spacing:.03em;line-height:1.7;
  border-left:2px solid var(--amber);padding:8px 12px;background:rgba(255,176,0,.05);
}

.bv-sec{display:flex;flex-direction:column;gap:8px;}
.bv-sec-t{font-size:13px;color:var(--p0);letter-spacing:.14em;}
.bv-sec-s{display:block;font-size:12px;color:var(--p2);letter-spacing:.01em;
  text-transform:none;line-height:1.7;margin-top:4px;max-width:78ch;}

/* -- THE BODY IS A PANEL GRID --
   Three earlier attempts at this are worth knowing about, because each failed
   for a different reason and the third one is the useful lesson:

   1. A two-column GRID with sections assigned to a side. The four assets do not
      carry the same sections or heights, so the split that balanced Bitcoin left
      the S&P at 2470px against 1037px.
   2. MULTICOL, which balances itself and fixed that. Worse: this tab is a
      document ~1900px tall in a ~900px window, and a flowing column taller than
      the window makes the reader scroll to the bottom of column one and then
      back up to start column two.
   3. One column with the width used INSIDE each section. It filled the space and
      still looked wrong, and that is the lesson: the sections had no FRAME. Bare
      headings and prose floating in 1560px read as scattered text no matter how
      well the space is divided, and every other pane on this site — the pick
      wall, the KPI bar, the trade cards — is built from bordered panels.

   So the sections become panels, and panels sit in a grid with explicit spans.
   The frame is what makes an uneven bottom edge read as a designed grid instead
   of as leftover space, which is the complaint all three earlier attempts were
   really about. */
.bv-body{display:flex;flex-direction:column;gap:12px;}
.bv-body > .bv-sec{
  border:1px solid var(--p4);background:var(--bg1);padding:13px 15px;min-width:0;
}
/* The title becomes a header bar, the way every other panel on the site reads. */
.bv-body > .bv-sec > .bv-sec-t{
  border-bottom:1px solid var(--p4);padding-bottom:8px;margin-bottom:4px;
}

@media (min-width:1180px){
  /* Six tracks, so a panel can take a third, two thirds or the width without any
     of them being a special case. */
  .bv-wrap .bv-body{
    display:grid;grid-template-columns:repeat(6,minmax(0,1fr));
    gap:12px;align-items:start;
    /* Dense, because the full-width panels cannot pair with anything: on the
       equities the live options map sits between two half-width panels and left
       each of them alone on a row with 775px of nothing beside it. Dense lets the
       next half-width panel backfill that gap. */
    grid-auto-flow:row dense;
  }
  /* All three selectors carry the same weight on purpose: the default and the
     overrides must be equally specific or the default wins and every panel comes
     out the same width, which is what happened first time. */
  .bv-wrap .bv-body > .bv-sec{grid-column:span 3;}
  .bv-wrap .bv-body > .bv-s-cal{grid-column:span 3;}
  /* The live panel was full width because it used to hold a fourteen-row table. It
     holds a chart now, and stretching that chart across 1811px gave fourteen
     windows about 120px each -- all of the width and none of the information.
     Swapping it with THE NUMBERS is what keeps the grid honest: five half-width
     panels cannot pair, so whichever one lands last sits alone beside half a row of
     dead space, which is the exact complaint the dense flow above was added to fix.
     THE NUMBERS is a definition list, so it is the one panel here that GAINS from
     the width rather than merely filling it. That leaves four halves, which pair. */
  .bv-wrap .bv-body > .bv-s-live{grid-column:span 3;}
  .bv-wrap .bv-body > .bv-s-method,
  .bv-wrap .bv-body > .bv-s-ncrec,
  .bv-wrap .bv-body > .bv-s-record{grid-column:1 / -1;}
  /* Only when the other halves already pair — see bvRender. Same specificity as
     the default above (three classes), so it has to come after it to win, and it
     does. Without the guard Bitcoin, which renders no live panel, ends up with
     three halves and strands the calendar. */
  .bv-wrap .bv-body-pairs > .bv-s-numbers{grid-column:1 / -1;}

  /* Panels are the width now, so the old per-block caps only get in the way. */
  .bv-wrap .bv-days,.bv-wrap .bv-days-note,.bv-wrap .bv-lv,.bv-wrap .bv-lv-note,
  .bv-wrap .bv-dfit,.bv-wrap .bv-r,.bv-wrap .bv-nr,.bv-wrap .bv-nr-none,
  .bv-wrap .bv-scale,.bv-wrap .bv-digest,
  .bv-wrap .bv-chart,.bv-wrap .bv-stats,.bv-wrap .bv-details,
  .bv-wrap .bv-dow,.bv-wrap .bv-cal,.bv-wrap .bv-legend{max-width:none;}

  /* Three blocks are wide enough to run their own contents two-up. */
  .bv-wrap .bv-method{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
    gap:14px 38px;max-width:none;}
  .bv-wrap .bv-body-pairs > .bv-s-numbers .bv-digest{display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));column-gap:38px;align-content:start;}
  /* Each column needs its own last row unruled. With row-wise flow the final two
     items are the tails of the two columns whichever way the count falls, so
     :last-child and :nth-last-child(2) are exactly those two -- no parity test. */
  .bv-wrap .bv-body-pairs > .bv-s-numbers .bv-digest > .bv-dg-r:nth-last-child(2){border-bottom:none;}
  .bv-wrap .bv-step-b{max-width:70ch;}
  .bv-wrap .bv-recrow{display:grid;grid-template-columns:minmax(0,1fr) minmax(190px,250px);
    gap:38px;align-items:start;}
  .bv-wrap .bv-recrow .bv-stats{flex-direction:column;gap:15px;}
  .bv-wrap .bv-chart > svg{height:150px;}

  /* Inside the calendar panel the grid keeps its note alongside rather than
     under it -- that note explains the marks, so it belongs next to them. */
  .bv-wrap .bv-calrow{display:grid;grid-template-columns:minmax(0,1fr) minmax(230px,300px);
    gap:26px;align-items:start;}
}

/* The dated call. Given its own cards above the fold, because it is the thing
   the page is most often opened to answer. */
.bv-days{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:11px;max-width:760px;}
.bv-day{
  border:1px solid var(--p3);border-left:3px solid var(--p2);background:var(--bg2);
  padding:12px 14px;display:flex;flex-direction:column;gap:3px;
}
.bv-day.up{border-left-color:var(--amber);}
.bv-day.dn{border-left-color:var(--p2);opacity:.9;}
.bv-day-d{font-size:13px;color:var(--p0);letter-spacing:.14em;}
.bv-day-o{font-size:30px;color:var(--amber);line-height:1.05;text-shadow:0 0 11px currentColor;}
.bv-day.dn .bv-day-o{color:var(--p2);text-shadow:none;}
.bv-day-o > span{font-size:14px;margin-left:1px;}
.bv-day-w{font-size:11px;color:var(--p1);letter-spacing:.02em;}
.bv-day-r{font-size:11px;color:var(--p2);letter-spacing:.01em;line-height:1.6;margin-top:3px;}
.bv-days-note{max-width:760px;}
/* Calendar marks for event days. Deliberately a BORDER, never a fill: the fill
   already means "how big is an ordinary day here", and the odds of being the
   month's maximum is a different question that must not blur into it. */
.bv-cell.ev-up{border-color:var(--amber);box-shadow:inset 0 0 0 1px rgba(255,176,0,.5);}
.bv-cell.ev-dn{border-style:dashed;border-color:var(--p2);}
.bv-cell > o.ev{color:var(--amber);letter-spacing:.04em;}
.bv-cell.ev-dn > o.ev{color:var(--p1);}

/* Live per-session options map. Rows, not cells: this is a time series along one
   axis and reads better as a list than as a grid. */
.bv-lv{
  display:grid;grid-template-columns:106px 88px 1fr 76px 62px;gap:9px;align-items:center;
  font-size:12px;color:var(--p1);max-width:760px;width:100%;padding:3px 0;
}
.bv-lv-hd{font-size:10px;color:var(--p2);letter-spacing:.08em;
  border-bottom:1px solid var(--p3);padding-bottom:4px;margin-bottom:2px;}
.bv-lv-d{white-space:nowrap;}
/* A single-session row is a call on a NAMED DATE; a multi-session row is not.
   The distinction has to survive a glance, so exact rows are brighter. */
.bv-lv.exact .bv-lv-d{color:var(--p0);}
.bv-lv-s{font-size:10px;color:var(--p2);}
.bv-lv-b{display:block;height:9px;background:rgba(255,255,255,.05);min-width:0;}
.bv-lv-b > i{display:block;height:100%;}
.bv-lv-v{text-align:right;}
.bv-lv-v > em{font-size:9px;font-style:normal;opacity:.7;margin-left:1px;}
.bv-lv-r{text-align:right;font-size:11px;color:var(--p2);}
.bv-lv-note{max-width:760px;margin-top:4px;}

/* Accuracy panel for the dated call. Deliberately sits with the dates rather
   than down in the track record: a probability with no record behind it is just
   a confident-sounding number, and the reader needs both in one glance. */
.bv-dfit{
  display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:start;max-width:760px;
  border-left:2px solid var(--p2);padding:10px 0 10px 13px;margin-top:4px;
}
.bv-dfit-n{font-size:32px;color:var(--p0);line-height:1;text-shadow:0 0 10px var(--p0);}
.bv-dfit-n > span{font-size:15px;color:var(--p2);text-shadow:none;}
.bv-dfit-t{font-size:12px;color:var(--p2);line-height:1.75;letter-spacing:.01em;}
.bv-dfit-t b{color:var(--p1);font-weight:normal;}

/* The band scale. Zones are labelled in place, so the reader never has to hold a
   legend in their head to know what CALM or HEAVY means. */
.bv-scale{
  position:relative;height:40px;max-width:760px;width:100%;margin:26px 0 30px;
}
.bv-zone{
  position:absolute;top:0;bottom:0;display:flex;align-items:center;justify-content:center;
  border-right:1px solid var(--bg);
}
/* Light, not dark. The bands are hsla(...,0.30) over the near-black ground, so
   they composite DARK -- the CALM band lands on rgb(25,69,3). Dark label text on
   that measured 1.81:1, and the .85 opacity took it lower still. Raising the
   band alpha enough for dark text would have meant ~0.65, which turns a subtle
   heat strip into a solid colour bar. AUDIT: contrast sweep 2026-09-06. */
.bv-zone > span{font-size:10px;letter-spacing:.12em;color:var(--p0);}
.bv-mk{position:absolute;top:0;bottom:0;width:0;}
.bv-mk > i{position:absolute;top:-7px;bottom:-7px;left:-1.5px;width:3px;
  box-shadow:0 0 9px currentColor;}
.bv-mk > u{
  position:absolute;left:0;transform:translateX(-50%);
  font-size:11px;color:var(--p1);letter-spacing:.1em;text-decoration:none;white-space:nowrap;
}
.bv-mk.lo > u{top:-22px;}
.bv-mk.hi > u{bottom:-24px;}
/* The loudest-day range ends: present, but they are context rather than a call,
   so they read as faint posts instead of markers. */
.bv-mk.ghost > i{opacity:.4;width:1px;box-shadow:none;background:#fff !important;}

.bv-digest{display:flex;flex-direction:column;max-width:820px;width:100%;}
.bv-dg-r{
  display:grid;grid-template-columns:210px 108px 1fr;gap:12px;align-items:baseline;
  padding:8px 0;border-bottom:1px solid var(--p4);
}
.bv-dg-r:last-child{border-bottom:none;}
.bv-dg-k{font-size:12px;color:var(--p2);letter-spacing:.08em;}
.bv-dg-v{font-size:19px;color:var(--p0);text-align:right;text-shadow:0 0 7px var(--p0);}
.bv-dg-v > i{font-size:11px;color:var(--p2);font-style:normal;margin-left:1px;text-shadow:none;}
.bv-dg-n{font-size:12px;color:var(--p2);letter-spacing:.01em;line-height:1.7;}

/* Month calendar: seven columns so days sit under their weekday, capped near
   760px -- across the full pane a cell comes out 175px wide and reads as a
   letterbox. */
/* The calendar and the note that explains it. Wrapped so the note can sit
   alongside on a wide screen; stacked in the same order everywhere else. The
   8px gaps are the ones .bv-sec used to provide before these two wrappers
   existed. */
.bv-calrow{display:flex;flex-direction:column;gap:8px;}
.bv-calmain{display:flex;flex-direction:column;gap:8px;min-width:0;}
.bv-dow,.bv-cal,.bv-legend{max-width:760px;width:100%;}
.bv-dow{
  display:grid;grid-template-columns:repeat(7,1fr);gap:3px;
  font-size:11px;color:var(--p1);letter-spacing:.1em;text-align:center;
}
.bv-dow > span.we{color:var(--p2);}
.bv-cal{display:grid;grid-template-columns:repeat(7,1fr);gap:3px;}
.bv-cell{
  position:relative;display:flex;flex-direction:column;justify-content:space-between;
  min-width:0;aspect-ratio:1.3;min-height:62px;
  border:1px solid var(--p3);padding:4px 5px;font-style:normal;
}
.bv-cell-pad{border-color:transparent;background:none !important;}
/* A day the market is shut: present but plainly inert, so a short week reads as
   a holiday rather than a rendering fault. */
.bv-cell-off{background:none !important;border-style:dashed;border-color:var(--p4);}
.bv-cell-off > u{color:var(--p2d);}
.bv-cell > u{
  flex:none;font-size:11px;color:var(--p1);text-align:left;text-decoration:none;line-height:12px;
}
/* The expected move is the reading; the band names it underneath. */
.bv-cell > s{
  flex:none;font-size:15px;text-align:center;text-decoration:none;line-height:1;
  text-shadow:0 0 7px currentColor;
}
.bv-cell > s > em{font-size:9px;font-style:normal;opacity:.75;}
.bv-cell > o{
  /* --p1, not --p2: the cell has a tinted background of its own, which pulled
     --p2 down to 4.37:1 against it. Measured on the live grid 2026-09-06. */
  flex:none;font-size:8px;color:var(--p1);letter-spacing:.08em;text-align:center;
}
.bv-cell.we{opacity:.6;}
/* The watched stretch is outlined, never recoloured, so it cannot be mistaken
   for a band. */
.bv-cell.hot{
  border-color:var(--amber);
  box-shadow:inset 0 0 0 1px rgba(255,176,0,.45), 0 0 9px rgba(255,176,0,.18);
}
.bv-legend{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  font-size:10px;color:var(--p2);letter-spacing:.1em;
}
.bv-legend > span{display:inline-flex;align-items:center;gap:4px;}
.bv-legend i{display:inline-block;width:14px;height:10px;border:1px solid;}

.bv-hot{
  font-size:12px;color:var(--amber);letter-spacing:.05em;
  border-left:2px solid var(--amber);background:rgba(255,176,0,.05);
  padding:9px 12px;display:flex;flex-direction:column;gap:5px;max-width:760px;
}
/* "Nothing stands out" is the common case and a real answer, so it is stated
   plainly rather than styled like a warning. */
.bv-hot.flat{color:var(--p1);border-left-color:var(--p2);background:none;}
.bv-hot-s{font-size:12px;color:var(--p2);letter-spacing:.01em;line-height:1.75;}

/* How it is made. A page of numbers with no visible mechanism reads as an
   oracle; the honest account is narrower and more useful than that. */
.bv-method{display:flex;flex-direction:column;gap:12px;max-width:820px;}
.bv-step{display:grid;grid-template-columns:26px 1fr;gap:11px;align-items:start;}
.bv-step-n{
  font-size:12px;color:var(--bg);background:var(--p1);
  width:22px;height:22px;display:flex;align-items:center;justify-content:center;
}
.bv-step-t{font-size:13px;color:var(--p0);letter-spacing:.08em;margin-bottom:3px;}
.bv-step-b{font-size:12px;color:var(--p2);letter-spacing:.01em;line-height:1.75;}
.bv-step-b em{color:var(--p1);font-style:normal;}

.bv-chart{max-width:760px;width:100%;display:flex;flex-direction:column;gap:6px;}

/* ── Chart: residual strip, axis bounds, hover ───────────────────────────────
   The two lines alone had no y-axis and made the reader subtract by eye. The
   strip under them IS the subtraction, and the stack is one hover surface so a
   level and its error light up together. */
.bv-chart-stack{position:relative;display:flex;flex-direction:column;gap:3px;cursor:crosshair;}
.bv-chart-main{position:relative;}
.bv-chart-res{
  width:100%;height:40px;display:block;
  border-top:1px solid var(--p4);padding-top:2px;
}
/* Bounds live in HTML, not in the SVG: preserveAspectRatio="none" stretches the
   viewBox non-uniformly, and <text> inside it comes out visibly squashed. */
.bv-ax{
  position:absolute;right:3px;font-size:9px;letter-spacing:.05em;
  color:var(--p2d);pointer-events:none;background:rgba(2,3,2,.72);padding:0 3px;
}
.bv-ax-t{top:1px;}
.bv-ax-b{bottom:1px;}
.bv-ax-res{position:absolute;right:3px;bottom:1px;font-size:9px;letter-spacing:.05em;
  color:var(--p2d);pointer-events:none;background:rgba(2,3,2,.72);padding:0 3px;}
.bv-cursor{
  position:absolute;top:0;bottom:0;width:1px;background:var(--p1);
  opacity:0;pointer-events:none;transition:opacity .08s;box-shadow:0 0 6px var(--p1);
}
/* Dated x-axis under a record chart. Ticks are absolutely positioned by percent,
   which lines them up with the svg because it stretches (preserveAspectRatio none).
   The first and last labels anchor to their edges rather than centring, so neither
   is clipped by the chart's own bounds. */
.bv-xax{position:relative;height:13px;margin-top:2px;}
.bv-xax > span{position:absolute;top:2px;font-size:9px;letter-spacing:.06em;
  color:var(--p2);white-space:nowrap;transform:translateX(-50%);}
.bv-xax > span.first{transform:none;}
.bv-xax > span.last{transform:translateX(-100%);}
.bv-xax > i{position:absolute;top:-2px;width:1px;height:4px;background:var(--p3);}
.bv-chart-read{
  display:flex;gap:14px;flex-wrap:wrap;align-items:baseline;
  font-size:11px;color:var(--p2);letter-spacing:.04em;min-height:17px;
}
.bv-chart-read b{color:var(--p1);font-weight:normal;}
.bv-read-hint{color:var(--p2d);letter-spacing:.01em;text-transform:none;}
.bv-read-d.ok{color:var(--p0);}
.bv-read-d.mid{color:var(--amber);}
.bv-read-d.off{color:var(--red);}

/* Trade Sim admin: SELL books a real exit; the del button beside it only drops the
   row and records nothing. They must not look alike. */
.ap-sell-btn{background:transparent;border:1px solid var(--amber);color:var(--amber);
  font:inherit;font-size:10px;letter-spacing:.08em;padding:2px 7px;cursor:pointer;}
.ap-sell-btn:hover{background:var(--amber);color:var(--bg0);}

/* Forward map. Same frame as the record charts -- .bv-chart gives it the width and
   the column, .bv-chart-main carries the axis labels, .bv-chart-k the key. */
.bv-chart-fwd .bv-chart-main > svg{width:100%;height:112px;display:block;}
.bv-xax-2{height:12px;}
.bv-xax-2.r2{margin-top:0;}
.bv-xax-2 > span{font-size:8.5px;letter-spacing:.04em;}
.bv-xax-2 > span.ex{color:var(--p1);}
.bv-ax-typ{position:absolute;right:3px;top:50%;font-size:8.5px;letter-spacing:.05em;
  color:var(--p2);transform:translateY(-135%);pointer-events:none;}
.bv-chart-k i.k-ex{display:inline-block;width:9px;height:9px;background:hsl(100,95%,46%);
  opacity:.9;margin-right:4px;vertical-align:-1px;}
.bv-chart-k i.k-sp{display:inline-block;width:9px;height:9px;background:hsl(100,95%,46%);
  opacity:.34;margin-right:4px;vertical-align:-1px;}
.bv-chart-k i.k-ty{display:inline-block;width:11px;height:0;border-top:1px dashed var(--p2);
  margin-right:4px;vertical-align:3px;}

/* Forecast-against-actual. Square, because a 45-degree reference line is only a
   45-degree line when the axes share a scale. */
.bv-chart-scatter{max-width:340px;}
.bv-chart-scatter > svg{width:100%;height:auto;aspect-ratio:1;background:transparent;}
/* The wide-screen block frees every .bv-chart of its max-width and pins its svg
   to 150px tall. That is right for the line charts and wrong here: a square
   viewBox in a short wide box letterboxes into a postage stamp, and a
   45-degree reference line stops being 45 degrees the moment the axes differ.
   Matched selector weight, declared later, so these win. */
.bv-wrap .bv-chart-scatter{max-width:340px;}
.bv-wrap .bv-chart-scatter > svg{height:auto;aspect-ratio:1;}

/* View switcher, in the panel header beside the title. */
.bv-nc-views{display:inline-flex;gap:6px;margin-left:12px;vertical-align:middle;}
.bv-nc-view{
  font-family:var(--mono);font-size:9px;letter-spacing:.1em;
  background:none;border:1px solid var(--p3);color:var(--p2);
  padding:3px 8px;cursor:pointer;
}
.bv-nc-view:hover{border-color:var(--p2);color:var(--p1);}
.bv-nc-view.on{border-color:var(--p1);color:var(--p0);}

.bv-chart > svg{
  width:100%;height:104px;display:block;border:1px solid var(--p3);background:var(--bg2);
}
.bv-chart-k{display:flex;gap:16px;flex-wrap:wrap;font-size:10px;color:var(--p2);letter-spacing:.06em;}
.bv-chart-k > span{display:inline-flex;align-items:center;gap:5px;}
.bv-chart-k i{display:inline-block;width:15px;height:0;border-top:2px solid;}
.bv-chart-k i.k-f{border-top-style:dashed;color:var(--amber);}
.bv-chart-k i.k-a{color:var(--p0);}
.bv-chart-r{margin-left:auto;color:var(--p2);}

/* Chart and the three headline numbers. Stacked on a phone; side by side on a
   wide screen, where the chart takes the room and the numbers read as a rail
   beside it rather than a row underneath it. */
.bv-recrow{display:flex;flex-direction:column;gap:10px;}
.bv-stats{display:flex;gap:26px;flex-wrap:wrap;max-width:760px;}
.bv-stats > span{
  display:flex;flex-direction:column;gap:2px;font-size:10px;color:var(--p2);letter-spacing:.08em;
}
.bv-stats b{font-size:22px;color:var(--p0);font-weight:normal;text-shadow:0 0 8px var(--p0);}

.bv-details{max-width:760px;}
.bv-details > summary{
  font-size:12px;color:var(--p1);letter-spacing:.08em;cursor:pointer;padding:6px 0;list-style:none;
}
.bv-details > summary::before{content:"> ";}
.bv-details[open] > summary::before{content:"v ";}
.bv-details > summary:hover{color:var(--p0);}

.bv-r{
  display:grid;grid-template-columns:74px 1fr 1fr 58px 1fr 1fr 44px;
  gap:7px;align-items:center;font-size:12px;color:var(--p1);max-width:760px;width:100%;
}
.bv-r-hd{
  font-size:10px;color:var(--p2);letter-spacing:.08em;
  border-bottom:1px solid var(--p3);padding-bottom:4px;
}
.bv-r-m{color:var(--p1);white-space:nowrap;}
.bv-r-v{text-align:right;}
.bv-r-e{text-align:right;}
.bv-r-e.ok{color:var(--p0);}
.bv-r-e.mid{color:var(--amber);}
.bv-r-e.off{color:var(--red);}
.bv-r-h{font-size:10px;text-align:right;letter-spacing:.08em;}
.bv-r-h.ok{color:var(--p0);}
.bv-r-h.off{color:var(--p2);}
/* The written read, between the verdict line and the cards. Sits inside a rule
   rather than a box: it is prose, and a panel around it would make it compete
   with the numbers it is introducing. */
.bv-read{
  border-left:2px solid var(--p3);padding:2px 0 2px 12px;
  display:flex;flex-direction:column;gap:6px;max-width:820px;
}
.bv-read-hd{font-size:12px;color:var(--p1);letter-spacing:.14em;}
.bv-read-s{display:block;font-size:11px;color:var(--p2d);letter-spacing:.01em;
  text-transform:none;margin-top:3px;}
.bv-read-b{
  margin:0;font-size:13px;color:var(--p1);letter-spacing:.01em;line-height:1.8;
}

/* ── The two blocks ──────────────────────────────────────────────────────────
   The tab answers two questions with two different models, two horizons and two
   records. Interleaved they read as one thing, so each gets a labelled rule. */
.bv-block{
  display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;
  margin:30px 0 12px;padding-bottom:7px;border-bottom:1px solid var(--p3);
}
.bv-block-1{margin-top:14px;}
.bv-block-t{
  font-size:12px;letter-spacing:.2em;color:var(--p0);
  text-shadow:0 0 8px rgba(0,255,65,.35);white-space:nowrap;
}
.bv-block-s{font-size:11px;color:var(--p2d);letter-spacing:.01em;flex:1;min-width:180px;}

/* The record before it has a sample worth reading. One line, a fill bar and the
   rows behind a disclosure -- present and countable, but not four statistics
   and a chart to say n=3. It promotes itself at BV_NC_MIN with no switch. */
.bv-ncrec-slim{background:transparent;}
.bv-nr-slim{
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  font-size:11px;letter-spacing:.06em;color:var(--p2);
}
.bv-nr-slim-t{color:var(--p1);letter-spacing:.14em;white-space:nowrap;}
.bv-nr-slim-bar{
  flex:0 0 120px;height:5px;background:var(--p4);
  border:1px solid var(--p3);position:relative;overflow:hidden;
}
.bv-nr-slim-bar > i{
  position:absolute;left:0;top:0;bottom:0;background:var(--p1);
  box-shadow:0 0 7px var(--p1);display:block;
}
.bv-nr-slim-n{color:var(--p1);white-space:nowrap;}
.bv-nr-slim-s{color:var(--p2d);letter-spacing:.01em;text-transform:none;flex:1;min-width:180px;}

/* The bias sentence. A signed number on its own invites the wrong correction,
   so the panel says what it means underneath the statistics. */
.bv-nr-bias{
  font-size:12px;color:var(--p2);letter-spacing:.01em;line-height:1.7;
  border-left:2px solid var(--p3);padding:7px 0 7px 11px;margin:14px 0 4px;max-width:760px;
}
.bv-nr-bias b{color:var(--p1);font-weight:normal;}

/* HOW THIS IS MADE -- see bvMethod() for why it is collapsed.
   CLOSED it is a button, not a panel: no border, no fill, no full-width header
   bar and no subtitle, so it takes one line at the bottom of the month instead
   of a block of chrome nobody reads twice. OPEN it becomes an ordinary panel
   again, which is what the content wants once you have asked for it. */
.bv-method-wrap > summary{cursor:pointer;list-style:none;}
.bv-method-wrap > summary::-webkit-details-marker{display:none;}
.bv-method-wrap > summary::after{content:"▸";color:var(--p2);font-size:10px;margin-left:8px;}
.bv-method-wrap[open] > summary::after{content:"▾";}
.bv-method-wrap > summary:hover{color:var(--p0);}
.bv-method-wrap > .bv-method{margin-top:14px;}

.bv-body > .bv-method-wrap:not([open]){
  /* display:block matters. .bv-sec is a flex container, which makes <summary> a
     flex ITEM -- and a flex item blockifies, so inline-flex on it was silently
     becoming flex and stretching the button to the full 1801px grid cell. */
  display:block;border:none;background:transparent;padding:0;
}
/* Beats `.bv-body > .bv-sec > .bv-sec-t`, which would otherwise draw a header
   rule under a control that is only one line tall. */
.bv-body > .bv-method-wrap:not([open]) > summary{
  display:inline-flex;align-items:center;width:fit-content;
  border:1px solid var(--p3);background:var(--bg1);
  padding:8px 14px;margin:0;border-bottom:1px solid var(--p3);
  font-size:11px;letter-spacing:.14em;color:var(--p2);
}
.bv-body > .bv-method-wrap:not([open]) > summary:hover{
  border-color:var(--p2);color:var(--p0);
}
/* The subtitle explains the section. On a closed button it is just noise. */
.bv-method-wrap:not([open]) .bv-sec-s{display:none;}

/* The daily record's row. Six columns rather than the monthly record's seven,
   but the cell classes (bv-r-m / -v / -e / -h) are shared, so only the track
   list differs. */
.bv-nr{
  display:grid;grid-template-columns:64px 1fr 1fr 1fr 62px 62px;
  gap:7px;align-items:center;font-size:12px;color:var(--p1);max-width:760px;width:100%;
}
.bv-nr-none{
  font-size:12px;color:var(--p2);letter-spacing:.02em;line-height:1.75;max-width:760px;
}
.bv-nr-none b{color:var(--p1);font-weight:normal;}

.bv-warn{font-size:12px;color:var(--amber);letter-spacing:.06em;border-left:2px solid var(--amber);
  background:rgba(255,176,0,.05);padding:7px 10px;line-height:1.6;}
.bv-foot{
  border-top:1px solid var(--p4);padding-top:8px;
  display:flex;flex-direction:column;gap:4px;
  font-size:12px;color:var(--p2);letter-spacing:.02em;max-width:820px;
}
.bv-foot-note{color:var(--p2);opacity:.9;line-height:1.75;}

@media (max-width:600px){
  .bv-head{padding:7px 10px;}
  .bv-head-t{font-size:13px;}
  .bv-wrap{padding:10px;gap:11px;}
  .bv-big{font-size:27px;}
  .bv-v-word{font-size:22px;}
  .bv-v-lead,.bv-v-tail{font-size:12px;}
  .bv-day-o{font-size:25px;}
  .bv-dfit{grid-template-columns:1fr;gap:6px;}
  .bv-dfit-n{font-size:26px;}
  /* A multi-session label ("15 SEP -> 18 SEP") needs more room than a single
     date, and clipped it at 92px. */
  .bv-lv{grid-template-columns:118px 1fr 62px;gap:6px;font-size:10px;}
  .bv-lv-s,.bv-lv-r{display:none;}
  .bv-lv-d{white-space:nowrap;letter-spacing:0;}
  .bv-stats{gap:16px;}
  .bv-stats b{font-size:18px;}
  /* 210px of label plus a value column leaves the note ~90px, which wraps to
     nonsense; stack instead. */
  .bv-dg-r{grid-template-columns:1fr auto;gap:4px 10px;}
  .bv-dg-n{grid-column:1 / -1;}
  .bv-dg-v{font-size:17px;}
  /* aspect-ratio plus min-height makes the MIN-HEIGHT drive the width: 52px x
     1.05 = 54.6px inside a 48.1px column, so every row overflowed by 6px. Fix a
     height instead and let the grid own the width. */
  .bv-cell{aspect-ratio:auto;height:54px;min-height:0;padding:3px 2px;}
  .bv-cell > s{font-size:12px;}
  .bv-cell > o{display:none;}
  .bv-zone > span{font-size:8px;letter-spacing:.02em;}
  /* Drop the peak pair first on the record: the level call and its miss are the
     reading, the peak columns are context. */
  .bv-r{grid-template-columns:60px 1fr 1fr 48px 40px;font-size:11px;gap:5px;}
  .bv-r > .bv-r-v:nth-child(5),.bv-r > .bv-r-v:nth-child(6){display:none;}
}
}
@media (max-width:600px){
  /* Chrome discipline: this pane stacks a title, a view toggle, a mode
     group, a picker and an indicator toolbar above the chart. Left at
     desktop metrics that's ~260px of a 812px viewport before any data. */
  .gl-head{padding:6px 10px;gap:6px;}
  .gl-sub{display:none;}
  .gl-ctrls{gap:6px;width:100%;}
  .gl-ctrls .tf-btn{padding:2px 5px;font-size:9px;}
  .gl-d-tools{gap:6px 8px;margin-bottom:6px;}
  .gl-d-tools .tf-btn{padding:2px 5px;font-size:9px;}
  .gl-d-indlbl{padding-left:2px;}
  /* The old strip's padding lived here; the wrapper carries it now that the
     picker itself is a floating menu. */
  .ch-pick-wrap{padding:6px 10px;}
  .ch-head{padding:7px 10px;}

  /* Thirty-five tiles stacked two-wide is a very long page. Each band
     becomes its own horizontal strip instead, so a band is one swipe rather
     than a scroll region you have to get past. */
  .gl-grid,.gl-band-body{
    display:flex;flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden;
    gap:7px;padding:10px;
    scroll-snap-type:x proximity;
    -webkit-overflow-scrolling:touch;
  }
  /* min-width:0 matters: flex items default to min-width:auto, so a long
     unbreakable label (a price, a recommendation clause) overrides the basis
     and that tile comes out wider than the rest of the row. */
  .gl-grid > .gl-card,.gl-band-body > .gl-card{
    flex:0 0 152px;min-width:0;scroll-snap-align:start;padding:7px 8px 6px;
  }
  .gl-grid > .gl-card .gl-px,.gl-band-body > .gl-card .gl-px{font-size:10px;}
  /* The empty/loading states are not tiles and shouldn't be squeezed. */
  .gl-grid > .gl-empty,.gl-band-body > .gl-empty{flex:1 0 auto;}
}

/* ── Full-chart view (inside the Charts tab) ── */
.ch-head{
  display:flex;align-items:baseline;justify-content:space-between;gap:12px;
  padding:9px 14px;border-bottom:1px solid var(--p4);flex-wrap:wrap;
}
.ch-id{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;min-width:0;}
/* Instrument chips — one scrollable strip rather than a wall of buttons. */
/* The instrument picker is now a dropdown (see .gl-menu for the open/close
   mechanics). Wider than the toolbar menus because it holds ~50 chips, and
   height-capped so a long saved list scrolls instead of running off-screen. */
.ch-pick-wrap{padding:7px 14px;border-bottom:1px solid var(--p4);}
.ch-pick-btn{letter-spacing:.1em;}
.ch-picker.gl-menu{min-width:250px;max-width:min(94vw,430px);max-height:min(64vh,460px);overflow-y:auto;}
.ch-pgroup{display:flex;flex-direction:column;align-items:stretch;gap:4px;padding:3px 2px 6px;}
.ch-pchips{display:flex;flex-wrap:wrap;gap:4px;}
.ch-plabel{font-size:8px;color:var(--p2);letter-spacing:.14em;margin-right:2px;}
.ch-chip{
  font-size:10px;color:var(--p1);border:1px solid var(--p4);padding:2px 6px;
  cursor:pointer;letter-spacing:.06em;flex:0 0 auto;
}
.ch-chip:hover{color:var(--p0);border-color:var(--p2);}
.ch-chip.on{color:var(--bg);background:var(--p0);border-color:var(--p0);}
.ch-hint{
  font-size:9px;color:var(--p2);letter-spacing:.08em;padding:8px 0 0;
}
@media (max-width:600px){ .ch-hint{display:none;} }

/* ── Stock search ──
   Collapsed by default. It sits above the plot, and the plot is sized from
   whatever room is left, so this row is only allowed to exist while it's
   being used. */
.ch-search{border-bottom:1px solid var(--p4);background:rgba(0,0,0,.15);}
.ch-srow{display:flex;align-items:center;gap:8px;padding:7px 14px;}
.ch-sicon{font-size:13px;color:var(--p2);}
.ch-sinput{
  flex:1 1 auto;min-width:0;background:transparent;border:none;outline:none;
  font-family:inherit;font-size:12px;letter-spacing:.08em;color:var(--p0);
  text-transform:uppercase;
}
.ch-sinput::placeholder{color:var(--p2d);letter-spacing:.1em;}
.ch-sclose{
  font-size:9px;color:var(--p2);letter-spacing:.12em;cursor:pointer;
  border:1px solid var(--p4);padding:2px 5px;flex:0 0 auto;
}
.ch-sclose:hover{color:var(--p0);border-color:var(--p2);}
.ch-sresults{max-height:230px;overflow-y:auto;}
.ch-sres{
  display:flex;align-items:baseline;gap:10px;padding:6px 14px;cursor:pointer;
  border-top:1px solid var(--p4);
}
.ch-sres:hover{background:rgba(0,255,153,.06);}
.ch-sres.busy{opacity:.45;pointer-events:none;}
.ch-sres-t{font-size:11px;color:var(--p0);letter-spacing:.08em;flex:0 0 auto;min-width:52px;}
.ch-sres-n{
  font-size:10px;color:var(--p1);flex:1 1 auto;min-width:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.ch-sres-x{font-size:9px;color:var(--p2);letter-spacing:.08em;flex:0 0 auto;}
.ch-sempty{font-size:10px;color:var(--p2);letter-spacing:.08em;padding:8px 14px;border-top:1px solid var(--p4);}
/* Saved tiles carry a way out where a pick carries its verdict. Sized to be
   found: the first version was 8px in the dimmest colour on the palette and
   users could not locate it. */
.gl-unsave{
  font-size:9px;color:var(--p1);letter-spacing:.1em;border:1px solid var(--p3);
  padding:2px 6px;cursor:pointer;
}
.gl-unsave:hover{color:var(--bg);background:var(--red);border-color:var(--red);}

/* Saved marker in the instrument header — also the way out from the chart
   itself, which previously had none. */
.gl-save-state{display:inline-flex;align-items:center;gap:6px;flex:0 0 auto;}
.gl-save-on{font-size:9px;color:var(--p0);letter-spacing:.12em;}
.gl-save-rm{
  font-size:9px;color:var(--p2);letter-spacing:.12em;cursor:pointer;
  border:1px solid var(--p4);padding:1px 5px;
}
.gl-save-rm:hover{color:var(--bg);background:var(--red);border-color:var(--red);}

/* ── TA read ──
   Amber against a wall of green is the one colour here that reads as "look at
   this" without meaning bearish, which red would. */
.gl-ta-view{color:var(--amber);border-color:var(--amber);}
.gl-ta-view:hover{color:var(--amber);border-color:var(--amber);background:rgba(255,176,0,.12);}
.gl-ta-view.on{color:var(--bg);background:var(--amber);border-color:var(--amber);}

/* Verdict colours, shared by the header chip and the full read. Scoped to the
   two carriers rather than left as bare .buy/.sell/.neutral — those names are
   already taken by the heatmap and the bias labels. */
.ta-chip,.ta-verdict{--ta:var(--p2);}
.ta-chip.strong-buy, .ta-verdict.strong-buy {--ta:var(--p0);}
.ta-chip.buy,        .ta-verdict.buy        {--ta:var(--p1);}
.ta-chip.neutral,    .ta-verdict.neutral    {--ta:var(--amber);}
.ta-chip.sell,       .ta-verdict.sell       {--ta:var(--red);}
.ta-chip.strong-sell,.ta-verdict.strong-sell{--ta:var(--red);}

/* Centre-anchored segment meter */
.ta-meter{display:inline-flex;gap:2px;align-items:center;}
.ta-seg{width:4px;height:12px;background:var(--p4);flex:0 0 auto;}
.ta-seg.mid{background:var(--p3);}
.ta-seg.on{background:var(--ta);}

/* Header chip — the way into the full read */
.ta-chip{
  display:inline-flex;align-items:center;gap:7px;cursor:pointer;
  border:1px solid var(--ta);padding:2px 7px;color:var(--ta);
}
.ta-chip:hover{background:rgba(255,255,255,.04);}
.ta-chip-k{font-size:8px;letter-spacing:.16em;color:var(--p2d);}
.ta-chip-w{font-size:9px;letter-spacing:.12em;}
.ta-chip.strong-buy .ta-chip-w{text-shadow:0 0 6px rgba(0,255,65,.5);}

/* Full read */
.ta-body{padding:12px 14px 16px;}
.ta-verdict{
  display:flex;gap:16px;justify-content:space-between;flex-wrap:wrap;
  border:1px solid var(--ta);background:var(--bg2);padding:11px 13px;margin-bottom:12px;
}
.ta-v-lbl{font-size:8px;color:var(--p2);letter-spacing:.16em;}
.ta-v-word{font-size:23px;color:var(--ta);letter-spacing:.1em;line-height:1.25;}
.ta-verdict.strong-buy .ta-v-word{text-shadow:0 0 16px rgba(0,255,65,.4),0 0 5px rgba(0,255,65,.5);}
.ta-verdict.strong-sell .ta-v-word{text-shadow:0 0 16px rgba(240,38,38,.45);}
.ta-v-sub{font-size:10px;color:var(--p2);letter-spacing:.08em;}
.ta-v-sc{color:var(--ta);margin-left:8px;}
.ta-v-r{display:flex;flex-direction:column;justify-content:flex-end;gap:6px;align-items:flex-end;}
.ta-scale{display:flex;align-items:center;gap:9px;font-size:8px;color:var(--p2d);letter-spacing:.12em;}
.ta-v-as{font-size:8px;color:var(--p2d);letter-spacing:.1em;}

/* Written chart read — prose, so it gets prose measure and line height */
.ta-read{border:1px solid var(--p4);border-left:2px solid var(--p2);padding:10px 13px;margin-bottom:12px;background:var(--bg2);}
.ta-read.pending{color:var(--p2d);font-size:10px;letter-spacing:.06em;border-left-color:var(--p4);}
.ta-read-hd{display:flex;justify-content:space-between;align-items:baseline;gap:12px;flex-wrap:wrap;}
.ta-read-t{font-size:9px;color:var(--p2);letter-spacing:.16em;}
.ta-read-age{font-size:8px;color:var(--p2d);letter-spacing:.1em;}
.ta-read-h{font-size:14px;color:var(--p0);letter-spacing:.04em;margin:5px 0 6px;line-height:1.35;}
.ta-read-b{font-size:12px;color:var(--p1);line-height:1.65;max-width:82ch;}
.ta-read-l{font-size:11px;color:var(--p2);margin-top:7px;line-height:1.5;}
.ta-read-f{font-size:8px;color:var(--p2d);line-height:1.5;margin-top:8px;padding-top:6px;border-top:1px solid var(--p4);max-width:82ch;}

.ta-cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:12px;}
.ta-col{border:1px solid var(--p4);}
.ta-col-hd{
  display:flex;justify-content:space-between;align-items:baseline;gap:8px;flex-wrap:wrap;
  padding:6px 9px;border-bottom:1px solid var(--p4);background:var(--bg2);
}
.ta-col-t{font-size:10px;color:var(--p1);letter-spacing:.14em;}
.ta-col-c{font-size:9px;color:var(--p2d);letter-spacing:.08em;}
.ta-row{display:grid;grid-template-columns:1fr auto 62px;gap:8px;align-items:baseline;padding:3px 9px;}
.ta-row:nth-child(odd){background:rgba(0,255,65,.015);}
.ta-rn{font-size:10px;color:var(--p2);letter-spacing:.06em;}
.ta-rv{font-size:10px;color:var(--p1);text-align:right;}
.ta-rvote{font-size:9px;letter-spacing:.1em;text-align:right;}
.ta-rvote.buy,.ta-col-c b.buy{color:var(--p0);}
.ta-rvote.sell,.ta-col-c b.sell{color:var(--red);}
.ta-rvote.neu,.ta-col-c b.neu{color:var(--p2d);}
.ta-foot{font-size:9px;color:var(--p2d);letter-spacing:.06em;line-height:1.6;padding-top:11px;max-width:78ch;}
@media (max-width:600px){
  .ta-body{padding:10px;}
  .ta-v-word{font-size:19px;}
  .ta-v-r{align-items:flex-start;}
  .ta-row{grid-template-columns:1fr auto 56px;}
}

/* Expanded interactive chart */
.gl-detail{display:none;border-top:1px solid var(--p4);padding:10px 14px 14px;}
.gl-detail.open{display:block;}
.gl-d-etf{font-size:15px;color:var(--p0);letter-spacing:.08em;}
.gl-d-name{font-size:10px;color:var(--p2);letter-spacing:.1em;text-transform:uppercase;}
.gl-d-read{font-size:11px;color:var(--p1);margin-left:auto;white-space:nowrap;}
.gl-d-date{color:var(--p2);}
.gl-d-k{color:var(--p2d);font-size:9px;letter-spacing:.08em;}
.gl-d-link{font-size:9px;color:var(--p2);letter-spacing:.08em;cursor:pointer;border:1px solid var(--p4);padding:2px 6px;}
.gl-d-link:hover{color:var(--p0);border-color:var(--p2);}
/* Toolbar for the selected instrument — chart type, window, and studies. */
.gl-d-tools{display:flex;align-items:center;gap:10px 14px;flex-wrap:wrap;margin-bottom:9px;}
.gl-d-ind{margin-left:auto;flex-wrap:wrap;}
.gl-d-tools .tf-btn.off{opacity:.35;pointer-events:none;}
/* Separates overlays (drawn on the price) from studies (their own panel). */
.gl-d-indlbl{
  font-size:8px;color:var(--p2);letter-spacing:.14em;
  padding:0 2px 0 6px;align-self:center;
}
.gl-d-indlbl:first-child{padding-left:0;}
.gl-d-measure.on{color:var(--amber);border-color:var(--amber);}
.gl-d-fit.on{color:var(--cyan);border-color:var(--cyan);}
.gl-d-sig.on{color:var(--p0);border-color:var(--p0);}
@media (max-width:600px){ .gl-d-ind{margin-left:0;} }

/* Height is set inline by the renderer, which derives it from the room the
   pane actually has. This is only what the box looks like before that first
   measurement. */
.gl-d-wrap{position:relative;height:400px;cursor:crosshair;touch-action:none;}
.gl-d-svg{width:100%;display:block;}
.gl-d-wrap.measuring{cursor:cell;}
.gl-d-wrap.drawing{cursor:crosshair;}
/* Cursors are the affordance here: a fat transparent line says "clickable" and
   a handle says "draggable" without either being visible. */
.gl-draw-hit{cursor:pointer;}
.gl-draw-h{cursor:grab;}
.gl-draw-del{cursor:pointer;}
.gl-draw-h:active{cursor:grabbing;}
/* Chart toolbar dropdowns. Reparented to <body> on open, so position:fixed. */
.gl-menu-wrap{position:relative;display:inline-flex;}
.gl-menu-btn{cursor:pointer;}
.gl-menu{
  display:none;position:fixed;z-index:130;background:var(--bg);
  border:1px solid var(--p3);min-width:178px;padding:5px;
  box-shadow:0 6px 20px rgba(0,0,0,.7);
}
.gl-menu.open{display:flex;flex-direction:column;gap:3px;}
.gl-menu .tf-btn{text-align:left;padding:5px 8px;}
.gl-menu-lbl{
  font-size:8px;letter-spacing:.14em;color:var(--p2);
  padding:5px 4px 2px;text-transform:uppercase;
}
/* The armed-tool hint. Amber because it reports a mode the next drag obeys —
   the one line on the chart that changes what the pointer does. */
.ch-hint.armed{color:var(--amber);}
.gl-d-draw.on{color:var(--cyan);border-color:var(--cyan);}
.gl-d-clear{color:var(--p2);}
.gl-d-clear:hover{color:var(--red);border-color:var(--red);}
.gl-d-wrap.panning{cursor:grabbing;}
.gl-d-wrap:not(.measuring):not(.panning){cursor:crosshair;}

/* Price-axis grip — drag to stretch the vertical scale. Sits over the
   gutter only, so the plot keeps its crosshair and measure behaviour. */
.gl-axis-grip{
  position:absolute;top:0;bottom:0;right:0;
  cursor:ns-resize;touch-action:none;background:transparent;
}
.gl-axis-grip:hover{background:rgba(0,255,65,.04);}

/* Signal detail — the record behind a level band or a trade marker */
.gl-sig-hit{cursor:pointer;}
.gl-sig-pop{
  position:absolute;z-index:6;min-width:212px;max-width:290px;
  background:var(--bg2);border:1px solid var(--p2);padding:9px 11px 8px;
  box-shadow:0 0 22px rgba(0,0,0,.6);
}
/* padding-right reserves the ✕'s corner. Without it the right-aligned source
   label runs under an absolutely-positioned control and the two overlap. */
.gl-sig-hd{display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin-bottom:6px;padding-right:16px;}
.gl-sig-t{font-size:10px;color:var(--p0);letter-spacing:.12em;}
/* --p1, not --p2: the title above it is --p0, so this still reads as secondary
   while clearing the contrast floor that --p2 sits under at this size. */
.gl-sig-src{font-size:9px;color:var(--p1);letter-spacing:.1em;text-align:right;white-space:nowrap;}
.gl-sig-tag{
  font-size:9px;color:var(--amber);border:1px solid var(--amber);
  display:inline-block;padding:1px 5px;margin-bottom:7px;letter-spacing:.08em;
}
.gl-sig-row{display:flex;align-items:baseline;gap:8px;padding:2px 0;}
.gl-sig-k{font-size:9px;color:var(--p2);letter-spacing:.1em;min-width:74px;}
.gl-sig-k.e{color:var(--cyan);} .gl-sig-k.t{color:var(--p0);} .gl-sig-k.s{color:var(--red);}
.gl-sig-v{font-size:11px;color:var(--p1);margin-left:auto;}
.gl-sig-v.good{color:var(--p0);} .gl-sig-v.poor{color:var(--red);}
.gl-sig-away{font-size:9px;color:var(--p2);min-width:46px;text-align:right;}
/* This footer carries the disclaimers — "no position was taken", "paper money" —
   which are the lines that must survive a glance, not the ones to shrink. Was
   8px on --p3, a colour this palette reserves for borders. */
.gl-sig-foot{
  font-size:10px;color:var(--p1);letter-spacing:.04em;line-height:1.6;
  margin-top:7px;padding-top:6px;border-top:1px solid var(--p4);
}
.gl-sig-x{
  position:absolute;top:4px;right:5px;font-size:12px;color:var(--p2);
  cursor:pointer;line-height:1;padding:2px 4px;
}
.gl-sig-x:hover{color:var(--p0);}

/* Measure tool overlay */
.gl-meas{position:absolute;inset:0;pointer-events:none;display:none;}
.gl-meas-box{position:absolute;border:1px solid;box-sizing:border-box;}
.gl-meas-tag{
  position:absolute;transform:translate(6px,-50%);white-space:nowrap;
  font-size:10px;background:var(--bg);border:1px solid;padding:2px 5px;
}
.gl-cross-line{position:absolute;top:0;bottom:0;width:1px;background:var(--p3);opacity:.55;pointer-events:none;display:none;transform:translateX(-0.5px);}
/* Horizontal arm + the price at that height, tagged in the axis gutter. Stops
   short of the gutter so the tag sits in it rather than over the line. */
.gl-cross-hline{
  position:absolute;left:0;height:1px;background:var(--p3);opacity:.55;
  pointer-events:none;display:none;transform:translateY(-0.5px);
}
.gl-cross-px{
  position:absolute;right:0;display:none;pointer-events:none;
  transform:translateY(-50%);text-align:center;
  font-size:10px;line-height:14px;color:var(--bg);background:var(--p1);
  letter-spacing:.02em;
}
.gl-cross-dot{position:absolute;width:7px;height:7px;border-radius:50%;pointer-events:none;display:none;transform:translate(-50%,-50%);}
@media (max-width:600px){
  .gl-d-wrap{height:300px;}
  .gl-d-read{margin-left:0;flex-basis:100%;white-space:normal;}
  /* The chart owns every gesture on touch, and hands vertical back to the page
     itself (glTouchMove scrolls the window by hand once it decides the drag is
     vertical). `pan-y` was the earlier answer and it is why panning felt broken:
     under pan-y the browser is still a rival for the gesture, and the moment it
     decides your swipe was a scroll it CANCELS the drag mid-motion — the chart
     moved a little, then stuck until you lifted and pressed again. There is no
     threshold small enough to win that race reliably, because nothing can
     preventDefault before the direction is known.
     `none` removes the rival. The scroll trap this originally guarded against is
     handled in JS instead, which is the only way to get both. */
  .gl-d-wrap, .gl-axis-grip{touch-action:none;}
  /* Touch has to land on the wrapper, and only the wrapper.
     Everything inside it — the SVG and every node in it, the grip — is thrown
     away and rebuilt on each drag frame. A touch whose target gets deleted stops
     being delivered anywhere, because a detached node has no ancestors left to
     bubble through, and the drag dies mid-gesture. The wrapper itself is never
     replaced (only its innerHTML is), so making its contents transparent to
     input keeps one stable target for the whole gesture, which is what lets the
     chart redraw properly while a finger is still down.
     The overlays above are already pointer-events:none; these are the two that
     were not. Signal markers are hit-tested explicitly on tap instead. */
  .gl-d-wrap > svg, .gl-axis-grip{pointer-events:none;}
}


/* ── Accessibility primitives ─────────────────────────────────────────────────
   Added 2026-09-06 with the legal/a11y pass. */

/* Visible only to assistive tech. Used for the page's h1, which the CRT header
   deliberately does not draw. */
.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0;
}

/* Keyboard users land here first and can jump the 25-item nav. Off-screen until
   focused, which is the only time it is useful. */
.skip-link{
  position:absolute;left:8px;top:-48px;z-index:10000;
  background:var(--bg);color:var(--p0);border:1px solid var(--p0);
  padding:8px 14px;font-size:12px;letter-spacing:.1em;text-transform:uppercase;
  text-decoration:none;transition:top .12s;
}
.skip-link:focus{top:8px;}

/* One focus style for everything. Four components set outline:none with no
   replacement, which leaves a keyboard user with no idea where they are —
   :focus-visible keeps it off the pointer users who never wanted it. */
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,
textarea:focus-visible,summary:focus-visible,[tabindex]:focus-visible{
  outline:2px solid var(--p0);outline-offset:2px;border-radius:1px;
}
.auth-input:focus-visible,.ot-search:focus-visible,.tr-filter-sel:focus-visible,
.cs-date:focus-visible{outline:2px solid var(--p0);outline-offset:1px;}

/* Respect a reduced-motion preference. The terminal has scan-line and glow
   animations that are decorative by definition. */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;animation-iteration-count:1 !important;
    transition-duration:.001ms !important;scroll-behavior:auto !important;
  }
}