/* report.css — the report at three scopes. Tokens only; no raw hex. */

/* One spacing scale for the whole page (R-F, R-I). Every gap, every padding
   below names one of these five steps, so a section, a block, a card and a
   chip keep the same rhythm wherever they are drawn. `--rp-tight` is the
   smallest step: no heading, number or box edge sits closer than this. */
.hub-report {
  --rp-section: var(--s7);  /* 48 — between two sections */
  --rp-block:   var(--s5);  /* 24 — between blocks inside a section */
  --rp-row:     var(--s3);  /* 12 — between rows and chips */
  --rp-card:    var(--s4);  /* 16 — inside a card */
  --rp-chip:    var(--s3);  /* 12 — inside a chip */
  --rp-tight:   var(--s2);  /*  8 — the smallest step */
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--rp-section);
}
/* A wide table inside a grid track would stretch the track and take the whole
   page sideways with it, so every box down to the table clamps to its column
   and lets the table scroll inside its own frame. */
.hub-report .report-section,
.hub-report .report-player,
.hub-report .report-takeaway-row,
.hub-report .report-table-scroll { min-inline-size: 0; }

/* ---- head, period control, night picker --------------------------------- */
.report-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--rp-row) var(--rp-block);
}
.report-head__title { display: grid; gap: 2px; }
.report-head__controls { display: flex; flex-wrap: wrap; align-items: center; gap: var(--rp-row); }
.report-head__controls .report-scope { margin-top: 0; }
.report-head h1 {
  font-family: var(--font-display);
  font-size: var(--fs-h1);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  margin: 0;
}
.report-head__sub {
  margin: 0;
  color: var(--ink-muted);
  font-size: var(--fs-sm);
  font-variant-numeric: tabular-nums;
}
.report-scope { display: flex; gap: var(--s2); flex-wrap: wrap; margin-top: var(--s2); }
.report-scope__tab {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  padding-inline: var(--s4);
  border: 1px solid var(--border);
  border-radius: var(--r-2);
  color: var(--ink-muted);
  font-size: var(--fs-sm);
  font-weight: var(--fw-med);
  text-decoration: none;
  background: var(--surface-1);
}
.report-scope__tab:hover { color: var(--ink); border-color: var(--border-strong); }
.report-scope__tab[aria-current] {
  background: var(--surface-3);
  border-color: var(--border-strong);
  color: var(--ink);
  font-weight: var(--fw-semi);
}
.report-scope__tab:focus-visible { outline: var(--focus-ring); outline-offset: 2px; }

.report-session-picker { display: flex; align-items: center; gap: var(--s3); flex-wrap: wrap; }
.report-session-picker__label {
  color: var(--ink-faint);
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: var(--ls-eyebrow);
}

/* ---- the sticky section strip ------------------------------------------- */
/* The match report's strip wraps; this one stays one line and scrolls, so the
   bar pinned to the top of a phone costs one row of height, not three. */
.hub-report .report-nav {
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  flex-wrap: nowrap;
  gap: var(--s2);
  overflow-x: auto;
  scrollbar-width: thin;
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--r-2);
  padding: var(--rp-tight) var(--rp-chip);
  margin-block: calc(var(--rp-section) * -0.5) calc(var(--rp-block) - var(--rp-section));
}
/* The strip holds more than a phone is wide, so its right edge fades rather
   than ending on a hard cut that looks like the last section. A strip that
   fits keeps its edge: a fade over nothing reads as a cut. */
.hub-report .report-nav[data-overflows] {
  mask-image: linear-gradient(to right, #000 calc(100% - 44px), transparent);
}
.hub-report .report-nav::-webkit-scrollbar { block-size: 6px; }
.hub-report .report-nav::-webkit-scrollbar-track { background: var(--surface-2); border-radius: var(--r-pill); }
.hub-report .report-nav::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: var(--r-pill); }
.hub-report .report-nav button {
  min-height: 44px;
  white-space: nowrap;
  padding-inline: var(--s3);
  border: 0;
  border-radius: var(--r-1);
  background: transparent;
  color: var(--ink-muted);
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  cursor: pointer;
}
.hub-report .report-nav button:hover { color: var(--ink); background: var(--surface-3); }
.hub-report .report-nav button[aria-current] {
  color: var(--ink);
  background: var(--surface-3);
  font-weight: var(--fw-semi);
}
.hub-report .report-nav button:focus-visible { outline: var(--focus-ring); outline-offset: -2px; }

/* ---- sections ----------------------------------------------------------- */
.hub-report .report-section {
  scroll-margin-top: calc(var(--rp-strip, 56px) + var(--rp-block));
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--rp-block);
  align-content: start;
  min-inline-size: 0;
}
.hub-report .report-section > * { min-inline-size: 0; }
/* The site's rule sits above every section title. The title clears it by a
   full block step, so the rule reads as a divider and not as an underline. */
.hub-report .report-section > .section-header {
  margin: 0;
  padding-top: var(--rp-block);
  border-top: 2px solid var(--ink);
}
.hub-report .report-section > .section-header__sub,
.hub-report .report-section > .section-header .section-header__sub { margin-top: var(--rp-tight); }
.report-not-ready { color: var(--ink-faint); margin: 0; }

/* The definition pip is the only control that sits inside running text, so it
   carries a full 44px box of its own and keeps the small drawn ring. */
.hub-report .gloss-btn {
  width: 44px;
  height: 44px;
  font-size: 11px;
  border-color: transparent;
  background: none;
  margin-left: 0;
  flex: none;
}
.hub-report .gloss-btn::before {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  inline-size: 16px;
  block-size: 16px;
  border: 1px solid var(--border-strong);
  border-radius: var(--r-pill);
}
.hub-report .gloss-btn::after { inset: 0; }
.hub-report .gloss-btn:hover::before,
.hub-report .gloss-btn[aria-expanded="true"]::before { border-color: var(--gold-line); }

