/* Heroes of the Week — one stylesheet, no build step, no external requests.
 *
 * Light-first. The dark block only restates tokens for viewers whose OS asks
 * for it; every colour has its definition on bare :root so nothing depends on
 * a media query to be legible.
 *
 * Direction is never carried by colour alone — every signed number ships with
 * a sign and an arrow glyph, because red↔green measures ΔE 4.1 under
 * deuteranopia and is the one pair a colourblind reader cannot separate.
 */

:root {
  color-scheme: light;

  /* surfaces — cool paper, not flat white */
  --bg:        #f7f8fa;
  --bg-raised: #ffffff;
  --bg-sunk:   #f1f3f7;
  --bg-inset:  #fafbfc;
  --line:      #e4e8ef;
  --line-soft: #eef1f6;

  /* ink */
  --ink:       #0d1117;
  --ink-mid:   #495366;
  --ink-soft:  #78839a;

  /* data */
  --accent:      #2a5cd8;
  --accent-ink:  #1e46a8;
  --accent-wash: #eef3fe;
  --accent-soft: #c9dafb;
  --up:          #04713f;
  --up-mark:     #0a9754;
  --up-wash:     #e8f6ee;
  --down:        #b3252f;
  --down-mark:   #d9414c;
  --down-wash:   #fdedee;
  /* the middle band: held ground but did not gain 5%. Measured 5.50:1 on
     white and 5.18:1 on the card surface, so it carries as text, not just
     as a chip fill. */
  --mid:         #a8500a;
  --mid-mark:    #d9741a;
  --mid-wash:    #fff4e6;

  --warn-bg:   #fff8e8;
  --warn-line: #f0dca8;
  --warn-ink:  #6b5312;

  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  --sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;

  --radius:    14px;
  --radius-sm: 9px;
  --shadow-sm: 0 1px 2px rgba(13,17,23,.05);
  --shadow:    0 1px 3px rgba(13,17,23,.05), 0 12px 28px -16px rgba(13,17,23,.16);
  --shadow-lg: 0 2px 6px rgba(13,17,23,.06), 0 24px 48px -24px rgba(13,17,23,.22);
}

/* Dark is opt-in ONLY, via an explicit data-theme="dark" on the root.
 *
 * Deliberately NOT wired to prefers-color-scheme: this is a light product, and
 * honouring the OS setting meant readers on a dark-mode machine never saw the
 * design at all. If a dark variant is ever wanted, it is one attribute away —
 * but it must be a choice, not the operating system's. */
:root[data-theme="dark"] {
    color-scheme: dark;
    --bg:        #0e1116;
    --bg-raised: #161a21;
    --bg-sunk:   #12161c;
    --bg-inset:  #191e26;
    --line:      #252b35;
    --line-soft: #1c212a;
    --ink:       #e9ecf2;
    --ink-mid:   #aeb7c6;
    --ink-soft:  #7b8698;
    --accent:      #6f9bf5;
    --accent-ink:  #9dbcfa;
    --accent-wash: #172444;
    --accent-soft: #26386a;
    --up:          #4cc98a;
    --up-mark:     #35b878;
    --up-wash:     #102a1e;
    --down:        #f38089;
    --down-mark:   #e2626d;
    --down-wash:   #2c1418;
    --mid:         #e0a05a;
    --mid-mark:    #d9741a;
    --mid-wash:    #2a1d0d;
    --warn-bg:   #241f10;
    --warn-line: #4a3f1c;
    --warn-ink:  #e3d2a0;
    --shadow-sm: 0 1px 2px rgba(0,0,0,.4);
    --shadow:    0 1px 3px rgba(0,0,0,.5), 0 12px 28px -16px rgba(0,0,0,.7);
    --shadow-lg: 0 2px 6px rgba(0,0,0,.5), 0 24px 48px -24px rgba(0,0,0,.8);
}

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 16px/1.6 var(--sans);
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
}

.wrap { max-width: 72rem; margin: 0 auto; padding: 0 1.75rem; }

a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--accent-ink); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }

h1, h2, h3, h4 { line-height: 1.2; letter-spacing: -0.02em; margin: 0 0 .5rem; color: var(--ink); }
h1 { font-size: clamp(1.75rem, 1.25rem + 1.8vw, 2.4rem); font-weight: 700; }
h2 { font-size: 1.35rem; margin-top: 3.25rem; font-weight: 660; }
h3 { font-size: 1.05rem; font-weight: 660; }

code { font-family: var(--mono); font-size: .9em; }
.sep { color: var(--ink-soft); margin: 0 .35rem; }

/* ---- banner ---- */
.banner {
  background: var(--warn-bg); border-bottom: 1px solid var(--warn-line);
  color: var(--warn-ink); padding: .7rem 1.5rem; font-size: .8125rem; text-align: center;
}
.banner code { background: rgba(0,0,0,.07); padding: .1em .35em; border-radius: 4px; }

