/* ============================================================
   rdy.gg TI 2026 Match Analysis prototype - page stylesheet
   Grand Final Game 5, Team Spirit vs TEAM VISION, 23 Aug 2026.

   Owned by the shell agent. Component agents must NOT edit this
   file, TI2026_Match_Analysis_rdy_gg.html, match/timeline.js,
   hub/* or data/*. Component styles live in match/economy.css,
   scoreboard.css, items.css, players.css, draft.css,
   moments.css and story.css, each scoped with its own prefix.

   Loads after hub/hub.css, so every token, utility and class in
   the Hub contract is already available. This file adds:
     1. match tokens (side aliases, timeline geometry)
     2. the breadcrumb bar
     3. the match banner          (.m-bn-*,  rendered by timeline.js)
     4. the master timeline strip (.mt-tl-*, rendered by timeline.js)
     5. page grid and sticky offsets
     6. shared match utilities every component may use (.m-*)
     7. safety breakpoints and reduced motion
   ============================================================ */

/* ---------- 1. Match tokens ---------- */
:root {
  /* Sides. TEAM VISION are Radiant (green), Team Spirit are Dire (red).
     These alias the Hub's side tokens so a component never hard codes a
     hex and never has to remember which org was on which side. */
  --side-radiant: var(--color-radiant);
  --side-dire: var(--color-dire);
  --side-radiant-soft: var(--color-radiant-soft);
  --side-dire-soft: var(--color-dire-soft);
  --side-radiant-fill: color-mix(in srgb, var(--color-radiant) 24%, transparent);
  --side-dire-fill: color-mix(in srgb, var(--color-dire) 24%, transparent);
  /* the strip sparkline sits on a darker ground than a card, so it carries
     a stronger fill than a chart inside a card would */
  --spark-radiant-fill: color-mix(in srgb, var(--color-radiant) 36%, transparent);
  --spark-dire-fill: color-mix(in srgb, var(--color-dire) 36%, transparent);
  --side-radiant-line: color-mix(in srgb, var(--color-radiant) 70%, transparent);
  --side-dire-line: color-mix(in srgb, var(--color-dire) 70%, transparent);
  /* red text never clears AA at small sizes, so Dire type uses the light red */
  --side-dire-text: var(--text-dire);
  --side-radiant-text: var(--color-radiant);

  /* timeline chrome */
  --match-cursor: var(--color-rdy-white);
  --match-magnet: var(--color-rdy-gold);
  --match-at: var(--color-rdy-light-gold); /* the reading the page is holding */
  --match-grid: var(--color-rdy-white-10);

  /* phase bands: laning 0 to 10, mid 10 to 30, late 30 to the end */
  --phase-laning: color-mix(in srgb, var(--color-rdy-turquoise) 7%, transparent);
  --phase-mid: color-mix(in srgb, var(--color-rdy-white) 4%, transparent);
  --phase-late: color-mix(in srgb, var(--color-rdy-gold) 7%, transparent);

  /* Measured by timeline.js from the rendered strip and written back onto
     the root element. The value here is the pre-measurement fallback, so
     nothing jumps on first paint. */
  --match-timeline-h: 140px;
  /* Phase 4, 2026-09-11: the scrub track was 46px, too thin to read the
     spark, the phase bands and twenty markers at once. Every length in the
     strip is derived from these three, so the strip can be retuned in one
     place and every sticky offset follows. */
  --match-track-h: 76px;
  --match-strip-pad-top: 10px;
  --match-strip-pad-bottom: 12px;
  /* the match page has no tab bar: the timeline strip is the only sticky
     chrome, and it sits at top 0 the way the Hub's tab bar does */
  --match-sticky-stack: var(--match-timeline-h);
}

/* ---------- 2. Breadcrumb bar ---------- */
.m-bar {
  border-bottom: 1px solid var(--border-soft);
  background:
    radial-gradient(900px 160px at 10% 0%, color-mix(in srgb, var(--color-rdy-red) 9%, transparent), transparent 70%),
    radial-gradient(700px 160px at 72% 0%, color-mix(in srgb, var(--color-rdy-fresh-green) 7%, transparent), transparent 70%);
}
.m-bar .breadcrumb { margin: 0; padding: 12px 0 11px; }

/* ---------- 2b. Series header and the map switcher ----------
   rdy.gg's own identity block, reproduced above our banner: tournament,
   series time, format chip, both teams, then one row of the series score
   card, the odds PLACEHOLDER at rdy.gg's 192x128 footprint and the five map
   tiles at their 90px width. Rendered by match/app.js. */
.m-serieshead-mount { padding-top: var(--gap-grid); }

.m-sh { display: flex; flex-direction: column; gap: 14px; }

.m-sh-id {
  display: flex; flex-direction: column; align-items: center; gap: 7px;
  text-align: center;
}
.m-sh-tournament {
  font-size: 15px; font-weight: 700; letter-spacing: .01em;
  color: var(--text-primary);
}
a.m-sh-tournament:hover { color: var(--color-rdy-fresh-green); }
.m-sh-time { font-size: 12.5px; color: var(--text-tertiary); }
.m-sh-chips { display: flex; align-items: center; gap: 6px; }

.m-sh-teams { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; justify-content: center; }
.m-sh-team {
  display: inline-flex; align-items: center; gap: 8px;
  color: var(--text-primary);
  font-size: 15px; font-weight: 700;
}
a.m-sh-team:hover { color: var(--color-rdy-fresh-green); }
.m-sh-team-name { white-space: nowrap; }
.m-sh-vs {
  font-size: 11px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase;
  color: var(--text-tertiary);
}

.m-sh-row {
  display: flex; align-items: stretch; gap: var(--gap-grid);
  flex-wrap: wrap;
}

