/* =============================================================================
   fantasy.css — the Fantasy Draft Desk.

   House rules, no exceptions:
     * Newsreader UPRIGHT. No slanted type anywhere; the scope-wide
       reset below enforces the upright face on <em>/<i>/<cite>.
     * Ink + blue is the whole accent grammar. Gold survives on exactly one
       thing: the ◷ receipt glyph, which hi-receipt.css owns. This sheet
       declares no gold value at all.
     * Semantics: mint = we are ahead of the market / gained / value,
       coral = behind the market / lost / a reach. Nothing else is coloured.
     * Every colour is a token. No literal hex outside the local alias block
       and the club tints, which are franchise property and exempt.

   Everything is scoped to .fw-scope so nothing leaks into the shell.
   ============================================================================= */

.fw-scope {
  /* surfaces — aliases onto the canon */
  --fw-field: var(--hi-surface-0);
  --fw-card: var(--hi-surface-1);
  --fw-card2: var(--hi-surface-2);
  --fw-track: var(--hi-surface-3);
  --fw-line: var(--hi-line);
  --fw-hair: var(--hi-hair);

  /* ink */
  --fw-ink: var(--hi-ink);
  --fw-ink-2: var(--hi-ink-2);
  --fw-muted: var(--hi-muted);

  /* the one accent */
  --fw-blue: var(--hi-blue);
  --fw-blue-2: var(--hi-blue-2);
  --fw-blue-soft: var(--hi-blue-soft);
  --fw-blue-line: var(--hi-blue-line);
  --fw-on-blue: #ffffff;

  /* semantics */
  --fw-up: var(--hi-mint);
  --fw-up-soft: var(--hi-mint-soft);
  --fw-down: var(--hi-coral);
  --fw-down-soft: var(--hi-coral-soft);

  /* data pair */
  --fw-fill: var(--hi-data-fill);
  --fw-dtrack: var(--hi-data-track);

  /* navy furniture — identical in both themes */
  --fw-navy-a: #061529;
  --fw-navy-b: #0f4a8f;
  --fw-navy-ink: #ffffff;
  --fw-navy-lede: var(--hi-on-navy);
  --fw-navy-label: var(--hi-on-navy-dim);
  --fw-navy-hi: var(--hi-on-navy-hi);
  --fw-navy-rule: var(--hi-navy-line);
  --fw-navy-fill: var(--hi-navy-fill);

  --fw-serif: var(--hi-serif);
  --fw-sans: var(--hi-sans);
  --fw-mono: var(--hi-mono);

  --fw-t-micro: 0.5625rem;   /*  9px · uppercase eyebrows */
  --fw-t-meta: 0.625rem;     /* 10px · mono meta */
  --fw-t-meta-2: 0.6875rem;  /* 11px · mono controls */
  --fw-t-s: 0.8125rem;       /* 13px */
  --fw-t-b: 0.9375rem;       /* 15px */

  --fw-shadow: var(--hi-shadow);
  --fw-lift: var(--hi-lift);

  color: var(--fw-ink);
  font-family: var(--fw-sans);
}

[data-theme="dark"] .fw-scope { --fw-on-blue: #07101f; }

/* House rule, enforced. */
.fw-scope em, .fw-scope i, .fw-scope cite, .fw-scope address { font-style: normal; }

body { background: var(--hi-surface-0); }

.fw-main {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1.2rem 3.5rem;
}

.fw-sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* styles.css paints every bare <button> as a pill CTA. Nothing here is that
   button, so each control opts out first and repaints itself below. */
.fw-scope button {
  min-height: 0; padding: 0; border: 0; border-radius: 0; background: none;
  color: inherit; font-family: inherit; font-weight: inherit;
  letter-spacing: inherit; justify-content: flex-start; transition: none;
  cursor: pointer;
}
.fw-scope button:hover { transform: none; box-shadow: none; }
.fw-scope button:focus-visible,
.fw-scope a:focus-visible,
.fw-scope input:focus-visible {
  outline: 2px solid var(--fw-blue); outline-offset: 2px; border-radius: 4px;
}

/* styles.css gives every <button> a display value, which outranks the UA's
   [hidden] rule; without this the "show more" controls never hide. */
.fw-scope [hidden] { display: none !important; }

.fw-ink-mint { color: var(--fw-up); font-weight: 700; }
.fw-ink-coral { color: var(--fw-down); font-weight: 700; }

/* --- research desk cross-nav (canonical .rdesk structure so
       scripts/sync-desk-strip.py maintains the link set) ------------------ */
nav.rdesk .in { display: flex; gap: 8px; overflow-x: auto; padding: 0.7rem 0 0.3rem; scrollbar-width: none; align-items: center; }
nav.rdesk .in::-webkit-scrollbar { display: none; }
nav.rdesk .rlbl {
  font-family: var(--fw-mono); font-size: var(--fw-t-micro); font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--fw-muted);
  white-space: nowrap; padding-right: 4px;
}
nav.rdesk a {
  font-family: var(--fw-mono); font-size: var(--fw-t-micro); font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase; padding: 6px 12px;
  border-radius: 999px; white-space: nowrap; border: 1px solid var(--fw-line);
  color: var(--fw-muted); transition: color var(--mo-fast), border-color var(--mo-fast);
}
nav.rdesk a:hover { color: var(--fw-ink); border-color: var(--fw-blue-line); }
nav.rdesk a.here { background: var(--fw-blue); border-color: var(--fw-blue); color: var(--fw-on-blue); }

/* =============================================================================
   1. HERO — the format engine
   ============================================================================= */
.fw-hero { margin: 0.5rem 0 3rem; }

.fw-hero-band {
  position: relative; overflow: hidden; border-radius: 20px;
  padding: 1.6rem 1.5rem 1.5rem;
  background:
    radial-gradient(120% 160% at 8% 0%, rgba(255,255,255,.09), transparent 58%),
    linear-gradient(135deg, var(--fw-navy-a) 0%, var(--fw-navy-b) 118%);
  color: var(--fw-navy-ink);
  border: 1px solid var(--fw-navy-rule);
  box-shadow: var(--fw-shadow);
}
/* the rink hairlines — geometry only, no motion, no gold */
.fw-hero-band::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    repeating-linear-gradient(90deg, transparent 0 78px, var(--fw-navy-rule) 78px 79px);
  opacity: .35;
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 70%);
  mask-image: linear-gradient(180deg, transparent, #000 70%);
}
.fw-hero-band > * { position: relative; z-index: 1; }

.fw-hero-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap; margin-bottom: 1.1rem;
}
.fw-hero-issue {
  font-family: var(--fw-mono); font-size: var(--fw-t-meta); font-weight: 700;
  letter-spacing: var(--hi-lbl-track-mono); text-transform: uppercase;
  color: var(--fw-navy-label);
}
.fw-hero-stamp[data-receipt] { color: var(--fw-navy-label); }

.fw-hero-title {
  margin: 0; font-family: var(--fw-serif); font-weight: 600;
  font-size: var(--t-h1); line-height: 1.02; letter-spacing: -0.018em;
  color: var(--fw-navy-ink); text-wrap: balance;
}
.fw-hero-thesis {
  margin: 0.75rem 0 0; max-width: 60ch; font-size: 1.02rem; line-height: 1.55;
  color: var(--fw-navy-lede); text-wrap: pretty;
}

/* --- the segmented control: the page's master state -------------------- */
.fw-seg-wrap { margin-top: 1.5rem; }
.fw-seg-label {
  display: block; font-family: var(--fw-sans); font-size: var(--fw-t-micro);
  font-weight: var(--hi-lbl-w); letter-spacing: var(--hi-lbl-track);
  text-transform: uppercase; color: var(--fw-navy-label); margin-bottom: .55rem;
}
.fw-seg {
  display: flex; flex-wrap: wrap; gap: 6px;
  padding: 5px; border-radius: 14px;
  border: 1px solid var(--fw-navy-rule); background: var(--fw-navy-fill);
}
.fw-seg button {
  display: flex; flex-direction: column; align-items: flex-start; gap: 1px;
  padding: 8px 14px; border-radius: 10px; flex: 1 1 0; min-width: 88px;
  color: var(--fw-navy-lede);
  transition: background var(--mo-fast), color var(--mo-fast);
}
.fw-seg button b {
  font-family: var(--fw-sans); font-size: var(--fw-t-b); font-weight: 700;
  letter-spacing: -0.01em; line-height: 1.1;
}
.fw-seg button span {
  font-family: var(--fw-mono); font-size: var(--fw-t-meta); font-weight: 600;
  letter-spacing: var(--hi-lbl-track-mono); text-transform: uppercase;
  color: var(--fw-navy-label);
}
.fw-seg button:hover { background: rgba(255,255,255,.09); color: var(--fw-navy-ink); }
.fw-seg button[aria-selected="true"] {
  background: var(--fw-navy-ink); color: var(--fw-navy-a);
}
.fw-seg button[aria-selected="true"] span { color: var(--fw-navy-b); }

