/* Match analysis: a reading surface first, with figures supporting the argument. */

.analysis-workspace {
  --measure: 68ch;
  --gutter: clamp(18px, 3vw, 40px);
  display: grid;
  gap: clamp(10px, 1.6vw, 18px);
  padding-bottom: 72px;
}

/* --- The index -------------------------------------------------------------
   The rail itself is shared with the on-ball tab and lives in phase-a.css.
   What belongs here is where the analysis puts it: a column beside the prose on
   a wide screen, a strip above it on a narrow one, where a 232px column would
   leave the text too thin to read. */

/* A jumped-to section must clear the masthead and the tab bar, both sticky. */
.analysis-lede,
.analysis-section,
.analysis-confidence { scroll-margin-top: var(--sticky-top); }

/* The piece itself is one grid item, which is what lets the rail beside it
   stick for the whole length of it. `grid-row: 1 / -1` was the first attempt
   and does not work here: -1 is the last line of the EXPLICIT grid, and with
   no grid-template-rows that is line 1, so the rail sat in row one and forced
   it to the rail's own height — a 265px hole between the lede and the first
   section. */
.analysis-flow {
  display: grid;
  gap: clamp(10px, 1.6vw, 18px);
  min-width: 0;
}
.analysis-flow > * { min-width: 0; }

@media (min-width: 1120px) {
  .analysis-workspace {
    /* The rail belongs at the edge of the window, not at the edge of the text
       column — it is chrome, like the dock in the other corner, and 200px of
       empty page between it and the frame reads as a mistake. The panel is
       pulled out into the page's right margin, and the prose takes the room
       that opens up: it had the whole 1500px column before the rail existed,
       and giving the rail its 232px out of the margin rather than out of the
       reading width is the point of pulling it. --rail-pull is the free space
       beside .page (v2.css:80) less the gutter the dock keeps. */
    --rail-pull: max(0px, (100vw - min(1500px, 100vw - 56px) - 2 * var(--space-6)) / 2);
    grid-template-columns: minmax(0, 1fr) 232px;
    column-gap: clamp(20px, 2.2vw, 34px);
    margin-right: calc(-1 * var(--rail-pull));
    align-items: start;
  }
  .analysis-workspace > .analysis-flow { grid-column: 1; grid-row: 1; }
  .analysis-workspace > .section-index {
    grid-column: 2;
    grid-row: 1;
    position: sticky;
    top: var(--sticky-top);
    align-self: start;
    max-height: calc(100vh - var(--sticky-top) - 24px);
    overflow-y: auto;
    padding-left: var(--space-2);
  }
}

/* ---------------------------------------------------------------- lede --- */
.analysis-lede {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(300px, .75fr);
  gap: clamp(28px, 4.5vw, 64px);
  align-items: end;
  padding: clamp(26px, 4vw, 44px) var(--gutter) clamp(24px, 3.4vw, 38px);
  background: linear-gradient(180deg, var(--surface-sunken), var(--surface-raised) 70%);
  border: 1px solid var(--border-subtle);
  border-left: 3px solid var(--brand-accent);
  overflow: hidden;
}
.analysis-lede::after {
  content: ''; position: absolute; inset: 0 0 auto auto; width: 42%; height: 100%;
  background: radial-gradient(120% 90% at 100% 0%, var(--brand-wash), transparent 70%);
  pointer-events: none;
}
.analysis-lede h2 {
  position: relative; max-width: none; margin: 0;
  font-size: clamp(27px, 3.9vw, 48px); font-weight: 800; line-height: 1.06; letter-spacing: -.022em;
  text-wrap: balance;
}
.analysis-verdict {
  position: relative; max-width: none; margin: 0; padding-left: clamp(20px, 2.5vw, 34px);
  border-left: 1px solid var(--border-subtle);
  color: var(--text-secondary); font-size: clamp(15px, 1.35vw, 18px); line-height: 1.58;
}

/* ------------------------------------------------------------ sections --- */
.analysis-section { padding: clamp(22px, 3vw, 34px) var(--gutter); }
.analysis-section > .panel-title {
  align-items: baseline; margin-bottom: clamp(14px, 1.8vw, 22px);
  padding-bottom: 12px; border-bottom: 1px solid var(--border-subtle);
}
.analysis-section > .panel-title h3 {
  margin: 0; font-size: clamp(15px, 1.5vw, 19px); font-weight: 800;
  letter-spacing: .015em; text-transform: none;
}
.analysis-section > .panel-title span {
  color: var(--text-muted); font-size: 12px; font-weight: 700;
  font-variant-numeric: tabular-nums; letter-spacing: .1em;
}
.analysis-prose {
  columns: 2;
  column-gap: clamp(32px, 4.5vw, 64px);
  column-rule: 1px solid var(--border-subtle);
}
/* A paragraph never splits across the column rule. It used to, which put the
   first half of a sentence at the foot of the left column and the rest at the
   top of the right one — indistinguishable from a truncated sentence. */
.analysis-section p {
  max-width: none; margin: 0 0 clamp(11px, 1.2vw, 15px);
  font-size: clamp(15px, 1.25vw, 16.5px); line-height: 1.68; color: var(--text-primary);
  orphans: 3; widows: 3; break-inside: avoid;
}
/* The opening sentence of a section carries the claim; give it presence. */
.analysis-section p:first-of-type { color: var(--text-on-accent); font-size: clamp(15.5px, 1.35vw, 17.5px); }
.analysis-section p:last-of-type { margin-bottom: 0; }

/* -------------------------------------------------------------- terms --- */
/* An explained term is marked by colouring the word itself, not by a dashed
   rule and a superscript query. The colour is the affordance; the underline
   only appears on hover and focus, where it confirms the target. */