/* the score card, rdy.gg's one block of brand green on the page */
.m-sh-score {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  flex: 1 1 380px; min-width: 0;
  height: 128px; padding: 0 22px;
  box-sizing: border-box;
  border-radius: var(--radius-xl);
  background: var(--color-rdy-fresh-green);
  color: var(--color-rdy-dark-sky);
  text-decoration: none;
}
a.m-sh-score:hover { background: var(--color-rdy-fresh-green-hover); color: var(--color-rdy-dark-sky); }
.m-sh-score:focus-visible { outline: 2px solid var(--color-rdy-white); outline-offset: 2px; }
.m-sh-score-side {
  display: flex; align-items: center; gap: 9px;
  flex: 1 1 0; min-width: 0;
}
.m-sh-score-side--right { justify-content: flex-end; }
.m-sh-score-name {
  font-size: 14px; font-weight: 800; line-height: 1.15;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.m-sh-score-nums { display: flex; align-items: baseline; gap: 8px; flex: 0 0 auto; }
.m-sh-score-num { font-size: 34px; font-weight: 800; line-height: 1; }
.m-sh-score-sep { font-size: 26px; font-weight: 800; opacity: .55; }

.m-sh-odds { align-self: stretch; height: 128px; }

/* the five tiles, rdy.gg's 90px pattern */
.m-sh-tabs {
  display: flex; align-items: stretch; gap: 6px;
  flex: 0 0 auto;
  padding: 6px;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-xl);
  background: var(--color-rdy-white-5);
}
.m-sh-tab {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px;
  width: 90px; height: 116px; padding: 8px 4px;
  box-sizing: border-box;
  border: 1px solid transparent;
  border-radius: var(--radius-lg);
  background: transparent;
  color: var(--text-secondary);
  font-family: inherit;
  cursor: pointer;
  transition: color .14s ease, background .14s ease, border-color .14s ease;
}
.m-sh-tab:hover { color: var(--text-primary); background: var(--color-rdy-white-5); }
.m-sh-tab:focus-visible { outline: 2px solid var(--color-rdy-fresh-green); outline-offset: 2px; }
.m-sh-tab.is-on {
  color: var(--text-primary);
  background: var(--color-rdy-bright-night);
  border-color: var(--color-rdy-white-25);
}
.m-sh-tab-label {
  font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--text-tertiary);
}
.m-sh-tab.is-on .m-sh-tab-label { color: var(--color-rdy-light-gold); }
.m-sh-tab-logo { display: flex; align-items: center; justify-content: center; height: 20px; }
.m-sh-tab-score { text-align: center; line-height: 1.15; }
.m-sh-tab-score .kills-pair { font-size: 13px; font-weight: 700; gap: 3px; justify-content: center; flex-wrap: wrap; }
.m-sh-tab-score .kp-tag { font-size: 9px; }
.m-sh-tab-score .kp-num { color: inherit; }
.m-sh-tab-dur {
  display: inline-flex; align-items: center; gap: 3px;
  font-size: 11px; color: var(--text-tertiary);
}
.m-sh-tab-dur .icon { width: 11px; height: 11px; }

@media (max-width: 1279px) {
  .m-sh-tab { width: 82px; }
}
@media (max-width: 1023px) {
  .m-sh-row { flex-direction: column; align-items: stretch; }
  .m-sh-odds { align-self: center; }
  .m-sh-tabs { overflow-x: auto; }
}

/* while a game file is in flight the tiles stay live and the article dims,
   so a click on a 300KB game never looks ignored */
.is-loading-game .m-sh-tab { cursor: progress; }
.is-loading-game .page-grid,
.is-loading-game .m-banner-mount { opacity: .55; transition: opacity .12s linear; }

/* ---------- 3. Match banner ---------- */
.m-banner-mount { padding-top: var(--gap-grid); }

.m-bn {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-2xl);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--color-rdy-light-sky) 92%, transparent), var(--color-rdy-light-sky)),
    var(--color-rdy-light-sky);
  box-shadow: var(--shadow-card);
}
/* two side washes, Radiant on the left, Dire on the right, so the banner
   carries the same colour logic as every chart below it */
.m-bn::before,
.m-bn::after {
  content: "";
  position: absolute; top: 0; bottom: 0; width: 38%;
  pointer-events: none;
}
.m-bn::before {
  left: 0;
  background: linear-gradient(90deg, color-mix(in srgb, var(--side-radiant) 16%, transparent), transparent 78%);
}
.m-bn::after {
  right: 0;
  background: linear-gradient(270deg, color-mix(in srgb, var(--side-dire) 18%, transparent), transparent 78%);
}
.m-bn-inner { position: relative; z-index: 1; padding: 16px 20px 14px; }

.m-bn-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 12px; }
.m-bn-title {
  margin: 0 0 12px;
  font-size: 20px; font-weight: 700; line-height: 1.2;
  letter-spacing: -.01em;
  color: var(--text-primary);
}
@media (max-width: 1279px) { .m-bn-title { font-size: 18px; } }

.m-bn-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 16px;
}

