/* ============================================================
   THE MINUS FOUR GAZETTE — design tokens + component styles
   Concept: a private FPL mini-league ledger, told as a small,
   opinionated financial broadsheet. Warm paper surfaces, deep
   ledger-green ink, a single gold accent reserved for money that
   has actually been won.
   ============================================================ */

/* ---------- Type scale (fluid clamp, 4-5 sizes/page) ---------- */
:root {
  --text-xs: clamp(0.75rem, 0.7rem + 0.25vw, 0.875rem);
  --text-sm: clamp(0.875rem, 0.8rem + 0.35vw, 1rem);
  --text-base: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
  --text-lg: clamp(1.125rem, 1rem + 0.75vw, 1.5rem);
  --text-xl: clamp(1.5rem, 1.2rem + 1.25vw, 2.25rem);
  --text-2xl: clamp(2rem, 1.2rem + 2.5vw, 3.5rem);
  --text-3xl: clamp(2.25rem, 1rem + 3.6vw, 4.5rem);
  --text-hero: clamp(2.75rem, 0.5rem + 6vw, 6.5rem);

  /* ---------- 4px spacing system ---------- */
  --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-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;
  --space-32: 8rem;

  --radius-sm: 0.25rem;
  --radius-md: 0.5rem;
  --radius-lg: 0.875rem;
  --radius-xl: 1.25rem;
  --radius-full: 9999px;

  --transition-interactive: 180ms cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in: cubic-bezier(0.4, 0, 1, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);

  --content-narrow: 640px;
  --content-default: 960px;
  --content-wide: 1240px;
  --content-full: 100%;

  /* Fonts */
  --font-display: 'Gambetta', 'Iowan Old Style', 'Georgia', serif;
  --font-body: 'Switzer', 'Inter', 'Helvetica Neue', sans-serif;
}

/* ---------- Light mode: "Day Edition" ---------- */
:root,
[data-theme='light'] {
  --color-bg: #f5efe1;
  --color-surface: #fbf7ec;
  --color-surface-2: #fffdf7;
  --color-surface-offset: #efe7d3;
  --color-surface-offset-2: #e7ddc3;
  --color-surface-dynamic: #ddd0ab;
  --color-divider: #ddd2b4;
  --color-border: #cabc95;

  --color-text: #201a10;
  --color-text-muted: #6b6048;
  --color-text-faint: #a99a78;
  --color-text-inverse: #f5efe1;

  --color-primary: #0f4d3a;
  --color-primary-hover: #0b3b2c;
  --color-primary-active: #082a20;
  --color-primary-highlight: #cfe0d6;

  --color-gold: #a8721e;
  --color-gold-hover: #8c5d14;
  --color-gold-active: #714a10;
  --color-gold-highlight: #ecdcb7;

  --color-error: #7c2a2e;
  --color-error-hover: #631f23;
  --color-error-highlight: #e6d2d2;

  --color-success: #2f6b3f;
  --color-success-highlight: #d7e6d9;

  --shadow-sm: 0 1px 2px oklch(0.25 0.03 60 / 0.08);
  --shadow-md: 0 4px 14px oklch(0.25 0.03 60 / 0.1);
  --shadow-lg: 0 16px 40px oklch(0.25 0.03 60 / 0.16);

  --team-foden: #1d6b63;
  --team-accord: #8c2b3f;
  --team-hahe: #6b7228;
  --team-road: #a8611c;
}

/* ---------- Dark mode: "Night Edition" ---------- */
[data-theme='dark'] {
  --color-bg: #14120d;
  --color-surface: #1b1812;
  --color-surface-2: #201d16;
  --color-surface-offset: #221f17;
  --color-surface-offset-2: #2a251b;
  --color-surface-dynamic: #362f20;
  --color-divider: #2c2820;
  --color-border: #3d3728;

  --color-text: #e9e1cc;
  --color-text-muted: #a89a7c;
  --color-text-faint: #726650;
  --color-text-inverse: #1b1812;

  --color-primary: #57ac8d;
  --color-primary-hover: #74c1a1;
  --color-primary-active: #8bcfb1;
  --color-primary-highlight: #263a30;

  --color-gold: #d6a54b;
  --color-gold-hover: #e6bc6d;
  --color-gold-active: #efcd8b;
  --color-gold-highlight: #3a2f1c;

  --color-error: #c6636a;
  --color-error-hover: #d6858a;
  --color-error-highlight: #3a2325;

  --color-success: #74b083;
  --color-success-highlight: #263323;

  --shadow-sm: 0 1px 2px oklch(0 0 0 / 0.3);
  --shadow-md: 0 6px 18px oklch(0 0 0 / 0.4);
  --shadow-lg: 0 20px 48px oklch(0 0 0 / 0.5);

  --team-foden: #4fb3a6;
  --team-accord: #c96b7e;
  --team-hahe: #a3ac55;
  --team-road: #d69355;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --color-bg: #14120d;
    --color-surface: #1b1812;
    --color-surface-2: #201d16;
    --color-surface-offset: #221f17;
    --color-surface-offset-2: #2a251b;
    --color-surface-dynamic: #362f20;
    --color-divider: #2c2820;
    --color-border: #3d3728;
    --color-text: #e9e1cc;
    --color-text-muted: #a89a7c;
    --color-text-faint: #726650;
    --color-text-inverse: #1b1812;
    --color-primary: #57ac8d;
    --color-primary-hover: #74c1a1;
    --color-primary-active: #8bcfb1;
    --color-primary-highlight: #263a30;
    --color-gold: #d6a54b;
    --color-gold-hover: #e6bc6d;
    --color-gold-highlight: #3a2f1c;
    --color-error: #c6636a;
    --color-error-highlight: #3a2325;
    --color-success: #74b083;
    --color-success-highlight: #263323;
    --shadow-sm: 0 1px 2px oklch(0 0 0 / 0.3);
    --shadow-md: 0 6px 18px oklch(0 0 0 / 0.4);
    --shadow-lg: 0 20px 48px oklch(0 0 0 / 0.5);
    --team-foden: #4fb3a6;
    --team-accord: #c96b7e;
    --team-hahe: #a3ac55;
    --team-road: #d69355;
  }
}

body {
  background-image: radial-gradient(ellipse 120% 80% at 50% -10%, oklch(from var(--color-primary) l c h / 0.06), transparent 60%);
}

/* ============================================================
   Layout primitives
   ============================================================ */
.container {
  max-width: var(--content-wide);
  margin-inline: auto;
  padding-inline: var(--space-5);
}
.container--narrow {
  max-width: var(--content-default);
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--color-primary);
  color: var(--color-text-inverse);
  padding: var(--space-3) var(--space-5);
  z-index: 200;
  border-radius: 0 0 var(--radius-md) 0;
}
.skip-link:focus {
  left: 0;
}

section {
  padding-block: clamp(var(--space-12), 7vw, var(--space-24));
  border-top: 3px double var(--color-border);
}
section:first-of-type {
  border-top: none;
}

/* Tab panels — one visible at a time. This is deliberately independent of
   the native `hidden` attribute those sections already carry for "no data
   yet" (see app.js's compute/render functions): `hidden` means "nothing to
   show here at all", this class means "not the active tab". A panel can be
   hidden for either reason without the two fighting over one attribute. */
.tab-panel.is-tab-inactive {
  display: none;
}

/* Native View Transitions cross-fade for tab switches (app.js's
   setActiveTab). Deliberately left unnamed (no view-transition-name on
   #main): naming a specific element made the browser animate THAT
   element's own box size from the old panel's height to the new one's —
   and panels here vary hugely (Home vs. Table), so it read as a visible
   stretch/squash on every switch. The default root transition is always
   viewport-sized regardless of page content height, so there's nothing to
   resize — just a plain crossfade. Unsupported browsers (no polyfill
   needed) just get the old instant swap either way. */
::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 180ms;
  animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}
@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) {
    animation: none !important;
  }
}

/* Overview — the new dashboard-home summary row, styled with the same
   rail-stat tiles the Treasury rail already uses. */