/* --- the live rail ------------------------------------------------------ */
.fw-hero-rail {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px;
  margin-top: 1.5rem; padding-top: 1.2rem;
  border-top: 1px solid var(--fw-navy-rule);
}
.fw-hero-rail > div { padding-right: 1rem; min-width: 0; }
.fw-hero-rail b {
  display: block; font-family: var(--fw-serif); font-weight: 600;
  font-size: 1.42rem; line-height: 1.15; color: var(--fw-navy-ink);
  font-variant-numeric: tabular-nums;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.fw-hero-rail span {
  display: block; margin-top: 3px; font-size: var(--fw-t-micro);
  font-weight: var(--hi-lbl-w); letter-spacing: var(--hi-lbl-track);
  text-transform: uppercase; color: var(--fw-navy-label);
}
.fw-hero-rail .hi-sk { background: rgba(255,255,255,.16); }

/* --- wide layout: the thesis and the format picker share the band ------
   At 1000px and up the band was a stack with an empty right half beside a
   60ch paragraph. It is now two columns: argument left, control right, with
   the issue line, the headline and the live rail spanning both. */
@media (min-width: 1000px) {
  .fw-hero-band {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(268px, 0.52fr);
    column-gap: 3rem;
    align-items: start;
    padding: 1.7rem 1.7rem 1.5rem;
  }
  .fw-hero-row, .fw-hero-title { grid-column: 1 / -1; }
  /* the rail tucks under the thesis rather than under everything, so the
     left column is not a paragraph over a hundred pixels of nothing */
  .fw-hero-rail { grid-column: 1; grid-row: 4; align-self: end; }
  /* two lines' worth of room whether the value takes one or two, so all four
     labels sit on the same line */
  .fw-hero-rail b {
    font-size: 1.28rem; white-space: normal; overflow: visible; text-overflow: clip;
    line-height: 1.14; min-height: 2.28em;
  }
  .fw-seg-wrap { grid-row: 3 / span 2; }
  .fw-hero-thesis {
    grid-column: 1; grid-row: 3; margin-top: .9rem;
    max-width: 46ch; font-size: 1.12rem; line-height: 1.52;
  }
  .fw-seg-wrap { grid-column: 2; margin-top: .9rem; }
  .fw-seg { flex-direction: column; flex-wrap: nowrap; gap: 3px; }
  .fw-seg button {
    flex: 0 0 auto; width: 100%; min-width: 0;
    flex-direction: row; align-items: baseline; justify-content: space-between;
    gap: .8rem; padding: 8px 13px;
  }
  .fw-hero-rail { margin-top: 1.7rem; }
}

/* --- the top-12 shelf --------------------------------------------------- */
.fw-shelf-head { margin: 2rem 0 1rem; max-width: 74ch; }
.fw-shelf-head h2 {
  margin: 0 0 .4rem; font-family: var(--fw-serif); font-weight: 600;
  font-size: var(--t-h2); line-height: 1.12; letter-spacing: -0.012em;
  color: var(--fw-ink);
}
.fw-shelf-head p { margin: 0; font-size: var(--fw-t-s); line-height: 1.6; color: var(--fw-ink-2); }

/* THE PODIUM WALL. One mount, two rows, and the split is editorial rather
   than decorative: three names carry the format's whole argument and the next
   nine are the queue behind them. Twelve cards at one weight said the twelfth
   mattered as much as the first, which is the opposite of what a ranking is.
   .fw-shelf is the mount only — it holds no columns of its own so the loading
   skeleton stacks and each row owns its own grid. */
.fw-shelf { display: grid; gap: 14px; }
.fw-podium { display: grid; gap: 12px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.fw-restshelf { display: grid; gap: 9px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 999px) { .fw-restshelf { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.fw-pcard {
  position: relative; overflow: hidden; display: block;
  padding: 13px 13px 11px; border-radius: var(--rad-sm);
  border: 1px solid var(--fw-line); background: var(--fw-card);
  box-shadow: var(--hi-ambient);
  color: inherit; text-decoration: none;
  background-image: var(--crest-l);
  background-repeat: no-repeat;
  background-position: right -22px bottom -18px;
  background-size: 108px 108px;
  transition: box-shadow var(--mo-base) var(--mo-ease), border-color var(--mo-fast);
}
[data-theme="dark"] .fw-pcard { background-image: var(--crest-d); }
/* the crest is a watermark, not a logo — knocked back to a ghost */
.fw-pcard::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: var(--fw-card); opacity: .92;
}
/* every child is lifted over the crest ghost EXCEPT the beam, which is the one
   thing that must stay absolute and behind the type — without the exclusion
   this rule outranked .fw-beam-sweep's own position and the sweep landed in
   the flow as a blank band at the top of the card. */
.fw-pcard > *:not(.fw-beam-sweep) { position: relative; z-index: 1; }
.fw-pcard:hover { border-color: var(--fw-blue-line); box-shadow: var(--fw-lift); }

/* --- ranks 1-3: the feature card ---------------------------------------- */
.fw-feat {
  padding: 15px 16px 13px;
  background-size: 168px 168px;
  background-position: right -34px bottom -30px;
}
/* the crest is knocked back further here than on a small card, because it is
   drawn twice the size: same ink weight, larger area. */
.fw-feat::before { opacity: .9; }
.fw-feat-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.fw-feat-num {
  display: block;
  font-family: var(--fw-serif); font-weight: 600;
  font-size: clamp(2.9rem, 5.2vw, 4rem); line-height: .82;
  letter-spacing: -0.045em; color: var(--fw-ink);
  font-variant-numeric: tabular-nums;
}
.fw-feat .fw-mug {
  width: 64px; height: 64px; font-size: var(--fw-t-s);
  box-shadow: 0 0 0 3px var(--tint-ring, var(--fw-line));
}
.fw-feat-id { margin-top: 13px; }
.fw-feat .fw-pc-name { font-size: 1.26rem; line-height: 1.12; }
.fw-feat .fw-pc-meta { margin-top: 3px; }
.fw-feat .fw-pc-fig b { font-size: 1.86rem; }
.fw-feat .fw-pcard-bot { margin-top: 12px; }

/* --- ranks 4-12: the same object, tighter -------------------------------- */
.fw-mini {
  display: grid; align-items: center;
  grid-template-columns: 1.7rem auto minmax(0, 1fr) auto;
  column-gap: 9px;
  padding: 8px 11px 9px;
  background-size: 76px 76px;
  background-position: right -18px bottom -16px;
}
.fw-mini > .fw-pc-rank { grid-column: 1; font-size: 1rem; }
.fw-mini > .fw-mug { grid-column: 2; }
.fw-mini-who { grid-column: 3; min-width: 0; display: block; }
.fw-mini .fw-pc-name {
  font-size: .95rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.fw-mini .fw-pc-line { margin-top: 2px; }
.fw-mini-fig { grid-column: 4; display: grid; justify-items: end; gap: 3px; line-height: 1; }
.fw-mini-fig b {
  font-family: var(--fw-serif); font-size: 1.08rem; font-weight: 600;
  color: var(--fw-ink); font-variant-numeric: tabular-nums;
}
.fw-mini .fw-zstrip { grid-column: 1 / -1; }

.fw-pcard-top { display: flex; align-items: center; gap: 10px; }
.fw-pc-rank {
  font-family: var(--fw-mono); font-size: 1.08rem; font-weight: 700;
  font-variant-numeric: tabular-nums; color: var(--fw-blue); min-width: 1.9em;
}
.fw-pc-who { min-width: 0; display: block; }
.fw-pc-name {
  display: block;
  font-family: var(--fw-serif); font-weight: 600; font-size: 1.02rem;
  line-height: 1.15; color: var(--fw-ink); letter-spacing: -0.01em;
}
.fw-pc-meta {
  display: block; margin-top: 1px; font-family: var(--fw-mono); font-size: var(--fw-t-meta);
  font-weight: 600; letter-spacing: .07em; text-transform: uppercase;
  color: var(--fw-muted);
}
/* the counting record, one mono line, between identity and the figure */
.fw-pc-line {
  display: block; margin-top: 7px;
  font-family: var(--fw-mono); font-size: var(--fw-t-meta); font-weight: 600;
  letter-spacing: .04em; color: var(--fw-muted); font-variant-numeric: tabular-nums;
}
.fw-pcard-bot {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 8px; margin-top: 11px; padding-top: 9px; border-top: 1px solid var(--fw-hair);
}
.fw-pc-fig b {
  display: block; font-family: var(--fw-serif); font-size: 1.34rem; font-weight: 600;
  line-height: 1; color: var(--fw-ink); font-variant-numeric: tabular-nums;
}
.fw-pc-fig span {
  display: block; margin-top: 3px; font-size: var(--fw-t-micro);
  font-weight: var(--hi-lbl-w); letter-spacing: var(--hi-lbl-track);
  text-transform: uppercase; color: var(--fw-muted);
}

/* the mug — monogram first, portrait attached only once it has loaded */
.fw-mug {
  position: relative; flex: 0 0 auto; width: 38px; height: 38px;
  border-radius: 999px; overflow: hidden; display: grid; place-items: center;
  background: var(--tint, var(--fw-track));
  border: 1px solid var(--fw-line);
  font-family: var(--fw-mono); font-size: var(--fw-t-meta-2); font-weight: 700;
  letter-spacing: .02em; color: var(--fw-ink);
}
.fw-mug img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.fw-mug.is-sm { width: 28px; height: 28px; font-size: var(--fw-t-meta); }

/* the chips */
.fw-chip {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 7px; border-radius: var(--rad-pill);
  font-family: var(--fw-mono); font-size: var(--fw-t-meta); font-weight: 700;
  letter-spacing: .05em; text-transform: uppercase; white-space: nowrap;
  border: 1px solid var(--fw-line); color: var(--fw-muted);
  font-variant-numeric: tabular-nums;
}
.fw-chip.is-up { color: var(--fw-up); border-color: var(--fw-up); background: var(--fw-up-soft); }
.fw-chip.is-down { color: var(--fw-down); border-color: var(--fw-down); background: var(--fw-down-soft); }
.fw-chip.is-blue { color: var(--fw-blue); border-color: var(--fw-blue-line); background: var(--fw-blue-soft); }
.fw-chip.is-flat { color: var(--fw-muted); }
/* the value chip is a ranked figure in a column of four hundred, so it is set
   to one width and centred: "+140" and "−3" sizing themselves turned a column
   into a ragged edge of pills. Tabular numerals are already on .fw-chip. */
.fw-chip.is-val { min-width: 4.4em; justify-content: center; padding-left: 4px; padding-right: 4px; }
/* the board runs the full pool, where the gap to market reaches three figures;
   the shelf only ever shows the top twelve, so it does not need the room */
#fwBoardTable .fw-chip.is-val { min-width: 5.6em; }

/* the roto per-category z strip, revealed on hover/focus */
.fw-zstrip {
  display: grid; gap: 3px; margin-top: 9px;
  grid-template-columns: repeat(7, 1fr);
  opacity: 0; max-height: 0; overflow: hidden;
  transition: opacity var(--mo-base) var(--mo-ease), max-height var(--mo-base) var(--mo-ease);
}
.fw-pcard:hover .fw-zstrip,
.fw-pcard:focus-visible .fw-zstrip,
.fw-pcard.is-open .fw-zstrip { opacity: 1; max-height: 60px; }
.fw-zstrip > div { text-align: center; }
.fw-zstrip i {
  display: block; height: 26px; border-radius: 2px; background: var(--fw-dtrack);
  position: relative;
}
.fw-zstrip i::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0;
  height: var(--h, 0%); background: var(--fw-fill); border-radius: 2px;
}
.fw-zstrip i.is-neg::after { background: var(--fw-down); }
.fw-zstrip u {
  display: block; margin-top: 2px; text-decoration: none;
  font-family: var(--fw-mono); font-size: 0.5rem; font-weight: 700;
  letter-spacing: .04em; color: var(--fw-muted);
}

/* =============================================================================
   Section furniture
   ============================================================================= */
.fw-sec { margin: 0 0 3.4rem; scroll-margin-top: 80px; }
.fw-sec-head { display: flex; align-items: baseline; gap: .85rem; flex-wrap: wrap; margin-bottom: .7rem; }
.fw-kicker {
  margin: 0; font-size: var(--fw-t-micro); font-weight: var(--hi-lbl-w);
  letter-spacing: var(--hi-lbl-track); text-transform: uppercase; color: var(--fw-blue);
  flex: 0 0 auto;
}
.fw-sec-head h2 {
  margin: 0; font-family: var(--fw-serif); font-weight: 600; font-size: var(--t-h2);
  line-height: 1.1; letter-spacing: -0.014em; color: var(--fw-ink);
}
.fw-sec-rule { flex: 1 1 60px; height: 1px; background: var(--fw-line); min-width: 24px; }
.fw-stamp { flex: 0 0 auto; }

.fw-lede {
  margin: 0 0 1.2rem; max-width: 82ch; font-size: var(--fw-t-b); line-height: 1.62;
  color: var(--fw-ink-2); text-wrap: pretty;
}
.fw-note {
  margin: 0 0 .8rem; max-width: 80ch; font-size: var(--fw-t-s); line-height: 1.58;
  color: var(--fw-muted); text-wrap: pretty;
}
.fw-h3 {
  margin: 1.6rem 0 .55rem; display: flex; align-items: center; gap: .5rem;
  font-family: var(--fw-serif); font-weight: 600; font-size: var(--t-h3);
  color: var(--fw-ink); letter-spacing: -0.01em;
}
.fw-dot { width: 9px; height: 9px; border-radius: 999px; flex: 0 0 auto; }
.fw-dot.is-up { background: var(--fw-up); }
.fw-dot.is-down { background: var(--fw-down); }

/* =============================================================================
   2. METHOD
   ============================================================================= */
.fw-method-grid {
  display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(255px, 1fr));
  margin-bottom: 1.4rem;
}
.fw-mcard {
  padding: 14px 15px; border-radius: var(--rad-sm);
  border: 1px solid var(--fw-line); background: var(--fw-card2);
}
.fw-mcard h4 {
  margin: 0 0 .35rem; font-size: var(--fw-t-micro); font-weight: var(--hi-lbl-w);
  letter-spacing: var(--hi-lbl-track); text-transform: uppercase; color: var(--fw-muted);
}
.fw-mcard p { margin: 0; font-size: var(--fw-t-s); line-height: 1.55; color: var(--fw-ink-2); }
.fw-wts { display: flex; gap: 6px; margin: .55rem 0 .5rem; }
.fw-wt {
  flex: 1 1 0; text-align: center; padding: 7px 4px 6px; border-radius: 8px;
  background: var(--fw-card); border: 1px solid var(--fw-hair);
}
.fw-wt b {
  display: block; font-family: var(--fw-mono); font-size: var(--fw-t-b); font-weight: 700;
  color: var(--fw-ink); font-variant-numeric: tabular-nums;
}
.fw-wt span {
  display: block; margin-top: 2px; font-family: var(--fw-mono); font-size: var(--fw-t-meta);
  letter-spacing: .05em; color: var(--fw-muted);
}
.fw-wt i {
  display: block; height: 3px; margin-top: 6px; border-radius: 2px;
  background: var(--fw-dtrack); position: relative; font-style: normal;
}
.fw-wt i::after {
  content: ""; position: absolute; inset: 0 auto 0 0; width: var(--w, 0%);
  background: var(--fw-fill); border-radius: 2px;
}

.fw-sys-grid { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); align-items: start; }
.fw-sys {
  padding: 13px 14px 12px; border-radius: var(--rad-sm);
  border: 1px solid var(--fw-line); background: var(--fw-card);
  box-shadow: var(--hi-ambient);
}
.fw-sys.is-active { border-color: var(--fw-blue); }
.fw-sys-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: .5rem; }
.fw-sys h4 {
  margin: 0; font-family: var(--fw-serif); font-size: 1.02rem; font-weight: 600;
  color: var(--fw-ink);
}
.fw-badge {
  font-family: var(--fw-mono); font-size: 0.5rem; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; padding: 3px 7px;
  border-radius: var(--rad-pill); white-space: nowrap;
}
.fw-badge.is-verified { background: var(--fw-ink); color: var(--fw-card); }
.fw-badge.is-cited { background: transparent; color: var(--fw-muted); border: 1px solid var(--fw-line); }
.fw-wtable { width: 100%; border-collapse: collapse; margin-bottom: .5rem; }
.fw-wtable th, .fw-wtable td {
  padding: 3px 6px 3px 0; text-align: left; font-family: var(--fw-mono);
  font-size: var(--fw-t-meta); font-variant-numeric: tabular-nums;
}
.fw-wtable th {
  font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--fw-muted); width: 4.4em;
}
.fw-wtable td { color: var(--fw-ink); font-weight: 600; }
.fw-wtable tr + tr th, .fw-wtable tr + tr td { border-top: 1px solid var(--fw-hair); }
.fw-sys p { margin: 0 0 .5rem; font-size: var(--fw-t-s); line-height: 1.5; color: var(--fw-ink-2); }
.fw-sys-src {
  display: block; font-family: var(--fw-mono); font-size: var(--fw-t-meta);
  letter-spacing: .03em; color: var(--fw-blue); text-decoration: none;
  border-bottom: 1px solid var(--fw-blue-line); padding-bottom: 1px;
  overflow-wrap: anywhere;
}
.fw-sys-src:hover { border-bottom-color: var(--fw-blue); }

.fw-method-notes { margin-top: 1.2rem; display: grid; gap: .7rem; }
.fw-mnote {
  padding-left: 13px; border-left: 2px solid var(--fw-blue-line);
  font-size: var(--fw-t-s); line-height: 1.58; color: var(--fw-ink-2); max-width: 84ch;
}
.fw-mnote b { color: var(--fw-ink); }

/* =============================================================================
   3. THE BIG BOARD
   ============================================================================= */
.fw-controls {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px;
  padding: 10px 12px; margin-bottom: 12px; border-radius: var(--rad-sm);
  border: 1px solid var(--fw-line); background: var(--fw-card2);
}
.fw-pills { display: flex; gap: 5px; flex-wrap: wrap; }
/* NOTE ON SPECIFICITY: `.fw-scope button` above resets every control, and it
   scores (0,1,1). A bare `.fw-tog` scores (0,1,0) and would lose the padding,
   border and background back to the reset. Every repainted control therefore
   carries the scope in its selector. */
