/* Server-rendered semantics around the approved prototype components. */
.ct-icon { display: inline-block; flex: none; vertical-align: -0.15em; }
.button .ct-icon { width: var(--icon-l); height: var(--icon-l); }
.button--small .ct-icon { width: var(--icon-m); height: var(--icon-m); }

.icon-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 160px), 1fr)); gap: var(--space-3); }
.icon-gallery__item { display: flex; align-items: center; gap: var(--space-3); min-width: 0; padding: var(--space-3); }
.icon-gallery__item .ct-icon { color: var(--text-strong); }
.icon-gallery__sizes { display: flex; flex-wrap: wrap; align-items: end; gap: var(--space-5); }
.icon-gallery__size { display: flex; flex-direction: column; align-items: center; gap: var(--space-2); }
.ct-wordmark { display: inline-flex; align-items: center; gap: var(--space-2); max-width: 100%; }
.ct-wordmark__premium { display: inline-flex; align-items: center; gap: var(--space-1); font: var(--type-caption); color: var(--text-accent); }
.screen-stack { display: grid; gap: var(--space-4); min-width: 0; }
.page-head__mark { flex: none; }
.page-head__row { flex-wrap: wrap; }
.page-head__row > .grow { flex: 1 1 calc(var(--tap-min) * 4); min-width: 0; }
.page-head__actions { flex-wrap: wrap; margin-left: auto; max-width: 100%; justify-content: flex-end; }
/* The match scoreboard (shared/_fixture_hero): competition and status above, two clubs either side of one plate that carries the state
   (kick-off, clock or score), and under each name what the club has just done: its last five results, or its goals once the match is on. */
.fixture-hero.card--hero { display: grid; gap: var(--space-4); padding: var(--card-pad); }
/* The whole painted pitch shows, so the veil only calms the words: the lines and the clay stay visible around the crests. */
.fixture-hero.hero-veil { --veil-core: 52%; --veil-edge: 34%; --veil-wash: 4%; }
.fixture-hero__meta { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); min-width: 0; }
.fixture-hero__competition { display: inline-flex; align-items: center; gap: var(--space-2); min-width: 0; padding: var(--space-1) var(--space-3) var(--space-1) var(--space-2); border-radius: var(--radius-pill); background: var(--veil-dark); color: var(--text-strong); }
.fixture-hero__board { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: start; gap: var(--space-3); }
.fixture-hero__team { --team-glow: var(--home); position: relative; display: flex; flex-direction: column; align-items: center; gap: var(--space-2); min-width: 0; text-align: center; }
.fixture-hero__team--away { --team-glow: var(--away); }
/* A pool of the club's own colour under its crest, so each side of the board is lit differently. */
.fixture-hero__team::before { content: ""; position: absolute; z-index: -1; top: calc(var(--space-4) * -1); left: 50%; width: calc(var(--hero-crest) * 2.4); aspect-ratio: 1; transform: translateX(-50%); pointer-events: none; background: radial-gradient(closest-side, color-mix(in srgb, var(--team-glow) 42%, transparent), transparent); }
.fixture-hero { --hero-crest: 64px; }
.fixture-hero__crest .team-crest { width: var(--hero-crest); height: var(--hero-crest); filter: drop-shadow(0 6px 8px rgba(0, 0, 0, .45)); }
.fixture-hero__name { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; max-width: 100%; font: var(--weight-display) var(--fs-body)/var(--lh-label) var(--font-display); text-wrap: balance; overflow-wrap: anywhere; color: var(--text-strong); text-shadow: 0 1px 14px color-mix(in srgb, var(--surface-page) 80%, transparent); }
.fixture-hero__scorers { display: grid; gap: 2px; max-width: 100%; margin: 0; padding: 0; list-style: none; font: var(--type-caption); color: var(--text-body); }
.fixture-hero__scorers li { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0; min-width: 0; }
.fixture-scorer-name { min-width: 0; max-width: 100%; overflow-wrap: anywhere; }
.fixture-scorer-name__full { display: none; }
.fixture-scorer-minutes { display: flex; flex-wrap: wrap; justify-content: center; column-gap: var(--space-1); max-width: 100%; }
.fixture-scorer-minutes > span { white-space: nowrap; }
.fixture-hero__scorers .num { flex: none; color: var(--text-strong); font-size: var(--fs-caption); }
.form-run { display: flex; justify-content: center; gap: 2px; max-width: 100%; margin: 0; padding: 0; list-style: none; }
@media (min-width: 600px) { .form-run { gap: var(--space-1); } }
/* The last five results as the shared result status (Won / Draw / Lost) on small tinted chips, shrinking to fit a phone column. */
.form-run__dot { display: grid; place-items: center; flex: 0 1 var(--space-5); min-width: var(--space-4); height: var(--space-5); border-radius: var(--radius-xs); box-shadow: var(--shadow-chip); background: var(--surface-raised); cursor: default; }
.form-run .result-status { gap: 0; }
.form-run .ct-icon { width: var(--icon-s); height: var(--icon-s); }
.form-run__dot:has(.result-status--won) { background: var(--tint-success); color: var(--text-up); }
.form-run__dot:has(.result-status--draw) { color: var(--text-body); }
.form-run__dot:has(.result-status--lost) { background: var(--tint-danger); color: var(--text-down); }
.fixture-hero__plate { display: flex; flex-direction: column; align-items: center; gap: var(--space-2); min-width: 0; }
.fixture-hero__plate--kickoff { align-self: center; padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); background: var(--veil-dark); box-shadow: var(--shadow-well); }
.fixture-hero__plate--score { padding-top: var(--space-1); }
.fixture-hero__time { font: var(--weight-display) var(--fs-num-m)/1 var(--font-display); color: var(--text-strong); letter-spacing: var(--tracking-numeral); }
.fixture-hero__day { font: var(--type-label); color: var(--text-on-hero); white-space: nowrap; }
.fixture-hero__score { display: flex; align-items: center; gap: var(--space-1); }
.fixture-hero__score .score-tile { --score-w: 44px; --score-h: 56px; font-size: var(--fs-num-m); }
.fixture-hero__dash { color: var(--text-on-hero); font: var(--weight-display) var(--fs-label)/1 var(--font-display); }
.fixture-hero__facts { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-1) var(--space-4); margin: 0; color: var(--text-on-hero); }
.fixture-hero__facts > span { display: inline-flex; align-items: center; gap: var(--space-1); min-width: 0; }
.fixture-hero__facts .ct-icon { flex: none; }
@media (min-width: 600px) {
  .fixture-hero { --hero-crest: 72px; }
  .fixture-hero__board { gap: var(--space-5); }
  .fixture-hero__name { font: var(--type-h3); }
  .fixture-hero__plate--kickoff { padding: var(--space-4) var(--space-5); }
  .fixture-hero__time { font-size: var(--fs-num-l); }
  .fixture-hero__score .score-tile { --score-w: 56px; --score-h: 72px; font-size: var(--fs-num-l); }
  .fixture-hero__scorers li { flex-direction: row; gap: var(--space-1); }
  .fixture-scorer-name__full { display: inline; }
  .fixture-scorer-name__short { display: none; }
  .fixture-hero__scorers, .fixture-hero__scorers .num { font-size: var(--fs-label); line-height: var(--lh-label); }
}
@media (min-width: 960px) {
  .fixture-hero { --hero-crest: 96px; }
  .fixture-hero.card--hero { gap: var(--space-5); padding-block: var(--space-6); min-height: 300px; align-content: space-between; }
  .fixture-hero__name { font: var(--type-h2); }
  .fixture-hero__time { font-size: var(--fs-num-xl); }
  .fixture-hero__score .score-tile { --score-w: 72px; --score-h: 92px; font-size: var(--fs-num-xl); }
}
@media (min-width: 1280px) {
  .fixture-hero { --hero-crest: 120px; }
  .fixture-hero__name { font: var(--type-h1); }
}
/* Compact: the practice overview keeps the scoreboard to one short band at every width. */
.fixture-hero--compact.card--hero { --hero-crest: 48px; gap: var(--space-4); min-height: 0; padding-block: var(--card-pad); }
.fixture-hero--compact .fixture-hero__name { font: var(--weight-display) var(--fs-body)/var(--lh-label) var(--font-display); }
.fixture-hero--compact .fixture-hero__time { font-size: var(--fs-num-s); }
.fixture-hero--compact .fixture-hero__score .score-tile { --score-w: 40px; --score-h: 48px; font-size: var(--fs-num-m); }
.game-grid--single { grid-template-columns: minmax(0, 1fr); grid-template-areas: "recap" "rest"; }
/* The call card on a fixture page: the five questions as sculpted icons, the lock as one line, one primary action. */
.match-call__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; }
.match-call .button-row form { display: contents; }
.match-call__lock { display: inline-flex; align-items: center; gap: var(--space-2); font: var(--type-label); color: var(--text-muted); }
.match-call__lock .num { color: var(--text-strong); font-family: var(--font-display); }
.match-call__lock.is-soon .num { color: var(--text-warning); }
/* Secondary prediction links remain quiet, with a full touch target. */
.match-call a.caption, .fixture-row__action a.caption { display: inline-flex; align-items: center; min-height: var(--tap-min); font-size: var(--fs-label); }
.match-settlement-status p { max-width: var(--measure-copy); }
/* Keep the football result column readable and align its points header with
   the right-aligned point receipts below it, including on narrow phones. */
