/* ══ Intelligence Hub ══════════════════════════════════════════════════════
     The page is an instrument, not a poster. One hairline system, one radius,
     one card fill, mono reserved for figures, and a single bright element — the
     room-left spine down the Command ledger — which draws the page's own thesis
     (how much of the move is still ahead) as the structure of the list itself.

     Removed 2026-07-30 (operator order): the ambient sky canvas and its sun. A
     drifting starfield behind four hundred figures competes with the only thing
     on the page that matters, and the sun's 220px glow washed the top cards.
     `sky.js` stays in the tree — start.html still owns that treatment.
     ────────────────────────────────────────────────────────────────────────── */
  body.page-hub{ margin:0; background:var(--bg); color:var(--text); font-family:var(--font-ui);
    --r:10px;
    --card:color-mix(in srgb,var(--panel) 92%,transparent);
    --card-2:color-mix(in srgb,var(--panel) 62%,transparent);
    --hair:color-mix(in srgb,var(--line) 78%,transparent);
    --hair-soft:color-mix(in srgb,var(--line) 44%,transparent);
    --dim:color-mix(in srgb,var(--text) 74%,transparent);
    --cat:#8b5cf6;
    --fig:var(--font-mono); }
  .hub-wrap{ max-width:1200px; margin:0 auto; padding:6px 20px 64px; position:relative; z-index:1; }
  body.page-hub > .site-nav{ max-width:1200px; margin:14px auto 6px; padding:0 20px; }
  .ic-svg{ width:14px; height:14px; flex:none; vertical-align:middle; }
  /* every figure on the page is mono + tabular; words never are */
  .f{ font-family:var(--fig); font-variant-numeric:tabular-nums; }

  /* ── hero: identity left, market state right, one rule under both ── */
  .hh{ display:grid; grid-template-columns:minmax(0,1fr) auto; gap:16px 32px; align-items:end;
    margin:16px 0 0; padding-bottom:17px; border-bottom:1px solid var(--hair); }
  @media(max-width:880px){ .hh{ grid-template-columns:1fr; align-items:start; } }
  .eyebrow{ display:inline-flex; align-items:center; gap:8px; font-size:10.5px; font-weight:700;
    letter-spacing:.13em; text-transform:uppercase; color:var(--muted); }
  .eyebrow time{ font-family:var(--fig); letter-spacing:.04em; }
  .live{ width:6px; height:6px; border-radius:50%; background:var(--ok); position:relative; flex:none; }
  .live::after{ content:""; position:absolute; inset:-4px; border-radius:var(--r-pill, 999px);
    border:1.5px solid var(--ok); opacity:.5; animation:hp 2.6s ease-out infinite; }
  @keyframes hp{ 0%{ transform:scale(.55); opacity:.55 } 100%{ transform:scale(1.75); opacity:0 } }
  .hh h1{ font-size:clamp(29px,3.7vw,41px); font-weight:800; letter-spacing:-.033em; line-height:1.03;
    margin:10px 0 8px; color:var(--text); }
  .deck{ margin:0; font-size:14px; line-height:1.5; color:var(--dim); max-width:58ch; }
  .deck .lens-q{ vertical-align:baseline; }
  /* market state: an instrument readout, not another row of pills */
  .state{ display:flex; flex-wrap:wrap; align-items:baseline; row-gap:9px; }
  .state i{ font-style:normal; display:inline-flex; align-items:baseline; gap:7px; padding:0 15px;
    border-left:1px solid var(--hair); font-size:10px; font-weight:700; letter-spacing:.11em;
    text-transform:uppercase; color:var(--muted); white-space:nowrap; }
  .state i:first-child{ border-left:0; padding-left:0; }
  /* the engine hands these down lower-cased ("mid", "expanding"); capitalise at render
     so the readout doesn't mix cases beside "Goldilocks" / "Hawkish" */
  .state b{ font-size:13px; font-weight:700; letter-spacing:-.008em; text-transform:capitalize;
    color:var(--text); }
  .state i.hot b{ color:var(--ink-up, var(--up)); }
  @media(max-width:880px){ .state i:first-child{ padding-left:0 } .state{ margin-top:4px } }

  /* ── desk rail: six links, one container, hairline cells ── */
  .rail{ display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); margin:18px 0 2px;
    border:1px solid var(--hair); border-radius:var(--r-ctl, var(--r)); background:var(--card); overflow:hidden; }
  .rl{ display:flex; align-items:center; gap:8px; min-width:0; padding:11px 13px;
    text-decoration:none; color:var(--text); font-size:12.5px; font-weight:600;
    border-left:1px solid var(--hair-soft); transition:background .16s ease, color .16s ease; }
  .rl:first-child{ border-left:0; }
  .rl:hover{ background:color-mix(in srgb,var(--info) 9%,transparent); color:var(--ink-info, var(--info)); }
  .rl .ic-svg{ color:var(--muted); transition:color .16s ease; }
  .rl:hover .ic-svg{ color:var(--ink-info, var(--info)); }
  .rl .rn{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .rl .gw{ margin-left:auto; font-size:9px; font-weight:700; letter-spacing:.06em;
    text-transform:uppercase; white-space:nowrap; }
  .rl .lamp{ width:6px; height:6px; border-radius:50%; flex:none; background:var(--down); }
  .rl .lamp.on{ background:var(--ok); }
  .ql-chip-ungraded, .gw.ql-ungraded{ color:var(--muted); }
  .ql-chip-accruing{ color:var(--ink-warn, var(--warn)); }
  .ql-chip-graded-pos{ color:var(--ink-up, var(--up)); }
  .ql-chip-graded-neg{ color:var(--ink-down, var(--down)); }
  @media(max-width:1040px){
    .rail{ grid-template-columns:repeat(3,minmax(0,1fr)); }
    .rl{ border-left:1px solid var(--hair-soft); }
    .rl:nth-child(3n+1){ border-left:0; }
    .rl:nth-child(n+4){ border-top:1px solid var(--hair-soft); }
  }
  @media(max-width:620px){
    .rail{ grid-template-columns:repeat(2,minmax(0,1fr)); }
    .rl{ border-left:1px solid var(--hair-soft); }
    .rl:nth-child(3n+1){ border-left:1px solid var(--hair-soft); }
    .rl:nth-child(odd){ border-left:0; }
    .rl:nth-child(n+3){ border-top:1px solid var(--hair-soft); }
    .rl .gw{ display:none; }
  }

  /* ── R1A-M Market Pulse instrument (reactive-projection freeze §8/§12) ──
     Dark = graphite command instrument: hairline card, restrained semantic
     luminance, a pulse ONLY for the live+regular state (same idiom as the
     existing hero `.live::after` dot above — no new glow language). Light =
     white research material on the page's cool canvas: the identical
     hairline/card tokens read as a flat, shadow-quiet strip once theme.css
     swaps `--card`/`--hair`/`--text` for their light values — no dark-only
     glow value is hardcoded here, so light never inherits the pulse's box-
     shadow bloom. Semantic tokens only: --ink-up/--ink-down keep Chinese
     direction-color correct; no new token root, no literal palette, no
     runtime stylesheet. */
  .ihmp-bar{ display:flex; align-items:center; gap:9px; margin:14px 0 0; padding:9px 14px;
    border:1px solid var(--hair); border-radius:var(--r-ctl, var(--r)); background:var(--card);
    font-size:11.5px; color:var(--muted); }
  .ihmp-dot{ width:6px; height:6px; border-radius:var(--r-pill, 999px); flex:none; background:var(--muted); }
  .ihmp-bar[data-ihmp-availability="available"][data-ihmp-freshness="live"][data-ihmp-session="regular"] .ihmp-dot{
    background:var(--ok); position:relative; }
  .ihmp-bar[data-ihmp-availability="available"][data-ihmp-freshness="live"][data-ihmp-session="regular"] .ihmp-dot::after{
    content:""; position:absolute; inset:-4px; border-radius:var(--r-pill, 999px);
    border:1.5px solid var(--ok); opacity:.5; animation:hp 2.6s ease-out infinite; }
  .ihmp-bar[data-ihmp-freshness="delayed"] .ihmp-dot{ background:var(--warn); }
  /* --act, not --down — that one is a market-direction token that flips to GREEN
     under zh 红涨绿跌 — a health state must stay direction-neutral */
  .ihmp-bar[data-ihmp-availability="unavailable"] .ihmp-dot,
  .ihmp-bar[data-ihmp-freshness="stale"] .ihmp-dot{ background:var(--act); }
  .ihmp-bar time{ font-family:var(--fig); margin-left:auto; font-size:10px; }
  /* per-row quote cluster — the ONE visible price on a roster row */
  .ihmp-px{ font-family:var(--fig); font-variant-numeric:tabular-nums; font-size:11px;
    color:var(--muted); white-space:nowrap; display:inline-flex; align-items:baseline; gap:4px; }
  .ihmp-delta{ font-size:10px; }
  .ihmp-delta.pos{ color:var(--ink-up, var(--up)); }
  .ihmp-delta.neg{ color:var(--ink-down, var(--down)); }
  @media (prefers-reduced-motion:reduce){
    .ihmp-bar .ihmp-dot::after{ animation:none; }
    /* restated at the live rule's own specificity — media queries add none, and
       the (0,2,1) rule above loses to the (0,5,1) live rule */
    .ihmp-bar[data-ihmp-availability="available"][data-ihmp-freshness="live"][data-ihmp-session="regular"] .ihmp-dot::after{
      animation:none; opacity:.5; }
  }

  /* ── R1A-M Market Pulse — LIGHT art direction ──────────────────────────────
     Dark is a command center: depth by luminance, a green LED emitting an
     expanding ring. Light is a research workspace: depth by material, and the
     instrument is a bead SEATED on paper — white strip, full-weight hairline,
     one soft card shadow, and a ring drawn as shadow spread rather than a bloom.
     Four mechanisms differ on purpose: (1) material — dark leans on --card's
     translucency over a dark field, light takes the full --panel white + --line
     + --card-shadow (panel≈bg is the flatness bug, doctrine §5.8); (2) liveness
     — dark's ring EXPANDS and fades out, light's ring holds a fixed radius and
     breathes opacity in place, so nothing blooms on white; (3) degraded states —
     light carries them in the BAR's own material (4–5% wash + a hue-warmed
     hairline), a channel dark cannot use because a 4% tint on a near-black panel
     is invisible; dark can only tint the dot; (4) resting states — light draws
     settled as a HOLLOW bead (pale fill + grey ring), a distinction white ground
     can hold and a 6px disc on dark cannot. Colour is spent only where something
     is wrong: a healthy bar stays white, and live is carried by the LED, not by
     paint. Tokens only, no new custom properties, no page-local palette. */

  /* material: white research card on the cooler canvas (design system §12 E1) */
  html[data-theme="light"] .ihmp-bar{
    background:var(--panel); border-color:var(--line); box-shadow:var(--card-shadow); }

  /* the readout itself — the sentence stops being the quietest ink on the page.
     No letter-spacing, deliberately: the same rule sets the ZH sentence. */
  html[data-theme="light"] .ihmp-bar [data-ihmp-status]{
    color:var(--text); font-weight:600; }

  /* the as-of stamp stays a fact, not a verdict: secondary in every state, and
     deliberately NOT taking the state ink the sentence beside it takes */
  html[data-theme="light"] .ihmp-bar time{ color:var(--muted); }

  /* resting bead — settled build, loading, and any out-of-hours live print.
     7px, not dark's 6px: a dark mark on white reads optically smaller than the
     same mark glowing on a dark field. */
  html[data-theme="light"] .ihmp-bar .ihmp-dot{
    width:7px; height:7px;
    background:color-mix(in srgb,var(--muted) 26%,var(--panel));
    box-shadow:0 0 0 1.5px color-mix(in srgb,var(--muted) 55%,transparent); }

  /* live + regular session — solid LED, ring breathing in place.
     Ring geometry is FIXED (no scale, no fade-out): light seats, dark emits.
     `dtp-pulse` is the estate's shipped live cadence (theme.css), the house
     live idiom — not a second motion vocabulary. */
  html[data-theme="light"] .ihmp-bar[data-ihmp-availability="available"][data-ihmp-freshness="live"][data-ihmp-session="regular"] .ihmp-dot{
    background:var(--ok); box-shadow:none; }
  html[data-theme="light"] .ihmp-bar[data-ihmp-availability="available"][data-ihmp-freshness="live"][data-ihmp-session="regular"] .ihmp-dot::after{
    inset:-3px; border:1.5px solid color-mix(in srgb,var(--ok) 70%,transparent);
    opacity:1; animation:dtp-pulse 1.4s ease-in-out infinite; }

  /* delayed — the whole strip warms by 4%: readable peripherally, silent up close */
  html[data-theme="light"] .ihmp-bar[data-ihmp-freshness="delayed"]{
    background:color-mix(in srgb,var(--warn) 4%,var(--panel));
    border-color:color-mix(in srgb,var(--warn) 42%,var(--line)); }
  html[data-theme="light"] .ihmp-bar[data-ihmp-freshness="delayed"] .ihmp-dot{
    background:var(--warn);
    box-shadow:0 0 0 2.5px color-mix(in srgb,var(--warn) 20%,transparent); }
  html[data-theme="light"] .ihmp-bar[data-ihmp-freshness="delayed"] [data-ihmp-status]{
    color:var(--ink-warn); }

  /* stale / unavailable — same mechanism, one step firmer.
     --act, NOT --down — this is a data-health state, and --down flips to GREEN
     under zh 红涨绿跌. --act/--ok/--warn are the tokens theme.css keeps
     direction-neutral for exactly this reason. */
  html[data-theme="light"] .ihmp-bar[data-ihmp-freshness="stale"],
  html[data-theme="light"] .ihmp-bar[data-ihmp-availability="unavailable"]{
    background:color-mix(in srgb,var(--act) 5%,var(--panel));
    border-color:color-mix(in srgb,var(--act) 42%,var(--line)); }
  html[data-theme="light"] .ihmp-bar[data-ihmp-freshness="stale"] .ihmp-dot,
  html[data-theme="light"] .ihmp-bar[data-ihmp-availability="unavailable"] .ihmp-dot{
    background:var(--act);
    box-shadow:0 0 0 2.5px color-mix(in srgb,var(--act) 20%,transparent); }
  html[data-theme="light"] .ihmp-bar[data-ihmp-freshness="stale"] [data-ihmp-status],
  html[data-theme="light"] .ihmp-bar[data-ihmp-availability="unavailable"] [data-ihmp-status]{
    color:var(--ink-act); }

  /* per-row cluster — on paper, rank is weight, not luminance.
     Dark separates level from move with raw hue saturation; light deepens those
     inks toward --text and loses that separation, so light restores the ladder
     with weight: the level at 600, the move — the only figure that changes
     intraday — at 700. .pos/.neg keep --ink-up/--ink-down untouched: those are
     the measured light rungs and the only route that survives the zh flip. */
  html[data-theme="light"] .ihmp-px{ font-weight:600; }
  html[data-theme="light"] .ihmp-delta.pos,
  html[data-theme="light"] .ihmp-delta.neg{ font-weight:700; }

  /* reduced motion — stated at the light live rule's own specificity, so it
     actually lands over the (0,5,1) live rule above. */
  @media (prefers-reduced-motion:reduce){
    html[data-theme="light"] .ihmp-bar[data-ihmp-availability="available"][data-ihmp-freshness="live"][data-ihmp-session="regular"] .ihmp-dot::after{
      animation:none; opacity:1; }
  }

  /* ── section mark: an accent tick, a label, a rule, a count ── */
  .band{ display:flex; align-items:center; gap:11px; margin:34px 0 12px; }
  .band .tick{ width:3px; height:14px; border-radius:2px; flex:none;
    background:var(--accent,var(--info)); }
  .band h2{ margin:0; font-size:11.5px; font-weight:800; letter-spacing:.11em; text-transform:uppercase;
    color:var(--text); white-space:nowrap; }
  .band .ln{ flex:1; height:1px; min-width:14px;
    background:linear-gradient(90deg,var(--hair),transparent 94%); }
  .band .n{ font-family:var(--fig); font-variant-numeric:tabular-nums; font-size:11.5px;
    font-weight:700; color:var(--muted); flex:none; }
  .band .legend{ display:inline-flex; align-items:center; gap:6px; flex:none; font-size:10px;
    font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); }
  .band .legend .lg{ width:3px; height:12px; border-radius:2px;
    background:linear-gradient(to top,var(--up) 62%,var(--hair-soft) 62%); }
  @media(max-width:620px){ .band .legend{ display:none } }

  /* ── one card system ── */
  .card{ border:1px solid var(--hair); border-radius:var(--r-ctl, var(--r)); background:var(--card); }
  .empty{ font-size:12.5px; color:var(--muted); padding:11px 0; }
  /* Stance line — every signal band answers "so what do I do" ONCE, here, in plain
     words (DESIGN_DOCTRINE Law 1 + Law 4). This is what the stage-templated sentence
     that used to reprint itself on every row was reaching for. */
  .stance{ font-size:11.5px; line-height:1.5; color:var(--muted); margin:-3px 0 11px; max-width:78ch; }
  .stance b{ color:color-mix(in srgb,var(--text) 80%,transparent); font-weight:600; }

  /* ── one chip system: state · good · caution · bad · catalyst · neutral ── */
  .chip{ font-size:9.5px; font-weight:700; letter-spacing:.04em; text-transform:uppercase;
    padding:2px 7px; border-radius:5px; white-space:nowrap; flex:none;
    background:color-mix(in srgb,var(--muted) 15%,transparent); color:var(--muted); }
  .chip.good, .chip.st-early{ background:color-mix(in srgb,var(--up) 17%,transparent); color:var(--ink-up, var(--up)); }
  .chip.info, .chip.st-emerging, .chip.st-discovery{
    background:color-mix(in srgb,var(--info) 20%,transparent); color:var(--ink-info, var(--info)); }
  .chip.warn, .chip.crowd, .chip.st-faltering{
    background:color-mix(in srgb,var(--warn) 20%,transparent); color:var(--ink-warn, var(--warn)); }
  .chip.bad, .chip.st-exhausted, .chip.st-distribution{
    background:color-mix(in srgb,var(--down) 17%,transparent); color:var(--ink-down, var(--down)); }
  .chip.cat{ background:color-mix(in srgb,var(--cat) 20%,transparent);
    color:color-mix(in srgb,var(--cat) 68%,var(--text)); }
  .chip.en-buy{ display:inline-flex; align-items:center; gap:3px; cursor:help;
    background:color-mix(in srgb,var(--up) 22%,transparent); color:var(--ink-up, var(--up));
    box-shadow:0 0 0 1px color-mix(in srgb,var(--up) 38%,transparent) inset; }
  .chip.src{ background:color-mix(in srgb,var(--info) 14%,transparent); color:var(--ink-info, var(--info)); }

  /* ── shared row atoms ── */
  .tk{ font-family:var(--fig); font-variant-numeric:tabular-nums; font-weight:700; font-size:14.5px;
    letter-spacing:-.015em; }
  .px{ font-family:var(--fig); font-variant-numeric:tabular-nums; font-size:11px; color:var(--muted);
    white-space:nowrap; }
  .nm{ font-size:10.5px; color:var(--muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .score{ font-family:var(--fig); font-variant-numeric:tabular-nums; font-size:20px; font-weight:700;
    letter-spacing:-.035em; color:var(--text); line-height:1; }
  .rd{ font-size:12px; line-height:1.45; color:var(--dim); }
  .drv{ font-size:10.5px; line-height:1.5; color:var(--muted); margin-top:5px; }
  .drv b{ color:color-mix(in srgb,var(--text) 80%,transparent); font-weight:600; }
  .drv .cau{ color:var(--ink-warn, var(--warn)); }
  .cline{ display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
  .watch{ font-size:10px; color:var(--muted); margin-top:5px; }
  .watch b{ color:color-mix(in srgb,var(--text) 72%,transparent); font-weight:600; }

  /* room-left rail — the figure keeps the precision the bar can only suggest */
  .room{ display:flex; align-items:center; gap:9px; }
  .room .lab{ font-size:9px; font-weight:700; letter-spacing:.09em; text-transform:uppercase;
    color:var(--muted); white-space:nowrap; }
  .room .trk{ flex:1; min-width:36px; height:3px; border-radius:2px; background:var(--hair-soft);
    overflow:hidden; }
  .room .trk i{ display:block; height:100%; background:var(--accent,var(--info)); }
  .room .v{ font-family:var(--fig); font-variant-numeric:tabular-nums; font-size:11px;
    font-weight:700; color:color-mix(in srgb,var(--text) 84%,transparent); }

  /* ── agreement matrix ── */
  .mtx{ display:inline-flex; gap:3px; align-items:center; cursor:help; }
  .mtx .cell{ width:8px; height:14px; border-radius:2px; background:var(--hair-soft); }
  .mtx .cell.up{ background:var(--up); } .mtx .cell.dn{ background:var(--down); }
  .mtx .cell.nz{ background:color-mix(in srgb,var(--muted) 55%,transparent); }
  .mtx .cell.off{ background:color-mix(in srgb,var(--line) 40%,transparent); }

  /* ── emerging: the page's hero. The only cards that get an accent edge. ──
     Card faces are uniform by construction (no prose block one card carries and its
     siblings don't) and the bottom strip is pushed down with margin-top:auto, so the
     room-left rails line up across the row instead of leaving a hollow band under
     the shortest card. Never `align-items:start` — that hides a void, it can't fix it. */
  .ecards{ display:grid; gap:12px; grid-template-columns:repeat(auto-fill,minmax(272px,1fr)); }
  .ecard{ position:relative; padding:14px 15px 13px; overflow:hidden;
    display:flex; flex-direction:column; }
  .ecard.lead::before{ content:""; position:absolute; inset:0 auto 0 0; width:2px;
    background:var(--accent,var(--info)); }
  /* the figure stays pinned to the top-right corner however far the chips wrap */
  .ecard .et{ display:flex; align-items:baseline; gap:8px 7px; flex-wrap:wrap; padding-right:38px; }
  .ecard .et .score, .ecard .et .dscore{ position:absolute; top:12px; right:15px; margin:0; }
  .ecard .nm{ margin-top:3px; }
  .ecard .rd{ margin:8px 0 0; }
  .ecard .room{ margin-top:auto; padding-top:11px; border-top:1px solid var(--hair-soft); }
  .ecard .foot{ margin-top:7px; font-size:10px; color:var(--muted);
    display:flex; align-items:center; gap:5px; }
  .ecard .foot .ic-svg{ width:12px; height:12px; }

  /* ── discovery: same anatomy, quieter, no accent edge. The reason clamps to two
        lines so fourteen cards can't each set their own height. ── */
  .dcard .rd{ display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
    overflow:hidden; }
  .dscore{ font-family:var(--fig); font-variant-numeric:tabular-nums;
    font-size:15px; font-weight:700; color:var(--ink-info, var(--info)); }
  .dchan{ font-size:10px; color:var(--muted); margin-top:auto; padding-top:8px;
    display:flex; align-items:center; gap:5px; min-width:0; }
  .dchan .ic-svg{ width:12px; height:12px; flex:none; }
  .dchan .ch{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

  /* ── two-up alert panels ── */
  /* minmax(0,1fr), not 1fr: the catalyst briefs are nowrap-ellipsised, and a bare 1fr
     resolves to minmax(auto,1fr) — their min-content width would let that column push
     the other panel down to a sliver */
  .alerts{ display:grid; gap:12px; grid-template-columns:minmax(0,1fr) minmax(0,1fr); margin-top:6px; }
  /* minmax(0,…) here too — a bare 1fr is minmax(auto,1fr) and the nowrap briefs would
     set the column's min-content width, scrolling the whole page sideways on mobile */
  @media(max-width:820px){ .alerts{ grid-template-columns:minmax(0,1fr); } }
  .panel{ padding:13px 15px 14px; }
  .panel h3{ display:flex; align-items:center; gap:10px; margin:0 0 3px; font-size:11px;
    font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:var(--text); }
  .panel h3 .tick{ width:3px; height:12px; border-radius:2px; flex:none; background:var(--accent,var(--info)); }
  .panel h3 .n{ margin-left:auto; font-family:var(--fig); font-variant-numeric:tabular-nums;
    font-size:11px; font-weight:700; color:var(--muted); letter-spacing:0; }
  /* row-scoped, so the "View all" overlay can move these rows out of the panel
     and they still lay out; separators stay in-flow-only (the overlay draws its own) */
  .arow{ display:flex; align-items:center; gap:10px; padding:8px 0; font-size:12px; }
  .panel .arow{ border-top:1px solid var(--hair-soft); }
  .arow .tk{ font-size:12.5px; min-width:48px; flex:none; }
  .arow .ab{ color:var(--dim); line-height:1.4; min-width:0; flex:1; }
  .arow .age{ margin-left:auto; font-family:var(--fig); font-size:10px; color:var(--muted);
    white-space:nowrap; }
  .arow .pct{ font-family:var(--fig); font-variant-numeric:tabular-nums; font-size:11.5px;
    font-weight:700; color:var(--ink-down, var(--down)); }
  /* one line per catalyst, ellipsised: two-line briefs made this panel taller than
     its neighbour and parked a dead band under the shorter one */
  .arow.cat-row .ab{ display:flex; align-items:center; gap:8px; overflow:hidden; }
  .arow.cat-row .cb{ min-width:0; flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

  /* ══ Command ledger — the signature ════════════════════════════════════════
     One container, thirty rows, no per-row card. A single rule runs down the
     left edge and each row's segment fills from the bottom by how much of the
     move is still ahead — so scrolling the ledger shows the edge draining away.
     The bar is the shape; the mono figure beside the score keeps the precision.
     ─────────────────────────────────────────────────────────────────────────── */
  .led{ border:1px solid var(--hair); border-radius:var(--r-ctl, var(--r)); background:var(--card); overflow:hidden; }
  .led-row{ display:grid; grid-template-columns:26px 150px 52px 55px minmax(0,1fr);
    align-items:center; gap:0 14px; padding:10px 15px 10px 0; min-height:58px; }
  .led > .led-row + .led-row{ border-top:1px solid var(--hair-soft); }
  .sp{ align-self:stretch; position:relative; }
  .sp::before{ content:""; position:absolute; left:11px; top:0; bottom:0; width:3px;
    background:linear-gradient(to top, var(--sp-c) var(--sp-p), var(--hair-soft) var(--sp-p)); }
  .led-row .id{ min-width:0; }
  .led-row .id .tkline{ display:flex; align-items:baseline; gap:7px; }
  .led-row .score{ text-align:right; }
  .led-row .rmv{ font-family:var(--fig); font-variant-numeric:tabular-nums; font-size:11px;
    font-weight:700; color:var(--muted); text-align:right; }
  @media(max-width:820px){
    .led-row{ grid-template-columns:22px 118px 46px minmax(0,1fr); gap:0 11px; }
    .led-row .mtxc{ display:none; }
    .sp::before{ left:9px; }
  }

  /* ── track record: the plain read, with the study panel folded beneath ── */
  .trh{ display:grid; gap:11px; grid-template-columns:repeat(auto-fill,minmax(258px,1fr)); }
  .trc{ padding:12px 14px 13px; }
  .trc .th{ display:flex; align-items:center; gap:8px; margin-bottom:9px; }
  .trc .th .h{ font-family:var(--fig); font-variant-numeric:tabular-nums; font-size:12.5px;
    font-weight:700; letter-spacing:-.01em; }
  .trc .th .chip{ margin-left:auto; }
  .trg{ display:grid; grid-template-columns:1fr 1fr; gap:9px 14px; }
  .trcell{ min-width:0; }
  .trlab{ display:block; font-size:9px; font-weight:700; text-transform:uppercase; letter-spacing:.06em;
    color:var(--muted); margin-bottom:3px; line-height:1.35; }
  .trval{ font-family:var(--fig); font-variant-numeric:tabular-nums; font-size:13.5px; font-weight:700;
    color:var(--text); }
  .trval.pos{ color:var(--ink-up, var(--up)); } .trval.neg{ color:var(--ink-down, var(--down)); }
  .trans{ font-size:9.5px; font-weight:700; text-transform:uppercase; letter-spacing:.05em; }
  .trans.ok{ color:var(--ink-up, var(--up)); } .trans.bad{ color:var(--ink-down, var(--down)); }
  .note{ font-size:12px; line-height:1.55; color:var(--dim); padding:12px 15px; }
  .note b{ color:var(--text); }

  /* ── sector heat: one container, one column of bars ──
     Six scattered cards each drew their meter at a different x-offset and width, so
     the one comparison the panel exists to make — which sector is hottest — had to be
     done by reading numbers. Aligned in a single list the bars share a scale and the
     ranking is legible without any vocabulary at all. */
  .slist{ overflow:hidden; }
  .srow{ display:grid; grid-template-columns:46px minmax(110px,200px) minmax(70px,1fr) auto;
    align-items:center; gap:0 14px; padding:10px 15px; font-size:12.5px; }
  .slist > .srow + .srow{ border-top:1px solid var(--hair-soft); }
  .srow .etf{ font-family:var(--fig); font-size:9.5px; font-weight:700; letter-spacing:.03em;
    padding:2px 5px; border-radius:5px; text-align:center;
    background:color-mix(in srgb,var(--info) 14%,transparent); color:var(--ink-info, var(--info)); }
  .srow .snm{ font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
    display:flex; align-items:center; gap:7px; min-width:0; }
  .srow .meter{ height:4px; border-radius:2px; background:var(--hair-soft); overflow:hidden; }
  .srow .meter i{ display:block; height:100%; background:var(--accent,var(--info)); }
  .srow .sf{ font-size:10px; color:var(--muted); display:flex; gap:12px; white-space:nowrap; }
  .srow .sf b{ font-family:var(--fig); font-variant-numeric:tabular-nums;
    color:color-mix(in srgb,var(--text) 80%,transparent); }
  @media(max-width:620px){
    .srow{ grid-template-columns:46px minmax(0,1fr) auto; row-gap:8px; }
    .srow .meter{ grid-column:1 / -1; }
  }

  footer.hf{ margin-top:32px; padding-top:15px; border-top:1px solid var(--hair);
    font-size:11px; color:var(--muted); line-height:1.6; }
  footer.hf time{ font-family:var(--fig); }
  @media (prefers-reduced-motion:reduce){
    .rl, .rl .ic-svg{ transition:none; }
    .live::after{ animation:none; }
  }