.fw-pills button, .fw-scope .fw-tog {
  padding: 5px 12px; border-radius: var(--rad-pill); border: 1px solid var(--fw-line);
  font-family: var(--fw-mono); font-size: var(--fw-t-meta-2); font-weight: 700;
  letter-spacing: .07em; text-transform: uppercase; color: var(--fw-muted);
  background: var(--fw-card);
  transition: color var(--mo-fast), border-color var(--mo-fast), background var(--mo-fast);
}
.fw-pills button:hover, .fw-scope .fw-tog:hover { color: var(--fw-ink); border-color: var(--fw-blue-line); }
.fw-pills button.on { background: var(--fw-blue); border-color: var(--fw-blue); color: var(--fw-on-blue); }
.fw-scope .fw-tog[aria-pressed="true"] { background: var(--fw-ink); border-color: var(--fw-ink); color: var(--fw-card); }
.fw-togs { display: flex; gap: 5px; flex-wrap: wrap; }
.fw-teamsel { flex: 0 0 auto; }
.fw-teamsel select {
  min-height: 30px; padding: 0 8px; border-radius: var(--rad-pill);
  border: 1px solid var(--fw-line); background: var(--fw-card); color: var(--fw-ink);
  font-family: var(--fw-mono); font-size: var(--fw-t-meta-2); font-weight: 700;
  letter-spacing: .06em; cursor: pointer;
}
.fw-teamsel select:hover { border-color: var(--fw-blue-line); }
.fw-search { flex: 1 1 190px; min-width: 150px; }

/* ---- the section anchor strip -------------------------------------------
   A mono rail of the page's own mounts. Every href is an id that exists in
   the markup, so it degrades to a native jump if the handler never runs. */
.fw-jump {
  display: flex; align-items: center; gap: 4px; flex-wrap: wrap;
  margin: 0 0 .9rem; padding-bottom: .7rem; border-bottom: 1px solid var(--fw-hair);
}
.fw-jump-lbl {
  flex: 0 0 auto; padding-right: 4px;
  font-family: var(--fw-mono); font-size: var(--fw-t-micro); font-weight: 700;
  letter-spacing: var(--hi-lbl-track-mono); text-transform: uppercase; color: var(--fw-muted);
}
.fw-jump a {
  padding: 3px 8px; border-radius: var(--rad-pill); border: 1px solid transparent;
  font-family: var(--fw-mono); font-size: var(--fw-t-meta-2); font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase; color: var(--fw-muted);
  text-decoration: none; transition: color var(--mo-fast), border-color var(--mo-fast);
}
.fw-jump a:hover { color: var(--fw-blue); border-color: var(--fw-blue-line); }
/* the strip is anchors only now. Every off-page destination lives in the
   directory at #fw-hub, where it carries a glyph and a figure. */

/* =============================================================================
   THE DIRECTORY — sixteen doors under the hero.

   A tile is a link, a mark, a name, one figure and one line. The figure is the
   whole point: a reader should be able to tell what is behind a door without
   opening it. Four across on a desktop, two on a phone, and the arrival is the
   family's own .fw-rv stagger — geometry only, figures final on frame one.
   ============================================================================= */