.fixture-point-receipt table { table-layout: fixed; }
.fixture-point-receipt th:first-child { width: 43%; }
.fixture-point-receipt th:nth-child(2) { width: 33%; }
.data-table.fixture-point-receipt .data-table__num { text-align: right; }
@media (max-width: 600px) {
  .data-table.fixture-point-receipt th, .data-table.fixture-point-receipt td { padding-inline: var(--space-2); }
}
/* Label/value facts share one baseline and a consistent column edge. */
.fact-list { display: grid; gap: var(--space-3); margin: 0; }
.fact-list > div { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-4); align-items: baseline; }
.fact-list dt { font: var(--type-label); color: var(--text-muted); }
.fact-list dd { margin: 0; font: var(--type-label); font-variant-numeric: tabular-nums; text-align: right; }
/* A card that folds: the summary is the whole collapsed card, the body opens below it. */
.summary-link { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); }
.summary-link__body { min-width: 0; }
.summary-link > .ct-icon { flex: none; color: var(--text-muted); }
.summary-link:hover > .ct-icon { color: var(--text-accent); }
.summary-link:active { box-shadow: var(--shadow-key-pressed); }
.fold__body { display: flex; flex-direction: column; gap: var(--space-5); padding-top: var(--space-4); }
.fold__body > .forecast + .forecast { padding-top: var(--space-5); border-top: 1px solid var(--border-faint); }
/* Shared compact people collections; prediction sheets load only on selection. */
.people-stack { min-width: 0; }
.prediction-gallery { min-width: 0; }
.people-stack__rail { display: flex; flex-wrap: nowrap; overflow: clip; isolation: isolate; list-style: none; margin: 0; padding: var(--space-3) var(--space-2) var(--space-2); }
.people-stack__rail > li { position: relative; flex: 0 0 auto; }
.people-stack__rail > li + li { margin-left: calc(-1 * var(--space-3)); }
.people-stack__rail > li:hover, .people-stack__rail > li:focus-within { z-index: var(--z-menu); }
.people-stack__person, .people-stack__overflow { display: grid; place-items: center; width: calc(var(--space-7) + var(--space-2)); height: calc(var(--space-7) + var(--space-2)); border-radius: var(--radius-avatar); color: var(--text-muted); text-decoration: none; }
.people-stack__portrait { display: grid; place-items: center; border: var(--border-width-strong) solid var(--surface-page); border-radius: var(--radius-avatar); background: var(--surface-page); transition: border-color var(--dur-fast), transform var(--dur-fast); }
.people-stack__person:hover .people-stack__portrait, .people-stack__person:focus-visible .people-stack__portrait { border-color: var(--accent); transform: translateY(calc(-1 * var(--space-1))); }
.people-stack__ellipsis { display: grid; place-items: center; width: var(--space-7); height: var(--space-7); border-radius: var(--radius-avatar); background: var(--surface-card); color: var(--text-muted); font: var(--type-h2); }
.people-stack__caption { display: flex; gap: var(--space-2); min-height: var(--lh-caption); }
.people-stack__total { flex: 0 0 auto; }
.people-stack__preview { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.prediction-gallery__identity { display: flex; align-items: center; gap: var(--space-4); min-width: 0; }
.prediction-gallery__identity > :first-child { flex: 0 0 auto; }
.prediction-gallery__identity > :last-child { min-width: 0; }
.prediction-gallery__pending { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.prediction-gallery__waiting { display: inline-flex; align-items: center; gap: var(--space-2); min-height: var(--tap-min); }
.prediction-gallery__dialog { max-width: var(--layout-medium); }
.prediction-gallery__heading { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-4); }
.prediction-gallery__heading h2 { overflow-wrap: anywhere; }
.prediction-gallery__heading > :last-child { flex-shrink: 0; }
.prediction-gallery__dialog .forecast + .forecast { padding-top: var(--space-5); border-top: var(--border-width) solid var(--border-faint); }
@media (prefers-reduced-motion: reduce) { .people-stack__portrait { transition: none; transform: none !important; } }

.data-table__scroll { overflow-x: auto; overscroll-behavior-inline: contain; }
.data-table table { width: 100%; border-collapse: collapse; text-align: left; font: var(--type-label); }
.data-table th { padding: var(--space-3) var(--space-4); background: var(--surface-sunken); color: var(--text-muted); font: var(--type-caption); font-weight: var(--weight-bold); white-space: nowrap; }
.data-table td { padding: var(--space-3) var(--space-4); border-top: 1px solid var(--border-faint); vertical-align: middle; font-variant-numeric: tabular-nums; }
.data-table tr.is-you, .data-table tr.is-current { background: var(--surface-accent-soft); }
.data-table__person { display: flex; align-items: center; gap: var(--space-2); min-width: 0; }
.data-table__num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.data-table > .inline-alert { margin: var(--space-3); }
.team-crest { display: inline-flex; flex: none; align-items: center; justify-content: center; width: var(--crest-size); height: var(--crest-size); object-fit: contain; }
.team-crest--unverified { background: var(--team-color); color: var(--team-ink); border-radius: var(--radius-sm); font: var(--type-caption); }
.team-crest--fallback { align-items: center; justify-content: center; overflow: hidden; white-space: nowrap; background: var(--team-color); color: var(--team-ink); border-radius: var(--radius-xs); font: var(--type-caption); font-weight: var(--weight-bold); }
.competition-identity { display: inline-flex; flex: none; align-items: center; gap: var(--space-2); }
.competition-identity__tile { display: inline-flex; align-items: center; justify-content: center; flex: none; width: var(--competition-mark-size, 20px); height: var(--competition-mark-size, 20px); }
.competition-identity__tile img { width: 100%; height: 100%; object-fit: contain; }
.country-flag { display: inline-block; flex: none; object-fit: contain; }
.field-error { color: var(--text-danger); font: var(--type-caption); }
.card__meta, .card__kicker { color: var(--text-muted); font: var(--type-caption); }

pre { max-width: 100%; overflow: auto; white-space: pre-wrap; overflow-wrap: anywhere; font: var(--type-caption); }

.page-head h1, .page-head .caption { overflow-wrap: anywhere; }
.page-head h1 + .caption { margin-top: var(--space-1); }

/* Entry progress: the shared fixture navigator for Challenge and Duel flows. One numbered key per game; team names live in the title and the label. */
.entry-progress { display: grid; grid-template-columns: repeat(auto-fit, minmax(var(--control-h), 1fr)); gap: var(--space-2); margin: 0; padding: var(--space-1) var(--space-1) var(--space-2); list-style: none; }
.entry-progress > li { min-width: 0; }
.entry-progress__step { width: 100%; padding: 0; gap: var(--space-1); color: var(--text-muted); font-size: var(--fs-lead); }
.entry-progress__step .ct-icon { width: var(--icon-s); height: var(--icon-s); }
.entry-progress__step.is-complete { color: var(--text-accent); }
.entry-progress__step[aria-current="step"] { background: var(--accent); color: var(--text-on-accent); box-shadow: var(--shadow-key); filter: none; }
.entry-team-name { min-width: 0; overflow-wrap: anywhere; }
.entry-answer-receipt { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-3); margin: 0; }
.entry-answer-receipt dd { margin: var(--space-1) 0 0; }