/* Every control on the report answers a finger, whichever section drew it:
   the period tabs, the metric tabs, the column sorts, the expand rows.
   The definition pip carries its own box above. */
.hub-report button:not(.gloss-btn) {
  min-block-size: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.hub-report .report-table th button[data-sort], .hub-report .report-compare th button:not(.gloss-btn) { justify-content: flex-start; text-align: start; }
/* An expand is a control too: the row that opens the rest of a list, or a
   measure, answers the same finger. */
/* 44px, not 40: under the page-enter transform a 40px box measures 39.996 and
   a target-size audit is right to call that a miss. */
.hub-report summary { min-block-size: 44px; display: flex; align-items: center; gap: var(--rp-tight); }

/* ---- the letter, and the mark that stands in for one --------------------- */
.report-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 24px;
  block-size: 24px;
  flex: none;
  border-radius: var(--r-1);
  border: 1px solid var(--border-strong);
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  line-height: 1;
  color: var(--ink);
  background: var(--surface-3);
}
.report-mark--s { color: var(--bg); border-color: var(--ink); background: var(--ink); }
.report-mark--a { color: var(--ink); border-color: var(--ink); background: var(--surface-3); }
.report-mark--b { color: var(--ink); border-color: var(--border-strong); background: transparent; }
.report-mark--c { color: var(--ink-muted); border-color: var(--border); background: transparent; }
.report-mark--d { color: var(--accent); border-color: var(--accent); background: var(--gold-soft); }
.report-mark--ungraded {
  color: var(--ink-faint);
  border-style: dashed;
  background: transparent;
  font-weight: var(--fw-reg);
}

/* ---- one block per player, never interleaved ---------------------------- */
.report-player {
  display: grid;
  gap: var(--rp-block);
  padding-block: var(--rp-block);
  border-top: 1px solid var(--border);
  min-inline-size: 0;
}
.report-player:first-of-type { border-top: 0; padding-block-start: 0; }
.report-player:last-of-type { padding-block-end: 0; }
.report-player__name {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--fs-h2);
  letter-spacing: var(--ls-tight);
}
.report-player[data-report-player="casual"] .report-player__name { color: var(--player-a); }
.report-player[data-report-player="kolerocks"] .report-player__name { color: var(--player-b); }

.report-takeaway-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(15rem, 20rem);
  align-items: start;
  gap: var(--rp-block);
}
.report-takeaway-copy { display: grid; gap: var(--rp-row); align-content: start; min-inline-size: 0; }
.report-takeaway {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--fs-h1);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  font-weight: var(--fw-semi);
  max-inline-size: 42ch;
}
/* The two ends of the period are the two phrases the eye should land on, and
   they take the same two ends of the bar ladder: the thing that went well in
   the colour a full bar is, the thing to work on in the colour an empty one
   is. One ladder, read the same way everywhere on the page. */
.report-takeaway__mark { color: var(--defense-ink); }
.report-takeaway__mark--weak { color: var(--accent); }
.report-takeaway__explain {
  margin: 0;
  color: var(--ink-muted);
  font-size: var(--fs-sm);
  line-height: var(--lh-body);
  max-inline-size: 62ch;
}
.report-takeaway__lines { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--rp-tight); }
.report-takeaway__lines li {
  color: var(--ink-muted);
  font-size: var(--fs-sm);
  line-height: var(--lh-body);
  font-variant-numeric: tabular-nums;
  padding-inline-start: var(--rp-chip);
  border-inline-start: 2px solid var(--border-strong);
}

/* The right-hand stack: the overall, then the three numbers with their deltas. */
.report-head-side { display: grid; gap: var(--rp-row); align-content: start; min-inline-size: 0; }

.report-overall {
  display: grid;
  grid-template-columns: auto auto;
  align-items: center;
  gap: var(--rp-tight) var(--rp-chip);
  padding: var(--rp-card);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-2);
  background: var(--surface-2);
}
.report-overall__label {
  grid-column: 1 / -1;
  color: var(--ink-faint);
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: var(--ls-eyebrow);
}
.report-overall__value {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: var(--fs-hero);
  line-height: var(--lh-tight);
}
/* The overall is the anchor of the page, so its letter is read at the same
   size as its number rather than as a badge stuck beside it. */
.report-overall {
  border-width: 2px;
  border-color: var(--ink);
}
.report-overall .report-grade {
  font-size: var(--fs-hero);
  inline-size: calc(var(--s7) + var(--s2));
  block-size: calc(var(--s7) + var(--s2));
}
.report-overall__support { grid-column: 1 / -1; color: var(--ink-faint); font-size: var(--fs-xs); }

.report-head-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--rp-tight);
  margin: 0;
  padding: 0;
  list-style: none;
}
.report-head-stat {
  display: grid;
  gap: 2px;
  padding: var(--rp-chip);
  border: 1px solid var(--border);
  border-radius: var(--r-2);
  background: var(--surface-2);
  min-inline-size: 0;
}
.report-head-stat__name,
.report-keystat__name {
  display: flex;
  align-items: center;
  gap: var(--s1);
  color: var(--ink-muted);
  font-size: var(--fs-xs);
  line-height: var(--lh-snug);
  min-inline-size: 0;
}
/* The three head numbers are short labels next to big figures; a name that
   wraps to three lines makes three boxes of different heights. */
.report-head-stat__name { display: flex; align-items: center; gap: 0; }
.report-head-stat__name .gloss-btn { margin-inline-start: calc(var(--rp-tight) * -1); }
.report-head-stat__value {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: var(--fs-h2);
  line-height: var(--lh-tight);
}
.report-head-stat__delta { color: var(--ink-faint); font-size: var(--fs-xs); font-variant-numeric: tabular-nums; }