/* ---- masthead ---- */
.masthead {
  border-bottom: 1px solid var(--line);
  background: color-mix(in srgb, var(--bg-raised) 85%, transparent);
  backdrop-filter: saturate(180%) blur(12px);
  position: sticky; top: 0; z-index: 20;
}
.masthead .wrap {
  display: flex; flex-wrap: wrap; gap: .75rem 1.5rem;
  align-items: center; justify-content: space-between;
  padding-top: .95rem; padding-bottom: .95rem;
}
.brand { text-decoration: none; color: inherit; }
.brand-name { display: block; font-weight: 700; font-size: 1.02rem; letter-spacing: -.025em; }
.brand-tag  { display: block; font-size: .76rem; color: var(--ink-soft); margin-top: .1rem; }
.nav { display: flex; flex-wrap: wrap; gap: .35rem; font-size: .875rem; }
.nav a {
  color: var(--ink-mid); text-decoration: none;
  padding: .4rem .7rem; border-radius: 7px;
}
.nav a:hover { color: var(--ink); background: var(--bg-sunk); }
.nav a.is-active { color: var(--accent-ink); background: var(--accent-wash); font-weight: 600; }

main.wrap { padding-top: 3rem; padding-bottom: 5rem; }

/* ---- page head ---- */
.page-head { margin-bottom: 2.5rem; max-width: 50rem; }
.page-head .eyebrow {
  display: inline-block; font-size: .7rem; text-transform: uppercase;
  letter-spacing: .11em; color: var(--accent-ink); font-weight: 700;
  background: var(--accent-wash); padding: .3rem .6rem; border-radius: 6px;
  margin: 0 0 .85rem;
}
.page-head .lede { color: var(--ink-mid); margin: .7rem 0 0; font-size: 1.05rem; }

/* ---- intraday ---- */
a.cal-day { text-decoration: none; color: inherit; cursor: pointer; }
a.cal-day:hover, a.cal-day:focus-visible {
  border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-wash);
}
.cal-zoom {
  position: absolute; bottom: .2rem; right: .3rem;
  font-size: .7rem; color: var(--accent); opacity: .75; line-height: 1;
}
.intraday-table td.q { font: 500 .82rem/1.3 var(--mono); }
.id-range-cell { width: 30%; min-width: 6rem; }
.id-track {
  position: relative; display: block; height: .5rem;
  background: var(--bg-sunk); border-radius: 999px; overflow: hidden;
}
.id-bar {
  position: absolute; top: 0; height: 100%;
  background: var(--accent-soft); border-radius: 999px;
}

/* ---- traded range of the measured window ---- */
.window-range {
  margin: 1rem 0 0; padding: .85rem 1rem;
  background: var(--bg-sunk); border: 1px solid var(--line-soft);
  border-radius: 10px;
}
.wr-head { margin: 0 0 .6rem; font-size: .8rem; color: var(--ink-soft); }
.wr-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; }
@media (max-width: 30rem) { .wr-grid { grid-template-columns: 1fr; } }
.wr-cell {
  display: flex; flex-direction: column; gap: .15rem;
  padding: .55rem .7rem; background: var(--bg-raised);
  border: 1px solid var(--line-soft); border-radius: 8px;
}
.wr-label {
  font-size: .68rem; text-transform: uppercase; letter-spacing: .07em;
  color: var(--ink-soft); font-weight: 700;
}
.wr-val { font: 600 1.1rem/1.2 var(--sans); color: var(--ink); }
.wr-meta { font-size: .76rem; color: var(--ink-soft); }
.wr-meta .sep { margin: 0 .3rem; opacity: .6; }
.wr-note { margin: .6rem 0 0; font-size: .72rem; color: var(--ink-soft); line-height: 1.5; }

/* ---- forward calendar ----
   Confirmed and projected are stacked in one bar, but they are never only a
   colour apart: the table states both numbers beside it, and the key names
   them. The bar is a shape to scan, not the data itself. */
.fwd-table tr.is-quiet td { color: var(--ink-soft); }
.fwd-bar-cell { width: 45%; min-width: 8rem; white-space: nowrap; }
.fwd-bar {
  display: inline-block; vertical-align: middle;
  height: .62rem; border-radius: 999px;
  background: var(--accent-soft);          /* the projected remainder */
  min-width: 2px; overflow: hidden;
}
.fwd-bar-confirmed {
  display: block; height: 100%;
  background: var(--accent); border-radius: 999px;
}
.fwd-bar-num {
  margin-left: .5rem; font: 500 .78rem/1 var(--mono); color: var(--ink-soft);
  vertical-align: middle;
}
.key-confirmed { background: var(--accent); }
.key-projected { background: var(--accent-soft); }

/* ---- crossed-5% observation ----
   A fact about the seven sessions after the result, sitting under the
   headline. Never colour alone: the tick/dot glyph and the sentence both carry
   the answer, so it reads the same to a deuteranope and in a printout. */
.cross {
  display: flex; gap: .55rem; align-items: baseline;
  margin: .9rem 0 0; padding: .6rem .75rem;
  border-radius: 8px; font-size: .875rem; line-height: 1.45;
  background: var(--bg-sunk); border: 1px solid var(--line-soft);
}
.cross-yes { background: var(--accent-wash); border-color: var(--accent-soft); }
.cross-mark { font-weight: 700; font-size: 1rem; line-height: 1; }
.cross-yes .cross-mark { color: var(--up); }
.cross-no  .cross-mark { color: var(--ink-soft); }
.cross-text { color: var(--ink-mid); }
.cross-text strong { color: var(--ink); }

/* ---- price-band section heads ----
   Four shelves down one page, so each heading has to be findable at a glance
   while scrolling past twenty cards. The rule above it does the separating;
   the heading itself stays quiet, because the cards are the content. */
