/* * This is a manifest file that'll be compiled into application.css. * * With Propshaft, assets are served efficiently without preprocessing steps. You can still include * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard * cascading order, meaning styles declared later in the document or manifest will override earlier ones, * depending on specificity. * * Consider organizing styles into separate files for maintainability. */ /* ============================================================ THE ONE FOCUS RING (R3 / D-20) * ADDED 2026-08-25 (plan 24-06 task 1). The rule below is the app's ONLY focus-ring declaration * in hand-authored CSS, and `--focus-ring` is the ONLY source of its colour (D-34: the ring * colour is a TOKEN and is changed through the token, never through a second selector). * * It replaces TWO duplicates that had already begun to drift apart: * app/assets/stylesheets/journey.css:88-94 the journey-scoped ring (class + pseudo-class) * app/views/layouts/journey.html.erb:44 an inline copy of the same rule * Both are retired; the §13 header in journey.css now points here. * * The reason comment that travelled with the retired journey rule, kept VERBATIM (D-70, * never-lose) because it records why this rule sets no radius — the one number in it is * rewritten because the numbers are what changed, and the retired sentence is recorded in * 24-06-SUMMARY.md: * „No border-radius override: the outline follows each element's own radius, so component * radii (inputs r-input=8, pills, cards) win. A flat override here (spec one class + one * pseudo-class) beat the one-class component rules and squared off focused inputs — see the * welcome-input fix." * [SUPERSEDED 2026-08-25 — the rule it annotated was journey-scoped and scored one class plus a * pseudo-class; the rule below is the bare pseudo-class alone and is app-wide (D-20). The * no-radius reason is unchanged and still load-bearing.] * * WHY THE BARE PSEUDO-CLASS IS ENOUGH, and why it carries no priority flag (D-25): the compiled * Tailwind build is `@layer`-wrapped and this sheet is UNLAYERED, and an unlayered author rule * outranks every layered one regardless of specificity. So this bare selector beats Tailwind's * compiled `focus:outline-none` utility on keyboard focus. Do not add a priority flag and do not * raise this selector to „fix" a problem that does not exist. * * REACH, named honestly (an unnamed gap is how „app-wide" becomes a false claim). This sheet is * expanded by `stylesheet_link_tag :app` in layouts/{application,project,shared,pdf} and linked * by name in layouts/journey (D-18, plan 24-04). THREE gaps, all named: * app/views/layouts/book.html.erb — print/preview output surface, self-contained styles * app/views/layouts/mailer.html.erb — email output surface, self-contained styles * Neither links a stylesheet at all, and neither is an interactive curator surface, so * neither has keyboard focus to indicate. * THE TRIX TOOLBAR — a REAL gap, PRE-EXISTING, deferred with its reason. The vendored * app/assets/stylesheets/actiontext.css sets `outline: none` on the editor's own controls at * :169, :251, :274 and :289 with selectors like `trix-editor .trix-button--remove`, which * score (0,1,1) and therefore BEAT this rule's (0,1,0). The only surface that renders a * is app/views/chapters/edit.html.erb:12, which has never had a focus ring: * it lives in layouts/project, and the ring this rule replaces was `.journey`-scoped, so the * toolbar was ringless before this plan too. It is therefore NOT a regression and NOT this * plan's to fix — closing it needs a FOURTH component rule, and the R3 gate deliberately * freezes that set at three (D-85). Logged in the phase's deferred-items.md. * Found by the 24-06 Codex diff review (P1-1) and verified against the cited lines. * * [SUPERSEDED 2026-09-10 — 24-37 / C31-12; kept verbatim, never-lose: The three component focus * rules that FORWARD focus from a visually hidden input or supply geometry survive on purpose and * read this same token — see test/integration/focus_ring_css_gate_test.rb, which names all three * with their reasons and fails on a fourth.] * The active registry still has those three original rules, plus the exact approved modal restorer * and the recorder photo-label forwarder. The gate names all five and refuses every unknown sixth; * every ring-producing forwarder reads this same token rather than declaring another colour source. */ :root { /* THE FIRST OF THE FIVE CONSEQUENT PICKS Q73 left to Claude („the exact focus-ring colour"), decided 2026-08-25 in plan 24-06 task 2 step 6 and recorded with its measurement in 24-06-SUMMARY.md. It is the ruled grammar's own app accent — the same value `.journey`'s `--terracotta` alias now carries, and the same one the board's controls already wear, so the merged app rings in ONE colour. Task 1 landed this token holding the LOSER accent on purpose (R23: no paint before the ruling); this line is where it moves. `--color-indigo-600` reaches every layout that can show a focus ring: `stylesheet_link_tag :app` expands to the compiled Tailwind build as well as this file (verified at this HEAD), and layouts/journey links both by name. No fallback value is written here — a second colour source is exactly what D-34 forbids. WHY 500 AND NOT 600, the ruled accent itself. Measured on the real repainted page, every number canvas-rasterised off painted bytes (D-43), against the two extremes a journey ring can land on — the darkest control fill (--ink, the active filter pill) and the lightest ground (--card / --paper). Floor 3.0, the non-text indicator floor: indigo-700 dark 2.19 light 8.09/7.74 fails on dark indigo-600 dark 2.75 light 6.46/6.19 fails on dark ← the raw ruled accent indigo-500 dark 3.88 light 4.58/4.38 CLEARS BOTH ← shipped indigo-400 dark 5.67 light 3.13/2.99 fails on light 500 is the ONLY step in the winner's own family that clears the floor at both ends. The plan said „darken one step" if the measurement failed; the measurement says the failure is against a DARK ground, where darkening makes it worse — so the fix went one step LIGHTER. The binding constraint is „clears 3.0 on every ground it can land on", not a direction. `appwide-a11y-just-fix` („just fix them, no need to get my permission") authorises this without asking, and R23 makes the focus colour a consequent pick that is Claude's. The founder is told anyway, as an informational note (Q78) on the phase gates page: his ring is one step lighter than the accent he ruled, and this is why. */ --focus-ring: var(--color-indigo-500); } :focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; } /* Reduced-motion: collapse the violet „läuft" pulse (activity draft rows / task proposals) and any * other animate-pulse when the user asks for reduced motion. Plain CSS (prebuilt Tailwind is not * rebuilt here); !important wins over tailwind.css regardless of link order. */ @media (prefers-reduced-motion: reduce) { .animate-pulse { animation: none !important; } /* 999.1-15 (§9.3): neutralize the answer/inspect right-sheet .28s slide-in. modal_controller sets * `transition: transform .28s ease` inline on the sheet (which carries data-modal-sheet); * !important beats that inline transition (Ponytail round-2 cut 1 + Codex round-2 P2-14). Propshaft * serves this file — no Tailwind rebuild needed. */ [data-modal-sheet] { transition: none !important; } }