/* The Professor — team page (redesign). The header is a band in the club's own field colour with its
   second colour as an 8px base, a large watermark of the code and the crest; tabs sit under it as a quiet
   underline row. Content is square cards on the page ground. Colours of the club come from TeamPalette
   (the --team-* variables set on the header); everything else is design-system tokens, so both themes follow. */
#screen-team-hub { container-type: inline-size; container-name: th; }
.th-wrap { width: 100%; max-width: 1280px; margin: 0 auto; font-family: var(--ds-font); color: var(--ds-ink); }

/* ── Header ── */
.th-header {
  position: relative; overflow: hidden; box-sizing: border-box;
  display: flex; flex-direction: column; gap: 18px; padding: 14px 16px 22px;
  background: var(--ds-ink); color: var(--ds-card); border-block-end: 8px solid var(--ds-line);
}
.th-header.has-field { background: var(--team-field-l); color: var(--team-fg-l); border-block-end-color: var(--team-trim-l); }
html[data-theme="dark"] .th-header.has-field { background: var(--team-field-d); color: var(--team-fg-d); border-block-end-color: var(--team-trim-d); }
.th-wm {
  position: absolute; inset-inline-start: -2%; inset-block-end: -18%; direction: ltr; pointer-events: none; user-select: none;
  font: 800 clamp(120px, 24vw, 280px)/.8 var(--ds-font-num); letter-spacing: -.02em; color: currentColor; opacity: .09;
}
.th-top { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.th-lg { font: 700 var(--ds-fs-14) var(--ds-font); opacity: .9; }
.th-close-btn {
  position: static; inline-size: var(--ds-h-btn); block-size: var(--ds-h-btn); display: grid; place-items: center; padding: 0;
  border: 1.5px solid currentColor; border-radius: 0; background: transparent; color: inherit; cursor: pointer;
}
.th-close-btn:hover { background: color-mix(in srgb, currentColor 14%, transparent); }
.th-id { position: relative; display: flex; align-items: center; gap: 18px; }
.th-logo { flex: none; inline-size: 88px; block-size: 88px; object-fit: contain; }
.th-id-text { min-width: 0; }
.th-team-name { margin: 0; font: 900 clamp(26px, 6vw, 44px)/1.1 var(--ds-font); letter-spacing: -.02em; text-wrap: balance; overflow-wrap: break-word; }
.th-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin-block-start: 10px; font: 600 var(--ds-fs-15) var(--ds-font); }
.th-rec { font: 800 28px/1 var(--ds-font-num); letter-spacing: .01em; }
.th-chip { padding: 4px 10px; font: 700 var(--ds-fs-13) var(--ds-font); background: color-mix(in srgb, currentColor 16%, transparent); }
@container th (min-width: 760px) {
  .th-header { padding: 18px 32px 30px; }
  .th-logo { inline-size: 116px; block-size: 116px; }
}

/* ── Tabs ── */
.th-tab-bar {
  position: sticky; inset-block-start: 0; z-index: 5; display: flex; align-items: stretch; gap: 4px; overflow-x: auto; scrollbar-width: none;
  padding: 0 8px; background: var(--ds-card); border-block-end: 1px solid var(--ds-line);
}
.th-tab-bar::-webkit-scrollbar { display: none; }
.th-tab {
  flex: none; min-block-size: var(--ds-h-btn); padding: 0 16px; border: 0; border-radius: 0; background: transparent;
  color: var(--ds-ink2); font: 700 var(--ds-fs-15) var(--ds-font); cursor: pointer; white-space: nowrap; box-shadow: inset 0 -3px 0 transparent;
  transition: color var(--ds-t-ctrl) ease, box-shadow var(--ds-t-ctrl) ease;
}
.th-tab:hover { color: var(--ds-ink); }
.th-tab.active { color: var(--ds-ink); box-shadow: inset 0 -3px 0 var(--ds-ink); }
.th-tab:focus-visible, .th-close-btn:focus-visible { outline: 2px solid var(--ds-ink); outline-offset: -2px; }
.th-header .th-close-btn:focus-visible { outline-color: currentColor; }

/* ── Panels ── */
.th-panel { padding: 16px 12px 40px; }
.th-panel.hidden { display: none; }
@container th (min-width: 760px) { .th-panel { padding: 24px 24px 56px; } }
.th-loading, .th-empty { padding: 40px 12px; text-align: center; font: 500 var(--ds-fs-15) var(--ds-font); color: var(--ds-ink2); }

/* ── Cards ── */
.th-card { box-sizing: border-box; padding: 18px 20px 20px; background: var(--ds-card); border: 1px solid var(--ds-line); }
.th-kick { display: block; margin-block-end: 8px; font: 800 var(--ds-fs-12) var(--ds-font); letter-spacing: .06em; color: var(--ds-ink2); }
.th-cols { display: flex; flex-direction: column; gap: 14px; }
.th-side { display: flex; flex-direction: column; gap: 14px; }
@container th (min-width: 860px) {
  .th-cols { flex-direction: row; align-items: flex-start; }
  .th-main { flex: 1 1 0; min-width: 0; }
  .th-side { flex: 0 0 340px; }
}

