/* ---- The share sheet and the public entry page -------------------------
   .fyf-moment* (app/views/contest_entries/submitted.html.erb) implements
   the entry-page artboard ("fRank Open — entry page rework"): a full-bleed
   turf hero carrying the headline, the card stage overlapping it on the
   left, and one sheet of controls on the right — share actions, the format
   segment, the card-back switch, and the "what prints" accordion.
   .fyf-entry-page* (app/views/public/contest_entries/show.html.erb) keeps
   its baseline typesetting.

   Every <p>-rendered class below is qualified with the page's own root
   class as an ancestor (two classes, not a bare one) for the reason
   documented at the top of entrant_card.css: fyf_foundation.css's
   `.fyf p{margin:0 0 1em}` outranks a bare class regardless of source
   order. Two classes ((0,2,0)) wins without !important. */

.fyf-moment {
  display: block;
  /* The page's one measure and its one gutter. Both columns, the headline and
     the meta band are laid out against these; nothing on this page sets its
     own horizontal measure. */
  --moment-measure: 1080px;
  --moment-pad: clamp(20px, 3.2vw, 40px);
}
.fyf-moment turbo-frame { display: block; }

/* ---- Hero -------------------------------------------------------------- */
.fyf-moment__hero {
  /* min-height, not height: the copy block grows as the title clamp opens up
     and a fixed box clipped it. The hero now sizes to its own copy plus the
     landing zone below (see .fyf-moment__hero-ct); 420px is only a floor. */
  position: relative; min-height: 320px; overflow: hidden;
  background: var(--fyf-turf-deep);
}
.fyf-moment__hero-turf {
  position: absolute; inset: 0;
  background: url("/assets/fyf/turf-plate-wide-38d35ff5.png") center / cover;
  filter: var(--turf-crisp);
}
.fyf-moment__hero-scrim {
  position: absolute; inset: 0;
  /* Two layers. The base darkens the plate so the cream headline holds
     against grass -- but it now RELEASES over the last third instead of
     closing on charcoal, because the second layer fades the bottom 128px
     into the page's own ground and cream composited over charcoal-purple is
     a muddy mauve. Cream over green reads as light coming off the field.
     88px is the depth the grid below overlaps by, so the dissolve happens
     behind the two panels and only shows in the gutters between them; a hard
     edge here used to be a 3px rule that they covered everywhere except
     those gutters, which shipped as two stray dark stubs -- see the note on
     .fyf-moment__hero. */
  background:
    linear-gradient(to top, var(--fyf-cream) 0, rgba(250, 220, 194, 0) 88px)
      bottom / 100% 88px no-repeat,
    linear-gradient(180deg,
      rgba(38, 66, 26, .5) 0%,
      rgba(38, 66, 26, .82) 58%,
      rgba(38, 66, 26, .46) 84%,
      rgba(38, 66, 26, .16) 100%);
}
.fyf-moment__hero-ct {
  position: relative;
  max-width: var(--moment-measure); margin-inline: auto;
  /* The bottom padding IS the landing zone the grid below overlaps into.
     Because the hero sizes to its content, clearance between the last line of
     the subhead and the top of the stage is padding-bottom minus that overlap
     -- a constant 64px at every width, rather than the 17px the fixed 420px
     hero left at 1440 (the card landed on the subhead). */
  padding: var(--space-10) var(--moment-pad) calc(var(--space-20) + var(--space-16));
}
.fyf-moment .fyf-moment__hero-eyebrow {
  display: flex; align-items: baseline; justify-content: space-between;
  flex-wrap: wrap; gap: var(--space-2) var(--space-6); margin: 0;
  /* The sideline. One hairline of chalk, the only rule on the hero. */
  padding-bottom: var(--space-4);
  border-bottom: 2px solid rgba(217, 213, 203, .34);
  font-family: var(--font-subhead); font-weight: 700;
  font-size: clamp(11px, 1.1vw, 13px);
  letter-spacing: .2em; text-transform: uppercase; color: var(--fyf-yellow);
  text-shadow: 0 2px 6px rgba(0, 0, 0, .55);
}
/* The serial is the entrant's, not the contest's -- cream, not the contest's
   yellow, and it holds the right end of the band on its own. */
.fyf-moment__hero-franker { color: var(--fyf-cream); font-variant-numeric: tabular-nums; }
/* The prose sets a tighter measure than the band above it -- the band is a
   two-ended row and wants the full width; a headline and a subhead do not. */
.fyf-moment__hero-copy { max-width: 62ch; margin-top: var(--space-6); }
.fyf-moment .fyf-moment__hero-title {
  margin: 10px 0 0;
  font-family: var(--font-header); font-weight: var(--weight-display);
  font-size: clamp(40px, 4.8vw, 68px); line-height: .94;
  letter-spacing: var(--tracking-display); color: var(--fyf-cream);
}
.fyf-moment .fyf-moment__hero-sub {
  margin: var(--space-5) 0 0;
  font-family: var(--font-header); font-size: clamp(16px, 1.5vw, 21px); line-height: 1.3;
  color: var(--fyf-cream); max-width: 40ch;
}

/* ---- The overlapping grid: stage left, sheet right --------------------- */
.fyf-moment__grid {
  position: relative;
  display: grid; grid-template-columns: minmax(0, 1fr);
  gap: var(--space-12); align-items: stretch;
  max-width: var(--moment-measure); margin-inline: auto;
  padding: 0 var(--moment-pad) var(--space-16);
  /* Paired with the hero's landing zone above -- see the note there. Still a
     real overlap, and it still bites into turf. */
  margin-top: calc(-1 * var(--space-20));
}

/* The mount. Stacked, it sits on one module and centres, rather than
   stretching to the full page measure. */
.fyf-moment__stagecol {
  width: 100%; max-width: 520px; margin-inline: auto;
  /* Bottom-weighted, the way a mount is actually cut: the card sits near the
     top with the mat falling away below it. Centred, the slack split evenly
     and the first 180px of the mount above the fold was empty board before
     you reached the thing it holds. */
  display: flex; flex-direction: column; justify-content: flex-start; align-items: center;
  gap: var(--space-4);
  padding: var(--space-6) var(--space-5) var(--space-5);
  background: var(--fyf-charcoal);
  border: 3px solid var(--fyf-charcoal);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-hard-lg);
}
/* Stacked, the pair gets the whole column rather than the single-card module. */
.fyf-moment__grid--pair .fyf-moment__stagecol { max-width: none; }

@media (min-width: 1100px) {
  /* The stage column YIELDS. Pinned at a flat 560px it squeezed the sheet to
     387px between 1100 and ~1240, which clipped two of the four export
     formats out of the segment entirely. Above ~1240 the maths is unchanged:
     the stage still takes its full 560 and the sheet takes the rest. */
  /* 440 is the widest the stage can be and still keep the card SHORTER than
     a 760px laptop viewport can show (440/750 * 1050 = 616), which is what
     decides whether the card and the controls beside it are one glance or
     two. The sheet takes the rest of the 1080 measure -- ~520, comfortably
     over the ~494 its format row needs to stay on one line. */
  .fyf-moment__grid {
    grid-template-columns: minmax(300px, 440px) minmax(470px, 1fr);
    gap: var(--space-10);
  }
  /* A pair needs roughly twice the stage. The measure opens with it rather
     than the sheet giving way -- the sheet has a floor (~494px, the width
     its format row needs to stay on one line) and squeezing it past that
     just moves the problem. */
  .fyf-moment__grid--pair {
    --moment-measure: 1340px;
    grid-template-columns: minmax(300px, 740px) minmax(470px, 1fr);
  }
  .fyf-moment__stagecol { max-width: none; margin-inline: 0; }
}

