/* Setlist Showdown — "Marquee Night" design system, reconciled onto the * ratified Venue Wall token set (docs/design/design-tokens.css). * Dark house, one spotlight: no light mode, ever. Genre color appears on * cards only — the chrome stays neutral. * * TOKEN LAYER — how this :root relates to the ratified file it imports below. * * The import brings in every --ss-* the ratified file declares (core colour, * certification ramps, the three stats, type scale, radii, spacing, * elevation) EXCEPT its three genre tokens — see the genre block's own * comment below for why those are never referenced. Everything below is * this file's own :root, declared AFTER the import so it wins the cascade * for any name both files define — which is deliberate, not redundant: * spec/design_token_parity_spec.rb parses this file's literal text (not * what the browser resolves), so a shared concept has to be restated here, * by hand, for the guard to have anything of ours to check against the * ratified value. That guard is what replaces the discipline that used to * be "remember to keep the transcription in sync" — the mapping below is * the one-time act of writing it correctly; the guard is what keeps it that * way. * * Mapping table (by CONCEPT, never by value — two unrelated concepts can * legitimately share a hex, e.g. --electronic and the ratified --ss-craft * both being #3CC8E5 is a coincidence, not a mapping instruction): * * ships as | becomes | why * --------------------------------------------------------------------- * --dim (#9C93B0) | --ss-muted | every usage (all ~40, * | | confirmed none in * | | app/views) was written * | | expecting this colour, * | | and it already equals * | | ratified --ss-muted. * | | Web separately gains a * | | true --ss-dim (#68636F) * | | below, which it has * | | never had. * --spot (#FFB43A) | --ss-gold | same concept, different * | | name; value already * | | matches ratified. * --ink (background uses) | --ss-ink | same concept. VALUE * | | CHANGES #131019 -> * | | #0A0A0B (ratified). * --hype, --soul, --craft | --ss-hype/soul/ | same concept. VALUES * | craft | CHANGE to ratified. * --cream, --diamond*, | prefix only | same name, same value * --platinum*, --gold-deep, | | already (transcribed * --gold-lit | | verbatim previously). * --rock, --metal, --folk, | --ss-genre-*, kept | web's own eight * --country, --electronic, | under WEB's names | contract genre hues * --pop, --soul-genre, | and values | (BRANDING.md §2). The * --hip_hop | | ratified file's own * | | three genre tokens are * | | illustrative mockup * | | names the project did * | | not adopt (Decision 4) * | | and are never used — * | | not renamed FROM, and * | | nothing below reads * | | them. * --action-green, | keep, prefixed | web-only concepts with * --card-shadow, | | no ratified counterpart * --laminate-shadow, --m | | found. * --panel, --inactive, | keep, prefixed, | see the note below — * --danger | VALUE UNCHANGED | BRANDING.md §2's own * | | 2026-08-06 amendment * | | already names ratified * | | successors for these * | | three (surface/border/ * | | red); NOT adopted here, * | | and whether web should * | | move onto them is open, * | | not decided by this * | | branch. * * --ink SPLIT IN TWO, found by review after this file first shipped: * ratified declares both --ss-ink (#0A0A0B, background) and * --ss-ink-on-accent (#131019, text/icons placed on a gold or other accent * fill). Web's old --ink did both jobs under one name, and had drifted to * hold the on-accent value (#131019 == ratified --ss-ink-on-accent, not * --ss-ink) — which is WHY it read as "unchanged" at first glance and is * exactly the trap BRANDING.md §2's own iOS amendment already named for * this same pair. Do not assume the one-to-one shape holds for --ink * elsewhere: .mvp-chip, .btn, .btn--pressed/.btn.btn--pressed, and * .rules-wheel__dot--beats/--loses are text-on-accent and use * --ss-ink-on-accent (supplied by the import above, not restated in this * :root). Every remaining --ss-ink use below is a background, OR text on a * NON-accent fill — ratified documents --ss-ink-on-accent specifically as * text on gold or another accent fill, and a neutral is not an accent. * **.rules-cue is the deliberate exception**: dark text on --ss-muted (a * neutral chip fill, not gold), correctly left on --ss-ink rather than * moved — moving it would apply --ss-ink-on-accent outside what it * documents, for no visible gain (#0A0A0B and #131019 both read as * near-black on that lavender). If muted turns out to count as an accent by * this design system's own logic, that is a call for the owner, not a * silent implementation. * * --panel/--inactive's ratified status is an OPEN QUESTION, found by review, * not "no counterpart" as an earlier version of this comment stated: * rules_embed.css labelled --danger "ratified --ss-red" (#DC5641) and * overrode it to that value for one route, while this file denied a * ratified counterpart exists — and BRANDING.md §2's own 2026-08-06 * amendment already names ratified successors for all three (panel -> * surface, inactive -> border, danger -> red). Tracked as #921. * * #919 found a stylesheet-glob bug had, by accident, been shipping * rules_embed.css's ratified --danger/--panel VALUES site-wide for weeks — * every page had been rendering #DC5641/rgba(15,14,16,.88), not the values * that used to sit on this line, including .judge-portrait (#971), reviewed * and merged the same night against the leaked palette. OWNER RULING, * 2026-09-13: ADOPT both leaked values as this file's own, rather than * revert 31 rules (22 --ss-panel consumers + 9 --ss-danger, counted in this * file) to a color nobody had been looking at. A "revert to the old default" * was never actually the conservative option once the leak had been live * for weeks — the disruptive change was undoing what every reviewer had * already been approving, not keeping it. --ss-danger and --ss-panel are * below at #DC5641/rgba(15,14,16,.88) accordingly; --ss-inactive is * untouched (rules_embed.css never overrode it, so it never leaked). * * #921's remaining scope for these two, post-ruling: the VALUES are settled * (this file's own, not an open site-wide-vs-embed question anymore) — what * #921 still tracks is the NAMING question, whether --ss-danger/--ss-panel * should formally become the ratified --ss-red/--ss-surface (i.e. whether * spec/design_token_parity_spec.rb should even see them as the same * concept). That is still not this branch's call. * * Falsified 2026-09-04: changing a shipped value on purpose made * spec/design_token_parity_spec.rb fail and name that exact token; restored * before this commit. * * THIS GUARD'S LIMITS: spec/design_token_parity_spec.rb only compares * tokens BOTH files declare under the IDENTICAL --ss- name — only a small * minority of names are shared between the two files at all (the spec's own * calibration example prints the exact counts on every run; this comment * doesn't carry a figure, on purpose — see the --danger/panel/inactive note * above for what happens when one does). It cannot catch a mapping error * where one web name should have split into two ratified concepts (the * --ink case above), and it cannot catch a name that differs between the * files entirely (the --danger/--ss-red question above). It catches value * drift on shared names; it is not a substitute for reviewing the mapping * itself. */ /* This pulls in the ratified file WHOLE, including its three illustrative * --ss-genre-punk/-shoegaze/-garage tokens — they arrive in the cascade but * are deliberately never referenced below. They are not contract genres and * are not a sanctioned choice to reach for; the eight contract genres are * BRANDING.md §2 and live below as this file's own --ss-genre-* names. */ @import url("/assets/design-tokens-bb7940f9.css"); @import url('https://fonts.googleapis.com/css2?family=Archivo+Black&family=Barlow+Condensed:wght@400;600;700&family=Permanent+Marker&family=Special+Elite&display=swap'); :root { --ss-ink: #0A0A0B; /* ratified value — was #131019 */ --ss-panel: rgba(15, 14, 16, .88); /* was #1E1830 — OWNER RULING, 2026-09-13: adopts the value #919's stylesheet-glob leak had already been shipping site-wide for weeks (rules_embed.css labelled it "ratified --ss-surface"), rather than revert 22 rules' worth of consumers to a color nobody had been looking at, including .judge-portrait (#971), reviewed and merged the same night against this exact leaked value. #921 still tracks whether this should formally become the ratified --ss-surface by NAME — the value question is settled, the naming one isn't. */ --ss-gold: #FFB43A; --ss-cream: #F4EFE4; --ss-muted: #9C93B0; /* == ratified --ss-muted; web's --dim carried this role already */ --ss-dim: #68636F; /* web's own true "dim" — ratified value; web never had this token before */ --ss-danger: #DC5641; /* was #FF7A5C — OWNER RULING, 2026-09-13: same reasoning as --ss-panel above. Adopts the value #919's leak had already been shipping site-wide for weeks (rules_embed.css labelled it "ratified --ss-red") rather than revert 9 rules' worth of consumers to a color nobody had been looking at. #921 still tracks whether this should formally become the ratified --ss-red by NAME. */ --ss-inactive: #3A3450; --ss-action-green: #FFB43A; /* --ss-gold — OWNER RULING, 2026-08-22 (rules_embed.css): no green hue exists anywhere in design-tokens.css or iOS's Tokens.Color, so the wheel's "Beats" cue maps to the palette's one positive accent, gold, instead. #919: this ruling had only been reaching this route directly; the stylesheet-glob leak fixed in this same change had it reaching every OTHER page too (was #35C759, plain green) for as long as rules_embed.css has existed. Adopted here rather than reverted, because the ruling is global — "no green hue" is not a per-route exception. */ --ss-hype: #F25CA2; /* ratified value — was #FF7A5C */ --ss-soul: #9B6FE0; /* ratified value — was #C08BFF */ --ss-craft: #3CC8E5; /* ratified value — was #6FD3FF */ /* Web's own eight contract genre hues (BRANDING.md §2), kept under web's * names and values — NOT the ratified file's --ss-genre-punk/-shoegaze/ * -garage trio, which are illustrative mockup names the project explicitly * did not adopt (Decision 4) and which nothing in this file references. */ --ss-genre-rock: #E65138; /* was #D8452E — #919: that value never matched BRANDING.md §2's own (unamended, both-platform) genre table, which has always listed Rock as #E65138, independently confirmed by iOS's shipped Design/Tokens.swift (Tokens.Color.genreRock). Plain drift, not an open design question like --ss-danger/ --ss-panel above — rules_embed.css's override had been quietly correcting it on one route only, via the same leak, since rules_embed.css shipped. */ --ss-genre-electronic: #3CC8E5; --ss-genre-soul: #9B6FE0; --ss-genre-metal: #8A8F98; --ss-genre-pop: #F25CA2; --ss-genre-folk: #7FB069; --ss-genre-hip-hop: #E5B93C; --ss-genre-country: #D98A3C; --ss-card-shadow: 0 3px 10px rgba(0, 0, 0, .33); /* The laminate's contrast shadow [laminate-on-art-corner, owner * instruction: "a little padding... a drop shadow to aid in contrast"]. * Started from --ss-card-shadow (same numbers as iOS's Tokens.Elevation.card) * and escalated after a real render test: against a cover the same cream * as the laminate's own paper (art/road-wear/laminate/laminate_paper.png — * the worst case, since the laminate is an opaque card, not a transparent * sticker, so a matching-color cover is the one that can truly hide its * edge), --ss-card-shadow's .33 opacity/10px blur read as barely-there at * real size; --ss-shadow-poster's 28px blur (docs/design/design-tokens.css) * read as a diffuse haze with no crisp edge. This value — deeper opacity, * a tighter blur than the poster shadow — was the one that read as a * shadow (a card lifted off the surface) rather than either a smudge or * nothing, checked at both state 1 and state 7 against both a light and a * dark cover. iOS's Tokens.Elevation.laminate carries the same shadow * (opacity .5, radius 7 [this blur/2, matching Tokens.Elevation's own * documented box-shadow-blur-to-SwiftUI-radius conversion], y 8) — * RoadWear.swift's own doc names this file back. */ --ss-laminate-shadow: 0 8px 14px rgba(0, 0, 0, .5); /* Gold Record certification disc [gold-record-certification design, * ratified disc treatment]. These match the ratified file's own * --ss-gold-deep/-lit, --ss-platinum(-deep/-lit) and * --ss-diamond(-deep/-lit/-alt) verbatim (confirmed above by the parity * guard, since both files now use the identical --ss- names for these). * Gold's own base is --ss-gold above, already declared, so it is not * repeated here. */ --ss-gold-deep: #B87816; /* --ss-gold-deep */ --ss-gold-lit: #FFDFA0; /* --ss-gold-lit */ --ss-platinum: #C9CDD6; /* --ss-platinum */ --ss-platinum-deep: #767C8A; /* --ss-platinum-deep */ --ss-platinum-lit: #F2F5FA; /* --ss-platinum-lit */ --ss-diamond: #8FE6FF; /* --ss-diamond */ --ss-diamond-deep: #4C7FA8; /* --ss-diamond-deep */ --ss-diamond-lit: #EAFBFF; /* --ss-diamond-lit */ --ss-diamond-alt: #C7A6F5; /* --ss-diamond-alt — woven through Diamond's own ramp below so it reads as a third material while staying in the gold/platinum family. */ } * { box-sizing: border-box; } body { margin: 0; color: var(--ss-cream); background: var(--ss-ink); font-family: 'Barlow Condensed', system-ui, sans-serif; font-size: 16px; } /* The viewport-fixed purple glow, on its own layer rather than the body's own background. This is visually identical to the former `radial-gradient(...) fixed, var(--ss-ink)` on `body`, but WITHOUT `background-attachment: fixed`, which on iOS Chrome (WKWebView) breaks `position: fixed` DESCENDANTS (e.g. `.match-action-bar`) — they stop pinning to the viewport bottom and float at content-end. Safari renders the old form fine; this layer fixes Chrome-iOS while keeping the glow pinned to the viewport, behind all content (z-index:-1), and click-through (pointer-events:none). [#88] #919: this rule had been switched OFF on every ordinary page for as long as rules_embed.css has existed, not by any decision about this glow — rules_embed.css's own `body::before { content: none; }` (its suppression of THIS exact rule, correctly, for its one chrome-free route) rode the `:app` stylesheet glob onto every other page too, same specificity, same selector, alphabetically second, so it always won. No page had this glow since rules_embed.css shipped. Closing the leak turns it back on site-wide — restoring the backdrop this rule was written to paint, not introducing a new one. /rules/embed still suppresses it correctly for itself; see rules_embed.css's own comment on its `body::before` override. */ body::before { content: ""; position: fixed; inset: 0; z-index: -1; background: radial-gradient(1000px 500px at 50% -10%, #2A2142 0%, var(--ss-ink) 60%); pointer-events: none; } .house { max-width: 880px; margin: 0 auto; padding: 28px 16px 60px; text-align: center; } /* The Label — the ticket-stub style that does most of the brand */ .label { font-size: 11px; letter-spacing: 2.5px; text-transform: uppercase; color: var(--ss-muted); font-weight: 600; } .label--amber { color: var(--ss-gold); } .marquee { margin-bottom: 26px; } .marquee__title { font-family: 'Archivo Black', sans-serif; font-size: clamp(32px, 7vw, 54px); margin: 4px 0 2px; line-height: 1; text-transform: uppercase; text-shadow: 0 0 40px rgba(255, 180, 58, .27); } .marquee__sub { font-size: 15px; color: var(--ss-muted); margin: 0; } /* The night's MVP — one gold pill under the verdict headline [match-mvp]. * Spotlight-on-ink like .btn, pill-rounded so it reads as a laurel, not a * button; the reason line beneath reuses the shared .label. */ .mvp-chip { display: inline-block; font-family: 'Archivo Black', sans-serif; font-size: 12px; letter-spacing: 1.5px; text-transform: uppercase; background: var(--ss-gold); color: var(--ss-ink-on-accent); border-radius: 999px; padding: 6px 16px; margin-top: 12px; } .arena-prompt { font-family: 'Archivo Black', sans-serif; font-size: clamp(19px, 4vw, 26px); color: var(--ss-gold); } /* Buttons — exactly one primary per screen, always a stage verb */ .btn { font-family: 'Archivo Black', sans-serif; font-size: 15px; letter-spacing: 1px; padding: 13px 34px; border-radius: 10px; border: none; display: inline-block; background: var(--ss-gold); color: var(--ss-ink-on-accent); text-transform: uppercase; cursor: pointer; text-decoration: none; transition: all .15s ease; } /* A subdued but LIVE control — the secondary treatment. There is deliberately no greyed-out button CLASS here: the one we had set pointer-events: none and got reached for three times as if it meant "muted", shipping a dead control every time. A genuinely unavailable control takes the HTML `disabled` attribute (see the lobby's Start) or isn't rendered at all. */ .ghost { background: none; border: 1px solid rgba(255, 180, 58, .53); color: var(--ss-gold); border-radius: 6px; padding: 3px 10px; font-size: 12px; font-family: inherit; cursor: pointer; text-decoration: none; display: inline-block; } /* A destructive .ghost — striking a setlist/match [Task 6/7, web parity]. */ .ghost--destructive { border-color: var(--ss-danger); color: var(--ss-danger); } /* Compact battle card — the workhorse */ .card { position: relative; /* anchors .card__wear, below */ width: 158px; border-radius: 10px; background: var(--ss-panel); text-align: left; border-left: 4px solid var(--genre, var(--ss-muted)); box-shadow: var(--ss-card-shadow); padding: 10px 12px; transition: all .15s ease; } /* Road wear — mileage rungs [road wear phase 2 slice B; art/road-wear/ manifest.json]. A NINE-SLICE overlay at cap_inset_fraction 0.24: one 512x686 image serves the card at ANY rendered height, corners preserved at native scale, only the edges/middle stretch — border-image-slice: 24% reproduces that inset straight from the source image's own width/height per edge, with no per-asset pixel math on this end. The manifest's own note names this exact technique ("web border-image-slice"). The source's middle is transparent by construction (also the manifest's note), so there is nothing to lose by leaving off `fill` — the interior is never painted, only the frame. pointer-events: none keeps it decorative: clicks reach the card underneath unchanged. inset: 0 makes it track the card's OWN box regardless of content height, so a title that wraps to two lines doesn't leave the texture short. THE DESTINATION CORNER MUST MATCH THE SOURCE CORNER'S ASPECT, not just its area [review finding, corner distortion]. The source is 512x686 — NOT square — so its sliced corner region is 122.88 x 164.64 (0.24 of each axis independently, and this reading is MEASURED, not assumed: decoding all four mileage assets and checking pixel content under both readings of the manifest's cap_inset_fraction found zero interior ink under the per-axis reading on all four rungs, and residual ink under a uniform 123px reading on two of them — with a deliberately-too-small control inset showing thousands of ink pixels, so the zero is not merely a glob that found nothing). A plain `border-width: 38px` renders that region into a 38x38 SQUARE regardless: 0.309x horizontal scale, 0.231x vertical, a 34% differential stretch baked into every corner — precisely the distortion a nine-slice exists to prevent, on the property that looks right at a glance because the number "38" came from *a* fraction of *a* card dimension, just not both of them at once. THE FIRST FIX TRIED HERE — `border-image-width: 24%` — WAS ALSO WRONG, and it is worth recording why rather than just replacing it silently. `.card` has NO fixed height (only `width: 158px` is fixed; height is intrinsic — the art row, a title that may wrap to one or two lines, the artist line, padding — and `.hand`'s flex row can stretch a short card taller besides), so a PERCENTAGE border-image-width does not reproduce a FIXED ratio at all: it makes the rendered corner's aspect track the CARD's own content-driven aspect on every paint, which is not 512:686 and is not even the same as itself from one card to the next. Two percentages of two DIFFERENT, both-moving numbers is not "the same fractional geometry as the source" — it just replaced one kind of mismatch with a subtler one. THE ACTUAL FIX: an explicit PIXEL PAIR on `border-width` — vertical (top/bottom) = horizontal (left/right) x 1.33984, the source corner's own ratio (164.64 / 122.88) — is what pins the destination corner to the SOURCE's fixed aspect regardless of the card's own, unrelated one. `border-width` cannot take a percentage at all (true since CSS1), which is exactly why a fixed length pair is the right shape here, not a deficiency to work around with border-image-width. SIZED AGAINST A MEASURED FLOOR, not the two round numbers this comment used to guess: the shortest realistic card (one-line title, one-line artist, no winded banner — headless-Chrome-rendered against this actual stylesheet, spec/mileage_overlay_border_image_spec.rb's own measurement helper) is 109px tall, floored by the 40px art/vinyl-disc box rather than by text, so a shorter title cannot shrink it further. At the tempting 38/51 pair, 2 x vertical (102px) would leave just 7px of visible middle on that card — technically "fits" and visually swallows the card whole. 22px / 29.48px (same 1.33984 ratio) leaves 50px of middle on the SAME 109px floor (46%), and even more on every taller card, since 109px is the floor, not the typical case. border-image-outset: 0 and border-image-repeat: stretch are unchanged; border-image-slice: 24% is unchanged and CORRECT — it resolves per-axis against the SOURCE image's own width/height already, which is a different property with a different (and here, non-defective) percentage rule than border-width's. See spec/mileage_overlay_border_image_spec.rb, which asserts both the ratio and the measured floor, and is falsified by collapsing the pair back to one value. */ .card__wear { position: absolute; inset: 0; pointer-events: none; border-style: solid; border-width: 29.48px 22px; /* top/bottom vertical, left/right horizontal — see the comment above for the ratio and the measured floor */ border-image-slice: 24%; border-image-outset: 0; border-image-repeat: stretch; } .card__wear--handled { border-image-source: url("/assets/road-wear/ship/wear_handled-512w-65453d3e.webp"); } .card__wear--worn { border-image-source: url("/assets/road-wear/ship/wear_worn-512w-a1a324e7.webp"); } .card__wear--road_tested { border-image-source: url("/assets/road-wear/ship/wear_road_tested-512w-cbb48388.webp"); } .card__wear--veteran { border-image-source: url("/assets/road-wear/ship/wear_veteran-512w-be8b19db.webp"); } .card--selected { outline: 1px solid var(--ss-gold); box-shadow: 0 0 16px rgba(255, 180, 58, .33); transform: translateY(-6px); } .card--dead { opacity: .3; } .card__top { display: flex; justify-content: space-between; align-items: baseline; } .card__genre { font-size: 10px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--genre, var(--ss-muted)); font-weight: 700; } .card__cost { font-size: 12px; font-weight: 700; color: var(--ss-gold); } .card__cost--bad { color: var(--ss-danger); } .card__id { display: flex; gap: 8px; align-items: center; margin: 5px 0 8px; } .card__art { width: 40px; height: 40px; border-radius: 6px; flex-shrink: 0; } .card__title { font-family: 'Archivo Black', sans-serif; font-size: 13px; line-height: 1.15; } .card__artist { font-size: 12px; color: var(--ss-muted); } .card__stats { display: flex; justify-content: space-between; font-size: 13px; font-weight: 700; } .card__winded { font-size: 10px; color: var(--ss-danger); margin-top: 4px; letter-spacing: 1px; text-transform: uppercase; } .stat--hype { color: var(--ss-hype); } .stat--soul { color: var(--ss-soul); } .stat--craft { color: var(--ss-craft); } .stat--nostalgia { color: var(--ss-gold); } .stat--genre-rock { color: var(--ss-genre-rock); } .stat--genre-electronic { color: var(--ss-genre-electronic); } .stat--genre-soul { color: var(--ss-genre-soul); } .stat--genre-metal { color: var(--ss-genre-metal); } .stat--genre-pop { color: var(--ss-genre-pop); } .stat--genre-folk { color: var(--ss-genre-folk); } .stat--genre-hip_hop { color: var(--ss-genre-hip-hop); } .stat--genre-country { color: var(--ss-genre-country); } /* Round-context ability chips — compact color-coded tags under the "tonight tests " label. Each chip is colored by its .stat--* class (reusing the stat/spot color vars); the color drives text + a faint matching border/bg. */ .kw-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin-top: 8px; } .kw-chip { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; padding: 2px 8px; border-radius: 999px; /* color comes from the .stat--* class; border/bg tint off it via currentColor */ border: 1px solid color-mix(in srgb, currentColor 45%, transparent); background: color-mix(in srgb, currentColor 12%, transparent); } /* Vinyl-disc placeholder — art never renders empty */ .vinyl-disc { width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0; background: radial-gradient(circle at center, var(--genre, var(--ss-muted)) 0 4px, #0A0810 5px 12px, color-mix(in srgb, var(--genre, var(--ss-muted)) 20%, transparent) 13px); border: 1px solid color-mix(in srgb, var(--genre, var(--ss-muted)) 40%, transparent); } /* Genre color reaches cards only, through this one custom property */ .genre--rock { --genre: var(--ss-genre-rock); } .genre--electronic { --genre: var(--ss-genre-electronic); } .genre--soul { --genre: var(--ss-genre-soul); } .genre--metal { --genre: var(--ss-genre-metal); } .genre--pop { --genre: var(--ss-genre-pop); } .genre--folk { --genre: var(--ss-genre-folk); } .genre--hip_hop { --genre: var(--ss-genre-hip-hop); } .genre--country { --genre: var(--ss-genre-country); } .hand { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; } /* The setlist builder's row — iOS's SleeveRow shape [Task 5, web parity]. * `.card--row` is a LAYOUT MODIFIER scoped to setlists/_card.html.erb, the * one call site that adds it. `.card`/`.card__*`'s base rules above stay * the compact portrait shape: battle_controller.js's own card templates * (the pick hand, the revealed round cards — see cardHtml/playedCardHtml) * render those SAME class names for a live match, so they cannot change * shape here without redrawing that screen too, which is out of this * task's scope. `.hand--rows` is the matching container modifier for the * same reason — `.hand`'s own flex-wrap grid is what the battle hand * renders into. */ .hand--rows { flex-direction: column; flex-wrap: nowrap; align-items: stretch; max-width: 560px; margin: 0 auto; } .setlist-row { position: relative; } /* Record Collection's own row list [web spokes spec "Rendering the rows"] — * the same vertical-stack shape `.hand--rows` gives the setlist builder, * without `.hand`'s pick-hand semantics (no cut form, no builder state) this * page has no use for. */ .record-collection { display: flex; flex-direction: column; gap: var(--ss-gap); max-width: 560px; margin: 0 auto; } .record-collection .field { width: 100%; box-sizing: border-box; } .record-collection__footer-cta { align-self: center; margin-top: 8px; } .card--row { display: flex; align-items: stretch; width: 100%; min-height: 104px; /* SleeveRow.sleeveSide, floored on the info column there — the row's floor here, since this box holds both */ padding: 0; border-left: none; /* the rail (below) replaces the portrait card's border-left genre cue */ border-radius: var(--ss-radius-card); overflow: hidden; /* clips the sleeve to the row's own corners */ } .card--row .card__sleeve { width: 104px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; background: var(--ss-ink-2); /* [Codex P2] `.card__wear`'s own `inset: 0` (unchanged) resolves against * the nearest POSITIONED ancestor — without this, that's `.card--row` * itself (the whole row), not the sleeve, and the mileage overlay * stretched across the full row and painted over the info column's text. * SleeveRow.swift applies the mileage overlay to the sleeve, not the row; * this is what makes that true here too. */ position: relative; } .card--row .card__art { width: 100%; height: 100%; object-fit: cover; border-radius: 0; } .card--row .vinyl-disc { width: 56px; height: 56px; } .card--row .card__rail { width: 4px; flex-shrink: 0; background: var(--genre, var(--ss-muted)); } .card--row .card__info { flex: 1; /* Without this a long, unbroken title/artist floors the flex item at its * min-content width and pushes .card__stats out past the row at a wide * viewport — the exact defect class this page was bitten by before, and * why it's only visible with room to distribute (a narrow phone width * never has slack to hide it in). See .recap-row__name's own note. */ min-width: 0; display: flex; flex-direction: column; justify-content: center; gap: 4px; padding: var(--ss-gap) 12px; } .card--row .card__top { margin: 0; } .card--row .card__genre { font-size: var(--ss-text-overline); } .card--row .card__title { font-size: var(--ss-text-card); overflow-wrap: break-word; } .card--row .card__artist { overflow-wrap: break-word; } .card--row .card__stats { margin-top: 2px; } /* The foil edge — crate tier, drawn on the row itself [Task 5 fix, Codex * P2]. SleeveRow's own ladder (Tokens.FoilEdge.edge(for:)/Tokens.Foil in * Tokens.swift): hairline at tier 0, bronze at 1, a two-stop gold gradient * at 2, and the same gradient plus two extra warm stops (the "prism") at 3, * with a soft gold glow. Values are hardcoded literals on iOS too — its own * comment calls this ladder a deliberate exception to the token retheme * ("Decision 6 keeps the heirloom Encore ladder unchanged"), so this is not * a token-mapping omission; it is carried the same way. */ .card--row.crate-tier--0 { border: 1px solid var(--ss-border); } .card--row.crate-tier--1 { border: 1.5px solid #8A6A2E; } .card--row.crate-tier--2 { border: 2px solid transparent; background: linear-gradient(var(--ss-panel), var(--ss-panel)) padding-box, linear-gradient(135deg, #FFD08A, #FFB43A) border-box; } .card--row.crate-tier--3 { border: 2px solid transparent; background: linear-gradient(var(--ss-panel), var(--ss-panel)) padding-box, linear-gradient(135deg, #FFD08A, #FFB43A, #FFF3D6, #FF8A5C) border-box; box-shadow: 0 0 5px rgba(255, 180, 58, .4); /* Tokens.Foil.prismGlowOpacity/prismGlowRadius */ } /* An owned-but-unforged record [record-collection design §12.1: card_id can * be null] — Record Collection's own row state, no equivalent on a setlist * row. No role="button"/tabindex/data-action (see the partial), so there is * nothing to focus; this only overrides the base `.card { cursor: pointer }` * (application.css above), which would otherwise mislabel an inert row as * clickable. Two classes for specificity over that single-class base rule. */ .card--row.card--row--inert { cursor: default; border: 1px solid var(--ss-border); } /* Search filters a row by setting the `hidden` ATTRIBUTE (collection_search_ * controller.js), which the `[hidden]` UA rule normally turns into * `display: none` — but `.card--row { display: flex }` above has equal * specificity and comes later in the cascade, so it would win and leave a * "hidden" row still laid out. This selector's extra attribute clause gives * it the higher specificity that actually wins. */ .card--row[hidden] { display: none; } /* The cut sits BESIDE the row (a sibling `
`, never nested inside * `.card`), so a click on it cannot bubble into the row's own * click->card-detail#openFromCard — see spec/system/card_detail_spec.rb's * "the cut and the row click do not fight" example. Kept relatively * positioned with its own stacking order regardless, per the owner's * standing instruction, so a future layout that brings it visually closer * to the row still resolves clicks to the cut, not the row underneath. */ .card__cut-form { position: relative; z-index: 2; margin-top: 6px; } .card__cut { font-size: var(--ss-text-caption); } /* Energy pips — always shown as a you/opponent pair */ .pips { display: flex; gap: 3px; justify-content: center; } .pip { width: 9px; height: 14px; border-radius: 2px; background: var(--ss-gold); } .pip--empty { background: var(--ss-inactive); } .energy-pair { display: flex; gap: 40px; justify-content: center; } /* Ruling card — the only amber-bordered panel in the system */ .ruling { background: var(--ss-panel); border: 1px solid rgba(255, 180, 58, .33); border-radius: 12px; padding: 14px 20px; max-width: 560px; margin: 0 auto; font-size: 16px; line-height: 1.4; } .detail-panel { background: var(--ss-panel); border-radius: 10px; border-left: 4px solid var(--genre, var(--ss-muted)); max-width: 480px; margin: 12px auto 0; padding: 12px 16px; text-align: left; } .detail-panel__ability { color: var(--ss-gold); font-weight: 700; } .detail-panel__themes { font-size: 12px; color: var(--ss-muted); } .recap-row { background: var(--ss-panel); border-left: 3px solid var(--ss-gold); border-radius: 10px; padding: 12px 16px; font-size: 15px; max-width: 560px; margin: 10px auto; text-align: left; } .recap-row--lost { border-left-color: var(--ss-muted); } /* The name + actions line, its own flex row so the disc and the Open/✕ * controls sit RIGHT-ALIGNED on the same line as the record rather than * wrapping onto a third one — a certified row used to run visibly taller * than an uncertified one because the old placeholder text simply followed * the name inline. An uncertified row renders this flex box with just the * name and the actions group, so row height never depends on certification * status. * * [Adversarial review finding F3] Open/✕ used to be a `float: right` SPAN, * a sibling of this block — which worked only because everything before it * was still inline content sharing one line box. Turning the name+badge * line into its own block-level flex box broke that: the float no longer * shared a line with anything, floats do not contribute to their parent's * HEIGHT, and the row could not grow to contain it — the controls rendered * in the row's bottom padding and touched the next card. Moving them INTO * this flex row (`.recap-row__actions`, normal flow, not floated) is what * fixes it: the row's height now genuinely includes them, for a certified * row and an uncertified one alike. */ .recap-row__title { display: flex; align-items: center; justify-content: space-between; gap: 8px; /* A FLOOR, not a proof of equality — pinned by spec/requests/setlists_spec.rb * ("the certification badge" / "pins the name line to the disc's own * height"), which checks only that this rule exists, not any rendered * height. At this row's own font-size (15px, ~21px natural line box) the * floor is what actually governs, so a certified and an uncertified row * match in practice — but nothing here stops a LONGER name from wrapping * or a larger user font-size setting from pushing a row taller than 26px, * certified or not. */ min-height: 26px; } /* The disc (when present) and the Open/✕ controls, grouped so they move * together at the row's trailing edge — same reasoning as `.recap-row__title` * above, one level in. `flex-shrink: 0` is deliberate: these controls must * never compress or wrap, only the name (below) gives up space. */ .recap-row__actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; } /* [Codex, PR #871 — the same class of bug the float fix lives inside] * A flex item's default `min-width: auto` floors it at its own min-content * width, and for a single unbroken word min-content IS the whole word — no * amount of `flex-shrink` (the default `1`, already in effect here) can * compress a flex item below that floor. `Setlist` names have no length or * word-boundary constraint, so a single long word (no spaces to wrap at) * pushed `.recap-row__actions` off the card or overlapped it, on a * certified AND an uncertified row alike — measured with a probe using an * unbroken 40+ character name, not the spaced one the earlier float * measurement happened to use, which wraps and never hits this floor. * `min-width: 0` removes the floor; `overflow-wrap: break-word` is what * then lets the name actually WRAP mid-word rather than simply overflow * once shrunk to nothing — never a `lineLimit`-style truncation, which * would hide characters at the default text size exactly the way this * branch already removed one for, on iOS. */ .recap-row__name { min-width: 0; overflow-wrap: break-word; } /* Tappable rows [Task 6/7, web parity] — the stretched-link pattern. A row * that is both fully tappable and carries other content can't be an anchor * wrapping everything (a form can't nest inside an anchor, and the "On tour" * link/certification badge are siblings, not descendants, of the name). * Instead ONE real anchor (`.recap-row__name-link`) gets a `::after` * stretched over the row's whole box via `position: absolute; inset: 0`, * resolved against `.recap-row`'s own `position: relative` below — so the * entire row is clickable through a real anchor, not a synthetic handler. * Reused by matches/_match_row.html.erb (Task 7), which shares `.recap-row`. */ .recap-row { position: relative; } .recap-row__name-link { color: inherit; text-decoration: none; } .recap-row__name-link::after { content: ""; position: absolute; inset: 0; } /* Anything inside `.recap-row` a pointer is meant to reach — a click OR a * hover affordance like a `title` tooltip — needs to sit ABOVE the stretched * area or it gets swallowed. [Codex P2] `.recap-row__actions` (the * certification badge) was missed on the first pass: the badge itself has * no click handler, but its `title` attribute is the ONLY surface exposing * every tier earned (the visible glyph shows just the highest), so an * unreachable hover silently deletes that information rather than merely * degrading a nice-to-have. Enumerated here rather than left to be found a * third time: * setlists/index.html.erb — .recap-row__ontour ("On tour"), .recap-row__actions (cert badge, title=) * matches/_match_row.html.erb — .recap-row__challenge-input (onclick), .recap-row__challenge-form ("Tear it down") * * LIFT THE CONTROL, NOT ITS CONTAINER [Codex P2, round 2]. `.recap-row__challenge` * itself used to carry this same treatment — but it's a plain block `
` * with no explicit width, so it sizes to the ROW's full content width by * default, and lifting it turned every blank pixel beside the (narrower) * input and button into a dead click target: measured at ~433px of a 468px * row on a real awaiting_opponent match. `.recap-row__ontour` and * `.recap-row__actions` were checked against the same test (measured, not * assumed) and are fine as-is — an inline `` and a flex item with no * flex-grow both size to their own content (~50px and ~60px of a * 468-560px row), never the row's full width. */ .recap-row__ontour { position: relative; z-index: 1; } .recap-row__actions { position: relative; z-index: 1; } .recap-row__challenge-input, .recap-row__challenge-form { position: relative; z-index: 1; } /* Text for assistive technology only — off-screen but still IN the * accessibility tree, which is the whole point: `display: none` and * `visibility: hidden` both REMOVE an element from that tree, so neither can * carry a name. The standard clip/1px pattern instead: laid out, painted into * a 1px box, then clipped to nothing. Absolutely positioned, so it adds no * width, no line box, and no flex gap wherever it is dropped in. */ .visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } /* Gold Record certification disc [gold-record-certification design, * ratified disc treatment]. Three stacked layers per the mockup: a spindle * hole, a groove texture, and a conic-gradient metal sheen — drawn once here * and coloured per tier below, never a shipped image. */ .cert-badge { display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0; } .cert-badge__tier { font-family: 'Special Elite', monospace; font-size: 10px; letter-spacing: .08em; } .cert-badge__disc { width: 26px; height: 26px; border-radius: 50%; flex-shrink: 0; background: radial-gradient(circle at 50% 50%, #0A0A0B 0 14%, transparent 14.5%), repeating-radial-gradient(circle at 50% 50%, rgba(0, 0, 0, .22) 0 1px, transparent 1px 3px), conic-gradient(from 210deg, var(--ss-m-deep), var(--ss-m-lit) 18%, var(--ss-m) 34%, var(--ss-m-deep) 50%, var(--ss-m-lit) 68%, var(--ss-m) 84%, var(--ss-m-deep)); box-shadow: 0 0 0 1px rgba(0, 0, 0, .6), 0 3px 10px rgba(0, 0, 0, .5); } .cert-badge--gold .cert-badge__tier { color: var(--ss-gold); } .cert-badge--gold .cert-badge__disc { --ss-m: var(--ss-gold); --ss-m-deep: var(--ss-gold-deep); --ss-m-lit: var(--ss-gold-lit); } .cert-badge--platinum .cert-badge__tier { color: var(--ss-platinum); } .cert-badge--platinum .cert-badge__disc { --ss-m: var(--ss-platinum); --ss-m-deep: var(--ss-platinum-deep); --ss-m-lit: var(--ss-platinum-lit); } .cert-badge--diamond .cert-badge__tier { color: var(--ss-diamond); } /* Diamond starts its sweep from 200deg (not 210) and weaves --ss-diamond-alt * through the ramp in place of the middle deep stop — colour alone is what * separates Diamond from Platinum [owner ruling: no different shape or * object], so the alt hue has to show up IN the sweep, not just at the edge. */ .cert-badge--diamond .cert-badge__disc { --ss-m: var(--ss-diamond); --ss-m-deep: var(--ss-diamond-deep); --ss-m-lit: var(--ss-diamond-lit); background: radial-gradient(circle at 50% 50%, #0A0A0B 0 14%, transparent 14.5%), repeating-radial-gradient(circle at 50% 50%, rgba(0, 0, 0, .22) 0 1px, transparent 1px 3px), conic-gradient(from 200deg, var(--ss-m-deep), var(--ss-m-lit) 18%, var(--ss-m) 34%, var(--ss-diamond-alt) 50%, var(--ss-m-lit) 68%, var(--ss-m) 84%, var(--ss-m-deep)); } /* Status banner — dashed means "temporary condition", the only dashed border */ .banner { border: 1px dashed rgba(156, 147, 176, .4); border-radius: 8px; padding: 8px 12px; font-size: 14px; color: var(--ss-muted); max-width: 480px; margin: 10px auto; text-align: center; } .panelbox { background: var(--ss-panel); border-radius: 12px; padding: 20px 24px; } /* Tappable "choice rows" [start-match iOS parity: StartMatchView's * SetlistRow/ChoiceRow] — the setlist and opponent pickers' whole * interaction now. Each row's entire box IS the control: a full-width * when tapping it only navigates (a setlist opening step 2, Showdown Night * opening the host form), a full-width