/* =============================================================================
   teams.css — the 33 fantasy team-preview pages:
     /fantasy/teams/  and  /fantasy/teams/{slug}/  x32

   Same house rules as fantasy.css, hub.css and extra.css, and the same local
   alias names (--fw-*) so the family reads as one desk. The alias block below
   is the hub.css pattern re-declared on .ft-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. The franchise tint is the single exemption and
       it arrives inline as --club-rgb, never written into this sheet.
     * Tables and strips scroll inside their own container, never the page.
     * No composites, no count-ups. Motion is opacity and transform only, and
       all of it is switched off under prefers-reduced-motion.

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

.ft-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);
}

/* the law: no slanted type on this desk */
.ft-scope em,
.ft-scope i,
.ft-scope cite,
.ft-scope address { font-style: normal; }

/* -----------------------------------------------------------------------------
   Marks — mugs and crests. The <img> is mounted by teams.js only after an
   off-DOM preload resolves, because the draft shell deletes any <img> that
   404s. The tinted monogram underneath is the real fallback.
   -------------------------------------------------------------------------- */
.ft-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;
}
.ft-crest img { position: absolute; inset: 3px; width: calc(100% - 6px); height: calc(100% - 6px); object-fit: contain; }
.ft-crest.is-sm { width: 22px; height: 22px; border-radius: 5px; font-size: 0.5rem; }
.ft-crest.is-lg { width: 52px; height: 52px; border-radius: 11px; font-size: var(--fw-t-s); border-width: 2px; }

.ft-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;
}
.ft-mug img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ft-mug.is-sm { width: 26px; height: 26px; font-size: var(--fw-t-micro); }
.ft-mug.is-lg { width: 44px; height: 44px; font-size: var(--fw-t-meta-2); }

/* -----------------------------------------------------------------------------
   Hero — the franchise tint is layered into the navy band at roughly 15%, and
   the crest sits behind the type as a ghost. Both are inline-fed.
   -------------------------------------------------------------------------- */
.ft-band {
  background:
    radial-gradient(120% 160% at 8% 0%, rgba(255,255,255,.09), transparent 58%),
    linear-gradient(118deg, rgba(var(--club-rgb, 13,31,60), .34) 0%, rgba(var(--club-rgb, 13,31,60), 0) 62%),
    linear-gradient(135deg, var(--fw-navy-a) 0%, var(--fw-navy-b) 118%);
}
.ft-ghost {
  position: absolute; right: -34px; top: 50%; transform: translateY(-50%);
  width: 260px; height: 260px; opacity: .13; pointer-events: none;
  display: block;
}
.ft-ghost img { width: 100%; height: 100%; object-fit: contain; }
@media (max-width: 820px) { .ft-ghost { width: 170px; height: 170px; right: -48px; opacity: .10; } }

/* -----------------------------------------------------------------------------
   The segmented format control. Same slab-and-fill pattern the Draft Desk hero
   uses, so a reader who has learned it once has learned it everywhere. It is a
   tablist: arrow keys move between formats, Home and End jump to the ends.
   -------------------------------------------------------------------------- */
.ft-segwrap {
  position: relative; margin-top: 1.15rem; padding-top: 1rem;
  border-top: 1px solid var(--fw-navy-rule);
}
.ft-seg-label {
  display: block; margin-bottom: 0.5rem;
  font-family: var(--fw-mono); font-size: var(--fw-t-micro); font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--fw-navy-label);
}
.ft-seg {
  display: flex; flex-wrap: wrap; gap: 6px; max-width: 520px;
  padding: 5px; border-radius: 14px;
  border: 1px solid var(--fw-navy-rule); background: var(--fw-navy-fill);
}
.ft-scope .ft-seg-b {
  appearance: none; cursor: pointer; border: 0; background: transparent;
  display: flex; flex-direction: column; align-items: flex-start; gap: 1px;
  flex: 1 1 0; min-width: 84px; padding: 8px 14px; border-radius: 10px;
  color: var(--fw-navy-lede);
  transition: background 160ms ease, color 160ms ease;
}
.ft-scope .ft-seg-b b {
  font-family: var(--fw-sans); font-size: var(--fw-t-b); font-weight: 700;
  letter-spacing: -0.01em; line-height: 1.1;
}
.ft-scope .ft-seg-b span {
  font-family: var(--fw-mono); font-size: var(--fw-t-micro); font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--fw-navy-label);
}
.ft-scope .ft-seg-b:hover { background: var(--fw-navy-fill); color: var(--fw-navy-ink); }
.ft-scope .ft-seg-b:focus-visible { outline: 2px solid var(--fw-navy-hi); outline-offset: 2px; }
.ft-scope .ft-seg-b[aria-selected="true"] { background: var(--fw-navy-ink); color: var(--fw-navy-a); }
.ft-scope .ft-seg-b[aria-selected="true"] span { color: var(--fw-navy-b); }

