/* ============================================================
   NPL Stats Hub - Football West embedded leaderboard widget
   - FC-style layout
   - Light theme by default (embeds on the white Football West
     site); the original dark + gold palette is preserved under
     body.theme-dark and selected via the THEME env var.
   - Fully responsive: 320px (small mobile) -> desktop
   ============================================================ */

@font-face {
  font-family: "Gibson";
  src: url("../fonts/gibson/Gibson.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: optional;
}
@font-face {
  font-family: "Gibson";
  src: url("../fonts/gibson/Gibson-SemiBold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: optional;
}

/* Light theme (default) */
:root {
  --fw-bg-0: #ffffff;
  --fw-card: #ffffff;
  --fw-card-2: #fcfcfc;
  --fw-gold: #FBBA00;
  --fw-gold-dim: rgba(251, 186, 0, 0.18);
  --fw-orange: #ff6a00;
  --fw-red: #F15628;
  --fw-green: #0EB194;
  --fw-text: #121212;
  --fw-muted: rgba(18, 18, 18, 0.62);
  --fw-faint: rgba(18, 18, 18, 0.44);
  --fw-line: rgba(0, 0, 0, 0.10);
  --fw-line-strong: rgba(0, 0, 0, 0.16);
  --fw-widget-bg: #ffffff;
  --fw-hover-text: #000000;
  --fw-chip-bg: rgba(0, 0, 0, 0.03);
  --fw-row-hover: rgba(0, 0, 0, 0.03);
  --fw-club-text: rgba(18, 18, 18, 0.82);
  --fw-scrollbar: rgba(0, 0, 0, 0.20);
  --fw-board-shadow: 0 14px 34px rgba(0, 0, 0, 0.08);
  --fw-notice-text: #6b5200;
  --fw-radius-lg: 18px;
  --fw-radius-md: 12px;
  --fw-radius-sm: 8px;
}

/* Dark theme (original palette), enabled with THEME=dark */
body.theme-dark {
  --fw-bg-0: #050505;
  --fw-card: rgba(15, 15, 15, 0.94);
  --fw-card-2: rgba(22, 22, 22, 0.94);
  --fw-text: #ffffff;
  --fw-muted: rgba(255, 255, 255, 0.66);
  --fw-faint: rgba(255, 255, 255, 0.42);
  --fw-line: rgba(255, 255, 255, 0.10);
  --fw-line-strong: rgba(255, 255, 255, 0.18);
  --fw-widget-bg:
    radial-gradient(1200px 600px at 0% -10%, rgba(251, 186, 0, 0.10), transparent 60%),
    radial-gradient(1000px 600px at 100% -10%, rgba(241, 86, 40, 0.10), transparent 60%),
    linear-gradient(165deg, #050505 0%, #0a0a0a 50%, #050505 100%);
  --fw-hover-text: #ffffff;
  --fw-chip-bg: rgba(255, 255, 255, 0.03);
  --fw-row-hover: rgba(255, 255, 255, 0.025);
  --fw-club-text: rgba(255, 255, 255, 0.86);
  --fw-scrollbar: rgba(255, 255, 255, 0.18);
  --fw-board-shadow: 0 30px 70px rgba(0, 0, 0, 0.55);
  --fw-notice-text: #fff2bd;
}

*,
*::before,
*::after { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  min-height: 100%;
  background: var(--fw-bg-0);
}

body {
  color: var(--fw-text);
  font-family: "Gibson", "Helvetica Neue", Arial, sans-serif;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  line-height: 1.4;
}

a {
  color: inherit;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}

img { display: block; max-width: 100%; }

/* ============================================================
   Layout shell
   ============================================================ */
.fw-widget {
  isolation: isolate;
  min-height: 100vh;
  padding: clamp(14px, 3vw, 30px);
  background: var(--fw-widget-bg);
}

.direct-open-banner {
  display: none;
  margin: 0 0 14px;
  border: 1px solid rgba(251, 186, 0, 0.45);
  background: rgba(251, 186, 0, 0.12);
  color: var(--fw-notice-text);
  padding: 10px 12px;
  border-radius: var(--fw-radius-sm);
  font-size: 0.92rem;
}
body.is-direct-open .direct-open-banner { display: block; }

/* ============================================================
   Header: competition pills + last-updated time
   ============================================================ */
.hub-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.hub-header--end { justify-content: flex-end; }

h1, h2, h3, p { margin: 0; }

h1 {
  font-size: clamp(1.35rem, 3.4vw, 2rem);
  font-weight: 700;
  letter-spacing: 0.01em;
  line-height: 1.1;
}

.competition-switch {
  display: flex;
  gap: 6px;
  padding: 4px;
  border: 1px solid var(--fw-line);
  border-radius: 999px;
  background: var(--fw-chip-bg);
}

.switch-pill {
  display: inline-flex;
  align-items: center;
  height: 36px;
  /* Floor the height: when the pill is a direct child of a column flex
     container (e.g. the FAQ header on mobile), `flex: 1 1 0` zeroes the
     main-axis basis and would otherwise collapse the height below 36px. */
  min-height: 36px;
  padding: 0 18px;
  border-radius: 999px;
  color: var(--fw-muted);
  font-size: 0.86rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  white-space: nowrap;
  transition: background 150ms ease, color 150ms ease;
}
.switch-pill:hover { color: var(--fw-hover-text); }
.switch-pill.is-active {
  background: var(--fw-gold);
  color: #0a0a0a;
}

/* ============================================================
   Mode tabs (Player Stats / Team Stats) + "Current Season"
   ============================================================ */
.mode-row {
  display: flex;
  align-items: center;
  gap: 24px;
  margin-top: 22px;
  border-bottom: 1px solid var(--fw-line);
}

.mode-tab {
  position: relative;
  display: inline-flex;
  align-items: center;
  padding: 12px 2px;
  color: var(--fw-muted);
  font-size: 0.98rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  transition: color 150ms ease;
}
.mode-tab::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 2px;
  background: transparent;
  transition: background 150ms ease;
}
.mode-tab:hover { color: var(--fw-hover-text); }
.mode-tab.is-active { color: var(--fw-gold); }
.mode-tab.is-active::after { background: var(--fw-gold); }

/* ============================================================
   Stat category chip strip (scrollable horizontally on mobile)
   ============================================================ */
.stat-strip {
  display: flex;
  gap: 8px;
  margin-top: 14px;
  padding: 4px 2px 12px;
  overflow-x: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--fw-scrollbar) transparent;
  -webkit-overflow-scrolling: touch;
}
.stat-strip::-webkit-scrollbar { height: 6px; }
.stat-strip::-webkit-scrollbar-thumb {
  background: var(--fw-scrollbar);
  border-radius: 6px;
}

.stat-chip {
  display: inline-flex;
  align-items: center;
  height: 34px;
  padding: 0 14px;
  border-radius: 999px;
  border: 1px solid var(--fw-line);
  background: var(--fw-chip-bg);
  color: var(--fw-muted);
  font-size: 0.85rem;
  font-weight: 700;
  white-space: nowrap;
  transition: border-color 150ms ease, color 150ms ease, background 150ms ease;
}
.stat-chip:hover { color: var(--fw-hover-text); border-color: var(--fw-line-strong); }
.stat-chip.is-active {
  background: var(--fw-gold);
  color: #0a0a0a;
  border-color: var(--fw-gold);
}

/* ============================================================
   Board card
   ============================================================ */
.board-shell {
  margin-top: 18px;
  border: 1px solid var(--fw-line-strong);
  border-radius: var(--fw-radius-lg);
  background: linear-gradient(180deg, var(--fw-card-2) 0%, var(--fw-card) 100%);
  box-shadow: var(--fw-board-shadow);
  overflow: hidden;
}

/* ============================================================
   Leaderboard grid
   columns: rank | subject | club | value | apps
   (team variant collapses club into subject)
   ============================================================ */
.leaderboard { width: 100%; }

/* Player, no supporting stat: rank | subject | club | value | apps */
.leaderboard-head,
.leader-row {
  display: grid;
  grid-template-columns:
    56px
    minmax(0, 1.6fr)
    minmax(0, 1.1fr)
    minmax(80px, 0.55fr)
    minmax(64px, 0.4fr);
  column-gap: 16px;
  align-items: center;
  padding: 14px clamp(16px, 3vw, 26px);
}

/* Player, with supporting stat: rank | subject | club | value | support | apps */
.leaderboard--player.has-support .leaderboard-head,
.leaderboard--player.has-support .leader-row {
  grid-template-columns:
    56px
    minmax(0, 1.5fr)
    minmax(0, 1fr)
    minmax(78px, 0.5fr)
    minmax(78px, 0.5fr)
    minmax(60px, 0.38fr);
}

/* Team: rank | subject | value | apps */
.leaderboard--team .leaderboard-head,
.leaderboard--team .leader-row {
  grid-template-columns:
    56px
    minmax(0, 1fr)
    minmax(80px, 0.55fr)
    minmax(64px, 0.4fr);
}
/* Team, with supporting stat: rank | subject | value | support | apps */
.leaderboard--team.has-support .leaderboard-head,
.leaderboard--team.has-support .leader-row {
  grid-template-columns:
    56px
    minmax(0, 1fr)
    minmax(78px, 0.5fr)
    minmax(78px, 0.5fr)
    minmax(60px, 0.38fr);
}
.leaderboard--team .col-club { display: none; }

.leaderboard-head {
  border-bottom: 1px solid var(--fw-line);
  color: var(--fw-faint);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.leader-row {
  border-bottom: 1px solid var(--fw-line);
  animation: row-in 320ms ease both;
  transition: background 150ms ease;
}
.leader-row:last-child { border-bottom: 0; }
.leader-row:hover { background: var(--fw-row-hover); }

.col-value, .col-support, .col-apps { text-align: right; }

/* Rank */
.rank {
  font-weight: 700;
  font-size: 1.2rem;
  color: var(--fw-faint);
  font-variant-numeric: tabular-nums;
}
.leaderboard-body .leader-row.is-top .rank { color: var(--fw-gold); }

/* Subject (player name / team name block) */
.subject {
  display: flex;
  align-items: center;
  min-width: 0;
  gap: 14px;
}

.name-block {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.name-block strong,
.name-family {
  font-weight: 700;
  font-size: clamp(1rem, 2.2vw, 1.2rem);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  line-height: 1.15;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.name-position {
  margin-top: 4px;
  color: var(--fw-faint);
  font-size: 0.74rem;
  font-weight: 400;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
/* Desktop shows the full word; the abbreviation is mobile-only. */
.pos-abbr { display: none; }

/* Club */
.club {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  color: var(--fw-club-text);
}
.club-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.98rem;
}

.club-logo {
  width: 36px;
  height: 36px;
  flex: 0 0 36px;
  object-fit: contain;
}
.club-logo--subject {
  width: 44px;
  height: 44px;
  flex-basis: 44px;
}

/* Value + support + appearances */
.value {
  font-weight: 700;
  font-size: clamp(1.35rem, 3vw, 1.85rem);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.01em;
}
.support {
  font-weight: 700;
  font-size: clamp(1.05rem, 2.4vw, 1.3rem);
  color: var(--fw-muted);
  font-variant-numeric: tabular-nums;
}
.apps {
  font-weight: 700;
  font-size: clamp(1.05rem, 2.4vw, 1.3rem);
  color: var(--fw-muted);
  font-variant-numeric: tabular-nums;
}

/* ============================================================
   Empty / error states
   ============================================================ */
.empty-state {
  padding: clamp(28px, 6vw, 48px);
  text-align: center;
  color: var(--fw-muted);
}
.empty-state h3 {
  margin-bottom: 6px;
  color: var(--fw-text);
  font-size: 1.1rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.fw-widget--empty {
  display: grid;
  place-items: center;
}
.state-panel {
  max-width: 520px;
  padding: 32px;
  text-align: center;
  border: 1px solid var(--fw-line);
  border-radius: var(--fw-radius-lg);
  background: var(--fw-card);
}
.state-logo {
  width: 86px;
  margin: 0 auto 18px;
}

/* ============================================================
   Glossary / FAQ meta links (under the header row)
   ============================================================ */
.glossary-link {
  display: inline-block;
  margin: 2px 0 4px;
  color: var(--fw-muted);
  font-size: 0.86rem;
  font-weight: 600;
  letter-spacing: 0.01em;
}
.glossary-link__highlight {
  color: var(--fw-gold);
  font-weight: 700;
  border-bottom: 1px solid transparent;
  transition: border-color 150ms ease;
}
.glossary-link:hover .glossary-link__highlight { border-bottom-color: var(--fw-gold); }

.meta-links {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin: 2px 0 4px;
}
.meta-links .glossary-link { margin: 0; }
.meta-links__sep { color: var(--fw-faint); font-size: 0.86rem; }

/* Caption for derived/non-standard metrics (e.g. penalty-adjusted xG). */
.board-note {
  margin: 10px 0 0;
  color: var(--fw-faint);
  font-size: 0.8rem;
  letter-spacing: 0.01em;
}

/* ============================================================
   FAQ page
   ============================================================ */
.faq-shell {
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid var(--fw-line);
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.faq-title {
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: var(--fw-text);
}
.faq-item {
  border: 1px solid var(--fw-line);
  border-radius: 12px;
  padding: 16px 18px;
  background: var(--fw-card);
}
.faq-question {
  font-size: 1rem;
  font-weight: 700;
  margin-bottom: 8px;
  color: var(--fw-text);
}

/* Accordion: each .faq-item is a native <details>; <summary> is the toggle.
   No JS needed (CSP-safe). The default disclosure triangle is removed and
   replaced with a +/- indicator that reflects open state. */
summary.faq-question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 0;
  cursor: pointer;
  list-style: none; /* hides the default marker in Firefox + modern Chrome */
}
summary.faq-question::-webkit-details-marker { display: none; } /* Safari */
summary.faq-question::after {
  content: "+";
  flex: 0 0 auto;
  font-size: 1.3rem;
  font-weight: 700;
  line-height: 1;
  color: var(--fw-muted);
}
.faq-item[open] > summary.faq-question {
  margin-bottom: 8px;
}
.faq-item[open] > summary.faq-question::after {
  content: "\2212"; /* minus sign */
}
.faq-answer {
  color: var(--fw-muted);
  font-size: 0.92rem;
  line-height: 1.55;
}
.faq-link {
  color: var(--fw-gold);
  font-weight: 700;
  border-bottom: 1px solid transparent;
  transition: border-color 150ms ease;
}
.faq-link:hover { border-bottom-color: var(--fw-gold); }
.faq-actions {
  display: flex;
  margin-top: 4px;
}

.updated {
  color: var(--fw-faint);
  font-size: 0.78rem;
  letter-spacing: 0.02em;
}

/* ============================================================
   Animations
   ============================================================ */
@keyframes row-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Staggered fade-in. Delays live here (not as inline styles) so the CSP can
   stay strict: style-src 'self' with no 'unsafe-inline'. Leaderboards cap at
   ~25 rows; rows beyond the list share a capped delay. */
.leader-row:nth-child(1)  { animation-delay: 0ms; }
.leader-row:nth-child(2)  { animation-delay: 30ms; }
.leader-row:nth-child(3)  { animation-delay: 60ms; }
.leader-row:nth-child(4)  { animation-delay: 90ms; }
.leader-row:nth-child(5)  { animation-delay: 120ms; }
.leader-row:nth-child(6)  { animation-delay: 150ms; }
.leader-row:nth-child(7)  { animation-delay: 180ms; }
.leader-row:nth-child(8)  { animation-delay: 210ms; }
.leader-row:nth-child(9)  { animation-delay: 240ms; }
.leader-row:nth-child(10) { animation-delay: 270ms; }
.leader-row:nth-child(11) { animation-delay: 300ms; }
.leader-row:nth-child(12) { animation-delay: 330ms; }
.leader-row:nth-child(13) { animation-delay: 360ms; }
.leader-row:nth-child(14) { animation-delay: 390ms; }
.leader-row:nth-child(15) { animation-delay: 420ms; }
.leader-row:nth-child(16) { animation-delay: 450ms; }
.leader-row:nth-child(17) { animation-delay: 480ms; }
.leader-row:nth-child(18) { animation-delay: 510ms; }
.leader-row:nth-child(19) { animation-delay: 540ms; }
.leader-row:nth-child(20) { animation-delay: 570ms; }
.leader-row:nth-child(21) { animation-delay: 600ms; }
.leader-row:nth-child(22) { animation-delay: 630ms; }
.leader-row:nth-child(23) { animation-delay: 660ms; }
.leader-row:nth-child(24) { animation-delay: 690ms; }
.leader-row:nth-child(25) { animation-delay: 720ms; }
.leader-row:nth-child(n+26) { animation-delay: 750ms; }

/* ============================================================
   Responsive
   ============================================================ */

/* Tablet: still grid, hide apps (keep the supporting stat) */
@media (max-width: 900px) {
  .leaderboard-head,
  .leader-row {
    grid-template-columns:
      48px
      minmax(0, 1.4fr)
      minmax(0, 1fr)
      minmax(72px, 0.55fr);
  }
  .leaderboard--player.has-support .leaderboard-head,
  .leaderboard--player.has-support .leader-row {
    grid-template-columns:
      48px
      minmax(0, 1.4fr)
      minmax(0, 0.9fr)
      minmax(70px, 0.5fr)
      minmax(70px, 0.5fr);
  }
  .leaderboard--team .leaderboard-head,
  .leaderboard--team .leader-row {
    grid-template-columns:
      48px
      minmax(0, 1fr)
      minmax(72px, 0.55fr);
  }
  .leaderboard--team.has-support .leaderboard-head,
  .leaderboard--team.has-support .leader-row {
    grid-template-columns:
      48px
      minmax(0, 1fr)
      minmax(70px, 0.5fr)
      minmax(70px, 0.5fr);
  }
  .col-apps { display: none; }
}

/* Mobile: two-row layout per leader-row
   row 1: rank | name+club stack | value
   row 2: (offset to col 2) club info  */
@media (max-width: 640px) {
  .fw-widget { padding: 12px; }

  /* Stack: 'Updated' (later in DOM) above the full-width switcher. */
  .hub-header {
    flex-direction: column-reverse;
    align-items: stretch;
    gap: 8px;
  }
  .competition-switch { width: 100%; justify-content: stretch; }
  .switch-pill { flex: 1 1 0; justify-content: center; padding: 0 12px; font-size: 0.82rem; }
  .updated { align-self: flex-start; }

  .mode-row {
    flex-wrap: wrap;
    gap: 16px;
  }

  .leaderboard-head { display: none; }

  /* Mobile shows the main value only; supporting stat + apps are hidden,
     and column sorting is unavailable (header is hidden). */
  .leader-row .col-support { display: none; }

  /* Player rows: rank | club logo | name + position | value
     (logo sits to the LEFT of the name/position stack).
     The .has-support selector is included to match the specificity of the
     tablet (max-width:900) rule, which also applies at this width. */
  .leaderboard--player .leader-row,
  .leaderboard--player.has-support .leader-row {
    display: grid;
    grid-template-columns: 26px auto minmax(0, 1fr) auto;
    grid-template-rows: auto;
    align-items: center;
    column-gap: 10px;
    padding: 12px 14px;
    min-height: 64px;
  }
  /* Pin every cell to row 1 so the club logo (column 2, but later in the DOM
     than the subject) doesn't get bumped to a second auto-placed row. */
  .leaderboard--player .leader-row .col-rank { grid-column: 1; grid-row: 1; }
  .leaderboard--player .leader-row .col-club {
    grid-column: 2;
    grid-row: 1;
    color: var(--fw-muted);
  }
  .leaderboard--player .leader-row .col-club .club-name { display: none; }
  .leaderboard--player .leader-row .col-club .club-logo {
    width: 32px; height: 32px; flex-basis: 32px;
  }
  .leaderboard--player .leader-row .col-subject { grid-column: 3; grid-row: 1; min-width: 0; }
  .leaderboard--player .leader-row .col-value {
    grid-column: 4;
    grid-row: 1;
    font-size: 1.5rem;
  }

  /* Club rows: rank | crest + club name | value.
     The .has-support selector is included to match the specificity of the
     tablet (max-width:900) has-support rule, which also applies at this width;
     otherwise the support stat (e.g. club Passes -> Pass Accuracy) keeps its
     4-column template here and leaves an empty hidden-support track that shifts
     the value left and clips club names. */
  .leaderboard--team .leader-row,
  .leaderboard--team.has-support .leader-row {
    display: grid;
    grid-template-columns: 26px minmax(0, 1fr) auto;
    align-items: center;
    column-gap: 12px;
    padding: 12px 14px;
    min-height: 64px;
  }
  .leaderboard--team .leader-row .col-rank,
  .leaderboard--team.has-support .leader-row .col-rank { grid-column: 1; }
  .leaderboard--team .leader-row .col-subject,
  .leaderboard--team.has-support .leader-row .col-subject { grid-column: 2; }
  .leaderboard--team .leader-row .col-value,
  .leaderboard--team.has-support .leader-row .col-value {
    grid-column: 3;
    font-size: 1.5rem;
  }

  .subject { gap: 10px; }
  .club-logo--subject { width: 34px; height: 34px; flex-basis: 34px; }
  .name-block strong,
  .name-family { font-size: 1.02rem; }

  /* Mobile swaps the full word for the compact abbreviation (GK/DF/MF/FW). */
  .pos-full { display: none; }
  .pos-abbr { display: inline; }
}

/* Very narrow (e.g. 320px) */
@media (max-width: 380px) {
  .leaderboard--player .leader-row,
  .leaderboard--player.has-support .leader-row {
    grid-template-columns: 22px auto minmax(0, 1fr) auto;
    column-gap: 8px;
    padding: 12px 10px;
  }
  .leaderboard--player .leader-row .col-club .club-logo {
    width: 28px; height: 28px; flex-basis: 28px;
  }
  .leaderboard--team .leader-row,
  .leaderboard--team.has-support .leader-row {
    grid-template-columns: 22px minmax(0, 1fr) auto;
    column-gap: 10px;
    padding: 12px 10px;
  }
  .leaderboard--player .leader-row .col-value,
  .leaderboard--team .leader-row .col-value,
  .leaderboard--team.has-support .leader-row .col-value { font-size: 1.4rem; }
  .name-block strong,
  .name-family { font-size: 0.96rem; }
}

/* Reduce motion */
@media (prefers-reduced-motion: reduce) {
  .leader-row { animation: none; }
  * { transition: none !important; }
}