.overview-stats {
  display: grid;
  gap: var(--space-5);
  margin-top: var(--space-10);
}
@media (min-width: 640px) {
  .overview-stats {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
.overview-verdict {
  margin-top: var(--space-10);
}

/* Head-to-head filter box, above the all-time ledger grid. */
.h2h-filter {
  margin-bottom: var(--space-4);
  max-width: 320px;
}
.h2h-filter__input {
  width: 100%;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
  font-size: var(--text-sm);
  color: var(--color-text);
}
.h2h-filter__input::placeholder {
  color: var(--color-text-faint);
}
.h2h-filter__input:hover {
  border-color: var(--color-text-faint);
}

.eyebrow {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-primary);
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.eyebrow::before {
  content: '';
  width: 1.6em;
  height: 1px;
  background: currentColor;
  opacity: 0.6;
}

.section-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: var(--space-10);
}
.section-title {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 600;
  margin-top: var(--space-2);
}
.section-dek {
  color: var(--color-text-muted);
  max-width: 56ch;
  font-size: var(--text-sm);
}

/* Scroll reveal — opacity/clip-path only, no CLS */
.reveal {
  opacity: 1;
}
@supports (animation-timeline: view()) {
  .reveal {
    opacity: 0;
    clip-path: inset(0 0 12% 0);
    animation: reveal-in linear both;
    animation-timeline: view();
    animation-range: entry 0% entry 55%;
  }
  /* Inside a tab panel, the scroll-linked reveal has nothing to key off of:
     a panel appears via display:none → block on tab switch, not by being
     scrolled into view, so the view() timeline's entry range never plays
     and the element is left stuck at opacity:0. Every current .reveal usage
     (the verdict card, the ledger, the bounty rows, the fixture cards, the
     H2H result) lives inside a tab panel, so this switches the effect off
     there and shows the content immediately instead. */
  .tab-panel .reveal {
    opacity: 1;
    clip-path: none;
    animation: none;
  }
}
@keyframes reveal-in {
  to {
    opacity: 1;
    clip-path: inset(0 0 0% 0);
  }
}

/* ============================================================
   Masthead
   ============================================================ */
.masthead {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--color-bg);
  border-bottom: 1px solid var(--color-divider);
  transition: box-shadow var(--transition-interactive);
}
.masthead.is-scrolled {
  box-shadow: var(--shadow-sm);
}
.masthead__bar {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding-block: var(--space-3);
}
.masthead__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  width: 100%;
}
@media (min-width: 880px) {
  .masthead__bar {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
  }
  .masthead__top {
    width: auto;
  }
}
.brand {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  text-decoration: none;
  color: var(--color-text);
}
.brand__mark {
  width: 42px;
  height: 42px;
  color: var(--color-primary);
  flex-shrink: 0;
}
.brand__wordmark {
  display: flex;
  flex-direction: column;
  line-height: 1.05;
}
.brand__title {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 600;
  letter-spacing: 0.01em;
}
.brand__subtitle {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* The tab strip (role="tablist") — five tabs. Above 640px it's this text
   row inside the sticky masthead (sticky for free; still allowed to scroll
   sideways if a narrow tablet ever needs it). At 640px and below the SAME
   element is pinned to the bottom of the viewport as an app-style bottom
   bar — see "Mobile bottom bar" further down. One set of buttons, so the
   ARIA tab semantics never have to be kept in sync across two copies. */
.masthead__nav {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding-top: var(--space-2);
  margin-top: var(--space-2);
  border-top: 1px solid var(--color-divider);
  flex: 1 1 auto;
  min-width: 0;
  scroll-padding-inline: var(--space-4);
}
.masthead__nav::-webkit-scrollbar {
  display: none;
}
.masthead__nav .tab-btn {
  flex-shrink: 0;
}
.masthead__nav .tab-btn[hidden] {
  display: none;
}
/* Icons are for the phone bottom bar only. */
.tab-btn__icon {
  display: none;
}
.masthead__nav .tab-btn {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  text-decoration: none;
  position: relative;
  padding-block: var(--space-1);
  white-space: nowrap;
}
.masthead__nav .tab-btn::after {
  content: '';
  position: absolute;
  left: 0;
  right: 100%;
  bottom: -2px;
  height: 1px;
  background: var(--color-primary);
  transition: right var(--transition-interactive);
}
.masthead__nav .tab-btn:hover {
  color: var(--color-text);
}
.masthead__nav .tab-btn:hover::after {
  right: 0;
}
.masthead__nav .tab-btn[aria-selected='true'] {
  color: var(--color-text);
  font-weight: 600;
}
.masthead__nav .tab-btn[aria-selected='true']::after {
  right: 0;
}
@media (min-width: 880px) {
  .masthead__nav {
    order: 1;
  }
  .masthead__top {
    display: contents;
  }
  .brand {
    order: 0;
  }
  .masthead__actions {
    order: 2;
  }
}

.masthead__actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.icon-btn {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: var(--radius-full);
  color: var(--color-text);
  border: 1px solid var(--color-border);
}
.icon-btn:hover {
  background: var(--color-surface-offset);
  border-color: var(--color-text-faint);
}
.icon-btn svg {
  width: 18px;
  height: 18px;
}

.edition-strip {
  border-top: 1px solid var(--color-divider);
  overflow: hidden;
  background: var(--color-surface-offset);
}
.edition-strip__track {
  display: flex;
  gap: var(--space-10);
  white-space: nowrap;
  padding-block: var(--space-2);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  animation: ticker 32s linear infinite;
  width: max-content;
}
.edition-strip:hover .edition-strip__track {
  animation-play-state: paused;
}
@keyframes ticker {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}
.edition-strip__item {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}
.edition-strip__item strong {
  color: var(--color-text);
  font-weight: 600;
}
/* Wire-service category tag — sits ahead of each ticker item so the strip
   reads as a stream of distinct dispatches, not one repeating sentence with
   the numbers swapped out. */
.edition-strip__tag {
  font-family: var(--font-body);
  font-size: 0.85em;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-gold);
  padding-inline-end: var(--space-2);
  border-inline-end: 1px solid var(--color-border);
}

/* ============================================================
   Rank badge (replaces emoji medals)
   ============================================================ */
.rank-badge {
  width: 1.9em;
  height: 1.9em;
  border-radius: var(--radius-full);
  display: inline-grid;
  place-items: center;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--text-xs);
  flex-shrink: 0;
  border: 1.5px solid currentColor;
}
.rank-badge[data-rank='1'] {
  color: var(--color-gold);
  background: var(--color-gold-highlight);
}
.rank-badge[data-rank='2'] {
  color: var(--color-text-muted);
  background: var(--color-surface-offset);
}
.rank-badge[data-rank='3'] {
  color: #8a5a2e;
  background: color-mix(in oklab, #8a5a2e 14%, var(--color-surface));
}
.rank-badge[data-rank='4'] {
  color: var(--color-error);
  background: var(--color-error-highlight);
}

.team-dot {
  width: 0.6em;
  height: 0.6em;
  border-radius: var(--radius-full);
  display: inline-block;
  flex-shrink: 0;
}

[data-team='foden'] {
  --team-color: var(--team-foden);
}
[data-team='accord'] {
  --team-color: var(--team-accord);
}
[data-team='hahe'] {
  --team-color: var(--team-hahe);
}
[data-team='road'] {
  --team-color: var(--team-road);
}
.team-dot[data-team] {
  background: var(--team-color);
}
.h2h-card__name[data-team] {
  color: var(--team-color);
}

/* ============================================================
   Standings ledger
   ============================================================ */
.ledger {
  overflow-x: auto;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  box-shadow: var(--shadow-sm);
}
.ledger table {
  min-width: 720px;
}
.ledger th,
.ledger td {
  padding: var(--space-4) var(--space-5);
  text-align: left;
  font-size: var(--text-sm);
  border-bottom: 1px solid var(--color-divider);
  white-space: nowrap;
}
.ledger thead th {
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-text-muted);
  font-weight: 600;
  background: var(--color-surface-offset);
  position: sticky;
  top: 0;
}
.ledger tbody tr {
  transition: background var(--transition-interactive);
}
.ledger tbody tr:hover {
  background: var(--color-surface-offset);
}
.ledger tbody tr:last-child td {
  border-bottom: none;
}
/* Not flex: a flex <td> leaves table layout, so its own border-bottom draws at
   the wrong height and shows as a stray rule under the manager name. */
.ledger .cell-manager {
  font-weight: 600;
  white-space: nowrap;
}
.ledger .cell-manager .team-dot {
  margin-right: var(--space-3);
  vertical-align: baseline;
}
.ledger .cell-num {
  font-variant-numeric: tabular-nums lining-nums;
  text-align: right;
}
.ledger .cell-points {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-variant-numeric: tabular-nums;
  text-align: right;
}
.balance-zero {
  color: var(--color-success);
  font-weight: 600;
}
.balance-owed {
  color: var(--color-error);
  font-weight: 600;
}

/* Prose now, not a single flex line — the key runs to a few sentences and
   carries inline marks, which a flex container would turn into columns. */
.ledger-note {
  margin-top: var(--space-4);
  font-size: var(--text-xs);
  line-height: 1.6;
  color: var(--color-text-faint);
  max-width: 78ch;
}

/* Links inside running copy (footnotes, section deks). Nothing styles a bare
   <a> site-wide, so without this they fell back to the browser's own blue. */
.ledger-note a,
.section-dek a,
.pitch-news a {
  color: var(--color-primary);
  text-decoration: underline;
  text-decoration-color: color-mix(in oklab, var(--color-primary) 40%, transparent);
  text-underline-offset: 0.15em;
}
.ledger-note a:hover,
.section-dek a:hover,
.pitch-news a:hover {
  text-decoration-color: currentColor;
}

/* Hit badge — dormant until a gameweek reports a transfer hit, then
   surfaces the old spec's nomenclature (1 hit / 2 hits / 3+ hits). */
/* Per-gameweek hit stamp — sits on the gameweek cell where the hit was
   actually taken, so the ledger reads "when", not just "how many". */
.cell-num.has-mark {
  white-space: nowrap;
}

.hit-mark {
  color: var(--color-error);
  font-size: 0.68em;
  font-weight: 600;
  margin-left: 0.15em;
  letter-spacing: 0.01em;
  cursor: help;
}

/* Voided-gameweek dagger — an editorial footnote mark (points counted, no
   fine assessed) rather than an alarm, so it borrows the gold accent instead
   of the hit-mark's red. */
.void-mark {
  color: var(--color-gold);
  font-size: 0.7em;
  font-weight: 700;
  margin-left: 0.15em;
  cursor: help;
}

.hit-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.3em;
  font-size: var(--text-xs);
  font-weight: 600;
  padding: 0.2em 0.6em;
  border-radius: var(--radius-full);
  background: var(--color-error-highlight);
  color: var(--color-error);
  letter-spacing: 0.02em;
  margin-left: var(--space-2);
}

/* Bounty board */
.bounty-board {
  display: grid;
  gap: var(--space-3);
}
.bounty-row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--space-4);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-4) var(--space-5);
  box-shadow: var(--shadow-sm);
}
.bounty-row__manager {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-weight: 600;
  min-width: 0;
}
.bounty-row__manager span.name {
  overflow: hidden;
  text-overflow: ellipsis;
}
.bounty-row__bar-wrap {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: var(--space-3);
}
.bounty-row__bar-track {
  flex: 1;
  height: 8px;
  border-radius: var(--radius-full);
  background: var(--color-surface-offset);
  overflow: hidden;
}
.bounty-row__bar-fill {
  height: 100%;
  border-radius: var(--radius-full);
  background: linear-gradient(90deg, var(--color-primary), var(--color-gold));
  width: 0%;
  transition: width 900ms var(--ease-out);
}
.bounty-row__pts {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.bounty-row__amount {
  text-align: right;
}
.bounty-row__amount .amount {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-variant-numeric: tabular-nums;
  display: block;
}
.bounty-row__amount .share {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}
.bounty-row__amount .amount.is-gold {
  color: var(--color-gold);
}

.pot-callout {
  margin-top: var(--space-8);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-3);
  padding: var(--space-5) var(--space-6);
  border-radius: var(--radius-lg);
  border: 1px dashed var(--color-border);
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}
.pot-callout strong {
  color: var(--color-text);
  font-family: var(--font-display);
  font-size: var(--text-lg);
}

/* ============================================================
   Head to head
   ============================================================ */
.h2h-picker {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--space-4);
  margin-bottom: var(--space-10);
}
.h2h-select-wrap {
  position: relative;
}
.h2h-select-wrap label {
  display: block;
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: var(--space-2);
}
.h2h-select {
  width: 100%;
  appearance: none;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-10) var(--space-3) var(--space-4);
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--color-text);
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 20px) center, calc(100% - 15px) center;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}
.h2h-select:hover {
  border-color: var(--color-text-faint);
}
.h2h-vs {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  color: var(--color-text-faint);
  text-align: center;
  padding-top: var(--space-6);
}