.term-chip {
  position: relative; display: inline; padding: 0; color: var(--info-text); background: none;
  border: 0; font: inherit; font-weight: 600; cursor: help;
}
.term-chip:hover, .term-chip:focus-visible { color: var(--interactive-active); text-decoration: underline; text-underline-offset: 3px; }
/* The superscript marker is gone; the rule stays so any left in markup vanish. */
.term-chip > i { display: none; }
.term-chip[aria-expanded="true"] { color: var(--interactive-active); text-decoration: underline; text-underline-offset: 3px; }
.term-popover {
  position: absolute; left: 0; top: calc(100% + 10px); z-index: 40; width: max(268px, 30ch);
  display: block; padding: 13px 15px; color: var(--text-secondary); background: var(--surface-overlay);
  border: 1px solid var(--border-subtle); box-shadow: var(--elevation-popover);
  font-size: 13.5px; font-weight: 400; line-height: 1.55; text-align: left; cursor: auto;
}
.term-popover strong {
  display: block; margin-bottom: 6px; color: var(--text-on-accent); font-size: 11.5px;
  letter-spacing: .08em; text-transform: uppercase;
}

/* ------------------------------------------------------------ figures --- */
.analysis-figure {
  margin: clamp(18px, 2.4vw, 28px) 0; padding: 0;
  background: var(--surface-base); border: 1px solid var(--border-subtle);
}
.analysis-figure > :not(figcaption) { padding: clamp(16px, 2vw, 24px); }
.analysis-figure figcaption {
  margin: 0; padding: 11px clamp(16px, 2vw, 24px); color: var(--text-secondary);
  background: var(--surface-raised); border-top: 1px solid var(--border-subtle);
  font-size: 13px; line-height: 1.5;
}
.analysis-figure .pitch { max-width: 640px; margin: 0 auto; }

/* The cards are already cards. Wrapping them in a bordered panel and hanging a
   grey strip underneath with the team name in it made three boxes where one
   was wanted, which is what the row of nested frames was. */
.analysis-figure-on_ball_channels,
.analysis-figure-on_ball_profiles,
.analysis-figure-player_cards {
  display: flex;
  flex-direction: column;
  background: transparent;
  border: 0;
}
.analysis-figure-on_ball_channels > :not(figcaption),
.analysis-figure-on_ball_profiles > :not(figcaption),
.analysis-figure-player_cards > :not(figcaption) { padding: 0; }
.analysis-figure-on_ball_channels figcaption,
.analysis-figure-on_ball_profiles figcaption,
.analysis-figure-player_cards figcaption {
  order: -1;
  padding: 0 0 var(--space-3);
  margin-bottom: var(--space-3);
  color: var(--text-muted);
  background: transparent;
  border-top: 0;
  border-bottom: 1px solid var(--border-subtle);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
}

/* Attempts are buttons, not hover targets: reachable by keyboard and by touch,
   and the one picked stays picked with its numbers written out below. */
.figure-pitch .shot-point { cursor: pointer; }
.figure-pitch .shot-hit { fill: transparent; }
.figure-pitch .shot-point:focus-visible { outline: none; }
.figure-pitch .shot-point:focus-visible .shot-dot { stroke: var(--focus-ring); stroke-width: 1.2; }
.figure-shot-card {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px 12px;
  max-width: 640px; margin: 14px auto 0; padding: 12px 14px;
  background: var(--surface-sunken); border: 1px solid var(--border-subtle);
}
.figure-shot-card > div strong { display: block; font-size: 14.5px; }
.figure-shot-card > div small { color: var(--text-muted); font-size: 12.5px; }
.figure-shot-card dl { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(auto-fit, minmax(88px, 1fr)); gap: 10px; margin: 0; }
.figure-shot-card dt { color: var(--text-muted); font-size: 11px; letter-spacing: .07em; text-transform: uppercase; }
.figure-shot-card dd { margin: 2px 0 0; font-size: 14.5px; font-weight: 700; font-variant-numeric: tabular-nums; }

/* --- Average positions ----------------------------------------------------
   The pitch that carries a whole side's shape does not belong at the width of
   a shot map: eleven names, eleven territories and the corridors between them
   were being read at 640px inside a figure with room for nearly twice that.
   It takes the figure, less a hair: at the full width it was the only thing on
   screen, and the prose it belongs to had gone. */
.analysis-figure-team_shape .pitch { max-width: 95%; }

/* Following a substitution. A man who came off at 60′ and the man who replaced
   him are one position over ninety minutes; this is the way from either to the
   other, and to both side by side. */
.shape-swap {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3);
  margin-top: var(--space-3); padding: 10px 14px;
  background: var(--surface-sunken); border: 1px solid var(--border-subtle);
}
.shape-swap p { display: flex; align-items: center; gap: var(--space-2); margin: 0; color: var(--text-secondary); font-size: 13.5px; }
.shape-swap > div { display: flex; gap: var(--space-2); }
.shape-swap button {
  min-height: 36px; padding: 7px 14px;
  color: var(--text-primary); background: var(--surface-raised);
  border: 1px solid var(--border-strong); border-radius: var(--radius-control);
  font-size: 13px; font-weight: 700; white-space: nowrap;
}
.shape-swap button:hover { color: var(--text-on-accent); background: var(--surface-overlay); border-color: var(--brand-accent); }
/* Inside the focus panel it is the last row of a narrow column, not a bar. */
.focus-panel .shape-swap { margin-top: var(--space-4); }

/* While both are on the pitch the bar becomes the key to it: the swatch is the
   only thing saying which territory is whose, so it carries the same colour the
   pitch draws that player in. */
.shape-swap.comparing p { flex-wrap: wrap; color: var(--text-primary); font-weight: 700; }
.shape-swap.comparing i {
  width: 12px; height: 12px; flex: none;
  background: var(--player-colour); border-radius: var(--radius-round);
}
.shape-swap.comparing b { margin: 0 var(--space-1); color: var(--text-muted); font-weight: 400; }

/* The whole document's caveat, stated once, where a reader has finished. */
.analysis-method { margin: clamp(18px, 2vw, 26px) 0 0; color: var(--text-muted); font-size: 12.5px; line-height: 1.6; }

/* --- The goals, as tabs ---------------------------------------------------
   Six goals stacked vertically were six near-identical blocks, and the reader
   scrolled past five to reach the one they wanted. They are alternatives, so
   the strip shows all of them and the panel shows one. */

/* The wrapper stands in for a figure in the section's flow, so it carries the
   figure's margin. Without it the strip sat hard against the last line of the
   two-column prose above, which no other figure on the page does. The figures
   inside the panels give theirs up in exchange, or the set would be spaced
   twice over. */