.m-bn-team { display: flex; align-items: center; gap: 12px; min-width: 0; }
.m-bn-team--dire { justify-content: flex-end; text-align: right; }
.m-bn-team--dire .m-bn-names { align-items: flex-end; }
.m-bn-names { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.m-bn-name {
  font-size: clamp(20px, 18.3px + .46vw, 30px);
  font-weight: 800; line-height: 1.1;
  color: var(--text-primary);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.m-bn-sub { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.m-bn-alias { font-size: 12px; color: var(--text-tertiary); }
.m-bn-team--lost .m-bn-name { color: var(--text-secondary); }
.m-bn-crest { flex: 0 0 auto; display: grid; place-items: center; }
.m-bn-crest .team-logo { width: 58px; height: 58px; object-fit: contain; }
.m-bn-crest .monogram { width: 58px; height: 58px; font-size: 20px; }

.m-bn-centre { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.m-bn-score { font-size: 13px; }
.m-bn-score .kills-pair { font-size: clamp(22px, 20px + .5vw, 32px); font-weight: 800; }
.m-bn-score .kp-tag { font-size: 11px; }
.m-bn-duration {
  font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
  color: var(--text-tertiary);
  font-variant-numeric: tabular-nums;
}

.m-bn-foot {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px;
  margin-top: 14px; padding-top: 12px;
  border-top: 1px solid var(--border-hair);
}
.m-bn-facts { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; min-width: 0; }
.m-bn-fact { display: flex; align-items: baseline; gap: 6px; font-size: 13px; }
.m-bn-fact-label {
  font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
  color: var(--text-tertiary);
}
.m-bn-fact-value { font-weight: 600; color: var(--text-primary); font-variant-numeric: tabular-nums; }
.m-bn-links { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.m-bn-name-link { color: inherit; text-decoration: none; }
.m-bn-name-link:hover { color: var(--color-rdy-fresh-green); }

/* ---------- 4. Master timeline strip ---------- */
.m-timeline-wrap {
  position: sticky;
  top: 0;
  z-index: 50;
  margin-top: var(--gap-grid);
  background: color-mix(in srgb, var(--color-rdy-dark-sky) 94%, transparent);
  backdrop-filter: blur(10px);
  border-top: 1px solid var(--border-hair);
  border-bottom: 1px solid var(--border-soft);
}
.m-timeline-mount { min-height: 0; }
.m-timeline-mount:empty::before { min-height: 118px; }

.mt-tl { padding: var(--match-strip-pad-top) 0 var(--match-strip-pad-bottom); user-select: none; }

/* head: clock, readout, actions */
.mt-tl-head {
  display: flex; align-items: center; gap: 14px;
  min-width: 0; margin-bottom: 8px;
  /* one line, never two: the strip must not grow past 150px */
  flex-wrap: nowrap;
}
.mt-tl-clockbox { display: flex; align-items: baseline; gap: 8px; flex: 0 0 auto; }
.mt-tl-clock {
  font-size: 26px; font-weight: 800; line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--text-primary);
}
.mt-tl-phase {
  font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--text-tertiary);
}

.mt-tl-readout {
  display: flex; align-items: center; gap: 8px 14px; flex-wrap: nowrap;
  overflow: hidden;
  min-width: 0; flex: 1 1 auto;
}
.mt-tl-stat { display: flex; align-items: baseline; gap: 6px; min-width: 0; }
.mt-tl-stat-label {
  font-size: 10px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
  color: var(--text-tertiary); white-space: nowrap;
}
.mt-tl-stat-value {
  font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums;
  color: var(--text-primary); white-space: nowrap;
}
.mt-tl-stat-value.is-radiant { color: var(--side-radiant-text); }
.mt-tl-stat-value.is-dire { color: var(--side-dire-text); }
.mt-tl-stat .kills-pair { font-size: 15px; font-weight: 700; }

.mt-tl-moment {
  display: flex; align-items: center; gap: 7px; min-width: 0;
  max-width: 42ch;
  padding: 3px 10px;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-pill);
  background: var(--surface-raised);
  font-size: 12px; color: var(--text-secondary);
}
.mt-tl-moment.is-captured {
  border-color: color-mix(in srgb, var(--match-magnet) 60%, transparent);
  background: color-mix(in srgb, var(--match-magnet) 14%, var(--surface-raised));
  color: var(--color-rdy-light-gold);
}
.mt-tl-moment-time { font-variant-numeric: tabular-nums; font-weight: 700; color: var(--text-primary); }
.mt-tl-moment.is-captured .mt-tl-moment-time { color: var(--color-rdy-light-gold); }
.mt-tl-moment-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.mt-tl-moment:empty { display: none; }

.mt-tl-actions { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; margin-left: auto; }
.mt-tl-hint {
  font-size: 11px; color: var(--text-tertiary); white-space: nowrap;
}
/* jump-buttons-no-state: the sidebar's five landmarks, mirrored here where
   they are on screen for the whole article. */
.mt-tl-jumps { display: flex; align-items: center; gap: 4px; flex-wrap: nowrap; }
.mt-tl-jump {
  min-height: 32px;
  display: inline-flex; flex-direction: column; align-items: center; justify-content: center;
  min-width: 54px; height: 30px; padding: 0 8px;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--text-secondary);
  font-family: inherit;
  cursor: pointer;
  transition: color .14s ease, border-color .14s ease, background .14s ease;
}
.mt-tl-jump-word { font-size: 10.5px; font-weight: 700; line-height: 1.05; letter-spacing: .02em; }
.mt-tl-jump-clock { font-size: 9.5px; line-height: 1.1; color: var(--match-label-quiet); }
.mt-tl-jump:hover { color: var(--text-primary); border-color: var(--color-rdy-white-25); }
.mt-tl-jump:focus-visible { outline: 2px solid var(--color-rdy-fresh-green); outline-offset: 2px; }
.mt-tl-jump.is-on {
  color: var(--color-rdy-dark-sky);
  background: var(--match-at);
  border-color: var(--match-at);
}
.mt-tl-jump.is-on .mt-tl-jump-clock { color: var(--color-rdy-dark-sky); }

/* P4R2-06: the five landmarks used to be dropped below 1280, which left the
   strip's own jumps unreachable at 1024 while the head still had room. They
   stay, in a compact form: the clock line stands down (it is still in every
   button's title and aria-label, and the strip's own readout shows the
   clock), the label keeps its word, and the box shrinks to the word. The
   head is flex-wrap:nowrap and the readout is the flexible item, so the
   strip never grows a third line. */
@media (max-width: 1279px) {
  .mt-tl-jumps { gap: 3px; }
  .mt-tl-jump { min-width: 0; height: 26px; min-height: 26px; padding: 0 6px; }
  .mt-tl-jump-word { font-size: 10px; letter-spacing: .01em; }
  .mt-tl-jump-clock { display: none; }
}
/* the transport took the right hand end's spare width, so the hint, which is
   the least load bearing thing in the head, stands down first */
@media (max-width: 1599px) {
  .mt-tl-hint { display: none; }
}

/* interaction-rule-change 2026-09-11: the pin control is replaced by the
   time lapse transport at the left of the strip. Start, Play or Pause with
   the clock and a progress bar, End, and a speed toggle. */
.mt-tl-play {
  display: flex; align-items: center; gap: 4px;
  flex: 0 0 auto;
  font-family: var(--font-sans);
}
.mt-tl-pbtn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: 32px; padding: 0 8px;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--text-secondary);
  font-family: inherit;
  font-size: 11px; font-weight: 700; letter-spacing: .04em;
  cursor: pointer;
  transition: color .14s ease, border-color .14s ease, background .14s ease;
}
.mt-tl-pbtn:hover:not(:disabled) { color: var(--text-primary); border-color: var(--color-rdy-white-25); background: var(--color-rdy-white-5); }
.mt-tl-pbtn:focus-visible { outline: 2px solid var(--color-rdy-fresh-green); outline-offset: 2px; }
.mt-tl-pbtn:disabled { opacity: .38; cursor: default; }
.mt-tl-pbtn .icon { width: 13px; height: 13px; fill: currentColor; }
.mt-tl-pbtn--edge { width: 32px; padding: 0; }

.mt-tl-pbtn--play {
  position: relative;
  overflow: hidden;
  min-width: 104px; padding: 0 10px;
  border-color: var(--border-strong);
  color: var(--text-primary);
}
.mt-tl-pbtn-glyph { display: inline-flex; align-items: center; }
.mt-tl-pbtn-word { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.mt-tl-pbtn-clock {
  font-size: 11px; font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--match-label-quiet);
  margin-left: auto;
}
/* the progress affordance: one variable, no layout */
.mt-tl-pbtn-bar {
  position: absolute; left: 0; bottom: 0; height: 2px;
  width: calc(var(--p, 0) * 100%);
  background: var(--color-rdy-fresh-green);
}
.mt-tl-pbtn--play[aria-pressed="true"] {
  color: var(--color-rdy-dark-sky);
  background: var(--color-rdy-fresh-green);
  border-color: var(--color-rdy-fresh-green);
}
.mt-tl-pbtn--play[aria-pressed="true"] .mt-tl-pbtn-clock { color: color-mix(in srgb, var(--color-rdy-dark-sky) 72%, transparent); }
.mt-tl-pbtn--play[aria-pressed="true"] .mt-tl-pbtn-bar { background: var(--color-rdy-dark-sky); }

.mt-tl-speed {
  height: 32px; min-width: 36px; padding: 0 7px;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--text-secondary);
  font-family: inherit;
  font-size: 11px; font-weight: 700;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  transition: color .14s ease, border-color .14s ease, background .14s ease;
}
.mt-tl-speed:hover { color: var(--text-primary); border-color: var(--color-rdy-white-25); background: var(--color-rdy-white-5); }
.mt-tl-speed:focus-visible { outline: 2px solid var(--color-rdy-fresh-green); outline-offset: 2px; }

@media (max-width: 1023px) {
  .mt-tl-pbtn--play { min-width: 0; }
  .mt-tl-pbtn-word { display: none; }
}

/* plot */
.mt-tl-plot {
  position: relative;
  height: var(--match-track-h);
  border-radius: var(--radius-md);
  cursor: ew-resize;
  touch-action: none;
  outline: none;
}
.mt-tl-plot:focus-visible {
  box-shadow: 0 0 0 2px var(--color-rdy-dark-sky), 0 0 0 4px var(--color-rdy-fresh-green);
}
.mt-tl-plot.is-scrubbing { cursor: grabbing; }