.bucket-head {
  margin: 2.75rem 0 1.15rem;
  padding-top: 1.4rem;
  border-top: 1px solid var(--line);
}
.cards + .bucket-head { margin-top: 2.75rem; }
.page-head + .bucket-head { margin-top: 0; padding-top: 0; border-top: 0; }
.bucket-title {
  margin: 0; font-size: 1.3rem; letter-spacing: -.01em;
}
.bucket-range {
  margin: .3rem 0 0; color: var(--ink-soft); font-size: .875rem;
}
.bucket-range .sep { margin: 0 .45rem; opacity: .55; }

/* ---- cards ---- */
.cards { display: grid; gap: 1.25rem; margin: 0; padding: 0; list-style: none; }

.card {
  position: relative;
  background: var(--bg-raised);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  padding: 1.5rem 1.65rem 1.55rem;
  transition: box-shadow .18s ease, transform .18s ease, border-color .18s ease;
}
.card:hover {
  box-shadow: var(--shadow);
  border-color: var(--accent-soft);
  transform: translateY(-1px);
}

.card-rail {
  position: absolute; top: 1.5rem; left: -.65rem;
  width: 2.1rem; height: 2.1rem; border-radius: 50%;
  background: var(--accent); color: #fff;
  display: grid; place-items: center;
  box-shadow: var(--shadow-sm);
}
.rank-num { font: 700 .9rem/1 var(--sans); }

.card-body { min-width: 0; }

.card-head {
  display: flex; flex-wrap: wrap; gap: .75rem 1.5rem;
  align-items: flex-start; justify-content: space-between;
  padding-left: 1.75rem;
}
.ident { min-width: 0; }
.sym { font-size: 1.3rem; font-weight: 700; margin: 0; letter-spacing: -.03em; }
.coname { color: var(--ink-soft); font-size: .84rem; margin: .2rem 0 0; }
.chip-mini {
  font-size: .64rem; font-weight: 700; letter-spacing: .05em;
  border: 1px solid var(--line); border-radius: 5px;
  padding: .12rem .34rem; margin-left: .5rem; color: var(--ink-soft);
  background: var(--bg-sunk);
}
.composite { text-align: right; flex-shrink: 0; }
.composite-val {
  display: block; font: 700 1.9rem/1 var(--sans);
  letter-spacing: -.04em; color: var(--accent-ink);
}
.composite-cap {
  display: block; font-size: .66rem; color: var(--ink-soft);
  text-transform: uppercase; letter-spacing: .09em; margin-top: .3rem; font-weight: 600;
}

.headline { margin: .95rem 0 0; color: var(--ink-mid); font-size: .96rem; }

/* ---- head badges: expected move + score ----
   Two circles side by side. The move is the loud one because it is the
   concrete number — a percentage a reader can hold — while the score is a
   ranking that only means anything relative to the same week's other names. */
.badges { display: flex; gap: .7rem; flex-shrink: 0; align-items: center; }

.badge {
  width: 5.1rem; height: 5.1rem; border-radius: 50%;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: .1rem; text-align: center; flex-shrink: 0;
}
.badge-val { font: 800 1.2rem/1 var(--sans); letter-spacing: -.035em; }
.badge-sub {
  font: 600 .56rem/1 var(--sans); text-transform: uppercase;
  letter-spacing: .07em; opacity: .75;
}

/* Expected move — solid, bold, the headline figure. */
.badge-move {
  background: var(--accent); color: #fff;
  box-shadow: 0 4px 14px -4px color-mix(in srgb, var(--accent) 55%, transparent);
}
.badge-move .badge-val { font-size: 1.32rem; }

/* Score — a ring filled in proportion to the 0-100 value. */
.badge-score {
  position: relative; color: var(--ink);
  background: conic-gradient(var(--accent) var(--ring, 0deg), var(--line) 0);
}
.badge-score::before {
  content: ""; position: absolute; inset: 5px;
  background: var(--bg-raised); border-radius: 50%;
}
.badge-score .badge-val, .badge-score .badge-sub { position: relative; z-index: 1; }
.badge-score .badge-sub { color: var(--ink-soft); }

@media (max-width: 34rem) {
  .badge { width: 4.35rem; height: 4.35rem; }
  .badge-val { font-size: 1.02rem; }
  .badge-move .badge-val { font-size: 1.12rem; }
}

/* ---- price ---- */
.price {
  display: flex; flex-wrap: wrap; gap: 1rem 1.75rem;
  align-items: center; justify-content: space-between;
  margin: 1.25rem 0 0; padding: 1.05rem 1.15rem;
  background: var(--bg-inset);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-sm);
}
.price-main { min-width: 0; }
.price-value { display: block; font: 700 1.75rem/1 var(--sans); letter-spacing: -.04em; }
.price-caption { display: block; font-size: .78rem; color: var(--ink-soft); margin-top: .45rem; }

.spark { display: block; flex-shrink: 0; max-width: 100%; height: 52px; }
.spark-line { stroke: var(--accent); }
.spark-area { fill: var(--accent); opacity: .10; }
.spark-dot  { fill: var(--accent); }
.spark-ring { fill: var(--bg-inset); }
.spark-up   .spark-line, .spark-up   .spark-dot { stroke: var(--up-mark); fill: none; }
.spark-up   .spark-dot { fill: var(--up-mark); }
.spark-up   .spark-area { fill: var(--up-mark); }
.spark-down .spark-line { stroke: var(--down-mark); }
.spark-down .spark-dot  { fill: var(--down-mark); }
.spark-down .spark-area { fill: var(--down-mark); }

