/* Shared type scale, loaded last so responsive layouts use the same roles. */
:root {
  --font-sans: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --type-axis: .6875rem;
  --type-label: .75rem;
  --type-note: .8125rem;
  --type-control: .875rem;
  --type-data: .9375rem;
  --type-body: 1rem;
  --type-table-heading: .875rem;
  --type-table-value: 1.125rem;
  --type-table-score: 1.25rem;
  --type-card: 1.25rem;
  --type-heading: 1.625rem;
  --type-metric: 1.5rem;
  --type-feature: 1.5rem;
  --type-feature-value: 2rem;
  --type-display: 3rem;
  --type-page: clamp(2.5rem, 3.6vw, 3.25rem);
  --type-main-tab: .9375rem;
  --type-view-tab: .875rem;
}
body {font-family: var(--font-sans); font-size: var(--type-body); font-weight: 400; line-height: 1.65; letter-spacing: 0}
button, input, select, textarea {font-family: inherit}
b, strong {font-weight: 600}
h1 {font-size: var(--type-page); font-weight: 600; line-height: 1.15; letter-spacing: -.035em}
h2, .section-heading h2, .view-intro h2 {font-size: var(--type-heading); font-weight: 600; line-height: 1.3; letter-spacing: -.02em}
.match-inputs h2, .detail-grid article h2, .result-card>h2 {font-size: var(--type-card); line-height: 1.4; letter-spacing: -.015em}
.lead {font-size: var(--type-body); line-height: 1.7}
.view-intro p, .score-guide p, .method-grid p, .method-grid li, details p, dt, dd {font-size: var(--type-data); line-height: 1.7}
/* Supporting copy: full-width view descriptions and restrained section-colour emphasis. */
.view-intro>div {flex: 1 1 auto; min-width: 0}
.view-intro p {max-width: none; width: 100%; font-size: var(--type-body); line-height: 1.8; color: #4d5054}
.lead {max-width: none; color: #4d5054; line-height: 1.8}
.global-summary-mobile {display: none}
.copy-emphasis, .score-guide strong {color: var(--section-color, var(--ink)); font-weight: 600}
.copy-label {color: var(--ink); font-weight: 500}
.score-guide p {max-width: none; color: #4d5054; line-height: 1.8}
.footnote b, .footnote strong, .result-note strong {color: var(--section-color, var(--ink)); font-weight: 600}
.eyebrow, .snapshot>span {font-size: var(--type-label); font-weight: 600; line-height: 1.5; letter-spacing: .1em}
.snapshot strong {font-size: var(--type-body); font-weight: 600; line-height: 1.5; letter-spacing: 0}
.snapshot small {font-size: var(--type-label); line-height: 1.5}
.feature-dark strong {font-size: var(--type-feature); font-weight: 600; line-height: 1.4; letter-spacing: -.015em}
.feature-dark strong>span {font-size: var(--type-feature-value); font-weight: 600; line-height: 1.25; letter-spacing: -.015em}
.feature p, .feature-dark p {font-size: var(--type-note); line-height: 1.65}

/* Navigation, form labels and actions share consistent weights and spacing. */
.main-tabs a {font-size: var(--type-main-tab); font-weight: 600; line-height: 1.35; letter-spacing: 0}
.league-tabs a {font-size: var(--type-note); font-weight: 600; line-height: 1.4; letter-spacing: 0}
.pl-tabs button {font-size: var(--type-view-tab); font-weight: 600; line-height: 1.35; letter-spacing: 0}
.share, .primary, .secondary {font-size: var(--type-control); font-weight: 600; line-height: 1.4; letter-spacing: 0}
label, legend, .controls label, .match-inputs label {font-size: var(--type-label); font-weight: 600; line-height: 1.5; letter-spacing: 0}
select, input[type=search], .controls select, .controls input[type=search], .player-selects select {font-size: var(--type-body); font-weight: 400; line-height: 1.5; letter-spacing: 0}
.match-inputs fieldset label {font-size: var(--type-control); font-weight: 400; line-height: 1.5; letter-spacing: 0}
.score-guide summary {font-size: var(--type-control); font-weight: 600; line-height: 1.5}
.error, #toast {font-size: var(--type-control); line-height: 1.6}
.sort-arrow {font-size: var(--type-label)}
.swap {font-size: var(--type-metric); line-height: 1}
.close {font-size: 1.75rem; line-height: 1}

/* Table scores keep one size across views and devices; colour supplies priority. */
table {font-variant-numeric: lining-nums tabular-nums; letter-spacing: 0}
th {font-size: var(--type-table-heading); font-weight: 600; line-height: 1.4; letter-spacing: 0}
th small {font-size: var(--type-label); font-weight: 400; line-height: 1.4}
td {font-size: var(--type-data); line-height: 1.5}
#global-table tbody td:nth-child(n+3), #pl-table tbody td:nth-child(n+3) {font-size: var(--type-table-value); font-weight: 500; line-height: 1.4}
/* Bars extend below the rating. Align the other values with its first line. */
#global-table tbody td:nth-child(n+3),
#pl-table tbody td:nth-child(n+3):not(.goal-attack):not(.goal-centre):not(.goal-defence) {vertical-align: top}
.rank {font-size: var(--type-control); font-weight: 400}
.team-name {font-size: var(--type-data); font-weight: 600; line-height: 1.45; letter-spacing: 0}
.club-text {line-height: 1.45}
.club-text small, #global-table .mobile-club-league {font-size: var(--type-label); font-weight: 400; line-height: 1.5; letter-spacing: 0}
.big-num, #global-table .big-num, #pl-table .big-num {font-size: var(--type-table-score); line-height: 1.25; letter-spacing: -.015em}
.strength-rating-labels, .season-score-labels {font-size: var(--type-axis); font-weight: 400; line-height: 1.3; letter-spacing: 0}
.gd-pill {font-size: var(--type-table-value); font-weight: 600; line-height: 1.4; letter-spacing: 0}
#global-table .gd-pill {padding: 0 8px}
.goal-visual>.num, .goal-centre .gd-pill {font-size: var(--type-table-score); line-height: 1.25; letter-spacing: -.015em}
.goal-visual>.num {min-width: 56px; font-weight: 500}
.goal-centre .gd-pill {min-width: 0; padding: 5px 6px}
.rank-change {font-size: inherit; font-weight: 600; letter-spacing: 0}
.range {font-size: var(--type-label); line-height: 1.5}
.league-row {font-size: var(--type-data); line-height: 1.5}
.league-row span small {font-size: var(--type-label); line-height: 1.5}
.league-row .value {font-size: var(--type-body); font-weight: 600; letter-spacing: 0}

/* Cards and profiles use the same names, metadata and numeric hierarchy. */
.fixture-meta, .score-label, .prob-labels, .prediction-teams small, .outcome-result {font-size: var(--type-label); line-height: 1.5; letter-spacing: 0}
.fixture-teams .club {font-size: var(--type-data); font-weight: 600; line-height: 1.5}
.score {font-size: var(--type-metric); font-weight: 600; line-height: 1.25; letter-spacing: -.015em}
.score small {font-size: var(--type-body); line-height: 1.25}
.prob-labels strong {font-size: var(--type-card); font-weight: 600; line-height: 1.3; letter-spacing: 0}
.prediction-teams .name {font-size: var(--type-body); font-weight: 600; line-height: 1.5; letter-spacing: 0}
.prediction-teams .goals {font-size: var(--type-display); font-weight: 600; line-height: 1.25; letter-spacing: -.025em}
.result-card .prob-labels strong {font-size: var(--type-metric); font-weight: 600; line-height: 1.3; letter-spacing: 0}
.stat-row, .stat-row strong {font-size: var(--type-data); line-height: 1.55; letter-spacing: 0}
.stat-row strong {font-weight: 600}
.dialog-club {font-size: var(--type-heading); font-weight: 600; line-height: 1.35; letter-spacing: -.02em}
.dialog-index {font-size: var(--type-display); font-weight: 600; line-height: 1.25; letter-spacing: -.025em}
.dialog-index small {font-size: var(--type-note); font-weight: 400; line-height: 1.5; letter-spacing: 0}
.num, .big-num, .rank, .gd-pill, .rank-change, .snapshot strong,
.feature-dark strong>span, .league-row .value, .score, .prob-labels strong,
.prediction-teams .goals, .stat-row strong, .dialog-index {font-variant-numeric: lining-nums tabular-nums}
.text-link, .small, .footnote, .rating-scale-note, .global-scale-note, .table-caption,
.table-footer, .fixture-result, .result-card .result-note {font-size: var(--type-note); line-height: 1.7; letter-spacing: 0}
/* Explanatory notes deserve room and contrast, without competing with the tables. */
#global .global-scale-note {font-size: .9375rem; line-height: 1.7; color: var(--muted); font-weight: 400}
#global .global-scale-note strong {color: var(--section-color); font-weight: 500}
.page .footnote, .rating-scale-note {font-size: .9375rem; line-height: 1.8; color: #4d5054}
.page .footnote {max-width: none}
.rating-scale-note a {color: var(--section-color); font-weight: 600; text-decoration: underline; text-underline-offset: 3px}
.result-card .result-note {font-size: .875rem; line-height: 1.8; color: #4d5054}
#global .table-footer:not(:has(button:not([hidden]))) {display: none}
.table-scroll-hint, .global-mobile-note {font-size: var(--type-label); line-height: 1.5}
.pill, .tag {font-size: var(--type-label); font-weight: 500; line-height: 1.5}
footer {font-size: var(--type-label); line-height: 1.7; letter-spacing: .04em}

@media (min-width: 801px) {
  :root {--type-table-value: 1rem; --type-table-score: 1rem}
  :is(#global-table, #pl-table) .team-name {font-size: 1rem; line-height: 1.4}
  :is(#global-table, #pl-table) .big-num {line-height: 1.4}
  :is(#global-table, #pl-table) .rank {line-height: 1.6}
  :is(#global-table, #pl-table) .season-score-labels {margin-top: 4px}
}
@media (max-width: 1100px) {
  :root {--type-main-tab: .875rem}
}
@media (max-width: 800px) {
  /* A modest reduction applies to tables only, leaving the surrounding controls unchanged. */
  :is(#global-table, #pl-table) {
    --type-table-heading: .8125rem;
    --type-table-value: 1rem;
    --type-table-score: 1.125rem;
    --type-data: .875rem;
    --type-control: .8125rem;
  }
  #global-summary-full {display: none}
  .global-summary-mobile, .global-summary-mobile>.copy-emphasis, .global-summary-details {display: block}
  :root {
    --type-heading: 1.5rem;
    --type-display: 2.5rem;
    --type-page: clamp(2rem, 4.8vw, 2.75rem);
    --type-main-tab: .8125rem;
    --type-view-tab: .8125rem;
  }
  #global-table .sort-arrow {font-size: var(--type-axis)}
}
@media (max-width: 550px) {
  :root {--type-page: clamp(1.875rem, 7.8vw, 2.5rem); --type-feature: 1.375rem}
}
@media (max-width: 400px) {
  :root {--type-view-tab: .75rem}
}

/* Completed match results lead; forecast figures retain their own labelled area. */
.fixture-card .score-final {justify-content: center; gap: 14px; padding: 10px 16px; background: var(--section-color); border-color: var(--section-color); color: #fff; font-size: 2rem; font-weight: 700}
.fixture-card .score-final small {color: #fff; font-size: 1.25rem}
.fixture-card .score-label-final {color: var(--section-color); font-weight: 700; margin-top: 6px}
.fixture-forecast {margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line)}
.fixture-forecast-heading {display: flex; align-items: baseline; justify-content: flex-start; flex-wrap: wrap; gap: 4px 8px; margin-bottom: 14px; font-size: .8125rem; color: var(--muted)}
.fixture-forecast-heading strong {color: var(--ink); font-size: 1rem; font-variant-numeric: tabular-nums; white-space: nowrap}