/* ==========================================================================
   Nintendo 2001 design system — from getdesign.md's "nintendo-2001" token
   file (an independent analysis of Nintendo.com's 2001 design language, not
   an official Nintendo artefact).

   Y2K console chrome: a periwinkle metal canvas, white content plates,
   a carbon nav bar with gold links, and warmth — amber, signal orange,
   Nintendo red — rationed strictly as wayfinding. Arial carries everything;
   Arial Black carries the headlines. Both are system fonts, so the app now
   loads no webfont at all.

   The system's names are the source of truth; every semantic name the app
   already used is aliased onto them below, which is what lets the whole
   interface change voice without touching nineteen stylesheets.

   Deviations from the token file, both measured rather than eyeballed:
   button text on signal orange is carbon, not the spec's white — the spec's
   own pairing reads 2.40:1 where carbon reads 6.45:1 — and the status bands
   keep this app's tinted-ground-with-darkened-ink pattern because the raw
   brand colours are signage, not table colours.

   Light-only, as the era was.
   ========================================================================== */

:root {
  color-scheme: light;

  /* --- the Nintendo 2001 palette, verbatim from the token file --- */
  --n-primary: #e60012;       /* Nintendo Red — alert */
  --n-signal: #f68d1f;        /* Signal Orange — forward cues, submit */
  --n-amber: #ecab37;         /* Amber — utility buttons, tabs, badges */
  --n-nav-gold: #e48600;      /* Nav Gold — top-nav links on carbon */
  --n-canvas: #7a8aba;        /* Periwinkle metallic — interface body */
  --n-canvas-soft: #9fbee7;   /* Pale Sky — secondary-nav strip */
  --n-lavender: #acace7;      /* Pale Lavender — hero fields */
  --n-periwinkle: #8ba1d4;    /* Light Periwinkle — raised mid panels */
  --n-chrome-indigo: #3d4f97; /* Chrome Indigo — bevels, links, chrome labels */
  --n-muted-indigo: #60619c;  /* Muted Indigo — inactive chrome */
  --n-platinum: #dedede;      /* Platinum — inset content surface */
  --n-white: #ffffff;
  --n-carbon: #21242e;        /* Carbon Navy — nav bar, ink */
  --n-hairline: #5a5f8c;      /* blended bevel divider */
  --n-teal: #206479;          /* Systems circuit-board cyan */

  /* --- type: the era's own faces, no webfont --- */
  --font-sans: Arial, "Helvetica Neue", Helvetica, sans-serif;
  --font-black: "Arial Black", "Arial Bold", Arial, sans-serif;
  --font-mono: ui-monospace, "SFMono-Regular", Menlo, monospace;

  /* Arial ships 400 and 700 and nothing between, so the ladder collapses
     onto them; Black is its own face rather than a weight. */
  --fw-light: 400;
  --fw-regular: 400;
  --fw-medium: 700;
  --fw-semibold: 700;
  --fw-bold: 700;

  --fs-h1: 40px;
  --fs-h2: 32px;
  --fs-h3: 24px;
  --fs-h4: 20px;
  --fs-lead: 18px;
  --fs-body: 16px;
  --fs-sm: 14px;
  --fs-xs: 13px;
  --fs-2xs: 11px;

  --lh-tight: 1.1;
  --lh-heading: 1.2;
  --lh-body: 1.5;

  /* The token file tracks its 11px bold labels 0.5px ≈ 0.045em. */
  --ls-tight: -0.01em;
  --ls-normal: 0;
  --ls-label: 0.045em;
  --ls-button: 0.045em;

  --sp-1: 4px;  --sp-2: 8px;   --sp-3: 12px;  --sp-4: 16px;
  --sp-5: 20px; --sp-6: 24px;  --sp-8: 32px;  --sp-10: 40px;
  --sp-12: 48px; --sp-16: 64px;

  --r-none: 0;
  --r-sm: 2px;       /* the era's controls are near-square */
  --r-md: 6px;
  --r-lg: 10px;
  --r-pill: 100px;

  --motion-dur: .2s;
  --motion-ease: ease-out;

  /* --- semantic layer --- */
  --text-primary: var(--n-carbon);
  --text-body: #33374a;
  --text-muted: var(--n-muted-indigo);
  --text-on-dark: var(--n-white);
  --text-on-dark-muted: rgba(255, 255, 255, .72);

  --surface-page: var(--n-canvas);     /* the periwinkle body */
  --surface-card: var(--n-white);      /* content plates */
  --surface-muted: var(--n-platinum);
  --surface-dark: var(--n-carbon);

  --accent: var(--n-chrome-indigo);    /* links, active chrome, marks */
  --accent-hover: #2e3c78;
  --action: var(--n-amber);            /* the primary button face */
  --action-hover: var(--n-nav-gold);
  --border-subtle: #c9cede;
  --border-default: #a7aec9;
  --focus-ring: var(--n-signal);

  /* ======================================================================
     App aliases — every name the app already used, pointed at the system.
     ====================================================================== */
  --white: var(--n-white);
  --ash: var(--n-platinum);
  --carbon: var(--n-carbon);
  --graphite: var(--text-body);
  --pewter: var(--n-muted-indigo);
  --silver-fog: #9aa0b8;
  --cloud: var(--border-subtle);
  --pale-silver: var(--border-default);

  --blue-500: var(--n-chrome-indigo);
  --blue-hover: var(--accent-hover);
  --blue-pressed: #2e3c78;
  --blue-tint: #e2e7f6;

  --bg: var(--surface-page);
  --surface: var(--surface-card);
  --surface-2: var(--surface-muted);
  --ink: var(--text-primary);
  --ink-2: var(--text-body);
  --muted: var(--text-muted);
  --line: var(--border-subtle);
  --line-strong: var(--border-default);
  --accent-soft: var(--blue-tint);
  --accent-ink: var(--n-chrome-indigo);  /* 7.60:1 on white, 6.15:1 on tint */
  --on-accent: var(--n-white);

  --surface-alt: var(--surface-muted);
  --text-strong: var(--text-primary);
  --text-tertiary: var(--text-muted);
  --text-placeholder: #9aa0b8;
  --border-strong: var(--border-default);
  --color-primary: var(--accent);
  --color-primary-hover: var(--accent-hover);
  --color-on-primary: var(--on-accent);
  --surface-frost: rgba(255, 255, 255, .85);
  --frost: var(--surface-frost);

  /* Status: the brand colours are signage, so each band keeps a tinted
     ground with darkened ink. Measured: red 5.51:1, amber 6.00:1, teal
     5.45:1 — all past AA on their own grounds. Good is the era's
     circuit-board teal; the 2001 palette has no green at all. */
  --band-green-fg: var(--n-teal);   --band-green-bg: #d9ecf1;
  --band-amber-fg: #7a5200;         --band-amber-bg: #fbeecb;
  --band-red-fg:   #b3000e;         --band-red-bg:   #fadada;
  --band-neutral-bg: var(--surface-muted);

  --crit: var(--band-red-fg);
  --crit-soft: var(--band-red-bg);
  --warn: var(--band-amber-fg);
  --warn-soft: var(--band-amber-bg);
  --good: var(--band-green-fg);
  --good-soft: var(--band-green-bg);

  /* Sequential ramp, regenerated on Chrome Indigo's own OKLCH hue (270.5°)
     and revalidated: monotone lightness, ΔL ≥ 0.06 per step, light end
     2.04:1 on white, single hue. Carbon ink holds to step 3 (4.52:1);
     white takes over at step 4. */
  --seq-0: var(--surface-muted); --seq-ink-0: var(--text-muted);
  --seq-1: #A7B5DF;             --seq-ink-1: var(--n-carbon);
  --seq-2: #899DD9;             --seq-ink-2: var(--n-carbon);
  --seq-3: #7087D6;             --seq-ink-3: var(--n-carbon);
  --seq-4: #5067C8;             --seq-ink-4: var(--n-white);
  --seq-5: #3649B2;             --seq-ink-5: var(--n-white);

  /* Fixture difficulty is deliberately NOT themed. It follows FPL's own
     official scale — bright green kind, grey neutral, red hard, maroon
     brutal — because every FPL player already reads those four colours
     without a legend, and aliasing them onto a design system's status bands
     turned "easy" teal-blue and made the strips unreadable. A convention the
     whole audience knows beats palette consistency. One measured deviation:
     the official hard-red reads 3.82:1 under white, so it is darkened one
     step to #e60f45 (4.65:1) and stays recognisably the same red. */
  --fdr-2: #00ff87;  --fdr-ink-2: var(--n-carbon);   /* 11.54:1 */
  --fdr-3: #e7e7e7;  --fdr-ink-3: var(--n-carbon);   /* 12.52:1 */
  --fdr-4: #e60f45;  --fdr-ink-4: #ffffff;           /*  4.65:1 */
  --fdr-5: #80072d;  --fdr-ink-5: #ffffff;           /* 10.57:1 */

  --font-display: var(--font-black);
  --font-text: var(--font-sans);
  --serif: var(--font-black);
  --sans: var(--font-sans);
  --mono: var(--font-sans);

  --radius-sm: var(--r-sm);
  --radius-card: var(--r-md);
  --radius-full: var(--r-pill);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

button, input, select { font: inherit; color: inherit; }

/* ---------- app chrome ---------- */

.topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 20px;
  padding: 12px 24px;
}

