lintje 0.2.0 → 0.4.0

package/dist-elements/tag/shell.js

@@ -1,6 +1,6 @@
-import { $ as e, A as t, Bt as n, Gt as r, H as i, Ht as a, I as o, It as s, Lt as c, Nt as l, Ot as u, Pt as d, Rt as ee, Tt as te, U as f, W as p, X as m, Y as ne, Z as h, et as g, qt as _, zt as v } from "../chunks/base-Bg-IFOPG.js";
+import { $ as e, Gt as t, H as n, Ht as r, I as i, Jt as a, Kt as o, Lt as s, Pt as c, Q as l, Ut as u, Yt as ee, Z as d, Zt as f, at as p, en as m, lt as te, nn as h, ot as g, qt as ne, st as _, ut as v } from "../chunks/base-DRGvkF-r.js";
 import "./logo.js";
-import { n as y, r as re, t as b } from "../chunks/focus-trap-9BnE-xWv.js";
+import { n as y, r as re, t as b } from "../chunks/focus-trap-Dv8zu64A.js";
 import "./toast.js";
 import "./qr-code.js";
 import { t as ie } from "../chunks/dialog-close-u75fVEw4.js";
@@ -14,86 +14,86 @@ var x = {
 	phone: 40
 };
 function oe(e) {
-	let { logo: t, emblem: n, ribbon: i, environment: a, home: s } = e, c = _`<lintje-logo
+	let { logo: t, emblem: r, ribbon: i, environment: a, home: o } = e, s = h`<lintje-logo
     full
     width=${i}
-    src=${t ?? r}
-    name=${n?.name ?? r}
-    alt=${n?.label ?? r}
-    byline=${n?.byline ?? r}
+    src=${t ?? m}
+    name=${r?.name ?? m}
+    alt=${r?.label ?? m}
+    byline=${r?.byline ?? m}
   ></lintje-logo>`;
-	return _`<div class="lintje-logobar">
-    ${s ? _`<a
+	return h`<div class="lintje-logobar">
+    ${o ? h`<a
           class="lintje-logobar__home focus-inset"
-          href=${s.href}
+          href=${o.href}
           aria-label="Naar de startpagina"
           title="Naar de startpagina"
           @click=${(e) => {
-		o(e) && s.onNavigate(e);
+		n(e) && o.onNavigate(e);
 	}}
-          >${c}</a
-        >` : c}
-    ${a ? _`<p class="lintje-logobar__environment" title=${a}>
+          >${s}</a
+        >` : s}
+    ${a ? h`<p class="lintje-logobar__environment" title=${a}>
           <span class="lintje-logobar__environment-label">${a}</span>
           <span class="lintje-logobar__environment-short" aria-hidden="true"
             >${a.slice(0, 3)}</span
           >
-        </p>` : r}
+        </p>` : m}
   </div>`;
 }
 var S = (e) => !!e.href && !e.noAccess;
 function C(e) {
-	return _`<span class="visually-hidden"
+	return h`<span class="visually-hidden"
     >${e.noAccess ? ", geen toegang" : ", niet beschikbaar"}</span
   >`;
 }
-function w(e, t, n) {
-	o(n) && (e.onOpen(null), e.onNavigate(t, n));
+function w(e, t, r) {
+	n(r) && (e.onOpen(null), e.onNavigate(t, r));
 }
 function se(e) {
 	let t = e.badge;
-	return t ? m({
+	return t ? g({
 		value: t.value,
 		variant: t.tone === "new" ? "label" : t.tone === "action" ? "unread" : "count",
 		label: t.label,
 		className: "lintje-navbar__badge"
-	}) : r;
+	}) : m;
 }
 function ce(e, t) {
-	if (!S(t)) return _`<span class="lintje-navbar__entry is-unavailable" aria-disabled="true"
+	if (!S(t)) return h`<span class="lintje-navbar__entry is-unavailable" aria-disabled="true"
       >${t.label}${C(t)}</span
     >`;
 	let n = !!t.active;
-	return _`<a
-    class=${h({
+	return h`<a
+    class=${_({
 		"lintje-navbar__entry": !0,
 		"focus-inset": !0,
 		"is-active": n
 	})}
     href=${t.href}
-    aria-current=${n ? "page" : r}
+    aria-current=${n ? "page" : m}
     @click=${(n) => w(e, t, n)}
     ><span class="lintje-navbar__label">${t.label}</span></a
   >`;
 }
 function le(e, t) {
-	let n = _`${g(t.icon, {
+	let n = h`${v(t.icon, {
 		size: 20,
 		src: t.iconSrc
 	})}
     <span class="lintje-navbar__page-text">
       <span class="lintje-navbar__label">${t.label}</span>
-      ${t.metric ? _`<span class="lintje-navbar__metric"
+      ${t.metric ? h`<span class="lintje-navbar__metric"
               ><span class="lintje-navbar__metric-value">${t.metric.value}</span> ${t.metric.label}</span
-            >` : r}
+            >` : m}
     </span>
-    ${t.noAccess ? g("gebruiksvoorwerpen-hangslot-dicht", {
+    ${t.noAccess ? v("gebruiksvoorwerpen-hangslot-dicht", {
 		size: 16,
 		label: "Geen toegang"
-	}) : S(t) ? r : C(t)}
+	}) : S(t) ? m : C(t)}
     ${se(t)}`;
-	if (!S(t)) return _`<span
-      class=${h({
+	if (!S(t)) return h`<span
+      class=${_({
 		"lintje-navbar__page": !0,
 		"is-unavailable": !0,
 		"is-no-access": !!t.noAccess
@@ -101,51 +101,51 @@ function le(e, t) {
       aria-disabled="true"
       >${n}</span
     >`;
-	let i = !!t.active;
-	return _`<a
-    class=${h({
+	let r = !!t.active;
+	return h`<a
+    class=${_({
 		"lintje-navbar__page": !0,
-		"is-active": i
+		"is-active": r
 	})}
     href=${t.href}
-    aria-current=${i ? "page" : r}
+    aria-current=${r ? "page" : m}
     @click=${(n) => w(e, t, n)}
     >${n}</a
   >`;
 }
-function T(e, t, n, i, a, o, s = {}) {
-	let c = e.open === t, l = t === -1, u = `${n}-entry`;
-	return _`<div class="lintje-navbar__group">
+function T(e, t, n, r, i, a, o = {}) {
+	let s = e.open === t, c = t === -1, l = `${n}-entry`;
+	return h`<div class="lintje-navbar__group">
     <button
       type="button"
-      id=${u}
-      class=${h({
+      id=${l}
+      class=${_({
 		"lintje-navbar__entry": !0,
 		"lintje-navbar__entry--group": !0,
 		"focus-inset": !0,
-		"is-active": a,
-		"is-open": c,
-		...s
+		"is-active": i,
+		"is-open": s,
+		...o
 	})}
-      aria-expanded=${String(c)}
+      aria-expanded=${String(s)}
       aria-controls=${n}
       @click=${(n) => {
-		e.onOpen(c && (l || n.detail === 0) ? null : t);
+		e.onOpen(s && (c || n.detail === 0) ? null : t);
 	}}
-      @mouseenter=${l ? r : () => e.onOpen(t)}
+      @mouseenter=${c ? m : () => e.onOpen(t)}
     >
-      ${l ? c ? _`<span class="lintje-navbar__label">Sluiten</span>${g("functioneel-kruis", { size: 16 })}` : _`${g("functioneel-menu", { size: 16 })}<span class="lintje-navbar__label">${i}</span>` : _`<span class="lintje-navbar__label">${i}</span>
-              ${g("functioneel-delta-omlaag", {
+      ${c ? s ? h`<span class="lintje-navbar__label">Sluiten</span>${v("functioneel-kruis", { size: 16 })}` : h`${v("functioneel-menu", { size: 16 })}<span class="lintje-navbar__label">${r}</span>` : h`<span class="lintje-navbar__label">${r}</span>
+              ${v("functioneel-delta-omlaag", {
 		size: 16,
-		rotate: c ? 180 : void 0
+		rotate: s ? 180 : void 0
 	})}`}
     </button>
-    ${c ? _`<div id=${n} class="lintje-navbar__submenu">${o(u)}</div>` : r}
+    ${s ? h`<div id=${n} class="lintje-navbar__submenu">${a(l)}</div>` : m}
   </div>`;
 }
 function E(e, t, n) {
-	return _`<ul class="lintje-navbar__pages" aria-labelledby=${n}>
-    ${t.map((t) => _`<li class="lintje-navbar__item">${le(e, t)}</li>`)}
+	return h`<ul class="lintje-navbar__pages" aria-labelledby=${n}>
+    ${t.map((t) => h`<li class="lintje-navbar__item">${le(e, t)}</li>`)}
   </ul>`;
 }
 var ue = (e) => e.some((e) => S(e) && !!e.active);
@@ -154,49 +154,49 @@ function de(e, t, n) {
 }
 function fe(e) {
 	let t = `${e.id}-menu`, n = e.groups.filter((e) => !e.heading).flatMap((e) => e.items);
-	return T(e, -1, t, "Menu", !1, (i) => _`${n.length ? E(e, n, i) : r}
-      ${e.groups.map((n, i) => {
-		if (!n.heading) return r;
-		let a = `${t}-heading-${i}`;
-		return _`<p id=${a} class="lintje-navbar__heading">${n.heading}</p>
-          ${E(e, n.items, a)}`;
+	return T(e, -1, t, "Menu", !1, (r) => h`${n.length ? E(e, n, r) : m}
+      ${e.groups.map((n, r) => {
+		if (!n.heading) return m;
+		let i = `${t}-heading-${r}`;
+		return h`<p id=${i} class="lintje-navbar__heading">${n.heading}</p>
+          ${E(e, n.items, i)}`;
 	})}`, { "lintje-navbar__entry--menu": !0 });
 }
 function pe(e) {
 	let t = !!e.collapsed;
-	return _`<div class="lintje-navbar" @mouseleave=${() => {
+	return h`<div class="lintje-navbar" @mouseleave=${() => {
 		e.open !== -1 && e.onOpen(null);
 	}}>
     <div class="lintje-navbar__start">
-      ${e.start ?? r}
+      ${e.start ?? m}
       <nav class="lintje-navbar__entries" aria-label="Hoofdnavigatie">
         <div
-          class=${h({
+          class=${_({
 		"lintje-navbar__list": !0,
 		"is-hidden": t
 	})}
           ?inert=${t}
-          aria-hidden=${t ? "true" : r}
+          aria-hidden=${t ? "true" : m}
         >
           ${e.groups.map((t, n) => t.heading ? de(e, t, n) : t.items.map((t) => ce(e, t)))}
         </div>
-        ${t ? fe(e) : r}
+        ${t ? fe(e) : m}
       </nav>
     </div>
-    ${e.end ? _`<div class="lintje-navbar__end">${e.end}</div>` : r}
+    ${e.end ? h`<div class="lintje-navbar__end">${e.end}</div>` : m}
   </div>`;
 }
 var me = class {
 	#e;
 	#t;
 	#n;
-	constructor(e) {
-		this.host = e, this.collapsed = !1, this.#t = null, this.#n = [], this.#i = (e) => {
-			if (e.key !== "Escape" || this.host.openGroup === null) return;
-			let t = this.#r;
-			if (t && !p(t)) return;
-			let n = this.host.renderRoot.querySelector(".lintje-navbar__entry[aria-expanded=\"true\"]"), r = n?.parentElement, i = r ? f(r) : !1;
-			this.host.openGroup = null, i && n?.focus();
+	constructor(n) {
+		this.host = n, this.collapsed = !1, this.#t = null, this.#n = [], this.#i = (t) => {
+			if (t.key !== "Escape" || this.host.openGroup === null) return;
+			let n = this.#r;
+			if (n && !e(n)) return;
+			let r = this.host.renderRoot.querySelector(".lintje-navbar__entry[aria-expanded=\"true\"]"), i = r?.parentElement, a = i ? l(i) : !1;
+			this.host.openGroup = null, a && r?.focus();
 		}, this.#a = (e) => {
 			if (this.host.openGroup === null) return;
 			let t = this.#r;
@@ -205,7 +205,7 @@ var me = class {
 			if (this.host.openGroup === null) return;
 			let t = e.relatedTarget, n = this.#r;
 			t && n && !n.contains(t) && (this.host.openGroup = null);
-		}, e.addController(this), this.#e = new c(e, s);
+		}, n.addController(this), this.#e = new o(n, t);
 	}
 	get #r() {
 		return this.host.renderRoot.querySelector(".lintje-navbar");
@@ -248,14 +248,14 @@ var me = class {
 	}
 };
 function he(e) {
-	return e ? _`<div class="lintje-header-scrim" aria-hidden="true"></div>` : r;
+	return e ? h`<div class="lintje-header-scrim" aria-hidden="true"></div>` : m;
 }
 //#endregion
 //#region src/components/frame/shell/navigation.ts
 var D = "Menu vastzetten";
 function ge(e) {
-	let t = g(e ? "functioneel-punaise" : "functioneel-punaise-outline", { size: 16 });
-	return t === r ? {
+	let t = v(e ? "functioneel-punaise" : "functioneel-punaise-outline", { size: 16 });
+	return t === m ? {
 		content: "Vastzetten",
 		asText: !0
 	} : {
@@ -270,7 +270,7 @@ function O(e, t) {
 		return !1;
 	}
 }
-var k = (e) => f(e) && O(i(), ":focus-visible");
+var k = (e) => l(e) && O(d(), ":focus-visible");
 function _e(e, t) {
 	return {
 		mouseenter: () => {
@@ -288,10 +288,10 @@ function _e(e, t) {
 		},
 		keydown: async (n) => {
 			if (n.key !== "Escape" || !t || !e.railExpanded) return;
-			let r = n.currentTarget, a = i(), o = re(r), s = a ? o.indexOf(a) : -1, c = (e) => !!e.closest(".lintje-nav__pin, .lintje-nav__logout");
-			if (e.railExpanded = !1, s < 0 || !c(o[s])) return;
-			let l = (e) => !c(e), u = o.slice(0, s).reverse().find(l) ?? o.slice(s + 1).find(l);
-			await e.updateComplete, u?.isConnected && (e.railRefocus = !0, y(u).focus());
+			let r = n.currentTarget, i = d(), a = re(r), o = i ? a.indexOf(i) : -1, s = (e) => !!e.closest(".lintje-nav__pin, .lintje-nav__logout");
+			if (e.railExpanded = !1, o < 0 || !s(a[o])) return;
+			let c = (e) => !s(e), l = a.slice(0, o).reverse().find(c) ?? a.slice(o + 1).find(c);
+			await e.updateComplete, l?.isConnected && (e.railRefocus = !0, y(l).focus());
 		}
 	};
 }
@@ -301,15 +301,15 @@ var ve = class {
 	#n;
 	constructor(e) {
 		this.#t = null, this.#n = null, this.draw = () => {
-			let e = this.#r, n = this.#e.renderRoot.querySelector(".lintje-nav__thumb");
-			if (this.#i(e), !e || !n) return;
-			let r = e.clientHeight, i = e.scrollHeight;
-			if (i <= r + 1) {
-				n.style.height = "0px", n.style.transform = "";
+			let e = this.#r, t = this.#e.renderRoot.querySelector(".lintje-nav__thumb");
+			if (this.#i(e), !e || !t) return;
+			let n = e.clientHeight, r = e.scrollHeight;
+			if (r <= n + 1) {
+				t.style.height = "0px", t.style.transform = "";
 				return;
 			}
-			let a = Math.max(t(this.#e, "--space-8", 32), Math.round(r * r / i)), o = e.offsetTop + Math.round(e.scrollTop / (i - r) * (r - a));
-			n.style.height = `${a}px`, n.style.transform = `translateY(${o}px)`;
+			let a = Math.max(i(this.#e, "--space-8", 32), Math.round(n * n / r)), o = e.offsetTop + Math.round(e.scrollTop / (r - n) * (n - a));
+			t.style.height = `${a}px`, t.style.transform = `translateY(${o}px)`;
 		}, this.grab = (e) => {
 			let t = e.currentTarget, n = this.#r;
 			if (!n || e.button !== 0) return;
@@ -343,122 +343,122 @@ var ve = class {
 	}
 };
 function A(e) {
-	let t = g("gebruiksvoorwerpen-hangslot-dicht", {
+	let t = v("gebruiksvoorwerpen-hangslot-dicht", {
 		size: 16,
 		label: "Geen toegang"
 	});
-	return t === r ? _`<span class=${e}>geen toegang</span>` : t;
+	return t === m ? h`<span class=${e}>geen toegang</span>` : t;
 }
 var j = (e) => `v${e.replace(/^v/, "")}`, M = (e) => e.label ?? "Vragen of feedback";
-function N(e, t, n, i) {
-	let a = e.data, s = _`<lintje-logo
-    width=${n}
-    src=${a?.logo ?? r}
-    name=${a?.emblem?.name ?? r}
-    alt=${a?.emblem?.label ?? r}
-  ></lintje-logo>`, c = a?.home;
-	return c ? _`<a
-    href=${c}
+function N(e, t, r, i) {
+	let a = e.data, o = h`<lintje-logo
+    width=${r}
+    src=${a?.logo ?? m}
+    name=${a?.emblem?.name ?? m}
+    alt=${a?.emblem?.label ?? m}
+  ></lintje-logo>`, s = a?.home;
+	return s ? h`<a
+    href=${s}
     class=${t}
     aria-label="Naar de startpagina"
     title="Naar de startpagina"
     @click=${(t) => {
-		o(t) && (i?.(), e.follow(c, t));
+		n(t) && (i?.(), e.follow(s, t));
 	}}
-    >${s}</a
-  >` : _`<span class=${t}>${s}</span>`;
+    >${o}</a
+  >` : h`<span class=${t}>${o}</span>`;
 }
-function P(e, t, n) {
-	let i = S(t), a = !i, s = _`
-    ${g(t.icon, {
+function P(e, t, r) {
+	let i = S(t), a = !i, o = h`
+    ${v(t.icon, {
 		size: 20,
 		src: t.iconSrc
 	})}
-    ${n ? _`<span class="lintje-nav__label">${t.label}</span>` : _`<span class="visually-hidden">${t.label}</span>`}
-    ${n && t.metric ? _`<span class="lintje-nav__metric">${t.metric.value}</span>` : r}
-    ${t.noAccess && n ? A("lintje-nav__metric") : r}
-    ${!i && !(t.noAccess && n) ? C(t) : r}
-    ${t.badge ? m({
+    ${r ? h`<span class="lintje-nav__label">${t.label}</span>` : h`<span class="visually-hidden">${t.label}</span>`}
+    ${r && t.metric ? h`<span class="lintje-nav__metric">${t.metric.value}</span>` : m}
+    ${t.noAccess && r ? A("lintje-nav__metric") : m}
+    ${!i && !(t.noAccess && r) ? C(t) : m}
+    ${t.badge ? g({
 		value: t.badge.value,
 		variant: t.badge.tone === "new" ? "label" : "unread",
 		surface: t.badge.tone === "action" && !a ? void 0 : "nav",
 		muted: a,
 		label: t.badge.label,
 		className: `lintje-nav__badge lintje-nav__badge--${t.badge.tone}`
-	}) : r}
+	}) : m}
   `;
-	return i ? _`<a
+	return i ? h`<a
       href=${t.href}
-      class=${h({
+      class=${_({
 		"lintje-nav__item": !0,
 		"is-active": !!t.active
 	})}
-      aria-current=${t.active ? "page" : r}
-      @click=${(n) => {
-		o(n) && e.follow(t.href, n);
+      aria-current=${t.active ? "page" : m}
+      @click=${(r) => {
+		n(r) && e.follow(t.href, r);
 	}}
-      >${s}</a
-    >` : _`<span
-    class=${h({
+      >${o}</a
+    >` : h`<span
+    class=${_({
 		"lintje-nav__item": !0,
 		"is-no-page": !t.noAccess,
 		"is-no-access": !!t.noAccess
 	})}
     aria-disabled="true"
-    title=${n ? r : t.label}
-    >${s}</span
+    title=${r ? m : t.label}
+    >${o}</span
   >`;
 }
 function F(e, t) {
-	let n = e.data, i = n?.menu ?? "pinned", a = e.wide.matches, o = i === "unpinned" || !a, s = !o || e.railExpanded, c = ge(i === "pinned"), l = _e(e, o);
-	return _`
+	let n = e.data, r = n?.menu ?? "pinned", i = e.wide.matches, a = r === "unpinned" || !i, o = !a || e.railExpanded, s = ge(r === "pinned"), c = _e(e, a);
+	return h`
     <nav
-      class=${h({
+      class=${_({
 		"lintje-nav": !0,
-		"lintje-nav--rail": o,
+		"lintje-nav--rail": a,
 		"is-expanded": e.railExpanded
 	})}
       aria-label="Hoofdnavigatie"
-      @mouseenter=${l.mouseenter}
-      @mouseleave=${l.mouseleave}
-      @focusin=${l.focusin}
-      @focusout=${l.focusout}
-      @keydown=${l.keydown}
+      @mouseenter=${c.mouseenter}
+      @mouseleave=${c.mouseleave}
+      @focusin=${c.focusin}
+      @focusout=${c.focusout}
+      @keydown=${c.keydown}
     >
       <div class="lintje-nav__header">
         ${N(e, "lintje-nav__home", 44)}
-        ${s && a ? _`<button
+        ${o && i ? h`<button
               type="button"
-              class=${h({
+              class=${_({
 		"lintje-nav__pin": !0,
-		"lintje-nav__pin--text": c.asText
+		"lintje-nav__pin--text": s.asText
 	})}
-              aria-pressed=${i === "pinned"}
-              aria-label=${c.asText ? r : D}
+              aria-pressed=${r === "pinned"}
+              aria-label=${s.asText ? m : D}
               title=${D}
               @click=${(t) => {
-		e.changeView({ menu: i === "pinned" ? "unpinned" : "pinned" });
+		e.changeView({ menu: r === "pinned" ? "unpinned" : "pinned" });
 		let n = t.currentTarget.closest(".lintje-nav");
 		(!n || !k(n)) && (e.railExpanded = !1);
 	}}
             >
-              ${c.content}
-            </button>` : r}
+              ${s.content}
+            </button>` : m}
       </div>
 
       <div class="lintje-nav__list" @scroll=${e.navScrollbar.draw}>
-        ${t.map((t, n) => _`<div
+        ${t.map((t, n) => h`<div
             class="lintje-nav__group"
-            role=${t.heading ? "group" : r}
-            aria-labelledby=${t.heading ? `lintje-nav-group-${n}` : r}
+            role=${t.heading ? "group" : m}
+            aria-labelledby=${t.heading ? `lintje-nav-group-${n}` : m}
           >
             <!-- One element in both states, with a fixed height: the text heading when
                  expanded, a line in the same spot in the rail. -->
-            ${t.heading ? _`<p class="lintje-nav__section-heading" id=${`lintje-nav-group-${n}`}>
+            ${t.heading ? h`<p class="lintje-nav__section-heading" id=${`lintje-nav-group-${n}`}>
                   <span class="lintje-nav__section-label">${t.heading}</span>
                   <span class="lintje-nav__separator" aria-hidden="true"></span>
-                </p>` : r}
-            ${t.items.map((t) => P(e, t, s))}
+                </p>` : m}
+            ${t.items.map((t) => P(e, t, o))}
           </div>`)}
       </div>
       <!-- The list's scrollbar, right after it: its focus shows the thumb. -->
@@ -468,57 +468,57 @@ function F(e, t) {
         @pointerdown=${e.navScrollbar.grab}
       ></span>
 
-      ${n?.environment ? _`<p class="lintje-nav__environment" title=${n.environment}>
+      ${n?.environment ? h`<p class="lintje-nav__environment" title=${n.environment}>
             <!-- Both texts always in the DOM, like the headings: the short one for the rail. -->
             <span class="lintje-nav__environment-label">${n.environment}</span>
             <span class="lintje-nav__environment-short" aria-hidden="true"
               >${n.environment.slice(0, 3)}</span
             >
-          </p>` : r}
-      ${ye(e, s)}
-      ${n?.user ? _`<div class="lintje-nav__footer">
+          </p>` : m}
+      ${ye(e, o)}
+      ${n?.user ? h`<div class="lintje-nav__footer">
             <span class="lintje-nav__avatar">${n.user.initials}</span>
             <!-- Always in the DOM; the rail hides it with opacity. -->
             <span class="lintje-nav__user">
               <b>${n.user.name}</b>
-              ${n.user.role ? _`<span class="lintje-nav__role">${n.user.role}</span>` : r}
+              ${n.user.role ? h`<span class="lintje-nav__role">${n.user.role}</span>` : m}
             </span>
-            ${n.logout ? be(n.logout, "lintje-nav__logout-button", s) : r}
-          </div>` : r}
+            ${n.logout ? be(n.logout, "lintje-nav__logout-button", o) : m}
+          </div>` : m}
     </nav>
     <!-- Darkens the page while the rail lies over it expanded; purely visual. -->
-    ${o ? _`<div
-          class=${h({
+    ${a ? h`<div
+          class=${_({
 		"lintje-nav__scrim": !0,
 		"is-visible": e.railExpanded
 	})}
           aria-hidden="true"
-        ></div>` : r}
+        ></div>` : m}
   `;
 }
 function ye(e, t) {
-	let n = e.data, i = n?.version ? j(n.version) : null;
+	let n = e.data, r = n?.version ? j(n.version) : null;
 	if (n?.feedback) {
 		let e = M(n.feedback);
-		return _`<a class="lintje-nav__item lintje-nav__feedback" href=${n.feedback.href}>
-      ${g("functioneel-mail", {
+		return h`<a class="lintje-nav__item lintje-nav__feedback" href=${n.feedback.href}>
+      ${v("functioneel-mail", {
 			size: 20,
 			label: t ? void 0 : e
 		})}
-      ${t ? _`<span class="lintje-nav__label">${e}</span>` : r}
-      ${t && i ? _`<span class="lintje-nav__metric lintje-nav__version">${i}</span>` : r}
+      ${t ? h`<span class="lintje-nav__label">${e}</span>` : m}
+      ${t && r ? h`<span class="lintje-nav__metric lintje-nav__version">${r}</span>` : m}
     </a>`;
 	}
-	return i ? _`<p class="lintje-nav__version-row">
-    ${t ? _`<span class="lintje-nav__metric lintje-nav__version">${i}</span>` : r}
-  </p>` : r;
+	return r ? h`<p class="lintje-nav__version-row">
+    ${t ? h`<span class="lintje-nav__metric lintje-nav__version">${r}</span>` : m}
+  </p>` : m;
 }
 function be(e, t, n) {
-	let i = "Afmelden", a = g("functioneel-uitloggen", { size: 18 });
-	return _`<form class="lintje-nav__logout" method="post" action=${e.href} ?hidden=${!n}>
+	let r = "Afmelden", i = v("functioneel-uitloggen", { size: 18 });
+	return h`<form class="lintje-nav__logout" method="post" action=${e.href} ?hidden=${!n}>
     <input type="hidden" name="csrf_token" value=${e.token} />
-    <button type="submit" class=${t} aria-label=${i} title=${i}>
-      ${a === r ? _`<span class="lintje-nav__logout-text">${i}</span>` : a}
+    <button type="submit" class=${t} aria-label=${r} title=${r}>
+      ${i === m ? h`<span class="lintje-nav__logout-text">${r}</span>` : i}
     </button>
   </form>`;
 }
@@ -542,7 +542,7 @@ var xe = [
 	}
 ];
 function I(e, t, n) {
-	return e.mobile.matches ? _`<div class="lintje-share__header">
+	return e.mobile.matches ? h`<div class="lintje-share__header">
     <h2 class="lintje-share__title" id="lintje-sheet-title">${t}</h2>
     <button
       type="button"
@@ -550,52 +550,52 @@ function I(e, t, n) {
       aria-label="${t} sluiten"
       @click=${n}
     >
-      ${g("functioneel-kruis", { size: 16 })}
+      ${v("functioneel-kruis", { size: 16 })}
     </button>
-  </div>` : r;
+  </div>` : m;
 }
 function Se(e) {
 	return [e?.pageName, e?.name].filter(Boolean).join(" – ");
 }
 function L(e) {
-	let t = g(e, { size: 16 });
-	return t === r ? _`<span class="lintje-share__gap" aria-hidden="true"></span>` : t;
+	let t = v(e, { size: 16 });
+	return t === m ? h`<span class="lintje-share__gap" aria-hidden="true"></span>` : t;
 }
 function Ce(e) {
 	let t = e.data, n = e.store.state.titleHidden;
-	return _`<header class="lintje-top-bar">
+	return h`<header class="lintje-top-bar">
     <div class="lintje-top-bar__name">
       <div class="lintje-top-bar__words">
         <!-- The page's one h1. Below 768 px this bar is display: none and the mobile header
              carries it instead. -->
-        ${t?.name ? _`<h1 class="lintje-top-bar__dashboard">${t.name}</h1>` : r}
-        ${t?.pageName ? _`<span
-              class=${h({
+        ${t?.name ? h`<h1 class="lintje-top-bar__dashboard">${t.name}</h1>` : m}
+        ${t?.pageName ? h`<span
+              class=${_({
 		"lintje-top-bar__page": !0,
 		"is-visible": n
 	})}
               aria-hidden=${!n}
               >› ${t.pageName}</span
-            >` : r}
+            >` : m}
       </div>
     </div>
 
     <div class="lintje-top-bar__actions">
-      ${e.toolsCompact ? _`${e.renderSearch()}${e.renderNotifications()}${H(e)}` : we(e)}
+      ${e.toolsCompact ? h`${e.renderSearch()}${e.renderNotifications()}${H(e)}` : we(e)}
     </div>
   </header>`;
 }
 function we(e) {
 	let t = e.data;
-	return _`${t?.search ? _`<lintje-button
+	return h`${t?.search ? h`<lintje-button
           variant="tertiary"
           size="chrome"
           icon="functioneel-zoek"
           keyshortcuts="/"
           @click=${() => e.askSearch()}
           >Zoeken <kbd class="lintje-key lintje-top-bar__key" aria-hidden="true">/</kbd></lintje-button
-        >` : r}${e.renderNotifications()}
-      ${t?.view ? _`<div class="lintje-view" @focusout=${(t) => B(e, t)}>
+        >` : m}${e.renderNotifications()}
+      ${t?.view ? h`<div class="lintje-view" @focusout=${(t) => B(e, t)}>
             <lintje-button
               class="lintje-view__button"
               variant="tertiary"
@@ -606,9 +606,9 @@ function we(e) {
               @click=${() => R(e)}
               >Weergave</lintje-button
             >
-            ${e.viewOpen ? U(e, t.view) : r}
-          </div>` : r}
-      ${t?.share ? _`<div class="lintje-share" @focusout=${(t) => B(e, t)}>
+            ${e.viewOpen ? U(e, t.view) : m}
+          </div>` : m}
+      ${t?.share ? h`<div class="lintje-share" @focusout=${(t) => B(e, t)}>
             <lintje-button
               class="lintje-share__button"
               variant="tertiary"
@@ -619,8 +619,8 @@ function we(e) {
               @click=${() => z(e)}
               >Delen</lintje-button
             >
-            ${e.shareOpen ? K(e) : r}
-          </div>` : r}`;
+            ${e.shareOpen ? K(e) : m}
+          </div>` : m}`;
 }
 function R(e) {
 	e.viewOpen = !e.viewOpen, e.shareOpen = !1, e.openGroup = null;
@@ -632,43 +632,43 @@ function B(e, t) {
 	let n = t.relatedTarget, r = t.currentTarget;
 	!n || e.mobile.matches || r.contains(n) || (r.classList.contains("lintje-view") ? e.viewOpen = !1 : e.shareOpen = !1);
 }
-function V(e, t, n, i, a) {
-	let o = g(t, { size: 20 });
-	return _`<button
+function V(e, t, n, r, i) {
+	let a = v(t, { size: 20 });
+	return h`<button
     type="button"
-    class=${h({
+    class=${_({
 		"lintje-shell__tool": !0,
-		"lintje-shell__tool--text": o === r,
+		"lintje-shell__tool--text": a === m,
 		[n]: !0
 	})}
     aria-label=${e}
     title=${e}
-    aria-expanded=${i}
-    @click=${a}
+    aria-expanded=${r}
+    @click=${i}
   >
-    ${o === r ? e : o}
+    ${a === m ? e : a}
   </button>`;
 }
 function H(e) {
 	let t = e.data;
-	return _`${t?.view ? _`<div class="lintje-view" @focusout=${(t) => B(e, t)}>
+	return h`${t?.view ? h`<div class="lintje-view" @focusout=${(t) => B(e, t)}>
           ${V("Weergave", "functioneel-darkmode", "lintje-view__button", e.viewOpen, () => R(e))}
-          ${e.viewOpen ? U(e, t.view) : r}
-        </div>` : r}${t?.share ? _`<div class="lintje-share" @focusout=${(t) => B(e, t)}>
+          ${e.viewOpen ? U(e, t.view) : m}
+        </div>` : m}${t?.share ? h`<div class="lintje-share" @focusout=${(t) => B(e, t)}>
           ${V("Delen", "functioneel-delen", "lintje-share__button", e.shareOpen, () => z(e))}
-          ${e.shareOpen ? K(e) : r}
-        </div>` : r}`;
+          ${e.shareOpen ? K(e) : m}
+        </div>` : m}`;
 }
 function U(e, t) {
 	let n = () => {
 		e.viewOpen = !1;
-	}, i = e.mobile.matches;
-	return _`
+	}, r = e.mobile.matches;
+	return h`
     <div class="lintje-share__scrim" @click=${n}></div>
     <div
       class="lintje-view__popover"
-      role=${i ? "dialog" : "group"}
-      aria-modal=${i ? "true" : r}
+      role=${r ? "dialog" : "group"}
+      aria-modal=${r ? "true" : m}
       aria-label="Weergave"
       tabindex="-1"
     >
@@ -679,20 +679,20 @@ function U(e, t) {
           ${xe.map((n) => W(n.label, "", n.text, n.value === t.mode, () => e.changeView({ mode: n.value }), !0))}
         </div>
       </div>
-      ${t.layoutChoice ? _`<p class="lintje-share__heading">Menu</p>
+      ${t.layoutChoice ? h`<p class="lintje-share__heading">Menu</p>
               <div class="lintje-view__row">
                 <div class="lintje-toggle-group" role="group" aria-label="Plaats van het menu">
                   ${W("Menu als zijbalk", "", "Zijbalk", e.layout === "side", () => e.changeView({ layout: "side" }), !0)}
                   ${W("Menu boven", "", "Boven", e.layout === "top", () => e.changeView({ layout: "top" }), !0)}
                 </div>
-              </div>` : r}
+              </div>` : m}
       ${Te(e, t)}
     </div>
   `;
 }
 function Te(e, t) {
 	let n = t.themes;
-	return n?.length ? _`<p class="lintje-share__heading" aria-hidden="true">Thema</p>
+	return n?.length ? h`<p class="lintje-share__heading" aria-hidden="true">Thema</p>
     <div class="lintje-view__row">
       <lintje-radio-group
         class="lintje-view__themes"
@@ -702,23 +702,23 @@ function Te(e, t) {
         .value=${t.theme ?? n[0].value}
         @lintje-change=${(t) => e.changeView({ theme: t.detail })}
       ></lintje-radio-group>
-    </div>` : r;
+    </div>` : m;
 }
-function W(e, t, n, i, a, o = !1) {
-	let s = o ? r : g(t, { size: 16 });
-	return _`<button
+function W(e, t, n, r, i, a = !1) {
+	let o = a ? m : v(t, { size: 16 });
+	return h`<button
     type="button"
-    class=${h({
+    class=${_({
 		"lintje-toggle-group__option": !0,
-		"lintje-toggle-group__option--text": s === r,
-		"is-active": i
+		"lintje-toggle-group__option--text": o === m,
+		"is-active": r
 	})}
-    aria-pressed=${i}
+    aria-pressed=${r}
     aria-label=${e}
     title=${e}
-    @click=${a}
+    @click=${i}
   >
-    ${s === r ? n : s}
+    ${o === m ? n : o}
   </button>`;
 }
 function G(e, t) {
@@ -729,7 +729,7 @@ function Ee(e, t = "") {
 	return n ? n + e.slice(e.indexOf(":")) : e;
 }
 function De(e, t) {
-	return _`
+	return h`
     <div class="lintje-share__scrim" @click=${t}></div>
     <div class="lintje-share__popover" role="dialog" aria-labelledby="lintje-share-phone">
       <button type="button" class="lintje-share__item lintje-share__back" @click=${() => G(e, !1)}>
@@ -753,17 +753,17 @@ function K(e) {
 		e.shareOpen = !1;
 	}, n = () => e.closePanel(".lintje-share__button");
 	if (e.sharePhone) return De(e, t);
-	let i = e.mobile.matches;
-	return _`
+	let r = e.mobile.matches;
+	return h`
     <div class="lintje-share__scrim" @click=${t}></div>
     <div
       class="lintje-share__popover"
-      role=${i ? "dialog" : "group"}
-      aria-modal=${i ? "true" : r}
+      role=${r ? "dialog" : "group"}
+      aria-modal=${r ? "true" : m}
       aria-label="Delen"
       tabindex="-1"
     >
-      ${i ? I(e, "Delen", t) : _`<p class="lintje-share__heading">Delen</p>`}
+      ${r ? I(e, "Delen", t) : h`<p class="lintje-share__heading">Delen</p>`}
       <button
         type="button"
         class="lintje-share__item"
@@ -804,7 +804,7 @@ function K(e) {
            "Abonneer: dagelijks om 08:00" needs a mail service, "Alle data (CSV)" an export
            of every tile. Each returns here with its action. -->
       <!-- The footer is the filter bar's "Je ziet" sentence, through the store. -->
-      ${e.store.state.summary ? _`<p class="lintje-share__footer">${e.store.state.summary}</p>` : r}
+      ${e.store.state.summary ? h`<p class="lintje-share__footer">${e.store.state.summary}</p>` : m}
     </div>
   `;
 }
@@ -812,75 +812,75 @@ function K(e) {
 //#region src/components/frame/shell/mobile-header.ts
 function Oe(e) {
 	let t = e.data, n = t?.version && !t.user ? j(t.version) : null;
-	return _`
-    ${t?.environment ? _`<p class="lintje-mobile-menu__environment">${t.environment}</p>` : r}
-    ${t?.feedback ? _`<a class="lintje-mobile-menu__item lintje-mobile-menu__feedback" href=${t.feedback.href}>
-          ${g("functioneel-mail", { size: 20 })}
+	return h`
+    ${t?.environment ? h`<p class="lintje-mobile-menu__environment">${t.environment}</p>` : m}
+    ${t?.feedback ? h`<a class="lintje-mobile-menu__item lintje-mobile-menu__feedback" href=${t.feedback.href}>
+          ${v("functioneel-mail", { size: 20 })}
           <span class="lintje-mobile-menu__label">${M(t.feedback)}</span>
-          ${n ? _`<span class="lintje-mobile-menu__version">${n}</span>` : r}
-        </a>` : n ? _`<p class="lintje-mobile-menu__item lintje-mobile-menu__feedback">
+          ${n ? h`<span class="lintje-mobile-menu__version">${n}</span>` : m}
+        </a>` : n ? h`<p class="lintje-mobile-menu__item lintje-mobile-menu__feedback">
             <span class="lintje-mobile-menu__version">${n}</span>
-          </p>` : r}
+          </p>` : m}
   `;
 }
 function q(e, t) {
-	let n = e.data, i = e.store.state.modifiedCount, a = e.menuOpen, o = "lintje-mobile-header__word";
-	return _`<div
+	let n = e.data, r = e.store.state.modifiedCount, i = e.menuOpen, a = "lintje-mobile-header__word";
+	return h`<div
     class="lintje-mobile-chrome"
     tabindex="-1"
-    role=${a ? "dialog" : r}
-    aria-modal=${a ? "true" : r}
-    aria-label=${a ? "Menu" : r}
+    role=${i ? "dialog" : m}
+    aria-modal=${i ? "true" : m}
+    aria-label=${i ? "Menu" : m}
   >
-    <header class=${h({
+    <header class=${_({
 		"lintje-mobile-header": !0,
 		"is-compact": e.headerCompact
 	})}>
-      ${e.layout === "top" ? n?.name ? _`<h1 class="lintje-mobile-header__title" title=${n.name}>${n.name}</h1>` : r : _`
+      ${e.layout === "top" ? n?.name ? h`<h1 class="lintje-mobile-header__title" title=${n.name}>${n.name}</h1>` : m : h`
               <!-- The page's one h1 below 768 px. The header draws no name — the page
                    header's kicker shows it — so the heading is there for the outline only.
                    At 768 px and up this header is display: none and the top bar has it. -->
-              ${n?.name ? _`<h1 class="visually-hidden">${n.name}</h1>` : r}
+              ${n?.name ? h`<h1 class="visually-hidden">${n.name}</h1>` : m}
               ${N(e, "lintje-mobile-header__home", 32, () => {
 		e.menuOpen = !1;
 	})}
             `}
       <div class="lintje-mobile-header__actions">
         <!-- Open, the menu is a dialog of its own: only its close button stays. -->
-        ${a ? r : _`${e.renderSearch()}${e.renderNotifications()}${e.mobile.matches ? H(e) : r}${e.store.state.hasFilters ? _`<button
+        ${i ? m : h`${e.renderSearch()}${e.renderNotifications()}${e.mobile.matches ? H(e) : m}${e.store.state.hasFilters ? h`<button
                     type="button"
                     class="lintje-mobile-header__button"
                     aria-haspopup="dialog"
                     aria-expanded=${e.store.state.sheetOpen}
-                    @click=${() => u({ sheetOpen: !0 })}
+                    @click=${() => s({ sheetOpen: !0 })}
                   >
-                    ${g("functioneel-filters", { size: 16 })}
-                    <span class=${o}>Filters</span>
-                    ${i > 0 ? m({
-		value: i,
-		label: `${i} aangepast`,
+                    ${v("functioneel-filters", { size: 16 })}
+                    <span class=${a}>Filters</span>
+                    ${r > 0 ? g({
+		value: r,
+		label: `${r} aangepast`,
 		tone: "attention",
 		className: "lintje-mobile-header__badge"
-	}) : r}
-                  </button>` : r}`}
+	}) : m}
+                  </button>` : m}`}
         <!-- One button in both states, so opening the menu leaves the focus
              where it is: only the label and the glyph change places. -->
         <button
           type="button"
           class="lintje-mobile-header__button"
-          aria-expanded=${a}
+          aria-expanded=${i}
           aria-controls="lintje-mobile-menu-panel"
           @click=${() => {
 		e.menuOpen = !e.menuOpen;
 	}}
         >
-          ${a ? _`<span class=${o}>Sluiten</span>${g("functioneel-kruis", { size: 16 })}` : _`${g("functioneel-menu", { size: 16 })}<span class=${o}>Menu</span>`}
+          ${i ? h`<span class=${a}>Sluiten</span>${v("functioneel-kruis", { size: 16 })}` : h`${v("functioneel-menu", { size: 16 })}<span class=${a}>Menu</span>`}
         </button>
       </div>
     </header>
 
-    ${a || e.menuLeaving ? _`<div
-          class=${h({
+    ${i || e.menuLeaving ? h`<div
+          class=${_({
 		"lintje-mobile-menu": !0,
 		"is-leaving": e.menuLeaving
 	})}
@@ -891,51 +891,51 @@ function q(e, t) {
 	}}
         >
           <nav class="lintje-mobile-menu__list" aria-label="Hoofdnavigatie">
-            ${t.map((t, n) => _`<div
-                role=${t.heading ? "group" : r}
-                aria-labelledby=${t.heading ? `lintje-mobile-menu-group-${n}` : r}
+            ${t.map((t, n) => h`<div
+                role=${t.heading ? "group" : m}
+                aria-labelledby=${t.heading ? `lintje-mobile-menu-group-${n}` : m}
               >
-                ${t.heading ? _`<p
+                ${t.heading ? h`<p
                         class="lintje-mobile-menu__heading"
                         id=${`lintje-mobile-menu-group-${n}`}
                       >
                         ${t.heading}
-                      </p>` : r}
+                      </p>` : m}
                 ${t.items.map((t) => ke(e, t))}
               </div>`)}
           </nav>
           ${Oe(e)} ${e.renderUserMenu(!0)}
-        </div>` : r}
+        </div>` : m}
   </div>`;
 }
 function ke(e, t) {
-	let n = _`
-    ${g(t.icon, {
+	let r = h`
+    ${v(t.icon, {
 		size: 20,
 		src: t.iconSrc
 	})}
     <span class="lintje-mobile-menu__label">${t.label}</span>
-    ${t.noAccess ? A("lintje-mobile-menu__meta") : r}
-    ${S(t) || t.noAccess ? r : C(t)}
+    ${t.noAccess ? A("lintje-mobile-menu__meta") : m}
+    ${S(t) || t.noAccess ? m : C(t)}
   `;
-	return S(t) ? _`<a
+	return S(t) ? h`<a
     href=${t.href}
-    class=${h({
+    class=${_({
 		"lintje-mobile-menu__item": !0,
 		"is-active": !!t.active
 	})}
-    aria-current=${t.active ? "page" : r}
-    @click=${(n) => {
-		o(n) && (e.menuOpen = !1, e.follow(t.href, n));
+    aria-current=${t.active ? "page" : m}
+    @click=${(r) => {
+		n(r) && (e.menuOpen = !1, e.follow(t.href, r));
 	}}
-    >${n}</a
-  >` : _`<span class="lintje-mobile-menu__item is-muted" aria-disabled="true"
-      >${n}</span
+    >${r}</a
+  >` : h`<span class="lintje-mobile-menu__item is-muted" aria-disabled="true"
+      >${r}</span
     >`;
 }
 //#endregion
 //#region src/components/frame/shell/header.css?inline
-var Ae = "/* Header of the top layout, drawn by `header.ts` inside the caller's shadow root. */\n\n/* The logo bar sits above the veil, so an open submenu does not dim it. A box wider than a narrow\n   phone is cut at both sides alike, which keeps the ribbon centred. */\n.lintje-logobar {\n  position: relative;\n  z-index: 31;\n  display: flex;\n  align-items: flex-start;\n  justify-content: center;\n  min-height: var(--h-logobar);\n  overflow: hidden;\n  background: var(--color-logobar-bg);\n  color: var(--color-logobar-text);\n}\n.lintje-logobar__home { display: block; flex: none; color: inherit; }\n/* The logo link's ring is drawn inside its box (`focus-inset`): the bar cuts what stands outside\n   its top edge. */\n\n/* The environment outside production: the accent, not a status. */\n.lintje-logobar__environment {\n  position: absolute;\n  top: var(--space-6);\n  right: calc(var(--page-pad-x) + var(--page-gutter));\n  height: var(--h-chip);\n  margin: 0;\n  padding: 0 var(--space-3);\n  background: var(--color-nav-environment-bg);\n  color: var(--color-nav-environment-text);\n  font-size: var(--label-size);\n  font-weight: var(--label-weight);\n  letter-spacing: var(--label-tracking);\n  text-transform: uppercase;\n  line-height: var(--h-chip);\n  white-space: nowrap;\n}\n.lintje-logobar__environment-short { display: none; }\n/* On a phone the organisation's name reaches the right edge: the block shrinks to three letters above it. */\n:where(.lintje-shell.is-phone) .lintje-logobar__environment {\n  top: var(--space-2);\n  right: var(--space-4);\n  height: var(--h-chip-field);\n  line-height: var(--h-chip-field);\n}\n/* The full name stays for a screen reader; the three letters are only seen. */\n:where(.lintje-shell.is-phone) .lintje-logobar__environment-label {\n  position: absolute;\n  width: 1px; height: 1px;\n  margin: -1px;\n  overflow: hidden;\n  clip: rect(0 0 0 0);\n  white-space: nowrap;\n}\n:where(.lintje-shell.is-phone) .lintje-logobar__environment-short { display: inline; }\n\n/* The bar is the submenu's positioning context, which is why a group is not one. Hover, active\n   and edge are set on the bar for what inherits, and on each element at its end, because an\n   element with a shadow root declares the tokens again on its own host. */\n.lintje-navbar,\n.lintje-navbar__end > * {\n  --color-nav-hover: var(--color-navbar-hover);\n  --color-nav-active: var(--color-navbar-active);\n  --color-nav-active-edge: var(--color-navbar-active-edge);\n}\n.lintje-navbar__end > * { --lintje-tool-height: var(--h-navbar); }\n/* The colour runs to the edges; the content keeps to `--page-gutter`. */\n.lintje-navbar {\n  position: relative;\n  z-index: 30;\n  display: flex;\n  align-items: stretch;\n  justify-content: space-between;\n  gap: 0 var(--space-4);\n  height: var(--h-navbar);\n  padding: 0 calc(var(--space-3) + var(--page-gutter)) 0\n    calc(var(--page-pad-x) - var(--space-5) + var(--page-gutter));\n  background: var(--color-nav-bg);\n  color: var(--color-nav-text);\n}\n/* Both widths are measured (`SubmenuController`): neither may depend on whether the entries or\n   \"Menu\" stand there. */\n.lintje-navbar__start { display: flex; flex: 1 1 auto; align-items: stretch; min-width: 0; }\n.lintje-navbar__entries { display: flex; flex: 1 1 0; align-items: stretch; min-width: 0; }\n.lintje-navbar__list { display: flex; flex: none; align-items: stretch; width: max-content; }\n/* Hanging from the bar's end, the overflow falls off the left, where the page gains no scroll. */\n.lintje-navbar__list.is-hidden {\n  position: absolute;\n  top: 0;\n  right: 0;\n  visibility: hidden;\n  pointer-events: none;\n}\n.lintje-navbar__group { display: flex; }\n.lintje-navbar__end { display: flex; flex: none; align-items: center; gap: var(--space-1); }\n/* The orange ring disappears on the theme's fill, so the bar takes `--color-focus-on-theme`. The\n   open entry and the submenu stand on the page's surface and keep the standard ring. */\n.lintje-navbar :focus-visible { outline-color: var(--color-focus-on-theme); }\n.lintje-navbar .lintje-navbar__entry.is-open:focus-visible,\n.lintje-navbar .lintje-navbar__submenu :focus-visible { outline-color: var(--color-focus); }\n\n/* The edge is always there on both sides so the word stays centred; transparent until active. */\n.lintje-navbar__entry {\n  display: inline-flex;\n  align-items: center;\n  gap: var(--space-2);\n  box-sizing: border-box;\n  height: var(--h-navbar);\n  padding: 0 var(--space-5);\n  border-top: var(--nav-edge) solid transparent;\n  border-bottom: var(--nav-edge) solid transparent;\n  color: var(--color-nav-text);\n  font: var(--text-body);\n  white-space: nowrap;\n  text-decoration: none;\n  transition: background var(--dur-hover) var(--ease-in-motion);\n}\n.lintje-navbar__entry:hover:not(.is-unavailable) { background: var(--color-navbar-hover); }\n.lintje-navbar__entry:hover:not(.is-unavailable) .lintje-navbar__label { text-decoration: underline; }\n/* Not bold: the bold cut sets narrower and reads as another size beside its neighbours. */\n.lintje-navbar__entry.is-active {\n  background: var(--color-navbar-active);\n  border-bottom-color: var(--color-navbar-active-edge);\n  color: var(--color-nav-active-text);\n}\n.lintje-navbar__entry.is-open,\n.lintje-navbar__entry.is-open:hover {\n  background: var(--color-bg-surface);\n  border-bottom-color: transparent;\n  color: var(--color-navbar-open-text);\n}\n.lintje-navbar__entry.is-open .lintje-navbar__label { text-decoration: none; }\n.lintje-navbar__entry.is-unavailable { color: var(--color-nav-disabled); cursor: default; }\n\n/* The shadow falls down only: `clip-path` cuts what would fall on the bar, so the open entry and\n   the panel stay one shape. `--lintje-navbar-room` is measured. */\n.lintje-navbar__submenu {\n  position: absolute;\n  top: 100%;\n  left: 0;\n  right: 0;\n  padding: var(--space-8) calc(var(--page-pad-x) + var(--page-gutter)) var(--space-10);\n  background: var(--color-bg-surface);\n  color: var(--color-text-primary);\n  border-bottom: 1px solid var(--color-border-default);\n  box-shadow: var(--shadow-popover);\n  clip-path: inset(0 0 -32px 0);\n  max-height: var(--lintje-navbar-room, calc(100dvh - var(--h-navbar)));\n  box-sizing: border-box;\n  overflow-y: auto;\n  overscroll-behavior: contain;\n}\n.lintje-navbar__heading {\n  margin: var(--space-6) 0 var(--space-3);\n  color: var(--color-text-muted);\n  font-size: var(--label-size);\n  font-weight: var(--label-weight);\n  letter-spacing: var(--label-tracking);\n  text-transform: uppercase;\n}\n.lintje-navbar__heading:first-child { margin-top: 0; }\n.lintje-navbar__pages {\n  display: grid;\n  grid-template-columns: repeat(3, minmax(0, 1fr));\n  gap: var(--space-4);\n  margin: 0;\n  padding: 0;\n  list-style: none;\n  animation:\n    lintje-fade-in var(--dur-popover) linear,\n    lintje-drop-in var(--dur-submenu) ease;\n}\n@media (max-width: 1023px) {\n  .lintje-navbar__pages { grid-template-columns: repeat(2, minmax(0, 1fr)); }\n}\n.lintje-navbar__item { display: flex; }\n\n/* The 1 px edge is always there, so hover moves nothing. */\n.lintje-navbar__page {\n  flex: 1;\n  display: flex;\n  align-items: center;\n  gap: var(--space-3);\n  box-sizing: border-box;\n  min-width: 0;\n  min-height: 4rem;\n  padding: var(--space-3) var(--space-4);\n  background: var(--color-bg-subtle);\n  border: 1px solid transparent;\n  color: var(--color-text-primary);\n  font: var(--text-body);\n  text-decoration: none;\n  transition: border-color var(--dur-hover) var(--ease-in-motion);\n}\n.lintje-navbar__page-text { display: flex; flex: 1; flex-direction: column; min-width: 0; }\n.lintje-navbar__page .lintje-navbar__label { font-weight: 700; }\n.lintje-navbar__metric { color: var(--color-text-muted); font: var(--text-small); }\n.lintje-navbar__metric-value { color: var(--color-text-primary); }\n.lintje-navbar__page:hover:not(.is-unavailable) { border-color: var(--color-accent-line); }\n.lintje-navbar__page:hover:not(.is-unavailable) .lintje-navbar__label { text-decoration: underline; }\n.lintje-navbar__page.is-active {\n  box-shadow: inset var(--nav-edge) 0 0 var(--color-accent-line);\n  color: var(--color-accent-text);\n}\n.lintje-navbar__page.is-unavailable,\n.lintje-navbar__page.is-unavailable .lintje-navbar__metric-value { color: var(--color-text-muted); cursor: default; }\n.lintje-navbar__page.is-no-access .lintje-navbar__label { text-decoration: line-through; }\n\n/* Fixed to the viewport: the header may stand in a box of its own height above the page. */\n.lintje-header-scrim {\n  position: fixed;\n  inset: 0;\n  z-index: 20;\n  background: var(--color-overlay-nav);\n  pointer-events: none;\n  animation: lintje-fade-in var(--dur-scrim) var(--ease-in-motion);\n}\n\n@media print {\n  .lintje-logobar, .lintje-navbar, .lintje-header-scrim { display: none; }\n}\n\n/* Forced colours: the browser drops the fill that carries the active page and the open group. */\n@media (forced-colors: active) {\n  .lintje-navbar { border-bottom: 1px solid CanvasText; }\n  .lintje-navbar__entry.is-active { border-bottom-color: Highlight; }\n  .lintje-navbar__entry.is-open { outline: 1px solid CanvasText; outline-offset: -1px; }\n  .lintje-navbar__entry.is-unavailable,\n  .lintje-navbar__page.is-unavailable { color: GrayText; }\n  .lintje-navbar__page { border-color: CanvasText; }\n  .lintje-navbar__page.is-active { border-left: var(--nav-edge) solid Highlight; }\n  .lintje-navbar__page.is-unavailable { border-color: GrayText; }\n  .lintje-navbar__submenu { border: 1px solid CanvasText; }\n  .lintje-navbar :focus-visible,\n  .lintje-navbar .lintje-navbar__entry.is-open:focus-visible,\n  .lintje-navbar .lintje-navbar__submenu :focus-visible { outline-color: Highlight; }\n}\n", je = ":host { display: block; min-width: 0; min-height: 100vh; }\n:host([hidden]) { display: none; }\n\n/* ------------------------------------------------------------------------ */\n\n/*\n * The page's left edge, for what pins itself to the viewport (the filter bar): the menu's width\n * beside the page, nothing above it. Custom properties reach the slotted content.\n */\n.lintje-shell {\n  --lintje-shell-left: 0px;\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  min-height: inherit;\n  background: var(--color-bg-page);\n  color: var(--color-text-primary);\n}\n/* A specimen's bars (z-index 25–31) would otherwise cover the outer shell's open menus. */\n.lintje-shell.is-nested { isolation: isolate; }\n.lintje-shell--side { --lintje-shell-left: var(--w-rail); flex-direction: row; }\n@media (min-width: 1440px) {\n  .lintje-shell--side:not(.is-unpinned) { --lintje-shell-left: var(--w-nav); }\n}\n.lintje-shell--side:where(.is-phone) { --lintje-shell-left: 0px; }\n.lintje-shell__column {\n  flex: 1;\n  min-width: 0;\n  display: flex;\n  flex-direction: column;\n}\n\n/* \"Naar de inhoud\": hidden until focused. The ring is drawn inside the box (`focus-inset`):\n   outside it would lie on the theme fill (1.89:1, on Defensie 1:1); inside, its neighbour is\n   white. */\n.lintje-shell__skip {\n  position: absolute;\n  top: var(--space-2);\n  left: var(--space-2);\n  z-index: 50;\n  display: inline-flex;\n  align-items: center;\n  min-height: var(--h-touch);\n  padding: var(--space-2) var(--space-4);\n  background: var(--color-bg-surface);\n  color: var(--color-link);\n  font: var(--text-ui);\n  text-decoration: underline;\n  box-shadow: var(--shadow-popover);\n}\n.lintje-shell__skip:not(:focus) {\n  width: 1px;\n  height: 1px;\n  min-height: 0;\n  padding: 0;\n  overflow: hidden;\n  clip-path: inset(50%);\n  white-space: nowrap;\n  box-shadow: none;\n}\n\n/* The main region takes the skip link's focus; it is not a control and draws no ring. */\n.lintje-shell__main {\n  display: flex;\n  flex-direction: column;\n  flex: 1 0 auto;\n  min-width: 0;\n}\n.lintje-shell__main:focus { outline: none; }\n/* Without content the last edge-to-edge part takes the room left: a conversation keeps its\n   question box at the bottom of a short page. */\n.lintje-shell__main.is-bare ::slotted([slot='full']) { flex: 1 0 auto; }\n\n/* The content keeps to the design system's maximum width, as the bars above it do. */\n.lintje-shell__content {\n  display: flex;\n  flex-direction: column;\n  gap: var(--grid-gutter);\n  padding: var(--page-pad-y) calc(var(--page-pad-x) + var(--page-gutter)) var(--space-10);\n}\n.lintje-shell__content[hidden] { display: none; }\n:where(.lintje-shell.is-phone) .lintje-shell__content { padding: var(--space-4) var(--space-4) var(--space-8); gap: var(--space-3); }\n\n/*\n * Top layout. The navigation bar cannot be `sticky`: it would stick inside the header's own box\n * and leave with it, so its slot keeps the bar's height (`--h-navbar`) and the bar is pinned\n * once the slot has left the viewport.\n */\n.lintje-shell__sentinel { height: 1px; margin-bottom: -1px; }\n.lintje-shell__nav { position: relative; z-index: 25; min-height: var(--h-navbar); }\n.lintje-shell__nav.is-stuck .lintje-navbar {\n  position: fixed;\n  top: 0;\n  left: 0;\n  right: 0;\n}\n\n/* Below 768 px the mobile header is the bar under the logo bar; its slot keeps the height. */\n.lintje-shell__mobile-bar { height: var(--h-topbar); }\n.lintje-shell__mobile-pin { position: relative; z-index: 25; }\n.lintje-shell__mobile-bar.is-stuck .lintje-shell__mobile-pin {\n  position: fixed;\n  top: 0;\n  left: 0;\n  right: 0;\n}\n.lintje-shell--top .lintje-mobile-header {\n  position: static;\n  height: var(--h-topbar);\n  align-items: center;\n  gap: var(--space-3);\n}\n.lintje-shell--top .lintje-mobile-header__actions { margin-top: 0; flex: none; }\n.lintje-shell--top .lintje-mobile-menu {\n  position: absolute;\n  inset: 100% 0 auto 0;\n  height: calc(100dvh - var(--h-topbar));\n}\n/* 16 px so two lines fit inside the 56 px bar; longer is cut with an ellipsis. */\n.lintje-mobile-header__title {\n  display: -webkit-box;\n  min-width: 0;\n  overflow: hidden;\n  color: var(--color-nav-text);\n  font: var(--text-dashboard);\n  font-size: 1rem;\n  -webkit-box-orient: vertical;\n  -webkit-line-clamp: 2;\n  line-clamp: 2;\n}\n/* The logo bar already shows the environment. */\n.lintje-shell--top .lintje-mobile-menu__environment { display: none; }\n\n/* The page's one h1; cut before it can push the entries out. */\n.lintje-shell__name {\n  flex: 0 1 auto;\n  min-width: 0;\n  max-width: 24rem;\n  margin: 0;\n  padding: 0 var(--space-5);\n  overflow: hidden;\n  color: var(--color-nav-text);\n  font: var(--text-dashboard);\n  line-height: var(--h-navbar);\n  white-space: nowrap;\n  text-overflow: ellipsis;\n}\n\n/* Bare glyphs in a bar; on the navigation bar their ring is the on-theme one (`header.css`). */\n.lintje-shell__tool {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex: none;\n  width: var(--h-touch);\n  height: var(--lintje-tool-height, var(--h-touch));\n  color: var(--color-nav-text);\n  transition: background var(--dur-hover) var(--ease-in-motion);\n}\n.lintje-shell__tool:hover { background: var(--color-nav-hover); }\n.lintje-shell__tool--text {\n  width: auto;\n  padding: 0 var(--space-3);\n  font: var(--text-ui);\n}\n.lintje-navbar .lintje-shell__tool { height: var(--h-navbar); }\n\n/* The panels hang from the bar, not the tool. They stand on the page's surface: standard ring. */\n.lintje-navbar .lintje-view,\n.lintje-navbar .lintje-share { position: static; }\n.lintje-navbar .lintje-view__popover,\n.lintje-navbar .lintje-share__popover {\n  top: 100%;\n  right: calc(var(--space-3) + var(--page-gutter));\n}\n.lintje-navbar .lintje-view__popover :focus-visible,\n.lintje-navbar .lintje-share__popover :focus-visible { outline-color: var(--color-focus); }\n\n.lintje-shell__sheet-user { border-top: 1px solid var(--color-nav-line); }\n\n@media print { .lintje-shell__skip { display: none; } }\n\n@media (forced-colors: active) {\n  .lintje-navbar .lintje-view__popover :focus-visible,\n  .lintje-navbar .lintje-share__popover :focus-visible { outline-color: Highlight; }\n}\n", Me = "\n/* Dark is its own surface, not an inversion: every colour here is a `--color-nav-*` token. */\n.lintje-nav {\n  width: var(--w-nav);\n  flex: none;\n  /* `align-self: flex-start`: a stretched flex child would make sticky do nothing. */\n  position: sticky;\n  top: 0;\n  align-self: flex-start;\n  height: 100vh;\n  background: var(--color-nav-bg);\n  color: var(--color-nav-text);\n  display: flex;\n  flex-direction: column;\n  overflow: hidden;\n  /* Above the page also while the rail collapses: with a z-index only while expanded,\n     later positioned content (charts, KPI tiles) painted over the shrinking menu. */\n  z-index: 30;\n  box-shadow: var(--shadow-nav);\n  /* The margin mirrors the width growth, so width + margin-right is 72 px at every moment;\n     otherwise the content jumps 216 px for one frame. */\n  transition:\n    width var(--dur-rail) var(--ease-in-motion),\n    margin-right var(--dur-rail) var(--ease-in-motion);\n}\n/* The orange ring disappears into the theme fill: the menu takes the on-theme ring. */\n.lintje-nav :focus-visible { outline-color: var(--color-focus-on-theme); }\n.lintje-nav--rail { width: var(--w-rail); margin-right: 0; }\n/* Expanding lies on top of the content: 288 px drawn, 72 px taken. A negative right margin does\n   that; `fixed` or `absolute` would make the page jump. */\n.lintje-nav--rail.is-expanded {\n  width: var(--w-nav);\n  margin-right: calc(var(--w-rail) - var(--w-nav));\n}\n/* The overlay behind the expanded rail. A sibling of the nav: inside its stacking context it\n   would darken the menu itself. */\n.lintje-nav__scrim {\n  position: fixed;\n  inset: 0;\n  z-index: 29;\n  background: var(--color-overlay-nav);\n  opacity: 0;\n  pointer-events: none;\n  transition: opacity var(--dur-rail) var(--ease-in-motion);\n}\n.lintje-nav__scrim.is-visible { opacity: 1; }\n\n.lintje-nav__header {\n  height: var(--h-nav-head);\n  flex: none;\n  display: flex;\n  align-items: flex-start;\n  justify-content: space-between;\n  padding: 0 var(--space-4) 0 12px;\n}\n\n.lintje-nav__pin {\n  position: relative;\n  width: var(--h-icon-button); height: var(--h-icon-button);\n  margin-top: 12px;\n  display: flex; align-items: center; justify-content: center;\n  color: var(--color-nav-text);\n  background: transparent;\n  flex: none;\n}\n.lintje-nav__pin--text {\n  width: auto;\n  padding: 0 var(--space-2);\n  font-size: 0.875rem;\n  font-weight: 700;\n  white-space: nowrap;\n}\n/* The pin and Afmelden: a transparent hit area takes the target to 48 px. */\n.lintje-nav__pin::after,\n.lintje-nav__logout-button::after {\n  content: '';\n  position: absolute;\n  inset: min(0px, calc((100% - var(--h-target)) / 2));\n}\n.lintje-nav__pin { transition: background var(--dur-hover) var(--ease-in-motion); }\n.lintje-nav__pin:hover { background: var(--color-nav-hover); }\n\n/* No native bar: a styled one takes width in every browser and the rows' fill would stop short\n   of the menu's edge. `NavScrollbar` sizes and places the thumb drawn instead. */\n.lintje-nav__list { flex: 1; overflow-y: auto; overflow-x: hidden; scrollbar-width: none; }\n.lintje-nav__list::-webkit-scrollbar { display: none; }\n.lintje-nav__thumb {\n  position: absolute;\n  top: 0; right: 0;\n  width: var(--space-2);\n  height: 0;\n  /* The menu's second ink reads on its fill and on a hovered row. */\n  background: var(--color-nav-text-sub);\n  opacity: 0;\n  pointer-events: none;\n  transition: opacity var(--dur-hover) var(--ease-in-motion);\n}\n/* There while the pointer is on the menu or a drag lasts; the keyboard's focus shows it at once. */\n.lintje-nav:hover .lintje-nav__thumb,\n.lintje-nav__thumb.is-dragging,\n.lintje-nav__list:focus-within + .lintje-nav__thumb { opacity: 1; pointer-events: auto; }\n.lintje-nav__list:focus-within + .lintje-nav__thumb { transition: none; }\n.lintje-nav__group { display: flex; flex-direction: column; }\n\n/* The same height in both modes, so every row below stays in place when the rail expands. */\n.lintje-nav__section-heading {\n  position: relative;\n  font-size: var(--label-size);\n  font-weight: var(--label-weight);\n  letter-spacing: var(--label-tracking);\n  text-transform: uppercase;\n  color: var(--color-nav-text-sub);\n  padding: 22px var(--space-5) 6px;\n  white-space: nowrap;\n  margin: 0;\n}\n/* A line in the rail, text once it expands: the text fades in 80 ms after the width starts. */\n.lintje-nav__section-label {\n  display: block;\n  transition: opacity 160ms var(--ease-in-motion) 80ms, transform var(--dur-base) var(--ease-in-motion) 80ms;\n}\n.lintje-nav--rail:not(.is-expanded) .lintje-nav__section-label {\n  opacity: 0;\n  transform: translateX(-8px);\n  transition: opacity 60ms var(--ease-out-motion), transform 0ms linear 60ms;\n}\n.lintje-nav__separator {\n  position: absolute;\n  left: 14px; right: 14px;\n  top: 50%;\n  height: 1px;\n  background: var(--color-nav-line);\n  opacity: 0;\n  transform: scaleX(0);\n  transform-origin: left center;\n  transition: transform 140ms var(--ease-out-motion), opacity 0ms linear 140ms;\n}\n.lintje-nav--rail:not(.is-expanded) .lintje-nav__separator {\n  opacity: 1;\n  transform: none;\n  transition: transform 160ms var(--ease-in-motion) 60ms;\n}\n\n/* One row in every mode. A 4 px border + 22 px padding centres the 20 px icon in the 72 px rail,\n   in line with the logo. Expanding animates only the width, so the icon stays in place. */\n.lintje-nav__item {\n  position: relative;\n  height: var(--h-nav-row);\n  display: flex;\n  align-items: center;\n  justify-content: flex-start;\n  gap: var(--space-3);\n  padding: 0 22px;\n  border-left: var(--nav-edge) solid transparent;\n  font-size: 1rem;\n  color: var(--color-nav-text);\n  text-decoration: none;\n  white-space: nowrap;\n  transition: background var(--dur-hover) var(--ease-in-motion);\n}\n.lintje-nav__item:hover:not(.is-no-page):not(.is-no-access) {\n  background: var(--color-nav-hover);\n}\n.lintje-nav__item.is-active {\n  background: var(--color-nav-active);\n  border-left-color: var(--color-nav-active-edge);\n  color: var(--color-nav-active-text);\n  /* Not bold: the bold cut sets narrower and reads as another font size beside its neighbours. */\n}\n.lintje-nav__item:focus-visible { outline-offset: -3px; }\n\n.lintje-nav__item.is-no-page { color: var(--color-nav-disabled); cursor: default; }\n.lintje-nav__item.is-no-access { color: var(--color-nav-disabled); text-decoration: line-through; cursor: not-allowed; }\n\n.lintje-nav__label { flex: 1; overflow: hidden; text-overflow: ellipsis; }\n.lintje-nav--rail.is-expanded .lintje-nav__label,\n.lintje-nav--rail.is-expanded .lintje-nav__metric {\n  animation: lintje-nav-text-in var(--dur-base) var(--ease-in-motion) 80ms backwards;\n}\n@keyframes lintje-nav-text-in { from { opacity: 0; transform: translateX(-8px); } }\n.lintje-nav__metric { font-size: 0.875rem; color: var(--color-nav-text-sub); flex: none; }\n.lintje-nav__item.is-no-access .lintje-nav__metric { text-decoration: none; }\n.lintje-nav__item.is-no-page .lintje-nav__metric { color: var(--color-nav-disabled); }\n\n/* The badge is the primitive's (`badge.css` adopted by the shell). In the rail a word (\"NIEUW\")\n   does not fit: it becomes a dot, so the rail does not overflow. */\n.lintje-nav--rail:not(.is-expanded) .lintje-nav__badge {\n  position: absolute; top: 2px; right: var(--space-1);\n}\n.lintje-nav--rail:not(.is-expanded) .lintje-nav__badge--new {\n  min-width: 8px; width: 8px; height: 8px; padding: 0;\n  border-radius: 999px;\n  font-size: 0; overflow: hidden;\n}\n\n/* Environment band, only outside production. Its fill is the theme's accent, not the attention\n   status: on `defensie` (menu `#E17000`) the accent draws a blue band that reads against it. */\n.lintje-nav__environment {\n  position: relative;\n  flex: none;\n  height: 2rem;\n  margin: 0;\n  background: var(--color-nav-environment-bg);\n  color: var(--color-nav-environment-text);\n  font-size: var(--label-size);\n  font-weight: var(--label-weight);\n  letter-spacing: var(--label-tracking);\n  text-transform: uppercase;\n  text-align: center;\n  line-height: 2rem;\n  white-space: nowrap;\n  overflow: hidden;\n}\n.lintje-nav__environment-label,\n.lintje-nav__environment-short { position: absolute; inset: 0; }\n.lintje-nav__environment-label {\n  transition: opacity 160ms var(--ease-in-motion) 80ms;\n}\n.lintje-nav__environment-short { opacity: 0; transition: opacity 60ms var(--ease-out-motion); }\n.lintje-nav--rail:not(.is-expanded) .lintje-nav__environment-label { opacity: 0; transition: opacity 60ms var(--ease-out-motion); }\n.lintje-nav--rail:not(.is-expanded) .lintje-nav__environment-short { opacity: 1; transition: opacity 160ms var(--ease-in-motion) 80ms; }\n\n.lintje-nav__feedback { flex: none; }\n.lintje-nav__version { font-family: var(--font-mono); font-size: 0.875rem; letter-spacing: .02em; margin-left: auto; }\n/* Without a contact the version gets a row with the menu row's geometry, so the user block does\n   not move; not `.lintje-nav__item`, which carries a hover. */\n.lintje-nav__version-row {\n  flex: none;\n  height: var(--h-nav-row);\n  margin: 0;\n  display: flex;\n  align-items: center;\n  padding: 0 22px;\n  border-left: var(--nav-edge) solid transparent;\n}\n\n/* \"Afmelden\": a real form, because signing out is a POST that leaves the page. */\n/* The form is `hidden` in the rail, not transparent, so the button is out of the tab order. */\n.lintje-nav__logout { flex: none; margin-left: auto; }\n.lintje-nav__logout[hidden] { display: none; }\n.lintje-nav__logout-button {\n  position: relative;\n  width: var(--h-icon-button); height: var(--h-icon-button);\n  display: flex; align-items: center; justify-content: center;\n  /* Quiet at rest; full text colour on hover and focus. */\n  color: var(--color-nav-text-sub);\n  background: transparent;\n  transition: background var(--dur-hover) var(--ease-in-motion);\n}\n.lintje-nav__logout-button:hover,\n.lintje-nav__logout-button:focus-visible { background: var(--color-nav-hover); color: var(--color-nav-text); }\n.lintje-nav__logout-text { font-size: 0.875rem; font-weight: 700; white-space: nowrap; padding: 0 var(--space-2); }\n\n.lintje-nav__footer {\n  flex: none;\n  display: flex; align-items: center; gap: 10px;\n  padding: var(--space-4) var(--space-5) var(--space-5) var(--space-4);\n  border-top: 1px solid var(--color-nav-line);\n  font-size: 1rem;\n}\n/* As high as name and role together (two 1.25rem lines); the left padding keeps it centred in\n   the rail. */\n.lintje-nav__avatar {\n  width: 2.5rem; height: 2.5rem; flex: none;\n  display: flex; align-items: center; justify-content: center;\n  border-radius: var(--radius-round);\n  background: var(--color-nav-avatar-bg);\n  color: var(--color-nav-avatar-text);\n  font-size: 1rem; font-weight: 700;\n}\n/* Name and role fade and slide in like the headings; `nowrap` keeps one line. */\n.lintje-nav__user {\n  display: flex; flex-direction: column; line-height: 1.25rem;\n  min-width: 0; flex: 1 1 auto; white-space: nowrap;\n  transition: opacity 160ms var(--ease-in-motion) 80ms, transform var(--dur-base) var(--ease-in-motion) 80ms;\n}\n.lintje-nav--rail:not(.is-expanded) .lintje-nav__user { opacity: 0; transform: translateX(-8px); transition: none; }\n.lintje-nav__user > b,\n.lintje-nav__role { overflow: hidden; text-overflow: ellipsis; }\n.lintje-nav__role { font-size: 0.875rem; color: var(--color-nav-text-sub); }\n\n:where(.lintje-shell.is-phone) .lintje-nav,\n:where(.lintje-shell.is-phone) .lintje-nav__scrim { display: none; }\n\n/* An emblem's black, if it has any, draws in the menu's text colour (`currentColor`). */\n.lintje-nav__home { display: block; flex: none; color: var(--color-nav-text); }\n\n\n@media print { .lintje-nav, .lintje-nav__scrim { display: none; } }\n\n/* Forced colours: the active row is a fill and a 4 px edge; the fill is dropped and the edge\n   turns Highlight. A row without a page or access is GrayText. The ring is Highlight. The\n   shadow is dropped, so an outline keeps the menu's edge against the page. */\n@media (forced-colors: active) {\n  .lintje-nav { outline: 1px solid CanvasText; }\n  .lintje-nav :focus-visible { outline-color: Highlight; }\n  .lintje-nav__item { border-left-color: Canvas; }\n  .lintje-nav__item.is-active { border-left-color: Highlight; }\n  .lintje-nav__item.is-no-page,\n  .lintje-nav__item.is-no-access { color: GrayText; }\n  .lintje-nav__avatar { border: 1px solid CanvasText; }\n  .lintje-nav__thumb { forced-color-adjust: none; background: CanvasText; }\n}\n", J = "\n/* One region: the open menu's dialog and the box its focus trap keeps Tab inside. It shows no\n   ring when the trap pulls back stray focus. The region sticks, not the header: a sticky box\n   stays inside its parent, and this one is as tall as the header. */\n.lintje-mobile-chrome { flex: none; position: sticky; top: 0; z-index: 25; }\n.lintje-mobile-chrome:focus { outline: none; }\n\n.lintje-mobile-header {\n  display: none;\n  height: var(--h-mobile-header);\n  flex: none;\n  background: var(--color-nav-bg);\n  align-items: flex-start;\n  justify-content: space-between;\n  padding: 0 var(--space-4);\n  /* Tools that do not fit must not widen the page, or a phone zooms out and they seem to fit\n     (`headerCompact`). Sideways only: the focus ring stays inside the padding. */\n  overflow-x: clip;\n}\n:where(.lintje-shell.is-phone) .lintje-mobile-header { display: flex; }\n/* On the theme fill the ring is the on-theme one, as in the desktop menu. */\n.lintje-mobile-header :focus-visible,\n.lintje-mobile-menu :focus-visible { outline-color: var(--color-focus-on-theme); }\n/* \"Weergave\" and \"Delen\" open from this header as sheets on the page's surface: standard ring. */\n.lintje-mobile-header .lintje-view__popover :focus-visible,\n.lintje-mobile-header .lintje-share__popover :focus-visible { outline-color: var(--color-focus); }\n\n.lintje-mobile-header__actions { margin-top: var(--space-3); display: flex; gap: var(--space-2); }\n.lintje-mobile-header__button {\n  height: var(--h-touch);\n  padding: 0 var(--space-3);\n  background: var(--color-nav-active);\n  color: var(--color-nav-text);\n  border: 1px solid var(--color-nav-line);\n  font-size: 0.875rem;\n  font-weight: 700;\n  display: flex; align-items: center; justify-content: center; gap: var(--space-2);\n  /* Square when only the glyph shows (`headerCompact`). */\n  min-width: var(--h-touch);\n}\n/* Without room the words are read, not shown: the glyph and the badge stay. */\n.lintje-mobile-header.is-compact .lintje-mobile-header__word {\n  position: absolute;\n  width: 1px; height: 1px;\n  margin: -1px;\n  overflow: hidden;\n  clip: rect(0 0 0 0);\n  white-space: nowrap;\n}\n/* The modified-filters count is the primitive badge's `attention` tone: near-black on the\n   orange, because white on #E17000 is 3.2:1. */\n\n.lintje-mobile-menu {\n  position: fixed;\n  inset: var(--h-mobile-header) 0 0 0;\n  z-index: 24;\n  background: var(--color-nav-bg);\n  color: var(--color-nav-text);\n  display: flex;\n  flex-direction: column;\n  overflow-y: auto;\n  animation: lintje-menu-in var(--dur-sheet) var(--ease-in-motion);\n}\n.lintje-mobile-menu.is-leaving {\n  animation: lintje-menu-out var(--dur-sheet) var(--ease-out-motion) forwards;\n  pointer-events: none;\n}\n.lintje-mobile-menu__list { flex: 1; padding-bottom: var(--space-4); }\n.lintje-mobile-menu__heading {\n  font-size: var(--label-size); font-weight: var(--label-weight);\n  letter-spacing: var(--label-tracking); text-transform: uppercase;\n  color: var(--color-nav-text-sub);\n  padding: 22px var(--space-5) 6px;\n}\n.lintje-mobile-menu__item {\n  height: var(--h-touch);\n  display: flex; align-items: center; gap: var(--space-3);\n  padding: 0 var(--space-5);\n  border-left: var(--nav-edge) solid transparent;\n  color: var(--color-nav-text);\n  font-size: 1rem;\n  text-decoration: none;\n}\n.lintje-mobile-menu__item.is-active {\n  background: var(--color-nav-active);\n  border-left-color: var(--color-nav-active-edge);\n  color: var(--color-nav-active-text);\n  /* Not bold: the bold cut sets narrower and reads as another font size beside its neighbours. */\n}\n.lintje-mobile-menu__item.is-muted { color: var(--color-nav-disabled); }\n.lintje-mobile-menu__label { flex: 1; }\n.lintje-mobile-menu__meta { font-size: 0.875rem; color: var(--color-nav-disabled); flex: none; }\n/* The environment band and the feedback row with the version: below 768 px there is no rail,\n   and a page's own footer is the host's, so this is the only place they can stand. */\n.lintje-mobile-menu__environment {\n  flex: none;\n  height: 2rem;\n  margin: 0;\n  background: var(--color-nav-environment-bg);\n  color: var(--color-nav-environment-text);\n  font-size: var(--label-size);\n  font-weight: var(--label-weight);\n  letter-spacing: var(--label-tracking);\n  text-transform: uppercase;\n  text-align: center;\n  line-height: 2rem;\n  white-space: nowrap;\n  overflow: hidden;\n}\n.lintje-mobile-menu__feedback { flex: none; margin: 0; }\n.lintje-mobile-menu__version {\n  flex: none;\n  margin-left: auto;\n  font-family: var(--font-mono); font-size: 0.875rem; letter-spacing: .02em;\n  color: var(--color-nav-text-sub);\n}\n\n.lintje-mobile-header__home { display: block; flex: none; color: var(--color-nav-text); }\n\n\n@media print { .lintje-mobile-header, .lintje-mobile-menu { display: none; } }\n\n/* Forced colours: the active row's 4 px edge is Highlight, a muted row GrayText. */\n@media (forced-colors: active) {\n  .lintje-mobile-header :focus-visible,\n  .lintje-mobile-menu :focus-visible { outline-color: Highlight; }\n  .lintje-mobile-header .lintje-view__popover :focus-visible,\n  .lintje-mobile-header .lintje-share__popover :focus-visible { outline-color: Highlight; }\n  .lintje-mobile-menu__item { border-left-color: Canvas; }\n  .lintje-mobile-menu__item.is-active { border-left-color: Highlight; }\n  .lintje-mobile-menu__item.is-muted { color: GrayText; }\n}\n", Ne = "/* The bar, the two toggle groups and the share popover are all drawn by the shell itself. */\n\n.lintje-top-bar {\n  height: var(--h-topbar);\n  flex: none;\n  position: sticky;\n  top: 0;\n  z-index: 20;\n  background: var(--color-bg-surface);\n  border-bottom: 1px solid var(--color-border-default);\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 0 calc(var(--space-6) + var(--page-gutter));\n}\n/* The name and the page's name share a baseline and stand in the middle of the bar as one. */\n.lintje-top-bar__name { display: flex; align-items: center; gap: var(--space-1); min-width: 0; }\n.lintje-top-bar__words { display: flex; align-items: baseline; gap: 6px; min-width: 0; }\n/* The dashboard's name is a word, not a line, so it uses `--color-accent-text`. */\n.lintje-top-bar__dashboard {\n  font: var(--text-dashboard);\n  color: var(--color-accent-text);\n  white-space: nowrap;\n}\n.lintje-top-bar__page {\n  font-size: 1rem;\n  color: var(--color-text-muted);\n  opacity: 0;\n  transition: opacity var(--dur-hover) var(--ease-in-motion);\n  white-space: nowrap;\n}\n.lintje-top-bar__page.is-visible { opacity: 1; }\n\n.lintje-top-bar__actions { display: flex; flex: none; align-items: center; gap: var(--space-3); }\n.lintje-top-bar__key { margin-left: var(--space-1); }\n/* The tools of the navigation bar stand here on the page's surface; an element with a shadow\n   root declares the tokens again on its own host, so they are set on each one too. */\n.lintje-top-bar__actions,\n.lintje-top-bar__actions > * {\n  --color-nav-text: var(--color-text-primary);\n  --color-nav-hover: var(--color-bg-subtle);\n  --lintje-tool-height: var(--h-button-chrome);\n}\n\n.lintje-toggle-group {\n  display: flex;\n  height: var(--h-button-chrome);\n  border: 1px solid var(--color-border-strong);\n}\n.lintje-toggle-group__option {\n  position: relative;\n  width: var(--h-button-chrome);\n  display: flex; align-items: center; justify-content: center;\n  color: var(--color-text-primary);\n  transition: background var(--dur-hover) var(--ease-in-motion);\n}\n/* Without a file for its icon the option shows its short Dutch word instead.\n   The group keeps its height; only the option gets as wide as the word. */\n.lintje-toggle-group__option--text {\n  width: auto;\n  padding: 0 var(--space-3);\n  font-size: 0.875rem;\n  font-weight: 700;\n  white-space: nowrap;\n}\n.lintje-toggle-group__option:hover { background: var(--color-bg-subtle); }\n/* A 40 px option reaches the 48 px target through a transparent hit area 4 px above and\n   below; the options of a group touch, so it does not reach sideways. */\n.lintje-toggle-group__option::after {\n  content: '';\n  position: absolute;\n  inset: min(0px, calc((100% - var(--h-target)) / 2)) 0;\n}\n/* The chosen half has no border of its own — the group draws one around both —\n   so the primary-fill border is an inset ring: the same\n   1 px line, drawn inside the box, so neither half moves a pixel. Invisible in\n   light (the token is the primary there), the tint in dark. */\n.lintje-toggle-group__option.is-active {\n  background: var(--color-action-primary);\n  color: var(--color-action-primary-text);\n  box-shadow: inset 0 0 0 1px var(--color-action-primary-border);\n}\n\n/* The panels' side inset: their own as they hang from a tool, the filter sheet's as a sheet. */\n.lintje-view__popover,\n.lintje-share__popover { --lintje-panel-inset: 14px; }\n\n/* \"Weergave\": the share menu's panel, with a group of words under each heading. */\n.lintje-view { position: relative; }\n/* A panel sets the text colour of its surface: on the navigation bar it would take the bar's. */\n.lintje-view__popover {\n  position: absolute;\n  right: 0; top: calc(100% + 4px);\n  z-index: 41;\n  background: var(--color-bg-surface);\n  color: var(--color-text-primary);\n  border: 1px solid var(--color-border-popover);\n  box-shadow: var(--shadow-popover);\n  padding: var(--space-2) 0;\n  animation: lintje-popover-in var(--dur-popover) var(--ease-in-motion);\n}\n.lintje-view__row { display: flex; padding: var(--space-1) var(--lintje-panel-inset) var(--space-2); }\n/* A theme's name stays one line; the panel grows to it. */\n.lintje-view__themes { white-space: nowrap; }\n\n.lintje-share { position: relative; }\n.lintje-share__scrim { position: fixed; inset: 0; z-index: 40; }\n.lintje-share__popover {\n  position: absolute;\n  right: 0; top: calc(100% + 4px);\n  z-index: 41;\n  width: 18.75rem;\n  background: var(--color-bg-surface);\n  color: var(--color-text-primary);\n  border: 1px solid var(--color-border-popover);\n  box-shadow: var(--shadow-popover);\n  padding: var(--space-2) 0;\n  animation: lintje-popover-in var(--dur-popover) var(--ease-in-motion);\n}\n.lintje-share__heading {\n  font-size: var(--label-size); font-weight: var(--label-weight);\n  letter-spacing: var(--label-tracking); text-transform: uppercase;\n  color: var(--color-text-muted);\n  padding: var(--space-3) var(--lintje-panel-inset) 4px;\n}\n.lintje-share__item {\n  width: 100%;\n  display: flex; align-items: center; gap: 10px;\n  min-height: var(--h-target);\n  padding: 0 var(--lintje-panel-inset);\n  font-size: 1rem;\n  text-align: left;\n  color: var(--color-text-primary);\n}\n.lintje-share__item:hover { background: var(--color-bg-subtle); }\n/* Where an icon is still missing: the label keeps the column's text edge. */\n.lintje-share__gap { width: 16px; flex: none; }\n.lintje-share__qr {\n  display: flex; flex-direction: column; align-items: center; gap: var(--space-3);\n  padding: var(--space-2) var(--lintje-panel-inset) var(--space-3);\n}\n.lintje-share__hint { text-align: center; }\n.lintje-share__code { align-self: stretch; }\n.lintje-share__footer {\n  font: var(--text-meta); color: var(--color-text-muted);\n  padding: var(--space-2) var(--lintje-panel-inset) 0;\n  margin-top: var(--space-2);\n  border-top: 1px solid var(--color-border-default);\n}\n\n:where(.lintje-shell.is-phone) .lintje-top-bar { display: none; }\n\n/* Below 768 px \"Weergave\" and \"Delen\" open from below, as the filter sheet does. A phone has its\n   own way to a phone, so the QR code is not offered there. */\n:where(.lintje-shell.is-phone) .lintje-share__scrim {\n  z-index: 60;\n  background: var(--color-overlay-page);\n  animation: lintje-fade-in var(--dur-scrim) var(--ease-in-motion);\n}\n:where(.lintje-shell.is-phone) .lintje-view__popover,\n:where(.lintje-shell.is-phone) .lintje-share__popover,\n:where(.lintje-shell.is-phone) .lintje-navbar .lintje-view__popover,\n:where(.lintje-shell.is-phone) .lintje-navbar .lintje-share__popover {\n  position: fixed;\n  inset: auto 0 0 0;\n  z-index: 61;\n  width: auto;\n  max-height: 88vh;\n  overflow-y: auto;\n  padding-bottom: var(--space-4);\n  border: 0;\n  border-top: 1px solid var(--color-border-popover);\n  box-shadow: none;\n  animation: lintje-sheet-in var(--dur-sheet) var(--ease-in-motion);\n}\n:where(.lintje-shell.is-phone) .lintje-view__popover,\n:where(.lintje-shell.is-phone) .lintje-share__popover { padding-top: 0; --lintje-panel-inset: var(--space-4); }\n:where(.lintje-shell.is-phone) .lintje-view__popover:focus,\n:where(.lintje-shell.is-phone) .lintje-share__popover:focus { outline: none; }\n:where(.lintje-shell.is-phone) .lintje-share__phone { display: none; }\n/* The filter sheet's head; it stays while the sheet scrolls. */\n.lintje-share__header {\n  position: sticky;\n  top: 0;\n  z-index: 1;\n  display: flex; align-items: center; gap: var(--space-2);\n  margin-bottom: var(--space-2);\n  padding: var(--space-4);\n  background: var(--color-bg-surface);\n  border-bottom: 1px solid var(--color-border-popover);\n}\n.lintje-share__title { flex: 1; margin: 0; font: var(--text-h2); }\n\n\n/* On paper the chrome is not part of the page. */\n@media print { .lintje-top-bar { display: none; } }\n\n/* Forced colours: the chosen half is carried by its fill and an inset\n   ring, both of which the browser drops. Every half takes a 1 px border inside\n   its own box — Canvas at rest, Highlight when chosen — so nothing moves. */\n@media (forced-colors: active) {\n  .lintje-toggle-group__option { border: 1px solid Canvas; }\n  .lintje-toggle-group__option.is-active { border-color: Highlight; }\n}\n", Y = "lintje-shell-main", X = (e) => "links" in e, Z = (e) => e?.navigation?.flatMap((e) => X(e) ? e.links : [e]).find((e) => e.active);
+var Ae = "/* Header of the top layout, drawn by `header.ts` inside the caller's shadow root. */\n\n/* The logo bar sits above the veil, so an open submenu does not dim it. A box wider than a narrow\n   phone is cut at both sides alike, which keeps the ribbon centred. */\n.lintje-logobar {\n  position: relative;\n  z-index: 31;\n  display: flex;\n  align-items: flex-start;\n  justify-content: center;\n  min-height: var(--h-logobar);\n  overflow: hidden;\n  background: var(--color-logobar-bg);\n  color: var(--color-logobar-text);\n}\n.lintje-logobar__home { display: block; flex: none; color: inherit; }\n/* The logo link's ring is drawn inside its box (`focus-inset`): the bar cuts what stands outside\n   its top edge. */\n\n/* The environment outside production: the accent, not a status. */\n.lintje-logobar__environment {\n  position: absolute;\n  top: var(--space-6);\n  right: calc(var(--page-pad-x) + var(--page-gutter));\n  height: var(--h-chip);\n  margin: 0;\n  padding: 0 var(--space-3);\n  background: var(--color-nav-environment-bg);\n  color: var(--color-nav-environment-text);\n  font-size: var(--label-size);\n  font-weight: var(--label-weight);\n  letter-spacing: var(--label-tracking);\n  text-transform: uppercase;\n  line-height: var(--h-chip);\n  white-space: nowrap;\n}\n.lintje-logobar__environment-short { display: none; }\n/* On a phone the organisation's name reaches the right edge: the block shrinks to three letters above it. */\n:where(.lintje-shell.is-phone) .lintje-logobar__environment {\n  top: var(--space-2);\n  right: var(--space-4);\n  height: var(--h-chip-field);\n  line-height: var(--h-chip-field);\n}\n/* The full name stays for a screen reader; the three letters are only seen. */\n:where(.lintje-shell.is-phone) .lintje-logobar__environment-label {\n  position: absolute;\n  width: 1px; height: 1px;\n  margin: -1px;\n  overflow: hidden;\n  clip: rect(0 0 0 0);\n  white-space: nowrap;\n}\n:where(.lintje-shell.is-phone) .lintje-logobar__environment-short { display: inline; }\n\n/* The bar is the submenu's positioning context, which is why a group is not one. Hover, active\n   and edge are set on the bar for what inherits, and on each element at its end, because an\n   element with a shadow root declares the tokens again on its own host. */\n.lintje-navbar,\n.lintje-navbar__end > * {\n  --color-nav-hover: var(--color-navbar-hover);\n  --color-nav-active: var(--color-navbar-active);\n  --color-nav-active-edge: var(--color-navbar-active-edge);\n}\n.lintje-navbar__end > * { --lintje-tool-height: var(--h-navbar); }\n/* The colour runs to the edges; the content keeps to `--page-gutter`. */\n.lintje-navbar {\n  position: relative;\n  z-index: 30;\n  display: flex;\n  align-items: stretch;\n  justify-content: space-between;\n  gap: 0 var(--space-4);\n  height: var(--h-navbar);\n  padding: 0 calc(var(--space-3) + var(--page-gutter)) 0\n    calc(var(--page-pad-x) - var(--space-5) + var(--page-gutter));\n  background: var(--color-nav-bg);\n  color: var(--color-nav-text);\n}\n/* Both widths are measured (`SubmenuController`): neither may depend on whether the entries or\n   \"Menu\" stand there. */\n.lintje-navbar__start { display: flex; flex: 1 1 auto; align-items: stretch; min-width: 0; }\n.lintje-navbar__entries { display: flex; flex: 1 1 0; align-items: stretch; min-width: 0; }\n.lintje-navbar__list { display: flex; flex: none; align-items: stretch; width: max-content; }\n/* Hanging from the bar's end, the overflow falls off the left, where the page gains no scroll. */\n.lintje-navbar__list.is-hidden {\n  position: absolute;\n  top: 0;\n  right: 0;\n  visibility: hidden;\n  pointer-events: none;\n}\n.lintje-navbar__group { display: flex; }\n.lintje-navbar__end { display: flex; flex: none; align-items: center; gap: var(--space-1); }\n/* The orange ring disappears on the theme's fill, so the bar takes `--color-focus-on-theme`. The\n   open entry and the submenu stand on the page's surface and keep the standard ring. */\n.lintje-navbar :focus-visible { outline-color: var(--color-focus-on-theme); }\n.lintje-navbar .lintje-navbar__entry.is-open:focus-visible,\n.lintje-navbar .lintje-navbar__submenu :focus-visible { outline-color: var(--color-focus); }\n\n/* The edge is always there on both sides so the word stays centred; transparent until active. */\n.lintje-navbar__entry {\n  display: inline-flex;\n  align-items: center;\n  gap: var(--space-2);\n  box-sizing: border-box;\n  height: var(--h-navbar);\n  padding: 0 var(--space-5);\n  border-top: var(--nav-edge) solid transparent;\n  border-bottom: var(--nav-edge) solid transparent;\n  color: var(--color-nav-text);\n  font: var(--text-body);\n  white-space: nowrap;\n  text-decoration: none;\n  transition: background var(--dur-hover) var(--ease-in-motion);\n}\n.lintje-navbar__entry:hover:not(.is-unavailable) { background: var(--color-navbar-hover); }\n.lintje-navbar__entry:hover:not(.is-unavailable) .lintje-navbar__label { text-decoration: underline; }\n/* Not bold: the bold cut sets narrower and reads as another size beside its neighbours. */\n.lintje-navbar__entry.is-active {\n  background: var(--color-navbar-active);\n  border-bottom-color: var(--color-navbar-active-edge);\n  color: var(--color-nav-active-text);\n}\n.lintje-navbar__entry.is-open,\n.lintje-navbar__entry.is-open:hover {\n  background: var(--color-bg-surface);\n  border-bottom-color: transparent;\n  color: var(--color-navbar-open-text);\n}\n.lintje-navbar__entry.is-open .lintje-navbar__label { text-decoration: none; }\n.lintje-navbar__entry.is-unavailable { color: var(--color-nav-disabled); cursor: default; }\n\n/* The shadow falls down only: `clip-path` cuts what would fall on the bar, so the open entry and\n   the panel stay one shape. `--lintje-navbar-room` is measured. */\n.lintje-navbar__submenu {\n  position: absolute;\n  top: 100%;\n  left: 0;\n  right: 0;\n  padding: var(--space-8) calc(var(--page-pad-x) + var(--page-gutter)) var(--space-10);\n  background: var(--color-bg-surface);\n  color: var(--color-text-primary);\n  border-bottom: 1px solid var(--color-border-default);\n  box-shadow: var(--shadow-popover);\n  clip-path: inset(0 0 -32px 0);\n  max-height: var(--lintje-navbar-room, calc(100dvh - var(--h-navbar)));\n  box-sizing: border-box;\n  overflow-y: auto;\n  overscroll-behavior: contain;\n}\n.lintje-navbar__heading {\n  margin: var(--space-6) 0 var(--space-3);\n  color: var(--color-text-muted);\n  font-size: var(--label-size);\n  font-weight: var(--label-weight);\n  letter-spacing: var(--label-tracking);\n  text-transform: uppercase;\n}\n.lintje-navbar__heading:first-child { margin-top: 0; }\n.lintje-navbar__pages {\n  display: grid;\n  grid-template-columns: repeat(3, minmax(0, 1fr));\n  gap: var(--space-4);\n  margin: 0;\n  padding: 0;\n  list-style: none;\n  animation:\n    lintje-fade-in var(--dur-popover) linear,\n    lintje-drop-in var(--dur-submenu) ease;\n}\n@media (max-width: 1023px) {\n  .lintje-navbar__pages { grid-template-columns: repeat(2, minmax(0, 1fr)); }\n}\n.lintje-navbar__item { display: flex; }\n\n/* The 1 px edge is always there, so hover moves nothing. */\n.lintje-navbar__page {\n  flex: 1;\n  display: flex;\n  align-items: center;\n  gap: var(--space-3);\n  box-sizing: border-box;\n  min-width: 0;\n  min-height: 4rem;\n  padding: var(--space-3) var(--space-4);\n  background: var(--color-bg-subtle);\n  border: 1px solid transparent;\n  color: var(--color-text-primary);\n  font: var(--text-body);\n  text-decoration: none;\n  transition: border-color var(--dur-hover) var(--ease-in-motion);\n}\n.lintje-navbar__page-text { display: flex; flex: 1; flex-direction: column; min-width: 0; }\n.lintje-navbar__page .lintje-navbar__label { font-weight: 700; }\n.lintje-navbar__metric { color: var(--color-text-muted); font: var(--text-small); }\n.lintje-navbar__metric-value { color: var(--color-text-primary); }\n.lintje-navbar__page:hover:not(.is-unavailable) { border-color: var(--color-accent-line); }\n.lintje-navbar__page:hover:not(.is-unavailable) .lintje-navbar__label { text-decoration: underline; }\n.lintje-navbar__page.is-active {\n  box-shadow: inset var(--nav-edge) 0 0 var(--color-accent-line);\n  color: var(--color-accent-text);\n}\n.lintje-navbar__page.is-unavailable,\n.lintje-navbar__page.is-unavailable .lintje-navbar__metric-value { color: var(--color-text-muted); cursor: default; }\n.lintje-navbar__page.is-no-access .lintje-navbar__label { text-decoration: line-through; }\n\n/* Fixed to the viewport: the header may stand in a box of its own height above the page. */\n.lintje-header-scrim {\n  position: fixed;\n  inset: 0;\n  z-index: 20;\n  background: var(--color-overlay-nav);\n  pointer-events: none;\n  animation: lintje-fade-in var(--dur-scrim) var(--ease-in-motion);\n}\n\n@media print {\n  .lintje-logobar, .lintje-navbar, .lintje-header-scrim { display: none; }\n}\n\n/* Forced colours: the browser drops the fill that carries the active page and the open group. */\n@media (forced-colors: active) {\n  .lintje-navbar { border-bottom: 1px solid CanvasText; }\n  .lintje-navbar__entry.is-active { border-bottom-color: Highlight; }\n  .lintje-navbar__entry.is-open { outline: 1px solid CanvasText; outline-offset: -1px; }\n  .lintje-navbar__entry.is-unavailable,\n  .lintje-navbar__page.is-unavailable { color: GrayText; }\n  .lintje-navbar__page { border-color: CanvasText; }\n  .lintje-navbar__page.is-active { border-left: var(--nav-edge) solid Highlight; }\n  .lintje-navbar__page.is-unavailable { border-color: GrayText; }\n  .lintje-navbar__submenu { border: 1px solid CanvasText; }\n  .lintje-navbar :focus-visible,\n  .lintje-navbar .lintje-navbar__entry.is-open:focus-visible,\n  .lintje-navbar .lintje-navbar__submenu :focus-visible { outline-color: Highlight; }\n}\n", je = ":host { display: block; min-width: 0; min-height: 100vh; }\n:host([hidden]) { display: none; }\n/* A short page is one sheet, not one sheet with the rest left empty. */\n@media print { :host { min-height: 0; } }\n\n/* ------------------------------------------------------------------------ */\n\n/*\n * The page's left edge, for what pins itself to the viewport (the filter bar): the menu's width\n * beside the page, nothing above it. Custom properties reach the slotted content.\n */\n.lintje-shell {\n  --lintje-shell-left: 0px;\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  min-height: inherit;\n  background: var(--color-bg-page);\n  color: var(--color-text-primary);\n}\n/* A specimen's bars (z-index 25–31) would otherwise cover the outer shell's open menus. */\n.lintje-shell.is-nested { isolation: isolate; }\n.lintje-shell--side { --lintje-shell-left: var(--w-rail); flex-direction: row; }\n@media (min-width: 1440px) {\n  .lintje-shell--side:not(.is-unpinned) { --lintje-shell-left: var(--w-nav); }\n}\n.lintje-shell--side:where(.is-phone) { --lintje-shell-left: 0px; }\n.lintje-shell__column {\n  flex: 1;\n  min-width: 0;\n  display: flex;\n  flex-direction: column;\n}\n\n/* \"Naar de inhoud\": hidden until focused. The ring is drawn inside the box (`focus-inset`):\n   outside it would lie on the theme fill (1.89:1, on Defensie 1:1); inside, its neighbour is\n   white. */\n.lintje-shell__skip {\n  position: absolute;\n  top: var(--space-2);\n  left: var(--space-2);\n  z-index: 50;\n  display: inline-flex;\n  align-items: center;\n  min-height: var(--h-touch);\n  padding: var(--space-2) var(--space-4);\n  background: var(--color-bg-surface);\n  color: var(--color-link);\n  font: var(--text-ui);\n  text-decoration: underline;\n  box-shadow: var(--shadow-popover);\n}\n.lintje-shell__skip:not(:focus) {\n  width: 1px;\n  height: 1px;\n  min-height: 0;\n  padding: 0;\n  overflow: hidden;\n  clip-path: inset(50%);\n  white-space: nowrap;\n  box-shadow: none;\n}\n\n/* The main region takes the skip link's focus; it is not a control and draws no ring. */\n.lintje-shell__main {\n  display: flex;\n  flex-direction: column;\n  flex: 1 0 auto;\n  min-width: 0;\n}\n.lintje-shell__main:focus { outline: none; }\n/* Without content the last edge-to-edge part takes the room left: a conversation keeps its\n   question box at the bottom of a short page. */\n.lintje-shell__main.is-bare ::slotted([slot='full']) { flex: 1 0 auto; }\n\n/* The content keeps to the design system's maximum width, as the bars above it do. */\n.lintje-shell__content {\n  display: flex;\n  flex-direction: column;\n  gap: var(--grid-gutter);\n  padding: var(--page-pad-y) calc(var(--page-pad-x) + var(--page-gutter)) var(--space-10);\n}\n.lintje-shell__content[hidden] { display: none; }\n:where(.lintje-shell.is-phone) .lintje-shell__content { padding: var(--space-4) var(--space-4) var(--space-8); gap: var(--space-3); }\n\n/*\n * Top layout. The navigation bar cannot be `sticky`: it would stick inside the header's own box\n * and leave with it, so its slot keeps the bar's height (`--h-navbar`) and the bar is pinned\n * once the slot has left the viewport.\n */\n.lintje-shell__sentinel { height: 1px; margin-bottom: -1px; }\n.lintje-shell__nav { position: relative; z-index: 25; min-height: var(--h-navbar); }\n.lintje-shell__nav.is-stuck .lintje-navbar {\n  position: fixed;\n  top: 0;\n  left: 0;\n  right: 0;\n}\n\n/* Below 768 px the mobile header is the bar under the logo bar; its slot keeps the height. */\n.lintje-shell__mobile-bar { height: var(--h-topbar); }\n.lintje-shell__mobile-pin { position: relative; z-index: 25; }\n.lintje-shell__mobile-bar.is-stuck .lintje-shell__mobile-pin {\n  position: fixed;\n  top: 0;\n  left: 0;\n  right: 0;\n}\n.lintje-shell--top .lintje-mobile-header {\n  position: static;\n  height: var(--h-topbar);\n  align-items: center;\n  gap: var(--space-3);\n}\n.lintje-shell--top .lintje-mobile-header__actions { margin-top: 0; flex: none; }\n.lintje-shell--top .lintje-mobile-menu {\n  position: absolute;\n  inset: 100% 0 auto 0;\n  height: calc(100dvh - var(--h-topbar));\n}\n/* 16 px so two lines fit inside the 56 px bar; longer is cut with an ellipsis. */\n.lintje-mobile-header__title {\n  display: -webkit-box;\n  min-width: 0;\n  overflow: hidden;\n  color: var(--color-nav-text);\n  font: var(--text-dashboard);\n  font-size: 1rem;\n  -webkit-box-orient: vertical;\n  -webkit-line-clamp: 2;\n  line-clamp: 2;\n}\n/* The logo bar already shows the environment. */\n.lintje-shell--top .lintje-mobile-menu__environment { display: none; }\n\n/* The page's one h1; cut before it can push the entries out. */\n.lintje-shell__name {\n  flex: 0 1 auto;\n  min-width: 0;\n  max-width: 24rem;\n  margin: 0;\n  padding: 0 var(--space-5);\n  overflow: hidden;\n  color: var(--color-nav-text);\n  font: var(--text-dashboard);\n  line-height: var(--h-navbar);\n  white-space: nowrap;\n  text-overflow: ellipsis;\n}\n\n/* Bare glyphs in a bar; on the navigation bar their ring is the on-theme one (`header.css`). */\n.lintje-shell__tool {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex: none;\n  width: var(--h-touch);\n  height: var(--lintje-tool-height, var(--h-touch));\n  color: var(--color-nav-text);\n  transition: background var(--dur-hover) var(--ease-in-motion);\n}\n.lintje-shell__tool:hover { background: var(--color-nav-hover); }\n.lintje-shell__tool--text {\n  width: auto;\n  padding: 0 var(--space-3);\n  font: var(--text-ui);\n}\n.lintje-navbar .lintje-shell__tool { height: var(--h-navbar); }\n\n/* The panels hang from the bar, not the tool. They stand on the page's surface: standard ring. */\n.lintje-navbar .lintje-view,\n.lintje-navbar .lintje-share { position: static; }\n.lintje-navbar .lintje-view__popover,\n.lintje-navbar .lintje-share__popover {\n  top: 100%;\n  right: calc(var(--space-3) + var(--page-gutter));\n}\n.lintje-navbar .lintje-view__popover :focus-visible,\n.lintje-navbar .lintje-share__popover :focus-visible { outline-color: var(--color-focus); }\n\n.lintje-shell__sheet-user { border-top: 1px solid var(--color-nav-line); }\n\n/* On paper the bars give way to the logo and the application's name; the screen never shows it. */\n.lintje-shell__print-head { display: none; }\n\n@media print {\n  .lintje-shell__skip,\n  .lintje-shell__sentinel,\n  .lintje-shell__nav,\n  .lintje-shell__mobile-bar { display: none; }\n  .lintje-shell__print-head {\n    display: block;\n    border-bottom: 1px solid var(--color-border-default);\n  }\n  .lintje-shell__print-logo {\n    display: flex;\n    justify-content: center;\n    min-height: var(--h-logobar);\n  }\n  .lintje-shell__print-name {\n    margin: 0;\n    padding: var(--space-3) 0;\n    color: var(--color-text-primary);\n    font: var(--text-dashboard);\n  }\n}\n\n@media (forced-colors: active) {\n  .lintje-navbar .lintje-view__popover :focus-visible,\n  .lintje-navbar .lintje-share__popover :focus-visible { outline-color: Highlight; }\n}\n", Me = "\n/* Dark is its own surface, not an inversion: every colour here is a `--color-nav-*` token. */\n.lintje-nav {\n  width: var(--w-nav);\n  flex: none;\n  /* `align-self: flex-start`: a stretched flex child would make sticky do nothing. */\n  position: sticky;\n  top: 0;\n  align-self: flex-start;\n  height: 100vh;\n  background: var(--color-nav-bg);\n  color: var(--color-nav-text);\n  display: flex;\n  flex-direction: column;\n  overflow: hidden;\n  /* Above the page also while the rail collapses: with a z-index only while expanded,\n     later positioned content (charts, KPI tiles) painted over the shrinking menu. */\n  z-index: 30;\n  box-shadow: var(--shadow-nav);\n  /* The margin mirrors the width growth, so width + margin-right is 72 px at every moment;\n     otherwise the content jumps 216 px for one frame. */\n  transition:\n    width var(--dur-rail) var(--ease-in-motion),\n    margin-right var(--dur-rail) var(--ease-in-motion);\n}\n/* The orange ring disappears into the theme fill: the menu takes the on-theme ring. */\n.lintje-nav :focus-visible { outline-color: var(--color-focus-on-theme); }\n.lintje-nav--rail { width: var(--w-rail); margin-right: 0; }\n/* Expanding lies on top of the content: 288 px drawn, 72 px taken. A negative right margin does\n   that; `fixed` or `absolute` would make the page jump. */\n.lintje-nav--rail.is-expanded {\n  width: var(--w-nav);\n  margin-right: calc(var(--w-rail) - var(--w-nav));\n}\n/* The overlay behind the expanded rail. A sibling of the nav: inside its stacking context it\n   would darken the menu itself. */\n.lintje-nav__scrim {\n  position: fixed;\n  inset: 0;\n  z-index: 29;\n  background: var(--color-overlay-nav);\n  opacity: 0;\n  pointer-events: none;\n  transition: opacity var(--dur-rail) var(--ease-in-motion);\n}\n.lintje-nav__scrim.is-visible { opacity: 1; }\n\n.lintje-nav__header {\n  height: var(--h-nav-head);\n  flex: none;\n  display: flex;\n  align-items: flex-start;\n  justify-content: space-between;\n  padding: 0 var(--space-4) 0 12px;\n}\n\n.lintje-nav__pin {\n  position: relative;\n  width: var(--h-icon-button); height: var(--h-icon-button);\n  margin-top: 12px;\n  display: flex; align-items: center; justify-content: center;\n  color: var(--color-nav-text);\n  background: transparent;\n  flex: none;\n}\n.lintje-nav__pin--text {\n  width: auto;\n  padding: 0 var(--space-2);\n  font-size: 0.875rem;\n  font-weight: 700;\n  white-space: nowrap;\n}\n/* The pin and Afmelden: a transparent hit area takes the target to 48 px. */\n.lintje-nav__pin::after,\n.lintje-nav__logout-button::after {\n  content: '';\n  position: absolute;\n  inset: min(0px, calc((100% - var(--h-target)) / 2));\n}\n.lintje-nav__pin { transition: background var(--dur-hover) var(--ease-in-motion); }\n.lintje-nav__pin:hover { background: var(--color-nav-hover); }\n\n/* No native bar: a styled one takes width in every browser and the rows' fill would stop short\n   of the menu's edge. `NavScrollbar` sizes and places the thumb drawn instead. */\n.lintje-nav__list { flex: 1; overflow-y: auto; overflow-x: hidden; scrollbar-width: none; }\n.lintje-nav__list::-webkit-scrollbar { display: none; }\n.lintje-nav__thumb {\n  position: absolute;\n  top: 0; right: 0;\n  width: var(--space-2);\n  height: 0;\n  /* The menu's second ink reads on its fill and on a hovered row. */\n  background: var(--color-nav-text-sub);\n  opacity: 0;\n  pointer-events: none;\n  transition: opacity var(--dur-hover) var(--ease-in-motion);\n}\n/* There while the pointer is on the menu or a drag lasts; the keyboard's focus shows it at once. */\n.lintje-nav:hover .lintje-nav__thumb,\n.lintje-nav__thumb.is-dragging,\n.lintje-nav__list:focus-within + .lintje-nav__thumb { opacity: 1; pointer-events: auto; }\n.lintje-nav__list:focus-within + .lintje-nav__thumb { transition: none; }\n.lintje-nav__group { display: flex; flex-direction: column; }\n\n/* The same height in both modes, so every row below stays in place when the rail expands. */\n.lintje-nav__section-heading {\n  position: relative;\n  font-size: var(--label-size);\n  font-weight: var(--label-weight);\n  letter-spacing: var(--label-tracking);\n  text-transform: uppercase;\n  color: var(--color-nav-text-sub);\n  padding: 22px var(--space-5) 6px;\n  white-space: nowrap;\n  margin: 0;\n}\n/* A line in the rail, text once it expands: the text fades in 80 ms after the width starts. */\n.lintje-nav__section-label {\n  display: block;\n  transition: opacity 160ms var(--ease-in-motion) 80ms, transform var(--dur-base) var(--ease-in-motion) 80ms;\n}\n.lintje-nav--rail:not(.is-expanded) .lintje-nav__section-label {\n  opacity: 0;\n  transform: translateX(-8px);\n  transition: opacity 60ms var(--ease-out-motion), transform 0ms linear 60ms;\n}\n.lintje-nav__separator {\n  position: absolute;\n  left: 14px; right: 14px;\n  top: 50%;\n  height: 1px;\n  background: var(--color-nav-line);\n  opacity: 0;\n  transform: scaleX(0);\n  transform-origin: left center;\n  transition: transform 140ms var(--ease-out-motion), opacity 0ms linear 140ms;\n}\n.lintje-nav--rail:not(.is-expanded) .lintje-nav__separator {\n  opacity: 1;\n  transform: none;\n  transition: transform 160ms var(--ease-in-motion) 60ms;\n}\n\n/* One row in every mode. A 4 px border + 22 px padding centres the 20 px icon in the 72 px rail,\n   in line with the logo. Expanding animates only the width, so the icon stays in place. */\n.lintje-nav__item {\n  position: relative;\n  height: var(--h-nav-row);\n  display: flex;\n  align-items: center;\n  justify-content: flex-start;\n  gap: var(--space-3);\n  padding: 0 22px;\n  border-left: var(--nav-edge) solid transparent;\n  font-size: 1rem;\n  color: var(--color-nav-text);\n  text-decoration: none;\n  white-space: nowrap;\n  transition: background var(--dur-hover) var(--ease-in-motion);\n}\n.lintje-nav__item:hover:not(.is-no-page):not(.is-no-access) {\n  background: var(--color-nav-hover);\n}\n.lintje-nav__item.is-active {\n  background: var(--color-nav-active);\n  border-left-color: var(--color-nav-active-edge);\n  color: var(--color-nav-active-text);\n  /* Not bold: the bold cut sets narrower and reads as another font size beside its neighbours. */\n}\n.lintje-nav__item:focus-visible { outline-offset: -3px; }\n\n.lintje-nav__item.is-no-page { color: var(--color-nav-disabled); cursor: default; }\n.lintje-nav__item.is-no-access { color: var(--color-nav-disabled); text-decoration: line-through; cursor: not-allowed; }\n\n.lintje-nav__label { flex: 1; overflow: hidden; text-overflow: ellipsis; }\n.lintje-nav--rail.is-expanded .lintje-nav__label,\n.lintje-nav--rail.is-expanded .lintje-nav__metric {\n  animation: lintje-nav-text-in var(--dur-base) var(--ease-in-motion) 80ms backwards;\n}\n@keyframes lintje-nav-text-in { from { opacity: 0; transform: translateX(-8px); } }\n.lintje-nav__metric { font-size: 0.875rem; color: var(--color-nav-text-sub); flex: none; }\n.lintje-nav__item.is-no-access .lintje-nav__metric { text-decoration: none; }\n.lintje-nav__item.is-no-page .lintje-nav__metric { color: var(--color-nav-disabled); }\n\n/* The badge is `badge.css`, adopted by the shell. In the rail a word (\"NIEUW\")\n   does not fit: it becomes a dot, so the rail does not overflow. */\n.lintje-nav--rail:not(.is-expanded) .lintje-nav__badge {\n  position: absolute; top: 2px; right: var(--space-1);\n}\n.lintje-nav--rail:not(.is-expanded) .lintje-nav__badge--new {\n  min-width: 8px; width: 8px; height: 8px; padding: 0;\n  border-radius: 999px;\n  font-size: 0; overflow: hidden;\n}\n\n/* Environment band, only outside production. Its fill is the theme's accent, not the attention\n   status: on `defensie` (menu `#E17000`) the accent draws a blue band that reads against it. */\n.lintje-nav__environment {\n  position: relative;\n  flex: none;\n  height: 2rem;\n  margin: 0;\n  background: var(--color-nav-environment-bg);\n  color: var(--color-nav-environment-text);\n  font-size: var(--label-size);\n  font-weight: var(--label-weight);\n  letter-spacing: var(--label-tracking);\n  text-transform: uppercase;\n  text-align: center;\n  line-height: 2rem;\n  white-space: nowrap;\n  overflow: hidden;\n}\n.lintje-nav__environment-label,\n.lintje-nav__environment-short { position: absolute; inset: 0; }\n.lintje-nav__environment-label {\n  transition: opacity 160ms var(--ease-in-motion) 80ms;\n}\n.lintje-nav__environment-short { opacity: 0; transition: opacity 60ms var(--ease-out-motion); }\n.lintje-nav--rail:not(.is-expanded) .lintje-nav__environment-label { opacity: 0; transition: opacity 60ms var(--ease-out-motion); }\n.lintje-nav--rail:not(.is-expanded) .lintje-nav__environment-short { opacity: 1; transition: opacity 160ms var(--ease-in-motion) 80ms; }\n\n.lintje-nav__feedback { flex: none; }\n.lintje-nav__version { font-family: var(--font-mono); font-size: 0.875rem; letter-spacing: .02em; margin-left: auto; }\n/* Without a contact the version gets a row with the menu row's geometry, so the user block does\n   not move; not `.lintje-nav__item`, which carries a hover. */\n.lintje-nav__version-row {\n  flex: none;\n  height: var(--h-nav-row);\n  margin: 0;\n  display: flex;\n  align-items: center;\n  padding: 0 22px;\n  border-left: var(--nav-edge) solid transparent;\n}\n\n/* \"Afmelden\": a real form, because signing out is a POST that leaves the page. */\n/* The form is `hidden` in the rail, not transparent, so the button is out of the tab order. */\n.lintje-nav__logout { flex: none; margin-left: auto; }\n.lintje-nav__logout[hidden] { display: none; }\n.lintje-nav__logout-button {\n  position: relative;\n  width: var(--h-icon-button); height: var(--h-icon-button);\n  display: flex; align-items: center; justify-content: center;\n  /* Quiet at rest; full text colour on hover and focus. */\n  color: var(--color-nav-text-sub);\n  background: transparent;\n  transition: background var(--dur-hover) var(--ease-in-motion);\n}\n.lintje-nav__logout-button:hover,\n.lintje-nav__logout-button:focus-visible { background: var(--color-nav-hover); color: var(--color-nav-text); }\n.lintje-nav__logout-text { font-size: 0.875rem; font-weight: 700; white-space: nowrap; padding: 0 var(--space-2); }\n\n.lintje-nav__footer {\n  flex: none;\n  display: flex; align-items: center; gap: 10px;\n  padding: var(--space-4) var(--space-5) var(--space-5) var(--space-4);\n  border-top: 1px solid var(--color-nav-line);\n  font-size: 1rem;\n}\n/* As high as name and role together (two 1.25rem lines); the left padding keeps it centred in\n   the rail. */\n.lintje-nav__avatar {\n  width: 2.5rem; height: 2.5rem; flex: none;\n  display: flex; align-items: center; justify-content: center;\n  border-radius: var(--radius-round);\n  background: var(--color-nav-avatar-bg);\n  color: var(--color-nav-avatar-text);\n  font-size: 1rem; font-weight: 700;\n}\n/* Name and role fade and slide in like the headings; `nowrap` keeps one line. */\n.lintje-nav__user {\n  display: flex; flex-direction: column; line-height: 1.25rem;\n  min-width: 0; flex: 1 1 auto; white-space: nowrap;\n  transition: opacity 160ms var(--ease-in-motion) 80ms, transform var(--dur-base) var(--ease-in-motion) 80ms;\n}\n.lintje-nav--rail:not(.is-expanded) .lintje-nav__user { opacity: 0; transform: translateX(-8px); transition: none; }\n.lintje-nav__user > b,\n.lintje-nav__role { overflow: hidden; text-overflow: ellipsis; }\n.lintje-nav__role { font-size: 0.875rem; color: var(--color-nav-text-sub); }\n\n:where(.lintje-shell.is-phone) .lintje-nav,\n:where(.lintje-shell.is-phone) .lintje-nav__scrim { display: none; }\n\n/* An emblem's black, if it has any, draws in the menu's text colour (`currentColor`). */\n.lintje-nav__home { display: block; flex: none; color: var(--color-nav-text); }\n\n\n@media print { .lintje-nav, .lintje-nav__scrim { display: none; } }\n\n/* Forced colours: the active row is a fill and a 4 px edge; the fill is dropped and the edge\n   turns Highlight. A row without a page or access is GrayText. The ring is Highlight. The\n   shadow is dropped, so an outline keeps the menu's edge against the page. */\n@media (forced-colors: active) {\n  .lintje-nav { outline: 1px solid CanvasText; }\n  .lintje-nav :focus-visible { outline-color: Highlight; }\n  .lintje-nav__item { border-left-color: Canvas; }\n  .lintje-nav__item.is-active { border-left-color: Highlight; }\n  .lintje-nav__item.is-no-page,\n  .lintje-nav__item.is-no-access { color: GrayText; }\n  .lintje-nav__avatar { border: 1px solid CanvasText; }\n  .lintje-nav__thumb { forced-color-adjust: none; background: CanvasText; }\n}\n", J = "\n/* One region: the open menu's dialog and the box its focus trap keeps Tab inside. It shows no\n   ring when the trap pulls back stray focus. The region sticks, not the header: a sticky box\n   stays inside its parent, and this one is as tall as the header. */\n.lintje-mobile-chrome { flex: none; position: sticky; top: 0; z-index: 25; }\n.lintje-mobile-chrome:focus { outline: none; }\n\n.lintje-mobile-header {\n  display: none;\n  height: var(--h-mobile-header);\n  flex: none;\n  background: var(--color-nav-bg);\n  align-items: flex-start;\n  justify-content: space-between;\n  padding: 0 var(--space-4);\n  /* Tools that do not fit must not widen the page, or a phone zooms out and they seem to fit\n     (`headerCompact`). Sideways only: the focus ring stays inside the padding. */\n  overflow-x: clip;\n}\n:where(.lintje-shell.is-phone) .lintje-mobile-header { display: flex; }\n/* On the theme fill the ring is the on-theme one, as in the desktop menu. */\n.lintje-mobile-header :focus-visible,\n.lintje-mobile-menu :focus-visible { outline-color: var(--color-focus-on-theme); }\n/* \"Weergave\" and \"Delen\" open from this header as sheets on the page's surface: standard ring. */\n.lintje-mobile-header .lintje-view__popover :focus-visible,\n.lintje-mobile-header .lintje-share__popover :focus-visible { outline-color: var(--color-focus); }\n\n.lintje-mobile-header__actions { margin-top: var(--space-3); display: flex; gap: var(--space-2); }\n.lintje-mobile-header__button {\n  height: var(--h-touch);\n  padding: 0 var(--space-3);\n  background: var(--color-nav-active);\n  color: var(--color-nav-text);\n  border: 1px solid var(--color-nav-line);\n  font-size: 0.875rem;\n  font-weight: 700;\n  display: flex; align-items: center; justify-content: center; gap: var(--space-2);\n  /* Square when only the glyph shows (`headerCompact`). */\n  min-width: var(--h-touch);\n}\n/* Without room the words are read, not shown: the glyph and the badge stay. */\n.lintje-mobile-header.is-compact .lintje-mobile-header__word {\n  position: absolute;\n  width: 1px; height: 1px;\n  margin: -1px;\n  overflow: hidden;\n  clip: rect(0 0 0 0);\n  white-space: nowrap;\n}\n/* The modified-filters count is the badge's `attention` tone: near-black on the\n   orange, because white on #E17000 is 3.2:1. */\n\n.lintje-mobile-menu {\n  position: fixed;\n  inset: var(--h-mobile-header) 0 0 0;\n  z-index: 24;\n  background: var(--color-nav-bg);\n  color: var(--color-nav-text);\n  display: flex;\n  flex-direction: column;\n  overflow-y: auto;\n  animation: lintje-menu-in var(--dur-sheet) var(--ease-in-motion);\n}\n.lintje-mobile-menu.is-leaving {\n  animation: lintje-menu-out var(--dur-sheet) var(--ease-out-motion) forwards;\n  pointer-events: none;\n}\n.lintje-mobile-menu__list { flex: 1; padding-bottom: var(--space-4); }\n.lintje-mobile-menu__heading {\n  font-size: var(--label-size); font-weight: var(--label-weight);\n  letter-spacing: var(--label-tracking); text-transform: uppercase;\n  color: var(--color-nav-text-sub);\n  padding: 22px var(--space-5) 6px;\n}\n.lintje-mobile-menu__item {\n  height: var(--h-touch);\n  display: flex; align-items: center; gap: var(--space-3);\n  padding: 0 var(--space-5);\n  border-left: var(--nav-edge) solid transparent;\n  color: var(--color-nav-text);\n  font-size: 1rem;\n  text-decoration: none;\n}\n.lintje-mobile-menu__item.is-active {\n  background: var(--color-nav-active);\n  border-left-color: var(--color-nav-active-edge);\n  color: var(--color-nav-active-text);\n  /* Not bold: the bold cut sets narrower and reads as another font size beside its neighbours. */\n}\n.lintje-mobile-menu__item.is-muted { color: var(--color-nav-disabled); }\n.lintje-mobile-menu__label { flex: 1; }\n.lintje-mobile-menu__meta { font-size: 0.875rem; color: var(--color-nav-disabled); flex: none; }\n/* The environment band and the feedback row with the version: below 768 px there is no rail,\n   and a page's own footer is the host's, so this is the only place they can stand. */\n.lintje-mobile-menu__environment {\n  flex: none;\n  height: 2rem;\n  margin: 0;\n  background: var(--color-nav-environment-bg);\n  color: var(--color-nav-environment-text);\n  font-size: var(--label-size);\n  font-weight: var(--label-weight);\n  letter-spacing: var(--label-tracking);\n  text-transform: uppercase;\n  text-align: center;\n  line-height: 2rem;\n  white-space: nowrap;\n  overflow: hidden;\n}\n.lintje-mobile-menu__feedback { flex: none; margin: 0; }\n.lintje-mobile-menu__version {\n  flex: none;\n  margin-left: auto;\n  font-family: var(--font-mono); font-size: 0.875rem; letter-spacing: .02em;\n  color: var(--color-nav-text-sub);\n}\n\n.lintje-mobile-header__home { display: block; flex: none; color: var(--color-nav-text); }\n\n\n@media print { .lintje-mobile-header, .lintje-mobile-menu { display: none; } }\n\n/* Forced colours: the active row's 4 px edge is Highlight, a muted row GrayText. */\n@media (forced-colors: active) {\n  .lintje-mobile-header :focus-visible,\n  .lintje-mobile-menu :focus-visible { outline-color: Highlight; }\n  .lintje-mobile-header .lintje-view__popover :focus-visible,\n  .lintje-mobile-header .lintje-share__popover :focus-visible { outline-color: Highlight; }\n  .lintje-mobile-menu__item { border-left-color: Canvas; }\n  .lintje-mobile-menu__item.is-active { border-left-color: Highlight; }\n  .lintje-mobile-menu__item.is-muted { color: GrayText; }\n}\n", Ne = "/* The bar, the two toggle groups and the share popover are all drawn by the shell itself. */\n\n.lintje-top-bar {\n  height: var(--h-topbar);\n  flex: none;\n  position: sticky;\n  top: 0;\n  z-index: 20;\n  background: var(--color-bg-surface);\n  border-bottom: 1px solid var(--color-border-default);\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 0 calc(var(--space-6) + var(--page-gutter));\n}\n/* The name and the page's name share a baseline and stand in the middle of the bar as one. */\n.lintje-top-bar__name { display: flex; align-items: center; gap: var(--space-1); min-width: 0; }\n.lintje-top-bar__words { display: flex; align-items: baseline; gap: 6px; min-width: 0; }\n/* The dashboard's name is a word, not a line, so it uses `--color-accent-text`. */\n.lintje-top-bar__dashboard {\n  font: var(--text-dashboard);\n  color: var(--color-accent-text);\n  white-space: nowrap;\n}\n.lintje-top-bar__page {\n  font-size: 1rem;\n  color: var(--color-text-muted);\n  opacity: 0;\n  transition: opacity var(--dur-hover) var(--ease-in-motion);\n  white-space: nowrap;\n}\n.lintje-top-bar__page.is-visible { opacity: 1; }\n\n.lintje-top-bar__actions { display: flex; flex: none; align-items: center; gap: var(--space-3); }\n.lintje-top-bar__key { margin-left: var(--space-1); }\n/* The tools of the navigation bar stand here on the page's surface; an element with a shadow\n   root declares the tokens again on its own host, so they are set on each one too. */\n.lintje-top-bar__actions,\n.lintje-top-bar__actions > * {\n  --color-nav-text: var(--color-text-primary);\n  --color-nav-hover: var(--color-bg-subtle);\n  --lintje-tool-height: var(--h-button-chrome);\n}\n\n.lintje-toggle-group {\n  display: flex;\n  height: var(--h-button-chrome);\n  border: 1px solid var(--color-border-strong);\n}\n.lintje-toggle-group__option {\n  position: relative;\n  width: var(--h-button-chrome);\n  display: flex; align-items: center; justify-content: center;\n  color: var(--color-text-primary);\n  transition: background var(--dur-hover) var(--ease-in-motion);\n}\n/* Without a file for its icon the option shows its short Dutch word instead.\n   The group keeps its height; only the option gets as wide as the word. */\n.lintje-toggle-group__option--text {\n  width: auto;\n  padding: 0 var(--space-3);\n  font-size: 0.875rem;\n  font-weight: 700;\n  white-space: nowrap;\n}\n.lintje-toggle-group__option:hover { background: var(--color-bg-subtle); }\n/* A 40 px option reaches the 48 px target through a transparent hit area 4 px above and\n   below; the options of a group touch, so it does not reach sideways. */\n.lintje-toggle-group__option::after {\n  content: '';\n  position: absolute;\n  inset: min(0px, calc((100% - var(--h-target)) / 2)) 0;\n}\n/* The chosen half has no border of its own — the group draws one around both —\n   so the primary-fill border is an inset ring: the same\n   1 px line, drawn inside the box, so neither half moves a pixel. Invisible in\n   light (the token is the primary there), the tint in dark. */\n.lintje-toggle-group__option.is-active {\n  background: var(--color-action-primary);\n  color: var(--color-action-primary-text);\n  box-shadow: inset 0 0 0 1px var(--color-action-primary-border);\n}\n\n/* The panels' side inset: their own as they hang from a tool, the filter sheet's as a sheet. */\n.lintje-view__popover,\n.lintje-share__popover { --lintje-panel-inset: 14px; }\n\n/* \"Weergave\": the share menu's panel, with a group of words under each heading. */\n.lintje-view { position: relative; }\n/* A panel sets the text colour of its surface: on the navigation bar it would take the bar's. */\n.lintje-view__popover {\n  position: absolute;\n  right: 0; top: calc(100% + 4px);\n  z-index: 41;\n  background: var(--color-bg-surface);\n  color: var(--color-text-primary);\n  border: 1px solid var(--color-border-popover);\n  box-shadow: var(--shadow-popover);\n  padding: var(--space-2) 0;\n  animation: lintje-popover-in var(--dur-popover) var(--ease-in-motion);\n}\n.lintje-view__row { display: flex; padding: var(--space-1) var(--lintje-panel-inset) var(--space-2); }\n/* A theme's name stays one line; the panel grows to it. */\n.lintje-view__themes { white-space: nowrap; }\n\n.lintje-share { position: relative; }\n.lintje-share__scrim { position: fixed; inset: 0; z-index: 40; }\n.lintje-share__popover {\n  position: absolute;\n  right: 0; top: calc(100% + 4px);\n  z-index: 41;\n  width: 18.75rem;\n  background: var(--color-bg-surface);\n  color: var(--color-text-primary);\n  border: 1px solid var(--color-border-popover);\n  box-shadow: var(--shadow-popover);\n  padding: var(--space-2) 0;\n  animation: lintje-popover-in var(--dur-popover) var(--ease-in-motion);\n}\n.lintje-share__heading {\n  font-size: var(--label-size); font-weight: var(--label-weight);\n  letter-spacing: var(--label-tracking); text-transform: uppercase;\n  color: var(--color-text-muted);\n  padding: var(--space-3) var(--lintje-panel-inset) 4px;\n}\n.lintje-share__item {\n  width: 100%;\n  display: flex; align-items: center; gap: 10px;\n  min-height: var(--h-target);\n  padding: 0 var(--lintje-panel-inset);\n  font-size: 1rem;\n  text-align: left;\n  color: var(--color-text-primary);\n}\n.lintje-share__item:hover { background: var(--color-bg-subtle); }\n/* Where an icon is still missing: the label keeps the column's text edge. */\n.lintje-share__gap { width: 16px; flex: none; }\n.lintje-share__qr {\n  display: flex; flex-direction: column; align-items: center; gap: var(--space-3);\n  padding: var(--space-2) var(--lintje-panel-inset) var(--space-3);\n}\n.lintje-share__hint { text-align: center; }\n.lintje-share__code { align-self: stretch; }\n.lintje-share__footer {\n  font: var(--text-meta); color: var(--color-text-muted);\n  padding: var(--space-2) var(--lintje-panel-inset) 0;\n  margin-top: var(--space-2);\n  border-top: 1px solid var(--color-border-default);\n}\n\n:where(.lintje-shell.is-phone) .lintje-top-bar { display: none; }\n\n/* Below 768 px \"Weergave\" and \"Delen\" open from below, as the filter sheet does. A phone has its\n   own way to a phone, so the QR code is not offered there. */\n:where(.lintje-shell.is-phone) .lintje-share__scrim {\n  z-index: 60;\n  background: var(--color-overlay-page);\n  animation: lintje-fade-in var(--dur-scrim) var(--ease-in-motion);\n}\n:where(.lintje-shell.is-phone) .lintje-view__popover,\n:where(.lintje-shell.is-phone) .lintje-share__popover,\n:where(.lintje-shell.is-phone) .lintje-navbar .lintje-view__popover,\n:where(.lintje-shell.is-phone) .lintje-navbar .lintje-share__popover {\n  position: fixed;\n  inset: auto 0 0 0;\n  z-index: 61;\n  width: auto;\n  max-height: 88vh;\n  overflow-y: auto;\n  padding-bottom: var(--space-4);\n  border: 0;\n  border-top: 1px solid var(--color-border-popover);\n  box-shadow: none;\n  animation: lintje-sheet-in var(--dur-sheet) var(--ease-in-motion);\n}\n:where(.lintje-shell.is-phone) .lintje-view__popover,\n:where(.lintje-shell.is-phone) .lintje-share__popover { padding-top: 0; --lintje-panel-inset: var(--space-4); }\n:where(.lintje-shell.is-phone) .lintje-view__popover:focus,\n:where(.lintje-shell.is-phone) .lintje-share__popover:focus { outline: none; }\n:where(.lintje-shell.is-phone) .lintje-share__phone { display: none; }\n/* The filter sheet's head; it stays while the sheet scrolls. */\n.lintje-share__header {\n  position: sticky;\n  top: 0;\n  z-index: 1;\n  display: flex; align-items: center; gap: var(--space-2);\n  margin-bottom: var(--space-2);\n  padding: var(--space-4);\n  background: var(--color-bg-surface);\n  border-bottom: 1px solid var(--color-border-popover);\n}\n.lintje-share__title { flex: 1; margin: 0; font: var(--text-h2); }\n\n\n/* On paper the chrome is not part of the page. */\n@media print { .lintje-top-bar { display: none; } }\n\n/* Forced colours: the chosen half is carried by its fill and an inset\n   ring, both of which the browser drops. Every half takes a 1 px border inside\n   its own box — Canvas at rest, Highlight when chosen — so nothing moves. */\n@media (forced-colors: active) {\n  .lintje-toggle-group__option { border: 1px solid Canvas; }\n  .lintje-toggle-group__option.is-active { border-color: Highlight; }\n}\n", Y = "lintje-shell-main", X = (e) => "links" in e, Z = (e) => e?.navigation?.flatMap((e) => X(e) ? e.links : [e]).find((e) => e.active);
 function Q(e) {
 	let t = [], n = null;
 	for (let r of e) X(r) ? (n = null, t.push({
@@ -944,15 +944,15 @@ function Q(e) {
 	})) : (n || t.push(n = { items: [] }), n.items.push(r));
 	return t;
 }
-var $ = class extends v {
-	constructor(...e) {
-		super(...e), this.layout = "top", this.openGroup = null, this.barStuck = !1, this.railExpanded = !1, this.railRefocus = !1, this.menuOpen = !1, this.menuLeaving = !1, this.shareOpen = !1, this.sharePhone = !1, this.viewOpen = !1, this.toolsCompact = !1, this.headerCompact = !1, this.hasContent = !0, this.wide = new c(this, ee), this.mobile = new c(this, s), this.submenu = new me(this), this.navScrollbar = new ve(this), this.store = new te(this), this.#e = new b(), this.#t = null, this.#n = null, this.#r = 0, this.#i = !1, this.#a = null, this.#o = [], this.#s = 0, this.#c = null, this.#l = new b(), this.#u = null, this.#d = null, this.#f = (e) => {
-			if (e.key === "Escape") {
+var $ = class extends a {
+	constructor(...n) {
+		super(...n), this.layout = "top", this.openGroup = null, this.barStuck = !1, this.railExpanded = !1, this.railRefocus = !1, this.menuOpen = !1, this.menuLeaving = !1, this.shareOpen = !1, this.sharePhone = !1, this.viewOpen = !1, this.toolsCompact = !1, this.headerCompact = !1, this.hasContent = !0, this.toastKind = "ok", this.wide = new o(this, ne), this.mobile = new o(this, t), this.submenu = new me(this), this.navScrollbar = new ve(this), this.store = new c(this), this.#e = new b(), this.#t = null, this.#n = null, this.#r = 0, this.#i = !1, this.#a = null, this.#o = [], this.#s = 0, this.#c = null, this.#l = new b(), this.#u = null, this.#d = null, this.#f = (t) => {
+			if (t.key === "Escape") {
 				if (this.#u) {
 					if (!this.#l.isTopmost()) return;
 					this.viewOpen = !1, this.shareOpen = !1;
 				} else if (this.viewOpen || this.shareOpen) {
-					if (!p(this)) return;
+					if (!e(this)) return;
 					this.#y() ? this.closePanel(this.viewOpen ? ".lintje-view__button" : ".lintje-share__button") : (this.viewOpen = !1, this.shareOpen = !1);
 				} else this.menuOpen && this.#e.isTopmost() && (this.menuOpen = !1);
 			}
@@ -964,15 +964,15 @@ var $ = class extends v {
 	}
 	static {
 		this.styles = [
-			e,
-			ne,
-			a(Ae),
-			a(je),
-			a(Me),
-			a(J),
-			a(ie),
-			a(ae),
-			a(Ne)
+			te,
+			p,
+			f(Ae),
+			f(je),
+			f(Me),
+			f(J),
+			f(ie),
+			f(ae),
+			f(Ne)
 		];
 	}
 	static {
@@ -993,7 +993,8 @@ var $ = class extends v {
 			toolsCompact: { state: !0 },
 			headerCompact: { state: !0 },
 			hasContent: { state: !0 },
-			toast: { state: !0 }
+			toast: { state: !0 },
+			toastKind: { state: !0 }
 		};
 	}
 	get dataSettings() {
@@ -1023,7 +1024,7 @@ var $ = class extends v {
 	}
 	#m() {
 		let e = this.mobile.matches && (this.viewOpen || this.shareOpen) ? this.renderRoot.querySelector(".lintje-mobile-header .lintje-view__popover, .lintje-mobile-header .lintje-share__popover") : null;
-		e && !this.#u ? (this.#u = l(), this.#l.activate(e, { focus: e.querySelector(".lintje-share__close") ?? !0 })) : e || this.#h(!0);
+		e && !this.#u ? (this.#u = r(), this.#l.activate(e, { focus: e.querySelector(".lintje-share__close") ?? !0 })) : e || this.#h(!0);
 	}
 	#h(e) {
 		this.#u && (this.#u(), this.#u = null, this.#l.deactivate(e));
@@ -1034,7 +1035,7 @@ var $ = class extends v {
 	updated(e) {
 		if (super.updated(e), e.has("data") && e.get("data") === void 0 && this.#b(), e.has("menuOpen")) {
 			if (this.menuOpen) {
-				this.#c ??= l();
+				this.#c ??= r();
 				let e = this.renderRoot.querySelector(".lintje-mobile-chrome");
 				e && this.#e.activate(e, { focus: !1 });
 			} else e.get("menuOpen") === !0 && (this.#p(), this.#e.deactivate(!1), this.renderRoot.querySelector("[aria-controls=\"lintje-mobile-menu-panel\"]")?.focus());
@@ -1043,28 +1044,28 @@ var $ = class extends v {
 	}
 	#g() {
 		if (this.#i) return;
-		let e = d() ?? document.documentElement;
+		let e = u() ?? document.documentElement;
 		this.#d && this.#d !== e && (this.#d.style.scrollPaddingTop = ""), this.#d = e;
-		let n = this.mobile.matches && this.layout === "side" ? t(this, "--h-mobile-header", 72) : t(this, "--h-topbar", 56), r = this.store.state.hasFilters ? t(this, "--h-contextbar", 48) : 0;
-		e.style.scrollPaddingTop = `${Math.round(n + r)}px`;
+		let t = this.mobile.matches && this.layout === "side" ? i(this, "--h-mobile-header", 72) : i(this, "--h-topbar", 56), n = this.store.state.hasFilters ? i(this, "--h-contextbar", 48) : 0;
+		e.style.scrollPaddingTop = `${Math.round(t + n)}px`;
 	}
 	menuLeft() {
 		this.#n && clearTimeout(this.#n), this.#n = null, this.menuLeaving = !1;
 	}
 	measureFit() {
-		let e = this.renderRoot.querySelector(".lintje-top-bar"), n = this.renderRoot.querySelector(".lintje-mobile-header");
-		this.#_([e, n].filter((e) => e !== null));
-		let r = e?.querySelector(".lintje-top-bar__words"), i = e?.querySelector(".lintje-top-bar__actions");
-		if (this.layout === "side" && e && r && i && e.clientWidth) {
-			this.toolsCompact || (this.#s = i.getBoundingClientRect().width);
-			let n = getComputedStyle(e), a = e.clientWidth - parseFloat(n.paddingLeft) - parseFloat(n.paddingRight), o = r.scrollWidth + t(this, "--space-6", 24) + this.#s > a + .5;
+		let e = this.renderRoot.querySelector(".lintje-top-bar"), t = this.renderRoot.querySelector(".lintje-mobile-header");
+		this.#_([e, t].filter((e) => e !== null));
+		let n = e?.querySelector(".lintje-top-bar__words"), r = e?.querySelector(".lintje-top-bar__actions");
+		if (this.layout === "side" && e && n && r && e.clientWidth) {
+			this.toolsCompact || (this.#s = r.getBoundingClientRect().width);
+			let t = getComputedStyle(e), a = e.clientWidth - parseFloat(t.paddingLeft) - parseFloat(t.paddingRight), o = n.scrollWidth + i(this, "--space-6", 24) + this.#s > a + .5;
 			o !== this.toolsCompact && (this.toolsCompact = o);
 		}
-		if (n?.clientWidth) {
-			let e = n.classList.contains("is-compact");
-			n.classList.remove("is-compact");
-			let t = n.scrollWidth > n.clientWidth + .5;
-			n.classList.toggle("is-compact", e), t !== this.headerCompact && (this.headerCompact = t);
+		if (t?.clientWidth) {
+			let e = t.classList.contains("is-compact");
+			t.classList.remove("is-compact");
+			let n = t.scrollWidth > t.clientWidth + .5;
+			t.classList.toggle("is-compact", e), n !== this.headerCompact && (this.headerCompact = n);
 		}
 	}
 	#_(e) {
@@ -1092,19 +1093,19 @@ var $ = class extends v {
 		this.viewOpen = !1, this.shareOpen = !1, Array.from(this.renderRoot.querySelectorAll(e)).find((e) => e.getClientRects().length > 0)?.focus();
 	}
 	#y() {
-		return Array.from(this.renderRoot.querySelectorAll(".lintje-view__popover, .lintje-share__popover"), (e) => e.parentElement).some((e) => e !== null && f(e));
+		return Array.from(this.renderRoot.querySelectorAll(".lintje-view__popover, .lintje-share__popover"), (e) => e.parentElement).some((e) => e !== null && l(e));
 	}
-	showToast(e) {
-		this.toast = e;
+	showToast(e, t = "ok") {
+		this.toast = e, this.toastKind = t;
 	}
 	skipToContent(e) {
 		e.preventDefault();
-		let n = this.renderRoot.querySelector(`#${Y}`);
-		if (!n) return;
-		n.focus({ preventScroll: !0 });
-		let r = this.renderRoot.querySelectorAll(".lintje-top-bar, .lintje-mobile-header"), i = this.layout === "top" ? t(this, "--h-topbar", 56) : Math.max(0, ...Array.from(r, (e) => e.getBoundingClientRect().bottom)), a = n.getBoundingClientRect().top - i;
+		let t = this.renderRoot.querySelector(`#${Y}`);
+		if (!t) return;
+		t.focus({ preventScroll: !0 });
+		let n = this.renderRoot.querySelectorAll(".lintje-top-bar, .lintje-mobile-header"), r = this.layout === "top" ? i(this, "--h-topbar", 56) : Math.max(0, ...Array.from(n, (e) => e.getBoundingClientRect().bottom)), a = t.getBoundingClientRect().top - r;
 		if (a === 0) return;
-		let o = d();
+		let o = u();
 		o && o !== document.scrollingElement ? o.scrollBy({ top: a }) : window.scrollBy({ top: a });
 	}
 	#b() {
@@ -1112,7 +1113,7 @@ var $ = class extends v {
 		this.hasContent = Array.from(e).some((e) => e.assignedNodes({ flatten: !0 }).some((e) => e.nodeType === Node.ELEMENT_NODE || e.textContent?.trim()));
 	}
 	renderSearch() {
-		return this.data?.search ? _`<button
+		return this.data?.search ? h`<button
       type="button"
       class="lintje-shell__tool"
       aria-label="Zoeken"
@@ -1120,27 +1121,27 @@ var $ = class extends v {
       aria-keyshortcuts="/"
       @click=${() => this.askSearch()}
     >
-      ${g("functioneel-zoek", { size: 20 })}
-    </button>` : r;
+      ${v("functioneel-zoek", { size: 20 })}
+    </button>` : m;
 	}
 	renderNotifications() {
 		let e = this.data?.notifications;
-		return e ? _`<lintje-notifications .items=${e}></lintje-notifications>` : r;
+		return e ? h`<lintje-notifications .items=${e}></lintje-notifications>` : m;
 	}
 	renderUserMenu(e) {
 		let t = this.data;
-		return t?.user ? _`<lintje-user-menu
+		return t?.user ? h`<lintje-user-menu
       class=${e ? "lintje-shell__sheet-user" : "lintje-shell__user"}
       ?inline=${e}
       .user=${t.user}
       .items=${t.userMenu ?? []}
-      version=${t.version ?? r}
-      logout-action=${t.logout?.href ?? r}
-      csrf=${t.logout?.token ?? r}
-    ></lintje-user-menu>` : r;
+      version=${t.version ?? m}
+      logout-action=${t.logout?.href ?? m}
+      csrf=${t.logout?.token ?? m}
+    ></lintje-user-menu>` : m;
 	}
 	renderSkipLink() {
-		return _`<a
+		return h`<a
       class="lintje-shell__skip focus-inset"
       href="#${Y}"
       @click=${(e) => this.skipToContent(e)}
@@ -1160,20 +1161,36 @@ var $ = class extends v {
 			} : void 0
 		});
 	}
+	renderPrintHead(e) {
+		let t = [e.name, e.environment].filter(Boolean).join(" · ");
+		return h`<div class="lintje-shell__print-head" aria-hidden="true">
+      <div class="lintje-shell__print-logo">
+        <lintje-logo
+          full
+          width=${x.desktop}
+          src=${e.logo ?? m}
+          name=${e.emblem?.name ?? m}
+          alt=${e.emblem?.label ?? m}
+          byline=${e.emblem?.byline ?? m}
+        ></lintje-logo>
+      </div>
+      ${t ? h`<p class="lintje-shell__print-name">${t}</p>` : m}
+    </div>`;
+	}
 	renderNavEnd(e) {
 		let t = e.feedback;
-		return _`${this.renderSearch()}${this.renderNotifications()}${H(this)}${t ? _`<a
+		return h`${this.renderSearch()}${this.renderNotifications()}${H(this)}${t ? h`<a
             class="lintje-shell__tool"
             href=${t.href}
             aria-label=${M(t)}
             title=${M(t)}
-            >${g("communicatie-tekstballonnen-met-vraagteken", { size: 20 })}</a
-          >` : r}${this.renderUserMenu(!1)}`;
+            >${v("communicatie-tekstballonnen-met-vraagteken", { size: 20 })}</a
+          >` : m}${this.renderUserMenu(!1)}`;
 	}
 	renderTop(e, t) {
-		return _`${this.renderLogo(x.desktop)}
+		return h`${this.renderLogo(x.desktop)}
       <div class="lintje-shell__sentinel" aria-hidden="true"></div>
-      <div class=${h({
+      <div class=${_({
 			"lintje-shell__nav": !0,
 			"is-stuck": this.barStuck
 		})}>
@@ -1184,16 +1201,16 @@ var $ = class extends v {
 			collapsed: this.submenu.collapsed,
 			onNavigate: (e, t) => this.follow(e.href, t),
 			onOpen: (e) => this.openGroup = e,
-			start: e.name ? _`<h1 class="lintje-shell__name" title=${e.name}>${e.name}</h1>` : r,
+			start: e.name ? h`<h1 class="lintje-shell__name" title=${e.name}>${e.name}</h1>` : m,
 			end: this.renderNavEnd(e)
 		})}
       </div>
       ${he(this.openGroup !== null)}`;
 	}
 	renderTopPhone(e) {
-		return _`${this.renderLogo(x.phone)}
+		return h`${this.renderLogo(x.phone)}
       <div class="lintje-shell__sentinel" aria-hidden="true"></div>
-      <div class=${h({
+      <div class=${_({
 			"lintje-shell__mobile-bar": !0,
 			"is-stuck": this.barStuck
 		})}>
@@ -1202,9 +1219,9 @@ var $ = class extends v {
 	}
 	renderMain() {
 		let e = () => this.#b();
-		return _`<main
+		return h`<main
       id=${Y}
-      class=${h({
+      class=${_({
 			"lintje-shell__main": !0,
 			"is-bare": !this.hasContent
 		})}
@@ -1218,31 +1235,31 @@ var $ = class extends v {
     </main>`;
 	}
 	renderToast() {
-		return this.toast ? _`<lintje-toast
-          kind="ok"
+		return this.toast ? h`<lintje-toast
+          kind=${this.toastKind}
           @lintje-close=${(e) => {
 			e.stopPropagation(), this.toast = null;
 		}}
           >${this.toast}</lintje-toast
-        >` : r;
+        >` : m;
 	}
 	render() {
 		let e = this.data;
-		if (!e) return r;
+		if (!e) return m;
 		let t = Q(e.navigation ?? []);
-		return this.layout === "top" ? _`<div
-        class=${h({
+		return this.layout === "top" ? h`<div
+        class=${_({
 			"lintje-shell": !0,
 			"lintje-shell--top": !0,
 			"is-nested": this.#i,
 			"is-phone": this.mobile.matches
 		})}
       >
-        ${this.renderSkipLink()}
+        ${this.renderSkipLink()} ${this.renderPrintHead(e)}
         ${this.mobile.matches ? this.renderTopPhone(t) : this.renderTop(e, t)}
         ${this.renderMain()} <slot name="footer"></slot> ${this.renderToast()}
-      </div>` : _`<div
-      class=${h({
+      </div>` : h`<div
+      class=${_({
 			"lintje-shell": !0,
 			"lintje-shell--side": !0,
 			"is-unpinned": e.menu === "unpinned",
@@ -1252,13 +1269,13 @@ var $ = class extends v {
     >
       ${this.renderSkipLink()} ${F(this, t)}
       <div class="lintje-shell__column">
-        ${q(this, t)} ${Ce(this)} ${this.renderMain()}
+        ${this.renderPrintHead(e)} ${q(this, t)} ${Ce(this)} ${this.renderMain()}
         <slot name="footer"></slot>
       </div>
       ${this.renderToast()}
     </div>`;
 	}
 };
-n("lintje-shell", $);
+ee("lintje-shell", $);
 //#endregion
 export { $ as LintjeShell, Q as toGroups };