.entry-score-team { line-height: var(--lh-label); display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; overflow-wrap: anywhere; }

.entry-choice-name { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; overflow-wrap: anywhere; }

/* Prediction components share their gutters and action alignment through review and receipt. */
.flow--prediction { max-width: var(--layout-medium); }
.flow-actions { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); }
.flow-actions > :last-child { margin-left: auto; }
.flow-feedback { display: flex; justify-content: flex-end; align-items: center; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-2); }
.flow-feedback > [role="status"] { overflow-wrap: anywhere; }
.entry-contest-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.page-head--compact h1 { font: var(--type-h2); }
.prediction-fixture { display: grid; gap: var(--space-4); padding-bottom: var(--space-5); border-bottom: 1px solid var(--border-faint); }
.prediction-fixture__competition { display: flex; align-items: center; justify-content: center; gap: var(--space-2); color: var(--text-muted); text-align: center; }
.prediction-fixture__competition .competition-identity { flex: none; }
.prediction-fixture .page-head { margin: 0; }
.prediction-fixture .page-head__row { display: block; }
.prediction-fixture .page-head__actions:empty { display: none; }
.prediction-fixture__matchup { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: var(--space-3); }
.prediction-fixture__team { display: grid; grid-template-rows: auto 1fr; justify-items: center; align-self: stretch; align-content: start; gap: var(--space-3); min-width: 0; text-align: center; }
.prediction-fixture__team > span:last-child { align-self: start; overflow-wrap: anywhere; }
.prediction-fixture__team > span:last-child { font: var(--type-h3); font-size: var(--fs-body); line-height: var(--lh-label); }
.prediction-fixture__versus { display: grid; place-items: center; align-self: start; margin-top: var(--space-4); min-width: var(--space-6); height: var(--space-6); border-radius: var(--radius-pill); background: var(--surface-sunken); box-shadow: var(--shadow-well); color: var(--text-subtle); font: var(--type-label); font-family: var(--font-display); }
.prediction-fixture__schedule { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--space-2); }
.prediction-fixture__schedule > span { display: flex; align-items: center; gap: var(--space-2); min-width: 0; min-height: var(--space-6); }
.prediction-fixture__schedule time { white-space: nowrap; font-variant-numeric: tabular-nums; }
.prediction-fixture__schedule > span + span { padding-left: var(--space-2); border-left: 1px solid var(--border-faint); }
.prediction-fixture__schedule > .prediction-fixture__lock { padding: 0 var(--space-3); border: 0; border-radius: var(--radius-pill); background: var(--surface-sunken); box-shadow: var(--shadow-well); color: var(--text-strong); font-weight: var(--weight-semibold); }
.prediction-heading { display: inline-flex; align-items: center; gap: var(--space-2); padding: 0; font: var(--type-h3); font-size: var(--fs-lead); letter-spacing: var(--tracking-display); }
.prediction-period { color: var(--text-muted); font: var(--type-caption); white-space: nowrap; letter-spacing: normal; }
.prediction-question .prediction-heading { width: 100%; flex-wrap: wrap; }
.prediction-help { margin: 0; text-wrap: pretty; }
.prediction-help:empty { display: none; }
.choices--two { --n: 2; }
.choice.is-implied:not(:has(input:checked)) { color: var(--text-muted); cursor: default; }