/* The measurement box card_scale_controller.js reads -- the artboard's
   560x780 stage box, floored by what the window can actually show once the
   sticky header, the sticky offset and the caption are paid for. The stage
   inside carries the hard shadow (and, on the chrome canvases, its own dark
   field), so this box stays invisible. */
/* clamp, not min: the middle term is the only thing sizing the card on a
   short window, and with no floor under it a 400px-tall window (or a browser
   reporting a stale svh mid-layout) solved to a ~110px thumbnail rather than
   a card. 420px is the floor -- below that the card scrolls, which is the
   right answer, instead of shrinking out of legibility. */
.fyf-moment .fyf-card-frame { width: 100%; max-height: clamp(420px, calc(100svh - 190px), 780px); }
/* entrant_card.css centres the card in this box, which is what the mount
   wants too -- so nothing to override here any more. The flush-left rule that
   used to live at this breakpoint existed to line the card up with the page's
   own left edge, back when it sat directly on the page ground; on a mount it
   centres, like anything placed on a mat. */
.fyf-moment .fyf-sportscard-stage { box-shadow: var(--shadow-hard-lg); }
/* The stage carries an 8px hard shadow, so 20px of margin read as 12. */
.fyf-moment .fyf-moment__stagecap {
  margin: 0;
  font-family: var(--font-body); font-size: 13px; line-height: 1.5;
  color: rgba(250, 220, 194, .62);
}

/* ---- The sheet --------------------------------------------------------- */
.fyf-sheet {
  background: var(--fyf-cream-tint);
  border: 3px solid var(--fyf-charcoal);
  box-shadow: var(--shadow-hard-lg);
  padding: var(--space-5);
  width: 100%; max-width: 520px; margin-inline: auto;
}
@media (min-width: 700px) { .fyf-sheet { padding: var(--space-6); } }
/* No wider padding step above this. The sheet's own column is capped by the
   grid now, so there is no runaway width left for padding to absorb. */
@media (min-width: 1100px) { .fyf-sheet { max-width: none; margin-inline: 0; } }
.fyf-sheet .fyf-sheet__lab,
.fyf-moment .fyf-sheet__lab {
  margin: 0;
  font-family: var(--font-subhead); font-weight: 700; font-size: 12px;
  letter-spacing: .18em; text-transform: uppercase;
  /* Full-strength ink. A section label ("Share it") and a row label
     ("Format") were 13px/charcoal-80 and 11px/charcoal-60 -- two levels of
     the outline separated by two points and one tint step, which is not a
     level break. Value carries it now, and size can stay near-equal. */
  color: var(--fyf-charcoal);
  white-space: nowrap;
}

/* Download -- the artboard's primary button verbatim. */
.fyf-sheet__download {
  margin-top: var(--space-4);
  white-space: nowrap; display: inline-flex; align-items: center; justify-content: center;
  width: 100%; box-sizing: border-box;
  font-family: var(--font-subhead); font-weight: 700; font-size: 14px;
  letter-spacing: .14em; text-transform: uppercase; line-height: 1;
  padding: 15px 24px;
  background: var(--fyf-orange); color: var(--fyf-charcoal);
  border: 3px solid var(--fyf-charcoal); border-radius: var(--radius-pill);
  /* 3px, not 5. The sheet itself casts 8 and the card casts 8; a button that
     cast 5 sat in the same plane as its own container. */
  box-shadow: var(--shadow-hard-sm);
  text-decoration: none;
}
.fyf-sheet a.fyf-sheet__download,
.fyf-sheet a.fyf-sheet__download:focus-visible { color: var(--fyf-charcoal); text-decoration: none; }
.fyf-sheet a.fyf-sheet__download:hover { background: var(--fyf-orange-deep); color: var(--fyf-charcoal); }
.fyf-moment .fyf-sheet__back a { text-decoration: none; }
.fyf-moment .fyf-sheet__back a:hover { text-decoration: underline; }

/* The quick row: copy / share / challenge. */
.fyf-qrow {
  display: flex; margin-top: var(--space-3);
  border: 3px solid var(--fyf-charcoal); border-radius: var(--radius-pill);
  background: var(--fyf-white); overflow: hidden;
}
.fyf-qrow > button {
  flex: 1; text-align: center; cursor: pointer;
  background: none; border: none;
  font-family: var(--font-subhead); font-weight: 700; font-size: 11px;
  letter-spacing: .14em; text-transform: uppercase;
  padding: 11px 8px 12px;
  border-right: 3px solid var(--fyf-charcoal);
  color: var(--fyf-charcoal-80);
  transition: background var(--dur-fast), color var(--dur-fast);
}
.fyf-qrow > button:last-child { border-right: none; }
.fyf-qrow > button:hover { background: var(--fyf-charcoal); color: var(--fyf-cream); }

.fyf-sheet .fyf-sheet__note,
.fyf-moment .fyf-sheet__note {
  margin: var(--space-3) 0 0;
  font-family: var(--font-subhead); font-weight: 700; font-size: 11px;
  letter-spacing: .1em; text-transform: uppercase; color: var(--fyf-charcoal-60);
  line-height: 1.7; font-variant-numeric: tabular-nums;
}
.fyf-moment .fyf-sheet__note--foot {
  margin-top: var(--space-6);
  font-family: var(--font-body); font-size: 13px; font-weight: 400;
  letter-spacing: 0; text-transform: none; line-height: 1.55;
  max-width: 52ch;
}

/* The sheet's three levels of separation. They were all within 12px of each
   other -- 12 inside a cluster, 16 between clusters, 24 across a rule -- so
   proximity carried no grouping at all and the panel read as one long stack.
   Now: 12 inside a cluster, 20 from a section label to its content, 40 across
   a rule. */
.fyf-sheet__rule { height: 2px; background: var(--fyf-charcoal-12); border: 0; margin: var(--space-8) 0; }

/* Wraps. The widest cell ("Square") needs ~74px of its own and the three
   cells are equal (flex: 1), so the segment wants ~240px to keep its labels
   on one line -- which every sheet from 1100 up can spare beside a 104px row
   label, so above that breakpoint Format keeps its label inline. Below it
   the row wraps rather than overflowing the sheet, which is what used to
   clip options off it entirely. The flex-basis below is what makes "stays
   inline" mean "has that 240px". */
.fyf-sheet__frow { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3) var(--space-4); }
.fyf-sheet__frow--switch { margin-top: var(--space-5); }
.fyf-sheet__tlab {
  font-family: var(--font-subhead); font-weight: 700; font-size: 11px;
  letter-spacing: .18em; text-transform: uppercase; color: var(--fyf-charcoal-60);
  width: 104px; flex: 0 0 auto;
}