.goal-tabs { display: grid; gap: var(--space-4); margin: clamp(18px, 2.4vw, 28px) 0; }
.goal-panel > .analysis-figure { margin: 0; }

.goal-tabstrip {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  border-bottom: 1px solid var(--border-subtle);
  padding-bottom: var(--space-3);
}

.goal-tab {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 44px;
  padding: var(--space-2) var(--space-3);
  background: var(--surface-sunken);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-control);
  color: var(--text-secondary);
  font: inherit;
  cursor: pointer;
}

/* The minute is the label. It is how a goal is named in the prose beside this,
   in the timeline, and on the shot map, so the tab must not invent a number. */
.goal-tab span { font-size: 14px; font-weight: 800; font-variant-numeric: tabular-nums; }
.goal-tab small { font-size: 12px; color: var(--text-muted); }
/* The tab is the chip, so the icon drops its own plate and takes the tab's ink
   — .event-icon sets colour on itself, which would otherwise beat inheritance
   and leave a pale ball on the selected tab's fill.

   It also stands further from the text than the minute and the name stand from
   each other. Those two are one label and read as a pair; the ball is a
   different kind of thing, and on the single shared gap it sat against the
   minute. The extra step brings it to --space-3, the tab's own side padding,
   so the mark is inset by the same amount the chip is. */
.goal-tab .event-icon {
  width: 22px;
  height: 22px;
  margin-inline-end: var(--space-1);
  background: transparent;
  border: 0;
  color: inherit;
}
.goal-tab .event-icon svg { width: 17px; height: 17px; }

.goal-tab:hover { border-color: var(--border-strong); color: var(--text-primary); }

/* Whose goal it was, carried on the selected tab. Both sides keep the same
   ink, so the colour is the team and never the state. */
.goal-tab.active { color: var(--text-on-accent); border-color: transparent; }
/* Full strength, not a faded version of it: white at 75% over --brand-primary
   measures 2.98:1, and the size and weight already carry the hierarchy. */
.goal-tab.active small { color: var(--text-on-accent); }
.goal-tab.basel.active { background: var(--brand-primary); }
.goal-tab.opponent.active { background: var(--brand-secondary); }

/* Goal frame, drawn to the real 3:1 proportion. */
.goal-figure { display: grid; grid-template-columns: minmax(150px, 210px) minmax(0, 1fr); gap: clamp(18px, 3vw, 36px); align-items: center; }
.goal-figure-scorer { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; padding-bottom: 14px; border-bottom: 1px solid var(--border-subtle); }
.goal-figure-scorer strong { display: block; font-size: 14.5px; }
.goal-figure-scorer span { color: var(--text-muted); font-size: 12.5px; font-variant-numeric: tabular-nums; }
.goal-figure-facts dl { display: grid; gap: 9px; margin: 0; }
.goal-figure-facts dt { color: var(--text-muted); font-size: 11px; letter-spacing: .07em; text-transform: uppercase; }
.goal-figure-facts dd { margin: 2px 0 0; color: var(--text-primary); font-size: 14.5px; font-weight: 700; }
.goal-figure-frame { display: grid; gap: 14px; }
.goal-frame { display: block; width: 100%; max-width: 460px; margin: 0 auto; }
.goal-frame .goal-net { fill: none; stroke: color-mix(in srgb, var(--text-muted) 34%, transparent); stroke-width: .5; }
.goal-frame .goal-post { fill: none; stroke: var(--text-primary); stroke-width: 2.6; stroke-linejoin: miter; }
.goal-frame .goal-line { stroke: color-mix(in srgb, var(--text-muted) 45%, transparent); stroke-width: 1; }
.goal-frame .goal-ball { fill: var(--brand-primary); stroke: var(--text-on-accent); stroke-width: 1.1; }
.goal-frame .goal-ball.outside { fill: var(--text-muted); }
.goal-figure-stats { display: flex; justify-content: center; gap: clamp(24px, 5vw, 54px); }
.goal-figure-stats div { text-align: center; }
.goal-figure-stats strong { display: block; font-size: clamp(22px, 2.6vw, 30px); font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.goal-figure-stats span { display: block; margin-top: 3px; color: var(--text-muted); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; }

/* Expected-goal routing. */
.routing-figure { display: grid; gap: clamp(18px, 2.4vw, 26px); }
.routing-team header { display: flex; align-items: baseline; gap: 9px; margin-bottom: 10px; flex-wrap: wrap; }
.routing-team header strong { font-size: 14.5px; }
.routing-team header span { color: var(--text-muted); font-size: 12.5px; font-variant-numeric: tabular-nums; }
.routing-bar { display: flex; width: 100%; height: 30px; overflow: hidden; border-radius: 2px; }
.routing-segment { display: flex; align-items: center; justify-content: center; min-width: 0; transition: none; }
.routing-segment b { color: var(--text-on-accent); font-size: 11.5px; font-weight: 700; font-variant-numeric: tabular-nums; }
.routing-on_target { background: var(--brand-primary); }
.routing-blocked { background: var(--surface-overlay); }
.routing-off_target { background: var(--surface-sunken); box-shadow: inset 0 0 0 1px var(--border-subtle); }
.routing-off_target b { color: var(--text-secondary); }
.routing-key { display: flex; flex-wrap: wrap; gap: 7px 20px; margin: 11px 0 0; padding: 0; list-style: none; }
.routing-key li { display: flex; align-items: center; gap: 7px; color: var(--text-secondary); font-size: 12.5px; }
.routing-key i { width: 10px; height: 10px; flex: none; border-radius: 1px; }
.routing-key b { color: var(--text-primary); font-variant-numeric: tabular-nums; }
.figure-note { margin: 4px 0 0; color: var(--text-muted); font-size: 12.5px; }

/* Player cards. `align-items: start` on the grid, so a card with two facts is
   the height of two facts instead of being stretched to match a card with
   five — which is where the run of empty boxes came from. */
.player-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr));
  gap: var(--space-3);
  align-items: stretch;
}

/* A rule down the edge in the rating's own colour, so a column of cards reads
   as good or poor before any of the text does. */
.player-card {
  display: grid;
  gap: var(--space-3);
  align-content: start;
  padding: var(--space-4);
  background: var(--surface-raised);
  border: 1px solid var(--border-subtle);
  border-left: 3px solid var(--border-strong);
}

