/* =============================================================================
   /compare/ — the head-to-head room.

   Page furniture only. The chrome (masthead, research-desk strip, hero,
   deskbar, panels, tables, footer, receipts) comes from hi-fx.css and is not
   restated here; every colour below resolves through that sheet's tokens so
   the light and dark themes both land without a second palette.

   House rules this file obeys:
     - the display face is Newsreader UPRIGHT. There is no font-style:italic
       in this sheet, deliberately, and <i>/<em> are neutral hooks only.
     - ink and blue carry every accent. Gold appears on exactly one thing:
       the ◷ receipt glyph, which hi-fx paints.
     - side A and side B are --cmp-a (ink) and --cmp-b (blue): a VALUE
       pair, fixed, never the two players' franchise hues. See the block
       under :root.
     - team tints arrive from the data as --tc / --tint and are franchise
       colour, not house accent. They are drawn in the hero only.
     - panels: 22px 24px, 18px radius, 1px line, soft shadow.
   ============================================================================= */

:root{
  /* the one hue this page adds: a second blue for the deployment room, so
     even strength / power play / penalty kill read as three lanes without
     reaching for gold */
  --cmp-indigo:#4457c8;
  --cmp-panel-pad:22px 24px;

  /* ---------------------------------------------------------------
     THE A / B PAIR.

     This used to be whatever two franchise colours the current matchup
     happened to carry, which meant the default pairing painted the whole
     page orange against eggplant — a palette the house does not own, and
     a pair that carries no meaning at all once the two players change.

     The comparison now reads on VALUE, not hue:

       A  page ink        — the darkest thing in light, the lightest in dark
       B  house blue      — one step of lift, the site's only accent
       level  warm grey   — recessive, never mistaken for a side

     Both sides clear 4.5:1 on --card in both themes, and the two are
     separable in greyscale, which hue-vs-hue never was.

     Franchise colour is still evidence and is still drawn: the hero
     halves keep their real team tint, and only the hero. Everywhere a
     bar, chip, legend, rail, line or figure means "side A" or "side B",
     it uses the pair below.
     --------------------------------------------------------------- */
  --cmp-a:#0d1f3c;          /* ink navy */
  --cmp-b:#1f5fbf;          /* mid blue */
  --cmp-level:#b3a68f;      /* warm grey — the level segment */
  --cmp-level-soft:#ded3bf;
  --cmp-a-soft:rgba(13,31,60,.10);
  --cmp-b-soft:rgba(31,95,191,.12);
}
:root[data-theme="dark"]{
  --cmp-indigo:#8fa2f0;
  --cmp-a:#eef4fc;
  --cmp-b:#4d8fe8;
  --cmp-level:#6d7f96;
  --cmp-level-soft:rgba(157,184,221,.22);
  --cmp-a-soft:rgba(238,244,252,.13);
  --cmp-b-soft:rgba(77,143,232,.18);
}

/* =========================================================================
   1 · HERO — the matchup card
   The right column of the hero is the comparison itself: two franchise
   tinted halves, both mugs, both crests, both native scorelines and the
   row-lead count. Compact by construction — it has to sit beside the
   headline, not below it.
   ========================================================================= */
