/* Shared league chooser, with compact mobile navigation and disclosures. */
.mobile-league-picker {display: none}
.fixture-about {margin: 0; padding: 0; border: 0; background: none; box-shadow: none}
.fixture-about>summary, .fixture-club-filter>summary {display: none}
.fixture-club-filter {min-width: 0; margin: 0; padding: 0; border: 0; background: none; box-shadow: none}

/* Rating explanations stay within reach without filling the space above each table. */
:is(#premier, #global) .ratings-about {margin: 0 0 6px; padding: 0; border: 0; background: none; box-shadow: none}
:is(#premier, #global) .ratings-about>summary {
  display: flex; align-items: center; gap: 9px; width: fit-content; max-width: 100%;
  min-height: 44px; padding: 6px 0; list-style: none; cursor: pointer;
  color: var(--section-color); font-size: var(--type-note); line-height: 1.5; font-weight: 600;
}
:is(#premier, #global) .ratings-about>summary::-webkit-details-marker {display: none}
:is(#premier, #global) .ratings-about>summary::after {
  content: ''; flex: 0 0 6px; width: 6px; height: 6px; margin-top: -3px;
  border: solid currentColor; border-width: 0 1.5px 1.5px 0; transform: rotate(45deg);
}
:is(#premier, #global) .ratings-about[open]>summary::after {transform: rotate(225deg); margin-top: 3px}
:is(#premier, #global) .ratings-about>summary:hover {text-decoration: underline; text-underline-offset: 3px}
#ratings-about #pl-description {display: block; margin: 0; padding: 0 0 10px; font-size: var(--type-note); line-height: 1.7}
#global .ratings-about-content {padding-bottom: 10px}
#global .ratings-about-content>p {max-width: none; margin: 0; color: var(--muted); font-size: var(--type-note); line-height: 1.7}
#global .ratings-about-content>p+p {margin-top: 8px}

/* Keep the guide beside the update time and bring its content forward on demand. */
.table-tools {display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 8px; margin: 0 0 8px}
.table-tools .data-updated {margin: 0}
.ratings-guide-button {
  display: inline-flex; align-items: center; justify-content: center; gap: 5px;
  min-height: 36px; padding: 5px 6px; border: 0; border-radius: 6px;
  background: transparent; color: var(--section-color); white-space: nowrap;
  font-size: var(--type-label); font-weight: 600; line-height: 1.5;
  text-decoration: underline; text-underline-offset: 3px; cursor: pointer;
}
.ratings-guide-button svg {flex: 0 0 15px}
.ratings-guide-button:hover {background: var(--section-wash)}
.ratings-guide-button:focus-visible, .ratings-guide-close:focus-visible {outline: 2px solid var(--section-color); outline-offset: 2px}
#score-guide {width: min(620px, calc(100% - 32px)); max-height: calc(100dvh - 40px); margin: auto; padding: 0 24px 24px; border: 1px solid var(--section-edge); border-radius: 14px; background: var(--surface); color: var(--ink); overflow-y: auto; overscroll-behavior: contain}
.ratings-guide-header {position: sticky; top: 0; z-index: 1; display: flex; align-items: center; gap: 12px; padding: 14px 0 10px; background: var(--surface)}
.ratings-guide-header h2 {flex: 1; min-width: 0; margin: 0; font-size: var(--type-card); line-height: 1.35}
.ratings-guide-close {display: grid; place-items: center; flex: 0 0 44px; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: var(--surface-muted); color: var(--ink); font-size: 1.75rem; line-height: 1; cursor: pointer}
.ratings-guide-close:hover {background: var(--section-tint)}
.ratings-guide-context {margin: 0 0 16px; color: var(--section-color); font-size: var(--type-note); line-height: 1.5; font-weight: 600}
#score-guide-content p {margin: 14px 0 0; color: var(--muted); font-size: var(--type-data); line-height: 1.75}
#score-guide-content strong {color: var(--section-color); font-weight: 600}
#score-guide-content .ratings-guide-description {margin-top: 0; padding-bottom: 16px; border-bottom: 1px solid var(--line)}
@media(max-width: 400px) {
  #score-guide {padding: 0 18px 18px}
  .ratings-guide-header {gap: 8px}
}

/* Four domestic tabs; the goals-scale comparison is linked within Strength Index. */
.strength-comparison-link {
  display: inline-flex; align-items: center; min-height: 44px; margin: 0 0 6px;
  color: var(--section-color); font-size: var(--type-note); font-weight: 600;
  text-decoration: underline; text-underline-offset: 3px;
}
.strength-comparison-link:focus-visible {outline: 2px solid var(--section-color); outline-offset: 3px}
html[data-theme] #league-view-tabs {
  gap: 6px; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none;
  grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: 1fr;
}
html[data-theme] #league-view-tabs button {
  min-height: 60px; padding: 10px 8px; border: 1.5px solid var(--section-edge); border-radius: 8px;
  background: var(--surface); color: var(--ink); box-shadow: none;
}
html[data-theme] #league-view-tabs button:hover:not(.active) {
  border-color: var(--section-color); background: var(--section-wash); color: var(--ink); box-shadow: none;
}
html[data-theme] #league-view-tabs button.active {
  border-color: var(--section-color); background: var(--section-tint); color: var(--ink);
  box-shadow: inset 0 -2px var(--section-color);
}
html[data-theme] #league-view-tabs button:focus-visible {
  outline: 2px solid var(--section-color); outline-offset: 3px;
}
/* Medium-dark blue fill keeps the selected league view distinct and readable. */
html[data-theme="dark"] #league-view-tabs button.active {background: var(--section-fill); border-color: var(--section-color); color: #fff}

