/**
 * Deet League — shared site chrome
 * Set data-page + --page-accent* via assets/js/site.js
 *
 * SITE-WIDE TYPE STANDARD:
 *   Body / prose  → Inter
 *   Titles        → Space Grotesk (.league-title, .section-title, h1–h3 display)
 *   Numbers/mono  → Inter + tabular-nums (no system mono)
 */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Space+Grotesk:wght@500;600;700&display=swap');
@import url('epl-club-pills.css');
@import url('player-search.css');

:root {
  /*
   * Dark-UI tokens (site-wide):
   *   Background  → deep charcoal (#121212 / #1F1F21)
   *   Text        → off-white (#F5F5F7 / #E0E0E0), never pure #FFF for chrome
   *   Accents     → one primary per page via --page-accent*
   * Default page theme = Home (soft off-white). Overridden per page via Site.applyPageAccent.
   */
  --page-accent: #F5F5F7;
  --page-accent-hover: #F5F5F7;
  --page-accent-dark: #F5F5F7;
  --surface: #121212;
  --surface-raised: #17171a;
  --surface-card: #1F1F21;
  --surface-inset: #0c0c0e;
  --border: #2a2a2e;
  --border-soft: #27272a;
  --text-primary: #F5F5F7;
  --text-secondary: #E0E0E0;
  --text-muted: #a1a1aa;
  --site-shell-max: 80rem;
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-page-y: 0.5rem;
  --space-page-end: 1rem;
  --space-section: 0.6rem;
  --space-stack: 0.35rem;
  --space-row: 0.4rem;
  --space-inline: 0.4rem;
  --radius-xs: 0.25rem;
  --radius-sm: 0.375rem;
  --radius-md: 0.5rem;
  --radius-lg: 0.75rem;
  --radius-xl: 1rem;
  --radius-2xl: 1.25rem;
  --radius-card: 1rem;
  --radius-panel: 1rem;
  --shadow-card: 0 1px 0 rgba(255, 255, 255, 0.035) inset, 0 12px 32px rgba(0, 0, 0, 0.28);
  --shadow-float: 0 16px 40px rgba(0, 0, 0, 0.38);

  /* Type stacks (canonical) */
  --font-body: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-title: 'Space Grotesk', system-ui, sans-serif;
  --font-num: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /*
   * Pill geometry (site-wide)
   * - Square pills (GW 1–38): corner radius as % of box → always proportional
   * - Label/rect pills (words, seasons): fixed rem ≈ 22% of control height
   */
  --pill-corner: 22%;
  --pill-radius-label: 0.375rem;
  --pill-radius-sm: 0.3rem;
  --logo-radius: 22%;
  --pill-control-h: 1.65rem;
  --gw-pill-gap: 3px;
  /*
   * SITE-WIDE PILL STANDARD (all pages, all pillboxes)
   * Idle:   hollow outline + accent text + weight 500
   * Active: solid accent fill + dark text (#09090b) + BOLD (700)
   */
  --pill-weight-idle: 500;
  --pill-weight-active: 700;
  --pill-text-active: #09090b;
}

html { color-scheme: dark; }

body {
  font-family: var(--font-body);
  /* Beat Tailwind bg-zinc-950 / text-zinc-200 so charcoal + off-white tokens win site-wide */
  background: var(--surface) !important;
  color: var(--text-secondary, #E0E0E0) !important;
}

/* Decorative page footers — only the last-updated line should show. */
footer:not(#deet-live-refresh-badge) {
  display: none !important;
}

#deet-live-refresh-badge {
  display: block;
  position: static;
  width: 100%;
  margin: 0;
  text-align: center;
  font-size: 10px;
  letter-spacing: 0.04em;
  padding: 0.7rem 0.75rem 1rem;
  color: #71717a;
  background: transparent;
  border-top: 1px solid rgba(63, 63, 70, 0.45);
}