.cmp-vs{padding:14px 15px 12px}
.cmp-vs-wait{font-family:var(--mono);font-size:.6rem;letter-spacing:.05em;color:#9db8dd;padding:18px 0 20px;text-align:center}

/* the centre column is a real grid track, not an overlay: a VS puck that
   floats on top of the two halves lands on whichever name is longest */
.cvs{position:relative;display:grid;grid-template-columns:minmax(0,1fr) 44px minmax(0,1fr);gap:0;
  border-radius:12px;overflow:hidden;background:rgba(4,14,34,.62)}
.cvs-side{position:relative;padding:11px 11px 10px;min-width:0;
  background:linear-gradient(160deg,var(--tint,rgba(31,95,191,.4)) 0%,rgba(4,14,34,.62) 78%)}
.cvs-side[data-side="b"]{background:linear-gradient(200deg,var(--tint,rgba(31,95,191,.4)) 0%,rgba(4,14,34,.62) 78%)}
.cvs-side::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--tc,#1f5fbf);opacity:.9}
.cvs-tag{position:absolute;top:8px;right:9px;font-family:var(--mono);font-size:.5rem;font-weight:700;
  letter-spacing:.14em;color:#c3d4ec;opacity:.72;line-height:1}
.cvs-face{display:flex;align-items:flex-end;gap:7px}
.cvs-mug .mug,.cvs-mug .mono-fb{border-radius:50%;background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.28);color:#fff}
/* the hero is navy in both themes, so it always takes the _dark.svg crest
   — the light variant is inked for parchment and vanishes on navy. hi-fx
   now carries the same rule for .hero generally; this scoped copy stays so
   the card is correct on its own terms. */
.cvs-crest{display:inline-grid;place-items:center;width:22px;height:22px;flex:none;margin-bottom:3px}
.cvs-crest img{width:22px;height:22px;object-fit:contain}
.cvs-crest .logo-l{display:none}
.cvs-crest .logo-d{display:inline-block}
.cvs-crest .crest-fb{color:#fff;border-color:rgba(255,255,255,.4);background:rgba(255,255,255,.16)}
.cvs-name{font-family:var(--serif);font-weight:600;font-size:.98rem;line-height:1.14;color:#fff;margin-top:8px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cvs-detail{font-family:var(--mono);font-size:.53rem;letter-spacing:.08em;text-transform:uppercase;color:#9db8dd;margin-top:2px}
.cvs-line{display:grid;grid-template-columns:repeat(4,1fr);gap:4px;margin-top:9px;
  border-top:1px solid rgba(255,255,255,.16);padding-top:8px}
.cvs-line div{min-width:0}
.cvs-line b{display:block;font-family:var(--serif);font-weight:700;font-size:.94rem;line-height:1;color:#fff;
  font-variant-numeric:tabular-nums}
.cvs-line i{display:block;font-size:.44rem;font-weight:900;letter-spacing:.14em;text-transform:uppercase;
  color:#8fa5c4;margin-top:3px}
.cvs-split{align-self:center;justify-self:center;z-index:2;
  width:32px;height:32px;border-radius:50%;display:grid;place-items:center;
  font-family:var(--mono);font-size:.55rem;font-weight:700;letter-spacing:.05em;color:#fff;
  background:#0a1830;border:1px solid rgba(157,184,221,.45);box-shadow:0 4px 16px rgba(2,8,20,.5)}
.cvs-foot{margin-top:9px;font-family:var(--mono);font-size:.53rem;line-height:1.55;color:#9db8dd}

/* =========================================================================
   2 · DESK — the picker

   THE BUG THIS SECTION REPLACES.
   The old picker was authored for a horizontal row — `.cmp-find{flex:1 1
   300px}`, `.cmp-side{flex:1 1 250px}` — but the container it actually
   landed in was `#compareControls{flex-direction:column}`. In a COLUMN
   flex container `flex-basis` sizes the cross axis's opposite: it becomes
   a HEIGHT. So a 37px search input sat inside a 300px label, and each 37px
   select inside a 250px one. Three controls, ~800px of empty box, and a
   deskbar 1,036px tall with nothing in it. That is the "three enormous
   blank voids".

   The rebuild: ONE desk row, an explicit grid, every control exactly 44px
   tall, labels as a 12px overline strip above them. The two 2,333-option
   native selects are gone entirely — they were never a usable way to pick
   a player. The search field is the primary control and each result row
   carries A / B assignment buttons, so a matchup is a word of typing.
   ========================================================================= */
.cmp-deskbar .in#compareControls{display:block;padding-top:14px;padding-bottom:13px}

.cmp-desk{display:grid;gap:10px 12px;align-items:end;
  grid-template-columns:minmax(120px,150px) minmax(210px,1.35fr) minmax(150px,1fr) 44px minmax(150px,1fr) auto}
.cmp-cell{min-width:0;display:flex;flex-direction:column;gap:6px}
.cmp-lbl{font-size:.5rem;font-weight:900;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);
  line-height:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cmp-kbd{display:inline-block;font-family:var(--mono);font-size:.5rem;font-weight:700;letter-spacing:0;
  border:1px solid var(--hairline);border-radius:4px;padding:1px 4px;margin-left:5px;color:var(--muted);
  background:var(--card2);text-transform:none}

/* the one control height on this page */
.cmp-ctl{height:44px;min-height:44px;box-sizing:border-box;width:100%;
  background:var(--card2);border:1px solid var(--border);border-radius:11px;padding:0 12px;
  font-family:var(--sans);font-size:.82rem;font-weight:600;color:var(--ink);
  transition:border-color var(--mo-fast,120ms) var(--mo-ease,ease),background-color var(--mo-fast,120ms) var(--mo-ease,ease)}
.cmp-ctl:hover{border-color:var(--muted)}
.cmp-ctl:focus-visible{outline:2px solid var(--blue);outline-offset:2px;border-color:var(--blue)}
select.cmp-ctl{cursor:pointer;-webkit-appearance:none;appearance:none;padding-right:30px;
  background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),linear-gradient(135deg,currentColor 50%,transparent 50%);
  background-position:calc(100% - 16px) 20px,calc(100% - 11px) 20px;background-size:5px 5px,5px 5px;background-repeat:no-repeat}
input.cmp-ctl::placeholder{color:var(--muted);font-weight:500}

/* ---- the two side slots: what is on the desk, and where Enter goes ---- */
.cmp-find{position:relative}
.cmp-slot{display:flex;align-items:center;gap:9px;text-align:left;cursor:pointer;overflow:hidden}
.cmp-slot .mug,.cmp-slot .mono-fb{width:28px;height:28px;flex:none;border-radius:50%}
.cmp-slot-name{min-width:0;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  font-size:.82rem;font-weight:700;line-height:1.2}
.cmp-slot-side{font-family:var(--mono);font-size:.56rem;font-weight:700;letter-spacing:.1em;flex:none;
  width:20px;height:20px;border-radius:6px;display:grid;place-items:center;color:#fff}
.cmp-slot[data-slot="a"] .cmp-slot-side{background:var(--cmp-a)}
.cmp-slot[data-slot="b"] .cmp-slot-side{background:var(--cmp-b)}
:root[data-theme="dark"] .cmp-slot[data-slot="a"] .cmp-slot-side{color:#0a1220}
.cmp-slot[data-slot="a"]{border-left:3px solid var(--cmp-a)}
.cmp-slot[data-slot="b"]{border-left:3px solid var(--cmp-b)}
/* the aimed side: where a bare Enter in the search field lands. It is a
   real, visible piece of state, not a guess the reader has to make. */
.cmp-slot[aria-current="true"]{border-color:var(--blue);background:var(--blue-soft);box-shadow:inset 0 0 0 1px var(--blue)}
.cmp-slot[aria-current="true"]::after{content:"\21B5";font-family:var(--mono);font-size:.72rem;color:var(--blue);flex:none}

.cmp-swapcell .cmp-lbl{text-align:center}
.cmp-swap{padding:0;display:grid;place-items:center;font-size:1.05rem;cursor:pointer;color:var(--muted)}
.cmp-swap:hover{color:var(--blue);border-color:var(--blue)}
.cmp-copy{cursor:pointer;white-space:nowrap;background:var(--card);border-color:var(--blue);color:var(--blue);font-weight:800}
.cmp-copy:hover{background:var(--blue-soft)}
.cmp-copy.is-done{background:var(--mint-soft);border-color:var(--mint);color:var(--mint)}

/* ---- the result list: a popover, keyboard-first ---- */
.cmp-results{position:absolute;left:0;right:0;top:calc(100% + 6px);z-index:40;max-height:330px;overflow-y:auto;
  background:var(--card);border:1px solid var(--border);border-radius:14px;box-shadow:var(--shadow);padding:6px;
  min-width:330px}
.cmp-results[hidden]{display:none}
.cmp-hit{display:flex;align-items:center;gap:9px;padding:5px 7px;border-radius:10px;
  transition:background-color var(--mo-fast,120ms) var(--mo-ease,ease)}
.cmp-hit:hover,.cmp-hit.is-active{background:var(--blue-soft)}
.cmp-hit.is-active{box-shadow:inset 2px 0 0 var(--blue)}
.cmp-hit[data-on="a"]{box-shadow:inset 3px 0 0 var(--cmp-a)}
.cmp-hit[data-on="b"]{box-shadow:inset 3px 0 0 var(--cmp-b)}
.cmp-hit .mug,.cmp-hit .mono-fb{width:30px;height:30px;flex:none;border-radius:50%}
.cmp-hit-id{min-width:0;flex:1;display:flex;flex-direction:column}
.cmp-hit-id b{font-size:.79rem;font-weight:800;line-height:1.2;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cmp-hit-id i{font-family:var(--mono);font-size:.55rem;letter-spacing:.06em;color:var(--muted)}
.cmp-hit-acts{display:flex;gap:5px;flex:none}
.cmp-hit-acts button{width:44px;height:44px;border-radius:10px;border:1px solid var(--border);background:var(--card2);
  cursor:pointer;font-family:var(--mono);font-size:.72rem;font-weight:700;color:var(--muted);
  transition:background-color var(--mo-fast,120ms) var(--mo-ease,ease),
             border-color var(--mo-fast,120ms) var(--mo-ease,ease),color var(--mo-fast,120ms) var(--mo-ease,ease)}
.cmp-hit-acts button:hover{border-color:var(--blue);color:var(--blue);background:var(--blue-soft)}
.cmp-hit-acts button[data-pick="a"].is-on{background:var(--cmp-a);border-color:var(--cmp-a);color:var(--card)}
.cmp-hit-acts button[data-pick="b"].is-on{background:var(--cmp-b);border-color:var(--cmp-b);color:#fff}
.cmp-hit-none,.cmp-hit-more{font-family:var(--mono);font-size:.6rem;color:var(--muted);padding:9px 8px;line-height:1.5}

/* ---- the meta line under the desk ---- */
.cmp-meta{display:flex;align-items:center;gap:8px 14px;flex-wrap:wrap;margin-top:11px;
  padding-top:10px;border-top:1px solid var(--hairline)}
.cmp-status{font-family:var(--mono);font-size:.6rem;letter-spacing:.03em;color:var(--muted);line-height:1.5;
  flex:1 1 240px;min-width:0}
.cmp-count{font-family:var(--mono);font-size:.6rem;letter-spacing:.05em;color:var(--muted);white-space:nowrap}
.cmp-link{font-family:var(--mono);font-size:.58rem;letter-spacing:.02em;color:var(--muted);
  background:var(--card2);border:1px solid var(--hairline);border-radius:8px;padding:4px 9px;white-space:nowrap}
.cmp-keys{font-family:var(--mono);font-size:.55rem;letter-spacing:.05em;color:var(--muted);white-space:nowrap}
.cmp-keys b{color:var(--ink);border:1px solid var(--hairline);border-radius:4px;padding:1px 5px;margin:0 2px 0 7px;
  background:var(--card2);font-weight:700}
.cmp-noscript{font-size:.76rem;line-height:1.6;color:var(--muted);margin-top:11px;padding-left:12px;
  border-left:2px solid var(--blue)}

.cmp-recent{display:flex;align-items:center;gap:7px;flex-wrap:wrap;width:100%;margin-top:10px}
.cmp-recent[hidden]{display:none}
.cmp-recent-lbl{font-size:.5rem;font-weight:900;letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}
.cmp-recent button{background:var(--card2);border:1px solid var(--border);border-radius:999px;padding:7px 13px;cursor:pointer;
  font-size:.66rem;font-weight:700;color:var(--muted);white-space:nowrap;
  transition:border-color var(--mo-fast,120ms) var(--mo-ease,ease),color var(--mo-fast,120ms) var(--mo-ease,ease)}
.cmp-recent button:hover{border-color:var(--blue);color:var(--blue)}
.cmp-recent button i{font-family:var(--mono);font-size:.55rem;opacity:.7;padding:0 2px}
.cmp-recent button.cmp-recent-clear{border-style:dashed}

/* =========================================================================
   2b · THE LEAD LINE — the page's one loud object
   The verdict the reader arrived for, promoted out of the ledger and set
   in Newsreader across the full desk width. The leader's name is blue;
   the figure is a COUNT OF ROWS and the note under it says so. There is
   no composite score on this page and this band does not invent one.
   ========================================================================= */
.cmp-verdict{background:var(--card);border-bottom:1px solid var(--border);position:relative;z-index:4}
.cmp-verdict[hidden]{display:none}
.cmp-verdict .in{max-width:var(--maxw);margin:0 auto;padding:18px 28px 17px}
.cmp-verdict-line{font-family:var(--serif);font-weight:600;font-size:clamp(1.24rem,2.5vw,1.92rem);line-height:1.2;
  letter-spacing:-.012em;color:var(--ink);text-wrap:balance}
.cmp-verdict-line b{font-weight:700;color:var(--blue)}
.cmp-verdict-line em{color:var(--ink);font-weight:700;font-variant-numeric:tabular-nums}
.cmp-verdict-note{font-family:var(--mono);font-size:.58rem;letter-spacing:.05em;color:var(--muted);margin-top:8px}
.cmp-verdict-note::before{content:"◷ ";color:var(--gold)}

/* =========================================================================
   3 · STAGE
   ========================================================================= */
/* the first section head sits closer than the site default: the whole
   point of this page is that the comparison is near the fold */
.compare-shell{scroll-margin-top:80px}
.compare-shell .section-head{margin-top:34px}
.compare-stage{margin-top:20px}
.compare-loading{display:grid;gap:14px;margin-top:18px}
.compare-skeleton{height:96px;border-radius:18px;background:var(--card2);border:1px solid var(--hairline)}
.compare-skeleton.is-tall{height:186px}
.compare-error{background:var(--card);border:1px solid var(--coral);border-left:3px solid var(--coral);border-radius:18px;
  padding:var(--cmp-panel-pad);box-shadow:var(--shadow);font-size:.86rem;line-height:1.6;color:var(--muted)}
.compare-error strong{display:block;font-family:var(--serif);font-weight:600;font-size:1.1rem;color:var(--ink);margin-bottom:5px}

/* ---- the faceoff: two bench cards and a spine ---- */
.compare-faceoff{display:grid;grid-template-columns:1fr auto 1fr;gap:16px;align-items:stretch;margin-top:4px}
.compare-player-bench{position:relative;overflow:hidden;background:var(--card);border:1px solid var(--border);
  border-radius:18px;box-shadow:var(--shadow);padding:var(--cmp-panel-pad);min-width:0}
.compare-player-bench::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--cmp-b)}
.compare-player-bench[data-side="a"]::before{background:var(--cmp-a)}
.compare-player-bench[data-side="b"]::before{background:var(--cmp-b)}
/* the action shot only arrives once it has loaded, so it can never be a
   broken image; until then the card is simply a clean panel */
.compare-player-bench::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:0;opacity:.1;
  background-image:var(--action-shot,none);background-size:cover;background-position:68% 16%;
  mask-image:linear-gradient(255deg,#000 0%,transparent 52%);
  -webkit-mask-image:linear-gradient(255deg,#000 0%,transparent 52%)}
:root[data-theme="dark"] .compare-player-bench::after{opacity:.17}
.compare-player-content{position:relative;z-index:1;display:flex;gap:16px;align-items:flex-start}
.compare-portrait-wrap{position:relative;flex:none}
.compare-portrait-wrap .mug,.compare-portrait-wrap .mono-fb{width:76px;height:76px;border-radius:50%;
  border:1px solid var(--border);background:var(--card2)}
.compare-visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.compare-team-mark{position:absolute;right:-5px;bottom:-4px;width:26px;height:26px;display:grid;place-items:center;
  border-radius:50%;background:var(--card);border:1px solid var(--border)}
.compare-team-mark img{width:19px;height:19px;object-fit:contain}
.compare-team-mark .crest-fb{width:19px;height:19px;font-size:.4rem}
.compare-player-copy{min-width:0;flex:1}
.compare-player-code{font-family:var(--mono);font-size:.55rem;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:var(--cmp-b)}
.compare-player-bench[data-side="a"] .compare-player-code{color:var(--cmp-a)}
.compare-player-bench[data-side="b"] .compare-player-code{color:var(--cmp-b)}
.compare-player-bench h2{font-family:var(--serif);font-weight:600;font-size:1.5rem;line-height:1.08;margin:4px 0 6px;
  letter-spacing:-.008em}
.compare-player-meta{font-size:.72rem;line-height:1.55;color:var(--muted);font-weight:500}
.compare-scoreline{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin-top:12px;
  padding-top:11px;border-top:1px solid var(--hairline)}
.compare-scoreline div{min-width:0}
.compare-scoreline strong{display:block;font-family:var(--serif);font-weight:700;font-size:1.28rem;line-height:1;
  font-variant-numeric:tabular-nums}
.compare-scoreline span{display:block;font-size:.48rem;font-weight:900;letter-spacing:.16em;text-transform:uppercase;
  color:var(--muted);margin-top:5px}

.compare-centre-spine{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:9px;
  padding:0 2px;width:76px}
.compare-vs-puck{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;flex:none;
  background:var(--ink);color:var(--field);font-family:var(--mono);font-size:.66rem;font-weight:700;letter-spacing:.06em}
.compare-no-composite{font-size:.46rem;font-weight:900;letter-spacing:.15em;text-transform:uppercase;
  color:var(--muted);text-align:center;line-height:1.45}

/* =========================================================================
   4 · THE LEAD LEDGER
   A count of directional rows. Never a score — the strip says so twice,
   and the guard paragraph is part of the feature, not fine print.
   ========================================================================= */
.cmp-leads{background:var(--card);border:1px solid var(--border);border-radius:18px;box-shadow:var(--shadow);
  padding:var(--cmp-panel-pad);margin-top:16px}
.cl-head{display:flex;align-items:baseline;justify-content:space-between;gap:14px;flex-wrap:wrap}
.cl-k{font-family:var(--serif);font-weight:600;font-size:1.22rem;line-height:1.1}
.cl-note{font-family:var(--mono);font-size:.6rem;letter-spacing:.05em;color:var(--muted)}
.cl-note::before{content:"◷ ";color:var(--gold)}
.cl-bar{display:flex;height:12px;border-radius:7px;overflow:hidden;background:var(--track);margin-top:13px}
.cl-bar i{display:block;height:100%;transition:width .55s cubic-bezier(.2,.8,.2,1)}
.cl-fa{background:var(--cmp-a)}
.cl-fb{background:var(--cmp-b)}
.cl-fe{background:var(--cmp-level)}
.cl-fa + i,.cl-fe + i{box-shadow:inset 1px 0 0 var(--card)}
.cl-tally{display:grid;grid-template-columns:1fr auto 1fr;gap:12px;margin-top:14px;align-items:start}
.cl-cell{min-width:0}
.cl-cell[data-side="b"]{text-align:right}
.cl-cell[data-side="e"]{text-align:center}
.cl-cell b{display:block;font-family:var(--serif);font-weight:700;font-size:2.05rem;line-height:1;
  font-variant-numeric:tabular-nums;color:var(--muted)}
.cl-cell[data-side="a"] b{color:var(--cmp-a)}
.cl-cell[data-side="b"] b{color:var(--cmp-b)}
.cl-cell[data-side="e"] b{color:var(--muted);font-size:1.4rem;padding-top:.4rem}
.cl-cell span{display:block;font-size:.55rem;font-weight:900;letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted);margin-top:6px;line-height:1.5}
.cl-rooms{list-style:none;margin:16px 0 0;padding-top:13px;border-top:1px solid var(--hairline);display:grid;gap:8px}
.cl-rooms li{display:grid;grid-template-columns:minmax(96px,150px) 1fr auto;gap:12px;align-items:center}
.cl-room-k{font-size:.55rem;font-weight:900;letter-spacing:.13em;text-transform:uppercase;color:var(--muted)}
.cl-room-bar{display:flex;height:7px;border-radius:4px;overflow:hidden;background:var(--track)}
.cl-room-bar i{display:block;height:100%;background:var(--cmp-level)}
.cl-room-bar i.is-a{background:var(--cmp-a)}
.cl-room-bar i.is-b{background:var(--cmp-b)}
.cl-room-n{font-family:var(--mono);font-size:.7rem;font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums}
.cl-room-n em{color:var(--muted);padding:0 3px}
.cl-guard{font-size:.74rem;line-height:1.62;color:var(--muted);margin-top:14px;padding-top:12px;
  border-top:1px solid var(--hairline);font-weight:500}
.cmp-leads.is-empty .cl-k{margin-bottom:7px}
.cl-empty{font-size:.8rem;line-height:1.6;color:var(--muted);font-weight:500;
  border-left:2px solid var(--blue);padding-left:12px}

/* =========================================================================
   5 · ROOM NAV + ROOMS
   ========================================================================= */
.compare-room-nav{display:flex;gap:7px;flex-wrap:wrap;margin:22px 0 4px;position:sticky;top:var(--mast);z-index:12;
  padding:9px 0;background:linear-gradient(var(--field) 72%,transparent)}
.compare-room-nav a{font-family:var(--mono);font-size:.58rem;font-weight:700;letter-spacing:.11em;text-transform:uppercase;
  padding:6px 12px;border-radius:999px;border:1px solid var(--border);background:var(--card);color:var(--muted);
  transition:all .15s;white-space:nowrap}
.compare-room-nav a:hover{color:var(--blue);border-color:var(--blue)}

.compare-room{background:var(--card);border:1px solid var(--border);border-radius:18px;box-shadow:var(--shadow);
  padding:var(--cmp-panel-pad);margin-top:16px;scroll-margin-top:100px;position:relative;overflow:hidden}
.compare-room::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--room-accent,var(--blue))}
.compare-room-header{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:14px 28px;align-items:start;
  padding-bottom:14px;border-bottom:1px solid var(--hairline)}
.compare-room-kicker{font-family:var(--mono);font-size:.55rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--room-accent,var(--blue))}
.compare-room h3{font-family:var(--serif);font-weight:600;font-size:1.62rem;line-height:1.1;margin:5px 0 7px}
.compare-source-tag{display:inline-block;font-family:var(--mono);font-size:.55rem;font-weight:700;letter-spacing:.06em;
  color:var(--muted);background:var(--card2);border:1px solid var(--hairline);border-radius:999px;padding:4px 10px}
.compare-room-intro{font-size:.82rem;line-height:1.65;color:var(--muted);font-weight:500;padding-top:2px}

.compare-subhead{margin:18px 0 10px}
.compare-subhead h4{font-family:var(--serif);font-weight:600;font-size:1.02rem;line-height:1.2;
  display:flex;align-items:center;gap:12px}
.compare-subhead h4::after{content:"";flex:1;height:1px;background:var(--hairline)}

/* =========================================================================
   6 · DUEL BOARD + GAP BARS
   Two figures alone hide the size of a difference, so every directional
   row draws it: a centre-anchored bar whose length is the gap as a share
   of the two figures combined, with the exact difference printed beside.
   ========================================================================= */
.compare-duel-board{display:grid;gap:2px}
.compare-duel-row{position:relative;display:grid;grid-template-columns:minmax(74px,1fr) minmax(0,1.5fr) minmax(74px,1fr);
  gap:12px;align-items:center;padding:9px 11px;border-radius:11px;
  transition:background-color var(--mo-fast,120ms) var(--mo-ease,ease)}
.compare-duel-row:nth-child(odd){background:var(--card2)}
.compare-duel-row:hover,.compare-duel-row:focus-within{background:var(--blue-soft)}

/* ---- ROW INSPECT ----
   Hovering a row lights BOTH figures — a comparison is never one cell —
   and promotes the gap from a caption to a stated number. The figure is
   already in the DOM at full precision; hover changes weight, never
   value. */
.compare-duel-row:hover .compare-duel-value,
.compare-duel-row:focus-within .compare-duel-value{box-shadow:inset 0 -2px 0 var(--cmp-level)}
.compare-duel-row:hover .compare-duel-value.is-edge[data-side="a"],
.compare-duel-row:focus-within .compare-duel-value.is-edge[data-side="a"]{box-shadow:inset 0 -2px 0 var(--cmp-a)}
.compare-duel-row:hover .compare-duel-value.is-edge[data-side="b"],
.compare-duel-row:focus-within .compare-duel-value.is-edge[data-side="b"]{box-shadow:inset 0 -2px 0 var(--cmp-b)}
.compare-duel-row:hover .cdg-delta,
.compare-duel-row:focus-within .cdg-delta{color:var(--ink);font-weight:800}
.compare-duel-row:hover .cdg-delta::before,
.compare-duel-row:focus-within .cdg-delta::before{content:"gap ";color:var(--muted);font-weight:600}
.compare-duel-row[data-lead="even"]:hover .cdg-delta::before,
.compare-duel-row[data-lead="even"]:focus-within .cdg-delta::before{content:""}
/* both figures stay fully legible: the smaller number is not dimmed, it is
   simply not tinted. Dimming would be a judgment this page does not make. */
.compare-duel-value{font-family:var(--mono);font-size:1.02rem;font-weight:700;color:var(--ink);
  font-variant-numeric:tabular-nums;line-height:1.15}
.compare-duel-value[data-side="b"]{text-align:right}
.compare-duel-value.is-edge[data-side="a"]{color:var(--cmp-a)}
.compare-duel-value.is-edge[data-side="b"]{color:var(--cmp-b)}
.compare-duel-label{min-width:0;text-align:center}
.compare-duel-label strong{display:block;font-size:.72rem;font-weight:800;letter-spacing:.03em;color:var(--ink);line-height:1.3}
.compare-duel-label small{display:block;font-family:var(--mono);font-size:.53rem;letter-spacing:.04em;color:var(--muted);margin-top:2px}

.compare-duel-gap{display:block;margin-top:6px}
.cdg-track{display:block;position:relative;height:6px;border-radius:4px;background:var(--track);overflow:hidden}
.cdg-track::after{content:"";position:absolute;left:50%;top:0;bottom:0;width:1px;background:var(--border)}
.cdg-track i{position:absolute;top:0;bottom:0;display:block;border-radius:4px;
  transition:width .5s cubic-bezier(.2,.8,.2,1)}
.compare-duel-gap[data-lead="a"] .cdg-track i{right:50%;background:var(--cmp-a)}
.compare-duel-gap[data-lead="b"] .cdg-track i{left:50%;background:var(--cmp-b)}
.compare-duel-gap[data-lead="even"] .cdg-track i{display:none}
.cdg-delta{display:block;font-family:var(--mono);font-size:.55rem;font-weight:700;letter-spacing:.05em;
  color:var(--muted);margin-top:4px;font-variant-numeric:tabular-nums}
.compare-gap-key{font-family:var(--mono);font-size:.56rem;line-height:1.6;color:var(--muted);margin-top:9px;
  padding-left:11px;border-left:2px solid var(--hairline)}

/* ---- native-unit profile cards (skater vs goalie) ---- */
.compare-profile-grids{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:14px}
.compare-profile-card{background:var(--card2);border:1px solid var(--hairline);border-radius:14px;padding:15px 17px}
.compare-profile-card[data-side="a"]{border-left:3px solid var(--cmp-a)}
.compare-profile-card[data-side="b"]{border-left:3px solid var(--cmp-b)}
.compare-profile-card h4{font-family:var(--serif);font-weight:600;font-size:.98rem;line-height:1.2}
.compare-profile-stat-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:11px}
.compare-profile-stat strong{display:block;font-family:var(--mono);font-size:.92rem;font-weight:700;
  font-variant-numeric:tabular-nums;line-height:1.1}
.compare-profile-stat span{display:block;font-size:.48rem;font-weight:900;letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted);margin-top:4px}

/* ---- career rate arc ---- */
.compare-chart-legend{display:flex;gap:16px;flex-wrap:wrap;align-items:center;margin:4px 0 10px;
  font-family:var(--mono);font-size:.58rem;letter-spacing:.05em;color:var(--muted)}
.compare-chart-legend span{display:inline-flex;align-items:center;gap:7px}
.compare-chart-legend i{width:16px;height:3px;border-radius:2px;background:var(--line-color,var(--blue));display:block}
.compare-chart-wrap{overflow-x:auto;background:var(--card2);border:1px solid var(--hairline);border-radius:14px;padding:10px 12px}
.compare-chart-wrap svg{display:block;min-width:620px;width:100%;height:auto}
.compare-chart-grid{stroke:var(--hairline);stroke-width:1}
.compare-chart-axis{fill:var(--muted);font-family:var(--mono);font-size:10px}
.compare-chart-line-a,.compare-chart-line-b{fill:none;stroke-width:2.2;stroke-linejoin:round;stroke-linecap:round}
.compare-chart-line-a{stroke:var(--cmp-a)}
.compare-chart-line-b{stroke:var(--cmp-b)}
/* B is drawn dashed as well as blue: the two series stay separable in
   greyscale, on a projector, and for a reader who cannot split the hues. */
.compare-chart-line-b{stroke-dasharray:7 4}
.compare-chart-dot-a{fill:var(--cmp-a)}
.compare-chart-dot-b{fill:var(--cmp-b)}

/* ---- season ledgers ---- */
.compare-season-ledger{margin-top:16px;border-top:1px solid var(--hairline);padding-top:13px}
.compare-season-ledger summary{cursor:pointer;font-size:.62rem;font-weight:900;letter-spacing:.13em;text-transform:uppercase;
  color:var(--blue);list-style:none;display:inline-flex;align-items:center;gap:8px}
.compare-season-ledger summary::-webkit-details-marker{display:none}
.compare-season-ledger summary::before{content:"+";font-family:var(--mono);font-size:.8rem;line-height:1}
.compare-season-ledger[open] summary::before{content:"–"}
.compare-season-ledgers{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:14px}
.compare-season-ledgers h4{font-family:var(--serif);font-weight:600;font-size:.98rem;margin-bottom:8px}

/* ---- tables ---- */
.compare-table-wrap{overflow-x:auto;border:1px solid var(--hairline);border-radius:14px;background:var(--card2)}
table.compare-table{width:100%;border-collapse:separate;border-spacing:0;font-variant-numeric:tabular-nums}
table.compare-table th,table.compare-table td{text-align:right;padding:8px 10px;white-space:nowrap}
table.compare-table th:first-child,table.compare-table td:first-child{text-align:left}
table.compare-table thead th{background:var(--card);border-bottom:1px solid var(--border);
  font-size:.52rem;font-weight:900;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);padding:10px}
table.compare-table thead th.is-a{color:var(--cmp-a)}
table.compare-table thead th.is-b{color:var(--cmp-b)}
table.compare-table tbody td{border-bottom:1px solid var(--hairline);font-family:var(--mono);font-size:.74rem;
  font-weight:600;color:var(--ink)}
table.compare-table tbody tr:last-child td{border-bottom:0}
table.compare-table tbody tr:hover td{background:var(--blue-soft)}
.compare-opponent-team{display:inline-flex;align-items:center;gap:8px;font-weight:700}
.compare-opponent-team img{width:20px;height:20px;object-fit:contain;flex:none}
.compare-opponent-team .crest-fb{width:20px;height:20px;font-size:.42rem}
.compare-gap{font-family:var(--mono);font-size:.7rem;font-weight:700;color:var(--muted)}
.compare-gap.is-a{color:var(--cmp-a)}
.compare-gap.is-b{color:var(--cmp-b)}
.compare-opponent-toolbar{display:flex;align-items:flex-end;justify-content:space-between;gap:14px;flex-wrap:wrap;
  margin:16px 0 12px}
.compare-opponent-toolbar p{font-family:var(--mono);font-size:.6rem;letter-spacing:.04em;color:var(--muted)}
.compare-selector-field{display:flex;flex-direction:column;gap:5px}
.compare-selector-label{font-size:.5rem;font-weight:900;letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}
.compare-opponent-sort{background:var(--card2);border:1px solid var(--border);border-radius:10px;padding:7px 11px;
  font-size:.75rem;font-weight:700;color:var(--ink);font-family:var(--sans)}
.compare-opponent-sort:hover{border-color:var(--muted)}

/* ---- deployment lanes ---- */
.compare-strength-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:16px}
.compare-strength-card{background:var(--card2);border:1px solid var(--hairline);border-radius:14px;padding:15px 16px;
  border-top:3px solid var(--lane-color,var(--blue))}
.compare-strength-card h4{font-family:var(--serif);font-weight:600;font-size:1rem;line-height:1.2}
.compare-strength-label{font-family:var(--mono);font-size:.53rem;letter-spacing:.05em;color:var(--muted);margin:3px 0 9px}
.compare-strength-row{display:grid;grid-template-columns:1fr auto 1fr;gap:9px;align-items:baseline;padding:6px 0;
  border-top:1px solid var(--hairline)}
.compare-strength-row strong{font-family:var(--mono);font-size:.78rem;font-weight:700;font-variant-numeric:tabular-nums}
.compare-strength-row strong:first-child{color:var(--cmp-a)}
.compare-strength-row strong:last-child{color:var(--cmp-b);text-align:right}
.compare-strength-row span{font-size:.5rem;font-weight:900;letter-spacing:.11em;text-transform:uppercase;color:var(--muted);
  text-align:center}

/* ---- evidence ledger ---- */
.compare-source-ledger{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-top:16px}
.compare-source-card{background:var(--card2);border:1px solid var(--hairline);border-radius:14px;padding:16px 18px}
.compare-status-chip{display:inline-block;font-family:var(--mono);font-size:.5rem;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;padding:3px 9px;border-radius:999px;border:1px solid var(--mint);color:var(--mint);
  background:var(--mint-soft)}
.compare-status-chip.is-missing{border-color:var(--coral);color:var(--coral);background:var(--coral-soft)}
.compare-source-card h4{font-family:var(--serif);font-weight:600;font-size:1.05rem;margin:8px 0 6px}
.compare-source-card p{font-size:.76rem;line-height:1.6;color:var(--muted);font-weight:500;margin-bottom:6px}
.compare-ledger-source{font-family:var(--mono);font-size:.56rem;letter-spacing:.04em;color:var(--muted);
  padding-top:8px;border-top:1px solid var(--hairline)}
.compare-ledger-source::before{content:"◷ ";color:var(--gold)}

/* ---- boundary, exclusion, source and empty notes ---- */
.compare-boundary-note,.compare-exclusion-note,.compare-source-note{font-size:.76rem;line-height:1.62;color:var(--muted);
  font-weight:500;margin-top:14px;padding:11px 14px;border-radius:12px;background:var(--card2);
  border:1px solid var(--hairline);border-left:2px solid var(--border)}
.compare-exclusion-note{border-left-color:var(--coral)}
.compare-source-note{border-left-color:var(--blue)}
.compare-boundary-note strong,.compare-exclusion-note strong,.compare-source-note strong{color:var(--ink);font-weight:800}
.compare-empty{background:var(--card2);border:1px dashed var(--border);border-radius:14px;padding:18px 20px;margin-top:14px;
  font-size:.78rem;line-height:1.6;color:var(--muted);font-weight:500}
.compare-empty strong{display:block;font-family:var(--serif);font-weight:600;font-size:1.02rem;color:var(--ink);margin-bottom:4px}
.compare-page-footnote{font-size:.76rem;line-height:1.62;color:var(--muted);font-weight:500;margin-top:20px;
  padding-left:13px;border-left:2px solid var(--blue)}

/* =========================================================================
   7 · METHOD SECTION
   ========================================================================= */
.compare-kicker{font-family:var(--mono);font-size:.55rem;font-weight:700;letter-spacing:.17em;text-transform:uppercase;
  color:var(--blue);margin-top:14px}
.compare-method-intro{font-size:.86rem;line-height:1.7;color:var(--muted);font-weight:500;max-width:88ch;margin-top:8px}
.compare-method-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-top:18px}
.compare-method-grid article{background:var(--card);border:1px solid var(--border);border-radius:18px;
  box-shadow:var(--shadow);padding:18px 20px}
.compare-method-grid i{display:block;font-family:var(--mono);font-size:.53rem;font-weight:700;letter-spacing:.15em;
  text-transform:uppercase;color:var(--blue)}
/* <i> is a neutral eyebrow hook on this page, never a slant — without this
   guard the browser's default italic leaks through, since nothing else in
   this sheet sets font-style at all. Loaded by /compare/ and /ranks/; the
   bare selector is safe anywhere -- upright is site-wide law. */
i,em{font-style:normal}
.compare-method-grid b{display:block;font-family:var(--serif);font-weight:600;font-size:1.06rem;line-height:1.2;margin:7px 0 7px}
.compare-method-grid p{font-size:.75rem;line-height:1.62;color:var(--muted);font-weight:500}

/* =========================================================================
   7b · CHOREOGRAPHY — the matchup assembling

   One sequence, played once per matchup, on the object the page is about.
   The two halves arrive from their own sides, the puck drops between
   them, then the lead line and the verdict settle. Nothing else on the
   page animates on entry.

   Rules kept: no FIGURE is ever animated. Every number in the hero, the
   ledger and the rooms is rendered final in the first frame — the motion
   moves geometry and opacity only, so a reader who never sees the
   animation reads exactly the same page. Under reduced motion the whole
   section is inert and the content is already complete.
   ========================================================================= */
@keyframes cmp-in-a{from{opacity:0;transform:translate3d(-14%,0,0)}to{opacity:1;transform:none}}
@keyframes cmp-in-b{from{opacity:0;transform:translate3d(14%,0,0)}to{opacity:1;transform:none}}
@keyframes cmp-drop{from{opacity:0;transform:scale(.4)}to{opacity:1;transform:none}}
@keyframes cmp-settle{from{opacity:0;transform:translate3d(0,7px,0)}to{opacity:1;transform:none}}

.cmp-vs-body.is-assembling .cvs-side[data-side="a"]{animation:cmp-in-a var(--mo-slow,400ms) var(--mo-ease,ease) both}
.cmp-vs-body.is-assembling .cvs-side[data-side="b"]{animation:cmp-in-b var(--mo-slow,400ms) var(--mo-ease,ease) both}
.cmp-vs-body.is-assembling .cvs-split{animation:cmp-drop var(--mo-base,240ms) cubic-bezier(.34,1.56,.64,1) both;
  animation-delay:var(--mo-slow,400ms)}
.cmp-vs-body.is-assembling .cvs-foot{animation:cmp-settle var(--mo-base,240ms) var(--mo-ease,ease) both;
  animation-delay:calc(var(--mo-slow,400ms) + var(--mo-stagger,42ms) * 2)}
.cmp-verdict.is-assembling .cmp-verdict-line{animation:cmp-settle var(--mo-base,240ms) var(--mo-ease,ease) both;
  animation-delay:calc(var(--mo-slow,400ms) + var(--mo-stagger,42ms))}
.cmp-verdict.is-assembling .cmp-verdict-note{animation:cmp-settle var(--mo-base,240ms) var(--mo-ease,ease) both;
  animation-delay:calc(var(--mo-slow,400ms) + var(--mo-stagger,42ms) * 3)}
/* the "who leads what" rows cascade last, one --mo-stagger apart, capped
   so a long ledger never turns into a wait */
.cmp-leads.is-assembling .cl-rooms li{animation:cmp-settle var(--mo-base,240ms) var(--mo-ease,ease) both;
  animation-delay:calc(var(--mo-stagger,42ms) * var(--cmp-i,0))}
.cmp-leads.is-assembling .cl-tally > *{animation:cmp-settle var(--mo-base,240ms) var(--mo-ease,ease) both}
.cmp-leads.is-assembling .cl-tally > *:nth-child(2){animation-delay:var(--mo-stagger,42ms)}
.cmp-leads.is-assembling .cl-tally > *:nth-child(3){animation-delay:calc(var(--mo-stagger,42ms) * 2)}

/* =========================================================================
   7c · SCROLL-DRIVEN DRAW-IN

   Progressive enhancement only, and only on GEOMETRY. Where the engine
   supports a view() timeline, each gap bar grows out of its centre line
   as the row enters the reading area; where it does not, the bar is
   simply already drawn. The printed difference beside it is static text
   in both cases and never counts up.
   ========================================================================= */
@supports (animation-timeline: view()){
  @media not (prefers-reduced-motion: reduce){
    @keyframes cmp-draw{from{transform:scaleX(0)}to{transform:scaleX(1)}}
    #compareShell .cdg-track i{
      animation:cmp-draw linear both;
      animation-timeline:view();
      animation-range:entry 10% cover 26%;
    }
    #compareShell .compare-duel-gap[data-lead="a"] .cdg-track i{transform-origin:100% 50%}
    #compareShell .compare-duel-gap[data-lead="b"] .cdg-track i{transform-origin:0 50%}
    #compareShell .cl-bar i,#compareShell .cl-room-bar i{
      animation:cmp-draw linear both;
      animation-timeline:view();
      animation-range:entry 20% cover 30%;
      transform-origin:0 50%;
    }
  }
}

