/* ---- The standings page ------------------------------------------------
   .fyf-standings* (app/views/contests/results.html.erb and its partials)
   implements the "fRank Open Leaderboard" artboard on the FYF foundation:
   a charcoal hero, the podium, the viewer's taped card, one continuous
   sheet, and a turf-green progress chart.

   Two-class rules throughout, for the reason documented at the top of
   entrant_card.css and entry_pages.css: fyf_foundation.css's `.fyf h1`-`h4`
   and `.fyf p` are (0,1,1) and outrank a bare class regardless of source
   order. `.fyf-standings .fyf-standings__x` is (0,2,0) and wins without
   !important. This file loads app-wide through stylesheet_link_tag :app, so
   every rule carries the .fyf / fyf- scope the design-token lint enforces. */

.fyf-standings {
  display: block;
  --standings-measure: 1120px;
  --standings-pad: clamp(20px, 3.2vw, 40px);
}
.fyf-standings p { margin: 0; }
.fyf-standings__inner {
  max-width: var(--standings-measure);
  margin-inline: auto;
  padding-inline: var(--standings-pad);
}
.fyf-standings .fyf-standings__heading {
  font-family: var(--font-header);
  font-weight: var(--weight-display);
  font-size: clamp(22px, 2.4vw, 30px);
  line-height: var(--leading-heading);
  letter-spacing: var(--tracking-display);
  margin: 0;
}
.fyf-standings .fyf-standings__lede {
  margin: 6px 0 0;
  max-width: 64ch;
  font-size: var(--text-md);
  line-height: var(--leading-body);
  color: var(--fyf-charcoal-80);
}
.fyf-standings .is-pos  { color: var(--fyf-green-deep); }
.fyf-standings .is-neg  { color: var(--fyf-red-deep); }
.fyf-standings .is-none { color: var(--fyf-charcoal-60); }

/* ---- Hero ------------------------------------------------------------- */
.fyf-standings-hero {
  background: var(--fyf-charcoal);
  color: var(--fyf-cream);
  padding: clamp(36px, 4.4vw, 60px) 0 clamp(28px, 3.2vw, 44px);
  border-bottom: var(--stroke-sticker) solid var(--fyf-charcoal);
}
/* The hero carries the live card in its right half. One column until there
   is room for the card to sit beside the headline without squeezing it --
   below that the card follows the week pills, still inside the band. */
.fyf-standings-hero .fyf-standings-hero__grid {
  display: grid;
  gap: var(--space-8);
  align-items: start;
}
@media (min-width: 1000px) {
  .fyf-standings-hero .fyf-standings-hero__grid {
    grid-template-columns: minmax(0, 1fr) minmax(320px, 400px);
    align-items: center;
  }
}
/* The side stacks whatever the week gives it -- the live card, the top three,
   or both. Below the two-column breakpoint it follows the week pills, still
   inside the charcoal band. */
.fyf-standings-hero__side {
  display: grid;
  gap: var(--space-6);
  align-content: start;
}
/* One column: the side would otherwise run the full measure, and a shared
   tilt token that reads as a jaunty card at 380px reads as a crooked banner at
   713px. Capped, the cards stay card-sized and the tilt stays proportionate. */
@media (max-width: 999px) {
  .fyf-standings-hero__side { max-width: 460px; }
}
/* The card is paper on charcoal: .fyf-card--paper paints a background but no
   text colour, so without this the hero's cream text would ride onto white. */
.fyf-standings .fyf-standings-live {
  padding: var(--space-6);
  color: var(--fyf-charcoal);
}
.fyf-standings .fyf-standings-live__title {
  margin: 0;
  font-family: var(--font-header);
  font-weight: var(--weight-display);
  font-size: clamp(19px, 1.7vw, 24px);
  line-height: var(--leading-heading);
  letter-spacing: var(--tracking-display);
}
.fyf-standings .fyf-standings-live__meta {
  margin-top: 6px;
  font-family: var(--font-subhead);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--fyf-charcoal-60);
}
.fyf-standings .fyf-standings-live__body {
  margin-top: var(--space-4);
  font-size: var(--text-sm);
  color: var(--fyf-charcoal-80);
}

.fyf-standings-hero .fyf-standings-hero__eyebrow {
  font-family: var(--font-subhead);
  font-weight: 700;
  font-size: var(--text-eyebrow);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--fyf-yellow);
}
.fyf-standings-hero .fyf-standings-hero__headline {
  font-family: var(--font-spice);
  font-weight: 400;
  font-size: clamp(56px, 8vw, 112px);
  line-height: var(--leading-spice);
  letter-spacing: var(--tracking-spice);
  text-transform: uppercase;
  -webkit-text-stroke: 0.012em currentColor;
  text-shadow: var(--text-shadow-hard);
  color: var(--fyf-cream);
  margin: 10px 0 0;
}
.fyf-standings-hero .fyf-standings-hero__week {
  margin: 10px 0 0;
  font-family: var(--font-subhead);
  font-weight: 700;
  font-size: clamp(16px, 1.6vw, 20px);
  color: rgba(250, 220, 194, 0.82);
}
.fyf-standings-hero__nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-6);
  margin-top: var(--space-4);
}
.fyf-standings-hero .fyf-standings-hero__link {
  font-family: var(--font-subhead);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--fyf-yellow);
  text-decoration: none;
}
.fyf-standings-hero .fyf-standings-hero__link:hover { color: var(--fyf-cream); text-decoration: underline; }

