@danieldeusing/design 0.19.0 → 0.21.0

package/README.md

@@ -110,15 +110,17 @@ Four dependency-free ES modules, tree-shakeable from `@danieldeusing/design/runt
 | `setTheme(name)` / `initThemeSwitcher()` | Switch themes and wire `[data-theme-value]` buttons + `[data-theme-label]`. |
 | `initTerminal()` | The `$ command` typing animation. No-ops under reduced motion / `html.anim-off`. |
 | `initDropdowns()` | `<details class="dropdown">` behaviour: one-open, click-away, Escape. |
+| `initSelects()` | Replaces the OS dropdown on every `<select>` with the themed listbox — the option list is painted outside the page, so CSS alone can never reach it. Markup contract: none. The `<select>` keeps the value and still fires `input`/`change`, and selects rendered later are enhanced on their own. |
 | `initAnimToggle()` | Wire `[data-anim-toggle]` buttons (`.anim-toggle`) to flip `html.anim-off` + persist it. |
 | `initResolutionZoom(1920)` | Scale the whole layout up on screens wider than the reference width. |
 
 ```js
-import { applyStoredTheme, initThemeSwitcher, initDropdowns, initTerminal, initAnimToggle, initResolutionZoom } from "@danieldeusing/design/runtime";
+import { applyStoredTheme, initThemeSwitcher, initDropdowns, initSelects, initTerminal, initAnimToggle, initResolutionZoom } from "@danieldeusing/design/runtime";
 applyStoredTheme();       // ideally inline, pre-paint
 initResolutionZoom();     // ideally inline, pre-paint (no flash)
 initThemeSwitcher();
 initDropdowns();
