/* =============================================================================
   extra.css — the four 2026-27 fantasy content pages that hang off the desk:
     /fantasy/schedule/   /fantasy/rookies/
     /fantasy/busts/      /fantasy/mock-draft/

   Same house rules as fantasy.css and hub.css, and the same local alias names
   so the family reads as one desk. The alias block below is the hub.css
   pattern re-declared on .fx-scope, so these pages stand up even if they are
   ever served without the hub sheet.

     * Newsreader upright. No slanted type anywhere; the scope reset forces the
       upright face on <em>/<i>/<cite>.
     * Ink + blue is the whole accent grammar. No gold value is declared here;
       the only gold on the page is the receipt glyph hi-receipt.css owns.
     * mint = more of the thing you want, coral = less. Nothing else coloured.
     * Every colour is a token. Club tints and club crests are franchise
       property and are injected at runtime by extra.js, never written here.
     * Tables scroll inside their own container, never the page.

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

.fx-scope {
  /* surfaces */
  --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;
  --fw-t-meta: 0.625rem;
  --fw-t-meta-2: 0.6875rem;
  --fw-t-s: 0.8125rem;
  --fw-t-b: 0.9375rem;

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

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

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

/* House rule, enforced. */
.fx-scope em, .fx-scope i, .fx-scope cite, .fx-scope address { font-style: normal; }
.fx-scope [hidden] { display: none !important; }

.fx-scope button {
  font: inherit; color: inherit; cursor: pointer;
  background: none; border: 0; padding: 0;
}
.fx-scope button:hover { transform: none; box-shadow: none; }
.fx-scope button:focus-visible,
.fx-scope a:focus-visible,
.fx-scope th button:focus-visible {
  outline: 2px solid var(--fw-blue); outline-offset: 2px; border-radius: 4px;
}

.fx-mint { color: var(--fw-up); font-weight: 700; }
.fx-coral { color: var(--fw-down); font-weight: 700; }
.fx-mono { font-family: var(--fw-mono); font-variant-numeric: tabular-nums; }

/* -----------------------------------------------------------------------------
   Crests. A club mark is an <img> attached only after it has already loaded
   off-DOM, because the site's global error listener deletes any <img> that
   404s. The monogram underneath is the real fallback and is tinted with the
   club colour extra.js injects.
   -------------------------------------------------------------------------- */
.fx-crest {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; flex: 0 0 auto;
  border-radius: 7px;
  background: var(--tint, var(--fw-card2));
  color: var(--fw-ink-2);
  font-family: var(--fw-mono); font-size: var(--fw-t-micro); font-weight: 700;
  letter-spacing: 0.02em;
  border: 1px solid var(--tint-ring, var(--fw-line));
  overflow: hidden;
}
.fx-crest img { position: absolute; inset: 3px; width: calc(100% - 6px); height: calc(100% - 6px); object-fit: contain; }
.fx-crest.is-sm { width: 22px; height: 22px; border-radius: 5px; font-size: 0.5rem; }
.fx-crest.is-lg { width: 54px; height: 54px; border-radius: 11px; font-size: var(--fw-t-s); border-width: 2px; }
.fx-crest.is-xl { width: 76px; height: 76px; border-radius: 14px; font-size: var(--fw-t-b); border-width: 2px; }

.fx-mug {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; flex: 0 0 auto;
  border-radius: 50%; overflow: hidden;
  background: var(--tint, var(--fw-card2));
  border: 1px solid var(--tint-ring, var(--fw-line));
  color: var(--fw-ink-2);
  font-family: var(--fw-mono); font-size: var(--fw-t-meta); font-weight: 700;
}
.fx-mug img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.fx-mug.is-sm { width: 26px; height: 26px; font-size: var(--fw-t-micro); }
.fx-mug.is-lg { width: 60px; height: 60px; font-size: 0.95rem; border-width: 2px; }

/* -----------------------------------------------------------------------------
   Shared furniture
   -------------------------------------------------------------------------- */
.fx-bar { display: block; height: 6px; border-radius: 999px; background: var(--fw-dtrack); overflow: hidden; min-width: 54px; }
.fx-bar > i { display: block; height: 100%; border-radius: 999px; background: var(--fw-fill); }
.fx-bar.is-up > i { background: var(--fw-up); }
.fx-bar.is-down > i { background: var(--fw-down); }
.fx-barcell { display: flex; align-items: center; gap: 8px; justify-content: flex-end; }
.fx-barcell .v { font-family: var(--fw-mono); font-size: var(--fw-t-s); font-weight: 700; }

.fx-note {
  margin: 1rem 0 0; padding: 0.85rem 1rem;
  border: 1px solid var(--fw-line); border-left: 3px solid var(--fw-blue);
  border-radius: 10px; background: var(--fw-card);
}
.fx-note p { margin: 0 0 0.5rem; font-size: var(--fw-t-s); line-height: 1.65; color: var(--fw-ink-2); }
.fx-note p:last-child { margin-bottom: 0; }
.fx-note .tag {
  display: inline-block; margin-right: 7px;
  font-family: var(--fw-mono); font-size: var(--fw-t-micro);
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--fw-blue);
}

.fx-receipts {
  margin: 1.4rem 0 0; padding: 1rem 1.1rem;
  border: 1px solid var(--fw-line); border-radius: 12px; background: var(--fw-card2);
}
.fx-receipts h3 {
  margin: 0 0 0.6rem; font-family: var(--fw-mono); font-size: var(--fw-t-meta);
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--fw-muted); font-weight: 700;
}
.fx-receipts ol, .fx-receipts ul { margin: 0; padding-left: 1.15rem; }
.fx-receipts li { font-size: var(--fw-t-s); line-height: 1.6; color: var(--fw-ink-2); margin-bottom: 0.42rem; }
.fx-receipts li:last-child { margin-bottom: 0; }
.fx-receipts a { color: var(--fw-blue); text-decoration: underline; text-underline-offset: 2px; }