/* Week pills -- _week_selector.html.erb. Cream outlines on charcoal; the
   current one is filled. */
.fyf-standings-weeks {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: var(--space-6);
}
.fyf-standings-weeks .fyf-standings-weeks__pill {
  font-family: var(--font-subhead);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  padding: 6px 12px;
  border: var(--stroke-chip) solid rgba(250, 220, 194, 0.55);
  border-radius: var(--radius-pill);
  color: var(--fyf-cream);
  text-decoration: none;
}
.fyf-standings-weeks .fyf-standings-weeks__pill:hover { border-color: var(--fyf-cream); }
.fyf-standings-weeks .fyf-standings-weeks__pill.is-current {
  background: var(--fyf-yellow);
  border-color: var(--fyf-yellow);
  color: var(--fyf-charcoal);
}
.fyf-standings-weeks .fyf-standings-weeks__pill:focus-visible { outline: 3px solid var(--fyf-blue); outline-offset: 2px; }

/* ---- Sealed / no-results notice ---------------------------------------- */
.fyf-standings-notice { padding: var(--space-12) 0; }
.fyf-standings-notice .fyf-standings-notice__card { padding: var(--space-8); max-width: 720px; }
.fyf-standings-notice .fyf-standings-notice__body { margin-top: 10px; color: var(--fyf-charcoal-80); }

/* ---- Podium ------------------------------------------------------------ */
.fyf-standings-podium {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
  gap: var(--space-6);
  align-items: end;
  padding: var(--space-8) 0 var(--space-5);
}
/* The medal and the move answer the same question -- where this entrant sits
   and which way they are going -- so they share the top row, one at each
   edge. Stacked, the medal sat alone above a column of left-hugging text and
   left the right half of every card empty. */
.fyf-standings-podium .fyf-standings-podium__card {
  padding: var(--space-5);
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-content: start;
}
.fyf-standings-podium .fyf-standings-podium__medal { grid-area: 1 / 1; }
.fyf-standings-podium .fyf-standings-podium__name { grid-area: 2 / 1 / auto / -1; }
.fyf-standings-podium .fyf-standings-podium__score { grid-area: 3 / 1 / auto / -1; }
.fyf-standings-podium .fyf-standings-podium__move {
  grid-area: 1 / 2;
  justify-self: end;
  align-self: center;
  margin-top: 0;
  text-align: right;
}
/* The winner stands tallest; tilts are the shared tokens (sm / none / md). */
.fyf-standings-podium .fyf-standings-podium__card--1 { padding-block: var(--space-6); }
.fyf-standings-podium .fyf-standings-podium__medal {
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: var(--stroke-sticker) solid var(--fyf-charcoal);
  border-radius: 50%;
  background: var(--fyf-yellow);
  box-shadow: var(--shadow-hard-sm);
  font-family: var(--font-subhead);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
}
.fyf-standings-podium .fyf-standings-podium__card--2 .fyf-standings-podium__medal { background: var(--fyf-chalk); }
.fyf-standings-podium .fyf-standings-podium__card--3 .fyf-standings-podium__medal { background: var(--fyf-orange); }
.fyf-standings-podium .fyf-standings-podium__name {
  margin-top: var(--space-3);
  font-family: var(--font-header);
  font-weight: var(--weight-display);
  font-size: clamp(20px, 2vw, 26px);
  line-height: var(--leading-heading);
  overflow-wrap: anywhere;
}
.fyf-standings-podium .fyf-standings-podium__name a { color: inherit; text-decoration: none; }
.fyf-standings-podium .fyf-standings-podium__name a:hover { text-decoration: underline; }
.fyf-standings-podium .fyf-standings-podium__score {
  margin-top: 6px;
  font-family: var(--font-mono);
  font-size: clamp(24px, 2.6vw, 34px);
  font-weight: 700;
  line-height: 1;
}
.fyf-standings-podium .fyf-standings-podium__move {
  margin-top: 8px;
  font-family: var(--font-subhead);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--fyf-charcoal-60);
}

/* The top three in the hero's right column. These sit AFTER the base podium
   rules above, never before: every selector here ties with its base
   counterpart on specificity (two classes each), and a tie is broken by source
   order alone -- placed above, the whole block is inert.

   They stack rather than sit side by side because the band's right column is
   ~400px, and three cards across that is ~120px each, narrower than several
   real entrant names. Stacked, each card gets the full column and collapses to
   one line -- medal, name, score -- with the week's move under the name. The
   tilts stay, so it still reads as three pieces of paper, not a list. */
