/* ============================================================ Proof — text-first cut "Marking up a galley proof in a darkroom." Warm near-black, cream type, one amber accent, rust for cuts. ============================================================ */ /* Self-hosted faces (P6 §4, W11) — variable woff2 vendored under fonts/, all OFL. The two MEASURING faces (Literata = paper, Spline Sans Mono = chips) are font-display: block — a fallback swap mid-measure is the lie pretext can't survive (G5); boot awaits them before the first measurement anyway, so block never shows. Hanken is chrome only and may swap freely. */ @font-face { font-family: 'Literata'; font-style: normal; font-weight: 300 700; font-display: block; src: url(/fonts/literata-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-face { font-family: 'Literata'; font-style: normal; font-weight: 300 700; font-display: block; src: url(/fonts/literata-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Literata'; font-style: italic; font-weight: 300 700; font-display: block; src: url(/fonts/literata-italic-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-face { font-family: 'Literata'; font-style: italic; font-weight: 300 700; font-display: block; src: url(/fonts/literata-italic-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Spline Sans Mono'; font-style: normal; font-weight: 300 600; font-display: block; src: url(/fonts/spline-sans-mono-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-face { font-family: 'Spline Sans Mono'; font-style: normal; font-weight: 300 600; font-display: block; src: url(/fonts/spline-sans-mono-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Hanken Grotesk'; font-style: normal; font-weight: 300 700; font-display: swap; src: url(/fonts/hanken-grotesk-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-face { font-family: 'Hanken Grotesk'; font-style: normal; font-weight: 300 700; font-display: swap; src: url(/fonts/hanken-grotesk-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* Spectral SemiBold — the WORDMARK face only (the ¶Proof brand note). Chrome, not a measuring face, so it may swap freely (like Hanken); not preloaded. Single latin subset (covers the pilcrow U+00B6); missing glyphs fall back to serif. */ @font-face { font-family: 'Spectral'; font-style: normal; font-weight: 600; font-display: swap; src: url(/fonts/spectral-600-latin.woff2) format('woff2'); } :root { /* TONE PASS (Jesse 2026-06-29: "the yellow and brown has lost its charm — fresh eyes"). The dark fills carried too much chroma (0.010–0.014 at hue 65–70), which on large surfaces read as muddy yellow/brown. Slashed the chroma toward the canonical browse- mockup's restraint (its darks #100f0e/#161514 are ~0.004) while HOLDING every lightness value — contrast is governed by L in oklch, so the WCAG floors (contrast.test.ts) are untouched. COOLED (Jesse 2026-06-29 round 2: "still a little browney, a little cooler"): hue swung 70→255 so the residual chroma reads cool-slate, harmonizing with the blue --accent (also hue ~250) instead of brown. The saturated life still comes from the accents (blue/amber/status), not the walls. */ --bg: oklch(0.165 0.006 255); --bg-deep: oklch(0.135 0.005 255); --surface: oklch(0.205 0.007 255); /* a SUBTLE semi-opaque lift over the warm-dark bg (Jesse 2026-06-29) — a low-opacity CREAM wash (the browse-mockup's #ece6d6 ink at ~5%), NOT a heavier warm slab like --surface (which read as an ugly light-brown band on large surfaces). Matches the canonical darkroom-browser mock's tone-shift architecture: surfaces lift via gentle semi-opaque cream over the page, never a hard jump. Reuse app-wide. */ --lift-1: rgb(236 230 216 / 0.05); --line: oklch(0.30 0.012 255); /* inks settle to a near-neutral, faintly-cool off-white (round 2) — the warm cream read as part of the "browney" cast against the now-cool walls, so they swung cool too, at a whisper of chroma so text stays soft, not clinical-blue. */ --ink: oklch(0.91 0.010 255); --ink-dim: oklch(0.62 0.010 255); /* the faint split (P2 audit P0): --ink-faint is TEXT — anything read as words — and must clear WCAG AA 4.5:1 on --bg AND --surface; --ink-deco is decorative strokes/glyphs only (dotted fill underline, fdel line-through, grip, disclosure chevron) and holds the 3:1 non-text floor. The whisper register lives in --ink-deco now; never put text on it. tests/contrast.test.ts pins the floors — retune freely above them. */ --ink-faint: oklch(0.60 0.010 255); --ink-deco: oklch(0.51 0.010 255); /* THE accent — renamed from --amber the day it turned blue (Jesse ruling: the token names a ROLE, not a color). The cool INTERACTION/wayfinding role. SINGLE KNOB (Jesse 2026-06-29): --accent is the ONLY value to edit — the soft FILL and the selection tint now DERIVE from it via relative-color (like --accent-wash/-sel-hot already do), so retinting the blue propagates to the tab/button fills + selection in one edit instead of nine hardcoded literals. NOT the only loud role anymore — the call-to-action is its own --primary-action (DECISIONS #27(1) retired "one accent only"). */ --accent: oklch(0.72 0.10 272); --accent-soft:oklch(from var(--accent) l c h / 0.18); --accent-sel: oklch(from var(--accent) l c h / 0.40); /* selection reads stronger than the playback wash */ /* THE primary-action role — the call-to-action fill (the mockup's amber "New"). DECISIONS #27(1): Jesse retired "one accent only" in favour of a small CODIFIED SET of role tokens, each globally swappable. This is the CTA role, deliberately DISTINCT from the two neighbours it must never collapse into: · --accent (cool wayfinding/interaction; SWAPS teal under the library profile) — a call-to-action is not a wayfinding mark, so it does NOT ride the profile swap: profile-constant, like the status trio below; · --working amber (a STATUS, "processing") — borrowing it for an ACTION is the --accent overload sin (token names a role, Law 1). Its own token, own value. Amber by Jesse's mockup; the exact value is his live feel-tune. Ink on the fill is --bg-deep (a light fill) — contrast.test.ts pins the 4.5:1 floor. */ --primary-action: oklch(0.78 0.145 70); --rust: oklch(0.58 0.085 38); /* THE stricken role — rust is the color, stricken is the ROLE (the --accent lesson): ghosts, line-throughs, the section/chip ×-hover, and the CUT clock all speak it. New stricken-meaning rules use --stricken. */ --stricken: var(--rust); --rust-dim: oklch(0.46 0.060 38); --moved: oklch(0.72 0.085 145); /* THE working role — semantic STATUS amber (brief §3: green=ready · amber= working · grey=archived; "every mark means something"). DISTINCT from the interaction --accent: a processing/ingesting/transcribing cue is a status, not a wayfinding mark, so it gets its OWN role — and stays amber across profiles (status is profile-constant; the cool library swap re-values only the accent triad, NOT this). Before this token the working cues borrowed --accent and silently turned teal under the cool profile, conflating two roles. Non-text (progress fill / spinner head), so no contrast gate; the exact amber is Jesse's live feel-tune. Soft = the spinner track. */ --working: oklch(0.80 0.135 80); --working-soft: oklch(from var(--working) l c h / 0.20); /* THE comment-position role (COMMENT-WORD-ANCHOR-1) — a guest comment's marker on a recipient scrub bar. Its OWN role, not a borrow (the --accent lesson): the marker must read against BOTH the cool --accent playback fill AND the neutral --line track, on BOTH the dark room and the light review card — a warm pip is the only value that contrasts with all four, so annotation gets a warm role distinct from the cool interaction accent. Profile-constant (a note means the same on any surface) and non-text (a 6px pip), so no contrast gate; Jesse feel-tunes the exact amber. */ --comment-mark: oklch(0.80 0.14 68); /* THE ready role — the green that closes the brief §3 status trio (green=ready · amber=working · grey=archived). A POSITIVE "settled, openable" mark, its OWN role: distinct in hue from --working amber (a status must never read as still- working) AND from the cool library --accent teal (a status is not a wayfinding mark) AND from the editor's reorder --moved green (a different role on a different surface — never share a token across roles, the --accent lesson). Profile-constant like --working: status means the same everywhere, so the cool swap (interaction triad only) leaves it untouched. Non-text dot ⇒ no contrast gate; the exact green is Jesse's live feel-tune. */ --ready: oklch(0.72 0.115 150); /* THE archived role — the GREY that completes the brief §3 status trio (green= ready · amber=working · grey=archived). The trio's NEUTRAL member: a status that means "set aside, no active state" is deliberately DESATURATED (near-zero chroma) so it never competes with the saturated ready/working marks. Its OWN named role (not a borrowed --wash/--ink-dim) so "grey = archived" is a law, not an accident of which neutral it happened to reuse — the same lesson --working taught when it silently turned teal borrowing --accent. Profile-constant: a status means the same in every profile, so the cool library swap leaves it untouched. Non-text mark (a dim + a grey pill) ⇒ no contrast gate; the exact grey is Jesse's live feel-tune. Wash = the pill surface, derived so a retune carries it. */ --archived: oklch(0.60 0.010 250); --archived-wash: color-mix(in oklab, var(--archived) 14%, transparent); /* the set-aside RECEDE — how far an archived item dims without disappearing. A named micro-token (taxonomy gap #2), not a magic 0.6 buried in a rule. */ --set-aside-opacity: 0.6; /* washes — hover/selection tints DERIVED from the inks above, so a retheme carries them for free. Never hand-mix an overlay color in a rule. */ --wash: color-mix(in oklab, var(--ink) 7%, transparent); --wash-soft: color-mix(in oklab, var(--ink) 5%, transparent); --accent-wash: color-mix(in oklab, var(--accent) 7%, transparent); --working-wash: color-mix(in oklab, var(--working) 8%, transparent); --rust-wash: color-mix(in oklab, var(--rust) 12%, transparent); /* T9 combination layer (states.md laws 2+3): hover-on-washed and sel∧cur read as the SAME wash one lightness step hotter. The step writes the wash ITSELF (channel A only — filter:brightness would lift ink and tint the mark, channel B/D crosstalk, so it's banned; tests/states.test.ts pins that). Hot pairs derive from their wash token + the shared delta, so a wash retune carries them for free. Step size (and sign) is a look-lane placeholder. */ --hover-delta: 0.05; --accent-sel-hot: oklch(from var(--accent-sel) calc(l + var(--hover-delta)) c h); --accent-soft-hot: oklch(from var(--accent-soft) calc(l + var(--hover-delta)) c h); /* T10's presence tint, tokenized (the sheet's own law: never hand-mix in a rule) */ --presence-wash: color-mix(in oklab, var(--accent) 3.5%, transparent); --scrim: oklch(0.1 0.008 255 / 0.45); /* the DEFAULT project color — every project HAS a color (Jesse 2026-07-09: no colorless state, no Clear-color verb); an UNSET color renders as this slate wherever a project color shows (swatch · rails · tile faces). ≈ the recolor picker's Slate (#64748b), so "default" and "picked Slate" read identically. */ --project-slate: oklch(0.554 0.046 257); /* ink that reads OVER a scrimmed dark backdrop (the --scrim is dark in every theme, so its over-text is a constant near-white in every theme — NOT --ink, which flips with the surface). Used by the grid tile's blurred poster hero (PT-2); a named role so "text on media" is a token, not a hand-typed white in a rule. */ --ink-on-media: oklch(0.97 0.015 85); /* AK-3 — the audio-only thumbnail's decorative waveform amber. Its OWN role token, NOT --working (status) or --primary-action (CTA): borrowing either would be the --accent-overload sin (a token names a role, Law 1). Non-text/decorative (the card name carries identity; the svg is aria-hidden) ⇒ no contrast gate. Profile-constant like the status trio; the exact amber is Jesse's live feel-tune lane. */ --audio-wave: oklch(0.72 0.15 55); /* speaker palette — equal lightness/chroma, hue-spread (extend in order) */ --spk1: oklch(0.74 0.080 80); --spk2: oklch(0.74 0.070 150); --spk3: oklch(0.74 0.075 280); --spk4: oklch(0.74 0.075 20); /* clip provenance — shared by the strip canvas (strip.js reads these) and the legend; the canvas and its key can't drift apart */ --clip-ord: oklch(0.78 0.05 85); --clip-reo: oklch(0.72 0.12 145); --clip-dup: oklch(0.66 0.13 300); --sp1: 4px; --sp2: 8px; --sp3: 12px; --sp4: 16px; --sp5: 24px; --sp6: 32px; --sp7: 48px; --sp8: 64px; /* type ramp — every font-size in the app is one of these roles. (--geo-* sizes are NOT here: transcript geometry is published by js/layout.js, the single source of truth pretext measures with.) P3(b): the chrome ramp is THREE steps (micro/standard/body) — the old 9/10/11/12/13 ladder was 1px noise pretending to be hierarchy. Roles keep their names (usage stays semantic; a future re-split is one line) but their values converge. tests/states.test.ts pins the step COUNT, never the values — sizes stay Jesse's lane. */ --fs-label: 10px; /* uppercase micro-labels: clock/panel/strip headings (tracking carries the smallness) */ --fs-chip: 12px; /* chips, tabs, kbd, small buttons — bumped 10→12 (Jesse 2026-07-09: button legibility too low everywhere; the canonical mockup's toolbar text is 12px) */ --fs-note: 12px; /* annotations: hints, speakers, counts, sublines */ --fs-ui: 12px; /* standard chrome text: filename, toasts, scrub values */ --fs-control: 14px; /* interactive controls: toggles, inputs, selection meta — interactive text earns body size */ --fs-base: 14px; /* body default */ --fs-clock: 18px; /* the big TRT readout */ --fs-brand: 21px; /* wordmark */ --f-ui: "Hanken Grotesk", sans-serif; --f-body: "Literata", serif; --f-brand: "Spectral", "Literata", serif; /* the wordmark face — Spectral SemiBold; falls back to the prior Literata wordmark */ --f-tc: "Spline Sans Mono", monospace; } /* P9(c) — HIGH CONTRAST: a token-TIER override, never a redesign. The tier re-values ink-side tokens only; the grounds (--bg/--bg-deep/--surface) keep the darkroom, and every wash/hot/presence tint derives from these tokens (color-mix / oklch-from), so the whole state system rethemes from this one block — no rule below ever mentions the tier. Floors the gate pins (tests/contrast.test.ts): text inks AAA 7:1 on both grounds, --ink-deco and the stricken rust ≥ 4.5:1, --bg-deep ink ≥ 4.5:1 on the accent fill, and every name here must already exist in :root (a swap, never a fork). Exact values are Jesse's lane — retune freely above the floors. main.ts applies the tier as html[data-contrast="high"] from the proof:ui envelope. */ :root[data-contrast="high"] { --line: oklch(0.42 0.018 70); --ink: oklch(0.97 0.015 85); --ink-dim: oklch(0.78 0.020 78); --ink-faint: oklch(0.76 0.020 76); --ink-deco: oklch(0.68 0.018 75); --accent: oklch(0.82 0.100 250); --accent-soft:oklch(from var(--accent) l c h / 0.26); /* derives hue; HC keeps a stronger fill alpha */ --accent-sel: oklch(from var(--accent) l c h / 0.42); --rust: oklch(0.68 0.100 38); --rust-dim: oklch(0.58 0.075 38); --moved: oklch(0.78 0.085 145); --working: oklch(0.85 0.120 80); --ready: oklch(0.80 0.110 150); --archived: oklch(0.74 0.014 250); --audio-wave: oklch(0.78 0.15 55); --hover-delta: 0.07; --scrim: oklch(0.1 0.01 65 / 0.65); --spk1: oklch(0.80 0.080 80); --spk2: oklch(0.80 0.070 150); --spk3: oklch(0.80 0.075 280); --spk4: oklch(0.80 0.075 20); --clip-ord: oklch(0.84 0.05 85); --clip-reo: oklch(0.78 0.12 145); --clip-dup: oklch(0.74 0.13 300); } /* browser-shell §3 — the COOL PROFILE. A "theme = a role-override set" (Jesse, 2026-06-18): ONE token system across both surfaces, the editor is the WARM profile (the default :root, blue --accent) and the library/app-shell runs a touch cooler — amber/teal is the thread tying the two. The interaction note on the library side is the RATIFIED teal (~#56a892, the cool complement to amber, in the editor's moved-green family); selection, the breadcrumb's lone climbable crumb, the openable-card focus ring, the grouped-lane divider all already speak --accent, so re-valuing the interaction TRIAD here turns the whole library cool with zero per-site change — and makes every "--accent (teal)" comment in the browse block (the breadcrumb, the home shell) TRUE. Keyed on the EXISTING surface marker (shell.ts writes body[data-route] on the single load path): "page" = the non-editor app-shell (browse/projects/signin), "editor" = the warm page-inside-the-book. One source of truth, no parallel writer to drift from the route. (A user-chosen profile axis decoupled from route is an additive attribute later — same swap-not-fork law, no rework.) SWAP, NEVER A FORK (theme-token-taxonomy law 6, as the HC tier above): only the interaction triad is re-valued; the derived washes/hot-pairs (--accent- wash/-sel-hot/-soft-hot, defined once in :root off var(--accent)) re-resolve to teal for free under the cascade. The GROUNDS and INKS are deliberately UNTOUCHED — cooling the chrome itself re-values grounds, which is a separate APPEARANCE AXIS (the light-theme door, DECISIONS #24 §9 / taxonomy gap #1), not this swap. The teal clears the SAME AA floor the base accent does (tests/contrast.test.ts pins it), so an HC user on the library surface still gets a legal selection fill. Exact shade is Jesse's live feel-tune lane. */ body[data-route="page"], body[data-route="landing"] { /* SINGLE KNOB: only --accent is re-valued (teal); --accent-soft/-sel derive from it in :root, so they re-resolve to teal here under the cascade — no per-scope literals. The landing (ENTRY-DOOR-2) shares the profile so porch → door reads as one house. */ --accent: oklch(0.70 0.10 178); } /* §look-lane — the DESCEND-INTO-EDITOR motion. shell.ts sets body[data-nav= "descend"] for one browse→editor hop (ephemeral, like layout-snap); the editor stage rises+fades forward so the browse→editor relationship reads as "one app, two depths," not two pages. Transform/opacity only — compositor-cheap, no layout thrash, no new hex (a SPATIAL cue, never a colored one; the status/ interaction hues are untouched). A keyframe (not a transition) so it plays the instant the editor surface mounts, with no from→to reflow to coordinate. Reuses the established 220ms cubic-bezier(0.2,0.8,0.2,1) family. */ @keyframes nav-descend-rise { from { opacity: 0; transform: translateY(10px) scale(0.994); } to { opacity: 1; transform: none; } } body[data-route="editor"][data-nav="descend"] main { animation: nav-descend-rise 220ms cubic-bezier(0.2, 0.8, 0.2, 1); } /* Reduced-motion SNAPS to today's hard cut — the safety floor, the existing :root[data-motion="reduced"] convention (style.css ~877). */ :root[data-motion="reduced"] body[data-route="editor"][data-nav="descend"] main { animation: none; } /* §look-lane — the ASCEND (editor→browse): the symmetric inverse of the descend. Leaving the canvas, the library OVERVIEW settles back into view from slightly above + larger — you rise back OUT to the wider depth, the mirror of the canvas rising forward on the way in. shell.ts sets body[data-nav="ascend"] for the one editor→browse hop; the WHOLE browse shell (rail + content together = the overview) plays the settle. Same transform/opacity-only, no-new-hex, spatial-not-colored discipline as the descend; reduced-motion SNAPS it. */ @keyframes nav-ascend-settle { from { opacity: 0; transform: translateY(-8px) scale(1.006); } to { opacity: 1; transform: none; } } body[data-nav="ascend"] .browse-shell { animation: nav-ascend-settle 220ms cubic-bezier(0.2, 0.8, 0.2, 1); } :root[data-motion="reduced"] body[data-nav="ascend"] .browse-shell { animation: none; } * { box-sizing: border-box; } /* P2(b) — FOCUS, channel E (states.md law 8): ONE additive accent ring, offset clear of any wash, on every focusable in the app. Never substituted, never suppressed — a focused ghost still shows its ring (focus says where the keyboard is, not what the element is). :focus-visible only: pointer clicks never park focus (keyrouter blur hygiene), so the ring appears exactly when the keyboard is driving. No rule anywhere may write `outline: none` (tests/states.test.ts pins the ban). Width/offset are look-lane placeholders. */ :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } html { height: 100%; } body { margin: 0; /* dvh: track the REAL visual viewport (mobile URL bars, folds, rotation) */ height: 100vh; height: 100dvh; background: var(--bg); color: var(--ink); font-family: var(--f-ui); font-size: var(--fs-base); display: grid; grid-template-rows: auto 1fr auto; overflow: hidden; } button { font: inherit; color: inherit; background: none; border: 1px solid var(--line); border-radius: 4px; padding: 6px 10px; cursor: pointer; } button:hover { border-color: var(--ink-dim); } button:active { background: var(--surface); } /* ★ SELECTED-CONTROL LAW (RFC active-tab-selected-control / DECISIONS #49): a control that marks itself "active/selected" (segmented tabs, mode pickers, rate picks, dock tabs, view/handle toggles) reads as a selected AREA — `background: var(--accent-soft)` + `color: var(--accent)` — and NEVER as a line. Lines (underline/edge accents) are reserved for the TEMPORAL marks (playhead/scrubber/progress); an "active" border-line collides with them. Keep the control's RESTING border; the active state fills, it does not escalate the edge. New active/selected controls copy THIS, not a one-off. */ /* capability-hidden chrome stays hidden no matter what display a reveal rule sets — the author-display-beats-UA-[hidden] gotcha, solved once for all */ button[hidden] { display: none !important; } /* …except the peek handle: its BOX stays reserved so the header never reflows when it appears/disappears (geometric inertness, Jesse) */ /* P3(b) — BUTTON VERB HIERARCHY, three registers (audit P1): QUIET (borderless inline glyphs — grip, ×, ⤒) for verbs living inside content; STANDARD (the bordered default above) for panel verbs; PRIMARY (accent fill) for THE verb a panel exists to deliver — at most one on screen, and today exactly one in the app: the render command, because the cut itself is what Proof exports. Hierarchy is treatment, never new behavior; hover/ active ride the same --hover-delta as every other hot state (channel A's one knob). Ink is --bg-deep on the accent fill — contrast gate pins it. */ button.primary { background: var(--accent); border-color: transparent; color: var(--bg-deep); font-weight: 600; } button.primary:hover { background: oklch(from var(--accent) calc(l + var(--hover-delta)) c h); border-color: transparent; } button.primary:active { background: oklch(from var(--accent) calc(l - var(--hover-delta)) c h); } kbd { font-family: var(--f-tc); font-size: var(--fs-chip); color: var(--ink-faint); border: 1px solid var(--line); border-radius: 3px; padding: 0 4px; margin-left: 4px; } .tc { font-family: var(--f-tc); font-variant-numeric: tabular-nums; } .dim { color: var(--ink-dim); } .count { font-family: var(--f-tc); font-size: var(--fs-note); color: var(--accent); margin-left: var(--sp2); } /* ============================================================ Proof — the shared ROW primitive (ROW-PRIMITIVE-PILOT · BROWSER-DESIGN-COHERENCE) The app has ~15 list/row surfaces (version history, org members, browse projects, account workspaces, api-keys, billing, …) and, before this sheet, ~15 bespoke naming schemes doing the SAME leading·title·meta·trailing job — each re-improvising its own kebab placement, hover rule and keyboard reach (the RFC audit, investigations/browser-row-primitive.md). This sheet names the pattern the surfaces independently rediscovered: it is a codification, NOT a redesign — nearly every text row is already `display:flex; align-items:baseline` with a `flex:1` title and a pushed-right trailing edge, so a surface adopts the slot classes with ZERO geometry change (RFC finding #2). CSS-class contract FIRST, TS builder DEFERRED (RFC decision 1): each surface opts into the slot classes incrementally, one file per shift, verified in isolation. Pilot = browse projects (`.project-item`) — see browse.css, where the orphaned ⋯ kebab finally lands in a real `.row-trail` slot. Canonical inset: a surface that pads the ROW itself uses `var(--sp2) var(--sp3)` (the value `.project-link`/`.recent-link` already carry). This sheet does NOT impose padding on `.row` — many surfaces (the pilot included) pad their inner interactive child and keep the border/rail on the wrapper, so a base padding here would DOUBLE the inset. Padding stays a per-surface concern; the token is the shared law, the placement is the surface's. ============================================================ */ /* the row itself — the convergent idiom, named once. baseline so a tall leading glyph and small meta text sit on the same type baseline; the gap is the inter-slot rhythm (only in-flow siblings pay it — an absolutely-placed `.row-trail`, the table-row case, contributes none). */ .row { display: flex; align-items: baseline; gap: var(--sp2); } /* optional LEADING slot — avatar / thumb / icon / status disc. Fixed size, never grows or shrinks. OMIT it entirely and the title starts at the row's edge (the pilot's list row has no leading glyph — its identity is the accent rail border). */ .row-lead { flex: 0 0 auto; } /* the TITLE — the primary label, the one growing slot. min-width:0 is load-bearing: without it a long title refuses to shrink below its content width and SHOVES the trailing edge off-row; with it the title truncates and the trailing actions stay pinned. (The pilot's `.project-link` is itself a grid of table cells — a `.row` child can carry its own internal layout; `.row-title` only governs how it flexes.) */ .row-title { flex: 1; min-width: 0; } /* the META slot — secondary text (counts, dates, roles). Recedes to the cool chrome register. The middot `::before` separator (lifted from the account/billing convention, RFC's cleanest of the six meta dialects) lets multi-part meta compose without bespoke spans: "Created May 3 · last used today" is two `.row-meta` spans, each self-separating. `--nums` opts into tabular figures for numeric reads (billing/quota) so columns of digits align. */ .row-meta { font-family: var(--f-ui); font-size: var(--fs-note); color: var(--ink-dim); } .row-meta::before { content: "·"; margin-right: var(--sp2); color: var(--ink-faint); } .row-meta--nums { font-variant-numeric: tabular-nums; } /* the TRAILING slot — the actions/kebab edge, pinned to the far side (margin-left:auto so it hugs the trailing edge regardless of how many meta slots precede it). This is the kebab's new HOME: before this primitive, the browse kebab was the ONLY one in the app, an absolutely-placed overlay belonging to no convention. A grid-table row (the pilot) overrides the in-flow pin with absolute placement so the trailing actions claim NO column track and the colhead stays aligned — that override lives with the surface, not here (analogous to how `.browse-card > .row-actions` was already absolute). */ .row-trail { flex: 0 0 auto; margin-left: auto; } /* the trailing-reveal — the single behavior the whole app was missing. On a pointer device the trailing actions rest hidden and surface on row hover / focus-within, so a dense list reads clean until you reach for a row (the comment-card spotlight is the adjacent precedent — hover already means "reveal affordances"). opacity, NOT display, so the slot keeps its width at rest: no reflow on hover, and a grid-table row's columns never twitch. GATED under @media (hover:hover) on purpose: a coarse / no-hover pointer can't hover-reveal, so on touch the trailing actions stay VISIBLE. Ungating this (a plain always-on rule) breaks the touch tier — the design-audit test bites that. */ @media (hover: hover) { .row-trail { opacity: 0; transition: opacity 0.12s ease; } .row:hover .row-trail, .row:focus-within .row-trail { opacity: 1; } } /* opt-in SELECTABLE behaviour — a row that acts as a listbox option. The role/tabindex and the Enter/Space→activate handler (lifted from history-row, the app's one correct keyboard row) are applied in JS by the DEFERRED `.row` TS builder (RFC decision 1); no surface opts in yet (the pilot's project rows carry wireMasterSelect's own roving-tabindex grammar, which this must not fight). This sheet ships the STYLING hooks the future opt-in reads — the pointer affordance + the current/selected mark — so a migrating surface gets the look for free the moment it adds the class. */ .row--selectable { cursor: pointer; } .row--selectable[aria-current="true"], .row--selectable.selected { background: var(--wash); } /* ------------------------------------------------ header The header must have NO intrinsic min-width beyond a phone's width — content that can't shrink is what makes device emulation scale-zoom the whole page. Chrome wraps; labels hide progressively on narrow screens. */ .top { display: flex; align-items: baseline; flex-wrap: wrap; gap: 2px clamp(8px, 2vw, 32px); padding: var(--sp2) clamp(10px, 2vw, 24px); border-bottom: 1px solid var(--line); background: var(--bg-deep); } .top > * { min-width: 0; } /* TOOLS-IA slice 1 — the header menubar button (Edit; File/Transcript later). A quiet desktop-menu label: dim ink at rest, wash + full ink on hover/open, a hairline focus ring. flex:none so it never competes with the crumbtrail's stretch; sits just right of the brand as the first menubar item. */ .menubtn { flex: none; font: inherit; font-size: var(--fs-ui); color: var(--ink-dim); background: none; border: 1px solid transparent; border-radius: 6px; padding: var(--sp1) var(--sp2); cursor: pointer; } .menubtn:hover, .menubtn[aria-expanded="true"] { color: var(--ink); background: var(--wash-soft); } .menubtn:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; } /* EDITOR A11Y item 1a — skip-to-transcript link. Off-screen until focused (the standard bypass-blocks recipe: it must stay reachable by Tab, so it is clipped off-screen, NOT display:none which would drop it from the tab order). On :focus it snaps to a visible chip pinned top-left over the header. Reuses the house focus-ring tokens; the accent fill makes it unmissable when a keyboard user tabs into the editor. */ .skiplink { position: absolute; left: -9999px; top: 0; z-index: 50; padding: var(--sp2) var(--sp3); background: var(--accent); color: var(--bg-deep); border-radius: 0 0 6px 0; font: inherit; text-decoration: none; } .skiplink:focus { left: 0; outline: 2px solid var(--accent); outline-offset: 2px; } /* L3.b — the canvas tab-bar ("tabs = cuts"): the Cut SWITCHER, presented as Google-Sheets/Chrome-style tabs at the TOP of the transcript region (Jesse 2026-06-29). Tabs sit on a hairline baseline; the active cut reads as a filled, top-rounded tab. Painted by mount from cardinality ≥1; [hidden] keeps it out of the flow on the home/single-canvas editor. Token-only. */ .canvastabs { display: flex; min-width: 0; } .canvastabs[hidden] { display: none; } /* the top band — a flex:none row above the scroller (sibling BEFORE .tscroll, so the paper's scroll origin is untouched). PRES-IN-TRANSCRIPT-1: the nav is now a two-column row — the cuts scroll-column (flexible middle) + the presence seats (right-pinned). The nav itself no longer scrolls; each column owns its OWN overflow (below). */ .transcript-header .canvastabs { flex: none; align-items: stretch; gap: var(--sp3); padding: var(--sp2) var(--sp3) 0; border-bottom: 1px solid var(--line); } /* "your cuts" — the flexible middle. Takes the free width, hangs its tabs on the bottom baseline, and scrolls HORIZONTALLY on its own when the cuts overrun (20 cuts scroll here without ever shoving the seats). min-width:0 lets it actually shrink. */ .canvastabs-scroll { flex: 1 1 auto; min-width: 0; display: flex; align-items: flex-end; gap: 2px; overflow-x: auto; scrollbar-width: none; } .canvastabs-scroll::-webkit-scrollbar { display: none; } .version-control { position: relative; flex: none; align-self: center; margin-bottom: var(--sp1); } .crumbtrail .version-control { align-self: center; margin: 0; } .version-control[hidden] { display: none; } .version-trigger { display: inline-flex; align-items: center; gap: var(--sp2); min-height: 30px; padding: 0 var(--sp2); border: 1px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--ink); font: 650 var(--fs-ui)/1 var(--f-ui); cursor: pointer; } .version-trigger:hover, .version-trigger[aria-expanded="true"] { border-color: color-mix(in oklab, var(--accent) 55%, var(--line)); background: var(--accent-soft); } .version-trigger:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .version-popover { position: absolute; z-index: 40; inset: calc(100% + var(--sp2)) auto auto 0; width: min(25rem, 78vw); max-height: min(32rem, 70vh); overflow-y: auto; padding: var(--sp2); border: 1px solid var(--line); border-radius: 10px; background: var(--surface); box-shadow: var(--lift-1); } .version-popover[hidden] { display: none; } .version-popover-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp3); padding: var(--sp2) var(--sp2) var(--sp3); color: var(--ink); font-family: var(--f-ui); } .version-popover-head > span { color: var(--ink-dim); font-size: var(--fs-chip); } .version-error { margin: 0 var(--sp2) var(--sp2); padding: var(--sp2); border: 1px solid color-mix(in oklab, var(--strike) 48%, var(--line)); border-radius: 7px; background: color-mix(in oklab, var(--strike) 10%, transparent); color: var(--strike); font: var(--fs-chip)/1.35 var(--f-ui); } .version-row-shell { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; border-radius: 7px; } .version-row-shell:hover { background: var(--wash-soft); } .version-row-shell.active { background: var(--accent-soft); } .version-row { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: var(--sp3); width: 100%; min-height: 52px; padding: var(--sp2); border: 0; border-radius: 7px; background: transparent; color: var(--ink); text-align: left; cursor: pointer; } .version-row:hover { background: transparent; } .version-row:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; } .version-row:disabled { opacity: var(--set-aside-opacity); cursor: wait; } .version-ordinal { display: inline-flex; align-items: center; justify-content: center; min-width: 2.25rem; min-height: 1.6rem; border: 1px solid var(--line); border-radius: 999px; color: var(--ink-dim); font: 650 var(--fs-chip)/1 var(--f-ui); font-variant-numeric: tabular-nums; } .version-row-shell.active .version-ordinal { border-color: color-mix(in oklab, var(--accent) 50%, var(--line)); color: var(--accent); } .version-copy { display: grid; gap: 2px; min-width: 0; } .version-copy > strong { overflow: hidden; color: var(--ink); font: 600 var(--fs-ui)/1.25 var(--f-ui); text-overflow: ellipsis; white-space: nowrap; } .version-copy > span { color: var(--ink-dim); font: var(--fs-chip)/1.25 var(--f-ui); } .version-actions { display: inline-grid; place-items: center; width: 34px; height: 34px; margin-inline-end: var(--sp1); border: 1px solid transparent; border-radius: 7px; background: transparent; color: var(--ink-dim); font: 700 var(--fs-chip)/1 var(--f-ui); cursor: pointer; opacity: 0; transition: opacity 120ms ease-out, color 120ms ease-out, background 120ms ease-out; } .version-row-shell:hover .version-actions, .version-actions:focus-visible, .version-actions[aria-expanded="true"] { opacity: 1; } .version-actions:hover { background: var(--surface-raised); color: var(--ink); } .version-actions:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; } .version-actions:disabled { cursor: wait; opacity: var(--set-aside-opacity); } .canvastabs .tab { font: inherit; color: var(--ink-dim); background: none; border: 1px solid transparent; border-bottom: none; border-radius: 7px 7px 0 0; padding: var(--sp1) var(--sp3); cursor: pointer; max-width: 20ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .canvastabs .tab:hover { color: var(--ink); background: var(--wash-soft); } /* the active cut — a filled, named tab (Sheets/Chrome): --accent text on the soft --accent fill, a hairline top+sides, bottom open onto the page so it reads as the foreground tab connected to the content below. */ .canvastabs .tab.active { color: var(--accent); font-weight: 600; background: var(--accent-soft); border-color: var(--line); } .canvastabs .tab:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; } /* "+ New cut" (L3.c-1): a quiet create affordance after the tabs (Chrome's "+"). */ .canvastabs .newcut { font: inherit; color: var(--ink-dim); background: none; border: none; border-radius: 6px; padding: var(--sp1) var(--sp2); margin-bottom: 2px; cursor: pointer; align-self: center; } .canvastabs .newcut:hover { color: var(--ink); background: var(--wash-soft); } .canvastabs .newcut:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; } .canvastabs .newcut:disabled { opacity: 0.5; cursor: default; } /* L3.c-2: the inline rename input that replaces the active tab's label on dblclick. Sized to the tab so the bar doesn't reflow mid-edit; token-only, .tab precedent. */ .canvastabs .tab .tab-rename { font: inherit; color: var(--ink); background: none; border: none; padding: 0; margin: 0; width: 14ch; max-width: 14ch; } .canvastabs .tab .tab-rename:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; } /* L3.d-2: a tab and its delete × ride in a slot so the × groups with its own tab (the bar's gap separates slots; this tighter gap separates a tab from its ×). */ .canvastabs .tabslot { display: inline-flex; align-items: center; gap: 2px; } /* PRES-IN-TABS-1 (b): the per-cut seat slot — the peers editing THIS cut, seated INSIDE its tab (◆ Jesse: "expand how big a tab is and plop their icons inside"). Empty by default (zero width, no gap eaten); the beat fills it and the tab visibly widens. The discs here shrink a touch from the fallback cluster's 20px so a crowded cut stays a compact stripe on the tab. Sits between the tab and its × in the slot. */ .canvastabs .tab-seats { display: inline-flex; align-items: center; gap: 2px; } .canvastabs .tab-seats:not(:empty) { margin-left: 3px; } .canvastabs .tab-seats .seat { width: 17px; height: 17px; font-size: 8px; } .canvastabs .tab-seats .seat.overflow { font-size: 7px; } /* The per-tab delete ×, painted only at >1 (never the sole cut). Arms on first click (× → ✓?), commits on the second; token-only, the .tab/.newcut precedent. */ .canvastabs .tab-close { font: inherit; color: var(--ink-dim); background: none; border: none; padding: 0 2px; cursor: pointer; line-height: 1; } .canvastabs .tab-close:hover { color: var(--ink); } .canvastabs .tab-close.confirming { color: var(--accent); } .canvastabs .tab-close:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; } @media (max-width: 1100px) { .brand .tag { display: none; } } @media (max-width: 900px) { .clock.dim { display: none; } } @media (max-width: 700px) { .filename { display: none; } } @media (max-width: 700px) { .transcript-header .canvastabs { gap: var(--sp2); padding-inline: var(--sp2); } .version-popover { position: fixed; inset: auto var(--sp2) var(--sp2); width: auto; max-height: min(72vh, 34rem); border-radius: 14px; } .version-row { min-height: 52px; } .version-actions { width: 44px; height: 44px; opacity: 1; } } /* phone tier (MOBILE-3a) — the last step of the progressive-hide ladder above. At phone width the header's fixed-size controls (mode toggle · Share · avatar) plus the breadcrumb plus the save-state no longer share one 380px row: the shrinkable .crumbtrail (flex:1) collapses below its content and its nowrap legs overflow, so the .syncstatus label paints OVER .crumb-proj ("Sav[T]ed"). The two lowest-priority LABELS give way — the routine save-state reassurance (the actionable .warn state STAYS, it borrows the strike rust and must stay seen) and the project crumb (the ‹ back button, primary nav, stays). No forked layout, no JS — the same display:none progressive-hide as .filename above. */ @media (max-width: 430px) { .syncstatus:not(.warn) { display: none; } .crumb-proj, .crumb-slash { display: none; } } .brand { font-family: var(--f-brand); font-weight: 600; font-size: var(--fs-brand); letter-spacing: 0.01em; /* the wordmark is an (logo = home); neutralize the default anchor chrome so it reads as the brand, not a link, but still invites a click */ color: inherit; text-decoration: none; cursor: pointer; } /* the editor wordmark is an injected into #route-page, so the broad `.route-page a { color:--accent }` (specificity 0,1,1) out-paints `.brand`'s `color:inherit` (0,1,0) and LEAKS interaction-teal onto the brand. Reclaim it to the cream --ink with a descendant selector that out-specifies that rule — the exact "brand is never accent" temperature split the browser .app-header-brand already carries (§3). Route/profile-invariant: .brand only ever lives inside #route-page. */ .route-page .brand, .route-page .brand .brand-mark { color: var(--ink); } .brand .tag { font-family: var(--f-ui); font-weight: 400; font-size: var(--fs-note); color: var(--ink-dim); margin-left: var(--sp3); text-transform: uppercase; letter-spacing: 0.14em; } /* EDITOR-CRUMB — the header's enclosing-context trail: ‹ Project / filename. Frame-style STRATEGIC truncation: both text crumbs ellipsize, but the PROJECT gives way 8× faster (flex-shrink 8 vs 1) so the leaf stays readable down to narrow widths — the middle collapses first, exactly Frame's `3BPS2 / … / file` behavior with one middle segment. The nav owns .filename's old flex:1 stretch; on the local-file pair the back/project/slash legs are [hidden] and this is byte-identical to the old filename-only header. */ .crumbtrail { flex: 1; min-width: 0; display: flex; align-items: center; gap: var(--sp2); font-size: var(--fs-ui); } .crumb-back { flex: none; display: inline-flex; align-items: center; justify-content: center; inline-size: 22px; block-size: 22px; border-radius: 5px; color: var(--ink-dim); text-decoration: none; font-size: var(--fs-clock); line-height: 1; cursor: pointer; } .crumb-back:hover { color: var(--accent); background: var(--wash); } .crumb-back:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; } .crumb-proj { flex: 0 8 auto; min-width: 4ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink-dim); text-decoration: none; } .crumb-proj:hover { color: var(--accent); text-decoration: underline; } .crumb-proj:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; } .crumb-slash { flex: none; color: var(--ink-faint); user-select: none; } .filename { flex: 0 1 auto; min-width: 0; color: var(--ink-faint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* save-state indicator (main.ts syncStatusLabel) — flex:none so it never competes with .filename's ellipsis for the row's stretch space; .warn (offline/error) borrows the same rust the strike-through uses (--stricken) so a stalled sync reads as the SAME "something needs you" color, not a new one. */ .syncstatus { flex: none; font-size: var(--fs-ui); white-space: nowrap; } .syncstatus.warn { color: var(--stricken); } /* the CUTS/TRT readout follows your attention (Jesse, CHAPTERS note 4): WATCHING ⇒ it rides the picture (one quiet line above the video, ≈20px); EDITING ⇒ workspace.ts reparents it to band the transcript's top. The single node moves; these base rules ride it to either home. */ .clocks { display: flex; gap: var(--sp4); align-items: baseline; padding: 0 2px var(--sp2); } .clocks .big { font-size: inherit; } /* TRT sits level with cut/source (Jesse) — accent alone carries the emphasis */ .clocks .stricken { color: var(--stricken); } /* the readout BAND above the video (edit mode) — over the picture it measures, not over the transcript (Jesse 2026-06-29: the Cut switcher took the transcript's top band). A direct flex:none child of .monitor, so it's the row above the
form stays untouched by the gutter's none above. */ button.suggestion-dot { pointer-events: auto; cursor: pointer; } button.suggestion-dot:hover, button.suggestion-dot:focus-visible { opacity: 1; } /* a COMMENT dot rides the SAME rail/gutter/geometry (sin #5) and differs only by skin: a hollow RING vs the suggestion's solid disc — structurally distinct at a glance without committing a final hue (feel-banked, neutral — never the accent). Its click opens the dock thread, so it's always the live