/* Read-only calls use the shared forecast receipt. */
.entry-receipt__matchup { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: var(--space-2); }
.entry-receipt__team { display: grid; grid-template-rows: auto 1fr; justify-items: center; align-self: stretch; gap: var(--space-2); text-align: center; min-width: 0; }
.entry-receipt__team .entry-team-name { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; }
.entry-receipt__score { display: flex; align-items: center; gap: var(--space-2); }
.entry-receipt__call { display: grid; justify-items: center; gap: var(--space-1); }
.entry-receipt__competition { display: flex; align-items: center; justify-content: center; gap: var(--space-2); flex-wrap: wrap; text-align: center; }
.entry-receipt__competition > span:not(.competition-identity) { min-width: 0; overflow-wrap: anywhere; }
.entry-receipt__competition time { white-space: nowrap; }
.forecast, .forecast-card { container: forecast-card / inline-size; }
.forecast-card__layout { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "heading actions" "summary summary" "answers answers"; gap: var(--space-6) var(--space-5); }
.forecast-card__heading { grid-area: heading; justify-content: flex-start; align-content: center; gap: var(--space-4); }
.forecast-card__heading h2 { font: var(--type-h2); }
.forecast-card__actions { grid-area: actions; align-self: start; max-width: calc(var(--space-9) * 3); }
.forecast-card__actions .button-row { justify-content: flex-end; }
.forecast-summary { grid-area: summary; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); align-items: start; gap: var(--space-6); }
.forecast-summary > * { min-width: 0; }
.forecast-summary__heading { display: flex; align-items: center; gap: var(--space-2); margin: 0; }
.forecast-summary__heading .prediction-period { margin-left: auto; }
.forecast-summary__matchup { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: start; gap: var(--space-4); padding-top: var(--space-5); }
.forecast-summary__team { display: grid; justify-items: center; gap: var(--space-3); text-align: center; min-width: 0; font: var(--type-body); overflow-wrap: anywhere; }
.forecast-summary__team .team-crest { margin-top: var(--space-1); }
.forecast-summary__matchup .entry-receipt__score { align-self: start; }
.forecast-summary__dash { font: var(--type-h2); color: var(--text-muted); }
.forecast-summary__chances { padding-left: var(--space-6); border-left: var(--border-width) solid var(--border-faint); }
.forecast-answers { grid-area: answers; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: stretch; gap: var(--space-3); }
.forecast-answers:has(.forecast-answer:nth-child(4)) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.forecast-answer { display: grid; grid-template-columns: var(--space-6) minmax(0, 1fr); align-content: start; column-gap: var(--space-3); row-gap: var(--space-1); min-width: 0; padding: var(--space-4); border-radius: var(--radius-md); background: var(--surface-sunken); box-shadow: var(--shadow-well); }
.forecast-answer dt { display: contents; }
.forecast-answer dt > .meaning-icon { grid-row: 1 / 3; align-self: center; }
.forecast-answer dt .label { grid-column: 2; font: var(--type-label); font-weight: var(--weight-regular); color: var(--text-muted); overflow-wrap: anywhere; }
.forecast-answer dd { grid-column: 2; margin: 0; font: var(--type-body); font-weight: var(--weight-semibold); overflow-wrap: anywhere; }
@container forecast-card (max-width: 760px) {
  .forecast-card__heading { flex-direction: column; align-items: flex-start; align-content: flex-start; gap: var(--space-2); }
  .forecast-summary { gap: var(--space-5); }
  .forecast-summary__matchup { gap: var(--space-2); }
  .forecast-summary__chances { padding-left: var(--space-5); }
  .forecast-summary .score-tile--forecast { --score-w: calc(var(--space-7) + var(--space-2)); --score-h: calc(var(--space-8) + var(--space-2)); font-size: var(--fs-num-l); }
  .forecast-summary__team { font: var(--type-label); font-weight: var(--weight-regular); }
  .forecast-answer { grid-template-columns: var(--space-5) minmax(0, 1fr); gap: var(--space-1) var(--space-2); padding: var(--space-3); }
}
@container forecast-card (max-width: 600px) {
  .forecast-card__layout { grid-template-columns: minmax(0, 1fr); grid-template-areas: "heading" "summary" "answers" "actions"; gap: var(--space-5); }
  .forecast-card__actions { max-width: none; }
  .forecast-card__actions .button-row { display: grid; grid-template-columns: minmax(0, 1fr); }
  .forecast-summary { grid-template-columns: minmax(0, 1fr); }
  .forecast-summary__team { font: var(--type-body); }
  .forecast-summary__chances { padding: var(--space-5) 0 0; border-left: 0; border-top: var(--border-width) solid var(--border-faint); }
  .forecast-answers, .forecast-answers:has(.forecast-answer:nth-child(4)) { grid-template-columns: minmax(0, 1fr); gap: 0; padding-inline: var(--space-4); background: var(--surface-sunken); border-radius: var(--radius-md); box-shadow: var(--shadow-well); }
  .forecast-answer { grid-template-columns: var(--space-5) minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: var(--space-3); padding: var(--space-4) 0; background: transparent; border-radius: 0; box-shadow: none; }
  .forecast-answer + .forecast-answer { border-top: var(--border-width) solid var(--border-faint); }
  .forecast-answer dt > .meaning-icon { grid-row: 1; }
  .forecast-answer dt .label { font: var(--type-body); }
  .forecast-answer dd { grid-column: 3; text-align: right; }
}
.prediction-layout { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-6); align-items: start; }
.prediction-layout > * { min-width: 0; }
.prediction-layout .prediction-heading > .meaning-icon { width: var(--space-6); height: var(--space-6); }
.prediction-question.field { gap: var(--space-3); }
.prediction-question .choice { display: grid; grid-template-rows: var(--icon-3xl) minmax(0, 1fr); align-content: start; justify-items: center; }
.prediction-question .choice .entry-choice-name { grid-row: 2; align-self: start; }
.score-entry { display: grid; grid-template-columns: minmax(0, 1fr) var(--space-4) minmax(0, 1fr); gap: var(--space-3) var(--space-2); align-items: center; container-type: inline-size; }
.score-entry__team { display: flex; flex-direction: column; align-items: center; align-self: stretch; justify-content: flex-start; gap: var(--space-2); min-width: 0; text-align: center; grid-row: 1; grid-column: 1; }
.score-entry__team ~ .score-entry__team { grid-column: 3; }
.score-entry__control { display: grid; grid-template-columns: var(--tap-min) minmax(0, 1fr) var(--tap-min); align-items: center; min-width: 0; background: var(--surface-bezel); border: 0; border-radius: var(--radius-md); grid-row: 2; grid-column: 1; box-shadow: var(--shadow-well); }
.score-entry__control ~ .score-entry__control { grid-column: 3; }
.score-entry__dash { grid-row: 2; grid-column: 2; text-align: center; color: var(--text-muted); }
/* Keep two-digit calls visible when full-size steppers leave no room beside them. */
@container (max-width: 320px) {
  .score-entry__control { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .score-entry__control .score-entry__value { grid-column: 1 / -1; grid-row: 1; }
  /* The score has the whole row to itself here, so it keeps the large figure even on the narrowest phones. */
  .score-entry__control input.score-entry__value { font-size: var(--fs-num-l); }
}
/* Two columns need about 400px each: three answer keys must hold "Nottingham" whole, so tablets stack the fields. */
@media (max-width: 959px) {
  .prediction-layout { grid-template-columns: minmax(0, 1fr); gap: var(--space-5); }
}
@media (max-width: 600px) {
  .flow-actions { gap: var(--space-2); }
  .flow-actions > .button { min-width: 0; padding-inline: var(--space-2); font-size: var(--fs-label); white-space: normal; }
}

/* Visual opponent selection: native radios retain keyboard and no-JavaScript operation.
   Used by the Duel setup; identity art comes from the shared avatar helper. */
.opponent-choice { position: relative; display: flex; flex-direction: column; align-items: center; gap: var(--space-2); min-width: 0; padding: var(--space-4); border: 0; border-radius: var(--radius-lg); background: var(--surface-card); cursor: pointer; text-align: center; overflow-wrap: anywhere; box-shadow: var(--shadow-card); }
.opponent-choice:hover { background: var(--surface-raised); }
.opponent-choice:has(input:checked) input { accent-color: var(--accent); }
.opponent-choice:has(input:checked) { background: var(--surface-accent-soft); box-shadow: inset 0 0 0 2px var(--accent), var(--shadow-card); }
.opponent-choice--locked { color: var(--text-muted); }
.opponent-choice--locked .bot-card__name { color: var(--text-muted); }
.opponent-choice--locked:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.opponent-choice:focus-within { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.opponent-choice input { position: absolute; top: var(--space-2); right: var(--space-2); width: var(--space-4); height: var(--space-4); margin: 0; accent-color: var(--accent); }
.opponent-choice__portrait { display: grid; place-items: center; min-height: var(--space-9); }
.opponent-choice__style { font: var(--type-caption); color: var(--text-muted); }
.opponent-preview { display: block; }
.opponent-preview [hidden] { display: none; }
.opponent-preview__art { display: flex; justify-content: center; }
.selection-footer { position: sticky; bottom: var(--space-4); z-index: var(--z-sticky); display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: var(--space-4); padding: var(--space-3) var(--space-4); background: var(--surface-glass); backdrop-filter: blur(12px); border: 0; border-radius: var(--radius-lg); box-shadow: var(--shadow-pop); }
.selection-footer > .stack:last-child { flex: 1 1 var(--layout-rail); max-width: var(--layout-aside); }
.setup-progress { margin-bottom: var(--space-5); }
.setup-progress ol { display: flex; gap: var(--space-5); list-style: none; padding: 0; margin: 0; }
.setup-progress li { display: flex; align-items: center; gap: var(--space-2); color: var(--text-muted); font: var(--type-label); }
.setup-progress li[aria-current] { color: var(--text-accent); }
.setup-progress__number { display: grid; place-items: center; width: var(--space-5); height: var(--space-5); border: 2px solid currentColor; border-radius: var(--radius-pill); flex: none; font-family: var(--font-display); font-size: var(--fs-caption); }
@media (max-width: 600px) {
  .setup-progress ol { gap: var(--space-3); justify-content: space-between; }
}
/* Until the preview moves into the 1280px aside it is a banner above the roster: words left, portrait right, never a centred portrait over an 800px field. */
@media (max-width: 1279px) {
  .opponent-preview__art { float: right; margin-left: var(--space-3); }
  .opponent-preview__art .avatar { max-width: var(--space-9); max-height: var(--space-9); }
  .opponent-preview section { display: block; }
  .opponent-preview section > * + * { margin-top: var(--space-3); }
}

@media (max-width: 959px) {
  .selection-footer { bottom: calc(var(--bar-h) + env(safe-area-inset-bottom) + var(--space-3)); }
}

/* Avatar background colour control */
.avatar-colour-dialog { max-width: 400px; }
.avatar-colour-dialog__preview { justify-self: center; margin-inline: auto; }
.avatar-colour-dialog .avatar-colour { padding: 0; background: transparent; box-shadow: none; }
.avatar-colour { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); padding: var(--space-4); border: 0; border-radius: var(--radius-lg); background: var(--surface-sunken); box-shadow: var(--shadow-card); }
.avatar-colour .field-label { flex-basis: 100%; }
.avatar-colour input[type="color"] { width: var(--control-h); height: var(--control-h); padding: var(--space-1); border: 0; border-radius: var(--radius-md); background: var(--surface-raised); cursor: pointer; box-shadow: var(--shadow-key-quiet); }
.avatar-colour output { color: var(--text-muted); font-size: var(--fs-label); font-variant-numeric: tabular-nums; }

.avatar-colour__spectrum { position: relative; flex-basis: 100%; height: 180px; border-radius: var(--radius-md); background: linear-gradient(to top, var(--picker-black), transparent), linear-gradient(to right, var(--picker-white), transparent), hsl(var(--avatar-hue) 100% 50%); cursor: crosshair; touch-action: none; }
.avatar-colour__thumb { position: absolute; width: var(--space-4); height: var(--space-4); border: 2px solid var(--picker-white); border-radius: var(--radius-pill); box-shadow: 0 0 0 1px var(--picker-black); transform: translate(-50%, -50%); pointer-events: none; }
.avatar-colour__hue { appearance: none; flex-basis: 100%; min-width: 0; height: var(--control-h); margin: 0; background: transparent; cursor: pointer; }
.avatar-colour__hue::-webkit-slider-runnable-track { height: var(--space-3); border-radius: var(--radius-pill); background: var(--picker-spectrum); }
.avatar-colour__hue::-moz-range-track { height: var(--space-3); border-radius: var(--radius-pill); background: var(--picker-spectrum); }
.avatar-colour__hue::-webkit-slider-thumb { appearance: none; width: var(--space-5); height: var(--space-5); margin-top: calc(var(--space-1) * -1); border: 2px solid var(--picker-white); border-radius: var(--radius-pill); background: var(--surface-card); box-shadow: var(--shadow-pop); }
.avatar-colour__hue::-moz-range-thumb { width: var(--space-5); height: var(--space-5); border: 2px solid var(--picker-white); border-radius: var(--radius-pill); background: var(--surface-card); box-shadow: var(--shadow-pop); }

/* Compact Rating and people rows share the same geometry on all five destinations. */
.page-head--rating .page-head__row { flex-wrap: nowrap; align-items: flex-start; }
.page-head--rating .page-head__row > .grow { flex: 1 1 0; }
.page-head--rating .page-head__actions { flex: 0 0 auto; }
.people-row { flex-wrap: wrap; min-width: 0; }
.people-row > .grow { min-width: 0; overflow-wrap: anywhere; }
.people-row > .cluster { margin-left: auto; }
.people-row input { flex: none; }
@media (max-width: 600px) {
  .people-row > .cluster { flex-basis: 100%; justify-content: flex-end; }
}

/* Destination compositions share the approved preview's spacing and portrait-led rows. */
.page--destination > .tabs { margin-bottom: var(--space-5); border-bottom: var(--border-width) solid var(--border-faint); }
.page--destination > .stack--lg { gap: var(--space-6); }
.page--destination > .page-head .page-head__row > .grow { display: grid; gap: var(--space-2); }
.page--destination > .page-head .page-head__row { align-items: flex-start; }
.page--destination .tabs a[aria-current="page"] { color: var(--text-accent); }
.page--destination .you-bar { padding-bottom: 0; }
.opponent-directory { display: flex; flex-direction: column; min-width: 0; container: duel-rows / inline-size; }
.opponent-directory__row { display: flex; align-items: center; gap: var(--space-4); padding-block: var(--space-4); min-width: 0; }
.opponent-directory__row:first-child { padding-top: 0; }
.opponent-directory__row:last-child { padding-bottom: 0; }
.opponent-directory__row + .opponent-directory__row { border-top: var(--border-width) solid var(--border-faint); }
.opponent-directory__row > .avatar, .opponent-directory__row > .avatar-premium, .opponent-directory__row > .avatar-marked { flex-shrink: 0; }
.opponent-directory__row h3 { color: var(--text-strong); overflow-wrap: anywhere; }
.opponent-directory__actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: var(--space-3); }
/* Duel summaries share one quiet list rhythm: identity, state/points, then supporting facts. */
.opponent-directory__row.duel-summary { position: relative; isolation: isolate; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--space-2) var(--space-3); padding-block: var(--space-5); }
.duel-summary:first-child { padding-top: 0; }
.duel-summary:last-child { padding-bottom: 0; }
.duel-summary__identity { display: flex; align-items: center; gap: var(--space-3); min-width: 0; }
.duel-summary__identity > :is(.avatar, .avatar-premium, .avatar-marked, .meaning-icon) { flex: none; }
.duel-summary__name { display: grid; gap: var(--space-1); min-width: 0; }
.duel-summary__name h3 { font: var(--type-h3); }
.duel-summary__state { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-3); }
.duel-summary__status, .duel-summary__deadline { font: var(--type-label); color: var(--text-muted); }
.duel-summary__deadline { color: var(--text-subtle); }
.duel-summary__status--won { color: var(--text-up); }
.duel-summary__arrow { grid-column: 2; color: var(--text-subtle); }
.duel-summary__footer { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2) var(--space-3); padding-left: calc(var(--space-7) + var(--space-3)); min-width: 0; }
.duel-summary__facts { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); font: var(--type-label); color: var(--text-muted); }
.duel-summary__facts .facts { gap: 0; }
.duel-summary__facts .facts li { gap: var(--space-1); }
.duel-summary__facts .facts .num { font: inherit; color: inherit; }
.duel-result__score { display: flex; align-items: flex-start; gap: var(--space-2); white-space: nowrap; }
.duel-result__side { display: grid; justify-items: center; gap: var(--space-1); min-width: 0; color: var(--text-strong); }
.duel-result__side--winner > .num { color: var(--text-up); }
.duel-result__separator { font: var(--type-h3); color: var(--text-subtle); }
.duel-result__actions { display: flex; margin-left: auto; }
.duel-summary__footer > .button { margin-left: auto; }
.duel-summary :is(a, button):not(.card-link) { position: relative; z-index: 2; }
.duel-summary .card-link { position: static; color: inherit; }
.duel-summary:has(.card-link:focus-visible) { outline: 3px solid var(--focus-ring); outline-offset: var(--space-1); border-radius: var(--radius-md); }
.duel-summary .card-link:focus-visible { outline: none; }
.duel-summary:has(.card-link:hover) h3 { color: var(--text-accent); }
@container duel-rows (max-width: 300px) {
  .duel-result__score .num { font-size: var(--fs-num-s); }
  .duel-summary__footer { padding-left: 0; }
}
@container duel-rows (min-width: 640px) {
  .opponent-directory__row.duel-summary { grid-template-columns: minmax(0, 1fr) auto auto; gap: var(--space-2) var(--space-5); }
  .duel-summary__identity { grid-column: 1; grid-row: 1; }
  .duel-summary__footer { display: contents; }
  .duel-summary__facts { grid-column: 1; grid-row: 2; padding-left: calc(var(--space-7) + var(--space-3)); }
  .duel-result__score, .duel-summary__footer > .button { grid-column: 2; grid-row: 1 / 3; }
  .duel-result__actions, .duel-summary__arrow { grid-column: 3; grid-row: 1 / 3; }
}
.group-challenge-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-5); }
.activity-feed { container: activity / inline-size; display: grid; grid-template-columns: 40px minmax(0, 1fr) max-content; column-gap: var(--space-4); }
.activity-result { display: grid; grid-column: 1 / -1; grid-template-columns: subgrid; align-items: center; min-width: 0; min-height: var(--tap-min); padding-block: var(--space-4); }
.activity-result:first-child { padding-top: 0; }
.activity-result:last-child { padding-bottom: 0; }
.activity-result + .activity-result { border-top: var(--border-width) solid var(--border-faint); }
.activity-result__identity { display: grid; gap: var(--space-1); min-width: 0; }
.activity-result__identity h3 { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; overflow-wrap: anywhere; }
.activity-result__outcome { display: flex; flex-direction: column; align-items: flex-end; justify-self: end; gap: var(--space-2); }
.activity-result__outcome > .num, .activity-result__points { white-space: nowrap; }
.activity-result__meta { display: block; }
.activity-result__status { max-width: calc(var(--space-9) + var(--space-7)); text-align: right; text-wrap: balance; }
.activity-result .result-widget { grid-template-columns: auto auto; align-items: center; gap: var(--space-1); padding: 0; background: none; box-shadow: none; }
.activity-result .result-widget .num { font-size: var(--fs-h3); }
.activity-result__points .num { font-size: var(--fs-h3); }
.activity-result .result-status .ct-icon { width: var(--space-4); height: var(--space-4); }
.challenge-avatar { display: block; width: 40px; height: 40px; object-fit: cover; border-radius: var(--radius-sm); overflow: hidden; }
.challenge-avatar--match { position: relative; isolation: isolate; background: var(--surface-card); }
.challenge-avatar--match .match-cover__side { background: var(--match-home); }
.challenge-avatar--match .match-cover__side + .match-cover__side { background: var(--match-away); }
.challenge-avatar--match .match-cover__side .team-crest { width: 40px; height: 40px; top: calc(var(--space-1) * -1); left: calc(var(--space-3) * -1); opacity: .9; }
.challenge-avatar--match .match-cover__sides::after { background: linear-gradient(0deg, color-mix(in srgb, var(--surface-canvas) 30%, transparent), transparent 60%); }
.challenge-avatar--match .match-cover__side + .match-cover__side .team-crest { left: auto; right: calc(var(--space-3) * -1); }
.activity-result:hover h3 { color: var(--text-accent); }
.activity-result:focus-visible { border-radius: var(--radius-md); }
@container activity (max-width: 400px) {
  .activity-result .result-widget .num { font-size: var(--fs-body); }
  .activity-result__points .num { font-size: var(--fs-body); }
}
.featured-challenge.card { display: grid; position: relative; }
.featured-challenge.card > .card { grid-area: 1 / 1; border: 0; border-radius: 0; padding-bottom: calc(var(--card-pad) + var(--space-3) + var(--tap-min)); }
.featured-challenge__facts { display: flex; align-items: center; gap: var(--space-4); }
.featured-challenge__facts .event-card__deadline { margin-left: 0; }
.featured-challenge__team { grid-area: 1 / 1; align-self: start; justify-self: end; margin: var(--card-pad); z-index: 1; }
.featured-challenge > .hero-veil { --veil-x: 30%; --veil-core: 46%; --veil-edge: 34%; --veil-wash: 0%; }
.featured-challenge__entry { grid-area: 1 / 1; align-self: end; justify-self: end; margin: var(--card-pad); z-index: 1; }
@media (min-width: 601px) {
  .featured-challenge.card > .card { padding-bottom: var(--card-pad); }
  .featured-challenge__facts { min-height: var(--tap-min); padding-right: calc(var(--space-9) * 2 + var(--space-5)); }
}
.rating-peek { display: inline-flex; align-items: center; min-height: var(--tap-min); }