.fyf-standings-hero .fyf-standings-podium {
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-4);
  align-items: stretch;
  padding: 0;
}
.fyf-standings-hero .fyf-standings-podium__card {
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 0 var(--space-4);
  padding: var(--space-4);
  /* Paper on charcoal, exactly as .fyf-standings-live above: .fyf-card--paper
     paints a background but no text colour, so inside this band the name and
     the medal's digits inherit the hero's cream and all but vanish on white.
     The score escaped it only because fyf_score_tone gives it one. */
  color: var(--fyf-charcoal);
}
.fyf-standings-hero .fyf-standings-podium__card--1 { padding-block: var(--space-4); }
.fyf-standings-hero .fyf-standings-podium__medal {
  grid-area: 1 / 1 / span 2 / auto;
  align-self: center;
  width: 38px;
  height: 38px;
  font-size: 13px;
}
.fyf-standings-hero .fyf-standings-podium__name {
  grid-area: 1 / 2;
  margin-top: 0;
  font-size: clamp(16px, 1.4vw, 19px);
}
.fyf-standings-hero .fyf-standings-podium__score {
  grid-area: 1 / 3 / span 2 / auto;
  align-self: center;
  margin-top: 0;
  font-size: clamp(20px, 1.8vw, 26px);
  text-align: right;
}
.fyf-standings-hero .fyf-standings-podium__move {
  grid-area: 2 / 2;
  justify-self: start;
  align-self: start;
  margin-top: 2px;
  text-align: left;
  font-size: 11px;
}

/* ---- Your board -------------------------------------------------------- */
.fyf-standings-mine { padding: var(--space-6) 0; }
.fyf-standings-mine .fyf-standings-mine__card {
  padding: var(--space-6) var(--space-8);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
  gap: var(--space-6);
  align-items: center;
  transform: rotate(-0.6deg);
}
.fyf-standings-mine .fyf-standings-mine__eyebrow {
  font-family: var(--font-subhead);
  font-weight: 700;
  font-size: var(--text-eyebrow);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--fyf-pink-deep);
}
.fyf-standings-mine .fyf-standings-mine__placing {
  font-family: var(--font-header);
  font-weight: var(--weight-display);
  font-size: clamp(36px, 4vw, 52px);
  line-height: 1;
  margin-top: 6px;
}
.fyf-standings-mine .fyf-standings-mine__placing span {
  font-family: var(--font-subhead);
  font-size: var(--text-md);
  color: var(--fyf-charcoal-60);
  margin-left: 6px;
}
.fyf-standings-mine .fyf-standings-mine__name { margin-top: 4px; font-weight: 600; overflow-wrap: anywhere; }
.fyf-standings-mine__stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-4);
  margin: 0;
}
.fyf-standings-mine__stats dt {
  font-family: var(--font-subhead);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--fyf-charcoal-60);
}
.fyf-standings-mine__stats dd {
  margin: 4px 0 0;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: clamp(20px, 2vw, 26px);
  line-height: 1;
}
.fyf-standings-mine .fyf-standings-mine__note { margin-top: 6px; font-size: var(--text-sm); color: var(--fyf-charcoal-60); }

/* ---- Toolbar ----------------------------------------------------------- */
.fyf-standings-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3, 12px) var(--space-4);
  padding: var(--space-6) 0 var(--space-4);
}
.fyf-standings-toolbar__tabs { display: inline-flex; gap: 4px; }
.fyf-standings-toolbar .fyf-standings-toolbar__tab {
  font-family: var(--font-subhead);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  padding: 8px 14px;
  border: var(--stroke-chip) solid var(--fyf-charcoal);
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--fyf-charcoal);
  cursor: pointer;
}
.fyf-standings-toolbar .fyf-standings-toolbar__tab[aria-selected="true"] {
  background: var(--fyf-charcoal);
  color: var(--fyf-cream);
}
.fyf-standings-toolbar .fyf-standings-toolbar__tab:focus-visible { outline: 3px solid var(--fyf-blue); outline-offset: 2px; }
.fyf-standings-toolbar .fyf-standings-toolbar__search {
  margin-left: auto;
  min-width: min(280px, 100%);
  padding: 9px 14px;
  border: var(--stroke-chip) solid var(--fyf-charcoal);
  border-radius: var(--radius-pill);
  background: var(--fyf-white);
  font: inherit;
  font-size: var(--text-sm);
}
.fyf-standings-toolbar .fyf-standings-toolbar__search:focus-visible { outline: 3px solid var(--fyf-blue); outline-offset: 2px; }
.fyf-standings-toolbar .fyf-standings-toolbar__clear {
  font-family: var(--font-subhead);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  padding: 8px 12px;
  border: 0;
  background: transparent;
  color: var(--fyf-pink-deep);
  cursor: pointer;
}
.fyf-standings-toolbar .fyf-standings-toolbar__clear:hover { text-decoration: underline; }
.fyf-standings-toolbar .fyf-standings-toolbar__clear:focus-visible { outline: 3px solid var(--fyf-blue); outline-offset: 2px; }

