/* Attendee component layer.
*
* Every class here is prefixed .gp- and matches nothing that exists today, so this
* file is inert until markup opts in. That is deliberate: new screens can build on
* it immediately, while the pages still styled by Setting[custom_css] are untouched
* until after the run.
*
* Values come from tokens.css. Nothing in this file hardcodes a colour or a radius.
* Recipes are extracted from design/custom-css-baseline.css — the duplication count
* for each is noted, because that is what justified extracting it.
*
* .gp-btn and .gp-field were reconciled against what production actually renders on
* 2026-09-14. The differences, and which way each was settled, are in
* docs/attendee-component-reconciliation.md. Read that before "correcting" anything
* here back towards the baseline text: several baseline declarations have never
* painted a pixel, and copying them in would ship a new design as if it were an
* extraction.
*/
/* ---------------------------------------------------------------------------
* Glass surface — the most duplicated recipe in the baseline. 16 literal copies,
* but the honest count is lower: five attach to elements that cannot render a
* pseudo-element at all (baseline:704 and :951 target , and the three
* .btn-primary::after copies at :1407, :1522 and :1650 target submit inputs), and
* two of the survivors use different values — drop-shadow(10px 3px 6px #888)
* brightness(122%), and a misspelt --backdrop-filter custom property, at
* baseline:1003-1007 and :1337-1342. So: 16 written, 11 that can paint.
*
* Careful with that last number. All 11 carry an IDENTICAL box-shadow — the two
* variants differ only in the filter chain and the misspelt property — so shadow/rim
* has 11 live copies, not 9. It is the wider recipe that has 9. This rule implements
* the shadow and deliberately not the filter: the baseline's
* `filter: blur(1px) drop-shadow(10px 4px 6px black) brightness(115%)` and
* `backdrop-filter: blur(1px)` are NOT here, which is an open difference on every
* glass surface and is listed as unreconciled in the reconciliation doc.
*
* The rim highlight is a ::after overlay rather than a border so it can sit inside
* the rounded corner. It is inert to pointers, and `z-index: -1` is what actually
* puts it behind content: a positioned ::after is generated last, so at the default
* `z-index: auto` it paints OVER every ordinary child and washes them out. All 16
* copies of this recipe in the baseline carry that -1; the first extraction dropped
* it and claimed the behaviour anyway.
*
* The -1 only stays *inside* this element because .gp-glass has a backdrop-filter,
* which makes it a stacking context. Drop that and the rim paints behind the
* element's own background instead of behind its content.
* ------------------------------------------------------------------------ */
.gp-glass {
position: relative;
background: var(--gp-surface-glass);
border: 1px solid var(--gp-border-glass);
border-radius: var(--gp-radius-card);
box-shadow: var(--gp-shadow-card);
backdrop-filter: blur(var(--gp-dimension-blur-glass)) saturate(180%);
-webkit-backdrop-filter: blur(var(--gp-dimension-blur-glass)) saturate(180%);
}
.gp-glass::after {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
border-radius: inherit;
background: var(--gp-color-glass-sheen);
box-shadow: var(--gp-shadow-rim);
opacity: 0.6;
z-index: -1;
}
.gp-glass--pill,
.gp-glass--pill::after {
border-radius: var(--gp-radius-pill);
}
.gp-glass--strong {
background: var(--gp-surface-glass-strong);
}
/* ---------------------------------------------------------------------------
* Glass v2 (round 11): the checkpoint's glass. The send card, the drawer
* sheet, the −/+ and Buy More Chuds, from public/glass-test.html's
* Recommended preset with Corey's amendments (plan, R11-A). .gp-glass above
* is the older component-layer recipe; nothing in app/views uses it as of
* round 11, and it is left for the pages the operator's custom_css styles.
*
* A surface is the element plus layer elements (ApplicationHelper#glass_layers,
* ), in paint order:
* __blur the tint and the one backdrop pass: blur + vibrancy
* __frost TRUE edge frost: a second, heavier backdrop pass, masked to
* the edges — card and sheet only (two extra passes at most)
* __shine sheen, inner top highlight / bottom shade, colour fringe, and
* the CHEAP frost (an inset glow, no backdrop pass)
* __rim the specular rim, a gradient ring cut out with a mask
*
* The layers sit at z-index -1 inside the surface, which isolation makes a
* stacking context: above the surface's own background, below its content.
* A stacking context is not a backdrop root (filter, opacity, mask and
* backdrop-filter are), so the layers still blur the clouds behind.
*
* position is on the modifiers, not here: the sheet is Bootstrap's fixed
* .offcanvas, and a position here would unfix it (same specificity, later).
* ------------------------------------------------------------------------ */
.gp-glass-v2 {
isolation: isolate;
box-shadow: var(--glass-depth);
}
.gp-glass-v2 > :is(.gp-glass-v2__blur, .gp-glass-v2__frost, .gp-glass-v2__shine, .gp-glass-v2__rim) {
position: absolute;
inset: 0;
z-index: -1;
border-radius: inherit;
pointer-events: none;
}
.gp-glass-v2__blur {
background: var(--glass-tint);
-webkit-backdrop-filter: blur(var(--gp-dimension-glass-blur)) saturate(var(--gp-glass-saturate)) brightness(var(--gp-glass-brightness));
backdrop-filter: blur(var(--gp-dimension-glass-blur)) saturate(var(--gp-glass-saturate)) brightness(var(--gp-glass-brightness));
}
/* TRUE frost follows the rounded corners (amendment 6). The preset masked it
* with two linear gradients, whose inner edge is square at every corner; a
* 9-slice of a blurred rounded rect (images/glass/frost-edge.svg) keeps the
* corners the same at any size. Off by default and on only where the browser
* has both a 9-slice mask and backdrop-filter; anywhere else the surface is
* simply the tint and blur, with the plain rounded corner. */
.gp-glass-v2__frost {
display: none;
}
@supports ((-webkit-mask-box-image: none) or (mask-border: none)) and ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
:is(.gp-glass-v2--card, .gp-glass-v2--sheet) > .gp-glass-v2__frost {
display: block;
background: var(--gp-color-glass-frost-tint);
-webkit-backdrop-filter: blur(var(--gp-dimension-glass-frost-blur)) saturate(var(--gp-glass-frost-saturate)) brightness(var(--gp-glass-frost-brightness));
backdrop-filter: blur(var(--gp-dimension-glass-frost-blur)) saturate(var(--gp-glass-frost-saturate)) brightness(var(--gp-glass-frost-brightness));
-webkit-mask-box-image: url("/assets/glass/frost-edge-b6dea6fa.svg") var(--gp-glass-frost-slice) / var(--gp-dimension-glass-frost-width) stretch;
mask-border: url("/assets/glass/frost-edge-b6dea6fa.svg") var(--gp-glass-frost-slice) / var(--gp-dimension-glass-frost-width) stretch;
}
}
.gp-glass-v2__shine {
background: var(--glass-sheen, var(--gp-gradient-glass-sheen));
box-shadow: var(--gp-shadow-glass-edge), var(--gp-shadow-glass-fringe), var(--glass-cheap, 0 0 transparent);
}
/* xor is the old WebKit spelling of exclude (amendment 7). */
.gp-glass-v2__rim {
padding: var(--gp-dimension-glass-rim-width);
background: var(--gp-gradient-glass-rim);
-webkit-mask: linear-gradient(var(--gp-color-black) 0 0) content-box, linear-gradient(var(--gp-color-black) 0 0);
-webkit-mask-composite: xor;
mask: linear-gradient(var(--gp-color-black) 0 0) content-box exclude, linear-gradient(var(--gp-color-black) 0 0);
}
.gp-glass-v2--card {
position: relative;
--glass-tint: var(--gp-color-glass-tint-card);
--glass-depth: var(--gp-shadow-glass-depth);
}
.gp-glass-v2--sheet {
--glass-tint: var(--gp-color-glass-tint-sheet);
--glass-depth: var(--gp-shadow-glass-depth);
}
/* −/+: round and dimensional. They keep their own blur 10 on the element
* (no __blur layer), so no new backdrop pass: shine and rim only. */
.gp-glass-v2--control {
position: relative;
--glass-depth: var(--gp-shadow-glass-depth-control);
--glass-cheap: var(--gp-shadow-glass-frost-cheap-control);
}
/* Buy More Chuds: opaque blue, no blur; a subtle rim and a soft sheen, the
* least frost, the flattest depth (amendments 2, 3). */
.gp-glass-v2--button {
position: relative;
--glass-depth: var(--gp-shadow-glass-depth-button);
--glass-cheap: var(--gp-shadow-glass-frost-cheap-button);
--glass-sheen: var(--gp-gradient-glass-sheen-button);
}
/* Performer avatars (round 12, item 3: glass-test's preview row, shipped).
* The photo circle takes the rim, sheen and edge OVER the picture and its
* ring, and the controls' depth under it — no tint, no blur of its own.
* Rules of their own, so the photo's ring, colour and greyscale rules
* (.gp-checkpoint__photo, round 12's --pick) are untouched: the photo's
* clip moves from overflow to the picture's own radius, so the layers can
* reach out over the ring, and they paint above the picture (z-index 1,
* not the family's -1, which would put them under it). The ring's width is
* the photo's own expression. Two classes: .gp-checkpoint__photo's
* overflow comes later in the file. */
.gp-glass-v2.gp-glass-v2--avatar {
--glass-depth: var(--gp-shadow-glass-depth-control);
--avatar-ring: calc(4px + var(--grow, 0) * 0.2px);
position: relative;
overflow: visible;
}
.gp-glass-v2--avatar > img {
border-radius: 50%;
}
/* Round 14, item 4 (Corey, phone: the chromatic edge reads good and subtle
* on the sheet and −/+, too dark and prominent on the card and the bottom
* of the avatars). glass-edge and glass-rim are the same rgba on every
* glass-v2 surface, but nothing dilutes them evenly: the sheet's tint (.55)
* and the −/+'s (.3) are opaque enough to soften the dark end, the card's
* (.22, thinned deliberately in round 12) is not, and the avatar has no
* tint at all — its rim and shine paint above the photo (z-index 1, no
* __blur layer), so the same rgba lands unmuted. Card and avatar get the
* -muted tokens (dark end halved); the shared glass-edge/glass-rim that
* the sheet, −/+ and thumb use stay exactly as they were. */
.gp-glass-v2--card > .gp-glass-v2__shine,
.gp-glass-v2--avatar > .gp-glass-v2__shine {
box-shadow: var(--gp-shadow-glass-edge-muted), var(--gp-shadow-glass-fringe), var(--glass-cheap, 0 0 transparent);
}
.gp-glass-v2--card > .gp-glass-v2__rim,
.gp-glass-v2--avatar > .gp-glass-v2__rim {
background: var(--gp-gradient-glass-rim-muted);
}
.gp-glass-v2.gp-glass-v2--avatar > :is(.gp-glass-v2__shine, .gp-glass-v2__rim) {
inset: calc(-1 * var(--avatar-ring));
z-index: 1;
}
/* The drawer sheet has no bottom edge (round 12, item 7; Corey: "No bottom
* border on panel"): on a phone it runs off the bottom of the screen, under
* Safari's toolbar, so a rim or a shade along its foot is a line across the
* page, not an edge. The rim's ring keeps no bottom side (no bottom padding
* for the mask to cut), the inner shade is the top highlight alone, and the
* frost's bottom band is pushed below the sheet. Card and controls stay
* four-sided. Not on the centred modal (≥768px), which has four edges. */
@media (max-width: 767.98px) {
.gp-glass-v2--sheet > .gp-glass-v2__rim {
padding-bottom: 0;
}
.gp-glass-v2--sheet > .gp-glass-v2__shine {
box-shadow: var(--gp-shadow-glass-edge-top), var(--gp-shadow-glass-fringe), var(--glass-cheap, 0 0 transparent);
}
.gp-glass-v2--sheet > .gp-glass-v2__frost {
bottom: calc(-1 * var(--gp-dimension-glass-frost-width));
}
}
/* Graceful degradation (amendment 7). No backdrop-filter at all, or the
* reader asked for less transparency: an opaque-enough tint, no frost, no
* blur. The −/+ and the track blur on the element itself; they are in the
* checkpoint section's own fallback. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
.gp-glass-v2:is(.gp-glass-v2--card, .gp-glass-v2--sheet) {
--glass-tint: var(--gp-color-glass-tint-solid);
}
}
@media (prefers-reduced-transparency: reduce) {
.gp-glass-v2:is(.gp-glass-v2--card, .gp-glass-v2--sheet) {
--glass-tint: var(--gp-color-glass-tint-solid);
}
.gp-glass-v2 > .gp-glass-v2__blur {
-webkit-backdrop-filter: none;
backdrop-filter: none;
}
:is(.gp-glass-v2--card, .gp-glass-v2--sheet) > .gp-glass-v2__frost {
display: none;
}
}
/* Round 12 (R12-J, Corey on an iPhone: "when in low power mode everything
* feels a little jerky"). No API says Low Power Mode is on, so
* src/frame_budget.js judges the takeover's own opening frames instead and
* checkpoint_controller.js adds this class to when delivery is
* degraded, removed again on disconnect. Drop the two costliest
* backdrop-filter passes — the TRUE edge frost, and the blur under the −/+
* and the slide track — and keep every tint, so it still reads as the same
* glass, just without the two most expensive layers. Nothing here shortens
* an animation. */
.gp-reduced-effects :is(.gp-glass-v2--card, .gp-glass-v2--sheet) > .gp-glass-v2__frost {
display: none;
}
.gp-reduced-effects .gp-checkpoint__step,
.gp-reduced-effects .gp-checkpoint__slide {
backdrop-filter: none;
-webkit-backdrop-filter: none;
}
/* ---------------------------------------------------------------------------
* Primary action — the green pill. 3 byte-identical copies in the baseline
* (#vouchers:1389, [id$="-edit"]:1504, #referrals-new:1632).
*
* Reconciled 2026-09-14. Four things that reconciliation settled, each of which
* is easy to "fix" back the wrong way:
*
* - Weight is 400, not 600. All three copies ship 400; the first extraction
* typed 600 and would have shipped a bolder button as if nothing changed.
* - The glass box-shadow is restored. The first extraction dropped it, which
* is the difference between this button and a flat one.
* - The baseline's `backdrop-filter: blur(2px) saturate(180%)` is deliberately
* NOT here. The fill is opaque #1aaf13, so there is nothing behind it to show
* through. Measured: 114 of 12,000 pixels differ, by 1 of 255, and all of it
* is antialiasing on the rounded border. A compositing layer for no pixels.
* - The baseline's `.btn-primary::after` rim is deliberately NOT here either.
* Every call site is an (submit_tag at
* vouchers/index.html.erb:14, f.submit at referrals/new.html.erb:15 and
* attendees/edit.html.erb:20), and a replaced element generates no
* pseudo-elements. That rule has never painted. Adding it would be a new
* visual dressed up as an extraction.
*
* Width is NOT fixed here. The baseline pinned 150px because those form pages
* wanted it — and #referrals-new immediately overrides it with .w-100, so only
* two of the three ever render 150px. A width belongs to the layout.
*
* Known and carried forward, not introduced here: white on #1aaf13 is 2.92:1, so
* the button label fails WCAG AA at this size. It fails in production today too.
* Fixing it is a visual change and belongs after 4 October.
* ------------------------------------------------------------------------ */
.gp-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
min-height: var(--gp-control-height);
padding: 0.25rem 1rem;
border: 1px solid var(--gp-border-glass-bright);
border-radius: var(--gp-radius-pill);
background: var(--gp-action-primary);
color: var(--gp-action-on-primary);
box-shadow: var(--gp-shadow-glass);
font-size: var(--gp-font-size-body);
font-weight: var(--gp-font-weight-regular);
line-height: 1.5;
text-align: center;
text-decoration: none;
cursor: pointer;
}
/* Bootstrap repaints .btn-primary blue in six places, and .gp-btn at (0,1,0) loses
* to every one of them on specificity, which source order cannot fix. While the
* Setting row is live its ID-scoped block hides all of it — so this only surfaces
* at cutover, which is the worst moment to discover it.
*
* The full list, because "every state" was claimed once already and was wrong:
* .btn-primary:hover (0,2,0) bootstrap.css:2949
* .btn:focus / .btn-primary:focus (0,2,0) bootstrap.css:2935, :2954
* .btn-primary:active, .btn-primary.active (0,2,0) bootstrap.css:2960
* .btn-primary:disabled, .disabled (0,2,0) bootstrap.css:2968
* .btn-primary:active:focus (0,3,0) bootstrap.css:2965
*
* The .active and .disabled CLASS forms matter separately from their pseudo-class
* twins — Bootstrap applies them to anchors, which have neither :active in that
* sense nor :disabled at all. And :disabled is the one that bites hardest: it
* repaints the background to #0d6efd, so a disabled migrated button was going
* Bootstrap blue while .gp-btn[disabled] dimmed it to 55%.
*
* :hover left this list 2026-09-20 — it has its own rule further down that clears
* .btn-primary:hover on specificity alone (see the comment there), rather than
* repainting to the same value as this block does for the states that are NOT
* getting a new look in this pass. */
.gp-btn:focus,
.gp-btn:active,
.gp-btn.active,
.gp-btn:disabled,
.gp-btn.disabled,
.gp-btn[disabled],
.gp-btn[aria-disabled="true"] {
background: var(--gp-action-primary);
border-color: var(--gp-border-glass-bright);
color: var(--gp-action-on-primary);
box-shadow: var(--gp-shadow-glass);
}
/* The only Bootstrap button selector that needs three, so it gets its own rule
* rather than dragging the whole list up to (0,3,0). */
.gp-btn:active:focus {
box-shadow: var(--gp-shadow-glass);
}
/* Hover and press, with motion (Corey, 2026-09-20). This reverses the "no hover
* brightness" rule that lived here through the /vouchers migration: that version
* deliberately repainted :hover to the exact same value as the base rule, because
* a visible hover change on a shipped page was a redesign however small, and the
* whole earlier pass existed to avoid that. The migration is done; Corey has now
* asked for real hover and press states with colour and motion, ported from the
* checkpoint-ui-polish branch's .gp-buy-chuds recipe (that button's own -/+ and
* Buy More Chuds treatment). .is-pressed is set by press_controller.js rather than
* driven off :active — CSS :active is not dependable for touch on iOS Safari, see
* that controller's own comment — and the hover rule only applies where there is
* a pointer to hover with.
*
* Both new rules carry :not(.gp-btn--ghost): .gp-btn--ghost keeps its own
* state-override block further down at ordinary (0,2,0) specificity, same as
* before, but these rules sit at (0,7,0)/(0,8,0) once .is-pressed/:hover and the disabled
* guards are counted, which would otherwise always beat ghost's block regardless
* of source order and leak a filled button's background-color onto it. They also
* repeat the four disabled selectors from the list above, so a disabled or
* aria-disabled .gp-btn keeps today's dimmed, non-animated look rather than
* animating on a soft-disabled anchor that still receives pointer events.
*
* The focus ring below is the deliberate exception that was already here: an
* accessibility fix is not polish, and this reversal does not touch it. */
.gp-btn {
transition:
background-color var(--gp-motion-press) ease-out,
transform var(--gp-motion-press-release) cubic-bezier(0.34, 1.56, 0.64, 1);
}
.gp-btn.is-pressed:not(.gp-btn--ghost):not(:disabled):not(.disabled):not([disabled]):not([aria-disabled="true"]) {
transform: scale(0.94);
background-color: color-mix(in srgb, var(--gp-action-primary), var(--gp-color-black) 18%);
transition:
background-color var(--gp-motion-press) ease-out,
transform var(--gp-motion-press) ease-out;
}
@media (hover: hover) {
.gp-btn:hover:not(.is-pressed):not(.gp-btn--ghost):not(:disabled):not(.disabled):not([disabled]):not([aria-disabled="true"]) {
transform: translateY(-1px) scale(1.03);
background-color: color-mix(in srgb, var(--gp-action-primary), var(--gp-color-white) 12%);
/* border-color, color and box-shadow are NOT decoration here. Taking :hover out
* of the no-op list above hands those three properties back to
* .btn-primary:hover (bootstrap.css:2949), which paints border-color #0a58ca --
* a blue rim on a green button. Two shipped pages carry both classes and would
* have shown it: referrals/new.html.erb:15 and vouchers/index.html.erb:14. A
* parity screenshot cannot catch a hover state, so nothing downstream would
* have caught it either. */
border-color: var(--gp-border-glass-bright);
color: var(--gp-action-on-primary);
box-shadow: var(--gp-shadow-glass);
}
}
/* Reduced motion: the colour, not the movement -- same trade the source recipe
* makes for .gp-buy-chuds. */
@media (prefers-reduced-motion: reduce) {
.gp-btn,
.gp-btn.is-pressed,
.gp-btn:hover {
transform: none !important;
}
}
/* Keyboard and switch users need a visible focus indicator, and the control this
* replaces has none.
*
* Attributed carefully, because it was wrong here for a while and the wrong version
* spread into two accepted.json files and a plan: it is NOT the operator's row that
* removes the ring. The row never sets `outline` at all -- its only `outline` matches
* are btn-outline-* class names. `application.css` removes it, on
* `#performers-pay .qty-pill .qty-btn:focus` and `.qty-input:focus`, which is the OLD
* checkpoint stepper that .gp-stepper__btn replaces. So this is a repo stylesheet's
* omission being corrected by a repo stylesheet, and it does not depend on the row
* being emptied to take effect -- which is why it is visible in compat.
*
* Live in production since v196 on six elements: the /vouchers field and Redeem
* button, and the checkpoint frame's two stepper buttons, Send and Buy More Chuds.
* Corey confirmed 2026-09-15 that /referrals/new matches them. */
.gp-btn:focus-visible,
.gp-field__control:focus-visible,
.gp-stepper__btn:focus-visible {
outline: 3px solid var(--gp-border-focus);
outline-offset: 2px;
}
.gp-btn:disabled,
.gp-btn.disabled,
.gp-btn[disabled],
.gp-btn[aria-disabled="true"] {
opacity: 0.55;
cursor: not-allowed;
}
/* Busy state. ::before rather than the segmented control's ::after
* (application.css:352, same @keyframes gp-spin) because most .gp-btn labels
* read left to right with no trailing icon slot, so a leading spinner sits where
* a reader's eye already lands first. Sized in em so it scales with the button's
* own font-size instead of a fixed px -- "sized to the label". The gap already on
* .gp-btn spaces it from the label text for free. Markup that adds .is-busy is
* another agent's; this only draws the state. */
.gp-btn.is-busy::before {
content: "";
display: inline-block;
width: 0.75em;
height: 0.75em;
border: 2px solid currentColor;
border-right-color: transparent;
border-radius: 50%;
animation: gp-spin 0.6s linear infinite;
}
@media (prefers-reduced-motion: reduce) {
.gp-btn.is-busy::before {
animation: none;
}
}
.gp-btn--block {
display: flex;
width: 100%;
}
/* No border, no fill, no shadow -- the avatar step's Random button, which
* must not compete with Done for attention. Overrides the base fill AND the
* whole state-override list above it, for the same reason that list exists in
* the first place: .gp-btn--ghost:focus etc. matches (0,1,1,0) same as
* .gp-btn:focus, so it only wins on source order, and skipping any one state
* here would let that state's rule repaint the button green again. Hover and
* press are different: those two rules (above) carry :not(.gp-btn--ghost)
* themselves, so a ghost button is excluded outright rather than relying on a
* specificity tie it would now lose. The
* focus-visible ring is deliberately NOT touched -- .gp-btn:focus-visible
* above already matches (it keys on .gp-btn, not on which fill modifier rides
* along with it), and an accessibility ring is exactly what a ghost button
* still needs. */
.gp-btn--ghost {
background: none;
border-color: transparent;
color: var(--gp-text-body);
box-shadow: none;
}
.gp-btn--ghost:hover,
.gp-btn--ghost:focus,
.gp-btn--ghost:active,
.gp-btn--ghost.active,
.gp-btn--ghost:disabled,
.gp-btn--ghost.disabled,
.gp-btn--ghost[disabled],
.gp-btn--ghost[aria-disabled="true"] {
background: none;
border-color: transparent;
color: var(--gp-text-body);
box-shadow: none;
}
.gp-btn--ghost:active:focus {
box-shadow: none;
}
/* ---------------------------------------------------------------------------
* Form field — the same recipe on #login:725, #vouchers:1374, [id$="-edit"]:1483
* and #referrals-new:1611. Those three form pages are the same page written three
* times (251 lines total).
*
* These classes are MODIFIERS on Bootstrap's .form-control / .form-label / .mb-3,
* not replacements for them, which is what the migration plan calls for: named
* classes go on alongside the utility classes, and a utility comes off only once
* its matched-rule inventory is empty. So this block carries only what the page
* blocks added on top of Bootstrap — fill, border, padding and display all still
* come from .form-control, exactly as they do in production.
*
* Reconciled 2026-09-14. What that changed:
*
* - The glass fill and white border are gone. Exactly ONE .form-control in the
* row was ever glass — `#login .form-control { background-color: rgba(255,
* 255, 255, 0.4) }` — and that block left the row in the 2026-09-20 cut, so
* none of the 1,670 baseline lines declares a glass .form-control today. It
* did not belong on the component either way: on the #fefefe page background
* the fill and the white border both composite to white — 1.01:1, an
* invisible control that fails WCAG 1.4.11.
* - #vouchers is NOT the odd one out. Its `.form-control { color: var(--green) }`
* at baseline:1383 never wins: text_field_tag emits id="code", so
* `#vouchers #code` at :1374 outranks it and paints the same dk-green/800/
* centred recipe as the other three pages. That colour declaration is dead,
* like the .footer non-breaking space.
* - The label is 0.75rem. `.mb-3 label` (0,1,1,1) beats `.form-label` (0,1,1,0)
* on all three pages that have labels, so the 0.6rem uppercase recipe has
* never rendered — see the note on font/size-label in design/tokens.json.
* - .gp-field sets no margin. The extraction's 0.5rem was dead anyway — .mb-3 is
* `margin-bottom: 1rem !important` (bootstrap.css:6992) and a non-important
* declaration never beats it. Removed as tidy-up, not as a fix.
* ------------------------------------------------------------------------ */
.gp-field {
/* #referrals-new:1667 centres the label and help text; #login and the edit page
* leave them left. Centred is what the one page migrating before the run does. */
text-align: center;
}
.gp-field__label {
display: block;
margin-bottom: 0;
font-size: var(--gp-font-size-small);
text-transform: uppercase;
}
/* No height. 42px was here, and it is ONE PAGE'S value wearing the component's name:
* of the four blocks that share this recipe, only #vouchers (baseline:1374) sets a
* height on .form-control. #login (:725), [id$="-edit"] (:1483) and #referrals-new
* (:1611) all leave Bootstrap's own 38px standing, and that is what they render --
* measured, 38px on /referrals/new against 42px on /vouchers.
*
* It mattered more than it looks. The operator's row never declares a height on
* #referrals-new .form-control, so there was nothing there to outrank this: adopting
* .gp-field__control on that page would have made the field 42px the moment the markup
* deployed -- in compat, before any row edit, inside the freeze. The height now lives
* in pages.css under #vouchers .form-control, mirroring the row's own selector.
*
* Same call, same reason, as #vouchers #code { font-size }. */
.gp-field__control {
border-radius: var(--gp-radius-pill);
color: var(--gp-text-field);
font-weight: var(--gp-font-weight-heavy);
text-align: center;
}
/* .form-control:focus is (0,2,0) and sets `color: #212529`, which beats
* .gp-field__control at (0,1,0) — the green text would turn near-black the moment
* the field is focused. Today an ID-scoped rule in the Setting row wins that
* fight; after cutover nothing does. */
.gp-field__control:focus {
color: var(--gp-text-field);
}
/* Invalid. These deliberately hook the classes bootstrap_form ALREADY emits —
* .is-invalid on the control, .invalid-feedback on the message — rather than
* inventing a --error modifier it will never render. Both selectors still require
* one of ours, so nothing outside a .gp-field is touched. */
.gp-field__control.is-invalid {
border-color: var(--gp-border-error);
}
.gp-field .invalid-feedback {
color: var(--gp-text-error);
font-size: var(--gp-font-size-small);
}
/* There is no .gp-field__hint. bootstrap_form's `help:` renders Bootstrap's
* .form-text — 0.875em, #6c757d, upright — on every page that shows help text.
* The italic version the extraction carried across exists only under #login
* (baseline:721), where the very same selector is display:none (baseline:707).
* It has never been seen. Use .form-text. */
/* The form column those three pages each re-declared. */
.gp-form {
width: min(var(--gp-dimension-form-width), 100% - 2rem);
margin-inline: auto;
}
/* ---------------------------------------------------------------------------
* Card
* ------------------------------------------------------------------------ */
.gp-card {
border-radius: var(--gp-radius-card);
background: var(--gp-surface-glass);
border: 1px solid var(--gp-border-glass);
box-shadow: var(--gp-shadow-card);
}
/* ---------------------------------------------------------------------------
* Quantity stepper — replaces #performers-pay .qty-pill and its eight
* !important declarations, which existed only to undo Bootstrap's .btn styling.
* Building it from nothing avoids the fight entirely.
*
* Note: .qty-pill is ALSO a different admin component (admin/orders/_line_item).
* That is why this is named .gp-stepper rather than reusing the class.
* ------------------------------------------------------------------------ */
.gp-stepper {
display: inline-flex;
align-items: center;
gap: 0.25rem;
height: var(--gp-control-height);
padding-inline: 0.5rem;
}
.gp-stepper__btn {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 2.75rem;
min-height: 2.75rem;
padding: 0;
border: 0;
background: transparent;
color: inherit;
line-height: 1;
cursor: pointer;
}
.gp-stepper__btn svg {
width: 22px;
height: 22px;
}
.gp-stepper__input {
width: 3rem;
border: 0;
background: transparent;
font-size: 1.25rem;
font-weight: var(--gp-font-weight-heavy);
text-align: center;
/* Number inputs get spinners that fight a 3rem width. */
appearance: textfield;
-moz-appearance: textfield;
}
.gp-stepper__input::-webkit-outer-spin-button,
.gp-stepper__input::-webkit-inner-spin-button {
appearance: none;
margin: 0;
}
/* ---------------------------------------------------------------------------
* Progress meter — the attendee level bar.
* ------------------------------------------------------------------------ */
.gp-meter {
height: 0.4rem;
border-radius: var(--gp-dimension-radius-round);
background: var(--gp-color-grey-400);
overflow: hidden;
}
.gp-meter__fill {
height: 100%;
background: var(--gp-action-primary);
}
/* ---------------------------------------------------------------------------
* The broadcast board — the projected stage screen, which QLab screen-captures
* from a browser on the venue machine and shows whole.
*
* Everything here is written in DESIGN PIXELS off the 1920x1080 mockup
* (jVFl3xOobvKkxt3QtAdl66, node 102:253), multiplied by --stage-u. On a
* machine running the capture at 1920x1080 that unit is exactly 1px and the
* numbers below are the mockup's own; on any other screen the board scales
* whole and letterboxes, so the same page is reviewable on a laptop or a phone
* without a second layout. min() of the two ratios is what keeps it from ever
* overflowing into a scrollbar, which a capture would record.
*
* The board is OPAQUE and full-bleed on purpose. Corey, 2026-09-14: QLab
* screen-captures this page and shows it whole, so there is nothing behind it
* to frost and nothing to key — only the purchase toasts on
* /order_notifications are keyed.
*
* THAT IS A CHANGE, NOT A DESCRIPTION OF WHAT WAS. `#performers-status {
* background-color: red !important }` in the custom_css Setting row is a
* WORKING CHROMA KEY, not a debug leftover — the old board was composited into
* video and needed a key colour, and flagging it as a bug was already wrong
* once (docs/attendee-design-system-plan.md, section 1.1).
*
* So covering it had to be checked rather than assumed, because an opaque
* plate removes exactly the transparency a keying cue depends on, and that
* fails in front of an audience with no error anywhere. ASKED AND ANSWERED —
* Corey, 2026-09-14: nothing in QLab is keying /performers/status any more. The
* rule is now dead weight in the row, and it cannot be beaten in the cascade
* anyway (the row is injected raw after every stylesheet), so the plate covers
* it and it can be deleted from the row after the run.
* ------------------------------------------------------------------------ */
.gp-stage {
--stage-u: min(calc(100vw / 1920), calc(100vh / 1080));
/* The board's one duration and one curve, declared HERE because every moving
* thing on this screen is inside .gp-stage and nothing else on the site is.
*
* They used to live on .gp-performer-bar, which is a sibling of the feed and
* not an ancestor of it — so .gp-feed-row inherited neither, silently took
* the `260ms, ease-out` fallbacks written beside its own transition, and
* animated on a different curve from the rail beside it. The rail only got
* the right one because stage_board_controller.js reads the value off a BAR
* element by hand. One movement, two easings, and nothing said so.
*
* easeOutCubic, so a payment lands rather than arrives: quick off the mark,
* settling at the end. Longer than the 200ms poll on purpose — a transition
* that finishes before the next sample arrives makes the bar pulse five
* times a second, where overrunning means each new width interrupts the last
* mid-flight and the browser re-targets from wherever it is.
*
* The client reads both of these rather than carrying its own copy, so this
* is the one place either is tuned. */
--stage-tween: 340ms;
--stage-ease: cubic-bezier(0.33, 1, 0.68, 1);
position: fixed;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
/* The letterbox, on a screen that is not 16:9. Black, like any projector. */
background: var(--gp-color-black);
overflow: hidden;
}
.gp-stage__board {
position: relative;
width: calc(1920 * var(--stage-u));
height: calc(1080 * var(--stage-u));
/* Sky and the CHUD(TM) CHECKPOINT title, both baked into the artwork.
*
* The title is art rather than text because the art is pixel-exact and needs
* nothing installed. Grange and Richmond Display ARE installed on Corey's Mac
* (Adobe CoreSync, which is why they are not in ~/Library/Fonts and why a
* first look said they existed nowhere), so live text is now possible — but
* it is only correct on a machine that has them, and this page is projected.
* Art cannot fall back to Helvetica in front of a room. To switch: a sky-only
* plate from node 102:257 and an element in --gp-font-family-grange. */
/* The `none` fallback matters: an undefined var() poisons the whole
* declaration, and a board with no background at all is where the custom_css
* row's red would finally show through. */
background: var(--stage-plate, none) center / cover no-repeat, var(--gp-color-black);
color: var(--gp-text-on-image);
/* The token carries both names — the web project's lowercase slug and the
* CoreSync install's capitalised one — so this covers a venue machine whether
* or not its Creative Cloud is signed in. Deliberately NOT --gp-font-family:
* the one thing Corey ruled out for the stage is IBM Plex Sans, so the
* excluded face must not be in the board's fallback chain either. */
font-family: var(--gp-font-family-grange);
}
/* Left empty, deliberately. QLab composites its countdown over this region as
* a video overlay, so anything drawn here is covered during a checkpoint and
* only visible between them — which is worse than nothing. Mockup node 113:450:
* 217x137 at (1575, 88). */
.gp-stage__timer-reserve {
position: absolute;
top: calc(88 * var(--stage-u));
right: calc(128 * var(--stage-u));
width: calc(217 * var(--stage-u));
height: calc(137 * var(--stage-u));
}
/* Invisible while the board is doing its job. It appears only when the client
* has given up or has been failing for two seconds, because the failure it
* describes is a board frozen at numbers that look plausible — nobody is
* standing at a projected screen to notice it stopped, and the QLab countdown
* carries on regardless. Bottom left, away from the timer overlay and away from
* the bars. */
/* A broken wifi symbol, bottom left. No words: this is projected across a
* venue, so a sentence at any size that does not intrude is a sentence nobody
* can read, and the one fact the room needs is that the board has stopped being
* true.
*
* On a chip rather than bare, because the bottom of the plate is pale cloud and
* a light glyph would vanish into it — the same dark ground the note used. */
.gp-stage__offline {
position: absolute;
left: calc(64 * var(--stage-u));
bottom: calc(24 * var(--stage-u));
display: none;
padding: calc(12 * var(--stage-u));
border-radius: var(--gp-dimension-radius-card);
background: var(--gp-surface-ink);
color: var(--gp-text-on-dark);
opacity: 0.8;
}
.gp-stage__offline-icon {
display: block;
width: calc(48 * var(--stage-u));
height: calc(48 * var(--stage-u));
fill: none;
stroke: currentColor;
stroke-width: 1.9;
stroke-linecap: round;
}
.gp-stage__offline-dot {
fill: currentColor;
stroke: none;
}
/* The gap the slash sits in. Its colour is the chip's, not the page's, so it
* erases the arcs underneath rather than painting a stripe over them. */
.gp-stage__offline-cut {
stroke: var(--gp-surface-ink);
stroke-width: 5;
}
.gp-stage[data-stage-board-state="stopped"] .gp-stage__offline,
.gp-stage[data-stage-board-state="failing"] .gp-stage__offline {
display: block;
}
/* ---------------------------------------------------------------------------
* The feed column — node 102:383, 500x804 at (64, 246), nine 500x71 rows 89
* apart. Every number below is measured off that frame and expressed as a ratio
* of --feed-row-height, so the whole column scales from one value.
*
* Newest at the BOTTOM. Entries rise and ghost out of the top, which is why the
* rail is bottom-anchored and why the fade is a mask on the column rather than
* an opacity on each row: a row never has to know where in the list it is.
*
* The mask fades the TOP ONLY. A send arrives by sliding in from the left at
* full strength — it is the newest thing on the board and the room is watching
* for it — so fading the bottom would dim the one row that has just earned
* attention. Departure is the opposite: a row leaving the top should thin out
* rather than be cut off.
* ------------------------------------------------------------------------ */
.gp-feed {
--feed-row-height: calc(71 * var(--stage-u));
/* 89 / 71 — the mockup's row pitch over its row height, as a PLAIN NUMBER so
* that the client can read it with parseFloat. A custom property holding a
* calc() computes to the literal string "calc(...)", which is how railPitch
* used to silently return zero; a bare ratio has nothing to resolve. The
* pitch below is derived from it, so the two cannot drift apart. */
--feed-pitch-ratio: 1.2535;
--feed-row-pitch: calc(var(--feed-row-height) * var(--feed-pitch-ratio));
/* How long one row takes to cross the whole column, bottom to gone.
*
* Written in milliseconds as a bare number for the same reason as the ratio
* above: the client reads it, and "11s" would parse to 11.
*
* This IS the speed of the board. Travel is the column plus a row's height at
* each end, about 946 design px, so 11s is roughly 86 px a second — which
* puts consecutive sends about one mockup pitch apart when the room is
* sending once a second. Slower sends leave a longer gap, because a gap is
* now a real measurement of how quiet the room is rather than something the
* column hides by closing up. */
--feed-drift: 11000ms;
/* The pop. A row does not fade in at the bottom any more — it arrives at its
* place and springs open there, which is a beat the room can actually catch
* at the back of a hall where a fade is just a smudge.
*
* Short and fixed, deliberately NOT a fraction of the drift: the pop is an
* event and should feel the same whatever speed the column is running at. It
* is its own animation rather than extra keyframes inside the drift for the
* same reason — percentages inside an 11s timeline would stretch the pop
* every time somebody retuned the drift. */
--feed-pop: 420ms;
/* How far a row's drift rate may sit either side of the column's own.
*
* Sends do not arrive at a metronome and rows should not travel like one. At
* a fifth, two rows released a pitch apart reach the top having drifted
* noticeably closer or further, and may slide over one another on the way.
* That overlap is wanted: it is what a column of real traffic looks like
* rather than a printout. The client picks one rate per row. */
--feed-drift-jitter: 0.2;
/* The closest two rows may be RELEASED, as a fraction of a pitch.
*
* Below one because overlap is allowed now. Not zero, because two sends
* landing in the same poll would otherwise pop in on top of each other, which
* is a collision rather than a drift — the rates need a little distance to
* pull rows together or apart over. */
--feed-min-gap-ratio: 0.72;
/* A little lift under every row.
*
* Rows are allowed to cross now, and two white pills sliding over one another
* with no separation read as one tangled shape rather than as one in front of
* the other. The shadow is what makes the stacking order legible — which is
* the whole reason newest-on-top is worth having.
*
* No --gp- prefix and not a token: it scales with --stage-u, and a design
* token is a fixed value. Same reasoning as --stage-u and the
* --performer-bar-* inputs. */
--feed-row-shadow: 0 calc(2 * var(--stage-u)) calc(9 * var(--stage-u))
rgba(0, 0, 0, 0.3);
/* Named, because the drift keyframe needs it and cannot ask for it. A
* percentage inside translateY resolves against the ELEMENT's own height, not
* its container's — so `translateY(-100%)` on a row is one row, not one
* column. Measured: a row crossed at 19px a second where it should have done
* 86, which would have piled the whole night up in the bottom fifth of the
* column and never let a single row leave the top. */
--feed-height: calc(804 * var(--stage-u));
/* Room for a row's shadow to fall outside the row without being sliced by the
* clip.
*
* A row is exactly as wide as this column and sits flush against both edges,
* so `overflow: hidden` cut its shadow off dead straight at the right-hand
* end — a hard vertical line with the shadow's own gradient beside it, which
* reads as the pill itself being chopped rather than as a missing shadow.
*
* The fix is bleed on the CLIPPING box, not on the row: the container grows
* and shifts by this much on each side while the rail is inset by the same
* amount, so every row still lands at the mockup's 500 wide at x 64. The
* geometry is unchanged; only the scissors moved. */
--feed-bleed: calc(16 * var(--stage-u));
position: absolute;
top: calc(246 * var(--stage-u));
left: calc((64 * var(--stage-u)) - var(--feed-bleed));
width: calc((500 * var(--stage-u)) + var(--feed-bleed) * 2);
height: var(--feed-height);
overflow: hidden;
/* Top only — back to Corey's original ruling of 2026-09-14, and for the reason
* he gave then: the newest row is the one the room is watching for and must
* not be dimmed. The bottom fade existed only because rows used to rise
* THROUGH the bottom edge and were sliced by it. They pop into place now
* instead of travelling through it, so there is nothing left to hide.
*
* A row still ghosts out at the top, where thinning is the right way to
* leave. */
-webkit-mask-image: linear-gradient(to bottom, transparent, #000 13%);
mask-image: linear-gradient(to bottom, transparent, #000 13%);
}
/* Just a box now. It used to be the thing that moved — the whole column was
* translated up by a pitch on every arrival and eased back — which is why rows
* were stationary between sends and why a quiet room looked exactly like a busy
* one. Every row carries its own movement now, so this holds them and nothing
* else. */
.gp-feed__rail {
position: absolute;
/* Inset horizontally by the bleed, so rows sit exactly where the mockup puts
* them while the clip sits further out. */
inset: 0 var(--feed-bleed);
}
/* The drift. One row, from below the bottom edge to above the top one, at a
* constant rate.
*
* Linear because this is a conveyor and a conveyor has one speed. Anything
* eased would have rows bunching and spreading as they crossed, which would
* read as the spacing meaning something when it only meant easing — and the
* spacing does mean something now: it is the time between two sends. */
@keyframes gp-feed-drift {
from {
translate: 0 0;
}
to {
translate: 0 calc(-1 * (var(--feed-height) + var(--feed-row-height)));
}
}
/* Squash and stretch. Opens from nothing at zero height, overshoots a little
* past full, settles.
*
* `scale` and `translate` are separate properties, not two halves of one
* `transform` — which is the only reason a row can run two animations at once
* without the second clobbering the first. Written as `transform`, the pop and
* the drift would each be animating the same property and the later one would
* simply win. */
@keyframes gp-feed-pop {
from {
scale: 0.7 0;
}
55% {
/* Overshoot in HEIGHT ONLY, and never past 1 in width.
*
* A row is exactly as wide as the column it sits in, so 1.03 pushed it past
* the clip on both sides; and with transform-origin now pinned to the row's
* bottom edge, height can only grow upward into the column. Between them
* that is the "you can see them get cut off at the edge" during the
* stretch. Width grows into place and stops; height is where the spring
* lives. */
scale: 1 1.12;
}
to {
scale: 1 1;
}
}
/* Structurally the PerformerBar again: an accent capsule with the unfilled part
* as a white capsule inset by the rim. Here the accent that shows is the
* leading cap rather than a fill, and it is a fixed width instead of a value. */
.gp-feed-row {
--feed-row-accent: var(--gp-accent-fallback);
--feed-row-rim: calc(var(--feed-row-height) * 0.141);
/* Anchored to the bottom of the column and moved only by the drift, so its
* position is a function of how long ago it arrived and nothing else. That is
* the whole idea: the column no longer has slots, so nothing has to shuffle
* when something joins or leaves.
*
* The client sets a negative animation-delay to place a row that is already
* part-way across — every row the server rendered, and any row held back to
* keep two sends from overlapping. */
position: absolute;
left: 0;
right: 0;
bottom: 0;
/* The pop grows from the row's own bottom edge, not its middle. With the
* middle as the origin a stretch past full height hangs BELOW the row's
* resting position — and that position is flush with the column's bottom
* edge, so the overshoot was clipped every single time. */
transform-origin: 50% 100%;
/* NEWEST ON TOP. Rows are appended in arrival order and are positioned
* siblings with no z-index, so paint order follows DOM order and the last one
* added draws over the others. That was free and invisible until rows were
* allowed to overlap; it is load bearing now, so anything that reorders this
* list, or gives a row a stacking context of its own, changes which send is
* legible when two cross. */
/* BOTH, not forwards.
*
* A row held back to keep it off the one before it gets a positive
* animation-delay, and during that delay `forwards` alone applies no
* animation styles at all — the row sits at its natural position, which is
* its resting slot at the bottom edge, in full view. Then the delay expires,
* it snaps down to the start of the keyframes, and only then begins moving.
* Every queued row appeared at the bottom, jumped, and restarted, and two of
* them waiting at once sat on top of each other. `backwards` is what holds a
* delayed row at its FROM state, and `both` keeps the `forwards` half so a
* finished row stays off the top until it is removed.
*
* It matters twice as much now: a delayed row's POP is also held at its from
* state, which is zero height, so a row waiting its turn is invisible rather
* than sitting squashed at the bottom of the column. One animation-delay
* covers both animations, which is what keeps them in step. */
animation:
gp-feed-drift var(--feed-drift) linear both,
gp-feed-pop var(--feed-pop) ease-out both;
display: flex;
align-items: stretch;
flex: none;
height: var(--feed-row-height);
padding: var(--feed-row-rim);
border-radius: var(--gp-dimension-radius-round);
background: var(--feed-row-accent);
box-shadow: var(--feed-row-shadow);
font-family: var(--gp-font-family-grange-condensed);
font-stretch: condensed;
font-weight: var(--gp-font-weight-bold);
font-size: calc(var(--feed-row-height) * 0.4225);
line-height: 1;
}
/* 120 design px of the 500, measured from the pill's left edge — so the cap is
* the accent showing past the white capsule, not a separate shape. */
.gp-feed-row__cap {
flex: none;
display: flex;
align-items: center;
justify-content: flex-start;
gap: calc(var(--feed-row-height) * 0.056);
width: calc(var(--feed-row-height) * 1.69 - var(--feed-row-rim));
padding-left: calc(var(--feed-row-height) * 0.085);
color: var(--gp-text-on-dark);
}
.gp-feed-row__plane {
flex: none;
width: calc(var(--feed-row-height) * 0.4366);
height: calc(var(--feed-row-height) * 0.4366);
fill: currentColor;
}
.gp-feed-row__amount {
white-space: nowrap;
}
.gp-feed-row__name {
flex: 1 1 auto;
min-width: 0;
display: flex;
align-items: center;
margin: 0;
padding: 0 calc(var(--feed-row-height) * 0.2817);
border-radius: var(--gp-dimension-radius-round);
background: var(--gp-surface-track);
color: var(--gp-text-body);
/* A long name shortens rather than wrapping or widening the pill. The row is
* a fixed height and the column is a fixed width; there is nowhere for a
* second line to go. */
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
/* Node 102:258: 1246x784 at (601, 266), three 250-tall rows 267 apart. Centred
* rather than top-aligned so a bill of one or two sits where the eye already
* is; with the three the show runs it is the mockup's layout exactly, since
* 3 x 250 + 2 x 17 = 784. A fourth would clip, and clipping beats squashing
* the cast down to unreadable on a screen read from the back of a room. */
.gp-stage__performers {
position: absolute;
top: calc(266 * var(--stage-u));
left: calc(601 * var(--stage-u));
width: calc(1246 * var(--stage-u));
height: calc(784 * var(--stage-u));
display: flex;
flex-direction: column;
justify-content: center;
gap: calc(17 * var(--stage-u));
overflow: hidden;
}
/* ---------------------------------------------------------------------------
* PerformerBar — the Figma library component (BACEWPuGJ7nSBTmRcKmbfa 20:307):
* ringed avatar, a track filled in the character's own colour with the running
* total right-aligned AT THE FILL EDGE, and white remainder out to the max.
* The total sitting inside the fill rather than on the track is the whole
* point of the shape — the number travels with the bar.
*
* Sized entirely from --performer-bar-size, the avatar diameter: every other
* number is a ratio of it, so the board sets one value and the row scales
* whole. The ratios are the MOCKUP's (node 102:259, a 250 avatar), not the
* library frame's — 20:307 draws a slightly taller track and bigger number on
* its 120 avatar, and where the two disagree the board is what ships. The
* accent comes in as --performer-bar-accent, which the caller sets per
* performer from performers.icon_color through
* PerformersHelper#checkpoint_accent.
*
* Those two and --stage-u carry no --gp- prefix on purpose. That prefix means
* "defined in design/tokens.json", and script/build_tokens.rb --check fails CI
* on any var(--gp-*) it cannot find there. These are a component's own inputs,
* not tokens, so they are deliberately outside the namespace the check owns.
* ------------------------------------------------------------------------ */
.gp-performer-bar {
--performer-bar-size: 120px;
--performer-bar-accent: var(--gp-accent-fallback);
/* Every number below is a ratio of the avatar diameter, measured off the
* mockup's 250. Radii included — an absolute px radius does not scale with
* the board, so a bar that reads as a soft rectangle at 1920 turns into a
* pill on a half-size screen. */
--performer-bar-rim: calc(var(--performer-bar-size) * 0.04);
--performer-bar-radius: calc(var(--performer-bar-size) * 0.056);
--performer-bar-pad: calc(var(--performer-bar-size) * 0.072);
display: flex;
align-items: center;
height: var(--performer-bar-size);
}
.gp-performer-bar__avatar {
flex: none;
width: var(--performer-bar-size);
height: var(--performer-bar-size);
border-radius: var(--gp-dimension-radius-round);
/* The ring is the character's colour and the reason the row reads at
* distance before any of the text does. */
border: var(--performer-bar-rim) solid var(--performer-bar-accent);
background: var(--gp-color-grey-200);
object-fit: cover;
}
/* A WHITE bar with the character's colour as its border, and their fill
* growing inside it. Worth being explicit, because an earlier build had it
* inside out — an accent-filled track with the unfilled part as a white block
* inset by the rim. The two produce identical pixels, and only one of them
* survives someone reading it: this is a meter, and a meter's track is the
* empty thing. */
.gp-performer-bar__track {
position: relative;
flex: 1 1 auto;
/* Mockup: the track starts 286 into a row whose avatar is 250. */
margin-left: calc(var(--performer-bar-size) * 0.144);
height: calc(var(--performer-bar-size) * 0.52);
box-sizing: border-box;
border: var(--performer-bar-rim) solid var(--performer-bar-accent);
border-radius: var(--performer-bar-radius);
background: var(--gp-surface-track);
}
.gp-performer-bar__fill {
height: 100%;
border-radius: calc(var(--performer-bar-radius) - var(--performer-bar-rim)) 0 0
calc(var(--performer-bar-radius) - var(--performer-bar-rim));
background: var(--performer-bar-accent);
/* The tween. The client polls at 5 Hz and writes a new width; letting the
* compositor walk between the two is smoother than any number JavaScript
* could interpolate, and is no code at all. */
transition: width var(--stage-tween) var(--stage-ease);
}
/* The total rides the fill's leading edge rather than sitting at either end of
* the track, so the number and the bar are one object. Positioned against the
* padding box, which is the same coordinate space the fill's width is a
* percentage of. */
.gp-performer-bar__total {
position: absolute;
top: 50%;
transform: translate(-100%, -50%);
padding-right: var(--performer-bar-pad);
/* Family AND font-stretch, which looks redundant and is not. Condensed is a
* separate family over the web link, where font-stretch does nothing; on the
* CoreSync install it is a width axis, and font-stretch is what reaches the
* condensed cut. The token's two names and this declaration's two properties
* are the same fact from both sides.
*
* Condensed is not decoration. The mockup's "1703" (node 102:263) is Grange
* Bold Condensed at 64px, read off the node rather than inferred from the
* rendered width of the string — the inferred figure was 60, and the four
* design px between them are four real projected pixels. Regular-width Grange
* at that size is nearer 140 wide, enough to reach the left end of a short
* fill and collide with it.
*
* 700, PINNED. Not "the heaviest available" — the web project stops at 700,
* but a CoreSync machine has a real Grange Heavy, so asking for 800 would
* render a genuine heavy in the venue and a synthesised bold everywhere it
* was tested. A weight is the last place you want a page to diverge by
* whether somebody is signed into Creative Cloud. */
font-family: var(--gp-font-family-grange-condensed);
font-size: calc(var(--performer-bar-size) * 0.256);
font-weight: var(--gp-font-weight-bold);
font-stretch: condensed;
line-height: 1;
white-space: nowrap;
color: var(--gp-text-on-dark);
transition: left var(--stage-tween) var(--stage-ease);
}
/* Nobody has any chuds yet, or few enough that the number is wider than the
* fill. Inside, it would overhang the accent onto the white and be half-white
* text on white. So it steps out and turns black until the fill has room —
* which is the one moment of a checkpoint when every bar is at zero and the
* room is watching for the first one to move. */
.gp-performer-bar__total--outside {
transform: translateY(-50%);
padding-right: 0;
padding-left: var(--performer-bar-pad);
color: var(--gp-text-body);
}
/* Board scale: the avatar is the mockup's 250 design px, and everything in the
* component follows from it.
*
* Declared ON THE ROW, not on the column. It was on the column, with a comment
* claiming that a value set on the row could never be overridden by a rule on
* the parent. That is backwards, and it is how a custom property works rather
* than a matter of specificity: a declaration on the element itself always
* beats the value inherited from its parent, whatever the parent's selector.
* So .gp-performer-bar's own 120px default won, the board drew every row at
* 48% of its designed size for the whole of its life, and the two fallbacks
* below were dead code that had never once applied. Measured in the browser,
* not reasoned about: the avatar came back 120x120 where the mockup says 250,
* and the track 1109 wide where the mockup says 960.
*
* Reaching the row means these selectors have to out-specify .gp-performer-bar
* (0,1,0), which a descendant selector does at (0,2,0); the two :has() rules
* carry their argument's specificity on top of that and land at (0,3,0), so
* they still beat the base rule and each other by source order, exactly as the
* column version intended.
*
* A FOURTH performer does not clip. The cast is three, but activating one is a
* single click in admin and this screen is projected: a row silently cut in
* half is not something anybody would notice until the room did. These sizes
* are the same (784 - 17(N-1)) / N the three-row layout already satisfies. Past
* five it clips, which by then is the honest outcome — six rows on this column
* are unreadable from the back of a room at any size. */
.gp-stage__performers .gp-performer-bar {
--performer-bar-size: calc(250 * var(--stage-u));
}
/* (784 - 17 x 3) / 4 */
.gp-stage__performers:has(> :nth-child(4)) .gp-performer-bar {
--performer-bar-size: calc(183 * var(--stage-u));
}
/* (784 - 17 x 4) / 5 */
.gp-stage__performers:has(> :nth-child(5)) .gp-performer-bar {
--performer-bar-size: calc(143 * var(--stage-u));
}
/* First paint, and only first paint. The board is server-rendered complete, so
* a refresh has nothing to animate FROM — tweening the bars up from whatever
* the markup said, or sliding in rows that were already in the HTML, is motion
* that reports no news. The client adds this for its first response and takes
* it off again a reflow later.
*
* Only the bars need it. The feed places a row the server already rendered by
* giving it a negative animation-delay — it is dropped into the middle of a
* drift already in progress rather than played in from the start — so there is
* nothing there to suppress. Zeroing this duration turns off the fill and total
* transitions, and countTo() reads the same property, sees a duration it cannot
* count over, and writes the number straight in. */
.gp-stage--instant {
--stage-tween: 0ms;
}
/* One switch, not two. Zeroing the duration turns off the CSS transitions AND
* the counting total, because the client reads that same custom property to
* decide how long to count for — so a reader who has asked for less motion does
* not get a bar that holds still beside a number that spins. */
@media (prefers-reduced-motion: reduce) {
.gp-stage {
--stage-tween: 0ms;
}
.gp-performer-bar__fill,
.gp-performer-bar__total {
transition: none;
}
/* The feed's drift is not decoration — it is how a row gets from the bottom
* of the column to the top, and switching it off would pile every send on top
* of the last one at the bottom edge. So the column falls back to what it was
* before: rows held still in slots, stacked from the bottom, replaced rather
* than animated. The client positions them (see stackRows) because with no
* animation running there is nothing else to place them. */
.gp-feed-row {
animation: none;
}
}
/* ---------------------------------------------------------------------------
* Respect the reader's motion and transparency settings. The baseline used
* backdrop-filter heavily with no fallback; on a device with reduced
* transparency the glass becomes unreadable rather than merely flat.
*
* .gp-field__control is not listed: it no longer sets a fill of its own, so
* there is nothing here to opt out of.
* ------------------------------------------------------------------------ */
@media (prefers-reduced-transparency: reduce) {
.gp-glass,
.gp-card {
background: var(--gp-color-white);
backdrop-filter: none;
-webkit-backdrop-filter: none;
}
.gp-glass::after {
display: none;
}
}
@media (prefers-contrast: more) {
.gp-glass,
.gp-card {
background: var(--gp-color-white);
border-color: var(--gp-text-body);
}
}
/* ==== gp-status: attendee status bar (cluster A) ==== */
/* Checkpoint UI polish plan, 2026-09-17; rebuilt in round 16 (cluster A) to
* public/glass-test-status.html revision 10, the prototype Corey approved.
* Styles shared/_status_bar.html.erb exclusively — the homepage,
* attendees/edit, the checkpoint page and the takeover.
*
* ONE CARD, TWO SKINS, AND THE ACCENT IS A VARIABLE. The checkpoint passes
* `glass: true` and gets glass v2 plus the blue accent; the homepage and
* attendees/edit keep the opaque fill and the site green. Round 14 did that
* with a pair of `.gp-status.gp-glass-v2 .gp-status__x` overrides per
* coloured part; there are more coloured parts now (the monogram, the bar,
* the ink), so the two skins set --status-accent and --status-ink once
* and every rule below reads them.
*
* ACCENT INK IS NOT THE ACCENT. --gp-color-blue measures 1.4-2.8:1 as text on
* this card and --gp-color-green is no better, so anything that is TYPE takes
* the darkened ink tokens; the monogram and the progress fill, which are not
* type, keep the brand colours. Measured on the prototype over the sky's
* darkest band, round 15.
*
* FILL LAYERS ARE PLAIN BACKGROUNDS HERE, NOT PLUS-LIGHTER. This card first
* reproduced Figma's own recipe — an inner layer blended with
* mix-blend-mode: plus-lighter rather than a flat fill — but rendered live on
* the checkpoint's clouds background, 2026-09-18, plus-lighter can only ever
* lighten, and it washed the card to pure white. Figma blends this layer
* inside its own frame, against nothing, which is a normal fill. See the same
* finding, in more detail, on the gp-checkpoint card/stepper/button below.
*/
.gp-status {
position: relative;
/* The glass layers sit at z-index -1, so the card has to be its own
* stacking context or they paint through whatever is behind it. */
isolation: isolate;
width: 362px;
max-width: 100%;
margin-inline: auto;
display: grid;
gap: 14px;
padding: 15px 17px 13px;
border-radius: var(--gp-radius-card);
border: 1px solid var(--gp-color-white-35);
/* rgba(255, 255, 255, 0.8) — same primitive as border/glass-bright, reused
* here as a fill rather than a border because the value is identical. */
background: var(--gp-color-glass-border-bright);
box-shadow: var(--gp-shadow-checkpoint-card), var(--gp-shadow-checkpoint-card-inset);
font-family: var(--gp-font-family);
color: var(--gp-color-status-ink);
--status-accent: var(--gp-color-green);
--status-ink: var(--gp-color-status-accent-ink-green);
}
/* Round 12 (item 2, Corey: "Did the status card also get the same glass
* treatment"): on the checkpoint it is glass v2 --card, like the send card
* under it. The fill, border and shadows above give way to the layers; the
* 1px border becomes padding, so the content does not move. */
.gp-status.gp-glass-v2 {
padding: 16px 18px 14px;
border: 0;
background: none;
box-shadow: var(--glass-depth);
/* Round 14, item 8 (Corey: "not white enough / a little too much blue
* showing through"): the status card's own tint, whiter than the send
* card's default (.gp-glass-v2--card, glass-tint-card) — that one stays
* unchanged, this one is status-only. */
--glass-tint: var(--gp-color-glass-tint-status);
/* Round 14, item 5 (Corey: on this page, the secondary accent — the Buy
* More Chuds blue — instead of the site green). */
--status-accent: var(--gp-color-blue);
--status-ink: var(--gp-color-status-accent-ink-blue);
}
/* The head, prototype layout A4: the name block is centred on the CARD, with
* the monogram out on the left where it balances the share button on the
* right. Both are positioned against the card's own corners rather than
* flowed beside the text, so the padding either side of this block is the
* share button's 44px and nothing has to be optically re-centred. */
.gp-status__head {
min-height: var(--gp-dimension-status-avatar);
padding-inline: var(--gp-dimension-status-share-target);
text-align: center;
}
/* Squared against the card's corner — the same inset from the left edge as
* from the top — and, since round 17, sized and placed against the TEXT
* rather than the box: the disc's top edge sits on the name's cap top and
* its foot on the level title's baseline, so it spans the text block
* optically (Corey, twice). Both numbers are measured type metrics, not
* layout boxes — see the two tokens' descriptions. The inset moved 18px →
* 19px with the top edge, because Corey asked for the left to stay even with
* it.
*
* Positioned against the CARD, which has a 1px border in the opaque skin and
* none in the glass one, so the disc lands 0.46px above the cap on glass and
* 0.54px below it opaque. Left as is: moving the containing block to the head
* to chase that half pixel costs more CSS than the half pixel is worth. */
.gp-status__avatar {
position: absolute;
left: var(--gp-dimension-status-avatar-inset);
top: var(--gp-dimension-status-avatar-inset);
width: var(--gp-dimension-status-avatar);
height: var(--gp-dimension-status-avatar);
border-radius: 50%;
display: grid;
place-items: center;
font-weight: var(--gp-font-weight-bold);
font-size: var(--gp-font-size-status-avatar);
letter-spacing: 0.02em;
color: var(--gp-color-white);
background: linear-gradient(145deg, var(--status-accent), var(--status-ink) 70%);
box-shadow: var(--gp-shadow-status-avatar), var(--gp-shadow-glass-depth-control);
}
.gp-status__name {
font-weight: var(--gp-font-weight-bold);
font-size: var(--gp-font-size-status-name);
line-height: 1.2;
}
/* Size-stable: the level name's line box never changes height and never
* wraps, so nothing below it moves while round 16-B rolls one title into
* another. .gp-status__title is the box the roll is measured in, and it has
* to be EXACTLY the level name's line box, because the rolling clone is
* positioned `inset: 0` against it.
*
* inline-FLEX, not inline-block, and that is the round-17 title-drop fix.
* An inline-block title lays its child out on a line box of its own, so the
* 17px inline-block level name sat on that line's baseline with the
* inherited strut's half-leading above it: the box measured 24px and the
* name's top was 5px below the box's (measured live 2026-09-20, 390px
* viewport — box top 312.58, level name top 317.58). The clone at `inset: 0`
* therefore settled 5px HIGH, and the frame that removed it dropped the
* title 5px in one step. Flex has no line box and no strut, so the child's
* top IS the box's top and the two copies land in the same place.
* justify-content keeps the shorter of the two names centred while the box
* is widened for the longer one — inline-block inherited that centring from
* .gp-status__who's text-align, and a flex container does not. */
.gp-status__title {
position: relative;
display: inline-flex;
justify-content: center;
min-height: 17px;
vertical-align: top;
}
.gp-status__level-name {
display: inline-block;
font-size: var(--gp-font-size-status-level-name);
font-weight: var(--gp-font-weight-semibold);
line-height: 17px;
min-height: 17px;
white-space: nowrap;
color: var(--status-ink);
}
.gp-status__stats {
display: grid;
grid-template-columns: repeat(3, 1fr);
/* stretch, not start (Corey, 2026-09-21: "the dividers on either side of
* performance points should be the same height"). Each divider is drawn on
* its own stat's box, so with `start` the boxes were as tall as their own
* content and the dividers inherited that: "PERFORMANCE POINTS" wraps to two
* lines at 390 and its neighbours do not, so the line to its left was a
* label taller than the line to its right. Stretching makes every stat the
* row's height, which is the tallest one, and the dividers match without
* anybody having to pick a number. */
align-items: stretch;
}
.gp-status__stat {
position: relative;
display: grid;
/* The boxes stretch; their CONTENT still sits at the top, so a wrapped label
* grows downwards rather than pushing its own value off centre. */
align-content: start;
justify-items: center;
gap: 1px;
text-align: center;
}
/* Hairline dividers between the stats: a soft vertical shade with a white
* highlight on its right, the same two-tone edge the glass uses elsewhere. */
.gp-status__stat + .gp-status__stat::before {
content: "";
position: absolute;
left: 0;
top: 1px;
bottom: 3px;
width: 1px;
background: var(--gp-gradient-status-divider);
box-shadow: 1px 0 0 var(--gp-color-white-50);
/* Quieter still (Corey, 2026-09-22: "slightly more quiet/muted divider").
* On the whole element rather than by picking new colours for the shade and
* its highlight separately -- they are a matched pair and fading them
* together keeps the two-tone edge the glass uses everywhere else. */
opacity: 0.55;
}
/* The level number grows past this box during a level-up, so it does not clip
* by default; only the odometer roll needs a clipping box, and round 16-B
* turns that on for the duration. The row keeps its height either way. */
.gp-status__clip {
display: inline-block;
overflow: visible;
vertical-align: top;
}
.gp-status__value {
display: block;
font-weight: var(--gp-font-weight-bold);
font-size: var(--gp-font-size-status-value);
line-height: 1.1;
font-variant-numeric: tabular-nums;
}
/* Label type F2 (Corey's pick, round 15): 10px tracked caps at regular
* weight. The values carry the hierarchy; dropping the labels from bold to
* regular and to this grey is what gives it back, and this tone still
* measures 4.64:1 through the card's tint on the darkest sky. */
.gp-status__label {
font-size: var(--gp-font-size-caption);
font-weight: var(--gp-font-weight-regular);
line-height: 1.12;
letter-spacing: 0.07em;
text-transform: uppercase;
color: var(--gp-color-status-label);
}
/* The bar does not run the full content width: the inset is one more step of
* the card's own padding scale, so the track sits 36px in from each edge. */
.gp-status__progress {
display: grid;
gap: 6px;
padding-inline: var(--gp-dimension-status-inset);
}
/* The progressbar element is the outer box, unclipped, because round 16-B
* hangs a flare off the end of the fill; the groove inside it is what clips.
* src/chud_status.js writes aria-valuenow here and the width on the fill. */
.gp-status__track {
position: relative;
height: var(--gp-dimension-status-bar-height);
}
.gp-status__track-clip {
position: absolute;
inset: 0;
border-radius: var(--gp-dimension-radius-round);
overflow: hidden;
background: var(--gp-color-status-track);
box-shadow: var(--gp-shadow-status-track);
}
.gp-status__track-fill {
position: absolute;
inset: 0 auto 0 0;
/* A fill narrower than the bar is tall reads as a defect, not a small
* number. */
min-width: var(--gp-dimension-status-bar-height);
border-radius: inherit;
background: var(--gp-gradient-status-fill-sheen), var(--status-accent);
/* Width changes on a level-up or a poll/morph refresh; the compositor
* tweens it the same way stage board leaves its bar fill to CSS rather than
* a rAF loop — see stage_board_controller.js's comment on the same choice. */
transition: width var(--gp-motion-progress-fill);
}
/* The "Next Level" numbers are LABEL-class text — same colour, weight, size
* and tracking as LEVEL and CHUDS — not values. Each child span is its own
* clipping box so round 16-B can roll the numbers up into place. */
.gp-status__caption {
margin: 0;
display: flex;
justify-content: center;
gap: 4px;
font-size: var(--gp-font-size-caption);
font-weight: var(--gp-font-weight-regular);
line-height: 1.12;
letter-spacing: 0.07em;
text-transform: uppercase;
color: var(--gp-color-status-label);
font-variant-numeric: tabular-nums;
}
.gp-status__caption > span {
display: inline-block;
overflow: hidden;
}
/* ---- round 16-B: the points bar and the level-up ----
*
* Built to public/glass-test-status.html revision 10 — option B4 for a gain
* inside a level, option C6 for the level-up. The moves are
* src/status_effects.js and their timings src/level_up.js; everything below is
* the furniture those need and nothing else draws. Every one of these
* elements is created by JS and removed again, because the two cards that are
* mounted for one attendee during an open window would otherwise each carry a
* shimmer and a flare the markup can never use.
*/
/* While a sequence owns the bar, its width is written frame by frame and the
* transition on .gp-status__track-fill above would lag every one of those
* frames by its own duration — the shimmer would arrive and the fill would
* still be catching up. */
.gp-status--busy .gp-status__track-fill {
transition: none;
}
/* The shimmer: a soft, wide band that runs the length of the bar and then
* rides the growing end. It lives in the groove rather than inside the fill,
* so it can travel past where the fill currently ends, and it overhangs the
* groove top and bottom so its own soft edges are cut off by the groove's
* clip instead of fading inside it. */
.gp-status__wave {
position: absolute;
top: calc(-1 * var(--gp-dimension-status-sweep-bleed));
bottom: calc(-1 * var(--gp-dimension-status-sweep-bleed));
left: 0;
width: var(--gp-dimension-status-sweep-width);
margin-left: calc(-0.5 * var(--gp-dimension-status-sweep-width));
opacity: 0;
pointer-events: none;
background: var(--gp-gradient-status-sweep);
}
/* The ring flare where the shimmer arrives. It hangs off the END of the fill
* and has to be allowed to, so it is a child of the unclipped
* .gp-status__track rather than of the groove. */
.gp-status__glint {
position: absolute;
top: 50%;
width: var(--gp-dimension-status-glint-size);
height: var(--gp-dimension-status-glint-size);
margin: calc(-0.5 * var(--gp-dimension-status-glint-size)) 0 0 calc(-0.5 * var(--gp-dimension-status-glint-size));
border-radius: var(--gp-dimension-radius-round);
opacity: 0;
pointer-events: none;
background: var(--gp-gradient-status-glint);
}
/* The level name rolling over: the box clips for the duration of the roll and
* is widened to the wider of the two names, so a longer title is not cut off
* and the line's height never changes. Both states are set by JS and taken
* off again — .gp-status__title itself is size-stable above. */
.gp-status__title--roll {
overflow: hidden;
}
.gp-status__level-name--next {
position: absolute;
inset: 0;
}
/* The caption's two numbers roll up into place the same way. They are inline
* counters, and an inline box takes no transform; their parent span is the
* clipping box (.gp-status__caption > span, above). */
.gp-status__caption [data-count-key-value] {
display: inline-block;
}
/* The level-up's confetti, on a canvas of its own: aimed at a canvas rather
* than at the page, the particles cannot escape the box it covers. It is
* deliberately BIGGER than the card and hangs over its edges, so the glass
* does not clip them, and its foot fades out so they dissolve at the bottom
* instead of stopping dead on an invisible line. Position and size are
* measured per burst and set inline. No z-index: it is appended last and
* paints over the card's content, which is all it has to beat. */
.gp-status__burst {
position: absolute;
pointer-events: none;
-webkit-mask-image: var(--gp-gradient-status-burst-mask);
mask-image: var(--gp-gradient-status-burst-mask);
}
/* Share: a PLACEHOLDER affordance for the take-away graphic, top right, in
* the card's own glass language. 44px tap target around a 30px disc. The
* checkpoint never renders it (shared/_status_bar.html.erb) — sharing is not
* offered mid-checkpoint — which is also why it is not scoped to the opaque
* skin here: the markup, not the stylesheet, decides. */
.gp-status__share {
position: absolute;
top: 6px;
right: 6px;
width: var(--gp-dimension-status-share-target);
height: var(--gp-dimension-status-share-target);
display: grid;
place-items: center;
padding: 0;
border: 0;
background: none;
-webkit-tap-highlight-color: transparent;
}
.gp-status__share-disc {
width: var(--gp-dimension-status-share-disc);
height: var(--gp-dimension-status-share-disc);
border-radius: 50%;
display: grid;
place-items: center;
background: var(--gp-color-white-42);
border: 1px solid var(--gp-color-white-70);
box-shadow: var(--gp-shadow-status-share), var(--gp-shadow-glass-depth-control);
}
.gp-status__share svg {
width: 15px;
height: 15px;
fill: none;
stroke: var(--status-ink);
stroke-width: 1.9;
stroke-linecap: round;
stroke-linejoin: round;
}
/* PRESS (round 20): .is-pressed from press_controller.js, not :active. Round 8
* moved every other button in this system off :active — it is not dependable
* for touch on iOS Safari, and press_controller.js's own comment says why —
* and this one was left behind, so the one press treatment on the card the
* homepage and the profile page render was the one that does not fire. It also
* snapped: there was no transition in either direction.
*
* The scale and the two curves are the house recipe (.gp-buy-chuds, and the
* −/+ further down): sink quickly, come back on an overshoot. The disc moves,
* not the 44px target around it — the same split the corner ✕ makes between
* the shape that acts and the shape that is drawn.
*
* Reduced motion keeps the press and drops the movement, as the rest of the
* recipe does. A local rule rather than another name on the shared list in the
* Buy More Chuds block: this component ships on three pages that block knows
* nothing about. */
.gp-status__share-disc {
transition: transform var(--gp-motion-press-release) cubic-bezier(0.34, 1.56, 0.64, 1);
}
.gp-status__share.is-pressed .gp-status__share-disc {
transform: scale(0.94);
transition: transform var(--gp-motion-press) ease-out;
}
@media (hover: hover) {
.gp-status__share:hover:not(.is-pressed) .gp-status__share-disc {
transform: scale(1.04);
}
}
@media (prefers-reduced-motion: reduce) {
.gp-status__share-disc,
.gp-status__share.is-pressed .gp-status__share-disc,
.gp-status__share:hover .gp-status__share-disc {
transform: none !important;
}
}
/* ==== gp-checkpoint: checkpoint screen and takeover (cluster B) ==== */
/* Checkpoint UI polish plan, 2026-09-17. The screen in
* performers/_checkpoint_screen.html.erb, in three of Figma's states:
* 193:1182 inactive (the /checkpoint page), 193:1913 idle, 193:1535
* selected. (193:2013, sent, went in round 3: the send is optimistic and
* the card stays selected.) The takeover around it is application.css's
* .takeover--checkpoint.
*
* Every state is drawn from [data-checkpoint-state-value] on the card and
* [data-pressed], --slot, --grow and --pick on the avatars — the controller
* changes those, and nothing else.
*
* FILL LAYERS ARE PLAIN BACKGROUNDS HERE, NOT PLUS-LIGHTER. Figma's
* get_design_context reports the card, stepper and Buy button fills as inner
* layers with mix-blend-mode: plus-lighter, and this section first reproduced
* them that way (the .gp-status recipe). Rendered live on the clouds,
* 2026-09-18, they came out wrong, and Figma's own render of the same frames
* says why: plus-lighter can only ever lighten, yet
* - the inactive card's rgba(0,0,0,.07) visibly DARKENS the clouds in
* 193:1182 (plus-lighter black adds nothing: there would be no card);
* - the Buy More Chuds button is solid #1c96e5 in every frame (plus-lighter
* on the pale clouds washed it to near-white, white label and all);
* - the status card's pills are darker than the card around them.
* Figma blends each of those layers inside its own frame, against nothing,
* which is a normal fill. So these are normal fills, and the screenshots in
* the cluster B report show both versions.
*
* THE ROW NEVER REORDERS; IT RE-SLOTS. Every avatar is a 70px button in
* Performer.active order, and where it is drawn is --slot, a translateX
* from its own flex position (--index) to the slot's. Recentring is a change
* of --slot, which checkpoint_controller.js springs with Motion (round 3 —
* it was a CSS transition), so nothing moves in the DOM. That last part is
* the point. The plan had auto-animate re-append the buttons and FLIP them;
* measured live, 2026-09-18, a node moved in the DOM throws away its
* computed style, so every CSS transition on it — ring colour, greyscale —
* snapped instead of animating, and only the FLIP itself moved.
*
* Size is the photo's, by transform: 70 → 100 is scale(100/70), driven by
* --grow (0 or 1, sprung by the controller, so it overshoots a little and
* settles). Figma's selected row is 70 / 100 / 70 with space-between, which
* puts every centre exactly where the idle row's are, so a scale about the
* centre of a 70px box is not an approximation of the mockup: it is the
* mockup. The ring is 4.2px before the scale so that it is Figma's 6px after
* it. Two elements, two transforms: the button's is position, the photo's is
* size, and neither ever animates the other's.
*
* Movement is Motion's, and since round 12 so is the avatars' colour: ring,
* greyscale and strength follow --pick, sprung with the row (and scrubbed by
* a drag), so they are not transitions. The title and the controls' opacity
* are still CSS transitions keyed off the state.
*
* Layout geometry (widths, gaps, paddings) is the Figma value in px, as
* .gp-status does it; colours, type, radii, shadows and durations are tokens.
*/
/* The /checkpoint page: the clouds behind everything under the navbar, the
* way #performers-pay and the operator's #login already do it. On body so it
* reaches the canvas — see FILL LAYERS above. Compressed JPEG, same reasoning
* as .takeover--checkpoint: this loads on every visit to the page, not just
* inside an open window. */
body#checkpoint {
background:
url("/assets/GrossProphets-StoryBKG-Clouds-9x16-a965aa4f.jpg") center top / cover no-repeat,
linear-gradient(var(--gp-color-checkpoint-sky-preload), var(--gp-color-sky-cloud) 45%);
}
/* flex: 1 (from application.css's body#checkpoint rule, which reaches the
* layout's own yield wrapper) makes this box exactly as tall as the room
* under the navbar; `display: flex` here stretches .gp-checkpoint, its one
* child, to that full height for free, and .gp-checkpoint centres its own
* contents inside it. overflow-y: auto is the no-clip rule: a short screen
* scrolls this box instead of the block overlapping the navbar above it. */
.gp-checkpoint-page {
display: flex;
flex: 1;
min-height: 0;
justify-content: center;
overflow-y: auto;
padding-bottom: 24px;
}
/* The content column: padding 10 20, and 20 between the main block and the
* Buy More Chuds button — round 5, Corey: the same as between the stats and
* the send card (it was Figma's 30). justify-content centres the two vertically now that
* the row direction above stretches this to the full height on offer;
* `safe center` (round 2, Corey 2026-09-18) is what stops a short screen
* clipping the top of the card instead of scrolling to it — it falls back
* to flex-start, inside .gp-checkpoint-page's own scrollbar, only when
* centring would overflow. Unsupported browsers keep the plain `center`
* above it and clip; there is no third option that both centres and never
* clips without it. */
.gp-checkpoint {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
justify-content: safe center;
gap: 20px;
width: 100%;
padding: 10px 20px;
}
.gp-checkpoint__main {
display: flex;
flex-direction: column;
align-items: center;
/* Round 2: .gp-checkpoint is now a flex column stretched to the full
* height on offer (application.css, .takeover__body / .gp-checkpoint-page)
* so it can centre this and .gp-buy-chuds inside it. On a screen too short
* for both, a flex item's default flex-shrink: 1 would rather squeeze this
* below its own children's fixed sizes than let it overflow — measured
* live, 2026-09-18, the Buy button came out 16px tall. flex-shrink: 0
* keeps it at its natural height, so a short phone scrolls instead. */
flex-shrink: 0;
gap: 20px;
width: 362px;
max-width: 100%;
}
/* Round 7: a little closer to the status card below (Figma's 10 under the
* heading taken to 2). */
.gp-checkpoint__header {
display: flex;
flex-direction: column;
align-items: center;
gap: 1px;
padding: 10px 0 2px;
}
.gp-checkpoint__mascot {
width: 80px;
height: 80px;
}
.gp-checkpoint__heading {
width: 300px;
max-width: 100%;
margin: 0;
text-align: center;
font-family: var(--gp-font-family);
font-weight: var(--gp-font-weight-bold);
font-size: var(--gp-font-size-h2);
line-height: normal;
color: var(--gp-color-white);
}
/* ONE SCREEN (round 5 item 8). With the controls open, the whole column —
* stats, card, Buy More Chuds — fits the visible screen without scrolling.
* When it would not, the Company wordmark goes, then the Chuddy mascot:
* hidden, not shrunk. Buy More Chuds never goes. fit_controller.js measures
* which, against the real visible height (the container is sized to the
* small viewport, after Safari's toolbars), and sets data-fit on the
* container; each hideable carries the level it goes at. */
[data-fit="1"] [data-fit-level="1"],
[data-fit="2"] [data-fit-level] {
display: none !important;
}
/* --- the person-selector card --- */
.gp-checkpoint__card {
display: flex;
flex-direction: column;
gap: 20px;
width: 362px;
max-width: 100%;
/* Round 11: glass v2 (.gp-glass-v2--card) paints fill, rim and shadow. The
* 1px border it replaces is now padding, so the content box — and the
* avatar row's centre — does not move. */
padding: 11px 11px 16px;
border-radius: var(--gp-radius-card);
}
/* Nothing on the card is text to select (round 9, Corey's iPhone): holding
* − or + started iOS's long-press selection, with its callout and
* magnifier, over the whole card — and that gesture cancels the press.
* The amount stays an editable number field, so it keeps selection; the
* status bar outside the card keeps it too. VoiceOver is unaffected. */
.gp-checkpoint__card,
.gp-buy-chuds {
-webkit-user-select: none;
user-select: none;
-webkit-touch-callout: none;
}
.gp-checkpoint__card .gp-checkpoint__input {
-webkit-user-select: text;
user-select: text;
}
/* A send playing out (round 5 item 5): taps are ignored, not queued, and
* nothing looks disabled — the card simply does not answer until the
* sequence ends. checkpoint_controller.js guards the same in code. */
.gp-checkpoint__card[data-busy] {
pointer-events: none;
}
.gp-checkpoint__card[data-checkpoint-state-value="inactive"] {
--glass-tint: var(--gp-color-black-7);
}
.gp-checkpoint__upper {
display: flex;
flex-direction: column;
align-items: center;
gap: 15px;
}
/* CLOSED, THE ROW CENTRED (round 12, Corey: "I meant vertically centered
* avatars"). With nobody chosen the controls are closed and the card ends
* under the row, which left the photos 41px below the prompt and 31px above
* the card's bottom (measured, 402 wide). Here the row moves up by
* --gp-dimension-checkpoint-row-lift (less gap above it) and the card's
* bottom padding grows by the same, so the photos are centred and the card
* is exactly as tall as before — nothing around it moves. The open state is
* the rules above, untouched; choosing somebody eases between the two over
* the state's own time, while the controls open. */
.gp-checkpoint__card,
.gp-checkpoint__upper {
transition:
padding-bottom var(--gp-motion-checkpoint-state) ease-in-out,
gap var(--gp-motion-checkpoint-state) ease-in-out;
}
.gp-checkpoint__card:not([data-checkpoint-state-value="selected"]) {
padding-bottom: calc(16px + var(--gp-dimension-checkpoint-row-lift));
}
.gp-checkpoint__card:not([data-checkpoint-state-value="selected"]) .gp-checkpoint__upper {
gap: calc(15px - var(--gp-dimension-checkpoint-row-lift));
}
/* The title block: 300 wide, centred. One prompt and one name, restyled per
* state rather than swapped, so a change of state is a transition. 42 tall
* rather than Figma's 38 (round 4): the name's line is 24, so a descender is
* not cut off at its foot. */
.gp-checkpoint__title {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: 300px;
max-width: 100%;
height: 42px;
margin: 0;
text-align: center;
font-family: var(--gp-font-family);
}
/* idle: "Send Chuds to", Bold 20 black, line-height 1. */
.gp-checkpoint__prompt {
font-weight: var(--gp-font-weight-bold);
font-size: var(--gp-font-size-title);
line-height: 1;
color: var(--gp-color-black);
transition:
font-size var(--gp-motion-checkpoint-state) ease-in-out,
line-height var(--gp-motion-checkpoint-state) ease-in-out,
color var(--gp-motion-checkpoint-state) ease-in-out,
opacity var(--gp-motion-checkpoint-state) ease-in-out;
}
/* The name's box opens to one line when somebody is chosen. The name itself
* comes and goes by Motion (checkpoint_controller.js#nameTo): up from
* nobody, down to nobody, sideways with the row when it changes hands, the
* outgoing one a copy drawn over this box (.gp-checkpoint__name--leaving). */
.gp-checkpoint__names {
position: relative;
display: block;
width: 100%;
height: 0;
transition: height var(--gp-motion-checkpoint-state) ease-in-out;
}
.gp-checkpoint__name {
display: block;
max-width: 100%;
height: 24px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
font-weight: var(--gp-font-weight-bold);
font-size: var(--gp-font-size-title);
line-height: 24px;
color: var(--gp-color-black);
}
.gp-checkpoint__name--leaving {
position: absolute;
inset: 0 0 auto;
pointer-events: none;
}
/* inactive: Medium 14 white. Figma set this one line in Helvetica Neue; every
* other line in the file is IBM Plex Sans, so this is too. */
.gp-checkpoint__card[data-checkpoint-state-value="inactive"] .gp-checkpoint__prompt {
font-weight: var(--gp-font-weight-medium);
font-size: var(--gp-font-size-body);
line-height: normal;
color: var(--gp-color-white);
}
/* selected: Medium 14 grey, 18 tall, over the name. (Figma's fourth state,
* sent — 193:2013 — is gone: round 3's send is optimistic, and after the chip
* lands the card goes back to nobody chosen, the row where it was.) */
.gp-checkpoint__card[data-checkpoint-state-value="selected"] .gp-checkpoint__prompt {
font-weight: var(--gp-font-weight-medium);
font-size: var(--gp-font-size-body);
line-height: 18px;
color: var(--gp-color-grey-700);
}
.gp-checkpoint__card[data-checkpoint-state-value="selected"] .gp-checkpoint__names {
height: 24px;
}
/* --- the corner ✕ (Corey's addition, this round) --- */
/* The real tap target, top LEFT and on the title's own line (Corey,
* 2026-09-21). Pinned to the card's top padding and given the title block's
* height, so the glyph centres against "Send Chuds to" rather than floating
* in the corner above it — which is what used to reserve a band of empty
* card over the header with nobody chosen. The card is already
* position: relative (.gp-glass-v2--card).
*
* Invisible itself: what is drawn is the smaller glyph inside it
* (.gp-checkpoint__clear-glyph). No explicit z-index — a plain box in
* normal flow already paints above the card's own glass layers, which sit
* at z-index -1 inside the card's own isolated stacking context (.gp-glass-
* v2 > :is(__blur, __frost, __shine, __rim)). */
.gp-tap.gp-checkpoint__clear-tap {
/* Compound, and deliberately: .gp-tap sets position: relative at the same
* specificity further down this file, so a bare .gp-checkpoint__clear-tap
* lost on source order and this box stayed IN FLOW -- centred by the card's
* align-items, above the title, reserving a band of empty card over the
* header. Both of Corey's notes about this control ("don't reserve all that
* space", "fix chevron placement") were that one lost declaration. */
position: absolute;
/* The card's own padding-top, so the box starts where the content does. */
top: 11px;
left: 4px;
display: grid;
place-items: center;
/* .gp-checkpoint__title's height: the two share a centre line. */
height: 42px;
z-index: 1;
opacity: 0;
pointer-events: none;
/* Fades with the controls, not on a timer of its own: [data-checkpoint-
* state-value="selected"] is set and cleared in the same calls that open
* and close them (choose(), clearSelection()), and [data-busy] — set for
* the WHOLE of a send, panel close included, not only the stretch where
* somebody is still chosen (checkpoint_controller.js#send keeps the
* state "selected" until its own clearSelection() call partway through)
* — keeps it off the rest of the way. The aria-hidden/tabindex side of
* "hidden" is the controller's job (#updateClear): a CSS transition is
* not itself an attribute change. */
transition: opacity var(--gp-motion-checkpoint-controls) ease-in-out;
}
.gp-checkpoint__card[data-checkpoint-state-value="selected"]:not([data-busy]) .gp-checkpoint__clear-tap {
opacity: 1;
pointer-events: auto;
}
/* 44 wide and the title's 42 tall: still a full-size target, and Apple's
* 44pt minimum is about the SMALLER dimension of a touch area, which this
* keeps. No border-radius — round 17 measured taps in the corners of a
* circular target getting the haptic but not the action, because
* border-radius clips hit testing. */
.gp-checkpoint__clear {
display: grid;
place-items: center;
width: 44px;
height: 42px;
padding: 0;
border: 0;
background: none;
}
/* The drawn glyph: the chevron alone, no container (Corey, 2026-09-21: "no
* outer container. Icon should be very muted/quiet"). It used to wear
* .gp-glass-v2--control, a 26px glass disc with its own sheen and rim, which
* read as a second button beside the performer's name rather than a way
* back. Quieter than the ✕ was, too: 0.38 against the old 0.55, on the same
* grey the card already uses for its secondary text (color/grey-700, "Send
* Chuds to") rather than the −/+'s black. Round 8's press/hover below brings
* it up on contact, which is where the affordance lives now. */
.gp-checkpoint__clear-glyph {
display: grid;
place-items: center;
color: var(--gp-color-grey-700);
opacity: 0.38;
transition: opacity var(--gp-motion-checkpoint-state) ease-in-out;
}
/* PRESS AND HOVER (round 8's pattern): .is-pressed from press_controller.js
* on .gp-checkpoint__clear-tap itself (the same element the haptic overlay
* covers), sinking and brightening the glyph rather than the invisible tap
* target. */
.gp-checkpoint__clear-tap.is-pressed .gp-checkpoint__clear-glyph {
transform: scale(0.9);
opacity: 0.8;
transition: transform var(--gp-motion-press) ease-out, opacity var(--gp-motion-press) ease-out;
}
@media (hover: hover) {
.gp-checkpoint__clear-tap:hover:not(.is-pressed) .gp-checkpoint__clear-glyph {
opacity: 0.62;
}
}
.gp-checkpoint__clear-glyph svg {
stroke: currentColor;
}
/* --- the avatar row --- */
/* A size container so a slot can be measured in the row's own width: the
* distance between two slots is (content width - 70) / (count - 1), which
* is exactly where space-between puts them. */
/* touch-action was left off entirely here through round 6: ios-vibrator-pro-
* max treated ANY pan-* or none as a drag surface and laid its own input
* over the row, breaking every tap. That library is gone (src/haptics.js) —
* round 11 C's continuous drag needs pan-y back, or iOS can decide mid-drag
* that the gesture is its own vertical scroll and stop delivering pointermove
* (the row itself has nothing to scroll sideways, so horizontal stays ours). */
.gp-checkpoint__avatars {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
height: 100px;
padding: 0 var(--gp-dimension-checkpoint-row-inset);
touch-action: pan-y;
container-type: inline-size;
/* The avatars' own stacking context: the controller writes each one's
* z-index here every frame (round 13, checkpoint_controller.js#restack —
* the one crossing the row at the back, the one nearest the middle in
* front), and none of it can ever put an avatar behind the card. */
isolation: isolate;
}
/* --slot is sprung by the controller; no transition here, or the two would
* fight. The landing bounce is NOT on this element: any scale here composes
* with the slot's translate and scales the translation too, so only the
* avatar whose slot is its home (translate 0) bounced in place — the others
* lurched towards the middle. It is on .gp-checkpoint__bump inside. */
.gp-checkpoint__avatar {
--slot-step: calc((100cqi - 70px) / (var(--count, 2) - 1));
position: relative;
display: block;
flex: 0 0 auto;
width: 70px;
height: 70px;
/* Clamped to the row's two ends (round 12, Corey: "The avatars should
* never leave the edge of the card"): a drag only ever scrubs between real
* slots (src/carousel_drag.js), and the clamp stops a spring's overshoot
* carrying an end avatar past its end. */
transform: translateX(calc((clamp(0, var(--slot), var(--count, 1) - 1) - var(--index)) * var(--slot-step)));
}
/* The real button, filling the avatar: what the keyboard and VoiceOver use.
* A finger's tap lands on the switch over it (.gp-haptic-tap). */
.gp-checkpoint__avatar-button {
display: block;
width: 100%;
height: 100%;
padding: 0;
border: 0;
border-radius: 50%;
background: none;
}
/* The bounce box: the avatar's own 70px square, scaled about its centre by
* Motion when chuds land. The "+N" is positioned in it. */
.gp-checkpoint__bump {
position: relative;
display: block;
width: 70px;
height: 70px;
transition: transform var(--gp-motion-press-release) cubic-bezier(0.34, 1.56, 0.64, 1);
}
/* PRESS (round 14, item 1): the same sink-and-spring as the −/+ and Buy More
* Chuds (round 8), .is-pressed from press_controller.js on .gp-checkpoint__
* avatar itself. The scale is on .gp-checkpoint__bump, not on the avatar —
* the avatar carries the slot's translate (see above), and a scale there
* would compose with it and move the avatar off its slot, the same reason
* the landing bounce lives on .gp-checkpoint__bump. A finger's press
* overrides the landing bounce's own inline transform for its duration;
* both settle back to none. */
.gp-checkpoint__avatar.is-pressed .gp-checkpoint__bump {
transform: scale(0.94);
transition: transform var(--gp-motion-press) ease-out;
}
/* A cast of one: space-between would put it at the left edge. */
.gp-checkpoint__avatar:only-child {
margin-inline: auto;
}
.gp-checkpoint__avatar-button:disabled {
cursor: default;
}
/* THE SWITCH UNDER THE FINGER (round 6; src/haptics.js says why). A
*