.h2h-result {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: 1fr 1fr;
}
.h2h-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  box-shadow: var(--shadow-sm);
  transition:
    box-shadow var(--transition-interactive),
    border-color var(--transition-interactive);
}
.h2h-card.is-winning {
  border-color: color-mix(in oklab, var(--team-color, var(--color-primary)) 45%, var(--color-border));
  box-shadow: var(--shadow-md);
}
.h2h-card__name {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-weight: 600;
  font-size: var(--text-sm);
}
.h2h-card__points {
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  margin-top: var(--space-3);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.h2h-card__stats {
  margin-top: var(--space-5);
  display: grid;
  gap: var(--space-2);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}
.h2h-card__stats div {
  display: flex;
  justify-content: space-between;
  padding-block: var(--space-1);
  border-bottom: 1px solid var(--color-divider);
}
.h2h-card__stats div:last-child {
  border-bottom: none;
}
.h2h-card__stats strong {
  color: var(--color-text);
  font-variant-numeric: tabular-nums;
}
.h2h-verdict {
  grid-column: 1 / -1;
  text-align: center;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  padding-top: var(--space-2);
}
.h2h-verdict strong {
  color: var(--color-primary);
  font-family: var(--font-display);
}

.h2h-ledger-wrap {
  overflow-x: auto;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  box-shadow: var(--shadow-sm);
  margin-bottom: var(--space-10);
  padding: var(--space-2);
}
.h2h-ledger {
  width: 100%;
  border-collapse: collapse;
  min-width: 480px;
}
.h2h-ledger th,
.h2h-ledger td {
  padding: var(--space-3) var(--space-4);
  text-align: center;
  font-size: var(--text-sm);
  font-variant-numeric: tabular-nums;
}
.h2h-ledger thead th {
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--color-text-muted);
  white-space: nowrap;
}
.h2h-ledger thead th .team-dot {
  margin-right: var(--space-2);
  vertical-align: baseline;
}
.h2h-ledger tbody th {
  text-align: left;
  font-weight: 600;
  white-space: nowrap;
}
.h2h-ledger tbody th .team-dot {
  margin-right: var(--space-2);
  vertical-align: baseline;
}
/* Keeps a row's dot beside its name even when a long name wraps. */
.h2h-row-name {
  display: inline-flex;
  align-items: baseline;
}
.h2h-row-name .team-dot {
  flex-shrink: 0;
}
.h2h-ledger td {
  border-radius: var(--radius-sm);
  font-weight: 600;
}
.h2h-ledger td.is-self {
  color: var(--color-text-faint);
  font-weight: 400;
}
.h2h-ledger td.is-ahead {
  background: var(--color-success-highlight);
  color: var(--color-success);
}
.h2h-ledger td.is-behind {
  background: var(--color-error-highlight);
  color: var(--color-error);
}
.h2h-ledger td.is-level {
  color: var(--color-text-muted);
}
.h2h-name-short {
  display: none;
  text-decoration: none;
}
/* Phones: four full names can't sit side by side, so the column headers
   drop to initials (the dot keeps the colour identity) and the matrix fits
   the screen instead of hiding half its columns behind a sideways scroll. */
@media (max-width: 640px) {
  .h2h-ledger-wrap {
    padding: var(--space-1);
  }
  .h2h-ledger {
    min-width: 0;
  }
  .h2h-ledger th,
  .h2h-ledger td {
    padding: var(--space-2) var(--space-1);
    font-size: var(--text-xs);
  }
  .h2h-ledger td {
    white-space: nowrap; /* a W-D-L record never splits across lines */
  }
  .h2h-ledger tbody th {
    padding-left: var(--space-2);
    white-space: normal;
    line-height: 1.25;
  }
  .h2h-ledger thead th .team-dot {
    margin-right: 0.25em;
  }
  .h2h-name-full {
    display: none;
  }
  .h2h-name-short {
    display: inline;
  }
}
.h2h-ledger-note {
  margin-top: var(--space-3);
  padding-inline: var(--space-3);
  font-size: var(--text-xs);
  color: var(--color-text-faint);
}

@media (max-width: 640px) {
  .h2h-picker {
    grid-template-columns: 1fr;
  }
  .h2h-vs {
    padding-top: 0;
  }
  .h2h-result {
    grid-template-columns: 1fr;
  }
  .h2h-ledger th,
  .h2h-ledger td {
    padding: var(--space-2) var(--space-3);
  }
}

/* ============================================================
   Fixture wire
   ============================================================ */
.fixture-nav {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-6);
}
.fixture-nav__btn {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-full);
  border: 1px solid var(--color-border);
  display: grid;
  place-items: center;
  flex-shrink: 0;
}
.fixture-nav__btn:hover {
  background: var(--color-surface-offset);
}
.fixture-nav__btn svg {
  width: 16px;
  height: 16px;
}
.fixture-nav__label {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  min-width: 6ch;
  text-align: center;
}
.fixture-nav__scale {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}
.fdr-key {
  display: flex;
  gap: 3px;
}
.fdr-key i {
  width: 12px;
  height: 12px;
  border-radius: 3px;
  display: block;
}

.fixture-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(270px, 100%), 1fr));
  gap: var(--space-3);
}
.fixture-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
}
.fixture-card__team {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  flex: 1;
  min-width: 0;
}
.fixture-card__team.away {
  align-items: flex-end;
  text-align: right;
}
.fixture-card__team-name {
  font-size: var(--text-sm);
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}
.fdr-chip {
  font-size: var(--text-xs);
  font-weight: 700;
  width: 1.6em;
  height: 1.6em;
  border-radius: var(--radius-sm);
  display: grid;
  place-items: center;
  font-variant-numeric: tabular-nums;
}
.fixture-card__vs {
  font-size: var(--text-xs);
  color: var(--color-text-faint);
  padding-inline: var(--space-1);
}

/* FDR color scale, 2 (easy) -> 5 (brutal) */
.fdr-1,
.fdr-2 {
  background: var(--color-success-highlight);
  color: var(--color-success);
}
.fdr-3 {
  background: var(--color-surface-offset-2);
  color: var(--color-text-muted);
}
.fdr-4 {
  background: var(--color-gold-highlight);
  color: var(--color-gold-hover);
}
.fdr-5 {
  background: var(--color-error-highlight);
  color: var(--color-error);
}

/* ============================================================
   Footer
   ============================================================ */
.site-footer {
  padding-block: var(--space-16) var(--space-10);
  border-top: 1px solid var(--color-divider);
}
.site-footer__grid {
  display: grid;
  gap: var(--space-8);
}
@media (min-width: 720px) {
  .site-footer__grid {
    /* Two columns, not three — the old third column just repeated the tab
       strip. Brand keeps the wider share since its blurb runs longer. */
    grid-template-columns: 1.4fr 1fr;
  }
}
.site-footer__brand {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  color: var(--color-text-muted);
  max-width: 40ch;
}
.site-footer__brand svg {
  width: 34px;
  height: 34px;
  flex-shrink: 0;
  margin-top: 2px;
  color: var(--color-primary);
}
.site-footer h4 {
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-text-muted);
  margin-bottom: var(--space-3);
}
.site-footer ul {
  display: grid;
  gap: var(--space-2);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}
.site-footer__bottom {
  margin-top: var(--space-12);
  padding-top: var(--space-6);
  border-top: 1px solid var(--color-divider);
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-3);
  font-size: var(--text-xs);
  color: var(--color-text-faint);
}
.site-footer__powered {
  letter-spacing: 0.02em;
}
.site-footer__powered strong {
  color: var(--color-text-muted);
  font-weight: 600;
}

/* ============================================================
   Loading / skeleton
   ============================================================ */
@keyframes shimmer {
  0% {
    background-position: -200% 0;
  }
  100% {
    background-position: 200% 0;
  }
}
.skeleton {
  background: linear-gradient(90deg, var(--color-surface-offset) 25%, var(--color-surface-dynamic) 50%, var(--color-surface-offset) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s ease-in-out infinite;
  border-radius: var(--radius-sm);
}
[data-loading] .is-live {
  display: none;
}
:not([data-loading]) .is-skel {
  display: none;
}

/* number count-up helper */
.count-up {
  font-variant-numeric: tabular-nums;
}

/* ============================================================
   Knee-Jerk Verdict — the Banter Bulletin widget
   ============================================================ */
.verdict-card {
  position: relative;
  max-width: var(--content-narrow);
  border: 1px solid var(--color-border);
  border-left: 3px solid var(--color-gold);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  box-shadow: var(--shadow-sm);
  padding: var(--space-8);
}
.verdict-card__tag {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-gold);
  margin-bottom: var(--space-4);
}
.verdict-card__text {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--text-lg);
  line-height: 1.45;
  color: var(--color-text);
  min-height: 3.6em;
}
.verdict-card__actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-4);
  margin-top: var(--space-6);
  padding-top: var(--space-5);
  border-top: 1px solid var(--color-divider);
}
.verdict-card__counter {
  font-size: var(--text-xs);
  color: var(--color-text-faint);
  font-variant-numeric: tabular-nums;
}
.btn-verdict {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--text-sm);
  padding: var(--space-2) var(--space-5);
  border-radius: var(--radius-full);
  border: 1px solid var(--color-border);
  background: var(--color-surface-offset);
  color: var(--color-text);
  cursor: pointer;
  transition: background var(--transition-interactive), border-color var(--transition-interactive),
    transform var(--transition-interactive);
}
.btn-verdict:hover {
  background: var(--color-primary-highlight);
  border-color: var(--color-primary);
  color: var(--color-primary-hover);
}
.btn-verdict:active {
  transform: scale(0.97);
}
.btn-verdict svg {
  width: 1em;
  height: 1em;
  transition: transform var(--transition-interactive);
}
.btn-verdict:active svg {
  transform: rotate(90deg);
}