/* ---- The sheet --------------------------------------------------------- */
.fyf-standings-sheet { position: relative; padding-bottom: var(--space-8); }
.fyf-standings-sheet .fyf-standings-sheet__paper { padding: 0; overflow: visible; }
.fyf-standings-sheet .fyf-standings-sheet__field {
  padding: var(--space-4) var(--space-6) 0;
  font-family: var(--font-subhead);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--fyf-charcoal-60);
}
.fyf-standings-sheet__scroll { overflow-x: auto; }
/* Above the table's own min-width there is nothing to scroll sideways to, and
   an overflow-x container is an overflow container in BOTH axes -- which is
   what would stop the sticky header below from ever engaging against the page.
   So the frame stops being a scroller exactly where it stops being needed. */
@media (min-width: 720px) {
  .fyf-standings-sheet__scroll { overflow: visible; }
}
.fyf-standings-sheet__table {
  width: 100%;
  min-width: 640px;
  border-collapse: collapse;
  font-size: var(--text-sm);
}
.fyf-standings-sheet__table th {
  padding: 12px 10px 8px;
  text-align: left;
  font-family: var(--font-subhead);
  font-weight: 700;
  /* 10px of uppercase at this tracking is the smallest text on the page and
     the first thing a 1080p stream's encoder throws away. 11px is still a
     label, and still shorter than the shortest column it sits over. */
  font-size: 11px;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--fyf-charcoal-60);
  border-bottom: var(--stroke-chip) solid var(--fyf-charcoal);
  white-space: nowrap;
}
/* The field is up to ~200 rows on one page; scroll far enough and the columns
   stop meaning anything. Opaque because the paper under it is textured, and
   above the rows' own hover/lit backgrounds. */
@media (min-width: 720px) {
  .fyf-standings-sheet__table thead th {
    position: sticky;
    /* Below the site header, not under it: .fyf-header is itself sticky and
       wraps (78px wide, 135px at 1024), so the offset is measured at runtime
       by sticky_offset_controller. The 0 fallback is the pre-JS state, which
       is the behaviour this had before -- hidden, never broken. */
    top: var(--fyf-header-h, 0px);
    z-index: 3;
    /* The card's own stock -- .fyf-card--paper is white plus the paper
       texture, and a sticky header has to be opaque against the rows sliding
       under it. The texture is deliberately not repeated here: a 1px grain
       moving under a fixed header would shimmer. */
    background: var(--fyf-white);
  }
}

/* Column widths. Auto layout was giving the slack to whichever column asked
   last -- in practice a 270px-wide sparkbar cell holding 40px of bars, and a
   Δ wk column three times the width of the glyph in it. Everything but the
   entrant is sized to its content; the entrant takes the rest, because the
   name is the one thing on this row that must never be squeezed. */
.fyf-standings-sheet__table th:nth-child(1),
.fyf-standings-sheet__table td:nth-child(1) { width: 3.5rem; }
.fyf-standings-sheet__table th:nth-child(2),
.fyf-standings-sheet__table td:nth-child(2) { width: 4.5rem; }
.fyf-standings-sheet__table th:nth-child(3),
.fyf-standings-sheet__table td:nth-child(3) { width: auto; }
/* Form sits with the numbers, not against the name. Its width is its content
   (a bar per scored week, so it grows all season), and the slack lives in the
   entrant column -- which means early in the season the bars would otherwise
   float in the middle of the row. Right-aligned, they close up with the two
   numeric columns into one block the eye reads together. */
.fyf-standings-sheet__table th:nth-child(4),
.fyf-standings-sheet__table td:nth-child(4) { width: 1%; white-space: nowrap; text-align: right; }
.fyf-standings-sheet__table th:nth-child(5),
.fyf-standings-sheet__table td:nth-child(5) { width: 7rem; }
.fyf-standings-sheet__table th:nth-child(6),
.fyf-standings-sheet__table td:nth-child(6) { width: 6rem; }
.fyf-standings-sheet__table th:first-child,
.fyf-standings-sheet__table td:first-child { padding-left: var(--space-6); }

.fyf-standings-sheet__table td {
  padding: 10px;
  border-bottom: var(--stroke-hairline) solid var(--fyf-charcoal-12);
  vertical-align: middle;
}
.fyf-standings-sheet__table tr:last-child td { border-bottom: 0; }
.fyf-standings-sheet .fyf-standings-sheet__num { text-align: right; font-family: var(--font-mono); white-space: nowrap; }
.fyf-standings-sheet .fyf-standings-sheet__rank { font-family: var(--font-mono); font-weight: 700; }
.fyf-standings-sheet .fyf-standings-sheet__delta { font-family: var(--font-mono); font-size: 12px; color: var(--fyf-charcoal-60); white-space: nowrap; }
/* The movement glyph carried the same muted grey as the numeric deltas beside
   it, at 12px, which left the one column that is nothing BUT a glyph the
   hardest thing on the row to read. Sized up, weighted, and coloured by
   direction; the tone classes win over the grey above via the extra class. */