/* ---- View Transition targets ----
   HIMotion.swap re-renders the stage inside a View Transition. Naming the
   two bench cards and the lead ledger gives each of them its own morph,
   so a changed player slides its panel into the new one instead of the
   whole page cross-fading. Reduced motion never starts a transition at
   all (HIMotion.swap renders straight through), and a name on an element
   that is not being animated costs nothing. */
@media not (prefers-reduced-motion: reduce){
  #compareShell .compare-player-bench[data-side="a"]{view-transition-name:cmp-bench-a}
  #compareShell .compare-player-bench[data-side="b"]{view-transition-name:cmp-bench-b}
  #compareShell .cmp-leads{view-transition-name:cmp-leads}
}

/* =========================================================================
   8 · RESPONSIVE
   ========================================================================= */
@media(max-width:1080px){
  .compare-method-grid{grid-template-columns:1fr 1fr}
  .compare-room-header{grid-template-columns:1fr}
}
/* the desk folds in one step, and only once: search across the top, then
   position / A / swap / B beneath it. Still a desk, never a column. */
@media(max-width:1040px){
  .cmp-desk{grid-template-columns:minmax(110px,140px) minmax(0,1fr) 44px minmax(0,1fr) auto}
  .cmp-find{grid-column:1/-1;grid-row:1}
  .cmp-c-pos{grid-row:2}
  .cmp-slotcell{grid-row:2}
  .cmp-swapcell{grid-row:2}
  .cmp-actcell{grid-row:2}
  .cmp-results{min-width:0}
}
@media(max-width:900px){
  .compare-faceoff{grid-template-columns:1fr;gap:12px}
  .compare-centre-spine{flex-direction:row;width:auto;gap:14px;padding:2px 0}
  .compare-strength-grid{grid-template-columns:1fr}
  .compare-source-ledger{grid-template-columns:1fr}
  .compare-season-ledgers{grid-template-columns:1fr}
  .compare-profile-grids{grid-template-columns:1fr}
}
@media(max-width:640px){
  .cvs{grid-template-columns:1fr;grid-template-rows:auto 32px auto}
  .cvs-split{margin:-4px 0}
  .cvs-line b{font-size:.88rem}
  .cmp-desk{grid-template-columns:minmax(0,1fr) 44px minmax(0,1fr);gap:9px 8px}
  .cmp-find{grid-column:1/-1;grid-row:1}
  .cmp-c-pos{grid-column:1/-1;grid-row:2}
  .cmp-slotcell{grid-row:3}
  .cmp-swapcell{grid-row:3}
  .cmp-actcell{grid-column:1/-1;grid-row:4}
  .cmp-verdict .in{padding:15px 18px 14px}
  .cmp-link{max-width:100%;overflow:hidden;text-overflow:ellipsis}
  .cmp-keys{display:none}
  .compare-room,.cmp-leads,.compare-player-bench{padding:17px 16px}
  .compare-player-content{flex-direction:column;gap:12px}
  .compare-player-bench h2{font-size:1.28rem}
  .compare-duel-row{grid-template-columns:minmax(56px,1fr) minmax(0,1.35fr) minmax(56px,1fr);gap:8px;padding:8px 6px}
  .compare-duel-value{font-size:.86rem}
  .compare-duel-label strong{font-size:.66rem}
  .cl-tally{grid-template-columns:1fr auto 1fr;gap:8px}
  .cl-cell b{font-size:1.55rem}
  .cl-cell span{font-size:.47rem;letter-spacing:.1em}
  .cl-rooms li{grid-template-columns:1fr auto;gap:6px 10px}
  .cl-room-bar{grid-column:1/-1;order:3}
  .compare-method-grid{grid-template-columns:1fr}
  .compare-room h3{font-size:1.32rem}
  .compare-room-nav{position:static;background:none;padding:6px 0}
  .compare-scoreline{grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}
  .compare-scoreline strong{font-size:1.06rem}
}