/* ---- Format segment ---------------------------------------------------- */
.fyf-seg {
  display: flex; flex: 1 1 240px; min-width: 0;
  border: 3px solid var(--fyf-charcoal); border-radius: var(--radius-pill);
  background: var(--fyf-cream-tint); overflow: hidden;
}
.fyf-seg__opt {
  flex: 1; display: grid; place-items: center; text-align: center;
  font-family: var(--font-subhead); font-weight: 700; font-size: 12px;
  letter-spacing: .1em; text-transform: uppercase;
  padding: 11px 6px 12px;
  border-right: 3px solid var(--fyf-charcoal);
  color: var(--fyf-charcoal); text-decoration: none;
  transition: background var(--dur-fast), color var(--dur-fast);
}
.fyf-seg__opt:last-child { border-right: none; }
.fyf-seg a.fyf-seg__opt { color: var(--fyf-charcoal); text-decoration: none; }
.fyf-seg a.fyf-seg__opt:hover { background: var(--fyf-cream-deep); color: var(--fyf-charcoal); }
.fyf-seg__opt--on { background: var(--fyf-charcoal); color: var(--fyf-cream); }
.fyf-seg__opt--off { color: var(--fyf-charcoal-30); }

/* ---- The card-back switch ---------------------------------------------- */
.fyf-sw {
  width: 56px; height: 30px; flex: 0 0 auto; display: block; position: relative;
  border: 3px solid var(--fyf-charcoal); border-radius: var(--radius-pill);
  background: var(--fyf-cream-tint);
  transition: background 140ms;
}
.fyf-sw i {
  position: absolute; top: 2px; left: 2px; width: 20px; height: 20px;
  border-radius: 50%; background: var(--fyf-charcoal);
  transition: transform 140ms;
}
.fyf-sw[aria-checked="true"] { background: var(--fyf-pink); }
.fyf-sw[aria-checked="true"] i { transform: translateX(26px); }
.fyf-sw[aria-disabled="true"] { border-color: var(--fyf-charcoal-30); }
.fyf-sw[aria-disabled="true"] i { background: var(--fyf-charcoal-30); }
.fyf-moment .fyf-sheet__swnote {
  font-family: var(--font-body); font-size: 13px; line-height: 1.4;
  color: var(--fyf-charcoal-60); min-width: 0;
}

/* ---- "What prints" + recut --------------------------------------------- */
/* Same 20px label-to-content bond as "Share it" above the download button. */
.fyf-sheet__whatrow {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-5);
  margin-bottom: var(--space-4);
}
.fyf-sheet__ghostform { display: contents; }
.fyf-sheet__ghost {
  cursor: pointer; background: none; border: none; padding: 0;
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-subhead); font-weight: 700; font-size: 12px;
  letter-spacing: .14em; text-transform: uppercase; color: var(--fyf-pink-deep);
}
.fyf-sheet__ghost:hover { color: var(--fyf-charcoal); }

/* ---- The accordion rows ------------------------------------------------- */
.fyf-rows {
  border: 3px solid var(--fyf-charcoal); border-radius: 16px;
  background: var(--fyf-white); overflow: hidden;
}
/* Same 20px label-to-content bond the "Share it" and "What prints" groups
   use, for the group that carries its own section label above it. */
.fyf-rows--after-lab { margin-top: var(--space-5); }
.fyf-trow + .fyf-trow { border-top: 2px solid var(--fyf-charcoal-12); }
.fyf-trow--open { background: var(--fyf-cream); }
.fyf-trow__head {
  display: flex; align-items: center; gap: var(--space-4); width: 100%;
  padding: var(--space-4) var(--space-5); cursor: pointer;
  background: none; border: none; text-align: left;
  transition: background var(--dur-fast);
}
.fyf-trow__head:hover { background: var(--fyf-cream); }
.fyf-trow__lab {
  font-family: var(--font-subhead); font-weight: 700; font-size: 11px;
  letter-spacing: .18em; text-transform: uppercase; color: var(--fyf-charcoal-60);
  width: 104px; flex: 0 0 auto;
}
.fyf-trow__val {
  font-family: var(--font-header); font-size: 19px; line-height: 1.1;
  font-variant-numeric: tabular-nums; white-space: nowrap;
  margin-right: auto; color: var(--fyf-charcoal);
  overflow: hidden; text-overflow: ellipsis;
}
.fyf-trow__arrow {
  display: block; flex: 0 0 auto; width: 9px; height: 9px;
  border-right: 3px solid var(--fyf-charcoal-30);
  border-bottom: 3px solid var(--fyf-charcoal-30);
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform 140ms;
}
.fyf-trow__head:hover .fyf-trow__arrow { border-color: var(--fyf-charcoal); }
.fyf-trow--open .fyf-trow__arrow {
  transform: rotate(-135deg) translate(-2px, -2px);
  border-color: var(--fyf-pink-deep);
}
/* 12px of side padding + the option's own 12px lines the option text up with
   the head's label above it. */
.fyf-trow__opts { display: none; padding: var(--space-1) var(--space-3) var(--space-4); }
/* minmax(0, 1fr), not the implicit `auto` track: an auto track sizes to the
   row's max-content, and an option row is a nowrap flex line, so on a narrow
   sheet the track grew past the panel and `overflow: hidden` on .fyf-rows
   sliced the gap chip off the rows. A 1fr track is capped at the container,
   which lets .fyf-opt__ev do the ellipsising it was already set up for. */
.fyf-trow--open .fyf-trow__opts { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-1); }
/* button_to wraps each option in a form -- flatten it out of the grid. */
.fyf-trow__opts form.button_to { display: contents; }
/* button_to renders a <form> around its <button>; `display: contents` above
   already flattens the form into the options grid, and the button carries
   .fyf-trow__more so the two switches at the foot of a row (open the full
   list, write another caption) read as one kind of control. */
.fyf-moment .fyf-trow__more { width: 100%; cursor: pointer; background: transparent; }
/* The shortlist/full-list switch inside a call picker. Sits with the options
   rather than in the row head: it changes what the list below shows, and the
   head is a toggle for the row itself. */
.fyf-moment .fyf-trow__more {
  display: block; margin-top: var(--space-2); padding: var(--space-2) var(--space-3);
  font-family: var(--font-subhead); font-weight: 700; font-size: 13px;
  letter-spacing: .06em; text-transform: uppercase;
  color: var(--fyf-charcoal); text-decoration: none;
  border: 2px dashed var(--fyf-charcoal-30); border-radius: var(--radius-sm);
  text-align: center;
}
.fyf-moment .fyf-trow__more:hover {
  background: var(--fyf-white); border-color: var(--fyf-charcoal); border-style: solid;
}
.fyf-trow__more-of { font-weight: 400; letter-spacing: .02em; text-transform: none; color: var(--fyf-charcoal-60); }
/* The full list is the WHOLE board's calls off consensus -- north of a
   hundred rows on a deep board -- so it scrolls inside the row instead of
   turning the sheet into an endless page. The shortlist is five rows and is
   deliberately left uncapped. */
.fyf-trow--all.fyf-trow--open .fyf-trow__opts {
  max-height: 46vh; overflow-y: auto; overscroll-behavior: contain;
}

/* A control the sheet had to overrule, explained where it was overruled.
   Body type, not the note's own uppercase subhead: this is a SENTENCE, and
   the meta line the base style was written for is three numbers and a URL.
   Set in caps at .1em tracking it read as shouting and took three lines to
   say what it says in two. Same escape .fyf-sheet__note--foot already makes
   for the footnote under the pickers. */
