/* ========================================================================== Fulcrium — portrait redesign (PREVIEW) — SHARED BASE (Task 25 split). Loaded after css/base.css (which provides @font-face for Fredoka/Nunito, the reset, :focus-visible, and the reduced-motion kill-switch). Self-contained token set below (approved values — do not substitute). ONLY the shared frame / viewport sizing, design tokens, typography, and shared layout primitives live here (mirrors the split, frozen JS engine). Screen- specific styles live in css/preview/screen-feelings.css and css/preview/screen-thoughts.css. FROZEN after Task 25: treat like the live app — byte-for-byte unchanged, proven with git diff, unless a task explicitly authorises touching it. ⚠ LOAD-BEARING — FRAME HEIGHT CASCADE (#app.frame, body.rd): The `height:100vh;height:100svh;height:100dvh` cascade below is load-bearing. The plain `vh` fallback MUST come FIRST: on any browser/context where svh/dvh are unavailable (older in-app WebViews), removing it collapses #app to content height, which starves the flex bubble field to 0px and hides every card (Tasks 23 + 25). Never drop the `vh` (or `%`) base. docs/tests/preview-smoke.mjs statically guards this and renders the fallback path. ========================================================================== */ :root{ /* ---- Colors (approved) ---- */ --paper:#EDF1F3; --ink:#3D4852; --ink-soft:#6B7680; --card:#FFFFFF; --chain:#868E99; --chain-edge:#656E7A; --sage:#A9D8B8; --on-sage:#2E5B41; --sage-shadow:#8DC7A0; --sky:#AED4EE; --sun:#F6E3A0; --blush:#F1C7BB; /* muted bubble fills */ --fill-0:#BFE0CB; --fill-1:#B9D8EF; --fill-2:#F2E2A7; --fill-3:#EFCFC2; --fill-4:#D7D4EC; --fill-5:#C7E6DA; /* ---- Type ---- */ --font-q:'Fredoka',system-ui,-apple-system,sans-serif; --font-b:'Nunito',system-ui,-apple-system,sans-serif; --fs-question:clamp(22px,6vw,28px); --fs-body:clamp(15px,4vw,18px); --fs-label:11px; /* labels: 800 uppercase, never below 11px */ /* ---- Spacing (8px base, calm/airy) ---- */ --s1:8px; --s2:16px; --s3:24px; --s4:32px; --s5:40px; /* ---- Radii ---- */ --r-card:22px; --r-chip:15px; --r-btn:22px; --tap:44px; /* R10-glyph-centring: OPTICAL CENTRING PADDING for a text glyph flex-centred in a round control. Flex centring SPLITS padding, so this lifts the ink by about half its value; measured to 0 residual on all three close glyphs at all three viewports. Holds a padding length, not the correction. */ --pad-glyph-optical:0.27273em; /* ---- Motion ---- */ --ease-standard:cubic-bezier(.4,0,.2,1); --ease-settle:cubic-bezier(.22,1,.36,1); --ease-overshoot:cubic-bezier(.34,1.56,.64,1); --dur-fast:140ms; --dur-screen:360ms; } /* ---- Frame ------------------------------------------------------------- */ body.rd{background:var(--paper);color:var(--ink);font-family:var(--font-b); margin:0;min-height:100vh;min-height:100svh;overscroll-behavior:none;-webkit-font-smoothing:antialiased;} /* ========================================================================== TASK 110 RULING 2 — THE SCOPED GROUND FADE. `body.rd` ABOVE GAINS NOTHING. Safari tints its chrome strips from the page's `background-color` (Task 107), so when a VEIL fades in over a body whose colour never moves, the strip holds the old value for the whole fade and jumps at the end. The cure is to let the body's colour travel with it — but the body's colour is ALSO what changes on a screen change and on a room change, and those want different speeds. Task 110's first shape put the transition on `body.rd` at large and was MEASURED to lag navigation badly: on splash->event the ground was only 33% of the way at 360ms, when the shell's own --dur-screen content transition had already finished, and did not arrive until 1200ms — 3.3x. That measurement stopped the task, and this scoped form is the owner's ruling on it. ONE CLASS, ONE DECLARATION, DURATION PARAMETERISED. `--ground-fade` is set by whoever adds the class, at the moment they add it, and each setter READS ITS OWN DURATION off the element that is actually animating rather than typing a number: · js/preview/veil.js — the raising veil's own `transition-duration` (1200ms) · js/preview/screen-howitworks.js — the incoming room's own (450ms) The class is removed when the veil resolves, when the room swap commits, and — belt and braces — on every screen deactivate (js/preview/app.js), so it can never survive into a navigation. NAVIGATION IS THEREFORE UNTOUCHED: `body.rd` carries no `transition` at all, and the class is absent while screens change. The 0ms fallback matters: if a setter ever fails to write `--ground-fade`, the transition resolves to no transition — the anchor's behaviour — rather than an invalid declaration. REDUCED MOTION needs nothing here: css/base.css's global guard is `*{transition-duration: .001ms !important}`, which reaches this rule by construction (asserted, not assumed). ========================================================================== */ body.rd.ground-fading{ transition:background-color var(--ground-fade,0ms) var(--ease-standard); } /* ========================================================================== THE GROUND REACHES THE EDGES — TASK 107, WHICH SUPERSEDES TASKS 104, 105 AND 106. OWNER FINDING, measured on device 2026-08-05 with two probe pages identical but for ONE property: PAGE A background-color: rgba(0,0,0,0) top MATCHES, BOTTOM BANDS PAGE B background-color: #EDEAF4 top BANDS, bottom MATCHES SAFARI PAINTS ITS OWN CHROME STRIPS — the status-bar area and the toolbar backdrop — FROM THE PAGE'S `background-color`. Every gradient ground is declared with the `background` SHORTHAND, which RESETS `background-color` to `transparent`. Safari then has nothing to sample and falls back to WHITE. That is the band, and it was never inside the page at all. Break, the Glance and the other flat screens never showed it because `body.rd` above ships a flat `--paper` colour, which already gives Safari something to use. THE FIX LIVES IN THE SCREEN SHEETS, not here: each ground declaration gains ONE `background-color`, the MIDPOINT of that ground's own first and last stop, so the single colour Safari can sample splits the difference between the page's two edges. The derivation rule is written beside each value. TASK 106'S `body.rd[data-screen]{background-size:100% 100lvh}` RULE IS REMOVED HERE, AS SUPERSEDED. Its premise — that the paint ran out below the root's box — was DISPROVEN on device: `clientHeight` equals `innerHeight` in the app's own non-scrolling geometry (735 == 735), so there is no region beyond the root's box for a repeat to reach. The rule's only remaining effect was to size the image to the LARGE viewport inside a SMALL-viewport box, which landed the visible bottom edge part-way up the ramp instead of on the floor. With it gone every ground fills the root box exactly AT ANY SCREEN SIZE — top edge the first stop, bottom edge the last — which is what makes one derived midpoint correct on a phone and on a tablet without a single device constant. NO GROUND VALUE CHANGES. Not one colour, token or stop moves. The gradient is opaque and covers its whole box, so the colour behind it is invisible from inside the app and can move no contrast pair. ========================================================================== */ #app.frame{ display:flex;flex-direction:column;gap:var(--s2); /* Fill the viewport height. Progressive fallback so the frame NEVER collapses to content height (which starved the flex field to 0 — Tasks 23 + 25): 100vh is the universal base (works even where svh/dvh are unsupported, e.g. older in-app webviews); svh/dvh then refine it on modern mobile so there's no jump when the browser chrome shows/hides. Last valid declaration wins per browser. The plain vh MUST stay first — see the LOAD-BEARING note at the top of this file. */ height:100vh;height:100svh;height:100dvh; max-width:540px;margin:0 auto; padding:calc(env(safe-area-inset-top) + var(--s1)) calc(env(safe-area-inset-right) + var(--s2)) calc(env(safe-area-inset-bottom) + var(--s2)) calc(env(safe-area-inset-left) + var(--s2)); } /* When the on-screen keyboard is open (body.kbd, --kbd = keyboard height set by JS from visualViewport): the frame keeps its full height so the bubble field never reflows. The field FADES and its physics FREEZE (JS), and the thumb zone lifts to sit just above the keyboard. */ body.kbd .bubblefield{opacity:.28;pointer-events:none;transition:opacity var(--dur-screen) var(--ease-standard);} .bubblefield{transition:opacity var(--dur-screen) var(--ease-standard);} body.kbd .thumb{transform:translateY(calc(-1 * var(--kbd,0px)));} .thumb{transition:transform var(--dur-screen) var(--ease-settle);} /* ---- screen router: exactly one screen visible; it fills below the topbar --- */ .screen{display:flex;flex-direction:column;gap:var(--s2);flex:1 1 auto;min-height:0;} .screen[hidden]{display:none;} /* ---- (a) top row ------------------------------------------------------- */ .topbar{display:flex;align-items:center;gap:var(--s2);min-height:var(--tap);} .iconbtn{width:var(--tap);height:var(--tap);border-radius:50%;background:var(--card); display:flex;align-items:center;justify-content:center;color:var(--ink); box-shadow:0 2px 6px rgba(61,72,82,.10);flex:0 0 auto;} .iconbtn .chev{font-size:26px;line-height:1;margin-top:-2px;} .iconbtn:active{transform:scale(.94);} /* ADVANCE-BUTTON CHEVRON (Task 66): the trailing "›" (U+203A) on every destination-named advance button — the forward mirror of the back control's "‹" above. It is part of the word (ink inherited from the button, no color of its own; weight inherited), rendered ~1.15× and optically raised ~1px, with a CSS gap so the markup carries NO space character. Decorative only (the span is aria-hidden); the label already names the destination. This is the affordance half of the destination-naming ruling. SIZING IS A LAYOUT-NEUTRAL SCALE, NOT font-size: a literal `font-size:1.15em` glyph is taller than the button's text line and grew every advance button ~3px, which shifted the Urges footer up and drove the nudge card onto the user's own input text (regressions-urges, keyboard-up @360). The task's mandate is geometry BYTE-IDENTICAL, so the 1.15× is delivered via `transform: scale(1.15)` (visual-only, no line- box growth) — pixel-equivalent to the mock's appearance while the button height stays at its pre-chevron baseline. `scale` first, then `translateY(-1px)`, so the raise is a true 1px in final pixels. */ .adv-chev{margin-left:7px;font-size:1em;font-weight:inherit;transform:translateY(-1px) scale(1.15);display:inline-block;} .stepname{flex:1;font-family:var(--font-q);font-weight:600;font-size:clamp(15px,4.4vw,18px); color:var(--ink);} /* chain-progress spine: small chain-LINK shapes, filled = done, hollow = to-do */ .spine{display:flex;align-items:center;gap:5px;flex:0 0 auto;} .spine .link{width:11px;height:16px;border-radius:6px;border:2px solid var(--chain); background:transparent;flex:0 0 auto;} .spine .link.done{background:var(--chain);border-color:var(--chain-edge);} .spine .link.here{border-color:var(--chain-edge);box-shadow:0 0 0 2px rgba(134,142,153,.28);} /* ---- (b) question + helper -------------------------------------------- */ .ask{display:flex;flex-direction:column;gap:6px;} .question{font-family:var(--font-q);font-weight:600;font-size:var(--fs-question); color:var(--ink);margin:0;line-height:1.15;} .helper{font-size:clamp(13px,3.4vw,15px);color:var(--ink-soft);margin:0;font-weight:600;line-height:1.4;} /* ---- (c) working zone: floating bubble field (shared container) -------- */ .field-zone{position:relative;flex:1 1 auto;min-height:0;display:flex;} .bubblefield{position:relative;flex:1 1 auto;min-height:0;border-radius:var(--r-card); background:rgba(255,255,255,.42);border:2px dashed rgba(134,142,153,.28);overflow:hidden;} /* Shared bubble/card positioning: outer = position/size via translate + width/ height; the fade-in on spawn. The visible inner shapes are screen-specific (circles in screen-feelings.css, lens rectangles in screen-thoughts.css). */ .fbub{position:absolute;cursor:pointer;will-change:transform,opacity;opacity:1; transition:opacity .26s var(--ease-standard);} .fbub.in{opacity:0;} .fbub.out{opacity:0;} /* Feelings: cleared sibling set fades out (not chipped) */ /* ---- (d) selected chips (shared container + base chip) ----------------- */ .selected-zone{display:flex;flex-direction:column;gap:6px;flex:0 0 auto;} .zonelabel{font-weight:800;font-size:var(--fs-label);text-transform:uppercase;letter-spacing:.7px;color:var(--ink-soft);} .chips{display:flex;flex-wrap:wrap;gap:var(--s1);} .chip{display:inline-flex;align-items:center;gap:2px;background:var(--card);border-radius:var(--r-chip); padding:7px 4px 7px 13px;font-size:14px;font-weight:700;color:var(--ink);max-width:100%; box-shadow:0 2px 6px rgba(61,72,82,.10);animation:rd-chipin .3s var(--ease-overshoot);} @keyframes rd-chipin{0%{transform:scale(.6);opacity:0}100%{transform:scale(1);opacity:1}} .chip .x{flex:0 0 auto;width:var(--tap);height:var(--tap);min-width:var(--tap);min-height:var(--tap); margin:-11px -8px -11px 2px;box-sizing:border-box; display:inline-flex;align-items:center;justify-content:center;color:var(--ink-soft);font-size:19px;font-weight:800;} .chip .x:active{transform:scale(.9);} .empty-hint{margin:2px 0 0;font-size:13px;color:var(--ink-soft);font-weight:600;} .selected-zone.has-items .empty-hint{display:none;} /* ---- (e) thumb zone (shared: zone + primary Next button) --------------- */ .thumb{display:flex;flex-direction:column;gap:var(--s1);flex:0 0 auto;} .primary{width:100%;min-height:var(--tap);padding:14px;border-radius:var(--r-btn); color:var(--on-sage);font-family:var(--font-q);font-weight:600; font-size:clamp(16px,4.6vw,19px); transition:transform var(--dur-fast) var(--ease-standard),box-shadow var(--dur-fast) var(--ease-standard);} .primary:active{transform:translateY(3px);box-shadow:0 0 0 var(--sage-shadow);} /* ---- toast ------------------------------------------------------------- ON THE REGISTER EVERYWHERE (Task R10-gate-and-toast, owner ruling O-3: "Restyle the one shared rule to the register, retire the now-redundant Repair override, and update the test that pins those exact bytes"). WHAT CHANGED AND WHY. This rule was the last pre-register surface a user could still meet: a dark slate pill built from literals (#fff ink, 22px radius, a raw black shadow, 13px type) with --ink -- an INK token -- doing duty as a FILL. Two screens had already bought their way out of it with scoped overrides that restated the same six register tokens. The recipe now lives HERE, once, so every summoner inherits it: the Feelings, Thoughts and Sensations cap notices, both terminus placeholders, and Repair's save-failure message. NO VERDICT COLOUR IS BREACHED, and the reasoning is inherited rather than re-decided: the ban is on colours that grade THE USER. A toast reports a ceiling the app enforces or a failure the app owns, on the app's behalf, and its ink is R6's already-blessed --ink-nudge. IT STILL CARRIES NO CONTROL. Zero children, pointer-events:none: the retry is never the pill's, it is the terminus cluster's own button, hit-testable straight through. The design of record draws a "Try again" inside the toast; the owner was told at R9 that the shipped element deliberately has none, and did not object. That stands. GEOMETRY IS UNTOUCHED: position, safe-area bottom, the entrance transform, padding, z-index and the opacity mechanics are byte-identical, and `.toast.show` is untouched. Screens that need their OWN geometry still scope it (Repair lifts the pill clear of its terminus cluster). --------- */ .toast{position:fixed;left:50%;bottom:calc(env(safe-area-inset-bottom) + 16px); transform:translateX(-50%) translateY(40px);background:var(--fill-toast);color:var(--ink-nudge); padding:11px 20px;border-radius:var(--radius-toast);font-family:var(--font-body);font-weight:700; font-size:var(--type-control);opacity:0; transition:opacity .3s var(--ease-standard),transform .3s var(--ease-standard); z-index:80;pointer-events:none;box-shadow:var(--shadow-toast);} .toast.show{opacity:1;transform:translateX(-50%) translateY(0);} /* ---- screen enter transition ------------------------------------------ */ .ask,.field-zone,.selected-zone{animation:rd-enter var(--dur-screen) var(--ease-settle) both;} @keyframes rd-enter{0%{opacity:0;transform:translateY(10px)}100%{opacity:1;transform:none}} /* ---- rotate gate (portrait is primary) --------------------------------- ON THE REGISTER (Task R10-gate-and-toast, owner rulings O-1, O-2, O-7). THE GROUND IS A FLAT LITERAL, AND THAT IS A RULING, NOT AN OVERSIGHT. In landscape this gate IS the page -- full bleed, nothing behind it -- and a gradient page cannot hand Safari one `background-color` that matches both of its ends (Tasks 107-109, owner-ruled on device). So the drawn ramp yields one flat value. WHICH value is owner ruling O-7: "Lighten the ground to #F6EDD9 - the ramp's middle stop, and the exact sand the splash already ships." The design draws radial-gradient(120% 92% at 50% 6%,#FBF7EE 0%,#F6EDD9 46%,#EADFC5 100%), and the RECORDED derivation (screen-splash.css, Task 108) is a ground's own LAST stop -- here #EADFC5. THE OWNER RULED AGAINST THAT DERIVATION FOR THIS ONE SCREEN, on measurement: every register grey for secondary text falls under the 4.5 floor on #EADFC5 (the two standing precedents read 4.29 and 4.23, and the design's own third-line grey reads 3.44), while on #F6EDD9 the design's own --ink-tagline clears at 4.81. The departure is deliberate, is recorded in docs/STATE.md, and costs one shade of depth against the mockup's edge. NO TOKEN HOLDS THIS AS A GROUND. --fill-sheet-floor carries the same six hex digits, but its family is a SHEET fill, not a ground, and the register is consumed BY FAMILY and never by value -- so this ships as a commented literal, exactly as the splash and skills flats do. Preview.Ground is not involved. THE GLYPH is an authored SVG in app/redesign.html (O-1), not an emoji. It keeps this rule's `.ph` class so rd-tilt and its reduced-motion park transfer unchanged; `font-size` is gone from that rule because an SVG does not read it. THE THIRD LINE is owner copy (O-2) and is styled as the sub-line. ------- */ #rotate-portrait{position:fixed;inset:0;z-index:120;display:none;flex-direction:column; align-items:center;justify-content:center;gap:14px;text-align:center;padding:24px; background:#F6EDD9;color:var(--ink);} #rotate-portrait .ph{animation:rd-tilt 2.4s ease-in-out infinite;} #rotate-portrait h2{font-family:var(--font-display);font-weight:400;font-size:var(--type-room); line-height:1.1;margin:0;color:var(--ink-wordmark);text-shadow:var(--emboss-title); -webkit-text-stroke:var(--emboss-stroke) currentColor;} #rotate-portrait .rotate-sub{font-family:var(--font-body);font-weight:600; font-size:var(--type-body);line-height:1.45;margin:0;color:var(--ink-tagline);} #rotate-portrait .rotate-third{font-family:var(--font-body);font-weight:600; font-size:var(--type-meta);line-height:1.4;margin:2px 0 0;color:var(--ink-tagline);} @keyframes rd-tilt{0%,100%{transform:rotate(0)}50%{transform:rotate(-84deg)}} @media (orientation:landscape){ #rotate-portrait{display:flex;} #app{display:none;} /* R15-sweep: the line above is outranked by `#app.frame{display:flex}` (0,1,1) — a media query adds no specificity, so the hide never took effect and 1 control on the first-run splash (4 on the returning one) stayed keyboard-reachable behind an opaque gate. This selector matches the shipped markup `
` at (0,2,1) and wins. ADDED, never substituted: `regressions-repair.mjs`'s R9-A1 row asserts base.css has LOST NOTHING since R9's anchor, so the original line stays exactly where it was. */ #app.frame{display:none;} } /* ============================================================================ THE REGISTER - token layer. One light, fixed above and slightly in front: every ground, tile, key and well below is lit from 50% -12%. Consume these; never re-derive them, and never hardcode a value a token holds. ========================================================================== */ :root{ /* --- the light. Every ground shares this geometry; that is the register. */ --light-origin: 130% 82% at 50% -12%; --light-wash: rgba(255,255,255,.42) 0%,rgba(255,255,255,0) 58%; /* --- grounds. Grounds turn; tiles and light do not. ------------------- */ --ground-cool: radial-gradient(130% 82% at 50% -12%,#FFFFFF 0%,#FDFCFE 40%,#EDEAF4 100%); --ground-warm: radial-gradient(130% 82% at 50% -12%,#FEFCF7 0%,#FBF7EE 42%,#F6EDD9 100%); --ground-dawn: radial-gradient(ellipse 140% 55% at 50% 104%,rgba(243,201,212,.42) 0%,rgba(244,214,190,.26) 38%,rgba(246,237,217,0) 70%),radial-gradient(130% 62% at 50% -14%,rgba(255,255,255,.60) 0%,rgba(255,255,255,0) 54%),linear-gradient(180deg,#FBF7EE 0%,#F6EDD9 62%,#F3E4D4 100%); /* --- room grounds. Full-bleed family tints for the education sequence. - */ --room-event: radial-gradient(130% 82% at 50% -12%,#EAF3FC 0%,#D7E7F7 42%,#A9C1D8 100%); --room-sky: radial-gradient(130% 82% at 50% -12%,rgba(255,255,255,.42) 0%,rgba(255,255,255,0) 58%),linear-gradient(180deg,#AED4EE 0%,#A4C7E0 100%); --room-rose: radial-gradient(130% 82% at 50% -12%,rgba(255,255,255,.42) 0%,rgba(255,255,255,0) 58%),linear-gradient(180deg,#F1C7BB 0%,#E3BBB0 100%); --room-dusk: radial-gradient(130% 82% at 50% -12%,rgba(255,255,255,.42) 0%,rgba(255,255,255,0) 58%),linear-gradient(180deg,#D7D4EC 0%,#CAC7DE 100%); --room-sun: radial-gradient(130% 82% at 50% -12%,rgba(255,255,255,.42) 0%,rgba(255,255,255,0) 58%),linear-gradient(180deg,#F6E3A0 0%,#E7D596 100%); --room-register: radial-gradient(130% 82% at 50% -12%,#F4F2FA 0%,#E4E0F0 44%,#BDB7D2 100%); /* --- shadow ramps. Three depths plus the two button states. ----------- */ --shadow-tile: inset 0 1px 0 rgba(255,255,255,.85),inset 0 -2px 3px rgba(46,54,68,.13),0 4px 8px -3px rgba(46,54,68,.30),0 1px 2px rgba(46,54,68,.13); --shadow-card: inset 0 1px 0 rgba(255,255,255,.85),inset 0 -2px 3px rgba(88,80,110,.14),0 12px 22px -12px rgba(56,48,74,.40),0 2px 5px -1px rgba(56,48,74,.14); --shadow-well: inset 0 3px 6px -1px rgba(45,54,66,.22),inset 0 1px 1px rgba(45,54,66,.14),inset 0 -1px 0 rgba(255,255,255,.95); --shadow-key: inset 0 1px 0 #FFFFFF,inset 0 -2px 3px rgba(45,54,66,.10),0 3px 0 -1px #CBD5DE,0 6px 10px -5px rgba(45,54,66,.28); --shadow-chip: inset 0 1px 0 rgba(255,255,255,.9),0 2px 0 -1px #C2DBCF,0 4px 6px -3px rgba(40,72,48,.34); --shadow-round: inset 0 1px 0 #FFFFFF,inset 0 -2px 3px rgba(61,72,82,.18),0 4px 8px -2px rgba(61,72,82,.30),0 1px 2px rgba(61,72,82,.16); /* THE ADVANCE KEY'S PRESS SHADOW. Task R10-ENG-B tokenizes the #9BBD99 carve-out R10-5b recorded: the SAME press shipped as a literal in two places — base.css's own .primary:active and screen-break.css's mirrored .brk-sheet-done:active. One name, one source. Named --shadow-advance-press because every neighbour here is --shadow-; the prompt's suggested --press-under-advance did not follow that shape and its author withdrew it. Value is byte-identical to what both shipped. */ --shadow-advance-press: inset 0 1px 0 rgba(255,255,255,.9),0 2px 0 -1px #9BBD99; --shadow-advance: inset 0 1px 0 rgba(255,255,255,.9),inset 0 -3px 4px rgba(40,72,48,.20),0 5px 0 -1px #9BBD99,0 9px 14px -5px rgba(40,72,48,.45); /* --- fills that pair with those ramps --------------------------------- */ --fill-key: linear-gradient(180deg,#FFFFFF 0%,#FDFEFF 46%,#F2F5F9 100%); --fill-well: linear-gradient(180deg,#ECEFF3 0%,#FCFCFE 24%,#FFFFFF 100%); --fill-advance: linear-gradient(180deg,rgba(255,255,255,.55) 0%,rgba(255,255,255,0) 52%),linear-gradient(180deg,#DCEDDA 0%,#CDE3CB 48%,#B4D0B1 100%); --fill-chip: linear-gradient(180deg,#E0EFDE 0%,#CDE3CB 50%,#B6D3B3 100%); /* --- family tints. Family palettes are law. --------------------------- */ --tint-event: linear-gradient(180deg,#D7E7F7 0%,#BCD7F2 46%,#A2B9D0 100%); --tint-thoughts: linear-gradient(180deg,#D7EAF2 0%,#BCDCE9 46%,#A2BDC8 100%); --tint-feelings: linear-gradient(180deg,#DBE9E9 0%,#C3DBDA 46%,#A8BCBB 100%); --tint-sensations: linear-gradient(180deg,#E2EADD 0%,#CEDCC6 46%,#B1BDAA 100%); --tint-urges: linear-gradient(180deg,#EEE8D8 0%,#E3D9BE 46%,#C3BBA3 100%); --tint-behavior: linear-gradient(180deg,#F4E6D3 0%,#EDD5B6 46%,#CCB79D 100%); --tint-outcomes: linear-gradient(180deg,#F5E3D6 0%,#EFD0BA 46%,#CEB3A0 100%); /* --- the darkest stop of each tint. Contrast is measured against these. */ --tint-event-floor: #A2B9D0; --tint-thoughts-floor: #A2BDC8; --tint-feelings-floor: #A8BCBB; --tint-sensations-floor: #B1BDAA; --tint-urges-floor: #C3BBA3; --tint-behavior-floor: #CCB79D; --tint-outcomes-floor: #CEB3A0; /* --- ink -------------------------------------------------------------- */ --ink-strong: #332B42; --ink-body: #22303B; --ink-control: #3D4852; --ink-screen-name: #5E6E80; /* header sits at the ground's pale top: 5.1:1 there, 4.4:1 at its base */ --ink-veil: #5A4C1C; /* --- embossing. Headings and button labels only; never body or testimony. */ --emboss-heading: 0 -1px 1.5px rgba(26,20,38,.68),0 -0.5px 0 rgba(26,20,38,.30),0 1px 0 rgba(255,255,255,.95),0 2px 1.5px rgba(255,255,255,.45); --emboss-label: 0 1px 0 rgba(255,255,255,.55); --emboss-stroke: 0.4px; /* --- type. Fredoka displays, Nunito reads. ---------------------------- */ --font-display: 'Fredoka',system-ui,-apple-system,sans-serif; --font-body: 'Nunito',system-ui,-apple-system,sans-serif; --type-label: 11px; --type-chip: 12px; --type-meta: 13px; --type-note: 14px; --type-body: 15px; --type-control: 17px; --type-title: 20px; --type-veil: 21px; --type-room: 26px; --track-label: .12em; /* --- radii ------------------------------------------------------------ */ --radius-chip: 6px; --radius-tile: 12px; --radius-card: 22px; --radius-advance: 24px; --radius-pill: 999px; /* --- floors. Asserted, never assumed. --------------------------------- */ --floor-text: 11px; --floor-tap: 44px; } /* ============================================================================ THE SHELL RESTYLE - the shipped chrome repainted to the Dimensional Register: .iconbtn (back), .stepname (screen name), .spine .link (progress pips), .primary (advance, all twelve instances). Selector names are the shipped ones, kept deliberately: four suites assert them, two advance buttons are written at runtime by frozen screen scripts, and renaming a shared symbol is the founding scar of this repo. Adds four tokens the layer lacks and corrects two it got wrong. Owns no screen-body layout. ========================================================================== */ :root{ --ink-quiet: #555E67; --ink-screen-name: #5A6A7C; --ink-advance: #2F4230; --emboss-name: 0 -1px 0 rgba(26,42,60,.60),0 -1.5px 2px rgba(26,42,60,.30),0 1px 0 rgba(255,255,255,1),0 2px 2px rgba(255,255,255,.9); --emboss-advance: 0 -1px 1.5px rgba(28,52,34,.68),0 -0.5px 0 rgba(28,52,34,.30),0 1px 0 rgba(255,255,255,.95),0 2px 1.5px rgba(255,255,255,.45); --fill-back: radial-gradient(circle at 34% 26%,#FFFFFF 0%,#FBFBFD 40%,#E6E8EE 100%); } .iconbtn{background:var(--fill-back);box-shadow:var(--shadow-round);color:var(--ink-control)} .stepname{font-family:var(--font-display);font-weight:400;font-size:var(--type-control);letter-spacing:.01em;color:var(--ink-screen-name);text-shadow:var(--emboss-name)} .spine .link{border:2px solid #99A1AB;background:linear-gradient(180deg,#E7EAEE 0%,#F8F9FB 100%);box-shadow:inset 0 2px 3px rgba(60,68,78,.22),0 1px 0 rgba(255,255,255,.8)} .spine .link.done{border-color:#5C6672;background:linear-gradient(180deg,#A2AAB4 0%,#868E99 46%,#6D7681 100%);box-shadow:inset 0 1px 0 rgba(255,255,255,.55),0 1px 2px rgba(38,44,58,.32)} .spine .link.here{border-color:#5C6672;background:linear-gradient(180deg,#E9ECEF 0%,#FFFFFF 70%);box-shadow:inset 0 2px 3px rgba(60,68,78,.26),0 0 0 2px rgba(134,142,153,.28),0 1px 2px rgba(38,44,58,.18)} .primary{width:100%;height:48px;min-height:48px;padding:0 14px;border-radius:var(--radius-advance);box-sizing:border-box;display:flex;align-items:center;justify-content:center;border:0;cursor:pointer;background:var(--fill-advance);box-shadow:var(--shadow-advance);color:var(--ink-advance);text-shadow:var(--emboss-advance);font-family:var(--font-display);font-weight:400;font-size:var(--type-control);letter-spacing:.01em;-webkit-text-stroke:var(--emboss-stroke) currentColor} .primary:active{transform:translateY(3px);box-shadow:var(--shadow-advance-press)} @media (prefers-reduced-motion:reduce){.primary:active{transform:none}} /* ============================================================================ R3 - THE EVENT ROOM. Six tokens the layer lacks; the card and label serve the whole cool half (the design reuses both on Thoughts and Feelings), so they are named for the half, not the screen. Two carry corrected inks: the design's label #365A78 measured 3.59 and its placeholder #6E7681 measured 3.98 against their darkest stops, below the 4.5 floor, which is literal and position-independent by owner ruling. Smallest passing shifts. ========================================================================== */ :root{ --card-cool: linear-gradient(180deg,#F1F5FC 0%,#E4ECF7 42%,#D2E0F0 100%); --card-cool-floor: #D2E0F0; --label-cool: #2A4963; --ink-placeholder: #646C77; --ink-helper: #5F5A6B; --radius-well: 10px; } /* ============================================================================ R4 - THE THOUGHTS ROOM. Forty tokens the layer lacks: four lens families, each in a saturated (seeded) and pale (quiet) state, plus the tray, the quiet chip, the handle, and the key radius. Eleven inks are corrected from the design, which failed the darkest-stop floor on every clinical subtitle (3.15-3.80) and on two titles (rose 4.40, sun 4.31); floors are literal and position-independent by owner ruling. The dusk and sun saturated fills are owner-blessed derivations by the design's own recipe (top = mid + 45% toward white, floor = mid x 0.916), which reproduces the design's sky and rose pairs to within one hex step. Lane borders are decorative, per the standing ruling on the design's 1px edges. ========================================================================== */ :root{ --lane-sky-sat: linear-gradient(180deg,#D9EAF6 0%,#B9D8EF 52%,#AAC5DB 100%); --lane-sky: linear-gradient(180deg,#ECF3FA 0%,#DCEAF5 52%,#C7D5E0 100%); --lane-sky-sat-floor: #AAC5DB; --lane-sky-floor: #C7D5E0; --lane-sky-edge: #486B85; --ink-sky: #274F6A; --ink-sky-sub: #375266; --lane-rose-sat: linear-gradient(180deg,#F6E5DD 0%,#EFCFC2 52%,#D7BEB5 100%); --lane-rose: linear-gradient(180deg,#FBF2EE 0%,#F7E7E0 52%,#DED2CE 100%); --lane-rose-sat-floor: #D7BEB5; --lane-rose-floor: #DED2CE; --lane-rose-edge: #895D50; --ink-rose: #713F32; --ink-rose-sub: #69483E; --lane-dusk-sat: linear-gradient(180deg,#E9E7F5 0%,#D7D4EC 52%,#C5C2D8 100%); --lane-dusk: linear-gradient(180deg,#F3F2F9 0%,#EAE8F4 52%,#D3D3DF 100%); --lane-dusk-sat-floor: #C5C2D8; --lane-dusk-floor: #D3D3DF; --lane-dusk-edge: #6C6796; --ink-dusk: #464073; --ink-dusk-sub: #514D70; --lane-sun-sat: linear-gradient(180deg,#F8EFCF 0%,#F2E2A7 52%,#DECF99 100%); --lane-sun: linear-gradient(180deg,#FBF7E7 0%,#F8F0D3 52%,#DFDAC3 100%); --lane-sun-sat-floor: #DECF99; --lane-sun-floor: #DFDAC3; --lane-sun-edge: #7F6F38; --ink-sun: #62531D; --ink-sun-sub: #63572C; --shadow-lane: inset 0 1px 0 rgba(255,255,255,.8),inset 0 -2px 2px rgba(46,54,68,.10),0 2px 4px -1px rgba(46,54,68,.26); --fill-tray: linear-gradient(180deg,#E8EDF7 0%,#D9E1F1 46%,#BBC2CF 100%); --fill-tray-floor: #BBC2CF; --label-tray: #324A5E; --fill-chip-quiet: linear-gradient(180deg,#FFFFFF 0%,#FBFCFD 50%,#EDF0F4 100%); --fill-chip-quiet-floor: #EDF0F4; --chip-quiet-edge: #9AA6B2; --shadow-chip-quiet: inset 0 1px 0 #FFFFFF,0 2px 0 -1px rgba(45,54,66,.10),0 3px 5px -2px rgba(45,54,66,.28); --ink-chip: #324A5E; --radius-chip-quiet: 20px; --fill-handle: linear-gradient(180deg,#A6AEB8 0%,#7E8892 60%,#69727C 100%); --radius-key: 10px; } /* ============================================================================ R5 - THE FEELINGS AND SENSATIONS ROOMS. Fifteen tokens the layer lacks: TWO sphere states (the shipped model has no selected bubble - choosing removes the bubble and the chips are the record of the chosen, owner ruling 2026-07-31 - so the spheres are pewter for a core and sky for an open satellite, both tiers, with the engine's size difference carrying depth), the sage add key, and the small inks. Two inks are corrected from the design (core 4.41 -> 4.55; the instruction line 4.48 on the feelings tile -> passes both tiles); floors are literal and position-independent by owner ruling. The Sensations screen is an owner-blessed derivation by the Feelings recipe. ========================================================================== */ :root{ --sphere-core: radial-gradient(circle at 33% 25%,#FFFFFF 0%,#F7F8FA 46%,#DFE3E9 100%); --sphere-core-floor: #DFE3E9; --shadow-sphere-core: inset 0 2px 2px rgba(255,255,255,.9),inset 0 -4px 6px rgba(61,72,82,.16),0 8px 14px -5px rgba(61,72,82,.40),0 2px 4px -1px rgba(61,72,82,.18); --ink-sphere-core: #5C666F; --sphere-open: radial-gradient(circle at 33% 25%,#E1F0FB 0%,#C4DFF2 44%,#9CC2DF 100%); --sphere-open-floor: #9CC2DF; --shadow-sphere-open: inset 0 2px 2px rgba(255,255,255,.7),inset 0 -4px 6px rgba(30,60,84,.16),0 6px 11px -5px rgba(30,60,84,.38),0 2px 3px -1px rgba(30,60,84,.16); --ink-sphere: #3D4852; --ink-instruction: #3E4B4F; --fill-round-sage: radial-gradient(circle at 34% 26%,#EAF5E9 0%,#D5E9D3 40%,#B2CFAF 100%); --fill-round-sage-floor: #B2CFAF; --shadow-round-sage: inset 0 1px 0 rgba(255,255,255,.85),inset 0 -3px 4px rgba(40,72,48,.22),0 4px 8px -2px rgba(40,72,48,.38),0 1px 2px rgba(40,72,48,.20); --radius-input-pill: 22px; --ink-action-quiet: #4A3670; --ink-chip-x: #5E6871; } /* ============================================================================ TASK 96 - THE THIRD TIER WEARS DUSK. Owner ruling 2026-07-31: nested depth is colour-coded - pewter core, sky first tier, dusk second tier. The dusk sphere reuses the owner-blessed dusk trio (R4's Fork B derivation) in the sphere's radial geometry; its shadow mirrors the sky sphere's structure in the dusk family's dark. The emphasized Sensations core stays SKY - the seeded door is "open", not "deep". Ink measured 5.38 on the deep floor. ========================================================================== */ :root{ --sphere-deep: radial-gradient(circle at 33% 25%,#E9E7F5 0%,#D7D4EC 44%,#C5C2D8 100%); --sphere-deep-floor: #C5C2D8; --shadow-sphere-deep: inset 0 2px 2px rgba(255,255,255,.7),inset 0 -4px 6px rgba(70,64,115,.16),0 6px 11px -5px rgba(70,64,115,.38),0 2px 3px -1px rgba(70,64,115,.16); } /* ============================================================================ TASK 97 - THE SEEDED DOOR WEARS SAGE. Owner ruling 2026-08-01: the four colours each mean one thing - white untouched, GREEN seeded (the live version's suggestion semantics restored under the register), blue one tap deep, purple two taps deep. The sage sphere is the design of record's own trio, drawn for selection, re-aimed at the state that exists. Sage on unchosen satellite WORDS stays retired; this is the door the app suggests, the one place the live version already spoke sage. Ink measures 5.31. ========================================================================== */ :root{ --sphere-seeded: radial-gradient(circle at 33% 25%,#E4F4E9 0%,#C8E5D2 44%,#A3CDB2 100%); --sphere-seeded-floor: #A3CDB2; --shadow-sphere-seeded: inset 0 2px 2px rgba(255,255,255,.7),inset 0 -4px 6px rgba(40,72,52,.18),0 7px 12px -5px rgba(40,72,52,.40),0 2px 4px -1px rgba(40,72,52,.18); } /* ============================================================================ R6 - THE URGES ROOM. Eleven tokens the layer lacks: the sand tile's two corrected inks (the design's label 3.50 and helper 4.18 against the tile floor, below the position-independent 4.5 floor - smallest passing shifts), the nudge card's four, and the violet Add key's three - whose own design ink measured 4.26 on its own darkest stop and is corrected to 4.60. Violet is the room's action colour; the tile is the sand family; the page card keeps the register's standard shadow by owner ruling (the design's violet-tinted card shadow is a recorded variance, not a token). ========================================================================== */ :root{ --label-urges: #55482B; --ink-helper-urges: #504A38; --fill-nudge: linear-gradient(180deg,#FFFFFF 0%,#FBFBFC 45%,#EFEFF3 100%); --fill-nudge-floor: #EFEFF3; --nudge-edge: #E4E6EB; --shadow-nudge: inset 0 1px 0 #FFFFFF,0 4px 9px -4px rgba(45,54,66,.30); --ink-nudge: #7A3B4E; --fill-add-violet: linear-gradient(180deg,rgba(255,255,255,.5) 0%,rgba(255,255,255,0) 52%),linear-gradient(180deg,#DECFEF 0%,#CDBBE4 48%,#B39ED3 100%); --fill-add-violet-floor: #B39ED3; --shadow-add-violet: inset 0 1px 0 rgba(255,255,255,.85),inset 0 -3px 4px rgba(60,42,90,.20),0 5px 0 -1px #9C86BF,0 9px 14px -5px rgba(60,42,90,.42); --ink-add-violet: #443268; } /* ============================================================================ R7 - THE ACTION PAIR (Behavior + Outcomes). Fifteen tokens the layer lacks. One shared warm label ink serves both tiles and every beat sub-label - the design's warm inks fail the position-independent floor (label 4.18 / 4.09, beat sub-label 3.05) and every passing fit converges, so the lighter-sub-label hierarchy is a recorded casualty of the floor. The sort arena's zones are equal by construction and carry no verdict colour; both zone label inks PASS as designed (5.60 lavender, 5.35 sky) and ship uncorrected; the chips' hard under-edge lives inside their shadow (the R6 violet-key precedent); the sort chips are white in every state by the design's own caption. The violet-tinted action-half card shadow is a recorded variance by owner ruling (Fork A extended 2026-08-01) - the cards consume the standard shadow. ========================================================================== */ :root{ --label-warm: #524736; --fill-sort-arena: #F5F3EF; --zone-lavender: linear-gradient(180deg,#EEECF8 0%,#E4E1F0 46%,#D3CFE5 100%); --zone-lavender-floor: #D3CFE5; --shadow-zone-lavender: inset 0 1px 0 rgba(255,255,255,.85),inset 0 -2px 3px rgba(72,66,110,.14),0 4px 8px -3px rgba(72,66,110,.30),0 1px 2px rgba(72,66,110,.13); --ink-zone-lavender: #4C4870; --zone-sky: linear-gradient(180deg,#E6EFF8 0%,#D9E7F2 46%,#C4D9EA 100%); --zone-sky-floor: #C4D9EA; --shadow-zone-sky: inset 0 1px 0 rgba(255,255,255,.85),inset 0 -2px 3px rgba(30,60,84,.14),0 4px 8px -3px rgba(30,60,84,.30),0 1px 2px rgba(30,60,84,.13); --ink-zone-sky: #2E5675; --radius-zone: 14px; --fill-sort-chip: linear-gradient(180deg,#FFFFFF 0%,#FDFEFF 46%,#F2F5F9 100%); --fill-sort-chip-floor: #F2F5F9; --shadow-sort-chip: inset 0 1px 0 #FFFFFF,inset 0 -2px 3px rgba(45,54,66,.10),0 3px 0 -1px #CBD5DE,0 6px 10px -5px rgba(45,54,66,.28); --ink-sort-chip: #3D4852; } /* ============================================================================ R8 - BREAK THE CHAIN: the veil, the chain, the gap panel, the valence sheet, and the glance - one screen-system, one suite, one block. Fifty-three tokens. The five zone labels all failed the position- independent floor as drawn (3.50-3.81); two floors match earlier corrections exactly (EVENT reuses --label-event, URGES reuses --label-urges) and two fresh fits preserve their family hues (feelings teal 4.56, sensations olive 4.55; thoughts shares the steel family and consumes --label-event at 4.77). The slate-then-sage grammar is owner- blessed 2026-08-02: slate marks selected-not-yet-claimed, sage marks the claimed break and its skills. The sheet's two near-twin soft inks unify on #5E6871 (passes 4.78-5.68 everywhere both appeared; recorded). The in-your-words and what-helped fields consume the standard well (first stop variance #E7EBF0 vs #ECEFF3 recorded, invisible, one well system). The action-half card shadow variance rides per the extended Fork A. ========================================================================== */ :root{ --ground-veil-break: linear-gradient(180deg,rgba(167,174,184,0) 0%,rgba(167,174,184,0) 62%,rgba(167,174,184,.16) 74%,rgba(167,174,184,0) 86%),radial-gradient(130% 62% at 50% -12%,rgba(255,255,255,.72) 0%,rgba(255,255,255,0) 52%),linear-gradient(180deg,#F4F2FA 0%,#E2DFEE 58%,#CBC7DA 100%); --ink-veil-break: #3A3550; --ink-veil-hint: #524C67; --zone-event: linear-gradient(180deg,#D7E7F7 0%,#BCD7F2 46%,#A2B9D0 100%); --zone-event-floor: #A2B9D0; --zone-thoughts: linear-gradient(180deg,#D7EAF2 0%,#BCDCE9 46%,#A2BDC8 100%); --zone-thoughts-floor: #A2BDC8; --zone-feel: linear-gradient(180deg,#DBE9E9 0%,#C3DBDA 46%,#A8BCBB 100%); --zone-feel-floor: #A8BCBB; --zone-sens: linear-gradient(180deg,#E2EADD 0%,#CEDCC6 46%,#B1BDAA 100%); --zone-sens-floor: #B1BDAA; --label-zone-feel: #284F4E; --label-zone-sens: #404E34; --ink-zone: #22303B; --ink-zone-sens: #282A22; --ink-zone-urges: #2E2A20; --ink-testimony: #4C4434; --fill-link: linear-gradient(180deg,#98A1AB 0%,#7E8892 45%,#666F79 100%); --shadow-link: inset 0 1px 0 rgba(255,255,255,.45),inset 0 -1px 2px rgba(30,38,48,.35),0 2px 0 -1px #5C646E,0 4px 7px -2px rgba(46,58,68,.45); --ink-link: #FFFFFF; --fill-marker-frame: linear-gradient(180deg,#8FBE8B 0%,#6FA96C 100%); --fill-marker: linear-gradient(180deg,#FFFFFF 0%,#F4F9F3 22%,#E4EFE2 72%,#D3E4D1 100%); --fill-marker-floor: #D3E4D1; --shadow-marker: drop-shadow(0 7px 9px rgba(30,62,38,.34)) drop-shadow(0 2px 3px rgba(30,62,38,.22)); --fill-chip-sage: linear-gradient(180deg,#E0EFDE 0%,#CDE3CB 50%,#B6D3B3 100%); --fill-chip-sage-floor: #B6D3B3; --shadow-chip-sage: inset 0 1px 0 rgba(255,255,255,.9),0 2px 0 -1px #A9C8A6,0 4px 6px -3px rgba(40,72,48,.40); --fill-sheet: linear-gradient(180deg,#FBF7EE 0%,#F6EDD9 100%); --fill-sheet-floor: #F6EDD9; --shadow-sheet: inset 0 1px 0 rgba(255,255,255,.92),inset 0 -2px 3px rgba(88,80,110,.12),0 -12px 30px -6px rgba(45,44,52,.40); --fill-scrim: rgba(61,72,82,.34); --ink-sheet-strong: #3D4852; --ink-sheet-soft: #5E6871; --fill-skill: #FFFFFF; --skill-edge: rgba(61,72,82,.14); --fill-skill-chosen: #E7ECF1; --skill-chosen-edge: #9AA6B2; --ink-skill-chosen: #324A5E; --radius-skill: 16px; --radius-field: 14px; --fill-key-sky: linear-gradient(180deg,rgba(255,255,255,.55) 0%,rgba(255,255,255,0) 52%),linear-gradient(180deg,#D3E8F7 0%,#BFDCF0 48%,#A4C7E0 100%); --fill-key-sky-floor: #A4C7E0; --shadow-key-sky: inset 0 1px 0 rgba(255,255,255,.9),inset 0 -3px 4px rgba(24,58,84,.20),0 4px 0 -1px #8AAECB,0 8px 13px -5px rgba(24,58,84,.42); --ink-key-sky: #27506B; --fill-round: radial-gradient(circle at 34% 26%,#FFFFFF 0%,#FBFBFD 40%,#E6E8EE 100%); --shadow-round: inset 0 1px 0 #FFFFFF,inset 0 -2px 3px rgba(61,72,82,.18),0 4px 8px -2px rgba(61,72,82,.30),0 1px 2px rgba(61,72,82,.16); --fill-unit: linear-gradient(180deg,#FFFFFF 0%,#FCFDFE 60%,#F6F8FA 100%); --fill-unit-floor: #F6F8FA; --shadow-unit: inset 0 1px 0 #FFFFFF,0 2px 0 -1px #E4E9EE,0 6px 12px -6px rgba(45,54,66,.24); --fill-valence: #F5F7F8; --valence-edge: #DCE2E6; --ink-celebrate: #2E5B41; } /* ============================================================================ TASK 102 - THE BODY ETCH. Owner ruling 2026-08-03, after the stop that measured the premise false: the app had NO etched body text anywhere (25 etched elements, all headings or controls; 67 flat), and no token expressed one. This token is drawn deliberately for 15px body text on the chain's mid-tone zone fills - NOT a shallower --emboss-heading. Two deliberate departures from that token, both of which are why it exists: ZERO BLUR (the heading's 1.5px blur is what haloed 15px letterforms) and a dark half at .20 rather than .68 (a whisper above, a crisp white ledge below - the letterpress read). The dark is neutral so one token serves all eight zone families, cool and warm alike. A text-shadow does not move a WCAG pair, so the floors are unchanged by construction; the guard here is legibility, asserted as an exact-value match rather than a ratio. ========================================================================== */ :root{ --emboss-body: 0 -1px 0 rgba(34,38,46,.20), 0 1px 0 rgba(255,255,255,.62); } /* ============================================================================ R9 - REPAIR & PREVENT, THE DAWN THRESHOLD, THE TOOLCHEST AND THE SAVE TOAST. Twelve tokens; everything else this screen needs already exists, which is the register paying its rent: the repair tile wears --tint-outcomes (byte-equal to the design's trio - no --tint-repair is minted, superseding R8's recorded expectation), the 32 Toolchest cards wear R7's sort-chip recipe unchanged, the round close wears R8's, the module labels wear --label-warm, and the DORMANT --ink-veil (#5A4C1C, zero consumers since it was minted) finally gets its consumer: the Dawn veil's four sentences, whose ink it always was. Two design inks failed the position-independent floor and are corrected at the smallest passing shift: the Toolchest sub at 4.27 -> 4.59 on the cool sheet's floor, and the Toolchest KEY, whose own ink measured 4.35 on the design's deeper sky - resolved not by re-inking but by consuming R8's --fill-key-sky, one sky key recipe app-wide, the deeper trio recorded as a variance. ========================================================================== */ :root{ --ground-veil-dawn: radial-gradient(ellipse 140% 55% at 50% 104%,rgba(243,201,212,.42) 0%,rgba(244,214,190,.26) 38%,rgba(246,237,217,0) 70%),radial-gradient(130% 62% at 50% -14%,rgba(255,255,255,.60) 0%,rgba(255,255,255,0) 54%),linear-gradient(180deg,#FBF7EE 0%,#F6EDD9 62%,#F3E4D4 100%); --ground-veil-dawn-floor: #F3E4D4; /* TASK 110 RULING 3 — the Break veil's floor, minted BESIDE the Dawn's so the pair is symmetric and no rule has to carry a literal. Derived from --ground-veil-break's own text (this file, above): its opaque base layer is linear-gradient(180deg,#F4F2FA 0%,#E2DFEE 58%,#CBC7DA 100%) -> LAST STOP = #CBC7DA and the two layers over it are alpha-0 at 100% (rgba(167,174,184,0) from 86%, rgba(255,255,255,0) from 52%), so they contribute nothing at the floor. This is the ONE new custom property Task 110 adds; no token is re-valued. */ --ground-veil-break-floor: #CBC7DA; --ink-veil-dawn-hint: #706025; --fill-sheet-cool: linear-gradient(180deg,#F4F7FC 0%,#E7EEF7 42%,#D6E2F0 100%); --fill-sheet-cool-floor: #D6E2F0; --shadow-sheet-cool: inset 0 1px 0 rgba(255,255,255,.92),inset 0 -2px 3px rgba(88,80,110,.12),0 -12px 30px -6px rgba(45,37,10,.42); --fill-scrim-warm: rgba(45,37,10,.42); --fill-title-pill: #AED4EE; --ink-title-pill: #1F4A6B; --ink-sheet-soft-cool: #5B646D; --fill-toast: #F3C9D4; --shadow-toast: 0 6px 16px rgba(122,59,78,.28); --radius-toast: 18px; } /* ========================================================================== THE FRONT DOOR — Task R10-2f. The ELEVENTH :root block: fifteen tokens the splash needs and the register did not carry. Purely additive, as every block before it: zero removed lines, zero existing declarations edited. WHAT IS *NOT* HERE, because the register already carried it byte-identically to the design of record: the ground (`--ground-warm`, though the SHIPPED splash is flat by Task 109's ruling — see screen-splash.css), the sage key (`--fill-advance` / `--shadow-advance` / `--ink-advance` / `--emboss-advance` / `--radius-advance` / `--type-control` / `--emboss-stroke`, which together ARE base.css's own `.primary` recipe), the control ink (`--ink-control`), the pill radius (`--radius-pill`), the callout type size (`--type-meta`), and both families. A screen consumes the recipe; it does not restate it. ========================================================================== */ :root{ /* the emblem — the only drop-shadow pair in the register that is pewter-hued rather than family-hued, because the mark is pewter and casts its own light */ --shadow-emblem: drop-shadow(0 7px 11px rgba(64,70,78,.34)) drop-shadow(0 2px 3px rgba(64,70,78,.22)); /* the emblem's CONTENT BOX inside its 120-unit viewBox, from docs/EMBLEM.md's "Geometry" section (artwork x 10.8-104.2, y 40.3-86.0). The splash sizes the mark BY THIS BOX, which is what that section requires. Unitless on purpose: screen-splash.css multiplies them by the rendered artwork width. */ --emblem-vb: 120; --emblem-box-x: 10.8; --emblem-box-y: 40.3; --emblem-box-w: 93.4; --emblem-box-h: 45.7; /* the wordmark, set as TEXT beside the mark (the emblem carries no type) */ --type-wordmark: 52px; --ink-wordmark: #3A3F45; --track-wordmark: .045em; --stroke-wordmark: 0.3px; --emboss-wordmark: 0 -1px 1.5px rgba(24,28,34,.60),0 -0.5px 0 rgba(24,28,34,.28),0 1px 0 rgba(255,255,255,.95),0 2px 1.5px rgba(255,255,255,.50); /* the tagline */ --type-tagline: 16px; --ink-tagline: #5F6972; /* the QUIET key at ADVANCE scale — a full-width 48px pill. The register's `--fill-key`/`--shadow-key` is the KEY recipe at `--radius-key` (10px) for pressable rows; this is its advance-scale sibling and the two are not interchangeable. */ --fill-quiet-advance: linear-gradient(180deg,rgba(255,255,255,.6) 0%,rgba(255,255,255,0) 52%),linear-gradient(180deg,#FFFFFF 0%,#FBFCFD 48%,#EDF0F4 100%); --shadow-quiet-advance: inset 0 1px 0 #FFFFFF,inset 0 -2px 3px rgba(45,54,66,.12),0 4px 0 -1px #DDE2E8,0 8px 13px -5px rgba(45,54,66,.34); --emboss-quiet-advance: 0 -1px 1.5px rgba(26,34,44,.55),0 1px 0 rgba(255,255,255,.95); --stroke-quiet-advance: 0.35px; /* the corner callouts — the quiet family again at callout scale, sitting on the ground rather than in the stack, so it lifts less */ --fill-callout: linear-gradient(180deg,rgba(255,255,255,.6) 0%,rgba(255,255,255,0) 52%),linear-gradient(180deg,#FFFFFF 0%,#FBFCFD 50%,#EDF0F4 100%); --shadow-callout: inset 0 1px 0 #FFFFFF,0 2px 0 -1px #DDE2E8,0 5px 9px -3px rgba(45,54,66,.32); --shadow-callout-glyph: drop-shadow(0 1px 0 rgba(255,255,255,.9)); } /* ========================================================================== TASK R10-3a v5 — THE AUTH SCREENS (Group 3). A TWELFTH `:root` BLOCK. Purely additive: zero removed lines, zero existing declarations edited. Every token here is a value the design of record resolves for "Getting in" (docs/design/final/Fulcrium - All Screens.dc.html, section at lines 117-248) that THE REGISTER DOES NOT ALREADY CARRY. Everything the register does carry is CONSUMED by css/auth.css rather than restated: --fill-advance, --shadow-advance, --ink-advance, --emboss-advance, --emboss-stroke, --shadow-well, --radius-field, --radius-input-pill, --radius-tile, the whole --type-* scale, --track-label, --ink-strong/-tagline/-body/-soft/-control, --shadow-emblem, the --emblem-box-* geometry, and --tap. WHY --fs-cap IS NOT AMONG THEM. The 10.88px floor breach (owner ruling R5(a)) came from `--fs-cap: clamp(10.5px,1.7vh,12.5px)` in css/base.css, consumed by `.muted`; at 640px of viewport height 1.7vh resolves to 10.88px. The register does not define --fs-cap, and adding it here would RE-DERIVE a value the register already carries under its own name: --type-meta is 13px, flat, and is what the design gives that text. So .muted consumes --type-meta, nothing consumes --fs-cap on these pages any more, and the clamp is simply out of force. Adding a duplicate would have been the thing the ground grammar forbids. (Both readings of R5(a)'s pre-ruling are set out in the task report.) ========================================================================== */ :root{ /* THE GROUND. The design paints a radial gradient (`radial-gradient(125% 78% at 50% 4%,#FBFCFD 0%,#F1F4F7 44%,#DFE5EA 100%)`, design line 125). THE GROUND RULING OF 2026-07-30 WINS OVER A DESIGN FILE, and Tasks 107-109 established why: Safari tints its two chrome strips from one `background-color`, and only a FLAT page hands it a colour that matches both ends. THE VALUE IS THIS GROUND'S OWN LAST STOP, so the darkest-stop contrast doctrine cannot move any pair. The disagreement is reported, not resolved, per THE PRECEDENCE ADDENDUM. */ --ground-auth: #DFE5EA; /* THE CARD — the object the whole screen is about (design line 127). Its fill is a shade warmer at the foot than --fill-key's, and its shadow carries a second inset and a deeper drop, so neither is the key recipe. */ --fill-auth-card: linear-gradient(180deg,#FFFFFF 0%,#FDFEFF 46%,#F4F7FA 100%); --shadow-auth-card: inset 0 2px 0 rgba(255,255,255,.95),inset 0 -3px 5px rgba(45,54,66,.10),0 5px 0 -1px #D3DAE1,0 16px 28px -10px rgba(45,54,66,.36); --radius-auth-card: 26px; /* THE WELL's FILL (design line 146). The register's --shadow-well is byte-identical to the design's and is consumed; only the fill differs — the auth well starts one step cooler and reaches white sooner. */ --fill-auth-well: linear-gradient(180deg,#E7EBF0 0%,#FBFCFE 22%,#FFFFFF 100%); --ink-auth-placeholder: #8D97A1; /* design line 146 */ /* THE TITLE's EMBOSS (design line 142) — the wordmark's emboss carved for the darker --ink-strong rather than --ink-wordmark. */ --emboss-title: 0 -1px 1.5px rgba(26,20,38,.62),0 -0.5px 0 rgba(26,20,38,.28),0 1px 0 rgba(255,255,255,.95),0 2px 1.5px rgba(255,255,255,.45); /* the field label's one-pixel lift off the card (design line 145) */ --emboss-label: 0 1px 0 rgba(255,255,255,.8); /* THE ONE GENERIC MESSAGE (design lines 179-180). A blush panel, not a red alarm: the copy is unchanged and stays the server's own. */ --fill-auth-err: linear-gradient(180deg,#F6D3C7 0%,#F1C7BB 100%); --shadow-auth-err: inset 0 1px 0 rgba(255,255,255,.7),inset 0 -2px 3px rgba(122,59,78,.14),0 2px 5px -2px rgba(122,59,78,.24); --ink-auth-err: #8C3A2E; /* THE SETUP KEY, shown as text because the QR renders offline and can fail (design lines 211-212), and THE QR's own plate (design line 204). */ --fill-auth-secret: #EDF0F3; --shadow-auth-secret: inset 0 2px 4px rgba(45,54,66,.18),inset 0 -1px 0 rgba(255,255,255,.9); --shadow-auth-qr: inset 0 0 0 1px rgba(45,54,66,.10),0 4px 10px -4px rgba(45,54,66,.30); } /* ========================================================================== TASK R10-4t - THE REGISTER'S GROUP 4 GAP (the skills library and the Toolchest). Twenty-four tokens those two surfaces need and this register lacked. PURELY ADDITIVE and DELIBERATELY UNCONSUMED: nothing referenced any of them at merge, which is why no screen's appearance changed. R10-4b consumes the library half; R10-4c consumes the Toolchest half, marked TOOLCHEST-ONLY below so that one left unconsumed can be found and removed rather than sitting here unnoticed. Every token names the line it came from in the design of record, docs/design/final/Fulcrium - All Screens.dc.html. THE MODULE TILE IS ONE RECIPE WRITTEN FOUR TIMES, and that is this file's convention rather than an oversight. Identical across all four families: the white sheen layer, the gradient geometry (180deg, TOP 0% / MID 48% / BOTTOM 100%), the first inset, and the shadow geometry. Varying by family: the top stop, the shade rgb (reused at .16 and .40), and the hard key. The register stores WHOLE recipes in --fill-* / --shadow-* - see --fill-key, --fill-sheet, --fill-callout - never parts, so the collapse is recorded here in words and the four values are written out in full. THE TOP STOP IS NOT DERIVABLE from its family's --room-* first stop: tested for exact equality on all four and false on all four (#C6E2F4 vs #AED4EE, #F7DAD0 vs #F1C7BB, #E4E1F2 vs #D7D4EC, #FAEFC2 vs #F6E3A0). THE INKS BELOW HAVE NOT BEEN CONTRAST-MEASURED, by owner ruling of 2026-08-12. The mockup's DOM nesting is not the app's, so a pairing read off the design is a proxy and can err in both directions. The task that RENDERS each ink measures it against the DARKEST STOP of its actual fill - a positional acceptance is not valid - and on a failure below 4.5 consumes the nearest darker same-family token and reports the substitution, the resolution the auth screens already used. The list to work through is docs/STATE.md -> the R10-4t entry's INK WATCH-LIST. WHAT IS DELIBERATELY ABSENT: THE LIBRARY LANDING'S GROUND. The design draws it as a gradient (design line 1640). Tasks 107-109 ruled the skills ground FLAT #F6EDD9, measured on device, because Safari tints both of its chrome strips from one `background-color` and only a flat page hands it a colour that matches both ends. THE RULING WINS OVER THE DESIGN FILE, and the disagreement is reported rather than resolved, per THE PRECEDENCE ADDENDUM. So no ground token is added here and css/preview/screen-skills.css keeps its flat value. ========================================================================== */ :root{ /* THE FOUR MODULE TILES on the library landing (design lines 1648, 1653, 1658, 1663). The family names are this register's own - sky / rose / dusk / sun - not the shipped screen file's older blush/lavender aliases. */ --fill-module-sky: linear-gradient(180deg,rgba(255,255,255,.42) 0%,rgba(255,255,255,0) 54%),linear-gradient(180deg,#C6E2F4 0%,#AED4EE 48%,#A4C7E0 100%); --shadow-module-sky: inset 0 1px 0 rgba(255,255,255,.9),inset 0 -3px 4px rgba(24,58,84,.16),0 4px 0 -1px #86A8C2,0 10px 16px -6px rgba(24,58,84,.40); --fill-module-rose: linear-gradient(180deg,rgba(255,255,255,.42) 0%,rgba(255,255,255,0) 54%),linear-gradient(180deg,#F7DAD0 0%,#F1C7BB 48%,#E3BBB0 100%); --shadow-module-rose: inset 0 1px 0 rgba(255,255,255,.9),inset 0 -3px 4px rgba(90,44,30,.16),0 4px 0 -1px #C79C8E,0 10px 16px -6px rgba(90,44,30,.40); --fill-module-dusk: linear-gradient(180deg,rgba(255,255,255,.42) 0%,rgba(255,255,255,0) 54%),linear-gradient(180deg,#E4E1F2 0%,#D7D4EC 48%,#CAC7DE 100%); --shadow-module-dusk: inset 0 1px 0 rgba(255,255,255,.9),inset 0 -3px 4px rgba(48,42,86,.16),0 4px 0 -1px #A8A3C4,0 10px 16px -6px rgba(48,42,86,.40); --fill-module-sun: linear-gradient(180deg,rgba(255,255,255,.42) 0%,rgba(255,255,255,0) 54%),linear-gradient(180deg,#FAEFC2 0%,#F6E3A0 48%,#E7D596 100%); --shadow-module-sun: inset 0 1px 0 rgba(255,255,255,.9),inset 0 -3px 4px rgba(90,76,28,.16),0 4px 0 -1px #C7B676,0 10px 16px -6px rgba(90,76,28,.40); /* THE ROSE FAMILY'S INK (design line 1654; the same ink again on the rose module pill, line 1948). The other three families' tile inks already exist - --ink-key-sky #27506B, --ink-dusk #464073, --ink-veil #5A4C1C - and only rose lacked one. The name --ink-rose was NOT available: it already holds #713F32, the Thoughts lens rose, which is a different colour. */ --ink-module-rose: #764234; /* THE CARD SHEET's furniture (design lines 1869 and 1871). The scrim is a THIRD scrim value: --fill-scrim is rgba(61,72,82,.34), and --fill-scrim-warm is rgba(45,37,10,.42), which the Toolchest's own scrim already consumes. */ --fill-scrim-card: rgba(45,44,52,.44); --radius-handle: 2px; --fill-card-handle: #D7DCE1; --shadow-card-handle: inset 0 1px 1px rgba(61,72,82,.22); /* THE MODULE PILL on an open card (design line 1876 sun, line 1948 rose). Its recipe is linear-gradient(180deg, THE FAMILY'S TILE TOP STOP 0%, THE FAMILY'S MID 100%) - exact for both families the design declares. The design declares no sky or dusk pill, so neither is invented here; the task that needs them names the gap. */ --fill-pill-sun: linear-gradient(180deg,#FAEFC2 0%,#F6E3A0 100%); --shadow-pill-sun: inset 0 1px 0 rgba(255,255,255,.85),0 2px 4px -1px rgba(90,76,28,.30); --fill-pill-rose: linear-gradient(180deg,#F7DAD0 0%,#F1C7BB 100%); --shadow-pill-rose: inset 0 1px 0 rgba(255,255,255,.85),0 2px 4px -1px rgba(90,44,30,.30); /* THE CAUTION BOX on an open card (design lines 1954 and 1955). A caution renders between "for when" and "try this" - the standing rule, because a caution that arrives after the instruction arrives too late. It is a warm box, never a verdict colour. */ --fill-caution: linear-gradient(180deg,#F9EED4 0%,#F5E5BF 100%); --shadow-caution: inset 0 1px 0 rgba(255,255,255,.80),inset 0 -2px 3px rgba(90,74,30,.12),0 2px 5px -2px rgba(90,74,30,.24); --ink-caution: #5A4A1E; /* THE TOOLCHEST - TOOLCHEST-ONLY (design lines 1432 and 1475 for the module label; 1484 for the add key). R10-4c consumes these. If it does not consume one, remove it rather than leave it standing. */ --ink-toolchest-label: #5A4E3B; --fill-toolchest-add: linear-gradient(180deg,rgba(255,255,255,.26) 0%,rgba(255,255,255,0) 52%),linear-gradient(180deg,#6E6690 0%,#565073 48%,#453F5D 100%); --shadow-toolchest-add: inset 0 1px 0 rgba(255,255,255,.34),inset 0 -3px 4px rgba(28,23,44,.32),0 5px 0 -1px #383350,0 9px 14px -5px rgba(28,23,44,.45); } /* ========================================================================== TASK R10-4t-b - THE FOUR MISSING PILL TOKENS (the skills card sheet). R10-4t added the module pill for the two families the design of record illustrates - sun (design line 1876) and rose (design line 1948) - and deliberately left sky and dusk out because the design declares neither. FIFTEEN OF THE THIRTY-TWO SKILLS open a card whose pill needs one of those two, so the gap blocked R10-4b. These four close it. PURELY ADDITIVE and DELIBERATELY UNCONSUMED: nothing references any of them at merge, which is why no screen's appearance changed. R10-4b consumes all four. THE PROVENANCE OF THESE FOUR IS NOT UNIFORM, AND THE DIFFERENCE MATTERS MORE THAN THE VALUES DO. Read this before reusing either kind. THE TWO FILLS ARE A RECIPE, CONFIRMED EXACT ON EVERY INSTANCE THE DESIGN DECLARES. The recipe is linear-gradient(180deg, THE FAMILY'S TILE TOP STOP 0%, THE FAMILY'S MID 100%), read from --fill-module- above. Tested byte for byte against both pills the design draws, and TRUE on both: for sun, built linear-gradient(180deg,#FAEFC2 0%,#F6E3A0 100%) against design line 1876's declared value; for rose, built linear-gradient(180deg,#F7DAD0 0%,#F1C7BB 100%) against design line 1948's. Two instances, two exact matches, no counter-example available. The sky and dusk fills below are that same recipe read off --fill-module-sky and --fill-module-dusk. THE TWO SHADOWS ARE A PATTERN WITH TWO CONFIRMING INSTANCES AND NO THIRD TO CHECK IT AGAINST. THEY ARE NOT DECLARED ANYWHERE IN THE DESIGN. Both pills the design declares share one geometry - inset 0 1px 0 rgba(255,255,255,.85),0 2px 4px -1px - and vary only in the rgb of the second shadow, which in both cases is the family's OWN tile shade rgb (the one --shadow-module- reuses at .16 and .40) carried at .30. That held for sun (90,76,28) and for rose (90,44,30). It is a DERIVATION, not a measurement, and the two shadow tokens below repeat that on their own lines so a later reader is never misled into thinking the design declared them. NO CONTRAST WAS MEASURED HERE, and that is deliberate rather than skipped. The pill carries text, so each fill becomes an ink-on-fill pair the moment R10-4b renders it. R10-4b measures that pair ON THE RENDER, against the DARKEST STOP of each gradient - a positional acceptance is not valid - as part of the floor row it already runs. Same standing as R10-4t's INK WATCH-LIST in docs/STATE.md. ========================================================================== */ :root{ /* THE MODULE PILL, SKY FAMILY, on an open skills card sheet. FILL: the recipe above, from --fill-module-sky's top stop and mid; the recipe was confirmed exact on design lines 1876 and 1948. */ --fill-pill-sky: linear-gradient(180deg,#C6E2F4 0%,#AED4EE 100%); /* SHADOW: DERIVED FROM THE TWO-INSTANCE PATTERN, NOT DECLARED BY THE DESIGN. Sky's own tile shade rgb 24,58,84 at .30, on the shared geometry confirmed on design lines 1876 and 1948. */ --shadow-pill-sky: inset 0 1px 0 rgba(255,255,255,.85),0 2px 4px -1px rgba(24,58,84,.30); /* THE MODULE PILL, DUSK FAMILY, on an open skills card sheet. FILL: the recipe above, from --fill-module-dusk's top stop and mid; the recipe was confirmed exact on design lines 1876 and 1948. */ --fill-pill-dusk: linear-gradient(180deg,#E4E1F2 0%,#D7D4EC 100%); /* SHADOW: DERIVED FROM THE TWO-INSTANCE PATTERN, NOT DECLARED BY THE DESIGN. Dusk's own tile shade rgb 48,42,86 at .30, on the shared geometry confirmed on design lines 1876 and 1948. */ --shadow-pill-dusk: inset 0 1px 0 rgba(255,255,255,.85),0 2px 4px -1px rgba(48,42,86,.30); } /* ========================================================================== TASK R10-4t-c - THE FAMILY-TINTED TITLE EMBOSS (the skills library's three surfaces). Four tokens, one per family. PURELY ADDITIVE and DELIBERATELY UNCONSUMED: nothing references any of them at merge, which is why no screen's appearance changed. R10-4b v7 consumes all four. WHY THESE FOUR AND NO OTHERS - THE SWEEP THAT BOUNDED THIS TASK. R10-4b has halted three times, each on a value the design needs and this register did not carry: the module tiles' top stop and key shadow (R10-4t), the sky and dusk module pills (R10-4t-b), and this emboss. Rather than accept a list, this task re-swept all seven library frames across EVERY property the purity rule governs - color, background, background-color, background-image, border-color, box-shadow, text-shadow, border-radius - and classified all 374 rows: 338 already RESOLVED by an existing token, 11 LITERAL by the shape -radius ruling, 14 EXCLUDED as the mockup's own device chrome, and 11 MISSING. Ten of those eleven are the rows below. The eleventh is the landing ground, which Ruling 2 keeps flat and which is reported rather than resolved - see docs/STATE.md. THE PER-FAMILY EXPANSION, applied to every role at once rather than to the one a previous task noticed: seven per-family roles exist across these surfaces (module tile fill and shadow, room ground, card pill fill and shadow, the family ink, and this emboss). SIX ARE COMPLETE FOR ALL FOUR FAMILIES. Only the emboss was missing, and it was missing for all four. Note for a later reader: the FAMILY INK is complete but is NOT one stem - it is --ink-key-sky, --ink-module-rose, --ink-dusk and --ink-veil. A check that expands a single stem across the families reports six false gaps there. THESE FOUR ARE DECLARED, NOT DERIVED - and they are also derivable, which is a cross-check rather than a substitute. The design STATES each value outright, and the same value is independently reproduced by taking --emboss-title's geometry and substituting the family's OWN tile shade rgb (the rgb --shadow-module- already reuses at .16 and .40). Both routes were tested and AGREE BYTE FOR BYTE on all four. Each token's own comment names its design lines. NO CONTRAST OBLIGATION ATTACHES TO ANY OF THESE, and that is stated so the consuming task does not inherit a measurement that means nothing. The accessibility floor is a ratio between a text colour and the fill behind it. A text-shadow is neither, and does not enter that computation. An emboss can make text look carved; it cannot make a passing pair fail or a failing pair pass. The INKS these titles wear are a different matter and R10-4b v7 measures every one of them on the render, against the darkest stop, with positional acceptances invalid. ========================================================================== */ :root{ /* THE TITLE EMBOSS, SKY FAMILY - the module tile title on the library landing and the room title in the mindfulness room. DECLARED by the design at lines 1649 and 1678; independently derivable from --emboss-title with sky's own tile shade rgb 24,58,84, and the two routes agree byte for byte. */ --emboss-title-sky: 0 -1px 1.5px rgba(24,58,84,.62),0 -0.5px 0 rgba(24,58,84,.28),0 1px 0 rgba(255,255,255,.95),0 2px 1.5px rgba(255,255,255,.45); /* THE KEY EMBOSS, SKY FAMILY - the engraved lettering on a sky-family KEY, as distinct from a sky TITLE above. Task R10-5b adds it by owner order ("Break the rule and insert a microtask into this current task to meet the design spec requirements", 2026-08-14) because the Break gap panel's "Browse all skills" callout consumes it and no token carried the value: the design DECLARES it at line 2138, and its shade rgb 20,48,70 is the key's own, one step deeper than the title family's 24,58,84. Verbatim from the design; the only addition this task makes to this file. */ --emboss-key-sky: 0 -1px 1.5px rgba(20,48,70,.60),0 -0.5px 0 rgba(20,48,70,.28),0 1px 0 rgba(255,255,255,.95),0 2px 1.5px rgba(255,255,255,.45); /* THE TITLE EMBOSS, ROSE FAMILY - the module tile title, the distress-tolerance room title, and the card title on the caution card sheet. DECLARED by the design at lines 1654, 1720 and 1902; independently derivable from --emboss-title with rose's own tile shade rgb 90,44,30, and the two routes agree byte for byte. */ --emboss-title-rose: 0 -1px 1.5px rgba(90,44,30,.62),0 -0.5px 0 rgba(90,44,30,.28),0 1px 0 rgba(255,255,255,.95),0 2px 1.5px rgba(255,255,255,.45); /* THE TITLE EMBOSS, DUSK FAMILY - the module tile title on the landing and the room title in the emotion-regulation room. DECLARED by the design at lines 1659 and 1766; independently derivable from --emboss-title with dusk's own tile shade rgb 48,42,86, and the two routes agree byte for byte. */ --emboss-title-dusk: 0 -1px 1.5px rgba(48,42,86,.62),0 -0.5px 0 rgba(48,42,86,.28),0 1px 0 rgba(255,255,255,.95),0 2px 1.5px rgba(255,255,255,.45); /* THE TITLE EMBOSS, SUN FAMILY - the module tile title, the interpersonal- effectiveness room title, and the card title on the plain card sheet. DECLARED by the design at lines 1664, 1808 and 1842; independently derivable from --emboss-title with sun's own tile shade rgb 90,76,28, and the two routes agree byte for byte. */ --emboss-title-sun: 0 -1px 1.5px rgba(90,76,28,.62),0 -0.5px 0 rgba(90,76,28,.28),0 1px 0 rgba(255,255,255,.95),0 2px 1.5px rgba(255,255,255,.45); } /* ========================================================================== TASK R10-4t-d — THE TOOLCHEST'S THREE MISSING SHADOW VALUES, AND ONE RENAME. Group 4's Toolchest is the modal sheet Repair & prevent opens over itself. Task R10-4c swept it against this register before writing a line and found three values it does not carry - all three text-shadows, and ALL THREE DECLARED OUTRIGHT by the design of record rather than derived from a pattern. This block adds them and renames one token whose name described a control the surface does not have. NOTHING CONSUMES THESE YET. The Toolchest task consumes them; that is why this task changes no screen's appearance and adds no selector. NO CONTRAST OBLIGATION ATTACHES TO ANY OF THE THREE SHADOWS, and it is stated so the consuming task does not inherit a measurement that means nothing. The accessibility floor is a ratio between a text colour and the fill behind it. A text-shadow is neither. The INK renamed below is a different matter, and the Toolchest task measures it on the render against the darkest stop. ========================================================================== */ :root{ /* THE TOOLCHEST TITLE'S EMBOSS - the

Toolchest

on its sky pill inside the sheet. DECLARED by the design at line 1429. IT IS NOT --emboss-title-sky, and the difference is not a rounding: that token carries rgb 24,58,84 at .62/.28 with white at .95, this one rgb 16,44,66 at .60/.26 with white at .92. A different tint, a different opacity pair and a different white. */ --emboss-title-toolchest: 0 -1px 1.5px rgba(16,44,66,.60),0 -0.5px 0 rgba(16,44,66,.26),0 1px 0 rgba(255,255,255,.92),0 2px 1.5px rgba(255,255,255,.45); /* THE TOOLCHEST MODULE LABEL'S WHITE LIFT - the "Mindfulness" / "Distress tolerance" headers above each group of rows. DECLARED by the design at lines 1432 AND 1475, two confirming instances carrying it identically. NOT AN EMBOSS: a single downward white lift with no dark half at all, which is why it is named for the lift rather than for a carve. */ --emboss-label-toolchest: 0 1px 0 rgba(255,255,255,.7); /* THE DARK CONTROL'S EMBOSS - the Toolchest's own Close button, which is a dark control carrying pale ink. DECLARED by the design at line 1484. THIS IS THE REGISTER'S FIRST INVERTED EMBOSS AND A READER REACHING FOR "AN EMBOSS TOKEN" MUST SEE THAT FROM HERE. Every other emboss in this file is built for DARK INK ON A LIGHT FILL and puts its white half at .92-.95; this one is built for PALE INK ON A DARK FILL and puts white at .30/.14 with the dark half carrying the weight at .75/.40. It obeys the design brief's stated structure - "a dark shadow above, a white shadow below" (docs/design/r10/design-brief.md line 53) - and inverts only the opacities, which that brief does not fix. */ --emboss-control-dark: 0 -1px 1.5px rgba(22,18,38,.75),0 -0.5px 0 rgba(22,18,38,.40),0 1px 0 rgba(255,255,255,.30),0 2px 1.5px rgba(255,255,255,.14); /* THE TOOLCHEST CLOSE BUTTON'S INK. DECLARED by the design at line 1484, the same element --emboss-control-dark carves. RENAMED FROM --ink-toolchest-add BY THIS TASK, VALUE BYTE-IDENTICAL. That name described an ADD control, and there is no add affordance anywhere in the Toolchest: every text node in the design's sheet is the close glyph, the title, the module labels, the skill names, the "?" peek and "Close". The old name was consumed by nothing anywhere in the tree, which is what made the correction free exactly once - a rename with a live consumer would be a screen change wearing a register change's clothes. A reader searching git history for the old name will find it here. */ --ink-toolchest-close: #DCD6EE; } /* ========================================================================== THE DAILY JOURNAL (Task J2) — the wing's own token block, APPENDED. Purely additive on the standing terms: zero removed lines, zero existing declarations edited, every earlier block and the frame cascade byte-identical (proven by hashing this file's first 76097 bytes against the anchor). Every value below is either a DERIVATION performed against a live source token in this file, or a PROMOTION of a literal a shipped screen already carries. Nothing here is eye-derived, and nothing existing is re-valued. ========================================================================== */ :root{ /* THE URGES TILE'S DEEPER GROUND. --tint-urges darkened 8 HSL lightness points in-hue, stop for stop, so the tile reads as its own surface under the card's neutral chips rather than as the chip zone it carries. #EEE8D8 -> #E2D7BC #E3D9BE -> #D7C8A1 #C3BBA3 -> #B3A98A The structural shape mirrors the shipped --tint-urges declaration exactly. */ --tint-urges-deep: linear-gradient(180deg,#E2D7BC 0%,#D7C8A1 46%,#B3A98A 100%); --tint-urges-deep-floor: #B3A98A; /* THE FEELINGS KEY. --fill-key-sky's recipe re-expressed in --tint-feelings' family: the same white-veil-over-three-stops structure, the teal family's own stops. The shadow follows --shadow-key-sky's SHAPE with the family dark rgba(40,79,78,…) in place of the sky's rgba(24,58,84,…). */ --fill-key-feelings: linear-gradient(180deg,rgba(255,255,255,.55) 0%,rgba(255,255,255,0) 52%),linear-gradient(180deg,#DBE9E9 0%,#C3DBDA 48%,#A8BCBB 100%); --shadow-key-feelings: inset 0 1px 0 rgba(255,255,255,.9),inset 0 -3px 4px rgba(40,79,78,.20),0 4px 0 -1px #8FAAA9,0 8px 13px -5px rgba(40,79,78,.42); /* THE SKY PILL'S LIFT — --shadow-callout's shape in the sky key's tint. */ --shadow-pill-sky: inset 0 1px 0 #FFFFFF,0 2px 0 -1px #A4C7E0,0 5px 9px -3px rgba(24,58,84,.32); /* THE THREE CARD SHADOWS — --shadow-card's shape, each in its family's dark. The card's structure (inset light, inset floor, long lift, short seat) is unchanged; only the shadow colour moves into the family. */ --shadow-card-feelings: inset 0 1px 0 rgba(255,255,255,.85),inset 0 -2px 3px rgba(40,79,78,.14),0 12px 22px -12px rgba(40,79,78,.40),0 2px 5px -1px rgba(40,79,78,.14); --shadow-card-urges: inset 0 1px 0 rgba(255,255,255,.85),inset 0 -2px 3px rgba(74,64,34,.14),0 12px 22px -12px rgba(74,64,34,.40),0 2px 5px -1px rgba(74,64,34,.14); --shadow-card-sky: inset 0 1px 0 rgba(255,255,255,.85),inset 0 -2px 3px rgba(24,58,84,.14),0 12px 22px -12px rgba(24,58,84,.40),0 2px 5px -1px rgba(24,58,84,.14); /* PROMOTIONS — two literals the History wing already ships, named here because the journal reuses them and a second hand-written copy is how a pair drifts. Both are byte-identical to css/preview/screen-history.css's own values. */ --ink-month-warm: #7A6A2E; --fill-day-tile: #F8F4EA; /* THE WARM SHEET — --shadow-sheet-cool's shape, warm: the cool inset floor rgba(88,80,110,…) becomes the warm rgba(107,90,31,…); the drop is already warm in the source and is carried unchanged. */ --shadow-sheet-warm: inset 0 1px 0 rgba(255,255,255,.92),inset 0 -2px 3px rgba(107,90,31,.12),0 -12px 30px -6px rgba(45,37,10,.42); /* THE PICKER'S AT-CAP FLATTEN. An unpicked word at the cap goes visibly quiet rather than silently inert: the raise is removed, a hairline states the boundary, and the ink stays above the 4.5 floor on the flattened fill. */ --fill-pill-disabled: #F2F5F9; --line-pill-disabled: rgba(45,54,66,.10); --ink-pill-disabled: #5E6871; }