.brand {
  display: flex;
  flex-direction: column;
  gap: 1px;
  margin-right: auto;
}

.brand h1 {
  font-family: var(--serif);
  font-size: 20px;
  font-weight: 500;
  margin: 0;
}

.brand span {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.1em;
  color: var(--muted);
}

.chipline { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }

.pill {
  font-family: var(--mono);
  font-size: 11.5px;
  padding: 5px 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  color: var(--ink-2);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.pill b { color: var(--ink); font-weight: 500; }
.pill.live { border-color: var(--accent); color: var(--accent-ink); background: var(--accent-soft); }

/* Ten tabs overflow a 1280px bar by ~97px, which is more than padding can
   reclaim. Scrolling beats wrapping here: a bar that wraps to two rows reads
   as broken, and this scales as pages are added. Most desktop widths never
   scroll at all. */
/* The bar scrolls when it has to, but a hidden scrollbar over hidden overflow
   means a whole feature can sit off-screen with nothing to say so — at 1280px
   two tabs used to vanish silently, one of them the deadline-critical price
   page. Dropping the "N ·" numbering bought most of the width back; this
   wrapper covers the rest by fading the cut edge, which is the only signal a
   reader gets that the bar continues. */
.tabbar { position: relative; }
.tabbar::after {
  content: "";
  position: absolute;
  right: 0; top: 0; bottom: 1px;
  width: 48px;
  pointer-events: none;
  background: linear-gradient(to right, transparent, var(--surface));
  opacity: 0;
  transition: opacity .15s ease;
}
.tabbar[data-overflow="true"]::after { opacity: 1; }

.tabs {
  display: flex;
  gap: 0;
  border-bottom: 1px solid var(--line);
  background: var(--surface);
  padding: 0 24px;
  flex-wrap: nowrap;
  overflow-x: auto;
  scroll-behavior: smooth;
  scrollbar-width: none;
}
.tabs::-webkit-scrollbar { display: none; }
.tab { flex: none; }

.tab {
  background: none;
  border: 0;
  border-bottom: 2px solid transparent;
  /* 16px, not 18: nine numbered tabs overflow a 1280px bar by 18px at 18px
     padding, and a tab bar that wraps to two rows reads as broken. */
  padding: 12px 16px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  color: var(--muted);
  margin-bottom: -1px;
}

.tab:hover { color: var(--ink); }
.tab[aria-selected="true"] { color: var(--ink); border-bottom-color: var(--accent); }
.tab:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

main { padding: 24px; max-width: 1500px; margin: 0 auto; }
.panel[hidden] { display: none; }

.layout { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 24px; align-items: start; }
@media (max-width: 980px) { .layout { grid-template-columns: 1fr; } }

/* ---------- cards ---------- */

.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.card + .card { margin-top: 18px; }
.sidebar { position: sticky; top: 78px; }
@media (max-width: 980px) { .sidebar { position: static; } }

h2.card-title {
  font-family: var(--serif);
  font-size: 17px;
  font-weight: 500;
  margin: 0;
}

.label {
  font-family: var(--mono);
  font-size: 10.5px;
  color: var(--muted);
  display: block;
  margin-bottom: 5px;
}

.field { display: flex; flex-direction: column; }
.field + .field { margin-top: 14px; }

input[type="number"], input[type="text"], select {
  width: 100%;
  padding: 7px 9px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  /* Fields are white plates like every other content surface — --bg is the
     periwinkle canvas now, and a field that colour looks already filled. */
  background: var(--surface-card);
  font-family: var(--mono);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}

input[type="range"] { width: 100%; accent-color: var(--accent); }

.range-row { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.range-row output { font-family: var(--mono); font-size: 13px; color: var(--accent); font-weight: 500; }

/* The capsule is this system's signature shape, and its buttons are uppercase
   and tracked. Both are load-bearing: the pill is what separates a Tesla
   control from a generic one, and the tracking is what stops an uppercase
   label at 13px reading as a solid block. */
.btn {
  border: 1px solid var(--action);
  background: var(--action);
  color: var(--n-carbon);   /* 7.70:1 on amber; the spec's own pairing */
  padding: 9px 20px;
  border-radius: var(--r-pill);
  cursor: pointer;
  font-family: var(--font-sans);
  font-weight: var(--fw-medium);
  font-size: var(--fs-xs);
  letter-spacing: var(--ls-button);
  text-transform: uppercase;
  white-space: nowrap;
  transition: background var(--motion-dur) var(--motion-ease),
              border-color var(--motion-dur) var(--motion-ease);
}
.btn:hover { background: var(--action-hover); border-color: var(--action-hover); }
.btn:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.btn:disabled { opacity: 0.5; cursor: progress; }

/* Secondary is the translucent light fill from the hero controls, which on a
   white page resolves to a hairline outline. */
.btn.secondary, .btn.ghost {
  background: var(--surface-card);
  color: var(--text-primary);
  border-color: var(--border-default);
}
.btn.secondary:hover, .btn.ghost:hover {
  background: var(--surface-muted);
  border-color: var(--text-primary);
  color: var(--text-primary);
}

.btn.sm, .btn.tiny { padding: 6px 14px; font-size: var(--fs-2xs); }

/* ---------- stats ---------- */

.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 4px; overflow: hidden; }
.stat { background: var(--surface); padding: 14px 16px; display: flex; flex-direction: column; gap: 3px; }
.stat dt { font-family: var(--mono); font-size: 10px; color: var(--muted); }
.stat dd { margin: 0; font-family: var(--mono); font-size: 21px; font-weight: 500; font-variant-numeric: tabular-nums; }
.stat dd small { font-size: 12px; font-weight: 400; color: var(--muted); margin-left: 3px; }
.stat.accent dd { color: var(--accent); }

/* ---------- tables ---------- */

.scroll { overflow-x: auto; }
table { border-collapse: collapse; width: 100%; font-size: 13.5px; }
th {
  text-align: left;
  font-family: var(--mono);
  font-weight: 500;
  font-size: 10px;
  letter-spacing: 0.1em;
  color: var(--muted);
  border-bottom: 1px solid var(--line-strong);
  padding: 0 10px 7px 0;
  white-space: nowrap;
}
td { padding: 7px 10px 7px 0; border-bottom: 1px solid var(--line); vertical-align: middle; }
tbody tr:hover td { background: var(--surface-2); }
.n { font-family: var(--mono); font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
th.n { text-align: right; }
tr.group-head td {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--muted);
  padding-top: 14px;
  border-bottom-color: var(--line-strong);
}
tr.benched td { color: var(--muted); }
tr.benched td:first-child { opacity: 0.85; }

/* ---------- badges ---------- */

.pos {
  font-family: var(--mono);
  font-size: 9.5px;
  padding: 2px 5px;
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  color: var(--muted);
  border: 1px solid var(--line);
}

.badge {
  font-family: var(--mono);
  font-size: 9.5px;
  font-weight: 500;
  padding: 1px 5px;
  border-radius: var(--radius-sm);
  background: var(--accent);
  color: var(--on-accent);
  margin-left: 5px;
}
.badge.vc { background: var(--line-strong); color: var(--ink); }

.flag { color: var(--warn); font-size: 12px; margin-left: 5px; }
.flag.out { color: var(--crit); }

.dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-right: 6px; vertical-align: middle; }
.dot.high { background: var(--accent); }
.dot.medium { background: var(--warn); }
.dot.low { background: var(--crit); }

.name { display: inline-flex; align-items: center; gap: 6px; font-weight: 500; }
.club { font-family: var(--mono); font-size: 11px; color: var(--muted); }

/* ---------- fixture cells ---------- */

.fixtures { display: flex; gap: 3px; }
.fx {
  font-family: var(--mono);
  font-size: 10px;
  padding: 3px 5px;
  border-radius: var(--radius-sm);
  min-width: 52px;
  text-align: center;
  line-height: 1.3;
  white-space: nowrap;
}
.fx[data-fdr="2"] { background: var(--fdr-2); color: var(--fdr-ink-2); }
.fx[data-fdr="3"] { background: var(--fdr-3); color: var(--fdr-ink-3); }
.fx[data-fdr="4"] { background: var(--fdr-4); color: var(--fdr-ink-4); }
.fx[data-fdr="5"] { background: var(--fdr-5); color: var(--fdr-ink-5); }
.fx.blank { background: var(--surface-2); color: var(--muted); font-style: italic; }

