/* League navigation and compact page presentation, after the shared type scale. */
.league-filters {padding: 0; border: 0; margin: 0}
.league-filters>summary, .mobile-view-description {display: none}
.rank-label-short {display: none}
.navigation-label {margin: 0 0 10px; color: var(--section-color); font-size: .75rem; font-weight: 700; line-height: 1.5; letter-spacing: .08em; text-transform: uppercase}
.league-navigation {
  position: relative; min-width: 0; margin-bottom: 28px; padding: 12px;
  border: 1px solid #acc6e3; border-radius: 14px; background: #e8f0f9;
  box-shadow: inset 0 1px 0 #ffffffb3, 0 3px 12px #275f9e08;
}
#league-tabs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  width: 100%;
  max-width: 100%;
  margin: 0;
  padding: 4px;
  border: 0;
}
#league-tabs a {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  flex: 0 0 auto;
  min-width: 0;
  min-height: 48px;
  padding: 10px 14px;
  border: 1px solid #b5cce4;
  border-radius: 9px;
  background: var(--surface-control);
  color: #34516e;
  font-size: var(--type-note);
  font-weight: 600;
  line-height: 1.4;
  white-space: nowrap;
  overflow-wrap: normal;
  text-decoration: none;
  box-shadow: 0 2px 3px #275f9e06;
  transition: background-color .15s, border-color .15s, color .15s, box-shadow .15s;
}
#league-tabs a:hover {
  background: #f3f7fc;
  border-color: var(--section-color);
  color: var(--section-color);
  box-shadow: 0 3px 8px #275f9e14;
}
#league-tabs a.active {
  background: var(--section-color);
  border-color: var(--section-color);
  color: #fff;
  box-shadow: 0 3px 8px #275f9e30, inset 0 1px 0 #ffffff24;
}
#league-tabs a.active::after {content: ""; flex: 0 0 6px; width: 6px; height: 10px; margin: -3px 2px 0 0; border: solid currentColor; border-width: 0 2px 2px 0; transform: rotate(45deg)}

#league-view-tabs {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 5px;
  max-width: 100%;
  margin: 0 0 24px;
  padding: 6px;
  border: 1px solid #9ebddb;
  border-radius: 14px;
  background: linear-gradient(180deg, #edf4fc, #e1ecf8);
  box-shadow: inset 0 1px 0 #ffffffb3, 0 3px 12px #275f9e0a;
}
#league-view-tabs button {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
  min-width: 0;
  min-height: 64px;
  padding: 12px 10px;
  border: 1px solid transparent;
  border-radius: 9px;
  background: transparent;
  box-shadow: none;
  color: #34516e;
  font-size: var(--type-view-tab);
  font-weight: 600;
  line-height: 1.3;
  white-space: normal;
  overflow-wrap: normal;
  hyphens: none;
  transition: background-color .15s, border-color .15s, color .15s, box-shadow .15s;
}
#league-view-tabs button:hover:not(.active) {
  background: var(--surface-control);
  border-color: var(--section-color);
  color: var(--section-color);
  box-shadow: 0 3px 9px #275f9e18;
}
#league-view-tabs button.active {
  background: linear-gradient(135deg, #3475b6, var(--section-color));
  border-color: var(--section-color);
  color: #fff;
  box-shadow: 0 4px 10px #275f9e30, inset 0 1px 0 #ffffff24;
}
#league-view-tabs button.active::after {content: none}
#league-tabs a:focus-visible, #league-view-tabs button:focus-visible {
  outline: 3px solid #153e6c;
  outline-offset: 1px;
}
#league-view-tabs .view-label-full {display: flex; align-items: center; justify-content: center; min-height: 2.6em; text-wrap: balance}
#league-view-tabs .view-label-short {display: none}