/* "Telegram fade" — the old spec's snap transition, revived for the swap */
@keyframes verdict-fade {
  from {
    opacity: 0;
    transform: translateY(4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.verdict-card__tag.is-swapping,
.verdict-card__text.is-swapping {
  animation: verdict-fade 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}
@media (prefers-reduced-motion: reduce) {
  .verdict-card__tag.is-swapping,
  .verdict-card__text.is-swapping {
    animation: none;
  }
}


/* ============================================================
   The Lead — the front page runs one story, set from the week
   that actually happened. Replaces the old static hero and the
   leader card, which repeated the ledger a screen further down.
   ============================================================ */
.lead {
  padding-top: clamp(var(--space-10), 6vw, var(--space-16));
}
.lead__edition {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--color-divider);
  margin-bottom: var(--space-8);
}
.lead__grid {
  display: grid;
  gap: var(--space-8);
  align-items: start;
}
@media (min-width: 900px) {
  .lead__grid {
    grid-template-columns: minmax(0, 1fr) 15rem;
    gap: var(--space-12);
  }
}
.lead__kicker {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-primary);
  margin-bottom: var(--space-4);
  display: inline-block;
  /* Set per-render from JS to the featured team's colour (falls back to the
     house green when a story isn't about one team) — a small dateline
     touch so each edition visibly belongs to a specific team's week. */
  border-bottom: 2px solid var(--kicker-accent, var(--color-primary));
  padding-bottom: var(--space-1);
}
.lead__headline {
  font-family: var(--font-display);
  font-size: clamp(2.25rem, 1rem + 4.2vw, 4.75rem);
  font-weight: 600;
  line-height: 0.97;
  letter-spacing: -0.02em;
  text-wrap: balance;
}
.lead__standfirst {
  margin-top: var(--space-5);
  font-size: var(--text-lg);
  line-height: 1.5;
  color: var(--color-text-muted);
  max-width: 54ch;
  text-wrap: pretty;
}
.lead__figure {
  border-top: 3px double var(--color-border);
  border-bottom: 3px double var(--color-border);
  padding-block: var(--space-5);
  text-align: center;
}
@media (min-width: 900px) {
  .lead__figure {
    border-inline-start: 1px solid var(--color-divider);
    padding-inline-start: var(--space-8);
    text-align: start;
  }
}
.lead__figure-value {
  font-family: var(--font-display);
  font-size: clamp(3rem, 2rem + 4vw, 5rem);
  font-weight: 600;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--color-primary);
}
.lead__figure-caption {
  margin-top: var(--space-2);
  font-size: var(--text-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.desk-figures {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-5) var(--space-8);
  margin-top: var(--space-10);
  padding-top: var(--space-6);
  border-top: 1px solid var(--color-divider);
}
@media (min-width: 720px) {
  .desk-figures {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
.desk-figures__item dt {
  font-size: var(--text-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-bottom: var(--space-1);
}
.desk-figures__item dd {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.desk-figures__item dd.is-red {
  color: var(--color-error);
}

/* ============================================================
   Treasury rail — four big cards became a narrow standing column
   ============================================================ */
.treasury__grid {
  display: grid;
  gap: var(--space-8);
}
@media (min-width: 900px) {
  .treasury__grid {
    grid-template-columns: 14rem minmax(0, 1fr);
    gap: var(--space-12);
    align-items: start;
  }
}
.treasury__rail {
  display: grid;
  gap: var(--space-5);
}
@media (min-width: 480px) and (max-width: 899px) {
  .treasury__rail {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
.rail-stat {
  border-left: 2px solid var(--color-divider);
  padding-left: var(--space-4);
}
.rail-stat__label {
  font-size: var(--text-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}
.rail-stat__value {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  margin-top: var(--space-1);
}
.rail-stat__value.is-gold {
  color: var(--color-gold);
}
.rail-stat__value.is-green {
  color: var(--color-success);
}
.rail-stat__value.is-red {
  color: var(--color-error);
}
.rail-stat__sub {
  font-size: var(--text-xs);
  color: var(--color-text-faint);
  margin-top: var(--space-1);
}
.treasury__subtitle {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 600;
  margin-bottom: var(--space-5);
}

.cell-empty {
  color: var(--color-text-faint);
}
.cell-hits {
  white-space: nowrap;
}

/* A position settled on head-to-head rather than on points */
.tie-mark {
  display: inline-block;
  margin-left: var(--space-1);
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--color-text-faint);
  cursor: help;
  text-decoration: none;
  border: none;
}

/* ============================================================
   Full gameweek record — the matrix that used to live in the
   headline table, now one click away so the table stops growing
   a column every Saturday.
   ============================================================ */
.matrix,
.fixture-wire {
  margin-top: var(--space-6);
  border-top: 1px solid var(--color-divider);
}
.matrix > summary,
.fixture-wire > summary {
  cursor: pointer;
  padding-block: var(--space-4);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-primary);
  list-style: none;
  display: flex;
  align-items: center;
  gap: var(--space-3);
}
.matrix > summary::-webkit-details-marker,
.fixture-wire > summary::-webkit-details-marker {
  display: none;
}
.matrix > summary::after,
.fixture-wire > summary::after {
  content: '+';
  font-size: 1.1em;
  line-height: 1;
  color: var(--color-text-muted);
}
.matrix[open] > summary::after,
.fixture-wire[open] > summary::after {
  content: '\2212';
}
.matrix__scroll {
  overflow-x: auto;
  padding-bottom: var(--space-4);
}
.matrix__scroll table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm);
  white-space: nowrap;
}
.matrix__scroll th,
.matrix__scroll td {
  padding: var(--space-2) var(--space-3);
  border-bottom: 1px solid var(--color-divider);
  text-align: left;
}
.matrix__scroll .team-dot {
  margin-right: var(--space-2);
}
.matrix__scroll th {
  font-size: var(--text-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  font-weight: 600;
}
.fixture-wire__title {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 600;
  letter-spacing: normal;
  text-transform: none;
  color: var(--color-text);
  margin-right: auto;
}
.fixture-wire > summary .eyebrow {
  margin-right: var(--space-4);
}

/* ============================================================
   The table on a phone. A 7-column ledger in a 348px box means
   Total and Balance sit off-screen behind a sideways swipe —
   which is exactly where a league mate actually reads this. So
   below 760px each row becomes a stacked card and every value
   carries its own caption from data-label.
   ============================================================ */
@media (max-width: 760px) {
  .ledger {
    overflow: visible;
  }
  .ledger table {
    min-width: 0;
    width: 100%;
  }
  .ledger thead {
    display: none;
  }
  .ledger tbody tr {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-areas:
      'rank manager'
      'latest total'
      'balance hits';
    gap: var(--space-3);
    align-items: center;
    padding: var(--space-4) var(--space-4);
    border-bottom: 1px solid var(--color-divider);
  }
  .ledger tbody tr:last-child {
    border-bottom: none;
  }
  .ledger tbody td {
    border: none;
    padding: 0;
  }
  .ledger tbody td:nth-child(1) {
    grid-area: rank;
  }
  .ledger tbody td:nth-child(2) {
    grid-area: manager;
    font-size: var(--text-base);
  }
  .ledger tbody td:nth-child(3) {
    grid-area: latest;
  }
  .ledger tbody td:nth-child(4) {
    grid-area: total;
    text-align: right;
  }
  .ledger tbody td:nth-child(5) {
    grid-area: balance;
    text-align: right;
  }
  .ledger tbody td:nth-child(6) {
    grid-area: hits;
    white-space: normal;
  }
  /* Captions, since the header row is hidden */
  .ledger tbody td:nth-child(3)::before,
  .ledger tbody td:nth-child(4)::before,
  .ledger tbody td:nth-child(5)::before,
  .ledger tbody td:nth-child(6)::before {
    content: attr(data-label);
    display: block;
    font-size: var(--text-xs);
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-text-muted);
    margin-bottom: 2px;
  }
  .ledger tbody td:nth-child(3) {
    text-align: left;
  }
  .ledger tbody td:nth-child(4) {
    font-size: var(--text-xl);
    line-height: 1;
  }
}

/* ============================================================
   The Dugout — three backroom-stat cards (captaincy, bench,
   squad value), all sourced from the official FPL API.
   ============================================================ */
.dugout__grid {
  display: grid;
  gap: var(--space-6);
}
@media (min-width: 720px) {
  .dugout__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (min-width: 1080px) {
  .dugout__grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
.dugout-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  box-shadow: var(--shadow-sm);
}
.dugout-card__title {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 600;
  margin-bottom: var(--space-2);
}
.dugout-card__dek {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: 1.5;
  margin-bottom: var(--space-5);
  min-height: 2.5em;
}
.dugout-card__body {
  display: grid;
  gap: var(--space-3);
}
.dugout-row {
  display: grid;
  grid-template-columns: auto auto 1fr;
  grid-template-areas: 'rank dot name' 'rank dot stat' 'rank dot note';
  column-gap: var(--space-3);
  row-gap: 1px;
  align-items: center;
  padding-block: var(--space-2);
  border-bottom: 1px solid var(--color-divider);
}
.dugout-row:last-child {
  border-bottom: none;
}
.dugout-row.is-leading {
  background: linear-gradient(to right, var(--color-gold-highlight), transparent 60%);
  margin-inline: calc(var(--space-2) * -1);
  padding-inline: var(--space-2);
  border-radius: var(--radius-sm);
}
.dugout-row .rank-badge {
  grid-area: rank;
}
.dugout-row .team-dot {
  grid-area: dot;
}
.dugout-row__name {
  grid-area: name;
  font-weight: 600;
}
.dugout-row__stat {
  grid-area: stat;
  font-variant-numeric: tabular-nums;
  color: var(--color-primary);
  font-weight: 600;
  font-size: var(--text-sm);
}
.dugout-row__note {
  grid-area: note;
  font-size: var(--text-xs);
  color: var(--color-text-faint);
}

/* The Trophy Case (prototype) — reuses .dugout-card/.dugout__grid for its
   card shell; badges are their own small grid inside each card. */
.trophy-count {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin-bottom: var(--space-4);
}
.trophy-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-2);
}
.trophy-badge {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-1);
  padding: var(--space-3) var(--space-2);
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  cursor: default;
}
/* Medallion art (inline SVG, see trophyMedallion in app.js). Colour comes
   from currentColor: gold ink when earned, faint rule colour when locked. */
.trophy-badge__icon {
  display: block;
  line-height: 0;
  color: var(--color-text-faint);
}
.trophy-badge__icon .medal {
  width: 3.5rem;
  height: 3.5rem;
  display: block;
}
.medal__face {
  fill: currentColor;
  fill-opacity: 0;
  stroke: none;
}
.trophy-badge.is-earned .trophy-badge__icon {
  color: var(--color-gold-hover);
}
.trophy-badge.is-earned .medal__face {
  fill-opacity: 0.1;
}
/* Badge key — one line per badge saying what earns it (renderTrophyCase). */
.trophy-key {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr));
  gap: var(--space-2) var(--space-6);
  margin: 0 0 var(--space-8);
  font-size: var(--text-xs);
}
.trophy-key__item {
  display: flex;
  flex-direction: column;
  gap: 0.1em;
}
.trophy-key dt {
  font-weight: 700;
  color: var(--color-text);
}
.trophy-key dd {
  margin: 0;
  color: var(--color-text-muted);
}
.trophy-key__kind {
  color: var(--color-text-faint);
}
.trophy-badge__label {
  font-size: var(--text-xs);
  font-weight: 600;
  line-height: 1.25;
}
.trophy-badge.is-earned {
  background: var(--color-gold-highlight);
  border-color: color-mix(in oklab, var(--color-gold) 45%, var(--color-border));
}
.trophy-badge.is-earned .trophy-badge__label {
  color: var(--color-gold-hover);
}
.trophy-badge.is-locked {
  opacity: 0.55;
}
.trophy-badge.is-locked .trophy-badge__label {
  color: var(--color-text-faint);
}