.fyf-standings-sheet .fyf-standings-sheet__move { font-size: 13px; font-weight: 700; }
.fyf-standings-sheet .fyf-standings-sheet__move.is-pos { color: var(--fyf-green-deep); }
.fyf-standings-sheet .fyf-standings-sheet__move.is-neg { color: var(--fyf-red-deep); }
.fyf-standings-sheet .fyf-standings-sheet__move.is-none { color: var(--fyf-charcoal-30); }
.fyf-standings-sheet .fyf-standings-sheet__name { font-weight: 600; }
.fyf-standings-sheet .fyf-standings-sheet__name a { color: inherit; text-decoration: none; }
.fyf-standings-sheet .fyf-standings-sheet__name a:hover { text-decoration: underline; }
.fyf-standings-sheet .fyf-standings-sheet__tag {
  margin-left: 6px;
  font-family: var(--font-subhead);
  font-weight: 700;
  font-size: 9px;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  padding: 2px 6px;
  border-radius: var(--radius-pill);
  background: var(--fyf-charcoal-12);
  color: var(--fyf-charcoal);
}
.fyf-standings-sheet .fyf-standings-sheet__tag--you { background: var(--fyf-pink); }
.fyf-standings-sheet .fyf-standings-sheet__score { font-weight: 700; }
.fyf-standings-sheet .fyf-standings-sheet__row { cursor: pointer; }
/* The entrant column takes all the slack by design, so at the 1120px measure a
   short name leaves ~420px of empty paper between it and its score -- measured
   at 1920, where "Chalk Fader" ends at x=510 and Form starts at x=930. Nothing
   carried the eye across that gap: the row rule is a hairline that all but
   vanishes once a stream re-encodes it. A stripe binds each row end to end and
   survives compression, where a 1px line does not.
   Deliberately a charcoal wash rather than one of the cream/stock tints: it
   sits UNDER the card's paper texture instead of covering it, and it leaves
   both hover (cream-tint) and the viewer's own row (stock-tint) clearly
   distinct on striped and unstriped rows alike. Specificity ties with the
   state rules below, so this must stay ABOVE them -- source order is what
   breaks the tie, and the states have to win it. */
.fyf-standings-sheet .fyf-standings-sheet__row:nth-child(even) td { background: rgba(48, 32, 45, 0.045); }
.fyf-standings-sheet .fyf-standings-sheet__row:hover td { background: var(--fyf-cream-tint); }
.fyf-standings-sheet .fyf-standings-sheet__row.is-viewer td { background: var(--fyf-stock-tint); }
.fyf-standings-sheet .fyf-standings-sheet__row.is-lit td { background: var(--fyf-yellow); }
.fyf-standings-sheet .fyf-standings-sheet__row:focus-visible { outline: 3px solid var(--fyf-blue); outline-offset: 2px; }

/* The two width passes below sit at the END of the sheet's rules on purpose.
   Every declaration in them ties on specificity with the base rule it is
   meant to beat -- `.fyf-standings-sheet__table td` against the same selector,
   `__delta`/`__move`/`__field` against their own two-class rules -- and a tie
   is broken by source order alone. Placed above, as they first were, only the
   font-size on .fyf-standings-sheet__table took effect and the padding and
   glyph sizes silently did nothing. Media queries add no specificity.

   Desktop and stream. The sheet is what people are actually reading, and at
   1080p they are reading it through a video encoder, which 14px rows with
   10px labels do not survive. Type goes up one step and the row gets its
   height back. Nothing reflows: the fixed columns are unchanged and the
   entrant column absorbs the difference, so this is legibility only. */
@media (min-width: 1280px) {
  .fyf-standings-sheet__table { font-size: var(--text-md); }
  .fyf-standings-sheet__table td { padding: 13px 10px; }
  .fyf-standings-sheet__table th { font-size: 12px; }
  .fyf-standings-sheet .fyf-standings-sheet__delta { font-size: 13px; }
  .fyf-standings-sheet .fyf-standings-sheet__move { font-size: 15px; }
  .fyf-standings-sheet .fyf-standings-sheet__field { font-size: 13px; }
}

/* Phone: fewer columns, not a sideways scroll.
   Measured at 390px before this rule: the table held its 640px min-width
   inside a 344px scroller, so 296px of it -- the entrant's second half, Form,
   fRank Score and This week -- sat off-screen. A phone was showing a
   leaderboard with no scores on it, and macOS overlay scrollbars paint nothing
   at rest, so nothing on screen said a score existed to scroll to.
   Form goes first: its bars are 6px wide and read as a smudge at this size.
   This week goes second: it is a second signed decimal beside the total, and
   the placing arrow in the Δ column tells the same week's story in less room.
   Both are back from 720px up, where the full table fits without scrolling. */