.fyf-moment .fyf-sheet__note--coerced {
  margin-top: var(--space-2);
  font-family: var(--font-body); font-size: 13px; font-weight: 400;
  letter-spacing: 0; text-transform: none; line-height: 1.55;
  color: var(--fyf-charcoal);
  border-left: 3px solid var(--fyf-pink);
  padding-left: var(--space-3);
  max-width: 52ch;
}

.fyf-moment .fyf-trow__note {
  margin: 0; padding: var(--space-3) var(--space-3) var(--space-1);
  font-family: var(--font-body); font-size: 13px; line-height: 1.5;
  color: var(--fyf-charcoal-60);
}

.fyf-opt {
  display: flex; align-items: center; gap: var(--space-3); width: 100%; min-width: 0;
  /* 11px of padding against a 2px row gap ran the three radio rows together
     as one block. 16 and 4 let each option read as its own choice. */
  padding: var(--space-3) var(--space-3); cursor: pointer;
  background: none; text-align: left;
  border: 2px solid transparent; border-radius: 10px;
  transition: background var(--dur-fast), border-color var(--dur-fast);
}
.fyf-opt:hover { background: var(--fyf-white); border-color: var(--fyf-charcoal-30); }
.fyf-opt[aria-checked="true"] { background: var(--fyf-white); border-color: var(--fyf-charcoal); }
.fyf-opt[disabled] { cursor: not-allowed; }
.fyf-opt[disabled] .fyf-opt__on, .fyf-opt[disabled] .fyf-opt__ev { color: var(--fyf-charcoal-30); }

.fyf-opt__dot {
  width: 18px; height: 18px; border-radius: 50%;
  border: 3px solid var(--fyf-charcoal); background: var(--fyf-white);
  flex: 0 0 auto; display: grid; place-items: center;
}
.fyf-opt[aria-checked="true"] .fyf-opt__dot { background: var(--fyf-pink); }
.fyf-opt[aria-checked="true"] .fyf-opt__dot i {
  width: 6px; height: 6px; border-radius: 50%; background: var(--fyf-charcoal); display: block;
}
.fyf-opt__box {
  width: 18px; height: 18px; border-radius: 3px;
  border: 3px solid var(--fyf-charcoal); background: var(--fyf-white);
  flex: 0 0 auto; display: grid; place-items: center;
}
.fyf-opt[aria-checked="true"] .fyf-opt__box { background: var(--fyf-pink); }
.fyf-opt[aria-checked="true"] .fyf-opt__box i {
  width: 7px; height: 7px; background: var(--fyf-charcoal); display: block;
}
.fyf-opt[disabled] .fyf-opt__box, .fyf-opt[disabled] .fyf-opt__dot {
  border-color: var(--fyf-charcoal-30); background: var(--fyf-charcoal-12);
}
.fyf-opt__on {
  font-family: var(--font-subhead); font-weight: 700; font-size: 13px;
  letter-spacing: .07em; text-transform: uppercase; line-height: 1;
  white-space: nowrap; font-variant-numeric: tabular-nums; flex: 0 0 auto;
  color: var(--fyf-charcoal);
}
.fyf-opt__ev {
  font-family: var(--font-header); font-size: 16px; line-height: 1.15;
  color: var(--fyf-charcoal-80); font-variant-numeric: tabular-nums;
  flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.fyf-opt__chip {
  font-family: var(--font-subhead); font-weight: 700; font-size: 12px;
  letter-spacing: .06em; padding: 3px 9px 4px;
  border: 2px solid var(--fyf-charcoal-30); border-radius: var(--radius-pill);
  color: var(--fyf-charcoal-80); font-variant-numeric: tabular-nums;
  white-space: nowrap; flex: 0 0 auto;
}
.fyf-opt[aria-checked="true"] .fyf-opt__chip {
  background: var(--fyf-pink); border-color: var(--fyf-charcoal); color: var(--fyf-charcoal);
}

/* ---- Keyboard focus ----------------------------------------------------
   fyf_foundation.css defines no :focus-visible at all, so every control on
   this page fell back to the UA ring -- a thin dark outline that is close to
   invisible against a 3px charcoal border on cream, on a screen made almost
   entirely of 3px-charcoal-bordered controls. Pink is the page's own accent
   and is the one colour nothing structural uses.

   Two shapes: an outset ring for controls that stand alone, and an inset one
   for the children of .fyf-qrow / .fyf-seg / .fyf-rows, which all clip
   (overflow: hidden) so their cells can share a rounded outer edge -- an
   outset ring on those is sliced off by the parent. */
/* Written out rather than folded into one :is() -- design_tokens_spec's
   scope guard splits selector lists on commas, so a comma inside :is() reads
   to it as a bare `button` rule leaking app-wide. Three scoped selectors say
   the same thing and stay legible to the guard. */
.fyf-moment a:focus-visible,
.fyf-moment button:focus-visible,
.fyf-moment [role="switch"]:focus-visible {
  outline: 3px solid var(--fyf-pink-deep);
  outline-offset: 3px;
}
.fyf-qrow > button:focus-visible,
.fyf-seg .fyf-seg__opt:focus-visible,
.fyf-trow__head:focus-visible,
.fyf-trow__opts .fyf-opt:focus-visible {
  outline: 3px solid var(--fyf-pink-deep);
  outline-offset: -5px;
}

.fyf-moment .fyf-sheet__back { margin: var(--space-6) 0 0; }
.fyf-moment .fyf-sheet__back a {
  font-family: var(--font-subhead); font-weight: 700; font-size: 13px;
  letter-spacing: .14em; text-transform: uppercase;
}

/* ---- Entry page: the published takes list, the epithet-basis line, the
   state block (standing/alpha, or the locked/entered copy). ------------- */
.fyf-entry-page {
  display: block;
  max-width: var(--container-narrow);
  margin: 0 auto;
  padding: var(--section-y) clamp(24px, 4.4vw, 56px);
}
.fyf-entry-page > * + * { margin-top: var(--space-10); }
.fyf-entry-page .fyf-entry-page__takes h2 {
  margin: 0;
  font-family: var(--font-header); font-weight: var(--weight-display);
  font-size: var(--text-xl); line-height: var(--leading-heading);
  letter-spacing: var(--tracking-display); color: var(--text-body);
}
.fyf-entry-page .fyf-entry-page__takes ul {
  list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2);
}
.fyf-entry-page .fyf-entry-page__takes li {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-4);
}
.fyf-entry-page .fyf-entry-page__take-name { font-family: var(--font-subhead); font-weight: 700; color: var(--text-body); }
.fyf-entry-page .fyf-entry-page__take-ranks { color: var(--fyf-charcoal-80); }
.fyf-entry-page .fyf-entry-page__take-gap { margin-left: .4em; font-variant-numeric: tabular-nums; }
.fyf-entry-page .fyf-entry-page__basis {
  margin: 0; font-family: var(--font-body); font-size: var(--text-sm); color: var(--fyf-charcoal-80);
}
.fyf-entry-page .fyf-entry-page__state { display: flex; flex-direction: column; gap: var(--space-1); }
.fyf-entry-page .fyf-entry-page__standing {
  margin: 0; font-family: var(--font-subhead); font-weight: 700; font-size: var(--text-lg); color: var(--text-body);
}
.fyf-entry-page .fyf-entry-page__alpha,
.fyf-entry-page .fyf-entry-page__state p {
  margin: 0; font-size: var(--text-sm); color: var(--fyf-charcoal-80);
}