/* ---- 52-week range ---- */
.range { margin: 1rem 0 0; }
.range-head {
  display: flex; justify-content: space-between; align-items: flex-end;
  font: 550 .82rem/1.2 var(--mono); font-variant-numeric: tabular-nums;
  color: var(--ink-mid); gap: .75rem;
}
.range-end-hi { text-align: right; }
.range-cap {
  display: block; font: 600 .62rem/1 var(--sans);
  text-transform: uppercase; letter-spacing: .08em;
  color: var(--ink-soft); margin-bottom: .28rem;
}
.range-mid { font: 500 .72rem/1 var(--sans); color: var(--ink-soft); padding-bottom: .1rem; }
.range-track {
  position: relative; height: 7px; margin-top: .55rem;
  background: linear-gradient(to right, var(--accent-soft), var(--accent));
  border-radius: 999px;
}
.range-marker {
  position: absolute; top: 50%; width: 3px; height: 16px;
  background: var(--ink); border-radius: 2px;
  box-shadow: 0 0 0 2.5px var(--bg-raised);
  transform: translate(-50%, -50%);
}

/* ---- layer bars ---- */
.layers { display: grid; gap: .6rem; margin: 1.4rem 0 0; }
.layer { display: grid; grid-template-columns: 10rem 1fr 2.9rem; gap: .9rem; align-items: center; font-size: .82rem; }
.layer-name { color: var(--ink-mid); font-weight: 500; }
.layer-weight { color: var(--ink-soft); font-size: .7rem; margin-left: .35rem; font-weight: 400; }
.bar { height: 8px; background: var(--bg-sunk); border-radius: 999px; overflow: hidden; }
.bar span { display: block; height: 100%; background: var(--accent); border-radius: 0 4px 4px 0; }
.layer-val { font: 600 .82rem/1 var(--mono); font-variant-numeric: tabular-nums; text-align: right; }

/* ---- chips ---- */
.facts { display: flex; flex-wrap: wrap; gap: .5rem; margin: 1.35rem 0 0; }
.fact {
  display: inline-flex; align-items: center; gap: .5rem;
  font-size: .78rem; color: var(--ink-mid);
  background: var(--bg-sunk); border: 1px solid var(--line-soft);
  border-radius: 999px; padding: .32rem .75rem;
}
.fact strong { font-weight: 650; color: var(--ink); }

.gauge { display: inline-block; width: 44px; height: 5px; background: var(--line); border-radius: 999px; overflow: hidden; }
.gauge-fill { display: block; height: 100%; background: var(--accent); border-radius: 999px; }

.flags { display: flex; flex-wrap: wrap; gap: .5rem; margin: .65rem 0 0; }
.flag {
  font-size: .74rem; font-weight: 550; border-radius: 7px; padding: .3rem .65rem;
  background: var(--bg-sunk); color: var(--ink-mid); border: 1px solid var(--line);
}
.flag-warn { background: var(--warn-bg); color: var(--warn-ink); border-color: var(--warn-line); }

/* ---- details ---- */
details.layer-detail { margin-top: 1.45rem; border-top: 1px solid var(--line-soft); padding-top: 1rem; }
details.layer-detail summary {
  cursor: pointer; font-size: .85rem; color: var(--accent);
  font-weight: 600; list-style: none; display: inline-flex; align-items: center; gap: .45rem;
}
details.layer-detail summary::-webkit-details-marker { display: none; }
details.layer-detail summary::before { content: "▸"; transition: transform .16s ease; display: inline-block; }
details[open].layer-detail summary::before { transform: rotate(90deg); }

.detail-grid { display: grid; grid-template-columns: auto 1fr; gap: 1.75rem; margin-top: 1.25rem; align-items: start; }
.detail-viz { text-align: center; }
.viz-cap { font-size: .72rem; color: var(--ink-soft); margin: .55rem 0 0; max-width: 9.5rem; line-height: 1.45; }
.viz-cap strong { color: var(--ink-mid); }

.quad { display: block; }
.quad-fill { fill: var(--accent); opacity: .05; }
.quad-axis { stroke: var(--line); stroke-width: 1; }
.quad-dot  { fill: var(--accent); }
.quad-ring { fill: var(--bg-raised); }

.narrative h4 {
  margin: 0 0 .25rem; font-size: .7rem; text-transform: uppercase;
  letter-spacing: .08em; color: var(--ink-soft); font-weight: 700;
}
.narrative p { margin: 0 0 .95rem; color: var(--ink-mid); font-size: .9rem; }
.detail-note { font-size: .74rem; color: var(--ink-soft); margin: 1rem 0 0; }

/* ---- month calendar ---- */
.cal { margin: 1.35rem 0 0; }
.cal-head {
  display: flex; flex-wrap: wrap; gap: .5rem 1rem;
  align-items: baseline; justify-content: space-between; margin-bottom: .7rem;
}
.cal-head h4 {
  margin: 0; font-size: .7rem; text-transform: uppercase;
  letter-spacing: .08em; color: var(--ink-soft); font-weight: 700;
}
.cal-move { font: 600 .85rem/1 var(--sans); }