/* Titles — Space Grotesk site-wide (page heads + section heads) */
.league-title,
.section-title,
h1,
h1.league-title,
h2.section-title,
h3.section-title {
  font-family: var(--font-title);
  letter-spacing: -0.04em;
}
/* Primary page titles: off-white, not pure #FFF */
.league-title {
  color: var(--text-primary, #F5F5F7);
}
.section-title {
  letter-spacing: -0.02em;
}

/*
 * Numbers / former mono — Inter everywhere (beats Tailwind .font-mono and local mono stacks)
 * tabular-nums keeps columns aligned without a monospace face.
 */
.font-mono,
.gw-pill,
.home-gw-pill,
.data-source-label,
.tabular-nums,
code.font-mono,
[class*="font-mono"] {
  font-family: var(--font-num) !important;
  font-variant-numeric: tabular-nums;
}

/* Logo D uses page accent; same 22% corner language as square pills */
.logo-d {
  background-color: var(--page-accent);
  color: var(--text-primary, #F5F5F7);
  border-radius: var(--logo-radius) !important;
  box-shadow: 0 0 0 1.5px color-mix(in srgb, var(--page-accent) 40%, transparent);
}

.year-badge {
  background: transparent;
  color: var(--page-accent);
  border: 1px solid var(--page-accent);
  border-radius: var(--pill-radius-sm);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Nav — each link uses its own --nav-theme (set in injectSiteNav), not page accent.
   ROCK SOLID: fixed font-weight/size/line-height/border so hover never reflows the header. */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  border-bottom: 1px solid var(--border-soft, #27272a);
  background: color-mix(in srgb, var(--surface) 88%, #000000);
  backdrop-filter: blur(16px) saturate(1.15);
  -webkit-backdrop-filter: blur(16px) saturate(1.15);
  box-shadow: 0 1px 0 color-mix(in srgb, var(--page-accent) 14%, transparent);
}
.site-header .site-nav .nav-link,
.site-header a.nav-link {
  /* Geometry locked — no font-weight / size / padding changes on hover or active */
  font-weight: 500 !important;
  font-size: 0.875rem !important;
  line-height: 1.25rem !important;
  letter-spacing: normal !important;
  transition: color 0.12s ease, border-color 0.12s ease, -webkit-text-fill-color 0.12s ease;
  white-space: nowrap;
  border-bottom: 2px solid transparent;
  padding-bottom: 2px;
  margin: 0;
  color: #d4d4d8;
  -webkit-text-fill-color: #d4d4d8;
  background: none !important;
  background-image: none !important;
  text-decoration: none;
  box-shadow: none !important;
  transform: none !important;
  scale: 1 !important;
}
.site-header .site-nav .nav-link:hover,
.site-header a.nav-link:hover {
  color: var(--nav-theme, #a1a1aa) !important;
  -webkit-text-fill-color: var(--nav-theme, #a1a1aa) !important;
  border-bottom-color: var(--nav-theme, transparent) !important;
  background: none !important;
  background-image: none !important;
  font-weight: 500 !important;
  transform: none !important;
}
.site-header .site-nav .nav-link.active,
.site-header a.nav-link.active {
  color: var(--nav-theme, var(--page-accent)) !important;
  -webkit-text-fill-color: var(--nav-theme, var(--page-accent)) !important;
  border-bottom-color: var(--nav-theme, var(--page-accent)) !important;
  background: none !important;
  background-image: none !important;
  font-weight: 500 !important;
  transform: none !important;
}

/* Exact nav theme hex locks (hover + active) — no color-mix, no gradients */
.site-header .site-nav .nav-link[data-nav="home"]:hover,
.site-header .site-nav .nav-link[data-nav="home"].active,
.site-header a.nav-link[data-nav="home"]:hover,
.site-header a.nav-link[data-nav="home"].active {
  color: #F5F5F7 !important;
  -webkit-text-fill-color: #F5F5F7 !important;
  border-bottom-color: #F5F5F7 !important;
}
.site-header .site-nav .nav-link[data-nav="gaffers"]:hover,
.site-header .site-nav .nav-link[data-nav="gaffers"].active,
.site-header a.nav-link[data-nav="gaffers"]:hover,
.site-header a.nav-link[data-nav="gaffers"].active {
  color: #44B0F5 !important;
  -webkit-text-fill-color: #44B0F5 !important;
  border-bottom-color: #44B0F5 !important;
}
.site-header .site-nav .nav-link[data-nav="dcl"]:hover,
.site-header .site-nav .nav-link[data-nav="dcl"].active,
.site-header a.nav-link[data-nav="dcl"]:hover,
.site-header a.nav-link[data-nav="dcl"].active {
  color: #F872F8 !important;
  -webkit-text-fill-color: #F872F8 !important;
  border-bottom-color: #F872F8 !important;
}
/* Records: gold/silver metallic prestige sheen (text only).
   Underline stays solid gold. Font weight/size locked — no header bloating. */
.site-header .site-nav .nav-link[data-nav="records"]:hover,
.site-header .site-nav .nav-link[data-nav="records"].active,
.site-header a.nav-link[data-nav="records"]:hover,
.site-header a.nav-link[data-nav="records"].active {
  background-image: linear-gradient(
    115deg,
    #f2eee4 0%,
    #e0d294 22%,
    #CEAE47 45%,
    #f0f0f0 55%,
    #c4a842 72%,
    #e0d294 100%
  ) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  color: transparent !important;
  -webkit-text-fill-color: transparent !important;
  border-bottom-color: #CEAE47 !important;
  font-weight: 500 !important;
  font-size: 0.875rem !important;
  line-height: 1.25rem !important;
  transform: none !important;
}
.site-header .site-nav .nav-link[data-nav="explorer"]:hover,
.site-header .site-nav .nav-link[data-nav="explorer"].active,
.site-header a.nav-link[data-nav="explorer"]:hover,
.site-header a.nav-link[data-nav="explorer"].active {
  color: #16F3AE !important;
  -webkit-text-fill-color: #16F3AE !important;
  border-bottom-color: #16F3AE !important;
}
.site-header .site-nav .nav-link[data-nav="owners"]:hover,
.site-header .site-nav .nav-link[data-nav="owners"].active,
.site-header a.nav-link[data-nav="owners"]:hover,
.site-header a.nav-link[data-nav="owners"].active,
.site-header .site-nav .nav-link[data-nav="signin"]:hover,
.site-header .site-nav .nav-link[data-nav="signin"].active,
.site-header a.nav-link[data-nav="signin"]:hover,
.site-header a.nav-link[data-nav="signin"].active {
  color: #9F9FFA !important;
  -webkit-text-fill-color: #9F9FFA !important;
  border-bottom-color: #9F9FFA !important;
}

/* ---- Per-page theme locks (exact hex; match header + page chrome) ---- */
html[data-page="home"] {
  --page-accent: #F5F5F7;
  --page-accent-hover: #F5F5F7;
  --page-accent-dark: #F5F5F7;
}
html[data-page="home"] .logo-d {
  background-color: #F5F5F7 !important;
  color: #121212 !important; /* dark D on off-white for contrast */
}
html[data-page="home"] .logo-d span { color: #121212 !important; }
html[data-page="home"] .year-badge {
  color: #F5F5F7 !important;
  border: 1px solid #F5F5F7;
  background: transparent !important;
}

html[data-page="gaffers"] {
  --page-accent: #44B0F5;
  --page-accent-hover: #44B0F5;
  --page-accent-dark: #44B0F5;
}
html[data-page="gaffers"] .logo-d { background-color: #44B0F5 !important; }
html[data-page="gaffers"] .year-badge {
  color: #44B0F5 !important;
  border: 1px solid #44B0F5;
  background: transparent !important;
}

html[data-page="dcl"] {
  --page-accent: #F872F8;
  --page-accent-hover: #F872F8;
  --page-accent-dark: #F872F8;
}
html[data-page="dcl"] .logo-d { background-color: #F872F8 !important; }
html[data-page="dcl"] .year-badge {
  color: #F872F8 !important;
  border: 1px solid #F872F8;
  background: transparent !important;
}

html[data-page="records"] {
  --page-accent: #CEAE47;
  --page-accent-hover: #CEAE47;
  --page-accent-dark: #CEAE47;
}
html[data-page="records"] .logo-d { background-color: #CEAE47 !important; }
html[data-page="records"] .year-badge {
  color: #CEAE47 !important;
  border: 1px solid #CEAE47;
  background: transparent !important;
}

html[data-page="explorer"] {
  --page-accent: #16F3AE;
  --page-accent-hover: #16F3AE;
  --page-accent-dark: #16F3AE;
}
html[data-page="explorer"] .logo-d {
  background-color: #16F3AE !important;
}
html[data-page="explorer"] .year-badge {
  color: #16F3AE !important;
  border: 1px solid #16F3AE;
  background: transparent !important;
}
/* PE page: accent locks only — hollow/solid geometry comes from global pill rules */
html[data-page="explorer"] .site-pill,
html[data-page="explorer"] .filter-chip,
html[data-page="explorer"] .label-pill,
html[data-page="explorer"] .filter-pill,
html[data-page="explorer"] .pe-season-pill,
html[data-page="explorer"] .main-tab,
html[data-page="explorer"] .gw-pill {
  border-color: #16F3AE;
  color: #16F3AE;
}
html[data-page="explorer"] .site-pill.active,
html[data-page="explorer"] .filter-chip.active,
html[data-page="explorer"] .filter-pill.active,
html[data-page="explorer"] .main-tab.active,
html[data-page="explorer"] .pe-filter-on,
html[data-page="explorer"] .gw-pill.active,
html[data-page="explorer"] .pe-season-pill.active,
html[data-page="explorer"] .season-pill-active,
html[data-page="explorer"] button.site-pill.active {
  background: #16F3AE !important;
  border-color: #16F3AE !important;
  color: var(--pill-text-active, #09090b) !important;
  -webkit-text-fill-color: var(--pill-text-active, #09090b) !important;
  font-weight: var(--pill-weight-active, 700) !important;
}
html[data-page="explorer"] .pe-player-link,
html[data-page="explorer"] a.pe-player-link,
html[data-page="explorer"] .accent-text,
html[data-page="explorer"] .pe-stat-label {
  color: #16F3AE !important;
}
html[data-page="explorer"] .pe-player-link:hover,
html[data-page="explorer"] a.pe-player-link:hover {
  color: #16F3AE !important;
  filter: brightness(1.08);
}

html[data-page="owners"] {
  --page-accent: #9F9FFA;
  --page-accent-hover: #9F9FFA;
  --page-accent-dark: #9F9FFA;
}
html[data-page="owners"] .pp-unit-line .pp-graph-info .pp-info-axis,
html[data-page="owners"] .pp-flywheel-info .pp-info-axis {
  color: #9F9FFA;
}
html[data-page="owners"] .pp-dw-list-row:hover,
html[data-page="owners"] .pp-dw-list-row.is-active,
html[data-page="owners"] .pp-dw-list-row.is-active:hover {
  background: color-mix(in srgb, #9F9FFA 12%, transparent) !important;
  border: none !important;
  border-bottom: 1px solid #1a1a1e !important;
  box-shadow: none !important;
}
html[data-page="owners"] .pp-graph-info.is-pinned,
html[data-page="owners"] .pp-flywheel-info.is-pinned {
  border-color: color-mix(in srgb, #9F9FFA 55%, #3f3f46);
  box-shadow: 0 0 0 1px color-mix(in srgb, #9F9FFA 22%, transparent);
}
html[data-page="owners"] .pp-graph-info.is-hover,
html[data-page="owners"] .pp-flywheel-info.is-hover {
  border-color: color-mix(in srgb, #9F9FFA 40%, #3f3f46);
}
html[data-page="owners"] .pp-info-v.pp-info-accent {
  color: #9F9FFA;
}
html[data-page="owners"] .dpl-graph-os.pp-unit-line {
  grid-template-columns: minmax(0, 1fr) minmax(17.5rem, 20.5rem);
}
html[data-page="owners"] .logo-d { background-color: #9F9FFA !important; }
html[data-page="owners"] .year-badge {
  color: #9F9FFA !important;
  border: 1px solid #9F9FFA;
  background: transparent !important;
}

/* --------------------------------------------------------------------------
 * Label / phrase pills (seasons, filters, tags, main tabs)
 * CANONICAL SITE-WIDE STANDARD:
 *   IDLE   = hollow: transparent fill, solid accent border, accent text, weight 500
 *   ACTIVE = solid: accent fill, accent border, dark text (#09090b), BOLD 700
 * Applies to every page via --page-accent. Do not reintroduce filled idle chips
 * or non-bold selected text in page-local CSS.
 * -------------------------------------------------------------------------- */
.site-pill,
.filter-chip,
.label-pill,
.season-pill-active,
.season-pill-idle,
.pe-season-pill,
.filter-pill,
.main-tab,
.pe-filter-off {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  min-height: var(--pill-control-h);
  padding: 0.28rem 0.75rem;
  font-size: 0.8125rem;
  font-weight: var(--pill-weight-idle, 500);
  line-height: 1.2;
  white-space: nowrap;
  /* Force rect corners over any utility class on the same element */
  border-radius: var(--pill-radius-label) !important;
  /* IDLE — hollow outline */
  border: 1.5px solid var(--page-accent);
  background: transparent;
  color: var(--page-accent);
  -webkit-text-fill-color: var(--page-accent);
  cursor: pointer;
  transition: background 0.1s, border-color 0.1s, color 0.1s, -webkit-text-fill-color 0.1s;
  user-select: none;
}
.site-pill:hover,
.filter-chip:hover,
.label-pill:hover,
.season-pill-idle:hover,
.pe-season-pill:hover,
.filter-pill:hover,
.main-tab:hover,
.pe-filter-off:hover {
  /* Color wash only — geometry (padding, weight, border) stays put */
  background: color-mix(in srgb, var(--page-accent) 10%, transparent);
  border-color: var(--page-accent);
  color: var(--page-accent);
  -webkit-text-fill-color: var(--page-accent);
  transform: none;
}
.main-tab:hover:not(.active) {
  font-weight: 600;
}
.site-pill:hover:not(.active),
.filter-chip:hover:not(.active),
.filter-pill:hover:not(.active),
.pe-season-pill:hover:not(.active),
.label-pill:hover:not(.active) {
  font-weight: var(--pill-weight-idle, 500);
}
/* SELECTED — solid + dark + BOLD (beats Tailwind font-medium / font-semibold) */
.site-pill.active,
.filter-chip.active,
.label-pill.active,
.season-pill-active,
.pe-season-pill.active,
.filter-pill.active,
.main-tab.active,
.pe-filter-on,
button.site-pill.active,
a.site-pill.active,
.site-pill.active.font-medium,
.site-pill.active.font-semibold,
.site-pill.active.font-bold,
.filter-pill.active.font-medium,
.main-tab.active.font-semibold,
.main-tab.active.font-medium {
  background: var(--page-accent) !important;
  border-color: var(--page-accent) !important;
  color: var(--pill-text-active, #09090b) !important;
  -webkit-text-fill-color: var(--pill-text-active, #09090b) !important;
  font-weight: var(--pill-weight-active, 700) !important;
}
/* Legacy idle season chips (player pages) — same hollow pattern */
.season-pill-idle {
  background: transparent !important;
  border: 1.5px solid var(--page-accent) !important;
  color: var(--page-accent) !important;
  -webkit-text-fill-color: var(--page-accent) !important;
  font-weight: var(--pill-weight-idle, 500) !important;
}
.season-pill-active {
  background: var(--page-accent) !important;
  border-color: var(--page-accent) !important;
  color: var(--pill-text-active, #09090b) !important;
  -webkit-text-fill-color: var(--pill-text-active, #09090b) !important;
  font-weight: var(--pill-weight-active, 700) !important;
}

/*
 * Records chrome: Full list button height (--pill-control-h) is the
 * standard for search bars, Full list / Graph links, and selection pills.
 */
html[data-page="records"] .pr-full-link,
html[data-page="records"] a.pr-g-full,
html[data-page="records"] .tr-full-link,
html[data-page="records"] .pr-mode-pill,
html[data-page="records"] .pr-g-x-mode,
html[data-page="records"] .pr-g-y-mode,
html[data-page="records"] .pr-g-metric-mode,
html[data-page="records"] .pr-g-btn,
html[data-page="records"] .tr-mode-pill,
html[data-page="records"] .tr-view-pill,
html[data-page="records"] .cl-ctrl-pills .site-pill,
html[data-page="records"] .cl-cat-row .site-pill,
html[data-page="records"] .pr-toolbar input[type="search"],
html[data-page="records"] .pr-toolbar input[type="text"],
html[data-page="records"] .pr-g-search-row input[type="search"],
html[data-page="records"] .pr-g-search-row input[type="text"],
html[data-page="records"] .pr-full-search input,
html[data-page="records"] .dl-search-field input {
  box-sizing: border-box;
  height: var(--pill-control-h);
  min-height: var(--pill-control-h);
  max-height: var(--pill-control-h);
}
html[data-page="records"] .cl-ctrl-pills .site-pill,
html[data-page="records"] .cl-cat-row .site-pill,
html[data-page="records"] .pr-mode-pill,
html[data-page="records"] .pr-g-x-mode,
html[data-page="records"] .pr-g-y-mode,
html[data-page="records"] .pr-g-metric-mode,
html[data-page="records"] .pr-g-btn,
html[data-page="records"] .tr-mode-pill,
html[data-page="records"] .tr-view-pill,
html[data-page="records"] .pr-full-link,
html[data-page="records"] a.pr-g-full,
html[data-page="records"] .tr-full-link {
  padding-top: 0;
  padding-bottom: 0;
  line-height: 1;
}
html[data-page="records"] .pr-toolbar input[type="search"],
html[data-page="records"] .pr-toolbar input[type="text"],
html[data-page="records"] .pr-g-search-row input[type="search"],
html[data-page="records"] .pr-g-search-row input[type="text"],
html[data-page="records"] .pr-full-search input,
html[data-page="records"] .dl-search-field input {
  padding-top: 0;
  padding-bottom: 0;
}

/* Larger main section tabs (e.g. PE Master / Season / Gameweek) — idle medium-bold; selected still 700 */
.main-tab {
  min-height: 2.25rem;
  padding: 0.5rem 1.25rem;
  font-size: 1.125rem;
  font-weight: 600;
}
.main-tab.active {
  font-weight: var(--pill-weight-active, 700) !important;
}

/* Season label pills: ~33% less horizontal padding than default site-pill (0.75rem → 0.5rem) */
.site-pill.season-pill-active,
.site-pill.season-pill-idle,
.season-pill-active,
.season-pill-idle,
.pe-season-pill,
#team-season-pills .site-pill,
#archive-season-pills .site-pill,
#season-pills .site-pill,
#season-pills .pe-season-pill,
#gw-season-pills .site-pill,
#gw-season-pills .pe-season-pill,
#hist-season-pills .site-pill,
#hist-season-pills .pe-season-pill,
#player-season-pills .site-pill,
#player-season-pills button {
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}

/* Compact single-character chips (F / M / D / G) — square, same corner ratio */
.filter-chip.chip-square,
.site-pill.chip-square {
  min-width: var(--pill-control-h);
  width: var(--pill-control-h);
  padding-left: 0;
  padding-right: 0;
  border-radius: var(--pill-corner);
  aspect-ratio: 1 / 1;
}

/* Neutral = idle hollow (alias kept for markup using .neutral instead of lacking .active) */
.site-pill.neutral,
.filter-chip.neutral {
  border: 1.5px solid var(--page-accent);
  background: transparent;
  color: var(--page-accent);
  -webkit-text-fill-color: var(--page-accent);
}
.site-pill.neutral:hover,
.filter-chip.neutral:hover {
  background: color-mix(in srgb, var(--page-accent) 10%, transparent);
  border-color: var(--page-accent);
  color: var(--page-accent);
  -webkit-text-fill-color: var(--page-accent);
}

/* --------------------------------------------------------------------------
 * Gameweek 1–38 pills — perfect squares, identical site-wide
 * Use .gw-pills (or #period-pills / #home-gw-pills) as the row container.
 * Unified nav: .gw-nav (arrows same size as pills; ← @ col1, → @ col5).
 * -------------------------------------------------------------------------- */
.gw-pills,
.gw-nav-bar,
#period-pills,
#home-gw-pills {
  display: grid;
  grid-template-columns: repeat(38, minmax(0, 1fr));
  gap: var(--gw-pill-gap);
  width: 100%;
}

.gw-nav {
  width: 100%;
  min-width: 0;
}
.gw-nav-bar {
  align-items: center;
  margin-bottom: 0.4rem;
}
/* Arrow pills: ← on track 1, → on track 6 (room for “Gameweek N” in 2–5) */
.gw-nav-bar .gw-nav-arrow[data-gw-nav="prev"] {
  grid-column: 1;
}
.gw-nav-bar .gw-nav-arrow[data-gw-nav="next"] {
  grid-column: 6;
}
.gw-nav-label {
  grid-column: 2 / 6;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  min-width: 0;
  font-size: clamp(0.7rem, 1.4vw, 0.85rem);
  line-height: 1.2;
  white-space: nowrap;
  user-select: none;
}
.gw-nav-label-k {
  color: #71717a;
  font-weight: 500;
}
.gw-nav-label-n {
  font-family: var(--font-num);
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  color: var(--page-accent);
  min-width: 1.25rem;
  text-align: center;
}
.gw-nav-meta {
  grid-column: 7 / -1;
  min-width: 0;
  padding-left: 0.35rem;
  font-size: clamp(0.65rem, 1.2vw, 0.8rem);
  color: #a1a1aa;
  font-family: var(--font-num);
  font-variant-numeric: tabular-nums;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* Arrow buttons reuse .gw-pill square; slightly larger glyph for balance */
.gw-pill.gw-nav-arrow {
  font-size: clamp(0.65rem, 1.25vw, 0.85rem);
  font-weight: 600;
  text-decoration: none !important;
}
.gw-pill.gw-nav-arrow:disabled {
  opacity: 0.35;
  cursor: not-allowed;
  pointer-events: none;
}
.gw-nav .gw-pills {
  /* nested pills row already full width */
}

.gw-pill,
.home-gw-pill {
  font-family: var(--font-num);
  font-size: clamp(0.55rem, 1.1vw, 0.7rem);
  font-variant-numeric: tabular-nums;
  font-weight: var(--pill-weight-idle, 500);
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  aspect-ratio: 1 / 1;
  height: auto;
  padding: 0;
  margin: 0;
  text-align: center;
  /* % radius is relative to the element box → same look on every square size */
  border-radius: var(--pill-corner);
  /* IDLE — hollow accent outline (same language as label pills) */
  border: 1.5px solid var(--page-accent);
  background: transparent;
  color: var(--page-accent);
  -webkit-text-fill-color: var(--page-accent);
  cursor: pointer;
  transition: background 0.1s, border-color 0.1s, color 0.1s, -webkit-text-fill-color 0.1s;
  user-select: none;
}
.gw-pill:hover,
.home-gw-pill:hover {
  background: color-mix(in srgb, var(--page-accent) 10%, transparent);
  color: var(--page-accent);
  -webkit-text-fill-color: var(--page-accent);
  border-color: var(--page-accent);
  font-weight: var(--pill-weight-idle, 500);
}
.gw-pill.active,
.home-gw-pill.active,
button.gw-pill.active,
button.home-gw-pill.active {
  background: var(--page-accent) !important;
  border-color: var(--page-accent) !important;
  color: var(--pill-text-active, #09090b) !important;
  -webkit-text-fill-color: var(--pill-text-active, #09090b) !important;
  font-weight: var(--pill-weight-active, 700) !important;
}
.gw-pill.missing,
.home-gw-pill.missing {
  opacity: 0.42;
  background: transparent;
  border-color: color-mix(in srgb, var(--page-accent) 35%, #3f3f46);
  color: color-mix(in srgb, var(--page-accent) 45%, #71717a);
  -webkit-text-fill-color: color-mix(in srgb, var(--page-accent) 45%, #71717a);
  text-decoration: line-through;
}

@media (max-width: 900px) {
  .gw-pills,
  .gw-nav-bar,
  #period-pills,
  #home-gw-pills {
    grid-template-columns: repeat(19, minmax(0, 1fr));
  }
}
@media (max-width: 520px) {
  .gw-pills,
  .gw-nav-bar,
  #period-pills,
  #home-gw-pills {
    grid-template-columns: repeat(10, minmax(0, 1fr));
  }
  .gw-nav-label {
    font-size: 0.7rem;
  }
  .gw-nav-meta {
    display: none; /* date still available elsewhere on most pages */
  }
}

/* --------------------------------------------------------------------------
 * FINAL PILL STANDARD LOCK — last word for selected bold + solid fill
 * Any page-local Tailwind (font-medium/semibold) must not undo this.
 * -------------------------------------------------------------------------- */
.site-pill.active,
.filter-chip.active,
.label-pill.active,
.season-pill-active,
.pe-season-pill.active,
.filter-pill.active,
.main-tab.active,
.pe-filter-on,
.gw-pill.active,
.home-gw-pill.active,
button.site-pill.active,
a.site-pill.active,
button.filter-pill.active,
button.gw-pill.active,
button.home-gw-pill.active,
#team-season-pills .site-pill.active,
#archive-season-pills .site-pill.active,
#season-pills .site-pill.active,
#gw-season-pills .site-pill.active,
#gg-2025-view-pills .site-pill.active,
#tab-team.site-pill.active,
#tab-player.site-pill.active {
  font-weight: var(--pill-weight-active, 700) !important;
  color: var(--pill-text-active, #09090b) !important;
  -webkit-text-fill-color: var(--pill-text-active, #09090b) !important;
}

/* --------------------------------------------------------------------------
 * Role badges (Start / RES / IR) — same design language as .pos-badge
 * Outline + soft tint; fixed height; width grows with label (rounded rect).
 * -------------------------------------------------------------------------- */
.role-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  min-height: 1.5rem;
  height: 1.5rem;
  min-width: 2.65rem;
  padding: 0 0.45rem;
  margin: 0;
  border-radius: var(--pill-radius-label, 0.375rem);
  font-size: 0.625rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  line-height: 1;
  font-family: inherit;
  text-transform: uppercase;
  border: 1.5px solid;
  background: transparent;
  flex-shrink: 0;
  user-select: none;
  white-space: nowrap;
}
/* XI (Start) — same hot green as standings Champion */
.role-badge.role-start {
  color: #16F38C;
  border-color: #16F38C;
  background: rgba(0, 255, 136, 0.1);
}
/* RES — yellow with a hint of orange (+10% yellow) */
.role-badge.role-res {
  color: #fcd34d;
  border-color: #fbbf24;
  background: rgba(252, 211, 77, 0.12);
}
/* IR — same hot red as standings Punishment */
.role-badge.role-ir {
  color: #F53D3D;
  border-color: #F53D3D;
  background: rgba(255, 42, 42, 0.1);
}
/* Unknown */
.role-badge.role-unknown {
  color: #71717a;
  border-color: #3f3f46;
  background: rgba(63, 63, 70, 0.2);
}

/* --------------------------------------------------------------------------
 * Position badges (G / D / M / F) — rounded squares, shared XI + roster
 * Outline-style on dark UI; same geometry as square site pills.
 * -------------------------------------------------------------------------- */
.pos-badge,
.pos-pill,
.xi-pos-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 1.5rem;
  height: 1.5rem;
  min-width: 1.5rem;
  min-height: 1.5rem;
  padding: 0;
  margin: 0;
  border-radius: var(--pill-corner, 22%);
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  line-height: 1;
  font-family: inherit;
  border: 1.5px solid;
  background: transparent;
  flex-shrink: 0;
  user-select: none;
}
/* G — electric lime yellow-green */
.pos-badge.pos-G,
.pos-pill.pos-G,
.xi-pos-G .xi-pos-mark,
.xi-pos-mark.pos-G {
  color: #c8ff00;
  border-color: #c8ff00;
  background: rgba(200, 255, 0, 0.1);
}
/* D — violet */
.pos-badge.pos-D,
.pos-pill.pos-D,
.xi-pos-D .xi-pos-mark,
.xi-pos-mark.pos-D {
  color: #a78bfa;
  border-color: #a78bfa;
  background: rgba(167, 139, 250, 0.08);
}
/* M — strong orange (former F) */
.pos-badge.pos-M,
.pos-pill.pos-M,
.xi-pos-M .xi-pos-mark,
.xi-pos-mark.pos-M {
  color: #ff8500;
  border-color: #ff8500;
  background: rgba(255, 133, 0, 0.12);
}
/* F — coral pink */
.pos-badge.pos-F,
.pos-pill.pos-F,
.xi-pos-F .xi-pos-mark,
.xi-pos-mark.pos-F {
  color: #FF647F;
  border-color: #FF647F;
  background: rgba(255, 100, 127, 0.12);
}
/* Unknown / other */
.pos-badge.pos-unknown,
.pos-pill.pos-unknown {
  color: #a1a1aa;
  border-color: #52525b;
  background: rgba(161, 161, 170, 0.06);
}

/* Admin / export disclosure */
.admin-export {
  margin-top: 1.5rem;
  padding: 0.75rem 1rem;
  border: 1px dashed #3f3f46;
  border-radius: 0.75rem;
  background: #0c0c0e;
  font-size: 12px;
  color: #a1a1aa;
}
.admin-export summary {
  cursor: pointer;
  color: #71717a;
  font-weight: 500;
}
.admin-export summary:hover { color: #a1a1aa; }

/* Player page: club fixture rows where the player did not play (stats 0) */
.pe-dnp-row {
  opacity: 0.85;
}
.pe-dnp-row td {
  font-style: normal;
}
.pe-dnp-row:hover {
  opacity: 1;
}

/*
 * Player log table — columns size to content (1-line cells),
 * horizontal scroll when needed; strong zebra; sortable headers.
 * Sticky colheads + career totals: solid opaque plates (DW list standard).
 */
.pe-table-card {
  width: 100%;
  box-sizing: border-box;
  background: #09090b;
  border-color: #27272a;
}
/* Tables tab: Stats | Clubs | Scoring Categories view pills */
.pe-table-view-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 0.45rem;
  margin: 0 0 0.55rem 0;
  padding: 0.15rem 0.1rem 0.35rem;
  border-bottom: 1px solid #27272a;
}
.pe-table-view-bar .pe-tv-label {
  margin-right: 0.15rem;
  font-size: 0.65rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #71717a;
}
.pe-table-view-bar .pe-tv-pill,
.pe-table-view-bar .pe-sc-pill {
  font-size: 0.72rem;
  min-height: var(--pill-control-h, 1.65rem);
  padding: 0.2rem 0.55rem;
  cursor: pointer;
}
/* Active state inherits site-wide solid pill standard (.site-pill.active) — do not soft-wash */

/* --------------------------------------------------------------------------
 * Site custom dropdown (.site-dd) — never native <select>
 * Trigger: site-pill language. Default = hollow; engaged (non-default value)
 * = solid (filter is live). Open = chevron flip + panel. Option selected = solid.
 * -------------------------------------------------------------------------- */
.site-dd {
  position: relative;
  display: inline-flex;
  vertical-align: middle;
  z-index: 1;
}
.site-dd.is-open {
  z-index: 45;
}
.site-dd-trigger {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.4rem;
  min-height: var(--pill-control-h, 1.65rem);
  min-width: 5.5rem;
  padding: 0.2rem 0.5rem 0.2rem 0.65rem;
  font-size: 0.72rem;
  font-weight: var(--pill-weight-idle, 500);
  font-family: var(--font-body, Inter, system-ui, sans-serif);
  line-height: 1.2;
  white-space: nowrap;
  border-radius: var(--pill-radius-label, 0.375rem) !important;
  border: 1.5px solid var(--page-accent);
  background: transparent;
  color: var(--page-accent);
  -webkit-text-fill-color: var(--page-accent);
  cursor: pointer;
  transition: background 0.1s, border-color 0.1s, color 0.1s, box-shadow 0.12s, font-weight 0.1s;
  user-select: none;
  box-sizing: border-box;
}
.site-dd-trigger:hover {
  background: color-mix(in srgb, var(--page-accent) 10%, transparent);
}
.site-dd-trigger:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--page-accent) 40%, transparent);
}
/* Engaged = non-default selection → solid (filter is active / state carries meaning) */
.site-dd.is-engaged > .site-dd-trigger {
  background: var(--page-accent) !important;
  border-color: var(--page-accent) !important;
  color: var(--pill-text-active, #09090b) !important;
  -webkit-text-fill-color: var(--pill-text-active, #09090b) !important;
  font-weight: var(--pill-weight-active, 700) !important;
}
.site-dd.is-open > .site-dd-trigger {
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--page-accent) 35%, transparent);
}
.site-dd-value {
  flex: 1 1 auto;
  text-align: left;
  min-width: 0;
}
.site-dd-meta {
  display: none;
  font-size: 0.58rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  opacity: 0.75;
  margin-left: 0.15rem;
}
.site-dd.is-engaged .site-dd-meta {
  display: inline;
  opacity: 0.85;
}
.site-dd-chevron {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 0.95rem;
  height: 0.95rem;
  font-size: 0.55rem;
  line-height: 1;
  border-radius: var(--pill-radius-sm, 0.3rem);
  border: 1px solid currentColor;
  opacity: 0.85;
  transition: transform 0.12s ease, opacity 0.1s;
}
.site-dd.is-open .site-dd-chevron {
  transform: rotate(180deg);
  opacity: 1;
}
.site-dd-menu {
  display: none;
  position: absolute;
  top: calc(100% + 0.3rem);
  left: 0;
  min-width: 100%;
  width: max-content;
  max-width: 14rem;
  padding: 0.35rem;
  border-radius: var(--pill-radius-label, 0.375rem);
  border: 1.5px solid #3f3f46;
  background: #121214;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.55), 0 0 0 1px color-mix(in srgb, var(--page-accent) 12%, transparent);
  z-index: 50;
  /* Finite option list — never clip / scroll; every choice at a glance */
  max-height: none !important;
  overflow: visible !important;
}
.site-dd.is-open > .site-dd-menu {
  display: flex;
  flex-direction: column;
  gap: 0.22rem;
  max-height: none !important;
  overflow: visible !important;
}

/*
 * SITE STANDARD — finite-option dropdowns never scroll.
 * Use .site-finite-menu (or the selectors below) for any closed option set
 * (seasons, GW, months, positions, measure modes, owner/team filters, etc.).
 * Unbounded lists (search hits, long tables) may still scroll.
 */
.site-finite-menu,
.site-dd-menu,
.ml-win-pick-menu,
.ml-cal-pick-menu,
.tr-filter-menu,
.ml-pos-filter-panel .ml-pos-filter-grid,
.pe-club-filter-grid,
.ml-portal-panel .pe-club-filter-grid {
  max-height: none !important;
  overflow: visible !important;
  overflow-x: visible !important;
  overflow-y: visible !important;
  scrollbar-width: none;
}
.site-finite-menu::-webkit-scrollbar,
.site-dd-menu::-webkit-scrollbar,
.ml-win-pick-menu::-webkit-scrollbar,
.ml-cal-pick-menu::-webkit-scrollbar,
.tr-filter-menu::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}
.site-dd-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.65rem;
  width: 100%;
  min-height: 1.55rem;
  padding: 0.28rem 0.55rem;
  font-size: 0.72rem;
  font-weight: var(--pill-weight-idle, 500);
  font-family: var(--font-body, Inter, system-ui, sans-serif);
  text-align: left;
  border-radius: var(--pill-radius-sm, 0.3rem);
  border: 1.5px solid var(--page-accent);
  background: transparent;
  color: var(--page-accent);
  -webkit-text-fill-color: var(--page-accent);
  cursor: pointer;
  transition: background 0.1s, color 0.1s, font-weight 0.1s;
  box-sizing: border-box;
}
.site-dd-option:hover {
  background: color-mix(in srgb, var(--page-accent) 12%, transparent);
}
.site-dd-option.is-selected {
  background: var(--page-accent) !important;
  border-color: var(--page-accent) !important;
  color: var(--pill-text-active, #09090b) !important;
  -webkit-text-fill-color: var(--pill-text-active, #09090b) !important;
  font-weight: var(--pill-weight-active, 700) !important;
}
.site-dd-option-label {
  flex: 1 1 auto;
}
.site-dd-option-hint {
  flex: 0 0 auto;
  font-size: 0.58rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  opacity: 0.55;
  color: #a1a1aa;
  -webkit-text-fill-color: #a1a1aa;
}
.site-dd-option.is-selected .site-dd-option-hint {
  opacity: 0.75;
  color: var(--pill-text-active, #09090b);
  -webkit-text-fill-color: var(--pill-text-active, #09090b);
}
.site-dd-option-mark {
  flex: 0 0 auto;
  width: 0.7rem;
  font-size: 0.65rem;
  font-weight: 700;
  opacity: 0;
}
.site-dd-option.is-selected .site-dd-option-mark {
  opacity: 1;
}
/* Compact in PE toolbars */
.pe-table-view-bar .site-dd-trigger {
  font-size: 0.72rem;
  min-height: var(--pill-control-h, 1.65rem);
}
html[data-page="explorer"] .site-dd-trigger,
html[data-page="explorer"] .site-dd-option {
  border-color: #16F3AE;
  color: #16F3AE;
  -webkit-text-fill-color: #16F3AE;
}
html[data-page="explorer"] .site-dd.is-engaged > .site-dd-trigger,
html[data-page="explorer"] .site-dd-option.is-selected {
  background: #16F3AE !important;
  border-color: #16F3AE !important;
  color: var(--pill-text-active, #09090b) !important;
  -webkit-text-fill-color: var(--pill-text-active, #09090b) !important;
}

.pe-sc-modes {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.3rem;
  margin: 0;
  padding: 0;
  min-height: var(--pill-control-h, 1.65rem);
}
.pe-sc-modes[hidden] {
  display: none !important;
}
/* Same bridge as Master List: line + arrow from Scoring Categories to SC modes */
.pe-bar-bridge,
.ml-bar-bridge {
  flex: 0 0 auto;
  display: inline-block;
  width: 0.85rem;
  height: 1px;
  margin: 0 0.1rem 0 0.15rem;
  background: color-mix(in srgb, var(--page-accent, #16F3AE) 70%, #52525b);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--page-accent, #16F3AE) 25%, transparent);
  border-radius: 1px;
  position: relative;
  align-self: center;
}
.pe-bar-bridge::after,
.ml-bar-bridge::after {
  content: '';
  position: absolute;
  right: -0.2rem;
  top: 50%;
  width: 0.28rem;
  height: 0.28rem;
  border-right: 1.5px solid color-mix(in srgb, var(--page-accent, #16F3AE) 75%, #52525b);
  border-top: 1.5px solid color-mix(in srgb, var(--page-accent, #16F3AE) 75%, #52525b);
  transform: translateY(-50%) rotate(45deg);
}
.pe-bar-bridge[hidden],
.ml-bar-bridge[hidden] {
  display: none !important;
}
/* Column hide by active table view */
.pe-table-wrap[data-pe-table-view-active="stats"] [data-pe-views]:not([data-pe-views~="stats"]),
.pe-table-wrap[data-pe-table-view-active="clubs"] [data-pe-views]:not([data-pe-views~="clubs"]),
.pe-table-wrap[data-pe-table-view-active="scoring"] [data-pe-views]:not([data-pe-views~="scoring"]) {
  display: none !important;
}
/* All: every unique column visible (no hide). */
.pe-table-wrap {
  width: 100%;
  /* Vertical + horizontal scroll so thead sticky stays within this box */
  max-height: min(72vh, 52rem);
  overflow: auto;
  overscroll-behavior: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: 0.5rem;
  /* Flush top — sticky heads lock to scrollport with no gap for row bleed */
  padding-top: 0 !important;
  box-sizing: border-box;
  --pe-table-head-bg: #09090b;
  /* Fully opaque plate (no see-through of scrolled body rows) */
  --pe-table-totals-bg: #0c1a16;
  /* Locked band heights — totals stick exactly under colheads (no gap sliver) */
  --pe-colhead-h: 2rem;
  --pe-totals-h: 1.9rem;
  --pe-body-row-h: 2.2rem;
  background-color: var(--pe-table-head-bg);
  position: relative;
  isolation: isolate;
}
.pe-player-table.stat-table {
  width: max-content;
  min-width: 100%;
  max-width: none;
  table-layout: auto;
  border-collapse: separate;
  border-spacing: 0;
  background: transparent;
}
.pe-player-table th,
.pe-player-table td {
  /* Comfortable single-line cells — never wrap / never clip */
  padding: 0.38rem 0.55rem !important;
  font-size: 0.75rem !important;
  line-height: 1.25 !important;
  height: var(--pe-body-row-h, 2.2rem);
  max-height: var(--pe-body-row-h, 2.2rem);
  vertical-align: middle;
  white-space: nowrap !important;
  overflow: hidden;
  text-overflow: clip;
  border-bottom: 1px solid #27272a;
  box-sizing: border-box;
}
/* Sortable colheads — solid sticky plate above all body rows; PE green demarcation */
.pe-player-table thead tr:first-child th,
.pe-player-table th {
  position: sticky;
  top: 0;
  z-index: 40;
  background: var(--pe-table-head-bg, #09090b) !important;
  background-image: none !important;
  color: #a1a1aa !important;
  font-weight: 600 !important;
  font-size: 0.72rem !important;
  letter-spacing: 0.02em;
  border-bottom: 2px solid color-mix(in srgb, var(--page-accent, #16f3ae) 55%, #27272a) !important;
  box-shadow: 0 1px 0 color-mix(in srgb, var(--page-accent, #16f3ae) 25%, transparent);
  cursor: pointer;
  user-select: none;
  padding: 0.42rem 0.55rem !important;
  /* Fixed height so totals sticky top never leaves a bleed gap */
  height: var(--pe-colhead-h, 2rem) !important;
  min-height: var(--pe-colhead-h, 2rem) !important;
  max-height: var(--pe-colhead-h, 2rem) !important;
  /* Paint layer — kill subpixel scroll bleed through sticky plate */
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  transform: translateZ(0);
  isolation: isolate;
  overflow: hidden;
}
/* Full-bleed underlay under each colhead cell */
.pe-player-table thead tr:first-child th::before {
  content: '';
  position: absolute;
  inset: -2px 0 -1px 0;
  z-index: -1;
  background: var(--pe-table-head-bg, #09090b) !important;
  pointer-events: none;
}
.pe-player-table th:hover {
  color: var(--page-accent, #16F3AE) !important;
}
.pe-player-table th.is-sorted {
  color: var(--page-accent, #16F3AE) !important;
}
.pe-player-table th .pe-sort-ind {
  display: inline-block;
  margin-left: 0.2rem;
  font-size: 0.62rem;
  opacity: 0.85;
}
/* Body rows always under sticky head stacking context */
.pe-player-table tbody tr {
  position: relative;
  z-index: 0;
  height: var(--pe-body-row-h, 2.2rem);
}
.pe-player-table tbody td {
  height: var(--pe-body-row-h, 2.2rem) !important;
  min-height: var(--pe-body-row-h, 2.2rem) !important;
  max-height: var(--pe-body-row-h, 2.2rem) !important;
}
.pe-player-table td .pos-pill {
  width: 1.35rem;
  height: 1.35rem;
  min-width: 1.35rem;
  min-height: 1.35rem;
  font-size: 0.58rem;
}
.pe-player-table th.pe-fixture-head,
.pe-stats-table--gw th.pe-fixture-head,
th.pe-fixture-head {
  text-align: center !important;
  font-size: 0.72rem !important;
  line-height: 1.25 !important;
  color: #a1a1aa !important;
  letter-spacing: 0.02em;
  font-weight: 600 !important;
}
/* Strong zebra — high contrast for readability */
.pe-player-table tbody tr.pe-row-a {
  background: #121214 !important;
}
.pe-player-table tbody tr.pe-row-b {
  background: #1e1e24 !important;
}
.pe-player-table tbody tr.pe-row-a:hover,
.pe-player-table tbody tr.pe-row-b:hover {
  background: #2a2a32 !important;
}
.pe-player-table tbody tr.pe-dnp-row.pe-row-a {
  background: #101014 !important;
}
.pe-player-table tbody tr.pe-dnp-row.pe-row-b {
  background: #18181f !important;
}
/* Career / season totals — second sticky band under colheads; fully opaque + PE green edge */
.pe-player-table .totals-row,
.pe-player-table thead tr.totals-row {
  background: var(--pe-table-totals-bg) !important;
  box-shadow: 0 1px 0 color-mix(in srgb, var(--page-accent, #16f3ae) 40%, transparent);
  border-bottom: none !important;
  color: var(--page-accent, #16F3AE);
  font-weight: 600;
  cursor: default;
}
.pe-player-table thead tr.totals-row th,
.pe-player-table thead tr.totals-row td {
  cursor: default;
  position: sticky;
  top: var(--pe-colhead-h, 2rem);
  z-index: 35 !important;
  background: var(--pe-table-totals-bg) !important;
  background-image: none !important;
  /* Uniform cell box — identical on label, empty, and number cells */
  height: var(--pe-totals-h, 1.9rem) !important;
  max-height: var(--pe-totals-h, 1.9rem) !important;
  min-height: var(--pe-totals-h, 1.9rem) !important;
  padding: 0.38rem 0.55rem !important;
  font-size: 0.75rem !important;
  line-height: 1.25 !important;
  white-space: nowrap !important;
  vertical-align: middle !important;
  border: none !important;
  box-sizing: border-box;
  /* Same 2px green stroke under every cell → continuous even line full width */
  box-shadow: inset 0 -2px 0 0 var(--page-accent, #16F3AE) !important;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  transform: translateZ(0);
  isolation: isolate;
  overflow: hidden;
}
/* Solid underlay so zebra rows never show through/above the totals band */
.pe-player-table thead tr.totals-row th::before,
.pe-player-table thead tr.totals-row td::before {
  content: '';
  position: absolute;
  inset: -1px 0 -1px 0;
  z-index: -1;
  background: var(--pe-table-totals-bg) !important;
  pointer-events: none;
}
/* Full-bleed solid underlay — no row text sliver above/through totals */
.pe-player-table thead tr.totals-row th::before,
.pe-player-table thead tr.totals-row td::before {
  content: '';
  position: absolute;
  inset: -1px 0 -1px 0;
  z-index: -1;
  background: var(--pe-table-totals-bg) !important;
  pointer-events: none;
}
/* Empty non-numeric totals cells: blank content, same underline as neighbors */
.pe-player-table thead tr.totals-row td.pe-tot-empty {
  color: transparent;
}
/* Fantasy team / H2H opp: same single-line rule; full name visible (table scrolls) */
.pe-player-table td.pe-col-fantasy,
.pe-player-table td.pe-col-fopp {
  font-size: 0.72rem !important;
  white-space: nowrap !important;
  max-width: none;
  overflow: visible;
  display: table-cell;
  -webkit-line-clamp: unset;
}
.pe-player-table td.pe-col-fopp .pe-fopp-empty {
  color: #52525b;
}
/* Club pills in EPL / Opp cells — vertical align in single-line row */
.pe-player-table td.pe-col-club {
  vertical-align: middle;
}
.pe-player-table td.pe-col-club .pe-club-pill {
  vertical-align: middle;
}
/* DGW / dual EPL|Opp: two pills with a compact slash (LEE/@FUL, NEW/LIV) */
.pe-player-table td.pe-col-club .pe-dual-clubs,
.pe-dual-clubs {
  display: inline-flex;
  align-items: center;
  gap: 0.15rem;
  white-space: nowrap;
  vertical-align: middle;
}
.pe-player-table td.pe-col-club .pe-dual-sep,
.pe-dual-sep {
  color: #71717a;
  font-size: 0.65rem;
  font-weight: 600;
  line-height: 1;
  user-select: none;
}
.pe-player-table td.pe-col-club-dual {
  white-space: nowrap;
}
.pe-player-table td.pe-ha-col.pe-ha-dual {
  font-size: 0.65rem;
  letter-spacing: -0.02em;
  white-space: nowrap;
  color: #a1a1aa;
}
/* DNP row body text slightly muted; GS shows plain "DNP" (not a pill) */
.pe-player-table tr.pe-dnp-row td {
  color: #a1a1aa;
}
/* Totals row: non-numeric cells centered (empty — no dashes) */
.pe-player-table thead tr.totals-row td.text-center {
  text-align: center !important;
}

/*
 * Content frame — full allowed width site-wide
 * Canonical: same as Home + Player Explorer (Tailwind max-w-7xl = 80rem)
 * + horizontal padding px-6 / md:px-10
 * Do not use narrower max-w-6xl shells for page mains.
 */
:root {
  --site-shell-max: 80rem;
  --site-shell-px: 1.15rem;
  --site-shell-px-md: 1.75rem;
}

.site-shell,
.site-main {
  width: 100%;
  max-width: var(--site-shell-max);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--site-shell-px);
  padding-right: var(--site-shell-px);
  box-sizing: border-box;
}
@media (min-width: 768px) {
  .site-shell,
  .site-main {
    padding-left: var(--site-shell-px-md);
    padding-right: var(--site-shell-px-md);
  }
}

/* Lift legacy max-w-6xl page shells + align max-w-7xl padding with Home */
main.max-w-6xl,
main.max-w-7xl,
main.max-w-5xl,
main.max-w-4xl,
body > div.max-w-6xl.mx-auto,
body > div.max-w-7xl.mx-auto,
#site-header + div.max-w-6xl,
#site-header + div.max-w-7xl,
header.site-header + div.max-w-6xl,
header.site-header + div.max-w-7xl,
header.site-header + main {
  max-width: var(--site-shell-max) !important;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  box-sizing: border-box;
}

/* Any mx-auto max-w-6xl frame (page content, subnav bars) → full shell */
.max-w-6xl.mx-auto {
  max-width: var(--site-shell-max) !important;
}

/* Header inner row matches content shell */
.site-header > .max-w-7xl,
.site-header > .max-w-6xl,
.site-header-inner {
  max-width: var(--site-shell-max) !important;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--site-shell-px) !important;
  padding-right: var(--site-shell-px) !important;
  box-sizing: border-box;
}
@media (min-width: 768px) {
  .site-header > .max-w-7xl,
  .site-header > .max-w-6xl,
  .site-header-inner {
    padding-left: var(--site-shell-px-md) !important;
    padding-right: var(--site-shell-px-md) !important;
  }
}

/*
 * Site back control — grey pill, left arrow + destination name (never “Back”).
 * Used on player pages, records full lists, owners, GG/DCL records, compare.
 */
a.site-back,
a.site-back.site-pill,
a.pr-back,
a.pr-g-back,
a.tr-back,
a.or-back,
a.gg-rec-back,
a.dcl-rec-back,
.player-subnav > a:first-of-type {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  min-height: var(--pill-control-h, 1.65rem);
  padding: 0.28rem 0.75rem;
  font-size: 0.75rem;
  font-weight: var(--pill-weight-idle, 500);
  line-height: 1.2;
  white-space: nowrap;
  text-decoration: none;
  border-radius: var(--pill-radius-label, 0.375rem) !important;
  border: 1.5px solid #52525b !important;
  background: transparent !important;
  color: #a1a1aa !important;
  -webkit-text-fill-color: #a1a1aa !important;
  cursor: pointer;
  margin-bottom: 0.65rem;
  transition: background 0.1s, border-color 0.1s, color 0.1s;
}
a.site-back:hover,
a.site-back.site-pill:hover,
a.pr-back:hover,
a.pr-g-back:hover,
a.tr-back:hover,
a.or-back:hover,
a.gg-rec-back:hover,
a.dcl-rec-back:hover,
.player-subnav > a:first-of-type:hover,
a.site-back:focus-visible,
a.pr-back:focus-visible,
a.pr-g-back:focus-visible,
a.tr-back:focus-visible,
a.or-back:focus-visible,
a.gg-rec-back:focus-visible,
a.dcl-rec-back:focus-visible,
.player-subnav > a:first-of-type:focus-visible {
  background: rgba(63, 63, 70, 0.35) !important;
  border-color: #71717a !important;
  color: #d4d4d8 !important;
  -webkit-text-fill-color: #d4d4d8 !important;
  outline: none;
}
.player-subnav > a:first-of-type,
.player-subnav a.site-back {
  margin-bottom: 0;
}

/* ── Owner hub + team pages (shared chrome) ───────────────────────── */
.owner-crumb-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
  margin-bottom: 0.75rem;
}
.owner-crumb {
  display: inline-flex;
  align-items: center;
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1.25;
  padding: 0.28rem 0.65rem;
  border-radius: var(--pill-radius-label, 0.375rem);
  border: 1px solid var(--border, #2a2a2e);
  background: var(--surface-card, #1F1F21);
  color: var(--page-accent, #9F9FFA);
  text-decoration: none;
  transition: border-color 0.12s, background 0.12s, color 0.12s;
}
.owner-crumb:hover {
  border-color: var(--page-accent, #9F9FFA);
  background: color-mix(in srgb, var(--page-accent, #9F9FFA) 12%, #121212);
  color: var(--text-primary, #F5F5F7);
}
.owner-crumb-sep {
  color: #52525b;
  font-size: 0.7rem;
  user-select: none;
}
.owner-meta {
  margin-top: 0.35rem;
  font-size: 0.875rem;
  color: var(--text-muted, #a1a1aa);
}
.owner-meta strong {
  color: var(--page-accent, #9F9FFA);
  font-weight: 600;
}
.team-yours-badge {
  display: inline-flex;
  align-items: center;
  margin-left: 0.5rem;
  vertical-align: 0.1rem;
  min-height: 1.35rem;
  padding: 0.1rem 0.5rem;
  border-radius: var(--pill-radius-label, 0.375rem);
  border: 1.5px solid var(--page-accent, #9F9FFA);
  color: var(--page-accent, #9F9FFA);
  background: color-mix(in srgb, var(--page-accent, #9F9FFA) 12%, #121214);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
html.is-my-team .owner-meta,
body.is-my-team .owner-meta {
  color: color-mix(in srgb, var(--page-accent, #9F9FFA) 70%, #a1a1aa);
}

.owner-hub-teams {
  display: grid;
  grid-template-columns: repeat(1, minmax(0, 1fr));
  gap: 0.75rem;
  width: 100%;
}
@media (min-width: 640px) {
  .owner-hub-teams { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  .owner-hub-teams { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 1280px) {
  .owner-hub-teams { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.owner-team-card {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  min-height: 6.75rem;
  padding: 1.1rem 1.15rem;
  border-radius: 0.95rem;
  border: 1px solid var(--border, #2a2a2e);
  background: var(--surface-card, #1F1F21);
  text-decoration: none;
  color: inherit;
  transition: border-color 0.12s ease, background 0.12s ease, transform 0.12s ease;
  box-sizing: border-box;
}
.owner-team-card:hover {
  border-color: var(--page-accent, #9F9FFA);
  background: #242428;
  transform: translateY(-1px);
}
.owner-team-card .otc-name {
  font-family: var(--font-title);
  font-weight: 600;
  font-size: 1.05rem;
  letter-spacing: -0.02em;
  color: var(--text-primary, #F5F5F7);
  line-height: 1.25;
  overflow-wrap: anywhere;
}
.owner-team-card .otc-seasons {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--page-accent, #9F9FFA);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
}
.owner-team-card .otc-cta { display: none; }

.owner-ach-list {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  min-height: 0;
}
.owner-ach-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.55rem 0.15rem;
}
.owner-ach-graphic {
  flex: 0 0 0;
  width: 0;
  height: 0;
  overflow: hidden;
}
.owner-ach-item.has-art .owner-ach-graphic {
  flex: 0 0 2.75rem;
  width: 2.75rem;
  height: 2.75rem;
}
.owner-ach-copy {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.35rem 0.75rem;
  min-width: 0;
}
.owner-ach-comp {
  font-family: var(--font-title, 'Space Grotesk', system-ui, sans-serif);
  font-weight: 600;
  font-size: 0.95rem;
  letter-spacing: -0.02em;
  color: var(--text-primary, #F5F5F7);
}
.owner-ach-item[data-kind="gg"] .owner-ach-comp { color: #44B0F5; }
.owner-ach-item[data-kind="dcl"] .owner-ach-comp { color: #F872F8; }
.owner-ach-item[data-kind="dpl"] .owner-ach-comp { color: #16F38C; }
.owner-ach-yr {
  font-weight: 650;
  font-variant-numeric: tabular-nums;
  color: var(--page-accent, #9F9FFA);
  font-size: 0.8rem;
}
.owner-ach-team {
  font-size: 0.8rem;
  color: #a1a1aa;
}

.owner-cup-list {
  display: grid;
  width: 100%;
  box-sizing: border-box;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3, 0.75rem);
}
@media (max-width: 560px) {
  .owner-cup-list { grid-template-columns: 1fr; }
}
a.owner-cup-pill,
span.owner-cup-pill {
  --cat-accent: var(--page-accent, #9F9FFA);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-width: 0;
  min-height: 6.5rem;
  box-sizing: border-box;
  padding: 1.15rem 1.1rem;
  text-decoration: none;
  text-align: center;
  border-radius: var(--radius-card, 1rem);
  border: 1.5px solid var(--cat-accent);
  background: color-mix(in srgb, var(--cat-accent) 8%, #121214);
  color: var(--text-primary, #F5F5F7);
  transition: border-color 0.12s, background 0.12s;
}
a.owner-cup-pill { cursor: pointer; }
a.owner-cup-pill[data-scheme="gg"] { --cat-accent: #44B0F5; }
a.owner-cup-pill[data-scheme="dcl"],
span.owner-cup-pill[data-scheme="dcl"] { --cat-accent: #F872F8; }
a.owner-cup-pill:hover {
  border-color: color-mix(in srgb, var(--cat-accent) 70%, #fff);
  background: color-mix(in srgb, var(--cat-accent) 14%, #121214);
}
a.owner-cup-pill:focus-visible {
  outline: 2px solid var(--cat-accent);
  outline-offset: 2px;
}
span.owner-cup-pill.is-na {
  --cat-accent: #52525b;
  opacity: 0.45;
  color: #71717a;
  border-color: #3f3f46;
  background: #1a1a1c;
  cursor: default;
  pointer-events: none;
}
.owner-cup-title {
  font-family: var(--font-title, 'Space Grotesk', system-ui, sans-serif);
  font-size: clamp(1.08rem, 1.9vw, 1.38rem);
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1.2;
  color: inherit;
}

.owner-panel {
  border: 1px solid var(--border, #2a2a2e);
  border-radius: 1rem;
  background: var(--surface-card, #1F1F21);
  padding: 1.15rem 1.25rem;
}
.owner-panel-title {
  font-family: var(--font-title);
  font-weight: 600;
  font-size: 0.95rem;
  letter-spacing: -0.02em;
  color: var(--text-primary, #F5F5F7);
  margin-bottom: 0.35rem;
}
.owner-panel p {
  font-size: 0.75rem;
  color: var(--text-muted, #a1a1aa);
  margin: 0 0 0.5rem;
  line-height: 1.4;
}
.owner-panel a {
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--page-accent, #9F9FFA);
  text-decoration: none;
}
.owner-panel a:hover { text-decoration: underline; }

.owner-ach-slot {
  min-height: 4rem;
  border: 1px dashed var(--border, #2a2a2e);
  border-radius: 0.95rem;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted, #a1a1aa);
  font-size: 0.8rem;
  padding: 1rem 1.25rem;
  background: color-mix(in srgb, var(--surface-card, #1F1F21) 70%, transparent);
  text-align: center;
}

/* Page section pills (team pages) — same size as GG/DCL main tabs */
.team-section-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  align-items: center;
}
.team-section-pill.main-tab,
.team-section-pill {
  appearance: none;
  cursor: pointer;
}
/* Secondary selectors (Most used / Best XI, List / Graph, etc.) */
.team-sub-pills,
.xi-sub-pills,
.dpl-view-pills,
.dpl-graph-modes {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  align-items: center;
}
.team-sub-pill,
.xi-sub-pill,
button.dpl-view-pill,
button.dpl-graph-mode {
  min-height: 1.85rem !important;
  padding: 0.36rem 0.95rem !important;
  font-size: 0.92rem !important;
  font-weight: 600;
  letter-spacing: -0.02em;
  text-transform: none !important;
  line-height: 1.2;
}
.team-section { display: none !important; }
.team-section.active { display: block !important; }
.xi-mode-panel[hidden] { display: none !important; }
.placeholder-panel,
.club-empty {
  border: 1px dashed var(--border, #2a2a2e);
  border-radius: 1rem;
  background: var(--surface-card, #1F1F21);
  padding: 2rem 1.25rem;
  text-align: center;
  color: var(--text-muted, #a1a1aa);
  font-size: 0.875rem;
}

.team-section-pill.is-na {
  opacity: 0.45;
  color: #71717a;
  border-color: #3f3f46;
}
.team-section-pill.is-na.active {
  opacity: 1;
  background: #3f3f46;
  border-color: #52525b;
  color: #e4e4e7;
}

.club-card {
  border: 1px solid var(--border, #2a2a2e);
  border-radius: 1rem;
  background: var(--surface-card, #1F1F21);
}
.club-card-head {
  padding: 0.75rem 1.1rem;
  border-bottom: 1px solid var(--border, #2a2a2e);
}
.club-card-head-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}
.club-card-body-compact {
  padding: 0.7rem 1.1rem 0.85rem;
}
.club-card-sub {
  margin: 0.3rem 0 0;
  font-size: 0.8rem;
  color: var(--text-muted, #a1a1aa);
}
.club-card-body { padding: 1rem 1.2rem; }
.roster-filter-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.65rem 0.85rem;
}
.roster-filter-row .club-input {
  width: 16rem;
  max-width: 100%;
  margin: 0;
}
.roster-filter-pos-label {
  margin: 0;
  flex: 0 0 auto;
}
.roster-filter-row #roster-pos-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
}
.roster-filter-row .site-clear-all {
  margin-left: auto;
}
.club-card-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.4rem;
  padding: 0.7rem 1.2rem;
  border-top: 1px solid var(--border, #2a2a2e);
  font-size: 0.75rem;
  color: var(--text-muted, #a1a1aa);
}
.club-kicker {
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #71717a;
}
.club-accent-meta { color: var(--page-accent, #9F9FFA); }
.club-btn {
  appearance: none;
  border: 1px solid var(--border, #2a2a2e);
  background: transparent;
  color: var(--text-primary, #F5F5F7);
  font-size: 0.75rem;
  font-weight: 500;
  padding: 0.4rem 0.75rem;
  border-radius: var(--pill-radius-label, 0.375rem);
  cursor: pointer;
}
.club-btn:hover { border-color: var(--page-accent, #9F9FFA); }

/* Canonical Clear all — see .grok/skills/clear-all-pill */
.site-clear-all,
.pr-g-btn-clear {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  min-height: 1.65rem;
  padding: 0 0.7rem;
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border-radius: var(--pill-radius-label, 0.375rem);
  border: 1.5px solid color-mix(in srgb, #f43f5e 72%, #3f3f46);
  color: #fb7185;
  background: color-mix(in srgb, #f43f5e 10%, transparent);
  cursor: pointer;
  white-space: nowrap;
}
.site-clear-all:hover,
.pr-g-btn-clear:hover {
  border-color: #f43f5e;
  color: #fecdd3;
  background: color-mix(in srgb, #f43f5e 16%, transparent);
}
.club-input {
  width: 100%;
  background: #121214;
  border: 1px solid var(--border, #2a2a2e);
  color: var(--text-primary, #F5F5F7);
  font-size: 0.875rem;
  padding: 0.5rem 0.75rem;
  border-radius: var(--pill-radius-label, 0.375rem);
  outline: none;
}
.club-input:focus { border-color: var(--page-accent, #9F9FFA); }

.owner-team-card.is-current-club {
  border-color: color-mix(in srgb, var(--page-accent, #9F9FFA) 45%, #2a2a2e);
  background: color-mix(in srgb, var(--page-accent, #9F9FFA) 16%, var(--surface-card, #1F1F21));
}
.owner-team-card.is-current-club:hover {
  background: color-mix(in srgb, var(--page-accent, #9F9FFA) 28%, var(--surface-card, #1F1F21));
  border-color: color-mix(in srgb, var(--page-accent, #9F9FFA) 72%, #fff);
}
.owner-panel-na { opacity: 0.72; }
.owner-panel-na p { margin: 0; }

.finish-list {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.finish-row {
  display: grid;
  grid-template-columns: 3.2rem 2.4rem minmax(0, 1fr) auto;
  gap: 0.55rem;
  align-items: center;
  padding: 0.55rem 0.8rem;
  border: 1px solid var(--border, #2a2a2e);
  border-radius: var(--pill-radius-label, 0.375rem);
  background: var(--surface-card, #1F1F21);
  font-size: 0.8rem;
}
.finish-yr { color: var(--page-accent, #9F9FFA); font-weight: 650; font-variant-numeric: tabular-nums; }
.finish-rk { font-weight: 700; font-variant-numeric: tabular-nums; }
.finish-team { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.finish-wdl { color: #a1a1aa; font-variant-numeric: tabular-nums; }
.finish-row.is-champ { border-color: color-mix(in srgb, #16F38C 50%, #2a2a2e); }
.finish-row.is-champ .finish-rk { color: #16F38C; }
.finish-row.is-punish { border-color: color-mix(in srgb, #F53D3D 50%, #2a2a2e); }
.finish-row.is-punish .finish-rk { color: #F53D3D; }

.club-stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(6.4rem, 1fr));
  gap: 0.45rem;
  align-items: stretch;
}
.club-stat {
  border: 1.5px solid var(--border, #2a2a2e);
  border-radius: var(--pill-radius-label, 0.375rem);
  background: var(--surface-card, #1F1F21);
  padding: 0.48rem 0.62rem;
  min-height: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
}
.club-stat.club-stat-clubs {
  grid-column: span 2;
}
.club-stat.club-stat-clubs .club-excl,
.club-stat.club-stat-clubs .pe-club-chips {
  margin: 0;
  flex-wrap: nowrap;
  overflow-x: auto;
  justify-content: center;
  gap: 0.56rem;
}
.club-stat-k { font-size: 0.65rem; color: #71717a; letter-spacing: 0.04em; text-transform: uppercase; text-align: center; }
.club-stat-v { font-size: 1.05rem; font-weight: 650; margin-top: 0.2rem; font-variant-numeric: tabular-nums; text-align: center; }
.club-stat.is-champ { border-color: color-mix(in srgb, #16F38C 50%, #2a2a2e); }
.club-stat.is-champ .club-stat-v { color: #16F38C; }
.club-stat.is-punish { border-color: color-mix(in srgb, #F53D3D 50%, #2a2a2e); }
.club-stat.is-punish .club-stat-v { color: #F53D3D; }
.club-deep {
  display: inline-block;
  margin-top: 0.85rem;
  color: var(--page-accent, #9F9FFA);
  font-size: 0.8rem;
  font-weight: 600;
  text-decoration: none;
}
.club-deep:hover { text-decoration: underline; }
.club-excl { display: flex; flex-wrap: wrap; gap: 0.28rem; margin-top: 0.65rem; align-items: center; }

.xi-pitch-shell {
  position: relative;
  cursor: default;
}
.xi-pitch-shell:hover {
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.03);
}
.xi-form-badge {
  position: absolute;
  top: 0.7rem;
  left: 0.85rem;
  z-index: 2;
  pointer-events: none;
  font-family: var(--font-num, ui-monospace, monospace);
  font-size: 0.78rem;
  font-weight: 650;
  letter-spacing: 0.04em;
  color: var(--page-accent, #9F9FFA);
  border: 1.5px solid var(--page-accent, #9F9FFA);
  border-radius: var(--pill-radius-label, 0.375rem);
  padding: 0.18rem 0.5rem;
  background: color-mix(in srgb, var(--page-accent, #9F9FFA) 10%, #121214);
}
a.xi-player {
  text-decoration: none;
  color: inherit;
  cursor: pointer;
}
a.xi-player:hover {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--page-accent, #9F9FFA) 55%, #3f3f46);
  box-shadow: 0 6px 16px rgba(0,0,0,0.3);
}

.club-match-list {
  border-radius: 1rem;
  border: 1px solid #27272a;
  overflow: hidden;
}
.club-match-head,
.club-match-row {
  display: grid;
  grid-template-columns: 7.6rem minmax(0, 1fr) minmax(11.5rem, 0.9fr) minmax(0, 1fr) 4.1rem;
  gap: 0.5rem;
  align-items: center;
  padding: 0.5rem 0.75rem;
  font-size: 1.05rem;
  line-height: 1.2;
  white-space: nowrap;
}
.club-match-head {
  background: #09090b;
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #71717a;
  font-weight: 600;
}
.club-match-row {
  border-top: 1px solid rgba(39,39,42,0.85);
  color: #e4e4e7;
}
.club-match-row.has-match { background: rgba(24,24,27,0.45); }
.club-match-row.no-match { background: rgba(9,9,11,0.35); opacity: 0.65; }
.club-match-round {
  font-variant-numeric: tabular-nums;
  color: #a1a1aa;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
}
.club-match-team {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
.club-match-team.is-us { font-weight: 650; }
.club-match-team:not(.is-us) { color: #a1a1aa; }
.club-match-team.is-us.is-w { color: #34d399; }
.club-match-team.is-us.is-l { color: #fb7185; }
.club-match-team.is-us.is-d { color: #fafafa; }
.club-scoreboard {
  display: grid;
  grid-template-columns: 1fr 1px 1fr;
  align-items: stretch;
  position: relative;
  width: 100%;
  min-width: 11.5rem;
  border: 1.5px solid #3f3f46;
  border-radius: var(--pill-radius-label, 0.375rem);
  background: #0c0c0e;
  overflow: hidden;
}
.club-scoreboard-n {
  text-align: center;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  font-size: 1.02rem;
  padding: 0.28rem 0.4rem;
  color: #a1a1aa;
}
.club-scoreboard-n.is-us.is-w { color: #34d399; }
.club-scoreboard-n.is-us.is-l { color: #fb7185; }
.club-scoreboard-n.is-us.is-d { color: #fafafa; }
.club-scoreboard-rule {
  background: #52525b;
  width: 1px;
  justify-self: center;
}
.club-score-col-h {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  width: 100%;
  min-width: 11.5rem;
  background: none;
  border: none;
  box-shadow: none;
}
.club-match-res { text-align: right; font-weight: 700; }
.club-match-res.is-w { color: #34d399; }
.club-match-res.is-l { color: #fb7185; }
.club-match-res.is-d { color: #a1a1aa; }

.club-section-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.55rem 0.85rem;
  margin-bottom: 0.75rem;
}
a.club-cta-pill {
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  --page-accent: var(--page-accent, #9F9FFA);
}
.club-cta-arrow {
  font-size: 0.95em;
  line-height: 1;
  font-weight: 700;
}
a.club-cta-pill[data-scheme="gg"] {
  --page-accent: #44B0F5;
  border-color: #44B0F5;
  color: #44B0F5;
  -webkit-text-fill-color: #44B0F5;
}
a.club-cta-pill[data-scheme="gg"]:hover {
  background: color-mix(in srgb, #44B0F5 10%, transparent);
}
a.club-cta-pill[data-scheme="dcl"] {
  --page-accent: #F872F8;
  border-color: #F872F8;
  color: #F872F8;
  -webkit-text-fill-color: #F872F8;
}
a.club-cta-pill[data-scheme="dcl"]:hover {
  background: color-mix(in srgb, #F872F8 10%, transparent);
}

.trophy-cols {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
}
@media (max-width: 860px) {
  .trophy-cols { grid-template-columns: 1fr; }
}
.trophy-col {
  border: 1px solid var(--border, #2a2a2e);
  border-radius: 1rem;
  background: var(--surface-card, #1F1F21);
  padding: 0.85rem 0.9rem 1rem;
}
.trophy-col-h {
  font-family: var(--font-title, 'Space Grotesk', system-ui, sans-serif);
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--trophy-accent, var(--text-primary, #F5F5F7));
  margin: 0 0 0.65rem;
  text-align: center;
}
.club-finish {
  margin: 0;
  grid-column: span 2;
  text-align: center;
  border-color: color-mix(in srgb, var(--trophy-accent, #9F9FFA) 45%, #2a2a2e);
  background: color-mix(in srgb, var(--trophy-accent, #9F9FFA) 10%, #121214);
}
.club-finish-v {
  font-size: 1.05rem;
  font-weight: 650;
  color: var(--text-primary, #F5F5F7);
  line-height: 1.2;
  margin: 0;
  font-variant-numeric: tabular-nums;
}
.club-finish.is-champ {
  border-color: color-mix(in srgb, #16F38C 55%, #2a2a2e);
  background: color-mix(in srgb, #16F38C 10%, #121214);
}
.club-finish.is-champ .club-finish-v { color: #16F38C; }
.club-finish.is-punish {
  border-color: color-mix(in srgb, #F53D3D 50%, #2a2a2e);
  background: color-mix(in srgb, #F53D3D 9%, #121214);
}
.club-finish.is-punish .club-finish-v { color: #fb7185; }
.club-finish.is-dnq {
  opacity: 0.72;
}
.club-finish.is-dnq .club-finish-v {
  font-size: 1.05rem;
  color: #a1a1aa;
}
.trophy-col[data-comp="dpl"] .club-finish { --trophy-accent: #F5F5F7; }
.trophy-col[data-comp="gg"] .club-finish,
.club-finish[data-comp="gg"] { --trophy-accent: #44B0F5; }
.trophy-col[data-comp="dcl"] .club-finish,
.club-finish[data-comp="dcl"] { --trophy-accent: #F872F8; }
.trophy-col[data-comp="dpl"] {
  --trophy-accent: #F5F5F7;
  border-color: color-mix(in srgb, #F5F5F7 28%, #2a2a2e);
  background: color-mix(in srgb, #F5F5F7 5%, #1F1F21);
}
.trophy-col[data-comp="gg"] {
  --trophy-accent: #44B0F5;
  border-color: color-mix(in srgb, #44B0F5 45%, #2a2a2e);
  background: color-mix(in srgb, #44B0F5 8%, #1F1F21);
}
.trophy-col[data-comp="dcl"] {
  --trophy-accent: #F872F8;
  border-color: color-mix(in srgb, #F872F8 45%, #2a2a2e);
  background: color-mix(in srgb, #F872F8 8%, #1F1F21);
}
.trophy-col .club-stat-grid {
  grid-template-columns: 1fr;
}
.trophy-col .club-finish,
.trophy-col .club-stat.club-stat-clubs { grid-column: span 1; }
.club-stat-v { font-size: 0.95rem; }

/* DPL Matches graph uses player-page bar shell (.pp-graph-unit.pp-unit-line). */

/*
 * Chart legend visibility eyes (owners + teams graphs)
 * is-on  = subject is drawn on the graph (green open eye) — click to hide
 * is-off = subject is hidden (grey eye + red slash) — click to show
 */
.chart-vis-btn {
  flex: 0 0 auto;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.35rem;
  height: 1.35rem;
  min-width: 1.35rem;
  padding: 0;
  margin: 0;
  border: 1px solid transparent;
  border-radius: 0.3rem;
  background: transparent;
  cursor: pointer;
  line-height: 0;
  transition: background 0.1s, border-color 0.1s, box-shadow 0.1s;
}
.chart-vis-btn:focus-visible {
  outline: 2px solid #CEAE47;
  outline-offset: 1px;
}
.chart-vis-btn .chart-vis-ico {
  width: 1.05rem;
  height: 1.05rem;
  display: block;
  pointer-events: none;
}
.chart-vis-btn.is-on {
  border-color: color-mix(in srgb, #4ade80 50%, #3f3f46);
  background: color-mix(in srgb, #4ade80 14%, #121214);
  color: #4ade80;
}
.chart-vis-btn.is-on:hover {
  border-color: #4ade80;
  background: color-mix(in srgb, #4ade80 22%, #121214);
  color: #86efac;
}
.chart-vis-btn.is-on .chart-vis-ico {
  stroke: currentColor;
  fill: none;
}
.chart-vis-btn.is-on .chart-vis-pupil {
  fill: currentColor;
  stroke: none;
}
.chart-vis-btn.is-off {
  border-color: #3f3f46;
  background: #0c0c0e;
  color: #71717a;
}
.chart-vis-btn.is-off:hover {
  border-color: #a1a1aa;
  color: #a1a1aa;
  background: color-mix(in srgb, #71717a 12%, #0c0c0e);
}
.chart-vis-btn.is-off .chart-vis-ico {
  stroke: currentColor;
  fill: none;
}
.chart-vis-btn.is-off .chart-vis-pupil {
  fill: currentColor;
  stroke: none;
}
.chart-vis-btn.is-off .chart-vis-slash {
  stroke: #ef4444;
  stroke-width: 2.25;
  stroke-linecap: round;
}
/* Compact size for dense matrix headers */
.chart-vis-btn.is-sm {
  width: 1.2rem;
  height: 1.2rem;
  min-width: 1.2rem;
}
.chart-vis-btn.is-sm .chart-vis-ico {
  width: 0.92rem;
  height: 0.92rem;
}

/* ==========================================================================
 * Site chrome lock — uniform radius, cards, tables, atmosphere
 * Proportional 22% on squares; --radius-card (1rem) on panels; --pill-radius-label
 * on every rectangular control. No capsule (999px) corners on site chrome.
 * ========================================================================== */

@property --site-shimmer-x {
  syntax: '<length>';
  inherits: true;
  initial-value: 0px;
}

html {
  scroll-behavior: smooth;
  --site-shimmer-period: 50vw;
  --site-shimmer-dur: 7.5s;
  --site-shimmer-angle: 115deg;
  /* One clock for every gold/silver cell — a single viewport-locked belt. */
  animation: site-shimmer-x var(--site-shimmer-dur) linear infinite;
}

@keyframes site-shimmer-x {
  from { --site-shimmer-x: 0px; }
  to { --site-shimmer-x: 50vw; }
}

@media (prefers-reduced-motion: reduce) {
  html { animation: none; }
}

body {
  background-image:
    radial-gradient(1200px 520px at 50% -180px, color-mix(in srgb, var(--page-accent) 9%, transparent), transparent 70%),
    linear-gradient(180deg, #101012 0%, var(--surface) 18rem);
  background-attachment: fixed;
  min-height: 100vh;
}

.site-brand {
  text-decoration: none;
}
.site-brand .league-title {
  line-height: 1.1;
}

/* Shared card / panel surfaces */
.home-panel,
.dcl-panel,
.owner-panel,
.owner-team-card,
.pe-table-card,
.placeholder-panel,
.gg-panel,
.records-card,
.team-card,
.section-card {
  border-radius: var(--radius-card, 1rem) !important;
}

/* Tailwind card utilities used across pages — lock to token radius + surface */
.rounded-xl,
.rounded-2xl,
.rounded-3xl {
  border-radius: var(--radius-card, 1rem) !important;
}
.rounded-lg {
  border-radius: var(--radius-lg, 0.75rem) !important;
}
.rounded-md {
  border-radius: var(--radius-md, 0.5rem) !important;
}

.bg-zinc-900,
.bg-zinc-900\/50,
.bg-zinc-900\/60,
.bg-zinc-900\/80 {
  background-color: var(--surface-card) !important;
}
.border-zinc-800,
.border-zinc-700 {
  border-color: var(--border) !important;
}

/* Table wraps + overflow plates */
.overflow-x-auto.rounded-xl,
.overflow-x-auto.rounded-lg,
.overflow-hidden.rounded-xl,
.pe-table-wrap,
.dcl-table-wrap,
.home-panel .overflow-x-auto,
.records-table-wrap {
  border-radius: var(--radius-card, 1rem) !important;
}

.pe-table-wrap {
  border: 1px solid var(--border);
  box-shadow: var(--shadow-card);
}

.admin-export {
  border-radius: var(--radius-lg, 0.75rem);
}

/* Year badge — hollow outline only (same as Explorer 25/26 next to title) */
.year-badge {
  min-height: 1.25rem;
  padding: 0 0.45rem;
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  background: transparent !important;
  border: 1px solid var(--page-accent);
}

/* Subnav rows — consistent gap + breathing room */
.gg-subnav,
.dcl-subnav,
.team-section-pills,
.owner-crumb-row {
  gap: 0.5rem;
}

/* Images / logos used as page marks */
.page-logo,
.hub-logo,
img.league-mark {
  border-radius: var(--logo-radius, 22%);
}

/* Soft accent ring on primary cards — not on .home-panel (inner .home-box is the card) */
.dcl-panel,
.owner-panel {
  box-shadow: var(--shadow-card);
  border: 1px solid var(--border);
  background: var(--surface-card);
}

/* Focus rings — page accent, same radius family */
:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--page-accent) 70%, #ffffff);
  outline-offset: 2px;
}

@media (max-width: 640px) {
  .site-header .site-nav {
    row-gap: 0.35rem;
  }
  .logo-d {
    width: 1.75rem;
    height: 1.75rem;
  }
}

/* ==========================================================================
 * Spacing lock — tight, even rhythm; full data visible; no wasted chrome
 * ========================================================================== */

.site-shell,
.site-main {
  padding-top: var(--space-page-y);
  padding-bottom: var(--space-page-end);
}
.site-shell.py-8,
.site-shell.pb-16,
.site-shell.pb-20,
.site-shell.pt-8,
.site-main.py-8 {
  padding-top: var(--space-page-y) !important;
  padding-bottom: var(--space-page-end) !important;
}

/* Tailwind leftover air under titles / above tables */
.site-shell > .pt-8,
.site-shell > .mb-8,
.site-main > .mb-8,
.records-intro,
.owners-intro {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  margin-bottom: var(--space-section) !important;
}
.site-shell > .mb-6,
.site-shell > .mb-5,
.site-shell > .mb-4 {
  margin-bottom: var(--space-section) !important;
}
.home-panels.mb-8 {
  margin-bottom: 0 !important;
}

/* Compact page titles — still readable, no 5xl waste */
.page-hero {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0 0 0.15rem 0;
  min-width: 0;
}
.page-hero .page-hero-mark {
  width: 2.1rem;
  height: 2.1rem;
  border-radius: var(--logo-radius, 22%);
  object-fit: cover;
  background: #000;
  box-shadow: 0 0 0 1.5px color-mix(in srgb, var(--page-accent) 35%, transparent);
  flex-shrink: 0;
}
@media (min-width: 768px) {
  .page-hero .page-hero-mark {
    width: 2.35rem;
    height: 2.35rem;
  }
}
.page-hero .league-title,
.page-hero h1,
h1.league-title,
.site-shell > .pt-8 .league-title,
.site-shell h1.league-title,
.site-shell h1.text-4xl,
.site-shell h1.text-5xl,
.gg-page-title,
.dcl-page-title {
  font-size: clamp(1.45rem, 2.1vw, 1.95rem) !important;
  line-height: 1.08 !important;
  letter-spacing: -0.04em;
  margin-top: 0.08rem !important;
  margin-bottom: 0.4rem !important;
  min-width: 0;
}

.records-intro p,
.owners-intro p,
.site-shell > .pt-8 > p,
.site-shell > .mb-8 > p,
.site-shell .max-w-2xl.text-zinc-400,
.site-shell section.text-sm.text-zinc-400 {
  margin-top: 0.28rem !important;
  margin-bottom: 0 !important;
  max-width: none !important;
  line-height: 1.35;
}

/* Header — compact, all 7 nav items wrap cleanly, never overlap */
.site-header-inner {
  padding-top: 0.45rem !important;
  padding-bottom: 0.45rem !important;
  gap: 0.4rem !important;
}
.site-header .site-nav {
  column-gap: 0.7rem;
  row-gap: 0.25rem;
}
.site-header .site-nav .nav-link[data-nav="signin"] {
  margin-left: 0.55rem;
}
@media (max-width: 640px) {
  .site-header .site-nav .nav-link[data-nav="signin"] {
    margin-left: 0;
  }
}
.site-header .site-nav .nav-link,
.site-header a.nav-link {
  padding-bottom: 1px;
}

/* Subnav / season rows sit tight against content */
.team-section-pills {
  gap: var(--space-inline) !important;
  margin-top: 0.15rem !important;
  margin-bottom: 0.3rem !important;
}
html[data-page="gaffers"] .site-shell,
html[data-page="dcl"] .site-shell {
  padding-top: 0.95rem !important;
}
html[data-page="gaffers"] .gg-chrome .gg-subnav,
html[data-page="dcl"] .dcl-chrome .dcl-subnav {
  gap: var(--space-inline) !important;
  margin: 0 !important;
}
html[data-page="gaffers"] .gg-chrome .gg-page-title,
html[data-page="dcl"] .dcl-chrome .dcl-page-title {
  margin-top: 0.4rem !important;
  margin-bottom: 0.4rem !important;
  line-height: 1 !important;
  position: relative;
  z-index: 3;
}
html[data-page="gaffers"] body.gg-rec-full-page .gg-chrome .gg-page-title {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}
html[data-page="dcl"] body.dcl-rec-full-page .dcl-chrome .dcl-page-title {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}
.gg-pill-row,
.dcl-pill-row,
#home-season-pills,
#season-pills,
#gw-season-pills,
#archive-season-pills,
#team-season-pills {
  gap: 0.3rem;
}
.home-season-label,
.gg-pill-row-label,
.dcl-pill-row-label {
  margin-bottom: 0.12rem;
}
.site-shell > .pt-8 > .mt-4,
.site-shell .mt-4.mb-1 {
  margin-top: 0.4rem !important;
}

/* Cards / panels: even inner pad, no extra empty bands */
.home-panel {
  padding: 0;
}
.dcl-panel,
.owner-panel {
  padding: 0.75rem 0.95rem;
}
.dcl-panel {
  padding: 0.7rem 0.85rem;
}
.owner-panel {
  padding: 0.75rem 0.85rem;
}
.owner-team-card {
  padding: 0.8rem 0.9rem;
  min-height: 0;
}

/* Tables: full width of shell; horizontal scroll only when needed */
.home-panel .overflow-x-auto,
.dcl-table-wrap,
.pe-table-wrap,
.ml-table-card,
.records-table-wrap {
  width: 100%;
  min-width: 0;
}
.home-standings-table,
.home-matchups-table,
.dcl-table,
.pe-stats-table,
.pe-player-table {
  width: 100%;
}

/* Player-log window: taller so more rows stay on screen */
.pe-table-wrap {
  max-height: min(82vh, 64rem);
}

/* Do not clip rank pills, club codes, or sort arrows */
.home-panel .overflow-hidden,
.ml-table-card.overflow-hidden,
.bg-zinc-900.overflow-hidden,
.rounded-xl.overflow-hidden,
.rounded-2xl.overflow-hidden,
.rounded-3xl.overflow-hidden {
  overflow: visible !important;
}

/* Empty / decorative footers — collapse the air */
footer.border-t {
  padding-top: 0.55rem !important;
  padding-bottom: 0.55rem !important;
}
footer.border-t:empty {
  display: none;
}
.owners-footer {
  padding: 0.5rem 0 !important;
}

/* Grid hubs — even gaps, no collapsed cells */
.records-grid,
.owners-grid,
.owner-hub-teams {
  gap: 0.55rem;
}
a.record-cat-pill,
.owner-pill {
  min-height: 0;
}

/* Sticky header + content must not sit on top of each other */
.site-header + .site-shell,
.site-header + main,
header.site-header + .site-shell {
  position: relative;
  z-index: 0;
}

/* Long names wrap inside cells only when the table is already at min width */
.home-st-team,
.home-mu-team,
.otc-name {
  overflow-wrap: anywhere;
}

/* Shared shimmer sampling — position comes from html --site-shimmer-x. */