/* ---- The review screen ---------------------------------------------------
   .fyf-review* (app/views/contest_entries/confirm.html.erb) implements the
   "fRank Open - Entry Review" artboard: a hero with the deadline pill, the
   board card on the left, one sticky sheet of status / market strip /
   visibility switch on the right.

   Set one notch denser than the artboard throughout (type a size down,
   paddings tightened, numerals and bars shorter): this is a checklist
   screen read once before a click, and at the artboard's scale the sheet
   ran to two viewports. The proportions and the palette are the artboard's.

   Same specificity rule as the blocks above: every <p>, <h1>, <h2> and <a>
   class is qualified with .fyf-review as an ancestor so it outranks
   fyf_foundation.css's `.fyf p`, `.fyf h1`-`.fyf h4` and `.fyf a` rules
   without !important. */

.fyf-review { display: block; }

/* ---- Hero -------------------------------------------------------------- */
.fyf-review__hero { padding: clamp(28px, 3vw, 40px) clamp(20px, 4vw, 48px) 0; }
.fyf-review .fyf-review__back,
.fyf-review .fyf-review__back:visited {
  font-family: var(--font-subhead); font-weight: 700; font-size: 11px;
  letter-spacing: var(--tracking-label); text-transform: uppercase;
  color: var(--fyf-pink-deep); text-decoration: none;
}
.fyf-review .fyf-review__back:hover { color: var(--fyf-charcoal); }
.fyf-review__hero-row {
  display: flex; align-items: flex-end; justify-content: space-between;
  flex-wrap: wrap; gap: 16px 24px; margin: 18px 0 0;
}
.fyf-review .fyf-review__meta {
  margin: 0;
  font-family: var(--font-subhead); font-weight: 700; font-size: 11px;
  letter-spacing: var(--tracking-eyebrow); text-transform: uppercase;
  color: var(--fyf-charcoal-60);
}
.fyf-review .fyf-review__headline {
  margin: 8px 0 0;
  font-family: var(--font-header); font-weight: var(--weight-display);
  font-size: clamp(30px, 3.2vw, 42px); line-height: 1.02;
  letter-spacing: var(--tracking-display);
}
.fyf-review .fyf-review__lede {
  margin: 10px 0 0; max-width: 64ch;
  font-size: 15px; line-height: 1.5; color: var(--fyf-charcoal-80);
}
/* The deadline, as a sticker on the page rather than a line in the copy. */
.fyf-review__deadline {
  font-family: var(--font-subhead); font-weight: 700; font-size: 11px;
  letter-spacing: var(--tracking-label); text-transform: uppercase;
  background: var(--fyf-white);
  border: var(--stroke-sticker) solid var(--fyf-charcoal);
  border-radius: var(--radius-pill); box-shadow: var(--shadow-hard-sm);
  padding: 8px 16px; white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.fyf-review__deadline-clock { color: var(--fyf-pink-deep); }
@media (max-width: 560px) {
  .fyf-review__deadline { white-space: normal; text-align: center; }
}

/* ---- Two columns ------------------------------------------------------- */
.fyf-review__body { padding: clamp(22px, 2.6vw, 34px) clamp(20px, 4vw, 48px) 56px; }
.fyf-review__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(420px, 100%), 1fr));
  gap: 32px; align-items: start;
}

/* ---- The board card ---------------------------------------------------- */
.fyf-review__boardcol { position: relative; }
/* The fill-state sticker, slapped on the card's top-right corner. */
.fyf-review__sticker-pill {
  position: absolute; top: -13px; right: 22px; z-index: 2;
  transform: rotate(3deg);
  border: var(--stroke-sticker) solid var(--fyf-charcoal);
  border-radius: var(--radius-pill); box-shadow: var(--shadow-hard-sm);
  padding: 5px 14px 6px;
  font-family: var(--font-subhead); font-weight: 700; font-size: 13px; line-height: 1;
  letter-spacing: .08em; text-transform: uppercase;
  font-variant-numeric: tabular-nums; white-space: nowrap;
  color: var(--fyf-charcoal);
}
.fyf-review__sticker-pill--short { background: var(--fyf-orange); }
.fyf-review__sticker-pill--full  { background: var(--fyf-yellow); }

.fyf-review__board {
  background: var(--fyf-white);
  border: var(--stroke-sticker) solid var(--fyf-charcoal);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-hard);
  overflow: hidden;
}
/* 24px on top, not the artboard's 16: the sticker hangs ~17px into the head
   (top -13px, 30px tall), and at 16px the kicker's first line sat under it. */
.fyf-review__board-head {
  background: var(--fyf-pink);
  border-bottom: var(--stroke-sticker) solid var(--fyf-charcoal);
  padding: 24px 18px 14px;
}
/* Wraps rather than nowrap: at a phone width the two labels do not fit on
   one line and the artboard's nowrap clipped the contest name at the card's
   edge. Wrapped, the contest name drops to its own line, still right-set. */
.fyf-review__board-kicker {
  display: flex; justify-content: space-between; align-items: baseline;
  flex-wrap: wrap; gap: 2px 16px;
  font-family: var(--font-subhead); font-weight: 700; font-size: 10px;
  letter-spacing: var(--tracking-label); text-transform: uppercase;
}
/* Charcoal-80 rather than the artboard's color-mix of charcoal into pink --
   same read, and a token the lint can see. */
.fyf-review__board-kicker-contest { color: var(--fyf-charcoal-80); margin-left: auto; text-align: right; }
.fyf-review .fyf-review__board-name {
  margin: 6px 0 0;
  font-family: var(--font-subhead); font-weight: 700;
  font-size: clamp(20px, 1.9vw, 26px); line-height: 1;
  letter-spacing: .005em; text-transform: uppercase;
  overflow-wrap: anywhere;
}

/* Four stats, gutters in charcoal so they read as cells of one meta bar. */
.fyf-review__stats {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 3px;
  margin: 0; background: var(--fyf-charcoal);
  border-bottom: var(--stroke-sticker) solid var(--fyf-charcoal);
}
/* A column, value pinned to the bottom: a label that wraps ("Board last
   edited" does, at four across) pushes its own value down, and four values
   on four different baselines read as a mistake. Bottom-aligned they share
   one line and the labels take the slack above. */
.fyf-review__stat {
  display: flex; flex-direction: column;
  background: var(--fyf-white); padding: 10px 12px 11px; min-width: 0;
}
.fyf-review__stat dt {
  font-family: var(--font-subhead); font-weight: 700; font-size: 9px;
  letter-spacing: var(--tracking-label); text-transform: uppercase;
  color: var(--fyf-charcoal-60);
}
.fyf-review__stat dd {
  margin: auto 0 0; padding-top: 4px;
  font-family: var(--font-subhead); font-weight: 700; font-size: 16px; line-height: 1.15;
  font-variant-numeric: tabular-nums; overflow-wrap: anywhere;
}
.fyf-review__stat-value--short { color: var(--fyf-pink-deep); }
.fyf-review__stat-value--full  { color: var(--fyf-green); }
@media (max-width: 560px) {
  .fyf-review__stats { grid-template-columns: repeat(2, 1fr); }
}