.cal-grid-wrap { overflow-x: auto; }
.cal-grid {
  display: grid; grid-template-columns: repeat(5, minmax(6.6rem, 1fr));
  gap: 4px; min-width: 34rem;
}
.cal-dow {
  font-size: .64rem; text-transform: uppercase; letter-spacing: .09em;
  color: var(--ink-soft); font-weight: 700; text-align: center; padding-bottom: .15rem;
}
.cal-day {
  position: relative;
  background: var(--bg-inset);
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  padding: .45rem .5rem .5rem;
  min-height: 5.1rem;
  display: flex; flex-direction: column; gap: .1rem;
}
.cal-date { font: 600 .68rem/1 var(--mono); color: var(--ink-soft); }
.cal-close { font: 700 .92rem/1.15 var(--sans); letter-spacing: -.02em; margin-top: .1rem; }
.cal-chg { font: 600 .7rem/1 var(--sans); }
.cal-ohlc {
  display: flex; flex-wrap: wrap; gap: .1rem .45rem;
  font: 500 .6rem/1.35 var(--mono); color: var(--ink-soft);
  margin-top: auto; padding-top: .25rem;
}
.cal-shut { color: var(--ink-soft); font-size: .8rem; margin: auto; }

.cal-day.is-closed { background: transparent; border-style: dashed; }
/* Run-up: the two weeks before the result. Deliberately fainter than the
   scored tint and neutral rather than accent-coloured — it is context, and it
   should not read as part of what the card is measured on. The key names it,
   so the distinction never rests on the shade alone. */
.cal-day.is-runup  { background: var(--bg-sunk); }
.cal-day.is-scored { background: var(--accent-wash); border-color: var(--accent-soft); }
.cal-day.is-result {
  background: var(--bg-raised);
  border-color: var(--accent); border-width: 2px;
  box-shadow: 0 0 0 3px var(--accent-wash);
}
.cal-tag {
  position: absolute; top: -.45rem; right: .35rem;
  font: 700 .55rem/1 var(--sans); letter-spacing: .07em;
  background: var(--accent); color: #fff;
  padding: .2rem .35rem; border-radius: 4px;
}

.cal-key { font-size: .68rem; color: var(--ink-soft); margin: .7rem 0 0; display: flex; flex-wrap: wrap; gap: .35rem .55rem; align-items: center; }
.key { width: .7rem; height: .7rem; border-radius: 3px; display: inline-block; }
.key-runup  { background: var(--bg-sunk); border: 1px solid var(--line); }
.key-result { border: 2px solid var(--accent); }
.key-scored { background: var(--accent-wash); border: 1px solid var(--accent-soft); }
.key-closed { border: 1px dashed var(--line); }

.cal-verdict {
  margin-top: .9rem; border: 1px solid var(--line-soft);
  border-radius: var(--radius-sm); background: var(--bg-sunk);
  padding: .35rem .9rem;
}
.cal-verdict-row {
  display: flex; flex-wrap: wrap; gap: .35rem 1rem;
  justify-content: space-between; align-items: baseline;
  padding: .4rem 0; border-bottom: 1px solid var(--line-soft);
  font-size: .82rem;
}
.cal-verdict-row:last-child { border-bottom: 0; }
.cal-verdict-label { color: var(--ink-mid); }
.cal-verdict-val { font-weight: 650; font-variant-numeric: tabular-nums; }

/* ---- tables ---- */
.table-scroll {
  overflow-x: auto; margin: 1rem 0 0;
  border: 1px solid var(--line-soft); border-radius: var(--radius-sm);
  background: var(--bg-raised);
}
table { border-collapse: collapse; width: 100%; font-size: .84rem; }
th, td { text-align: left; padding: .6rem .8rem; border-bottom: 1px solid var(--line-soft); white-space: nowrap; }
thead th {
  font-size: .68rem; text-transform: uppercase; letter-spacing: .08em;
  color: var(--ink-soft); font-weight: 700;
  background: var(--bg-sunk); position: sticky; top: 0;
}
tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover td { background: var(--bg-inset); }
td.num, th.num { text-align: right; font-family: var(--mono); font-variant-numeric: tabular-nums; }
tr.is-real-hero td { background: var(--accent-wash); }

/* the 16-quarter evidence table */
.history-table td.q { font-weight: 650; }
.history-table .win  { background: var(--up-wash); }
.history-table .lose { background: var(--down-wash); }

.up   { color: var(--up); font-weight: 600; }
.down { color: var(--down); font-weight: 600; }
.flat { color: var(--ink-soft); }
.arrow { font-size: .7em; }
.yes { color: var(--up); font-weight: 650; }
.no  { color: var(--ink-soft); }

/* ---- formula ---- */
.formula {
  font: 600 .88rem/1.5 var(--mono);
  background: var(--accent-wash); color: var(--accent-ink);
  border: 1px solid var(--accent-soft); border-radius: var(--radius-sm);
  padding: .7rem .9rem; margin: .8rem 0 0;
  overflow-x: auto; white-space: nowrap;
}
.formula-total td { border-top: 2px solid var(--line); background: var(--bg-sunk); }