/* -----------------------------------------------------------------------------
   Schedule — hero crest strip
   -------------------------------------------------------------------------- */
.fx-crestrail {
  display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
}
.fx-crestcard {
  border: 1px solid var(--fw-line); border-radius: 14px; background: var(--fw-card);
  padding: 1rem; display: flex; flex-direction: column; gap: 0.7rem;
  border-top: 3px solid var(--tint-ring, var(--fw-blue-line));
}
.fx-crestcard .head { display: flex; align-items: center; gap: 10px; }
.fx-crestcard .tri { font-family: var(--fw-mono); font-weight: 700; font-size: 1.05rem; letter-spacing: 0.04em; }
.fx-crestcard .seat {
  font-family: var(--fw-mono); font-size: var(--fw-t-micro); letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--fw-muted); display: block; margin-top: 2px;
}
.fx-crestcard .fig { font-family: var(--fw-mono); font-size: 1.5rem; font-weight: 700; line-height: 1; }
.fx-crestcard .fig span { font-size: var(--fw-t-meta); letter-spacing: 0.1em; text-transform: uppercase; color: var(--fw-muted); margin-left: 6px; }
.fx-crestcard .line { margin: 0; font-size: var(--fw-t-meta-2); line-height: 1.55; color: var(--fw-ink-2); }

/* Schedule — sortable table */
.fx-tablewrap {
  overflow-x: auto; border: 1px solid var(--fw-line); border-radius: 12px;
  background: var(--fw-card); -webkit-overflow-scrolling: touch;
}
.fx-table { width: 100%; border-collapse: collapse; min-width: 940px; }
.fx-table caption {
  caption-side: top; text-align: left; padding: 0.8rem 1rem 0.55rem;
  font-family: var(--fw-mono); font-size: var(--fw-t-meta); letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--fw-muted);
}
.fx-table th, .fx-table td {
  padding: 0.5rem 0.7rem; text-align: right; white-space: nowrap;
  border-bottom: 1px solid var(--fw-hair);
  font-family: var(--fw-mono); font-size: var(--fw-t-s); color: var(--fw-ink-2);
  font-variant-numeric: tabular-nums;
}
.fx-table thead th {
  position: sticky; top: 0; z-index: 2;
  background: var(--fw-card2); color: var(--fw-muted);
  font-size: var(--fw-t-micro); letter-spacing: 0.1em; text-transform: uppercase;
  border-bottom: 1px solid var(--fw-line);
}
.fx-table thead th button {
  display: inline-flex; align-items: center; gap: 4px; width: 100%; justify-content: flex-end;
  font: inherit; letter-spacing: inherit; text-transform: inherit; color: inherit;
}
.fx-table thead th button:hover { color: var(--fw-blue); }
.fx-table thead th[aria-sort="ascending"] button,
.fx-table thead th[aria-sort="descending"] button { color: var(--fw-blue); }
.fx-table thead th button .ar { font-size: 0.65em; opacity: 0.9; }
.fx-table th.c-team, .fx-table td.c-team { text-align: left; }
.fx-table td.c-team .who { display: flex; align-items: center; gap: 9px; }
.fx-table td.c-team b { font-size: var(--fw-t-b); color: var(--fw-ink); letter-spacing: 0.03em; }
.fx-table td.c-team .sub { display: block; font-family: var(--fw-sans); font-size: var(--fw-t-micro); color: var(--fw-muted); letter-spacing: 0.06em; text-transform: uppercase; }
.fx-table tbody tr:hover { background: var(--fw-card2); }
.fx-table tbody tr:last-child td { border-bottom: 0; }
.fx-table td.is-lead { color: var(--fw-ink); font-weight: 700; }
.fx-table .grp { border-left: 1px solid var(--fw-line); }

/* Schedule — controls shared by the matrix and the compare strip */
.fx-controls {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
  margin: 0 0 0.7rem; justify-content: space-between;
}
.fx-chiprow { display: flex; flex-wrap: wrap; gap: 6px; }
/* Specificity note: .fx-scope button resets border/background, so the chip has
   to be scoped too or it renders as bare text. */
.fx-scope .fx-chip {
  font-family: var(--fw-mono); font-size: var(--fw-t-micro); letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--fw-muted);
  border: 1px solid var(--fw-line); border-radius: 999px; padding: 5px 11px;
  background: var(--fw-card); transition: color 0.15s ease, border-color 0.15s ease;
}
.fx-scope .fx-chip:hover { color: var(--fw-ink); border-color: var(--fw-blue-line); }
.fx-scope .fx-chip.is-on {
  color: var(--fw-on-blue); background: var(--fw-blue); border-color: var(--fw-blue);
}

/* Schedule — streaming matrix */
.fx-tablewrap.is-matrix { max-height: min(72vh, 720px); overflow: auto; }
.fx-matrix { width: 100%; border-collapse: separate; border-spacing: 3px; min-width: 620px; }
.fx-matrix th {
  font-family: var(--fw-mono); font-size: var(--fw-t-micro); letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--fw-muted); font-weight: 700; padding: 4px 6px;
}
.fx-matrix th.c-team { text-align: left; }
.fx-matrix td { padding: 0; }
.fx-matrix td .cell {
  display: flex; align-items: center; justify-content: center;
  min-width: 46px; height: 34px; border-radius: 7px;
  font-family: var(--fw-mono); font-weight: 700; font-size: var(--fw-t-s);
  color: var(--fw-ink);
  background: color-mix(in srgb, var(--fw-fill) calc(var(--w) * 100%), var(--fw-dtrack));
  border: 1px solid transparent;
}