/* ---------- squad slots ---------- */

.slots { display: flex; flex-direction: column; gap: 6px; }
.slot {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface-card);
  font-size: 13px;
}
.slot.empty { color: var(--muted); font-style: italic; border-style: dashed; }
.slot .grow { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.slot .n { font-size: 12px; }
.slot button {
  border: 0; background: none; cursor: pointer; color: var(--muted);
  font-size: 15px; line-height: 1; padding: 2px 4px;
}
.slot button:hover { color: var(--crit); }

/* ---------- search ---------- */

.search-wrap { position: relative; }
.results {
  position: absolute;
  z-index: 30;
  left: 0; right: 0; top: calc(100% + 4px);
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  max-height: 300px;
  overflow-y: auto;
}
.results:empty { display: none; }
.results button {
  display: flex; width: 100%; gap: 8px; align-items: center;
  border: 0; background: none; text-align: left; cursor: pointer;
  padding: 7px 10px; font-size: 13px; border-bottom: 1px solid var(--line);
}
.results button:hover, .results button:focus { background: var(--accent-soft); }
.results button .grow { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------- notes ---------- */

.note {
  font-size: 13px;
  color: var(--ink-2);
  background: var(--surface-2);
  border-left: 3px solid var(--line-strong);
  padding: 10px 14px;
  border-radius: 0 3px 3px 0;
}
.note.warn { border-left-color: var(--warn); background: var(--warn-soft); color: var(--warn); }
.note.crit { border-left-color: var(--crit); background: var(--crit-soft); color: var(--crit); }
.note ul { margin: 6px 0 0; padding-left: 18px; }

.empty-state { color: var(--muted); font-size: 14px; padding: 32px 0; text-align: center; }

.caption { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.1em; color: var(--muted); }

footer { max-width: 1500px; margin: 0 auto; padding: 24px; color: var(--muted); font-size: 12.5px; border-top: 1px solid var(--line); }
footer code { font-family: var(--mono); font-size: 11.5px; }

/* ---------- view header: pitch / list toggle + gameweek stepper ---------- */

.viewhead {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  justify-content: space-between;
}

.seg { display: inline-flex; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); overflow: hidden; }
.seg button {
  border: 0; background: none; cursor: pointer;
  padding: 6px 16px; font-size: 13px; font-weight: 500; color: var(--muted);
}
.seg button + button { border-left: 1px solid var(--line-strong); }
.seg button[aria-pressed="true"] { background: var(--accent); color: var(--on-accent); }

.gwstep { display: inline-flex; gap: 4px; flex-wrap: wrap; }
.gwstep button {
  border: 1px solid var(--line-strong); background: var(--surface); cursor: pointer;
  border-radius: var(--radius-sm); padding: 5px 11px;
  font-family: var(--mono); font-size: 11.5px; color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.gwstep button:hover { border-color: var(--accent); color: var(--accent); }
.gwstep button[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.gwstep button span { opacity: 0.75; margin-left: 5px; }

/* ---------- pitch ----------
   The pitch is a single deliberate surface in both themes: a dark green field
   with white markings. Card colours are fixed rather than themed, because they
   sit on that green and not on the page ground. */

.pitch {
  /* Not grass. A green pitch competed with the green end of the FDR scale —
     a kind fixture read as background. This is the design system's own dark
     surface instead: chromatically silent, so every red/amber/green cue on a
     card carries its own meaning. */
  --grass-a: var(--graphite);
  --grass-b: #41454B;
  --chalk: rgba(255, 255, 255, 0.22);
  position: relative;
  border-radius: var(--radius-card) var(--radius-card) 0 0;
  padding: 22px 14px 30px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  overflow: hidden;
  background:
    repeating-linear-gradient(
      to bottom,
      var(--grass-a) 0 56px,
      var(--grass-b) 56px 112px
    );
}

/* centre circle, halfway line and penalty box, drawn rather than imaged */
.pitch::before {
  content: "";
  position: absolute;
  inset: 6px;
  border: 2px solid var(--chalk);
  border-radius: var(--radius-sm);
  pointer-events: none;
}
.pitch::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 6px;
  width: 168px;
  height: 62px;
  transform: translateX(-50%);
  border: 2px solid var(--chalk);
  border-top: 0;
  border-radius: 0 0 3px 3px;
  pointer-events: none;
}

.pitch-row {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
}

.bench {
  border: 1px solid var(--line);
  border-top: 0;
  border-radius: 0 0 5px 5px;
  background: var(--surface-2);
  padding: 12px 14px 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.bench-head {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--muted);
  display: flex;
  justify-content: space-between;
}

.bench-row { display: flex; justify-content: center; flex-wrap: wrap; gap: 10px; }

/* ---------- player card on the pitch ---------- */

.pcard {
  width: 104px;
  /* The armband and stats buttons are absolutely positioned against this
     card. Without it they escape to .pitch and land in its corner. */
  position: relative;
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--white);
  color: var(--carbon);
  border: 1px solid transparent;
  font-size: 11.5px;
  text-align: center;
}

.bench .pcard { opacity: 0.94; }

.pshirt {
  position: relative;
  height: 62px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
}

.pshirt img { height: 58px; width: auto; display: block; }

.pshirt .fallback {
  width: 40px; height: 46px; border-radius: 4px;
  background: var(--line-strong);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--mono); font-size: 11px; color: var(--ink);
}

.pbadge {
  position: absolute; top: 2px; left: 2px;
  width: 17px; height: 17px; border-radius: 50%;
  background: var(--carbon); color: var(--white);
  font-family: var(--mono); font-size: 10px; font-weight: 500;
  display: flex; align-items: center; justify-content: center;
}
.pbadge.v { background: var(--white); color: var(--carbon); border: 1px solid var(--carbon); }

.pflag {
  position: absolute; top: 2px; right: 2px;
  width: 15px; height: 15px; border-radius: var(--radius-sm);
  display: flex; align-items: center; justify-content: center;
  font-size: 9px; font-weight: 500;
  background: var(--band-amber-bg); color: var(--band-amber-fg);
}
.pflag.out { background: var(--band-red-fg); color: var(--white); }

.pconf {
  position: absolute; bottom: 1px; right: 4px;
  width: 7px; height: 7px; border-radius: 50%;
}
.pconf.high { background: var(--band-green-fg); }
.pconf.medium { background: var(--band-amber-fg); }
.pconf.low { background: var(--band-red-fg); }

.pname {
  font-weight: 500;
  padding: 3px 4px;
  background: var(--ash);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pfix {
  font-family: var(--mono);
  font-size: 9.5px;
  padding: 2px 3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pfix[data-fdr="3"] { background: var(--ash); color: var(--graphite); box-shadow: inset 0 0 0 1px var(--border-strong); }
.pfix[data-fdr="4"] { background: var(--band-amber-bg); color: var(--band-amber-fg); }
.pfix[data-fdr="5"] { background: var(--band-red-bg); color: var(--band-red-fg); }
.pfix.blank { background: var(--cloud); color: var(--pewter); font-style: italic; }

.pxp {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-weight: 500;
  font-size: 12px;
  padding: 3px 4px;
  background: var(--carbon);
  color: var(--white);
}

.pitch-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  font-family: var(--mono);
  font-size: 11.5px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.pitch-summary b { color: var(--ink); font-weight: 500; }

@media (max-width: 620px) {
  .pcard { width: 84px; font-size: 10.5px; }
  .pshirt { height: 50px; }
  .pshirt img { height: 46px; }
}

/* headings inside cards */
h3 { font-family: var(--sans); font-weight: 500; font-size: 14px; margin: 4px 0 0; color: var(--ink); }

/* ---------- four-week difficulty strip on a pitch card ----------
   Fixed colours like the rest of the card: this sits on grass, not on the
   page ground, so it must read the same in either theme. */

.pcard { width: 112px; }

.pfdr {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: 1px;
  background: var(--white);
  padding: 1px 0 0;
}

.pfdr span {
  font-family: var(--mono);
  font-size: 8px;
  line-height: 1.5;
  padding: 2px 0;
  text-align: center;
  overflow: hidden;
  white-space: nowrap;
  border-bottom: 2px solid transparent;
}

/* Same difficulty scale as the fixture cells, pinned rather than tokenised. */
.pfdr span[data-fdr="2"] { background: var(--band-green-bg); color: var(--band-green-fg); }
.pfdr span[data-fdr="3"] { background: var(--ash); color: var(--graphite); box-shadow: inset 0 0 0 1px var(--border-strong); }
.pfdr span[data-fdr="4"] { background: var(--band-amber-bg); color: var(--band-amber-fg); }
.pfdr span[data-fdr="5"] { background: var(--band-red-bg); color: var(--band-red-fg); }
.pfdr span.blank { background: var(--cloud); color: var(--pewter); font-style: italic; }

/* The week currently on the pitch. */
.pfdr span.active { border-bottom-color: var(--carbon); font-weight: 500; }

.fdr-legend { display: inline-flex; align-items: center; gap: 5px; }
.fdr-legend i { width: 13px; height: 9px; border-radius: 1px; display: inline-block; }
.fdr-legend i[data-fdr="2"] { background: var(--band-green-bg); }
.fdr-legend i[data-fdr="3"] { background: var(--ash); box-shadow: inset 0 0 0 1px var(--border-strong); }
.fdr-legend i[data-fdr="4"] { background: var(--band-amber-bg); }
.fdr-legend i[data-fdr="5"] { background: var(--band-red-bg); }

@media (max-width: 620px) {
  .pcard { width: 96px; }
  .pfdr span { font-size: 7px; }
}

/* ---------- red / amber / green fixture outlook ----------
   A separate channel from the difficulty strip: the strip shows each week,
   this shows the verdict on the run as a whole. */

.prag { height: 5px; width: 100%; }
.prag[data-band="green"] { background: var(--band-green-fg); }
.prag[data-band="amber"] { background: var(--band-amber-fg); }
.prag[data-band="red"]   { background: var(--band-red-fg); }

/* Inline index pill, used in tables which sit on the page ground, so these
   take theme tokens rather than the pitch's fixed colours. */
.rag {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-size: 11.5px;
  font-weight: 500;
  padding: 2px 7px;
  border-radius: var(--radius-sm);
}
.rag[data-band="green"] { background: var(--band-green-bg); color: var(--band-green-fg); }
.rag[data-band="amber"] { background: var(--warn-soft); color: var(--warn); }
.rag[data-band="red"]   { background: var(--crit-soft); color: var(--crit); }

/* Squad rollup bar, sitting between the bench and the summary line. */
.outlook {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding: 8px 2px 0;
}

.outlook-label {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--muted);
  min-width: 148px;
}

.outlook-bar {
  display: flex;
  flex: 1 1 220px;
  height: 18px;
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--surface-2);
}