.fw-hubgrid {
  display: grid; gap: 10px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.fw-hubtile {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; gap: 3px;
  padding: 12px 13px 11px; border-radius: var(--rad-sm);
  border: 1px solid var(--fw-line); background: var(--fw-card);
  box-shadow: var(--hi-ambient); color: inherit; text-decoration: none;
  transition: border-color var(--mo-fast), box-shadow var(--mo-base) var(--mo-ease);
}
.fw-hubtile:hover, .fw-hubtile:focus-visible {
  border-color: var(--fw-blue-line); box-shadow: var(--fw-lift);
}
.fw-hubtile:focus-visible { outline: 2px solid var(--fw-blue); outline-offset: 2px; }
.fw-hubtile .g {
  font-size: 1.05rem; line-height: 1; color: var(--fw-muted); opacity: .75;
  margin-bottom: 3px;
}
.fw-hubtile:hover .g { color: var(--fw-blue); opacity: 1; }
.fw-hubtile .nm {
  font-family: var(--fw-serif); font-size: 1.02rem; font-weight: 700;
  line-height: 1.18; color: var(--fw-ink);
}
.fw-hubtile .st {
  font-family: var(--fw-mono); font-size: var(--fw-t-meta-2); font-weight: 700;
  color: var(--fw-blue); font-variant-numeric: tabular-nums; letter-spacing: .03em;
}
.fw-hubtile .nt {
  font-family: var(--fw-mono); font-size: var(--fw-t-micro); font-weight: 600;
  letter-spacing: .07em; text-transform: uppercase; color: var(--fw-muted);
  margin-top: 2px;
}
.fw-search input {
  width: 100%; box-sizing: border-box; padding: 7px 11px; border-radius: 8px;
  border: 1px solid var(--fw-line); background: var(--fw-card);
  font-family: var(--fw-sans); font-size: var(--fw-t-s); color: var(--fw-ink);
}
.fw-search input::placeholder { color: var(--fw-muted); }

/* A box that scrolls sideways must SAY it scrolls sideways. The two covers
   are painted with background-attachment:local so they ride the content and
   retract at each end; the two shadows are attached to the box and stay put.
   The result: a soft edge appears only on the side there is more to see.
   Colours are mixed from the ink token — no literal value enters this sheet. */
.fw-tablewrap {
  overflow-x: auto; -webkit-overflow-scrolling: touch;
  border: 1px solid var(--fw-line); border-radius: var(--rad-sm);
  background: var(--fw-card);
  background-image:
    linear-gradient(to right, var(--fw-card) 40%, transparent),
    linear-gradient(to left, var(--fw-card) 40%, transparent),
    linear-gradient(to right, color-mix(in srgb, var(--fw-ink) 16%, transparent), transparent),
    linear-gradient(to left, color-mix(in srgb, var(--fw-ink) 16%, transparent), transparent);
  background-repeat: no-repeat;
  background-size: 30px 100%, 30px 100%, 14px 100%, 14px 100%;
  background-position: left center, right center, left center, right center;
  background-attachment: local, local, scroll, scroll;
}
.fw-table {
  width: 100%; border-collapse: collapse; font-size: var(--fw-t-s);
  font-variant-numeric: tabular-nums; min-width: 940px;
}
/* nine columns over 1176px handed every spare pixel to the name cell, which
   opened a hand's width of nothing between the goalie and his club. The
   slack is distributed instead. */
.fw-gtable { min-width: 760px; }
.fw-gtable th:nth-child(1), .fw-gtable td:nth-child(1) { width: 8%; }
.fw-gtable th:nth-child(2), .fw-gtable td:nth-child(2) { width: 25%; }
.fw-gtable th:nth-child(3), .fw-gtable td:nth-child(3) { width: 8%; }
.fw-gtable th:nth-child(4), .fw-gtable td:nth-child(4) { width: 7%; }
.fw-table thead th {
  position: sticky; top: 0; z-index: 2;
  background: var(--fw-card2); border-bottom: 1px solid var(--fw-line);
  padding: 8px 9px; text-align: left; white-space: nowrap;
  font-family: var(--fw-sans); font-size: var(--fw-t-micro); font-weight: var(--hi-lbl-w);
  letter-spacing: var(--hi-lbl-track); text-transform: uppercase; color: var(--fw-muted);
}
.fw-table thead th.fw-num, .fw-table td.fw-num { text-align: right; }
.fw-th-sort button {
  font: inherit; color: inherit; letter-spacing: inherit; text-transform: inherit;
  display: inline-flex; align-items: center; gap: 4px;
}
.fw-th-sort button:hover { color: var(--fw-ink); }
.fw-th-sort.is-on button { color: var(--fw-blue); }
.fw-sar { width: 0; height: 0; border-left: 3.5px solid transparent; border-right: 3.5px solid transparent; }
.fw-th-sort.is-on .fw-sar { border-top: 4px solid currentColor; }
.fw-th-sort.is-on.is-asc .fw-sar { border-top: 0; border-bottom: 4px solid currentColor; }

.fw-table tbody td {
  padding: 7px 9px; border-bottom: 1px solid var(--fw-hair); vertical-align: middle;
  color: var(--fw-ink);
}
.fw-table tbody tr.fw-row:nth-child(4n+3) td { background: var(--fw-card2); }
.fw-table tbody tr.fw-row:hover td { background: var(--fw-blue-soft); }
.fw-rank {
  font-family: var(--fw-mono); font-weight: 700; color: var(--fw-blue);
  white-space: nowrap;
}
.fw-rank.is-g { color: var(--fw-muted); }
/* the first ten seats. A board of four hundred rows set at one weight makes
   rank one look like rank three hundred; the display serif and full ink give
   the top of the table the weight the page is actually selling. Mono stays
   everywhere else, so the two sets never have to be told apart by size alone. */
.fw-rank.is-lead {
  font-family: var(--fw-serif); font-weight: 600; font-size: 1.24rem;
  letter-spacing: -0.02em; color: var(--fw-ink); font-variant-numeric: tabular-nums;
}
/* the expand affordance is DRAWN, not typed: a glyph triangle is one missing
   font away from rendering as a dot, and this control has no text label. */
.fw-scope .fw-exp {
  width: 16px; height: 16px; padding: 0; display: inline-grid; place-items: center;
  border-radius: 3px; color: var(--fw-muted); flex: 0 0 auto;
}
.fw-scope .fw-exp::before {
  content: ""; width: 0; height: 0;
  border-top: 4px solid transparent; border-bottom: 4px solid transparent;
  border-left: 6px solid currentColor;
  transition: transform var(--mo-fast);
}
.fw-scope .fw-exp[aria-expanded="true"]::before { transform: rotate(90deg); }
.fw-scope .fw-exp:hover { color: var(--fw-blue); }
.fw-namecell { display: flex; align-items: center; gap: 8px; min-width: 0; }
.fw-namecell a {
  font-family: var(--fw-serif); font-size: .96rem; font-weight: 600; color: var(--fw-ink);
  text-decoration: none; white-space: nowrap; letter-spacing: -0.008em;
}
.fw-namecell a:hover { color: var(--fw-blue); text-decoration: underline; text-underline-offset: .16em; }
.fw-tags { display: inline-flex; gap: 3px; }
.fw-tag {
  font-family: var(--fw-mono); font-size: 0.5rem; font-weight: 700; letter-spacing: .06em;
  padding: 1px 4px; border-radius: 3px; border: 1px solid var(--fw-line); color: var(--fw-muted);
}
.fw-tag.is-blue { color: var(--fw-blue); border-color: var(--fw-blue-line); }
.fw-tag.is-down { color: var(--fw-down); border-color: var(--fw-down); }
.fw-crestmini { width: 17px; height: 17px; vertical-align: -3px; opacity: .85; }
.fw-teamcell { font-family: var(--fw-mono); font-size: var(--fw-t-meta-2); font-weight: 700; letter-spacing: .06em; }
.fw-dim { color: var(--fw-muted); }
/* the counting line under the 25-26 per-game figure: what the decimal is
   made of, at meta size so the figure keeps the cell's voice */
.fw-cellctx {
  display: block; margin-top: 1px;
  font-family: var(--fw-mono); font-size: var(--fw-t-meta); font-weight: 600;
  letter-spacing: .02em; color: var(--fw-muted); white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
/* an unstarred star must read as OFF in both themes. --fw-line is a light
   value in the dark palette, so a bare line-coloured glyph rendered bright
   there and every row looked starred. Muted ink at low opacity does not. */
.fw-star {
  font-size: .95rem; line-height: 1; color: var(--fw-muted); opacity: .34;
  padding: 2px 4px;
  transition: color var(--mo-fast), opacity var(--mo-fast);
}
.fw-star:hover { color: var(--fw-blue); opacity: 1; }
.fw-star.on { color: var(--fw-blue); opacity: 1; }

/* the half-season delta is a figure, not a badge. Fifty rows of pill on top
   of fifty rows of value pill was two chips a row and no hierarchy. */
.fw-delta {
  font-family: var(--fw-mono); font-size: var(--fw-t-meta-2); font-weight: 700;
  font-variant-numeric: tabular-nums; letter-spacing: .03em; color: var(--fw-muted);
}
.fw-delta.is-up { color: var(--fw-up); }
.fw-delta.is-down { color: var(--fw-down); }

/* the inline detail drawer */
.fw-drawer td { background: var(--fw-card2); padding: 0 !important; border-bottom: 1px solid var(--fw-line); }
.fw-drawer-in { padding: 14px 16px 16px; display: grid; gap: 14px; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
/* a grid item's min-width is auto, so the fourteen-column season table held
   its own column open and pushed the caveat line and the z-bars off the side
   of the drawer. Zero lets the scroll box below actually do its job. */
.fw-drawer-in > div { min-width: 0; }
.fw-drawer h5 {
  margin: 0 0 .4rem; font-size: var(--fw-t-micro); font-weight: var(--hi-lbl-w);
  letter-spacing: var(--hi-lbl-track); text-transform: uppercase; color: var(--fw-muted);
}
/* NAME COLLISION, fixed: .fw-mini is also the shelf's mini CARD, which is a
   four-column grid (see the card block above). Unscoped, that display:grid
   reached the drawer's season table and laid fourteen <td>s out as one grid
   item — every figure in the row ran together with no column at all. Every
   rule for the drawer table is scoped to its scroll box, and the display is
   restated so the card's grid can never win it again. */
.fw-miniwrap .fw-mini {
  display: table; width: auto; min-width: 100%; border-collapse: collapse;
  font-family: var(--fw-mono); font-size: var(--fw-t-meta);
}
.fw-miniwrap .fw-mini th, .fw-miniwrap .fw-mini td {
  padding: 4px 6px 4px 0; text-align: right; white-space: nowrap;
}
.fw-miniwrap .fw-mini th:first-child, .fw-miniwrap .fw-mini td:first-child { text-align: left; }
.fw-miniwrap .fw-mini thead th {
  font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--fw-muted);
  border-bottom: 1px solid var(--fw-line);
}
.fw-miniwrap .fw-mini tbody td { color: var(--fw-ink); border-bottom: 1px solid var(--fw-hair); }
.fw-zbars { display: grid; gap: 5px; }
.fw-zrow { display: grid; grid-template-columns: 2.6em 1fr 2.9em; align-items: center; gap: 7px; }
.fw-zrow span {
  font-family: var(--fw-mono); font-size: var(--fw-t-meta); font-weight: 700;
  letter-spacing: .05em; color: var(--fw-muted);
}
.fw-zrow b {
  font-family: var(--fw-mono); font-size: var(--fw-t-meta); font-weight: 700;
  color: var(--fw-ink); text-align: right; font-variant-numeric: tabular-nums;
}
.fw-zbar { position: relative; height: 8px; border-radius: 2px; background: var(--fw-dtrack); }
.fw-zbar::before { content: ""; position: absolute; top: -2px; bottom: -2px; left: 50%; width: 1px; background: var(--fw-line); }
.fw-zbar i {
  position: absolute; top: 0; bottom: 0; border-radius: 2px; background: var(--fw-fill);
  left: var(--l, 50%); width: var(--w, 0%);
}
.fw-zbar i.is-neg { background: var(--fw-down); }

/* --- the form curve, at the head of the drawer --------------------------
   The season table under it is three rows of aggregate; this is the same
   three years drawn on the league's own calendar, so an absence reads as an
   absence and a second half reads as a second half. The plot box is stretched
   to the drawer's width (preserveAspectRatio="none"), so every stroke in it
   carries vector-effect="non-scaling-stroke" and every round marker lives on
   the HTML layer above it. */
.fw-trend { margin: 0 0 18px; }
.fw-trend-body {
  display: grid; grid-template-columns: minmax(0, 1fr) 150px;
  gap: 16px; align-items: start;
}
.fw-trend-plot { min-width: 0; }
.fw-trend-scale { position: relative; height: 15px; }
.fw-trend-canvas { position: relative; }
.fw-trend-svg { display: block; width: 100%; height: 116px; }

.fw-trend-band { fill: var(--fw-dtrack); opacity: .38; }
/* coral, faint: the absence is marked, not shouted */
.fw-trend-out { fill: var(--fw-down); opacity: .14; }
/* Both tints have to survive the inversion. The dark data-track (#1a2740) is
   deliberately a near-twin of surface-2, so at any opacity it draws NOTHING
   on this card — the alternating season band switches to the ink instead,
   which is light on that ground and reads at a whisper. */
:root[data-theme="dark"] .fw-trend-band { fill: var(--fw-ink); opacity: .07; }
:root[data-theme="dark"] .fw-trend-out { opacity: .34; }
.fw-trend-rule { stroke: var(--fw-line); stroke-width: 1; }
.fw-trend-tick { stroke: var(--fw-muted); stroke-width: 1; opacity: .72; }
.fw-trend-avg { stroke: var(--fw-muted); stroke-width: 1; stroke-dasharray: 4 3; opacity: .9; }
.fw-trend-line {
  stroke: var(--fw-fill); stroke-width: 1.9;
  stroke-linejoin: round; stroke-linecap: round;
}

.fw-trend-season {
  position: absolute; top: 0; transform: translateX(-50%);
  font-family: var(--fw-mono); font-size: var(--fw-t-micro); font-weight: 700;
  letter-spacing: .07em; color: var(--fw-muted); white-space: nowrap;
}
.fw-trend-base { stroke: var(--fw-line); stroke-width: 1; }
.fw-trend-zero { stroke: var(--fw-ink-2, var(--fw-muted)); stroke-width: 1; opacity: .45; }
.fw-trend-avgl {
  position: absolute; left: 0; transform: translateY(-50%);
  padding: 0 4px 0 0; background: var(--fw-card2); border-radius: 2px;
  font-family: var(--fw-mono); font-size: var(--fw-t-micro); font-weight: 700;
  letter-spacing: .05em; color: var(--fw-muted); white-space: nowrap; pointer-events: none;
}
.fw-trend-dot {
  position: absolute; width: 7px; height: 7px; margin: -3.5px 0 0 -3.5px;
  border-radius: 50%; background: var(--fw-fill);
  box-shadow: 0 0 0 2px var(--fw-card2);
}

.fw-trend-figs {
  display: grid; align-content: start;
  border-left: 1px solid var(--fw-hair); padding-left: 12px;
}
.fw-trend-fig {
  display: flex; align-items: baseline; justify-content: space-between; gap: 8px;
  padding: 5px 0; border-bottom: 1px solid var(--fw-hair);
}
.fw-trend-fig:last-child { border-bottom: 0; }
.fw-trend-fig span {
  font-family: var(--fw-mono); font-size: var(--fw-t-micro); font-weight: 700;
  letter-spacing: .05em; text-transform: uppercase; color: var(--fw-muted);
}
.fw-trend-fig b {
  font-family: var(--fw-mono); font-size: var(--fw-t-s); font-weight: 700;
  color: var(--fw-ink); font-variant-numeric: tabular-nums; white-space: nowrap;
}
.fw-trend-fig.is-wide { display: block; }
.fw-trend-fig.is-wide b { display: block; margin-top: 2px; }
/* <i> is a hook here, never a voice — the desk sets no italics */
.fw-trend-arrow, .fw-trend-slash { font-style: normal; color: var(--fw-muted); padding: 0 5px; }
.fw-trend-up { color: var(--fw-up); }
.fw-trend-down { color: var(--fw-down); }

/* draw-in: the ink is wiped in left to right on open, which is the direction
   the three years actually ran. Only inside .fw-motion, which is stamped on
   <html> only when the reader has not asked for less of it — under reduce the
   curve is simply there, complete, on the first frame. */
@keyframes fw-trend-draw { to { clip-path: inset(0 0 0 0); } }
@keyframes fw-trend-mark { from { opacity: 0; } to { opacity: 1; } }
.fw-motion .fw-trend-ink {
  clip-path: inset(0 100% 0 0);
  animation: fw-trend-draw 780ms var(--mo-ease) both;
}
.fw-motion .fw-trend-dot, .fw-motion .fw-trend-avgl {
  animation: fw-trend-mark 260ms var(--mo-ease) 640ms both;
}

/* the meta line under a card-row name. It restates the position, club, age,
   market rank and half-season delta that have their own columns on a desktop;
   below 600px those columns have no head to sit under, so they are printed
   here instead. Never visible at both sizes at once. */
.fw-rowmeta { display: none; }

/* fourteen category columns inside a drawer will not fit a phone. The mini
   table scrolls in its own box so the drawer can never widen the viewport. */
.fw-miniwrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* the phone's stand-in for the sortable column heads — see .fw-sortbar in the
   mobile block, where it is the only place it paints */
.fw-sortbar { display: none; }

.fw-board-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 11px; flex-wrap: wrap; }
.fw-board-count { font-family: var(--fw-mono); font-size: var(--fw-t-meta); letter-spacing: .05em; color: var(--fw-muted); }
.fw-scope .fw-more, .fw-scope .fw-print {
  padding: 8px 18px; border-radius: var(--rad-pill); border: 1px solid var(--fw-blue);
  background: var(--fw-blue); color: var(--fw-on-blue);
  font-family: var(--fw-mono); font-size: var(--fw-t-meta-2); font-weight: 700;
  letter-spacing: .09em; text-transform: uppercase;
  transition: background var(--mo-fast);
}
.fw-scope .fw-more:hover, .fw-scope .fw-print:hover { background: var(--fw-blue-2); border-color: var(--fw-blue-2); }
/* the second action on the sheet: same shape, outline weight, so "print" stays
   the primary and the export does not compete with it */
.fw-scope .fw-print.is-ghost {
  background: transparent; border-color: var(--fw-line); color: var(--fw-ink-2);
}
.fw-scope .fw-print.is-ghost:hover {
  background: var(--fw-blue-soft); border-color: var(--fw-blue-line); color: var(--fw-blue);
}

/* =============================================================================
   4. RISERS / FADES
   ============================================================================= */
.fw-two { display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
.fw-cards { display: grid; gap: 8px; }
.fw-vcard {
  position: relative; overflow: hidden; display: grid;
  grid-template-columns: auto 1fr auto; align-items: center; gap: 10px;
  padding: 9px 12px; border-radius: var(--rad-sm);
  border: 1px solid var(--fw-line); background: var(--fw-card);
  color: inherit; text-decoration: none;
  transition: border-color var(--mo-fast), box-shadow var(--mo-base) var(--mo-ease);
}
.fw-vcard:hover { border-color: var(--fw-blue-line); box-shadow: var(--hi-ambient); }
.fw-vcard-main { min-width: 0; }
.fw-vcard-name {
  display: block;
  font-family: var(--fw-serif); font-size: .98rem; font-weight: 600; color: var(--fw-ink);
  letter-spacing: -0.008em;
}
.fw-vcard-why {
  display: block; margin-top: 2px; font-family: var(--fw-mono); font-size: var(--fw-t-meta);
  letter-spacing: .03em; color: var(--fw-muted); line-height: 1.45;
}
.fw-vcard-ranks { text-align: right; white-space: nowrap; }
.fw-vcard-ranks b {
  display: block; font-family: var(--fw-mono); font-size: 1.02rem; font-weight: 700;
  color: var(--fw-ink); line-height: 1.05; font-variant-numeric: tabular-nums;
}
.fw-vcard-ranks span {
  display: block; margin-top: 2px; font-family: var(--fw-mono); font-size: var(--fw-t-meta);
  letter-spacing: .04em; color: var(--fw-muted);
}
.fw-vcard.is-up .fw-vcard-ranks b { color: var(--fw-up); }
.fw-vcard.is-down .fw-vcard-ranks b { color: var(--fw-down); }

/* ---- AVAILABILITY ---------------------------------------------------------
   Games played over games possible. Plain arithmetic, labelled, with the
   fraction spelled out underneath so the percentage is never the only claim.
   Spans throughout: the block is planted inside .fw-vcard-main, a <span>. */
.fw-avail {
  display: grid; grid-template-columns: auto minmax(48px, 1fr) auto;
  align-items: center; column-gap: 8px; row-gap: 2px;
  margin-top: 9px; padding-top: 8px; border-top: 1px solid var(--fw-hair);
}
.fw-avail-lbl {
  font-family: var(--fw-mono); font-size: var(--fw-t-micro); font-weight: 700;
  letter-spacing: var(--hi-lbl-track-mono); text-transform: uppercase; color: var(--fw-muted);
}
.fw-avail-bar { position: relative; height: 7px; border-radius: 2px; background: var(--fw-dtrack); }
.fw-avail-bar i {
  position: absolute; inset: 0 auto 0 0; width: var(--w, 0%);
  border-radius: 2px; background: var(--fw-fill);
}
.fw-avail b {
  font-family: var(--fw-mono); font-size: var(--fw-t-meta-2); font-weight: 700;
  color: var(--fw-ink); font-variant-numeric: tabular-nums;
}
.fw-avail-note {
  grid-column: 1 / -1;
  font-family: var(--fw-mono); font-size: var(--fw-t-meta); letter-spacing: .02em;
  color: var(--fw-muted);
}
.fw-avail.is-tight { margin-top: 6px; padding-top: 6px; }

/* =============================================================================
   5. SURGERS
   ============================================================================= */
.fw-surge { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(258px, 1fr)); }
.fw-scard {
  padding: 11px 13px 12px; border-radius: var(--rad-sm);
  border: 1px solid var(--fw-line); background: var(--fw-card);
  color: inherit; text-decoration: none; display: block;
  transition: border-color var(--mo-fast);
}
.fw-scard:hover { border-color: var(--fw-blue-line); }
.fw-scard-top { display: flex; align-items: center; gap: 8px; margin-bottom: 9px; }
.fw-scard-top .fw-vcard-name { flex: 1 1 auto; min-width: 0; }
.fw-pair { display: grid; gap: 9px; }
/* each half is bar + the counting line the bar is made of. The line is mono
   and one notch down, so the card gains a record and not a paragraph. */
.fw-half { display: grid; gap: 2px; }
.fw-halfmeta {
  padding-left: calc(1.9em + 8px);
  font-family: var(--fw-mono); font-size: var(--fw-t-meta); font-weight: 600;
  letter-spacing: .02em; color: var(--fw-muted); font-variant-numeric: tabular-nums;
}
.fw-pairrow { display: grid; grid-template-columns: 1.9em 1fr 2.6em; align-items: center; gap: 8px; }
.fw-pairrow span {
  font-family: var(--fw-mono); font-size: var(--fw-t-meta); font-weight: 700;
  letter-spacing: .05em; color: var(--fw-muted);
}
.fw-pairrow b {
  font-family: var(--fw-mono); font-size: var(--fw-t-meta); font-weight: 700;
  color: var(--fw-ink); text-align: right; font-variant-numeric: tabular-nums;
}
.fw-pbar { height: 9px; border-radius: 2px; background: var(--fw-dtrack); position: relative; }
.fw-pbar i { position: absolute; inset: 0 auto 0 0; width: var(--w, 0%); border-radius: 2px; background: var(--fw-fill); }
.fw-pbar.is-h1 i { background: var(--fw-dtrack); border: 1px solid var(--fw-fill); box-sizing: border-box; }
.fw-caveat {
  margin-top: 8px; padding-top: 7px; border-top: 1px solid var(--fw-hair);
  font-family: var(--fw-mono); font-size: var(--fw-t-meta); letter-spacing: .03em;
  color: var(--fw-muted);
}

/* =============================================================================
   6. MOVES
   ============================================================================= */
/* align-items:start is load-bearing: a stretched grid made a two-arrival club
   as tall as a five-arrival club and the gallery ran to acres of nothing. */
.fw-moves { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(268px, 1fr)); align-items: start; }
.fw-team {
  position: relative; overflow: hidden; padding: 12px 14px 11px;
  border-radius: var(--rad-sm); border: 1px solid var(--fw-line); background: var(--fw-card);
  background-image: var(--crest-l); background-repeat: no-repeat;
  background-position: right -16px top -14px; background-size: 96px 96px;
}
[data-theme="dark"] .fw-team { background-image: var(--crest-d); }
.fw-team::before { content: ""; position: absolute; inset: 0; background: var(--fw-card); opacity: .92; }
.fw-team > * { position: relative; z-index: 1; }
.fw-team-head { display: flex; align-items: center; gap: 9px; margin-bottom: 9px; padding-bottom: 8px; border-bottom: 1px solid var(--fw-hair); }
/* the club crest as a background — an <img> here would be one 404 away from
   being deleted by the site's global image-error listener */