/* ---- fiscal-year week grid ---- */
.fy-legend {
  display: flex; flex-wrap: wrap; gap: .35rem 1.1rem;
  font-size: .72rem; color: var(--ink-soft); margin: 1.1rem 0 .9rem;
}
.fy-legend span { display: inline-flex; align-items: center; gap: .35rem; }
.fy-key { width: .8rem; height: .8rem; border-radius: 4px; display: inline-block; }
.fy-key.fy-reviewed  { background: var(--accent); }
.fy-key.fy-published { background: var(--accent-wash); border: 1px solid var(--accent-soft); }
.fy-key.fy-skipped   { background: var(--bg-sunk); border: 1px solid var(--line); }
.fy-key.fy-future    { background: transparent; border: 1px dashed var(--line); }

.fy-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(3.1rem, 1fr));
  gap: 5px;
}
.fy-cell {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: .1rem; min-height: 2.9rem; border-radius: 7px;
  text-decoration: none; font-variant-numeric: tabular-nums;
}
.fy-n { font: 600 .7rem/1 var(--mono); }
.fy-score { font: 700 .62rem/1 var(--sans); }

.fy-cell.fy-future    { border: 1px dashed var(--line); color: var(--ink-soft); opacity: .6; }
.fy-cell.fy-skipped   { background: var(--bg-sunk); border: 1px solid var(--line); color: var(--ink-soft); }
.fy-cell.fy-published { background: var(--accent-wash); border: 1px solid var(--accent-soft); color: var(--accent-ink); }
.fy-cell.fy-reviewed  { background: var(--accent); border: 1px solid var(--accent); color: #fff; }
.fy-cell.fy-reviewed:hover, .fy-cell.fy-published:hover { filter: brightness(1.06); }

/* ---- outcome colouring ----
   Green at +5% or better, orange between 0 and +5%, red on any fall. Colour
   never travels alone: the band chip beside it is always labelled in words,
   because red and orange are the pair a protanope loses first. */
.outcome-gain    { color: var(--up); }
.outcome-average { color: var(--mid); }
.outcome-loss    { color: var(--down); }
.outcome-pending { color: var(--ink-soft); }

.dot {
  display: inline-block; width: .55rem; height: .55rem;
  border-radius: 50%; margin-right: .4rem; vertical-align: baseline;
}
.dot-gain    { background: var(--up-mark); }
.dot-average { background: var(--mid-mark); }
.dot-loss    { background: var(--down-mark); }
.dot-pending { background: transparent; border: 1px dashed var(--ink-soft); }

.card.is-gain    { border-left: 4px solid var(--up-mark); }
.card.is-average { border-left: 4px solid var(--mid-mark); }
.card.is-loss    { border-left: 4px solid var(--down-mark); }

.card-rail.rail-gain    { background: var(--up-mark); }
.card-rail.rail-average { background: var(--mid-mark); }
.card-rail.rail-loss    { background: var(--down-mark); }

.outcome-pill {
  display: inline-flex; align-items: center; gap: .3rem;
  font: 650 .7rem/1 var(--sans); padding: .3rem .6rem;
  border-radius: 999px; margin-left: .5rem; white-space: nowrap;
}
.outcome-pill.pill-gain    { background: var(--up-wash);   color: var(--up);   border: 1px solid color-mix(in srgb, var(--up) 25%, transparent); }
.outcome-pill.pill-average { background: var(--mid-wash);  color: var(--mid);  border: 1px solid color-mix(in srgb, var(--mid) 25%, transparent); }
.outcome-pill.pill-loss    { background: var(--down-wash); color: var(--down); border: 1px solid color-mix(in srgb, var(--down) 25%, transparent); }

/* ---- outcome bands ---- */
.band {
  display: inline-block; font: 650 .7rem/1 var(--sans);
  padding: .28rem .55rem; border-radius: 999px; letter-spacing: .02em;
}
.band-gain    { background: var(--up-wash);     color: var(--up);       border: 1px solid color-mix(in srgb, var(--up) 25%, transparent); }
.band-average { background: var(--mid-wash);   color: var(--mid);      border: 1px solid color-mix(in srgb, var(--mid) 25%, transparent); }
.band-loss    { background: var(--down-wash);   color: var(--down);     border: 1px solid color-mix(in srgb, var(--down) 25%, transparent); }
.band-pending { background: transparent;        color: var(--ink-soft); border: 1px dashed var(--line); }

.stat-value.up   { color: var(--up); }
.stat-value.down { color: var(--down); }

/* ---- stat tiles ---- */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(12.5rem, 1fr)); gap: 1.1rem; margin: 1.65rem 0 0; }
.stat {
  background: var(--bg-raised); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 1.2rem 1.3rem; box-shadow: var(--shadow-sm);
}
.stat-label { font-size: .7rem; text-transform: uppercase; letter-spacing: .08em; color: var(--ink-soft); margin: 0 0 .55rem; font-weight: 650; }
.stat-value { font: 700 1.9rem/1 var(--sans); letter-spacing: -.04em; margin: 0; }
.stat-note { font-size: .74rem; color: var(--ink-soft); margin: .55rem 0 0; }

/* ---- prose ---- */
.prose { max-width: 44rem; }
.prose p, .prose li { color: var(--ink-mid); }
.prose ol, .prose ul { padding-left: 1.25rem; }
.prose li { margin: .4rem 0; }
.prose dt { font-weight: 660; margin-top: 1.2rem; color: var(--ink); }
.prose dd { margin: .3rem 0 0; color: var(--ink-mid); }

/* ---- empty ---- */
.empty {
  border: 1px dashed var(--line); border-radius: var(--radius);
  padding: 3rem 1.5rem; text-align: center; color: var(--ink-soft);
  background: var(--bg-raised);
}
.empty h2 { margin-top: 0; }