/* Edge controls keep the additional leagues discoverable on a narrow screen. */
.league-navigation::before, .league-navigation::after {
  content: ""; position: absolute; top: 8px; bottom: 8px;
  width: 64px; z-index: 1; pointer-events: none; opacity: 0;
}
.league-navigation::before {left: 1px; background: linear-gradient(to right, #e8f0f9 30%, transparent)}
.league-navigation::after {right: 1px; background: linear-gradient(to left, #e8f0f9 30%, transparent)}
.league-navigation.can-scroll-left::before, .league-navigation.can-scroll-right::after {opacity: 1}
.league-scroll {
  position: absolute; top: 50%; transform: translateY(-50%);
  z-index: 2; display: grid; place-items: center;
  width: 44px; height: 44px; padding: 0;
  border: 1px solid var(--section-color); border-radius: 50%;
  background: var(--surface-control); color: var(--section-color);
  box-shadow: 0 2px 8px #275f9e24;
}
.league-scroll-prev {left: 6px}
.league-scroll-next {right: 6px}
.league-scroll:hover {background: var(--section-tint)}
.league-scroll:focus-visible {outline: 2px solid var(--section-color); outline-offset: 2px}

@media (max-width: 800px) {
  .rank-label-full {display: none}
  .rank-label-short {display: inline}
  main:has(#premier:not([hidden])) {padding-top: 14px}
  #premier>.navigation-label {display: none}
  .league-navigation {margin-bottom: 14px; padding: 5px}
  #league-tabs {
    display: grid;
    grid-template-columns: none;
    grid-template-rows: repeat(2, minmax(44px, auto));
    grid-auto-flow: column;
    grid-auto-columns: max-content;
    align-items: stretch;
    gap: 4px;
    margin: 0;
    padding: 3px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-padding-inline: 52px;
    scroll-snap-type: x proximity;
    scrollbar-width: thin;
    scrollbar-color: var(--section-edge) transparent;
  }
  #league-tabs a {min-height: 44px; padding: 8px 10px; scroll-snap-align: start}
  #premier>.intro {margin: 0 0 14px}
  #premier .intro .eyebrow {margin-bottom: 3px; font-size: .6875rem}
  #premier .intro h1 {margin-bottom: 6px}
  #premier .intro .snapshot {justify-content: flex-start; margin-top: 0; padding: 0; gap: 2px 8px; border: 0; border-radius: 0; background: none; box-shadow: none}
  #premier .intro .snapshot>span {font-size: .6875rem; letter-spacing: .02em}
  #premier .intro .snapshot strong {font-size: .8125rem; font-weight: 500}
  #league-view-tabs {
    grid-template-columns: repeat(5, minmax(max-content, 1fr));
    gap: 2px;
    padding: 4px;
    margin-bottom: 12px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: thin;
    scrollbar-color: var(--section-edge) transparent;
  }
  #league-view-tabs button {min-height: 56px; padding: 8px 3px; gap: 0; border-radius: 7px; font-weight: 600}
  #league-view-tabs .view-label-full {display: none}
  #league-view-tabs .view-label-short {display: block; white-space: nowrap}
  .league-filters {margin: 0 0 12px; border: 1px solid var(--section-edge); border-radius: 9px; background: var(--surface-control)}
  .league-filters>summary {display: flex; align-items: center; flex-wrap: wrap; gap: 2px 8px; min-height: 44px; padding: 9px 12px; list-style: none; color: var(--section-color); font-size: .8125rem; font-weight: 600; line-height: 1.5}
  .league-filters>summary::-webkit-details-marker {display: none}
  .league-filters>summary::after {content: '+'; margin-left: auto; font-size: 1.125rem; line-height: 1}
  .league-filters[open]>summary::after {content: '−'}
  #league-filter-state, #global-filter-state {color: var(--muted); font-size: .75rem; font-weight: 400}
  #league-filters .controls, #global-filters .controls {margin: 0; padding: 4px 12px 12px; border: 0; box-shadow: none; background: none}
  #pl-description {display: none}
  .mobile-view-description {display: block}
  #premier .view-intro {margin: 12px 0 8px}
  #premier .view-intro h2 {margin: 0; font-size: 1.25rem}
  #premier .score-guide {margin: 0 0 10px; padding: 0 12px}
  #premier .score-guide summary {padding: 10px 0}
  #premier .score-guide[open] {padding-bottom: 10px}
  #pl-fixtures-panel .controls {gap: 10px; margin-bottom: 14px; padding: 12px}
}
@media (forced-colors: active) {
  #league-tabs a.active, #league-view-tabs button.active {border: 2px solid Highlight}
}
@media (prefers-reduced-motion: reduce) {
  #league-tabs a, #league-view-tabs button {transition: none}
}

/* Goals ratings: a compact, aligned table with every metric in view. */
#premier[data-rating-view="goals"] #pl-table {max-width: 760px; --goal-type: 1rem}
#premier[data-rating-view="goals"] #pl-table table {width: 100%; min-width: 0; table-layout: fixed}
#premier[data-rating-view="goals"] #pl-table :is(th, td):first-child {width: 40px; text-align: center}
#premier[data-rating-view="goals"] #pl-table :is(th, td):nth-child(2) {width: calc(40% - 40px); position: static; box-shadow: none; white-space: normal}
#premier[data-rating-view="goals"] #pl-table :is(th, td):nth-child(n+3) {width: 20%; min-width: 0; text-align: center; vertical-align: middle}
#premier[data-rating-view="goals"] #pl-table td {padding: 12px 10px}
#premier[data-rating-view="goals"] #pl-table .sort-header {min-height: 64px; justify-content: center; text-align: center; padding: 10px 6px}
#premier[data-rating-view="goals"] #pl-table th:nth-child(2) .sort-header {flex-direction: column; align-items: center; justify-content: center; text-align: center; padding-left: 6px}
#premier[data-rating-view="goals"] #pl-table .goal-heading {display: grid; gap: 4px; line-height: 1.3}
#premier[data-rating-view="goals"] #pl-table .goal-unit {display: flex; align-items: center; justify-content: center; gap: 5px; margin: 0; font-size: .6875rem; line-height: 1.2; letter-spacing: .03em}
#premier[data-rating-view="goals"] #pl-table .goal-unit .sort-arrow {font-size: .6875rem; line-height: 1}
#premier[data-rating-view="goals"] #pl-table .team-name {min-height: 40px; font-size: var(--goal-type); line-height: 1.4; white-space: normal}
#premier[data-rating-view="goals"] #pl-table .goal-visual {flex-direction: column; gap: 7px}
#premier[data-rating-view="goals"] #pl-table .goal-visual>.num {min-width: 0; font-size: var(--goal-type); font-weight: 500; line-height: 1.25; letter-spacing: -.015em}
#premier[data-rating-view="goals"] #pl-table .goal-centre .gd-pill {display: inline-block; min-width: 0; padding: 0 0 11px; border: 0; border-radius: 0; background: transparent; color: var(--section-color); font-size: var(--goal-type); font-weight: 650; line-height: 1.25; letter-spacing: -.015em}
@media (max-width: 800px) {
  #premier[data-rating-view="goals"] #pl-table {--goal-column-width: clamp(52px, 15vw, 80px); --goal-type: clamp(.875rem, 3.7vw, .9375rem)}
  #premier[data-rating-view="goals"] #pl-table :is(th, td):first-child {width: 30px; padding-left: 2px; padding-right: 2px}
  #premier[data-rating-view="goals"] #pl-table :is(th, td):nth-child(2) {width: calc(100% - 30px - var(--goal-column-width) * 3)}
  #premier[data-rating-view="goals"] #pl-table :is(th, td):nth-child(n+3) {width: var(--goal-column-width)}
  #premier[data-rating-view="goals"] #pl-table td {padding: 10px 4px}
  #premier[data-rating-view="goals"] #pl-table .sort-header {min-height: 60px; flex-direction: column; gap: 3px; padding: 8px 2px; font-size: .75rem; line-height: 1.4}
  #premier[data-rating-view="goals"] #pl-table th:nth-child(2) .sort-header {padding-left: 2px}
  #premier[data-rating-view="goals"] #pl-table .team-name {gap: 6px; padding: 0; text-align: left}
  #premier[data-rating-view="goals"] #pl-table .club-badge {width: 18px; height: 18px; flex-basis: 18px}
  #pl-table .seg-bar {display: none}
  #premier[data-rating-view="goals"] #pl-table .goal-centre .gd-pill {padding: 0}
  #premier[data-rating-view="goals"] #pl-table td.empty {width: auto}
  #premier[data-rating-view="goals"] #pl-table td.empty>span {width: 100%}
}

/* One ranked sequence: the next league is always directly below the last. */
#league-bars {grid-template-columns: minmax(0, 1fr); max-width: 760px; row-gap: 0}
#league-bars .league-row {border-bottom: 1px solid var(--line)}
#league-bars .league-row:last-child {border-bottom: 0}
@media (min-width: 801px) {
  #league-bars .league-row {grid-template-columns: minmax(160px, 210px) minmax(0, 1fr) 48px; gap: 20px; padding: 12px 0}
}

/* Desktop panels share edges; compactness must not squeeze the rank label. */
@media (min-width: 801px) {
  .navigation-label {margin-bottom: 6px}
  .league-navigation {padding: 8px; margin-bottom: 18px}
  #league-tabs {gap: 6px; padding: 2px}
  #league-tabs a {min-height: 44px; padding: 8px 12px}
  #league-view-tabs {margin-bottom: 16px}
  #premier[data-rating-view="goals"] #pl-ratings-panel {max-width: 100%}
  #premier[data-rating-view="goals"] #pl-table {max-width: 100%}
  #premier[data-rating-view="goals"] #pl-table :is(th, td):first-child {width: var(--rank-column-width); min-width: var(--rank-column-width)}
  #premier[data-rating-view="goals"] #pl-table :is(th, td):nth-child(2) {width: 256px}
  #premier[data-rating-view="goals"] #pl-table :is(th, td):nth-child(n+3) {width: auto}
  #premier[data-rating-view="goals"] #pl-table :is(th, td):nth-child(3) {width: min(264px, calc((100% - var(--rank-column-width) - 352px) / 2))}
  #premier[data-rating-view="goals"] #pl-table :is(th, td):nth-child(4) {width: 96px}
  #premier[data-rating-view="goals"] #pl-table td {padding: 6px 8px; vertical-align: middle}
  #premier[data-rating-view="goals"] #pl-table td:nth-child(2) {padding-left: 40px}
  #premier[data-rating-view="goals"] #pl-table .sort-header {min-height: 54px; padding: 6px}
  /* The heading starts at the club text: 40px inset + 22px badge + 8px gap. */
  #premier[data-rating-view="goals"] #pl-table th:nth-child(2) .sort-header {align-items: flex-start; text-align: left; padding-left: 70px}
  #premier[data-rating-view="goals"] #pl-table .team-name {display: flex; width: 208px; max-width: 100%; min-height: 24px; margin: 0; padding: 0; gap: 8px; justify-content: flex-start; text-align: left; line-height: 1.4}
  /* Keep the club, attack figure and mirrored charts together without stretching the bars. */
  #premier[data-rating-view="goals"] #pl-table .goal-visual {width: 100%; max-width: 248px; flex-direction: row; align-items: center; gap: 8px}
  #pl-table .seg-bar {display: inline-block; width: auto; min-width: 0; max-width: 200px; height: 15px; flex: 1 1 0}
  #premier[data-rating-view="goals"] #pl-table .goal-visual>.num {min-width: 40px; flex: 0 0 40px; line-height: 1.4}
  #premier[data-rating-view="goals"] #pl-table :is(.goal-attack, .goal-defence) .sort-header {justify-content: center}
  #premier[data-rating-view="goals"] #pl-table .goal-defence .sort-header {width: 264px; max-width: 100%}
  #premier[data-rating-view="goals"] #pl-table .goal-centre .gd-pill {min-width: 74px; padding: 3px 6px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface-muted); color: var(--pos); line-height: 1.4}
  #premier[data-rating-view="goals"] #pl-table .goal-centre .gd-pill.negative {color: var(--neg)}
}

/* European views reuse the league tables, cards and responsive scrolling. */
#premier.european-competition #league-view-tabs {grid-template-columns:repeat(3,minmax(0,1fr))}
#league-view-tabs button[hidden] {display:none}
#european-note {margin:8px 0 16px}
@media(max-width:800px){#premier.european-competition #league-view-tabs {grid-template-columns:repeat(3,minmax(max-content,1fr))}}