.player-card header {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: var(--space-3);
  align-items: center;
}

.player-card-name { min-width: 0; }
.player-card-name strong { display: block; font-size: 14px; line-height: 1.2; }
.player-card-name small { display: block; margin-top: 2px; color: var(--text-muted); font-size: 12px; }

/* Hanging indent: a wrapped line lines up under the text, not under the marker.
   Without it "2 big chances missed" broke to a second line that started under
   the bullet and read as a separate entry. */
.player-card ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: var(--space-2);
  border-top: 1px solid var(--border-subtle);
  padding-top: var(--space-3);
}

.player-card li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--space-2);
  color: var(--text-secondary);
  font-size: 13px;
  line-height: 1.45;
  text-align: start;
}

.player-card li::before { content: '·'; color: var(--text-muted); }

/* Two by two, not four across. A quarter of a 19rem card is about ten
   characters at this size, which cut "Ballführungen" and left "Eindringen …"
   naming no statistic at all. Half the card fits the words. */
.player-card-figures {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3) var(--space-4);
  margin: 0;
  padding-top: var(--space-3);
  border-top: 1px solid var(--border-subtle);
}

/* No ellipsis. A label that does not fit wraps: two short lines still name the
   statistic, where one clipped line does not. */
.player-card-figures dt {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text-muted);
  line-height: 1.25;
}

.player-card-figures dd {
  margin: 0;
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}

/* The secondary number rides with its figure — completion beside passes,
   progressive beside carries — so the row stays four columns wide. */
.player-card-figures i {
  margin-inline-start: 3px;
  font-family: var(--font-body);
  font-size: 12px;
  font-style: normal;
  font-weight: 700;
  color: var(--text-muted);
}

/* Laid out as one more figure, because that is what it is: a label above a
   value. It used to be a sentence in body type sitting under a row of
   Arial Narrow numbers, which read as a different typeface dropped into the
   card — it was, and there was no reason for it. */
.player-card-where {
  display: grid;
  gap: 2px;
  margin: 0;
  padding-top: var(--space-3);
  border-top: 1px solid var(--border-subtle);
}