.fw-crestbox {
  flex: 0 0 auto; width: 26px; height: 26px;
  background-image: var(--crest-l); background-size: contain;
  background-repeat: no-repeat; background-position: center;
}
[data-theme="dark"] .fw-crestbox { background-image: var(--crest-d); }
.fw-team-head b { font-family: var(--fw-serif); font-size: 1.05rem; font-weight: 600; color: var(--fw-ink); }
.fw-team-head span { margin-left: auto; font-family: var(--fw-mono); font-size: var(--fw-t-meta); color: var(--fw-muted); letter-spacing: .06em; text-transform: uppercase; }
.fw-mrow { display: grid; grid-template-columns: 1fr auto; gap: 8px; align-items: center; padding: 6px 0; border-bottom: 1px solid var(--fw-hair); }
.fw-mrow:last-child { border-bottom: 0; }
.fw-mrow a { font-family: var(--fw-serif); font-size: .95rem; font-weight: 600; color: var(--fw-ink); text-decoration: none; }
.fw-mrow a:hover { color: var(--fw-blue); }
.fw-mpath { display: block; margin-top: 1px; font-family: var(--fw-mono); font-size: var(--fw-t-meta); color: var(--fw-muted); letter-spacing: .04em; }
.fw-mmore {
  display: block; width: 100%; padding: 6px 0 2px; text-align: left;
  font-family: var(--fw-mono); font-size: var(--fw-t-meta); font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase; color: var(--fw-blue);
}
.fw-mmore:hover { color: var(--fw-blue-2); }
.fw-mfig { text-align: right; white-space: nowrap; }
.fw-mfig b { display: block; font-family: var(--fw-mono); font-size: var(--fw-t-s); font-weight: 700; color: var(--fw-ink); font-variant-numeric: tabular-nums; }
.fw-mfig span { display: block; font-family: var(--fw-mono); font-size: var(--fw-t-meta); color: var(--fw-muted); }

/* =============================================================================
   7. YOUTH
   ============================================================================= */
.fw-soph { grid-template-columns: repeat(auto-fill, minmax(310px, 1fr)); }
.fw-rookie {
  border-top: 2px solid var(--fw-line); border-bottom: 1px solid var(--fw-line);
  padding: 12px 0; margin-top: .3rem;
}
.fw-rule-line {
  margin: 0 0 .9rem; font-family: var(--fw-serif); font-size: 1.04rem; font-weight: 600;
  color: var(--fw-ink); letter-spacing: -0.008em;
}
.fw-rstrip { display: grid; gap: 8px; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }
.fw-rcard {
  display: flex; align-items: center; gap: 9px; padding: 8px 11px;
  border-radius: var(--rad-sm); border: 1px dashed var(--fw-line); background: var(--fw-card2);
  color: inherit; text-decoration: none;
}
.fw-rcard:hover { border-color: var(--fw-blue-line); }
.fw-rcard-main { min-width: 0; flex: 1 1 auto; }
.fw-vetonly { margin-top: 1rem; }

/* =============================================================================
   9. TIERS
   ============================================================================= */
.fw-tiergrid { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(216px, 1fr)); }
.fw-tier {
  padding: 12px 13px 11px; border-radius: var(--rad-sm);
  border: 1px solid var(--fw-line); background: var(--fw-card);
}
.fw-tier-top { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 7px; }
.fw-tier-top b { font-family: var(--fw-serif); font-size: 1.06rem; font-weight: 600; color: var(--fw-ink); }
.fw-tier-top span { font-family: var(--fw-mono); font-size: var(--fw-t-meta); color: var(--fw-muted); letter-spacing: .05em; text-transform: uppercase; }
.fw-tier svg { display: block; width: 100%; height: auto; }
.fw-tier-note {
  margin-top: 8px; padding-top: 7px; border-top: 1px solid var(--fw-hair);
  font-size: var(--fw-t-s); line-height: 1.5; color: var(--fw-ink-2);
}
.fw-tier-note b { color: var(--fw-ink); }
.fw-c-line { fill: none; stroke: var(--fw-fill); stroke-width: 2; vector-effect: non-scaling-stroke; }
.fw-c-area { fill: var(--fw-fill); opacity: .14; }
.fw-c-axis { stroke: var(--fw-line); stroke-width: 1; vector-effect: non-scaling-stroke; }
.fw-c-cliff { stroke: var(--fw-down); stroke-width: 1.6; stroke-dasharray: 3 3; vector-effect: non-scaling-stroke; }
.fw-c-tick { fill: var(--fw-muted); font-family: var(--fw-mono); font-size: 9px; font-weight: 700; letter-spacing: .04em; }

/* =============================================================================
   10. KIT
   ============================================================================= */
.fw-kit-actions { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 1rem; }
.fw-kit-count { font-family: var(--fw-mono); font-size: var(--fw-t-meta); letter-spacing: .05em; color: var(--fw-muted); }
.fw-kit-body { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(268px, 1fr)); align-items: start; }
/* an empty sheet is still a sheet: give it the shape of the thing it will
   become rather than two grey lines adrift in the band. */
.fw-kit-body .hi-empty {
  border: 1px dashed var(--fw-line); border-radius: var(--rad-sm);
  background: var(--fw-card2); padding: 20px 22px; margin: 0;
}
.fw-kgroup { border: 1px solid var(--fw-line); border-radius: var(--rad-sm); background: var(--fw-card); padding: 12px 14px 11px; }
.fw-kgroup h4 {
  margin: 0 0 .5rem; padding-bottom: .4rem; border-bottom: 1px solid var(--fw-hair);
  font-size: var(--fw-t-micro); font-weight: var(--hi-lbl-w); letter-spacing: var(--hi-lbl-track);
  text-transform: uppercase; color: var(--fw-muted);
}
/* two lines, not three columns: the name gets the full width and the figures
   sit under it, which is what survives both a narrow card and a printed page */
.fw-krow {
  display: grid; grid-template-columns: 1.7em 1fr; column-gap: 8px;
  padding: 5px 0; border-bottom: 1px solid var(--fw-hair);
}
.fw-krow:last-child { border-bottom: 0; }
.fw-krow > i {
  grid-row: 1 / span 2; font-style: normal; font-family: var(--fw-mono);
  font-size: var(--fw-t-meta); color: var(--fw-muted); padding-top: .28em;
}
.fw-krow a { font-family: var(--fw-serif); font-size: .96rem; font-weight: 600; color: var(--fw-ink); text-decoration: none; }
.fw-krow a:hover { color: var(--fw-blue); }
.fw-krow span {
  font-family: var(--fw-mono); font-size: var(--fw-t-meta); color: var(--fw-muted);
  font-variant-numeric: tabular-nums; letter-spacing: .03em;
}

/* =============================================================================
   CLOSING PROSE + FOOTER
   ============================================================================= */
/* ---- THE DISCLOSURE ------------------------------------------------------
   The default marker triangle is a browser's idea of a chevron, not ours.
   list-style:none plus the ::-webkit-details-marker reset clears it on every
   engine; the rotating rule-drawn chevron on the right is the affordance. */
.fw-fold {
  margin: .4rem 0 0; border-top: 1px solid var(--fw-line); border-bottom: 1px solid var(--fw-line);
}
.fw-fold > summary {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 11px 2px; cursor: pointer; list-style: none;
}
.fw-fold > summary::-webkit-details-marker { display: none; }
.fw-fold > summary::marker { content: ""; }
.fw-fold > summary:focus-visible {
  outline: 2px solid var(--fw-blue); outline-offset: 2px; border-radius: 4px;
}
.fw-fold-lbl {
  font-family: var(--fw-mono); font-size: var(--fw-t-meta-2); font-weight: 700;
  letter-spacing: var(--hi-lbl-track-mono); text-transform: uppercase; color: var(--fw-muted);
  transition: color var(--mo-fast);
}
.fw-fold > summary:hover .fw-fold-lbl { color: var(--fw-blue); }
/* drawn, not typed: a glyph would inherit whatever the font decided */
.fw-fold-chev {
  flex: 0 0 auto; width: 8px; height: 8px; margin-right: 3px;
  border-right: 1.6px solid currentColor; border-bottom: 1.6px solid currentColor;
  color: var(--fw-muted); transform: rotate(45deg); transform-origin: 60% 60%;
  transition: transform var(--mo-base) var(--mo-ease), color var(--mo-fast);
}
.fw-fold[open] > summary .fw-fold-chev { transform: rotate(225deg); }
.fw-fold > summary:hover .fw-fold-chev { color: var(--fw-blue); }
.fw-fold-body { padding: 2px 0 14px; }
.fw-fold-body > p:last-child { margin-bottom: 0; }
@media (prefers-reduced-motion: reduce) {
  .fw-fold-chev { transition: none; }
}

.fw-close-open { margin-bottom: 1rem; }
.fw-close h2 { margin: .2rem 0 .8rem; font-family: var(--fw-serif); font-weight: 600; font-size: var(--t-h2); color: var(--fw-ink); letter-spacing: -0.014em; }
.fw-close p { margin: 0 0 .9rem; max-width: 84ch; font-size: var(--fw-t-b); line-height: 1.65; color: var(--fw-ink-2); text-wrap: pretty; }
/* the closing note ran one 84ch column down a 1176px band. Two columns fill
   the measure and read like the back page they are. */
@media (min-width: 1040px) {
  .fw-close-cols { column-count: 2; column-gap: 3.2rem; }
  .fw-close-cols p { max-width: none; }
  .fw-close-cols p:last-child { margin-bottom: 0; }
}

.fw-foot {
  border-top: 1px solid var(--fw-line); padding-top: 1.1rem; margin-top: 2rem;
}
.fw-foot p { margin: 0 0 .4rem; font-size: var(--fw-t-s); line-height: 1.55; color: var(--fw-muted); max-width: 82ch; }
.fw-foot a { color: var(--fw-blue); }

/* =============================================================================
   2b. FORMAT MOVERS — the same player, priced by four different pages.

   The card's spine is the rank line: four small stacks, one per published
   board, with the selected one filled. Nothing here is a score; the big
   figure on the right is a difference between two ranks and says "places"
   underneath it so it can never be mistaken for a rating.
   ============================================================================= */
.fw-fm-two { align-items: start; }
.fw-fmshelf { display: grid; gap: 8px; }

.fw-fmcard {
  position: relative; overflow: hidden; display: grid; gap: 7px;
  padding: 11px 13px 12px; border-radius: var(--rad-sm);
  border: 1px solid var(--fw-line); background: var(--fw-card);
  text-decoration: none; box-shadow: var(--hi-ambient);
  transition: border-color var(--mo-fast), transform var(--mo-base) var(--mo-ease);
}
.fw-fmcard:hover { border-color: var(--fw-blue-line); }
.fw-fmcard.is-up:hover { border-color: var(--fw-up); }
.fw-fmcard.is-down:hover { border-color: var(--fw-down); }
.fw-fmcard-top { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 9px; }
.fw-fmcard-who { display: grid; min-width: 0; }
.fw-fmcard-who .fw-vcard-name { white-space: normal; }
.fw-fmcard-meta {
  font-family: var(--fw-mono); font-size: var(--fw-t-meta); font-weight: 600;
  letter-spacing: .05em; color: var(--fw-muted);
}
.fw-fmcard-d { display: grid; justify-items: end; line-height: 1; }
.fw-fmcard-d b {
  font-family: var(--fw-mono); font-size: 1.14rem; font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.fw-fmcard-d.is-up b { color: var(--fw-up); }
.fw-fmcard-d.is-down b { color: var(--fw-down); }
.fw-fmcard-d u {
  margin-top: 3px; text-decoration: none;
  font-family: var(--fw-mono); font-size: var(--fw-t-micro); font-weight: 700;
  letter-spacing: var(--hi-lbl-track-mono); text-transform: uppercase; color: var(--fw-muted);
}

/* the rank line — one stack per board, the active one filled */
.fw-rline {
  display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 4px;
  padding: 6px 0 1px; border-top: 1px solid var(--fw-hair);
}
.fw-rline-i {
  display: grid; justify-items: center; gap: 2px; padding: 4px 2px 5px;
  border-radius: 7px; border: 1px solid transparent; background: var(--fw-card2);
}
.fw-rline-i u {
  text-decoration: none; font-family: var(--fw-mono); font-size: var(--fw-t-micro);
  font-weight: 700; letter-spacing: var(--hi-lbl-track-mono); text-transform: uppercase;
  color: var(--fw-muted);
}
.fw-rline-i b {
  font-family: var(--fw-mono); font-size: var(--fw-t-s); font-weight: 700;
  font-variant-numeric: tabular-nums; color: var(--fw-ink-2);
}
.fw-rline-i.is-on { background: var(--fw-blue-soft); border-color: var(--fw-blue-line); }
.fw-rline-i.is-on u { color: var(--fw-blue); }
.fw-rline-i.is-on b { color: var(--fw-blue); }

.fw-fmcard-why {
  font-size: var(--fw-t-s); line-height: 1.5; color: var(--fw-ink-2); text-wrap: pretty;
}

/* =============================================================================
   TIER BREAKS + ROUND MARKERS — inside the board.

   Two separator rows, one grammar: a label, a hairline that wipes in, and the
   figure the label is claiming. The tier row is the ink one because it is the
   argument; the round row is muted furniture that only says where you are.
   ============================================================================= */
.fw-sep > td { padding: 0 !important; border: 0 !important; background: none !important; }
.fw-sep-in {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 10px 8px; margin: 2px 0;
}
.fw-sep-in > b {
  flex: 0 0 auto; font-family: var(--fw-mono); font-size: var(--fw-t-micro);
  font-weight: 700; letter-spacing: var(--hi-lbl-track-mono); text-transform: uppercase;
}
.fw-sep-in > span {
  flex: 0 1 auto; font-family: var(--fw-mono); font-size: var(--fw-t-meta);
  font-weight: 600; letter-spacing: .03em; color: var(--fw-muted);
  font-variant-numeric: tabular-nums;
}
.fw-sep-rule {
  flex: 1 1 20px; min-width: 14px; height: 1px; display: block;
  transform-origin: left center; font-style: normal;
}
.fw-sep.is-tier > td { border-top: 1px solid var(--fw-blue-line) !important; }
.fw-sep.is-tier .fw-sep-in > b { color: var(--fw-blue); }
.fw-sep.is-tier .fw-sep-rule { background: var(--fw-blue-line); }
.fw-sep.is-round .fw-sep-in > b { color: var(--fw-muted); }
.fw-sep.is-round .fw-sep-rule { background: var(--fw-hair); }
/* The band shift — every other tier sits on the second surface, so a tier
   reads as a BLOCK of names rather than as a line you have to hunt for.
   It replaces the four-row zebra rather than fighting it: once separator rows
   are in the tbody the nth-child count no longer lands on a rhythm anybody
   can see, and a banding that means "this is one tier" beats a banding that
   means nothing at all. The zebra comes straight back the moment the reader
   sorts or filters and the markers come off. */
#fwBoardTable.is-tiered tbody tr.fw-row:nth-child(4n+3) > td { background: none; }
#fwBoardTable.is-tiered tbody tr.fw-row.is-tband > td { background: var(--fw-card2); }
/* Tier one is the only band that gets a surface of its own. It is the shortest
   block on the board and the one the whole page is an argument about, so it
   sits a step above the field rather than in the alternating rhythm — a lift
   in the blue wash plus a rule down its left edge, both tokens, both themes.
   It is declared BEFORE the hover rule on purpose: equal specificity, so a
   hovered row in tier one still highlights like every other row. */
#fwBoardTable.is-tiered tbody tr.fw-row[data-tier="1"] > td {
  background: color-mix(in srgb, var(--fw-blue-soft) 52%, var(--fw-card));
}
#fwBoardTable.is-tiered tbody tr.fw-row[data-tier="1"] > td:first-child {
  box-shadow: inset 2px 0 0 var(--fw-blue-line);
}
#fwBoardTable.is-tiered tbody tr.fw-row:hover > td { background: var(--fw-card2); }