.outlook-bar span {
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 500;
  color: var(--white);
  min-width: 18px;
}

.outlook-bar span[data-band="green"] { background: var(--band-green-fg); }
.outlook-bar span[data-band="amber"] { background: var(--band-amber-fg); }
.outlook-bar span[data-band="red"]   { background: var(--band-red-fg); }

.outlook-verdict {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-size: 12px;
  font-weight: 500;
  padding: 2px 9px;
  border-radius: var(--radius-sm);
  white-space: nowrap;
}
.outlook-verdict[data-band="green"] { background: var(--band-green-bg); color: var(--band-green-fg); }
.outlook-verdict[data-band="amber"] { background: var(--warn-soft); color: var(--warn); }
.outlook-verdict[data-band="red"]   { background: var(--crit-soft); color: var(--crit); }

/* ---------- substitutions ---------- */

.pcard.clickable { cursor: pointer; transition: border-color var(--motion-dur) var(--motion-ease); }
.pcard.clickable:hover { border-color: var(--blue-500); }
.pcard.clickable:focus-visible { outline: 3px solid var(--white); outline-offset: 2px; }

.pcard.selected {
  outline: 3px solid var(--blue-500);
  outline-offset: 1px;
}

/* Armband button, revealed on hover or focus so it never competes with the
   card's own click target until you go looking for it. */
.pcap {
  position: absolute;
  top: 2px;
  left: 2px;
  z-index: 2;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 1px solid var(--carbon);
  background: rgba(255,255,255,0.92);
  color: var(--carbon);
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 500;
  line-height: 1;
  cursor: pointer;
  opacity: 0;
  padding: 0;
}
.pcard:hover .pcap, .pcap:focus-visible { opacity: 1; }
.pcap:hover { background: var(--carbon); color: var(--white); }

.subbar { display: flex; justify-content: flex-start; padding: 2px 0 0; }

.subtip {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--muted);
  padding: 4px 0;
}
.subtip.live { color: var(--accent); font-weight: 500; }
.subtip.bad { color: var(--crit); font-weight: 500; }

.edited {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  padding: 9px 14px;
  border: 1px solid var(--warn);
  background: var(--warn-soft);
  border-radius: var(--radius-sm);
  font-family: var(--mono);
  font-size: 11.5px;
  color: var(--warn);
}
.edited > span:first-child { font-weight: 500; }
.edited .delta { margin-right: auto; font-variant-numeric: tabular-nums; }
.edited .delta[data-sign="down"] { color: var(--crit); }
.edited .delta[data-sign="up"] { color: var(--accent); }

/* A gameweek carrying manual edits gets a dot in the stepper. */
.gwstep button em { font-style: normal; color: var(--warn); font-weight: 500; margin-left: 3px; }

/* Highlighted row for the recommended option in a frontier table. */
tr.hi td { background: var(--accent-soft); }
.move { font-size: 13px; padding: 2px 0; }

/* ---------- derived signal chips ---------- */

.sig-fx { display: inline-flex; align-items: center; gap: 4px; margin-right: 8px; white-space: nowrap; }

.sig-rest {
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 500;
  padding: 1px 5px;
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  color: var(--muted);
}
.sig-rest[data-band="short"] { background: var(--crit-soft); color: var(--crit); }
.sig-rest[data-band="long"] { background: var(--accent-soft); color: var(--accent-ink); }

.sig-bus {
  font-family: var(--mono);
  font-size: 9.5px;
  font-weight: 500;
  padding: 1px 5px;
  border-radius: var(--radius-sm);
}
.sig-bus[data-role="underdog"] { background: var(--warn-soft); color: var(--warn); border: 1px solid var(--warn); }
.sig-bus[data-role="favourite"] { background: var(--surface-2); color: var(--muted); border: 1px solid var(--line-strong); }

/* ---------- disclosure blocks (per-book price tables) ---------- */

details { border-top: 1px solid var(--line); padding-top: 12px; }
details summary { list-style: none; color: var(--muted); }
details summary::-webkit-details-marker { display: none; }
details summary::before { content: "▸ "; color: var(--accent); }
details[open] summary::before { content: "▾ "; }
details summary:hover { color: var(--accent); }

/* ---------- workspace switcher ----------
   Two contexts, one app: deciding this season, and researching last season.
   The switcher sits ahead of the tabs; each workspace shows only its own. */

.tabs { align-items: center; }

.wsswitch {
  display: inline-flex;
  margin: 6px 18px 6px 0;
  border: 1px solid var(--line-strong);
  border-radius: 4px;
  overflow: hidden;
  flex: none;
}