/* Full-season grid: 32 rows by ~28 week columns, so the club column and the
   week header both pin while the body scrolls inside its own container. */
.fx-matrix.is-full { min-width: 0; border-spacing: 2px; }
.fx-matrix.is-full caption {
  caption-side: top; text-align: left; padding: 0.75rem 0.9rem 0.5rem;
  font-family: var(--fw-mono); font-size: var(--fw-t-meta); letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--fw-muted); line-height: 1.5;
  position: sticky; left: 0;
}
.fx-matrix.is-full thead th {
  position: sticky; top: 0; z-index: 2; background: var(--fw-card);
  padding: 5px 3px; line-height: 1.15;
}
.fx-matrix.is-full thead th b { display: block; color: var(--fw-ink-2); font-size: var(--fw-t-meta-2); }
.fx-matrix.is-full thead th span { display: block; font-weight: 500; font-size: 0.5rem; opacity: 0.8; }
.fx-matrix.is-full thead th.is-po b { color: var(--fw-blue); }
.fx-matrix.is-full thead th.is-po::after {
  content: ""; display: block; height: 2px; border-radius: 2px;
  background: var(--fw-blue); margin: 3px 2px 0;
}
.fx-matrix.is-full th.c-team {
  position: sticky; left: 0; z-index: 3; background: var(--fw-card);
  box-shadow: 1px 0 0 var(--fw-line); padding-right: 9px;
}
.fx-matrix.is-full th.is-corner { z-index: 4; }
.fx-matrix.is-full td.is-tot, .fx-matrix.is-full th.is-tot {
  position: sticky; right: 0; z-index: 2; background: var(--fw-card);
  box-shadow: -1px 0 0 var(--fw-line);
}
.fx-matrix.is-full td .cell { min-width: 30px; height: 28px; border-radius: 6px; font-size: var(--fw-t-meta-2); }
.fx-matrix.is-full td .cell.is-zero {
  background: transparent; border: 1px dashed var(--fw-line); color: var(--fw-muted);
}
/* The high/low marks are rings, not fills: the fill is already carrying the
   count, so a soft mint wash on the busiest cell would read as the lightest. */
.fx-matrix.is-full td .cell.is-max,
.fx-matrix.is-full td .cell.is-min {
  background: color-mix(in srgb, var(--fw-fill) calc(var(--w) * 100%), var(--fw-dtrack));
  color: var(--fw-ink);
}
.fx-matrix.is-full td .cell.is-max { border-color: var(--fw-up); box-shadow: inset 0 0 0 1px var(--fw-up); }
.fx-matrix.is-full td .cell.is-min { border-color: var(--fw-down); box-shadow: inset 0 0 0 1px var(--fw-down); }
.fx-matrix td .cell.is-max { border-color: var(--fw-up); color: var(--fw-up); background: var(--fw-up-soft); }
.fx-matrix td .cell.is-min { border-color: var(--fw-down); color: var(--fw-down); background: var(--fw-down-soft); }
.fx-matrix td .cell.is-total { background: var(--fw-card2); border-color: var(--fw-line); color: var(--fw-ink-2); }
.fx-matrix .teamcell { display: flex; align-items: center; gap: 8px; }
.fx-matrix .teamcell b { font-family: var(--fw-mono); font-size: var(--fw-t-s); color: var(--fw-ink); }

.fx-legend { display: flex; flex-wrap: wrap; gap: 12px; margin: 0.7rem 0 0; align-items: center; }
.fx-legend .k {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--fw-mono); font-size: var(--fw-t-micro); letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--fw-muted);
}
.fx-legend .k i { width: 14px; height: 14px; border-radius: 4px; display: inline-block; border: 1px solid var(--fw-line); }
.fx-legend .k i.is-max { background: var(--fw-fill); border-color: var(--fw-up); border-width: 2px; }
.fx-legend .k i.is-min { background: var(--fw-dtrack); border-color: var(--fw-down); border-width: 2px; }
.fx-legend .k i.is-mid { background: var(--fw-fill); border-color: var(--fw-fill); }
.fx-legend .k i.is-po { background: var(--fw-blue-soft); border-color: var(--fw-blue); }

/* -----------------------------------------------------------------------------
   Schedule — compare two clubs' weeks
   -------------------------------------------------------------------------- */
.fx-cmphead { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px; margin: 0 0 0.7rem; }
.fx-pickr { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.fx-pickr > span {
  font-family: var(--fw-mono); font-size: var(--fw-t-micro); letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--fw-muted);
}
.fx-pickr select {
  font-family: var(--fw-sans); font-size: var(--fw-t-s); color: var(--fw-ink);
  background: var(--fw-card); border: 1px solid var(--fw-line); border-radius: 9px;
  padding: 7px 10px; max-width: 220px;
}
.fx-pickr select:focus-visible { outline: 2px solid var(--fw-blue); outline-offset: 2px; }

.fx-cmpkey { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; margin: 0 0 0.6rem; }
.fx-cmpkey .k {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: var(--fw-t-s); color: var(--fw-ink-2);
}
.fx-cmpkey .k i { width: 12px; height: 12px; border-radius: 3px; display: inline-block; }
.fx-cmpkey .k i.sa { background: var(--fw-fill); }
.fx-cmpkey .k i.sb { background: transparent; box-shadow: inset 0 0 0 1.5px var(--fw-blue-line); }
.fx-cmpkey .k.is-note {
  font-family: var(--fw-mono); font-size: var(--fw-t-micro); letter-spacing: 0.09em;
  text-transform: uppercase; color: var(--fw-muted);
}