/* the clip is the rubber band boundary: the track slides inside it and the
   cursor stays pinned to the edge, which is what makes the end feel elastic */
.mt-tl-clip {
  position: absolute; inset: 0;
  overflow: hidden;
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--color-rdy-starry-night) 70%, transparent);
  border: 1px solid var(--border-hair);
}
.mt-tl-track {
  position: absolute; inset: 0;
  transform: translateX(calc(var(--rubber, 0px) * -1));
}

.mt-tl-bands { position: absolute; inset: 0; }
.mt-tl-band { position: absolute; top: 0; bottom: 0; }
.mt-tl-band--laning { background: var(--phase-laning); }
.mt-tl-band--mid { background: var(--phase-mid); }
.mt-tl-band--late { background: var(--phase-late); }
.mt-tl-band-label {
  position: absolute; top: 5px; left: 8px;
  font-size: 10.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--match-label-quiet);
  pointer-events: none;
}

.mt-tl-spark { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.mt-tl-zero { stroke: var(--match-grid); stroke-width: 1; }

.mt-tl-ticks { position: absolute; inset: 0; }
.mt-tl-tick { position: absolute; top: 0; bottom: 0; width: 1px; background: var(--color-rdy-white-5); }
.mt-tl-tick--major { background: var(--color-rdy-white-10); }
.mt-tl-tick-label {
  position: absolute; bottom: 4px;
  transform: translateX(4px);
  font-size: 10.5px; font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--match-label-quiet);
  pointer-events: none;
}

/* event markers, the magnets */
/* M-14: a marker's centre sits on its minute, so a marker at fraction 1 hangs
   half its width past the clip and the ancient was drawn cut in half. The marks
   layer is inset by half the widest marker at both ends. The drift against the
   ticks is 8px at the extremes and zero at the middle, a third of a minute on
   a 1,391px strip, and no marker is ever clipped. */
.mt-tl-marks { position: absolute; inset: 0 9px; }
.mt-tl-mark {
  position: absolute; bottom: 15px;
  width: 11px; height: 11px; margin-left: -5.5px;
  border-radius: 2px;
  background: var(--color-rdy-steel);
  border: 1px solid var(--color-rdy-dark-sky);
  transform: rotate(45deg);
  transform-origin: center;
  transition: transform .14s ease, background .14s ease, box-shadow .14s ease;
}
/* kind sets the size, the side that gained it sets the colour, and the one
   featured moment of the game overrides both */
.mt-tl-mark--fight { background: var(--color-rdy-yellow); width: 13px; height: 13px; margin-left: -6.5px; bottom: 14px; }
.mt-tl-mark--tower { background: var(--color-rdy-turquoise); }
.mt-tl-mark--rax { background: var(--color-rdy-light-red); width: 12px; height: 12px; margin-left: -6px; }
.mt-tl-mark--ancient { background: var(--color-rdy-white); width: 13px; height: 13px; margin-left: -6.5px; }
.mt-tl-mark--roshan { background: var(--color-rdy-gold); }
.mt-tl-mark--tormentor { background: var(--color-rdy-steel); width: 9px; height: 9px; margin-left: -4.5px; }
/* the courier is its own object, so it never reads as a Tormentor: a round
   pip instead of the tormentor diamond */
.mt-tl-mark--courier {
  background: var(--color-rdy-steel);
  width: 9px; height: 9px; margin-left: -4.5px;
  border-radius: 50%;
}
.mt-tl-mark--firstblood { background: var(--color-rdy-steel); width: 9px; height: 9px; margin-left: -4.5px; }
.mt-tl-mark--radiant { background: var(--side-radiant); }
.mt-tl-mark--dire { background: var(--side-dire); }
.mt-tl-mark--swing {
  background: var(--color-rdy-light-gold);
  width: 15px; height: 15px; margin-left: -7.5px; bottom: 13px;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-rdy-gold) 35%, transparent);
}
.mt-tl-mark.is-near { transform: rotate(45deg) scale(1.3); }
.mt-tl-mark.is-captured {
  transform: rotate(45deg) scale(1.75);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--match-magnet) 45%, transparent);
}
.mt-tl-mark.is-at {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--match-at) 55%, transparent);
}
.mt-tl-mark-label {
  position: absolute; top: 6px;
  transform: translateX(-50%);
  max-width: 196px;
  padding: 2px 8px;
  border-radius: var(--radius-pill);
  background: var(--color-rdy-dark-sky);
  border: 1px solid color-mix(in srgb, var(--match-magnet) 55%, transparent);
  color: var(--color-rdy-light-gold);
  font-size: 10.5px; font-weight: 700;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  opacity: 0;
  transition: opacity .12s ease;
  pointer-events: none;
}
.mt-tl-mark-label.is-on { opacity: 1; }

/* cursor: one group moved by --x, never re-measured */
.mt-tl-cursor {
  position: absolute; top: 0; bottom: 0;
  left: calc(var(--x, 1) * 100%);
  width: 0;
  pointer-events: none;
  will-change: left;
}
.mt-tl-cursor-line {
  position: absolute; top: 0; bottom: 0; left: -1.5px;
  width: 3px;
  background: var(--match-cursor);
  box-shadow: 0 0 8px color-mix(in srgb, var(--match-cursor) 45%, transparent);
}
.mt-tl-cursor-dot {
  position: absolute; bottom: -5px; left: -5px;
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--match-cursor);
}
.mt-tl-cursor-bubble {
  position: absolute; top: 5px; left: 0;
  transform: translateX(-50%);
  padding: 2px 9px;
  border-radius: var(--radius-pill);
  background: var(--match-cursor);
  color: var(--color-rdy-dark-sky);
  font-size: 11.5px; font-weight: 800;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.mt-tl.is-captured .mt-tl-cursor-line,
.mt-tl.is-captured .mt-tl-cursor-dot,
.mt-tl.is-captured .mt-tl-cursor-bubble { background: var(--match-magnet); }

/* the hover preview: a faint ghost tick on this surface only. It reads the
   pointer and nothing else; the index does not move until a pointer goes
   down, a key is pressed, or play is running. */
.mt-tl-ghost {
  position: absolute; top: 0; bottom: 0;
  left: calc(var(--gx, 0) * 100%);
  width: 0;
  pointer-events: none;
  z-index: 2;
}
.mt-tl-ghost-line {
  position: absolute; top: 0; bottom: 0; left: -1px;
  width: 1px;
  background: var(--color-rdy-white-25);
}
.mt-tl-ghost-clock {
  position: absolute; bottom: 4px; left: 0;
  transform: translateX(-50%);
  padding: 0 5px;
  border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--color-rdy-dark-sky) 88%, transparent);
  border: 1px solid var(--color-rdy-white-25);
  color: var(--text-secondary);
  font-size: 10px; font-weight: 700;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* rubber feedback at the ends */