.form-tile--empty { justify-content: center; min-height: var(--tap-min); border-style: dashed; border-top-width: var(--border-width); color: var(--text-subtle); }
.standing-summary { display: flex; align-items: center; justify-content: space-between; gap: var(--space-5); padding: var(--space-4); }
.standing-summary__rank { display: flex; align-items: baseline; gap: var(--space-3); }
.standing-summary__rating { display: flex; align-items: center; flex-shrink: 0; }
.standings-search { max-width: var(--layout-compact); }
.data-table--embedded { border: 0; border-radius: 0; margin-inline: calc(var(--card-pad) * -1); box-shadow: none; }
.card > .data-table--embedded:last-child { margin-bottom: calc(var(--card-pad) * -1); border-radius: 0 0 var(--radius-lg) var(--radius-lg); }
.data-table--embedded .data-table__head, .data-table--embedded .data-table__row { padding-inline: var(--card-pad); }
@media (max-width: 600px) {
  .page--destination > .stack--lg { gap: var(--space-5); }
  .opponent-directory__row { display: grid; grid-template-columns: var(--space-8) minmax(0, 1fr); align-items: start; gap: var(--space-3); }
  .opponent-directory__row > .avatar, .opponent-directory__row > .avatar-premium, .opponent-directory__row > .avatar-marked { grid-column: 1; grid-row: 1 / 3; }
  .opponent-directory__row:not(.duel-summary) .avatar { width: var(--space-8) !important; height: var(--space-8) !important; }
  .opponent-directory__row > .grow { grid-column: 2; }
  .opponent-directory__actions { grid-column: 2; gap: var(--space-2); }
  .group-challenge-grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-4); }
  .featured-challenge__entry { justify-self: stretch; }
  .featured-challenge__entry > .button { width: 100%; }
  .standing-summary { gap: var(--space-3); }
  .standing-summary .plate { font-size: var(--fs-num-l); }
  .standing-summary__rank { flex-direction: column; gap: 0; }
  .standing-summary .num--xl { font-size: var(--fs-num-l); }
}
.page--destination .tabs { gap: var(--space-4); }
.page--destination .tabs a { font: var(--type-label); font-weight: var(--weight-bold); }
@media (max-width: 600px) {
  .page--destination > .page-head:not(.page-head--rating) .page-head__row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-3); }
  .page--destination > .page-head:not(.page-head--rating) .page-head__actions { justify-content: flex-end; justify-self: end; margin-left: 0; }
}