.ws {
  border: 0;
  background: none;
  cursor: pointer;
  padding: 5px 14px 6px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1px;
  line-height: 1.15;
  font-family: var(--mono);
  font-size: 12.5px;
  font-weight: 500;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

/* 10px, not 8.5: the sub-label now carries the only description of what a
   section contains, so it has to be readable rather than decorative. */
.ws span {
  font-size: 10px;
  font-weight: 500;
  opacity: 0.85;
  white-space: nowrap;
}

.ws + .ws { border-left: 1px solid var(--line-strong); }
.ws:hover { color: var(--ink); }
.ws[aria-pressed="true"] { background: var(--accent); color: var(--on-accent); }
.ws[aria-pressed="true"]:hover { color: var(--on-accent); }

/* ---------- strategy doctrines (evidence-backed plan constraints) ---------- */

.doctrines {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 16px;
  border-top: 1px solid var(--line);
  padding-top: 14px;
}
.doctrines .field { margin: 0; }
.doctrines .caption { margin-top: 5px; line-height: 1.45; }

/* evidence check chips on the squad page */
.evi { display: flex; flex-wrap: wrap; gap: 10px; }
.evi > div {
  flex: 1 1 200px;
  border: 1px solid var(--line);
  border-left: 3px solid var(--line-strong);
  border-radius: var(--radius-sm);
  padding: 9px 12px;
  background: var(--surface);
}
.evi > div[data-ok="true"] { border-left-color: var(--accent); }
.evi > div[data-ok="false"] { border-left-color: var(--warn); }
.evi b { font-family: var(--mono); font-size: 16px; font-variant-numeric: tabular-nums; }
.evi .evi-label { font-family: var(--mono); font-size: 10px; letter-spacing: 0.1em; color: var(--muted); display: block; }
.evi .evi-tip { font-size: 11.5px; color: var(--muted); display: block; margin-top: 2px; line-height: 1.4; }

/* ---------- chip uplift heatmap ---------- */

.chipcell {
  background: color-mix(in srgb, var(--accent) calc(var(--heat) * 55%), transparent);
  font-variant-numeric: tabular-nums;
}
.chipcell.picked {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
  font-weight: 500;
  color: var(--accent);
}

/* ---------- fixture ticker: one row per player, one column per gameweek ---------- */

td.tick {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  text-align: center;
  padding: 6px 4px;
  min-width: 46px;
  white-space: nowrap;
  border-right: 1px solid var(--surface);
}

/* Same 2–5 scale as everywhere else, so the colours mean one thing app-wide. */
td.tick[data-fdr="2"] { background: var(--fdr-2); color: var(--fdr-ink-2); }
td.tick[data-fdr="3"] { background: var(--fdr-3); color: var(--fdr-ink-3); }
td.tick[data-fdr="4"] { background: var(--fdr-4); color: var(--fdr-ink-4); }
td.tick[data-fdr="5"] { background: var(--fdr-5); color: var(--fdr-ink-5); }
td.tick.blank { background: var(--surface-2); color: var(--muted); font-style: italic; }

/* Hovering a row should not repaint the difficulty colours. */
tbody tr:hover td.tick { filter: brightness(0.97); }

/* ---------- pagination ---------- */

.pager {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding-top: 4px;
  font-family: var(--mono);
  font-size: 11.5px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.pager button[disabled] { opacity: 0.35; cursor: default; }

/* ---------- compact fixture run inside the stats table ----------
   Ten gameweeks have to sit beside twelve stat columns, so these are much
   tighter than the pitch strips: one line, opponent code only, no H/A suffix
   (case carries it). */

.fstrip {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(30px, 1fr);
  gap: 1px;
}

.fstrip span {
  font-family: var(--mono);
  font-size: 9px;
  line-height: 1.5;
  padding: 3px 1px;
  text-align: center;
  border-radius: 1px;
  overflow: hidden;
  white-space: nowrap;
}

.fstrip span[data-fdr="2"] { background: var(--fdr-2); color: var(--fdr-ink-2); }
.fstrip span[data-fdr="3"] { background: var(--fdr-3); color: var(--fdr-ink-3); }
.fstrip span[data-fdr="4"] { background: var(--fdr-4); color: var(--fdr-ink-4); }
.fstrip span[data-fdr="5"] { background: var(--fdr-5); color: var(--fdr-ink-5); }
.fstrip span.blank { background: var(--surface-2); color: var(--muted); }

/* ---------- wide tables: keep the player in view while scrolling across ----------
   The stats view carries twelve columns plus a ten-gameweek run, so it scrolls
   sideways on most screens. Pinning the name column means a row never becomes
   anonymous halfway through reading it. */

#pl-table td:first-child,
#pl-table th:first-child {
  position: sticky;
  left: 0;
  z-index: 2;
  background: var(--surface);
  /* hairline instead of a border, so it does not double up with the row rule */
  box-shadow: 1px 0 0 var(--line);
}

#pl-table tbody tr:hover td:first-child { background: var(--surface-2); }
#pl-table thead th:first-child { z-index: 3; }

/* The strip can afford to be a touch tighter now that it is always ten wide. */
.fstrip { grid-auto-columns: minmax(27px, 1fr); }


/* ---------- player stats modal ----------
   Opens from any player name. The system has no shadows, so the panel is
   separated by a scrim and a hairline instead. */

.pmodal {
  width: min(920px, calc(100vw - 32px));
  max-height: min(88vh, 900px);
  padding: 0;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-card);
  background: var(--surface);
  color: var(--ink);
  overflow: hidden;
}

.pmodal::backdrop { background: rgba(23, 26, 32, 0.45); }

.pmodal-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  padding: 18px 22px;
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: 0;
  background: var(--surface);
  z-index: 1;
}

.pmodal-head h2 { font-size: 24px; font-weight: 500; margin: 0; color: var(--ink); }
.pmodal-head p { margin: 3px 0 0; color: var(--muted); font-size: 13px; }
.pmodal-head-right { display: flex; align-items: center; gap: 10px; flex: none; }

.pmodal-body { padding: 20px 22px 26px; overflow-y: auto; max-height: calc(88vh - 82px); }
.pmodal-body > .stats { margin-bottom: 4px; }

.pmodal-section { padding-top: 22px; margin-top: 18px; border-top: 1px solid var(--line); }
.pmodal-section:first-of-type { border-top: 0; padding-top: 8px; margin-top: 8px; }
.pmodal-section h3 { font-size: 15px; font-weight: 500; margin: 0 0 12px; color: var(--ink); }
.pmodal-section .note { margin-top: 12px; }
.pmodal-section .caption { margin-top: 10px; display: block; line-height: 1.5; }

.pmodal-scroll { overflow-x: auto; }
.pmodal-table { width: 100%; min-width: 440px; border-collapse: collapse; font-size: 13px; }
.pmodal-table th {
  text-align: left;
  font-weight: 400;
  color: var(--muted);
  font-size: 12px;
  padding: 6px 10px 6px 0;
  border-bottom: 1px solid var(--line);
}
.pmodal-table td { padding: 8px 10px 8px 0; border-bottom: 1px solid var(--line); }
.pmodal-table tr:last-child td { border-bottom: 0; }
.pmodal-table .n { text-align: right; padding-right: 0; font-variant-numeric: tabular-nums; }
.pmodal-table th.n { text-align: right; padding-right: 0; }

/* Small status pill, on the three system bands. */

.band {
  display: inline-flex;
  align-items: center;
  font-size: 12px;
  font-weight: 500;
  padding: 3px 9px;
  border-radius: var(--radius-sm);
  white-space: nowrap;
}

.band.green { background: var(--band-green-bg); color: var(--band-green-fg); }
.band.amber { background: var(--band-amber-bg); color: var(--band-amber-fg); }
.band.red { background: var(--band-red-bg); color: var(--band-red-fg); }
.band.neutral { background: var(--surface-2); color: var(--ink-2); box-shadow: inset 0 0 0 1px var(--line-strong); }

/* where the points come from */

.pcomps { display: flex; flex-direction: column; gap: 7px; }

.pcomp {
  display: grid;
  grid-template-columns: 165px minmax(0, 1fr) 62px;
  gap: 12px;
  align-items: center;
  font-size: 13px;
}

.pcomp-label { color: var(--ink-2); }
.pcomp-track { background: var(--surface-2); border-radius: var(--radius-sm); height: 10px; overflow: hidden; }
.pcomp-bar { display: block; height: 100%; background: var(--accent); border-radius: var(--radius-sm); }
.pcomp-bar.neg { background: var(--crit); }
.pcomp-value { color: var(--ink); font-variant-numeric: tabular-nums; }

.pset { margin: 12px 0 0; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font-size: 13px; color: var(--muted); }

/* last season */

.pseason { display: grid; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: 12px; margin: 0; }
.pseason div { border-left: 2px solid var(--line); padding-left: 10px; }
.pseason dt { font-size: 11px; color: var(--muted); }
.pseason dd { margin: 2px 0 0; font-size: 17px; font-weight: 500; font-variant-numeric: tabular-nums; color: var(--ink); }

/* the affordances that open it */

button.name, button.slot-name {
  background: none;
  border: 0;
  padding: 0;
  margin: 0;
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
}

button.name:hover, button.slot-name:hover { color: var(--accent); }

.pinfo {
  /* Bottom-right, not top-right: the injury flag already owns that corner,
     and it is the one card element that must never be covered. */
  position: absolute;
  bottom: 2px;
  right: 2px;
  z-index: 3;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 1px solid var(--carbon);
  background: rgba(255, 255, 255, 0.92);
  color: var(--carbon);
  font-size: 10px;
  font-weight: 500;
  line-height: 1;
  padding: 0;
  cursor: pointer;
  opacity: 0;
  transition: opacity var(--motion-dur) var(--motion-ease);
}

.pcard:hover .pinfo, .pinfo:focus-visible { opacity: 1; }


@media (max-width: 620px) {
  .pcomp { grid-template-columns: 118px minmax(0, 1fr) 54px; gap: 8px; font-size: 12px; }
  .pmodal-head h2 { font-size: 20px; }
}

/* ---------- title race ---------- */

.title-bar { background: var(--surface-2); border-radius: var(--radius-sm); height: 12px; overflow: hidden; min-width: 60px; }
.title-bar span { display: block; height: 100%; border-radius: var(--radius-sm); }
.title-bar span[data-band="accent"] { background: var(--accent); }
.title-bar span[data-band="floor"] { background: var(--line-strong); }

.title-read { margin: 16px 0 0; padding-left: 18px; display: flex; flex-direction: column; gap: 7px; }
.title-read li { line-height: 1.55; }

/* ---------- title race: rank movement ---------- */
/* Up and down are the one place this app uses green and red as direction
   rather than as quality — an arrow with no colour is hard to read at a
   glance, and the arrow glyph carries the meaning without it. */

.mv { font-variant-numeric: tabular-nums; font-weight: 500; white-space: nowrap; }
.mv.up { color: var(--band-green-fg); }
.mv.down { color: var(--band-red-fg); }
.mv.flat { color: var(--muted); font-weight: 400; }

.title-baseline { display: flex; align-items: center; gap: 8px; }
.title-baseline .label { margin: 0; white-space: nowrap; }
.title-baseline select { width: auto; min-width: 108px; }