.fx-cmpwrap {
  overflow-x: auto; border: 1px solid var(--fw-line); border-radius: 12px;
  background: var(--fw-card); padding: 0.85rem 0.7rem 0.55rem; -webkit-overflow-scrolling: touch;
}
.fx-cmpstrip { display: flex; gap: 3px; align-items: flex-end; min-width: 620px; }
.fx-cmpstrip .wk { flex: 1 1 0; min-width: 20px; display: flex; flex-direction: column; align-items: center; gap: 5px; }
.fx-cmpstrip .wk .pair {
  display: flex; gap: 2px; align-items: flex-end; justify-content: center;
  height: 76px; width: 100%;
}
.fx-cmpstrip .wk .pair i {
  display: block; width: 46%; min-width: 6px; border-radius: 3px 3px 0 0;
  height: max(3px, var(--h)); background: var(--fw-dtrack);
}
.fx-cmpstrip .wk .pair i.ba { background: var(--fw-fill); }
/* A tied week gets no semantic colour, so club B stays a hollow bar rather than
   a dark fill that vanishes in the dark theme. */
.fx-cmpstrip .wk .pair i.bb { background: transparent; box-shadow: inset 0 0 0 1.5px var(--fw-blue-line); }
.fx-cmpstrip .wk .pair i.bb.is-up, .fx-cmpstrip .wk .pair i.bb.is-down { box-shadow: none; }
.fx-cmpstrip .wk .pair i.is-up { background: var(--fw-up); }
.fx-cmpstrip .wk .pair i.is-down { background: var(--fw-down); }
.fx-cmpstrip .wk u {
  text-decoration: none; font-family: var(--fw-mono); font-size: 0.5rem;
  color: var(--fw-muted); letter-spacing: 0.04em;
}
.fx-cmpstrip .wk.is-po u { color: var(--fw-blue); }
.fx-cmpstrip .wk.is-wide { background: var(--fw-card2); border-radius: 6px; }
.fx-cmpread {
  margin: 0.7rem 0 0; font-size: var(--fw-t-s); line-height: 1.65; color: var(--fw-ink-2);
  max-width: 78ch;
}

/* -----------------------------------------------------------------------------
   Schedule — the labelled playoff window
   -------------------------------------------------------------------------- */
.fx-lede-2 { margin: 0 0 0.85rem; font-size: var(--fw-t-s); line-height: 1.65; color: var(--fw-ink-2); max-width: 82ch; }
.fx-polist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 5px; }
.fx-porow {
  display: grid; align-items: center; gap: 10px;
  grid-template-columns: 26px 22px minmax(0, 1fr) 58px 74px minmax(70px, 1fr) auto;
  border: 1px solid var(--fw-line); border-radius: 10px; background: var(--fw-card);
  padding: 6px 10px;
}
.fx-porow:hover { background: var(--fw-card2); }
.fx-porow.is-up { border-color: var(--fw-up); }
.fx-porow.is-down { border-color: var(--fw-down); }
.fx-porow .rk { font-family: var(--fw-mono); font-size: var(--fw-t-s); font-weight: 700; color: var(--fw-muted); }
.fx-porow .nm { min-width: 0; }
.fx-porow .nm b { display: block; font-family: var(--fw-mono); font-size: var(--fw-t-s); color: var(--fw-ink); }
.fx-porow .nm .sub {
  display: block; font-size: var(--fw-t-micro); letter-spacing: 0.07em;
  text-transform: uppercase; color: var(--fw-muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.fx-porow .fig { font-family: var(--fw-mono); font-size: var(--fw-t-micro); color: var(--fw-muted); }
.fx-porow .fig b { display: block; font-size: var(--fw-t-b); color: var(--fw-ink); font-weight: 700; }
.fx-porow .fig span { letter-spacing: 0.08em; text-transform: uppercase; }
.fx-porow .mini { display: flex; gap: 2px; }
.fx-porow .mini i {
  display: flex; align-items: center; justify-content: center;
  width: 20px; height: 20px; border-radius: 5px;
  font-family: var(--fw-mono); font-size: 0.5rem; font-weight: 700; color: var(--fw-ink);
  background: color-mix(in srgb, var(--fw-fill) calc(var(--w) * 100%), var(--fw-dtrack));
}

/* -----------------------------------------------------------------------------
   Rookies / busts — player cards
   -------------------------------------------------------------------------- */
.fx-cards { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(292px, 1fr)); }
.fx-card {
  border: 1px solid var(--fw-line); border-radius: 14px; background: var(--fw-card);
  padding: 1rem; display: flex; flex-direction: column; gap: 0.8rem;
}
.fx-card.is-lead { border-color: var(--fw-blue-line); box-shadow: var(--fw-shadow); }
.fx-card .top { display: flex; align-items: center; gap: 10px; }
.fx-card .top .who { min-width: 0; flex: 1 1 auto; }
.fx-card .top .who a, .fx-card .top .who b { color: var(--fw-ink); font-weight: 700; text-decoration: none; font-size: var(--fw-t-b); display: block; }
.fx-card .top .who a:hover { color: var(--fw-blue); }
.fx-card .top .who .sub {
  display: block; margin-top: 2px; font-family: var(--fw-mono); font-size: var(--fw-t-micro);
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--fw-muted);
}
.fx-card .ranks { display: grid; gap: 6px; grid-template-columns: repeat(auto-fit, minmax(64px, 1fr)); }
.fx-card .ranks .r {
  border: 1px solid var(--fw-hair); border-radius: 8px; background: var(--fw-card2);
  padding: 6px 7px; text-align: left;
}
.fx-card .ranks .r b { display: block; font-family: var(--fw-mono); font-size: var(--fw-t-b); font-weight: 700; color: var(--fw-ink); }
.fx-card .ranks .r span {
  display: block; margin-top: 1px; font-family: var(--fw-mono); font-size: var(--fw-t-micro);
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--fw-muted);
}
.fx-card .ranks .r.is-market { border-color: var(--fw-blue-line); }
.fx-card .ranks .r.is-house { border-color: var(--fw-down); }
.fx-card .note { margin: 0; font-size: var(--fw-t-s); line-height: 1.6; color: var(--fw-ink-2); }
.fx-card .ev { margin: 0; font-size: var(--fw-t-s); line-height: 1.6; color: var(--fw-ink-2); }
.fx-card .ev b { color: var(--fw-ink); }
.fx-card .rail { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.fx-card .gap {
  display: inline-flex; align-items: baseline; gap: 5px;
  border: 1px solid var(--fw-down); background: var(--fw-down-soft); color: var(--fw-down);
  border-radius: 999px; padding: 3px 9px;
  font-family: var(--fw-mono); font-size: var(--fw-t-meta-2); font-weight: 700;
}
.fx-card .gap span { font-size: var(--fw-t-micro); letter-spacing: 0.1em; text-transform: uppercase; opacity: 0.9; }

.fx-tag {
  display: inline-flex; align-items: center; gap: 5px;
  border: 1px solid var(--fw-line); border-radius: 999px; padding: 2px 8px;
  font-family: var(--fw-mono); font-size: var(--fw-t-micro); letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--fw-muted);
}
.fx-tag.is-blue { color: var(--fw-blue); border-color: var(--fw-blue-line); background: var(--fw-blue-soft); }
.fx-tag.is-up { color: var(--fw-up); border-color: var(--fw-up); background: var(--fw-up-soft); }
.fx-tag.is-down { color: var(--fw-down); border-color: var(--fw-down); background: var(--fw-down-soft); }