/* ---- key-stat chips ----------------------------------------------------- */
.report-keystats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: var(--s3);
  list-style: none;
  margin: 0;
  padding: 0;
}
.report-keystat {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--s1) var(--s3);
  min-height: 44px;
  padding: var(--s3);
  border: 1px solid var(--border);
  border-radius: var(--r-2);
  background: var(--surface-2);
}
.report-keystat__name { grid-column: 1 / -1; }
.report-keystat__value {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: var(--fs-h2);
}
.report-keystat__vs {
  grid-column: 1 / -1;
  color: var(--ink-faint);
  font-size: var(--fs-xs);
  font-variant-numeric: tabular-nums;
}

/* ---- the detailed metrics table ----------------------------------------- */
.hub-report .report-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2);
  margin-bottom: var(--s3);
}
.hub-report .report-tabs button {
  min-height: 44px;
  padding-inline: var(--s4);
  border: 1px solid var(--border);
  border-radius: var(--r-2);
  background: var(--surface-1);
  color: var(--ink-muted);
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  cursor: pointer;
}
.hub-report .report-tabs button:hover { color: var(--ink); border-color: var(--border-strong); }
.hub-report .report-tabs button[aria-selected="true"] {
  background: var(--surface-3);
  border-color: var(--border-strong);
  color: var(--ink);
  font-weight: var(--fw-semi);
}
.hub-report .report-tabs button:focus-visible { outline: var(--focus-ring); outline-offset: 2px; }

.hub-report .report-table-scroll {
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: var(--r-2);
}
/* Ten columns run past the frame, and the system's overlay scrollbar is
   invisible until it is already being used, so this one is drawn: a rail under
   the table that says there are columns to the side of the ones you can see. */
.hub-report .report-table-scroll::-webkit-scrollbar { block-size: 10px; }
.hub-report .report-table-scroll::-webkit-scrollbar-track {
  background: var(--surface-2);
  border-top: 1px solid var(--border);
}
.hub-report .report-table-scroll::-webkit-scrollbar-thumb {
  background: var(--border-strong);
  border-radius: var(--r-pill);
}
.hub-report .report-table-scroll:focus-visible { outline: var(--focus-ring); outline-offset: 2px; }
.hub-report .report-table { border-collapse: collapse; width: 100%; font-size: var(--fs-data); }
.hub-report .report-table th,
.hub-report .report-table td {
  padding: var(--s2) var(--s3);
  text-align: right;
  white-space: nowrap;
  border-bottom: 1px solid var(--border);
}
.hub-report .report-table thead th {
  position: sticky;
  top: 0;
  background: var(--surface-1);
  border-bottom: 1px solid var(--border-strong);
  vertical-align: bottom;
}
.hub-report .report-table thead th > *{ vertical-align: middle; }
.hub-report .report-table th[scope="row"],
.hub-report .report-table thead th:first-child { text-align: left; }
.hub-report .report-table th[scope="row"] {
  position: sticky;
  inset-inline-start: 0;
  background: var(--surface-1);
  font-weight: var(--fw-med);
  z-index: 1;
}
.hub-report .report-table td { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.hub-report .report-table td .report-mark {
  inline-size: 20px;
  block-size: 20px;
  font-size: var(--fs-xs);
  margin-inline-start: var(--s2);
  vertical-align: middle;
}
.hub-report .report-table__value { display: inline-block; min-inline-size: 4.25rem; }
/* 44px, not 40: under the page-enter transform a 40px box measures 39.996
   and a target-size audit is right to call that a miss. */
.hub-report .report-table__sort {
  min-height: 44px;
  border: 0;
  background: none;
  color: var(--ink-muted);
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semi);
  text-align: right;
  white-space: normal;
  max-inline-size: 8rem;
  cursor: pointer;
}
.hub-report .report-table__sort:hover { color: var(--ink); }
.hub-report .report-table__sort:focus-visible { outline: var(--focus-ring); outline-offset: -2px; }
.hub-report .report-table th[aria-sort="descending"] .report-table__sort::after { content: " ↓"; }
.hub-report .report-table th[aria-sort="ascending"] .report-table__sort::after { content: " ↑"; }
.hub-report .report-table__agent {
  display: block;
  color: var(--ink-faint);
  font-size: var(--fs-xs);
  font-weight: var(--fw-reg);
}
/* The duo is marked by shape as well as by tone. */
.hub-report .report-table tbody tr[data-player-key] { background: var(--surface-3); }
.hub-report .report-table tbody tr[data-player-key] th[scope="row"] { background: var(--surface-3); }
.hub-report .report-table tbody tr[data-player-key] th[scope="row"]::before { content: "▸ "; }
.hub-report .report-table tbody tr[data-row-kind="immortal"] th[scope="row"],
.hub-report .report-table tbody tr[data-row-kind="cohort"] th[scope="row"] { color: var(--ink-muted); font-style: italic; }

/* The mark on a comparison row says the same thing in every cell, so it stays
   a quiet glyph and lets the numbers carry the row. */
.hub-report .report-table td .report-mark--ungraded {
  border: 0;
  background: none;
  inline-size: auto;
  min-inline-size: var(--s3);
}

/* The shared table stacks into cards below 600px and hides its head with them.
   This one keeps its head, because the head carries the sort and the
   definition of every column, so it stays a table that scrolls sideways with
   the player column pinned. */