.player-card-where span {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.player-card-where b {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 800;
  line-height: 1.1;
  color: var(--text-primary);
}

.player-card-rating {
  padding: var(--space-1) var(--space-2);
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}

/* The provider's own divisions: 6.0 an ordinary match, 7.0 a good one. Each
   pair below is a contrast-verified subtle/on-subtle set from tokens.css. */
.player-card.band-excellent { border-left-color: var(--success-text); }
.player-card.band-excellent .player-card-rating { color: var(--text-on-accent); background: var(--success-surface); }
.player-card.band-good { border-left-color: var(--success-text); }
.player-card.band-good .player-card-rating { color: var(--success-on-subtle); background: var(--success-subtle); }
.player-card.band-average { border-left-color: var(--border-strong); }
.player-card.band-average .player-card-rating { color: var(--neutral-on-subtle); background: var(--neutral-subtle); }
.player-card.band-poor { border-left-color: var(--danger-text); }
.player-card.band-poor .player-card-rating { color: var(--danger-on-subtle); background: var(--danger-subtle); }
.player-card.band-unrated .player-card-rating { color: var(--text-muted); background: var(--surface-sunken); }

/* -------------------------------------------------------- derivations --- */
.derivation { margin: clamp(16px, 2vw, 24px) 0 0; border-top: 1px solid var(--border-subtle); }
.derivation > summary {
  min-height: 44px; display: flex; align-items: center; gap: 8px; color: var(--text-muted);
  font-size: 12px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; cursor: pointer;
}
.derivation > summary::marker, .derivation > summary::-webkit-details-marker { color: var(--text-muted); }
.derivation > summary:hover { color: var(--brand-accent); }
.derivation-body { padding: 4px 0 14px; }
.derivation-block { margin-bottom: 18px; }
.derivation-block h5 { margin: 0 0 9px; color: var(--text-primary); font-size: 12px; letter-spacing: .07em; text-transform: uppercase; }
.derivation-nested { margin-top: 12px; padding-left: 13px; border-left: 1px solid var(--border-subtle); }
.derivation-nested h6 { margin: 0 0 7px; color: var(--text-muted); font-size: 11.5px; letter-spacing: .05em; text-transform: uppercase; }
.derivation-pairs { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 1px; margin: 0; background: var(--border-subtle); border: 1px solid var(--border-subtle); }
.derivation-pairs > div { display: flex; justify-content: space-between; gap: 12px; padding: 8px 11px; background: var(--surface-raised); }
.derivation-pairs dt { color: var(--text-muted); font-size: 12.5px; }
.derivation-pairs dd { margin: 0; color: var(--text-primary); font-size: 12.5px; font-weight: 700; font-variant-numeric: tabular-nums; text-align: right; }
.derivation-table th, .derivation-table td { font-size: 12.5px; font-variant-numeric: tabular-nums; }
.derivation-note, .derivation-empty, .derivation-loading { margin: 6px 0 0; color: var(--text-muted); font-size: 12.5px; }

/* --------------------------------------------------------- confidence --- */
.analysis-confidence { padding: clamp(22px, 3vw, 34px) var(--gutter); }
.analysis-confidence .confidence-tier { padding: 17px 0; border-top: 1px solid var(--border-subtle); }
.analysis-confidence .confidence-tier:first-of-type { padding-top: 4px; border-top: 0; }
.confidence-tier h4 { display: flex; align-items: center; gap: 9px; margin: 0 0 10px; font-size: 12px; letter-spacing: .09em; text-transform: uppercase; }
.confidence-tier h4 i { width: 9px; height: 9px; flex: none; border-radius: 50%; }
.confidence-high h4 i { background: var(--success-text); box-shadow: 0 0 0 3px color-mix(in srgb, var(--success-text) 16%, transparent); }
.confidence-medium h4 i { background: var(--warning-text); box-shadow: 0 0 0 3px color-mix(in srgb, var(--warning-text) 16%, transparent); }
.confidence-low h4 i { background: var(--text-muted); box-shadow: 0 0 0 3px color-mix(in srgb, var(--text-muted) 14%, transparent); }
.confidence-tier ul {
  margin: 0; padding-left: 18px; display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px clamp(30px, 4vw, 56px);
}
.confidence-tier li { max-width: none; color: var(--text-secondary); font-size: 14.5px; line-height: 1.6; }

.analysis-provenance { max-width: var(--measure); margin: 2px 0 0; padding: 0 var(--gutter); color: var(--text-muted); font-size: 12.5px; line-height: 1.6; }

@media (max-width: 760px) {
  .analysis-workspace { --gutter: 16px; }
  .goal-figure { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .goal-figure-facts dl { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .player-cards { grid-template-columns: minmax(0, 1fr); }
  .term-popover { width: min(84vw, 300px); }
}

@media (max-width: 900px) {
  .analysis-lede { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .analysis-lede h2 { max-width: 22ch; }
  .analysis-verdict {
    max-width: var(--measure); margin-top: clamp(14px, 1.8vw, 20px);
    padding-left: 0; border-left: 0;
  }
  .analysis-prose { columns: 1; column-rule: 0; }
  .confidence-tier ul { grid-template-columns: minmax(0, 1fr); }
}

/* German headings in the analysis workspace ("Wie das Resultat zustande kam")
   are longer than the 320px viewport and sit in grid tracks that are already
   allowed to shrink, so the words themselves must be breakable. */
.analysis-lede h2,
.analysis-workspace h2,
.analysis-workspace h3,
.analysis-workspace .panel-title h3,
.analysis-headline { overflow-wrap: break-word; hyphens: auto; }
.analysis-workspace, .analysis-workspace > * { min-width: 0; }

/* --- On-ball figures ------------------------------------------------------ */

.onball-profile-grid { display: grid; gap: var(--space-8); }

.onball-channels h5, .onball-profiles h5 {
  margin: 0 0 var(--space-4);
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--border-subtle);
  font-size: 12px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
  color: var(--text-muted);
}

.channel-groups {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
  gap: var(--space-6);
}

.channel-groups h6 {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  margin: 0 0 var(--space-3);
  font-size: 12px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
  color: var(--text-muted);
}

.channel-groups h6 b {
  font-family: var(--font-display);
  font-size: 20px;
  letter-spacing: 0;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}

/* One line per channel: name, bar, count, share — the bar sitting directly
   against the number it represents. */
.channel-row {
  display: grid;
  grid-template-columns: 4.5rem minmax(0, 1fr) 2.5rem 2.5rem;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--border-subtle);
}

.channel-row:last-child { border-bottom: 0; }

.channel-label {
  font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  color: var(--text-muted);
}

.channel-track {
  display: block;
  height: 10px;
  background: var(--surface-sunken);
}

.channel-track i { display: block; height: 100%; }
.channel-track .struck { background: var(--territory-basel-4); }
.channel-track .entered { background: var(--territory-opponent-4); }

.channel-row b {
  font-size: 15px; font-weight: 800; text-align: right;
  font-variant-numeric: tabular-nums;
}

.channel-row small { font-size: 12px; color: var(--text-muted); text-align: right; font-variant-numeric: tabular-nums; }

/* Cells carry a bar scaled to the busiest player in that column, so a glance
   answers "who did most of this". Magnitude only — a centre back's 56 passes
   are a different job from a winger's 11, not a better game, so the scale must
   not read as good against bad. */
.onball-table { table-layout: fixed; width: 100%; min-width: 44rem; font-size: 13px; }
.onball-table th, .onball-table td { padding: var(--space-1) var(--space-2); }
.onball-table td { text-align: right; }

/* Fixed widths, and the name column no longer absorbs the slack. Under
   table-layout:fixed an unsized first column swallowed every spare pixel, which
   is what left the gap between the names and the rest of the row. */
.onball-table col.name { width: 19%; }
.onball-table col.spread { width: 11%; }
.onball-table col.seen { width: 10%; }
.onball-table col.figure { width: 12%; }

.onball-table thead th { font-size: 11px; line-height: 1.25; white-space: normal; vertical-align: bottom; }
.onball-profiles th[scope="row"] strong { font-size: 13px; }
.onball-profiles th small { display: block; font-weight: 400; color: var(--text-muted); font-size: 11px; }

/* The track is the cell's own width, so the bar is comparable down a column and
   cannot spill into the next one. */
.cell-track {
  display: block;
  height: 3px;
  margin-top: 2px;
  background: var(--surface-sunken);
}

.cell-track i { display: block; height: 100%; }
.cell-track .basel { background: var(--territory-basel-4); }
.cell-track .opponent { background: var(--territory-opponent-4); }

.onball-table td b { font-weight: 700; font-variant-numeric: tabular-nums; }
.onball-table td i { font-style: normal; }
.onball-table td > i { margin-inline-start: 2px; font-size: 11px; color: var(--text-muted); }

.onball-table .onball-spread,
.onball-table .onball-seen { text-align: left; font-size: 12px; }
.onball-spread { white-space: nowrap; }

/* Weighted rather than plain: the shade says how much of a player's passing
   went through that channel, so his side is visible without reading three
   numbers. An empty channel is drawn, not omitted — "never went there" and
   "went there twice" are different facts. */
.channel-chip {
  display: inline-block; min-width: 2.6ch; padding: 1px 3px; margin-inline-end: 2px;
  font-size: 11px; font-variant-numeric: tabular-nums; text-align: right;
}
.channel-chip.empty { background: var(--surface-sunken); color: var(--text-muted); }
.channel-chip.basel-1, .channel-chip.opponent-1 { background: var(--surface-overlay); color: var(--text-secondary); }
.channel-chip.basel-2 { background: var(--territory-basel-2); color: var(--text-on-inverse); }
.channel-chip.basel-3 { background: var(--territory-basel-4); color: var(--text-on-accent); }
.channel-chip.basel-4 { background: var(--territory-basel-6); color: var(--text-on-accent); font-weight: 800; }
.channel-chip.opponent-2 { background: var(--territory-opponent-2); color: var(--text-on-inverse); }
.channel-chip.opponent-3 { background: var(--territory-opponent-4); color: var(--text-on-accent); }
.channel-chip.opponent-4 { background: var(--territory-opponent-6); color: var(--text-on-accent); font-weight: 800; }

.onball-flag { margin-inline-start: var(--space-1); color: var(--warning-text); font-style: normal; font-weight: 800; }

/* -------------------------------------------------------- derivations --- */
.derivation { margin: clamp(16px, 2vw, 24px) 0 0; border-top: 1px solid var(--border-subtle); }
.derivation > summary {
  min-height: 44px; display: flex; align-items: center; gap: 8px; color: var(--text-muted);
  font-size: 12px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; cursor: pointer;
}
.derivation > summary::marker, .derivation > summary::-webkit-details-marker { color: var(--text-muted); }
.derivation > summary:hover { color: var(--brand-accent); }
.derivation-body { padding: 4px 0 14px; }
.derivation-block { margin-bottom: 18px; }
.derivation-block h5 { margin: 0 0 9px; color: var(--text-primary); font-size: 12px; letter-spacing: .07em; text-transform: uppercase; }
.derivation-nested { margin-top: 12px; padding-left: 13px; border-left: 1px solid var(--border-subtle); }
.derivation-nested h6 { margin: 0 0 7px; color: var(--text-muted); font-size: 11.5px; letter-spacing: .05em; text-transform: uppercase; }
.derivation-pairs { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 1px; margin: 0; background: var(--border-subtle); border: 1px solid var(--border-subtle); }
.derivation-pairs > div { display: flex; justify-content: space-between; gap: 12px; padding: 8px 11px; background: var(--surface-raised); }
.derivation-pairs dt { color: var(--text-muted); font-size: 12.5px; }
.derivation-pairs dd { margin: 0; color: var(--text-primary); font-size: 12.5px; font-weight: 700; font-variant-numeric: tabular-nums; text-align: right; }
.derivation-table th, .derivation-table td { font-size: 12.5px; font-variant-numeric: tabular-nums; }
.derivation-note, .derivation-empty, .derivation-loading { margin: 6px 0 0; color: var(--text-muted); font-size: 12.5px; }

/* --------------------------------------------------------- confidence --- */
.analysis-confidence { padding: clamp(22px, 3vw, 34px) var(--gutter); }
.analysis-confidence .confidence-tier { padding: 17px 0; border-top: 1px solid var(--border-subtle); }
.analysis-confidence .confidence-tier:first-of-type { padding-top: 4px; border-top: 0; }
.confidence-tier h4 { display: flex; align-items: center; gap: 9px; margin: 0 0 10px; font-size: 12px; letter-spacing: .09em; text-transform: uppercase; }
.confidence-tier h4 i { width: 9px; height: 9px; flex: none; border-radius: 50%; }
.confidence-high h4 i { background: var(--success-text); box-shadow: 0 0 0 3px color-mix(in srgb, var(--success-text) 16%, transparent); }
.confidence-medium h4 i { background: var(--warning-text); box-shadow: 0 0 0 3px color-mix(in srgb, var(--warning-text) 16%, transparent); }
.confidence-low h4 i { background: var(--text-muted); box-shadow: 0 0 0 3px color-mix(in srgb, var(--text-muted) 14%, transparent); }
.confidence-tier ul {
  margin: 0; padding-left: 18px; display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px clamp(30px, 4vw, 56px);
}
.confidence-tier li { max-width: none; color: var(--text-secondary); font-size: 14.5px; line-height: 1.6; }

.analysis-provenance { max-width: var(--measure); margin: 2px 0 0; padding: 0 var(--gutter); color: var(--text-muted); font-size: 12.5px; line-height: 1.6; }

@media (max-width: 760px) {
  .analysis-workspace { --gutter: 16px; }
  .goal-figure { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .goal-figure-facts dl { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .player-cards { grid-template-columns: minmax(0, 1fr); }
  .term-popover { width: min(84vw, 300px); }
}

@media (max-width: 900px) {
  .analysis-lede { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .analysis-lede h2 { max-width: 22ch; }
  .analysis-verdict {
    max-width: var(--measure); margin-top: clamp(14px, 1.8vw, 20px);
    padding-left: 0; border-left: 0;
  }
  .analysis-prose { columns: 1; column-rule: 0; }
  .confidence-tier ul { grid-template-columns: minmax(0, 1fr); }
}

/* German headings in the analysis workspace ("Wie das Resultat zustande kam")
   are longer than the 320px viewport and sit in grid tracks that are already
   allowed to shrink, so the words themselves must be breakable. */
.analysis-lede h2,
.analysis-workspace h2,
.analysis-workspace h3,
.analysis-workspace .panel-title h3,
.analysis-headline { overflow-wrap: break-word; hyphens: auto; }
.analysis-workspace, .analysis-workspace > * { min-width: 0; }

/* --- On-ball figures ------------------------------------------------------ */

.onball-profile-grid { display: grid; gap: var(--space-8); }

.onball-channels h5, .onball-profiles h5 {
  margin: 0 0 var(--space-4);
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--border-subtle);
  font-size: 12px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
  color: var(--text-muted);
}

.channel-groups {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
  gap: var(--space-6);
}

.channel-groups h6 {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  margin: 0 0 var(--space-3);
  font-size: 12px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
  color: var(--text-muted);
}

.channel-groups h6 b {
  font-family: var(--font-display);
  font-size: 20px;
  letter-spacing: 0;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}

/* One line per channel: name, bar, count, share — the bar sitting directly
   against the number it represents. */
.channel-row {
  display: grid;
  grid-template-columns: 4.5rem minmax(0, 1fr) 2.5rem 2.5rem;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--border-subtle);
}

.channel-row:last-child { border-bottom: 0; }

.channel-label {
  font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  color: var(--text-muted);
}

.channel-track {
  display: block;
  height: 10px;
  background: var(--surface-sunken);
}

.channel-track i { display: block; height: 100%; }
.channel-track .struck { background: var(--territory-basel-4); }
.channel-track .entered { background: var(--territory-opponent-4); }

.channel-row b {
  font-size: 15px; font-weight: 800; text-align: right;
  font-variant-numeric: tabular-nums;
}

.channel-row small { font-size: 12px; color: var(--text-muted); text-align: right; font-variant-numeric: tabular-nums; }

/* Cells carry a fill scaled to the busiest player in that column, so a glance
   answers "who did most of this". Magnitude only — a centre back's 56 passes
   are a different job from a winger's 11, not a better game, so the scale must
   not read as good against bad.

   The fill is a rule under the number, not a block behind it. At full cell
   height on columns this wide every value became a slab and the table stopped
   being readable as a table, which is the opposite of what the shading is for. */
.onball-table { table-layout: fixed; min-width: 46rem; font-size: 13px; }
.onball-table th, .onball-table td { padding: var(--space-1) var(--space-2); }
.onball-table td { position: relative; text-align: right; }

/* Widths live on the <col> elements above and nowhere else. A second set in
   rem used to sit here on th:nth-child, and the two disagreed: with
   table-layout fixed the browser resolved the conflict by stretching whatever
   it took first, which is how the name column ended up holding one short word
   across a fifth of the table. The numeric columns are the data and now get
   the room. */

.cell-fill {
  position: absolute;
  inset: auto var(--space-2) 3px auto;
  z-index: 0;
  height: 3px;
  opacity: .85;
}

.cell-fill.basel { background: var(--territory-basel-4); }
.cell-fill.opponent { background: var(--territory-opponent-4); }

.onball-table td b,
.onball-table td i {
  position: relative;
  z-index: 1;
  font-variant-numeric: tabular-nums;
}

.onball-table td b { font-weight: 700; }
.onball-table td i { margin-inline-start: 2px; font-style: normal; font-size: 11px; color: var(--text-muted); }

.onball-table .onball-spread,
.onball-table .onball-seen { text-align: left; font-size: 12px; }

/* 12px, not 11. The heads were a size below the numbers they name, which read
   as fine print rather than as the label of a column; short heads (see
   colEntriesShort) are what makes the larger size fit. */
.onball-table thead th {
  font-size: 12px;
  line-height: 1.25;
  white-space: normal;
  vertical-align: bottom;
  padding-block-end: var(--space-2);
}

/* The name column is the widest on the table and held one short word. Position
   and minutes fill it with something worth reading, and minutes are what a
   reader reaches for first when a count looks low. */
.onball-profiles th[scope="row"] strong { font-size: 14px; }
.onball-profiles th small { display: block; font-weight: 400; color: var(--text-muted); font-size: 12px; }
.onball-spread { white-space: nowrap; }

/* A channel the player barely used is dimmed rather than dropped: "he did play
   two balls over there" and "he never went there" are different facts. */
.channel-chip {
  display: inline-block; min-width: 3ch; padding: 2px 4px; margin-inline-end: 2px;
  background: var(--surface-sunken); color: var(--text-muted);
  font-size: 12px; font-variant-numeric: tabular-nums; text-align: right;
}
.channel-chip.used { background: var(--surface-overlay); color: var(--text-primary); font-weight: 700; }
.onball-flag { margin-inline-start: var(--space-1); color: var(--warning-text); font-style: normal; font-weight: 800; }

/* -------------------------------------------------------- derivations --- */
.derivation { margin: clamp(16px, 2vw, 24px) 0 0; border-top: 1px solid var(--border-subtle); }
.derivation > summary {
  min-height: 44px; display: flex; align-items: center; gap: 8px; color: var(--text-muted);
  font-size: 12px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; cursor: pointer;
}
.derivation > summary::marker, .derivation > summary::-webkit-details-marker { color: var(--text-muted); }
.derivation > summary:hover { color: var(--brand-accent); }
.derivation-body { padding: 4px 0 14px; }
.derivation-block { margin-bottom: 18px; }
.derivation-block h5 { margin: 0 0 9px; color: var(--text-primary); font-size: 12px; letter-spacing: .07em; text-transform: uppercase; }
.derivation-nested { margin-top: 12px; padding-left: 13px; border-left: 1px solid var(--border-subtle); }
.derivation-nested h6 { margin: 0 0 7px; color: var(--text-muted); font-size: 11.5px; letter-spacing: .05em; text-transform: uppercase; }
.derivation-pairs { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 1px; margin: 0; background: var(--border-subtle); border: 1px solid var(--border-subtle); }
.derivation-pairs > div { display: flex; justify-content: space-between; gap: 12px; padding: 8px 11px; background: var(--surface-raised); }
.derivation-pairs dt { color: var(--text-muted); font-size: 12.5px; }
.derivation-pairs dd { margin: 0; color: var(--text-primary); font-size: 12.5px; font-weight: 700; font-variant-numeric: tabular-nums; text-align: right; }
.derivation-table th, .derivation-table td { font-size: 12.5px; font-variant-numeric: tabular-nums; }
.derivation-note, .derivation-empty, .derivation-loading { margin: 6px 0 0; color: var(--text-muted); font-size: 12.5px; }

/* --------------------------------------------------------- confidence --- */
.analysis-confidence { padding: clamp(22px, 3vw, 34px) var(--gutter); }
.analysis-confidence .confidence-tier { padding: 17px 0; border-top: 1px solid var(--border-subtle); }
.analysis-confidence .confidence-tier:first-of-type { padding-top: 4px; border-top: 0; }
.confidence-tier h4 { display: flex; align-items: center; gap: 9px; margin: 0 0 10px; font-size: 12px; letter-spacing: .09em; text-transform: uppercase; }
.confidence-tier h4 i { width: 9px; height: 9px; flex: none; border-radius: 50%; }
.confidence-high h4 i { background: var(--success-text); box-shadow: 0 0 0 3px color-mix(in srgb, var(--success-text) 16%, transparent); }
.confidence-medium h4 i { background: var(--warning-text); box-shadow: 0 0 0 3px color-mix(in srgb, var(--warning-text) 16%, transparent); }
.confidence-low h4 i { background: var(--text-muted); box-shadow: 0 0 0 3px color-mix(in srgb, var(--text-muted) 14%, transparent); }
.confidence-tier ul {
  margin: 0; padding-left: 18px; display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px clamp(30px, 4vw, 56px);
}
.confidence-tier li { max-width: none; color: var(--text-secondary); font-size: 14.5px; line-height: 1.6; }

.analysis-provenance { max-width: var(--measure); margin: 2px 0 0; padding: 0 var(--gutter); color: var(--text-muted); font-size: 12.5px; line-height: 1.6; }

@media (max-width: 760px) {
  .analysis-workspace { --gutter: 16px; }
  .goal-figure { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .goal-figure-facts dl { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .player-cards { grid-template-columns: minmax(0, 1fr); }
  .term-popover { width: min(84vw, 300px); }
}

@media (max-width: 900px) {
  .analysis-lede { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .analysis-lede h2 { max-width: 22ch; }
  .analysis-verdict {
    max-width: var(--measure); margin-top: clamp(14px, 1.8vw, 20px);
    padding-left: 0; border-left: 0;
  }
  .analysis-prose { columns: 1; column-rule: 0; }
  .confidence-tier ul { grid-template-columns: minmax(0, 1fr); }
}

/* German headings in the analysis workspace ("Wie das Resultat zustande kam")
   are longer than the 320px viewport and sit in grid tracks that are already
   allowed to shrink, so the words themselves must be breakable. */
.analysis-lede h2,
.analysis-workspace h2,
.analysis-workspace h3,
.analysis-workspace .panel-title h3,
.analysis-headline { overflow-wrap: break-word; hyphens: auto; }
.analysis-workspace, .analysis-workspace > * { min-width: 0; }

/* --- On-ball figures ------------------------------------------------------ */

.onball-profile-grid { display: grid; gap: var(--space-8); }

.onball-channels h5, .onball-profiles h5 {
  margin: 0 0 var(--space-4);
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--border-subtle);
  font-size: 12px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
  color: var(--text-muted);
}

.channel-groups {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
  gap: var(--space-6);
}

.channel-groups h6 {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  margin: 0 0 var(--space-3);
  font-size: 12px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
  color: var(--text-muted);
}

.channel-groups h6 b {
  font-family: var(--font-display);
  font-size: 20px;
  letter-spacing: 0;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}

/* One line per channel: name, bar, count, share — the bar sitting directly
   against the number it represents. */
.channel-row {
  display: grid;
  grid-template-columns: 4.5rem minmax(0, 1fr) 2.5rem 2.5rem;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--border-subtle);
}

.channel-row:last-child { border-bottom: 0; }

.channel-label {
  font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  color: var(--text-muted);
}

.channel-track {
  display: block;
  height: 10px;
  background: var(--surface-sunken);
}

.channel-track i { display: block; height: 100%; }
.channel-track .struck { background: var(--territory-basel-4); }
.channel-track .entered { background: var(--territory-opponent-4); }

.channel-row b {
  font-size: 15px; font-weight: 800; text-align: right;
  font-variant-numeric: tabular-nums;
}

.channel-row small { font-size: 12px; color: var(--text-muted); text-align: right; font-variant-numeric: tabular-nums; }

.onball-profiles th small { display: block; font-weight: 400; color: var(--text-muted); font-size: 12px; }
.onball-spread { white-space: nowrap; }

/* A channel the player barely used is dimmed rather than dropped: "he did play
   two balls over there" and "he never went there" are different facts. */
.channel-chip {
  display: inline-block; min-width: 3ch; padding: 2px 4px; margin-inline-end: 2px;
  background: var(--surface-sunken); color: var(--text-muted);
  font-size: 12px; font-variant-numeric: tabular-nums; text-align: right;
}
.channel-chip.used { background: var(--surface-overlay); color: var(--text-primary); font-weight: 700; }
.onball-flag { margin-inline-start: var(--space-1); color: var(--warning-text); font-style: normal; font-weight: 800; }
.onball-profiles .data-table td small { margin-inline-start: var(--space-1); color: var(--text-muted); }

/* The figure now carries the goal view and a stepper, so it answers "where did
   it go" without leaving the analysis for the Shots tab. */
.figure-shot-card { grid-template-columns: auto minmax(0, 1fr) auto; align-items: start; }
.figure-shot-card .figure-goal-view { grid-column: 1 / -1; margin-top: var(--space-3); }
.figure-shot-card .figure-goal-view .goal-view-note { font-size: 12px; color: var(--text-muted); }
.figure-stepper { justify-self: end; }

/* One box for every head, whether it sorts or not.

   A sortable head is a <button>, which inherits neither the table's font nor
   its uppercase from the UA stylesheet and carries the site's 44px control
   height; a plain head was a bare text node. Worse, this rule used to align the
   button on the BASELINE while the cell aligned to the bottom, so the two kinds
   of head sat a full line apart and the header read as two rows. Both are now
   the same bottom-aligned box in the table's own type. */
.onball-table thead th > button,
.onball-table thead th > span {
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  gap: 3px;
  min-height: 2.6rem;
  width: 100%;
  padding: 0;
  background: none;
  border: 0;
  color: inherit;
  font: inherit;
  letter-spacing: .07em;
  text-transform: uppercase;
  text-align: end;
}

.onball-table thead th > button { cursor: pointer; }
.onball-table thead th > button:hover { color: var(--interactive-hover); }

/* The three left-hand columns hold names and words and their body cells are
   left-aligned; the heads follow them rather than the numeric default. */
.onball-table thead th:first-child > button,
.onball-table thead th.onball-head-plain > span { justify-content: flex-start; text-align: start; }

/* Each channel sorts on its own share, so "who played down the right" is one
   click rather than a read down a column of three-number chips. They sit inside
   the head's box as inline words, not as three more full-width controls. */
.onball-head-channels button {
  /* min-height 0 against the site-wide 44px control floor: at 44px these three
     words stood in boxes taller than the header and their labels centred a line
     above the separators between them. The padding buys back a usable target
     without taking that height out of the line, which the negative margin
     returns. */
  min-height: 0;
  padding: var(--space-2) 2px;
  margin-block: calc(var(--space-2) * -1);
  background: none;
  border: 0;
  color: inherit;
  font: inherit;
  line-height: inherit;
  letter-spacing: inherit;
  cursor: pointer;
}

.onball-head-channels b { font-weight: 400; color: var(--text-muted); }

.onball-head-channels button:hover { color: var(--interactive-hover); }
.onball-head-channels button.active { color: var(--text-primary); text-decoration: underline; text-underline-offset: 3px; }
.onball-table thead th.sorted { color: var(--text-primary); }
.onball-table thead th.sorted button i { font-style: normal; font-size: 10px; }