.title-grid { font-variant-numeric: tabular-nums; }
.title-grid th.n, .title-grid td.n { text-align: center; padding-left: 6px; padding-right: 6px; }

.gridrank {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 26px;
  padding: 2px 6px;
  border-radius: var(--radius-sm);
  font-weight: 500;
}

.gridrank.up { background: var(--band-green-bg); color: var(--band-green-fg); }
.gridrank.down { background: var(--band-red-bg); color: var(--band-red-fg); }
.gridrank.flat { color: var(--ink-2); }

/* ---------- club rank, on the players table ---------- */

.rank-range { display: flex; align-items: center; gap: 6px; }
.rank-range select { width: auto; min-width: 58px; }
.rank-range span { font-size: 12px; color: var(--muted); }

.clubrank {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  padding: 2px 6px;
  border-radius: var(--radius-sm);
  font-size: 12px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

.clubrank.green { background: var(--band-green-bg); color: var(--band-green-fg); }
.clubrank.amber { background: var(--band-amber-bg); color: var(--band-amber-fg); }
.clubrank.red { background: var(--band-red-bg); color: var(--band-red-fg); }

/* ---------- season plan ---------- */

.phase-contrast {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 14px;
  padding: 14px 16px;
  background: var(--surface-2);
  border-radius: var(--radius-card);
}

.phase-contrast .label { margin-bottom: 3px; }
.phase-contrast strong { font-size: 17px; font-weight: 500; }
.phase-contrast strong.neg { color: var(--crit); }

/* ---------- season ledger (2025/26 research) ---------- */

.lg-head, .lg-row {
  display: grid;
  grid-template-columns: 44px 104px minmax(0, 1.3fr) minmax(0, 1.4fr);
  gap: 16px;
  align-items: center;
}

.lg-head {
  padding: 0 0 8px;
  border-bottom: 1px solid var(--line);
  font-size: 11px;
  color: var(--muted);
}

.lg-row { padding: 8px 0; border-bottom: 1px solid var(--line); }

.lg-gw {
  font-variant-numeric: tabular-nums;
  font-size: 12.5px;
  color: var(--muted);
  text-align: right;
  border-right: 2px solid var(--line-strong);
  padding-right: 12px;
}

.lg-shape { font-weight: 500; font-size: 13.5px; font-variant-numeric: tabular-nums; }
.lg-shape em { font-style: normal; font-size: 11px; color: var(--muted); margin-left: 7px; }

.lg-scorer { min-width: 0; font-size: 14px; }
.lg-scorer strong { font-weight: 500; }
.lg-scorer i { font-style: normal; font-size: 12px; color: var(--accent); font-weight: 500; margin-left: 6px; }
.lg-scorer .club { display: block; font-size: 11.5px; }

.lg-flow { display: flex; align-items: center; gap: 9px; min-width: 0; }
.lg-flow-name {
  font-size: 12.5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 44%;
}
.lg-flow-bar { flex: 1; height: 5px; min-width: 30px; background: var(--surface-2); border-radius: 2px; overflow: hidden; }
.lg-flow-bar span { display: block; height: 100%; background: var(--accent); }
.lg-flow .n { font-size: 11.5px; color: var(--muted); white-space: nowrap; }

/* a chip week interrupts the ruled rows */
.lg-chip {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: 16px;
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
  background: var(--warn-soft);
  margin: 0 -18px;
  padding-left: 18px;
  padding-right: 18px;
}
.lg-chip .lg-gw { border-right-color: var(--warn); color: var(--warn); }
.lg-chip h4 { margin: 0 0 4px; font-size: 13px; font-weight: 500; color: var(--warn); }
.lg-chip p { margin: 0; font-size: 13.5px; color: var(--ink-2); max-width: 70ch; }
.lg-verified {
  margin-top: 6px !important;
  font-size: 12px !important;
  color: var(--accent-ink) !important;
}

.lg-bars { display: flex; flex-direction: column; gap: 6px; }
.lg-bar { display: grid; grid-template-columns: 54px minmax(0, 1fr) 30px; gap: 12px; align-items: center; }
.lg-bar-track { height: 12px; background: var(--surface-2); border-radius: 2px; overflow: hidden; }
.lg-bar-track i { display: block; height: 100%; background: var(--accent); }

.crit-text { color: var(--crit); }

@media (max-width: 760px) {
  .lg-head { display: none; }
  .lg-row { grid-template-columns: 40px minmax(0, 1fr); row-gap: 5px; }
  .lg-row .lg-scorer, .lg-row .lg-flow { grid-column: 2; }
}

/* ---------- blueprint ---------- */

.bp-shapes { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; }

.bp-shape {
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  padding: 16px 18px;
}
.bp-shape.is-best { border-color: var(--accent); background: var(--accent-soft); }
.bp-shape h3 { margin: 0 0 10px; font-size: 15px; font-weight: 500; display: flex; align-items: center; gap: 8px; }

.bp-figure { font-size: 28px; font-weight: 500; font-variant-numeric: tabular-nums; line-height: 1.1; }
.bp-figure span { display: block; font-size: 12px; font-weight: 400; color: var(--muted); margin-top: 4px; }

tr.bp-bench td { opacity: 0.62; }

.bp-rules td { vertical-align: middle; }
.bp-rules .rank-range { display: inline-flex; align-items: center; gap: 6px; }
.bp-rules select { width: auto; min-width: 56px; }
tr.bp-short td { background: var(--crit-soft); }

/* ---------- the model page ---------- */

.md-const {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  padding: 1px 7px;
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  font-size: 12.5px;
  color: var(--muted);
}
.md-const b { color: var(--accent-ink); font-weight: 500; font-variant-numeric: tabular-nums; }

.md-limits { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 8px; }
.md-limits li { color: var(--ink-2); line-height: 1.55; }

.up { color: var(--band-green-fg); }
.down { color: var(--band-red-fg); }

/* ---------- blueprint anchors ---------- */

.bp-anchors { display: flex; flex-wrap: wrap; gap: 8px; }

.bp-anchor {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 6px 5px 8px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  font-size: 13px;
}
.bp-anchor strong { font-weight: 500; }
.bp-anchor button {
  border: 0;
  background: none;
  cursor: pointer;
  color: var(--muted);
  font-size: 15px;
  line-height: 1;
  padding: 0 2px;
}
.bp-anchor button:hover { color: var(--crit); }

#bp-anchor-results { max-height: 280px; }


/* ==========================================================================
   Club heatmap
   ========================================================================== */

/* Refetch dims the old grid rather than replacing it, so the page never
   jumps. The transition is what keeps that from reading as a flicker. */
#heatmap-output { transition: opacity .12s ease; }

.hm-scroll {
  overflow-x: auto;
  margin-top: 18px;
  /* The club column stays put while the contributors scroll, so a row never
     loses its label. */
  scrollbar-gutter: stable;
}

.hm-grid {
  display: grid;
  gap: 2px;                       /* the surface showing through, not a border */
  min-width: 760px;
}

.hm-row {
  display: grid;
  grid-template-columns: 190px repeat(var(--hm-cols), minmax(84px, 1fr));
  gap: 2px;
}

.hm-club {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
  padding: 8px 12px 8px 0;
  position: sticky;
  left: 0;
  background: var(--surface);
  z-index: 1;
}

.hm-club-name { font-weight: 600; font-size: 14px; color: var(--ink); }
.hm-club-meta { font-size: 11px; color: var(--muted); letter-spacing: .01em; }

.hm-cell {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
  min-height: 52px;
  padding: 7px 9px;
  border-radius: 4px;
  background: var(--seq-0);
  color: var(--seq-ink-0);
  cursor: default;
  overflow: hidden;
}

.hm-cell:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 2px; }