@media (max-width: 959px) {
  .page-head__row:has(.responsive-action) { flex-wrap: nowrap; align-items: flex-start; }
  .page-head__row:has(.responsive-action) > .grow { flex-basis: 0; }
  .page-head__actions:has(.responsive-action) { flex-wrap: nowrap; }
}

.rating-gap { display: flex; align-items: center; justify-content: center; min-height: var(--control-h-lg); border-block: var(--border-width) solid var(--border-faint); }
.rating-gap .button { width: 100%; }

/* The same bot identity, approach and Rating in directory links and radio cards: a compact row, never a tall poster. */
.bot-summary { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); width: 100%; min-width: 0; }
.bot-summary__approach { min-width: 0; }
.bot-summary > .rating-widget { flex: none; }
.bot-summary__rating { white-space: nowrap; }
.bot-card-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }
.card--bot, .opponent-choice--bot { display: grid; grid-template-columns: calc(var(--space-8) + var(--space-2)) minmax(0, 1fr) auto; grid-template-areas: "portrait name action" "summary summary summary"; align-items: center; justify-items: start; column-gap: var(--space-4); row-gap: var(--space-2); padding: var(--space-3) var(--space-4); text-align: left; }
.bot-card__portrait { grid-area: portrait; display: flex; justify-content: center; }
.bot-card__portrait .avatar { width: calc(var(--space-8) + var(--space-2)) !important; height: calc(var(--space-8) + var(--space-2)) !important; }
.bot-card__name { grid-area: name; font: var(--type-h3); color: var(--text-strong); }
.card--bot .bot-summary, .opponent-choice--bot .bot-summary { grid-area: summary; }
.bot-card__action { grid-area: action; display: flex; align-items: center; justify-content: center; width: var(--control-h-sm); height: var(--control-h-sm); color: var(--text-muted); }
.card--bot:hover .bot-card__action { color: var(--text-accent); }
.opponent-preview .bot-summary { clear: both; }
@media (max-width: 600px) {
  .bot-card-grid { grid-template-columns: minmax(0, 1fr); }
  .bot-card__action { width: var(--space-6); height: var(--space-6); }
  .card--bot, .opponent-choice--bot { grid-template-columns: var(--space-7) minmax(0, 1fr) auto; column-gap: var(--space-4); }
  .bot-card__portrait .avatar { width: var(--space-7) !important; height: var(--space-7) !important; }
}
/* An editorial Challenge offered to a Duel: name and facts, the main event, then lock time and the action. */
.duel-opponent { flex-wrap: wrap; margin-bottom: var(--space-5); column-gap: var(--space-5); }
.source-card { display: flex; flex-direction: column; gap: var(--space-3); }
.source-card__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.source-card__name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.source-card__head .facts { flex: none; }
.source-card__match { display: flex; align-items: center; gap: var(--space-2); min-width: 0; font-size: var(--fs-label); font-weight: var(--weight-bold); color: var(--text-body); }
.source-card__match .crest { flex: none; }
.source-card__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2) var(--space-3); padding-top: var(--space-3); border-top: 1px solid var(--border-faint); }
.source-card__foot .caption { white-space: nowrap; }