@media (min-width: 801px) {
  #premier>.navigation-label:first-child, #premier .league-navigation {display: none}
  #premier #league-heading {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
  }
  #premier .intro>div:first-child {flex: 1 1 0; max-width: 400px}
  .mobile-league-picker {display: block; position: relative}
  .mobile-league-picker>label {
    position: static; display: block; width: auto; height: auto; margin: 0 0 6px;
    padding: 0; overflow: visible; clip: auto; white-space: normal;
    color: var(--muted); font-size: .8125rem; font-weight: 600; line-height: 1.4;
  }
  #mobile-league-select {
    appearance: none; width: 100%; max-width: 100%; min-width: 0; min-height: 46px;
    margin: 0; padding: 8px 40px 8px 12px; border: 1px solid var(--section-edge);
    border-radius: 9px; background: var(--surface-control); color: var(--ink);
    font-size: 1.25rem; font-weight: 600; line-height: 1.35; cursor: pointer;
  }
  #mobile-league-select:hover {border-color: var(--section-color)}
  #mobile-league-select:focus-visible {outline: 2px solid var(--section-color); outline-offset: 3px}
  #mobile-league-select option {background: var(--surface-control); color: var(--ink); font-size: 1rem}
  .league-picker-chevron {
    position: absolute; right: 16px; bottom: 20px; width: 9px; height: 9px;
    border: solid var(--section-color); border-width: 0 2px 2px 0;
    transform: rotate(45deg); pointer-events: none;
  }
}

