/* GENERATED — do not edit. Your change will be overwritten by the next build. * * Assembled from apps/web/styles/ in the order declared by * apps/web/styles/order.txt. Edit the section file that owns the rule; the * order file owns the sequence, and the sequence is behavioural — CSS resolves * specificity ties by source position. * * Regenerate: rangeday build web (also on every serve-web rebuild) * Verify: rangeday check css (fails if this file and its parts differ) */ /* ==== _legacy-base · reset + the first utility wave · owner: NOBODY ==== */ /* UNOWNED · DELETE-ONLY. No lane owns this file, so no lane may add to it: new CSS goes in that lane's own section file, listed in order.txt. Any lane MAY delete what its own change stranded. The pool only shrinks — that is the whole mechanism by which these files disappear, and an addition here rebuilds the shared address the split removed. FIRST in order.txt, and that position is load-bearing: the reset and these utilities are what every section below overrides. Move it and equal-specificity ties across the whole stylesheet flip, because CSS resolves them by source order. ⚠️ There are TWO utility waves in this stylesheet, not one — the rest are in _legacy-pre-kit.css, in the same `bg-* / text-* / gap-*` idiom. They are not duplicates and they must NOT be merged into one file: they occupied different positions in the single stylesheet, and merging them would move roughly half of these declarations past everything between the two, changing which rule wins. Two files here is the honest shape of what was already there. */ /* Range Day Pro PWA — minimal utility CSS. Basic/functional styling; visual parity effort is a separate future item. */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } body { font-family: system-ui, -apple-system, sans-serif; line-height: 1.5; } /* Layout */ .min-h-screen { min-height: 100vh; } .flex { display: flex; } .flex-col { flex-direction: column; } .flex-wrap { flex-wrap: wrap; } .flex-1 { flex: 1; } .items-center { align-items: center; } .items-start { align-items: flex-start; } .justify-center { justify-content: center; } .justify-between { justify-content: space-between; } .gap-1 { gap: 0.25rem; } .gap-2 { gap: 0.5rem; } .gap-4 { gap: 1rem; } .text-center { text-align: center; } .text-left { text-align: left; } .block { display: block; } .hidden { display: none; } .w-full { width: 100%; } .h-full { height: 100%; } .relative { position: relative; } /* Spacing */ .p-2 { padding: 0.5rem; } .p-3 { padding: 0.75rem; } .p-4 { padding: 1rem; } .p-8 { padding: 2rem; } .px-3 { padding-left: 0.75rem; padding-right: 0.75rem; } .px-4 { padding-left: 1rem; padding-right: 1rem; } .py-2 { padding-top: 0.5rem; padding-bottom: 0.5rem; } .py-3 { padding-top: 0.75rem; padding-bottom: 0.75rem; } .py-4 { padding-top: 1rem; padding-bottom: 1rem; } .py-8 { padding-top: 2rem; padding-bottom: 2rem; } .mb-1 { margin-bottom: 0.25rem; } .mb-2 { margin-bottom: 0.5rem; } .mb-4 { margin-bottom: 1rem; } .mb-6 { margin-bottom: 1.5rem; } .mt-1 { margin-top: 0.25rem; } .mt-2 { margin-top: 0.5rem; } .mt-4 { margin-top: 1rem; } /* Sizing */ .max-w-md { max-width: 28rem; } .max-w-lg { max-width: 32rem; } .mx-auto { margin-left: auto; margin-right: auto; } /* Typography */ .text-xs { font-size: 0.75rem; line-height: 1rem; } .text-sm { font-size: 0.875rem; line-height: 1.25rem; } .text-base { font-size: 1rem; line-height: 1.5rem; } .text-lg { font-size: 1.125rem; line-height: 1.75rem; } .text-2xl { font-size: 1.5rem; line-height: 2rem; } .font-medium { font-weight: 500; } .font-semibold { font-weight: 600; } .font-bold { font-weight: 700; } .truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Colors */ .bg-gray-50 { background-color: #f9fafb; } .bg-gray-100 { background-color: #f3f4f6; } .bg-white { background-color: #fff; } .bg-blue-600 { background-color: #2563eb; } .bg-green-50 { background-color: #f0fdf4; } .bg-red-50 { background-color: #fef2f2; } .bg-yellow-50 { background-color: #fffbeb; } .text-gray-400 { color: #9ca3af; } .text-gray-500 { color: #6b7280; } .text-gray-600 { color: #4b5563; } .text-gray-700 { color: #374151; } .text-gray-900 { color: #111827; } .text-white { color: #fff; } .text-blue-600 { color: #2563eb; } .text-blue-700 { color: #1d4ed8; } .text-green-700 { color: #15803d; } .text-red-600 { color: #dc2626; } .text-red-700 { color: #b91c1c; } .text-yellow-800 { color: #92400e; } .border { border-width: 1px; border-style: solid; } .border-t { border-top-width: 1px; border-top-style: solid; } .border-gray-200 { border-color: #e5e7eb; } .border-gray-300 { border-color: #d1d5db; } .border-green-200 { border-color: #bbf7d0; } .border-red-200 { border-color: #fecaca; } .border-yellow-200 { border-color: #fde68a; } /* Components */ .rounded { border-radius: 0.25rem; } .rounded-lg { border-radius: 0.5rem; } .shadow { box-shadow: 0 1px 3px rgba(0,0,0,0.1), 0 1px 2px rgba(0,0,0,0.06); } /* Forms */ input[type="text"], input[type="email"], input[type="password"], input[type="number"], textarea, select { border: 1px solid #d1d5db; outline: none; font-size: 1rem; } /* ⚠️ THE BLUE IS DELIBERATE HERE. Do not retokenise it to a kit colour. Checked 2026-08-11 and left as-is. The audience decides, not the value. These are bare-element selectors, so they reach every input in the app — and the pages that still have bare inputs are the UNMIGRATED ones, which paint fixed-white cards (`bg-white` is a flat #fff at :67, with no theme override). A kit accent here resolves to #A89968 in the DEFAULT DARK theme and lands on #ffffff: a focus ring you cannot see, on every form that has not migrated yet. #3b82f6 on #ffffff is off-palette. It is not broken. The defect is one level up — the pages have not migrated — and this ring rides that migration, converting when the page it serves does. ⚠️ THE WHOLE CLASS OF FIX IS DEAD, not just the variant someone tried. A bare-element selector necessarily applies ONE value across BOTH audiences — migrated and unmigrated — so no token is correct on both grounds and no in-place edit here can be right. Deleting the rules is also out: that removes focus visibility product-wide, which is an accessibility regression, not a cleanup. Both attempts and their reasons are recorded on #617; read it before reaching for the obvious edit a third time. Same reasoning as the Pro door's fixed values (:186 block), which names the identical failure mode and its own removal trigger. That comment stopped this exact regression twice. TRACKER: #617. That issue covers BOTH halves of this backfill — the blue focus ring and the raw #d1d5db border on the same selectors — and it stays OPEN. Its resolution is per-page migration, not a stylesheet edit, so nothing here closes it and neither half converts alone. Sweep note for whoever tokenises focus properly: 60 focus rules in this sheet, 25 already carry a kit token. The remaining 35 are not one job — sort them by the ground they land on before touching any. */ input:focus, textarea:focus, select:focus { box-shadow: 0 0 0 2px #3b82f6; border-color: #3b82f6; } /* Buttons */ button { cursor: pointer; border: none; font-size: 1rem; } .hover\:bg-blue-700:hover { background-color: #1d4ed8; } .hover\:bg-gray-100:hover { background-color: #f3f4f6; } .hover\:underline:hover { text-decoration: underline; } .disabled\:opacity-50:disabled { opacity: 0.5; } .disabled\:cursor-not-allowed:disabled { cursor: not-allowed; } /* Links */ a { text-decoration: none; color: inherit; } /* The pre-kit tab bar lived here — `.tab-bar`, `position: fixed`, paid for by a hard-coded `pb-20` (80px) on the content region. Both are DELETED in the Shell migration: `RdTabBar` is a flow sibling of the scroll region, so it takes its own space and there is no constant to keep in step (03-tshell.md §13 trap 5). `.overflow-auto`, `.shadow-top` and `.pb-20` went with it — all four were used by nothing else. */ /* Offline banner — in normal flow at the top of a shell's own column, so it pushes that shell's content down instead of overlaying the header. ⚠️ `--rd-offline-banner-h` LIVED HERE AND IS DELETED, 2026-09-01 (James, option 2). It existed because the banner rendered ABOVE the shells, as a sibling out of `ConnectivityShell`, and four rules across three parts had to subtract it from a `100dvh` frame. The banner is mounted INSIDE each frame now — `OfflineBanner`, first in the shell's flex column, the arrangement the kit draws (`rd-train-kit.jsx:147-166`) — so there is nothing left to subtract and no constant to keep in step. The four consumers went with it: the two `calc` rules below and in `s02-tcard.css`, the third in `adm0-mobile.css`, and the splash re-top in `s02-splash.css`. */ /* THE AT-REST TONE, not an error. Row 17 of `03 (Mobile) Training`: *"this is not an error state and must not look like one … a receipt for something that was always happening. No red, no warning triangle"* — the amber this replaces (`#fffbeb` / `#fde68a` / `#92400e`) was a fixed-light warning card in a themed app, which is both wrong tones at once. Values are `TBanner`'s (`rd-train-kit.jsx:186-190`), the same transcription `.rd-squad__banner` already carries in `s09-board.css`. */ .offline-banner { flex-shrink: 0; background: var(--rd-surf2); border-bottom: 1px solid var(--rd-line); padding: 9px 18px; /* ⚠️ A FLOOR, NOT A HEIGHT — ruled 2026-09-01 (James, option 2). It was `height: var(--rd-offline-banner-h)` with `overflow: hidden`, because the shells subtracted the number and an exact box was what kept the subtraction true; a third sentence line was clipped rather than shown. Nothing subtracts it now — the strip is a `flex-shrink: 0` child of the shell's own column — so the box may grow with wrapped copy and the column absorbs it by normal flow. 63 is the same arithmetic the token carried: 9 + 9 padding, an 11px label line, a 3px gap, TWO 15px sentence lines and the 1px hairline; it stays as the floor so a one-line render centres in the drawn box (`justify-content: center` below) rather than sitting in a shorter one. */ box-sizing: border-box; min-height: 63px; display: flex; flex-direction: column; justify-content: center; } /* The label: what happened. Display type, the drawn 8.5px tracked caps. */ .offline-banner__label { font-family: 'Archivo', system-ui, sans-serif; font-weight: 700; font-stretch: 78%; text-transform: uppercase; letter-spacing: .12em; font-size: 8.5px; line-height: 11px; color: var(--rd-fg2); } /* The sentence: what still works. */ .offline-banner__body { margin-top: 3px; font-family: 'Archivo', system-ui, sans-serif; font-size: 10.5px; line-height: 15px; color: var(--rd-fg3); text-wrap: pretty; } /* ⚠️ `.offline-banner ~ .rd-shell { height: calc(100dvh - …) }` STOOD HERE AND IS DELETED, 2026-09-01 (James, option 2). It was a measured fix for a real regression: with the banner rendering ABOVE the shell out of `ConnectivityShell`, a `100dvh` frame plus a 63px strip overflowed the glass by exactly the strip and the tab bar — the app's PRIMARY NAVIGATION — sat below the fold while offline (measured on the built app: bar bottom 1395, viewport 1357). The ruling removes the cause instead: the strip is the first child of `.rd-shell__frame` now, so the frame's own column shrinks the content region and the bar never moves. `.rd-shell` is plainly `100dvh` again in both states. */ /* ==== ADM0 · docs/design/kit/ADM0-chrome.md · owner: spine ==== */ /* --------------------------------------------------------------------------- The Pro door — the "Switch To Pro" row on Profile. Drawn: rd-pro-shell.jsx:36-60 (ScreenProDoor). Spec: ADM0-chrome.md §6. ⚠️ THE ADM0 §6 MIGRATION THIS BLOCK KEPT DESCRIBING IS TAKEN, 2026-08-26. The block's own history — three stacked corrections, each one re-pinning a literal and re-deferring the migration — is left below the rule because the reasoning it retires is the reasoning a later reader would otherwise reconstruct. What it asked for, verbatim: "--rd-surf ground, --rd-acc border, chamfer 8". THE GROUND, THE HAIRLINE AND THE CHAMFER NOW COME FROM THE KIT SUBSTRATE, not from this file. `profile.rs` wraps the row's contents in `RdChamferBox` (`components/kit/chamfer_box.rs`) at `chamfer: 8.0, border: 1.0, Stroke::Accent, Fill::Surface` — the same fixture `.rd-prof__code-btn` two rows above it already mounts, and the same two-layer clip geometry `RdSwitchDoor` takes at both rail feet. That is what deletes `border-radius: 0.5rem`: nothing in this kit is rounded, and re-deriving a chamfer in CSS is the thing `kit-switch-door.css`'s own header refuses ("no colour and no chamfer is re-derived in this file"). Ground and hairline ride the box's `Fill`/`Stroke` roles for the same reason. WHAT IS LEFT HERE IS LAYOUT, TYPE, AND THE TWO STATES — and every colour in it is a role: ground / hairline -> RdChamferBox (Fill::Surface / Stroke::Accent) hover ground -> --rd-surf2 (the house hover, `.rd-prog-qual:hover`) focus ring -> --rd-acc (`.rd-door__link:focus-visible`, 2px/2px) title -> --rd-fg (`.rd-door__name`) sub -> --rd-fg3 (`.rd-door__sub`) arrow -> --rd-acc No token was minted. `#ffffff`, `#fbfdf5`, `#111827` and `#6b7280` are gone rather than translated: the first two were the ground this block no longer paints, and the last two were legacy Tailwind greys standing in for `--rd-fg` and `--rd-fg3`, which is what the drawing calls them (`t.fg` / `t.fg3`). ⚠️ AND THAT IS WHY THIS ROW SURVIVED THE 2026-08-29 REHEARSAL DEFECT WHILE THE KIT FIXTURE DID NOT. `.pro-door` itself is `color: inherit`, and what it inherits is not a token: the document body carries the pre-kit Tailwind utility `text-gray-900` (`apps/web/index.html:279` → `_legacy-base.css:94`, a flat `color: #111827`), and nothing between it and these spans sets `color`. Every LEAF here declares its own ink — title `--rd-fg`, sub `--rd-fg3`, mark and arrow `--rd-acc` — so the inherited literal never reaches a glyph. `.rd-door__name` in `kit-switch-door.css` declared none, and #111827 painted the tablet rail's door name near-black on the dark ground. Checked here as part of that fix; no change needed on this row's ink. Do not "simplify" a leaf's `color` away on the grounds that it looks inherited. ⚠️ THE ARROW AND THE TITLE VOICE ARE UNTOUCHED, DELIBERATELY. `44 The Doors` retired the one-way arrow at both rail feet for the two-opposed-arrow swap mark, but it rules only that the Profile row STAYS as the discoverable location — not whether it stays in its old clothes. Whether this row takes the swap mark and the "Switch to" label voice is a live designer question, so this pass moves colour and geometry and words nothing. ⚠️ THE SUB NO LONGER CUTS WITH AN ELLIPSIS — C-44.1 CLOSED THE OPEN QUESTION THIS BLOCK USED TO RECORD. It read: "AND THE SUB STILL CUTS WITH AN ELLIPSIS, ALSO DELIBERATELY. The fixture's name line wraps instead (`.rd-door__name`, `overflow-wrap: anywhere`) under 'a door that names the destination must not cut the name off'. Whether that rule reaches this row's identity line is the same open question, one joint over. Not decided here." It is decided now, and it is decided AGAINST this row. C-44.1 (ruled 27 Aug) is written into export 30's drawing in as many words (`rd-doors.jsx:62-65`): "Ruled 27 Aug: that rule stands and long names WRAP — the fixture's old nowrap/ellipsis contradicted the rule it demonstrates, and the shipped Profile row's ellipsis is drift to fix." This row IS that Profile row, and the org's name is what its identity line carries (`{org} · {role}`, profile.rs), so the cut lands on the destination's name — the exact thing the rule forbids. `ScreenProDoor` (`rd-pro-shell.jsx:46`) draws the line with no truncation control of any kind, so removing the three declarations is transcription as well as ruling. `overflow-wrap: anywhere` for the reason `.rd-door__sub`'s sibling name line gives: a single unbreakable token (a long one-word org name) would otherwise overflow the phone gutter rather than break inside it. THE TITLE VOICE AND THE ARROW ARE STILL UNTOUCHED — that question (above) is about the swap mark and the "Switch to" label and stays open. C-44.1 rules truncation, not clothes. ---- RETIRED REASONING, kept for the reader who wonders why it took so long -- AS WRITTEN (superseded): the reason is the page rather than the row. profile.rs is pre-kit: fixed bg-white cards, zero kit tokens, no theme awareness at all. Themed values here would put a near-black card among white ones in dark mode. CORRECTION, 2026-08-15: the trigger named above had already fired and nobody came back for this block. profile.rs is no longer pre-kit — it renders .rd-prof__* (profile-community.css), which paints on var(--rd-fg) / var(--rd-acc) and follows data-theme. So the premise "a white page" was false, and the consequence was visible rather than academic: in dark theme this row was a #ffffff slab on a --rd-bg ground, the one card on the page that did not follow the theme. WHY IT STILL STAYED (2026-08-15, superseded): only ONE literal had an exact token — #5c5030 IS the light --rd-acc — and swapping it alone would make the border and arrow the DARK accent on a white card. True as far as it went, and the error is in the premise it shares with the line below: it treats the white ground as fixed and asks which accent survives it. Once the ground is var(--rd-surf) the question does not arise, and the ground was always the thing to move first. THE TAN REBRAND RE-PINNED THE VALUE AND DECLINED THE DE-LITERALISATION, 2026-08-25 (superseded): export 28 moved the light accent from #3e4e10 to #5c5030 and the literals moved with it, on the reasoning that this is a FIXED-LIGHT card so it needs the LIGHT accent whatever theme is active. That is the same premise again — and it is the one this pass drops. The card is not fixed-light any more; it is `--rd-surf`, so `--rd-acc` is correct in both themes and the hand-maintained copy of a token is gone. --------------------------------------------------------------------------- */ /* The link is the whole object; the box inside it carries ground, hairline and chamfer. `display: block` so the box fills the column rather than shrinking to its text — `.rd-door__link`'s reasoning, and the ring sits on the link for the reason stated there too: an outline on the chamfered box would be clipped by its own clip-path. */ /* ⚠️ THE GAP ABOVE IS THE DOOR'S OWN, 2026-08-28 (James, phone web). Reported: on Profile the door was TOUCHING the header block — avatar, name, handle — with no air at all. Neither side declared any: `.rd-prof__header` (profile-community.css) carries a horizontal `gap` and no bottom margin, and this rule carried `margin-bottom` only. The page's other blocks are spaced by `.rd-prof__section { margin-top: 16px }`, so the door was the ONE block on the page with nothing above it. RULED: the fixture carries the kit's block gap from the header, at both widths — `--rd-banner-gap` (p1.css, 16px phone / 20px from 1024 up), which is the token `.rd-banner` made the primitive's own after twenty-seven call sites had spelled the same gap eleven ways. A number here would be the twenty-eighth spelling; a rule in profile-community.css would hand the gap back to the page, which is the defect that ruling names. THE DRAWING GIVES 18px AND IT IS NOT THE VALUE. `rd-pro-shell.jsx:40` (`ScreenProDoor`) spaces the door with `marginBottom: 18` on the fragment's "Profile" TITLE — a title, not this page's avatar header, since the drawing is "a fragment of the shooter Profile, not the whole screen" (:31). So 18 is the gap under a drawn block this page does not mount, and it lands between the token's own two values rather than contradicting either. The ruling names the token; the drawn number is recorded, not shipped. `margin-bottom` stays 14px — drawn at `rd-pro-shell.jsx:42` ("marginBottom: 14"), and untouched by a ruling about the gap ABOVE. ⚠️ NOT `.rd-door`, AND THAT IS NOT AN OVERSIGHT. The kit fixture (`kit-switch-door.css`) carries `margin-top: auto` — the drawn flex spacer that pushes it to a rail's foot — and every one of its sites is a foot. A fixed top margin there would overwrite the drawn spacer and lift the fixture off the bottom of both rails. This row is the door's other drawing (`ScreenProDoor`, kept as a separate object by `44 The Doors.html`: "the Profile 'Switch To Pro' row stays as the discoverable, explainable location"), it sits mid-column rather than at a foot, and the gap is its own. */ .pro-door { display: block; margin-top: var(--rd-banner-gap); margin-bottom: 14px; text-decoration: none; color: inherit; } .pro-door:focus-visible { outline: 2px solid var(--rd-acc); outline-offset: 2px; } /* The row proper, mounted as the box's inner layer. */ .pro-door__inner { display: flex; align-items: center; gap: 12px; padding: 14px; } /* The house hover ground for a whole-row link — `--rd-surf2`, as `.rd-prog-qual:hover` (`adm-prog.css`) carries it. It has to out-specify the fill role the box's inner layer paints, which two classes and a pseudo do. ⚠️ THE HOVER ITSELF IS CARRIED OVER, NOT RE-ARGUED. `adm-prom.css` §10 rules the Pro phone row's hover a DEFECT rather than a variant — "a form factor where a thumb never leaves the surface and `:hover` sticks" — and this row is on the shooter's phone Profile, so the same argument reaches it. Whether it applies here is a question about behaviour, not colour; this pass is colour and geometry, so the state ships as it already did, in a token. Flagged. */ .pro-door:hover .pro-door__inner { background: var(--rd-surf2); } /* The org mark's ink now comes from `.rd-pro-mark__text--on` (adm0-chrome.css) via the kit `OrgMark`, not this file (#1402). */ .pro-door__text { flex: 1; min-width: 0; display: block; } .pro-door__title { display: block; font-family: 'Archivo', system-ui, sans-serif; text-transform: uppercase; font-weight: 800; font-stretch: 78%; letter-spacing: .04em; font-size: 13px; color: var(--rd-fg); } .pro-door__sub { display: block; font-family: 'Archivo', system-ui, sans-serif; font-size: 11px; color: var(--rd-fg3); margin-top: 3px; overflow-wrap: anywhere; } .pro-door__arrow { flex: none; color: var(--rd-acc); font-size: 13px; } /* --------------------------------------------------------------------------- The console's vertical scrollbar — MOVED TO THE KIT, 2026-08-30. This block carried the 2026-08-13 console spec on `html[data-app="pro"]` (thin, transparent track, square `ctrl` thumb, `fg3` on hover, 11px), scoped on the root's `data-app` stamp per the 2026-08-14 ruling. James ruled on 2026-08-30 that there is ONE scrollbar treatment for every scroller in both apps, so the rule now lives in kit-shell.css §8 — the standard pair on `*` for engines without `::-webkit-scrollbar`, the bare pseudo-elements for the rest — with theme tokens for its colours. `data-app` is still stamped (`pages::set_app_identity`); no sheet rule reads it today. --------------------------------------------------------------------------- */ /* ==== _legacy-events-list · ADM1 events list, §2-§3 · owner: NOBODY ==== */ /* UNOWNED · DELETE-ONLY. No lane owns this file, so no lane may add to it: new CSS goes in that lane's own section file, listed in order.txt. Any lane MAY delete what its own change stranded. The pool only shrinks — that is the whole mechanism by which these files disappear, and an addition here rebuilds the shared address the split removed. ⚠️ THE FILENAME NAMES THE CONTENT, NOT THE POSITION — and here the two disagree. These are ADM1 rules, and in the single stylesheet they sat under the ADM0 banner (lines 301-459 at `9e5b26b`, beneath `==== ADM0 · docs/design/kit/ADM0-chrome.md · owner: spine ====`). The split kept them exactly where they were: it re-files by POSITION, and correcting a mislabelling inside a change-nothing PR hides a real change inside a mechanical one. Moving them under adm1-pr2.css is #662, and it is NOT a pure move: it changes CSS source order, which decides specificity ties. It needs verification of its own — do not treat it as the same class of safe move the split was. =========================================================================== ADM1 — the events list. Spec: docs/design/kit/ADM1-events.md §2-§3 Drawn: tmp/design/snapshot/rd-pro-events.jsx (ScreenEvents, StatusChip). --------------------------------------------------------------------------- */ /* ProTop's action. VOLT as a fill, not ACC — rd-pro-kit.jsx:229-230: in light mode acc is the deep warm brown reserved for accent TEXT, and using it as a fill puts black on 2.3:1. The status chip below uses acc as text+border and is also correct; the two are different tans on purpose. */ /* `inline-flex` + `gap`, and the gap is a LOADING requirement rather than a typographic one. `43 Loading States.html:53` retires the busy-label swap: the word now holds still and a 13px sweep joins it (rd-loading.jsx:197, `gap: 10`). While the label swapped, this button never had a second child to space; every ProTop action in the Pro console now does, and under `inline-block` the mark sits jammed against the label on the text baseline. Slate 1 made exactly this edit to `.rd-evl__more` for exactly this reason (`s15.css`, "the row needs a gap it never needed while the word was swapped"). One rule, every ProTop action: admin/location_editor, admin/event_form, admin/drill_form. */ .rd-pro-top__btn { display: inline-flex; align-items: center; gap: 10px; background: var(--rd-volt); color: var(--rd-on-volt); padding: 10px 18px; font-family: 'Archivo', system-ui, sans-serif; text-transform: uppercase; font-weight: 800; font-stretch: 78%; letter-spacing: .06em; font-size: 11.5px; text-decoration: none; clip-path: polygon(0 0, calc(100% - 7px) 0, 100% 7px, 100% 100%, 7px 100%, 0 calc(100% - 7px)); } .rd-pro-top__btn:focus-visible { outline: 2px solid var(--rd-acc); outline-offset: 2px; } /* --------------------------------------------------------------------------- The status chip. OUTLINED: one colour drives text AND a 1px border, no fill. Three colours, and they must stay three — a chip that painted Draft, Active and Completed alike would look composed and say nothing. --------------------------------------------------------------------------- */ /* --------------------------------------------------------------------------- The list. --------------------------------------------------------------------------- */ .rd-adm-ev { flex: 1; min-height: 0; padding: 4px 32px 32px; } /* `.rd-adm-ev__row` and its :hover / :focus-visible went with the batch-15 migration onto `ProTable` / `ProRow` — `.rd-prow`, `.rd-ptable--dens-16-gap-20 .rd-prow` (16px 0 / gap 20) and `.rd-prow--link:*` in kit-pro-table.css now carry every declaration they held. 🟡 One value moved: the hover ground surf -> surf2, spec 15 §11 Q3's interim answer, not this screen's choice. The CELLS below are UNTOUCHED — they mount in `CellRole::Slot` cells, which carry no type. See `events_columns()`. */ .rd-adm-ev__when { width: 108px; flex: none; font-family: 'Archivo', system-ui, sans-serif; text-transform: uppercase; font-weight: 700; font-stretch: 78%; letter-spacing: .08em; font-size: 10.5px; color: var(--rd-fg3); } .rd-adm-ev__name { flex: 1; min-width: 0; font-family: 'Archivo', system-ui, sans-serif; font-size: 14.5px; color: var(--rd-fg); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* ⚠️ ONLY the name steps down for a past event — NOT an opacity on the row. rd-pro-events.jsx:208-212: an opacity multiplier dims fg2 and fg3 with it, and those two greys are calibrated to clear ~5:1 on small copy in sunlight; a blanket .62 threw that away and put a 9px chip at 2.9:1. Do not "tidy" this into `.rd-adm-ev__row--past { opacity: … }`. */ .rd-adm-ev__name--past { color: var(--rd-fg2); } .rd-adm-ev__enrolled { width: 96px; flex: none; text-align: right; font-family: 'Archivo', system-ui, sans-serif; font-size: 12.5px; color: var(--rd-fg2); } /* States the drawing does not draw — kept because dropping them is a regression, and marked so a later slice with a drawn one replaces rather than reconciles. */ /* `.rd-adm-ev__loading` was the loading SENTENCE's rule and went with it — `43 Loading States.html:40` retires loading text as a treatment, so the body now mounts the kit's skeleton stack and this screen owns no loading type. */ .rd-adm-ev__error { font-family: 'Archivo', system-ui, sans-serif; font-size: 13px; color: var(--rd-danger); border: 1px solid var(--rd-danger); background: var(--rd-danger-wash); padding: 12px 14px; margin: 14px 0; } .rd-adm-ev__more { padding: 18px 0; text-align: center; } .rd-adm-ev__more-btn { font-family: 'Archivo', system-ui, sans-serif; font-size: 12.5px; color: var(--rd-fg2); background: none; border: 1px solid var(--rd-line); padding: 9px 18px; cursor: pointer; } .rd-adm-ev__more-btn:hover:not(:disabled) { color: var(--rd-fg); border-color: var(--rd-ctrl); } .rd-adm-ev__more-btn:disabled { color: var(--rd-fg3); cursor: default; } .rd-adm-ev__more-btn:focus-visible { outline: 2px solid var(--rd-acc); outline-offset: 2px; } /* The empty state, drawn at rd-pro-events.jsx:199-204. */ .rd-adm-ev__empty { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 32px; } .rd-adm-ev__empty-head { font-family: 'Archivo', system-ui, sans-serif; text-transform: uppercase; font-weight: 800; font-stretch: 75%; letter-spacing: .02em; font-size: 19px; color: var(--rd-fg); margin-bottom: 12px; } .rd-adm-ev__empty-body { font-family: 'Archivo', system-ui, sans-serif; font-size: 13px; line-height: 1.6; color: var(--rd-fg3); max-width: 430px; } /* ==== ADM1-PR2 · docs/design/kit/ADM1-events.md §5 · owner: spine ==== */ /* --------------------------------------------------------------------------- ADM1 PR 2 — event detail: tabs, lifecycle, fields, delete confirm. Drawn: rd-pro-events.jsx:66-79, :75-96, :98-105, :187-218. ⚠️ 2026-08-10 export: `EvTabs` (:57) left this drawing for the kit's `ProTabs` (rd-pro-kit.jsx:278) and `ScreenEventOverview` moved to :223 with a role parameter. These numbers resolve but describe replaced content; the CSS below is superseded when the kit PR migrates the components. Dated pointer, not a renumber — docs/design/corpus-resync.md step 9. --------------------------------------------------------------------------- */ /* The tab strip. ⚠️ This underline is #467's first cluster: `border-b-2` and `border-blue-600` are undefined in the pre-kit page, so the active tab is currently carried by text colour alone. Drawn properly here. */ /* The lifecycle strip. Three states, one forward action — and a line saying it is NOT a visibility control, which is what a reader assumes it is. */ .rd-ev-life { border: 1px solid var(--rd-line); background: var(--rd-surf); padding: 18px 20px; } .rd-ev-life__track { display: flex; align-items: center; gap: 0; } .rd-ev-life__step { display: flex; align-items: center; gap: 9px; flex: none; } /* The connector, and it STRETCHES — `flex: 1` in the drawing (:91). Without it the three steps huddle at the left and the strip stops reading as a track. */ .rd-ev-life__link { flex: 1; height: 1px; margin: 0 14px; background: var(--rd-line); } .rd-ev-life__link--on { background: var(--rd-acc); } .rd-ev-life__dot { width: 9px; height: 9px; flex: none; background: transparent; border: 1.5px solid var(--rd-ctrl); } .rd-ev-life__dot--on { background: var(--rd-acc); border-color: var(--rd-acc); } .rd-ev-life__label { font-family: 'Archivo', system-ui, sans-serif; text-transform: uppercase; font-weight: 600; font-stretch: 78%; letter-spacing: .08em; font-size: 10px; color: var(--rd-fg3); } .rd-ev-life__label--on { font-weight: 800; color: var(--rd-fg); } /* ⚠️ ~30px OF TARGET ON THE EVENT'S ONE ADVANCING ACT (8px of pad over a 10.5px display line) — James, NTOA rehearsal 2026-08-29. Fixed by the transparent `::after` below rather than by re-sizing the outline, so `Set Active` and `Mark Completed` are drawn exactly as they were. `position: relative` is the containing block that pseudo needs. */ .rd-ev-life__next { margin-left: 24px; flex: none; background: none; position: relative; border: 1.5px solid var(--rd-ctrl); color: var(--rd-fg); padding: 8px 15px; font-family: 'Archivo', system-ui, sans-serif; text-transform: uppercase; font-weight: 800; font-stretch: 78%; letter-spacing: .06em; font-size: 10.5px; cursor: pointer; } /* 44px of target on both lifecycle acts, painting nothing and moving nothing — `.rd-ev-life__track` and `.rd-ev-life__reverse` are both horizontal rows, so the band above and below each act belongs to no other target. The reverse link needs this more than the advance does: it is a text link with a 1px underline and `padding: 0 0 2px`, i.e. ~18px of box, and the underline is the drawing — a real `min-height` there would drop the rule away from the word. Shared note: `kit-hit.css`. */ .rd-ev-life__next::after, .rd-ev-life__back::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 44px; /* `margin-top`, not a `transform`: a transform would make the pseudo a containing block for fixed descendants, which is a hazard the pool already polices by name in three places. Half of 44. */ margin-top: -22px; } .rd-ev-life__next:hover { border-color: var(--rd-acc); } .rd-ev-life__next:focus-visible { outline: 2px solid var(--rd-acc); outline-offset: 2px; } .rd-ev-life__note { font-family: 'Archivo', system-ui, sans-serif; font-size: 11.5px; color: var(--rd-fg3); margin-top: 14px; line-height: 1.5; } /* The reverse transition — DRAWN as of the 10 Aug export (32 Pro Events, Going Backwards), and these rules stopped being a deviation with it. Two things changed and both are the drawing's: 1. POSITION. This block used to sit between the track and the note, beside the forward primary's row. The caption is explicit: "The reverse sits BELOW the hairline, not beside the primary. Two boxes side by side read as a pair of equals and make going backwards look like half the normal path; it is not, it is the recovery. Text, no box, under the sentence that explains the strip." Hence the border-top here and the source order in the component — .rd-ev-life__note precedes this block in the markup. 2. WEIGHT. The label is 12.5px in --rd-fg with a --rd-ctrl underline, not 11.5px in --rd-fg3. It is quieter than the forward action because it has no box, not because it is greyed; the grey belongs to the sentence beside it. `align-items: baseline` is what makes a 12.5px label and an 11.5px sentence sit on one line rather than centring two different type sizes against each other. */ .rd-ev-life__reverse { display: flex; align-items: baseline; gap: 14px; margin-top: 15px; padding-top: 14px; border-top: 1px solid var(--rd-line); } .rd-ev-life__back { flex: none; background: none; /* The containing block for the 44px hit band declared above — 2026-08-29. */ position: relative; border: 0; padding: 0 0 2px; font-family: 'Archivo', system-ui, sans-serif; font-size: 12.5px; color: var(--rd-fg); border-bottom: 1px solid var(--rd-ctrl); cursor: pointer; } .rd-ev-life__back:hover { border-bottom-color: var(--rd-acc); } .rd-ev-life__back:focus-visible { outline: 2px solid var(--rd-acc); outline-offset: 2px; } /* The missing case: same slot, same size, no underline and no cursor — it is a statement, not a control that has been switched off. The drawing's whole argument for this frame is that a greyed-out button explains nothing, so this must not look like one. */ .rd-ev-life__denied { flex: none; font-family: 'Archivo', system-ui, sans-serif; font-size: 12.5px; color: var(--rd-fg3); } /* The line that says what the reverse costs, or who to ask. Wraps; the label beside it does not. */ .rd-ev-life__why { font-family: 'Archivo', system-ui, sans-serif; font-size: 11.5px; color: var(--rd-fg3); line-height: 1.5; } /* Field pairs. */ .rd-ev-fields { display: flex; flex-wrap: wrap; gap: 28px; margin-top: 26px; } .rd-ev-field { flex: 1 1 200px; min-width: 0; } .rd-ev-field--wide { flex: 1 1 100%; } /* A field pair while the event is still on the wire. It takes `.rd-ev-field`'s own column and adds only the separation the warm pair gets from `.rd-ev-field__label`'s `margin-bottom` — which the skeleton marks do not carry, being kit blocks rather than this screen's type. Nothing else: the skeleton ink is the only thing that should be visible here. */ .rd-ev-field--skel { display: grid; gap: 7px; } .rd-ev-field__label { font-family: 'Archivo', system-ui, sans-serif; text-transform: uppercase; font-weight: 700; font-stretch: 78%; letter-spacing: .11em; font-size: 9px; color: var(--rd-fg3); margin-bottom: 7px; } .rd-ev-field__value { font-family: 'Archivo', system-ui, sans-serif; font-size: 14px; color: var(--rd-fg); } /* Delete. A text link, not a button, and 40px below a rule — "completing an event and destroying one are different acts". */ /* A flex row inside the rule, because the slot carries a label AND the sentence beside it in all three of its states — 13 Aug, Delete Is Draft Only. Same geometry as `.rd-ev-life__reverse` above, which is the treatment this one was asked to match. */ .rd-ev-danger { margin-top: 40px; padding-top: 20px; border-top: 1px solid var(--rd-line); display: flex; align-items: baseline; gap: 14px; } .rd-ev-danger__link { flex: none; background: none; border: 0; padding: 0 0 2px; font-family: 'Archivo', system-ui, sans-serif; font-size: 12.5px; color: var(--rd-danger); border-bottom: 1px solid var(--rd-danger); cursor: pointer; } .rd-ev-danger__link:focus-visible { outline: 2px solid var(--rd-danger); outline-offset: 2px; } /* The refused case's head. Same slot and same size as the link, with no underline, no danger colour and no cursor — it is a statement, not a control that has been switched off. Identical argument to `.rd-ev-life__denied`. */ .rd-ev-danger__denied { flex: none; font-family: 'Archivo', system-ui, sans-serif; font-size: 12.5px; color: var(--rd-fg3); } /* The line beside either one: why this can be deleted, or why it cannot. `max-width` is the drawing's on the refused sentences (the long ones); the offered sentence is short enough that it never reaches the limit. */ .rd-ev-danger__why { font-family: 'Archivo', system-ui, sans-serif; font-size: 11.5px; color: var(--rd-fg3); line-height: 1.5; max-width: 54ch; } /* ⚠️ **CORRECTED 2026-08-25.** This read: "`position: relative` is load-bearing, not tidiness: it is what makes this the containing block for the confirm's absolute scrim. Still required after the migration to `RdConfirmModal` — that component's own docs state the contract it cannot enforce from inside: 'Absolute positioning resolves against the nearest positioned ancestor; if a caller supplies none, the scrim escapes to the viewport and covers the rail too.' This IS that ancestor." `.rd-confirm` is `position: fixed` now (adm1-5-1.css) and owes this element nothing — export 27 also moved `position: relative` off every Pro content pane and onto `ProShell` (`rd-pro-kit.jsx:326`), so even the general shape of this claim (a pane is the confirm's containing block) is gone, not just the specific mechanism. The declaration stays as the reversal path. */ .rd-ev-overview { flex: 1; min-height: 0; overflow: auto; padding: 24px 32px; position: relative; } /* The action-error strip's dismiss control. ⚠️ UNDRAWN — the corpus draws no error state on this screen at all, so the strip is an engineering invention following `events.rs`'s precedent that a failed action must not blank content already on screen. The block it belongs to (`.rd-ev-msg`) is defined in the ADM1-PR3 section, where the detail page's loading/error/not-found messages landed. This modifier sits with the screen that renders it instead of being appended there, and the split is safe because the two selectors never collide: nothing here overrides a PR3 declaration, so the concatenation order between the sections decides nothing. */ .rd-ev-msg__dismiss { margin-left: 14px; background: none; border: 0; padding: 0 0 2px; font-family: 'Archivo', system-ui, sans-serif; font-size: 11.5px; color: var(--rd-fg3); border-bottom: 1px solid var(--rd-line); cursor: pointer; } .rd-ev-msg__dismiss:hover { color: var(--rd-fg); border-bottom-color: var(--rd-ctrl); } .rd-ev-msg__dismiss:focus-visible { outline: 2px solid var(--rd-acc); outline-offset: 2px; } /* ==== ADM1-PR3 · docs/design/kit/ADM1-events.md §6 · owner: spine ==== */ /* --------------------------------------------------------------------------- ADM1 PR 3 — the Roster tab and its add-members picker. Drawn: rd-pro-events.jsx:494-533. --------------------------------------------------------------------------- */ .rd-ev-roster { flex: 1; min-height: 0; overflow: auto; padding: 18px 32px 32px; position: relative; } .rd-ev-roster__row { display: flex; align-items: center; gap: 18px; padding: 14px 0; border-bottom: 1px solid var(--rd-line); } .rd-ev-roster__name { flex: 1; min-width: 0; font-family: 'Archivo', system-ui, sans-serif; font-size: 14px; color: var(--rd-fg); } /* 130px and 150px are the drawn widths — fixed, so the three columns line up down the list instead of ragging with name length. */ .rd-ev-roster__role { width: 130px; flex: none; font-family: 'Archivo', system-ui, sans-serif; text-transform: uppercase; font-weight: 700; font-stretch: 78%; letter-spacing: .1em; font-size: 9px; color: var(--rd-fg3); } .rd-ev-roster__when { width: 150px; flex: none; font-family: 'Archivo', system-ui, sans-serif; font-size: 12px; color: var(--rd-fg3); } .rd-ev-roster__remove { flex: none; background: none; border: 0; padding: 0; font-family: 'Archivo', system-ui, sans-serif; font-size: 12px; color: var(--rd-fg3); cursor: pointer; } .rd-ev-roster__remove:hover { color: var(--rd-danger); } .rd-ev-roster__remove:focus-visible { outline: 2px solid var(--rd-acc); outline-offset: 2px; } /* In flight: the label STAYS ("Remove") and a 13px `RdSweep` joins it instead of the retired "Removing…" swap — `43 Loading States.html:53`, the #1042 treatment. Modifier-only, not the base rule: a permanent flex row would change every render of this button for a mark that is usually absent, the same restraint `.rd-btn__face--inflight` takes in `kit-loading.css`. 10px gap is that primitive's own drawn number (`rd-loading.jsx:197`). */ .rd-ev-roster__remove--inflight { display: inline-flex; align-items: center; gap: 10px; } /* The per-event scorer assignment (`47 (Mobile) RO Range Day`, row 01; migration 0059). Sits beside Remove and wears the same quiet shape — it is a toggle, not a destination. ⚠️ It marks a JOB, not a permission: James ruled 21 Aug 2026 that any org RO, instructor or admin may score any event. The lit state is therefore informational, and the accent (never the danger colour) is the whole difference between on and off — nothing here can lock anybody out. State is carried on `aria-pressed` rather than a modifier class so the button says what it is to a screen reader and to the stylesheet in one place. */ .rd-ev-roster__scorer { flex: none; background: none; border: 0; padding: 0; font-family: 'Archivo', system-ui, sans-serif; font-size: 12px; color: var(--rd-fg3); cursor: pointer; } .rd-ev-roster__scorer:hover { color: var(--rd-fg); } .rd-ev-roster__scorer[aria-pressed="true"] { color: var(--rd-acc); font-weight: 700; } .rd-ev-roster__scorer:focus-visible { outline: 2px solid var(--rd-acc); outline-offset: 2px; } /* Same in-flight treatment as `.rd-ev-roster__remove--inflight` above, for the retired "Saving…" swap. The label stays "Scorer" / "Make scorer". */ .rd-ev-roster__scorer--inflight { display: inline-flex; align-items: center; gap: 10px; } .rd-ev-roster__foot { font-family: 'Archivo', system-ui, sans-serif; font-size: 11.5px; color: var(--rd-fg3); margin-top: 18px; line-height: 1.55; max-width: 66ch; } .rd-ev-roster__empty, .rd-ev-roster__note { font-family: 'Archivo', system-ui, sans-serif; font-size: 13px; color: var(--rd-fg3); padding: 8px 0 4px; } .rd-ev-roster__error { font-family: 'Archivo', system-ui, sans-serif; font-size: 12.5px; color: var(--rd-danger); border: 1px solid var(--rd-danger); padding: 10px 12px; margin-bottom: 14px; } /* The picker. Same scrim as the delete confirm. 520px here against the confirm's 460: this one holds a scrollable list, that one holds a sentence. ⚠️ **`fixed`, NOT `absolute` — 2026-08-25, and it moved because the confirm moved.** This block used to read "absolute inside the tab body, so the rail and the page head stay lit". That was the drawing's arrangement and it stopped surviving the fixed-rail scroll model: an `inset: 0` scrim resolves against the nearest positioned ancestor, which here is the tab body — a scroller that starts a third of the way down the glass — so the panel centred on THAT box rather than on the viewport, and scrolled away with the list. The whole argument, the measurements and the deviation it costs are recorded once, at `.rd-confirm` in adm1-5-1.css; this is the same defect on a hand-built scrim and it takes the same answer rather than a second opinion about it. The phone arm (`.rd-evrm .rd-ev-pick`, adm-evd-mob.css) already flipped this to `fixed` for its own reasons and now restates rather than overrides. Left in place: it is another owner's part, and a redundant declaration is cheaper than a cross-part deletion. */ .rd-ev-pick { position: fixed; inset: 0; z-index: 40; background: rgba(6, 6, 6, .82); display: flex; align-items: center; justify-content: center; } .rd-ev-pick__panel { width: 520px; max-width: calc(100vw - 32px); max-height: calc(100% - 32px); display: flex; flex-direction: column; background: var(--rd-surf); border: 1px solid var(--rd-line); } .rd-ev-pick__head { flex: none; padding: 20px 22px 14px; border-bottom: 1px solid var(--rd-line); } .rd-ev-pick__title { font-family: 'Archivo', system-ui, sans-serif; text-transform: uppercase; font-weight: 800; font-stretch: 75%; letter-spacing: .02em; font-size: 17px; color: var(--rd-fg); } .rd-ev-pick__sub { font-family: 'Archivo', system-ui, sans-serif; font-size: 12px; color: var(--rd-fg3); margin-top: 8px; } /* The list scrolls; the head and foot do not. An org of three hundred is the case this panel exists to handle. */ .rd-ev-pick__list { flex: 1 1 auto; min-height: 0; overflow-y: auto; } .rd-ev-pick__row { display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px 22px; border: 0; border-bottom: 1px solid var(--rd-line); background: none; text-align: left; } .rd-ev-pick__row--pick { cursor: pointer; } .rd-ev-pick__row--pick:hover { background: var(--rd-chip); } .rd-ev-pick__row--pick:focus-visible { outline: 2px solid var(--rd-acc); outline-offset: -2px; } /* 16x16, --rd-acc border when selectable, --rd-ctrl border + --rd-chip fill when already enrolled. */ .rd-ev-pick__box { width: 16px; height: 16px; flex: none; border: 1.5px solid var(--rd-acc); background: transparent; } .rd-ev-pick__box--on { background: var(--rd-acc); } .rd-ev-pick__box--had { border-color: var(--rd-ctrl); background: var(--rd-chip); } .rd-ev-pick__name { flex: 1; min-width: 0; font-family: 'Archivo', system-ui, sans-serif; font-size: 13.5px; color: var(--rd-fg); } .rd-ev-pick__name--had { color: var(--rd-fg3); } .rd-ev-pick__tag { flex: none; font-family: 'Archivo', system-ui, sans-serif; text-transform: uppercase; font-weight: 700; font-stretch: 78%; letter-spacing: .1em; font-size: 8.5px; color: var(--rd-fg3); } .rd-ev-pick__more { padding: 14px 22px 18px; text-align: center; } .rd-ev-pick__more-btn { background: none; border: 1.5px solid var(--rd-ctrl); color: var(--rd-fg); padding: 9px 16px; font-family: 'Archivo', system-ui, sans-serif; text-transform: uppercase; font-weight: 800; font-stretch: 78%; letter-spacing: .06em; font-size: 10.5px; cursor: pointer; } .rd-ev-pick__more-btn:hover { border-color: var(--rd-acc); } .rd-ev-pick__more-btn:focus-visible { outline: 2px solid var(--rd-acc); outline-offset: 2px; } .rd-ev-pick__foot { flex: none; padding: 16px 22px 20px; } .rd-ev-pick__hint { font-family: 'Archivo', system-ui, sans-serif; font-size: 11.5px; color: var(--rd-fg3); line-height: 1.5; margin-bottom: 16px; } .rd-ev-pick__acts { display: flex; align-items: center; gap: 14px; } /* volt, not acc — a FILL, per the kit's own rule. */ .rd-ev-pick__add { flex: none; background: var(--rd-volt); color: var(--rd-on-volt); border: 0; padding: 10px 18px; font-family: 'Archivo', system-ui, sans-serif; text-transform: uppercase; font-weight: 800; font-stretch: 78%; letter-spacing: .06em; font-size: 11px; cursor: pointer; } .rd-ev-pick__add:focus-visible { outline: 2px solid var(--rd-fg); outline-offset: 2px; } .rd-ev-pick__cancel { flex: none; background: none; border: 0; padding: 0 0 2px; font-family: 'Archivo', system-ui, sans-serif; font-size: 12px; color: var(--rd-fg3); border-bottom: 1px solid var(--rd-line); cursor: pointer; } .rd-ev-pick__cancel:hover { color: var(--rd-fg); } .rd-ev-pick__cancel:focus-visible { outline: 2px solid var(--rd-acc); outline-offset: 2px; } /* Loading / error / not-found, inside the kit page so opening an event does not flash the legacy island's light ground before the dark screen arrives. */ .rd-ev-msg { padding: 24px 32px; font-family: 'Archivo', system-ui, sans-serif; font-size: 13px; color: var(--rd-fg3); } .rd-ev-msg--error { color: var(--rd-danger); } /* `.rd-pro-tabbody-legacy` lived here for exactly two PRs. It gave the pre-kit Roster and Scores tabs the light ground their greys were drawn against, inside a page that had already migrated — the ADM0 island failure arriving from the opposite direction. PR 3 migrated Roster, PR 4 migrated Scores, and the wrapper went with the last tab that needed it, as its own comment promised. The removal trigger was written down when the block was written; this is it being honoured rather than the block quietly becoming permanent. */ /* ==== _legacy-pre-kit · the pre-kit app screens + the second utility wave · owner: NOBODY ==== */ /* UNOWNED · DELETE-ONLY. No lane owns this file, so no lane may add to it: new CSS goes in that lane's own section file, listed in order.txt. Any lane MAY delete what its own change stranded. The pool only shrinks — that is the whole mechanism by which these files disappear, and an addition here rebuilds the shared address the split removed. ⚠️ READ THE NAME AS "PRE-KIT", NOT AS "UTILITIES". The obvious guess from the filename — that this is the app's utility layer — is wrong by measurement, and it is wrong in the direction that matters: a lane looking for "where the utilities live" would add here. Measured over the 214 selector blocks in this file (217 opening braces, 3 of them at-rules), it is two populations: the app's own pre-kit screen CSS — .toggle, .drill-*, .score-*, .zone-*, .stage-*, .event-*, .queue-*, .se-*, .pass-*, .void-*, .tab-* a SECOND wave of utilities — .bg-*, .text-*, .w-*, .h-*, .gap-*, .py-*, .mt-*, .grid-*, .max-*, .border-*, in the same idiom as _legacy-base.css The two waves are not duplicates and must not be merged — see the note in _legacy-base.css for why merging them changes which rule wins. Displaced but NOT misfiled: it sat beneath `==== ADM1-PR3 ==== ` in the single stylesheet, alongside the two blocks that ARE #662, but it names no screen its banner contradicts, so there is no correct banner to move it under. */ /* Void confirmation overlay */ .void-confirm-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.5); display: flex; align-items: center; justify-content: center; z-index: 200; padding: 1rem; } .void-confirm-dialog { background: #fff; border-radius: 0.75rem; padding: 1.5rem; width: 100%; max-width: 24rem; box-shadow: 0 20px 25px rgba(0, 0, 0, 0.15); } /* Grid layout */ .grid { display: grid; } .grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .aspect-square { aspect-ratio: 1 / 1; } .object-cover { object-fit: cover; } .overflow-hidden { overflow: hidden; } /* Group hover utilities */ .group:hover .group-hover\:opacity-100 { opacity: 1; } .transition-opacity { transition: opacity 0.2s; } /* Opacity utilities */ .opacity-0 { opacity: 0; } .bg-opacity-50 { --tw-bg-opacity: 0.5; } .bg-opacity-60 { --tw-bg-opacity: 0.6; } .bg-opacity-80 { --tw-bg-opacity: 0.8; } .bg-black { background-color: rgba(0, 0, 0, var(--tw-bg-opacity, 1)); } /* Blue tones for leaderboard highlight */ .bg-blue-50 { background-color: #eff6ff; } /* Hover utilities */ .hover\:bg-red-50:hover { background-color: #fef2f2; } .hover\:bg-gray-200:hover { background-color: #e5e7eb; } .bg-gray-800 { background-color: #1f2937; } .bg-red-600 { background-color: #dc2626; } .border-b { border-bottom-width: 1px; border-bottom-style: solid; } /* Additional spacing */ .mt-6 { margin-top: 1.5rem; } .mb-3 { margin-bottom: 0.75rem; } .gap-3 { gap: 0.75rem; } .px-2 { padding-left: 0.5rem; padding-right: 0.5rem; } .py-0\.5 { padding-top: 0.125rem; padding-bottom: 0.125rem; } .py-1 { padding-top: 0.25rem; padding-bottom: 0.25rem; } .w-6 { width: 1.5rem; } .h-6 { height: 1.5rem; } .w-8 { width: 2rem; } .mx-4 { margin-left: 1rem; margin-right: 1rem; } .rounded-full { border-radius: 9999px; } .inline-flex { display: inline-flex; } /* Absolute positioning */ .absolute { position: absolute; } .fixed { position: fixed; } .inset-0 { top: 0; right: 0; bottom: 0; left: 0; } .top-1 { top: 0.25rem; } .right-1 { right: 0.25rem; } /* Full-screen overlays sit on the modal layer (200, same as the dialog rule above). At 50 they tied with .tab-bar and LOST on DOM order — ShellLayout renders the tab bar after the Outlet — so the bar drew over the lightbox. */ .z-modal { z-index: 200; } /* Drill authoring (shooter-drill-authoring chunk 1) */ .bg-yellow-500 { background-color: #eab308; } .p-1 { padding: 0.25rem; } .text-xl { font-size: 1.25rem; line-height: 1.75rem; } .w-20 { width: 5rem; } .hover\:bg-red-700:hover { background-color: #b91c1c; } /* Avatar component (avatar.rs) — display + initials-fallback sizing. These utilities were referenced by PR-4's avatar.rs but never added here, so the fallback background and non-default sizes silently no-op. Additive. */ .h-8 { height: 2rem; } .w-10 { width: 2.5rem; } .h-10 { height: 2.5rem; } .w-16 { width: 4rem; } .h-16 { height: 4rem; } .bg-gray-300 { background-color: #d1d5db; } .shrink-0 { flex-shrink: 0; } /* Backfill (check-css launch): classes the rsx already used that were silently no-oping — standard Tailwind v3 definitions. Found by `rangeday check css`, which now gates CI. */ .-right-1 { right: -0.25rem; } .-top-1 { top: -0.25rem; } .bg-gray-200 { background-color: #e5e7eb; } .bg-green-600 { background-color: #16a34a; } .bg-red-100 { background-color: #fee2e2; } .bg-yellow-100 { background-color: #fef9c3; } .border-blue-200 { border-color: #bfdbfe; } .border-gray-100 { border-color: #f3f4f6; } .cursor-pointer { cursor: pointer; } .flex-shrink-0 { flex-shrink: 0; } .h-2 { height: 0.5rem; } .h-3 { height: 0.75rem; } .inline-block { display: inline-block; } .items-baseline { align-items: baseline; } .justify-end { justify-content: flex-end; } .max-w-sm { max-width: 24rem; } .max-w-xs { max-width: 20rem; } .mb-8 { margin-bottom: 2rem; } .min-w-0 { min-width: 0; } .ml-auto { margin-left: auto; } .mt-3 { margin-top: 0.75rem; } .mt-8 { margin-top: 2rem; } .p-6 { padding: 1.5rem; } .pt-3 { padding-top: 0.75rem; } .py-1\.5 { padding-top: 0.375rem; padding-bottom: 0.375rem; } .py-6 { padding-top: 1.5rem; padding-bottom: 1.5rem; } .text-3xl { font-size: 1.875rem; line-height: 2.25rem; } .text-amber-600 { color: #d97706; } .text-amber-700 { color: #b45309; } .text-gray-800 { color: #1f2937; } .text-green-600 { color: #16a34a; } .tracking-wide { letter-spacing: 0.025em; } .uppercase { text-transform: uppercase; } .w-2 { width: 0.5rem; } .w-3 { width: 0.75rem; } .whitespace-pre-wrap { white-space: pre-wrap; } .hover\:bg-blue-50:hover { background-color: #eff6ff; } .hover\:bg-gray-50:hover { background-color: #f9fafb; } .hover\:bg-green-50:hover { background-color: #f0fdf4; } .hover\:bg-green-700:hover { background-color: #15803d; } .hover\:text-blue-800:hover { color: #1e40af; } .focus\:outline-none:focus { outline: none; } .focus\:ring-2:focus { outline: none; box-shadow: 0 0 0 2px var(--rdp-ring, rgba(59, 130, 246, 0.5)); border-color: var(--rdp-ring, #3b82f6); } /* ⚠️ Deliberate, third of three. This class EXISTS to serve pre-kit markup — its 32 call sites are all unmigrated pages — so the audience argument above applies to it unchanged. Note the shape: this rule SETS the ring variable, so retokenising only the `var(..., fallback)` in the rule above would move nothing on any site that uses this class. A fix that changes no pixel while reading as done is worse than no fix. Tracker: #617. */ .focus\:ring-blue-500:focus { --rdp-ring: #3b82f6; } @media (min-width: 640px) { .sm\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } } .space-y-3 > * + * { margin-top: 0.75rem; } /* Media gallery (PR-4): section stack + square thumbs. */ .bg-blue-100 { background-color: #dbeafe; } .bg-green-100 { background-color: #dcfce7; } /* Score-history trend chart (score-history-trends F5) — the core-emitted SVG scales to the container width; its viewBox keeps the aspect, same contract as the stage diagram's scene rule in sx-shared.css. (It named `.stage-diagram` here, which this file no longer defines: that rule moved to the shared-components part with the re-skin, and a cross-reference to a deleted selector is how the next reader concludes the contract is gone. ⚠️ The replacement names the FILE, not the selector, and that is deliberate: the class sweeps in `pages/stage_diagram.rs` search the assembled sheet for their selector, and this part concatenates ahead of sx-shared.css — so spelling it here made a comment satisfy a rule-body assertion. Found by the assertion failing, which is the direction that works.) */ .pb-3 { padding-bottom: 0.75rem; } .trend-chart { width: 100%; /* The 360x180 viewBox scales with its container, so an uncapped chart was 1865x933 on a desktop viewport (measured on the staging drive). Cap the CONTAINER's width rather than the svg's height: capping height leaves the box full-width with the plot letterboxed in ~676px of dead space either side, whereas this keeps the aspect with no wasted width, and phones — narrower than the cap — are unaffected. */ max-width: 32rem; border-radius: 0.25rem; overflow: hidden; } .trend-chart svg { display: block; width: 100%; height: auto; } /* ── Admin surfaces (merged from the dashboard's stylesheet) ───────────── * * Appended verbatim when the admin pages moved into this crate. These apps * have NO Tailwind build: an unlisted class silently no-ops rather than * failing, so a moved page whose classes stayed behind renders wrong with * nothing to notice. `rangeday check css` guards literal classes in CI; it * cannot see dynamically-composed class strings, which is what the admin * staging drive is for. */ .items-end { align-items: flex-end; } .col-span-2 { grid-column: span 2 / span 2; } .py-2\.5 { padding-top: 0.625rem; padding-bottom: 0.625rem; } .pb-2 { padding-bottom: 0.5rem; } .ml-1 { margin-left: 0.25rem; } .max-w-3xl { max-width: 48rem; } .max-w-7xl { max-width: 80rem; } .tabular-nums { font-variant-numeric: tabular-nums; } .text-red-500 { color: #ef4444; } .rounded-t-lg { border-top-left-radius: 0.5rem; border-top-right-radius: 0.5rem; } input[type="text"], input[type="email"], input[type="password"] { border: 1px solid #d1d5db; outline: none; } /* ⚠️ Deliberate, and the second of two — see the pin at the Forms block above for the reasoning. Retokenising this to a kit accent puts #A89968 on the fixed-white cards of every unmigrated page in the default dark theme. It converts when those pages migrate, not before. Tracker: #617. */ input:focus { box-shadow: 0 0 0 2px #3b82f6; border-color: #3b82f6; } .bg-amber-50 { background-color: #fffbeb; } .border-amber-200 { border-color: #fde68a; } .gap-0 { gap: 0; } .gap-0\.5 { gap: 0.125rem; } .gap-6 { gap: 1.5rem; } .grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); } .grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } .h-32 { height: 8rem; } .leading-none { line-height: 1; } .list-disc { list-style-type: disc; } .object-contain { object-fit: contain; } .pl-4 { padding-left: 1rem; } .mr-1 { margin-right: 0.25rem; } .pr-3 { padding-right: 0.75rem; } .pt-4 { padding-top: 1rem; } .text-gray-300 { color: #d1d5db; } .w-64 { width: 16rem; } .hover\:bg-gray-300:hover { background-color: #d1d5db; } .hover\:bg-red-200:hover { background-color: #fecaca; } .hover\:text-gray-600:hover { color: #4b5563; } .hover\:text-gray-900:hover { color: #111827; } .hover\:text-red-700:hover { color: #b91c1c; } .disabled\:opacity-30:disabled { opacity: 0.3; } .space-y-2 > * + * { margin-top: 0.5rem; } .space-y-4 > * + * { margin-top: 1rem; } .space-y-6 > * + * { margin-top: 1.5rem; } /* Responsive admin rules. A `^`-anchored sweep of the source sheet drops * these entirely — they fail only on narrow viewports, which is a * miserable way to find out. */ @media (min-width: 768px) { .md\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } .md\:col-span-3 { grid-column: span 3 / span 3; } } /* Archivo, self-hosted. No CDN: the app must boot and render from service-worker cache with no network at all, which is the whole point of self-hosting — see tmp/design/specs/A1-font-pipeline.md for the measurements behind these ranges. Declared ranges MUST match the file's real fvar axes, or the browser synthesises the out-of-range values instead of interpolating them. */ @font-face { font-family: 'Archivo'; src: url('/fonts/archivo-var-subset.woff2') format('woff2'); font-weight: 400 900; font-stretch: 62% 100%; font-display: swap; } /* ==== _legacy-tokens · the design-kit token layer · owner: NOBODY ==== */ /* UNOWNED · DELETE-ONLY. No lane owns this file, so no lane may add to it: new CSS goes in that lane's own section file, listed in order.txt. Any lane MAY delete what its own change stranded. The pool only shrinks — that is the whole mechanism by which these files disappear, and an addition here rebuilds the shared address the split removed. Displaced but NOT misfiled — and the difference matters, because this file sat under the same wrong banner as one that IS. In the single stylesheet four blocks lived beneath `==== ADM1-PR3 ==== ` (this one at lines 1547-1806 at `9e5b26b`). Two of those four are #662: they name a SCREEN their banner contradicts. This one names no screen at all — a token layer belongs to every section and therefore to none, so there is no correct banner to move it under and nothing here for #662 to fix. Do not sweep it up with them. ========================================================================== Design-kit token layer — see tmp/design/specs/00-substrate.md ========================================================================== Two themes because the app is used in direct sunlight. Quoting the kit's own reasoning, because it is a design decision rather than a code comment: "volt stays the fill in both, text on volt is always black, and what changes is everything around it. Light mode swaps volt for a dark olive wherever volt would be TEXT — volt on white is unreadable." ⚠️ THE QUOTE ABOVE IS VERBATIM AND STILL SAYS "OLIVE". It is unchanged in export 28 (`rd-train-kit.jsx:1-4`, byte-identical to the previous export) and is reproduced as written, not corrected — the accent moved from lime to TAN in that export and the designer left the paragraph standing. The RULE it states is what survived; only the two values under it moved. Do not "fix" the quote. Hence --rd-volt and --rd-acc are NOT the same token and must not be merged: --rd-volt is the accent as a FILL and is identical in both themes; --rd-acc is the accent as TEXT or STROKE and goes a deep warm brown in light. Name the role, never the colour: a border is a stroke, so it is --rd-acc. THE TAN REBRAND (export 28, 2026-08-25). `acc` and `volt` were #CEFF51 lime in dark and `acc` #3E4E10 olive in light. `rd-train-kit.jsx:19` now reads `acc: '#A89968', volt: '#A89968'` and `:20` `acc: '#5C5030', volt: '#A89968'`. Nothing was renamed and no other value in the palette moved — census across the two exports: 97 #CEFF51 -> 5 (all doc chrome), 57 #3E4E10 -> 0, 0 #A89968 -> 94, 0 #5C5030 -> 58. --rd-on-volt stays #000000 in both themes: tan is mid-luminance where lime was near-white, and the designer kept black ink anyway (`rd-train-kit.jsx:19,20`, `onVolt: '#000'`). Do not "fix" it. --rd-acc-wash moved to the tan family — SETTLED, no longer flagged. Ruled by James 28 Aug 2026 (design-reply-2026-08-28-acc-wash.md, export 32; all 25 corpus sites swept): dark #1A1D12 -> #1D1A12, light #F0F5DC -> #F5F0DC. The same channel values reordered so the warm channel leads (matching volt's R > G > B), so relative luminance is unchanged in both themes and every contrast pairing that passed still passes. The wash is the fill inside an `acc` stroke at every site, so it follows the accent. The C and D scoring-zone greens (#8FA83A / #5E6B29) STAY, by the same ruling: zone colours are a legibility ramp on a target diagram, not brand tokens, and were never in scope for the rebrand. The A zone is pinned at #A89968 on the ramp's own authority — if a zone-colour table is ever built here it takes the LITERAL, never var(--rd-acc), so the next accent move leaves the ramp alone (the pin is noted at rd-train-run.jsx's ZONES table). Each [data-theme] block defines the COMPLETE set, so re-scoping a subtree is total. A partial block would inherit half its tokens from the outer theme, which is precisely the bug the theme swatch would hit — it renders a miniature of the theme it is OFFERING, inside the theme currently active. No @media (prefers-color-scheme) here, deliberately. Theme is an explicit stored preference: "a phone that flips to dark at sunset while someone is still on the line is worse than one that stays where they put it." A media query would reintroduce exactly that flip. "Match my device" is a stored preference VALUE resolved in Rust, not a CSS query. ========================================================================== */ :root, [data-theme="dark"] { --rd-bg: #0B0B0B; --rd-surf: #151515; --rd-surf2: #1E1E1E; --rd-line: #2A2A2A; /* The boundary of anything TAPPABLE that is not filled with accent. --rd-line divides; --rd-ctrl bounds a control. The distinction is not cosmetic: a divider may be quiet because the content either side carries the meaning, while a control's boundary is often the ONLY thing saying the control is there. ⚠️ This value is a FLOOR, not a preference. WCAG 1.4.11 asks 3:1 of the visual information identifying a component; #6E6E6E clears it on #0B0B0B. "If your ground differs from mine the number moves; the 3:1 does not." It exists because one box failed three times (designer, 2026-08-04): --rd-line (the divider token, 1.4:1), then --rd-chip (WORSE, 1.2:1, on circular reasoning — the flanking chips "lend their affordance", but they are the same chip and read only because of the glyphs inside them), then this. Anywhere --rd-line or --rd-chip is the SOLE indicator that something is interactive is the same bug — see docs/roadmap/items/kit-control-boundary. */ --rd-ctrl: #6E6E6E; --rd-fg: #FFFFFF; --rd-fg2: #B6B6B6; --rd-fg3: #8C8C8C; --rd-acc: #A89968; --rd-volt: #A89968; --rd-on-volt: #000000; --rd-danger: #FF5A3C; /* The DESTRUCTIVE FILL, and it is NOT --rd-danger. `dfill` is its own key in the shared TT palette (rd-train-kit.jsx): danger is the colour destructive TEXT and hairlines take, dfill is the ground a Delete button sits on with white type. In LIGHT the two happen to be equal; in DARK they are not, and substituting danger here would ship a brighter button than drawn in the theme that is default. */ --rd-dfill: #A82A12; --rd-warn: #FFB020; --rd-chip: #232323; --rd-field: #1B1B1B; /* Derived: the kit branches on a per-theme `tex` flag in three places. A per-theme constant is a per-theme token, so the branch is pre-resolved here and no component ever tests it. ⚠️ --rd-app-bg IS AND STAYS A FLAT COLOUR. The dark theme's page ground is the concrete photograph under an Ink scrim, and it is NOT this token — it is --rd-app-ground, declared in kit-shell.css §0b because this file is UNOWNED · DELETE-ONLY and may not take a new name. The split is not tidiness: this token is read by consumers that require a and would break outright on an image value — `color-mix(in srgb, var(--rd-app-bg) …)` in s02-splash.css, lab1-page-act.css and adm-mob.css, plus `--rd-icon-ground` in the RdIcon block and `--rd-chip-on-label` in the light theme below. An image in this token makes those declarations INVALID AT COMPUTED-VALUE TIME — the splash dim would drop out in the theme that is default, which no light-theme screenshot can see. */ --rd-app-bg: #0B0B0B; --rd-nav-bg: rgba(8, 8, 8, .94); /* OPAQUE, and matched to OUR ground by hand. An outlined control is two layers and the inner layer's backdrop is the OUTER one — the stroke — not the page. So a translucent fill composites against the stroke and tints toward it: the .72 black this used to be lands on a dark warm brown inside a volt stroke and on rust inside a danger stroke. (Arithmetic, not a render: .72x#0B0B0B over #A89968 = ~#373325, over #FF5A3C = ~#4F2018. RECOMPUTED FOR THE TAN REBRAND, not re-quoted. The lime figure was ~#414F1F over #CEFF51 and is now wrong by construction; the same channel arithmetic — .72*0x0B + .28*channel, rounded — gives 54.96/50.76/37.04 over #A89968, i.e. #373325. The danger figure is untouched because --rd-danger did not move. The POINT is unchanged and is why the number is carried at all: a translucent inner fill is not the ground you think it is.) The kit's value is #111111 because that is the composited value of its dark scrim over the concrete photograph — `rd-train-kit.jsx:41`, `hollow = (t) => (t.tex ? '#111111' : t.bg)`. ⚠️ THIS MOVED #0B0B0B -> #111111 WITH THE GROUND, AND THAT WAS THE STANDING INSTRUCTION. The previous note read *"We ship a FLAT ground … so ours is #0B0B0B. The rule travels; the number is per-ground. If the texture ever ships, this becomes the composited value, NOT var(--rd-app-bg)."* The texture ships (--rd-app-ground, kit-shell.css §0b), so the number follows, and the "NOT var(--rd-app-bg)" half is honoured to the letter: this is a LITERAL, because binding it to the ground token would paint the photograph inside the button, which is the thing the two-layer construction exists to prevent. Light already obeyed this: --rd-hollow-fill == --rd-app-bg below. */ --rd-hollow-fill: #111111; /* Washes and scrims. Values measured from the corpus; the accent wash is RULED (28 Aug 2026, tan family — see the banner above), no longer the provisional most-used lime. Panel scrim collapses three alphas (.88/.90/.92). */ --rd-acc-wash: #1D1A12; --rd-warn-wash: #1E1804; /* The wash family's third member, and it was DISCOVERED rather than invented. S2-squad.md §6 asked whether the squad screen's danger block was a gap or an existing token under another name; it is a gap, and the corpus fills it at TWO independent sites with the identical pair — rd-squad.jsx:126 (the empty event roster) and rd-courses.jsx:197 — both `stroke={t.danger}` over `fill={t.tex ? '#1C0A06' : '#FDECE7'}`. Two witnesses at one literal is a role, and acc/warn already had theirs. chamfer_box.rs's Fill::Danger doc had even named this sibling before it existed. */ --rd-danger-wash: #1C0A06; /* ⚠️ STILL TRANSLUCENT, DELIBERATELY NOT FIXED HERE. This is exposed as Fill::PanelScrim, i.e. as an INNER fill, so the rule above applies to it identically — but it has zero call sites today, and the 08-04 re-diff found that its stated consumer (the Stage Editor) needs alphas this token cannot express: .72/.78/.86 as well as the .88/.90/.92 collapsed here, and it stays DARK in both themes at half its sites, where ours flips to opaque #FFFFFF in light. Flipping the value blind would be guessing at a spec that does not exist yet. Blocked on the editor wave; see tmp/design/rediff-2026-08-04.md section F. Do not use Fill::PanelScrim on a stroked box before then. */ --rd-panel-scrim: rgba(11, 11, 11, .90); /* Stage-diagram paper is deliberately THEME-INVARIANT — a diagram is drawn on cardboard in both themes; it is content, not chrome. The full 11-colour stage palette is domain-specific and rides with the Stage Editor migration, not Foundations. */ --rd-paper: #F2EFE6; --rd-paper-edge: #C9C6BA; --rd-swatch-ground: #0B0B0B; /* Designer #17: the filled control needs a silhouette on paper. Carried as a TOKEN VALUE, not a structural difference — transparent IS a value, so the component is identical in both themes (architect ruling 2). */ --rd-btn-edge: transparent; /* Selected chip — dark is the drawn treatment, unchanged. */ --rd-chip-on-fill: var(--rd-volt); --rd-chip-on-label: var(--rd-on-volt); } [data-theme="light"] { --rd-bg: #F1F1EC; --rd-surf: #FFFFFF; --rd-surf2: #E7E7E0; --rd-line: #CDCDC2; /* Floor on paper, same 3:1 rule — see the dark block. */ --rd-ctrl: #82827B; --rd-fg: #0B0B0B; --rd-fg2: #3F4039; --rd-fg3: #63645B; --rd-acc: #5C5030; --rd-volt: #A89968; --rd-on-volt: #000000; --rd-danger: #B32D0C; --rd-dfill: #B32D0C; --rd-warn: #7A4E00; --rd-chip: #E2E2D8; --rd-field: #FFFFFF; --rd-app-bg: #F1F1EC; --rd-nav-bg: #FFFFFF; --rd-hollow-fill: #F1F1EC; --rd-acc-wash: #F5F0DC; --rd-warn-wash: #FBF3DC; /* The light half of the same two-witness pair. Uncontested, unlike the light accent wash three lines up — both corpus sites say #FDECE7 and neither disagrees. */ --rd-danger-wash: #FDECE7; --rd-panel-scrim: #FFFFFF; --rd-paper: #F2EFE6; --rd-paper-edge: #C9C6BA; --rd-swatch-ground: #F1F1EC; /* Light only: volt-on-near-white is ~1.3:1 at the edge, so the shape dissolves and the chamfer is invisible. */ --rd-btn-edge: var(--rd-acc); /* Inverted on paper: ink fill, page-coloured label (#12). */ --rd-chip-on-fill: var(--rd-fg); --rd-chip-on-label: var(--rd-app-bg); } /* -------------------------------------------------------------------------- Type roles (substrate §2.3). `tdisp` is ALWAYS uppercase — the transform lives in the helper, so a source string's casing never reaches the render. Width is 62 for display and 75-78 for labels and controls — two values, as a rule rather than a list of instances. Body is 100 BY ABSENCE: body sites author no font-stretch at all, so 100 arrives as the CSS initial value, which is why the shipped subset clamps to 62-100 and not to 78. (66 was drift across five corpus sites, collapsed to 62 by the designer on 2026-08-04; the allowed set is enforced by ALLOWED_STRETCH in cli/src/css.rs.) -------------------------------------------------------------------------- */ .rd-disp { font-family: 'Archivo', system-ui, sans-serif; text-transform: uppercase; } .rd-h1 { font-family: 'Archivo', system-ui, sans-serif; text-transform: uppercase; font-weight: 900; font-stretch: 62%; letter-spacing: 0; font-size: 30px; line-height: .92; color: var(--rd-fg); } .rd-h1-alt { font-family: 'Archivo', system-ui, sans-serif; text-transform: uppercase; font-weight: 900; font-stretch: 62%; letter-spacing: .01em; font-size: 19px; line-height: .98; color: var(--rd-fg); } .rd-lab { font-family: 'Archivo', system-ui, sans-serif; text-transform: uppercase; font-weight: 700; font-stretch: 78%; letter-spacing: .2em; font-size: 8.5px; color: var(--rd-fg3); } .rd-lab-acc { color: var(--rd-acc); } .rd-btn-label { font-family: 'Archivo', system-ui, sans-serif; text-transform: uppercase; font-weight: 800; font-stretch: 78%; letter-spacing: .14em; font-size: 12.5px; } .rd-title { font-family: 'Archivo', system-ui, sans-serif; text-transform: uppercase; font-weight: 700; font-stretch: 78%; letter-spacing: .16em; font-size: 10px; color: var(--rd-fg2); } .rd-p { font-family: 'Archivo', system-ui, sans-serif; font-size: 13px; line-height: 1.5; color: var(--rd-fg2); text-wrap: pretty; margin: 0; } /* Numeric role, §P2 RESOLVED 2026-08-04 in favour of Foundations: Archivo 800 / stretch 75% / tabular. The kit's own `mono` now says the same — "not a system mono. Numbers are the loudest thing on a scoring surface, so they speak in the display voice." ONE qualification Foundations got wrong: NOT "always volt". Colour is --rd-fg by default; volt is reserved for the one number that IS the screen. Where the accent is right the token is --rd-acc, because a number is text. */ /* ADJUDICATED — designer answer #2. Numbers are the loudest thing on a scoring surface and must be in the display voice, not the system's. ONE weight: 800 (he stripped 29 inline overrides, so a 600 or 700 here is a bug, not a variant). Colour is --rd-fg by DEFAULT — "always volt" was wrong and collides with #6; volt is for the one number that is the point of the screen. ui-monospace survives elsewhere for verbatim technical strings (server URLs, WASM error text) — just never for numbers. */ /* The numeric role. Archivo 800 / width 75 / tabular — NOT a system mono (substrate §P2, adjudicated 2026-08-04). Colour is --rd-fg by default; volt is reserved for the one number that IS the screen. NO letter-spacing here. The kit's shared `mono` carries none — the -.01em is applied at TNum's call site only (rd-train-kit.jsx:240), and TStat's value (:266) is untracked. It used to ride this rule, which silently tracked every stat value in the app. */ .rd-num { font-family: 'Archivo', system-ui, sans-serif; font-variant-numeric: tabular-nums; font-weight: 800; font-stretch: 75%; font-size: 17px; color: var(--rd-fg); } /* -------------------------------------------------------------------------- /kit review surface. Unlinked route; exists to show tokens and type resolving in both themes, and to make a broken token VISIBLE (the falsification rule). -------------------------------------------------------------------------- */ .rd-kit { min-height: 100vh; background: var(--rd-app-bg); color: var(--rd-fg); padding: 24px; font-family: 'Archivo', system-ui, sans-serif; } .rd-kit-head { margin-bottom: 24px; } .rd-kit-panels { display: flex; flex-wrap: wrap; gap: 20px; align-items: flex-start; } .rd-kit-panel { flex: 1 1 320px; min-width: 300px; background: var(--rd-app-bg); border: 1px solid var(--rd-line); padding: 18px; } .rd-kit-sec { margin-top: 20px; } .rd-kit-sw-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(128px, 1fr)); gap: 10px; margin-top: 8px; } .rd-kit-sw { border: 1px solid var(--rd-line); } .rd-kit-sw-chip { height: 44px; } .rd-kit-sw-meta { padding: 6px 7px; background: var(--rd-surf); } .rd-kit-sw-name { font-size: 10px; color: var(--rd-fg); word-break: break-all; } .rd-kit-sw-val { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 9.5px; color: var(--rd-fg3); } .rd-kit-spec { border-top: 1px solid var(--rd-line); padding: 10px 0; } .rd-kit-spec-note { font-size: 9.5px; color: var(--rd-fg3); margin-top: 3px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; } .rd-kit-row { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 8px; align-items: flex-start; } /* A container demo's inner box needs a size to be visible; the primitives supply their own. Review-surface chrome, not a kit rule. */ .rd-kit-boxdemo { min-height: 44px; padding: 0 14px; display: flex; align-items: center; } /* Icon review rows. The captions matter as much as the marks: two of the twelve are not guessable unlabelled (the designer's own argument for mandatory tab labels), so a fidelity pass needs to know which one it is looking at. */ /* ⚠️ `color` IS SET HERE, and it has to be. RdIcon paints `currentColor`, and `color` is an ordinary inherited property — it inherits a COMPUTED value, so re-scoping `data-theme` further down does NOT re-resolve a colour set above. `.rd-kit` sets `color: var(--rd-fg)` under the document theme; without this line the light panel's icons inherited the DARK theme's white and rendered white-on-white, invisible. Caught by the render, not by a test — the tests cannot see a stylesheet. Every type role in the kit escapes this by setting its own colour; the icons are the first thing here that did not. */ .rd-kit-icons { display: grid; grid-template-columns: repeat(auto-fill, minmax(62px, 1fr)); gap: 10px; margin-top: 8px; padding: 10px; color: var(--rd-fg); } /* The second row's ground, and it must be the token the icons are TOLD they sit on — if these two ever disagree the checklist's knockout is wrong and the page stops being evidence. */ .rd-kit-icons--surf { background: var(--rd-surf); } .rd-kit-icon { display: flex; flex-direction: column; align-items: center; gap: 5px; } .rd-kit-icon-name { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 9px; color: var(--rd-fg3); } .rd-kit-warn { border-left: 2px solid var(--rd-warn); padding-left: 12px; margin-top: 18px; } /* ==== _legacy-kit-chamfer-button · 01-chamfer-box + 02-button · owner: NOBODY ==== */ /* UNOWNED · DELETE-ONLY. No lane owns this file, so no lane may add to it: new CSS goes in that lane's own section file, listed in order.txt. Any lane MAY delete what its own change stranded. The pool only shrinks — that is the whole mechanism by which these files disappear, and an addition here rebuilds the shared address the split removed. THE NAME `_legacy-kit-primitives.css` IS RETIRED, NOT INHERITED. This file and `_legacy-kit-components-and-screens.css` are the two unowned fragments of it, and neither took the old name. A rename that hands an established name to different contents is the worse failure of the two: a broken path fails loudly on the next grep, while a re-pointed name fails at the moment somebody trusts it. The old name is now absent from the tree. It had been the largest part by a wide margin — 2663 lines, more than a third of the built stylesheet, a merge of many primitives rather than one section that grew. A byte-identical three-way re-partition cut it in place: the shell block was promoted to the owned `kit-shell.css`, the rest went to `_legacy-kit-components-and-screens.css`, and nothing was added, edited or reordered — the assembled stylesheet did not change by one byte. What is here is 252 lines and exactly two blocks: 01-chamfer-box and 02-button, which is what the name says. Note the pool did not grow: re-partitioning re-files existing rules, so "nothing new ever lands here" still holds. The invariant is that the pool only shrinks, not that its files are immutable — and it may also re-file and rename what it already holds. Displaced but NOT misfiled, on the same reasoning as _legacy-tokens.css: it sat beneath `==== ADM1-PR3 ==== ` in the single stylesheet (lines 1807-4455 at `9e5b26b`), but primitives belong to every screen and therefore to none. There is no correct banner to move it under, so nothing here is #662's. ========================================================================== DESIGN-KIT PRIMITIVES — merged from tmp/design/kit-css/ (PR B) ========================================================================== One block per primitive, in spec order. Authored as separate files so eleven concurrent authors could not collide in this hand-curated stylesheet, then merged through two checkers: check-classes.py used -> defined check-css-dupes.py defined -> defined ONCE The second exists because the first is blind to two authors defining the same selector differently, where the cascade silently last-write-wins. ========================================================================== */ /* ---- 01-chamfer-box.css ---- */ /* RdChamferBox — the two-layer chamfer container. Spec: docs/design/kit/01-tout.md The outer IS the border: a solid box filled with the stroke colour, clipped at `r`, padded by the border width. The inner is the surface, clipped at max(r - w(2 - √2), 2) — NOT r - 2w, which makes the two cuts collinear and the border vanish along the diagonal. Geometry arrives as custom properties (the scale is 8 chamfer values x 4 widths — enumerating the product as classes would be noise); colour stays here, where the token roles belong. */ .rd-box { background: var(--rd-line); padding: var(--rd-box-w, 1px); box-sizing: border-box; /* padding must INSET, not grow: without this every box renders 2w larger than its slot and overflows its row */ clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--rd-box-r)), calc(100% - var(--rd-box-r)) 100%, 0 100%); } .rd-box__inner { background: var(--rd-surf); height: 100%; /* no-op on an auto-height card; load-bearing when the OUTER gets a definite height from a stretch row — without it the stroke colour shows as a solid slab below the content */ box-sizing: border-box; /* lets the inner carry its own padding (84/84 sites do) without fighting height:100% */ clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--rd-box-ri)), calc(100% - var(--rd-box-ri)) 100%, 0 100%); } /* Stroke roles. A stroke is --rd-acc, NEVER --rd-volt (substrate §1.1). */ .rd-box--stroke-line { background: var(--rd-line); } .rd-box--stroke-acc { background: var(--rd-acc); } .rd-box--stroke-muted { background: var(--rd-fg3); } .rd-box--stroke-danger { background: var(--rd-danger); } .rd-box--stroke-warn { background: var(--rd-warn); } /* --rd-line divides; --rd-ctrl BOUNDS A CONTROL (substrate §1.5). Not a lighter line: where the boundary is the only thing saying the control is there, it has to clear 3:1. Added with RdTextField, which AU5 §13 declares blocked on it. */ .rd-box--stroke-ctrl { background: var(--rd-ctrl); } /* Reserves the border's space without painting it, so a state change to a visible stroke costs no layout shift. */ .rd-box--stroke-none { background: transparent; } .rd-box--stroke-btn-edge { background: var(--rd-btn-edge); } /* Fill roles. Never `transparent` on an outlined control — the outer layer is the border, so a see-through inner lets the border colour flood it. */ .rd-box--fill-surf { background: var(--rd-surf); } .rd-box--fill-surf2 { background: var(--rd-surf2); } .rd-box--fill-field { background: var(--rd-field); } .rd-box--fill-hollow { background: var(--rd-hollow-fill); } .rd-box--fill-acc-wash { background: var(--rd-acc-wash); } .rd-box--fill-warn-wash { background: var(--rd-warn-wash); } .rd-box--fill-danger-wash { background: var(--rd-danger-wash); } .rd-box--fill-scrim { background: var(--rd-panel-scrim); } .rd-box--fill-paper { background: var(--rd-paper); } .rd-box--fill-volt { background: var(--rd-volt); } /* The gate's fault mark (AU1 §3.1). SOLID status colour, not a wash: this box IS the symbol and holds nothing, where the washes above tint a container that holds copy. `--rd-warn` is the grace variant and the only variant-conditional geometry-or-colour in the whole screen — "amber, not red — recoverable, nothing lost". */ .rd-box--fill-danger { background: var(--rd-danger); } .rd-box--fill-warn { background: var(--rd-warn); } /* ---- 02-button.css ---- */ /* RdButton — spec docs/design/kit/02-tbtn.md. Component: apps/web/src/components/kit/button.rs Three layers, outside in: .rd-btn the real