s. A section may nest .topics — folder-style tabs switching .topic panels — when it genuinely has parallel sub-topics; most don't. Two layout modes share this stylesheet: * DEFAULT (standalone / single-file) — .wrap > .shell = [sticky chapters rail | .sheet], a single measure-capped column centered on the page. * APP-SHELL ( — the mozard-docs hierarchy) — a three-pane shell: a persistent doc-tree .site-nav on the LEFT, the .sheet content column in the MIDDLE, and the on-page TOC (nav.chapters) moved to the RIGHT. The whole assembly is centered and width-capped so wide screens gain navigation, not empty margin. The toolbar aligns to it (logo over the nav rail, search + toggles over the content column). On mobile all three stack content-first. The .site-nav is injected per page by scripts/build_sidenav.py; it is chrome (outside

), so build_pager.py's extractor ignores it. Componentry rules (do not regress): no accent-rail callouts — a colored TOP rule marks category instead of a colored LEFT border; no shadow-lift cards on hover; no border-radius:999px pill badges (small-radius tags instead). Color marks STATE, not decoration: the chapters-rail / site-nav active item gets a fill (+ a 2px brand inset rail on site-nav), the active topic tab gets a 2px brand top rule, table headers get a 2px brand underline. Surfaces read as layers: the toolbar and both nav rails sit on --surface with a real border (and a faint lift on the rails) — never --bg-on-bg, which vanished in light mode. Labels/eyebrows are sans caps; monospace is reserved for code and identifiers (glossary terms, repo names). No external hosts: system font stack only, no @import, no remote url(). Theme: docs open in LIGHT (); the toggle flips light<->dark. The footer is the one instrument surface that stays dark in both themes, where the brand yellow reads well. prefers-color-scheme is a fallback only — the JS toggle never auto-follows the OS/browser preference on load. Language: docs open in ENGLISH (); the toggle flips en<->nl by hiding the inactive paired lang="" content. Brand yellow is used ONLY as fills / rules / borders / on-dark accents — never as text on light, where it fails contrast (use --link, the dark gold, instead). Logo swap: the SVGs have hard-coded fills, so we swap the FILE, never recolor. ============================================================================ */ /* ---- Brand + semantic tokens (light) ------------------------------------ */ :root { --brand: #f6c900; /* Mozard primary yellow (huisstijl $color-primary) */ --brand-contrast: #1f2933; /* dark ink for text ON a yellow fill */ --text: #3a3f45; --text-muted: #6c6d6e; /* Mozard house gray (huisstijl $color-3ggray) */ --text-faint: #9599a0; /* captions, counters, eyebrow tags */ --heading: #1f2933; --bg: #f5f6f8; /* page ground (cards float on it) */ --bg-alt: #eceff3; /* subtle tint (table zebra) */ --surface: #ffffff; /* cards + panels */ --surface-alt: #f7f8fa; /* callouts, thead, diagram surface */ --border: #e3e6e9; --border-strong: #cbd0d6; --link: #8a6d00; /* dark gold — the accessible text-accent on light (~4.6:1) */ --link-hover: #5e4a00; --accent: #f6c900; /* primary yellow: rules, borders, active bars, fills */ --accent-2: #ceab0a; /* Mozard secondary gold (huisstijl $color-secondary) */ --code-bg: #eceff3; --code-text: #24292f; --callout-bg: #f7f8fa; --note-bg: #eef3f7; --note-border: #4f7ea8; --warn-bg: #fdf4e6; --warn-border: #e08a00; --assume-bg: #f4f0f8; --assume-border: #8a72b0; /* Instrument surfaces — ALWAYS dark, in both themes (footer, dark diagrams) */ --ink: #17191c; --ink-2: #23272d; --ink-line: rgba(255,255,255,.14); --ink-text: #c9cdd3; --ink-head: #ffffff; --grid: rgba(31,41,51,.045); /* faint grid on the light instrument surface */ --shadow: 0 1px 2px rgba(17, 24, 39, .06), 0 4px 16px rgba(17, 24, 39, .05); --shadow-rail:0 1px 2px rgba(17, 24, 39, .05), 0 10px 28px -14px rgba(17, 24, 39, .18); --radius: 10px; --radius-sm: 6px; --measure: 66ch; --content-max: 1180px; /* App-shell (docs-site mode) — fixed nav rails + a measure-capped content column, the whole assembly centered so wide screens gain navigation, not empty margin. */ --sidebar-w: 240px; --toc-w: 220px; --shell-gap: 40px; --content-w: 760px; --assembly-w: calc(var(--sidebar-w) + var(--content-w) + var(--toc-w) + 2 * var(--shell-gap)); --font-sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif; --font-mono: ui-monospace, "SFMono-Regular", "Cascadia Code", "JetBrains Mono", Menlo, Consolas, "Liberation Mono", monospace; --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px; } /* ---- Dark tokens: auto, unless a manual light theme is forced ----------- */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --text:#e6e8ea; --text-muted:#9aa0a6; --text-faint:#767b82; --heading:#f2f4f6; --bg:#17191c; --bg-alt:#24272c; --surface:#1e2125; --surface-alt:#24272c; --border:#30343a; --border-strong:#3d424a; --link:#e8c33a; --link-hover:#f6c900; --accent:#f6c900; --accent-2:#d9b62e; --code-bg:#24272c; --code-text:#e6e8ea; --callout-bg:#22252a; --note-bg:#1a2530; --note-border:#5f92c0; --warn-bg:#2b2313; --warn-border:#e0a54f; --assume-bg:#241f2e; --assume-border:#a48fca; --grid:rgba(255,255,255,.05); --shadow:0 1px 2px rgba(0,0,0,.35), 0 6px 22px rgba(0,0,0,.35); --shadow-rail:0 1px 2px rgba(0,0,0,.4), 0 12px 30px -14px rgba(0,0,0,.6); } } /* ---- Manual toggle override (wins over the media query) ----------------- */ :root[data-theme="dark"] { --text:#e6e8ea; --text-muted:#9aa0a6; --text-faint:#767b82; --heading:#f2f4f6; --bg:#17191c; --bg-alt:#24272c; --surface:#1e2125; --surface-alt:#24272c; --border:#30343a; --border-strong:#3d424a; --link:#e8c33a; --link-hover:#f6c900; --accent:#f6c900; --accent-2:#d9b62e; --code-bg:#24272c; --code-text:#e6e8ea; --callout-bg:#22252a; --note-bg:#1a2530; --note-border:#5f92c0; --warn-bg:#2b2313; --warn-border:#e0a54f; --assume-bg:#241f2e; --assume-border:#a48fca; --grid:rgba(255,255,255,.05); --shadow:0 1px 2px rgba(0,0,0,.35), 0 6px 22px rgba(0,0,0,.35); } /* ---- Reset / base ------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--font-sans); font-size: 17px; line-height: 1.55; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-wrap: break-word; transition: background .25s ease, color .25s ease; } img, svg, video { max-width: 100%; height: auto; } /* The UA stylesheet hides [hidden] with a plain `display: none`, so ANY author rule that sets display beats it. .stamp does (inline-flex), which left every `