@media (max-width: 719px) {
  .fyf-standings-sheet__table { min-width: 0; }
  .fyf-standings-sheet__table th:nth-child(4),
  .fyf-standings-sheet__table td:nth-child(4),
  .fyf-standings-sheet__table th:nth-child(6),
  .fyf-standings-sheet__table td:nth-child(6) { display: none; }
  .fyf-standings-sheet__table th:nth-child(1),
  .fyf-standings-sheet__table td:nth-child(1) { width: 2.25rem; }
  .fyf-standings-sheet__table th:nth-child(2),
  .fyf-standings-sheet__table td:nth-child(2) { width: 2.75rem; }
  .fyf-standings-sheet__table th:nth-child(5),
  .fyf-standings-sheet__table td:nth-child(5) { width: 5rem; }
  .fyf-standings-sheet__table td { padding: 11px 6px; }
  .fyf-standings-sheet__table th:first-child,
  .fyf-standings-sheet__table td:first-child { padding-left: var(--space-4); }
  .fyf-standings-sheet__table th:last-child,
  .fyf-standings-sheet__table td:last-child { padding-right: var(--space-4); }
  .fyf-standings-sheet .fyf-standings-sheet__field { padding-inline: var(--space-4); }
}

/* Weekly-form sparkbars: one bar per scored week around a zero rule. Height
   is a percentage of half the cell, set inline from the presenter's
   field-wide scale; no bar at all on a masked row. */
.fyf-standings-bars {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 2px;
  height: 28px;
  min-width: 40px;
}
.fyf-standings-bars .fyf-standings-bars__rule {
  position: absolute;
  left: 0; right: 0; top: 50%;
  border-top: var(--stroke-hairline) solid var(--fyf-charcoal-30);
}
.fyf-standings-bars .fyf-standings-bars__bar {
  position: relative;
  width: 6px;
  height: 100%;
}
.fyf-standings-bars .fyf-standings-bars__bar::after {
  content: "";
  position: absolute;
  left: 0; right: 0;
  bottom: 50%;
  height: calc(var(--bar) * 0.5);
  background: var(--fyf-green);
  border-radius: 1px;
}
.fyf-standings-bars .fyf-standings-bars__bar--neg::after {
  bottom: auto;
  top: 50%;
  background: var(--fyf-red);
}
.fyf-standings-bars .fyf-standings-bars__bar.is-current::after { outline: 2px solid var(--fyf-charcoal); outline-offset: 0; }

/* The viewer's row, pinned to the sheet's top or bottom edge while their
   real row is scrolled out of view. Two server-rendered copies: sticky
   only engages relative to an element's own place in the flow, so the
   top pin sits before the table and the bottom one after it. */
.fyf-standings-pin {
  position: sticky;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-2) var(--space-4);
  padding: 8px var(--space-6);
  background: var(--fyf-stock-tint);
  border-block: var(--stroke-chip) solid var(--fyf-charcoal);
  font-size: var(--text-sm);
}
.fyf-standings-pin--top { top: 0; }
.fyf-standings-pin--bottom { bottom: 0; }
.fyf-standings-pin .fyf-standings-pin__label {
  font-family: var(--font-subhead);
  font-weight: 700;
  font-size: 10px;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--fyf-pink-deep);
}
.fyf-standings-pin .fyf-standings-pin__num { font-family: var(--font-mono); font-weight: 700; }

/* Tailwind preflight's `[hidden]:where(:not([hidden=until-found])){display:none}`
   is (0,1,0) specificity -- the same as .fyf-standings-pin above -- and this
   file loads after Tailwind, but source order only breaks a TIE, and
   preflight's `:where()` wrapper contributes none, so the tie is real and
   `display: flex` above wins it, leaving both server-rendered pins (shipped
   with `hidden`) visible for every signed-in entrant until the controller's
   IntersectionObserver first fires. Same fix as .fyf-stage__beat[hidden] in
   marketing.css. */
.fyf-standings-pin[hidden] { display: none; }