/* =========================================================================
   9 · REDUCED MOTION — every transition on this page is decoration
   ========================================================================= */
@media (prefers-reduced-motion: reduce){
  .cl-bar i,.cdg-track i,.compare-duel-row,.cmp-hit,.cmp-recent button,
  .compare-room-nav a,.cmp-hit-acts button,.cmp-ctl,.cmp-copy{transition:none}
  /* the matchup does not assemble; it is simply there, complete, in the
     first frame. Every figure, bar and line is already final. */
  .cmp-vs-body.is-assembling .cvs-side,
  .cmp-vs-body.is-assembling .cvs-split,
  .cmp-vs-body.is-assembling .cvs-foot,
  .cmp-verdict.is-assembling .cmp-verdict-line,
  .cmp-verdict.is-assembling .cmp-verdict-note,
  .cmp-leads.is-assembling .cl-rooms li,
  .cmp-leads.is-assembling .cl-tally > *{animation:none}
}

/* ============================================================
   ELEVATION (dark) — hi-tokens.css §1/§8
   The picker result list is a POPOVER: it floats over the panel
   below it, so in dark it climbs to --hi-surface-2 with the
   ambient halo and a rim-light top edge. The bench cards and
   room panels below it rest in the page flow and stay put.
   ============================================================ */
:root[data-theme="dark"] .cmp-results {
  background: var(--hi-surface-2);
  border-color: var(--hi-line);
  border-top-color: rgba(157, 184, 221, 0.30);
  box-shadow: var(--hi-ambient), var(--hi-lift);
}

/* =========================================================================
   10 · VISUAL MODES (?mode=1..5) — dev exploration block

   Every selector below is scoped to :root[data-mode="1".."5"], so mode 0
   (the shipped room) is untouched and this whole block is removable in
   one cut. Each mode owns the top of the stage: it is the lead visual,
   and the shipped modules below it demote rather than disappear.

   House law holds inside here: Newsreader UPRIGHT, no italics, no gold,
   ink navy A / mid blue B as the value pair, mint only as a semantic
   leader marker, no composite score anywhere.
   ========================================================================= */

/* ---- shared mode furniture ---- */
.cmp-mode{
  position:relative;background:var(--card);border:1px solid var(--border);
  border-radius:20px;padding:24px 26px 26px;margin:0 0 20px;
  box-shadow:0 1px 2px rgba(13,31,60,.05),0 14px 34px -22px rgba(13,31,60,.28);
}
:root[data-theme="dark"] .cmp-mode{background:var(--hi-surface-1);border-color:var(--hi-line);
  box-shadow:var(--hi-ambient),var(--hi-lift)}
.cmm-head{max-width:74ch;margin:0 0 20px}
.cmm-k{font-family:var(--mono);font-size:.56rem;font-weight:700;letter-spacing:.18em;
  text-transform:uppercase;color:var(--blue);margin:0 0 7px}
.cmm-head h3{font-family:var(--serif);font-style:normal;font-weight:600;font-size:clamp(1.4rem,2.5vw,2rem);
  line-height:1.12;letter-spacing:-.015em;color:var(--ink);margin:0 0 9px}
.cmm-head h3 b{font-weight:700;color:var(--blue)}
.cmm-dek{font-size:.83rem;line-height:1.5;color:var(--muted);margin:0}
.cmm-empty{font-size:.85rem;line-height:1.55;color:var(--muted);margin:0;max-width:66ch}
.cmp-mode.is-empty{padding:20px 22px}

/* =========================================================================
   MODE 1 · THE DUEL RADAR
   The hero object is a shape, not a list. Two translucent polygons over
   one percentile field; the leader vertex on each axis carries a lit
   halo; a readout in the middle of the field answers the hovered or
   focused spoke with both raw figures and the exact gap.
   ========================================================================= */
:root[data-mode="1"] .cmp-radar{padding:26px 28px 24px}
.dr-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(300px,.95fr);gap:26px;align-items:start}
.dr-stage{position:relative;min-width:0}
.dr-svg{display:block;width:100%;height:auto;overflow:visible}

/* the field: two hairline weights only, exactly like every other chart */
.dr-ring{fill:none;stroke:var(--hi-hair);stroke-width:1}
.dr-ring.is-edge{stroke:var(--border);stroke-width:1.4}
.dr-spoke{stroke:var(--hi-hair);stroke-width:1}
.dr-ringlbl{font-family:var(--mono);font-size:9px;letter-spacing:.08em;fill:var(--muted);opacity:.72}
.dr-axis{font-family:var(--mono);font-size:10.5px;font-weight:700;letter-spacing:.09em;
  text-transform:uppercase;fill:var(--muted);transition:fill .18s ease}
.dr-axis.is-open{fill:var(--ink)}

/* the two shapes. Translucent so the overlap is a third readable region;
   A is drawn under B so the lighter blue edge always stays findable. */
.dr-shape{stroke-width:2.4;stroke-linejoin:round}
.dr-shape.is-a{fill:var(--cmp-a);fill-opacity:.20;stroke:var(--cmp-a)}
.dr-shape.is-b{fill:var(--cmp-b);fill-opacity:.20;stroke:var(--cmp-b)}
:root[data-theme="dark"] .dr-shape.is-a{fill-opacity:.16}
:root[data-theme="dark"] .dr-shape.is-b{fill-opacity:.18}

.dr-node .dr-dot{stroke:var(--card);stroke-width:1.6}
.dr-node[data-side="a"] .dr-dot{fill:var(--cmp-a)}
.dr-node[data-side="b"] .dr-dot{fill:var(--cmp-b)}
.dr-node[data-side="a"] .dr-halo{fill:var(--cmp-a);opacity:.16}
.dr-node[data-side="b"] .dr-halo{fill:var(--cmp-b);opacity:.18}
.dr-node.is-lit .dr-dot{stroke-width:2.2}
.dr-node.is-open .dr-dot{r:7}
.dr-node.is-open .dr-halo{opacity:.3}

.dr-hit{fill:transparent;cursor:pointer;outline:none}
.dr-hit:focus-visible{fill:var(--hi-blue-soft);fill-opacity:.5;stroke:var(--blue);stroke-width:1.5}
:root[data-theme="dark"] .dr-hit:focus-visible{fill:rgba(77,143,232,.18);fill-opacity:1}

/* the readout sits in the middle of the field, where the eye already is */
.dr-read{position:absolute;left:50%;top:48%;transform:translate(-50%,-50%);
  width:min(210px,46%);text-align:center;pointer-events:none;
  background:var(--card);border:1px solid var(--border);border-radius:14px;padding:11px 12px 10px;
  box-shadow:0 10px 26px -18px rgba(13,31,60,.5)}
:root[data-theme="dark"] .dr-read{background:var(--hi-surface-2);border-color:var(--hi-line)}
.drr-k{font-family:var(--mono);font-size:.53rem;font-weight:700;letter-spacing:.13em;
  text-transform:uppercase;color:var(--muted);margin:0 0 7px}