.fx-shelf { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(228px, 1fr)); }
.fx-slab {
  border: 1px solid var(--fw-line); border-radius: 12px; background: var(--fw-card);
  padding: 0.85rem; display: flex; flex-direction: column; gap: 0.55rem;
}
.fx-slab .top { display: flex; align-items: center; gap: 9px; }
.fx-slab .top .who a, .fx-slab .top .who b { color: var(--fw-ink); font-weight: 700; text-decoration: none; font-size: var(--fw-t-s); display: block; }
.fx-slab .top .who a:hover { color: var(--fw-blue); }
.fx-slab .top .who .sub { display: block; font-family: var(--fw-mono); font-size: var(--fw-t-micro); letter-spacing: 0.1em; text-transform: uppercase; color: var(--fw-muted); }
.fx-slab .line { margin: 0; font-size: var(--fw-t-meta-2); line-height: 1.55; color: var(--fw-ink-2); }
.fx-slab .figs { display: flex; flex-wrap: wrap; gap: 6px; }
.fx-slab .figs .f {
  border: 1px solid var(--fw-hair); border-radius: 7px; background: var(--fw-card2);
  padding: 4px 7px; font-family: var(--fw-mono); font-size: var(--fw-t-meta-2); color: var(--fw-ink);
}
.fx-slab .figs .f span { color: var(--fw-muted); font-size: var(--fw-t-micro); letter-spacing: 0.08em; text-transform: uppercase; margin-left: 4px; }

/* -----------------------------------------------------------------------------
   Mock draft — rounds and pick chips
   -------------------------------------------------------------------------- */
/* Fifteen rounds in a column read as one wall, so the rounds alternate
   surfaces and each block carries its own numeral as a watermark behind the
   content — knocked-back ink at the crest-ghost weight, no hue of its own,
   decorative and hidden from assistive tech. */
.fx-round {
  position: relative; overflow: hidden;
  border: 1px solid var(--fw-line); border-radius: 14px; background: var(--fw-card);
  padding: 1rem; margin: 0 0 14px;
}
.fx-round.is-even { background: var(--fw-card2); }
/* on the darker band the pick tiles step the other way, so a tile never
   disappears into the surface it sits on. The "our pick" tile keeps its blue. */
