/* A compact result count stays beside the update time and wraps on small screens. */
.global-table-meta {display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 16px; margin: 0 0 10px}
.global-table-meta .data-updated {margin: 0}
#global-count {color: var(--muted); font-size: var(--type-label); line-height: 1.5; font-variant-numeric: lining-nums tabular-nums; white-space: nowrap}
@media(max-width:800px) {.global-table-meta {margin-bottom: 8px}}

/* Headers, values and bars share a column centre; club names stay left-aligned. */
#global-table {--table-heading-label-height: 4.75rem}
#pl-table {--table-heading-label-height: 3.75rem}
#premier[data-rating-view="ratings"] #pl-table {--table-heading-label-height: 2.75rem}
:is(#global-table, #pl-table):not(:has(.goal-heading)) th {vertical-align: bottom}
:is(#global-table, #pl-table):not(:has(.goal-heading)) .sort-header {
  display: flex; flex-direction: column; align-items: center; justify-content: flex-end;
  gap: 4px; white-space: normal; text-align: center;
  font-size: var(--type-table-heading); line-height: 1.35;
}
:is(#global-table, #pl-table):not(:has(.goal-heading)) .sort-header>.table-heading-label {
  display: grid; align-content: center; gap: 3px; width: 100%; min-width: 0; max-width: 100%;
  min-height: var(--table-heading-label-height);
  white-space: normal; overflow-wrap: normal; word-break: normal;
}
:is(#global-table, #pl-table):not(:has(.goal-heading)) .table-heading-label>small {margin: 0}
#pl-table .sort-header[data-sort-key^="since_"] .table-heading-label>small {font-size: var(--type-axis); white-space: nowrap}
:is(#global-table, #pl-table):not(:has(.goal-heading)) .sort-header>.sort-arrow {
  position: static; transform: none; margin: 0; line-height: 1;
}
:is(#global-table, #pl-table):not(:has(.goal-heading)) th:first-child .sort-header {
  align-items: center; padding-left: 2px; padding-right: 2px; text-align: center;
}
/* Use the inline logo's wordmark baseline, not the centre of its INDEX signature. */
:is(#global-table, #pl-table) .table-heading-brand {
  display: block; text-align: center; white-space: nowrap;
}
:is(#global-table, #pl-table) .table-heading-brand>.ninety-inline {margin-inline-end: .05em}
:is(#global-table, #pl-table) .sort-arrow {font-size: .6875rem; color: var(--muted)}
:is(#global-table, #pl-table) th[aria-sort] .sort-arrow {color: var(--section-color)}
:is(#global-table, #pl-table):not(:has(.goal-heading)) tbody td:nth-child(n+3) {text-align: center}
:is(#global-table, #pl-table):not(:has(.goal-heading)) :is(.strength-rating-meter, .season-score-meter, .index-meter) {margin-left: auto; margin-right: auto}

/* A club name is the primary row label; league metadata sits below it. */
#global-table {
  --team-cell-inset: 10px;
  --team-badge-size: 22px;
  --team-badge-gap: 8px;
  --team-text-offset: calc(var(--team-badge-size) + var(--team-badge-gap));
}
#global-table:not(:has(.goal-heading)) th.global-club .sort-header {
  align-items: flex-start; text-align: left;
  padding-left: calc(var(--team-cell-inset) + var(--team-text-offset));
}
#global-table tbody :is(td.global-rank, td.global-club) {vertical-align: top}
#global-table td.global-club {padding-left: var(--team-cell-inset)}
#global-table tbody td.global-rank {font-size: var(--type-data); line-height: 24px}
#global-table .team-name {
  display: grid; grid-template-columns: var(--team-badge-size) minmax(0, 1fr);
  gap: var(--team-badge-gap); width: 100%; min-height: 24px; padding: 0;
  align-items: start; line-height: 24px;
}
/* Preserve the text column even when a team has no badge. */
#global-table .club-text {grid-column: 2; line-height: 24px}
#global-table .club-badge {width: var(--team-badge-size); height: var(--team-badge-size); margin-top: 1px}
#global-table .global-club .mobile-club-league {margin-top: 2px; margin-left: var(--team-text-offset)}
@media (min-width: 801px) {
  #global-table tbody td.global-rank {font-size: 1rem}
  #global-table .mobile-club-league {display: block; color: var(--muted); white-space: normal}
}
@media (max-width: 800px) {
  #global-table {--team-cell-inset: 5px; --team-badge-size: 18px; --team-badge-gap: 5px}
  /* Slightly smaller mobile columns and spacing; preserve usable sorting targets. */
  #global-table, #pl-table {--mobile-club-width: clamp(136px, 34vw, 168px); --mobile-metric-width: 78px}
  #global-table td, #pl-table td {padding: 5px}
  #global-table .sort-header, #pl-table .sort-header {min-height: 46px; padding: 6px 5px}
  #global-table :is(.team-name, .club-text), #global-table tbody td.global-rank {line-height: 22px}
  #pl-table {--table-heading-label-height: 3.5rem}
  #premier[data-rating-view="ratings"] #pl-table {--table-heading-label-height: 2.5rem}
  :is(#global-table, #pl-table) :is(.strength-rating-meter, .season-score-meter) {margin-top: 4px}
  /* Cap the sticky club column instead of stretching it across the viewport. */
  #global-table table {width: max(100%, calc(var(--mobile-club-width) + 420px))}
  #global-table :is(th.global-rank, td.global-rank) {width: 40px}
  #global-table :is(th.global-club, td.global-club) {width: var(--mobile-club-width)}
  #global-table :is(th.global-rating, td.global-rating, th.global-attack, th.global-defence, th.global-gd) {width: var(--mobile-metric-width)}
  #global-table th.global-change {width: 68px}
  #pl-table:not(:has(.goal-heading)) table {width: max(100%, calc(40px + var(--mobile-club-width) + var(--mobile-metric-count, 5) * var(--mobile-metric-width)))}
  #pl-table:not(:has(.goal-heading)) :is(th, td):first-child {width: 40px}
  #pl-table:not(:has(.goal-heading)) :is(th, td):nth-child(2) {width: var(--mobile-club-width)}
  #pl-table:not(:has(.goal-heading)) :is(th, td):nth-child(n+3) {width: var(--mobile-metric-width)}
  :is(#global-table, #pl-table):not(:has(.goal-heading)) :is(.strength-rating-meter, .season-score-meter, .index-meter) {width: 60px; max-width: 100%}
  #premier[data-rating-view="goals"] #pl-table {--goal-type: .875rem}
  #premier[data-rating-view="goals"] #pl-table td {padding: 5px 4px}
  #premier[data-rating-view="goals"] #pl-table .sort-header {min-height: 48px; padding-top: 5px; padding-bottom: 5px}
}

/* Fit all competition projection columns within the desktop content area. */
@media(min-width:801px){
  #premier.european-competition:has([data-view="projections"].active) #pl-table table {width:100%;min-width:0;table-layout:fixed}
  #premier.european-competition:has([data-view="projections"].active) #pl-table th:nth-child(1) {width:6%;min-width:0}
  #premier.european-competition:has([data-view="projections"].active) #pl-table th:nth-child(2) {width:18%;min-width:0}
  #premier.european-competition:has([data-view="projections"].active) #pl-table th:nth-child(3) {width:10%;min-width:0}
  #premier.european-competition:has([data-view="projections"].active) #pl-table th:nth-child(4) {width:10%;min-width:0}
  #premier.european-competition:has([data-view="projections"].active) #pl-table th:nth-child(5) {width:6%;min-width:0}
  #premier.european-competition:has([data-view="projections"].active) #pl-table th:nth-child(6) {width:8%;min-width:0}
  #premier.european-competition:has([data-view="projections"].active) #pl-table th:nth-child(7) {width:8%;min-width:0}
  #premier.european-competition:has([data-view="projections"].active) #pl-table th:nth-child(8) {width:9%;min-width:0}
  #premier.european-competition:has([data-view="projections"].active) #pl-table th:nth-child(9) {width:9%;min-width:0}
  #premier.european-competition:has([data-view="projections"].active) #pl-table th:nth-child(10) {width:9%;min-width:0}
  #premier.european-competition:has([data-view="projections"].active) #pl-table th:nth-child(11) {width:7%;min-width:0}
  #premier.european-competition:has([data-view="projections"].active) #pl-table :is(th,td):nth-child(-n+2) {position:static;min-width:0}
  #premier.european-competition:has([data-view="projections"].active) #pl-table td {padding:8px 4px}
  #premier.european-competition:has([data-view="projections"].active) #pl-table .sort-header {padding:6px 3px;min-width:0}
  #premier.european-competition:has([data-view="projections"].active) #pl-table .table-heading-label {overflow-wrap:normal;word-break:normal}
}

@media(min-width:801px){
#premier.mls-league:has([data-view="projections"].active) #pl-table table{width:100%;min-width:0;table-layout:fixed}
#premier.mls-league:has([data-view="projections"].active) #pl-table th:nth-child(1){width:6%;min-width:0}
#premier.mls-league:has([data-view="projections"].active) #pl-table th:nth-child(2){width:22%;min-width:0}
#premier.mls-league:has([data-view="projections"].active) #pl-table th:nth-child(3){width:11%;min-width:0}
#premier.mls-league:has([data-view="projections"].active) #pl-table th:nth-child(4){width:11%;min-width:0}
#premier.mls-league:has([data-view="projections"].active) #pl-table th:nth-child(5){width:6%;min-width:0}
#premier.mls-league:has([data-view="projections"].active) #pl-table th:nth-child(6){width:8%;min-width:0}
#premier.mls-league:has([data-view="projections"].active) #pl-table th:nth-child(7){width:10%;min-width:0}
#premier.mls-league:has([data-view="projections"].active) #pl-table th:nth-child(8){width:10%;min-width:0}
#premier.mls-league:has([data-view="projections"].active) #pl-table th:nth-child(9){width:9%;min-width:0}
#premier.mls-league:has([data-view="projections"].active) #pl-table th:nth-child(10){width:7%;min-width:0}
#premier.mls-league:has([data-view="projections"].active) #pl-table :is(th,td):nth-child(-n+2){position:static;min-width:0}
#premier.mls-league:has([data-view="projections"].active) #pl-table td{padding:8px 4px}
#premier.mls-league:has([data-view="projections"].active) #pl-table .sort-header{padding:6px 3px;min-width:0}
#premier.mls-league:has([data-view="projections"].active) #pl-table .table-heading-label{overflow-wrap:normal;word-break:normal}
}

#league-comparison-count {margin: 8px 0 0; color: var(--muted); font-size: var(--type-label); line-height: 1.5; font-variant-numeric: lining-nums tabular-nums}

/* Team names reveal their interaction on hover and keyboard focus. */
:is(#global-table, #pl-table) .team-name:is(:hover, :focus-visible) {
  color: var(--section-color);
  text-decoration: underline;
  text-underline-offset: 4px;
}
:is(#global-table, #pl-table) .team-name:focus-visible {
  outline: 2px solid var(--section-color);
  outline-offset: 3px;
  border-radius: 3px;
}

/* League headings share the name-text edge, including compact competition views. */
#premier #pl-table {
  --team-cell-inset: 10px;
  --team-badge-size: 22px;
  --team-badge-gap: 8px;
  --team-text-offset: calc(var(--team-badge-size) + var(--team-badge-gap));
}
#premier #pl-table th:nth-child(2) .sort-header[data-sort-key="team"],
#premier.european-competition:has([data-view="projections"].active) #pl-table .sort-header[data-sort-key="team"],
#premier.mls-league:has([data-view="projections"].active) #pl-table .sort-header[data-sort-key="team"] {
  align-items: flex-start; text-align: left;
  padding-left: calc(var(--team-cell-inset) + var(--team-text-offset));
}
#premier #pl-table td:nth-child(2) .team-name {
  display: grid; grid-template-columns: var(--team-badge-size) minmax(0, 1fr);
  gap: var(--team-badge-gap); width: 100%; padding: 0; align-items: start;
}
#premier #pl-table .club-text {grid-column: 2}
#premier #pl-table .team-name .club-badge {width: var(--team-badge-size); height: var(--team-badge-size)}
@media (min-width: 801px) {
  #premier[data-rating-view="goals"] #pl-table {--team-cell-inset: 40px}
  #premier:is(.european-competition, .mls-league):has([data-view="projections"].active) #pl-table {--team-cell-inset: 4px}
}
@media (max-width: 800px) {
  #premier #pl-table {--team-cell-inset: 5px; --team-badge-size: 18px; --team-badge-gap: 5px}
  #premier[data-rating-view="goals"] #pl-table {--team-cell-inset: 4px; --team-badge-size: 18px}
}