lintje 0.1.1 → 0.2.0

package/dist-elements/chunks/{base-rBLTcEIv.js → base-Bg-IFOPG.js}

@@ -1,5 +1,5 @@
 //#region src/core/version.ts
-var e = "0.1.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 {
+var e = "0.2.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 {
 	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\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  --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-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   ========================================================================= */\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   Below 768 px the gutter follows the page padding and every pointer target is the touch\n   floor.\n   ========================================================================= */\n@media (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", 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@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";
+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  --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-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   ========================================================================= */\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   Below 768 px the gutter follows the page padding and every pointer target is the touch\n   floor.\n   ========================================================================= */\n@media (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", 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";
 //#endregion
 //#region src/core/styles.ts
 function Ve(e) {
@@ -885,6 +885,11 @@ var It = {
 		attributes: {},
 		body: "<path d=\"M11.958 1C18.035 1.022 22.961 5.933 23 12.009l-.006.39a10.992 10.992 0 0 1-1.3 4.825 10.843 10.843 0 0 1-1.86 2.525l-.063.071a10.78 10.78 0 0 1-2.193 1.686 11.035 11.035 0 0 1-13.574-1.973A11.031 11.031 0 0 1 2.84 5.867a11.18 11.18 0 0 1 1.346-1.638A11.147 11.147 0 0 1 11.958 1Zm5.013 4.266-6.37 7.05-3.83-3.281a1.095 1.095 0 0 0-1.411-.01c-.41.339-.509.923-.234 1.376l4.639 7.659c.196.323.548.521.929.522h.004c.38 0 .732-.195.93-.517l7.084-11.523a1.068 1.068 0 0 0-.282-1.423 1.097 1.097 0 0 0-1.459.147Z\" fill-rule=\"evenodd\"/>"
 	},
+	"functioneel-cirkelselectie": {
+		viewBox: "0 0 24 24",
+		attributes: {},
+		body: "<path d=\"M12 2.5a9.5 9.5 0 1 0 0 19 9.5 9.5 0 0 0 0-19Zm0 2a7.5 7.5 0 1 1 0 15 7.5 7.5 0 0 1 0-15Z\" fill-rule=\"evenodd\"/><path d=\"M12 9.75a2.25 2.25 0 1 0 2.1 3.25h3.4v-2h-3.4A2.25 2.25 0 0 0 12 9.75Z\"/>"
+	},
 	"functioneel-darkmode": {
 		viewBox: "0 0 24 24",
 		attributes: {},
@@ -945,11 +950,6 @@ var It = {
 		attributes: {},
 		body: "<path d=\"m41 24c0 2.602-1 5-2.398 7l2.797 2.801a15.1 15.1 0 0 0 3.601-9.801c0-8.199-6.801-15-15-15v4c6 0 11 5 11 11zm-7 0a3.36 3.36 0 0 1 -.602 2l2.801 2.801c1-1.402 1.602-3 1.602-4.801a8.03 8.03 0 0 0 -8-8v4c2.398 0 4.199 1.801 4.199 4zm-8-14.602c0-1.199-1.199-1.797-2.199-1.199-.402.199-2.402 1.801-4.402 3.402l6.601 6.797zm-18.602-4.796c-.797-.801-2-.801-2.797 0s-.801 2 0 2.797l8.598 8.601h-3.199c-4.398 0-6 4.199-6 8s1.602 8 6 8h4l9.801 7.602c1 .598 2.199 0 2.199-1.203v-9.797l6 6c-.602.199-1.398.199-2 .199v4c1.801 0 3.602-.402 5.199-1l5.402 5.398a2.15 2.15 0 0 0 1.398.602c.602 0 1-.199 1.398-.602a1.93 1.93 0 0 0 0-2.801zm0 0\"/>"
 	},
-	"functioneel-home": {
-		viewBox: "0 0 48 48",
-		attributes: {},
-		body: "<path d=\"m45.199 23.199-19-19c-1.199-1.199-3-1.199-4.199 0l-19 19c-.602.602-.801 1.199-.801 2-.199 1.602 1 2.801 2.602 2.801h1.199v16h14v-14h8v14h14v-16h1.199a2.73 2.73 0 0 0 2.801-2.801c0-.801-.199-1.398-.801-2zm0 0\"/>"
-	},
 	"functioneel-info": {
 		viewBox: "0 0 48 48",
 		attributes: {},
@@ -980,6 +980,11 @@ var It = {
 		attributes: {},
 		body: "<path d=\"m35.375 8.426-11.355 10.058-11.352-10.058a3.09 3.09 0 0 0 -4.16.063c-1.09 1.16-1.117 2.965-.059 4.156l10.055 11.355-10.055 11.355c-1.059 1.191-1.031 2.996.059 4.156a3.09 3.09 0 0 0 4.16.063l11.352-10.058 11.355 10.059c1.191 1.055 2.996 1.031 4.156-.062a3.08 3.08 0 0 0 .063-4.156l-10.055-11.357 10.055-11.355a3.08 3.08 0 0 0 -.062-4.156c-1.16-1.094-2.965-1.117-4.156-.062zm-11.355 15.601-.028-.027.027-.027.016.012.016.016-.016.016zm0 0\"/>"
 	},
+	"functioneel-lasso": {
+		viewBox: "0 0 24 24",
+		attributes: {},
+		body: "<path d=\"M13 2.5c-5.2 0-9.5 2.9-9.5 6.5 0 1.8 1.1 3.5 2.9 4.7l-.3.8a2.2 2.2 0 0 0 .3 3.3c-.3 1.6.4 3.3 2.2 4.5l1.1-1.6c-1.2-.8-1.6-1.8-1.5-2.7a2.2 2.2 0 0 0 1.4-2.6l.3-.7c1 .3 2 .4 3.1.4 5.2 0 9.5-2.9 9.5-6.5S18.2 2.5 13 2.5Zm0 2c4.3 0 7.5 2.3 7.5 4.5S17.3 13.5 13 13.5c-1 0-2-.1-2.8-.4a2.2 2.2 0 0 0-2.7-.6C6.3 11.7 5.5 10.4 5.5 9c0-2.2 3.2-4.5 7.5-4.5Z\" fill-rule=\"evenodd\"/>"
+	},
 	"functioneel-locatiemarker": {
 		viewBox: "0 0 48 48",
 		attributes: {},
@@ -1020,11 +1025,31 @@ var It = {
 		attributes: {},
 		body: "<path d=\"m12 2h24v6h-24zm32 8h-40c-1 0-2 .801-2 2v16c0 1.199.801 2 2 2h6v3.199c0 .602.199 1 .602 1.402l8.797 8.797c.402.402.801.602 1.402.602h15.199c1.199 0 2-.801 2-2v-12h6c1.199 0 2-.801 2-2v-16c0-1.199-1-2-2-2zm-10 30h-12v-6c0-1.199-.801-2-2-2h-6v-8h20zm8-22h-4v-4h4zm0 0\"/>"
 	},
+	"functioneel-punaise-outline": {
+		viewBox: "0 0 24 24",
+		attributes: {},
+		body: "<path d=\"M8 2h8a1 1 0 0 1 0 2h-.8v5.6l3.2 3.2c.4.4.6.9.6 1.4v.8c0 .5-.4 1-1 1H13v5.2l-1 1.8-1-1.8V16H6c-.6 0-1-.5-1-1v-.8c0-.5.2-1 .6-1.4l3.2-3.2V4H8a1 1 0 0 1 0-2Zm2.8 2v6.4l-3.6 3.6h9.6l-3.6-3.6V4h-2.4Z\" fill-rule=\"evenodd\"/>"
+	},
+	"functioneel-punaise": {
+		viewBox: "0 0 24 24",
+		attributes: {},
+		body: "<path d=\"M8 2h8a1 1 0 0 1 0 2h-.8v5.6l3.2 3.2c.4.4.6.9.6 1.4v.8c0 .5-.4 1-1 1H13v5.2l-1 1.8-1-1.8V16H6c-.6 0-1-.5-1-1v-.8c0-.5.2-1 .6-1.4l3.2-3.2V4H8a1 1 0 0 1 0-2Z\"/>"
+	},
+	"functioneel-rechthoekselectie": {
+		viewBox: "0 0 24 24",
+		attributes: {},
+		body: "<path d=\"M3 4h18v12h-2V6H5v12h9v2H3V4Z\"/><path d=\"M16 15.5a1 1 0 0 1 1.4-.9l4 1.9a.8.8 0 0 1-.1 1.5l-1.5.4-.4 1.5a.8.8 0 0 1-1.5.1l-1.9-4a1 1 0 0 1 0-.5Z\"/>"
+	},
 	"functioneel-refresh": {
 		viewBox: "0 0 48 48",
 		attributes: {},
 		body: "<path d=\"m38 24c0 5-2.602 9.602-7 12.199-6.602 3.801-15.199 1.602-19.199-5.199-3.801-6.801-1.403-15.398 5.199-19.199 5.398-3 12-2.199 16.398 2l-3.598.398c-.801 0-1.402.801-1.402 1.402 0 .797.402 1.398 1.203 1.598l10.399 2.403c.398.199 1 0 1.398-.402.403-.2.602-.598.602-1.2v-10.602c0-.797-.602-1.398-1.199-1.598-.801-.199-1.402.398-1.801 1l-1 3c-6.199-6.199-16.199-7.602-24-3-9.602 5.399-12.801 17.598-7.398 27.2 3.597 6.398 10.398 10 17.398 10 3.398 0 6.801-.801 10-2.602 6.199-3.597 10-10.199 10-17.398zm0 0\"/>"
 	},
+	"functioneel-selectie": {
+		viewBox: "0 0 24 24",
+		attributes: {},
+		body: "<path d=\"M3 3h4v2H5v2H3V3Zm6 0h4v2H9V3Zm6 0h4v4h-2V5h-2V3ZM3 9h2v4H3V9Zm14 0h2v3h-2V9ZM3 15h2v2h2v2H3v-4Zm6 4h3v2H9v-2Z\"/><path d=\"M13 12.5a1 1 0 0 1 1.4-.9l6.8 3.2a.8.8 0 0 1-.1 1.5l-2.7.7-.7 2.7a.8.8 0 0 1-1.5.1L13 13a1 1 0 0 1 0-.5Z\"/>"
+	},
 	"functioneel-sleep": {
 		viewBox: "0 0 24 24",
 		attributes: {},
@@ -1100,16 +1125,6 @@ var It = {
 		attributes: {},
 		body: "<path d=\"m0 0h64v64h-64z\" fill=\"none\"/><path d=\"m25.3321 6.1345-2.0177 5.8167c-1.5646.4527-3.052 1.08-4.4418 1.8659l-5.5687-2.7003c-.6468-.3137-1.4213-.1831-1.9295.3251-1.8 1.8001-1.1346 1.1346-2.9326 2.9326-.5082.5082-.6388 1.2827-.3251 1.9295l2.7253 5.6202c-.751 1.3627-1.3406 2.8227-1.774 4.3497l-5.9335 2.0582c-.6792.2356-1.1345.8755-1.1345 1.5943v4.1472c0 .7188.4553 1.3587 1.1345 1.5943l5.9493 2.0637c.4348 1.5144 1.0258 2.9611 1.7733 4.3132l-2.7404 5.6513c-.3137.6468-.1831 1.4213.3251 1.9295 1.8001 1.8 1.1346 1.1346 2.9326 2.9326.5082.5082 1.2827.6388 1.9295.3251l5.6199-2.7251c1.3686.7687 2.832 1.3828 4.3694 1.8294l2.0389 5.8779c.2356.6792.8755 1.1345 1.5943 1.1345h3.0736v-18.8266c-.3284.0398-.6608.0666-1 .0666-4.5508 0-8.24-3.6891-8.24-8.24s3.6891-8.24 8.24-8.24c.3392 0 .6716.0268 1 .0666v-18.8266c-1.0243 0-1.9494 0-3.0736 0-.7188 0-1.3587.4553-1.5943 1.1345z\"/><path d=\"m56.4597 18.2619c-.9368 1.3607-2.035 2.1028-2.5842 2.4344-.3743.2261-.5553.1334-.625.0277.5175-.9286 1.545-1.9612 1.8037-4.1695.5469-4.6689-2.7309-7.6347-7.046-6.7027-2.202.4755-3.1174 1.6548-3.9827 2.2869-.11-.0599-.219-.2343-.0375-.638.3029-.6736 1.0467-2.1241 2.6442-3.3198-2.0998-2.5516-5.3422-3.8409-8.3787-3.0182-1.8707.5068-3.3339 1.7326-4.2535 3.3427v16.5745c1.137-1.3279 2.8383-2.157 4.2604-2.3041.4833-.05.85-.05.8081.2855-3.8585 2.1403-5.0526 6.2694-5.0526 9.6201 0 0-.0085-.0154-.0159-.0287v3.4125c2.7195-.9948 6.6523.5735 7.4603 4.2599.1595.728-.1895.7773-.1895.7773-.0007-.0196-.7006-1.5947-2.4891-2.5005-1.547-.7835-3.2694-.7393-4.7818-.0375v16.9331c.9218 1.6047 2.387 2.8242 4.2535 3.3298 3.2304.8752 7.3005-.3219 9.3547-4.4847-1.6866-.7966-2.5984-1.925-2.9814-2.454-.2289-.3162-.1509-.4777-.0554-.5428.8576.3952 1.8273 1.1967 3.7447 1.3754 5.3935.5027 9.2785-4.3926 7.5309-8.8385-.5915-1.5048-1.5737-2.1742-2.1412-2.8269.0508-.0983.2086-.2005.5944-.0596.481.1757 1.3794.552 2.3003 1.2874 3.8477-1.9865 5.5184-7.1115 2.923-11.8442 3.2212-4.9393 1.1661-10.4082-3.0637-12.1775zm-18.884-3.7363c.1496-.3161.3948-.5866.5424-.4489-.0057 1.5189 1.3575 4.7581 6.0538 3.4775 1.436-.3975 2.5232-1.0786 3.8069-1.9644.1677.0311.176.21.0157.4925-.8182 1.4423-2.2335 3.397-5.8046 3.6405-4.1617.3227-5.6461-3.0164-4.6142-5.1972zm3.7179 17.9331c-1.644-1.2926-1.5016-5.3531 1.3011-6.9296 1.59-.8944 3.8758-.2982 5.5991.1456 2.6202.6747 4.4614.6252 6.6873-.3674.1786.335-.0214.6517-.2714.935-1.2223 1.3853-3.705 1.7718-5.788 1.5767-2.5236-.2364-3.2969-1.0359-5.2844-.1415-2.5067 1.1281-1.5673 4.8135-1.5451 4.8554-.1819.3091-.4844.0941-.6986-.0742zm8.3018 14.8819c-.3134-.7933-1.3-1.816-2.7258-2.1866-1.4886-.3867-3.3753-.0684-4.9788 1.0889-2.799 2.0198-2.6901 4.5175-2.6911 4.5413 0 0-.4391.1696-.4559-.6763-.0284-1.4266.5886-4.3583 2.4884-5.7824 3.765-2.8222 8.3582-1.0955 8.6945 2.0992.0666.6333-.0334.95-.3313.9159zm6.7083-9.8518c-2.1619-2.5216-4.9835-3.7319-7.5697-2.037-1.7897 1.1729-2.9113 3.4847-2.9097 3.5055 0 0-.3239.0415-.2475-.6321.1077-.9494.7598-2.842 2.0525-4.1174 2.7535-2.7166 7.7401-1.7885 8.7137 2.3842.1167.4998.2.7331-.0393.8968z\"/>"
 	},
-	"kantoor-label-outline": {
-		viewBox: "0 0 24 24",
-		attributes: {},
-		body: "<path d=\"m11.996 19.496 1.997-1.006.782.397-1.593 1.215 5.63 2.848c.312.15.688-.055.688-.374V1h-15v21.394c0 .402.474.66.867.47l6.629-3.368Zm-5.696.875 5.695-2.893 5.705 2.89V2.8H6.3v17.571Z\" fill-rule=\"evenodd\"/>"
-	},
-	"kantoor-label": {
-		viewBox: "0 0 24 24",
-		attributes: {},
-		body: "<path d=\"M4.5 1v21.394c0 .402.474.66.867.47L17.2 16.853s.105.088-.017.196c-.072.064-2.554 1.96-3.992 3.057l5.62 2.845c.313.15.689-.054.689-.374V1h-15Z\" fill-rule=\"evenodd\"/>"
-	},
 	"lichaam-duim-omhoog": {
 		viewBox: "0 0 64 64",
 		attributes: {},
@@ -1661,6 +1676,19 @@ var { I: An } = Pe, jn = (e) => e, Mn = (e) => e.strings === void 0, Nn = () =>
 	}
 }), zn = (e) => e ?? T, Bn = 180;
 function Vn(e, t, n, r = "bottom-start", i = 6) {
+	if (r === "left-center" || r === "left-start") {
+		let a = e.left - i - t.width;
+		if (a >= 8) {
+			let i = r === "left-start" ? e.top : (e.top + e.bottom) / 2 - t.height / 2;
+			return {
+				top: Math.round(Math.max(8, Math.min(i, n.height - t.height - 8))),
+				bottom: null,
+				left: Math.round(a),
+				space: Math.max(0, n.height - 16)
+			};
+		}
+		r = r === "left-start" ? "bottom-end" : "top-center";
+	}
 	let a = n.height - e.bottom - i - 8, o = e.top - i - 8, s = Math.min(t.height || Bn, Bn), c = r.startsWith("top") ? !(o < s && a > o) : a < s && o > a, l = e.left;
 	return r.endsWith("-end") && (l = e.right - t.width), r === "top-center" && (l = e.left + e.width / 2 - t.width / 2), l = Math.max(8, Math.min(l, n.width - t.width - 8)), {
 		top: c ? null : e.bottom + i,
@@ -1846,7 +1874,7 @@ function $n(e) {
 }
 var er = class extends j {
 	constructor(...e) {
-		super(...e), this.text = "", this.noDescribe = !1, this.open = !1, this.spot = null, this.reflowFrame = 0, this.#e = "", this.onPointerEnter = () => {
+		super(...e), this.text = "", this.noDescribe = !1, this.placement = "top", this.open = !1, this.spot = null, this.reflowFrame = 0, this.#e = "", this.onPointerEnter = () => {
 			this.open ? clearTimeout(this.timer) : this.show(300);
 		}, this.onPointerLeave = () => {
 			clearTimeout(this.timer), this.open && (this.timer = setTimeout(() => this.open = !1, 150));
@@ -1868,6 +1896,7 @@ var er = class extends j {
 				type: Boolean,
 				attribute: "no-describe"
 			},
+			placement: { type: String },
 			open: { state: !0 },
 			spot: { state: !0 }
 		};
@@ -1897,8 +1926,8 @@ var er = class extends j {
 		let t = this.renderRoot.querySelector(".lintje-tooltip"), n = {
 			width: t?.offsetWidth ?? 0,
 			height: t?.offsetHeight ?? 0
-		}, r = Vn(e.getBoundingClientRect(), n, Un(), "top-center", 8);
-		Hn(this.spot, r) || (this.spot = r);
+		}, r = this.placement === "left" ? "left-center" : "top-center", i = Vn(e.getBoundingClientRect(), n, Un(), r, 8);
+		Hn(this.spot, i) || (this.spot = i);
 	}
 	willUpdate(e) {
 		super.willUpdate(e), (e.has("text") || e.has("noDescribe")) && this.describe(), e.has("open") && (this.open ? this.measure() : this.spot = null);
@@ -2086,7 +2115,7 @@ var fr = "/* The size is on the host so a percentage has a box to resolve agains
 M("lintje-skeleton", pr);
 //#endregion
 //#region src/primitives/tile/tile.css?inline
-var mr = "/*\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.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; font: var(--text-small); color: var(--color-text-muted); gap: var(--space-3); }\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.lintje-tile__actions { display: flex; gap: var(--space-2); flex: none; }\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 (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", hr = ".lintje-announcement {\n  container-type: inline-size;\n  display: flex;\n  align-items: flex-start;\n  gap: var(--space-2);\n  padding: var(--space-4);\n  border-radius: var(--radius);\n}\n.lintje-announcement.is-compact { padding: 10px var(--space-3); gap: var(--space-2); }\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__content { 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; }\n.lintje-announcement__media::slotted(*) { flex: none; max-width: 40%; height: auto; }\n@container (min-width: 560px) {\n  .lintje-announcement__body { flex-direction: row; align-items: center; gap: var(--space-4); }\n  .lintje-announcement__content { flex: 1; }\n  .lintje-announcement__action::slotted(*) { align-self: center; flex: none; }\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--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 (max-width: 767px) {\n  .lintje-announcement { padding: 10px var(--space-3); gap: var(--space-2); }\n  .lintje-announcement__title { font: var(--text-tile-title); color: var(--color-text-primary); }\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", gr = "Gegevens laden…", _r = class e extends ar {
+var mr = "/*\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.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; font: var(--text-small); color: var(--color-text-muted); gap: var(--space-3); }\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 (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", hr = ".lintje-announcement {\n  container-type: inline-size;\n  display: flex;\n  align-items: flex-start;\n  gap: var(--space-2);\n  padding: var(--space-4);\n  border-radius: var(--radius);\n}\n.lintje-announcement.is-compact { padding: 10px var(--space-3); gap: var(--space-2); }\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__content { 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; }\n.lintje-announcement__media::slotted(*) { flex: none; max-width: 40%; height: auto; }\n@container (min-width: 560px) {\n  .lintje-announcement__body { flex-direction: row; align-items: center; gap: var(--space-4); }\n  .lintje-announcement__content { flex: 1; }\n  .lintje-announcement__action::slotted(*) { align-self: center; flex: none; }\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--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 (max-width: 767px) {\n  .lintje-announcement { padding: 10px var(--space-3); gap: var(--space-2); }\n  .lintje-announcement__title { font: var(--text-tile-title); color: var(--color-text-primary); }\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", gr = "Gegevens laden…", _r = class e extends ar {
 	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.filled = null, this.#e = 0;
 	}
@@ -2513,111 +2542,48 @@ var Fr = (e, t, n) => {
 		} else if (e.type === L.ATTRIBUTE && n.getAttribute(r) === t + "") return w;
 		return Fn(e), t;
 	}
-}), Rr = [
-	"sky-blue",
-	"dark-yellow",
-	"red",
-	"green",
-	"mint-green",
-	"violet",
-	"orange",
-	"pink",
-	"dark-green",
-	"purple",
-	"ruby-red",
-	"yellow",
-	"dark-brown",
-	"brown",
-	"dark-blue",
-	"light-blue",
-	"moss-green"
-];
-function zr(e) {
-	return typeof e == "string" && Rr.includes(e);
-}
-function Br(e) {
-	return `var(--color-chart-${e})`;
-}
-//#endregion
-//#region src/core/format.ts
-function Z(e, t = 0) {
-	return e.toLocaleString("nl-NL", {
-		minimumFractionDigits: t,
-		maximumFractionDigits: t
-	});
-}
-function Vr(e) {
-	return Math.abs(e) >= 1e6 ? `${Z(e / 1e6, 1)} mln` : Math.abs(e) >= 1e4 ? `${Math.round(e / 1e3)}k` : Z(e);
-}
-function Hr(e, t) {
-	let n = Z(e);
-	return Wr(n, t) ? n : Vr(e);
-}
-var Ur = 6.5;
-function Wr(e, t) {
-	return e.length * Ur <= t;
-}
-var Gr = "'RijksSans', 'Source Sans 3', sans-serif", Q;
-function Kr(e, t, n = "") {
-	if (qr(e, n) <= t) return e;
-	let r = e.length;
-	for (; r > 1;) {
-		--r;
-		let i = `${e.slice(0, r).trimEnd()}…`;
-		if (qr(i, n) <= t) return i;
-	}
-	return "…";
-}
-function qr(e, t = "") {
-	return Q === void 0 && (Q = typeof document > "u" ? null : document.createElement("canvas").getContext("2d") ?? null), Q ? (Q.font = `400 12px ${t.trim() || Gr}`, Q.measureText(e).width) : e.length * Ur;
-}
-function Jr(e, t = 0) {
-	return `${Z(e, t)}%`;
-}
-//#endregion
-//#region node_modules/lit-html/async-directive.js
-var $ = (e, t) => {
+}), Z = (e, t) => {
 	let n = e._$AN;
 	if (n === void 0) return !1;
-	for (let e of n) e._$AO?.(t, !1), $(e, t);
+	for (let e of n) e._$AO?.(t, !1), Z(e, t);
 	return !0;
-}, Yr = (e) => {
+}, Rr = (e) => {
 	let t, n;
 	do {
 		if ((t = e._$AM) === void 0) break;
 		n = t._$AN, n.delete(e), e = t;
 	} while (n?.size === 0);
-}, Xr = (e) => {
+}, zr = (e) => {
 	for (let t; t = e._$AM; e = t) {
 		let n = t._$AN;
 		if (n === void 0) t._$AN = n = /* @__PURE__ */ new Set();
 		else if (n.has(e)) break;
-		n.add(e), $r(t);
+		n.add(e), Hr(t);
 	}
 };
-function Zr(e) {
-	this._$AN === void 0 ? this._$AM = e : (Yr(this), this._$AM = e, Xr(this));
+function Br(e) {
+	this._$AN === void 0 ? this._$AM = e : (Rr(this), this._$AM = e, zr(this));
 }
-function Qr(e, t = !1, n = 0) {
+function Vr(e, t = !1, n = 0) {
 	let r = this._$AH, i = this._$AN;
 	if (i !== void 0 && i.size !== 0) {
 		if (t) {
-			if (Array.isArray(r)) for (let e = n; e < r.length; e++) $(r[e], !1), Yr(r[e]);
-			else r != null && ($(r, !1), Yr(r));
-		} else $(this, e);
+			if (Array.isArray(r)) for (let e = n; e < r.length; e++) Z(r[e], !1), Rr(r[e]);
+			else r != null && (Z(r, !1), Rr(r));
+		} else Z(this, e);
 	}
 }
-var $r = (e) => {
-	e.type == L.CHILD && (e._$AP ??= Qr, e._$AQ ??= Zr);
-}, ei = class extends z {
+var Hr = (e) => {
+	e.type == L.CHILD && (e._$AP ??= Vr, e._$AQ ??= Br);
+}, Ur = class extends z {
 	constructor() {
 		super(...arguments), this._$AN = void 0;
 	}
 	_$AT(e, t, n) {
-		super._$AT(e, t, n), Xr(this), this.isConnected = e._$AU;
+		super._$AT(e, t, n), zr(this), this.isConnected = e._$AU;
 	}
 	_$AO(e, t = !0) {
-		e !== this.isConnected && (this.isConnected = e, e ? this.reconnected?.() : this.disconnected?.()), t && ($(this, e), Yr(this));
+		e !== this.isConnected && (this.isConnected = e, e ? this.reconnected?.() : this.disconnected?.()), t && (Z(this, e), Rr(this));
 	}
 	setValue(e) {
 		if (Mn(this._$Ct)) this._$Ct._$AI(e, this);
@@ -2628,7 +2594,7 @@ var $r = (e) => {
 	}
 	disconnected() {}
 	reconnected() {}
-}, ti = /* @__PURE__ */ new WeakMap(), ni = R(class extends ei {
+}, Wr = /* @__PURE__ */ new WeakMap(), Gr = R(class extends Ur {
 	render(e) {
 		return T;
 	}
@@ -2639,13 +2605,13 @@ var $r = (e) => {
 	rt(e) {
 		if (this.G !== void 0) {
 			if (this.isConnected || (e = void 0), typeof this.G == "function") {
-				let t = this.ht ?? globalThis, n = ti.get(t);
-				n === void 0 && (n = /* @__PURE__ */ new WeakMap(), ti.set(t, n)), n.get(this.G) !== void 0 && this.G.call(this.ht, void 0), n.set(this.G, e), e !== void 0 && this.G.call(this.ht, e);
+				let t = this.ht ?? globalThis, n = Wr.get(t);
+				n === void 0 && (n = /* @__PURE__ */ new WeakMap(), Wr.set(t, n)), n.get(this.G) !== void 0 && this.G.call(this.ht, void 0), n.set(this.G, e), e !== void 0 && this.G.call(this.ht, e);
 			} else this.G.value = e;
 		}
 	}
 	get lt() {
-		return typeof this.G == "function" ? ti.get(this.ht ?? globalThis)?.get(this.G) : this.G?.value;
+		return typeof this.G == "function" ? Wr.get(this.ht ?? globalThis)?.get(this.G) : this.G?.value;
 	}
 	disconnected() {
 		this.lt === this.ct && this.rt(void 0);
@@ -2655,4 +2621,67 @@ var $r = (e) => {
 	}
 });
 //#endregion
-export { G as $, nr as A, pt as At, zn as B, M as Bt, pr as C, Ct, cr as D, dt as Dt, ur as E, _t as Et, Yn as F, ot as Ft, On as G, T as Gt, wn as H, A as Ht, qn as I, et as It, bn as J, o as Jt, Cn as K, C as Kt, Kn as L, it as Lt, er as M, ct as Mt, Zn as N, lt as Nt, ar as O, ft as Ot, Qn as P, st as Pt, mn as Q, Vn as R, tt as Rt, hr as S, Mt as St, dr as T, gt as Tt, kn as U, Ve as Ut, Rn as V, We as Vt, Dn as W, Ue as Wt, yn as X, vn as Y, e as Yt, q as Z, Or as _, Ft as _t, Z as a, nn as at, yr as b, At as bt, Kr as c, cn as ct, zr as d, Bt as dt, K as et, Lr as f, Rt as ft, jr as g, It as gt, Ar as h, L as ht, Hr as i, ln as it, tr as j, ht as jt, ir as k, mt as kt, Rr as l, en as lt, Pr as m, z as mt, Wr as n, rn as nt, Jr as o, an as ot, Ir as p, R as pt, xn as q, Ce as qt, Vr as r, tn as rt, qr as s, on as st, ni as t, hn as tt, Br as u, B as ut, kr as v, St as vt, fr as w, Nt as wt, _r as x, Pt as xt, br as y, wt as yt, Un as z, j as zt };
+//#region src/core/format.ts
+function Q(e, t = 0) {
+	return e.toLocaleString("nl-NL", {
+		minimumFractionDigits: t,
+		maximumFractionDigits: t
+	});
+}
+function Kr(e) {
+	return Math.abs(e) >= 1e6 ? `${Q(e / 1e6, 1)} mln` : Math.abs(e) >= 1e4 ? `${Math.round(e / 1e3)}k` : Q(e);
+}
+function qr(e, t) {
+	let n = Q(e);
+	return Yr(n, t) ? n : Kr(e);
+}
+var Jr = 6.5;
+function Yr(e, t) {
+	return e.length * Jr <= t;
+}
+var Xr = "'RijksSans', 'Source Sans 3', sans-serif", $;
+function Zr(e, t, n = "") {
+	if (Qr(e, n) <= t) return e;
+	let r = e.length;
+	for (; r > 1;) {
+		--r;
+		let i = `${e.slice(0, r).trimEnd()}…`;
+		if (Qr(i, n) <= t) return i;
+	}
+	return "…";
+}
+function Qr(e, t = "", n = 400) {
+	return $ === void 0 && ($ = typeof document > "u" ? null : document.createElement("canvas").getContext("2d") ?? null), $ ? ($.font = `${n} 12px ${t.trim() || Xr}`, $.measureText(e).width) : e.length * Jr;
+}
+function $r(e, t = 0) {
+	return `${Q(e, t)}%`;
+}
+//#endregion
+//#region src/tokens/colors.ts
+var ei = [
+	"sky-blue",
+	"dark-yellow",
+	"red",
+	"green",
+	"mint-green",
+	"violet",
+	"orange",
+	"pink",
+	"dark-green",
+	"purple",
+	"ruby-red",
+	"yellow",
+	"dark-brown",
+	"brown",
+	"dark-blue",
+	"light-blue",
+	"moss-green"
+];
+function ti(e) {
+	return typeof e == "string" && ei.includes(e);
+}
+function ni(e) {
+	return `var(--color-chart-${e})`;
+}
+//#endregion
+export { G as $, nr as A, pt as At, zn as B, M as Bt, pr as C, Ct, cr as D, dt as Dt, ur as E, _t as Et, Yn as F, ot as Ft, On as G, T as Gt, wn as H, A as Ht, qn as I, et as It, bn as J, Ce as Jt, Cn as K, Ie as Kt, Kn as L, it as Lt, er as M, ct as Mt, Zn as N, lt as Nt, ar as O, ft as Ot, Qn as P, st as Pt, mn as Q, Vn as R, tt as Rt, hr as S, Mt as St, dr as T, gt as Tt, kn as U, Ve as Ut, Rn as V, We as Vt, Dn as W, Ue as Wt, yn as X, e as Xt, vn as Y, o as Yt, q as Z, Or as _, Ft as _t, Kr as a, nn as at, yr as b, At as bt, $r as c, cn as ct, Gr as d, Bt as dt, K as et, Lr as f, Rt as ft, jr as g, It as gt, Ar as h, L as ht, Yr as i, ln as it, tr as j, ht as jt, ir as k, mt as kt, Qr as l, en as lt, Pr as m, z as mt, ni as n, rn as nt, qr as o, an as ot, Ir as p, R as pt, xn as q, C as qt, ti as r, tn as rt, Q as s, on as st, ei as t, hn as tt, Zr as u, B as ut, kr as v, St as vt, fr as w, Nt as wt, _r as x, Pt as xt, br as y, wt as yt, Un as z, j as zt };