/* the position filter, on paper rather than navy */
.ft-poswrap { display: flex; align-items: center; gap: 5px; }
.ft-scope .ft-pos {
  appearance: none; cursor: pointer;
  padding: 5px 13px; border-radius: 999px;
  border: 1px solid var(--fw-line); background: var(--fw-card2); color: var(--fw-muted);
  font-family: var(--fw-mono); font-size: var(--fw-t-micro); font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase;
  transition: background 140ms ease, color 140ms ease, border-color 140ms ease;
}
.ft-scope .ft-pos:hover { border-color: var(--fw-blue-line); color: var(--fw-ink); }
.ft-scope .ft-pos:focus-visible { outline: 2px solid var(--fw-blue); outline-offset: 2px; }
.ft-scope .ft-pos.is-on { background: var(--fw-blue); border-color: var(--fw-blue); color: var(--fw-on-blue); }

/* -----------------------------------------------------------------------------
   Headings + shared bits
   -------------------------------------------------------------------------- */
.ft-h3 {
  font-family: var(--fw-mono); font-size: var(--fw-t-meta); font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--fw-muted);
  margin: 1.6rem 0 0.6rem;
}
.ft-bar { display: block; height: 7px; border-radius: 999px; background: var(--fw-dtrack); overflow: hidden; min-width: 46px; }
.ft-bar > i { display: block; height: 100%; border-radius: 999px; background: var(--fw-fill); }

/* -----------------------------------------------------------------------------
   The draftable board — a real table that scrolls in its own box, and a card
   list that replaces it under 860px. Both carry the same data attributes, so
   teams.js sorts and re-formats them in one pass.
   -------------------------------------------------------------------------- */
.ft-tablewrap {
  overflow-x: auto; -webkit-overflow-scrolling: touch;
  border: 1px solid var(--fw-line); border-radius: 14px; background: var(--fw-card);
}
.ft-tbl { width: 100%; border-collapse: collapse; min-width: 1140px; }
.ft-tbl.is-crease { min-width: 720px; }
.ft-tbl caption {
  caption-side: top; text-align: left; padding: 0.7rem 0.9rem 0.55rem;
  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);
  border-bottom: 1px solid var(--fw-hair);
}
.ft-tbl th, .ft-tbl td {
  padding: 8px 7px; text-align: right; white-space: nowrap;
  border-bottom: 1px solid var(--fw-hair); font-size: var(--fw-t-s);
  font-variant-numeric: tabular-nums;
}
.ft-tbl thead th {
  position: sticky; top: 0; z-index: 2; background: var(--fw-card2);
  padding: 0; border-bottom: 1px solid var(--fw-line);
  font-family: var(--fw-mono); font-size: var(--fw-t-micro); font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--fw-muted);
}
.ft-tbl thead th.c-pos, .ft-tbl.is-crease thead th { padding: 9px 10px; }

.ft-scope .ft-sort {
  appearance: none; cursor: pointer; border: 0; background: transparent;
  width: 100%; padding: 9px 7px; display: inline-flex; align-items: center;
  justify-content: flex-end; gap: 5px;
  font-family: var(--fw-mono); font-size: var(--fw-t-micro); font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--fw-muted);
  transition: color 140ms ease;
}
.ft-scope .ft-sort:hover { color: var(--fw-blue); }
.ft-scope .ft-sort:focus-visible { outline: 2px solid var(--fw-blue); outline-offset: -2px; }
.ft-scope .ft-sort.is-on { color: var(--fw-blue); }
.ft-scope .ft-sort .car { width: 0; height: 0; opacity: 0; border-left: 3.5px solid transparent; border-right: 3.5px solid transparent; }
.ft-scope .ft-sort.is-on .car { opacity: 1; }
.ft-scope .ft-sort.is-on[data-cur="desc"] .car { border-top: 5px solid currentColor; }
.ft-scope .ft-sort.is-on[data-cur="asc"] .car { border-bottom: 5px solid currentColor; }
.ft-scope .ft-tbl th.c-name .ft-sort, .ft-scope .ft-tbl th.c-txt .ft-sort { justify-content: flex-start; }

/* rank numerals: serif, and a display weight for the club's top three */
.ft-tbl td.c-rank { text-align: left; width: 58px; }
.ft-tbl td.c-rank .n {
  display: block; font-family: var(--fw-serif); font-size: 1.24rem; font-weight: 600;
  line-height: 1; color: var(--fw-ink); font-variant-numeric: tabular-nums;
}
.ft-tr.is-t1 td.c-rank .n { font-size: 1.8rem; font-weight: 700; }
.ft-tbl td.c-rank .ovr {
  display: block; margin-top: 3px; font-family: var(--fw-mono);
  font-size: var(--fw-t-micro); color: var(--fw-muted); letter-spacing: 0.06em;
}

