@danieldeusing/design 0.1.5 → 0.2.0

package/dist/danieldeusing-design.css

@@ -1,4 +1,4 @@
-/*! danieldeusing-design v0.1.5 | MIT | https://github.com/danieldeusing/danieldeusing-design */
+/*! danieldeusing-design v0.2.0 | MIT | https://github.com/danieldeusing/danieldeusing-design */
 /* ===== reset.css ===== */
 /*
  * danieldeusing-design — minimal reset.
@@ -619,12 +619,135 @@ html.anim-off .cursor-block {
   }
 }
 
+/* ═══════════════════════════════════════════════════════════════════════════════════════════════
+   Shared page vocabulary, promoted from the cockpit portal (2026-08-04).
+
+   Each of these was built once in cockpit/pages/portal.css and then wanted by every other
+   surface. They live here so there is ONE definition — the tabs had already drifted into FOUR
+   page style blocks before being consolidated, which is exactly the failure this move prevents.
+   ═════════════════════════════════════════════════════════════════════════════════════════════ */
+
+/* ── tabs ──────────────────────────────────────────────────────────────────────────────────────
+   Daniel: "I am always searching the tabs. They are not falling into my eyes directly."
+
+   They were low-contrast pills at 0.7 opacity, and the SELECTED one differed from the rest only
+   by a slightly darker border and 8% background — so the row read as six equal chips and the eye
+   had to stop and compare them. This inverts it: the inactive tabs recede to plain muted text
+   with no chrome at all, and the active one is the only thing on the row carrying weight, colour
+   and a fill. Nothing to compare — one thing is loud. */
+.tabs {
+  display: flex; flex-wrap: wrap; gap: 0.15rem; margin: 1.35rem 0 0;
+  border-bottom: 2px solid color-mix(in srgb, var(--border) 80%, transparent);
+}
+.tab {
+  background: transparent; border: 0; margin-bottom: -2px;
+  font: inherit; font-size: 0.86em; cursor: pointer; padding: 0.5rem 0.95rem;
+  color: var(--muted-foreground); transition: background 0.12s ease, color 0.12s ease;
+}
+.tab:hover { color: var(--primary); background: color-mix(in srgb, var(--primary) 10%, transparent); }
+/* FILLED, not underlined. An underline plus a colour shift was still one thin rule and a hue
+   change on a row of same-weight words — Daniel was still hunting for the row. A solid block of
+   --primary with the page background as its text is the highest-contrast pair the theme owns
+   (5.6:1 on warm), and it is the only filled thing on the page, so it is found without reading. */
+.tab[aria-selected="true"] { background: var(--primary); color: var(--background); font-weight: 700; }
+.tab:focus-visible { outline: 2px solid color-mix(in srgb, var(--primary) 55%, transparent); outline-offset: -2px; }
+/* 44px on a touch screen — tabs are the primary navigation of these pages, so they are the last
+   control that should be hard to hit. */
+@media (pointer: coarse), (max-width: 40rem) {
+  .tab { padding: 0.7rem 0.8rem; min-height: 44px; }
+}
+section.doc.tab-panel { margin-top: 1.35rem; }
+
+/* ── fold: progressive disclosure whose affordance is always visible ───────────────────────────
+   The detail behind a visual has to open by TAP — these pages are read from a phone, where hover
+   does not exist — and the control has to be findable WITHOUT hovering, or the detail is simply
+   text that was deleted. Hence a permanent ▸ marker and a full-width summary row rather than
+   anything that appears on hover.
+
+   Pair with a `beforeprint` handler that opens every <details>, or a printout silently loses
+   whatever the closed ones were holding. */
+details.fold { border-top: 1px solid color-mix(in srgb, currentColor 15%, transparent); }
+details.fold > summary {
+  display: flex; align-items: center; gap: 0.5rem; cursor: pointer; list-style: none;
+  padding: 0.55rem 0; font-size: 0.85rem; color: var(--muted-foreground);
+}
+details.fold > summary::-webkit-details-marker { display: none; }
+details.fold > summary::before { content: "\25B8"; flex: none; opacity: 0.6; }
+details.fold[open] > summary::before { content: "\25BE"; }
+details.fold > summary:hover { color: var(--primary); }
+details.fold > summary:focus-visible {
+  outline: 2px solid color-mix(in srgb, currentColor 45%, transparent); outline-offset: 2px;
+}
+.fold-body { font-size: 0.9rem; padding: 0 0 0.7rem 1.1rem; }
+.fold-body > * + * { margin-top: 0.6rem; }
+
+/* ── legend: one rendering of each state, beside the thing it keys ─────────────────────────────
+   An item is `display: block`, NOT flex: a gloss contains <strong>/<code>/<em>, and every one of
+   those would become its own flex item — which is how a single sentence first rendered as four
+   separately-wrapped columns. */
+.legend {
+  list-style: none; padding: 0; margin: 0.7rem 0 0;
+  display: grid; gap: 0.4rem 1.4rem; font-size: 0.86rem;
+}
+@media (min-width: 52rem) { .legend { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
+.legend > li { line-height: 1.6; }
+.legend > li > :first-child { margin-right: 0.45rem; }
+
+/* ── ticker strip: one standard header for every poller ────────────────────────────────────────
+   Daniel: "For all pollers / tickers we should make a standard layout ... on top of the pages,
+   compact and like dashboard style."
+
+   Every poller answers the same four questions — what ran, when, when next, what did it count —
+   and each page was answering them in its own prose box, so "is anything stalled?" took four
+   paragraphs instead of one glance.
+
+   A real TABLE, not a grid per row. The first version made each row its own `display: grid`,
+   which cannot align anything across rows: every row sized its columns to its own content, so
+   `next` sat wherever that row's name happened to end and the layout moved when a label changed.
+   One table means one set of column widths for the whole strip, and scanning a column is the only
+   thing the strip is for. Borderless by design — rules between cells draw a grid nobody reads.
+
+   Colour comes only from --primary and --destructive, both per-theme. Hardcoded accents miss AA
+   on at least one theme (measured 2026-08-04), so a strip inventing its own greens and ambers
+   would have added five more. */
+.tickstrip:not(:empty) { border: 1px solid var(--border); background: var(--card); margin: 0 0 1.25rem; }
+.ticktable { width: 100%; border-collapse: collapse; font-size: 0.82rem; }
+.ticktable td { padding: 0.45rem 0.55rem; vertical-align: baseline; border: 0; white-space: nowrap; }
+/* Only the last column may grow, so the four fixed columns keep the same width on every row. */
+.ticktable td.tick-stats { width: 100%; white-space: normal; }
+.tick { border-bottom: 1px solid color-mix(in srgb, var(--border) 55%, transparent); }
+.tick:last-child { border-bottom: 0; }
+/* The glyph carries the state WITHOUT colour as well as with it — two of the four themes are
+   near-black and a printout has none, so ● vs ✕ vs ○ has to survive on its own. */
+.tick-dot { font-size: 0.7em; width: 1rem; padding-right: 0 !important; }
+.tick--ok    .tick-dot { color: var(--primary); }
+.tick--stale .tick-dot { color: var(--destructive); }
+.tick--never .tick-dot { color: var(--muted-foreground); }
+.tick-name { font-weight: 700; color: var(--primary); }
+.tick-last, .tick-next { font-variant-numeric: tabular-nums; color: var(--muted-foreground); }
+.tick--stale .tick-last { color: var(--destructive); font-weight: 700; }
+.tick--never .tick-last { font-style: italic; }
+/* The NUMBER is what gets scanned; its label is context. Weight and colour on the value alone
+   means a row reads as its numbers first and its wording second. */
+.tick-stats { color: var(--muted-foreground); }
+.tick-stats b { font-weight: 700; color: var(--primary); font-variant-numeric: tabular-nums; }
+.tick-sep { font-style: normal; opacity: 0.35; margin: 0 0.5rem; }
+/* A stale row earns the only background tint in the strip — an all-tinted strip is one the eye
+   stops reading. */
+.tick--stale { background: color-mix(in srgb, var(--destructive) 8%, transparent); }
+@media (max-width: 40rem) {
+  .ticktable, .ticktable tbody, .tick, .ticktable td { display: block; }
+  .tick { padding: 0.4rem 0.5rem; }
+  .ticktable td { display: inline-block; padding: 0.1rem 0.5rem 0.1rem 0; }
+  .ticktable td.tick-stats { display: block; width: auto; }
+}
+
 /* ===== chrome.css ===== */
 /*
  * chrome.css — the app chrome kit: sticky header bar, fixed status footer,
- * and the responsive site navigation (desktop `ls -l` dropdown, mobile
- * burger with the footer folded in). Extracted from danieldeusing.de and
- * the cockpit portal so every app ships the same chrome without rebuilding it.
+ * and the responsive site navigation (desktop `ls -l` RAIL, mobile burger with
+ * the footer folded in). Extracted from danieldeusing.de and the cockpit portal
+ * so every app ships the same chrome without rebuilding it.
  *
  * Markup contract (see templates/documentation.html for the full example):
  *
@@ -633,7 +756,14 @@ html.anim-off .cursor-block {
  *     <a href="/" class="brand"><span class="glow">name</span><span class="cursor-block"></span></a>
  *     <button class="nav-burger" data-nav-toggle aria-controls="site-nav" aria-expanded="false">…☰ svg…</button>
  *     <nav aria-label="site" id="site-nav" class="site-nav">
- *       <details class="dropdown" id="nav">…ls-panel with .ls-row items…</details>
+ *       <div class="ls-nav" id="nav">
+ *         <div class="ls-nav-head">
+ *           <span class="ls-nav-title">ls -l</span>
+ *           <button class="ls-nav-hide" data-ls-nav-toggle aria-controls="nav" aria-expanded="true">»</button>
+ *         </div>
+ *         <ul class="ls-panel">….ls-row items…</ul>
+ *       </div>
+ *       <button class="ls-nav-show" data-ls-nav-toggle aria-controls="nav">« ls -l</button>
  *       <ul class="mobile-nav">…same links as .mobile-item ls-rows…</ul>
  *       <div class="mobile-footer">…footer controls folded in…</div>
  *     </nav>
@@ -641,8 +771,15 @@ html.anim-off .cursor-block {
  *   …
  *   <footer class="status">…status-left + status-right…</footer>
  *
- * Behaviour: pair with `initBurgerNav()` from the runtime (adds the toggle +
- * outside-click close). Breakpoint: 48rem.
+ * Behaviour: pair with `initBurgerNav()` (mobile burger) and `initLsNav()`
+ * (rail show/hide) from the runtime. The rail's SHOWN/HIDDEN state must also be
+ * applied before first paint by an inline <head> script — see the rail section
+ * below for why the runtime cannot be the one to do it:
+ *
+ *   try { if (localStorage.getItem("ls-nav") === "off")
+ *           document.documentElement.dataset.lsNav = "off"; } catch {}
+ *
+ * Breakpoint: 48rem.
  */
 
 /* ── a11y helpers ── */
@@ -682,12 +819,100 @@ footer.status .dropdown summary, footer.status .anim-toggle { padding: 0.55rem 0
 .doc-link { color: var(--muted-foreground); text-decoration: none; transition: color 0.15s ease; }
 .doc-link:hover { color: var(--primary); }
 
-/* ── ls-listing rows (shared by the desktop dropdown + mobile menu) ── */
+/* ── ls-listing rows (shared by the desktop rail + mobile menu) ── */
 .ls-row { display: flex; align-items: baseline; gap: 0.9rem; }
 .ls-perm { color: var(--muted-foreground); font-size: 0.72rem; letter-spacing: 0; }
 .ls-row--sub .ls-name { padding-left: 1rem; }
-.ls-panel { min-width: 17rem; left: auto !important; right: 0; }
-#nav { position: relative; }
+/* The pre-rail dropdown form. Kept, and scoped to the dropdown panel, because the
+   other surfaces still ship that markup — when they unpin they get this file, and
+   their nav should stay right-aligned rather than quietly jumping to the left. The
+   rail's own <ul> carries `ls-panel` WITHOUT `dropdown-panel`, so it is unaffected. */
+.dropdown-panel.ls-panel { min-width: 17rem; left: auto !important; right: 0; }
+
+/* ── `ls -l` site rail (desktop ≥48rem): sticky, full-height, right-hand panel ──
+   Was a dropdown that had to be re-opened on every page. Daniel: "Always make it
+   sticky (default shown) right side, keep `ls -l`, but not down arrow, but
+   something which tells the user he can hide / minimize."
+
+   SHOWN BY DEFAULT, and the state lives in localStorage under "ls-nav". It is
+   applied by an inline <head> script as `html[data-ls-nav="off"]` BEFORE first
+   paint — not by the runtime — because the runtime is a module at the end of
+   <body>: a reader who hid the rail would otherwise watch it paint and then jump
+   away on every single page load. `initLsNav()` only handles the clicks.
+
+   The affordance is deliberately NOT a caret. A caret means "a menu drops from
+   here", which is the thing this stopped being. Guillemets point the way the
+   panel travels — » pushes it off to the right, « pulls it back — and hiding it
+   leaves a small labelled tab on the edge rather than nothing, so a hidden rail
+   is still discoverable by someone who did not hide it themselves.
+
+   Width is one token so a consumer can widen it for longer trees. */
+:root { --ls-nav-w: 17rem; }
+.ls-nav-show { display: none; }
+
+@media (min-width: 48.0625rem) {
+  /* Room is reserved ONLY when a rail is actually in the page, and the default is
+     zero. This is what makes the stylesheet safe to publish ahead of a consumer's
+     markup: every surface that still ships the old dropdown nav (or no nav at all)
+     keeps its full width instead of growing a 17rem gutter with nothing in it —
+     which is exactly what they would have got the moment they unpinned.
+     It also fails in the right direction: if :has() is unavailable the selector is
+     dropped, the inset stays 0, and the rail overlays content rather than the page
+     reserving space for a rail that never arrives. */
+  html { --ls-nav-inset: 0rem; }
+  html:has(.ls-nav):not([data-ls-nav="off"]) { --ls-nav-inset: var(--ls-nav-w); }
+
+  /* Everything in normal flow shifts left, so content sits against the rail's
+     left edge instead of running under it. The fixed footer has to be told
+     separately: `inset-inline: 0` ignores the body's padding. */
+  /* Deliberately NOT transitioned. Animating padding on <body> reflows the whole
+     document every frame, and the pages this ships to render tables of hundreds of
+     rows — the rail's own transform is composited and costs nothing, so the panel
+     slides while the content reflows once. Animating both looked no better and
+     made the containers dashboard stutter on toggle. */
+  body { padding-right: var(--ls-nav-inset); }
+  footer.status { right: var(--ls-nav-inset); }
+
+  .ls-nav {
+    position: fixed; top: 0; right: 0; bottom: 0; width: var(--ls-nav-w); z-index: 45;
+    display: flex; flex-direction: column;
+    background: var(--card); border-left: 1px solid var(--border);
+  }
+  html:not(.anim-off) .ls-nav,
+  html:not(.anim-off) .ls-nav-show { transition: transform 0.18s ease; }
+  html[data-ls-nav="off"] .ls-nav { transform: translateX(100%); }
+
+  .ls-nav-head {
+    flex: none; display: flex; align-items: center; justify-content: space-between; gap: 0.5rem;
+    padding: 0.6rem 0.5rem 0.6rem 0.85rem; border-bottom: 1px solid var(--border);
+  }
+  .ls-nav-title { font-weight: 700; font-size: 0.9rem; }
+
+  /* The list is the only thing that scrolls — the head stays put, so the control
+     that hides the rail cannot be scrolled out of reach. */
+  .ls-nav .ls-panel {
+    flex: 1; min-height: 0; overflow-y: auto;
+    list-style: none; margin: 0; padding: 0.5rem 0 1rem;
+  }
+
+  .ls-nav-hide, .ls-nav-show {
+    background: none; border: 0; font: inherit; cursor: pointer; line-height: 1;
+    color: var(--muted-foreground); padding: 0.4rem 0.55rem;
+  }
+  .ls-nav-hide:hover, .ls-nav-show:hover { color: var(--primary); }
+  .ls-nav-hide:focus-visible, .ls-nav-show:focus-visible {
+    outline: 2px solid color-mix(in srgb, var(--primary) 55%, transparent); outline-offset: -2px;
+  }
+
+  /* The tab that survives hiding. Sits on the right edge, mid-height, and only
+     exists while the rail is away. */
+  html[data-ls-nav="off"] .ls-nav-show {
+    display: inline-flex; align-items: center; gap: 0.4rem;
+    position: fixed; top: 50%; right: 0; z-index: 45; transform: translateY(-50%);
+    background: var(--card); border: 1px solid var(--border); border-right: 0;
+    padding: 0.6rem 0.5rem; font-size: 0.8rem;
+  }
+}
 
 /* ── burger + mobile menu ── */
 .nav-burger {
@@ -708,7 +933,9 @@ footer.status .dropdown summary, footer.status .anim-toggle { padding: 0.55rem 0
     padding: 0.4rem 1.25rem 0.9rem; max-height: calc(100vh - 6rem); overflow-y: auto;
   }
   .site-nav.open { display: block; }
-  .site-nav > .dropdown { display: none; } /* desktop ls-dropdown replaced by the flat list */
+  /* The desktop rail is a desktop idea: a fixed 17rem column would eat a phone.
+     Below the breakpoint the burger owns navigation and the flat list replaces it. */
+  .site-nav > .ls-nav, .ls-nav-show { display: none; }
 
   .mobile-nav { display: flex; flex-direction: column; }
   .mobile-nav .mobile-item {
@@ -760,3 +987,364 @@ span[data-tip], th[data-tip] { border-bottom: 1px dotted var(--muted-foreground)
   text-align: left; white-space: normal; pointer-events: none;
   box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
 }
+
+/* ===== print.css ===== */
+/*
+ * danieldeusing-design — print layer.
+ *
+ * Paper is a different device, not a narrow screen. This layer strips the parts
+ * of the terminal look that only exist to sell "a CRT is running" — scanlines,
+ * phosphor glow, sticky chrome, the reveal animation — and lays the content out
+ * as a document: black on white, 12px body text, sane page breaks.
+ *
+ * Load LAST (index.css imports it after every other layer) so its token
+ * overrides win on source order without needing !important on each one.
+ *
+ * Three things here are load-bearing and easy to lose in a refactor:
+ *
+ *   1. The terminal reveal is forced open. runtime/terminal.js only reveals a
+ *      [data-term-out] once its section scrolls into view, so a long page that
+ *      is printed straight after load has most of its content sitting at
+ *      visibility:hidden. Printing it would silently produce blank pages — the
+ *      reader only finds out on paper. Everything is forced visible here
+ *      regardless of animation state.
+ *   2. `zoom` is reset. Pages that use the resolution-independent zoom trick
+ *      (html.style.zoom = innerWidth / 1920) carry that multiplier into the
+ *      print box, which is what makes a printout come out oversized.
+ *   3. Mermaid bakes the ACTIVE theme's colours into the SVG at render time, so
+ *      a diagram rendered under `green`/`mono` is dark-on-dark on paper no
+ *      matter what the page tokens say. The SVG parts are repainted below.
+ */
+
+@media print {
+  @page {
+    margin: 14mm 12mm;
+  }
+
+  /* ── ink-frugal palette, whatever theme is on screen ────────────────────
+     `html[data-theme]` matches the specificity of the themed token blocks in
+     tokens.css and comes later in the bundle, so it wins for every theme. */
+  :root,
+  html,
+  html[data-theme] {
+    --background: #ffffff;
+    --foreground: #111111;
+    --card: #ffffff;
+    --card-foreground: #111111;
+    --popover: #ffffff;
+    --popover-foreground: #111111;
+    --primary: #000000;
+    --primary-foreground: #ffffff;
+    --secondary: #ffffff;
+    --secondary-foreground: #111111;
+    --muted: #ffffff;
+    --muted-foreground: #444444;
+    --accent: #000000;
+    --accent-foreground: #ffffff;
+    --destructive: #7a1c1c;
+    --border: #9a9a9a;
+    --input: #9a9a9a;
+    --ring: #000000;
+    --glow: transparent;
+    --glow-soft: transparent;
+    --scanline-opacity: 0;
+  }
+
+  /* ── document metrics ──────────────────────────────────────────────────
+     The rem baseline is pinned so the design's rem scale lands where it was
+     drawn, and the body size is stated in px so it is 12px on paper whatever
+     the browser's default font size is. `zoom` is a screen-only device. */
+  html {
+    zoom: 1 !important;
+    font-size: 16px;
+    scroll-behavior: auto;
+  }
+
+  body {
+    background: #ffffff;
+    color: var(--foreground);
+    font-size: 12px;
+    line-height: 1.45;
+    overflow: visible;
+  }
+
+  /* CRT scanline overlay: a fixed, full-viewport gradient — on paper it is a
+     grey wash over the page. */
+  body::after {
+    display: none !important;
+  }
+
+  /* ── nothing animates on paper ─────────────────────────────────────────
+     Also the mechanism that un-hides the terminal reveal: the keyframes use
+     `both`, so killing the animation restores the element's own opacity. */
+  *,
+  *::before,
+  *::after {
+    animation: none !important;
+    transition: none !important;
+    text-shadow: none !important;
+    box-shadow: none !important;
+  }
+
+  /* ── the reveal must never decide what lands on paper ──────────────────
+     See note 1 at the top of this file. */
+  html.term-anim [data-term] [data-term-out],
+  html.term-anim [data-term] [data-term-out]:not(.term-show),
+  html.term-anim [data-term] [data-term-out] > * {
+    visibility: visible !important;
+    opacity: 1 !important;
+  }
+  html.term-anim [data-term] .prompt:not(.term-live) {
+    color: var(--muted-foreground) !important;
+  }
+  html.term-anim [data-term] .prompt:not(.term-live)::before {
+    color: var(--primary) !important;
+  }
+
+  /* ── screen-only chrome ────────────────────────────────────────────────
+     .toc is the "On this page" navigator: a screen affordance with no meaning
+     on paper, and the first thing that makes a printout look broken. */
+  header.bar,
+  footer.status,
+  .site-nav,
+  .nav-burger,
+  .mobile-nav,
+  .mobile-footer,
+  .skip-link,
+  .dropdown,
+  .dropdown-panel,
+  .anim-toggle,
+  .cursor-block,
+  .term-caret,
+  .ascii-rule,
+  .toc,
+  #ddtip {
+    display: none !important;
+  }
+
+  /* The `ls -l` rail sits inside .site-nav, so the rule above already hides it —
+     but the room it reserved is padding on the BODY, and that would print as a
+     17rem gutter down the right of every page. Hiding a fixed element does not
+     reclaim the space something else was told to leave for it. */
+  body {
+    padding-right: 0 !important;
+  }
+
+  [data-tip] {
+    cursor: auto;
+  }
+  span[data-tip],
+  th[data-tip] {
+    border-bottom: 0;
+  }
+
+  /* ── layout: the page is the column ────────────────────────────────────
+     .wrap/.layout/.content are the documentation-template vocabulary shipped
+     in templates/documentation.html. */
+  .wrap {
+    max-width: none !important;
+    margin: 0 !important;
+    padding: 0 !important;
+  }
+  .layout {
+    display: block !important;
+  }
+  .content {
+    min-width: 0;
+  }
+
+  /* ── heading hierarchy against a 12px body ─────────────────────────────
+     24 / 18 / 16 / 14 px. !important because page-level rules give these
+     classes a higher specificity than a bare element selector. */
+  h1,
+  .title {
+    font-size: 1.5rem !important;
+  }
+  h2 {
+    font-size: 1.15rem !important;
+  }
+  h3,
+  .sub {
+    font-size: 1rem !important;
+  }
+  h4 {
+    font-size: 0.9rem !important;
+  }
+
+  .prompt {
+    font-size: 0.7rem;
+  }
+
+  /* ── page breaks ───────────────────────────────────────────────────────
+     A heading (or a `$ command` section header) must never be the last thing
+     on a page. Tables break between rows and repeat their header; everything
+     that reads as one unit stays together. */
+  h1,
+  h2,
+  h3,
+  h4,
+  .prompt,
+  .toc-label {
+    break-after: avoid-page;
+    break-inside: avoid;
+  }
+  p,
+  li,
+  blockquote {
+    orphans: 3;
+    widows: 3;
+  }
+  pre,
+  figure,
+  blockquote,
+  tr,
+  img,
+  .eli5,
+  .card-terminal {
+    break-inside: avoid;
+  }
+  /* NOT svg. A mermaid flowchart is routinely taller than a printed page;
+     `break-inside: avoid` on the SVG pushes it past the page boundary while its
+     wrapper stays behind, which prints an entire page as an empty bordered box.
+     Let the SVG break where the wrapper breaks. */
+  svg {
+    break-inside: auto;
+  }
+  thead {
+    display: table-header-group;
+  }
+
+  /* ── nothing scrolls on paper ──────────────────────────────────────────
+     An overflow-x container has no scrollbar in print: whatever sits past the
+     right edge is simply gone. Let it wrap instead. */
+  .table-scroll,
+  pre,
+  .diagram {
+    overflow: visible !important;
+    max-width: 100% !important;
+  }
+  pre {
+    white-space: pre-wrap !important;
+    overflow-wrap: anywhere;
+    font-size: 0.75rem !important;
+    background: transparent !important;
+  }
+  pre.mermaid[data-processed] {
+    white-space: normal !important;
+  }
+  code {
+    background: transparent !important;
+    overflow-wrap: anywhere;
+  }
+
+  table {
+    width: 100% !important;
+    table-layout: auto;
+    border-collapse: collapse;
+    font-size: 0.75rem !important;
+  }
+  /* `overflow-wrap: break-word` and NOT `anywhere`: `anywhere` also shrinks a
+     cell's min-content width to one character, and the auto table layout then
+     collapses a short column to nothing ("Orchestrator" set as "Orche/strat/or"
+     down a 6-character column). Only the elements that actually hold
+     unbreakable strings — paths, URLs, identifiers — get to break anywhere. */
+  th,
+  td {
+    overflow-wrap: break-word;
+    white-space: normal !important;
+  }
+  td code,
+  th code,
+  td a,
+  th a {
+    overflow-wrap: anywhere;
+  }
+
+  /* ── links read as text ────────────────────────────────────────────────
+     The URL is deliberately NOT printed after the link. These are internal
+     documents whose links are mostly in-page anchors and hosts already named
+     in the prose; appending every href would add noise and pages without
+     adding information. To turn it on, add:
+       a[href^="http"]::after { content: " (" attr(href) ")"; } */
+  a {
+    color: inherit;
+    text-decoration: underline;
+    text-underline-offset: 2px;
+  }
+  a.card-terminal,
+  a[class*="card"] {
+    text-decoration: none;
+  }
+
+  .glow,
+  .glow-lg {
+    color: inherit;
+  }
+  .btn-terminal {
+    border: 1px solid var(--border);
+    background: transparent;
+    color: var(--foreground);
+  }
+
+  /* ── mermaid diagrams ──────────────────────────────────────────────────
+     See note 3 at the top of this file: the palette is baked into the SVG at
+     render time, so a diagram rendered under a dark theme prints as dark
+     boxes with invisible labels. Repaint the standard mermaid parts. */
+  /* Every diagram is scaled to fit ONE page. Not cosmetic: Chromium will not
+     start an over-tall diagram in the space left on the current page, so an
+     uncapped flowchart (they run to 2500px in a narrow column) prints a blank
+     page, then an empty bordered box, then the diagram — six such pages in the
+     executor design doc alone. `width/height: auto` with both max-* set is what
+     makes the browser scale it proportionally instead of squashing it.
+     A diagram that ends up too small to read is a diagram that is too tall for
+     paper: split it, or lay it out left-to-right. */
+  .mermaid svg {
+    display: block;
+    margin-inline: auto;
+    width: auto !important;
+    height: auto !important;
+    max-width: 100% !important;
+    max-height: 235mm !important;
+  }
+  .mermaid svg .node rect,
+  .mermaid svg .node polygon,
+  .mermaid svg .node circle,
+  .mermaid svg .node path,
+  .mermaid svg .label-container,
+  .mermaid svg .cluster rect,
+  .mermaid svg .actor,
+  .mermaid svg .note {
+    fill: #ffffff !important;
+    stroke: #333333 !important;
+  }
+  .mermaid svg .edgePath path,
+  .mermaid svg .flowchart-link,
+  .mermaid svg line,
+  .mermaid svg .messageLine0,
+  .mermaid svg .messageLine1 {
+    stroke: #333333 !important;
+  }
+  .mermaid svg .arrowheadPath,
+  .mermaid svg marker path,
+  .mermaid svg marker polygon {
+    fill: #333333 !important;
+    stroke: #333333 !important;
+  }
+  .mermaid svg text,
+  .mermaid svg .nodeLabel,
+  .mermaid svg .edgeLabel,
+  .mermaid svg .cluster-label,
+  .mermaid svg .messageText,
+  .mermaid svg foreignObject div,
+  .mermaid svg foreignObject span,
+  .mermaid svg p {
+    fill: #111111 !important;
+    color: #111111 !important;
+    background: transparent !important;
+  }
+  .mermaid svg .edgeLabel rect,
+  .mermaid svg .edgeLabel foreignObject > div {
+    fill: #ffffff !important;
+    background: #ffffff !important;
+  }
+}