/* The Squads — manager switcher + pitch graphic */

.squad-armband {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.1em;
  height: 1.1em;
  font-size: 0.65em;
  font-weight: 700;
  border-radius: 50%;
  background: var(--color-gold-highlight);
  color: var(--color-gold-hover);
  vertical-align: middle;
}
.squad-armband.is-vice {
  background: var(--color-surface-alt, var(--color-border));
  color: var(--color-text-muted);
}

.pitch-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Bench — sits directly under the pitch like a dugout bench, same width,
   shirts muted so the starting XI still reads as the main event. */
.bench-strip {
  width: 100%;
  max-width: 480px;
  margin-top: var(--space-3);
  padding: var(--space-3) var(--space-3) var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface-offset);
}
.bench-strip__label {
  font-size: var(--text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-text-muted);
  text-align: center;
  margin-bottom: var(--space-3);
}
.bench-strip__boost {
  display: inline-block;
  margin-left: var(--space-2);
  padding: 0.1em 0.6em;
  border-radius: var(--radius-full);
  background: var(--color-gold-highlight);
  color: var(--color-gold-hover);
  text-transform: none;
  letter-spacing: 0;
}
.bench-strip__row {
  display: flex;
  justify-content: space-evenly;
  gap: var(--space-2);
}
.bench-strip__player .pitch__shirt {
  opacity: 0.55;
}
.bench-strip__player .pitch__name {
  text-shadow: none;
}
.bench-strip__slot {
  font-size: 0.65rem;
  color: var(--color-text-faint);
  letter-spacing: 0.02em;
}
@media (max-width: 640px) {
  .bench-strip {
    max-width: 100%;
  }
}
.pitch {
  position: relative;
  width: 100%;
  max-width: 480px;
  aspect-ratio: 3 / 4;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  gap: var(--space-2);
  padding: var(--space-6) var(--space-3);
  border-radius: var(--radius-lg);
  border: 2px solid color-mix(in oklab, var(--team-color, var(--color-success)) 55%, var(--color-border));
  background:
    repeating-linear-gradient(
      180deg,
      color-mix(in oklab, var(--color-success) 22%, var(--color-surface)) 0,
      color-mix(in oklab, var(--color-success) 22%, var(--color-surface)) 11.11%,
      color-mix(in oklab, var(--color-success) 30%, var(--color-surface)) 11.11%,
      color-mix(in oklab, var(--color-success) 30%, var(--color-surface)) 22.22%
    );
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}
.pitch__markings {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.pitch__halfway {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 2px;
  background: color-mix(in oklab, white 55%, transparent);
}
.pitch__circle {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 22%;
  aspect-ratio: 1;
  border: 2px solid color-mix(in oklab, white 55%, transparent);
  border-radius: 50%;
  transform: translate(-50%, -50%);
}
.pitch__box {
  position: absolute;
  left: 50%;
  width: 56%;
  height: 12%;
  border: 2px solid color-mix(in oklab, white 55%, transparent);
  transform: translateX(-50%);
}
.pitch__box--top {
  top: -2px;
  border-top: none;
}
.pitch__box--bottom {
  bottom: -2px;
  border-bottom: none;
}
.pitch__box--six {
  width: 30%;
  height: 6%;
}
.pitch__row {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-evenly;
  align-items: flex-start;
  gap: var(--space-2);
}
.pitch__player {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-1);
  width: 4.75rem;
}
.pitch__shirt {
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 50%;
  background: var(--team-color, var(--color-primary));
  border: 2px solid color-mix(in oklab, white 70%, transparent);
  box-shadow: var(--shadow-sm);
  display: flex;
  align-items: center;
  justify-content: center;
}
.pitch__shirt:empty {
  /* no captain/vice badge — still show the shirt as a plain dot */
}
.pitch__name {
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--color-text);
  text-align: center;
  line-height: 1.2;
  text-shadow: 0 1px 2px color-mix(in oklab, var(--color-surface) 70%, transparent);
}

@media (max-width: 640px) {
  .pitch {
    max-width: 100%;
    padding: var(--space-4) var(--space-2);
  }
  .pitch__player {
    width: 4rem;
  }
  .pitch__name {
    font-size: 0.65rem;
  }
}

/* The Run-In — reuses .dugout-card/.dugout__grid for its card shell */
.run-meter {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-5);
}
.run-meter .fdr-chip {
  width: auto;
  min-width: 2.4em;
  height: 2.4em;
  padding-inline: var(--space-2);
  font-size: var(--text-lg);
  font-family: var(--font-display);
}
.run-meter__label {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-text-muted);
}
.dugout-row-simple {
  padding-block: var(--space-2);
  border-bottom: 1px solid var(--color-divider);
}
.dugout-row-simple:last-child {
  border-bottom: none;
}
.dugout-row-simple span {
  display: block;
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-text-faint);
  margin-bottom: 2px;
}
.dugout-row-simple p {
  font-size: var(--text-sm);
  color: var(--color-text);
}

/* ============ STOP PRESS ============
   A late-breaking insert, styled after the print convention of stopping
   the press to slot in wire news — stays hidden until app.js confirms a
   gameweek is actually live via the official FPL API. */
.stop-press {
  background: var(--color-error-highlight);
  border-bottom: 1px solid var(--color-border);
}
.stop-press__inner {
  padding-block: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.stop-press__flag {
  display: flex;
  align-items: center;
  gap: 0.5em;
  font-family: 'Switzer', system-ui, sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: var(--text-sm);
  color: var(--color-error);
  margin: 0;
}
.stop-press__dot {
  width: 0.55em;
  height: 0.55em;
  border-radius: var(--radius-full);
  background: var(--color-error);
  animation: stop-press-pulse 1.6s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
  .stop-press__dot {
    animation: none;
  }
}
@keyframes stop-press-pulse {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.35;
  }
}
.stop-press__board {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-6);
  margin: 0;
  padding: 0;
  list-style: none;
}
.stop-press__row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.1em 0.45em;
  font-variant-numeric: tabular-nums;
  border-left: 3px solid var(--row-accent, var(--color-primary));
  padding-left: 0.6em;
}
.stop-press__rank {
  font-size: var(--text-xs);
  color: var(--color-text-faint);
  font-weight: 600;
}
.stop-press__name {
  white-space: nowrap;
  font-weight: 600;
  font-size: var(--text-sm);
}
.stop-press__pts {
  white-space: nowrap;
  font-weight: 700;
  font-size: var(--text-sm);
  color: var(--color-primary);
}
.stop-press__chip {
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--color-gold);
  border: 1px solid var(--color-gold);
  border-radius: var(--radius-sm);
  padding: 0.05em 0.35em;
  letter-spacing: 0.03em;
}
.stop-press__extra {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  white-space: nowrap;
}
.stop-press__subs {
  display: flex;
  flex-direction: column;
  gap: 0.2em;
  max-width: none;
  margin: 0;
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}
.stop-press__subs[hidden] {
  display: none;
}
.stop-press__subs-label {
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-error);
}
.stop-press__subs strong {
  color: var(--color-text);
  font-weight: 600;
}
.stop-press__note {
  margin: 0;
  font-size: var(--text-xs);
  color: var(--color-text-faint);
}
@media (min-width: 720px) {
  .stop-press__inner {
    flex-direction: row;
    align-items: center;
    flex-wrap: wrap;
  }
  .stop-press__flag {
    flex-shrink: 0;
  }
  .stop-press__board {
    flex: 1 1 auto;
  }
  .stop-press__note,
  .stop-press__subs {
    flex-basis: 100%;
  }
}

/* "These figures are old" notice under a section heading (app.js
   noteFreshness) — only appears when FPL hasn't sent updates for 3+ hours. */
.data-notice {
  margin: 0 0 var(--space-5);
  padding: var(--space-2) var(--space-3);
  border-left: 3px solid var(--color-gold);
  background: var(--color-surface);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  max-width: 72ch;
}

/* ============ MONTHLY AWARDS ============ */
.awards__months {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}
.awards-month {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  box-shadow: var(--shadow-sm);
}
.awards-month__head {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-3);
  margin-bottom: var(--space-5);
}
.awards-month__title {
  font-family: 'Gambetta', Georgia, serif;
  font-size: var(--text-lg);
  font-weight: 600;
  margin: 0;
}
.awards-month__meta {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.awards-month__badge {
  display: inline-flex;
  align-items: center;
  font-size: var(--text-xs);
  font-weight: 600;
  padding: 0.2em 0.6em;
  border-radius: var(--radius-full);
  background: var(--color-gold-highlight);
  color: var(--color-gold);
  letter-spacing: 0.02em;
}
.awards-month__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-4);
}
@media (max-width: 900px) {
  .awards-month__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 540px) {
  .awards-month__grid {
    grid-template-columns: 1fr;
  }
}
.awards-card {
  background: var(--color-surface-sunken, var(--color-primary-highlight));
  border-radius: var(--radius-md);
  padding: var(--space-4);
}
.awards-card--headline {
  background: var(--color-primary-highlight);
}
/* Award titles were the faint footnote colour (~2.4:1 contrast) — now the
   muted body colour with a touch more weight so they read as headings. */