.hm-name {
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.hm-value { font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; }

.hm-empty { background: transparent; }

.hm-s0 { background: var(--seq-0); color: var(--seq-ink-0); }
.hm-s1 { background: var(--seq-1); color: var(--seq-ink-1); }
.hm-s2 { background: var(--seq-2); color: var(--seq-ink-2); }
.hm-s3 { background: var(--seq-3); color: var(--seq-ink-3); }
.hm-s4 { background: var(--seq-4); color: var(--seq-ink-4); }
.hm-s5 { background: var(--seq-5); color: var(--seq-ink-5); }

/* Ownership is a second channel on top of the ramp, never a colour swap —
   swapping the colour would break the one thing the grid encodes. */
.hm-owned { box-shadow: inset 0 0 0 2px var(--carbon); }

.hm-head .hm-colhead,
.hm-head .hm-club {
  min-height: 0;
  padding: 0 9px 6px;
  background: transparent;
  font-size: 11px;
  font-weight: 500;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .06em;
}
.hm-head .hm-club { padding-left: 0; }

/* --- legend --- */

.hm-legend { display: flex; align-items: flex-end; gap: 0; flex-wrap: wrap; }
.hm-key-title {
  font-size: 11px; color: var(--muted); text-transform: uppercase;
  letter-spacing: .06em; margin-right: 8px; padding-bottom: 2px;
}
.hm-key { display: flex; flex-direction: column; gap: 3px; }
/* The swatch takes its fill from the same .hm-sN classes the cells wear, so
   the legend can never drift from the grid it explains. */
.hm-swatch { display: block; width: 34px; height: 10px; }
.hm-key-label { font-size: 10px; color: var(--muted); font-variant-numeric: tabular-nums; }

/* --- hover layer --- */

.hm-tip {
  position: fixed;
  z-index: 40;
  max-width: 280px;
  padding: 10px 12px;
  background: var(--carbon);
  color: var(--text-on-dark);
  border-radius: 4px;
  font-size: 12px;
  line-height: 1.5;
  pointer-events: none;
}
.hm-tip[hidden] { display: none; }
.hm-tip-sub { color: var(--pale-silver); }
.hm-tip-big { display: inline-block; font-size: 15px; font-weight: 600; margin: 4px 0; }
.hm-tip-owned { display: inline-block; margin-top: 4px; color: #A4B7E0; font-weight: 600; }

@media (max-width: 720px) {
  .hm-row { grid-template-columns: 132px repeat(var(--hm-cols), minmax(76px, 1fr)); }
  .hm-club-meta { display: none; }
}

/* ==========================================================================
   Price watch
   ========================================================================== */

#market-output { transition: opacity .12s ease; }

/* The diverging pair. Blue for buying, red for selling — not the usual green
   and red, which collapse to OKLab ΔE 4.4 under deuteranopia and would be the
   same bar to a colourblind reader; blue against this red measures 27.0. The
   signed number sits beside every bar regardless, so colour never carries the
   value alone. */
.mk-up   { color: var(--accent-ink); font-variant-numeric: tabular-nums; font-weight: 600; }
.mk-down { color: var(--crit);       font-variant-numeric: tabular-nums; font-weight: 600; }

.mk-bar { display: flex; align-items: center; gap: 10px; }

.mk-bar-track {
  position: relative;
  flex: 1;
  min-width: 120px;
  height: 14px;
  background: var(--surface-2);
  border-radius: 2px;
  overflow: hidden;
}

.mk-bar-fill { position: absolute; top: 0; bottom: 0; border-radius: 2px; }
.mk-bar-fill.up   { background: var(--accent); }
.mk-bar-fill.down { background: var(--crit); }

/* Zero, and the measured threshold. The tick is the only reference on this bar
   that means anything — past it is a player the data says has done enough. */
.mk-bar-zero {
  position: absolute; left: 50%; top: 0; bottom: 0;
  width: 1px; background: var(--line-strong);
}
.mk-bar-tick {
  position: absolute; top: 0; bottom: 0;
  width: 1px; background: var(--ink);
  opacity: .45;
}

.mk-bar-label {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  min-width: 44px;
  text-align: right;
}

.mk-past { color: var(--accent-ink); font-weight: 600; }
.mk-money { font-variant-numeric: tabular-nums; }

.mk-owned-tag {
  display: inline-block;
  padding: 1px 6px;
  border-radius: 2px;
  background: var(--accent-soft);
  color: var(--accent-ink);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
}

/* ==========================================================================
   This week — the front door
   ========================================================================== */

.wk-hero {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 24px;
  flex-wrap: wrap;
}

.wk-eyebrow {
  margin: 0 0 4px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--muted);
}

/* A deadline is only useful as a duration, so the duration is the biggest
   thing on the page and the timestamp sits under it as a footnote. */
.wk-clock {
  margin: 0;
  font-family: var(--mono);
  font-size: 40px;
  font-weight: 500;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}
.wk-clock.urgent { color: var(--crit); }

.wk-hero-side { text-align: right; }
.wk-big {
  margin: 0;
  font-family: var(--mono);
  font-size: 32px;
  font-weight: 500;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.wk-big small { font-size: 14px; color: var(--muted); margin-left: 4px; }

.wk-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
  gap: 16px;
  align-items: start;
}
.wk-grid > .card { margin: 0; }

.wk-line { margin: 8px 0 0; font-size: 14px; line-height: 1.5; }
.wk-line:first-of-type { margin-top: 14px; }

.wk-armband {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px; height: 20px;
  border-radius: 50%;
  background: var(--ink);
  color: var(--on-accent);
  font-size: 11px;
  font-weight: 600;
  vertical-align: middle;
}

.wk-warn, .wk-ok {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 7px;
  border-radius: 2px;
  font-size: 11px;
  font-weight: 600;
}
.wk-warn { background: var(--warn-soft); color: var(--warn); }
.wk-ok { background: var(--band-green-bg); color: var(--band-green-fg); }

/* Risks read as a list of consequences, ordered by how much each would ruin
   the week — news first, evidence last. */
.wk-risks { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 8px; }
.wk-risk {
  display: flex;
  gap: 10px;
  align-items: baseline;
  font-size: 13px;
  line-height: 1.5;
  padding-left: 10px;
  border-left: 2px solid var(--line-strong);
}
.wk-risk.k-news    { border-left-color: var(--crit); }
.wk-risk.k-minutes { border-left-color: var(--warn); }
.wk-risk.k-captain { border-left-color: var(--warn); }
.wk-risk.k-blank   { border-left-color: var(--crit); }

.wk-risk-kind {
  flex: none;
  min-width: 62px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--muted);
}

.wk-swap {
  margin: 14px 0 0;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  font-size: 17px;
  font-weight: 600;
}
.wk-out { color: var(--muted); text-decoration: line-through; }
.wk-arrow { color: var(--muted); font-weight: 400; }
.wk-in { color: var(--ink); }
.wk-gain { color: var(--accent-ink); }
.wk-loss { color: var(--crit); }

.wk-mini { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 5px; font-size: 13px; }
.wk-mini li { display: flex; gap: 8px; align-items: baseline; }

.wk-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 16px; }

/* A jump is a link in behaviour and a button in markup, so it is styled as
   the quiet link it is rather than competing with the page's real actions. */
.wk-jump {
  background: none;
  border: 0;
  padding: 4px 0;
  font: inherit;
  font-size: 13px;
  font-weight: 500;
  color: var(--accent-ink);
  cursor: pointer;
}
.wk-jump + .wk-jump { margin-left: 16px; }
.wk-jump:hover { text-decoration: underline; }

@media (max-width: 640px) {
  .wk-hero-side { text-align: left; }
  .wk-clock { font-size: 32px; }
}

/* ==========================================================================
   Template
   ========================================================================== */

/* The sample warning sits above everything it qualifies, because a reader who
   meets the table first has already believed it. */
.tpl-warning { border-left: 3px solid var(--warn); }

.tpl-eo { font-weight: 600; color: var(--accent-ink); font-variant-numeric: tabular-nums; }
.tpl-mine { background: var(--accent-soft); }

.tpl-new {
  display: inline-block;
  padding: 1px 6px;
  border-radius: 2px;
  background: var(--accent-soft);
  color: var(--accent-ink);
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
}

.tpl-cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 20px;
  margin-top: 16px;
}
.tpl-sub {
  margin: 0 0 10px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--muted);
}

.tpl-shapes { display: grid; gap: 6px; margin-top: 16px; }
.tpl-shape { display: flex; align-items: center; gap: 12px; font-size: 13px; }
.tpl-shape-name { min-width: 52px; font-family: var(--mono); font-variant-numeric: tabular-nums; }
.tpl-shape-bar { flex: 1; height: 10px; background: var(--surface-2); border-radius: 2px; overflow: hidden; }
.tpl-shape-bar > span { display: block; height: 100%; background: var(--accent); border-radius: 2px; }
.tpl-shape-n { min-width: 28px; text-align: right; color: var(--muted); font-variant-numeric: tabular-nums; }

/* --- template: the per-shape breakdown --- */

.tpl-shapegrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 14px;
  margin-top: 18px;
}

.tpl-shapecard {
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 14px 16px;
}