.ft-tbl th.c-name, .ft-tbl td.c-name { text-align: left; white-space: normal; min-width: 208px; }
.ft-tbl td.c-name .who { display: flex; align-items: center; gap: 10px; }
.ft-tbl td.c-name .wb { min-width: 0; }
.ft-tbl td.c-name .nm {
  display: block; font-family: var(--fw-serif); font-size: 1.02rem;
  font-weight: 600; line-height: 1.2;
}
.ft-tbl td.c-name .nm a { color: var(--fw-ink); text-decoration: none; border-bottom: 1px solid var(--fw-blue-line); }
.ft-tbl td.c-name .nm a:hover { color: var(--fw-blue); border-bottom-color: var(--fw-blue); }
.ft-tbl td.c-name .sub { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 5px; }
.ft-tbl th.c-txt, .ft-tbl td.c-txt { text-align: left; }
.ft-tbl td .gp { font-family: var(--fw-mono); font-size: var(--fw-t-micro); color: var(--fw-muted); }
.ft-tbl td.is-lead { font-weight: 700; color: var(--fw-ink); font-size: var(--fw-t-b); }
.ft-tbl .grp { border-left: 1px solid var(--fw-line); }
.ft-tbl td.c-spark, .ft-tbl th.c-spark { width: 70px; }
.ft-tbl td.c-pos, .ft-tbl th.c-pos {
  text-align: center; font-family: var(--fw-mono); font-size: var(--fw-t-meta);
  color: var(--fw-muted); letter-spacing: 0.08em;
}
.ft-nospark { color: var(--fw-muted); }

/* zebra, then the top-three band on the club tint, then the hover */
.ft-tbl tbody tr:nth-child(even) { background: var(--fw-card2); }
.ft-tbl tbody tr.is-t1 {
  background:
    linear-gradient(90deg, rgba(var(--club-rgb, 13,31,60), .13) 0%, rgba(var(--club-rgb, 13,31,60), 0) 46%),
    var(--fw-card2);
  box-shadow: inset 3px 0 0 var(--tint-ring, var(--fw-blue));
}
.ft-tbl tbody tr { transition: background 130ms ease, box-shadow 130ms ease; }
.ft-tbl tbody tr:hover { background: var(--fw-blue-soft); box-shadow: inset 3px 0 0 var(--fw-blue); cursor: pointer; }
.ft-tbl tbody tr:last-child td { border-bottom: 0; }

.ft-split { font-family: var(--fw-mono); font-variant-numeric: tabular-nums; font-weight: 700; color: var(--fw-muted); }
.ft-split.is-up { color: var(--fw-up); }
.ft-split.is-down { color: var(--fw-down); }

.ft-val {
  display: inline-block; padding: 3px 9px; border-radius: 999px;
  border: 1px solid var(--fw-line); background: var(--fw-card2);
  font-family: var(--fw-mono); font-size: var(--fw-t-meta); font-weight: 700;
  color: var(--fw-muted); font-variant-numeric: tabular-nums; white-space: nowrap;
}
.ft-val.is-up { border-color: var(--fw-up); background: var(--fw-up-soft); color: var(--fw-up); }
.ft-val.is-down { border-color: var(--fw-down); background: var(--fw-down-soft); color: var(--fw-down); }

/* rows a filter has switched off */
.ft-tr.is-off, .ft-crd.is-off { display: none; }

/* the card list — desk row pattern, one per player, under 860px */
.ft-cards { display: none; list-style: none; margin: 0; padding: 0; }
.ft-crd {
  display: flex; flex-direction: column; gap: 9px; padding: 11px 12px;
  border: 1px solid var(--fw-line); border-left: 3px solid var(--tint-ring, var(--fw-line));
  border-radius: 13px; background: var(--fw-card);
}
.ft-crd.is-t1 {
  background:
    linear-gradient(100deg, rgba(var(--club-rgb, 13,31,60), .14) 0%, rgba(var(--club-rgb, 13,31,60), 0) 60%),
    var(--fw-card2);
}
.ft-crd-top { display: grid; grid-template-columns: 34px 44px minmax(0, 1fr) auto; align-items: center; gap: 10px; }
.ft-crd-top .c-rank .n {
  font-family: var(--fw-serif); font-size: 1.3rem; font-weight: 600;
  color: var(--fw-ink); font-variant-numeric: tabular-nums;
}
.ft-crd.is-t1 .c-rank .n { font-size: 1.7rem; font-weight: 700; }
.ft-crd .wb { min-width: 0; }
.ft-crd .nm { display: block; font-family: var(--fw-serif); font-size: 1.02rem; font-weight: 600; line-height: 1.2; }
.ft-crd .nm a { color: var(--fw-ink); text-decoration: none; border-bottom: 1px solid var(--fw-blue-line); }
.ft-crd .sub {
  display: block; margin-top: 2px; font-family: var(--fw-mono);
  font-size: var(--fw-t-meta); color: var(--fw-muted); letter-spacing: 0.04em;
}
.ft-crd .tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 5px; }
.ft-crd-blend { text-align: right; }
.ft-crd-blend b {
  display: block; font-family: var(--fw-mono); font-size: 1.2rem; font-weight: 700;
  color: var(--fw-ink); font-variant-numeric: tabular-nums; line-height: 1;
}
.ft-crd-blend span {
  display: block; margin-top: 3px; font-family: var(--fw-mono); font-size: var(--fw-t-micro);
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--fw-muted);
}
/* the figures ride in their own horizontal scroller so the card never widens */
.ft-crd-rows {
  display: flex; gap: 4px; overflow-x: auto; -webkit-overflow-scrolling: touch;
  padding: 8px 0 4px; border-top: 1px solid var(--fw-hair);
}
.ft-crd-rows > span {
  flex: 0 0 auto; min-width: 60px; display: flex; flex-direction: column;
  align-items: center; gap: 2px; padding: 4px 6px;
  border-radius: 8px; background: var(--fw-card2);
}
.ft-crd-rows b {
  font-family: var(--fw-mono); font-size: var(--fw-t-b); font-weight: 700;
  color: var(--fw-ink); font-variant-numeric: tabular-nums;
}
.ft-crd-rows > span > span {
  font-family: var(--fw-mono); font-size: var(--fw-t-micro); font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--fw-muted);
}
.ft-crd-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.ft-crd-foot .ln {
  font-family: var(--fw-mono); font-size: var(--fw-t-meta-2); color: var(--fw-ink-2);
  font-variant-numeric: tabular-nums;
}