.awards-card__label {
  margin: 0 0 var(--space-2);
  font-size: var(--text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-text-muted);
}
.awards-card__winner {
  margin: 0 0 0.2em;
  font-weight: 700;
  font-size: var(--text-sm);
  display: flex;
  align-items: center;
  gap: 0.4em;
}
.awards-card__detail {
  margin: 0;
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

/* ============ THE TRANSFER MARKET ============ */
.market__grid {
  display: grid;
  gap: var(--space-6);
}
@media (min-width: 720px) {
  .market__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
.market-row {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.5em;
  padding-block: var(--space-2);
  border-bottom: 1px solid var(--color-border);
}
.market-row:last-child {
  border-bottom: none;
}
.market-row__note {
  font-size: var(--text-xs);
  color: var(--color-text-faint);
}
.market-row__moves,
.market-row__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4em;
  flex-basis: 100%;
}
.market-move {
  font-size: var(--text-xs);
  background: var(--color-primary-highlight);
  border-radius: var(--radius-sm);
  padding: 0.15em 0.5em;
}
.chip-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2em;
  font-size: var(--text-xs);
  font-weight: 700;
  padding: 0.15em 0.5em;
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-gold);
  color: var(--color-gold);
  letter-spacing: 0.02em;
}
.chip-pill.is-used {
  border-color: var(--color-border);
  color: var(--color-text-faint);
  text-decoration: line-through;
  opacity: 0.6;
}

/* ============ THE ALMANAC ============ */
.almanac__tabs {
  display: flex;
  gap: var(--space-2);
  border-bottom: 1px solid var(--color-border);
  margin-bottom: var(--space-6);
}
.almanac__tab {
  font: inherit;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  padding: var(--space-3) var(--space-4);
  font-weight: 600;
  font-size: var(--text-sm);
  color: var(--color-text-faint);
  cursor: pointer;
}
.almanac__tab:hover {
  color: var(--color-text);
}
.almanac__tab.is-active {
  color: var(--color-primary);
  border-bottom-color: var(--color-primary);
}
.almanac__tab-badge {
  display: inline-flex;
  align-items: center;
  font-size: 0.65em;
  font-weight: 700;
  padding: 0.1em 0.45em;
  border-radius: var(--radius-full);
  background: var(--color-error-highlight);
  color: var(--color-error);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  margin-left: 0.3em;
  vertical-align: middle;
}
.almanac__tab.is-muted {
  color: var(--color-text-faint);
}
.almanac__tab.is-muted.is-active {
  color: var(--color-text-muted);
  border-bottom-color: var(--color-text-faint);
}
.almanac__tab-badge.is-muted {
  background: var(--color-surface-offset-2);
  color: var(--color-text-faint);
  font-weight: 600;
}
.almanac-era__meta {
  font-size: var(--text-xs);
  color: var(--color-text-faint);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  margin: 0 0 var(--space-4);
}

/* ============ PLAYER RADAR ============
   Two stacked pill-tab rows (reusing .almanac__tab) — window, then
   category — plus a small scope toggle that only appears for
   Differentials, then a list of .dugout-row rows (reused from The
   Dugout/Dossier cards) with a position pill in place of a team-dot,
   since these are real football clubs, not the four managers' teams. */
.radar-category-tabs {
  margin-top: calc(var(--space-2) * -1);
}
.radar-scope {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
}
.radar-scope[hidden] {
  display: none;
}
.radar-scope__btn {
  font: inherit;
  font-size: var(--text-xs);
  font-weight: 600;
  cursor: pointer;
  padding: 0.35em 0.9em;
  border-radius: var(--radius-full);
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-text-muted);
}
.radar-scope__btn:hover {
  color: var(--color-text);
}
.radar-scope__btn.is-active {
  border-color: var(--color-primary);
  background: var(--color-gold-highlight);
  color: var(--color-primary);
}
.radar-row {
  grid-template-columns: auto auto 1fr auto;
  grid-template-areas: 'rank pos name name' 'rank pos stat note';
}
.radar-row__pos {
  grid-area: pos;
  align-self: start;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  padding: 0.15em 0.5em;
  border-radius: var(--radius-sm);
  color: var(--color-text-muted);
  background: var(--color-surface-offset);
}
.radar-row__pos[data-pos='GKP'] {
  color: #8a5a2e;
  background: color-mix(in oklab, #8a5a2e 14%, var(--color-surface));
}
.radar-row__pos[data-pos='DEF'] {
  color: var(--color-success);
  background: color-mix(in oklab, var(--color-success) 16%, var(--color-surface));
}
.radar-row__pos[data-pos='MID'] {
  color: var(--color-primary);
  background: var(--color-gold-highlight);
}
.radar-row__pos[data-pos='FWD'] {
  color: var(--color-error);
  background: var(--color-error-highlight);
}
.radar-row .dugout-row__stat {
  font-size: var(--text-base);
}

/* Small gold "OWNED" flag — Player Radar's differentials note does this in
   text, but The Defensive Ledger and Set Pieces both need a scannable
   marker inline with a name, so it's promoted to a shared badge. */
.owned-badge {
  display: inline-flex;
  align-items: center;
  font-size: 0.6em;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 0.1em 0.45em;
  border-radius: var(--radius-full);
  background: var(--color-gold-highlight);
  color: var(--color-gold-hover);
  vertical-align: middle;
}

/* ============ SET PIECES ============ */
.setpieces-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
  gap: var(--space-4);
}
.setpieces-card {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  background: var(--color-surface);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.setpieces-card__head {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--color-divider);
}
.setpieces-card__crest {
  width: 1.6rem;
  height: 1.6rem;
  object-fit: contain;
  flex-shrink: 0;
}
.setpieces-card__head h3 {
  font-size: var(--text-base);
  font-weight: 700;
  margin: 0;
}
.setpieces-duty__label {
  font-size: var(--text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-text-faint);
  margin: 0 0 0.35em;
}
.setpieces-duty__lead {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  position: relative;
}
.setpieces-duty__photo {
  height: 2.4rem;
  width: auto;
  border-radius: var(--radius-sm);
  background: var(--color-surface-offset);
  flex-shrink: 0;
}
/* Owned by one of the four of you — same gold-ring language as the pitch's
   differential marker, but solid rather than dashed, so the two never read
   as the same signal despite sharing a colour. */
.setpieces-duty__lead.is-owned .setpieces-duty__photo {
  box-shadow: 0 0 0 2px var(--color-surface), 0 0 0 3.5px var(--color-gold);
  border-radius: var(--radius-sm);
}
.setpieces-duty__name {
  font-weight: 600;
}
.setpieces-duty__backups {
  font-size: var(--text-xs);
  color: var(--color-text-faint);
  margin: 0.3em 0 0;
}
.setpieces-duty__none {
  font-size: var(--text-sm);
  color: var(--color-text-faint);
  font-style: italic;
  margin: 0;
}

/* Muted one-line empty/fallback state inside a card or panel (was the
   Treatment Table's "fully fit" line; the rest of that section's styles
   went with it — injury status now lives on the Scouting pitch). */
.injury-clear {
  font-size: var(--text-sm);
  color: var(--color-text-faint);
  padding: var(--space-3) 0;
}

/* ============================================================
   Five-tab restructure — parent panels, jump chips, Scouting,
   and the phone bottom bar. Everything below reuses the existing
   tokens, type and card shells; it's layout, not new styling.
   ============================================================ */

/* Anchors land just below the sticky masthead. --masthead-h is kept
   current from app.js (trackMastheadHeight); scroll-margin-top on the
   targets does the offsetting, so the html-level scroll-padding from
   base.css is zeroed here to avoid counting the header twice. */
html {
  scroll-padding-top: 0;
}
html:not([data-tabs-ready]) {
  scroll-behavior: auto;
}
#main,
.tab-group > section,
.scout-league {
  scroll-margin-top: calc(var(--masthead-h, 4rem) + var(--jump-chips-h, 0px) + var(--space-3));
}
.tab-group > section[tabindex='-1']:focus,
.tab-group [tabindex='-1']:focus {
  outline: none;
}

/* A parent panel holds several former top-level sections. They keep their
   own double-rule separators, just with tighter vertical rhythm now that
   they share a page. */
.tab-group > section {
  padding-block: clamp(var(--space-10), 5vw, var(--space-16));
}
.tab-group > section:first-of-type {
  padding-top: var(--space-8);
}

/* Jump chips — a small row of in-page anchors at the top of each merged
   tab, one per sub-section that currently has something to show. Sticky
   just under the masthead (--masthead-h is tracked live in app.js) so the
   row stays reachable while scrolling through a long tab, rather than
   scrolling away after the first screen. */
.jump-chips {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  padding-top: var(--space-6);
  padding-bottom: var(--space-3);
  position: sticky;
  top: var(--masthead-h, 4rem);
  z-index: 40;
  background: var(--color-bg);
  box-shadow: none;
  transition: box-shadow var(--transition-interactive);
}
/* Only announce itself as pinned once something has actually scrolled
   underneath it (is-stuck, toggled in app.js) — otherwise it's just
   sitting in normal flow right under the tab strip and a shadow there
   would look like a stray line for no reason. */
.jump-chips.is-stuck {
  box-shadow: 0 8px 10px -8px oklch(0.25 0.03 60 / 0.12);
}
.jump-chips[hidden],
.jump-chip[hidden] {
  display: none;
}
/* Zero-size marker inserted just above each .jump-chips bar (see
   trackStickyJumpChips in app.js) — purely a scroll-position probe. */
.jump-chips__sentinel {
  height: 0;
}
.jump-chips::before {
  content: 'Jump to';
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-text-faint);
  margin-right: var(--space-1);
}
.jump-chip {
  display: inline-flex;
  align-items: center;
  padding: 0.3em 0.85em;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  background: var(--color-surface);
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--color-text-muted);
  text-decoration: none;
  white-space: nowrap;
}
.jump-chip:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
}

/* ---------- Scouting ---------- */
.scout-head {
  padding-top: var(--space-8);
}
.scout-head .section-head {
  margin-bottom: var(--space-6);
}
.section-head--compact {
  margin-bottom: var(--space-6);
}
.section-head--compact .section-title {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}
.section-head--compact .section-title .team-dot {
  width: 0.45em;
  height: 0.45em;
}
.scout-subhead {
  margin-bottom: var(--space-4);
  justify-content: center;
  max-width: none;
}
.scout-subhead::before {
  display: none;
}

/* League strip — four compact tiles, 2x2 on phones. Buttons: a tile
   selects that manager, same as the pills below it. */