@media (max-width: 600px) {
  .hub-report .report-table-scroll { overflow-x: auto; }
  .hub-report .report-table,
  .hub-report .report-table thead,
  .hub-report .report-table tbody { display: table; }
  .hub-report .report-table { width: 100%; font-size: var(--fs-xs); }
  .hub-report .report-table thead {
    position: static;
    width: 100%;
    height: auto;
    overflow: visible;
    clip-path: none;
    display: table-header-group;
  }
  .hub-report .report-table tbody { display: table-row-group; }
  .hub-report .report-table tr { display: table-row; padding: 0; gap: 0; }
  .hub-report .report-table th,
  .hub-report .report-table td {
    display: table-cell;
    padding: var(--s2) var(--s3);
    border-bottom: 1px solid var(--border);
  }
  .hub-report .report-table td::before { content: none; }
  .hub-report .report-table__value { min-inline-size: 3.5rem; }
  .hub-report .report-nav button { flex: none; padding-inline: var(--s3); }
}

/* ---- the power graph (R-C, R-D, R-L) ------------------------------------ */
/* The figure on the left, one row per category beside it. */
.hub-report .report-power {
  display: grid;
  grid-template-columns: minmax(0, 26rem) minmax(0, 1fr);
  gap: var(--rp-block);
  align-items: start;
}
.hub-report .report-power__plot { margin: 0; display: grid; gap: var(--rp-tight); justify-items: center; }
.hub-report .report-power__basis {
  margin: 0;
  color: var(--ink-faint);
  font-size: var(--fs-xs);
  text-align: center;
  max-inline-size: 42ch;
}
.hub-report .report-power__rows { display: grid; gap: var(--rp-row); align-content: start; min-inline-size: 0; }

/* The radar. A soft fill so the shape reads at a glance, a crisp outline so the
   points are placed, rings that carry their own scale, and labels outside the
   plot with the number under the name. */
.report-radar { inline-size: 100%; block-size: auto; max-inline-size: 26rem; overflow: visible; }
.report-radar--compact { max-inline-size: 11rem; }
.report-radar__ring { fill: none; stroke: var(--border); stroke-width: 1; }
.report-radar__spoke { stroke: var(--border); stroke-width: 1; }
.report-radar__spoke--empty { stroke-dasharray: 2 3; }
.report-radar__ring-label {
  fill: var(--ink-faint);
  font-family: var(--font-body);
  font-size: 9px;
  font-variant-numeric: tabular-nums;
  paint-order: stroke;
  stroke: var(--bg);
  stroke-width: 3px;
  stroke-linejoin: round;
}
/* A figure says whose it is. The default is a neutral ink, so eight strangers
   on a team card do not wear Casual's colour and hide the two of you among
   them; only your cards take your colours. */
.report-radar__area {
  fill: color-mix(in oklab, var(--ink-muted) 16%, transparent);
  stroke: var(--ink-muted);
  stroke-width: 2;
  stroke-linejoin: round;
}
.report-radar__thread { stroke: var(--ink-muted); stroke-width: 2; }
.report-radar__point { fill: var(--ink-muted); }
.hub-report [data-report-player="casual"] .report-radar__area,
.hub-report [data-player-key="casual"] .report-radar__area { fill: var(--player-a-soft); stroke: var(--player-a); }
.hub-report [data-report-player="casual"] .report-radar__point,
.hub-report [data-player-key="casual"] .report-radar__point { fill: var(--player-a); }
.hub-report [data-report-player="casual"] .report-radar__thread { stroke: var(--player-a); }
.report-radar__name {
  fill: var(--ink-muted);
  font-family: var(--font-body);
  font-size: 12px;
}
.report-radar__value {
  fill: var(--ink);
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: var(--fw-semi);
  font-variant-numeric: tabular-nums;
}
.report-radar__axis--empty .report-radar__name { fill: var(--ink-faint); }
.report-radar--compact .report-radar__name { font-size: 9px; }
.report-radar--compact .report-radar__value { font-size: 11px; }
/* Whose figure this is, in the colour the rest of the site gives them. */
.hub-report [data-report-player="kolerocks"] .report-radar__area,
.hub-report [data-player-key="kolerocks"] .report-radar__area { fill: var(--player-b-soft); stroke: var(--player-b); }
.hub-report [data-report-player="kolerocks"] .report-radar__point,
.hub-report [data-player-key="kolerocks"] .report-radar__point { fill: var(--player-b); }
.hub-report [data-report-player="kolerocks"] .report-radar__thread { stroke: var(--player-b); }

/* One category row: what it is, what it is for, its number and its letter. */
.report-category { display: grid; gap: var(--rp-tight); padding-top: var(--rp-row); border-top: 1px solid var(--border); }
.report-category:first-child { border-top: 0; padding-top: 0; }
.report-category__head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(11rem, 18rem);
  gap: var(--rp-row) var(--rp-block);
  align-items: center;
}
.report-category__copy { display: grid; gap: 2px; min-inline-size: 0; }
.report-category__name {
  display: flex;
  align-items: center;
  gap: var(--rp-tight);
  margin: 0;
  font-size: var(--fs-h3);
  font-weight: var(--fw-semi);
}
.report-category__purpose { margin: 0; color: var(--ink-muted); font-size: var(--fs-sm); }
.report-category__basis { color: var(--ink-faint); font-variant-numeric: tabular-nums; }

/* The bar carries the number at its end and the letter after it (R-L). */
.report-score { display: flex; align-items: center; gap: var(--rp-chip); min-inline-size: 0; padding-inline-end: var(--rp-tight); }
.report-score__bar {
  flex: 1 1 auto;
  min-inline-size: 3rem;
  block-size: 8px;
  border-radius: var(--r-pill);
  background: var(--surface-3);
  overflow: hidden;
}
.report-score__fill { display: block; block-size: 100%; border-radius: inherit; background: var(--ink-muted); }
/* One ladder for every fill on the page, on the letters' own thresholds: a
   reader learns it once and reads every bar, every chip hairline and every
   letter with it. */