/* -----------------------------------------------------------------------------
   Team fantasy DNA
   -------------------------------------------------------------------------- */
.ft-dna { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.ft-dnarow {
  display: grid; grid-template-columns: 46px minmax(0, 1fr) 176px 44px;
  align-items: center; gap: 12px; padding: 10px 12px;
  border: 1px solid var(--fw-line); border-radius: 12px; background: var(--fw-card);
}
.ft-dnarow .lbl {
  font-family: var(--fw-mono); font-size: var(--fw-t-meta); font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--fw-muted);
}
.ft-dnatrack { position: relative; display: block; height: 12px; border-radius: 999px; background: var(--fw-dtrack); }
.ft-dnatrack > i { display: block; height: 100%; border-radius: 999px; background: var(--fw-fill); }
/* The bar draws in behind the same reveal gating every other block on the page
   uses: hi-motion.js stamps .hi-rv on the section and .is-in when it crosses
   the viewport (immediately, under reduced motion or with no observer). Width
   is already final in the markup, so only the transform moves and the figure
   beside the bar is never wrong. Six rows, stepped, then done. */
#dna.hi-rv .ft-dnatrack > i { transform: scaleX(0); transform-origin: left center; }
#dna.hi-rv.is-in .ft-dnatrack > i {
  transform: scaleX(1);
  transition: transform 620ms cubic-bezier(0.22, 0.61, 0.36, 1);
}
#dna.hi-rv.is-in .ft-dnarow:nth-child(1) .ft-dnatrack > i { transition-delay: 0ms; }
#dna.hi-rv.is-in .ft-dnarow:nth-child(2) .ft-dnatrack > i { transition-delay: 60ms; }
#dna.hi-rv.is-in .ft-dnarow:nth-child(3) .ft-dnatrack > i { transition-delay: 120ms; }
#dna.hi-rv.is-in .ft-dnarow:nth-child(4) .ft-dnatrack > i { transition-delay: 180ms; }
#dna.hi-rv.is-in .ft-dnarow:nth-child(5) .ft-dnatrack > i { transition-delay: 240ms; }
#dna.hi-rv.is-in .ft-dnarow:nth-child(6) .ft-dnatrack > i { transition-delay: 300ms; }
.ft-dnatrack .avg {
  position: absolute; top: -5px; bottom: -5px; left: 50%; width: 2px;
  background: var(--fw-ink-2); opacity: 0.65;
}
.ft-dnarow .q {
  font-family: var(--fw-mono); font-size: var(--fw-t-meta-2); color: var(--fw-ink-2);
  text-align: right; font-variant-numeric: tabular-nums;
}
.ft-dnarow .q b { font-size: var(--fw-t-b); color: var(--fw-ink); }
.ft-dnarow .q .vs { color: var(--fw-muted); font-size: var(--fw-t-micro); letter-spacing: 0.06em; }
.ft-dnarow .rk {
  font-family: var(--fw-mono); font-size: var(--fw-t-b); font-weight: 700;
  color: var(--fw-muted); text-align: right; font-variant-numeric: tabular-nums;
}
.ft-dnarow.is-up .ft-dnatrack > i { background: var(--fw-up); }
.ft-dnarow.is-up .rk { color: var(--fw-up); }
.ft-dnarow.is-down .rk { color: var(--fw-down); }

.ft-mixwrap { margin-top: 1.5rem; }
.ft-mix { display: flex; height: 48px; border-radius: 12px; overflow: hidden; border: 1px solid var(--fw-line); }
.ft-mixseg {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  min-width: 0; overflow: hidden; gap: 1px;
}
.ft-mixseg b { font-family: var(--fw-mono); font-size: var(--fw-t-meta); font-weight: 700; letter-spacing: 0.12em; }
.ft-mixseg span { font-family: var(--fw-mono); font-size: var(--fw-t-micro); font-weight: 600; }
.ft-mixseg.is-F { background: var(--fw-blue); color: var(--fw-on-blue); }
.ft-mixseg.is-D { background: var(--fw-blue-soft); color: var(--fw-blue); }
.ft-mixseg.is-G { background: var(--fw-card2); color: var(--fw-muted); }
.ft-mixnote { margin: 0.6rem 0 0; font-family: var(--fw-sans); font-size: var(--fw-t-s); line-height: 1.6; color: var(--fw-ink-2); }