.drr-pair{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.drr-pair span{display:flex;flex-direction:column;gap:2px;padding:5px 4px;border-radius:9px;
  border:1px solid transparent}
.drr-pair span[data-side="a"]{background:var(--cmp-a-soft)}
.drr-pair span[data-side="b"]{background:var(--cmp-b-soft)}
.drr-pair span.is-lead{border-color:var(--mint)}
.drr-pair b{font-family:var(--mono);font-size:1.02rem;font-weight:700;line-height:1;letter-spacing:-.01em}
.drr-pair span[data-side="a"] b{color:var(--cmp-a)}
.drr-pair span[data-side="b"] b{color:var(--cmp-b)}
.drr-pair i{font-style:normal;font-family:var(--mono);font-size:.48rem;letter-spacing:.08em;color:var(--muted)}
.drr-pair sup{font-size:.7em}
.drr-gap{font-size:.66rem;line-height:1.35;color:var(--muted);margin:8px 0 0}
.drr-gap b{font-family:var(--mono);font-weight:700;color:var(--ink)}

/* the side rail: the printed evidence the shape stands on */
.dr-side{min-width:0}
.dr-legend{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin:0 0 12px}
.dr-legend span{display:flex;align-items:center;gap:8px;padding:8px 10px;border-radius:11px;
  border:1px solid var(--border);min-width:0}
.dr-legend span.is-a{background:var(--cmp-a-soft)}
.dr-legend span.is-b{background:var(--cmp-b-soft)}
.dr-legend b{font-family:var(--sans);font-size:.75rem;font-weight:800;letter-spacing:-.005em;
  color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dr-legend .mug,.dr-legend .mono-fb{width:30px;height:30px;border-radius:50%;flex:0 0 auto}

.dr-ladder{list-style:none;margin:0;padding:0;border-top:1px solid var(--hi-hair)}
.dr-ladder li{display:grid;grid-template-columns:minmax(64px,1fr) minmax(0,1.5fr) minmax(64px,1fr);
  align-items:center;gap:10px;padding:9px 8px;border-bottom:1px solid var(--hi-hair);
  border-left:2px solid transparent;transition:background .16s ease,border-color .16s ease}
.dr-ladder li.is-open{background:var(--hi-surface-2);border-left-color:var(--mint)}
.drl-a,.drl-b{display:flex;flex-direction:column;gap:1px;font-family:var(--mono);font-weight:700;
  font-size:.9rem;line-height:1.05}
.drl-a{text-align:right;color:var(--cmp-a);align-items:flex-end}
.drl-b{text-align:left;color:var(--cmp-b);align-items:flex-start}
.drl-a i,.drl-b i{font-style:normal;font-size:.46rem;font-weight:600;letter-spacing:.09em;color:var(--muted)}
.drl-k{text-align:center;font-family:var(--mono);font-size:.55rem;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--muted);line-height:1.3}
.drl-k em{display:block;font-style:normal;font-size:.42rem;letter-spacing:.08em;opacity:.8;margin-top:2px}
/* the leader marker: mint, semantic, on the leader side of the row */
.dr-ladder li[data-lead="a"] .drl-a::after,
.dr-ladder li[data-lead="b"] .drl-b::after{content:"";width:6px;height:6px;border-radius:50%;
  background:var(--mint);margin-top:4px}
.dr-note{font-size:.63rem;line-height:1.5;color:var(--muted);margin:12px 0 0}

/* in mode 1 the shipped ledger demotes: it is the appendix now, not the
   lead. Nothing is removed — the rows just stop shouting. */
:root[data-mode="1"] #compareShell .compare-faceoff{gap:12px}
:root[data-mode="1"] #compareShell .compare-player-bench{padding:16px 18px}
:root[data-mode="1"] #compareShell .compare-player-bench h2{font-size:1.2rem}
:root[data-mode="1"] #compareShell .compare-duel-row{padding:7px 8px}
:root[data-mode="1"] #compareShell .compare-duel-value{font-size:.88rem}

@media(max-width:1080px){
  .dr-grid{grid-template-columns:1fr;gap:20px}
  .dr-read{width:min(190px,44%)}
}
@media(max-width:640px){
  .cmp-mode{padding:18px 16px 20px;border-radius:16px}
  .dr-read{position:static;transform:none;width:auto;margin:12px 0 0}
  .dr-axis{font-size:13px}
  .dr-legend{grid-template-columns:1fr}
  .dr-ladder li{grid-template-columns:minmax(54px,1fr) minmax(0,1.2fr) minmax(54px,1fr);gap:7px}
}

/* arrival: geometry and opacity only. Every figure in every mode is
   already final in the DOM before this runs, and reduced motion gets the
   finished frame with no animation at all. */
@media not (prefers-reduced-motion: reduce){
  @keyframes cmp-mode-in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
  @keyframes cmp-radar-grow{from{transform:scale(.72);opacity:0}to{transform:scale(1);opacity:1}}
  .cmp-mode{animation:cmp-mode-in 340ms cubic-bezier(.2,.7,.3,1) both}
  .dr-shape,.dr-nodes{transform-box:view-box;transform-origin:50% 48%;
    animation:cmp-radar-grow 520ms cubic-bezier(.2,.75,.25,1) both}
  .dr-shape.is-b{animation-delay:90ms}
  .dr-nodes{animation-delay:220ms;animation-duration:380ms}
  .dr-read{animation:cmp-mode-in 320ms 300ms cubic-bezier(.2,.7,.3,1) both}
}

/* ---- MODE 1, revision: the zoomed field, the donut hole, the plates ---- */
.dr-grid{grid-template-columns:minmax(0,1.3fr) minmax(280px,.7fr)}

/* the two nameplates. Franchise tint is a rail and a ghost crest only:
   no text sits on the tint, so every contrast read stays on --card. */
.dr-plates{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:0 0 20px}
.dr-plate{position:relative;overflow:hidden;display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:13px;
  padding:12px 15px;border-radius:14px;border:1px solid var(--border);
  background:linear-gradient(100deg,color-mix(in srgb,var(--tc) 15%,transparent) 0%,transparent 62%),var(--card)}
:root[data-theme="dark"] .dr-plate{background:
  linear-gradient(100deg,color-mix(in srgb,var(--tc) 26%,transparent) 0%,transparent 62%),var(--hi-surface-2)}
.dr-plate::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--tc)}
.dr-plate[data-side="a"]::after,.dr-plate[data-side="b"]::after{content:"";position:absolute;
  left:0;right:0;bottom:0;height:3px}
.dr-plate[data-side="a"]::after{background:var(--cmp-a)}
.dr-plate[data-side="b"]::after{background:var(--cmp-b)}
.dr-plate-ghost{position:absolute;right:-14px;top:50%;transform:translateY(-50%);
  opacity:.09;pointer-events:none;line-height:0}
:root[data-theme="dark"] .dr-plate-ghost{opacity:.14}
.dr-plate-mug{line-height:0;padding-left:5px}
.dr-plate-mug .mug,.dr-plate-mug .mono-fb{width:54px;height:54px;border-radius:50%;
  border:2px solid var(--card);box-shadow:0 3px 10px -6px rgba(13,31,60,.6)}
.dr-plate-id{display:flex;flex-direction:column;gap:2px;min-width:0}
.dr-plate-id i{font-style:normal;font-family:var(--mono);font-size:.5rem;font-weight:700;
  letter-spacing:.13em;text-transform:uppercase;color:var(--muted)}
.dr-plate-id b{font-family:var(--serif);font-style:normal;font-weight:600;font-size:1.22rem;
  line-height:1.08;letter-spacing:-.015em;color:var(--ink);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dr-plate-n{display:flex;flex-direction:column;align-items:flex-end;gap:1px;position:relative}
.dr-plate-n b{font-family:var(--mono);font-size:1.7rem;font-weight:700;line-height:1;letter-spacing:-.02em}
.dr-plate[data-side="a"] .dr-plate-n b{color:var(--cmp-a)}
.dr-plate[data-side="b"] .dr-plate-n b{color:var(--cmp-b)}
.dr-plate-n i{font-style:normal;font-family:var(--mono);font-size:.46rem;font-weight:600;
  letter-spacing:.11em;text-transform:uppercase;color:var(--muted)}

/* the axis ring reads as a circle of small results */
.dr-axis{font-size:11px}
.dr-axiswin{font-family:var(--mono);font-size:9.5px;font-weight:700;letter-spacing:.06em;
  fill:var(--muted);opacity:.9}
.dr-axisg[data-lead="a"] .dr-axiswin{fill:var(--cmp-a)}
.dr-axisg[data-lead="b"] .dr-axiswin{fill:var(--cmp-b)}
.dr-axisg.is-open .dr-axis{fill:var(--ink)}
.dr-axisg.is-open .dr-axiswin{font-size:10.5px}
.dr-ringlbl{font-size:8.5px}

/* the hole is real, so the readout sits in the field rather than over it */
.dr-read{width:min(178px,34%);top:50%;padding:10px 10px 9px;border-radius:50%;
  aspect-ratio:1;display:flex;flex-direction:column;justify-content:center;
  box-shadow:0 12px 30px -20px rgba(13,31,60,.55)}
.dr-hit.is-open{fill:var(--cmp-b);fill-opacity:.045}
.drr-k{font-size:.5rem;margin:0 0 5px}
.drr-pair{gap:5px}
.drr-pair span{padding:4px 2px;border-radius:7px}
.drr-pair b{font-size:.92rem}
.drr-pair i{font-size:.42rem}
.drr-gap{font-size:.58rem;margin:6px 0 0;line-height:1.3}

.dr-zoom{font-size:.63rem;line-height:1.5;color:var(--muted);margin:0 0 12px;
  padding:9px 11px;border-radius:10px;background:var(--hi-surface-2);
  border:1px solid var(--hi-hair)}
.dr-zoom b{font-family:var(--mono);font-size:.53rem;font-weight:700;letter-spacing:.11em;
  text-transform:uppercase;color:var(--blue)}

@media(max-width:1080px){
  .dr-grid{grid-template-columns:1fr}
  .dr-read{width:min(168px,32%)}
}
@media(max-width:720px){
  .dr-plates{grid-template-columns:1fr}
  .dr-plate-id b{font-size:1.1rem}
}
@media(max-width:640px){
  .dr-read{position:static;transform:none;width:auto;aspect-ratio:auto;border-radius:14px;margin:14px 0 0}
  .dr-axis{font-size:14px}
  .dr-axiswin{font-size:12px}
}

/* keep the label ring inside the card: the field is sized so the outer
   labels land inside the viewBox, and the stage no longer needs to spill */
.dr-svg{overflow:hidden}
.dr-shape.is-a{fill-opacity:.13}
.dr-shape.is-b{fill-opacity:.16}
:root[data-theme="dark"] .dr-shape.is-a{fill-opacity:.15}
:root[data-theme="dark"] .dr-shape.is-b{fill-opacity:.17}
.dr-hit.is-open{fill-opacity:.025}

/* The readout is centred with a transform, so it cannot borrow the shared
   arrival keyframe: cmp-mode-in ends at transform:none and would drop the
   centring on the last frame. It gets its own, which carries the translate
   through. (Caught in a headless pass — the dial sat low and right.) */
@media not (prefers-reduced-motion: reduce){
  @keyframes cmp-dial-in{
    from{opacity:0;transform:translate(-50%,-50%) scale(.86)}
    to{opacity:1;transform:translate(-50%,-50%) scale(1)}
  }
  .dr-read{animation:cmp-dial-in 320ms 300ms cubic-bezier(.2,.7,.3,1) both}
}
/* A sits under B, so it needs the heavier line to stay findable while the
   two fills overlap into a third region. */
.dr-shape.is-a{fill-opacity:.10;stroke-width:3}
.dr-shape.is-b{fill-opacity:.17;stroke-width:2.6}
:root[data-theme="dark"] .dr-shape.is-a{fill-opacity:.13}

/* Both fills go down first, then both outlines on top: with the fills
   interleaved the lower outline was being washed out by the upper fill and
   the side that led five of eight axes looked like it led one. */
.dr-fill{stroke:none}
.dr-fill.is-a{fill:var(--cmp-a);fill-opacity:.10}
.dr-fill.is-b{fill:var(--cmp-b);fill-opacity:.15}
:root[data-theme="dark"] .dr-fill.is-a{fill-opacity:.14}
:root[data-theme="dark"] .dr-fill.is-b{fill-opacity:.17}
.dr-shape{fill:none !important}
.dr-shape.is-a{stroke-width:2.8}
.dr-shape.is-b{stroke-width:2.8}
@media not (prefers-reduced-motion: reduce){
  .dr-fill{transform-box:view-box;transform-origin:50% 50%;
    animation:cmp-radar-grow 520ms cubic-bezier(.2,.75,.25,1) both}
  .dr-fill.is-b{animation-delay:90ms}
  .dr-shape,.dr-nodes{transform-origin:50% 50%}
}


/* =========================================================================
   MODE 2 · THE SPLIT FRAME
   Two franchise columns hold the room open; the categories run down the
   middle as a ladder and each rung carries one mint dot on the leading
   side. The columns are sticky, so both faces stay with the reader for
   the whole descent. Text never sits on a franchise tint: the tint is a
   wash behind the column and a 4px rail, and every figure and name is
   painted on --card.
   ========================================================================= */
:root[data-mode="2"] .cmp-split{padding:26px 26px 22px}
.sf{display:grid;grid-template-columns:minmax(190px,1fr) minmax(0,1.5fr) minmax(190px,1fr);
  gap:0;align-items:start}

.sf-col{position:relative;overflow:hidden;align-self:start;
  display:flex;flex-direction:column;align-items:center;text-align:center;gap:7px;
  padding:24px 16px 22px;min-height:340px;border-radius:16px;
  border:1px solid var(--border);
  background:linear-gradient(180deg,var(--tint,rgba(31,95,191,.14)) 0%,transparent 68%),var(--card)}
:root[data-theme="dark"] .sf-col{background:
  linear-gradient(180deg,var(--tint,rgba(31,95,191,.2)) 0%,transparent 68%),var(--hi-surface-2)}
.sf-col::after{content:"";position:absolute;top:0;bottom:0;width:4px;background:var(--tc)}
.sf-col[data-side="a"]::after{left:0}
.sf-col[data-side="b"]::after{right:0}
.sf-ghost{position:absolute;bottom:-46px;left:50%;transform:translateX(-50%);
  opacity:.07;pointer-events:none;line-height:0}
:root[data-theme="dark"] .sf-ghost{opacity:.11}
.sf-tag{position:relative;font-family:var(--mono);font-size:.5rem;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:var(--muted)}
.sf-mug{position:relative;line-height:0}
.sf-mug .mug,.sf-mug .mono-fb{width:116px;height:116px;border-radius:50%;
  border:3px solid var(--card);box-shadow:0 8px 22px -14px rgba(13,31,60,.65)}
.sf-name{position:relative;font-family:var(--serif);font-style:normal;font-weight:600;
  font-size:clamp(1.3rem,2.1vw,1.86rem);line-height:1.04;letter-spacing:-.022em;
  color:var(--ink);margin:3px 0 0;max-width:11ch}
.sf-detail{position:relative;font-family:var(--mono);font-size:.53rem;font-weight:700;letter-spacing:.13em;
  text-transform:uppercase;color:var(--muted);margin:0}
.sf-count{position:relative;display:flex;flex-direction:column;align-items:center;gap:1px;
  margin:9px 0 0;padding:9px 14px 7px;border-radius:12px;border:1px solid var(--hi-hair);
  background:var(--hi-surface-2)}
.sf-count b{font-family:var(--mono);font-size:1.9rem;font-weight:700;line-height:1;letter-spacing:-.025em}
.sf-col[data-side="a"] .sf-count b{color:var(--cmp-a)}
.sf-col[data-side="b"] .sf-count b{color:var(--cmp-b)}
.sf-count i{font-style:normal;font-family:var(--mono);font-size:.45rem;font-weight:600;
  letter-spacing:.11em;text-transform:uppercase;color:var(--muted)}

/* ---- the spine ---- */
.sf-spine{position:relative;padding:0 18px}
.sf-spine::before{content:"";position:absolute;left:50%;top:6px;bottom:38px;width:1px;
  background:var(--hi-hair);transform:translateX(-.5px)}
.sf-group{margin:0 0 4px}
.sf-gk{position:relative;text-align:center;margin:16px 0 6px}
.sf-gk span{position:relative;display:inline-block;padding:0 11px;background:var(--card);
  font-family:var(--mono);font-size:.52rem;font-weight:700;letter-spacing:.15em;
  text-transform:uppercase;color:var(--blue)}
:root[data-theme="dark"] .sf-gk span{background:var(--hi-surface-1)}

.sf-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(112px,142px) minmax(0,1fr);
  align-items:center;gap:6px;padding:7px 4px;border-radius:10px;outline:none;
  transition:background .16s ease}
.sf-row:hover,.sf-row:focus-visible{background:var(--hi-surface-2)}
.sf-row:focus-visible{box-shadow:inset 0 0 0 2px var(--blue)}
.sf-va,.sf-vb{font-family:var(--mono);font-weight:700;font-size:1.18rem;line-height:1.05;
  letter-spacing:-.02em;color:var(--muted);opacity:.62;transition:opacity .18s ease,color .18s ease}
.sf-va{text-align:right;padding-right:4px}
.sf-vb{text-align:left;padding-left:4px}
/* the leading figure is the one that is fully inked. The trailing figure
   stays legible — it is evidence, not a loser — it simply recedes. */