.mt-tl-edge {
  position: absolute; top: 0; bottom: 0; width: 42px;
  pointer-events: none;
  opacity: var(--edge, 0);
  transition: opacity .1s linear;
}
.mt-tl-edge--start { left: 0; background: linear-gradient(90deg, var(--color-rdy-white-25), transparent); }
.mt-tl-edge--end { right: 0; background: linear-gradient(270deg, var(--color-rdy-white-25), transparent); }

/* ---------- 5. Page grid and sticky offsets ---------- */
.match-page .page-grid { padding-top: var(--gap-grid); }

/* F05 / M-04: the rail's cards total about 1,750px against a 12,000px article,
   so a sticky first card bounded by a shrink to fit aside stopped travelling
   after one screen. Stretch the side column to the grid row height and the
   sticky readout follows the whole page. */
.match-page .page-grid { align-items: stretch; }
.match-page .side-col { align-self: stretch; height: 100%; min-width: 0; }

/* every sticky thing on this page hangs off the timeline strip */
.match-page .side-col > .mount:first-child {
  position: sticky;
  top: calc(var(--match-sticky-stack) + 10px);
  z-index: 2;
}

/* P4-04. The rail placeholder says the 160x600 slot is sticky, and on
   rdy.gg's own page it is: the right rail runs `position: sticky; top: 4`
   and is the only sticky element in their page body
   (rdy-match-page-notes.md line 166). Here the summary card above it is
   already sticky, so the slot sticks UNDER the summary rather than on top
   of it: --match-rail-top is the summary's own sticky top plus its measured
   height plus the rail gap, written by match/app.js and re-measured
   whenever the summary resizes or the map switches. The fallback in the
   var() is the bare strip offset, which is what a page with no summary
   card would want. Scoped to .match-page, so the Hub's own rail is not
   touched by this rule. */
/* P4R2-04: the leaderboard placeholder names rdy.gg's 728x90 footprint and
   is capped at max-width:100%, so under 1280 the main column draws it
   narrower than the size it states. match/app.js measures the box and writes
   the drawn pair into this caption, which stays empty while the slot is at
   its full footprint. The slot stacks its label over the caption here rather
   than in hub.css, so the Hub's own leaderboard is untouched. */
.match-page .ad-slot--leaderboard { flex-direction: column; gap: 3px; }
.m-slot-actual {
  font-size: 9.5px; font-weight: 600; letter-spacing: .05em;
  color: var(--text-tertiary); opacity: .8;
  font-variant-numeric: tabular-nums;
}

.match-page .side-col > .ad-slot--rail {
  position: sticky;
  top: var(--match-rail-top, calc(var(--match-sticky-stack) + 10px));
  z-index: 1;
  flex: 0 0 auto;
  /* P4R2-02: the slot is the LAST child of the column. A sticky box travels
     down over whatever follows it, so with nothing after it there is nothing
     left to cover. The column is stretched to the main column's height, so
     the empty space under the last card is the slot's sticky travel. The
     fill is opaque in hub.css as a second guard. */
}

/* SCR1: a box shadow on a <tr> does not paint reliably, so every table row
   that carries the cross module highlight moves the marker to its first cell. */
.match-page tr.m-hl.is-hl { box-shadow: none; }
.match-page tr.m-hl.is-hl > :first-child { box-shadow: inset 2px 0 0 var(--color-rdy-fresh-green); }

/* anchor targets (the Hub links to #draft) clear the sticky strip */
.match-page [id] { scroll-margin-top: calc(var(--match-sticky-stack) + 12px); }

/* ---------- 5b. Hero cross links ----------
   Phase 4 item 4. A hero portrait or a hero name may be an anchor to that
   hero's page on rdy.gg. The anchor is transparent: it inherits colour and
   lays out as the inline box the module already expected, so no module's
   layout changes when a name becomes a link. It is NEVER emitted inside a
   <button>, which is why the draft stepper's own tiles and the moments rows
   stay plain; that exception is recorded in the contract. */
.m-herolink,
.m-xlink {
  display: inline-flex; align-items: center; gap: inherit;
  color: inherit; text-decoration: none;
  border-radius: var(--radius-sm);
}
.m-herolink:hover,
.m-xlink:hover { color: var(--color-rdy-fresh-green); }
.m-herolink:hover .hero-portrait { outline: 1px solid var(--color-rdy-fresh-green); }
.m-herolink:focus-visible,
.m-xlink:focus-visible { outline: 2px solid var(--color-rdy-fresh-green); outline-offset: 2px; }

/* ---------- 6. Shared match utilities ---------- */
/* Any component may use these. Anything narrower than "every component
   could want this" belongs in that component's own stylesheet. */

/* hidden wins over any display a component sets, so toggling el.hidden
   is a safe way to drop a readout the data does not support */
.match-page [hidden] { display: none !important; }

/* a titled block inside a card, used by several components */
.m-sub {
  font-size: 11px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
  color: var(--text-tertiary);
}

/* a scrubbable plot box. attachScrubSurface adds .m-scrub for you. */
.m-scrub { touch-action: none; cursor: ew-resize; outline: none; }
.m-scrub:focus-visible {
  box-shadow: 0 0 0 2px var(--color-rdy-dark-sky), 0 0 0 4px var(--color-rdy-fresh-green);
}
.m-scrub.is-scrubbing { cursor: grabbing; }

/* the cursor line a chart draws over its own plot, moved by --x only */
.m-cursor {
  position: absolute; top: 0; bottom: 0;
  left: calc(var(--x, 1) * 100%);
  width: 0; pointer-events: none;
}
.m-cursor-line {
  position: absolute; top: 0; bottom: 0; left: -1px; width: 2px;
  background: var(--match-cursor);
  opacity: .85;
}

/* M-09 / M-10: the smallest labels on the page are content, not decoration.
   --color-rdy-white-25 at 9.5px composites to about 2:1, so every axis label,
   band label and chip label under 12px reads this token instead. */
.match-page { --match-label-quiet: rgba(255, 255, 255, .62); }

/* M-10: the kills pair separator is decorative but it sits in running text. */
.match-page .kills-pair .kp-sep { color: var(--match-label-quiet); }

/* Principle 7: anything whose digits retype under the pointer is tabular. */
.mt-tl-moment-text, .mt-eco-moment-text, .m-readout-label, .u-tnum {
  font-variant-numeric: tabular-nums;
}

/* a readout card: label over value, the value is the array at the index */
.m-readout { display: flex; flex-wrap: wrap; gap: 10px 22px; }
.m-readout-item { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.m-readout-label {
  font-size: 10px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
  color: var(--text-tertiary); white-space: nowrap;
}
.m-readout-value {
  font-size: 17px; font-weight: 700; line-height: 1.1;
  font-variant-numeric: tabular-nums;
  color: var(--text-primary); white-space: nowrap;
}
.m-readout-value.is-radiant { color: var(--side-radiant-text); }
.m-readout-value.is-dire { color: var(--side-dire-text); }

/* a legend swatch row */
.m-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; }
.m-legend-item { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-secondary); }
.m-swatch { width: 10px; height: 10px; border-radius: 2px; background: var(--color-rdy-steel); flex: 0 0 auto; }
.m-swatch--radiant { background: var(--side-radiant); }
.m-swatch--dire { background: var(--side-dire); }