+initSelects();
 initTerminal();
 initAnimToggle();
 ```

package/dist/danieldeusing-design.css

@@ -1,4 +1,4 @@
-/*! danieldeusing-design v0.19.0 | MIT | https://github.com/danieldeusing/danieldeusing-design */
+/*! danieldeusing-design v0.21.0 | MIT | https://github.com/danieldeusing/danieldeusing-design */
 /* ===== reset.css ===== */
 /*
  * danieldeusing-design — minimal reset.
@@ -798,6 +798,207 @@ html[data-theme="warm"] .dropdown-item[data-theme-value="warm"] {
   text-shadow: 0 0 8px var(--glow);
 }
 
+/* ─────────────────────────────────────────────────────────────────────────
+   Select — the estate's own dropdown, because a native one's list CANNOT be
+   styled. Pairs with runtime/select.js.
+
+   THE CONSTRAINT THAT DECIDES EVERYTHING HERE: a `<select>`'s option list is
+   drawn by the OPERATING SYSTEM, outside the page, and no stylesheet reaches
+   it. So every surface in the estate has been rendering a rounded, blue-
+   highlighted, system-font menu out of a terminal UI — the one component that
+   could not be made to look like the rest, no matter what the page declared.
+   `appearance: base-select` would fix it in Chrome 135+ and nowhere else, so
+   Safari would keep the system menu: the estate would then be inconsistent
+   WITH ITSELF, which is worse than being consistently wrong.
+
+   So the list is rebuilt in the page. runtime/select.js keeps the real
+   `<select>` as the value (it is still what a form submits and what page code
+   reads) and paints a button + listbox over it. THE MARKUP CONTRACT IS
+   NOTHING: author a plain `<select>`, exactly as with `<table>`.
+
+   TWO RENDERINGS, ONE DECLARATION. The bare `<select>` (JS off, or before the
+   runtime has run) and the `.select-trigger` that replaces it must be the same
+   control at the same size — a reader who tabs into a page mid-enhancement
+   must not see the box change shape. Splitting their look across two rules is
+   how they would drift, so the closed control is declared ONCE for both, by
+   ELEMENT and by class together. Five copies of `.cfg-sel` in cockpit are what
+   this replaces; none of them agreed about `:disabled`.
+
+   THE BORDER IS 60% OF --foreground, MEASURED, NOT --border. A control's edge
+   is the thing that says "this is a control" and WCAG 1.4.11 wants 3:1 for
+   that; `--border` is a CONTAINER hairline and measures 1.37 / 2.00 / 1.61 /
+   1.42 against `--background` on the four themes — invisible as a control
+   edge, and correct for the cards it was made for. The estate's hand-rolled
+   selects used `currentColor 30%`, which is 1.70 at worst. 60% is the first
+   step that clears 3:1 on all four themes against ALL THREE surfaces a control
+   can land on (worst: warm 3.24 over --background, 3.24 over --muted). Mixed
+   with `transparent` rather than with a surface so it composites correctly
+   wherever it is dropped, and derived from a token so it stays per-theme.
+
+   THE CARET IS TWO GRADIENT HALVES, not an SVG. It has to be `currentColor` —
+   a data-URI with a baked fill would need declaring four times or be wrong on
+   two themes (the luminance gap in tokens.css), and a `::after` is impossible
+   because a `<select>` cannot have generated content. Two abutting squares,
+   each half-filled on the diagonal, draw the same ▾ on both renderings.
+   ───────────────────────────────────────────────────────────────────────── */
+select,
+.select-trigger {
+  appearance: none;
+  -webkit-appearance: none;
+  max-width: 100%;
+  padding: 0.28rem 1.45rem 0.28rem 0.5rem;
+  font: inherit;
+  font-size: var(--fs-sm);
+  line-height: var(--lh-tight);
+  text-align: left;
+  color: var(--foreground);
+  background-color: transparent;
+  background-image:
+    linear-gradient(45deg, transparent 50%, currentColor 50%),
+    linear-gradient(135deg, currentColor 50%, transparent 50%);
+  background-position:
+    right 0.78rem center,
+    right 0.5rem center;
+  background-size: 0.28rem 0.28rem;
+  background-repeat: no-repeat;
+  border: 1px solid color-mix(in srgb, var(--foreground) 60%, transparent);
+  cursor: pointer;
+  transition: border-color 0.15s ease;
+}
+select:hover,
+.select-trigger:hover,
+.select-trigger[aria-expanded="true"] {
+  border-color: var(--primary);
+}
+select:disabled,
+.select-trigger:disabled {
+  opacity: 0.45;
+  cursor: default;
+}
+/* Open: the caret turns over, so the control says "the list is out" without
+   relying on the panel being in view — it may have flipped above the trigger. */
+.select-trigger[aria-expanded="true"] {
+  background-image:
+    linear-gradient(135deg, transparent 50%, currentColor 50%),
+    linear-gradient(45deg, currentColor 50%, transparent 50%);
+}
+
+/* The wrapper the runtime puts around the pair. It is `relative` so the real
+   `<select>` can be laid exactly over the trigger: NOT `display: none`, and not
+   `visibility: hidden` either — Chrome refuses to show a validation bubble on a
+   control it cannot focus and then blocks the submit with no message at all, so
+   a `required` select would silently stop working. Transparent and over the
+   trigger, the bubble still points at the right box. */
+.select-field {
+  position: relative;
+  display: inline-flex;
+  max-width: 100%;
+  vertical-align: middle;
+}
+.select-field > select {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  opacity: 0;
+  pointer-events: none;
+}
+.select-trigger {
+  display: inline-flex;
+  align-items: center;
+  width: 100%;
+}
+.select-value {
+  /* min-width: 0 is what lets a flex item shrink below its content — without it
+     `text-overflow: ellipsis` never fires and a long option label blows the
+     control out of its column instead of being clipped. */
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+/* An empty flex item has no line box, so a select whose current option has no
+   text (`<option value="">`) would render a control HALF THE HEIGHT of the one
+   beside it. A zero-width space gives it a line and no width, and screen readers
+   ignore it — unlike an `&nbsp;`, which they read out. */
+.select-value::after {
+  content: "\200b";
+}
+
+/* THE PANEL IS position: fixed AND APPENDED OUT OF THE FLOW, for two reasons
+   this estate hits constantly: selects live inside `.tablewrap` (which scrolls,
+   so it clips) and inside modal `<dialog>`s (a top layer, which nothing outside
+   can paint above). An absolutely-positioned panel would be cut off in the
+   first and hidden behind the second. runtime/select.js appends it to the
+   nearest open <dialog> when there is one and to <body> otherwise.
+   z-index 60 clears the scanline overlay (40), .dropdown-panel (50) and
+   footer.status (50). */
+.select-panel {
+  position: fixed;
+  z-index: 60;
+  margin: 0;
+  padding: 0.15rem 0;
+  overflow-y: auto;
+  overscroll-behavior: contain;
+  list-style: none;
+  font-size: var(--fs-sm);
+  line-height: var(--lh-tight);
+  color: var(--popover-foreground);
+  background: var(--popover);
+  border: 1px solid color-mix(in srgb, var(--foreground) 60%, transparent);
+  box-shadow: 0 0 20px var(--glow-soft);
+}
+
+/* SELECTION CANNOT BE A COLOUR HERE, and that is measured, not felt. `--primary`
+   against `--popover-foreground` — the selected option's ink against its
+   neighbours' — is 1.65:1 on warm, 1.31 on green, 1.48 on mono, 1.27 on paper.
+   Two inks a reader cannot tell apart is not a marking. Same finding as the
+   rail's current row (0.19.0), same answer: POSITION AND AREA. The selected
+   option is the only one with a left edge marker, and it is bold; the colour is
+   the third signal, not the only one.
+
+   The keyboard's active option and the mouse's hover are the SAME state on
+   purpose — there is one pointer of attention, and showing two would ask the
+   reader which one Enter is going to take. */
+.select-option {
+  display: flex;
+  align-items: center;
+  gap: 0.4rem;
+  padding: 0.28rem 0.9rem 0.28rem 0.55rem;
+  border-inline-start: 2px solid transparent;
+  white-space: nowrap;
+  cursor: pointer;
+}
+.select-option:hover,
+.select-option[data-active="true"] {
+  background: var(--muted);
+}
+.select-option[aria-selected="true"] {
+  color: var(--primary);
+  font-weight: 700;
+  border-inline-start-color: var(--primary);
+}
+/* 65% of the ink, not 45%: below that warm lands at 2.94:1 and the option stops
+   being readable at all, and "unavailable" still has to be legible to be
+   understood as a choice that exists. 65% measures 3.75 at worst (warm). */
+.select-option[aria-disabled="true"] {
+  color: color-mix(in srgb, var(--popover-foreground) 65%, var(--popover));
+  cursor: default;
+}
+.select-option[aria-disabled="true"]:hover {
+  background: none;
+}
+/* <optgroup> label. Nothing in the estate uses one today; it is here because a
+   listbox that silently drops the grouping a consumer wrote is worse than one
+   that never supported it. */
+.select-group {
+  padding: 0.35rem 0.9rem 0.15rem;
+  color: var(--muted-foreground);
+  font-size: var(--fs-xs);
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+}
+
 /* ─────────────────────────────────────────────────────────────────────────
    ELI5 — an "explain like I'm 5" callout box (first-time-term explainers).
    ───────────────────────────────────────────────────────────────────────── */
@@ -1385,7 +1586,38 @@ footer.status .dropdown summary, footer.status .anim-toggle { padding: 0.55rem 0
 
 /* ── 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; }
+/* THE PERMISSION STRING SITS BEHIND THE NAME (0.20.0). Daniel: "the folder info should also
+   be in some grey style color so that it does not have the same color as the path/folder
+   name." It was `--muted-foreground` flat, and measured across the four themes that was worse
+   than it looks in the source:
+
+     contrast between .ls-perm and the NAME beside it, before
+       leaf row:  1.00  1.00  1.00  1.00   ← identical, on EVERY theme
+       dir row:   1.20  2.34  3.45  3.00     (warm / green / mono / paper)
+
+   The leaf case is the severe one and it was invisible in review because the two rules read as
+   different declarations: `.ls-perm` and `.ls-panel .ls-name` are both `--muted-foreground`, so
+   `drwxr-xr-x` and the page name were literally the same ink and the row had no hierarchy at
+   all. Most rows in a rail are leaves. On the DIRECTORY row the warm theme then compounds it —
+   `--muted-foreground` #71614e beside `--primary` #8a4516 is a brown-grey next to a brown, 1.2:1,
+   which the eye reads as one colour even though the hexes differ.
+
+   Mixed toward `--card`, the surface the panel is actually drawn on, rather than swapped for a
+   different token: the point is to push it BACK, and no token in the set means "quieter than
+   muted". 75% is the dimmest mix that still clears 3:1 against the panel on all four themes —
+   warm is the binding one at 3.02 — because this string is not decoration. A trailing slash plus
+   `drwxr-xr-x` is what says the thing has contents, so it has to stay readable, just not compete.
+
+     after:  legibility vs panel  3.02  3.91  3.63  3.55
+             vs leaf name         1.60  1.56  1.55  1.75
+             vs dir name          1.92  3.67  5.35  5.24
+
+   Left at plain `.ls-perm` specificity on purpose: the you-are-here rule below tints this same
+   element toward `--primary`, and it must keep winning. */
+.ls-perm {
+  color: color-mix(in srgb, var(--muted-foreground) 75%, var(--card));
+  font-size: 0.72rem; letter-spacing: 0;
+}
 
 /* DEPTH IS DRAWN, NOT JUST INDENTED. Whitespace alone did not carry it — with the
    permission column in front of every row, a child sat only ~1rem right of its
@@ -1817,6 +2049,7 @@ span[data-tip], th[data-tip] { border-bottom: 1px dotted var(--muted-foreground)
   .skip-link,
   .dropdown,
   .dropdown-panel,
+  .select-panel,
   .anim-toggle,
   .cursor-block,
   .term-caret,

package/dist/danieldeusing-design.min.css

@@ -1,2 +1,2 @@
-/*! danieldeusing-design v0.19.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;--success: #1a6b2e;--warning: #845600;--info: #1c5f9e;--pending: #5f3dc4;--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;--info: #4dabf7;--pending: #b197fc;--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;--info: #4dabf7;--pending: #b197fc;--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;--info: #1c5f9e;--pending: #5f3dc4;--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}:root{--content-w: 78rem;--content-pad: 1.5rem;--fs-xs: 0.625rem;--fs-sm: 0.6875rem;--fs-base: 0.75rem;--fs-md: 0.8125rem;--fs-lg: 0.9375rem;--fs-xl: 1.125rem;--fs-2xl: 1.5rem;--lh-tight: 1.3;--lh-base: 1.5;--field-label-w: 8.5rem}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: var(--fs-base);line-height: var(--lh-base);overflow-x: hidden;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale}table{font-size: var(--fs-md);width: 100%}th,td{padding: 0.45rem 0.85rem;text-align: left;vertical-align: top;border-block-end: 1px solid color-mix(in srgb,var(--border) 55%,transparent)}thead th{border-block-end-color: var(--border);color: var(--muted-foreground);font-weight: 600}tbody tr:last-child>*{border-block-end: 0}tr>*:first-child{padding-inline-start: 0}tr>*:last-child{padding-inline-end: 0}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)}.field-row{display: grid;grid-template-columns: var(--field-label-w) minmax(0,1fr);align-items: center;gap: 0.5rem 0.75rem;margin: 0.35rem 0}.field-row>.lbl{color: var(--muted-foreground);font-size: var(--fs-sm);text-align: left}.field-row>.field-val{display: flex;flex-wrap: wrap;align-items: center;gap: 0.4rem 0.9rem;min-width: 0}@media (max-width: 40rem){.field-row{grid-template-columns: 1fr;gap: 0.2rem}}.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--ghost{background: transparent;color: var(--primary);border: 1px solid var(--border);box-shadow: none;font-weight: 400}.btn-terminal--ghost::before{content: ""}.btn-terminal--ghost:hover{border-color: var(--primary);background: color-mix(in srgb,var(--primary) 10%,transparent);box-shadow: none}.btn-terminal:hover{box-shadow: 0 0 28px var(--glow);transform: translateY(-2px)}.btn-terminal--compact{padding: 0.28rem 0.7rem;font-size: var(--fs-sm)}.btn-terminal--destructive{display: inline-flex;align-items: center;justify-content: center;padding: 0.3rem;color: var(--destructive);border-color: color-mix(in srgb,var(--destructive) 45%,var(--border))}.btn-terminal--destructive::before{content: ""}.btn-terminal--destructive::after{content: "";display: block;width: 0.875rem;height: 0.875rem;background: currentColor;-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 3h6v3H9zM4 6h16v2H4zM6 9h12l-1 12H7z'/%3E%3C/svg%3E") center / contain no-repeat;mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 3h6v3H9zM4 6h16v2H4zM6 9h12l-1 12H7z'/%3E%3C/svg%3E") center / contain no-repeat}.btn-terminal--destructive:hover{border-color: var(--destructive);background: color-mix(in srgb,var(--destructive) 12%,transparent);box-shadow: none}@media (pointer: coarse){.btn-terminal--destructive{min-width: 44px;min-height: 44px}}.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: var(--radius);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: var(--radius);background: var(--destructive);color: var(--primary-foreground)}.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}.tab--info{margin-inline-start: auto}@media (max-width: 40rem){.tab--info{margin-inline-start: 0}}@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}.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}}.minimap{position: fixed;left: 0;top: var(--ls-nav-top,3rem);bottom: var(--ls-nav-bottom,2.2rem);z-index: 20;display: none;flex-direction: column;justify-content: center;gap: 0.5rem;width: 2rem;padding: 0.75rem 0 0.75rem 0.75rem;overflow-y: auto;overscroll-behavior: contain;scrollbar-width: none}.minimap::-webkit-scrollbar{display: none}@media (min-width: 64rem){.minimap{display: flex}}.minimap-bar{flex: 0 0 auto;width: var(--minimap-bar-w,100%);height: 2px;padding: 0;border: 0;border-radius: 1px;background: var(--border);cursor: pointer;transition: background 0.15s ease,transform 0.15s ease;transform-origin: left center}.minimap-bar:hover{background: var(--muted-foreground);transform: scaleY(2)}.minimap-bar[data-tip]{cursor: pointer}.minimap-bar:focus-visible{outline: 2px solid var(--ring);outline-offset: 3px}.minimap-bar.active{background: var(--primary);transform: scaleY(2)}@media print{.minimap{display: none !important}}.wrap{max-width: var(--content-w);margin-inline: auto;padding-inline: var(--content-pad)}.tablewrap{position: relative;overflow-x: auto;overflow-y: auto;max-block-size: var(--tablewrap-max-h,none)}.tablewrap::after{content: "";position: absolute;inset-block: 0;right: 0;width: 1.5rem;pointer-events: none;opacity: 0.9;background: linear-gradient(to right,transparent,var(--background,transparent))}.tablewrap thead th{position: sticky;inset-block-start: 0;z-index: 1;background: var(--background,#f5efe2)}.tickstrip:not(:empty){border: 1px solid var(--border);background: var(--card);margin: 1.6rem 0 1.5rem}.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;text-align: right}.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;text-align: left}}.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)}.doc-link--forward{color: var(--primary);white-space: nowrap}.doc-link--forward:hover{color: var(--primary);text-decoration: underline}.ls-group{display: block;padding: 0.55rem 0 0.15rem;font-size: var(--fs-xs);letter-spacing: 0.08em;color: var(--muted-foreground);opacity: 0.75}.ls-panel>li:first-child .ls-group{padding-top: 0}.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{margin-left: 0.55rem;padding-left: 0.75rem;border-left: 1px solid color-mix(in srgb,var(--muted-foreground) 40%,transparent)}.ls-row--sub2 .ls-name{margin-left: 1.7rem}.ls-panel .ls-name{color: var(--muted-foreground)}.ls-panel .ls-row--dir .ls-name{color: var(--primary);font-weight: 700}.ls-row[aria-current="page"]{background: color-mix(in srgb,var(--primary) 12%,transparent);box-shadow: inset 3px 0 0 0 var(--primary)}.ls-row[aria-current="page"] .ls-name{color: var(--primary);font-weight: 700;text-shadow: 0 0 8px var(--glow)}.ls-row[aria-current="page"] .ls-perm{color: color-mix(in srgb,var(--primary) 65%,transparent)}.ls-row[aria-current="page"]::after{content: "←";margin-left: auto;color: var(--primary)}.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}@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,.bleed-rail{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;overflow: hidden;background: var(--card);border-left: 1px solid var(--border)}html:not(.anim-off) .ls-nav{transition: transform 0.18s ease}html[data-ls-nav="off"] .ls-nav{transform: translateX(100%)}.ls-nav-head{display: inline-flex;align-items: center;gap: 0.5rem;margin-left: 0.75rem}.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-toggle{background: none;border: 0;font: inherit;cursor: pointer;line-height: 1;color: var(--muted-foreground);padding: 0.4rem 0.55rem}.ls-nav-toggle::after{content: "\00BB"}html[data-ls-nav="off"] .ls-nav-toggle::after{content: "\00AB"}.ls-nav-toggle:hover{color: var(--primary)}.ls-nav-toggle:focus-visible{outline: 2px solid color-mix(in srgb,var(--primary) 55%,transparent);outline-offset: -2px}}.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,.mobile-nav{display: flex;flex-direction: column}.site-nav:has(>.ls-nav) .mobile-nav{display: none}.site-nav>.ls-nav .ls-row{align-items: center;min-height: 44px;border-bottom: 1px solid var(--border)}.site-nav>.ls-nav .ls-row .ls-name{display: flex;align-items: center;flex: 1;min-height: 44px}.site-nav>.ls-nav .ls-row:last-child{border-bottom: 0}.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)}.ls-nav-toggle{display: none}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: var(--radius);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}.tablewrap,.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.21.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;--success: #1a6b2e;--warning: #845600;--info: #1c5f9e;--pending: #5f3dc4;--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;--info: #4dabf7;--pending: #b197fc;--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;--info: #4dabf7;--pending: #b197fc;--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;--info: #1c5f9e;--pending: #5f3dc4;--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}:root{--content-w: 78rem;--content-pad: 1.5rem;--fs-xs: 0.625rem;--fs-sm: 0.6875rem;--fs-base: 0.75rem;--fs-md: 0.8125rem;--fs-lg: 0.9375rem;--fs-xl: 1.125rem;--fs-2xl: 1.5rem;--lh-tight: 1.3;--lh-base: 1.5;--field-label-w: 8.5rem}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: var(--fs-base);line-height: var(--lh-base);overflow-x: hidden;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale}table{font-size: var(--fs-md);width: 100%}th,td{padding: 0.45rem 0.85rem;text-align: left;vertical-align: top;border-block-end: 1px solid color-mix(in srgb,var(--border) 55%,transparent)}thead th{border-block-end-color: var(--border);color: var(--muted-foreground);font-weight: 600}tbody tr:last-child>*{border-block-end: 0}tr>*:first-child{padding-inline-start: 0}tr>*:last-child{padding-inline-end: 0}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)}.field-row{display: grid;grid-template-columns: var(--field-label-w) minmax(0,1fr);align-items: center;gap: 0.5rem 0.75rem;margin: 0.35rem 0}.field-row>.lbl{color: var(--muted-foreground);font-size: var(--fs-sm);text-align: left}.field-row>.field-val{display: flex;flex-wrap: wrap;align-items: center;gap: 0.4rem 0.9rem;min-width: 0}@media (max-width: 40rem){.field-row{grid-template-columns: 1fr;gap: 0.2rem}}.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--ghost{background: transparent;color: var(--primary);border: 1px solid var(--border);box-shadow: none;font-weight: 400}.btn-terminal--ghost::before{content: ""}.btn-terminal--ghost:hover{border-color: var(--primary);background: color-mix(in srgb,var(--primary) 10%,transparent);box-shadow: none}.btn-terminal:hover{box-shadow: 0 0 28px var(--glow);transform: translateY(-2px)}.btn-terminal--compact{padding: 0.28rem 0.7rem;font-size: var(--fs-sm)}.btn-terminal--destructive{display: inline-flex;align-items: center;justify-content: center;padding: 0.3rem;color: var(--destructive);border-color: color-mix(in srgb,var(--destructive) 45%,var(--border))}.btn-terminal--destructive::before{content: ""}.btn-terminal--destructive::after{content: "";display: block;width: 0.875rem;height: 0.875rem;background: currentColor;-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 3h6v3H9zM4 6h16v2H4zM6 9h12l-1 12H7z'/%3E%3C/svg%3E") center / contain no-repeat;mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 3h6v3H9zM4 6h16v2H4zM6 9h12l-1 12H7z'/%3E%3C/svg%3E") center / contain no-repeat}.btn-terminal--destructive:hover{border-color: var(--destructive);background: color-mix(in srgb,var(--destructive) 12%,transparent);box-shadow: none}@media (pointer: coarse){.btn-terminal--destructive{min-width: 44px;min-height: 44px}}.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: var(--radius);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)}select,.select-trigger{appearance: none;-webkit-appearance: none;max-width: 100%;padding: 0.28rem 1.45rem 0.28rem 0.5rem;font: inherit;font-size: var(--fs-sm);line-height: var(--lh-tight);text-align: left;color: var(--foreground);background-color: transparent;background-image: linear-gradient(45deg,transparent 50%,currentColor 50%),linear-gradient(135deg,currentColor 50%,transparent 50%);background-position: right 0.78rem center,right 0.5rem center;background-size: 0.28rem 0.28rem;background-repeat: no-repeat;border: 1px solid color-mix(in srgb,var(--foreground) 60%,transparent);cursor: pointer;transition: border-color 0.15s ease}select:hover,.select-trigger:hover,.select-trigger[aria-expanded="true"]{border-color: var(--primary)}select:disabled,.select-trigger:disabled{opacity: 0.45;cursor: default}.select-trigger[aria-expanded="true"]{background-image: linear-gradient(135deg,transparent 50%,currentColor 50%),linear-gradient(45deg,currentColor 50%,transparent 50%)}.select-field{position: relative;display: inline-flex;max-width: 100%;vertical-align: middle}.select-field>select{position: absolute;inset: 0;width: 100%;height: 100%;opacity: 0;pointer-events: none}.select-trigger{display: inline-flex;align-items: center;width: 100%}.select-value{min-width: 0;overflow: hidden;text-overflow: ellipsis;white-space: nowrap}.select-value::after{content: "\200b"}.select-panel{position: fixed;z-index: 60;margin: 0;padding: 0.15rem 0;overflow-y: auto;overscroll-behavior: contain;list-style: none;font-size: var(--fs-sm);line-height: var(--lh-tight);color: var(--popover-foreground);background: var(--popover);border: 1px solid color-mix(in srgb,var(--foreground) 60%,transparent);box-shadow: 0 0 20px var(--glow-soft)}.select-option{display: flex;align-items: center;gap: 0.4rem;padding: 0.28rem 0.9rem 0.28rem 0.55rem;border-inline-start: 2px solid transparent;white-space: nowrap;cursor: pointer}.select-option:hover,.select-option[data-active="true"]{background: var(--muted)}.select-option[aria-selected="true"]{color: var(--primary);font-weight: 700;border-inline-start-color: var(--primary)}.select-option[aria-disabled="true"]{color: color-mix(in srgb,var(--popover-foreground) 65%,var(--popover));cursor: default}.select-option[aria-disabled="true"]:hover{background: none}.select-group{padding: 0.35rem 0.9rem 0.15rem;color: var(--muted-foreground);font-size: var(--fs-xs);text-transform: uppercase;letter-spacing: 0.06em}.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: var(--radius);background: var(--destructive);color: var(--primary-foreground)}.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}.tab--info{margin-inline-start: auto}@media (max-width: 40rem){.tab--info{margin-inline-start: 0}}@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}.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}}.minimap{position: fixed;left: 0;top: var(--ls-nav-top,3rem);bottom: var(--ls-nav-bottom,2.2rem);z-index: 20;display: none;flex-direction: column;justify-content: center;gap: 0.5rem;width: 2rem;padding: 0.75rem 0 0.75rem 0.75rem;overflow-y: auto;overscroll-behavior: contain;scrollbar-width: none}.minimap::-webkit-scrollbar{display: none}@media (min-width: 64rem){.minimap{display: flex}}.minimap-bar{flex: 0 0 auto;width: var(--minimap-bar-w,100%);height: 2px;padding: 0;border: 0;border-radius: 1px;background: var(--border);cursor: pointer;transition: background 0.15s ease,transform 0.15s ease;transform-origin: left center}.minimap-bar:hover{background: var(--muted-foreground);transform: scaleY(2)}.minimap-bar[data-tip]{cursor: pointer}.minimap-bar:focus-visible{outline: 2px solid var(--ring);outline-offset: 3px}.minimap-bar.active{background: var(--primary);transform: scaleY(2)}@media print{.minimap{display: none !important}}.wrap{max-width: var(--content-w);margin-inline: auto;padding-inline: var(--content-pad)}.tablewrap{position: relative;overflow-x: auto;overflow-y: auto;max-block-size: var(--tablewrap-max-h,none)}.tablewrap::after{content: "";position: absolute;inset-block: 0;right: 0;width: 1.5rem;pointer-events: none;opacity: 0.9;background: linear-gradient(to right,transparent,var(--background,transparent))}.tablewrap thead th{position: sticky;inset-block-start: 0;z-index: 1;background: var(--background,#f5efe2)}.tickstrip:not(:empty){border: 1px solid var(--border);background: var(--card);margin: 1.6rem 0 1.5rem}.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;text-align: right}.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;text-align: left}}.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)}.doc-link--forward{color: var(--primary);white-space: nowrap}.doc-link--forward:hover{color: var(--primary);text-decoration: underline}.ls-group{display: block;padding: 0.55rem 0 0.15rem;font-size: var(--fs-xs);letter-spacing: 0.08em;color: var(--muted-foreground);opacity: 0.75}.ls-panel>li:first-child .ls-group{padding-top: 0}.ls-row{display: flex;align-items: baseline;gap: 0.9rem}.ls-perm{color: color-mix(in srgb,var(--muted-foreground) 75%,var(--card));font-size: 0.72rem;letter-spacing: 0}.ls-row--sub .ls-name{margin-left: 0.55rem;padding-left: 0.75rem;border-left: 1px solid color-mix(in srgb,var(--muted-foreground) 40%,transparent)}.ls-row--sub2 .ls-name{margin-left: 1.7rem}.ls-panel .ls-name{color: var(--muted-foreground)}.ls-panel .ls-row--dir .ls-name{color: var(--primary);font-weight: 700}.ls-row[aria-current="page"]{background: color-mix(in srgb,var(--primary) 12%,transparent);box-shadow: inset 3px 0 0 0 var(--primary)}.ls-row[aria-current="page"] .ls-name{color: var(--primary);font-weight: 700;text-shadow: 0 0 8px var(--glow)}.ls-row[aria-current="page"] .ls-perm{color: color-mix(in srgb,var(--primary) 65%,transparent)}.ls-row[aria-current="page"]::after{content: "←";margin-left: auto;color: var(--primary)}.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}@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,.bleed-rail{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;overflow: hidden;background: var(--card);border-left: 1px solid var(--border)}html:not(.anim-off) .ls-nav{transition: transform 0.18s ease}html[data-ls-nav="off"] .ls-nav{transform: translateX(100%)}.ls-nav-head{display: inline-flex;align-items: center;gap: 0.5rem;margin-left: 0.75rem}.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-toggle{background: none;border: 0;font: inherit;cursor: pointer;line-height: 1;color: var(--muted-foreground);padding: 0.4rem 0.55rem}.ls-nav-toggle::after{content: "\00BB"}html[data-ls-nav="off"] .ls-nav-toggle::after{content: "\00AB"}.ls-nav-toggle:hover{color: var(--primary)}.ls-nav-toggle:focus-visible{outline: 2px solid color-mix(in srgb,var(--primary) 55%,transparent);outline-offset: -2px}}.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,.mobile-nav{display: flex;flex-direction: column}.site-nav:has(>.ls-nav) .mobile-nav{display: none}.site-nav>.ls-nav .ls-row{align-items: center;min-height: 44px;border-bottom: 1px solid var(--border)}.site-nav>.ls-nav .ls-row .ls-name{display: flex;align-items: center;flex: 1;min-height: 44px}.site-nav>.ls-nav .ls-row:last-child{border-bottom: 0}.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)}.ls-nav-toggle{display: none}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: var(--radius);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,.select-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}.tablewrap,.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.19.0",
+  "version": "0.21.0",
   "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/index.js

@@ -13,6 +13,7 @@
 export * from "./theme.js";
 export * from "./zoom.js";
 export * from "./dropdown.js";
+export * from "./select.js";
 export * from "./anim.js";
 export * from "./terminal.js";
 export * from "./nav.js";

package/runtime/select.js

@@ -0,0 +1,539 @@
+/*
+ * select.js — replaces the OPERATING SYSTEM's dropdown with the estate's own.
+ *
+ * Markup contract:
+ *   <select>…</select>
+ *
+ * That is the whole contract. Like `initTableScroll()`, this takes plain HTML
+ * and needs no classes, no wrapper and no data attributes. Call `initSelects()`
+ * once; every `<select>` on the page is enhanced, and so is every one rendered
+ * afterwards — cockpit rebuilds its config tables out of innerHTML on every
+ * poll, so a widget that only enhanced what existed at load would work until
+ * the first refresh and then quietly stop.
+ *
+ * WHY A REPLACEMENT AND NOT CSS. A `<select>`'s option list is painted by the
+ * OS outside the document: rounded corners, a blue system highlight, the system
+ * font. No stylesheet reaches it. Chrome 135+ can style it with
+ * `appearance: base-select`, but Safari and Firefox cannot, and a fix that
+ * lands on one browser leaves the estate disagreeing with ITSELF, which is
+ * worse than being consistently wrong. So the list is rebuilt in the page.
+ *
+ * THE <select> STAYS AND STAYS AUTHORITATIVE. It is not cloned, mirrored or
+ * replaced by hidden inputs: it remains the element that holds the value, that
+ * a form submits, that `select.value` reads, and that emits `input`/`change`.
+ * Page code sees exactly what it saw before — that is what let 28 call sites
+ * adopt this without a single edit. It is laid transparently OVER the trigger
+ * rather than `display: none`, because Chrome refuses to show a validation
+ * bubble on an unfocusable control and then blocks the submit with no message
+ * at all, which would silently break every `required` select.
+ *
+ * Keyboard follows the ARIA APG select-only combobox: Enter/Space/Arrow open,
+ * Up/Down move, Home/End jump, printable characters type ahead (a repeated
+ * character cycles, as a native select does), Enter selects, Escape closes
+ * without changing anything, Tab moves on. Focus never leaves the trigger —
+ * the active option is pointed at with `aria-activedescendant` — so there is
+ * nowhere for it to get stuck.
+ */
+
+const TYPEAHEAD_MS = 700;
+const GAP = 4; // visual px between the trigger and the panel
+const EDGE = 8; // keep the panel this far off the viewport edge
+
+const enhanced = new WeakMap();
+let counter = 0;
+let openInstance = null;
+let documentObserver = null;
+let globalsInstalled = false;
+
+/*
+ * Consumers set `zoom` on <html> (initResolutionZoom lays every page out
+ * against a 1920px reference), and that puts the two halves of any positioning
+ * sum in different coordinate spaces: getBoundingClientRect() and
+ * innerWidth/innerHeight are VISUAL px, already multiplied, while style.left is
+ * a CSS length the browser multiplies AGAIN on the way out. Writing a rect
+ * straight into a length therefore applies the zoom twice — an error that grows
+ * with distance from the origin, which is how it survives review (it looks fine
+ * near the top left). Fixed twice before in this runtime: tooltip.js and
+ * lsnav.js. Divide on the WRITE; never "fix" a comparison whose operands are
+ * both already visual.
+ */
+const zoomOf = () => Number(getComputedStyle(document.documentElement).zoom) || 1;
+
+const optionsOf = (instance) => instance.select.options;
+const label = (element) => (element.textContent || "").trim();
+
+const firstEnabled = (instance) => {
+  const options = optionsOf(instance);
+  for (let i = 0; i < options.length; i += 1) if (!options[i].disabled) return i;
+  return -1;
+};
+const lastEnabled = (instance) => {
+  const options = optionsOf(instance);
+  for (let i = options.length - 1; i >= 0; i -= 1) if (!options[i].disabled) return i;
+  return -1;
+};
+
+/* ── the closed control ─────────────────────────────────────────────────── */
+
+function syncTrigger(instance) {
+  const { select, trigger, value } = instance;
+  const option = select.selectedIndex >= 0 ? select.options[select.selectedIndex] : null;
+  value.textContent = option ? label(option) : "";
+  trigger.disabled = select.disabled;
+}
+
+/*
+ * The trigger's accessible name is the LABEL plus the CURRENT VALUE — "lines,
+ * 200" — which is what a native select announces and what the APG's select-only
+ * combobox prescribes. Pointing `aria-labelledby` at the trigger's own id is
+ * how the value gets into the name; it looks like a mistake and is the pattern.
+ *
+ * The label is found the same three ways the platform finds it, in the platform's
+ * order, so a page that already labels its select correctly needs no change:
+ * an explicit aria-label, an explicit aria-labelledby, then a <label> — whether
+ * associated by `for=` or by wrapping.
+ */
+function nameTrigger(instance) {
+  const { select, trigger } = instance;
+  const explicit = select.getAttribute("aria-label");
+  if (explicit) {
+    trigger.setAttribute("aria-label", explicit);
+    return;
+  }
+  let labelId = select.getAttribute("aria-labelledby");
+  if (!labelId) {
+    const element =
+      (select.id && document.querySelector(`label[for="${CSS.escape(select.id)}"]`)) ||
+      select.closest("label");
+    if (element) {
+      if (!element.id) element.id = `${instance.id}-label`;
+      labelId = element.id;
+    }
+  }
+  if (labelId) trigger.setAttribute("aria-labelledby", `${labelId} ${trigger.id}`);
+}
+
+function enhance(select) {
+  if (enhanced.has(select)) return;
+  // `multiple` and `size > 1` are not popups — the platform renders them inline
+  // and there is no OS menu to replace. `data-select="off"` is the opt-out.
+  if (select.multiple || select.size > 1) return;
+  if (select.dataset.select === "off") return;
+  if (select.parentElement?.classList.contains("select-field")) return;
+  if (!select.parentNode) return;
+
+  counter += 1;
+  const id = `dd-select-${counter}`;
+
+  const field = document.createElement("span");
+  field.className = "select-field";
+  // A page sizes its control on the <select> (`style="max-width:18rem"`), and
+  // once the select is out of the flow that sizing has nothing to act on. The
+  // wrapper is what occupies the space now, so it takes the inline style. Copied,
+  // not moved: the select's own style attribute is still the page's to read.
+  const inlineStyle = select.getAttribute("style");
+  if (inlineStyle) field.setAttribute("style", inlineStyle);
+
+  const trigger = document.createElement("button");
+  trigger.type = "button";
+  trigger.className = "select-trigger";
+  trigger.id = `${id}-trigger`;
+  trigger.setAttribute("role", "combobox");
+  trigger.setAttribute("aria-haspopup", "listbox");
+  trigger.setAttribute("aria-expanded", "false");
+  trigger.setAttribute("aria-controls", `${id}-panel`);
+
+  const value = document.createElement("span");
+  value.className = "select-value";
+  trigger.appendChild(value);
+
+  // A tooltip anchored to a control nobody can hover is a tooltip that never
+  // shows. Both flavours move to the visible element; the select keeps its copy
+  // so page code that reads the attribute still finds it.
+  for (const attribute of ["title", "data-tip"]) {
+    const text = select.getAttribute(attribute);
+    if (text !== null) trigger.setAttribute(attribute, text);
+  }
+
+  select.parentNode.insertBefore(field, select);
+  field.appendChild(select);
+  field.appendChild(trigger);
+  select.setAttribute("tabindex", "-1");
+  select.setAttribute("aria-hidden", "true");
+
+  const instance = { select, field, trigger, value, id, panel: null, items: [], active: -1, typed: "", typedAt: 0 };
+  enhanced.set(select, instance);
+  nameTrigger(instance);
+  syncTrigger(instance);
+
+  trigger.addEventListener("click", () => (instance.panel ? close(instance, true) : open(instance)));
+  trigger.addEventListener("keydown", (event) => onKeydown(instance, event));
+  // Focus aimed at the hidden control — a <label> click, or page code calling
+  // select.focus() — belongs to the one the reader can see.
+  select.addEventListener("focus", () => trigger.focus());
+  // A page that sets the value itself and announces it the normal way is honoured.
+  // Our own dispatch lands here too; re-syncing an already-synced trigger is a no-op.
+  select.addEventListener("change", () => syncTrigger(instance));
+
+  // Cockpit rewrites a select's options from fetched data — a new model list, a
+  // new credential list, a filter column derived from the rows that just arrived.
+  // Without this the trigger would keep showing the label of an option that is no
+  // longer in the list, which reads as the page having lost the setting.
+  instance.observer = new MutationObserver(() => {
+    syncTrigger(instance);
+    if (instance.panel) {
+      // The list changed under an open panel. Rebuild it rather than show a stale
+      // one; focus is on the trigger throughout, so nothing is disturbed.
+      close(instance, false);
+      open(instance);
+    }
+  });
+  instance.observer.observe(select, {
+    childList: true,
+    subtree: true,
+    characterData: true,
+    attributes: true,
+    attributeFilter: ["disabled", "selected", "value", "label"],
+  });
+}
+
+/* ── the panel ──────────────────────────────────────────────────────────── */
+
+function buildPanel(instance) {
+  const panel = document.createElement("ul");
+  panel.className = "select-panel";
+  panel.id = `${instance.id}-panel`;
+  panel.setAttribute("role", "listbox");
+  panel.tabIndex = -1;
+
+  instance.items = [];
+  let index = 0;
+  const addOption = (option) => {
+    const item = document.createElement("li");
+    item.className = "select-option";
+    item.id = `${instance.id}-o${index}`;
+    item.setAttribute("role", "option");
+    item.setAttribute("aria-selected", String(index === instance.select.selectedIndex));
+    if (option.disabled) item.setAttribute("aria-disabled", "true");
+    item.textContent = label(option);
+    item.dataset.index = String(index);
+    instance.items[index] = item;
+    index += 1;
+    return item;
+  };
+
+  // Walked child by child rather than over `select.options`, so an <optgroup>
+  // keeps its heading. The walk order is document order, which is exactly the
+  // order `select.options` flattens to — that is what keeps `data-index` a valid
+  // index into the real control.
+  for (const child of instance.select.children) {
+    if (child.tagName === "OPTGROUP") {
+      const heading = document.createElement("li");
+      heading.className = "select-group";
+      heading.setAttribute("role", "presentation");
+      heading.textContent = child.label;
+      panel.appendChild(heading);
+      for (const option of child.children) {
+        if (option.tagName === "OPTION") panel.appendChild(addOption(option));
+      }
+    } else if (child.tagName === "OPTION") {
+      panel.appendChild(addOption(child));
+    }
+  }
+  return panel;
+}
+
+/*
+ * THE PANEL IS BUILT FRESH ON EVERY OPEN, from the select's options as they are
+ * at that instant. That is not laziness about caching — it is the only way the
+ * list cannot be stale, and staleness is the failure this widget is most likely
+ * to have shipped: cockpit replaces a select's options from fetched data all the
+ * time, and a snapshot taken at enhance time would show a model list from before
+ * the last poll while the value underneath had moved on.
+ */
+function open(instance) {
+  if (instance.select.disabled) return;
+  if (openInstance && openInstance !== instance) close(openInstance, false);
+
+  const panel = buildPanel(instance);
+  instance.panel = panel;
+  // Appended to the nearest <dialog> when there is one: a modal dialog is in the
+  // top layer and nothing outside it can paint above it, so a panel on <body>
+  // would open behind the dialog that owns the select. Everywhere else <body> is
+  // right — it escapes `.tablewrap`'s scroll clipping, which is where most of
+  // cockpit's selects live.
+  (instance.trigger.closest("dialog") || document.body).appendChild(panel);
+  instance.trigger.setAttribute("aria-expanded", "true");
+  openInstance = instance;
+
+  // Options are never focusable; the panel is pointed at with
+  // aria-activedescendant instead. preventDefault on mousedown is what keeps
+  // focus on the trigger when an option is clicked.
+  panel.addEventListener("mousedown", (event) => event.preventDefault());
+  panel.addEventListener("click", (event) => {
+    const item = event.target.closest(".select-option");
+    if (item) commit(instance, Number(item.dataset.index));
+  });
+
+  const selected = instance.select.selectedIndex;
+  setActive(instance, selected >= 0 && !instance.select.options[selected].disabled ? selected : firstEnabled(instance));
+  position(instance);
+}
+
+function close(instance, focusTrigger) {
+  if (instance.panel) {
+    instance.panel.remove();
+    instance.panel = null;
+  }
+  instance.items = [];
+  instance.active = -1;
+  instance.typed = "";
+  instance.trigger.setAttribute("aria-expanded", "false");
+  instance.trigger.removeAttribute("aria-activedescendant");
+  if (openInstance === instance) openInstance = null;
+  if (focusTrigger) instance.trigger.focus();
+}
+
+function setActive(instance, index) {
+  const previous = instance.items[instance.active];
+  if (previous) previous.removeAttribute("data-active");
+  instance.active = index;
+  const item = instance.items[index];
+  if (!item) {
+    instance.trigger.removeAttribute("aria-activedescendant");
+    return;
+  }
+  item.setAttribute("data-active", "true");
+  instance.trigger.setAttribute("aria-activedescendant", item.id);
+  item.scrollIntoView({ block: "nearest" });
+}
+
+function commit(instance, index) {
+  const option = optionsOf(instance)[index];
+  if (!option || option.disabled) return; // a disabled option is not a choice; the list stays open
+  const changed = instance.select.selectedIndex !== index;
+  if (changed) {
+    instance.select.selectedIndex = index;
+    syncTrigger(instance);
+  }
+  // Closed BEFORE the events go out: a `change` handler here re-renders the table
+  // this select lives in, so anything touching the instance afterwards would be
+  // touching a detached node.
+  close(instance, true);
+  if (changed) {
+    // A native select fires `input` and THEN `change`, and both bubble. Cockpit's
+    // table filters listen for both on a container element, so dispatching only
+    // `change` would make this a quieter control than the one it replaced.
+    instance.select.dispatchEvent(new Event("input", { bubbles: true }));
+    instance.select.dispatchEvent(new Event("change", { bubbles: true }));
+  }
+}
+
+function position(instance) {
+  const { trigger, panel } = instance;
+  const zoom = zoomOf();
+  const rect = trigger.getBoundingClientRect(); // visual px
+
+  // offsetWidth is a LAYOUT length, already in the same space as the panel's own
+  // min-width, so this one must NOT be divided. Mixing the two is the trap.
+  panel.style.minWidth = `${trigger.offsetWidth}px`;
+  panel.style.maxWidth = `${(window.innerWidth - EDGE * 2) / zoom}px`;
+  panel.style.maxHeight = "";
+
+  const spaceBelow = window.innerHeight - rect.bottom - EDGE - GAP;
+  const spaceAbove = rect.top - EDGE - GAP;
+  const wanted = panel.getBoundingClientRect().height;
+  // Flip only when flipping actually helps. A long list near the bottom of a tall
+  // page has room in neither direction, and flipping it there just moves the
+  // clipping to the other end.
+  const flip = wanted > spaceBelow && spaceAbove > spaceBelow;
+  const room = Math.max(flip ? spaceAbove : spaceBelow, 72);
+  if (wanted > room) panel.style.maxHeight = `${room / zoom}px`;
+
+  const box = panel.getBoundingClientRect(); // visual px, after the clamp
+  const x = Math.min(Math.max(rect.left, EDGE), Math.max(EDGE, window.innerWidth - box.width - EDGE));
+  const y = flip ? rect.top - GAP - box.height : rect.bottom + GAP;
+  panel.style.left = `${x / zoom}px`;
+  panel.style.top = `${y / zoom}px`;
+}
+
+/* ── keyboard ───────────────────────────────────────────────────────────── */
+
+const isPrintable = (event) =>
+  event.key.length === 1 && !event.ctrlKey && !event.metaKey && !event.altKey;
+
+function step(instance, direction) {
+  const options = optionsOf(instance);
+  for (let i = instance.active + direction; i >= 0 && i < options.length; i += direction) {
+    if (!options[i].disabled) {
+      setActive(instance, i);
+      return;
+    }
+  }
+}
+
+function typeahead(instance, character) {
+  const now = Date.now();
+  if (now - instance.typedAt > TYPEAHEAD_MS) instance.typed = "";
+  instance.typedAt = now;
+  instance.typed += character.toLowerCase();
+
+  // One character repeated CYCLES through the options starting with it, which is
+  // what a native select does — pressing "c" three times walks three c-options
+  // rather than hunting for "ccc".
+  const repeated = instance.typed.length > 1 && new Set(instance.typed).size === 1;
+  const needle = repeated ? instance.typed[0] : instance.typed;
+  const advance = repeated || instance.typed.length === 1;
+  const options = optionsOf(instance);
+  const from = advance ? instance.active + 1 : Math.max(instance.active, 0);
+  for (let i = 0; i < options.length; i += 1) {
+    const index = (from + i + options.length) % options.length;
+    if (options[index].disabled) continue;
+    if (label(options[index]).toLowerCase().startsWith(needle)) {
+      setActive(instance, index);
+      return;
+    }
+  }
+}
+
+function onKeydown(instance, event) {
+  const isOpen = Boolean(instance.panel);
+  const key = event.key;
+
+  if (key === "Escape") {
+    if (!isOpen) return;
+    // BOTH, and both matter. preventDefault stops the UA's close-request, and
+    // stopPropagation stops the page's own handler: without them, dismissing this
+    // list inside a modal <dialog> closes the dialog as well, losing the form.
+    event.preventDefault();
+    event.stopPropagation();
+    close(instance, true);
+    return;
+  }
+  if (key === "Tab") {
+    if (isOpen) close(instance, false); // Tab moves on and commits nothing
+    return;
+  }
+
+  if (!isOpen) {
+    if (key === "Enter" || key === " " || key === "ArrowDown" || key === "ArrowUp" || key === "Home" || key === "End") {
+      event.preventDefault();
+      open(instance);
+      if (key === "Home") setActive(instance, firstEnabled(instance));
+      else if (key === "End") setActive(instance, lastEnabled(instance));
+      return;
+    }
+    if (isPrintable(event)) {
+      event.preventDefault();
+      open(instance);
+      typeahead(instance, key);
+    }
+    return;
+  }
+
+  // A space CONTINUES a live typeahead rather than selecting — option labels here
+  // contain spaces ("public — posts on the PR"), so treating it as Enter would
+  // make half of them untypeable.
+  if (key === " " && instance.typed && Date.now() - instance.typedAt <= TYPEAHEAD_MS) {
+    event.preventDefault();
+    typeahead(instance, key);
+    return;
+  }
+  switch (key) {
+    case "Enter":
+    case " ":
+      event.preventDefault();
+      commit(instance, instance.active);
+      return;
+    case "ArrowDown":
+      event.preventDefault();
+      step(instance, 1);
+      return;
+    case "ArrowUp":
+      event.preventDefault();
+      step(instance, -1);
+      return;
+    case "Home":
+      event.preventDefault();
+      setActive(instance, firstEnabled(instance));
+      return;
+    case "End":
+      event.preventDefault();
+      setActive(instance, lastEnabled(instance));
+      return;
+    default:
+      if (isPrintable(event)) {
+        event.preventDefault();
+        typeahead(instance, key);
+      }
+  }
+}
+
+/* ── document-level wiring, installed once ──────────────────────────────── */
+
+function installGlobals() {
+  if (globalsInstalled) return;
+  globalsInstalled = true;
+
+  document.addEventListener(
+    "pointerdown",
+    (event) => {
+      if (!openInstance) return;
+      const target = event.target;
+      if (openInstance.panel.contains(target) || openInstance.field.contains(target)) return;
+      close(openInstance, false);
+    },
+    true,
+  );
+  document.addEventListener("focusin", (event) => {
+    if (!openInstance) return;
+    if (openInstance.field.contains(event.target) || openInstance.panel.contains(event.target)) return;
+    close(openInstance, false);
+  });
+  // The trigger moves when the page or a scroll container moves under it. Capture,
+  // because most of these selects sit in a `.tablewrap` that scrolls on its own and
+  // a scroll event there does not bubble.
+  addEventListener("resize", () => openInstance && position(openInstance));
+  addEventListener("scroll", () => openInstance && position(openInstance), true);
+  // form.reset() rewinds selectedIndex without firing an event or touching the DOM,
+  // so nothing else here would notice. One delegated listener rather than one per
+  // select: these selects are re-created on every render and the <form> is not, so
+  // per-select listeners would pile up on it for the life of the page.
+  document.addEventListener("reset", (event) => {
+    const form = event.target;
+    queueMicrotask(() => {
+      for (const select of form.querySelectorAll?.("select") ?? []) {
+        const instance = enhanced.get(select);
+        if (instance) syncTrigger(instance);
+      }
+    });
+  });
+}
+
+/**
+ * Replace every native `<select>` dropdown on the page with the design system's
+ * own, and keep doing so for selects rendered later.
+ *
+ * @param {ParentNode} [root=document] Where to look for the initial pass.
+ */
+export function initSelects(root = document) {
+  installGlobals();
+  for (const select of root.querySelectorAll("select")) enhance(select);
+
+  if (documentObserver) return;
+  documentObserver = new MutationObserver((records) => {
+    // A re-render can take the open panel's trigger out of the document from
+    // underneath it — a background poll rewriting the table it sits in. The panel
+    // is on <body>, so it would be left floating over a control that no longer
+    // exists.
+    if (openInstance && !openInstance.trigger.isConnected) close(openInstance, false);
+    for (const record of records) {
+      for (const node of record.addedNodes) {
+        if (node.nodeType !== 1) continue;
+        if (node.tagName === "SELECT") enhance(node);
+        else for (const select of node.querySelectorAll("select")) enhance(select);
+      }
+    }
+  });
+  documentObserver.observe(document.documentElement, { childList: true, subtree: true });
+}

package/src/chrome.css

@@ -276,7 +276,38 @@ footer.status .dropdown summary, footer.status .anim-toggle { padding: 0.55rem 0
 
 /* ── 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; }
+/* THE PERMISSION STRING SITS BEHIND THE NAME (0.20.0). Daniel: "the folder info should also
+   be in some grey style color so that it does not have the same color as the path/folder
+   name." It was `--muted-foreground` flat, and measured across the four themes that was worse
+   than it looks in the source:
+
+     contrast between .ls-perm and the NAME beside it, before
+       leaf row:  1.00  1.00  1.00  1.00   ← identical, on EVERY theme
+       dir row:   1.20  2.34  3.45  3.00     (warm / green / mono / paper)
+
+   The leaf case is the severe one and it was invisible in review because the two rules read as
+   different declarations: `.ls-perm` and `.ls-panel .ls-name` are both `--muted-foreground`, so
+   `drwxr-xr-x` and the page name were literally the same ink and the row had no hierarchy at
+   all. Most rows in a rail are leaves. On the DIRECTORY row the warm theme then compounds it —
+   `--muted-foreground` #71614e beside `--primary` #8a4516 is a brown-grey next to a brown, 1.2:1,
+   which the eye reads as one colour even though the hexes differ.
+
+   Mixed toward `--card`, the surface the panel is actually drawn on, rather than swapped for a
+   different token: the point is to push it BACK, and no token in the set means "quieter than
+   muted". 75% is the dimmest mix that still clears 3:1 against the panel on all four themes —
+   warm is the binding one at 3.02 — because this string is not decoration. A trailing slash plus
+   `drwxr-xr-x` is what says the thing has contents, so it has to stay readable, just not compete.
+
+     after:  legibility vs panel  3.02  3.91  3.63  3.55
+             vs leaf name         1.60  1.56  1.55  1.75
+             vs dir name          1.92  3.67  5.35  5.24
+
+   Left at plain `.ls-perm` specificity on purpose: the you-are-here rule below tints this same
+   element toward `--primary`, and it must keep winning. */
+.ls-perm {
+  color: color-mix(in srgb, var(--muted-foreground) 75%, var(--card));
+  font-size: 0.72rem; letter-spacing: 0;
+}
 
 /* DEPTH IS DRAWN, NOT JUST INDENTED. Whitespace alone did not carry it — with the
    permission column in front of every row, a child sat only ~1rem right of its

package/src/components.css

@@ -362,6 +362,207 @@ html[data-theme="warm"] .dropdown-item[data-theme-value="warm"] {
   text-shadow: 0 0 8px var(--glow);
 }
 
+/* ─────────────────────────────────────────────────────────────────────────
+   Select — the estate's own dropdown, because a native one's list CANNOT be
+   styled. Pairs with runtime/select.js.
+
+   THE CONSTRAINT THAT DECIDES EVERYTHING HERE: a `<select>`'s option list is
+   drawn by the OPERATING SYSTEM, outside the page, and no stylesheet reaches
+   it. So every surface in the estate has been rendering a rounded, blue-
+   highlighted, system-font menu out of a terminal UI — the one component that
+   could not be made to look like the rest, no matter what the page declared.
+   `appearance: base-select` would fix it in Chrome 135+ and nowhere else, so
+   Safari would keep the system menu: the estate would then be inconsistent
+   WITH ITSELF, which is worse than being consistently wrong.
+
+   So the list is rebuilt in the page. runtime/select.js keeps the real
+   `<select>` as the value (it is still what a form submits and what page code
+   reads) and paints a button + listbox over it. THE MARKUP CONTRACT IS
+   NOTHING: author a plain `<select>`, exactly as with `<table>`.
+
+   TWO RENDERINGS, ONE DECLARATION. The bare `<select>` (JS off, or before the
+   runtime has run) and the `.select-trigger` that replaces it must be the same
+   control at the same size — a reader who tabs into a page mid-enhancement
+   must not see the box change shape. Splitting their look across two rules is
+   how they would drift, so the closed control is declared ONCE for both, by
+   ELEMENT and by class together. Five copies of `.cfg-sel` in cockpit are what
+   this replaces; none of them agreed about `:disabled`.
+
+   THE BORDER IS 60% OF --foreground, MEASURED, NOT --border. A control's edge
+   is the thing that says "this is a control" and WCAG 1.4.11 wants 3:1 for
+   that; `--border` is a CONTAINER hairline and measures 1.37 / 2.00 / 1.61 /
+   1.42 against `--background` on the four themes — invisible as a control
+   edge, and correct for the cards it was made for. The estate's hand-rolled
+   selects used `currentColor 30%`, which is 1.70 at worst. 60% is the first
+   step that clears 3:1 on all four themes against ALL THREE surfaces a control
+   can land on (worst: warm 3.24 over --background, 3.24 over --muted). Mixed
+   with `transparent` rather than with a surface so it composites correctly
+   wherever it is dropped, and derived from a token so it stays per-theme.
+
+   THE CARET IS TWO GRADIENT HALVES, not an SVG. It has to be `currentColor` —
+   a data-URI with a baked fill would need declaring four times or be wrong on
+   two themes (the luminance gap in tokens.css), and a `::after` is impossible
+   because a `<select>` cannot have generated content. Two abutting squares,
+   each half-filled on the diagonal, draw the same ▾ on both renderings.
+   ───────────────────────────────────────────────────────────────────────── */
+select,
+.select-trigger {
+  appearance: none;
+  -webkit-appearance: none;
+  max-width: 100%;
+  padding: 0.28rem 1.45rem 0.28rem 0.5rem;
+  font: inherit;
+  font-size: var(--fs-sm);
+  line-height: var(--lh-tight);
+  text-align: left;
+  color: var(--foreground);
+  background-color: transparent;
+  background-image:
+    linear-gradient(45deg, transparent 50%, currentColor 50%),
+    linear-gradient(135deg, currentColor 50%, transparent 50%);
+  background-position:
+    right 0.78rem center,
+    right 0.5rem center;
+  background-size: 0.28rem 0.28rem;
+  background-repeat: no-repeat;
+  border: 1px solid color-mix(in srgb, var(--foreground) 60%, transparent);
+  cursor: pointer;
+  transition: border-color 0.15s ease;
+}
+select:hover,
+.select-trigger:hover,
+.select-trigger[aria-expanded="true"] {
+  border-color: var(--primary);
+}
+select:disabled,
+.select-trigger:disabled {
+  opacity: 0.45;
+  cursor: default;
+}
+/* Open: the caret turns over, so the control says "the list is out" without
+   relying on the panel being in view — it may have flipped above the trigger. */
+.select-trigger[aria-expanded="true"] {
+  background-image:
+    linear-gradient(135deg, transparent 50%, currentColor 50%),
+    linear-gradient(45deg, currentColor 50%, transparent 50%);
+}
+
+/* The wrapper the runtime puts around the pair. It is `relative` so the real
+   `<select>` can be laid exactly over the trigger: NOT `display: none`, and not
+   `visibility: hidden` either — Chrome refuses to show a validation bubble on a
+   control it cannot focus and then blocks the submit with no message at all, so
+   a `required` select would silently stop working. Transparent and over the
+   trigger, the bubble still points at the right box. */
+.select-field {
+  position: relative;
+  display: inline-flex;
+  max-width: 100%;
+  vertical-align: middle;
+}
+.select-field > select {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  opacity: 0;
+  pointer-events: none;
+}
+.select-trigger {
+  display: inline-flex;
+  align-items: center;
+  width: 100%;
+}
+.select-value {
+  /* min-width: 0 is what lets a flex item shrink below its content — without it
+     `text-overflow: ellipsis` never fires and a long option label blows the
+     control out of its column instead of being clipped. */
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+/* An empty flex item has no line box, so a select whose current option has no
+   text (`<option value="">`) would render a control HALF THE HEIGHT of the one
+   beside it. A zero-width space gives it a line and no width, and screen readers
+   ignore it — unlike an `&nbsp;`, which they read out. */
+.select-value::after {
+  content: "\200b";
+}
+
+/* THE PANEL IS position: fixed AND APPENDED OUT OF THE FLOW, for two reasons
+   this estate hits constantly: selects live inside `.tablewrap` (which scrolls,
+   so it clips) and inside modal `<dialog>`s (a top layer, which nothing outside
+   can paint above). An absolutely-positioned panel would be cut off in the
+   first and hidden behind the second. runtime/select.js appends it to the
+   nearest open <dialog> when there is one and to <body> otherwise.
+   z-index 60 clears the scanline overlay (40), .dropdown-panel (50) and
+   footer.status (50). */
+.select-panel {
+  position: fixed;
+  z-index: 60;
+  margin: 0;
+  padding: 0.15rem 0;
+  overflow-y: auto;
+  overscroll-behavior: contain;
+  list-style: none;
+  font-size: var(--fs-sm);
+  line-height: var(--lh-tight);
+  color: var(--popover-foreground);
+  background: var(--popover);
+  border: 1px solid color-mix(in srgb, var(--foreground) 60%, transparent);
+  box-shadow: 0 0 20px var(--glow-soft);
+}
+
+/* SELECTION CANNOT BE A COLOUR HERE, and that is measured, not felt. `--primary`
+   against `--popover-foreground` — the selected option's ink against its
+   neighbours' — is 1.65:1 on warm, 1.31 on green, 1.48 on mono, 1.27 on paper.
+   Two inks a reader cannot tell apart is not a marking. Same finding as the
+   rail's current row (0.19.0), same answer: POSITION AND AREA. The selected
+   option is the only one with a left edge marker, and it is bold; the colour is
+   the third signal, not the only one.
+
+   The keyboard's active option and the mouse's hover are the SAME state on
+   purpose — there is one pointer of attention, and showing two would ask the
+   reader which one Enter is going to take. */
+.select-option {
+  display: flex;
+  align-items: center;
+  gap: 0.4rem;
+  padding: 0.28rem 0.9rem 0.28rem 0.55rem;
+  border-inline-start: 2px solid transparent;
+  white-space: nowrap;
+  cursor: pointer;
+}
+.select-option:hover,
+.select-option[data-active="true"] {
+  background: var(--muted);
+}
+.select-option[aria-selected="true"] {
+  color: var(--primary);
+  font-weight: 700;
+  border-inline-start-color: var(--primary);
+}
+/* 65% of the ink, not 45%: below that warm lands at 2.94:1 and the option stops
+   being readable at all, and "unavailable" still has to be legible to be
+   understood as a choice that exists. 65% measures 3.75 at worst (warm). */
+.select-option[aria-disabled="true"] {
+  color: color-mix(in srgb, var(--popover-foreground) 65%, var(--popover));
+  cursor: default;
+}
+.select-option[aria-disabled="true"]:hover {
+  background: none;
+}
+/* <optgroup> label. Nothing in the estate uses one today; it is here because a
+   listbox that silently drops the grouping a consumer wrote is worse than one
+   that never supported it. */
+.select-group {
+  padding: 0.35rem 0.9rem 0.15rem;
+  color: var(--muted-foreground);
+  font-size: var(--fs-xs);
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+}
+
 /* ─────────────────────────────────────────────────────────────────────────
    ELI5 — an "explain like I'm 5" callout box (first-time-term explainers).
    ───────────────────────────────────────────────────────────────────────── */

package/src/print.css

@@ -122,6 +122,7 @@
   .skip-link,
   .dropdown,
   .dropdown-panel,
+  .select-panel,
   .anim-toggle,
   .cursor-block,
   .term-caret,

package/templates/documentation.html

@@ -98,13 +98,13 @@
          on docs.danieldeusing.de, NOT for a doc opened from disk over file://. -->
     <link
       rel="stylesheet"
-      href="https://cdn.jsdelivr.net/npm/@danieldeusing/design@0.19.0/dist/danieldeusing-design.min.css"
-      onerror="this.onerror=null;this.href='/_design/danieldeusing-design-0.19.0.min.css'"
+      href="https://cdn.jsdelivr.net/npm/@danieldeusing/design@0.21.0/dist/danieldeusing-design.min.css"
+      onerror="this.onerror=null;this.href='/_design/danieldeusing-design-0.21.0.min.css'"
     />
     <link
       rel="stylesheet"
-      href="https://cdn.jsdelivr.net/npm/@danieldeusing/design@0.19.0/src/fonts.css"
-      onerror="this.onerror=null;this.href='/_design/danieldeusing-design-0.19.0.fonts.css'"
+      href="https://cdn.jsdelivr.net/npm/@danieldeusing/design@0.21.0/src/fonts.css"
+      onerror="this.onerror=null;this.href='/_design/danieldeusing-design-0.21.0.fonts.css'"
     />
 
     <style>
@@ -340,8 +340,8 @@ flowchart TD
     </footer>
 
     <script type="module">
-      import { applyStoredTheme, initThemeSwitcher, initDropdowns, initTerminal, initAnimToggle, initBurgerNav, initLsNav, initTableScroll, initDiagramZoom, initMinimap, initTooltips } from
-        "https://cdn.jsdelivr.net/npm/@danieldeusing/design@0.19.0/runtime/index.js";
+      import { applyStoredTheme, initThemeSwitcher, initDropdowns, initSelects, initTerminal, initAnimToggle, initBurgerNav, initLsNav, initTableScroll, initDiagramZoom, initMinimap, initTooltips } from
+        "https://cdn.jsdelivr.net/npm/@danieldeusing/design@0.21.0/runtime/index.js";
       applyStoredTheme();
       initThemeSwitcher();
       initDropdowns();
@@ -354,6 +354,11 @@ flowchart TD
       // Every table gets a .tablewrap parent, so a table wider than its column scrolls
       // itself instead of pushing the whole page sideways. Already-wrapped ones are skipped.
       initTableScroll();
+      // Every <select> gets the estate's dropdown instead of the OS one. Called
+      // unconditionally, beside initTableScroll() and for the same reason: both have no
+      // markup contract, so both are a no-op on a page that has none of their element —
+      // and neither can be forgotten on the day a page grows one.
+      initSelects();
 
       // Mermaid diagrams — themed from the design tokens, re-rendered on theme switch.
       // Delete this block (and the pre.mermaid CSS) if the page has no diagrams.

package/templates/page-chrome.html

@@ -48,7 +48,7 @@
      jumps. The runtime export exists for surfaces that genuinely cannot inline.
   2. At the end of <body>, import and call the runtime:
        import { initLsNav, initBurgerNav, initThemeSwitcher, initDropdowns,
-                initAnimToggle, initTableScroll }
+                initAnimToggle, initTableScroll, initSelects }
          from "@danieldeusing/design/runtime";
      initBurgerNav() is not optional here: the markup below ships a .nav-burger, and
      below the 48rem breakpoint that button is the ONLY way to reach the navigation.
@@ -59,6 +59,11 @@
   4. `initTableScroll()` wraps every table so a wide one scrolls itself rather than
      scrolling the whole page sideways. The markup contract is nothing — author a
      plain <table>. Call it again after rendering more rows.
+  5. `initSelects()` replaces the OS dropdown on every <select> with the estate's own —
+     the one component CSS alone can never fix, because the option list is drawn outside
+     the page. The markup contract is nothing here either: author a plain <select>, and
+     it stays the element that holds the value and fires input/change. Selects rendered
+     later are picked up on their own, so there is nothing to call again.
 -->
 
 <!-- ─────────────── <head> ─────────────── -->