/* ---- Progress ---------------------------------------------------------- */
.fyf-standings-chart {
  background: var(--fyf-turf-deep);
  color: var(--fyf-cream);
  border: var(--stroke-sticker) solid var(--fyf-charcoal);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-hard);
  padding: var(--space-6);
}
.fyf-standings-chart__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2) var(--space-4);
}
.fyf-standings-chart .fyf-standings-chart__title {
  font-family: var(--font-header);
  font-weight: var(--weight-display);
  font-size: clamp(20px, 2vw, 26px);
  line-height: var(--leading-heading);
  letter-spacing: var(--tracking-display);
  margin: 0;
  color: var(--fyf-cream);
}
.fyf-standings-chart .fyf-standings-chart__note { margin-top: 6px; font-size: var(--text-sm); color: rgba(250, 220, 194, 0.78); }
.fyf-standings-chart__axes { display: inline-flex; gap: 4px; }
.fyf-standings-chart .fyf-standings-chart__axis-tab {
  font-family: var(--font-subhead);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  padding: 6px 12px;
  border: var(--stroke-chip) solid rgba(250, 220, 194, 0.55);
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--fyf-cream);
  cursor: pointer;
}
.fyf-standings-chart .fyf-standings-chart__axis-tab[aria-selected="true"] {
  background: var(--fyf-yellow);
  border-color: var(--fyf-yellow);
  color: var(--fyf-charcoal);
}
.fyf-standings-chart .fyf-standings-chart__axis-tab:focus-visible { outline: 3px solid var(--fyf-blue); outline-offset: 2px; }
.fyf-standings-chart__svg {
  display: block;
  width: 100%;
  height: auto;
  margin-top: var(--space-4);
  font-family: var(--font-subhead);
}
.fyf-standings-chart .is-hidden { display: none; }
.fyf-standings-chart .fyf-standings-chart__tick {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  fill: rgba(250, 220, 194, 0.7);
}
.fyf-standings-chart .fyf-standings-chart__grid { stroke: rgba(217, 213, 203, 0.22); stroke-width: 1; }
.fyf-standings-chart .fyf-standings-chart__zero { stroke: rgba(217, 213, 203, 0.55); stroke-width: 1; stroke-dasharray: 4 4; }
.fyf-standings-chart .fyf-standings-chart__marker { stroke: var(--fyf-yellow); stroke-width: 2; stroke-dasharray: 2 4; }
.fyf-standings-chart .fyf-standings-chart__line {
  fill: none;
  stroke: rgba(250, 220, 194, 0.42);
  stroke-width: 1.5;
  stroke-linejoin: round;
  stroke-linecap: round;
  transition: stroke 120ms ease, stroke-width 120ms ease;
}
.fyf-standings-chart circle.fyf-standings-chart__line { fill: rgba(250, 220, 194, 0.7); stroke: none; }
.fyf-standings-chart .fyf-standings-chart__line.is-podium { stroke: var(--fyf-cream); stroke-width: 2; }
.fyf-standings-chart .fyf-standings-chart__line.is-viewer { stroke: var(--fyf-pink); stroke-width: 3; }
.fyf-standings-chart .fyf-standings-chart__line.is-lit { stroke: var(--fyf-yellow); stroke-width: 3.5; }
.fyf-standings-chart circle.fyf-standings-chart__line.is-viewer { fill: var(--fyf-pink); }
.fyf-standings-chart circle.fyf-standings-chart__line.is-lit { fill: var(--fyf-yellow); }
/* Every contestant is named, on a ladder down the gutter in the sheet's
   running order. They used to be hidden bar the podium, the viewer's and the
   lit -- the pile-up that justified hiding them came from anchoring each name
   to its own line's end, which on the score axis stacks the whole field
   wherever the field clusters. Spaced on rungs instead, the gutter reads as a
   list and nothing collides, so there is nothing left to hide. Emphasis does
   the work the old visibility rule was doing. */
.fyf-standings-chart .fyf-standings-chart__label {
  font-size: 11px;
  font-weight: 700;
  fill: rgba(250, 220, 194, 0.72);
}
.fyf-standings-chart .fyf-standings-chart__label.is-podium { fill: var(--fyf-cream); }
.fyf-standings-chart .fyf-standings-chart__label.is-lit { fill: var(--fyf-yellow); }
.fyf-standings-chart .fyf-standings-chart__label.is-viewer { fill: var(--fyf-pink); }

/* The leader from a line's end to its rung. Fainter than the faintest line, so
   eighteen of them read as a join rather than as more season. */
.fyf-standings-chart .fyf-standings-chart__leader {
  stroke: rgba(250, 220, 194, 0.22);
  stroke-width: 1;
}
.fyf-standings-chart .fyf-standings-chart__leader.is-podium { stroke: rgba(250, 220, 194, 0.45); }
.fyf-standings-chart .fyf-standings-chart__leader.is-viewer { stroke: var(--fyf-pink); }
.fyf-standings-chart .fyf-standings-chart__leader.is-lit { stroke: var(--fyf-yellow); }
.fyf-standings-chart .fyf-standings-chart__label.is-lit { fill: var(--fyf-yellow); }
.fyf-standings-chart .fyf-standings-chart__label.is-viewer { fill: var(--fyf-pink); }

/* Below 720px the chart gets a width floor and scrolls to it, rather than
   shrinking its own text into illegibility: measured at 390px, a 0.39 scale
   put every tick and end-label at ~4.3 effective px. At the 600px floor the
   scale is ~0.79, so 14 user units land back at the ~11px these were drawn
   for. This block sits BELOW the tick and label rules on purpose -- it ties
   with them on specificity, and source order is the only thing that breaks
   the tie. */
@media (max-width: 719px) {
  .fyf-standings-chart__frame { position: relative; }
  .fyf-standings-chart__scroll { overflow-x: auto; }
  .fyf-standings-chart__svg { min-width: 640px; }
  /* Only the week ticks along the bottom, which are centred on their own tick
     and have the whole plot to grow into. The placing ticks up the left side
     are anchored at x=36 and grow LEFTWARD out of the viewBox: "29th" measures
     44 user units at 14px and clips to ":9th", so those stay at the 11px the
     geometry was laid out around. */
  .fyf-standings-chart .fyf-standings-chart__tick[text-anchor="middle"] { font-size: 13px; }
  /* The names ride 18-unit rungs, which at the 640px floor is ~15px apart --
     room for 13px here, where 11px would land at ~9 effective pixels. */
  .fyf-standings-chart .fyf-standings-chart__label { font-size: 13px; }
  /* Drawn on the frame, never on the scroller: an affordance painted on the
     scrolling element travels with the content and disappears exactly when it
     is still needed. macOS overlay scrollbars paint nothing at rest and
     ::-webkit-scrollbar rules do not reliably override that, so the only
     dependable edge marker is one the page draws itself. */
  .fyf-standings-chart__frame::after {
    content: "";
    position: absolute;
    top: 0; bottom: 0; right: 0;
    width: 28px;
    pointer-events: none;
    background: linear-gradient(to right, rgba(38, 66, 26, 0), var(--fyf-turf-deep));
  }
}
@media (min-width: 720px) {
  .fyf-standings-chart__scroll { overflow: visible; }
}