/* cross module player highlight, driven by MatchTimeline.highlightPlayer */
.m-hl { transition: background .14s ease, box-shadow .14s ease, opacity .14s ease; }
.m-hl.is-hl {
  background: color-mix(in srgb, var(--color-rdy-white) 8%, transparent);
  box-shadow: inset 2px 0 0 var(--color-rdy-fresh-green);
}
.match-page.has-hl .m-hl:not(.is-hl) { opacity: .55; }

/* segmented control, used by charts that toggle a series */
.m-seg { display: inline-flex; padding: 2px; gap: 2px; border: 1px solid var(--border-soft); border-radius: var(--radius-pill); background: var(--surface-raised); }
.m-seg-btn {
  height: 24px; padding: 0 12px;
  border-radius: var(--radius-pill);
  background: transparent; color: var(--text-secondary);
  font-size: 12px; font-weight: 600; cursor: pointer;
  white-space: nowrap;
  transition: color .15s ease, background .15s ease;
}
.m-seg-btn:hover { color: var(--text-primary); }
.m-seg-btn[aria-pressed="true"] { background: var(--color-rdy-bright-night); color: var(--text-primary); }

/* a fixed geometry bar, so two rows of the same panel are comparable */
.m-bar-track {
  position: relative; height: 8px; border-radius: var(--radius-pill);
  background: var(--color-rdy-white-5); overflow: hidden;
}
.m-bar-fill { position: absolute; top: 0; bottom: 0; left: 0; border-radius: var(--radius-pill); background: var(--color-rdy-steel); }
.m-bar-fill--radiant { background: var(--side-radiant); }
.m-bar-fill--dire { background: var(--side-dire); }

/* ---------- 7. Safety breakpoints and reduced motion ---------- */
@media (max-width: 1279px) {
  .match-page .page-grid { --width-sidebar: 288px; }
}

@media (max-width: 1200px) {
  .m-bn-row { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 12px; }
  .m-bn-crest .team-logo, .m-bn-crest .monogram { width: 48px; height: 48px; }
}

/* SAFETY ONLY. Full mobile is a later phase. */
@media (max-width: 1023px) {
  .m-bn-row { grid-template-columns: minmax(0, 1fr); justify-items: center; }
  .m-bn-team--dire { justify-content: flex-start; text-align: left; }
  .m-bn-team--dire .m-bn-names { align-items: flex-start; }
  .m-bn-links { margin-left: 0; }
  .match-page .side-col > .mount:first-child { position: static; }
  /* nothing in a stacked single column sticks, the rail placeholder least
     of all: it would pin 600px of dashed box over the article */
  .match-page .side-col > .ad-slot--rail { position: static; }
  .mt-tl-head { gap: 10px; }
  .mt-tl-hint { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .mt-tl-mark, .mt-tl-mark-label, .mt-tl-edge, .m-hl { transition: none; }
  .mt-tl-cursor { will-change: auto; }
}

/* ============================================================
   20. COMPACT  (2026-09-12)
   ------------------------------------------------------------
   Pedro: "we have too much information on the screen. Let's do a compact
   version, maintaining the value, but less details."

   COMPACT is the default and the shipped state of this page. Every rule in
   this block is scoped to body.is-compact or to a class an expander owns, so
   DETAILED is the page exactly as it was built, minus nothing. Nothing here
   deletes a figure: what it hides is inside a panel whose button says what it
   holds and how many, or behind an info tip beside the label it explains.

   The one thing this block may NOT do is move a number out of reach. Every
   reading on this page is on screen, one expander click away, or one info tip
   click away. Never more than two.
   ============================================================ */

/* ---------- 20.1 the density control, in the series header row ---------- */
.m-sh-density {
  display: flex; flex-direction: column; align-items: flex-start; justify-content: center;
  gap: 6px;
  flex: 0 0 auto;
  padding: 0 2px;
}
.m-sh-density-label {
  font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--text-tertiary);
}
@media (max-width: 1023px) {
  .m-sh-density { align-items: stretch; }
  .m-sh-density .m-density { justify-content: center; }
}

/* ---------- 20.2 the header block: series header and banner read as one ---------- */
body.is-compact .m-banner-mount { padding-top: 8px; }
body.is-compact .m-bn-inner { padding: 12px 20px; }
body.is-compact .m-bn-title { margin-top: 6px; }
body.is-compact .m-bn-foot { margin-top: 10px; padding-top: 10px; }

/* the fact strip, as one muted line */
.m-bn-factline {
  display: flex; flex-wrap: wrap; align-items: baseline;
  gap: 3px 18px;
  margin: 10px 0 0;
  font-size: 12.5px; line-height: 1.5;
  font-variant-numeric: tabular-nums;
}
.m-bn-factbit { display: inline-flex; align-items: baseline; gap: 6px; min-width: 0; }
.m-bn-factbit-label {
  font-size: 10px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
  color: var(--text-tertiary);
}
.m-bn-factbit-value { color: var(--text-secondary); }
.m-bn-winchip { letter-spacing: .04em; }

/* ---------- 20.3 card rhythm ---------- */
body.is-compact .stack-lg { gap: 12px; }
body.is-compact .card-header { margin-bottom: 10px; }
body.is-compact .mt-eco .card-header .subtitle,
body.is-compact .mt-sb .card-header .subtitle,
body.is-compact .mt-it .card-header .subtitle,
body.is-compact .mt-wd .card-header .subtitle,
body.is-compact .mt-mo .card-header .subtitle,
body.is-compact .mt-dr .card-header .subtitle,
body.is-compact .mt-pl .card-header .subtitle { display: none; }
body.is-compact .card-footer { margin-top: 10px; padding-top: 8px; }
body.is-compact .mt-mo-foot,
body.is-compact .mt-dr-foot { display: none; }

/* ---------- 20.4 Economy ---------- */
.mt-eco-more { display: flex; flex-direction: column; gap: 12px; }
.mt-eco-ro-grid--more { margin-top: 0; }
body.is-compact .mt-eco-plot { height: 250px; min-height: 0; }
body.is-compact .mt-eco-readout { align-self: start; }
/* DENS-1, 2026-09-12: the legend was deleted in compact, and it is the only
   place the three marker colours on the gold chart and on the sticky strip
   are decoded. A key is not detail, so it stays on screen and is tightened
   instead. */
body.is-compact .mt-eco-legend { font-size: 11px; gap: 4px 12px; }
body.is-compact .mt-eco-legend .m-legend-item { font-size: 11px; gap: 5px; }
body.is-compact .mt-eco-legend .m-swatch { width: 8px; height: 8px; }
body.is-compact .mt-eco-moment-label { margin-top: 8px; }

/* ---------- 20.5 Scoreboard: the six columns compact leaves out ----------
   A11Y-1, 2026-09-12. These six used to be collapsed with width:0,
   font-size:0 and color:transparent, which hides them from the eye and from
   nobody else: eighty-odd cells stayed in the accessibility tree, in
   find-in-page and in copy, so the row a screen reader read was not the row
   on screen. They are taken out of the render instead, the <col> and its
   cells together, which is the only way a table cell stops being announced.
   The colgroup is still twelve entries in the markup and the JS still
   stamps and paints all twelve, so no cell index ever shifts; the six that
   stay are given the whole width below, so the table still fills its card
   at every step. */