/* -----------------------------------------------------------------------------
   Depth chart
   -------------------------------------------------------------------------- */
.ft-depth { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.ft-dcol, .ft-dcrease {
  display: flex; flex-direction: column; gap: 6px; padding: 10px;
  border: 1px solid var(--fw-line); border-top: 3px solid var(--tint-ring, var(--fw-line));
  border-radius: 14px; background: var(--fw-card2);
}
.ft-dcrease { margin-top: 10px; }
.ft-dcrease-row { display: flex; flex-wrap: wrap; gap: 6px; }
.ft-dcrease-row .ft-dtile { min-width: 200px; flex: 1 1 200px; }
.ft-dhead {
  display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 0 0 4px;
  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);
}
.ft-dhead .n { color: var(--fw-ink-2); }
/* the scarcity note — this column's count placed against the other 31 clubs */
.ft-dscarce {
  margin: -1px 0 5px; font-family: var(--fw-mono); font-size: var(--fw-t-micro);
  font-weight: 600; letter-spacing: 0.06em; color: var(--fw-muted);
  font-variant-numeric: tabular-nums;
}
.ft-dtile {
  position: relative; display: flex; align-items: center; gap: 8px;
  padding: 6px 8px; border-radius: 10px; text-decoration: none;
  border: 1px solid var(--fw-line); background: var(--tint, var(--fw-card));
  transition: transform 150ms ease, box-shadow 150ms ease, border-color 150ms ease;
}
.ft-dtile:hover, .ft-dtile:focus-visible { transform: translateY(-2px); box-shadow: var(--fw-lift); border-color: var(--fw-blue-line); }
.ft-dtile:focus-visible { outline: 2px solid var(--fw-blue); outline-offset: 2px; }
.ft-dtile .tb { min-width: 0; }
.ft-dtile .tn {
  display: block; font-family: var(--fw-serif); font-size: 0.92rem; font-weight: 600;
  color: var(--fw-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ft-dtile .tq {
  display: block; font-family: var(--fw-mono); font-size: var(--fw-t-micro);
  font-weight: 700; color: var(--fw-ink-2); font-variant-numeric: tabular-nums;
}
.ft-dtile .tv { opacity: 0; transition: opacity 150ms ease; }
.ft-dtile:hover .tv, .ft-dtile:focus-visible .tv, .ft-dtile:focus-within .tv { opacity: 1; }
.ft-dtile .tv.is-up { color: var(--fw-up); }
.ft-dtile .tv.is-down { color: var(--fw-down); }
.ft-dempty {
  padding: 10px 8px; font-family: var(--fw-mono); font-size: var(--fw-t-micro);
  font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--fw-muted);
}

/* -----------------------------------------------------------------------------
   League context
   -------------------------------------------------------------------------- */
.ft-lg2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 12px; }
.ft-lgcard {
  position: relative; overflow: hidden; padding: 1rem 1.1rem;
  border: 1px solid var(--fw-line); border-radius: 14px; background: var(--fw-card);
}
.ft-lgcard .ft-h3 { margin-top: 0; }
.ft-lgfig { margin: 0.2rem 0 0.9rem; display: flex; align-items: baseline; gap: 9px; flex-wrap: wrap; }
.ft-lgfig b {
  font-family: var(--fw-mono); font-size: 1.6rem; font-weight: 700;
  color: var(--fw-ink); font-variant-numeric: tabular-nums; line-height: 1;
}
.ft-lgfig span { font-family: var(--fw-sans); font-size: var(--fw-t-s); color: var(--fw-ink-2); }
.ft-lgnote { margin: 0.7rem 0 0; font-family: var(--fw-sans); font-size: var(--fw-t-s); line-height: 1.6; color: var(--fw-ink-2); }

.ft-stockchart { display: flex; align-items: flex-end; gap: 2px; height: 92px; padding-top: 16px; }
.ft-stock { position: relative; flex: 1 1 0; min-width: 0; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; }
.ft-stock > i { display: block; width: 100%; height: var(--h, 4%); border-radius: 3px 3px 0 0; background: var(--fw-dtrack); }
.ft-stock .t { display: none; }
.ft-stock.is-me > i { background: var(--fw-fill); }
.ft-stock.is-me .t {
  display: block; position: absolute; top: -15px; left: 50%; transform: translateX(-50%);
  font-family: var(--fw-mono); font-size: var(--fw-t-micro); font-weight: 700;
  letter-spacing: 0.06em; color: var(--fw-blue);
}

.ft-dist { margin: 0.2rem 0 0.4rem; }
.ft-disttrack { position: relative; display: block; height: 10px; border-radius: 999px; background: var(--fw-dtrack); margin: 16px 0 10px; }
.ft-disttrack .tick { position: absolute; top: -6px; bottom: -6px; width: 2px; background: var(--fw-ink-2); opacity: 0.6; }
.ft-disttrack .dot {
  position: absolute; top: 50%; width: 14px; height: 14px; margin: -7px 0 0 -7px;
  border-radius: 50%; background: var(--fw-blue); border: 2px solid var(--fw-card);
}
.ft-distlabels { display: flex; justify-content: space-between; gap: 8px; }
.ft-distlabels > span { display: flex; flex-direction: column; gap: 2px; }
.ft-distlabels > span.b { align-items: center; }
.ft-distlabels > span.c { align-items: flex-end; text-align: right; }
.ft-distlabels 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; }
.ft-distlabels > span > span {
  font-family: var(--fw-mono); font-size: var(--fw-t-micro); font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--fw-muted);
}

