/* Keep league selection and table navigation close to the data. */
#premier .league-context-bar {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 12px 20px;
  margin: 0 0 12px;
}
#premier .league-context-bar .league-group-tabs {margin: 0; padding: 4px}
#premier .league-group-tabs a {min-height: 40px; padding: 9px 14px}
#premier .league-context-bar .intro {min-width: 0; margin: 0; justify-self: end}
#premier .league-context-bar .intro>div {
  display: grid;
  grid-template-columns: minmax(220px, 360px) auto;
  align-items: center;
  gap: 10px;
  max-width: none;
}
#premier #league-kicker {
  grid-column: 2;
  grid-row: 1;
  margin: 0;
  font-size: .6875rem;
  letter-spacing: .05em;
  white-space: nowrap;
}
#premier .mobile-league-picker {grid-column: 1; grid-row: 1; min-width: 0}
#premier #league-picker {margin: 0; padding: 0; border: 0}
#premier #league-picker-toggle, #premier #mobile-league-select {
  min-height: 44px;
  font-size: 1rem;
  padding: 9px 12px;
}
#premier #league-picker-current .league-label>span:last-child {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
html[data-theme] #premier #league-view-tabs {margin: 0 0 10px}
html[data-theme] #premier #league-view-tabs button {min-height: 44px; padding: 8px}
#premier #pl-ratings-panel>.view-intro {margin: 6px 0 2px}
#premier .league-view-heading {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 0 18px;
  width: 100%;
}
#premier .league-view-heading h2 {grid-column: 1; grid-row: 1; margin: 0}
#premier #ratings-about {grid-column: 2; grid-row: 1; min-width: 0; margin: 0}
#premier #strength-comparison-link {grid-column: 3; grid-row: 1; margin: 0}
#premier #ratings-about[open] {grid-column: 1 / -1; grid-row: 2}
#premier .table-tools {margin-bottom: 6px}

@media (min-width: 801px) {
  body:has(#premier:not([hidden])) main {padding-top: 18px}
  #premier #league-filters .controls {padding: 10px 12px; margin-bottom: 8px}
  #premier #league-filters :is(select, input[type="search"]) {
    min-height: 40px;
    padding-top: 7px;
    padding-bottom: 7px;
    margin-top: 4px;
  }
}

/* Keep the team selector beside the title in the reading order, with a clear active state. */
#global .global-context-bar>.global-team-tabs {border-color: var(--section-edge); background: var(--surface)}
#global .global-team-tabs a {color: var(--ink)}
#global .global-team-tabs a.active {
  background: var(--section-tint); color: var(--section-color);
  box-shadow: inset 0 -2px var(--section-color);
}
@media (min-width: 801px) {
  body:has(#global:not([hidden])) main {padding-top: 24px}
  #global .global-context-bar {
    display: flex; flex-direction: column; align-items: flex-start;
    gap: 12px; margin: 0 0 16px;
  }
  #global .global-context-bar>.intro {margin: 0}
  #global-heading {margin: 0; font-size: clamp(1.75rem, 2.5vw, 2rem); line-height: 1.2}
  #global .global-context-bar>.global-team-tabs {margin: 0; padding: 4px; gap: 4px}
  #global .global-team-tabs a {
    display: flex; align-items: center; justify-content: center;
    min-height: 44px; min-width: 120px; padding: 10px 18px; font-size: .9375rem;
  }
  #global #global-filters .controls {padding: 10px 12px; margin-bottom: 8px}
  #global .controls :is(select, input[type="search"], .flag-select>summary) {
    height: 44px; min-height: 44px; padding-top: 9px; padding-bottom: 9px;
  }
  #global .controls :is(select, input[type="search"], .flag-select) {margin-top: 4px}
  #global #global-about {margin: 0 0 4px}
  #global #global-about>summary {min-height: 36px; padding: 6px 0}
  #global .global-table-meta {margin-bottom: 8px}
  #global-table {--table-heading-label-height: 3.25rem}
  #global-table:not(:has(.goal-heading)) .sort-header {gap: 4px; padding-top: 8px; padding-bottom: 8px}
}

@media (min-width: 801px) and (max-width: 1050px) {
  #premier .league-context-bar {gap: 12px}
  #premier .league-context-bar .intro>div {grid-template-columns: minmax(0, 1fr); gap: 3px}
  #premier #league-kicker {grid-column: 1; grid-row: 2; text-align: right}
}