.scout-league {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3);
  margin-bottom: var(--space-5);
}
@media (min-width: 720px) {
  .scout-league {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
.scout-tile {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  min-width: 0;
  padding: var(--space-3) var(--space-4);
  text-align: left;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-top: 3px solid var(--team-color, var(--color-border));
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
}
.scout-tile:hover {
  border-color: var(--team-color);
}
.scout-tile.is-active {
  border-color: var(--team-color);
  background: color-mix(in oklab, var(--team-color) 10%, var(--color-surface));
  box-shadow: var(--shadow-md);
}
.scout-tile__name {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-weight: 600;
  font-size: var(--text-sm);
  line-height: 1.25;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.scout-tile__stats {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-4);
}
.scout-tile__stat {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.scout-tile__stat .fdr-chip {
  width: auto;
  min-width: 2.2em;
  padding-inline: 0.3em;
}
.scout-tile__cap {
  white-space: nowrap;
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-faint);
}
.scout-tile__flags {
  display: inline-grid;
  place-items: center;
  min-width: 1.6em;
  height: 1.6em;
  border-radius: var(--radius-sm);
  font-size: var(--text-xs);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  background: var(--color-surface-offset);
  color: var(--color-text-muted);
}
.scout-tile__flags.has-flags {
  background: var(--color-error-highlight);
  color: var(--color-error);
}
.scout-tile__na {
  background: var(--color-surface-offset);
  color: var(--color-text-faint);
}

/* Picker pills — shared by the switcher and (via aria-pressed) tiles. */

/* Pitch player: the shirt + its corner badges share one positioned box
   (.pitch__kit), so the bench's faded shirts don't fade the badges too. */
.pitch__kit {
  position: relative;
  display: inline-flex;
}
.pitch__flag {
  display: inline-grid;
  place-items: center;
  width: 1rem;
  height: 1rem;
  border-radius: 50%;
  border: 2px solid var(--color-surface-2);
  flex-shrink: 0;
  font-size: 0.6rem;
  font-weight: 800;
  line-height: 1;
}
/* Glyph + colour, never colour alone: ! = out, ? = doubtful */
.pitch__flag.is-out {
  background: var(--color-error);
  color: #fff;
}
.pitch__flag.is-doubt {
  background: var(--color-gold);
  color: #1f1a10;
}
.pitch__kit .pitch__flag {
  position: absolute;
  top: -0.2rem;
  right: -0.35rem;
}
/* Differential: dashed gold ring around the whole shirt — a different
   shape from the injury corner badge, so the two never read alike. */
.pitch__kit.is-diff::after {
  content: '';
  position: absolute;
  inset: -0.3rem;
  border-radius: 50%;
  border: 2px dashed var(--color-gold);
  pointer-events: none;
}
.pitch-legend__ring {
  position: relative;
  display: inline-flex;
  margin-right: 0.2rem;
}
.pitch-legend__ring .pitch__shirt {
  width: 0.9rem;
  height: 0.9rem;
  background: var(--color-text-faint);
  border-width: 1px;
}
.pitch-legend__ring::after {
  inset: -0.2rem;
  border-width: 1.5px;
}

/* A flagged player is a real <button>: tap/click shows the FPL news in the
   note under the pitch. Reset the UA button look back to the plain player. */
button.pitch__player {
  font: inherit;
  color: inherit;
  padding: 0;
  border-radius: var(--radius-sm);
  cursor: pointer;
}
button.pitch__player .pitch__name {
  text-decoration: underline dotted color-mix(in oklab, var(--color-text) 45%, transparent);
  text-underline-offset: 2px;
}
button.pitch__player[aria-expanded='true'] .pitch__name {
  text-decoration-style: solid;
}

.pitch-news {
  scroll-margin-bottom: calc(var(--bottom-bar-h, 0px) + env(safe-area-inset-bottom, 0px) + var(--space-3));
  width: 100%;
  max-width: 480px;
  margin: var(--space-3) auto 0;
  padding: var(--space-3) var(--space-4);
  border-left: 3px solid var(--color-border);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  background: var(--color-surface-offset);
  font-size: var(--text-sm);
  line-height: 1.5;
}
.pitch-news.is-out {
  border-left-color: var(--color-error);
  background: var(--color-error-highlight);
}
.pitch-news.is-doubt {
  border-left-color: var(--color-gold);
  background: var(--color-gold-highlight);
}

.pitch-legend {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-2) var(--space-5);
  max-width: 560px;
  margin: var(--space-4) auto 0;
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}
.pitch-legend li {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}
.pitch-legend li[hidden] {
  display: none;
}
.pitch-legend .pitch__flag {
  border-color: var(--color-bg);
}
.pitch-legend__hint {
  color: var(--color-text-faint);
}
#squads .ledger-note {
  margin-inline: auto;
  text-align: center;
}

/* Five across on a phone: players share the row instead of wrapping to a
   second line, and long names break rather than overlap a neighbour. */
@media (max-width: 640px) {
  .pitch__row {
    flex-wrap: nowrap;
    gap: 2px;
  }
  .pitch__row .pitch__player {
    width: auto;
    flex: 1 1 0;
    max-width: 4.5rem;
    min-width: 0;
  }
  .pitch__name {
    overflow-wrap: anywhere;
  }
  .bench-strip__row .pitch__player {
    width: auto;
    flex: 1 1 0;
    min-width: 0;
  }
}

/* ============================================================
   Mobile bottom bar (≤640px) — the same #tab-strip, pinned to the
   bottom of the viewport, icon + short label per tab. The page gets
   matching bottom padding so the footer's last line and any content
   can always scroll clear of it.
   ============================================================ */
@media (max-width: 640px) {
  :root {
    --bottom-bar-h: 3.75rem;
  }
  body {
    padding-bottom: calc(var(--bottom-bar-h) + env(safe-area-inset-bottom, 0px));
  }
  .masthead__nav {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 110;
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
    gap: 0;
    margin: 0;
    padding: 0 max(var(--space-1), env(safe-area-inset-left, 0px)) env(safe-area-inset-bottom, 0px)
      max(var(--space-1), env(safe-area-inset-right, 0px));
    min-height: calc(var(--bottom-bar-h) + env(safe-area-inset-bottom, 0px));
    overflow: visible;
    background: var(--color-surface);
    border-top: 1px solid var(--color-border);
    box-shadow: 0 -4px 14px oklch(0.25 0.03 60 / 0.08);
  }
  .masthead__nav .tab-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    height: var(--bottom-bar-h);
    padding: var(--space-1) 2px;
    font-size: 0.7rem;
    line-height: 1.1;
    letter-spacing: 0.01em;
    white-space: nowrap;
    color: var(--color-text-muted);
  }
  .masthead__nav .tab-btn[hidden] {
    display: none;
  }
  .masthead__nav .tab-btn__icon {
    display: block;
    width: 22px;
    height: 22px;
  }
  /* Active: house-green ink plus a short bar along the top edge (the
     desktop underline moved to where a thumb looks). */
  .masthead__nav .tab-btn::after {
    top: 0;
    bottom: auto;
    left: 28%;
    right: 28%;
    height: 3px;
    border-radius: 0 0 3px 3px;
    background: var(--color-primary);
    opacity: 0;
    transition: opacity var(--transition-interactive);
  }
  .masthead__nav .tab-btn:hover::after {
    right: 28%;
  }
  .masthead__nav .tab-btn[aria-selected='true'] {
    color: var(--color-primary);
  }
  .masthead__nav .tab-btn[aria-selected='true']::after {
    right: 28%;
    opacity: 1;
  }
  .masthead__nav .tab-btn:focus-visible {
    outline-offset: -3px;
  }
}

/* ============================================================
   The Drafting Room (drafts.js) — the planner. Reuses the pitch, the
   bench strip, .dugout-card, .almanac__tab, .radar-scope__btn and the FDR
   colours; everything below is only what's new.
   ============================================================ */
.draft {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
.draft-banner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border: 1px solid color-mix(in oklab, var(--color-gold) 45%, var(--color-border));
  border-left: 3px solid var(--color-gold);
  border-radius: var(--radius-md);
  background: var(--color-gold-highlight);
  font-size: var(--text-sm);
}
.draft-banner p {
  margin: 0;
}
.draft-banner__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

/* Whose plans — four team-coloured pills */
.draft-managers {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-2);
}
@media (min-width: 720px) {
  .draft-managers {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
.draft-manager {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-width: 0;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-border);
  border-top: 3px solid var(--team-color, var(--color-border));
  border-radius: var(--radius-md);
  background: var(--color-surface);
  font-size: var(--text-sm);
  font-weight: 600;
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
}
.draft-manager.is-active {
  border-color: var(--team-color);
  background: color-mix(in oklab, var(--team-color) 10%, var(--color-surface));
  box-shadow: var(--shadow-sm);
}

/* Plans A / B / C + actions */
.draft-plans {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-2) var(--space-4);
  border-bottom: 1px solid var(--color-divider);
}
.draft-plans__tabs {
  display: flex;
  gap: var(--space-1);
}
.draft-plans__empty {
  font-size: 0.65rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-text-faint);
}
.draft-plans__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  padding-bottom: var(--space-2);
}
.draft-inline {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}
.draft-inline select,
.draft-picker__search,
.draft-start input {
  padding: 0.35em 0.6em;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface-2);
  font-size: var(--text-sm);
}
.draft-link {
  padding: 0;
  border: 0;
  background: none;
  color: var(--color-primary);
  font-size: var(--text-xs);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}

/* Gameweek strip */
.draft-gws {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--space-2);
}
.draft-gw {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.1em;
  padding: var(--space-2) var(--space-1);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  cursor: pointer;
  position: relative;
}
.draft-gw.is-active {
  border-color: var(--color-primary);
  background: var(--color-primary-highlight);
}
.draft-gw.has-error::after {
  content: '';
  position: absolute;
  top: 0.35rem;
  right: 0.35rem;
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 50%;
  background: var(--color-error);
}
.draft-gw__label {
  font-weight: 700;
  font-size: var(--text-sm);
}
.draft-gw__meta {
  font-size: 0.68rem;
  color: var(--color-text-muted);
  white-space: nowrap;
}
.draft-gw__meta b {
  color: var(--color-error);
}

/* Week summary */
.draft-summary {
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
}
.draft-summary__row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3) var(--space-4);
}
@media (min-width: 720px) {
  .draft-summary__row {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
.draft-stat {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.15em;
}
.draft-stat__label {
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-faint);
}
.draft-stat__value {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}
.draft-stat__value.is-bad {
  color: var(--color-error);
}
.draft-stat__tag {
  font-size: 0.68rem;
  color: var(--color-text-faint);
}
.draft-stamp {
  margin-left: 0;
}
.draft-stamp--none {
  font-size: 0.68rem;
  color: var(--color-text-faint);
}
.draft-summary__sub {
  margin: var(--space-2) 0 0;
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}
.draft-start {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--space-2) var(--space-3);
  margin-top: var(--space-3);
  font-size: var(--text-xs);
}
.draft-start label {
  display: flex;
  flex-direction: column;
  gap: 0.2em;
}
.draft-start input {
  width: 6.5rem;
}

