@danieldeusing/design 0.2.0 → 0.3.1

package/dist/danieldeusing-design.css

@@ -1,4 +1,4 @@
-/*! danieldeusing-design v0.2.0 | MIT | https://github.com/danieldeusing/danieldeusing-design */
+/*! danieldeusing-design v0.3.1 | MIT | https://github.com/danieldeusing/danieldeusing-design */
 /* ===== reset.css ===== */
 /*
  * danieldeusing-design — minimal reset.
@@ -87,6 +87,26 @@ table {
  * These are plain CSS custom properties — they work in any framework, any
  * browser, with or without a build step. Load this file first; base.css and
  * components.css resolve against the variables declared here.
+ *
+ * ── WHY EVERY ACCENT IS PER-THEME, AND WHY A LITERAL IS NEVER OK ──
+ * A status colour has to clear WCAG AA 4.5:1 against every surface it can land
+ * on — --background, --card AND --muted. Do that arithmetic across the four
+ * themes and the two admissible luminance bands DO NOT OVERLAP:
+ *
+ *   light themes: darkest surface is warm's --muted  #ece3cf -> accent L <= 0.1328
+ *   dark themes:  lightest surface is green's --muted #071509 -> accent L >= 0.2021
+ *                                   (mono's #111111 wants      accent L >= 0.2002)
+ *
+ * A gap of 0.0692 with nothing in it. So NO single hex can serve four themes:
+ * the two near-black themes need a light tint, the two light themes a dark one,
+ * and every compromise fails both. That is arithmetic, not taste — which is why
+ * --destructive, --success and --warning are each declared four times.
+ *
+ * Cockpit carried twelve hardcoded accents that predate these tokens; every one
+ * missed AA on at least one theme and four sat inside the gap, clearing neither
+ * side. Adding a status colour? Add a TOKEN here with its measured worst-case
+ * ratio in a trailing comment. Do not tune a literal at the call site — that
+ * forks the palette and fixes exactly one theme.
  */
 
 :root {
@@ -105,6 +125,8 @@ table {
   --accent: #8a4516;
   --accent-foreground: #f8f3e8;
   --destructive: #a02c2c;
+  --success: #1a6b2e;      /* 5.16:1 worst surface */
+  --warning: #845600;      /* 4.97:1 worst surface */
   --border: #d9cdb6;
   --input: #d9cdb6;
   --ring: #8a4516;
@@ -135,6 +157,8 @@ html[data-theme="green"] {
   --accent: #33ff66;
   --accent-foreground: #02160a;
   --destructive: #ff5c5c;
+  --success: #4ade80;      /* 10.76:1 worst surface */
+  --warning: #f5b32b;      /* 10.15:1 worst surface */
   --border: #1c4a2c;
   --input: #1c4a2c;
   --ring: #33ff66;
@@ -160,6 +184,8 @@ html[data-theme="mono"] {
   --accent: #ffffff;
   --accent-foreground: #050505;
   --destructive: #ff5c5c;
+  --success: #4ade80;      /* 10.84:1 worst surface */
+  --warning: #f5b32b;      /* 10.22:1 worst surface */
   --border: #333333;
   --input: #333333;
   --ring: #ffffff;
@@ -185,6 +211,8 @@ html[data-theme="paper"] {
   --accent: #000000;
   --accent-foreground: #fafafa;
   --destructive: #b3261e;
+  --success: #1a7031;      /* 5.36:1 worst surface */
+  --warning: #8f5d00;      /* 4.89:1 worst surface */
   --border: #d4d4d4;
   --input: #d4d4d4;
   --ring: #000000;
@@ -712,19 +740,30 @@ details.fold > summary:focus-visible {
    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; }
+.ticktable td { padding: 0.5rem 0.75rem; 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); }
+/* State reads THREE ways, so it survives every context: the GLYPH (two themes are near-black and
+   a printout has no colour at all), the COLOUR, and a left edge-marker that makes a bad row
+   findable by shape alone when the strip is scanned rather than read. */
+.tick-dot {
+  font-size: 0.7em; width: 1.5rem; padding-right: 0 !important;
+  border-left: 3px solid transparent; padding-left: 0.6rem !important;
+}
+/* --success is per-theme and AA-measured (0.3.0). `ok` used to borrow --primary — the BRAND
+   colour — so a healthy poller and the page heading were the same ink, and "everything is fine"
+   had to be read rather than seen. */
+.tick--ok    .tick-dot { color: var(--success); border-left-color: color-mix(in srgb, var(--success) 45%, transparent); }
+.tick--stale .tick-dot { color: var(--destructive); border-left-color: var(--destructive); }
+.tick--never .tick-dot { color: var(--muted-foreground); border-left-color: color-mix(in srgb, var(--muted-foreground) 35%, transparent); }
+/* The NAME is an identifier, not an accent. Making it --primary put brand colour on every row of
+   a strip whose entire job is that the exceptions stand out. */
+.tick-name { font-weight: 700; color: var(--foreground); letter-spacing: 0.01em; }
 .tick-last, .tick-next { font-variant-numeric: tabular-nums; color: var(--muted-foreground); }
+/* "next 57s" is a prediction; the age beside it is an observation. It should not compete. */
+.tick-next { opacity: 0.72; }
 .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
@@ -742,6 +781,51 @@ details.fold > summary:focus-visible {
   .ticktable td.tick-stats { display: block; width: auto; }
 }
 
+/* ── zoomable diagrams ────────────────────────────────────────────────────────────────────────
+   An architecture diagram authored for a text column is unreadable at exactly the moment someone
+   needs it. Pair with `initDiagramZoom()`: every `.diagram` becomes a real button that opens
+   full-screen, fitted to the viewport, then zoomable and pannable.
+
+   The affordance has to be visible without hovering — this portal is read from a phone — so the
+   corner hint is always drawn, not revealed on :hover. */
+.dgm-zoomable { position: relative; cursor: zoom-in; }
+.dgm-zoomable::after {
+  content: "⤢"; position: absolute; top: 0.4rem; right: 0.5rem;
+  font-size: 0.85rem; line-height: 1; opacity: 0.45; pointer-events: none;
+  color: var(--muted-foreground);
+}
+.dgm-zoomable:hover::after, .dgm-zoomable:focus-visible::after { opacity: 1; color: var(--primary); }
+.dgm-zoomable:focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; }
+
+html.dgm-locked, html.dgm-locked body { overflow: hidden; }
+
+.dgm-overlay {
+  display: none; position: fixed; inset: 0; z-index: 90;
+  background: color-mix(in srgb, var(--background) 96%, transparent);
+  flex-direction: column;
+}
+.dgm-overlay.open { display: flex; }
+.dgm-bar {
+  flex: none; display: flex; align-items: center; justify-content: flex-end; gap: 0.4rem;
+  padding: 0.5rem 0.75rem; border-bottom: 1px solid var(--border); background: var(--card);
+}
+.dgm-btn {
+  font: inherit; font-size: 0.82rem; cursor: pointer; padding: 0.3rem 0.7rem; min-height: 32px;
+  background: transparent; border: 1px solid var(--border); color: var(--foreground);
+}
+.dgm-btn:hover { border-color: var(--primary); color: var(--primary); }
+.dgm-btn:focus-visible { outline: 2px solid var(--primary); outline-offset: 1px; }
+.dgm-close { border-color: color-mix(in srgb, var(--destructive) 55%, transparent); color: var(--destructive); }
+.dgm-close:hover { border-color: var(--destructive); color: var(--destructive); }
+/* The stage clips; the artwork inside it is what moves. Transforming a wrapper rather than the
+   svg keeps mermaid's own geometry untouched. */
+.dgm-stage { flex: 1; overflow: hidden; display: grid; place-items: center; cursor: grab; touch-action: none; }
+.dgm-stage.is-grabbing { cursor: grabbing; }
+.dgm-art { transform-origin: center center; will-change: transform; }
+.dgm-art > svg, .dgm-art > img { display: block; max-width: none; max-height: none; }
+
+@media print { .dgm-overlay, .dgm-zoomable::after { display: none !important; } }
+
 /* ===== chrome.css ===== */
 /*
  * chrome.css — the app chrome kit: sticky header bar, fixed status footer,
@@ -846,8 +930,20 @@ footer.status .dropdown summary, footer.status .anim-toggle { padding: 0.55rem 0
    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.
 
+   THE HEADER AND FOOTER WIN. The rail runs BETWEEN them — it never covers the bar
+   or the status line, and both keep their full width. Daniel: "the right sidebar
+   then should not overlay footer and header. Footer and header wins."
+   That also buys the better toggle behaviour: with the rail starting below the
+   bar, `ls -l` sits at ONE fixed spot whether the rail is open or shut, so the
+   only thing that changes is which way the arrow points. The reader never has to
+   go looking for a control that moved.
+
+   --ls-nav-top/--ls-nav-bottom are measured off the real chrome by initLsNav()
+   and written onto <html>; the values here are fallbacks that keep the layout
+   sane if the runtime never arrives.
+
    Width is one token so a consumer can widen it for longer trees. */
-:root { --ls-nav-w: 17rem; }
+:root { --ls-nav-w: 17rem; --ls-nav-top: 3rem; --ls-nav-bottom: 2.2rem; }
 .ls-nav-show { display: none; }
 
 @media (min-width: 48.0625rem) {
@@ -862,19 +958,30 @@ footer.status .dropdown summary, footer.status .anim-toggle { padding: 0.55rem 0
   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
+  /* Content shifts left to sit against the rail's edge — but the CHROME does not.
+     The header bar and the status footer pull back out to full width with a
+     negative margin, so the rail begins below one and ends above the other rather
+     than covering either. Applied to the body rather than to a `main` selector
+     because the design system cannot know a consumer's content wrapper: every
+     block child shifts, and the two that must not are named explicitly.
+
+     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. */
+     slides while the content reflows once. */
   body { padding-right: var(--ls-nav-inset); }
-  footer.status { right: var(--ls-nav-inset); }
-
+  /* Only the HEADER needs pulling back out. It is `position: sticky`, i.e. still
+     in flow, so the body's padding narrows it. The footer is `position: fixed`
+     with `inset-inline: 0`, which ignores body padding and is already full width
+     — giving it the same negative margin pushed it 272px PAST the viewport edge
+     (measured 1099px against an 842px viewport). Fixed and in-flow siblings look
+     alike in the markup and do not behave alike here. */
+  header.bar { margin-right: calc(-1 * var(--ls-nav-inset)); }
+
+  /* Between the chrome, never over it. */
   .ls-nav {
-    position: fixed; top: 0; right: 0; bottom: 0; width: var(--ls-nav-w); z-index: 45;
+    position: fixed; top: var(--ls-nav-top); right: 0; bottom: var(--ls-nav-bottom);
+    width: var(--ls-nav-w); z-index: 25;
     display: flex; flex-direction: column;
     background: var(--card); border-left: 1px solid var(--border);
   }
@@ -904,13 +1011,17 @@ footer.status .dropdown summary, footer.status .anim-toggle { padding: 0.55rem 0
     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. */
+  /* The tab that survives hiding — TOP RIGHT, in the header band, which is where
+     `ls -l` has always lived (it was a header dropdown before it was a rail) and
+     where the rail's own title sits when it is open. An earlier version centred it
+     vertically on the right edge: correct as a drawer handle, wrong here, because
+     it moved the one control the reader is looking for to a place navigation has
+     never been. Same corner open or closed. */
   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%);
+    position: fixed; top: var(--ls-nav-top); right: 0; z-index: 25;
     background: var(--card); border: 1px solid var(--border); border-right: 0;
-    padding: 0.6rem 0.5rem; font-size: 0.8rem;
+    border-top: 0; padding: 0.6rem 0.85rem; font-size: 0.9rem; font-weight: 700;
   }
 }
 

package/dist/danieldeusing-design.min.css

@@ -1,2 +1,2 @@
-/*! danieldeusing-design v0.2.0 | MIT | https://github.com/danieldeusing/danieldeusing-design */
-*,*::before,*::after{box-sizing: border-box}*{margin: 0}html{-webkit-text-size-adjust: 100%;text-size-adjust: 100%;tab-size: 4}body{min-height: 100vh;min-height: 100dvh;line-height: 1.5}img,picture,video,canvas,svg{display: block;max-width: 100%}input,button,textarea,select{font: inherit;color: inherit}p,h1,h2,h3,h4,h5,h6{overflow-wrap: break-word}ul,ol{list-style: none;padding: 0}a{color: inherit;text-decoration: none}table{border-collapse: collapse}:root{--background: #f5efe2;--foreground: #43352a;--card: #efe7d4;--card-foreground: #43352a;--popover: #efe7d4;--popover-foreground: #43352a;--primary: #8a4516;--primary-foreground: #f8f3e8;--secondary: #ece3cf;--secondary-foreground: #43352a;--muted: #ece3cf;--muted-foreground: #71614e;--accent: #8a4516;--accent-foreground: #f8f3e8;--destructive: #a02c2c;--border: #d9cdb6;--input: #d9cdb6;--ring: #8a4516;--glow: rgba(160,82,45,0.1);--glow-soft: rgba(160,82,45,0.05);--scanline-opacity: 0.15;--radius: 0rem;--font-mono: "JetBrains Mono Variable","JetBrains Mono","Menlo",monospace}html[data-theme="green"]{--background: #020604;--foreground: #4fdd7d;--card: #04110a;--card-foreground: #4fdd7d;--popover: #04110a;--popover-foreground: #4fdd7d;--primary: #33ff66;--primary-foreground: #02160a;--secondary: #071509;--secondary-foreground: #4fdd7d;--muted: #071509;--muted-foreground: #3da45e;--accent: #33ff66;--accent-foreground: #02160a;--destructive: #ff5c5c;--border: #1c4a2c;--input: #1c4a2c;--ring: #33ff66;--glow: rgba(51,255,102,0.35);--glow-soft: rgba(51,255,102,0.12);--scanline-opacity: 0.5}html[data-theme="mono"]{--background: #050505;--foreground: #d4d4d4;--card: #0d0d0d;--card-foreground: #d4d4d4;--popover: #0d0d0d;--popover-foreground: #d4d4d4;--primary: #ffffff;--primary-foreground: #050505;--secondary: #111111;--secondary-foreground: #d4d4d4;--muted: #111111;--muted-foreground: #8a8a8a;--accent: #ffffff;--accent-foreground: #050505;--destructive: #ff5c5c;--border: #333333;--input: #333333;--ring: #ffffff;--glow: rgba(255,255,255,0.25);--glow-soft: rgba(255,255,255,0.08);--scanline-opacity: 0.45}html[data-theme="paper"]{--background: #fafafa;--foreground: #1f1f1f;--card: #f1f1f1;--card-foreground: #1f1f1f;--popover: #f1f1f1;--popover-foreground: #1f1f1f;--primary: #000000;--primary-foreground: #fafafa;--secondary: #efefef;--secondary-foreground: #1f1f1f;--muted: #efefef;--muted-foreground: #595959;--accent: #000000;--accent-foreground: #fafafa;--destructive: #b3261e;--border: #d4d4d4;--input: #d4d4d4;--ring: #000000;--glow: rgba(0,0,0,0.06);--glow-soft: rgba(0,0,0,0.04);--scanline-opacity: 0.12}html{scroll-behavior: smooth}*,*::before,*::after{border-color: var(--border)}:focus-visible{outline: 2px solid var(--ring);outline-offset: 2px}body{background: var(--background);color: var(--foreground);font-family: var(--font-mono);font-size: 0.75rem;line-height: 1.5;overflow-x: hidden;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale}button:not(:disabled),summary,[role="button"]{cursor: pointer}body::after{content: "";position: fixed;inset: 0;z-index: 40;pointer-events: none;background: repeating-linear-gradient( 0deg,rgba(0,0,0,0.25) 0px,rgba(0,0,0,0.25) 1px,transparent 1px,transparent 3px );opacity: var(--scanline-opacity)}::selection{background: var(--primary);color: var(--primary-foreground)}.glow{color: var(--primary);text-shadow: 0 0 8px var(--glow)}.glow-lg{color: var(--primary);text-shadow: 0 0 12px var(--glow)}.prompt{font-size: 0.75rem;font-weight: 700;color: var(--muted-foreground)}.prompt::before{content: "$ ";color: var(--primary)}.comment::before{content: "# ";color: var(--border)}.cursor-block{display: inline-block;width: 0.55em;height: 1em;margin-left: 8px;background: var(--primary);vertical-align: baseline;transform: translateY(0.12em);animation: ddd-blink 1.1s step-end infinite}@keyframes ddd-blink{50%{opacity: 0}}.btn-terminal{display: inline-block;background: var(--primary);color: var(--primary-foreground);font-weight: 700;padding: 12px 24px;box-shadow: 0 0 16px var(--glow);transition: box-shadow 0.15s ease,transform 0.15s ease}.btn-terminal::before{content: "> "}.btn-terminal:hover{box-shadow: 0 0 28px var(--glow);transform: translateY(-2px)}.link-quiet{color: var(--muted-foreground);text-decoration: underline;text-underline-offset: 4px;transition: color 0.15s ease}.link-quiet:hover{color: var(--primary)}.anim-toggle{display: inline-flex;align-items: center;gap: 6px;font: inherit;color: var(--muted-foreground);background: none;border: 0;cursor: pointer;transition: color 0.15s ease}.anim-toggle:hover{color: var(--primary)}.anim-toggle[aria-pressed="true"] [data-anim-box]{color: var(--primary)}.dd-dot{display: inline-block;width: 11px;height: 11px;flex: none;border-radius: 50%;background: currentColor}.dd-flag{display: inline-block;width: 15px;height: 10px;flex: none;border: 1px solid var(--border);background-size: cover;background-repeat: no-repeat}.dd-flag-de{background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 12'><rect width='18' height='4' fill='%23262626'/><rect y='4' width='18' height='4' fill='%23c83232'/><rect y='8' width='18' height='4' fill='%23e8be32'/></svg>")}.dd-flag-en{background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 12'><rect width='18' height='12' fill='%23b22234'/><rect y='4' width='18' height='4' fill='%23ececec'/><rect width='8' height='6' fill='%233c3b6e'/></svg>")}.dd-flag-pt{background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 12'><rect width='18' height='12' fill='%231c9148'/><polygon points='9,1.5 15.5,6 9,10.5 2.5,6' fill='%23e8c832'/><rect x='8' y='5' width='2' height='2' fill='%232c3f87'/></svg>")}.dd-flag-es{background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 12'><rect width='6' height='12' fill='%2315734c'/><rect x='6' width='6' height='12' fill='%23ececec'/><rect x='12' width='6' height='12' fill='%23bf2233'/><rect x='8' y='5' width='2' height='2' fill='%237a5c3a'/></svg>")}.ascii-rule{margin: 1rem 0;border: 0;color: var(--border);line-height: 1;white-space: nowrap;overflow: hidden;user-select: none}.ascii-rule::before{content: "────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────"}.card-terminal{background: var(--card);border: 1px solid var(--border);transition: border-color 0.15s ease,box-shadow 0.15s ease}.card-terminal:hover{border-color: var(--primary);box-shadow: 0 0 20px var(--glow-soft)}.dropdown{position: relative}.dropdown>summary{display: inline-flex;align-items: center;gap: 6px;cursor: pointer;user-select: none;list-style: none;color: var(--muted-foreground);transition: color 0.15s ease}.dropdown>summary::-webkit-details-marker{display: none}.dropdown>summary:hover,.dropdown[open]>summary{color: var(--primary)}.dropdown-panel{position: absolute;right: 0;bottom: calc(100% + 12px);z-index: 50;min-width: 128px;margin: 0;padding: 4px 0;list-style: none;background: var(--card);border: 1px solid var(--border);border-radius: 0;box-shadow: 0 0 20px var(--glow-soft)}.dropdown-panel--down{top: calc(100% + 8px);bottom: auto;left: 0;right: auto}.dropdown-item{display: flex;align-items: center;gap: 8px;width: 100%;padding: 5px 14px;text-align: left;font: inherit;line-height: 1.5;background: none;border: 0;color: var(--muted-foreground);cursor: pointer;white-space: nowrap;transition: color 0.15s ease}.dropdown-item:hover{color: var(--primary);background: var(--muted)}.dropdown-item[aria-current="true"],html:not([data-theme]) .dropdown-item[data-theme-value="warm"],html[data-theme="green"] .dropdown-item[data-theme-value="green"],html[data-theme="mono"] .dropdown-item[data-theme-value="mono"],html[data-theme="paper"] .dropdown-item[data-theme-value="paper"],html[data-theme="warm"] .dropdown-item[data-theme-value="warm"]{color: var(--primary);text-shadow: 0 0 8px var(--glow)}.eli5{margin: 1.25em 0;padding: 0.7em 1em;color: var(--foreground);background: color-mix(in srgb,var(--primary) 7%,var(--card));border: 1px solid var(--border);border-left: 3px solid var(--primary);border-radius: var(--radius);font-size: 0.92em;line-height: 1.6}.eli5::before{content: "ELI5";display: inline-flex;align-items: center;justify-content: center;margin-right: 0.6em;vertical-align: 0.08em;font-family: var(--font-mono);font-size: 0.72em;font-weight: 700;line-height: 1;letter-spacing: 0.04em;padding: 0.34em 0.6em;border-radius: 5px;background: #b42318;color: #fff}.eli5-term{font-weight: 700;color: var(--primary)}html.anim-off *,html.anim-off *::before,html.anim-off *::after{animation: none !important}html.anim-off .cursor-block{display: none}@media (prefers-reduced-motion: no-preference){html.term-anim [data-term] .prompt:not(.term-live),html.term-anim [data-term] .prompt:not(.term-live)::before{color: transparent}html.term-anim [data-term] [data-term-out]:not(.term-show){visibility: hidden}html.term-anim [data-term] [data-term-out].term-show{animation: ddd-term-output 0.2s steps(3,end) both}@keyframes ddd-term-output{from{opacity: 0}}html.term-anim [data-term] [data-term-out].term-show>*{animation: ddd-term-output 0.25s steps(3,end) both}html.term-anim [data-term] [data-term-out].term-show>*:nth-child(2){animation-delay: 0.09s}html.term-anim [data-term] [data-term-out].term-show>*:nth-child(3){animation-delay: 0.18s}html.term-anim [data-term] [data-term-out].term-show>*:nth-child(4){animation-delay: 0.27s}html.term-anim [data-term] [data-term-out].term-show>*:nth-child(5){animation-delay: 0.36s}html.term-anim [data-term] [data-term-out].term-show>*:nth-child(6){animation-delay: 0.45s}html.term-anim [data-term] [data-term-out].term-show>*:nth-child(7){animation-delay: 0.54s}html.term-anim [data-term] [data-term-out].term-show>*:nth-child(8){animation-delay: 0.63s}html.term-anim [data-term] [data-term-out].term-show>*:nth-child(9){animation-delay: 0.72s}html.term-anim [data-term] [data-term-out].term-show>*:nth-child(10){animation-delay: 0.81s}html.term-anim [data-term] [data-term-out].term-show>*:nth-child(n + 11){animation-delay: 0.9s}.term-caret{display: inline-block;width: 0.55em;height: 1em;margin-left: 2px;background: var(--primary);vertical-align: baseline;transform: translateY(0.12em)}}.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)}.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}@media (pointer: coarse),(max-width: 40rem){.tab{padding: 0.7rem 0.8rem;min-height: 44px}}section.doc.tab-panel{margin-top: 1.35rem}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{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}.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}.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}.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}.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}.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}}.skip-link{position: absolute;left: -999px;top: 0;z-index: 100;background: var(--card);border: 1px solid var(--primary);padding: 0.5rem 1rem;color: var(--primary)}.skip-link:focus{left: 0.5rem;top: 0.5rem}.visually-hidden{position: absolute;width: 1px;height: 1px;overflow: hidden;clip: rect(0 0 0 0);white-space: nowrap}header.bar{position: sticky;top: 0;z-index: 30;display: flex;align-items: center;justify-content: space-between;gap: 1rem;padding: 0.6rem 1.25rem;border-bottom: 1px solid var(--border);background: var(--card)}header.bar .brand{display: inline-flex;align-items: center;font-weight: 700;font-size: 1rem}header.bar .brand,header.bar .brand a{color: inherit;text-decoration: none}header.bar .dropdown summary{padding: 0.6rem 0.4rem}.bar-right{display: flex;align-items: center;gap: 1rem;flex-shrink: 0}footer.status{position: fixed;inset-inline: 0;bottom: 0;z-index: 50;min-height: 2rem;display: flex;align-items: center;justify-content: space-between;gap: 1rem;padding: 0.35rem 1.25rem;border-top: 1px solid var(--border);background: var(--card);font-size: 0.7rem}footer.status .dropdown summary,footer.status .anim-toggle{padding: 0.55rem 0.4rem}.status-left{color: var(--muted-foreground);min-width: 0;overflow: hidden;text-overflow: ellipsis;white-space: nowrap}.status-right{display: flex;align-items: center;gap: 1rem;flex-shrink: 0}.sep{width: 1px;height: 0.9rem;background: var(--border)}.doc-link{color: var(--muted-foreground);text-decoration: none;transition: color 0.15s ease}.doc-link:hover{color: var(--primary)}.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}.dropdown-panel.ls-panel{min-width: 17rem;left: auto !important;right: 0}:root{--ls-nav-w: 17rem}.ls-nav-show{display: none}@media (min-width: 48.0625rem){html{--ls-nav-inset: 0rem}html:has(.ls-nav):not([data-ls-nav="off"]){--ls-nav-inset: var(--ls-nav-w)}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}.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}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}}.nav-burger{display: none;background: none;border: 0;color: var(--muted-foreground);cursor: pointer;padding: 0.55rem;margin: -0.3rem -0.3rem -0.3rem 0}.nav-burger:hover{color: var(--primary)}.mobile-nav{display: none;list-style: none;margin: 0;padding: 0}.mobile-footer{display: none}@media (max-width: 48rem){.nav-burger{display: inline-flex;align-items: center}.site-nav{display: none;position: absolute;top: 100%;left: 0;right: 0;z-index: 40;background: var(--card);border-bottom: 1px solid var(--border);padding: 0.4rem 1.25rem 0.9rem;max-height: calc(100vh - 6rem);overflow-y: auto}.site-nav.open{display: block}.site-nav>.ls-nav,.ls-nav-show{display: none}.mobile-nav{display: flex;flex-direction: column}.mobile-nav .mobile-item{display: flex;align-items: baseline;gap: 0.9rem;padding: 0.65rem 0;text-decoration: none;color: var(--foreground);font-size: 0.9rem;border-bottom: 1px solid var(--border)}.mobile-nav li:last-child .mobile-item{border-bottom: 0}.mobile-nav .mobile-item:active .ls-name,.mobile-nav .mobile-item:hover .ls-name{color: var(--primary)}footer.status{display: none}.mobile-footer{display: flex;flex-direction: column;gap: 0.55rem;margin-top: 0.8rem;border-top: 1px solid var(--border);padding-top: 0.8rem;font-size: 0.85rem}.mobile-footer .doc-link{padding: 0.2rem 0}.mobile-footer .mobile-theme summary{list-style: none;display: flex;align-items: center;gap: 0.5rem;color: var(--muted-foreground);cursor: pointer;padding: 0.2rem 0}.mobile-footer .mobile-theme summary::-webkit-details-marker{display: none}.mobile-footer .mf-chev{margin-left: auto;opacity: 0.7}.mobile-footer .mf-panel{display: flex;flex-direction: column;margin-top: 0.3rem}.mobile-footer .mf-panel .dropdown-item{text-align: left;padding: 0.4rem 0.6rem}.mobile-footer .anim-toggle{display: inline-flex;gap: 0.5rem;align-items: center;background: none;border: 0;padding: 0.2rem 0;color: var(--muted-foreground);font: inherit;cursor: pointer}}[data-tip]{cursor: help}span[data-tip],th[data-tip]{border-bottom: 1px dotted var(--muted-foreground)}#ddtip{position: fixed;z-index: 9999;display: none;max-width: 340px;background: var(--background);color: var(--foreground);border: 1px solid var(--muted-foreground);border-radius: 4px;padding: 7px 10px;font-size: 0.72rem;line-height: 1.45;font-weight: 400;text-align: left;white-space: normal;pointer-events: none;box-shadow: 0 4px 14px rgba(0,0,0,0.25)}@media print{@page{margin: 14mm 12mm}: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}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}body::after{display: none !important}*,*::before,*::after{animation: none !important;transition: none !important;text-shadow: none !important;box-shadow: none !important}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}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}body{padding-right: 0 !important}[data-tip]{cursor: auto}span[data-tip],th[data-tip]{border-bottom: 0}.wrap{max-width: none !important;margin: 0 !important;padding: 0 !important}.layout{display: block !important}.content{min-width: 0}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}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}svg{break-inside: auto}thead{display: table-header-group}.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}th,td{overflow-wrap: break-word;white-space: normal !important}td code,th code,td a,th a{overflow-wrap: anywhere}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 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}}
+/*! danieldeusing-design v0.3.1 | MIT | https://github.com/danieldeusing/danieldeusing-design */
+*,*::before,*::after{box-sizing: border-box}*{margin: 0}html{-webkit-text-size-adjust: 100%;text-size-adjust: 100%;tab-size: 4}body{min-height: 100vh;min-height: 100dvh;line-height: 1.5}img,picture,video,canvas,svg{display: block;max-width: 100%}input,button,textarea,select{font: inherit;color: inherit}p,h1,h2,h3,h4,h5,h6{overflow-wrap: break-word}ul,ol{list-style: none;padding: 0}a{color: inherit;text-decoration: none}table{border-collapse: collapse}:root{--background: #f5efe2;--foreground: #43352a;--card: #efe7d4;--card-foreground: #43352a;--popover: #efe7d4;--popover-foreground: #43352a;--primary: #8a4516;--primary-foreground: #f8f3e8;--secondary: #ece3cf;--secondary-foreground: #43352a;--muted: #ece3cf;--muted-foreground: #71614e;--accent: #8a4516;--accent-foreground: #f8f3e8;--destructive: #a02c2c;--success: #1a6b2e;--warning: #845600;--border: #d9cdb6;--input: #d9cdb6;--ring: #8a4516;--glow: rgba(160,82,45,0.1);--glow-soft: rgba(160,82,45,0.05);--scanline-opacity: 0.15;--radius: 0rem;--font-mono: "JetBrains Mono Variable","JetBrains Mono","Menlo",monospace}html[data-theme="green"]{--background: #020604;--foreground: #4fdd7d;--card: #04110a;--card-foreground: #4fdd7d;--popover: #04110a;--popover-foreground: #4fdd7d;--primary: #33ff66;--primary-foreground: #02160a;--secondary: #071509;--secondary-foreground: #4fdd7d;--muted: #071509;--muted-foreground: #3da45e;--accent: #33ff66;--accent-foreground: #02160a;--destructive: #ff5c5c;--success: #4ade80;--warning: #f5b32b;--border: #1c4a2c;--input: #1c4a2c;--ring: #33ff66;--glow: rgba(51,255,102,0.35);--glow-soft: rgba(51,255,102,0.12);--scanline-opacity: 0.5}html[data-theme="mono"]{--background: #050505;--foreground: #d4d4d4;--card: #0d0d0d;--card-foreground: #d4d4d4;--popover: #0d0d0d;--popover-foreground: #d4d4d4;--primary: #ffffff;--primary-foreground: #050505;--secondary: #111111;--secondary-foreground: #d4d4d4;--muted: #111111;--muted-foreground: #8a8a8a;--accent: #ffffff;--accent-foreground: #050505;--destructive: #ff5c5c;--success: #4ade80;--warning: #f5b32b;--border: #333333;--input: #333333;--ring: #ffffff;--glow: rgba(255,255,255,0.25);--glow-soft: rgba(255,255,255,0.08);--scanline-opacity: 0.45}html[data-theme="paper"]{--background: #fafafa;--foreground: #1f1f1f;--card: #f1f1f1;--card-foreground: #1f1f1f;--popover: #f1f1f1;--popover-foreground: #1f1f1f;--primary: #000000;--primary-foreground: #fafafa;--secondary: #efefef;--secondary-foreground: #1f1f1f;--muted: #efefef;--muted-foreground: #595959;--accent: #000000;--accent-foreground: #fafafa;--destructive: #b3261e;--success: #1a7031;--warning: #8f5d00;--border: #d4d4d4;--input: #d4d4d4;--ring: #000000;--glow: rgba(0,0,0,0.06);--glow-soft: rgba(0,0,0,0.04);--scanline-opacity: 0.12}html{scroll-behavior: smooth}*,*::before,*::after{border-color: var(--border)}:focus-visible{outline: 2px solid var(--ring);outline-offset: 2px}body{background: var(--background);color: var(--foreground);font-family: var(--font-mono);font-size: 0.75rem;line-height: 1.5;overflow-x: hidden;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale}button:not(:disabled),summary,[role="button"]{cursor: pointer}body::after{content: "";position: fixed;inset: 0;z-index: 40;pointer-events: none;background: repeating-linear-gradient( 0deg,rgba(0,0,0,0.25) 0px,rgba(0,0,0,0.25) 1px,transparent 1px,transparent 3px );opacity: var(--scanline-opacity)}::selection{background: var(--primary);color: var(--primary-foreground)}.glow{color: var(--primary);text-shadow: 0 0 8px var(--glow)}.glow-lg{color: var(--primary);text-shadow: 0 0 12px var(--glow)}.prompt{font-size: 0.75rem;font-weight: 700;color: var(--muted-foreground)}.prompt::before{content: "$ ";color: var(--primary)}.comment::before{content: "# ";color: var(--border)}.cursor-block{display: inline-block;width: 0.55em;height: 1em;margin-left: 8px;background: var(--primary);vertical-align: baseline;transform: translateY(0.12em);animation: ddd-blink 1.1s step-end infinite}@keyframes ddd-blink{50%{opacity: 0}}.btn-terminal{display: inline-block;background: var(--primary);color: var(--primary-foreground);font-weight: 700;padding: 12px 24px;box-shadow: 0 0 16px var(--glow);transition: box-shadow 0.15s ease,transform 0.15s ease}.btn-terminal::before{content: "> "}.btn-terminal:hover{box-shadow: 0 0 28px var(--glow);transform: translateY(-2px)}.link-quiet{color: var(--muted-foreground);text-decoration: underline;text-underline-offset: 4px;transition: color 0.15s ease}.link-quiet:hover{color: var(--primary)}.anim-toggle{display: inline-flex;align-items: center;gap: 6px;font: inherit;color: var(--muted-foreground);background: none;border: 0;cursor: pointer;transition: color 0.15s ease}.anim-toggle:hover{color: var(--primary)}.anim-toggle[aria-pressed="true"] [data-anim-box]{color: var(--primary)}.dd-dot{display: inline-block;width: 11px;height: 11px;flex: none;border-radius: 50%;background: currentColor}.dd-flag{display: inline-block;width: 15px;height: 10px;flex: none;border: 1px solid var(--border);background-size: cover;background-repeat: no-repeat}.dd-flag-de{background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 12'><rect width='18' height='4' fill='%23262626'/><rect y='4' width='18' height='4' fill='%23c83232'/><rect y='8' width='18' height='4' fill='%23e8be32'/></svg>")}.dd-flag-en{background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 12'><rect width='18' height='12' fill='%23b22234'/><rect y='4' width='18' height='4' fill='%23ececec'/><rect width='8' height='6' fill='%233c3b6e'/></svg>")}.dd-flag-pt{background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 12'><rect width='18' height='12' fill='%231c9148'/><polygon points='9,1.5 15.5,6 9,10.5 2.5,6' fill='%23e8c832'/><rect x='8' y='5' width='2' height='2' fill='%232c3f87'/></svg>")}.dd-flag-es{background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 12'><rect width='6' height='12' fill='%2315734c'/><rect x='6' width='6' height='12' fill='%23ececec'/><rect x='12' width='6' height='12' fill='%23bf2233'/><rect x='8' y='5' width='2' height='2' fill='%237a5c3a'/></svg>")}.ascii-rule{margin: 1rem 0;border: 0;color: var(--border);line-height: 1;white-space: nowrap;overflow: hidden;user-select: none}.ascii-rule::before{content: "────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────"}.card-terminal{background: var(--card);border: 1px solid var(--border);transition: border-color 0.15s ease,box-shadow 0.15s ease}.card-terminal:hover{border-color: var(--primary);box-shadow: 0 0 20px var(--glow-soft)}.dropdown{position: relative}.dropdown>summary{display: inline-flex;align-items: center;gap: 6px;cursor: pointer;user-select: none;list-style: none;color: var(--muted-foreground);transition: color 0.15s ease}.dropdown>summary::-webkit-details-marker{display: none}.dropdown>summary:hover,.dropdown[open]>summary{color: var(--primary)}.dropdown-panel{position: absolute;right: 0;bottom: calc(100% + 12px);z-index: 50;min-width: 128px;margin: 0;padding: 4px 0;list-style: none;background: var(--card);border: 1px solid var(--border);border-radius: 0;box-shadow: 0 0 20px var(--glow-soft)}.dropdown-panel--down{top: calc(100% + 8px);bottom: auto;left: 0;right: auto}.dropdown-item{display: flex;align-items: center;gap: 8px;width: 100%;padding: 5px 14px;text-align: left;font: inherit;line-height: 1.5;background: none;border: 0;color: var(--muted-foreground);cursor: pointer;white-space: nowrap;transition: color 0.15s ease}.dropdown-item:hover{color: var(--primary);background: var(--muted)}.dropdown-item[aria-current="true"],html:not([data-theme]) .dropdown-item[data-theme-value="warm"],html[data-theme="green"] .dropdown-item[data-theme-value="green"],html[data-theme="mono"] .dropdown-item[data-theme-value="mono"],html[data-theme="paper"] .dropdown-item[data-theme-value="paper"],html[data-theme="warm"] .dropdown-item[data-theme-value="warm"]{color: var(--primary);text-shadow: 0 0 8px var(--glow)}.eli5{margin: 1.25em 0;padding: 0.7em 1em;color: var(--foreground);background: color-mix(in srgb,var(--primary) 7%,var(--card));border: 1px solid var(--border);border-left: 3px solid var(--primary);border-radius: var(--radius);font-size: 0.92em;line-height: 1.6}.eli5::before{content: "ELI5";display: inline-flex;align-items: center;justify-content: center;margin-right: 0.6em;vertical-align: 0.08em;font-family: var(--font-mono);font-size: 0.72em;font-weight: 700;line-height: 1;letter-spacing: 0.04em;padding: 0.34em 0.6em;border-radius: 5px;background: #b42318;color: #fff}.eli5-term{font-weight: 700;color: var(--primary)}html.anim-off *,html.anim-off *::before,html.anim-off *::after{animation: none !important}html.anim-off .cursor-block{display: none}@media (prefers-reduced-motion: no-preference){html.term-anim [data-term] .prompt:not(.term-live),html.term-anim [data-term] .prompt:not(.term-live)::before{color: transparent}html.term-anim [data-term] [data-term-out]:not(.term-show){visibility: hidden}html.term-anim [data-term] [data-term-out].term-show{animation: ddd-term-output 0.2s steps(3,end) both}@keyframes ddd-term-output{from{opacity: 0}}html.term-anim [data-term] [data-term-out].term-show>*{animation: ddd-term-output 0.25s steps(3,end) both}html.term-anim [data-term] [data-term-out].term-show>*:nth-child(2){animation-delay: 0.09s}html.term-anim [data-term] [data-term-out].term-show>*:nth-child(3){animation-delay: 0.18s}html.term-anim [data-term] [data-term-out].term-show>*:nth-child(4){animation-delay: 0.27s}html.term-anim [data-term] [data-term-out].term-show>*:nth-child(5){animation-delay: 0.36s}html.term-anim [data-term] [data-term-out].term-show>*:nth-child(6){animation-delay: 0.45s}html.term-anim [data-term] [data-term-out].term-show>*:nth-child(7){animation-delay: 0.54s}html.term-anim [data-term] [data-term-out].term-show>*:nth-child(8){animation-delay: 0.63s}html.term-anim [data-term] [data-term-out].term-show>*:nth-child(9){animation-delay: 0.72s}html.term-anim [data-term] [data-term-out].term-show>*:nth-child(10){animation-delay: 0.81s}html.term-anim [data-term] [data-term-out].term-show>*:nth-child(n + 11){animation-delay: 0.9s}.term-caret{display: inline-block;width: 0.55em;height: 1em;margin-left: 2px;background: var(--primary);vertical-align: baseline;transform: translateY(0.12em)}}.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)}.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}@media (pointer: coarse),(max-width: 40rem){.tab{padding: 0.7rem 0.8rem;min-height: 44px}}section.doc.tab-panel{margin-top: 1.35rem}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{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}.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.5rem 0.75rem;vertical-align: baseline;border: 0;white-space: nowrap}.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}.tick-dot{font-size: 0.7em;width: 1.5rem;padding-right: 0 !important;border-left: 3px solid transparent;padding-left: 0.6rem !important}.tick--ok .tick-dot{color: var(--success);border-left-color: color-mix(in srgb,var(--success) 45%,transparent)}.tick--stale .tick-dot{color: var(--destructive);border-left-color: var(--destructive)}.tick--never .tick-dot{color: var(--muted-foreground);border-left-color: color-mix(in srgb,var(--muted-foreground) 35%,transparent)}.tick-name{font-weight: 700;color: var(--foreground);letter-spacing: 0.01em}.tick-last,.tick-next{font-variant-numeric: tabular-nums;color: var(--muted-foreground)}.tick-next{opacity: 0.72}.tick--stale .tick-last{color: var(--destructive);font-weight: 700}.tick--never .tick-last{font-style: italic}.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}.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}}.dgm-zoomable{position: relative;cursor: zoom-in}.dgm-zoomable::after{content: "⤢";position: absolute;top: 0.4rem;right: 0.5rem;font-size: 0.85rem;line-height: 1;opacity: 0.45;pointer-events: none;color: var(--muted-foreground)}.dgm-zoomable:hover::after,.dgm-zoomable:focus-visible::after{opacity: 1;color: var(--primary)}.dgm-zoomable:focus-visible{outline: 2px solid var(--primary);outline-offset: 3px}html.dgm-locked,html.dgm-locked body{overflow: hidden}.dgm-overlay{display: none;position: fixed;inset: 0;z-index: 90;background: color-mix(in srgb,var(--background) 96%,transparent);flex-direction: column}.dgm-overlay.open{display: flex}.dgm-bar{flex: none;display: flex;align-items: center;justify-content: flex-end;gap: 0.4rem;padding: 0.5rem 0.75rem;border-bottom: 1px solid var(--border);background: var(--card)}.dgm-btn{font: inherit;font-size: 0.82rem;cursor: pointer;padding: 0.3rem 0.7rem;min-height: 32px;background: transparent;border: 1px solid var(--border);color: var(--foreground)}.dgm-btn:hover{border-color: var(--primary);color: var(--primary)}.dgm-btn:focus-visible{outline: 2px solid var(--primary);outline-offset: 1px}.dgm-close{border-color: color-mix(in srgb,var(--destructive) 55%,transparent);color: var(--destructive)}.dgm-close:hover{border-color: var(--destructive);color: var(--destructive)}.dgm-stage{flex: 1;overflow: hidden;display: grid;place-items: center;cursor: grab;touch-action: none}.dgm-stage.is-grabbing{cursor: grabbing}.dgm-art{transform-origin: center center;will-change: transform}.dgm-art>svg,.dgm-art>img{display: block;max-width: none;max-height: none}@media print{.dgm-overlay,.dgm-zoomable::after{display: none !important}}.skip-link{position: absolute;left: -999px;top: 0;z-index: 100;background: var(--card);border: 1px solid var(--primary);padding: 0.5rem 1rem;color: var(--primary)}.skip-link:focus{left: 0.5rem;top: 0.5rem}.visually-hidden{position: absolute;width: 1px;height: 1px;overflow: hidden;clip: rect(0 0 0 0);white-space: nowrap}header.bar{position: sticky;top: 0;z-index: 30;display: flex;align-items: center;justify-content: space-between;gap: 1rem;padding: 0.6rem 1.25rem;border-bottom: 1px solid var(--border);background: var(--card)}header.bar .brand{display: inline-flex;align-items: center;font-weight: 700;font-size: 1rem}header.bar .brand,header.bar .brand a{color: inherit;text-decoration: none}header.bar .dropdown summary{padding: 0.6rem 0.4rem}.bar-right{display: flex;align-items: center;gap: 1rem;flex-shrink: 0}footer.status{position: fixed;inset-inline: 0;bottom: 0;z-index: 50;min-height: 2rem;display: flex;align-items: center;justify-content: space-between;gap: 1rem;padding: 0.35rem 1.25rem;border-top: 1px solid var(--border);background: var(--card);font-size: 0.7rem}footer.status .dropdown summary,footer.status .anim-toggle{padding: 0.55rem 0.4rem}.status-left{color: var(--muted-foreground);min-width: 0;overflow: hidden;text-overflow: ellipsis;white-space: nowrap}.status-right{display: flex;align-items: center;gap: 1rem;flex-shrink: 0}.sep{width: 1px;height: 0.9rem;background: var(--border)}.doc-link{color: var(--muted-foreground);text-decoration: none;transition: color 0.15s ease}.doc-link:hover{color: var(--primary)}.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}.dropdown-panel.ls-panel{min-width: 17rem;left: auto !important;right: 0}:root{--ls-nav-w: 17rem;--ls-nav-top: 3rem;--ls-nav-bottom: 2.2rem}.ls-nav-show{display: none}@media (min-width: 48.0625rem){html{--ls-nav-inset: 0rem}html:has(.ls-nav):not([data-ls-nav="off"]){--ls-nav-inset: var(--ls-nav-w)}body{padding-right: var(--ls-nav-inset)}header.bar{margin-right: calc(-1 * var(--ls-nav-inset))}.ls-nav{position: fixed;top: var(--ls-nav-top);right: 0;bottom: var(--ls-nav-bottom);width: var(--ls-nav-w);z-index: 25;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}.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}html[data-ls-nav="off"] .ls-nav-show{display: inline-flex;align-items: center;gap: 0.4rem;position: fixed;top: var(--ls-nav-top);right: 0;z-index: 25;background: var(--card);border: 1px solid var(--border);border-right: 0;border-top: 0;padding: 0.6rem 0.85rem;font-size: 0.9rem;font-weight: 700}}.nav-burger{display: none;background: none;border: 0;color: var(--muted-foreground);cursor: pointer;padding: 0.55rem;margin: -0.3rem -0.3rem -0.3rem 0}.nav-burger:hover{color: var(--primary)}.mobile-nav{display: none;list-style: none;margin: 0;padding: 0}.mobile-footer{display: none}@media (max-width: 48rem){.nav-burger{display: inline-flex;align-items: center}.site-nav{display: none;position: absolute;top: 100%;left: 0;right: 0;z-index: 40;background: var(--card);border-bottom: 1px solid var(--border);padding: 0.4rem 1.25rem 0.9rem;max-height: calc(100vh - 6rem);overflow-y: auto}.site-nav.open{display: block}.site-nav>.ls-nav,.ls-nav-show{display: none}.mobile-nav{display: flex;flex-direction: column}.mobile-nav .mobile-item{display: flex;align-items: baseline;gap: 0.9rem;padding: 0.65rem 0;text-decoration: none;color: var(--foreground);font-size: 0.9rem;border-bottom: 1px solid var(--border)}.mobile-nav li:last-child .mobile-item{border-bottom: 0}.mobile-nav .mobile-item:active .ls-name,.mobile-nav .mobile-item:hover .ls-name{color: var(--primary)}footer.status{display: none}.mobile-footer{display: flex;flex-direction: column;gap: 0.55rem;margin-top: 0.8rem;border-top: 1px solid var(--border);padding-top: 0.8rem;font-size: 0.85rem}.mobile-footer .doc-link{padding: 0.2rem 0}.mobile-footer .mobile-theme summary{list-style: none;display: flex;align-items: center;gap: 0.5rem;color: var(--muted-foreground);cursor: pointer;padding: 0.2rem 0}.mobile-footer .mobile-theme summary::-webkit-details-marker{display: none}.mobile-footer .mf-chev{margin-left: auto;opacity: 0.7}.mobile-footer .mf-panel{display: flex;flex-direction: column;margin-top: 0.3rem}.mobile-footer .mf-panel .dropdown-item{text-align: left;padding: 0.4rem 0.6rem}.mobile-footer .anim-toggle{display: inline-flex;gap: 0.5rem;align-items: center;background: none;border: 0;padding: 0.2rem 0;color: var(--muted-foreground);font: inherit;cursor: pointer}}[data-tip]{cursor: help}span[data-tip],th[data-tip]{border-bottom: 1px dotted var(--muted-foreground)}#ddtip{position: fixed;z-index: 9999;display: none;max-width: 340px;background: var(--background);color: var(--foreground);border: 1px solid var(--muted-foreground);border-radius: 4px;padding: 7px 10px;font-size: 0.72rem;line-height: 1.45;font-weight: 400;text-align: left;white-space: normal;pointer-events: none;box-shadow: 0 4px 14px rgba(0,0,0,0.25)}@media print{@page{margin: 14mm 12mm}: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}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}body::after{display: none !important}*,*::before,*::after{animation: none !important;transition: none !important;text-shadow: none !important;box-shadow: none !important}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}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}body{padding-right: 0 !important}[data-tip]{cursor: auto}span[data-tip],th[data-tip]{border-bottom: 0}.wrap{max-width: none !important;margin: 0 !important;padding: 0 !important}.layout{display: block !important}.content{min-width: 0}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}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}svg{break-inside: auto}thead{display: table-header-group}.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}th,td{overflow-wrap: break-word;white-space: normal !important}td code,th code,td a,th a{overflow-wrap: anywhere}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 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}}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@danieldeusing/design",
-  "version": "0.2.0",
+  "version": "0.3.1",
   "description": "The danieldeusing terminal design system — framework-agnostic CSS tokens, components, and a vanilla-JS runtime for the CRT/JetBrains-Mono look used across danieldeusing.de, seedr, and briefs.",
   "type": "module",
   "license": "MIT",

package/runtime/diagramzoom.js

@@ -0,0 +1,156 @@
+/*
+ * diagramzoom.js — open any `.diagram` full-screen, then zoom and pan it.
+ *
+ * Markup contract: whatever `.diagram` wraps (a mermaid <svg>, an <img>). No
+ * per-diagram attributes — a diagram is zoomable by virtue of being a diagram,
+ * which is the point: an architecture diagram that has to fit a text column is
+ * unreadable at exactly the moment someone needs it.
+ *
+ * Behaviour: click (or Enter/Space — the wrapper becomes a real button, so this
+ * works from the keyboard and is announced) opens an overlay with the diagram
+ * scaled to FIT the viewport. Wheel zooms about the pointer, drag pans, +/-/0
+ * and the on-screen controls do the same. Escape or a click on the backdrop
+ * closes and returns focus to the diagram that was opened.
+ *
+ * The SVG is CLONED into the overlay rather than moved: mermaid holds references
+ * to the nodes it rendered and re-runs against them (a folded or tabbed diagram
+ * is redrawn when it becomes visible), so moving the original out of the document
+ * and back is how you get a diagram that silently stops updating.
+ */
+const FIT_MARGIN = 0.92; // leave a little air around a fitted diagram
+const MIN_SCALE = 0.2;
+const MAX_SCALE = 12;
+
+export function initDiagramZoom(selector = ".diagram") {
+  const diagrams = Array.from(document.querySelectorAll(selector));
+  if (!diagrams.length) return;
+
+  let overlay, stage, art, closeBtn, opener;
+  let scale = 1, tx = 0, ty = 0, dragging = false, lastX = 0, lastY = 0;
+
+  const apply = () => { art.style.transform = `translate(${tx}px, ${ty}px) scale(${scale})`; };
+  const zoomTo = (next, cx, cy) => {
+    const clamped = Math.min(MAX_SCALE, Math.max(MIN_SCALE, next));
+    if (clamped === scale) return;
+    // keep the point under the cursor stationary
+    const rect = stage.getBoundingClientRect();
+    const px = (cx ?? rect.left + rect.width / 2) - rect.left - rect.width / 2;
+    const py = (cy ?? rect.top + rect.height / 2) - rect.top - rect.height / 2;
+    const ratio = clamped / scale;
+    tx = px - (px - tx) * ratio;
+    ty = py - (py - ty) * ratio;
+    scale = clamped;
+    apply();
+  };
+
+  const build = () => {
+    overlay = document.createElement("div");
+    overlay.className = "dgm-overlay";
+    overlay.setAttribute("role", "dialog");
+    overlay.setAttribute("aria-modal", "true");
+    overlay.setAttribute("aria-label", "diagram, zoomable");
+    overlay.innerHTML =
+      '<div class="dgm-bar">' +
+      '<button type="button" class="dgm-btn" data-dgm="out" aria-label="zoom out">&minus;</button>' +
+      '<button type="button" class="dgm-btn" data-dgm="reset" aria-label="fit to screen">fit</button>' +
+      '<button type="button" class="dgm-btn" data-dgm="in" aria-label="zoom in">+</button>' +
+      '<button type="button" class="dgm-btn dgm-close" data-dgm="close" aria-label="close">close &times;</button>' +
+      "</div><div class=\"dgm-stage\"><div class=\"dgm-art\"></div></div>";
+    document.body.appendChild(overlay);
+    stage = overlay.querySelector(".dgm-stage");
+    art = overlay.querySelector(".dgm-art");
+    closeBtn = overlay.querySelector(".dgm-close");
+
+    overlay.addEventListener("click", (e) => {
+      const act = e.target.closest("[data-dgm]")?.dataset.dgm;
+      if (act === "close" || e.target === stage || e.target === overlay) return close();
+      if (act === "in") return zoomTo(scale * 1.3);
+      if (act === "out") return zoomTo(scale / 1.3);
+      if (act === "reset") return fit();
+    });
+    stage.addEventListener("wheel", (e) => {
+      e.preventDefault();
+      zoomTo(scale * (e.deltaY < 0 ? 1.12 : 1 / 1.12), e.clientX, e.clientY);
+    }, { passive: false });
+    stage.addEventListener("pointerdown", (e) => {
+      dragging = true; lastX = e.clientX; lastY = e.clientY;
+      stage.setPointerCapture(e.pointerId); stage.classList.add("is-grabbing");
+    });
+    stage.addEventListener("pointermove", (e) => {
+      if (!dragging) return;
+      tx += e.clientX - lastX; ty += e.clientY - lastY;
+      lastX = e.clientX; lastY = e.clientY; apply();
+    });
+    const endDrag = () => { dragging = false; stage.classList.remove("is-grabbing"); };
+    stage.addEventListener("pointerup", endDrag);
+    stage.addEventListener("pointercancel", endDrag);
+
+    document.addEventListener("keydown", (e) => {
+      if (!overlay.classList.contains("open")) return;
+      if (e.key === "Escape") { e.preventDefault(); close(); }
+      else if (e.key === "+" || e.key === "=") zoomTo(scale * 1.3);
+      else if (e.key === "-") zoomTo(scale / 1.3);
+      else if (e.key === "0") fit();
+    });
+  };
+
+  const fit = () => {
+    const node = art.firstElementChild;
+    if (!node) return;
+    // Measure the artwork at 1x, not through the current transform.
+    const prev = art.style.transform;
+    art.style.transform = "none";
+    const box = node.getBoundingClientRect();
+    art.style.transform = prev;
+    const s = stage.getBoundingClientRect();
+    scale = box.width && box.height
+      ? Math.min((s.width * FIT_MARGIN) / box.width, (s.height * FIT_MARGIN) / box.height)
+      : 1;
+    tx = ty = 0;
+    apply();
+  };
+
+  const close = () => {
+    overlay.classList.remove("open");
+    document.documentElement.classList.remove("dgm-locked");
+    art.replaceChildren();
+    opener?.focus();
+  };
+
+  const open = (source) => {
+    if (!overlay) build();
+    const node = source.querySelector("svg, img, canvas");
+    if (!node) return;
+    opener = source;
+    // Measure the ORIGINAL while it is still laid out. The clone needs a definite
+    // pixel size: a mermaid svg is sized by `width="100%"` plus an inline
+    // max-width, and both resolve against a parent — dropping them to "let it
+    // fill" gives an svg with only a viewBox, which collapses to 0x0 in an
+    // auto-sized box and makes fit() scale nothing (measured exactly that).
+    const box = node.getBoundingClientRect();
+    const copy = node.cloneNode(true);
+    copy.style.maxWidth = copy.style.maxHeight = "none";
+    if (box.width && box.height) {
+      copy.setAttribute("width", box.width);
+      copy.setAttribute("height", box.height);
+      copy.style.width = `${box.width}px`;
+      copy.style.height = `${box.height}px`;
+    }
+    art.replaceChildren(copy);
+    overlay.classList.add("open");
+    document.documentElement.classList.add("dgm-locked");
+    requestAnimationFrame(fit);
+    closeBtn.focus();
+  };
+
+  for (const d of diagrams) {
+    d.classList.add("dgm-zoomable");
+    d.setAttribute("role", "button");
+    d.setAttribute("tabindex", "0");
+    d.setAttribute("aria-label", "open diagram, zoomable");
+    d.addEventListener("click", () => open(d));
+    d.addEventListener("keydown", (e) => {
+      if (e.key === "Enter" || e.key === " ") { e.preventDefault(); open(d); }
+    });
+  }
+}

package/runtime/index.js

@@ -17,4 +17,5 @@ export * from "./anim.js";
 export * from "./terminal.js";
 export * from "./nav.js";
 export * from "./lsnav.js";
+export * from "./diagramzoom.js";
 export * from "./tooltip.js";

package/runtime/lsnav.js

@@ -28,11 +28,37 @@
  */
 const KEY = "ls-nav";
 
+/*
+ * The rail runs BETWEEN the chrome — it must not cover the header bar or the
+ * status footer. Their heights are a consumer's business and change with the
+ * viewport, so they are measured here and published as --ls-nav-top /
+ * --ls-nav-bottom rather than guessed at in CSS. chrome.css carries fallbacks,
+ * so a page that never runs this still lays out sensibly.
+ *
+ * Keeping `ls -l` at one fixed spot is the point: the rail's head and the tab
+ * that replaces it share --ls-nav-top, so opening and closing changes the arrow
+ * and nothing else moves.
+ */
+function measureChrome() {
+  const root = document.documentElement;
+  const bar = document.querySelector("header.bar");
+  const status = document.querySelector("footer.status");
+  // A hidden footer (mobile folds it into the burger) contributes nothing.
+  const visible = (el) => el && el.getBoundingClientRect().height > 0;
+  if (visible(bar)) root.style.setProperty("--ls-nav-top", `${bar.getBoundingClientRect().height}px`);
+  root.style.setProperty("--ls-nav-bottom", visible(status) ? `${status.getBoundingClientRect().height}px` : "0px");
+}
+
 export function initLsNav() {
   const root = document.documentElement;
   const toggles = document.querySelectorAll("[data-ls-nav-toggle]");
   if (!toggles.length) return;
 
+  measureChrome();
+  addEventListener("resize", measureChrome);
+  // The bar reflows when webfonts land, which changes its height after first paint.
+  if (document.fonts?.ready) document.fonts.ready.then(measureChrome).catch(() => {});
+
   const shown = () => root.dataset.lsNav !== "off";
   const sync = () => {
     for (const button of toggles) button.setAttribute("aria-expanded", String(shown()));

package/src/chrome.css

@@ -101,8 +101,20 @@ footer.status .dropdown summary, footer.status .anim-toggle { padding: 0.55rem 0
    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.
 
+   THE HEADER AND FOOTER WIN. The rail runs BETWEEN them — it never covers the bar
+   or the status line, and both keep their full width. Daniel: "the right sidebar
+   then should not overlay footer and header. Footer and header wins."
+   That also buys the better toggle behaviour: with the rail starting below the
+   bar, `ls -l` sits at ONE fixed spot whether the rail is open or shut, so the
+   only thing that changes is which way the arrow points. The reader never has to
+   go looking for a control that moved.
+
+   --ls-nav-top/--ls-nav-bottom are measured off the real chrome by initLsNav()
+   and written onto <html>; the values here are fallbacks that keep the layout
+   sane if the runtime never arrives.
+
    Width is one token so a consumer can widen it for longer trees. */
-:root { --ls-nav-w: 17rem; }
+:root { --ls-nav-w: 17rem; --ls-nav-top: 3rem; --ls-nav-bottom: 2.2rem; }
 .ls-nav-show { display: none; }
 
 @media (min-width: 48.0625rem) {
@@ -117,19 +129,30 @@ footer.status .dropdown summary, footer.status .anim-toggle { padding: 0.55rem 0
   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
+  /* Content shifts left to sit against the rail's edge — but the CHROME does not.
+     The header bar and the status footer pull back out to full width with a
+     negative margin, so the rail begins below one and ends above the other rather
+     than covering either. Applied to the body rather than to a `main` selector
+     because the design system cannot know a consumer's content wrapper: every
+     block child shifts, and the two that must not are named explicitly.
+
+     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. */
+     slides while the content reflows once. */
   body { padding-right: var(--ls-nav-inset); }
-  footer.status { right: var(--ls-nav-inset); }
-
+  /* Only the HEADER needs pulling back out. It is `position: sticky`, i.e. still
+     in flow, so the body's padding narrows it. The footer is `position: fixed`
+     with `inset-inline: 0`, which ignores body padding and is already full width
+     — giving it the same negative margin pushed it 272px PAST the viewport edge
+     (measured 1099px against an 842px viewport). Fixed and in-flow siblings look
+     alike in the markup and do not behave alike here. */
+  header.bar { margin-right: calc(-1 * var(--ls-nav-inset)); }
+
+  /* Between the chrome, never over it. */
   .ls-nav {
-    position: fixed; top: 0; right: 0; bottom: 0; width: var(--ls-nav-w); z-index: 45;
+    position: fixed; top: var(--ls-nav-top); right: 0; bottom: var(--ls-nav-bottom);
+    width: var(--ls-nav-w); z-index: 25;
     display: flex; flex-direction: column;
     background: var(--card); border-left: 1px solid var(--border);
   }
@@ -159,13 +182,17 @@ footer.status .dropdown summary, footer.status .anim-toggle { padding: 0.55rem 0
     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. */
+  /* The tab that survives hiding — TOP RIGHT, in the header band, which is where
+     `ls -l` has always lived (it was a header dropdown before it was a rail) and
+     where the rail's own title sits when it is open. An earlier version centred it
+     vertically on the right edge: correct as a drawer handle, wrong here, because
+     it moved the one control the reader is looking for to a place navigation has
+     never been. Same corner open or closed. */
   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%);
+    position: fixed; top: var(--ls-nav-top); right: 0; z-index: 25;
     background: var(--card); border: 1px solid var(--border); border-right: 0;
-    padding: 0.6rem 0.5rem; font-size: 0.8rem;
+    border-top: 0; padding: 0.6rem 0.85rem; font-size: 0.9rem; font-weight: 700;
   }
 }
 

package/src/components.css

@@ -446,19 +446,30 @@ details.fold > summary:focus-visible {
    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; }
+.ticktable td { padding: 0.5rem 0.75rem; 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); }
+/* State reads THREE ways, so it survives every context: the GLYPH (two themes are near-black and
+   a printout has no colour at all), the COLOUR, and a left edge-marker that makes a bad row
+   findable by shape alone when the strip is scanned rather than read. */
+.tick-dot {
+  font-size: 0.7em; width: 1.5rem; padding-right: 0 !important;
+  border-left: 3px solid transparent; padding-left: 0.6rem !important;
+}
+/* --success is per-theme and AA-measured (0.3.0). `ok` used to borrow --primary — the BRAND
+   colour — so a healthy poller and the page heading were the same ink, and "everything is fine"
+   had to be read rather than seen. */
+.tick--ok    .tick-dot { color: var(--success); border-left-color: color-mix(in srgb, var(--success) 45%, transparent); }
+.tick--stale .tick-dot { color: var(--destructive); border-left-color: var(--destructive); }
+.tick--never .tick-dot { color: var(--muted-foreground); border-left-color: color-mix(in srgb, var(--muted-foreground) 35%, transparent); }
+/* The NAME is an identifier, not an accent. Making it --primary put brand colour on every row of
+   a strip whose entire job is that the exceptions stand out. */
+.tick-name { font-weight: 700; color: var(--foreground); letter-spacing: 0.01em; }
 .tick-last, .tick-next { font-variant-numeric: tabular-nums; color: var(--muted-foreground); }
+/* "next 57s" is a prediction; the age beside it is an observation. It should not compete. */
+.tick-next { opacity: 0.72; }
 .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
@@ -475,3 +486,48 @@ details.fold > summary:focus-visible {
   .ticktable td { display: inline-block; padding: 0.1rem 0.5rem 0.1rem 0; }
   .ticktable td.tick-stats { display: block; width: auto; }
 }
+
+/* ── zoomable diagrams ────────────────────────────────────────────────────────────────────────
+   An architecture diagram authored for a text column is unreadable at exactly the moment someone
+   needs it. Pair with `initDiagramZoom()`: every `.diagram` becomes a real button that opens
+   full-screen, fitted to the viewport, then zoomable and pannable.
+
+   The affordance has to be visible without hovering — this portal is read from a phone — so the
+   corner hint is always drawn, not revealed on :hover. */
+.dgm-zoomable { position: relative; cursor: zoom-in; }
+.dgm-zoomable::after {
+  content: "⤢"; position: absolute; top: 0.4rem; right: 0.5rem;
+  font-size: 0.85rem; line-height: 1; opacity: 0.45; pointer-events: none;
+  color: var(--muted-foreground);
+}
+.dgm-zoomable:hover::after, .dgm-zoomable:focus-visible::after { opacity: 1; color: var(--primary); }
+.dgm-zoomable:focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; }
+
+html.dgm-locked, html.dgm-locked body { overflow: hidden; }
+
+.dgm-overlay {
+  display: none; position: fixed; inset: 0; z-index: 90;
+  background: color-mix(in srgb, var(--background) 96%, transparent);
+  flex-direction: column;
+}
+.dgm-overlay.open { display: flex; }
+.dgm-bar {
+  flex: none; display: flex; align-items: center; justify-content: flex-end; gap: 0.4rem;
+  padding: 0.5rem 0.75rem; border-bottom: 1px solid var(--border); background: var(--card);
+}
+.dgm-btn {
+  font: inherit; font-size: 0.82rem; cursor: pointer; padding: 0.3rem 0.7rem; min-height: 32px;
+  background: transparent; border: 1px solid var(--border); color: var(--foreground);
+}
+.dgm-btn:hover { border-color: var(--primary); color: var(--primary); }
+.dgm-btn:focus-visible { outline: 2px solid var(--primary); outline-offset: 1px; }
+.dgm-close { border-color: color-mix(in srgb, var(--destructive) 55%, transparent); color: var(--destructive); }
+.dgm-close:hover { border-color: var(--destructive); color: var(--destructive); }
+/* The stage clips; the artwork inside it is what moves. Transforming a wrapper rather than the
+   svg keeps mermaid's own geometry untouched. */
+.dgm-stage { flex: 1; overflow: hidden; display: grid; place-items: center; cursor: grab; touch-action: none; }
+.dgm-stage.is-grabbing { cursor: grabbing; }
+.dgm-art { transform-origin: center center; will-change: transform; }
+.dgm-art > svg, .dgm-art > img { display: block; max-width: none; max-height: none; }
+
+@media print { .dgm-overlay, .dgm-zoomable::after { display: none !important; } }

package/src/tokens.css

@@ -9,6 +9,26 @@
  * These are plain CSS custom properties — they work in any framework, any
  * browser, with or without a build step. Load this file first; base.css and
  * components.css resolve against the variables declared here.
+ *
+ * ── WHY EVERY ACCENT IS PER-THEME, AND WHY A LITERAL IS NEVER OK ──
+ * A status colour has to clear WCAG AA 4.5:1 against every surface it can land
+ * on — --background, --card AND --muted. Do that arithmetic across the four
+ * themes and the two admissible luminance bands DO NOT OVERLAP:
+ *
+ *   light themes: darkest surface is warm's --muted  #ece3cf -> accent L <= 0.1328
+ *   dark themes:  lightest surface is green's --muted #071509 -> accent L >= 0.2021
+ *                                   (mono's #111111 wants      accent L >= 0.2002)
+ *
+ * A gap of 0.0692 with nothing in it. So NO single hex can serve four themes:
+ * the two near-black themes need a light tint, the two light themes a dark one,
+ * and every compromise fails both. That is arithmetic, not taste — which is why
+ * --destructive, --success and --warning are each declared four times.
+ *
+ * Cockpit carried twelve hardcoded accents that predate these tokens; every one
+ * missed AA on at least one theme and four sat inside the gap, clearing neither
+ * side. Adding a status colour? Add a TOKEN here with its measured worst-case
+ * ratio in a trailing comment. Do not tune a literal at the call site — that
+ * forks the palette and fixes exactly one theme.
  */
 
 :root {
@@ -27,6 +47,8 @@
   --accent: #8a4516;
   --accent-foreground: #f8f3e8;
   --destructive: #a02c2c;
+  --success: #1a6b2e;      /* 5.16:1 worst surface */
+  --warning: #845600;      /* 4.97:1 worst surface */
   --border: #d9cdb6;
   --input: #d9cdb6;
   --ring: #8a4516;
@@ -57,6 +79,8 @@ html[data-theme="green"] {
   --accent: #33ff66;
   --accent-foreground: #02160a;
   --destructive: #ff5c5c;
+  --success: #4ade80;      /* 10.76:1 worst surface */
+  --warning: #f5b32b;      /* 10.15:1 worst surface */
   --border: #1c4a2c;
   --input: #1c4a2c;
   --ring: #33ff66;
@@ -82,6 +106,8 @@ html[data-theme="mono"] {
   --accent: #ffffff;
   --accent-foreground: #050505;
   --destructive: #ff5c5c;
+  --success: #4ade80;      /* 10.84:1 worst surface */
+  --warning: #f5b32b;      /* 10.22:1 worst surface */
   --border: #333333;
   --input: #333333;
   --ring: #ffffff;
@@ -107,6 +133,8 @@ html[data-theme="paper"] {
   --accent: #000000;
   --accent-foreground: #fafafa;
   --destructive: #b3261e;
+  --success: #1a7031;      /* 5.36:1 worst surface */
+  --warning: #8f5d00;      /* 4.89:1 worst surface */
   --border: #d4d4d4;
   --input: #d4d4d4;
   --ring: #000000;

package/tokens/tokens.json

@@ -18,6 +18,8 @@
       "accent": "#8a4516",
       "accent-foreground": "#f8f3e8",
       "destructive": "#a02c2c",
+      "success": "#1a6b2e",
+      "warning": "#845600",
       "border": "#d9cdb6",
       "input": "#d9cdb6",
       "ring": "#8a4516",
@@ -43,6 +45,8 @@
       "accent": "#33ff66",
       "accent-foreground": "#02160a",
       "destructive": "#ff5c5c",
+      "success": "#4ade80",
+      "warning": "#f5b32b",
       "border": "#1c4a2c",
       "input": "#1c4a2c",
       "ring": "#33ff66",
@@ -66,6 +70,8 @@
       "accent": "#ffffff",
       "accent-foreground": "#050505",
       "destructive": "#ff5c5c",
+      "success": "#4ade80",
+      "warning": "#f5b32b",
       "border": "#333333",
       "input": "#333333",
       "ring": "#ffffff",
@@ -89,6 +95,8 @@
       "accent": "#000000",
       "accent-foreground": "#fafafa",
       "destructive": "#b3261e",
+      "success": "#1a7031",
+      "warning": "#8f5d00",
       "border": "#d4d4d4",
       "input": "#d4d4d4",
       "ring": "#000000",