/* ── Details ── */
.th-kpis { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; margin-block-start: 6px; }
.th-kpi { display: flex; flex-direction: column; gap: 2px; padding: 14px 4px 14px 12px; border-block-start: 1px solid var(--ds-line); }
/* The last cell fills the rest of its row, so its top line runs to the end instead of stopping halfway (owner, 31.10). */
.th-kpi:last-child:nth-child(odd) { grid-column: 1 / -1; }
@container th (min-width: 520px) {
  .th-kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .th-kpi:last-child:nth-child(odd) { grid-column: auto; }
  .th-kpi:last-child:nth-child(4n+1) { grid-column: 1 / -1; }
  .th-kpi:last-child:nth-child(4n+2) { grid-column: span 3; }
  .th-kpi:last-child:nth-child(4n+3) { grid-column: span 2; }
}
.th-kpi-v { font: 700 var(--ds-fd-40)/1 var(--ds-font-num); font-variant-numeric: tabular-nums; color: var(--ds-ink); }
.th-kpi-l { font: 700 var(--ds-fs-14) var(--ds-font); color: var(--ds-ink); }
.th-kpi-s { font: 500 var(--ds-fs-13) var(--ds-font); color: var(--ds-ink2); }
.th-l10 { margin-block-start: 8px; padding-block-start: 16px; border-block-start: 1px solid var(--ds-line); }
.th-l10-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-block-end: 10px; }
.th-l10-head h3 { margin: 0; font: 800 var(--ds-fs-17) var(--ds-font); }
.th-l10-rec { font: 700 var(--ds-fs-20) var(--ds-font-num); color: var(--ds-ink2); }
.th-lastgame-line { font: 800 var(--ds-fd-28)/1.25 var(--ds-font); letter-spacing: -.01em; text-wrap: balance; }
.th-titles-main { display: flex; align-items: baseline; gap: 10px; }
.th-titles-count { font: 700 var(--ds-fd-56)/1 var(--ds-font-num); color: var(--ds-ink); }
.th-titles-label { font: 700 var(--ds-fs-17) var(--ds-font); color: var(--ds-ink2); }
.th-titles-years { display: flex; flex-wrap: wrap; gap: 6px; margin-block-start: 12px; }
.th-titles-years span { padding: 3px 8px; font: 600 var(--ds-fs-13) var(--ds-font-num); border: 1px solid var(--ds-line); color: var(--ds-ink2); }
.th-titles-note { margin-block-start: 8px; font: 500 var(--ds-fs-13)/1.5 var(--ds-font); color: var(--ds-ink2); }

/* ── Stats tab ── */
.th-stat-section {
  margin-bottom: 20px;
}

.th-stat-title {
  font-family: "Heebo", sans-serif;
  font-weight: 700;
  font-size: 14px;
  color: var(--text);
  margin-bottom: 8px;
}

.th-leader-top3 {
  display: flex;
  gap: 8px;
  margin-bottom: 8px;
}

.th-leader-card {
  flex: 1;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px 6px;
  text-align: center;
}

.th-leader-value {
  font-family: "Barlow Condensed", sans-serif;
  font-size: 22px;
  font-weight: 800;
  color: var(--accent-ink);
}

.th-leader-name {
  font-size: 11px;
  color: var(--muted);
  margin-top: 2px;
}

.th-leader-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.th-leader-row {
  display: flex;
  align-items: baseline;
  padding: 6px 10px;
  font-size: 13px;
  color: var(--muted);
  border-bottom: 1px solid rgba(255,255,255,0.04);
}

.th-leader-row:nth-child(even) { background: var(--bg-card2, rgba(255,255,255,0.025)); }

.th-leader-row span:first-child {
  font-weight: 700;
  color: var(--text);
}

/* ── Squad / Standings tables ── */
.th-jersey { text-align: center; color: var(--muted); width: 40px; }
.th-name { text-align: start; }
.th-pos { text-align: center; color: var(--muted); }
.th-row-clickable { cursor: pointer; }
.th-row-clickable:hover { background: rgba(255,255,255,0.04); }

/* ── Standings list (redesigned: logos, bigger type, clean columns) ── */
.th-standings-list {
  display: flex;
  flex-direction: column;
  padding: 0 16px;
}

.th-standings-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 4px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}

.th-standings-head {
  border-bottom: 1px solid var(--border);
  padding-bottom: 8px;
  margin-bottom: 2px;
}