.fw-boardnote {
  margin: -4px 0 12px; font-size: var(--fw-t-s); line-height: 1.55;
  color: var(--fw-muted); max-width: 84ch; text-wrap: pretty;
}
.fw-boardnote b { color: var(--fw-ink-2); font-variant-numeric: tabular-nums; }

/* the league-size control — the same object in the board and in the planner */
.fw-league { display: flex; align-items: center; gap: 4px; flex: 0 0 auto; }
.fw-league-lbl {
  padding-right: 2px; font-family: var(--fw-mono); font-size: var(--fw-t-micro);
  font-weight: 700; letter-spacing: var(--hi-lbl-track-mono); text-transform: uppercase;
  color: var(--fw-muted);
}
.fw-scope .fw-league button {
  min-width: 34px; padding: 5px 9px; border-radius: var(--rad-pill);
  border: 1px solid var(--fw-line); background: var(--fw-card);
  font-family: var(--fw-mono); font-size: var(--fw-t-meta-2); font-weight: 700;
  letter-spacing: .05em; color: var(--fw-muted); font-variant-numeric: tabular-nums;
  transition: color var(--mo-fast), border-color var(--mo-fast), background var(--mo-fast);
}
.fw-scope .fw-league button:hover { color: var(--fw-ink); border-color: var(--fw-blue-line); }
.fw-scope .fw-league button.on { background: var(--fw-blue); border-color: var(--fw-blue); color: var(--fw-on-blue); }

/* =============================================================================
   4b. THE READS — desk notes, not templates.
   ============================================================================= */
.fw-reads {
  display: grid; gap: 10px;
  grid-template-columns: repeat(auto-fit, minmax(272px, 1fr));
  align-items: stretch;
}
.fw-read {
  position: relative; overflow: hidden; display: flex; flex-direction: column;
  padding: 13px 15px 14px; border-radius: var(--rad-sm);
  border: 1px solid var(--fw-line); background: var(--fw-card);
  box-shadow: var(--hi-ambient);
  transition: border-color var(--mo-fast);
}
.fw-read:hover { border-color: var(--fw-blue-line); }
.fw-read-eyebrow {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  margin: 0 0 .5rem;
  font-family: var(--fw-mono); font-size: var(--fw-t-micro); font-weight: 700;
  letter-spacing: var(--hi-lbl-track-mono); text-transform: uppercase;
}
.fw-read-eyebrow span { color: var(--fw-blue); }
.fw-read-eyebrow i { font-style: normal; color: var(--fw-muted); font-variant-numeric: tabular-nums; }
.fw-read-claim {
  margin: 0 0 .7rem; font-family: var(--fw-serif); font-weight: 500;
  font-size: 1.06rem; line-height: 1.34; letter-spacing: -0.008em;
  color: var(--fw-ink); text-wrap: pretty;
}
.fw-read-claim b { font-weight: 700; }
.fw-read-figs {
  display: grid; gap: 5px; margin: 0 0 .7rem auto; width: 100%;
  padding: 8px 0 2px; border-top: 1px solid var(--fw-hair);
}
.fw-read-fig { display: flex; align-items: baseline; gap: 8px; }
.fw-read-fig b {
  flex: 0 0 auto; font-family: var(--fw-mono); font-size: var(--fw-t-b); font-weight: 700;
  color: var(--fw-ink); font-variant-numeric: tabular-nums;
}
.fw-read-fig u {
  text-decoration: none; font-size: var(--fw-t-meta); color: var(--fw-muted);
  line-height: 1.4;
}
.fw-read-receipt {
  margin: auto 0 0; padding-left: 11px; border-left: 2px solid var(--fw-blue-line);
  font-size: var(--fw-t-meta); line-height: 1.5; color: var(--fw-muted); text-wrap: pretty;
}

/* =============================================================================
   9b. YOUR PICKS — the snake, seated.
   ============================================================================= */
.fw-plan-ctl {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px;
  padding: 10px 12px; margin-bottom: 12px; border-radius: var(--rad-sm);
  border: 1px solid var(--fw-line); background: var(--fw-card2);
}
.fw-plan-slot { display: flex; align-items: center; gap: 7px; }
.fw-plan-slot label {
  font-family: var(--fw-mono); font-size: var(--fw-t-micro); font-weight: 700;
  letter-spacing: var(--hi-lbl-track-mono); text-transform: uppercase; color: var(--fw-muted);
}
.fw-plan-slot select {
  min-height: 30px; padding: 0 8px; border-radius: var(--rad-pill);
  border: 1px solid var(--fw-line); background: var(--fw-card); color: var(--fw-ink);
  font-family: var(--fw-mono); font-size: var(--fw-t-meta-2); font-weight: 700;
  letter-spacing: .05em; cursor: pointer;
}
.fw-plan-slot select:hover { border-color: var(--fw-blue-line); }
.fw-plan-line {
  flex: 1 1 220px; font-family: var(--fw-mono); font-size: var(--fw-t-meta);
  font-weight: 600; letter-spacing: .03em; color: var(--fw-muted);
  font-variant-numeric: tabular-nums; line-height: 1.5;
}

.fw-plan-grid {
  display: grid; gap: 10px;
  grid-template-columns: repeat(auto-fit, minmax(288px, 1fr));
  align-items: start;
}
.fw-plcard {
  position: relative; overflow: hidden;
  padding: 11px 12px 10px; border-radius: var(--rad-sm);
  border: 1px solid var(--fw-line); background: var(--fw-card);
  box-shadow: var(--hi-ambient);
}
.fw-plcard-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 8px;
  margin: 0 0 .5rem; padding-bottom: .45rem; border-bottom: 1px solid var(--fw-hair);
}
.fw-plcard-head b {
  font-family: var(--fw-mono); font-size: 1.02rem; font-weight: 700;
  letter-spacing: .04em; color: var(--fw-ink); font-variant-numeric: tabular-nums;
}
.fw-plcard-head span {
  font-family: var(--fw-mono); font-size: var(--fw-t-micro); font-weight: 700;
  letter-spacing: var(--hi-lbl-track-mono); text-transform: uppercase; color: var(--fw-muted);
}
.fw-plrow {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: start; gap: 9px; padding: 8px 2px; text-decoration: none;
  border-top: 1px solid var(--fw-hair);
}
.fw-plcard .fw-plrow:first-of-type { border-top: 0; }
.fw-plrow:hover .fw-vcard-name { color: var(--fw-blue); }
.fw-plrow-main { display: grid; gap: 3px; min-width: 0; }
.fw-plrow-main .fw-vcard-name { white-space: normal; }
.fw-plrow-meta {
  font-family: var(--fw-mono); font-size: var(--fw-t-meta); font-weight: 600;
  letter-spacing: .04em; color: var(--fw-muted); font-variant-numeric: tabular-nums;
}
.fw-plrow-why { font-size: var(--fw-t-meta); line-height: 1.45; color: var(--fw-ink-2); }
.fw-plbar {
  display: block; height: 3px; border-radius: 2px; background: var(--fw-dtrack);
  margin: 2px 0 1px; overflow: hidden;
}
.fw-plbar i {
  display: block; height: 100%; width: var(--w, 0%); border-radius: 2px;
  background: var(--fw-fill); font-style: normal;
  transform-origin: left center;
}
.fw-plrow-rank { display: grid; justify-items: end; line-height: 1; }
.fw-plrow-rank b {
  font-family: var(--fw-mono); font-size: 1.02rem; font-weight: 700;
  color: var(--fw-ink); font-variant-numeric: tabular-nums;
}
.fw-plrow-rank u {
  margin-top: 3px; text-decoration: none;
  font-family: var(--fw-mono); font-size: var(--fw-t-micro); font-weight: 700;
  letter-spacing: var(--hi-lbl-track-mono); text-transform: uppercase; color: var(--fw-muted);
}

/* =============================================================================
   ARRIVAL — geometry only, once. Figures are final on frame one.

   .fw-rv is the opt-in. It rests INVISIBLE only while the page has told the
   document it is animating (html.fw-motion, stamped by fantasy.js after boot
   and never stamped at all under reduced motion), so a reader with no script,
   a stalled observer or a motion preference sees complete content and not a
   blank column. The observer additionally carries a 2200ms failsafe.
   ============================================================================= */
@keyframes fw-rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.fw-arrive { animation: fw-rise var(--mo-slow) var(--mo-ease) both; animation-delay: var(--d, 0ms); }

.fw-motion .fw-scope .fw-rv { opacity: 0; transform: translateY(9px); }
.fw-motion .fw-scope .fw-rv.is-in {
  animation: fw-rise var(--mo-slow) var(--mo-ease) both;
  animation-delay: var(--d, 0ms);
}

/* (b) the bars draw. Width is already final in the markup; the transform is
       the only thing that moves, so the figure beside the bar never lies. */
