/* Desktop refinements. The mobile layout remains in its own final layer. */
@media (min-width: 801px) {
  body {--desktop-gutter: clamp(24px, 3vw, 40px); --content-width: 1100px; --rank-column-width: 4rem}
  header {
    display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 24px;
    padding: 14px max(var(--desktop-gutter), calc((100% - var(--content-width)) / 2));
  }
  .main-tabs {justify-self: center; margin: 0; max-width: 100%; min-width: 0}
  .main-tabs a {min-width: 0; white-space: normal}
  .share {white-space: nowrap}
  main {width: calc(100% - var(--desktop-gutter) * 2); max-width: var(--content-width); padding: 28px 0 48px}
  footer {padding: 24px max(var(--desktop-gutter), calc((100% - var(--content-width)) / 2)); font-size: .75rem}
  .page, .intro>div, .view-intro>div {min-width: 0}
  .intro {align-items: center; gap: 24px; margin: 0 0 22px}
  #global .intro {display: block}
  #global-summary {max-width: none}
  #global-summary .global-summary-scope {display: block}
  h1 {font-size: clamp(2.5rem, 3.6vw, 3.25rem); margin-bottom: 10px; line-height: 1.15}
  .intro .eyebrow {margin-bottom: 6px}
  .lead {max-width: 68ch}
  .snapshot {flex: 0 0 auto; min-width: 224px; padding: 10px 14px}
  .snapshot strong {white-space: nowrap}
  .feature-strip {width: fit-content; max-width: 100%; margin: 20px 0 24px}
  .feature-dark {display: flex; align-items: center; gap: 16px; padding: 14px 18px}
  .feature-dark>.eyebrow {display: block; margin: 0; flex-shrink: 0; line-height: 1.3}
  .section-heading {margin: 24px 0 12px}
  .section-heading h2 {font-size: 1.625rem}
  .league-tabs {gap: 8px; margin-bottom: 28px; padding-bottom: 22px}
  .league-tabs a {padding: 10px 14px}
  .pl-tabs {margin-bottom: 24px}
  .pl-tabs button {min-height: 58px; padding: 10px 12px}
  .view-intro {margin: 18px 0 12px}

  /* Fields fill a deliberate grid instead of ending at unrelated widths. */
  .controls {display: grid; gap: 12px; padding: 12px 14px; margin-bottom: 14px}
  #global .controls {grid-template-columns: 1.35fr 1fr 1fr 1.15fr}
  #pl-ratings-panel .controls {grid-template-columns: 1.2fr 1fr 1.2fr}
  .controls>label, #snapshot-label {min-width: 0; width: 100%}
  .controls select, .controls input[type=search] {width: 100%; min-width: 0; max-width: 100%; min-height: 44px}
  #pl-fixtures-panel .controls {grid-template-columns: minmax(240px, .85fr) minmax(200px, .8fr) minmax(0, 1.35fr)}
  .round-control {width: 100%; background: var(--surface-control)}
  .round-control select {flex: 1 1 0; width: 0; min-width: 0}
  #fixture-context {align-self: center; line-height: 1.65}
  .table-caption {align-items: baseline; margin-bottom: 12px}
  .score-guide {padding: 8px 14px; margin-bottom: 12px}
  .score-guide summary {padding: 3px 0}

  /* Readable full names, compact columns and aligned numeric edges. */
  #global-table, #pl-table {
    width: 100%; max-width: 100%; min-width: 0; overscroll-behavior-x: contain;
    scrollbar-color: var(--section-edge) var(--section-wash);
  }
  #global-table table, #pl-table table {table-layout: fixed; border-collapse: separate; border-spacing: 0; min-width: 900px}
  :is(#global-table, #pl-table) :is(th, td):first-child {width: var(--rank-column-width); min-width: var(--rank-column-width)}
  #global-table th.global-club {width: 224px}
  #global-table th.global-rating {width: 128px}
  #pl-table th:nth-child(2) {width: 224px}
  #premier:has([data-view="performance"].active, [data-view="projections"].active) #pl-table {max-width: 100%}
  #premier:has([data-view="performance"].active) #pl-table table {min-width: 1000px}
  #premier:has([data-view="performance"].active) #pl-table th:has([data-sort-key="score_10"], [data-sort-key="attack_score_10"], [data-sort-key="defence_score_10"]) {width: 120px}
  #premier:has([data-view="projections"].active) #pl-table table {min-width: 1000px}
  #premier[data-rating-view="goals"] #pl-table table {min-width: 920px}
  #pl-table th.goal-centre {width: 116px}
  :is(#global-table, #pl-table) td {padding: 8px 10px; vertical-align: top}
  :is(#global-table, #pl-table) :is(.strength-rating-meter, .season-score-meter, .index-meter) {max-width: 100%}
  :is(#global-table, #pl-table) .index-cell {min-width: 0}
  :is(#global-table, #pl-table) .sort-header {white-space: normal; min-height: 60px; padding: 8px 10px; gap: 5px; line-height: 1.4}
  :is(#global-table, #pl-table) .sort-header>span:first-child {min-width: 0; overflow-wrap: anywhere}
  :is(#global-table, #pl-table) th:first-child .sort-header {justify-content: center; padding: 8px 6px; gap: 4px; white-space: nowrap}
  :is(#global-table, #pl-table) th:first-child .sort-header>span:first-child {flex-shrink: 0; overflow-wrap: normal; white-space: nowrap}
  :is(#global-table, #pl-table) td:first-child {text-align: center; padding-left: 6px; padding-right: 6px}
  :is(#global-table, #pl-table) .team-name {max-width: 100%; min-height: 24px; padding: 0; white-space: normal; align-items: flex-start; text-align: left}
  :is(#global-table, #pl-table) .club-text {min-width: 0; overflow-wrap: anywhere}
  :is(#global-table, #pl-table) :is(th, td):nth-child(-n+2) {position: sticky; left: 0; z-index: 1; background: var(--row-surface, var(--surface))}
  :is(#global-table, #pl-table) :is(th, td):nth-child(2) {left: var(--rank-column-width); box-shadow: 1px 0 var(--line)}
  :is(#global-table, #pl-table) thead th:nth-child(-n+2) {z-index: 2; background: var(--section-tint)}
  :is(#global-table, #pl-table) tbody tr:nth-child(even) td:nth-child(-n+2) {background: var(--row-surface, var(--surface-muted))}
  :is(#global-table, #pl-table) tbody tr:hover td:nth-child(-n+2) {background: var(--row-surface, var(--surface-hover))}
  :is(#global-table, #pl-table) td.empty {position: static; white-space: normal; text-align: left; padding: 0!important}
  :is(#global-table, #pl-table) td.empty>span {display: block; position: sticky; left: 0; width: min(100%, calc(100vw - var(--desktop-gutter) * 2 - 2px)); padding: 32px 24px; text-align: center}
  #global .table-footer {gap: 14px; margin-top: 18px}
  #global .table-footer .secondary {min-width: 180px; padding: 11px 20px}
  .footnote {max-width: 108ch; margin: 18px 0}
  .league-grid {grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 40px; row-gap: 0; padding: 18px 26px}
  .league-row {grid-template-columns: minmax(160px, 1fr) minmax(60px, 1fr) 52px; padding: 14px 0; border-bottom: 1px solid var(--line)}
  .league-row:last-child, .league-row:nth-last-child(2):nth-child(odd) {border-bottom: 0}
  .league-row>span {min-width: 0; overflow-wrap: anywhere}

  /* Match cards keep their names, scores and probabilities on shared axes. */
  .fixture-grid, .predict-layout, .detail-grid {grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px}
  .fixture-card, .match-inputs, .result-card, .detail-grid article {min-width: 0}
  .fixture-card {display: flex; flex-direction: column; padding: 18px}
  .fixture-meta {padding-bottom: 12px; gap: 8px 12px}
  .fixture-teams {grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 12px; margin: 16px 0; flex: 1 0 auto}
  .fixture-teams>div {min-width: 0}
  .fixture-teams .club-label {line-height: 1.5}
  .fixture-result {margin-top: 16px}
  .fixture-grid>.empty {grid-column: 1 / -1; background: var(--surface); border: 1px solid var(--section-edge); border-radius: 12px}
  .match-inputs, .result-card {padding: 22px}
  .player-selects {grid-template-columns: minmax(0, 1fr) 44px minmax(0, 1fr); gap: 10px; margin: 18px 0; align-items: end}
  .player-selects select {padding-left: 12px}
  .player-selects .swap {
    display: grid; place-items: center; justify-self: center; transform: none;
    width: 44px; height: 44px; margin-bottom: 2px; padding: 0;
    border: 1px solid var(--section-edge); border-radius: 50%; background: var(--section-tint); color: var(--section-color);
  }
  .swap:hover {background: var(--section-wash); border-color: var(--section-color)}
  .match-inputs fieldset {display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-bottom: 22px}
  .match-inputs fieldset label {display: flex; align-items: center; gap: 8px; min-height: 48px; padding: 10px 12px; border: 1px solid var(--section-edge); border-radius: 8px; background: var(--surface-control); line-height: 1.4; cursor: pointer}
  .match-inputs fieldset input {width: 18px; height: 18px; flex: 0 0 18px; margin: 0}
  .match-inputs fieldset label:has(input:checked) {background: var(--section-tint); border-color: var(--section-color)}
  .match-inputs>.small {margin: 18px 0 0; line-height: 1.7}
  #predict-error:empty {display: none}
  .result-card {display: flex; flex-direction: column}
  .result-card>.eyebrow {margin-bottom: 0}
  .prediction-teams {display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; margin: 24px 0 0}
  .prediction-teams>div {display: flex; flex-direction: column; min-width: 0}
  .prediction-teams .name {min-height: 3.1em; margin-bottom: 8px; font-weight: 600; line-height: 1.5}
  .prediction-teams .goals {margin-top: auto; line-height: 1.25}
  .prediction-teams small {margin-top: 6px}
  .prob-labels {grid-template-columns: repeat(3, minmax(0, 1fr))}
  .result-card .prob-labels {margin-top: 28px}
  .result-card .prob-track {height: 8px; margin: 14px 0 24px}
  .result-card .result-note {margin: auto 0 0; padding-top: 18px; border-top: 1px solid var(--section-edge)}
  .detail-grid {margin: 16px 0}
  .detail-grid article {padding: 18px 22px}
  .detail-grid article h2 {margin: 6px 0 12px; line-height: 1.4}
  .stat-row {gap: 20px}
  .stat-row>span {min-width: 0; flex: 1 1 0}
  .stat-row strong {max-width: 55%; overflow-wrap: anywhere}
  dialog {width: min(560px, calc(100% - 64px)); max-height: 85vh; max-height: calc(100dvh - 64px); padding: 28px 32px; overflow-y: auto; overscroll-behavior: contain}
  body:has(dialog[open]) {overflow: hidden}
  .close {position: sticky; top: 0; z-index: 3; display: grid; place-items: center; padding: 0; width: 44px; height: 44px; border-radius: 50%; background: var(--surface-muted)}
}

@media (min-width: 801px) and (max-width: 1199px) {
  .predict-layout {grid-template-columns: minmax(0, 1fr)}
  .match-inputs, .result-card {padding: 22px}
  .prediction-teams .name {min-height: 0}
  .result-card .result-note {margin-top: 0}
}
@media (min-width: 801px) and (max-width: 1100px) {
  header {gap: 14px}
  .main-tabs {gap: 3px; padding: 4px}
  .main-tabs a {font-size: .875rem; padding: 10px 12px}
  .intro {gap: 24px}
  #global .controls {grid-template-columns: repeat(2, minmax(0, 1fr))}
  #pl-fixtures-panel .controls {grid-template-columns: repeat(2, minmax(0, 1fr))}
  #fixture-context {grid-column: 1 / -1}
  .league-grid {column-gap: 24px; padding: 16px 22px}
  .league-row {grid-template-columns: minmax(120px, 1.25fr) minmax(40px, .75fr) 48px; gap: 12px}
}
@media (min-width: 801px) and (max-width: 1050px) {
  .fixture-grid {grid-template-columns: minmax(0, 1fr)}
}