.mt-sb.is-cols-min .mt-sb-table col[data-col="lhdn"],
.mt-sb.is-cols-min .mt-sb-table col[data-col="c7"],
.mt-sb.is-cols-min .mt-sb-table col[data-col="c8"],
.mt-sb.is-cols-min .mt-sb-table col[data-col="c9"],
.mt-sb.is-cols-min .mt-sb-table col[data-col="talents"],
.mt-sb.is-cols-min .mt-sb-table col[data-col="aghs"],
.mt-sb.is-cols-min .mt-sb-table th[data-col="lhdn"],
.mt-sb.is-cols-min .mt-sb-table td[data-col="lhdn"],
.mt-sb.is-cols-min .mt-sb-table th[data-col="c7"],
.mt-sb.is-cols-min .mt-sb-table td[data-col="c7"],
.mt-sb.is-cols-min .mt-sb-table th[data-col="c8"],
.mt-sb.is-cols-min .mt-sb-table td[data-col="c8"],
.mt-sb.is-cols-min .mt-sb-table th[data-col="c9"],
.mt-sb.is-cols-min .mt-sb-table td[data-col="c9"],
.mt-sb.is-cols-min .mt-sb-table th[data-col="talents"],
.mt-sb.is-cols-min .mt-sb-table td[data-col="talents"],
.mt-sb.is-cols-min .mt-sb-table th[data-col="aghs"],
.mt-sb.is-cols-min .mt-sb-table td[data-col="aghs"] { display: none !important; }

/* the width the six give back goes to the six that stay */
.mt-sb.is-cols-min .mt-sb-table col[data-col="player"] { width: 31% !important; }
.mt-sb.is-cols-min .mt-sb-table col[data-col="lvl"]    { width: 7% !important; }
.mt-sb.is-cols-min .mt-sb-table col[data-col="kda"]    { width: 14% !important; }
.mt-sb.is-cols-min .mt-sb-table col[data-col="rates"]  { width: 14% !important; }
.mt-sb.is-cols-min .mt-sb-table col[data-col="gold"]   { width: 13% !important; }
.mt-sb.is-cols-min .mt-sb-table col[data-col="items"]  { width: 21% !important; }

body.is-compact .mt-sb-table th,
body.is-compact .mt-sb-table td { padding-top: 4px; padding-bottom: 4px; }
body.is-compact .mt-sb-tablewrap + .mt-sb-tablewrap { margin-top: 8px; }

/* ---------- 20.6 Purchases ---------- */
.mt-it-lanewrap { display: block; }
body.is-compact .mt-it-finhead { margin-bottom: 6px; }
body.is-compact .mt-it-fincard { padding: 7px 9px; }
body.is-compact .mt-it-fingrid { gap: 7px; }
body.is-compact .mt-it-fincap { margin-top: 6px; }

/* ---------- 20.7 Vision ---------- */
.mt-wd-aliveline {
  display: flex; align-items: center; flex-wrap: wrap;
  gap: 8px 12px;
}
.mt-wd-aliveline .mt-wd-readout--main { flex: 1 1 auto; margin: 0; }
.mt-wd-more { display: flex; flex-direction: column; gap: 12px; }
body.is-compact .mt-wd-grid { grid-template-columns: minmax(0, 1fr); }
body.is-compact .mt-wd-map { max-width: 400px; margin-inline: auto; }
body.is-compact .mt-wd-caption { margin-top: 6px; }