/* ---- Below the fold ---------------------------------------------------- */
.fyf-standings-tables { padding: var(--space-10) 0 0; display: grid; gap: var(--space-10); }
/* A grid item's min-width defaults to auto, i.e. to its own min-content, so
   each section here was sized by the 560px min-width table inside it rather
   than by the track -- and the __scroll wrapper below could not help, because
   it was the section around it that had already overflowed. Measured at 390px:
   the page scrolled 196px sideways, and only for a signed-in entrant, which is
   why the anonymous page always looked clean. */
.fyf-standings-tables > * { min-width: 0; }
.fyf-standings-tables .fyf-standings-tables__paper { padding: 0; margin-top: var(--space-4); }
.fyf-standings-tables__scroll { overflow-x: auto; }
.fyf-standings-tables__table { width: 100%; min-width: 560px; border-collapse: collapse; font-size: var(--text-sm); }
.fyf-standings-tables__table th {
  padding: 12px 10px 8px;
  text-align: left;
  font-family: var(--font-subhead);
  font-weight: 700;
  font-size: 10px;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--fyf-charcoal-60);
  border-bottom: var(--stroke-chip) solid var(--fyf-charcoal);
  white-space: nowrap;
}
.fyf-standings-tables__table th:first-child,
.fyf-standings-tables__table td:first-child { padding-left: var(--space-6); }
.fyf-standings-tables__table td { padding: 10px; border-bottom: var(--stroke-hairline) solid var(--fyf-charcoal-12); font-family: var(--font-mono); }
.fyf-standings-tables__table tr:last-child td { border-bottom: 0; }
.fyf-standings-tables .fyf-standings-tables__num { text-align: right; white-space: nowrap; }
.fyf-standings-tables .fyf-standings-tables__player { font-family: var(--font-body); font-weight: 600; }
.fyf-standings-tables .fyf-standings-tables__more {
  margin-top: var(--space-4);
  font-family: var(--font-subhead);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--fyf-pink-deep);
  cursor: pointer;
}
.fyf-standings .fyf-standings__provenance {
  padding: var(--space-8) 0 var(--space-4);
  font-size: var(--text-xs);
  color: var(--fyf-charcoal-60);
}
.fyf-standings .fyf-standings__provenance code { font-family: var(--font-mono); }
.fyf-standings .fyf-standings__provenance a { color: inherit; }
/* Names the line for what it is, so the method version and digest after it
   read as an audit trail rather than as something that escaped. */
.fyf-standings .fyf-standings__receipt-label {
  font-family: var(--font-subhead);
  font-weight: 700;
  font-size: 10px;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--fyf-charcoal);
  margin-right: 4px;
}

/* ---- Visibility switches ----------------------------------------------- */
.fyf-standings-visibility {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
  gap: var(--space-6);
  padding: var(--space-8) 0 var(--space-16);
}
.fyf-standings-visibility .fyf-standings-visibility__card { padding: var(--space-6); }
.fyf-standings-visibility .fyf-standings-visibility__body { margin-top: 8px; font-size: var(--text-sm); color: var(--fyf-charcoal-80); }
.fyf-standings-visibility__options { display: grid; gap: 8px; margin-top: var(--space-4); }
.fyf-standings-visibility .fyf-standings-visibility__option {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 14px;
  border: var(--stroke-chip) solid var(--fyf-charcoal-30);
  border-radius: var(--radius-md);
  cursor: pointer;
}
.fyf-standings-visibility .fyf-standings-visibility__option.is-selected { border-color: var(--fyf-charcoal); background: var(--fyf-cream-tint); }
.fyf-standings-visibility .fyf-standings-visibility__option input { margin-top: 4px; }
.fyf-standings-visibility .fyf-standings-visibility__option-title { display: block; font-weight: 600; font-size: var(--text-sm); }
.fyf-standings-visibility .fyf-standings-visibility__option-body { display: block; font-size: var(--text-xs); color: var(--fyf-charcoal-60); margin-top: 2px; }
.fyf-standings-visibility .fyf-standings-visibility__submit { margin-top: var(--space-4); }

/* ---- Footer strip ------------------------------------------------------ */
.fyf-standings-foot {
  background: var(--fyf-charcoal);
  color: rgba(250, 220, 194, 0.82);
  padding: var(--space-4) 0;
  font-family: var(--font-subhead);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  text-align: center;
}