.fx-round.is-even .fx-pick:not(.is-ours) { background: var(--fw-card); }
.fx-roundghost {
  position: absolute; z-index: 0; pointer-events: none; user-select: none;
  right: 8px; top: -14px;
  font-family: var(--fw-serif); font-weight: 700; line-height: 0.78;
  font-size: clamp(4.5rem, 13vw, 8.5rem); letter-spacing: -0.05em;
  color: var(--fw-ink); opacity: 0.08; font-variant-numeric: tabular-nums;
}
.fx-round > *:not(.fx-roundghost) { position: relative; z-index: 1; }
.fx-round > .head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px; margin-bottom: 0.7rem; }
.fx-round > .head h3 {
  margin: 0; font-family: var(--fw-mono); font-size: var(--fw-t-b); font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--fw-ink);
}
.fx-round > .head .dir {
  font-family: var(--fw-mono); font-size: var(--fw-t-micro); letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--fw-muted);
}
.fx-round .desk { margin: 0 0 0.85rem; font-size: var(--fw-t-s); line-height: 1.65; color: var(--fw-ink-2); max-width: 78ch; }
.fx-round .desk b { color: var(--fw-ink); }
.fx-picks { display: grid; gap: 8px; grid-template-columns: repeat(auto-fill, minmax(196px, 1fr)); }
.fx-pick {
  display: flex; align-items: center; gap: 8px;
  border: 1px solid var(--fw-hair); border-radius: 10px; background: var(--fw-card2);
  padding: 7px 9px; min-width: 0;
}
.fx-pick .no {
  font-family: var(--fw-mono); font-size: var(--fw-t-micro); color: var(--fw-muted);
  min-width: 34px; letter-spacing: 0.04em;
}
.fx-pick .nm { min-width: 0; flex: 1 1 auto; }
.fx-pick .nm a, .fx-pick .nm b {
  display: block; color: var(--fw-ink); font-weight: 700; font-size: var(--fw-t-meta-2);
  text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.fx-pick .nm a:hover { color: var(--fw-blue); }
.fx-pick .nm .sub { display: block; font-family: var(--fw-mono); font-size: var(--fw-t-micro); color: var(--fw-muted); letter-spacing: 0.08em; }
.fx-pick.is-ours { border-color: var(--fw-blue); background: var(--fw-blue-soft); }
.fx-pick.is-ours .no { color: var(--fw-blue); }
.fx-pick.is-g { border-left: 3px solid var(--fw-line); }

.fx-teamcols { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); }
.fx-teamcol { border: 1px solid var(--fw-line); border-radius: 12px; background: var(--fw-card); padding: 0.8rem; }
.fx-teamcol h3 {
  margin: 0 0 0.55rem; font-family: var(--fw-mono); font-size: var(--fw-t-meta);
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--fw-muted); font-weight: 700;
}
.fx-teamcol ol { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 5px; }
.fx-teamcol li { display: flex; align-items: center; gap: 7px; min-width: 0; }
.fx-teamcol li .no { font-family: var(--fw-mono); font-size: var(--fw-t-micro); color: var(--fw-muted); min-width: 24px; }
.fx-teamcol li a, .fx-teamcol li b {
  color: var(--fw-ink); font-weight: 600; font-size: var(--fw-t-meta-2); text-decoration: none;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.fx-teamcol li a:hover { color: var(--fw-blue); }
.fx-teamcol li .pos { font-family: var(--fw-mono); font-size: var(--fw-t-micro); color: var(--fw-muted); margin-left: auto; }

/* -----------------------------------------------------------------------------
   The five-draft ledger — /fantasy/rookies/
   Top-10 picks of 2021 through 2025, one block per draft year. The podium
   treatment on picks 1-3 is a border weight and a seat label, not a colour
   award: no gold is declared anywhere in this file.
   -------------------------------------------------------------------------- */
.fx-status {
  display: inline-flex; align-items: center; gap: 5px;
  font-family: var(--fw-mono); font-size: var(--fw-t-micro); font-weight: 700;
  letter-spacing: 0.11em; text-transform: uppercase;
  border: 1px solid var(--fw-line); border-radius: 999px;
  padding: 3px 8px; color: var(--fw-muted); background: var(--fw-card2);
  white-space: nowrap;
}
.fx-status::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: var(--fw-muted);
}
.fx-status.is-rookie { color: var(--fw-blue); border-color: var(--fw-blue-line); background: var(--fw-blue-soft); }
.fx-status.is-rookie::before { background: var(--fw-blue); }
.fx-status.is-soph { color: var(--fw-up); border-color: var(--fw-up); background: var(--fw-up-soft); }
.fx-status.is-soph::before { background: var(--fw-up); }
.fx-status.is-vet { color: var(--fw-ink); border-color: var(--fw-line); background: var(--fw-track); }
.fx-status.is-vet::before { background: var(--fw-ink-2); }
.fx-status.is-none { color: var(--fw-down); border-color: var(--fw-down); background: var(--fw-down-soft); }
.fx-status.is-none::before { background: var(--fw-down); }

.fx-year { margin: 0 0 18px; }
.fx-yearhead {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px 16px;
  border-bottom: 2px solid var(--fw-ink); padding-bottom: 7px; margin-bottom: 12px;
}
.fx-yearhead h3 {
  margin: 0; font-family: var(--fw-mono); font-size: 1.45rem; font-weight: 700;
  letter-spacing: 0.02em; color: var(--fw-ink); line-height: 1;
}
.fx-yearhead .sub {
  font-family: var(--fw-mono); font-size: var(--fw-t-meta);
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--fw-muted);
}
.fx-yearhead .sum { margin-left: auto; display: flex; flex-wrap: wrap; gap: 6px; }
.fx-yearhead .sum b {
  font-family: var(--fw-mono); font-size: var(--fw-t-meta-2); font-weight: 700;
  color: var(--fw-ink-2); border: 1px solid var(--fw-hair); border-radius: 7px;
  padding: 3px 7px; background: var(--fw-card2);
}
.fx-yearhead .sum b span { color: var(--fw-muted); font-weight: 600; margin-left: 4px; letter-spacing: 0.06em; text-transform: uppercase; font-size: var(--fw-t-micro); }