/* ---------- 20.8 Fights and objectives ---------- */
.mt-mo-clist { display: flex; flex-direction: column; }
.mt-mo-crow {
  display: grid;
  grid-template-columns: 52px 88px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 4px 8px;
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--text-secondary);
  font-family: inherit; font-size: 13px; line-height: 1.35;
  text-align: left;
  cursor: pointer;
  transition: background .12s ease, border-color .12s ease, color .12s ease;
}
.mt-mo-crow + .mt-mo-crow { border-top-color: var(--border-hair); border-top-left-radius: 0; border-top-right-radius: 0; }
.mt-mo-crow:hover { background: var(--color-rdy-white-5); color: var(--text-primary); }
.mt-mo-crow:focus-visible { outline: 2px solid var(--color-rdy-fresh-green); outline-offset: -2px; }
.mt-mo-crow.is-near { background: var(--color-rdy-white-5); border-color: var(--border-soft); color: var(--text-primary); }
.mt-mo-crow.is-at { border-color: var(--color-rdy-fresh-green); }
.mt-mo-crow.is-featured .mt-mo-crow-kind { color: var(--color-rdy-light-gold); }
.mt-mo-crow-time { font-variant-numeric: tabular-nums; font-weight: 700; color: var(--text-tertiary); }
.mt-mo-crow-kind {
  font-size: 10px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
  color: var(--text-tertiary);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.mt-mo-crow-headline { min-width: 0; }
.mt-mo-crow-gold { font-variant-numeric: tabular-nums; white-space: nowrap; text-align: right; }
.mt-mo-crow.is-radiant { box-shadow: inset 2px 0 0 var(--color-rdy-fresh-green); }
.mt-mo-crow.is-dire { box-shadow: inset 2px 0 0 var(--color-rdy-red); }

/* one reading at a time: the short list OR the full ladder */
.mt-mo.is-all-open .mt-mo-clist { display: none; }
.mt-mo-full { display: flex; flex-direction: column; gap: 14px; }

/* the biggest swing card at half the height it had */
body.is-compact .mt-mo-plays-grid { gap: 8px; }
body.is-compact .mt-mo-play { padding: 8px 10px; }
body.is-compact .mt-mo-play-headline { font-size: 13px; line-height: 1.35; }
body.is-compact .mt-mo-plays-title { margin-bottom: 6px; }
body.is-compact .mt-mo-plays .mt-mo-dead-row { display: none; }

/* ---------- 20.9 Draft ---------- */
.mt-dr-stepwrap { display: flex; flex-direction: column; gap: 12px; }
body.is-compact .mt-dr-teams { gap: 12px; }
body.is-compact .mt-dr-team-head { margin-bottom: 6px; }
body.is-compact .mt-dr-pick { padding: 3px 6px; }
body.is-compact .mt-dr-picks { gap: 3px; }
body.is-compact .mt-dr-bans { gap: 4px; }
body.is-compact .mt-dr-ban { padding: 2px 6px; }
body.is-compact .mt-dr-team .m-sub { margin: 6px 0 3px; }

/* ---------- 20.10 Player comparison ---------- */
.mt-pl-more { display: flex; flex-direction: column; gap: 14px; }
body.is-compact .mt-pl-caption { display: none; }
/* six rows by default, the other eight with the rest of the detail */
body.is-compact .mt-pl:not(.is-all-open) .mt-pl-browlist > .mt-pl-brow:nth-child(n + 7) { display: none; }
body.is-compact .mt-pl:not(.is-all-open) .mt-pl-bnote { display: none; }
body.is-compact .mt-pl-brow { padding-top: 2px; padding-bottom: 2px; }

/* ---------- 20.11 Head to head and recent form ---------- */
body.is-compact .mt-cx-teamline { margin: 0 0 6px; }
body.is-compact .mt-cx-coltitle { margin-bottom: 6px; }
body.is-compact .mt-cx-tally { margin-top: 6px; }

/* ---------- 20.12 The rail ---------- */
.mt-st-su-jumphead { display: flex; align-items: center; gap: 6px; margin-top: 10px; }
.mt-st-hg-exp { margin-top: 10px; }
.mt-st-hg .card-header .title { display: flex; align-items: center; gap: 6px; min-width: 0; }

/* ---------- 20.13 an info tip, inside a heading or an action ---------- */
.mt-mo-plays-title { display: flex; align-items: center; gap: 6px; }
.mt-eco-header .action { display: flex; align-items: center; gap: 8px; }

/* ---------- 20.14 second pass on the compact budget ---------- */

/* Vision: the map is the module, and 340 still reads every ward */
body.is-compact .mt-wd-map { max-width: 340px; }
body.is-compact .mt-wd-body { gap: 8px; }
body.is-compact .mt-wd-grid { gap: 8px; }

/* Purchases: ten inventory cards on two columns, tighter */
body.is-compact .mt-it-fincard { padding: 5px 8px; gap: 6px; }
body.is-compact .mt-it-fingrid { gap: 6px; }
body.is-compact .mt-it-finwho .hero-portrait { width: 34px; height: 20px; }
body.is-compact .mt-it-slot { width: 22px; height: 17px; }

/* Fights: the short rows and the swing card */
body.is-compact .mt-mo-crow { padding: 3px 8px; font-size: 12.5px; }
body.is-compact .mt-mo-play { padding: 6px 9px; }
body.is-compact .mt-mo-play-headline { font-size: 12.5px; }
body.is-compact .mt-mo .card-body.stack { gap: 10px; }

/* Draft: the board rows */
body.is-compact .mt-dr-pick { padding: 2px 6px; gap: 7px; }
body.is-compact .mt-dr-pick .hero-portrait { width: 38px; height: 22px; }
body.is-compact .mt-dr-pick-hero { font-size: 12.5px; line-height: 1.25; }
body.is-compact .mt-dr-pick-player { font-size: 11px; line-height: 1.25; }
body.is-compact .mt-dr-ban-img { width: 26px; height: 15px; }
body.is-compact .mt-dr-ban { font-size: 11px; }
body.is-compact .mt-dr .card-body.stack { gap: 10px; }

/* Scoreboard: twelve rows across two tables */
body.is-compact .mt-sb-table th,
body.is-compact .mt-sb-table td { padding-top: 2px; padding-bottom: 2px; }
body.is-compact .mt-sb-hero .hero-portrait { width: 30px; height: 17px; }
body.is-compact .mt-sb-pick .avatar { width: 24px; height: 24px; }
body.is-compact .mt-sb-itemslot { width: 20px; height: 15px; }

/* Head to head and recent form: shorter rows, the rules behind one 'i' */
.mt-cx-ruleline { display: flex; align-items: center; gap: 6px; margin: 0; }
body.is-compact .mt-cx-row,
body.is-compact .mt-cx-rows > * { padding-top: 3px; padding-bottom: 3px; }
body.is-compact .mt-cx-rows .hero-portrait,
body.is-compact .mt-cx-rows .team-logo,
body.is-compact .mt-cx-rows .monogram { width: 22px; height: 22px; }
body.is-compact .mt-cx-foot { margin-top: 8px; padding-top: 8px; }

/* Player comparison: the radar column is the radar */
body.is-compact .mt-pl-top { align-items: start; }
body.is-compact .mt-pl .card-body,
body.is-compact .mt-pl-sidecol { gap: 10px; }

/* ---------- 20.15 third pass: the last two modules over budget ---------- */

/* Fights: the swing card at half the height it had */
body.is-compact .mt-mo-play { padding: 5px 9px; gap: 3px; }
body.is-compact .mt-mo-play-top { gap: 6px; }
body.is-compact .mt-mo-play .mt-mo-time { font-size: 12px; }
body.is-compact .mt-mo-play-headline {
  font-size: 12.5px; line-height: 1.3;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
body.is-compact .mt-mo-play .mt-mo-play-meta,
body.is-compact .mt-mo-play .mt-mo-meta,
body.is-compact .mt-mo-play .mt-mo-spark { display: none; }
body.is-compact .mt-mo-crow { padding: 2px 8px; }

/* Draft: the board is picks, bans and the order badges, nothing else */
body.is-compact .mt-dr-pick { padding: 1px 6px; }
body.is-compact .mt-dr-pick .hero-portrait { width: 34px; height: 20px; }
body.is-compact .mt-dr-pick-hero { font-size: 12px; }
body.is-compact .mt-dr-pick-player { font-size: 10.5px; }
body.is-compact .mt-dr-picks { gap: 2px; }
body.is-compact .mt-dr-ban { padding: 1px 5px; font-size: 10.5px; }
body.is-compact .mt-dr-ban-img { width: 22px; height: 13px; }
body.is-compact .mt-dr-bans { gap: 3px; }
body.is-compact .mt-dr-team .m-sub {
  margin: 5px 0 2px;
  font-size: 9.5px; line-height: 1.2;
}

/* ============================================================
   21. FIX PASS ON THE COMPACT DEFAULT, 2026-09-12
   Controls that looked live but drove nothing now sit with the thing they
   drive, the two rules that only compact needs get an info affordance, and
   the one datum compact could not reach comes back on the fact line.
   ============================================================ */

/* ---------- 21.1 Fights and objectives: one head per reading ---------- */

/* the short list says what it holds and why, and hands the rule to an 'i' */
.mt-mo-chead {
  display: flex; align-items: center; flex-wrap: wrap;
  gap: 6px 10px;
  margin-bottom: 2px;
}
.mt-mo-chead-label {
  font-size: 10px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
  color: var(--text-tertiary);
}
.mt-mo-chead-count { font-size: 11.5px; font-variant-numeric: tabular-nums; }

/* the filter belongs to the ladder it filters, so it travels into the panel */
.mt-mo-fullhead { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; }

/* one reading at a time, head included */
.mt-mo.is-all-open .mt-mo-chead { display: none; }

/* ---------- 21.2 Purchases: the consumables chip joins the lanes ---------- */
.mt-it-lanehead { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; }

/* ---------- 21.3 The rail: five landmarks, printed once ---------- */
/* the sticky strip carries the same five jumps and never scrolls away, so in
   compact the summary keeps only the label and the rule behind its 'i' */
body.is-compact .mt-st-su-jumps { display: none; }

/* ---------- 21.4 The rail: ten player pages behind their own count ---------- */
.mt-st-lk-playersexp { margin-top: 2px; }
.mt-st-lk-playersexp .m-expander-panel { padding-top: 6px; }