/* -----------------------------------------------------------------------------
   The crease — start share
   -------------------------------------------------------------------------- */
.ft-gsbar { position: relative; display: flex; gap: 3px; margin: 0 0 0.5rem; border-radius: 12px; overflow: hidden; border: 1px solid var(--fw-line); }
/* the league tick — the same device the DNA tracks carry, on the same grammar:
   a hairline of ink, no hue, sitting over the segments */
.ft-gstick {
  position: absolute; top: 0; bottom: 0; width: 2px; z-index: 2;
  background: var(--fw-ink); opacity: 0.55; pointer-events: none;
}
.ft-gsnote {
  display: flex; align-items: center; gap: 8px; margin: 0 0 1rem;
  font-family: var(--fw-mono); font-size: var(--fw-t-micro); font-weight: 600;
  letter-spacing: 0.05em; color: var(--fw-muted); font-variant-numeric: tabular-nums;
}
.ft-gsnote .k { flex: 0 0 auto; width: 2px; height: 12px; background: var(--fw-ink); opacity: 0.55; }
.ft-gsseg {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 2px; padding: 13px 6px; min-width: 0; background: var(--tint, var(--fw-card2));
}
.ft-gsseg b { font-family: var(--fw-mono); font-size: 1.16rem; font-weight: 700; color: var(--fw-ink); font-variant-numeric: tabular-nums; }
.ft-gsseg span {
  max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-family: var(--fw-mono); font-size: var(--fw-t-micro); font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--fw-ink-2);
}

/* -----------------------------------------------------------------------------
   On the record
   -------------------------------------------------------------------------- */
.ft-flourgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 12px; }
.ft-flour {
  position: relative; overflow: hidden; padding: 1rem 1.1rem;
  border: 1px solid var(--fw-line); border-left: 3px solid var(--fw-blue);
  border-radius: 14px; background: var(--fw-card);
}
.ft-flour .k {
  display: block; margin-bottom: 0.45rem;
  font-family: var(--fw-mono); font-size: var(--fw-t-micro); font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--fw-blue);
}
.ft-flour p { margin: 0; font-family: var(--fw-sans); font-size: var(--fw-t-s); line-height: 1.65; color: var(--fw-ink-2); }
.ft-flour b { color: var(--fw-ink); }

/* -----------------------------------------------------------------------------
   The beam — one sweep across a card on hover. Opacity and transform only.
   -------------------------------------------------------------------------- */
.ft-card::after, .ft-lgcard::after, .ft-flour::after {
  content: ""; position: absolute; top: 0; bottom: 0; left: -45%; width: 34%;
  pointer-events: none; transform: skewX(-18deg); opacity: 0;
  background: linear-gradient(90deg, transparent, var(--fw-blue-soft), transparent);
  transition: opacity 180ms ease;
}
.ft-card:hover::after, .ft-card:focus-visible::after,
.ft-lgcard:hover::after, .ft-flour:hover::after {
  opacity: 1; animation: ft-beam 760ms ease;
}
@keyframes ft-beam { from { left: -45%; } to { left: 112%; } }

/* -----------------------------------------------------------------------------
   Power-play concentration
   -------------------------------------------------------------------------- */
