/* ================= design tokens ================= */ :root{ --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:24px; --sp-6:32px; --r-xs:9px; --r-sm:12px; --r-md:18px; --r-lg:26px; /* --r-xs: tight radius for the 26px form-dot (--r-sm would over-round it) */ --nav-h:66px; /* bottom-nav height (excl. safe-area): pad6 + (icon22 + label) + pad6 */ /* HOW TALL A LEAGUE TABLE MAY STAND BEFORE IT SCROLLS INSIDE ITSELF — owner ruling 2026-08-13: "הטבלאות של הליגות יכולות לגדול לגלילה ענקית... צריך שכל טבלה יהיה לה גלילה פנימית". Viewport-relative (dvh, the --kbd-reserve precedent) so a phone shows a good column of rows while the podium, season control and h2h below stay one thumb away; the px arm keeps a tablet from turning "bounded" into "most of the screen". ~10-11 rows on the owner's devices. Consumed at the #d1gen42 seam only — every league table instance (global/group, singles/doubles, tennis/padel) is a repaint of #leagueTable inside that one container, so one token bounds them all. */ --table-viewport:min(60dvh, 520px); --fs-body:16px; --fs-small:13px; --tap-min:48px; /* HOW MUCH OF THE SCREEN THE ANDROID KEYBOARD IS ASSUMED TO COVER — a declared BOUND, and the only value in this file that is not a measurement of anything the page can see. On Android the WebView is never resized for the IME (MainActivity declares adjustNothing, which is the white-screen fix — tests/android-webview-background.test.js carries the mechanism), and measured live in the real WebView with the keyboard up, innerHeight, visualViewport height/offsetTop/pageTop, the injected safe-area variables, env(keyboard-inset-height) and navigator.virtualKeyboard.boundingRect are ALL unchanged or zero, with not one resize event. The page therefore CANNOT learn the height, so this is sized from the device: the Samsung IME on the owner's Galaxy A50 covers 321 of 630 CSS px, 51%, and a suggestion strip and an emoji row are a few points each. 60% covers them with margin. Over-reserving costs a shorter dialog while typing; under-reserving costs the button the player is trying to press, so it errs upward on purpose. When @capacitor/keyboard lands (owed on a native build, deliberately not added from a lane) this stops being a bound and becomes a reading. See tests/android-keyboard-fold.test.js. */ --kbd-reserve:60dvh; --ease:cubic-bezier(.2,.8,.25,1); /* Stage 3.5e D1: off-scale values pulled out of index.html inline styles. Each holds the EXACT value that was inline — none of these were rounded to the --sp-1..6 scale, because rounding is an owner-visible spacing change on a phone and nothing in the suite can see spacing. Geometry only, so one shared block (not split per day/night theme). */ --sp-2px:2px; --sp-5px:5px; --sp-6px:6px; --sp-10px:10px; --sp-14px:14px; --sp-18px:18px; --sp-22px:22px; --fs-12-5px:12.5px; --fs-13-5px:13.5px; --fs-14px:14px; --fs-15px:15px; --fs-18px:18px; --fs-19px:19px; --fs-20px:20px; --r-7px:7px; --r-999px:999px; /* ---- RQS-01 board scales, VALUE-NAMED. ---------------------------------------- The board's spacing is 4 8 12 16 20 24 32 40 48 64 and its radii are 8 12 16 20 24. These are ADDED, never renumbered onto --sp-1..6: --sp-5 is 24px here and the board's fifth step is 20px, so re-pointing the index would move every --sp-5 site by 4px — and the comment ten lines above records this project's own rule that spacing is an owner-visible change on a phone and nothing in the suite can see it. New screens use these; the old scale is migrated on a commit that is accepted on the device. */ --space-4:4px; --space-8:8px; --space-12:12px; --space-16:16px; --space-20:20px; --space-24:24px; --space-32:32px; --space-40:40px; --space-48:48px; --space-64:64px; --radius-8:8px; --radius-12:12px; --radius-16:16px; --radius-20:20px; --radius-24:24px; /* ---- the QR plate, AND IT IS DELIBERATELY THE SAME IN BOTH THEMES. ---------------- Every other colour in this file is re-valued per theme; these two are not, and the reason is that the consumer is a CAMERA rather than an eye. The QR specification is dark modules on a light background, and while many decoders cope with an inverted code, "many" is not a property to ship a two-people-standing-on-a-court interaction on — the failure mode is a phone that simply never beeps, with nothing on either screen explaining why. So the code gets its own guaranteed-light plate in night as well as day, exactly like the neutral plot scrim the chart-ink rule requires. They live in :root rather than in the two theme blocks BECAUSE they must not diverge: a future re-valuation that gives night its own darker plate would silently stop cameras working, and the only way to see it would be to scan one. 21.0:1 — the maximum the sRGB gamut allows, which is the right target when the reader is an image sensor in bad light rather than a person. */ --qr-plate:#FFFFFF; --qr-ink:#000000; /* ---- RQS-01 type scale. ------------------------------------------------------- THE FACE NOW SHIPS. Owner instruction 2026-08-08: download the fonts and use them. `fonts/heebo-hebrew.woff2` + `fonts/heebo-latin.woff2` are self-hosted, precached in sw.js and carried by the OTA bundle (assemble-www.js ships `fonts` as a whole DIR). Heebo is a VARIABLE font — one file per subset covers 100..900, which is why four weights cost two files and 42 KB rather than eight files. Google serves the same woff2 for every weight; that is not a mistake, it is the variable axis. Split by unicode-range so a Latin-only screen never fetches the Hebrew subset. "Heebo Mono" IS NOT A REAL FAMILY — Heebo ships no monospace cut, so the board's number face cannot be honoured literally. The intent behind it (digits that do not jump as a score changes) is delivered by `font-variant-numeric:tabular-nums`, which is what this project's own numeric rule already requires; `--font-num` therefore names Heebo and the tabular feature is applied at the use site. Anton stays the scoreboard digits face — it is a display cut, not a body font. ~~The FACE is a separate, later owner decision~~ — taken 2026-08-08. */ --font-title:var(--font-body); --font-body:"Heebo", -apple-system, "SF Hebrew", "Segoe UI", Roboto, Arial, sans-serif; --font-num:var(--font-body); /* + font-variant-numeric:tabular-nums at the use site */ --fs-title-32:32px; --fs-title-28:28px; --fs-title-24:24px; --fs-body-20:20px; --fs-body-18:18px; --fs-body-16:16px; --fs-num-24:24px; --fs-num-20:20px; --fs-num-16:16px; --fs-num-14:14px; /* ---- the league podium bar's edge. ------------------------------------------- --pc was CONSUMED at .pbar::before with NO definition in any stylesheet, and shipped that way: league-groups.js writes it per element, so the podium renders and every other .pbar draws an invisible bar. Declared here so `var(--pc)` always resolves. This makes the podium legal; it does not bless writing a colour into a custom property from JS, which is still one of only two properties this app does that to. */ --pc:var(--line-interactive); --size-24px:24px; --size-26px:26px; --size-30px:30px; --size-32px:32px; --size-38px:38px; --size-40px:40px; --size-42px:42px; --size-44px:44px; --size-46px:46px; --size-50px:50px; --size-52px:52px; --size-52vh:52vh; --size-64px:64px; --size-96px:96px; --size-110px:110px; --size-120px:120px; --size-130px:130px; --maxw-420px:420px; --maxw-430px:430px; --maxw-440px:440px; --maxw-90dvh:90dvh; --z-16:16; /* Theme-invariant colours pulled out of index.html inline styles. These do NOT split into [data-theme="day"]/[data-theme="night"] because they never varied by theme before this refactor and must not start varying now: - google-btn-*: Google's own Sign-in-button brand colours (white fill, near- black text, #dadce0 border) — fixed by Google's brand guidelines, not by Raqio's theme. - sheet-scrim / sheet-shadow-color: the iOS-install bottom-sheet backdrop and drop shadow are a constant black scrim in both themes (unlike --scrim, which is theme-tinted for a different surface). */ --google-btn-bg:#fff; --google-btn-fg:#1f1f1f; --google-btn-border:#dadce0; --sheet-scrim:rgba(0,0,0,.55); --sheet-shadow-color:rgba(0,0,0,.45); /* ---- design isolation: the last colours that lived in component rules ---- Every value below is the EXACT literal that was inline in a rule, moved here unchanged. The sweep is a refactor, so nothing may render differently: these stay theme-invariant because they WERE theme-invariant, and unifying the near-identical alphas (.28/.3 bevel, .5/.55/.58 scrim) would be a rendering change wearing a tidy-up's clothes. Named for ROLE, never for palette — a token called --blue-900 makes the next reskin depend on the palette this one is replacing. Scrims — the darkness a modal layer dims the app with. Not a brand colour, which is why they do not split per theme: a scrim has to dim day AND night. */ --scrim-overlay:rgba(0,0,0,.5); /* full-screen overlay: statistics, clicker sheet */ --scrim-match:rgba(0,0,0,.58); /* in-match dialog — dims a live scoreboard hardest */ /* Elevation — the ink a floating layer's drop shadow is drawn in. A shadow tuned to this navy looks wrong on another brand, and that is exactly how a reskin lands "almost right" and takes a day to diagnose. */ --shadow-sheet-color:rgba(0,0,0,.35); /* the clicker sheet's lip */ --shadow-control-color:rgba(0,0,0,.3); /* switch knob */ --shadow-badge-color:rgba(0,0,0,.4); /* podium medal */ --track-shade:rgba(0,0,0,.12); /* inset shading in a switch track */ /* Bevel — the inset top-edge light that gives a filled control its lift. */ --bevel-hi:rgba(255,255,255,.28); --bevel-hi-pressed:rgba(255,255,255,.2); --bevel-hi-strong:rgba(255,255,255,.35); --bevel-hi-soft:rgba(255,255,255,.3); /* The pole a token is mixed TOWARD to darken it. Reskinning to a light brand makes this the one line that has to change for every shaded gradient in the app. */ --mix-darken:#000; /* The serving-player indicator. Whole-value tokens, following --acc-grad/--acc-glow: one reskin point instead of three stops and two shadow layers. It stays theme- invariant, and under RQS-01 that costs nothing: --accent is now ONE lime in both themes, so the reason this was held away from the brand ("pointing it at --accent would change how it renders in day") no longer applies. Re-valued to the board's lime here rather than left behind as the last of the old palette. */ --serve-dot-grad:radial-gradient(circle at 32% 30%, #D4FF7A 0%, #A8FF00 45%, #86CC00 100%); --serve-dot-shadow:0 0 10px rgba(168,255,0,.55), inset 0 -1px 2px rgba(0,0,0,.25); /* ---- the share card ---- The night-session broadcast palette that drawShareImage and drawRecapCard paint an exported PNG in. THEME-INVARIANT ON PURPOSE, and that is the whole reason these are here rather than in the two theme blocks: the image leaves the app, so its colours must not depend on whichever theme the person who OPENS it happens to be in. Reading them through tok() against a :root definition gives both things at once — the card stays identical in day and night (tests/canvas-token-ratchet.test.js proves that at runtime, by logging every colour the canvas assigns in each theme and comparing), and a reskin still reaches it, which a literal never allowed. */ --share-bg-top:#10284E; --share-bg-mid:#0B1D3A; --share-bg-bottom:#06142B; --share-court-line:rgba(255,255,255,.07); --share-court-line-soft:rgba(246,251,242,.09); --share-beam-from:rgba(199,242,10,.16); --share-beam-to:rgba(199,242,10,0); --share-grain-light:#fff; --share-grain-dark:#000; --share-ball-hi:#D8FF4D; --share-ball-core:#C7F20A; --share-ball-shade:#A6D700; --share-ball-seam:rgba(255,255,255,.9); --share-fg:#F8FBFF; --share-muted:#8EA7C5; --share-accent:#C7F20A; --share-mark-ink:#06142B; --share-glow-strong:rgba(199,242,10,.45); --share-glow-soft:rgba(199,242,10,.35); --share-chip-fill:rgba(199,242,10,.12); --share-footer:rgba(246,251,242,.5); --share-stat-label:#7fa78f; /* ---- league podium ---- Silver and bronze are metallic DECORATIVE fills; every name, rating and rank numeral on the podium sits on the guaranteed-contrast --fg in both themes, and none of that changes here. They are theme-invariant because a medal is a medal in both themes — which is exactly why they can be tokenised with no per-theme contrast risk. */ --mix-lighten:#fff; /* the pole a token is mixed toward to lighten */ --medal-champion-ink:#12210a; --medal-silver-fill-strong:rgba(212,222,236,.28); --medal-silver-fill-faint:rgba(212,222,236,.05); --medal-silver-rim:#c6d1e0; --medal-silver-hi:#f3f7fc; --medal-silver-shade:#bcc7d6; --medal-silver-ink:#1b2536; --medal-bronze-fill-strong:rgba(233,164,98,.28); --medal-bronze-fill-faint:rgba(233,164,98,.05); --medal-bronze-rim:#e3a869; --medal-bronze-hi:#f4bf88; --medal-bronze-shade:#cd7f43; --medal-bronze-ink:#2a1608; } html[data-sport="tennis"]{ --sport-accent:var(--accent); --sport-accent-ink:var(--accent-ink); --sport-tint:var(--tint); --sport-edge:var(--accent-edge); /* The court lines behind an empty state. 24% was the old palette's strength; under RQS-01 the board's --muted (#97A3B5) reads 3.38:1 on an --accent stripe at 24% over --surface, and scripts/a11y.js found it on the league route in both viewports. 12% is the SAME budget --tint is solved at, and it is the only accent-over-surface strength in this stylesheet for that reason: one accent wash, one meaning. --muted 4.89:1. */ --sport-line-image: linear-gradient(90deg, transparent 0 23%, color-mix(in srgb, var(--accent) 12%, transparent) 23% 24%, transparent 24% 76%, color-mix(in srgb, var(--accent) 12%, transparent) 76% 77%, transparent 77%); --sport-card-radius:var(--r-md); } html[data-sport="padel"]{ --sport-accent:var(--clay); --sport-accent-ink:var(--clay-ink); --sport-tint:var(--tint-clay); --sport-edge:var(--clay-edge); --sport-line-image: repeating-linear-gradient(90deg, transparent 0 17px, color-mix(in srgb, var(--clay) 16%, transparent) 17px 18px), repeating-linear-gradient(0deg, transparent 0 13px, color-mix(in srgb, var(--clay) 13%, transparent) 13px 14px); --sport-card-radius:var(--r-sm); } /* ===================== RQS-01 — the 2026 reskin ===================== Board: Raqio_Latest10_Package/mockups/01_מערכת_עיצוב_2026.png. The BOARD wins over the package handoff MD (owner ruling 3, 2026-08-07), and both modes are mandatory (ruling 4) — the board draws DARK ONLY, so `day` below is a DERIVATION, not a transcription. Every ratio in these comments was computed with scripts/a11y.js's own channel/luminance/contrast, and tests/rqs01-tokens.test.js recomputes all of them on every run: no number here is asserted. THREE THINGS THIS PALETTE DOES DIFFERENTLY FROM THE PROPOSAL, each because the proposal's own value was measured and failed: 1. `--graph` IS NOT RETIRED into `--accent-ink`. It is a FILL that carries `--on-accent` text at `.pDot.w`; folding a fill into a 4.5:1 text ink put **2.93:1** on that chip on day. A fill and an ink are different guarantees — app.js:6571 says exactly that — so `--graph` stays, re-valued per theme, and it keeps `.completion .cbar > i`'s gradient a gradient instead of one flat colour. 2. `--muted` IS SOLVED AGAINST THE PAINT, NOT THE TOKENS. Four component rules mixed their own accent wash (16/18/20/22%), so no token named those containers and no solve saw them; `--muted` measured 3.60-4.34:1 there. They now use `--tint`, which already owns that role and IS solved: night `--tint` is `--accent` at 12% over `--surface`, and 12% is exactly the budget `--muted` #97A3B5 has (4.89:1). 3. THE BRAND KEEPS ONE VALUE AND GAINS AN EDGE. `--accent` and `--clay` are the board's #A8FF00 / #00CFFF in BOTH themes. On white they are 1.24:1 and 1.85:1 — perfect as fills under a paired dark ink, illegible as the bare border, dot and ring the stylesheet also draws them as, including `.panel.serving`, the serve indicator. So `--accent-edge` / `--clay-edge` carry the 3:1 the fill cannot, and the brand does not have to be diluted on half the product to get it. `--line-interactive` is the token the board is missing and §8.4 named: `--line` #223048 on #0E1626 is **1.27:1**, which is right for a decorative rule and forbidden as the ONLY boundary of a control, where WCAG 2.2 §1.4.11 requires 3:1. ==================================================================== */ [data-theme="night"]{ /* dropdown chevron, drawn from the theme's own ink so it can never be a dark arrow on a dark surface (which is what the native `appearance:auto` arrow did). stroke = --muted: 6.60:1 on --surface, well past the 3:1 a control indicator needs. */ --select-chevron:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2397A3B5' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 10l5 5 5-5'/%3E%3C/svg%3E"); /* ---- surfaces. The board gives bg and surface; the ladder above them is derived at the same OKLCH hue (263.4°) and the same +3 step the board itself uses. */ --bg:#0E1626; /* board */ --bg-grad: radial-gradient(90% 55% at 18% -8%, rgba(168,255,0,.05) 0%, rgba(168,255,0,0) 60%), radial-gradient(90% 55% at 82% -8%, rgba(0,207,255,.045) 0%, rgba(0,207,255,0) 60%), radial-gradient(150% 120% at 50% 0%, #16223B 0%, #101A2C 50%, #0E1626 100%); /* every stop's luminance is 0.008-0.017; the darkest ink that lands on this (--muted, 0.361) is OUTSIDE that band in one direction, so a11y.js's `straddles` 1:1 penalty cannot fire here. Worst ink-over-gradient 6.20:1. */ --surface:#141D2F; /* board */ --surface-2:#1B2537; --sub:#202A3E; /* the recessed chip reads ABOVE the card on dark */ /* ---- ink. The board gives TWO tiers, and the contrast budget proves a third is not available: --muted's own worst container is 4.89:1, so anything dimmer fails AA. --faint therefore holds --muted's value rather than inventing a tier that cannot clear the floor. Its NAME survives only because admin.html still reads it. */ --fg:#EBEDF5; /* board */ --muted:#97A3B5; /* board — worst surface 4.89:1 */ --faint:#97A3B5; /* ---- boundaries. THREE roles, and the middle one is what §8.4 asked for. */ --line:#223048; /* board. DECORATIVE ONLY — 1.27:1 on --surface, by design */ --line-interactive:#7A869D; /* a control edge: 3.41:1 worst, 4.59:1 on --surface */ --line-soft:rgba(235,237,245,.08); --chalk-strong:#7A869D; /* the ad-hoc "stronger line"; --line-interactive is that role */ --hair:rgba(255,255,255,.14); /* a bevel HIGHLIGHT, white in both themes — see day */ /* ---- accent. One lime in both themes; what changes is the ink and the edge. */ --accent:#A8FF00; /* board */ --on-accent:#0E1626; /* 14.61:1 on --accent, 14.61:1 on --graph */ --accent-ink:#C4FF4D; /* text: 10.57:1 worst. Lighter than --accent, as day is darker */ --accent-edge:#A8FF00; /* graphical: 10.10:1 worst — on dark the brand clears 3:1 unaided */ --graph:#A8FF00; /* FILL for chart marks and the win dot; carries --on-accent */ --tint:#263829; /* OPAQUE: --accent at 12% over --surface. --muted 4.89:1 */ --acc-grad:linear-gradient(160deg,#C4FF4D,#A8FF00 55%,#86CC00); --acc-glow:0 0 18px rgba(168,255,0,.22); --glow:0 0 14px rgba(168,255,0,.08); --ring:#A8FF00; /* focus ring: 10.10:1 worst */ --digit:#C4FF4D; --digit-glow:0 0 18px rgba(168,255,0,.14); /* ---- padel. Cyan re-values --clay, so html[data-sport="padel"] re-skins through its existing aliases untouched. --clay-ink stays DISTINCT from --clay: where they were equal, every inset ring drawn as color-mix(--clay-ink …) on a --clay fill vanished. */ --clay:#00CFFF; /* board */ --on-clay:#0E1626; /* 9.79:1 */ --clay-ink:#7FE3FF; /* text: 8.53:1 worst */ --clay-edge:#00CFFF; /* graphical: 6.77:1 worst */ --tint-clay:#16303F; /* OPAQUE: --muted 5.38:1 */ /* ---- status. The board's five states, each a triple: a 3:1 dot, an opaque fill, and the 4.5:1 ink that fill is solved against (Material-3 pairing, the house rule). */ --status-approved:#9CD71E; --status-approved-fill:#243120; --status-approved-on:#A9E132; --status-pending:#F5A51B; --status-pending-fill:#332A1C; --status-pending-on:#F7B443; --status-disputed:#E95B5D; --status-disputed-fill:#33222A; --status-disputed-on:#F08A86; --status-expired:#B1B7C7; --status-expired-fill:#232C3E; --status-expired-on:#B8BECD; --status-cancelled:#7A869D; --status-cancelled-fill:#1C2434; --status-cancelled-on:#98A3B8; /* the board's cancelled dot #667187 is 2.4:1 on a container; the value that fixes it is --line-interactive's, carried here rather than aliased so the two can diverge later. */ /* ---- refusal. A full-width refusal notice stays SATURATED: #liveSportMismatch and #writeNotice[data-tone="refused"] exist to be unmissable, and demoting them to the pale pending chip would keep their suites green while removing the thing they are for. Same amber as --status-pending, a different container weight. */ --warn-surface:#F5A51B; --warn-ink:#2A1B00; /* 8.19:1 */ --danger:#F08A86; /* destructive ink: 6.97:1 on --surface, 5.93:1 on --tint-danger */ --tint-danger:#3A2429; /* OPAQUE — replaces color-mix(--danger 15%, transparent) */ --sel-bg:#A8FF00; --sel-fg:#0E1626; /* 14.61:1 */ --kudos-flame:#E07A45; /* a warm flame, not the accent green; 4.19:1 worst */ /* ---- elevation. The board's "צל רך" is rgba(0,0,0,.35). */ --shadow-sm:0 1px 4px rgba(0,0,0,.25), 0 10px 26px rgba(0,0,0,.35); --shadow-md:0 2px 10px rgba(0,0,0,.35), 0 18px 50px rgba(0,0,0,.5); --glass:linear-gradient(165deg, rgba(255,255,255,.045), rgba(255,255,255,0) 42%); --scrim:rgba(14,22,38,.82); --grain-op:.026; } [data-theme="day"]{ --select-chevron:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235A6376' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 10l5 5 5-5'/%3E%3C/svg%3E"); /* ---- surfaces. DERIVED: same rung COUNT and same direction of elevation as night (the raised card is nearer the light), but the step size is set by the ink budget rather than copied — a light theme has less ink headroom, and copying night's step failed two dozen pairs. Only the recessed chip flips below the card, which is what the shipped day theme already did. */ --bg:#F3F5FA; --bg-grad: radial-gradient(90% 55% at 18% -8%, rgba(168,255,0,.08) 0%, rgba(168,255,0,0) 60%), radial-gradient(90% 55% at 82% -8%, rgba(0,207,255,.05) 0%, rgba(0,207,255,0) 60%), linear-gradient(180deg, #F9FAFD 0%, #F5F7FB 50%, #F3F5FA 100%); --surface:#FFFFFF; /* board "לבן" */ --surface-2:#F9FAFD; --sub:#EDF0F6; --fg:#0A111F; /* the board's neutral hue, taken to the dark end */ --muted:#5A6376; /* solved: 5.09:1 worst */ --faint:#5A6376; --line:#D8DDE7; /* mirrors the dark border's RATIO (1.36:1), not its lightness */ --line-interactive:#6F7889; /* 3.75:1 worst, 4.45:1 on --surface */ --line-soft:rgba(10,17,31,.09); --chalk-strong:#6F7889; --hair:rgba(255,255,255,.85); /* still a WHITE bevel: this is an inset top-edge LIGHT. Retiring it into --line-soft would have inverted its polarity on day — a 5px highlight becoming a shadow — and nothing in the suite measures a bevel. */ --accent:#A8FF00; /* identical to night: one brand value */ --on-accent:#0E1626; /* 14.61:1 — the dark ink on lime in BOTH themes */ --accent-ink:#456F00; /* text: 5.03:1 worst */ --accent-edge:#5C8B00; /* graphical: 3.44:1 worst. This is what makes the brand survivable on light — --accent is 1.24:1 here. */ --graph:#658F00; /* FILL: carries --on-accent at 4.72:1 AND clears 3:1 as a chart mark. Both constraints, one narrow window. */ --tint:#F1FFD6; /* OPAQUE */ --acc-grad:linear-gradient(160deg,#C4FF4D,#A8FF00 55%,#86CC00); --acc-glow:0 0 14px rgba(168,255,0,.12); --glow:0 0 0 0 rgba(0,0,0,0); --ring:#5C8B00; /* 3.44:1 worst */ --digit:#456F00; --digit-glow:none; --clay:#00CFFF; --on-clay:#0E1626; /* 9.79:1 */ --clay-ink:#00637F; /* text: 5.74:1 worst */ --clay-edge:#00849F; /* graphical: 3.69:1 worst — --clay is 1.85:1 here */ --tint-clay:#DFF7FF; --status-approved:#4B7400; --status-approved-fill:#EFF9DC; --status-approved-on:#3C5C00; --status-pending:#8F5400; --status-pending-fill:#FDF2DF; --status-pending-on:#7E4900; --status-disputed:#BC3A3D; --status-disputed-fill:#FDEAEC; --status-disputed-on:#9C2C33; --status-expired:#666C7E; --status-expired-fill:#F2F4F7; --status-expired-on:#575D6F; --status-cancelled:#6F7889; --status-cancelled-fill:#E9ECF1; --status-cancelled-on:#525A6D; --warn-surface:#F5A51B; --warn-ink:#2A1B00; /* the same saturated refusal amber */ --danger:#A02F3C; /* 7.08:1 on --surface, 6.21:1 on --tint-danger */ --tint-danger:#FDECEE; --sel-bg:#0E1626; --sel-fg:#EBEDF5; /* 15.47:1 */ --kudos-flame:#B84E1C; /* 4.28:1 worst */ --shadow-sm:0 1px 3px rgba(10,17,31,.05), 0 8px 20px rgba(10,17,31,.10); --shadow-md:0 1px 4px rgba(10,17,31,.07), 0 16px 36px rgba(10,17,31,.16); --glass:linear-gradient(165deg, rgba(255,255,255,.7), rgba(255,255,255,0) 45%); --scrim:rgba(243,245,250,.85); --grain-op:.02; } /* dedicated scoreboard digits face, self-hosted, precached for offline */ @font-face{ font-family:'Anton'; src:url('fonts/anton.woff2') format('woff2'); font-weight:400; font-style:normal; font-display:swap; } /* RQS-01's family, self-hosted for the same reason Anton is: the app runs offline and inside a native WebView, where a CDN is a dependency that fails silently on a court with no signal. `font-weight:100 900` declares the VARIABLE axis — one file answers every weight the scale asks for. `font-display:swap` so Hebrew text is never invisible while 12 KB arrives; the system stack behind it in --font-body is what paints first. */ @font-face{ font-family:'Heebo'; src:url('fonts/heebo-hebrew.woff2') format('woff2'); unicode-range:U+0307-0308, U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F; font-weight:100 900; font-style:normal; font-display:swap; } @font-face{ font-family:'Heebo'; src:url('fonts/heebo-latin.woff2') format('woff2'); unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; font-weight:100 900; font-style:normal; font-display:swap; } *{ box-sizing:border-box; margin:0; padding:0; -webkit-tap-highlight-color:transparent; } .hidden{ display:none!important; } .srOnly{ position:absolute!important; width:1px!important; height:1px!important; padding:0!important; margin:-1px!important; overflow:hidden!important; clip:rect(0,0,0,0)!important; white-space:nowrap!important; border:0!important; } html,body{ height:100%; } body{ background:var(--bg); background-image:var(--bg-grad); background-attachment:fixed; color:var(--fg); font:var(--fs-body)/1.5 -apple-system, "Segoe UI", Roboto, "Heebo", Arial, sans-serif; overscroll-behavior:none; user-select:none; -webkit-user-select:none; touch-action:manipulation; transition:background-color .3s, color .3s; } .num{ direction:ltr; unicode-bidi:isolate; font-variant-numeric:tabular-nums; white-space:nowrap; } .screen{ display:none; min-height:100dvh; } .screen.active{ display:flex; flex-direction:column; animation:screenIn .3s var(--ease); } @keyframes screenIn{ from{ opacity:0; transform:translateY(8px); } } button{ font:inherit; color:var(--fg); background:var(--surface); border:1.5px solid var(--line-soft); border-radius:var(--r-sm); min-height:var(--tap-min); padding:var(--sp-2) var(--sp-4); cursor:pointer; box-shadow:var(--shadow-sm); transition:transform .12s var(--ease), box-shadow .2s, background-color .2s, border-color .2s; } button:active{ transform:scale(.965); } fieldset button:not(.primary):not(.chip):not(.histDel):not(.switch):not([aria-pressed]){ background:var(--sub); border-color:transparent; } button:disabled{ opacity:.35; cursor:default; box-shadow:none; } .appCard{ background-color:var(--surface); border:1px solid var(--line-soft); border-radius:var(--sport-card-radius, var(--r-md)); box-shadow:var(--shadow-sm); padding:var(--sp-4); } .appBadge{ display:inline-flex; align-items:center; justify-content:center; gap:6px; min-height:32px; max-width:100%; padding:5px 10px; border:1px solid var(--sport-edge, var(--accent-edge)); border-radius:999px; background:var(--sport-tint, var(--tint)); color:var(--sport-accent-ink, var(--accent-ink)); font-size:13px; font-weight:800; } .appButton{ min-height:var(--tap-min); display:inline-flex; align-items:center; justify-content:center; gap:8px; font-weight:750; } .uiState{ display:grid; grid-template-columns:auto minmax(0, 1fr); align-items:center; gap:var(--sp-3); margin-block:var(--sp-3); background-image:var(--sport-line-image); background-blend-mode:soft-light; } .uiStateIcon{ width:38px; height:38px; padding:8px; border-radius:50%; color:var(--sport-accent-ink); background:var(--sport-tint); } .uiStateCopy{ min-width:0; } .uiStateCopy h3{ margin:0; font-size:15px; line-height:1.35; } .uiStateCopy p{ margin:3px 0 0; color:var(--muted); font-size:13px; line-height:1.5; } .uiStateActions{ grid-column:1 / -1; display:flex; flex-wrap:wrap; gap:var(--sp-2); } .uiStateActions .appButton{ flex:1; min-width:min(150px, 100%); } .uiState-error .uiStateIcon{ color:var(--danger); background:color-mix(in srgb, var(--danger) 12%, var(--surface)); } .uiState-offline .uiStateIcon{ color:var(--clay-ink); background:var(--tint-clay); } .uiStateCompact{ display:flex; padding:8px 10px; border-radius:999px; box-shadow:none; background-image:none; } .uiStateCompact .uiStateIcon{ width:26px; height:26px; padding:5px; } .uiStateCompact .uiStateCopy h3{ font-size:12.5px; } .uiStateCompact .uiStateCopy p, .uiStateCompact .uiStateActions{ display:none; } .uiStateSkeleton{ grid-column:1 / -1; display:grid; gap:7px; width:100%; } .uiStateSkeleton span{ display:block; height:10px; border-radius:999px; background:linear-gradient(90deg, var(--sub), var(--sport-tint), var(--sub)); background-size:200% 100%; animation:uiStateShimmer 1.4s linear infinite; } .uiStateSkeleton span:nth-child(2){ width:78%; } .uiStateSkeleton span:nth-child(3){ width:54%; } @keyframes uiStateShimmer{ to{ background-position:-200% 0; } } .appOverlay[hidden]{ display:none !important; } #iosGuideWrap.show{ display:flex; } button.primary{ background:linear-gradient(180deg, var(--accent), color-mix(in srgb, var(--accent) 84%, var(--mix-darken) 16%)); color:var(--on-accent); border:1px solid var(--accent-edge); font-weight:800; box-shadow:var(--shadow-md); } button:focus-visible{ outline:3px solid var(--ring); outline-offset:2px; } /* Destructive account action: --danger clears AA only on the opaque surface, not the generic fieldset --sub button fill (verified in both themes). */ #acctDeleteBtn{ background:var(--surface); color:var(--danger); border-color:color-mix(in srgb, var(--danger) 55%, transparent); font-weight:700; } .accountActionHelp{ margin:var(--sp-1) 0 var(--sp-2); } .accountActionStatus{ min-height:1.45em; margin-top:var(--sp-1); } .accountActionStatus:empty{ min-height:0; margin-top:0; } .accountDangerZone{ margin-top:var(--sp-4); padding-top:var(--sp-4); border-top:1px solid var(--line-soft); } .accountDangerTitle{ color:var(--danger); } .accountDeleteStatus{ margin-inline:var(--sp-4); } /* ================= setup ================= */ #setup{ padding:max(var(--sp-5), env(safe-area-inset-top)) var(--sp-4) calc(var(--nav-h) + env(safe-area-inset-bottom) + var(--sp-4)); gap:var(--sp-4); max-width:520px; margin:0 auto; width:100%; } /* bottom pad clears the fixed #bottomNav */ .hero{ display:flex; align-items:center; justify-content:space-between; } .hero h1{ font-size:32px; font-weight:900; letter-spacing:-.02em; line-height:1.15; } .hero .sub{ color:var(--muted); font-size:var(--fs-small); margin-top:2px; } .iconBtn{ width:48px; min-height:48px; padding:0; border-radius:14px; font-size:20px; display:flex; align-items:center; justify-content:center; } #appMain{ display:flex; flex-direction:column; gap:var(--sp-4); min-width:0; } .sportContextSwitch{ position:relative; isolation:isolate; overflow:hidden; display:grid; grid-template-columns:1fr 1fr; gap:4px; padding:4px; background:var(--sub); border:1px solid var(--line-soft); border-radius:var(--r-sm); } .sportContextBadge::before{ content:""; position:absolute; inset:0; z-index:-1; pointer-events:none; background-image:var(--sport-line-image); opacity:.72; } .sportContextSwitch button{ display:flex; align-items:center; justify-content:center; gap:7px; min-height:44px; padding:6px 10px; border:0; box-shadow:none; background:transparent; font-size:14px; font-weight:750; } .sportContextSwitch button[aria-pressed="true"]{ background:var(--surface); color:var(--sport-accent-ink); box-shadow:var(--shadow-sm); border:1px solid var(--sport-edge); } .sportInheritedNote{ margin:0; padding:9px 11px; border-radius:var(--r-sm); background:var(--sub); color:var(--muted); line-height:1.45; } .stage3Setup{ position:relative; overflow:hidden; } .stage3ChoiceGrid{ display:grid; grid-template-columns:1fr; gap:var(--sp-2); } .stage3ChoiceGrid > button{ width:100%; min-height:64px; display:flex; align-items:center; gap:var(--sp-3); text-align:start; padding:10px 12px; background:var(--sub); color:var(--fg); border:1px solid var(--line-soft); box-shadow:none; } .stage3ChoiceGrid > button .ic{ flex:0 0 auto; color:var(--sport-accent-ink); } .stage3ChoiceGrid > button span{ display:flex; min-width:0; flex-direction:column; gap:2px; } .stage3ChoiceGrid > button b{ font-size:14px; } .stage3ChoiceGrid > button small{ color:var(--muted); font-size:12px; line-height:1.35; } .stage3ChoiceGrid > button[aria-pressed="true"]{ background:var(--tint); border-color:var(--accent-ink); box-shadow:inset 0 0 0 1px var(--accent-ink); } .stage3ContextNote{ padding:10px 12px; border-radius:var(--r-sm); background:var(--sub); color:var(--muted); font-size:12.5px; line-height:1.5; border-inline-start:3px solid var(--sport-accent); } .stage3PresetCards{ display:grid; grid-template-columns:1fr; gap:var(--sp-2); } /* An author `display` rule outranks the browser's own [hidden]{display:none}, so setting .hidden in JS did nothing here: choosing Custom hid nothing and the ready-made formats stayed on screen underneath the custom panel, contradicting the choice just made. Any element whose class sets display needs this pairing. */ .stage3PresetCards[hidden]{ display:none; } .stage3PresetCards > button{ min-height:62px; padding:10px 12px; display:grid; grid-template-columns:1fr auto; gap:4px 10px; text-align:start; background:var(--sub); color:var(--fg); border:1px solid var(--line-soft); box-shadow:none; } .stage3PresetCards > button b{ font-size:13.5px; } .stage3PresetCards > button span{ color:var(--muted); font-size:12px; } .stage3PresetCards > button .stage3PresetCheck{ grid-row:1 / span 2; grid-column:2; align-self:center; width:24px; height:24px; display:grid; place-items:center; border-radius:50%; border:1.5px solid var(--line-soft); color:transparent; } .stage3PresetCards > button[aria-checked="true"]{ border-color:var(--accent-ink); background:var(--tint); } .stage3PresetCards > button[aria-checked="true"] .stage3PresetCheck{ color:var(--on-accent); background:var(--accent); border-color:var(--accent); } .stage3CustomRules{ border:1px solid var(--line-soft); border-radius:var(--r-sm); background:var(--sub); } .stage3CustomRules > summary{ min-height:var(--tap-min); display:flex; align-items:center; padding:8px 12px; cursor:pointer; font-weight:750; color:var(--fg); } .stage3CustomRules > summary::-webkit-details-marker{ display:none; } .stage3CustomRules > summary::after{ content:"›"; margin-inline-start:auto; color:var(--muted); transform:rotate(90deg); transition:transform .2s var(--ease); } .stage3CustomRules[open] > summary::after{ transform:rotate(-90deg); } .stage3CustomBody{ display:grid; grid-template-columns:1fr 1fr; gap:var(--sp-3); padding:0 12px 12px; border-top:1px solid var(--line-soft); } /* Labels wrap to different line counts ("יעד טאי־ברייק" vs "טאי־ברייק בשוויון משחקונים"), which used to push one control 20px below its neighbour in the same grid row. Stretch each field and pin the control to the bottom so controls line up regardless of how many lines their label takes. */ .stage3CustomBody .field{ padding-top:var(--sp-3); align-self:stretch; justify-content:space-between; } .stage3CustomBody .field > select, .stage3CustomBody .field > input{ margin-top:auto; } .stage3CustomBody select{ /* background-COLOR, not the `background` shorthand: the shorthand resets background-image and silently erased the shared chevron, leaving the browser's native theme-blind arrow. */ width:100%; min-height:var(--tap-min); font:inherit; color:var(--fg); background-color:var(--surface); border:1px solid var(--line-soft); border-radius:var(--r-sm); padding:8px; cursor:pointer; } .stage3CustomBody input[type="number"]{ width:100%; min-height:var(--tap-min); color:var(--fg); background:var(--surface); border:1.5px solid var(--chalk-strong); border-radius:var(--r-sm); padding:8px 12px; cursor:text; } .stage3CustomBody select{ border-color:var(--chalk-strong); } .stage3RulesSummary{ padding:var(--sp-3); border-radius:var(--r-sm); background:var(--sub); border:1px solid var(--line-soft); } .stage3RulesSummary h2{ font-size:15px; margin:0 0 7px; } /* LONGHAND, and not as a matter of taste. `font:600 12.5px/1.7 inherit` parses as nothing: `inherit` is legal as the WHOLE value of the `font` shorthand and never as its family, so the declaration is invalid and the browser drops all four values — the parsed rule has no `font` in it at all. This node is a 
, so what survived was the UA stylesheet's
     `monospace`, i.e. Hebrew in Courier at 16px/400. The owner's device sweep found it as the
     "כך נשחק" card. tests/rules-card-font.test.js reads the COMPUTED values, because the source
     text looks correct and only the computed value is wrong. styles.css is unowned; these are
     the two lines. (The sixteen other `font:inherit` sites in this file are the bare form and
     are valid — only these two carried extra values.) */
  .stage3RulesSummary pre{
    margin:0; white-space:pre-wrap; color:var(--fg);
    font-family:inherit; font-weight:600; font-size:12.5px; line-height:1.7;
  }
  #stage3InviteSend{ margin-top:8px; width:100%; }
  #stage3ConsentMissing{ margin-top:8px; color:var(--danger); font-weight:700; }
  .stage3InvitePanel{ display:flex; flex-direction:column; gap:8px; margin-top:8px; }
  /* author display:flex/inline-flex must not defeat the hidden attribute.
     #stage3ExtendWindowBtn joined this list on 2026-08-02: .appButton sets
     display:inline-flex, which outranks the browser's own [hidden] rule, so the button was
     drawn in EVERY invite state — including the ones where the window is closed and
     tapping it can only answer that it cannot be extended.
     #reportResultSubmit joined it likewise (defect A): the same .appButton rule kept the
     SPENT submit button drawing after a report was filed or the daily right used up
     (submit.hidden = true, result-claim.js). styles.css is unowned; this is the one line. */
  #stage3InviteSend[hidden], #stage3InviteFriendlyBtn[hidden],
  #stage3ExtendWindowBtn[hidden], .stage3InvitePanel[hidden],
  #reportResultSubmit[hidden]{ display:none; }
  .stage3InviteSeats{ display:flex; flex-direction:column; gap:6px; list-style:none; }
  .stage3InviteSeat{
    display:flex; align-items:center; justify-content:space-between; gap:8px;
    min-height:44px; padding:8px 10px; border-radius:9px;
    background:var(--surface); color:var(--fg);
  }
  .stage3InviteName{
    font-weight:700; font-size:13.5px; min-width:0; overflow-wrap:anywhere;
  }
  .stage3InviteStatus{
    display:inline-flex; align-items:center; gap:5px; flex:0 0 auto;
    font-size:12px; font-weight:800; padding:4px 10px; border-radius:999px;
    white-space:nowrap; background:var(--sub); color:var(--muted);
  }
  .stage3InviteSeat[data-status="accepted"] .stage3InviteStatus{
    background:var(--tint); color:var(--accent-ink);
  }
  .stage3InviteSeat[data-status="declined"] .stage3InviteStatus{
    background:var(--tint-danger); color:var(--danger);
  }
  #stage3InviteFriendlyBtn, #stage3ExtendWindowBtn{ width:100%; }
  #stage3RulesModeField[hidden]{ display:none !important; }
  #stage3SetupStatus[data-kind="error"]{ color:var(--danger); font-weight:700; }
  #stage3SetupStatus[data-kind="ok"]{ color:var(--accent-ink); font-weight:700; }

  /* THE RATED-FLOOR NOTICE. Owner ruling 2026-08-09 — the player is told the minimum WHILE
     they choose, not after they file. Both states are drawn, never one: a notice that only
     appears when something is wrong makes "silent" and "fine" look identical, which is the
     whole defect.

     TOKENS ONLY, and the two it uses are the pair this panel already trusts three lines
     above. --accent-ink is 10.57:1 on night and 5.03:1 on day; --muted is 4.89:1 and 5.09:1.
     Both clear AA body text (4.5:1) in BOTH themes against --sub, which is the surface
     .stage3Setup actually paints. Deliberately NOT --danger: a format that does not carry a
     rating is a fact about the format, not an error the player made, and colouring it as one
     would push people off a format they chose on purpose. */
  .stage3RatingNote{
    margin:8px 0 0; padding:8px 10px; border-radius:var(--r-sm);
    background:var(--sub); line-height:1.5;
    border-inline-start:3px solid var(--line-soft);
  }
  /* ONE PAIR OF INKS FOR ONE RULE, on both screens that state it. #reportResultRulesetRating
     is the report screen's copy of this sentence (RaqioStage3Setup.rulesetFloorNotice writes
     both), and it is named here rather than given its own colours: a second pair is a second
     thing to hold at AA in two themes, and the day one moves is the day they disagree. The
     border marker is the setup panel's alone — the report screen's note has no left rule. */
  #stage3RulesRating[data-kind="rated"]{
    color:var(--accent-ink); font-weight:700; border-inline-start-color:var(--accent-ink);
  }
  #stage3RulesRating[data-kind="unrated"]{
    color:var(--muted); font-weight:600; border-inline-start-color:var(--status-pending);
  }
  #reportResultRulesetRating[data-kind="rated"]{ color:var(--accent-ink); font-weight:700; }
  #reportResultRulesetRating[data-kind="unrated"]{ color:var(--muted); font-weight:600; }
  /* An author `display` rule outranks the UA's [hidden]{display:none}; this block sets none,
     but the paired rule is kept so a later layout change here cannot resurrect that bug
     (the same note styles.css:559-564 carries for .stage3PresetCards). */
  .stage3RatingNote[hidden]{ display:none; }

  /* Task 18: the invitee's confirmation dialog. Reuses .stage3Dialog / .stage3DecisionActions
     / .stage3InviteSeats (task 17) verbatim for the shared chrome and the participant list,
     so both sides of ranked consent look and read identically in both themes. */
  .rankedInviteDialog h2{
    display:flex; align-items:center; justify-content:space-between; gap:var(--sp-2);
  }
  /* Longhand for the same reason as .stage3RulesSummary pre above — the invalid `font`
     shorthand dropped all four values and left this 
 on the UA's monospace. */
  #rankedInviteRules{
    margin:var(--sp-3) 0; padding:var(--sp-3); border-radius:var(--r-sm);
    background:var(--sub); border:1px solid var(--line-soft);
    white-space:pre-wrap; color:var(--fg);
    font-family:inherit; font-weight:600; font-size:12.5px; line-height:1.7;
  }
  /* --danger clears AA only on the opaque --surface fill, matching #acctDeleteBtn. */
  #rankedInviteDecline{
    background:var(--surface); color:var(--danger);
    border:1.5px solid color-mix(in srgb, var(--danger) 55%, transparent); font-weight:800;
  }

  #resumeBanner{
    display:none; border:none; border-radius:var(--r-md); padding:var(--sp-4); gap:var(--sp-2);
    background:linear-gradient(135deg, var(--tint), var(--surface) 65%);
    box-shadow:var(--shadow-md); border-inline-start:5px solid var(--accent-edge);
  }
  #resumeBanner.show{ display:flex; flex-direction:column; }
  /* C3 fix round 1 — THREE buttons can now share this row, and `flex:1` could not fit them.
     Until C3 at most two of #resumeBtn / #resumeWatchLiveBtn / #discardBtn were ever visible
     together; the alongside render makes three the ordinary case on a device holding a
     journal while another match waits for a decision. `flex:1` is `flex:1 1 0%` with the
     default `min-width:auto`, so each button refuses to shrink below its own label and the
     row spills — measured at 320px: scrollWidth 257 against clientWidth 251, every label
     wrapping. scripts/a11y.js runs this exact probe but structurally cannot reach this
     state, so no rail catches it and the owner meets it on a real phone.

     Mobile-first: wrap, and give each button a basis narrow enough that two still share a
     line at 320px while a third drops to its own full-width line, and wide enough that all
     three sit on one line as soon as there is room. min-width:0 lets them shrink to the
     shared line rather than re-overflowing it. */
  #resumeBanner .row{ display:flex; flex-wrap:wrap; gap:var(--sp-2); margin-top:var(--sp-1); }
  #resumeBanner .row button{ flex:1 1 6.5rem; min-width:0; }

  /* STEP 6A TASK 2B — the unsent-match queue's card. Token-driven throughout and deliberately
     QUIETER than #resumeBanner beside it: the resume banner is an action the player is being
     asked to take now, and this is a background process reporting on itself. Same surface and
     the same neutral ink, so every sentence in it clears AA in both themes without depending
     on a brand colour; --hair rather than --accent on the edge, for the same reason.

     Mobile-first: the row stacks on a narrow screen and only becomes a line when there is
     room, and the buttons carry min-width:0 so a long label shrinks instead of spilling the
     card — the measured failure #resumeBanner's own row comment above records. */
  #parkedMatches{
    border-radius:var(--r-md); padding:var(--sp-4); gap:var(--sp-2);
    display:flex; flex-direction:column;
    background:var(--surface); background-image:var(--glass);
    box-shadow:var(--shadow-md), inset 0 1px 0 var(--hair);
    border-inline-start:5px solid var(--hair);
  }
  #parkedMatches[hidden]{ display:none; }
  #parkedMatches strong{ display:flex; align-items:center; gap:var(--sp-2); color:var(--fg); }
  #parkedMatchesList{ display:flex; flex-direction:column; gap:var(--sp-2); }
  .parkedRow{
    display:flex; flex-wrap:wrap; align-items:center; gap:var(--sp-2);
    padding-top:var(--sp-2); border-top:1px solid var(--hair);
  }
  .parkedRowName{ flex:1 1 100%; font-weight:700; color:var(--fg); min-width:0; }
  .parkedRowState{ flex:1 1 100%; min-width:0; }
  .parkedRowActions{ display:flex; flex-wrap:wrap; gap:var(--sp-2); flex:1 1 auto; }
  .parkedRowActions button{ flex:1 1 6.5rem; min-width:0; }

  fieldset{
    border:none; border-radius:var(--r-md); padding:var(--sp-4);
    display:flex; flex-direction:column; gap:var(--sp-3);
    background:var(--surface); background-image:var(--glass);
    box-shadow:var(--shadow-md), inset 0 1px 0 var(--hair);
  }
  .cardTitle{
    font-weight:800; font-size:14px; letter-spacing:.02em; color:var(--fg);
    border-inline-start:3px solid var(--accent-edge); padding-inline-start:10px; line-height:1.2;
  }
  .field{ display:flex; flex-direction:column; gap:6px; }
  .flabel, .field label{ font-size:var(--fs-small); color:var(--muted); font-weight:600; }
  /* Task 21: mint a spoken name for a GUEST seat (a manually-typed player, never a
     registered account) in a friendly match. Shown only beside a guest field with text
     in it — hidden (not removed) so its status hint survives toggling back and forth. */
  .guestVoiceRow{ display:flex; flex-direction:column; gap:4px; }
  .guestVoiceRow[hidden]{ display:none; }
  .guestVoiceBtn{
    display:inline-flex; align-items:center; gap:6px; align-self:flex-start;
    min-height:var(--tap-min); padding:0 14px; border-radius:var(--r-sm);
    background:var(--sub); border:1px solid var(--line-soft); color:var(--accent-ink);
    font-weight:700; font-size:13px; cursor:pointer;
  }
  .guestVoiceBtn:disabled{ opacity:.6; cursor:default; }
  .guestVoiceRow .hint{ margin:0; }
  input[type="text"], input[type="password"], input[type="email"], input[type="date"],
  input[type="tel"], input[type="number"], input[type="search"]{
    font:inherit; color:var(--fg); background:var(--sub);
    border:1.5px solid transparent; border-radius:var(--r-sm);
    min-height:var(--tap-min); padding:var(--sp-2) var(--sp-3);
    user-select:text; -webkit-user-select:text;
    transition:border-color .2s, background-color .2s;
  }
  input[type="text"]:focus-visible, input[type="password"]:focus-visible, input[type="email"]:focus-visible, input[type="date"]:focus-visible,
  input[type="tel"]:focus-visible, input[type="number"]:focus-visible, input[type="search"]:focus-visible{ outline:none; border-color:var(--ring); background:var(--surface); }

  /* EVERY select in the app, one treatment. The custom-rules and correction dropdowns
     used to keep `appearance:auto`, so the browser drew a native arrow that ignores the
     theme entirely — a dark arrow on a dark surface. Owning the chevron here means a new
     dropdown cannot reintroduce that by simply not opting in. */
  select{
    -webkit-appearance:none; appearance:none;
    background-image:var(--select-chevron);
    background-repeat:no-repeat;
    background-position:left 14px center;   /* RTL: the chevron sits at the inline end */
    background-size:17px;
    padding-inline-end:42px;                /* text never runs under the chevron */
  }
  select.playerSelect, select.groupSelect, #umpireVoice{
    font:inherit; color:var(--fg); background-color:var(--sub);
    border:1.5px solid transparent; border-radius:var(--r-sm);
    min-height:var(--tap-min); padding:var(--sp-2) var(--sp-3); width:100%;
    cursor:pointer;
  }
  select.playerSelect:focus-visible, select.groupSelect:focus-visible, #umpireVoice:focus-visible,
  select.playerSelect:focus, select.groupSelect:focus, #umpireVoice:focus{ outline:none; border-color:var(--ring); background-color:var(--surface); }

  .chips{ display:flex; flex-wrap:wrap; gap:6px; margin-top:2px; }
  /* TWO THINGS MEASURED HERE ON 2026-08-09 AND DELIBERATELY NOT CHANGED, recorded rather than
     silently skipped, because an absence fails nothing and no rail can see one.

     1. `min-height:38px` against `--tap-min:48px`. This is a HOUSE-floor miss, not a WCAG one:
        §2.5.8 Target Size (Minimum) is 24x24 CSS px and 38px clears it comfortably; §2.5.5's
        44px is AAA. A chip is a filter, not a primary action, so 38px is defensible — but the
        product picked 48px as its own floor and this does not meet it. Raising it changes the
        height of every chip row in the app, which is a layout change owed a device acceptance
        and not a rider on an accessibility fix to one row.
     2. SHARPER, AND THE ONE WORTH CARRYING: `border:none`, so an UNPRESSED chip's only boundary
        is this `--sub` fill against whatever is behind it — 1.17:1 night / 1.14:1 day on
        `--surface`, and 1.26:1 / 1.05:1 inside a dialog that paints `--bg`. That is §1.4.11
        again, arriving as a FILL rather than as a border token, which is exactly the shape
        tests/rqs01-tokens.test.js's control-edge check cannot see: it reads border and outline
        declarations. `.chip[aria-pressed="true"]` does get a 3:1 boundary from --accent-edge;
        the unselected state, which is most of them, gets none. Fixing it means deciding what a
        chip sits on across the whole app — a cascade question a static check cannot answer. */
  .chip{
    min-height:38px; padding:4px 14px; border:none; border-radius:999px;
    background:var(--sub); color:var(--fg); font-size:14px; font-weight:600; box-shadow:none;
  }
  .chip[aria-pressed="true"]{ background:var(--tint); color:var(--accent-ink); font-weight:800;
    box-shadow:inset 0 0 0 1.5px var(--accent-edge); }

  .seg{ display:flex; background:var(--sub); border-radius:var(--r-sm); padding:4px; gap:4px; }
  /* WKWebView (Safari) does not stretch