[data-band="s"] .report-score__fill, [data-band="s"] .report-chip__standing-fill { background: var(--defense); }
[data-band="a"] .report-score__fill, [data-band="a"] .report-chip__standing-fill { background: var(--defense-ink); }
[data-band="b"] .report-score__fill, [data-band="b"] .report-chip__standing-fill { background: var(--ink); }
[data-band="c"] .report-score__fill, [data-band="c"] .report-chip__standing-fill { background: var(--ink-faint); }
[data-band="d"] .report-score__fill, [data-band="d"] .report-chip__standing-fill { background: var(--accent); }
.report-score__value {
  flex: none;
  min-inline-size: 2.5ch;
  text-align: right;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: var(--fs-h3);
}
/* A row with no number says so quietly, in the page's own voice rather than in
   the figure type the numbers use. */
.report-score__value--none {
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  color: var(--ink-faint);
  min-inline-size: 0;
}

/* Three to five chips per row; the rest behind one expand. */
.report-chips {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: var(--rp-row);
  list-style: none;
  margin: 0;
  padding: 0;
}
.report-chip {
  position: relative;
  display: grid;
  gap: 2px;
  align-content: start;
  padding: var(--rp-tight) var(--rp-chip);
  padding-block-end: calc(var(--rp-tight) + 3px);
  border: 1px solid var(--border);
  border-radius: var(--r-2);
  background: var(--surface-2);
  min-inline-size: 0;
  overflow: hidden;
}
.report-chip__name {
  display: block;
  color: var(--ink-muted);
  font-size: var(--fs-xs);
  line-height: var(--lh-snug);
}
.report-chip__name .gloss-btn { float: inline-end; margin-block-start: -13px; }
.report-chip__reading { display: flex; align-items: center; gap: var(--rp-tight); }
.report-chip__value {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: var(--fs-h3);
  line-height: 1.1;
}
.report-chip__vs { color: var(--ink-faint); font-size: var(--fs-xs); font-variant-numeric: tabular-nums; }
/* The standing under a chip is a hairline, not a second number to read. */
.report-chip__standing {
  position: absolute;
  inset-block-end: 0;
  inset-inline: 0;
  block-size: 3px;
  background: var(--surface-3);
}
.report-chip__standing-fill { display: block; block-size: 100%; background: var(--ink-muted); }
.hub-report .report-category__all > summary { color: var(--ink-muted); font-size: var(--fs-sm); }
.hub-report .report-category__all[open] > summary { margin-bottom: var(--rp-row); }

@media (max-width: 1000px) {
  .hub-report .report-power { grid-template-columns: minmax(0, 1fr); justify-items: stretch; }
  .hub-report .report-power__plot { justify-items: start; }
  .hub-report .report-power__basis { text-align: start; }
}
@media (max-width: 560px) {
  .report-category__head { grid-template-columns: minmax(0, 1fr); }
}

/* ---- the full breakdown -------------------------------------------------- */
.report-breakdown {
  border: 1px solid var(--border);
  border-radius: var(--r-2);
  background: var(--surface-2);
}
.report-breakdown + .report-breakdown { margin-top: var(--s3); }
.report-breakdown > summary {
  display: flex;
  align-items: center;
  gap: var(--s3);
  min-height: 44px;
  padding: var(--rp-chip) var(--rp-card);
  cursor: pointer;
  font-weight: var(--fw-semi);
  list-style: none;
}
.report-breakdown > summary::-webkit-details-marker { display: none; }
.report-breakdown > summary::before { content: "▶"; font-size: var(--fs-xs); color: var(--ink-faint); }
.report-breakdown__name { font-weight: var(--fw-semi); }
.report-breakdown__count { color: var(--ink-faint); font-size: var(--fs-xs); margin-inline-end: auto; }
.report-breakdown__score { font-family: var(--font-mono); font-variant-numeric: tabular-nums; min-inline-size: 3ch; text-align: right; }
.report-breakdown[open] > summary::before { content: "▼"; }
.report-breakdown > summary:focus-visible { outline: var(--focus-ring); outline-offset: -2px; }
.report-breakdown__rows { border-top: 1px solid var(--border); }

.report-breakdown__unmeasured {
  border-top: 1px solid var(--border);
  padding: var(--rp-chip) var(--rp-card) var(--s3) var(--rp-card);
}
.report-breakdown__unmeasured-label {
  margin: 0 0 var(--s2) 0;
  color: var(--ink-faint);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semi);
  text-transform: uppercase;
  letter-spacing: 0.02em;
}
.report-breakdown__unmeasured-rows { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s1); }
.report-breakdown__unmeasured-row {
  display: grid;
  grid-template-columns: minmax(11rem, 1.2fr) minmax(0, 1.6fr);
  gap: var(--rp-chip);
  align-items: baseline;
}
.report-breakdown__unmeasured-name { font-weight: var(--fw-med); }
.report-breakdown__unmeasured-reason { color: var(--ink-faint); font-size: var(--fs-sm); }
@media (max-width: 640px) {
  .report-breakdown__unmeasured-row { grid-template-columns: 1fr; gap: 2px; }
}