/* Pitch column + side column */
.draft__main {
  display: grid;
  gap: var(--space-4);
}
@media (min-width: 960px) {
  .draft__main {
    grid-template-columns: minmax(0, 480px) minmax(0, 1fr);
    align-items: start;
  }
}
.draft__side {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  min-width: 0;
}
.draft-pitch {
  aspect-ratio: auto;
  min-height: 30rem;
}
.draft-player {
  background: none;
  border: 2px solid transparent;
  padding: 0.15rem 0;
}
.draft-player .pitch__name {
  text-decoration: none;
}
.draft-player:hover .pitch__name,
.draft-player:focus-visible .pitch__name {
  text-decoration: underline;
}
.draft-player.is-selected {
  border-color: var(--color-primary);
  background: color-mix(in oklab, var(--color-surface) 75%, transparent);
}
.draft-player.is-swap-target {
  border-style: dashed;
  border-color: color-mix(in oklab, var(--color-primary) 55%, transparent);
}
.draft-player.is-new .pitch__shirt {
  outline: 2px solid var(--color-gold);
  outline-offset: 2px;
}
.draft-player__fx {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 2px;
}
.draft-fx {
  display: inline-block;
  padding: 0 0.3em;
  border-radius: var(--radius-sm);
  font-size: 0.6rem;
  font-weight: 700;
  line-height: 1.5;
  white-space: nowrap;
}
.draft-fx--blank {
  background: var(--color-surface-offset);
  color: var(--color-text-faint);
}
.draft-msg {
  margin: var(--space-3) 0 0;
  padding: var(--space-2) var(--space-3);
  border-left: 3px solid var(--color-primary);
  background: var(--color-surface);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}
.draft-msg.is-error {
  border-left-color: var(--color-error);
  color: var(--color-error);
}
.draft-notes {
  margin: var(--space-3) 0 0;
  padding: 0;
  list-style: none;
  font-size: var(--text-xs);
}
.draft-notes li {
  padding: var(--space-1) 0 var(--space-1) var(--space-3);
  border-left: 3px solid var(--color-border);
  color: var(--color-text-muted);
}
.draft-notes li + li {
  margin-top: var(--space-1);
}
.draft-notes li.is-error {
  border-left-color: var(--color-error);
  color: var(--color-error);
  font-weight: 600;
}
.draft-notes li.is-dropped {
  border-left-color: var(--color-gold);
}

/* Selected player / picker */
.draft-panel {
  scroll-margin-top: calc(var(--masthead-h, 4rem) + var(--space-3));
}
.draft-panel__hint {
  margin: 0;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}
.draft-panel__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
}
.draft-panel__meta {
  font-family: var(--font-body, inherit);
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--color-text-faint);
  letter-spacing: 0.04em;
}
.draft-panel__line {
  margin: var(--space-1) 0 0;
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}
.draft-panel__line.is-out {
  color: var(--color-error);
}
.draft-panel__line.is-doubt {
  color: var(--color-gold-hover);
}
.draft-panel__fx {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-3);
  margin-top: var(--space-3);
}
.draft-panel__fxgw {
  display: inline-flex;
  align-items: center;
  gap: 0.3em;
  font-size: 0.68rem;
  color: var(--color-text-faint);
}
.draft-panel__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-4);
}
.draft-picker {
  margin-top: var(--space-4);
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-divider);
}
.draft-picker__title {
  margin: 0 0 var(--space-2);
  font-weight: 700;
  font-size: var(--text-sm);
}
.draft-picker__controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-3);
  margin-bottom: var(--space-3);
}
.draft-picker__search {
  flex: 1 1 14rem;
  min-width: 0;
}
.draft-picker__list {
  margin: 0;
  padding: 0;
  list-style: none;
  max-height: 26rem;
  overflow-y: auto;
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-md);
}
.draft-picker__list li + li {
  border-top: 1px solid var(--color-divider);
}
.draft-picker__empty {
  padding: var(--space-3);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}
.draft-pick {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.15em var(--space-3);
  width: 100%;
  padding: var(--space-2) var(--space-3);
  border: 0;
  background: none;
  text-align: left;
  cursor: pointer;
}
.draft-pick:hover:not(:disabled),
.draft-pick:focus-visible {
  background: var(--color-primary-highlight);
}
.draft-pick:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}
.draft-pick__name {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.3em;
  font-weight: 600;
  font-size: var(--text-sm);
  min-width: 0;
}
.draft-pick__team {
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--color-text-faint);
}
.draft-pick__price {
  font-weight: 700;
  font-size: var(--text-sm);
  font-variant-numeric: tabular-nums;
}
.draft-pick__stats {
  grid-column: 1 / -1;
  font-size: 0.7rem;
  color: var(--color-text-muted);
}
.draft-pick__fx {
  grid-column: 1 / -1;
  display: flex;
  gap: 3px;
}
.draft-picker__more {
  margin-top: var(--space-2);
}

/* This week's transfers */
.draft-transfers__list {
  margin: var(--space-2) 0 0;
  padding: 0;
  list-style: none;
  font-size: var(--text-sm);
}
.draft-transfers__list li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-2);
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--color-divider);
}
.draft-transfers__list small {
  color: var(--color-text-faint);
  font-size: 0.7rem;
}
.draft-transfers__out {
  color: var(--color-error);
}
.draft-transfers__in {
  color: var(--color-success);
  font-weight: 600;
}
.draft-transfers__list .draft-link {
  margin-left: auto;
}
.draft-transfers__sum {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin: var(--space-2) 0 0;
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

/* Against the league */
.draft-rivals__list {
  margin: var(--space-2) 0 0;
  padding: 0;
  list-style: none;
}
.draft-rivals__list li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.1em var(--space-3);
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--color-divider);
  font-size: var(--text-sm);
}
.draft-rivals__name {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-weight: 600;
  min-width: 0;
}
.draft-rivals__shared {
  font-variant-numeric: tabular-nums;
}
.draft-rivals__cap {
  grid-column: 1 / -1;
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}
.draft-rivals__unique {
  margin: var(--space-3) 0 0;
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

/* Plans side by side */
.draft-compare__wrap {
  overflow-x: auto;
  margin-top: var(--space-2);
}
.draft-compare__table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm);
  font-variant-numeric: tabular-nums;
}
.draft-compare__table th,
.draft-compare__table td {
  padding: var(--space-2) var(--space-3);
  text-align: left;
  border-bottom: 1px solid var(--color-divider);
  white-space: nowrap;
}
.draft-compare__table thead th {
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-faint);
}
.draft-compare__table tr.is-active {
  background: var(--color-primary-highlight);
}
.draft-compare__table .hit-badge {
  margin-left: 0;
}
.draft-compare__warn {
  font-size: 0.65rem;
  font-weight: 700;
  color: var(--color-error);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.draft__footnote {
  margin-top: 0;
}
@media (max-width: 640px) {
  .draft-pitch {
    min-height: 27rem;
  }
  .draft-gw__label {
    font-size: var(--text-xs);
  }
}

/* Six tabs in the phone bottom bar: on the narrowest screens give the
   labels a little more air so neighbours don't run together. */
@media (max-width: 360px) {
  .masthead__nav .tab-btn {
    font-size: 0.62rem;
    letter-spacing: 0;
  }
}

/* Drafting Room — chips (Phase 2) */
.draft-chips {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-2);
  margin-top: var(--space-3);
}
.draft-chip {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.1em;
  padding: var(--space-2) var(--space-1);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface-2);
  cursor: pointer;
}
.draft-chip:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}
.draft-chip.is-on {
  border-color: var(--color-gold);
  background: var(--color-gold-highlight);
}
.draft-chip__code {
  font-weight: 800;
  font-size: var(--text-sm);
  letter-spacing: 0.04em;
}
.draft-chip.is-on .draft-chip__code {
  color: var(--color-gold-hover);
}
.draft-chip__sub {
  font-size: 0.62rem;
  color: var(--color-text-faint);
  white-space: nowrap;
}
.draft-chip-tag {
  display: inline-block;
  padding: 0 0.3em;
  border-radius: var(--radius-sm);
  background: var(--color-gold-highlight);
  color: var(--color-gold-hover);
  font-weight: 800;
  font-size: 0.6rem;
}
.draft-chips__effect {
  color: var(--color-gold-hover);
}

/* Drafting Room — sealed drafts (Phase 2) */
.draft-sealed__list li {
  grid-template-columns: minmax(0, 1fr) auto;
}
.draft-sealed__state {
  font-size: var(--text-xs);
  color: var(--color-text-faint);
  white-space: nowrap;
}
.draft-sealed__state.is-sealed {
  color: var(--color-success);
  font-weight: 600;
}
.draft-sealed__state.is-sealed::before {
  content: '✓ ';
}
.draft-sealed__action {
  margin-top: var(--space-3);
}
.draft-sealed__opened {
  margin-top: var(--space-5);
}
.draft-sealed__verdict {
  grid-column: 1 / -1;
  font-family: var(--font-display);
  font-size: var(--text-sm);
}
.draft-sealed__list li.is-stuck .draft-sealed__verdict {
  color: var(--color-success);
}
.draft-sealed__list li.is-bottled .draft-sealed__verdict,
.draft-sealed__list li.is-changed .draft-sealed__verdict,
.draft-sealed__list li.is-rogue .draft-sealed__verdict {
  color: var(--color-error);
}
.draft-sealed__detail {
  grid-column: 1 / -1;
  font-size: 0.7rem;
  color: var(--color-text-muted);
}
.draft-seal-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  font-size: var(--text-xs);
}
.draft-seal-form label {
  display: flex;
  flex-direction: column;
  gap: 0.25em;
  font-weight: 600;
}
.draft-seal-form input {
  width: 10rem;
  padding: 0.4em 0.6em;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface-2);
  font-size: var(--text-base, 1rem);
  letter-spacing: 0.2em;
}
.draft-seal-form__what {
  margin: 0;
  color: var(--color-text-muted);
}
.draft-seal-form__hint {
  margin: 0;
  color: var(--color-text-faint);
}
.draft-seal-form .draft-panel__actions {
  margin-top: var(--space-1);
  align-items: center;
}
@media (max-width: 400px) {
  .draft-chips {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}