lintje 0.5.0 → 0.5.1

package/README.md

@@ -104,7 +104,7 @@ opent.
 | [`CHANGELOG.md`](CHANGELOG.md) | wat er veranderde, en wat een host breekt |
 | [`examples/`](examples/index.html) | de voorbeeldapplicaties, met fictieve data |
 | [`assets/`](assets/README.md) | de iconen, de emblemen, de kaartgeometrie en het logo |
-| [`docs/OPEN_ISSUES.md`](docs/OPEN_ISSUES.md) | wat nog openstaat: iconen, tokens, browsercontroles, bekende afwijkingen |
+| [issues op GitHub](https://github.com/h11t-labs/lintje/issues) | wat nog openstaat; met het label `agent` beschreven zodat een agent het kan oppakken |
 | [`SECURITY.md`](SECURITY.md) | een kwetsbaarheid melden |
 
 ## Licentie

package/dist-elements/actions.js

@@ -1,4 +1,4 @@
-import "./chunks/base-CVKIPSLx.js";
+import "./chunks/base-Bd2pmq86.js";
 import "./tag/logo.js";
 import "./tag/qr-code.js";
 import "./tag/menu-button.js";

package/dist-elements/chunks/{base-CVKIPSLx.js → base-Bd2pmq86.js}

@@ -1,5 +1,5 @@
 //#region src/core/version.ts
-var e = "0.5.0", t = globalThis, n = t.ShadowRoot && (t.ShadyCSS === void 0 || t.ShadyCSS.nativeShadow) && "adoptedStyleSheets" in Document.prototype && "replace" in CSSStyleSheet.prototype, r = Symbol(), i = /* @__PURE__ */ new WeakMap(), a = class {
+var e = "0.5.1", t = globalThis, n = t.ShadowRoot && (t.ShadyCSS === void 0 || t.ShadyCSS.nativeShadow) && "adoptedStyleSheets" in Document.prototype && "replace" in CSSStyleSheet.prototype, r = Symbol(), i = /* @__PURE__ */ new WeakMap(), a = class {
 	constructor(e, t, n) {
 		if (this._$cssResult$ = !0, n !== r) throw Error("CSSResult is not constructable. Use `unsafeCSS` or `css` instead.");
 		this.cssText = e, this.t = t;
@@ -521,7 +521,7 @@ var Re = Le.litElementPolyfillSupport;
 Re?.({ LitElement: k }), (Le.litElementVersions ??= []).push("4.2.2");
 //#endregion
 //#region src/tokens/tokens.css?inline
-var ze = "/* ============================================================================\n   Lintje — design tokens\n\n   Colour is in three groups: themable UI colour (a theme sets only `--primary` and `--accent`, in\n   `themes.css`), fixed data colour (`--data-*`, identical in every\n   mode and theme except the two grays) and fixed status colour (`--status-*`).\n\n   Three layers, one direction: component -> semantic (`--color-*`) -> primitives. Only the\n   primitive blocks may hold a colour literal. To change a colour in one mode, re-point the\n   layer-2 name inside `[data-mode='dark']`.\n\n   `color-mix(in srgb, …)` and the relative `oklch(from …)` need Chrome/Edge 122+, Firefox 128+\n   or Safari 18+;\n   `colour-scheme.test.ts` repeats the arithmetic. The `@font-face` rules live in `fonts.css`:\n   they cannot work inside a shadow root.\n   ========================================================================= */\n\n/* ============================================================================\n   Layer 1 — primitives (the only literals)\n   ========================================================================= */\n:root {\n  /* --- Neutral (light). The one mode-dependent primitive family ----------\n     Neutral-5 is the cool-grey step 600, not 500, because it carries muted TEXT:\n     #64748B is 4.34:1 on neutral-2, #475569 is 6.92:1. */\n  --neutral-0: #FFFFFF;\n  --neutral-1: #F8FAFC;\n  --neutral-2: #F1F5F9;\n  --neutral-3: #E2E8F0;\n  --neutral-4: #94A3B8;\n  --neutral-5: #475569;\n  --neutral-6: #0F172A;\n\n  /* --- Fixed ink ---------------------------------------------------------\n     The same in both modes because it sits on a fill, not on the page. */\n  --ink-white: #FFFFFF;\n  --ink-black: #0F172A;\n  --alpha-white-82: rgba(255, 255, 255, 0.82);\n  --alpha-white-45: rgba(255, 255, 255, 0.45);\n\n  /* --- Focus -------------------------------------------------------------\n     Its own constant: it must not move with the accent or the attention status. */\n  --focus-orange: #E17000;\n\n  /* --- The ribbon --------------------------------------------------------\n     Lintblauw, and the Rijkshuisstijl's own lighter tint for the ribbon in the logo in dark. */\n  --ribbon-blue: #154273;\n  --ribbon-blue-dark: #004A8D;\n\n  /* --- Data (fixed Rijkshuisstijl, identical in light, dark and every theme)\n     The two grays follow the mode: as fixed literals the comparison line landed at 2.69:1\n     on the dark surface. Light #475569 / #94A3B8, dark #B0B0B0 / #7A7A7A. The variables\n     stand in the order of `tokens/colors.ts`, the one list of their names. */\n  --data-sky-blue: #007BC7;\n  --data-dark-yellow: #FFB612;\n  --data-red: #D52B1E;\n  --data-green: #39870C;\n  --data-mint-green: #76D2B6;\n  --data-violet: #A90061;\n  --data-orange: #E17000;\n  --data-pink: #F092CD;\n  --data-dark-green: #275937;\n  --data-purple: #42145F;\n  --data-ruby-red: #CA005D;\n  --data-yellow: #F9E11E;\n  --data-dark-brown: #673328;\n  --data-brown: #94710A;\n  --data-dark-blue: #01689B;\n  --data-light-blue: #8FCAE7;\n  --data-moss-green: #777B00;\n  /* Sky blue's ladder is written out: the map's areas draw in from the land to these classes,\n     and Chromium interpolates a `color-mix()` target wrongly (the land's RGB numbers taken as\n     oklab), so the areas flash yellow. The values are its mix with white; the test checks. */\n  --data-sky-blue-75: #409CD5;\n  --data-sky-blue-60: #66B0DD;\n  --data-sky-blue-45: #8CC4E6;\n  --data-sky-blue-30: #B2D7EE;\n  --data-sky-blue-15: #D9EBF7;\n  --data-comparison: var(--neutral-5);\n  --data-other: var(--neutral-4);\n  /* Yellow as TEXT fails contrast on white: light writes a wait time in this dark gold. */\n  --data-dark-yellow-text: #B07A00;\n  /* Grid and emphasis follow the surface, like the two grays. */\n  --data-grid: var(--neutral-3);\n  --data-emphasis: var(--neutral-6);\n\n  /* --- Status (fixed) ---------------------------------------------------- */\n  --status-success: #39870C;\n  --status-warning: #FFB612;\n  --status-attention: #E17000;\n  --status-error: #D52B1E;\n  --status-info: #007BC7;\n\n  /* Black at the alphas the shadows and overlays use; the digits are the alpha in percent. */\n  --alpha-black-08: rgba(0, 0, 0, 0.08);\n  --alpha-black-14: rgba(0, 0, 0, 0.14);\n  --alpha-black-16: rgba(0, 0, 0, 0.16);\n  --alpha-black-18: rgba(0, 0, 0, 0.18);\n  --alpha-black-22: rgba(0, 0, 0, 0.22);\n  --alpha-black-40: rgba(0, 0, 0, 0.4);\n  --alpha-black-55: rgba(0, 0, 0, 0.55);\n  --alpha-black-60: rgba(0, 0, 0, 0.6);\n}\n\n/* ============================================================================\n   Layer 1 — derivations\n\n   Mixes of the primitives and of the theme's two properties. The tint ladder is 75 / 60 / 45\n   / 30 / 15 % of the base over white; every data colour carries the complete ladder.\n   ========================================================================= */\n:root {\n  /* Darker than the primary in light: a lighter fill under white text lost contrast (2.80:1 on\n     orange). The dark block re-declares it lighter. */\n  --primary-hover: color-mix(in srgb, var(--primary), black 30%);\n  --primary-line: color-mix(in srgb, var(--primary), white 22%);\n  /* The dark tints lift only the perceived lightness, so they keep the primary's colour; a mix\n     with white greys it. Each lightness is the smallest hundredth that clears its floor in every\n     theme: 3:1 on #282828 for a line, 4.5:1 on #333333 (neutral-2), the lightest neutral\n     surface a word stands on, for text. A primary that is lighter already keeps its own. */\n  --primary-tint: oklch(from var(--primary) max(l, 0.55) c h);\n  --primary-tint-text: oklch(from var(--primary) max(l, 0.71) c h);\n  /* A wash behind a word or under a band, never a colour that reads by itself. Fixed in\n     perceived lightness, so it is equally light in every theme and keeps the primary's hue; an\n     sRGB mix with white greys a dark primary. The chroma cap keeps every theme inside sRGB. */\n  --primary-wash: oklch(from var(--primary) 0.955 min(c, 0.02) h);\n\n  --data-dark-yellow-75: color-mix(in srgb, var(--data-dark-yellow) 75%, white);\n  --data-dark-yellow-60: color-mix(in srgb, var(--data-dark-yellow) 60%, white);\n  --data-dark-yellow-45: color-mix(in srgb, var(--data-dark-yellow) 45%, white);\n  --data-dark-yellow-30: color-mix(in srgb, var(--data-dark-yellow) 30%, white);\n  --data-dark-yellow-15: color-mix(in srgb, var(--data-dark-yellow) 15%, white);\n\n  --data-red-75: color-mix(in srgb, var(--data-red) 75%, white);\n  --data-red-60: color-mix(in srgb, var(--data-red) 60%, white);\n  --data-red-45: color-mix(in srgb, var(--data-red) 45%, white);\n  --data-red-30: color-mix(in srgb, var(--data-red) 30%, white);\n  --data-red-15: color-mix(in srgb, var(--data-red) 15%, white);\n\n  --data-green-75: color-mix(in srgb, var(--data-green) 75%, white);\n  --data-green-60: color-mix(in srgb, var(--data-green) 60%, white);\n  --data-green-45: color-mix(in srgb, var(--data-green) 45%, white);\n  --data-green-30: color-mix(in srgb, var(--data-green) 30%, white);\n  --data-green-15: color-mix(in srgb, var(--data-green) 15%, white);\n\n  --data-mint-green-75: color-mix(in srgb, var(--data-mint-green) 75%, white);\n  --data-mint-green-60: color-mix(in srgb, var(--data-mint-green) 60%, white);\n  --data-mint-green-45: color-mix(in srgb, var(--data-mint-green) 45%, white);\n  --data-mint-green-30: color-mix(in srgb, var(--data-mint-green) 30%, white);\n  --data-mint-green-15: color-mix(in srgb, var(--data-mint-green) 15%, white);\n\n  --data-violet-75: color-mix(in srgb, var(--data-violet) 75%, white);\n  --data-violet-60: color-mix(in srgb, var(--data-violet) 60%, white);\n  --data-violet-45: color-mix(in srgb, var(--data-violet) 45%, white);\n  --data-violet-30: color-mix(in srgb, var(--data-violet) 30%, white);\n  --data-violet-15: color-mix(in srgb, var(--data-violet) 15%, white);\n\n  --data-orange-75: color-mix(in srgb, var(--data-orange) 75%, white);\n  --data-orange-60: color-mix(in srgb, var(--data-orange) 60%, white);\n  --data-orange-45: color-mix(in srgb, var(--data-orange) 45%, white);\n  --data-orange-30: color-mix(in srgb, var(--data-orange) 30%, white);\n  --data-orange-15: color-mix(in srgb, var(--data-orange) 15%, white);\n\n  --data-pink-75: color-mix(in srgb, var(--data-pink) 75%, white);\n  --data-pink-60: color-mix(in srgb, var(--data-pink) 60%, white);\n  --data-pink-45: color-mix(in srgb, var(--data-pink) 45%, white);\n  --data-pink-30: color-mix(in srgb, var(--data-pink) 30%, white);\n  --data-pink-15: color-mix(in srgb, var(--data-pink) 15%, white);\n\n  --data-dark-green-75: color-mix(in srgb, var(--data-dark-green) 75%, white);\n  --data-dark-green-60: color-mix(in srgb, var(--data-dark-green) 60%, white);\n  --data-dark-green-45: color-mix(in srgb, var(--data-dark-green) 45%, white);\n  --data-dark-green-30: color-mix(in srgb, var(--data-dark-green) 30%, white);\n  --data-dark-green-15: color-mix(in srgb, var(--data-dark-green) 15%, white);\n\n  --data-purple-75: color-mix(in srgb, var(--data-purple) 75%, white);\n  --data-purple-60: color-mix(in srgb, var(--data-purple) 60%, white);\n  --data-purple-45: color-mix(in srgb, var(--data-purple) 45%, white);\n  --data-purple-30: color-mix(in srgb, var(--data-purple) 30%, white);\n  --data-purple-15: color-mix(in srgb, var(--data-purple) 15%, white);\n\n  --data-ruby-red-75: color-mix(in srgb, var(--data-ruby-red) 75%, white);\n  --data-ruby-red-60: color-mix(in srgb, var(--data-ruby-red) 60%, white);\n  --data-ruby-red-45: color-mix(in srgb, var(--data-ruby-red) 45%, white);\n  --data-ruby-red-30: color-mix(in srgb, var(--data-ruby-red) 30%, white);\n  --data-ruby-red-15: color-mix(in srgb, var(--data-ruby-red) 15%, white);\n\n  --data-yellow-75: color-mix(in srgb, var(--data-yellow) 75%, white);\n  --data-yellow-60: color-mix(in srgb, var(--data-yellow) 60%, white);\n  --data-yellow-45: color-mix(in srgb, var(--data-yellow) 45%, white);\n  --data-yellow-30: color-mix(in srgb, var(--data-yellow) 30%, white);\n  --data-yellow-15: color-mix(in srgb, var(--data-yellow) 15%, white);\n\n  --data-dark-brown-75: color-mix(in srgb, var(--data-dark-brown) 75%, white);\n  --data-dark-brown-60: color-mix(in srgb, var(--data-dark-brown) 60%, white);\n  --data-dark-brown-45: color-mix(in srgb, var(--data-dark-brown) 45%, white);\n  --data-dark-brown-30: color-mix(in srgb, var(--data-dark-brown) 30%, white);\n  --data-dark-brown-15: color-mix(in srgb, var(--data-dark-brown) 15%, white);\n\n  --data-brown-75: color-mix(in srgb, var(--data-brown) 75%, white);\n  --data-brown-60: color-mix(in srgb, var(--data-brown) 60%, white);\n  --data-brown-45: color-mix(in srgb, var(--data-brown) 45%, white);\n  --data-brown-30: color-mix(in srgb, var(--data-brown) 30%, white);\n  --data-brown-15: color-mix(in srgb, var(--data-brown) 15%, white);\n\n  --data-dark-blue-75: color-mix(in srgb, var(--data-dark-blue) 75%, white);\n  --data-dark-blue-60: color-mix(in srgb, var(--data-dark-blue) 60%, white);\n  --data-dark-blue-45: color-mix(in srgb, var(--data-dark-blue) 45%, white);\n  --data-dark-blue-30: color-mix(in srgb, var(--data-dark-blue) 30%, white);\n  --data-dark-blue-15: color-mix(in srgb, var(--data-dark-blue) 15%, white);\n\n  --data-light-blue-75: color-mix(in srgb, var(--data-light-blue) 75%, white);\n  --data-light-blue-60: color-mix(in srgb, var(--data-light-blue) 60%, white);\n  --data-light-blue-45: color-mix(in srgb, var(--data-light-blue) 45%, white);\n  --data-light-blue-30: color-mix(in srgb, var(--data-light-blue) 30%, white);\n  --data-light-blue-15: color-mix(in srgb, var(--data-light-blue) 15%, white);\n\n  --data-moss-green-75: color-mix(in srgb, var(--data-moss-green) 75%, white);\n  --data-moss-green-60: color-mix(in srgb, var(--data-moss-green) 60%, white);\n  --data-moss-green-45: color-mix(in srgb, var(--data-moss-green) 45%, white);\n  --data-moss-green-30: color-mix(in srgb, var(--data-moss-green) 30%, white);\n  --data-moss-green-15: color-mix(in srgb, var(--data-moss-green) 15%, white);\n\n  /* 15 % of the status colour over the surface, so one declaration covers both modes. */\n  --status-success-bg: color-mix(in srgb, var(--status-success) 15%, var(--neutral-0));\n  --status-warning-bg: color-mix(in srgb, var(--status-warning) 15%, var(--neutral-0));\n  --status-attention-bg: color-mix(in srgb, var(--status-attention) 15%, var(--neutral-0));\n  --status-error-bg: color-mix(in srgb, var(--status-error) 15%, var(--neutral-0));\n  --status-info-bg: color-mix(in srgb, var(--status-info) 15%, var(--neutral-0));\n}\n\n/* ============================================================================\n   Layers 2 and 3 — semantic and component tokens (light)\n\n   No colour literal below this line.\n   ========================================================================= */\n:root {\n  /* --- Typography -------------------------------------------------------- */\n  --font-ui: 'RijksSans', 'Source Sans 3', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;\n  --font-mono: 'Source Code Pro', ui-monospace, SFMono-Regular, Menlo, monospace;\n\n  --text-dashboard: 700 1.25rem/1.2 var(--font-ui);\n  --text-h1: 700 1.75rem/1.2 var(--font-ui);\n  --text-h1-mobile: 700 1.5rem/1.15 var(--font-ui);\n  --text-h1-display: 700 2.5rem/1.1 var(--font-ui);\n  --text-h2: 700 1.25rem/1.25 var(--font-ui);\n  --text-tile-title: 700 1rem/1.3 var(--font-ui);\n  --text-tile-sub: 400 0.875rem/1.35 var(--font-ui);\n  --text-kpi: 700 2rem/1.1 var(--font-ui);\n  --text-kpi-mobile: 700 1.5rem/1.1 var(--font-ui);\n  --text-kpi-secondary: 700 1.25rem/1.1 var(--font-ui);\n  --text-body: 400 1rem/1.5 var(--font-ui);\n  /* The text being translated and its translation: larger than body, read at a glance. */\n  --text-translation: 400 1.25rem/1.5 var(--font-ui);\n  --text-ui: 400 1rem/1.4 var(--font-ui);\n  --text-small: 400 0.875rem/1.45 var(--font-ui);\n  --text-meta: 400 0.875rem/1.4 var(--font-ui);\n  --text-table: 400 1rem/1.4 var(--font-ui);\n  --text-table-head: 700 0.875rem/1.3 var(--font-ui);\n  --text-axis: 400 0.75rem/1.2 var(--font-ui);\n\n  --label-size: 0.875rem;\n  --label-weight: 700;\n  --label-tracking: 0.08em;\n  --kpi-tracking: -0.02em;\n\n  /* --- Spacing (4 px scale) --------------------------------------------- */\n  --space-1: 4px;\n  --space-2: 8px;\n  --space-3: 12px;\n  --space-4: 16px;\n  --space-5: 20px;\n  --space-6: 24px;\n  --space-8: 32px;\n  --space-10: 40px;\n\n  /* --- Component sizes --------------------------------------------------- */\n  --h-topbar: 3.5rem;\n  --h-contextbar: 3rem;\n  --h-mobile-header: 4.5rem;\n  --h-control: 3rem;\n  --h-button: 3rem;\n  --h-button-compact: 2.5rem;\n  --h-button-chrome: 2.5rem;\n  --h-icon-button: 2.5rem;\n  --h-chip: 2rem;\n  --h-chip-field: 1.75rem;\n  --h-nav-row: 3rem;\n  --h-nav-head: 6.5rem;\n  --h-table-row: 3rem;\n  --h-touch: 3rem;\n  /* The smallest pointer target. A box that draws smaller reaches it through a\n     transparent hit area (`::after`, negative inset). */\n  --h-target: 3rem;\n  /* A link in a list of text links: one line of text, the WCAG AA floor, as on rijksoverheid.nl. */\n  --h-target-text: 1.5rem;\n  /* The two dense exceptions to the target: a date picker day cell and a listbox option row. */\n  --h-option: 2.5rem;\n  /* The sparkline of a KPI: a line and its area under the figure, with no axes. */\n  --h-sparkline: 2rem;\n\n  --w-nav: 288px;\n  --w-rail: 72px;\n  --w-text: 760px;\n  --w-message: 560px;\n  /* A language choice in the translator's bar. */\n  --w-translator-language: 18rem;\n  /* The widest the page's content gets. A host sets `--lintje-content-width` to change it. */\n  --w-content: 1360px;\n  --nav-edge: 4px;\n  /* The ribbon is the unit: 48 px, 40 on a phone. Both bars are in rem, so they grow with the\n     reader's text size. */\n  --w-ribbon: 3rem;\n  --h-logobar: calc(2.5 * var(--w-ribbon));\n  /* The top bar's height: what pins under the bar measures `--h-topbar`. */\n  --h-navbar: var(--h-topbar);\n  /* How far what follows the hero stands over its band's lower edge. */\n  --hero-overlap: var(--space-10);\n  /* The widest the picture beside the hero's text gets: four of the twelve columns at 1440. */\n  --w-hero-aside: 400px;\n  /* The narrowest a card gets in a card list before the list drops a column. */\n  --w-card: 320px;\n  /* The same for a horizontal card, whose picture takes a column of its own. */\n  --w-card-wide: 480px;\n  --w-card-media: 200px;\n  --w-card-logo: 3.5rem;\n  --w-card-logo-wide: 5rem;\n  /* The narrowest thumbnail under a gallery's large picture. */\n  --w-gallery-thumb: 120px;\n  /* The narrowest column of links in a footer before the columns stand under each other. */\n  --w-footer-column: 220px;\n\n  --page-pad-y: 32px;\n  --page-pad-x: 24px;\n  /* What a full-width bar or the content adds to its side padding so what stands in it keeps to\n     `--w-content`; the percentage is taken of the box the bar stands in. */\n  --page-gutter: max(\n    0px,\n    calc((100% - var(--lintje-content-width, var(--w-content)) - 2 * var(--page-pad-x)) / 2)\n  );\n  --grid-gutter: 24px;\n  --tile-pad-y: 20px;\n  --tile-pad-x: 24px;\n  --chart-h-main: 260px;\n  --chart-h-small: 180px;\n  --chart-h-expanded: 560px;\n\n  /* Sticky context = top bar + summary bar. */\n  --h-sticky: calc(var(--h-topbar) + var(--h-contextbar));\n\n  --radius: 0px;\n  --radius-round: 50%;\n\n  --shadow-sticky: 0 2px 6px var(--alpha-black-08);\n  --shadow-popover: 0 4px 16px var(--alpha-black-14);\n  --shadow-nav: 2px 0 8px var(--alpha-black-08);\n  --shadow-chart-hover: 0 1px 4px var(--alpha-black-22);\n  --shadow-scroll-start: inset 12px 0 10px -10px var(--alpha-black-18);\n  --shadow-scroll-end: inset -12px 0 10px -10px var(--alpha-black-18);\n\n  --color-overlay-page: var(--alpha-black-60);\n  --color-overlay-nav: var(--alpha-black-16);\n\n  --focus-width: 3px;\n  --focus-offset: 2px;\n\n  /* --- Motion ------------------------------------------------------------ */\n  /* `@kind other` marks these for design tooling as neither colors, sizes nor type; the library\n     CSS ships unminified so the notes reach it. */\n  --ease-in-motion: cubic-bezier(0.2, 0, 0, 1); /* @kind other */\n  --ease-out-motion: cubic-bezier(0.4, 0, 1, 1); /* @kind other */\n  /* A fade that runs both ways: straight, so out is in played backwards; a curve leaves a ghost. */\n  --ease-fade: linear; /* @kind other */\n  --dur-base: 200ms; /* @kind other */\n  --dur-hover: 120ms; /* @kind other */\n  --dur-popover: var(--dur-base); /* @kind other */\n  --dur-submenu: 300ms; /* @kind other */\n  --dur-toast: var(--dur-base); /* @kind other */\n  --dur-scrim: var(--dur-base); /* @kind other */\n  --dur-rail: var(--dur-base); /* @kind other */\n  --dur-collapse: var(--dur-base); /* @kind other */\n  --dur-modal: var(--dur-base); /* @kind other */\n  --dur-sheet: var(--dur-base); /* @kind other */\n  --dur-kpi: var(--dur-base); /* @kind other */\n  --dur-badge: 300ms; /* @kind other */\n  --dur-draw: 900ms; /* @kind other */\n  --dur-data-label: 300ms; /* @kind other */\n  --dur-layer: 400ms; /* @kind other */\n  --dur-skeleton: 1200ms; /* @kind other */\n  --dur-wave: 600ms; /* @kind other */\n\n  /* --- Semantic: surfaces ------------------------------------------------ */\n  --color-bg-page: var(--neutral-1);\n  --color-bg-surface: var(--neutral-0);\n  --color-bg-subtle: var(--neutral-2);\n  --color-bg-title: var(--neutral-1);\n  /* Between steps 2 and 3: on the cool-grey ramp neutral-2 sits too close to the page to read\n     as a band. */\n  --color-bg-filter: color-mix(in srgb, var(--neutral-2), var(--neutral-3));\n  --color-bg-selected: var(--neutral-2);\n  --color-bg-inset: var(--neutral-2);\n\n  /* --- Semantic: text ---------------------------------------------------- */\n  --color-text-primary: var(--neutral-6);\n  --color-text-secondary: var(--neutral-6);\n  --color-text-muted: var(--neutral-5);\n  --color-text-inverse: var(--neutral-0);\n  --color-text-disabled: var(--neutral-4);\n  /* A placeholder must stay readable: 4.5:1 on the surface in both modes. */\n  --color-text-placeholder: var(--neutral-5);\n  --color-text-on-fill: var(--ink-white);\n  --color-text-on-light-fill: var(--ink-black);\n  --color-qr-bg: var(--ink-white);\n  --color-qr-fg: var(--ink-black);\n\n  /* --- Semantic: borders ------------------------------------------------- */\n  --color-border-default: var(--neutral-3);\n  --color-border-strong: var(--neutral-3);\n  --color-border-filter: var(--neutral-3);\n  --color-border-heavy: var(--neutral-4);\n  /* The resting edge of a field box: 3:1 (WCAG 1.4.11) on the surface and the filter band. */\n  --color-border-field: var(--neutral-5);\n  /* The 2 px edge of a checkbox and a radio: 3:1 on the surface; dark re-points it. */\n  --color-border-choice: var(--neutral-5);\n  /* In dark a sheet is the same #282828 as the tile under it, so this line separates them. */\n  --color-border-popover: var(--neutral-3);\n  /* A DASHED outline (a suggestion, an uncertain term): neutral-5, because a dashed line has half\n     the ink of a solid one and must still reach 3:1. */\n  --color-border-suggestion: var(--neutral-5);\n\n  /* --- Semantic: action -------------------------------------------------- */\n  --color-action-primary: var(--primary);\n  --color-action-primary-hover: var(--primary-hover);\n  --color-action-primary-text: var(--ink-white);\n  /* A primary fill in dark is a dark box on a dark page (WCAG 1.4.11): it gets a tint border. */\n  --color-action-primary-border: var(--primary);\n  --color-action-secondary-border: var(--primary);\n  /* The destructive fill: the error red, white text on it (5.01:1). Hover is darker in light,\n     lighter in dark. In dark the border is a tint, because #D52B1E is 2.94:1 on #282828. */\n  --color-action-danger: var(--status-error);\n  --color-action-danger-hover: color-mix(in srgb, var(--status-error), black 30%);\n  --color-action-danger-border: var(--status-error);\n  /* The word of the outlined danger button; dark re-points it (the red is 2.94:1 on #282828). */\n  --color-action-danger-text: var(--status-error);\n  --color-link: var(--primary);\n  --color-link-hover: var(--primary-hover);\n  /* A link on a status background: in dark no tint of the primary reaches 4.5:1 there, so it\n     reads in the text colour. It is bold and underlined, so colour never carried it alone. */\n  --color-link-on-status: var(--primary);\n\n  /* The accent splits in three, because a fill, a line and a word have different floors:\n     fill (the primary), line (non-text, 3:1: `--primary-tint` in dark) and text (4.5:1:\n     `--primary-tint-text` in dark). A word in the line token fails: it is sized for 3:1. */\n  --color-accent: var(--primary);\n  --color-accent-line: var(--primary);\n  --color-accent-text: var(--primary);\n\n  --color-focus: var(--focus-orange);\n\n  /* --- Semantic: status -------------------------------------------------- */\n  --color-attention: var(--status-attention);\n  --color-success: var(--status-success);\n  --color-warning: var(--status-warning);\n  --color-error: var(--status-error);\n  --color-info: var(--status-info);\n\n  --color-warning-bg: var(--status-warning-bg);\n  --color-attention-bg: var(--status-attention-bg);\n  --color-error-bg: var(--status-error-bg);\n  --color-info-bg: var(--status-info-bg);\n  --color-success-bg: var(--status-success-bg);\n\n  /* A status mark on its own tint: the status colour, nudged to 3:1 where it falls short. */\n  --color-attention-line: color-mix(in srgb, var(--status-attention), black 10%);\n  --color-error-line: var(--status-error);\n  --color-info-line: var(--status-info);\n  --color-success-line: var(--status-success);\n  /* A status WORD at 4.5:1 on the surface and on `--color-bg-subtle`: the red itself, the green\n     5 % darker (4.13:1 on neutral-2); dark lifts both. A glyph or an edge keeps the line token. */\n  --color-error-text: var(--status-error);\n  --color-success-text: color-mix(in srgb, var(--status-success), black 5%);\n\n  /* --- Navigation (the theme fill; neutral in dark) ---------------------- */\n  --color-nav-bg: var(--primary);\n  --color-nav-text: var(--ink-white);\n  --color-nav-text-sub: var(--alpha-white-82);\n  --color-nav-hover: var(--primary-hover);\n  --color-nav-active: var(--primary-hover);\n  --color-nav-active-edge: var(--ink-white);\n  --color-nav-active-text: var(--ink-white);\n  --color-nav-line: var(--primary-line);\n  --color-nav-disabled: var(--alpha-white-45);\n  --color-nav-badge-bg: var(--status-error);\n  --color-nav-badge-text: var(--ink-white);\n  /* The avatar is white with black initials wherever it stands, in both modes. */\n  --color-nav-avatar-bg: var(--ink-white);\n  --color-nav-avatar-text: var(--ink-black);\n  /* Orange fails on the theme fill (1.89:1 on #01689B, 1:1 on #E17000); white reaches 3:1 on\n     all six primaries. Dark re-points it to the orange. */\n  --color-focus-on-theme: var(--ink-white);\n  /* The theme's ACCENT, not the attention status: on `defensie` the menu is `#E17000` and the\n     status colour made the band disappear. `--accent` is document level only. */\n  --color-nav-environment-bg: var(--accent);\n  --color-nav-environment-text: var(--color-text-on-fill);\n  /* The page's surface in both modes. The navigation bar under it is the menu turned a quarter,\n     on `--color-nav-*`. */\n  --color-logobar-bg: var(--color-bg-surface);\n  --color-logobar-text: var(--color-text-primary);\n  /* The ribbon in the emblem; only the logo re-points it in dark, never lintblauw elsewhere. */\n  --color-logo-ribbon: var(--ribbon-blue);\n  /* What marks an entry in that bar. They name the primitives, never `--color-nav-*`: the bar\n     points those at these, and the two would refer to each other. */\n  --color-navbar-hover: var(--primary-hover);\n  --color-navbar-active: var(--primary-hover);\n  --color-navbar-active-edge: var(--ink-white);\n  --color-navbar-open-text: var(--color-accent-text);\n  /* The start page's band is the primary's wash, so it never reads as the menu. The orange ring\n     misses 3:1 on it; the ring takes the text colour. */\n  --color-hero-bg: var(--primary-wash);\n  --color-hero-text: var(--color-text-primary);\n  --color-hero-focus: var(--color-text-primary);\n  /* The site's foot stands on the menu's own fill, as on rijksoverheid.nl; in dark it follows the menu. */\n  --color-footer-bg: var(--color-nav-bg);\n  --color-footer-text: var(--color-nav-text);\n  --color-footer-line: var(--color-nav-line);\n  --color-footer-focus: var(--color-focus-on-theme);\n\n  /* The box behind a recognised term: the primary's wash; dark re-points it. */\n  --color-term-bg: var(--primary-wash);\n  /* The chosen option of a row of options: the primary's wash; dark re-points it. */\n  --color-choice-active-bg: var(--primary-wash);\n  /* The 2 px line under a term; dark takes the text tint, as the line tint falls short on it. */\n  --color-term-line: var(--color-accent-line);\n\n  /* --- Data colors ------------------------------------------------------- */\n  /* One colour per variable, named after the Rijkshuisstijl colour. */\n  --color-chart-sky-blue: var(--data-sky-blue);\n  --color-chart-dark-yellow: var(--data-dark-yellow);\n  --color-chart-dark-yellow-text: var(--data-dark-yellow-text);\n  --color-chart-red: var(--data-red);\n  --color-chart-green: var(--data-green);\n  --color-chart-mint-green: var(--data-mint-green);\n  --color-chart-violet: var(--data-violet);\n  --color-chart-orange: var(--data-orange);\n  --color-chart-pink: var(--data-pink);\n  --color-chart-dark-green: var(--data-dark-green);\n  --color-chart-purple: var(--data-purple);\n  --color-chart-ruby-red: var(--data-ruby-red);\n  --color-chart-yellow: var(--data-yellow);\n  --color-chart-dark-brown: var(--data-dark-brown);\n  --color-chart-brown: var(--data-brown);\n  --color-chart-dark-blue: var(--data-dark-blue);\n  --color-chart-light-blue: var(--data-light-blue);\n  --color-chart-moss-green: var(--data-moss-green);\n  --color-chart-secondary: var(--data-comparison); /* comparison, context */\n  --color-chart-other: var(--data-other);          /* \"Overig\" */\n  --color-chart-remainder: var(--neutral-3);       /* the rest of a whole, e.g. a donut's open part */\n  --color-chart-emphasis: var(--data-emphasis);    /* trend, threshold, target */\n  --color-chart-grid: var(--data-grid);\n  --color-chart-axis: var(--neutral-5);\n  /* The zero line (darker than the grid) and the hatch of missing data carry meaning, so they\n     reach 3:1 on the surface: a fifth of the way from neutral-4 to neutral-5 (3.1:1; 4.0:1 dark). */\n  --color-chart-zero: color-mix(in srgb, var(--neutral-5) 20%, var(--neutral-4));\n  --color-chart-hatch: color-mix(in srgb, var(--neutral-5) 20%, var(--neutral-4));\n  /* A speaker's colour under a whole fragment: this share of it over the surface, so text keeps\n     its contrast in light and in dark. */\n  --tint-speaker: 12%;\n\n  /* These map colours stay deliberately neutral so the data is the only colour on the map. */\n  --color-map-water: var(--neutral-0);\n  --color-map-land: var(--neutral-2);\n  --color-map-border: var(--neutral-4);\n  /* An area with a figure: 3:1 against the land and the lightest class, which are 1.1:1 apart. */\n  --color-map-border-data: var(--neutral-5);\n\n  /* The variable a figure draws when its data names none: the first colour of the list, the\n     same decision as `DEFAULT_SERIES_COLOR` in `charts/shared/colors.ts`. */\n  --color-chart-default: var(--color-chart-sky-blue);\n\n  /* Subdivision of one variable: its colour in its tint ladder, strongest first, on the steps\n     100 / 75 / 60 / 45 / 30. Every colour carries its ladder, so a figure that brings a colour\n     brings its tints: a renderer names `--color-chart-<colour>` and\n     `--color-chart-<colour>-tint-N`, never a --data-* colour. */\n  --color-chart-sky-blue-tint-2: var(--data-sky-blue-75);\n  --color-chart-sky-blue-tint-3: var(--data-sky-blue-60);\n  --color-chart-sky-blue-tint-4: var(--data-sky-blue-45);\n  --color-chart-sky-blue-tint-5: var(--data-sky-blue-30);\n\n  --color-chart-dark-yellow-tint-2: var(--data-dark-yellow-75);\n  --color-chart-dark-yellow-tint-3: var(--data-dark-yellow-60);\n  --color-chart-dark-yellow-tint-4: var(--data-dark-yellow-45);\n  --color-chart-dark-yellow-tint-5: var(--data-dark-yellow-30);\n\n  --color-chart-red-tint-2: var(--data-red-75);\n  --color-chart-red-tint-3: var(--data-red-60);\n  --color-chart-red-tint-4: var(--data-red-45);\n  --color-chart-red-tint-5: var(--data-red-30);\n\n  --color-chart-green-tint-2: var(--data-green-75);\n  --color-chart-green-tint-3: var(--data-green-60);\n  --color-chart-green-tint-4: var(--data-green-45);\n  --color-chart-green-tint-5: var(--data-green-30);\n\n  --color-chart-mint-green-tint-2: var(--data-mint-green-75);\n  --color-chart-mint-green-tint-3: var(--data-mint-green-60);\n  --color-chart-mint-green-tint-4: var(--data-mint-green-45);\n  --color-chart-mint-green-tint-5: var(--data-mint-green-30);\n\n  --color-chart-violet-tint-2: var(--data-violet-75);\n  --color-chart-violet-tint-3: var(--data-violet-60);\n  --color-chart-violet-tint-4: var(--data-violet-45);\n  --color-chart-violet-tint-5: var(--data-violet-30);\n\n  --color-chart-orange-tint-2: var(--data-orange-75);\n  --color-chart-orange-tint-3: var(--data-orange-60);\n  --color-chart-orange-tint-4: var(--data-orange-45);\n  --color-chart-orange-tint-5: var(--data-orange-30);\n\n  --color-chart-pink-tint-2: var(--data-pink-75);\n  --color-chart-pink-tint-3: var(--data-pink-60);\n  --color-chart-pink-tint-4: var(--data-pink-45);\n  --color-chart-pink-tint-5: var(--data-pink-30);\n\n  --color-chart-dark-green-tint-2: var(--data-dark-green-75);\n  --color-chart-dark-green-tint-3: var(--data-dark-green-60);\n  --color-chart-dark-green-tint-4: var(--data-dark-green-45);\n  --color-chart-dark-green-tint-5: var(--data-dark-green-30);\n\n  --color-chart-purple-tint-2: var(--data-purple-75);\n  --color-chart-purple-tint-3: var(--data-purple-60);\n  --color-chart-purple-tint-4: var(--data-purple-45);\n  --color-chart-purple-tint-5: var(--data-purple-30);\n\n  --color-chart-ruby-red-tint-2: var(--data-ruby-red-75);\n  --color-chart-ruby-red-tint-3: var(--data-ruby-red-60);\n  --color-chart-ruby-red-tint-4: var(--data-ruby-red-45);\n  --color-chart-ruby-red-tint-5: var(--data-ruby-red-30);\n\n  --color-chart-yellow-tint-2: var(--data-yellow-75);\n  --color-chart-yellow-tint-3: var(--data-yellow-60);\n  --color-chart-yellow-tint-4: var(--data-yellow-45);\n  --color-chart-yellow-tint-5: var(--data-yellow-30);\n\n  --color-chart-dark-brown-tint-2: var(--data-dark-brown-75);\n  --color-chart-dark-brown-tint-3: var(--data-dark-brown-60);\n  --color-chart-dark-brown-tint-4: var(--data-dark-brown-45);\n  --color-chart-dark-brown-tint-5: var(--data-dark-brown-30);\n\n  --color-chart-brown-tint-2: var(--data-brown-75);\n  --color-chart-brown-tint-3: var(--data-brown-60);\n  --color-chart-brown-tint-4: var(--data-brown-45);\n  --color-chart-brown-tint-5: var(--data-brown-30);\n\n  --color-chart-dark-blue-tint-2: var(--data-dark-blue-75);\n  --color-chart-dark-blue-tint-3: var(--data-dark-blue-60);\n  --color-chart-dark-blue-tint-4: var(--data-dark-blue-45);\n  --color-chart-dark-blue-tint-5: var(--data-dark-blue-30);\n\n  --color-chart-light-blue-tint-2: var(--data-light-blue-75);\n  --color-chart-light-blue-tint-3: var(--data-light-blue-60);\n  --color-chart-light-blue-tint-4: var(--data-light-blue-45);\n  --color-chart-light-blue-tint-5: var(--data-light-blue-30);\n\n  --color-chart-moss-green-tint-2: var(--data-moss-green-75);\n  --color-chart-moss-green-tint-3: var(--data-moss-green-60);\n  --color-chart-moss-green-tint-4: var(--data-moss-green-45);\n  --color-chart-moss-green-tint-5: var(--data-moss-green-30);\n\n  /* The default ladder, for a figure that names no colour: the sky blue's. */\n  --color-chart-tint-1: var(--color-chart-sky-blue);\n  --color-chart-tint-2: var(--color-chart-sky-blue-tint-2);\n  --color-chart-tint-3: var(--color-chart-sky-blue-tint-3);\n  --color-chart-tint-4: var(--color-chart-sky-blue-tint-4);\n  --color-chart-tint-5: var(--color-chart-sky-blue-tint-5);\n\n  /* Sequential scale for ordinal classes (heatmap, choropleth), lightest first. A component names\n     these, never a --data-* colour directly. */\n  --color-chart-seq-1: var(--data-sky-blue-15);\n  --color-chart-seq-2: var(--data-sky-blue-30);\n  --color-chart-seq-3: var(--data-sky-blue-45);\n  --color-chart-seq-4: var(--data-sky-blue-75);\n  --color-chart-seq-5: var(--data-sky-blue);\n}\n\n/* ============================================================================\n   Dark mode — the Logius range, no inversion\n\n   Redefines the seven `--neutral-*` primitives, re-declares `--primary-hover` lighter and\n   re-points the layer-2/3 names whose meaning changes; everything that merely follows a\n   neutral is absent on purpose. Page and tiles are both #282828, the border separates them: the\n   step below is the menu's, so it stays a band beside the page and under the logo bar.\n   Screen only: paper is always light, whatever the reader chose.\n   ========================================================================= */\n@media screen {\n  [data-mode='dark'] {\n    --neutral-0: #282828;\n    --neutral-1: #1D1D1D;\n    --neutral-2: #333333;\n    --neutral-3: #4A4A4A;\n    --neutral-4: #7A7A7A;\n    --neutral-5: #B0B0B0;\n    --neutral-6: #FFFFFF;\n\n    /* The hover goes UP in dark: the light mix would put a near-black fill on the near-black page. */\n    --primary-hover: color-mix(in srgb, var(--primary), white 12%);\n\n    --color-bg-page: var(--neutral-0);\n    --color-bg-title: var(--neutral-0);\n    /* The hero's wash sits halfway between the menu (L 0.231) and the page (L 0.277), below the\n       page as in light: a panel or tab on it is lighter than its ground. */\n    --primary-wash: oklch(from var(--primary) 0.254 min(c, 0.02) h);\n\n    /* The filter zone must read as a band, so in dark it steps UP to neutral-2 (neutral-1 turned\n       the fields in it into light boxes). `--color-bg-inset` keeps neutral-1: \"sunken\". */\n    --color-bg-filter: var(--neutral-2);\n    --color-bg-inset: var(--neutral-1);\n\n    --color-text-inverse: var(--neutral-1);\n\n    /* Colour that must read by itself on #282828 becomes the tint; a FILL keeps the primary. */\n    --color-action-primary-border: var(--primary-tint);\n    --color-action-secondary-border: var(--primary-tint);\n    /* Danger hover: 8 % white is the most that keeps white text at 4.5:1 (4.56:1). The border and\n       the word lift the red as the primary's tints do, to 3:1 on #282828 and 4.5:1 on #333333,\n       the hover surface; the word's chroma cap keeps it inside sRGB. */\n    --color-action-danger-hover: color-mix(in srgb, var(--status-error), white 8%);\n    --color-action-danger-border: oklch(from var(--status-error) max(l, 0.58) c h);\n    --color-action-danger-text: oklch(from var(--status-error) max(l, 0.71) min(c, 0.18) h);\n    /* A status mark at 3:1 on its own tint. */\n    --color-attention-line: var(--status-attention);\n    --color-error-line: oklch(from var(--status-error) max(l, 0.6) c h);\n    --color-info-line: oklch(from var(--status-info) max(l, 0.58) c h);\n    --color-success-line: oklch(from var(--status-success) max(l, 0.57) c h);\n    /* A status word at 4.5:1 on #333333, lifted as the danger word is. */\n    --color-error-text: oklch(from var(--status-error) max(l, 0.71) min(c, 0.18) h);\n    --color-success-text: oklch(from var(--status-success) max(l, 0.68) min(c, 0.18) h);\n    /* A link is text: the text tint, not the line tint. The hover stays white. */\n    --color-link: var(--primary-tint-text);\n    --color-link-hover: var(--neutral-6);\n    --color-link-on-status: var(--neutral-6);\n    --color-accent-line: var(--primary-tint);\n    --color-accent-text: var(--primary-tint-text);\n\n    /* Lintblauw has too little contrast on the dark surface; the house style lightens it. */\n    --color-logo-ribbon: var(--ribbon-blue-dark);\n\n    /* The menu is neutral in dark: near-black, in the rail and in the bar alike, so in the top\n       layout it stays its own band under the logo bar. Hover and active are one step up, as they\n       are one fill in light; the edge is the text tint, as the line tint is 3:1 on neutral-0 only. */\n    --color-nav-bg: var(--neutral-1);\n    --color-nav-text: var(--neutral-6);\n    --color-nav-text-sub: var(--neutral-5);\n    --color-nav-hover: var(--neutral-2);\n    --color-nav-active: var(--neutral-2);\n    --color-nav-active-edge: var(--primary-tint-text);\n    --color-navbar-hover: var(--neutral-2);\n    --color-navbar-active: var(--neutral-2);\n    --color-navbar-active-edge: var(--primary-tint-text);\n    /* The open entry's word stands on the panel's surface: full text contrast, not the tint. */\n    --color-navbar-open-text: var(--color-text-primary);\n    /* The label is 16 px text: the tint is 3.0:1 and needs 4.5:1. The edge keeps the tint. */\n    --color-nav-active-text: var(--neutral-6);\n    /* The sheet is told from the page by its shadow and this quiet line; 1.66:1 is accepted here. */\n    --color-border-popover: var(--neutral-3);\n    --color-nav-line: var(--neutral-2);\n    --color-nav-disabled: var(--neutral-4);\n    /* The menu is neutral here, so its ring is the orange of every other surface. */\n    --color-focus-on-theme: var(--color-focus);\n    /* The choice edge keeps neutral-4 in dark: it already reaches 3:1 there (3.43:1 on #282828). */\n    --color-border-choice: var(--neutral-4);\n\n    /* A term's box is the subtle surface: behind a word on #282828 the dark wash would be a hole. */\n    --color-term-bg: var(--neutral-2);\n    --color-choice-active-bg: var(--neutral-2);\n    --color-hero-focus: var(--color-focus);\n    --color-term-line: var(--primary-tint-text);\n\n    /* Yellow as text works on the dark surface, so the dark gold is not needed. */\n    --color-chart-dark-yellow-text: var(--data-dark-yellow);\n    --color-map-water: var(--neutral-1);\n\n    --shadow-sticky: 0 2px 6px var(--alpha-black-40);\n    --shadow-popover: 0 4px 16px var(--alpha-black-55);\n    --shadow-nav: 2px 0 8px var(--alpha-black-40);\n    --shadow-chart-hover: 0 1px 4px var(--alpha-black-60);\n    --shadow-scroll-start: inset 12px 0 10px -10px var(--alpha-black-60);\n    --shadow-scroll-end: inset -12px 0 10px -10px var(--alpha-black-60);\n    --color-overlay-nav: var(--alpha-black-40);\n  }\n}\n\n/* ============================================================================\n   Below 768 px the gutter follows the page padding and every pointer target is the touch\n   floor. Screen only: a portrait page is narrower than 768 px and keeps the desktop form.\n   ========================================================================= */\n@media screen and (max-width: 767px) {\n  :root {\n    --grid-gutter: 16px;\n    --h-target: var(--h-touch);\n    --h-option: var(--h-touch);\n    --chart-h-expanded: 320px;\n    --w-ribbon: 2.5rem;\n  }\n}\n\n/* ============================================================================\n   Paper — white under the content, since Lintje prints its own fills\n   (`print-color-adjust: exact` in base.css): a band in the page's grey would cost ink and\n   say nothing.\n   ========================================================================= */\n@media print {\n  :root {\n    /* The paper's margin is the page's edge: bars and content start at it, aligned. */\n    --page-pad-x: 0px;\n    --color-bg-page: var(--neutral-0);\n    --color-bg-title: var(--neutral-0);\n    --color-bg-filter: var(--neutral-0);\n  }\n}\n\n/* The sheet's own margin, so the content never runs to the paper's edge: room for the browser's\n   date, address and page number above and below, and a portrait sheet still wide enough for the\n   tablet's form. A custom property does not reach `@page`, so the value stands here. */\n@page { margin: 15mm 12mm; }\n", Be = "/*\n * The reset every shadow root needs, adopted once as one shared `CSSStyleSheet`.\n *\n * `background` and `color` are deliberately not on `:host`: every element has a `:host`, so\n * they would cut the inheritance chain at each boundary (an icon in the navigation would lose\n * its white `currentColor`). Page-level rules (`html, body`) belong to the host page.\n */\n\n:host {\n  font: var(--text-ui);\n  font-family: var(--font-ui);\n  -webkit-font-smoothing: antialiased;\n  font-variant-numeric: tabular-nums;\n}\n\n*, *::before, *::after { box-sizing: border-box; }\n\nh1, h2, h3, h4, h5, h6, p, figure { margin: 0; }\nul, ol { margin: 0; padding: 0; list-style: none; }\n\nbutton {\n  font: inherit;\n  color: inherit;\n  background: none;\n  border: none;\n  padding: 0;\n  cursor: pointer;\n}\n\na { color: var(--color-link); }\n\ninput, select, textarea { font: inherit; color: inherit; }\n\n/* Focus: always orange 3 px, never animated. */\n:focus-visible {\n  outline: var(--focus-width) solid var(--color-focus);\n  outline-offset: var(--focus-offset);\n}\n/* Where the outside would be clipped (tiles in a grid, table rows) the ring sits inside. */\n.focus-inset:focus-visible { outline-offset: calc(var(--focus-width) * -1); }\n\n[hidden] { display: none !important; }\n\n.visually-hidden {\n  position: absolute;\n  width: 1px; height: 1px;\n  padding: 0; margin: -1px;\n  overflow: hidden;\n  clip: rect(0 0 0 0);\n  white-space: nowrap;\n  border: 0;\n}\n\n@keyframes lintje-shimmer {\n  0%   { background-position: -200% 0; }\n  100% { background-position: 200% 0; }\n}\n@keyframes lintje-rise {\n  from { opacity: 0; transform: translateY(6px); }\n  to   { opacity: 1; transform: none; }\n}\n@keyframes lintje-sheet-in {\n  from { transform: translateY(100%); }\n  to   { transform: none; }\n}\n@keyframes lintje-menu-in {\n  from { transform: translateY(-100%); }\n  to   { transform: none; }\n}\n@keyframes lintje-menu-out {\n  from { transform: none; }\n  to   { transform: translateY(-100%); }\n}\n@keyframes lintje-fade-in { from { opacity: 0; } to { opacity: 1; } }\n/* A point, on a map or in a scatter plot, grows from its middle. */\n@keyframes lintje-point-grow { from { transform: scale(0); } }\n@keyframes lintje-drop-in { from { transform: translateY(-10px); } to { transform: none; } }\n@keyframes lintje-popover-in {\n  from { opacity: 0; transform: translateY(-6px); }\n  to   { opacity: 1; transform: none; }\n}\n\n/* prefers-reduced-motion: all durations 0 except opacity (80 ms). */\n@media (prefers-reduced-motion: reduce) {\n  :host {\n    --dur-base: 0ms; --dur-hover: 0ms; --dur-popover: 0ms; --dur-submenu: 0ms; --dur-toast: 0ms; --dur-scrim: 0ms; --dur-rail: 0ms; --dur-collapse: 0ms;\n    --dur-modal: 0ms; --dur-sheet: 0ms; --dur-kpi: 0ms; --dur-badge: 0ms; --dur-draw: 0ms;\n  }\n  *, *::before, *::after {\n    animation-duration: 0.01ms !important;\n    animation-iteration-count: 1 !important;\n    transition-duration: 80ms !important;\n    scroll-behavior: auto !important;\n  }\n}\n\n/* Forced colours: the browser replaces every colour and drops shadows; what every root shares\n   is the focus ring, in the system's Highlight. */\n@media (forced-colors: active) {\n  :focus-visible { outline-color: Highlight; }\n}\n\n/* Paper. A fill carries meaning (a legend swatch, a status cell, the current page), so it prints\n   even with the browser's background graphics off; the surfaces under it are white in print.\n   A drawing in progress would print half drawn, so every mark stands in its final state. */\n@media print {\n  *, *::before, *::after {\n    print-color-adjust: exact;\n    animation: none !important;\n    transition: none !important;\n  }\n}\n";
+var ze = "/* ============================================================================\n   Lintje — design tokens\n\n   Colour is in three groups: themable UI colour (a theme sets only `--primary` and `--accent`, in\n   `themes.css`), fixed data colour (`--data-*`, identical in every\n   mode and theme except the two grays) and fixed status colour (`--status-*`).\n\n   Three layers, one direction: component -> semantic (`--color-*`) -> primitives. Only the\n   primitive blocks may hold a colour literal. To change a colour in one mode, re-point the\n   layer-2 name inside `[data-mode='dark']`.\n\n   `color-mix(in srgb, …)` and the relative `oklch(from …)` need Chrome/Edge 122+, Firefox 128+\n   or Safari 18+;\n   `colour-scheme.test.ts` repeats the arithmetic. The `@font-face` rules live in `fonts.css`:\n   they cannot work inside a shadow root.\n   ========================================================================= */\n\n/* ============================================================================\n   Layer 1 — primitives (the only literals)\n   ========================================================================= */\n:root {\n  /* --- Neutral (light). The one mode-dependent primitive family ----------\n     Neutral-5 is the cool-grey step 600, not 500, because it carries muted TEXT:\n     #64748B is 4.34:1 on neutral-2, #475569 is 6.92:1. */\n  --neutral-0: #FFFFFF;\n  --neutral-1: #F8FAFC;\n  --neutral-2: #F1F5F9;\n  --neutral-3: #E2E8F0;\n  --neutral-4: #94A3B8;\n  --neutral-5: #475569;\n  --neutral-6: #0F172A;\n\n  /* --- Fixed ink ---------------------------------------------------------\n     The same in both modes because it sits on a fill, not on the page. */\n  --ink-white: #FFFFFF;\n  --ink-black: #0F172A;\n  --alpha-white-82: rgba(255, 255, 255, 0.82);\n  --alpha-white-45: rgba(255, 255, 255, 0.45);\n\n  /* --- Focus -------------------------------------------------------------\n     Its own constant: it must not move with the accent or the attention status. */\n  --focus-orange: #E17000;\n\n  /* --- The ribbon --------------------------------------------------------\n     Lintblauw, and the Rijkshuisstijl's own lighter tint for the ribbon in the logo in dark. */\n  --ribbon-blue: #154273;\n  --ribbon-blue-dark: #004A8D;\n\n  /* --- Data (fixed Rijkshuisstijl, identical in light, dark and every theme)\n     The two grays follow the mode: as fixed literals the comparison line landed at 2.69:1\n     on the dark surface. Light #475569 / #94A3B8, dark #B0B0B0 / #7A7A7A. The variables\n     stand in the order of `tokens/colors.ts`, the one list of their names. */\n  --data-sky-blue: #007BC7;\n  --data-dark-yellow: #FFB612;\n  --data-red: #D52B1E;\n  --data-green: #39870C;\n  --data-mint-green: #76D2B6;\n  --data-violet: #A90061;\n  --data-orange: #E17000;\n  --data-pink: #F092CD;\n  --data-dark-green: #275937;\n  --data-purple: #42145F;\n  --data-ruby-red: #CA005D;\n  --data-yellow: #F9E11E;\n  --data-dark-brown: #673328;\n  --data-brown: #94710A;\n  --data-dark-blue: #01689B;\n  --data-light-blue: #8FCAE7;\n  --data-moss-green: #777B00;\n  /* Sky blue's ladder is written out: the map's areas draw in from the land to these classes,\n     and Chromium interpolates a `color-mix()` target wrongly (the land's RGB numbers taken as\n     oklab), so the areas flash yellow. The values are its mix with white; the test checks. */\n  --data-sky-blue-75: #409CD5;\n  --data-sky-blue-60: #66B0DD;\n  --data-sky-blue-45: #8CC4E6;\n  --data-sky-blue-30: #B2D7EE;\n  --data-sky-blue-15: #D9EBF7;\n  --data-comparison: var(--neutral-5);\n  --data-other: var(--neutral-4);\n  /* Yellow as TEXT fails contrast on white: light writes a wait time in this dark gold. */\n  --data-dark-yellow-text: #B07A00;\n  /* Grid and emphasis follow the surface, like the two grays. */\n  --data-grid: var(--neutral-3);\n  --data-emphasis: var(--neutral-6);\n\n  /* --- Status (fixed) ---------------------------------------------------- */\n  --status-success: #39870C;\n  --status-warning: #FFB612;\n  --status-attention: #E17000;\n  --status-error: #D52B1E;\n  --status-info: #007BC7;\n\n  /* Black at the alphas the shadows and overlays use; the digits are the alpha in percent. */\n  --alpha-black-08: rgba(0, 0, 0, 0.08);\n  --alpha-black-14: rgba(0, 0, 0, 0.14);\n  --alpha-black-16: rgba(0, 0, 0, 0.16);\n  --alpha-black-18: rgba(0, 0, 0, 0.18);\n  --alpha-black-22: rgba(0, 0, 0, 0.22);\n  --alpha-black-40: rgba(0, 0, 0, 0.4);\n  --alpha-black-55: rgba(0, 0, 0, 0.55);\n  --alpha-black-60: rgba(0, 0, 0, 0.6);\n}\n\n/* ============================================================================\n   Layer 1 — derivations\n\n   Mixes of the primitives and of the theme's two properties. The tint ladder is 75 / 60 / 45\n   / 30 / 15 % of the base over white; every data colour carries the complete ladder.\n   ========================================================================= */\n:root {\n  /* Darker than the primary in light: a lighter fill under white text lost contrast (2.80:1 on\n     orange). The dark block re-declares it lighter. */\n  --primary-hover: color-mix(in srgb, var(--primary), black 30%);\n  --primary-line: color-mix(in srgb, var(--primary), white 22%);\n  /* The dark tints lift only the perceived lightness, so they keep the primary's colour; a mix\n     with white greys it. Each lightness is the smallest hundredth that clears its floor in every\n     theme: 3:1 on #282828 for a line, 4.5:1 on #333333 (neutral-2), the lightest neutral\n     surface a word stands on, for text. A primary that is lighter already keeps its own. */\n  --primary-tint: oklch(from var(--primary) max(l, 0.55) c h);\n  --primary-tint-text: oklch(from var(--primary) max(l, 0.71) c h);\n  /* A wash behind a word or under a band, never a colour that reads by itself. Fixed in\n     perceived lightness, so it is equally light in every theme and keeps the primary's hue; an\n     sRGB mix with white greys a dark primary. The chroma cap keeps every theme inside sRGB. */\n  --primary-wash: oklch(from var(--primary) 0.955 min(c, 0.02) h);\n\n  --data-dark-yellow-75: color-mix(in srgb, var(--data-dark-yellow) 75%, white);\n  --data-dark-yellow-60: color-mix(in srgb, var(--data-dark-yellow) 60%, white);\n  --data-dark-yellow-45: color-mix(in srgb, var(--data-dark-yellow) 45%, white);\n  --data-dark-yellow-30: color-mix(in srgb, var(--data-dark-yellow) 30%, white);\n  --data-dark-yellow-15: color-mix(in srgb, var(--data-dark-yellow) 15%, white);\n\n  --data-red-75: color-mix(in srgb, var(--data-red) 75%, white);\n  --data-red-60: color-mix(in srgb, var(--data-red) 60%, white);\n  --data-red-45: color-mix(in srgb, var(--data-red) 45%, white);\n  --data-red-30: color-mix(in srgb, var(--data-red) 30%, white);\n  --data-red-15: color-mix(in srgb, var(--data-red) 15%, white);\n\n  --data-green-75: color-mix(in srgb, var(--data-green) 75%, white);\n  --data-green-60: color-mix(in srgb, var(--data-green) 60%, white);\n  --data-green-45: color-mix(in srgb, var(--data-green) 45%, white);\n  --data-green-30: color-mix(in srgb, var(--data-green) 30%, white);\n  --data-green-15: color-mix(in srgb, var(--data-green) 15%, white);\n\n  --data-mint-green-75: color-mix(in srgb, var(--data-mint-green) 75%, white);\n  --data-mint-green-60: color-mix(in srgb, var(--data-mint-green) 60%, white);\n  --data-mint-green-45: color-mix(in srgb, var(--data-mint-green) 45%, white);\n  --data-mint-green-30: color-mix(in srgb, var(--data-mint-green) 30%, white);\n  --data-mint-green-15: color-mix(in srgb, var(--data-mint-green) 15%, white);\n\n  --data-violet-75: color-mix(in srgb, var(--data-violet) 75%, white);\n  --data-violet-60: color-mix(in srgb, var(--data-violet) 60%, white);\n  --data-violet-45: color-mix(in srgb, var(--data-violet) 45%, white);\n  --data-violet-30: color-mix(in srgb, var(--data-violet) 30%, white);\n  --data-violet-15: color-mix(in srgb, var(--data-violet) 15%, white);\n\n  --data-orange-75: color-mix(in srgb, var(--data-orange) 75%, white);\n  --data-orange-60: color-mix(in srgb, var(--data-orange) 60%, white);\n  --data-orange-45: color-mix(in srgb, var(--data-orange) 45%, white);\n  --data-orange-30: color-mix(in srgb, var(--data-orange) 30%, white);\n  --data-orange-15: color-mix(in srgb, var(--data-orange) 15%, white);\n\n  --data-pink-75: color-mix(in srgb, var(--data-pink) 75%, white);\n  --data-pink-60: color-mix(in srgb, var(--data-pink) 60%, white);\n  --data-pink-45: color-mix(in srgb, var(--data-pink) 45%, white);\n  --data-pink-30: color-mix(in srgb, var(--data-pink) 30%, white);\n  --data-pink-15: color-mix(in srgb, var(--data-pink) 15%, white);\n\n  --data-dark-green-75: color-mix(in srgb, var(--data-dark-green) 75%, white);\n  --data-dark-green-60: color-mix(in srgb, var(--data-dark-green) 60%, white);\n  --data-dark-green-45: color-mix(in srgb, var(--data-dark-green) 45%, white);\n  --data-dark-green-30: color-mix(in srgb, var(--data-dark-green) 30%, white);\n  --data-dark-green-15: color-mix(in srgb, var(--data-dark-green) 15%, white);\n\n  --data-purple-75: color-mix(in srgb, var(--data-purple) 75%, white);\n  --data-purple-60: color-mix(in srgb, var(--data-purple) 60%, white);\n  --data-purple-45: color-mix(in srgb, var(--data-purple) 45%, white);\n  --data-purple-30: color-mix(in srgb, var(--data-purple) 30%, white);\n  --data-purple-15: color-mix(in srgb, var(--data-purple) 15%, white);\n\n  --data-ruby-red-75: color-mix(in srgb, var(--data-ruby-red) 75%, white);\n  --data-ruby-red-60: color-mix(in srgb, var(--data-ruby-red) 60%, white);\n  --data-ruby-red-45: color-mix(in srgb, var(--data-ruby-red) 45%, white);\n  --data-ruby-red-30: color-mix(in srgb, var(--data-ruby-red) 30%, white);\n  --data-ruby-red-15: color-mix(in srgb, var(--data-ruby-red) 15%, white);\n\n  --data-yellow-75: color-mix(in srgb, var(--data-yellow) 75%, white);\n  --data-yellow-60: color-mix(in srgb, var(--data-yellow) 60%, white);\n  --data-yellow-45: color-mix(in srgb, var(--data-yellow) 45%, white);\n  --data-yellow-30: color-mix(in srgb, var(--data-yellow) 30%, white);\n  --data-yellow-15: color-mix(in srgb, var(--data-yellow) 15%, white);\n\n  --data-dark-brown-75: color-mix(in srgb, var(--data-dark-brown) 75%, white);\n  --data-dark-brown-60: color-mix(in srgb, var(--data-dark-brown) 60%, white);\n  --data-dark-brown-45: color-mix(in srgb, var(--data-dark-brown) 45%, white);\n  --data-dark-brown-30: color-mix(in srgb, var(--data-dark-brown) 30%, white);\n  --data-dark-brown-15: color-mix(in srgb, var(--data-dark-brown) 15%, white);\n\n  --data-brown-75: color-mix(in srgb, var(--data-brown) 75%, white);\n  --data-brown-60: color-mix(in srgb, var(--data-brown) 60%, white);\n  --data-brown-45: color-mix(in srgb, var(--data-brown) 45%, white);\n  --data-brown-30: color-mix(in srgb, var(--data-brown) 30%, white);\n  --data-brown-15: color-mix(in srgb, var(--data-brown) 15%, white);\n\n  --data-dark-blue-75: color-mix(in srgb, var(--data-dark-blue) 75%, white);\n  --data-dark-blue-60: color-mix(in srgb, var(--data-dark-blue) 60%, white);\n  --data-dark-blue-45: color-mix(in srgb, var(--data-dark-blue) 45%, white);\n  --data-dark-blue-30: color-mix(in srgb, var(--data-dark-blue) 30%, white);\n  --data-dark-blue-15: color-mix(in srgb, var(--data-dark-blue) 15%, white);\n\n  --data-light-blue-75: color-mix(in srgb, var(--data-light-blue) 75%, white);\n  --data-light-blue-60: color-mix(in srgb, var(--data-light-blue) 60%, white);\n  --data-light-blue-45: color-mix(in srgb, var(--data-light-blue) 45%, white);\n  --data-light-blue-30: color-mix(in srgb, var(--data-light-blue) 30%, white);\n  --data-light-blue-15: color-mix(in srgb, var(--data-light-blue) 15%, white);\n\n  --data-moss-green-75: color-mix(in srgb, var(--data-moss-green) 75%, white);\n  --data-moss-green-60: color-mix(in srgb, var(--data-moss-green) 60%, white);\n  --data-moss-green-45: color-mix(in srgb, var(--data-moss-green) 45%, white);\n  --data-moss-green-30: color-mix(in srgb, var(--data-moss-green) 30%, white);\n  --data-moss-green-15: color-mix(in srgb, var(--data-moss-green) 15%, white);\n\n  /* 15 % of the status colour over the surface, so one declaration covers both modes. */\n  --status-success-bg: color-mix(in srgb, var(--status-success) 15%, var(--neutral-0));\n  --status-warning-bg: color-mix(in srgb, var(--status-warning) 15%, var(--neutral-0));\n  --status-attention-bg: color-mix(in srgb, var(--status-attention) 15%, var(--neutral-0));\n  --status-error-bg: color-mix(in srgb, var(--status-error) 15%, var(--neutral-0));\n  --status-info-bg: color-mix(in srgb, var(--status-info) 15%, var(--neutral-0));\n}\n\n/* ============================================================================\n   Layers 2 and 3 — semantic and component tokens (light)\n\n   No colour literal below this line.\n   ========================================================================= */\n:root {\n  /* --- Typography -------------------------------------------------------- */\n  --font-ui: 'RijksSans', 'Source Sans 3', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;\n  --font-mono: 'Source Code Pro', ui-monospace, SFMono-Regular, Menlo, monospace;\n\n  --text-dashboard: 700 1.25rem/1.2 var(--font-ui);\n  --text-h1: 700 1.75rem/1.2 var(--font-ui);\n  --text-h1-mobile: 700 1.5rem/1.15 var(--font-ui);\n  --text-h1-display: 700 2.5rem/1.1 var(--font-ui);\n  --text-h2: 700 1.25rem/1.25 var(--font-ui);\n  --text-tile-title: 700 1rem/1.3 var(--font-ui);\n  --text-kpi: 700 2rem/1.1 var(--font-ui);\n  --text-kpi-mobile: 700 1.5rem/1.1 var(--font-ui);\n  --text-kpi-secondary: 700 1.25rem/1.1 var(--font-ui);\n  --text-body: 400 1rem/1.5 var(--font-ui);\n  /* Larger than body, read at a glance: the text being translated, a hero's introduction, a\n     transcript in its large size. */\n  --text-translation: 400 1.25rem/1.5 var(--font-ui);\n  --text-ui: 400 1rem/1.4 var(--font-ui);\n  /* Secondary text is one token: a hint, a sub-line, a meta line, a date. */\n  --text-small: 400 0.875rem/1.45 var(--font-ui);\n  /* Former names of the same token; they go with the next breaking release. */\n  --text-meta: var(--text-small);\n  --text-tile-sub: var(--text-small);\n  --text-table: 400 1rem/1.4 var(--font-ui);\n  --text-table-head: 700 0.875rem/1.3 var(--font-ui);\n  --text-axis: 400 0.75rem/1.2 var(--font-ui);\n\n  --label-size: 0.875rem;\n  --label-weight: 700;\n  --label-tracking: 0.08em;\n  --kpi-tracking: -0.02em;\n\n  /* --- Spacing (4 px scale) --------------------------------------------- */\n  --space-1: 4px;\n  --space-2: 8px;\n  --space-3: 12px;\n  --space-4: 16px;\n  --space-5: 20px;\n  --space-6: 24px;\n  --space-8: 32px;\n  --space-10: 40px;\n\n  /* --- Component sizes --------------------------------------------------- */\n  --h-topbar: 3.5rem;\n  --h-contextbar: 3rem;\n  --h-mobile-header: 4.5rem;\n  --h-control: 3rem;\n  --h-button: 3rem;\n  --h-button-compact: 2.5rem;\n  --h-button-chrome: 2.5rem;\n  --h-icon-button: 2.5rem;\n  --h-chip: 2rem;\n  --h-chip-field: 1.75rem;\n  --h-nav-row: 3rem;\n  --h-nav-head: 6.5rem;\n  --h-table-row: 3rem;\n  --h-touch: 3rem;\n  /* The smallest pointer target. A box that draws smaller reaches it through a\n     transparent hit area (`::after`, negative inset). */\n  --h-target: 3rem;\n  /* A link in a list of text links: one line of text, the WCAG AA floor, as on rijksoverheid.nl. */\n  --h-target-text: 1.5rem;\n  /* The two dense exceptions to the target: a date picker day cell and a listbox option row. */\n  --h-option: 2.5rem;\n  /* The sparkline of a KPI: a line and its area under the figure, with no axes. */\n  --h-sparkline: 2rem;\n\n  --w-nav: 288px;\n  --w-rail: 72px;\n  --w-text: 760px;\n  --w-message: 560px;\n  /* A language choice in the translator's bar. */\n  --w-translator-language: 18rem;\n  /* The widest the page's content gets. A host sets `--lintje-content-width` to change it. */\n  --w-content: 1360px;\n  --nav-edge: 4px;\n  /* The ribbon is the unit: 48 px, 40 on a phone. Both bars are in rem, so they grow with the\n     reader's text size. */\n  --w-ribbon: 3rem;\n  --h-logobar: calc(2.5 * var(--w-ribbon));\n  /* The top bar's height: what pins under the bar measures `--h-topbar`. */\n  --h-navbar: var(--h-topbar);\n  /* How far what follows the hero stands over its band's lower edge. */\n  --hero-overlap: var(--space-10);\n  /* The widest the picture beside the hero's text gets: four of the twelve columns at 1440. */\n  --w-hero-aside: 400px;\n  /* The narrowest a card gets in a card list before the list drops a column. */\n  --w-card: 320px;\n  /* The same for a horizontal card, whose picture takes a column of its own. */\n  --w-card-wide: 480px;\n  --w-card-media: 200px;\n  --w-card-logo: 3.5rem;\n  --w-card-logo-wide: 5rem;\n  /* The narrowest thumbnail under a gallery's large picture. */\n  --w-gallery-thumb: 120px;\n  /* The narrowest column of links in a footer before the columns stand under each other. */\n  --w-footer-column: 220px;\n\n  --page-pad-y: 32px;\n  --page-pad-x: 24px;\n  /* What a full-width bar or the content adds to its side padding so what stands in it keeps to\n     `--w-content`; the percentage is taken of the box the bar stands in. */\n  --page-gutter: max(\n    0px,\n    calc((100% - var(--lintje-content-width, var(--w-content)) - 2 * var(--page-pad-x)) / 2)\n  );\n  --grid-gutter: 24px;\n  --tile-pad-y: 20px;\n  --tile-pad-x: 24px;\n  --chart-h-main: 260px;\n  --chart-h-small: 180px;\n  --chart-h-expanded: 560px;\n\n  /* Sticky context = top bar + summary bar. */\n  --h-sticky: calc(var(--h-topbar) + var(--h-contextbar));\n\n  --radius: 0px;\n  --radius-round: 50%;\n\n  --shadow-sticky: 0 2px 6px var(--alpha-black-08);\n  --shadow-popover: 0 4px 16px var(--alpha-black-14);\n  --shadow-nav: 2px 0 8px var(--alpha-black-08);\n  --shadow-chart-hover: 0 1px 4px var(--alpha-black-22);\n  --shadow-scroll-start: inset 12px 0 10px -10px var(--alpha-black-18);\n  --shadow-scroll-end: inset -12px 0 10px -10px var(--alpha-black-18);\n\n  --color-overlay-page: var(--alpha-black-60);\n  --color-overlay-nav: var(--alpha-black-16);\n\n  --focus-width: 3px;\n  --focus-offset: 2px;\n\n  /* --- Motion ------------------------------------------------------------ */\n  /* `@kind other` marks these for design tooling as neither colors, sizes nor type; the library\n     CSS ships unminified so the notes reach it. */\n  --ease-in-motion: cubic-bezier(0.2, 0, 0, 1); /* @kind other */\n  --ease-out-motion: cubic-bezier(0.4, 0, 1, 1); /* @kind other */\n  /* A fade that runs both ways: straight, so out is in played backwards; a curve leaves a ghost. */\n  --ease-fade: linear; /* @kind other */\n  --dur-base: 200ms; /* @kind other */\n  --dur-hover: 120ms; /* @kind other */\n  --dur-popover: var(--dur-base); /* @kind other */\n  --dur-submenu: 300ms; /* @kind other */\n  --dur-toast: var(--dur-base); /* @kind other */\n  --dur-scrim: var(--dur-base); /* @kind other */\n  --dur-rail: var(--dur-base); /* @kind other */\n  --dur-collapse: var(--dur-base); /* @kind other */\n  --dur-modal: var(--dur-base); /* @kind other */\n  --dur-sheet: var(--dur-base); /* @kind other */\n  --dur-kpi: var(--dur-base); /* @kind other */\n  --dur-badge: 300ms; /* @kind other */\n  --dur-draw: 900ms; /* @kind other */\n  --dur-data-label: 300ms; /* @kind other */\n  --dur-layer: 400ms; /* @kind other */\n  --dur-skeleton: 1200ms; /* @kind other */\n  --dur-wave: 600ms; /* @kind other */\n\n  /* --- Semantic: surfaces ------------------------------------------------ */\n  --color-bg-page: var(--neutral-1);\n  --color-bg-surface: var(--neutral-0);\n  --color-bg-subtle: var(--neutral-2);\n  --color-bg-title: var(--neutral-1);\n  /* Between steps 2 and 3: on the cool-grey ramp neutral-2 sits too close to the page to read\n     as a band. */\n  --color-bg-filter: color-mix(in srgb, var(--neutral-2), var(--neutral-3));\n  --color-bg-selected: var(--neutral-2);\n  --color-bg-inset: var(--neutral-2);\n\n  /* --- Semantic: text ---------------------------------------------------- */\n  --color-text-primary: var(--neutral-6);\n  --color-text-secondary: var(--neutral-6);\n  --color-text-muted: var(--neutral-5);\n  --color-text-inverse: var(--neutral-0);\n  --color-text-disabled: var(--neutral-4);\n  /* A placeholder must stay readable: 4.5:1 on the surface in both modes. */\n  --color-text-placeholder: var(--neutral-5);\n  --color-text-on-fill: var(--ink-white);\n  --color-text-on-light-fill: var(--ink-black);\n  --color-qr-bg: var(--ink-white);\n  --color-qr-fg: var(--ink-black);\n\n  /* --- Semantic: borders ------------------------------------------------- */\n  --color-border-default: var(--neutral-3);\n  --color-border-strong: var(--neutral-3);\n  --color-border-filter: var(--neutral-3);\n  --color-border-heavy: var(--neutral-4);\n  /* The resting edge of a field box: 3:1 (WCAG 1.4.11) on the surface and the filter band. */\n  --color-border-field: var(--neutral-5);\n  /* The 2 px edge of a checkbox and a radio: 3:1 on the surface; dark re-points it. */\n  --color-border-choice: var(--neutral-5);\n  /* In dark a sheet is the same #282828 as the tile under it, so this line separates them. */\n  --color-border-popover: var(--neutral-3);\n  /* A DASHED outline (a suggestion, an uncertain term): neutral-5, because a dashed line has half\n     the ink of a solid one and must still reach 3:1. */\n  --color-border-suggestion: var(--neutral-5);\n\n  /* --- Semantic: action -------------------------------------------------- */\n  --color-action-primary: var(--primary);\n  --color-action-primary-hover: var(--primary-hover);\n  --color-action-primary-text: var(--ink-white);\n  /* A primary fill in dark is a dark box on a dark page (WCAG 1.4.11): it gets a tint border. */\n  --color-action-primary-border: var(--primary);\n  --color-action-secondary-border: var(--primary);\n  /* The destructive fill: the error red, white text on it (5.01:1). Hover is darker in light,\n     lighter in dark. In dark the border is a tint, because #D52B1E is 2.94:1 on #282828. */\n  --color-action-danger: var(--status-error);\n  --color-action-danger-hover: color-mix(in srgb, var(--status-error), black 30%);\n  --color-action-danger-border: var(--status-error);\n  /* The word of the outlined danger button; dark re-points it (the red is 2.94:1 on #282828). */\n  --color-action-danger-text: var(--status-error);\n  --color-link: var(--primary);\n  --color-link-hover: var(--primary-hover);\n  /* A link on a status background: in dark no tint of the primary reaches 4.5:1 there, so it\n     reads in the text colour. It is bold and underlined, so colour never carried it alone. */\n  --color-link-on-status: var(--primary);\n\n  /* The accent splits in three, because a fill, a line and a word have different floors:\n     fill (the primary), line (non-text, 3:1: `--primary-tint` in dark) and text (4.5:1:\n     `--primary-tint-text` in dark). A word in the line token fails: it is sized for 3:1. */\n  --color-accent: var(--primary);\n  --color-accent-line: var(--primary);\n  --color-accent-text: var(--primary);\n\n  --color-focus: var(--focus-orange);\n\n  /* --- Semantic: status -------------------------------------------------- */\n  --color-attention: var(--status-attention);\n  --color-success: var(--status-success);\n  --color-warning: var(--status-warning);\n  --color-error: var(--status-error);\n  --color-info: var(--status-info);\n\n  --color-warning-bg: var(--status-warning-bg);\n  --color-attention-bg: var(--status-attention-bg);\n  --color-error-bg: var(--status-error-bg);\n  --color-info-bg: var(--status-info-bg);\n  --color-success-bg: var(--status-success-bg);\n\n  /* A status mark on its own tint: the status colour, nudged to 3:1 where it falls short. */\n  --color-attention-line: color-mix(in srgb, var(--status-attention), black 10%);\n  --color-error-line: var(--status-error);\n  --color-info-line: var(--status-info);\n  --color-success-line: var(--status-success);\n  /* A status WORD at 4.5:1 on the surface and on `--color-bg-subtle`: the red itself, the green\n     5 % darker (4.13:1 on neutral-2); dark lifts both. A glyph or an edge keeps the line token. */\n  --color-error-text: var(--status-error);\n  --color-success-text: color-mix(in srgb, var(--status-success), black 5%);\n\n  /* --- Navigation (the theme fill; neutral in dark) ---------------------- */\n  --color-nav-bg: var(--primary);\n  --color-nav-text: var(--ink-white);\n  --color-nav-text-sub: var(--alpha-white-82);\n  --color-nav-hover: var(--primary-hover);\n  --color-nav-active: var(--primary-hover);\n  --color-nav-active-edge: var(--ink-white);\n  --color-nav-active-text: var(--ink-white);\n  --color-nav-line: var(--primary-line);\n  --color-nav-disabled: var(--alpha-white-45);\n  --color-nav-badge-bg: var(--status-error);\n  --color-nav-badge-text: var(--ink-white);\n  /* The avatar is white with black initials wherever it stands, in both modes. */\n  --color-nav-avatar-bg: var(--ink-white);\n  --color-nav-avatar-text: var(--ink-black);\n  /* Orange fails on the theme fill (1.89:1 on #01689B, 1:1 on #E17000); white reaches 3:1 on\n     all six primaries. Dark re-points it to the orange. */\n  --color-focus-on-theme: var(--ink-white);\n  /* The theme's ACCENT, not the attention status: on `defensie` the menu is `#E17000` and the\n     status colour made the band disappear. `--accent` is document level only. */\n  --color-nav-environment-bg: var(--accent);\n  --color-nav-environment-text: var(--color-text-on-fill);\n  /* The page's surface in both modes. The navigation bar under it is the menu turned a quarter,\n     on `--color-nav-*`. */\n  --color-logobar-bg: var(--color-bg-surface);\n  --color-logobar-text: var(--color-text-primary);\n  /* The ribbon in the emblem; only the logo re-points it in dark, never lintblauw elsewhere. */\n  --color-logo-ribbon: var(--ribbon-blue);\n  /* What marks an entry in that bar. They name the primitives, never `--color-nav-*`: the bar\n     points those at these, and the two would refer to each other. */\n  --color-navbar-hover: var(--primary-hover);\n  --color-navbar-active: var(--primary-hover);\n  --color-navbar-active-edge: var(--ink-white);\n  --color-navbar-open-text: var(--color-accent-text);\n  /* The start page's band is the primary's wash, so it never reads as the menu. The orange ring\n     misses 3:1 on it; the ring takes the text colour. */\n  --color-hero-bg: var(--primary-wash);\n  --color-hero-text: var(--color-text-primary);\n  --color-hero-focus: var(--color-text-primary);\n  /* The site's foot stands on the menu's own fill, as on rijksoverheid.nl; in dark it follows the menu. */\n  --color-footer-bg: var(--color-nav-bg);\n  --color-footer-text: var(--color-nav-text);\n  --color-footer-line: var(--color-nav-line);\n  --color-footer-focus: var(--color-focus-on-theme);\n\n  /* The box behind a recognised term: the primary's wash; dark re-points it. */\n  --color-term-bg: var(--primary-wash);\n  /* The chosen option of a row of options: the primary's wash; dark re-points it. */\n  --color-choice-active-bg: var(--primary-wash);\n  /* The 2 px line under a term; dark takes the text tint, as the line tint falls short on it. */\n  --color-term-line: var(--color-accent-line);\n\n  /* --- Data colors ------------------------------------------------------- */\n  /* One colour per variable, named after the Rijkshuisstijl colour. */\n  --color-chart-sky-blue: var(--data-sky-blue);\n  --color-chart-dark-yellow: var(--data-dark-yellow);\n  --color-chart-dark-yellow-text: var(--data-dark-yellow-text);\n  --color-chart-red: var(--data-red);\n  --color-chart-green: var(--data-green);\n  --color-chart-mint-green: var(--data-mint-green);\n  --color-chart-violet: var(--data-violet);\n  --color-chart-orange: var(--data-orange);\n  --color-chart-pink: var(--data-pink);\n  --color-chart-dark-green: var(--data-dark-green);\n  --color-chart-purple: var(--data-purple);\n  --color-chart-ruby-red: var(--data-ruby-red);\n  --color-chart-yellow: var(--data-yellow);\n  --color-chart-dark-brown: var(--data-dark-brown);\n  --color-chart-brown: var(--data-brown);\n  --color-chart-dark-blue: var(--data-dark-blue);\n  --color-chart-light-blue: var(--data-light-blue);\n  --color-chart-moss-green: var(--data-moss-green);\n  --color-chart-secondary: var(--data-comparison); /* comparison, context */\n  --color-chart-other: var(--data-other);          /* \"Overig\" */\n  --color-chart-remainder: var(--neutral-3);       /* the rest of a whole, e.g. a donut's open part */\n  --color-chart-emphasis: var(--data-emphasis);    /* trend, threshold, target */\n  --color-chart-grid: var(--data-grid);\n  --color-chart-axis: var(--neutral-5);\n  /* The zero line (darker than the grid) and the hatch of missing data carry meaning, so they\n     reach 3:1 on the surface: a fifth of the way from neutral-4 to neutral-5 (3.1:1; 4.0:1 dark). */\n  --color-chart-zero: color-mix(in srgb, var(--neutral-5) 20%, var(--neutral-4));\n  --color-chart-hatch: color-mix(in srgb, var(--neutral-5) 20%, var(--neutral-4));\n  /* A speaker's colour under a whole fragment: this share of it over the surface, so text keeps\n     its contrast in light and in dark. */\n  --tint-speaker: 12%;\n\n  /* These map colours stay deliberately neutral so the data is the only colour on the map. */\n  --color-map-water: var(--neutral-0);\n  --color-map-land: var(--neutral-2);\n  --color-map-border: var(--neutral-4);\n  /* An area with a figure: 3:1 against the land and the lightest class, which are 1.1:1 apart. */\n  --color-map-border-data: var(--neutral-5);\n\n  /* The variable a figure draws when its data names none: the first colour of the list, the\n     same decision as `DEFAULT_SERIES_COLOR` in `charts/shared/colors.ts`. */\n  --color-chart-default: var(--color-chart-sky-blue);\n\n  /* Subdivision of one variable: its colour in its tint ladder, strongest first, on the steps\n     100 / 75 / 60 / 45 / 30. Every colour carries its ladder, so a figure that brings a colour\n     brings its tints: a renderer names `--color-chart-<colour>` and\n     `--color-chart-<colour>-tint-N`, never a --data-* colour. */\n  --color-chart-sky-blue-tint-2: var(--data-sky-blue-75);\n  --color-chart-sky-blue-tint-3: var(--data-sky-blue-60);\n  --color-chart-sky-blue-tint-4: var(--data-sky-blue-45);\n  --color-chart-sky-blue-tint-5: var(--data-sky-blue-30);\n\n  --color-chart-dark-yellow-tint-2: var(--data-dark-yellow-75);\n  --color-chart-dark-yellow-tint-3: var(--data-dark-yellow-60);\n  --color-chart-dark-yellow-tint-4: var(--data-dark-yellow-45);\n  --color-chart-dark-yellow-tint-5: var(--data-dark-yellow-30);\n\n  --color-chart-red-tint-2: var(--data-red-75);\n  --color-chart-red-tint-3: var(--data-red-60);\n  --color-chart-red-tint-4: var(--data-red-45);\n  --color-chart-red-tint-5: var(--data-red-30);\n\n  --color-chart-green-tint-2: var(--data-green-75);\n  --color-chart-green-tint-3: var(--data-green-60);\n  --color-chart-green-tint-4: var(--data-green-45);\n  --color-chart-green-tint-5: var(--data-green-30);\n\n  --color-chart-mint-green-tint-2: var(--data-mint-green-75);\n  --color-chart-mint-green-tint-3: var(--data-mint-green-60);\n  --color-chart-mint-green-tint-4: var(--data-mint-green-45);\n  --color-chart-mint-green-tint-5: var(--data-mint-green-30);\n\n  --color-chart-violet-tint-2: var(--data-violet-75);\n  --color-chart-violet-tint-3: var(--data-violet-60);\n  --color-chart-violet-tint-4: var(--data-violet-45);\n  --color-chart-violet-tint-5: var(--data-violet-30);\n\n  --color-chart-orange-tint-2: var(--data-orange-75);\n  --color-chart-orange-tint-3: var(--data-orange-60);\n  --color-chart-orange-tint-4: var(--data-orange-45);\n  --color-chart-orange-tint-5: var(--data-orange-30);\n\n  --color-chart-pink-tint-2: var(--data-pink-75);\n  --color-chart-pink-tint-3: var(--data-pink-60);\n  --color-chart-pink-tint-4: var(--data-pink-45);\n  --color-chart-pink-tint-5: var(--data-pink-30);\n\n  --color-chart-dark-green-tint-2: var(--data-dark-green-75);\n  --color-chart-dark-green-tint-3: var(--data-dark-green-60);\n  --color-chart-dark-green-tint-4: var(--data-dark-green-45);\n  --color-chart-dark-green-tint-5: var(--data-dark-green-30);\n\n  --color-chart-purple-tint-2: var(--data-purple-75);\n  --color-chart-purple-tint-3: var(--data-purple-60);\n  --color-chart-purple-tint-4: var(--data-purple-45);\n  --color-chart-purple-tint-5: var(--data-purple-30);\n\n  --color-chart-ruby-red-tint-2: var(--data-ruby-red-75);\n  --color-chart-ruby-red-tint-3: var(--data-ruby-red-60);\n  --color-chart-ruby-red-tint-4: var(--data-ruby-red-45);\n  --color-chart-ruby-red-tint-5: var(--data-ruby-red-30);\n\n  --color-chart-yellow-tint-2: var(--data-yellow-75);\n  --color-chart-yellow-tint-3: var(--data-yellow-60);\n  --color-chart-yellow-tint-4: var(--data-yellow-45);\n  --color-chart-yellow-tint-5: var(--data-yellow-30);\n\n  --color-chart-dark-brown-tint-2: var(--data-dark-brown-75);\n  --color-chart-dark-brown-tint-3: var(--data-dark-brown-60);\n  --color-chart-dark-brown-tint-4: var(--data-dark-brown-45);\n  --color-chart-dark-brown-tint-5: var(--data-dark-brown-30);\n\n  --color-chart-brown-tint-2: var(--data-brown-75);\n  --color-chart-brown-tint-3: var(--data-brown-60);\n  --color-chart-brown-tint-4: var(--data-brown-45);\n  --color-chart-brown-tint-5: var(--data-brown-30);\n\n  --color-chart-dark-blue-tint-2: var(--data-dark-blue-75);\n  --color-chart-dark-blue-tint-3: var(--data-dark-blue-60);\n  --color-chart-dark-blue-tint-4: var(--data-dark-blue-45);\n  --color-chart-dark-blue-tint-5: var(--data-dark-blue-30);\n\n  --color-chart-light-blue-tint-2: var(--data-light-blue-75);\n  --color-chart-light-blue-tint-3: var(--data-light-blue-60);\n  --color-chart-light-blue-tint-4: var(--data-light-blue-45);\n  --color-chart-light-blue-tint-5: var(--data-light-blue-30);\n\n  --color-chart-moss-green-tint-2: var(--data-moss-green-75);\n  --color-chart-moss-green-tint-3: var(--data-moss-green-60);\n  --color-chart-moss-green-tint-4: var(--data-moss-green-45);\n  --color-chart-moss-green-tint-5: var(--data-moss-green-30);\n\n  /* The default ladder, for a figure that names no colour: the sky blue's. */\n  --color-chart-tint-1: var(--color-chart-sky-blue);\n  --color-chart-tint-2: var(--color-chart-sky-blue-tint-2);\n  --color-chart-tint-3: var(--color-chart-sky-blue-tint-3);\n  --color-chart-tint-4: var(--color-chart-sky-blue-tint-4);\n  --color-chart-tint-5: var(--color-chart-sky-blue-tint-5);\n\n  /* Sequential scale for ordinal classes (heatmap, choropleth), lightest first. A component names\n     these, never a --data-* colour directly. */\n  --color-chart-seq-1: var(--data-sky-blue-15);\n  --color-chart-seq-2: var(--data-sky-blue-30);\n  --color-chart-seq-3: var(--data-sky-blue-45);\n  --color-chart-seq-4: var(--data-sky-blue-75);\n  --color-chart-seq-5: var(--data-sky-blue);\n}\n\n/* ============================================================================\n   Dark mode — the Logius range, no inversion\n\n   Redefines the seven `--neutral-*` primitives, re-declares `--primary-hover` lighter and\n   re-points the layer-2/3 names whose meaning changes; everything that merely follows a\n   neutral is absent on purpose. Page and tiles are both #282828, the border separates them: the\n   step below is the menu's, so it stays a band beside the page and under the logo bar.\n   Screen only: paper is always light, whatever the reader chose.\n   ========================================================================= */\n@media screen {\n  [data-mode='dark'] {\n    --neutral-0: #282828;\n    --neutral-1: #1D1D1D;\n    --neutral-2: #333333;\n    --neutral-3: #4A4A4A;\n    --neutral-4: #7A7A7A;\n    --neutral-5: #B0B0B0;\n    --neutral-6: #FFFFFF;\n\n    /* The hover goes UP in dark: the light mix would put a near-black fill on the near-black page. */\n    --primary-hover: color-mix(in srgb, var(--primary), white 12%);\n\n    /* The order of light holds: menu under page under surface. The series has no step between\n       the menu (neutral-1, L 0.231) and the surface (L 0.277), so the page is their midpoint\n       (L 0.252); neutral-1 itself was too dark for the menu's step under it. */\n    --color-bg-page: color-mix(in srgb, var(--neutral-0), var(--neutral-1));\n    --color-bg-title: var(--color-bg-page);\n    /* The hero's wash sits halfway between the menu and the page, under the page as in light:\n       a panel or tab on it is lighter than its ground. */\n    --primary-wash: oklch(from var(--primary) 0.241 min(c, 0.02) h);\n\n    /* The filter zone must read as a band, so in dark it steps UP to neutral-2 (neutral-1 turned\n       the fields in it into light boxes). `--color-bg-inset` is \"sunken\": neutral-1, under the\n       page, as in light. */\n    --color-bg-filter: var(--neutral-2);\n    --color-bg-inset: var(--neutral-1);\n\n    --color-text-inverse: var(--neutral-1);\n\n    /* Colour that must read by itself on #282828 becomes the tint; a FILL keeps the primary. */\n    --color-action-primary-border: var(--primary-tint);\n    --color-action-secondary-border: var(--primary-tint);\n    /* Danger hover: 8 % white is the most that keeps white text at 4.5:1 (4.56:1). The border and\n       the word lift the red as the primary's tints do, to 3:1 on #282828 and 4.5:1 on #333333,\n       the hover surface; the word's chroma cap keeps it inside sRGB. */\n    --color-action-danger-hover: color-mix(in srgb, var(--status-error), white 8%);\n    --color-action-danger-border: oklch(from var(--status-error) max(l, 0.58) c h);\n    --color-action-danger-text: oklch(from var(--status-error) max(l, 0.71) min(c, 0.18) h);\n    /* A status mark at 3:1 on its own tint. */\n    --color-attention-line: var(--status-attention);\n    --color-error-line: oklch(from var(--status-error) max(l, 0.6) c h);\n    --color-info-line: oklch(from var(--status-info) max(l, 0.58) c h);\n    --color-success-line: oklch(from var(--status-success) max(l, 0.57) c h);\n    /* A status word at 4.5:1 on #333333, lifted as the danger word is. */\n    --color-error-text: oklch(from var(--status-error) max(l, 0.71) min(c, 0.18) h);\n    --color-success-text: oklch(from var(--status-success) max(l, 0.68) min(c, 0.18) h);\n    /* A link is text: the text tint, not the line tint. The hover stays white. */\n    --color-link: var(--primary-tint-text);\n    --color-link-hover: var(--neutral-6);\n    --color-link-on-status: var(--neutral-6);\n    --color-accent-line: var(--primary-tint);\n    --color-accent-text: var(--primary-tint-text);\n\n    /* Lintblauw has too little contrast on the dark surface; the house style lightens it. */\n    --color-logo-ribbon: var(--ribbon-blue-dark);\n\n    /* The menu is neutral in dark: near-black, under the page, in the rail and in the bar alike,\n       so it stays its own band beside the page and under the logo bar. Hover and active are one\n       step up, as they are one fill in light; the edge is the text tint, as the line tint is\n       3:1 on neutral-0 only. */\n    --color-nav-bg: var(--neutral-1);\n    --color-nav-text: var(--neutral-6);\n    --color-nav-text-sub: var(--neutral-5);\n    --color-nav-hover: var(--neutral-2);\n    --color-nav-active: var(--neutral-2);\n    --color-nav-active-edge: var(--primary-tint-text);\n    --color-navbar-hover: var(--neutral-2);\n    --color-navbar-active: var(--neutral-2);\n    --color-navbar-active-edge: var(--primary-tint-text);\n    /* The open entry's word stands on the panel's surface: full text contrast, not the tint. */\n    --color-navbar-open-text: var(--color-text-primary);\n    /* The label is 16 px text: the tint is 3.0:1 and needs 4.5:1. The edge keeps the tint. */\n    --color-nav-active-text: var(--neutral-6);\n    /* The sheet is told from the page by its shadow and this quiet line; 1.66:1 is accepted here. */\n    --color-border-popover: var(--neutral-3);\n    --color-nav-line: var(--neutral-2);\n    --color-nav-disabled: var(--neutral-4);\n    /* The menu is neutral here, so its ring is the orange of every other surface. */\n    --color-focus-on-theme: var(--color-focus);\n    /* The choice edge keeps neutral-4 in dark: it already reaches 3:1 there (3.43:1 on #282828). */\n    --color-border-choice: var(--neutral-4);\n\n    /* A term's box is the subtle surface: behind a word on #282828 the dark wash would be a hole. */\n    --color-term-bg: var(--neutral-2);\n    --color-choice-active-bg: var(--neutral-2);\n    --color-hero-focus: var(--color-focus);\n    --color-term-line: var(--primary-tint-text);\n\n    /* Yellow as text works on the dark surface, so the dark gold is not needed. */\n    --color-chart-dark-yellow-text: var(--data-dark-yellow);\n    --color-map-water: var(--neutral-1);\n\n    --shadow-sticky: 0 2px 6px var(--alpha-black-40);\n    --shadow-popover: 0 4px 16px var(--alpha-black-55);\n    --shadow-nav: 2px 0 8px var(--alpha-black-40);\n    --shadow-chart-hover: 0 1px 4px var(--alpha-black-60);\n    --shadow-scroll-start: inset 12px 0 10px -10px var(--alpha-black-60);\n    --shadow-scroll-end: inset -12px 0 10px -10px var(--alpha-black-60);\n    --color-overlay-nav: var(--alpha-black-40);\n  }\n}\n\n/* ============================================================================\n   Below 768 px the gutter follows the page padding and every pointer target is the touch\n   floor. Screen only: a portrait page is narrower than 768 px and keeps the desktop form.\n   ========================================================================= */\n@media screen and (max-width: 767px) {\n  :root {\n    --grid-gutter: 16px;\n    --h-target: var(--h-touch);\n    --h-option: var(--h-touch);\n    --chart-h-expanded: 320px;\n    --w-ribbon: 2.5rem;\n  }\n}\n\n/* ============================================================================\n   Paper — white under the content, since Lintje prints its own fills\n   (`print-color-adjust: exact` in base.css): a band in the page's grey would cost ink and\n   say nothing.\n   ========================================================================= */\n@media print {\n  :root {\n    /* The paper's margin is the page's edge: bars and content start at it, aligned. */\n    --page-pad-x: 0px;\n    --color-bg-page: var(--neutral-0);\n    --color-bg-title: var(--neutral-0);\n    --color-bg-filter: var(--neutral-0);\n  }\n}\n\n/* The sheet's own margin, so the content never runs to the paper's edge: room for the browser's\n   date, address and page number above and below, and a portrait sheet still wide enough for the\n   tablet's form. A custom property does not reach `@page`, so the value stands here. */\n@page { margin: 15mm 12mm; }\n", Be = "/*\n * The reset every shadow root needs, adopted once as one shared `CSSStyleSheet`.\n *\n * `background` and `color` are deliberately not on `:host`: every element has a `:host`, so\n * they would cut the inheritance chain at each boundary (an icon in the navigation would lose\n * its white `currentColor`). Page-level rules (`html, body`) belong to the host page.\n */\n\n:host {\n  font: var(--text-ui);\n  font-family: var(--font-ui);\n  -webkit-font-smoothing: antialiased;\n  font-variant-numeric: tabular-nums;\n}\n\n*, *::before, *::after { box-sizing: border-box; }\n\nh1, h2, h3, h4, h5, h6, p, figure { margin: 0; }\nul, ol { margin: 0; padding: 0; list-style: none; }\n\nbutton {\n  font: inherit;\n  color: inherit;\n  background: none;\n  border: none;\n  padding: 0;\n  cursor: pointer;\n}\n\na { color: var(--color-link); }\n\ninput, select, textarea { font: inherit; color: inherit; }\n\n/* Focus: always orange 3 px, never animated. */\n:focus-visible {\n  outline: var(--focus-width) solid var(--color-focus);\n  outline-offset: var(--focus-offset);\n}\n/* Where the outside would be clipped (tiles in a grid, table rows) the ring sits inside. */\n.focus-inset:focus-visible { outline-offset: calc(var(--focus-width) * -1); }\n\n[hidden] { display: none !important; }\n\n.visually-hidden {\n  position: absolute;\n  width: 1px; height: 1px;\n  padding: 0; margin: -1px;\n  overflow: hidden;\n  clip: rect(0 0 0 0);\n  white-space: nowrap;\n  border: 0;\n}\n\n@keyframes lintje-shimmer {\n  0%   { background-position: -200% 0; }\n  100% { background-position: 200% 0; }\n}\n@keyframes lintje-rise {\n  from { opacity: 0; transform: translateY(6px); }\n  to   { opacity: 1; transform: none; }\n}\n@keyframes lintje-sheet-in {\n  from { transform: translateY(100%); }\n  to   { transform: none; }\n}\n@keyframes lintje-menu-in {\n  from { transform: translateY(-100%); }\n  to   { transform: none; }\n}\n@keyframes lintje-menu-out {\n  from { transform: none; }\n  to   { transform: translateY(-100%); }\n}\n@keyframes lintje-fade-in { from { opacity: 0; } to { opacity: 1; } }\n/* A point, on a map or in a scatter plot, grows from its middle. */\n@keyframes lintje-point-grow { from { transform: scale(0); } }\n@keyframes lintje-drop-in { from { transform: translateY(-10px); } to { transform: none; } }\n@keyframes lintje-popover-in {\n  from { opacity: 0; transform: translateY(-6px); }\n  to   { opacity: 1; transform: none; }\n}\n\n/* prefers-reduced-motion: all durations 0 except opacity (80 ms). */\n@media (prefers-reduced-motion: reduce) {\n  :host {\n    --dur-base: 0ms; --dur-hover: 0ms; --dur-popover: 0ms; --dur-submenu: 0ms; --dur-toast: 0ms; --dur-scrim: 0ms; --dur-rail: 0ms; --dur-collapse: 0ms;\n    --dur-modal: 0ms; --dur-sheet: 0ms; --dur-kpi: 0ms; --dur-badge: 0ms; --dur-draw: 0ms;\n  }\n  *, *::before, *::after {\n    animation-duration: 0.01ms !important;\n    animation-iteration-count: 1 !important;\n    transition-duration: 80ms !important;\n    scroll-behavior: auto !important;\n  }\n}\n\n/* Forced colours: the browser replaces every colour and drops shadows; what every root shares\n   is the focus ring, in the system's Highlight. */\n@media (forced-colors: active) {\n  :focus-visible { outline-color: Highlight; }\n}\n\n/* Paper. A fill carries meaning (a legend swatch, a status cell, the current page), so it prints\n   even with the browser's background graphics off; the surfaces under it are white in print.\n   A drawing in progress would print half drawn, so every mark stands in its final state. */\n@media print {\n  *, *::before, *::after {\n    print-color-adjust: exact;\n    animation: none !important;\n    transition: none !important;\n  }\n}\n";
 //#endregion
 //#region src/core/styles.ts
 function Ve(e) {
@@ -1487,7 +1487,7 @@ var yn = class extends j {
 M("lintje-badge", yn);
 //#endregion
 //#region src/components/actions/button/button.css?inline
-var bn = "/*\n * Above the divider: what the element itself needs (`lintje-button` is the box the page lays\n * out). Below it: the block's own BEM CSS, in the shadow root.\n */\n:host {\n  display: inline-flex;\n  vertical-align: middle;\n}\n:host([hidden]) { display: none; }\n:host(.lintje-button--block),\n:host([block]) { display: flex; }\n:host([block]) .lintje-button { width: 100%; }\n:host([span]) .lintje-button { width: 100%; }\n\n/* ------------------------------------------------------------------------ */\n\n.lintje-button {\n  /* Never wider than its place: in a narrow cell the label is cut with an ellipsis. */\n  max-width: 100%;\n  min-width: 0;\n  position: relative;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  gap: var(--space-2);\n  height: var(--h-button);\n  padding: 0 var(--space-4);\n  border: 1px solid transparent;\n  font-family: var(--font-ui);\n  font-size: 1rem;\n  font-weight: 700;\n  text-decoration: none;\n  cursor: pointer;\n  border-radius: var(--radius);\n  transition: background var(--dur-hover) var(--ease-in-motion),\n              color var(--dur-hover) var(--ease-in-motion),\n              border-color var(--dur-hover) var(--ease-in-motion);\n}\n.lintje-button__label {\n  min-width: 0;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n.lintje-button--compact { height: var(--h-button-compact); padding: 0 var(--space-3); }\n.lintje-button--chrome  { height: var(--h-button-chrome);  padding: 0 14px; }\n/* The compact and chrome button reach the 48 px target through a transparent hit area, 4 px out\n   on each side. A row of them keeps 8 px between the boxes, so hit areas never overlap. */\n.lintje-button--compact::after,\n.lintje-button--chrome::after {\n  content: '';\n  position: absolute;\n  inset: min(0px, calc((100% - var(--h-target)) / 2)) 0;\n}\n\n/* The 1 px border is transparent, so the primary fill fills it in light; in dark it draws the\n   tint, the only thing that separates a #0E3B6E box from a #282828 page (1.31:1). */\n.lintje-button--primary {\n  background: var(--color-action-primary);\n  color: var(--color-action-primary-text);\n  border-color: var(--color-action-primary-border);\n}\n.lintje-button--primary:not(.is-disabled, .is-busy, :disabled, [aria-disabled='true']):hover { background: var(--color-action-primary-hover); }\n\n.lintje-button--secondary {\n  background: var(--color-bg-surface);\n  color: var(--color-accent-text);\n  border-color: var(--color-action-secondary-border);\n}\n.lintje-button--secondary:not(.is-disabled, .is-busy, :disabled, [aria-disabled='true']):hover { background: var(--color-bg-selected); }\n\n.lintje-button--tertiary {\n  background: transparent;\n  color: var(--color-text-primary);\n  border-color: var(--color-border-strong);\n}\n.lintje-button--tertiary:not(.is-disabled, .is-busy, :disabled, [aria-disabled='true']):hover { background: var(--color-bg-subtle); }\n\n/* The destructive weight; in dark the border is the red's tint, the only thing reaching 3:1. */\n.lintje-button--danger {\n  background: var(--color-action-danger);\n  color: var(--color-text-on-fill);\n  border-color: var(--color-action-danger-border);\n}\n.lintje-button--danger:not(.is-disabled, .is-busy, :disabled, [aria-disabled='true']):hover { background: var(--color-action-danger-hover); }\n\n/* `danger-secondary`: the quieter destructive form, for a row where the fill would shout. The\n   colour is `--color-action-danger-text`. The hover is the tertiary's `--color-bg-subtle`:\n   the red word on `--color-error-bg` was 3.96:1 in light. */\n.lintje-button--danger-secondary {\n  background: var(--color-bg-surface);\n  color: var(--color-action-danger-text);\n  border-color: var(--color-action-danger-text);\n}\n.lintje-button--danger-secondary:not(.is-disabled, .is-busy, :disabled, [aria-disabled='true']):hover { background: var(--color-bg-subtle); }\n\n.lintje-button--link {\n  height: auto;\n  padding: 0;\n  color: var(--color-link);\n  text-decoration: underline;\n  background: none;\n}\n.lintje-button--link:not(.is-disabled, .is-busy, :disabled, [aria-disabled='true']):hover { color: var(--color-link-hover); }\n/* The link reaches the text target (24 px) through a transparent hit area. */\n.lintje-button--link::after {\n  content: '';\n  position: absolute;\n  inset: min(0px, calc((100% - var(--h-target-text)) / 2)) 0;\n}\n\n/* Disabled is `aria-disabled`: the button keeps its tab order and focus ring. A busy button is\n   not `is-disabled`: it keeps its variant's colours. Native `<button>`s with these classes get\n   the look from `:disabled` or `aria-disabled`, without the class. */\n.lintje-button.is-disabled,\n.lintje-button:disabled,\n.lintje-button[aria-disabled='true']:not(.is-busy) {\n  opacity: 1;\n  cursor: not-allowed;\n  background: var(--color-bg-subtle);\n  color: var(--color-text-disabled);\n  border-color: var(--color-border-default);\n}\n.lintje-button--link.is-disabled,\n.lintje-button--link:disabled,\n.lintje-button--link[aria-disabled='true']:not(.is-busy) {\n  background: none;\n  border-color: transparent;\n  text-decoration: none;\n}\n\n/* --- Busy --------------------------------------------------------------- */\n/*\n * An action that round-trips. The button keeps its width: label and icons only lose their ink,\n * and the ring is drawn over the middle, so nothing re-flows. The label is transparent, not\n * `visibility: hidden`, so the focused button keeps its name.\n */\n.lintje-button.is-busy { cursor: progress; }\n.lintje-button.is-busy .lintje-button__label { opacity: 0; }\n.lintje-button.is-busy .lintje-button__icon { visibility: hidden; }\n.lintje-button__busy {\n  position: absolute;\n  top: 50%; left: 50%;\n  width: 16px; height: 16px;\n  margin: -8px 0 0 -8px;\n  border: 2px solid currentColor;\n  border-top-color: transparent;\n  border-radius: var(--radius-round);\n  opacity: 0.85;\n  animation: lintje-spin var(--dur-skeleton) linear infinite;\n}\n/* A keyframe only works in the root that uses it. */\n@keyframes lintje-spin {\n  from { transform: rotate(0deg); }\n  to   { transform: rotate(360deg); }\n}\n/* Reduced motion: the ring stands still; `aria-busy` carries the state. */\n@media (prefers-reduced-motion: reduce) {\n  .lintje-button__busy { animation: none; }\n}\n\n/* Forced colours: `aria-disabled` is not grayed out by the browser. */\n@media (forced-colors: active) {\n  .lintje-button.is-disabled,\n  .lintje-button:disabled,\n  .lintje-button[aria-disabled='true']:not(.is-busy) { color: GrayText; border-color: GrayText; }\n}\n", xn = "/*\n * Adopted by a control that has nothing to say on paper: a button, a question box, a bar of\n * actions. What the reader chose stays in the elements that show it; what to press does not.\n * `!important`, so a page's own `display` on the tag does not bring it back.\n */\n@media print {\n  :host { display: none !important; }\n}\n", Sn = "lintje-button-reason", Cn = class extends j {
+var bn = "/*\n * Above the divider: what the element itself needs (`lintje-button` is the box the page lays\n * out). Below it: the block's own BEM CSS, in the shadow root.\n */\n:host {\n  display: inline-flex;\n  vertical-align: middle;\n}\n:host([hidden]) { display: none; }\n:host(.lintje-button--block),\n:host([block]) { display: flex; }\n:host([block]) .lintje-button { width: 100%; }\n:host([span]) .lintje-button { width: 100%; }\n\n/* ------------------------------------------------------------------------ */\n\n.lintje-button {\n  /* Never wider than its place: in a narrow cell the label is cut with an ellipsis. */\n  max-width: 100%;\n  min-width: 0;\n  position: relative;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  gap: var(--space-2);\n  height: var(--h-button);\n  padding: 0 var(--space-4);\n  border: 1px solid transparent;\n  font-family: var(--font-ui);\n  font-size: 1rem;\n  font-weight: 700;\n  text-decoration: none;\n  cursor: pointer;\n  border-radius: var(--radius);\n  transition: background var(--dur-hover) var(--ease-in-motion),\n              color var(--dur-hover) var(--ease-in-motion),\n              border-color var(--dur-hover) var(--ease-in-motion);\n}\n.lintje-button__label {\n  min-width: 0;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n.lintje-button--compact { height: var(--h-button-compact); padding: 0 var(--space-3); }\n.lintje-button--chrome  { height: var(--h-button-chrome);  padding: 0 14px; }\n/* The compact and chrome button reach the 48 px target through a transparent hit area, 4 px out\n   on each side. A row of them keeps 8 px between the boxes, so hit areas never overlap. */\n.lintje-button--compact::after,\n.lintje-button--chrome::after {\n  content: '';\n  position: absolute;\n  inset: min(0px, calc((100% - var(--h-target)) / 2)) 0;\n}\n\n/* The 1 px border is transparent, so the primary fill fills it in light; in dark it draws the\n   tint, the only thing that separates a #0E3B6E box from a #282828 surface (1.31:1). */\n.lintje-button--primary {\n  background: var(--color-action-primary);\n  color: var(--color-action-primary-text);\n  border-color: var(--color-action-primary-border);\n}\n.lintje-button--primary:not(.is-disabled, .is-busy, :disabled, [aria-disabled='true']):hover { background: var(--color-action-primary-hover); }\n\n.lintje-button--secondary {\n  background: var(--color-bg-surface);\n  color: var(--color-accent-text);\n  border-color: var(--color-action-secondary-border);\n}\n.lintje-button--secondary:not(.is-disabled, .is-busy, :disabled, [aria-disabled='true']):hover { background: var(--color-bg-selected); }\n\n.lintje-button--tertiary {\n  background: transparent;\n  color: var(--color-text-primary);\n  border-color: var(--color-border-strong);\n}\n.lintje-button--tertiary:not(.is-disabled, .is-busy, :disabled, [aria-disabled='true']):hover { background: var(--color-bg-subtle); }\n\n/* The destructive weight; in dark the border is the red's tint, the only thing reaching 3:1. */\n.lintje-button--danger {\n  background: var(--color-action-danger);\n  color: var(--color-text-on-fill);\n  border-color: var(--color-action-danger-border);\n}\n.lintje-button--danger:not(.is-disabled, .is-busy, :disabled, [aria-disabled='true']):hover { background: var(--color-action-danger-hover); }\n\n/* `danger-secondary`: the quieter destructive form, for a row where the fill would shout. The\n   colour is `--color-action-danger-text`. The hover is the tertiary's `--color-bg-subtle`:\n   the red word on `--color-error-bg` was 3.96:1 in light. */\n.lintje-button--danger-secondary {\n  background: var(--color-bg-surface);\n  color: var(--color-action-danger-text);\n  border-color: var(--color-action-danger-text);\n}\n.lintje-button--danger-secondary:not(.is-disabled, .is-busy, :disabled, [aria-disabled='true']):hover { background: var(--color-bg-subtle); }\n\n.lintje-button--link {\n  height: auto;\n  padding: 0;\n  color: var(--color-link);\n  text-decoration: underline;\n  background: none;\n}\n.lintje-button--link:not(.is-disabled, .is-busy, :disabled, [aria-disabled='true']):hover { color: var(--color-link-hover); }\n/* The link reaches the text target (24 px) through a transparent hit area. */\n.lintje-button--link::after {\n  content: '';\n  position: absolute;\n  inset: min(0px, calc((100% - var(--h-target-text)) / 2)) 0;\n}\n\n/* Disabled is `aria-disabled`: the button keeps its tab order and focus ring. A busy button is\n   not `is-disabled`: it keeps its variant's colours. Native `<button>`s with these classes get\n   the look from `:disabled` or `aria-disabled`, without the class. */\n.lintje-button.is-disabled,\n.lintje-button:disabled,\n.lintje-button[aria-disabled='true']:not(.is-busy) {\n  opacity: 1;\n  cursor: not-allowed;\n  background: var(--color-bg-subtle);\n  color: var(--color-text-disabled);\n  border-color: var(--color-border-default);\n}\n.lintje-button--link.is-disabled,\n.lintje-button--link:disabled,\n.lintje-button--link[aria-disabled='true']:not(.is-busy) {\n  background: none;\n  border-color: transparent;\n  text-decoration: none;\n}\n\n/* --- Busy --------------------------------------------------------------- */\n/*\n * An action that round-trips. The button keeps its width: label and icons only lose their ink,\n * and the ring is drawn over the middle, so nothing re-flows. The label is transparent, not\n * `visibility: hidden`, so the focused button keeps its name.\n */\n.lintje-button.is-busy { cursor: progress; }\n.lintje-button.is-busy .lintje-button__label { opacity: 0; }\n.lintje-button.is-busy .lintje-button__icon { visibility: hidden; }\n.lintje-button__busy {\n  position: absolute;\n  top: 50%; left: 50%;\n  width: 16px; height: 16px;\n  margin: -8px 0 0 -8px;\n  border: 2px solid currentColor;\n  border-top-color: transparent;\n  border-radius: var(--radius-round);\n  opacity: 0.85;\n  animation: lintje-spin var(--dur-skeleton) linear infinite;\n}\n/* A keyframe only works in the root that uses it. */\n@keyframes lintje-spin {\n  from { transform: rotate(0deg); }\n  to   { transform: rotate(360deg); }\n}\n/* Reduced motion: the ring stands still; `aria-busy` carries the state. */\n@media (prefers-reduced-motion: reduce) {\n  .lintje-button__busy { animation: none; }\n}\n\n/* Forced colours: `aria-disabled` is not grayed out by the browser. */\n@media (forced-colors: active) {\n  .lintje-button.is-disabled,\n  .lintje-button:disabled,\n  .lintje-button[aria-disabled='true']:not(.is-busy) { color: GrayText; border-color: GrayText; }\n}\n", xn = "/*\n * Adopted by a control that has nothing to say on paper: a button, a question box, a bar of\n * actions. What the reader chose stays in the elements that show it; what to press does not.\n * `!important`, so a page's own `display` on the tag does not bring it back.\n */\n@media print {\n  :host { display: none !important; }\n}\n", Sn = "lintje-button-reason", Cn = class extends j {
 	static {
 		this.styles = [
 			G,
@@ -2024,7 +2024,7 @@ var cr = A("/* `min-width: auto` is the default; tiles hold long words and wide
 	willUpdate(e) {
 		super.willUpdate(e), this.span ? this.style.setProperty("--lintje-span", String(this.span)) : this.style.removeProperty("--lintje-span");
 	}
-}, ur = "/* The block is the container, so the inner row can take its margin from the block's own width. */\n.lintje-announcement {\n  container-type: inline-size;\n  border-radius: var(--radius);\n}\n.lintje-announcement__inner {\n  display: flex;\n  align-items: flex-start;\n  gap: var(--space-2);\n  padding: var(--space-3);\n}\n\n.lintje-announcement__icon {\n  width: 20px; height: 20px;\n  flex: none;\n  display: flex; align-items: center; justify-content: center;\n  color: var(--color-text-primary);\n  margin-top: 1px;\n}\n.lintje-announcement__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--space-1); }\n.lintje-announcement__lead { min-width: 0; display: flex; align-items: flex-start; gap: var(--space-2); }\n.lintje-announcement__content { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--space-1); }\n.lintje-announcement__title { font: var(--text-tile-title); color: var(--color-text-primary); }\n.lintje-announcement__text { font: var(--text-ui); line-height: 1.45; color: var(--color-text-primary); }\n.lintje-announcement__meta { font: var(--text-meta); color: var(--color-text-muted); }\n.lintje-announcement__link { color: var(--color-link-on-status); font-weight: 700; }\n/* The `action` slot keeps its own width: under the text, or beside it where the announcement is wide. */\n.lintje-announcement__action::slotted(*) { align-self: flex-start; margin-left: calc(var(--space-5) + var(--space-2)); }\n.lintje-announcement__media::slotted(*) { flex: none; max-width: 40%; height: auto; }\n/* Wide enough for the action beside the text, wide enough for the full margin. */\n@container (min-width: 560px) {\n  .lintje-announcement__inner { padding: var(--space-4); }\n  .lintje-announcement__body { flex-direction: row; align-items: center; gap: var(--space-4); }\n  .lintje-announcement__lead { flex: 1; }\n  .lintje-announcement__action::slotted(*) { align-self: center; flex: none; margin-left: 0; }\n}\n\n/* The margin pulls the button's middle in line with the icon box; the hit area reaches the target. */\n.lintje-announcement__close {\n  position: relative;\n  width: var(--h-icon-button); height: var(--h-icon-button); flex: none;\n  display: flex; align-items: center; justify-content: center;\n  --lintje-close-pull: calc((var(--space-5) - var(--h-icon-button)) / 2);\n  margin: var(--lintje-close-pull) var(--lintje-close-pull) var(--lintje-close-pull) 0;\n  border: 0;\n  background: transparent;\n  color: var(--color-text-primary);\n  cursor: pointer;\n}\n.lintje-announcement__close:hover { background: var(--color-bg-subtle); }\n.lintje-announcement__close::after {\n  content: '';\n  position: absolute;\n  inset: min(0px, calc((100% - var(--h-target)) / 2));\n}\n\n.lintje-announcement--warning { background: var(--color-attention-bg); }\n.lintje-announcement--warning .lintje-announcement__icon { color: var(--color-attention-line); }\n.lintje-announcement--error { background: var(--color-error-bg); }\n.lintje-announcement--error .lintje-announcement__icon { color: var(--color-error-line); }\n.lintje-announcement--outage { background: var(--color-error-bg); }\n.lintje-announcement--outage .lintje-announcement__icon { color: var(--color-error-line); }\n.lintje-announcement--info { background: var(--color-info-bg); }\n.lintje-announcement--info .lintje-announcement__icon { color: var(--color-info-line); }\n.lintje-announcement--ok { background: var(--color-success-bg); }\n.lintje-announcement--ok .lintje-announcement__icon { color: var(--color-success-line); }\n\n@media screen and (max-width: 767px) {\n  .lintje-announcement__inner { padding: var(--space-3); }\n  .lintje-announcement__text { font: var(--text-small); }\n}\n\n/* Forced colours drop the fill, so the announcement takes an outline. */\n@media (forced-colors: active) {\n  .lintje-announcement { outline: 1px solid CanvasText; outline-offset: -1px; }\n}\n\n@media print {\n  .lintje-announcement { break-inside: avoid; }\n}\n", dr = {
+}, ur = "/* The block is the container, so the inner row can take its margin from the block's own width. */\n.lintje-announcement {\n  container-type: inline-size;\n  border-radius: var(--radius);\n}\n.lintje-announcement__inner {\n  display: flex;\n  align-items: flex-start;\n  gap: var(--space-2);\n  padding: var(--space-3);\n}\n\n.lintje-announcement__icon {\n  width: 20px; height: 20px;\n  flex: none;\n  display: flex; align-items: center; justify-content: center;\n  color: var(--color-text-primary);\n  margin-top: 1px;\n}\n.lintje-announcement__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--space-1); }\n.lintje-announcement__lead { min-width: 0; display: flex; align-items: flex-start; gap: var(--space-2); }\n.lintje-announcement__content { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--space-1); }\n.lintje-announcement__title { font: var(--text-tile-title); color: var(--color-text-primary); }\n.lintje-announcement__text { font: var(--text-ui); line-height: 1.45; color: var(--color-text-primary); }\n.lintje-announcement__meta { font: var(--text-small); color: var(--color-text-muted); }\n.lintje-announcement__link { color: var(--color-link-on-status); font-weight: 700; }\n/* The `action` slot keeps its own width: under the text, or beside it where the announcement is wide. */\n.lintje-announcement__action::slotted(*) { align-self: flex-start; margin-left: calc(var(--space-5) + var(--space-2)); }\n.lintje-announcement__media::slotted(*) { flex: none; max-width: 40%; height: auto; }\n/* Wide enough for the action beside the text, wide enough for the full margin. */\n@container (min-width: 560px) {\n  .lintje-announcement__inner { padding: var(--space-4); }\n  .lintje-announcement__body { flex-direction: row; align-items: center; gap: var(--space-4); }\n  .lintje-announcement__lead { flex: 1; }\n  .lintje-announcement__action::slotted(*) { align-self: center; flex: none; margin-left: 0; }\n}\n\n/* The margin pulls the button's middle in line with the icon box; the hit area reaches the target. */\n.lintje-announcement__close {\n  position: relative;\n  width: var(--h-icon-button); height: var(--h-icon-button); flex: none;\n  display: flex; align-items: center; justify-content: center;\n  --lintje-close-pull: calc((var(--space-5) - var(--h-icon-button)) / 2);\n  margin: var(--lintje-close-pull) var(--lintje-close-pull) var(--lintje-close-pull) 0;\n  border: 0;\n  background: transparent;\n  color: var(--color-text-primary);\n  cursor: pointer;\n}\n.lintje-announcement__close:hover { background: var(--color-bg-subtle); }\n.lintje-announcement__close::after {\n  content: '';\n  position: absolute;\n  inset: min(0px, calc((100% - var(--h-target)) / 2));\n}\n\n.lintje-announcement--warning { background: var(--color-attention-bg); }\n.lintje-announcement--warning .lintje-announcement__icon { color: var(--color-attention-line); }\n.lintje-announcement--error { background: var(--color-error-bg); }\n.lintje-announcement--error .lintje-announcement__icon { color: var(--color-error-line); }\n.lintje-announcement--outage { background: var(--color-error-bg); }\n.lintje-announcement--outage .lintje-announcement__icon { color: var(--color-error-line); }\n.lintje-announcement--info { background: var(--color-info-bg); }\n.lintje-announcement--info .lintje-announcement__icon { color: var(--color-info-line); }\n.lintje-announcement--ok { background: var(--color-success-bg); }\n.lintje-announcement--ok .lintje-announcement__icon { color: var(--color-success-line); }\n\n@media screen and (max-width: 767px) {\n  .lintje-announcement__inner { padding: var(--space-3); }\n  .lintje-announcement__text { font: var(--text-small); }\n}\n\n/* Forced colours drop the fill, so the announcement takes an outline. */\n@media (forced-colors: active) {\n  .lintje-announcement { outline: 1px solid CanvasText; outline-offset: -1px; }\n}\n\n@media print {\n  .lintje-announcement { break-inside: avoid; }\n}\n", dr = {
 	warning: "attention",
 	outage: "error",
 	error: "error",
@@ -2267,7 +2267,7 @@ function Ar(e) {
 }
 //#endregion
 //#region src/components/layout/tile/tile.css?inline
-var jr = "/*\n * Above the divider: the host, the grid item the tile fills by its height or, when the host has\n * only a floor, by `min-height: inherit`. Below it: the block's BEM CSS.\n */\n:host {\n  display: block;\n  min-width: 0;\n}\n:host([hidden]) { display: none; }\n.lintje-tile {\n  height: 100%;\n  min-height: inherit;\n}\n/* On paper a tile stays on one sheet where it fits, unless it is `breakable`. */\n@media print { :host(:not([breakable])) { break-inside: avoid; } }\n.lintje-chart-state {\n  display: flex;\n  flex-direction: column;\n  gap: var(--space-2);\n  justify-content: center;\n  align-items: center;\n  min-width: 0;\n}\n.lintje-chart-state--empty { text-align: center; gap: var(--space-3); }\n.lintje-chart-state--empty .lintje-empty-state--compact { text-align: center; font: var(--text-small); }\n/* An announcement measures as a container, so it has no width of its own to centre by. */\n.lintje-chart-state--error { justify-content: flex-start; align-items: stretch; gap: var(--space-4); }\n.lintje-chart-state__last-known { font: var(--text-small); color: var(--color-text-muted); text-align: center; }\n\n/* ------------------------------------------------------------------------ */\n\n.lintje-tile {\n  display: flex;\n  flex-direction: column;\n  gap: 14px;\n  min-width: 0;\n  background: var(--color-bg-surface);\n  border: 1px solid var(--color-border-default);\n  border-radius: var(--radius);\n  padding: var(--tile-pad-y) var(--tile-pad-x);\n}\n\n.lintje-tile__head {\n  display: flex;\n  justify-content: space-between;\n  align-items: flex-start;\n  gap: var(--space-4);\n}\n.lintje-tile__heading { min-width: 0; }\n/* With an icon the heading becomes two columns, which centres the icon on the title's line and\n   keeps the subtitle under the title text. */\n.lintje-tile__heading--icon {\n  display: grid;\n  grid-template-columns: auto minmax(0, 1fr);\n}\n/* Only the placement is the tile's; the alignment is `.lintje-leading-icon`. */\n.lintje-tile__icon { grid-row: 1; }\n.lintje-tile__heading--icon .lintje-tile__title,\n.lintje-tile__heading--icon .lintje-tile__sub { grid-column: 2; }\n.lintje-tile__title { font: var(--text-tile-title); color: var(--color-text-primary); }\n.lintje-tile__sub { font: var(--text-tile-sub); color: var(--color-text-muted); margin-top: 2px; }\n/* The actions are 40 px icon buttons beside a title of one line: they stand out above and below\n   it, so the head is the title's height and a tile without a subtitle keeps no empty band. */\n.lintje-tile__actions {\n  display: flex; gap: var(--space-2); flex: none;\n  margin-block: calc(var(--space-2) * -1);\n}\n/* Expand and download appear only while the tile is hovered or holds keyboard focus; without\n   hover they stay visible. The tile only hides the action; how the visible action looks is the\n   icon button's own. */\n.lintje-tile:not(:hover):not(:focus-within) lintje-icon-button[variant='tile'] { opacity: 0; }\n@media (hover: none) {\n  .lintje-tile:not(:hover):not(:focus-within) lintje-icon-button[variant='tile'] { opacity: 1; }\n}\n\n.lintje-tile__intro { font: var(--text-small); color: var(--color-text-secondary); }\n\n/* Body and content are flex columns, so slotted content can place itself in a taller tile. */\n.lintje-tile__body { flex: 1; min-height: 0; min-width: 0; display: flex; flex-direction: column; }\n.lintje-tile__content { flex: 1; min-height: 0; display: flex; flex-direction: column; }\n/* A tile with a height of its own scrolls what does not fit (`content-scroll`). */\n:host([content-scroll]) .lintje-tile__content { overflow: auto; }\n.lintje-tile__body--aside { flex-direction: row; gap: var(--space-5); align-items: stretch; }\n.lintje-tile__body--aside .lintje-tile__content { flex: 1; min-width: 0; }\n.lintje-tile__aside { flex: none; display: flex; flex-direction: column; justify-content: center; }\n/* On a phone the content keeps its full width and the key figure leads above it. */\n@media screen and (max-width: 767px) {\n  .lintje-tile__body--aside { flex-direction: column; }\n}\n\n.lintje-tile__footnote {\n  font: var(--text-meta);\n  color: var(--color-text-muted);\n  border-top: 1px solid var(--color-border-default);\n  padding-top: var(--space-2);\n  margin-top: auto;\n}\n\n/* Flush: the rows' lines reach the frame, and what they draw keeps the heading's indent through\n   --lintje-inset, as does a pager under them. The last row's line is the footnote's rule. */\n.lintje-tile--flush .lintje-tile__body {\n  margin-inline: calc(var(--tile-pad-x) * -1);\n  --lintje-inset: var(--tile-pad-x);\n}\n.lintje-tile--flush .lintje-tile__footnote { border-top: 0; padding-top: 0; }\n/* Without a footnote the last row's line is the frame's: no empty strip under it. A pager under\n   the rows gives the strip back through --lintje-inset-end. */\n.lintje-tile--flush:has(> .lintje-tile__footnote[hidden]) > .lintje-tile__body {\n  margin-bottom: calc(var(--tile-pad-y) * -1 - 1px);\n  --lintje-inset-end: calc(var(--tile-pad-y) + 1px);\n}\n\n/* Enlarging and downloading are for the screen. A tile split over two sheets is a block:\n   Chromium sizes a flex column that breaks too short, and what follows overlaps its rows. */\n@media print {\n  .lintje-tile__actions { display: none; }\n  :host([breakable]) .lintje-tile { display: block; }\n  :host([breakable]) .lintje-tile > :not(:first-child) { margin-top: 14px; }\n}\n", Mr = "Gegevens laden…", Nr = class e extends lr {
+var jr = "/*\n * Above the divider: the host, the grid item the tile fills by its height or, when the host has\n * only a floor, by `min-height: inherit`. Below it: the block's BEM CSS.\n */\n:host {\n  display: block;\n  min-width: 0;\n}\n:host([hidden]) { display: none; }\n.lintje-tile {\n  height: 100%;\n  min-height: inherit;\n}\n/* On paper a tile stays on one sheet where it fits, unless it is `breakable`. */\n@media print { :host(:not([breakable])) { break-inside: avoid; } }\n.lintje-chart-state {\n  display: flex;\n  flex-direction: column;\n  gap: var(--space-2);\n  justify-content: center;\n  align-items: center;\n  min-width: 0;\n}\n.lintje-chart-state--empty { text-align: center; gap: var(--space-3); }\n.lintje-chart-state--empty .lintje-empty-state--compact { text-align: center; font: var(--text-small); }\n/* An announcement measures as a container, so it has no width of its own to centre by. */\n.lintje-chart-state--error { justify-content: flex-start; align-items: stretch; gap: var(--space-4); }\n.lintje-chart-state__last-known { font: var(--text-small); color: var(--color-text-muted); text-align: center; }\n\n/* ------------------------------------------------------------------------ */\n\n.lintje-tile {\n  display: flex;\n  flex-direction: column;\n  gap: 14px;\n  min-width: 0;\n  background: var(--color-bg-surface);\n  border: 1px solid var(--color-border-default);\n  border-radius: var(--radius);\n  padding: var(--tile-pad-y) var(--tile-pad-x);\n}\n\n.lintje-tile__head {\n  display: flex;\n  justify-content: space-between;\n  align-items: flex-start;\n  gap: var(--space-4);\n}\n.lintje-tile__heading { min-width: 0; }\n/* With an icon the heading becomes two columns, which centres the icon on the title's line and\n   keeps the subtitle under the title text. */\n.lintje-tile__heading--icon {\n  display: grid;\n  grid-template-columns: auto minmax(0, 1fr);\n}\n/* Only the placement is the tile's; the alignment is `.lintje-leading-icon`. */\n.lintje-tile__icon { grid-row: 1; }\n.lintje-tile__heading--icon .lintje-tile__title,\n.lintje-tile__heading--icon .lintje-tile__sub { grid-column: 2; }\n.lintje-tile__title { font: var(--text-tile-title); color: var(--color-text-primary); }\n.lintje-tile__sub { font: var(--text-small); color: var(--color-text-muted); margin-top: 2px; }\n/* The actions are 40 px icon buttons beside a title of one line: they stand out above and below\n   it, so the head is the title's height and a tile without a subtitle keeps no empty band. */\n.lintje-tile__actions {\n  display: flex; gap: var(--space-2); flex: none;\n  margin-block: calc(var(--space-2) * -1);\n}\n/* Expand and download appear only while the tile is hovered or holds keyboard focus; without\n   hover they stay visible. The tile only hides the action; how the visible action looks is the\n   icon button's own. */\n.lintje-tile:not(:hover):not(:focus-within) lintje-icon-button[variant='tile'] { opacity: 0; }\n@media (hover: none) {\n  .lintje-tile:not(:hover):not(:focus-within) lintje-icon-button[variant='tile'] { opacity: 1; }\n}\n\n.lintje-tile__intro { font: var(--text-small); color: var(--color-text-secondary); }\n\n/* Body and content are flex columns, so slotted content can place itself in a taller tile. */\n.lintje-tile__body { flex: 1; min-height: 0; min-width: 0; display: flex; flex-direction: column; }\n.lintje-tile__content { flex: 1; min-height: 0; display: flex; flex-direction: column; }\n/* A tile with a height of its own scrolls what does not fit (`content-scroll`). */\n:host([content-scroll]) .lintje-tile__content { overflow: auto; }\n.lintje-tile__body--aside { flex-direction: row; gap: var(--space-5); align-items: stretch; }\n.lintje-tile__body--aside .lintje-tile__content { flex: 1; min-width: 0; }\n.lintje-tile__aside { flex: none; display: flex; flex-direction: column; justify-content: center; }\n/* On a phone the content keeps its full width and the key figure leads above it. */\n@media screen and (max-width: 767px) {\n  .lintje-tile__body--aside { flex-direction: column; }\n}\n\n.lintje-tile__footnote {\n  font: var(--text-small);\n  color: var(--color-text-muted);\n  border-top: 1px solid var(--color-border-default);\n  padding-top: var(--space-2);\n  margin-top: auto;\n}\n\n/* Flush: the rows' lines reach the frame, and what they draw keeps the heading's indent through\n   --lintje-inset, as does a pager under them. The last row's line is the footnote's rule. */\n.lintje-tile--flush .lintje-tile__body {\n  margin-inline: calc(var(--tile-pad-x) * -1);\n  --lintje-inset: var(--tile-pad-x);\n}\n.lintje-tile--flush .lintje-tile__footnote { border-top: 0; padding-top: 0; }\n/* Without a footnote the last row's line is the frame's: no empty strip under it. A pager under\n   the rows gives the strip back through --lintje-inset-end. */\n.lintje-tile--flush:has(> .lintje-tile__footnote[hidden]) > .lintje-tile__body {\n  margin-bottom: calc(var(--tile-pad-y) * -1 - 1px);\n  --lintje-inset-end: calc(var(--tile-pad-y) + 1px);\n}\n\n/* Enlarging and downloading are for the screen. A tile split over two sheets is a block:\n   Chromium sizes a flex column that breaks too short, and what follows overlaps its rows. */\n@media print {\n  .lintje-tile__actions { display: none; }\n  :host([breakable]) .lintje-tile { display: block; }\n  :host([breakable]) .lintje-tile > :not(:first-child) { margin-top: 14px; }\n}\n", Mr = "Gegevens laden…", Nr = class e extends lr {
 	constructor(...e) {
 		super(...e), this.footnoteSlotted = !1, this.asideSlotted = !1, this.legendBelow = !1, this.expandable = !1, this.download = !1, this.state = "ready", this.contentHeight = "var(--chart-h-main)", this.contentScroll = !1, this.flush = !1, this.breakable = !1, this.filled = null, this.#e = 0;
 	}
@@ -2427,7 +2427,7 @@ var jr = "/*\n * Above the divider: the host, the grid item the tile fills by it
           ${B({ minHeight: e })}
         >
           ${hr({
-				kind: "warning",
+				kind: "error",
 				text: this.message,
 				live: !0,
 				filled: this.filled === this.regionText

package/dist-elements/chunks/chart-styles-DEd0uIWK.js

@@ -0,0 +1,108 @@
+import { bt as e, en as t, in as n, lt as r, nn as i, ut as a } from "./base-Bd2pmq86.js";
+//#region src/components/shared/charts/shared/chart-icons.ts
+function o(e, n, r = 16, i) {
+	let o = a(e, {
+		size: r,
+		flip: i
+	});
+	return o === t ? n : o;
+}
+var s = [
+	{
+		action: "in",
+		name: "functioneel-plus",
+		text: "+",
+		label: "Inzoomen"
+	},
+	{
+		action: "out",
+		name: "functioneel-minus",
+		text: "−",
+		label: "Uitzoomen"
+	},
+	{
+		action: "home",
+		name: "functioneel-refresh",
+		flip: "horizontal",
+		text: "Terug",
+		label: "Kaart terugzetten"
+	}
+];
+//#endregion
+//#region src/components/shared/charts/shared/chart-states.ts
+function c(t = "100%", n = 12, r = "") {
+	let a = (e) => typeof e == "number" ? `${e}px` : e;
+	return i`<span class="lintje-skeleton ${r}"
+                    ${e({
+		width: a(t),
+		height: a(n)
+	})} aria-hidden="true"></span>`;
+}
+function l({ kind: n = "line", height: r, status: a = !0 } = {}) {
+	return i`
+    <div class="lintje-chart-skeleton lintje-chart-skeleton--${n}"
+         ${e({ height: r ?? (n === "table" ? void 0 : "var(--chart-h-main)") })}
+         role=${a ? "status" : t}
+         aria-hidden=${a ? t : "true"}>
+      <!-- In words, not only in a label: a status region is spoken from its content. -->
+      ${a ? i`<span class="visually-hidden">Gegevens laden…</span>` : t}
+      ${n === "line" || n === "bar" ? i`
+        <div class="lintje-chart-skeleton__y-labels">
+          ${[
+		0,
+		1,
+		2,
+		3
+	].map(() => c(24, 10))}
+        </div>
+        <div class="lintje-chart-skeleton__x-labels">
+          ${[
+		0,
+		1,
+		2
+	].map(() => c(32, 10))}
+        </div>
+        <div class="lintje-chart-skeleton__plot">
+          ${c("100%", "100%", "lintje-chart-skeleton__fill")}
+        </div>
+      ` : t}
+      ${n === "pie" || n === "donut" ? i`
+        <!-- Sized by the skeleton's own box, so it always fits beside its lines. -->
+        ${c("min(100cqh, 60cqw, 200px)", "auto", "lintje-chart-skeleton__disc")}
+        <div class="lintje-chart-skeleton__lines">
+          ${[
+		"80%",
+		"64%",
+		"48%"
+	].map((e) => c(e, 13))}
+        </div>
+      ` : t}
+      ${n === "heatmap" ? Array.from({ length: 35 }, () => c("100%", "100%")) : t}
+      ${n === "map" ? i`
+        ${c("100%", "100%", "lintje-chart-skeleton__fill")}
+        <div class="lintje-chart-skeleton__zoom" aria-hidden="true">
+          ${s.map((e) => i`
+            <span class="lintje-chart-skeleton__zoom-button">${o(e.name, e.text, 16, "flip" in e ? e.flip : void 0)}</span>
+          `)}
+        </div>
+      ` : t}
+      ${n === "table" ? Array.from({ length: 5 }, () => i`
+        <div class="lintje-chart-skeleton__row">
+          ${c("32%")}
+          ${c("12%", 12, "lintje-chart-skeleton__measure")}
+          ${c("12%")}
+        </div>
+      `) : t}
+    </div>
+  `;
+}
+//#endregion
+//#region src/components/shared/charts/shared/chart.css?inline
+var u = ".lintje-chart { display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; margin: 0; }\n/* Charts that are as high as their rows (horizontal bars, target progress) center in a taller\n   tile instead of leaving the space below them empty. */\n.lintje-chart--rows { margin-block: auto; }\n.lintje-chart__axis-title { font: var(--text-axis); color: var(--color-text-muted); }\n/* The title of the x axis (`xTitle` in `renderChartFrame`): the axis title's type, in the\n   drawing, under the x labels at the right. */\n.lintje-chart__x-title { font: var(--text-axis); fill: var(--color-text-muted); }\n.lintje-chart__svg {\n  width: 100%;\n  display: block;\n  overflow: visible;\n}\n\n.lintje-chart__axis-label {\n  font-family: var(--font-ui);\n  font-size: 0.75rem;\n  font-weight: 400;\n  fill: var(--color-chart-axis);\n}\n/* Data labels are bold so they read as values rather than axis labels. */\n.lintje-chart__data-label {\n  font-family: var(--font-ui);\n  font-size: 0.75rem;\n  font-weight: 700;\n  fill: var(--color-text-primary);\n}\n/* On a mark the label takes the text of the fill it stands on: white on a dark rung, ink on a\n   light one. The fills are the same in both modes, so the label is too. */\n.lintje-chart__data-label--inside { fill: var(--color-text-on-fill); }\n.lintje-chart__data-label--inside-light { fill: var(--color-text-on-light-fill); }\n/* On a threshold line (horizontal bars) or beside one (histogram, scatter): a halo in the surface color.\n   Invisible on the tile, it cuts a line or a bar where the label crosses it. */\n.lintje-chart__data-label--halo,\n.lintje-chart__axis-label--halo {\n  stroke: var(--color-bg-surface);\n  stroke-width: 4px;\n  stroke-linejoin: round;\n  paint-order: stroke fill;\n}\n.lintje-chart__as-of-label {\n  font-family: var(--font-ui);\n  font-size: 0.75rem;\n  font-weight: 700;\n  fill: var(--color-text-primary);\n}\n.lintje-chart__as-of-note {\n  font-family: var(--font-ui);\n  font-size: 0.75rem;\n  fill: var(--color-text-muted);\n  /* A halo in the surface, as a data label on a line has: an event line may cross it. */\n  stroke: var(--color-bg-surface);\n  stroke-width: 4px;\n  stroke-linejoin: round;\n  paint-order: stroke fill;\n}\n\n.lintje-chart__line { stroke-width: 2.5; fill: none; stroke-linejoin: round; }\n/* 1 px either side of the line, under it (`lineCasing`). */\n.lintje-chart__line--casing { stroke-width: 4.5; }\n\n/* Bars. transform-box: fill-box puts the origin in the bar's own box instead of the svg's:\n   a bar widens around its own middle. A horizontal bar is anchored at the category axis. */\n.lintje-chart__bar {\n  transform-box: fill-box;\n  transform-origin: 50% 100%;\n  transition: transform var(--dur-hover) var(--ease-in-motion), filter var(--dur-hover) var(--ease-in-motion);\n}\n.lintje-chart__bar--horizontal { transform-origin: 0 50%; }\n\n/* The bar under the pointer widens a little and lifts with a light\n   shadow, so it is clear what the tooltip describes — the same lift as a pie segment. Only the\n   width grows: the length carries the value. A stacked column lifts as a whole. */\n.lintje-chart__bar-group:hover .lintje-chart__bar,\n.lintje-chart__bar-group.is-hovered .lintje-chart__bar {\n  transform: scaleX(1.06);\n  filter: drop-shadow(var(--shadow-chart-hover));\n}\n/* A histogram's classes touch: its lift is a copy drawn over its neighbours. */\n.lintje-chart__bar--lifted {\n  transform: scaleX(1.06);\n  filter: drop-shadow(var(--shadow-chart-hover));\n  pointer-events: none;\n}\n.lintje-chart__bar-row:hover .lintje-chart__bar--horizontal,\n.lintje-chart__bar-row.is-hovered .lintje-chart__bar--horizontal {\n  transform: scaleY(1.12);\n  filter: drop-shadow(var(--shadow-chart-hover));\n}\n\n/* A mark that drills. The same three states wherever a mark can carry a\n   href — bars, stacked segments, pie slices — and the same ones the map draws: the chosen\n   mark takes the text colour as a 2 px outline (the outline is the carrier, not the colour,\n   rule 13) and every other mark steps back so it reads against them; .45 is the legend's own\n   dimming. The focus ring is the orange 3 px of every other control, around the shape with\n   a 1 px gap in the surface (`renderFocusRing`, axes.ts), so an orange mark keeps it too: the\n   box an outline draws around a slice or a stacked segment is not the shape the reader is on. */\n.lintje-chart__mark.is-clickable { cursor: pointer; }\n.lintje-chart__mark.is-selected { stroke: var(--color-text-primary); stroke-width: 2; }\n.lintje-chart__mark.is-muted { fill-opacity: .45; }\n/* A focused SVG element with a tabindex gets the browser's own box even where `:focus-visible`\n   does not match, after a click: the ring below is the only one. */\n.lintje-chart__mark:focus { outline: none; }\n/* Weighs as much as the hover's lift and stands after it, so the ring is what a focused bar\n   under the pointer shows. Only a clickable mark takes the focus. */\n.lintje-chart__mark.is-clickable:focus-visible {\n  outline: none;\n  filter: var(--lintje-focus-ring);\n}\n.lintje-chart__focus-ring { flood-color: var(--color-focus); }\n.lintje-chart__focus-gap { flood-color: var(--color-bg-surface); }\n/* Stacked segments and slices of neighbouring tints part with a 1 px line in the surface:\n   two rungs of the ladder differ by 1.2–1.5:1. */\n.lintje-chart__segment { stroke: var(--color-bg-surface); stroke-width: 1px; }\n\n/* Radar: polygon rings in the grid; the spokes are the axes and take the zero line's colour. */\n.lintje-radar__ring { fill: none; stroke: var(--color-chart-grid); stroke-width: 1; }\n.lintje-radar__spoke { stroke: var(--color-chart-zero); stroke-width: 1; }\n.lintje-radar__spoke.is-active { stroke: var(--color-chart-axis); stroke-width: 1.5; }\n.lintje-radar__name { font: var(--text-small); fill: var(--color-text-primary); }\n.lintje-radar__no-value { font-weight: 400; fill: var(--color-text-muted); }\n/* The fill a line chart gives its area. */\n.lintje-radar__area { fill-opacity: 0; transition: fill-opacity var(--dur-hover) var(--ease-in-motion); }\n.lintje-radar__area.is-filled { fill-opacity: .14; }\n.lintje-radar__norm { fill: none; stroke: var(--color-chart-emphasis); stroke-width: 1.5; stroke-dasharray: 4 3; }\n/* Of more layers the one pointed at in the legend leads; the others step back as a hidden one does. */\n.lintje-radar__layer { transition: opacity var(--dur-hover) var(--ease-in-motion); }\n.lintje-radar__layer.is-muted { opacity: .45; }\n.lintje-radar__lift { pointer-events: none; }\n.lintje-radar__zero { stroke: var(--color-chart-zero); stroke-width: 1; }\n.lintje-radar__row.is-active .lintje-radar__name { font-weight: 700; }\n\n/* Draw-in takes 900 ms for data marks only. Axes, grid and titles appear immediately. */\n@media (prefers-reduced-motion: no-preference) {\n  /* A line and the area below it are uncovered together from left to right. The clip opens over the box\n     of the series; the negative insets leave room for the stroke outside that box. */\n  .lintje-chart__reveal { animation: lintje-reveal var(--dur-draw) var(--ease-in-motion) backwards; }\n  /* Bars grow from the axis one after another: left to right, or top to bottom when horizontal\n     --lintje-stagger (0 to 1, set per bar) spreads the starts over the first\n     40 % of the draw and each bar grows in the other 60 %, so all are done at --dur-draw. A\n     column grows as a whole, so stacked segments stay together. Fill mode `backwards`, not\n     `both`: a transform held after the end would override the hover transform. */\n  .lintje-chart__bar-group,\n  .lintje-chart__bar--horizontal {\n    animation-duration: calc(var(--dur-draw) * 0.6);\n    animation-timing-function: var(--ease-in-motion);\n    animation-delay: calc(var(--dur-draw) * 0.4 * var(--lintje-stagger, 0));\n    animation-fill-mode: backwards;\n  }\n  .lintje-chart__bar-group {\n    transform-box: fill-box;\n    transform-origin: 50% 100%;\n    animation-name: lintje-grow;\n  }\n  .lintje-chart__bar--horizontal { animation-name: lintje-grow-x; }\n  .lintje-chart__bar--lifted { animation: lintje-lift var(--dur-hover) var(--ease-in-motion) backwards; }\n  /* Data labels fade in once the marks are drawn, eased at both ends. */\n  .lintje-chart__data-label { animation: lintje-fade-in var(--dur-data-label) ease-in-out var(--dur-draw) both; }\n  /* A reference line comes in with its label once the marks are drawn, as a data label does;\n     a data label inside it does not fade a second time. */\n  .lintje-chart__reference { animation: lintje-fade-in var(--dur-data-label) ease-in-out var(--dur-draw) both; }\n  /* A scatter point grows from its middle as a map point does, one after another along x, with\n     the bars' timing. */\n  .lintje-chart__point {\n    transform-box: fill-box;\n    transform-origin: 50% 50%;\n    animation: lintje-point-grow calc(var(--dur-draw) * 0.6) var(--ease-in-motion)\n      calc(var(--dur-draw) * 0.4 * var(--lintje-stagger, 0)) backwards;\n  }\n  .lintje-chart__reference .lintje-chart__data-label { animation: none; }\n  /* A radar's layers grow from the centre once, with the bars' timing; the norm comes after. */\n  .lintje-radar__layer {\n    animation: lintje-point-grow calc(var(--dur-draw) * 0.6) var(--ease-in-motion)\n      calc(var(--dur-draw) * 0.4) backwards;\n  }\n\n  /* Draw in only once the chart comes into view. By default the marks are\n     paused on their first frame (series covered, bar flat, label gone); as soon\n     as usePlotArea sets data-in-view on the outermost chart element, they run.\n     These rules come after the `animation` shorthands above: those set\n     animation-play-state back to running and would otherwise win at equal\n     specificity. They sit inside this media block because with reduced motion\n     there is no animation — and a paused fill-mode would keep the marks\n     invisible there. */\n  .lintje-chart__reveal,\n  .lintje-chart__bar-group,\n  .lintje-chart__bar--horizontal,\n  .lintje-chart__data-label,\n  .lintje-chart__reference,\n  .lintje-chart__point,\n  .lintje-radar__layer { animation-play-state: paused; }\n  [data-in-view] .lintje-chart__reveal,\n  [data-in-view] .lintje-chart__bar-group,\n  [data-in-view] .lintje-chart__bar--horizontal,\n  [data-in-view] .lintje-chart__data-label,\n  [data-in-view] .lintje-chart__reference,\n  [data-in-view] .lintje-chart__point,\n  [data-in-view] .lintje-radar__layer { animation-play-state: running; }\n}\n@keyframes lintje-reveal {\n  from { clip-path: inset(-8px calc(100% + 8px) -8px -8px); }\n  to   { clip-path: inset(-8px); }\n}\n@keyframes lintje-grow { from { transform: scaleY(0); } to { transform: scaleY(1); } }\n@keyframes lintje-lift { from { transform: none; filter: none; } }\n@keyframes lintje-grow-x { from { transform: scaleX(0); } to { transform: scaleX(1); } }\n\n/* A series or reference switched off in the legend keeps its nodes and fades, so switching it\n   back fades it in rather than drawing it in again; gone, it is hidden to the pointer and the\n   reader. The fade sits on its own element: a draw-in held with fill mode `both` would win. */\n.lintje-chart__series.is-off,\n.lintje-chart__point.is-off { opacity: 0; visibility: hidden; pointer-events: none; }\n@media (prefers-reduced-motion: no-preference) {\n  .lintje-chart__series,\n  .lintje-chart__point { transition: opacity var(--dur-layer) var(--ease-fade), visibility 0s; }\n  .lintje-chart__series.is-off,\n  .lintje-chart__point.is-off {\n    transition: opacity var(--dur-layer) var(--ease-fade), visibility 0s var(--dur-layer);\n  }\n}\n\n/* --- Legend -------------------------------------------------------------- */\n.lintje-legend {\n  display: flex;\n  flex-wrap: wrap;\n  gap: var(--space-2) var(--space-4);\n  font: var(--text-small);\n  color: var(--color-text-primary);\n}\n/* A legend above the chart keeps 12 px to the axis title below it. */\n.lintje-chart-wrap > .lintje-legend { margin-bottom: var(--space-3); }\n.lintje-legend--right { flex-direction: column; flex-wrap: nowrap; }\n.lintje-legend__item { display: flex; align-items: center; gap: var(--space-2); }\n.lintje-legend__button { display: flex; align-items: center; gap: var(--space-2); font: inherit; color: inherit; }\n/* A series switched off: the marker steps back and the name is struck through, at full\n   contrast — the strike and `aria-pressed` carry the state, not a faded word. */\n.lintje-legend__item.is-hidden .lintje-legend__marker { opacity: 0.45; }\n@media (prefers-reduced-motion: no-preference) {\n  .lintje-legend__marker { transition: opacity var(--dur-layer) var(--ease-fade); }\n}\n.lintje-legend__item.is-hidden .lintje-legend__label { text-decoration: line-through; }\n\n.lintje-legend__marker { flex: none; display: block; }\n.lintje-legend__marker--symbol { width: 14px; height: 14px; }\n.lintje-legend__marker--square    { width: 12px; height: 12px; background: currentColor; }\n.lintje-legend__marker--line  { width: 14px; height: 3px;  background: currentColor; }\n/* \"No data\" on a map: the hatch the mark carries, on the surface (rule 15). */\n.lintje-legend__marker--hatch {\n  width: 16px; height: 10px;\n  background: repeating-linear-gradient(45deg, var(--color-chart-hatch) 0 2px, transparent 2px 6px);\n  border: 1px solid var(--color-border-default);\n}\n.lintje-legend__marker--dashed {\n  width: 14px; height: 0;\n  border-top: 2px dashed currentColor;\n}\n\n/* --- Tooltip ------------------------------------------------------------- */\n.lintje-chart-tooltip {\n  position: absolute;\n  z-index: 55;\n  pointer-events: none;\n  background: var(--color-bg-surface);\n  border: 1px solid var(--color-border-popover);\n  box-shadow: var(--shadow-popover);\n  padding: var(--space-2) 10px;\n  font: var(--text-small);\n  min-width: 160px;\n  /* Its own width, whatever its position: shrink-to-fit narrowed it near the right edge. */\n  width: max-content;\n  max-width: 320px;\n}\n.lintje-chart-tooltip__title { font-weight: 700; margin-bottom: 4px; }\n.lintje-chart-tooltip__row { display: flex; align-items: center; gap: var(--space-2); justify-content: space-between; }\n.lintje-chart-tooltip__label { display: flex; align-items: center; gap: var(--space-2); }\n.lintje-chart-tooltip__marker { width: 10px; height: 10px; flex: none; }\n.lintje-chart-tooltip__marker--symbol { width: 14px; height: 14px; }\n.lintje-chart-tooltip__marker--line { width: 14px; height: 3px; background: currentColor; }\n.lintje-chart-tooltip__marker--dashed { width: 14px; height: 0; border-top: 2px dashed currentColor; }\n.lintje-chart-tooltip__row--divider {\n  border-top: 1px solid var(--color-border-popover);\n  margin-top: var(--space-1);\n  padding-top: var(--space-1);\n}\n.lintje-chart-tooltip__value { font-weight: 700; margin-left: var(--space-3); }\n.lintje-chart-tooltip__event {\n  display: flex;\n  align-items: flex-start;\n  gap: var(--space-2);\n  margin-top: var(--space-1);\n  padding-top: var(--space-1);\n  border-top: 1px solid var(--color-border-default);\n}\n/* One line divides the values from the events, not one event from the next. */\n.lintje-chart-tooltip__event + .lintje-chart-tooltip__event { padding-top: 0; border-top: 0; }\n\n.lintje-chart-wrap { position: relative; min-width: 0; }\n\n/* Chart tooltip anchor: coordinates and positioning both share this element. */\n[data-tooltip-anchor] { position: relative; }\n\n/* Hover point on a line: 4 px in the series color — the size of the as-of point —\n   with a ring in the surface color, so it stays legible on the line and on the\n   filled area below it. No animation: hover does not redraw. */\n.lintje-chart__hover-point { stroke: var(--color-bg-surface); stroke-width: 2; pointer-events: none; }\n/* The edge of a dark-yellow hover point (`lineCasing`), over its ring. */\n.lintje-chart__hover-casing { fill: none; stroke-width: 1; pointer-events: none; }\n\n/* The scatter plot's one pointer target, under its points: the nearest point within half of\n   --h-target answers (`pick`, scatter-chart.ts), so a small point is a full target. */\n.lintje-chart__hit { fill: transparent; }\n.lintje-chart__hit.is-clickable { cursor: pointer; }\n\n/* An event: a numbered square above the plot with a solid line to the zero line — apart from\n   the dashed as-of line — and its text in a list under the chart and in the tooltip. */\n.lintje-chart__event-line { stroke: var(--color-chart-axis); stroke-width: 1px; }\n.lintje-chart__event-chip { fill: var(--color-text-primary); }\n.lintje-chart__event-number {\n  font-family: var(--font-ui);\n  font-size: 0.75rem;\n  font-weight: 700;\n  fill: var(--color-text-inverse);\n}\n/* The square stands in a box one line of its text tall, so it centres on the first line. The\n   size comes from the drawing (`--lintje-event-size`), where the squares are measured. */\n.lintje-event-chip { flex: none; display: flex; align-items: center; height: 1lh; }\n.lintje-event-chip__number {\n  width: var(--lintje-event-size);\n  height: var(--lintje-event-size);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background: var(--color-text-primary);\n  color: var(--color-text-inverse);\n  font-family: var(--font-ui);\n  font-size: 0.75rem;\n  font-weight: 700;\n}\n.lintje-chart-events {\n  display: flex;\n  flex-direction: column;\n  gap: var(--space-2);\n  margin-top: var(--space-3);\n  font: var(--text-small);\n  color: var(--color-text-primary);\n}\n.lintje-chart-events__item { display: flex; align-items: flex-start; gap: var(--space-2); }\n.lintje-chart-events__category { font-weight: 700; }\n\n\n/* --- States -------------------------------------------------------------- */\n/* Loading uses a skeleton per chart type, exactly as tall as the chart it stands in for. */\n/* The stand-in grows into a tile that is taller than it: a tile that holds its height\n   while it fetches again or stretches to its row. `height` stays\n   the basis, so where there is no room to take nothing changes; in a held box that is\n   shorter than the stand-in it shrinks to fit. */\n.lintje-chart-skeleton { position: relative; min-width: 0; overflow: hidden; flex: 1 1 auto; min-height: 0; }\n/* Line, area and bars: \"assen echt, datavlak één glanzend blok\". Real axis lines around one\n   shimmering block, in the charts' plot area (left 52, right 8, top 16, bottom 28). The axis\n   labels load with the data: four bars in the gutter, from the top line to the zero line where\n   the labels sit, and three below the axis, so the gutter doesn't read as empty. */\n.lintje-chart-skeleton__plot {\n  position: absolute;\n  top: 16px; right: 8px; bottom: 28px; left: 52px;\n  border-left: 1px solid var(--color-chart-grid);\n  border-bottom: 1px solid var(--color-chart-zero);\n}\n.lintje-chart-skeleton__fill { position: absolute; inset: 0; }\n.lintje-chart-skeleton__y-labels {\n  position: absolute;\n  top: 11px; bottom: 23px; left: 0; width: 44px;\n  display: flex; flex-direction: column; justify-content: space-between; align-items: flex-end;\n}\n.lintje-chart-skeleton__x-labels {\n  position: absolute;\n  right: 8px; bottom: 7px; left: 52px;\n  display: flex; justify-content: space-between;\n}\n/* Pie and donut: \"ring + drie legendaregels\", a disc for the pie and a ring\n   with a 62 % hole for the donut, beside three lines. The skeleton is a size container: the disc\n   is never taller than the skeleton, never wider than 60 % of it and at most 200 px, so the lines\n   keep their room in a narrow tile. */\n.lintje-chart-skeleton--pie,\n.lintje-chart-skeleton--donut { container-type: size; display: flex; align-items: center; gap: var(--space-5); }\n.lintje-chart-skeleton__disc {\n  position: relative;\n  flex: none;\n  aspect-ratio: 1;\n  border-radius: var(--radius-round);\n}\n.lintje-chart-skeleton--donut .lintje-chart-skeleton__disc::after {\n  content: '';\n  position: absolute;\n  inset: 19%;\n  border-radius: var(--radius-round);\n  background: var(--color-bg-surface);\n}\n.lintje-chart-skeleton__lines {\n  flex: 1;\n  min-width: 0;\n  max-width: 240px;\n  display: flex;\n  flex-direction: column;\n  gap: var(--space-3);\n}\n/* Heatmap: \"cellen glanzen individueel\" — cells with the heatmap's 3 px gutter, each with its\n   own sweep. */\n.lintje-chart-skeleton--heatmap {\n  display: grid;\n  grid-template-columns: repeat(7, minmax(0, 1fr));\n  grid-template-rows: repeat(5, minmax(0, 1fr));\n  gap: 3px;\n}\n/* Map: \"kaartvlak glanst, overlays echt\" — the map area shimmers; the zoom buttons are drawn\n   as on the map (48 px, top right). */\n.lintje-chart-skeleton__zoom {\n  position: absolute;\n  top: var(--space-2); right: var(--space-2);\n  display: flex;\n  flex-direction: column;\n}\n.lintje-chart-skeleton__zoom-button {\n  width: var(--h-target); height: var(--h-target);\n  display: flex; align-items: center; justify-content: center;\n  background: var(--color-bg-surface);\n  color: var(--color-text-primary);\n  border: 1px solid var(--color-border-strong);\n  margin-top: -1px;\n}\n.lintje-chart-skeleton__zoom-button:first-child { margin-top: 0; }\n/* Table: \"5 rijen\" — five rows at the table's row height. */\n.lintje-chart-skeleton--table { display: flex; flex-direction: column; }\n.lintje-chart-skeleton__row {\n  flex: none;\n  height: var(--h-table-row);\n  display: flex;\n  align-items: center;\n  gap: var(--space-6);\n  padding: 0 var(--space-3);\n  border-bottom: 1px solid var(--color-border-default);\n}\n.lintje-chart-skeleton__measure { margin-left: auto; }\n\n/* --- Forced colours ------------------------------------------------------- */\n/* One colour per variable is what tells the series apart, and the legend's\n   marker is what ties a colour to a name: with the reader's palette they would\n   all come out one colour. So the data marks and the markers keep their drawing\n   (`forced-color-adjust: none`) — the bars, segments and slices, the lines and\n   their areas, the hover point, the legend's and the tooltip's markers — and\n   nothing else does: the axes, the grid, the labels and the titles take the\n   reader's palette. A data label is forced again even where it stands in a\n   group that is not (the stacked column), except one drawn ON a mark, which keeps\n   its own colour against that mark. The halo behind a label is the surface, so\n   Canvas, and so are the gap between segments and the one inside the focus\n   ring. The chosen mark is outlined in CanvasText and the focused one ringed in\n   Highlight. */\n@media (forced-colors: active) {\n  .lintje-chart__bar,\n  .lintje-chart__mark,\n  .lintje-chart__line,\n  .lintje-chart__reveal,\n  .lintje-chart__hover-point,\n  .lintje-chart__hover-casing,\n  .lintje-chart__hit,\n  .lintje-legend__marker,\n  .lintje-chart-tooltip__marker,\n  .lintje-event-chip__number { forced-color-adjust: none; }\n  .lintje-chart__data-label { forced-color-adjust: auto; }\n  /* Text in the reader's palette by name, not left to the engine: not every\n     engine repaints an SVG `fill`, and near-black on a black Canvas is nothing. */\n  .lintje-chart__axis-label,\n  .lintje-chart__data-label,\n  .lintje-chart__as-of-label,\n  .lintje-chart__as-of-note,\n  .lintje-chart__x-title,\n  .lintje-radar__name { fill: CanvasText; }\n  .lintje-radar__ring,\n  .lintje-radar__spoke,\n  .lintje-radar__zero { stroke: CanvasText; }\n  .lintje-chart__data-label--inside { forced-color-adjust: none; fill: var(--color-text-on-fill); }\n  .lintje-chart__data-label--inside-light { forced-color-adjust: none; fill: var(--color-text-on-light-fill); }\n  .lintje-chart__data-label--halo,\n  .lintje-chart__as-of-note { stroke: Canvas; }\n  .lintje-chart__axis-label--halo { stroke: Canvas; }\n  .lintje-chart__segment { stroke: Canvas; }\n  .lintje-chart__mark.is-selected { stroke: CanvasText; }\n  .lintje-chart__focus-ring { flood-color: Highlight; }\n  .lintje-chart__focus-gap { flood-color: Canvas; }\n  /* An event's square in the reader's text colour, its number in the canvas. */\n  .lintje-chart__event-line { stroke: CanvasText; }\n  .lintje-chart__event-chip { fill: CanvasText; }\n  .lintje-chart__event-number { fill: Canvas; }\n  .lintje-event-chip__number { background: CanvasText; color: Canvas; }\n}\n", d = ".lintje-pie-chart {\n  display: flex; gap: var(--space-8); align-items: center; justify-content: center; flex-wrap: wrap;\n  padding-top: var(--space-3);\n}\n.lintje-pie-chart--expanded { gap: var(--space-10); height: 100%; padding-top: 0; }\n.lintje-pie-chart--expanded .lintje-pie-chart__table { flex: 0 1 440px; min-width: 260px; }\n.lintje-pie-chart__center { font-family: var(--font-ui); font-size: 1.5rem; font-weight: 700; fill: var(--color-text-primary); }\n.lintje-pie-chart__table { flex: 1; min-width: 200px; border-collapse: collapse; font: var(--text-small); }\n.lintje-pie-chart__column-label,\n.lintje-pie-chart__label,\n.lintje-pie-chart__value,\n.lintje-pie-chart__total-label,\n.lintje-pie-chart__total { padding: 5px 0; text-align: left; font-weight: 400; }\n.lintje-pie-chart__column-label {\n  font-size: var(--label-size); font-weight: var(--label-weight);\n  letter-spacing: var(--label-tracking); text-transform: uppercase;\n  color: var(--color-text-muted);\n  border-bottom: 1px solid var(--color-border-default);\n}\n/* The numeric columns sit right-aligned under their heading, a fixed step from their neighbour. */\n.lintje-pie-chart__column-label--numeric,\n.lintje-pie-chart__value,\n.lintje-pie-chart__total { padding-left: var(--space-4); text-align: right; }\n.lintje-pie-chart__value,\n.lintje-pie-chart__total { font-variant-numeric: tabular-nums; }\n.lintje-pie-chart__label { display: flex; align-items: center; gap: var(--space-2); }\n.lintje-pie-chart__total-label,\n.lintje-pie-chart__total {\n  font-weight: 700; border-top: 1px solid var(--color-border-default); padding-top: 6px;\n}\n.lintje-pie-chart__marker { width: 10px; height: 10px; flex: none; display: block; }\n\n/* Hover scales the segment around the center, so its side edges keep their angle. The shadow\n   sits on a copy on top (`__lift`); the segment itself only scales and eases back. */\n.lintje-pie-chart__svg { overflow: visible; flex: none; }\n.lintje-pie-chart__segment { transition: transform var(--dur-hover) var(--ease-in-motion); }\n.lintje-pie-chart__segment.is-hovered { transform: scale(1.03); }\n.lintje-pie-chart__lift {\n  pointer-events: none;\n  transform: scale(1.03);\n  filter: drop-shadow(var(--shadow-chart-hover));\n  animation: lintje-pie-lift var(--dur-hover) var(--ease-in-motion) backwards;\n}\n@keyframes lintje-pie-lift { from { transform: none; filter: none; } }\n.lintje-pie-chart__row.is-hovered { background: var(--color-bg-subtle); }\n/* The chosen row carries the outline the chosen slice has (rule 13). */\n.lintje-pie-chart__row.is-muted .lintje-pie-chart__marker { opacity: .45; }\n.lintje-pie-chart__row.is-selected .lintje-pie-chart__marker { outline: 2px solid var(--color-text-primary); }\n.lintje-pie-chart__row.is-selected .lintje-pie-chart__label { font-weight: 700; }\n\n/* Forced colours: the slices, the lifted copy and the table's swatches keep their colours (as\n   `chart.css`); the chosen row's swatch is outlined in CanvasText. */\n@media (forced-colors: active) {\n  .lintje-pie-chart__lift,\n  .lintje-pie-chart__marker { forced-color-adjust: none; }\n  .lintje-pie-chart__center { fill: CanvasText; }\n  .lintje-pie-chart__row.is-selected .lintje-pie-chart__marker { outline-color: CanvasText; }\n}\n", f = ".lintje-heatmap { display: flex; flex-direction: column; gap: var(--space-3); min-width: 0; }\n.lintje-heatmap__grid { border-collapse: separate; border-spacing: 3px; width: 100%; }\n.lintje-heatmap__column-label,\n.lintje-heatmap__row-label {\n  font: var(--text-axis);\n  font-weight: 400;\n  color: var(--color-text-muted);\n  text-align: center;\n  padding: 2px;\n}\n/* `width: 1%` keeps the auto table layout from handing the label column surplus width; a longer\n   label ends in an ellipsis. */\n.lintje-heatmap__row-label { text-align: right; padding-right: var(--space-2); white-space: nowrap; width: 1%; }\n.lintje-heatmap__row-label-text { display: block; max-width: 160px; overflow: hidden; text-overflow: ellipsis; }\n.lintje-heatmap__slot { padding: 0; }\n\n.lintje-heatmap__cell {\n  width: 100%;\n  height: 34px;\n  display: flex; align-items: center; justify-content: center;\n  font-size: 0.75rem;\n  font-weight: 700;\n  font-variant-numeric: tabular-nums;\n  /* The class range is the same in both modes, so the text on it is too: ink up to the fourth\n     rung (5.9:1), white on the darkest (4.5:1). */\n  background: var(--lintje-cell);\n  color: var(--color-text-on-light-fill);\n  transition: background-color var(--dur-layer) var(--ease-fade);\n}\n.lintje-heatmap__cell--class-4 { color: var(--color-text-on-fill); }\n.lintje-heatmap__cell--class-0 { box-shadow: inset 0 0 0 1px var(--color-border-default); }\n.lintje-heatmap__cell.is-selected { outline: 2px solid currentColor; outline-offset: -2px; }\n/* A cell steps back by its fill alone, mixed into the surface; the figure stays in the text\n   colour, which reaches 4.5:1 on every rung so mixed, in both modes. */\n.lintje-heatmap__cell.is-dimmed {\n  background: color-mix(in srgb, var(--lintje-cell) 25%, var(--color-bg-surface));\n  color: var(--color-text-primary);\n}\n/* A drilling cell that is not chosen steps back while a cell is chosen; less than a class\n   switched off in the legend. */\n.lintje-heatmap__cell.is-muted {\n  background: color-mix(in srgb, var(--lintje-cell) 40%, var(--color-bg-surface));\n  color: var(--color-text-primary);\n}\n.lintje-heatmap__cell.is-empty { background: var(--color-bg-subtle); }\n\n/* Cells fade in left to right, then top to bottom. Fill mode `backwards`: a held opacity would\n   override a dimmed class. The paused declaration follows the shorthand, see chart.css. */\n@media (prefers-reduced-motion: no-preference) {\n  .lintje-heatmap__cell:not(.is-empty) {\n    animation: lintje-fade-in calc(var(--dur-draw) * 0.6) ease-in-out calc(var(--dur-draw) * 0.4 * var(--lintje-stagger, 0)) backwards;\n    animation-play-state: paused;\n  }\n  [data-in-view] .lintje-heatmap__cell:not(.is-empty) { animation-play-state: running; }\n}\n\n.lintje-heatmap__selection {\n  min-height: var(--h-touch);\n  display: flex; align-items: center; gap: var(--space-2);\n  padding: 0 var(--space-3);\n  background: var(--color-bg-subtle);\n  font: var(--text-small);\n}\n\n/* The lightest class is edged so its swatch shows on the surface, as its cells are. */\n.lintje-heatmap > .lintje-legend > .lintje-legend__item:first-child .lintje-legend__marker {\n  box-shadow: inset 0 0 0 1px var(--color-border-default);\n}\n\n/* Forced colours: the class colours are the heatmap, so the cells keep them\n   (`forced-color-adjust: none`), as the legend's markers do. */\n@media (forced-colors: active) {\n  .lintje-heatmap__cell { forced-color-adjust: none; }\n}\n", p = n(u), m = [
+	p,
+	n(d),
+	n(f),
+	r
+];
+//#endregion
+export { o as a, s as i, m as n, l as r, p as t };

package/dist-elements/chunks/{dialog-D4V467iC.js → dialog-BNbkcAxH.js}

@@ -1,5 +1,5 @@
-import { Ht as e } from "./base-CVKIPSLx.js";
-import { t } from "./focus-trap-rje9Oz19.js";
+import { Ht as e } from "./base-Bd2pmq86.js";
+import { t } from "./focus-trap-Cl99vti9.js";
 //#region src/components/shared/dialog.ts
 var n = class {
 	#e = new t();

package/dist-elements/chunks/disclosure-BK-MJsEn.js

@@ -0,0 +1,4 @@
+//#region src/components/shared/disclosure.css?inline
+var e = "/*\n * The disclosure shared by `lintje-expander` and `lintje-explainer`: the surface stays with each\n * element. The body unfolds with `grid-template-rows: 0fr -> 1fr`, as the filter zone does;\n * `--dur-collapse` is 0 ms under reduced motion (`tokens/base.css`).\n */\n:host(lintje-expander) {\n  display: block;\n  min-width: 0;\n}\n:host([hidden]) { display: none; }\n\n/* --- */\n\n.lintje-disclosure__heading { margin: 0; font: inherit; }\n.lintje-disclosure__header {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  width: 100%;\n  min-height: var(--h-target);\n  gap: var(--space-3);\n  text-align: left;\n}\n/* Spans, because a button holds phrasing content only. */\n.lintje-disclosure__title { display: block; font: var(--text-tile-title); color: var(--color-text-primary); }\n/* A grid only with an icon or subtitle: the subtitle then sits under the title text. */\n.lintje-disclosure__label {\n  display: grid;\n  grid-template-columns: auto minmax(0, 1fr);\n  min-width: 0;\n}\n.lintje-disclosure__label--plain { display: block; }\n.lintje-disclosure__icon { grid-row: 1; }\n.lintje-disclosure__label .lintje-disclosure__title,\n.lintje-disclosure__label .lintje-disclosure__sub { grid-column: 2; }\n.lintje-disclosure__label--plain .lintje-disclosure__title,\n.lintje-disclosure__label--plain .lintje-disclosure__sub { grid-column: auto; }\n.lintje-disclosure__sub { display: block; font: var(--text-small); color: var(--color-text-muted); margin-top: 2px; }\n\n/* --- Opening and closing -------------------------------------------------- */\n.lintje-disclosure__body {\n  display: grid;\n  grid-template-rows: 0fr;\n  /* Named column: an implicit `auto` track takes the max-content width, so a code block with\n     `wrap: false` would run out of the box instead of scrolling. */\n  grid-template-columns: minmax(0, 1fr);\n  transition: grid-template-rows var(--dur-collapse) var(--ease-in-motion);\n}\n.lintje-disclosure.is-open .lintje-disclosure__body { grid-template-rows: 1fr; }\n\n.lintje-disclosure__body-inner {\n  /* The containing block of what is positioned inside, so the clip holds that too: a\n     visually hidden label in a closed body would otherwise stretch the page below it. */\n  position: relative;\n  min-height: 0;\n  overflow: hidden;\n  opacity: 0;\n  /* Closed: out of the tab order and the accessibility tree; hiding waits for the collapse. */\n  visibility: hidden;\n  transition:\n    opacity var(--dur-collapse) var(--ease-in-motion),\n    visibility 0s linear var(--dur-collapse);\n}\n.lintje-disclosure.is-open .lintje-disclosure__body-inner {\n  opacity: 1;\n  visibility: visible;\n  transition: opacity var(--dur-collapse) var(--ease-in-motion), visibility 0s;\n}\n/* Standing open, nothing clips: slotted content may hang a popover out of the box. */\n.lintje-disclosure.is-open.is-settled .lintje-disclosure__body-inner { overflow: visible; }\n\n/* Inside the clipped box: on the body it would show under a closed disclosure. */\n.lintje-disclosure__content { margin-top: var(--space-3); }\n\n.lintje-disclosure__chevron {\n  flex: none;\n  transform-origin: 50% 50%;\n  transition: transform var(--dur-collapse) var(--ease-in-motion);\n}\n.lintje-disclosure.is-open .lintje-disclosure__chevron { transform: rotate(180deg); }\n/* Paper cannot be unfolded: what a disclosure holds is printed, and its chevron is not. */\n@media print {\n  .lintje-disclosure__body { grid-template-rows: 1fr; }\n  .lintje-disclosure__body-inner { opacity: 1; visibility: visible; overflow: visible; }\n  .lintje-disclosure__chevron { display: none; }\n}\n/* Leading: the chevron first, the title after it, and the content in line with the title. */\n.lintje-disclosure--leading .lintje-disclosure__header { justify-content: flex-start; align-items: flex-start; padding-top: var(--space-3); }\n/* The chevron stands in line with the title's first line, not between title and subtitle. */\n.lintje-disclosure--leading .lintje-disclosure__chevron { margin-top: calc((1lh - 16px) / 2); }\n.lintje-disclosure--leading .lintje-disclosure__label { flex: 1 1 auto; }\n.lintje-disclosure--leading .lintje-disclosure__content { margin-left: calc(16px + var(--space-3)); }\n\n/* Columns: the title in its own column, the content beside it in the text's column, the actions\n   at the end; the host's width decides, so a narrow one stacks again. */\n:host([columns]) { container-type: inline-size; }\n.lintje-expander--columns {\n  display: grid;\n  grid-template-columns: var(--lintje-expander-label, calc(4 * var(--space-10))) minmax(0, 1fr) auto;\n  grid-template-areas: 'head body actions';\n  column-gap: var(--space-5);\n  align-items: start;\n}\n.lintje-expander--columns .lintje-expander__top { display: contents; }\n.lintje-expander--columns .lintje-disclosure__heading { grid-area: head; }\n.lintje-expander--columns .lintje-expander__actions { grid-area: actions; }\n.lintje-expander--columns .lintje-disclosure__body { grid-area: body; }\n.lintje-expander--columns .lintje-disclosure__content { margin: 0; padding-top: var(--space-3); }\n@container (max-width: 40rem) {\n  .lintje-expander--columns {\n    grid-template-columns: minmax(0, 1fr) auto;\n    grid-template-areas: 'head actions' 'body body';\n  }\n  .lintje-expander--columns .lintje-disclosure__content { margin-left: calc(16px + var(--space-3)); padding-top: 0; }\n}\n\n.lintje-expander {\n  background: var(--color-bg-surface);\n  border: 1px solid var(--color-border-default);\n  padding: var(--tile-pad-y) var(--tile-pad-x);\n}\n/* `flat`: an expander inside a tile is not a second card. */\n.lintje-expander--flat { background: none; border: none; padding: 0; }\n.lintje-expander__content { font: var(--text-body); color: var(--color-text-secondary); }\n/* The actions stand beside the title's button, never inside it. */\n.lintje-expander__top { display: flex; align-items: flex-start; gap: var(--space-2); }\n.lintje-expander__top .lintje-disclosure__heading { flex: 1 1 auto; min-width: 0; }\n.lintje-expander__actions { display: flex; flex: none; align-items: center; gap: var(--space-1); }\n";
+//#endregion
+export { e as t };

package/dist-elements/chunks/{disclosure-DVex7Lo_.js → disclosure-CcTr_FLd.js}

@@ -1,4 +1,4 @@
-import { dt as e, en as t, nn as n, ut as r } from "./base-CVKIPSLx.js";
+import { dt as e, en as t, nn as n, ut as r } from "./base-Bd2pmq86.js";
 //#region src/components/shared/disclosure.ts
 var i = 0;
 function a() {

package/dist-elements/chunks/{download-D7ZarlMZ.js → download-BGe7rpQo.js}

@@ -1,4 +1,4 @@
-import { P as e, en as t, nn as n } from "./base-CVKIPSLx.js";
+import { P as e, en as t, nn as n } from "./base-Bd2pmq86.js";
 import "../tag/modal.js";
 //#region src/components/shared/content-tile.ts
 var r = class extends e {

package/dist-elements/chunks/{focus-trap-rje9Oz19.js → focus-trap-Cl99vti9.js}

@@ -1,4 +1,4 @@
-import { Z as e } from "./base-CVKIPSLx.js";
+import { Z as e } from "./base-Bd2pmq86.js";
 //#region src/components/shared/focus-trap.ts
 var t = [
 	"a[href]",