/* One people-table language for Ratings, Challenge results and Group standings.
   Native table roles are explicit because their rows use the same grid as Ratings. */
.data-table--people { container-type: inline-size; }
.data-table--people .data-table__person { gap: var(--space-3); }
.data-table__identity { display: flex; flex: 1; flex-direction: column; gap: var(--space-1); min-width: 0; }
.data-table__name { display: block; overflow-wrap: anywhere; }
a.data-table__name { margin-block: calc(var(--space-1) * -1); padding-block: var(--space-1); }
a.data-table__name:hover { color: var(--text-accent); }
a.data-table__name:focus-visible { outline-offset: 0; }
/* One native profile link owns the whole people-table row. */
.data-table__person { position: relative; min-height: var(--tap-min); }
a.data-table__name::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.data-table__row .data-table__person { position: static; }
.data-table__row:has(a.data-table__name) { isolation: isolate; }
.data-table__row a.data-table__name::after { z-index: 2; }
.data-table__row:has(a.data-table__name) :is(a, button, input, select, summary):not(.data-table__name) { position: relative; z-index: 3; }
.data-table__row:not(.is-you):has(a.data-table__name:hover) { background: var(--surface-raised); }
.data-table__row:has(a.data-table__name:focus-visible) { outline: 3px solid var(--focus-ring); outline-offset: -3px; }
.data-table__row a.data-table__name:focus-visible { outline: none; }
.data-table__meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1); overflow-wrap: anywhere; }
.data-table__meta .badge { max-width: 100%; white-space: normal; }
.data-table__result { display: flex; flex-direction: column; align-items: flex-end; gap: var(--space-1); }
.data-table__delta-inline { display: none; }
.data-table--standings, .data-table--group { --cols: var(--space-7) minmax(0, 1fr) var(--space-9) calc(var(--space-9) + var(--space-3)); }
.data-table--live { --cols: var(--space-8) minmax(0, 1fr) var(--space-9); }
.live-standing-place { display: inline-flex; flex-direction: column; align-items: center; gap: var(--space-1); }
.data-table--group { --cols: var(--space-7) minmax(0, 1fr) auto calc(var(--space-9) + var(--space-3)); }
.data-table--evaluation { --cols: minmax(0, 1fr) calc(var(--space-9) + var(--space-3)); }
.data-table--standings table, .data-table--standings thead, .data-table--standings tbody { display: block; }
.data-table--standings .data-table__head { position: sticky; top: 0; z-index: 1; }
.data-table--people .data-table__head, .data-table--people .data-table__row { padding-inline: var(--card-pad); }
.data-table--standings th, .data-table--standings td { padding: 0; border: 0; background: none; min-width: 0; }
.data-table--standings th { white-space: normal; text-transform: uppercase; letter-spacing: var(--tracking-label); }
.data-table--standings th.t-right { text-align: right; }
.data-table--standings th:first-child, .data-table--standings td:first-child { text-align: center; }
.data-table--standings td { font: var(--type-label); }
.data-table--standings .data-table__row.is-you { box-shadow: inset 0 0 0 2px var(--accent); border-radius: var(--radius-md); }