.ft-ppwrap {
  border: 1px solid var(--fw-line); border-left: 3px solid var(--tint-ring, var(--fw-line));
  border-radius: 14px; background: var(--fw-card); padding: 1.05rem 1.15rem;
}
.ft-ppmeter { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 10px 14px; }
.ft-ppbar {
  grid-column: 1 / -1; display: block; height: 14px; border-radius: 999px;
  background: var(--fw-dtrack); overflow: hidden;
}
.ft-ppbar > i { display: block; height: 100%; border-radius: 999px; background: var(--fw-fill); }
.ft-ppmeter b {
  font-family: var(--fw-mono); font-size: 1.5rem; font-weight: 700; color: var(--fw-ink);
  font-variant-numeric: tabular-nums; line-height: 1;
}
.ft-ppmeter .lbl {
  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);
  text-align: right;
}
.ft-pplist { list-style: none; margin: 1rem 0 0; padding: 0.9rem 0 0; border-top: 1px solid var(--fw-hair); display: flex; flex-direction: column; gap: 9px; }
.ft-pplist li { display: grid; grid-template-columns: 18px minmax(0, 1fr) minmax(60px, 150px) 132px; align-items: center; gap: 10px; }
.ft-pplist .n { font-family: var(--fw-mono); font-size: var(--fw-t-meta); color: var(--fw-muted); font-weight: 700; }
.ft-pplist .who { font-family: var(--fw-serif); font-size: 0.98rem; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ft-pplist .who a { color: var(--fw-ink); text-decoration: none; border-bottom: 1px solid var(--fw-blue-line); }
.ft-pplist .who a:hover { color: var(--fw-blue); }
.ft-pplist .pos { font-family: var(--fw-mono); font-size: var(--fw-t-micro); color: var(--fw-muted); letter-spacing: 0.1em; }
.ft-pplist .q { font-family: var(--fw-mono); font-size: var(--fw-t-meta-2); color: var(--fw-ink-2); text-align: right; font-variant-numeric: tabular-nums; }

/* -----------------------------------------------------------------------------
   Offseason ledger
   -------------------------------------------------------------------------- */
.ft-movegrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 1.2rem; }
.ft-moves { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.ft-move {
  display: grid; grid-template-columns: 74px minmax(0, 1fr); gap: 10px; align-items: start;
  padding: 10px 12px; border: 1px solid var(--fw-line);
  border-left: 3px solid var(--tint-ring, var(--fw-line));
  border-radius: 12px; background: var(--fw-card);
}
.ft-movepair { display: flex; align-items: center; gap: 4px; }
.ft-movepair .arrow { font-family: var(--fw-mono); font-size: var(--fw-t-meta); color: var(--fw-muted); }
.ft-move .ft-note {
  grid-column: 2; display: block; margin-top: 5px;
  font-family: var(--fw-sans); font-size: var(--fw-t-s); line-height: 1.55; color: var(--fw-ink-2);
}
.ft-move.is-in .ft-movepair { color: var(--fw-up); }
.ft-move.is-out .ft-movepair { color: var(--fw-down); }

/* -----------------------------------------------------------------------------
   Schedule strip
   -------------------------------------------------------------------------- */
.ft-strip {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(132px, 1fr)); gap: 9px;
}
.ft-scell {
  padding: 0.85rem 0.9rem; border-radius: 12px; background: var(--fw-card);
  border: 1px solid var(--fw-line); border-top: 3px solid var(--tint-ring, var(--fw-line));
  transition: border-color 140ms ease, transform 140ms ease, box-shadow 140ms ease;
}
.ft-scell:hover, .ft-scell:focus-within { transform: translateY(-2px); box-shadow: var(--fw-shadow); border-color: var(--fw-blue-line); }
.ft-scell b {
  display: block; font-family: var(--fw-mono); font-size: 1.32rem; font-weight: 700;
  color: var(--fw-ink); font-variant-numeric: tabular-nums; line-height: 1.15;
}
.ft-scell .lbl {
  display: block; margin-top: 4px;
  font-family: var(--fw-mono); font-size: var(--fw-t-micro); font-weight: 700;
  letter-spacing: 0.13em; text-transform: uppercase; color: var(--fw-muted);
}
.ft-scell .rk {
  display: block; margin-top: 6px;
  font-family: var(--fw-mono); font-size: var(--fw-t-meta); color: var(--fw-ink-2);
}
.ft-scell.is-up { border-top-color: var(--fw-up); }
.ft-scell.is-up b { color: var(--fw-up); }
.ft-scell.is-down { border-top-color: var(--fw-down); }
.ft-scell.is-down b { color: var(--fw-down); }

.ft-weeks { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 0.9rem; }
.ft-wlbl {
  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); margin-right: 4px;
}
.ft-week {
  display: inline-flex; flex-direction: column; align-items: center; justify-content: center;
  min-width: 44px; padding: 6px 10px; border-radius: 10px;
  border: 1px solid var(--fw-line); background: var(--fw-card2);
}
.ft-week b { font-family: var(--fw-mono); font-size: 1rem; font-weight: 700; color: var(--fw-ink); }
.ft-week span { font-family: var(--fw-mono); font-size: var(--fw-t-micro); color: var(--fw-muted); letter-spacing: 0.1em; }

/* -----------------------------------------------------------------------------
   Prospect watch
   -------------------------------------------------------------------------- */