.fyf-review__top-head {
  display: flex; justify-content: space-between; align-items: baseline; gap: 16px;
  padding: 12px 18px 6px;
}
.fyf-review__top-title {
  font-family: var(--font-subhead); font-weight: 700; font-size: 11px;
  letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--fyf-pink-deep);
}
.fyf-review__top-range {
  font-family: var(--font-subhead); font-weight: 700; font-size: 10px;
  letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--fyf-charcoal-60);
  font-variant-numeric: tabular-nums;
}
/* THE BOARD PREVIEW IS ITS OWN SCROLLER, at every width.

   The card carries the whole entry -- a hundred rows -- and the first pass
   let it run its natural height above 960px, on the theory that the sticky
   sheet beside it keeps the submit button in view. It does, but it leaves
   the page with a ~3000px left column against a pinned right one: two
   regions moving at different speeds under one wheel, which is exactly the
   thing that reads as the page scrolling wrong. Capped, the page is short,
   the two columns are the same order of height, and the long list scrolls
   where it belongs -- inside the pane that holds it.

   Deliberately NOT overscroll-behavior: contain. Containment stops scroll
   chaining, so a wheel over the list would move it to its end and then
   simply stop, pinning the page while the pointer sits over the largest
   element on it. Reaching the end of the list handing the scroll back to
   the page is the behaviour people expect from a pane inside a document.

   clamp, not a bare vh: ~9 rows on a laptop and ~14 on a tall monitor, and
   it never collapses to a slit on a short window or run past the sheet on a
   very tall one. */
.fyf-review__top {
  list-style: none; margin: 0; padding: 0;
  max-height: clamp(320px, 56vh, 720px);
  overflow-y: auto;
}
/* A PERMANENT scrollbar, not an overlay one.

   The pane is capped, and on a laptop 56vh happens to land almost exactly
   on a row boundary -- so a hundred-row entry drew as a clean thirteen-row
   list with nothing on screen saying otherwise. macOS' overlay scrollbar
   only appears while the wheel is actually moving, which is no help to
   somebody deciding whether they have seen their board.

   Styling ::-webkit-scrollbar is what turns that overlay into a classic bar
   in a gutter. Deliberately WITHOUT scrollbar-width/scrollbar-color: Chrome
   honours the standard properties when either is present and ignores every
   ::-webkit-scrollbar rule for that element, which is how the first attempt
   at this silently changed nothing. Firefox has no webkit pseudos and draws
   a persistent bar by default, so it needs neither. */
.fyf-review__top::-webkit-scrollbar { width: 10px; }
/* The track is TINTED, not transparent. Styling the pseudo-element already
   reserves a permanent 10px gutter, but macOS still fades the thumb out
   when the wheel stops -- so with a clear track the gutter was invisible at
   rest and the pane read as a short list again. A faint track is the part
   that is always on screen. */
.fyf-review__top::-webkit-scrollbar-track { background: var(--fyf-charcoal-12); }
.fyf-review__top::-webkit-scrollbar-thumb {
  background: var(--fyf-charcoal-30); border-radius: var(--radius-pill);
  border: 3px solid var(--fyf-white);
}
.fyf-review__top::-webkit-scrollbar-thumb:hover { background: var(--fyf-charcoal-60); }

/* THE AFFORDANCE OF LAST RESORT: a fade over the pane's bottom edge.

   Everything above is best-effort. macOS defaults "Show scroll bars" to
   "When scrolling", and on that setting Chrome uses an overlay scrollbar
   and reserves no gutter -- so the ::-webkit-scrollbar rules paint nothing
   at rest, whatever they say. A hundred-row entry then drew as a clean
   thirteen-row list, and the one screen whose job is "did I really check my
   board" was quietly claiming the board was thirteen players long.

   The fade is drawn by the page, so no OS preference can turn it off. It
   sits on a wrapper rather than on the scroller itself: an ::after on the
   scroller scrolls away with its content, which is precisely backwards.
   pointer-events: none so it never eats a click on the last visible row. */
.fyf-review__topwrap { position: relative; }
.fyf-review__topwrap::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 28px;
  background: linear-gradient(to top, var(--fyf-white), transparent);
  pointer-events: none;
}
.fyf-review__top-row,
.fyf-review__top-cols {
  display: grid; grid-template-columns: 28px 1fr 44px 72px; gap: 10px; align-items: center;
  padding: 5px 18px; font-variant-numeric: tabular-nums;
}
/* The column heads, on the rows' own grid so "vs Market" lands over its
   cell. Rendered OUTSIDE the <ol>, which is the scroller -- so the head
   stays put while a hundred rows move under it, without needing to be
   sticky. A head inside the pane would take the only thing naming the last
   column away with the first scroll. */
.fyf-review__top-cols {
  padding-top: 2px; padding-bottom: 6px;
  font-family: var(--font-subhead); font-weight: 700; font-size: 9px;
  letter-spacing: var(--tracking-label); text-transform: uppercase;
  color: var(--fyf-charcoal-60); text-align: right; white-space: nowrap;
}
.fyf-review__top-row:nth-child(even) { background: var(--fyf-cream-tint); }
.fyf-review__top-rank {
  font-family: var(--font-subhead); font-weight: 700; font-size: 13px; color: var(--fyf-charcoal-60);
}
/* Names are never truncated -- they wrap. */
.fyf-review__top-name { font-family: var(--font-header); font-size: 16px; line-height: 1.15; min-width: 0; }
.fyf-review__top-row .fyf-pill { min-width: 44px; font-size: 9px; letter-spacing: .05em; padding: 2px 0; }

/* vs Market. The same two colours the strip's legend names below the list
   ("You're higher" green / "You're lower" pink), so one vocabulary covers
   the row, the graphic and the gaps table. A quiet call is set at the
   muted weight -- a hundred rows of full-strength deltas is a wall, and the
   ones worth seeing are the ones 10+ off. */
.fyf-review__top-gap {
  font-family: var(--font-subhead); font-weight: 700; font-size: 12px;
  letter-spacing: .02em; text-align: right; white-space: nowrap;
}
.fyf-review__top-gap--up   { color: var(--fyf-green); }
.fyf-review__top-gap--down { color: var(--fyf-pink-deep); }
.fyf-review__top-gap[data-tier="quiet"] { color: var(--fyf-charcoal-60); font-weight: 400; }
.fyf-review__top-gap--even,
.fyf-review__top-gap--off {
  color: var(--fyf-charcoal-30); font-weight: 400;
  font-size: 10px; letter-spacing: var(--tracking-label); text-transform: uppercase;
}

/* The board before anything is ranked -- one line where the ten rows go. */
.fyf-review .fyf-review__top-empty {
  margin: 0; padding: 14px 18px 16px;
  font-family: var(--font-header); font-size: 16px; line-height: 1.2; color: var(--fyf-charcoal-60);
}
.fyf-review .fyf-review__board-more,
.fyf-review .fyf-review__board-more:visited {
  display: block; padding: 10px 18px;
  border-top: var(--stroke-chip) solid var(--fyf-charcoal-12);
  font-family: var(--font-subhead); font-weight: 700; font-size: 11px;
  letter-spacing: var(--tracking-label); text-transform: uppercase;
  color: var(--fyf-pink-deep); text-decoration: none;
}
.fyf-review .fyf-review__board-more:hover { background: var(--fyf-cream-tint); color: var(--fyf-pink-deep); }
.fyf-review__board-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  border-top: var(--stroke-sticker) solid var(--fyf-charcoal); padding: 10px 18px;
}
.fyf-review__board-logo { height: 32px; width: auto; display: block; }
.fyf-review__board-deadline {
  font-family: var(--font-subhead); font-weight: 700; font-size: 10px;
  letter-spacing: var(--tracking-label); text-transform: uppercase;
  color: var(--fyf-charcoal-60); text-align: right; font-variant-numeric: tabular-nums;
}