@container (max-width: 600px) {
  .data-table--results .data-table__head, .data-table--results .data-table__row,
  .data-table--live .data-table__head, .data-table--live .data-table__row,
  .data-table--group .data-table__head, .data-table--group .data-table__row { --cols: var(--space-6) minmax(0, 1fr) var(--space-8); gap: var(--space-2); }
  .data-table--group .data-table__head, .data-table--group .data-table__row { --cols: var(--space-6) minmax(0, 1fr) auto; }
  .data-table--results .data-table__secondary, .data-table--group .data-table__secondary { display: none; }
  .data-table--results .data-table__delta-inline, .data-table--group .data-table__delta-inline { display: inline-flex; }
  .data-table--live .data-table__head, .data-table--live .data-table__row { --cols: var(--space-8) minmax(0, 1fr) var(--space-8); }
  .data-table--live .data-table__person { gap: var(--space-2); }
}
@container (max-width: 320px) {
  .data-table--live .data-table__person { flex-direction: column; align-items: flex-start; gap: var(--space-1); }
}

/* First-time prediction reveals one ordinary question group at a time. */
.flow--first-prediction { max-width: var(--layout-form); }
.flow--first-prediction .prediction-layout { grid-template-columns: minmax(0, 1fr); }
.flow--first-prediction .prediction-layout > .stack:has(> [hidden]):not(:has(> :not([hidden]))) { display: none; }

/* Team form is a readable W / D / L strip, oldest to newest. */
.fixture-hero--identity .form-run{gap:var(--space-1);padding-top:var(--space-1)}
.fixture-hero--identity .form-run__dot{width:var(--space-5);height:calc(var(--space-5) + var(--space-1));flex:0 1 var(--space-5);background:transparent;box-shadow:none;min-width:0}
.fixture-form-letter{display:grid;place-items:center;width:100%;height:100%;border-radius:var(--radius-xs);font:var(--type-caption);font-weight:var(--weight-bold);box-shadow:var(--shadow-chip)}
.fixture-form-letter--win{background:var(--tint-success);color:var(--text-up)}
.fixture-form-letter--draw{background:var(--surface-raised);color:var(--text-body)}
.fixture-form-letter--loss{background:var(--tint-danger);color:var(--text-down)}
.fixture-hero--identity .form-run__dot:last-child .fixture-form-letter{outline:1px solid var(--border-control);outline-offset:2px}
@media(max-width:600px){.fixture-hero--identity .form-run{gap:2px}.fixture-hero--identity .form-run__dot{width:var(--space-4);height:var(--space-5);flex-basis:var(--space-4)}}

/* Friend discovery and invitations share one compact connection flow. */
.friend-empty { display: flex; flex-direction: column; align-items: center; gap: var(--space-5); text-align: center; padding-block: var(--space-7); }
.friend-empty > .stack { max-width: var(--layout-compact); }
.friend-flow-intro { display: flex; flex-direction: column; align-items: center; gap: var(--space-4); text-align: center; }
.connect-option { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--space-4); width: 100%; text-align: left; text-decoration: none; color: var(--text-strong); font: inherit; }
.connect-option > .stack { min-width: 0; overflow-wrap: anywhere; }
.invitation-link-actions { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.invitation-link-actions > .button { flex: 1; }
.friend-request-search .copy-field { display: flex; gap: var(--space-2); }
.friend-request-search .input { min-width: 0; }
.duel-friend-option { text-decoration: none; color: var(--text-strong); }
.duel-friend-option .grow { min-width: 0; overflow-wrap: anywhere; }
.duel-friend-option:hover { background: var(--surface-raised); }

/* Connection choices are content cards, including when the action submits a form. */
.connect-option { height: auto; min-height: var(--control-h-lg); white-space: normal; line-height: var(--line-body, 1.5); cursor: pointer; }
.connect-option:hover { background: var(--surface-raised); }
.profile-hero + .profile-body { min-width: 0; }
.page--profile > .bar-row { justify-content: space-between; flex-wrap: wrap; gap: var(--space-3); }
.page--profile .profile-actions { margin: 0; flex-wrap: wrap; }
.bot-method { padding-block: var(--space-4); border-block: 1px solid var(--border-faint); }
.bot-method p { color: var(--text-muted); max-width: 60ch; }
.fixture-item { min-width: 0; margin: 0; }
.fixture-feature { border: 2px solid var(--accent-line); border-radius: var(--radius-lg); background: var(--surface-accent-soft); overflow: hidden; }
.fixture-feature__label { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-3) var(--space-4); color: var(--text-accent); font: var(--type-label); }
.fixture-feature .fixture-row { border-radius: 0; box-shadow: none; }
.people-stack__overflow .people-stack__ellipsis { font: var(--type-label); }