.sf-row[data-lead="a"] .sf-va{color:var(--cmp-a);opacity:1}
.sf-row[data-lead="b"] .sf-vb{color:var(--cmp-b);opacity:1}
.sf-row[data-lead="even"] .sf-va,.sf-row[data-lead="even"] .sf-vb{opacity:.88;color:var(--ink)}

.sf-k{position:relative;display:flex;flex-direction:column;align-items:center;gap:1px;
  padding:2px 0}
.sf-k b{font-family:var(--mono);font-size:.55rem;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink);text-align:center;line-height:1.25}
.sf-k em{font-style:normal;font-family:var(--mono);font-size:.44rem;font-weight:600;
  letter-spacing:.08em;color:var(--muted);min-height:.62em}
/* the dot: one mint marker per rung, parked on the leading side */
.sf-dot{position:absolute;top:50%;left:50%;width:7px;height:7px;border-radius:50%;
  background:var(--mint);margin-top:-3.5px;margin-left:-3.5px;opacity:0}
.sf-row[data-lead="a"] .sf-dot,.sf-row[data-lead="b"] .sf-dot{opacity:1}
.sf-row[data-lead="a"] .sf-dot{transform:translateX(-62px)}
.sf-row[data-lead="b"] .sf-dot{transform:translateX(62px)}
.sf-row[data-lead="even"] .sf-dot{opacity:.5;background:var(--cmp-level)}
.sf-foot{font-size:.62rem;line-height:1.5;color:var(--muted);margin:16px 0 0;text-align:center;
  padding:0 8px}
/* the earned handoff under the ledger: the same pair, priced by a league */
.sf-fanhand{margin:10px 0 0;text-align:center}
.sf-fanhand a{display:inline-block;font-family:var(--mono);font-size:.6rem;font-weight:700;letter-spacing:.09em;
  text-transform:uppercase;color:var(--blue);padding:7px 13px;border:1px solid var(--border);border-radius:999px;
  transition:border-color .15s,background .15s}
.sf-fanhand a:hover{border-color:var(--blue);background:var(--blue-soft)}

/* the sticky columns: available only where there is room to stick */
@media(min-width:901px){
  .sf-col{position:sticky;top:74px}
}

/* ---- the reveal: geometry and opacity, one way, never on the figures ---- */
@supports (animation-timeline: view()){
  @media not (prefers-reduced-motion: reduce){
    @keyframes sf-row-in{from{opacity:.25;transform:translateY(9px)}to{opacity:1;transform:none}}
    @keyframes sf-dot-a{from{transform:translateX(0);opacity:0}to{transform:translateX(-62px);opacity:1}}
    @keyframes sf-dot-b{from{transform:translateX(0);opacity:0}to{transform:translateX(62px);opacity:1}}
    .sf-row{animation:sf-row-in linear both;animation-timeline:view();
      animation-range:entry 4% cover 20%}
    .sf-row[data-lead="a"] .sf-dot{animation:sf-dot-a linear both;animation-timeline:view();
      animation-range:entry 8% cover 26%}
    .sf-row[data-lead="b"] .sf-dot{animation:sf-dot-b linear both;animation-timeline:view();
      animation-range:entry 8% cover 26%}
  }
}
/* the observer path, for engines without a view() timeline */
@media not (prefers-reduced-motion: reduce){
  .sf.is-observed .sf-row{opacity:.25;transform:translateY(9px);
    transition:opacity .42s cubic-bezier(.2,.7,.3,1),transform .42s cubic-bezier(.2,.7,.3,1)}
  .sf.is-observed .sf-row.is-in{opacity:1;transform:none}
  .sf.is-observed .sf-row .sf-dot{transition:transform .5s cubic-bezier(.2,.75,.25,1) .1s,opacity .3s ease .1s}
  .sf.is-observed .sf-row:not(.is-in) .sf-dot{transform:translateX(0);opacity:0}
}

/* ---- mode 2 narrow: the two columns come off the sides and become a
     header pair above the ladder, and the dot travel shortens with the
     rung ---- */
@media(max-width:900px){
  .sf{grid-template-columns:1fr 1fr;gap:12px}
  .sf-spine{grid-column:1/-1;padding:0 2px;margin-top:6px}
  .sf-col{min-height:0;padding:18px 12px 16px}
  .sf-mug .mug,.sf-mug .mono-fb{width:88px;height:88px}
  .sf-name{font-size:1.2rem}
  .sf-row[data-lead="a"] .sf-dot{transform:translateX(-52px)}
  .sf-row[data-lead="b"] .sf-dot{transform:translateX(52px)}
}
@media(max-width:640px){
  .sf-row{grid-template-columns:minmax(0,1fr) minmax(92px,116px) minmax(0,1fr);gap:4px;padding:6px 2px}
  .sf-va,.sf-vb{font-size:1rem}
  .sf-k b{font-size:.5rem;letter-spacing:.08em}
  .sf-row[data-lead="a"] .sf-dot{transform:translateX(-42px)}
  .sf-row[data-lead="b"] .sf-dot{transform:translateX(42px)}
  .sf-count b{font-size:1.5rem}
}
@media(max-width:900px) and (prefers-reduced-motion: reduce){
  .sf-row,.sf-dot{animation:none;transition:none}
}
@media (prefers-reduced-motion: reduce){
  .sf-row,.sf-dot{animation:none !important;transition:none}
  .sf.is-observed .sf-row{opacity:1;transform:none}
  .sf.is-observed .sf-row:not(.is-in) .sf-dot{transform:translateX(0)}
}

/* ---- MODE 2, revision after a headless read ----
   The columns were underweight against a nineteen-rung spine, and the
   trailing figure was being dimmed with opacity, which pushed --muted
   under 4.5:1 on parchment. The trailing figure now recedes by COLOUR
   ONLY (--muted, measured 5.3:1 on surface-1 / 4.9:1 on surface-2) and
   never by alpha; the leading figure gains its side's value colour and
   nothing gets less readable than the page's own captions. */
.sf{grid-template-columns:minmax(215px,1.08fr) minmax(0,1.5fr) minmax(215px,1.08fr)}
.sf-col{min-height:430px;padding:26px 18px 24px;gap:8px}
.sf-mug .mug,.sf-mug .mono-fb{width:128px;height:128px}
.sf-ghost{bottom:-58px;opacity:.085}
:root[data-theme="dark"] .sf-ghost{opacity:.13}
.sf-line{position:relative;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:4px;
  width:100%;margin:6px 0 2px;padding:9px 4px;border-top:1px solid var(--hi-hair);
  border-bottom:1px solid var(--hi-hair)}
.sf-line > div{display:flex;flex-direction:column;align-items:center;gap:1px;min-width:0}
.sf-line strong{font-family:var(--mono);font-size:1rem;font-weight:700;line-height:1;
  letter-spacing:-.02em;color:var(--ink)}
.sf-line span{font-family:var(--mono);font-size:.44rem;font-weight:600;letter-spacing:.12em;
  text-transform:uppercase;color:var(--muted)}

.sf-row{grid-template-columns:minmax(0,1fr) minmax(150px,182px) minmax(0,1fr)}
.sf-va,.sf-vb{opacity:1;color:var(--muted);font-size:1.2rem}
.sf-row[data-lead="a"] .sf-va{color:var(--cmp-a)}
.sf-row[data-lead="b"] .sf-vb{color:var(--cmp-b)}
.sf-row[data-lead="even"] .sf-va,.sf-row[data-lead="even"] .sf-vb{color:var(--ink)}
/* the dot now clears the label block, so it reads as a marker parked on a
   side rather than a bullet attached to a figure */
.sf-row[data-lead="a"] .sf-dot{transform:translateX(-84px)}
.sf-row[data-lead="b"] .sf-dot{transform:translateX(84px)}
@supports (animation-timeline: view()){
  @media not (prefers-reduced-motion: reduce){
    @keyframes sf-dot-a{from{transform:translateX(0);opacity:0}to{transform:translateX(-84px);opacity:1}}
    @keyframes sf-dot-b{from{transform:translateX(0);opacity:0}to{transform:translateX(84px);opacity:1}}
  }
}

/* mode 2 polish: the ladder gets the width, the rung marker gets weight,
   and the group rule reads as a real divider rather than a caption */
.sf{grid-template-columns:minmax(205px,1fr) minmax(0,1.78fr) minmax(205px,1fr)}
.sf-spine{padding:0 10px}
.sf-dot{width:8px;height:8px;margin-top:-4px;margin-left:-4px;
  box-shadow:0 0 0 3px color-mix(in srgb,var(--mint) 22%,transparent)}
.sf-gk{margin:20px 0 7px}
.sf-gk::before{content:"";position:absolute;left:0;right:0;top:50%;height:1px;background:var(--hi-hair)}
.sf-gk span{font-size:.55rem;letter-spacing:.17em;padding:0 14px}

/* =========================================================================
   MODE 3 · THE TIMELINE
   Two careers on one clock. The ground between the arcs is painted toward
   whoever is ahead across each span, so the chart reads as territory won
   and lost. The readout is a panel beside the plot, not a floating
   tooltip: it has to be reachable by keyboard and readable while still.
   ========================================================================= */
:root[data-mode="3"] .cmp-tl{padding:26px 26px 22px}
.tl-legend{display:flex;flex-wrap:wrap;align-items:center;gap:9px 12px;margin:0 0 14px}
.tl-legend span{display:flex;align-items:center;gap:7px;padding:6px 11px 6px 7px;border-radius:999px;
  border:1px solid var(--border)}
.tl-legend span.is-a{background:var(--cmp-a-soft)}
.tl-legend span.is-b{background:var(--cmp-b-soft)}
.tl-legend b{font-family:var(--sans);font-size:.74rem;font-weight:800;color:var(--ink)}
.tl-legend .mug,.tl-legend .mono-fb{width:26px;height:26px;border-radius:50%;flex:0 0 auto}
.tl-legend .tl-unit{border:0;padding:0;font-family:var(--mono);font-size:.53rem;font-weight:700;
  letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}

.tl-stage{display:grid;grid-template-columns:minmax(0,1fr) minmax(228px,268px);gap:20px;align-items:stretch}
.tl-svg{display:block;width:100%;height:auto;
  background:var(--hi-surface-2);border:1px solid var(--hi-hair);border-radius:14px}
.tl-grid{stroke:var(--hi-hair);stroke-width:1}
.tl-ax{font-family:var(--mono);font-size:10px;letter-spacing:.06em;fill:var(--muted)}

/* the contested ground. Kept low so the two arcs stay the loudest thing
   on the chart and the fill reads as territory, not as a bar. */
.tl-band{stroke:none}
.tl-band.is-a{fill:var(--cmp-a);fill-opacity:.17}
.tl-band.is-b{fill:var(--cmp-b);fill-opacity:.2}
:root[data-theme="dark"] .tl-band.is-a{fill-opacity:.2}
:root[data-theme="dark"] .tl-band.is-b{fill-opacity:.22}

.tl-line{fill:none;stroke-width:2.8;stroke-linecap:round;stroke-linejoin:round}
.tl-line.is-a{stroke:var(--cmp-a)}
.tl-line.is-b{stroke:var(--cmp-b)}
.tl-node{stroke:var(--hi-surface-2);stroke-width:1.5}
.tl-node.is-a{fill:var(--cmp-a)}
.tl-node.is-b{fill:var(--cmp-b)}
.tl-node.is-lit{stroke-width:2.2}
.tl-node.is-open{r:7}
.tl-guide{stroke:var(--blue);stroke-width:1.5;stroke-dasharray:3 4}
.tl-hit{fill:transparent;cursor:pointer;outline:none}
.tl-hit.is-open{fill:var(--blue);fill-opacity:.05}
.tl-hit:focus-visible{fill:var(--blue);fill-opacity:.1;stroke:var(--blue);stroke-width:1.5}

/* the readout: both official season lines for the open season */
.tl-read{display:flex;flex-direction:column;gap:10px;padding:15px 16px 14px;
  border-radius:14px;border:1px solid var(--border);background:var(--card)}
:root[data-theme="dark"] .tl-read{background:var(--hi-surface-2);border-color:var(--hi-line)}
.tlr-k{font-family:var(--mono);font-size:.62rem;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--blue);margin:0}
.tlr-grid{display:flex;flex-direction:column;gap:10px}
.tlr-side{display:flex;flex-direction:column;gap:2px;padding:10px 11px;border-radius:11px;
  border-left:3px solid transparent}