@media (max-width: 800px) {
  header {gap: 8px 12px; padding-top: max(10px, env(safe-area-inset-top, 0px)); padding-bottom: 0}
  header .brand {min-height: 44px}
  header .brand .brand-logo {width: 88px}
  header .header-actions {gap: 6px}
  header .share {padding: 8px 10px}
  html[data-theme] header .main-tabs {gap: 6px; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none}
  html[data-theme] header .main-tabs a {min-height: 46px; padding: 11px 4px; border: 0; border-radius: 0; background: none; color: var(--muted); box-shadow: none; font-size: .8125rem}
  html[data-theme] header .main-tabs a.active {background: none; color: var(--active-color); box-shadow: inset 0 -3px var(--active-color)}

  #premier .league-navigation {display: none}
  #premier>.intro {margin: 0 0 14px}
  #premier #league-kicker {margin: 0 0 2px; font-size: .6875rem; letter-spacing: .08em}
  #premier #league-heading, #premier .view-intro h2 {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
  }
  .mobile-league-picker {display: block; position: relative}
  .league-picker-label {display: block; margin: 6px 0 0; color: var(--muted); font-size: .75rem; font-weight: 600; line-height: 1.4}
  #mobile-league-select {
    appearance: none; width: 100%; max-width: 100%; min-width: 0; min-height: 46px;
    margin: 0; padding: 6px 32px 7px 0; border: 0; border-bottom: 1px solid var(--section-edge);
    border-radius: 0; background: transparent; color: var(--ink); box-shadow: none;
    font-size: clamp(1.125rem, 5.4vw, 1.375rem); font-weight: 650; line-height: 1.35;
  }
  #mobile-league-select option {background: var(--surface-control); color: var(--ink); font-size: 1rem}
  .league-picker-chevron {position: absolute; right: 8px; bottom: 19px; width: 9px; height: 9px; border: solid var(--section-color); border-width: 0 2px 2px 0; transform: rotate(45deg); pointer-events: none}
  #premier .intro .snapshot {margin-top: 7px; gap: 3px 6px}
  #premier .intro .snapshot>span, #premier .intro .snapshot strong {font-size: .6875rem; line-height: 1.4}

  html[data-theme] #league-view-tabs {
    grid-template-columns: repeat(2, minmax(0, 1fr)); margin-bottom: 8px; overflow: visible;
  }
  html[data-theme] #league-view-tabs button {
    grid-column: auto; min-width: 0; min-height: 50px; padding: 7px 5px;
    font-size: clamp(.75rem, 3.4vw, .8125rem); line-height: 1.35; font-weight: 600;
  }
  #league-view-tabs .view-label-full {display: block; min-height: 0; white-space: normal; text-wrap: balance}
  #league-view-tabs .view-label-short {display: none}
  /* Competition views share one compact row, without domestic tabs' column spans. */
  html[data-theme] #premier.european-competition #league-view-tabs {
    grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: auto;
  }
  html[data-theme] #premier.european-competition #league-view-tabs button {
    grid-column: auto; min-height: 44px; padding: 8px 4px;
  }
  #premier.european-competition #league-view-tabs .view-label-full {display: none}
  #premier.european-competition #league-view-tabs .view-label-short {display: block; white-space: normal}
  #premier .view-intro {margin: 0}

  #global #global-filters, #premier #league-filters, #premier .fixture-about {
    margin: 0 0 8px; padding: 0; border: 0; border-bottom: 1px solid var(--line);
    border-radius: 0; background: none; box-shadow: none;
  }
  #global #global-filters>summary, #premier #league-filters>summary, #premier .fixture-about>summary {
    display: flex; align-items: center; gap: 4px 8px; min-height: 44px; padding: 8px 0;
    list-style: none; color: var(--section-color); font-size: .8125rem; line-height: 1.5; font-weight: 600;
  }
  #global #global-filters>summary::-webkit-details-marker, #premier :is(#league-filters, .fixture-about)>summary::-webkit-details-marker {display: none}
  #global #global-filters>summary::after, #premier :is(#league-filters, .fixture-about)>summary::after {content: '+'; margin-left: auto; font-size: 1rem}
  #global #global-filters[open]>summary::after, #premier :is(#league-filters, .fixture-about)[open]>summary::after {content: '−'}
  #global #global-filter-state, #premier #league-filter-state {font-size: .6875rem}
  #global #global-filters .controls, #premier #league-filters .controls {padding: 4px 0 12px}
  #premier .fixture-about>p {padding: 0 0 10px}
  #premier .fixture-about>p {font-size: .875rem; line-height: 1.65}

  #pl-fixtures-panel .controls {
    display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center;
    gap: 4px 12px; margin: 0 0 10px; padding: 0; border: 0; border-radius: 0;
    background: none; box-shadow: none;
  }
  #pl-fixtures-panel .round-control {grid-column: 1 / -1; justify-self: start; width: min(100%, 280px); height: 40px; border-radius: 6px}
  #pl-fixtures-panel .round-control select {height: 38px; min-height: 38px; padding: 6px 8px; font-size: .8125rem; line-height: 1.3}
  #pl-fixtures-panel .round-control button {flex-basis: 40px; width: 40px; height: 38px; padding: 0; font-size: 1rem}
  #pl-fixtures-panel #fixture-context {grid-column: 1; grid-row: 2; font-size: .6875rem; line-height: 1.5}
  #pl-fixtures-panel .fixture-club-filter {position: relative; grid-column: 2; grid-row: 2; max-width: 160px}
  .fixture-club-filter>summary {display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 8px 2px; list-style: none; color: var(--section-color); font-size: .8125rem; line-height: 1.4; font-weight: 600; cursor: pointer}
  .fixture-club-filter>summary::-webkit-details-marker {display: none}
  .fixture-club-filter>summary::after {content: ''; flex: 0 0 6px; width: 6px; height: 6px; border: solid currentColor; border-width: 0 1.5px 1.5px 0; transform: rotate(45deg); margin: -3px 2px 0 0}
  .fixture-club-filter[open]>summary::after {transform: rotate(225deg); margin-top: 3px}
  .fixture-club-filter>label {position: absolute; right: 0; top: 100%; z-index: 4; width: min(260px, calc(100vw - 48px)); padding: 12px; border: 1px solid var(--section-edge); border-radius: 9px; background: var(--surface-control); box-shadow: 0 8px 24px #00000025}
  #pl-fixtures-panel .fixture-club-filter select {min-height: 44px; width: 100%; font-size: 1rem}
}