.th-standings-head .th-standings-rank,
.th-standings-head .th-standings-name,
.th-standings-head .th-standings-rec,
.th-standings-head .th-standings-pct {
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

.th-standings-row-me {
  background: var(--team-accent-bg, rgba(255,255,255,0.08));
  border-radius: 8px;
}

.th-standings-rank {
  flex-shrink: 0;
  width: 22px;
  text-align: center;
  font-weight: 700;
  color: var(--muted);
  font-size: 13px;
}

.th-standings-logo-wrap {
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.th-standings-logo {
  width: 26px;
  height: 26px;
  object-fit: contain;
}

.th-standings-name {
  flex: 1;
  min-width: 0;
  font-weight: 700;
  font-size: 15px;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.th-standings-rec {
  flex-shrink: 0;
  width: 52px;
  text-align: center;
  font-size: 13px;
  color: var(--text);
}

.th-standings-pct {
  flex-shrink: 0;
  width: 48px;
  text-align: center;
  font-size: 13px;
  font-weight: 700;
  color: var(--muted);
}

/* ── Squad: front office, then a section per role ──────────────────────── */
.th-squad-office {
  margin: 4px 16px 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border, rgba(0,0,0,.1));
}
.th-squad-office-row {
  display: flex;
  align-items: baseline;
  gap: 8px;
}
.th-squad-office-row + .th-squad-office-row { margin-top: 3px; }
.th-squad-office-label {
  flex: 0 0 auto;
  min-width: 86px;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .3px;
  color: var(--muted, #6b7280);
}
.th-squad-office-name {
  font-size: .92rem;
  font-weight: 800;
  color: var(--text, #111);
}

.th-squad-group + .th-squad-group { margin-top: 14px; }
.th-squad-group-title {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 0 16px 4px;
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .3px;
  color: var(--muted, #6b7280);
}
.th-squad-group-count {
  font-size: .7rem;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 8px;
  background: var(--bg-card2, rgba(0,0,0,.05));
  color: var(--muted, #6b7280);
}

/* ── Squad list (365scores-style row: photo, bold name, position, jersey) ── */
.th-squad-list {
  display: flex;
  flex-direction: column;
  padding: 0 16px;
}

.th-squad-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 4px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}

.th-squad-photo-wrap {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
}

.th-squad-photo {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  object-fit: cover;
  background: rgba(255,255,255,0.12);
  display: flex;
  align-items: center;
  justify-content: center;
}

.th-squad-silhouette {
  font-size: 20px;
}

.th-squad-info {
  flex: 1;
  min-width: 0;
}

.th-squad-name {
  font-weight: 700;
  font-size: 16px;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.th-squad-sub {
  font-size: 12px;
  color: var(--muted);
  margin-top: 2px;
}

.th-squad-jersey {
  flex-shrink: 0;
  font-size: 13px;
  font-weight: 700;
  color: var(--muted);
  min-width: 26px;
  text-align: center;
}

/* ── Games tab ── */
.th-games-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.th-game-row {
  display: flex;
  justify-content: space-between;
  padding: 10px 12px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 13px;
}

.th-game-date { color: var(--muted); }
.th-game-teams { font-weight: 600; color: var(--text); }

/* ── Transfers tab ── */
.th-transfers-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.th-transfer-row {
  padding: 10px 12px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 13px;
}

.th-transfer-date {
  display: block;
  color: var(--muted);
  font-size: 11px;
  margin-bottom: 2px;
}

.th-transfer-desc { color: var(--text); }

/* ── Last-10 strip ───────────────────────────────────────────────────────────
   Ten games on one line: opponent, result in the colour, a dot for home. */

/* One line, always. Wrapping put two chips on a second row and made the card
   look broken; a strip that scrolls sideways keeps the shape. */
.th-l10-strip {
  display: flex;
  justify-content: flex-start;
  padding: 0 0 .55rem;
  margin-top: -.15rem;
  gap: 2px;
  flex-wrap: nowrap;
  overflow-x: auto;
  max-width: 100%;
  scrollbar-width: none;
}
.th-l10-strip::-webkit-scrollbar { display: none; }



/* A home game carries a dot; an away game doesn't. One mark, not two labels. */



/* ── Last ten, as games ──────────────────────────────────────────────────────
   The opponent's crest with that game's score under it, green when it was won
   and red when it wasn't. Each game sizes to its own score: a fixed 46px cell
   was narrower than "103-89", so wide scores pushed into the next game and the
   row read as one smear of numbers.

   The strip is also its own block, set off from the rows above and below it —
   pressed straight against "בית 11-8" it looked like part of that line. */
.th-l10-strip {
  display: flex;
  gap: .5rem;
  overflow-x: auto;
  margin: .15rem 0 .35rem;
  padding: .7rem .25rem .8rem;
  border-top: 1px solid var(--border, rgba(0,0,0,.07));
  border-bottom: 1px solid var(--border, rgba(0,0,0,.07));
  scrollbar-width: thin;
}
.th-l10-game {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .3rem;
  border: none;
  background: none;
  padding: 0;
  cursor: pointer;
  flex: 0 0 auto;          /* never squeezed, never stretched */
  font-family: inherit;
}
.th-l10-logo { width: 26px; height: 26px; object-fit: contain; display: block; }
.th-l10-abbr {
  font-size: .62rem;
  font-weight: 700;
  color: var(--text-secondary, #777);
  height: 26px;
  display: flex;
  align-items: center;
}
.th-l10-score {
  font-size: .66rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1.35;
  padding: .1rem .42rem;
  border-radius: 999px;
  border: 1.5px solid;
  white-space: nowrap;
}
.th-l10-game.won  .th-l10-score { color: #15803d; border-color: #22c55e; }
.th-l10-game.lost .th-l10-score { color: #b91c1c; border-color: #ef4444; }
.th-l10-game:hover .th-l10-logo { transform: scale(1.08); transition: transform .12s; }

/* Every value in this table is a number or a number pair — a record, a rank, a
   streak, a percentage. In an RTL page "11-8 · 58%" laid out as "58% · 11-8",
   and a record can flip outright ("27-14" reading as "14-27"), which changes
   who has the better season. */
.th-detail-v { direction: ltr; unicode-bidi: isolate; }


/* ── Crests on the near-black EuroLeague / National-Teams palettes ────────
   Measured live: the recent-form strip sits on #141410 and the title band on
   #666666, and the EuroLeague crest set is largely dark — ASVEL loses 100% of
   its visible pixels to below 3:1 on that ground, Baskonia 70%, Efes 67%.
   Same light disc the game card uses, so a badge reads the same wherever it
   appears. Not applied to the NBA, whose crests carry white. */
html[data-theme="dark"] body[data-league="EuroLeague"] .th-logo,
html[data-theme="dark"] body[data-league="NationalTeams"] .th-logo {
  padding: 4px;
  box-sizing: content-box;
  border-radius: 50%;
  background: rgba(255, 255, 255, .93);
}
html[data-theme="dark"] body[data-league="EuroLeague"] .th-l10-logo,
html[data-theme="dark"] body[data-league="EuroLeague"] .th-standings-logo,
html[data-theme="dark"] body[data-league="NationalTeams"] .th-l10-logo,
html[data-theme="dark"] body[data-league="NationalTeams"] .th-standings-logo {
  padding: 2px;
  box-sizing: content-box;
  border-radius: 50%;
  background: rgba(255, 255, 255, .93);
}

/* Shown only while the recent-form strip is drawing last season's games,
   directly under a record that reads 0-0. Quiet: it is a caveat, not a
   warning — the games themselves are real, they are just not from now. */
.th-l10-note {
  font-size: 11px;
  color: var(--text-muted);
  margin-bottom: 5px;
  text-align: start;
}

/* The club name under each chip in the recent-form strip.

   This is the one place in the app where a crest stands without a name beside
   it, and the crests are now colour discs. Measured across the twenty
   EuroLeague clubs: four are the identical black — Milan, Besiktas, Partizan,
   Virtus — and Paris and Crvena Zvezda share one red exactly, with sixteen
   more pairs under a just-noticeable difference. A disc cannot tell those
   apart and should not be asked to; the name does it.

   The tooltip already carried the name, which is no answer on a phone.
   Truncated rather than shortened by rule: an ellipsis is honestly partial,
   where a made-up abbreviation reads as the club's actual short name. */
.th-l10-name {
  max-width: 54px;
  font-size: 9px;
  font-weight: 600;
  line-height: 1.2;
  color: var(--text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: center;
}


/* ── Where the team stands in the league ─────────────────────────────── */
.th-rk { margin-bottom: 20px; }
.th-rk-title { font-size: 16px; font-weight: 800; color: var(--text); }
.th-rk-sub { color: var(--muted); font-size: 12px; margin: 2px 0 10px; }
/* The Stats tab's season note: not played yet / too early to mean anything. */
.th-season-note {
  font-size: 13px; color: var(--text); margin: 0 0 12px;
  padding: 8px 12px; border-radius: 8px; text-align: center;
  background: color-mix(in srgb, var(--muted) 12%, transparent);
}
.th-rk-note {
  font-size: 12px; color: var(--text); margin: -4px 0 10px;
  padding: 6px 10px; border-radius: 8px;
  background: color-mix(in srgb, var(--muted) 12%, transparent);
}
.th-rk-tiles {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}
.th-rk-tile {
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 10px 6px;
  text-align: center;
  background: var(--bg-card);
}
.th-rk-tile-label { font-size: 12px; color: var(--muted); font-weight: 600; }
.th-rk-tile-rank { font-size: 20px; font-weight: 800; color: var(--text); margin: 2px 0; }
.th-rk-tile-val { font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.th-rk-more { margin-top: 10px; }
.th-rk-more > summary {
  cursor: pointer;
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
  padding: 6px 0;
}
/* Columns by the room the panel actually has, not the window: in a 660px
   panel three columns wrapped every label onto two lines. */
.th-rk-groups {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 10px;
  margin-top: 4px;
}
.th-rk-group {
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 8px 12px;
  background: var(--bg-card);
}
.th-rk-group-title {
  font-size: 12px; font-weight: 800; color: var(--muted);
  letter-spacing: .02em; margin-bottom: 4px;
}
.th-rk-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 0;
  border-top: 1px solid color-mix(in srgb, var(--border) 60%, transparent);
  font-size: 13px;
}
.th-rk-row:first-of-type { border-top: 0; }
.th-rk-k { flex: 1; color: var(--text); min-width: 0; }
.th-rk-v { font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; }
.th-rk-pill {
  font-size: 11px; font-weight: 700; white-space: nowrap;
  padding: 1px 7px; border-radius: 999px;
  border: 1px solid var(--border); color: var(--text);
}
/* Colour only reinforces the place, which is always written out. */
.th-rk-t1 { background: color-mix(in srgb, #16a34a 24%, var(--bg-card)); border-color: color-mix(in srgb, #16a34a 50%, transparent); }
.th-rk-t2 { background: color-mix(in srgb, #16a34a 11%, var(--bg-card)); }
.th-rk-t3 { background: var(--bg-card); }
.th-rk-t4 { background: color-mix(in srgb, #d97706 12%, var(--bg-card)); }
.th-rk-t5 { background: color-mix(in srgb, #d97706 24%, var(--bg-card)); border-color: color-mix(in srgb, #d97706 50%, transparent); }

/* ═══ Redesign layer: the tabs after Details. Same markup, design-system tokens, square corners. ═══ */
/* The dotted line runs through the middle of the row, between the name and its number, so the eye can follow it across (owner, 30.10: it sat at the bottom). */
.th-detail-leader { flex: 1; align-self: center; margin: 0 12px; border-block-end: 2px dotted color-mix(in srgb, var(--ds-ink2) 55%, transparent); }
.th-stat-section { margin-block-end: 22px; }
.th-stat-title { margin-block-end: 10px; font: 800 var(--ds-fs-17) var(--ds-font); color: var(--ds-ink); }
.th-leader-top3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-block-end: 10px; }
.th-leader-card { display: flex; flex-direction: column; gap: 4px; padding: 14px 8px; border: 1px solid var(--ds-line); border-radius: 0; background: var(--ds-card); text-align: center; }
.th-leader-value { font: 700 var(--ds-fd-32)/1 var(--ds-font-num); color: var(--ds-ink); }
.th-leader-name { margin: 0; font: 600 var(--ds-fs-13)/1.3 var(--ds-font); color: var(--ds-ink2); overflow-wrap: break-word; }
.th-leader-list { gap: 0; background: var(--ds-card); border: 1px solid var(--ds-line); }
.th-leader-row { display: flex; align-items: center; gap: 10px; min-block-size: 44px; padding: 0 14px; font: 500 var(--ds-fs-15) var(--ds-font); color: var(--ds-ink); border-block-end: 1px solid var(--ds-line); }
.th-leader-row:last-child { border-block-end: 0; }
.th-leader-row:nth-child(even) { background: transparent; }
.th-leader-row span:first-child { min-inline-size: 28px; font: 700 var(--ds-fs-17) var(--ds-font-num); font-variant-numeric: tabular-nums; color: var(--ds-ink); }
.th-row-clickable:hover { background: var(--ds-soft); }

/* where they stand */
.th-rk { margin-block-end: 22px; padding: 18px 20px; background: var(--ds-card); border: 1px solid var(--ds-line); }
.th-rk-title { font: 800 var(--ds-fs-20) var(--ds-font); color: var(--ds-ink); }
.th-rk-sub { margin: 4px 0 12px; font: 500 var(--ds-fs-13) var(--ds-font); color: var(--ds-ink2); }
.th-season-note, .th-rk-note { margin: 0 0 12px; padding: 10px 12px; border-radius: 0; background: var(--ds-soft); border: 1px solid var(--ds-line); font: 600 var(--ds-fs-14)/1.5 var(--ds-font); color: var(--ds-ink); }
.th-rk-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.th-rk-tile { padding: 12px 8px; border: 1px solid var(--ds-line); border-radius: 0; box-shadow: inset 0 4px 0 var(--ds-line); background: var(--ds-card); text-align: center; }
.th-rk-tile-label { font: 600 var(--ds-fs-13) var(--ds-font); color: var(--ds-ink2); }
.th-rk-tile-rank { margin: 4px 0 2px; font: 700 var(--ds-fd-28)/1 var(--ds-font-num); color: var(--ds-ink); }
.th-rk-tile-val { font: 500 var(--ds-fs-13) var(--ds-font-num); color: var(--ds-ink2); }
.th-rk-more > summary { min-block-size: var(--ds-h-btn); display: flex; align-items: center; font: 700 var(--ds-fs-14) var(--ds-font); color: var(--ds-ink); cursor: pointer; }
.th-rk-group { border: 1px solid var(--ds-line); border-radius: 0; background: transparent; }
.th-rk-group-title { font: 800 var(--ds-fs-13) var(--ds-font); letter-spacing: .04em; color: var(--ds-ink2); }
.th-rk-row { min-block-size: 40px; border-block-start: 1px solid var(--ds-line); }
.th-rk-k { font: 500 var(--ds-fs-14) var(--ds-font); color: var(--ds-ink); }
.th-rk-v { font: 700 var(--ds-fs-15) var(--ds-font-num); color: var(--ds-ink); }
.th-rk-pill { padding: 2px 8px; border-radius: 0; font: 700 var(--ds-fs-12) var(--ds-font); border: 1px solid var(--ds-line); color: var(--ds-ink); }
/* a rank's colour only informs: a 4px edge on the tile, a tint on the pill */
.th-rk-t1 { --rk: var(--ds-ok); }
.th-rk-t2 { --rk: color-mix(in srgb, var(--ds-ok) 60%, var(--ds-ink2)); }
.th-rk-t3 { --rk: var(--ds-ink2); }
.th-rk-t4 { --rk: color-mix(in srgb, var(--ds-warn) 70%, var(--ds-ink2)); }
.th-rk-t5 { --rk: var(--ds-warn); }
.th-rk-tile[class*="th-rk-t"] { box-shadow: inset 0 4px 0 var(--rk); }
.th-rk-pill[class*="th-rk-t"] { background: color-mix(in srgb, var(--rk) 14%, transparent); border-color: var(--rk); }

/* squad */
.th-squad-office { margin: 0 0 16px; padding: 14px 18px; background: var(--ds-card); border: 1px solid var(--ds-line); }
.th-squad-office-label { font: 700 var(--ds-fs-13) var(--ds-font); letter-spacing: 0; color: var(--ds-ink2); }
.th-squad-office-name { font: 800 var(--ds-fs-15) var(--ds-font); color: var(--ds-ink); }
.th-squad-group { background: var(--ds-card); border: 1px solid var(--ds-line); }
.th-squad-group + .th-squad-group { margin-block-start: 14px; }
.th-squad-group-title { margin: 0; padding: 12px 18px 6px; font: 800 var(--ds-fs-14) var(--ds-font); letter-spacing: 0; color: var(--ds-ink); }
.th-squad-group-count { padding: 1px 8px; border-radius: var(--ds-r-pill); background: var(--ds-soft); font: 700 var(--ds-fs-12) var(--ds-font); color: var(--ds-ink2); }
.th-squad-list, .th-standings-list { padding: 0 10px 6px; }
.th-squad-row { min-block-size: 56px; padding: 6px 8px; border-block-end: 1px solid var(--ds-line); }
.th-squad-row:last-child { border-block-end: 0; }
.th-squad-photo { background: var(--ds-soft); }
.th-squad-name { font: 700 var(--ds-fs-15) var(--ds-font); color: var(--ds-ink); }
.th-squad-sub { font: 500 var(--ds-fs-13) var(--ds-font); color: var(--ds-ink2); }
.th-squad-jersey { font: 700 var(--ds-fs-20) var(--ds-font-num); color: var(--ds-ink2); }

/* standings */
.th-standings-list { background: var(--ds-card); border: 1px solid var(--ds-line); padding: 0 10px; }
.th-standings-row { min-block-size: 48px; padding: 6px 4px; border-block-end: 1px solid var(--ds-line); }
.th-standings-row:last-child { border-block-end: 0; }
.th-standings-head { min-block-size: 40px; border-block-end: 1px solid var(--ds-ink); }
.th-standings-head .th-standings-rank, .th-standings-head .th-standings-name, .th-standings-head .th-standings-rec, .th-standings-head .th-standings-pct { font: 700 var(--ds-fs-12) var(--ds-font); letter-spacing: .04em; color: var(--ds-ink2); text-transform: none; }
.th-standings-row-me { border-radius: 0; background: color-mix(in srgb, var(--ds-ink) 7%, transparent); box-shadow: inset 3px 0 0 var(--ds-lg-el); }
.th-standings-rank { font: 700 var(--ds-fs-14) var(--ds-font-num); color: var(--ds-ink2); }
.th-standings-name { font: 700 var(--ds-fs-15) var(--ds-font); color: var(--ds-ink); }
.th-standings-rec, .th-standings-pct { font: 600 var(--ds-fs-14) var(--ds-font-num); font-variant-numeric: tabular-nums; }
.th-standings-pct { color: var(--ds-ink2); }

/* games and transfers */
.th-games-list, .th-transfers-list { background: var(--ds-card); border: 1px solid var(--ds-line); padding: 0 10px; }
.th-game-row, .th-transfer-row { min-block-size: 52px; border-block-end: 1px solid var(--ds-line); font: 500 var(--ds-fs-15) var(--ds-font); }
.th-game-row:last-child, .th-transfer-row:last-child { border-block-end: 0; }
.th-game-date, .th-transfer-date { color: var(--ds-ink2); font: 600 var(--ds-fs-13) var(--ds-font-num); }
.th-game-teams { font: 700 var(--ds-fs-15) var(--ds-font); color: var(--ds-ink); }
.th-transfer-desc { color: var(--ds-ink); }

/* the last ten */
.th-l10-strip { border-block: 0; padding: 4px 0 8px; margin: 0; }
.th-l10-game { min-block-size: 44px; padding: 4px 6px; border-block-end: 4px solid var(--ds-line); }
.th-l10-game.won { border-block-end-color: var(--ds-ok); }
.th-l10-game.lost { border-block-end-color: var(--ds-live); }
.th-l10-score { padding: 0; border: 0; border-radius: 0; font: 700 var(--ds-fs-13) var(--ds-font-num); background: transparent; }
.th-l10-game.won .th-l10-score { color: var(--ds-ok); }
.th-l10-game.lost .th-l10-score { color: var(--ds-live); }
.th-l10-name { font: 500 var(--ds-fs-12) var(--ds-font); color: var(--ds-ink2); }
.th-l10-note { margin-block-end: 8px; font: 500 var(--ds-fs-13) var(--ds-font); color: var(--ds-ink2); }
.th-squad-silhouette { color: color-mix(in srgb, var(--ds-ink2) 55%, transparent); font-size: 0; overflow: hidden; }
.th-squad-silhouette svg { display: block; inline-size: 100%; block-size: 100%; }

/* The detail card and its dotted rows: shared with the player page (player_profile.js builds them too). */
.th-details-card { background: var(--ds-card); border: 1px solid var(--ds-line); margin-block-end: 14px; }
.th-detail-row { display: flex; align-items: center; gap: 0; min-block-size: 48px; padding: 0 16px; border-block-end: 1px solid var(--ds-line); font: 500 var(--ds-fs-15) var(--ds-font); }
.th-detail-row:last-child { border-block-end: 0; }
/* On a wide screen the name sits at one edge and its number at the other: alternate shading and a hover tint
   keep the eye on the same row (owner, 26.10: the number drifts away from "steals"). */
.th-detail-row:nth-child(even) { background: color-mix(in srgb, var(--ds-ink) 4%, transparent); }
.th-detail-row:hover { background: color-mix(in srgb, var(--ds-ink) 9%, transparent); }
.th-detail-k { color: var(--ds-ink2); font: 600 var(--ds-fs-14) var(--ds-font); }
.th-detail-v { margin-inline-start: auto; font: 700 var(--ds-fs-17) var(--ds-font-num); color: var(--ds-ink); direction: ltr; unicode-bidi: isolate; font-variant-numeric: tabular-nums; }
.th-today-game { margin-block-start: 12px; padding: 12px 16px; background: var(--ds-card); border: 1px solid var(--ds-line); font: 600 var(--ds-fs-15) var(--ds-font); }

/* The club's other competition: two buttons under the league name, the chosen one filled */
.th-twin { position: relative; display: flex; flex-wrap: wrap; gap: 8px; }
.th-twin-btn { min-block-size: 44px; padding: 0 16px; border: 1.5px solid currentColor; border-radius: 0; background: transparent; color: inherit; font: 800 var(--ds-fs-14) var(--ds-font); cursor: pointer; }
.th-twin-btn.is-on { background: var(--ds-card); border-color: var(--ds-card); color: var(--ds-ink); }
.th-header.has-field .th-twin-btn.is-on { background: var(--team-fg-l); border-color: var(--team-fg-l); color: var(--team-field-l); }
html[data-theme="dark"] .th-header.has-field .th-twin-btn.is-on { background: var(--team-fg-d); border-color: var(--team-fg-d); color: var(--team-field-d); }
.th-twin-btn:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }

/* The last-game card opens that game's page */
.th-lastgame.is-link { cursor: pointer; }
.th-lastgame.is-link:hover { background: var(--ds-soft); }
.th-lastgame.is-link:focus-visible { outline: 2px solid var(--ds-ink); outline-offset: 2px; }
.th-lastgame-go { display: inline-block; margin-block-start: 8px; font: 800 var(--ds-fs-13) var(--ds-font); color: var(--ds-ink2); text-decoration: underline; }

/* ── Stats tab, from the Claude Design "Stats" page: one category at a time, name and number together ── */
.th-stat-chips { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding-block-end: 2px; margin-block-end: 14px; }
.th-stat-chip { flex: none; display: inline-flex; align-items: center; min-block-size: 44px; padding: 0 14px; border: 1.5px solid var(--ds-line); border-radius: 0; background: var(--ds-card); color: var(--ds-ink); font: 700 var(--ds-fs-14)/1 var(--ds-font); white-space: nowrap; cursor: pointer; }
.th-stat-chip.is-on { background: var(--ds-ink); border-color: var(--ds-ink); color: var(--ds-card); }
.th-stat-chip:focus-visible, .th-stat-more:focus-visible { outline: 2px solid var(--ds-ink); outline-offset: 2px; }
.th-stat-cat { max-inline-size: 640px; }
.th-stat-cat-h { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 12px; padding-block-end: 8px; border-block-end: 1.5px solid var(--ds-ink); }
.th-stat-cat-h h3 { margin: 0; font: 900 var(--ds-fs-17)/1.4 var(--ds-font); color: var(--ds-ink); }
.th-stat-cat-h span { font: 600 var(--ds-fs-13)/1.4 var(--ds-font); color: var(--ds-ink2); }
.th-stat-list { list-style: none; margin: 0; padding: 0; }
.th-stat-row { display: grid; grid-template-columns: 24px minmax(0, 9.5rem) 52px minmax(0, 1fr); align-items: center; gap: 12px; min-block-size: 44px; border-block-end: 1px solid var(--ds-line); }
.th-stat-row.is-top { min-block-size: 56px; }
.th-stat-rank { font: 800 15px/1 var(--ds-font-num); color: var(--ds-ink2); text-align: center; }
.th-stat-name { min-width: 0; font: 600 15px/1.3 var(--ds-font); color: var(--ds-ink); overflow-wrap: anywhere; }
.th-stat-row.is-top .th-stat-name { font-weight: 800; font-size: 17px; }
.th-stat-val { font: 700 20px/1 var(--ds-font-num); color: var(--ds-ink); font-variant-numeric: tabular-nums; direction: ltr; text-align: start; }
.th-stat-row.is-top .th-stat-val { font-weight: 800; font-size: 28px; }
.th-stat-bar { display: block; min-width: 0; block-size: 10px; background: color-mix(in srgb, var(--ds-ink) 10%, var(--ds-card)); }
.th-stat-bar i { display: block; block-size: 100%; background: var(--ds-ink2); }
.th-stat-row.is-top .th-stat-bar i { background: var(--ds-ink); }
.th-stat-more { display: flex; align-items: center; justify-content: center; gap: 8px; inline-size: 100%; min-block-size: 48px; margin-block-start: 4px; border: 1.5px solid var(--ds-line); background: transparent; color: var(--ds-ink); font: 800 14px var(--ds-font); cursor: pointer; }
.th-stat-more:hover { border-color: var(--ds-ink); }

/* ── Games tab (Claude Design, 1.11): results main card + upcoming side card ── */
.th-sg { display: flex; flex-direction: column; gap: 16px; }
.th-sg .th-sgc--up { order: -1; }
.th-sgc { box-sizing: border-box; min-width: 0; display: flex; flex-direction: column; gap: 12px; background: var(--ds-card); border: 1px solid var(--ds-line); border-top: 2px solid var(--accent, var(--ds-ink)); padding: 14px 16px 18px; }
.th-sgc-h { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding-bottom: 10px; border-bottom: 1px solid var(--ds-line); }
.th-sgc-h h3 { margin: 0; font: 800 15px/1.3 var(--ds-font); }
.th-sgc-h span { font: 600 13px var(--ds-font); color: var(--ds-ink2); }
.th-sg-list { list-style: none; margin: 0; padding: 0; }
.th-sg-row { display: grid; align-items: center; gap: 12px; width: 100%; min-height: 52px; margin: 0; padding: 6px 2px; border: 0; border-bottom: 1px solid var(--ds-line); background: transparent; color: var(--ds-ink); font: inherit; text-align: start; cursor: pointer; }
.th-sg-row:disabled { cursor: default; }
.th-sg-row:hover:not(:disabled) { background: var(--ds-soft); }
.th-sg-row:focus-visible { outline: 2px solid var(--ds-ink); outline-offset: -2px; }
.th-sg-row--up { grid-template-columns: 48px 24px minmax(0, 1fr) 16px; }
.th-sg-row--res { grid-template-columns: 48px 24px minmax(0, 1fr) 28px 76px; }
.th-sg-row--res.in-run { padding-inline: 10px; box-shadow: inset -3px 0 0 var(--accent, var(--ds-ink)); }
html[dir="ltr"] .th-sg-row--res.in-run { box-shadow: inset 3px 0 0 var(--accent, var(--ds-ink)); }
.th-sg-date { font: 700 17px/1 var(--ds-font-num, var(--ds-font)); color: var(--ds-ink2); }
.th-sg-crest { width: 24px; height: 24px; }
.th-sg-opp { min-width: 0; font: 500 14px/1.35 var(--ds-font); color: var(--ds-ink2); overflow-wrap: anywhere; }
.th-sg-opp b { font: 800 15px var(--ds-font); color: var(--ds-ink); }
.th-sg-wl { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; box-sizing: border-box; font: 800 14px/1 var(--ds-font); border: 1.5px solid var(--ds-ink); color: var(--ds-ink); background: transparent; }
.th-sg-wl.won { background: var(--accent, var(--ds-ink)); border-color: var(--accent, var(--ds-ink)); color: var(--accent-fg, var(--ds-card)); }
.th-sg-score { white-space: nowrap; font: 800 20px/1 var(--ds-font-num, var(--ds-font)); font-variant-numeric: tabular-nums; unicode-bidi: isolate; text-align: end; }
.th-sg-streak { align-self: flex-start; display: inline-block; margin: 10px 0 2px; padding: 3px 8px; font: 800 12px/1.3 var(--ds-font); background: var(--accent, var(--ds-ink)); color: var(--accent-fg, var(--ds-card)); }
.th-sg li { display: flex; flex-direction: column; }
.th-sg-more { width: 100%; min-height: 48px; margin-top: 4px; border: 1.5px solid var(--ds-ink); background: transparent; color: var(--ds-ink); font: 800 14px var(--ds-font); cursor: pointer; }
.th-sg-more:hover { background: var(--ds-soft); }
.th-sg-month { border-bottom: 1px solid var(--ds-line); }
.th-sg-month summary { display: flex; align-items: center; justify-content: space-between; min-height: 44px; padding: 0 4px; font: 800 14px var(--ds-font); cursor: pointer; }
.th-sg-month summary span { font: 600 13px var(--ds-font); color: var(--ds-ink2); }
.th-sg-empty { margin: 0; font: 800 17px/1.4 var(--ds-font); }
@media (min-width: 760px) {
  .th-sg { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 20px; align-items: start; }
  .th-sg .th-sgc--up { order: 0; grid-column: 2; grid-row: 1; }
  .th-sg .th-sgc--res { grid-column: 1; grid-row: 1; }
  .th-sgc { padding: 18px 22px 22px; }
}

/* ── "Details" as one sheet (Claude Design, 1.11) ── */
.td-sheet { padding: 0 16px 28px; }
.td-sheet-in { max-width: 720px; margin: 0 auto; }
.td-sec-h { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 12px; padding: 30px 0 10px; border-bottom: 1.5px solid var(--ds-ink); }
.td-sheet-in > section:first-child .td-sec-h { padding-top: 22px; }
.td-sec-h h3 { margin: 0; font: 900 20px/1.3 var(--ds-font); color: var(--ds-ink); }
.td-sec-h span { font: 600 13px/1.4 var(--ds-font); color: var(--ds-ink2); }
.td-now { display: flex; flex-direction: column; gap: 12px; padding-top: 14px; }
.td-rec { font: 800 48px/1 var(--ds-font-num, var(--ds-font)); font-variant-numeric: tabular-nums; color: var(--ds-ink); text-align: start; }
.td-rec-sub { display: block; margin-top: 4px; font: 600 13px var(--ds-font); color: var(--ds-ink2); }
.td-cells { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 20px; }
.td-cell { display: flex; flex-direction: column; gap: 4px; padding-top: 12px; border-top: 1px solid var(--ds-line); }
.td-cell b { font: 800 28px/1 var(--ds-font-num, var(--ds-font)); color: var(--ds-ink); }
.td-cell > span { font: 600 13px/1.35 var(--ds-font); color: var(--ds-ink2); }
.td-wl { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; box-sizing: border-box; border: 1.5px solid var(--ds-ink); font: 800 14px/1 var(--ds-font); flex: none; }
.td-wl.is-win { background: var(--ds-ink); color: var(--ds-card); }
.td-wl.is-loss { background: transparent; color: var(--ds-ink); }
.td-score { direction: ltr; unicode-bidi: isolate; font: 800 20px/1 var(--ds-font-num, var(--ds-font)); font-variant-numeric: tabular-nums; white-space: nowrap; }
.td-last { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 14px 20px; padding: 16px 0; border-bottom: 1px solid var(--ds-line); }
.td-last-in { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; min-width: 0; }
.td-last .td-score { font-size: 40px; }
.td-last .td-wl { width: 36px; height: 36px; font-size: 18px; }
.td-last-t { font: 700 15px/1.35 var(--ds-font); }
.td-last-btn { flex: 1 1 100%; min-height: 44px; padding: 0 18px; border: 1.5px solid var(--ds-ink); background: transparent; color: var(--ds-ink); font: 800 14px/1 var(--ds-font); cursor: pointer; }
.td-last-btn:hover { background: var(--ds-ink); color: var(--ds-card); }
.td-list { list-style: none; margin: 0; padding: 0; }
.td-game { display: grid; grid-template-columns: 28px 24px minmax(0, 1fr) auto 16px; align-items: center; gap: 12px; width: 100%; min-height: 52px; padding: 6px 2px; border: 0; border-bottom: 1px solid var(--ds-line); background: transparent; color: var(--ds-ink); text-align: start; cursor: pointer; font: inherit; }
.td-game:hover:not(:disabled) { background: var(--ds-soft); }
.td-game:disabled { cursor: default; }
.td-game-name { min-width: 0; font: 600 15px/1.35 var(--ds-font); overflow-wrap: anywhere; }
.td-crest-sm { width: 24px; height: 24px; }
.td-titles { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 16px; padding: 14px 0 4px; }
.td-titles b { font: 800 16px/1.4 var(--ds-font); }
.td-years { display: flex; flex-wrap: wrap; gap: 4px 12px; direction: ltr; unicode-bidi: isolate; font: 700 20px/1.2 var(--ds-font-num, var(--ds-font)); color: var(--ds-ink2); }
.td-note { margin: 4px 0 0; font: 500 13px/1.5 var(--ds-font); color: var(--ds-ink2); }
.td-empty { margin: 0; padding: 16px 0; font: 700 15px var(--ds-font); }
@media (min-width: 600px) {
  .td-sheet { padding: 0 32px 40px; }
  .td-now { display: grid; grid-template-columns: minmax(0, 190px) minmax(0, 1fr); gap: 0 28px; align-items: start; }
  .td-rec { font-size: 56px; }
  .td-cells { grid-template-columns: repeat(4, minmax(0, 1fr)); padding-top: 14px; }
  .td-last-btn { flex: none; }
}