/* ---- The sheet --------------------------------------------------------- */
.fyf-review__sheet { display: grid; gap: 20px; }
/* Sticky only once the two columns actually sit side by side (auto-fit at
   420px + 32px gap + gutters lands there around 960px); stacked, a sticky
   second column has nothing to stick alongside. 88px clears the header. */
@media (min-width: 960px) {
  .fyf-review__sheet { position: sticky; top: 88px; }
}

.fyf-review .fyf-review__status-headline {
  margin: 8px 0 0;
  font-family: var(--font-header); font-weight: var(--weight-display);
  font-size: clamp(26px, 2.4vw, 32px); line-height: 1.04;
  letter-spacing: var(--tracking-display);
}
.fyf-review .fyf-review__status-copy {
  margin: 8px 0 0; font-size: 14px; line-height: 1.5; color: var(--fyf-charcoal-80);
}
.fyf-review .fyf-review__status-reasons {
  margin: 8px 0 0; padding: 0 0 0 1.1em;
  font-size: 14px; line-height: 1.5; color: var(--fyf-charcoal-80);
}
.fyf-review .fyf-review__status-reasons li { margin: 3px 0 0; }
/* The inline display-name fix, a small form on the sheet's paper. */
.fyf-review__namefix {
  margin: 12px 0 0; padding: 12px 14px 14px;
  background: var(--fyf-white);
  border: var(--stroke-chip) solid var(--fyf-charcoal); border-radius: var(--radius-md);
}
.fyf-review__namefix-label {
  display: block;
  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-review__namefix-input {
  display: block; width: 100%; margin: 6px 0 0; padding: 8px 10px;
  font-family: var(--font-body); font-weight: var(--weight-body); font-size: 14px;
  color: var(--fyf-charcoal); background: var(--fyf-white);
  border: var(--stroke-chip) solid var(--fyf-charcoal); border-radius: var(--radius-sm);
}
.fyf-review__namefix-input:focus-visible {
  outline: 3px solid var(--fyf-cream); outline-offset: 2px;
  box-shadow: 0 0 0 5px var(--fyf-charcoal);
}
.fyf-review .fyf-review__namefix-hint {
  margin: 6px 0 10px; font-size: 12px; line-height: 1.5; color: var(--fyf-charcoal-60);
}
.fyf-review__count {
  display: flex; align-items: baseline; gap: 8px; margin: 14px 0 0;
  font-variant-numeric: tabular-nums;
}
.fyf-review__count-num {
  font-family: var(--font-subhead); font-weight: 700; font-size: 38px; line-height: 1;
  letter-spacing: -.015em;
}
.fyf-review__count-label {
  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-review__bar {
  height: 16px; margin: 10px 0 0;
  border: var(--stroke-chip) solid var(--fyf-charcoal); background: var(--fyf-white);
}
.fyf-review__bar-fill { height: 100%; }
.fyf-review__bar-fill--short { background: var(--fyf-pink); }
.fyf-review__bar-fill--full  { background: var(--fyf-green); }
.fyf-review .fyf-review__card-link { margin: 10px 0 0; font-size: 13px; }

.fyf-review__actions { margin: 18px 0 0; }
.fyf-review__submit { display: block; margin: 0; }
.fyf-review__actions .fyf-btn { width: 100%; }
.fyf-review__actions .fyf-btn + .fyf-btn,
.fyf-review__actions .fyf-review__submit + .fyf-btn,
.fyf-review__actions .fyf-btn + .fyf-review__submit,
.fyf-review__actions .fyf-review__submit + .fyf-review__submit { margin-top: 10px; }
/* A withheld submit is an outline in charcoal-30, not a faded orange slab
   (.fyf-btn:disabled's opacity treatment) -- the artboard draws it as the
   button's ghost, and the sentence under it says why. */
.fyf-review__actions .fyf-btn:disabled {
  opacity: 1; background: transparent;
  color: var(--fyf-charcoal-30); border-color: var(--fyf-charcoal-30);
  box-shadow: none;
}
.fyf-review .fyf-review__fine {
  margin: 10px 0 0; text-align: center;
  font-size: 12px; line-height: 1.5; color: var(--fyf-charcoal-60);
}

/* ---- Panels (market strip, visibility) --------------------------------- */
.fyf-review__panel {
  background: var(--fyf-white);
  border: var(--stroke-sticker) solid var(--fyf-charcoal);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-hard-sm);
  overflow: hidden;
}
.fyf-review .fyf-review__panel-title {
  margin: 0;
  font-family: var(--font-subhead); font-weight: 700; font-size: 11px;
  letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--fyf-pink-deep);
}
.fyf-review__panel-head {
  padding: 14px 18px 12px;
  border-bottom: var(--stroke-chip) solid var(--fyf-charcoal);
}
.fyf-review .fyf-review__panel-copy {
  margin: 6px 0 0; font-size: 13px; line-height: 1.5; color: var(--fyf-charcoal-80);
}
.fyf-review .fyf-review__panel-foot {
  margin: 0; padding: 10px 18px 12px;
  border-top: var(--stroke-chip) solid var(--fyf-charcoal-12);
  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-review .fyf-review__panel-foot--prose {
  font-family: var(--font-body); font-weight: var(--weight-body); font-size: 12px;
  line-height: 1.5; letter-spacing: 0; text-transform: none; color: var(--fyf-charcoal-80);
}

/* Market strip: a <details>, open by default, collapsible so the sheet can
   shrink to its two decisions once the strip has been read. */
.fyf-review__market-summary {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 12px 18px; cursor: pointer; list-style: none;
  border-bottom: var(--stroke-chip) solid var(--fyf-charcoal);
}
.fyf-review__market-summary::-webkit-details-marker { display: none; }
.fyf-review__market-summary:hover { background: var(--fyf-cream-tint); }
.fyf-review__market-summary:focus-visible { outline: 3px solid var(--fyf-charcoal); outline-offset: -3px; }
.fyf-review__market-summary-right { display: flex; align-items: center; gap: 10px; }
.fyf-review__market-summary-count {
  font-family: var(--font-subhead); font-weight: 700; font-size: 10px;
  letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--fyf-charcoal-60);
  white-space: nowrap; font-variant-numeric: tabular-nums;
}
.fyf-review__market-chevron {
  flex: none; width: 20px; height: 20px; display: grid; place-items: center;
  border: var(--stroke-chip) solid var(--fyf-charcoal); border-radius: 50%;
  font-size: 10px; line-height: 1;
  transition: transform var(--dur-fast) var(--ease-snap);
}
.fyf-review__market[open] .fyf-review__market-chevron { transform: rotate(180deg); }
.fyf-review__market-body { padding: 14px 18px 12px; }
.fyf-review__market-lead { display: flex; align-items: baseline; gap: 10px; }
.fyf-review__market-num {
  font-family: var(--font-subhead); font-weight: 700; font-size: 38px; line-height: .86;
  letter-spacing: -.02em; font-variant-numeric: tabular-nums;
}
.fyf-review__market-text { font-size: 14px; line-height: 1.4; color: var(--fyf-charcoal-80); text-wrap: pretty; }
.fyf-review__market-text strong { font-weight: 600; color: var(--fyf-charcoal); }
.fyf-review .fyf-review__market-calm { margin: 0; font-size: 14px; line-height: 1.4; color: var(--fyf-charcoal-80); }