/* ---- footer ---- */
.footer { border-top: 1px solid var(--line); background: var(--bg-raised); padding: 2.25rem 0 3.5rem; margin-top: 4.5rem; }
.disclaimer { font-size: .78rem; color: var(--ink-soft); max-width: 54rem; margin: 0 0 1rem; }
.colophon { font-size: .78rem; color: var(--ink-soft); margin: 0; }

@media (max-width: 46rem) {
  .detail-grid { grid-template-columns: 1fr; }
  .viz-cap { max-width: none; }
}
@media (max-width: 34rem) {
  .wrap { padding: 0 1rem; }
  .card { padding: 1.25rem 1.1rem 1.3rem; }
  .card-rail { left: auto; right: 1.1rem; top: 1.1rem; }
  .card-head { padding-left: 0; padding-right: 2.75rem; }
  .layer { grid-template-columns: 7rem 1fr 2.6rem; gap: .65rem; }
  .spark { width: 100%; }
}

/* ---- status page ----------------------------------------------------------
 * State is never carried by the dot alone: every row prints its state in
 * words next to it. The dot is a scanning aid for someone who already knows
 * what green means, not the message.
 */
.st-stamp { font-size: .78rem; color: var(--ink-soft); margin: 1rem 0 0; }
.st-section { margin: 2.75rem 0 0; }
.st-section h2 { margin: 0 0 .5rem; }
.st-intro { color: var(--ink-mid); max-width: 46rem; margin: 0 0 1.3rem; font-size: .92rem; }

.st-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr)); gap: 1rem; }

.st-row {
  background: var(--bg-raised); border: 1px solid var(--line);
  border-left: 3px solid var(--line);
  border-radius: var(--radius); padding: 1.1rem 1.2rem 1.2rem;
  box-shadow: var(--shadow-sm);
}
.st-head { display: flex; align-items: baseline; gap: .55rem; flex-wrap: wrap; }
.st-dot { width: .5rem; height: .5rem; border-radius: 50%; background: var(--ink-soft); flex: none; }
.st-label { font: 660 .98rem/1.3 var(--sans); letter-spacing: -.01em; }
.st-state {
  margin-left: auto; font: 650 .66rem/1 var(--sans);
  text-transform: uppercase; letter-spacing: .07em;
  padding: .3rem .5rem; border-radius: 999px;
  background: var(--bg-sunk); color: var(--ink-soft); border: 1px solid var(--line);
}
.st-does { font-size: .82rem; color: var(--ink-mid); margin: .6rem 0 0; }

.st-facts { margin: .85rem 0 0; display: grid; gap: .4rem; }
.st-facts > div { display: flex; gap: .6rem; align-items: baseline; justify-content: space-between; }
.st-facts dt {
  font: 600 .68rem/1.3 var(--sans); text-transform: uppercase;
  letter-spacing: .05em; color: var(--ink-soft); margin: 0;
}
.st-facts dd {
  margin: 0; text-align: right;
  font: 550 .82rem/1.3 var(--mono); font-variant-numeric: tabular-nums;
}
.st-facts dd.st-value { font: 700 1.15rem/1.2 var(--sans); letter-spacing: -.02em; }
.st-ago { display: block; font: 500 .68rem/1.3 var(--sans); color: var(--ink-soft); }
.st-note { font-size: .8rem; color: var(--ink-mid); margin: .9rem 0 0; }

.st-ok      { border-left-color: var(--up-mark); }
.st-ok      .st-dot { background: var(--up-mark); }
.st-ok      .st-state { background: var(--up-wash); color: var(--up); border-color: color-mix(in srgb, var(--up) 25%, transparent); }
.st-late    { border-left-color: var(--mid-mark); }
.st-late    .st-dot { background: var(--mid-mark); }
.st-late    .st-state { background: var(--mid-wash); color: var(--mid); border-color: color-mix(in srgb, var(--mid) 25%, transparent); }
.st-failed, .st-never { border-left-color: var(--down-mark); }
.st-failed  .st-dot, .st-never .st-dot { background: var(--down-mark); }
.st-failed  .st-state, .st-never .st-state {
  background: var(--down-wash); color: var(--down);
  border-color: color-mix(in srgb, var(--down) 25%, transparent);
}
.st-running .st-dot { background: var(--accent); }
.st-running .st-state { background: var(--accent-wash); color: var(--accent-ink); border-color: var(--accent-soft); }

/* A job that ran and declined to act. Deliberately quiet: it is not a fault
 * and must not read like one, but it is not "on schedule" either — something
 * that normally happens did not, and the row says why. */
.st-skipped { border-left-color: var(--line); }
.st-skipped .st-dot { background: var(--ink-soft); }
.st-skipped .st-state {
  background: var(--bg-inset); color: var(--ink-mid);
  border-color: var(--line);
}

.st-caveat {
  border: 1px dashed var(--line); border-radius: var(--radius);
  padding: 1.4rem 1.5rem; background: var(--bg-inset);
}
.st-caveat h2 { font-size: 1rem; }
.st-caveat p { color: var(--ink-mid); max-width: 46rem; margin: 0; font-size: .88rem; }

@media (max-width: 34rem) {
  .st-facts > div { flex-direction: column; gap: .1rem; }
  .st-facts dd { text-align: left; }
}