.report-measure { border-bottom: 1px solid var(--border); }
.report-measure:last-child { border-bottom: 0; }
.report-measure summary {
  display: grid;
  grid-template-columns: minmax(11rem, 1.2fr) minmax(0, 1.6fr) 6rem auto auto;
  align-items: center;
  gap: var(--rp-chip);
  min-height: 44px;
  padding: var(--rp-chip) var(--rp-card);
  cursor: pointer;
  list-style: none;
}
.report-measure summary::-webkit-details-marker { display: none; }
.report-measure summary:hover { background: var(--surface-3); }
.report-measure summary:focus-visible { outline: var(--focus-ring); outline-offset: -2px; }
.report-measure__name { display: grid; gap: 2px; font-weight: var(--fw-med); min-inline-size: 0; }
.report-measure__vs { color: var(--ink-faint); font-size: var(--fs-xs); font-weight: var(--fw-reg); font-variant-numeric: tabular-nums; }
.report-measure__what { color: var(--ink-faint); font-size: var(--fs-sm); }
.report-measure__value {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  text-align: right;
}
.report-measure__reading { display: grid; gap: 2px; min-inline-size: 0; }
.report-measure__standing {
  color: var(--ink-faint);
  font-size: var(--fs-xs);
  font-variant-numeric: tabular-nums;
}
.report-measure__detail {
  display: grid;
  gap: var(--s2);
  padding: 0 var(--s4) var(--s4) var(--s4);
  color: var(--ink-muted);
  font-size: var(--fs-sm);
  line-height: var(--lh-body);
  max-inline-size: 78ch;
}
.report-measure__detail p { margin: 0; }
.report-bar {
  block-size: 6px;
  background: var(--border);
  border-radius: var(--r-1);
  overflow: hidden;
}
.report-bar__fill { display: block; block-size: 100%; background: var(--ink-muted); border-radius: inherit; }

/* ---- what to do next ----------------------------------------------------- */
.report-adjustment,
.report-paragraph { margin: 0; max-inline-size: 70ch; line-height: var(--lh-body); color: var(--ink); }
.report-adjustment {
  padding: var(--s3) var(--s4);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-2);
  background: var(--surface-2);
}
.report-bullets, .report-nights { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--s2); }
.report-bullets li {
  padding-inline-start: var(--s4);
  border-inline-start: 2px solid var(--border-strong);
  line-height: var(--lh-body);
  max-inline-size: 78ch;
}
/* A round mention is a link, so it carries a target you can hit. */
.report-rounds { display: inline-flex; flex-wrap: wrap; gap: var(--s2); vertical-align: middle; }
.report-rounds a,
.report-nights a,
.report-evidence__items > li > a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding-inline: var(--s3);
  border: 1px solid var(--border);
  border-radius: var(--r-1);
  background: var(--surface-1);
  color: var(--ink);
  font-size: var(--fs-sm);
  text-decoration: none;
  white-space: nowrap;
}
.report-nights a, .report-evidence__items > li > a { white-space: normal; }
.report-rounds a:hover,
.report-nights a:hover,
.report-evidence__items > li > a:hover { border-color: var(--border-strong); background: var(--surface-3); }
.report-rounds a:focus-visible,
.report-nights a:focus-visible,
.report-evidence__items > li > a:focus-visible { outline: var(--focus-ring); outline-offset: 2px; }

/* ---- the evidence at the bottom ------------------------------------------ */
.report-evidence__group {
  display: grid;
  gap: var(--s3);
  padding-block: var(--s4);
  border-top: 1px solid var(--border);
}
.report-evidence__group h4 { margin: 0; font-size: var(--fs-body); font-weight: var(--fw-semi); max-inline-size: 78ch; }
.report-evidence__items {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
  gap: var(--s4);
}
.report-evidence__items > li { display: grid; gap: var(--s2); align-content: start; justify-items: start; }
.report-evidence__items > li > * { max-inline-size: 100%; }
.report-evidence__items img { max-width: 100%; height: auto; max-block-size: 13rem; border-radius: var(--r-1); }

@media (min-width: 1100px) {
  .report-keystats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .report-takeaway-row { grid-template-columns: minmax(0, 1fr); }
  .report-overall { grid-template-columns: auto auto 1fr; justify-items: start; }
}
@media (max-width: 640px) {
  .hub-report .report-nav { margin-inline: calc(var(--rp-card) * -1); border-radius: 0; border-inline: 0; }
  /* Three numbers stay three columns on a phone: two and an orphan reads as a
     mistake, and the figures are short enough to fit. */
  .report-head-stat { padding: var(--rp-tight); }
  .report-head-stat__value { font-size: var(--fs-h3); }
  .report-measure summary { grid-template-columns: minmax(0, 1fr) auto auto; }
  .report-measure__what { display: none; }
  .report-measure .report-bar { grid-column: 1 / -1; }
}
@media (prefers-reduced-motion: reduce) {
  .hub-report * { animation: none; transition: none; }
}

/* ---- hover card + the letter-or-mark rule (core/metric-card.js) --------- */
.metric-card { display: grid; gap: var(--s2); max-width: 34ch; }
.metric-card__line { margin: 0; }
/* The line that says which way you want the number is the reason the card
   exists, so it reads first: full ink over a hairline, while the arithmetic
   above it keeps the popover's quieter body colour. */
.metric-card__read {
  color: var(--ink);
  font-weight: var(--fw-med);
  padding-top: var(--s2);
  border-top: 1px solid var(--border);
}

/* The pip stays a 16px mark in the text and reaches a 40px target through its
   halo, the same way every other definition pip on the site does. */
.hub-report .gloss-btn::after { content: ""; position: absolute; inset: -12px; z-index: 1; }
.hub-report .gloss-btn:focus-visible { outline: none; box-shadow: var(--focus-ring); }

/* One letter box, one ungraded mark. The dashed edge and the faint ink say
   "not graded" before the dash does, and the reason rides on the label. */