/* One tick per scored slot. Lit ticks stand at two heights for the two
   published thresholds; the direction is the colour. */
.fyf-review__ticks {
  display: flex; align-items: flex-end; gap: 2px; height: 30px;
  margin: 14px 0 0; padding: 0 2px;
  border-bottom: var(--stroke-sticker) solid var(--fyf-charcoal);
}
.fyf-review__tick { flex: 1 1 0; min-width: 0; }
.fyf-review__tick--quiet { height: 9px; background: var(--fyf-charcoal-30); }
.fyf-review__tick--ten-plus { height: 20px; }
.fyf-review__tick--twenty-five-plus { height: 27px; }
.fyf-review__tick--up   { background: var(--fyf-green); }
.fyf-review__tick--down { background: var(--fyf-orange); }
.fyf-review__tick--off-board {
  height: 27px; background: transparent;
  border: var(--stroke-chip) dashed var(--fyf-charcoal-60);
}
.fyf-review__axis {
  display: flex; justify-content: space-between; margin: 6px 0 0;
  font-family: var(--font-subhead); font-weight: 700; font-size: 9px;
  letter-spacing: var(--tracking-label); color: var(--fyf-charcoal-60);
  font-variant-numeric: tabular-nums;
}
.fyf-review__legend {
  display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 12px 0 0;
  font-family: var(--font-subhead); font-weight: 700; font-size: 9px;
  letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--fyf-charcoal-80);
}
.fyf-review__legend-item { display: flex; align-items: center; gap: 6px; }
.fyf-review__legend-item--quiet { color: var(--fyf-charcoal-60); }
.fyf-review__legend-swatch { width: 7px; height: 14px; flex: none; }
.fyf-review__legend-swatch--up        { background: var(--fyf-green); }
.fyf-review__legend-swatch--down      { background: var(--fyf-orange); }
.fyf-review__legend-swatch--quiet     { height: 9px; background: var(--fyf-charcoal-30); }
.fyf-review__legend-swatch--off-board { border: var(--stroke-chip) dashed var(--fyf-charcoal-60); }

.fyf-review__gaps-head,
.fyf-review__gaps-row {
  display: grid; grid-template-columns: 1fr 48px 56px; gap: 10px; align-items: baseline;
  font-variant-numeric: tabular-nums;
}
.fyf-review__gaps-head {
  padding: 10px 18px 5px;
  border-top: var(--stroke-chip) solid var(--fyf-charcoal-12);
  font-family: var(--font-subhead); font-weight: 700; font-size: 9px;
  letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--fyf-charcoal-60);
}
.fyf-review__gaps-head span:not(:first-child) { text-align: right; }
.fyf-review__gaps-head-title { color: var(--fyf-charcoal); }
.fyf-review__gaps-row { padding: 6px 18px; }
/* The artboard tints the SECOND row of the list and every other one after
   it. That used to be `:nth-child(odd)` because the head was child 1 and
   the rows started at child 2; the rows now live in their own scroller, so
   they start at child 1 and the same stripe is `:nth-child(even)`. */
.fyf-review__gaps-rows > .fyf-review__gaps-row:nth-child(even) { background: var(--fyf-cream-tint); }

/* Past a screenful the table scrolls in place instead of growing the sheet.
   This is the sticky column: a sheet taller than the viewport puts the
   submit button somewhere the page has to be scrolled to reach, which is
   the two-columns-at-different-speeds problem the board preview was just
   fixed for. Same shape as .fyf-review__top -- capped off the viewport,
   scroll chaining left alone, and a fade the page draws itself because no
   scrollbar is guaranteed to be visible (see .fyf-review__topwrap). */
.fyf-review__gapswrap--scroll { position: relative; }
.fyf-review__gapswrap--scroll .fyf-review__gaps-rows {
  max-height: clamp(200px, 34vh, 420px);
  overflow-y: auto;
}
.fyf-review__gapswrap--scroll::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 24px;
  background: linear-gradient(to top, var(--fyf-white), transparent);
  pointer-events: none;
}
.fyf-review__gaps-rows::-webkit-scrollbar { width: 10px; }
.fyf-review__gaps-rows::-webkit-scrollbar-track { background: var(--fyf-charcoal-12); }
.fyf-review__gaps-rows::-webkit-scrollbar-thumb {
  background: var(--fyf-charcoal-30); border-radius: var(--radius-pill);
  border: 3px solid var(--fyf-white);
}
.fyf-review__gaps-name { font-family: var(--font-header); font-size: 16px; line-height: 1.1; min-width: 0; }
.fyf-review__gaps-delta {
  font-family: var(--font-subhead); font-weight: 700; font-size: 11px; letter-spacing: .04em;
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.fyf-review__gaps-delta--up   { color: var(--fyf-green); }
.fyf-review__gaps-delta--down { color: var(--fyf-pink-deep); }
.fyf-review__gaps-you,
.fyf-review__gaps-market { font-family: var(--font-subhead); font-weight: 700; font-size: 15px; text-align: right; }
.fyf-review__gaps-market { color: var(--fyf-charcoal-60); }

/* Visibility: two radios drawn as the brand's ring-and-dot, saving on change. */
.fyf-review__options { margin: 0; }
.fyf-review__option {
  display: flex; gap: 12px; align-items: flex-start; padding: 12px 18px; cursor: pointer;
}
.fyf-review__option + .fyf-review__option { border-top: var(--stroke-chip) solid var(--fyf-charcoal-12); }
.fyf-review__option:hover { background: var(--fyf-cream-tint); }
.fyf-review__radio {
  appearance: none; -webkit-appearance: none;
  flex: none; width: 20px; height: 20px; margin: 1px 0 0;
  border: var(--stroke-sticker) solid var(--fyf-charcoal); border-radius: 50%;
  background: var(--fyf-white); display: grid; place-items: center; cursor: pointer;
}
.fyf-review__radio:checked::after {
  content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--fyf-pink);
}
.fyf-review__radio:focus-visible {
  outline: 3px solid var(--fyf-cream); outline-offset: 2px;
  box-shadow: 0 0 0 5px var(--fyf-charcoal);
}
.fyf-review__option-text { min-width: 0; }
.fyf-review__option-title { display: block; font-family: var(--font-subhead); font-weight: 700; font-size: 14px; }
.fyf-review__option-desc { display: block; margin-top: 3px; font-size: 12px; line-height: 1.45; color: var(--fyf-charcoal-80); }
.fyf-review__option-save { padding: 4px 18px 14px; }

/* The brand's oval badge, peeling off the sheet's corner. Decorative. */
.fyf-review__sticker {
  width: 96px; height: auto; display: block;
  justify-self: end; margin: -4px 6px 0 0; transform: rotate(-7deg);
}