/* ---- pick-date provenance on a card ----
 * Quiet by design. This is a qualification on the date, not a warning about
 * the stock, and styling it like an alert would say something the content
 * does not.
 */
.pick-date {
  display: flex; flex-direction: column; gap: .5rem;
  margin: 1rem 0 0; padding: .85rem 1rem;
  background: var(--bg-inset); border-radius: var(--radius);
  border: 1px solid var(--line);
}
.pd-line { margin: 0; font-size: .82rem; line-height: 1.55; color: var(--ink-mid); }
.pd-tag {
  display: inline-block; margin-right: .4rem;
  font: 600 .68rem/1.5 var(--sans); letter-spacing: .06em; text-transform: uppercase;
  color: var(--ink-soft);
}
.pd-tag-move { color: var(--mid); }
.pd-slip strong { color: var(--ink); }

/* ---- slips on the track record ---- */
.slip-table td.moved { font-variant-numeric: tabular-nums; }

/* ---- the schedule table on /methodology ----
 * Cells are nowrap by default because most tables here are numeric. This one
 * carries a sentence per row, so the last column has to wrap or the table
 * becomes a single line the reader scrolls sideways through.
 */
.sched-table td.wrap { white-space: normal; min-width: 20rem; }
.sched-table td:first-child { font-variant-numeric: tabular-nums; color: var(--ink-mid); }

/* ---- between reporting seasons ----
   Shown when the exchange has nothing filing for weeks on end. Given real
   prominence rather than a dismissible strip: a quiet site with no explanation
   reads as a broken one, and the explanation is the honest part of the
   product. Uses the neutral sunk ground, not a warning colour — nothing has
   gone wrong. */
.season {
  background: var(--bg-sunk);
  border: 1px solid var(--line);
  border-radius: var(--radius, 12px);
  padding: 1.8rem 1.9rem;
  margin: 0 0 2.75rem;
}
.season-eyebrow {
  margin: 0 0 .55rem;
  font-size: .7rem; text-transform: uppercase; letter-spacing: .11em;
  font-weight: 700; color: var(--accent-ink);
}
.season-head {
  margin: 0 0 .8rem; font-size: 1.35rem; line-height: 1.3;
  letter-spacing: -.01em;
}
.season-body { margin: 0 0 .7rem; color: var(--ink-mid); font-size: .95rem; max-width: 44rem; }
.season-body:last-child { margin-bottom: 0; }
.season-count {
  display: flex; align-items: baseline; gap: .6rem;
  margin: 1.1rem 0 .9rem; padding-top: 1rem;
  border-top: 1px solid var(--line);
}
.season-num {
  font-size: 2.4rem; font-weight: 700; line-height: 1;
  letter-spacing: -.03em; color: var(--accent-ink);
  font-variant-numeric: tabular-nums;
}
.season-unit { font-size: .9rem; color: var(--ink-soft); }

/* ---- trajectory chart ----
   The shape of the run-up and the measured window, above the daily grid.
   Run-up is deliberately quieter than the scored sessions: it is context, and
   should not compete with the period the card is judged on. Colour never
   carries meaning alone — the key names every mark. */
.traj-wrap { margin: 0 0 1.1rem; }
.traj { display: block; width: 100%; height: auto; overflow: visible; }
.traj-band  { fill: var(--accent-wash); }
.traj-zero  { stroke: var(--ink-soft); stroke-width: 1; stroke-dasharray: 3 3; opacity: .8; }
.traj-mark  { stroke: var(--up); stroke-width: 1; stroke-dasharray: 4 3; opacity: .85; }
.traj-result{ stroke: var(--accent); stroke-width: 1.5; opacity: .85; }
.traj-run   { fill: none; stroke: var(--ink-soft); stroke-width: 1.6;
              stroke-linejoin: round; stroke-linecap: round; }
.traj-post  { fill: none; stroke: var(--accent); stroke-width: 2.4;
              stroke-linejoin: round; stroke-linecap: round; }
.traj-peak  { fill: var(--up); stroke: var(--bg-raised); stroke-width: 1.5; }
.traj-lbl   { font: 500 9px var(--mono); fill: var(--ink-soft); }
.traj-result-lbl { fill: var(--accent); font-weight: 700; }
.traj-key { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .55rem;
            margin: .45rem 0 0; font-size: .68rem; color: var(--ink-soft); }
.tk { width: .85rem; height: 0; display: inline-block; vertical-align: middle; }
.tk-run  { border-top: 2px solid var(--ink-soft); }
.tk-post { border-top: 3px solid var(--accent); }
.tk-peak { width: .5rem; height: .5rem; border-radius: 50%; background: var(--up); }

/* ---- screened out ----
   The names that reported and did not qualify. Deliberately given a real
   section rather than a footnote: in an off-season week it is the only
   substantive thing the page has to report, and burying it would be the same
   silence the product exists to avoid. */
.screened {
  margin: 0 0 2.75rem; padding: 1.6rem 1.7rem;
  background: var(--bg-raised); border: 1px solid var(--line);
  border-radius: var(--radius);
}
.screened-head { margin: 0 0 .5rem; font-size: 1.25rem; }
.screened .lede { margin: 0 0 1.1rem; color: var(--ink-mid); font-size: .96rem; max-width: 46rem; }
.screened-why { color: var(--ink-mid); }