.fx-ledger { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(268px, 1fr)); }
.fx-lcard {
  position: relative; display: flex; flex-direction: column; gap: 9px;
  border: 1px solid var(--fw-line); border-radius: 13px; background: var(--fw-card);
  padding: 0.8rem 0.85rem; min-width: 0;
  border-left: 3px solid var(--tint-ring, var(--fw-line));
}
.fx-lcard.is-p1 { border-color: var(--fw-blue-line); box-shadow: var(--fw-shadow); }
.fx-lcard.is-p2, .fx-lcard.is-p3 { border-top-color: var(--fw-blue-line); }
.fx-lcard .seat {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  font-family: var(--fw-mono); font-size: var(--fw-t-micro); letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--fw-muted);
}
.fx-lcard.is-p1 .seat .no, .fx-lcard.is-p2 .seat .no, .fx-lcard.is-p3 .seat .no { color: var(--fw-blue); }
.fx-lcard .seat .no { font-weight: 700; font-size: var(--fw-t-meta-2); color: var(--fw-ink-2); }
.fx-lcard .top { display: flex; align-items: center; gap: 10px; min-width: 0; }
.fx-lcard .who { min-width: 0; flex: 1 1 auto; }
.fx-lcard .who a, .fx-lcard .who b {
  display: block; color: var(--fw-ink); font-weight: 700; font-size: var(--fw-t-b);
  text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.fx-lcard .who a:hover { color: var(--fw-blue); }
.fx-lcard .who .sub {
  display: block; font-family: var(--fw-mono); font-size: var(--fw-t-micro);
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--fw-muted);
}
.fx-lcard .figs { display: flex; flex-wrap: wrap; gap: 5px; }
.fx-lcard .figs .f {
  font-family: var(--fw-mono); font-size: var(--fw-t-s); font-weight: 700; color: var(--fw-ink);
  border: 1px solid var(--fw-hair); border-radius: 7px; padding: 3px 6px; background: var(--fw-card2);
}
.fx-lcard .figs .f span {
  color: var(--fw-muted); font-size: var(--fw-t-micro); letter-spacing: 0.08em;
  text-transform: uppercase; margin-left: 4px; font-weight: 600;
}
.fx-lcard .line { margin: 0; font-size: var(--fw-t-meta-2); line-height: 1.55; color: var(--fw-ink-2); }
.fx-lcard .line b { color: var(--fw-ink); }

.fx-dual { display: flex; align-items: center; gap: 5px; }
.fx-dual .arrow { font-family: var(--fw-mono); font-size: var(--fw-t-micro); color: var(--fw-muted); }

.fx-where {
  display: flex; align-items: center; gap: 7px; flex-wrap: wrap;
  border: 1px dashed var(--fw-line); border-radius: 9px; background: var(--fw-card2);
  padding: 6px 8px;
}
.fx-where .k {
  font-family: var(--fw-mono); font-size: var(--fw-t-micro); letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--fw-muted);
}
.fx-where .v { font-size: var(--fw-t-meta-2); color: var(--fw-ink); font-weight: 600; }
.fx-where .v .lg { font-family: var(--fw-mono); color: var(--fw-blue); font-weight: 700; }
.fx-where.is-unresolved { border-color: var(--fw-down); }
.fx-where.is-unresolved .v { color: var(--fw-down); }

/* the roll-up strip under the ledger */
.fx-rollup { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); margin-top: 6px; }
.fx-rollup .r {
  border: 1px solid var(--fw-line); border-radius: 12px; background: var(--fw-card);
  padding: 0.75rem 0.8rem; display: flex; flex-direction: column; gap: 5px;
}
.fx-rollup .r b { font-family: var(--fw-mono); font-size: 1.6rem; font-weight: 700; line-height: 1; color: var(--fw-ink); }
.fx-rollup .r span {
  font-family: var(--fw-mono); font-size: var(--fw-t-micro); letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--fw-muted);
}
.fx-rollup .r p { margin: 0; font-size: var(--fw-t-meta-2); line-height: 1.5; color: var(--fw-ink-2); }

/* -----------------------------------------------------------------------------
   Filter chips + the ranked prospect board
   -------------------------------------------------------------------------- */
.fx-filters { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 12px; align-items: center; }
.fx-filters .lbl {
  font-family: var(--fw-mono); font-size: var(--fw-t-micro); letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--fw-muted); margin-right: 4px;
}
.fx-scope .fx-fbtn {
  font-family: var(--fw-mono); font-size: var(--fw-t-micro); font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase;
  border: 1px solid var(--fw-line); border-radius: 999px; background: var(--fw-card);
  color: var(--fw-ink-2); padding: 5px 11px; cursor: pointer;
}
.fx-scope .fx-fbtn:hover { border-color: var(--fw-blue-line); color: var(--fw-blue); }
.fx-scope .fx-fbtn[aria-pressed="true"] {
  background: var(--fw-blue); border-color: var(--fw-blue); color: var(--fw-on-blue);
}

