/* ──────────────────────────────────────────────────────────────────────
* controlsfreak.dev — shared design system
*
* Every page links this file ().
* It holds the whole vocabulary: the :root custom properties (the theme —
* change colors here, not in pages) and the component classes (.tool-card,
* .tabs, .form-row, .result-panel, .site-nav, …). Pages should be built
* from these, not freshly styled.
*
* Page-specific CSS still lives inline on the page that needs it
* (e.g. contact.html's honeypot/intro rules) — only genuinely shared rules
* belong here. The 11ty build templates the HTML chrome and passthrough-
* copies this file unchanged; the browser loads it directly, no bundler or
* preprocessor in the pipeline.
* ────────────────────────────────────────────────────────────────────── */
/* ── THEME TOKENS — dual, DARK-DEFAULT, two registers ──────────────────
* `:root` is the DARK theme (the default); `:root[data-theme="light"]`
* below overrides it back to ≈ the pre-redesign look. A before-paint
* bootstrap in _includes/head.njk sets data-theme from cf_theme, else
* prefers-color-scheme; the nav toggle + /scripts/theme.js flip it at
* runtime. See CLAUDE.md "Design system" for the two-register model.
*
* SOFTWARE REGISTER = the default chrome (carries the whole site):
* "Niagara AX with a dark mode" — cool blue-slate, AX-SHARP (square
* corners via --rail:0, hard 1px seams, flat fills, no floating
* shadows). Green = brand/action; blue = data/selection.
*
* EQUIPMENT REGISTER = the --dev-* / --lcd-* tokens at the bottom of
* this block: a warm device face + positive-mode dot-matrix character
* LCD, used ONLY where a page depicts real hardware (VFD/DMM sims,
* device widgets, the one readout in a tool that shows a field value).
* These stay CONSTANT across themes — a device is a device either way,
* so the light override deliberately does NOT touch them (nor --rail).
* ──────────────────────────────────────────────────────────────────── */
/* ── SELF-HOSTED FONTS ──
Latin woff2 subsets, served from our origin (audit-2026-06 #33,
owner decision 2026-06-10): the render-blocking Google Fonts CSS
made FCP hostage to fonts.googleapis.com (measured 624ms → 3.4s
with a slow fonts origin), and it was the only non-essential
third-party origin on the site. Both families are OFL-licensed
(see assets/fonts/LICENSE.txt). Glyph coverage is identical to what
Google served this site before: no greek/math subset existed, so
Δ / ≈ / → always came from system fallbacks and still do. The
unicode-range is Google's latin subset range, kept so fallback
behavior matches exactly. Overpass ships as one variable file
covering weights 300–700; IBM Plex Mono as five static instances
(the 700 landed 2026-07-26 — until then the site's font-weight:700
mono rules silently resolved to the 600 file; see #216).
FONT FILES ARE IMMUTABLE BY NAME — if a font is ever re-subset,
rename the file (the Worker serves /assets/fonts/* with
max-age=31536000, immutable). */
@font-face {
font-family: 'Overpass';
font-style: normal;
font-weight: 300 700;
font-display: swap;
src: url(/assets/fonts/overpass-latin-var.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'IBM Plex Mono';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(/assets/fonts/ibm-plex-mono-latin-400.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'IBM Plex Mono';
font-style: italic;
font-weight: 400;
font-display: swap;
src: url(/assets/fonts/ibm-plex-mono-latin-400-italic.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'IBM Plex Mono';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url(/assets/fonts/ibm-plex-mono-latin-500.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'IBM Plex Mono';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url(/assets/fonts/ibm-plex-mono-latin-600.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'IBM Plex Mono';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url(/assets/fonts/ibm-plex-mono-latin-700.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
:root {
color-scheme: dark;
/* software register — cool blue-slate (the default chrome) */
--bg: #13161b; /* cool slate, near-black — the page floor */
--bg-2: #181c22; /* gutter / recessed chassis */
--surface: #1e232b; /* content panes / software panel face */
--surface-2: #283038; /* panel headers, raised header strips, insets */
--surface-3: #181c22; /* recessed reference / context panels (= --bg-2) */
--well: #11141a; /* deepest recessed field (tree / wiresheet / gauge wells) */
--border: #3c4757; /* cool gray-blue seam — crisp 1px edges */
--border-faint: #2b333d; /* lighter hairline for inner row dividers */
--bevel-hi: rgba(170,195,230,0.06); /* 1px inset highlight on raised chrome */
--bevel-lo: rgba(0,0,0,0.45); /* 1px shade under it */
--accent: #6cb23a; /* the green — brand / action (refined for dark, not neon) */
--accent-bright:#86cf4d;
--accent-ink: #86cf4d; /* accent-colored TEXT that must read at small sizes on the
--accent-dim wash (.tool-tag / .ok-pill) — --accent itself
sits at ~4.1:1 there, an AA small-text fail. The fix is
asymmetric per theme (codebase-issues #166), so it lives in
a purpose token: dark rides --accent-bright's value; light
needs its own deeper green. Dots/borders stay --accent
(3:1 UI floor passes). */
--accent-dim: rgba(108,178,58,0.14);
--accent-glow: rgba(108,178,58,0.24);
--accent-soft: rgba(108,178,58,0.07); /* one notch under --accent-dim — status-pill / inset backdrops */
--text: #c5cdd8; /* cool light-gray body copy */
--text-bright: #eef2f8; /* headings */
--text-dim: #919cab; /* labels, secondary text — bumped one step 2026-06-10: #828d9b sat at 3.97:1 on --surface-2 where TH cells and nav-card pills carry real content (codebase-issues #81) */
--blue: #4aa3dd; /* data readouts / selection (Niagara steel-azure); also "supply water" in diagrams */
--blue-bright: #74c2f0;
--blue-ink: #4aa3dd; /* blue TEXT at small sizes, incl. over the --accent-dim /
selection washes. Dark --blue already clears AA on every
surface it lands on (measured), so this rides its value
unchanged; LIGHT needs a deeper step. Same purpose-token
shape as --accent-ink (codebase-issues #166) and
--red-text. Strokes / fills stay --blue (3:1 UI floor). */
--blue-cool: #6f97aa; /* muted companion to --blue — "return water" in diagrams (paired with a dashed line so it reads without colour too) */
--blue-dim: rgba(74,163,221,0.16);
--blue-glow: rgba(74,163,221,0.24);
--red: #e85d4f; /* fault / alarm */
--red-dim: rgba(232,93,79,0.14); /* faint red wash — quiz wrong-answer fill (parallels --accent-dim) */
--red-text: #f07a6d; /* alarm TEXT on surfaces — --red reads 3.89:1 on
--surface-2 (AA fail at small sizes); this
lighter step computes 4.91:1. Borders/strokes
keep --red (3:1 UI threshold passes). */
--heat: #e8884a; /* warm orange — "heating" on the psychrometric chart's process lines; companion to --blue for cooling */
--heat-fill: #e8884a; /* = --heat — NEVER FOR TEXT. First member of the -fill
family; the family rule:
A -fill token is OBJECT PAINT — the paint a drawn
thing is made of, the mirror of -ink (the paint TYPE
is made of). It answers WCAG 1.4.11's 3:1 NON-TEXT
floor, not 1.4.3's 4.5:1 small-text floor, so it may
run brighter than its base token. Put one in a
color: declaration and you have shipped 3.1:1 body
text. Legal in fill / stroke / border-color /
background; nowhere else. Enforced by
tests/fill-token-misuse.spec.js.
A -fill twin exists ONLY where the light-theme text
floor pushed a hue out of its own name — dark yellow
is olive, dark desaturated orange is brown, but dark
green is still green and dark blue is still blue.
--accent (-20.5 L*) and --blue (-22.4 L*) are
darkened just as hard in light and stay themselves,
so they get no twin. Do not add one for symmetry: an
alias token is a drift generator (the -ink family is
asymmetric for the same reason — there is no
--heat-ink).
Component identity on the DDC equipment graphics —
a heating serpentine, a valve body. Dark rides --heat
unchanged: 6.95:1 on --bg, 5.13:1 on --surface-2, i.e.
1.7-2.3x the non-text floor, and already the warm
orange the convention names, so there is nothing to
fix. Light moves (below). One theme moves and the other
rides is exactly --blue-ink's shape. codebase-issues
#230. */
--teal: #46b3ac; /* teal — data/comm traces on the background schematic (BACnet, IP); also outside-air ducts in the education air diagrams */
--teal-dim: rgba(70,179,172,0.14);
--teal-glow: rgba(70,179,172,0.24);
--teal-ink: #5bbfb9; /* per-section --accent-ink twin (--amber/--plum below too):
the nav-card titlebar pill recolors .ok-pill TEXT via
--section-accent, and the raw hues compute 3.6-4.5:1 on
their -dim washes — an AA small-text fail (codebase-issues
#171, same mechanism as #166). Dots/borders stay on the
raw hue (3:1 UI floor passes). */
--amber: #e0a94a; /* amber — energized control wiring on the background schematic; section accent for /practice/ */
--amber-dim: rgba(224,169,74,0.14);
--amber-glow: rgba(224,169,74,0.26);
--amber-ink: #e0a94a; /* = --amber — dark amber already clears AA (4.86:1);
light needs its own deeper step below */
--amber-fill: #e0a94a; /* = --amber — NEVER FOR TEXT. Object paint for component
identity (a modulating damper's frame and blades); see
the family rule at --heat-fill. Dark rides --amber
unchanged — 8.58:1 on --bg, 6.33:1 on --surface-2,
2.1-2.9x the 3:1 non-text floor, and already the bright
yellow the convention names. Light moves (below). */
--plum: #b783c0; /* plum — logic-signal lines on the background schematic */
--plum-dim: rgba(183,131,192,0.14);
--plum-glow: rgba(183,131,192,0.26);
--plum-ink: #c8a0cf;
/* blueprint graticule (body background) — dark gets a faint grid +
a subtle cool radial wash; light overrides below to the stronger
1.5px grid with no wash (preserves today's drafting-paper feel). */
--grid-line-c: var(--border-faint);
--grid-line-w: 1px;
--grid-wash: rgba(74,163,221,0.05);
/* equipment register — warm device face + dot-matrix LCD. CONSTANT
across themes (the light override leaves these untouched). */
--dev-face: #16140f; /* warm near-black instrument face */
--dev-bezel: #0c0b08;
--dev-edge: #2c2a20; /* warm bezel seam */
--dev-hi: rgba(220,210,170,0.08);
/* Status-LED inks for the device face. Frozen here rather than taken
from the software-register hues these used to share (--accent /
--teal / --amber / --red), because those RETUNE in light theme —
which gave the one register ruled constant across themes a
per-theme LED colour (codebase-issues #280). The values ARE the
dark hues, the set the face was designed and measured against, so
the lit look is the one PR #495 characterised and the change is a
no-op in dark theme. Measured against --dev-face: run 7.07:1,
comm 7.28:1, warn 8.71:1, alarm 5.35:1 — all clear of WCAG
1.4.11's 3:1 non-text floor (an LED is drawn geometry, not type).
Like the --dev-* / --lcd-* tokens above, these are defined ONCE:
no light override, and none in the @media print block either — a
device prints as a device. */
--led-run: #6cb23a;
--led-comm: #46b3ac;
--led-warn: #e0a94a;
--led-alarm: #e85d4f;
--lcd-bg: #adba4e; /* lit olive-green backlight — BMS character LCD */
--lcd-bg-2: #9aa840; /* backlight gradient / vignette */
--lcd-ink: #1b2410; /* dark pixel text */
--lcd-grid: rgba(18,26,6,0.18); /* unlit pixel-mesh gaps */
--mono: 'IBM Plex Mono', monospace;
--sans: 'Overpass', sans-serif;
--rail: 0px; /* AX-sharp: square corners site-wide (both themes) */
}
/* LIGHT THEME — ≈ the pre-redesign look. Flips the software register
back to warm white panels on light gray-green. The equipment
--dev-* / --lcd-* tokens and --rail are deliberately NOT overridden. */
:root[data-theme="light"] {
color-scheme: light;
--bg: #eef1ec;
--bg-2: #e8ece4;
--surface: #ffffff;
--surface-2: #f2f6f1;
--surface-3: #e8ece4;
--well: #e8ece4;
--border: #ccd7c8;
--border-faint: #e3e8df;
--bevel-hi: rgba(255,255,255,0.8);
--bevel-lo: rgba(0,0,0,0.05);
--accent: #3a7a14;
--accent-bright:#428a16;
--accent-ink: #356e12; /* NOT --accent-bright here — brighter WORSENS light-theme
contrast (3.48:1); small accent text needs a deeper green */
--accent-dim: rgba(58,122,20,0.10);
--accent-glow: rgba(58,122,20,0.22);
--accent-soft: rgba(58,122,20,0.06);
--text: #38423a;
--text-bright: #1d251f;
--text-dim: #636b63; /* darkened one step 2026-07-20: #666e66 computed 4.40:1 on the
#e8ece4 surfaces (--surface-3 / --bg-2 / --well share that hex),
an AA small-text fail carrying ~600 elements across 47 selector
shapes — .ref-note worked-example prose and .ps-section-label
headings on 30 pages each, plus widget labels and dense-table
cells. This step computes 4.60:1 there and lifts the other
light surfaces to 4.83-5.51:1. Deliberately the MINIMUM nudge
that clears the floor: dim captions are an intentional scan
hierarchy (codebase-issues #168), so the gap to --text (8.74:1
on the same surface) is preserved. Dark --text-dim already
passes everywhere (4.81-6.63:1) and is untouched.
SCOPE: the sweep behind those numbers compares computed color
against the resolved background, so it only clears elements
whose contrast is determined by color-vs-background alone. It
is blind to a separate `opacity` on the text element — see the
.bit-idx note. Retuning this token does NOT clear those. */
--blue: #11679f;
--blue-bright: #146ea9; /* darkened one step 2026-07-20: #1573b2 computed 4.47:1 on --bg,
an AA small-text fail on the home hero's setpoint readout. This
step reads 4.81:1 there / 5.48:1 on --surface. Kept as its own
token rather than folded into --blue-ink because "bright" is the
EMPHASIS step, and in dark (#74c2f0, 9.25:1) it is what separates
the operable readout from the quiet --blue-ink demo chrome. */
--blue-ink: #0f5c8f; /* deeper than --blue: --blue reads 4.42-4.48:1 as small text
on the selection washes (#d3dfdd hero tree row, #d7e1cf
psy selected row). This step clears 5.28:1 at the worst
of those. It is the QUIET blue-text step; --blue-bright is
the emphasis one and carries its own AA note above. */
--blue-cool: #4d7286;
--blue-dim: rgba(17,103,159,0.10);
--blue-glow: rgba(17,103,159,0.22);
--red: #c4382f;
--red-dim: rgba(196,56,47,0.10);
--red-text: #bb352c; /* darkened 2026-07-20: #c4382f (= light --red) computed
4.44:1 on --surface-3, so the old "light --red already
clears AA on light surfaces" claim was true only of the
brighter surfaces. This step reads 4.80:1 there. */
--heat: #9c5a14;
--heat-fill: #b85400; /* NEVER FOR TEXT (family rule at the dark --heat-fill).
Light --heat is dragged to #9c5a14 by the 4.5:1 text
floor, which is a dark orange-BROWN — brown is literally
desaturated orange, so the correction here is CHROMA, not
lightness: C* 52.7 -> 68.0, L* only 44.8 -> 47.7. Holds
the dark hue angle exactly (57deg; base --heat drifts
57 -> 65deg chasing the text floor), which is what a
reader recognises a colour by. Non-text contrast: 4.88:1
on --surface, 4.28:1 on --bg, 4.08:1 on the strictest
light surface #e8ece4 (--bg-2 / --surface-3 / --well) —
all well over the 3:1 floor. Tuned against #e8ece4 and
not merely against the white the graphic mostly sits on,
because --well-painted ducts are a real backdrop in that
drawing; so the token carries no "only safe on white"
caveat. */
--teal: #377070;
--teal-dim: rgba(55,112,112,0.10);
--teal-glow: rgba(55,112,112,0.22);
--teal-ink: #346b6b;
--amber: #83641f;
--amber-dim: rgba(131,100,31,0.10);
--amber-glow: rgba(131,100,31,0.22);
--amber-ink: #7b5e1d;
--amber-fill: #af7b00; /* NEVER FOR TEXT (family rule at the dark --heat-fill).
Light --amber is dragged to #83641f by the 4.5:1 text
floor, which is an OLIVE — yellow only exists bright, so
the correction here is LIGHTNESS: L* 44.3 -> 55.4 (chroma
follows, 42.2 -> 62.5). Opposite correction to
--heat-fill's, which is why the pair's lightness gap
opens for free: dL* 0.6 -> 7.7, dE76 18.0 -> 26.6 (dark
is 6.8 / 23.1, so light now separates BETTER than dark).
That gap is the greyscale, print and protanope budget —
at dL* 0.6 the light pair really was one colour for a
protanope. Holds the dark hue angle (79deg; base --amber
drifts to 83deg). Non-text contrast: 3.71:1 on --surface,
3.26:1 on --bg, 3.10:1 on the strictest light surface
#e8ece4 — and that last one is an OPERATIVE ratio, not a
safety cushion: the relief damper sits bodily inside a
duct riser painted --well, so a real share of this
token's paint lands on #e8ece4 (measured on the rendered
graphic: ~90 % of the amber pixels are on white, ~8 % on
#e8ece4). The tight one — 0.10 of margin there, deliberate
(the 2026-07-20 --text-dim retune shipped at 4.60:1
against 4.50 on the same surface). Do not brighten
further without re-measuring #e8ece4. */
--plum: #8a5e7e;
--plum-dim: rgba(138,94,126,0.10);
--plum-glow: rgba(138,94,126,0.22);
--plum-ink: #7f5774;
--grid-line-c: var(--border);
--grid-line-w: 1.5px;
--grid-wash: transparent;
}
/* Print always uses the LIGHT token set, regardless of the on-screen
theme (audit-2026-06 #54: browsers drop background fills by default
when printing, so the dark theme's light-on-dark text became
near-white text on unprinted white paper — body 1.60:1, headings
1.12:1, an effectively blank page). The theme is attribute-driven,
so the browser's forced-light print mode can't flip it; this block
does. Duplicates the light set above — keep the two in sync when
retuning light tokens. */
@media print {
:root, :root[data-theme="dark"] {
color-scheme: light;
--bg: #eef1ec;
--bg-2: #e8ece4;
--surface: #ffffff;
--surface-2: #f2f6f1;
--surface-3: #e8ece4;
--well: #e8ece4;
--border: #ccd7c8;
--border-faint: #e3e8df;
--bevel-hi: rgba(255,255,255,0.8);
--bevel-lo: rgba(0,0,0,0.05);
--accent: #3a7a14;
--accent-bright:#428a16;
--accent-ink: #356e12;
--accent-dim: rgba(58,122,20,0.10);
--accent-glow: rgba(58,122,20,0.22);
--accent-soft: rgba(58,122,20,0.06);
--text: #38423a;
--text-bright: #1d251f;
--text-dim: #636b63; /* kept in sync with the light block above */
--blue: #11679f;
--blue-bright: #146ea9; /* kept in sync with the light block above */
--blue-ink: #0f5c8f;
--blue-cool: #4d7286;
--blue-dim: rgba(17,103,159,0.10);
--blue-glow: rgba(17,103,159,0.22);
--red: #c4382f;
--red-dim: rgba(196,56,47,0.10);
--red-text: #bb352c;
--heat: #9c5a14;
--heat-fill: #b85400; /* kept in sync with the light block above */
--teal: #377070;
--teal-dim: rgba(55,112,112,0.10);
--teal-glow: rgba(55,112,112,0.22);
--teal-ink: #346b6b;
--amber: #83641f;
--amber-dim: rgba(131,100,31,0.10);
--amber-glow: rgba(131,100,31,0.22);
--amber-ink: #7b5e1d;
--amber-fill: #af7b00; /* kept in sync with the light block above — and for the
-fill family that sync is load-bearing rather than
tidy: :root still applies under @media print, so a
-fill token missing HERE resolves to the DARK value on
paper. #e0a94a on white is 2.11:1, under the 3:1
non-text floor — dampers would print washed out.
tests/fill-token-misuse.spec.js pins this block
against the light one. */
--plum: #8a5e7e;
--plum-dim: rgba(138,94,126,0.10);
--plum-glow: rgba(138,94,126,0.22);
--plum-ink: #7f5774;
--grid-line-c: var(--border);
--grid-line-w: 1.5px;
--grid-wash: transparent;
}
}
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
background-color: var(--bg);
/* Blueprint graticule behind everything — the grid only reads in the
gutters around/below content, since nav / hero / cards / footer all
paint opaque surfaces over it. Token-driven per theme (the --grid-*
tokens in :root): DARK = a faint 1px grid in --border-faint under a
subtle cool radial wash; LIGHT = the stronger 1.5px --border grid,
no wash (the drafting-paper weight tuned on earlier feedback — 1px /
--border-faint was too quiet, 3-4px crossed into graph-paper
foreground). Hidden on print via the @media print block below. */
background-image:
radial-gradient(130% 80% at 50% -20%, var(--grid-wash), transparent 60%),
linear-gradient(to right, var(--grid-line-c) var(--grid-line-w), transparent var(--grid-line-w)),
linear-gradient(to bottom, var(--grid-line-c) var(--grid-line-w), transparent var(--grid-line-w));
background-size: auto, 40px 40px, 40px 40px;
color: var(--text);
font-family: var(--sans);
font-size: 18px;
line-height: 1.6;
min-height: 100vh;
/* sticky footer: stack nav / (hero?) / main / footer in a flex column
and let main grow, so the footer hugs the viewport bottom on short pages
instead of leaving a big gap underneath. */
display: flex;
flex-direction: column;
/* Stacking context for the gutter schematic SVGs (.schematic-bg),
which sit at z-index:-1 — above body's bg-image grid but below
every content surface (nav, hero, main, footer). Without
isolation:isolate the SVGs would fall behind body's background
and disappear entirely. */
position: relative;
isolation: isolate;
}
main { flex: 1; }
/* Hide the blueprint grid on print — a printable page wants a clean
white background, not drafting paper. (Same posture browsers take
for background-image: most won't print it by default anyway, but
the explicit rule keeps the behavior unambiguous and disables it
under any future print-CSS overrides too.) */
@media print {
body { background-image: none; }
}
/* ──────────────────────────────────────────────────────────────────
* SCHEMATIC BACKGROUND — gutter as-builts
*
* Two narrow vertical strips, one in each side gutter, holding
* inline-SVG schematic motifs (piping, control wiring, function
* blocks). Each motif draws itself in via stroke-dashoffset as it
* scrolls into view — see /scripts/schematic-bg.js for the
* IntersectionObserver that toggles .is-drawn.
*
* The strips paint at z-index:-1 inside body's stacking context, so
* they sit above body's grid background but below every content
* surface (nav, hero, tool-cards, footer). Width tracks the gutter
* via clamp() so the strips stay narrow on narrow viewports and
* never push into the 1120px content column. Below 1240px the
* gutter gets too cramped to read — strips drop out entirely there.
*
* Hidden in print (matches the grid). Reduced-motion: the global
* block at the bottom of this file collapses transition-duration
* to 0.01ms, and schematic-bg.js draws every motif synchronously
* on load instead of observing — so reduced-motion users see the
* end state with no reveal. */
.schematic-bg {
position: absolute;
top: 0;
bottom: 0;
z-index: -1;
pointer-events: none;
/* Fill (almost) all of the gutter on wide displays so motifs scale
up via the SVG's width:100% and read across the strip, not just
the outer half. Capped at 340px so ultra-wide displays don't
balloon them into competing with content. */
width: min(340px, calc((100vw - 1180px) / 2));
overflow: hidden;
}
.schematic-bg--left { left: 8px; }
.schematic-bg--right { right: 8px; }
.sbg-motif {
position: absolute;
left: 0;
top: var(--sbg-y, 0);
width: 100%;
height: auto;
opacity: 0;
transition: opacity 700ms ease;
}
/* `fill: none` on stroked paths is set as an inline presentation
attribute in the partial — left over from when motifs used