@media (max-width: 800px) {
  /* Keep the first table rows in view while retaining usable navigation targets. */
  body:has(:is(#premier, #global):not([hidden])) header {gap: 4px 12px; padding-top: max(8px, env(safe-area-inset-top, 0px))}
  body:has(:is(#premier, #global):not([hidden])) header .brand .brand-logo {width: 76px}
  html[data-theme] body:has(:is(#premier, #global):not([hidden])) header .main-tabs a {min-height: 44px; padding: 6px 4px}
  body:has(:is(#premier, #global):not([hidden])) main {padding-top: 8px}
  #premier .league-context-bar {grid-template-columns: minmax(0, 1fr); gap: 8px; margin-bottom: 8px}
  #premier .league-context-bar .league-group-tabs {justify-self: start; padding: 2px}
  #premier .league-group-tabs a {display: flex; align-items: center; justify-content: center; min-height: 40px; padding: 6px 10px; font-size: .8125rem}
  #premier .league-context-bar .intro {width: 100%; justify-self: stretch}
  #premier .league-context-bar .intro>div {grid-template-columns: minmax(0, 1fr) auto; gap: 8px}
  #premier #league-kicker {font-size: .625rem; letter-spacing: 0}
  #premier #league-picker-toggle {padding: 7px 2px 7px 0}
  #premier #league-picker-current .league-label {gap: 6px}
  html[data-theme] #premier #league-view-tabs {grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; margin-bottom: 4px}
  html[data-theme] #premier #league-view-tabs button {min-height: 48px; padding: 6px 3px; font-size: clamp(.6875rem, 3.1vw, .8125rem); line-height: 1.3}
  html[data-theme] #premier.european-competition #league-view-tabs {grid-template-columns: repeat(3, minmax(0, 1fr))}
  #premier #league-filters {margin-bottom: 2px}
  #premier #pl-ratings-panel>.view-intro {margin: 0}
  #premier .league-view-heading {grid-template-columns: minmax(0, 1fr) auto; gap: 0 10px}
  #premier #ratings-about {grid-column: 1; grid-row: 1}
  #premier #strength-comparison-link {grid-column: 2; grid-row: 1}
  #premier #ratings-about>summary, #premier #strength-comparison-link {font-size: .75rem}
  #premier #ratings-about[open] {grid-column: 1 / -1; grid-row: 2}

  /* Global tables start higher: compact title and tabs, then one disclosure row. */
  #global .global-context-bar>.intro {margin: 0 0 6px}
  #global .intro h1 {margin: 0; font-size: 1.375rem; line-height: 1.25}
  #global .global-context-bar>.global-team-tabs {display: grid; grid-template-columns: 1fr 1fr; width: 100%; margin: 0 0 4px; padding: 2px; gap: 4px}
  #global .global-context-bar>.global-team-tabs a {display: flex; align-items: center; justify-content: center; min-height: 44px; padding: 6px 8px; font-size: .8125rem; line-height: 1.3}
  #global .global-table-controls {display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; gap: 0 12px; margin: 0 0 6px; border-bottom: 1px solid var(--line)}
  #global #global-filters, #global #global-about {min-width: 0; margin: 0; border: 0}
  #global #global-filters>summary {display: grid; grid-template-columns: minmax(0, 1fr) auto; align-content: center; gap: 0 6px; min-height: 48px; padding: 4px 0; font-size: .75rem}
  #global #global-filters>summary>span:first-child {grid-column: 1; grid-row: 1}
  #global #global-filter-state {grid-column: 1; grid-row: 2; line-height: 1.4; overflow-wrap: anywhere}
  #global #global-filters>summary::after {grid-column: 2; grid-row: 1 / 3; margin: 0}
  #global #global-about>summary {min-height: 48px; margin-left: auto; padding: 4px 0; gap: 6px; font-size: .75rem; line-height: 1.4}
  /* Expanded filters and explanations use the full width on small screens. */
  #global .global-table-controls:has(>details[open]) {display: block}
  #global .global-table-controls:has(>details[open]) #global-about>summary {margin-left: 0}
  #global .global-table-meta {gap: 2px 8px; margin-bottom: 6px}
  #global-table {--table-heading-label-height: 3.25rem}
  #global-table:not(:has(.goal-heading)) .sort-header {gap: 2px; padding-top: 5px; padding-bottom: 5px}
}

/* Explain fixture forecasts before the filters and match cards. */
#pl-fixtures-panel #fixture-footnote {margin: 0 0 16px}

/* Keep the forecast scope beside the Match Predictor introduction. */
#predictor #predictor-forecast-note {margin: 10px 0 0}