.report-grade {
  display: inline-grid;
  place-items: center;
  place-self: center start;
  flex: none;
  inline-size: calc(var(--s5) + var(--s3));
  block-size: calc(var(--s5) + var(--s3));
  min-width: calc(var(--s5) + var(--s3));
  min-height: calc(var(--s5) + var(--s3));
  border: 1px solid currentColor;
  border-radius: var(--r-xs);
  font-family: var(--font-mono);
  font-size: var(--fs-h3);
  font-weight: var(--fw-bold);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
/* Five grades, five visibly different boxes. They used to be five names for
   two colours: in this palette --gold-ink and --accent-dark are the same rust,
   and C and D both came out a muted violet, so an S and a D read the same at a
   glance — which is the whole reason a letter is drawn at all.
   The ladder is the site's own result grammar: a win chip is solid ink, a loss
   chip is the accent, and the three in between step down through weight. */
.report-grade--s { color: var(--bg); background: var(--ink); border-color: var(--ink); }
.report-grade--a { color: var(--ink); background: var(--surface-3); border-color: var(--ink); }
.report-grade--b { color: var(--ink); background: transparent; border-color: var(--border-strong); }
.report-grade--c { color: var(--ink-muted); background: transparent; border-color: var(--border); }
.report-grade--d { color: var(--accent); background: var(--gold-soft); border-color: var(--accent); }
.report-grade--ungraded {
  color: var(--ink-faint);
  background: transparent;
  border: 1px dashed var(--border-strong);
  font-weight: var(--fw-med);
}

/* ---- visual sections ---- */
/* Lane D appends below this line. Lane C never edits past it. */

/* Every figure below is scoped to .hub-report so the match report keeps its own
   look: .report-axis, .report-shot, .report-table and .report-plot-label are
   shared class names that match-report.css already styles. */
.hub-report .report-tabs { display: flex; flex-wrap: wrap; gap: var(--s2); }
.hub-report .report-tabs button {
  min-height: 44px; padding-inline: var(--s4); border: 1px solid var(--border);
  border-radius: var(--r-1); background: var(--surface-2); color: var(--ink-muted);
  font-family: var(--font-body); font-size: var(--fs-sm);
}
.hub-report .report-tabs button[aria-selected="true"] {
  background: var(--surface-3); border-color: var(--border-strong); color: var(--ink);
  font-weight: var(--fw-med);
}
.report-visual-denominator { font-family: var(--font-mono); font-size: var(--fs-sm); color: var(--ink-muted); }

/* Hit locations (R-L) */
.report-hits { display: grid; grid-template-columns: minmax(0, 11rem) minmax(0, 1fr); gap: var(--rp-block); align-items: center; max-inline-size: 42rem; }
.report-hits__figure { width: 100%; height: auto; max-inline-size: 11rem; }
.report-hit-box { fill: var(--player-a); stroke: var(--border-strong); stroke-width: 0.8; stroke-linejoin: round; }
.hub-report [data-report-player="kolerocks"] .report-hit-box { fill: var(--player-b); }
.report-hit-count { fill: var(--ink); font-family: var(--font-mono); font-size: 7px; paint-order: stroke; stroke: var(--bg); stroke-width: 2.5px; stroke-linejoin: round; }
.report-hit-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--rp-row); }
.report-hit-list li {
  display: grid; grid-template-columns: 1fr auto; column-gap: var(--rp-chip); align-items: baseline;
  padding-block-end: var(--rp-tight); padding-inline-end: var(--rp-tight);
  border-bottom: 1px solid var(--border-faint);
}
.report-hit-list__value { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: var(--fs-h3); color: var(--ink); }
.report-hit-list__share { grid-column: 1 / -1; font-size: var(--fs-xs); color: var(--ink-faint); }
/* The three shares beside each other, so the read is one glance, not three. */
.report-hit-list__bar { grid-column: 1 / -1; display: block; block-size: 4px; margin-block-start: 2px; border-radius: var(--r-pill); background: var(--surface-3); }
.report-hit-list__fill { display: block; block-size: 100%; border-radius: inherit; background: var(--player-a); }
.hub-report [data-report-player="kolerocks"] .report-hit-list__fill { background: var(--player-b); }
@media (max-width: 560px) { .report-hits { grid-template-columns: 1fr; } }

/* Spray */
.report-spray__cadence { font-family: var(--font-mono); font-variant-numeric: tabular-nums; color: var(--ink); }
.report-spray__host { display: grid; gap: var(--rp-tight); margin-block-start: var(--rp-row); }
.report-spray__list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--rp-row); grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); }
.report-spray__list li { display: grid; gap: 2px; align-content: start; }
.report-spray__strip { width: 100%; height: auto; }
.report-spray__span { fill: var(--ink-faint); font-family: var(--font-mono); font-size: 9px; }
/* Whose spray this is, said the way the rest of the page says it. */
.hub-report [data-report-player="casual"] .report-shot { stroke: var(--player-a); }
.hub-report [data-report-player="kolerocks"] .report-shot { stroke: var(--player-b); }
/* A round link inside a figure is a way back to the round, not a heading:
   it keeps a full target and a quiet face. */
.hub-report .report-evidence { min-height: 40px; display: inline-flex; align-items: center; font-size: var(--fs-xs); color: var(--ink-muted); text-decoration: none; font-variant-numeric: tabular-nums; }
.hub-report .report-evidence:hover { color: var(--ink); text-decoration: underline; }

/* The match picker on the replay section keeps the eyebrow label the map
   controls used to share. */
.report-picker__label { font-family: var(--font-mono); font-size: var(--fs-xs); letter-spacing: var(--ls-eyebrow); text-transform: uppercase; color: var(--ink-faint); }

/* Team power graphs (R-G) */
.report-team-block { display: grid; gap: var(--rp-row); }
.report-team-block__map {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  letter-spacing: var(--ls-tight);
  text-transform: uppercase;
  color: var(--ink-muted);
}
.report-team { display: grid; gap: var(--rp-tight); }
.report-team__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--rp-tight) var(--rp-chip);
  padding-inline-start: var(--rp-tight);
  border-inline-start: 3px solid var(--border-strong);
}
.report-team[data-team-side="ours"] .report-team__head { border-inline-start-color: var(--defense); }
.report-team[data-team-side="theirs"] .report-team__head { border-inline-start-color: var(--enemy); }
.report-team__label { margin: 0; font-size: var(--fs-body); font-weight: var(--fw-semi); }
.report-team__total { margin: 0; color: var(--ink-muted); font-size: var(--fs-sm); font-variant-numeric: tabular-nums; }
.report-team__total-standing { color: var(--ink-faint); }

