/* S&P 500 Swing & Options Dashboard — light theme, TradingView-scanner flavor */

:root {
  --bg: #f6f8fa;
  --panel: #ffffff;
  --border: #e3e8ef;
  --accent: #2962ff;
  --accent-soft: #e8f0fe;
  --text: #1f2933;
  --muted: #6b7684;
  --bull: #1a7f37;
  --bull-bg: #e6f4ea;
  --bear: #c62828;
  --bear-bg: #fdecea;
  --amber: #9a6700;
  --amber-bg: #fff3d6;
  --blue-chip-bg: #e8f0fe;
  --blue-chip: #1a56c4;
  --grey-chip-bg: #eceff3;
  --grey-chip: #57606a;
  --thead: #f9fafc;
  --row-border: #eef1f5;
  --hover: #f4f7fb;
  --sel-wash: rgba(15,23,42,.075);   /* selection tint over DATA cells, light */
  --sel-block: rgba(71,85,105,.19);  /* selection tint over the IDENTITY block */
  --sel-bar: #475569;                /* selection bar, slate */
}

/* ---------- dark mode ---------- */

:root[data-theme="dark"] {
  --bg: #0d1117;
  --panel: #161b22;
  --border: #30363d;
  --accent: #3b82f6;
  --accent-soft: #1c2a44;
  --text: #e6edf3;
  --muted: #8b949e;
  --bull: #3fb950;
  --bull-bg: #12261e;
  --bear: #f85149;
  --bear-bg: #2d1618;
  --amber: #d29922;
  --amber-bg: #2b2205;
  --blue-chip-bg: #1c2a44;
  --blue-chip: #79b8ff;
  --grey-chip-bg: #21262d;
  --grey-chip: #8b949e;
  --thead: #1a2029;
  --row-border: #21262d;
  --hover: #1c2330;
  --sel-wash: rgba(255,255,255,.09); /* selection tint over DATA cells, dark */
  --sel-block: rgba(148,163,184,.22);/* selection tint over the IDENTITY block */
  --sel-bar: #cbd5e1;
}

* { box-sizing: border-box; }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--text);
  font: 13px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

body { padding: 4px 10px 6px; }

/* ---------- header (title + nav + theme on one row) ---------- */

.page-header { display: flex; align-items: center; gap: 8px 12px; flex-wrap: wrap; margin-bottom: 4px; }
.page-header h1 { font-size: 15px; font-weight: 700; margin: 0; white-space: nowrap; cursor: default; }
/* Title + status/theme share the top line; the tab bar drops to its own full-width
   row below so it never has to wrap between the title and the badges. */
.page-header h1 { order: 1; }
.page-header .run-badge { order: 2; }
.page-header #theme-btn { order: 3; }
.page-header .nav-bar { order: 4; flex: 1 1 100%; }

.nav-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  flex: 1;
  gap: 3px 0;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 3px 10px;
}

.nav-group { display: flex; align-items: center; gap: 3px; flex-wrap: wrap; }
.nav-group + .nav-group { border-left: 1px solid var(--border); margin-left: 7px; padding-left: 7px; }

/* funnel-step marker: number only — the full step name lives in the hover title */
.nav-group-label {
  font-size: 12px;
  font-weight: 700;
  color: var(--muted);
  margin-right: 3px;
  cursor: default;
}

#theme-btn {
  font: inherit; font-size: 12px;
  background: var(--panel); color: var(--muted);
  border: 1px solid var(--border); border-radius: 6px;
  padding: 4px 10px; cursor: pointer;
}
#theme-btn:hover { color: var(--accent); border-color: var(--accent); }

/* nightly-refresh status badge — colour tracks run_status.json .state */
.run-badge {
  margin-left: auto;
  font: inherit; font-size: 11.5px; font-weight: 600;
  text-decoration: none; white-space: nowrap;
  padding: 3px 9px; border-radius: 999px;
  border: 1px solid var(--border); color: var(--muted); background: var(--panel);
  cursor: default;
}
.run-badge.ok      { color: var(--bull); background: var(--bull-bg); border-color: transparent; }
.run-badge.warn    { color: var(--amber); background: var(--amber-bg); border-color: transparent; }
.run-badge.failed  { color: var(--bear); background: var(--bear-bg); border-color: transparent; }
.run-badge.running { color: var(--blue-chip); background: var(--blue-chip-bg); border-color: transparent; }
/* market closed: neutral, not an alarm — the skip is the correct outcome */
.run-badge.skipped { color: var(--grey-chip); background: var(--grey-chip-bg); border-color: transparent; }
.run-badge.running::before {
  content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 5px;
  border-radius: 50%; background: currentColor; vertical-align: baseline;
  animation: run-pulse 1.1s ease-in-out infinite;
}
@keyframes run-pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.25; } }

.nav-item {
  background: none;
  border: none;
  border-radius: 14px;
  padding: 3px 9px;
  font: inherit;
  font-size: 12.5px;
  color: var(--text);
  cursor: pointer;
  white-space: nowrap;
}

.nav-item:hover { background: var(--accent-soft); color: var(--accent); }
.nav-item.active { background: var(--accent); color: #fff; font-weight: 600; }

/* ---------- main panel ---------- */

.panel {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 6px 8px 8px;
}

.scan-line { color: var(--muted); font-size: 12px; white-space: nowrap; margin-left: auto; }
.scan-line b { color: var(--text); }

/* ---------- controls ---------- */

.controls { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin-bottom: 6px; }

.controls input[type="search"],
.controls select,
.controls button {
  font: inherit;
  font-size: 12.5px;
  color: var(--text);
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 4px 8px;
  outline: none;
}

.controls input[type="search"] { width: 170px; }
.controls select { max-width: 200px; }
.controls input[type="search"]:focus,
.controls select:focus { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft); }

.controls button { cursor: pointer; color: var(--muted); }
.controls button:hover { border-color: var(--accent); color: var(--accent); }

.controls .hidden { display: none; }

/* ---------- table ---------- */

.table-wrap {
  overflow: auto;
  max-height: calc(100vh - 128px);
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--panel);
}

/* HORIZONTAL SCROLLBAR OVERLAPPING THE LAST ROW (fixed 2026-08-30, his report).
   macOS uses OVERLAY scrollbars: they reserve no layout space (offsetHeight ==
   clientHeight) and paint ON TOP of the content. Every wide table here is
   ~30px per row and the bar's track is ~14px, so scrolling sideways at the
   bottom of a table buried the better part of the last company's row — the one
   row a scan usually ends on.

   The fix is a bottom gutter the width of that track, INSIDE the scroll box, so
   the bar floats over padding instead of over a row. It is applied only while a
   horizontal scrollbar can actually appear: `hscrollGutter()` in app.js measures
   scrollWidth against clientWidth after every render and on resize, and toggles
   .has-hscroll. CSS alone cannot ask that question, and adding the padding
   unconditionally would put dead space under every narrow table on the app. */
.table-wrap.has-hscroll,
.rot-board.has-hscroll,
.fxb-scroll.has-hscroll,
.bf-mx-wrap.has-hscroll { padding-bottom: 15px; }

table.scanner {
  border-collapse: separate;
  border-spacing: 0;
  width: 100%;
  font-size: 13px;
  white-space: nowrap;
}

table.scanner th {
  position: sticky;
  top: 0;
  z-index: 3;
  background: var(--thead);
  font-weight: 600;
  font-size: 12px;
  color: var(--muted);
  text-align: left;
  padding: 5px 8px;
  cursor: pointer;
  user-select: none;
  box-shadow: inset 0 -1px 0 var(--border);
}

table.scanner th:hover { color: var(--accent); }
table.scanner th.sorted { color: var(--accent); }
table.scanner th .arrow { font-size: 9px; margin-left: 3px; }
/* two-key sort (2026-08-02): primary keeps the accent colour, secondary gets a
   dimmer treatment so the precedence is readable at a glance. The little 1 / 2
   rank badges only render when a second key is actually set. */
table.scanner th.sorted2 { color: var(--accent); opacity: .72; }
table.scanner th .arrow2 { opacity: .8; }
table.scanner th .srank {
  font-style: normal; font-size: 8px; font-weight: 700;
  vertical-align: super; margin-left: 1px; opacity: .85;
}
#colmenu .cm-sub {
  font-size: 11px; line-height: 1.45; color: var(--muted);
  margin: -2px 0 8px; max-width: 260px;
}
#colmenu .cm-sub b { color: var(--text); font-weight: 600; }
#colmenu .cm-sort2-btn.active { background: var(--accent); border-color: var(--accent); color: #fff; opacity: .8; }
#colmenu .cm-sort2-clear {
  display: block; margin-top: 6px; padding: 2px 6px; font-size: 10px;
  background: none; border: 1px solid var(--border); border-radius: 4px;
  color: var(--muted); cursor: pointer;
}
#colmenu .cm-sort2-clear:hover { color: var(--accent); border-color: var(--accent); }

table.scanner th .info {
  display: inline-block;
  margin-left: 4px;
  color: var(--muted); opacity: 0.75;
  font-size: 11px;
  cursor: help;
}
table.scanner th .info:hover { color: var(--accent); }

table.scanner td {
  padding: 4px 8px;    /* ~27px rows at 13px font — density first */
  border-top: 1px solid var(--row-border);
}

table.scanner tr.group-first td { border-top: 1px solid var(--border); }
table.scanner tbody tr:first-child td { border-top: none; }
/* ── ROW HOVER THAT SURVIVES THE HEAT MAP ────────────────────────────────────────
   Two things were breaking this. The frozen identity cells need an opaque background
   to cover the columns sliding under them, and that background outranked the hover
   tint — so the highlight died at the freeze line. And every shaded cell carries its
   within-sector percentile as an INLINE `background:rgba(...)`, which beats any
   stylesheet background by specificity — so on the tables that are most worth hovering
   (the ones that are mostly green and red) the tint showed only in the gaps between
   coloured cells. Hence "not visible entirely".

   So the highlight no longer relies on background alone. A 1px accent rule is drawn
   along the top and bottom of every cell in the row with inset box-shadow, which is
   painted OVER the cell background whatever that background is, inline or not. The
   tint stays for the unshaded cells and is stronger than it was. The result reads as
   one continuous band across the full width, frozen columns included. */
table.scanner tbody tr:hover td { background: var(--accent-soft); }
table.scanner tbody tr:hover > td {
  box-shadow: inset 0 1px 0 var(--accent), inset 0 -1px 0 var(--accent);
}
table.scanner tbody tr:hover > td.sticky-on { background: var(--accent-soft); }
/* the frozen block's seam must survive the hover rules, so compose rather than replace */
table.scanner tbody tr:hover > td.sticky-edge {
  box-shadow: inset 0 1px 0 var(--accent), inset 0 -1px 0 var(--accent),
              2px 0 0 -1px var(--border);
}
/* a cap on the leading cell closes the band at the left edge */
table.scanner tbody tr:hover > td:first-child {
  box-shadow: inset 2px 0 0 var(--accent), inset 0 1px 0 var(--accent),
              inset 0 -1px 0 var(--accent);
}

th.num, td.num, table.scanner th.num { text-align: right; }

td .sym { font-weight: 700; color: var(--accent); }
td.name-cell   { max-width: 150px; white-space: normal; overflow-wrap: break-word; line-height: 1.2; vertical-align: middle; }
td.sector-cell { max-width: 120px; white-space: normal; overflow-wrap: break-word; line-height: 1.2; vertical-align: middle; }
/* auto-layout tables ignore max-width on <td>, so a cap on an inner block is what
   actually narrows the column — truncate to one line, full text on hover (title). */
td.name-cell .clip, td.sector-cell .clip {
  display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
td.name-cell   .clip { max-width: 130px; }
td.sector-cell .clip { max-width: 104px; }
td.muted, .muted { color: var(--muted); }

/* signal coloring */
.bull { color: var(--bull); font-weight: 700; }
.bear { color: var(--bear); font-weight: 700; }

/* chips (swing setup / options strategy) */
.chip {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.5;
}
.chip-green { background: var(--bull-bg); color: var(--bull); }
.chip-red   { background: var(--bear-bg); color: var(--bear); }
.chip-amber { background: var(--amber-bg); color: var(--amber); }
.chip-blue  { background: var(--blue-chip-bg); color: var(--blue-chip); }
.chip-grey  { background: var(--grey-chip-bg); color: var(--grey-chip); }

.warn { color: var(--amber); font-weight: 700; cursor: help; }
/* ">WACC" on ◆ Capital's Perp g — no growth rate justifies the price, which is the
   most demanding reading the model can produce. Deliberately NOT .warn: amber is
   used on this tab for data caveats (⚠ FDep, ⚠ Req g) and this is not a caveat, it
   is the extreme end of the scale. Matches the darkest step of heatStyle's red so
   it sits inside the column's own gradient rather than beside it. */
.gcap { color: var(--bear); font-weight: 700; cursor: help; font-size: 11px;
        background: rgba(198, 40, 40, .16); padding: 0 4px; border-radius: 3px;
        vertical-align: 1px; }
/* the marginal-cost badge riding on ◆ Capital's CoD cell. Spread and CoD New were
   columns until 2026-08-23 and are live on ~2% of the tape, so they reserved width
   on 3,400 empty cells to say something about 80 rows. Same information, no slot. */
.codbadge { font-size: 11px; font-weight: 700; padding: 0 4px; border-radius: 3px;
            cursor: help; vertical-align: 1px; }
.codbadge.wide  { color: var(--bear);  background: rgba(198, 40, 40, .16); }
.codbadge.tight { color: var(--bull);  background: rgba(26, 127, 55, .14); }
.codbadge.pend  { color: var(--muted); background: var(--grey-chip-bg); font-weight: 600; }

/* ---------- placeholder ---------- */

.placeholder {
  padding: 48px 20px;
  text-align: center;
  color: var(--muted);
  font-size: 13.5px;
}
.placeholder b { color: var(--text); }

/* methodology — lives inside the ⓘ Guide panel, below the definitions */
.method {
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px solid var(--row-border);
  color: var(--muted);
  font-size: 11px;
  line-height: 1.45;
  max-width: 1400px;
}

/* ---------- instant tooltips ---------- */

/* THE TOOLTIP FOLLOWS THE THEME (2026-08-23). It used to INVERT in both directions —
   a dark box on the light page, a near-white box on the dark one. That is the right
   call for a one-line hint, where inversion says "this floats above the page". These
   tips are not one-line: the two-tier prose runs 200-800px tall, and at that size an
   inverted panel stops reading as a tooltip and starts being a glare panel over half
   the screen. It now uses the same surface tokens as every other panel, with a border
   to keep it distinct from the page and a heavier shadow to keep it clearly on top. */
/* THE RUN BADGE'S HOVER IS A BLOCK, NOT PROSE (2026-09-23). Every other tip on
   this dashboard is a sentence and must wrap as one, so the default stays
   white-space:normal; the status summary is laid out in lines and label columns,
   so it opts in here and keeps its newlines. Slightly wider than a prose tip
   because its lines are short and its labels are aligned, and tabular figures so
   the dates under one another line up. */
#tipbox.pre {
  white-space: pre-wrap;
  max-width: 460px;
  font-variant-numeric: tabular-nums;
}

#tipbox {
  position: fixed;
  z-index: 95;
  max-width: 340px;
  background: var(--panel);
  color: var(--text);
  border: 1px solid var(--border);
  font-size: 12px;
  line-height: 1.5;
  padding: 8px 11px;
  border-radius: 7px;
  box-shadow: 0 6px 22px rgba(0, 0, 0, 0.20);
  pointer-events: none;
  white-space: normal;
  /* the positioner sets max-height to the space actually available on the chosen
     side; this makes the overflow clip cleanly instead of spilling over the page */
  overflow: hidden;
}

/* ---------- column filter funnels + shared popover menu ---------- */

th .cfilter {
  margin-left: 3px;
  color: var(--muted);
  opacity: 0.45;
  cursor: pointer;
  font-size: 10px;
}
th:hover .cfilter { opacity: 1; }
th .cfilter.on { opacity: 1; color: var(--accent); }

#colmenu {
  position: fixed;
  z-index: 60;
  min-width: 180px;
  max-width: 300px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.22);
  padding: 8px;
  font-size: 12px;
}
#colmenu .cm-title { font-weight: 600; margin-bottom: 6px; color: var(--text); }
#colmenu .cm-sort { display: flex; gap: 6px; margin-bottom: 8px; }
#colmenu .cm-sort-btn {
  flex: 1;
  font: inherit; font-size: 12px;
  padding: 3px 8px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--panel);
  color: var(--muted);
  cursor: pointer;
  white-space: nowrap;
}
#colmenu .cm-sort-btn:hover { color: var(--accent); border-color: var(--accent); }
#colmenu .cm-sort-btn.active { background: var(--accent); border-color: var(--accent); color: #fff; }
#colmenu .cm-list {
  max-height: 300px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
#colmenu .cm-item {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 2.5px 4px;
  border-radius: 4px;
  cursor: pointer;
  color: var(--text);
  white-space: nowrap;
}
#colmenu .cm-item:hover { background: var(--thead); }
#colmenu .cm-item b { margin-left: auto; padding-left: 10px; color: var(--muted); font-weight: 500; }
#colmenu .cm-range { display: flex; align-items: center; gap: 6px; }
#colmenu .cm-range input {
  width: 90px;
  font: inherit; font-size: 12px;
  padding: 4px 6px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--bg);
  color: var(--text);
}
#colmenu .cm-foot { margin-top: 8px; display: flex; justify-content: flex-end; }
#colmenu .cm-foot button {
  font: inherit; font-size: 12px;
  padding: 3px 10px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--panel);
  color: var(--muted);
  cursor: pointer;
}
#colmenu .cm-foot button:hover { color: var(--accent); border-color: var(--accent); }

/* ---------- watchlist / index / country picker ---------- */
/* trigger button — looks like a select, works in the controls row and home head.
   `button.wl-pick` (not `.wl-pick`) so it beats `.controls button`'s muted colour
   and the chosen market/list renders in full-strength text. */
button.wl-pick {
  display: inline-block;
  font: inherit; font-size: 12.5px; font-weight: 600;
  color: var(--text);
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 4px 22px 4px 9px;
  cursor: pointer;
  position: relative;
  max-width: 230px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  vertical-align: middle;
}
.wl-pick::after {
  content: '▾';
  position: absolute; right: 7px; top: 50%; transform: translateY(-50%);
  font-size: 10px; color: var(--muted); pointer-events: none;
}
button.wl-pick:hover { border-color: var(--accent); color: var(--accent); }
.home-head .wl-pick { font-size: 13px; max-width: 260px; }

#colmenu.wl-menu { min-width: 246px; max-width: 340px; }
#colmenu .wl-search {
  width: 100%; box-sizing: border-box;
  font: inherit; font-size: 12px;
  padding: 5px 8px; margin-bottom: 6px;
  border: 1px solid var(--border); border-radius: 6px;
  background: var(--bg); color: var(--text);
}
#colmenu .wl-search:focus { border-color: var(--accent); outline: none; }
#colmenu .wl-body { max-height: min(62vh, 460px); overflow-y: auto; }
#colmenu .wl-row, #colmenu .wl-ghead {
  display: flex; align-items: center; gap: 6px;
  padding: 4px 6px; border-radius: 4px;
  cursor: pointer; color: var(--text); white-space: nowrap;
}
#colmenu .wl-row:hover, #colmenu .wl-ghead:hover { background: var(--thead); }
/* keyboard roving highlight (distinct from hover and from the selected ✓ row) */
#colmenu .wl-hi { background: var(--thead); box-shadow: inset 0 0 0 2px var(--accent); }
#colmenu .wl-seclab.wl-hi { box-shadow: inset 0 0 0 2px var(--accent); }
#colmenu .wl-lab, #colmenu .wl-glab { flex: 1; overflow: hidden; text-overflow: ellipsis; }
#colmenu .wl-glab { font-weight: 600; }
#colmenu .wl-child { padding-left: 28px; }
#colmenu .wl-noidx { padding-left: 24px; }
#colmenu .wl-all { margin-bottom: 2px; }
#colmenu .wl-active { background: var(--accent-soft); color: var(--accent); }
#colmenu .wl-active .wl-glab { color: var(--accent); }
#colmenu .wl-ck { margin-left: auto; color: var(--accent); font-weight: 700; }
#colmenu .wl-car {
  width: 12px; flex: 0 0 12px; display: inline-block; text-align: center;
  color: var(--muted); font-size: 9px; transition: transform .12s;
}
#colmenu .wl-car.open { transform: rotate(90deg); }
#colmenu .wl-sec { margin-top: 5px; }
#colmenu .wl-seclab {
  display: flex; align-items: center; gap: 6px;
  padding: 4px 6px; cursor: pointer; user-select: none;
  font-size: 10px; letter-spacing: .05em; text-transform: uppercase;
  color: var(--muted);
}
#colmenu .wl-seclab:hover { color: var(--accent); }
#colmenu .wl-collapsed { display: none; }
#colmenu .wl-hide { display: none !important; }
/* while filtering: flatten — force every group open, drop carets & section labels */
#colmenu .wl-body.searching .wl-children,
#colmenu .wl-body.searching .wl-secbody { display: block !important; }
#colmenu .wl-body.searching .wl-car,
#colmenu .wl-body.searching .wl-seclab { display: none; }
#colmenu .wl-body.searching .wl-child { padding-left: 6px; }

/* ---------- quick-filter chips (inline in the controls row) ---------- */

.qchips { display: contents; }

.qchips .qchip {
  font: inherit;
  font-size: 12px;
  padding: 2px 7px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--panel);
  color: var(--text);
  cursor: pointer;
}
.qchips .qchip b { color: var(--muted); font-weight: 600; margin-left: 2px; }
.qchips .qchip:hover { border-color: var(--accent); }
.qchips .qchip.bull { color: var(--bull); font-weight: 600; }
.qchips .qchip.bear { color: var(--bear); font-weight: 600; }
.qchips .qchip.active { background: var(--accent); border-color: var(--accent); color: #fff; }
.qchips .qchip.active b { color: rgba(255, 255, 255, 0.8); }
/* zero rows in the current filter context (counts are faceted, value set is stable) */
.qchips .qchip.empty:not(.active) { opacity: 0.45; }
#colmenu .cm-item.empty { opacity: 0.5; }

/* ---------- in-cell bars ---------- */

.cellbar {
  display: inline-block;
  vertical-align: middle;
  width: 52px;
  height: 7px;
  border-radius: 4px;
  background: var(--grey-chip-bg);
  margin-right: 7px;
  overflow: hidden;
}
.cellbar i {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, #7aa7ff, var(--accent));
  border-radius: 4px;
}
.barnum { font-weight: 600; }

/* momentum tier: the Sector Rotation bar tinted by tier, so the colour means
   the same thing as the Mom Tier chip sitting next to it */
.cellbar.mom-leader i  { background: var(--bull); }
.cellbar.mom-strong i  { background: var(--blue-chip); }
.cellbar.mom-neutral i { background: var(--grey-chip); }
.cellbar.mom-weak i    { background: var(--amber); }
.cellbar.mom-laggard i { background: var(--bear); }

/* compact Mom cell (every tab except Sector Rotation): tier chip + score.
   Fixed chip width keeps the numbers aligned down a right-aligned column. */
.momcell { display: inline-flex; align-items: center; gap: 6px; cursor: help; }
.momcell .chip { min-width: 50px; text-align: center; padding: 2px 4px; }

/* ---------- view toggle ---------- */

.view-toggle { display: inline-flex; border: 1px solid var(--border); border-radius: 6px; overflow: hidden; }
.view-toggle .vt {
  font: inherit; font-size: 12.5px;
  border: none; background: var(--panel); color: var(--muted);
  padding: 5px 11px; cursor: pointer;
}
.view-toggle .vt + .vt { border-left: 1px solid var(--border); }
.view-toggle .vt:hover { color: var(--accent); }
.view-toggle .vt.active { background: var(--accent); color: #fff; font-weight: 600; }

/* ---------- scatter chart ---------- */

.chart-panel {
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--panel);
  padding: 12px 14px;
}
.chart-controls { display: flex; gap: 14px; align-items: center; margin-bottom: 8px; flex-wrap: wrap; }
.chart-controls label { font-size: 12.5px; font-weight: 600; color: var(--muted); }
.chart-controls select {
  font: inherit; font-size: 12.5px;
  border: 1px solid var(--border); border-radius: 6px;
  padding: 5px 8px; background: var(--panel); color: var(--text);
}
#chart-canvas { display: block; width: 100%; }
#chart-tip {
  position: fixed;
  z-index: 50;
  display: none;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 7px;
  box-shadow: 0 4px 16px rgba(31, 41, 51, 0.18);
  padding: 8px 11px;
  font-size: 12px;
  line-height: 1.5;
  pointer-events: none;
}

/* ---------- sparkline detail drawer ---------- */

table.scanner tr[data-sym] { cursor: pointer; }
table.scanner tr.detail-row td { background: var(--hover); border-top: none; padding: 4px 14px 12px; cursor: default; }
.detail { max-width: 940px; }
.detail-head { display: flex; align-items: baseline; gap: 12px; margin: 4px 0 6px; }
.detail-sym { font-size: 15px; font-weight: 800; color: var(--accent); }
.detail-ret { font-size: 13px; }
.tv-btn {
  margin-left: auto;
  font-size: 12px; font-weight: 600;
  color: var(--accent);
  text-decoration: none;
  border: 1px solid var(--accent);
  border-radius: 6px;
  padding: 4px 10px;
}
.tv-btn:hover { background: var(--accent-soft); }
canvas.sparkline { display: block; width: 100%; max-width: 920px; height: 110px; }

td .sym { text-decoration: none; }
td .sym:hover { text-decoration: underline; }

/* ---------- fx board ---------- */

.block-title { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); margin: 2px 0 8px; }
.block-title .muted { text-transform: none; font-weight: 400; letter-spacing: 0; }

/* The 23×22 board is ~2100px wide — wider than any laptop. It must scroll
   INSIDE its own card (like .rot-board): let it overflow the panel and the
   whole document scrolls sideways instead, dragging the table off the right of
   the header/panel backgrounds and leaving a raw --bg gap at the top right. */
.fx-board { margin-bottom: 14px; }
.fxb-scroll { overflow-x: auto; max-width: 100%; }
table.fxb { border-collapse: collapse; font-size: 12.5px; }
table.fxb th {
  padding: 5px 12px; color: var(--muted); font-weight: 600;
  text-align: right; border: 1px solid var(--row-border); background: var(--thead);
}
table.fxb td {
  padding: 5px 12px; text-align: right;
  border: 1px solid var(--row-border); min-width: 84px;
}
table.fxb td.fxb-self { background: var(--thead); }
.fxb-rate { font-weight: 600; display: block; color: inherit; text-decoration: none; }
a.fxb-rate:hover { color: var(--accent); text-decoration: underline; }
.fxb-chg { font-size: 11px; }
.fxb-chg.bull { color: var(--bull); font-weight: 600; }
.fxb-chg.bear { color: var(--bear); font-weight: 600; }

/* Sector Rotation — sector leaderboard strip (customTop) */
.rot-board { margin-bottom: 14px; overflow-x: auto; }
table.rot-lead { border-collapse: collapse; font-size: 12.5px; white-space: nowrap; }
table.rot-lead th {
  padding: 5px 10px; color: var(--muted); font-weight: 600;
  text-align: right; border: 1px solid var(--row-border); background: var(--thead);
  position: sticky; top: 0;
}
table.rot-lead th:first-child, table.rot-lead td.rot-sec { text-align: left; }
table.rot-lead td {
  padding: 4px 10px; text-align: right; border: 1px solid var(--row-border);
}
table.rot-lead td.rot-sec { font-weight: 600; }
table.rot-lead tr:hover td { background: var(--hover); }
table.rot-lead td.rot-name { text-align: left; }

/* ---- Country comparison board (🌐 Countries on the Companies tab) ----
   Same .rot-lead table shell as the three sector boards; only the chrome above
   it is new — the mix / currency chips and the verdict strip. */