.fx-plist { display: flex; flex-direction: column; gap: 6px; }
.fx-prow {
  display: grid; align-items: center; gap: 10px;
  grid-template-columns: 40px 34px minmax(0, 1.55fr) minmax(0, 1.1fr) minmax(0, 1fr) 116px;
  border: 1px solid var(--fw-line); border-radius: 11px; background: var(--fw-card);
  padding: 7px 10px; min-width: 0;
}
.fx-prow:hover { background: var(--fw-card2); }
.fx-prow .rk { font-family: var(--fw-mono); font-size: var(--fw-t-b); font-weight: 700; color: var(--fw-ink-2); }
.fx-prow .nm { min-width: 0; }
.fx-prow .nm a, .fx-prow .nm b {
  display: block; color: var(--fw-ink); font-weight: 700; font-size: var(--fw-t-s);
  text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.fx-prow .nm a:hover { color: var(--fw-blue); }
.fx-prow .nm .sub {
  display: block; font-family: var(--fw-mono); font-size: var(--fw-t-micro);
  letter-spacing: 0.09em; text-transform: uppercase; color: var(--fw-muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.fx-prow .now { min-width: 0; }
.fx-prow .now b { display: block; font-family: var(--fw-mono); font-size: var(--fw-t-meta-2); color: var(--fw-blue); font-weight: 700; }
.fx-prow .now span { display: block; font-size: var(--fw-t-micro); color: var(--fw-ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fx-prow .tier { font-size: var(--fw-t-micro); line-height: 1.45; color: var(--fw-ink-2); }
.fx-prow .score { display: flex; flex-direction: column; gap: 4px; }
.fx-prow .score .v { font-family: var(--fw-mono); font-size: var(--fw-t-s); font-weight: 700; color: var(--fw-ink); text-align: right; }
.fx-prow .score .v u { text-decoration: none; color: var(--fw-muted); font-size: var(--fw-t-micro); letter-spacing: 0.08em; text-transform: uppercase; margin-left: 4px; }

.fx-b27 { display: grid; gap: 8px; grid-template-columns: repeat(auto-fill, minmax(238px, 1fr)); }
.fx-b27card {
  border: 1px solid var(--fw-line); border-radius: 11px; background: var(--fw-card);
  padding: 0.7rem 0.75rem; display: flex; flex-direction: column; gap: 6px; min-width: 0;
}
.fx-b27card .hd { display: flex; align-items: baseline; gap: 8px; }
.fx-b27card .hd .rk { font-family: var(--fw-mono); font-size: var(--fw-t-b); font-weight: 700; color: var(--fw-blue); min-width: 24px; }
.fx-b27card .hd b { color: var(--fw-ink); font-size: var(--fw-t-s); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fx-b27card .sub { font-family: var(--fw-mono); font-size: var(--fw-t-micro); letter-spacing: 0.09em; text-transform: uppercase; color: var(--fw-muted); }
.fx-b27card p { margin: 0; font-size: var(--fw-t-micro); line-height: 1.5; color: var(--fw-ink-2); }
.fx-b27card .srcs { display: flex; flex-wrap: wrap; gap: 4px; }
.fx-b27card .srcs u {
  text-decoration: none; font-family: var(--fw-mono); font-size: var(--fw-t-micro);
  border: 1px solid var(--fw-hair); border-radius: 6px; padding: 2px 5px; color: var(--fw-muted);
}
.fx-b27card .srcs u b { color: var(--fw-ink); }

.fx-empty {
  border: 1px dashed var(--fw-line); border-radius: 11px; padding: 1rem;
  font-size: var(--fw-t-s); color: var(--fw-muted); text-align: center;
}

/* -----------------------------------------------------------------------------
   Small screens
   -------------------------------------------------------------------------- */
@media (max-width: 900px) {
  .fx-prow { grid-template-columns: 34px 30px minmax(0, 1fr) minmax(0, 1fr); }
  .fx-prow .tier { display: none; }
  .fx-prow .score { grid-column: 3 / -1; flex-direction: row; align-items: center; gap: 8px; }
  .fx-prow .score .v { text-align: left; }
}
@media (max-width: 900px) {
  .fx-porow { grid-template-columns: 24px 22px minmax(0, 1fr) 52px 66px; row-gap: 6px; }
  .fx-porow .fx-bar { grid-column: 3 / -1; }
  .fx-porow .mini { grid-column: 3 / -1; flex-wrap: wrap; }
}
@media (max-width: 720px) {
  .fx-crestrail { grid-template-columns: repeat(auto-fit, minmax(148px, 1fr)); }
  .fx-controls { flex-direction: column; align-items: stretch; }
  .fx-controls .fx-chiprow.is-right { justify-content: flex-start; }
  .fx-tablewrap.is-matrix { max-height: 62vh; }
  .fx-matrix.is-full td .cell { min-width: 26px; height: 26px; }
  .fx-matrix.is-full .teamcell .fx-crest { display: none; }
  .fx-cmphead { gap: 8px; }
  .fx-pickr { flex: 1 1 44%; }
  .fx-pickr select { max-width: none; width: 100%; }
  .fx-cmpstrip { min-width: 560px; }
  .fx-cmpstrip .wk .pair { height: 62px; }
  .fx-porow { grid-template-columns: 22px 22px minmax(0, 1fr) 48px 60px; }
  .fx-cards { grid-template-columns: 1fr; }
  .fx-picks { grid-template-columns: 1fr; }
  .fx-crestcard .fig { font-size: 1.3rem; }
  .fx-ledger { grid-template-columns: 1fr; }
  .fx-yearhead h3 { font-size: 1.2rem; }
  .fx-yearhead .sum { margin-left: 0; width: 100%; }
  .fx-b27 { grid-template-columns: 1fr; }
  .fx-prow { grid-template-columns: 30px minmax(0, 1fr); row-gap: 6px; }
  .fx-prow .mug { display: none; }
  .fx-prow .now { grid-column: 2; }
  .fx-prow .score { grid-column: 2; }
}

@media (prefers-reduced-motion: reduce) {
  .fx-scope *, .fx-scope *::before, .fx-scope *::after {
    animation-duration: 0.001ms !important; animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important; scroll-behavior: auto !important;
  }
}

/* Two dated club seasons in the draft ledger. */
.fx-season-lines{border-top:1px solid var(--hi-line,#d9cbb4);padding:7px 0;margin-top:6px}.fx-season-lines>b{color:var(--hi-blue);font-size:12px}.fx-season-lines p{margin:3px 0;font-size:12px;line-height:1.5}.fx-season-lines p span{color:var(--hi-muted)}.fx-lcard>small{display:block;font-size:10px;color:var(--hi-muted);margin-top:5px}