/* Ten cards, five to a row, so a game is one block rather than two columns of
   tall figures. */
.report-team__players {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--rp-row);
  list-style: none;
  padding: 0;
  margin: 0;
}
.report-team__card {
  display: grid;
  gap: 2px;
  justify-items: center;
  padding: var(--rp-tight);
  border: 1px solid var(--border-faint);
  border-radius: var(--r-1);
  background: var(--surface-2);
  min-inline-size: 0;
}
.report-team[data-team-side="ours"] .report-team__card { border-color: color-mix(in oklab, var(--defense) 26%, var(--border)); }
.report-team[data-team-side="theirs"] .report-team__card { border-color: color-mix(in oklab, var(--enemy) 26%, var(--border)); }
/* The two of you are marked by shape and by the player colours the rest of the
   site already uses, so the pair is findable among ten cards at a glance. */
.report-team__card[data-player-key] { border-width: 2px; background: var(--surface-3); }
.report-team__card[data-player-key] .report-team__name::before { content: '\25B8 '; }
.report-team__card[data-player-key="casual"] { border-color: var(--player-a); }
.report-team__card[data-player-key="kolerocks"] { border-color: var(--player-b); }
.report-team__name {
  margin: 0;
  font-size: var(--fs-xs);
  font-weight: var(--fw-semi);
  color: var(--ink);
  text-align: center;
  overflow-wrap: anywhere;
}
.report-team__agent { margin: 0; font-size: var(--fs-xs); color: var(--ink-faint); }
.report-team__score {
  margin: 0;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: var(--fs-h3);
  color: var(--ink);
}
.report-team__score-of { font-size: var(--fs-xs); color: var(--ink-faint); }

@media (max-width: 1100px) { .report-team__players { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 620px) { .report-team__players { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Player comparison */
.report-compare td { background: color-mix(in oklab, var(--surface-1) calc(100% - var(--rank-weight, 0) * 60%), var(--ink-faint)); }
.report-compare__rank { color: var(--ink-muted); margin-inline-start: var(--s2); font-size: var(--fs-sm); }
.hub-report .report-table thead th button {
  min-height: 44px; background: none; border: 0; color: inherit; font: inherit; padding: 0;
  text-align: inherit; cursor: pointer;
}
.hub-report .report-table thead th[aria-sort="descending"] button::after { content: ' \2193'; }
.hub-report .report-table thead th[aria-sort="ascending"] button::after { content: ' \2191'; }

/* 2D replay and round flow */
/* The board inside a report is one block among many, so it is given a
   readable frame rather than the whole desk it gets on its own route. */
.report-replay { block-size: 34rem; }
.report-replay > .ts-studio { block-size: 100%; }
.report-replay__picker { display: flex; align-items: center; gap: var(--s2); margin-block-end: var(--s3); }
.report-flow { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s2); }
.report-flow { grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); }
.report-flow a {
  min-height: 44px;
  display: flex;
  align-items: center;
  gap: var(--rp-chip);
  padding-inline: var(--rp-card);
  border: 1px solid var(--border);
  border-radius: var(--r-2);
  background: var(--surface-2);
  color: var(--ink);
  text-decoration: none;
  font-size: var(--fs-sm);
}
.report-flow a::after { content: " \2192"; margin-inline-start: auto; color: var(--ink-faint); }
.report-flow a:hover { border-color: var(--border-strong); background: var(--surface-3); }
.report-flow a:focus-visible { outline: var(--focus-ring); outline-offset: 2px; }

/* Find yourself among ten: shape on the row label and the player colour on its
   edge, because the cell shading in this table already means rank. */
.report-compare tbody tr[data-player-key] th[scope="row"] { font-weight: var(--fw-semi); }
.report-compare tbody tr[data-player-key] th[scope="row"]::before { content: '\25B8 '; }
.report-compare tbody tr[data-player-key="casual"] th[scope="row"] { border-inline-start: 3px solid var(--player-a); }
.report-compare tbody tr[data-player-key="kolerocks"] th[scope="row"] { border-inline-start: 3px solid var(--player-b); }

/* ---- the legend that replaced the ungraded boxes (R-B) ------------------- */
.hub-report .report-legend {
  margin: 0;
  color: var(--ink-faint);
  font-size: var(--fs-xs);
}

/* ---- the evidence gallery (R-B, R-I) ------------------------------------ */
/* A clip and a frame are the point of this section, so they get a column each
   and a shared ceiling: one tall video used to set the height of the whole row
   and leave three empty columns beside it. */
.hub-report .report-evidence__items { align-items: start; }
.hub-report .report-evidence__items video,
.hub-report .report-evidence__items img {
  max-inline-size: 100%;
  max-block-size: 11rem;
  block-size: auto;
  border-radius: var(--r-1);
}
/* A line saying a clip could not be lined up is a line, not a dashed box: the
   page already stopped drawing boxes for things it does not have. */
.hub-report .c-media-empty {
  margin: 0;
  border: 0;
  padding: 0;
  background: none;
  color: var(--ink-faint);
  font-size: var(--fs-xs);
}

/* The row's name is the way into that track's own page, so it answers a finger
   like every other control here. The row is already 44px tall around the
   definition pip, so this costs no height. */
.hub-report .report-category__route {
  display: inline-flex;
  align-items: center;
  min-block-size: 44px;
  color: inherit;
  text-decoration: none;
  box-shadow: inset 0 -1px 0 transparent;
  border-bottom: 0;
}
.hub-report .report-category__route:hover { box-shadow: inset 0 -1px 0 var(--accent); }
.hub-report .report-category__route:focus-visible { outline: var(--focus-ring); outline-offset: 2px; }