@keyframes fw-drawx { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.fw-motion .fw-scope .fw-rv.is-in .fw-avail-bar i,
.fw-motion .fw-scope .fw-rv.is-in .fw-pbar i,
.fw-motion .fw-scope .fw-rv.is-in .fw-plbar i,
.fw-motion .fw-scope .fw-rv.is-in .fw-zbar i,
.fw-motion .fw-scope .fw-rv.is-in .fw-zstrip i {
  animation: fw-drawx 520ms var(--mo-ease) both;
  animation-delay: calc(var(--d, 0ms) + 90ms);
  transform-origin: left center;
}
.fw-motion .fw-scope .fw-rv.is-in .fw-zstrip i { transform-origin: bottom center; }
@keyframes fw-drawy { from { transform: scaleY(0); } to { transform: scaleY(1); } }
.fw-motion .fw-scope .fw-rv.is-in .fw-zstrip i { animation-name: fw-drawy; }

/* (f) the tier separators wipe */
@keyframes fw-wipe { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.fw-motion .fw-scope .fw-sep.fw-rv.is-in .fw-sep-rule {
  animation: fw-wipe 460ms var(--mo-ease) both; animation-delay: calc(var(--d, 0ms) + 60ms);
}

/* (f2) the podium numerals arrive on the same wipe, staggered one to three,
        on first paint and again on every format switch. The class is added by
        fantasy.js and only when the page is animating at all, so the numeral
        at rest — no script, no motion — is simply a numeral. */
@keyframes fw-numwipe {
  from { clip-path: inset(0 100% 0 0); opacity: .3; }
  to { clip-path: inset(0 0 0 0); opacity: 1; }
}
.fw-motion .fw-scope .fw-feat-num.is-wipe {
  animation: fw-numwipe 540ms var(--mo-ease) both;
  animation-delay: var(--d, 0ms);
}

/* (d) the house beam sweep, reimplemented scoped — a white light passing over
       a card on hover. Ink and blue only; the sheen carries no hue of its own
       and never sits over text that would lose contrast, because it lives
       behind the content at z-index 0 with everything else lifted to 1. */
.fw-beam > *:not(.fw-beam-sweep) { position: relative; z-index: 1; }
.fw-beam-sweep {
  position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: 0;
  background: linear-gradient(104deg, transparent 32%, rgba(255, 255, 255, .26) 49%, transparent 66%);
  transform: translateX(-64%);
  transition: opacity var(--mo-fast) linear;
}
:root[data-theme="dark"] .fw-beam-sweep {
  background: linear-gradient(104deg, transparent 32%, rgba(255, 255, 255, .10) 49%, transparent 66%);
}
.fw-motion .fw-beam:hover > .fw-beam-sweep,
.fw-motion .fw-beam:focus-visible > .fw-beam-sweep {
  opacity: 1; animation: fw-sweep 900ms cubic-bezier(.3, .7, .3, 1);
}
@keyframes fw-sweep { from { transform: translateX(-64%); } to { transform: translateX(64%); } }

/* (e) the drawer settles rather than appearing */
@keyframes fw-settle {
  from { opacity: 0; transform: translateY(-7px); }
  to { opacity: 1; transform: none; }
}
.fw-motion .fw-scope .fw-settle { animation: fw-settle var(--mo-base) var(--mo-ease) both; }

/* (a) scroll-linked where the engine has it: the section rule draws itself as
       its heading crosses the viewport. Decoration only — a rule that never
       animates is still a rule, so this path can never strand content. */
@supports (animation-timeline: view()) {
  .fw-motion .fw-scope .fw-sec-rule {
    transform-origin: left center;
    animation: fw-wipe linear both;
    animation-timeline: view();
    animation-range: entry 8% cover 26%;
  }
}

/* (c) the sparkline stroke-draw is measured in JS (a polyline has no length
       until it is in the document) and applied inline; nothing to declare
       here beyond the resting weight the spark sheet already owns. */

/* =============================================================================
   THE STICKY FORMAT BAR — phones only.

   The segmented control in the hero is the master state for the whole page,
   and on a phone it is two thousand pixels above the board the reader is
   actually working in. This restates it at the thumb. It is mounted by JS
   only when the hero control has left the viewport, so it never covers the
   thing it stands in for.

   GEOMETRY, deliberately: 40px pills + 2px of padding each side = a 44px bar,
   plus whatever the device's home indicator claims. z-index 500 puts it under
   the site's bottom-sheet nav (hi-nav.css owns 900) and its scrim, so the
   sheet always wins. It never prints.
   ============================================================================= */
.fw-fmtbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 500;
  padding: 2px .6rem calc(2px + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--fw-line);
  background: color-mix(in srgb, var(--fw-card) 86%, transparent);
  -webkit-backdrop-filter: saturate(1.5) blur(14px);
  backdrop-filter: saturate(1.5) blur(14px);
  box-shadow: var(--hi-ambient);
  transform: translateY(110%);
  transition: transform var(--mo-base) var(--mo-ease);
}
.fw-fmtbar.is-in { transform: none; }
.fw-fmtbar-in {
  display: flex; align-items: center; gap: 6px;
  overflow-x: auto; scrollbar-width: none; overscroll-behavior-x: contain;
}
.fw-fmtbar-in::-webkit-scrollbar { display: none; }
.fw-fmtbar-lbl {
  flex: 0 0 auto; padding-right: 2px;
  font-family: var(--fw-mono); font-size: var(--fw-t-micro); font-weight: 700;
  letter-spacing: var(--hi-lbl-track-mono); text-transform: uppercase; color: var(--fw-muted);
}
.fw-scope .fw-fmtbar button {
  flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
  /* all five formats plus the label must clear a 390px screen without a
     swipe: 11px of side padding is what buys the last eleven pixels */
  min-height: 40px; padding: 0 11px; border-radius: var(--rad-pill);
  border: 1px solid var(--fw-line); background: var(--fw-card2);
  font-family: var(--fw-mono); font-size: var(--fw-t-meta-2); font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase; color: var(--fw-muted);
  transition: background var(--mo-fast), color var(--mo-fast), border-color var(--mo-fast);
}
.fw-scope .fw-fmtbar button.on {
  background: var(--fw-blue); border-color: var(--fw-blue); color: var(--fw-on-blue);
}
/* the page gives back the inch the bar floats over, so nothing at the foot of
   the document is permanently underneath it */
body.fw-has-fmtbar { padding-bottom: calc(44px + env(safe-area-inset-bottom, 0px)); }
@media (min-width: 761px) {
  .fw-fmtbar { display: none !important; }
  body.fw-has-fmtbar { padding-bottom: 0; }
}

/* =============================================================================
   MOBILE — the board stops being a table; the page never scrolls sideways.
   ============================================================================= */
@media (max-width: 999px) {
  .fw-hubgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .fw-main { padding: 0 .85rem 2.6rem; }
  .fw-hero-band { padding: 1.2rem 1.05rem 1.2rem; border-radius: 16px; }
  /* two up on a phone, and the tile loses its second line so sixteen doors
     stay one thumb-scroll rather than three */
  .fw-hubgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .fw-hubtile { padding: 10px 11px; }
  .fw-hubtile .nm { font-size: .94rem; }
  .fw-hubtile .nt { display: none; }
  .fw-hero-rail { grid-template-columns: repeat(2, 1fr); gap: 14px 10px; align-items: start; }
  /* a long name was ellipsised to "Nathan MacKinn…" in a half-width cell.
     Two lines of name beat one line of truncation. */
  .fw-hero-rail b { font-size: 1.16rem; white-space: normal; overflow: visible; text-overflow: clip; line-height: 1.14; }
  .fw-hero-rail > div { padding-right: 0; }

  /* five formats wrapped 3 + 2 as a flex row, and the orphan pair stretched to
     half the band each — two rows of buttons at two different widths. A three
     column grid gives every format the same seat and leaves one honest gap. */
  .fw-seg { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
  .fw-scope .fw-seg button {
    flex: none; min-width: 0; min-height: 46px; padding: 7px 10px; justify-content: center;
  }

  .fw-pcard { padding: 10px; background-size: 84px 84px; }
  .fw-pc-name { font-size: .92rem; }
  .fw-mug { width: 32px; height: 32px; }

  /* --- the podium on a phone: No. 1 across the full width, then 2 and 3
         beside each other. Three abreast at 390px gave each feature card a
         115px column, which is a numeral and a truncated surname. ---------- */
  .fw-podium { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
  .fw-podium > .fw-pcard:first-child { grid-column: 1 / -1; }
  .fw-feat { padding: 12px 12px 11px; background-size: 122px 122px; }
  .fw-feat-num { font-size: clamp(2.3rem, 12vw, 3.2rem); }
  .fw-feat .fw-mug { width: 46px; height: 46px; box-shadow: 0 0 0 2px var(--tint-ring, var(--fw-line)); }
  .fw-feat .fw-pc-name { font-size: 1.02rem; white-space: normal; }
  .fw-feat .fw-pc-fig b { font-size: 1.42rem; }
  .fw-podium > .fw-pcard:first-child .fw-feat-num { font-size: clamp(3rem, 15vw, 3.9rem); }
  .fw-podium > .fw-pcard:first-child .fw-pc-name { font-size: 1.24rem; }
  /* cards two and three share one phone width, and "44-86-130 · 76 gp" at the
     desk's tracking wrapped its games onto a second line. The counting record
     is a caption, so it gives up the tracking rather than the card giving up
     a row of height. */
  .fw-podium > .fw-pcard:not(:first-child) .fw-pc-line {
    font-size: 0.5625rem; letter-spacing: 0;
  }
  /* the tighter row is one card per line below 760: a four-column mini row in
     half a phone's width is three ellipses and a decimal */
  .fw-restshelf { grid-template-columns: 1fr; gap: 7px; }
  .fw-sec { margin-bottom: 2.4rem; }
  .fw-drawer-in { grid-template-columns: 1fr; }
  /* the curve takes the drawer's full width and the figures fall under it in
     two columns: a 150px figure rail beside a 200px plot is neither */
  .fw-trend-body { grid-template-columns: 1fr; gap: 12px; }
  .fw-trend-svg { height: 104px; }
  .fw-trend-figs {
    grid-template-columns: 1fr 1fr; column-gap: 14px;
    border-left: 0; border-top: 1px solid var(--fw-hair); padding: 2px 0 0;
  }
  /* two columns of figures only line up if every figure is the same shape, so
     below 760 they all stack label-over-value rather than half of them */
  .fw-trend-fig { display: block; }
  .fw-trend-fig b { display: block; margin-top: 2px; }
  .fw-trend-fig:last-child { border-bottom: 1px solid var(--fw-hair); }
  .fw-two { grid-template-columns: 1fr; }
  /* the new controls get a thumb, like every other control below 760px */
  .fw-scope .fw-league button { min-height: 40px; display: inline-flex; align-items: center; justify-content: center; }
  .fw-plan-slot select { min-height: 40px; padding: 0 10px; }
  .fw-plan-line { flex-basis: 100%; }
  .fw-reads, .fw-plan-grid { grid-template-columns: 1fr; }
  .fw-zstrip { grid-template-columns: repeat(7, 1fr); }

  /* --- touch targets. Every control on this page was built for a cursor;
         below 760px each one is given a thumb's worth of height. ---------- */
  .fw-pills button, .fw-scope .fw-tog {
    min-height: 40px; display: inline-flex; align-items: center; padding: 0 14px;
  }
  .fw-search input { min-height: 40px; }
  .fw-teamsel select { min-height: 40px; padding: 0 10px; }
  /* the anchor strip scrolls rather than wrapping to three rows of pills */
  .fw-jump {
    flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none;
    overscroll-behavior-x: contain;
    margin-inline: -.85rem; padding-inline: .85rem;
  }
  .fw-jump::-webkit-scrollbar { display: none; }
  .fw-jump a { flex: 0 0 auto; min-height: 34px; display: inline-flex; align-items: center; }
  .fw-scope .fw-more, .fw-scope .fw-print { min-height: 44px; padding: 0 20px; }
  .fw-scope .fw-mmore { min-height: 40px; display: flex; align-items: center; }
  .fw-kit-actions { gap: 12px; }

  /* --- the goalie board keeps its columns, but not at the cost of identity.
         Rank and name are pinned; the workload columns slide under them. --- */
  .fw-gtable { --fw-gpin: 3.3rem; }
  .fw-gtable th:nth-child(1), .fw-gtable td:nth-child(1) {
    position: sticky; left: 0; z-index: 3;
    width: var(--fw-gpin); min-width: var(--fw-gpin); max-width: var(--fw-gpin);
  }
  .fw-gtable th:nth-child(2), .fw-gtable td:nth-child(2) {
    position: sticky; left: var(--fw-gpin); z-index: 3;
    box-shadow: 1px 0 0 var(--fw-hair);
  }
  .fw-gtable tbody td:nth-child(1), .fw-gtable tbody td:nth-child(2) { background: var(--fw-card); }
  .fw-gtable tbody tr.fw-row:nth-child(4n+3) td:nth-child(1),
  .fw-gtable tbody tr.fw-row:nth-child(4n+3) td:nth-child(2) { background: var(--fw-card2); }
  .fw-gtable thead th:nth-child(1), .fw-gtable thead th:nth-child(2) { z-index: 4; }
  .fw-gtable .fw-namecell a { white-space: normal; }
}

/* =============================================================================
   THE BOARD AS CARDS — 600px and below.

   Thirteen columns in a 358px window meant a reader who scrolled sideways was
   looking at a wall of decimals with no name attached to any of them. The same
   markup is re-laid as one card per player: rank on the left, identity and its
   meta line in the middle, the trend and the star on the top right, the blend
   figure and the value chip on the bottom right. The columns that drop out
   (position, club, age, market, half-season) are restated in the meta line;
   the season figures they came from are one tap away in the drawer.

   No cell is deleted and no data is invented — every rule below is placement.
   ============================================================================= */
@media (max-width: 600px) {
  #fwBoardWrap {
    overflow: visible; border: 0; border-radius: 0;
    background: none; background-image: none;
  }
  #fwBoardTable { display: block; width: 100%; min-width: 0; }
  #fwBoardTable > thead { display: none; }
  #fwBoardTable > tbody { display: block; }
  #fwBoardTable > tbody > tr { display: block; }

  #fwBoardTable tr.fw-row {
    display: grid;
    grid-template-columns: 2.3rem minmax(0, 1fr) auto auto;
    column-gap: 8px; row-gap: 1px;
    padding: 7px 10px 8px; margin-bottom: 8px;
    border: 1px solid var(--fw-line); border-radius: var(--rad-sm);
    background: var(--fw-card);
  }
  #fwBoardTable tr.fw-row > td { padding: 0; border: 0; display: block; }
  /* zebra and row hover are table affordances; a card is its own object */
  #fwBoardTable tbody tr.fw-row:nth-child(4n+3) td,
  #fwBoardTable tbody tr.fw-row:hover td { background: none; }

  /* rank down the left edge, identity through the middle, and a right-hand
     stack of star over [blend · value] — a scoreboard corner, two rows deep */
  #fwBoardTable tr.fw-row > td:nth-child(1)  { grid-area: 1 / 1 / 3 / 2; align-self: center; }
  #fwBoardTable tr.fw-row > td:nth-child(2)  { grid-area: 1 / 2 / 3 / 3; align-self: center; }
  #fwBoardTable tr.fw-row > td:nth-child(13) { grid-area: 1 / 3 / 2 / 5; justify-self: end; }
  #fwBoardTable tr.fw-row > td:nth-child(8)  { grid-area: 2 / 3 / 3 / 4; justify-self: end; align-self: center; }
  #fwBoardTable tr.fw-row > td:nth-child(12) { grid-area: 2 / 4 / 3 / 5; justify-self: end; align-self: center; }
  /* pos · team · age · mkt · H2−H1 move into the meta line; the two season
     columns and the sparkline are the drawer's job on a screen this size */
  #fwBoardTable tr.fw-row > td:nth-child(3),
  #fwBoardTable tr.fw-row > td:nth-child(4),
  #fwBoardTable tr.fw-row > td:nth-child(5),
  #fwBoardTable tr.fw-row > td:nth-child(6),
  #fwBoardTable tr.fw-row > td:nth-child(7),
  #fwBoardTable tr.fw-row > td:nth-child(9),
  #fwBoardTable tr.fw-row > td:nth-child(10),
  #fwBoardTable tr.fw-row > td:nth-child(11) { display: none; }

  /* the separators survive the card re-lay: they are not .fw-row, so none of
     the grid rules above touch them. They only need their cell put back into
     the flow the tbody's display:block took away. */
  #fwBoardTable tr.fw-sep > td { display: block; }
  #fwBoardTable tr.fw-sep .fw-sep-in { padding: 6px 2px 8px; margin: 0; flex-wrap: wrap; }
  #fwBoardTable tr.fw-sep .fw-sep-in > span { flex-basis: 100%; }
  #fwBoardTable tr.fw-sep .fw-sep-rule { flex: 1 1 20px; }
  /* the tier band on a card is an edge, not a fill — a filled card would
     collide with the card's own surface and read as a selected row */
  #fwBoardTable tbody tr.fw-row.is-tband { border-left: 2px solid var(--fw-blue-line); }
  #fwBoardTable tbody tr.fw-row.is-tband > td { background: none; }

  #fwBoardTable .fw-rank { font-size: 1.02rem; }
  /* nowrap keeps the name on the arrow-and-mug line; min-width:0 lets it wrap
     INSIDE its own box instead of being pushed onto a flex line of its own,
     which is what "Aleksander Barkov" did in a 135px slot */
  /* a flex row let the tag pill take its width off the top of the name's, so
     "Aleksander Barkov" beside a "no 25-26" flag was chopped to "Aleksand /
     er". As a grid the arrow and the mug hold column one and two for the full
     height, and the name gets the whole of column three with the tags on
     their own line beneath it — the name's width no longer depends on how
     many flags a player carries. */
  #fwBoardTable .fw-namecell {
    display: grid; grid-template-columns: auto auto minmax(0, 1fr);
    align-items: center; column-gap: 6px; row-gap: 3px;
  }
  #fwBoardTable .fw-namecell > .fw-exp { grid-column: 1; grid-row: 1 / -1; }
  #fwBoardTable .fw-namecell > .fw-mug { grid-column: 2; grid-row: 1 / -1; }
  #fwBoardTable .fw-namecell > a,
  #fwBoardTable .fw-namecell > .fw-tags { grid-column: 3; justify-self: start; }
  /* overflow-wrap is the guarantee, not the nicety: without it a long name
     rendered PAST its shrunk flex box and printed underneath the tag beside
     it. break-word rather than anywhere — anywhere lets the box shrink to a
     single character, which chopped "Aleksander" into "Aleksand / er". */
  #fwBoardTable .fw-namecell a {
    min-width: 0; white-space: normal; overflow-wrap: break-word;
    font-size: .93rem; line-height: 1.22;
  }
  #fwBoardTable td:nth-child(8) b { font-family: var(--fw-mono); font-size: 1rem; }
  .fw-rowmeta {
    display: block; margin-top: 4px;
    font-family: var(--fw-mono); font-size: var(--fw-t-meta); font-weight: 600;
    letter-spacing: .02em; color: var(--fw-muted); line-height: 1.4;
  }
  /* the counting record takes its own line rather than a fifth slot on the
     first, which wrapped to two rows on a 390px card */
  .fw-rowmeta.is-2 { margin-top: 1px; font-variant-numeric: tabular-nums; }

  /* the two controls that live on a row, at a thumb's size */
  .fw-scope #fwBoardTable .fw-exp { width: 30px; height: 40px; border-radius: 6px; }
  .fw-scope #fwBoardTable .fw-star {
    display: inline-flex; align-items: center; justify-content: center;
    width: 40px; height: 40px; padding: 0; font-size: 1.15rem;
  }

  /* the drawer is a full-width shelf under its card */
  #fwBoardTable tr.fw-drawer > td {
    display: block; padding: 0 !important;
    border: 1px solid var(--fw-line); border-radius: var(--rad-sm);
    margin: -6px 0 10px;
  }
  #fwBoardTable tr.fw-drawer .fw-drawer-in { padding: 12px; }

  /* the sort control the hidden column heads used to carry */
  .fw-sortbar {
    display: flex; align-items: center; gap: 5px; width: 100%;
    overflow-x: auto; scrollbar-width: none; overscroll-behavior-x: contain;
  }
  .fw-sortbar::-webkit-scrollbar { display: none; }
  .fw-sortbar-lbl {
    flex: 0 0 auto; padding-right: 2px;
    font-family: var(--fw-mono); font-size: var(--fw-t-micro); font-weight: 700;
    letter-spacing: var(--hi-lbl-track-mono); text-transform: uppercase; color: var(--fw-muted);
  }
  .fw-scope .fw-sortbar button {
    flex: 0 0 auto; display: inline-flex; align-items: center; gap: 5px;
    min-height: 40px; padding: 0 13px; border-radius: var(--rad-pill);
    border: 1px solid var(--fw-line); background: var(--fw-card);
    font-family: var(--fw-mono); font-size: var(--fw-t-meta-2); font-weight: 700;
    letter-spacing: .07em; text-transform: uppercase; color: var(--fw-muted);
  }
  .fw-scope .fw-sortbar button.on {
    background: var(--fw-blue); border-color: var(--fw-blue); color: var(--fw-on-blue);
  }
  /* the direction arrow is drawn, not typed — same reason as .fw-exp */
  .fw-scope .fw-sortbar button.on::after {
    content: ""; width: 0; height: 0;
    border-left: 3.5px solid transparent; border-right: 3.5px solid transparent;
    border-top: 4px solid currentColor;
  }
  .fw-scope .fw-sortbar button.on.is-asc::after { border-top: 0; border-bottom: 4px solid currentColor; }

  /* --- the wall at 600px. The podium keeps its 1-then-2 arrangement from the
         760px rule above; the tighter row is already one card per line. All
         that is left is to stop a long name in a mini card from forcing the
         four-column grid wider than the viewport. --- */
  .fw-mini { grid-template-columns: 1.5rem auto minmax(0, 1fr) auto; column-gap: 8px; }
  .fw-mini .fw-pc-line { font-size: 0.5625rem; }
}

