accordion that used to sit here (a scoring
card walking the four-step formula, the outcome trio, and an "advanced"
double-matchup card -- .fyf-scoring, .fyf-outcomes, .fyf-scoring-details,
.fyf-scoring-advanced) is gone; every line of it duplicated /rules. Its
toggle survives as a plain link to that page, in the same dress: the
summary's pink tracked-uppercase label over a sticker-weight underline.
Centred at the accordion's old 960px, deliberately departing from the
mockup -- same call as commit 0830200 made for this section's old
.fyf-scoring-wrap. The mockup's own 960px/no-margin still sits
left-aligned with dead space to its right while every other section
fills the container, so the on-sight "this looks broken" report still
applies. Do not re-left-align this on a future fidelity pass without
re-litigating that report. */
.fyf-scoring-link-wrap { max-width: 960px; margin: 40px auto 0; }
/* Qualified with .fyf-section: fyf_foundation.css's `.fyf a` (0,1,1) sets
the link colour and a 2px underline, and a bare single-class rule (0,1,0)
loses to it on both. The underline lives on the inner span instead, so
the rule (not the arrow) carries it, as the summary's did. */
.fyf-section .fyf-scoring-link {
display: inline-flex;
align-items: center;
font-family: var(--font-subhead);
font-weight: 700;
font-size: 13px;
letter-spacing: var(--tracking-label);
text-transform: uppercase;
color: var(--fyf-pink-deep);
text-decoration: none;
}
.fyf-section .fyf-scoring-link:hover { color: var(--fyf-pink-deep); }
.fyf-section .fyf-scoring-link:hover .fyf-scoring-link__text { border-bottom-color: var(--fyf-charcoal); }
/* Nothing clips this link (unlike .fyf-disclosure__summary), so the UA ring
can draw outside the box; offset pushes it clear of the underline. */
.fyf-section .fyf-scoring-link:focus-visible {
outline: var(--stroke-sticker) solid var(--fyf-charcoal);
outline-offset: 4px;
}
.fyf-scoring-link__text {
border-bottom: var(--stroke-sticker) solid var(--fyf-pink-deep);
padding-bottom: 3px;
}
/* ── Scoring stage ────────────────────────────────────────────
The four-beat demo: a matchup, a season-value meter, a weight table, and
the running total, cycled by Task 4's scoring-stage controller. Static
here -- beat 0 visible, beats 1-3 `hidden`, dot 0 filled. No max-width:
the mockup's own stage has none, unlike the rules link below it, so it
fills the section container the way every other full-width block here
does. min-height: 520px is a floor, not a cap -- overflow: hidden still
only clips the dot-grid background/rounded corners at the edges; the
beat pane below is normal flow now (not absolutely inset to this box),
so taller-than-520px content on a phone grows this box instead of
spilling past a fixed height and getting clipped. display: flex;
flex-direction: column stacks the beat pane above the control bar in
source order (both normal-flow children now) and lets the bar's own
margin-top: auto below pin it to the bottom edge regardless of how
tall the beat above it grows. */
.fyf-stage {
position: relative;
display: flex;
flex-direction: column;
margin: 28px 0 0;
background: var(--fyf-cream-tint);
background-image: radial-gradient(var(--fyf-charcoal-12) 1.5px, transparent 1.5px);
background-size: 20px 20px;
border: var(--stroke-sticker) solid var(--fyf-charcoal);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-hard);
min-height: 520px;
overflow: hidden;
}
/* Normal flow, not an absolute overlay: hidden beats are display: none
(the [hidden] override below), so at most one beat pane is ever in the
render tree at a time -- there was never anything to overlay. The old
`position: absolute; inset: 0 0 60px 0` pinned every beat to exactly
(the stage's containing block for absolute children -- its PADDING
box, not its border box) minus the control bar's 60px bottom reserve.
fyf_foundation.css sets box-sizing: border-box on everything under
.fyf, and .fyf-stage's min-height: 520px above is a border-box value
with a 3px border (--stroke-sticker) on all four sides, so that
padding box was 520 - 6 = 514px, not 520 -- and the old beat height
was 514 - 60 = 454px. min-height: 454px reproduces that exact number
(not the stage's own 520px minus 60, which overshoots by the 6px of
border) as a floor rather than a hard box: desktop, where every beat's
real content is well under it -- the matchup beats (row + empty/filled
meter-slot) run ~373px, the weight table ~333px, the running total
~347px, each including this rule's own 24px top/bottom padding --
renders unchanged, while on phone/tablet content taller than 454px now
grows the beat (and with it .fyf-stage above, whose own min-height is
likewise just a floor) instead of clipping under the bar. */
.fyf-stage__beat {
display: grid;
align-content: center;
justify-items: center;
min-height: 454px;
padding: 24px;
}
.fyf-stage__beat--matchup { gap: 24px; }
.fyf-stage__beat--total { gap: 28px; }
/* Tailwind preflight's `[hidden]:where(:not([hidden=until-found])){display:none}`
is (0,1,0) specificity -- the same as this class -- and marketing.css
loads after Tailwind, but source order only breaks a TIE, and preflight's
`:where()` wrapper contributes none, so the tie is real and this file's
`display: grid` above wins it, leaving all four beats stacked visible.
Same fix as .cmp-menu[hidden]/.fr-palette-backdrop[hidden] in editor.css. */
.fyf-stage__beat[hidden] { display: none; }
/* Beats 0-1: the matchup row */
.fyf-stage__row {
display: flex;
align-items: center;
justify-content: center;
gap: clamp(14px, 2.4vw, 30px);
flex-wrap: wrap;
}
/* flex-wrap: wrap above is what shipped as the phone fallback, and it's
not a designed stack -- two 36vw cards + the 52px VS roundel + their
two gaps only clear the beat's available content width above roughly
701px, so anything narrower wraps mid-row: the market card drops alone
to a second line, left-stuck instead of centred under the VS roundel.
The crossover: section padding is clamp(24px,4.4vw,56px), so for
viewport V in the un-clamped range available width = V - 2*(.044V) -
6px border - 48px beat padding = .912V - 54. Required width (once
`min(250px,36vw)` caps each card at 250px, true above V=694.4) =
2*250 + 52 roundel + 2*clamp(14px,2.4vw,30px) = 552 + .048V. Setting
them equal, .912V - 54 = 552 + .048V, solves to V ~= 701.4px. 720px
gives that a few px of headroom. Below it, force the same three items
into a clean vertical stack -- card / VS / card, centred -- instead of
leaving the browser's wrap point to decide. Tablet (768px) is above
this breakpoint and untouched, matching the desktop row layout
(required ~=588.9px there vs. ~=646.4px available -- a comfortable
margin). */
@media (max-width: 720px) {
.fyf-stage__row { flex-direction: column; align-items: center; }
}
.fyf-stage__card {
width: min(250px, 36vw);
background: var(--fyf-white);
background-image: var(--texture-paper);
border: var(--stroke-sticker) solid var(--fyf-charcoal);
border-radius: var(--radius-lg);
}
/* 1s, not the mock's .55s -- user-directed slowdown of the card slide-in
(2026-08-20 UAT). The VS pop's delay below tracks this duration so it
still lands as the cards settle; don't retune one without the other. */
.fyf-stage__card--you {
box-shadow: var(--shadow-hard);
animation: fyf-slide-l 1s var(--ease-snap) both;
}
.fyf-stage__card--market {
box-shadow: var(--shadow-hard-sm);
animation: fyf-slide-r 1s var(--ease-snap) both;
}
.fyf-stage__card-head {
border-bottom: var(--stroke-sticker) solid var(--fyf-charcoal);
border-radius: calc(var(--radius-lg) - 4px) calc(var(--radius-lg) - 4px) 0 0;
padding: 8px 14px;
font-family: var(--font-subhead);
font-weight: 700;
font-size: 11px;
letter-spacing: var(--tracking-label);
text-transform: uppercase;
}
.fyf-stage__card-head--you { background: var(--fyf-pink); }
.fyf-stage__card-head--market { background: var(--fyf-charcoal); color: var(--fyf-cream); }
.fyf-stage__card-name {
padding: 16px 14px 18px;
font-family: var(--font-header);
font-weight: var(--weight-display);
font-size: clamp(20px, 2vw, 26px);
line-height: 1.05;
}
.fyf-stage__vs {
flex: none;
width: 52px;
height: 52px;
border: var(--stroke-sticker) solid var(--fyf-charcoal);
border-radius: 999px;
background: var(--fyf-yellow);
box-shadow: var(--shadow-hard-sm);
display: flex;
align-items: center;
justify-content: center;
font-family: var(--font-subhead);
font-weight: 700;
font-size: 14px;
animation: fyf-pop .3s var(--ease-pop) .9s both;
}
/* Beat 1: the season-value meter, appended after the shared matchup row */
.fyf-stage__meter-slot { min-height: 204px; width: min(560px, 100%); display: grid; align-content: start; }
/* grid-template-columns lives here, on the shared parent, not on each
.fyf-stage__meter-row -- two independent grids each resolving their own
minmax(52px, max-content) gave "Jaxon Smith-Njigba" and "Bijan Robinson"
different column-1 widths, so the two bar tracks started at different x
offsets with different widths and the 78%/52% fills stopped being
comparable at a glance, which is the whole point of a meter. Hoisting
the columns here and making each row `display: contents` (below) makes
both name/track pairs items of this ONE grid, so column 1 resolves once
-- sized to the longer of the two names -- and both tracks share it. */
.fyf-stage__meter {
display: grid;
grid-template-columns: minmax(52px, max-content) 1fr;
align-items: center;
gap: 9px 10px;
background: var(--fyf-white);
background-image: var(--texture-paper);
border: var(--stroke-sticker) solid var(--fyf-charcoal);
border-radius: var(--radius-md);
box-shadow: var(--shadow-hard-sm);
padding: 14px 18px 16px;
animation: fyf-rise .4s var(--ease-snap) both;
}
.fyf-stage__meter-head {
grid-column: 1 / -1;
display: flex;
align-items: baseline;
justify-content: space-between;
flex-wrap: wrap;
gap: 4px 14px;
font-family: var(--font-subhead);
font-weight: 700;
font-size: 10px;
letter-spacing: var(--tracking-label);
text-transform: uppercase;
}
.fyf-stage__meter-head-sub { white-space: nowrap; color: var(--fyf-charcoal-60); }
/* display: contents -- not its own grid -- so its two children (name,
track) become direct items of .fyf-stage__meter's grid above and share
its column tracks instead of each row sizing column 1 independently.
The name still wraps rather than truncating if the shared column ever
gets tighter than the longer name (no white-space: nowrap here or on
.fyf-stage__meter-name). */
.fyf-stage__meter-row { display: contents; }
.fyf-stage__meter-name { font-family: var(--font-subhead); font-weight: 700; font-size: 11px; letter-spacing: .05em; }
.fyf-stage__meter-track {
display: block;
position: relative;
height: 16px;
border: var(--stroke-chip) solid var(--fyf-charcoal);
border-radius: 999px;
overflow: hidden;
background: var(--fyf-cream-tint);
}
.fyf-stage__meter-fill { display: block; height: 100%; }
.fyf-stage__meter-fill--you { background: var(--fyf-pink); animation: fyf-bar-you 3s steps(18, end) .3s both; }
.fyf-stage__meter-fill--mkt { background: var(--fyf-blue); animation: fyf-bar-mkt 3s steps(18, end) .3s both; }
/* The week-tick overlay -- an allowed literal (see design_tokens_spec's
scoping check + this task's brief): 18 weekly ticks over the bar, at the
same faint ink used for the board-row hairlines elsewhere on this page. */
.fyf-stage__meter-ticks {
position: absolute;
inset: 0;
background-image: repeating-linear-gradient(
90deg,
transparent 0, transparent calc(100% / 18 - 2px),
rgba(48, 32, 45, .22) calc(100% / 18 - 2px), rgba(48, 32, 45, .22) calc(100% / 18)
);
pointer-events: none;
}
/* grid-column: 1 / -1 -- also a direct child of .fyf-stage__meter's now
2-column grid, so it has to span both tracks itself or it would be
auto-placed into just column 1 and squeezed to that width. */
.fyf-stage__verdicts { grid-column: 1 / -1; display: grid; gap: 5px; margin-top: 6px; justify-content: center; }
/* minmax(0, 1fr), not a fixed 106px: 106px fit the mockup's "JSN > BIJAN"
abbreviation, but this project spells illustrative names out in full
("Jaxon Smith-Njigba > Bijan Robinson"), which overflowed the fixed
column by ~150px. The chip (92px) and note (96px) columns stay fixed --
only the label needs to give. */
.fyf-stage__verdict {
display: grid;
grid-template-columns: minmax(0, 1fr) 92px 96px;
align-items: center;
gap: 12px;
padding: 4px 12px;
}
.fyf-stage__verdict--win {
background: rgba(31, 112, 49, .1);
border: var(--stroke-chip) solid var(--fyf-charcoal);
border-radius: var(--radius-sm);
padding: 4px 10px;
animation: fyf-rise .35s var(--ease-snap) 3.5s both;
}
.fyf-stage__verdict--tie { animation: fyf-rise .35s var(--ease-snap) 3.7s both; }
.fyf-stage__verdict--loss { animation: fyf-rise .35s var(--ease-snap) 3.9s both; }
/* No white-space: nowrap -- same rule as .fyf-board__name/.fyf-stage__weight-name: this project never truncates a player name, and the flexible label column above lets it wrap instead of clipping. */
.fyf-stage__verdict-label { font-family: var(--font-subhead); font-weight: 700; font-size: 12px; letter-spacing: .04em; }
.fyf-stage__verdict-label--muted { color: var(--fyf-charcoal-80); }
.fyf-stage__verdict-op--win { color: var(--fyf-green-deep); }
.fyf-stage__verdict-op--tie { color: var(--fyf-charcoal-60); }
.fyf-stage__verdict-op--loss { color: var(--fyf-red-deep); }
.fyf-stage__verdict-chip {
font-family: var(--font-subhead);
font-weight: 700;
font-size: 11px;
letter-spacing: .04em;
text-transform: uppercase;
text-align: center;
border: var(--stroke-chip) solid var(--fyf-charcoal);
border-radius: var(--radius-pill);
padding: 3px 0;
}
.fyf-stage__verdict-chip--win { color: var(--fyf-cream); background: var(--fyf-green); }
.fyf-stage__verdict-chip--tie { background: var(--fyf-cream-tint); }
.fyf-stage__verdict-chip--loss { color: var(--fyf-cream); background: var(--fyf-red); }
.fyf-stage__verdict-note {
font-family: var(--font-subhead);
font-weight: 700;
font-size: 10px;
letter-spacing: var(--tracking-label);
text-transform: uppercase;
white-space: nowrap;
animation: fyf-pop .3s var(--ease-pop) 4.4s both;
}
/* ≤600px: the chip (92px) + note (96px) fixed columns + 2×12px gaps
already total 212px. At 390px viewport: section padding clamps to its
24px floor (4.4vw = 17.16px < 24px), so the stage is 390 - 48 = 342px
wide; minus its 3px*2 border, 336px; minus the beat's 24px*2 padding,
288px of beat content. The meter box stretches to fill that (its slot
is width: min(560px,100%), and 100% of 288 < 560), so minus the
meter's own 18px*2 padding, the verdicts block (grid-column: 1/-1 of
the meter's grid) is 288 - 36 = 252px wide. 252 - 212 leaves the
flexible label column only ~40px -- nowhere near enough for "Jaxon
Smith-Njigba > Bijan Robinson" (this
project spells worked-example names out in full, never an initialism --
see the no-nowrap comment on .fyf-stage__verdict-label above), so it
wrapped to five or six near-empty lines. Drop the short, already-nowrap
note ("<- this season") to its own full-width line below instead --
it never needed the room -- freeing the label column back up to
~148px, comfortable for a two-line wrap of the full comparison. */
@media (max-width: 600px) {
.fyf-stage__verdict {
grid-template-columns: minmax(0, 1fr) 92px;
grid-template-areas:
"label chip"
"note note";
}
.fyf-stage__verdict-label { grid-area: label; }
.fyf-stage__verdict-chip { grid-area: chip; }
.fyf-stage__verdict-note { grid-area: note; }
/* The tie/loss verdicts never render a .fyf-stage__verdict-note (only
the win verdict's "<- this season" copy exists in the ERB -- see
_scoring_stage.html.erb), so their "note" row/area above would sit
permanently empty. An empty grid row still pulls in the base rule's
gap: 12px row-gap ahead of it even with nothing inside it (gap is a
gutter between tracks, not conditional on their occupancy), which
left a dead 12px sliver below every tie/loss row. Collapsing their
template to the single real row removes that gutter outright instead
of just shrinking it. */
.fyf-stage__verdict--tie,
.fyf-stage__verdict--loss {
grid-template-areas: "label chip";
}
}
/* Beat 2: the weight table */
.fyf-stage__panel {
width: min(640px, 94%);
background: var(--fyf-white);
background-image: var(--texture-paper);
border: var(--stroke-sticker) solid var(--fyf-charcoal);
border-radius: var(--radius-md);
box-shadow: var(--shadow-hard-sm);
overflow: hidden;
}
.fyf-stage__weight-header {
display: grid;
grid-template-columns: 44px 68px minmax(0, 1fr) minmax(0, 1fr) 58px;
align-items: center;
gap: 10px;
padding: 10px 14px;
background: var(--fyf-cream-tint);
border-bottom: var(--stroke-chip) solid var(--fyf-charcoal);
font-family: var(--font-subhead);
font-weight: 700;
font-size: 10px;
letter-spacing: var(--tracking-label);
text-transform: uppercase;
color: var(--fyf-charcoal-60);
}
.fyf-stage__weight-center { text-align: center; }
.fyf-stage__weight-row {
display: grid;
grid-template-columns: 44px 68px minmax(0, 1fr) minmax(0, 1fr) 58px;
align-items: center;
gap: 10px;
padding: 8px 14px;
}
.fyf-stage__weight-row--r1 { animation: fyf-rise .35s var(--ease-snap) .05s both; }
.fyf-stage__weight-row--r2 { animation: fyf-rise .35s var(--ease-snap) .2s both; }
.fyf-stage__weight-row--r3 { animation: fyf-rise .35s var(--ease-snap) .35s both; }
.fyf-stage__weight-row--mid { animation: fyf-rise .35s var(--ease-snap) .5s both; }
.fyf-stage__weight-row--last { animation: fyf-rise .35s var(--ease-snap) .65s both; }
/* The "your pick" row (#2) -- same translucent-brand-tint technique as
.fyf-board__row--lifted above, just pink instead of green: highlighting a
row with its own accent colour at low alpha, not yet in a token. */
.fyf-stage__weight-row--you {
background: rgba(240, 70, 160, .1);
border-top: var(--stroke-chip) solid var(--fyf-charcoal);
border-bottom: var(--stroke-chip) solid var(--fyf-charcoal);
}
.fyf-stage__weight-row--divider { border-top: var(--stroke-chip) solid var(--fyf-charcoal-12); }
.fyf-stage__weight-gap {
font-family: var(--font-subhead);
font-weight: 700;
font-size: 13px;
color: var(--fyf-charcoal-60);
padding: 2px 14px;
line-height: .9;
border-top: var(--stroke-chip) solid var(--fyf-charcoal-12);
}
.fyf-stage__weight-rank { font-family: var(--font-subhead); font-weight: 700; font-size: 14px; }
.fyf-stage__weight-pill {
font-family: var(--font-subhead);
font-weight: 700;
font-size: 12px;
text-align: center;
border: var(--stroke-chip) solid var(--fyf-charcoal);
border-radius: var(--radius-pill);
padding: 2px 0;
}
/* The yellow alpha ramp -- an allowed literal (this task's brief): five
illustrative rows fading from full weight to almost none, same fyf-yellow
the rest of the page reaches with var(), just not opaque here. */
.fyf-stage__weight-pill--1 { background: rgba(250, 202, 22, .92); }
.fyf-stage__weight-pill--2 { background: rgba(250, 202, 22, .88); }
.fyf-stage__weight-pill--3 { background: rgba(250, 202, 22, .84); }
.fyf-stage__weight-pill--mid { background: rgba(250, 202, 22, .48); }
.fyf-stage__weight-pill--last { background: rgba(250, 202, 22, .12); }
.fyf-stage__weight-player { display: flex; align-items: center; gap: 7px; min-width: 0; }
/* No white-space: nowrap / text-overflow: ellipsis -- same rule as
.fyf-board__name above: this project never truncates a player name, even
in a compact illustrative table, and these rows spell the full name out
(never an initialism) specifically so it reads without abbreviating. */
.fyf-stage__weight-name { font-family: var(--font-header); font-size: 15px; line-height: 1.1; }
.fyf-stage__weight-pts {
font-family: var(--font-subhead);
font-weight: 700;
font-size: 12px;
text-align: center;
border: var(--stroke-chip) solid var(--fyf-charcoal);
border-radius: var(--radius-pill);
padding: 2px 0;
}
.fyf-stage__weight-pts--zero { background: var(--fyf-cream-tint); }
.fyf-stage__weight-pts--gain { color: var(--fyf-cream); background: var(--fyf-green); }
.fyf-stage__weight-pts--loss { color: var(--fyf-cream); background: var(--fyf-red); }
/* ≤600px: the fixed 44px/68px/58px rank/weight/pts columns + 4x10px gaps
already total 210px. At 390px viewport, the beat content area is 288px
(see the derivation in the ≤600px .fyf-stage__verdict comment above --
same 390 -> 342 -> 336 -> 288 chain); the panel's own width: min(640px,
94%) resolves to 94% of that, ~271px, since 640 > 271. 271 minus the
row's 14px*2 padding is ~243px of row content -- leaving the two
flexible pick columns ~33px combined (243 - 210),
under a single position pill's own 32px min-width (.fyf-pill--sm)
before a single letter of the name. Below this breakpoint, restructure
each row into three lines instead of one: rank + weight + fRank pts
stay together on line one (the same three values the header used to
label), and the two picks each get their own full-width line below,
with the panel's whole ~271px to themselves -- comfortably fitting
even the longest names without truncating (never truncate a player
name -- project rule, see .fyf-stage__weight-name above). The header
row is dropped rather than reflowed to match: "Rank / Weight / Your
pick / Market's pick / fRank pts" doesn't map onto the three-line shape
below it, and the same information already reads off each row's own
rank number, x-weight pill, position pill, and coloured pts pill
without the column labels. Tablet (768px) is well above this
breakpoint (its two pick columns land around 185px each unmodified)
and renders the original 5-column row untouched.
The weight and pts pills need their own padding restored here, not
"unchanged" from the base rule above: their 68px/58px desktop width
came entirely from the old fixed grid TRACK stretching them (the pill
rules themselves only ever set padding: 2px 0, no horizontal padding
of their own), and grid-template-columns: auto auto 1fr auto sizes the
`auto` weight/pts tracks to each pill's own max-content width instead
-- with zero horizontal padding, that's just the glyph's ("x1.00",
"+") own width, collapsing both pills to ~12px lozenges. padding: 2px
10px below is what gives them back a pill-shaped hit area now that no
fixed track is doing that job. */
@media (max-width: 600px) {
.fyf-stage__weight-header { display: none; }
.fyf-stage__weight-row {
grid-template-columns: auto auto 1fr auto;
grid-template-areas:
"rank weight . pts"
"you you you you"
"mkt mkt mkt mkt";
}
.fyf-stage__weight-rank { grid-area: rank; }
.fyf-stage__weight-pill { grid-area: weight; padding: 2px 10px; }
.fyf-stage__weight-pts { grid-area: pts; padding: 2px 10px; }
.fyf-stage__weight-player { grid-area: you; }
/* --mkt is an explicit modifier on the market's-pick span in the ERB
(_scoring_stage.html.erb), not an `+ .fyf-stage__weight-player`
adjacent-sibling match against the class alone -- a sibling
combinator only counts "comes right after another one of these",
which happens to be true for today's fixed two-pick row but would
silently swallow a third pick into this same area if one were ever
added. The modifier carries the same specificity as the base rule
above, so source order (this rule after it) is what lets `--mkt`
override `you` for the one span that has both classes. */
.fyf-stage__weight-player--mkt { grid-area: mkt; }
}
.fyf-stage__weight-footer {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 4px 14px;
padding: 8px 14px;
border-top: var(--stroke-chip) dashed var(--fyf-charcoal-30);
background: var(--fyf-cream-tint);
font-family: var(--font-subhead);
font-weight: 700;
font-size: 10px;
letter-spacing: var(--tracking-label);
text-transform: uppercase;
color: var(--fyf-charcoal-60);
animation: fyf-rise .35s var(--ease-snap) .8s both;
}
.fyf-stage__nowrap { white-space: nowrap; }
/* Beat 3: the running total */
.fyf-stage__total-panel {
width: min(460px, 94%);
display: grid;
gap: 7px;
background: var(--fyf-white);
background-image: var(--texture-paper);
border: var(--stroke-sticker) solid var(--fyf-charcoal);
border-radius: var(--radius-md);
box-shadow: var(--shadow-hard-sm);
padding: 16px 20px 18px;
}
.fyf-stage__total-row { display: grid; grid-template-columns: 48px 1fr auto; align-items: center; gap: 12px; }
.fyf-stage__total-row--1 { animation: fyf-rise .35s var(--ease-snap) .05s both; }
.fyf-stage__total-row--2 { animation: fyf-rise .35s var(--ease-snap) .25s both; }
.fyf-stage__total-row--3 { animation: fyf-rise .35s var(--ease-snap) .45s both; }
.fyf-stage__total-row--last { animation: fyf-rise .35s var(--ease-snap) .75s both; }
.fyf-stage__total-rank { font-family: var(--font-subhead); font-weight: 700; font-size: 14px; }
.fyf-stage__total-leader { border-bottom: 2px dotted var(--fyf-charcoal-30); }
.fyf-stage__total-pill {
font-family: var(--font-subhead);
font-weight: 700;
font-size: 12px;
width: 64px;
text-align: center;
border: var(--stroke-chip) solid var(--fyf-charcoal);
border-radius: var(--radius-pill);
padding: 2px 0;
}
.fyf-stage__total-pill--gain { color: var(--fyf-cream); background: var(--fyf-green); }
.fyf-stage__total-pill--loss { color: var(--fyf-cream); background: var(--fyf-red); }
.fyf-stage__total-pill--zero { background: var(--fyf-cream-tint); }
.fyf-stage__total-gap {
font-family: var(--font-subhead);
font-weight: 700;
font-size: 14px;
color: var(--fyf-charcoal-60);
padding-left: 14px;
line-height: .9;
animation: fyf-rise .35s var(--ease-snap) .6s both;
}
.fyf-stage__total-sum {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
flex-wrap: wrap;
border-top: 2px dashed var(--fyf-charcoal-30);
margin-top: 5px;
padding-top: 14px;
animation: fyf-pop .5s var(--ease-pop) 1.1s both;
}
.fyf-stage__total-label {
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-stage__total-badge {
background: var(--fyf-yellow);
border: var(--stroke-sticker) solid var(--fyf-charcoal);
border-radius: var(--radius-md);
box-shadow: var(--shadow-hard-sm);
padding: 10px 22px;
font-family: var(--font-header);
font-weight: var(--weight-display);
font-size: clamp(22px, 2.2vw, 30px);
line-height: 1;
}
.fyf-stage__legend {
display: flex;
align-items: center;
gap: 12px;
flex-wrap: wrap;
justify-content: center;
font-family: var(--font-subhead);
font-weight: 700;
font-size: 11px;
letter-spacing: var(--tracking-label);
text-transform: uppercase;
animation: fyf-rise .45s var(--ease-snap) 1.9s both;
}
.fyf-stage__legend-chip { border: var(--stroke-chip) solid var(--fyf-charcoal); border-radius: var(--radius-pill); padding: 5px 14px; }
.fyf-stage__legend-chip--loss { color: var(--fyf-cream); background: var(--fyf-red); }
.fyf-stage__legend-chip--win { color: var(--fyf-cream); background: var(--fyf-green); }
.fyf-stage__legend-zero {
width: 32px;
height: 32px;
border: var(--stroke-chip) solid var(--fyf-charcoal);
border-radius: 999px;
display: flex;
align-items: center;
justify-content: center;
font-size: 12px;
}
/* Bottom control bar -- normal flow, not `position: absolute; bottom: 0`
overlaying the beat above it as it used to: as .fyf-stage's last child
(.fyf-stage is now `display: flex; flex-direction: column` above), it
simply follows whichever beat pane is in flow above it, so it can never
be overlapped by (or clip) taller beat content the way the old overlay
could. margin-top: auto is what keeps it bottom-flush rather than just
coincidentally near the bottom: the bar's own rendered height (~53.5px:
2px border-top + 11px*2 padding + its tallest inline child) doesn't
fill the beat's 60px reserve on its own, so the auto margin absorbs
whatever's left of .fyf-stage's 520px floor and pins the bar to the
edge -- and once a beat grows past that floor, the margin has nothing
left to absorb and the bar simply sits right after it, still at the
true bottom of the (now taller) box. Dot 0 starts filled (the pink
modifier below); Task 4's controller moves the fill as it moves the
beats. */
.fyf-stage__bar {
display: flex;
align-items: center;
justify-content: space-between;
gap: 14px;
flex-wrap: wrap;
margin-top: auto;
padding: 11px 18px;
border-top: var(--stroke-chip) solid var(--fyf-charcoal);
background: var(--fyf-white);
background-image: var(--texture-paper);
}
.fyf-stage__caption {
font-family: var(--font-subhead);
font-weight: 700;
font-size: clamp(13px, 1.3vw, 15px);
letter-spacing: .02em;
}
.fyf-stage__controls { display: flex; align-items: center; gap: 8px; }
.fyf-stage__dot {
width: 12px;
height: 12px;
border-radius: 999px;
border: var(--stroke-chip) solid var(--fyf-charcoal);
background: var(--fyf-white);
cursor: pointer;
padding: 0;
}
.fyf-stage__dot--active { background: var(--fyf-pink); }
.fyf-stage__bar-btn {
font-family: var(--font-subhead);
font-weight: 700;
font-size: 10px;
letter-spacing: var(--tracking-label);
text-transform: uppercase;
border: var(--stroke-chip) solid var(--fyf-charcoal);
border-radius: var(--radius-pill);
background: var(--fyf-white);
padding: 5px 12px;
cursor: pointer;
}
.fyf-stage__bar-btn--toggle { margin-left: 6px; }
/* ── Scoring stage keyframes + play state ────────────────────────
Renamed fyf-prefixed-kebab from the mockup's fyfSlideL/fyfSlideR/fyfPop/
fyfRise/fyfBarYou/fyfBarMkt. Task 4's controller toggles [data-paused] on
the stage root (also carrying .fyf-stage, which is what satisfies
design_tokens_spec's selector-scoping check below -- a bare
[data-fyf-stage][data-paused] selector would not). Pausing snaps every
running animation to its end state (duration/delay to ~0, but
play-state forced running rather than paused) rather than literally
freezing mid-motion, so "Pause" reads as "skip to settled", not a stutter
-- and the reduced-motion query below does the same unconditionally. */
@keyframes fyf-slide-l {
from { transform: translateX(-70px); opacity: 0; }
to { transform: translateX(0); opacity: 1; }
}
@keyframes fyf-slide-r {
from { transform: translateX(70px); opacity: 0; }
to { transform: translateX(0); opacity: 1; }
}
@keyframes fyf-pop {
from { transform: scale(0); }
to { transform: scale(1); }
}
@keyframes fyf-rise {
from { opacity: 0; transform: translateY(14px); }
to { opacity: 1; transform: translateY(0); }
}
@keyframes fyf-bar-you { from { width: 0; } to { width: 78%; } }
@keyframes fyf-bar-mkt { from { width: 0; } to { width: 52%; } }
@media (prefers-reduced-motion: reduce) {
.fyf-stage * { animation-duration: .01s !important; animation-delay: 0s !important; }
}
.fyf-stage[data-paused] * {
animation-duration: .01s !important;
animation-delay: 0s !important;
animation-play-state: running !important;
}
/* ── Rules cards ─────────────────────────────────────────────── */
.fyf-rules-cards {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 22px;
align-items: stretch;
margin-top: 44px;
}
/* display: grid (not just align-content: start, which is inert without a
grid/flex container) is what turns the card's own gap into the vertical
rhythm between eyebrow/title/body -- so each child's own margin can stay
at (or near) 0, matching the handoff. The Deadline (cream) card uses a
tighter 8px gap than the other two, which use 10px -- see the override
below. */
.fyf-rules-card { display: grid; gap: 10px; padding: 28px; align-content: start; }
.fyf-rules-card.fyf-card--cream { gap: 8px; }
/* .fyf-rules-card__title is an h3 -- same h-tag trap as .fyf-step-card__title
above: fyf_foundation.css's `.fyf h1,h2,h3,h4{...margin:0}` combined
selector sits at (0,1,1) on font-family/weight/line-height/letter-spacing/
margin, and a bare single class loses on all of them. Qualified with the
.fyf-rules-cards ancestor to reach (0,2,0), same fix as everywhere else in
this file. margin: 0 because the card's own grid gap (above) supplies the
space above the title now. */
.fyf-rules-cards .fyf-rules-card__title {
font-family: var(--font-header);
font-weight: var(--weight-display);
font-size: 30px;
line-height: 1.03;
letter-spacing: var(--tracking-display);
margin: 0;
}
/* .fyf-rules-card__body and __date are s -- same margin trap. Full-
opacity cream, not an alpha: on the Win card's solid green fill,
rgba(250,220,194,.88) measures 4.01:1 -- short of AA at 16px. Full-opacity
cream clears 4.70:1, same reasoning already applied to the hero copy. It
also reads better on the Enter card's transparent/charcoal fill, so one
value serves both. margin: 0 -- the card's grid gap supplies the space
above the body on the Enter/Win cards; the Deadline card's --dark variant
below adds its own 6px on top of the (tighter, 8px) card gap. */
.fyf-rules-cards .fyf-rules-card__body {
margin: 0;
font-size: 16px;
line-height: 1.5;
color: var(--fyf-cream);
}
/* The modifier needs the SAME ancestor qualification as the base rule above
-- a bare `.fyf-rules-card__body--dark` is (0,1,0), which loses outright
to the base rule's (0,2,0) regardless of source order, so the Deadline
card's cream fallback was winning over its own charcoal override: cream
text on the cream card fill measured ~1:1, invisible. This is the exact
trap the ancestor-qualification comments throughout this file warn about,
reproduced by forgetting to apply it to a modifier alongside its base. */
.fyf-rules-cards .fyf-rules-card__body--dark { color: var(--fyf-charcoal-80); margin-top: 6px; }
.fyf-rules-cards .fyf-rules-card__date {
margin: 0;
font-family: var(--font-header);
font-weight: var(--weight-display);
font-size: clamp(32px, 3.2vw, 42px);
line-height: 1;
letter-spacing: var(--tracking-display);
color: var(--fyf-charcoal);
}
/* The date and time halves are two s, not a
-split string, so a
spec can assert on each in isolation. display: block stacks them into the
two-line reading the design draws ("September 9, 2026" / "3:00 PM ET")
without a foundation trap -- fyf_foundation.css has no rule for . */
.fyf-rules-card__date-day,
.fyf-rules-card__date-time { display: block; }
.fyf-rules-footer {
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
gap: 18px 32px;
margin-top: 26px;
padding-top: 22px;
border-top: var(--stroke-chip) solid rgba(250, 220, 194, 0.28);
}
/* .fyf-rules-footer__text is a -- same margin trap. */
.fyf-rules-footer .fyf-rules-footer__text {
margin: 0;
max-width: 52ch;
font-size: 16px;
line-height: 1.5;
color: rgba(250, 220, 194, 0.85);
}
.fyf-rules-footer__text strong { color: var(--fyf-cream); }
/* ── Disclosure accordions ───────────────────────────────────── */
.fyf-section--disclosures { padding-top: 56px; padding-bottom: 56px; }
.fyf-section--disclosures .fyf-section__inner { display: grid; gap: 16px; }
.fyf-disclosure {
background-color: var(--fyf-white);
background-image: var(--texture-paper);
border: var(--stroke-sticker) solid var(--fyf-charcoal);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-hard-sm);
overflow: hidden;
}
.fyf-disclosure__summary {
cursor: pointer;
list-style: none;
display: flex;
align-items: center;
gap: 12px;
padding: 16px 22px;
font-family: var(--font-subhead);
font-weight: 700;
font-size: 13px;
letter-spacing: var(--tracking-label);
text-transform: uppercase;
}
.fyf-disclosure__summary::-webkit-details-marker { display: none; }
/* .fyf-disclosure has overflow: hidden, and .fyf-disclosure__summary is its
first child -- its border box IS the clip boundary, so the UA's default
focus outline (drawn outside the border box) was clipped away entirely,
leaving both accordions keyboard-focusable with no visible ring. Negative
outline-offset draws the ring INSIDE the clipped box instead of outside it. */
.fyf-disclosure__summary:focus-visible {
outline: var(--stroke-sticker) solid var(--fyf-charcoal);
outline-offset: -3px;
}
.fyf-disclosure__glyph { color: var(--fyf-pink-deep); }
.fyf-disclosure[open] .fyf-disclosure__glyph::before { content: "–"; font-size: 13px; }
.fyf-disclosure[open] .fyf-disclosure__glyph { font-size: 0; }
.fyf-disclosure__panel {
border-top: var(--stroke-chip) solid var(--fyf-charcoal-12);
padding: 16px 22px;
font-size: 14px;
line-height: 1.55;
color: var(--fyf-charcoal-80);
}
/* ── CTA band ────────────────────────────────────────────────── */
.fyf-cta-band {
background: var(--fyf-yellow);
padding: clamp(56px, 6vw, 84px) clamp(24px, 4.4vw, 56px);
border-bottom: var(--stroke-sticker) solid var(--fyf-charcoal);
text-align: center;
}
/* .fyf-cta-band__subhead and __body are
s -- same margin trap as the
rules cards above. */
.fyf-cta-band .fyf-cta-band__subhead {
margin: 0;
font-family: var(--font-subhead);
font-weight: 700;
font-size: 15px;
letter-spacing: var(--tracking-label);
text-transform: uppercase;
}
.fyf-cta-band .fyf-section__headline { margin-top: 22px; }
.fyf-cta-band .fyf-cta-band__body {
margin: 14px auto 30px;
max-width: 44ch;
font-size: 17px;
}
/* ── CTA (shared by the hero panel and the CTA band) ─────────────
No margin of its own -- see the comment atop _cta.html.erb. The old
`
` root put a top margin on this half of the hero's
actions row that the sibling "How it works" button never had, so under
align-items: flex-start the two buttons never lined up. Each caller now
supplies its own spacing instead (.fyf-hero__actions's gap; the CTA
band's .fyf-cta-band__body bottom margin). */
.fyf-cta {
display: inline-flex;
flex-direction: column;
align-items: flex-start;
gap: 10px;
}
/* form_class: (see _cta.html.erb) puts this on the