.rot-country .block-title { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ctry-toggle { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.ctry-sep {
  width: 1px; height: 15px; margin: 0 4px; background: var(--border); display: inline-block;
}
button.ctry-mix {
  font: inherit; font-size: 11.5px; line-height: 1; cursor: pointer;
  padding: 4px 9px; border-radius: 999px;
  border: 1px solid var(--border); background: var(--panel); color: var(--muted);
}
button.ctry-mix:hover { border-color: var(--accent); color: var(--accent); }
button.ctry-mix.active {
  background: var(--accent-soft); border-color: var(--accent);
  color: var(--accent); font-weight: 600;
}
/* THE AGGREGATION PAIR IS NOT ONE CHIP AMONG SEVERAL. ⚖ / ≈ decides what every
   number on the board means, and at the same soft weight as Filtered / Full tape
   beside it, it was read twice as decoration rather than as state. The active
   one gets a solid fill; the inactive one keeps the pill so the pair still reads
   as a toggle. */
button.ctry-mix.agg-chip.active {
  background: var(--accent); border-color: var(--accent);
  color: #fff; font-weight: 650;
}
button.ctry-mix.agg-chip.active:hover { color: #fff; opacity: .9; }
/* the same word in the board title, in accent rather than in the muted run */
.block-title .basis-word { color: var(--accent); font-weight: 650; }
/* Verdict strip — the ranked read, so the board opens with a conclusion. */
.ctry-verdict {
  display: flex; flex-wrap: wrap; gap: 6px 14px;
  margin: 6px 0 8px; font-size: 12px; color: var(--muted);
}
.ctry-pick {
  padding: 3px 9px; border-radius: 6px;
  background: var(--thead); border: 1px solid var(--row-border);
}
.ctry-pick b { color: var(--text); }
/* population the board is describing, beside the Filtered / Full tape chip */
.board-n {
  font-size: 11.5px; color: var(--muted); margin-right: 2px;
  font-variant-numeric: tabular-nums;
}
/* …and how much of the MARKET that population is, which "11 names" never says.
   Carried in the accent colour because it is the figure a filtered board exists
   to answer; muted back down when nothing is filtered and it is a tautology. */
.board-share {
  color: var(--accent); font-weight: 600; margin-right: 6px;
  border-bottom: 1px dotted var(--border); cursor: help;
}
.board-share-full { color: var(--muted); font-weight: 400; }
/* "11 of 12 names" — the board dropped a cross-listing. Dotted, because the
   count difference is only legible with the hover that names what went. */
.board-dedupe { border-bottom: 1px dotted var(--border); cursor: help; }
/* the same figure on the scan line above the company table */
#scan-line b[data-tip] { color: var(--accent); }
.ctry-v { color: var(--text); font-variant-numeric: tabular-nums; }
/* Metric reported over sectors carrying <60% of the world's weight — the
   world-mix figure is extrapolated, so the cell says so rather than pretending. */
table.rot-lead td.ctry-thin { opacity: 0.45; font-style: italic; }
/* The lone "\u2502" spacer column that used to divide the company half of the
   country board from the macro half is gone: the segment rules do that job now,
   for every boundary rather than only that one, and with a label on each side
   saying which question the block answers. Only the macro cell tint survives. */
table.rot-lead td.macro-cell { color: var(--muted); }

table.rot-lead td.rot-name .muted { font-size: 11px; }
table.rot-lead tr.rot-total td { border-top: 2px solid var(--accent); font-weight: 700; background: var(--thead); }
table.rot-lead th.rot-th { cursor: pointer; user-select: none; white-space: nowrap; }
table.rot-lead th.rot-th:hover { color: var(--accent); }
table.rot-lead th.rot-th.active { color: var(--accent); }
table.rot-lead .idxcol { border-left: 1px dashed var(--row-border); font-style: italic; opacity: 0.92; }
table.rot-lead th.idxcol, table.rot-lead th[data-sort="idx_1m"], table.rot-lead th[data-sort="idx_ytd"] { border-left: 1px dashed var(--row-border); }
/* ---- Countries board: the three identity columns stay put ----------------
   The board is twenty-six columns wide with the macro block open, and a yield
   or a debt ratio with no country attached to it is not data. Market, # and
   Mkt Cap freeze against the horizontal scroll.

   Fixed widths are load-bearing, not cosmetic: a sticky column's `left` has to
   be the sum of the widths before it, so those widths cannot be left to the
   content. And because the table is border-collapse, a sticky cell's own
   borders stop painting once it detaches — hence the inset shadows, which are
   drawn by the cell rather than by the table and therefore survive. */
/* The board's chrome — title, chips, verdict, legend — must NOT ride the
   horizontal scroll: freezing three columns is pointless if the sentence
   explaining them has slid off to the left. So the table gets its own
   scrollport inside the board, which is also the box the sticky `left` offsets
   below resolve against. */
.rot-board.rot-country { overflow-x: visible; }
.ctry-tablewrap { overflow-x: auto; }
.rot-country table.ctry-main tr:not(.seg-hdr):not(.sec-band) th:nth-child(-n+4),
.rot-country table.ctry-main tr:not(.seg-hdr):not(.sec-band) td:nth-child(-n+4) {
  position: sticky; background: var(--panel);
  box-shadow: inset -1px 0 0 var(--row-border), inset 0 -1px 0 var(--row-border);
}
.rot-country table.ctry-main tr:not(.seg-hdr):not(.sec-band) th:nth-child(-n+4) { background: var(--thead); z-index: 6; }
.rot-country table.ctry-main tr:not(.seg-hdr):not(.sec-band) td:nth-child(-n+4) { z-index: 4; }
.rot-country table.ctry-main tr:not(.seg-hdr):not(.sec-band) th:nth-child(1),
.rot-country table.ctry-main tr:not(.seg-hdr):not(.sec-band) td:nth-child(1) { left: 0; width: 152px; min-width: 152px; max-width: 152px; }
.rot-country table.ctry-main tr:not(.seg-hdr):not(.sec-band) th:nth-child(2),
.rot-country table.ctry-main tr:not(.seg-hdr):not(.sec-band) td:nth-child(2) { left: 152px; width: 56px; min-width: 56px; max-width: 56px; }
.rot-country table.ctry-main tr:not(.seg-hdr):not(.sec-band) th:nth-child(3),
.rot-country table.ctry-main tr:not(.seg-hdr):not(.sec-band) td:nth-child(3) {
  left: 208px; width: 98px; min-width: 98px; max-width: 98px;
}
.rot-country table.ctry-main tr:not(.seg-hdr):not(.sec-band) th:nth-child(4),
.rot-country table.ctry-main tr:not(.seg-hdr):not(.sec-band) td:nth-child(4) {
  left: 306px; width: 74px; min-width: 74px; max-width: 74px;
  box-shadow: inset -1px 0 0 var(--row-border), inset 0 -1px 0 var(--row-border), 6px 0 8px -6px rgba(0,0,0,.28);
}
/* the frozen block must repaint on hover too, or the row lights up in halves */
.rot-country table.ctry-main tr:not(.sec-band):hover td:nth-child(-n+4) { background: var(--hover); }

/* ---- head-to-head picking ---- */
td.ctry-pick-cell { cursor: pointer; user-select: none; }
td.ctry-pick-cell:hover { color: var(--accent); }
.ctry-box { display: inline-block; width: 14px; margin-right: 5px; color: var(--muted); font-size: 12px; }
td.ctry-pick-cell.on .ctry-box { color: var(--accent); }
.rot-country table.rot-lead tr.ctry-on td { background: var(--accent-soft); }
.rot-country table.ctry-main tr:not(.seg-hdr):not(.sec-band).ctry-on td:nth-child(-n+4) { background: var(--accent-soft); }
.rot-country table.rot-lead tr.ctry-on td.rot-sec { box-shadow: inset 3px 0 0 var(--accent), inset -1px 0 0 var(--row-border); }
/* Dimming the unpicked rows is `opacity`, which fades a cell's BACKGROUND as
   well as its text — and a semi-transparent frozen cell lets the columns
   sliding underneath show straight through it. So the three frozen columns are
   dimmed by colour instead, staying fully opaque. */
.rot-country table.rot-lead tr.ctry-dim td { opacity: 0.5; }
.rot-country table.ctry-main tr.ctry-dim td:nth-child(-n+4) { opacity: 1; color: var(--muted); }
.rot-country table.ctry-main tr.ctry-dim td:nth-child(-n+4) b { font-weight: 500; }
table.ctry-grid tr.ctry-dim td:first-child { opacity: 1; color: var(--muted); }
button.ctry-mix.ctry-clear { border-style: dashed; }
/* Δ row — the difference, not another market, so it reads as a rule under the pair */
.rot-country table.rot-lead tr.ctry-delta td {
  border-top: 2px solid var(--accent); font-weight: 600; background: var(--thead);
}
.rot-country table.ctry-main tr:not(.seg-hdr):not(.sec-band).ctry-delta td:nth-child(-n+4) { background: var(--thead); }
td.ctry-dlabel { color: var(--accent); font-weight: 700; }

/* All-markets total — a margin, not another country, so it sits under a solid
   rule and carries the head background the way a table foot should. */
.rot-country table.rot-lead tr.ctry-total td {
  border-top: 2px solid var(--text); font-weight: 700; background: var(--thead);
}
.rot-country table.ctry-main tr:not(.seg-hdr):not(.sec-band).ctry-total td:nth-child(-n+4) { background: var(--thead); }
td.ctry-total-lbl { font-weight: 700; white-space: nowrap; }

/* Base-effect mark on a growth cell. Deliberately NOT the thin-coverage fade:
   that says "built on too little", this says "built on plenty, and measuring a
   recovery from near zero rather than growth". A dotted underline reads as a
   footnote marker — the number is correct, it just needs its caveat. */
.rot-country table.rot-lead td.ctry-baseeff, table.ctry-grid td.ctry-baseeff {
  text-decoration: underline dotted var(--muted);
  text-underline-offset: 3px;
  cursor: help;
}

/* ---- the two comparison panels ---- */
.ctry-viz { margin-top: 12px; border-top: 1px dashed var(--row-border); padding-top: 10px; }
.ctry-viz-head {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  font-size: 12.5px; margin-bottom: 7px;
}
.ctry-viz-head .muted { font-size: 11.5px; }
.ctry-axl { font-size: 11.5px; color: var(--muted); display: inline-flex; align-items: center; gap: 4px; }
select.ctry-sel {
  font: inherit; font-size: 11.5px; padding: 3px 6px; border-radius: 6px;
  border: 1px solid var(--border); background: var(--panel); color: var(--text);
}
.ctry-viz-scroll { overflow-x: auto; }
table.ctry-grid { font-size: 12px; }
table.ctry-grid td:first-child, table.ctry-grid th:first-child {
  position: sticky; left: 0; z-index: 4; background: var(--panel);
  box-shadow: inset -1px 0 0 var(--row-border);
  width: 134px; min-width: 134px; max-width: 134px;
}
table.ctry-grid th:first-child { background: var(--thead); z-index: 6; }
table.ctry-grid .ctry-gridtot { border-left: 2px solid var(--border); font-weight: 700; }
table.ctry-grid tr.ctry-gridworld td { border-top: 2px solid var(--border); font-weight: 700; background: var(--thead); }
table.ctry-grid tr.ctry-gridworld td:first-child { background: var(--thead); }
table.ctry-grid tr.ctry-on td { background: var(--accent-soft); }
table.ctry-grid tr.ctry-dim td { opacity: 0.55; }
/* Value / vs World / Rank — the three ways to read a grid cell. Grouped tight
   against each other and pushed away from the metric picker, so it reads as one
   control on the picker rather than three loose chips in the header. */
.ctry-gridmodes { display: inline-flex; align-items: center; gap: 3px; margin-left: 2px; }
.ctry-gridmodes button.ctry-mix { padding: 3px 8px; }
/* Cells built on fewer than five companies. Same vocabulary as the country
   table's thin-coverage fade, because it is the same warning: the number is
   real, the population behind it is not big enough to lean on. */
table.ctry-grid td.ctry-thin { opacity: 0.42; font-style: italic; }

svg.ctry-plot { width: 100%; height: auto; max-height: 460px; display: block; }
svg.ctry-plot .cp-grid { stroke: var(--row-border); stroke-width: 1; }
svg.ctry-plot .cp-tick { fill: var(--muted); font-size: 11px; }
svg.ctry-plot .cp-axis { fill: var(--muted); font-size: 12px; font-weight: 600; }
svg.ctry-plot .cp-tail { stroke: var(--muted); stroke-width: 1.5; opacity: 0.35; stroke-dasharray: 3 3; }
svg.ctry-plot .cp-dot { cursor: pointer; }
svg.ctry-plot .cp-dot circle { fill: var(--accent); opacity: 0.42; stroke: var(--accent); stroke-width: 1.2; }
svg.ctry-plot .cp-dot text { fill: var(--text); font-size: 11.5px; font-weight: 600; }
svg.ctry-plot .cp-dot:hover circle { opacity: 0.68; }
svg.ctry-plot .cp-dot.on circle { opacity: 0.75; stroke-width: 2.4; }
svg.ctry-plot .cp-dot.dim circle { opacity: 0.16; }
svg.ctry-plot .cp-dot.dim text { fill: var(--muted); font-weight: 500; }

.rot-legend { font-size: 11px; color: var(--muted); margin: 6px 2px 0; line-height: 1.5; }

/* ---- collapsed board legends ------------------------------------------
   The three sector boards and the country board each carried eight or nine
   lines of prose under the table — about a third of a screen, permanently, for
   text most readers need once. The legend is now one line that states which
   aggregation the board is on (the fact that changes what every number MEANS),
   with the rest behind Read more, remembered per board. */
.rot-legend.leg { display: block; }
.rot-legend .leg-lead { color: var(--muted); }
.rot-legend .leg-lead b { color: var(--fg); font-weight: 650; }
.leg-btn {
  cursor: pointer; font: inherit; font-size: 10px; letter-spacing: .04em;
  text-transform: uppercase; color: var(--muted); background: none;
  border: 1px solid var(--row-border); border-radius: 4px;
  padding: 0 6px; margin-left: 2px; line-height: 15px; vertical-align: baseline;
  white-space: nowrap; user-select: none;
}
.leg-btn:hover { color: var(--fg); border-color: var(--muted); }
.leg-btn::after { content: ' \25be'; }
.rot-legend.open .leg-btn::after { content: ' \25b4'; }
.rot-legend .leg-t-shut, .rot-legend.open .leg-t-open { display: none; }
.rot-legend.open .leg-t-shut { display: inline; }
.rot-legend .leg-rest { display: none; }
.rot-legend.open .leg-rest {
  display: block; margin-top: 6px; padding-top: 6px;
  border-top: 1px solid var(--row-border);
}

/* "Start here" onboarding guide (top of Home) */
.guide-panel { border: 1px solid var(--row-border); border-radius: 9px; background: var(--thead); padding: 11px 13px; margin-bottom: 14px; }
.guide-panel.collapsed { padding: 0; background: none; border: none; }
/* one-line "what is this" identity strip, above the how-to-use funnel */
.guide-intro { font-size: 12.5px; color: var(--muted); line-height: 1.55; padding-bottom: 9px; margin-bottom: 9px; border-bottom: 1px solid var(--row-border); }
.guide-intro b { color: var(--text); }
.guide-head { font-size: 13px; margin-bottom: 10px; position: relative; padding-right: 70px; line-height: 1.5; }
.guide-head .muted { font-weight: 400; }
.guide-toggle { position: absolute; top: 0; right: 0; font-size: 11px; color: var(--muted); background: none; border: 1px solid var(--row-border); border-radius: 6px; padding: 2px 8px; cursor: pointer; }
.guide-panel.collapsed .guide-toggle { position: static; color: var(--accent); border-color: var(--accent); font-weight: 600; }
.guide-toggle:hover { color: var(--accent); border-color: var(--accent); }
.guide-flow { display: flex; flex-wrap: wrap; align-items: stretch; gap: 6px; }
/* color: a <button> otherwise inherits the UA default black → invisible chips in dark mode */
.guide-step { flex: 1 1 150px; min-width: 140px; text-align: left; color: var(--text); background: var(--bg); border: 1px solid var(--row-border); border-radius: 8px; padding: 8px 10px; cursor: pointer; display: flex; flex-direction: column; gap: 5px; transition: border-color .12s, transform .12s; }
.guide-metric { color: var(--text); }
.guide-step:hover { border-color: var(--accent); transform: translateY(-1px); }
.guide-step-h { font-weight: 700; font-size: 12.5px; }
.guide-n { color: var(--accent); font-weight: 700; margin-right: 2px; }
.guide-q { font-size: 11px; color: var(--muted); line-height: 1.4; }
.guide-metrics { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; margin-top: auto; }
.guide-mlabel { font-size: 9px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.guide-metric { font-size: 10px; background: var(--thead); border: 1px solid var(--row-border); border-radius: 4px; padding: 1px 5px; }
.guide-arrow { align-self: center; color: var(--muted); font-size: 13px; }
.guide-foot { font-size: 11px; margin-top: 10px; line-height: 1.5; }
@media (max-width: 700px) { .guide-arrow { display: none; } }

/* Paper Trades — ＋ Add bar + ✕ remove control */
.paper-add { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 10px 12px; border: 1px solid var(--row-border); border-radius: 9px; background: var(--thead); margin-bottom: 12px; }
.paper-add .pa-title { font-weight: 700; font-size: 13px; }
.paper-add input { padding: 5px 9px; border: 1px solid var(--row-border); border-radius: 6px; background: var(--bg); color: var(--text); font-size: 12.5px; }
.paper-add input#pa-sym { width: 210px; }
.paper-add input#pa-note { flex: 1 1 150px; min-width: 130px; }
.paper-add button { padding: 5px 13px; border: 1px solid var(--accent); border-radius: 6px; background: var(--accent); color: #fff; font-weight: 600; cursor: pointer; font-size: 12.5px; }
.paper-add #pa-add-btn:hover { filter: brightness(1.08); }
.paper-add .pa-tools { display: flex; gap: 6px; margin-left: auto; }
.paper-add .pa-tools button { background: none; color: var(--muted); border-color: var(--row-border); font-weight: 500; }
.paper-add .pa-tools button:hover { color: var(--accent); border-color: var(--accent); }
.paper-add .pa-hint { flex-basis: 100%; font-size: 11px; }
.paper-rm { color: var(--muted); cursor: pointer; font-weight: 700; padding: 0 5px; border-radius: 4px; }
/* read-only mirror: the control is present so the column does not reflow, but it is
   plainly not a button — see paperReadOnly() in app.js */
.paper-rm.disabled { cursor: default; opacity: .35; }
.paper-rm.disabled:hover { color: inherit; }
.paper-rm:hover { color: var(--bear); background: var(--bear-bg); }

/* board horizon selector chips */
.fxb-hs { margin-left: 12px; display: inline-flex; gap: 4px; vertical-align: middle; }
.fxb-h {
  font: inherit; font-size: 11px; padding: 2px 8px; cursor: pointer;
  border: 1px solid var(--border); border-radius: 10px;
  background: transparent; color: var(--muted);
}
.fxb-h:hover { color: var(--accent); border-color: var(--accent); }
.fxb-h.active { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 600; }

/* ---------- macro regime strip ---------- */

.regime-strip {
  display: flex; align-items: center; gap: 6px 14px; flex-wrap: wrap;
  border: 1px solid var(--border); border-radius: 8px;
  background: var(--panel); padding: 5px 12px; margin-bottom: 8px;
}
.reg-chip { font-size: 12px; padding: 3px 12px; }
.reg-item { font-size: 12.5px; cursor: help; }
/* note flows inline on wide screens instead of claiming its own line */
.reg-note { color: var(--muted); font-size: 12px; }

/* ---------- metric guide ---------- */

.metric-guide {
  border: 1px solid var(--border); border-radius: 8px;
  background: var(--panel); padding: 12px 16px; margin-bottom: 12px;
}
.guide-desc { margin: 0 0 10px; color: var(--text); font-size: 12.5px; max-width: 1400px; }
.metric-guide dl {
  margin: 0; display: grid;
  grid-template-columns: max-content 1fr; gap: 4px 14px;
}
.metric-guide dt { font-weight: 700; }
.metric-guide dd { margin: 0; color: var(--muted); }
.active-btn { border-color: var(--accent) !important; color: var(--accent) !important; }

canvas.cellspark { display: block; }

/* ---------- home (daily brief) ----------
   Card grid rendered into #table-wrap; the .home modifier strips the wrap's
   own panel chrome so the cards sit directly on the page background. */

.table-wrap.home { border: none; background: transparent; border-radius: 0; }
.home-wrap { display: flex; flex-direction: column; gap: 8px; padding: 2px; }
.home-head { font-size: 12.5px; color: var(--muted); display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.home-head b { color: var(--text); font-size: 14px; margin-right: 6px; }
#hc-wl {
  font: inherit; font-size: 12.5px; padding: 3px 8px;
  border: 1px solid var(--border); border-radius: 6px;
  background: var(--panel); color: var(--text); cursor: pointer;
}
#hc-wl:hover { border-color: var(--accent); }
.home-wrap .regime-strip { margin-bottom: 0; }

/* lives inside .home-head so brief + signal chips share one wrapping row */
.hc-sigs { display: inline-flex; flex-wrap: wrap; gap: 4px; align-items: center; margin-left: 10px; }
.hc-sigs-lab { font-size: 12px; font-weight: 700; color: var(--muted); margin-right: 2px; }
.hc-sig {
  font: inherit; font-size: 12px; padding: 3px 10px; cursor: pointer;
  border: 1px solid var(--border); border-radius: 999px;
  background: var(--panel); color: var(--muted);
}
.hc-sig b { color: var(--text); font-weight: 700; }
.hc-sig:hover { border-color: var(--accent); color: var(--accent); }

/* THE TRACK MINIMUM IS THE WHOLE FIX (2026-08-18). auto-fill spends spare width on
   MORE COLUMNS, never on wider cards — so on a 1280px screen and on a 2560px screen
   alike every card came out ~394px, while their own tables measured 404–468px. Every
   panel therefore carried a horizontal scrollbar forever, on a page with obvious room
   to spare. Raising the minimum to clear the widest card (Pre-open gaps, 468px) makes
   the content fit and the bars disappear on their own. overflow-x stays for real
   narrow-screen cases; it simply has nothing to do now. */
.home-grid {
  display: grid; gap: 10px; align-items: start;
  grid-template-columns: repeat(auto-fill, minmax(480px, 1fr));
}
.home-card {
  border: 1px solid var(--border); border-radius: 8px;
  background: var(--panel); padding: 8px 10px;
  overflow-x: auto;   /* only for viewports narrower than one card */
}
/* a card that does still overflow (phones) keeps its bar; one that fits shows none */
@media (max-width: 520px) {
  .home-grid { grid-template-columns: 1fr; }
}
.hc-head { font-size: 12.5px; font-weight: 700; display: flex; align-items: center; gap: 6px; margin-bottom: 4px; }
.hc-count { color: var(--muted); font-weight: 600; font-size: 11.5px; }
.hc-t { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.hc-t td { padding: 3px 8px 3px 0; border-top: 1px solid var(--row-border); white-space: nowrap; }
.hc-t td:last-child { padding-right: 0; }
.hc-t tr:first-child td { border-top: none; }
.hc-sym a.sym { font-weight: 700; }
.hc-name {
  display: block; color: var(--muted); font-size: 10.5px; line-height: 1.25;
  max-width: 130px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.hc-num { text-align: right; font-variant-numeric: tabular-nums; }
.hc-mut { color: var(--muted); overflow: hidden; text-overflow: ellipsis; max-width: 170px; }
.hc-hrow td, .hc-subrow td {
  color: var(--muted); font-size: 10.5px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.04em; padding-top: 8px;
}
.hc-hrow td { border-top: none; padding-top: 0; }
.hc-t .cellbar { width: 38px; margin-right: 5px; }
.hc-t .cellbar.hc-bear i { background: var(--bear); }
/* diverging mini-bar: zero line in the middle, green fill right / red fill left */
.hcdiv {
  position: relative; display: inline-block; vertical-align: middle;
  width: 38px; height: 7px; border-radius: 4px;
  background: var(--grey-chip-bg); margin-right: 5px;
}
.hcdiv::before {
  content: ''; position: absolute; left: 50%; top: -1px; bottom: -1px;
  width: 1px; background: var(--border);
}
.hcdiv i { position: absolute; top: 0; height: 100%; border-radius: 2px; }
.hcdiv i.p { left: 50%; background: var(--bull); }
.hcdiv i.n { right: 50%; background: var(--bear); }
.hc-fam {
  display: inline-block; font-size: 10px; font-weight: 700;
  padding: 1px 6px; margin: 1px 2px 1px 0; border-radius: 999px;
  background: var(--grey-chip-bg); color: var(--grey-chip);
}
.hc-empty { color: var(--muted); font-size: 12.5px; padding: 4px 0; }
/* pre-open gap board: the premarket fields never go blank, so a board built
   outside a premarket window shows the LAST prints as if they were live. This
   banner is the difference between context and a bad trade. */
.hc-warn { background: var(--warn-bg, #fff6e5); color: var(--warn-fg, #7a4c00);
  border: 1px solid var(--warn-bd, #f0d5a0); border-radius: 5px;
  font-size: 11.5px; line-height: 1.35; padding: 5px 7px; margin: 0 0 6px; }
.hc-go {
  font: inherit; font-size: 12px; margin-top: 7px; padding: 0;
  background: none; border: none; color: var(--accent); cursor: pointer;
}
.hc-go:hover { text-decoration: underline; }

/* ---------- data-freshness banner (2026-08-18) ----------
   The full-width red banner this used to draw was removed 2026-08-24 (his call:
   "a waste of space" — it repeated, at ten times the size, the chip already sitting
   in the scan-line). Staleness now shows ONLY as that chip plus the header badge's
   "N stale"; the chip's hover carries the restart remedy the banner used to spell
   out. */
/* the scan-line chip is inline in a nowrap line — keep it from stretching it */
.scan-line .chip { margin-left: 3px; vertical-align: baseline; }

/* a run can finish clean and still leave datasets behind; the badge says so */
.run-badge.has-stale { border-color: var(--bear); }


/* ---------- table section headers (macro) ---------- */

table.scanner tr.section-row td {
  background: var(--thead);
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 6px 10px 6px 22px;   /* indent under the region band */
  border-top: 1px solid var(--border);
  cursor: default;
}
/* macro top tier: the REGION band above the class sub-sections */
table.scanner tr.region-row td {
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 8px 10px;
  border-top: 2px solid var(--accent);
  cursor: default;
}

/* ---------- responsive ---------- */

@media (max-width: 1100px) {
  .col-hide-narrow { display: none; }
  .nav-group + .nav-group { border-left: none; margin-left: 0; padding-left: 0; }
}

/* ---- filter playbook: always-visible strip + ★/⚠ header marks ---------------
   The 3 filters worth screening on per tab, and the ones our own backtests
   proved carry no edge. Sits directly above the table so it can't be missed. */
.playbook {
  display: flex; align-items: center; flex-wrap: wrap; gap: 4px 6px;
  padding: 3px 10px; margin-bottom: 6px;
  border: 1px solid var(--border); border-radius: 8px;
  background: var(--panel); font-size: 12px; line-height: 1.5;
}
/* chips half of the strip — display:contents so they lay out in the strip's own
   flex row, leaving the scan-line free to sit at the far right */
.pb-body { display: contents; }
.playbook .scan-line { margin-left: auto; }
.pb-lab { color: var(--accent); font-weight: 700; white-space: nowrap; margin-right: 2px; }
.pb-lab-warn { color: var(--bear); }
.pb-sep {
  width: 1px; align-self: stretch; margin: 0 8px;
  background: var(--border);
}
.pb-chip {
  font: inherit; font-weight: 600;
  padding: 2px 9px; border-radius: 999px; white-space: nowrap;
  border: 1px solid transparent;
}
button.pb-chip { cursor: pointer; }
.pb-use {
  color: var(--accent); background: var(--accent-soft);
  border-color: color-mix(in srgb, var(--accent) 35%, transparent);
}
button.pb-use:hover { background: var(--accent); color: #fff; }
.pb-static { cursor: default; }
.pb-avoid {
  color: var(--bear); background: var(--bear-bg);
  border-color: color-mix(in srgb, var(--bear) 35%, transparent);
  text-decoration: line-through; text-decoration-thickness: 1px;
}
.playbook .info { margin-left: 2px; }

/* header marks — sit right where you click to filter */
.pb-star { color: var(--accent); margin-right: 3px; }
.pb-warn { color: var(--bear); margin-right: 3px; }

/* ---- visual pattern guide (Candlesticks / Chart Patterns tabs) --------------
   Opt-in panel of mini SVG reference cards above the table, toggled by the
   ▦ Visuals button next to ⓘ Guide. Cards replace the quick-chips on these
   tabs: click-to-filter with faceted live counts. All colors via theme vars
   so light/dark both work. */
.pattern-guide {
  border: 1px solid var(--border); border-radius: 8px;
  background: var(--panel); padding: 10px 12px; margin-bottom: 12px;
}
.pg-note { margin: 4px 0 10px; color: var(--muted); font-size: 12px; line-height: 1.45; max-width: 1400px; }
.pg-grid {
  display: grid; gap: 8px;
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
}
.pg-card {
  font: inherit; text-align: left; cursor: pointer;
  display: flex; flex-direction: column; gap: 3px;
  padding: 8px 9px 9px;
  border: 1px solid var(--border); border-radius: 8px;
  background: var(--bg); color: var(--text);
}
.pg-card:hover { border-color: var(--accent); }
.pg-card.active { border-color: var(--accent); background: var(--accent-soft); box-shadow: inset 0 0 0 1px var(--accent); }
.pg-card.empty { opacity: 0.5; }
.pg-svg { width: 100%; height: auto; display: block; }
.pg-name { font-size: 12px; font-weight: 700; display: flex; align-items: baseline; gap: 6px; }
.pg-n { margin-left: auto; color: var(--muted); font-weight: 600; font-size: 11px; }
.pg-dir {
  font-size: 9.5px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.05em; color: var(--muted);
}
.pg-dir.bull { color: var(--bull); }
.pg-dir.bear { color: var(--bear); }
.pg-desc { font-size: 11px; color: var(--muted); line-height: 1.35; }

/* svg marks: candle bodies/wicks by kind, chart-structure lines by role */
.pg-svg line.pg-b, .pg-svg line.pg-r, .pg-svg line.pg-n, .pg-svg line.pg-x { stroke-width: 1.4; }
.pg-svg .pg-b { stroke: var(--bull); fill: var(--bull); }
.pg-svg .pg-r { stroke: var(--bear); fill: var(--bear); }
.pg-svg .pg-n { stroke: var(--amber); fill: var(--amber); }
.pg-svg .pg-x { stroke: var(--muted); fill: var(--muted); opacity: 0.35; }
.pg-svg .pg-path {
  fill: none; stroke: var(--text); stroke-width: 1.8; opacity: 0.7;
  stroke-linejoin: round; stroke-linecap: round;
}
.pg-svg .pg-bound { fill: none; stroke: var(--muted); stroke-width: 1.1; stroke-dasharray: 3 3; }
.pg-svg .pg-trig { fill: none; stroke-width: 1.5; stroke-dasharray: 4 3; }

/* playbook block at the top of the Guide */
.guide-pb {
  border-left: 3px solid var(--accent);
  background: var(--bg); border-radius: 0 6px 6px 0;
  padding: 8px 12px; margin: 0 0 12px;
}
.guide-pb-row { margin-bottom: 3px; font-size: 12.5px; }
.guide-pb p { margin: 0 0 8px; color: var(--muted); font-size: 12.5px; max-width: 1400px; }
.guide-pb p:last-child { margin-bottom: 0; }

/* ---- IBD scorecard strip (IBD Bases / IBD Breakdowns tabs) ------------------
   Summary block above the table, rendered by ibdScoreboardHtml via customTop.
   All colors go through the theme vars so light/dark both work. Small samples
   are marked, never dressed up: .ibd-sb-prov dims a horizon backed by fewer
   than IBD_MIN_N resolved calls. */
.ibd-board {
  border: 1px solid var(--border); border-radius: 8px;
  background: var(--panel); padding: 10px 12px; margin-bottom: 12px;
}
.ibd-head {
  display: flex; align-items: center; gap: 6px 18px; flex-wrap: wrap;
  margin-bottom: 9px;
}
.ibd-stat { font-size: 12.5px; cursor: help; }
.ibd-stat b { font-weight: 700; }
.ibd-vchips { display: inline-flex; gap: 5px; flex-wrap: wrap; margin-left: auto; }
.ibd-vchip { cursor: help; }

table.ibd-sb { border-collapse: collapse; font-size: 12.5px; }
table.ibd-sb th, table.ibd-sb td {
  padding: 4px 12px; border: 1px solid var(--row-border); text-align: left;
}
table.ibd-sb thead th {
  color: var(--muted); font-weight: 600; background: var(--thead);
  cursor: help; white-space: nowrap;
}
table.ibd-sb tbody th { font-weight: 700; cursor: help; white-space: nowrap; }
table.ibd-sb .num { text-align: right; font-variant-numeric: tabular-nums; }
table.ibd-sb tbody tr:hover { background: var(--hover); }
/* provisional / empty horizons: present but visibly not a finding */
table.ibd-sb tr.ibd-sb-prov td, table.ibd-sb tr.ibd-sb-prov th { opacity: 0.62; }
table.ibd-sb tr.ibd-sb-none td, table.ibd-sb tr.ibd-sb-none th { opacity: 0.5; }
.ibd-prov {
  font-size: 9.5px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.04em; color: var(--amber); background: var(--amber-bg);
  border-radius: 8px; padding: 1px 5px; margin-left: 4px; cursor: help;
}
.ibd-note {
  margin: 8px 0 0; color: var(--muted); font-size: 11.5px;
  line-height: 1.45; max-width: 1400px;
}
.ibd-miss {
  margin: 7px 0 0; padding: 5px 10px; font-size: 11.5px; line-height: 1.45;
  color: var(--amber); background: var(--amber-bg);
  border-radius: 6px; max-width: 1400px;
}
.ibd-miss b { color: var(--amber); }
.ibd-miss-list { cursor: help; font-weight: 700; }

/* ---------- Paper Trades cohort scorecard (customTop above the table) ---------- */
.paper-sb { margin: 2px 0 12px; }
.psb-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px 16px; flex-wrap: wrap; margin-bottom: 10px;
}
.psb-title { display: flex; align-items: baseline; gap: 8px; }
.psb-title h3 { margin: 0; font-size: 15px; font-weight: 700; color: var(--text); }
.psb-count { font-size: 12px; color: var(--muted); }
.psb-verdicts { display: flex; gap: 5px; flex-wrap: wrap; }
.psb-verdicts .chip { font-size: 11.5px; }

.psb-cards { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.psb-card {
  border: 1px solid var(--border); border-radius: 10px;
  padding: 9px 11px 10px; background: var(--panel);
  display: flex; flex-direction: column; gap: 5px;
}
.psb-card.live { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.psb-hz {
  display: flex; align-items: baseline; justify-content: space-between; gap: 6px;
  font-weight: 700; font-size: 13px; color: var(--text);
}
.psb-hz span { font-weight: 500; font-size: 10.5px; color: var(--muted); }
.psb-hitrow { display: flex; align-items: baseline; gap: 6px; }
.psb-hit { font-size: 22px; font-weight: 800; line-height: 1; letter-spacing: -0.02em; }
.psb-hit i { font-size: 12px; font-weight: 700; font-style: normal; margin-left: 1px; }
.psb-hit.good { color: var(--bull); }
.psb-hit.mid  { color: var(--amber); }
.psb-hit.bad  { color: var(--bear); }
.psb-hitlbl { font-size: 10.5px; color: var(--muted); }
.psb-bar { height: 5px; border-radius: 999px; background: var(--accent-soft); overflow: hidden; }
.psb-bar b { display: block; height: 100%; border-radius: 999px; }
.psb-bar b.good { background: var(--bull); }
.psb-bar b.mid  { background: var(--amber); }
.psb-bar b.bad  { background: var(--bear); }
.psb-med { font-size: 12px; color: var(--muted); }
.psb-med span { font-weight: 700; }
.psb-med .bull { color: var(--bull); }
.psb-med .bear { color: var(--bear); }
.psb-med .flat { color: var(--muted); }
.psb-n { font-size: 10.5px; color: var(--muted); }
.psb-card.empty { align-items: center; justify-content: center; text-align: center; opacity: 0.7; }
.psb-card.empty .psb-hz { width: 100%; }
.psb-na { font-size: 11px; color: var(--muted); margin-top: 4px; cursor: help; }

.psb-foot {
  display: flex; align-items: center; gap: 8px 18px; flex-wrap: wrap;
  margin-top: 10px; font-size: 11.5px; color: var(--muted);
}
.psb-ex { display: inline-flex; align-items: center; gap: 6px; }
.psb-exlbl { font-weight: 700; font-size: 11px; }
.psb-exlbl.up { color: var(--bull); }
.psb-exlbl.down { color: var(--bear); }
.psb-name { text-decoration: none; }
.psb-name b { font-weight: 700; }
.psb-hint { flex: 1 1 280px; min-width: 220px; line-height: 1.4; }
.psb-hint b { color: var(--text); font-weight: 600; }
@media (max-width: 760px) { .psb-cards { grid-template-columns: repeat(2, 1fr); } }

/* folded state — the ~230px panel becomes a single clickable strip so the rows
   get the height back; scrolling the table drives it (see paperSbSync) */
.psb-fold {
  margin-left: 6px; padding: 2px 8px; font-size: 11px; font-weight: 600;
  border: 1px solid var(--row-border); border-radius: 999px;
  background: none; color: var(--muted); cursor: pointer;
}
.psb-fold:hover { color: var(--accent); border-color: var(--accent); }

.psb-mini { display: none; }
.paper-sb.collapsed { margin: 2px 0 8px; }
.paper-sb.collapsed > .paper-add,
.paper-sb.collapsed > .psb-head,
.paper-sb.collapsed > .psb-cards,
.paper-sb.collapsed > .psb-foot { display: none; }
.paper-sb.collapsed > .psb-mini {
  display: flex; align-items: center; gap: 6px 10px; flex-wrap: wrap;
  width: 100%; text-align: left; cursor: pointer;
  padding: 5px 10px; font: inherit; font-size: 12px; color: var(--muted);
  border: 1px solid var(--row-border); border-radius: 9px; background: var(--thead);
}
.paper-sb.collapsed > .psb-mini:hover { border-color: var(--accent); }
.psb-mini b { color: var(--text); font-weight: 700; font-size: 12.5px; }
.psb-mini .psb-mini-add {
  font-weight: 700; color: var(--accent); font-size: 12px;
  padding: 1px 7px; border: 1px solid var(--accent); border-radius: 999px;
}
.psb-mini .psb-mini-add:hover { background: var(--accent); color: #fff; }
.psb-mini-v { display: inline-flex; gap: 5px; flex-wrap: wrap; }
.psb-mini-v .chip { font-size: 11px; }
.psb-mini-hz b.good { color: var(--bull); }
.psb-mini-hz b.mid  { color: var(--amber); }
.psb-mini-hz b.bad  { color: var(--bear); }
.psb-mini-hz .bull { color: var(--bull); font-weight: 700; }
.psb-mini-hz .bear { color: var(--bear); font-weight: 700; }
.psb-mini-hz .flat { font-weight: 700; }
.psb-mini-cue { margin-left: auto; font-size: 11px; color: var(--accent); font-weight: 600; }

/* ---------- nav dropdown groups (collapse multi-tab funnel steps into one) ---------- */
.nav-dd { position: relative; }
.nav-dd-btn {
  display: inline-flex; align-items: center; gap: 5px;
  background: none; border: none; border-radius: 14px;
  padding: 3px 9px; font: inherit; font-size: 12.5px;
  color: var(--text); cursor: pointer; white-space: nowrap;
}
.nav-dd-btn:hover { background: var(--accent-soft); color: var(--accent); }
.nav-dd-num { font-size: 12px; font-weight: 700; color: var(--muted); }
.nav-dd-caret { font-size: 9px; opacity: 0.6; margin-left: 1px; transition: transform 0.12s; }
.nav-dd.open .nav-dd-caret { transform: rotate(180deg); }
.nav-dd.active .nav-dd-btn { background: var(--accent); color: #fff; font-weight: 600; }
.nav-dd.active .nav-dd-num { color: rgba(255, 255, 255, 0.8); }
.nav-dd.open .nav-dd-btn { background: var(--accent-soft); color: var(--accent); }
.nav-dd-menu {
  position: absolute; top: calc(100% + 5px); left: 0; z-index: 60;
  display: none; flex-direction: column; min-width: 178px;
  background: var(--panel); border: 1px solid var(--border);
  border-radius: 9px; padding: 5px; gap: 1px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.16);
}
.nav-dd.open .nav-dd-menu { display: flex; }
/* An open dropdown owns the space under its trigger (2026-10-04). Technicals and
   Tracked carry long briefs, so their hover card (#tipbox, z 95) sat on top of the
   menu (z 60) and hid every item; Options has a one-line title, so it never did.
   The brief still shows on hover; once a menu is open it gives way. */
body:has(.nav-dd.open) #tipbox { display: none !important; }
.nav-dd-menu .nav-item { border-radius: 6px; padding: 6px 10px; text-align: left; width: 100%; }

/* IBD's written rationale is long prose — clip it to one line in the cell and
   put the whole thing in the title, the same way name/sector cells do it. */
td.ibd-note-cell { max-width: 260px; vertical-align: middle; }
td.ibd-note-cell .clip {
  display: block; max-width: 240px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  color: var(--muted); cursor: help;
}

/* IBD per-call heat grid — fills the space beside the scoreboard table.
   Columns are individual calls, rows are horizons; it exists so the medians
   in the scoreboard can be checked against the spread that produced them. */
.ibd-cols { display: flex; gap: 18px; align-items: flex-start; flex-wrap: wrap; }
.ibd-heat { flex: 1 1 420px; min-width: 0; }
.ibd-heat-h {
  font-size: 12px; font-weight: 700; color: var(--fg);
  margin-bottom: 6px; white-space: nowrap;
}
.ibd-hrow { display: flex; align-items: center; gap: 8px; margin-bottom: 2px; }
.ibd-hlab {
  flex: 0 0 68px; text-align: right; font-size: 11.5px;
  color: var(--muted); font-weight: 600; white-space: nowrap;
}
.ibd-hcells { display: flex; gap: 2px; flex: 1 1 auto; min-width: 0; }
.ibd-hc {
  flex: 1 1 0; min-width: 0; height: 15px; border-radius: 2px;
  background: var(--row-border); cursor: help;
}
/* not-yet-reached horizons read as absent, not as a zero result */
.ibd-hc-na { background: transparent; border: 1px dashed var(--row-border); }
.ibd-hrow-alpha { margin-top: 5px; padding-top: 5px; border-top: 1px solid var(--border); }
.ibd-hrow-head .ibd-hcells { gap: 2px; }
.ibd-hx {
  flex: 1 1 0; min-width: 0; font-size: 8.5px; color: var(--muted);
  text-align: center; overflow: hidden; white-space: nowrap; cursor: help;
  letter-spacing: -0.02em;
}
.ibd-heat-note {
  margin: 7px 0 0; color: var(--muted); font-size: 11px; line-height: 1.4;
}

/* Guide section headings — separate the non-column definition blocks
   (scorecard, heat grid) from the table's own column list. */
.metric-guide .guide-sec {
  font-size: 12px; font-weight: 700; letter-spacing: 0.02em;
  color: var(--fg); margin: 14px 0 4px; padding-top: 8px;
  border-top: 1px solid var(--border);
}
.metric-guide .guide-sec:first-of-type { margin-top: 8px; }

/* Bases vs Breakdowns head-to-head — a SECOND, additive board below the
   per-tab scorecard. Vertical rules separate the two cohorts so the eye does
   not read across the divide by accident. */
.ibd-vs { margin-top: -4px; }
table.ibd-sb th.ibd-vs-hb, table.ibd-sb th.ibd-vs-hd {
  text-align: center; font-weight: 700; color: var(--fg);
}
table.ibd-sb .ibd-vs-sep { border-left: 2px solid var(--border); }
.ibd-vs-strips { display: flex; gap: 14px; align-items: flex-start; }
.ibd-vs-strip { flex-basis: 0; min-width: 0; }
.ibd-vs-strip-h {
  font-size: 11px; font-weight: 700; color: var(--fg);
  margin: 0 0 4px 76px; white-space: nowrap;
}
.ibd-vs-strip .ibd-hlab { flex-basis: 68px; }

/* ---- IBD Summary tab: cohort-level visual scorecard, no table ---- */
.ibd-sum { padding: 2px 2px 20px; }
.ibd-sum-block {
  border: 1px solid var(--border); border-radius: 8px; background: var(--panel);
  padding: 11px 14px; margin-bottom: 14px; flex: 1 1 380px; min-width: 0;
}
.ibd-sum-h { font-size: 12.5px; font-weight: 700; margin-bottom: 9px; }
.ibd-charts { display: flex; gap: 12px; flex-wrap: wrap; }
.ibd-wins { display: flex; gap: 8px; flex-wrap: wrap; }
.ibd-win {
  font-size: 12px; padding: 5px 10px; border-radius: 6px; cursor: help;
  border: 1px solid var(--border); background: var(--thead);
}
.ibd-win i { font-style: normal; color: var(--muted); font-weight: 600; }
.ibd-win-b { border-left: 3px solid var(--bull); }
.ibd-win-d { border-left: 3px solid var(--bear); }
.ibd-win-thin { opacity: 0.6; }
.ibd-win-na { opacity: 0.45; }

.ibd-legend { font-size: 11px; color: var(--muted); margin-bottom: 4px; }
.ibd-key {
  display: inline-block; width: 9px; height: 9px; border-radius: 2px;
  margin: 0 4px 0 10px; vertical-align: baseline;
}
.ibd-legend .ibd-key:first-child { margin-left: 0; }
.ibd-key-b { background: var(--bull); }
.ibd-key-d { background: var(--bear); }
/* bars: solid = bases, hatched-light = breakdowns; sign drives the colour */
.ibd-bars .ibd-bar-pos { fill: var(--bull); }
.ibd-bars .ibd-bar-neg { fill: var(--bear); }
.ibd-bars .ibd-bar-thin { opacity: 0.42; }
.ibd-bars .ibd-bar-axis { stroke: var(--muted); stroke-width: 1; opacity: 0.5; }
.ibd-bars .ibd-bar-val {
  font-size: 9px; fill: var(--fg); text-anchor: middle; font-weight: 600;
}
.ibd-bars .ibd-bar-lab { font-size: 10px; fill: var(--muted); text-anchor: middle; }
.ibd-bars .ibd-bar-na { font-size: 10px; fill: var(--muted); text-anchor: middle; }
.ibd-sum-empty { color: var(--muted); font-size: 12px; padding: 20px 0; }
.ibd-sum-note {
  color: var(--muted); font-size: 11.5px; line-height: 1.5; margin: 4px 0 0;
  max-width: 1400px;
}

/* Grouped bar chart (IBD Summary) — positioned divs, not SVG, so labels stay
   crisp when the container is a percentage width. */
.ibd-chart { display: flex; position: relative; height: var(--plot-h); align-items: stretch; }
.ibd-baxis {
  position: absolute; left: 0; right: 0; height: 0;
  border-top: 1px dashed var(--muted); opacity: 0.55; z-index: 0;
}
.ibd-bgroup { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; }
.ibd-bplot { position: relative; flex: 1 1 auto; }
.ibd-b {
  position: absolute; width: 36%; border-radius: 3px; cursor: help; z-index: 1;
}
.ibd-b-pos { background: var(--bull); }
.ibd-b-neg { background: var(--bear); }
.ibd-b-thin { opacity: 0.42; }
.ibd-b i {
  position: absolute; left: 50%; transform: translateX(-50%);
  font-style: normal; font-size: 10px; font-weight: 700; color: var(--fg);
  white-space: nowrap;
}
.ibd-b i.ibd-bv-up { bottom: 100%; margin-bottom: 2px; }
.ibd-b i.ibd-bv-dn { top: 100%; margin-top: 2px; }
.ibd-b-na {
  background: none; color: var(--muted); font-size: 11px; top: 42%;
  text-align: center; height: auto;
}
.ibd-blab {
  text-align: center; font-size: 11px; color: var(--muted);
  font-weight: 600; padding-top: 20px;
}

/* dense header line for the IBD Summary page */
.ibd-sum-top {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  font-size: 12.5px; margin-bottom: 12px;
}
.ibd-sum-top b { font-weight: 700; }
.ibd-sum-top > span { cursor: help; }
.ibd-sum-sep {
  width: 1px; height: 14px; background: var(--border); margin: 0 8px;
}
/* on the summary page the two scorecards stack, so tighten their spacing */
.ibd-sum .ibd-board { margin-bottom: 12px; }

/* Heat-grid interactivity: symbol headers link to TradingView, verdict chips
   highlight their own calls. Dimming rather than hiding keeps the columns in
   place so the highlighted set stays readable against the whole cohort. */
a.ibd-hx { text-decoration: none; }
a.ibd-hx:hover { color: var(--link); text-decoration: underline; }
.ibd-vchip { border: 0; font: inherit; cursor: pointer; }
.ibd-vchip:hover { filter: brightness(1.18); }
.ibd-vchip-on { outline: 2px solid var(--fg); outline-offset: 1px; }
.ibd-hc.ibd-dim, a.ibd-hx.ibd-dim { opacity: 0.13; }
.ibd-hc.ibd-lit { box-shadow: 0 0 0 1px var(--fg); }
a.ibd-hx.ibd-lit { color: var(--fg); font-weight: 700; }

/* ======================================================================
   BRIEFING VIEW (bf-*)

   The ✦ panel. Replaces the old generic scatter as the default visual with a
   per-tab briefing: verdict, shape of the scan, and a ranked shortlist of
   setups. Built entirely on the existing token set so it inherits light/dark
   for free — no new colours are introduced here, only new arrangements.
   ====================================================================== */

.bf-body { padding: 2px 0 18px; }

/* ---- tone stripes: one mapping, reused by every component ---- */
.bf-t-bull { --bf-c: var(--bull); --bf-bg: var(--bull-bg); }
.bf-t-bear { --bf-c: var(--bear); --bf-bg: var(--bear-bg); }
.bf-t-warn { --bf-c: var(--amber); --bf-bg: var(--amber-bg); }
.bf-t-info { --bf-c: var(--accent); --bf-bg: var(--accent-soft); }
.bf-t-flat { --bf-c: var(--grey-chip); --bf-bg: var(--grey-chip-bg); }

.bf-body .bull { color: var(--bull); }
.bf-body .bear { color: var(--bear); }
.bf-body .warn { color: var(--amber); }
.bf-body .info { color: var(--accent); }
.bf-body .flat { color: var(--muted); }

/* ---- segmented control: which visual is showing ---- */
.bf-switch {
  display: flex; flex-wrap: wrap; gap: 4px;
  padding: 8px 0 10px; border-bottom: 1px solid var(--border); margin-bottom: 12px;
}
.bf-sw {
  font: inherit; font-size: 12.5px; font-weight: 600;
  padding: 5px 13px; border-radius: 999px; cursor: pointer;
  background: var(--panel); color: var(--muted);
  border: 1px solid var(--border);
}
.bf-sw:hover { background: var(--hover); color: var(--text); }
.bf-sw.active {
  background: var(--accent); border-color: var(--accent);
  color: #fff;
}

/* ---- dense header line ---- */
.bf-head {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 4px;
  padding: 10px 14px; margin-bottom: 12px;
  background: var(--thead); border: 1px solid var(--border); border-radius: 8px;
  font-size: 13px; line-height: 1.9;
}
.bf-hpart { white-space: nowrap; }
.bf-hv { font-size: 15.5px; font-weight: 700; font-variant-numeric: tabular-nums; }
.bf-hv.bull { color: var(--bull); } .bf-hv.bear { color: var(--bear); }
.bf-hv.warn { color: var(--amber); } .bf-hv.info { color: var(--accent); }
.bf-hl { color: var(--text); }
.bf-hsep {
  display: inline-block; width: 1px; height: 15px; margin: 0 11px -2px;
  background: var(--border);
}

/* ---- verdict: the one line you read if you read nothing else ---- */
.bf-verdict {
  padding: 12px 16px; margin-bottom: 16px; border-radius: 8px;
  background: var(--bf-bg); border: 1px solid var(--border);
  border-left: 4px solid var(--bf-c);
}
.bf-vh { font-size: 15px; font-weight: 650; line-height: 1.45; color: var(--text); }
.bf-vs { font-size: 12.5px; color: var(--muted); margin-top: 5px; line-height: 1.55; }

/* ---- section block ---- */
.bf-block { margin-bottom: 20px; }
.bf-bh {
  font-size: 12px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--text); margin-bottom: 9px; line-height: 1.5;
}
.bf-bh .muted { font-weight: 500; letter-spacing: 0; text-transform: none; font-size: 12.5px; }

.bf-empty {
  padding: 22px 16px; text-align: center; color: var(--muted); font-size: 13px;
  background: var(--thead); border: 1px dashed var(--border); border-radius: 8px;
}
.bf-note {
  font-size: 11.5px; color: var(--muted); line-height: 1.6;
  margin: 9px 0 0; padding-left: 10px; border-left: 2px solid var(--border);
}

/* ---- setup cards: the payload ---- */
.bf-cards {
  display: grid; gap: 9px;
  grid-template-columns: repeat(auto-fill, minmax(288px, 1fr));
}
.bf-card {
  display: block; text-decoration: none; color: inherit;
  padding: 10px 12px 11px; border-radius: 8px;
  background: var(--panel); border: 1px solid var(--border);
  border-left: 3px solid var(--bf-c);
  transition: background .12s, box-shadow .12s, transform .12s;
}
.bf-card:hover {
  background: var(--hover); box-shadow: 0 2px 10px rgba(0,0,0,.09);
  transform: translateY(-1px);
}
.bf-crow { display: flex; align-items: center; gap: 7px; }
.bf-sym { font-size: 14.5px; font-weight: 750; letter-spacing: -0.01em; }
.bf-badge {
  font-size: 10.5px; font-weight: 700; padding: 2px 7px; border-radius: 4px;
  background: var(--bf-bg); color: var(--bf-c); white-space: nowrap;
  text-transform: uppercase; letter-spacing: 0.03em;
}
.bf-rank {
  margin-left: auto; font-size: 11px; font-weight: 700;
  color: var(--muted); font-variant-numeric: tabular-nums;
}
.bf-name {
  font-size: 11.5px; color: var(--muted); margin-top: 1px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.bf-why { font-size: 12px; line-height: 1.5; margin-top: 7px; color: var(--text); }
.bf-metrics {
  display: flex; flex-wrap: wrap; gap: 4px 6px; margin-top: 8px;
  padding-top: 8px; border-top: 1px solid var(--row-border);
}
.bf-m {
  display: inline-flex; align-items: baseline; gap: 4px;
  font-size: 11px; padding: 2px 6px; border-radius: 4px; background: var(--grey-chip-bg);
}
.bf-m i { font-style: normal; color: var(--muted); }
.bf-m b { font-variant-numeric: tabular-nums; font-weight: 700; }

/* ---- heat matrix ---- */
.bf-mx-wrap { overflow-x: auto; }
.bf-mx { border-collapse: separate; border-spacing: 2px; font-size: 12px; }
.bf-mx th {
  font-size: 11px; font-weight: 650; color: var(--muted);
  padding: 4px 8px; text-align: center; white-space: nowrap;
}
.bf-mx th.bf-mx-r { text-align: right; color: var(--text); font-weight: 700; }
.bf-mx-corner { background: transparent; }
.bf-mx-c {
  min-width: 62px; padding: 7px 9px; text-align: center; border-radius: 5px;
  background: var(--grey-chip-bg); line-height: 1.25;
}
.bf-mx-c b { display: block; font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; }
.bf-mx-c i { display: block; font-style: normal; font-size: 10.5px; opacity: .75; margin-top: 1px; }
.bf-mx-na { min-width: 62px; }

/* ---- distribution strip ---- */
.bf-hist { padding: 2px 0; }
.bf-hbars {
  display: flex; align-items: flex-end; gap: 2px; height: 92px;
  padding: 0 2px 0; border-bottom: 1px solid var(--border);
}
.bf-hb { flex: 1; min-width: 3px; border-radius: 2px 2px 0 0; background: var(--bf-c); opacity: .82; }
.bf-hb:hover { opacity: 1; }
.bf-hax {
  display: flex; justify-content: space-between; font-size: 10.5px;
  color: var(--muted); margin-top: 4px; font-variant-numeric: tabular-nums;
}
.bf-hmid { font-weight: 700; color: var(--text); }

/* ---- ranked bar list ---- */
.bf-rb { display: flex; flex-direction: column; gap: 3px; }
.bf-rbr { display: flex; align-items: center; gap: 8px; font-size: 12px; }
.bf-rbl {
  flex: 0 0 132px; text-align: right; color: var(--text); font-weight: 600;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.bf-rbt { flex: 1; height: 15px; background: var(--grey-chip-bg); border-radius: 3px; overflow: hidden; }
.bf-rbf { display: block; height: 100%; background: var(--bf-c); opacity: .78; border-radius: 3px; }
.bf-rbv { flex: 0 0 56px; font-variant-numeric: tabular-nums; font-weight: 700; }
.bf-rbs { flex: 0 0 auto; font-size: 11px; }

/* ---- sparkline ---- */
.bf-spark { width: 76px; height: 20px; vertical-align: middle; display: inline-block; }

/* ---- board table (macro / fx context boards) ---- */
.bf-board { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.bf-board th {
  font-size: 10.5px; font-weight: 650; text-transform: uppercase; letter-spacing: .04em;
  color: var(--muted); text-align: right; padding: 5px 9px; border-bottom: 1px solid var(--border);
}
.bf-board th:first-child { text-align: left; }
.bf-board td {
  padding: 5px 9px; text-align: right; border-bottom: 1px solid var(--row-border);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.bf-board td:first-child { text-align: left; font-weight: 600; }
.bf-board tr:hover td { background: var(--hover); }
.bf-board .bf-grp td {
  background: var(--thead); font-weight: 700; font-size: 11px; text-transform: uppercase;
  letter-spacing: .04em; color: var(--muted); text-align: left;
}

@media (max-width: 720px) {
  .bf-cards { grid-template-columns: 1fr; }
  .bf-rbl { flex-basis: 92px; }
  .bf-hsep { margin: 0 6px -2px; }
}

/* The briefing panel scrolls inside itself the way the table does, so the
   segmented control stays reachable no matter how long a briefing runs. */
.chart-panel { overflow: auto; max-height: calc(100vh - 128px); }
.bf-switch {
  position: sticky; top: 0; z-index: 2;
  background: var(--panel); margin-top: -8px; padding-top: 12px;
}

/* ==================== ★ personal watchlist ==================== */
/* star toggle prefixed onto every equity Symbol cell */
.wl-star {
  cursor: pointer;
  color: var(--muted);
  font-size: 13px;
  margin-right: 5px;
  user-select: none;
  line-height: 1;
  transition: color .12s, transform .12s;
}
.wl-star:hover { color: #f4b400; transform: scale(1.18); }
.wl-star.on { color: #f4b400; }

/* ⊕ paper-trade control, sitting beside the star in the same Symbol cell.
   Dimmer than the star at rest so the two read as primary/secondary rather than
   as a pair of equal buttons, and tinted a different hue when set so a glance
   tells watchlist from paper trade. */
.pp-add {
  cursor: pointer;
  color: var(--muted);
  opacity: .55;
  font-size: 12px;
  margin-right: 5px;
  user-select: none;
  line-height: 1;
  transition: color .12s, transform .12s, opacity .12s;
}
.pp-add:hover { color: var(--accent, #3b82f6); opacity: 1; transform: scale(1.18); }
.pp-add.on { color: var(--accent, #3b82f6); opacity: 1; }
.pp-add.just-added { transform: scale(1.5); }

/* editable note cell on the Watchlist tab */
.wl-note { cursor: text; display: inline-block; min-width: 44px; }
.wl-note:hover { text-decoration: underline dotted; text-underline-offset: 2px; }

/* Watchlist toolbar (rendered into #custom-top) */
.wl-bar {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  margin-bottom: 8px; font-size: 12.5px;
}
.wl-title { font-weight: 600; }
.wl-title .muted { font-weight: 400; }
.wl-add { display: inline-flex; gap: 4px; }
.wl-add input[type="search"] {
  width: 260px; padding: 4px 8px; border: 1px solid var(--border);
  border-radius: 6px; background: var(--bg); color: var(--text); font-size: 12.5px;
}
.wl-add input[type="search"]:focus { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft); outline: none; }
.wl-tools { display: inline-flex; gap: 4px; margin-left: auto; }
.wl-bar button {
  cursor: pointer; padding: 4px 9px; border: 1px solid var(--border);
  border-radius: 6px; background: var(--panel); color: var(--muted); font-size: 12.5px;
}
.wl-bar button:hover { border-color: var(--accent); color: var(--accent); }
#wl-add-btn { color: var(--accent); border-color: var(--accent); }
.wl-empty {
  flex-basis: 100%; color: var(--muted); line-height: 1.5;
  padding: 10px 12px; background: var(--bg);
  border: 1px dashed var(--border); border-radius: 8px;
}
.wl-empty b { color: #f4b400; }

/* FX board header cells carry a currency-name hover (title attr only —
   deliberately NO cursor change: a question-mark pointer across the whole
   header row looks like something is wrong rather than helpful) */
.fxb-ccy { cursor: default; }

/* Both ends of a row stay pinned while the middle scrolls: the board is read
   LEFT TO RIGHT, so losing the row's currency (left) or its summary (right)
   off-screen is what actually makes a 22-column scroll unreadable.
   box-shadow draws the seam — a collapsed border on a sticky cell doesn't
   repaint reliably while scrolling. */
table.fxb th:first-child {
  position: sticky;
  left: 0;
  z-index: 2;
  box-shadow: 1px 0 0 var(--border);
}
.fxb .fxb-avg, .fxb .fxb-avg-h {
  position: sticky;
  right: 0;
  z-index: 2;
  background: var(--panel);
  box-shadow: -1px 0 0 var(--border);
}
.fxb .fxb-avg-h { background: var(--thead); }

/* "vs board" row summary — the horizontal read of the currency board */
.fxb .fxb-avg {
  border-left: 2px solid var(--border, #33384a);
  text-align: right;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.fxb .fxb-avg.bull { color: var(--bull, #26a69a); }
.fxb .fxb-avg.bear { color: var(--bear, #ef5350); }
.fxb .fxb-avg-n { font-size: 10px; opacity: .6; font-weight: 400; }
.fxb .fxb-avg-h { border-left: 2px solid var(--border, #33384a); cursor: default; }

/* Region bands over the currency board (AMER / APAC / EMEA). The engine emits
   CURRENCIES already grouped, so a band is just a run of columns. */
.fxb .fxb-band {
  font-size: 10px;
  letter-spacing: .08em;
  font-weight: 700;
  text-transform: uppercase;
  padding: 2px 4px;
  cursor: default;
  text-align: center;          /* th in this table defaults to right — a band label centres */
  border-bottom: 2px solid currentColor;
}
.fxb .fxb-band-AMER { color: #d08770; }
.fxb .fxb-band-APAC { color: #5e9cd3; }
.fxb .fxb-band-EMEA { color: #9a8bc4; }
.fxb .fxb-bstart { border-left: 1px solid var(--border, #33384a); }
.fxb tr.fxb-rstart > * { border-top: 1px solid var(--border, #33384a); }
.fxb .fxb-rowh { white-space: nowrap; }
.fxb .fxb-reg {
  display: block;
  font-size: 9px;
  letter-spacing: .06em;
  opacity: .45;
  font-weight: 400;
}

/* FX numeraire chips — the pairs table's denominator */
.fx-numbar {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 6px;
}
.fx-numbar .block-title { flex: 1 1 320px; }
.fxb-h.fxnum { font-weight: 700; letter-spacing: .04em; }

/* ---- first-run nudge: pulse an un-clicked toggle and float its reason above it ---- */
@keyframes nudgePulse {
  0%,100% { box-shadow: 0 0 0 0 rgba(41,98,255,.55); }
  50%     { box-shadow: 0 0 0 5px rgba(41,98,255,0); }
}
button.nudge {
  position: relative;
  border-color: var(--accent, #2962ff) !important;
  color: var(--accent, #2962ff) !important;
  animation: nudgePulse 2.2s ease-out infinite;
}
button.nudge::after {
  content: attr(data-nudge);
  position: absolute; left: 50%; top: calc(100% + 7px);
  transform: translateX(-50%);
  white-space: nowrap;
  background: var(--accent, #2962ff); color: #fff;
  font-size: 11px; font-weight: 600; letter-spacing: .01em;
  padding: 3px 8px; border-radius: 5px;
  pointer-events: none; z-index: 40;
  box-shadow: 0 2px 8px rgba(0,0,0,.35);
}
button.nudge::before {
  content: ''; position: absolute; left: 50%; top: calc(100% + 2px);
  transform: translateX(-50%);
  border: 5px solid transparent; border-bottom-color: var(--accent, #2962ff);
  pointer-events: none; z-index: 40;
}
@media (prefers-reduced-motion: reduce) { button.nudge { animation: none; } }

/* ---- two-tier prose: the Guide's per-entry "more" disclosure ------------
   The hover carries the lead sentence; everything after it (evidence, caveats,
   history) is folded in here so a guide entry is one readable line until you
   ask for the rest. */
.guide-desc details.tip-more,
dd details.tip-more { margin-top: 6px; }
details.tip-more > summary {
  cursor: pointer; display: inline-block;
  font-size: 11px; letter-spacing: .03em; text-transform: uppercase;
  color: var(--muted, #6b7684);
  border: 1px solid var(--line, #dde1e7); border-radius: 4px;
  padding: 1px 7px; user-select: none; list-style: none;
}
details.tip-more > summary::-webkit-details-marker { display: none; }
details.tip-more > summary::after { content: ' ▾'; }
details[open].tip-more > summary::after { content: ' ▴'; }
details.tip-more > summary:hover { color: var(--fg, #1a1f26); border-color: var(--muted, #6b7684); }
details.tip-more[open] { display: block; margin-top: 6px; }
details.tip-more[open] > summary { margin-bottom: 5px; }

/* ---- ＋ / ✓ shortlist mark, beside the ☆ in every Symbol cell ------------
   Deliberately quieter than the star at rest: ☆ commits a paper trade, this is a
   scratch mark. Both colours come from the theme variables — an earlier version
   hard-coded a light-mode grey, which on the dark theme rendered the UNSET ＋ nearly
   white and louder than the set ✓, i.e. exactly backwards. --muted and --bull flip
   with the theme, so the relationship holds in both. */
.sl-mark {
  cursor: pointer; user-select: none; font-size: 11px; line-height: 1;
  color: var(--muted); opacity: .45; margin-right: 4px; vertical-align: middle;
  display: inline-block; width: 11px; text-align: center;
  transition: color .12s, opacity .12s, transform .12s;
}
.sl-mark:hover { opacity: 1; transform: scale(1.18); }
.sl-mark.on { color: var(--bull); opacity: 1; font-weight: 700; font-size: 12px; }
/* toolbar: the count button reads as inactive until something is on the list */
#f-short.dim-btn { opacity: .55; }
#f-shortclear { padding-left: 7px; padding-right: 7px; }

/* ── GATE BANDS on the two fundamentals views (2026-08-18) ───────────────────────────
   The row reads left to right in the order the decision is made: Score · Real · Good ·
   Trend · Price · Context. Each band opens with a coloured 2px rule that runs the full
   height of the table and a small tag in the header.

   BORDERS, NEVER FILLS — deliberately. Every cell on these views is already shaded by
   its within-sector percentile, where green means "attractive for its sector" on every
   single column. Tinting cells by gate would put a second colour system on the same
   pixels and destroy that: you could no longer tell whether a green cell is cheap or
   merely a value column. Structure gets structure; data keeps colour. */
.scanner th.gate-start,
.scanner td.gate-start   { border-left: 2px solid var(--gate-c, var(--border)); }

.gate-real    { --gate-c: #c2872f; }   /* cash          */
.gate-good    { --gate-c: #2f9c8f; }   /* returns       */
.gate-trend   { --gate-c: #4a7fd0; }   /* direction     */
.gate-price   { --gate-c: #8a6fc4; }   /* what you pay  */
.gate-score   { --gate-c: #8b95a3; }   /* the roll-ups  */
.gate-context { --gate-c: #8b95a3; }   /* not a gate    */

/* ▦ Perf bands — same treatment, the momentum view's own ordered questions */
.gate-strength { --gate-c: #4a7fd0; }  /* how fast          */
.gate-return   { --gate-c: #2f9c8f; }  /* what it returned  */
.gate-position { --gate-c: #8a6fc4; }  /* where in range    */
.gate-setup    { --gate-c: #c2872f; }  /* what shape        */
.gate-risk     { --gate-c: #c25f5f; }  /* cost to hold      */
.gate-trade    { --gate-c: #c25f5f; }  /* can you trade it  */
.gate-options  { --gate-c: #6f8fa8; }  /* what vol charges  */

/* ◆ Capital — six bands, colours reused from the semantics already established
   above rather than invented: purple = what you pay, grey = meta/roll-up, amber =
   is the profit cash, blue = which way it is going, red = risk, teal = returns on
   capital. Borders only, never fills — the cells already carry within-sector heat
   and a second colour system on the same pixels would make green ambiguous. */
.gate-implied   { --gate-c: #8a6fc4; }  /* what the price demands */
.gate-trust     { --gate-c: #8b95a3; }  /* can you believe it     */
.gate-quality   { --gate-c: #c2872f; }  /* is the profit cash     */
.gate-wcap      { --gate-c: #4a7fd0; }  /* working-capital strain */
.gate-credit    { --gate-c: #c25f5f; }  /* what lenders charge    */
.gate-intensity { --gate-c: #2f9c8f; }  /* spend to stand still   */

/* 🏦 Bonds — five bands, hues reused on the same semantics: grey = the label,
   red = what lenders charge, amber = the stack of cash owed, blue = which way the
   agencies are moving, grey = where it prints. */
.gate-bdrating { --gate-c: #8b95a3; }   /* agencies vs market     */
.gate-bdspread { --gate-c: #c25f5f; }   /* what the debt costs    */
.gate-bdprice  { --gate-c: #8a6fc4; }   /* where the bonds trade  */
.gate-bdfund   { --gate-c: #2f9c8f; }   /* what it pays, when due */
.gate-bddebt   { --gate-c: #c2872f; }   /* how big the stack is   */
.gate-bdaction { --gate-c: #4a7fd0; }   /* the agencies' moves    */
.gate-bdsrc    { --gate-c: #8b95a3; }   /* where it prints + link */

.scanner th .gate-tag {
  display: inline-block;
  margin-right: 5px;
  padding: 1px 4px;
  border-radius: 3px;
  font-size: 8.5px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--gate-c);
  border: 1px solid var(--gate-c);
  opacity: .85;
  cursor: help;
  vertical-align: 1px;
}
.scanner th .gate-tag:hover { opacity: 1; }

/* narrow screens hide half these columns anyway — drop the tag, keep the rule */
@media (max-width: 900px) {
  .scanner th .gate-tag { display: none; }
}

/* the one-line stand-in for horizons that have not elapsed yet (see paperTop) */
.psb-pending {
  margin: 6px 0 0;
  padding: 5px 9px;
  border: 1px dashed var(--border);
  border-radius: 6px;
  font-size: 11.5px;
  color: var(--muted);
  background: var(--panel);
}
.psb-pending b { color: var(--text); font-weight: 600; }
.paper-sb.collapsed .psb-pending { display: none; }

/* ── the private published book's lock strip (see PAPER_ENC in app.js) ────────── */
.paper-enc {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 7px 10px; margin-bottom: 7px;
  border: 1px solid var(--amber); border-radius: 8px;
  background: var(--amber-bg); font-size: 12px;
}
.paper-enc.unlocked { border-color: var(--bull); background: var(--bull-bg); }
.paper-enc .pe-ico { font-size: 14px; }
.paper-enc b { color: var(--text); }
.paper-enc .muted { font-size: 11px; flex: 1 1 240px; }
.paper-enc input[type="password"] {
  padding: 4px 8px; border: 1px solid var(--border); border-radius: 6px;
  background: var(--panel); color: var(--text); font-size: 12px; width: 170px;
}
.paper-enc button {
  padding: 4px 11px; border: 1px solid var(--border); border-radius: 6px;
  background: var(--panel); color: var(--text); font-size: 12px; cursor: pointer;
}
.paper-enc button:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); }
.paper-enc button:disabled { opacity: .55; cursor: default; }
.paper-enc .pe-err { color: var(--bear); font-weight: 600; }
.paper-add.readonly { display: flex; align-items: center; gap: 10px; }
.paper-add.readonly .pa-hint { flex: 1 1 auto; }

/* per-tab bands (TAB_GATES) — same controlled vocabulary, same borders-not-fills rule */
.gate-odds      { --gate-c: #2f9c8f; }  /* measured forward rates */
.gate-event     { --gate-c: #c2872f; }  /* what printed           */
.gate-levels    { --gate-c: #8a6fc4; }  /* trigger / stop / target*/
.gate-carry     { --gate-c: #2f9c8f; }  /* FX carry               */
.gate-vol       { --gate-c: #4a7fd0; }  /* implied vs realised    */
.gate-skew      { --gate-c: #8a6fc4; }  /* term / skew            */
.gate-edge      { --gate-c: #2f9c8f; }  /* measured option edge   */
.gate-liquidity { --gate-c: #6f8fa8; }  /* spread / OI / volume   */
.gate-calls     { --gate-c: #2f9c8f; }
.gate-puts      { --gate-c: #c25f5f; }
.gate-gamma     { --gate-c: #8a6fc4; }
.gate-flow      { --gate-c: #6f8fa8; }
.gate-excursion { --gate-c: #c2872f; }  /* best/worst ever reached */
.gate-horizons  { --gate-c: #4a7fd0; }  /* W1-W4 checkpoints       */
.gate-prices    { --gate-c: #6f8fa8; }  /* the raw prices          */

/* ◇ Models — four bands, hues REUSED from the semantics already established on
   the other faces rather than invented, because a colour is only worth something
   while it means the same thing everywhere: amber = the lens the row is read
   through (Setup), teal = the measured verdict (Odds / Edge), slate = breadth and
   cross-check (Liquidity), purple = valuation (Price, and Capital's Implied). */
.gate-vmroute { --gate-c: #c2872f; }   /* which lens may speak       */
.gate-vmlens  { --gate-c: #8a6fc4; }   /* implied vs delivered       */
.gate-vmcross { --gate-c: #6f8fa8; }   /* the other lenses' numbers  */

/* The one-line reading order printed above the ◇ Models table (vmReadStripHtml).
   Deliberately NOT a panel: it is a caption for the band tags in the header a few
   pixels below it, so it borrows their structure — a coloured 2px rule opening
   each phrase, exactly as each band opens with one — and nothing else. The label
   text takes the --seg-* pairs rather than the raw band hue: at 11px these are
   read as words and need 4.5:1, which the 8px bordered badges do not. */
.vm-howto {
  display: flex; align-items: baseline; flex-wrap: wrap; gap: 3px 10px;
  margin: 0 0 8px; padding: 5px 9px;
  border: 1px solid var(--row-border); border-radius: 7px; background: var(--thead);
  /* 10.5px, not the 11px the legends use, and the gap tightened to 10 — MEASURED:
     at 11px/12px the line needs 1,629px and a 1,680px window gives it 1,622, so it
     wrapped and left "Heat = measured edge only…" orphaned on a second line. The
     half-pixel buys 59px of slack and keeps the whole sentence on one line, which
     matters more here than the half point of size: an orphan reads as a separate
     statement rather than as the end of the sentence above it. It still wraps
     below ~1,560px, and each phrase keeps its own coloured rule when it does. */
  font-size: 10.5px; color: var(--muted); line-height: 1.55;
}
.vm-howto .vmh-lead {
  font-size: 10px; letter-spacing: 0.09em; text-transform: uppercase;
  font-weight: 700; color: var(--muted); white-space: nowrap;
}
.vm-howto .vmh-seg { padding-left: 7px; border-left: 2px solid var(--seg-c, var(--border)); }
.vm-howto .vmh-seg b { color: var(--seg-c, var(--text)); font-weight: 700; }
.vm-howto .vmh-route { --seg-c: var(--seg-qua); }
.vm-howto .vmh-read  { --seg-c: var(--seg-ret); }
.vm-howto .vmh-lens  { --seg-c: var(--seg-val); }
.vm-howto .vmh-cross { --seg-c: var(--seg-brd); }
.vm-howto .vmh-tail { font-style: italic; opacity: .9; }

/* ── HOME, banded by evidence (see HOME_BANDS) ───────────────────────────────────
   Same borders-not-fills rule as the tables: the band is a rule and a tag, the cards
   inside keep their own colours. The whole point is that the eye lands on ★ Measured
   first and knows, without reading, that what is below it carries less weight. */
.home-band { margin: 0 0 18px; }
.home-band > .home-grid { margin-top: 8px; }
.hb-head {
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
  padding: 5px 0 5px 10px;
  border-left: 3px solid var(--gate-c, var(--border));
}
.hb-tag {
  font-size: 11.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  color: var(--gate-c, var(--text)); white-space: nowrap;
}
.hb-why { font-size: 11.5px; color: var(--muted); flex: 1 1 260px; }
.gate-measured { --gate-c: #2f9c8f; }
.gate-scan     { --gate-c: #4a7fd0; }
.gate-rules    { --gate-c: #6f8fa8; }
@media (max-width: 700px) { .hb-why { flex-basis: 100%; } }

/* ── FROZEN IDENTITY BLOCK (see freezeIdentityCols) ──────────────────────────────
   `left` is set inline from measured header widths; this only supplies the mechanics.
   The header cells are already sticky on `top`, so they become sticky on BOTH axes
   and need the higher z-index to stay above the frozen body cells they cross.
   The seam is a box-shadow, not a border: a collapsed border on a sticky cell does
   not repaint reliably while scrolling — the same lesson the FX board learned. */
table.scanner th.sticky-on { position: sticky; z-index: 5; }
table.scanner td.sticky-on {
  position: sticky; z-index: 1;
  background: var(--panel);
}

table.scanner th.sticky-edge,
table.scanner td.sticky-edge { box-shadow: 2px 0 0 -1px var(--border); }
table.scanner th.sticky-edge { box-shadow: inset 0 -1px 0 var(--border), 2px 0 0 -1px var(--border); }
/* a frozen cell that also opens a band keeps its coloured rule on the left */
table.scanner td.sticky-on.gate-start { box-shadow: 2px 0 0 -1px var(--border); }
.hc-when {
  font-size: 11px; font-weight: 600; color: var(--muted);
  border: 1px solid var(--border); border-radius: 4px; padding: 0 5px;
}

/* Pre-open Gaps session banner — which morning these gaps belong to, above the rows */
.gap-strip {
  margin: 0 0 8px; padding: 6px 10px; border-radius: 6px; font-size: 12px;
  background: var(--amber-bg); color: var(--amber); border: 1px solid var(--amber);
}
.gap-strip.live { background: var(--bull-bg); color: var(--bull); border-color: var(--bull); }
.gap-strip b { color: inherit; }

/* ── SELECTED ROWS, v2 (2026-08-18) ──────────────────────────────────────────────
   v1 drew a 2px BLUE rule above and below the row plus a 4px left bar, and it read as
   clutter for a reason worth writing down: blue was already carrying two other meanings
   in these tables — the in-cell bars (Mom Score, 52w Pos) and every ticker link — and a
   blue box around the row then had to compete with those AND with the coloured gate
   rules standing between the bands. Four selected rows turned the grid into a lattice.

   Two fixes, not one. First, SELECTION GIVES UP THE HUE: it is neutral slate now, so
   blue means "interactive" and nothing else, and colour in this table stays reserved
   for data. Second, it stops drawing LINES and uses a WASH — a flood inset shadow that
   tints the whole row, including the cells carrying an inline heat background that a
   normal `background` could never reach. A wash reads as "these rows" at a glance
   without adding a single edge to a grid that already has plenty.

   That leaves a clean split: SELECTION is quiet, neutral and persistent; HOVER is loud,
   blue and momentary. The two never look like the same thing. */
/* v3 (2026-08-18): v2's single 5.5% wash was too faint to catch while scanning, but
   simply turning it up is the wrong lever — the wash floods OVER cells that already
   carry a green or red heat background, so a heavier grey does not make the row clearer,
   it makes the heat map muddier. Every extra percent of visibility is paid for in data
   legibility.

   So the intensity is split by what each cell is carrying. The IDENTITY BLOCK — symbol,
   name, sector, close — holds no heat, so it can take a strong tint at no cost, and it
   is frozen, which means that block is on screen at every scroll position. That is the
   marker. The DATA cells keep only a light wash, enough to carry the row across without
   dulling the shading you are reading. Strong where it is free, subtle where it is not. */
table.scanner tbody tr.row-marked > td {
  box-shadow: inset 0 0 0 9999px var(--sel-wash);
}
table.scanner tbody tr.row-marked > td.sticky-c {
  box-shadow: inset 0 0 0 9999px var(--sel-block);
}
/* the bar is listed FIRST so it paints on top of the tint rather than under it */
table.scanner tbody tr.row-marked > td:first-child {
  box-shadow: inset 5px 0 0 var(--sel-bar), inset 0 0 0 9999px var(--sel-block);
}
table.scanner tbody tr.row-marked > td.sticky-edge {
  box-shadow: inset 0 0 0 9999px var(--sel-block), 2px 0 0 -1px var(--border);
}
table.scanner tbody tr.row-marked .sym { font-weight: 800; }
/* hover on a selected row: keep the wash, add the blue rules so the cursor still reads */
table.scanner tbody tr.row-marked:hover > td {
  box-shadow: inset 0 1px 0 var(--accent), inset 0 -1px 0 var(--accent),
              inset 0 0 0 9999px var(--sel-wash);
}
table.scanner tbody tr.row-marked:hover > td.sticky-c {
  box-shadow: inset 0 1px 0 var(--accent), inset 0 -1px 0 var(--accent),
              inset 0 0 0 9999px var(--sel-block);
}
table.scanner tbody tr.row-marked:hover > td:first-child {
  box-shadow: inset 5px 0 0 var(--sel-bar), inset 0 1px 0 var(--accent),
              inset 0 -1px 0 var(--accent), inset 0 0 0 9999px var(--sel-block);
}

/* Beta confidence (2026-08-19). Opacity = how much the market actually explains
   this name (R²), NOT how attractive the number is — the green/red heat scale on
   every other cell of this tab means attractive-for-its-sector, and beta has no
   attractive direction. Faint is the COMMON case by design: 61% of scored US
   names regress at R² under 10%. */
td .beta-firm { opacity: 1; }
td .beta-mid  { opacity: 0.62; }
td .beta-weak { opacity: 0.34; }

/* ── Waiting list (Paper tab, ◷ toggle) ──────────────────────────────────── */
.wait-target { width: 78px; padding: 1px 4px; text-align: right; font: inherit;
  color: var(--fg); background: var(--input-bg, transparent);
  border: 1px solid var(--border); border-radius: 4px; }
.wait-target:focus { outline: none; border-color: var(--accent, #4a7fd0); }
.wait-promote { cursor: pointer; font-weight: 700; padding: 0 6px; border-radius: 4px;
  color: var(--muted); }
.wait-promote:hover { color: var(--bull); background: var(--bull-bg); }
.wait-promote.hot { color: var(--bull); }          /* target reached — act now */
.sl-rm { color: var(--muted); cursor: pointer; font-weight: 700; padding: 0 4px; border-radius: 4px; }
.sl-rm:hover { color: var(--bear); background: var(--bear-bg); }
.chip-dim { background: var(--chip-dim-bg, rgba(139,149,163,.15)); color: var(--muted); }

/* read-only mirror: the star shows STATE, not an action (see wlStar/paperReadOnly) */
#wa-target.bad { border-color: var(--bear); }

.paper-add.readonly code { display:inline-block; margin-top:4px; padding:2px 6px; border-radius:4px;
  background: var(--code-bg, rgba(127,127,127,.14)); white-space: pre-wrap; font-size: 11px; }

/* β on a WACC cell: the 1-year beta implies a materially different discount rate.
   Muted on purpose — it qualifies the number, it is not a finding of its own. */
.beta-dis { font-size: 10px; opacity: .75; color: var(--gate-c, #8a6fc4); cursor: help;
  border-bottom: 1px dotted currentColor; }

/* Hurdle's basis rung and cyclicality mark. Same visual weight as .beta-dis and
   for the same reason: it QUALIFIES the number beside it, it is not a finding. */
.hbasis { font-size: 10px; opacity: .7; margin-left: 3px; cursor: help;
  border-bottom: 1px dotted currentColor; }
.hbasis.warn { opacity: .85; }

/* Expectations panel: the slider reads in CAGR, with the schedule's starting
   point as a subordinate line — the slider still MOVES in intercept units
   because that is the model's actual parameter. */
.dcfslider output .dcfunit { font-size: 12px; font-weight: 600; opacity: .65; margin-left: 2px; }
.dcfslider output .dcfsub { display: block; font-size: 11px; font-weight: 400;
  opacity: .6; cursor: help; letter-spacing: 0; }

/* ---------- ◆ Capital — per-name Expectations panel ---------- */

.dcflink { cursor: pointer; border-bottom: 1px dashed var(--accent); }
.dcflink:hover { color: var(--accent); }

#dcfpanel {
  position: fixed; inset: 0; z-index: 90; display: none;
  align-items: flex-start; justify-content: center;
  background: rgba(31, 41, 51, .42); padding: 40px 16px; overflow-y: auto;
}
.dcfbox {
  width: 100%; max-width: 620px; background: var(--panel);
  border: 1px solid var(--border); border-radius: 12px;
  box-shadow: 0 16px 48px rgba(0, 0, 0, .28); padding: 16px 18px 14px;
  font-size: 13px; color: var(--text);
}
.dcfhead { display: flex; align-items: baseline; gap: 10px; margin-bottom: 10px; }
.dcfsym { font-size: 17px; font-weight: 800; color: var(--accent); }
.dcfsub { font-size: 11px; color: var(--muted); }
.dcfx {
  margin-left: auto; border: 1px solid var(--border); border-radius: 6px;
  background: var(--panel); color: var(--muted); cursor: pointer;
  padding: 2px 8px; font-size: 13px; line-height: 1.4;
}
.dcfx:hover { color: var(--text); }

.dcffacts {
  display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 11.5px;
  color: var(--muted); padding-bottom: 10px; border-bottom: 1px solid var(--row-border);
}
.dcffacts b { color: var(--text); font-size: 13px; }

.dcfwarn {
  margin-top: 10px; padding: 8px 10px; border-radius: 7px; font-size: 12px;
  color: var(--bear); background: rgba(198, 40, 40, .10);
  border: 1px solid rgba(198, 40, 40, .22);
}

.dcfslider { margin: 14px 0 4px; }
.dcfslider label {
  display: flex; justify-content: space-between; align-items: baseline;
  font-size: 11px; text-transform: uppercase; letter-spacing: .05em;
  font-weight: 700; color: var(--muted);
}
.dcfslider output { font-size: 16px; font-weight: 800; color: var(--text); letter-spacing: 0; }
.dcfslider input[type=range] { width: 100%; margin: 6px 0 2px; accent-color: var(--accent); }
.dcfmarks { display: flex; justify-content: space-between; font-size: 11px; color: var(--muted); }
.dcfmarks b { color: var(--text); }

.dcfout { text-align: center; margin: 12px 0 14px; }
.dcfbig { font-size: 34px; font-weight: 800; line-height: 1.1; }
.dcfbig.bull { color: var(--bull); }
.dcfbig.bear { color: var(--bear); }
.dcfbigsub { font-size: 11.5px; color: var(--muted); margin-top: 2px; }

table.dcfkv { width: 100%; border-collapse: collapse; font-size: 12px; }
table.dcfkv th {
  text-align: left; font-weight: 600; color: var(--muted); padding: 5px 10px 5px 0;
  vertical-align: top; white-space: nowrap; width: 1%;
}
table.dcfkv td { padding: 5px 0; border-top: 1px solid var(--row-border); }
table.dcfkv tr:first-child th, table.dcfkv tr:first-child td { border-top: none; }
table.dcfkv td.bear { color: var(--bear); }

.dcfgridwrap { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--row-border); }
.dcfgridttl {
  font-size: 11px; text-transform: uppercase; letter-spacing: .05em;
  font-weight: 700; color: var(--muted); margin-bottom: 7px;
}
table.dcfgrid { border-collapse: collapse; font-size: 12px; }
table.dcfgrid th, table.dcfgrid td {
  padding: 4px 14px; text-align: right; border: 1px solid var(--row-border);
}
table.dcfgrid th { color: var(--muted); font-weight: 600; background: var(--thead); }
table.dcfgrid td.bull { color: var(--bull); }
table.dcfgrid td.bear { color: var(--bear); }

.dcffoot { font-size: 11px; color: var(--muted); line-height: 1.55; margin-top: 9px; }

/* ---------- the three column-set faces: one family, colour-coded ----------
   Performance / Fundamentals / Capital swap the same rows between three different
   questions. Until 2026-08-23 two of them lived behind a ▦ Metrics wrapper on the
   scanners and sat bare on the Companies tab, so the same choice was reached two
   ways and nothing on screen said the three were related. They are now peer
   buttons everywhere, tinted so the family reads as a family and the active one
   is obvious. Tints borrow the band vocabulary already on ◆ Capital: blue for what
   the tape is doing, amber for the business, purple for what the price assumes. */
.face-btn { border-width: 1px; border-style: solid; font-weight: 600; }
/* Model Lab — five peer faces, one active. Distinct hues so the strip reads as one
   family of choices the way the perf/fund/capital trio does. */
.face-ml-pricer  { color: var(--blue-chip); border-color: color-mix(in srgb, var(--blue-chip) 40%, transparent); }
.face-ml-smile   { color: #0e8a7d; border-color: color-mix(in srgb, #0e8a7d 40%, transparent); }
.face-ml-event   { color: var(--amber);     border-color: color-mix(in srgb, var(--amber) 45%, transparent); }
.face-ml-density { color: #7048c4;          border-color: color-mix(in srgb, #7048c4 40%, transparent); }
.face-ml-edge    { color: var(--bull);      border-color: color-mix(in srgb, var(--bull) 45%, transparent); }
.face-ml-pricer:hover  { background: var(--blue-chip-bg); }
.face-ml-smile:hover   { background: rgba(14,138,125,.10); }
.face-ml-event:hover   { background: var(--amber-bg); }
.face-ml-density:hover { background: rgba(112,72,196,.10); }
.face-ml-edge:hover    { background: var(--bull-bg); }
.face-ml-pricer.active-btn  { background: var(--blue-chip-bg); border-color: var(--blue-chip); }
.face-ml-smile.active-btn   { background: rgba(14,138,125,.14); border-color: #0e8a7d; }
.face-ml-event.active-btn   { background: var(--amber-bg); border-color: var(--amber); }
.face-ml-density.active-btn { background: rgba(112,72,196,.14); border-color: #7048c4; }
.face-ml-edge.active-btn    { background: var(--bull-bg); border-color: var(--bull); }
.face-perf { color: var(--blue-chip); border-color: color-mix(in srgb, var(--blue-chip) 40%, transparent); }
.face-fund { color: var(--amber);     border-color: color-mix(in srgb, var(--amber) 45%, transparent); }
.face-cap  { color: #7048c4;          border-color: color-mix(in srgb, #7048c4 40%, transparent); }
.face-perf:hover { background: var(--blue-chip-bg); }
.face-fund:hover { background: var(--amber-bg); }
.face-cap:hover  { background: rgba(112, 72, 196, .10); }
.face-perf.active-btn { background: var(--blue-chip-bg); border-color: var(--blue-chip); }
.face-fund.active-btn { background: var(--amber-bg);     border-color: var(--amber); }
.face-cap.active-btn  { background: rgba(112, 72, 196, .14); border-color: #7048c4; color: #7048c4; }
/* ◇ MODELS — a fourth face, so a fourth colour, and it has to read as a SIBLING
   of ◆ Capital rather than a variant of it: both answer valuation questions, and
   if they shared a hue the button strip would say they were one control in two
   states. Teal against Capital's violet, at the same weight as the other three. */
.face-val  { color: #0d8f8f;          border-color: color-mix(in srgb, #0d8f8f 42%, transparent); }
.face-val:hover  { background: rgba(13, 143, 143, .10); }
.face-val.active-btn  { background: rgba(13, 143, 143, .14); border-color: #0d8f8f; color: #0d8f8f; }
/* ▦ SCANNERS — the fifth face and the only one Markets does not carry, so a neutral
   slate rather than a fifth saturated hue. */
.face-scan { color: #6b7c8f;          border-color: color-mix(in srgb, #6b7c8f 42%, transparent); }
.face-scan:hover { background: rgba(107, 124, 143, .10); }
.face-scan.active-btn { background: rgba(107, 124, 143, .16); border-color: #6b7c8f; color: #6b7c8f; }
/* 🏦 BONDS — the credit market's read of the same names; Markets only. Wine, so it
   reads as a sixth question rather than a shade of Fundamentals' amber or Capital's
   violet, both of which it sits between on the strip. */
.face-bonds { color: #9b2c5a;          border-color: color-mix(in srgb, #9b2c5a 42%, transparent); }
.face-bonds:hover { background: rgba(155, 44, 90, .10); }
.face-bonds.active-btn { background: rgba(155, 44, 90, .14); border-color: #9b2c5a; color: #9b2c5a; }
/* rating letters on the Bonds face: tint by grade, weight by how bad it is */
.bd-ig   { color: var(--bull);  font-weight: 600; }
.bd-hy   { color: var(--amber); font-weight: 600; }
.bd-dist { color: var(--bear);  font-weight: 700; }
/* The model picker rides the same shell as the country/metric selects so the
   toolbar keeps one control vocabulary, tinted to the face that owns it. */
select.valmodel-sel {
  max-width: 260px; border-color: color-mix(in srgb, #0d8f8f 40%, var(--border));
}
select.valmodel-sel option:disabled { color: var(--muted); font-style: italic; }
/* Structural flags in the Flags column: marks, not chips. They qualify how the
   row's numbers should be read rather than scoring it, so they stay quiet. */
.vm-flag {
  display: inline-block; font-size: 9.5px; font-weight: 700; letter-spacing: .3px;
  padding: 1px 3px; border-radius: 3px; vertical-align: middle;
  background: var(--amber-bg); color: var(--amber);
}
/* Cell-level qualifiers on ◇ Models: the ᵀ that says a Book-lens row is running on
   TANGIBLE equity, and the ᵇ that says a delivered dividend CAGR is standing in for
   a payout history the vendor never served. They must be visible enough to hover
   and quiet enough not to compete with the number they qualify, so they take the
   muted colour and sit above the baseline like a footnote mark — which is exactly
   what they are. */
.vm-sup {
  font-size: 8px; font-weight: 700; line-height: 0; letter-spacing: .2px;
  margin-left: 1px; color: var(--muted); cursor: help;
}

/* ---------- band tags cost no column width ----------
   The band tag used to sit INLINE before the first column label of each band, so
   "IMPLIED" widened the ROIC−WACC column by its own width plus a margin. Measured on
   the Companies tab's Capital face: six tags were consuming 398px of a 3,146px table
   — 12.6% of the width, roughly two columns' worth off the right edge of a laptop.
   Lifting them out of the flow and onto the header's own top line costs one 11px
   line of height ONCE and gives all of it back. */
table.scanner th { position: sticky; }              /* already positioned; stated for the absolute child */
table.scanner.bands th { padding-top: 16px; }
table.scanner.bands th .gate-tag {
  position: absolute;
  top: 2px;
  left: 8px;
  margin-right: 0;
  white-space: nowrap;
}
/* …BUT AN OVERFLOWING TAG WAS BEING PAINTED OVER (found 2026-09-02 on ◇ Models).
   Every th is sticky and therefore its own stacking context, so a tag wider than
   the column it opens is covered by the NEXT header cell's background — later
   siblings paint above earlier ones at the same z-index. "MODEL · AUTO (PER ROW)"
   rendered as "MODEL · AU". A child's z-index cannot escape its parent's context,
   so the fix has to lift the th that OWNS the tag: 4 puts it over ordinary
   headers (3) and still under the frozen identity block (5), so scrolling
   horizontally still tucks it behind the frozen columns as before. The tag sits
   on the header's reserved top line, which is empty in every neighbour, so it
   overlaps no label. Frozen columns are excluded — a band that opens inside the
   identity block must keep the higher stacking it already has. */
table.scanner.bands th.gate-start:not(.sticky-c):not(.sticky-on) { z-index: 4; }

/* a soft shadow vanishes against #0d1117 — the dark theme needs a deeper one to keep
   the tooltip reading as a layer above the table rather than part of it */
:root[data-theme="dark"] #tipbox { box-shadow: 0 8px 28px rgba(0, 0, 0, 0.6); }

/* ---- Options Strategy Board briefing ---------------------------------- */
/* The payoff diagram sits beside the plain-English description so the shape
   and the sentence explaining it are read together, not one above the other. */
.os-row { display:flex; gap:14px; align-items:center; justify-content:space-between;
          flex-wrap:wrap; margin-bottom:8px; }
.os-what { flex:1 1 340px; min-width:0; font-size:12.5px; line-height:1.45; }
.os-what b { display:block; margin-bottom:2px; }
.os-payoff { flex:0 0 260px; width:260px; height:84px;
             background:var(--panel-2, rgba(255,255,255,.03));
             border:1px solid var(--border, rgba(255,255,255,.08));
             border-radius:6px; }
@media (max-width: 760px) { .os-payoff { flex-basis:100%; width:100%; } }
.os-stats { display:flex; gap:10px; flex-wrap:wrap; margin:10px 0 14px; }
.os-stat { flex:1 1 130px; padding:8px 10px; border-radius:6px;
           background:var(--panel-2, rgba(255,255,255,.03));
           border:1px solid var(--border, rgba(255,255,255,.08)); }
.os-stat i { display:block; font-style:normal; font-size:10.5px;
             letter-spacing:.04em; text-transform:uppercase; opacity:.7; }
.os-stat b { display:block; font-size:17px; line-height:1.25; }
.os-stat span { font-size:11px; }
.bf-cardlist { display:flex; flex-direction:column; gap:10px; }
.bf-cardlist .bf-card { display:block; padding:10px 12px; border-radius:8px;
  background:var(--panel-2, rgba(255,255,255,.03));
  border:1px solid var(--border, rgba(255,255,255,.08)); }
.bf-card-h { display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin-bottom:6px; }
.bf-kv { display:flex; gap:8px; font-size:12px; padding:1.5px 0; }
.bf-kv > span:first-child { flex:0 0 96px; opacity:.65; }

/* the Δ label is longer than the frozen Market column; clip it there rather
   than let it run under the frozen # cell (its tooltip carries the full text) */
.rot-country table.rot-lead td.rot-sec { overflow: hidden; text-overflow: ellipsis; }

/* ==================== Column segments ==================================
   A wide board is cut into named blocks of columns — RETURNS, VALUATION,
   BREADTH, SOVEREIGN CURVE — each with a label above it and a rule down its
   left edge, and each switchable from the chip strip. The rule is what makes a
   twenty-seven column table scannable: without it the header row is the only
   thing separating a return from a bond yield, and the two carry the same
   label. */
table.rot-lead tr.seg-hdr th {
  font-size: 10px; letter-spacing: 0.09em; text-transform: uppercase;
  font-weight: 700; color: var(--muted); background: var(--thead);
  text-align: left; padding: 5px 8px 3px; border-bottom: 0;
  white-space: nowrap; position: relative;
}
/* The identity block is frozen to the left edge, so its LABEL has to be too or
   the two come apart on the first sideways scroll. It spans exactly the frozen
   columns (segmentCols asserts that), so one offset is enough. */
.rot-country table.rot-lead tr.seg-hdr th.seg-stick {
  position: sticky; left: 0; z-index: 7; background: var(--thead);
  box-shadow: 6px 0 8px -6px rgba(0,0,0,.28);
}
/* Loud, because it means a column was moved out of the frozen block and the
   label above it now spans the wrong cells — a rendering bug, not a data one. */
table.rot-lead tr.seg-hdr th.seg-bad { color: var(--bear); }
/* The segment rule itself: one attribute, set on the first cell of every block
   in the header rows and in every body row. The colours are the ones the main
   scanner table's gate bands already established — teal returns, purple what
   you pay, amber is-the-profit-cash, blue direction, red risk, grey roll-ups —
   so the two tables read as one system rather than two conventions. Borders
   only, never fills: the cells carry heat shading and a second colour system on
   the same pixels would make green ambiguous. */
table.rot-lead th[data-segs], table.rot-lead td[data-segs] {
  border-left: 2px solid var(--seg-c, var(--border));
}
table.rot-lead tr.seg-hdr th:first-child[data-segs] { border-left: 0; }
table.rot-lead tr.seg-hdr th[data-segs] { color: var(--seg-c, var(--muted)); }

/* THE SEGMENT LABEL IS TEXT, NOT JUST A RULE, and 10px uppercase text needs a
   contrast ratio the gate-band hues do not have on a near-white header — the
   grey band measured 2.90:1 against #f9fafc, the amber 2.96, the teal 3.21, all
   of them under the 4.5:1 an ordinary reader needs. The .gate-tag palette gets
   away with one hue for both themes because it is an 8px badge inside a border,
   read as a marker rather than as a word. A section label is read as a word.
   So each band carries TWO values of the same hue: a darker one for the light
   theme and a lifted one for dark, both measured at >= 4.5:1 against that
   theme's header. Same colour, same meaning, legible in both. */
:root {
  --seg-mkt: #6c747f;  /* who and how big     */
  --seg-ret: #278075;  /* what it returned    */
  --seg-val: #7f66b4;  /* what you pay        */
  --seg-grw: #637a3a;  /* what is growing     */
  --seg-qua: #976925;  /* is the profit cash  */
  /* --seg-brd moved from #5b758a (2026-09-17): it sat 2.7 apart from --seg-mkt in
     light and 4.3 in dark (OKLab dE x100), so the grey identity/size bands and the
     breadth/vs-index bands read as one colour. A steel blue in BOTH themes, held to
     the palette's own muted range, now clears --seg-mkt by >=10 and every other band
     by >=8 with label text still >=4.5:1. --seg-mkt is unchanged: it is the most-used
     band, so the move went to the less-used one. */
  --seg-brd: #036c91;  /* how wide            */
  --seg-rate: #b25757; /* cost and leverage   */
  --seg-eco: #976755;  /* the real economy    */
  --seg-crv: #4372bb;  /* the sovereign curve */
}
:root[data-theme="dark"] {
  --seg-mkt: #8b95a3;
  --seg-ret: #2f9c8f;
  --seg-val: #937bc9;
  --seg-grw: #7f9c4a;
  --seg-qua: #c2872f;
  --seg-brd: #3bb0ce;
  --seg-rate: #c76c6c;
  --seg-eco: #ad7b69;
  --seg-crv: #5587d3;
}
[data-segc="mkt"], [data-segc="sec"], [data-segc="size"], [data-segc="more"] { --seg-c: var(--seg-mkt); }
[data-segc="ret"], [data-segc="roc"]                     { --seg-c: var(--seg-ret); }
[data-segc="val"], [data-segc="exp"]                     { --seg-c: var(--seg-val); }
[data-segc="grw"]                                        { --seg-c: var(--seg-grw); }
[data-segc="qua"]                                        { --seg-c: var(--seg-qua); }
[data-segc="brd"], [data-segc="idx"]                     { --seg-c: var(--seg-brd); }
[data-segc="rate"], [data-segc="dbt"]                    { --seg-c: var(--seg-rate); }
[data-segc="eco"]                                        { --seg-c: var(--seg-eco); }
[data-segc="crv"]                                        { --seg-c: var(--seg-crv); }

.seg-bar {
  display: flex; align-items: center; flex-wrap: wrap; gap: 4px;
  margin: 0 0 7px; padding: 6px 8px;
  border: 1px solid var(--row-border); border-radius: 7px; background: var(--thead);
}
.seg-barlab {
  font-size: 10px; letter-spacing: 0.09em; text-transform: uppercase;
  font-weight: 700; color: var(--muted); margin-right: 4px;
}
/* The label became the disclosure (2026-09-18) — see segmentCols. Closed, the bar
   is one line; open, it is the chip row it always was. The summary beside the word
   carries what the chips were telling you at rest, in sentence case so it reads as
   a statement rather than a second label. */
button.seg-barlab {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: inherit; background: none; border: 0; padding: 2px 2px; cursor: pointer;
}
button.seg-barlab:hover { color: var(--text); }
button.seg-barlab .seg-caret { font-size: 9px; opacity: .8; width: 8px; }
button.seg-barlab .seg-sum {
  text-transform: none; letter-spacing: 0; font-weight: 500; font-size: 11px; opacity: .85;
}
.seg-bar .seg-chips { display: none; align-items: center; flex-wrap: wrap; gap: 4px; }
.seg-bar.open .seg-chips { display: inline-flex; }
button.seg-chip {
  display: inline-flex; align-items: center; gap: 5px;
  font: inherit; font-size: 11.5px; line-height: 1;
  padding: 4px 8px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--row-border); background: transparent; color: var(--muted);
}
button.seg-chip:hover { border-color: var(--seg-c, var(--accent)); color: var(--seg-c, var(--accent)); }
/* On = the block is drawn, in that block's own colour, so the chip and the rule
   it controls are visibly the same thing. Off is a plain outline chip, which is
   what makes the strip itself say how much of the board you have put away. */
button.seg-chip.on {
  border-color: var(--seg-c, var(--accent)); color: var(--text); font-weight: 600;
  background: color-mix(in srgb, var(--seg-c, var(--accent)) 11%, transparent);
  box-shadow: inset 3px 0 0 var(--seg-c, var(--accent));
  padding-left: 10px;
}
button.seg-chip.on:hover { color: var(--text); }
button.seg-chip .seg-n {
  font-size: 10px; font-variant-numeric: tabular-nums;
  padding: 1px 5px; border-radius: 999px;
  color: var(--seg-c, var(--muted));
  background: color-mix(in srgb, var(--seg-c, var(--muted)) 14%, transparent);
}
button.seg-chip.seg-lock { cursor: default; opacity: 0.75; }
button.seg-chip.seg-lock:hover { border-color: var(--accent); color: var(--text); }
button.seg-chip.seg-all { border-style: dashed; }

/* ---- Countries board filters ---- */
/* An inline group inside the header strip since 2026-09-04, no longer a row. */
.ctry-filters {
  display: inline-flex; align-items: center; flex-wrap: wrap; gap: 6px;
  margin: 0; font-size: 12px;
}
.ctry-fcount {
  font-size: 11.5px; color: var(--muted); font-variant-numeric: tabular-nums;
  margin-left: 0; white-space: nowrap;
}
/* A control that is live but cannot change anything is worse than one that says
   why — the mix toggle under a single-sector filter. */
button.ctry-mix.ctry-off {
  opacity: 0.4; cursor: not-allowed; text-decoration: line-through;
}
button.ctry-mix.ctry-off:hover { border-color: var(--row-border); color: inherit; }

/* The rank in front of a market name — the sort's rank, so it answers whatever
   column carries the arrow. */
.ctry-rank {
  display: inline-block; min-width: 15px; margin-right: 4px;
  font-size: 10.5px; font-variant-numeric: tabular-nums;
  color: var(--muted); font-weight: 600; text-align: right;
}
/* The far end of the verdict strip's ranking — present, and quieter than the leader. */
.ctry-far { color: var(--muted); }
.ctry-far b { color: var(--muted); font-weight: 600; }

/* ---- market bands on the sector boards ----
   Twenty markets x eleven sectors is not a table you read top to bottom. The
   band header names each block once instead of repeating the market down every
   row, and folds it away on a click. */
/* --thead is #f9fafc against a #ffffff panel — a 1% difference, which means a
   band header painted with it reads as an ordinary row carrying a caret rather
   than as the break between two markets. Tint it off --muted instead, in both
   themes, and rule it with a weight that matches the segment rules going the
   other way: this is the same kind of boundary, one axis over. */
table.rot-lead tr.sec-band td {
  background: color-mix(in srgb, var(--muted) 13%, var(--panel));
  cursor: pointer; user-select: none;
  padding: 6px 8px; font-size: 12.5px; text-align: left;
  border-top: 2px solid color-mix(in srgb, var(--muted) 55%, transparent);
  border-bottom: 1px solid var(--row-border);
}
/* The cell spans the table, so pinning IT does nothing — the label inside is
   what has to stay put when the board is scrolled sideways. */
table.rot-lead tr.sec-band td > span.sec-band-in {
  position: sticky; left: 8px; display: inline-block;
}
table.rot-lead tr.sec-band:hover td { color: var(--accent); }
table.rot-lead tr.sec-band:hover .sec-band-caret { color: var(--accent); }
/* A folded band is a rule with a name on it, not a section — flatten it so the
   eye skips it, and let the caret carry the state at a size you can hit. */
table.rot-lead tr.sec-band.folded td {
  background: transparent; border-top-style: dashed; padding: 4px 8px;
}
table.rot-lead tr.sec-band.folded b { font-weight: 600; color: var(--muted); }
.sec-band-caret {
  display: inline-block; width: 14px; color: var(--muted); font-size: 11px;
}
table.rot-lead tr.sec-band:first-child td { border-top: 0; }


/* ---- the sector boards freeze two columns, not four ----
   Same scrollport, different identity block: on the country board it is market /
   count / cap / cap-GDP, here it is just the sector and its count. The frozen
   block and the segment label above it have to span the same cells on both, so
   the widths live apart rather than sharing one nth-child rule. */
table.sec-main tr:not(.seg-hdr):not(.sec-band) th:nth-child(-n+2),
table.sec-main tr:not(.seg-hdr):not(.sec-band) td:nth-child(-n+2) {
  position: sticky; background: var(--panel);
  box-shadow: inset -1px 0 0 var(--row-border), inset 0 -1px 0 var(--row-border);
}
table.sec-main tr:not(.seg-hdr):not(.sec-band) th:nth-child(-n+2) { background: var(--thead); z-index: 6; }
table.sec-main tr:not(.seg-hdr):not(.sec-band) td:nth-child(-n+2) { z-index: 4; }
table.sec-main tr:not(.seg-hdr):not(.sec-band) th:nth-child(1),
table.sec-main tr:not(.seg-hdr):not(.sec-band) td:nth-child(1) { left: 0; width: 158px; min-width: 158px; max-width: 158px; }
table.sec-main tr:not(.seg-hdr):not(.sec-band) th:nth-child(2),
table.sec-main tr:not(.seg-hdr):not(.sec-band) td:nth-child(2) {
  left: 158px; width: 48px; min-width: 48px; max-width: 48px;
  box-shadow: inset -1px 0 0 var(--row-border), inset 0 -1px 0 var(--row-border), 6px 0 8px -6px rgba(0,0,0,.28);
}
table.sec-main tr:not(.sec-band):hover td:nth-child(-n+2) { background: var(--hover); }
table.sec-main tr:not(.seg-hdr):not(.sec-band).rot-total td:nth-child(-n+2) { background: var(--thead); }
table.sec-main tr.seg-hdr th.seg-stick {
  position: sticky; left: 0; z-index: 7; background: var(--thead);
  box-shadow: 6px 0 8px -6px rgba(0,0,0,.28);
}


/* ===== MODELS TAB (MRM platform) =====
   Model Risk Management view (app.js "MODELS TAB" block). Everything runs on the
   theme tokens above, so dark mode needs no second block. */
.mrm { padding: 6px 8px 24px; font-size: 12.5px; }
.mrm-top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.mrm-title { font-size: 14px; font-weight: 700; }
.mrm-nav { display: inline-flex; gap: 4px; flex-wrap: wrap; }
.mrm-fresh { margin-left: auto; }
.mrm-pill {
  font: inherit; font-size: 12px; padding: 3px 10px; cursor: pointer;
  border: 1px solid var(--border); border-radius: 999px;
  background: var(--panel); color: var(--muted);
}
.mrm-pill b { color: var(--text); font-weight: 700; }
.mrm-pill:hover { border-color: var(--accent); color: var(--accent); }
.mrm-pill.active { background: var(--accent); border-color: var(--accent); color: #fff; }
.mrm-pill.active b { color: rgba(255,255,255,.85); }
.mrm-pill-empty { opacity: .5; }
.mrm-pill-sm { padding: 1px 8px; font-size: 11px; }
.mrm-btn {
  font: inherit; font-size: 12px; padding: 3px 10px; cursor: pointer;
  border: 1px solid var(--accent); border-radius: 6px; background: var(--accent); color: #fff;
}
.mrm-btn:disabled { opacity: .45; cursor: default; }
.mrm-btn-ghost { background: none; color: var(--muted); border-color: var(--border); }
.mrm-btn-ghost:hover { color: var(--accent); border-color: var(--accent); }
.mrm-x { font: inherit; font-size: 10px; border: none; background: none; color: inherit; cursor: pointer; padding: 0 0 0 3px; }

/* summary tiles */
.mrm-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 8px; margin-bottom: 10px; }
.mrm-tiles-sm { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); margin: 6px 0 10px; }
.mrm-tile { border: 1px solid var(--border); border-radius: 8px; background: var(--panel); padding: 8px 10px; min-width: 0; }
.mrm-tile-wide { grid-column: span 2; }
.mrm-tile-n { font-size: 20px; font-weight: 800; line-height: 1.2; font-variant-numeric: tabular-nums; }
.mrm-tiles-sm .mrm-tile-n { font-size: 15px; }
.mrm-tile-of, .mrm-tile-sep { font-size: 13px; color: var(--muted); font-weight: 600; }
.mrm-tile-l { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; margin-top: 2px; }
.mrm-tile-s { margin-top: 5px; font-size: 11.5px; display: flex; flex-wrap: wrap; gap: 3px; align-items: center; }
@media (max-width: 720px) { .mrm-tile-wide { grid-column: auto; } }

/* cards and text blocks */
.mrm-card { border: 1px solid var(--border); border-radius: 8px; background: var(--panel); padding: 8px 10px; margin-bottom: 10px; overflow-x: auto; }
.mrm-card .hc-head { flex-wrap: wrap; }
.mrm-head-meta { font-weight: 400; font-size: 11.5px; margin-left: 6px; }
.mrm-head-meta b { color: var(--text); }
.mrm-inv-grid { display: grid; grid-template-columns: minmax(360px, 640px); gap: 10px; margin-bottom: 8px; }
.mrm-blocks { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 8px; margin-bottom: 10px; }
.mrm-block { border: 1px solid var(--row-border); border-radius: 8px; background: var(--thead); padding: 8px 10px; min-width: 0; }
.mrm-block-h { font-size: 10.5px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; margin-bottom: 4px; }
.mrm-block-b { line-height: 1.5; }
.mrm-block-b p { margin: 0 0 6px; }
.mrm-block-b p:last-child { margin-bottom: 0; }
.mrm-ul { margin: 0; padding-left: 18px; }
.mrm-ul li { margin: 2px 0; }
.mrm-dl { margin: 0; display: grid; grid-template-columns: max-content 1fr; gap: 2px 10px; }
.mrm-dl dt { color: var(--muted); }
.mrm-dl dd { margin: 0; }
.mrm-kv { display: flex; flex-wrap: wrap; gap: 4px 10px; }
.mrm-kv-i { font-size: 11.5px; }
.mrm-kv-k { color: var(--muted); margin-right: 4px; }
.mrm-2col { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 12px; align-items: start; }
.mrm-links { display: flex; flex-wrap: wrap; gap: 5px; margin: 6px 0; }
.mrm-lnk {
  font-size: 12px; padding: 3px 9px; border: 1px solid var(--border); border-radius: 6px;
  color: var(--accent); background: var(--panel); text-decoration: none; white-space: nowrap;
}
.mrm-lnk:hover { background: var(--accent-soft); }
.mrm-gh { color: var(--accent); text-decoration: none; white-space: nowrap; }
.mrm-gh:hover { text-decoration: underline; }
.mrm-count { color: var(--muted); font-size: 12px; margin: 6px 0 4px; }
.mrm-count b { color: var(--text); }

/* inventory controls (own strip — the toolbar is hidden on custom tabs) */
.mrm-controls { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin: 6px 0; }
.mrm-controls input[type="search"], .mrm-controls select {
  font: inherit; font-size: 12.5px; color: var(--text); background: var(--panel);
  border: 1px solid var(--border); border-radius: 6px; padding: 4px 8px; outline: none;
}
.mrm-controls input[type="search"] { width: 220px; }
.mrm-controls input[type="search"]:focus, .mrm-controls select:focus { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft); }
.mrm-cmpbar { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; margin: 4px 0 6px; font-size: 12px; }
.mrm-cmpbar[hidden] { display: none; }

/* tables — scanner look without the scanner's row-click semantics */
.mrm-tw { overflow-x: auto; }
table.mrm-t { width: 100%; }
table.mrm-t.mrm-t-auto { width: auto; min-width: 50%; }
table.mrm-t th { white-space: nowrap; }
table.mrm-t td { vertical-align: middle; }
table.mrm-t tr[data-mrm-row] { cursor: pointer; }
table.mrm-t tr[data-mrm-row].row-marked td { background: var(--accent-soft); }
table.mrm-t th[data-mrm-sort], table.mrm-t th[data-mrm-osort] { cursor: pointer; user-select: none; }
td.mrm-cmp-td { width: 26px; text-align: center; }
td.mrm-cmp-td input { cursor: pointer; }
.mrm-id { color: var(--accent); }
td.mrm-name { white-space: nowrap; font-weight: 600; }
td.mrm-cat { white-space: nowrap; }
td.mrm-head { white-space: nowrap; font-variant-numeric: tabular-nums; }
td.mrm-wrap { white-space: normal; max-width: 420px; line-height: 1.35; }
td.mrm-thesis { max-width: 460px; min-width: 220px; }
th.mrm-th-wide { min-width: 220px; }
td.mrm-symtd { white-space: nowrap; }
td.mrm-picks { white-space: normal; max-width: 420px; line-height: 1.6; }
.mrm-sym { font-weight: 700; color: var(--accent); text-decoration: none; }
.mrm-sym:hover { text-decoration: underline; }
.mrm-tv { color: var(--muted); font-size: 10px; margin-left: 3px; text-decoration: none; }
.mrm-tv:hover { color: var(--accent); }
.mrm-overdue { color: var(--bear); font-weight: 700; white-space: nowrap; }
.mrm-clip { white-space: normal; line-height: 1.35; display: block; max-width: 340px; }

/* ── INVENTORY: COLUMN SETS + THE SUMMARY ROW (2026-09-02) ───────────────────────
   One row per model has to answer where it operates, what it answers, how, on what,
   what it emits, what it likes now and how well it scores — at ~1,400px, for 100 rows.
   So: narrative cells clamp to two lines with the full text on the title, and the wide
   column sets scroll sideways inside the app frame (#table-wrap), never the page. */
.mrm-invbar { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin: 6px 0 4px; }
.mrm-colsets { display: inline-flex; gap: 4px; }
.mrm-invbar .mrm-count { margin: 0; }
/* The inventory table does NOT open its own scrollport: #table-wrap is the page's
   scroll box on every tab, and `table.scanner th`'s sticky top only holds against it.
   Any overflow value but `visible` here would make .mrm-tw the scrollport instead and
   the header would scroll away with the rows. The wide column sets therefore scroll
   sideways in #table-wrap — inside the app frame, never the page. */
.mrm-tw-inv { overflow: visible; }
.mrm-rgn { white-space: nowrap; }
.mrm-tile-n .mrm-rgn { font-size: 11px; vertical-align: 3px; }
.mrm-clamp {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2;
  overflow: hidden; white-space: normal; overflow-wrap: anywhere; line-height: 1.3;
}
.mrm-clamp1 { -webkit-line-clamp: 1; line-clamp: 1; }
.mrm-hz { font-size: 10px; padding: 0 5px; line-height: 1.35; vertical-align: 1px; }
.mrm-perf {
  display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  font-size: 11.5px; line-height: 1.45; font-variant-numeric: tabular-nums; cursor: help;
}
.mrm-perf-k { color: var(--muted); font-weight: 400; }
.mrm-perf-more { color: var(--muted); font-size: 10.5px; }
.mrm-pick { margin-right: 3px; }
td.mrm-c-region, td.mrm-c-picks { white-space: normal; line-height: 1.45; }
td.mrm-c-used { white-space: normal; line-height: 1.6; }
td.mrm-name .mrm-nm { display: block; overflow: hidden; text-overflow: ellipsis; }
td.mrm-name .hc-name.mrm-sub { max-width: none; font-weight: 400; }
table.mrm-t th.mrm-nosort { cursor: default; }
table.mrm-t th.mrm-nosort:hover { color: var(--muted); }
/* Overview column widths — tuned so the set fits ~1,400px without a horizontal scroll */
table.mrm-cols-overview td.mrm-name { max-width: 148px; }
table.mrm-cols-overview td.mrm-c-problem { max-width: 210px; min-width: 140px; }
table.mrm-cols-overview td.mrm-c-method { max-width: 148px; }
table.mrm-cols-overview td.mrm-c-inputs { max-width: 148px; }
table.mrm-cols-overview td.mrm-c-output { max-width: 165px; }
table.mrm-cols-overview td.mrm-c-picks { max-width: 124px; }
table.mrm-cols-overview td.mrm-c-perf { max-width: 148px; }
table.mrm-cols-all td.mrm-name { max-width: 150px; }
table.mrm-cols-all td.mrm-c-problem, table.mrm-cols-all td.mrm-c-method,
table.mrm-cols-all td.mrm-c-inputs, table.mrm-cols-all td.mrm-c-output { max-width: 200px; }
table.mrm-cols-all td.mrm-c-picks { max-width: 130px; }

/* tier badges: 1 = highest risk */
.mrm-tier {
  display: inline-block; min-width: 26px; text-align: center; padding: 1px 6px; border-radius: 5px;
  font-size: 11px; font-weight: 800; letter-spacing: .02em; background: var(--grey-chip-bg); color: var(--grey-chip);
}
.mrm-tier-1 { background: var(--bear-bg); color: var(--bear); }
.mrm-tier-2 { background: var(--amber-bg); color: var(--amber); }
.mrm-tier-3 { background: var(--blue-chip-bg); color: var(--blue-chip); }
.mrm-tier-4 { background: var(--bull-bg); color: var(--bull); }
.mrm-tier-lg { font-size: 12.5px; padding: 2px 8px; }

/* tier matrix */
table.mrm-matrix { border-collapse: collapse; width: 100%; font-size: 12px; }
table.mrm-matrix th { color: var(--muted); font-size: 10.5px; text-transform: uppercase; letter-spacing: .04em; padding: 4px 6px; text-align: center; font-weight: 700; }
table.mrm-matrix th:first-child { text-align: left; }
th.mrm-mx-corner { display: table-cell; }
th.mrm-mx-corner span { display: block; text-transform: none; letter-spacing: 0; font-weight: 600; }
td.mrm-mx { border: 1px solid var(--row-border); padding: 6px 8px; min-width: 110px; height: 52px; vertical-align: top; }
td.mrm-mx-1 { background: var(--bear-bg); }
td.mrm-mx-2 { background: var(--amber-bg); }
td.mrm-mx-3 { background: var(--blue-chip-bg); }
td.mrm-mx-4 { background: var(--bull-bg); }
.mrm-mx-t { display: block; font-size: 10.5px; font-weight: 700; color: var(--muted); margin-bottom: 4px; }
td.mrm-mx-1 .mrm-mx-t { color: var(--bear); }
td.mrm-mx-2 .mrm-mx-t { color: var(--amber); }
td.mrm-mx-3 .mrm-mx-t { color: var(--blue-chip); }
td.mrm-mx-4 .mrm-mx-t { color: var(--bull); }
.mrm-mx-ids { display: flex; flex-wrap: wrap; gap: 3px; }
.mrm-mx-id {
  font: inherit; font-size: 11px; font-weight: 700; padding: 1px 7px; cursor: pointer;
  border: 1px solid var(--border); border-radius: 999px; background: var(--panel); color: var(--accent);
}
.mrm-mx-id:hover { border-color: var(--accent); }

/* model page header */
.mrm-mhead { border-bottom: 1px solid var(--border); padding-bottom: 8px; margin-bottom: 10px; }
.mrm-mhead-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.mrm-back { margin: 0 4px 0 0; }
.mrm-mid { font-size: 13px; font-weight: 800; color: var(--accent); }
.mrm-mname { font-size: 16px; font-weight: 800; }
.mrm-mhead-meta { font-size: 12px; margin: 4px 0; }
.mrm-mhead-meta b { color: var(--text); }
.mrm-mhead-meta code, .mrm td code, .mrm-head-meta code { font-size: 11px; background: var(--grey-chip-bg); padding: 0 4px; border-radius: 3px; }
.mrm-cadence { display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: 12px; color: var(--muted); margin: 4px 0 8px; }
.mrm-cadence b { color: var(--text); }
.mrm-cadence [data-tip] { cursor: help; border-bottom: 1px dotted var(--muted); }
.mrm-subnav { display: flex; gap: 4px; flex-wrap: wrap; }
.mrm-body { min-width: 0; }

/* validation */
.mrm-rating { border: 1px solid var(--border); border-left-width: 5px; border-radius: 8px; padding: 10px 12px; margin-bottom: 10px; background: var(--panel); }
.mrm-rating-green { border-left-color: var(--bull); }
.mrm-rating-amber { border-left-color: var(--amber); }
.mrm-rating-red { border-left-color: var(--bear); }
.mrm-rating-grey { border-left-color: var(--grey-chip); }
.mrm-rating-t { font-size: 15px; font-weight: 800; letter-spacing: .01em; }
.mrm-rating-green .mrm-rating-t { color: var(--bull); }
.mrm-rating-amber .mrm-rating-t { color: var(--amber); }
.mrm-rating-red .mrm-rating-t { color: var(--bear); }
.mrm-rating-m { font-size: 11.5px; margin-top: 2px; }
.mrm-rating-r { margin-top: 8px; line-height: 1.5; }
.mrm-rating-r p { margin: 0 0 6px; }
.mrm-sevbar { display: inline-flex; gap: 3px; margin-left: 8px; }

/* features */
table.mrm-bars { border-collapse: collapse; width: 100%; }
table.mrm-bars td { padding: 3px 6px 3px 0; border-top: 1px solid var(--row-border); }
table.mrm-bars tr:first-child td { border-top: none; }
td.mrm-bar-l { white-space: nowrap; width: 1%; padding-right: 12px; }
td.mrm-bar-c .cellbar { width: 160px; }

/* versions */
.mrm-vers { list-style: none; margin: 0; padding: 0; }
.mrm-ver { border-top: 1px solid var(--row-border); padding: 8px 0; }
.mrm-ver:first-child { border-top: none; }
.mrm-ver-cur { background: var(--accent-soft); margin: 0 -10px; padding: 8px 10px; border-radius: 6px; }
.mrm-ver-h { display: flex; gap: 6px; align-items: center; font-size: 12px; margin-bottom: 3px; }
.mrm-ver-s { margin-bottom: 4px; line-height: 1.45; }

/* monitoring */
.mrm-regime { margin-bottom: 8px; font-size: 12.5px; }
.mrm-charts { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 10px; margin-bottom: 10px; }
.mrm-charts .mrm-card { margin-bottom: 0; }
.mrm-svg { display: block; max-width: 100%; height: auto; font-family: inherit; }
.mrm-svg rect.p { fill: var(--accent); opacity: .85; }
.mrm-svg rect.n { fill: var(--bear); opacity: .85; }
.mrm-svg line.z { stroke: var(--border); stroke-width: 1; }
.mrm-svg text { font-size: 10px; fill: var(--muted); text-anchor: middle; }
.mrm-svg text.v { fill: var(--text); font-weight: 600; }

/* compare */
.mrm-cmp-top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
table.mrm-cmp th:first-child { text-align: left; width: 150px; white-space: nowrap; color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: .04em; }
table.mrm-cmp tbody th { background: var(--thead); vertical-align: top; padding: 6px 10px; border-top: 1px solid var(--row-border); }
table.mrm-cmp td { white-space: normal; vertical-align: top; min-width: 200px; line-height: 1.4; }
.mrm-cmp-h { font: inherit; font-size: 12.5px; background: none; border: none; color: var(--accent); cursor: pointer; padding: 0; text-align: left; white-space: normal; }
.mrm-cmp-h:hover { text-decoration: underline; }

/* outputs view (2026-09-02): the scanner toolbar's own components (.controls, .wl-pick,
   .qchips) reused inside the panel, three sections under it */
.mrm-otb { margin: 2px 0 10px; }
.mrm-otb .mrm-dim { opacity: .55; }
.mrm-out-sec { margin-bottom: 12px; }
.mrm-more { display: flex; gap: 8px; align-items: center; padding: 8px 0 2px; font-size: 12px; }
.chip.mrm-chip-teal { background: rgba(13,148,136,.14); color: #0f766e; }
:root[data-theme="dark"] .chip.mrm-chip-teal { background: rgba(45,212,191,.16); color: #5eead4; }
td.mrm-nm { white-space: nowrap; max-width: 220px; overflow: hidden; text-overflow: ellipsis; }
/* Results by vintage: the Set cell's chip at table size, not the badge's 10px */
.mrm-set { font-size: 11px; margin-left: 0; vertical-align: 0; }
/* Frozen identity columns (2026-09-02) need nothing of their own: every outputs table
   is a table.scanner inside its own .mrm-tw scrollport, so the scanners' sticky-c /
   sticky-on / sticky-edge rules and tokens (--panel, --border, --sel-block) apply as
   they stand — mrmFreezeCols runs Companies' freezeIdentityCols per scrollport. */

/* picks-only outputs (2026-09-02): basket badge, the scanners' ＋/✓ mark on pick rows,
   the face bar (Companies column sets + hand-off buttons), the GitHub note, and the
   two fold-away summaries. Theme tokens throughout, so dark mode needs nothing here. */
.mrm-basket { font-size: 10px; padding: 0 5px; margin-left: 4px; vertical-align: 1px; line-height: 1.4; }
td.mrm-symtd .sl-mark { margin-right: 5px; }
table.mrm-t tr[data-mrm-pick] { cursor: pointer; }
table.mrm-face td { white-space: nowrap; }
table.mrm-face td.mrm-symtd, table.mrm-face td.name-cell, table.mrm-face td.sector-cell { white-space: normal; }
table.mrm-face td.mrm-symtd { white-space: nowrap; }
.mrm-facebar { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin: 2px 0 8px; }
.mrm-open { display: inline-flex; align-items: center; gap: 5px; flex-wrap: wrap; margin-left: auto; font-size: 12px; }
.mrm-open-list { font-size: 11px; }
.mrm-btn-sm { padding: 1px 8px; font-size: 11.5px; }
.mrm-fullnote { margin-top: 8px; font-size: 12px; }
.mrm-sumbar { display: flex; justify-content: flex-end; align-items: center; gap: 10px; margin: 0 0 6px; font-size: 12px; }
.mrm-sumtog { color: var(--muted); }
.mrm-mhead-row .mrm-sumtog { margin-left: auto; }
.mrm-mhead-compact { padding-bottom: 6px; }
.mrm-mname-sm { font-size: 13.5px; }
.mrm-mhead-out { font-size: 12px; }

/* ---- schema v2 panels (2026-09-02): verdicts, card issues, alerts, calibration, drift ----
   Same tokens as everything above, so dark mode needs no second block. */

/* chips that are BUTTONS (alerts, card issues) — the chip look, a button's behaviour */
.mrm-abtn, .mrm-cibtn { font: inherit; font-size: 11px; border: none; cursor: pointer; line-height: 1.5; }
.mrm-abtn:hover, .mrm-cibtn:hover { filter: brightness(.94); }

/* alerts strip — inventory, above everything */
.mrm-astrip {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-bottom: 8px;
  padding: 6px 9px; border: 1px solid var(--amber); border-left-width: 4px; border-radius: 8px;
  background: var(--amber-bg);
}
.mrm-astrip-red { border-color: var(--bear); background: var(--bear-bg); }
.mrm-astrip-h { font-weight: 700; font-size: 11.5px; text-transform: uppercase; letter-spacing: .04em; margin-right: 4px; }
.mrm-alert {
  font: inherit; font-size: 12px; cursor: pointer; text-align: left;
  display: inline-flex; align-items: center; gap: 5px; max-width: 520px;
  padding: 2px 9px; border: 1px solid var(--border); border-radius: 999px; background: var(--panel); color: var(--text);
}
.mrm-alert:hover { border-color: var(--accent); }
.mrm-alert-t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mrm-adot { width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto; }
.mrm-adot-red { background: var(--bear); }
.mrm-adot-amber { background: var(--amber); }
.mrm-alerts { list-style: none; margin: 0; padding: 0; }
.mrm-alert-li { display: flex; align-items: baseline; gap: 6px; padding: 3px 0; border-bottom: 1px solid var(--row-border); }
.mrm-alert-li:last-child { border-bottom: none; }
.mrm-alert-li .mrm-adot { align-self: center; }
.mrm-alert-m { font-size: 11px; margin-left: auto; white-space: nowrap; }
.mrm-alerts-card { border-color: var(--amber); }

/* card issues */
.mrm-ciwarn { color: var(--bear); cursor: help; font-size: 11px; }
.mrm-ci { margin: 0 0 10px; padding: 8px 10px; border: 1px solid var(--amber); border-radius: 8px; background: var(--amber-bg); }
.mrm-ci-h { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; margin-bottom: 5px; }
.mrm-ci-h .muted { text-transform: none; letter-spacing: 0; font-weight: 400; }
.mrm-ci-row { display: flex; align-items: baseline; gap: 8px; padding: 2px 0; font-size: 12px; }
.mrm-ci-msg { color: var(--text); }

/* the verdict strip — one line, under the header, every sub-view */
.mrm-vstrip {
  margin: 0 0 10px; padding: 5px 10px; border-left: 3px solid var(--accent);
  background: var(--accent-soft); border-radius: 0 6px 6px 0;
  font-size: 12.5px; line-height: 1.45; font-weight: 600;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* development / validation summaries */
.mrm-sum { border: 1px solid var(--border); border-radius: 8px; background: var(--panel); padding: 9px 11px; margin-bottom: 10px; }
.mrm-sum-none { margin-bottom: 8px; font-size: 12px; color: var(--text); }
.mrm-sum-v { font-size: 14px; font-weight: 700; line-height: 1.4; }
.mrm-evs { display: grid; grid-template-columns: repeat(auto-fit, minmax(155px, 1fr)); gap: 8px; margin-top: 8px; }
.mrm-ev { border: 1px solid var(--row-border); border-radius: 7px; background: var(--thead); padding: 6px 9px; min-width: 0; }
.mrm-ev-v { font-size: 18px; font-weight: 800; line-height: 1.15; font-variant-numeric: tabular-nums; }
.mrm-ev-l { font-size: 10.5px; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; margin-top: 1px; }
.mrm-ev-vs { font-size: 11.5px; color: var(--muted); margin-top: 3px; }
.mrm-ev-vs b { color: var(--text); }
.mrm-ev-n { font-size: 11px; color: var(--muted); margin-top: 3px; line-height: 1.35;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.mrm-cavs { margin: 8px 0 0; padding-left: 17px; font-size: 12px; color: var(--muted); }
.mrm-cavs li { margin: 1px 0; line-height: 1.4; }
.mrm-stamp { display: flex; flex-wrap: wrap; gap: 3px 12px; margin-top: 8px; padding-top: 6px;
  border-top: 1px solid var(--row-border); font-size: 11px; color: var(--muted); }
.mrm-stamp-k { text-transform: uppercase; letter-spacing: .04em; }
.mrm-stamp-i b { color: var(--text); font-variant-numeric: tabular-nums; }

.mrm-sum-val { border-left-width: 5px; }
.mrm-sum-head { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.mrm-sum-head .mrm-sum-v { font-size: 13.5px; }
.mrm-sum-meta { font-size: 11.5px; margin-top: 2px; }
.mrm-uses { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 8px; margin-top: 9px; }
.mrm-uselist { border: 1px solid var(--row-border); border-radius: 7px; padding: 6px 9px; background: var(--thead); }
.mrm-use-h { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; margin-bottom: 3px; }
.mrm-use-may { border-left: 3px solid var(--bull); }
.mrm-use-must { border-left: 3px solid var(--bear); }
.mrm-use-may .mrm-use-h { color: var(--bull); }
.mrm-use-must .mrm-use-h { color: var(--bear); }
.mrm-uselist ul { margin: 0; padding-left: 17px; }
.mrm-uselist li { margin: 2px 0; line-height: 1.4; }
.mrm-sum-foot { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 9px; padding-top: 7px; border-top: 1px solid var(--row-border); }
.mrm-finds { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; }
.mrm-finds-h { font-size: 10.5px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.mrm-find {
  font: inherit; font-size: 11.5px; cursor: pointer; text-align: left;
  display: inline-flex; align-items: center; gap: 4px; max-width: 340px;
  padding: 1px 8px 1px 3px; border: 1px solid var(--border); border-radius: 999px; background: var(--panel); color: var(--text);
}
.mrm-find:hover { border-color: var(--accent); }
.mrm-find-t { color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mrm-openhigh { margin-left: auto; font-size: 12px; white-space: nowrap; }
.mrm-reliance { line-height: 1.5; }
.mrm-reliance p { margin: 0 0 6px; }
.mrm-reliance p:last-child { margin-bottom: 0; }
tr.mrm-obs-hit > td { background: var(--accent-soft) !important; transition: background .4s ease; }

/* calibration */
.mrm-instr {
  display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; margin-bottom: 10px;
  padding: 7px 11px; border: 1px solid var(--accent); border-left-width: 4px; border-radius: 8px;
  background: var(--accent-soft); font-size: 12.5px; line-height: 1.45;
}
.mrm-instr-k { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--accent); white-space: nowrap; }
.mrm-instr-t { font-weight: 600; }
.mrm-plateau { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; margin-bottom: 10px;
  padding: 6px 10px; border: 1px solid var(--border); border-radius: 8px; background: var(--panel); font-size: 12.5px; }
.mrm-plat-chip { font-weight: 700; }
.mrm-plat-t { line-height: 1.45; }
.mrm-plat-m { font-size: 11.5px; margin-left: auto; white-space: nowrap; }
.mrm-plat-m b { color: var(--text); }
.mrm-cal-svg { display: block; max-width: 100%; height: auto; font-family: inherit; }
.mrm-cal-svg line.g { stroke: var(--row-border); stroke-width: 1; }
.mrm-cal-svg line.ax-l { stroke: var(--border); stroke-width: 1.5; }
.mrm-cal-svg line.ref { stroke: var(--muted); stroke-width: 1.5; stroke-dasharray: 5 4; opacity: .8; }
.mrm-cal-svg line.wh { stroke: var(--accent); stroke-width: 1.5; opacity: .55; }
.mrm-cal-svg line.wh-top { stroke: var(--amber); }
.mrm-cal-svg circle.pt { fill: var(--accent); fill-opacity: .72; stroke: var(--accent); stroke-width: 1.2; }
.mrm-cal-svg circle.pt-top { fill: var(--amber); fill-opacity: .78; stroke: var(--amber); }
.mrm-cal-svg text { font-size: 10px; fill: var(--muted); text-anchor: middle; }
.mrm-cal-svg text.ay { text-anchor: end; }
.mrm-cal-svg text.nn { font-size: 9.5px; fill: var(--text); font-weight: 600; }
.mrm-cal-svg text.ttl { font-size: 10.5px; fill: var(--muted); letter-spacing: .03em; }
.mrm-cal-note{font-size:11px;line-height:1.35;margin:2px 0 6px;opacity:.85}
.mrm-cal-leg, .mrm-psi-leg { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 6px; font-size: 11px; color: var(--muted); }
.mrm-leg-i { display: inline-flex; align-items: center; gap: 5px; }
.mrm-leg-d { width: 10px; height: 10px; border-radius: 50%; }
.mrm-leg-all { background: var(--accent); opacity: .75; }
.mrm-leg-top { background: var(--amber); opacity: .85; }
.mrm-leg-l { width: 16px; height: 0; border-top: 2px dashed var(--muted); }
.mrm-leg-b { width: 16px; height: 12px; border-radius: 3px; border: 1px solid var(--border); }
.mrm-cal-top > td { background: color-mix(in srgb, var(--amber-bg) 60%, transparent); }
.mrm-cal-tb { font-size: 10px; }

/* PSI heat strip */
.mrm-psit td, .mrm-psit th { text-align: center; }
.mrm-psit .mrm-psi-f { text-align: left; white-space: nowrap; }
.mrm-psit th.mrm-psi-now { color: var(--text); font-weight: 800; }
.mrm-psi { font-variant-numeric: tabular-nums; font-weight: 600; }
.mrm-psi-ok { background: var(--bull-bg); color: var(--bull); }
.mrm-psi-watch { background: var(--amber-bg); color: var(--amber); }
.mrm-psi-breach { background: var(--bear-bg); color: var(--bear); font-weight: 800; }
.mrm-psi-na { background: var(--thead); }
.mrm-psi-scorerow > td { border-bottom: 2px solid var(--border); }

/* triggers */
.mrm-trig-breach > td:first-child { box-shadow: inset 3px 0 0 var(--bear); }
.mrm-trig-watch > td:first-child { box-shadow: inset 3px 0 0 var(--amber); }

/* outcome vs floor */
.mrm-outfloor { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; margin: 2px 0 8px; }
.mrm-outfloor-n { font-size: 20px; font-weight: 800; font-variant-numeric: tabular-nums; }
.mrm-outfloor-l { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.mrm-outfloor-s { font-size: 11.5px; margin-left: auto; }
.mrm-legacy { background: var(--thead); }
.mrm-legacy .mrm-card { background: var(--panel); }

/* ===== schema v3: class + frequency, the classification strip, card docs =====
   The inventory gained two columns (Class, Frequency), the model page a classification
   strip and an in-tab markdown viewer for the two card docs, and the Policy page the
   model-vs-tool test and the regulations table. Nothing below restyles the v2 tab. */
.mrm-cnt-sep { color: var(--muted); }
.mrm-rgn-more { font-weight: 700; cursor: help; }
table.mrm-cols-overview td.mrm-c-region, table.mrm-cols-all td.mrm-c-region { max-width: 130px; }
.mrm-id-tool { color: var(--muted); font-weight: 600; }
tr.mrm-row-tool > td:first-child { box-shadow: inset 3px 0 0 var(--row-border); }
.mrm-cls { white-space: nowrap; }
.mrm-dqm, .mrm-ovr { font-size: 10px; }
table.mrm-cols-overview td.mrm-c-class, table.mrm-cols-all td.mrm-c-class { max-width: 132px; }
td.mrm-c-class { white-space: normal; line-height: 1.5; }
table.mrm-cols-overview td.mrm-c-freq { max-width: 150px; }
table.mrm-cols-all td.mrm-c-freq { max-width: 170px; }
td.mrm-c-freq { white-space: normal; }
.mrm-freq { font-size: 11.5px; }

/* classification strip (model page header) */
.mrm-clsbar {
  margin: 6px 0 8px; padding: 6px 10px; border: 1px solid var(--border); border-left-width: 4px;
  border-radius: 8px; background: var(--thead); font-size: 12px; line-height: 1.45;
}
.mrm-clsbar-tool { border-left-color: var(--muted); background: var(--panel); }
.mrm-clsbar-sm { border-left-color: var(--accent); }
.mrm-clsbar-r { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.mrm-cls-lg { font-size: 11.5px; font-weight: 700; }
.mrm-cls-sub { font-size: 11.5px; }
.mrm-cls-sub b { color: var(--text); }
.mrm-tchips { display: inline-flex; gap: 4px; flex-wrap: wrap; }
.mrm-tchip { font-size: 10.5px; letter-spacing: .01em; }
.mrm-cls-notests { font-size: 11.5px; font-style: italic; }
.mrm-cls-feeds { font-size: 11.5px; color: var(--muted); margin-left: auto; white-space: nowrap; }
.mrm-feed {
  font: inherit; font-size: 11px; font-weight: 700; padding: 0 5px; cursor: pointer;
  border: 1px solid var(--border); border-radius: 4px; background: var(--panel); color: var(--accent);
}
.mrm-feed:hover { border-color: var(--accent); background: var(--accent-soft); }
.mrm-cls-why { margin-top: 4px; color: var(--muted); }
.mrm-clsbar-sm .mrm-cls-why {
  display: -webkit-box; -webkit-line-clamp: 1; line-clamp: 1; -webkit-box-orient: vertical;
  overflow: hidden; cursor: help;
}
.mrm-cls-ov { margin-top: 4px; padding-top: 4px; border-top: 1px dashed var(--row-border); color: var(--amber); }
.mrm-cls-ov b { color: var(--amber); }

/* tool / empty-output states */
.mrm-toolna, .mrm-outempty { text-align: left; line-height: 1.55; max-width: 760px; }

/* card docs — the in-tab markdown viewer */
.mrm-pill-doc { border-style: dashed; }
.mrm-dochead { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; margin: 2px 0 8px; font-size: 12px; }
.mrm-doc-t { font-weight: 700; }
.mrm-doc-p { font-size: 11px; color: var(--muted); background: var(--grey-chip-bg); padding: 0 4px; border-radius: 3px; }
.mrm-doc { line-height: 1.55; max-width: 900px; padding: 10px 14px; }
.mrm-doc > :first-child { margin-top: 0; }
.mrm-md-h { font-weight: 700; line-height: 1.3; margin: 14px 0 6px; }
h2.mrm-md-h { font-size: 16px; border-bottom: 1px solid var(--row-border); padding-bottom: 4px; }
h3.mrm-md-h { font-size: 13.5px; }
h4.mrm-md-h, h5.mrm-md-h, h6.mrm-md-h { font-size: 12.5px; color: var(--muted); text-transform: uppercase; letter-spacing: .03em; }
.mrm-doc p { margin: 0 0 8px; }
.mrm-md-l { margin: 0 0 8px; padding-left: 20px; }
.mrm-md-l li { margin: 3px 0; }
.mrm-doc code { font-size: 11.5px; background: var(--grey-chip-bg); padding: 0 4px; border-radius: 3px; }
.mrm-md-code {
  margin: 0 0 10px; padding: 8px 10px; overflow-x: auto; font-size: 11.5px; line-height: 1.45;
  border: 1px solid var(--row-border); border-radius: 6px; background: var(--thead); white-space: pre;
}
.mrm-md-q { margin: 0 0 8px; padding: 2px 0 2px 10px; border-left: 3px solid var(--border); color: var(--muted); }
.mrm-md-hr { border: none; border-top: 1px solid var(--row-border); margin: 12px 0; }
.mrm-md-t { margin-bottom: 10px; }

/* policy — the model-vs-tool test and the regulations table */
.mrm-ct-p { font-size: 12.5px; line-height: 1.5; margin-bottom: 8px; }
.mrm-ct-list { margin: 0 0 8px; padding-left: 20px; }
.mrm-ct-list li { margin: 4px 0; line-height: 1.5; }
.mrm-ct-id { font-weight: 800; color: var(--accent); margin-right: 6px; }
.mrm-ct-k { font-size: 11px; background: var(--grey-chip-bg); padding: 0 4px; border-radius: 3px; margin-right: 6px; }
.mrm-ct-q { color: var(--text); }
.mrm-ct-rule {
  padding: 6px 10px; margin: 0 0 8px; border: 1px solid var(--accent); border-left-width: 4px;
  border-radius: 8px; background: var(--accent-soft); font-size: 12.5px; line-height: 1.5;
}
.mrm-ct-rules { margin-bottom: 10px; font-size: 12.5px; line-height: 1.5; }
.mrm-ct-subs { margin-bottom: 10px; }
.mrm-regs-t th { white-space: normal; }
.mrm-regs-t td.mrm-wrap { max-width: 260px; }
.mrm-foot { margin-top: 8px; font-size: 11.5px; line-height: 1.45; color: var(--muted); }
.mrm-foot div { margin-top: 3px; }

/* ===== v4 (2026-09-03): the readable inventory =======================================
   MODELS_UI_SPEC_v4 §A-C. Three independent controls (scope · columns · density) over one
   table, a KPI row whose tiles are filters, one "Details ▾" disclosure holding the facets
   and the tier matrix, and an Overview that reads left to right: problem → method →
   data/output → performance → governance. Wide prose lives in ONE column (Problem);
   everything else is a chip, a short line or a number. */

/* --- KPI row ---------------------------------------------------------------------- */
.mrm-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(148px, 1fr)); gap: 6px; margin: 4px 0 8px; }
.mrm-kpi {
  font: inherit; text-align: left; cursor: pointer; min-width: 0; overflow: hidden;
  border: 1px solid var(--border); border-radius: 8px; background: var(--panel);
  color: var(--text); padding: 6px 9px 7px;
}
.mrm-kpi:hover { border-color: var(--accent); }
.mrm-kpi.on { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); background: var(--accent-soft); }
.mrm-kpi-n { display: block; font-size: 19px; font-weight: 800; line-height: 1.15; font-variant-numeric: tabular-nums; }
.mrm-kpi-of { font-size: 13px; color: var(--muted); font-weight: 600; }
.mrm-kpi-l { display: block; font-size: 10.5px; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; margin-top: 1px; }
.mrm-kpi-s { display: flex; flex-wrap: wrap; gap: 3px; align-items: center; margin-top: 4px; font-size: 11px; min-height: 16px; }
.mrm-kpi-s b { font-weight: 700; }
.mrm-kpi-inv { display: flex; align-items: flex-start; gap: 4px; padding: 0; }
.mrm-kpi-inv .mrm-kpi-hit {
  font: inherit; text-align: left; cursor: pointer; border: none; background: none; color: inherit;
  flex: 1 1 auto; min-width: 0; padding: 6px 4px 7px 9px;
}
.mrm-kpi-det {
  font: inherit; font-size: 10.5px; cursor: pointer; white-space: nowrap; align-self: center;
  border: 1px solid var(--border); border-radius: 6px; background: var(--panel); color: var(--muted);
  padding: 2px 7px; margin: 0 7px 0 0;
}
.mrm-kpi-det:hover, .mrm-kpi-det.on { color: var(--accent); border-color: var(--accent); }
.mrm-kpi-dec .mrm-kpi-s { color: var(--accent); }

/* --- v5 ESTATE BAND (Model Hub summary above the list) -------------------------------
   Two columns on a wide screen: the ladder (rungs + members) reads down the left, the
   framework that assigns the rung sits on the right, so "what it costs" and "how it was
   decided" are one picture. Under 1080px they stack, ladder first. */
.mrm-estate {
  border: 1px solid var(--border); border-radius: 8px; background: var(--panel);
  padding: 8px 10px 10px; margin: 0 0 8px;
}
.mrm-estate.folded { padding: 6px 10px; }
.mrm-est-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.mrm-est-title { font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.mrm-est-ctl { display: inline-flex; align-items: center; gap: 5px; margin-right: auto; }
.mrm-est-fold { flex: 0 0 auto; }
.mrm-est-verdict {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px;
  margin: 6px 0 8px; padding: 6px 9px; border-radius: 6px;
  background: var(--accent-soft); font-size: 12.5px; line-height: 1.45;
}
.mrm-est-lead { font-size: 12.5px; }
.mrm-est-lead b { font-size: 14px; font-variant-numeric: tabular-nums; }
.mrm-est-cls { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 6px; }
.mrm-est-cl { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 3px; }
.mrm-est-cl.bad b { color: var(--bear); }
.mrm-est-cl.warn b { color: var(--amber); }
.mrm-est-cl.ok { color: var(--bull); }
.mrm-est-sep { color: var(--muted); opacity: .6; }
.mrm-est-grid { display: grid; grid-template-columns: minmax(0, 1.75fr) minmax(280px, 1fr); gap: 10px 14px; align-items: start; }
@media (max-width: 1080px) { .mrm-est-grid { grid-template-columns: minmax(0, 1fr); } }
.mrm-est-sub { font-size: 10.5px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; margin: 8px 0 4px; }
.mrm-est-sub-top { margin-top: 0; }
.mrm-est-mx .mrm-est-sub { margin-top: 0; }
.mrm-est-ladder { display: flex; flex-direction: column; gap: 4px; }
.mrm-est-row {
  display: grid; grid-template-columns: 92px minmax(0, 1fr) auto; gap: 3px 10px; align-items: start;
  border: 1px solid var(--row-border); border-left: 3px solid var(--border); border-radius: 6px;
  padding: 4px 8px 5px;
}
.mrm-est-row.on { border-color: var(--accent); border-left-color: var(--accent); background: var(--accent-soft); }
.mrm-est-t1 { border-left-color: var(--bear); }
.mrm-est-t2 { border-left-color: var(--amber); }
.mrm-est-t3 { border-left-color: var(--blue-chip); }
.mrm-est-t4 { border-left-color: var(--bull); }
.mrm-est-rung {
  font: inherit; cursor: pointer; text-align: left; background: none; border: 0; padding: 0;
  display: flex; flex-direction: column; gap: 1px; color: inherit;
}
.mrm-est-badge { font-size: 13px; font-weight: 800; letter-spacing: .02em; }
.mrm-est-t1 .mrm-est-badge { color: var(--bear); }
.mrm-est-t2 .mrm-est-badge { color: var(--amber); }
.mrm-est-t3 .mrm-est-badge { color: var(--blue-chip); }
.mrm-est-t4 .mrm-est-badge { color: var(--bull); }
.mrm-est-rung:hover .mrm-est-badge { text-decoration: underline; }
.mrm-est-n { font-size: 11px; color: var(--muted); font-variant-numeric: tabular-nums; }
.mrm-est-body { min-width: 0; }
.mrm-est-obl { font-size: 11.5px; color: var(--muted); line-height: 1.4; }
.mrm-est-ids { display: flex; flex-wrap: wrap; gap: 3px; align-items: center; margin-top: 4px; }
.mrm-est-id {
  font: inherit; font-size: 11px; font-weight: 700; cursor: pointer; font-variant-numeric: tabular-nums;
  border: 1px solid var(--border); border-radius: 4px; background: var(--bg); color: var(--fg);
  padding: 1px 5px; line-height: 1.5;
}
.mrm-est-id:hover { border-color: var(--accent); color: var(--accent); }
.mrm-est-id.tool { font-weight: 600; color: var(--muted); }
.mrm-est-id.feed { font-weight: 600; border-style: dashed; color: var(--muted); }
.mrm-est-id.warn { border-color: var(--amber); }
.mrm-est-w { color: var(--amber); font-weight: 800; }
.mrm-est-feeds { font-size: 10.5px; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; margin-left: 4px; }
.mrm-est-side { display: flex; flex-wrap: wrap; gap: 3px; justify-content: flex-end; align-items: center; max-width: 320px; }
.mrm-est-rate { font: inherit; font-size: 11px; cursor: pointer; border: 1px solid transparent; }
.mrm-est-rate.on { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.mrm-est-rate b { font-variant-numeric: tabular-nums; }
.mrm-est-flag { font-size: 11px; }
.mrm-est-mx table.mrm-matrix { font-size: 11px; }
.mrm-est-mx td.mrm-mx { min-width: 62px; height: 44px; padding: 4px 5px; }
.mrm-est-mx .mrm-mx-id { font-size: 10px; padding: 0 3px; }

/* --- facet panel (Details ▾) -------------------------------------------------------- */
.mrm-facets {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(215px, 1fr)); gap: 8px 12px;
  border: 1px solid var(--border); border-radius: 8px; background: var(--panel);
  padding: 8px 10px; margin-bottom: 8px;
}
.mrm-facg { min-width: 0; }
.mrm-facg-h { font-size: 10.5px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; margin-bottom: 4px; }
.mrm-facg-b { display: flex; flex-wrap: wrap; gap: 3px; align-items: center; }
.mrm-fac {
  font: inherit; font-size: 11.5px; cursor: pointer; display: inline-flex; align-items: center; gap: 4px;
  border: 1px solid var(--border); border-radius: 999px; background: var(--panel); color: var(--muted); padding: 1px 7px 1px 4px;
}
.mrm-fac:hover { border-color: var(--accent); }
.mrm-fac.on { border-color: var(--accent); background: var(--accent-soft); }
.mrm-fac b { color: var(--text); font-variant-numeric: tabular-nums; }
.mrm-fac .chip { pointer-events: none; }
.mrm-bar { display: flex; width: 100%; gap: 2px; }
.mrm-bar-s {
  font: inherit; font-size: 10.5px; font-weight: 700; cursor: pointer; min-width: 34px; flex: 1 1 0;
  border: 1px solid transparent; border-radius: 5px; padding: 3px 4px; text-align: center;
  background: var(--grey-chip-bg); color: var(--grey-chip); white-space: nowrap; overflow: hidden;
}
.mrm-bar-s b { margin-left: 3px; font-variant-numeric: tabular-nums; }
.mrm-bar-s:hover, .mrm-bar-s.on { border-color: var(--accent); }
.mrm-bar-1 { background: var(--bear-bg); color: var(--bear); }
.mrm-bar-2 { background: var(--amber-bg); color: var(--amber); }
.mrm-bar-3 { background: var(--blue-chip-bg); color: var(--blue-chip); }
.mrm-bar-4 { background: var(--bull-bg); color: var(--bull); }
details.mrm-pop { display: inline-block; }
details.mrm-pop > summary {
  list-style: none; cursor: pointer; font-size: 11.5px; color: var(--muted);
  border: 1px dashed var(--border); border-radius: 999px; padding: 1px 8px;
}
details.mrm-pop > summary::-webkit-details-marker { display: none; }
details.mrm-pop > summary:hover { color: var(--accent); border-color: var(--accent); }
details.mrm-pop[open] > summary { color: var(--accent); border-style: solid; }
.mrm-pop-b {
  position: absolute; z-index: 6; margin-top: 4px; max-width: 320px; max-height: 240px; overflow: auto;
  display: flex; flex-wrap: wrap; gap: 3px; padding: 6px 8px;
  border: 1px solid var(--border); border-radius: 8px; background: var(--panel); box-shadow: 0 6px 18px rgba(0,0,0,.14);
}

/* --- active filters row -------------------------------------------------------------- */
.mrm-frow { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; margin: 0 0 6px; font-size: 12px; }
.mrm-fchip { display: inline-flex; align-items: center; }

/* --- toolbar: segmented controls ------------------------------------------------------ */
.mrm-tbar { display: inline-flex; flex-wrap: wrap; gap: 4px 12px; align-items: center; }
.mrm-ctl { display: inline-flex; align-items: center; gap: 5px; }
.mrm-ctl-l { font-size: 10.5px; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.mrm-seg { display: inline-flex; border: 1px solid var(--border); border-radius: 7px; overflow: hidden; background: var(--panel); }
.mrm-segb {
  font: inherit; font-size: 11.5px; cursor: pointer; padding: 3px 9px; white-space: nowrap;
  border: none; border-right: 1px solid var(--border); background: none; color: var(--muted);
}
.mrm-segb:last-child { border-right: none; }
.mrm-segb b { color: var(--text); font-variant-numeric: tabular-nums; font-weight: 700; }
.mrm-segb:hover { color: var(--accent); background: var(--accent-soft); }
.mrm-segb.on { background: var(--accent); color: #fff; }
.mrm-segb.on b { color: rgba(255,255,255,.88); }
.mrm-ctl-row1 { align-items: center; }
.mrm-ctl-row1 .mrm-count { margin: 0 0 0 auto; }
.mrm-ctl-row2 { margin-top: 2px; }

/* --- the Overview cells ---------------------------------------------------------------- */
table.mrm-t.mrm-den-comfortable td, table.mrm-t.mrm-den-compact td { vertical-align: top; }
table.mrm-den-comfortable td { padding: 7px 8px; line-height: 1.35; }
table.mrm-den-compact td { padding: 4px 8px; font-size: 12px; line-height: 1.3; }
table.mrm-den-compact th { font-size: 11px; }
table.mrm-den-comfortable tbody tr:nth-of-type(even):not(:hover):not(.row-marked) > td { background: var(--thead); }
table.mrm-den-compact tbody tr:nth-of-type(even):not(:hover):not(.row-marked) > td { background: var(--thead); }
/* column budget (spec §C): every column but Problem is capped so the read column keeps
   the surplus — at ~1,450px that is ~340px, three lines for almost every card. */
td.mrm-c-idcls { white-space: nowrap; max-width: 96px; }
td.mrm-c-idcls .mrm-idcls-c { display: block; margin-top: 2px; }
.mrm-cls-sh { font-size: 10.5px; }
td.mrm-c-name2 { white-space: normal; min-width: 132px; max-width: 152px; }
.mrm-nm2 {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden;
  font-weight: 700; overflow-wrap: anywhere;
}
/* owner · version · created AND the region flags share one line — the 3-line row has no
   room for a fourth, and the whole identity is on the cell's title */
.mrm-nm-meta { display: flex; align-items: center; gap: 4px; overflow: hidden; white-space: nowrap; margin-top: 1px; }
.mrm-sub2 { font-size: 11px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; }
.mrm-rgns { display: inline-flex; gap: 3px; flex: 0 0 auto; }
/* Problem is the read column: it wraps, it is never ellipsised, and it claims the slack
   every other column gives up (spec §C). */
td.mrm-c-problem2 { white-space: normal; min-width: 320px; line-height: 1.35; overflow-wrap: anywhere; }
table.mrm-cols-overview th.mrm-th-problem2, table.mrm-cols-overview td.mrm-c-problem2 { width: 30%; }
table.mrm-cols-all th.mrm-th-problem2, table.mrm-cols-all td.mrm-c-problem2 { width: 18%; }
td.mrm-c-method2 { white-space: normal; min-width: 122px; max-width: 132px; }
.mrm-mth {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden;
  font-weight: 600; overflow-wrap: anywhere;
}
/* spec §C col 5: the method DETAIL is one muted line with the full text on the hover —
   two lines here was what pushed the comfortable row past its 64px budget */
.mrm-mth-d {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; line-clamp: 1; overflow: hidden;
  font-size: 11px; color: var(--muted); overflow-wrap: anywhere;
}
td.mrm-c-data { white-space: normal; min-width: 168px; max-width: 178px; }
.mrm-io {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2;
  overflow: hidden; overflow-wrap: anywhere;
}
.mrm-io-in { -webkit-line-clamp: 1; line-clamp: 1; }
.mrm-io-k {
  display: inline-block; min-width: 26px; margin-right: 4px; text-align: center;
  font-size: 9.5px; font-weight: 800; letter-spacing: .04em; border-radius: 3px;
  background: var(--grey-chip-bg); color: var(--grey-chip); vertical-align: 1px;
}
.mrm-io-out { background: var(--blue-chip-bg); color: var(--blue-chip); }
.mrm-io-v { font-size: 11.5px; }
td.mrm-c-perf2 { white-space: nowrap; min-width: 132px; max-width: 148px; }
.mrm-pf { display: block; cursor: help; }
.mrm-pf-r { display: flex; gap: 6px; align-items: baseline; justify-content: space-between; }
.mrm-pf-k { color: var(--muted); font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mrm-pf-v { font-variant-numeric: tabular-nums; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11px; white-space: nowrap; }
.mrm-pf-more { font-size: 10.5px; color: var(--muted); }
td.mrm-c-gov { white-space: nowrap; min-width: 132px; max-width: 142px; }
table.mrm-cols-overview td.mrm-c-picks { max-width: 96px; }
table.mrm-cols-overview td.mrm-c-freq { max-width: 92px; }
.mrm-gov-r { display: flex; align-items: center; gap: 4px; }
.mrm-gov-r + .mrm-gov-r { margin-top: 2px; }
.mrm-gov-st { max-width: 96px; overflow: hidden; text-overflow: ellipsis; flex: 0 1 auto; }
.mrm-gov-r .mrm-tier { flex: 0 0 auto; }
.mrm-gov-na { font-size: 10.5px; cursor: help; }
td.mrm-c-feeds, td.mrm-c-check { white-space: normal; min-width: 120px; max-width: 200px; }
.mrm-chk { display: block; cursor: help; font-size: 11.5px; }
.mrm-chk .mrm-pf-k { display: block; }
.mrm-chk b { font-variant-numeric: tabular-nums; }
td.mrm-c-alerts, td.mrm-c-docs { white-space: nowrap; }
td.mrm-c-univ { white-space: normal; max-width: 220px; }
td.mrm-c-hz { white-space: nowrap; }
/* COMPACT = two lines per cell, 12px type (~44px rows). The identity line, the region
   flags and the "+N more" tail go; every one of them is on a hover in this mode. */
table.mrm-den-compact .mrm-nm-meta, table.mrm-den-compact .mrm-pf-more { display: none; }
table.mrm-den-compact .mrm-mth-d { -webkit-line-clamp: 1; line-clamp: 1; }
table.mrm-den-compact .mrm-mth { -webkit-line-clamp: 1; line-clamp: 1; }
table.mrm-den-compact .mrm-io { -webkit-line-clamp: 1; line-clamp: 1; }
table.mrm-den-compact .mrm-freq, table.mrm-den-compact .mrm-clamp { -webkit-line-clamp: 1; line-clamp: 1; }
table.mrm-den-compact td.mrm-c-problem2 > span, table.mrm-den-compact td.mrm-c-problem2 {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden;
}

/* --- grouping rows ---------------------------------------------------------------------- */
tr.mrm-grp > td {
  background: var(--thead); font-size: 11.5px; padding: 4px 8px;
  border-top: 1px solid var(--border); cursor: pointer; white-space: nowrap;
}
tr.mrm-grp:hover > td { color: var(--accent); }
.mrm-grp-a { display: inline-block; width: 12px; color: var(--muted); }
.mrm-grp-d { font-size: 10px; font-style: italic; margin-left: 6px; }
.mrm-grp-f { font-size: 10.5px; margin-left: 8px; font-weight: 400; }

/* --- decisions page ---------------------------------------------------------------------- */
td.mrm-dec-t { white-space: normal; min-width: 160px; font-weight: 600; }
td.mrm-dec-o { white-space: normal; max-width: 260px; line-height: 1.6; }
table.mrm-dec-t2 td { vertical-align: top; }

/* ===== END MODELS TAB ===== */

/* ===== Model Hub badges + breadcrumb (2026-09-03) =========================
   A small class-coloured pill naming the model behind a face or a scanner, and
   the crumb home for a tab the hub owns (Option Pricer, folded out of the nav).
   Models blue, tools grey — the same convention the hub's Class column uses. */
.mb-slot { display: inline-flex; align-items: center; gap: 3px; }
.mb-slot.hidden { display: none; }
.mb-lab {
  color: var(--muted); font-size: 10px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .05em;
}
.mb-pill {
  display: inline-block; padding: 0 5px; border-radius: 999px;
  font-size: 10.5px; font-weight: 700; line-height: 16px;
  text-decoration: none; white-space: nowrap; cursor: pointer;
  border: 1px solid transparent;
}
.mb-model {
  color: var(--blue-chip); background: var(--blue-chip-bg);
  border-color: color-mix(in srgb, var(--blue-chip) 35%, transparent);
}
.mb-tool { color: var(--muted); background: var(--panel); border-color: var(--border); }
.mb-pill:hover { border-color: var(--accent); color: var(--accent); }
/* inside the playbook strip the pills sit at the far right, past the scan-line */
.playbook .mb-slot { margin-left: 8px; }

.tab-crumb {
  display: flex; align-items: center; flex-wrap: wrap; gap: 5px;
  padding: 3px 10px; margin-bottom: 6px;
  border: 1px solid var(--border); border-radius: 8px;
  background: var(--panel); font-size: 12px; line-height: 1.5;
}
.tab-crumb[hidden] { display: none; }
.crumb-link { color: var(--accent); text-decoration: none; }
.crumb-link:hover { text-decoration: underline; }
.crumb-sep { color: var(--muted); }
.crumb-here { color: var(--text); font-weight: 700; }
/* the way out of a model page and into the dashboard face it backs */
.mrm-uibtn { margin-left: 6px; text-decoration: none; }

/* ============ MACRO TAB (2026-09-03) =====================================
   Countries, FX and the gauge dashboard merged into one tab with three faces.
   Everything below is chrome ABOVE the three existing boards — none of them
   changed — plus the country board's new family control and Δ cells. */
/* ONE ROW OF TAB CHROME (2026-09-04). Face and Δ horizon were two stacked rows
   whose ink filled 511px and 712px of an 1847px strip — 28% and 39% — so the tab
   spent 54px of vertical room on two controls that sit side by side with 620px to
   spare. One wrapping row now; a narrow window wraps them back onto two lines, which
   is what they always did below ~1400px anyway. */
.mac-chrome { margin: 0 0 8px; display: flex; align-items: center; flex-wrap: wrap; gap: 6px 16px; }
.mac-facebar, .mac-hzbar {
  display: inline-flex; align-items: center; gap: 5px; flex-wrap: wrap;
}
.mac-hzbar { margin-top: 0; }
/* The face switch is a group like every other one on this tab, so it wears the same
   tray. It keeps its heavier pills — this is which PAGE you are on — so the tray
   makes the row consistent without flattening the hierarchy. */
.mac-facebar { padding: 2px 6px; border-radius: 999px; background: var(--grey-chip-bg); }

/* ---- CONTROL GROUP TRAYS ------------------------------------------------
   Replaces the .ctry-sep hairlines that used to divide this strip. A 1px rule in
   --border is not a grouping device: every rule is the same colour and the same
   weight, so twelve pills read as one run whichever decision you are hunting for.
   The tray groups by SHAPE, and colour is kept for STATE — tinted only while the
   group sits off its default, which turns the strip into an answer to "why does
   this board not look the way it usually does". Hue-per-category was the other
   option and it collides with the colour grammar the rest of this dashboard runs
   on, where red/green is the direction of a number and blue is active. */
.ctlg {
  display: inline-flex; align-items: center; gap: 3px;
  padding: 2px 6px; border-radius: 999px;
  background: var(--grey-chip-bg); border: 1px solid transparent;
}
.ctlg-lab {
  font-size: 10px; letter-spacing: .05em; text-transform: uppercase;
  color: var(--muted); margin-right: 1px; white-space: nowrap; font-weight: 600;
}
.ctlg-on { background: var(--amber-bg); border-color: color-mix(in srgb, var(--amber) 32%, transparent); }
.ctlg-on > .ctlg-lab { color: var(--amber); }

/* The board header is now a single line of: what this is · every control · as of.
   align-items:center rather than baseline, because trays are boxes, not text. */
.ctry-asof {
  font-size: 11px; font-weight: 400; letter-spacing: 0; text-transform: none;
  color: var(--muted); white-space: nowrap; margin-left: 2px;
}
/* The Columns row was 398px of ink in an 1847px line. The two visual-panel buttons
   moved into its right-hand end. */
.ctry-segrow { display: flex; align-items: center; gap: 10px 14px; flex-wrap: wrap; margin-bottom: 7px; }
.ctry-segrow .seg-bar { flex: 0 1 auto; margin-bottom: 0; }
.ctry-segright { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.mac-lab {
  font-size: 11px; letter-spacing: .04em; text-transform: uppercase;
  color: var(--muted); margin-right: 4px;
}
/* The face switch is the tab's own navigation, so it carries more weight than a
   chip row: this is which PAGE you are on, not which column set. */
button.mac-face {
  font: inherit; font-size: 12.5px; line-height: 1; cursor: pointer;
  padding: 6px 13px; border-radius: 999px;
  border: 1px solid var(--border); background: var(--panel); color: var(--muted);
}
button.mac-face:hover { border-color: var(--accent); color: var(--accent); }
button.mac-face.active {
  background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 650;
}
/* A horizon no served series can answer. Greyed and unclickable rather than live
   and inert — the tooltip says which windows the feed does carry. */
.fxb-h.mac-dead { opacity: .38; cursor: not-allowed; }
.fxb-h.mac-dead:hover { color: var(--muted); border-color: var(--border); }

/* ---- the family control on the country board ---- */
.ctry-fam { display: inline-flex; align-items: center; gap: 3px; }
button.ctry-mix.fam-chip { padding: 5px 11px; font-size: 12px; }
button.ctry-mix.fam-chip.active {
  background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 650;
}
button.ctry-mix.fam-chip.active:hover { color: #fff; opacity: .9; }

/* ---- Level + Δ cells ----------------------------------------------------
   The level reads as the number; the change reads as an annotation under it, in
   the bull/bear colour so the direction is legible before the digits are. */
table.rot-lead td.macro-cell .mac-lv { display: block; }
table.rot-lead td.macro-cell .mac-dl {
  display: block; font-size: 10.5px; line-height: 1.25; opacity: .95;
  font-variant-numeric: tabular-nums;
}
table.rot-lead td.macro-cell .mac-dv { font-variant-numeric: tabular-nums; }
table.rot-lead td.macro-cell .mac-dl.bull, table.rot-lead td.macro-cell .mac-dv.bull { color: var(--bull); }
table.rot-lead td.macro-cell .mac-dl.bear, table.rot-lead td.macro-cell .mac-dv.bear { color: var(--bear); }
/* "p" = measured against the PRIOR PRINT, not a calendar window. Nothing on the
   economics feed is daily, so the short chips mean this on most of the board. */
.mac-sup { font-size: 8.5px; opacity: .6; margin-left: 1px; }
/* The series does not serve the selected window at all — a question it cannot
   answer, which is a different thing from a missing value. */
table.rot-lead td.macro-cell.mac-unserved { opacity: .38; }
/* The second sort target on a Level+Δ header: rank by the change, not the level. */
.mac-dsort {
  font-size: 10px; margin-left: 3px; padding: 0 3px; border-radius: 3px;
  border: 1px solid var(--row-border); color: var(--muted); cursor: pointer;
}
.mac-dsort:hover { color: var(--accent); border-color: var(--accent); }
.mac-dsort.active { color: #fff; background: var(--accent); border-color: var(--accent); }

/* ---- verdict strip: the ranked movers for the active horizon ---- */
.mac-verdict {
  display: flex; flex-direction: column; gap: 4px;
  margin: 8px 0; padding: 8px 10px;
  border: 1px solid var(--row-border); border-radius: 8px; background: var(--thead);
}
.mac-vh {
  font-size: 10.5px; letter-spacing: .05em; text-transform: uppercase;
  color: var(--accent); font-weight: 700;
}
.mac-vline { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 12px; }
.mac-vlab { color: var(--text); font-weight: 650; min-width: 130px; }
.mac-vgrp { display: inline-flex; align-items: center; gap: 4px; }
.mac-vword { font-size: 10.5px; color: var(--muted); text-transform: uppercase; letter-spacing: .03em; }
.mac-vchip {
  padding: 2px 7px; border-radius: 5px; font-size: 11.5px;
  border: 1px solid var(--row-border); background: var(--panel); cursor: pointer;
}
.mac-vchip[data-cpick]:hover { border-color: var(--accent); }
.mac-vchip.mac-up { border-left: 3px solid var(--bear); }
.mac-vchip.mac-dn { border-left: 3px solid var(--bull); }
/* Δ mode with no change history for this key yet: an honest dash, never the level
   under a control labelled Δ. */
table.rot-lead td.macro-cell .mac-nochg { opacity: .4; font-weight: 400; }

/* ══════════════════════════ HOME, rebuilt 2026-09-03 (web/home.js) ══════════════════════════
   One pipeline-built file paints the page (web/data/home.json). Everything is prefixed
   .h2-; the old card styles (.home-card, .hc-*) survive for the lazy legacy band. Colours
   only ever come from the theme tokens so dark mode needs no second block, except the
   heat-matrix cell fills, which home.js computes per theme. */
.h2 { display: flex; flex-direction: column; gap: 14px; padding: 2px 0 24px; }
.h2 p { margin: 0 0 6px; } .h2 p:last-child { margin-bottom: 0; }
.h2 .pos { color: var(--bull); } .h2 .neg { color: var(--bear); }
.h2-scroll { overflow-x: auto; }
.h2-hero { padding: 14px 16px 12px; border: 1px solid var(--border); border-radius: 12px;
  background: linear-gradient(135deg, var(--panel) 55%, var(--accent-soft)); display: flex; flex-direction: column; gap: 9px; }
.h2-hero-top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.h2-hero h2 { margin: 0; font-size: 21px; font-weight: 800; letter-spacing: -.01em; }
.h2-date { color: var(--muted); font-size: 13px; }
.h2-regime-note { color: var(--muted); font-size: 12.5px; flex: 1 1 280px; }
.h2-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 8px; }
.h2-kpi { background: var(--panel); border: 1px solid var(--border); border-radius: 9px; padding: 8px 11px; cursor: pointer;
  text-align: left; font: inherit; color: var(--text); transition: border-color .12s, transform .12s; }
.h2-kpi:hover { border-color: var(--accent); transform: translateY(-1px); }
.h2-kpi b { display: block; font-size: 21px; font-weight: 800; line-height: 1.1; font-variant-numeric: tabular-nums; }
/* Since-last-session change (2026-09-17). Muted, not green/red: a tile's direction
   is not a verdict — more level tests is neither good nor bad — and the arrow plus
   the figure already carries the direction without spending colour on it. Held to
   half the value's size so it reads as an annotation on the number, not a number. */
.h2-kpi b .h2-kpi-d { font-size: 11px; font-weight: 600; font-style: normal; color: var(--muted);
  margin-left: 6px; letter-spacing: .01em; vertical-align: 2px; }
.h2-kpi b .h2-kpi-d.flat { opacity: .45; }
.h2-kpi span { font-size: 10.5px; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; }
.h2-kpi small { display: block; color: var(--muted); font-size: 11px; margin-top: 3px; }
.h2-fresh, .h2-diff { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; font-size: 11.5px; color: var(--muted); }
.h2-fresh .chip, .h2-diff .chip { font-size: 11px; }
/* the brief as five widget cards (2026-09-24; was five prose lines) */
.h2-brief { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 10px; font-size: 12.5px; line-height: 1.35; }
.h2-bc { border: 1px solid var(--border); border-radius: 12px; background: var(--panel); padding: 10px 12px 9px; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.h2-bc-h { display: flex; align-items: baseline; gap: 7px; margin-bottom: 3px; min-width: 0; }
.h2-bc-h > span { font-size: 10.5px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; white-space: nowrap; }
.h2-bc-h small { color: var(--muted); font-size: 11px; flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.h2-bc-h .h2-go { margin-left: auto; font-size: 11px; flex: none; }
.h2-bg { font-size: 10px; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; margin-top: 4px; }
.h2-br { display: grid; grid-template-columns: minmax(0, 1fr) 72px 56px; align-items: center; gap: 8px; padding: 2px 4px; margin: 0 -4px; border-radius: 6px; cursor: pointer; }
.h2-br:hover { background: var(--accent-soft); }
.h2-br-l { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.h2-br-l b { font-weight: 600; }
.h2-br .hcdiv { display: block; width: auto; margin: 0; height: 8px; }
.h2-br > b { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.h2-bm { display: block; height: 8px; border-radius: 4px; background: var(--grey-chip-bg); overflow: hidden; }
.h2-bm i { display: block; height: 100%; background: var(--accent); border-radius: 4px; }
.h2-bm.g i { background: var(--grey-chip); }
.h2-bm.inl { display: inline-block; width: 64px; vertical-align: middle; margin: 0 5px 0 4px; }
.h2-bhero { display: flex; align-items: baseline; gap: 8px; margin-top: 2px; }
.h2-bhero b { font-size: 26px; font-weight: 800; line-height: 1; }
.h2-bhero b small { font-size: 14px; color: var(--muted); font-weight: 600; }
.h2-bhero span { color: var(--muted); font-size: 11.5px; line-height: 1.3; }
.h2-meter { height: 6px; border-radius: 3px; background: var(--accent-soft); overflow: hidden; margin: 3px 0 2px; }
.h2-meter i { display: block; height: 100%; background: var(--accent); border-radius: 3px; }
.h2-bf { display: flex; flex-wrap: wrap; gap: 3px 12px; align-items: center; color: var(--muted); font-size: 11px; margin-top: auto; padding-top: 5px; border-top: 1px solid var(--row-border); }
.h2-bf b { color: var(--text); font-weight: 600; }
.h2-bf .h2-breadth { vertical-align: middle; margin: 0 2px; }
.h2-bsyms { display: flex; flex-wrap: wrap; gap: 3px 6px; align-items: center; min-width: 0; }
.h2-bsyms .sym { font-weight: 600; }
.h2-bsyms .chip { font-size: 10px; padding: 0 6px; }
.h2-bl { display: grid; grid-template-columns: 84px minmax(0, 1fr) auto; gap: 8px; align-items: center; padding: 4px 0; border-top: 1px solid var(--row-border); }
.h2-bl:first-of-type { border-top: none; padding-top: 0; }
.h2-bl > span:first-child { font-size: 10.5px; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.h2-bo { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.h2-bo > div { border: 1px solid var(--row-border); border-radius: 8px; padding: 6px 8px 5px; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.h2-bo > div > span { font-size: 10px; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.h2-bo > div .h2-bsyms .h2-go { margin-left: auto; font-size: 10.5px; padding: 0 5px; }
.h2-bo > div b.v { font-size: 16px; font-weight: 800; line-height: 1.15; }
.h2-bo > div small { color: var(--muted); font-size: 10.5px; line-height: 1.3; }
.h2-bo > div small .h2-bm { margin-top: 3px; }
.h2-sub .info { color: var(--accent); cursor: help; margin-left: 2px; }
@media (max-width: 700px) { .h2-brief { grid-template-columns: 1fr; } }
.h2-sec { border: 1px solid var(--border); border-radius: 12px; background: var(--panel); padding: 12px 14px; min-width: 0; }
.h2-sec-h { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; position: relative; }
.h2-sec-h h3 { margin: 0; font-size: 14.5px; font-weight: 800; }
.h2-sec-h .h2-sub { color: var(--muted); font-size: 12px; flex: 1 1 220px; }
.h2-sec-h .guide-toggle { position: static; margin-left: auto; }
/* world board */
.h2-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 8px; }
.h2-tile { border: 1px solid var(--border); border-radius: 10px; padding: 8px 10px 7px; background: var(--bg); cursor: pointer; min-width: 0;
  transition: border-color .12s, box-shadow .12s; }
.h2-tile:hover { border-color: var(--accent); }
.h2-tile.focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.h2-tile-h { display: flex; align-items: center; gap: 6px; font-size: 12.5px; min-width: 0; }
.h2-tile-h b { font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.h2-code { font-size: 10px; color: var(--muted); border: 1px solid var(--border); border-radius: 4px; padding: 0 4px; flex: none; }
.h2-tag { font-size: 10px !important; padding: 1px 6px !important; flex: none; }
.h2-cap { margin-left: auto; color: var(--muted); font-size: 10.5px; white-space: nowrap; flex: none; }
.h2-spark { display: block; width: 100%; height: 46px; margin: 4px 0 2px; }
.h2-ret { display: flex; gap: 9px; font-size: 11.5px; color: var(--muted); flex-wrap: wrap; }
.h2-ret b { font-variant-numeric: tabular-nums; }
.h2-tile-f { display: flex; align-items: center; gap: 5px; font-size: 10.5px; color: var(--muted); margin-top: 5px; flex-wrap: wrap; }
.h2-breadth { display: inline-block; width: 40px; height: 6px; border-radius: 3px; background: var(--grey-chip-bg); overflow: hidden; flex: none; }
.h2-breadth i { display: block; height: 100%; background: var(--bull); }
.h2-tile-go { margin-left: auto; display: inline-flex; gap: 3px; }
.h2-tile-go .h2-go { font-size: 10.5px; padding: 0 5px; }
/* heat matrix */
.h2-heat { border-collapse: collapse; font-size: 11.5px; min-width: 100%; }
.h2-heat th, .h2-heat td { padding: 3px 5px; text-align: center; white-space: nowrap; border: 1px solid var(--row-border); }
.h2-heat th { font-weight: 700; color: var(--muted); font-size: 10.5px; }
.h2-heat th.h2-rh, .h2-heat td.h2-rh { text-align: left; font-weight: 600; color: var(--text); }
.h2-heat td.h2-cell { cursor: pointer; font-variant-numeric: tabular-nums; }
.h2-heat td.h2-cell:hover { outline: 2px solid var(--accent); outline-offset: -2px; }
.h2-heat td.h2-na { color: var(--muted); }
.h2-heat tr.h2-heat-mk td { border-top: 2px solid var(--border); font-weight: 700; }
.h2-hz { font: inherit; font-size: 11.5px; padding: 2px 9px; border: 1px solid var(--border); border-radius: 999px; background: var(--panel); color: var(--muted); cursor: pointer; }
.h2-hz:hover { border-color: var(--accent); color: var(--accent); }
.h2-hz.on { color: var(--accent); border-color: var(--accent); font-weight: 700; }
/* shortlists */
.h2-two { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; }
@media (max-width: 1280px) { .h2-two { grid-template-columns: 1fr; } }
.h2-t { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.h2-t td { padding: 5px 8px 5px 0; border-top: 1px solid var(--row-border); vertical-align: top; }
.h2-t td:last-child { padding-right: 0; }
.h2-t tr.h2-band td { border-top: none; padding: 11px 0 3px; font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  color: var(--gate-c, var(--muted)); border-left: 3px solid var(--gate-c, var(--border)); padding-left: 8px; white-space: normal; }
.h2-t tr.h2-band td small { text-transform: none; letter-spacing: 0; font-weight: 400; color: var(--muted); margin-left: 8px; }
.h2-t tr.h2-band:first-child td { padding-top: 2px; }
.h2-t .hc-sym { white-space: nowrap; }
.h2-why { color: var(--muted); font-size: 11.5px; line-height: 1.4; white-space: normal; min-width: 200px; }
.h2-mk { display: inline-block; font-size: 10px; font-weight: 700; color: var(--grey-chip); background: var(--grey-chip-bg); border-radius: 4px; padding: 1px 4px; }
.h2-go { font: inherit; font-size: 12px; background: none; border: 1px solid var(--border); border-radius: 6px; color: var(--accent); cursor: pointer; padding: 1px 7px; white-space: nowrap; }
.h2-go:hover { border-color: var(--accent); background: var(--accent-soft); }
.h2-stat { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; min-width: 96px; }
.h2-stat .muted { font-size: 10.5px; }
.h2-ev { font-size: 9.5px; padding: 0 6px; border-radius: 999px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; vertical-align: middle; }
.h2-ev.m { background: rgba(47,156,143,.16); color: #2f9c8f; }
.h2-ev.d { background: rgba(74,127,208,.16); color: #4a7fd0; }
.h2-ev.c { background: var(--grey-chip-bg); color: var(--grey-chip); }
/* track record */
.h2-track { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 10px; }
.h2-tk { border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px; background: var(--bg); }
.h2-tk h4 { margin: 0 0 3px; font-size: 12.5px; display: flex; align-items: center; gap: 8px; }
.h2-tk h4 .h2-go { margin-left: auto; font-size: 11px; }
.h2-tk-n { color: var(--muted); font-size: 11px; }
.h2-bars { display: flex; flex-direction: column; gap: 4px; margin: 7px 0; }
.h2-bar { display: grid; grid-template-columns: 30px 1fr 64px; align-items: center; gap: 6px; font-size: 11px; color: var(--muted); }
.h2-bar > i { display: block; height: 8px; background: var(--grey-chip-bg); border-radius: 4px; position: relative; overflow: hidden; }
.h2-bar > i > b { position: absolute; left: 0; top: 0; height: 100%; background: var(--accent); border-radius: 4px; }
.h2-bar > i::after { content: ''; position: absolute; left: 50%; top: -1px; height: 10px; border-left: 1px dashed var(--muted); }
.h2-bar > span:last-child { text-align: right; font-variant-numeric: tabular-nums; }
.h2-verdict { font-size: 11.5px; color: var(--text); line-height: 1.45; }
/* guide — REBUILT 2026-10-02: cards and chips, no paragraphs (tokens only; the skins layer re-tints them) */
.h2-gsub { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; margin: 14px 0 7px; }
.h2-gsub h4 { margin: 0; font-size: 13px; font-weight: 800; }
.h2-gsub span { font-size: 11.5px; color: var(--muted); flex: 1 1 200px; }
.h2-gsub span b { color: var(--accent); }
.h2-gsub .h2-hz { margin-left: auto; }
.h2-pillars { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 8px; margin-top: 2px; }
.h2-pillar { border: 1px solid var(--border); border-radius: 10px; padding: 9px 11px 8px; background: var(--bg); display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.h2-pillar-h { display: flex; align-items: center; gap: 8px; font-weight: 800; font-size: 13px; color: var(--text); }
.h2-ico { width: 26px; height: 26px; border-radius: 7px; display: inline-flex; align-items: center; justify-content: center; background: var(--accent-soft); color: var(--accent); font-size: 14px; flex: none; }
.h2-pillar p { margin: 0; font-size: 11.5px; color: var(--muted); line-height: 1.4; }
.h2-proof { display: flex; flex-wrap: wrap; gap: 4px; margin-top: auto; }
.h2-proof span { font-size: 10.5px; padding: 1px 7px; border-radius: 999px; border: 1px solid var(--border); background: var(--panel); color: var(--text); white-space: nowrap; font-variant-numeric: tabular-nums; }
.h2-proof span b { color: var(--accent); }
.h2-funnel { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 8px; }
.h2-step { border: 1px solid var(--border); border-radius: 10px; padding: 9px 10px 8px; background: var(--bg); display: flex; flex-direction: column; gap: 6px; min-width: 0; transition: border-color .12s, transform .12s; }
.h2-step:hover { border-color: var(--accent); transform: translateY(-1px); }
.h2-step-main { font: inherit; color: inherit; background: none; border: 0; padding: 0; text-align: left; cursor: pointer; display: flex; flex-direction: column; gap: 5px; width: 100%; }
.h2-step-h { display: flex; align-items: center; gap: 7px; font-weight: 800; font-size: 12.5px; flex-wrap: wrap; }
.h2-step-n { width: 22px; height: 22px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 800; background: var(--accent-soft); color: var(--accent); flex: none; }
.h2-step-h .h2-ev { margin-left: auto; }
.h2-step-q { font-size: 11px; color: var(--muted); line-height: 1.35; }
.h2-step-f { margin-top: auto; display: flex; gap: 6px; align-items: flex-end; font-size: 10.5px; flex-wrap: wrap; }
.h2-faces { display: flex; flex-wrap: wrap; gap: 3px; flex: 1 1 auto; min-width: 0; }
.h2-face { font: inherit; font-size: 10.5px; line-height: 17px; padding: 0 6px; border-radius: 5px; border: 1px solid var(--border); background: var(--panel); color: var(--text); white-space: nowrap; }
button.h2-face { cursor: pointer; }
button.h2-face:hover { border-color: var(--accent); color: var(--accent); }
.h2-step-c { white-space: nowrap; margin-left: auto; font-variant-numeric: tabular-nums; }
.h2-ev.u { background: var(--amber-bg); color: var(--amber); }
.h2-new { display: grid; grid-template-columns: repeat(auto-fill, minmax(235px, 1fr)); gap: 8px; }
.h2-newc { border: 1px solid var(--border); border-radius: 10px; padding: 9px 11px 8px; background: var(--bg); display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.h2-newc.fresh { border-color: color-mix(in srgb, var(--accent) 50%, var(--border)); }
.h2-newc-h { display: flex; align-items: center; gap: 6px; font-weight: 800; font-size: 12.5px; }
.h2-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); flex: none; }
.h2-date { margin-left: auto; font-size: 10px; font-weight: 600; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.h2-newc p { margin: 0; font-size: 11px; color: var(--muted); line-height: 1.4; }
.h2-newc-f { margin-top: auto; display: flex; gap: 4px; align-items: center; flex-wrap: wrap; }
.h2-newc-f .h2-go { margin-left: auto; font-size: 11px; }
.h2-where { font-size: 10px; font-weight: 700; color: var(--grey-chip); background: var(--grey-chip-bg); border-radius: 4px; padding: 0 5px; white-space: nowrap; }
.h2-routine { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 8px; }
.h2-rt { border: 1px solid var(--border); border-radius: 10px; padding: 8px 10px; background: var(--bg); display: flex; gap: 9px; align-items: flex-start; min-width: 0; }
.h2-rt-n { font-size: 22px; font-weight: 900; line-height: 1; color: var(--accent); flex: none; min-width: 16px; font-variant-numeric: tabular-nums; }
.h2-rt b { display: block; font-size: 12px; color: var(--text); margin-bottom: 2px; }
.h2-rt small { display: block; font-size: 11px; color: var(--muted); line-height: 1.35; }
.h2-key { font-size: 10.5px; border: 1px solid var(--border); border-radius: 4px; padding: 0 4px; color: var(--text); background: var(--panel); }
/* legacy cards */
.h2-legacy { border: 1px dashed var(--border); border-radius: 10px; padding: 8px 12px; }
.h2-legacy summary { cursor: pointer; font-size: 12.5px; color: var(--muted); }
.h2-legacy summary:hover { color: var(--accent); }
.h2-legacy-body { margin-top: 10px; }
@media (max-width: 700px) { .h2-hero h2 { font-size: 18px; } .h2-tiles { grid-template-columns: 1fr 1fr; } .h2-stat { min-width: 70px; } }

/* ---- the four faces as ONE control (2026-09-03) ----
   Performance / Fundamentals / Capital / Valuation Models are a single one-of-N choice,
   but each carried its own coloured outline, so four competing outlines sat in a toolbar
   that also held five model-id pills. Grouped here, with the outline reserved for the
   face that is actually ON: the family colours survive on the active state and on hover,
   and the row reads as one control instead of four. */
.face-group {
  display: inline-flex; align-items: center; gap: 3px;
  padding: 0 3px; border-radius: 8px;
  background: color-mix(in srgb, var(--border) 30%, transparent);
}
.face-group .face-btn:not(.active-btn) { border-color: transparent; }
.face-group .face-btn:not(.active-btn):hover { border-color: currentColor; }

/* ---- toolbar: two semantic groups + the ⋯ overflow (2026-09-04) ----
   Filters choose WHICH ROWS, views choose HOW THEY ARE SHOWN. Each group wraps as a
   unit inside the wrapping controls row, so the line break lands on the boundary
   between them instead of wherever the window happened to run out of width. */
.ctl-grp { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
/* the tray is never painted: Columns and Reset live here only so their ids, listeners
   and per-tab hidden logic survive the move into the ⋯ menu */
.more-tray { display: none; }
#colmenu .cm-act {
  display: block; width: 100%; text-align: left;
  font: inherit; font-size: 12.5px; color: var(--text);
  background: transparent; border: 0; border-radius: 6px;
  padding: 6px 8px; cursor: pointer;
}
#colmenu .cm-act:hover { background: var(--accent-soft); color: var(--accent); }


/* --- Wave 0: cohort verdict line + Daily Picks scoreboard strip --------- */
.ibd-cohort{margin:6px 0 2px;padding:7px 10px;border-radius:6px;
  background:var(--panel2,rgba(127,127,127,.07));border:1px solid var(--line,rgba(127,127,127,.22));
  font-size:12px;line-height:1.5}
.ibd-cohort .chip{margin-right:7px}
.picks-sb .picks-sb-tbl{border-collapse:collapse;margin:7px 0 5px;font-size:12px;width:auto}
.picks-sb .picks-sb-tbl th,.picks-sb .picks-sb-tbl td{padding:2px 10px 2px 0;text-align:left;white-space:nowrap}
.picks-sb .picks-sb-tbl thead th{font-weight:600;border-bottom:1px solid var(--line,rgba(127,127,127,.25))}
.picks-sb .picks-sb-tbl td.num,.picks-sb .picks-sb-tbl th.num{text-align:right;padding-right:14px}
.picks-sb .picks-sb-tbl tbody th{font-weight:500}
.picks-sb i{display:block;margin-top:5px;opacity:.78;line-height:1.5}

/* Wave 5: KPI spans inside the crypto/commodities verdict strips need their own
   breathing room — .ibd-stat is laid out by the IBD scorecard grid there. */
.pb-strip .ibd-stat{display:inline-block;margin:0 12px 0 0;white-space:nowrap}
.pb-strip .ibd-stat b{margin-left:4px}
.pb-strip i{display:block;margin-top:6px;opacity:.78;line-height:1.5}

/* More columns → cue (2026-09-17): a soft right-edge fade while the table has
   more to scroll to. A mask, not an overlay, so it fades whatever is under it —
   cell tints, text, the sticky header — without competing with the data. */
#table-wrap.ovf-r {
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 40px), transparent);
          mask-image: linear-gradient(to right, #000 calc(100% - 40px), transparent);
}
/* hero gauges (2026-09-25; the six count tiles are gone) */
.h2-gauges { display: grid; grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: 6px; }
.h2-gauge { font: inherit; color: var(--text); text-align: left; background: var(--panel); border: 1px solid var(--border); border-radius: 9px; padding: 6px 8px 5px;
  cursor: pointer; display: flex; flex-direction: column; gap: 2px; min-width: 0; transition: border-color .12s; }
.h2-gauge:hover { border-color: var(--accent); }
.h2-g-h { display: flex; align-items: baseline; gap: 5px; min-width: 0; }
.h2-g-h b { font-size: 11px; font-weight: 800; letter-spacing: .02em; flex: none; }
.h2-g-h small { font-size: 9.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.h2-g-v { font-size: 15px; font-weight: 800; line-height: 1.1; }
.h2-g-spark { display: block; width: 100%; height: 24px; }
.h2-g-d { display: flex; align-items: baseline; gap: 3px; font-size: 10.5px; font-variant-numeric: tabular-nums; }
.h2-g-d i { font-style: normal; font-weight: 600; }
.h2-g-d small { color: var(--muted); font-size: 9px; margin-right: 4px; }
.h2-g-r { position: relative; display: block; height: 3px; border-radius: 2px; background: var(--grey-chip-bg); margin: 3px 3px 2px; }
.h2-g-r i { position: absolute; top: -2px; width: 7px; height: 7px; margin-left: -3px; border-radius: 50%; background: var(--accent); }
/* Today strip country lens (2026-09-25): Global | six buttons | More ▾ */
.h2-hero-reg { display: flex; align-items: center; gap: 6px 8px; flex-wrap: wrap; min-height: 22px; }
.h2-lens-bar { gap: 4px; }
.h2-lens-bar .h2-fc { font-size: 12px; padding: 3px 11px; }
.h2-lens-more { font: inherit; font-size: 12px; font-weight: 700; padding: 3px 8px; border: 1px solid var(--border); border-radius: 999px;
  background: var(--panel); color: var(--muted); cursor: pointer; }
.h2-lens-more:hover { border-color: var(--accent); color: var(--accent); }
.h2-lens-more.on { color: var(--accent); border-color: var(--accent); background: var(--accent-soft); }
/* ± edit row (2026-10-12): the bar's buttons are the owner's own list — the row
   takes its own line so 22 chips never push the date off the header */
.h2-lens-bar .h2-lens-edit { padding: 3px 8px; }
.h2-lens-editing { flex-basis: 100%; margin-left: 0; justify-content: flex-end; }
.h2-lens-editing > .muted { font-size: 11px; margin: 0 2px; }
.h2-lens-editing > .h2-lens-sep { margin-left: 8px; }
.h2-lens-pin i { font-style: normal; font-weight: 800; margin-right: 4px; }
.h2-lens-pin.add { border-style: dashed; }
.h2-lens-bar .h2-lens-reset { margin-left: 8px; }
.h2-lens-bar .h2-lens-done { color: var(--accent); border-color: var(--accent); }
.h2-ro { font-size: 11px; cursor: help; white-space: nowrap; }
.h2-ro small { font-size: 10px; font-weight: 600; opacity: .7; margin-right: 2px; text-transform: uppercase; letter-spacing: .03em; }
.h2-ro-go { margin-left: auto; font-size: 11.5px; }
.h2-lens-band { grid-column: 1 / -1; font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--muted);
  margin: 3px 0 -2px; }
.h2-lens-band small { text-transform: none; letter-spacing: 0; font-weight: 500; margin-left: 8px; font-size: 10.5px; }
.h2-lens { grid-template-columns: repeat(auto-fill, minmax(128px, 1fr)); }
.h2-lens .h2-print { border-style: dashed; }
.h2-lens .h2-g-d b { font-weight: 600; }
.h2-lens .h2-suspect { border-color: var(--amber, #d97706); opacity: .8; }
.h2-gauge.h2-stale { border-color: var(--amber, #d97706); opacity: .8; }
.h2-gauge.h2-stale .h2-g-h b, .h2-gauge.h2-stale .h2-g-h small { color: var(--amber, #d97706); }
.h2-lens .h2-suspect .h2-g-h b { color: var(--amber, #d97706); }
.h2-g-v small { font-size: 10px; font-weight: 600; }
.h2-lens-bb { display: block; height: 5px; border-radius: 3px; background: var(--grey-chip-bg); margin: 5px 2px 1px; overflow: hidden; }
.h2-lens-bb i { display: block; height: 100%; background: var(--accent); opacity: .75; }
@media (max-width: 700px) { .h2-lens-bar { margin-left: 0; } .h2-lens-band small { display: block; margin: 2px 0 0; } }
/* Today strip in labelled trays (2026-10-05, owner: "a lot of information together — segment it"). Tiles keep
   their look; a tray is a faint common region with a caption and, on a country, the readout chip for that group.
   A tray shrinks to --tmin per tile before it wraps and grows (by tile count, so tiles stay equal) up to --tw;
   trays in a row share a height and tiles sit at the bottom, so a verdict line never pushes tiles out of line. */
.h2-strip { display: flex; flex-direction: column; gap: 6px; }
.h2-segs { display: flex; flex-wrap: wrap; gap: 8px 10px; align-items: stretch; }
.h2-seg { --tmin: 122px; --tw: 132px; display: flex; flex-direction: column; gap: 5px; min-width: 0; padding: 5px 6px 6px; border-radius: 11px;
  flex: var(--n, 1) 1 calc(var(--n, 1) * (var(--tmin) + 6px) + 8px); max-width: min(100%, calc(var(--n, 1) * (var(--tw) + 6px) + 8px));
  border: 1px solid color-mix(in srgb, var(--border) 70%, transparent); background: color-mix(in srgb, var(--text) 4%, transparent); }
.h2-lens .h2-seg { --tmin: 126px; --tw: 140px; }
.h2-seg-h { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; min-width: 0; padding: 0 2px; }
.h2-seg-h > b { font-size: 10px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: color-mix(in srgb, var(--ink-2, var(--muted)) 72%, var(--text)); cursor: help;
  max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.h2-seg-v { display: flex; flex-wrap: wrap; gap: 4px; max-width: 100%; }
.h2-seg-v .h2-ro { font-size: 10.5px; padding: 1px 7px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.h2-seg-v .h2-ro small { opacity: 1; }   /* readability sweep: the .7 dim put "10Y"/"CPI" under 3:1 on the tray */
.h2-seg-t { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--tmin)), 1fr)); gap: 6px; margin-top: auto; }
/* shortlist country filter + compact rows (2026-09-25) */
.h2-filter { display: flex; flex-wrap: wrap; gap: 3px; margin-left: auto; align-items: center; }
.h2-filter > .muted { font-size: 10.5px; margin-right: 3px; }
.h2-fc { font: inherit; font-size: 10.5px; font-weight: 700; padding: 1px 7px; border: 1px solid var(--border); border-radius: 999px; background: var(--panel); color: var(--muted); cursor: pointer; }
.h2-fc:hover { border-color: var(--accent); color: var(--accent); }
.h2-fc.on { color: var(--accent); border-color: var(--accent); background: var(--accent-soft); }
.h2-t td { padding: 4px 8px 4px 0; }
.h2-t .hc-name { display: block; max-width: 150px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.h2-figs { white-space: nowrap; font-variant-numeric: tabular-nums; font-size: 11.5px; }
.h2-figs > span { display: inline-block; margin-right: 10px; vertical-align: top; }
.h2-figs > span small { display: block; font-size: 9px; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; line-height: 1.1; }
.h2-t tr[data-tip] { cursor: help; }
.h2-t tr.h2-band td small { white-space: nowrap; }
.h2-t td.h2-more { text-align: right; border-top: none; padding-top: 0; }
.h2-t .cellbar { width: 60px; }
.h2-t .cellbar.hc-bear i { background: var(--bear); }
.h2-t .hcdiv { width: 60px; }

/* ▦ Market × sector as a Macro face (2026-09-25): the grid IS the page there, not a
   panel under a board — no dashed divider, and the filter tray sits left. */
.ctry-gridface .ctry-viz { margin-top: 4px; border-top: 0; padding-top: 0; }
.ctry-gridface .ctry-segright { margin-left: 0; }

/* Macro: the scan-line strip joins the toolbar row (pbInline) — no box of its own */
.playbook.pb-inline { flex: 1 1 auto; min-width: 0; margin: 0; padding: 0; border: 0; background: none; }

/* Markets: GICS-sector scope chip beside the region picker — set by a Home
   heat-map cell (sector × market), cleared by a click (2026-10-07) */
#f-gics { color: var(--blue-chip); background: var(--blue-chip-bg); border-color: transparent; font-weight: 600; }
#f-gics:hover { color: var(--bear); border-color: transparent; }
#f-gics .f-gics-x { opacity: .7; margin-left: 2px; }
.rot-gclear { cursor: pointer; border: 0; font-family: inherit; margin-left: 4px; vertical-align: 1px; }
.rot-gclear:hover { color: var(--bear); }

/* Markets leaderboard: a sector row is a scope toggle (data-gsec, 2026-10-07) */
table.rot-lead.sec-main tr[data-gsec] { cursor: pointer; }
table.rot-lead.sec-main tr.gsec-on td { background: var(--accent-soft); }

/* Frozen-data banner + greyed rows (2026-10-12, assessment Wave A: staleness is a state, not a footnote) */
.stale-banner{margin:0 0 8px;padding:8px 12px;border:1px solid var(--bear);border-left-width:4px;border-radius:8px;background:var(--bear-bg);color:var(--text);font-size:12px;line-height:1.45}
.stale-banner b{font-weight:600}
.stale-banner .stale-fix{display:block;margin-top:4px;opacity:.85}
tr.row-stale td{opacity:.5;filter:saturate(.35)}
tr.row-stale td:first-child{opacity:.8;filter:none}