/* =============================================================================
   REDUCED MOTION — complete content, zero motion.
   ============================================================================= */
@media (prefers-reduced-motion: reduce) {
  .fw-scope *, .fw-scope *::before, .fw-scope *::after {
    animation: none !important;
    transition: none !important;
  }
  .fw-arrive { animation: none !important; opacity: 1; transform: none; }
  .fw-zstrip { opacity: 1; max-height: none; }
  /* the reveal layer resolves to its resting, COMPLETE state. fantasy.js also
     declines to stamp html.fw-motion under this preference, so the selectors
     above never match either — belt and braces, because a stranded card is a
     failure of the page and not of the animation. */
  .fw-scope .fw-rv, .fw-scope .fw-rv.is-in { opacity: 1 !important; transform: none !important; }
  .fw-scope .fw-settle { opacity: 1 !important; transform: none !important; }
  .fw-scope .fw-sec-rule { transform: none !important; }
  .fw-beam-sweep { display: none; }
  .fw-scope .fw-avail-bar i, .fw-scope .fw-pbar i, .fw-scope .fw-plbar i,
  .fw-scope .fw-zbar i, .fw-scope .fw-zstrip i { transform: none !important; }
}

/* =============================================================================
   PRINT — the target sheet, and nothing else.
   ============================================================================= */
@media print {
  body { background: #ffffff; }
  .site-nav, .hi-foot, nav.rdesk, .fw-hero, .fw-foot,
  #fw-method, #fw-format-movers, #fw-board, #fw-risers, #fw-reads, #fw-surgers,
  #fw-moves, #fw-youth, #fw-goalies, #fw-tiers, #fw-planner,
  .fw-close { display: none !important; }
  .fw-main { padding: 0; max-width: none; }
  .fw-kit { margin: 0; }
  .fw-kit-actions, .fw-sec-rule, .fw-stamp,
  /* the directory is navigation; a printed sheet has nowhere to go */
  .fw-fmtbar, .fw-sortbar, .fw-jump, .fw-hub { display: none !important; }
  body.fw-has-fmtbar { padding-bottom: 0 !important; }
  .fw-kit-body { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .fw-kgroup { border: 1px solid #999; break-inside: avoid; background: #fff; }
  .fw-krow a, .fw-kgroup h4, .fw-krow span, .fw-krow > i { color: #000 !important; }
  .fw-sec-head h2, .fw-kicker, .fw-lede { color: #000 !important; }
}

/* --- in season (now.js) ------------------------------------------------------
   The season so far, the last seven days and this week's schedule, under the
   format the hero holds. Three panels on a wide screen, one column on a phone.
   Ink and blue only; no figure is coloured by direction. */
.fw-now { margin-top: 2rem; display: grid; gap: 14px; }
.fw-now-head { max-width: 74ch; }
.fw-now-head h2 {
  margin: 0 0 .4rem; font-family: var(--fw-serif); font-weight: 600;
  font-size: var(--t-h2); line-height: 1.12; letter-spacing: -0.012em; color: var(--fw-ink);
}
.fw-now-head p { margin: 0; font-size: var(--fw-t-s); line-height: 1.6; color: var(--fw-ink-2); }
.fw-now-grid { display: grid; gap: 14px; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr) minmax(0, 1fr); align-items: start; }
@media (max-width: 1199px) { .fw-now-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .fw-now-season { grid-column: 1 / -1; } }
@media (max-width: 760px) { .fw-now-grid { grid-template-columns: minmax(0, 1fr); } }
.fw-now-panel {
  min-width: 0; padding: 14px 14px 12px; border: 1px solid var(--fw-line);
  border-radius: var(--rad-sm); background: var(--fw-card); box-shadow: var(--hi-ambient);
}
.fw-now-panel header { margin-bottom: 8px; }
.fw-now-panel h3 { margin: 0 0 2px; font-family: var(--fw-serif); font-weight: 600; font-size: 1.15rem; color: var(--fw-ink); }
.fw-now-panel header p { margin: 0; font-size: var(--fw-t-meta-2); line-height: 1.45; color: var(--fw-muted); }
.fw-now-panel h4 {
  margin: 12px 0 6px; font-family: var(--fw-mono); font-size: var(--fw-t-micro); font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase; color: var(--fw-muted);
}
.fw-now-panel a { color: var(--fw-blue); text-decoration: none; }
.fw-now-panel a:hover, .fw-now-panel a:focus-visible { text-decoration: underline; }
.fw-now-tablewrap { overflow-x: auto; }
.fw-now-table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.fw-now-table th {
  padding: 4px 6px; border-bottom: 1px solid var(--fw-line); text-align: right;
  font-family: var(--fw-mono); font-size: var(--fw-t-micro); font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--fw-muted); white-space: nowrap;
}
.fw-now-table td { padding: 5px 6px; border-bottom: 1px solid var(--fw-hair); text-align: right; font-size: var(--fw-t-s); color: var(--fw-ink-2); white-space: nowrap; }
.fw-now-table th:nth-child(2), .fw-now-table td:nth-child(2) { text-align: left; width: 100%; white-space: normal; }
.fw-now-table th:first-child, .fw-now-table td:first-child { text-align: left; color: var(--fw-muted); width: 1.6em; }
.fw-now-table td.fw-now-key { font-weight: 700; color: var(--fw-ink); }
.fw-now-who { display: inline-flex; align-items: center; gap: 8px; min-width: 0; color: inherit !important; }
.fw-now-who > span { display: grid; min-width: 0; }
.fw-now-who b { font-weight: 600; color: var(--fw-ink); overflow-wrap: anywhere; }
.fw-now-who small { font-family: var(--fw-mono); font-size: var(--fw-t-micro); letter-spacing: .04em; color: var(--fw-muted); }
.fw-now-goalies { margin: 0; padding: 0; list-style: none; display: grid; gap: 4px; }
.fw-now-goalies li { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 10px; align-items: center; padding: 3px 0; border-bottom: 1px solid var(--fw-hair); font-variant-numeric: tabular-nums; }
.fw-now-goalies li > span { font-family: var(--fw-mono); font-size: var(--fw-t-micro); color: var(--fw-muted); white-space: nowrap; }
.fw-now-goalies li > b { font-size: var(--fw-t-s); color: var(--fw-ink); }
.fw-now-clubs { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; }
.fw-now-clubs li { display: grid; grid-template-columns: 3.2em minmax(0, 1fr); column-gap: 8px; padding: 4px 0; border-bottom: 1px solid var(--fw-hair); }
.fw-now-clubs li b { grid-row: span 2; font-family: var(--fw-mono); font-size: var(--fw-t-meta-2); color: var(--fw-ink); }
.fw-now-clubs li span { font-size: var(--fw-t-meta-2); color: var(--fw-ink-2); }
.fw-now-clubs li em { font-style: normal; font-size: var(--fw-t-micro); color: var(--fw-muted); }
.fw-now-foot { margin: 10px 0 0; font-size: var(--fw-t-meta-2); line-height: 1.5; color: var(--fw-muted); }
.fw-now-foot a + a { margin-left: .6em; }
@media (max-width: 520px) {
  .fw-now-table .fw-mug { display: none; }
  .fw-now-table.is-roto th:nth-child(n+6), .fw-now-table.is-roto td:nth-child(n+6) { padding-inline: 4px; }
}

/* --- the preseason board, folded (October 6, 2026) ----------------------------
   Built September 29 and frozen; the season leads the page. One summary row
   opens the board, the goalie pool and the method together. */
.fw-preseason { margin-top: 2.6rem; border-top: 1px solid var(--fw-line); }
.fw-preseason > summary {
  list-style: none; cursor: pointer; display: grid; gap: 4px; padding: 16px 0 14px;
}
.fw-preseason > summary::-webkit-details-marker { display: none; }
.fw-preseason > summary .fw-kicker { margin: 0; }
.fw-preseason > summary b {
  font-family: var(--fw-serif); font-weight: 600; font-size: 1.35rem; line-height: 1.2; color: var(--fw-ink);
}
.fw-preseason > summary > span { font-size: var(--fw-t-s); color: var(--fw-ink-2); }
.fw-preseason-cue::before {
  content: "Open the board ↓"; font-family: var(--fw-mono); font-size: var(--fw-t-meta-2); font-weight: 700;
  letter-spacing: .04em; text-transform: uppercase; color: var(--fw-blue);
}
.fw-preseason[open] .fw-preseason-cue::before { content: "Fold it away ↑"; }
.fw-preseason > summary:hover b { color: var(--fw-blue); }
.fw-preseason > summary:focus-visible { outline: 2px solid var(--fw-blue); outline-offset: 4px; border-radius: var(--rad-sm); }