.tpl-shapehead {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  padding-bottom: 10px;
  margin-bottom: 10px;
  border-bottom: 1px solid var(--line);
}
.tpl-shapetitle {
  font-family: var(--mono);
  font-size: 16px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.tpl-slot { display: flex; gap: 10px; align-items: baseline; margin-top: 8px; }
.tpl-slotpos {
  flex: none;
  min-width: 34px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .05em;
  color: var(--muted);
}
.tpl-slotpicks { display: flex; flex-wrap: wrap; gap: 4px 10px; font-size: 13px; }

.tpl-pick em { font-style: normal; color: var(--muted); font-variant-numeric: tabular-nums; }
/* Ownership is marked, never colour-swapped — the share is the only thing the
   type weight is encoding here. */
.tpl-pick.mine { font-weight: 600; }
.tpl-pick.mine::before { content: "● "; color: var(--accent); font-size: 9px; vertical-align: middle; }

/* ==========================================================================
   My season
   ========================================================================== */

/* One bar per gameweek, scaled to the best week so far — enough to see the
   shape of a season down a column without turning the table into a chart. */
.ms-bar {
  display: block;
  height: 8px;
  background: var(--surface-2);
  border-radius: 2px;
  overflow: hidden;
}
.ms-bar > span { display: block; height: 100%; background: var(--accent); border-radius: 2px; }

.ms-chip {
  display: inline-block;
  padding: 1px 7px;
  border-radius: 2px;
  background: var(--accent-soft);
  color: var(--accent-ink);
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
}

/* ==========================================================================
   App shell — sidebar, top bar, scroll region

   The design replaces a horizontal tab bar with a fixed left rail, which is
   what finally settles the overflow problem for good: nineteen pages cannot
   run out of room in a column, so the four sections become headings rather
   than a switcher and every page is one click away at any width.

   The frame does not scroll. Only the content region does, which keeps the
   deadline and the KPI strip in view while reading down a long table.
   ========================================================================== */

.app {
  height: 100vh;
  display: flex;
  overflow: hidden;
  background: var(--surface-page);
  color: var(--text-primary);
  -webkit-font-smoothing: antialiased;
}

.side {
  width: 208px;
  flex: 0 0 208px;
  background: var(--surface-dark);   /* the carbon nav bar, turned sideways */
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.side-brand {
  height: 52px;
  flex: none;
  display: flex;
  align-items: center;
  padding: 0 18px;
  border-bottom: 1px solid rgba(255, 255, 255, .12);
  font-family: var(--font-black);
  font-size: var(--fs-xs);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--n-white);
}

.side-nav { padding: 14px 0; flex: 1; overflow-y: auto; min-height: 0; }

.side-group {
  font-size: var(--fs-2xs);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--text-on-dark-muted);
  padding: 12px 18px 6px;
}
.side-group:first-child { padding-top: 0; }

/* The active marker is an inset rule rather than a filled block: the system
   spends its one accent sparingly, and a 2px edge reads at a glance without
   turning the rail into a field of colour. */
/* Gold on carbon is the one signature this system has: 5.68:1 measured. The
   idle rows sit in dimmed white so the gold reads as "you are here" and the
   hover as "you could be". */
.side-item {
  display: block;
  width: 100%;
  text-align: left;
  font-family: var(--font-sans);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-label);
  padding: 7px 24px;
  border: 0;
  background: transparent;
  cursor: pointer;
  color: var(--text-on-dark-muted);
}
.side-item:hover { color: var(--n-white); }
.side-item[aria-selected="true"] {
  color: var(--n-nav-gold);
  box-shadow: inset 2px 0 0 var(--n-nav-gold);
}
.side-item:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: -2px; }

.side-foot {
  flex: none;
  border-top: 1px solid rgba(255, 255, 255, .12);
  padding: 14px 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.side-meta {
  font-size: var(--fs-2xs);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--text-on-dark-muted);
  line-height: 1.5;
}

.main { flex: 1; min-width: 0; display: flex; flex-direction: column; }

/* The pale-sky strip under the carbon bar — the 2001 site's secondary nav,
   ink on #9fbee7 at 8.10:1. */
.topbar {
  height: 52px;
  flex: 0 0 52px;
  border-bottom: 1px solid var(--border-default);
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  background: var(--n-canvas-soft);
}

.topbar-title {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 18px;
  min-width: 0;
  overflow: hidden;
}
.topbar-sep { color: var(--border-default); }
.topbar-view { font-size: var(--fs-sm); font-weight: var(--fw-medium); white-space: nowrap; }

/* The eyebrow is this system's telltale: 11px, medium, uppercase, tracked. */
.eyebrow {
  font-size: var(--fs-2xs);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--text-muted);
  white-space: nowrap;
}

/* Numbers that decide something, kept in the frame while the page scrolls. */
.kpis { display: flex; align-items: stretch; overflow-x: auto; flex-shrink: 1; scrollbar-width: none; }
.kpis::-webkit-scrollbar { display: none; }
.kpi {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
  padding: 0 14px;
  border-left: 1px solid var(--border-default);
  flex: 0 0 auto;
  white-space: nowrap;
}
.kpi-value {
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  font-variant-numeric: tabular-nums;
  color: var(--text-primary);
}
.kpi-value.accent { color: var(--accent); }
.kpi-value.hot { color: var(--n-primary); }

.content { flex: 1; overflow-y: auto; padding: 18px; min-height: 0; }

@media (max-width: 860px) {
  .app { height: auto; display: block; overflow: visible; }
  .side { width: auto; flex: none; border-right: 0; border-bottom: 1px solid var(--border-subtle); }
  .side-nav { display: flex; flex-wrap: wrap; gap: 2px; padding: 10px; }
  .side-group { width: 100%; padding: 8px 8px 2px; }
  .side-item { width: auto; padding: 7px 12px; }
  .side-item[aria-selected="true"] { box-shadow: inset 0 -2px 0 var(--accent); }
  .content { overflow: visible; padding: 14px; }
}

/* --- profile switcher --- */
.side-select {
  width: 100%;
  padding: 7px 9px;
  border: 1px solid var(--border-default);
  border-radius: var(--r-sm);
  background: var(--surface-page);
  font-family: var(--font-sans);
  font-size: var(--fs-xs);
}

/* The solve note states which path an answer took. Cached wears the accent
   ink — it is good news, not a warning — and fresh stays muted. */
#solve-note.cached { color: var(--accent-ink); }

/* ==========================================================================
   Team wiki
   ========================================================================== */

.wiki-picker { display: flex; flex-wrap: wrap; gap: 6px; }
.wiki-chip {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  padding: 6px 12px;
  border: 1px solid var(--border-default);
  border-radius: var(--r-sm);
  background: var(--surface-card);
  font-family: var(--font-sans);
  font-size: var(--fs-2xs);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-label);
  cursor: pointer;
  color: var(--text-body);
}
.wiki-chip em { font-style: normal; color: var(--text-muted); font-weight: var(--fw-regular); }
.wiki-chip:hover { border-color: var(--text-primary); }
.wiki-chip.active {
  background: var(--action);
  border-color: var(--action);
  color: var(--n-carbon);
}
.wiki-chip.active em { color: var(--n-carbon); }

/* Form chips read as the standard W/D/L trio; they reuse the FDR greens and
   reds so win/lose matches kind/brutal instinct. */
.wiki-form {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px; height: 16px;
  border-radius: var(--r-sm);
  font-size: 10px;
  font-weight: var(--fw-bold);
  margin-right: 2px;
}
.wiki-form.w { background: var(--fdr-2); color: var(--fdr-ink-2); }
.wiki-form.d { background: var(--fdr-3); color: var(--fdr-ink-3); }
.wiki-form.l { background: var(--fdr-4); color: var(--fdr-ink-4); }

.wiki-note {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px 16px;
  margin-top: 12px;
}
.wiki-note textarea {
  width: 100%;
  padding: 7px 9px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: var(--surface-card);
  font-family: var(--font-sans);
  font-size: 13px;
  resize: vertical;
}
@media (max-width: 640px) { .wiki-note { grid-template-columns: 1fr; } }

/* The Wikipedia line is quotation, and dresses as one: inset with a bevel
   rule rather than blending into the researched claims around it. */
.wiki-bio {
  border-left: 2px solid var(--border-default);
  padding-left: 12px;
  color: var(--text-body);
  font-size: var(--fs-xs);
}

/* ---------- the door ---------- */

#login-overlay {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--surface-page);
}
#login-overlay[hidden] { display: none; }

.login-card {
  width: min(360px, 92vw);
  background: var(--surface-card);
  border: 1px solid var(--border-default);
  border-radius: var(--r-md);
  padding: 28px 26px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.login-brand {
  font-family: var(--font-black);
  font-size: var(--fs-h4);
  letter-spacing: .18em;
  text-transform: uppercase;
  text-align: center;
}
.login-actions { display: flex; gap: 10px; justify-content: space-between; }

/* ---------- the team manager, on My squad ---------- */

.teams { display: flex; flex-direction: column; gap: 6px; margin: 10px 0 4px; }

/* Stacked, not side-by-side: in a ~260px sidebar a long team name wrapping
   around two buttons made rows different heights depending on how many
   actions they carried, which read as a rendering fault. */
.team {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface-card);
}

/* The active team is marked by an accent edge rather than a fill: the list
   sits in a sidebar already dense with controls, and a filled row there
   reads as a button. */
.team.active {
  border-color: var(--action);
  box-shadow: inset 2px 0 0 var(--action);
}

.team-id { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.team-id strong { font-size: var(--fs-xs); }
.team-id .caption { font-size: var(--fs-2xs); }
.team-actions { display: flex; gap: 4px; flex: none; }