.ft-plist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 7px; }
.ft-prow {
  display: grid; align-items: center; gap: 12px;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) 132px 138px;
  padding: 10px 12px; border: 1px solid var(--fw-line);
  border-left: 3px solid var(--tint-ring, var(--fw-line));
  border-radius: 12px; background: var(--fw-card);
}
.ft-where { font-family: var(--fw-sans); font-size: var(--fw-t-s); color: var(--fw-ink-2); min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.ft-where .lg { font-family: var(--fw-mono); font-size: var(--fw-t-micro); letter-spacing: 0.1em; text-transform: uppercase; color: var(--fw-muted); }
.ft-pline, .ft-forecast {
  font-family: var(--fw-mono); font-size: var(--fw-t-meta-2); color: var(--fw-ink-2);
  font-variant-numeric: tabular-nums; text-align: right;
}
.ft-forecast { color: var(--fw-ink); font-weight: 700; }

/* -----------------------------------------------------------------------------
   Index — the 32 crest cards
   -------------------------------------------------------------------------- */
.ft-div { margin: 0 0 1.9rem; }
.ft-divname {
  font-family: var(--fw-mono); font-size: var(--fw-t-meta); font-weight: 700;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--fw-muted);
  margin: 0 0 0.7rem; padding-bottom: 0.45rem; border-bottom: 1px solid var(--fw-hair);
}
.ft-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(268px, 1fr)); gap: 10px; }
.ft-card {
  position: relative; overflow: hidden;
  display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 12px; align-items: center;
  padding: 12px 14px; border-radius: 14px; text-decoration: none;
  border: 1px solid var(--fw-line); border-left: 3px solid var(--tint-ring, var(--fw-line));
  background:
    linear-gradient(100deg, rgba(var(--club-rgb, 13,31,60), .12) 0%, rgba(var(--club-rgb, 13,31,60), 0) 58%),
    var(--fw-card);
  transition: transform 150ms ease, box-shadow 150ms ease, border-color 150ms ease;
}
.ft-card:hover, .ft-card:focus-visible { transform: translateY(-3px); box-shadow: var(--fw-lift); border-color: var(--fw-blue-line); }
.ft-card:focus-visible { outline: 2px solid var(--fw-blue); outline-offset: 2px; }
.ft-cardbody { min-width: 0; }
.ft-cardname { display: block; font-family: var(--fw-serif); font-size: 1.06rem; font-weight: 700; color: var(--fw-ink); line-height: 1.2; }
.ft-cardlead { display: block; margin-top: 3px; font-family: var(--fw-sans); font-size: var(--fw-t-s); color: var(--fw-ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ft-cardlead .q { font-family: var(--fw-mono); font-size: var(--fw-t-meta); color: var(--fw-muted); }
.ft-cardmeta { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 7px; }
.ft-pill {
  display: inline-block; padding: 2px 8px; border-radius: 999px;
  border: 1px solid var(--fw-line); background: var(--fw-card2);
  font-family: var(--fw-mono); font-size: var(--fw-t-micro); font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--fw-muted);
}
.ft-pill.is-up { border-color: var(--fw-up); background: var(--fw-up-soft); color: var(--fw-up); }
.ft-pill.is-down { border-color: var(--fw-down); background: var(--fw-down-soft); color: var(--fw-down); }

/* -----------------------------------------------------------------------------
   Mobile — the board stops being a table and becomes the desk's card row. The
   figures inside each card ride their own horizontal scroller, so the page
   itself never scrolls sideways.
   -------------------------------------------------------------------------- */
@media (max-width: 1080px) {
  .ft-depth { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .ft-prow { grid-template-columns: minmax(0, 1fr) 128px; row-gap: 6px; }
  .ft-where { grid-column: 1 / -1; }
  .ft-pline { text-align: left; }
  .ft-dnarow { grid-template-columns: 40px minmax(0, 1fr) 40px; row-gap: 8px; }
  .ft-dnarow .q { grid-column: 2 / -1; text-align: left; }
}
@media (max-width: 860px) {
  .ft-tablewrap.is-board { display: none; }
  .ft-cards { display: flex; flex-direction: column; gap: 8px; }
}
@media (max-width: 720px) {
  .ft-depth { grid-template-columns: 1fr; }
  .ft-pplist li { grid-template-columns: 16px minmax(0, 1fr); row-gap: 5px; }
  .ft-pplist .ft-bar { grid-column: 2; }
  .ft-pplist .q { grid-column: 2; text-align: left; }
  .ft-move { grid-template-columns: minmax(0, 1fr); }
  .ft-move .ft-note { grid-column: 1; }
  .ft-grid { grid-template-columns: 1fr; }
  .ft-ppmeter .lbl { text-align: left; }
  .ft-seg { max-width: none; }
  .ft-seg-b { min-width: 72px; padding: 7px 10px; }
  .ft-crd-top { grid-template-columns: 30px 40px minmax(0, 1fr) auto; gap: 8px; }
  .ft-lg2 { grid-template-columns: 1fr; }
  .ft-gsseg { padding: 10px 4px; }
}

/* -----------------------------------------------------------------------------
   Reduced motion — every transition on this sheet, switched off
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .ft-scope *,
  .ft-scope *::before,
  .ft-scope *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
  }
  .ft-card:hover::after, .ft-card:focus-visible::after,
  .ft-lgcard:hover::after, .ft-flour:hover::after { opacity: 0; animation: none !important; }
  .ft-card:hover, .ft-card:focus-visible,
  .ft-scell:hover, .ft-scell:focus-within,
  .ft-dtile:hover, .ft-dtile:focus-visible { transform: none; }
  .ft-dtile .tv { opacity: 1; }
  /* the DNA bars are drawn at full width, not drawn in */
  #dna.hi-rv .ft-dnatrack > i,
  #dna.hi-rv.is-in .ft-dnatrack > i { transform: none !important; transition: none !important; }
}

/* -----------------------------------------------------------------------------
   Print
   -------------------------------------------------------------------------- */
@media print {
  .ft-segwrap, .ft-ghost, .ft-poswrap, .ft-cards { display: none; }
  .ft-band { background: none; }
  .ft-tablewrap { overflow: visible; border: 0; }
  .ft-tbl { min-width: 0; font-size: 9pt; }
  .ft-tbl thead th { position: static; }
  .ft-move, .ft-prow, .ft-card, .ft-lgcard, .ft-flour, .ft-dcol { break-inside: avoid; }
}