/* ============================================================================ mc-ui.css — Slipcurve shared design system ---------------------------------------------------------------------------- A warm, light, professional canvas. Terracotta accent, sage second accent, one restrained alarm red. Caprasimo for display headings ONLY; Figtree for everything else. Linked by every module, so the look is defined in one place. HOW THIS FILE IS ORGANISED — read this before editing. 1. @font-face self-hosted from ../vendor/fonts/ (no CDN, no network) 2. :root TOKENS the central ramps: accent 100..900, accent-2 100..900, neutral 100..900, alarm 100..700. 3. :root SEMANTICS the construction status layer — critical-path, near-critical, float-healthy, overdue, blocked, approved, superseded. Derived from the ramps above, never invented per-module. Then the CATEGORICAL SERIES ramp (--series-1..8 and their fills) for "float path 1..N", disciplines, resource types and every other chart legend that is not a status. 4. :root LEGACY REMAP every variable the module pages already use (--canvas --panel --bone --amber --teal --clay …) re-pointed at the tokens above. THIS IS WHY THE WHOLE APP GOES LIGHT FROM ONE FILE. Do not rename these and do not delete them: renaming breaks every page at once and smoke.py cannot see a purely visual break. 5. everything else base, type, layout, controls, tables, status chips, compare table, spec list, info panel, floating windows. CONTRAST. Every text/background pair shipped here clears WCAG AA (4.5:1 body, 3:1 large). The muted-on-card pair is the one that always fails elsewhere: --bone-faint is neutral-600 (5.24:1 on --panel), NOT neutral-500 (3.39:1). neutral-400/500 and accent-500 are BORDER AND FILL COLOURS ONLY — never text. NUMBERS. This is a scheduling and cost product. Every numeric surface carries font-variant-numeric: tabular-nums so digits line up in a column. ============================================================================ */ /* ---- 1. fonts ------------------------------------------------------------ */ /* Vendored under vendor/fonts/ (SIL OFL 1.1 — see vendor/fonts/README.md). Paths are relative to THIS file, so they resolve identically from slipcurve-shell.html at the root and from every modules/*.html. */ @font-face{font-family:'Figtree';font-style:normal;font-weight:300 900;font-display:swap; src:url('../vendor/fonts/figtree-0.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:'Figtree';font-style:normal;font-weight:300 900;font-display:swap; src:url('../vendor/fonts/figtree-1.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+2074,U+20AC,U+2122,U+2190-2193,U+2212,U+2215,U+FEFF,U+FFFD;} @font-face{font-family:'Caprasimo';font-style:normal;font-weight:400;font-display:swap; src:url('../vendor/fonts/caprasimo-0.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:'Caprasimo';font-style:normal;font-weight:400;font-display:swap; src:url('../vendor/fonts/caprasimo-1.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+2074,U+20AC,U+2122,U+2190-2193,U+2212,U+2215,U+FEFF,U+FFFD;} :root{ /* ---- 2. TOKENS — the full ramps. Do not invent colours outside these. ---- */ --color-bg:#f5ead8; --color-card:#fbf4e7; --color-text:#201e1d; --color-accent-100:#f7e4d4; --color-accent-200:#eeceb2; --color-accent-300:#e4b58e; --color-accent-400:#d99465; --color-accent-500:#c67139; --color-accent:#c67139; --color-accent-600:#a95c2b; --color-accent-700:#8a4a22; --color-accent-800:#6d3a1b; --color-accent-900:#532c15; --color-accent-2-100:#e9ecdf; --color-accent-2-200:#d5dbc2; --color-accent-2-300:#bec7a3; --color-accent-2-400:#9cab7f; --color-accent-2-500:#7a8a5e; --color-accent-2:#7a8a5e; --color-accent-2-600:#64734c; --color-accent-2-700:#505c3d; --color-accent-2-800:#3f4930; --color-accent-2-900:#303724; --color-neutral-100:#efe6d5; --color-neutral-200:#e4d8c3; --color-neutral-300:#d3c5ac; --color-neutral-400:#b5a78d; --color-neutral-500:#91836b; --color-neutral-600:#6f6553; --color-neutral-700:#554d40; --color-neutral-800:#3c362d; --color-neutral-900:#27231d; /* one restrained alarm red, ramped so a tint and an ink both exist */ --color-alarm-100:#f7dedb; --color-alarm-200:#f0cdc7; --color-alarm-300:#dc9c92; --color-alarm-500:#a5281c; --color-alarm-600:#8e2117; --color-alarm-700:#741a13; --font-display:'Caprasimo',Georgia,serif; /* h1 / .display ONLY */ --font-body:'Figtree',system-ui,-apple-system,'Segoe UI',sans-serif; --font-mono:ui-monospace,SFMono-Regular,Menlo,Consolas,'Liberation Mono',monospace; --radius-lg:16px; --radius-md:12px; --radius-sm:8px; --radius-pill:999px; --shadow-sm:0 1px 3px rgba(32,30,29,.10); --shadow-md:0 4px 14px rgba(32,30,29,.12); --shadow-lg:0 12px 40px rgba(32,30,29,.22); --shadow-xl:0 18px 60px rgba(32,30,29,.55); /* lifted media */ --shadow-grab:0 0 0 1.5px rgba(32,30,29,.28),0 2px 6px rgba(32,30,29,.25); /* ---- 2b. TRANSLUCENT SURFACES ------------------------------------------- A scrim, a wash and a drop shadow are --color-text (or an accent) at low alpha. Written inline in a module as rgba() they are that token COPIED BY VALUE, and they stop following it the day the token moves — verbatim the failure CLAUDE.md names. They live here for exactly the reason --shadow-* above already does: this is the one file that may define a colour. WHY A TOKEN AND NOT var(--color-text) AT THE CALL SITE. CSS cannot apply an alpha to a hex custom property without color-mix(), and color-mix() is itself a colour literal by the ratchet's own reckoning (see FUNC_COLOUR_RE in tools/consistency.py). A named token in THIS file is the only construct that puts the value in one place AND keeps every page at zero residue. KEEP THE CHANNELS IN STEP BY HAND — nothing checks the correspondence: 32,30,29 = --color-text #201e1d 198,113,57 = --color-accent-500 #c67139 122,138,94 = --color-accent-2-500 #7a8a5e */ --wash-accent:rgba(198,113,57,.10); /* accent-500 @10% — hero gradient */ --wash-accent-2:rgba(122,138,94,.10); /* accent-2-500 @10% — hero gradient */ --wash-faint:rgba(32,30,29,.045); /* non-working day band on a chart */ --wash-soft:rgba(32,30,29,.14); /* hover tint on an unfilled control */ --rule-ink:rgba(32,30,29,.35); /* hairline over an UNKNOWN fill — a material swatch, a photograph */ --scrim-soft:rgba(32,30,29,.42); /* dim the page behind a slide-in rail*/ --scrim:rgba(32,30,29,.62); /* modal dim — page still legible */ --scrim-deep:rgba(32,30,29,.80); /* chrome sitting ON a dark canvas */ --scrim-media:rgba(32,30,29,.90); /* lightbox: the image IS the page. One value for one component — four modules carried .86/.88/.90/.93 of the same scrim before this. */ --scrim-veil:rgba(32,30,29,.94); /* loader concealing a 3-D screen */ --paper:#fff; /* the print sheet — see § 22 */ --cad-outline:var(--color-text); --cad-hidden:var(--bone-dim); --cad-centre:var(--color-accent-700); --cad-envelope:var(--st-critical-ink); --cad-hatch:var(--rule-ink); --cad-text:var(--color-text); /* ---- 2b-2. THE CONTROL BOUNDARY ----------------------------------------- A DECORATIVE RULE AND A CONTROL BORDER ARE TWO DUTIES, AND ONE TOKEN WAS DOING BOTH. --line (§ 4) is --color-neutral-300 and is right for the first: a hairline separating content that POSITION already separates may be faint, and 1.4.11 does not apply to it. It is wrong for the second, because a control border is the only thing saying the control is there, and 1.4.11 asks that boundary for 3:1 against every adjacent colour. --color-neutral-300 measured 1.554:1 on --color-card and 1.428:1 on --color-bg. That is not a boundary, it is a suggestion. THE RAMP STEP IS NOT RE-POINTED. Darkening --color-neutral-300 to fix a button would darken every table rule, tag outline and scrollbar with it. Two duties, two names. PICKED BY MEASUREMENT, not by eye. Ratios are WCAG 2.x over sRGB relative luminance, computed on the shipped hexes, against every surface a LIVE control actually sits on in this tree: --paper, --color-card, --color-bg, --color-accent-100 (the info-panel and help-panel heads, § 18 and § 19 — both carry a button), --color-neutral-100 (--base / --panel2) and the five register row tints from § 3. candidate hex on card on bg WORST worst surface --color-neutral-300 #d3c5ac 1.554 1.428 1.372 neutral-100 --color-neutral-400 #b5a78d 2.162 1.988 1.909 neutral-100 --color-neutral-500 #91836b 3.390 3.116 2.993 neutral-100 --color-neutral-600 #6f6553 5.242 4.818 4.628 neutral-100 REJECTED, recorded so they are not re-proposed: neutral-300 the value that was shipping. 1.372:1 worst. neutral-400 the obvious "one step darker", and 1.909:1 worst is nowhere near. Interpolating 300-400 in sRGB runs 1.21 to 1.68 worst-case across all eleven steps, so nothing lighter passes between the rungs either. neutral-500 3.390 on --color-card and 3.116 on --color-bg, so it clears 3:1 on both surfaces the audit named — and it is 2.993:1 on --color-neutral-100, which is --panel2, a panel that hosts controls. It fails by 0.007, on a glance it looks fine, and it would have shipped. brand/animus/animus.css refused its own .46 alpha at 2.99:1 for exactly this; so does this. accent-500 3.30 / 3.03 and 2.91 worst — the same near-miss, and it tints every control on the page terracotta besides. So the lightest step on the shipped ramp that clears 3:1 on EVERY live surface is neutral-600, at 4.628:1 worst. A var() rather than a hex, so it cannot drift off the ramp and a ground that re-points the ramp without re-declaring this token still lands somewhere measured. A DISABLED CONTROL KEEPS --color-neutral-300, DELIBERATELY: 1.4.11 exempts an inactive component by name, and the § 9 disabled rules must NOT reach for this token — a dead control drawn at 4.6:1 looks live. brand/animus/animus.css DECLARES THIS SAME NAME, and that is the seam: its own --line-control at 4.06:1 worst on its own surface stack, loaded after this file on every module, so the Animus value wins there. (Its channels stay over there, where that colour is declared. A foreign triple retyped into a comment HERE is a copy that can go stale, and the rgba() check in tools/consistency.py refused it — correctly.) NAMING THE TOKEN IS WHAT LETS A THEME SWAP REACH THE DECLARATION rather than having to out-specify every rule: without the name, a (0,1,2) selector here punched straight through animus.css's (0,0,1) `button` and kept painting a 1.20:1 border on that ground. */ --line-control:var(--color-neutral-600); /* control border. 4.628:1 worst */ /* ---- 2c. TERRAIN RAMPS — a measured surface drawn as a map --------------- Sits beside § 2b for the same reason § 2b exists: this is the one file that may spell a colour, and a page that draws 12,000 cells cannot reach for a literal per cell. A terrain page emits fill="var(--terrain-elev-3)" and constructs NO colour string in script — the imported page it replaces built sixteen of them with rgb(), which the ratchet counts by notation and which a new file may not carry at all. These are NOT semantic status (§ 3) and NOT a categorical series (§ 3b). They are the drapes of one continuous quantity each, and they are ordered: -1 is the low end, -5 (or -3) the high end. Read them by index. WHAT THE HILLSHADE DOES WITH THEM. The relief is a second pass of cells over the drape, each one --terrain-shade or --terrain-light at an OPACITY computed from the survey's own slope and aspect planes. Opacity is a number, not a colour, so the shading follows the tokens rather than bypassing them; and because the two planes are measured, the relief is the ground rather than an estimate of it. (feDiffuseLighting over a bump map was the other candidate and was rejected on measurement: a per-cell alpha surface is a staircase, so the filter lights the CELL EDGES and not the hillside.) Both are opaque inks here — the alpha lives at the call site, which is legitimate on a fill, and is exactly what § 2b forbids for text. CUT AGAINST FILL IS THE ONE PAIR THAT MUST NEVER COLLAPSE. Cut takes the accent ramp and fill takes the slate-blue of --series-2: CIEDE2000 over the two mid steps is 46.9 normal, 27.1 deuteranopia, 23.8 protanopia. An accent-against-sage pair (the obvious warm/cool choice on this theme) falls to 8.1 under protanopia, and a drape carries no word beside it to recover the meaning — the legend is somewhere else on the page. The elevation ramp runs low green to high pale sand so it also separates on LIGHTNESS, which is what survives every dichromacy and a black-and-white print. --terrain-nodata IS NOT A VALUE. It is what a cell reads when the survey did not measure it — outside the flown swath, or where the packed uint8 slope saturated. It is deliberately the only unsaturated colour in the set, so an unmeasured cell cannot be mistaken for a low reading on any drape (trap 10, in a raster). Do not give it a hue. */ --terrain-elev-1:#54683f; --terrain-elev-2:#82914f; --terrain-elev-3:#b8ac6b; --terrain-elev-4:#d8a765; --terrain-elev-5:#f2e6cd; --terrain-cut-1:#e4b58e; --terrain-cut-2:#c67139; --terrain-cut-3:#8a4a22; --terrain-fill-1:#a8bcd8; --terrain-fill-2:#5f83b4; --terrain-fill-3:#1d477b; --terrain-base:#d3c5ac; /* ground the earthworks do not touch */ --terrain-slope-1:#d5dbc2; --terrain-slope-2:#e4b58e; --terrain-slope-3:#a5281c; /* FBP fuel classes in the payload's OWN code order 0..4 — NF, C7, D1, O1a, O1b — so the page indexes rather than translates. Assigned BY RULE, never surveyed: the page that draws them carries that sentence on the page. */ --terrain-fuel-1:#a89f92; --terrain-fuel-2:#37542f; --terrain-fuel-3:#7f6a33; --terrain-fuel-4:#c2b276; --terrain-fuel-5:#ddca8d; --terrain-burn:#8e2117; /* inside a real mapped fire perimeter */ --terrain-shade:#201e1d; /* relief, dark side — alpha at use */ --terrain-light:#fbf4e7; /* relief, lit side — alpha at use */ --terrain-nodata:#8d8578; /* not a reading. See above. */ /* spacing scale — use these, not ad-hoc pixel values. THIS FILE OWNS THE NAME --sp-*, and the reason is that a spacing step is a METRIC, not a colour. A theme is entitled to re-point a colour under the name its pages already read; it is not entitled to re-point a number the rules were authored AROUND, because that does not restyle those rules, it moves them — every gap, pad and margin in the tree at once, with nothing throwing and no gate able to see it. brand/animus/animus.css declared a second, tighter scale under these same seven names and loads after this file everywhere, so every var(--sp-N) anybody had ever written rendered at half to two-thirds of the authored number. Both scales are wanted — this is a 4px base for a document, the Animus one is a tighter base for dense chrome — so both exist under names of their own: --sp-1..7 here, --as-0..10 in brand/animus/animus.css. Ask for the one you mean. Do not re-declare --sp-* in a later stylesheet, and do not add a compatibility alias between the two: an alias is the same collision with a longer name. */ --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:24px; --sp-6:32px; --sp-7:48px; --ease:cubic-bezier(.22,.61,.36,1); /* text that sits ON a filled accent/status swatch */ --on-accent:#fdf8ef; /* ---- 3. SEMANTIC STATUS LAYER — the construction vocabulary -------------- Each status is a pair: an INK (text, border, chart stroke) that is AA on both --color-card and --color-bg, and a TINT (chip / row background) that the ink is AA against. Use these instead of picking a colour per module. */ --st-critical-ink:#a5281c; --st-critical-tint:#f7dedb; /* on the critical path */ --st-near-ink:#8a4a22; --st-near-tint:#f7e4d4; /* near-critical, watch */ --st-healthy-ink:#505c3d; --st-healthy-tint:#e9ecdf; /* float healthy / on track */ --st-overdue-ink:#8e2117; --st-overdue-tint:#f0cdc7; /* past its date */ --st-blocked-ink:#554d40; --st-blocked-tint:#e4d8c3; /* blocked / held / on hold */ --st-approved-ink:#3f4930; --st-approved-tint:#d5dbc2; /* approved / accepted */ --st-superseded-ink:#6f6553;--st-superseded-tint:#efe6d5;/* superseded / void */ /* ROW tints are deliberately lighter than chip tints. A chip only has to carry its own ink; a tinted table ROW has to carry EVERY ink that can land in it, including --bone-faint (the weakest text token we ship). At chip strength, --bone-faint on the overdue tint measures 3.9:1 and fails. These five all clear 4.5:1 for --bone-faint and for every status ink. */ --st-critical-row:#fbebe8; --st-overdue-row:#f9e3df; --st-near-row:#fcf1e6; --st-healthy-row:#f1f4e9; --st-blocked-row:#f2ece0; /* a failed feed is NOT a status — it is an absence. See trap 10: it renders as an alarm-shaped banner that names the feed, never as a zero. */ --st-nodata-ink:#8e2117; --st-nodata-tint:#f7dedb; /* ---- 3b. CATEGORICAL SERIES RAMP ----------------------------------------- For a legend that is NOT a status: float path 1..N, constraint type, discipline, resource type, risk band, scenario. Nine modules used to carry a private array of hexes here; use these instead, in order, and the ratchet stays at zero for the file. --series-N the INK. Stroke, line, dot, outline, and legend TEXT. --series-N-fill the FILL. An area, a bar, a filled swatch. Every fill carries --color-text at >= 5.2:1, so a value printed inside a filled bar is legible. HOW THESE WERE PICKED — by measurement, not by eye. Every number below is CIEDE2000 or a WCAG 2.x contrast ratio, computed over the shipped hexes, with dichromacy simulated by the Machado/Oliveira/Fernandes (2009) linear- RGB matrices at severity 1.0. ink hex L* C* h on --color-bg on --color-card 1 terracotta #8f5a26 43.2 41.6 65.8 4.82 5.25 2 slate blue #1d477b 29.9 34.1 278.2 7.88 8.57 3 teal #257372 44.0 24.2 195.3 4.68 5.09 4 bark #484136 27.9 7.9 83.5 8.46 9.21 5 sage #536f58 44.1 18.1 148.1 4.66 5.07 6 plum #573148 25.8 22.0 341.8 9.10 9.90 7 olive #3a4101 25.8 35.9 109.0 9.11 9.91 8 periwinkle #54659e 43.7 34.3 286.1 4.73 5.14 AA. Worst ink is 4.66:1 on --color-bg and 5.07:1 on --color-card, so every one clears 4.5:1 as body-size TEXT and as a 1px STROKE on both surfaces. The ceiling is real: 4.5:1 on #f5ead8 caps an ink at L* 45.1, which is why none of these is light and why there is a separate fill ramp. COLOUR VISION. Worst pair, CIEDE2000, over all 28 pairs: normal 12.3 · deuteranopia 11.9 · protanopia 11.5 · tritanopia 7.4 Restricted to series 1..4, which is what most charts here actually use: normal 21.3 · deuteranopia 17.8 · protanopia 17.7 · tritanopia 13.6 Lightness does the work hue cannot: the ramp alternates L* 43-44 and L* 26-30, so 2/8 (slate blue L*29.9 vs periwinkle L*43.7 — the worst pair at every severity) stays apart on lightness after hue has collapsed. THE RED/GREEN PAIR, measured because it is the one that matters here. --st-critical-ink #a5281c against --st-healthy-ink #505c3d is CIEDE2000 38.6 normal, 11.7 deuteranopia, 7.9 PROTANOPIA. That 7.9 is the weakest colour distinction anywhere in this file — weaker than any series pair. It is acceptable ONLY because the status layer never encodes meaning in colour alone: `.st` chips carry the word, `.sdot` sits beside the word. Keep it that way. If you are about to draw critical vs healthy as two bare swatches with no label, use --series-1 and --series-3 instead (17.7 under protanopia), or label them. BEYOND SIX SERIES, add a second channel — dash pattern, marker shape, a direct label. 11.5 is a usable separation, not a comfortable one, and no eight-colour ramp does much better inside an L* 26-45 band. */ --series-1:#8f5a26; --series-2:#1d477b; --series-3:#257372; --series-4:#484136; --series-5:#536f58; --series-6:#573148; --series-7:#3a4101; --series-8:#54659e; /* Fills are lighter siblings at the same hue; fill lightness tracks ink lightness so the pair reads as one series. Text-on-fill with --color-text measures 5.20-9.24:1. Fills are NOT a categorical channel on their own (worst pair 10.1 under protanopia, and only 4.9 under tritanopia) — always stroke a filled area with its own --series-N. */ --series-1-fill:#eeb380; --series-2-fill:#819bd1; --series-3-fill:#8bcdcb; --series-4-fill:#9c9589; --series-5-fill:#adc8b1; --series-6-fill:#ac859b; --series-7-fill:#91945a; --series-8-fill:#b2bdf7; /* ---- 4. LEGACY REMAP — every var the 59 pages already use ---------------- Keep this block. It is the whole reason a theme swap is one file edit. */ --canvas:var(--color-bg); --void:var(--color-bg); --base:var(--color-neutral-100); --panel:var(--color-card); --panel2:var(--color-neutral-100); --panel-2:var(--color-neutral-100); --line:var(--color-neutral-300); --line-soft:var(--color-neutral-200); --grid:rgba(32,30,29,.045); --bone:var(--color-text); /* primary text 15.2:1 on card */ --bone-dim:var(--color-neutral-700); /* secondary text 7.6:1 on card */ --bone-faint:var(--color-neutral-600); /* tertiary text 5.2:1 on card */ /* the accent aliases land on the TERRACOTTA ramp, never on a yellow. --amber doubles as a fill; --on-accent is the text that goes on top of it. */ --amber:var(--color-accent-700); --amber-bright:var(--color-accent-800); --amber-fill:var(--color-accent-500); /* decorative fills, bars, diamonds */ --teal:var(--color-accent-2-700); /* the "good / linked / official" accent */ --clay:var(--color-alarm-500); /* the "bad / critical / late" accent */ --disp:var(--font-body); /* 85 legacy usages — Figtree, NOT Caprasimo */ --body:var(--font-body); /* THIS FILE OWNS THE NAME --mono, and the reason is metrics again, one step along: a font's ADVANCE is a number too. Every var(--mono) site in the tree reads this file and each was sized against Figtree's tabular digits, so a face with a different advance re-flows a dense table authored to fit exactly — in EITHER direction, and nothing in this repo's toolchain measures a column width. Measured in Chromium at the 15px body size, ten tabular digits set 93.453px here and 90.000px in Geist Mono, so the re-point brand/animus/animus.css used to make was a 3.7% SQUEEZE on every numeric column in the product — not the widening its own note predicted. The direction is not the argument; that a theme moved a metric under the name the rules were authored against is. That file publishes the real monospace under a name of its own — --font-mono, aliased --as-mono — and a rule that wants Geist Mono asks by that name. site/site.css already does, as var(--font-mono,var(--mono)): that is the pattern, and it is why the site kept its monospace labels through the rename without being touched. */ --mono:var(--font-body); /* 710 legacy usages — Figtree + tabular-nums */ --rail-w:296px; --bar-h:60px; } /* ---- 5. base ------------------------------------------------------------- */ *{box-sizing:border-box} html,body{margin:0;background:var(--color-bg);color:var(--color-text); font-family:var(--font-body);font-size:15px;line-height:1.55; -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility} body{padding:0 0 80px} a{color:var(--amber);text-underline-offset:2px} a:hover{color:var(--amber-bright)} .wrap{max-width:1200px;margin:0 auto;padding:0 var(--sp-5)} .hide{display:none!important} .right{text-align:right}.center{text-align:center} .teal{color:var(--teal)}.clay{color:var(--clay)}.amber{color:var(--amber)}.dim{color:var(--bone-dim)} .faint{color:var(--bone-faint)} /* numeric surfaces — digits must line up. */ .mono,.num,.stat,.money,.dur,.qty,.pct,td.num,.card .v,.stat .n, input[type="number"],input[type="date"],time{font-variant-numeric:tabular-nums} .mono{font-family:var(--font-body)} .pre,pre,code,kbd,samp{font-family:var(--font-mono);font-variant-numeric:tabular-nums} ::selection{background:var(--color-accent-200);color:var(--color-text)} :focus-visible{outline:2px solid var(--color-accent-600);outline-offset:2px;border-radius:4px} *::-webkit-scrollbar{width:11px;height:11px} *::-webkit-scrollbar-track{background:transparent} *::-webkit-scrollbar-thumb{background:var(--color-neutral-300);border-radius:8px;border:3px solid var(--color-bg)} *::-webkit-scrollbar-thumb:hover{background:var(--color-neutral-400)} html{scrollbar-color:var(--color-neutral-300) transparent} /* ---- 6. header ----------------------------------------------------------- */ header.top{border-bottom:1px solid var(--color-neutral-200);background:var(--color-card); position:sticky;top:0;z-index:30} header.top .wrap{display:flex;align-items:center;gap:15px;height:60px} .brand{font-family:var(--font-body);font-weight:800;letter-spacing:.14em;font-size:13px;color:var(--color-text)} .brand .dot{color:var(--color-accent-700)} /* it is text, so it needs a text-grade ink */ /* THE HEADER MARK IS A MASK, NOT AN IMAGE, AND THAT IS THE WHOLE POINT. What stood here was the RETIRED hexagon -- -- painted in #7a8a5e, an obsolete accent-2 value. It shipped on every page that carry class="brand" while brand/slipcurve-mark.svg, brand/slipcurve.ico and site/og-image.png had all moved to the wireframe tower. Three marks, and the one a user actually saw was the dead one. consistency.py could not catch it: it strips data: URIs before counting colour literals, deliberately, because a fixed asset is not a theme colour -- which is true right up until the asset is stale. A background-image cannot inherit, which is WHY the old one froze a hex. A mask can: the paint is background-color:currentColor, so the mark follows --color-text on both grounds and stops being a colour that has to be remembered. The cut is the compact 4-plate one, which brand/ already assigns to 24-40px -- the header slot is 24px. Inside a mask the SVG is read as ALPHA, so its strokes are #fff and the ghost group's opacity="0.4" survives as 40% of the inherited ink. NOT COLOURED WITH THE SPECTRUM, and that was measured rather than chosen: colour on this wireframe fails below 40px (see tools/makeicon.py stops_for), and this is 24. */ .brand::before{content:"";display:inline-block;width:24px;height:24px;margin-right:10px;vertical-align:-7px;background-color:currentColor;-webkit-mask:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzMiAzMiIgd2lkdGg9IjMyIiBoZWlnaHQ9IjMyIiBmaWxsPSJub25lIiBzdHJva2U9IiNmZmYiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgcm9sZT0iaW1nIiBhcmlhLWxhYmVsPSJNb250ZSBDYXJsbyI+PGcgc3Ryb2tlLXdpZHRoPSIxLjEiIG9wYWNpdHk9IjAuNSI+PHBhdGggZD0iTTIxLjY2IDUgTDEzLjgzIDYuNTUgTDEwLjM0IDMuMDYgTDE4LjE3IDEuNSBaIE0yMi4wOCAxMi44NyBMMjEuNjYgNSBNMTMuNjcgMTQuNTQgTDEzLjgzIDYuNTUgTTkuOTIgMTAuNzggTDEwLjM0IDMuMDYgTTE4LjMzIDkuMTEgTDE4LjE3IDEuNSIvPjwvZz48ZyBzdHJva2Utd2lkdGg9IjEuNCI+PHBhdGggZD0iTTIyLjkxIDI4LjYgTDEzLjM1IDMwLjUgTDkuMDkgMjYuMjMgTDE4LjY1IDI0LjM0IFogTTIyLjQ5IDIwLjczIEwxMy41MSAyMi41MiBMOS41MSAxOC41MSBMMTguNDkgMTYuNzIgWiBNMjIuMDggMTIuODcgTDEzLjY3IDE0LjU0IEw5LjkyIDEwLjc4IEwxOC4zMyA5LjExIFogTTIyLjkxIDI4LjYgTDIyLjQ5IDIwLjczIE0xMy4zNSAzMC41IEwxMy41MSAyMi41MiBNOS4wOSAyNi4yMyBMOS41MSAxOC41MSBNMTguNjUgMjQuMzQgTDE4LjQ5IDE2LjcyIE0yMi40OSAyMC43MyBMMjIuMDggMTIuODcgTTEzLjUxIDIyLjUyIEwxMy42NyAxNC41NCBNOS41MSAxOC41MSBMOS45MiAxMC43OCBNMTguNDkgMTYuNzIgTDE4LjMzIDkuMTEiLz48L2c+PC9zdmc+") center/contain no-repeat;mask:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzMiAzMiIgd2lkdGg9IjMyIiBoZWlnaHQ9IjMyIiBmaWxsPSJub25lIiBzdHJva2U9IiNmZmYiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgcm9sZT0iaW1nIiBhcmlhLWxhYmVsPSJNb250ZSBDYXJsbyI+PGcgc3Ryb2tlLXdpZHRoPSIxLjEiIG9wYWNpdHk9IjAuNSI+PHBhdGggZD0iTTIxLjY2IDUgTDEzLjgzIDYuNTUgTDEwLjM0IDMuMDYgTDE4LjE3IDEuNSBaIE0yMi4wOCAxMi44NyBMMjEuNjYgNSBNMTMuNjcgMTQuNTQgTDEzLjgzIDYuNTUgTTkuOTIgMTAuNzggTDEwLjM0IDMuMDYgTTE4LjMzIDkuMTEgTDE4LjE3IDEuNSIvPjwvZz48ZyBzdHJva2Utd2lkdGg9IjEuNCI+PHBhdGggZD0iTTIyLjkxIDI4LjYgTDEzLjM1IDMwLjUgTDkuMDkgMjYuMjMgTDE4LjY1IDI0LjM0IFogTTIyLjQ5IDIwLjczIEwxMy41MSAyMi41MiBMOS41MSAxOC41MSBMMTguNDkgMTYuNzIgWiBNMjIuMDggMTIuODcgTDEzLjY3IDE0LjU0IEw5LjkyIDEwLjc4IEwxOC4zMyA5LjExIFogTTIyLjkxIDI4LjYgTDIyLjQ5IDIwLjczIE0xMy4zNSAzMC41IEwxMy41MSAyMi41MiBNOS4wOSAyNi4yMyBMOS41MSAxOC41MSBNMTguNjUgMjQuMzQgTDE4LjQ5IDE2LjcyIE0yMi40OSAyMC43MyBMMjIuMDggMTIuODcgTTEzLjUxIDIyLjUyIEwxMy42NyAxNC41NCBNOS41MSAxOC41MSBMOS45MiAxMC43OCBNMTguNDkgMTYuNzIgTDE4LjMzIDkuMTEiLz48L2c+PC9zdmc+") center/contain no-repeat} .mtag{font-size:11px;font-weight:600;color:var(--bone-faint);border:1px solid var(--color-neutral-300); border-radius:var(--radius-pill);padding:3px 10px;font-variant-numeric:tabular-nums} .spacer{flex:1} /* docked inside the shell: the shell's module bar replaces the module brand strip */ html.mc-embedded header.top{display:none!important} /* ---- 7. typography ------------------------------------------------------- */ /* Caprasimo is for display headings ONLY. Everything else is Figtree. */ /* FLUID: `Nonconformance` needs 268px at 32px in a 207px column, so the heading painted outside its box on eight pages. Still 32px from 480px up. */ h1,h1.title,.display{font-family:var(--font-display);font-weight:400;letter-spacing:0; font-size:clamp(23px,6vw,32px);line-height:1.12;margin:var(--sp-6) 0 var(--sp-1); overflow-wrap:break-word;color:var(--color-text)} h2,h3,h4,h5{font-family:var(--font-body);font-weight:700;letter-spacing:-.005em;color:var(--color-text)} /* the small uppercase kicker — the one place ALL-CAPS is allowed */ .eyebrow,.kicker,.card-kicker{font-size:11px;font-weight:700;text-transform:uppercase; letter-spacing:.09em;color:var(--bone-faint);margin:0 0 var(--sp-2)} .lede{color:var(--bone-dim);font-size:16px;line-height:1.55;max-width:74ch;margin:0 0 var(--sp-5)} .secp{color:var(--bone-dim);font-size:14px;line-height:1.55;max-width:80ch} .note{font-size:12.5px;color:var(--bone-faint);margin-top:var(--sp-2);line-height:1.5} /* font-family AND line-height ARE DECLARED HERE ON PURPOSE, AND OMITTING THEM WAS A REAL BUG. These two selectors are worn by SECTION TITLES, and those titles were

for most of this tree's life. A

inherits the body face and the body line-height, so the rule never needed to say either. The moment a title becomes a real

- which it must, or a page exposes exactly one heading to a screen reader - it also becomes an h1..h6, and brand/animus/animus.css:587 sets h1..h6 to var(--font-display) with a snug line-height. CLASS specificity beats ELEMENT specificity only for properties the class actually DECLARES, so .panel-h won on weight and colour and SILENTLY LOST THE TYPEFACE: the label rendered in Tektur instead of the body face, on all 75 pages, and nothing threw and no gate measures a face. Declaring both makes

genuinely identical to the

it replaced, which is what the heading conversion was promised to be. */ .chart-title,.panel-h{font-size:11.5px;font-weight:700;color:var(--bone-faint); font-family:var(--font-body);line-height:inherit; text-transform:uppercase;letter-spacing:.08em;margin:0 0 var(--sp-3)} /* a heading row that carries its own info button on the right */ .panel-hd{display:flex;align-items:center;gap:var(--sp-2);margin:0 0 var(--sp-3)} .panel-hd>.panel-h,.panel-hd>.chart-title,.panel-hd>h4{margin:0;flex:1} /* the page head: kicker + h1 on the left, the page-level "i" on the right. It has to live here and not in header.top, because header.top is hidden whenever the module is docked inside the shell. */ .pagehead{display:flex;align-items:flex-end;gap:var(--sp-3);margin:var(--sp-6) 0 var(--sp-4)} .pagehead>div:first-child{min-width:0} .pagehead h1,.pagehead h1.title{margin:0} .pagehead .eyebrow{margin:0 0 var(--sp-1)} /* a compact control row: label, control, and the control's own "i" */ .ctlrow{display:flex;align-items:center;gap:var(--sp-2);flex-wrap:wrap} /* ---- 8. layout ----------------------------------------------------------- */ .panel,.card,.cardbox{background:var(--color-card);border:1px solid var(--color-neutral-200); border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);min-width:0} .panel{padding:var(--sp-5);margin-top:var(--sp-4)} .row{display:flex;gap:var(--sp-4);flex-wrap:wrap}.col{flex:1;min-width:0} .section{margin-top:var(--sp-6)} hr,.rule{border:none;border-top:1px solid var(--color-neutral-200);margin:var(--sp-5) 0} /* ---- 9. buttons + inputs ------------------------------------------------- */ /* EVERY BORDER IN THIS SECTION IS A CONTROL BOUNDARY AND CARRIES WCAG 1.4.11 — see § 2b-2 for the measurement and for why the decorative ramp step is not re-pointed instead. Resting boundaries take --line-control (4.628:1 worst); the accent-flavoured ones — hover, the secondary button, focus — take --color-accent-600 (#a95c2b, 3.99:1 worst, and 4.00:1 on the accent-100 hover fill the control paints under itself). accent-600 is not a new answer: it is already the fill of a primary button and the ink of the global :focus-visible ring, and it is the lightest step on the accent ramp that clears 3:1 at all. accent-300 measured 1.50:1 worst, accent-400 2.02:1 and accent-500 2.91:1, so every accent step this section used to reach for was under the floor. */ button,.btn{font-family:var(--font-body);font-size:13px;font-weight:600;color:var(--color-text); background:var(--color-card);border:1px solid var(--line-control); border-radius:var(--radius-pill);padding:7px 15px;cursor:pointer;min-width:24px;min-height:24px; transition:background .14s,border-color .14s,color .14s} button:hover,.btn:hover{background:var(--color-accent-100);border-color:var(--color-accent-600); color:var(--color-accent-800)} button:active,.btn:active{background:var(--color-accent-200)} /* A filled primary button is TEXT ON A FILL, so the fill has to be a text-grade step. accent-500 measures 3.41:1 under --on-accent and fails AA at button sizes; accent-600 measures 4.67:1 and passes. accent-500 stays for fills that carry no text — milestone diamonds, progress bars, rules, LEDs. */ button.amber,.btn.amber,.btn-primary,button.primary,.btn.primary{ background:var(--color-accent-600);color:var(--on-accent);border-color:var(--color-accent-700);font-weight:700} button.amber:hover,.btn.amber:hover,.btn-primary:hover,button.primary:hover,.btn.primary:hover{ background:var(--color-accent-700);color:var(--on-accent);border-color:var(--color-accent-800)} /* The secondary button has NO fill, so its border is the entire control: it is the one variant here where 1.4.11 has nothing else to measure. accent-400 was 2.29:1 on --color-card. */ .btn-secondary{background:transparent;color:var(--color-accent-800);border-color:var(--color-accent-600)} .btn-secondary:hover{background:var(--color-accent-100)} /* The alarm ramp has no 400 rung, so the danger boundary steps 300 -> 500. alarm-300 #dc9c92 measured 2.08:1 on --color-card and 1.84:1 worst; alarm-500 (= --st-critical-ink) is 6.57:1 on card and 5.63:1 on its own hover tint. The state change survives the two meeting in the middle because hover also swaps the fill and the ink, and the border goes one step darker again. */ button.danger,.btn.danger{color:var(--st-critical-ink);border-color:var(--st-critical-ink)} button.danger:hover,.btn.danger:hover{background:var(--st-critical-tint);color:var(--color-alarm-700); border-color:var(--color-alarm-700)} /* A DISABLED CONTROL MUST STILL BE READABLE, and `opacity` cannot deliver that. Opacity composites the WHOLE button toward the page and drags its text down with it, so a disabled variant keeps its own foreground — a disabled .amber button held color:var(--on-accent) (cream) over a cream page and measured 1.17:1 on module-pay-apps' "Blocked — compliance" chip. That chip is the one word telling the user why a draw cannot be submitted, so it is exactly the text that must survive being disabled. Two conversion batches hit this independently and each patched it locally; this is the shared fix. Explicit muted tokens instead of opacity: neutral-700 on neutral-200 measures 5.86:1. `!important` on the two colour declarations is deliberate and is the narrowest tool that works: a variant class (.btn.amber, 0-2-0) outranks a state pseudo-class (.btn:disabled, 0-1-1), so without it the variant's cream foreground silently wins and the label disappears again. */ button:disabled,.btn:disabled,button[disabled],.btn[disabled]{ cursor:not-allowed;box-shadow:none; background:var(--color-neutral-200)!important; color:var(--color-neutral-700)!important; border-color:var(--color-neutral-300)} /* The same rule for the OTHER disabled controls, which had none: a disabled to 0.7, and measured at file:// that dropped module-site-plan's step reading ("day") to 3.22:1 all by itself, with no author rule involved. A browser default is still a fade on a light canvas. */ input:disabled,select:disabled,textarea:disabled, input[disabled],select[disabled],textarea[disabled]{ cursor:not-allowed;opacity:1;background:var(--color-neutral-200); color:var(--color-neutral-700);border-color:var(--color-neutral-300)} input[type="range"]:disabled{accent-color:var(--color-neutral-500)} /* a quiet icon button — the only place a glyph stands alone */ .iconbtn{width:26px;height:26px;padding:0;display:inline-flex;align-items:center;justify-content:center; border-radius:var(--radius-pill);font-size:14px;line-height:1} input,select,textarea{font-family:var(--font-body);font-size:13.5px;color:var(--color-text); background:var(--color-card);border:1px solid var(--line-control); border-radius:var(--radius-sm);padding:8px 11px; transition:border-color .14s,box-shadow .14s;font-variant-numeric:tabular-nums} input::placeholder,textarea::placeholder{color:var(--color-neutral-500)} /* The field is FLUSH with the card it sits in — same fill, so the border is the only thing that says a field is there, and 1.4.11 is the whole affordance rather than a refinement of it. On :focus the border moves accent-500 -> accent-600 for the reason the note below already gives for the ring: 2.91:1 worst against 3.99:1, and the two are then the same ink. */ input:focus,select:focus,textarea:focus{outline:none;border-color:var(--color-accent-600); box-shadow:0 0 0 3px var(--color-accent-100)} /* KEYBOARD FOCUS ON A FORM CONTROL MUST BE VISIBLE, NOT MERELY TINTED. `input:focus{outline:none}` on the line above is specificity (0,1,1) and the global ring at § 5 (`:focus-visible`) is (0,1,0), so the rule that exists to soften a MOUSE click was silently cancelling the keyboard ring on exactly the controls a data-entry product is made of. Measured in Chromium at file:// on module-rfis.html, read after the .14s transition settles rather than during it (mid-transition the computed value is the interpolated one and reports a ring that is not there yet): the 3px --color-accent-100 halo #f7e4d4 on --color-card = 1.13:1 the only other signal, the 1px border moving --color-neutral-300 -> --color-accent-500 = 2.12:1 state change Neither is a focus indicator anyone can find on a dense form. --color-accent-600 is 4.51:1 on --color-card and 4.15:1 on --color-bg, and is the same ink the global :focus-visible ring already uses, so this restores the system's own answer rather than a second one; box-shadow is cleared so the halo and the ring do not stack. :focus-visible (not :focus) is deliberate: a text field matches it however it was focused, while a