.tlr-side[data-side="a"]{background:var(--cmp-a-soft);border-left-color:var(--cmp-a)}
.tlr-side[data-side="b"]{background:var(--cmp-b-soft);border-left-color:var(--cmp-b)}
.tlr-side i{font-style:normal;font-family:var(--mono);font-size:.5rem;font-weight:700;
  letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.tlr-side b{font-family:var(--mono);font-size:1.5rem;font-weight:700;line-height:1;letter-spacing:-.025em}
.tlr-side[data-side="a"] b{color:var(--cmp-a)}
.tlr-side[data-side="b"] b{color:var(--cmp-b)}
.tlr-line{display:flex;flex-wrap:wrap;gap:4px 10px;margin-top:4px}
.tlr-line em{font-style:normal;display:flex;align-items:baseline;gap:3px;
  font-family:var(--mono);font-size:.76rem;font-weight:700;color:var(--ink)}
.tlr-line u{text-decoration:none;font-size:.44rem;font-weight:600;letter-spacing:.1em;
  text-transform:uppercase;color:var(--muted)}
.tlr-none{font-family:var(--mono);font-size:.58rem;letter-spacing:.06em;color:var(--muted);margin:3px 0 0}
.tlr-verdict{font-size:.68rem;line-height:1.4;color:var(--ink);margin:0;padding-top:9px;
  border-top:1px solid var(--hi-hair);font-weight:600}
.tl-note{font-size:.63rem;line-height:1.5;color:var(--muted);margin:14px 0 0}

/* arrival: the arcs draw in, the ground fades up behind them. Geometry
   and opacity only — every figure in the readout is final on frame one. */
@media not (prefers-reduced-motion: reduce){
  @keyframes tl-draw{from{stroke-dashoffset:var(--tl-len,2400)}to{stroke-dashoffset:0}}
  @keyframes tl-fade{from{opacity:0}to{opacity:1}}
  .tl-line{stroke-dasharray:var(--tl-len,2400);animation:tl-draw 900ms cubic-bezier(.22,.7,.25,1) both}
  .tl-line.is-b{animation-delay:140ms}
  .tl-bands{animation:tl-fade 620ms 520ms ease both}
  .tl-nodes{animation:tl-fade 420ms 780ms ease both}
}

/* mode 3 revision: the contested ground carries a little more weight so
   the chart reads as two colours rather than one grey, and each arc is
   named at its head instead of only in the legend above */
.tl-band.is-a{fill-opacity:.2}
.tl-band.is-b{fill-opacity:.23}
.tl-head{font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:.07em}
.tl-head.is-a{fill:var(--cmp-a)}
.tl-head.is-b{fill:var(--cmp-b)}
@media not (prefers-reduced-motion: reduce){
  .tl-heads{animation:tl-fade 420ms 860ms ease both}
}
@media (prefers-reduced-motion: reduce){
  .tl-heads{animation:none;opacity:1}
}

/* =========================================================================
   MODE 4 · THE TAPE
   A control room. The band is fixed navy furniture in BOTH themes — the
   same decision the masthead and footer already make — so its palette is
   written literally rather than through the theme tokens, and the value
   pair inside it becomes the navy-safe pair (white / lifted blue) with
   every text colour measured on #0b1b34: white 15.6:1, #8ab8f2 7.4:1,
   #c3d4ec 9.9:1, #8fa5c4 5.4:1. Nothing on the band is below 4.5:1.
   ========================================================================= */
:root[data-mode="4"] .cmp-tape{padding:0;overflow:hidden}
.tp-band{position:relative;padding:20px 24px 18px;
  --tpa:#ffffff;--tpb:#8ab8f2;--tpink:#c3d4ec;--tpdim:#8fa5c4;
  background:
    radial-gradient(1100px 300px at 12% -30%,rgba(31,95,191,.5),transparent 62%),
    linear-gradient(150deg,#0b1b34 0%,#123561 58%,#0b1b34 100%)}
.tp-bandtop{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:8px 16px;margin:0 0 16px}
.tp-onair{display:inline-flex;align-items:center;gap:7px;padding:5px 11px;border-radius:999px;
  border:1px solid rgba(138,184,242,.44);background:rgba(11,27,52,.6);
  font-family:var(--mono);font-size:.52rem;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:var(--tpa)}
.tp-onair i{width:7px;height:7px;border-radius:50%;background:var(--tpb);flex:0 0 auto}
.tp-slug{font-family:var(--mono);font-size:.5rem;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--tpdim)}

.tp-faces{display:grid;grid-template-columns:minmax(0,1fr) 58px minmax(0,1fr);
  align-items:center;gap:10px}
.tp-face{position:relative;display:flex;align-items:center;gap:13px;min-width:0;
  padding:13px 15px;border-radius:14px;border:1px solid rgba(157,184,221,.26);
  background:linear-gradient(100deg,color-mix(in srgb,var(--tc) 34%,transparent) 0%,rgba(6,17,34,.5) 70%)}
/* the two faces turn in: B mirrors, so the mugs look at each other */
.tp-face[data-side="b"]{flex-direction:row-reverse;text-align:right;
  background:linear-gradient(260deg,color-mix(in srgb,var(--tc) 34%,transparent) 0%,rgba(6,17,34,.5) 70%)}
.tp-face::after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px}
.tp-face[data-side="a"]::after{background:var(--tpa)}
.tp-face[data-side="b"]::after{background:var(--tpb)}
.tp-mug{line-height:0;flex:0 0 auto}
.tp-mug .mug,.tp-mug .mono-fb{width:92px;height:92px;border-radius:50%;
  border:2px solid rgba(255,255,255,.35);background:rgba(255,255,255,.1)}
.tp-fid{display:flex;flex-direction:column;gap:2px;min-width:0}
.tp-fid i{font-style:normal;font-family:var(--mono);font-size:.5rem;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;color:var(--tpink)}
.tp-fid b{font-family:var(--serif);font-style:normal;font-weight:600;
  font-size:clamp(1.15rem,1.9vw,1.62rem);line-height:1.06;letter-spacing:-.02em;color:#fff;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tp-fid u{text-decoration:none;font-family:var(--mono);font-size:.48rem;font-weight:600;
  letter-spacing:.11em;text-transform:uppercase;color:var(--tpdim);margin-top:2px}
.tp-crest{position:absolute;top:9px;right:11px;opacity:.4;line-height:0}
.tp-face[data-side="b"] .tp-crest{right:auto;left:11px}
.tp-vs{display:flex;align-items:center;justify-content:center;width:44px;height:44px;
  margin:0 auto;border-radius:50%;border:1px solid rgba(157,184,221,.4);
  background:rgba(6,17,34,.72);font-family:var(--mono);font-size:.58rem;font-weight:700;
  letter-spacing:.1em;color:var(--tpink)}

/* ---- the tape ---- */
.tp-tick{margin:16px 0 0;padding:12px 14px 11px;border-radius:13px;
  border:1px solid rgba(157,184,221,.24);background:rgba(4,13,28,.56)}
.tp-ticklbl{font-family:var(--mono);font-size:.48rem;font-weight:700;letter-spacing:.18em;
  text-transform:uppercase;color:var(--tpdim);margin:0 0 8px}
.tp-ticklist{list-style:none;margin:0;padding:0;position:relative;min-height:62px}
.tp-tickrow{position:absolute;inset:0;display:grid;
  grid-template-columns:minmax(0,1fr) minmax(150px,240px) minmax(0,1fr);
  align-items:center;gap:10px;opacity:0;pointer-events:none}
.tp-tickrow.is-live{opacity:1}
.tp-tv{font-family:var(--mono);font-size:2.1rem;font-weight:700;line-height:1;
  letter-spacing:-.03em;color:var(--tpdim)}
.tp-tv[data-side="a"]{text-align:right}
.tp-tv[data-side="b"]{text-align:left}
.tp-tickrow[data-lead="a"] .tp-tv[data-side="a"]{color:var(--tpa)}
.tp-tickrow[data-lead="b"] .tp-tv[data-side="b"]{color:var(--tpb)}
.tp-tickrow[data-lead="even"] .tp-tv{color:var(--tpink)}
.tp-tk{display:flex;flex-direction:column;align-items:center;gap:2px;text-align:center}
.tp-tk b{font-family:var(--mono);font-size:.6rem;font-weight:700;letter-spacing:.13em;
  text-transform:uppercase;color:#fff}
.tp-tk i{font-style:normal;font-family:var(--mono);font-size:.46rem;font-weight:600;
  letter-spacing:.11em;text-transform:uppercase;color:var(--tpdim)}
/* the still list: every line at once, nothing cycling, nothing pulsing */
.tp-tick[data-static] .tp-ticklist{min-height:0}
.tp-tick[data-static] .tp-tickrow{position:static;inset:auto;opacity:1;
  padding:5px 0;border-top:1px solid rgba(157,184,221,.14)}
.tp-tick[data-static] .tp-tickrow:first-child{border-top:0}
.tp-tick[data-static] .tp-tv{font-size:1.1rem}

/* ---- the board: the complete card, in reverse type ---- */
.tp-board{padding:4px 24px 6px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.tp-bgroup{min-width:0}
.tp-bk{font-family:var(--mono);font-size:.52rem;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:var(--blue);margin:0 0 8px;padding-bottom:6px;
  border-bottom:1px solid var(--hi-hair)}
.tp-brows{display:flex;flex-direction:column;gap:5px}
.tp-brow{display:grid;grid-template-columns:minmax(58px,1fr) minmax(0,1.25fr) minmax(58px,1fr);
  align-items:center;gap:7px}
.tp-bl{display:flex;flex-direction:column;align-items:center;gap:0;text-align:center;min-width:0}
.tp-bl b{font-family:var(--mono);font-size:.5rem;font-weight:700;letter-spacing:.09em;
  text-transform:uppercase;color:var(--muted);line-height:1.3}
.tp-bl i{font-style:normal;font-family:var(--mono);font-size:.42rem;font-weight:600;
  letter-spacing:.07em;color:var(--muted);opacity:.85;min-height:.6em}
.tp-bn{font-family:var(--mono);font-size:.94rem;font-weight:700;line-height:1;letter-spacing:-.02em;
  color:var(--muted);padding:5px 6px;border-radius:7px;text-align:center;
  border:1px solid transparent}
/* the leading numeral is set in reverse: white on that side's ink block */
.tp-brow[data-lead="a"] .tp-bn[data-side="a"]{background:var(--cmp-a);color:var(--hi-card);border-color:var(--cmp-a)}
.tp-brow[data-lead="b"] .tp-bn[data-side="b"]{background:var(--cmp-b);color:#fff;border-color:var(--cmp-b)}
:root[data-theme="dark"] .tp-brow[data-lead="a"] .tp-bn[data-side="a"]{color:#0b1b34}
.tp-brow[data-lead="even"] .tp-bn{color:var(--ink);border-color:var(--hi-hair)}
.tp-note{font-size:.63rem;line-height:1.5;color:var(--muted);margin:0;padding:14px 24px 20px}
.tp-head{padding:20px 24px 0;margin-bottom:14px}
.cmp-tape.is-empty{padding:20px 22px}

@media not (prefers-reduced-motion: reduce){
  @keyframes tp-in{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:none}}
  @keyframes tp-pulse{0%,100%{opacity:1}50%{opacity:.72}}
  .tp-tickrow{transition:opacity .45s ease}
  .tp-tickrow.is-live{animation:tp-in .42s cubic-bezier(.2,.7,.3,1) both}
  /* the pulse is on the LEADING side only, and it is opacity, never size:
     a figure that changes size reads as a figure that changed */
  .tp-tickrow.is-live[data-lead="a"] .tp-tv[data-side="a"],
  .tp-tickrow.is-live[data-lead="b"] .tp-tv[data-side="b"]{
    animation:tp-pulse 2.6s ease-in-out infinite}
}
/* =========================================================================
   MODE RESPONSIVE — LAST BLOCK IN THE FILE, deliberately.

   Media queries carry no extra specificity, so a plain `.dr-read{}` rule
   written later in the file beats an earlier `@media(max-width:640px)`
   one. The revision passes above did exactly that and the narrow layout
   lost its own dial: it went back to position:absolute with a centring
   transform and hung off the left edge of the card. Every narrow-width
   override for the modes lives here, at the bottom, where nothing can
   out-order it. Anything added to a mode above must add its narrow case
   HERE, not next to the rule it is overriding.
   ========================================================================= */
@media(max-width:1080px){
  .dr-grid{grid-template-columns:1fr;gap:18px}
  .dr-svg{max-width:600px;margin:0 auto}
  .dr-read{width:min(168px,30%)}
}
@media(max-width:720px){
  .dr-plates{grid-template-columns:1fr}
  .dr-plate-id b{font-size:1.1rem}
}
@media(max-width:640px){
  .cmp-mode{padding:18px 15px 20px;border-radius:16px}
  .dr-svg{max-width:none}
  /* the dial leaves the field and becomes a card under it */
  .dr-read{position:static;transform:none;width:auto;aspect-ratio:auto;
    border-radius:13px;margin:14px 0 0;padding:11px 12px 10px;animation:none}
  .drr-k{font-size:.55rem}
  .drr-pair b{font-size:1.1rem}
  .drr-pair i{font-size:.46rem}
  .drr-gap{font-size:.66rem}
  /* at this width the spoke labels are the chart's only text, so they
     stop being furniture-sized */
  .dr-axis{font-size:14px}
  .dr-axiswin{font-size:12.5px}
  .dr-ringlbl{font-size:11px}
  .dr-ladder li{grid-template-columns:minmax(56px,1fr) minmax(0,1.15fr) minmax(56px,1fr);gap:7px}
  .drl-a,.drl-b{font-size:.95rem}
  .drl-k{font-size:.53rem}
}
@media (prefers-reduced-motion: reduce){
  /* complete and still: no arrival on any mode, and the dial keeps the
     centring transform it is positioned with rather than an end frame */
  .cmp-mode,.dr-fill,.dr-shape,.dr-nodes{animation:none}
  .dr-read{animation:none;transform:translate(-50%,-50%)}
  .dr-ladder li,.dr-axisg,.dr-axis{transition:none}
}
@media (prefers-reduced-motion: reduce) and (max-width:640px){
  .dr-read{transform:none}
}

/* mode 2 narrow, revision: the dot travel tracks the label column */
@media(max-width:900px){
  .sf{grid-template-columns:1fr 1fr}
  .sf-col{min-height:0}
  .sf-mug .mug,.sf-mug .mono-fb{width:92px;height:92px}
  .sf-row[data-lead="a"] .sf-dot{transform:translateX(-68px)}
  .sf-row[data-lead="b"] .sf-dot{transform:translateX(68px)}
}
@media(max-width:640px){
  .sf-row{grid-template-columns:minmax(0,1fr) minmax(104px,128px) minmax(0,1fr)}
  .sf-row[data-lead="a"] .sf-dot{transform:translateX(-50px)}
  .sf-row[data-lead="b"] .sf-dot{transform:translateX(50px)}
  .sf-line strong{font-size:.85rem}
}

/* mode 3 narrow: the readout goes under the plot, and the plot keeps its
   aspect rather than squeezing the seasons into each other */
@media(max-width:1000px){
  .tl-stage{grid-template-columns:1fr}
  .tlr-grid{flex-direction:row}
  .tlr-side{flex:1 1 0;min-width:0}
}
@media(max-width:640px){
  .tl-legend .tl-unit{flex-basis:100%}
  .tlr-grid{flex-direction:column}
  .tl-ax{font-size:13px}
  .tlr-side b{font-size:1.3rem}
}
@media (prefers-reduced-motion: reduce){
  .tl-line{stroke-dasharray:none;animation:none}
  .tl-bands,.tl-nodes{animation:none;opacity:1}
}

/* mode 4 narrow: the board folds to one column, the faces stack, and the
   tape keeps its two numerals side by side because that pairing IS the
   module */
@media(max-width:1080px){
  .tp-board{grid-template-columns:1fr 1fr}
}
@media(max-width:820px){
  .tp-faces{grid-template-columns:1fr;gap:8px}
  .tp-vs{margin:2px auto}
  .tp-face[data-side="b"]{flex-direction:row;text-align:left;
    background:linear-gradient(100deg,color-mix(in srgb,var(--tc) 34%,transparent) 0%,rgba(6,17,34,.5) 70%)}
  .tp-face[data-side="b"] .tp-crest{right:11px;left:auto}
  .tp-board{grid-template-columns:1fr}
}
@media(max-width:640px){
  .tp-band{padding:16px 15px 15px}
  .tp-board{padding:4px 15px 6px}
  .tp-note{padding:12px 15px 18px}
  .tp-head{padding:18px 15px 0}
  .tp-mug .mug,.tp-mug .mono-fb{width:72px;height:72px}
  .tp-tv{font-size:1.5rem}
  .tp-tickrow{grid-template-columns:minmax(0,1fr) minmax(108px,150px) minmax(0,1fr);gap:6px}
  .tp-ticklist{min-height:56px}
}
@media (prefers-reduced-motion: reduce){
  .tp-tickrow,.tp-tv{animation:none !important;transition:none}
}

/* =========================================================================
   11 · THE COMPOSED ROOM (mode 0, the shipped page)

   One room, three instruments, in a deliberate top-to-bottom order:

     SHAPE    the radar, at the head of the spine between the two
              columns — "what are they, against the league"
     LEDGER   the ladder — "who leads what, category by category"
     HISTORY  the timeline, full width beneath both columns —
              "how did they get here"

   Nothing is drawn twice. The radar prints no bar list (the ladder's
   rungs are the numeric truth), the timeline prints no season card (the
   columns carry this season's native line), and the page keeps exactly
   one verdict, in the band above this room.
   ========================================================================= */
:root[data-mode="0"] .cmp-room{padding:26px 26px 24px}

/* the instrument labels: the same rule-and-cap the ladder groups use, so
   the three instruments read as one stack rather than three widgets */
.cr-gk{position:relative;text-align:center;margin:0 0 12px}
.cr-gk::before{content:"";position:absolute;left:0;right:0;top:50%;height:1px;background:var(--hi-hair)}
.cr-gk span{position:relative;display:inline-block;padding:0 14px;background:var(--card);
  font-family:var(--mono);font-size:.55rem;font-weight:700;letter-spacing:.17em;
  text-transform:uppercase;color:var(--blue)}
:root[data-theme="dark"] .cr-gk span{background:var(--hi-surface-1)}

/* ---- SHAPE ---- */
.cr-shape{position:relative;margin:0 0 6px}
.cr-shape .dr-stage{max-width:560px;margin:0 auto}
/* the hole in this drawing is 98/310 of the radius, so the dial matches it */
.cr-shape .dr-read{width:31%;top:50%}
.cr-shape .dr-axis{font-size:12.5px}
.cr-shape .dr-axiswin{font-size:10.5px}
.cr-shape .dr-ringlbl{font-size:9.5px}
.cr-shape .drr-k{font-size:.46rem;margin:0 0 4px}
.cr-shape .drr-pair b{font-size:.82rem}
.cr-shape .drr-pair i{font-size:.4rem}
.cr-shape .drr-gap{font-size:.54rem;margin:5px 0 0}
.cr-shape .dr-zoom{margin:10px 0 8px}
.cr-shape .dr-note{margin:0 0 4px}

/* ---- LEDGER ----
   the spine hairline belongs to the ladder alone: it must not run up
   through the radar above it or down through the receipt below it */
.cmp-room .sf-spine::before{display:none}
.cr-ledger{position:relative;padding-top:2px}
.cr-ledger::before{content:"";position:absolute;left:50%;top:34px;bottom:4px;width:1px;
  background:var(--hi-hair)}

/* ---- HISTORY ---- */
.cr-history{margin:22px 0 0}
.tl-stage.is-inline{display:block}
/* the read-out is a strip on the chart, not a panel of season cards:
   the columns above already print 2025-26 in both players' own units */
.tl-read.is-inline{display:flex;flex-direction:row;flex-wrap:wrap;align-items:center;
  justify-content:flex-start;gap:6px 16px;margin:10px 0 0;padding:9px 13px}
.tlri-k{font-family:var(--mono);font-size:.6rem;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--blue);margin:0}
.tlri-pair{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 14px}
.tlri-side{display:flex;align-items:baseline;gap:6px;padding:3px 9px;border-radius:999px;
  border-left:3px solid transparent}
.tlri-side[data-side="a"]{background:var(--cmp-a-soft);border-left-color:var(--cmp-a)}
.tlri-side[data-side="b"]{background:var(--cmp-b-soft);border-left-color:var(--cmp-b)}
.tlri-side i{font-style:normal;font-family:var(--mono);font-size:.5rem;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.tlri-side b{font-family:var(--mono);font-size:1.02rem;font-weight:700;letter-spacing:-.02em}
.tlri-side[data-side="a"] b{color:var(--cmp-a)}
.tlri-side[data-side="b"] b{color:var(--cmp-b)}
.tlri-side u{text-decoration:none;font-family:var(--mono);font-size:.5rem;letter-spacing:.08em;
  color:var(--muted)}
.tlri-verdict{font-size:.7rem;font-weight:600;color:var(--ink);margin:0}
.tlri-hint{font-family:var(--mono);font-size:.5rem;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;color:var(--muted);margin:0 0 0 auto}

@media(max-width:900px){
  .cr-shape .dr-stage{max-width:none}
  .cr-history{margin:16px 0 0}
  /* stacked, the drawing is nearly the full column width and the axis
     names run to the edge of the box, so the field stops clipping them */
  .cr-shape .dr-svg{overflow:visible}
  .cmp-room .sf-row[data-lead="a"] .sf-dot{animation:none;transform:translateX(-58px);opacity:1}
  .cmp-room .sf-row[data-lead="b"] .sf-dot{animation:none;transform:translateX(58px);opacity:1}
}
@media(max-width:640px){
  :root[data-mode="0"] .cmp-room{padding:18px 15px 20px}
  /* the dial leaves the hole at phone width, exactly as mode 1 does */
  .cr-shape .dr-read{position:static;transform:none;width:auto;aspect-ratio:auto;
    border-radius:14px;margin:12px 0 0}
  .cr-shape .drr-k{font-size:.55rem}
  .cr-shape .drr-pair b{font-size:1rem}
  .cr-shape .drr-pair i{font-size:.46rem}
  .cr-shape .drr-gap{font-size:.66rem}
  .cr-shape .dr-axis{font-size:13px}
  .cr-shape .dr-axiswin{font-size:11.5px}
  .cr-shape .dr-ringlbl{font-size:11px}
  /* the leader dot has to stay inside the category column at phone width,
     or it lands on top of the figure it is pointing away from. The
     scroll-driven keyframes travel the desktop distance and an animation
     outranks any static declaration, so the travel is switched off here
     and the dot is simply parked on its side. */
  .cmp-room .sf-row[data-lead="a"] .sf-dot{animation:none;transform:translateX(-42px);opacity:1}
  .cmp-room .sf-row[data-lead="b"] .sf-dot{animation:none;transform:translateX(42px);opacity:1}
  .tlri-hint{margin:0}
}
@media (prefers-reduced-motion: reduce){
  .cr-shape .dr-read{animation:none}
  .cmp-room .sf-row,.cmp-room .sf-dot{animation:none !important;transition:none}
}
@media (prefers-reduced-motion: reduce) and (max-width:640px){
  .cr-shape .dr-read{transform:none}
}

/* the ring scale is written over a drawing, so it carries a halo of the
   card behind it rather than trusting the polygons to stay out of its way */
.dr-ringlbl{paint-order:stroke;stroke:var(--card);stroke-width:3px;stroke-linejoin:round}
:root[data-theme="dark"] .dr-ringlbl{stroke:var(--hi-surface-1)}

/* ---- TRACKING (the room's fourth instrument: NHL Edge, the player's own distributions) ---- */
.cr-tracking{margin:24px 0 0}
.trk-legend span small{font-family:var(--mono);font-size:.5rem;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--muted);margin-left:2px}
.trk-gap{margin:-4px 0 12px;font-size:.72rem;line-height:1.5;color:var(--muted)}
.trk-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.trk-grid.is-goalie{grid-template-columns:minmax(0,1fr)}
.trk-panel{position:relative;border:1px solid var(--border);border-radius:14px;padding:14px 14px 12px;
  background:var(--card)}
:root[data-theme="dark"] .trk-panel{background:var(--hi-surface-1)}
.trk-panel-shots,.trk-panel-zones{grid-column:1 / -1}
.trk-panel-zones .trk-zone{grid-template-columns:minmax(120px,auto) 1fr}
.trk-pk{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px;margin:0 0 10px}
.trk-pk span{font-family:var(--serif);font-size:1.02rem;font-weight:600;color:var(--ink)}
.trk-pk small{font-family:var(--mono);font-size:.52rem;font-weight:700;letter-spacing:.11em;
  text-transform:uppercase;color:var(--muted)}
.trk-heads{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:8px;margin:0 0 8px;
  padding:0 0 8px;border-bottom:1px solid var(--hi-hair)}
.trk-heads > span{font-family:var(--mono);font-size:.86rem;font-weight:800;color:var(--ink);white-space:nowrap}
.trk-heads > span small{font-size:.55rem;font-weight:700;letter-spacing:.06em;color:var(--muted);margin-left:2px}
.trk-heads .is-a{text-align:left;color:var(--cmp-a)}
.trk-heads .is-b{text-align:right;color:var(--cmp-b)}
.trk-heads .trk-hk{display:flex;flex-direction:column;align-items:center;gap:2px;font-size:.55rem;
  font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--muted);text-align:center}
.trk-avg{font-size:.5rem;letter-spacing:.06em;text-transform:none;color:var(--muted)}
.trk-tag{display:inline-block;vertical-align:middle;margin-left:4px;padding:1px 6px;border-radius:999px;
  border:1px solid var(--border);font-family:var(--mono);font-size:.56rem;font-weight:700;letter-spacing:.04em;
  color:var(--ink);background:var(--bg)}
.trk-tag small{font-size:.48rem;margin-left:1px}
.trk-tag.is-none{color:var(--muted);text-transform:none;letter-spacing:.02em;font-weight:600}
.trk-row{display:grid;grid-template-columns:minmax(52px,auto) 1fr minmax(84px,auto) 1fr minmax(52px,auto);
  align-items:center;gap:6px;padding:5px 4px;border-radius:8px;outline:none}
.trk-row.is-plain{grid-template-columns:1fr minmax(120px,auto) 1fr}
.trk-row:hover,.trk-row:focus-visible{background:var(--hi-surface-2,rgba(13,31,60,.05))}
.trk-row:focus-visible{box-shadow:inset 0 0 0 2px var(--blue)}
.trk-va,.trk-vb{font-family:var(--mono);font-size:.8rem;font-weight:800;color:var(--ink);white-space:nowrap}
.trk-va{text-align:right}
.trk-vb{text-align:left}
.trk-row.is-plain .trk-va{color:var(--cmp-a)}
.trk-row.is-plain .trk-vb{color:var(--cmp-b)}
.trk-va small,.trk-vb small{display:block;font-size:.52rem;font-weight:700;color:var(--muted);letter-spacing:.04em}
.trk-lab{font-family:var(--mono);font-size:.58rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--muted);text-align:center}
.trk-bar{position:relative;display:block;height:14px;border-radius:3px;background:var(--hi-surface-2,rgba(13,31,60,.06))}
.trk-bar i{position:absolute;top:0;bottom:0;width:var(--w,0%);border-radius:3px;
  transform-origin:var(--o,left);transition:width 300ms ease}
.trk-bar.is-a{--o:right}
.trk-bar.is-a i{right:0;background:var(--cmp-a)}
.trk-bar.is-b i{left:0;background:var(--cmp-b)}
@media (prefers-reduced-motion:no-preference){
  .trk-bar i{animation:trk-grow 520ms cubic-bezier(.2,.7,.2,1) both;animation-delay:calc(var(--i,0)*45ms)}
  @keyframes trk-grow{from{transform:scaleX(0)}to{transform:scaleX(1)}}
}
.trk-zone{display:grid;grid-template-columns:minmax(96px,auto) 1fr;align-items:center;gap:10px;padding:6px 4px;
  border-radius:8px;outline:none}
.trk-zone:hover,.trk-zone:focus-visible{background:var(--hi-surface-2,rgba(13,31,60,.05))}
.trk-zone:focus-visible{box-shadow:inset 0 0 0 2px var(--blue)}
.trk-zn{font-family:var(--sans);font-size:.76rem;font-weight:800;color:var(--ink)}
.trk-zone.is-a .trk-zn{color:var(--cmp-a)}
.trk-zone.is-b .trk-zn{color:var(--cmp-b)}
.trk-zempty{font-size:.66rem;color:var(--muted)}
.trk-zbar{display:flex;height:22px;border-radius:5px;overflow:hidden;background:var(--hi-surface-2,rgba(13,31,60,.06))}
.trk-zbar i{position:relative;display:flex;align-items:center;justify-content:center;width:var(--w,0%);min-width:0;
  font-family:var(--mono);font-size:.56rem;font-weight:800;color:#fff}
.trk-zbar i b{font-weight:800}
.trk-zone.is-a .z0{background:var(--cmp-a)}
.trk-zone.is-a .z1{background:color-mix(in srgb,var(--cmp-a) 62%,var(--card))}
.trk-zone.is-a .z2{background:color-mix(in srgb,var(--cmp-a) 34%,var(--card))}
.trk-zone.is-b .z0{background:var(--cmp-b)}
.trk-zone.is-b .z1{background:color-mix(in srgb,var(--cmp-b) 62%,var(--card))}
.trk-zone.is-b .z2{background:color-mix(in srgb,var(--cmp-b) 34%,var(--card))}
.trk-zone .z1 b,.trk-zone .z2 b{color:var(--ink)}
.trk-zone.is-a .z1 b{color:#fff}
:root[data-theme="dark"] .trk-zone.is-a .z0 b{color:var(--hi-surface-1)}
:root[data-theme="dark"] .trk-zone.is-a .z1 b{color:var(--hi-surface-1)}
:root[data-theme="dark"] .trk-zone.is-a .z2 b{color:var(--ink)}
.trk-zlegend{display:flex;flex-wrap:wrap;gap:6px 14px;margin:8px 0 0;font-family:var(--mono);font-size:.55rem;
  font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--muted)}
.trk-zlegend span{display:inline-flex;align-items:center;gap:6px}
.trk-zlegend i{width:10px;height:10px;border-radius:2px;background:var(--cmp-b)}
.trk-zlegend .z1{opacity:.62}
.trk-zlegend .z2{opacity:.34}
.trk-zlegend small{text-transform:none;letter-spacing:.03em;font-weight:600}
.trk-read{margin:12px 0 0;padding:9px 12px;border-radius:9px;background:var(--hi-surface-2,rgba(13,31,60,.05));
  font-family:var(--mono);font-size:.64rem;line-height:1.5;color:var(--ink);min-height:1.5em}
@media (max-width:820px){
  .trk-grid{grid-template-columns:minmax(0,1fr)}
  .trk-row{grid-template-columns:minmax(40px,auto) 1fr minmax(64px,auto) 1fr minmax(40px,auto);gap:4px}
  .trk-lab{font-size:.5rem;letter-spacing:.06em}
  .trk-heads > span{font-size:.74rem;white-space:normal}
}