@0001-labs/design-system-1 0.3.0 → 0.3.2

package/dist/design-system-1.bundle.js

@@ -2260,6 +2260,198 @@ function initGridFit() {
 	fit();
 }
 //#endregion
+//#region DS1/0-face/fault-lines.ts
+var tolerance = 1;
+var near$1 = (a, b) => Math.abs(a - b) <= tolerance;
+var style = (el) => el.ownerDocument.defaultView.getComputedStyle(el);
+var visible$1 = (el) => {
+	const box = el.getBoundingClientRect();
+	return box.width > 0 && box.height > 0 && style(el).visibility !== "hidden" && style(el).display !== "none";
+};
+/** Walk each open shadow tree once; slotted children already occur in the light tree. */
+function elements(root) {
+	return Array.from(root.querySelectorAll("*")).flatMap((el) => [el, ...el.shadowRoot ? elements(el.shadowRoot) : []]);
+}
+/** Related grids opt in by name; unlabelled card grids are candidates for human review. */
+function faultLineGrids(root) {
+	return elements(root).flatMap((element) => {
+		const family = element.getAttribute("data-ds-fault-lines");
+		if (family === "off" || !visible$1(element)) return [];
+		const children = Array.from(element.children).filter(visible$1);
+		if (!children.length) return [];
+		if (family === null && (!/grid/.test(style(element).display) || children.length < 2 || !children.every((child) => child.matches("ds-card, .ds-card, ds-button, button")))) return [];
+		const axis = element.getAttribute("data-ds-fault-axis") === "y" ? "y" : "x";
+		const boxes = children.map((child) => child.getBoundingClientRect());
+		const crossStart = (box) => axis === "x" ? box.top : box.left;
+		const crossEnd = (box) => axis === "x" ? box.bottom : box.right;
+		const start = (box) => axis === "x" ? box.left : box.top;
+		const end = (box) => axis === "x" ? box.right : box.bottom;
+		const bands = [];
+		for (const box of boxes.sort((a, b) => crossStart(a) - crossStart(b))) {
+			const band = bands.find((row) => near$1(crossStart(row[0]), crossStart(box)));
+			if (band) band.push(box);
+			else bands.push([box]);
+		}
+		const band = [...bands].sort((a, b) => b.length - a.length)[0].sort((a, b) => start(a) - start(b));
+		const lines = band.flatMap((box) => [start(box), end(box)]);
+		const gaps = band.slice(1).map((box, index) => start(box) - end(band[index]));
+		const crossGaps = bands.slice(1).map((row, index) => Math.min(...row.map(crossStart)) - Math.max(...bands[index].map(crossEnd)));
+		const internalDrift = bands.some((row) => row.length === band.length && row.slice().sort((a, b) => start(a) - start(b)).some((box, index) => !near$1(start(box), lines[index * 2]) || !near$1(end(box), lines[index * 2 + 1]))) || crossGaps.some((gap) => !near$1(gap, crossGaps[0]));
+		return [{
+			element,
+			family,
+			axis,
+			lines,
+			gaps,
+			crossGap: crossGaps[0],
+			internalDrift,
+			start: lines[0],
+			end: lines[lines.length - 1]
+		}];
+	});
+}
+function referenceFor(grids, i) {
+	const current = grids[i];
+	return grids.slice(0, i).find((other) => {
+		if (other.axis !== current.axis || other.lines.length !== current.lines.length) return false;
+		if (current.family !== null || other.family !== null) return current.family !== null && current.family === other.family;
+		return near$1(current.start, other.start) && near$1(current.end, other.end);
+	});
+}
+/** Fault lines compare rendered tracks across separate sections, in the current viewport. */
+function inspectFaultLines(root) {
+	const grids = faultLineGrids(root);
+	const findings = [];
+	for (let i = 0; i < grids.length; i++) {
+		const current = grids[i];
+		if (current.internalDrift) findings.push({
+			element: current.element,
+			...current.family === null ? { review: true } : {},
+			message: `Fault lines at ${current.element.ownerDocument.documentElement.clientWidth}px: tracks or repeated gaps drift inside ${current.family || "this card grid"}. Align its complete rows and repeated spacing.`
+		});
+		const reference = referenceFor(grids, i);
+		if (!reference) continue;
+		const drift = current.lines.map((line, index) => Math.abs(line - reference.lines[index]));
+		const gapDrift = current.gaps.some((gap, index) => !near$1(gap, reference.gaps[index]));
+		const rowDrift = current.crossGap !== void 0 && reference.crossGap !== void 0 && !near$1(current.crossGap, reference.crossGap);
+		if (!drift.some((value) => value > tolerance) && !gapDrift && !rowDrift) continue;
+		const width = current.element.ownerDocument.documentElement.clientWidth;
+		const review = current.family === null;
+		findings.push({
+			element: current.element,
+			...review ? { review: true } : {},
+			message: `Fault lines at ${width}px: ${current.family || "these card grids"} ${review ? "may be related but have" : "have"} misaligned ${current.axis === "x" ? "column" : "row"} edges or unequal gaps (edge drift ${Math.round(Math.max(...drift))}px; gaps ${current.gaps.map(Math.round).join("/")}px versus ${reference.gaps.map(Math.round).join("/")}px${rowDrift ? `; cross-axis gap ${Math.round(current.crossGap)}px versus ${Math.round(reference.crossGap)}px` : ""}). ${review ? "Name the related groups with data-ds-fault-lines to enforce alignment, or mark an intentional exception off." : "Use the same tracks and gap for this family at this viewport."}`
+		});
+	}
+	return findings;
+}
+/** The same rendered geometry as the checker, painted without affecting layout or hit testing. */
+function paintFaultLines(root, layer) {
+	const doc = layer.ownerDocument;
+	const width = doc.documentElement.clientWidth;
+	const height = doc.defaultView.innerHeight;
+	layer.setAttribute("viewBox", `0 0 ${width} ${height}`);
+	layer.setAttribute("width", String(width));
+	layer.setAttribute("height", String(height));
+	layer.setAttribute("aria-hidden", "true");
+	layer.style.cssText = "position:fixed;inset:0;pointer-events:none;overflow:hidden;z-index:2147483644";
+	layer.replaceChildren();
+	const grids = faultLineGrids(root);
+	const failed = new Set(inspectFaultLines(root).map((finding) => finding.element));
+	const drawn = /* @__PURE__ */ new Set();
+	const referenceInk = "#087ba8";
+	const faultInk = "#de0331";
+	function mark(tag, attributes, title) {
+		const node = doc.createElementNS("http://www.w3.org/2000/svg", tag);
+		for (const [key, value] of Object.entries(attributes)) node.setAttribute(key, String(value));
+		if (title) {
+			const tip = doc.createElementNS(node.namespaceURI, "title");
+			tip.textContent = title;
+			node.appendChild(tip);
+		}
+		layer.appendChild(node);
+		return node;
+	}
+	for (let index = 0; index < grids.length; index++) {
+		const grid = grids[index];
+		const reference = referenceFor(grids, index) ?? grid;
+		for (const edge of reference.lines) {
+			const key = `${grid.axis}:${edge}`;
+			if (drawn.has(key)) continue;
+			drawn.add(key);
+			mark("line", {
+				"data-fault-reference": "",
+				x1: grid.axis === "x" ? edge : 0,
+				y1: grid.axis === "y" ? edge : 0,
+				x2: grid.axis === "x" ? edge : width,
+				y2: grid.axis === "y" ? edge : height,
+				stroke: referenceInk,
+				"stroke-width": 1,
+				"stroke-dasharray": "4 4"
+			}, "Reference edge");
+		}
+		if (!failed.has(grid.element)) continue;
+		for (const child of Array.from(grid.element.children).filter(visible$1)) {
+			const box = child.getBoundingClientRect();
+			const edges = grid.axis === "x" ? [box.left, box.right] : [box.top, box.bottom];
+			for (const edge of edges) {
+				if (reference.lines.some((expected) => near$1(edge, expected))) continue;
+				mark("line", {
+					"data-fault-actual": "",
+					x1: grid.axis === "x" ? edge : box.left,
+					y1: grid.axis === "y" ? edge : box.top,
+					x2: grid.axis === "x" ? edge : box.right,
+					y2: grid.axis === "y" ? edge : box.bottom,
+					stroke: faultInk,
+					"stroke-width": 2
+				}, "Actual edge differs from the dashed reference");
+			}
+		}
+		const rows = [];
+		for (const child of Array.from(grid.element.children).filter(visible$1)) {
+			const box = child.getBoundingClientRect();
+			const start = grid.axis === "x" ? box.top : box.left;
+			const row = rows.find((row) => near$1(grid.axis === "x" ? row[0].top : row[0].left, start));
+			if (row) row.push(box);
+			else rows.push([box]);
+		}
+		rows.sort((a, b) => grid.axis === "x" ? a[0].top - b[0].top : a[0].left - b[0].left);
+		const bounds = grid.element.getBoundingClientRect();
+		const crossGap = reference.crossGap ?? grid.crossGap;
+		if (crossGap !== void 0) for (let row = 1; row < rows.length; row++) {
+			const previousEnd = Math.max(...rows[row - 1].map((box) => grid.axis === "x" ? box.bottom : box.right));
+			const actual = Math.min(...rows[row].map((box) => grid.axis === "x" ? box.top : box.left));
+			const expected = previousEnd + crossGap;
+			if (near$1(actual, expected)) continue;
+			for (const [edge, kind] of [[expected, "reference"], [actual, "actual"]]) mark("line", {
+				[`data-fault-${kind}`]: "",
+				x1: grid.axis === "x" ? bounds.left : edge,
+				y1: grid.axis === "x" ? edge : bounds.top,
+				x2: grid.axis === "x" ? bounds.right : edge,
+				y2: grid.axis === "x" ? edge : bounds.bottom,
+				stroke: kind === "reference" ? referenceInk : faultInk,
+				"stroke-width": kind === "reference" ? 1 : 2,
+				"stroke-dasharray": kind === "reference" ? "4 4" : ""
+			}, `Row gap ${Math.round(actual - previousEnd)}px; reference ${Math.round(crossGap)}px`);
+		}
+		const box = grid.element.getBoundingClientRect();
+		const label = mark("text", {
+			"data-fault-gap": "",
+			x: Math.max(4, box.left),
+			y: Math.max(16, Math.min(height - 4, box.top + 16)),
+			fill: faultInk,
+			stroke: "var(--ds-background-color, white)",
+			"stroke-width": 3,
+			"paint-order": "stroke",
+			"font-family": "var(--ds-typeface-regular, sans-serif)",
+			"font-size": 12
+		});
+		const gaps = grid.gaps.map((gap) => Math.round(gap)).join("/");
+		const expected = reference.gaps.map((gap) => Math.round(gap)).join("/");
+		label.textContent = `Gap ${gaps || "—"}px · reference ${expected || "—"}px` + (grid.crossGap !== void 0 && reference.crossGap !== void 0 && !near$1(grid.crossGap, reference.crossGap) ? ` · row gap ${Math.round(grid.crossGap)}px / ${Math.round(reference.crossGap)}px` : "");
+	}
+}
+//#endregion
 //#region DS1/0-face/button-label.ts
 function labelledButtons(root) {
 	return [...root.querySelectorAll("ds-button:not([icon]):not([split]),button:not(ds-button button),a[role=\"button\"]")].filter((button) => button.getBoundingClientRect().width && (button.textContent?.trim() || button.getAttribute("text")));
@@ -2635,6 +2827,11 @@ function inspectWordWrap(root) {
 }
 //#endregion
 //#region DS1/0-face/constraints.ts
+/** The actual initial, including a component nested in another open shadow root. */
+function isAvatarInitial(element) {
+	for (let parent = element; parent; parent = parent.assignedSlot ?? parent.parentElement ?? parent.getRootNode().host ?? null) if (parent.matches("ds-avatar, .ds-avatar")) return true;
+	return false;
+}
 /** A pixel either way is the same place. */
 var near = (a, b) => Math.abs(a - b) <= 1;
 var px = (n) => `${Math.round(n)}px`;
@@ -2697,6 +2894,19 @@ function rows(found) {
 	return groups.filter((row) => row.length > 1);
 }
 var constraints = [
+	{
+		code: "page.fault-lines",
+		rule: "Fault lines keep related card and control grids aligned across the whole page, with matching track edges and gaps at every checked viewport width.",
+		why: "Compare separate sections in the same alignment family; responsive layouts may change together, while unrelated groups and intentional exceptions remain independent.",
+		components: ["ds-page"],
+		check: {
+			file: "tests/fault-lines.test.ts",
+			test: "fault lines catch shifted tracks and unequal gaps across sections at each viewport"
+		},
+		measures: ["alignment group", "alignment groups"],
+		count: (root) => faultLineGrids(root).length,
+		inspect: inspectFaultLines
+	},
 	{
 		code: "select.hug",
 		rule: "Select and date-picker triggers use hug sizing, never fill sizing or growing to occupy the available row.",
@@ -2759,6 +2969,19 @@ var constraints = [
 		count: (root) => measureTextContrast(root).length,
 		inspect: inspectTextContrast
 	},
+	{
+		code: "avatar.initial-contrast",
+		rule: "Avatar initials have at least 4.5:1 contrast against their rendered fill, including after a theme or identity colour changes.",
+		why: "Check each initial inside the avatar’s shadow root and in overlapping groups; decorative initials still need to be readable. Explicit ink overrides must pass too.",
+		components: ["ds-avatar"],
+		check: {
+			file: "tests/avatar-contrast.test.ts",
+			test: "avatar initials stay readable after theme and CSS-variable changes, and the avatar constraint catches overrides"
+		},
+		measures: ["avatar initial", "avatar initials"],
+		count: (root) => measureTextContrast(root).filter((result) => isAvatarInitial(result.element)).length,
+		inspect: (root) => inspectTextContrast(root).filter((finding) => isAvatarInitial(finding.element))
+	},
 	{
 		code: "card.media-level",
 		rule: "A card's picture stands on the card's foot, a square below the words at least, so the pictures of cards side by side stand on one level whatever the words above them.",
@@ -2925,14 +3148,16 @@ function skillBlock(list = constraints) {
 	lines.push("", skillEnd);
 	return lines.join("\n");
 }
-//#endregion
-//#region DS1/0-face/constraint-site.ts
-/** The narrowest phone still sold, the common ones and the widest. */
-var PHONE_WIDTHS = [
-	320,
-	375,
-	393,
-	430
+var VIEWPORT_WIDTHS = [
+	...[
+		320,
+		375,
+		393,
+		430
+	],
+	768,
+	1024,
+	1440
 ];
 /** An element as a person finds it: its tag, id and classes, and the start of its words. */
 function describeElement(element) {
@@ -2972,7 +3197,7 @@ var wait = (ms) => new Promise((done) => setTimeout(done, ms));
 * order of `widths`. The page reflows at each width without loading again. The address carries `ph=out`,
 * the analytics opt-out most trackers honour, so the check counts no visits.
 */
-async function inspectInFrame(host, url, widths = PHONE_WIDTHS, height = 844) {
+async function inspectInFrame(host, url, widths = VIEWPORT_WIDTHS, height = 844) {
 	const frame = document.createElement("iframe");
 	frame.setAttribute("aria-hidden", "true");
 	frame.tabIndex = -1;
@@ -3032,7 +3257,7 @@ function checkPage(page) {
 * each width as it comes. Stops starting pages when `signal` aborts. Whatever the pages store in this
 * browser while they are checked is put back afterwards.
 */
-async function checkSite({ pages, widths = PHONE_WIDTHS, inspect, onResult, signal, atOnce = 3 }) {
+async function checkSite({ pages, widths = VIEWPORT_WIDTHS, inspect, onResult, signal, atOnce = 3 }) {
 	const kept = storedNow();
 	const results = [];
 	const total = pages.length * widths.length;
@@ -3149,7 +3374,8 @@ function createConstraintPanel() {
       --danger: var(--ds-danger-color, light-dark(#de0331, #ff5f5f));
     }
     :host([hidden]) { display: none !important; }
-    .rings { position: absolute; inset: 0; overflow: hidden; }
+    .fault-lines { z-index: 0 !important; }
+    .rings { z-index: 1; position: absolute; inset: 0; overflow: hidden; }
     .frames { position: absolute; width: 0; height: 0; overflow: hidden; }
     .ring {
       position: absolute;
@@ -3171,6 +3397,7 @@ function createConstraintPanel() {
       text-align: center;
     }
     aside {
+      z-index: 2;
       position: absolute;
       inset-block: 0;
       inset-inline-end: 0;
@@ -3217,14 +3444,18 @@ function createConstraintPanel() {
     .code b { color: var(--danger); font-weight: 400; }
     .rule { color: var(--muted); }
     p { margin: 0; }
+    :host([data-lines-only]) aside { inset-block: 0 auto; width: auto; padding: calc(var(--u) / 2); }
+    :host([data-lines-only]) aside > :not(header), :host([data-lines-only]) header > :not([data-lines], [data-close]) { display: none; }
+    :host([data-lines-only]) header { margin: 0; }
     @media print { :host { display: none !important; } }
-  </style><div class="rings"></div><div class="frames"></div><aside aria-label="Constraints">
-    <header><strong>Constraints</strong><button type="button" data-run>Page</button><button type="button" data-site>Site</button><button type="button" data-close aria-label="Close">Close</button></header>
-    <p data-status aria-live="polite"></p>
+  </style><svg class="fault-lines" aria-hidden="true"></svg><div class="rings"></div><div class="frames"></div><aside aria-label="Constraints">
+    <header><strong>Constraints</strong><button type="button" data-run>Page</button><button type="button" data-site>Site</button><button type="button" data-lines>Lines</button><button type="button" data-close aria-label="Close">Close</button></header>
+    <p data-status aria-live="polite"></p><p class="rule">Fault lines: dashed reference · red drift</p>
     <ol data-findings></ol>
     <section data-rules hidden><h3>Rules</h3><ol></ol></section>
     <section data-pages hidden><h3>Pages</h3><ol></ol></section>
   </aside>`;
+	const faultLines = shadow.querySelector(".fault-lines");
 	const rings = shadow.querySelector(".rings");
 	const list = shadow.querySelector("[data-findings]");
 	const rulesSection = shadow.querySelector("[data-rules]");
@@ -3234,6 +3465,12 @@ function createConstraintPanel() {
 	const status = shadow.querySelector("[data-status]");
 	const title = shadow.querySelector("strong");
 	const frames = shadow.querySelector(".frames");
+	const linesButton = shadow.querySelector("[data-lines]");
+	const setLinesOnly = (enabled) => {
+		panel.toggleAttribute("data-lines-only", enabled);
+		linesButton.textContent = enabled ? "Results" : "Lines";
+	};
+	linesButton.addEventListener("click", () => setLinesOnly(!panel.hasAttribute("data-lines-only")));
 	const siteButton = shadow.querySelector("[data-site]");
 	let site = null;
 	let findings = [];
@@ -3241,6 +3478,7 @@ function createConstraintPanel() {
 	let frame = 0;
 	const place = () => {
 		frame = 0;
+		paintFaultLines(document, faultLines);
 		rings.replaceChildren(...findings.map(({ element }, index) => {
 			const rect = element.getBoundingClientRect();
 			const ring = document.createElement("div");
@@ -3256,6 +3494,8 @@ function createConstraintPanel() {
 	const schedule = () => {
 		if (!frame) frame = requestAnimationFrame(place);
 	};
+	const layoutChanges = new MutationObserver(schedule);
+	const sizeChanges = typeof ResizeObserver === "undefined" ? null : new ResizeObserver(schedule);
 	const stopSite = () => {
 		site?.abort();
 		site = null;
@@ -3408,7 +3648,7 @@ function createConstraintPanel() {
 		title.textContent = "Constraints";
 		status.textContent = "Finding the pages…";
 		const pages = await findSitePages();
-		const widths = `${PHONE_WIDTHS.slice(0, -1).join(", ")} and ${PHONE_WIDTHS[PHONE_WIDTHS.length - 1]}px`;
+		const widths = `${VIEWPORT_WIDTHS.slice(0, -1).join(", ")} and ${VIEWPORT_WIDTHS[VIEWPORT_WIDTHS.length - 1]}px`;
 		let broken = 0;
 		const results = await checkSite({
 			pages,
@@ -3435,8 +3675,22 @@ function createConstraintPanel() {
 	const show = (mode = "page") => {
 		if (!panel.isConnected) document.body.appendChild(panel);
 		panel.hidden = false;
+		setLinesOnly(window.innerWidth < 640);
 		if (mode === "site") runSite();
 		else run();
+		layoutChanges.observe(document.body, {
+			subtree: true,
+			childList: true,
+			attributes: true,
+			attributeFilter: [
+				"style",
+				"class",
+				"hidden",
+				"data-ds-fault-lines",
+				"data-ds-fault-axis"
+			]
+		});
+		sizeChanges?.observe(document.body);
 		window.addEventListener("scroll", schedule, {
 			passive: true,
 			capture: true
@@ -3446,6 +3700,11 @@ function createConstraintPanel() {
 	const hide = () => {
 		stopSite();
 		panel.hidden = true;
+		if (frame) cancelAnimationFrame(frame);
+		frame = 0;
+		faultLines.replaceChildren();
+		layoutChanges.disconnect();
+		sizeChanges?.disconnect();
 		window.removeEventListener("scroll", schedule, { capture: true });
 		window.removeEventListener("resize", schedule);
 	};
@@ -5030,7 +5289,7 @@ function define(name, element) {
 	const type = element;
 	const prototype = element.prototype;
 	const original = prototype.createRenderRoot;
-	if (original) {
+	if (original && typeof document !== "undefined") {
 		const definingDocument = document;
 		prototype.createRenderRoot = function() {
 			var _this$renderOptions;
@@ -5800,7 +6059,7 @@ _Icon.styles = r$4(ds_icon_default);
 define("ds-icon", Icon);
 //#endregion
 //#region DS1/2-core/styles/ds-badge.css?inline
-var ds_badge_default = "/* Shape is a surface preference. Keep these base lengths unscaled: each\n * component resolves them with its own --ds-sf in component-metrics.css. */\n[data-ds-shape=\"square\"],\n:host([data-ds-shape=\"square\"]) {\n  --ds-corner-size: 0px;\n  --ds-corner-shape: round;\n  --ds-button-inset: 0.5px;\n}\n\n[data-ds-shape=\"rounded\"],\n:host([data-ds-shape=\"rounded\"]) {\n  --ds-corner-size: 4px;\n  --ds-corner-shape: round;\n  --ds-button-inset: 2.5px;\n}\n\n[data-ds-shape=\"circular\"],\n:host([data-ds-shape=\"circular\"]) {\n  --ds-corner-size: 999px;\n  --ds-corner-shape: round;\n  --ds-button-inset: 5px;\n}\n\n/* A squircle needs twice an arc's radius for the same apparent corner.\n * Circular controls keep true semicircles even in a squircle browser. */\n@supports (corner-shape: squircle) {\n  [data-ds-shape=\"rounded\"],\n  :host([data-ds-shape=\"rounded\"]) {\n    --ds-corner-size: 8px;\n    --ds-corner-shape: squircle;\n  }\n}\n/* Resolve dimensions where a component is drawn. Inherited calc() values have\n * already used their ancestor's scale. Base tokens stay unscaled and inherit;\n * resolved tokens can still be overridden directly on a component.\n * data-ds-surface gives ordinary layout elements the same scaled measures.\n */\n:root,\n:host,\n:where([data-ds-surface]) {\n  --ds-unit: calc(var(--ds-1, 20px) * var(--ds-sf, 1));\n  --ds-control-height: calc(var(--ds-control-size, var(--ds-08, 16px)) * var(--ds-sf, 1));\n  --ds-row-height: calc(var(--ds-row-size, var(--ds-1, 20px)) * var(--ds-sf, 1));\n  --ds-type-size-default: calc(var(--ds-text-size, 14px) * var(--ds-sf, 1));\n  --ds-type-size-small: calc(var(--ds-small-text-size, 10px) * var(--ds-sf, 1));\n  --ds-type-size-heading: calc(var(--ds-heading-text-size, 13px) * var(--ds-sf, 1));\n  --ds-type-size-display: calc(var(--ds-display-text-size, 20px) * var(--ds-sf, 1));\n  --ds-type-lineheight-default: calc(var(--ds-text-leading, 16px) * var(--ds-sf, 1));\n  --ds-type-letterspacing-default: calc(var(--ds-text-tracking, -0.3px) * var(--ds-sf, 1));\n  --ds-radius: calc(var(--ds-corner-size, 4px) * var(--ds-sf, 1));\n  --ds-radius-card: calc(var(--ds-card-corner-size, 4px) * var(--ds-sf, 1));\n}\n:host { display: inline-flex; flex: 0 0 auto; min-width: 0; max-width: 100%; vertical-align: middle; }\n:host([hidden]) { display: none !important; }\n.frame {\n  display: inline-flex;\n  align-items: center;\n  box-sizing: border-box;\n  gap: calc(4px * var(--ds-sf));\n  height: var(--ds-row-height);\n  min-width: var(--ds-row-height);\n  max-width: 100%;\n  padding-inline: calc(4px * var(--ds-sf));\n  background: var(--ds-badge-background, var(--ds-fill));\n  color: var(--ds-badge-color, var(--ds-text-color));\n  font-family: var(--ds-typeface-regular);\n  font-feature-settings: var(--ds-font-features);\n  font-size: var(--ds-type-size-default);\n  line-height: var(--ds-type-lineheight-default);\n  letter-spacing: var(--ds-type-letterspacing-default);\n}\n.label { min-width: 0; overflow: hidden; text-overflow: clip; white-space: nowrap; }\n/* Cut words fade over their last square, the fill staying whole; never an ellipsis (0-face/cut-fade.ts marks them). */\n.label[data-cut=\"end\"] { mask-image: linear-gradient(to right, #000 calc(100% - var(--ds-unit)), transparent); }\n:host(:dir(rtl)) .label[data-cut=\"end\"] { mask-image: linear-gradient(to left, #000 calc(100% - var(--ds-unit)), transparent); }\nds-icon { flex: 0 0 auto; }\n.icon-only { position: relative; width: var(--ds-row-height); padding: 0; justify-content: center; }\n/* Keep the words available to assistive technology when only the icon fits. */\n.icon-only .label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }\n";
+var ds_badge_default = "/* Shape is a surface preference. Keep these base lengths unscaled: each\n * component resolves them with its own --ds-sf in component-metrics.css. */\n[data-ds-shape=\"square\"],\n:host([data-ds-shape=\"square\"]) {\n  --ds-corner-size: 0px;\n  --ds-corner-shape: round;\n  --ds-button-inset: 0.5px;\n}\n\n[data-ds-shape=\"rounded\"],\n:host([data-ds-shape=\"rounded\"]) {\n  --ds-corner-size: 4px;\n  --ds-corner-shape: round;\n  --ds-button-inset: 2.5px;\n}\n\n[data-ds-shape=\"circular\"],\n:host([data-ds-shape=\"circular\"]) {\n  --ds-corner-size: 999px;\n  --ds-corner-shape: round;\n  --ds-button-inset: 5px;\n}\n\n/* A squircle needs twice an arc's radius for the same apparent corner.\n * Circular controls keep true semicircles even in a squircle browser. */\n@supports (corner-shape: squircle) {\n  [data-ds-shape=\"rounded\"],\n  :host([data-ds-shape=\"rounded\"]) {\n    --ds-corner-size: 8px;\n    --ds-corner-shape: squircle;\n  }\n}\n/* Resolve dimensions where a component is drawn. Inherited calc() values have\n * already used their ancestor's scale. Base tokens stay unscaled and inherit;\n * resolved tokens can still be overridden directly on a component.\n * data-ds-surface gives ordinary layout elements the same scaled measures.\n */\n:root,\n:host,\n:where([data-ds-surface]) {\n  --ds-unit: calc(var(--ds-1, 20px) * var(--ds-sf, 1));\n  --ds-control-height: calc(var(--ds-control-size, var(--ds-08, 16px)) * var(--ds-sf, 1));\n  --ds-row-height: calc(var(--ds-row-size, var(--ds-1, 20px)) * var(--ds-sf, 1));\n  --ds-type-size-default: calc(var(--ds-text-size, 14px) * var(--ds-sf, 1));\n  --ds-type-size-small: calc(var(--ds-small-text-size, 10px) * var(--ds-sf, 1));\n  --ds-type-size-heading: calc(var(--ds-heading-text-size, 13px) * var(--ds-sf, 1));\n  --ds-type-size-display: calc(var(--ds-display-text-size, 20px) * var(--ds-sf, 1));\n  --ds-type-lineheight-default: calc(var(--ds-text-leading, 16px) * var(--ds-sf, 1));\n  --ds-type-letterspacing-default: calc(var(--ds-text-tracking, -0.3px) * var(--ds-sf, 1));\n  --ds-radius: calc(var(--ds-corner-size, 4px) * var(--ds-sf, 1));\n  --ds-radius-card: calc(var(--ds-card-corner-size, 4px) * var(--ds-sf, 1));\n}\n:host { display: inline-flex; flex: 0 0 auto; min-width: 0; max-width: 100%; vertical-align: middle; }\n:host([hidden]) { display: none !important; }\n.frame {\n  display: inline-flex;\n  align-items: center;\n  box-sizing: border-box;\n  gap: calc(4px * var(--ds-sf));\n  height: var(--ds-row-height);\n  min-width: var(--ds-row-height);\n  max-width: 100%;\n  padding-inline: calc(4px * var(--ds-sf));\n  background: var(--ds-badge-background, var(--ds-fill));\n  color: var(--ds-badge-color, var(--ds-text-color));\n  font-family: \"Inter Arrows\", var(--ds-typeface-regular);\n  font-feature-settings: var(--ds-font-features);\n  font-size: var(--ds-type-size-default);\n  line-height: var(--ds-type-lineheight-default);\n  letter-spacing: var(--ds-type-letterspacing-default);\n}\n.label { min-width: 0; overflow: hidden; text-overflow: clip; white-space: nowrap; }\n/* Cut words fade over their last square, the fill staying whole; never an ellipsis (0-face/cut-fade.ts marks them). */\n.label[data-cut=\"end\"] { mask-image: linear-gradient(to right, #000 calc(100% - var(--ds-unit)), transparent); }\n:host(:dir(rtl)) .label[data-cut=\"end\"] { mask-image: linear-gradient(to left, #000 calc(100% - var(--ds-unit)), transparent); }\nds-icon { flex: 0 0 auto; }\n.icon-only { position: relative; width: var(--ds-row-height); padding: 0; justify-content: center; }\n/* Keep the words available to assistive technology when only the icon fits. */\n.icon-only .label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }\n";
 //#endregion
 //#region DS1/2-core/ds-badge.ts
 var _Badge;
@@ -5884,7 +6143,7 @@ _Badge.styles = r$4(ds_badge_default);
 define("ds-badge", Badge);
 //#endregion
 //#region DS1/2-core/styles/ds-tag.css?inline
-var ds_tag_default = "/* Shape is a surface preference. Keep these base lengths unscaled: each\n * component resolves them with its own --ds-sf in component-metrics.css. */\n[data-ds-shape=\"square\"],\n:host([data-ds-shape=\"square\"]) {\n  --ds-corner-size: 0px;\n  --ds-corner-shape: round;\n  --ds-button-inset: 0.5px;\n}\n\n[data-ds-shape=\"rounded\"],\n:host([data-ds-shape=\"rounded\"]) {\n  --ds-corner-size: 4px;\n  --ds-corner-shape: round;\n  --ds-button-inset: 2.5px;\n}\n\n[data-ds-shape=\"circular\"],\n:host([data-ds-shape=\"circular\"]) {\n  --ds-corner-size: 999px;\n  --ds-corner-shape: round;\n  --ds-button-inset: 5px;\n}\n\n/* A squircle needs twice an arc's radius for the same apparent corner.\n * Circular controls keep true semicircles even in a squircle browser. */\n@supports (corner-shape: squircle) {\n  [data-ds-shape=\"rounded\"],\n  :host([data-ds-shape=\"rounded\"]) {\n    --ds-corner-size: 8px;\n    --ds-corner-shape: squircle;\n  }\n}\n/* Resolve dimensions where a component is drawn. Inherited calc() values have\n * already used their ancestor's scale. Base tokens stay unscaled and inherit;\n * resolved tokens can still be overridden directly on a component.\n * data-ds-surface gives ordinary layout elements the same scaled measures.\n */\n:root,\n:host,\n:where([data-ds-surface]) {\n  --ds-unit: calc(var(--ds-1, 20px) * var(--ds-sf, 1));\n  --ds-control-height: calc(var(--ds-control-size, var(--ds-08, 16px)) * var(--ds-sf, 1));\n  --ds-row-height: calc(var(--ds-row-size, var(--ds-1, 20px)) * var(--ds-sf, 1));\n  --ds-type-size-default: calc(var(--ds-text-size, 14px) * var(--ds-sf, 1));\n  --ds-type-size-small: calc(var(--ds-small-text-size, 10px) * var(--ds-sf, 1));\n  --ds-type-size-heading: calc(var(--ds-heading-text-size, 13px) * var(--ds-sf, 1));\n  --ds-type-size-display: calc(var(--ds-display-text-size, 20px) * var(--ds-sf, 1));\n  --ds-type-lineheight-default: calc(var(--ds-text-leading, 16px) * var(--ds-sf, 1));\n  --ds-type-letterspacing-default: calc(var(--ds-text-tracking, -0.3px) * var(--ds-sf, 1));\n  --ds-radius: calc(var(--ds-corner-size, 4px) * var(--ds-sf, 1));\n  --ds-radius-card: calc(var(--ds-card-corner-size, 4px) * var(--ds-sf, 1));\n}\n:host {\n  display: inline-flex;\n  flex: 0 0 auto;\n  width: max-content;\n  max-width: 100%;\n  min-width: 0;\n  vertical-align: bottom;\n  /* The tag's own tokens, unset by default and in unscaled px: its height, side padding,\n     corners and text size; --ds-tag-accent colours it. */\n  --_tag-size: var(--ds-tag-size);\n  --_tag-height: calc(var(--_tag-size) * var(--ds-sf, 1));\n  --_tag-padding-size: var(--ds-tag-padding-size);\n  --_tag-padding: calc(var(--_tag-padding-size) * var(--ds-sf, 1));\n  --_tag-corner-size: var(--ds-tag-corner-size);\n  --_tag-radius: calc(var(--_tag-corner-size) * var(--ds-sf, 1));\n  --_tag-text-size: var(--ds-tag-text-size);\n  --_tag-font-size: calc(var(--_tag-text-size) * var(--ds-sf, 1));\n}\n:host([hidden]) { display: none !important; }\n/* The face stays one control high at the foot of its box, on the lower sixteen,\n   even when a row stretches the tag to a square. */\n.frame {\n  display: block;\n  align-self: flex-end;\n  box-sizing: border-box;\n  max-width: 100%;\n  padding-inline: var(--_tag-padding, calc(4px * var(--ds-sf, 1)));\n  border-radius: var(--_tag-radius, var(--ds-radius));\n  background: var(--ds-tag-background, light-dark(color-mix(in srgb, var(--ds-tag-accent, var(--ds-grey, #7a7a7a)) 28%, white), color-mix(in srgb, var(--ds-tag-accent, var(--ds-grey, #7a7a7a)) 20%, var(--ds-black, #2a2a2a))));\n  color: var(--ds-tag-color, light-dark(color-mix(in srgb, var(--ds-tag-accent, var(--ds-grey, #7a7a7a)) 45%, black), var(--ds-tag-accent, var(--ds-grey, #7a7a7a))));\n  font-family: var(--ds-typeface-regular);\n  font-feature-settings: var(--ds-font-features);\n  font-size: var(--_tag-font-size, var(--ds-type-size-default));\n  line-height: var(--_tag-height, var(--ds-control-height));\n  letter-spacing: var(--ds-type-letterspacing-default);\n  overflow: hidden;\n  text-overflow: clip;\n  white-space: nowrap;\n}\n/* The words in a box of their own, so cut words fade over their last square\n   while the fill stays whole; never an ellipsis (0-face/cut-fade.ts marks them). */\n.words {\n  display: block;\n  overflow: hidden;\n  text-overflow: clip;\n  white-space: nowrap;\n}\n.words[data-cut=\"end\"] {\n  mask-image: linear-gradient(to right, #000 calc(100% - var(--ds-unit)), transparent);\n}\n:host(:dir(rtl)) .words[data-cut=\"end\"] {\n  mask-image: linear-gradient(to left, #000 calc(100% - var(--ds-unit)), transparent);\n}\n";
+var ds_tag_default = "/* Shape is a surface preference. Keep these base lengths unscaled: each\n * component resolves them with its own --ds-sf in component-metrics.css. */\n[data-ds-shape=\"square\"],\n:host([data-ds-shape=\"square\"]) {\n  --ds-corner-size: 0px;\n  --ds-corner-shape: round;\n  --ds-button-inset: 0.5px;\n}\n\n[data-ds-shape=\"rounded\"],\n:host([data-ds-shape=\"rounded\"]) {\n  --ds-corner-size: 4px;\n  --ds-corner-shape: round;\n  --ds-button-inset: 2.5px;\n}\n\n[data-ds-shape=\"circular\"],\n:host([data-ds-shape=\"circular\"]) {\n  --ds-corner-size: 999px;\n  --ds-corner-shape: round;\n  --ds-button-inset: 5px;\n}\n\n/* A squircle needs twice an arc's radius for the same apparent corner.\n * Circular controls keep true semicircles even in a squircle browser. */\n@supports (corner-shape: squircle) {\n  [data-ds-shape=\"rounded\"],\n  :host([data-ds-shape=\"rounded\"]) {\n    --ds-corner-size: 8px;\n    --ds-corner-shape: squircle;\n  }\n}\n/* Resolve dimensions where a component is drawn. Inherited calc() values have\n * already used their ancestor's scale. Base tokens stay unscaled and inherit;\n * resolved tokens can still be overridden directly on a component.\n * data-ds-surface gives ordinary layout elements the same scaled measures.\n */\n:root,\n:host,\n:where([data-ds-surface]) {\n  --ds-unit: calc(var(--ds-1, 20px) * var(--ds-sf, 1));\n  --ds-control-height: calc(var(--ds-control-size, var(--ds-08, 16px)) * var(--ds-sf, 1));\n  --ds-row-height: calc(var(--ds-row-size, var(--ds-1, 20px)) * var(--ds-sf, 1));\n  --ds-type-size-default: calc(var(--ds-text-size, 14px) * var(--ds-sf, 1));\n  --ds-type-size-small: calc(var(--ds-small-text-size, 10px) * var(--ds-sf, 1));\n  --ds-type-size-heading: calc(var(--ds-heading-text-size, 13px) * var(--ds-sf, 1));\n  --ds-type-size-display: calc(var(--ds-display-text-size, 20px) * var(--ds-sf, 1));\n  --ds-type-lineheight-default: calc(var(--ds-text-leading, 16px) * var(--ds-sf, 1));\n  --ds-type-letterspacing-default: calc(var(--ds-text-tracking, -0.3px) * var(--ds-sf, 1));\n  --ds-radius: calc(var(--ds-corner-size, 4px) * var(--ds-sf, 1));\n  --ds-radius-card: calc(var(--ds-card-corner-size, 4px) * var(--ds-sf, 1));\n}\n:host {\n  display: inline-flex;\n  flex: 0 0 auto;\n  width: max-content;\n  max-width: 100%;\n  min-width: 0;\n  vertical-align: bottom;\n  /* The tag's own tokens, unset by default and in unscaled px: its height, side padding,\n     corners and text size; --ds-tag-accent colours it. */\n  --_tag-size: var(--ds-tag-size);\n  --_tag-height: calc(var(--_tag-size) * var(--ds-sf, 1));\n  --_tag-padding-size: var(--ds-tag-padding-size);\n  --_tag-padding: calc(var(--_tag-padding-size) * var(--ds-sf, 1));\n  --_tag-corner-size: var(--ds-tag-corner-size);\n  --_tag-radius: calc(var(--_tag-corner-size) * var(--ds-sf, 1));\n  --_tag-text-size: var(--ds-tag-text-size);\n  --_tag-font-size: calc(var(--_tag-text-size) * var(--ds-sf, 1));\n}\n:host([hidden]) { display: none !important; }\n/* The face stays one control high at the foot of its box, on the lower sixteen,\n   even when a row stretches the tag to a square. */\n.frame {\n  display: block;\n  align-self: flex-end;\n  box-sizing: border-box;\n  max-width: 100%;\n  padding-inline: var(--_tag-padding, calc(4px * var(--ds-sf, 1)));\n  border-radius: var(--_tag-radius, var(--ds-radius));\n  background: var(--ds-tag-background, light-dark(color-mix(in srgb, var(--ds-tag-accent, var(--ds-grey, #7a7a7a)) 28%, white), color-mix(in srgb, var(--ds-tag-accent, var(--ds-grey, #7a7a7a)) 20%, var(--ds-black, #2a2a2a))));\n  /* Tint the dark-mode ink: raw grey/accent colours cannot meet 4.5:1 on this fill. */\n  color: var(--ds-tag-color, light-dark(color-mix(in srgb, var(--ds-tag-accent, var(--ds-grey, #7a7a7a)) 45%, black), color-mix(in srgb, var(--ds-tag-accent, var(--ds-grey, #7a7a7a)) 30%, white)));\n  font-family: \"Inter Arrows\", var(--ds-typeface-regular);\n  font-feature-settings: var(--ds-font-features);\n  font-size: var(--_tag-font-size, var(--ds-type-size-default));\n  line-height: var(--_tag-height, var(--ds-control-height));\n  letter-spacing: var(--ds-type-letterspacing-default);\n  overflow: hidden;\n  text-overflow: clip;\n  white-space: nowrap;\n}\n/* The words in a box of their own, so cut words fade over their last square\n   while the fill stays whole; never an ellipsis (0-face/cut-fade.ts marks them). */\n.words {\n  display: block;\n  overflow: hidden;\n  text-overflow: clip;\n  white-space: nowrap;\n}\n.words[data-cut=\"end\"] {\n  mask-image: linear-gradient(to right, #000 calc(100% - var(--ds-unit)), transparent);\n}\n:host(:dir(rtl)) .words[data-cut=\"end\"] {\n  mask-image: linear-gradient(to left, #000 calc(100% - var(--ds-unit)), transparent);\n}\n";
 //#endregion
 //#region DS1/2-core/ds-tag.ts
 var _Tag;
@@ -5917,7 +6176,7 @@ define("ds-tag", Tag);
 */ var o$1 = (o) => o ?? A;
 //#endregion
 //#region DS1/2-core/styles/ds-text.css?inline
-var ds_text_default = "/* Shape is a surface preference. Keep these base lengths unscaled: each\n * component resolves them with its own --ds-sf in component-metrics.css. */\n[data-ds-shape=\"square\"],\n:host([data-ds-shape=\"square\"]) {\n  --ds-corner-size: 0px;\n  --ds-corner-shape: round;\n  --ds-button-inset: 0.5px;\n}\n\n[data-ds-shape=\"rounded\"],\n:host([data-ds-shape=\"rounded\"]) {\n  --ds-corner-size: 4px;\n  --ds-corner-shape: round;\n  --ds-button-inset: 2.5px;\n}\n\n[data-ds-shape=\"circular\"],\n:host([data-ds-shape=\"circular\"]) {\n  --ds-corner-size: 999px;\n  --ds-corner-shape: round;\n  --ds-button-inset: 5px;\n}\n\n/* A squircle needs twice an arc's radius for the same apparent corner.\n * Circular controls keep true semicircles even in a squircle browser. */\n@supports (corner-shape: squircle) {\n  [data-ds-shape=\"rounded\"],\n  :host([data-ds-shape=\"rounded\"]) {\n    --ds-corner-size: 8px;\n    --ds-corner-shape: squircle;\n  }\n}\n/* Resolve dimensions where a component is drawn. Inherited calc() values have\n * already used their ancestor's scale. Base tokens stay unscaled and inherit;\n * resolved tokens can still be overridden directly on a component.\n * data-ds-surface gives ordinary layout elements the same scaled measures.\n */\n:root,\n:host,\n:where([data-ds-surface]) {\n  --ds-unit: calc(var(--ds-1, 20px) * var(--ds-sf, 1));\n  --ds-control-height: calc(var(--ds-control-size, var(--ds-08, 16px)) * var(--ds-sf, 1));\n  --ds-row-height: calc(var(--ds-row-size, var(--ds-1, 20px)) * var(--ds-sf, 1));\n  --ds-type-size-default: calc(var(--ds-text-size, 14px) * var(--ds-sf, 1));\n  --ds-type-size-small: calc(var(--ds-small-text-size, 10px) * var(--ds-sf, 1));\n  --ds-type-size-heading: calc(var(--ds-heading-text-size, 13px) * var(--ds-sf, 1));\n  --ds-type-size-display: calc(var(--ds-display-text-size, 20px) * var(--ds-sf, 1));\n  --ds-type-lineheight-default: calc(var(--ds-text-leading, 16px) * var(--ds-sf, 1));\n  --ds-type-letterspacing-default: calc(var(--ds-text-tracking, -0.3px) * var(--ds-sf, 1));\n  --ds-radius: calc(var(--ds-corner-size, 4px) * var(--ds-sf, 1));\n  --ds-radius-card: calc(var(--ds-card-corner-size, 4px) * var(--ds-sf, 1));\n}\n/* ds-text.css */\n/* Text component styles for displaying translations. Without attributes the\n   element is one control high, for a row; text.css draws the same words as\n   classes on native text. */\n\n:host {\n  display: inline-flex;\n  align-items: center;\n  justify-content: flex-start;\n  height: var(--ds-control-height);\n  font-family: var(--ds-typeface-regular);\n  font-size: var(--ds-type-size-default);\n  font-weight: var(--ds-type-weight-default);\n  line-height: var(--ds-type-lineheight-default);\n  letter-spacing: var(--ds-type-letterspacing-default);\n  text-align: left;\n  vertical-align: middle;\n  white-space: nowrap;\n  word-break: normal;\n  overflow-wrap: normal;\n  hyphens: manual;\n  color: var(--ds-text-tone, inherit);\n}\n:host([hidden]) { display: none !important; }\n\n:host([data-language=\"ja\"]) {\n  font-family: var(--ds-typeface-regular-jp, var(--typeface-regular-jp));\n}\n\n:host([data-language=\"zh\"]),\n:host([data-language=\"zh-hant\"]) {\n  font-family: var(--ds-typeface-regular-zh-hant, var(--typeface-regular-zh-hant));\n  font-weight: var(--ds-type-weight-default, 400);\n}\n\n:host([data-language=\"zh-hans\"]) {\n  font-family: var(--ds-typeface-regular-zh-hans, var(--typeface-regular-zh-hans));\n  font-weight: var(--ds-type-weight-default, 400);\n}\n\n:host span {\n  color: inherit;\n}\n\n/* Text someone wrote: shown as it stands. Cut at its width, it fades over its\n   last square, never an ellipsis: the element marks itself `data-cut=\"end\"`\n   while its words do not fit (0-face/cut-fade.ts). */\n:host([literal]) {\n  height: auto;\n  min-height: var(--ds-control-height);\n  display: inline-block;\n  min-width: 0;\n  max-width: 100%;\n  overflow: var(--ds-text-overflow, hidden);\n  font-family: var(--ds-typeface-regular);\n  font-feature-settings: var(--ds-font-features);\n  font-size: var(--ds-type-size-default);\n  font-weight: var(--ds-type-weight-default);\n  line-height: var(--ds-type-lineheight-default);\n  letter-spacing: var(--ds-type-letterspacing-default);\n  text-overflow: clip;\n  white-space: nowrap;\n}\n:host([literal]:not([wrap])[data-cut=\"end\"]) {\n  mask-image: linear-gradient(to right, #000 calc(100% - var(--ds-unit)), transparent);\n}\n:host([literal]:not([wrap])[data-cut=\"end\"]:dir(rtl)) {\n  mask-image: linear-gradient(to left, #000 calc(100% - var(--ds-unit)), transparent);\n}\n\n/*\n * Tone, size, strength and wrapping work alike for a translation key and for\n * literal text. They follow the rules above, at the same specificity.\n */\n\n:host([strong]) {\n  font-weight: var(--ds-type-weight-bold);\n}\n\n/* Several lines, each one square. */\n:host([wrap]) {\n  display: inline-block;\n  height: auto;\n  min-height: var(--ds-control-height);\n  max-width: 100%;\n  overflow: visible;\n  line-height: var(--ds-unit);\n  white-space: normal;\n}\n\n:host([tone=\"muted\"]) {\n  --ds-text-tone: var(--ds-text-color-muted);\n}\n\n:host([tone=\"title\"]) {\n  --ds-text-tone: var(--ds-title-color);\n}\n\n:host([tone=\"danger\"]) {\n  --ds-text-tone: var(--ds-danger-color);\n}\n\n:host([tone=\"warning\"]) {\n  --ds-text-tone: var(--ds-warning-color);\n}\n\n:host([size=\"small\"]) {\n  font-size: var(--ds-type-size-small);\n}\n\n:host([size=\"heading\"]) {\n  height: auto;\n  font-size: var(--ds-type-size-heading);\n  line-height: var(--ds-type-lineheight-default);\n}\n\n/* A title on two squares. */\n:host([size=\"display\"]) {\n  display: inline-block;\n  height: auto;\n  min-height: calc(2 * var(--ds-unit));\n  font-size: var(--ds-type-size-display);\n  line-height: calc(2 * var(--ds-unit));\n  letter-spacing: calc(var(--ds-display-text-tracking, -0.4px) * var(--ds-sf, 1));\n}\n";
+var ds_text_default = "/* Shape is a surface preference. Keep these base lengths unscaled: each\n * component resolves them with its own --ds-sf in component-metrics.css. */\n[data-ds-shape=\"square\"],\n:host([data-ds-shape=\"square\"]) {\n  --ds-corner-size: 0px;\n  --ds-corner-shape: round;\n  --ds-button-inset: 0.5px;\n}\n\n[data-ds-shape=\"rounded\"],\n:host([data-ds-shape=\"rounded\"]) {\n  --ds-corner-size: 4px;\n  --ds-corner-shape: round;\n  --ds-button-inset: 2.5px;\n}\n\n[data-ds-shape=\"circular\"],\n:host([data-ds-shape=\"circular\"]) {\n  --ds-corner-size: 999px;\n  --ds-corner-shape: round;\n  --ds-button-inset: 5px;\n}\n\n/* A squircle needs twice an arc's radius for the same apparent corner.\n * Circular controls keep true semicircles even in a squircle browser. */\n@supports (corner-shape: squircle) {\n  [data-ds-shape=\"rounded\"],\n  :host([data-ds-shape=\"rounded\"]) {\n    --ds-corner-size: 8px;\n    --ds-corner-shape: squircle;\n  }\n}\n/* Resolve dimensions where a component is drawn. Inherited calc() values have\n * already used their ancestor's scale. Base tokens stay unscaled and inherit;\n * resolved tokens can still be overridden directly on a component.\n * data-ds-surface gives ordinary layout elements the same scaled measures.\n */\n:root,\n:host,\n:where([data-ds-surface]) {\n  --ds-unit: calc(var(--ds-1, 20px) * var(--ds-sf, 1));\n  --ds-control-height: calc(var(--ds-control-size, var(--ds-08, 16px)) * var(--ds-sf, 1));\n  --ds-row-height: calc(var(--ds-row-size, var(--ds-1, 20px)) * var(--ds-sf, 1));\n  --ds-type-size-default: calc(var(--ds-text-size, 14px) * var(--ds-sf, 1));\n  --ds-type-size-small: calc(var(--ds-small-text-size, 10px) * var(--ds-sf, 1));\n  --ds-type-size-heading: calc(var(--ds-heading-text-size, 13px) * var(--ds-sf, 1));\n  --ds-type-size-display: calc(var(--ds-display-text-size, 20px) * var(--ds-sf, 1));\n  --ds-type-lineheight-default: calc(var(--ds-text-leading, 16px) * var(--ds-sf, 1));\n  --ds-type-letterspacing-default: calc(var(--ds-text-tracking, -0.3px) * var(--ds-sf, 1));\n  --ds-radius: calc(var(--ds-corner-size, 4px) * var(--ds-sf, 1));\n  --ds-radius-card: calc(var(--ds-card-corner-size, 4px) * var(--ds-sf, 1));\n}\n/* ds-text.css */\n/* Text component styles for displaying translations. Without attributes the\n   element is one control high, for a row; text.css draws the same words as\n   classes on native text. */\n\n:host {\n  display: inline-flex;\n  align-items: center;\n  justify-content: flex-start;\n  height: var(--ds-control-height);\n  font-family: \"Inter Arrows\", var(--ds-typeface-regular);\n  font-size: var(--ds-type-size-default);\n  font-weight: var(--ds-type-weight-default);\n  line-height: var(--ds-type-lineheight-default);\n  letter-spacing: var(--ds-type-letterspacing-default);\n  text-align: left;\n  vertical-align: middle;\n  white-space: nowrap;\n  word-break: normal;\n  overflow-wrap: normal;\n  hyphens: manual;\n  color: var(--ds-text-tone, inherit);\n}\n:host([hidden]) { display: none !important; }\n\n:host([data-language=\"ja\"]) {\n  font-family: \"Inter Arrows\", var(--ds-typeface-regular-jp, var(--typeface-regular-jp));\n}\n\n:host([data-language=\"zh\"]),\n:host([data-language=\"zh-hant\"]) {\n  font-family: \"Inter Arrows\", var(--ds-typeface-regular-zh-hant, var(--typeface-regular-zh-hant));\n  font-weight: var(--ds-type-weight-default, 400);\n}\n\n:host([data-language=\"zh-hans\"]) {\n  font-family: \"Inter Arrows\", var(--ds-typeface-regular-zh-hans, var(--typeface-regular-zh-hans));\n  font-weight: var(--ds-type-weight-default, 400);\n}\n\n:host span {\n  color: inherit;\n}\n\n/* Text someone wrote: shown as it stands. Cut at its width, it fades over its\n   last square, never an ellipsis: the element marks itself `data-cut=\"end\"`\n   while its words do not fit (0-face/cut-fade.ts). */\n:host([literal]) {\n  height: auto;\n  min-height: var(--ds-control-height);\n  display: inline-block;\n  min-width: 0;\n  max-width: 100%;\n  overflow: var(--ds-text-overflow, hidden);\n  font-family: \"Inter Arrows\", var(--ds-typeface-regular);\n  font-feature-settings: var(--ds-font-features);\n  font-size: var(--ds-type-size-default);\n  font-weight: var(--ds-type-weight-default);\n  line-height: var(--ds-type-lineheight-default);\n  letter-spacing: var(--ds-type-letterspacing-default);\n  text-overflow: clip;\n  white-space: nowrap;\n}\n:host([literal]:not([wrap])[data-cut=\"end\"]) {\n  mask-image: linear-gradient(to right, #000 calc(100% - var(--ds-unit)), transparent);\n}\n:host([literal]:not([wrap])[data-cut=\"end\"]:dir(rtl)) {\n  mask-image: linear-gradient(to left, #000 calc(100% - var(--ds-unit)), transparent);\n}\n\n/*\n * Tone, size, strength and wrapping work alike for a translation key and for\n * literal text. They follow the rules above, at the same specificity.\n */\n\n:host([strong]) {\n  font-weight: var(--ds-type-weight-bold);\n}\n\n/* Several lines, each one square. */\n:host([wrap]) {\n  display: inline-block;\n  height: auto;\n  min-height: var(--ds-control-height);\n  max-width: 100%;\n  overflow: visible;\n  line-height: var(--ds-unit);\n  white-space: normal;\n}\n\n:host([tone=\"muted\"]) {\n  --ds-text-tone: var(--ds-text-color-muted);\n}\n\n:host([tone=\"title\"]) {\n  --ds-text-tone: var(--ds-title-color);\n}\n\n:host([tone=\"danger\"]) {\n  --ds-text-tone: var(--ds-danger-color);\n}\n\n:host([tone=\"warning\"]) {\n  --ds-text-tone: var(--ds-warning-color);\n}\n\n:host([size=\"small\"]) {\n  font-size: var(--ds-type-size-small);\n}\n\n:host([size=\"heading\"]) {\n  height: auto;\n  font-size: var(--ds-type-size-heading);\n  line-height: var(--ds-type-lineheight-default);\n}\n\n/* A title on two squares. */\n:host([size=\"display\"]) {\n  display: inline-block;\n  height: auto;\n  min-height: calc(2 * var(--ds-unit));\n  font-size: var(--ds-type-size-display);\n  line-height: calc(2 * var(--ds-unit));\n  letter-spacing: calc(var(--ds-display-text-tracking, -0.4px) * var(--ds-sf, 1));\n}\n";
 //#endregion
 //#region DS1/2-core/ds-text.ts
 var _Text;
@@ -6206,10 +6465,10 @@ _Control.properties = { disabled: {
 } };
 //#endregion
 //#region DS1/2-core/styles/ds-button-host.css?inline
-var ds_button_host_default = "/* Shape is a surface preference. Keep these base lengths unscaled: each\n * component resolves them with its own --ds-sf in component-metrics.css. */\n[data-ds-shape=\"square\"],\n:host([data-ds-shape=\"square\"]) {\n  --ds-corner-size: 0px;\n  --ds-corner-shape: round;\n  --ds-button-inset: 0.5px;\n}\n\n[data-ds-shape=\"rounded\"],\n:host([data-ds-shape=\"rounded\"]) {\n  --ds-corner-size: 4px;\n  --ds-corner-shape: round;\n  --ds-button-inset: 2.5px;\n}\n\n[data-ds-shape=\"circular\"],\n:host([data-ds-shape=\"circular\"]) {\n  --ds-corner-size: 999px;\n  --ds-corner-shape: round;\n  --ds-button-inset: 5px;\n}\n\n/* A squircle needs twice an arc's radius for the same apparent corner.\n * Circular controls keep true semicircles even in a squircle browser. */\n@supports (corner-shape: squircle) {\n  [data-ds-shape=\"rounded\"],\n  :host([data-ds-shape=\"rounded\"]) {\n    --ds-corner-size: 8px;\n    --ds-corner-shape: squircle;\n  }\n}\n/* Resolve dimensions where a component is drawn. Inherited calc() values have\n * already used their ancestor's scale. Base tokens stay unscaled and inherit;\n * resolved tokens can still be overridden directly on a component.\n * data-ds-surface gives ordinary layout elements the same scaled measures.\n */\n:root,\n:host,\n:where([data-ds-surface]) {\n  --ds-unit: calc(var(--ds-1, 20px) * var(--ds-sf, 1));\n  --ds-control-height: calc(var(--ds-control-size, var(--ds-08, 16px)) * var(--ds-sf, 1));\n  --ds-row-height: calc(var(--ds-row-size, var(--ds-1, 20px)) * var(--ds-sf, 1));\n  --ds-type-size-default: calc(var(--ds-text-size, 14px) * var(--ds-sf, 1));\n  --ds-type-size-small: calc(var(--ds-small-text-size, 10px) * var(--ds-sf, 1));\n  --ds-type-size-heading: calc(var(--ds-heading-text-size, 13px) * var(--ds-sf, 1));\n  --ds-type-size-display: calc(var(--ds-display-text-size, 20px) * var(--ds-sf, 1));\n  --ds-type-lineheight-default: calc(var(--ds-text-leading, 16px) * var(--ds-sf, 1));\n  --ds-type-letterspacing-default: calc(var(--ds-text-tracking, -0.3px) * var(--ds-sf, 1));\n  --ds-radius: calc(var(--ds-corner-size, 4px) * var(--ds-sf, 1));\n  --ds-radius-card: calc(var(--ds-card-corner-size, 4px) * var(--ds-sf, 1));\n}\n/* ds-button.css */\n\n:host([control=\"host\"]),\n:host([control=\"slotted\"]) ::slotted(:is(button, a)) {\n  box-sizing: border-box !important;\n  display: inline-flex !important;\n  align-items: center !important;\n  justify-content: var(--ds-button-align, flex-start) !important;\n  gap: var(--ds-button-gap, calc(4px * var(--ds-sf))) !important;\n  min-width: 0 !important;\n  max-width: 100% !important;\n  height: var(--ds-button-height, var(--_button-height, var(--ds-control-height))) !important;\n  /* Important, so a page's `* { padding: 0 }` reset cannot reach it: the\n     padding is set through --ds-button-padding. */\n  padding: var(--ds-button-padding, 0) !important;\n  border-radius: var(--_button-radius, var(--ds-radius)) !important;\n  corner-shape: var(--ds-corner-shape, round) !important;\n  background: var(--ds-button-background, transparent) !important;\n  color: var(--ds-button-color, var(--ds-button-text-color)) !important;\n  font-family: var(--ds-typeface-regular) !important;\n  font-feature-settings: var(--ds-font-features) !important;\n  font-size: var(--_button-font-size, var(--ds-type-size-default)) !important;\n  font-weight: var(--ds-type-weight-default) !important;\n  line-height: var(--ds-type-lineheight-default) !important;\n  letter-spacing: var(--ds-type-letterspacing-default) !important;\n  white-space: nowrap !important;\n  cursor: pointer !important;\n  user-select: none !important;\n  -webkit-user-select: none !important;\n  -webkit-tap-highlight-color: transparent !important;\n  outline: none !important;\n  transition: opacity 120ms ease !important;\n}\n\n:host([control=\"host\"]) ::slotted(*) {\n  flex: 0 0 auto !important;\n}\n\n:host([fit][control=\"slotted\"]) ::slotted(:is(button, a)) {\n  width: max-content !important;\n  min-width: var(--ds-button-min-width, 0px) !important;\n  justify-content: var(--ds-button-align, flex-start) !important;\n}\n\n:host([control=\"host\"][primary]),\n:host([control=\"slotted\"][primary]) {\n  --ds-button-padding: 0 var(--_button-padding, calc(var(--ds-button-inset, 4px) * var(--ds-sf)));\n  --ds-button-background: var(--ds-button-primary-fill, var(--ds-button-background-color-primary));\n  --ds-button-color: var(--ds-button-primary-text, var(--ds-button-text-color-on-accent));\n}\n\n:host([control=\"host\"][secondary]),\n:host([control=\"slotted\"][secondary]) {\n  --ds-button-padding: 0 var(--_button-padding, calc(var(--ds-button-inset, 4px) * var(--ds-sf)));\n  --ds-button-background: var(--ds-button-secondary-fill, var(--ds-button-background-color-secondary));\n}\n\n:host([control=\"host\"][secondary]:hover:not([disabled])),\n:host([control=\"slotted\"][secondary]:hover:not([disabled])) {\n  --ds-button-background: var(--ds-fill-hover);\n}\n\n:host([control=\"host\"][active]),\n:host([control=\"slotted\"][active]) {\n  --ds-button-background: var(--ds-fill);\n}\n\n/* A tab: muted until it is hovered or current. */\n:host([control=\"host\"][role=\"tab\"]),\n:host([control=\"host\"][choice]),\n:host([control=\"slotted\"][choice]) {\n  --ds-button-padding: 0 calc(4px * var(--ds-sf));\n  --ds-button-color: var(--ds-text-color-muted);\n}\n\n:host([control=\"host\"][role=\"tab\"]:hover:not([disabled])),\n:host([control=\"host\"][choice]:hover:not([disabled])),\n:host([control=\"slotted\"][choice]:hover:not([disabled])) {\n  --ds-button-background: color-mix(in srgb, var(--ds-fill) 72%, transparent);\n  --ds-button-color: var(--ds-text-color);\n}\n\n:host([control=\"host\"][role=\"tab\"][active]),\n:host([control=\"host\"][role=\"tab\"][active]:hover:not([disabled])),\n:host([control=\"host\"][choice][active]),\n:host([control=\"host\"][choice][active]:hover:not([disabled])),\n:host([control=\"slotted\"][choice][active]),\n:host([control=\"slotted\"][choice][active]:hover:not([disabled])) {\n  --ds-button-background: var(--ds-fill);\n  --ds-button-color: var(--ds-text-color);\n}\n\n:host([control=\"host\"]) ::slotted([slot=\"icon\"]) {\n  display: inline-flex !important;\n  align-items: center !important;\n  justify-content: center !important;\n  width: var(--ds-control-height) !important;\n  height: var(--ds-control-height) !important;\n}\n\n:host([control=\"host\"]) ::slotted([slot=\"trailing\"]) {\n  color: var(--ds-text-color-muted) !important;\n  font-variant-numeric: tabular-nums !important;\n}\n\n:host([control=\"host\"][icon]),\n:host([control=\"slotted\"][icon]) {\n  justify-content: center !important;\n  width: var(--ds-button-height, var(--ds-control-height)) !important;\n  height: var(--ds-button-height, var(--ds-control-height)) !important;\n  padding: 0 !important;\n  color: var(--ds-button-color, var(--ds-text-color-muted)) !important;\n}\n\n:host([control=\"host\"][icon]:hover:not([disabled])) {\n  --ds-button-color: var(--ds-text-color);\n}\n\n/* A choice in a ds-menu: a full-width row, filled under the pointer or focus. */\n:host([control=\"host\"][role=\"option\"]),\n:host([control=\"host\"][role=\"menuitem\"]),\n:host([control=\"host\"][role=\"menuitemradio\"]),\n:host([control=\"host\"][role=\"menuitemcheckbox\"]) {\n  --ds-button-height: auto;\n  --ds-button-padding: calc(4px * var(--ds-sf)) calc(6px * var(--ds-sf));\n  width: var(--ds-button-width, 100%) !important;\n  min-height: var(--ds-row-height) !important;\n  border-radius: var(--ds-radius) !important;\n}\n\n:host([control=\"host\"][role=\"option\"]:hover),\n:host([control=\"host\"][role=\"menuitem\"]:hover),\n:host([control=\"host\"][role=\"menuitemradio\"]:hover),\n:host([control=\"host\"][role=\"menuitemcheckbox\"]:hover),\n:host([control=\"host\"][role=\"option\"]:focus-visible),\n:host([control=\"host\"][role=\"menuitem\"]:focus-visible) {\n  --ds-button-background: var(--ds-fill);\n  outline: none !important;\n}\n\n:host([control=\"host\"][role=\"option\"][active]) {\n  --ds-button-background: var(--ds-fill);\n}\n\n:host([control=\"host\"]:focus-visible),\n:host([control=\"slotted\"]) ::slotted(:is(button, a):focus-visible) {\n  outline: 2px solid var(--ds-focus-ring) !important;\n  outline-offset: 1px !important;\n}\n\n:host([control=\"host\"][disabled]),\n:host([control=\"slotted\"]) ::slotted(:is(button:disabled, a[aria-disabled=\"true\"])) {\n  cursor: default !important;\n  opacity: 0.5 !important;\n  pointer-events: none !important;\n}\n\n/* The light-DOM button keeps native forms, submitters and fieldset semantics.\n   DS1 owns its face; product layout belongs on the host. */\n:host([control=\"slotted\"]) ::slotted(:is(button, a)) {\n  appearance: none !important;\n  box-sizing: border-box !important;\n  border: 0 !important;\n  margin: 0 !important;\n  width: 100% !important;\n  min-height: var(--ds-button-height, var(--_button-height, var(--ds-control-height))) !important;\n  max-height: var(--ds-button-height, var(--_button-height, var(--ds-control-height))) !important;\n  box-shadow: none !important;\n  text-align: start !important;\n  text-transform: none !important;\n  text-decoration: none !important;\n  overflow: hidden !important;\n  text-overflow: clip !important;\n}\n:host([control=\"slotted\"][icon]) ::slotted(:is(button, a)) {\n  justify-content: center !important;\n}\n\n:host([control=\"slotted\"]) {\n  /* The native focus ring extends beyond the face; only its text is clipped. */\n  overflow: visible;\n  /* The face is one control high, as the host and native faces are. Its box\n     stays one square, as before, with the face at its foot, so the words take\n     the lower sixteen of the square in a row or at the foot of a line and no\n     row around it changes height. */\n  align-items: flex-end;\n  min-height: var(--ds-row-height);\n  vertical-align: bottom;\n  width: var(--ds-button-width, var(--_button-inline-size, max-content));\n}\n/* An icon's square: the face takes its first sixteen, the spare four above. */\n:host([control=\"slotted\"][icon]) {\n  justify-content: flex-start !important;\n  width: max(var(--ds-row-height), var(--ds-button-height, var(--ds-control-height))) !important;\n  height: max(var(--ds-row-height), var(--ds-button-height, var(--ds-control-height))) !important;\n}\n:host([control=\"slotted\"][icon]) ::slotted(:is(button, a)) {\n  width: var(--ds-button-height, var(--ds-control-height)) !important;\n}\n:host([control=\"slotted\"][fixed]) {\n  width: var(--ds-button-width, calc(4 * var(--ds-unit)));\n}\n:host([control=\"slotted\"][wide]) {\n  width: var(--ds-button-width, calc(8 * var(--ds-unit)));\n}\n:host([control=\"slotted\"][fit]) {\n  width: max-content;\n}\n\n:host([control=\"host\"][danger]),\n:host([control=\"slotted\"][danger]) {\n  --ds-button-color: var(--ds-danger-color, var(--ds-tuned-red));\n}\n\n:host([hidden]) { display: none !important; }\n\n/* Native actions in menus, including grouped and nested choices. */\n:host([menu-item]) {\n  flex: 0 0 auto;\n  width: 100%;\n  --ds-button-height: var(--ds-row-height);\n  --ds-button-align: flex-start;\n  --ds-button-padding: 0 calc(4px * var(--ds-sf));\n}\n/* A row-high entry's words and icon stand on the lower sixteen, the spare four above. */\n:host([menu-item][control=\"host\"]),\n:host([menu-item][control=\"slotted\"]) ::slotted(:is(button, a)) {\n  align-items: flex-end !important;\n}\n:host([menu-item]:is(:hover, :focus-within):not([disabled])) {\n  --ds-button-background: var(--ds-fill);\n}\n:host([menu-item][control=\"slotted\"]) ::slotted([aria-checked=\"true\"]) {\n  box-shadow: inset 0 0 0 1px var(--ds-focus-ring) !important;\n}\n\n/* A paper tab (`ds-tabs paper`): a row high with its words on the sixteen,\n   rounded at the top only and square at the foot, where it joins the page. */\n:host([control=\"host\"][paper]),\n:host([control=\"slotted\"][paper]) ::slotted(:is(button, a)) {\n  align-items: flex-end !important;\n  border-start-start-radius: var(--ds-radius) !important;\n  border-start-end-radius: var(--ds-radius) !important;\n  border-end-start-radius: 0 !important;\n  border-end-end-radius: 0 !important;\n}\n\n/* A tab in a joined run (`ds-tabs split`): square inside, rounded at the run's ends. */\n:host([control=\"host\"][segment]) {\n  border-radius: 0 !important;\n}\n:host([control=\"host\"]:is([segment=\"first\"], [segment=\"only\"])) {\n  border-start-start-radius: var(--ds-radius) !important;\n  border-end-start-radius: var(--ds-radius) !important;\n}\n:host([control=\"host\"]:is([segment=\"last\"], [segment=\"only\"])) {\n  border-start-end-radius: var(--ds-radius) !important;\n  border-end-end-radius: var(--ds-radius) !important;\n}\n\n:host([control=\"host\"]:not([icon]):not([split]):not([menu-item])) {\n  min-width: max-content !important;\n  min-width: calc-size(max-content, round(up, size, var(--ds-unit))) !important;\n}\n:host([control=\"slotted\"]) ::slotted(:is(button, a)) {\n  min-width: max-content !important;\n  overflow: visible !important;\n}\n";
+var ds_button_host_default = "/* Shape is a surface preference. Keep these base lengths unscaled: each\n * component resolves them with its own --ds-sf in component-metrics.css. */\n[data-ds-shape=\"square\"],\n:host([data-ds-shape=\"square\"]) {\n  --ds-corner-size: 0px;\n  --ds-corner-shape: round;\n  --ds-button-inset: 0.5px;\n}\n\n[data-ds-shape=\"rounded\"],\n:host([data-ds-shape=\"rounded\"]) {\n  --ds-corner-size: 4px;\n  --ds-corner-shape: round;\n  --ds-button-inset: 2.5px;\n}\n\n[data-ds-shape=\"circular\"],\n:host([data-ds-shape=\"circular\"]) {\n  --ds-corner-size: 999px;\n  --ds-corner-shape: round;\n  --ds-button-inset: 5px;\n}\n\n/* A squircle needs twice an arc's radius for the same apparent corner.\n * Circular controls keep true semicircles even in a squircle browser. */\n@supports (corner-shape: squircle) {\n  [data-ds-shape=\"rounded\"],\n  :host([data-ds-shape=\"rounded\"]) {\n    --ds-corner-size: 8px;\n    --ds-corner-shape: squircle;\n  }\n}\n/* Resolve dimensions where a component is drawn. Inherited calc() values have\n * already used their ancestor's scale. Base tokens stay unscaled and inherit;\n * resolved tokens can still be overridden directly on a component.\n * data-ds-surface gives ordinary layout elements the same scaled measures.\n */\n:root,\n:host,\n:where([data-ds-surface]) {\n  --ds-unit: calc(var(--ds-1, 20px) * var(--ds-sf, 1));\n  --ds-control-height: calc(var(--ds-control-size, var(--ds-08, 16px)) * var(--ds-sf, 1));\n  --ds-row-height: calc(var(--ds-row-size, var(--ds-1, 20px)) * var(--ds-sf, 1));\n  --ds-type-size-default: calc(var(--ds-text-size, 14px) * var(--ds-sf, 1));\n  --ds-type-size-small: calc(var(--ds-small-text-size, 10px) * var(--ds-sf, 1));\n  --ds-type-size-heading: calc(var(--ds-heading-text-size, 13px) * var(--ds-sf, 1));\n  --ds-type-size-display: calc(var(--ds-display-text-size, 20px) * var(--ds-sf, 1));\n  --ds-type-lineheight-default: calc(var(--ds-text-leading, 16px) * var(--ds-sf, 1));\n  --ds-type-letterspacing-default: calc(var(--ds-text-tracking, -0.3px) * var(--ds-sf, 1));\n  --ds-radius: calc(var(--ds-corner-size, 4px) * var(--ds-sf, 1));\n  --ds-radius-card: calc(var(--ds-card-corner-size, 4px) * var(--ds-sf, 1));\n}\n/* ds-button.css */\n\n:host([control=\"host\"]),\n:host([control=\"slotted\"]) ::slotted(:is(button, a)) {\n  box-sizing: border-box !important;\n  display: inline-flex !important;\n  align-items: center !important;\n  justify-content: var(--ds-button-align, flex-start) !important;\n  gap: var(--ds-button-gap, calc(4px * var(--ds-sf))) !important;\n  min-width: 0 !important;\n  max-width: 100% !important;\n  height: var(--ds-button-height, var(--_button-height, var(--ds-control-height))) !important;\n  /* Important, so a page's `* { padding: 0 }` reset cannot reach it: the\n     padding is set through --ds-button-padding. */\n  padding: var(--ds-button-padding, 0) !important;\n  border-radius: var(--_button-radius, var(--ds-radius)) !important;\n  corner-shape: var(--ds-corner-shape, round) !important;\n  background: var(--ds-button-background, transparent) !important;\n  color: var(--ds-button-color, var(--ds-button-text-color)) !important;\n  font-family: \"Inter Arrows\", var(--ds-typeface-regular) !important;\n  font-feature-settings: var(--ds-font-features) !important;\n  font-size: var(--_button-font-size, var(--ds-type-size-default)) !important;\n  font-weight: var(--ds-type-weight-default) !important;\n  line-height: var(--ds-type-lineheight-default) !important;\n  letter-spacing: var(--ds-type-letterspacing-default) !important;\n  white-space: nowrap !important;\n  cursor: pointer !important;\n  user-select: none !important;\n  -webkit-user-select: none !important;\n  -webkit-tap-highlight-color: transparent !important;\n  outline: none !important;\n  transition: opacity 120ms ease !important;\n}\n\n:host([control=\"host\"]) ::slotted(*) {\n  flex: 0 0 auto !important;\n}\n\n:host([fit][control=\"slotted\"]) ::slotted(:is(button, a)) {\n  /* The host hugs on the grid; its visible face must occupy that same box. */\n  width: 100% !important;\n  min-width: var(--ds-button-min-width, 0px) !important;\n  justify-content: var(--ds-button-align, flex-start) !important;\n}\n\n:host([control=\"host\"][primary]),\n:host([control=\"slotted\"][primary]) {\n  --ds-button-padding: 0 var(--_button-padding, calc(var(--ds-button-inset, 4px) * var(--ds-sf)));\n  --ds-button-background: var(--ds-button-primary-fill, var(--ds-button-background-color-primary));\n  --ds-button-color: var(--ds-button-primary-text, var(--ds-button-text-color-on-accent));\n}\n\n:host([control=\"host\"][secondary]),\n:host([control=\"slotted\"][secondary]) {\n  --ds-button-padding: 0 var(--_button-padding, calc(var(--ds-button-inset, 4px) * var(--ds-sf)));\n  --ds-button-background: var(--ds-button-secondary-fill, var(--ds-button-background-color-secondary));\n}\n\n:host([control=\"host\"][secondary]:hover:not([disabled])),\n:host([control=\"slotted\"][secondary]:hover:not([disabled])) {\n  --ds-button-background: var(--ds-fill-hover);\n}\n\n:host([control=\"host\"][active]),\n:host([control=\"slotted\"][active]) {\n  --ds-button-background: var(--ds-fill);\n}\n\n/* A tab: muted until it is hovered or current. */\n:host([control=\"host\"][role=\"tab\"]),\n:host([control=\"host\"][choice]),\n:host([control=\"slotted\"][choice]) {\n  --ds-button-padding: 0 calc(4px * var(--ds-sf));\n  --ds-button-color: var(--ds-text-color-muted);\n}\n\n:host([control=\"host\"][role=\"tab\"]:hover:not([disabled])),\n:host([control=\"host\"][choice]:hover:not([disabled])),\n:host([control=\"slotted\"][choice]:hover:not([disabled])) {\n  --ds-button-background: color-mix(in srgb, var(--ds-fill) 72%, transparent);\n  --ds-button-color: var(--ds-text-color);\n}\n\n:host([control=\"host\"][role=\"tab\"][active]),\n:host([control=\"host\"][role=\"tab\"][active]:hover:not([disabled])),\n:host([control=\"host\"][choice][active]),\n:host([control=\"host\"][choice][active]:hover:not([disabled])),\n:host([control=\"slotted\"][choice][active]),\n:host([control=\"slotted\"][choice][active]:hover:not([disabled])) {\n  --ds-button-background: var(--ds-fill);\n  --ds-button-color: var(--ds-text-color);\n}\n\n:host([control=\"host\"]) ::slotted([slot=\"icon\"]) {\n  display: inline-flex !important;\n  align-items: center !important;\n  justify-content: center !important;\n  width: var(--ds-control-height) !important;\n  height: var(--ds-control-height) !important;\n}\n\n:host([control=\"host\"]) ::slotted([slot=\"trailing\"]) {\n  color: var(--ds-text-color-muted) !important;\n  font-variant-numeric: tabular-nums !important;\n}\n\n:host([control=\"host\"][icon]),\n:host([control=\"slotted\"][icon]) {\n  justify-content: center !important;\n  width: var(--ds-button-height, var(--ds-control-height)) !important;\n  height: var(--ds-button-height, var(--ds-control-height)) !important;\n  padding: 0 !important;\n  color: var(--ds-button-color, var(--ds-text-color-muted)) !important;\n}\n\n:host([control=\"host\"][icon]:hover:not([disabled])) {\n  --ds-button-color: var(--ds-text-color);\n}\n\n/* A choice in a ds-menu: a full-width row, filled under the pointer or focus. */\n:host([control=\"host\"][role=\"option\"]),\n:host([control=\"host\"][role=\"menuitem\"]),\n:host([control=\"host\"][role=\"menuitemradio\"]),\n:host([control=\"host\"][role=\"menuitemcheckbox\"]) {\n  --ds-button-height: auto;\n  --ds-button-padding: calc(4px * var(--ds-sf)) calc(6px * var(--ds-sf));\n  width: var(--ds-button-width, 100%) !important;\n  min-height: var(--ds-row-height) !important;\n  border-radius: var(--ds-radius) !important;\n}\n\n:host([control=\"host\"][role=\"option\"]:hover),\n:host([control=\"host\"][role=\"menuitem\"]:hover),\n:host([control=\"host\"][role=\"menuitemradio\"]:hover),\n:host([control=\"host\"][role=\"menuitemcheckbox\"]:hover),\n:host([control=\"host\"][role=\"option\"]:focus-visible),\n:host([control=\"host\"][role=\"menuitem\"]:focus-visible) {\n  --ds-button-background: var(--ds-fill);\n  outline: none !important;\n}\n\n:host([control=\"host\"][role=\"option\"][active]) {\n  --ds-button-background: var(--ds-fill);\n}\n\n:host([control=\"host\"]:focus-visible),\n:host([control=\"slotted\"]) ::slotted(:is(button, a):focus-visible) {\n  outline: 2px solid var(--ds-focus-ring) !important;\n  outline-offset: 1px !important;\n}\n\n:host([control=\"host\"][disabled]),\n:host([control=\"slotted\"]) ::slotted(:is(button:disabled, a[aria-disabled=\"true\"])) {\n  cursor: default !important;\n  opacity: 0.5 !important;\n  pointer-events: none !important;\n}\n\n/* The light-DOM button keeps native forms, submitters and fieldset semantics.\n   DS1 owns its face; product layout belongs on the host. */\n:host([control=\"slotted\"]) ::slotted(:is(button, a)) {\n  appearance: none !important;\n  box-sizing: border-box !important;\n  border: 0 !important;\n  margin: 0 !important;\n  width: 100% !important;\n  min-height: var(--ds-button-height, var(--_button-height, var(--ds-control-height))) !important;\n  max-height: var(--ds-button-height, var(--_button-height, var(--ds-control-height))) !important;\n  box-shadow: none !important;\n  text-align: start !important;\n  text-transform: none !important;\n  text-decoration: none !important;\n  overflow: hidden !important;\n  text-overflow: clip !important;\n}\n:host([control=\"slotted\"][icon]) ::slotted(:is(button, a)) {\n  justify-content: center !important;\n}\n\n:host([control=\"slotted\"]) {\n  /* The native focus ring extends beyond the face; only its text is clipped. */\n  overflow: visible;\n  /* The face is one control high, as the host and native faces are. Its box\n     stays one square, as before, with the face at its foot, so the words take\n     the lower sixteen of the square in a row or at the foot of a line and no\n     row around it changes height. */\n  align-items: flex-end;\n  min-height: var(--ds-row-height);\n  vertical-align: bottom;\n  width: var(--ds-button-width, var(--_button-inline-size, max-content));\n}\n/* An icon's square: the face takes its first sixteen, the spare four above. */\n:host([control=\"slotted\"][icon]) {\n  justify-content: flex-start !important;\n  width: max(var(--ds-row-height), var(--ds-button-height, var(--ds-control-height))) !important;\n  height: max(var(--ds-row-height), var(--ds-button-height, var(--ds-control-height))) !important;\n}\n:host([control=\"slotted\"][icon]) ::slotted(:is(button, a)) {\n  width: var(--ds-button-height, var(--ds-control-height)) !important;\n}\n:host([control=\"slotted\"][fixed]) {\n  width: var(--ds-button-width, calc(4 * var(--ds-unit)));\n}\n:host([control=\"slotted\"][wide]) {\n  width: var(--ds-button-width, calc(8 * var(--ds-unit)));\n}\n:host([control=\"slotted\"][fit]) {\n  width: max-content;\n}\n\n:host([control=\"host\"][danger]),\n:host([control=\"slotted\"][danger]) {\n  --ds-button-color: var(--ds-danger-color, var(--ds-tuned-red));\n}\n\n:host([hidden]) { display: none !important; }\n\n/* Native actions in menus, including grouped and nested choices. */\n:host([menu-item]) {\n  flex: 0 0 auto;\n  width: 100%;\n  --ds-button-height: var(--ds-row-height);\n  --ds-button-align: flex-start;\n  --ds-button-padding: 0 calc(4px * var(--ds-sf));\n}\n/* A row-high entry's words and icon stand on the lower sixteen, the spare four above. */\n:host([menu-item][control=\"host\"]),\n:host([menu-item][control=\"slotted\"]) ::slotted(:is(button, a)) {\n  align-items: flex-end !important;\n}\n:host([menu-item]:is(:hover, :focus-within):not([disabled])) {\n  --ds-button-background: var(--ds-fill);\n}\n:host([menu-item][control=\"slotted\"]) ::slotted([aria-checked=\"true\"]) {\n  box-shadow: inset 0 0 0 1px var(--ds-focus-ring) !important;\n}\n\n/* A paper tab (`ds-tabs paper`): a row high with its words on the sixteen,\n   rounded at the top only and square at the foot, where it joins the page. */\n:host([control=\"host\"][paper]),\n:host([control=\"slotted\"][paper]) ::slotted(:is(button, a)) {\n  align-items: flex-end !important;\n  border-start-start-radius: var(--ds-radius) !important;\n  border-start-end-radius: var(--ds-radius) !important;\n  border-end-start-radius: 0 !important;\n  border-end-end-radius: 0 !important;\n}\n\n/* A tab in a joined run (`ds-tabs split`): square inside, rounded at the run's ends. */\n:host([control=\"host\"][segment]) {\n  border-radius: 0 !important;\n}\n:host([control=\"host\"]:is([segment=\"first\"], [segment=\"only\"])) {\n  border-start-start-radius: var(--ds-radius) !important;\n  border-end-start-radius: var(--ds-radius) !important;\n}\n:host([control=\"host\"]:is([segment=\"last\"], [segment=\"only\"])) {\n  border-start-end-radius: var(--ds-radius) !important;\n  border-end-end-radius: var(--ds-radius) !important;\n}\n\n:host([control=\"host\"]:not([icon]):not([split]):not([menu-item])) {\n  min-width: max-content !important;\n  min-width: calc-size(max-content, round(up, size, var(--ds-unit))) !important;\n}\n:host([control=\"slotted\"]) ::slotted(:is(button, a)) {\n  min-width: max-content !important;\n  overflow: visible !important;\n}\n";
 //#endregion
 //#region DS1/2-core/styles/ds-button.css?inline
-var ds_button_default = "/* ds-button.css */\n/* Core button component styles. The face is a <button>, or an <a> when the\n   element has an href: both draw alike in every variant and state. */\n\n:host {\n  display: inline-flex;\n  /* At the foot of a line, so a 16px face takes the lower sixteen of the square. */\n  vertical-align: bottom;\n  min-width: 0;\n  flex: 0 0 auto;\n  width: var(--ds-button-width, var(--_button-inline-size, max-content));\n  max-width: 100%;\n  overflow: visible;\n  /* The button's own tokens, unset by default and in unscaled px as --ds-control-size is,\n     resolved here at this button's scale. Each face reads them first and falls back to its\n     own measure, so a page that sets none draws exactly as before. --ds-button-inline-size is\n     the width: unset hugs, 100% fills, a length is fixed. */\n  --_button-size: var(--ds-button-size);\n  --_button-height: calc(var(--_button-size) * var(--ds-sf));\n  --_button-corner-size: var(--ds-button-corner-size);\n  --_button-radius: calc(var(--_button-corner-size) * var(--ds-sf));\n  --_button-text-size: var(--ds-button-text-size);\n  --_button-font-size: calc(var(--_button-text-size) * var(--ds-sf));\n  --_button-padding-size: var(--ds-button-padding-size);\n  --_button-padding: calc(var(--_button-padding-size) * var(--ds-sf));\n  --_button-inline-size: var(--ds-button-inline-size);\n}\n\n/* Other controls drawn on this face keep their own measures: an icon or a count's square, a\n   tab, a menu entry, a split run and a paper tab. Their colours still follow the faces. */\n:host(:is([icon], [square], [split], [menu-item], [role=\"option\"], [role^=\"menuitem\"], [role=\"tab\"], [choice], [segment], [paper])) {\n  --_button-height: initial;\n  --_button-radius: initial;\n  --_button-font-size: initial;\n  --_button-padding: initial;\n  --_button-inline-size: initial;\n}\n\n/* Label width is standard. Fixed grid widths are explicit layout choices. */\n:host([fixed]) { width: var(--ds-button-width, calc(4 * var(--ds-unit))); }\n:host([wide]) { width: var(--ds-button-width, calc(8 * var(--ds-unit))); }\n/* Keep fit as an explicit intrinsic-width alias for existing consumers. */\n:host([fit]) {\n  flex: 0 0 auto;\n  width: max-content;\n}\n:host([fit]) :is(button, a) {\n  flex: 0 0 auto;\n  width: max-content;\n  min-width: var(--ds-button-min-width, 0px);\n  justify-content: var(--ds-button-align, flex-start);\n}\n:host([fit]) :is(button, a) ds-text,\n:host([fit]) :is(button, a) ::slotted(*) {\n  flex: 0 0 auto;\n  width: max-content;\n}\n\n:is(button, a) {\n  box-sizing: border-box;\n  max-height: var(--_button-height, var(--ds-control-height));\n  height: var(--_button-height, var(--ds-control-height));\n  min-height: var(--_button-height, var(--ds-control-height));\n  width: 100%;\n  max-width: 100%;\n  min-width: 0;\n  display: inline-flex;\n  align-items: center;\n  justify-content: flex-start;\n  border: none;\n  border-radius: var(--_button-radius, var(--ds-radius));\n  corner-shape: var(--ds-corner-shape, round);\n  cursor: pointer;\n  padding: 0;\n  color: var(--button-color, var(--button-text-color));\n  font-family: var(--ds-typeface-regular);\n  font-size: var(--_button-font-size, var(--ds-type-size-default));\n  line-height: var(--ds-type-lineheight-default);\n  letter-spacing: var(--ds-type-letterspacing-default);\n  -webkit-tap-highlight-color: transparent;\n  white-space: nowrap;\n  overflow-x: clip;\n  overflow-y: visible;\n  text-overflow: clip;\n  /* Default to no-background when no variant is specified */\n  background-color: transparent;\n  text-decoration: none;\n}\n\n:is(button, a) ds-text,\n:is(button, a) ::slotted(*) {\n  overflow-x: clip;\n  overflow-y: visible;\n  text-overflow: clip;\n  white-space: nowrap;\n  max-width: 100%;\n  text-align: left;\n  justify-content: flex-start;\n  color: inherit;\n}\n\n/* Words drawn by a translation key take the button's text size too: unset, the expression\n   ds-text resolves for itself (component-metrics.css). */\n:is(button, a) ds-text {\n  --ds-type-size-default: var(--_button-font-size, calc(var(--ds-text-size, 14px) * var(--ds-sf, 1)));\n}\n\n:is(button, a)[primary] {\n  background-color: var(--ds-button-primary-fill, var(--accent-color));\n  color: var(--ds-button-primary-text, var(--button-text-color-on-light, var(--black)));\n  text-decoration-line: none;\n  font-family: var(--ds-typeface-regular);\n  padding: 0 var(--_button-padding, calc(var(--ds-button-inset, 4px) * var(--ds-sf)));\n}\n\n/* The secondary face's words are the text's ink, as on `.ds-button--secondary`\n   and the host and slotted faces; the grey is the face, not the words. */\n:is(button, a)[secondary] {\n  background-color: var(--ds-button-secondary-fill, var(--button-background-color-secondary));\n  color: var(--ds-button-color, var(--ds-button-text-color));\n  font-family: var(--ds-typeface-regular);\n  padding: 0 var(--_button-padding, calc(var(--ds-button-inset, 4px) * var(--ds-sf)));\n}\n\n/* An entry in a menu or a list of options is one row high on this face too,\n   as on the host and slotted faces: the menu's --ds-button-height (one\n   square, or a compact row), its words at the start, padded 4px. */\n:host(:is([menu-item], [role=\"option\"], [role^=\"menuitem\"])) :is(button, a) {\n  /* Its words and icon on the lower sixteen of the row, the spare four above. */\n  align-items: flex-end;\n  height: var(--ds-button-height, var(--ds-row-height));\n  min-height: var(--ds-button-height, var(--ds-row-height));\n  max-height: var(--ds-button-height, var(--ds-row-height));\n  justify-content: var(--ds-button-align, flex-start);\n  padding: 0 calc(var(--ds-button-inset, 4px) * var(--ds-sf));\n}\n\n/* `danger`: a destructive action's words in the danger colour, on this face\n   as on the host and slotted faces and `.ds-button--danger`. */\n:host([danger]) :is(button, a) {\n  color: var(--ds-danger-color, var(--ds-tuned-red));\n}\n\n/* Disabled, as in the slotted and host modes. A disabled link has no href. */\n:is(button:disabled, a[aria-disabled=\"true\"]) {\n  cursor: default;\n  opacity: 0.5;\n}\n\n.loading {\n  opacity: 0.7;\n}\n\n/* A button that holds only an icon — every close button — is a 16-unit\n   square, scaled with the page, in the shape's corners: the icon fills it,\n   no word-padding around it, so the glyph's lines are the same size wherever\n   a page or a panel closes, on the web and in the app alike. The element\n   marks itself `icon` when its only child is an ds-icon. */\n:host([icon]) {\n  flex: 0 0 auto;\n  width: var(--ds-control-height);\n  height: var(--ds-control-height);\n}\n:host([icon]) :is(button, a) {\n  width: var(--ds-control-height);\n  padding: 0 !important;\n  justify-content: center;\n}\n:host([icon]) ::slotted(ds-icon) {\n  flex: 0 0 auto;\n  width: var(--ds-control-height);\n  height: var(--ds-control-height);\n}\n\n/* A button marked `square` is a 16-unit square whatever it holds, a count\n   or an initial, its words in its middle with no word-padding around them. */\n:host([square]) {\n  flex: 0 0 auto;\n  width: var(--ds-control-height);\n}\n:host([square]) :is(button, a) {\n  width: var(--ds-control-height);\n  padding: 0 !important;\n  justify-content: center;\n}\n\n/* Words and an icon hug them, as on every face (controls.css): this face has\n   no gap, and on a filled face the icon takes the padding on its side, its\n   own room around the glyph standing in for it. */\n:host(:is([primary], [secondary]):not([icon])) ::slotted(ds-icon:last-child:not(:first-child)) {\n  margin-inline-end: calc(-4px * var(--ds-sf));\n}\n:host(:is([primary], [secondary]):not([icon])) ::slotted(ds-icon:first-child:not(:last-child)) {\n  margin-inline-start: calc(-4px * var(--ds-sf));\n}\n\n/* A paper tab (`ds-tabs paper`) on this face: a row high with its words on\n   the sixteen, half a square of room at its sides, in the run's colours,\n   rounded at the top only and square at the foot, where it joins the page. */\n:host([paper]) :is(button, a) {\n  height: var(--ds-row-height);\n  min-height: var(--ds-row-height);\n  max-height: var(--ds-row-height);\n  align-items: flex-end;\n  padding: 0 calc(10px * var(--ds-sf));\n  border-radius: var(--ds-radius) var(--ds-radius) 0 0;\n  background-color: var(--ds-button-background, transparent);\n  color: var(--ds-button-color, var(--button-text-color));\n}\n\n/* A segment gets its outside corners from the enclosing split control, or\n   from its place in a joined run of tabs (`ds-tabs split`). */\n:host([segment]) :is(button, a) {\n  border-radius: 0 !important;\n}\n:host(:is([segment=\"first\"], [segment=\"only\"])) :is(button, a) {\n  border-start-start-radius: var(--ds-radius) !important;\n  border-end-start-radius: var(--ds-radius) !important;\n}\n:host(:is([segment=\"last\"], [segment=\"only\"])) :is(button, a) {\n  border-start-end-radius: var(--ds-radius) !important;\n  border-end-end-radius: var(--ds-radius) !important;\n}\n\n/* A label is never truncated to meet a chosen width. Round its minimum up,\n   so explicit widths and flex layouts retain enough space for all the words. */\n:host(:not([icon]):not([split]):not([menu-item])) {\n  min-width: max-content;\n  min-width: calc-size(max-content, round(up, size, var(--ds-unit)));\n}\n/* A menu entry keeps a fixed width, so its words may still be cut and fade. */\n:host(:not([menu-item])) :is(button, a),\n:host(:not([menu-item])) :is(button, a) ds-text,\n:host(:not([menu-item])) :is(button, a) ::slotted(*) {\n  overflow: visible;\n  mask-image: none;\n  text-overflow: clip;\n}\n";
+var ds_button_default = "/* ds-button.css */\n/* Core button component styles. The face is a <button>, or an <a> when the\n   element has an href: both draw alike in every variant and state. */\n\n:host {\n  display: inline-flex;\n  /* At the foot of a line, so a 16px face takes the lower sixteen of the square. */\n  vertical-align: bottom;\n  min-width: 0;\n  flex: 0 0 auto;\n  width: var(--ds-button-width, var(--_button-inline-size, max-content));\n  max-width: 100%;\n  overflow: visible;\n  /* The button's own tokens, unset by default and in unscaled px as --ds-control-size is,\n     resolved here at this button's scale. Each face reads them first and falls back to its\n     own measure, so a page that sets none draws exactly as before. --ds-button-inline-size is\n     the width: unset hugs, 100% fills, a length is fixed. */\n  --_button-size: var(--ds-button-size);\n  --_button-height: calc(var(--_button-size) * var(--ds-sf));\n  --_button-corner-size: var(--ds-button-corner-size);\n  --_button-radius: calc(var(--_button-corner-size) * var(--ds-sf));\n  --_button-text-size: var(--ds-button-text-size);\n  --_button-font-size: calc(var(--_button-text-size) * var(--ds-sf));\n  --_button-padding-size: var(--ds-button-padding-size);\n  --_button-padding: calc(var(--_button-padding-size) * var(--ds-sf));\n  --_button-inline-size: var(--ds-button-inline-size);\n}\n\n/* Other controls drawn on this face keep their own measures: an icon or a count's square, a\n   tab, a menu entry, a split run and a paper tab. Their colours still follow the faces. */\n:host(:is([icon], [square], [split], [menu-item], [role=\"option\"], [role^=\"menuitem\"], [role=\"tab\"], [choice], [segment], [paper])) {\n  --_button-height: initial;\n  --_button-radius: initial;\n  --_button-font-size: initial;\n  --_button-padding: initial;\n  --_button-inline-size: initial;\n}\n\n/* Label width is standard. Fixed grid widths are explicit layout choices. */\n:host([fixed]) { width: var(--ds-button-width, calc(4 * var(--ds-unit))); }\n:host([wide]) { width: var(--ds-button-width, calc(8 * var(--ds-unit))); }\n/* Keep fit as an explicit intrinsic-width alias for existing consumers. */\n:host([fit]) {\n  flex: 0 0 auto;\n  width: max-content;\n}\n:host([fit]) :is(button, a) {\n  flex: 0 0 auto;\n  /* Hug sizing belongs to the host, including its grid rounding. */\n  width: 100%;\n  min-width: var(--ds-button-min-width, 0px);\n  justify-content: var(--ds-button-align, flex-start);\n}\n:host([fit]) :is(button, a) ds-text,\n:host([fit]) :is(button, a) ::slotted(*) {\n  flex: 0 0 auto;\n  width: max-content;\n}\n\n:is(button, a) {\n  box-sizing: border-box;\n  max-height: var(--_button-height, var(--ds-control-height));\n  height: var(--_button-height, var(--ds-control-height));\n  min-height: var(--_button-height, var(--ds-control-height));\n  width: 100%;\n  max-width: 100%;\n  min-width: 0;\n  display: inline-flex;\n  align-items: center;\n  justify-content: flex-start;\n  border: none;\n  border-radius: var(--_button-radius, var(--ds-radius));\n  corner-shape: var(--ds-corner-shape, round);\n  cursor: pointer;\n  padding: 0;\n  color: var(--button-color, var(--button-text-color));\n  font-family: \"Inter Arrows\", var(--ds-typeface-regular);\n  font-size: var(--_button-font-size, var(--ds-type-size-default));\n  line-height: var(--ds-type-lineheight-default);\n  letter-spacing: var(--ds-type-letterspacing-default);\n  -webkit-tap-highlight-color: transparent;\n  white-space: nowrap;\n  overflow-x: clip;\n  overflow-y: visible;\n  text-overflow: clip;\n  /* Default to no-background when no variant is specified */\n  background-color: transparent;\n  text-decoration: none;\n}\n\n:is(button, a) ds-text,\n:is(button, a) ::slotted(*) {\n  overflow-x: clip;\n  overflow-y: visible;\n  text-overflow: clip;\n  white-space: nowrap;\n  max-width: 100%;\n  text-align: left;\n  justify-content: flex-start;\n  color: inherit;\n}\n\n/* Words drawn by a translation key take the button's text size too: unset, the expression\n   ds-text resolves for itself (component-metrics.css). */\n:is(button, a) ds-text {\n  --ds-type-size-default: var(--_button-font-size, calc(var(--ds-text-size, 14px) * var(--ds-sf, 1)));\n}\n\n:is(button, a)[primary] {\n  background-color: var(--ds-button-primary-fill, var(--accent-color));\n  color: var(--ds-button-primary-text, var(--button-text-color-on-light, var(--black)));\n  text-decoration-line: none;\n  font-family: \"Inter Arrows\", var(--ds-typeface-regular);\n  padding: 0 var(--_button-padding, calc(var(--ds-button-inset, 4px) * var(--ds-sf)));\n}\n\n/* The secondary face's words are the text's ink, as on `.ds-button--secondary`\n   and the host and slotted faces; the grey is the face, not the words. */\n:is(button, a)[secondary] {\n  background-color: var(--ds-button-secondary-fill, var(--button-background-color-secondary));\n  color: var(--ds-button-color, var(--ds-button-text-color));\n  font-family: \"Inter Arrows\", var(--ds-typeface-regular);\n  padding: 0 var(--_button-padding, calc(var(--ds-button-inset, 4px) * var(--ds-sf)));\n}\n\n/* An entry in a menu or a list of options is one row high on this face too,\n   as on the host and slotted faces: the menu's --ds-button-height (one\n   square, or a compact row), its words at the start, padded 4px. */\n:host(:is([menu-item], [role=\"option\"], [role^=\"menuitem\"])) :is(button, a) {\n  /* Its words and icon on the lower sixteen of the row, the spare four above. */\n  align-items: flex-end;\n  height: var(--ds-button-height, var(--ds-row-height));\n  min-height: var(--ds-button-height, var(--ds-row-height));\n  max-height: var(--ds-button-height, var(--ds-row-height));\n  justify-content: var(--ds-button-align, flex-start);\n  padding: 0 calc(var(--ds-button-inset, 4px) * var(--ds-sf));\n}\n\n/* `danger`: a destructive action's words in the danger colour, on this face\n   as on the host and slotted faces and `.ds-button--danger`. */\n:host([danger]) :is(button, a) {\n  color: var(--ds-danger-color, var(--ds-tuned-red));\n}\n\n/* Disabled, as in the slotted and host modes. A disabled link has no href. */\n:is(button:disabled, a[aria-disabled=\"true\"]) {\n  cursor: default;\n  opacity: 0.5;\n}\n\n.loading {\n  opacity: 0.7;\n}\n\n/* A button that holds only an icon — every close button — is a 16-unit\n   square, scaled with the page, in the shape's corners: the icon fills it,\n   no word-padding around it, so the glyph's lines are the same size wherever\n   a page or a panel closes, on the web and in the app alike. The element\n   marks itself `icon` when its only child is an ds-icon. */\n:host([icon]) {\n  flex: 0 0 auto;\n  width: var(--ds-control-height);\n  height: var(--ds-control-height);\n}\n:host([icon]) :is(button, a) {\n  width: var(--ds-control-height);\n  padding: 0 !important;\n  justify-content: center;\n}\n:host([icon]) ::slotted(ds-icon) {\n  flex: 0 0 auto;\n  width: var(--ds-control-height);\n  height: var(--ds-control-height);\n}\n\n/* A button marked `square` is a 16-unit square whatever it holds, a count\n   or an initial, its words in its middle with no word-padding around them. */\n:host([square]) {\n  flex: 0 0 auto;\n  width: var(--ds-control-height);\n}\n:host([square]) :is(button, a) {\n  width: var(--ds-control-height);\n  padding: 0 !important;\n  justify-content: center;\n}\n\n/* Words and an icon hug them, as on every face (controls.css): this face has\n   no gap, and on a filled face the icon takes the padding on its side, its\n   own room around the glyph standing in for it. */\n:host(:is([primary], [secondary]):not([icon])) ::slotted(ds-icon:last-child:not(:first-child)) {\n  margin-inline-end: calc(-4px * var(--ds-sf));\n}\n:host(:is([primary], [secondary]):not([icon])) ::slotted(ds-icon:first-child:not(:last-child)) {\n  margin-inline-start: calc(-4px * var(--ds-sf));\n}\n\n/* A paper tab (`ds-tabs paper`) on this face: a row high with its words on\n   the sixteen, half a square of room at its sides, in the run's colours,\n   rounded at the top only and square at the foot, where it joins the page. */\n:host([paper]) :is(button, a) {\n  height: var(--ds-row-height);\n  min-height: var(--ds-row-height);\n  max-height: var(--ds-row-height);\n  align-items: flex-end;\n  padding: 0 calc(10px * var(--ds-sf));\n  border-radius: var(--ds-radius) var(--ds-radius) 0 0;\n  background-color: var(--ds-button-background, transparent);\n  color: var(--ds-button-color, var(--button-text-color));\n}\n\n/* A segment gets its outside corners from the enclosing split control, or\n   from its place in a joined run of tabs (`ds-tabs split`). */\n:host([segment]) :is(button, a) {\n  border-radius: 0 !important;\n}\n:host(:is([segment=\"first\"], [segment=\"only\"])) :is(button, a) {\n  border-start-start-radius: var(--ds-radius) !important;\n  border-end-start-radius: var(--ds-radius) !important;\n}\n:host(:is([segment=\"last\"], [segment=\"only\"])) :is(button, a) {\n  border-start-end-radius: var(--ds-radius) !important;\n  border-end-end-radius: var(--ds-radius) !important;\n}\n\n/* A label is never truncated to meet a chosen width. Round its minimum up,\n   so explicit widths and flex layouts retain enough space for all the words. */\n:host(:not([icon]):not([split]):not([menu-item])) {\n  min-width: max-content;\n  min-width: calc-size(max-content, round(up, size, var(--ds-unit)));\n}\n/* A menu entry keeps a fixed width, so its words may still be cut and fade. */\n:host(:not([menu-item])) :is(button, a),\n:host(:not([menu-item])) :is(button, a) ds-text,\n:host(:not([menu-item])) :is(button, a) ::slotted(*) {\n  overflow: visible;\n  mask-image: none;\n  text-overflow: clip;\n}\n";
 //#endregion
 //#region DS1/2-core/button-split.ts
 function choices(host) {
@@ -6268,7 +6527,7 @@ function renderSplit(host) {
 }
 //#endregion
 //#region DS1/2-core/styles/ds-button-split.css?inline
-var ds_button_split_default = "\n\n:host([split]) {\n  display: inline-flex;\n  max-width: none;\n  overflow: visible;\n  flex: none;\n  align-items: stretch;\n  height: var(--ds-control-height);\n  gap: 1px;\n  vertical-align: bottom;\n}\n:host([split][hidden]) { display: none; }\n\n:host([split]) button {\n  appearance: none;\n  width: auto;\n  max-width: none;\n  flex: 0 0 auto;\n  box-sizing: border-box;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  height: var(--ds-control-height);\n  margin: 0;\n  padding: 0 calc(5px * var(--ds-sf));\n  border: 0;\n  border-radius: 0;\n  corner-shape: var(--ds-corner-shape, round);\n  background: var(--ds-button-background-color-secondary);\n  color: var(--ds-text-color-muted);\n  font-family: var(--ds-typeface-regular);\n  font-feature-settings: var(--ds-font-features);\n  font-size: var(--ds-type-size-default);\n  font-weight: var(--ds-type-weight-default);\n  line-height: var(--ds-control-height);\n  letter-spacing: var(--ds-type-letterspacing-default);\n  white-space: nowrap;\n  cursor: pointer;\n  -webkit-tap-highlight-color: transparent;\n}\n:host([split]) button:first-child {\n  border-start-start-radius: var(--ds-radius);\n  border-end-start-radius: var(--ds-radius);\n}\n:host([split]) button:last-child {\n  border-start-end-radius: var(--ds-radius);\n  border-end-end-radius: var(--ds-radius);\n}\n:host([split]) button[data-icon] { width: var(--ds-control-height); padding: 0; }\n/* An icon with its words hugs them: the icon's own 4px room around its glyph\n   replaces the padding on its side and the gap before the words. */\n:host([split]) button[data-icon-words] { gap: 0; padding-inline-start: 0; }\n:host([split]) ds-icon { --ds-icon-size: 16px; color: inherit; }\n:host([split]) ds-text { color: inherit; }\n/* Compact numeric views: a single digit is a square; longer values use the\n   shared compressed face and smaller inset. Products supply only the labels. */\n:host([split][compact]) button:not([data-icon], [data-short]) {\n  --ds-typeface-regular: var(--ds-typeface-compressed);\n  padding-inline: calc(3px * var(--ds-sf));\n}\n:host([split][compact]) button[data-short] { width: var(--ds-control-height); padding: 0; }\n:host([split]) button:hover:not(:disabled, [aria-pressed=\"true\"]) { color: var(--ds-text-color); }\n:host([split]) button[aria-pressed=\"true\"] {\n  background: var(--ds-accent-color);\n  color: var(--ds-button-text-color-on-accent);\n  cursor: default;\n}\n:host([split]) button:disabled { cursor: default; opacity: 0.5; }\n/* Plain: the words and icons alone on no ground in any state, in the muted ink, the pointer and\n   the chosen segment taking the ink, as text tabs do. */\n:host([split][plain]) button,\n:host([split][plain]) button[aria-pressed=\"true\"] { background: transparent; }\n:host([split][plain]) button[aria-pressed=\"true\"] { color: var(--ds-text-color); }\n:host([split]) button:focus-visible { outline: 1px solid currentColor; outline-offset: -2px; }\n";
+var ds_button_split_default = "\n\n:host([split]) {\n  display: inline-flex;\n  max-width: none;\n  overflow: visible;\n  flex: none;\n  align-items: stretch;\n  height: var(--ds-control-height);\n  gap: 1px;\n  vertical-align: bottom;\n}\n:host([split][hidden]) { display: none; }\n\n:host([split]) button {\n  appearance: none;\n  width: auto;\n  max-width: none;\n  flex: 0 0 auto;\n  box-sizing: border-box;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  height: var(--ds-control-height);\n  margin: 0;\n  padding: 0 calc(5px * var(--ds-sf));\n  border: 0;\n  border-radius: 0;\n  corner-shape: var(--ds-corner-shape, round);\n  background: var(--ds-button-background-color-secondary);\n  color: var(--ds-text-color-muted);\n  font-family: \"Inter Arrows\", var(--ds-typeface-regular);\n  font-feature-settings: var(--ds-font-features);\n  font-size: var(--ds-type-size-default);\n  font-weight: var(--ds-type-weight-default);\n  line-height: var(--ds-control-height);\n  letter-spacing: var(--ds-type-letterspacing-default);\n  white-space: nowrap;\n  cursor: pointer;\n  -webkit-tap-highlight-color: transparent;\n}\n:host([split]) button:first-child {\n  border-start-start-radius: var(--ds-radius);\n  border-end-start-radius: var(--ds-radius);\n}\n:host([split]) button:last-child {\n  border-start-end-radius: var(--ds-radius);\n  border-end-end-radius: var(--ds-radius);\n}\n:host([split]) button[data-icon] { width: var(--ds-control-height); padding: 0; }\n/* An icon with its words hugs them: the icon's own 4px room around its glyph\n   replaces the padding on its side and the gap before the words. */\n:host([split]) button[data-icon-words] { gap: 0; padding-inline-start: 0; }\n:host([split]) ds-icon { --ds-icon-size: 16px; color: inherit; }\n:host([split]) ds-text { color: inherit; }\n/* Compact numeric views: a single digit is a square; longer values use the\n   shared compressed face and smaller inset. Products supply only the labels. */\n:host([split][compact]) button:not([data-icon], [data-short]) {\n  --ds-typeface-regular: var(--ds-typeface-compressed);\n  padding-inline: calc(3px * var(--ds-sf));\n}\n:host([split][compact]) button[data-short] { width: var(--ds-control-height); padding: 0; }\n:host([split]) button:hover:not(:disabled, [aria-pressed=\"true\"]) { color: var(--ds-text-color); }\n:host([split]) button[aria-pressed=\"true\"] {\n  background: var(--ds-accent-color);\n  color: var(--ds-button-text-color-on-accent);\n  cursor: default;\n}\n:host([split]) button:disabled { cursor: default; opacity: 0.5; }\n/* Plain: the words and icons alone on no ground in any state, in the muted ink, the pointer and\n   the chosen segment taking the ink, as text tabs do. */\n:host([split][plain]) button,\n:host([split][plain]) button[aria-pressed=\"true\"] { background: transparent; }\n:host([split][plain]) button[aria-pressed=\"true\"] { color: var(--ds-text-color); }\n:host([split]) button:focus-visible { outline: 1px solid currentColor; outline-offset: -2px; }\n";
 //#endregion
 //#region DS1/2-core/ds-button.ts
 var _Button;
@@ -6538,7 +6797,7 @@ define("ds-button", Button);
 var component_metrics_default = "/* Shape is a surface preference. Keep these base lengths unscaled: each\n * component resolves them with its own --ds-sf in component-metrics.css. */\n[data-ds-shape=\"square\"],\n:host([data-ds-shape=\"square\"]) {\n  --ds-corner-size: 0px;\n  --ds-corner-shape: round;\n  --ds-button-inset: 0.5px;\n}\n\n[data-ds-shape=\"rounded\"],\n:host([data-ds-shape=\"rounded\"]) {\n  --ds-corner-size: 4px;\n  --ds-corner-shape: round;\n  --ds-button-inset: 2.5px;\n}\n\n[data-ds-shape=\"circular\"],\n:host([data-ds-shape=\"circular\"]) {\n  --ds-corner-size: 999px;\n  --ds-corner-shape: round;\n  --ds-button-inset: 5px;\n}\n\n/* A squircle needs twice an arc's radius for the same apparent corner.\n * Circular controls keep true semicircles even in a squircle browser. */\n@supports (corner-shape: squircle) {\n  [data-ds-shape=\"rounded\"],\n  :host([data-ds-shape=\"rounded\"]) {\n    --ds-corner-size: 8px;\n    --ds-corner-shape: squircle;\n  }\n}\n/* Resolve dimensions where a component is drawn. Inherited calc() values have\n * already used their ancestor's scale. Base tokens stay unscaled and inherit;\n * resolved tokens can still be overridden directly on a component.\n * data-ds-surface gives ordinary layout elements the same scaled measures.\n */\n:root,\n:host,\n:where([data-ds-surface]) {\n  --ds-unit: calc(var(--ds-1, 20px) * var(--ds-sf, 1));\n  --ds-control-height: calc(var(--ds-control-size, var(--ds-08, 16px)) * var(--ds-sf, 1));\n  --ds-row-height: calc(var(--ds-row-size, var(--ds-1, 20px)) * var(--ds-sf, 1));\n  --ds-type-size-default: calc(var(--ds-text-size, 14px) * var(--ds-sf, 1));\n  --ds-type-size-small: calc(var(--ds-small-text-size, 10px) * var(--ds-sf, 1));\n  --ds-type-size-heading: calc(var(--ds-heading-text-size, 13px) * var(--ds-sf, 1));\n  --ds-type-size-display: calc(var(--ds-display-text-size, 20px) * var(--ds-sf, 1));\n  --ds-type-lineheight-default: calc(var(--ds-text-leading, 16px) * var(--ds-sf, 1));\n  --ds-type-letterspacing-default: calc(var(--ds-text-tracking, -0.3px) * var(--ds-sf, 1));\n  --ds-radius: calc(var(--ds-corner-size, 4px) * var(--ds-sf, 1));\n  --ds-radius-card: calc(var(--ds-card-corner-size, 4px) * var(--ds-sf, 1));\n}\n";
 //#endregion
 //#region DS1/2-core/styles/ds-activity.css?inline
-var ds_activity_default = "/* One square; its four-by-four mark stands on the lower sixteen. */\n:host { display: inline-flex; align-items: flex-end; min-height: var(--ds-unit); gap: calc(var(--ds-unit) - var(--ds-control-height)); color: var(--ds-activity-color, var(--ds-text-color)); }\n:host([hidden]) { display: none !important; }\n.mark { position: relative; display: block; flex: none; width: var(--ds-control-height); height: var(--ds-control-height); }\n.frame { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(4, 1fr); opacity: 0; }\n.frame:first-child { opacity: 1; }\ni { display: block; }\ni.ink { background: currentColor; }\n.words { font-family: var(--ds-typeface-regular); font-size: var(--ds-type-size-default); line-height: var(--ds-type-lineheight-default); color: var(--ds-text-color); }\n/* Eight held poses, 200ms each. No spinner, percentage or synthetic progress. */\n:host([active]) .frame { animation: ds-activity-pose 1600ms linear infinite; }\n@keyframes ds-activity-pose { 0%, 12.49% { opacity: 1; } 12.5%, 100% { opacity: 0; } }\n@media (prefers-reduced-motion: reduce) {\n  :host([active]) .frame { animation: none; opacity: 0; }\n  :host([active]) .frame:first-child { opacity: 1; }\n}\n";
+var ds_activity_default = "/* One square; its four-by-four mark stands on the lower sixteen. */\n:host { display: inline-flex; align-items: flex-end; min-height: var(--ds-unit); gap: calc(var(--ds-unit) - var(--ds-control-height)); color: var(--ds-activity-color, var(--ds-text-color)); }\n:host([hidden]) { display: none !important; }\n.mark { position: relative; display: block; flex: none; width: var(--ds-control-height); height: var(--ds-control-height); }\n.frame { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(4, 1fr); opacity: 0; }\n.frame:first-child { opacity: 1; }\ni { display: block; }\ni.ink { background: currentColor; }\n.words { font-family: \"Inter Arrows\", var(--ds-typeface-regular); font-size: var(--ds-type-size-default); line-height: var(--ds-type-lineheight-default); color: var(--ds-text-color); }\n/* Eight held poses, 200ms each. No spinner, percentage or synthetic progress. */\n:host([active]) .frame { animation: ds-activity-pose 1600ms linear infinite; }\n@keyframes ds-activity-pose { 0%, 12.49% { opacity: 1; } 12.5%, 100% { opacity: 0; } }\n@media (prefers-reduced-motion: reduce) {\n  :host([active]) .frame { animation: none; opacity: 0; }\n  :host([active]) .frame:first-child { opacity: 1; }\n}\n";
 //#endregion
 //#region DS1/2-core/ds-activity.ts
 var _Activity;
@@ -6641,7 +6900,7 @@ _Checkbox.styles = [r$4(ds_checkbox_default), r$4(`:host { --ds-checkbox-mark: u
 define("ds-checkbox", Checkbox);
 //#endregion
 //#region DS1/2-core/styles/ds-radio.css?inline
-var ds_radio_default = "/* Shape is a surface preference. Keep these base lengths unscaled: each\n * component resolves them with its own --ds-sf in component-metrics.css. */\n[data-ds-shape=\"square\"],\n:host([data-ds-shape=\"square\"]) {\n  --ds-corner-size: 0px;\n  --ds-corner-shape: round;\n  --ds-button-inset: 0.5px;\n}\n\n[data-ds-shape=\"rounded\"],\n:host([data-ds-shape=\"rounded\"]) {\n  --ds-corner-size: 4px;\n  --ds-corner-shape: round;\n  --ds-button-inset: 2.5px;\n}\n\n[data-ds-shape=\"circular\"],\n:host([data-ds-shape=\"circular\"]) {\n  --ds-corner-size: 999px;\n  --ds-corner-shape: round;\n  --ds-button-inset: 5px;\n}\n\n/* A squircle needs twice an arc's radius for the same apparent corner.\n * Circular controls keep true semicircles even in a squircle browser. */\n@supports (corner-shape: squircle) {\n  [data-ds-shape=\"rounded\"],\n  :host([data-ds-shape=\"rounded\"]) {\n    --ds-corner-size: 8px;\n    --ds-corner-shape: squircle;\n  }\n}\n/* Resolve dimensions where a component is drawn. Inherited calc() values have\n * already used their ancestor's scale. Base tokens stay unscaled and inherit;\n * resolved tokens can still be overridden directly on a component.\n * data-ds-surface gives ordinary layout elements the same scaled measures.\n */\n:root,\n:host,\n:where([data-ds-surface]) {\n  --ds-unit: calc(var(--ds-1, 20px) * var(--ds-sf, 1));\n  --ds-control-height: calc(var(--ds-control-size, var(--ds-08, 16px)) * var(--ds-sf, 1));\n  --ds-row-height: calc(var(--ds-row-size, var(--ds-1, 20px)) * var(--ds-sf, 1));\n  --ds-type-size-default: calc(var(--ds-text-size, 14px) * var(--ds-sf, 1));\n  --ds-type-size-small: calc(var(--ds-small-text-size, 10px) * var(--ds-sf, 1));\n  --ds-type-size-heading: calc(var(--ds-heading-text-size, 13px) * var(--ds-sf, 1));\n  --ds-type-size-display: calc(var(--ds-display-text-size, 20px) * var(--ds-sf, 1));\n  --ds-type-lineheight-default: calc(var(--ds-text-leading, 16px) * var(--ds-sf, 1));\n  --ds-type-letterspacing-default: calc(var(--ds-text-tracking, -0.3px) * var(--ds-sf, 1));\n  --ds-radius: calc(var(--ds-corner-size, 4px) * var(--ds-sf, 1));\n  --ds-radius-card: calc(var(--ds-card-corner-size, 4px) * var(--ds-sf, 1));\n}\n:host {\n  display: inline-flex;\n  position: relative;\n  flex: 0 0 auto;\n  vertical-align: middle;\n  width: var(--ds-unit);\n  height: var(--ds-unit);\n}\n:host([hidden]) { display: none !important; }\n/* A plain radio as the checkbox: a 16px circle on its square's lower sixteen, at its start. */\n:host(:not([choice])) { display: inline-grid; align-items: end; justify-items: start; vertical-align: top; }\n:host(:not([choice])) ::slotted(input[type=\"radio\"]) { width: var(--ds-control-height) !important; height: var(--ds-control-height) !important; }\n::slotted(input[type=\"radio\"]) {\n  appearance: none !important;\n  box-sizing: border-box !important;\n  display: grid !important;\n  place-items: center !important;\n  width: 100% !important;\n  min-width: 0 !important;\n  height: 100% !important;\n  min-height: 0 !important;\n  margin: 0 !important;\n  padding: 0 !important;\n  border: 1px solid var(--ds-border-color) !important;\n  border-radius: 50% !important;\n  background: var(--ds-input-background) !important;\n  color: var(--ds-text-color) !important;\n  box-shadow: none !important;\n  cursor: pointer !important;\n}\n::slotted(input[hidden]) { display: none !important; }\n::slotted(input)::before {\n  content: \"\";\n  width: calc(var(--ds-control-height) / 2);\n  height: calc(var(--ds-control-height) / 2);\n  border-radius: 50%;\n  background: currentColor;\n  opacity: 0;\n}\n::slotted(input:checked)::before { opacity: 1; }\n::slotted(input:focus-visible) { outline: 2px solid var(--ds-focus-ring) !important; outline-offset: 1px !important; }\n::slotted(input:disabled) { cursor: default !important; opacity: .5 !important; }\n\n:host([choice]) { width: calc(4 * var(--ds-unit)); }\n:host([choice][compact]) { width: var(--ds-unit); }\n:host([choice][preview]) { height: calc(3 * var(--ds-unit)); }\n:host([choice]) ::slotted(input) {\n  position: absolute !important;\n  inset: 0 !important;\n  opacity: 1 !important;\n  border-radius: var(--ds-radius) !important;\n  background: transparent !important;\n  z-index: 1;\n}\n:host([choice]) ::slotted(input)::before { display: none; }\n:host([choice]) ::slotted(input:checked) { border-color: var(--ds-text-color) !important; }\n:host([choice]) ::slotted(input:disabled) { background: color-mix(in srgb, var(--ds-paper) 60%, transparent) !important; }\n.face {\n  display: grid;\n  grid-template-rows: minmax(0, 1fr);\n  box-sizing: border-box;\n  width: 100%;\n  height: 100%;\n  overflow: hidden;\n  border: 1px solid transparent;\n  border-radius: var(--ds-radius);\n  background: var(--ds-input-background);\n  color: var(--ds-text-color);\n  pointer-events: none;\n}\n:host([preview]) .face { grid-template-rows: minmax(0, 1fr) calc(var(--ds-unit) - 1px); }\n.preview { display: grid; min-height: 0; overflow: hidden; }\n::slotted([slot=\"preview\"]) { display: block; width: 100%; height: 100%; min-width: 0; min-height: 0; }\n.label {\n  align-self: center;\n  overflow: hidden;\n  padding-inline: calc(4px * var(--ds-sf));\n  font: 400 var(--ds-type-size-default) / var(--ds-type-lineheight-default) var(--ds-typeface-regular);\n  letter-spacing: var(--ds-type-letterspacing-default);\n  white-space: nowrap;\n  text-align: center;\n  text-overflow: clip;\n}\n/* A cut label fades over its last square, never an ellipsis (0-face/cut-fade.ts marks it). */\n.label[data-cut=\"end\"] { mask-image: linear-gradient(to right, #000 calc(100% - var(--ds-unit)), transparent); }\n:host(:dir(rtl)) .label[data-cut=\"end\"] { mask-image: linear-gradient(to left, #000 calc(100% - var(--ds-unit)), transparent); }\n:host([compact]) .label { padding-inline: 0; }\n";
+var ds_radio_default = "/* Shape is a surface preference. Keep these base lengths unscaled: each\n * component resolves them with its own --ds-sf in component-metrics.css. */\n[data-ds-shape=\"square\"],\n:host([data-ds-shape=\"square\"]) {\n  --ds-corner-size: 0px;\n  --ds-corner-shape: round;\n  --ds-button-inset: 0.5px;\n}\n\n[data-ds-shape=\"rounded\"],\n:host([data-ds-shape=\"rounded\"]) {\n  --ds-corner-size: 4px;\n  --ds-corner-shape: round;\n  --ds-button-inset: 2.5px;\n}\n\n[data-ds-shape=\"circular\"],\n:host([data-ds-shape=\"circular\"]) {\n  --ds-corner-size: 999px;\n  --ds-corner-shape: round;\n  --ds-button-inset: 5px;\n}\n\n/* A squircle needs twice an arc's radius for the same apparent corner.\n * Circular controls keep true semicircles even in a squircle browser. */\n@supports (corner-shape: squircle) {\n  [data-ds-shape=\"rounded\"],\n  :host([data-ds-shape=\"rounded\"]) {\n    --ds-corner-size: 8px;\n    --ds-corner-shape: squircle;\n  }\n}\n/* Resolve dimensions where a component is drawn. Inherited calc() values have\n * already used their ancestor's scale. Base tokens stay unscaled and inherit;\n * resolved tokens can still be overridden directly on a component.\n * data-ds-surface gives ordinary layout elements the same scaled measures.\n */\n:root,\n:host,\n:where([data-ds-surface]) {\n  --ds-unit: calc(var(--ds-1, 20px) * var(--ds-sf, 1));\n  --ds-control-height: calc(var(--ds-control-size, var(--ds-08, 16px)) * var(--ds-sf, 1));\n  --ds-row-height: calc(var(--ds-row-size, var(--ds-1, 20px)) * var(--ds-sf, 1));\n  --ds-type-size-default: calc(var(--ds-text-size, 14px) * var(--ds-sf, 1));\n  --ds-type-size-small: calc(var(--ds-small-text-size, 10px) * var(--ds-sf, 1));\n  --ds-type-size-heading: calc(var(--ds-heading-text-size, 13px) * var(--ds-sf, 1));\n  --ds-type-size-display: calc(var(--ds-display-text-size, 20px) * var(--ds-sf, 1));\n  --ds-type-lineheight-default: calc(var(--ds-text-leading, 16px) * var(--ds-sf, 1));\n  --ds-type-letterspacing-default: calc(var(--ds-text-tracking, -0.3px) * var(--ds-sf, 1));\n  --ds-radius: calc(var(--ds-corner-size, 4px) * var(--ds-sf, 1));\n  --ds-radius-card: calc(var(--ds-card-corner-size, 4px) * var(--ds-sf, 1));\n}\n:host {\n  display: inline-flex;\n  position: relative;\n  flex: 0 0 auto;\n  vertical-align: middle;\n  width: var(--ds-unit);\n  height: var(--ds-unit);\n}\n:host([hidden]) { display: none !important; }\n/* A plain radio as the checkbox: a 16px circle on its square's lower sixteen, at its start. */\n:host(:not([choice])) { display: inline-grid; align-items: end; justify-items: start; vertical-align: top; }\n:host(:not([choice])) ::slotted(input[type=\"radio\"]) { width: var(--ds-control-height) !important; height: var(--ds-control-height) !important; }\n::slotted(input[type=\"radio\"]) {\n  appearance: none !important;\n  box-sizing: border-box !important;\n  display: grid !important;\n  place-items: center !important;\n  width: 100% !important;\n  min-width: 0 !important;\n  height: 100% !important;\n  min-height: 0 !important;\n  margin: 0 !important;\n  padding: 0 !important;\n  border: 1px solid var(--ds-border-color) !important;\n  border-radius: 50% !important;\n  background: var(--ds-input-background) !important;\n  color: var(--ds-text-color) !important;\n  box-shadow: none !important;\n  cursor: pointer !important;\n}\n::slotted(input[hidden]) { display: none !important; }\n::slotted(input)::before {\n  content: \"\";\n  width: calc(var(--ds-control-height) / 2);\n  height: calc(var(--ds-control-height) / 2);\n  border-radius: 50%;\n  background: currentColor;\n  opacity: 0;\n}\n::slotted(input:checked)::before { opacity: 1; }\n::slotted(input:focus-visible) { outline: 2px solid var(--ds-focus-ring) !important; outline-offset: 1px !important; }\n::slotted(input:disabled) { cursor: default !important; opacity: .5 !important; }\n\n:host([choice]) { width: calc(4 * var(--ds-unit)); }\n:host([choice][compact]) { width: var(--ds-unit); }\n:host([choice][preview]) { height: calc(3 * var(--ds-unit)); }\n:host([choice]) ::slotted(input) {\n  position: absolute !important;\n  inset: 0 !important;\n  opacity: 1 !important;\n  border-radius: var(--ds-radius) !important;\n  background: transparent !important;\n  z-index: 1;\n}\n:host([choice]) ::slotted(input)::before { display: none; }\n:host([choice]) ::slotted(input:checked) { border-color: var(--ds-text-color) !important; }\n:host([choice]) ::slotted(input:disabled) { background: color-mix(in srgb, var(--ds-paper) 60%, transparent) !important; }\n.face {\n  display: grid;\n  grid-template-rows: minmax(0, 1fr);\n  box-sizing: border-box;\n  width: 100%;\n  height: 100%;\n  overflow: hidden;\n  border: 1px solid transparent;\n  border-radius: var(--ds-radius);\n  background: var(--ds-input-background);\n  color: var(--ds-text-color);\n  pointer-events: none;\n}\n:host([preview]) .face { grid-template-rows: minmax(0, 1fr) calc(var(--ds-unit) - 1px); }\n.preview { display: grid; min-height: 0; overflow: hidden; }\n::slotted([slot=\"preview\"]) { display: block; width: 100%; height: 100%; min-width: 0; min-height: 0; }\n.label {\n  align-self: center;\n  overflow: hidden;\n  padding-inline: calc(4px * var(--ds-sf));\n  font: 400 var(--ds-type-size-default) / var(--ds-type-lineheight-default) \"Inter Arrows\", var(--ds-typeface-regular);\n  letter-spacing: var(--ds-type-letterspacing-default);\n  white-space: nowrap;\n  text-align: center;\n  text-overflow: clip;\n}\n/* A cut label fades over its last square, never an ellipsis (0-face/cut-fade.ts marks it). */\n.label[data-cut=\"end\"] { mask-image: linear-gradient(to right, #000 calc(100% - var(--ds-unit)), transparent); }\n:host(:dir(rtl)) .label[data-cut=\"end\"] { mask-image: linear-gradient(to left, #000 calc(100% - var(--ds-unit)), transparent); }\n:host([compact]) .label { padding-inline: 0; }\n";
 //#endregion
 //#region DS1/2-core/ds-radio.ts
 var _Radio;
@@ -6719,10 +6978,10 @@ define("ds-switch", Switch);
 var chevron_down_default = "<svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<path d=\"M4.25 6.25L8 10L11.75 6.25\" stroke=\"currentColor\"/>\n</svg>\n";
 //#endregion
 //#region DS1/3-unit/styles/ds-menu.css?inline
-var ds_menu_default = "/* Shape is a surface preference. Keep these base lengths unscaled: each\n * component resolves them with its own --ds-sf in component-metrics.css. */\n[data-ds-shape=\"square\"],\n:host([data-ds-shape=\"square\"]) {\n  --ds-corner-size: 0px;\n  --ds-corner-shape: round;\n  --ds-button-inset: 0.5px;\n}\n\n[data-ds-shape=\"rounded\"],\n:host([data-ds-shape=\"rounded\"]) {\n  --ds-corner-size: 4px;\n  --ds-corner-shape: round;\n  --ds-button-inset: 2.5px;\n}\n\n[data-ds-shape=\"circular\"],\n:host([data-ds-shape=\"circular\"]) {\n  --ds-corner-size: 999px;\n  --ds-corner-shape: round;\n  --ds-button-inset: 5px;\n}\n\n/* A squircle needs twice an arc's radius for the same apparent corner.\n * Circular controls keep true semicircles even in a squircle browser. */\n@supports (corner-shape: squircle) {\n  [data-ds-shape=\"rounded\"],\n  :host([data-ds-shape=\"rounded\"]) {\n    --ds-corner-size: 8px;\n    --ds-corner-shape: squircle;\n  }\n}\n/* Resolve dimensions where a component is drawn. Inherited calc() values have\n * already used their ancestor's scale. Base tokens stay unscaled and inherit;\n * resolved tokens can still be overridden directly on a component.\n * data-ds-surface gives ordinary layout elements the same scaled measures.\n */\n:root,\n:host,\n:where([data-ds-surface]) {\n  --ds-unit: calc(var(--ds-1, 20px) * var(--ds-sf, 1));\n  --ds-control-height: calc(var(--ds-control-size, var(--ds-08, 16px)) * var(--ds-sf, 1));\n  --ds-row-height: calc(var(--ds-row-size, var(--ds-1, 20px)) * var(--ds-sf, 1));\n  --ds-type-size-default: calc(var(--ds-text-size, 14px) * var(--ds-sf, 1));\n  --ds-type-size-small: calc(var(--ds-small-text-size, 10px) * var(--ds-sf, 1));\n  --ds-type-size-heading: calc(var(--ds-heading-text-size, 13px) * var(--ds-sf, 1));\n  --ds-type-size-display: calc(var(--ds-display-text-size, 20px) * var(--ds-sf, 1));\n  --ds-type-lineheight-default: calc(var(--ds-text-leading, 16px) * var(--ds-sf, 1));\n  --ds-type-letterspacing-default: calc(var(--ds-text-tracking, -0.3px) * var(--ds-sf, 1));\n  --ds-radius: calc(var(--ds-corner-size, 4px) * var(--ds-sf, 1));\n  --ds-radius-card: calc(var(--ds-card-corner-size, 4px) * var(--ds-sf, 1));\n}\n/* On whole squares: the line and the padding inside it make half a square on\n * each side, and every entry is one square high, so a menu of n entries is\n * n + 1 squares high. Placed half a square from its anchor, its entries\n * stand on the anchor's grid lines. No shadow: words on paper. */\n:host {\n  --ds-menu-row: var(--ds-row-height);\n  box-sizing: border-box;\n  display: block;\n  min-width: calc(8 * var(--ds-unit));\n  max-height: var(--ds-menu-max-height, calc(16 * var(--ds-unit)));\n  padding: 0;\n  border: 0;\n  background: transparent;\n}\n:host([hidden]) { display: none !important; }\n\n/* Keep the shared face inside the boundary: product resets can reach a host. */\n.frame {\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: column;\n  gap: 0;\n  width: 100%;\n  max-height: min(var(--ds-menu-max-height, calc(16 * var(--ds-unit))), var(--ds-menu-available-height, 100vh));\n  overflow-y: auto;\n  padding: calc(var(--ds-unit) / 2 - 1px);\n  border: 1px solid var(--ds-border-color);\n  border-radius: var(--ds-radius-card);\n  background: var(--ds-paper);\n  color: var(--ds-text-color);\n  box-shadow: none;\n  font-family: var(--ds-typeface-regular);\n  font-feature-settings: var(--ds-font-features);\n  font-size: var(--ds-type-size-default);\n  line-height: var(--ds-type-lineheight-default);\n  letter-spacing: var(--ds-type-letterspacing-default);\n}\nslot { display: contents; }\n\n/* Every entry is one row, whatever button styles a product or library gives\n * it: shared buttons through their height, a native button or link through\n * its box, which the menu's !important holds against outside styles. */\n::slotted(:is(ds-button, ds-file-picker)) { flex: 0 0 auto; width: 100%; --ds-button-height: var(--ds-menu-row); }\n::slotted(:is(button, a, [role=\"option\"], [role^=\"menuitem\"]):not(ds-button, ds-file-picker)) {\n  box-sizing: border-box !important;\n  flex: 0 0 auto !important;\n  height: var(--ds-menu-row) !important;\n  min-height: var(--ds-menu-row) !important;\n  max-height: var(--ds-menu-row) !important;\n  margin-block: 0 !important;\n  padding-block: 0 !important;\n  line-height: var(--ds-type-lineheight-default) !important;\n}\n\n:host([floating]:not([open])) { display: none; }\n:host([floating]) { position: fixed; inset: auto; margin: 0; min-width: 0; width: var(--ds-menu-width, var(--ds-menu-anchor-width)); z-index: 1; scroll-padding: calc(var(--ds-unit) / 2); }\n:host([floating]) ::slotted(:is(ds-button, ds-file-picker)) { flex: 0 0 auto; --ds-button-height: var(--ds-menu-row); --ds-button-align: flex-start; --ds-button-padding: 0 calc(4px * var(--ds-sf)); width: 100%; }\n:host([data-grid]) { width: max-content; min-width: 0; }\n:host([data-grid]) .frame { display: grid; grid-template-columns: repeat(var(--ds-menu-columns), var(--ds-row-height)); width: max-content; max-width: 100%; }\n:host([data-grid]) ::slotted(:is(ds-button, ds-file-picker)) { --ds-button-height: var(--ds-menu-row); --ds-button-min-width: 0px; --ds-button-padding: 0; --ds-button-align: center; }\n\n/* Compact entries are filled rows edge to edge, 19px with the 1px between\n * them, a square's pitch: n entries are n squares less the last line. */\n:host([compact]) {\n  --ds-menu-row: calc(var(--ds-row-height) - 1px);\n  width: var(--ds-menu-width, calc(8 * var(--ds-unit)));\n  min-width: calc(4 * var(--ds-unit));\n  max-width: 100%;\n  max-height: none;\n}\n:host([compact]) .frame {\n  gap: 1px;\n  padding: 0;\n  border: 0;\n  border-radius: 0;\n  overflow: visible;\n  background: transparent;\n}\n:host([compact]) ::slotted(:is(ds-button, ds-file-picker)) {\n  --ds-button-height: var(--ds-menu-row);\n  --ds-button-padding: 0 calc(4px * var(--ds-sf));\n  --ds-button-background: var(--ds-fill);\n  --ds-button-color: var(--ds-text-color);\n  --ds-radius: 0px;\n  width: 100%;\n}\n\n:host([floating]) ::slotted(:is(ds-button, ds-file-picker):is(:hover, :focus-within):not([disabled], [data-disabled])) { --ds-button-background: var(--ds-fill); }\n\n:host([trigger-mode=\"context\"]), :host([trigger-mode=\"submenu\"]), :host([trigger-mode=\"manual\"]) {\n  width: var(--ds-menu-width, calc(8 * var(--ds-unit)));\n}\n:host([data-grid]) {\n  width: calc((var(--ds-menu-columns) + 1) * var(--ds-row-height));\n}\n:host([data-grid]) .frame {\n  width: 100%;\n  padding-inline: calc(var(--ds-unit) / 2 - 1px);\n}\n:host([data-grid]) ::slotted([data-ds-menu-start]) { grid-column-start: 1; }\n:host([data-grid]) ::slotted(:is([data-ds-menu-row], [data-ds-menu-separator], [data-ds-menu-label])) { grid-column: 1 / -1; }\n:host([data-grid]) ::slotted([data-ds-menu-row]) {\n  --ds-button-align: flex-start;\n  --ds-button-padding: 0 calc(4px * var(--ds-sf));\n}\n::slotted([data-ds-menu-label]) {\n  display: block;\n  box-sizing: border-box;\n  height: var(--ds-menu-row);\n  padding: 0 calc(4px * var(--ds-sf));\n  color: var(--ds-text-color-muted);\n}\n::slotted([data-ds-menu-separator]) {\n  width: 100%;\n  box-sizing: border-box;\n  border: 0;\n  border-top: 1px solid var(--ds-border-color);\n  /* One square with its line: half a square above it, less the line, and half below. */\n  margin: calc(var(--ds-unit) / 2 - 1px) 0 calc(var(--ds-unit) / 2);\n}\n";
+var ds_menu_default = "/* Shape is a surface preference. Keep these base lengths unscaled: each\n * component resolves them with its own --ds-sf in component-metrics.css. */\n[data-ds-shape=\"square\"],\n:host([data-ds-shape=\"square\"]) {\n  --ds-corner-size: 0px;\n  --ds-corner-shape: round;\n  --ds-button-inset: 0.5px;\n}\n\n[data-ds-shape=\"rounded\"],\n:host([data-ds-shape=\"rounded\"]) {\n  --ds-corner-size: 4px;\n  --ds-corner-shape: round;\n  --ds-button-inset: 2.5px;\n}\n\n[data-ds-shape=\"circular\"],\n:host([data-ds-shape=\"circular\"]) {\n  --ds-corner-size: 999px;\n  --ds-corner-shape: round;\n  --ds-button-inset: 5px;\n}\n\n/* A squircle needs twice an arc's radius for the same apparent corner.\n * Circular controls keep true semicircles even in a squircle browser. */\n@supports (corner-shape: squircle) {\n  [data-ds-shape=\"rounded\"],\n  :host([data-ds-shape=\"rounded\"]) {\n    --ds-corner-size: 8px;\n    --ds-corner-shape: squircle;\n  }\n}\n/* Resolve dimensions where a component is drawn. Inherited calc() values have\n * already used their ancestor's scale. Base tokens stay unscaled and inherit;\n * resolved tokens can still be overridden directly on a component.\n * data-ds-surface gives ordinary layout elements the same scaled measures.\n */\n:root,\n:host,\n:where([data-ds-surface]) {\n  --ds-unit: calc(var(--ds-1, 20px) * var(--ds-sf, 1));\n  --ds-control-height: calc(var(--ds-control-size, var(--ds-08, 16px)) * var(--ds-sf, 1));\n  --ds-row-height: calc(var(--ds-row-size, var(--ds-1, 20px)) * var(--ds-sf, 1));\n  --ds-type-size-default: calc(var(--ds-text-size, 14px) * var(--ds-sf, 1));\n  --ds-type-size-small: calc(var(--ds-small-text-size, 10px) * var(--ds-sf, 1));\n  --ds-type-size-heading: calc(var(--ds-heading-text-size, 13px) * var(--ds-sf, 1));\n  --ds-type-size-display: calc(var(--ds-display-text-size, 20px) * var(--ds-sf, 1));\n  --ds-type-lineheight-default: calc(var(--ds-text-leading, 16px) * var(--ds-sf, 1));\n  --ds-type-letterspacing-default: calc(var(--ds-text-tracking, -0.3px) * var(--ds-sf, 1));\n  --ds-radius: calc(var(--ds-corner-size, 4px) * var(--ds-sf, 1));\n  --ds-radius-card: calc(var(--ds-card-corner-size, 4px) * var(--ds-sf, 1));\n}\n/* On whole squares: the line and the padding inside it make half a square on\n * each side, and every entry is one square high, so a menu of n entries is\n * n + 1 squares high. Placed half a square from its anchor, its entries\n * stand on the anchor's grid lines. No shadow: words on paper. */\n:host {\n  --ds-menu-row: var(--ds-row-height);\n  box-sizing: border-box;\n  display: block;\n  min-width: calc(8 * var(--ds-unit));\n  max-height: var(--ds-menu-max-height, calc(16 * var(--ds-unit)));\n  padding: 0;\n  border: 0;\n  background: transparent;\n}\n:host([hidden]) { display: none !important; }\n\n/* Keep the shared face inside the boundary: product resets can reach a host. */\n.frame {\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: column;\n  gap: 0;\n  width: 100%;\n  max-height: min(var(--ds-menu-max-height, calc(16 * var(--ds-unit))), var(--ds-menu-available-height, 100vh));\n  overflow-y: auto;\n  padding: calc(var(--ds-unit) / 2 - 1px);\n  border: 1px solid var(--ds-border-color);\n  border-radius: var(--ds-radius-card);\n  background: var(--ds-paper);\n  color: var(--ds-text-color);\n  box-shadow: none;\n  font-family: \"Inter Arrows\", var(--ds-typeface-regular);\n  font-feature-settings: var(--ds-font-features);\n  font-size: var(--ds-type-size-default);\n  line-height: var(--ds-type-lineheight-default);\n  letter-spacing: var(--ds-type-letterspacing-default);\n}\nslot { display: contents; }\n\n/* Every entry is one row, whatever button styles a product or library gives\n * it: shared buttons through their height, a native button or link through\n * its box, which the menu's !important holds against outside styles. */\n::slotted(:is(ds-button, ds-file-picker)) { flex: 0 0 auto; width: 100%; --ds-button-height: var(--ds-menu-row); }\n::slotted(:is(button, a, [role=\"option\"], [role^=\"menuitem\"]):not(ds-button, ds-file-picker)) {\n  box-sizing: border-box !important;\n  flex: 0 0 auto !important;\n  height: var(--ds-menu-row) !important;\n  min-height: var(--ds-menu-row) !important;\n  max-height: var(--ds-menu-row) !important;\n  margin-block: 0 !important;\n  padding-block: 0 !important;\n  line-height: var(--ds-type-lineheight-default) !important;\n}\n\n:host([floating]:not([open])) { display: none; }\n:host([floating]) { position: fixed; inset: auto; margin: 0; min-width: 0; width: var(--ds-menu-width, var(--ds-menu-anchor-width)); z-index: 1; scroll-padding: calc(var(--ds-unit) / 2); }\n:host([floating]) ::slotted(:is(ds-button, ds-file-picker)) { flex: 0 0 auto; --ds-button-height: var(--ds-menu-row); --ds-button-align: flex-start; --ds-button-padding: 0 calc(4px * var(--ds-sf)); width: 100%; }\n:host([data-grid]) { width: max-content; min-width: 0; }\n:host([data-grid]) .frame { display: grid; grid-template-columns: repeat(var(--ds-menu-columns), var(--ds-row-height)); width: max-content; max-width: 100%; }\n:host([data-grid]) ::slotted(:is(ds-button, ds-file-picker)) { --ds-button-height: var(--ds-menu-row); --ds-button-min-width: 0px; --ds-button-padding: 0; --ds-button-align: center; }\n\n/* Compact entries are filled rows edge to edge, 19px with the 1px between\n * them, a square's pitch: n entries are n squares less the last line. */\n:host([compact]) {\n  --ds-menu-row: calc(var(--ds-row-height) - 1px);\n  width: var(--ds-menu-width, calc(8 * var(--ds-unit)));\n  min-width: calc(4 * var(--ds-unit));\n  max-width: 100%;\n  max-height: none;\n}\n:host([compact]) .frame {\n  gap: 1px;\n  padding: 0;\n  border: 0;\n  border-radius: 0;\n  overflow: visible;\n  background: transparent;\n}\n:host([compact]) ::slotted(:is(ds-button, ds-file-picker)) {\n  --ds-button-height: var(--ds-menu-row);\n  --ds-button-padding: 0 calc(4px * var(--ds-sf));\n  --ds-button-background: var(--ds-fill);\n  --ds-button-color: var(--ds-text-color);\n  --ds-radius: 0px;\n  width: 100%;\n}\n\n:host([floating]) ::slotted(:is(ds-button, ds-file-picker):is(:hover, :focus-within):not([disabled], [data-disabled])) { --ds-button-background: var(--ds-fill); }\n\n:host([trigger-mode=\"context\"]), :host([trigger-mode=\"submenu\"]), :host([trigger-mode=\"manual\"]) {\n  width: var(--ds-menu-width, calc(8 * var(--ds-unit)));\n}\n:host([data-grid]) {\n  width: calc((var(--ds-menu-columns) + 1) * var(--ds-row-height));\n}\n:host([data-grid]) .frame {\n  width: 100%;\n  padding-inline: calc(var(--ds-unit) / 2 - 1px);\n}\n:host([data-grid]) ::slotted([data-ds-menu-start]) { grid-column-start: 1; }\n:host([data-grid]) ::slotted(:is([data-ds-menu-row], [data-ds-menu-separator], [data-ds-menu-label])) { grid-column: 1 / -1; }\n:host([data-grid]) ::slotted([data-ds-menu-row]) {\n  --ds-button-align: flex-start;\n  --ds-button-padding: 0 calc(4px * var(--ds-sf));\n}\n::slotted([data-ds-menu-label]) {\n  display: block;\n  box-sizing: border-box;\n  height: var(--ds-menu-row);\n  padding: 0 calc(4px * var(--ds-sf));\n  color: var(--ds-text-color-muted);\n}\n::slotted([data-ds-menu-separator]) {\n  width: 100%;\n  box-sizing: border-box;\n  border: 0;\n  border-top: 1px solid var(--ds-border-color);\n  /* One square with its line: half a square above it, less the line, and half below. */\n  margin: calc(var(--ds-unit) / 2 - 1px) 0 calc(var(--ds-unit) / 2);\n}\n";
 //#endregion
 //#region DS1/3-unit/styles/ds-select.css?inline
-var ds_select_default = "/* Shape is a surface preference. Keep these base lengths unscaled: each\n * component resolves them with its own --ds-sf in component-metrics.css. */\n[data-ds-shape=\"square\"],\n:host([data-ds-shape=\"square\"]) {\n  --ds-corner-size: 0px;\n  --ds-corner-shape: round;\n  --ds-button-inset: 0.5px;\n}\n\n[data-ds-shape=\"rounded\"],\n:host([data-ds-shape=\"rounded\"]) {\n  --ds-corner-size: 4px;\n  --ds-corner-shape: round;\n  --ds-button-inset: 2.5px;\n}\n\n[data-ds-shape=\"circular\"],\n:host([data-ds-shape=\"circular\"]) {\n  --ds-corner-size: 999px;\n  --ds-corner-shape: round;\n  --ds-button-inset: 5px;\n}\n\n/* A squircle needs twice an arc's radius for the same apparent corner.\n * Circular controls keep true semicircles even in a squircle browser. */\n@supports (corner-shape: squircle) {\n  [data-ds-shape=\"rounded\"],\n  :host([data-ds-shape=\"rounded\"]) {\n    --ds-corner-size: 8px;\n    --ds-corner-shape: squircle;\n  }\n}\n/* Resolve dimensions where a component is drawn. Inherited calc() values have\n * already used their ancestor's scale. Base tokens stay unscaled and inherit;\n * resolved tokens can still be overridden directly on a component.\n * data-ds-surface gives ordinary layout elements the same scaled measures.\n */\n:root,\n:host,\n:where([data-ds-surface]) {\n  --ds-unit: calc(var(--ds-1, 20px) * var(--ds-sf, 1));\n  --ds-control-height: calc(var(--ds-control-size, var(--ds-08, 16px)) * var(--ds-sf, 1));\n  --ds-row-height: calc(var(--ds-row-size, var(--ds-1, 20px)) * var(--ds-sf, 1));\n  --ds-type-size-default: calc(var(--ds-text-size, 14px) * var(--ds-sf, 1));\n  --ds-type-size-small: calc(var(--ds-small-text-size, 10px) * var(--ds-sf, 1));\n  --ds-type-size-heading: calc(var(--ds-heading-text-size, 13px) * var(--ds-sf, 1));\n  --ds-type-size-display: calc(var(--ds-display-text-size, 20px) * var(--ds-sf, 1));\n  --ds-type-lineheight-default: calc(var(--ds-text-leading, 16px) * var(--ds-sf, 1));\n  --ds-type-letterspacing-default: calc(var(--ds-text-tracking, -0.3px) * var(--ds-sf, 1));\n  --ds-radius: calc(var(--ds-corner-size, 4px) * var(--ds-sf, 1));\n  --ds-radius-card: calc(var(--ds-card-corner-size, 4px) * var(--ds-sf, 1));\n}\n/*\n * Select as a field, around a native <select> (`data-field`): the menu\n * engine's own rules (an action menu's) do not reach it. One control high\n * (16px), standing at the foot of its line on the lower sixteen as a button\n * does, and hugging its options by default; a list one square a visible row.\n */\n:host([data-field]) {\n  --ds-select-unit: calc(var(--ds-1) * var(--ds-sf));\n  display: inline-flex;\n  position: relative;\n  vertical-align: bottom;\n  width: max-content;\n  max-width: 100%;\n  min-width: 0;\n  max-height: none;\n  height: var(--ds-control-height);\n}\n:host([data-field]:not([data-listbox])) {\n  width: max-content !important;\n  flex: 0 0 auto !important;\n  justify-self: start !important;\n}\n:host([hidden]) { display: none !important; }\n::slotted(select) {\n  appearance: none !important;\n  box-sizing: border-box !important;\n  display: block !important;\n  field-sizing: content;\n  width: auto !important;\n  min-width: 0 !important;\n  max-width: 100% !important;\n  height: 100% !important;\n  min-height: 0 !important;\n  margin: 0 !important;\n  padding: 0 var(--ds-select-unit) 0 calc(4px * var(--ds-sf)) !important;\n  border: 1px solid var(--ds-border-color) !important;\n  border-radius: var(--ds-radius) !important;\n  corner-shape: var(--ds-corner-shape, round) !important;\n  background: var(--ds-input-background) !important;\n  color: var(--ds-input-color) !important;\n  font-family: var(--ds-typeface-regular) !important;\n  font-size: var(--ds-type-size-default) !important;\n  font-weight: var(--ds-type-weight-default) !important;\n  letter-spacing: var(--ds-type-letterspacing-default) !important;\n  line-height: calc(var(--ds-control-height) - 2px) !important;\n  box-shadow: none !important;\n  cursor: pointer !important;\n}\n.arrow {\n  position: absolute;\n  pointer-events: none;\n  inset-inline-end: calc(2px * var(--ds-sf));\n  top: 50%;\n  transform: translateY(-50%);\n  width: var(--ds-control-height);\n  height: var(--ds-control-height);\n  background: var(--ds-input-color);\n  mask: var(--ds-select-arrow) center / contain no-repeat;\n}\n::slotted(select:focus-visible) { outline: 2px solid var(--ds-focus-ring) !important; outline-offset: 1px !important; }\n::slotted(select:disabled) { cursor: default !important; opacity: .5 !important; }\n.arrow.disabled { opacity: .5; }\n.arrow[hidden] { display: none; }\n::slotted(select[multiple]),\n::slotted(select[size]:not([size=\"0\"]):not([size=\"1\"])) {\n  padding: 0 calc(4px * var(--ds-sf)) !important;\n  line-height: calc(var(--ds-select-unit) - 2px) !important;\n}\n\n:host([data-listbox]) { width: calc(8 * var(--ds-select-unit)); height: calc(var(--ds-select-rows, 1) * var(--ds-select-unit)); }\n:host([data-listbox]) ::slotted(select) { width: 100% !important; }\n\n/* Intrinsic width uses the native option sizing, including translated labels. */\n:host([fit]:not([data-listbox])) { width: max-content; }\n:host([fit]:not([data-listbox])) ::slotted(select) { width: auto !important; max-width: 100% !important; }\n\n/* A settings chip keeps the same native picker and height, filled as a button. */\n:host([chip]:not([data-listbox])) ::slotted(select) {\n  border: 0 !important;\n  background: var(--ds-button-background-color-secondary) !important;\n  color: var(--ds-button-text-color) !important;\n  line-height: var(--ds-control-height) !important;\n}\n:host([chip][primary]:not([data-listbox])) ::slotted(select) {\n  background: var(--ds-button-background-color-primary) !important;\n  color: var(--ds-button-text-color-on-accent) !important;\n}\n:host([chip]) .arrow { background: var(--ds-button-text-color); }\n:host([chip][primary]) .arrow { background: var(--ds-button-text-color-on-accent); }\n\n/* A colour choice uses the shared swatch; the native select remains the hit target. */\n:host([swatch]:not([swatch=\"\"]):not([data-listbox])) {\n  width: var(--ds-select-unit);\n  height: var(--ds-select-unit);\n  border-radius: var(--ds-radius);\n  background: var(--ds-input-background);\n}\n:host([swatch]:not([swatch=\"\"]):not([data-listbox])) ::slotted(select) {\n  width: 100% !important;\n  opacity: 0 !important;\n  position: relative !important;\n  z-index: 1;\n}\n:host([swatch]:not([swatch=\"\"]):not([data-listbox]):focus-within) {\n  outline: 2px solid var(--ds-focus-ring);\n  outline-offset: 1px;\n}\nds-swatch { pointer-events: none; position: absolute; inset: 0; margin: auto; }\nds-swatch.disabled { opacity: .5; }\n\n/*\n * The field's list, in place of the platform's picker (`data-listed`). The\n * select takes no pointer, so a press on the field opens the list and no\n * platform picker; the keyboard still reaches the select, and its opening keys\n * open the list. The list is the menu engine's, as wide as its choices in whole\n * squares and at least the field (`--ds-select-list-width` sets one), each choice one\n * square on the sixteen: an icon on the first square, the name, muted details,\n * a shortcut at the end and the check on the last square for the chosen one.\n */\n:host([data-listed]) { cursor: pointer; }\n:host([data-listed]) ::slotted(select) { pointer-events: none !important; }\n/* The list fits its choices on whole squares, at least as wide as the field. */\n.list { --ds-menu-width: var(--ds-select-list-width); }\n.choice,\n.group-label {\n  box-sizing: border-box;\n  display: flex;\n  align-items: flex-end;\n  gap: calc(4px * var(--ds-sf));\n  flex: 0 0 auto;\n  width: 100%;\n  height: var(--ds-row-height);\n  min-width: 0;\n  margin: 0;\n  padding: 0 calc(4px * var(--ds-sf));\n  border: 0;\n  border-radius: 0;\n  background: none;\n  color: var(--ds-text-color);\n  font: inherit;\n  line-height: var(--ds-type-lineheight-default);\n  text-align: start;\n  white-space: nowrap;\n}\n.choice { cursor: pointer; outline: none; -webkit-tap-highlight-color: transparent; }\n.choice:hover:not(:disabled), .choice:focus-visible { background: var(--ds-row-fill-hover, var(--ds-fill)); }\n.choice:active:not(:disabled) { background: var(--ds-row-fill-press, var(--ds-fill-hover)); }\n.choice:focus-visible { box-shadow: inset 0 0 0 2px var(--ds-focus-ring); }\n.choice:disabled { cursor: default; opacity: .5; }\n.group { display: flex; flex-direction: column; }\n.group-label { color: var(--ds-text-color-muted); }\n/* A name is one line, fading over its last square where it is cut short. */\n.name { flex: 0 1 auto; min-width: 0; overflow: hidden; }\n.details { flex: 0 1 auto; min-width: 0; overflow: hidden; color: var(--ds-text-color-muted); }\n.shortcut { flex: none; margin-inline-start: auto; color: var(--ds-text-color-muted); }\n.mark { flex: none; width: calc(16px * var(--ds-sf)); height: calc(16px * var(--ds-sf)); }\n.check {\n  flex: none;\n  width: calc(16px * var(--ds-sf));\n  height: calc(16px * var(--ds-sf));\n  margin-inline-start: auto;\n  background: currentColor;\n  mask: var(--ds-select-check) center / contain no-repeat;\n  visibility: hidden;\n}\n.shortcut + .check { margin-inline-start: 0; }\n.choice[aria-selected=\"true\"] .check { visibility: visible; }\n.choice[aria-selected=\"true\"] .name { font-weight: var(--ds-row-current-weight, var(--ds-type-weight-bold)); }\n";
+var ds_select_default = "/* Shape is a surface preference. Keep these base lengths unscaled: each\n * component resolves them with its own --ds-sf in component-metrics.css. */\n[data-ds-shape=\"square\"],\n:host([data-ds-shape=\"square\"]) {\n  --ds-corner-size: 0px;\n  --ds-corner-shape: round;\n  --ds-button-inset: 0.5px;\n}\n\n[data-ds-shape=\"rounded\"],\n:host([data-ds-shape=\"rounded\"]) {\n  --ds-corner-size: 4px;\n  --ds-corner-shape: round;\n  --ds-button-inset: 2.5px;\n}\n\n[data-ds-shape=\"circular\"],\n:host([data-ds-shape=\"circular\"]) {\n  --ds-corner-size: 999px;\n  --ds-corner-shape: round;\n  --ds-button-inset: 5px;\n}\n\n/* A squircle needs twice an arc's radius for the same apparent corner.\n * Circular controls keep true semicircles even in a squircle browser. */\n@supports (corner-shape: squircle) {\n  [data-ds-shape=\"rounded\"],\n  :host([data-ds-shape=\"rounded\"]) {\n    --ds-corner-size: 8px;\n    --ds-corner-shape: squircle;\n  }\n}\n/* Resolve dimensions where a component is drawn. Inherited calc() values have\n * already used their ancestor's scale. Base tokens stay unscaled and inherit;\n * resolved tokens can still be overridden directly on a component.\n * data-ds-surface gives ordinary layout elements the same scaled measures.\n */\n:root,\n:host,\n:where([data-ds-surface]) {\n  --ds-unit: calc(var(--ds-1, 20px) * var(--ds-sf, 1));\n  --ds-control-height: calc(var(--ds-control-size, var(--ds-08, 16px)) * var(--ds-sf, 1));\n  --ds-row-height: calc(var(--ds-row-size, var(--ds-1, 20px)) * var(--ds-sf, 1));\n  --ds-type-size-default: calc(var(--ds-text-size, 14px) * var(--ds-sf, 1));\n  --ds-type-size-small: calc(var(--ds-small-text-size, 10px) * var(--ds-sf, 1));\n  --ds-type-size-heading: calc(var(--ds-heading-text-size, 13px) * var(--ds-sf, 1));\n  --ds-type-size-display: calc(var(--ds-display-text-size, 20px) * var(--ds-sf, 1));\n  --ds-type-lineheight-default: calc(var(--ds-text-leading, 16px) * var(--ds-sf, 1));\n  --ds-type-letterspacing-default: calc(var(--ds-text-tracking, -0.3px) * var(--ds-sf, 1));\n  --ds-radius: calc(var(--ds-corner-size, 4px) * var(--ds-sf, 1));\n  --ds-radius-card: calc(var(--ds-card-corner-size, 4px) * var(--ds-sf, 1));\n}\n/*\n * Select as a field, around a native <select> (`data-field`): the menu\n * engine's own rules (an action menu's) do not reach it. One control high\n * (16px), standing at the foot of its line on the lower sixteen as a button\n * does, and hugging its options by default; a list one square a visible row.\n */\n:host([data-field]) {\n  --ds-select-unit: calc(var(--ds-1) * var(--ds-sf));\n  display: inline-flex;\n  position: relative;\n  vertical-align: bottom;\n  width: max-content;\n  max-width: 100%;\n  min-width: 0;\n  max-height: none;\n  height: var(--ds-control-height);\n}\n:host([data-field]:not([data-listbox])) {\n  width: max-content !important;\n  flex: 0 0 auto !important;\n  justify-self: start !important;\n}\n:host([hidden]) { display: none !important; }\n::slotted(select) {\n  appearance: none !important;\n  box-sizing: border-box !important;\n  display: block !important;\n  field-sizing: content;\n  width: auto !important;\n  min-width: 0 !important;\n  max-width: 100% !important;\n  height: 100% !important;\n  min-height: 0 !important;\n  margin: 0 !important;\n  padding: 0 var(--ds-select-unit) 0 calc(4px * var(--ds-sf)) !important;\n  border: 1px solid var(--ds-border-color) !important;\n  border-radius: var(--ds-radius) !important;\n  corner-shape: var(--ds-corner-shape, round) !important;\n  background: var(--ds-input-background) !important;\n  color: var(--ds-input-color) !important;\n  font-family: \"Inter Arrows\", var(--ds-typeface-regular) !important;\n  font-size: var(--ds-type-size-default) !important;\n  font-weight: var(--ds-type-weight-default) !important;\n  letter-spacing: var(--ds-type-letterspacing-default) !important;\n  line-height: calc(var(--ds-control-height) - 2px) !important;\n  box-shadow: none !important;\n  cursor: pointer !important;\n}\n.arrow {\n  position: absolute;\n  pointer-events: none;\n  inset-inline-end: calc(2px * var(--ds-sf));\n  top: 50%;\n  transform: translateY(-50%);\n  width: var(--ds-control-height);\n  height: var(--ds-control-height);\n  background: var(--ds-input-color);\n  mask: var(--ds-select-arrow) center / contain no-repeat;\n}\n::slotted(select:focus-visible) { outline: 2px solid var(--ds-focus-ring) !important; outline-offset: 1px !important; }\n::slotted(select:disabled) { cursor: default !important; opacity: .5 !important; }\n.arrow.disabled { opacity: .5; }\n.arrow[hidden] { display: none; }\n::slotted(select[multiple]),\n::slotted(select[size]:not([size=\"0\"]):not([size=\"1\"])) {\n  padding: 0 calc(4px * var(--ds-sf)) !important;\n  line-height: calc(var(--ds-select-unit) - 2px) !important;\n}\n\n:host([data-listbox]) { width: calc(8 * var(--ds-select-unit)); height: calc(var(--ds-select-rows, 1) * var(--ds-select-unit)); }\n:host([data-listbox]) ::slotted(select) { width: 100% !important; }\n\n/* Intrinsic width uses the native option sizing, including translated labels. */\n:host([fit]:not([data-listbox])) { width: max-content; }\n:host([fit]:not([data-listbox])) ::slotted(select) { width: auto !important; max-width: 100% !important; }\n\n/* A settings chip keeps the same native picker and height, filled as a button. */\n:host([chip]:not([data-listbox])) ::slotted(select) {\n  border: 0 !important;\n  background: var(--ds-button-background-color-secondary) !important;\n  color: var(--ds-button-text-color) !important;\n  line-height: var(--ds-control-height) !important;\n}\n:host([chip][primary]:not([data-listbox])) ::slotted(select) {\n  background: var(--ds-button-background-color-primary) !important;\n  color: var(--ds-button-text-color-on-accent) !important;\n}\n:host([chip]) .arrow { background: var(--ds-button-text-color); }\n:host([chip][primary]) .arrow { background: var(--ds-button-text-color-on-accent); }\n\n/* A colour choice uses the shared swatch; the native select remains the hit target. */\n:host([swatch]:not([swatch=\"\"]):not([data-listbox])) {\n  width: var(--ds-select-unit);\n  height: var(--ds-select-unit);\n  border-radius: var(--ds-radius);\n  background: var(--ds-input-background);\n}\n:host([swatch]:not([swatch=\"\"]):not([data-listbox])) ::slotted(select) {\n  width: 100% !important;\n  opacity: 0 !important;\n  position: relative !important;\n  z-index: 1;\n}\n:host([swatch]:not([swatch=\"\"]):not([data-listbox]):focus-within) {\n  outline: 2px solid var(--ds-focus-ring);\n  outline-offset: 1px;\n}\nds-swatch { pointer-events: none; position: absolute; inset: 0; margin: auto; }\nds-swatch.disabled { opacity: .5; }\n\n/*\n * The field's list, in place of the platform's picker (`data-listed`). The\n * select takes no pointer, so a press on the field opens the list and no\n * platform picker; the keyboard still reaches the select, and its opening keys\n * open the list. The list is the menu engine's, as wide as its choices in whole\n * squares and at least the field (`--ds-select-list-width` sets one), each choice one\n * square on the sixteen: an icon on the first square, the name, muted details,\n * a shortcut at the end and the check on the last square for the chosen one.\n */\n:host([data-listed]) { cursor: pointer; }\n:host([data-listed]) ::slotted(select) { pointer-events: none !important; }\n/* The list fits its choices on whole squares, at least as wide as the field. */\n.list { --ds-menu-width: var(--ds-select-list-width); }\n.choice,\n.group-label {\n  box-sizing: border-box;\n  display: flex;\n  align-items: flex-end;\n  gap: calc(4px * var(--ds-sf));\n  flex: 0 0 auto;\n  width: 100%;\n  height: var(--ds-row-height);\n  min-width: 0;\n  margin: 0;\n  padding: 0 calc(4px * var(--ds-sf));\n  border: 0;\n  border-radius: 0;\n  background: none;\n  color: var(--ds-text-color);\n  font: inherit;\n  line-height: var(--ds-type-lineheight-default);\n  text-align: start;\n  white-space: nowrap;\n}\n.choice { cursor: pointer; outline: none; -webkit-tap-highlight-color: transparent; }\n.choice:hover:not(:disabled), .choice:focus-visible { background: var(--ds-row-fill-hover, var(--ds-fill)); }\n.choice:active:not(:disabled) { background: var(--ds-row-fill-press, var(--ds-fill-hover)); }\n.choice:focus-visible { box-shadow: inset 0 0 0 2px var(--ds-focus-ring); }\n.choice:disabled { cursor: default; opacity: .5; }\n.group { display: flex; flex-direction: column; }\n.group-label { color: var(--ds-text-color-muted); }\n/* A name is one line, fading over its last square where it is cut short. */\n.name { flex: 0 1 auto; min-width: 0; overflow: hidden; }\n.details { flex: 0 1 auto; min-width: 0; overflow: hidden; color: var(--ds-text-color-muted); }\n.shortcut { flex: none; margin-inline-start: auto; color: var(--ds-text-color-muted); }\n.mark { flex: none; width: calc(16px * var(--ds-sf)); height: calc(16px * var(--ds-sf)); }\n.check {\n  flex: none;\n  width: calc(16px * var(--ds-sf));\n  height: calc(16px * var(--ds-sf));\n  margin-inline-start: auto;\n  background: currentColor;\n  mask: var(--ds-select-check) center / contain no-repeat;\n  visibility: hidden;\n}\n.shortcut + .check { margin-inline-start: 0; }\n.choice[aria-selected=\"true\"] .check { visibility: visible; }\n.choice[aria-selected=\"true\"] .name { font-weight: var(--ds-row-current-weight, var(--ds-type-weight-bold)); }\n";
 //#endregion
 //#region node_modules/.pnpm/lit-html@3.3.3/node_modules/lit-html/directives/style-map.js
 /**
@@ -6903,6 +7162,7 @@ function bindContextMenuTrigger(trigger, open, { resolve = () => trigger, touch
 	let suppressed = null;
 	let release;
 	let disposed = false;
+	let mousePress;
 	if (aria) trigger.setAttribute("aria-haspopup", "menu");
 	if (selection) trigger.classList.add("ds-context-trigger");
 	const enabled = (control) => control.isConnected && !control.matches(":disabled, [disabled], [aria-disabled=\"true\"], [data-disabled]") && !control.closest("[hidden], [inert]");
@@ -6926,6 +7186,7 @@ function bindContextMenuTrigger(trigger, open, { resolve = () => trigger, touch
 		release = setTimeout(clearSuppression, 1e3);
 	};
 	const cancel = () => {
+		mousePress = void 0;
 		clearTimeout(timer);
 		timer = void 0;
 		point = void 0;
@@ -6939,7 +7200,16 @@ function bindContextMenuTrigger(trigger, open, { resolve = () => trigger, touch
 	};
 	const context = (event) => {
 		if (event.defaultPrevented) return;
-		const control = resolve(event);
+		const pressed = mousePress;
+		mousePress = void 0;
+		const gesture = pressed && event.button === 2 && Math.hypot(event.clientX - pressed.event.clientX, event.clientY - pressed.event.clientY) <= 10 ? new Proxy(pressed.event, { get(target, key) {
+			if (key === "composedPath") return () => pressed.path;
+			if (key === "target") return pressed.target;
+			const value = Reflect.get(target, key, target);
+			return typeof value === "function" ? value.bind(target) : value;
+		} }) : event;
+		if (gesture !== event && (typeof gesture.target?.nodeType !== "number" || !trigger.contains(gesture.target))) return;
+		const control = resolve(gesture);
 		if (!control || !enabled(control)) return;
 		cancel();
 		if (suppressed === control) {
@@ -6949,7 +7219,7 @@ function bindContextMenuTrigger(trigger, open, { resolve = () => trigger, touch
 		if (open({
 			x: event.clientX,
 			y: event.clientY
-		}, control, event) === false) return;
+		}, control, gesture) === false) return;
 		event.preventDefault();
 		if (selection && event.button === 0) arm(control);
 	};
@@ -6992,6 +7262,15 @@ function bindContextMenuTrigger(trigger, open, { resolve = () => trigger, touch
 			if (open(at, control, event) !== false) arm(control);
 		}, 500);
 	};
+	const rememberMouse = (event) => {
+		mousePress = !event.defaultPrevented && event.pointerType === "mouse" && event.button === 2 ? {
+			event,
+			path: event.composedPath(),
+			target: event.target
+		} : void 0;
+	};
+	trigger.addEventListener("pointerdown", rememberMouse, true);
+	trigger.addEventListener("pointercancel", cancel, true);
 	trigger.addEventListener("contextmenu", context);
 	trigger.addEventListener("keydown", key);
 	trigger.addEventListener("pointerdown", press);
@@ -7004,6 +7283,8 @@ function bindContextMenuTrigger(trigger, open, { resolve = () => trigger, touch
 			trigger.removeEventListener("contextmenu", context);
 			trigger.removeEventListener("keydown", key);
 			trigger.removeEventListener("pointerdown", press);
+			trigger.removeEventListener("pointerdown", rememberMouse, true);
+			trigger.removeEventListener("pointercancel", cancel, true);
 			if (aria) {
 				if (previousAria === null) trigger.removeAttribute("aria-haspopup");
 				else trigger.setAttribute("aria-haspopup", previousAria);
@@ -7924,7 +8205,7 @@ _ColorInput.styles = [r$4(component_metrics_default), i$5`
 define("ds-color", ColorInput);
 //#endregion
 //#region DS1/1-root/card.css?inline
-var card_default = "/* Shape is a surface preference. Keep these base lengths unscaled: each\n * component resolves them with its own --ds-sf in component-metrics.css. */\n[data-ds-shape=\"square\"],\n:host([data-ds-shape=\"square\"]) {\n  --ds-corner-size: 0px;\n  --ds-corner-shape: round;\n  --ds-button-inset: 0.5px;\n}\n\n[data-ds-shape=\"rounded\"],\n:host([data-ds-shape=\"rounded\"]) {\n  --ds-corner-size: 4px;\n  --ds-corner-shape: round;\n  --ds-button-inset: 2.5px;\n}\n\n[data-ds-shape=\"circular\"],\n:host([data-ds-shape=\"circular\"]) {\n  --ds-corner-size: 999px;\n  --ds-corner-shape: round;\n  --ds-button-inset: 5px;\n}\n\n/* A squircle needs twice an arc's radius for the same apparent corner.\n * Circular controls keep true semicircles even in a squircle browser. */\n@supports (corner-shape: squircle) {\n  [data-ds-shape=\"rounded\"],\n  :host([data-ds-shape=\"rounded\"]) {\n    --ds-corner-size: 8px;\n    --ds-corner-shape: squircle;\n  }\n}\n/* Resolve dimensions where a component is drawn. Inherited calc() values have\n * already used their ancestor's scale. Base tokens stay unscaled and inherit;\n * resolved tokens can still be overridden directly on a component.\n * data-ds-surface gives ordinary layout elements the same scaled measures.\n */\n:root,\n:host,\n:where([data-ds-surface]) {\n  --ds-unit: calc(var(--ds-1, 20px) * var(--ds-sf, 1));\n  --ds-control-height: calc(var(--ds-control-size, var(--ds-08, 16px)) * var(--ds-sf, 1));\n  --ds-row-height: calc(var(--ds-row-size, var(--ds-1, 20px)) * var(--ds-sf, 1));\n  --ds-type-size-default: calc(var(--ds-text-size, 14px) * var(--ds-sf, 1));\n  --ds-type-size-small: calc(var(--ds-small-text-size, 10px) * var(--ds-sf, 1));\n  --ds-type-size-heading: calc(var(--ds-heading-text-size, 13px) * var(--ds-sf, 1));\n  --ds-type-size-display: calc(var(--ds-display-text-size, 20px) * var(--ds-sf, 1));\n  --ds-type-lineheight-default: calc(var(--ds-text-leading, 16px) * var(--ds-sf, 1));\n  --ds-type-letterspacing-default: calc(var(--ds-text-tracking, -0.3px) * var(--ds-sf, 1));\n  --ds-radius: calc(var(--ds-corner-size, 4px) * var(--ds-sf, 1));\n  --ds-radius-card: calc(var(--ds-card-corner-size, 4px) * var(--ds-sf, 1));\n}\n/*\n * A card, as plain classes on native elements.\n *\n * A card holds one thing on a fill of its own: its name in the muted ink on\n * one square, a title in the display size on lines of a square and a half, writing,\n * and a picture of it (`ds-card__media`) a square below, which can run off\n * the card's foot and end edge and be cut there, never framed. Its size is\n * given in whole squares, its padding one square, its corners a card's\n * (`--ds-radius-card`). A card that opens something is one press target, an\n * `<a class=\"ds-card\" href>`: the pointer tints it, keyboard focus rings it\n * 2px inside and its picture rises a little. Ordinary writing still sits\n * straight on the paper; a card is for a thing shown among others, as in a\n * slide. The `ds-card` element draws the same parts.\n *\n *   ds-card                      the card; `data-tone` names a palette colour\n *                                for its fill (the colour's pastel, dim in dark\n *                                mode, from palette.css, which one.css imports),\n *                                `ink` for the ink with the paper's words\n *   ds-card--outlined            a 1px line and no fill\n *   ds-card__label               its name, muted, on one square\n *   ds-card__title               the title, display size, a square and a half a line\n *   ds-card__body                writing, one square a line\n *   ds-card__media               the picture, on the card's foot and a square below the words at\n *                                least, so pictures side by side line up; square where it meets the card\n *   ds-card__media--center       standing in the card's middle\n *   ds-card__media--bleed        running on past the padding to the end edge\n *\n * Tokens: `--ds-card-width` and `--ds-card-height` (whole squares; the\n * content's size by default), `--ds-card-padding` (one square), and\n * `--ds-card-fill`, `--ds-card-ink` and `--ds-card-muted`.\n */\n\n.ds-card {\n  --ds-card-fill: var(--ds-fill);\n  --ds-card-ink: var(--ds-text-color);\n  --ds-card-muted: var(--ds-text-color-muted);\n  --ds-card-padding: var(--ds-unit);\n  --ds-card-text-padding: max(var(--ds-card-padding), var(--ds-card-text-inset-min, 0px));\n  position: relative;\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: column;\n  align-items: stretch;\n  width: var(--ds-card-width, auto);\n  height: var(--ds-card-height, auto);\n  min-width: 0;\n  margin: 0;\n  /* In a squares bento the surface reaches a quarter square towards its neighbours (`--ds-bento-inset-*`, 0 elsewhere), and the padding grows by as much so what it holds stays on the squares. */\n  padding:\n    calc(var(--ds-card-text-padding) + var(--ds-bento-inset-top, 0px))\n    calc(var(--ds-card-text-padding) + var(--ds-bento-inset-end, 0px))\n    var(--ds-bento-inset-bottom, 0px)\n    calc(var(--ds-card-text-padding) + var(--ds-bento-inset-start, 0px));\n  overflow: hidden;\n  border-radius: var(--ds-radius-card);\n  background: var(--ds-card-fill);\n  color: var(--ds-card-ink);\n  font-family: var(--ds-typeface-regular);\n  font-size: var(--ds-type-size-default);\n  text-decoration: none;\n  -webkit-tap-highlight-color: transparent;\n}\n\n/* Opt-in safe text inset; media still stands on the card's foot. */\n.ds-card:not(:has(> .ds-card__media:not([hidden]))) {\n  padding-block-end: max(var(--ds-card-text-inset-min, 0px), var(--ds-bento-inset-bottom, 0px));\n}\n\n.ds-card[hidden] {\n  display: none;\n}\n\n.ds-card--outlined {\n  --ds-card-fill: transparent;\n  box-shadow: inset 0 0 0 1px var(--ds-border-color);\n}\n\n.ds-card[data-tone=\"apple-green\"] { --ds-card-fill: var(--one-apple-green-pastel); }\n.ds-card[data-tone=\"chartreuse\"] { --ds-card-fill: var(--one-chartreuse-pastel); }\n.ds-card[data-tone=\"every-green\"] { --ds-card-fill: var(--one-every-green-pastel); }\n.ds-card[data-tone=\"yellow\"] { --ds-card-fill: var(--one-yellow-pastel); }\n.ds-card[data-tone=\"orange\"] { --ds-card-fill: var(--one-orange-pastel); }\n.ds-card[data-tone=\"tuned-red\"] { --ds-card-fill: var(--one-tuned-red-pastel); }\n.ds-card[data-tone=\"pink\"] { --ds-card-fill: var(--one-pink-pastel); }\n.ds-card[data-tone=\"sharp-blue\"] { --ds-card-fill: var(--one-sharp-blue-pastel); }\n.ds-card[data-tone=\"winning-blue\"] { --ds-card-fill: var(--one-winning-blue-pastel); }\n.ds-card[data-tone=\"hysteric-blue\"] { --ds-card-fill: var(--one-hysteric-blue-pastel); }\n.ds-card[data-tone=\"purple\"] { --ds-card-fill: var(--one-purple-pastel); }\n.ds-card[data-tone=\"metal-green\"] { --ds-card-fill: var(--one-metal-green-pastel); }\n.ds-card[data-tone=\"drip-yellow\"] { --ds-card-fill: var(--one-drip-yellow-pastel); }\n.ds-card[data-tone=\"sand\"] { --ds-card-fill: var(--one-sand-pastel); }\n.ds-card[data-tone=\"old-gold\"] { --ds-card-fill: var(--one-old-gold-pastel); }\n.ds-card[data-tone=\"red-for-blood\"] { --ds-card-fill: var(--one-red-for-blood-pastel); }\n.ds-card[data-tone=\"dark-red-variant\"] { --ds-card-fill: var(--one-dark-red-variant-pastel); }\n.ds-card[data-tone=\"signal-red\"] { --ds-card-fill: var(--one-signal-red-pastel); }\n/* On a pastel fill the muted grey falls under 4.5:1 (color.text-contrast): the muted ink is the card's ink let\n   into its fill instead, 5:1 or more on every pastel. */\n.ds-card[data-tone]:not([data-tone=\"ink\"]) {\n  --ds-card-muted: color-mix(in srgb, var(--ds-card-ink) 72%, var(--ds-card-fill));\n}\n\n.ds-card[data-tone=\"ink\"] {\n  --ds-card-fill: var(--ds-black);\n  --ds-card-ink: var(--ds-white);\n  --ds-card-muted: color-mix(in srgb, var(--ds-white) 60%, transparent);\n  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ds-white) 8%, transparent);\n}\n\n/* Words: each line on the lower sixteen of its square. They keep their room\n   in a card of a set height; only the picture is cut at the foot. */\n.ds-card__label,\n.ds-card__title,\n.ds-card__body {\n  flex: none;\n}\n\n.ds-card__label {\n  margin: 0 0 var(--ds-card-label-gap, 0px);\n  padding-top: calc(4px * var(--ds-sf, 1));\n  color: var(--ds-card-muted);\n  font: inherit;\n  line-height: var(--ds-type-lineheight-default, calc(16px * var(--ds-sf, 1)));\n}\n\n.ds-card__title {\n  margin: 0 0 var(--ds-card-title-gap, 0px);\n  color: var(--ds-card-ink);\n  font-family: var(--ds-typeface-medium);\n  font-size: var(--ds-type-size-display);\n  font-weight: var(--ds-type-weight-bold);\n  /* A title that wraps keeps its lines together: a square and a half each. */\n  line-height: calc(1.5 * var(--ds-unit));\n  letter-spacing: calc(var(--ds-display-text-tracking, -0.4px) * var(--ds-sf, 1));\n  text-wrap: balance;\n}\n\n.ds-card__body {\n  margin: 0;\n  line-height: var(--ds-unit);\n}\n\n/* The picture stands on the card's foot, a square below the words at least: in a card taller than\n   its words the room goes above the picture, so the pictures of cards side by side (stretched to one\n   height by their row) stand on one level. */\n.ds-card__media {\n  display: flex;\n  flex: none;\n  align-items: flex-start;\n  justify-content: flex-start;\n  min-width: 0;\n  margin-top: auto;\n  padding-top: var(--ds-unit);\n}\n\n/* A picture has no corners of its own where it meets the card: on the foot the card's edge cuts it\n   square. Only a corner standing free inside the card, towards the words, keeps a picture's corner. */\n.ds-card .ds-card__media > :is(img, picture, video, canvas, svg) {\n  border-end-start-radius: 0;\n  border-end-end-radius: 0;\n}\n\n.ds-card__media--center {\n  justify-content: center;\n  margin-inline: calc(-1 * var(--ds-card-text-padding));\n}\n\n/* A picture that bleeds runs on to the end edge and stands on the foot, the space a taller card\n   leaves going above it (or, taller than its room, it starts below the words and the foot cuts it).\n   It has no corners of its own: the card's edges cut it square, and its corner towards the words\n   is square too, a picture or square never rounded where it meets the card. */\n.ds-card__media--bleed {\n  flex: 1 0 auto;\n  flex-direction: column;\n  align-items: stretch;\n  justify-content: safe flex-end;\n  margin-inline-end: calc(-1 * (var(--ds-card-text-padding) + var(--ds-bento-inset-end, 0px)));\n  margin-block-end: calc(-1 * var(--ds-bento-inset-bottom, 0px));\n  --ds-radius: 0px;\n  --ds-image-end-radius: 0px;\n  --ds-image-foot-radius: 0px;\n}\n\n.ds-card__media > * {\n  flex: none;\n}\n\n/* A card that opens something. */\na.ds-card,\n.ds-card[data-interactive] {\n  cursor: pointer;\n}\n\na.ds-card::after,\n.ds-card[data-interactive]::after {\n  content: \"\";\n  position: absolute;\n  inset: 0;\n  border-radius: inherit;\n  background: transparent;\n  pointer-events: none;\n}\n\na.ds-card:focus-visible,\n.ds-card[data-interactive]:focus-visible {\n  outline: 2px solid var(--ds-focus-ring);\n  outline-offset: -2px;\n}\n\n@media (hover: hover) {\n  a.ds-card:hover::after,\n  .ds-card[data-interactive]:hover::after {\n    background: color-mix(in srgb, var(--ds-card-ink) 4%, transparent);\n  }\n}\n\na.ds-card:active::after,\n.ds-card[data-interactive]:active::after {\n  background: color-mix(in srgb, var(--ds-card-ink) 8%, transparent);\n}\n\n/* Optional spacing before a slotted footer tag; zero preserves the normal card. */\n.ds-card__body ::slotted(ds-tag) { margin-block-start: var(--ds-card-footer-gap, 0px); }\n";
+var card_default = "/* Shape is a surface preference. Keep these base lengths unscaled: each\n * component resolves them with its own --ds-sf in component-metrics.css. */\n[data-ds-shape=\"square\"],\n:host([data-ds-shape=\"square\"]) {\n  --ds-corner-size: 0px;\n  --ds-corner-shape: round;\n  --ds-button-inset: 0.5px;\n}\n\n[data-ds-shape=\"rounded\"],\n:host([data-ds-shape=\"rounded\"]) {\n  --ds-corner-size: 4px;\n  --ds-corner-shape: round;\n  --ds-button-inset: 2.5px;\n}\n\n[data-ds-shape=\"circular\"],\n:host([data-ds-shape=\"circular\"]) {\n  --ds-corner-size: 999px;\n  --ds-corner-shape: round;\n  --ds-button-inset: 5px;\n}\n\n/* A squircle needs twice an arc's radius for the same apparent corner.\n * Circular controls keep true semicircles even in a squircle browser. */\n@supports (corner-shape: squircle) {\n  [data-ds-shape=\"rounded\"],\n  :host([data-ds-shape=\"rounded\"]) {\n    --ds-corner-size: 8px;\n    --ds-corner-shape: squircle;\n  }\n}\n/* Resolve dimensions where a component is drawn. Inherited calc() values have\n * already used their ancestor's scale. Base tokens stay unscaled and inherit;\n * resolved tokens can still be overridden directly on a component.\n * data-ds-surface gives ordinary layout elements the same scaled measures.\n */\n:root,\n:host,\n:where([data-ds-surface]) {\n  --ds-unit: calc(var(--ds-1, 20px) * var(--ds-sf, 1));\n  --ds-control-height: calc(var(--ds-control-size, var(--ds-08, 16px)) * var(--ds-sf, 1));\n  --ds-row-height: calc(var(--ds-row-size, var(--ds-1, 20px)) * var(--ds-sf, 1));\n  --ds-type-size-default: calc(var(--ds-text-size, 14px) * var(--ds-sf, 1));\n  --ds-type-size-small: calc(var(--ds-small-text-size, 10px) * var(--ds-sf, 1));\n  --ds-type-size-heading: calc(var(--ds-heading-text-size, 13px) * var(--ds-sf, 1));\n  --ds-type-size-display: calc(var(--ds-display-text-size, 20px) * var(--ds-sf, 1));\n  --ds-type-lineheight-default: calc(var(--ds-text-leading, 16px) * var(--ds-sf, 1));\n  --ds-type-letterspacing-default: calc(var(--ds-text-tracking, -0.3px) * var(--ds-sf, 1));\n  --ds-radius: calc(var(--ds-corner-size, 4px) * var(--ds-sf, 1));\n  --ds-radius-card: calc(var(--ds-card-corner-size, 4px) * var(--ds-sf, 1));\n}\n/*\n * A card, as plain classes on native elements.\n *\n * A card holds one thing on a fill of its own: its name in the muted ink on\n * one square, a title in the display size on lines of a square and a half, writing,\n * and a picture of it (`ds-card__media`) a square below, which can run off\n * the card's foot and end edge and be cut there, never framed. Its size is\n * given in whole squares, its padding one square, its corners a card's\n * (`--ds-radius-card`). A card that opens something is one press target, an\n * `<a class=\"ds-card\" href>`: the pointer tints it, keyboard focus rings it\n * 2px inside and its picture rises a little. Ordinary writing still sits\n * straight on the paper; a card is for a thing shown among others, as in a\n * slide. The `ds-card` element draws the same parts.\n *\n *   ds-card                      the card; `data-tone` names a palette colour\n *                                for its fill (the colour's pastel, dim in dark\n *                                mode, from palette.css, which one.css imports),\n *                                `ink` for the ink with the paper's words\n *   ds-card--outlined            a 1px line and no fill\n *   ds-card__label               its name, muted, on one square\n *   ds-card__title               the title, display size, a square and a half a line\n *   ds-card__body                writing, one square a line\n *   ds-card__media               the picture, on the card's foot and a square below the words at\n *                                least, so pictures side by side line up; square where it meets the card\n *   ds-card__media--center       standing in the card's middle\n *   ds-card__media--bleed        running on past the padding to the end edge\n *\n * Tokens: `--ds-card-width` and `--ds-card-height` (whole squares; the\n * content's size by default), `--ds-card-padding` (one square), and\n * `--ds-card-fill`, `--ds-card-ink` and `--ds-card-muted`.\n */\n\n.ds-card {\n  --ds-card-fill: var(--ds-fill);\n  --ds-card-ink: var(--ds-text-color);\n  --ds-card-muted: var(--ds-text-color-muted);\n  --ds-card-padding: var(--ds-unit);\n  --ds-card-text-padding: max(var(--ds-card-padding), var(--ds-card-text-inset-min, 0px));\n  position: relative;\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: column;\n  align-items: stretch;\n  width: var(--ds-card-width, auto);\n  height: var(--ds-card-height, auto);\n  min-width: 0;\n  margin: 0;\n  /* In a squares bento the surface reaches a quarter square towards its neighbours (`--ds-bento-inset-*`, 0 elsewhere), and the padding grows by as much so what it holds stays on the squares. */\n  padding:\n    calc(var(--ds-card-text-padding) + var(--ds-bento-inset-top, 0px))\n    calc(var(--ds-card-text-padding) + var(--ds-bento-inset-end, 0px))\n    var(--ds-bento-inset-bottom, 0px)\n    calc(var(--ds-card-text-padding) + var(--ds-bento-inset-start, 0px));\n  overflow: hidden;\n  border-radius: var(--ds-radius-card);\n  background: var(--ds-card-fill);\n  color: var(--ds-card-ink);\n  font-family: \"Inter Arrows\", var(--ds-typeface-regular);\n  font-size: var(--ds-type-size-default);\n  text-decoration: none;\n  -webkit-tap-highlight-color: transparent;\n}\n\n/* Opt-in safe text inset; media still stands on the card's foot. */\n.ds-card:not(:has(> .ds-card__media:not([hidden]))) {\n  padding-block-end: max(var(--ds-card-text-inset-min, 0px), var(--ds-bento-inset-bottom, 0px));\n}\n\n.ds-card[hidden] {\n  display: none;\n}\n\n.ds-card--outlined {\n  --ds-card-fill: transparent;\n  box-shadow: inset 0 0 0 1px var(--ds-border-color);\n}\n\n.ds-card[data-tone=\"apple-green\"] { --ds-card-fill: var(--one-apple-green-pastel); }\n.ds-card[data-tone=\"chartreuse\"] { --ds-card-fill: var(--one-chartreuse-pastel); }\n.ds-card[data-tone=\"every-green\"] { --ds-card-fill: var(--one-every-green-pastel); }\n.ds-card[data-tone=\"yellow\"] { --ds-card-fill: var(--one-yellow-pastel); }\n.ds-card[data-tone=\"orange\"] { --ds-card-fill: var(--one-orange-pastel); }\n.ds-card[data-tone=\"tuned-red\"] { --ds-card-fill: var(--one-tuned-red-pastel); }\n.ds-card[data-tone=\"pink\"] { --ds-card-fill: var(--one-pink-pastel); }\n.ds-card[data-tone=\"sharp-blue\"] { --ds-card-fill: var(--one-sharp-blue-pastel); }\n.ds-card[data-tone=\"winning-blue\"] { --ds-card-fill: var(--one-winning-blue-pastel); }\n.ds-card[data-tone=\"hysteric-blue\"] { --ds-card-fill: var(--one-hysteric-blue-pastel); }\n.ds-card[data-tone=\"purple\"] { --ds-card-fill: var(--one-purple-pastel); }\n.ds-card[data-tone=\"metal-green\"] { --ds-card-fill: var(--one-metal-green-pastel); }\n.ds-card[data-tone=\"drip-yellow\"] { --ds-card-fill: var(--one-drip-yellow-pastel); }\n.ds-card[data-tone=\"sand\"] { --ds-card-fill: var(--one-sand-pastel); }\n.ds-card[data-tone=\"old-gold\"] { --ds-card-fill: var(--one-old-gold-pastel); }\n.ds-card[data-tone=\"red-for-blood\"] { --ds-card-fill: var(--one-red-for-blood-pastel); }\n.ds-card[data-tone=\"dark-red-variant\"] { --ds-card-fill: var(--one-dark-red-variant-pastel); }\n.ds-card[data-tone=\"signal-red\"] { --ds-card-fill: var(--one-signal-red-pastel); }\n/* On a pastel fill the muted grey falls under 4.5:1 (color.text-contrast): the muted ink is the card's ink let\n   into its fill instead, 5:1 or more on every pastel. */\n.ds-card[data-tone]:not([data-tone=\"ink\"]) {\n  --ds-card-muted: color-mix(in srgb, var(--ds-card-ink) 72%, var(--ds-card-fill));\n}\n\n.ds-card[data-tone=\"ink\"] {\n  --ds-card-fill: var(--ds-black);\n  --ds-card-ink: var(--ds-white);\n  --ds-card-muted: color-mix(in srgb, var(--ds-white) 60%, transparent);\n  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ds-white) 8%, transparent);\n}\n\n/* Words: each line on the lower sixteen of its square. They keep their room\n   in a card of a set height; only the picture is cut at the foot. */\n.ds-card__label,\n.ds-card__title,\n.ds-card__body {\n  flex: none;\n}\n\n.ds-card__label {\n  margin: 0 0 var(--ds-card-label-gap, 0px);\n  padding-top: calc(4px * var(--ds-sf, 1));\n  color: var(--ds-card-muted);\n  font: inherit;\n  line-height: var(--ds-type-lineheight-default, calc(16px * var(--ds-sf, 1)));\n}\n\n.ds-card__title {\n  margin: 0 0 var(--ds-card-title-gap, 0px);\n  color: var(--ds-card-ink);\n  font-family: \"Inter Arrows\", var(--ds-typeface-medium);\n  font-size: var(--ds-type-size-display);\n  font-weight: var(--ds-type-weight-bold);\n  /* A title that wraps keeps its lines together: a square and a half each. */\n  line-height: calc(1.5 * var(--ds-unit));\n  letter-spacing: calc(var(--ds-display-text-tracking, -0.4px) * var(--ds-sf, 1));\n  text-wrap: balance;\n}\n\n.ds-card__body {\n  margin: 0;\n  line-height: var(--ds-unit);\n}\n\n/* The picture stands on the card's foot, a square below the words at least: in a card taller than\n   its words the room goes above the picture, so the pictures of cards side by side (stretched to one\n   height by their row) stand on one level. */\n.ds-card__media {\n  display: flex;\n  flex: none;\n  align-items: flex-start;\n  justify-content: flex-start;\n  min-width: 0;\n  margin-top: auto;\n  padding-top: var(--ds-unit);\n}\n\n/* A picture has no corners of its own where it meets the card: on the foot the card's edge cuts it\n   square. Only a corner standing free inside the card, towards the words, keeps a picture's corner. */\n.ds-card .ds-card__media > :is(img, picture, video, canvas, svg) {\n  border-end-start-radius: 0;\n  border-end-end-radius: 0;\n}\n\n.ds-card__media--center {\n  justify-content: center;\n  margin-inline: calc(-1 * var(--ds-card-text-padding));\n}\n\n/* A picture that bleeds runs on to the end edge and stands on the foot, the space a taller card\n   leaves going above it (or, taller than its room, it starts below the words and the foot cuts it).\n   It has no corners of its own: the card's edges cut it square, and its corner towards the words\n   is square too, a picture or square never rounded where it meets the card. */\n.ds-card__media--bleed {\n  flex: 1 0 auto;\n  flex-direction: column;\n  align-items: stretch;\n  justify-content: safe flex-end;\n  margin-inline-end: calc(-1 * (var(--ds-card-text-padding) + var(--ds-bento-inset-end, 0px)));\n  margin-block-end: calc(-1 * var(--ds-bento-inset-bottom, 0px));\n  --ds-radius: 0px;\n  --ds-image-end-radius: 0px;\n  --ds-image-foot-radius: 0px;\n}\n\n.ds-card__media > * {\n  flex: none;\n}\n\n/* A card that opens something. */\na.ds-card,\n.ds-card[data-interactive] {\n  cursor: pointer;\n}\n\na.ds-card::after,\n.ds-card[data-interactive]::after {\n  content: \"\";\n  position: absolute;\n  inset: 0;\n  border-radius: inherit;\n  background: transparent;\n  pointer-events: none;\n}\n\na.ds-card:focus-visible,\n.ds-card[data-interactive]:focus-visible {\n  outline: 2px solid var(--ds-focus-ring);\n  outline-offset: -2px;\n}\n\n@media (hover: hover) {\n  a.ds-card:hover::after,\n  .ds-card[data-interactive]:hover::after {\n    background: color-mix(in srgb, var(--ds-card-ink) 4%, transparent);\n  }\n}\n\na.ds-card:active::after,\n.ds-card[data-interactive]:active::after {\n  background: color-mix(in srgb, var(--ds-card-ink) 8%, transparent);\n}\n\n/* Optional spacing before a slotted footer tag; zero preserves the normal card. */\n.ds-card__body ::slotted(ds-tag) { margin-block-start: var(--ds-card-footer-gap, 0px); }\n";
 //#endregion
 //#region DS1/2-core/styles/ds-card.css?inline
 var ds_card_default = "/* ds-card.css */\n/* The element places the card; 1-root/card.css draws it. The host takes the\n   card's size, so a card is measured where it stands, in a slide too. */\n\n:host {\n  display: flex;\n  box-sizing: border-box;\n  width: var(--ds-card-width, auto);\n  height: var(--ds-card-height, auto);\n  min-width: 0;\n}\n\n:host([hidden]) {\n  display: none !important;\n}\n\n:host([disabled]) {\n  opacity: 0.5;\n  pointer-events: none;\n}\n\n.ds-card {\n  flex: 1;\n  width: auto;\n  height: auto;\n}\n\n[hidden] {\n  display: none !important;\n}\n\n::slotted([slot=\"media\"]) {\n  flex: none;\n}\n\n/* A picture is square where it meets the card, on its foot (1-root/card.css). */\n::slotted(:is(img, picture, video, canvas, svg)[slot=\"media\"]) {\n  border-end-start-radius: 0;\n  border-end-end-radius: 0;\n}\n";
@@ -8445,7 +8726,7 @@ _Cycle.styles = r$4(ds_cycle_default);
 define("ds-cycle", Cycle);
 //#endregion
 //#region DS1/1-root/empty.css?inline
-var empty_default = "/* Shape is a surface preference. Keep these base lengths unscaled: each\n * component resolves them with its own --ds-sf in component-metrics.css. */\n[data-ds-shape=\"square\"],\n:host([data-ds-shape=\"square\"]) {\n  --ds-corner-size: 0px;\n  --ds-corner-shape: round;\n  --ds-button-inset: 0.5px;\n}\n\n[data-ds-shape=\"rounded\"],\n:host([data-ds-shape=\"rounded\"]) {\n  --ds-corner-size: 4px;\n  --ds-corner-shape: round;\n  --ds-button-inset: 2.5px;\n}\n\n[data-ds-shape=\"circular\"],\n:host([data-ds-shape=\"circular\"]) {\n  --ds-corner-size: 999px;\n  --ds-corner-shape: round;\n  --ds-button-inset: 5px;\n}\n\n/* A squircle needs twice an arc's radius for the same apparent corner.\n * Circular controls keep true semicircles even in a squircle browser. */\n@supports (corner-shape: squircle) {\n  [data-ds-shape=\"rounded\"],\n  :host([data-ds-shape=\"rounded\"]) {\n    --ds-corner-size: 8px;\n    --ds-corner-shape: squircle;\n  }\n}\n/* Resolve dimensions where a component is drawn. Inherited calc() values have\n * already used their ancestor's scale. Base tokens stay unscaled and inherit;\n * resolved tokens can still be overridden directly on a component.\n * data-ds-surface gives ordinary layout elements the same scaled measures.\n */\n:root,\n:host,\n:where([data-ds-surface]) {\n  --ds-unit: calc(var(--ds-1, 20px) * var(--ds-sf, 1));\n  --ds-control-height: calc(var(--ds-control-size, var(--ds-08, 16px)) * var(--ds-sf, 1));\n  --ds-row-height: calc(var(--ds-row-size, var(--ds-1, 20px)) * var(--ds-sf, 1));\n  --ds-type-size-default: calc(var(--ds-text-size, 14px) * var(--ds-sf, 1));\n  --ds-type-size-small: calc(var(--ds-small-text-size, 10px) * var(--ds-sf, 1));\n  --ds-type-size-heading: calc(var(--ds-heading-text-size, 13px) * var(--ds-sf, 1));\n  --ds-type-size-display: calc(var(--ds-display-text-size, 20px) * var(--ds-sf, 1));\n  --ds-type-lineheight-default: calc(var(--ds-text-leading, 16px) * var(--ds-sf, 1));\n  --ds-type-letterspacing-default: calc(var(--ds-text-tracking, -0.3px) * var(--ds-sf, 1));\n  --ds-radius: calc(var(--ds-corner-size, 4px) * var(--ds-sf, 1));\n  --ds-radius-card: calc(var(--ds-card-corner-size, 4px) * var(--ds-sf, 1));\n}\n/*\n * An empty state, as plain classes on native elements.\n *\n * It says that a place has nothing in it yet and what to do about it: a title,\n * a line of text and, when there is one, the action that fills it. The words\n * sit on the paper with no box, no illustration and no colour; every line is\n * one square, so the whole stands on whole squares. The `ds-empty` element\n * draws the same parts from a translation key, with the shared words' \"Nothing\n * here yet\" as its title when none is given.\n *\n *   ds-empty                 the block, at most sixteen squares wide\n *   ds-empty__icon           an icon from the library, before the title, muted\n *   ds-empty__title          one line in the medium face\n *   ds-empty__text           lines of one square, muted\n *   ds-empty__actions        buttons or links on one row, one square below\n *   ds-empty--centered       centred in the space it stands in\n *   ds-empty--done           all done: the check on a mark in the success\n *                            green, the title in that green\n *\n * Tokens: `--ds-empty-measure` (the widest it grows, sixteen squares) and\n * `--ds-empty-padding` (the room above and below, none by default).\n */\n\n.ds-empty {\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  width: 100%;\n  max-width: var(--ds-empty-measure, calc(16 * var(--ds-unit)));\n  margin: 0 auto;\n  text-align: center;\n  padding-block: var(--ds-empty-padding, 0);\n  color: var(--ds-text-color);\n  font-family: var(--ds-typeface-regular);\n  font-feature-settings: var(--ds-font-features);\n  font-size: var(--ds-type-size-default);\n  font-weight: var(--ds-type-weight-default);\n  line-height: var(--ds-unit);\n  letter-spacing: var(--ds-type-letterspacing-default);\n  text-transform: none;\n}\n\n.ds-empty__heading {\n  display: flex;\n  align-items: flex-start;\n  justify-content: center;\n  gap: calc(var(--ds-unit) - var(--ds-control-height));\n  max-width: 100%;\n}\n\n.ds-empty__icon {\n  display: flex;\n  flex: 0 0 auto;\n  align-items: center;\n  justify-content: center;\n  width: var(--ds-control-height);\n  height: var(--ds-control-height);\n  margin-top: calc(var(--ds-unit) - var(--ds-control-height));\n  color: var(--ds-text-color-muted);\n}\n\n.ds-empty__title,\n.ds-empty__text {\n  margin: 0;\n  font: inherit;\n  letter-spacing: inherit;\n}\n\n.ds-empty__title {\n  min-width: 0;\n  padding-top: calc(var(--ds-unit) - var(--ds-control-height));\n  line-height: var(--ds-control-height);\n  font-family: var(--ds-typeface-medium);\n  font-weight: var(--ds-type-weight-bold);\n}\n\n.ds-empty__text {\n  color: var(--ds-text-color-muted);\n}\n\n.ds-empty__actions {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: flex-end;\n  justify-content: center;\n  gap: 0 calc(var(--ds-unit) / 2);\n  min-height: var(--ds-row-height);\n  margin-top: var(--ds-unit);\n}\n\n.ds-empty--start {\n  align-items: flex-start;\n  margin-inline: 0;\n  text-align: start;\n}\n\n.ds-empty--start .ds-empty__heading,\n.ds-empty--start .ds-empty__actions {\n  justify-content: flex-start;\n}\n\n.ds-empty--centered {\n  align-items: center;\n  margin-inline: auto;\n  text-align: center;\n}\n\n.ds-empty--centered .ds-empty__actions {\n  justify-content: center;\n}\n\n/* Done: a place empty because everything in it is finished (every receipt\n   found, nothing left to review). The icon, the check by default, stands on a\n   round mark one control high in the success green, on the sixteen, and the\n   title takes the same green; the line under it stays muted. */\n.ds-empty--done .ds-empty__icon {\n  box-sizing: border-box;\n  justify-content: center;\n  width: var(--ds-control-height);\n  height: var(--ds-control-height);\n  margin-top: calc(var(--ds-unit) - var(--ds-control-height));\n  border-radius: 50%;\n  background: var(--ds-success-color);\n  color: light-dark(var(--ds-white), var(--ds-black));\n  --ds-icon-color: currentColor;\n}\n\n.ds-empty--done .ds-empty__title {\n  color: var(--ds-success-color);\n}\n\n/* Compatibility for saved markup with the icon and title as siblings. */\n.ds-empty:has(> .ds-empty__icon:not([hidden])) {\n  display: grid;\n  grid-template-columns: var(--ds-control-height) minmax(0, auto);\n  column-gap: calc(var(--ds-unit) - var(--ds-control-height));\n  justify-content: center;\n  align-items: start;\n}\n.ds-empty > .ds-empty__icon { grid-column: 1; grid-row: 1; }\n.ds-empty:has(> .ds-empty__icon:not([hidden])) > .ds-empty__title { grid-column: 2; grid-row: 1; }\n.ds-empty > .ds-empty__text,\n.ds-empty > .ds-empty__actions { grid-column: 1 / -1; }\n";
+var empty_default = "/* Shape is a surface preference. Keep these base lengths unscaled: each\n * component resolves them with its own --ds-sf in component-metrics.css. */\n[data-ds-shape=\"square\"],\n:host([data-ds-shape=\"square\"]) {\n  --ds-corner-size: 0px;\n  --ds-corner-shape: round;\n  --ds-button-inset: 0.5px;\n}\n\n[data-ds-shape=\"rounded\"],\n:host([data-ds-shape=\"rounded\"]) {\n  --ds-corner-size: 4px;\n  --ds-corner-shape: round;\n  --ds-button-inset: 2.5px;\n}\n\n[data-ds-shape=\"circular\"],\n:host([data-ds-shape=\"circular\"]) {\n  --ds-corner-size: 999px;\n  --ds-corner-shape: round;\n  --ds-button-inset: 5px;\n}\n\n/* A squircle needs twice an arc's radius for the same apparent corner.\n * Circular controls keep true semicircles even in a squircle browser. */\n@supports (corner-shape: squircle) {\n  [data-ds-shape=\"rounded\"],\n  :host([data-ds-shape=\"rounded\"]) {\n    --ds-corner-size: 8px;\n    --ds-corner-shape: squircle;\n  }\n}\n/* Resolve dimensions where a component is drawn. Inherited calc() values have\n * already used their ancestor's scale. Base tokens stay unscaled and inherit;\n * resolved tokens can still be overridden directly on a component.\n * data-ds-surface gives ordinary layout elements the same scaled measures.\n */\n:root,\n:host,\n:where([data-ds-surface]) {\n  --ds-unit: calc(var(--ds-1, 20px) * var(--ds-sf, 1));\n  --ds-control-height: calc(var(--ds-control-size, var(--ds-08, 16px)) * var(--ds-sf, 1));\n  --ds-row-height: calc(var(--ds-row-size, var(--ds-1, 20px)) * var(--ds-sf, 1));\n  --ds-type-size-default: calc(var(--ds-text-size, 14px) * var(--ds-sf, 1));\n  --ds-type-size-small: calc(var(--ds-small-text-size, 10px) * var(--ds-sf, 1));\n  --ds-type-size-heading: calc(var(--ds-heading-text-size, 13px) * var(--ds-sf, 1));\n  --ds-type-size-display: calc(var(--ds-display-text-size, 20px) * var(--ds-sf, 1));\n  --ds-type-lineheight-default: calc(var(--ds-text-leading, 16px) * var(--ds-sf, 1));\n  --ds-type-letterspacing-default: calc(var(--ds-text-tracking, -0.3px) * var(--ds-sf, 1));\n  --ds-radius: calc(var(--ds-corner-size, 4px) * var(--ds-sf, 1));\n  --ds-radius-card: calc(var(--ds-card-corner-size, 4px) * var(--ds-sf, 1));\n}\n/*\n * An empty state, as plain classes on native elements.\n *\n * It says that a place has nothing in it yet and what to do about it: a title,\n * a line of text and, when there is one, the action that fills it. The words\n * sit on the paper with no box, no illustration and no colour; every line is\n * one square, so the whole stands on whole squares. The `ds-empty` element\n * draws the same parts from a translation key, with the shared words' \"Nothing\n * here yet\" as its title when none is given.\n *\n *   ds-empty                 the block, at most sixteen squares wide\n *   ds-empty__icon           an icon from the library, before the title, muted\n *   ds-empty__title          one line in the medium face\n *   ds-empty__text           lines of one square, muted\n *   ds-empty__actions        buttons or links on one row, one square below\n *   ds-empty--centered       centred in the space it stands in\n *   ds-empty--done           all done: the check on a mark in the success\n *                            green, the title in that green\n *\n * Tokens: `--ds-empty-measure` (the widest it grows, sixteen squares) and\n * `--ds-empty-padding` (the room above and below, none by default).\n */\n\n.ds-empty {\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  width: 100%;\n  max-width: var(--ds-empty-measure, calc(16 * var(--ds-unit)));\n  margin: 0 auto;\n  text-align: center;\n  padding-block: var(--ds-empty-padding, 0);\n  color: var(--ds-text-color);\n  font-family: \"Inter Arrows\", var(--ds-typeface-regular);\n  font-feature-settings: var(--ds-font-features);\n  font-size: var(--ds-type-size-default);\n  font-weight: var(--ds-type-weight-default);\n  line-height: var(--ds-unit);\n  letter-spacing: var(--ds-type-letterspacing-default);\n  text-transform: none;\n}\n\n.ds-empty__heading {\n  display: flex;\n  align-items: flex-start;\n  justify-content: center;\n  gap: calc(var(--ds-unit) - var(--ds-control-height));\n  max-width: 100%;\n}\n\n.ds-empty__icon {\n  display: flex;\n  flex: 0 0 auto;\n  align-items: center;\n  justify-content: center;\n  width: var(--ds-control-height);\n  height: var(--ds-control-height);\n  margin-top: calc(var(--ds-unit) - var(--ds-control-height));\n  color: var(--ds-text-color-muted);\n}\n\n.ds-empty__title,\n.ds-empty__text {\n  margin: 0;\n  font: inherit;\n  letter-spacing: inherit;\n}\n\n.ds-empty__title {\n  min-width: 0;\n  padding-top: calc(var(--ds-unit) - var(--ds-control-height));\n  line-height: var(--ds-control-height);\n  font-family: \"Inter Arrows\", var(--ds-typeface-medium);\n  font-weight: var(--ds-type-weight-bold);\n}\n\n.ds-empty__text {\n  color: var(--ds-text-color-muted);\n}\n\n.ds-empty__actions {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: flex-end;\n  justify-content: center;\n  gap: 0 calc(var(--ds-unit) / 2);\n  min-height: var(--ds-row-height);\n  margin-top: var(--ds-unit);\n}\n\n.ds-empty--start {\n  align-items: flex-start;\n  margin-inline: 0;\n  text-align: start;\n}\n\n.ds-empty--start .ds-empty__heading,\n.ds-empty--start .ds-empty__actions {\n  justify-content: flex-start;\n}\n\n.ds-empty--centered {\n  align-items: center;\n  margin-inline: auto;\n  text-align: center;\n}\n\n.ds-empty--centered .ds-empty__actions {\n  justify-content: center;\n}\n\n/* Done: a place empty because everything in it is finished (every receipt\n   found, nothing left to review). The icon, the check by default, stands on a\n   round mark one control high in the success green, on the sixteen, and the\n   title takes the same green; the line under it stays muted. */\n.ds-empty--done .ds-empty__icon {\n  box-sizing: border-box;\n  justify-content: center;\n  width: var(--ds-control-height);\n  height: var(--ds-control-height);\n  margin-top: calc(var(--ds-unit) - var(--ds-control-height));\n  border-radius: 50%;\n  background: var(--ds-success-color);\n  color: light-dark(var(--ds-white), var(--ds-black));\n  --ds-icon-color: currentColor;\n}\n\n.ds-empty--done .ds-empty__title {\n  color: var(--ds-success-color);\n}\n\n/* Compatibility for saved markup with the icon and title as siblings. */\n.ds-empty:has(> .ds-empty__icon:not([hidden])) {\n  display: grid;\n  grid-template-columns: var(--ds-control-height) minmax(0, auto);\n  column-gap: calc(var(--ds-unit) - var(--ds-control-height));\n  justify-content: center;\n  align-items: start;\n}\n.ds-empty > .ds-empty__icon { grid-column: 1; grid-row: 1; }\n.ds-empty:has(> .ds-empty__icon:not([hidden])) > .ds-empty__title { grid-column: 2; grid-row: 1; }\n.ds-empty > .ds-empty__text,\n.ds-empty > .ds-empty__actions { grid-column: 1 / -1; }\n";
 //#endregion
 //#region DS1/2-core/styles/ds-empty.css?inline
 var ds_empty_default = "/* ds-empty.css */\n/* The element only places the block; 1-root/empty.css draws it. */\n\n:host {\n  display: block;\n  min-width: 0;\n}\n\n:host([hidden]),\n[hidden] {\n  display: none !important;\n}\n\n/* Slotted words take the block's lines rather than their own margins. */\n::slotted([slot=\"heading\"]),\n::slotted(:not([slot])) {\n  margin: 0;\n}\n";
@@ -8616,7 +8897,7 @@ var password_see_default = "data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org
 var password_unsee_default = "data:image/svg+xml,%3csvg%20preserveAspectRatio='none'%20overflow='visible'%20style='display:%20block;'%20width='16'%20height='16'%20viewBox='0%200%2016%2016'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cg%20id='Unsee'%3e%3cg%20id='Vector'%3e%3cpath%20d='M12.4541%2012.789L13.1743%2012.0688L12.6027%2011.4967L12.6%2011.4994L12.0137%2010.9144C11.7332%2011.103%2011.4336%2011.283%2011.1164%2011.4457L11.4068%2011.7363L11.4046%2011.7385L12.4541%2012.789Z'%20fill='currentColor'/%3e%3cpath%20d='M5.96371%206.28858L9.79315%2010.1213C10.0642%209.91923%2010.2966%209.66817%2010.4772%209.38122L6.69735%205.60959C6.41317%205.78931%206.16435%206.01991%205.96371%206.28858Z'%20fill='currentColor'/%3e%3cpath%20fill-rule='evenodd'%20clip-rule='evenodd'%20d='M3.68238%204.00893L3.09583%203.42184L3.79957%202.7181L3.816%202.70167L5.35651%204.24363L6.05746%204.94524L6.712%205.6004L10.4818%209.3738L11.3559%2010.2487L12.0181%2010.9115L12.6027%2011.4967L12.6%2011.4994L12.0137%2010.9144C11.7332%2011.103%2011.4336%2011.283%2011.1164%2011.4457L11.4068%2011.7363L11.4046%2011.7385L11.1136%2011.4472L10.4275%2010.7604L9.79075%2010.1231L5.96207%206.29078L5.08276%205.41064L4.4124%204.73965L3.68238%204.00893ZM12.6382%2010.4584C12.7502%2010.37%2012.8582%2010.2812%2012.9619%2010.1927C13.5472%209.69339%2014.0104%209.19525%2014.3271%208.82159C14.4858%208.63445%2014.6085%208.47754%2014.6924%208.36651C14.7343%208.31101%2014.7669%208.26656%2014.7891%208.23565L14.7965%208.22527L14.8089%208.20741L14.8145%208.19952L14.8213%208.18975C14.8218%208.18905%2014.8222%208.18816%2014.8225%208.18737L14.8232%208.18584L14.8242%208.18487L15.0029%207.9251L14.8252%207.66534L14.4463%207.9251C14.8248%207.66558%2014.8243%207.66451%2014.8242%207.66436L14.8232%207.66338L14.8213%207.66045L14.8145%207.65069C14.8085%207.64215%2014.8%207.62981%2014.7891%207.61456C14.7669%207.58365%2014.7343%207.53915%2014.6924%207.4837C14.6085%207.37267%2014.4858%207.21573%2014.3271%207.02862C14.0104%206.65495%2013.5472%206.15683%2012.9619%205.65752C11.8003%204.66653%2010.106%203.6292%208.08203%203.6292C7.38933%203.6292%206.73067%203.75075%206.11587%203.95029L6.86093%204.69373C7.25481%204.60012%207.6629%204.54717%208.08203%204.54717C9.79158%204.54717%2011.2792%205.42838%2012.3662%206.35577C12.9053%206.81568%2013.3338%207.27662%2013.627%207.62237C13.7119%207.72259%2013.7835%207.81426%2013.8443%207.89203L13.8701%207.9251L13.8442%207.95828C13.7834%208.03604%2013.7119%208.12766%2013.627%208.22784C13.3338%208.57358%2012.9053%209.03453%2012.3662%209.49444C12.2436%209.599%2012.116%209.70298%2011.9835%209.80517L12.6382%2010.4584ZM5.58478%206.99004L9.09135%2010.4996C8.80023%2010.6051%208.48611%2010.6626%208.15857%2010.6626C6.64663%2010.6626%205.42096%209.43698%205.42096%207.92504C5.42096%207.59666%205.47878%207.28179%205.58478%206.99004ZM10.371%2011.7804L9.65051%2011.0593C9.15436%2011.2126%208.62958%2011.303%208.08203%2011.303C6.37015%2011.303%204.84249%2010.4199%203.71484%209.48956C3.15622%209.02867%202.70899%208.56651%202.40137%208.22002C2.31556%208.12337%202.24231%208.03438%202.17972%207.95834L2.15234%207.9251L2.17972%207.89186C2.24231%207.81582%202.31553%207.72686%202.40137%207.63018C2.70898%207.2837%203.15621%206.82154%203.71484%206.36065C3.93564%206.17849%204.17177%205.99815%204.42162%205.82588L3.76309%205.16679C3.53867%205.32681%203.32756%205.49036%203.13086%205.65264C2.52717%206.15069%202.04582%206.648%201.71484%207.02081C1.54908%207.20752%201.42004%207.36422%201.33203%207.47491C1.28811%207.53015%201.25376%207.57406%201.23047%207.60479C1.22314%207.61446%201.21704%207.62297%201.21196%207.63006L1.2041%207.64092C1.20236%207.64328%201.20069%207.64527%201.19925%207.647L1.19629%207.65069L1.19434%207.65362L1.19336%207.65557L0.99707%207.9251L1.19336%208.19561L1.19434%208.19659L1.19629%208.19952L1.19926%208.20322C1.20071%208.20496%201.20238%208.20695%201.2041%208.20928L1.21195%208.22013C1.21704%208.22723%201.22314%208.23575%201.23047%208.24541C1.25377%208.27615%201.28809%208.32002%201.33203%208.3753C1.42004%208.48599%201.54908%208.64268%201.71484%208.8294C2.04583%209.20221%202.52718%209.69952%203.13086%2010.1976C4.3286%2011.1857%206.06033%2012.221%208.08203%2012.221C8.90391%2012.221%209.67144%2012.0499%2010.371%2011.7804ZM10.8048%208.62904C10.8644%208.40441%2010.8962%208.16843%2010.8962%207.92504C10.8962%206.4131%209.6705%205.18743%208.15857%205.18743C7.91309%205.18743%207.67517%205.21974%207.44881%205.28034L10.8048%208.62904ZM9.79315%2010.1213L5.96371%206.28858C6.16435%206.01991%206.41317%205.78931%206.69735%205.60959L10.4772%209.38122C10.2966%209.66817%2010.0642%209.91923%209.79315%2010.1213Z'%20fill='currentColor'/%3e%3c/g%3e%3c/g%3e%3c/svg%3e";
 //#endregion
 //#region DS1/2-core/styles/ds-input.css?inline
-var ds_input_default = "/* Shape is a surface preference. Keep these base lengths unscaled: each\n * component resolves them with its own --ds-sf in component-metrics.css. */\n[data-ds-shape=\"square\"],\n:host([data-ds-shape=\"square\"]) {\n  --ds-corner-size: 0px;\n  --ds-corner-shape: round;\n  --ds-button-inset: 0.5px;\n}\n\n[data-ds-shape=\"rounded\"],\n:host([data-ds-shape=\"rounded\"]) {\n  --ds-corner-size: 4px;\n  --ds-corner-shape: round;\n  --ds-button-inset: 2.5px;\n}\n\n[data-ds-shape=\"circular\"],\n:host([data-ds-shape=\"circular\"]) {\n  --ds-corner-size: 999px;\n  --ds-corner-shape: round;\n  --ds-button-inset: 5px;\n}\n\n/* A squircle needs twice an arc's radius for the same apparent corner.\n * Circular controls keep true semicircles even in a squircle browser. */\n@supports (corner-shape: squircle) {\n  [data-ds-shape=\"rounded\"],\n  :host([data-ds-shape=\"rounded\"]) {\n    --ds-corner-size: 8px;\n    --ds-corner-shape: squircle;\n  }\n}\n/* Resolve dimensions where a component is drawn. Inherited calc() values have\n * already used their ancestor's scale. Base tokens stay unscaled and inherit;\n * resolved tokens can still be overridden directly on a component.\n * data-ds-surface gives ordinary layout elements the same scaled measures.\n */\n:root,\n:host,\n:where([data-ds-surface]) {\n  --ds-unit: calc(var(--ds-1, 20px) * var(--ds-sf, 1));\n  --ds-control-height: calc(var(--ds-control-size, var(--ds-08, 16px)) * var(--ds-sf, 1));\n  --ds-row-height: calc(var(--ds-row-size, var(--ds-1, 20px)) * var(--ds-sf, 1));\n  --ds-type-size-default: calc(var(--ds-text-size, 14px) * var(--ds-sf, 1));\n  --ds-type-size-small: calc(var(--ds-small-text-size, 10px) * var(--ds-sf, 1));\n  --ds-type-size-heading: calc(var(--ds-heading-text-size, 13px) * var(--ds-sf, 1));\n  --ds-type-size-display: calc(var(--ds-display-text-size, 20px) * var(--ds-sf, 1));\n  --ds-type-lineheight-default: calc(var(--ds-text-leading, 16px) * var(--ds-sf, 1));\n  --ds-type-letterspacing-default: calc(var(--ds-text-tracking, -0.3px) * var(--ds-sf, 1));\n  --ds-radius: calc(var(--ds-corner-size, 4px) * var(--ds-sf, 1));\n  --ds-radius-card: calc(var(--ds-card-corner-size, 4px) * var(--ds-sf, 1));\n}\n/* ds-input.css */\n/* Input component styles */\n\n:host {\n  display: block;\n  width: 100%;\n  /* The field's own tokens (variant=\"field\"), unset by default and in unscaled px, resolved\n     here at this field's scale. A context that sets --ds-input-height, --ds-input-padding or\n     --ds-input-radius keeps its own; otherwise the field reads these, then its measure. */\n  --_input-size: var(--ds-input-size);\n  --_input-height: calc(var(--_input-size) * var(--ds-sf));\n  --_input-padding-size: var(--ds-input-padding-size);\n  --_input-padding: calc(var(--_input-padding-size) * var(--ds-sf));\n  --_input-corner-size: var(--ds-input-corner-size);\n  --_input-radius: calc(var(--_input-corner-size) * var(--ds-sf));\n}\n/* Its width: unset fills the row as before, a length fixes it. */\n:host([variant=\"field\"]) {\n  width: var(--ds-input-inline-size, 100%);\n}\n\n.input-wrapper {\n  display: flex;\n  flex-direction: column;\n  gap: 0;\n  width: 100%;\n}\n\nlabel {\n  font-family: var(--ds-typeface-regular);\n  font-size: var(--ds-type-size-default);\n  line-height: var(--ds-row-height);\n  color: var(--ds-text-color);\n}\n\n.input-container {\n  position: relative;\n  display: flex;\n  align-items: center;\n  width: 100%;\n}\n\n:is(input, textarea) {\n  background: var(--base-light-grey, #e8e8e8);\n  border: none;\n  padding: 0 calc(2px * var(--ds-sf, 1));\n  font-size: var(--ds-type-size-default);\n  font-family: var(--ds-typeface-regular);\n  /* The field's ink, whole, before focus too: a dimmed grey at half opacity read at 2:1 (color.text-contrast). */\n  color: var(--ds-input-color, #2a2a2a);\n  line-height: calc(16px * var(--ds-sf, 1));\n  letter-spacing: calc(-0.4px * var(--ds-sf, 1));\n  height: var(--ds-input-height, calc(16px * var(--ds-sf, 1)));\n  width: 100%;\n  box-sizing: border-box;\n  outline: none;\n}\n\n:is(input, textarea):focus {\n  outline: none;\n  opacity: 1;\n  color: var(--base-slate, #1e1e1e);\n}\n\ninput {\n  border-radius: var(--ds-input-radius, var(--ds-radius));\n  corner-shape: var(--ds-corner-shape, round);\n}\n\n:is(input, textarea)::placeholder {\n  /* The muted ink, whole: half-transparent grey on the field's fill fell to 1.3:1 (color.text-contrast). */\n  color: var(--ds-input-placeholder-color, var(--ds-text-color-muted));\n  opacity: 1;\n}\n\n:is(input, textarea):disabled {\n  cursor: not-allowed;\n  opacity: 0.5;\n}\n\n:is(input, textarea):read-only {\n  background-color: var(--input-readonly-background, #fafafa);\n}\n\n:host([variant=\"filled\"]) :is(input, textarea) {\n  background-color: var(--input-filled-background, var(--surface-color-secondary, #f5f5f5));\n  border: none;\n  border-bottom: 2px solid var(--border-color, #ccc);\n  border-radius: calc(var(--025) * var(--ds-sf, 1)) calc(var(--025) * var(--ds-sf, 1)) 0 0;\n}\n\n:host([variant=\"filled\"]) :is(input, textarea):focus {\n  border-bottom-color: var(--accent-color, #007aff);\n  box-shadow: none;\n}\n\n:host([variant=\"outlined\"]) :is(input, textarea) {\n  background-color: transparent;\n  border: 2px solid var(--border-color, #ccc);\n}\n\n:host([variant=\"outlined\"]) :is(input, textarea):focus {\n  border-color: var(--accent-color, #007aff);\n}\n\n/*\n * The error stands on one-square lines in the danger colour, as\n * `.ds-field__error` does. While it shows, every row of the field is at least\n * one square high and a lower control keeps its place at the top of its row,\n * so the error starts on the square below the control in every variant.\n */\n.input-wrapper.has-error {\n  display: grid;\n  grid-template-columns: minmax(0, 1fr);\n  grid-auto-rows: minmax(var(--ds-input-control-row, var(--ds-row-height)), auto);\n  align-items: start;\n}\n\n.error-message {\n  margin: 0;\n  min-width: 0;\n  color: var(--ds-danger-color);\n  font-family: var(--ds-typeface-regular);\n  font-feature-settings: var(--ds-font-features);\n  font-size: var(--ds-type-size-default);\n  font-weight: var(--ds-type-weight-default);\n  line-height: var(--ds-unit);\n  letter-spacing: var(--ds-type-letterspacing-default);\n}\n\n/* A translated error wraps on the same lines as a literal one. */\n.error-message > ds-text {\n  display: block;\n}\n\n:host([required]) label::after {\n  content: \" *\";\n  color: var(--ds-danger-color);\n}\n\n/* Error state */\n:is(input, textarea).has-error {\n  border-color: var(--ds-danger-color);\n}\n\n:is(input, textarea).has-error:focus {\n  box-shadow: 0 0 0 2px color-mix(in srgb, var(--ds-danger-color) 20%, transparent);\n}\n\n/* A field drawn 18px high inside a 20px form row. */\n:host([variant=\"row\"]) {\n  box-sizing: border-box;\n  padding-top: calc(2px * var(--ds-sf, 1));\n  /* The host's 2px above the 18px field make up its row. */\n  --ds-input-control-row: calc(18px * var(--ds-sf, 1));\n}\n:host([variant=\"row\"]) .input-container,\n:host([variant=\"row\"]) :is(input, textarea) {\n  box-sizing: border-box;\n  height: calc(18px * var(--ds-sf, 1));\n  min-height: calc(18px * var(--ds-sf, 1));\n  max-height: calc(18px * var(--ds-sf, 1));\n}\n:host([variant=\"row\"]) :is(input, textarea) {\n  margin: 0;\n  padding-block: 0;\n  line-height: calc(16px * var(--ds-sf, 1));\n  border-radius: 0;\n  background: var(--ds-input-background);\n  color: var(--ds-input-color);\n  opacity: 1;\n}\n:host([variant=\"row\"]) :is(input, textarea)::placeholder {\n  color: var(--ds-input-placeholder-color);\n  opacity: 1;\n}\n:host([variant=\"row\"]) :is(input, textarea):focus {\n  background: var(--ds-input-background);\n  color: var(--ds-input-color);\n  box-shadow: inset 0 0 0 1px var(--ds-accent-color);\n  opacity: 1;\n}\n:host([variant=\"row\"]) :is(input, textarea):disabled {\n  opacity: 1;\n  background: var(--ds-input-background);\n  color: var(--ds-input-disabled-color);\n  -webkit-text-fill-color: var(--ds-input-disabled-color);\n}\n:host([quiet-focus]) :is(input, textarea):focus,\n:host([quiet-focus]) :is(input, textarea):focus-visible,\n:host([quiet-focus]) .input-container:focus-within {\n  outline: none !important;\n  box-shadow: none !important;\n}\n:is(input, textarea).has-reveal {\n  padding-inline-end: calc(24px * var(--ds-sf, 1));\n}\n.password-visibility {\n  position: absolute;\n  inset-inline-end: 0;\n  top: 0;\n  height: 100%;\n  width: calc(24px * var(--ds-sf, 1));\n  padding: 0;\n  border: 0;\n  background: transparent;\n  color: var(--ds-input-reveal-color);\n  cursor: pointer;\n  display: grid;\n  place-items: center;\n}\n.password-visibility:focus-visible {\n  outline: 1px solid currentColor;\n  outline-offset: -1px;\n}\n.password-visibility:disabled {\n  cursor: default;\n  opacity: 0.5;\n}\n.password-visibility span {\n  display: block;\n  width: calc(16px * var(--ds-sf, 1));\n  height: calc(16px * var(--ds-sf, 1));\n  background: currentColor;\n  mask: var(--eye-icon) center / 100% 100% no-repeat;\n}\n@supports (corner-shape: squircle) {\n  :is(input, textarea) {\n    corner-shape: var(--ds-corner-shape, squircle);\n  }\n}\n\n/* Standard standalone form field and text-only inline editor. */\n:host([variant=\"field\"]) :is(input, textarea),\n:host([variant=\"plain\"]) :is(input, textarea) {\n  height: var(--ds-input-height, var(--ds-row-height));\n  padding: var(--ds-input-padding, 0 calc(4px * var(--ds-sf)));\n  border: var(--ds-input-border, 1px solid var(--ds-border-color));\n  border-radius: var(--ds-input-radius, var(--ds-radius));\n  background: var(--ds-input-field-background, var(--ds-fill));\n  color: var(--ds-text-color);\n  opacity: 1;\n  font-size: var(--ds-type-size-default);\n  line-height: var(--ds-type-lineheight-default);\n  letter-spacing: var(--ds-type-letterspacing-default);\n}\n/* A field is one control high (16px) on the lower sixteen of its square, as a button and a\n * select are: the square keeps the row it stands in, the face stands at its foot. */\n:host([variant=\"field\"]) {\n  --_field-height: var(--ds-input-height, var(--_input-height, var(--ds-control-height)));\n}\n:host([variant=\"field\"]) .input-container {\n  min-height: var(--ds-row-height);\n  align-items: flex-end;\n}\n:host([variant=\"field\"]) .password-visibility {\n  top: auto;\n  bottom: 0;\n  height: var(--_field-height);\n}\n:host([variant=\"field\"]) input {\n  height: var(--_field-height);\n  padding: var(--ds-input-padding, 0 var(--_input-padding, calc(4px * var(--ds-sf))));\n  border-radius: var(--ds-input-radius, var(--_input-radius, var(--ds-radius)));\n}\n:host([variant=\"plain\"]) :is(input, textarea) {\n  padding: var(--ds-input-padding, 0);\n  border: 0;\n  border-radius: 0;\n  background: transparent;\n}\n:host([variant=\"field\"]) :is(input, textarea)::placeholder,\n:host([variant=\"plain\"]) :is(input, textarea)::placeholder {\n  color: var(--ds-text-color-muted);\n  opacity: 1;\n}\n:host([variant=\"field\"]) :is(input, textarea):focus {\n  outline: 1px solid var(--ds-focus-ring);\n  outline-offset: -1px;\n}\n:host([variant=\"field\"]) :is(input, textarea):disabled,\n:host([variant=\"plain\"]) :is(input, textarea):disabled {\n  opacity: 0.5;\n}\n:host([variant=\"field\"]) :is(input, textarea).has-reveal,\n:host([variant=\"plain\"]) :is(input, textarea).has-reveal {\n  padding-inline-end: calc(24px * var(--ds-sf));\n}\n\n/* ---- Multiline ------------------------------------------------------- */\n/* A text area spans whole rows; shared input styles own its field treatment. */\n.row-metric {\n  position: absolute;\n  width: 0;\n  height: var(--ds-row-height);\n  overflow: hidden;\n  visibility: hidden;\n  pointer-events: none;\n}\n/* Pill-shaped corners would cut into multiline writing. A text area's field\n * corners stay small independently of the surrounding control preference. */\n:host([variant=\"field\"]) textarea {\n  border-radius: var(--ds-textarea-radius, calc(4px * var(--ds-sf)));\n  corner-shape: var(--ds-textarea-corner-shape, squircle);\n}\n:host([variant]) textarea {\n  height: var(--ds-textarea-height, calc(var(--ds-textarea-rows, 3) * var(--ds-row-height)));\n  min-height: var(--ds-row-height);\n  padding: var(--ds-textarea-padding, calc(4px * var(--ds-sf)));\n  resize: vertical;\n}\n:host([variant=\"plain\"]) textarea {\n  padding: 0;\n}\n:host([auto-grow]) textarea {\n  resize: none;\n}\n";
+var ds_input_default = "/* Shape is a surface preference. Keep these base lengths unscaled: each\n * component resolves them with its own --ds-sf in component-metrics.css. */\n[data-ds-shape=\"square\"],\n:host([data-ds-shape=\"square\"]) {\n  --ds-corner-size: 0px;\n  --ds-corner-shape: round;\n  --ds-button-inset: 0.5px;\n}\n\n[data-ds-shape=\"rounded\"],\n:host([data-ds-shape=\"rounded\"]) {\n  --ds-corner-size: 4px;\n  --ds-corner-shape: round;\n  --ds-button-inset: 2.5px;\n}\n\n[data-ds-shape=\"circular\"],\n:host([data-ds-shape=\"circular\"]) {\n  --ds-corner-size: 999px;\n  --ds-corner-shape: round;\n  --ds-button-inset: 5px;\n}\n\n/* A squircle needs twice an arc's radius for the same apparent corner.\n * Circular controls keep true semicircles even in a squircle browser. */\n@supports (corner-shape: squircle) {\n  [data-ds-shape=\"rounded\"],\n  :host([data-ds-shape=\"rounded\"]) {\n    --ds-corner-size: 8px;\n    --ds-corner-shape: squircle;\n  }\n}\n/* Resolve dimensions where a component is drawn. Inherited calc() values have\n * already used their ancestor's scale. Base tokens stay unscaled and inherit;\n * resolved tokens can still be overridden directly on a component.\n * data-ds-surface gives ordinary layout elements the same scaled measures.\n */\n:root,\n:host,\n:where([data-ds-surface]) {\n  --ds-unit: calc(var(--ds-1, 20px) * var(--ds-sf, 1));\n  --ds-control-height: calc(var(--ds-control-size, var(--ds-08, 16px)) * var(--ds-sf, 1));\n  --ds-row-height: calc(var(--ds-row-size, var(--ds-1, 20px)) * var(--ds-sf, 1));\n  --ds-type-size-default: calc(var(--ds-text-size, 14px) * var(--ds-sf, 1));\n  --ds-type-size-small: calc(var(--ds-small-text-size, 10px) * var(--ds-sf, 1));\n  --ds-type-size-heading: calc(var(--ds-heading-text-size, 13px) * var(--ds-sf, 1));\n  --ds-type-size-display: calc(var(--ds-display-text-size, 20px) * var(--ds-sf, 1));\n  --ds-type-lineheight-default: calc(var(--ds-text-leading, 16px) * var(--ds-sf, 1));\n  --ds-type-letterspacing-default: calc(var(--ds-text-tracking, -0.3px) * var(--ds-sf, 1));\n  --ds-radius: calc(var(--ds-corner-size, 4px) * var(--ds-sf, 1));\n  --ds-radius-card: calc(var(--ds-card-corner-size, 4px) * var(--ds-sf, 1));\n}\n/* ds-input.css */\n/* Input component styles */\n\n:host {\n  display: block;\n  width: 100%;\n  /* The field's own tokens (variant=\"field\"), unset by default and in unscaled px, resolved\n     here at this field's scale. A context that sets --ds-input-height, --ds-input-padding or\n     --ds-input-radius keeps its own; otherwise the field reads these, then its measure. */\n  --_input-size: var(--ds-input-size);\n  --_input-height: calc(var(--_input-size) * var(--ds-sf));\n  --_input-padding-size: var(--ds-input-padding-size);\n  --_input-padding: calc(var(--_input-padding-size) * var(--ds-sf));\n  --_input-corner-size: var(--ds-input-corner-size);\n  --_input-radius: calc(var(--_input-corner-size) * var(--ds-sf));\n}\n/* Its width: unset fills the row as before, a length fixes it. */\n:host([variant=\"field\"]) {\n  width: var(--ds-input-inline-size, 100%);\n}\n\n.input-wrapper {\n  display: flex;\n  flex-direction: column;\n  gap: 0;\n  width: 100%;\n}\n\nlabel {\n  font-family: \"Inter Arrows\", var(--ds-typeface-regular);\n  font-size: var(--ds-type-size-default);\n  line-height: var(--ds-row-height);\n  color: var(--ds-text-color);\n}\n\n.input-container {\n  position: relative;\n  display: flex;\n  align-items: center;\n  width: 100%;\n}\n\n:is(input, textarea) {\n  background: var(--base-light-grey, #e8e8e8);\n  border: none;\n  padding: 0 calc(2px * var(--ds-sf, 1));\n  font-size: var(--ds-type-size-default);\n  font-family: \"Inter Arrows\", var(--ds-typeface-regular);\n  /* The field's ink, whole, before focus too: a dimmed grey at half opacity read at 2:1 (color.text-contrast). */\n  color: var(--ds-input-color, #2a2a2a);\n  line-height: calc(16px * var(--ds-sf, 1));\n  letter-spacing: calc(-0.4px * var(--ds-sf, 1));\n  height: var(--ds-input-height, calc(16px * var(--ds-sf, 1)));\n  width: 100%;\n  box-sizing: border-box;\n  outline: none;\n}\n\n:is(input, textarea):focus {\n  outline: none;\n  opacity: 1;\n  color: var(--base-slate, #1e1e1e);\n}\n\ninput {\n  border-radius: var(--ds-input-radius, var(--ds-radius));\n  corner-shape: var(--ds-corner-shape, round);\n}\n\n:is(input, textarea)::placeholder {\n  /* The muted ink, whole: half-transparent grey on the field's fill fell to 1.3:1 (color.text-contrast). */\n  color: var(--ds-input-placeholder-color, var(--ds-text-color-muted));\n  opacity: 1;\n}\n\n:is(input, textarea):disabled {\n  cursor: not-allowed;\n  opacity: 0.5;\n}\n\n:is(input, textarea):read-only {\n  background-color: var(--input-readonly-background, #fafafa);\n}\n\n:host([variant=\"filled\"]) :is(input, textarea) {\n  background-color: var(--input-filled-background, var(--surface-color-secondary, #f5f5f5));\n  border: none;\n  border-bottom: 2px solid var(--border-color, #ccc);\n  border-radius: calc(var(--025) * var(--ds-sf, 1)) calc(var(--025) * var(--ds-sf, 1)) 0 0;\n}\n\n:host([variant=\"filled\"]) :is(input, textarea):focus {\n  border-bottom-color: var(--accent-color, #007aff);\n  box-shadow: none;\n}\n\n:host([variant=\"outlined\"]) :is(input, textarea) {\n  background-color: transparent;\n  border: 2px solid var(--border-color, #ccc);\n}\n\n:host([variant=\"outlined\"]) :is(input, textarea):focus {\n  border-color: var(--accent-color, #007aff);\n}\n\n/*\n * The error stands on one-square lines in the danger colour, as\n * `.ds-field__error` does. While it shows, every row of the field is at least\n * one square high and a lower control keeps its place at the top of its row,\n * so the error starts on the square below the control in every variant.\n */\n.input-wrapper.has-error {\n  display: grid;\n  grid-template-columns: minmax(0, 1fr);\n  grid-auto-rows: minmax(var(--ds-input-control-row, var(--ds-row-height)), auto);\n  align-items: start;\n}\n\n.error-message {\n  margin: 0;\n  min-width: 0;\n  color: var(--ds-danger-color);\n  font-family: \"Inter Arrows\", var(--ds-typeface-regular);\n  font-feature-settings: var(--ds-font-features);\n  font-size: var(--ds-type-size-default);\n  font-weight: var(--ds-type-weight-default);\n  line-height: var(--ds-unit);\n  letter-spacing: var(--ds-type-letterspacing-default);\n}\n\n/* A translated error wraps on the same lines as a literal one. */\n.error-message > ds-text {\n  display: block;\n}\n\n:host([required]) label::after {\n  content: \" *\";\n  color: var(--ds-danger-color);\n}\n\n/* Error state */\n:is(input, textarea).has-error {\n  border-color: var(--ds-danger-color);\n}\n\n:is(input, textarea).has-error:focus {\n  box-shadow: 0 0 0 2px color-mix(in srgb, var(--ds-danger-color) 20%, transparent);\n}\n\n/* A field drawn 18px high inside a 20px form row. */\n:host([variant=\"row\"]) {\n  box-sizing: border-box;\n  padding-top: calc(2px * var(--ds-sf, 1));\n  /* The host's 2px above the 18px field make up its row. */\n  --ds-input-control-row: calc(18px * var(--ds-sf, 1));\n}\n:host([variant=\"row\"]) .input-container,\n:host([variant=\"row\"]) :is(input, textarea) {\n  box-sizing: border-box;\n  height: calc(18px * var(--ds-sf, 1));\n  min-height: calc(18px * var(--ds-sf, 1));\n  max-height: calc(18px * var(--ds-sf, 1));\n}\n:host([variant=\"row\"]) :is(input, textarea) {\n  margin: 0;\n  padding-block: 0;\n  line-height: calc(16px * var(--ds-sf, 1));\n  border-radius: 0;\n  background: var(--ds-input-background);\n  color: var(--ds-input-color);\n  opacity: 1;\n}\n:host([variant=\"row\"]) :is(input, textarea)::placeholder {\n  color: var(--ds-input-placeholder-color);\n  opacity: 1;\n}\n:host([variant=\"row\"]) :is(input, textarea):focus {\n  background: var(--ds-input-background);\n  color: var(--ds-input-color);\n  box-shadow: inset 0 0 0 1px var(--ds-accent-color);\n  opacity: 1;\n}\n:host([variant=\"row\"]) :is(input, textarea):disabled {\n  opacity: 1;\n  background: var(--ds-input-background);\n  color: var(--ds-input-disabled-color);\n  -webkit-text-fill-color: var(--ds-input-disabled-color);\n}\n:host([quiet-focus]) :is(input, textarea):focus,\n:host([quiet-focus]) :is(input, textarea):focus-visible,\n:host([quiet-focus]) .input-container:focus-within {\n  outline: none !important;\n  box-shadow: none !important;\n}\n:is(input, textarea).has-reveal {\n  padding-inline-end: calc(24px * var(--ds-sf, 1));\n}\n.password-visibility {\n  position: absolute;\n  inset-inline-end: 0;\n  top: 0;\n  height: 100%;\n  width: calc(24px * var(--ds-sf, 1));\n  padding: 0;\n  border: 0;\n  background: transparent;\n  color: var(--ds-input-reveal-color);\n  cursor: pointer;\n  display: grid;\n  place-items: center;\n}\n.password-visibility:focus-visible {\n  outline: 1px solid currentColor;\n  outline-offset: -1px;\n}\n.password-visibility:disabled {\n  cursor: default;\n  opacity: 0.5;\n}\n.password-visibility span {\n  display: block;\n  width: calc(16px * var(--ds-sf, 1));\n  height: calc(16px * var(--ds-sf, 1));\n  background: currentColor;\n  mask: var(--eye-icon) center / 100% 100% no-repeat;\n}\n@supports (corner-shape: squircle) {\n  :is(input, textarea) {\n    corner-shape: var(--ds-corner-shape, squircle);\n  }\n}\n\n/* Standard standalone form field and text-only inline editor. */\n:host([variant=\"field\"]) :is(input, textarea),\n:host([variant=\"plain\"]) :is(input, textarea) {\n  height: var(--ds-input-height, var(--ds-row-height));\n  padding: var(--ds-input-padding, 0 calc(4px * var(--ds-sf)));\n  border: var(--ds-input-border, 1px solid var(--ds-border-color));\n  border-radius: var(--ds-input-radius, var(--ds-radius));\n  background: var(--ds-input-field-background, var(--ds-fill));\n  color: var(--ds-text-color);\n  opacity: 1;\n  font-size: var(--ds-type-size-default);\n  line-height: var(--ds-type-lineheight-default);\n  letter-spacing: var(--ds-type-letterspacing-default);\n}\n/* A field is one control high (16px) on the lower sixteen of its square, as a button and a\n * select are: the square keeps the row it stands in, the face stands at its foot. */\n:host([variant=\"field\"]) {\n  --_field-height: var(--ds-input-height, var(--_input-height, var(--ds-control-height)));\n}\n:host([variant=\"field\"]) .input-container {\n  min-height: var(--ds-row-height);\n  align-items: flex-end;\n}\n:host([variant=\"field\"]) .password-visibility {\n  top: auto;\n  bottom: 0;\n  height: var(--_field-height);\n}\n:host([variant=\"field\"]) input {\n  height: var(--_field-height);\n  padding: var(--ds-input-padding, 0 var(--_input-padding, calc(4px * var(--ds-sf))));\n  border-radius: var(--ds-input-radius, var(--_input-radius, var(--ds-radius)));\n}\n:host([variant=\"plain\"]) :is(input, textarea) {\n  padding: var(--ds-input-padding, 0);\n  border: 0;\n  border-radius: 0;\n  background: transparent;\n}\n:host([variant=\"field\"]) :is(input, textarea)::placeholder,\n:host([variant=\"plain\"]) :is(input, textarea)::placeholder {\n  color: var(--ds-text-color-muted);\n  opacity: 1;\n}\n:host([variant=\"field\"]) :is(input, textarea):focus {\n  outline: 1px solid var(--ds-focus-ring);\n  outline-offset: -1px;\n}\n:host([variant=\"field\"]) :is(input, textarea):disabled,\n:host([variant=\"plain\"]) :is(input, textarea):disabled {\n  opacity: 0.5;\n}\n:host([variant=\"field\"]) :is(input, textarea).has-reveal,\n:host([variant=\"plain\"]) :is(input, textarea).has-reveal {\n  padding-inline-end: calc(24px * var(--ds-sf));\n}\n\n/* ---- Multiline ------------------------------------------------------- */\n/* A text area spans whole rows; shared input styles own its field treatment. */\n.row-metric {\n  position: absolute;\n  width: 0;\n  height: var(--ds-row-height);\n  overflow: hidden;\n  visibility: hidden;\n  pointer-events: none;\n}\n/* Pill-shaped corners would cut into multiline writing. A text area's field\n * corners stay small independently of the surrounding control preference. */\n:host([variant=\"field\"]) textarea {\n  border-radius: var(--ds-textarea-radius, calc(4px * var(--ds-sf)));\n  corner-shape: var(--ds-textarea-corner-shape, squircle);\n}\n:host([variant]) textarea {\n  height: var(--ds-textarea-height, calc(var(--ds-textarea-rows, 3) * var(--ds-row-height)));\n  min-height: var(--ds-row-height);\n  padding: var(--ds-textarea-padding, calc(4px * var(--ds-sf)));\n  resize: vertical;\n}\n:host([variant=\"plain\"]) textarea {\n  padding: 0;\n}\n:host([auto-grow]) textarea {\n  resize: none;\n}\n";
 //#endregion
 //#region DS1/2-core/ds-input.ts
 var _Input;
@@ -9305,7 +9586,7 @@ function formatNumberValue(value, places) {
 }
 //#endregion
 //#region DS1/2-core/styles/ds-number.css?inline
-var ds_number_default = "/* Shape is a surface preference. Keep these base lengths unscaled: each\n * component resolves them with its own --ds-sf in component-metrics.css. */\n[data-ds-shape=\"square\"],\n:host([data-ds-shape=\"square\"]) {\n  --ds-corner-size: 0px;\n  --ds-corner-shape: round;\n  --ds-button-inset: 0.5px;\n}\n\n[data-ds-shape=\"rounded\"],\n:host([data-ds-shape=\"rounded\"]) {\n  --ds-corner-size: 4px;\n  --ds-corner-shape: round;\n  --ds-button-inset: 2.5px;\n}\n\n[data-ds-shape=\"circular\"],\n:host([data-ds-shape=\"circular\"]) {\n  --ds-corner-size: 999px;\n  --ds-corner-shape: round;\n  --ds-button-inset: 5px;\n}\n\n/* A squircle needs twice an arc's radius for the same apparent corner.\n * Circular controls keep true semicircles even in a squircle browser. */\n@supports (corner-shape: squircle) {\n  [data-ds-shape=\"rounded\"],\n  :host([data-ds-shape=\"rounded\"]) {\n    --ds-corner-size: 8px;\n    --ds-corner-shape: squircle;\n  }\n}\n/* Resolve dimensions where a component is drawn. Inherited calc() values have\n * already used their ancestor's scale. Base tokens stay unscaled and inherit;\n * resolved tokens can still be overridden directly on a component.\n * data-ds-surface gives ordinary layout elements the same scaled measures.\n */\n:root,\n:host,\n:where([data-ds-surface]) {\n  --ds-unit: calc(var(--ds-1, 20px) * var(--ds-sf, 1));\n  --ds-control-height: calc(var(--ds-control-size, var(--ds-08, 16px)) * var(--ds-sf, 1));\n  --ds-row-height: calc(var(--ds-row-size, var(--ds-1, 20px)) * var(--ds-sf, 1));\n  --ds-type-size-default: calc(var(--ds-text-size, 14px) * var(--ds-sf, 1));\n  --ds-type-size-small: calc(var(--ds-small-text-size, 10px) * var(--ds-sf, 1));\n  --ds-type-size-heading: calc(var(--ds-heading-text-size, 13px) * var(--ds-sf, 1));\n  --ds-type-size-display: calc(var(--ds-display-text-size, 20px) * var(--ds-sf, 1));\n  --ds-type-lineheight-default: calc(var(--ds-text-leading, 16px) * var(--ds-sf, 1));\n  --ds-type-letterspacing-default: calc(var(--ds-text-tracking, -0.3px) * var(--ds-sf, 1));\n  --ds-radius: calc(var(--ds-corner-size, 4px) * var(--ds-sf, 1));\n  --ds-radius-card: calc(var(--ds-card-corner-size, 4px) * var(--ds-sf, 1));\n}\n/* ds-number.css */\n/* A number field: one square high, its face one control high on the lower sixteen, a whole number of squares wide. */\n\n:host {\n  --ds-number-squares: 4;\n  display: inline-flex;\n  align-items: flex-end;\n  vertical-align: bottom;\n  box-sizing: border-box;\n  width: calc(var(--ds-number-squares) * var(--ds-unit));\n  min-width: 0;\n  height: var(--ds-unit);\n}\n\n:host([hidden]) {\n  display: none;\n}\n\n.face {\n  display: flex;\n  align-items: stretch;\n  box-sizing: border-box;\n  width: 100%;\n  height: var(--ds-control-height);\n  border-radius: var(--ds-input-radius, var(--ds-radius));\n  corner-shape: var(--ds-corner-shape, round);\n  background: var(--ds-number-background, var(--ds-input-background));\n  color: var(--ds-number-color, var(--ds-input-color));\n  font-family: var(--ds-typeface-regular);\n  font-feature-settings: var(--ds-font-features);\n  font-size: var(--ds-type-size-default);\n  font-weight: var(--ds-type-weight-default);\n  letter-spacing: var(--ds-type-letterspacing-default);\n  line-height: var(--ds-control-height);\n  font-variant-numeric: tabular-nums;\n  overflow: hidden;\n}\n\n/* Keyboard focus and typing ring the face inside its edge, so nothing around it moves. */\n.face:focus-within {\n  outline: 1px solid var(--ds-number-focus, var(--ds-focus-ring));\n  outline-offset: -1px;\n}\n\n/*\n * The lead: a short label 4px in, or an icon on the face's first sixteen, in the title grey, a control\n * square at least, the handle a drag scrubs. The value starts 4px after it, so after a letter or an\n * icon it stands on the next square, as words do after a picture.\n */\n.lead {\n  flex: none;\n  display: inline-flex;\n  align-items: center;\n  justify-content: flex-start;\n  box-sizing: border-box;\n  min-width: var(--ds-control-height);\n  padding: 0 0 0 calc(4px * var(--ds-sf, 1));\n  color: var(--ds-number-lead-color, var(--ds-title-color));\n  --ds-icon-color: currentColor;\n  cursor: ew-resize;\n  touch-action: none;\n  user-select: none;\n  -webkit-user-select: none;\n}\n\n.lead:has(ds-icon) {\n  justify-content: center;\n  padding: 0;\n}\n\n.lead__words {\n  white-space: nowrap;\n}\n\n:host(:hover:not([disabled]):not([readonly])) .lead,\n.face.scrubbing .lead {\n  color: var(--ds-number-color, var(--ds-input-color));\n}\n\ninput {\n  flex: 1 1 auto;\n  min-width: 0;\n  margin: 0;\n  border: 0;\n  padding: 0 calc(4px * var(--ds-sf, 1));\n  background: transparent;\n  color: inherit;\n  font: inherit;\n  letter-spacing: inherit;\n  line-height: inherit;\n  font-variant-numeric: tabular-nums;\n  outline: none;\n  text-overflow: clip;\n}\n\ninput::selection {\n  background: color-mix(in srgb, var(--ds-number-focus, var(--ds-focus-ring)) 30%, transparent);\n}\n\n.unit {\n  flex: none;\n  padding-inline-end: calc(4px * var(--ds-sf, 1));\n  color: var(--ds-number-lead-color, var(--ds-title-color));\n  white-space: nowrap;\n}\n\n:host([disabled]) .face {\n  opacity: 0.5;\n}\n\n:host([disabled]) .lead,\n:host([readonly]) .lead {\n  cursor: default;\n}\n\n:host([disabled]) input {\n  cursor: not-allowed;\n}\n\n/* With the value as the handle (`drag=\"value\"`), the field drags up and down until it is typed in. */\n:host([drag=\"value\"]:not([disabled]):not([readonly])) .face:not(:focus-within),\n:host([drag=\"value\"]:not([disabled]):not([readonly])) .face:not(:focus-within) :is(.lead, input) {\n  cursor: ns-resize;\n  touch-action: none;\n}\n";
+var ds_number_default = "/* Shape is a surface preference. Keep these base lengths unscaled: each\n * component resolves them with its own --ds-sf in component-metrics.css. */\n[data-ds-shape=\"square\"],\n:host([data-ds-shape=\"square\"]) {\n  --ds-corner-size: 0px;\n  --ds-corner-shape: round;\n  --ds-button-inset: 0.5px;\n}\n\n[data-ds-shape=\"rounded\"],\n:host([data-ds-shape=\"rounded\"]) {\n  --ds-corner-size: 4px;\n  --ds-corner-shape: round;\n  --ds-button-inset: 2.5px;\n}\n\n[data-ds-shape=\"circular\"],\n:host([data-ds-shape=\"circular\"]) {\n  --ds-corner-size: 999px;\n  --ds-corner-shape: round;\n  --ds-button-inset: 5px;\n}\n\n/* A squircle needs twice an arc's radius for the same apparent corner.\n * Circular controls keep true semicircles even in a squircle browser. */\n@supports (corner-shape: squircle) {\n  [data-ds-shape=\"rounded\"],\n  :host([data-ds-shape=\"rounded\"]) {\n    --ds-corner-size: 8px;\n    --ds-corner-shape: squircle;\n  }\n}\n/* Resolve dimensions where a component is drawn. Inherited calc() values have\n * already used their ancestor's scale. Base tokens stay unscaled and inherit;\n * resolved tokens can still be overridden directly on a component.\n * data-ds-surface gives ordinary layout elements the same scaled measures.\n */\n:root,\n:host,\n:where([data-ds-surface]) {\n  --ds-unit: calc(var(--ds-1, 20px) * var(--ds-sf, 1));\n  --ds-control-height: calc(var(--ds-control-size, var(--ds-08, 16px)) * var(--ds-sf, 1));\n  --ds-row-height: calc(var(--ds-row-size, var(--ds-1, 20px)) * var(--ds-sf, 1));\n  --ds-type-size-default: calc(var(--ds-text-size, 14px) * var(--ds-sf, 1));\n  --ds-type-size-small: calc(var(--ds-small-text-size, 10px) * var(--ds-sf, 1));\n  --ds-type-size-heading: calc(var(--ds-heading-text-size, 13px) * var(--ds-sf, 1));\n  --ds-type-size-display: calc(var(--ds-display-text-size, 20px) * var(--ds-sf, 1));\n  --ds-type-lineheight-default: calc(var(--ds-text-leading, 16px) * var(--ds-sf, 1));\n  --ds-type-letterspacing-default: calc(var(--ds-text-tracking, -0.3px) * var(--ds-sf, 1));\n  --ds-radius: calc(var(--ds-corner-size, 4px) * var(--ds-sf, 1));\n  --ds-radius-card: calc(var(--ds-card-corner-size, 4px) * var(--ds-sf, 1));\n}\n/* ds-number.css */\n/* A number field: one square high, its face one control high on the lower sixteen, a whole number of squares wide. */\n\n:host {\n  --ds-number-squares: 4;\n  display: inline-flex;\n  align-items: flex-end;\n  vertical-align: bottom;\n  box-sizing: border-box;\n  width: calc(var(--ds-number-squares) * var(--ds-unit));\n  min-width: 0;\n  height: var(--ds-unit);\n}\n\n:host([hidden]) {\n  display: none;\n}\n\n.face {\n  display: flex;\n  align-items: stretch;\n  box-sizing: border-box;\n  width: 100%;\n  height: var(--ds-control-height);\n  border-radius: var(--ds-input-radius, var(--ds-radius));\n  corner-shape: var(--ds-corner-shape, round);\n  background: var(--ds-number-background, var(--ds-input-background));\n  color: var(--ds-number-color, var(--ds-input-color));\n  font-family: \"Inter Arrows\", var(--ds-typeface-regular);\n  font-feature-settings: var(--ds-font-features);\n  font-size: var(--ds-type-size-default);\n  font-weight: var(--ds-type-weight-default);\n  letter-spacing: var(--ds-type-letterspacing-default);\n  line-height: var(--ds-control-height);\n  font-variant-numeric: tabular-nums;\n  overflow: hidden;\n}\n\n/* Keyboard focus and typing ring the face inside its edge, so nothing around it moves. */\n.face:focus-within {\n  outline: 1px solid var(--ds-number-focus, var(--ds-focus-ring));\n  outline-offset: -1px;\n}\n\n/*\n * The lead: a short label 4px in, or an icon on the face's first sixteen, in the title grey, a control\n * square at least, the handle a drag scrubs. The value starts 4px after it, so after a letter or an\n * icon it stands on the next square, as words do after a picture.\n */\n.lead {\n  flex: none;\n  display: inline-flex;\n  align-items: center;\n  justify-content: flex-start;\n  box-sizing: border-box;\n  min-width: var(--ds-control-height);\n  padding: 0 0 0 calc(4px * var(--ds-sf, 1));\n  color: var(--ds-number-lead-color, var(--ds-title-color));\n  --ds-icon-color: currentColor;\n  cursor: ew-resize;\n  touch-action: none;\n  user-select: none;\n  -webkit-user-select: none;\n}\n\n.lead:has(ds-icon) {\n  justify-content: center;\n  padding: 0;\n}\n\n.lead__words {\n  white-space: nowrap;\n}\n\n:host(:hover:not([disabled]):not([readonly])) .lead,\n.face.scrubbing .lead {\n  color: var(--ds-number-color, var(--ds-input-color));\n}\n\ninput {\n  flex: 1 1 auto;\n  min-width: 0;\n  margin: 0;\n  border: 0;\n  padding: 0 calc(4px * var(--ds-sf, 1));\n  background: transparent;\n  color: inherit;\n  font: inherit;\n  letter-spacing: inherit;\n  line-height: inherit;\n  font-variant-numeric: tabular-nums;\n  outline: none;\n  text-overflow: clip;\n}\n\ninput::selection {\n  background: color-mix(in srgb, var(--ds-number-focus, var(--ds-focus-ring)) 30%, transparent);\n}\n\n.unit {\n  flex: none;\n  padding-inline-end: calc(4px * var(--ds-sf, 1));\n  color: var(--ds-number-lead-color, var(--ds-title-color));\n  white-space: nowrap;\n}\n\n:host([disabled]) .face {\n  opacity: 0.5;\n}\n\n:host([disabled]) .lead,\n:host([readonly]) .lead {\n  cursor: default;\n}\n\n:host([disabled]) input {\n  cursor: not-allowed;\n}\n\n/* With the value as the handle (`drag=\"value\"`), the field drags up and down until it is typed in. */\n:host([drag=\"value\"]:not([disabled]):not([readonly])) .face:not(:focus-within),\n:host([drag=\"value\"]:not([disabled]):not([readonly])) .face:not(:focus-within) :is(.lead, input) {\n  cursor: ns-resize;\n  touch-action: none;\n}\n";
 //#endregion
 //#region DS1/2-core/ds-number.ts
 var _NumberField;
@@ -9632,7 +9913,7 @@ _NumberField.properties = {
 define("ds-number", NumberField);
 //#endregion
 //#region DS1/2-core/styles/ds-composer.css?inline
-var ds_composer_default = "/* Shape is a surface preference. Keep these base lengths unscaled: each\n * component resolves them with its own --ds-sf in component-metrics.css. */\n[data-ds-shape=\"square\"],\n:host([data-ds-shape=\"square\"]) {\n  --ds-corner-size: 0px;\n  --ds-corner-shape: round;\n  --ds-button-inset: 0.5px;\n}\n\n[data-ds-shape=\"rounded\"],\n:host([data-ds-shape=\"rounded\"]) {\n  --ds-corner-size: 4px;\n  --ds-corner-shape: round;\n  --ds-button-inset: 2.5px;\n}\n\n[data-ds-shape=\"circular\"],\n:host([data-ds-shape=\"circular\"]) {\n  --ds-corner-size: 999px;\n  --ds-corner-shape: round;\n  --ds-button-inset: 5px;\n}\n\n/* A squircle needs twice an arc's radius for the same apparent corner.\n * Circular controls keep true semicircles even in a squircle browser. */\n@supports (corner-shape: squircle) {\n  [data-ds-shape=\"rounded\"],\n  :host([data-ds-shape=\"rounded\"]) {\n    --ds-corner-size: 8px;\n    --ds-corner-shape: squircle;\n  }\n}\n/* Resolve dimensions where a component is drawn. Inherited calc() values have\n * already used their ancestor's scale. Base tokens stay unscaled and inherit;\n * resolved tokens can still be overridden directly on a component.\n * data-ds-surface gives ordinary layout elements the same scaled measures.\n */\n:root,\n:host,\n:where([data-ds-surface]) {\n  --ds-unit: calc(var(--ds-1, 20px) * var(--ds-sf, 1));\n  --ds-control-height: calc(var(--ds-control-size, var(--ds-08, 16px)) * var(--ds-sf, 1));\n  --ds-row-height: calc(var(--ds-row-size, var(--ds-1, 20px)) * var(--ds-sf, 1));\n  --ds-type-size-default: calc(var(--ds-text-size, 14px) * var(--ds-sf, 1));\n  --ds-type-size-small: calc(var(--ds-small-text-size, 10px) * var(--ds-sf, 1));\n  --ds-type-size-heading: calc(var(--ds-heading-text-size, 13px) * var(--ds-sf, 1));\n  --ds-type-size-display: calc(var(--ds-display-text-size, 20px) * var(--ds-sf, 1));\n  --ds-type-lineheight-default: calc(var(--ds-text-leading, 16px) * var(--ds-sf, 1));\n  --ds-type-letterspacing-default: calc(var(--ds-text-tracking, -0.3px) * var(--ds-sf, 1));\n  --ds-radius: calc(var(--ds-corner-size, 4px) * var(--ds-sf, 1));\n  --ds-radius-card: calc(var(--ds-card-corner-size, 4px) * var(--ds-sf, 1));\n}\n:host { display: block; position: relative; width: 100%; min-width: 0; }\n:host([hidden]) { display: none !important; }\n.row-metric { position: absolute; width: 0; height: var(--ds-row-height); visibility: hidden; pointer-events: none; }\n::slotted(textarea), .mirror {\n  box-sizing: border-box !important;\n  margin: 0 !important;\n  padding: calc(4px * var(--ds-sf)) !important;\n  border: 1px solid var(--ds-border-color) !important;\n  border-radius: calc(4px * var(--ds-sf)) !important;\n  font-family: var(--ds-typeface-regular) !important;\n  font-size: var(--ds-type-size-default) !important;\n  font-weight: var(--ds-type-weight-default) !important;\n  line-height: var(--ds-type-lineheight-default) !important;\n  letter-spacing: var(--ds-type-letterspacing-default) !important;\n  text-align: start !important;\n  text-indent: 0 !important;\n  text-transform: none !important;\n  white-space: pre-wrap !important;\n  overflow-wrap: break-word !important;\n  word-break: normal !important;\n  tab-size: 8 !important;\n  color: var(--ds-text-color) !important;\n}\n::slotted(textarea) {\n  display: block !important;\n  position: relative !important;\n  width: 100% !important;\n  min-width: 0 !important;\n  max-width: 100% !important;\n  height: var(--composer-height, calc(var(--composer-rows, 3) * var(--ds-row-height))) !important;\n  min-height: var(--ds-row-height) !important;\n  max-height: none !important;\n  overflow-y: var(--composer-overflow, auto) !important;\n  background: var(--ds-fill) !important;\n  caret-color: var(--ds-text-color) !important;\n  box-shadow: none !important;\n  outline: none !important;\n  resize: vertical !important;\n}\n::slotted(textarea:focus-visible) { outline: 1px solid var(--ds-focus-ring) !important; outline-offset: -1px !important; }\n::slotted(textarea:disabled) { opacity: .5 !important; cursor: not-allowed !important; resize: none !important; }\n.mirror { position: absolute; top: 0; left: 0; overflow: hidden; pointer-events: none; border-color: transparent !important; }\nmark { padding: 0; margin: 0; border: 0; font: inherit; letter-spacing: inherit; color: color-mix(in srgb, var(--composer-highlight-color, var(--ds-accent-color)) 30%, var(--ds-text-color)); background: transparent; }\n/* A filled highlight: the colour behind the words, which keep the text colour.\n   Half the colour on light paper and under a third on dark keeps every palette\n   colour at 4.5:1 or more against the words, and a pale accent still shows. */\nmark.fill {\n  color: var(--ds-text-color);\n  background: light-dark(\n    color-mix(in srgb, var(--composer-highlight-color, var(--ds-accent-color)) 50%, transparent),\n    color-mix(in srgb, var(--composer-highlight-color, var(--ds-accent-color)) 30%, transparent)\n  );\n  border-radius: calc(2px * var(--ds-sf));\n  -webkit-box-decoration-break: clone;\n  box-decoration-break: clone;\n}\n:host(:not([data-highlighted])) .mirror { display: none; }\n:host([data-highlighted]) ::slotted(textarea) { color: transparent !important; -webkit-text-fill-color: transparent !important; }\n:host(:has(> textarea:disabled)) .mirror { opacity: .5; }\n:host([variant=\"plain\"]) ::slotted(textarea), :host([variant=\"plain\"]) .mirror { padding: 0 !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; }\n:host([auto-grow]) ::slotted(textarea) { resize: none !important; }\n:host([data-nowrap]) ::slotted(textarea), :host([data-nowrap]) .mirror { white-space: pre !important; overflow-wrap: normal !important; }\n@media (forced-colors: active) {\n  .mirror { display: none !important; }\n  :host([data-highlighted]) ::slotted(textarea) { color: CanvasText !important; -webkit-text-fill-color: CanvasText !important; caret-color: CanvasText !important; }\n}\n";
+var ds_composer_default = "/* Shape is a surface preference. Keep these base lengths unscaled: each\n * component resolves them with its own --ds-sf in component-metrics.css. */\n[data-ds-shape=\"square\"],\n:host([data-ds-shape=\"square\"]) {\n  --ds-corner-size: 0px;\n  --ds-corner-shape: round;\n  --ds-button-inset: 0.5px;\n}\n\n[data-ds-shape=\"rounded\"],\n:host([data-ds-shape=\"rounded\"]) {\n  --ds-corner-size: 4px;\n  --ds-corner-shape: round;\n  --ds-button-inset: 2.5px;\n}\n\n[data-ds-shape=\"circular\"],\n:host([data-ds-shape=\"circular\"]) {\n  --ds-corner-size: 999px;\n  --ds-corner-shape: round;\n  --ds-button-inset: 5px;\n}\n\n/* A squircle needs twice an arc's radius for the same apparent corner.\n * Circular controls keep true semicircles even in a squircle browser. */\n@supports (corner-shape: squircle) {\n  [data-ds-shape=\"rounded\"],\n  :host([data-ds-shape=\"rounded\"]) {\n    --ds-corner-size: 8px;\n    --ds-corner-shape: squircle;\n  }\n}\n/* Resolve dimensions where a component is drawn. Inherited calc() values have\n * already used their ancestor's scale. Base tokens stay unscaled and inherit;\n * resolved tokens can still be overridden directly on a component.\n * data-ds-surface gives ordinary layout elements the same scaled measures.\n */\n:root,\n:host,\n:where([data-ds-surface]) {\n  --ds-unit: calc(var(--ds-1, 20px) * var(--ds-sf, 1));\n  --ds-control-height: calc(var(--ds-control-size, var(--ds-08, 16px)) * var(--ds-sf, 1));\n  --ds-row-height: calc(var(--ds-row-size, var(--ds-1, 20px)) * var(--ds-sf, 1));\n  --ds-type-size-default: calc(var(--ds-text-size, 14px) * var(--ds-sf, 1));\n  --ds-type-size-small: calc(var(--ds-small-text-size, 10px) * var(--ds-sf, 1));\n  --ds-type-size-heading: calc(var(--ds-heading-text-size, 13px) * var(--ds-sf, 1));\n  --ds-type-size-display: calc(var(--ds-display-text-size, 20px) * var(--ds-sf, 1));\n  --ds-type-lineheight-default: calc(var(--ds-text-leading, 16px) * var(--ds-sf, 1));\n  --ds-type-letterspacing-default: calc(var(--ds-text-tracking, -0.3px) * var(--ds-sf, 1));\n  --ds-radius: calc(var(--ds-corner-size, 4px) * var(--ds-sf, 1));\n  --ds-radius-card: calc(var(--ds-card-corner-size, 4px) * var(--ds-sf, 1));\n}\n:host { display: block; position: relative; width: 100%; min-width: 0; }\n:host([hidden]) { display: none !important; }\n.row-metric { position: absolute; width: 0; height: var(--ds-row-height); visibility: hidden; pointer-events: none; }\n::slotted(textarea), .mirror {\n  box-sizing: border-box !important;\n  margin: 0 !important;\n  padding: calc(4px * var(--ds-sf)) !important;\n  border: 1px solid var(--ds-border-color) !important;\n  border-radius: calc(4px * var(--ds-sf)) !important;\n  font-family: \"Inter Arrows\", var(--ds-typeface-regular) !important;\n  font-size: var(--ds-type-size-default) !important;\n  font-weight: var(--ds-type-weight-default) !important;\n  line-height: var(--ds-type-lineheight-default) !important;\n  letter-spacing: var(--ds-type-letterspacing-default) !important;\n  text-align: start !important;\n  text-indent: 0 !important;\n  text-transform: none !important;\n  white-space: pre-wrap !important;\n  overflow-wrap: break-word !important;\n  word-break: normal !important;\n  tab-size: 8 !important;\n  color: var(--ds-text-color) !important;\n}\n::slotted(textarea) {\n  display: block !important;\n  position: relative !important;\n  width: 100% !important;\n  min-width: 0 !important;\n  max-width: 100% !important;\n  height: var(--composer-height, calc(var(--composer-rows, 3) * var(--ds-row-height))) !important;\n  min-height: var(--ds-row-height) !important;\n  max-height: none !important;\n  overflow-y: var(--composer-overflow, auto) !important;\n  background: var(--ds-fill) !important;\n  caret-color: var(--ds-text-color) !important;\n  box-shadow: none !important;\n  outline: none !important;\n  resize: vertical !important;\n}\n::slotted(textarea:focus-visible) { outline: 1px solid var(--ds-focus-ring) !important; outline-offset: -1px !important; }\n::slotted(textarea:disabled) { opacity: .5 !important; cursor: not-allowed !important; resize: none !important; }\n.mirror { position: absolute; top: 0; left: 0; overflow: hidden; pointer-events: none; border-color: transparent !important; }\nmark { padding: 0; margin: 0; border: 0; font: inherit; letter-spacing: inherit; color: color-mix(in srgb, var(--composer-highlight-color, var(--ds-accent-color)) 30%, var(--ds-text-color)); background: transparent; }\n/* A filled highlight: the colour behind the words, which keep the text colour.\n   Half the colour on light paper and under a third on dark keeps every palette\n   colour at 4.5:1 or more against the words, and a pale accent still shows. */\nmark.fill {\n  color: var(--ds-text-color);\n  background: light-dark(\n    color-mix(in srgb, var(--composer-highlight-color, var(--ds-accent-color)) 50%, transparent),\n    color-mix(in srgb, var(--composer-highlight-color, var(--ds-accent-color)) 30%, transparent)\n  );\n  border-radius: calc(2px * var(--ds-sf));\n  -webkit-box-decoration-break: clone;\n  box-decoration-break: clone;\n}\n:host(:not([data-highlighted])) .mirror { display: none; }\n:host([data-highlighted]) ::slotted(textarea) { color: transparent !important; -webkit-text-fill-color: transparent !important; }\n:host(:has(> textarea:disabled)) .mirror { opacity: .5; }\n:host([variant=\"plain\"]) ::slotted(textarea), :host([variant=\"plain\"]) .mirror { padding: 0 !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; }\n:host([auto-grow]) ::slotted(textarea) { resize: none !important; }\n:host([data-nowrap]) ::slotted(textarea), :host([data-nowrap]) .mirror { white-space: pre !important; overflow-wrap: normal !important; }\n@media (forced-colors: active) {\n  .mirror { display: none !important; }\n  :host([data-highlighted]) ::slotted(textarea) { color: CanvasText !important; -webkit-text-fill-color: CanvasText !important; caret-color: CanvasText !important; }\n}\n";
 //#endregion
 //#region DS1/2-core/styles/ds-composer-frame.css?inline
 var ds_composer_frame_default = "/* Native pseudo-elements cannot be reached through ::slotted in every engine. */\nds-composer > textarea::placeholder {\n  color: var(--ds-text-color-muted) !important;\n  -webkit-text-fill-color: var(--ds-text-color-muted) !important;\n  opacity: 1 !important;\n}\nds-composer > textarea::selection {\n  background: var(--ds-accent-color);\n  color: var(--ds-text-color);\n  -webkit-text-fill-color: var(--ds-text-color);\n}\n";
@@ -10030,7 +10311,7 @@ var toast = Object.assign((title, options) => show(title, "default", options), {
 });
 //#endregion
 //#region DS1/2-core/styles/ds-toast.css?inline
-var ds_toast_default = "/* Shape is a surface preference. Keep these base lengths unscaled: each\n * component resolves them with its own --ds-sf in component-metrics.css. */\n[data-ds-shape=\"square\"],\n:host([data-ds-shape=\"square\"]) {\n  --ds-corner-size: 0px;\n  --ds-corner-shape: round;\n  --ds-button-inset: 0.5px;\n}\n\n[data-ds-shape=\"rounded\"],\n:host([data-ds-shape=\"rounded\"]) {\n  --ds-corner-size: 4px;\n  --ds-corner-shape: round;\n  --ds-button-inset: 2.5px;\n}\n\n[data-ds-shape=\"circular\"],\n:host([data-ds-shape=\"circular\"]) {\n  --ds-corner-size: 999px;\n  --ds-corner-shape: round;\n  --ds-button-inset: 5px;\n}\n\n/* A squircle needs twice an arc's radius for the same apparent corner.\n * Circular controls keep true semicircles even in a squircle browser. */\n@supports (corner-shape: squircle) {\n  [data-ds-shape=\"rounded\"],\n  :host([data-ds-shape=\"rounded\"]) {\n    --ds-corner-size: 8px;\n    --ds-corner-shape: squircle;\n  }\n}\n/* Resolve dimensions where a component is drawn. Inherited calc() values have\n * already used their ancestor's scale. Base tokens stay unscaled and inherit;\n * resolved tokens can still be overridden directly on a component.\n * data-ds-surface gives ordinary layout elements the same scaled measures.\n */\n:root,\n:host,\n:where([data-ds-surface]) {\n  --ds-unit: calc(var(--ds-1, 20px) * var(--ds-sf, 1));\n  --ds-control-height: calc(var(--ds-control-size, var(--ds-08, 16px)) * var(--ds-sf, 1));\n  --ds-row-height: calc(var(--ds-row-size, var(--ds-1, 20px)) * var(--ds-sf, 1));\n  --ds-type-size-default: calc(var(--ds-text-size, 14px) * var(--ds-sf, 1));\n  --ds-type-size-small: calc(var(--ds-small-text-size, 10px) * var(--ds-sf, 1));\n  --ds-type-size-heading: calc(var(--ds-heading-text-size, 13px) * var(--ds-sf, 1));\n  --ds-type-size-display: calc(var(--ds-display-text-size, 20px) * var(--ds-sf, 1));\n  --ds-type-lineheight-default: calc(var(--ds-text-leading, 16px) * var(--ds-sf, 1));\n  --ds-type-letterspacing-default: calc(var(--ds-text-tracking, -0.3px) * var(--ds-sf, 1));\n  --ds-radius: calc(var(--ds-corner-size, 4px) * var(--ds-sf, 1));\n  --ds-radius-card: calc(var(--ds-card-corner-size, 4px) * var(--ds-sf, 1));\n}\n/* Toast, based on Sonner (https://sonner.emilkowal.ski, MIT licence).\n * Sonner's stack, drawn as Design system 1's label: an ink chip one control\n * high per line of words, the tooltip's colours, no line and no shadow. The\n * pile advances one square per toast (a control and the rest of the square),\n * one square clear of the edge. Sonner's 400ms transitions on transform and\n * opacity only. */\n:host {\n  --ds-toast-width: calc(16 * var(--ds-unit));\n  --ds-toast-offset: var(--ds-unit);\n  --ds-toast-gap: calc(var(--ds-unit) - var(--ds-control-height));\n  --ds-toast-background: var(--ds-tooltip-background, light-dark(var(--ds-black, #2a2a2a), var(--ds-white, #ffffff)));\n  --ds-toast-color: var(--ds-tooltip-color, light-dark(var(--ds-white, #ffffff), var(--ds-black, #2a2a2a)));\n  display: contents;\n}\n\nsection { display: contents; }\n\nol {\n  --lift: -1;\n  position: fixed;\n  z-index: 2147483000;\n  /* A popover in the top layer (above an open sheet or modal): none of the browser's own frame. */\n  inset: auto;\n  overflow: visible;\n  border: 0;\n  background: transparent;\n  color: inherit;\n  box-sizing: border-box;\n  width: min(var(--ds-toast-width), calc(100% - 2 * var(--ds-toast-offset)));\n  height: calc(var(--height) + var(--gaps) * var(--ds-toast-gap));\n  margin: 0;\n  padding: 0;\n  list-style: none;\n  outline: none;\n  pointer-events: none;\n}\n/* In the window, the offset clears the phone's safe area too. */\nol[data-y=\"top\"] { --lift: 1; top: calc(var(--ds-toast-offset) + env(safe-area-inset-top, 0px)); }\nol[data-y=\"bottom\"] { bottom: calc(var(--ds-toast-offset) + env(safe-area-inset-bottom, 0px)); }\nol[data-x=\"left\"] { left: var(--ds-toast-offset); }\nol[data-x=\"right\"] { right: var(--ds-toast-offset); }\nol[data-x=\"center\"] { left: 50%; transform: translateX(-50%); }\n/* Contained: within the nearest positioned ancestor instead of the window. */\n:host([contained]) ol { position: absolute; z-index: var(--ds-toast-z-index, 60); }\n:host([contained]) ol[data-y=\"top\"] { top: var(--ds-toast-offset); }\n:host([contained]) ol[data-y=\"bottom\"] { bottom: var(--ds-toast-offset); }\n\n.toast {\n  --swipe: 0px;\n  position: absolute;\n  left: 0;\n  right: 0;\n  box-sizing: border-box;\n  width: max-content;\n  max-width: 100%;\n  overflow: hidden;\n  border-radius: var(--ds-radius);\n  background: var(--ds-toast-background);\n  color: var(--ds-toast-color);\n  font-family: var(--ds-typeface-regular);\n  font-feature-settings: var(--ds-font-features);\n  font-size: var(--ds-type-size-default);\n  line-height: var(--ds-control-height);\n  letter-spacing: var(--ds-type-letterspacing-default);\n  outline: none;\n  touch-action: none;\n  user-select: none;\n  pointer-events: auto;\n  opacity: 0;\n  transition: transform 400ms ease, opacity 400ms ease;\n}\nol[data-y=\"bottom\"] .toast { bottom: 0; }\nol[data-y=\"top\"] .toast { top: 0; }\nol[data-x=\"center\"] .toast { margin-inline: auto; }\nol[data-x=\"left\"] .toast { margin-right: auto; }\nol[data-x=\"right\"] .toast { margin-left: auto; }\n.toast:focus-visible { outline: 2px solid var(--ds-focus-ring); outline-offset: 1px; }\n\n/* Entering: from beyond the edge, then into the stack. */\n.toast[data-mounted=\"false\"] { transform: translateY(calc(var(--lift) * -100%)); }\n.toast[data-mounted=\"true\"] { opacity: 1; }\n\n/* Collapsed: the front toast, and the next ones peeking out a little smaller. */\nol[data-expanded=\"false\"] .toast[data-mounted=\"true\"] {\n  transform: translateY(calc(var(--lift) * var(--index) * var(--ds-toast-gap) + var(--swipe))) scale(calc(1 - var(--index) * 0.05));\n}\nol[data-expanded=\"false\"] .toast[data-front=\"false\"] { height: var(--front-height); }\nol[data-expanded=\"false\"] .toast[data-front=\"false\"] .body { opacity: 0; }\n\n/* Expanded: each toast after the ones in front of it. */\nol[data-expanded=\"true\"] .toast[data-mounted=\"true\"] {\n  transform: translateY(calc(var(--lift) * (var(--offset) + var(--index) * var(--ds-toast-gap)) + var(--swipe)));\n}\n\n.toast[data-visible=\"false\"] { opacity: 0; pointer-events: none; }\n.toast[data-swiping=\"true\"] { transition: none; }\n\n/* Leaving: the front one back over its edge, the others fade where they are. */\n.toast[data-removed=\"true\"] { opacity: 0; pointer-events: none; }\n.toast[data-removed=\"true\"][data-front=\"true\"] { transform: translateY(calc(var(--lift) * -100%)); }\n.toast[data-swipe-out=\"true\"] { transform: translateY(calc(var(--swipe) + var(--lift) * -100%)); }\n\n/* Words padded 4px from the chip's edge; each line one control high. */\n.body {\n  display: flex;\n  align-items: flex-start;\n  gap: calc(4px * var(--ds-sf));\n  box-sizing: border-box;\n  min-height: var(--ds-control-height);\n  padding-inline: calc(4px * var(--ds-sf));\n  transition: opacity 400ms ease;\n}\n.icon {\n  display: inline-flex;\n  flex: 0 0 auto;\n  align-items: center;\n  justify-content: center;\n  width: var(--ds-control-height);\n  height: var(--ds-control-height);\n  --ds-icon-color: currentColor;\n}\n.icon:first-child { margin-left: calc(-4px * var(--ds-sf)); }\n/* The page toaster (0-face/toaster.ts) draws its icons as inline SVG, at ds-icon's size. */\n.icon > svg, .close > svg { width: calc(14px * var(--ds-sf)); height: calc(14px * var(--ds-sf)); }\n.content { flex: 1 1 auto; min-width: 0; }\n.title, .description { white-space: normal; overflow-wrap: anywhere; }\n.description { opacity: 0.7; }\n\n/* Actions are words of the same size, underlined as text buttons are. */\n.button {\n  flex: 0 0 auto;\n  margin: 0 0 0 calc(4px * var(--ds-sf));\n  padding: 0;\n  border: 0;\n  background: none;\n  color: inherit;\n  font: inherit;\n  letter-spacing: inherit;\n  text-decoration: underline;\n  text-underline-offset: 2px;\n  cursor: pointer;\n}\na.button { display: inline-block; }\n.button.cancel { opacity: 0.7; }\n.button:focus-visible, .close:focus-visible { outline: 1px solid currentColor; outline-offset: 1px; border-radius: 1px; }\n\n.close {\n  display: inline-flex;\n  flex: 0 0 auto;\n  align-items: center;\n  justify-content: center;\n  width: var(--ds-control-height);\n  height: var(--ds-control-height);\n  margin: 0 calc(-4px * var(--ds-sf)) 0 0;\n  padding: 0;\n  border: 0;\n  background: none;\n  color: inherit;\n  cursor: pointer;\n  --ds-icon-color: currentColor;\n}\n\n.spinner {\n  width: calc(10px * var(--ds-sf));\n  height: calc(10px * var(--ds-sf));\n  box-sizing: border-box;\n  border: 1px solid color-mix(in srgb, currentColor 25%, transparent);\n  border-top-color: currentColor;\n  border-radius: 50%;\n  animation: ds-toast-spin 720ms linear infinite;\n}\n@keyframes ds-toast-spin { to { transform: rotate(360deg); } }\n\n/* Sonner's rich colours: a meaningful fill for each type, lettered in the ink. */\n:host([rich-colors]) .toast[data-type=\"success\"] { --ds-toast-background: var(--ds-apple-green); }\n:host([rich-colors]) .toast[data-type=\"info\"] { --ds-toast-background: var(--ds-zenith-blue); }\n:host([rich-colors]) .toast[data-type=\"warning\"] { --ds-toast-background: var(--ds-orange); }\n:host([rich-colors]) .toast[data-type=\"error\"] { --ds-toast-background: var(--ds-tuned-red); }\n:host([rich-colors]) .toast:is([data-type=\"success\"], [data-type=\"info\"], [data-type=\"warning\"], [data-type=\"error\"]) {\n  --ds-toast-color: var(--ds-black);\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .toast, .body { transition: none; }\n  .spinner { animation: none; }\n}\n";
+var ds_toast_default = "/* Shape is a surface preference. Keep these base lengths unscaled: each\n * component resolves them with its own --ds-sf in component-metrics.css. */\n[data-ds-shape=\"square\"],\n:host([data-ds-shape=\"square\"]) {\n  --ds-corner-size: 0px;\n  --ds-corner-shape: round;\n  --ds-button-inset: 0.5px;\n}\n\n[data-ds-shape=\"rounded\"],\n:host([data-ds-shape=\"rounded\"]) {\n  --ds-corner-size: 4px;\n  --ds-corner-shape: round;\n  --ds-button-inset: 2.5px;\n}\n\n[data-ds-shape=\"circular\"],\n:host([data-ds-shape=\"circular\"]) {\n  --ds-corner-size: 999px;\n  --ds-corner-shape: round;\n  --ds-button-inset: 5px;\n}\n\n/* A squircle needs twice an arc's radius for the same apparent corner.\n * Circular controls keep true semicircles even in a squircle browser. */\n@supports (corner-shape: squircle) {\n  [data-ds-shape=\"rounded\"],\n  :host([data-ds-shape=\"rounded\"]) {\n    --ds-corner-size: 8px;\n    --ds-corner-shape: squircle;\n  }\n}\n/* Resolve dimensions where a component is drawn. Inherited calc() values have\n * already used their ancestor's scale. Base tokens stay unscaled and inherit;\n * resolved tokens can still be overridden directly on a component.\n * data-ds-surface gives ordinary layout elements the same scaled measures.\n */\n:root,\n:host,\n:where([data-ds-surface]) {\n  --ds-unit: calc(var(--ds-1, 20px) * var(--ds-sf, 1));\n  --ds-control-height: calc(var(--ds-control-size, var(--ds-08, 16px)) * var(--ds-sf, 1));\n  --ds-row-height: calc(var(--ds-row-size, var(--ds-1, 20px)) * var(--ds-sf, 1));\n  --ds-type-size-default: calc(var(--ds-text-size, 14px) * var(--ds-sf, 1));\n  --ds-type-size-small: calc(var(--ds-small-text-size, 10px) * var(--ds-sf, 1));\n  --ds-type-size-heading: calc(var(--ds-heading-text-size, 13px) * var(--ds-sf, 1));\n  --ds-type-size-display: calc(var(--ds-display-text-size, 20px) * var(--ds-sf, 1));\n  --ds-type-lineheight-default: calc(var(--ds-text-leading, 16px) * var(--ds-sf, 1));\n  --ds-type-letterspacing-default: calc(var(--ds-text-tracking, -0.3px) * var(--ds-sf, 1));\n  --ds-radius: calc(var(--ds-corner-size, 4px) * var(--ds-sf, 1));\n  --ds-radius-card: calc(var(--ds-card-corner-size, 4px) * var(--ds-sf, 1));\n}\n/* Toast, based on Sonner (https://sonner.emilkowal.ski, MIT licence).\n * Sonner's stack, drawn as Design system 1's label: an ink chip one control\n * high per line of words, the tooltip's colours, no line and no shadow. The\n * pile advances one square per toast (a control and the rest of the square),\n * one square clear of the edge. Sonner's 400ms transitions on transform and\n * opacity only. */\n:host {\n  --ds-toast-width: calc(16 * var(--ds-unit));\n  --ds-toast-offset: var(--ds-unit);\n  --ds-toast-gap: calc(var(--ds-unit) - var(--ds-control-height));\n  --ds-toast-background: var(--ds-tooltip-background, light-dark(var(--ds-black, #2a2a2a), var(--ds-white, #ffffff)));\n  --ds-toast-color: var(--ds-tooltip-color, light-dark(var(--ds-white, #ffffff), var(--ds-black, #2a2a2a)));\n  display: contents;\n}\n\nsection { display: contents; }\n\nol {\n  --lift: -1;\n  position: fixed;\n  z-index: 2147483000;\n  /* A popover in the top layer (above an open sheet or modal): none of the browser's own frame. */\n  inset: auto;\n  overflow: visible;\n  border: 0;\n  background: transparent;\n  color: inherit;\n  box-sizing: border-box;\n  width: min(var(--ds-toast-width), calc(100% - 2 * var(--ds-toast-offset)));\n  height: calc(var(--height) + var(--gaps) * var(--ds-toast-gap));\n  margin: 0;\n  padding: 0;\n  list-style: none;\n  outline: none;\n  pointer-events: none;\n}\n/* In the window, the offset clears the phone's safe area too. */\nol[data-y=\"top\"] { --lift: 1; top: calc(var(--ds-toast-offset) + env(safe-area-inset-top, 0px)); }\nol[data-y=\"bottom\"] { bottom: calc(var(--ds-toast-offset) + env(safe-area-inset-bottom, 0px)); }\nol[data-x=\"left\"] { left: var(--ds-toast-offset); }\nol[data-x=\"right\"] { right: var(--ds-toast-offset); }\nol[data-x=\"center\"] { left: 50%; transform: translateX(-50%); }\n/* Contained: within the nearest positioned ancestor instead of the window. */\n:host([contained]) ol { position: absolute; z-index: var(--ds-toast-z-index, 60); }\n:host([contained]) ol[data-y=\"top\"] { top: var(--ds-toast-offset); }\n:host([contained]) ol[data-y=\"bottom\"] { bottom: var(--ds-toast-offset); }\n\n.toast {\n  --swipe: 0px;\n  position: absolute;\n  left: 0;\n  right: 0;\n  box-sizing: border-box;\n  width: max-content;\n  max-width: 100%;\n  overflow: hidden;\n  border-radius: var(--ds-radius);\n  background: var(--ds-toast-background);\n  color: var(--ds-toast-color);\n  font-family: \"Inter Arrows\", var(--ds-typeface-regular);\n  font-feature-settings: var(--ds-font-features);\n  font-size: var(--ds-type-size-default);\n  line-height: var(--ds-control-height);\n  letter-spacing: var(--ds-type-letterspacing-default);\n  outline: none;\n  touch-action: none;\n  user-select: none;\n  pointer-events: auto;\n  opacity: 0;\n  transition: transform 400ms ease, opacity 400ms ease;\n}\nol[data-y=\"bottom\"] .toast { bottom: 0; }\nol[data-y=\"top\"] .toast { top: 0; }\nol[data-x=\"center\"] .toast { margin-inline: auto; }\nol[data-x=\"left\"] .toast { margin-right: auto; }\nol[data-x=\"right\"] .toast { margin-left: auto; }\n.toast:focus-visible { outline: 2px solid var(--ds-focus-ring); outline-offset: 1px; }\n\n/* Entering: from beyond the edge, then into the stack. */\n.toast[data-mounted=\"false\"] { transform: translateY(calc(var(--lift) * -100%)); }\n.toast[data-mounted=\"true\"] { opacity: 1; }\n\n/* Collapsed: the front toast, and the next ones peeking out a little smaller. */\nol[data-expanded=\"false\"] .toast[data-mounted=\"true\"] {\n  transform: translateY(calc(var(--lift) * var(--index) * var(--ds-toast-gap) + var(--swipe))) scale(calc(1 - var(--index) * 0.05));\n}\nol[data-expanded=\"false\"] .toast[data-front=\"false\"] { height: var(--front-height); }\nol[data-expanded=\"false\"] .toast[data-front=\"false\"] .body { opacity: 0; }\n\n/* Expanded: each toast after the ones in front of it. */\nol[data-expanded=\"true\"] .toast[data-mounted=\"true\"] {\n  transform: translateY(calc(var(--lift) * (var(--offset) + var(--index) * var(--ds-toast-gap)) + var(--swipe)));\n}\n\n.toast[data-visible=\"false\"] { opacity: 0; pointer-events: none; }\n.toast[data-swiping=\"true\"] { transition: none; }\n\n/* Leaving: the front one back over its edge, the others fade where they are. */\n.toast[data-removed=\"true\"] { opacity: 0; pointer-events: none; }\n.toast[data-removed=\"true\"][data-front=\"true\"] { transform: translateY(calc(var(--lift) * -100%)); }\n.toast[data-swipe-out=\"true\"] { transform: translateY(calc(var(--swipe) + var(--lift) * -100%)); }\n\n/* Words padded 4px from the chip's edge; each line one control high. */\n.body {\n  display: flex;\n  align-items: flex-start;\n  gap: calc(4px * var(--ds-sf));\n  box-sizing: border-box;\n  min-height: var(--ds-control-height);\n  padding-inline: calc(4px * var(--ds-sf));\n  transition: opacity 400ms ease;\n}\n.icon {\n  display: inline-flex;\n  flex: 0 0 auto;\n  align-items: center;\n  justify-content: center;\n  width: var(--ds-control-height);\n  height: var(--ds-control-height);\n  --ds-icon-color: currentColor;\n}\n.icon:first-child { margin-left: calc(-4px * var(--ds-sf)); }\n/* The page toaster (0-face/toaster.ts) draws its icons as inline SVG, at ds-icon's size. */\n.icon > svg, .close > svg { width: calc(14px * var(--ds-sf)); height: calc(14px * var(--ds-sf)); }\n.content { flex: 1 1 auto; min-width: 0; }\n.title, .description { white-space: normal; overflow-wrap: anywhere; }\n.description { opacity: 0.7; }\n\n/* Actions are words of the same size, underlined as text buttons are. */\n.button {\n  flex: 0 0 auto;\n  margin: 0 0 0 calc(4px * var(--ds-sf));\n  padding: 0;\n  border: 0;\n  background: none;\n  color: inherit;\n  font: inherit;\n  letter-spacing: inherit;\n  text-decoration: underline;\n  text-underline-offset: 2px;\n  cursor: pointer;\n}\na.button { display: inline-block; }\n.button.cancel { opacity: 0.7; }\n.button:focus-visible, .close:focus-visible { outline: 1px solid currentColor; outline-offset: 1px; border-radius: 1px; }\n\n.close {\n  display: inline-flex;\n  flex: 0 0 auto;\n  align-items: center;\n  justify-content: center;\n  width: var(--ds-control-height);\n  height: var(--ds-control-height);\n  margin: 0 calc(-4px * var(--ds-sf)) 0 0;\n  padding: 0;\n  border: 0;\n  background: none;\n  color: inherit;\n  cursor: pointer;\n  --ds-icon-color: currentColor;\n}\n\n.spinner {\n  width: calc(10px * var(--ds-sf));\n  height: calc(10px * var(--ds-sf));\n  box-sizing: border-box;\n  border: 1px solid color-mix(in srgb, currentColor 25%, transparent);\n  border-top-color: currentColor;\n  border-radius: 50%;\n  animation: ds-toast-spin 720ms linear infinite;\n}\n@keyframes ds-toast-spin { to { transform: rotate(360deg); } }\n\n/* Sonner's rich colours: a meaningful fill for each type, lettered in the ink. */\n:host([rich-colors]) .toast[data-type=\"success\"] { --ds-toast-background: var(--ds-apple-green); }\n:host([rich-colors]) .toast[data-type=\"info\"] { --ds-toast-background: var(--ds-zenith-blue); }\n:host([rich-colors]) .toast[data-type=\"warning\"] { --ds-toast-background: var(--ds-orange); }\n:host([rich-colors]) .toast[data-type=\"error\"] { --ds-toast-background: var(--ds-tuned-red); }\n:host([rich-colors]) .toast:is([data-type=\"success\"], [data-type=\"info\"], [data-type=\"warning\"], [data-type=\"error\"]) {\n  --ds-toast-color: var(--ds-black);\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .toast, .body { transition: none; }\n  .spinner { animation: none; }\n}\n";
 //#endregion
 //#region DS1/2-core/ds-toast.ts
 /**
@@ -10510,7 +10791,7 @@ function openApp(options, wait = 1500) {
 }
 //#endregion
 //#region DS1/1-root/controls.css?inline
-var controls_default = "/* Shape is a surface preference. Keep these base lengths unscaled: each\n * component resolves them with its own --ds-sf in component-metrics.css. */\n[data-ds-shape=\"square\"],\n:host([data-ds-shape=\"square\"]) {\n  --ds-corner-size: 0px;\n  --ds-corner-shape: round;\n  --ds-button-inset: 0.5px;\n}\n\n[data-ds-shape=\"rounded\"],\n:host([data-ds-shape=\"rounded\"]) {\n  --ds-corner-size: 4px;\n  --ds-corner-shape: round;\n  --ds-button-inset: 2.5px;\n}\n\n[data-ds-shape=\"circular\"],\n:host([data-ds-shape=\"circular\"]) {\n  --ds-corner-size: 999px;\n  --ds-corner-shape: round;\n  --ds-button-inset: 5px;\n}\n\n/* A squircle needs twice an arc's radius for the same apparent corner.\n * Circular controls keep true semicircles even in a squircle browser. */\n@supports (corner-shape: squircle) {\n  [data-ds-shape=\"rounded\"],\n  :host([data-ds-shape=\"rounded\"]) {\n    --ds-corner-size: 8px;\n    --ds-corner-shape: squircle;\n  }\n}\n/* Resolve dimensions where a component is drawn. Inherited calc() values have\n * already used their ancestor's scale. Base tokens stay unscaled and inherit;\n * resolved tokens can still be overridden directly on a component.\n * data-ds-surface gives ordinary layout elements the same scaled measures.\n */\n:root,\n:host,\n:where([data-ds-surface]) {\n  --ds-unit: calc(var(--ds-1, 20px) * var(--ds-sf, 1));\n  --ds-control-height: calc(var(--ds-control-size, var(--ds-08, 16px)) * var(--ds-sf, 1));\n  --ds-row-height: calc(var(--ds-row-size, var(--ds-1, 20px)) * var(--ds-sf, 1));\n  --ds-type-size-default: calc(var(--ds-text-size, 14px) * var(--ds-sf, 1));\n  --ds-type-size-small: calc(var(--ds-small-text-size, 10px) * var(--ds-sf, 1));\n  --ds-type-size-heading: calc(var(--ds-heading-text-size, 13px) * var(--ds-sf, 1));\n  --ds-type-size-display: calc(var(--ds-display-text-size, 20px) * var(--ds-sf, 1));\n  --ds-type-lineheight-default: calc(var(--ds-text-leading, 16px) * var(--ds-sf, 1));\n  --ds-type-letterspacing-default: calc(var(--ds-text-tracking, -0.3px) * var(--ds-sf, 1));\n  --ds-radius: calc(var(--ds-corner-size, 4px) * var(--ds-sf, 1));\n  --ds-radius-card: calc(var(--ds-card-corner-size, 4px) * var(--ds-sf, 1));\n}\n/*\n * A table: words straight on the paper, one square a row. No box and no\n * column lines: each row stands on a hairline at its foot, its words set on\n * that line like a caption: the sixteen of words against the 1px line, three\n * spare above, a 20px pitch, as Ezo sets every row.\n * Column headers keep the text's weight in the title grey; the first column\n * of a body row is a row header in the text colour. Nothing is filled with\n * the accent except a cell someone has selected.\n *\n * `.ds-table` dresses a native <table>; `<ds-table>` draws the same table\n * from data. Put a wide table in `.ds-table-scroll` to scroll it sideways,\n * and give the table `data-sticky` to keep its first column in place.\n *\n *   <th data-numeric>, <td data-numeric>   numbers, set to the column's end\n *   <tfoot>                                totals, under a line of their own\n *   <th colspan=\"2\">                       a column group, in a header row\n *   <th scope=\"rowgroup\">                  a row group, a heading row in grey\n *   <td aria-selected=\"true\">              a selected cell\n *\n * `data-plain` takes every line away: the same rows with no rule at their\n * foot, standing on the paper as a list's rows do (Money's tables), the\n * words still on the lower sixteen of each square.\n *\n * `data-frame` draws the same rows in a rounded 1px frame with a 1px line\n * between columns. Every line is drawn inside the cells' squares, the frame\n * over the first and last pixels as the sheet's lines are at a cell's end and\n * foot, so each row keeps its 20px pitch and the last row's rule is the\n * frame's foot; words stand 4px in from the lines. Fills in the cells keep\n * inside the rounded corners.\n *\n * `data-sheet` makes it a spreadsheet: every cell four squares by one (80 by\n * 20), its 1px lines at its end and foot so the words have 79 by 19, set 4px\n * in on the sixteen. Words that do not fit fade out over the last square\n * where they are cut, never an ellipsis: put them in `.ds-table__words`,\n * which carries the fade (a mask, so it fades to whatever is behind: the\n * paper, a selected or hovered cell's fill). A table marked `data-fit`\n * (`<ds-table sheet>` is) measures its cells and marks the cut ones\n * `data-cut=\"end\"`, or `\"start\"` for a number it has scrolled to its end, so\n * words that fit never fade; without it every cell's end fades. Column letters and the row numbers\n * (`.ds-table__letters`, `.ds-table__number`, two squares wide) stay in place\n * while the sheet scrolls both ways inside `.ds-table-scroll`; give the table\n * `--ds-table-columns` (the number of data columns) and the scroll a height\n * with `--ds-table-height`.\n *\n * `data-reorderable` (set by `<ds-table sheet reorderable>`) gives each row\n * number a grip, `.ds-table__handle` with the `handle` icon, in place of the\n * number while the row is hovered or the grip focused. A lifted row\n * (`tr[data-lifted]`) keeps the paper behind it and follows the pointer; while\n * `data-moving` is on the table the other rows step aside in transform alone,\n * a sortable list's 200ms on cubic-bezier(0.2, 0, 0, 1), and never under\n * reduced motion.\n */\n\n.ds-table {\n  --ds-table-row: var(--ds-row-height, calc(20px * var(--ds-sf, 1)));\n  --ds-table-gap: calc(var(--ds-table-row) / 2);\n  --ds-table-rule: var(--ds-border-color, light-dark(#d8d8d8, #3d3d3d));\n  --ds-table-paper: var(--ds-background, Canvas);\n  width: 100%;\n  border-collapse: collapse;\n  border-spacing: 0;\n  color: var(--ds-text-color, inherit);\n  font-family: var(--ds-typeface-regular, inherit);\n  font-feature-settings: var(--ds-font-features, normal);\n  font-size: var(--ds-type-size-default, 14px);\n  letter-spacing: var(--ds-type-letterspacing-default, normal);\n}\n\n.ds-table :is(th, td) {\n  box-sizing: border-box;\n  height: var(--ds-table-row);\n  padding: 0 var(--ds-table-gap) 0 0;\n  border: 0;\n  border-bottom: 1px solid var(--ds-table-rule);\n  background: transparent;\n  line-height: var(--ds-type-lineheight-default);\n  text-align: start;\n  vertical-align: bottom;\n  font-weight: inherit;\n  white-space: nowrap;\n}\n\n.ds-table :is(th, td):last-child {\n  padding-inline-end: 0;\n}\n\n/* A plain table: no lines at all, each row one square with its words on the lower sixteen. */\n.ds-table[data-plain] :is(th, td) {\n  border-bottom: 0;\n}\n.ds-table[data-frame] {\n  --ds-table-radius: var(--ds-radius-card, calc(8px * var(--ds-sf, 1)));\n  position: relative;\n  border-collapse: separate;\n  border-radius: var(--ds-table-radius);\n  clip-path: inset(0 round var(--ds-table-radius));\n}\n/* The frame is drawn over the cells, so a filled cell never covers it. */\n.ds-table[data-frame]::after {\n  position: absolute;\n  inset: 0;\n  z-index: 1;\n  box-sizing: border-box;\n  border: 1px solid var(--ds-table-rule);\n  border-radius: var(--ds-table-radius);\n  content: \"\";\n  pointer-events: none;\n}\n.ds-table[data-frame] :is(th, td) {\n  padding-inline: calc(4px * var(--ds-sf, 1));\n}\n.ds-table[data-frame] :is(th, td) + :is(th, td) {\n  box-shadow: inset 1px 0 0 var(--ds-table-rule);\n}\n.ds-table[data-frame]:dir(rtl) :is(th, td) + :is(th, td) {\n  box-shadow: inset -1px 0 0 var(--ds-table-rule);\n}\n\n.ds-table thead th,\n.ds-table th[scope=\"rowgroup\"] {\n  color: var(--ds-title-color, light-dark(#6e6e6e, #9a9a9a));\n}\n\n.ds-table tbody th:not([scope=\"rowgroup\"]) {\n  color: inherit;\n}\n\n.ds-table [data-numeric] {\n  text-align: end;\n  font-variant-numeric: tabular-nums;\n}\n\n/* Totals: the rule above them is the last body row's; theirs closes the table. */\n.ds-table tfoot :is(th, td) {\n  color: inherit;\n}\n\n.ds-table [aria-selected=\"true\"] {\n  background: var(--ds-accent-color, Highlight);\n  color: var(--ds-button-text-color-on-accent, inherit);\n}\n\n.ds-table :is(th, td):has(> :is(a, button):only-child) {\n  cursor: pointer;\n}\n\n.ds-table caption {\n  box-sizing: border-box;\n  height: var(--ds-table-row);\n  padding-top: calc(var(--ds-table-row) - var(--ds-type-lineheight-default));\n  line-height: var(--ds-type-lineheight-default);\n  text-align: start;\n  color: var(--ds-title-color, light-dark(#6e6e6e, #9a9a9a));\n}\n\n.ds-table-scroll {\n  max-width: 100%;\n  overflow-x: auto;\n  overscroll-behavior-x: contain;\n}\n\n.ds-table-scroll > .ds-table {\n  width: max-content;\n  min-width: 100%;\n}\n\n.ds-table[data-sticky] :is(th, td):first-child {\n  position: sticky;\n  inset-inline-start: 0;\n  z-index: 1;\n  background: var(--ds-table-paper);\n}\n\n.ds-table[data-sticky] [aria-selected=\"true\"]:first-child {\n  background: var(--ds-accent-color, Highlight);\n}\n\n/* Keep the row whose details are open visible, including its sticky first cell.\n   Cell selection remains independent and keeps its accent. */\n.ds-table tbody > tr[data-open]:not([data-open=\"false\"]) > :is(th, td):not([aria-selected=\"true\"]) {\n  background: var(--ds-row-fill-current, var(--ds-fill-hover));\n}\n@media (forced-colors: active) {\n  .ds-table tbody > tr[data-open]:not([data-open=\"false\"]) > :is(th, td):not([aria-selected=\"true\"]) {\n    background: Highlight;\n    color: HighlightText;\n  }\n}\n\n/* A spreadsheet: cells four squares by one, on lines, lettered and numbered. */\n.ds-table[data-sheet] {\n  --ds-table-cell: calc(4 * var(--ds-table-row));\n  --ds-table-index: calc(2 * var(--ds-table-row));\n  --ds-table-text: calc(4px * var(--ds-sf, 1));\n  table-layout: fixed;\n  width: calc(var(--ds-table-index) + var(--ds-table-columns, 8) * var(--ds-table-cell));\n  min-width: 0;\n  border-collapse: separate;\n  border-spacing: 0;\n}\n.ds-table-scroll > .ds-table[data-sheet] {\n  width: calc(var(--ds-table-index) + var(--ds-table-columns, 8) * var(--ds-table-cell));\n  min-width: 0;\n}\n.ds-table[data-sheet] :is(th, td) {\n  width: var(--ds-table-cell);\n  max-width: var(--ds-table-cell);\n  height: var(--ds-table-row);\n  padding: 0 var(--ds-table-text);\n  border-bottom: 1px solid var(--ds-table-rule);\n  border-inline-end: 1px solid var(--ds-table-rule);\n  overflow: hidden;\n}\n.ds-table[data-sheet] :is(th, td):last-child {\n  padding-inline-end: var(--ds-table-text);\n}\n.ds-table[data-sheet] .ds-table__words {\n  --ds-table-fade-to: right;\n  --ds-table-fade-from: left;\n  display: block;\n  overflow: hidden;\n  white-space: nowrap;\n}\n.ds-table[data-sheet]:dir(rtl) .ds-table__words {\n  --ds-table-fade-to: left;\n  --ds-table-fade-from: right;\n}\n/* Cut words fade over their last square to nothing, at the edge where they are cut. */\n.ds-table[data-sheet]:not([data-fit]) .ds-table__words,\n.ds-table[data-sheet] .ds-table__words[data-cut=\"end\"] {\n  mask-image: linear-gradient(to var(--ds-table-fade-to), #000 calc(100% - var(--ds-table-row)), transparent);\n}\n.ds-table[data-sheet] .ds-table__words[data-cut=\"start\"] {\n  mask-image: linear-gradient(to var(--ds-table-fade-from), #000 calc(100% - var(--ds-table-row)), transparent);\n}\n.ds-table[data-sheet] .ds-table__number {\n  width: var(--ds-table-index);\n  max-width: var(--ds-table-index);\n  position: sticky;\n  inset-inline-start: 0;\n  z-index: 1;\n  background: var(--ds-table-paper);\n  color: var(--ds-title-color, light-dark(#6e6e6e, #9a9a9a));\n  text-align: center;\n  font-variant-numeric: tabular-nums;\n}\n.ds-table[data-sheet] thead :is(th, td) {\n  position: sticky;\n  top: 0;\n  z-index: 3;\n  background: var(--ds-table-paper);\n}\n.ds-table[data-sheet] thead tr + tr :is(th, td) {\n  top: var(--ds-table-row);\n}\n.ds-table[data-sheet] thead .ds-table__number {\n  z-index: 4;\n}\n.ds-table[data-sheet] .ds-table__letters td {\n  color: var(--ds-title-color, light-dark(#6e6e6e, #9a9a9a));\n  text-align: center;\n}\n.ds-table[data-sheet] tbody td:not([data-numeric]) {\n  color: inherit;\n}\n.ds-table[data-sheet] [aria-selected=\"true\"] {\n  background: transparent;\n  color: inherit;\n  box-shadow: inset 0 0 0 2px var(--ds-focus-ring, Highlight);\n}\n.ds-table-scroll:has(> .ds-table[data-sheet]) {\n  max-height: var(--ds-table-height, none);\n  overflow: auto;\n  overscroll-behavior: contain;\n}\n\n/* Rows that move: a grip on the number, the lifted row on paper, the others stepping aside. */\n.ds-table[data-sheet][data-reorderable] tbody .ds-table__number {\n  -webkit-user-select: none;\n  user-select: none;\n  -webkit-touch-callout: none;\n}\n.ds-table__index {\n  transition: opacity 100ms ease;\n}\n.ds-table__handle {\n  all: unset;\n  position: absolute;\n  inset: 0;\n  display: flex;\n  align-items: flex-end;\n  justify-content: center;\n  color: var(--ds-reorder-color, light-dark(#777777, #cccccc));\n  cursor: grab;\n  opacity: 0;\n  transition: opacity 100ms ease;\n}\n.ds-table__handle:hover {\n  color: var(--ds-reorder-active-color, light-dark(#333333, #ffffff));\n}\n.ds-table__handle:focus-visible {\n  box-shadow: inset 0 0 0 2px var(--ds-focus-ring, Highlight);\n}\n@media (hover: hover) {\n  .ds-table[data-reorderable]:not([data-moving]) tbody tr:hover .ds-table__handle { opacity: 1; }\n  .ds-table[data-reorderable]:not([data-moving]) tbody tr:hover .ds-table__index { opacity: 0; }\n}\n.ds-table[data-reorderable] tbody tr:is([data-lifted], :has(.ds-table__handle:focus-visible)) .ds-table__handle { opacity: 1; }\n.ds-table[data-reorderable] tbody tr:is([data-lifted], :has(.ds-table__handle:focus-visible)) .ds-table__index { opacity: 0; }\n.ds-table[data-moving] tbody tr {\n  transition: transform 200ms cubic-bezier(0.2, 0, 0, 1);\n}\n.ds-table[data-moving],\n.ds-table[data-moving] * {\n  cursor: grabbing;\n}\n.ds-table[data-sheet] tbody tr[data-lifted] {\n  position: relative;\n  z-index: 2;\n  transition: none;\n}\n.ds-table[data-sheet] tbody tr[data-lifted] > :is(th, td) {\n  background: var(--ds-table-paper);\n  box-shadow: inset 0 1px var(--ds-table-rule);\n}\n.ds-table__status {\n  position: absolute;\n  width: 1px;\n  height: 1px;\n  overflow: hidden;\n  clip-path: inset(50%);\n  white-space: nowrap;\n}\n@media (prefers-reduced-motion: reduce) {\n  .ds-table[data-moving] tbody tr,\n  .ds-table__index,\n  .ds-table__handle {\n    transition: none;\n  }\n}\n/*\n * Text on the grid, as plain classes on native text.\n *\n * Interface copy on a page without Lit: a label, a message, a title. Each line\n * is one square (`--ds-unit`), so a paragraph of any length stands on whole\n * squares, and a display title takes two. The `ds-text` element draws the same\n * words when they come from a translation key.\n *\n * one.css and controls.css both import this file, so a page that loads either\n * of them, or both, has one definition of these classes.\n *\n *   ds-text                                14 on a one-square line, the text colour\n *   ds-text--small                         10\n *   ds-text--heading                       13, medium\n *   ds-text--display                       20 on two squares, medium\n *   ds-text--strong                        medium\n *   ds-text--muted, --title, --danger      tones\n *\n * The page's own text reads as ds-text does: what stands in the body outside\n * a component is 14 on a one-square line in the text colour, scaled with the\n * device, so a product never sets its own body size, leading or ink.\n *\n * It is drawn with grayscale antialiasing, as one.css has always drawn it: the\n * browser's own smoothing on a Mac thickens every stem, so the same 400 weight\n * reads heavier in a product that loads controls.css without one.css (Link\n * beside Money). Inherited, so components' shadow roots draw the same.\n */\n\nbody {\n  color: var(--ds-text-color);\n  font-family: var(--ds-typeface-regular);\n  font-size: var(--ds-type-size-default);\n  line-height: var(--ds-unit);\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n  text-rendering: optimizeLegibility;\n}\n\n.ds-text {\n  margin: 0;\n  color: var(--ds-text-color);\n  font-family: var(--ds-typeface-regular);\n  font-feature-settings: var(--ds-font-features);\n  font-size: var(--ds-type-size-default);\n  font-weight: var(--ds-type-weight-default);\n  line-height: var(--ds-unit);\n  letter-spacing: var(--ds-type-letterspacing-default);\n}\n\n.ds-text--small {\n  font-size: var(--ds-type-size-small);\n}\n\n/* text.whole-words: headings must not inherit emergency wrapping from prose. */\n:is(h1, h2, h3, h4, h5, h6, th, [role=\"heading\"], [role=\"columnheader\"], [role=\"rowheader\"], .ds-text--heading, .ds-text--display) {\n  word-break: normal;\n  overflow-wrap: normal;\n  hyphens: manual;\n}\n\n.ds-text--heading {\n  font-family: var(--ds-typeface-medium);\n  font-size: var(--ds-type-size-heading);\n  font-weight: var(--ds-type-weight-bold);\n}\n\n.ds-text--display {\n  font-family: var(--ds-typeface-medium);\n  font-size: var(--ds-type-size-display);\n  font-weight: var(--ds-type-weight-bold);\n  line-height: calc(2 * var(--ds-unit));\n  letter-spacing: calc(var(--ds-display-text-tracking, -0.4px) * var(--ds-sf, 1));\n}\n\n.ds-text--strong {\n  font-family: var(--ds-typeface-medium);\n  font-weight: var(--ds-type-weight-bold);\n}\n\n.ds-text--muted {\n  color: var(--ds-text-color-muted);\n}\n\n.ds-text--title {\n  color: var(--ds-title-color);\n}\n\n.ds-text--danger {\n  color: var(--ds-danger-color);\n}\n\n.ds-text--warning {\n  color: var(--ds-warning-color);\n}\n\n/*\n * An empty state, as plain classes on native elements.\n *\n * It says that a place has nothing in it yet and what to do about it: a title,\n * a line of text and, when there is one, the action that fills it. The words\n * sit on the paper with no box, no illustration and no colour; every line is\n * one square, so the whole stands on whole squares. The `ds-empty` element\n * draws the same parts from a translation key, with the shared words' \"Nothing\n * here yet\" as its title when none is given.\n *\n *   ds-empty                 the block, at most sixteen squares wide\n *   ds-empty__icon           an icon from the library, before the title, muted\n *   ds-empty__title          one line in the medium face\n *   ds-empty__text           lines of one square, muted\n *   ds-empty__actions        buttons or links on one row, one square below\n *   ds-empty--centered       centred in the space it stands in\n *   ds-empty--done           all done: the check on a mark in the success\n *                            green, the title in that green\n *\n * Tokens: `--ds-empty-measure` (the widest it grows, sixteen squares) and\n * `--ds-empty-padding` (the room above and below, none by default).\n */\n\n.ds-empty {\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  width: 100%;\n  max-width: var(--ds-empty-measure, calc(16 * var(--ds-unit)));\n  margin: 0 auto;\n  text-align: center;\n  padding-block: var(--ds-empty-padding, 0);\n  color: var(--ds-text-color);\n  font-family: var(--ds-typeface-regular);\n  font-feature-settings: var(--ds-font-features);\n  font-size: var(--ds-type-size-default);\n  font-weight: var(--ds-type-weight-default);\n  line-height: var(--ds-unit);\n  letter-spacing: var(--ds-type-letterspacing-default);\n  text-transform: none;\n}\n\n.ds-empty__heading {\n  display: flex;\n  align-items: flex-start;\n  justify-content: center;\n  gap: calc(var(--ds-unit) - var(--ds-control-height));\n  max-width: 100%;\n}\n\n.ds-empty__icon {\n  display: flex;\n  flex: 0 0 auto;\n  align-items: center;\n  justify-content: center;\n  width: var(--ds-control-height);\n  height: var(--ds-control-height);\n  margin-top: calc(var(--ds-unit) - var(--ds-control-height));\n  color: var(--ds-text-color-muted);\n}\n\n.ds-empty__title,\n.ds-empty__text {\n  margin: 0;\n  font: inherit;\n  letter-spacing: inherit;\n}\n\n.ds-empty__title {\n  min-width: 0;\n  padding-top: calc(var(--ds-unit) - var(--ds-control-height));\n  line-height: var(--ds-control-height);\n  font-family: var(--ds-typeface-medium);\n  font-weight: var(--ds-type-weight-bold);\n}\n\n.ds-empty__text {\n  color: var(--ds-text-color-muted);\n}\n\n.ds-empty__actions {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: flex-end;\n  justify-content: center;\n  gap: 0 calc(var(--ds-unit) / 2);\n  min-height: var(--ds-row-height);\n  margin-top: var(--ds-unit);\n}\n\n.ds-empty--start {\n  align-items: flex-start;\n  margin-inline: 0;\n  text-align: start;\n}\n\n.ds-empty--start .ds-empty__heading,\n.ds-empty--start .ds-empty__actions {\n  justify-content: flex-start;\n}\n\n.ds-empty--centered {\n  align-items: center;\n  margin-inline: auto;\n  text-align: center;\n}\n\n.ds-empty--centered .ds-empty__actions {\n  justify-content: center;\n}\n\n/* Done: a place empty because everything in it is finished (every receipt\n   found, nothing left to review). The icon, the check by default, stands on a\n   round mark one control high in the success green, on the sixteen, and the\n   title takes the same green; the line under it stays muted. */\n.ds-empty--done .ds-empty__icon {\n  box-sizing: border-box;\n  justify-content: center;\n  width: var(--ds-control-height);\n  height: var(--ds-control-height);\n  margin-top: calc(var(--ds-unit) - var(--ds-control-height));\n  border-radius: 50%;\n  background: var(--ds-success-color);\n  color: light-dark(var(--ds-white), var(--ds-black));\n  --ds-icon-color: currentColor;\n}\n\n.ds-empty--done .ds-empty__title {\n  color: var(--ds-success-color);\n}\n\n/* Compatibility for saved markup with the icon and title as siblings. */\n.ds-empty:has(> .ds-empty__icon:not([hidden])) {\n  display: grid;\n  grid-template-columns: var(--ds-control-height) minmax(0, auto);\n  column-gap: calc(var(--ds-unit) - var(--ds-control-height));\n  justify-content: center;\n  align-items: start;\n}\n.ds-empty > .ds-empty__icon { grid-column: 1; grid-row: 1; }\n.ds-empty:has(> .ds-empty__icon:not([hidden])) > .ds-empty__title { grid-column: 2; grid-row: 1; }\n.ds-empty > .ds-empty__text,\n.ds-empty > .ds-empty__actions { grid-column: 1 / -1; }\n/*\n * An inline notice, as plain classes on native elements.\n *\n * A notice stands in the flow of the page, where its words apply: a failure\n * beside the form that failed, a warning above the list it is about. It is not\n * positioned and takes no box or shadow. A square mark, one control high and\n * filled in the tone's colour, carries the tone; the words sit on the paper\n * beside it, each line one square, with the actions on the row below and the\n * dismiss button at the end of the first line. Danger turns the words into\n * the danger colour. The `ds-notice` element draws the same parts.\n *\n *   ds-notice                       the block: mark, words, dismiss\n *   ds-notice__mark                 the mark, a picture's 4px corners; holds an icon in its ink\n *   ds-notice__title                one line in the medium face\n *   ds-notice__text                 lines of one square\n *   ds-notice__actions              buttons or links on one row\n *   ds-notice__dismiss              an icon button at the end of the first line\n *   ds-notice--success, --warning, --danger     tones; neutral without one\n *   ds-notice--banner               a strip across the top of its positioning\n *                                   context instead: one square high, filled in\n *                                   the tone's colour, everything on one line\n *   ds-notice--app                  a row at the top of the page leading to the\n *                                   site's iPhone app: its picture\n *                                   (ds-notice__picture, two squares), its name\n *                                   and one line about it, Open\n *                                   (a.ds-notice__open) and the close; three\n *                                   squares high with a hairline at its foot.\n *                                   startAppBanners() from 0-face/app-banner.ts\n *                                   shows it only where it belongs\n *\n * Give the block role=\"status\", or role=\"alert\" for danger, so assistive\n * technology reads it when it appears.\n *\n * Tokens: `--ds-notice-mark`, `--ds-notice-mark-ink` and `--ds-notice-ink`,\n * which the tones set.\n */\n\n.ds-notice {\n  --ds-notice-mark: var(--ds-fill);\n  --ds-notice-mark-ink: var(--ds-text-color);\n  --ds-notice-ink: var(--ds-text-color);\n  box-sizing: border-box;\n  display: grid;\n  grid-template-columns: var(--ds-unit) minmax(0, 1fr) auto;\n  align-items: start;\n  margin: 0;\n  color: var(--ds-notice-ink);\n  font-family: var(--ds-typeface-regular);\n  font-feature-settings: var(--ds-font-features);\n  font-size: var(--ds-type-size-default);\n  font-weight: var(--ds-type-weight-default);\n  line-height: var(--ds-unit);\n  letter-spacing: var(--ds-type-letterspacing-default);\n  text-transform: none;\n}\n\n.ds-notice--success {\n  --ds-notice-mark: var(--ds-apple-green);\n  --ds-notice-mark-ink: var(--ds-black);\n}\n\n.ds-notice--warning {\n  --ds-notice-mark: var(--ds-orange);\n  --ds-notice-mark-ink: var(--ds-black);\n}\n\n.ds-notice--danger {\n  --ds-notice-mark: var(--ds-danger-color);\n  --ds-notice-mark-ink: light-dark(var(--ds-white), var(--ds-black));\n  --ds-notice-ink: var(--ds-danger-color);\n}\n\n/* The mark stands on the first line, one control high in a one-square cell. */\n.ds-notice__mark {\n  box-sizing: border-box;\n  grid-column: 1;\n  grid-row: 1;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: var(--ds-control-height);\n  height: var(--ds-control-height);\n  margin-block: calc((var(--ds-unit) - var(--ds-control-height)) / 2);\n  overflow: hidden;\n  /* Rounded as every icon tile is (Joachim, 19 October 2026). */\n  border-radius: var(--ds-radius);\n  corner-shape: var(--ds-corner-shape, round);\n  background: var(--ds-notice-mark);\n  color: var(--ds-notice-mark-ink);\n  --ds-icon-color: var(--ds-notice-mark-ink);\n}\n\n.ds-notice__title,\n.ds-notice__text,\n.ds-notice__actions {\n  grid-column: 2;\n  min-width: 0;\n  margin: 0;\n}\n\n.ds-notice__title,\n.ds-notice__text {\n  font: inherit;\n  letter-spacing: inherit;\n  overflow-wrap: anywhere;\n}\n\n.ds-notice__title {\n  font-family: var(--ds-typeface-medium);\n  font-weight: var(--ds-type-weight-bold);\n}\n\n.ds-notice__actions {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  gap: 0 calc(var(--ds-unit) / 2);\n  min-height: var(--ds-row-height);\n}\n\n/* The dismiss button closes the first line: a one-square cell at the end.\n   Two classes, so the button's own reset of its margin does not undo it. */\n.ds-notice .ds-notice__dismiss {\n  grid-column: 3;\n  grid-row: 1;\n  margin-block: calc((var(--ds-unit) - var(--ds-control-height)) / 2);\n  margin-inline-start: calc(var(--ds-unit) - var(--ds-control-height));\n}\n\n/* A banner: the same parts on one line, one square high, across the top of\n   the nearest positioned ancestor (or the page), on a fill of the tone's\n   colour. It takes no room in the flow; leave a square for it where words\n   stand under it. The actions stand at the end of the line, half a square\n   apart; danger words keep the text colour on the danger fill. */\n.ds-notice--banner {\n  position: absolute;\n  top: 0;\n  inset-inline: 0;\n  z-index: 9999;\n  display: flex;\n  align-items: center;\n  gap: calc(var(--ds-unit) / 2);\n  height: var(--ds-unit);\n  padding-inline: var(--ds-unit);\n  background: color-mix(in srgb, var(--ds-notice-mark) 40%, transparent);\n  --ds-notice-ink: var(--ds-text-color);\n}\n\n.ds-notice--banner .ds-notice__mark {\n  flex: none;\n  margin-block: 0;\n}\n\n.ds-notice--banner .ds-notice__title,\n.ds-notice--banner .ds-notice__text {\n  min-width: 0;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: clip;\n}\n\n/* Cut words fade over their last square, never an ellipsis (0-face/cut-fade.ts marks them). */\n:is(.ds-notice--banner, .ds-notice--app) :is(.ds-notice__title, .ds-notice__text)[data-cut=\"end\"] {\n  mask-image: linear-gradient(to right, #000 calc(100% - var(--ds-unit)), transparent);\n}\n:is(.ds-notice--banner, .ds-notice--app) :is(.ds-notice__title, .ds-notice__text)[data-cut=\"end\"]:dir(rtl) {\n  mask-image: linear-gradient(to left, #000 calc(100% - var(--ds-unit)), transparent);\n}\n\n.ds-notice--banner .ds-notice__text {\n  flex: 1;\n}\n\n.ds-notice--banner .ds-notice__actions {\n  flex: none;\n  min-height: 0;\n}\n\n.ds-notice--banner .ds-notice__dismiss {\n  margin-block: 0;\n  margin-inline-start: 0;\n}\n\n/* The app banner: a row at the top of the page, in the flow, three squares\n   high: half a square above and below two squares of content, a hairline at\n   its foot. The app's picture fills two squares with a picture's corners; the\n   name and the line about it take a square each, on the sixteen; Open and the\n   close stand on the sixteen of the square in the middle of the two. */\n.ds-notice--app {\n  grid-template-columns: calc(2 * var(--ds-unit)) minmax(0, 1fr) auto var(--ds-unit);\n  grid-template-rows: var(--ds-unit) var(--ds-unit);\n  column-gap: calc(var(--ds-unit) / 2);\n  align-items: end;\n  padding: calc(var(--ds-unit) / 2) var(--ds-unit);\n  background: var(--ds-paper);\n  box-shadow: inset 0 -1px 0 var(--ds-border-color);\n  line-height: var(--ds-type-lineheight-default);\n}\n\n.ds-notice--app[hidden] {\n  display: none;\n}\n\n.ds-notice__picture {\n  box-sizing: border-box;\n  grid-column: 1;\n  grid-row: 1 / 3;\n  align-self: stretch;\n  overflow: hidden;\n  border-radius: var(--ds-radius);\n  background: var(--ds-fill);\n  outline: 1px solid var(--ds-border-color);\n  outline-offset: -1px;\n}\n\n.ds-notice__picture img {\n  display: block;\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n}\n\n.ds-notice--app .ds-notice__title,\n.ds-notice--app .ds-notice__text {\n  grid-column: 2;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: clip;\n}\n\n.ds-notice--app .ds-notice__title { grid-row: 1; }\n\n.ds-notice--app .ds-notice__text {\n  grid-row: 2;\n  color: var(--ds-text-color-muted);\n}\n\n/* Open and the close: their square starts half a square into the two, its\n   control on the lower sixteen of it. */\n.ds-notice--app .ds-notice__open,\n.ds-notice--app .ds-notice__dismiss {\n  grid-row: 1 / 3;\n  align-self: start;\n  margin: calc(1.5 * var(--ds-unit) - var(--ds-control-height)) 0 0;\n}\n\n.ds-notice--app .ds-notice__open {\n  grid-column: 3;\n  text-decoration: none;\n}\n\n.ds-notice--app .ds-notice__dismiss {\n  grid-column: 4;\n  justify-self: end;\n}\n\n/*\n * Overlay: everything that stands over the page, one component with a type.\n * A `modal` stands in the centre (controls.css and the element's frame); this\n * sheet draws the others, for the `ds-overlay` element (`type=\"sheet\"`,\n * `\"drawer\"` with `side`, `\"screen\"`, which mark its native dialog\n * `data-ds-type` and `data-ds-edge`) and the native frame\n * (`dialog.ds-overlay.ds-overlay--sheet`, `--drawer` with `--start`,\n * `--screen`); controls.css imports it. A popover is placed by the element.\n *\n * - A sheet is as wide as the screen up to 32 squares and centred beyond\n *   that, as high as its content up to two squares below the top, with no\n *   line at its foot; its one line, at the top, is drawn inside its first\n *   square (`--ds-overlay-line`), so it stands on whole squares. A handle two squares wide stands in the middle of its\n *   first square and stays there while the content scrolls.\n * - A drawer is the screen's height and 16 squares wide (`--ds-overlay-width`),\n *   leaving at least two squares of the page beside it; its one line is on\n *   the side that faces the page. `end` is the right in a left-to-right page.\n * - Each keeps the square of padding inside the screen's safe area\n *   (`env(safe-area-inset-*)`, with `viewport-fit=cover` on the page).\n * - Each slides in from its edge and back out to it, in transform alone,\n *   while the backdrop fades; with reduced motion it fades in place. Dragging\n *   it towards its edge (0-face/overlay-swipe.ts) moves it with the finger and\n *   fades the backdrop as it goes.\n * - The page behind a modal native sheet or drawer does not scroll.\n */\n\n:is(ds-overlay > dialog[data-ds-edge=\"bottom\"], dialog.ds-overlay.ds-overlay--sheet),\n:is(ds-overlay > dialog[data-ds-edge=\"end\"], dialog.ds-overlay.ds-overlay--drawer:not(.ds-overlay--start)),\n:is(ds-overlay > dialog[data-ds-edge=\"start\"], dialog.ds-overlay.ds-overlay--drawer.ds-overlay--start) {\n  --ds-overlay-gap: var(--ds-unit);\n  --ds-overlay-inner: var(--ds-overlay-padding, var(--ds-unit));\n  /* The line it faces the page with is drawn inside its first square. */\n  --ds-overlay-within: max(0px, var(--ds-overlay-inner) - var(--ds-overlay-line, 1px));\n  --ds-overlay-motion: var(--ds-overlay-enter, 380ms);\n  --ds-overlay-curve: var(--ds-overlay-easing, cubic-bezier(0.32, 0.72, 0, 1));\n  margin: 0;\n  gap: var(--ds-overlay-gap);\n  transform: var(--ds-overlay-held);\n  transition:\n    transform var(--ds-overlay-motion) var(--ds-overlay-curve),\n    opacity var(--ds-overlay-motion) var(--ds-overlay-curve),\n    overlay var(--ds-overlay-motion) allow-discrete,\n    display var(--ds-overlay-motion) allow-discrete;\n}\n\n/* Content that supplies its own room. */\n:is(ds-overlay > dialog[data-ds-edge], dialog.ds-overlay:is(.ds-overlay--sheet, .ds-overlay--drawer))[data-ds-overlay-flush] {\n  --ds-overlay-inner: 0px;\n  --ds-overlay-gap: 0px;\n}\n\n:is(ds-overlay > dialog[data-ds-edge=\"bottom\"], dialog.ds-overlay.ds-overlay--sheet) {\n  --ds-overlay-held: translateY(var(--ds-overlay-drag, 0px));\n  --ds-overlay-away: translateY(100%);\n  inset: auto 0 0;\n  width: var(--ds-overlay-width, 100%);\n  max-width: min(100%, var(--ds-overlay-sheet-width, calc(32 * var(--ds-unit))));\n  height: var(--ds-overlay-height, fit-content);\n  max-height: calc(100dvh - var(--ds-overlay-sheet-gap, calc(2 * var(--ds-unit))) - env(safe-area-inset-top, 0px));\n  margin: 0 auto;\n  padding:\n    var(--ds-overlay-within)\n    calc(var(--ds-overlay-inner) + env(safe-area-inset-right, 0px))\n    calc(var(--ds-overlay-inner) + env(safe-area-inset-bottom, 0px))\n    calc(var(--ds-overlay-inner) + env(safe-area-inset-left, 0px));\n  border-bottom: 0;\n}\n\n/* The handle: two squares wide, in the middle of the first square, above the\n * content as it scrolls. It takes no room: the content starts where it would. */\n:is(ds-overlay > dialog[data-ds-edge=\"bottom\"], dialog.ds-overlay.ds-overlay--sheet)::before {\n  --ds-overlay-handle-height: calc(4px * var(--ds-sf, 1));\n  content: \"\";\n  display: var(--ds-overlay-handle, block);\n  position: sticky;\n  z-index: 1;\n  /* A sticky offset counts from the content edge, under the sheet's top padding: take that\n     padding off, so the handle is held where it already stands, in the first square. */\n  top: calc((var(--ds-unit) - var(--ds-overlay-handle-height)) / 2 - var(--ds-overlay-line, 1px) - var(--ds-overlay-within));\n  flex: 0 0 auto;\n  align-self: center;\n  width: calc(2 * var(--ds-unit));\n  height: var(--ds-overlay-handle-height);\n  margin-top: calc(var(--ds-overlay-inner) * -1 + (var(--ds-unit) - var(--ds-overlay-handle-height)) / 2);\n  margin-bottom: calc(var(--ds-overlay-inner) - var(--ds-overlay-gap) - var(--ds-overlay-handle-height) - (var(--ds-unit) - var(--ds-overlay-handle-height)) / 2);\n  border-radius: calc(var(--ds-overlay-handle-height) / 2);\n  background: var(--ds-overlay-handle-color, var(--ds-border-color));\n  pointer-events: none;\n}\n\n:is(ds-overlay > dialog[data-ds-edge=\"end\"], dialog.ds-overlay.ds-overlay--drawer:not(.ds-overlay--start)),\n:is(ds-overlay > dialog[data-ds-edge=\"start\"], dialog.ds-overlay.ds-overlay--drawer.ds-overlay--start) {\n  --ds-overlay-held: translateX(var(--ds-overlay-drag, 0px));\n  width: calc(var(--ds-overlay-width, calc(16 * var(--ds-unit))) + var(--ds-overlay-safe-side, 0px));\n  max-width: calc(100vw - 2 * var(--ds-unit));\n  height: 100dvh;\n  max-height: none;\n  border-top: 0;\n  border-bottom: 0;\n}\n\n/* At the right: the end of a left-to-right page, the start of a right-to-left one. */\n:is(ds-overlay > dialog[data-ds-edge=\"end\"], dialog.ds-overlay.ds-overlay--drawer:not(.ds-overlay--start)):not(:dir(rtl)),\n:is(ds-overlay > dialog[data-ds-edge=\"start\"], dialog.ds-overlay.ds-overlay--drawer.ds-overlay--start):dir(rtl) {\n  --ds-overlay-away: translateX(100%);\n  --ds-overlay-safe-side: env(safe-area-inset-right, 0px);\n  inset: 0 0 0 auto;\n  padding:\n    calc(var(--ds-overlay-inner) + env(safe-area-inset-top, 0px))\n    calc(var(--ds-overlay-inner) + env(safe-area-inset-right, 0px))\n    calc(var(--ds-overlay-inner) + env(safe-area-inset-bottom, 0px))\n    var(--ds-overlay-within);\n  border-right: 0;\n}\n\n:is(ds-overlay > dialog[data-ds-edge=\"start\"], dialog.ds-overlay.ds-overlay--drawer.ds-overlay--start):not(:dir(rtl)),\n:is(ds-overlay > dialog[data-ds-edge=\"end\"], dialog.ds-overlay.ds-overlay--drawer:not(.ds-overlay--start)):dir(rtl) {\n  --ds-overlay-away: translateX(-100%);\n  --ds-overlay-safe-side: env(safe-area-inset-left, 0px);\n  inset: 0 auto 0 0;\n  padding:\n    calc(var(--ds-overlay-inner) + env(safe-area-inset-top, 0px))\n    var(--ds-overlay-within)\n    calc(var(--ds-overlay-inner) + env(safe-area-inset-bottom, 0px))\n    calc(var(--ds-overlay-inner) + env(safe-area-inset-left, 0px));\n  border-left: 0;\n}\n\n/* The page behind a native sheet or drawer holds still while it is open, as\n * the element holds it (the element saves and restores the scroll itself). */\n:root:has(dialog.ds-overlay:is(.ds-overlay--sheet, .ds-overlay--drawer):modal) {\n  overflow: hidden;\n  overscroll-behavior: none;\n}\n\n/* Out to its edge, a little quicker than it came; and in from it. */\n:is(ds-overlay > dialog[data-ds-edge], dialog.ds-overlay:is(.ds-overlay--sheet, .ds-overlay--drawer)):not([open]) {\n  --ds-overlay-motion: var(--ds-overlay-exit, 260ms);\n  transform: var(--ds-overlay-away);\n}\n\n@starting-style {\n  :is(ds-overlay > dialog[data-ds-edge], dialog.ds-overlay:is(.ds-overlay--sheet, .ds-overlay--drawer))[open] {\n    transform: var(--ds-overlay-away);\n  }\n}\n\n:is(ds-overlay > dialog[data-ds-edge], dialog.ds-overlay:is(.ds-overlay--sheet, .ds-overlay--drawer))::backdrop {\n  opacity: calc(1 - var(--ds-overlay-progress, 0));\n  transition:\n    opacity var(--ds-overlay-motion, 380ms) ease,\n    overlay var(--ds-overlay-motion, 380ms) allow-discrete,\n    display var(--ds-overlay-motion, 380ms) allow-discrete;\n}\n\n:is(ds-overlay > dialog[data-ds-edge], dialog.ds-overlay:is(.ds-overlay--sheet, .ds-overlay--drawer)):not([open])::backdrop {\n  opacity: 0;\n}\n\n@starting-style {\n  :is(ds-overlay > dialog[data-ds-edge], dialog.ds-overlay:is(.ds-overlay--sheet, .ds-overlay--drawer))[open]::backdrop {\n    opacity: 0;\n  }\n}\n\n/* While a finger holds it, it follows the finger alone. */\n:is(ds-overlay > dialog[data-ds-edge], dialog.ds-overlay:is(.ds-overlay--sheet, .ds-overlay--drawer))[data-ds-overlay-dragging],\n:is(ds-overlay > dialog[data-ds-edge], dialog.ds-overlay:is(.ds-overlay--sheet, .ds-overlay--drawer))[data-ds-overlay-dragging]::backdrop {\n  transition: none;\n}\n\n/* Reduced motion: no slide. It fades where it stands, a dragged one too. */\n@media (prefers-reduced-motion: reduce) {\n  :is(ds-overlay > dialog[data-ds-edge], dialog.ds-overlay:is(.ds-overlay--sheet, .ds-overlay--drawer)) {\n    --ds-overlay-motion: 150ms;\n    transition:\n      opacity var(--ds-overlay-motion) ease,\n      overlay var(--ds-overlay-motion) allow-discrete,\n      display var(--ds-overlay-motion) allow-discrete;\n  }\n\n  :is(ds-overlay > dialog[data-ds-edge], dialog.ds-overlay:is(.ds-overlay--sheet, .ds-overlay--drawer)):not([open]) {\n    --ds-overlay-motion: 150ms;\n    transform: var(--ds-overlay-held);\n    opacity: 0;\n  }\n\n  @starting-style {\n    :is(ds-overlay > dialog[data-ds-edge], dialog.ds-overlay:is(.ds-overlay--sheet, .ds-overlay--drawer))[open] {\n      transform: var(--ds-overlay-held);\n      opacity: 0;\n    }\n  }\n}\n\n/*\n * The screen: an overlay over the whole screen, for navigation folded away on\n * a narrow screen (`ds-header`, `ds-page drawer`, `attachOverlay()`).\n *\n * The panel is the dialog frame (`dialog.ds-overlay`) laid over the whole\n * screen, on the page's own paper, a square of room on every side. Its first\n * row holds the close button where the menu button stood; what the page\n * folded away (its navigation and actions) follows, every link one square\n * high. The page script `0-face/attach-overlay.ts` opens it: it moves the folded parts\n * into the panel and back, keeps focus inside, closes on Escape, on a link and\n * when the screen widens, and holds the page's scroll while it is open.\n * `ds-header` and `ds-page drawer` use the same script and these rules.\n *\n *   ds-overlay--screen         on a <dialog class=\"ds-overlay\">, the panel\n *   ds-overlay__bar             the first row: the close button at its end\n *   ds-overlay__close           the close button, an icon button\n *   ds-overlay__toggle          the button that opens it: it carries\n *                              two icons, the first shown while closed and the\n *                              second (close) while open\n *\n * Tokens: `--ds-overlay-paper` (the page's paper by default).\n */\n\n:is(ds-overlay > dialog[data-ds-type=\"screen\"], dialog.ds-overlay.ds-overlay--screen) {\n  --ds-overlay-width: 100vw;\n  width: 100vw;\n  max-width: none;\n  height: 100dvh;\n  max-height: none;\n  margin: 0;\n  padding: var(--ds-unit);\n  gap: 0;\n  border: 0;\n  background: var(--ds-overlay-paper, var(--background, Canvas));\n  overflow-y: auto;\n}\n\n:is(ds-overlay > dialog[data-ds-type=\"screen\"], dialog.ds-overlay.ds-overlay--screen)[open] {\n  display: flex;\n  flex-direction: column;\n  align-items: stretch;\n  gap: var(--ds-unit);\n}\n\n/* Content that supplies its own room, as the documentation's navigation does. */\n:is(ds-overlay > dialog[data-ds-type=\"screen\"], dialog.ds-overlay.ds-overlay--screen)[data-ds-overlay-flush] {\n  padding: 0;\n  gap: 0;\n}\n\n:is(ds-overlay > dialog[data-ds-type=\"screen\"], dialog.ds-overlay.ds-overlay--screen)::backdrop {\n  background: transparent;\n}\n\n/* It arrives by fading in and settling half a square, and leaves at once. */\n@media (prefers-reduced-motion: no-preference) {\n  :is(ds-overlay > dialog[data-ds-type=\"screen\"], dialog.ds-overlay.ds-overlay--screen)[open] {\n    transition: opacity 160ms ease-out, transform 160ms ease-out;\n  }\n\n  @starting-style {\n    :is(ds-overlay > dialog[data-ds-type=\"screen\"], dialog.ds-overlay.ds-overlay--screen)[open] {\n      opacity: 0;\n      transform: translateY(calc(var(--ds-unit) / -2));\n    }\n  }\n}\n\n.ds-overlay__bar {\n  display: flex;\n  align-items: center;\n  justify-content: flex-end;\n  min-height: var(--ds-row-height);\n}\n\n/* Centred in the last square of the row, as the menu button is. Two classes,\n   so the button's own margin does not undo it. */\n.ds-overlay__bar > .ds-overlay__close {\n  margin-inline-end: calc((var(--ds-unit) - var(--ds-control-height)) / 2);\n}\n\n/* The toggle shows its first icon while closed and its second while open; the\n   close button, a copy of it, shows the second. */\n.ds-overlay__toggle:not([aria-expanded=\"true\"]) > :nth-child(2),\n.ds-overlay__toggle[aria-expanded=\"true\"] > :first-child:not(:only-child),\n.ds-overlay__close > :first-child:not(:only-child) {\n  display: none;\n}\n/*\n * A site header, as plain classes on native elements.\n *\n * One row of one square, a square of room around it: the brand at the start\n * (at least twelve squares), the navigation in the middle of the row, centred\n * on the page whatever the brand and the actions hold, the actions at the end:\n * three columns, the two outer ones sharing what the middle leaves. Every link is\n * one square high, a square apart, in the text's ink; the page you are on\n * (`aria-current=\"page\"`) stands on a hairline of the full ink, the others\n * show a faint one under the pointer. Below thirty squares of width the\n * navigation and the actions fold into a drawer: the menu button takes their\n * place at the end of the row, and `0-face/header.ts` opens them over the page.\n * The `ds-header` element draws the same parts.\n *\n *   ds-header              the row, a <header>\n *   ds-header__brand       the mark or name, a link home; a picture in it is one square high\n *   ds-header__nav         the links, a <nav>\n *   ds-header__actions     buttons or links at the end\n *   ds-header__toggle      the menu button: `.ds-button.ds-button--icon.ds-overlay__toggle`\n *                          with a menu icon and a close icon, shown only on a narrow screen\n *   ds-header--sticky      stays at the top of the page as it scrolls, on the paper\n *\n * Tokens: `--ds-header-brand` (the brand's width, at least twelve squares),\n * `--ds-header-paper` (the sticky header's paper) and `--ds-header-line` (the\n * hairline under a sticky header, none by default).\n */\n\n.ds-header {\n  box-sizing: border-box;\n  container-type: inline-size;\n  display: grid;\n  grid-template-columns: minmax(max-content, 1fr) auto minmax(max-content, 1fr);\n  align-items: center;\n  gap: calc(2 * var(--ds-unit));\n  min-width: 0;\n  margin: 0;\n  padding: var(--ds-unit);\n  color: var(--ds-text-color);\n  font-family: var(--ds-typeface-regular);\n  font-feature-settings: var(--ds-font-features);\n  font-size: var(--ds-type-size-default);\n  font-weight: var(--ds-type-weight-default);\n  line-height: var(--ds-unit);\n  letter-spacing: var(--ds-type-letterspacing-default);\n  text-transform: none;\n}\n\n.ds-header--sticky {\n  position: sticky;\n  top: 0;\n  z-index: 1;\n  background: var(--ds-header-paper, var(--background, Canvas));\n  box-shadow: inset 0 -1px var(--ds-header-line, transparent);\n}\n\n.ds-header__brand {\n  box-sizing: border-box;\n  grid-column: 1;\n  justify-self: start;\n  display: inline-flex;\n  flex: 0 0 auto;\n  min-width: var(--ds-header-brand, calc(12 * var(--ds-unit)));\n  align-items: center;\n  gap: calc(var(--ds-unit) / 2);\n  height: var(--ds-unit);\n  color: inherit;\n  font-family: var(--ds-typeface-medium);\n  font-weight: var(--ds-type-weight-bold);\n  text-decoration: none;\n  white-space: nowrap;\n}\n\n.ds-header__brand :is(img, svg) {\n  display: block;\n  width: auto;\n  height: var(--ds-unit);\n}\n\n.ds-header__nav,\n.ds-header__actions {\n  display: flex;\n  align-items: center;\n  gap: var(--ds-unit);\n  min-width: 0;\n  margin: 0;\n  padding: 0;\n}\n\n.ds-header > .ds-header__nav {\n  grid-column: 2;\n  justify-content: center;\n  flex-wrap: wrap;\n  row-gap: 0;\n}\n\n.ds-header > .ds-header__actions {\n  grid-column: 3;\n  justify-self: end;\n  justify-content: flex-end;\n  gap: calc(var(--ds-unit) / 2);\n}\n\n/* A link in the navigation: the text's ink on a one-square line. */\n.ds-header__nav a {\n  display: block;\n  height: var(--ds-unit);\n  color: inherit;\n  text-decoration-line: underline;\n  text-decoration-thickness: 1px;\n  text-decoration-color: transparent;\n  text-underline-offset: calc(2px * var(--ds-sf));\n  white-space: nowrap;\n}\n\n.ds-header__nav a:hover {\n  text-decoration-color: color-mix(in srgb, currentColor 40%, transparent);\n}\n\n.ds-header__nav a[aria-current]:not([aria-current=\"false\"]) {\n  text-decoration-color: currentColor;\n}\n\n.ds-header__nav a:focus-visible,\n.ds-header__brand:focus-visible {\n  outline: 2px solid var(--ds-focus-ring);\n  outline-offset: 1px;\n}\n\n/* The menu button stands at the end of the row, and only on a narrow screen.\n   Two classes, so the button's own display and margin do not undo it. */\n.ds-header > .ds-header__toggle {\n  display: none;\n  grid-column: 3;\n  justify-self: end;\n  /* Centred in the last square of the row, where the close button stands too. */\n  margin-inline-end: calc((var(--ds-unit) - var(--ds-control-height)) / 2);\n}\n\n@container (max-width: 599px) {\n  .ds-header > :is(.ds-header__nav, .ds-header__actions) {\n    display: none;\n  }\n\n  .ds-header > .ds-header__toggle {\n    display: inline-flex;\n  }\n\n  .ds-header > .ds-header__brand {\n    min-width: 0;\n  }\n}\n\n/* In the drawer the navigation is a column of one-square links, and the\n   actions a row one square below it. */\n.ds-overlay--screen :is(.ds-header__nav, .ds-header__actions) {\n  flex: 0 0 auto;\n  flex-direction: column;\n  align-items: flex-start;\n  flex-wrap: nowrap;\n  gap: 0;\n  margin: 0;\n}\n\n.ds-overlay--screen .ds-header__actions {\n  flex-direction: row;\n  flex-wrap: wrap;\n  gap: calc(var(--ds-unit) / 2);\n}\n\n/* App title bar: two squares high, one square inset, regular title and a hairline. */\n.ds-header--app {\n  height: calc(2 * var(--ds-unit));\n  min-height: calc(2 * var(--ds-unit));\n  padding: 0 var(--ds-unit);\n  gap: var(--ds-unit);\n  background: var(--ds-header-paper, var(--background, Canvas));\n  box-shadow: inset 0 -1px var(--ds-header-line, var(--ds-border-color));\n}\n.ds-header--app .ds-header__brand {\n  min-width: 0;\n  font-family: var(--ds-typeface-regular);\n  font-weight: var(--ds-type-weight-default);\n}\n/*\n * A site footer, as plain classes on native elements.\n *\n * The brand and its line at the start, twelve squares wide; the columns of\n * links beside it, eight squares each (or the whole squares a column names in\n * `--ds-footer-column-width`), two squares apart; then, two squares below, the\n * legal line at the start, the policies under it as secondary buttons, and the\n * preferences (language and theme, as `ds-cycle` or native buttons) at the\n * end. Every line is one square, the column headings in the title grey, the\n * links in the text's ink with a faint hairline under the pointer. A column of\n * contact lines mixes words alone (`<span>`) with links: its links, and a\n * heading that is a link, are underlined as `.ds-link` is. A stacked column\n * (`--stack`) draws its icon links as round marks one control high, one a\n * line, one square wide at the end of the row. A hairline runs along its top.\n * Columns that do not fit beside the brand go below it, and on a narrow screen\n * everything stands in one column. The `ds-footer` element draws the same\n * parts from data.\n *\n *   ds-footer                    the block, a <footer>\n *   ds-footer__brand             the mark and its line\n *   ds-footer__mark              the mark or name, a link home; a picture in it is one square high\n *   ds-footer__tagline           a line about the site, muted\n *   ds-footer__columns           the columns, a <nav> or <div>\n *   ds-footer__column            one column: a heading and its links\n *   ds-footer__column--stack     a column of round marks, one square wide at the row's end\n *   ds-footer__heading           the column's heading, one line in the title grey, or an <a> in it\n *   ds-footer__icons             a column's icon links, a row of marks (a stack in --stack)\n *   ds-footer__links             the lines, a <ul> with one <a> or <span> per <li>\n *   ds-footer__base              the last row, two squares below\n *   ds-footer__legal             in it, the copyright and legal line, muted\n *   ds-footer__policies          under it, links as secondary buttons (a.ds-button.ds-button--secondary)\n *   ds-footer__preferences       in it, the language and theme controls, at its end\n *\n * Tokens: `--ds-footer-line` (the hairline along the top),\n * `--ds-footer-column-width` (a column's width in squares, 8),\n * `--ds-footer-mark-background` and `--ds-footer-mark-color` (a round mark's\n * disc and glyph: the ink and the paper).\n */\n\n.ds-footer {\n  box-sizing: border-box;\n  container-type: inline-size;\n  display: flex;\n  flex-wrap: wrap;\n  align-items: flex-start;\n  gap: calc(2 * var(--ds-unit));\n  min-width: 0;\n  margin: 0;\n  padding: calc(2 * var(--ds-unit)) var(--ds-unit) var(--ds-unit);\n  box-shadow: inset 0 1px var(--ds-footer-line, var(--ds-border-color));\n  color: var(--ds-text-color);\n  font-family: var(--ds-typeface-regular);\n  font-feature-settings: var(--ds-font-features);\n  font-size: var(--ds-type-size-default);\n  font-weight: var(--ds-type-weight-default);\n  line-height: var(--ds-unit);\n  letter-spacing: var(--ds-type-letterspacing-default);\n  text-transform: none;\n}\n\n.ds-footer :is(p, h2, h3, h4, ul) {\n  margin: 0;\n  font: inherit;\n  letter-spacing: inherit;\n}\n\n.ds-footer__brand {\n  display: flex;\n  flex: 0 0 calc(12 * var(--ds-unit));\n  flex-direction: column;\n  max-width: 100%;\n  min-width: 0;\n}\n\n.ds-footer__mark {\n  display: inline-flex;\n  align-items: center;\n  gap: calc(var(--ds-unit) / 2);\n  align-self: flex-start;\n  height: var(--ds-unit);\n  color: inherit;\n  font-family: var(--ds-typeface-medium);\n  font-weight: var(--ds-type-weight-bold);\n  text-decoration: none;\n}\n\n.ds-footer__mark :is(img, svg) {\n  display: block;\n  width: auto;\n  height: var(--ds-unit);\n}\n\n.ds-footer__tagline,\n.ds-footer__legal {\n  color: var(--ds-text-color-muted);\n}\n\n.ds-footer__columns {\n  display: flex;\n  /* Never narrower than one column: below that the columns go under the brand. */\n  flex: 1 1 calc(8 * var(--ds-unit));\n  flex-wrap: wrap;\n  gap: var(--ds-unit) calc(2 * var(--ds-unit));\n  min-width: min(100%, calc(8 * var(--ds-unit)));\n}\n\n.ds-footer__column {\n  display: flex;\n  flex: 0 0 calc(var(--ds-footer-column-width, 8) * var(--ds-unit));\n  flex-direction: column;\n  max-width: 100%;\n  min-width: 0;\n}\n\n.ds-footer .ds-footer__heading {\n  color: var(--ds-title-color);\n}\n\n.ds-footer .ds-footer__links {\n  padding: 0;\n  list-style: none;\n}\n\n.ds-footer__links li {\n  margin: 0;\n  padding: 0;\n}\n\n.ds-footer__links > li > *,\n.ds-footer__heading > a {\n  display: inline-block;\n  max-width: 100%;\n  overflow: hidden;\n  color: inherit;\n  text-decoration-line: underline;\n  text-decoration-thickness: 1px;\n  text-decoration-color: transparent;\n  text-overflow: clip;\n  text-underline-offset: calc(2px * var(--ds-sf));\n  vertical-align: top;\n  white-space: nowrap;\n}\n\n/* A cut line fades over its last square, never an ellipsis (0-face/cut-fade.ts marks it). */\n:is(.ds-footer__links > li > *, .ds-footer__heading > a)[data-cut=\"end\"] {\n  mask-image: linear-gradient(to right, #000 calc(100% - var(--ds-unit)), transparent);\n}\n:is(.ds-footer__links > li > *, .ds-footer__heading > a)[data-cut=\"end\"]:dir(rtl) {\n  mask-image: linear-gradient(to left, #000 calc(100% - var(--ds-unit)), transparent);\n}\n\n.ds-footer__links a:hover {\n  text-decoration-color: color-mix(in srgb, currentColor 40%, transparent);\n}\n\n/* Among words alone (a contact column) a link, and a heading that is a link, is\n   underlined as .ds-link is: the text's ink, a hairline 40% of it, full under the pointer. */\n.ds-footer .ds-footer__heading > a,\n.ds-footer__links:has(> li > :not(a)) a {\n  color: var(--ds-text-color);\n  text-decoration-color: color-mix(in srgb, currentColor 40%, transparent);\n}\n\n:is(.ds-footer__heading > a, .ds-footer__links:has(> li > :not(a)) a):hover {\n  text-decoration-color: currentColor;\n}\n\n/* A column's icon links (a brand's marks: Instagram, Facebook, LinkedIn) stand first, in a row of\n   their own one square high, each mark a whole square, half a square apart, named by its label. */\n.ds-footer .ds-footer__icons {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 0 calc(var(--ds-unit) / 2);\n  margin: 0;\n  padding: 0;\n  list-style: none;\n}\n\n.ds-footer__icons li {\n  margin: 0;\n  padding: 0;\n}\n\n.ds-footer__icons a {\n  display: flex;\n  align-items: flex-end;\n  height: var(--ds-unit);\n  color: inherit;\n}\n\n.ds-footer__icons .ds-icon {\n  --ds-icon-size: 20px;\n}\n\n.ds-footer__icons a:hover {\n  color: var(--ds-text-color-muted);\n}\n\n/* A stacked column: its marks one a line at the end of the row, each a round\n   disc one control high in the ink on the sixteen of its square, the glyph in\n   the paper's colour, flush with the square's start. */\n.ds-footer .ds-footer__column--stack {\n  flex: 0 0 var(--ds-unit);\n  margin-inline-start: auto;\n}\n\n.ds-footer__column--stack .ds-footer__icons {\n  flex-direction: column;\n  flex-wrap: nowrap;\n}\n\n.ds-footer__column--stack .ds-footer__icons li {\n  display: flex;\n  align-items: flex-end;\n  height: var(--ds-unit);\n}\n\n.ds-footer__column--stack .ds-footer__icons a {\n  display: grid;\n  place-items: center;\n  width: var(--ds-control-height);\n  height: var(--ds-control-height);\n  border-radius: 50%;\n  corner-shape: round;\n  background: var(--ds-footer-mark-background, var(--ds-text-color));\n  color: var(--ds-footer-mark-color, light-dark(var(--ds-white), var(--ds-black)));\n}\n\n.ds-footer__column--stack .ds-footer__icons .ds-icon {\n  --ds-icon-size: 14px;\n}\n\n.ds-footer__column--stack .ds-footer__icons a:hover {\n  background: var(--ds-text-color-muted);\n  color: var(--ds-footer-mark-color, light-dark(var(--ds-white), var(--ds-black)));\n}\n\n.ds-footer__links a[aria-current]:not([aria-current=\"false\"]) {\n  text-decoration-color: currentColor;\n}\n\n:is(.ds-footer__links a, .ds-footer__heading a, .ds-footer__icons a, .ds-footer__mark):focus-visible {\n  outline: 2px solid var(--ds-focus-ring);\n  outline-offset: 1px;\n}\n\n/* The last row, two squares below: the legal line at the start, the\n   policies on the square under it, the preferences at the end; on a narrow\n   screen the preferences go first, a square above the legal line. */\n.ds-footer__base {\n  display: flex;\n  flex: 0 0 100%;\n  flex-wrap: wrap;\n  align-items: flex-start;\n  gap: 0 calc(2 * var(--ds-unit));\n  min-width: 0;\n}\n\n.ds-footer .ds-footer__policies {\n  display: flex;\n  flex: 0 0 100%;\n  flex-wrap: wrap;\n  order: 1;\n  gap: 0 calc(var(--ds-unit) / 2);\n  margin: 0;\n  padding: 0;\n  list-style: none;\n}\n\n.ds-footer__policies li {\n  display: flex;\n  align-items: flex-end;\n  height: var(--ds-unit);\n  margin: 0;\n  padding: 0;\n}\n\n.ds-footer__legal {\n  flex: 1 1 auto;\n  min-width: 0;\n}\n\n.ds-footer__preferences {\n  display: flex;\n  flex: 0 0 auto;\n  flex-wrap: wrap;\n  align-items: center;\n  gap: 0 calc(var(--ds-unit) / 2);\n  min-height: var(--ds-unit);\n  margin-inline-start: auto;\n}\n\n@container (max-width: 599px) {\n  .ds-footer__brand,\n  .ds-footer__columns {\n    flex-basis: 100%;\n  }\n\n  .ds-footer__base {\n    flex-direction: column;\n  }\n\n  .ds-footer__preferences {\n    order: -1;\n    margin-inline-start: 0;\n  }\n\n  .ds-footer__preferences:not([hidden]) {\n    margin-block-end: var(--ds-unit);\n  }\n\n  .ds-footer .ds-footer__policies {\n    flex-basis: auto;\n  }\n}\n\n/*\n * A document page: terms, a privacy policy, a legal notice, a help article.\n *\n * The contents stand at the start, twelve squares wide, and stay in view as\n * the writing scrolls past; the writing, two squares after them, is a reading\n * column of at most thirty-two squares, native headings and paragraphs marked\n * `data-ds-prose` (prose.css draws them). Where the two do not fit side by\n * side the contents stand above the writing. Every line is one square; the\n * contents' links are in the text's ink, the section in view (`aria-current`)\n * on a hairline of the full ink, a third level half a square in. The\n * `ds-document` element builds the contents from the headings and marks the\n * one in view.\n *\n *   ds-document                  the page's two columns\n *   ds-document__toc             the contents, a <nav>, as tall as the writing\n *   ds-document__contents        inside it, what stays in view: the title and the list\n *   ds-document__toc-title       \"Contents\", one line in the title grey\n *   ds-document__toc-list        the links, an <ol> with one link per <li>\n *   ds-document__toc-sub         an <li> for a third-level heading\n *   ds-document__body            the writing, marked data-ds-prose\n *\n * A definition table (`ds-definitions` on a <dl>) sets terms beside what they\n * mean, as a legal notice such as 特定商取引法に基づく表記 does: the term eight\n * squares wide in the muted ink, its definition beside it, each pair on a\n * hairline at its foot with half a square above and below, as a prose table's\n * rows are. Pairs may stand in a <div> each. Below twenty-four squares the\n * definition goes under its term. It works inside or outside prose.\n *\n * Tokens: `--ds-document-top` (where the contents stop below the top of the\n * view, one square; add a sticky header's height), `--ds-definitions-term`\n * (the term column, eight squares).\n */\n\n.ds-document {\n  box-sizing: border-box;\n  display: flex;\n  flex-wrap: wrap;\n  align-items: stretch;\n  gap: var(--ds-unit) calc(2 * var(--ds-unit));\n  min-width: 0;\n  color: var(--ds-text-color);\n  font-family: var(--ds-typeface-regular);\n  font-feature-settings: var(--ds-font-features);\n  font-size: var(--ds-type-size-default);\n  font-weight: var(--ds-type-weight-default);\n  line-height: var(--ds-unit);\n  letter-spacing: var(--ds-type-letterspacing-default);\n}\n\n/* The contents column stretches to the writing's height when the two stand\n   side by side, so what is inside it can stay in view; standing above the\n   writing it is only as tall as itself, and nothing sticks. */\n.ds-document__toc {\n  flex: 0 0 calc(12 * var(--ds-unit));\n  max-width: 100%;\n  min-width: 0;\n}\n\n.ds-document__contents {\n  position: sticky;\n  top: var(--ds-document-top, var(--ds-unit));\n}\n\n.ds-document__toc-title {\n  margin: 0;\n  color: var(--ds-title-color);\n  font: inherit;\n  letter-spacing: inherit;\n}\n\n.ds-document__toc-list,\n.ds-document__toc-list ol {\n  margin: 0;\n  padding: 0;\n  list-style: none;\n}\n\n.ds-document__toc-list li {\n  margin: 0;\n  padding: 0;\n}\n\n.ds-document__toc-list .ds-document__toc-sub {\n  padding-inline-start: calc(var(--ds-unit) / 2);\n}\n\n.ds-document__toc-list a {\n  display: block;\n  overflow: hidden;\n  color: inherit;\n  text-decoration-line: underline;\n  text-decoration-thickness: 1px;\n  text-decoration-color: transparent;\n  text-overflow: clip;\n  text-underline-offset: calc(2px * var(--ds-sf));\n  white-space: nowrap;\n}\n\n/* A cut link fades over its last square, never an ellipsis (0-face/cut-fade.ts marks it). */\n.ds-document__toc-list a[data-cut=\"end\"] {\n  mask-image: linear-gradient(to right, #000 calc(100% - var(--ds-unit)), transparent);\n}\n.ds-document__toc-list a[data-cut=\"end\"]:dir(rtl) {\n  mask-image: linear-gradient(to left, #000 calc(100% - var(--ds-unit)), transparent);\n}\n\n.ds-document__toc-list a:hover {\n  text-decoration-color: color-mix(in srgb, currentColor 40%, transparent);\n}\n\n.ds-document__toc-list a[aria-current]:not([aria-current=\"false\"]) {\n  text-decoration-color: currentColor;\n}\n\n.ds-document__toc-list a:focus-visible {\n  outline: 2px solid var(--ds-focus-ring);\n  outline-offset: -1px;\n}\n\n/* The writing: at least twenty squares beside the contents, else below them. */\n.ds-document__body {\n  flex: 1 1 0;\n  min-width: min(100%, calc(20 * var(--ds-unit)));\n  max-width: calc(32 * var(--ds-unit));\n}\n\n/* A heading the contents jump to stops where the contents do. */\n.ds-document__body :is(h1, h2, h3, h4, h5, h6) {\n  scroll-margin-top: var(--ds-document-top, var(--ds-unit));\n}\n\n/* A definition table. */\n\n.ds-definitions {\n  box-sizing: border-box;\n  container-type: inline-size;\n  display: grid;\n  grid-template-columns: minmax(0, var(--ds-definitions-term, calc(8 * var(--ds-unit)))) minmax(0, 1fr);\n  margin: 0;\n  padding: 0;\n  color: var(--ds-text-color);\n  font-family: var(--ds-typeface-regular);\n  font-size: var(--ds-type-size-default);\n  line-height: var(--ds-unit);\n  letter-spacing: var(--ds-type-letterspacing-default);\n}\n\n.ds-definitions > div {\n  display: contents;\n}\n\n.ds-definitions :is(dt, dd) {\n  box-sizing: border-box;\n  min-width: 0;\n  margin: 0;\n  padding-block: calc(var(--ds-unit) / 2);\n  box-shadow: inset 0 -1px var(--ds-border-color);\n  font: inherit;\n  letter-spacing: inherit;\n  line-height: var(--ds-unit);\n  overflow-wrap: anywhere;\n}\n\n.ds-definitions dt {\n  grid-column: 1;\n  padding-inline-end: calc(var(--ds-unit) / 2);\n  color: var(--ds-text-color-muted);\n}\n\n.ds-definitions dd {\n  grid-column: 2;\n}\n\n@container (max-width: 479px) {\n  .ds-definitions dt,\n  .ds-definitions dd {\n    grid-column: 1 / -1;\n  }\n\n  .ds-definitions dt {\n    padding-block-end: 0;\n    padding-inline-end: 0;\n    box-shadow: none;\n  }\n\n  .ds-definitions dd {\n    padding-block-start: 0;\n  }\n}\n\n/*\n * A bento, as plain classes on native elements: tiles of different sizes\n * standing half a square (10px) apart, each a card (`.ds-card`, or any box)\n * that holds one thing. The `ds-bento` element draws the same.\n *\n * Flow (the default): columns that share the width (`--ds-bento-columns`,\n * three), a tile one column wide or more (`data-span`, or\n * `--ds-bento-span`) and one row high or more (`data-rows`, or\n * `--ds-bento-rows`); a row is as high as its tallest tile, at least\n * `--ds-bento-row` (ten squares by default). Below thirty squares of width\n * the bento is one column.\n *\n * Squares (`data-squares`): the bento is exactly `--ds-bento-columns` squares wide\n * and every tile is placed on whole squares (`data-place=\"x y w h\"`,\n * counted from 0). Tiles are placed a square apart, and a tile's surface\n * reaches a quarter square towards each tile beside it, so they stand half a\n * square apart while what they hold stays on the squares, and the bento's\n * own edges stay on the page's. `placeBento()` (0-face/bento.ts) reads the\n * places and sets the reach; the element does it itself.\n *\n *   data-span=\"2\"          a tile two columns wide (to 6)\n *   data-rows=\"2\"          a tile two rows high (to 6)\n *   data-place=\"0 0 15 7\"  a tile's square, width and height in squares\n *\n * `data-fit` lets a squares bento's columns share a measure other than its\n * squares (each tile still reaches a quarter square, so the gap is a column\n * less half a square); `data-layout` (say `phone`) makes `placeBento()` take each tile's\n * `data-place-phone` where it has one, a place per layout.\n *\n * Tokens: `--ds-bento-unit` (the square, `--ds-unit` by default),\n * `--ds-bento-gap` (half of it), `--ds-bento-columns`, `--ds-bento-row`,\n * `--ds-bento-padding` (a squares tile that is not a card, one square), and\n * on a tile `--ds-bento-span`, `--ds-bento-rows`.\n */\n\n.ds-bento {\n  --ds-bento-unit: var(--ds-unit);\n  --ds-bento-gap: calc(var(--ds-bento-unit) / 2);\n  box-sizing: border-box;\n  display: grid;\n  grid-template-columns: repeat(var(--ds-bento-columns, 3), minmax(0, 1fr));\n  grid-auto-rows: minmax(var(--ds-bento-row, calc(10 * var(--ds-bento-unit))), auto);\n  grid-auto-flow: row dense;\n  gap: var(--ds-bento-gap);\n  margin: 0;\n  padding: 0;\n  list-style: none;\n}\n.ds-bento[hidden] { display: none; }\n\n.ds-bento > * {\n  --ds-card-width: auto;\n  --ds-card-height: auto;\n  box-sizing: border-box;\n  min-width: 0;\n  min-height: 0;\n  grid-column: span var(--ds-bento-span, 1);\n  grid-row: span var(--ds-bento-rows, 1);\n}\n.ds-bento > [data-span=\"2\"] { --ds-bento-span: 2; }\n.ds-bento > [data-span=\"3\"] { --ds-bento-span: 3; }\n.ds-bento > [data-span=\"4\"] { --ds-bento-span: 4; }\n.ds-bento > [data-span=\"5\"] { --ds-bento-span: 5; }\n.ds-bento > [data-span=\"6\"] { --ds-bento-span: 6; }\n.ds-bento > [data-rows=\"2\"] { --ds-bento-rows: 2; }\n.ds-bento > [data-rows=\"3\"] { --ds-bento-rows: 3; }\n.ds-bento > [data-rows=\"4\"] { --ds-bento-rows: 4; }\n.ds-bento > [data-rows=\"5\"] { --ds-bento-rows: 5; }\n.ds-bento > [data-rows=\"6\"] { --ds-bento-rows: 6; }\n\n@media (max-width: 600px) {\n  .ds-bento:not([data-squares]) { grid-template-columns: minmax(0, 1fr); }\n  .ds-bento:not([data-squares]) > * { grid-column: auto; }\n}\n\n/* Squares: every tile on whole squares, a square apart, its surface a quarter square nearer each neighbour. */\n.ds-bento[data-squares] {\n  --ds-bento-reach: calc(var(--ds-bento-unit) / 4);\n  /* Exactly its squares wide: each column one square. */\n  width: calc(var(--ds-bento-columns, 48) * var(--ds-bento-unit));\n  max-width: none;\n  grid-template-columns: repeat(var(--ds-bento-columns, 48), var(--ds-bento-unit));\n  grid-auto-rows: var(--ds-bento-unit);\n  grid-auto-flow: row;\n  gap: 0;\n}\n/* Fit: the columns share a measure narrower (or wider) than the squares, the rows still one square. */\n.ds-bento[data-squares][data-fit] {\n  width: auto;\n  grid-template-columns: repeat(var(--ds-bento-columns, 48), minmax(0, 1fr));\n}\n.ds-bento[data-squares] > * {\n  --ds-bento-inset-top: calc(var(--ds-bento-reach) * var(--ds-bento-top, 0));\n  --ds-bento-inset-end: calc(var(--ds-bento-reach) * var(--ds-bento-end, 0));\n  --ds-bento-inset-bottom: calc(var(--ds-bento-reach) * var(--ds-bento-bottom, 0));\n  --ds-bento-inset-start: calc(var(--ds-bento-reach) * var(--ds-bento-start, 0));\n  grid-column: calc(var(--ds-bento-x, 0) + 1) / span var(--ds-bento-w, 4);\n  grid-row: calc(var(--ds-bento-y, 0) + 1) / span var(--ds-bento-h, 4);\n  margin: calc(-1 * var(--ds-bento-inset-top)) calc(-1 * var(--ds-bento-inset-end)) calc(-1 * var(--ds-bento-inset-bottom)) calc(-1 * var(--ds-bento-inset-start));\n}\n/* A card grows its own padding by the reach (card.css); any other tile is padded here, a square inside. */\n.ds-bento[data-squares] > :not(.ds-card, ds-card) {\n  padding:\n    calc(var(--ds-bento-padding, var(--ds-bento-unit)) + var(--ds-bento-inset-top))\n    calc(var(--ds-bento-padding, var(--ds-bento-unit)) + var(--ds-bento-inset-end))\n    calc(var(--ds-bento-padding, var(--ds-bento-unit)) + var(--ds-bento-inset-bottom))\n    calc(var(--ds-bento-padding, var(--ds-bento-unit)) + var(--ds-bento-inset-start));\n}\n/*\n * A carousel, as plain classes on native elements.\n *\n * A carousel is a row of slides that snaps sideways, one slide to a stop,\n * with a row of controls one square high under it: optional previous and\n * next buttons and a dot for each slide. Slides are the track's width, or\n * whole squares wide, a whole number of squares apart (one by default). The\n * controls stand one square below the track, on the grid from its start.\n * The `ds-carousel` element draws the same parts, and\n * `0-face/carousel.ts` gives the native markup its behaviour.\n *\n *   ds-carousel                    the region: track, controls, status;\n *                                  `data-slides=\"auto\"` for slides of their\n *                                  own width, `data-bleed` `end` or `both`,\n *                                  `data-snap=\"none\"` to slide freely\n *   ds-carousel__track             the scroller; every child is a slide\n *   ds-carousel__controls          the row of buttons and dots\n *   ds-carousel__previous, __next, icon buttons, on `.ds-button.ds-button--icon`\n *   __pause\n *   ds-carousel__status            the polite announcement, kept out of sight\n *\n *   The dots are `ds-progress--dots` from progress.css.\n *\n * A strip of slides of their own width can run on past its box to the\n * window's end edge, or to both edges, while its first slide keeps to the\n * box's start, so it lines up with the page's column; `--ds-carousel-before`\n * and `--ds-carousel-after` are the room to the edges, which the script\n * measures.\n *\n * Tokens: `--ds-carousel-slide` (a slide's width, the track's by default)\n * and `--ds-carousel-gap` (between slides, one square by default).\n */\n\n.ds-carousel {\n  box-sizing: border-box;\n  display: grid;\n  grid-template-columns: minmax(0, 1fr);\n  row-gap: var(--ds-unit);\n  position: relative;\n  min-width: 0;\n  margin: 0;\n}\n\n.ds-carousel__track {\n  box-sizing: border-box;\n  display: grid;\n  grid-auto-flow: column;\n  grid-auto-columns: var(--ds-carousel-slide, 100%);\n  column-gap: var(--ds-carousel-gap, var(--ds-unit));\n  min-width: 0;\n  margin: 0;\n  padding: 0;\n  list-style: none;\n  overflow-x: auto;\n  overflow-y: hidden;\n  overscroll-behavior-x: contain;\n  scroll-snap-type: x mandatory;\n  scrollbar-width: none;\n}\n\n.ds-carousel__track::-webkit-scrollbar {\n  display: none;\n}\n\n/* A mouse dragging the strip (0-face/carousel.ts dragTrack): no snapping until it lets go, and no words selected on the way. */\n.ds-carousel__track[data-dragging] {\n  scroll-snap-type: none;\n  cursor: grabbing;\n  user-select: none;\n}\n\n/* Slides of their own width, several in view. */\n.ds-carousel[data-slides=\"auto\"] > .ds-carousel__track {\n  grid-auto-columns: max-content;\n}\n\n.ds-carousel[data-snap=\"none\"] > .ds-carousel__track {\n  scroll-snap-type: none;\n}\n\n/* To the window's end edge: the track reaches out over the room after the\n   box and keeps a gap at its end, so the last slide stops short of the edge. */\n.ds-carousel[data-bleed=\"end\"] > .ds-carousel__track {\n  margin-inline-end: calc(-1 * var(--ds-carousel-after, 0px));\n  padding-inline-end: var(--ds-carousel-gap, var(--ds-unit));\n}\n\n/* To both edges: the track reaches out both ways, and the first slide, and\n   each one it stops at, still stands on the box's start. */\n.ds-carousel[data-bleed=\"both\"] > .ds-carousel__track {\n  margin-inline: calc(-1 * var(--ds-carousel-before, 0px)) calc(-1 * var(--ds-carousel-after, 0px));\n  padding-inline: var(--ds-carousel-before, 0px) var(--ds-carousel-gap, var(--ds-unit));\n  scroll-padding-inline-start: var(--ds-carousel-before, 0px);\n}\n\n.ds-carousel__track:focus-visible {\n  outline: 2px solid var(--ds-focus-ring);\n  outline-offset: 1px;\n}\n\n.ds-carousel__track > * {\n  box-sizing: border-box;\n  min-width: 0;\n  margin: 0;\n  scroll-snap-align: start;\n}\n\n/* One slide to a stop; a strip of several in view may pass a few. */\n.ds-carousel:not([data-slides=\"auto\"]) > .ds-carousel__track > * {\n  scroll-snap-stop: always;\n}\n\n.ds-carousel__controls {\n  display: flex;\n  align-items: center;\n  height: var(--ds-row-height);\n  min-width: 0;\n}\n\n/* The buttons take a one-square cell each, as the dots do. Two classes, so\n   the button's own reset of its margin does not undo it. */\n.ds-carousel .ds-carousel__previous,\n.ds-carousel .ds-carousel__next,\n.ds-carousel .ds-carousel__pause {\n  flex: none;\n  margin: calc((var(--ds-unit) - var(--ds-control-height)) / 2);\n}\n\n/* Previous points back along the reading direction. */\n.ds-carousel:dir(rtl) :is(.ds-carousel__previous, .ds-carousel__next) > * {\n  transform: scaleX(-1);\n}\n\n.ds-carousel__status {\n  position: absolute;\n  width: 1px;\n  height: 1px;\n  overflow: hidden;\n  clip-path: inset(50%);\n  white-space: nowrap;\n}\n\n/*\n * A card, as plain classes on native elements.\n *\n * A card holds one thing on a fill of its own: its name in the muted ink on\n * one square, a title in the display size on lines of a square and a half, writing,\n * and a picture of it (`ds-card__media`) a square below, which can run off\n * the card's foot and end edge and be cut there, never framed. Its size is\n * given in whole squares, its padding one square, its corners a card's\n * (`--ds-radius-card`). A card that opens something is one press target, an\n * `<a class=\"ds-card\" href>`: the pointer tints it, keyboard focus rings it\n * 2px inside and its picture rises a little. Ordinary writing still sits\n * straight on the paper; a card is for a thing shown among others, as in a\n * slide. The `ds-card` element draws the same parts.\n *\n *   ds-card                      the card; `data-tone` names a palette colour\n *                                for its fill (the colour's pastel, dim in dark\n *                                mode, from palette.css, which one.css imports),\n *                                `ink` for the ink with the paper's words\n *   ds-card--outlined            a 1px line and no fill\n *   ds-card__label               its name, muted, on one square\n *   ds-card__title               the title, display size, a square and a half a line\n *   ds-card__body                writing, one square a line\n *   ds-card__media               the picture, on the card's foot and a square below the words at\n *                                least, so pictures side by side line up; square where it meets the card\n *   ds-card__media--center       standing in the card's middle\n *   ds-card__media--bleed        running on past the padding to the end edge\n *\n * Tokens: `--ds-card-width` and `--ds-card-height` (whole squares; the\n * content's size by default), `--ds-card-padding` (one square), and\n * `--ds-card-fill`, `--ds-card-ink` and `--ds-card-muted`.\n */\n\n.ds-card {\n  --ds-card-fill: var(--ds-fill);\n  --ds-card-ink: var(--ds-text-color);\n  --ds-card-muted: var(--ds-text-color-muted);\n  --ds-card-padding: var(--ds-unit);\n  --ds-card-text-padding: max(var(--ds-card-padding), var(--ds-card-text-inset-min, 0px));\n  position: relative;\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: column;\n  align-items: stretch;\n  width: var(--ds-card-width, auto);\n  height: var(--ds-card-height, auto);\n  min-width: 0;\n  margin: 0;\n  /* In a squares bento the surface reaches a quarter square towards its neighbours (`--ds-bento-inset-*`, 0 elsewhere), and the padding grows by as much so what it holds stays on the squares. */\n  padding:\n    calc(var(--ds-card-text-padding) + var(--ds-bento-inset-top, 0px))\n    calc(var(--ds-card-text-padding) + var(--ds-bento-inset-end, 0px))\n    var(--ds-bento-inset-bottom, 0px)\n    calc(var(--ds-card-text-padding) + var(--ds-bento-inset-start, 0px));\n  overflow: hidden;\n  border-radius: var(--ds-radius-card);\n  background: var(--ds-card-fill);\n  color: var(--ds-card-ink);\n  font-family: var(--ds-typeface-regular);\n  font-size: var(--ds-type-size-default);\n  text-decoration: none;\n  -webkit-tap-highlight-color: transparent;\n}\n\n/* Opt-in safe text inset; media still stands on the card's foot. */\n.ds-card:not(:has(> .ds-card__media:not([hidden]))) {\n  padding-block-end: max(var(--ds-card-text-inset-min, 0px), var(--ds-bento-inset-bottom, 0px));\n}\n\n.ds-card[hidden] {\n  display: none;\n}\n\n.ds-card--outlined {\n  --ds-card-fill: transparent;\n  box-shadow: inset 0 0 0 1px var(--ds-border-color);\n}\n\n.ds-card[data-tone=\"apple-green\"] { --ds-card-fill: var(--one-apple-green-pastel); }\n.ds-card[data-tone=\"chartreuse\"] { --ds-card-fill: var(--one-chartreuse-pastel); }\n.ds-card[data-tone=\"every-green\"] { --ds-card-fill: var(--one-every-green-pastel); }\n.ds-card[data-tone=\"yellow\"] { --ds-card-fill: var(--one-yellow-pastel); }\n.ds-card[data-tone=\"orange\"] { --ds-card-fill: var(--one-orange-pastel); }\n.ds-card[data-tone=\"tuned-red\"] { --ds-card-fill: var(--one-tuned-red-pastel); }\n.ds-card[data-tone=\"pink\"] { --ds-card-fill: var(--one-pink-pastel); }\n.ds-card[data-tone=\"sharp-blue\"] { --ds-card-fill: var(--one-sharp-blue-pastel); }\n.ds-card[data-tone=\"winning-blue\"] { --ds-card-fill: var(--one-winning-blue-pastel); }\n.ds-card[data-tone=\"hysteric-blue\"] { --ds-card-fill: var(--one-hysteric-blue-pastel); }\n.ds-card[data-tone=\"purple\"] { --ds-card-fill: var(--one-purple-pastel); }\n.ds-card[data-tone=\"metal-green\"] { --ds-card-fill: var(--one-metal-green-pastel); }\n.ds-card[data-tone=\"drip-yellow\"] { --ds-card-fill: var(--one-drip-yellow-pastel); }\n.ds-card[data-tone=\"sand\"] { --ds-card-fill: var(--one-sand-pastel); }\n.ds-card[data-tone=\"old-gold\"] { --ds-card-fill: var(--one-old-gold-pastel); }\n.ds-card[data-tone=\"red-for-blood\"] { --ds-card-fill: var(--one-red-for-blood-pastel); }\n.ds-card[data-tone=\"dark-red-variant\"] { --ds-card-fill: var(--one-dark-red-variant-pastel); }\n.ds-card[data-tone=\"signal-red\"] { --ds-card-fill: var(--one-signal-red-pastel); }\n/* On a pastel fill the muted grey falls under 4.5:1 (color.text-contrast): the muted ink is the card's ink let\n   into its fill instead, 5:1 or more on every pastel. */\n.ds-card[data-tone]:not([data-tone=\"ink\"]) {\n  --ds-card-muted: color-mix(in srgb, var(--ds-card-ink) 72%, var(--ds-card-fill));\n}\n\n.ds-card[data-tone=\"ink\"] {\n  --ds-card-fill: var(--ds-black);\n  --ds-card-ink: var(--ds-white);\n  --ds-card-muted: color-mix(in srgb, var(--ds-white) 60%, transparent);\n  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ds-white) 8%, transparent);\n}\n\n/* Words: each line on the lower sixteen of its square. They keep their room\n   in a card of a set height; only the picture is cut at the foot. */\n.ds-card__label,\n.ds-card__title,\n.ds-card__body {\n  flex: none;\n}\n\n.ds-card__label {\n  margin: 0 0 var(--ds-card-label-gap, 0px);\n  padding-top: calc(4px * var(--ds-sf, 1));\n  color: var(--ds-card-muted);\n  font: inherit;\n  line-height: var(--ds-type-lineheight-default, calc(16px * var(--ds-sf, 1)));\n}\n\n.ds-card__title {\n  margin: 0 0 var(--ds-card-title-gap, 0px);\n  color: var(--ds-card-ink);\n  font-family: var(--ds-typeface-medium);\n  font-size: var(--ds-type-size-display);\n  font-weight: var(--ds-type-weight-bold);\n  /* A title that wraps keeps its lines together: a square and a half each. */\n  line-height: calc(1.5 * var(--ds-unit));\n  letter-spacing: calc(var(--ds-display-text-tracking, -0.4px) * var(--ds-sf, 1));\n  text-wrap: balance;\n}\n\n.ds-card__body {\n  margin: 0;\n  line-height: var(--ds-unit);\n}\n\n/* The picture stands on the card's foot, a square below the words at least: in a card taller than\n   its words the room goes above the picture, so the pictures of cards side by side (stretched to one\n   height by their row) stand on one level. */\n.ds-card__media {\n  display: flex;\n  flex: none;\n  align-items: flex-start;\n  justify-content: flex-start;\n  min-width: 0;\n  margin-top: auto;\n  padding-top: var(--ds-unit);\n}\n\n/* A picture has no corners of its own where it meets the card: on the foot the card's edge cuts it\n   square. Only a corner standing free inside the card, towards the words, keeps a picture's corner. */\n.ds-card .ds-card__media > :is(img, picture, video, canvas, svg) {\n  border-end-start-radius: 0;\n  border-end-end-radius: 0;\n}\n\n.ds-card__media--center {\n  justify-content: center;\n  margin-inline: calc(-1 * var(--ds-card-text-padding));\n}\n\n/* A picture that bleeds runs on to the end edge and stands on the foot, the space a taller card\n   leaves going above it (or, taller than its room, it starts below the words and the foot cuts it).\n   It has no corners of its own: the card's edges cut it square, and its corner towards the words\n   is square too, a picture or square never rounded where it meets the card. */\n.ds-card__media--bleed {\n  flex: 1 0 auto;\n  flex-direction: column;\n  align-items: stretch;\n  justify-content: safe flex-end;\n  margin-inline-end: calc(-1 * (var(--ds-card-text-padding) + var(--ds-bento-inset-end, 0px)));\n  margin-block-end: calc(-1 * var(--ds-bento-inset-bottom, 0px));\n  --ds-radius: 0px;\n  --ds-image-end-radius: 0px;\n  --ds-image-foot-radius: 0px;\n}\n\n.ds-card__media > * {\n  flex: none;\n}\n\n/* A card that opens something. */\na.ds-card,\n.ds-card[data-interactive] {\n  cursor: pointer;\n}\n\na.ds-card::after,\n.ds-card[data-interactive]::after {\n  content: \"\";\n  position: absolute;\n  inset: 0;\n  border-radius: inherit;\n  background: transparent;\n  pointer-events: none;\n}\n\na.ds-card:focus-visible,\n.ds-card[data-interactive]:focus-visible {\n  outline: 2px solid var(--ds-focus-ring);\n  outline-offset: -2px;\n}\n\n@media (hover: hover) {\n  a.ds-card:hover::after,\n  .ds-card[data-interactive]:hover::after {\n    background: color-mix(in srgb, var(--ds-card-ink) 4%, transparent);\n  }\n}\n\na.ds-card:active::after,\n.ds-card[data-interactive]:active::after {\n  background: color-mix(in srgb, var(--ds-card-ink) 8%, transparent);\n}\n\n/* Optional spacing before a slotted footer tag; zero preserves the normal card. */\n.ds-card__body ::slotted(ds-tag) { margin-block-start: var(--ds-card-footer-gap, 0px); }\n/*\n * Figures, as plain classes on native elements: a stat and a group of stats.\n * The `ds-stat` element draws the same parts; controls.css imports this\n * file. A value against its range, steps and page dots are `progress.css`.\n *\n * Everything sits on the paper with no box, every line is one square and\n * widths come in whole squares. Colour is kept for a state: the danger colour\n * for a figure that is over.\n *\n * A stat: a label, a figure and a line for its change or caption.\n *\n *   ds-stat                  the block, as wide as its column\n *   ds-stat__label           one line, muted; an icon may lead it on its own square\n *   ds-stat__icon            the square an icon from the library stands on\n *   ds-stat__figure          the figure in tabular numerals, 20 on two squares\n *   ds-stat__digit           one digit in a cell of one width, for a face without tabular numerals\n *   ds-stat__caption         one line, muted, under the figure\n *   ds-stat__change          the change at the start of the caption, in the text colour;\n *                            --danger or --warning where the page knows which way is bad\n *   ds-stat--danger, --warning    the figure in that colour\n *   ds-stats                 a group of stats on whole squares: columns eight\n *                            squares wide, one square between them and between rows\n *   ds-stats[data-frame]     the group in a rounded 1px frame with a 1px line\n *                            between stats, as a framed table: the columns share\n *                            the width, each stat's words 4px in from its lines\n *                            as a framed table's, and a square at its foot, so\n *                            the frame stays whole squares high\n *\n * Tokens: `--ds-stat-size` (the figure's type size before the scale, 20px)\n * and `--ds-stat-lines` (the squares its line takes, 2), `--ds-stat-typeface`\n * (the medium face), `--ds-stat-digit` (a digit cell's width, 1ch),\n * `--ds-stat-change-color`, and `--ds-stats-width` (a column's width in\n * squares, 8).\n *\n */\n\n/* ---- Stat ------------------------------------------------------------ */\n\n.ds-stat {\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n  min-width: 0;\n  margin: 0;\n  color: var(--ds-text-color);\n  font-family: var(--ds-typeface-regular);\n  font-feature-settings: var(--ds-font-features);\n  font-size: var(--ds-type-size-default);\n  font-weight: var(--ds-type-weight-default);\n  line-height: var(--ds-unit);\n  letter-spacing: var(--ds-type-letterspacing-default);\n  text-transform: none;\n}\n\n.ds-stat__label,\n.ds-stat__figure,\n.ds-stat__caption {\n  box-sizing: border-box;\n  max-width: 100%;\n  margin: 0;\n  font: inherit;\n  letter-spacing: inherit;\n}\n\n/* Optional spacing between distinct text groups, independent of line height. */\n.ds-stat__label { margin-block-end: var(--ds-stat-label-gap, 0px); }\n.ds-stat__figure { margin-block-end: var(--ds-stat-figure-gap, 0px); }\n\n.ds-stat__label,\n.ds-stat__caption {\n  display: flex;\n  align-items: flex-start;\n  min-height: var(--ds-unit);\n  color: var(--ds-text-color-muted);\n  overflow-wrap: var(--ds-stat-text-overflow-wrap, anywhere);\n}\n\n.ds-stat__icon {\n  display: inline-flex;\n  flex: none;\n  align-items: center;\n  justify-content: center;\n  width: var(--ds-unit);\n  height: var(--ds-unit);\n}\n\n.ds-stat__figure {\n  display: block;\n  overflow: hidden;\n  font-family: var(--ds-stat-typeface, var(--ds-typeface-medium));\n  font-size: calc(var(--ds-stat-size, var(--ds-display-text-size, 20px)) * var(--ds-sf, 1));\n  font-weight: var(--ds-type-weight-bold);\n  font-variant-numeric: tabular-nums;\n  line-height: calc(var(--ds-stat-lines, 2) * var(--ds-unit));\n  min-height: calc(var(--ds-stat-lines, 2) * var(--ds-unit));\n  letter-spacing: calc(var(--ds-display-text-tracking, -0.4px) * var(--ds-sf, 1));\n  white-space: var(--ds-stat-figure-white-space, nowrap);\n  overflow-wrap: var(--ds-stat-figure-overflow-wrap, normal);\n  text-overflow: clip;\n}\n\n/* A figure too wide for its column fades over its last square, never an ellipsis (0-face/cut-fade.ts marks it). */\n.ds-stat__figure[data-cut=\"end\"] {\n  mask-image: linear-gradient(to right, #000 calc(100% - var(--ds-unit)), transparent);\n}\n.ds-stat__figure[data-cut=\"end\"]:dir(rtl) {\n  mask-image: linear-gradient(to left, #000 calc(100% - var(--ds-unit)), transparent);\n}\n\n.ds-stat__digit {\n  display: inline-block;\n  width: var(--ds-stat-digit, 1ch);\n  text-align: center;\n}\n\n.ds-stat--danger .ds-stat__figure {\n  color: var(--ds-danger-color);\n}\n\n.ds-stat--warning .ds-stat__figure {\n  color: var(--ds-warning-color);\n}\n\n.ds-stat__change {\n  display: inline-flex;\n  flex: none;\n  align-items: center;\n  height: var(--ds-unit);\n  margin-inline-end: calc(4px * var(--ds-sf, 1));\n  color: var(--ds-stat-change-color, var(--ds-text-color));\n  font-variant-numeric: tabular-nums;\n  white-space: nowrap;\n}\n\n.ds-stat__change--danger {\n  --ds-stat-change-color: var(--ds-danger-color);\n}\n\n.ds-stat__change--warning {\n  --ds-stat-change-color: var(--ds-warning-color);\n}\n\n.ds-stats {\n  box-sizing: border-box;\n  display: grid;\n  grid-template-columns: repeat(auto-fill, min(100%, calc(var(--ds-stats-width, 8) * var(--ds-unit))));\n  gap: var(--ds-unit);\n  margin: 0;\n  padding: 0;\n  list-style: none;\n}\n\n.ds-stats[data-frame] {\n  --ds-stats-radius: var(--ds-radius-card, calc(4px * var(--ds-sf, 1)));\n  grid-template-columns: repeat(auto-fit, minmax(min(100%, calc(var(--ds-stats-width, 8) * var(--ds-unit))), 1fr));\n  position: relative;\n  gap: 0;\n  border-radius: var(--ds-stats-radius);\n}\n/* The frame is drawn over the stats, as a framed table's is over its cells. */\n.ds-stats[data-frame]::after {\n  position: absolute;\n  inset: 0;\n  z-index: 1;\n  box-sizing: border-box;\n  border: 1px solid var(--ds-border-color, light-dark(#d8d8d8, #3d3d3d));\n  border-radius: var(--ds-stats-radius);\n  content: \"\";\n  pointer-events: none;\n}\n.ds-stats[data-frame] > * {\n  min-width: 0;\n  padding: 0 calc(4px * var(--ds-sf, 1)) var(--ds-unit);\n}\n.ds-stats[data-frame] > * + * {\n  box-shadow: inset 1px 0 0 var(--ds-border-color, light-dark(#d8d8d8, #3d3d3d));\n}\n.ds-stats[data-frame]:dir(rtl) > * + * {\n  box-shadow: inset -1px 0 0 var(--ds-border-color, light-dark(#d8d8d8, #3d3d3d));\n}\n\n.ds-stats > li {\n  min-width: 0;\n  margin: 0;\n}\n\n/*\n * Progress, as plain classes on native elements: a value against its range,\n * a sequence of steps, or a dot for each page. The `ds-progress` element\n * draws the same parts; controls.css imports this file.\n *\n * Everything sits on the paper with no box, every line is one square and\n * widths come in whole squares. Colour is kept for a state: the danger colour\n * for a value that is over or a step that failed, the ink for the current\n * step and the current dot.\n *\n * A value against its range, one square high (HTML's <progress>):\n *\n *   ds-progress              the row; role=\"meter\" with aria-valuenow, -min, -max and -valuetext\n *   ds-progress__fill        the bar, half a square high, drawn to --ds-progress-value (0 to 1)\n *   ds-progress--squares     the range in squares instead, each one square\n *   ds-progress__square      one square of the range; --on when it is filled\n *   ds-progress--over        past the end: filled whole in the danger colour\n *\n * Tokens: `--ds-progress-value`, `--ds-progress-color` (the ink by default)\n * and `--ds-progress-track` (the grey fill).\n *\n * A sequence of steps, one square high, each step on whole squares:\n *\n *   ds-progress--steps       with ds-progress, on an <ol>; the steps on one row, joined by a line\n *   ds-progress--vertical    one step to a row, each with room for its body under it\n *   ds-progress__step        an <li>; aria-current=\"step\" on the current one\n *   ds-progress__step--done, --current, --failed    states; upcoming without one\n *   ds-progress__link        a step that goes somewhere: an <a href> around its mark and label\n *   ds-progress__mark        the number (or the done or failed icon), one control high\n *   ds-progress__label       the step's name on one line\n *   ds-progress__state       the state in words for assistive technology, hidden (\"Done\")\n *   ds-progress__body        what belongs under a step in a vertical sequence\n *\n * A dot for each page, one square each:\n *\n *   ds-progress--dots        with ds-progress, a group of dots (role=\"group\")\n *   ds-progress__dot         a button; `data-state` is `past`, `current` (with\n *                            `aria-current=\"true\"`), `next`, `future`, or `end` for a\n *                            last dot marked as an end\n *\n * Tokens: the dot colours `--ds-progress-dot-past` and `-future` (the muted\n * text colour by default), `-current`, `-next` and `-end` (the text colour),\n * set on the dots or any element around them. Past, current and next dots are\n * filled; future dots and the end marker are rings.\n */\n\n/* ---- A value against its range: the bar, or the range in squares ---- */\n\n.ds-progress {\n  box-sizing: border-box;\n  position: relative;\n  display: block;\n  width: 100%;\n  height: var(--ds-unit);\n  margin: 0;\n}\n\n/* The range and its bar are a band half a square high across the middle of\n   the row, as a chart's ratio is drawn. */\n.ds-progress:not(.ds-progress--squares, .ds-progress--steps, .ds-progress--dots)::before,\n.ds-progress__fill {\n  position: absolute;\n  inset-inline: 0;\n  top: calc(var(--ds-unit) / 4);\n  height: calc(var(--ds-unit) / 2);\n}\n\n.ds-progress:not(.ds-progress--squares, .ds-progress--steps, .ds-progress--dots)::before {\n  content: \"\";\n  background: var(--ds-progress-track, var(--ds-fill));\n}\n\n.ds-progress__fill {\n  display: block;\n  background: var(--ds-progress-color, var(--ds-text-color));\n  transform: scaleX(var(--ds-progress-value, 0));\n  transform-origin: left center;\n  transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);\n}\n\n.ds-progress__fill:dir(rtl) {\n  transform-origin: right center;\n}\n\n.ds-progress--over .ds-progress__fill {\n  background: var(--ds-danger-color);\n  transform: none;\n}\n\n.ds-progress--squares {\n  display: flex;\n  width: max-content;\n  max-width: 100%;\n  overflow: hidden;\n}\n\n.ds-progress__square {\n  flex: none;\n  width: calc(var(--ds-unit) - 1px);\n  height: calc(var(--ds-unit) - 1px);\n  margin-inline-end: 1px;\n  background: var(--ds-progress-track, var(--ds-fill));\n}\n\n.ds-progress__square--on {\n  background: var(--ds-progress-color, var(--ds-text-color));\n}\n\n.ds-progress--over .ds-progress__square {\n  background: var(--ds-danger-color);\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .ds-progress__fill {\n    transition: none;\n  }\n}\n\n/* ---- A sequence of steps --------------------------------------------- */\n\n.ds-progress--steps {\n  box-sizing: border-box;\n  position: static;\n  display: flex;\n  width: auto;\n  height: auto;\n  flex-wrap: wrap;\n  align-items: flex-start;\n  min-width: 0;\n  margin: 0;\n  padding: 0;\n  list-style: none;\n  color: var(--ds-text-color);\n  font-family: var(--ds-typeface-regular);\n  font-feature-settings: var(--ds-font-features);\n  font-size: var(--ds-type-size-default);\n  font-weight: var(--ds-type-weight-default);\n  line-height: var(--ds-unit);\n  letter-spacing: var(--ds-type-letterspacing-default);\n  text-transform: none;\n}\n\n/* Each step rounds its width up to whole squares where the browser can size\n   to content in calc; elsewhere it hugs its words. */\n.ds-progress__step {\n  --ds-progress-mark: transparent;\n  --ds-progress-mark-ink: var(--ds-text-color-muted);\n  --ds-progress-mark-line: var(--ds-border-color);\n  box-sizing: border-box;\n  position: relative;\n  display: flex;\n  align-items: flex-start;\n  min-width: 0;\n  max-width: 100%;\n  width: max-content;\n  width: calc-size(max-content, round(up, size, var(--ds-unit)));\n  min-height: var(--ds-unit);\n  margin: 0;\n  color: var(--ds-text-color-muted);\n}\n\n/* A line joins a step to the next: at least one square, across whatever the\n   step's rounding leaves, a quarter of a square short of each end. */\n.ds-progress__step:not(:last-child)::after {\n  content: \"\";\n  flex: 1 0 var(--ds-unit);\n  height: var(--ds-unit);\n  background: linear-gradient(var(--ds-border-color), var(--ds-border-color)) center / calc(100% - var(--ds-unit) / 2) 1px no-repeat;\n}\n\n.ds-progress__step--done {\n  --ds-progress-mark: var(--ds-fill);\n  --ds-progress-mark-ink: var(--ds-text-color);\n  --ds-progress-mark-line: transparent;\n  color: var(--ds-text-color);\n}\n\n.ds-progress__step--current {\n  --ds-progress-mark: var(--ds-text-color);\n  --ds-progress-mark-ink: var(--ds-paper);\n  --ds-progress-mark-line: transparent;\n  color: var(--ds-text-color);\n}\n\n.ds-progress__step--failed {\n  --ds-progress-mark: var(--ds-danger-color);\n  --ds-progress-mark-ink: light-dark(var(--ds-white), var(--ds-black));\n  --ds-progress-mark-line: transparent;\n  color: var(--ds-danger-color);\n}\n\n.ds-progress__link {\n  display: flex;\n  align-items: flex-start;\n  min-width: 0;\n  color: inherit;\n  text-decoration: none;\n  border-radius: var(--ds-radius);\n}\n\n.ds-progress__link:hover .ds-progress__label {\n  text-decoration: underline;\n  text-decoration-thickness: 1px;\n  text-underline-offset: calc(3px * var(--ds-sf, 1));\n}\n\n.ds-progress__link:focus-visible {\n  outline: 2px solid var(--ds-focus-ring);\n  outline-offset: -2px;\n}\n\n.ds-progress__mark {\n  box-sizing: border-box;\n  display: flex;\n  flex: none;\n  align-items: center;\n  justify-content: center;\n  width: var(--ds-control-height);\n  height: var(--ds-control-height);\n  margin: calc((var(--ds-unit) - var(--ds-control-height)) / 2);\n  overflow: hidden;\n  background: var(--ds-progress-mark);\n  box-shadow: inset 0 0 0 1px var(--ds-progress-mark-line);\n  color: var(--ds-progress-mark-ink);\n  --ds-icon-color: var(--ds-progress-mark-ink);\n  font-family: var(--ds-typeface-medium);\n  font-size: var(--ds-type-size-small);\n  font-weight: var(--ds-type-weight-bold);\n  font-variant-numeric: tabular-nums;\n  line-height: var(--ds-control-height);\n  letter-spacing: 0;\n}\n\n.ds-progress__label {\n  min-width: 0;\n  padding-inline-end: calc(4px * var(--ds-sf, 1));\n  overflow: hidden;\n  white-space: nowrap;\n  text-overflow: clip;\n}\n\n/* A cut step name fades over its last square, never an ellipsis (0-face/cut-fade.ts marks it). */\n.ds-progress__label[data-cut=\"end\"] {\n  mask-image: linear-gradient(to right, #000 calc(100% - var(--ds-unit)), transparent);\n}\n.ds-progress__label[data-cut=\"end\"]:dir(rtl) {\n  mask-image: linear-gradient(to left, #000 calc(100% - var(--ds-unit)), transparent);\n}\n\n.ds-progress__step--current .ds-progress__label {\n  font-family: var(--ds-typeface-medium);\n  font-weight: var(--ds-type-weight-bold);\n}\n\n.ds-progress__state {\n  position: absolute;\n  width: 1px;\n  height: 1px;\n  overflow: hidden;\n  clip-path: inset(50%);\n  white-space: nowrap;\n}\n\n.ds-progress--vertical {\n  flex-direction: column;\n  flex-wrap: nowrap;\n}\n\n.ds-progress--vertical .ds-progress__step {\n  flex-wrap: wrap;\n  width: 100%;\n}\n\n.ds-progress--vertical .ds-progress__step::after {\n  content: none;\n}\n\n/* Its content stands in a column, so an inline element in it (text drawn by\n   an element, say) takes its own lines rather than a line box's descent. */\n.ds-progress__body {\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: column;\n  flex: 1 0 100%;\n  min-width: 0;\n  padding-inline-start: var(--ds-unit);\n  color: var(--ds-text-color);\n}\n\n/* ---- A dot for each page ------------------------------------------- */\n\n.ds-progress--dots {\n  position: static;\n  display: inline-flex;\n  width: auto;\n  flex: none;\n  align-items: center;\n  height: var(--ds-row-height);\n  margin: 0;\n  padding: 0;\n}\n\n.ds-progress__dot {\n  --ds-progress-dot-color: var(--ds-progress-dot-future, var(--ds-text-color-muted));\n  appearance: none;\n  box-sizing: border-box;\n  display: inline-flex;\n  flex: none;\n  align-items: center;\n  justify-content: center;\n  width: var(--ds-unit);\n  height: var(--ds-unit);\n  margin: 0;\n  padding: 0;\n  border: 0;\n  border-radius: var(--ds-radius);\n  background: transparent;\n  color: inherit;\n  cursor: pointer;\n  -webkit-tap-highlight-color: transparent;\n}\n\n/* The dot itself: 4px, scaled with the surface, a fifth of the square. */\n.ds-progress__dot::before {\n  content: \"\";\n  box-sizing: border-box;\n  width: calc(4px * var(--ds-sf, 1));\n  height: calc(4px * var(--ds-sf, 1));\n  border-radius: 50%;\n  background: transparent;\n  box-shadow: inset 0 0 0 1px var(--ds-progress-dot-color);\n  transition: transform 160ms ease-out;\n}\n\n.ds-progress__dot[data-state=\"past\"] { --ds-progress-dot-color: var(--ds-progress-dot-past, var(--ds-text-color-muted)); }\n.ds-progress__dot[data-state=\"next\"] { --ds-progress-dot-color: var(--ds-progress-dot-next, var(--ds-text-color)); }\n.ds-progress__dot[data-state=\"end\"] { --ds-progress-dot-color: var(--ds-progress-dot-end, var(--ds-text-color)); }\n.ds-progress__dot[aria-current=\"true\"] { --ds-progress-dot-color: var(--ds-progress-dot-current, var(--ds-text-color)); }\n\n.ds-progress__dot:is([data-state=\"past\"], [data-state=\"next\"], [aria-current=\"true\"])::before {\n  background: var(--ds-progress-dot-color);\n}\n\n/* The current dot is half again as large. */\n.ds-progress__dot[aria-current=\"true\"]::before {\n  transform: scale(1.5);\n}\n\n.ds-progress__dot:hover:not([aria-current=\"true\"])::before {\n  transform: scale(1.25);\n}\n\n.ds-progress__dot:focus-visible {\n  outline: 2px solid var(--ds-focus-ring);\n  outline-offset: -2px;\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .ds-progress__dot::before {\n    transition: none;\n  }\n}\n\n/*\n * Rows, as plain classes on native elements: the `ds-row` and `ds-sidebar`\n * elements' look without the elements.\n *\n * A row is one square high, and what it holds stands on the lower sixteen of\n * the square with the spare four above, as Ezo sets every row: a line of\n * words on a 16px line box, a 16px icon and a 16px control all end on the\n * row's bottom line, so the capitals (7px below the top line, baseline 3px\n * above the next) are centred on an icon beside them. On an `<a href>` or a\n * `<button>` the whole row is one press target, a row, a tile or a card: the pointer over it, the\n * press and the focus ring cover the row, and its content keeps the row's\n * layout. A row that also holds controls of its own (a quick action, a link\n * in another cell) is any element, a `<li>`, a `<div>` or a `<tr>`, with one\n * `ds-row__target` inside: that link or button takes the press anywhere on\n * the row, and every other control inside stays separately pressable.\n *\n *   ds-row                 a row one square high; a press target on <a> or <button>\n *   ds-row__target         the row's press target, when the row holds other controls\n *   ds-row--auto           as high as its content, at least one square\n *   ds-row--stacked        the content stacked, each line one square (a tile, a card)\n *   ds-row--nav            a navigation row: the sidebar's two-pixel corners\n *   ds-row__picture        a record's picture before its words (a date or colour tile, an\n *                          avatar, a logo, or a button holding one): sixteen square at the\n *                          start of its square, the words on the next\n *   ds-row__name           a record's words: they hug and give way first; cut, they fade over\n *                          the last square, never an ellipsis (`data-cut=\"end\"`, set by the\n *                          element, or 0-face/cut-fade.ts on a page without Lit)\n *   ds-row__value          the figure or date at the row's end, in tabular figures\n *   aria-current=\"page\"    the destination being shown, filled and in the medium weight\n *   aria-disabled=\"true\"   or `disabled` on a button: dimmed, not pressable\n *\n * A sidebar of nested things (the `ds-sidebar tree` element without Lit) is a\n * `role=\"tree\"` list of `role=\"treeitem\"` rows, flat, each with its\n * `aria-level`, one square further in per level. `0-face/sidebar.ts`\n * (`connectSidebar`) gives it the keyboard of the tree pattern.\n *\n *   ds-sidebar             the tree (`role=\"tree\"`)\n *   ds-sidebar__item       a row (`role=\"treeitem\"`, `aria-level`, `aria-expanded` on a parent, `aria-selected`)\n *   ds-sidebar__disclosure the arrow on its own square, turned down when the row is open; empty on a leaf\n *   ds-sidebar__label      the words; cut, they fade over the last square (`data-cut=\"end\"`)\n *   ds-sidebar__meta       small muted words at the row's end\n *\n * An icon (`.ds-icon`) in a tree row takes a square of its own. Tokens:\n * `--ds-row-padding` (the words' distance from the row's edges, 4px),\n * `--ds-row-fill-hover`, `--ds-row-fill-press`, `--ds-row-fill-current` and\n * `--ds-row-current-weight` (component-tokens.css, shared with the\n * element), `--ds-sidebar-disclosure` (the arrow's drawing, the library's\n * `right` icon) and `--ds-sidebar-indent` (a row's depth in squares, read\n * from `aria-level` up to twelve levels).\n */\n\n:where(.ds-row):not(tr) {\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: row;\n  align-items: flex-end;\n  gap: calc(4px * var(--ds-sf));\n  min-width: 0;\n  height: var(--ds-row-height);\n  margin: 0;\n  line-height: var(--ds-type-lineheight-default);\n}\n\n:where(.ds-row--auto):not(tr) {\n  height: auto;\n  min-height: var(--ds-row-height);\n}\n\n:where(.ds-row--stacked):not(tr) {\n  flex-direction: column;\n  align-items: flex-start;\n  justify-content: flex-start;\n  gap: 0;\n  height: auto;\n}\n\n/* The press target: the row itself, or the one target inside it. */\na.ds-row,\nbutton.ds-row,\n.ds-row__target {\n  appearance: none;\n  box-sizing: border-box;\n  margin: 0;\n  border: 0;\n  background: none;\n  color: inherit;\n  font: inherit;\n  letter-spacing: inherit;\n  text-align: start;\n  text-decoration: none;\n  text-transform: none;\n  cursor: pointer;\n  outline: none;\n  -webkit-tap-highlight-color: transparent;\n}\n\n/* The font inherited above would bring the page's line into the row: the words go back on the\n   sixteen, as every row's (a stacked tile keeps its square lines below). */\na.ds-row,\nbutton.ds-row {\n  position: relative;\n  width: 100%;\n  line-height: var(--ds-type-lineheight-default);\n  padding: 0 var(--ds-row-padding, calc(4px * var(--ds-sf)));\n  border-radius: var(--ds-row-radius, 0);\n}\n\n.ds-row__target {\n  padding: 0;\n}\n\n/* Each line of a tile one square, over the inherited font of a native link or button:\n   a tile's lines wrap, so they stay on whole squares rather than the sixteen. */\n.ds-row.ds-row--stacked {\n  line-height: var(--ds-row-height);\n}\n\n/* A row with a target inside: the target's layers cover the row. */\n.ds-row:has(.ds-row__target) {\n  position: relative;\n  isolation: isolate;\n}\n:where(.ds-row:has(.ds-row__target)):not(tr) {\n  padding-inline: var(--ds-row-padding, calc(4px * var(--ds-sf)));\n}\n.ds-row__target::before,\n.ds-row__target::after {\n  content: \"\";\n  position: absolute;\n  inset: 0;\n  border-radius: var(--ds-row-radius, 0);\n}\n.ds-row__target::before { z-index: 1; }\n.ds-row__target::after { z-index: -1; }\n.ds-row:has(.ds-row__target) :where(a[href], button, input, select, textarea, label, summary, [tabindex]):not(.ds-row__target) {\n  position: relative;\n  z-index: 2;\n}\n\n/*\n * The pointer, the press, the current destination and the focus ring are one layer under the\n * row's content (Joachim, 19 October 2026). On a one-square row it is a square high and sits two\n * pixels around what the row holds: from two above the lower sixteen to two below the row's foot,\n * and two past the content at each side, its corners the icon tiles' 4px and those two more, so a\n * 16px icon stands in it with two all round. It is drawn over the row, never moving its words or\n * icons off the grid. An open row (`data-open`) wears the same layer. A taller row (a stacked\n * tile, `auto`) is filled whole.\n * Tokens: `--ds-row-fill-radius` (6px), `--ds-row-fill-overhang` (2px).\n */\na.ds-row,\nbutton.ds-row {\n  isolation: isolate;\n}\na.ds-row::after,\nbutton.ds-row::after {\n  content: \"\";\n  position: absolute;\n  z-index: -1;\n  pointer-events: none;\n}\na.ds-row::after,\nbutton.ds-row::after,\n.ds-row__target::after {\n  --ds-row-overhang: var(--ds-row-fill-overhang, calc(2px * var(--ds-sf)));\n  inset:\n    calc(var(--ds-row-height) - var(--ds-control-height) - var(--ds-row-overhang))\n    calc(var(--ds-row-padding, calc(4px * var(--ds-sf))) - var(--ds-row-overhang))\n    calc(0px - var(--ds-row-overhang));\n  border-radius: var(--ds-row-radius, var(--ds-row-fill-radius, calc(6px * var(--ds-sf))));\n}\n:is(a, button).ds-row:is(.ds-row--stacked, .ds-row--auto)::after,\n:is(.ds-row--stacked, .ds-row--auto) .ds-row__target::after {\n  inset: 0;\n}\na.ds-row[href]:hover::after,\nbutton.ds-row:hover:not(:disabled)::after,\n.ds-row__target:is(a[href], button:not(:disabled)):hover::after {\n  background: var(--ds-row-fill-hover, var(--ds-fill));\n}\na.ds-row[href]:active::after,\nbutton.ds-row:active:not(:disabled)::after,\n.ds-row__target:is(a[href], button:not(:disabled)):active::after {\n  background: var(--ds-row-fill-press, var(--ds-fill-hover));\n}\n.ds-row:is(a, button)[aria-current]:not([aria-current=\"false\"])::after,\n.ds-row__target[aria-current]:not([aria-current=\"false\"])::after {\n  background: var(--ds-row-fill-current, var(--ds-fill-hover));\n}\n.ds-row:is(a, button)[aria-current]:not([aria-current=\"false\"]),\n.ds-row:has(.ds-row__target[aria-current]:not([aria-current=\"false\"])) {\n  --ds-type-weight-default: var(--ds-row-current-weight, 500);\n  font-weight: var(--ds-row-current-weight, 500);\n}\na.ds-row:focus-visible::after,\nbutton.ds-row:focus-visible::after,\n.ds-row__target:focus-visible::after {\n  outline: 2px solid var(--ds-focus-ring);\n  outline-offset: -2px;\n}\na.ds-row:not([href]),\na.ds-row[aria-disabled=\"true\"],\nbutton.ds-row:disabled,\nbutton.ds-row[aria-disabled=\"true\"],\n.ds-row:has(.ds-row__target:is(:disabled, [aria-disabled=\"true\"], a:not([href]))) {\n  cursor: default;\n  opacity: 0.5;\n}\n.ds-row__target:is(:disabled, [aria-disabled=\"true\"], a:not([href])) {\n  cursor: default;\n}\na.ds-row[aria-disabled=\"true\"]:hover::after,\nbutton.ds-row[aria-disabled=\"true\"]:hover::after {\n  background: none;\n}\n\n.ds-row--nav {\n  --ds-row-radius: calc(2px * var(--ds-sf));\n}\n\n/* The parts of a record's row, as the element draws them: a 16px picture before the name takes\n   the first sixteen of its square and the row's 4px gap puts the words on the next; the name\n   hugs and gives way first; the value stands at the row's end. */\n/* The picture is exactly one control (16px) square, standing on the lower sixteen: whatever\n   holds it (a button that opens it, a property's trigger) adds no width, padding or margin,\n   so the 4px gap is the only space before the words, as in every record row. The measures\n   are important because a button's own face rules are more specific than a part's. */\n:is(.ds-row, ds-row, .ds-row__target) > .ds-row__picture {\n  flex: none;\n  display: inline-flex;\n  align-items: flex-end;\n  box-sizing: border-box;\n  width: var(--ds-control-height) !important;\n  min-width: 0 !important;\n  height: var(--ds-control-height);\n  margin: 0 !important;\n  padding: 0 !important;\n}\n/* A picture that opens something of its own (a date to change) stands over the row's press\n   layer, as the end slot does; a plain tile lets the press through to the row. */\n.ds-row__picture:has(button, a) {\n  position: relative;\n  z-index: 2;\n}\n.ds-row__picture :is(ds-button, button, a) {\n  display: flex;\n  width: 100% !important;\n  min-width: 0 !important;\n  height: 100%;\n  margin: 0 !important;\n  padding: 0 !important;\n}\n.ds-row .ds-row__name {\n  flex: 0 1 auto;\n  min-width: 0;\n  overflow: hidden;\n  white-space: nowrap;\n  text-overflow: clip;\n}\n.ds-row .ds-row__name[data-cut=\"end\"] {\n  mask-image: linear-gradient(to right, #000 calc(100% - var(--ds-unit)), transparent);\n}\n.ds-row:dir(rtl) .ds-row__name[data-cut=\"end\"] {\n  mask-image: linear-gradient(to left, #000 calc(100% - var(--ds-unit)), transparent);\n}\n.ds-row .ds-row__value {\n  flex: none;\n  margin-inline-start: auto;\n  white-space: nowrap;\n  text-align: end;\n  font-variant-numeric: tabular-nums;\n}\n\n/* A sidebar of nested things: the tree. */\n\n.ds-sidebar {\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: column;\n  min-width: 0;\n  margin: 0;\n  padding: 0;\n  list-style: none;\n  color: var(--ds-text-color);\n  font-family: var(--ds-typeface-regular);\n  font-feature-settings: var(--ds-font-features);\n  font-size: var(--ds-type-size-default);\n  font-weight: var(--ds-type-weight-default);\n  line-height: var(--ds-type-lineheight-default);\n  letter-spacing: var(--ds-type-letterspacing-default);\n}\n\n.ds-sidebar__item {\n  box-sizing: border-box;\n  display: flex;\n  align-items: flex-end;\n  height: var(--ds-row-height);\n  min-width: 0;\n  margin: 0;\n  padding-block: 0;\n  padding-inline: calc(var(--ds-sidebar-indent, 0) * var(--ds-unit)) var(--ds-row-padding, calc(4px * var(--ds-sf)));\n  white-space: nowrap;\n  cursor: pointer;\n  user-select: none;\n  outline: none;\n  -webkit-tap-highlight-color: transparent;\n}\n.ds-sidebar__item[hidden] { display: none; }\n.ds-sidebar__item[aria-level=\"2\"] { --ds-sidebar-indent: 1; }\n.ds-sidebar__item[aria-level=\"3\"] { --ds-sidebar-indent: 2; }\n.ds-sidebar__item[aria-level=\"4\"] { --ds-sidebar-indent: 3; }\n.ds-sidebar__item[aria-level=\"5\"] { --ds-sidebar-indent: 4; }\n.ds-sidebar__item[aria-level=\"6\"] { --ds-sidebar-indent: 5; }\n.ds-sidebar__item[aria-level=\"7\"] { --ds-sidebar-indent: 6; }\n.ds-sidebar__item[aria-level=\"8\"] { --ds-sidebar-indent: 7; }\n.ds-sidebar__item[aria-level=\"9\"] { --ds-sidebar-indent: 8; }\n.ds-sidebar__item[aria-level=\"10\"] { --ds-sidebar-indent: 9; }\n.ds-sidebar__item[aria-level=\"11\"] { --ds-sidebar-indent: 10; }\n.ds-sidebar__item[aria-level=\"12\"] { --ds-sidebar-indent: 11; }\n.ds-sidebar__item:hover:not([aria-disabled=\"true\"]) { background: var(--ds-row-fill-hover, var(--ds-fill)); }\n.ds-sidebar__item:active:not([aria-disabled=\"true\"]) { background: var(--ds-row-fill-press, var(--ds-fill-hover)); }\n.ds-sidebar__item[aria-selected=\"true\"] {\n  --ds-type-weight-default: var(--ds-row-current-weight, 500);\n  background: var(--ds-row-fill-current, var(--ds-fill-hover));\n  font-weight: var(--ds-row-current-weight, 500);\n}\n.ds-sidebar__item:focus-visible {\n  outline: 2px solid var(--ds-focus-ring);\n  outline-offset: -2px;\n}\n.ds-sidebar__item[aria-disabled=\"true\"] {\n  cursor: default;\n  opacity: 0.5;\n}\n\n/* The arrow and an icon each stand on a whole square, drawn on the row's sixteen (two\n   pixels below the square's middle); a leaf keeps the arrow's square empty. */\n.ds-sidebar__disclosure,\n.ds-sidebar__item > .ds-icon {\n  flex: 0 0 var(--ds-unit);\n  width: var(--ds-unit);\n  height: var(--ds-unit);\n  -webkit-mask-size: var(--ds-icon-box, calc(14px * var(--ds-sf)));\n  mask-size: var(--ds-icon-box, calc(14px * var(--ds-sf)));\n  -webkit-mask-position: center calc(50% + 2px * var(--ds-sf));\n  mask-position: center calc(50% + 2px * var(--ds-sf));\n}\n.ds-sidebar__disclosure {\n  --ds-icon-box: calc(14px * var(--ds-sf));\n  display: inline-block;\n  color: var(--ds-text-color-muted);\n  background-color: currentColor;\n  -webkit-mask: var(--ds-sidebar-disclosure, url(\"data:image/svg+xml,%3Csvg xmlns='http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg' viewBox='0 0 16 16'%3E%3Cpath d='M13.1566 8.60594H0V9.61651L13.1562 9.61791L10.249 12.5251L10.9558 13.219L15.0636 9.11123L10.9524 5L10.245 5.70734L13.1566 8.60594Z'/%3E%3C/svg%3E\")) center calc(50% + 2px * var(--ds-sf)) / var(--ds-icon-box) no-repeat;\n  mask: var(--ds-sidebar-disclosure, url(\"data:image/svg+xml,%3Csvg xmlns='http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg' viewBox='0 0 16 16'%3E%3Cpath d='M13.1566 8.60594H0V9.61651L13.1562 9.61791L10.249 12.5251L10.9558 13.219L15.0636 9.11123L10.9524 5L10.245 5.70734L13.1566 8.60594Z'/%3E%3C/svg%3E\")) center calc(50% + 2px * var(--ds-sf)) / var(--ds-icon-box) no-repeat;\n  transform: rotate(0deg);\n  transition: transform 120ms ease-out;\n}\n.ds-sidebar__item:not([aria-expanded]) > .ds-sidebar__disclosure {\n  visibility: hidden;\n}\n.ds-sidebar__item[aria-expanded=\"true\"] > .ds-sidebar__disclosure {\n  transform: rotate(90deg);\n}\n.ds-sidebar__label {\n  flex: 1 1 auto;\n  min-width: 0;\n  padding-inline-start: calc(4px * var(--ds-sf));\n  overflow: hidden;\n  text-overflow: clip;\n}\n.ds-sidebar__label[data-cut=\"end\"] {\n  mask-image: linear-gradient(to right, #000 calc(100% - var(--ds-unit)), transparent);\n}\n.ds-sidebar__label[data-cut=\"end\"]:dir(rtl) {\n  mask-image: linear-gradient(to left, #000 calc(100% - var(--ds-unit)), transparent);\n}\n.ds-sidebar__meta {\n  flex: none;\n  padding-inline-start: calc(4px * var(--ds-sf));\n  color: var(--ds-text-color-muted);\n  font-size: var(--ds-type-size-small);\n  font-variant-numeric: tabular-nums;\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .ds-sidebar__disclosure { transition: none; }\n}\n\n@media (forced-colors: active) {\n  .ds-row:is(a, button)[aria-current]:not([aria-current=\"false\"]),\n  .ds-row__target[aria-current]:not([aria-current=\"false\"])::after,\n  .ds-sidebar__item[aria-selected=\"true\"] {\n    outline: 1px solid Highlight;\n    outline-offset: -1px;\n  }\n  .ds-sidebar__disclosure {\n    background-color: CanvasText;\n  }\n}\n\n/* A controlled detail view: the caller marks its open row, and clears it on close.\n   Navigation's current state and the text weight remain independent. */\n.ds-row[data-open]:not([data-open=\"false\"]) {\n  position: relative;\n  isolation: isolate;\n}\n.ds-row[data-open]:not([data-open=\"false\"])::after {\n  content: \"\";\n  position: absolute;\n  z-index: -1;\n  pointer-events: none;\n  --ds-row-overhang: var(--ds-row-fill-overhang, calc(2px * var(--ds-sf)));\n  inset: calc(var(--ds-row-height) - var(--ds-control-height) - var(--ds-row-overhang))\n    calc(var(--ds-row-padding, calc(4px * var(--ds-sf))) - var(--ds-row-overhang))\n    calc(0px - var(--ds-row-overhang));\n  border-radius: var(--ds-row-radius, var(--ds-row-fill-radius, calc(6px * var(--ds-sf))));\n  background: var(--ds-row-fill-current, var(--ds-fill-hover));\n}\n/* A plain row (no press target inside) has no padding of its own: its words and icons stand on\n   the row's edges, so the layer reaches two past them, as a flush row's does. */\n.ds-row[data-open]:not([data-open=\"false\"]):not(a, button, .ds-row--stacked, .ds-row--auto, :has(.ds-row__target))::after {\n  inset: calc(var(--ds-row-height) - var(--ds-control-height) - var(--ds-row-overhang))\n    calc(0px - var(--ds-row-overhang))\n    calc(0px - var(--ds-row-overhang));\n}\n.ds-row[data-open]:is(.ds-row--stacked, .ds-row--auto)::after { inset: 0; }\n@media (forced-colors: active) {\n  .ds-row[data-open]:not([data-open=\"false\"])::after { outline: 1px solid Highlight; outline-offset: -1px; }\n}\n/*\n * `.ds-context` is the `ds-context` element's look on a native menu, for a page\n * without Lit or a menu a library draws: Ezo's gap face. The rows carry the\n * colour and the menu only cuts the outer silhouette, so the page shows\n * through a pixel between rows and two between groups. The rows are black\n * with white words in both themes, as Ezo's menus always were (the slate in\n * dark, darker than the page). Every row is 19px with the pixel under it, a square's pitch, its words\n * on the sixteen and an icon at its end. A Select's menu is the light face,\n * `.ds-menu`; a Context's is this dark one.\n *\n *   ds-context                 the menu (`role=\"menu\"`); its rows are its buttons,\n *                              links and menu items, or `ds-context__item`\n *   ds-context__item           a row; `--danger` (or `data-danger`) in red\n *   ds-context__label          a heading row, muted\n *   ds-context__shortcut       a shortcut at the row's end, muted\n *   ds-context__separator      a group gap (or an `hr`, or `role=\"separator\"`):\n *                              never a line; first, last or doubled it is quiet\n *   [data-ds-refused]          a refused change: the row turns red\n *   ds-context--bar            the context bar over what is selected: the rows\n *                              side by side, one row high; `ds-context__item--icon`\n *                              a cell holding only an icon, one square\n *\n * The page places and opens it (a popover at the pointer, say) and owns its\n * keys; the faces of hover, focus, disabled and the wait of a pending menu\n * (`aria-busy=\"true\"`) are here. Tokens as the element's: --ds-context-fill,\n * --ds-context-ink, --ds-context-hover, --ds-context-danger,\n * --ds-context-refused, --ds-context-radius.\n *\n * It draws the same on a page without the root stylesheet: the measures come\n * from component-metrics.css, imported above, and every colour and the scale\n * fall back to their values; the type is the page's.\n */\n\n.ds-context {\n  --ds-context-row: calc(var(--ds-row-height) - 1px);\n  /* Black in both themes, as Ezo's menus always were: in dark the slate, darker than the page. */\n  --ds-context-fill: light-dark(var(--ds-black, #2a2a2a), var(--ds-slate, #1e1e1e));\n  --ds-context-ink: var(--ds-white, #ffffff);\n  --ds-context-hover: color-mix(in srgb, var(--ds-context-fill) 78%, var(--ds-context-ink));\n  --ds-context-danger: var(--ds-tuned-red, #ff5f5f);\n  --ds-context-refused: var(--ds-tuned-red, #ff5f5f);\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: column;\n  gap: 1px;\n  width: var(--ds-menu-width, max-content);\n  min-width: calc(4 * var(--ds-unit));\n  max-height: var(--ds-menu-max-height, calc(16 * var(--ds-unit)));\n  overflow-y: auto;\n  margin: 0;\n  padding: 0;\n  border: 0;\n  background: transparent;\n  box-shadow: none;\n  clip-path: inset(0 round var(--ds-context-radius, var(--ds-radius, 4px)));\n  color: var(--ds-context-ink);\n  font-family: var(--ds-typeface-regular);\n  font-feature-settings: var(--ds-font-features);\n  font-size: var(--ds-type-size-default);\n  font-weight: var(--ds-type-weight-default);\n  line-height: var(--ds-type-lineheight-default);\n  letter-spacing: var(--ds-type-letterspacing-default);\n  list-style: none;\n}\n\n.ds-context > [role=\"group\"] {\n  display: contents;\n}\n\n/* A row: whatever the page or library styles its buttons with, one row on the sixteen. */\n.ds-context :is(.ds-context__item, :is(.ds-context, .ds-context > [role=\"group\"]) > :is(button, a, li, [role^=\"menuitem\"]):not(.ds-context__label, .ds-context__separator, [role=\"separator\"])) {\n  box-sizing: border-box !important;\n  display: flex !important;\n  flex: 0 0 auto !important;\n  align-items: flex-end !important;\n  justify-content: space-between !important;\n  gap: calc(4px * var(--ds-sf, 1));\n  width: 100%;\n  height: var(--ds-context-row) !important;\n  min-height: var(--ds-context-row) !important;\n  max-height: var(--ds-context-row) !important;\n  margin: 0 !important;\n  padding: 0 calc(4px * var(--ds-sf, 1)) !important;\n  border: 0 !important;\n  border-radius: 0 !important;\n  background: var(--ds-context-fill) !important;\n  color: var(--ds-context-ink) !important;\n  font: inherit;\n  line-height: var(--ds-type-lineheight-default) !important;\n  letter-spacing: inherit;\n  text-align: start;\n  text-decoration: none;\n  white-space: nowrap;\n  cursor: pointer;\n  outline: none;\n  appearance: none;\n  -webkit-tap-highlight-color: transparent;\n}\n\n.ds-context :is(.ds-context__item, :is(.ds-context, .ds-context > [role=\"group\"]) > :is(button, a, li, [role^=\"menuitem\"])):is(:hover, :focus-visible, [data-highlighted]):not(:disabled, [aria-disabled=\"true\"], [data-disabled]) {\n  background: var(--ds-context-hover) !important;\n}\n\n.ds-context :is(.ds-context__item, :is(.ds-context, .ds-context > [role=\"group\"]) > :is(button, a, li, [role^=\"menuitem\"])):focus-visible {\n  box-shadow: inset 0 0 0 2px var(--ds-focus-ring, #594dff);\n}\n\n.ds-context :is(.ds-context__item, :is(.ds-context, .ds-context > [role=\"group\"]) > :is(button, a, li, [role^=\"menuitem\"])):is(:disabled, [aria-disabled=\"true\"], [data-disabled]) {\n  cursor: default;\n  opacity: 0.5;\n}\n\n.ds-context[aria-busy=\"true\"] > * {\n  cursor: wait !important;\n}\n\n/* Danger is red, on either fill. */\n.ds-context :is(.ds-context__item, :is(.ds-context, .ds-context > [role=\"group\"]) > :is(button, a, li, [role^=\"menuitem\"])):is(.ds-context__item--danger, [data-danger], [data-variant=\"destructive\"]) {\n  color: var(--ds-context-danger) !important;\n}\n\n/* A refused change: its row turns red a moment. */\n.ds-context :is(.ds-context__item, :is(.ds-context, .ds-context > [role=\"group\"]) > :is(button, a, li, [role^=\"menuitem\"]))[data-ds-refused] {\n  background: var(--ds-context-refused) !important;\n}\n\n/* Groups are a gap, never a line: the separator takes nothing but the gap after it. */\n.ds-context > :is(hr, .ds-context__separator, [role=\"separator\"]) {\n  flex: 0 0 0 !important;\n  height: 0 !important;\n  margin: 0 !important;\n  padding: 0 !important;\n  border: 0 !important;\n  background: none !important;\n}\n\n/* A group left empty leaves no gap. */\n.ds-context > :is(hr, .ds-context__separator, [role=\"separator\"]):is(:first-child, :last-child),\n.ds-context > :is(hr, .ds-context__separator, [role=\"separator\"]) + :is(hr, .ds-context__separator, [role=\"separator\"]) {\n  display: none !important;\n}\n\n.ds-context :is(.ds-context__label, [data-ds-menu-label]) {\n  box-sizing: border-box;\n  height: var(--ds-context-row);\n  /* The spare three above the sixteen. */\n  padding: calc(var(--ds-context-row) - var(--ds-type-lineheight-default)) calc(4px * var(--ds-sf, 1)) 0;\n  background: var(--ds-context-fill);\n  color: color-mix(in srgb, var(--ds-context-ink) 60%, var(--ds-context-fill));\n  line-height: var(--ds-type-lineheight-default);\n  white-space: nowrap;\n}\n\n.ds-context__shortcut {\n  margin-left: auto;\n  color: color-mix(in srgb, var(--ds-context-ink) 60%, var(--ds-context-fill));\n}\n\n/* The bar: the same rows side by side, the context bar over what is selected.\n   One row high, the cells a pixel apart and groups two, the page showing\n   through; a cell with words is 4px in on the sixteen, a cell holding only an\n   icon (`ds-context__item--icon`) one square, the icon in its middle. As long\n   as its cells. The page stands it half a square above the selection. */\n.ds-context.ds-context--bar {\n  flex-direction: row;\n  width: var(--ds-menu-width, max-content);\n  min-width: 0;\n  height: var(--ds-context-row);\n  max-height: none;\n  overflow: auto hidden;\n  scrollbar-width: none;\n}\n\n.ds-context.ds-context--bar :is(.ds-context__item, :is(.ds-context, .ds-context > [role=\"group\"]) > :is(button, a, li, [role^=\"menuitem\"])) {\n  width: auto;\n  min-width: var(--ds-context-row);\n}\n\n.ds-context.ds-context--bar :is(.ds-context__item, :is(.ds-context, .ds-context > [role=\"group\"]) > :is(button, a, li, [role^=\"menuitem\"])):is(.ds-context__item--icon, [data-ds-context-icon]) {\n  justify-content: center !important;\n  width: var(--ds-context-row);\n  padding: 0 !important;\n}\n\n.ds-context.ds-context--bar > :is(hr, .ds-context__separator, [role=\"separator\"]) {\n  width: 0 !important;\n  height: auto !important;\n}\n\n/*\n * Native controls in shared dress.\n *\n * DS one keeps a few components as plain classes on native elements. shared does\n * the same for everything a person types into or picks from: text fields,\n * selects and checkboxes stay `<input>` and `<select>`, so labels, form\n * semantics and React's controlled inputs work as they always have.\n *\n * `.ds-button` is the `ds-button` element's look on a native `<button>`,\n * for a button inside a drag handle. The drag library recognises only native\n * controls: inside a handle it would lift the row on Space where a\n * `ds-button` was meant to be pressed. Both read the same custom properties.\n * On an `<a href>` it is a link drawn as a button (see `a.ds-button` below).\n */\n\n.ds-button {\n  appearance: none;\n  box-sizing: border-box;\n  display: inline-flex;\n  /* At the foot of a line, so the 16px face takes the lower sixteen of the square. */\n  vertical-align: bottom;\n  flex: 0 0 auto;\n  width: var(--ds-button-width, max-content);\n  align-items: center;\n  justify-content: var(--ds-button-align, flex-start);\n  gap: var(--ds-button-gap, calc(4px * var(--ds-sf)));\n  height: var(--ds-button-height, var(--ds-control-height));\n  margin: 0;\n  padding: var(--ds-button-padding, 0);\n  border: 0;\n  border-radius: var(--ds-radius);\n  background: var(--ds-button-background, transparent);\n  color: var(--ds-button-color, var(--ds-button-text-color));\n  font-family: var(--ds-typeface-regular);\n  font-feature-settings: var(--ds-font-features);\n  font-size: var(--ds-type-size-default);\n  line-height: var(--ds-type-lineheight-default);\n  letter-spacing: var(--ds-type-letterspacing-default);\n  white-space: nowrap;\n  cursor: pointer;\n  -webkit-tap-highlight-color: transparent;\n}\n\n.ds-button--icon {\n  justify-content: center;\n  width: var(--ds-button-height, var(--ds-control-height));\n  padding: 0;\n  color: var(--ds-button-color, var(--ds-text-color-muted));\n}\n\n.ds-button--icon:hover:not(:disabled, [aria-disabled=\"true\"]) {\n  --ds-button-color: var(--ds-text-color);\n}\n\n.ds-button:focus-visible {\n  outline: 2px solid var(--ds-focus-ring);\n  outline-offset: 1px;\n}\n\n.ds-button:disabled,\n.ds-button[aria-disabled=\"true\"] {\n  cursor: default;\n  opacity: 0.5;\n}\n\n/*\n * one.css carries older button rules that dim a button on hover and nudge it\n * on press. The shared button does neither: these match their specificity, so\n * controls.css, loaded after one.css, wins.\n */\n.ds-button:hover:not(:disabled, [aria-disabled=\"true\"]) {\n  filter: none;\n}\n\n.ds-button:active:not(:disabled, [aria-disabled=\"true\"]) {\n  transform: none;\n}\n\n/*\n * `a.ds-button` is a link drawn as a button. The browser keeps the link:\n * middle-click, a new tab, Copy link and Enter. It never takes the link's\n * underline or colours, in any state, so every face (primary, secondary,\n * icon, tabs) looks as it does on a `<button>`. A disabled link has no `href`\n * and carries `aria-disabled=\"true\"` and `role=\"link\"`.\n */\na.ds-button,\na.ds-button:is(:hover, :focus, :active) {\n  text-decoration: none;\n}\n\na.ds-button:is(:link, :visited) {\n  color: var(--ds-button-color, var(--ds-button-text-color));\n}\n\na.ds-button.ds-button--icon:is(:link, :visited) {\n  color: var(--ds-button-color, var(--ds-text-color-muted));\n}\n\na.ds-button[aria-disabled=\"true\"] {\n  pointer-events: none;\n}\n\n/*\n * `.ds-link` is a link in running text: the text's ink, underlined by a\n * hairline 2px below the letters (as a toast's actions are), which turns to the full ink under\n * the pointer. A visited link is drawn in the muted ink. Words keep their\n * sentence case. Tokens: `--ds-link-color`, `--ds-link-visited-color`,\n * `--ds-link-line-color`, `--ds-link-hover-line-color`.\n */\n.ds-link {\n  color: var(--ds-link-color, currentColor);\n  text-decoration-line: underline;\n  text-decoration-thickness: 1px;\n  text-decoration-color: var(--ds-link-line-color, color-mix(in srgb, currentColor 40%, transparent));\n  text-underline-offset: calc(2px * var(--ds-sf));\n  cursor: pointer;\n}\n\n.ds-link:visited {\n  color: var(--ds-link-visited-color, var(--ds-text-color-muted));\n}\n\n.ds-link:hover {\n  text-decoration-color: var(--ds-link-hover-line-color, currentColor);\n}\n\n/* Quiet navigation and related-component lists: no underline in any state. */\n.ds-link.ds-link--plain {\n  text-decoration: none;\n}\n\n.ds-link:focus-visible {\n  outline: 2px solid var(--ds-focus-ring);\n  outline-offset: 1px;\n}\n\n.ds-link[aria-disabled=\"true\"] {\n  cursor: default;\n  opacity: 0.5;\n  pointer-events: none;\n}\n\n.ds-input,\n.ds-select {\n  box-sizing: border-box;\n  min-width: 0;\n  height: var(--ds-input-height, var(--ds-control-height));\n  margin: 0;\n  padding: 0 calc(4px * var(--ds-sf));\n  border: 0;\n  border-radius: var(--ds-radius);\n  background: var(--ds-fill);\n  color: var(--ds-text-color);\n  font-family: var(--ds-typeface-regular);\n  font-feature-settings: var(--ds-font-features);\n  font-size: var(--ds-type-size-default);\n  line-height: var(--ds-type-lineheight-default);\n  letter-spacing: var(--ds-type-letterspacing-default);\n  outline: none;\n}\n\n.ds-input::placeholder {\n  color: var(--ds-title-color);\n}\n\n.ds-input:focus-visible,\n.ds-select:focus-visible,\n.ds-checkbox:focus-visible,\n.ds-radio:focus-visible,\n.ds-switch:focus-visible {\n  outline: 2px solid var(--ds-focus-ring);\n  outline-offset: 1px;\n}\n\n.ds-input:disabled,\n.ds-select:disabled,\n.ds-checkbox:disabled,\n.ds-radio:disabled,\n.ds-switch:disabled {\n  cursor: default;\n  opacity: 0.5;\n}\n\n.ds-select {\n  appearance: none;\n  padding-right: calc(16px * var(--ds-sf));\n  background-image:\n    linear-gradient(45deg, transparent 50%, currentColor 50%),\n    linear-gradient(135deg, currentColor 50%, transparent 50%);\n  background-position:\n    calc(100% - 9px) 50%,\n    calc(100% - 6px) 50%;\n  background-size:\n    3px 3px,\n    3px 3px;\n  background-repeat: no-repeat;\n  cursor: pointer;\n}\n\n/* A multiline field, `ds-input` on a <textarea>, spans whole rows: --ds-textarea-rows sets how many, three by default. */\ntextarea.ds-input {\n  display: block;\n  height: var(--ds-textarea-height, calc(var(--ds-textarea-rows, 3) * var(--ds-row-height)));\n  min-height: var(--ds-row-height);\n  padding: var(--ds-textarea-padding, calc(4px * var(--ds-sf)));\n  border-radius: var(--ds-textarea-radius, calc(4px * var(--ds-sf)));\n  resize: vertical;\n}\n\n/*\n * `.ds-checkbox` and `.ds-radio` are the `ds-checkbox` and `ds-radio` elements'\n * faces on a native `<input>`: a box one control (16px) square on the field's\n * ground with a 1px line, standing as an icon does, on the lower sixteen at the\n * start of its square, so it takes one square and the words begin on the next\n * (Joachim, 19 October 2026). The checkbox has the corners of a control and fills with the accent,\n * the check (`x-icon/check.svg`) in its ink; the radio is a circle with a dot\n * half a square across in the text colour.\n */\n.ds-checkbox,\n.ds-radio {\n  appearance: none;\n  box-sizing: border-box;\n  display: inline-grid;\n  flex: 0 0 auto;\n  place-items: center;\n  vertical-align: top;\n  width: var(--ds-control-height);\n  height: var(--ds-control-height);\n  margin: 0;\n  margin-block-start: calc(var(--ds-row-height) - var(--ds-control-height));\n  margin-inline-end: calc(var(--ds-row-height) - var(--ds-control-height));\n  padding: 0;\n  border: 1px solid var(--ds-border-color);\n  background: var(--ds-input-background);\n  cursor: pointer;\n}\n\n.ds-checkbox {\n  --ds-checkbox-mark: url(\"data:image/svg+xml,%3Csvg%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%2016%2016%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20d%3D%22M6.68649%2011.884L12.443%206.13601L11.736%205.42715L6.68835%2010.4827L4.26399%208.0501L3.55696%208.74525L6.68649%2011.884Z%22%20fill%3D%22currentColor%22%2F%3E%0A%3C%2Fsvg%3E\");\n  border-radius: var(--ds-radius);\n  corner-shape: var(--ds-corner-shape, round);\n  color: var(--ds-button-text-color-on-accent);\n}\n\n.ds-checkbox:is(:checked, :indeterminate) {\n  background: var(--ds-accent-color);\n}\n\n.ds-checkbox::before,\n.ds-radio::before {\n  content: \"\";\n  opacity: 0;\n  background: currentColor;\n}\n\n.ds-checkbox::before {\n  width: var(--ds-control-height);\n  height: var(--ds-control-height);\n  mask: var(--ds-checkbox-mark) center / contain no-repeat;\n}\n\n.ds-checkbox:indeterminate::before {\n  width: calc(var(--ds-control-height) / 2);\n  height: calc(2px * var(--ds-sf));\n  mask: none;\n}\n\n.ds-radio {\n  border-radius: 50%;\n  color: var(--ds-text-color);\n}\n\n.ds-radio::before {\n  width: calc(var(--ds-control-height) / 2);\n  height: calc(var(--ds-control-height) / 2);\n  border-radius: 50%;\n}\n\n.ds-checkbox:is(:checked, :indeterminate)::before,\n.ds-radio:checked::before {\n  opacity: 1;\n}\n\n/*\n * `.ds-switch` is the `ds-switch` element's look on a native\n * `<button role=\"switch\" aria-checked>`: two control heights wide less 4px (28 × 16),\n * its thumb one control high less a 2px inset, travelling 12px. A pill with a white\n * round thumb, grey when off and the darker green when on, whatever the page's accent: the\n * one switch (Joachim, 19 October 2026).\n */\n\n.ds-switch {\n  --ds-choice-unit: var(--ds-control-height);\n  appearance: none;\n  box-sizing: border-box;\n  position: relative;\n  display: inline-block;\n  flex: 0 0 auto;\n  vertical-align: middle;\n  width: calc(2 * var(--ds-choice-unit) - 4px * var(--ds-sf));\n  height: var(--ds-choice-unit);\n  margin: 0;\n  padding: calc(2px * var(--ds-sf));\n  border: 0;\n  border-radius: var(--ds-choice-unit);\n  background: var(--ds-fill);\n  color: var(--ds-white);\n  cursor: pointer;\n  touch-action: manipulation;\n}\n\n.ds-switch::after {\n  content: \"\";\n  display: block;\n  width: calc(var(--ds-choice-unit) - 4px * var(--ds-sf));\n  height: 100%;\n  border-radius: 50%;\n  background: var(--ds-white);\n  transform: translateX(0);\n  transition: transform 140ms ease;\n}\n\n.ds-switch[aria-checked=\"true\"] {\n  background: var(--ds-switch-track-on);\n}\n\n.ds-switch[aria-checked=\"true\"]::after {\n  transform: translateX(calc(var(--ds-choice-unit) - 4px * var(--ds-sf)));\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .ds-switch::after {\n    transition: none;\n  }\n}\n\n/*\n * `.ds-range` draws a native `<input type=\"range\">`: one control high,\n * standing on the lower sixteen of its square (the spare four above it as a\n * margin, so it takes one square alone and in a row), eight squares wide.\n * The track is a 1px line across the middle of the control, the thumb one\n * control high and half a control wide with the shared corners, in the ink.\n * The browser keeps the value, the keys, the form data and the events.\n *\n * Tokens: `--ds-range-width` (eight squares), `--ds-range-track` (the line,\n * the title grey), `--ds-range-thumb` (the ink) and `--ds-range-thumb-width`.\n * WebKit and Blink draw the parts as `::-webkit-slider-*`, Firefox as\n * `::-moz-range-*`; both get the same track and thumb.\n */\n\n.ds-range {\n  -webkit-appearance: none;\n  appearance: none;\n  box-sizing: border-box;\n  display: inline-block;\n  vertical-align: bottom;\n  width: var(--ds-range-width, calc(8 * var(--ds-unit)));\n  min-width: 0;\n  height: var(--ds-control-height);\n  margin: calc(var(--ds-row-height) - var(--ds-control-height)) 0 0;\n  padding: 0;\n  border: 0;\n  border-radius: var(--ds-radius);\n  background: transparent;\n  color: var(--ds-range-thumb, var(--ds-text-color));\n  font: inherit;\n  cursor: pointer;\n  touch-action: pan-y;\n  -webkit-tap-highlight-color: transparent;\n}\n\n.ds-range::-webkit-slider-runnable-track {\n  box-sizing: border-box;\n  height: var(--ds-control-height);\n  border: 0;\n  background: linear-gradient(var(--ds-range-track, var(--ds-title-color)) 0 0) 0 calc(var(--ds-control-height) / 2) / 100% 1px no-repeat;\n}\n\n.ds-range::-moz-range-track {\n  box-sizing: border-box;\n  height: var(--ds-control-height);\n  border: 0;\n  background: linear-gradient(var(--ds-range-track, var(--ds-title-color)) 0 0) 0 calc(var(--ds-control-height) / 2) / 100% 1px no-repeat;\n}\n\n.ds-range::-moz-range-progress {\n  background: transparent;\n}\n\n.ds-range::-webkit-slider-thumb {\n  -webkit-appearance: none;\n  appearance: none;\n  box-sizing: border-box;\n  width: var(--ds-range-thumb-width, calc(var(--ds-control-height) / 2));\n  height: var(--ds-control-height);\n  border: 0;\n  border-radius: var(--ds-radius);\n  background: currentColor;\n}\n\n.ds-range::-moz-range-thumb {\n  box-sizing: border-box;\n  width: var(--ds-range-thumb-width, calc(var(--ds-control-height) / 2));\n  height: var(--ds-control-height);\n  border: 0;\n  border-radius: var(--ds-radius);\n  background: currentColor;\n}\n\n.ds-range:focus-visible {\n  outline: 2px solid var(--ds-focus-ring);\n  outline-offset: 1px;\n}\n\n.ds-range:disabled {\n  cursor: default;\n  opacity: 0.5;\n}\n\n/*\n * `.ds-tabs` is the `ds-tabs` element's row on native buttons. As an option\n * group (role=\"group\", a segmented control) its `.ds-button` choices are\n * grey and the chosen one, aria-pressed, aria-selected or aria-current, is in\n * the accent, as the primary and secondary buttons are.\n */\n\n.ds-tabs {\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  gap: calc(4px * var(--ds-sf));\n  min-width: 0;\n  height: var(--ds-row-height);\n}\n\n.ds-tabs--fill > * {\n  flex: 1 1 0;\n  justify-content: center;\n}\n\n.ds-tabs[role=\"group\"] > .ds-button {\n  --ds-button-height: var(--ds-row-height);\n  --ds-button-padding: 0 calc(4px * var(--ds-sf));\n  --ds-button-background: var(--ds-button-background-color-secondary);\n  min-width: 0;\n}\n\n.ds-tabs[role=\"group\"] > .ds-button:hover:not(:disabled, [aria-disabled=\"true\"]) {\n  --ds-button-background: var(--ds-fill-hover);\n}\n\n.ds-tabs[role=\"group\"] > .ds-button:is([aria-pressed=\"true\"], [aria-selected=\"true\"], [aria-current]:not([aria-current=\"false\"])) {\n  --ds-button-background: var(--ds-button-background-color-primary);\n  --ds-button-color: var(--ds-button-text-color-on-accent);\n}\n\n/*\n * `.ds-overlay` is the `ds-overlay` element's frame on a native `<dialog>`, a\n * modal by default: twenty squares wide, a square of padding, square corners,\n * a hairline and the paper. `ds-overlay--sheet`, `ds-overlay--drawer` (with\n * `ds-overlay--start` for the start side) and `ds-overlay--screen` are its\n * other types (overlay.css). Its header, title, description, footer and close button are marked\n * with data-ds-overlay, as inside the element.\n */\n\ndialog.ds-overlay {\n  box-sizing: border-box;\n  position: fixed;\n  inset: 0;\n  width: var(--ds-overlay-width, calc(20 * var(--ds-unit)));\n  max-width: var(--ds-overlay-max-width, calc(100vw - 2 * var(--ds-unit)));\n  max-height: var(--ds-overlay-max-height, calc(100dvh - 2 * var(--ds-unit)));\n  height: var(--ds-overlay-height, fit-content);\n  margin: auto;\n  padding: var(--ds-overlay-padding, var(--ds-unit));\n  border: var(--ds-overlay-border, 1px solid var(--ds-border-color));\n  border-radius: 0;\n  background: var(--ds-overlay-paper, var(--ds-paper));\n  color: var(--ds-text-color);\n  box-shadow: none;\n  overflow: auto;\n  overscroll-behavior: contain;\n  font-family: var(--ds-typeface-regular);\n  font-feature-settings: var(--ds-font-features);\n  font-size: var(--ds-type-size-default);\n  font-weight: var(--ds-type-weight-default);\n  line-height: var(--ds-type-lineheight-default);\n  letter-spacing: var(--ds-type-letterspacing-default);\n}\n\ndialog.ds-overlay[open] {\n  display: flex;\n  flex-direction: column;\n  gap: var(--ds-unit);\n}\n\ndialog.ds-overlay::backdrop {\n  background: color-mix(in srgb, var(--ds-black) 40%, transparent);\n}\n\n.ds-overlay [data-ds-overlay=\"header\"] {\n  display: flex;\n  flex-direction: column;\n}\n\n/* The header keeps the last square of its row for the close button, only when it has one. */\ndialog.ds-overlay:has(> [data-ds-overlay=\"close\"]) [data-ds-overlay=\"header\"] {\n  padding-inline-end: var(--ds-unit);\n}\n\n/* The title on its square's lower sixteen, as every row's words. */\n.ds-overlay [data-ds-overlay=\"title\"] {\n  display: flex;\n  align-items: flex-end;\n  min-height: var(--ds-row-height);\n  margin: 0;\n  color: var(--ds-text-color);\n  font: inherit;\n  font-weight: var(--ds-type-weight-bold);\n  line-height: var(--ds-type-lineheight-default);\n}\n\n.ds-overlay [data-ds-overlay=\"description\"] {\n  margin: 0;\n  color: var(--ds-text-color-muted);\n  font: inherit;\n}\n\n.ds-overlay [data-ds-overlay=\"footer\"] {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  justify-content: flex-end;\n  gap: calc(var(--ds-unit) / 2);\n  min-height: var(--ds-row-height);\n}\n\n.ds-overlay [data-ds-overlay=\"close\"] {\n  position: absolute;\n  top: var(--ds-unit);\n  right: var(--ds-unit);\n}\n\n/* A field in the frame, as a prompt has: its label one row high, the field\n * one row high beneath it and as wide as the frame, two squares in all. */\n.ds-overlay [data-ds-overlay=\"field\"] {\n  display: flex;\n  flex-direction: column;\n}\n\n.ds-overlay [data-ds-overlay=\"label\"] {\n  min-height: var(--ds-row-height);\n  line-height: var(--ds-row-height);\n}\n\n.ds-overlay [data-ds-overlay=\"field\"] > .ds-input {\n  --ds-input-height: var(--ds-row-height);\n  width: 100%;\n}\n\n/*\n * `.ds-button--primary` and `--secondary` are the element's variants on a\n * native button: a form's submit button stays native so Enter in a field\n * submits the form. `--danger` is its `danger` attribute.\n */\n\n.ds-button--primary,\n.ds-button--secondary {\n  --ds-button-padding: 0 calc(4px * var(--ds-sf));\n}\n\n.ds-button--primary {\n  --ds-button-background: var(--ds-button-background-color-primary);\n  --ds-button-color: var(--ds-button-text-color-on-accent);\n}\n\n.ds-button--secondary {\n  --ds-button-background: var(--ds-button-background-color-secondary);\n}\n\n.ds-button--secondary:hover:not(:disabled, [aria-disabled=\"true\"]) {\n  --ds-button-background: var(--ds-fill-hover);\n}\n\n/* `.ds-button--danger` is the element's `danger`: a destructive action's words\n * in the danger colour, on the secondary face or none. */\n.ds-button--danger {\n  --ds-button-color: var(--ds-danger-color, var(--ds-tuned-red));\n}\n\n/*\n * Words and an icon on one face hug them. A 16 × 16 icon carries about 4px\n * of its own room around its glyph, so beside words it takes no gap and, on a\n * filled face, none of the padding on its side: the glyph stands 4px from the\n * words and 4px from the face's edge, as the words stand from the other edge.\n * The same on every face: `.ds-button`, a slotted `ds-button`, the host face\n * (and the shadow face in ds-button.css). The words are an element beside the\n * icon (`ds-text`, a span); an icon of a product's own is an inline `svg` or\n * marked `data-ds-icon`, and is drawn sixteen square here. A menu's entries\n * keep their gap, so their words line up down the menu.\n */\n:is(.ds-button, ds-button[control=\"slotted\"]:not([menu-item]) > :is(button, a), ds-button[control=\"host\"]:not([menu-item])):not([role=\"option\"], [role^=\"menuitem\"]):has(> :is(ds-icon, .ds-icon, svg, [data-ds-icon]):not(:only-child)) {\n  --ds-button-gap: 0px;\n}\n\n:is(.ds-button, ds-button[control=\"slotted\"] > :is(button, a), ds-button[control=\"host\"]) > :is(svg, [data-ds-icon]):not(:only-child) {\n  flex: 0 0 auto;\n  width: var(--ds-control-height);\n  height: var(--ds-control-height);\n}\n\n:is(.ds-button--primary, .ds-button--secondary, ds-button:is([primary], [secondary])[control=\"slotted\"] > :is(button, a), ds-button:is([primary], [secondary])[control=\"host\"]) > :is(ds-icon, .ds-icon, svg, [data-ds-icon]):last-child:not(:first-child) {\n  margin-inline-end: calc(-4px * var(--ds-sf));\n}\n\n:is(.ds-button--primary, .ds-button--secondary, ds-button:is([primary], [secondary])[control=\"slotted\"] > :is(button, a), ds-button:is([primary], [secondary])[control=\"host\"]) > :is(ds-icon, .ds-icon, svg, [data-ds-icon]):first-child:not(:last-child) {\n  margin-inline-start: calc(-4px * var(--ds-sf));\n}\n\n.ds-button--fixed {\n  width: var(--ds-button-width, calc(4 * var(--ds-unit)));\n}\n\n.ds-button--wide {\n  justify-content: center;\n  width: 100%;\n}\n\n/*\n * `.ds-menu` is the `ds-menu` element's look on a menu a library draws:\n * the context menu's items come from Radix, which owns their roles, focus and\n * keys, so they stay Radix's and take shared's paper, rows and type.\n * On whole squares, as the element: the line and the padding inside it make\n * half a square on each side, entries are one square each with nothing\n * between them, a separator is one square with its line, and there is no\n * shadow. n entries make a menu n + 1 squares high.\n */\n\n.ds-menu {\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: column;\n  gap: 0;\n  min-width: calc(8 * var(--ds-unit));\n  max-width: calc(12 * var(--ds-unit));\n  max-height: var(--ds-menu-max-height, calc(16 * var(--ds-unit)));\n  overflow-y: auto;\n  padding: calc(var(--ds-unit) / 2 - 1px);\n  border: 1px solid var(--ds-border-color);\n  border-radius: var(--ds-radius-card);\n  background: var(--ds-paper);\n  color: var(--ds-text-color);\n  box-shadow: none;\n  font-family: var(--ds-typeface-regular);\n  font-feature-settings: var(--ds-font-features);\n  font-size: var(--ds-type-size-default);\n  font-weight: var(--ds-type-weight-default);\n  line-height: var(--ds-type-lineheight-default);\n  letter-spacing: var(--ds-type-letterspacing-default);\n}\n\n.ds-menu__item {\n  position: relative;\n  box-sizing: border-box;\n  display: flex;\n  align-items: center;\n  gap: calc(4px * var(--ds-sf));\n  width: 100%;\n  min-height: var(--ds-row-height);\n  padding: calc(2px * var(--ds-sf)) calc(6px * var(--ds-sf));\n  border-radius: calc(4px * var(--ds-sf));\n  color: var(--ds-text-color);\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: clip;\n  cursor: default;\n  user-select: none;\n  outline: none;\n}\n\n/* Words cut short fade over the entry's last square, never an ellipsis:\n * 0-face/cut-fade.ts marks the entry `data-cut=\"end\"` while they do not fit. */\n.ds-menu__item[data-cut=\"end\"] {\n  mask-image: linear-gradient(to right, #000 calc(100% - var(--ds-unit)), transparent);\n}\n.ds-menu__item[data-cut=\"end\"]:dir(rtl) {\n  mask-image: linear-gradient(to left, #000 calc(100% - var(--ds-unit)), transparent);\n}\n\n/* An entry a library draws as its own button or link is one square high too,\n * whatever that library's button styles say. */\n.ds-menu > :is(button, a, [role=\"option\"], [role^=\"menuitem\"]),\n.ds-menu > [role=\"group\"] > :is(button, a, [role=\"option\"], [role^=\"menuitem\"]) {\n  box-sizing: border-box !important;\n  flex: 0 0 auto !important;\n  height: var(--ds-row-height) !important;\n  min-height: var(--ds-row-height) !important;\n  max-height: var(--ds-row-height) !important;\n  margin-block: 0 !important;\n  padding-block: 0 !important;\n  line-height: var(--ds-type-lineheight-default) !important;\n}\n\n/* A menu item may be a native button: it keeps the row's look, not a button's. */\n:where(button).ds-menu__item {\n  appearance: none;\n  margin: 0;\n  border: 0;\n  background: transparent;\n  font: inherit;\n  letter-spacing: inherit;\n  text-align: start;\n}\n\n.ds-menu__item--inset {\n  padding-left: calc(var(--ds-unit) + calc(4px * var(--ds-sf)));\n}\n\n.ds-menu__item:hover,\n.ds-menu__item:focus-visible,\n.ds-menu__item[data-highlighted] {\n  background: var(--ds-fill);\n}\n\n.ds-menu__item[data-variant=\"destructive\"] {\n  color: var(--ds-danger-color, var(--ds-tuned-red));\n}\n\n.ds-menu__item[data-disabled],\n.ds-menu__item[aria-disabled=\"true\"] {\n  opacity: 0.5;\n  pointer-events: none;\n}\n\n.ds-menu__indicator {\n  position: absolute;\n  left: calc(6px * var(--ds-sf));\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: calc(12px * var(--ds-sf));\n  height: calc(12px * var(--ds-sf));\n  pointer-events: none;\n}\n\n.ds-menu__indicator svg {\n  width: 100%;\n  height: 100%;\n}\n\n.ds-menu__chevron {\n  width: calc(12px * var(--ds-sf));\n  height: calc(12px * var(--ds-sf));\n  margin-left: auto;\n  color: var(--ds-text-color-muted);\n}\n\n.ds-menu__label {\n  box-sizing: border-box;\n  min-height: var(--ds-row-height);\n  padding: calc(2px * var(--ds-sf)) calc(6px * var(--ds-sf));\n  color: var(--ds-title-color);\n  font-size: var(--ds-type-size-small);\n}\n\n.ds-menu__separator {\n  flex: 0 0 auto;\n  height: 1px;\n  /* One square with its line. */\n  margin: calc(var(--ds-unit) / 2 - 1px) calc(6px * var(--ds-sf)) calc(var(--ds-unit) / 2);\n  background: var(--ds-border-color);\n}\n\n.ds-menu__shortcut {\n  margin-left: auto;\n  padding-left: var(--ds-unit);\n  color: var(--ds-title-color);\n  font-size: var(--ds-type-size-small);\n}\n\n/*\n * Pieces the components draw, as classes on native elements: a field's label\n * row, an avatar, a badge, a toggle button, an icon and a file drop zone. Each\n * reads the same tokens as its element, so a page without Lit draws the same\n * look.\n */\n\n/*\n * `.ds-field` is the label row `ds-input` draws, around any native control:\n * the label (`.ds-field__label`) on a one-square line above it, then a hint\n * (`.ds-field__hint`) in the muted ink and an error (`.ds-field__error`) in\n * the danger colour, each on one-square lines. Every row is at least one\n * square high and a control lower than that stands centred on it, so the\n * field keeps to whole squares. `.ds-field--beside` sets the label beside the\n * control, in a column `--ds-field-label-width` wide (four squares), with the\n * hint and the error under the control. An empty hint or error takes no room,\n * so the error can stay in the page as a live region.\n */\n\n.ds-field {\n  box-sizing: border-box;\n  display: grid;\n  grid-template-columns: minmax(0, 1fr);\n  grid-auto-rows: minmax(var(--ds-row-height), auto);\n  align-items: center;\n  justify-items: start;\n  min-width: 0;\n  margin: 0;\n  color: var(--ds-text-color);\n  font-family: var(--ds-typeface-regular);\n  font-feature-settings: var(--ds-font-features);\n  font-size: var(--ds-type-size-default);\n  font-weight: var(--ds-type-weight-default);\n  line-height: var(--ds-unit);\n  letter-spacing: var(--ds-type-letterspacing-default);\n}\n\n.ds-field > :is(.ds-input, .ds-select) {\n  justify-self: stretch;\n}\n\n.ds-field__label,\n.ds-field__hint,\n.ds-field__error {\n  display: block;\n  min-width: 0;\n  margin: 0;\n  font: inherit;\n  letter-spacing: inherit;\n}\n\n.ds-field__label {\n  color: var(--ds-field-label-color, var(--ds-text-color));\n}\n\n.ds-field__hint {\n  color: var(--ds-text-color-muted);\n}\n\n.ds-field__error {\n  color: var(--ds-danger-color);\n}\n\n.ds-field__hint:empty,\n.ds-field__error:empty {\n  display: none;\n}\n\n.ds-field--beside {\n  grid-template-columns: var(--ds-field-label-width, calc(4 * var(--ds-unit))) minmax(0, 1fr);\n}\n\n.ds-field--beside > * {\n  grid-column: 2;\n}\n\n.ds-field--beside > .ds-field__label {\n  grid-column: 1;\n  grid-row: 1;\n  align-self: start;\n}\n\n/*\n * `.ds-avatar` is the `ds-avatar` element's mark: round and one control high,\n * an initial in small type on the neutral fill, or an `<img alt=\"\">` after the\n * initial, covering it. While the picture loads the initial shows; remove a\n * picture that fails (`onerror`), as the element does, or the browser draws\n * its broken-image mark. `--large` is two squares with type a square high,\n * `--pair` fits two characters between the hairline edges, `--square` gives it\n * a picture's corners, `--outlined` draws the hairline in its ink and\n * `--pending` greys out someone who has not accepted yet.\n * `--ds-avatar-background` fills it with a colour and `--ds-avatar-color`\n * letters it: on a fill, pick the black or white ink that reads on it\n * (`--ds-black`, `--ds-white`).\n */\n\n.ds-avatar {\n  --ds-avatar-size: var(--ds-control-height);\n  --ds-avatar-pair-type-size: var(--ds-type-size-small);\n  box-sizing: border-box;\n  position: relative;\n  display: inline-grid;\n  place-items: center;\n  flex: 0 0 auto;\n  vertical-align: middle;\n  width: var(--ds-avatar-size);\n  height: var(--ds-avatar-size);\n  overflow: hidden;\n  border-radius: 50%;\n  corner-shape: round;\n  background: var(--ds-avatar-background, var(--ds-fill));\n  color: var(--ds-avatar-color, var(--ds-text-color));\n  font: var(--ds-type-weight-default) var(--ds-type-size-small) / 1 var(--ds-typeface-regular);\n  letter-spacing: normal;\n  text-align: center;\n  white-space: nowrap;\n  user-select: none;\n  -webkit-user-select: none;\n}\n\n.ds-avatar > img {\n  position: absolute;\n  inset: 0;\n  display: block;\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n}\n\n.ds-avatar--large {\n  --ds-avatar-size: calc(2 * var(--ds-unit));\n  --ds-avatar-pair-type-size: var(--ds-type-size-default);\n  font-size: var(--ds-unit);\n}\n\n.ds-avatar--pair {\n  font-size: min(var(--ds-avatar-pair-type-size), calc((var(--ds-avatar-size) - 2px) / 2));\n}\n\n.ds-avatar--square {\n  border-radius: var(--ds-avatar-radius, var(--ds-radius));\n  corner-shape: var(--ds-corner-shape, round);\n}\n\n.ds-avatar--outlined::after {\n  content: \"\";\n  position: absolute;\n  inset: 0;\n  border: 1px solid var(--ds-avatar-outline, currentColor);\n  border-radius: inherit;\n  pointer-events: none;\n}\n\n.ds-avatar--pending {\n  background: var(--ds-fill);\n  color: var(--ds-text-color-muted);\n}\n\n.ds-avatar--pending > img {\n  filter: grayscale(1);\n  opacity: 0.5;\n}\n\n/*\n * `.ds-badge` is the `ds-badge` element's status label: one square high on the\n * neutral fill, its words padded 4px, never a button. Words that do not fit\n * are cut, never with an ellipsis: in a `.ds-badge__label` of their own they\n * fade over its last square while marked `data-cut=\"end\"`, the fill staying\n * whole. Where the browser can size to content in calc (calc-size), its width\n * rounds up to whole squares as the element's does; elsewhere it hugs the\n * words. An icon inside is a `.ds-icon` before the words. `--icon` shows the\n * icon alone, one square wide, and keeps the words for assistive technology:\n * put them in an element of their own. `--ds-badge-background` and\n * `--ds-badge-color` give a status a meaningful colour.\n */\n\n.ds-badge {\n  box-sizing: border-box;\n  display: inline-block;\n  flex: 0 0 auto;\n  vertical-align: middle;\n  width: max-content;\n  width: calc-size(max-content, round(up, size, var(--ds-unit)));\n  min-width: var(--ds-row-height);\n  max-width: 100%;\n  height: var(--ds-row-height);\n  padding: 0 calc(4px * var(--ds-sf));\n  overflow: hidden;\n  background: var(--ds-badge-background, var(--ds-fill));\n  color: var(--ds-badge-color, var(--ds-text-color));\n  font-family: var(--ds-typeface-regular);\n  font-feature-settings: var(--ds-font-features);\n  font-size: var(--ds-type-size-default);\n  font-weight: var(--ds-type-weight-default);\n  line-height: var(--ds-row-height);\n  letter-spacing: var(--ds-type-letterspacing-default);\n  text-overflow: clip;\n  white-space: nowrap;\n}\n\n.ds-badge__label {\n  display: inline-block;\n  max-width: 100%;\n  overflow: hidden;\n  vertical-align: top;\n  text-overflow: clip;\n  white-space: nowrap;\n}\n.ds-badge__label[data-cut=\"end\"] {\n  mask-image: linear-gradient(to right, #000 calc(100% - var(--ds-unit)), transparent);\n}\n.ds-badge__label[data-cut=\"end\"]:dir(rtl) {\n  mask-image: linear-gradient(to left, #000 calc(100% - var(--ds-unit)), transparent);\n}\n\n.ds-badge > .ds-icon {\n  vertical-align: top;\n  margin-top: calc((var(--ds-row-height) - var(--ds-icon-box, var(--ds-control-height))) / 2);\n  margin-right: calc(4px * var(--ds-sf));\n}\n\n.ds-badge--icon {\n  position: relative;\n  width: var(--ds-row-height);\n  padding: 0;\n  text-align: center;\n}\n\n.ds-badge--icon > .ds-icon {\n  margin-right: 0;\n}\n\n.ds-badge--icon > :not(.ds-icon) {\n  position: absolute;\n  width: 1px;\n  height: 1px;\n  overflow: hidden;\n  clip-path: inset(50%);\n  white-space: nowrap;\n}\n\n/*\n * `.ds-toggle` makes a `.ds-button` a toggle button, `<button aria-pressed>`:\n * the secondary button's grey while it is off, the primary button's accent\n * while it is on, as a chosen segment of `.ds-tabs[role=\"group\"]` is. Its\n * words stay the same in both states; the page toggles `aria-pressed`.\n * A setting that is on or off is a `.ds-switch`; one of several choices is a\n * `.ds-tabs[role=\"group\"]`.\n */\n\n.ds-toggle {\n  --ds-button-padding: 0 calc(4px * var(--ds-sf));\n  --ds-button-background: var(--ds-button-background-color-secondary);\n}\n\n.ds-toggle:hover:not(:disabled, [aria-disabled=\"true\"]) {\n  --ds-button-background: var(--ds-fill-hover);\n}\n\n.ds-toggle[aria-pressed=\"true\"],\n.ds-toggle[aria-pressed=\"true\"]:hover:not(:disabled, [aria-disabled=\"true\"]) {\n  --ds-button-background: var(--ds-button-background-color-primary);\n  --ds-button-color: var(--ds-button-text-color-on-accent);\n}\n\n/*\n * `.ds-icon` is the `ds-icon` element's drawing without the element: a\n * Design system 1 icon file as a mask, painted in the text colour\n * (`--ds-icon-color`), 14px by default, 12px with `--small` and 16px with\n * `--large`, times the scale. `--ds-icon` names the file, as Sync 1's `icons`\n * export copies it: `style=\"--ds-icon: url(icons/close.svg)\"` (a path from the\n * page) or a rule per icon in the page's stylesheet. The mask takes only the\n * drawing's shape, so an icon with colours of its own is an `<img>`. These\n * rules have no specificity: a page that drew its own `.ds-icon` keeps its\n * rule until it removes it.\n */\n\n:where(.ds-icon) {\n  --ds-icon-box: calc(var(--ds-icon-size, 14px) * var(--ds-sf));\n  display: inline-block;\n  flex: 0 0 auto;\n  width: var(--ds-icon-box);\n  height: calc(var(--ds-icon-box) / var(--ds-icon-ratio, 1));\n  color: var(--ds-icon-color, currentColor);\n  background-color: currentColor;\n  -webkit-mask: var(--ds-icon) center / contain no-repeat;\n  mask: var(--ds-icon) center / contain no-repeat;\n}\n\n:where(.ds-icon--small) {\n  --ds-icon-size: 12px;\n}\n\n:where(.ds-icon--large) {\n  --ds-icon-size: 16px;\n}\n\n/*\n * `.ds-flag` is a country's flag from `DS1/x-flag/`, an `<img>` of the file\n * named by its two-letter code in lower case (`x-flag/ie.svg`): 3:2 with\n * corners a quarter of its height (4px at 16) and a hairline in the fill's\n * grey centred on its edge, so a white field keeps its edge on the paper. One\n * control high (16px) and half as wide again, 12px high with `--small`, times\n * the scale; on a line it stands on the sixteen, and words after it start 4px\n * on. In a table's row it stands in the middle of the row instead, as much\n * room above as below. Its `alt` is the country's name, or empty beside the\n * name written out.\n */\n\n:where(.ds-flag) {\n  --ds-flag-box: calc(var(--ds-flag-size, 16px) * var(--ds-sf));\n  display: inline-block;\n  flex: 0 0 auto;\n  box-sizing: border-box;\n  width: calc(var(--ds-flag-box) * 1.5);\n  height: var(--ds-flag-box);\n  margin-inline-end: calc(4px * var(--ds-sf));\n  border-radius: calc(var(--ds-flag-box) / 4);\n  vertical-align: bottom;\n  object-fit: cover;\n  outline: 1px solid var(--ds-fill);\n  outline-offset: -0.5px;\n}\n\n:where(.ds-flag--small) {\n  --ds-flag-size: 12px;\n}\n\n/* The row's foot holds the flag's foot on the sixteen; lifting it half the room left over centres it. */\n:where(.ds-table :is(th, td) .ds-flag) {\n  translate: 0 calc((var(--ds-flag-box) - var(--ds-table-row)) / 2);\n}\n\n/*\n * `.ds-drop` is `ds-file-picker`'s area on a `<label>` around a native\n * `<input type=\"file\">`: the secondary button's face, as wide as its row and\n * eight squares high (`--compact`: four), its words centred in a square of\n * padding. The input covers the zone unseen, so a click, the keyboard and a\n * dropped file all reach it, and the browser keeps labels, forms, `required`,\n * `multiple` and reset. Keyboard focus draws the focus ring. A page that also\n * handles drops on a larger surface sets `data-dragging` on the zone while\n * files are dragged over it, for the ring and the hover fill. A `.ds-button`\n * on a `<span>` inside draws a button face among the words.\n *\n * The same native input directly inside a `label.ds-button` is the file\n * picker's button: the button's face, one square high.\n */\n\n.ds-drop {\n  box-sizing: border-box;\n  position: relative;\n  display: flex;\n  flex-wrap: wrap;\n  align-content: center;\n  align-items: center;\n  justify-content: center;\n  gap: calc(var(--ds-unit) / 2);\n  width: 100%;\n  min-width: 0;\n  height: calc(8 * var(--ds-unit));\n  margin: 0;\n  padding: var(--ds-unit);\n  overflow: hidden;\n  border-radius: var(--ds-radius);\n  corner-shape: var(--ds-corner-shape, round);\n  background: var(--ds-button-background-color-secondary);\n  color: var(--ds-button-text-color);\n  font-family: var(--ds-typeface-regular);\n  font-feature-settings: var(--ds-font-features);\n  font-size: var(--ds-type-size-default);\n  font-weight: var(--ds-type-weight-default);\n  line-height: var(--ds-type-lineheight-default);\n  letter-spacing: var(--ds-type-letterspacing-default);\n  text-align: center;\n  cursor: pointer;\n  user-select: none;\n  -webkit-user-select: none;\n  -webkit-tap-highlight-color: transparent;\n}\n\n.ds-drop--compact {\n  height: calc(4 * var(--ds-unit));\n}\n\nlabel.ds-button:has(> input[type=\"file\"]) {\n  --ds-button-height: var(--ds-row-height);\n  position: relative;\n  overflow: hidden;\n}\n\n:is(.ds-drop, label.ds-button) > input[type=\"file\"]:not([hidden]) {\n  position: absolute;\n  inset: 0;\n  box-sizing: border-box;\n  display: block;\n  width: 100%;\n  height: 100%;\n  min-width: 0;\n  margin: 0;\n  padding: 0;\n  border: 0;\n  opacity: 0;\n  cursor: pointer;\n}\n\n:is(.ds-drop, label.ds-button) > input[type=\"file\"]::file-selector-button {\n  cursor: pointer;\n}\n\n.ds-drop:hover:not(:has(> input:disabled)),\n.ds-drop[data-dragging]:not(:has(> input:disabled)) {\n  background: var(--ds-fill-hover);\n}\n\n.ds-drop:has(> input:focus-visible),\n.ds-drop[data-dragging]:not(:has(> input:disabled)),\nlabel.ds-button:has(> input[type=\"file\"]:focus-visible) {\n  outline: 2px solid var(--ds-focus-ring);\n  outline-offset: 1px;\n}\n\n.ds-drop:has(> input:disabled),\nlabel.ds-button:has(> input[type=\"file\"]:disabled) {\n  cursor: default;\n  opacity: 0.5;\n}\n\n:is(.ds-drop, label.ds-button) > input[type=\"file\"]:disabled {\n  cursor: default;\n}\n";
+var controls_default = "/* Shape is a surface preference. Keep these base lengths unscaled: each\n * component resolves them with its own --ds-sf in component-metrics.css. */\n[data-ds-shape=\"square\"],\n:host([data-ds-shape=\"square\"]) {\n  --ds-corner-size: 0px;\n  --ds-corner-shape: round;\n  --ds-button-inset: 0.5px;\n}\n\n[data-ds-shape=\"rounded\"],\n:host([data-ds-shape=\"rounded\"]) {\n  --ds-corner-size: 4px;\n  --ds-corner-shape: round;\n  --ds-button-inset: 2.5px;\n}\n\n[data-ds-shape=\"circular\"],\n:host([data-ds-shape=\"circular\"]) {\n  --ds-corner-size: 999px;\n  --ds-corner-shape: round;\n  --ds-button-inset: 5px;\n}\n\n/* A squircle needs twice an arc's radius for the same apparent corner.\n * Circular controls keep true semicircles even in a squircle browser. */\n@supports (corner-shape: squircle) {\n  [data-ds-shape=\"rounded\"],\n  :host([data-ds-shape=\"rounded\"]) {\n    --ds-corner-size: 8px;\n    --ds-corner-shape: squircle;\n  }\n}\n/* Resolve dimensions where a component is drawn. Inherited calc() values have\n * already used their ancestor's scale. Base tokens stay unscaled and inherit;\n * resolved tokens can still be overridden directly on a component.\n * data-ds-surface gives ordinary layout elements the same scaled measures.\n */\n:root,\n:host,\n:where([data-ds-surface]) {\n  --ds-unit: calc(var(--ds-1, 20px) * var(--ds-sf, 1));\n  --ds-control-height: calc(var(--ds-control-size, var(--ds-08, 16px)) * var(--ds-sf, 1));\n  --ds-row-height: calc(var(--ds-row-size, var(--ds-1, 20px)) * var(--ds-sf, 1));\n  --ds-type-size-default: calc(var(--ds-text-size, 14px) * var(--ds-sf, 1));\n  --ds-type-size-small: calc(var(--ds-small-text-size, 10px) * var(--ds-sf, 1));\n  --ds-type-size-heading: calc(var(--ds-heading-text-size, 13px) * var(--ds-sf, 1));\n  --ds-type-size-display: calc(var(--ds-display-text-size, 20px) * var(--ds-sf, 1));\n  --ds-type-lineheight-default: calc(var(--ds-text-leading, 16px) * var(--ds-sf, 1));\n  --ds-type-letterspacing-default: calc(var(--ds-text-tracking, -0.3px) * var(--ds-sf, 1));\n  --ds-radius: calc(var(--ds-corner-size, 4px) * var(--ds-sf, 1));\n  --ds-radius-card: calc(var(--ds-card-corner-size, 4px) * var(--ds-sf, 1));\n}\n/*\n * A table: words straight on the paper, one square a row. No box and no\n * column lines: each row stands on a hairline at its foot, its words set on\n * that line like a caption: the sixteen of words against the 1px line, three\n * spare above, a 20px pitch, as Ezo sets every row.\n * Column headers keep the text's weight in the title grey; the first column\n * of a body row is a row header in the text colour. Nothing is filled with\n * the accent except a cell someone has selected.\n *\n * `.ds-table` dresses a native <table>; `<ds-table>` draws the same table\n * from data. Put a wide table in `.ds-table-scroll` to scroll it sideways,\n * and give the table `data-sticky` to keep its first column in place.\n *\n *   <th data-numeric>, <td data-numeric>   numbers, set to the column's end\n *   <tfoot>                                totals, under a line of their own\n *   <th colspan=\"2\">                       a column group, in a header row\n *   <th scope=\"rowgroup\">                  a row group, a heading row in grey\n *   <td aria-selected=\"true\">              a selected cell\n *\n * `data-plain` takes every line away: the same rows with no rule at their\n * foot, standing on the paper as a list's rows do (Money's tables), the\n * words still on the lower sixteen of each square.\n *\n * `data-frame` draws the same rows in a rounded 1px frame with a 1px line\n * between columns. Every line is drawn inside the cells' squares, the frame\n * over the first and last pixels as the sheet's lines are at a cell's end and\n * foot, so each row keeps its 20px pitch and the last row's rule is the\n * frame's foot; words stand 4px in from the lines. Fills in the cells keep\n * inside the rounded corners.\n *\n * `data-sheet` makes it a spreadsheet: every cell four squares by one (80 by\n * 20), its 1px lines at its end and foot so the words have 79 by 19, set 4px\n * in on the sixteen. Words that do not fit fade out over the last square\n * where they are cut, never an ellipsis: put them in `.ds-table__words`,\n * which carries the fade (a mask, so it fades to whatever is behind: the\n * paper, a selected or hovered cell's fill). A table marked `data-fit`\n * (`<ds-table sheet>` is) measures its cells and marks the cut ones\n * `data-cut=\"end\"`, or `\"start\"` for a number it has scrolled to its end, so\n * words that fit never fade; without it every cell's end fades. Column letters and the row numbers\n * (`.ds-table__letters`, `.ds-table__number`, two squares wide) stay in place\n * while the sheet scrolls both ways inside `.ds-table-scroll`; give the table\n * `--ds-table-columns` (the number of data columns) and the scroll a height\n * with `--ds-table-height`.\n *\n * `data-reorderable` (set by `<ds-table sheet reorderable>`) gives each row\n * number a grip, `.ds-table__handle` with the `handle` icon, in place of the\n * number while the row is hovered or the grip focused. A lifted row\n * (`tr[data-lifted]`) keeps the paper behind it and follows the pointer; while\n * `data-moving` is on the table the other rows step aside in transform alone,\n * a sortable list's 200ms on cubic-bezier(0.2, 0, 0, 1), and never under\n * reduced motion.\n */\n\n.ds-table {\n  --ds-table-row: var(--ds-row-height, calc(20px * var(--ds-sf, 1)));\n  --ds-table-gap: calc(var(--ds-table-row) / 2);\n  --ds-table-rule: var(--ds-border-color, light-dark(#d8d8d8, #3d3d3d));\n  --ds-table-paper: var(--ds-background, Canvas);\n  width: 100%;\n  border-collapse: collapse;\n  border-spacing: 0;\n  color: var(--ds-text-color, inherit);\n  font-family: \"Inter Arrows\", var(--ds-typeface-regular, inherit);\n  font-feature-settings: var(--ds-font-features, normal);\n  font-size: var(--ds-type-size-default, 14px);\n  letter-spacing: var(--ds-type-letterspacing-default, normal);\n}\n\n.ds-table :is(th, td) {\n  box-sizing: border-box;\n  height: var(--ds-table-row);\n  padding: 0 var(--ds-table-gap) 0 0;\n  border: 0;\n  border-bottom: 1px solid var(--ds-table-rule);\n  background: transparent;\n  line-height: var(--ds-type-lineheight-default);\n  text-align: start;\n  vertical-align: bottom;\n  font-weight: inherit;\n  white-space: nowrap;\n}\n\n.ds-table :is(th, td):last-child {\n  padding-inline-end: 0;\n}\n\n/* A plain table: no lines at all, each row one square with its words on the lower sixteen. */\n.ds-table[data-plain] :is(th, td) {\n  border-bottom: 0;\n}\n.ds-table[data-frame] {\n  --ds-table-radius: var(--ds-radius-card, calc(8px * var(--ds-sf, 1)));\n  position: relative;\n  border-collapse: separate;\n  border-radius: var(--ds-table-radius);\n  clip-path: inset(0 round var(--ds-table-radius));\n}\n/* The frame is drawn over the cells, so a filled cell never covers it. */\n.ds-table[data-frame]::after {\n  position: absolute;\n  inset: 0;\n  z-index: 1;\n  box-sizing: border-box;\n  border: 1px solid var(--ds-table-rule);\n  border-radius: var(--ds-table-radius);\n  content: \"\";\n  pointer-events: none;\n}\n.ds-table[data-frame] :is(th, td) {\n  padding-inline: calc(4px * var(--ds-sf, 1));\n}\n.ds-table[data-frame] :is(th, td) + :is(th, td) {\n  box-shadow: inset 1px 0 0 var(--ds-table-rule);\n}\n.ds-table[data-frame]:dir(rtl) :is(th, td) + :is(th, td) {\n  box-shadow: inset -1px 0 0 var(--ds-table-rule);\n}\n\n.ds-table thead th,\n.ds-table th[scope=\"rowgroup\"] {\n  color: var(--ds-title-color, light-dark(#6e6e6e, #9a9a9a));\n}\n\n.ds-table tbody th:not([scope=\"rowgroup\"]) {\n  color: inherit;\n}\n\n.ds-table [data-numeric] {\n  text-align: end;\n  font-variant-numeric: tabular-nums;\n}\n\n/* Totals: the rule above them is the last body row's; theirs closes the table. */\n.ds-table tfoot :is(th, td) {\n  color: inherit;\n}\n\n.ds-table [aria-selected=\"true\"] {\n  background: var(--ds-accent-color, Highlight);\n  color: var(--ds-button-text-color-on-accent, inherit);\n}\n\n.ds-table :is(th, td):has(> :is(a, button):only-child) {\n  cursor: pointer;\n}\n\n.ds-table caption {\n  box-sizing: border-box;\n  height: var(--ds-table-row);\n  padding-top: calc(var(--ds-table-row) - var(--ds-type-lineheight-default));\n  line-height: var(--ds-type-lineheight-default);\n  text-align: start;\n  color: var(--ds-title-color, light-dark(#6e6e6e, #9a9a9a));\n}\n\n.ds-table-scroll {\n  max-width: 100%;\n  overflow-x: auto;\n  overscroll-behavior-x: contain;\n}\n\n.ds-table-scroll > .ds-table {\n  width: max-content;\n  min-width: 100%;\n}\n\n.ds-table[data-sticky] :is(th, td):first-child {\n  position: sticky;\n  inset-inline-start: 0;\n  z-index: 1;\n  background: var(--ds-table-paper);\n}\n\n.ds-table[data-sticky] [aria-selected=\"true\"]:first-child {\n  background: var(--ds-accent-color, Highlight);\n}\n\n/* Keep the row whose details are open visible, including its sticky first cell.\n   Cell selection remains independent and keeps its accent. */\n.ds-table tbody > tr[data-open]:not([data-open=\"false\"]) > :is(th, td):not([aria-selected=\"true\"]) {\n  background: var(--ds-row-fill-current, var(--ds-fill-hover));\n}\n@media (forced-colors: active) {\n  .ds-table tbody > tr[data-open]:not([data-open=\"false\"]) > :is(th, td):not([aria-selected=\"true\"]) {\n    background: Highlight;\n    color: HighlightText;\n  }\n}\n\n/* A spreadsheet: cells four squares by one, on lines, lettered and numbered. */\n.ds-table[data-sheet] {\n  --ds-table-cell: calc(4 * var(--ds-table-row));\n  --ds-table-index: calc(2 * var(--ds-table-row));\n  --ds-table-text: calc(4px * var(--ds-sf, 1));\n  table-layout: fixed;\n  width: calc(var(--ds-table-index) + var(--ds-table-columns, 8) * var(--ds-table-cell));\n  min-width: 0;\n  border-collapse: separate;\n  border-spacing: 0;\n}\n.ds-table-scroll > .ds-table[data-sheet] {\n  width: calc(var(--ds-table-index) + var(--ds-table-columns, 8) * var(--ds-table-cell));\n  min-width: 0;\n}\n.ds-table[data-sheet] :is(th, td) {\n  width: var(--ds-table-cell);\n  max-width: var(--ds-table-cell);\n  height: var(--ds-table-row);\n  padding: 0 var(--ds-table-text);\n  border-bottom: 1px solid var(--ds-table-rule);\n  border-inline-end: 1px solid var(--ds-table-rule);\n  overflow: hidden;\n}\n.ds-table[data-sheet] :is(th, td):last-child {\n  padding-inline-end: var(--ds-table-text);\n}\n.ds-table[data-sheet] .ds-table__words {\n  --ds-table-fade-to: right;\n  --ds-table-fade-from: left;\n  display: block;\n  overflow: hidden;\n  white-space: nowrap;\n}\n.ds-table[data-sheet]:dir(rtl) .ds-table__words {\n  --ds-table-fade-to: left;\n  --ds-table-fade-from: right;\n}\n/* Cut words fade over their last square to nothing, at the edge where they are cut. */\n.ds-table[data-sheet]:not([data-fit]) .ds-table__words,\n.ds-table[data-sheet] .ds-table__words[data-cut=\"end\"] {\n  mask-image: linear-gradient(to var(--ds-table-fade-to), #000 calc(100% - var(--ds-table-row)), transparent);\n}\n.ds-table[data-sheet] .ds-table__words[data-cut=\"start\"] {\n  mask-image: linear-gradient(to var(--ds-table-fade-from), #000 calc(100% - var(--ds-table-row)), transparent);\n}\n.ds-table[data-sheet] .ds-table__number {\n  width: var(--ds-table-index);\n  max-width: var(--ds-table-index);\n  position: sticky;\n  inset-inline-start: 0;\n  z-index: 1;\n  background: var(--ds-table-paper);\n  color: var(--ds-title-color, light-dark(#6e6e6e, #9a9a9a));\n  text-align: center;\n  font-variant-numeric: tabular-nums;\n}\n.ds-table[data-sheet] thead :is(th, td) {\n  position: sticky;\n  top: 0;\n  z-index: 3;\n  background: var(--ds-table-paper);\n}\n.ds-table[data-sheet] thead tr + tr :is(th, td) {\n  top: var(--ds-table-row);\n}\n.ds-table[data-sheet] thead .ds-table__number {\n  z-index: 4;\n}\n.ds-table[data-sheet] .ds-table__letters td {\n  color: var(--ds-title-color, light-dark(#6e6e6e, #9a9a9a));\n  text-align: center;\n}\n.ds-table[data-sheet] tbody td:not([data-numeric]) {\n  color: inherit;\n}\n.ds-table[data-sheet] [aria-selected=\"true\"] {\n  background: transparent;\n  color: inherit;\n  box-shadow: inset 0 0 0 2px var(--ds-focus-ring, Highlight);\n}\n.ds-table-scroll:has(> .ds-table[data-sheet]) {\n  max-height: var(--ds-table-height, none);\n  overflow: auto;\n  overscroll-behavior: contain;\n}\n\n/* Rows that move: a grip on the number, the lifted row on paper, the others stepping aside. */\n.ds-table[data-sheet][data-reorderable] tbody .ds-table__number {\n  -webkit-user-select: none;\n  user-select: none;\n  -webkit-touch-callout: none;\n}\n.ds-table__index {\n  transition: opacity 100ms ease;\n}\n.ds-table__handle {\n  all: unset;\n  position: absolute;\n  inset: 0;\n  display: flex;\n  align-items: flex-end;\n  justify-content: center;\n  color: var(--ds-reorder-color, light-dark(#777777, #cccccc));\n  cursor: grab;\n  opacity: 0;\n  transition: opacity 100ms ease;\n}\n.ds-table__handle:hover {\n  color: var(--ds-reorder-active-color, light-dark(#333333, #ffffff));\n}\n.ds-table__handle:focus-visible {\n  box-shadow: inset 0 0 0 2px var(--ds-focus-ring, Highlight);\n}\n@media (hover: hover) {\n  .ds-table[data-reorderable]:not([data-moving]) tbody tr:hover .ds-table__handle { opacity: 1; }\n  .ds-table[data-reorderable]:not([data-moving]) tbody tr:hover .ds-table__index { opacity: 0; }\n}\n.ds-table[data-reorderable] tbody tr:is([data-lifted], :has(.ds-table__handle:focus-visible)) .ds-table__handle { opacity: 1; }\n.ds-table[data-reorderable] tbody tr:is([data-lifted], :has(.ds-table__handle:focus-visible)) .ds-table__index { opacity: 0; }\n.ds-table[data-moving] tbody tr {\n  transition: transform 200ms cubic-bezier(0.2, 0, 0, 1);\n}\n.ds-table[data-moving],\n.ds-table[data-moving] * {\n  cursor: grabbing;\n}\n.ds-table[data-sheet] tbody tr[data-lifted] {\n  position: relative;\n  z-index: 2;\n  transition: none;\n}\n.ds-table[data-sheet] tbody tr[data-lifted] > :is(th, td) {\n  background: var(--ds-table-paper);\n  box-shadow: inset 0 1px var(--ds-table-rule);\n}\n.ds-table__status {\n  position: absolute;\n  width: 1px;\n  height: 1px;\n  overflow: hidden;\n  clip-path: inset(50%);\n  white-space: nowrap;\n}\n@media (prefers-reduced-motion: reduce) {\n  .ds-table[data-moving] tbody tr,\n  .ds-table__index,\n  .ds-table__handle {\n    transition: none;\n  }\n}\n/*\n * Text on the grid, as plain classes on native text.\n *\n * Interface copy on a page without Lit: a label, a message, a title. Each line\n * is one square (`--ds-unit`), so a paragraph of any length stands on whole\n * squares, and a display title takes two. The `ds-text` element draws the same\n * words when they come from a translation key.\n *\n * one.css and controls.css both import this file, so a page that loads either\n * of them, or both, has one definition of these classes.\n *\n *   ds-text                                14 on a one-square line, the text colour\n *   ds-text--small                         10\n *   ds-text--heading                       13, medium\n *   ds-text--display                       20 on two squares, medium\n *   ds-text--strong                        medium\n *   ds-text--muted, --title, --danger      tones\n *\n * The page's own text reads as ds-text does: what stands in the body outside\n * a component is 14 on a one-square line in the text colour, scaled with the\n * device, so a product never sets its own body size, leading or ink.\n *\n * It is drawn with grayscale antialiasing, as one.css has always drawn it: the\n * browser's own smoothing on a Mac thickens every stem, so the same 400 weight\n * reads heavier in a product that loads controls.css without one.css (Link\n * beside Money). Inherited, so components' shadow roots draw the same.\n */\n\nbody {\n  color: var(--ds-text-color);\n  font-family: \"Inter Arrows\", var(--ds-typeface-regular);\n  font-size: var(--ds-type-size-default);\n  line-height: var(--ds-unit);\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n  text-rendering: optimizeLegibility;\n}\n\n.ds-text {\n  margin: 0;\n  color: var(--ds-text-color);\n  font-family: \"Inter Arrows\", var(--ds-typeface-regular);\n  font-feature-settings: var(--ds-font-features);\n  font-size: var(--ds-type-size-default);\n  font-weight: var(--ds-type-weight-default);\n  line-height: var(--ds-unit);\n  letter-spacing: var(--ds-type-letterspacing-default);\n}\n\n.ds-text--small {\n  font-size: var(--ds-type-size-small);\n}\n\n/* text.whole-words: headings must not inherit emergency wrapping from prose. */\n:is(h1, h2, h3, h4, h5, h6, th, [role=\"heading\"], [role=\"columnheader\"], [role=\"rowheader\"], .ds-text--heading, .ds-text--display) {\n  word-break: normal;\n  overflow-wrap: normal;\n  hyphens: manual;\n}\n\n.ds-text--heading {\n  font-family: \"Inter Arrows\", var(--ds-typeface-medium);\n  font-size: var(--ds-type-size-heading);\n  font-weight: var(--ds-type-weight-bold);\n}\n\n.ds-text--display {\n  font-family: \"Inter Arrows\", var(--ds-typeface-medium);\n  font-size: var(--ds-type-size-display);\n  font-weight: var(--ds-type-weight-bold);\n  line-height: calc(2 * var(--ds-unit));\n  letter-spacing: calc(var(--ds-display-text-tracking, -0.4px) * var(--ds-sf, 1));\n}\n\n.ds-text--strong {\n  font-family: \"Inter Arrows\", var(--ds-typeface-medium);\n  font-weight: var(--ds-type-weight-bold);\n}\n\n.ds-text--muted {\n  color: var(--ds-text-color-muted);\n}\n\n.ds-text--title {\n  color: var(--ds-title-color);\n}\n\n.ds-text--danger {\n  color: var(--ds-danger-color);\n}\n\n.ds-text--warning {\n  color: var(--ds-warning-color);\n}\n\n/*\n * An empty state, as plain classes on native elements.\n *\n * It says that a place has nothing in it yet and what to do about it: a title,\n * a line of text and, when there is one, the action that fills it. The words\n * sit on the paper with no box, no illustration and no colour; every line is\n * one square, so the whole stands on whole squares. The `ds-empty` element\n * draws the same parts from a translation key, with the shared words' \"Nothing\n * here yet\" as its title when none is given.\n *\n *   ds-empty                 the block, at most sixteen squares wide\n *   ds-empty__icon           an icon from the library, before the title, muted\n *   ds-empty__title          one line in the medium face\n *   ds-empty__text           lines of one square, muted\n *   ds-empty__actions        buttons or links on one row, one square below\n *   ds-empty--centered       centred in the space it stands in\n *   ds-empty--done           all done: the check on a mark in the success\n *                            green, the title in that green\n *\n * Tokens: `--ds-empty-measure` (the widest it grows, sixteen squares) and\n * `--ds-empty-padding` (the room above and below, none by default).\n */\n\n.ds-empty {\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  width: 100%;\n  max-width: var(--ds-empty-measure, calc(16 * var(--ds-unit)));\n  margin: 0 auto;\n  text-align: center;\n  padding-block: var(--ds-empty-padding, 0);\n  color: var(--ds-text-color);\n  font-family: \"Inter Arrows\", var(--ds-typeface-regular);\n  font-feature-settings: var(--ds-font-features);\n  font-size: var(--ds-type-size-default);\n  font-weight: var(--ds-type-weight-default);\n  line-height: var(--ds-unit);\n  letter-spacing: var(--ds-type-letterspacing-default);\n  text-transform: none;\n}\n\n.ds-empty__heading {\n  display: flex;\n  align-items: flex-start;\n  justify-content: center;\n  gap: calc(var(--ds-unit) - var(--ds-control-height));\n  max-width: 100%;\n}\n\n.ds-empty__icon {\n  display: flex;\n  flex: 0 0 auto;\n  align-items: center;\n  justify-content: center;\n  width: var(--ds-control-height);\n  height: var(--ds-control-height);\n  margin-top: calc(var(--ds-unit) - var(--ds-control-height));\n  color: var(--ds-text-color-muted);\n}\n\n.ds-empty__title,\n.ds-empty__text {\n  margin: 0;\n  font: inherit;\n  letter-spacing: inherit;\n}\n\n.ds-empty__title {\n  min-width: 0;\n  padding-top: calc(var(--ds-unit) - var(--ds-control-height));\n  line-height: var(--ds-control-height);\n  font-family: \"Inter Arrows\", var(--ds-typeface-medium);\n  font-weight: var(--ds-type-weight-bold);\n}\n\n.ds-empty__text {\n  color: var(--ds-text-color-muted);\n}\n\n.ds-empty__actions {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: flex-end;\n  justify-content: center;\n  gap: 0 calc(var(--ds-unit) / 2);\n  min-height: var(--ds-row-height);\n  margin-top: var(--ds-unit);\n}\n\n.ds-empty--start {\n  align-items: flex-start;\n  margin-inline: 0;\n  text-align: start;\n}\n\n.ds-empty--start .ds-empty__heading,\n.ds-empty--start .ds-empty__actions {\n  justify-content: flex-start;\n}\n\n.ds-empty--centered {\n  align-items: center;\n  margin-inline: auto;\n  text-align: center;\n}\n\n.ds-empty--centered .ds-empty__actions {\n  justify-content: center;\n}\n\n/* Done: a place empty because everything in it is finished (every receipt\n   found, nothing left to review). The icon, the check by default, stands on a\n   round mark one control high in the success green, on the sixteen, and the\n   title takes the same green; the line under it stays muted. */\n.ds-empty--done .ds-empty__icon {\n  box-sizing: border-box;\n  justify-content: center;\n  width: var(--ds-control-height);\n  height: var(--ds-control-height);\n  margin-top: calc(var(--ds-unit) - var(--ds-control-height));\n  border-radius: 50%;\n  background: var(--ds-success-color);\n  color: light-dark(var(--ds-white), var(--ds-black));\n  --ds-icon-color: currentColor;\n}\n\n.ds-empty--done .ds-empty__title {\n  color: var(--ds-success-color);\n}\n\n/* Compatibility for saved markup with the icon and title as siblings. */\n.ds-empty:has(> .ds-empty__icon:not([hidden])) {\n  display: grid;\n  grid-template-columns: var(--ds-control-height) minmax(0, auto);\n  column-gap: calc(var(--ds-unit) - var(--ds-control-height));\n  justify-content: center;\n  align-items: start;\n}\n.ds-empty > .ds-empty__icon { grid-column: 1; grid-row: 1; }\n.ds-empty:has(> .ds-empty__icon:not([hidden])) > .ds-empty__title { grid-column: 2; grid-row: 1; }\n.ds-empty > .ds-empty__text,\n.ds-empty > .ds-empty__actions { grid-column: 1 / -1; }\n/*\n * An inline notice, as plain classes on native elements.\n *\n * A notice stands in the flow of the page, where its words apply: a failure\n * beside the form that failed, a warning above the list it is about. It is not\n * positioned and takes no box or shadow. A square mark, one control high and\n * filled in the tone's colour, carries the tone; the words sit on the paper\n * beside it, each line one square, with the actions on the row below and the\n * dismiss button at the end of the first line. Danger turns the words into\n * the danger colour. The `ds-notice` element draws the same parts.\n *\n *   ds-notice                       the block: mark, words, dismiss\n *   ds-notice__mark                 the mark, a picture's 4px corners; holds an icon in its ink\n *   ds-notice__title                one line in the medium face\n *   ds-notice__text                 lines of one square\n *   ds-notice__actions              buttons or links on one row\n *   ds-notice__dismiss              an icon button at the end of the first line\n *   ds-notice--success, --warning, --danger     tones; neutral without one\n *   ds-notice--banner               a strip across the top of its positioning\n *                                   context instead: one square high, filled in\n *                                   the tone's colour, everything on one line\n *   ds-notice--app                  a row at the top of the page leading to the\n *                                   site's iPhone app: its picture\n *                                   (ds-notice__picture, two squares), its name\n *                                   and one line about it, Open\n *                                   (a.ds-notice__open) and the close; three\n *                                   squares high with a hairline at its foot.\n *                                   startAppBanners() from 0-face/app-banner.ts\n *                                   shows it only where it belongs\n *\n * Give the block role=\"status\", or role=\"alert\" for danger, so assistive\n * technology reads it when it appears.\n *\n * Tokens: `--ds-notice-mark`, `--ds-notice-mark-ink` and `--ds-notice-ink`,\n * which the tones set.\n */\n\n.ds-notice {\n  --ds-notice-mark: var(--ds-fill);\n  --ds-notice-mark-ink: var(--ds-text-color);\n  --ds-notice-ink: var(--ds-text-color);\n  box-sizing: border-box;\n  display: grid;\n  grid-template-columns: var(--ds-unit) minmax(0, 1fr) auto;\n  align-items: start;\n  margin: 0;\n  color: var(--ds-notice-ink);\n  font-family: \"Inter Arrows\", var(--ds-typeface-regular);\n  font-feature-settings: var(--ds-font-features);\n  font-size: var(--ds-type-size-default);\n  font-weight: var(--ds-type-weight-default);\n  line-height: var(--ds-unit);\n  letter-spacing: var(--ds-type-letterspacing-default);\n  text-transform: none;\n}\n\n.ds-notice--success {\n  --ds-notice-mark: var(--ds-apple-green);\n  --ds-notice-mark-ink: var(--ds-black);\n}\n\n.ds-notice--warning {\n  --ds-notice-mark: var(--ds-orange);\n  --ds-notice-mark-ink: var(--ds-black);\n}\n\n.ds-notice--danger {\n  --ds-notice-mark: var(--ds-danger-color);\n  --ds-notice-mark-ink: light-dark(var(--ds-white), var(--ds-black));\n  --ds-notice-ink: var(--ds-danger-color);\n}\n\n/* The mark stands on the first line, one control high in a one-square cell. */\n.ds-notice__mark {\n  box-sizing: border-box;\n  grid-column: 1;\n  grid-row: 1;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: var(--ds-control-height);\n  height: var(--ds-control-height);\n  margin-block: calc((var(--ds-unit) - var(--ds-control-height)) / 2);\n  overflow: hidden;\n  /* Rounded as every icon tile is (Joachim, 19 October 2026). */\n  border-radius: var(--ds-radius);\n  corner-shape: var(--ds-corner-shape, round);\n  background: var(--ds-notice-mark);\n  color: var(--ds-notice-mark-ink);\n  --ds-icon-color: var(--ds-notice-mark-ink);\n}\n\n.ds-notice__title,\n.ds-notice__text,\n.ds-notice__actions {\n  grid-column: 2;\n  min-width: 0;\n  margin: 0;\n}\n\n.ds-notice__title,\n.ds-notice__text {\n  font: inherit;\n  letter-spacing: inherit;\n  overflow-wrap: anywhere;\n}\n\n.ds-notice__title {\n  font-family: \"Inter Arrows\", var(--ds-typeface-medium);\n  font-weight: var(--ds-type-weight-bold);\n}\n\n.ds-notice__actions {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  gap: 0 calc(var(--ds-unit) / 2);\n  min-height: var(--ds-row-height);\n}\n\n/* The dismiss button closes the first line: a one-square cell at the end.\n   Two classes, so the button's own reset of its margin does not undo it. */\n.ds-notice .ds-notice__dismiss {\n  grid-column: 3;\n  grid-row: 1;\n  margin-block: calc((var(--ds-unit) - var(--ds-control-height)) / 2);\n  margin-inline-start: calc(var(--ds-unit) - var(--ds-control-height));\n}\n\n/* A banner: the same parts on one line, one square high, across the top of\n   the nearest positioned ancestor (or the page), on a fill of the tone's\n   colour. It takes no room in the flow; leave a square for it where words\n   stand under it. The actions stand at the end of the line, half a square\n   apart; danger words keep the text colour on the danger fill. */\n.ds-notice--banner {\n  position: absolute;\n  top: 0;\n  inset-inline: 0;\n  z-index: 9999;\n  display: flex;\n  align-items: center;\n  gap: calc(var(--ds-unit) / 2);\n  height: var(--ds-unit);\n  padding-inline: var(--ds-unit);\n  background: color-mix(in srgb, var(--ds-notice-mark) 40%, transparent);\n  --ds-notice-ink: var(--ds-text-color);\n}\n\n.ds-notice--banner .ds-notice__mark {\n  flex: none;\n  margin-block: 0;\n}\n\n.ds-notice--banner .ds-notice__title,\n.ds-notice--banner .ds-notice__text {\n  min-width: 0;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: clip;\n}\n\n/* Cut words fade over their last square, never an ellipsis (0-face/cut-fade.ts marks them). */\n:is(.ds-notice--banner, .ds-notice--app) :is(.ds-notice__title, .ds-notice__text)[data-cut=\"end\"] {\n  mask-image: linear-gradient(to right, #000 calc(100% - var(--ds-unit)), transparent);\n}\n:is(.ds-notice--banner, .ds-notice--app) :is(.ds-notice__title, .ds-notice__text)[data-cut=\"end\"]:dir(rtl) {\n  mask-image: linear-gradient(to left, #000 calc(100% - var(--ds-unit)), transparent);\n}\n\n.ds-notice--banner .ds-notice__text {\n  flex: 1;\n}\n\n.ds-notice--banner .ds-notice__actions {\n  flex: none;\n  min-height: 0;\n}\n\n.ds-notice--banner .ds-notice__dismiss {\n  margin-block: 0;\n  margin-inline-start: 0;\n}\n\n/* The app banner: a row at the top of the page, in the flow, three squares\n   high: half a square above and below two squares of content, a hairline at\n   its foot. The app's picture fills two squares with a picture's corners; the\n   name and the line about it take a square each, on the sixteen; Open and the\n   close stand on the sixteen of the square in the middle of the two. */\n.ds-notice--app {\n  grid-template-columns: calc(2 * var(--ds-unit)) minmax(0, 1fr) auto var(--ds-unit);\n  grid-template-rows: var(--ds-unit) var(--ds-unit);\n  column-gap: calc(var(--ds-unit) / 2);\n  align-items: end;\n  padding: calc(var(--ds-unit) / 2) var(--ds-unit);\n  background: var(--ds-paper);\n  box-shadow: inset 0 -1px 0 var(--ds-border-color);\n  line-height: var(--ds-type-lineheight-default);\n}\n\n.ds-notice--app[hidden] {\n  display: none;\n}\n\n.ds-notice__picture {\n  box-sizing: border-box;\n  grid-column: 1;\n  grid-row: 1 / 3;\n  align-self: stretch;\n  overflow: hidden;\n  border-radius: var(--ds-radius);\n  background: var(--ds-fill);\n  outline: 1px solid var(--ds-border-color);\n  outline-offset: -1px;\n}\n\n.ds-notice__picture img {\n  display: block;\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n}\n\n.ds-notice--app .ds-notice__title,\n.ds-notice--app .ds-notice__text {\n  grid-column: 2;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: clip;\n}\n\n.ds-notice--app .ds-notice__title { grid-row: 1; }\n\n.ds-notice--app .ds-notice__text {\n  grid-row: 2;\n  color: var(--ds-text-color-muted);\n}\n\n/* Open and the close: their square starts half a square into the two, its\n   control on the lower sixteen of it. */\n.ds-notice--app .ds-notice__open,\n.ds-notice--app .ds-notice__dismiss {\n  grid-row: 1 / 3;\n  align-self: start;\n  margin: calc(1.5 * var(--ds-unit) - var(--ds-control-height)) 0 0;\n}\n\n.ds-notice--app .ds-notice__open {\n  grid-column: 3;\n  text-decoration: none;\n}\n\n.ds-notice--app .ds-notice__dismiss {\n  grid-column: 4;\n  justify-self: end;\n}\n\n/*\n * Overlay: everything that stands over the page, one component with a type.\n * A `modal` stands in the centre (controls.css and the element's frame); this\n * sheet draws the others, for the `ds-overlay` element (`type=\"sheet\"`,\n * `\"drawer\"` with `side`, `\"screen\"`, which mark its native dialog\n * `data-ds-type` and `data-ds-edge`) and the native frame\n * (`dialog.ds-overlay.ds-overlay--sheet`, `--drawer` with `--start`,\n * `--screen`); controls.css imports it. A popover is placed by the element.\n *\n * - A sheet is as wide as the screen up to 32 squares and centred beyond\n *   that, as high as its content up to two squares below the top, with no\n *   line at its foot; its one line, at the top, is drawn inside its first\n *   square (`--ds-overlay-line`), so it stands on whole squares. A handle two squares wide stands in the middle of its\n *   first square and stays there while the content scrolls.\n * - A drawer is the screen's height and 16 squares wide (`--ds-overlay-width`),\n *   leaving at least two squares of the page beside it; its one line is on\n *   the side that faces the page. `end` is the right in a left-to-right page.\n * - Each keeps the square of padding inside the screen's safe area\n *   (`env(safe-area-inset-*)`, with `viewport-fit=cover` on the page).\n * - Each slides in from its edge and back out to it, in transform alone,\n *   while the backdrop fades; with reduced motion it fades in place. Dragging\n *   it towards its edge (0-face/overlay-swipe.ts) moves it with the finger and\n *   fades the backdrop as it goes.\n * - The page behind a modal native sheet or drawer does not scroll.\n */\n\n:is(ds-overlay > dialog[data-ds-edge=\"bottom\"], dialog.ds-overlay.ds-overlay--sheet),\n:is(ds-overlay > dialog[data-ds-edge=\"end\"], dialog.ds-overlay.ds-overlay--drawer:not(.ds-overlay--start)),\n:is(ds-overlay > dialog[data-ds-edge=\"start\"], dialog.ds-overlay.ds-overlay--drawer.ds-overlay--start) {\n  --ds-overlay-gap: var(--ds-unit);\n  --ds-overlay-inner: var(--ds-overlay-padding, var(--ds-unit));\n  /* The line it faces the page with is drawn inside its first square. */\n  --ds-overlay-within: max(0px, var(--ds-overlay-inner) - var(--ds-overlay-line, 1px));\n  --ds-overlay-motion: var(--ds-overlay-enter, 380ms);\n  --ds-overlay-curve: var(--ds-overlay-easing, cubic-bezier(0.32, 0.72, 0, 1));\n  margin: 0;\n  gap: var(--ds-overlay-gap);\n  transform: var(--ds-overlay-held);\n  transition:\n    transform var(--ds-overlay-motion) var(--ds-overlay-curve),\n    opacity var(--ds-overlay-motion) var(--ds-overlay-curve),\n    overlay var(--ds-overlay-motion) allow-discrete,\n    display var(--ds-overlay-motion) allow-discrete;\n}\n\n/* Content that supplies its own room. */\n:is(ds-overlay > dialog[data-ds-edge], dialog.ds-overlay:is(.ds-overlay--sheet, .ds-overlay--drawer))[data-ds-overlay-flush] {\n  --ds-overlay-inner: 0px;\n  --ds-overlay-gap: 0px;\n}\n\n:is(ds-overlay > dialog[data-ds-edge=\"bottom\"], dialog.ds-overlay.ds-overlay--sheet) {\n  --ds-overlay-held: translateY(var(--ds-overlay-drag, 0px));\n  --ds-overlay-away: translateY(100%);\n  inset: auto 0 0;\n  width: var(--ds-overlay-width, 100%);\n  max-width: min(100%, var(--ds-overlay-sheet-width, calc(32 * var(--ds-unit))));\n  height: var(--ds-overlay-height, fit-content);\n  max-height: calc(100dvh - var(--ds-overlay-sheet-gap, calc(2 * var(--ds-unit))) - env(safe-area-inset-top, 0px));\n  margin: 0 auto;\n  padding:\n    var(--ds-overlay-within)\n    calc(var(--ds-overlay-inner) + env(safe-area-inset-right, 0px))\n    calc(var(--ds-overlay-inner) + env(safe-area-inset-bottom, 0px))\n    calc(var(--ds-overlay-inner) + env(safe-area-inset-left, 0px));\n  border-bottom: 0;\n}\n\n/* The handle: two squares wide, in the middle of the first square, above the\n * content as it scrolls. It takes no room: the content starts where it would. */\n:is(ds-overlay > dialog[data-ds-edge=\"bottom\"], dialog.ds-overlay.ds-overlay--sheet)::before {\n  --ds-overlay-handle-height: calc(4px * var(--ds-sf, 1));\n  content: \"\";\n  display: var(--ds-overlay-handle, block);\n  position: sticky;\n  z-index: 1;\n  /* A sticky offset counts from the content edge, under the sheet's top padding: take that\n     padding off, so the handle is held where it already stands, in the first square. */\n  top: calc((var(--ds-unit) - var(--ds-overlay-handle-height)) / 2 - var(--ds-overlay-line, 1px) - var(--ds-overlay-within));\n  flex: 0 0 auto;\n  align-self: center;\n  width: calc(2 * var(--ds-unit));\n  height: var(--ds-overlay-handle-height);\n  margin-top: calc(var(--ds-overlay-inner) * -1 + (var(--ds-unit) - var(--ds-overlay-handle-height)) / 2);\n  margin-bottom: calc(var(--ds-overlay-inner) - var(--ds-overlay-gap) - var(--ds-overlay-handle-height) - (var(--ds-unit) - var(--ds-overlay-handle-height)) / 2);\n  border-radius: calc(var(--ds-overlay-handle-height) / 2);\n  background: var(--ds-overlay-handle-color, var(--ds-border-color));\n  pointer-events: none;\n}\n\n:is(ds-overlay > dialog[data-ds-edge=\"end\"], dialog.ds-overlay.ds-overlay--drawer:not(.ds-overlay--start)),\n:is(ds-overlay > dialog[data-ds-edge=\"start\"], dialog.ds-overlay.ds-overlay--drawer.ds-overlay--start) {\n  --ds-overlay-held: translateX(var(--ds-overlay-drag, 0px));\n  width: calc(var(--ds-overlay-width, calc(16 * var(--ds-unit))) + var(--ds-overlay-safe-side, 0px));\n  max-width: calc(100vw - 2 * var(--ds-unit));\n  height: 100dvh;\n  max-height: none;\n  border-top: 0;\n  border-bottom: 0;\n}\n\n/* At the right: the end of a left-to-right page, the start of a right-to-left one. */\n:is(ds-overlay > dialog[data-ds-edge=\"end\"], dialog.ds-overlay.ds-overlay--drawer:not(.ds-overlay--start)):not(:dir(rtl)),\n:is(ds-overlay > dialog[data-ds-edge=\"start\"], dialog.ds-overlay.ds-overlay--drawer.ds-overlay--start):dir(rtl) {\n  --ds-overlay-away: translateX(100%);\n  --ds-overlay-safe-side: env(safe-area-inset-right, 0px);\n  inset: 0 0 0 auto;\n  padding:\n    calc(var(--ds-overlay-inner) + env(safe-area-inset-top, 0px))\n    calc(var(--ds-overlay-inner) + env(safe-area-inset-right, 0px))\n    calc(var(--ds-overlay-inner) + env(safe-area-inset-bottom, 0px))\n    var(--ds-overlay-within);\n  border-right: 0;\n}\n\n:is(ds-overlay > dialog[data-ds-edge=\"start\"], dialog.ds-overlay.ds-overlay--drawer.ds-overlay--start):not(:dir(rtl)),\n:is(ds-overlay > dialog[data-ds-edge=\"end\"], dialog.ds-overlay.ds-overlay--drawer:not(.ds-overlay--start)):dir(rtl) {\n  --ds-overlay-away: translateX(-100%);\n  --ds-overlay-safe-side: env(safe-area-inset-left, 0px);\n  inset: 0 auto 0 0;\n  padding:\n    calc(var(--ds-overlay-inner) + env(safe-area-inset-top, 0px))\n    var(--ds-overlay-within)\n    calc(var(--ds-overlay-inner) + env(safe-area-inset-bottom, 0px))\n    calc(var(--ds-overlay-inner) + env(safe-area-inset-left, 0px));\n  border-left: 0;\n}\n\n/* The page behind a native sheet or drawer holds still while it is open, as\n * the element holds it (the element saves and restores the scroll itself). */\n:root:has(dialog.ds-overlay:is(.ds-overlay--sheet, .ds-overlay--drawer):modal) {\n  overflow: hidden;\n  overscroll-behavior: none;\n}\n\n/* Out to its edge, a little quicker than it came; and in from it. */\n:is(ds-overlay > dialog[data-ds-edge], dialog.ds-overlay:is(.ds-overlay--sheet, .ds-overlay--drawer)):not([open]) {\n  --ds-overlay-motion: var(--ds-overlay-exit, 260ms);\n  transform: var(--ds-overlay-away);\n}\n\n@starting-style {\n  :is(ds-overlay > dialog[data-ds-edge], dialog.ds-overlay:is(.ds-overlay--sheet, .ds-overlay--drawer))[open] {\n    transform: var(--ds-overlay-away);\n  }\n}\n\n:is(ds-overlay > dialog[data-ds-edge], dialog.ds-overlay:is(.ds-overlay--sheet, .ds-overlay--drawer))::backdrop {\n  opacity: calc(1 - var(--ds-overlay-progress, 0));\n  transition:\n    opacity var(--ds-overlay-motion, 380ms) ease,\n    overlay var(--ds-overlay-motion, 380ms) allow-discrete,\n    display var(--ds-overlay-motion, 380ms) allow-discrete;\n}\n\n:is(ds-overlay > dialog[data-ds-edge], dialog.ds-overlay:is(.ds-overlay--sheet, .ds-overlay--drawer)):not([open])::backdrop {\n  opacity: 0;\n}\n\n@starting-style {\n  :is(ds-overlay > dialog[data-ds-edge], dialog.ds-overlay:is(.ds-overlay--sheet, .ds-overlay--drawer))[open]::backdrop {\n    opacity: 0;\n  }\n}\n\n/* While a finger holds it, it follows the finger alone. */\n:is(ds-overlay > dialog[data-ds-edge], dialog.ds-overlay:is(.ds-overlay--sheet, .ds-overlay--drawer))[data-ds-overlay-dragging],\n:is(ds-overlay > dialog[data-ds-edge], dialog.ds-overlay:is(.ds-overlay--sheet, .ds-overlay--drawer))[data-ds-overlay-dragging]::backdrop {\n  transition: none;\n}\n\n/* Reduced motion: no slide. It fades where it stands, a dragged one too. */\n@media (prefers-reduced-motion: reduce) {\n  :is(ds-overlay > dialog[data-ds-edge], dialog.ds-overlay:is(.ds-overlay--sheet, .ds-overlay--drawer)) {\n    --ds-overlay-motion: 150ms;\n    transition:\n      opacity var(--ds-overlay-motion) ease,\n      overlay var(--ds-overlay-motion) allow-discrete,\n      display var(--ds-overlay-motion) allow-discrete;\n  }\n\n  :is(ds-overlay > dialog[data-ds-edge], dialog.ds-overlay:is(.ds-overlay--sheet, .ds-overlay--drawer)):not([open]) {\n    --ds-overlay-motion: 150ms;\n    transform: var(--ds-overlay-held);\n    opacity: 0;\n  }\n\n  @starting-style {\n    :is(ds-overlay > dialog[data-ds-edge], dialog.ds-overlay:is(.ds-overlay--sheet, .ds-overlay--drawer))[open] {\n      transform: var(--ds-overlay-held);\n      opacity: 0;\n    }\n  }\n}\n\n/*\n * The screen: an overlay over the whole screen, for navigation folded away on\n * a narrow screen (`ds-header`, `ds-page drawer`, `attachOverlay()`).\n *\n * The panel is the dialog frame (`dialog.ds-overlay`) laid over the whole\n * screen, on the page's own paper, a square of room on every side. Its first\n * row holds the close button where the menu button stood; what the page\n * folded away (its navigation and actions) follows, every link one square\n * high. The page script `0-face/attach-overlay.ts` opens it: it moves the folded parts\n * into the panel and back, keeps focus inside, closes on Escape, on a link and\n * when the screen widens, and holds the page's scroll while it is open.\n * `ds-header` and `ds-page drawer` use the same script and these rules.\n *\n *   ds-overlay--screen         on a <dialog class=\"ds-overlay\">, the panel\n *   ds-overlay__bar             the first row: the close button at its end\n *   ds-overlay__close           the close button, an icon button\n *   ds-overlay__toggle          the button that opens it: it carries\n *                              two icons, the first shown while closed and the\n *                              second (close) while open\n *\n * Tokens: `--ds-overlay-paper` (the page's paper by default).\n */\n\n:is(ds-overlay > dialog[data-ds-type=\"screen\"], dialog.ds-overlay.ds-overlay--screen) {\n  --ds-overlay-width: 100vw;\n  width: 100vw;\n  max-width: none;\n  height: 100dvh;\n  max-height: none;\n  margin: 0;\n  padding: var(--ds-unit);\n  gap: 0;\n  border: 0;\n  background: var(--ds-overlay-paper, var(--background, Canvas));\n  overflow-y: auto;\n}\n\n:is(ds-overlay > dialog[data-ds-type=\"screen\"], dialog.ds-overlay.ds-overlay--screen)[open] {\n  display: flex;\n  flex-direction: column;\n  align-items: stretch;\n  gap: var(--ds-unit);\n}\n\n/* Content that supplies its own room, as the documentation's navigation does. */\n:is(ds-overlay > dialog[data-ds-type=\"screen\"], dialog.ds-overlay.ds-overlay--screen)[data-ds-overlay-flush] {\n  padding: 0;\n  gap: 0;\n}\n\n:is(ds-overlay > dialog[data-ds-type=\"screen\"], dialog.ds-overlay.ds-overlay--screen)::backdrop {\n  background: transparent;\n}\n\n/* It arrives by fading in and settling half a square, and leaves at once. */\n@media (prefers-reduced-motion: no-preference) {\n  :is(ds-overlay > dialog[data-ds-type=\"screen\"], dialog.ds-overlay.ds-overlay--screen)[open] {\n    transition: opacity 160ms ease-out, transform 160ms ease-out;\n  }\n\n  @starting-style {\n    :is(ds-overlay > dialog[data-ds-type=\"screen\"], dialog.ds-overlay.ds-overlay--screen)[open] {\n      opacity: 0;\n      transform: translateY(calc(var(--ds-unit) / -2));\n    }\n  }\n}\n\n.ds-overlay__bar {\n  display: flex;\n  align-items: center;\n  justify-content: flex-end;\n  min-height: var(--ds-row-height);\n}\n\n/* Centred in the last square of the row, as the menu button is. Two classes,\n   so the button's own margin does not undo it. */\n.ds-overlay__bar > .ds-overlay__close {\n  margin-inline-end: calc((var(--ds-unit) - var(--ds-control-height)) / 2);\n}\n\n/* The toggle shows its first icon while closed and its second while open; the\n   close button, a copy of it, shows the second. */\n.ds-overlay__toggle:not([aria-expanded=\"true\"]) > :nth-child(2),\n.ds-overlay__toggle[aria-expanded=\"true\"] > :first-child:not(:only-child),\n.ds-overlay__close > :first-child:not(:only-child) {\n  display: none;\n}\n/*\n * A site header, as plain classes on native elements.\n *\n * One row of one square, a square of room around it: the brand at the start\n * (at least twelve squares), the navigation in the middle of the row, centred\n * on the page whatever the brand and the actions hold, the actions at the end:\n * three columns, the two outer ones sharing what the middle leaves. Every link is\n * one square high, a square apart, in the text's ink; the page you are on\n * (`aria-current=\"page\"`) stands on a hairline of the full ink, the others\n * show a faint one under the pointer. Below thirty squares of width the\n * navigation and the actions fold into a drawer: the menu button takes their\n * place at the end of the row, and `0-face/header.ts` opens them over the page.\n * The `ds-header` element draws the same parts.\n *\n *   ds-header              the row, a <header>\n *   ds-header__brand       the mark or name, a link home; a picture in it is one square high\n *   ds-header__nav         the links, a <nav>\n *   ds-header__actions     buttons or links at the end\n *   ds-header__toggle      the menu button: `.ds-button.ds-button--icon.ds-overlay__toggle`\n *                          with a menu icon and a close icon, shown only on a narrow screen\n *   ds-header--sticky      stays at the top of the page as it scrolls, on the paper\n *\n * Tokens: `--ds-header-brand` (the brand's width, at least twelve squares),\n * `--ds-header-paper` (the sticky header's paper) and `--ds-header-line` (the\n * hairline under a sticky header, none by default).\n */\n\n.ds-header {\n  box-sizing: border-box;\n  container-type: inline-size;\n  display: grid;\n  grid-template-columns: minmax(max-content, 1fr) auto minmax(max-content, 1fr);\n  align-items: center;\n  gap: calc(2 * var(--ds-unit));\n  min-width: 0;\n  margin: 0;\n  padding: var(--ds-unit);\n  color: var(--ds-text-color);\n  font-family: \"Inter Arrows\", var(--ds-typeface-regular);\n  font-feature-settings: var(--ds-font-features);\n  font-size: var(--ds-type-size-default);\n  font-weight: var(--ds-type-weight-default);\n  line-height: var(--ds-unit);\n  letter-spacing: var(--ds-type-letterspacing-default);\n  text-transform: none;\n}\n\n.ds-header--sticky {\n  position: sticky;\n  top: 0;\n  /* Above a section's own layers (a panel laid over a picture stands at 1), so the header is never covered as the page scrolls. */\n  z-index: 2;\n  background: var(--ds-header-paper, var(--background, Canvas));\n  box-shadow: inset 0 -1px var(--ds-header-line, transparent);\n}\n\n.ds-header__brand {\n  box-sizing: border-box;\n  grid-column: 1;\n  justify-self: start;\n  display: inline-flex;\n  flex: 0 0 auto;\n  min-width: var(--ds-header-brand, calc(12 * var(--ds-unit)));\n  align-items: center;\n  gap: calc(var(--ds-unit) / 2);\n  height: var(--ds-unit);\n  color: inherit;\n  font-family: \"Inter Arrows\", var(--ds-typeface-medium);\n  font-weight: var(--ds-type-weight-bold);\n  text-decoration: none;\n  white-space: nowrap;\n}\n\n.ds-header__brand :is(img, svg) {\n  display: block;\n  width: auto;\n  height: var(--ds-unit);\n}\n\n.ds-header__nav,\n.ds-header__actions {\n  display: flex;\n  align-items: center;\n  gap: var(--ds-unit);\n  min-width: 0;\n  margin: 0;\n  padding: 0;\n}\n\n.ds-header > .ds-header__nav {\n  grid-column: 2;\n  justify-content: center;\n  flex-wrap: wrap;\n  row-gap: 0;\n}\n\n.ds-header > .ds-header__actions {\n  grid-column: 3;\n  justify-self: end;\n  justify-content: flex-end;\n  gap: calc(var(--ds-unit) / 2);\n}\n\n/* A link in the navigation: the text's ink on a one-square line. */\n.ds-header__nav a {\n  display: block;\n  height: var(--ds-unit);\n  color: inherit;\n  text-decoration-line: underline;\n  text-decoration-thickness: 1px;\n  text-decoration-color: transparent;\n  text-underline-offset: calc(2px * var(--ds-sf));\n  white-space: nowrap;\n}\n\n.ds-header__nav a:hover {\n  text-decoration-color: color-mix(in srgb, currentColor 40%, transparent);\n}\n\n.ds-header__nav a[aria-current]:not([aria-current=\"false\"]) {\n  text-decoration-color: currentColor;\n}\n\n.ds-header__nav a:focus-visible,\n.ds-header__brand:focus-visible {\n  outline: 2px solid var(--ds-focus-ring);\n  outline-offset: 1px;\n}\n\n/* The menu button stands at the end of the row, and only on a narrow screen.\n   Two classes, so the button's own display and margin do not undo it. */\n.ds-header > .ds-header__toggle {\n  display: none;\n  grid-column: 3;\n  justify-self: end;\n  /* Centred in the last square of the row, where the close button stands too. */\n  margin-inline-end: calc((var(--ds-unit) - var(--ds-control-height)) / 2);\n}\n\n@container (max-width: 599px) {\n  .ds-header > :is(.ds-header__nav, .ds-header__actions) {\n    display: none;\n  }\n\n  .ds-header > .ds-header__toggle {\n    display: inline-flex;\n  }\n\n  .ds-header > .ds-header__brand {\n    min-width: 0;\n  }\n}\n\n/* In the drawer the navigation is a column of one-square links, and the\n   actions a row one square below it. */\n.ds-overlay--screen :is(.ds-header__nav, .ds-header__actions) {\n  flex: 0 0 auto;\n  flex-direction: column;\n  align-items: flex-start;\n  flex-wrap: nowrap;\n  gap: 0;\n  margin: 0;\n}\n\n.ds-overlay--screen .ds-header__actions {\n  flex-direction: row;\n  flex-wrap: wrap;\n  gap: calc(var(--ds-unit) / 2);\n}\n\n/* App title bar: two squares high, one square inset, regular title and a hairline. */\n.ds-header--app {\n  height: calc(2 * var(--ds-unit));\n  min-height: calc(2 * var(--ds-unit));\n  padding: 0 var(--ds-unit);\n  gap: var(--ds-unit);\n  background: var(--ds-header-paper, var(--background, Canvas));\n  box-shadow: inset 0 -1px var(--ds-header-line, var(--ds-border-color));\n}\n.ds-header--app .ds-header__brand {\n  min-width: 0;\n  font-family: \"Inter Arrows\", var(--ds-typeface-regular);\n  font-weight: var(--ds-type-weight-default);\n}\n/*\n * A site footer, as plain classes on native elements.\n *\n * The brand and its line at the start, twelve squares wide; the columns of\n * links beside it, eight squares each (or the whole squares a column names in\n * `--ds-footer-column-width`), two squares apart; then, two squares below, the\n * legal line at the start, the policies under it as secondary buttons, and the\n * preferences (language and theme, as `ds-cycle` or native buttons) at the\n * end. Every line is one square, the column headings in the title grey, the\n * links in the text's ink with a faint hairline under the pointer. A column of\n * contact lines mixes words alone (`<span>`) with links: its links, and a\n * heading that is a link, are underlined as `.ds-link` is. A stacked column\n * (`--stack`) draws its icon links as round marks one control high, one a\n * line, one square wide at the end of the row. A hairline runs along its top.\n * Columns that do not fit beside the brand go below it, and on a narrow screen\n * everything stands in one column. The `ds-footer` element draws the same\n * parts from data.\n *\n *   ds-footer                    the block, a <footer>\n *   ds-footer__brand             the mark and its line\n *   ds-footer__mark              the mark or name, a link home; a picture in it is one square high\n *   ds-footer__tagline           a line about the site, muted\n *   ds-footer__columns           the columns, a <nav> or <div>\n *   ds-footer__column            one column: a heading and its links\n *   ds-footer__column--stack     a column of round marks, one square wide at the row's end\n *   ds-footer__heading           the column's heading, one line in the title grey, or an <a> in it\n *   ds-footer__icons             a column's icon links, a row of marks (a stack in --stack)\n *   ds-footer__links             the lines, a <ul> with one <a> or <span> per <li>\n *   ds-footer__base              the last row, two squares below\n *   ds-footer__legal             in it, the copyright and legal line, muted\n *   ds-footer__policies          under it, links as secondary buttons (a.ds-button.ds-button--secondary)\n *   ds-footer__preferences       in it, the language and theme controls, at its end\n *\n * Tokens: `--ds-footer-line` (the hairline along the top),\n * `--ds-footer-column-width` (a column's width in squares, 8),\n * `--ds-footer-mark-background` and `--ds-footer-mark-color` (a round mark's\n * disc and glyph: the ink and the paper).\n */\n\n.ds-footer {\n  box-sizing: border-box;\n  container-type: inline-size;\n  display: flex;\n  flex-wrap: wrap;\n  align-items: flex-start;\n  gap: calc(2 * var(--ds-unit));\n  min-width: 0;\n  margin: 0;\n  padding: calc(2 * var(--ds-unit)) var(--ds-unit) var(--ds-unit);\n  box-shadow: inset 0 1px var(--ds-footer-line, var(--ds-border-color));\n  color: var(--ds-text-color);\n  font-family: \"Inter Arrows\", var(--ds-typeface-regular);\n  font-feature-settings: var(--ds-font-features);\n  font-size: var(--ds-type-size-default);\n  font-weight: var(--ds-type-weight-default);\n  line-height: var(--ds-unit);\n  letter-spacing: var(--ds-type-letterspacing-default);\n  text-transform: none;\n}\n\n.ds-footer :is(p, h2, h3, h4, ul) {\n  margin: 0;\n  font: inherit;\n  letter-spacing: inherit;\n}\n\n.ds-footer__brand {\n  display: flex;\n  flex: 0 0 calc(12 * var(--ds-unit));\n  flex-direction: column;\n  max-width: 100%;\n  min-width: 0;\n}\n\n.ds-footer__mark {\n  display: inline-flex;\n  align-items: center;\n  gap: calc(var(--ds-unit) / 2);\n  align-self: flex-start;\n  height: var(--ds-unit);\n  color: inherit;\n  font-family: \"Inter Arrows\", var(--ds-typeface-medium);\n  font-weight: var(--ds-type-weight-bold);\n  text-decoration: none;\n}\n\n.ds-footer__mark :is(img, svg) {\n  display: block;\n  width: auto;\n  height: var(--ds-unit);\n}\n\n.ds-footer__tagline,\n.ds-footer__legal {\n  color: var(--ds-text-color-muted);\n}\n\n.ds-footer__columns {\n  display: flex;\n  /* Never narrower than one column: below that the columns go under the brand. */\n  flex: 1 1 calc(8 * var(--ds-unit));\n  flex-wrap: wrap;\n  gap: var(--ds-unit) calc(2 * var(--ds-unit));\n  min-width: min(100%, calc(8 * var(--ds-unit)));\n}\n\n.ds-footer__column {\n  display: flex;\n  flex: 0 0 calc(var(--ds-footer-column-width, 8) * var(--ds-unit));\n  flex-direction: column;\n  max-width: 100%;\n  min-width: 0;\n}\n\n.ds-footer .ds-footer__heading {\n  color: var(--ds-title-color);\n}\n\n.ds-footer .ds-footer__links {\n  padding: 0;\n  list-style: none;\n}\n\n.ds-footer__links li {\n  margin: 0;\n  padding: 0;\n}\n\n.ds-footer__links > li > *,\n.ds-footer__heading > a {\n  display: inline-block;\n  max-width: 100%;\n  overflow: hidden;\n  color: inherit;\n  text-decoration-line: underline;\n  text-decoration-thickness: 1px;\n  text-decoration-color: transparent;\n  text-overflow: clip;\n  text-underline-offset: calc(2px * var(--ds-sf));\n  vertical-align: top;\n  white-space: nowrap;\n}\n\n/* A cut line fades over its last square, never an ellipsis (0-face/cut-fade.ts marks it). */\n:is(.ds-footer__links > li > *, .ds-footer__heading > a)[data-cut=\"end\"] {\n  mask-image: linear-gradient(to right, #000 calc(100% - var(--ds-unit)), transparent);\n}\n:is(.ds-footer__links > li > *, .ds-footer__heading > a)[data-cut=\"end\"]:dir(rtl) {\n  mask-image: linear-gradient(to left, #000 calc(100% - var(--ds-unit)), transparent);\n}\n\n.ds-footer__links a:hover {\n  text-decoration-color: color-mix(in srgb, currentColor 40%, transparent);\n}\n\n/* Among words alone (a contact column) a link, and a heading that is a link, is\n   underlined as .ds-link is: the text's ink, a hairline 40% of it, full under the pointer. */\n.ds-footer .ds-footer__heading > a,\n.ds-footer__links:has(> li > :not(a)) a {\n  color: var(--ds-text-color);\n  text-decoration-color: color-mix(in srgb, currentColor 40%, transparent);\n}\n\n:is(.ds-footer__heading > a, .ds-footer__links:has(> li > :not(a)) a):hover {\n  text-decoration-color: currentColor;\n}\n\n/* A column's icon links (a brand's marks: Instagram, Facebook, LinkedIn) stand first, in a row of\n   their own one square high, each mark a whole square, half a square apart, named by its label. */\n.ds-footer .ds-footer__icons {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 0 calc(var(--ds-unit) / 2);\n  margin: 0;\n  padding: 0;\n  list-style: none;\n}\n\n.ds-footer__icons li {\n  margin: 0;\n  padding: 0;\n}\n\n.ds-footer__icons a {\n  display: flex;\n  align-items: flex-end;\n  height: var(--ds-unit);\n  color: inherit;\n}\n\n.ds-footer__icons .ds-icon {\n  --ds-icon-size: 20px;\n}\n\n.ds-footer__icons a:hover {\n  color: var(--ds-text-color-muted);\n}\n\n/* A stacked column: its marks one a line at the end of the row, each a round\n   disc one control high in the ink on the sixteen of its square, the glyph in\n   the paper's colour, flush with the square's start. */\n.ds-footer .ds-footer__column--stack {\n  flex: 0 0 var(--ds-unit);\n  margin-inline-start: auto;\n}\n\n.ds-footer__column--stack .ds-footer__icons {\n  flex-direction: column;\n  flex-wrap: nowrap;\n}\n\n.ds-footer__column--stack .ds-footer__icons li {\n  display: flex;\n  align-items: flex-end;\n  height: var(--ds-unit);\n}\n\n.ds-footer__column--stack .ds-footer__icons a {\n  display: grid;\n  place-items: center;\n  width: var(--ds-control-height);\n  height: var(--ds-control-height);\n  border-radius: 50%;\n  corner-shape: round;\n  background: var(--ds-footer-mark-background, var(--ds-text-color));\n  color: var(--ds-footer-mark-color, light-dark(var(--ds-white), var(--ds-black)));\n}\n\n.ds-footer__column--stack .ds-footer__icons .ds-icon {\n  --ds-icon-size: 14px;\n}\n\n.ds-footer__column--stack .ds-footer__icons a:hover {\n  background: var(--ds-text-color-muted);\n  color: var(--ds-footer-mark-color, light-dark(var(--ds-white), var(--ds-black)));\n}\n\n.ds-footer__links a[aria-current]:not([aria-current=\"false\"]) {\n  text-decoration-color: currentColor;\n}\n\n:is(.ds-footer__links a, .ds-footer__heading a, .ds-footer__icons a, .ds-footer__mark):focus-visible {\n  outline: 2px solid var(--ds-focus-ring);\n  outline-offset: 1px;\n}\n\n/* The last row, two squares below: the legal line at the start, the\n   policies on the square under it, the preferences at the end; on a narrow\n   screen the preferences go first, a square above the legal line. */\n.ds-footer__base {\n  display: flex;\n  flex: 0 0 100%;\n  flex-wrap: wrap;\n  align-items: flex-start;\n  gap: 0 calc(2 * var(--ds-unit));\n  min-width: 0;\n}\n\n.ds-footer .ds-footer__policies {\n  display: flex;\n  flex: 0 0 100%;\n  flex-wrap: wrap;\n  order: 1;\n  gap: 0 calc(var(--ds-unit) / 2);\n  margin: 0;\n  padding: 0;\n  list-style: none;\n}\n\n.ds-footer__policies li {\n  display: flex;\n  align-items: flex-end;\n  height: var(--ds-unit);\n  margin: 0;\n  padding: 0;\n}\n\n.ds-footer__legal {\n  flex: 1 1 auto;\n  min-width: 0;\n}\n\n.ds-footer__preferences {\n  display: flex;\n  flex: 0 0 auto;\n  flex-wrap: wrap;\n  align-items: center;\n  gap: 0 calc(var(--ds-unit) / 2);\n  min-height: var(--ds-unit);\n  margin-inline-start: auto;\n}\n\n@container (max-width: 599px) {\n  .ds-footer__brand,\n  .ds-footer__columns {\n    flex-basis: 100%;\n  }\n\n  .ds-footer__base {\n    flex-direction: column;\n  }\n\n  .ds-footer__preferences {\n    order: -1;\n    margin-inline-start: 0;\n  }\n\n  .ds-footer__preferences:not([hidden]) {\n    margin-block-end: var(--ds-unit);\n  }\n\n  .ds-footer .ds-footer__policies {\n    flex-basis: auto;\n  }\n}\n\n/*\n * A document page: terms, a privacy policy, a legal notice, a help article.\n *\n * The contents stand at the start, twelve squares wide, and stay in view as\n * the writing scrolls past; the writing, two squares after them, is a reading\n * column of at most thirty-two squares, native headings and paragraphs marked\n * `data-ds-prose` (prose.css draws them). Where the two do not fit side by\n * side the contents stand above the writing. Every line is one square; the\n * contents' links are in the text's ink, the section in view (`aria-current`)\n * on a hairline of the full ink, a third level half a square in. The\n * `ds-document` element builds the contents from the headings and marks the\n * one in view.\n *\n *   ds-document                  the page's two columns\n *   ds-document__toc             the contents, a <nav>, as tall as the writing\n *   ds-document__contents        inside it, what stays in view: the title and the list\n *   ds-document__toc-title       \"Contents\", one line in the title grey\n *   ds-document__toc-list        the links, an <ol> with one link per <li>\n *   ds-document__toc-sub         an <li> for a third-level heading\n *   ds-document__body            the writing, marked data-ds-prose\n *\n * A definition table (`ds-definitions` on a <dl>) sets terms beside what they\n * mean, as a legal notice such as 特定商取引法に基づく表記 does: the term eight\n * squares wide in the muted ink, its definition beside it, each pair on a\n * hairline at its foot with half a square above and below, as a prose table's\n * rows are. Pairs may stand in a <div> each. Below twenty-four squares the\n * definition goes under its term. It works inside or outside prose.\n *\n * Tokens: `--ds-document-top` (where the contents stop below the top of the\n * view, one square; add a sticky header's height), `--ds-definitions-term`\n * (the term column, eight squares).\n */\n\n.ds-document {\n  box-sizing: border-box;\n  display: flex;\n  flex-wrap: wrap;\n  align-items: stretch;\n  gap: var(--ds-unit) calc(2 * var(--ds-unit));\n  min-width: 0;\n  color: var(--ds-text-color);\n  font-family: \"Inter Arrows\", var(--ds-typeface-regular);\n  font-feature-settings: var(--ds-font-features);\n  font-size: var(--ds-type-size-default);\n  font-weight: var(--ds-type-weight-default);\n  line-height: var(--ds-unit);\n  letter-spacing: var(--ds-type-letterspacing-default);\n}\n\n/* The contents column stretches to the writing's height when the two stand\n   side by side, so what is inside it can stay in view; standing above the\n   writing it is only as tall as itself, and nothing sticks. */\n.ds-document__toc {\n  flex: 0 0 calc(12 * var(--ds-unit));\n  max-width: 100%;\n  min-width: 0;\n}\n\n.ds-document__contents {\n  position: sticky;\n  top: var(--ds-document-top, var(--ds-unit));\n}\n\n.ds-document__toc-title {\n  margin: 0;\n  color: var(--ds-title-color);\n  font: inherit;\n  letter-spacing: inherit;\n}\n\n.ds-document__toc-list,\n.ds-document__toc-list ol {\n  margin: 0;\n  padding: 0;\n  list-style: none;\n}\n\n.ds-document__toc-list li {\n  margin: 0;\n  padding: 0;\n}\n\n.ds-document__toc-list .ds-document__toc-sub {\n  padding-inline-start: calc(var(--ds-unit) / 2);\n}\n\n.ds-document__toc-list a {\n  display: block;\n  overflow: hidden;\n  color: inherit;\n  text-decoration-line: underline;\n  text-decoration-thickness: 1px;\n  text-decoration-color: transparent;\n  text-overflow: clip;\n  text-underline-offset: calc(2px * var(--ds-sf));\n  white-space: nowrap;\n}\n\n/* A cut link fades over its last square, never an ellipsis (0-face/cut-fade.ts marks it). */\n.ds-document__toc-list a[data-cut=\"end\"] {\n  mask-image: linear-gradient(to right, #000 calc(100% - var(--ds-unit)), transparent);\n}\n.ds-document__toc-list a[data-cut=\"end\"]:dir(rtl) {\n  mask-image: linear-gradient(to left, #000 calc(100% - var(--ds-unit)), transparent);\n}\n\n.ds-document__toc-list a:hover {\n  text-decoration-color: color-mix(in srgb, currentColor 40%, transparent);\n}\n\n.ds-document__toc-list a[aria-current]:not([aria-current=\"false\"]) {\n  text-decoration-color: currentColor;\n}\n\n.ds-document__toc-list a:focus-visible {\n  outline: 2px solid var(--ds-focus-ring);\n  outline-offset: -1px;\n}\n\n/* The writing: at least twenty squares beside the contents, else below them. */\n.ds-document__body {\n  flex: 1 1 0;\n  min-width: min(100%, calc(20 * var(--ds-unit)));\n  max-width: calc(32 * var(--ds-unit));\n}\n\n/* A heading the contents jump to stops where the contents do. */\n.ds-document__body :is(h1, h2, h3, h4, h5, h6) {\n  scroll-margin-top: var(--ds-document-top, var(--ds-unit));\n}\n\n/* A definition table. */\n\n.ds-definitions {\n  box-sizing: border-box;\n  container-type: inline-size;\n  display: grid;\n  grid-template-columns: minmax(0, var(--ds-definitions-term, calc(8 * var(--ds-unit)))) minmax(0, 1fr);\n  margin: 0;\n  padding: 0;\n  color: var(--ds-text-color);\n  font-family: \"Inter Arrows\", var(--ds-typeface-regular);\n  font-size: var(--ds-type-size-default);\n  line-height: var(--ds-unit);\n  letter-spacing: var(--ds-type-letterspacing-default);\n}\n\n.ds-definitions > div {\n  display: contents;\n}\n\n.ds-definitions :is(dt, dd) {\n  box-sizing: border-box;\n  min-width: 0;\n  margin: 0;\n  padding-block: calc(var(--ds-unit) / 2);\n  box-shadow: inset 0 -1px var(--ds-border-color);\n  font: inherit;\n  letter-spacing: inherit;\n  line-height: var(--ds-unit);\n  overflow-wrap: anywhere;\n}\n\n.ds-definitions dt {\n  grid-column: 1;\n  padding-inline-end: calc(var(--ds-unit) / 2);\n  color: var(--ds-text-color-muted);\n}\n\n.ds-definitions dd {\n  grid-column: 2;\n}\n\n@container (max-width: 479px) {\n  .ds-definitions dt,\n  .ds-definitions dd {\n    grid-column: 1 / -1;\n  }\n\n  .ds-definitions dt {\n    padding-block-end: 0;\n    padding-inline-end: 0;\n    box-shadow: none;\n  }\n\n  .ds-definitions dd {\n    padding-block-start: 0;\n  }\n}\n\n/*\n * A bento, as plain classes on native elements: tiles of different sizes\n * standing half a square (10px) apart, each a card (`.ds-card`, or any box)\n * that holds one thing. The `ds-bento` element draws the same.\n *\n * Flow (the default): columns that share the width (`--ds-bento-columns`,\n * three), a tile one column wide or more (`data-span`, or\n * `--ds-bento-span`) and one row high or more (`data-rows`, or\n * `--ds-bento-rows`); a row is as high as its tallest tile, at least\n * `--ds-bento-row` (ten squares by default). Below thirty squares of width\n * the bento is one column.\n *\n * Squares (`data-squares`): the bento is exactly `--ds-bento-columns` squares wide\n * and every tile is placed on whole squares (`data-place=\"x y w h\"`,\n * counted from 0). Tiles are placed a square apart, and a tile's surface\n * reaches a quarter square towards each tile beside it, so they stand half a\n * square apart while what they hold stays on the squares, and the bento's\n * own edges stay on the page's. `placeBento()` (0-face/bento.ts) reads the\n * places and sets the reach; the element does it itself.\n *\n *   data-span=\"2\"          a tile two columns wide (to 6)\n *   data-rows=\"2\"          a tile two rows high (to 6)\n *   data-place=\"0 0 15 7\"  a tile's square, width and height in squares\n *\n * `data-fit` lets a squares bento's columns share a measure other than its\n * squares (each tile still reaches a quarter square, so the gap is a column\n * less half a square); `data-layout` (say `phone`) makes `placeBento()` take each tile's\n * `data-place-phone` where it has one, a place per layout.\n *\n * Tokens: `--ds-bento-unit` (the square, `--ds-unit` by default),\n * `--ds-bento-gap` (half of it), `--ds-bento-columns`, `--ds-bento-row`,\n * `--ds-bento-padding` (a squares tile that is not a card, one square), and\n * on a tile `--ds-bento-span`, `--ds-bento-rows`.\n */\n\n.ds-bento {\n  --ds-bento-unit: var(--ds-unit);\n  --ds-bento-gap: calc(var(--ds-bento-unit) / 2);\n  box-sizing: border-box;\n  display: grid;\n  grid-template-columns: repeat(var(--ds-bento-columns, 3), minmax(0, 1fr));\n  grid-auto-rows: minmax(var(--ds-bento-row, calc(10 * var(--ds-bento-unit))), auto);\n  grid-auto-flow: row dense;\n  gap: var(--ds-bento-gap);\n  margin: 0;\n  padding: 0;\n  list-style: none;\n}\n.ds-bento[hidden] { display: none; }\n\n.ds-bento > * {\n  --ds-card-width: auto;\n  --ds-card-height: auto;\n  box-sizing: border-box;\n  min-width: 0;\n  min-height: 0;\n  grid-column: span var(--ds-bento-span, 1);\n  grid-row: span var(--ds-bento-rows, 1);\n}\n.ds-bento > [data-span=\"2\"] { --ds-bento-span: 2; }\n.ds-bento > [data-span=\"3\"] { --ds-bento-span: 3; }\n.ds-bento > [data-span=\"4\"] { --ds-bento-span: 4; }\n.ds-bento > [data-span=\"5\"] { --ds-bento-span: 5; }\n.ds-bento > [data-span=\"6\"] { --ds-bento-span: 6; }\n.ds-bento > [data-rows=\"2\"] { --ds-bento-rows: 2; }\n.ds-bento > [data-rows=\"3\"] { --ds-bento-rows: 3; }\n.ds-bento > [data-rows=\"4\"] { --ds-bento-rows: 4; }\n.ds-bento > [data-rows=\"5\"] { --ds-bento-rows: 5; }\n.ds-bento > [data-rows=\"6\"] { --ds-bento-rows: 6; }\n\n@media (max-width: 600px) {\n  .ds-bento:not([data-squares]) { grid-template-columns: minmax(0, 1fr); }\n  .ds-bento:not([data-squares]) > * { grid-column: auto; }\n}\n\n/* Squares: every tile on whole squares, a square apart, its surface a quarter square nearer each neighbour. */\n.ds-bento[data-squares] {\n  --ds-bento-reach: calc(var(--ds-bento-unit) / 4);\n  /* Exactly its squares wide: each column one square. */\n  width: calc(var(--ds-bento-columns, 48) * var(--ds-bento-unit));\n  max-width: none;\n  grid-template-columns: repeat(var(--ds-bento-columns, 48), var(--ds-bento-unit));\n  grid-auto-rows: var(--ds-bento-unit);\n  grid-auto-flow: row;\n  gap: 0;\n}\n/* Fit: the columns share a measure narrower (or wider) than the squares, the rows still one square. */\n.ds-bento[data-squares][data-fit] {\n  width: auto;\n  grid-template-columns: repeat(var(--ds-bento-columns, 48), minmax(0, 1fr));\n}\n.ds-bento[data-squares] > * {\n  --ds-bento-inset-top: calc(var(--ds-bento-reach) * var(--ds-bento-top, 0));\n  --ds-bento-inset-end: calc(var(--ds-bento-reach) * var(--ds-bento-end, 0));\n  --ds-bento-inset-bottom: calc(var(--ds-bento-reach) * var(--ds-bento-bottom, 0));\n  --ds-bento-inset-start: calc(var(--ds-bento-reach) * var(--ds-bento-start, 0));\n  grid-column: calc(var(--ds-bento-x, 0) + 1) / span var(--ds-bento-w, 4);\n  grid-row: calc(var(--ds-bento-y, 0) + 1) / span var(--ds-bento-h, 4);\n  margin: calc(-1 * var(--ds-bento-inset-top)) calc(-1 * var(--ds-bento-inset-end)) calc(-1 * var(--ds-bento-inset-bottom)) calc(-1 * var(--ds-bento-inset-start));\n}\n/* A card grows its own padding by the reach (card.css); any other tile is padded here, a square inside. */\n.ds-bento[data-squares] > :not(.ds-card, ds-card) {\n  padding:\n    calc(var(--ds-bento-padding, var(--ds-bento-unit)) + var(--ds-bento-inset-top))\n    calc(var(--ds-bento-padding, var(--ds-bento-unit)) + var(--ds-bento-inset-end))\n    calc(var(--ds-bento-padding, var(--ds-bento-unit)) + var(--ds-bento-inset-bottom))\n    calc(var(--ds-bento-padding, var(--ds-bento-unit)) + var(--ds-bento-inset-start));\n}\n/*\n * A carousel, as plain classes on native elements.\n *\n * A carousel is a row of slides that snaps sideways, one slide to a stop,\n * with a row of controls one square high under it: optional previous and\n * next buttons and a dot for each slide. Slides are the track's width, or\n * whole squares wide, a whole number of squares apart (one by default). The\n * controls stand one square below the track, on the grid from its start.\n * The `ds-carousel` element draws the same parts, and\n * `0-face/carousel.ts` gives the native markup its behaviour.\n *\n *   ds-carousel                    the region: track, controls, status;\n *                                  `data-slides=\"auto\"` for slides of their\n *                                  own width, `data-bleed` `end` or `both`,\n *                                  `data-snap=\"none\"` to slide freely\n *   ds-carousel__track             the scroller; every child is a slide\n *   ds-carousel__controls          the row of buttons and dots\n *   ds-carousel__previous, __next, icon buttons, on `.ds-button.ds-button--icon`\n *   __pause\n *   ds-carousel__status            the polite announcement, kept out of sight\n *\n *   The dots are `ds-progress--dots` from progress.css.\n *\n * A strip of slides of their own width can run on past its box to the\n * window's end edge, or to both edges, while its first slide keeps to the\n * box's start, so it lines up with the page's column; `--ds-carousel-before`\n * and `--ds-carousel-after` are the room to the edges, which the script\n * measures.\n *\n * Tokens: `--ds-carousel-slide` (a slide's width, the track's by default)\n * and `--ds-carousel-gap` (between slides, one square by default).\n */\n\n.ds-carousel {\n  box-sizing: border-box;\n  display: grid;\n  grid-template-columns: minmax(0, 1fr);\n  row-gap: var(--ds-unit);\n  position: relative;\n  min-width: 0;\n  margin: 0;\n}\n\n.ds-carousel__track {\n  box-sizing: border-box;\n  display: grid;\n  grid-auto-flow: column;\n  grid-auto-columns: var(--ds-carousel-slide, 100%);\n  column-gap: var(--ds-carousel-gap, var(--ds-unit));\n  min-width: 0;\n  margin: 0;\n  padding: 0;\n  list-style: none;\n  overflow-x: auto;\n  overflow-y: hidden;\n  overscroll-behavior-x: contain;\n  scroll-snap-type: x mandatory;\n  scrollbar-width: none;\n}\n\n.ds-carousel__track::-webkit-scrollbar {\n  display: none;\n}\n\n/* A mouse dragging the strip (0-face/carousel.ts dragTrack): no snapping until it lets go, and no words selected on the way. */\n.ds-carousel__track[data-dragging] {\n  scroll-snap-type: none;\n  cursor: grabbing;\n  user-select: none;\n}\n\n/* Slides of their own width, several in view. */\n.ds-carousel[data-slides=\"auto\"] > .ds-carousel__track {\n  grid-auto-columns: max-content;\n}\n\n.ds-carousel[data-snap=\"none\"] > .ds-carousel__track {\n  scroll-snap-type: none;\n}\n\n/* To the window's end edge: the track reaches out over the room after the\n   box and keeps a gap at its end, so the last slide stops short of the edge. */\n.ds-carousel[data-bleed=\"end\"] > .ds-carousel__track {\n  margin-inline-end: calc(-1 * var(--ds-carousel-after, 0px));\n  padding-inline-end: var(--ds-carousel-gap, var(--ds-unit));\n}\n\n/* To both edges: the track reaches out both ways, and the first slide, and\n   each one it stops at, still stands on the box's start. */\n.ds-carousel[data-bleed=\"both\"] > .ds-carousel__track {\n  margin-inline: calc(-1 * var(--ds-carousel-before, 0px)) calc(-1 * var(--ds-carousel-after, 0px));\n  padding-inline: var(--ds-carousel-before, 0px) var(--ds-carousel-gap, var(--ds-unit));\n  scroll-padding-inline-start: var(--ds-carousel-before, 0px);\n}\n\n.ds-carousel__track:focus-visible {\n  outline: 2px solid var(--ds-focus-ring);\n  outline-offset: 1px;\n}\n\n.ds-carousel__track > * {\n  box-sizing: border-box;\n  min-width: 0;\n  margin: 0;\n  scroll-snap-align: start;\n}\n\n/* One slide to a stop; a strip of several in view may pass a few. */\n.ds-carousel:not([data-slides=\"auto\"]) > .ds-carousel__track > * {\n  scroll-snap-stop: always;\n}\n\n.ds-carousel__controls {\n  display: flex;\n  align-items: center;\n  height: var(--ds-row-height);\n  min-width: 0;\n}\n\n/* The buttons take a one-square cell each, as the dots do. Two classes, so\n   the button's own reset of its margin does not undo it. */\n.ds-carousel .ds-carousel__previous,\n.ds-carousel .ds-carousel__next,\n.ds-carousel .ds-carousel__pause {\n  flex: none;\n  margin: calc((var(--ds-unit) - var(--ds-control-height)) / 2);\n}\n\n/* Previous points back along the reading direction. */\n.ds-carousel:dir(rtl) :is(.ds-carousel__previous, .ds-carousel__next) > * {\n  transform: scaleX(-1);\n}\n\n.ds-carousel__status {\n  position: absolute;\n  width: 1px;\n  height: 1px;\n  overflow: hidden;\n  clip-path: inset(50%);\n  white-space: nowrap;\n}\n\n/*\n * A card, as plain classes on native elements.\n *\n * A card holds one thing on a fill of its own: its name in the muted ink on\n * one square, a title in the display size on lines of a square and a half, writing,\n * and a picture of it (`ds-card__media`) a square below, which can run off\n * the card's foot and end edge and be cut there, never framed. Its size is\n * given in whole squares, its padding one square, its corners a card's\n * (`--ds-radius-card`). A card that opens something is one press target, an\n * `<a class=\"ds-card\" href>`: the pointer tints it, keyboard focus rings it\n * 2px inside and its picture rises a little. Ordinary writing still sits\n * straight on the paper; a card is for a thing shown among others, as in a\n * slide. The `ds-card` element draws the same parts.\n *\n *   ds-card                      the card; `data-tone` names a palette colour\n *                                for its fill (the colour's pastel, dim in dark\n *                                mode, from palette.css, which one.css imports),\n *                                `ink` for the ink with the paper's words\n *   ds-card--outlined            a 1px line and no fill\n *   ds-card__label               its name, muted, on one square\n *   ds-card__title               the title, display size, a square and a half a line\n *   ds-card__body                writing, one square a line\n *   ds-card__media               the picture, on the card's foot and a square below the words at\n *                                least, so pictures side by side line up; square where it meets the card\n *   ds-card__media--center       standing in the card's middle\n *   ds-card__media--bleed        running on past the padding to the end edge\n *\n * Tokens: `--ds-card-width` and `--ds-card-height` (whole squares; the\n * content's size by default), `--ds-card-padding` (one square), and\n * `--ds-card-fill`, `--ds-card-ink` and `--ds-card-muted`.\n */\n\n.ds-card {\n  --ds-card-fill: var(--ds-fill);\n  --ds-card-ink: var(--ds-text-color);\n  --ds-card-muted: var(--ds-text-color-muted);\n  --ds-card-padding: var(--ds-unit);\n  --ds-card-text-padding: max(var(--ds-card-padding), var(--ds-card-text-inset-min, 0px));\n  position: relative;\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: column;\n  align-items: stretch;\n  width: var(--ds-card-width, auto);\n  height: var(--ds-card-height, auto);\n  min-width: 0;\n  margin: 0;\n  /* In a squares bento the surface reaches a quarter square towards its neighbours (`--ds-bento-inset-*`, 0 elsewhere), and the padding grows by as much so what it holds stays on the squares. */\n  padding:\n    calc(var(--ds-card-text-padding) + var(--ds-bento-inset-top, 0px))\n    calc(var(--ds-card-text-padding) + var(--ds-bento-inset-end, 0px))\n    var(--ds-bento-inset-bottom, 0px)\n    calc(var(--ds-card-text-padding) + var(--ds-bento-inset-start, 0px));\n  overflow: hidden;\n  border-radius: var(--ds-radius-card);\n  background: var(--ds-card-fill);\n  color: var(--ds-card-ink);\n  font-family: \"Inter Arrows\", var(--ds-typeface-regular);\n  font-size: var(--ds-type-size-default);\n  text-decoration: none;\n  -webkit-tap-highlight-color: transparent;\n}\n\n/* Opt-in safe text inset; media still stands on the card's foot. */\n.ds-card:not(:has(> .ds-card__media:not([hidden]))) {\n  padding-block-end: max(var(--ds-card-text-inset-min, 0px), var(--ds-bento-inset-bottom, 0px));\n}\n\n.ds-card[hidden] {\n  display: none;\n}\n\n.ds-card--outlined {\n  --ds-card-fill: transparent;\n  box-shadow: inset 0 0 0 1px var(--ds-border-color);\n}\n\n.ds-card[data-tone=\"apple-green\"] { --ds-card-fill: var(--one-apple-green-pastel); }\n.ds-card[data-tone=\"chartreuse\"] { --ds-card-fill: var(--one-chartreuse-pastel); }\n.ds-card[data-tone=\"every-green\"] { --ds-card-fill: var(--one-every-green-pastel); }\n.ds-card[data-tone=\"yellow\"] { --ds-card-fill: var(--one-yellow-pastel); }\n.ds-card[data-tone=\"orange\"] { --ds-card-fill: var(--one-orange-pastel); }\n.ds-card[data-tone=\"tuned-red\"] { --ds-card-fill: var(--one-tuned-red-pastel); }\n.ds-card[data-tone=\"pink\"] { --ds-card-fill: var(--one-pink-pastel); }\n.ds-card[data-tone=\"sharp-blue\"] { --ds-card-fill: var(--one-sharp-blue-pastel); }\n.ds-card[data-tone=\"winning-blue\"] { --ds-card-fill: var(--one-winning-blue-pastel); }\n.ds-card[data-tone=\"hysteric-blue\"] { --ds-card-fill: var(--one-hysteric-blue-pastel); }\n.ds-card[data-tone=\"purple\"] { --ds-card-fill: var(--one-purple-pastel); }\n.ds-card[data-tone=\"metal-green\"] { --ds-card-fill: var(--one-metal-green-pastel); }\n.ds-card[data-tone=\"drip-yellow\"] { --ds-card-fill: var(--one-drip-yellow-pastel); }\n.ds-card[data-tone=\"sand\"] { --ds-card-fill: var(--one-sand-pastel); }\n.ds-card[data-tone=\"old-gold\"] { --ds-card-fill: var(--one-old-gold-pastel); }\n.ds-card[data-tone=\"red-for-blood\"] { --ds-card-fill: var(--one-red-for-blood-pastel); }\n.ds-card[data-tone=\"dark-red-variant\"] { --ds-card-fill: var(--one-dark-red-variant-pastel); }\n.ds-card[data-tone=\"signal-red\"] { --ds-card-fill: var(--one-signal-red-pastel); }\n/* On a pastel fill the muted grey falls under 4.5:1 (color.text-contrast): the muted ink is the card's ink let\n   into its fill instead, 5:1 or more on every pastel. */\n.ds-card[data-tone]:not([data-tone=\"ink\"]) {\n  --ds-card-muted: color-mix(in srgb, var(--ds-card-ink) 72%, var(--ds-card-fill));\n}\n\n.ds-card[data-tone=\"ink\"] {\n  --ds-card-fill: var(--ds-black);\n  --ds-card-ink: var(--ds-white);\n  --ds-card-muted: color-mix(in srgb, var(--ds-white) 60%, transparent);\n  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ds-white) 8%, transparent);\n}\n\n/* Words: each line on the lower sixteen of its square. They keep their room\n   in a card of a set height; only the picture is cut at the foot. */\n.ds-card__label,\n.ds-card__title,\n.ds-card__body {\n  flex: none;\n}\n\n.ds-card__label {\n  margin: 0 0 var(--ds-card-label-gap, 0px);\n  padding-top: calc(4px * var(--ds-sf, 1));\n  color: var(--ds-card-muted);\n  font: inherit;\n  line-height: var(--ds-type-lineheight-default, calc(16px * var(--ds-sf, 1)));\n}\n\n.ds-card__title {\n  margin: 0 0 var(--ds-card-title-gap, 0px);\n  color: var(--ds-card-ink);\n  font-family: \"Inter Arrows\", var(--ds-typeface-medium);\n  font-size: var(--ds-type-size-display);\n  font-weight: var(--ds-type-weight-bold);\n  /* A title that wraps keeps its lines together: a square and a half each. */\n  line-height: calc(1.5 * var(--ds-unit));\n  letter-spacing: calc(var(--ds-display-text-tracking, -0.4px) * var(--ds-sf, 1));\n  text-wrap: balance;\n}\n\n.ds-card__body {\n  margin: 0;\n  line-height: var(--ds-unit);\n}\n\n/* The picture stands on the card's foot, a square below the words at least: in a card taller than\n   its words the room goes above the picture, so the pictures of cards side by side (stretched to one\n   height by their row) stand on one level. */\n.ds-card__media {\n  display: flex;\n  flex: none;\n  align-items: flex-start;\n  justify-content: flex-start;\n  min-width: 0;\n  margin-top: auto;\n  padding-top: var(--ds-unit);\n}\n\n/* A picture has no corners of its own where it meets the card: on the foot the card's edge cuts it\n   square. Only a corner standing free inside the card, towards the words, keeps a picture's corner. */\n.ds-card .ds-card__media > :is(img, picture, video, canvas, svg) {\n  border-end-start-radius: 0;\n  border-end-end-radius: 0;\n}\n\n.ds-card__media--center {\n  justify-content: center;\n  margin-inline: calc(-1 * var(--ds-card-text-padding));\n}\n\n/* A picture that bleeds runs on to the end edge and stands on the foot, the space a taller card\n   leaves going above it (or, taller than its room, it starts below the words and the foot cuts it).\n   It has no corners of its own: the card's edges cut it square, and its corner towards the words\n   is square too, a picture or square never rounded where it meets the card. */\n.ds-card__media--bleed {\n  flex: 1 0 auto;\n  flex-direction: column;\n  align-items: stretch;\n  justify-content: safe flex-end;\n  margin-inline-end: calc(-1 * (var(--ds-card-text-padding) + var(--ds-bento-inset-end, 0px)));\n  margin-block-end: calc(-1 * var(--ds-bento-inset-bottom, 0px));\n  --ds-radius: 0px;\n  --ds-image-end-radius: 0px;\n  --ds-image-foot-radius: 0px;\n}\n\n.ds-card__media > * {\n  flex: none;\n}\n\n/* A card that opens something. */\na.ds-card,\n.ds-card[data-interactive] {\n  cursor: pointer;\n}\n\na.ds-card::after,\n.ds-card[data-interactive]::after {\n  content: \"\";\n  position: absolute;\n  inset: 0;\n  border-radius: inherit;\n  background: transparent;\n  pointer-events: none;\n}\n\na.ds-card:focus-visible,\n.ds-card[data-interactive]:focus-visible {\n  outline: 2px solid var(--ds-focus-ring);\n  outline-offset: -2px;\n}\n\n@media (hover: hover) {\n  a.ds-card:hover::after,\n  .ds-card[data-interactive]:hover::after {\n    background: color-mix(in srgb, var(--ds-card-ink) 4%, transparent);\n  }\n}\n\na.ds-card:active::after,\n.ds-card[data-interactive]:active::after {\n  background: color-mix(in srgb, var(--ds-card-ink) 8%, transparent);\n}\n\n/* Optional spacing before a slotted footer tag; zero preserves the normal card. */\n.ds-card__body ::slotted(ds-tag) { margin-block-start: var(--ds-card-footer-gap, 0px); }\n/*\n * Figures, as plain classes on native elements: a stat and a group of stats.\n * The `ds-stat` element draws the same parts; controls.css imports this\n * file. A value against its range, steps and page dots are `progress.css`.\n *\n * Everything sits on the paper with no box, every line is one square and\n * widths come in whole squares. Colour is kept for a state: the danger colour\n * for a figure that is over.\n *\n * A stat: a label, a figure and a line for its change or caption.\n *\n *   ds-stat                  the block, as wide as its column\n *   ds-stat__label           one line, muted; an icon may lead it on its own square\n *   ds-stat__icon            the square an icon from the library stands on\n *   ds-stat__figure          the figure in tabular numerals, 20 on two squares\n *   ds-stat__digit           one digit in a cell of one width, for a face without tabular numerals\n *   ds-stat__caption         one line, muted, under the figure\n *   ds-stat__change          the change at the start of the caption, in the text colour;\n *                            --danger or --warning where the page knows which way is bad\n *   ds-stat--danger, --warning    the figure in that colour\n *   ds-stats                 a group of stats on whole squares: columns eight\n *                            squares wide, one square between them and between rows\n *   ds-stats[data-frame]     the group in a rounded 1px frame with a 1px line\n *                            between stats, as a framed table: the columns share\n *                            the width, each stat's words 4px in from its lines\n *                            as a framed table's, and a square at its foot, so\n *                            the frame stays whole squares high\n *\n * Tokens: `--ds-stat-size` (the figure's type size before the scale, 20px)\n * and `--ds-stat-lines` (the squares its line takes, 2), `--ds-stat-typeface`\n * (the medium face), `--ds-stat-digit` (a digit cell's width, 1ch),\n * `--ds-stat-change-color`, and `--ds-stats-width` (a column's width in\n * squares, 8).\n *\n */\n\n/* ---- Stat ------------------------------------------------------------ */\n\n.ds-stat {\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n  min-width: 0;\n  margin: 0;\n  color: var(--ds-text-color);\n  font-family: \"Inter Arrows\", var(--ds-typeface-regular);\n  font-feature-settings: var(--ds-font-features);\n  font-size: var(--ds-type-size-default);\n  font-weight: var(--ds-type-weight-default);\n  line-height: var(--ds-unit);\n  letter-spacing: var(--ds-type-letterspacing-default);\n  text-transform: none;\n}\n\n.ds-stat__label,\n.ds-stat__figure,\n.ds-stat__caption {\n  box-sizing: border-box;\n  max-width: 100%;\n  margin: 0;\n  font: inherit;\n  letter-spacing: inherit;\n}\n\n/* Optional spacing between distinct text groups, independent of line height. */\n.ds-stat__label { margin-block-end: var(--ds-stat-label-gap, 0px); }\n.ds-stat__figure { margin-block-end: var(--ds-stat-figure-gap, 0px); }\n\n.ds-stat__label,\n.ds-stat__caption {\n  display: flex;\n  align-items: flex-start;\n  min-height: var(--ds-unit);\n  color: var(--ds-text-color-muted);\n  overflow-wrap: var(--ds-stat-text-overflow-wrap, anywhere);\n}\n\n.ds-stat__icon {\n  display: inline-flex;\n  flex: none;\n  align-items: center;\n  justify-content: center;\n  width: var(--ds-unit);\n  height: var(--ds-unit);\n}\n\n.ds-stat__figure {\n  display: block;\n  overflow: hidden;\n  font-family: \"Inter Arrows\", var(--ds-stat-typeface, var(--ds-typeface-medium));\n  font-size: calc(var(--ds-stat-size, var(--ds-display-text-size, 20px)) * var(--ds-sf, 1));\n  font-weight: var(--ds-type-weight-bold);\n  font-variant-numeric: tabular-nums;\n  line-height: calc(var(--ds-stat-lines, 2) * var(--ds-unit));\n  min-height: calc(var(--ds-stat-lines, 2) * var(--ds-unit));\n  letter-spacing: calc(var(--ds-display-text-tracking, -0.4px) * var(--ds-sf, 1));\n  white-space: var(--ds-stat-figure-white-space, nowrap);\n  overflow-wrap: var(--ds-stat-figure-overflow-wrap, normal);\n  text-overflow: clip;\n}\n\n/* A figure too wide for its column fades over its last square, never an ellipsis (0-face/cut-fade.ts marks it). */\n.ds-stat__figure[data-cut=\"end\"] {\n  mask-image: linear-gradient(to right, #000 calc(100% - var(--ds-unit)), transparent);\n}\n.ds-stat__figure[data-cut=\"end\"]:dir(rtl) {\n  mask-image: linear-gradient(to left, #000 calc(100% - var(--ds-unit)), transparent);\n}\n\n.ds-stat__digit {\n  display: inline-block;\n  width: var(--ds-stat-digit, 1ch);\n  text-align: center;\n}\n\n.ds-stat--danger .ds-stat__figure {\n  color: var(--ds-danger-color);\n}\n\n.ds-stat--warning .ds-stat__figure {\n  color: var(--ds-warning-color);\n}\n\n.ds-stat__change {\n  display: inline-flex;\n  flex: none;\n  align-items: center;\n  height: var(--ds-unit);\n  margin-inline-end: calc(4px * var(--ds-sf, 1));\n  color: var(--ds-stat-change-color, var(--ds-text-color));\n  font-variant-numeric: tabular-nums;\n  white-space: nowrap;\n}\n\n.ds-stat__change--danger {\n  --ds-stat-change-color: var(--ds-danger-color);\n}\n\n.ds-stat__change--warning {\n  --ds-stat-change-color: var(--ds-warning-color);\n}\n\n.ds-stats {\n  box-sizing: border-box;\n  display: grid;\n  grid-template-columns: repeat(auto-fill, min(100%, calc(var(--ds-stats-width, 8) * var(--ds-unit))));\n  gap: var(--ds-unit);\n  margin: 0;\n  padding: 0;\n  list-style: none;\n}\n\n.ds-stats[data-frame] {\n  --ds-stats-radius: var(--ds-radius-card, calc(4px * var(--ds-sf, 1)));\n  grid-template-columns: repeat(auto-fit, minmax(min(100%, calc(var(--ds-stats-width, 8) * var(--ds-unit))), 1fr));\n  position: relative;\n  gap: 0;\n  border-radius: var(--ds-stats-radius);\n}\n/* The frame is drawn over the stats, as a framed table's is over its cells. */\n.ds-stats[data-frame]::after {\n  position: absolute;\n  inset: 0;\n  z-index: 1;\n  box-sizing: border-box;\n  border: 1px solid var(--ds-border-color, light-dark(#d8d8d8, #3d3d3d));\n  border-radius: var(--ds-stats-radius);\n  content: \"\";\n  pointer-events: none;\n}\n.ds-stats[data-frame] > * {\n  min-width: 0;\n  padding: 0 calc(4px * var(--ds-sf, 1)) var(--ds-unit);\n}\n.ds-stats[data-frame] > * + * {\n  box-shadow: inset 1px 0 0 var(--ds-border-color, light-dark(#d8d8d8, #3d3d3d));\n}\n.ds-stats[data-frame]:dir(rtl) > * + * {\n  box-shadow: inset -1px 0 0 var(--ds-border-color, light-dark(#d8d8d8, #3d3d3d));\n}\n\n.ds-stats > li {\n  min-width: 0;\n  margin: 0;\n}\n\n/*\n * Progress, as plain classes on native elements: a value against its range,\n * a sequence of steps, or a dot for each page. The `ds-progress` element\n * draws the same parts; controls.css imports this file.\n *\n * Everything sits on the paper with no box, every line is one square and\n * widths come in whole squares. Colour is kept for a state: the danger colour\n * for a value that is over or a step that failed, the ink for the current\n * step and the current dot.\n *\n * A value against its range, one square high (HTML's <progress>):\n *\n *   ds-progress              the row; role=\"meter\" with aria-valuenow, -min, -max and -valuetext\n *   ds-progress__fill        the bar, half a square high, drawn to --ds-progress-value (0 to 1)\n *   ds-progress--squares     the range in squares instead, each one square\n *   ds-progress__square      one square of the range; --on when it is filled\n *   ds-progress--over        past the end: filled whole in the danger colour\n *\n * Tokens: `--ds-progress-value`, `--ds-progress-color` (the ink by default)\n * and `--ds-progress-track` (the grey fill).\n *\n * A sequence of steps, one square high, each step on whole squares:\n *\n *   ds-progress--steps       with ds-progress, on an <ol>; the steps on one row, joined by a line\n *   ds-progress--vertical    one step to a row, each with room for its body under it\n *   ds-progress__step        an <li>; aria-current=\"step\" on the current one\n *   ds-progress__step--done, --current, --failed    states; upcoming without one\n *   ds-progress__link        a step that goes somewhere: an <a href> around its mark and label\n *   ds-progress__mark        the number (or the done or failed icon), one control high\n *   ds-progress__label       the step's name on one line\n *   ds-progress__state       the state in words for assistive technology, hidden (\"Done\")\n *   ds-progress__body        what belongs under a step in a vertical sequence\n *\n * A dot for each page, one square each:\n *\n *   ds-progress--dots        with ds-progress, a group of dots (role=\"group\")\n *   ds-progress__dot         a button; `data-state` is `past`, `current` (with\n *                            `aria-current=\"true\"`), `next`, `future`, or `end` for a\n *                            last dot marked as an end\n *\n * Tokens: the dot colours `--ds-progress-dot-past` and `-future` (the muted\n * text colour by default), `-current`, `-next` and `-end` (the text colour),\n * set on the dots or any element around them. Past, current and next dots are\n * filled; future dots and the end marker are rings.\n */\n\n/* ---- A value against its range: the bar, or the range in squares ---- */\n\n.ds-progress {\n  box-sizing: border-box;\n  position: relative;\n  display: block;\n  width: 100%;\n  height: var(--ds-unit);\n  margin: 0;\n}\n\n/* The range and its bar are a band half a square high across the middle of\n   the row, as a chart's ratio is drawn. */\n.ds-progress:not(.ds-progress--squares, .ds-progress--steps, .ds-progress--dots)::before,\n.ds-progress__fill {\n  position: absolute;\n  inset-inline: 0;\n  top: calc(var(--ds-unit) / 4);\n  height: calc(var(--ds-unit) / 2);\n}\n\n.ds-progress:not(.ds-progress--squares, .ds-progress--steps, .ds-progress--dots)::before {\n  content: \"\";\n  background: var(--ds-progress-track, var(--ds-fill));\n}\n\n.ds-progress__fill {\n  display: block;\n  background: var(--ds-progress-color, var(--ds-text-color));\n  transform: scaleX(var(--ds-progress-value, 0));\n  transform-origin: left center;\n  transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);\n}\n\n.ds-progress__fill:dir(rtl) {\n  transform-origin: right center;\n}\n\n.ds-progress--over .ds-progress__fill {\n  background: var(--ds-danger-color);\n  transform: none;\n}\n\n.ds-progress--squares {\n  display: flex;\n  width: max-content;\n  max-width: 100%;\n  overflow: hidden;\n}\n\n.ds-progress__square {\n  flex: none;\n  width: calc(var(--ds-unit) - 1px);\n  height: calc(var(--ds-unit) - 1px);\n  margin-inline-end: 1px;\n  background: var(--ds-progress-track, var(--ds-fill));\n}\n\n.ds-progress__square--on {\n  background: var(--ds-progress-color, var(--ds-text-color));\n}\n\n.ds-progress--over .ds-progress__square {\n  background: var(--ds-danger-color);\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .ds-progress__fill {\n    transition: none;\n  }\n}\n\n/* ---- A sequence of steps --------------------------------------------- */\n\n.ds-progress--steps {\n  box-sizing: border-box;\n  position: static;\n  display: flex;\n  width: auto;\n  height: auto;\n  flex-wrap: wrap;\n  align-items: flex-start;\n  min-width: 0;\n  margin: 0;\n  padding: 0;\n  list-style: none;\n  color: var(--ds-text-color);\n  font-family: \"Inter Arrows\", var(--ds-typeface-regular);\n  font-feature-settings: var(--ds-font-features);\n  font-size: var(--ds-type-size-default);\n  font-weight: var(--ds-type-weight-default);\n  line-height: var(--ds-unit);\n  letter-spacing: var(--ds-type-letterspacing-default);\n  text-transform: none;\n}\n\n/* Each step rounds its width up to whole squares where the browser can size\n   to content in calc; elsewhere it hugs its words. */\n.ds-progress__step {\n  --ds-progress-mark: transparent;\n  --ds-progress-mark-ink: var(--ds-text-color-muted);\n  --ds-progress-mark-line: var(--ds-border-color);\n  box-sizing: border-box;\n  position: relative;\n  display: flex;\n  align-items: flex-start;\n  min-width: 0;\n  max-width: 100%;\n  width: max-content;\n  width: calc-size(max-content, round(up, size, var(--ds-unit)));\n  min-height: var(--ds-unit);\n  margin: 0;\n  color: var(--ds-text-color-muted);\n}\n\n/* A line joins a step to the next: at least one square, across whatever the\n   step's rounding leaves, a quarter of a square short of each end. */\n.ds-progress__step:not(:last-child)::after {\n  content: \"\";\n  flex: 1 0 var(--ds-unit);\n  height: var(--ds-unit);\n  background: linear-gradient(var(--ds-border-color), var(--ds-border-color)) center / calc(100% - var(--ds-unit) / 2) 1px no-repeat;\n}\n\n.ds-progress__step--done {\n  --ds-progress-mark: var(--ds-fill);\n  --ds-progress-mark-ink: var(--ds-text-color);\n  --ds-progress-mark-line: transparent;\n  color: var(--ds-text-color);\n}\n\n.ds-progress__step--current {\n  --ds-progress-mark: var(--ds-text-color);\n  --ds-progress-mark-ink: var(--ds-paper);\n  --ds-progress-mark-line: transparent;\n  color: var(--ds-text-color);\n}\n\n.ds-progress__step--failed {\n  --ds-progress-mark: var(--ds-danger-color);\n  --ds-progress-mark-ink: light-dark(var(--ds-white), var(--ds-black));\n  --ds-progress-mark-line: transparent;\n  color: var(--ds-danger-color);\n}\n\n.ds-progress__link {\n  display: flex;\n  align-items: flex-start;\n  min-width: 0;\n  color: inherit;\n  text-decoration: none;\n  border-radius: var(--ds-radius);\n}\n\n.ds-progress__link:hover .ds-progress__label {\n  text-decoration: underline;\n  text-decoration-thickness: 1px;\n  text-underline-offset: calc(3px * var(--ds-sf, 1));\n}\n\n.ds-progress__link:focus-visible {\n  outline: 2px solid var(--ds-focus-ring);\n  outline-offset: -2px;\n}\n\n.ds-progress__mark {\n  box-sizing: border-box;\n  display: flex;\n  flex: none;\n  align-items: center;\n  justify-content: center;\n  width: var(--ds-control-height);\n  height: var(--ds-control-height);\n  margin: calc((var(--ds-unit) - var(--ds-control-height)) / 2);\n  overflow: hidden;\n  background: var(--ds-progress-mark);\n  box-shadow: inset 0 0 0 1px var(--ds-progress-mark-line);\n  color: var(--ds-progress-mark-ink);\n  --ds-icon-color: var(--ds-progress-mark-ink);\n  font-family: \"Inter Arrows\", var(--ds-typeface-medium);\n  font-size: var(--ds-type-size-small);\n  font-weight: var(--ds-type-weight-bold);\n  font-variant-numeric: tabular-nums;\n  line-height: var(--ds-control-height);\n  letter-spacing: 0;\n}\n\n.ds-progress__label {\n  min-width: 0;\n  padding-inline-end: calc(4px * var(--ds-sf, 1));\n  overflow: hidden;\n  white-space: nowrap;\n  text-overflow: clip;\n}\n\n/* A cut step name fades over its last square, never an ellipsis (0-face/cut-fade.ts marks it). */\n.ds-progress__label[data-cut=\"end\"] {\n  mask-image: linear-gradient(to right, #000 calc(100% - var(--ds-unit)), transparent);\n}\n.ds-progress__label[data-cut=\"end\"]:dir(rtl) {\n  mask-image: linear-gradient(to left, #000 calc(100% - var(--ds-unit)), transparent);\n}\n\n.ds-progress__step--current .ds-progress__label {\n  font-family: \"Inter Arrows\", var(--ds-typeface-medium);\n  font-weight: var(--ds-type-weight-bold);\n}\n\n.ds-progress__state {\n  position: absolute;\n  width: 1px;\n  height: 1px;\n  overflow: hidden;\n  clip-path: inset(50%);\n  white-space: nowrap;\n}\n\n.ds-progress--vertical {\n  flex-direction: column;\n  flex-wrap: nowrap;\n}\n\n.ds-progress--vertical .ds-progress__step {\n  flex-wrap: wrap;\n  width: 100%;\n}\n\n.ds-progress--vertical .ds-progress__step::after {\n  content: none;\n}\n\n/* Its content stands in a column, so an inline element in it (text drawn by\n   an element, say) takes its own lines rather than a line box's descent. */\n.ds-progress__body {\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: column;\n  flex: 1 0 100%;\n  min-width: 0;\n  padding-inline-start: var(--ds-unit);\n  color: var(--ds-text-color);\n}\n\n/* ---- A dot for each page ------------------------------------------- */\n\n.ds-progress--dots {\n  position: static;\n  display: inline-flex;\n  width: auto;\n  flex: none;\n  align-items: center;\n  height: var(--ds-row-height);\n  margin: 0;\n  padding: 0;\n}\n\n.ds-progress__dot {\n  --ds-progress-dot-color: var(--ds-progress-dot-future, var(--ds-text-color-muted));\n  appearance: none;\n  box-sizing: border-box;\n  display: inline-flex;\n  flex: none;\n  align-items: center;\n  justify-content: center;\n  width: var(--ds-unit);\n  height: var(--ds-unit);\n  margin: 0;\n  padding: 0;\n  border: 0;\n  border-radius: var(--ds-radius);\n  background: transparent;\n  color: inherit;\n  cursor: pointer;\n  -webkit-tap-highlight-color: transparent;\n}\n\n/* The dot itself: 4px, scaled with the surface, a fifth of the square. */\n.ds-progress__dot::before {\n  content: \"\";\n  box-sizing: border-box;\n  width: calc(4px * var(--ds-sf, 1));\n  height: calc(4px * var(--ds-sf, 1));\n  border-radius: 50%;\n  background: transparent;\n  box-shadow: inset 0 0 0 1px var(--ds-progress-dot-color);\n  transition: transform 160ms ease-out;\n}\n\n.ds-progress__dot[data-state=\"past\"] { --ds-progress-dot-color: var(--ds-progress-dot-past, var(--ds-text-color-muted)); }\n.ds-progress__dot[data-state=\"next\"] { --ds-progress-dot-color: var(--ds-progress-dot-next, var(--ds-text-color)); }\n.ds-progress__dot[data-state=\"end\"] { --ds-progress-dot-color: var(--ds-progress-dot-end, var(--ds-text-color)); }\n.ds-progress__dot[aria-current=\"true\"] { --ds-progress-dot-color: var(--ds-progress-dot-current, var(--ds-text-color)); }\n\n.ds-progress__dot:is([data-state=\"past\"], [data-state=\"next\"], [aria-current=\"true\"])::before {\n  background: var(--ds-progress-dot-color);\n}\n\n/* The current dot is half again as large. */\n.ds-progress__dot[aria-current=\"true\"]::before {\n  transform: scale(1.5);\n}\n\n.ds-progress__dot:hover:not([aria-current=\"true\"])::before {\n  transform: scale(1.25);\n}\n\n.ds-progress__dot:focus-visible {\n  outline: 2px solid var(--ds-focus-ring);\n  outline-offset: -2px;\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .ds-progress__dot::before {\n    transition: none;\n  }\n}\n\n/*\n * Rows, as plain classes on native elements: the `ds-row` and `ds-sidebar`\n * elements' look without the elements.\n *\n * A row is one square high, and what it holds stands on the lower sixteen of\n * the square with the spare four above, as Ezo sets every row: a line of\n * words on a 16px line box, a 16px icon and a 16px control all end on the\n * row's bottom line, so the capitals (7px below the top line, baseline 3px\n * above the next) are centred on an icon beside them. On an `<a href>` or a\n * `<button>` the whole row is one press target, a row, a tile or a card: the pointer over it, the\n * press and the focus ring cover the row, and its content keeps the row's\n * layout. A row that also holds controls of its own (a quick action, a link\n * in another cell) is any element, a `<li>`, a `<div>` or a `<tr>`, with one\n * `ds-row__target` inside: that link or button takes the press anywhere on\n * the row, and every other control inside stays separately pressable.\n *\n *   ds-row                 a row one square high; a press target on <a> or <button>\n *   ds-row__target         the row's press target, when the row holds other controls\n *   ds-row--auto           as high as its content, at least one square\n *   ds-row--stacked        the content stacked, each line one square (a tile, a card)\n *   ds-row--nav            a navigation row: the sidebar's two-pixel corners\n *   ds-row__picture        a record's picture before its words (a date or colour tile, an\n *                          avatar, a logo, or a button holding one): sixteen square at the\n *                          start of its square, the words on the next\n *   ds-row__name           a record's words: they hug and give way first; cut, they fade over\n *                          the last square, never an ellipsis (`data-cut=\"end\"`, set by the\n *                          element, or 0-face/cut-fade.ts on a page without Lit)\n *   ds-row__value          the figure or date at the row's end, in tabular figures\n *   aria-current=\"page\"    the destination being shown, filled and in the medium weight\n *   aria-disabled=\"true\"   or `disabled` on a button: dimmed, not pressable\n *\n * A sidebar of nested things (the `ds-sidebar tree` element without Lit) is a\n * `role=\"tree\"` list of `role=\"treeitem\"` rows, flat, each with its\n * `aria-level`, one square further in per level. `0-face/sidebar.ts`\n * (`connectSidebar`) gives it the keyboard of the tree pattern.\n *\n *   ds-sidebar             the tree (`role=\"tree\"`)\n *   ds-sidebar__item       a row (`role=\"treeitem\"`, `aria-level`, `aria-expanded` on a parent, `aria-selected`)\n *   ds-sidebar__disclosure the arrow on its own square, turned down when the row is open; empty on a leaf\n *   ds-sidebar__label      the words; cut, they fade over the last square (`data-cut=\"end\"`)\n *   ds-sidebar__meta       small muted words at the row's end\n *\n * An icon (`.ds-icon`) in a tree row takes a square of its own. Tokens:\n * `--ds-row-padding` (the words' distance from the row's edges, 4px),\n * `--ds-row-fill-hover`, `--ds-row-fill-press`, `--ds-row-fill-current` and\n * `--ds-row-current-weight` (component-tokens.css, shared with the\n * element), `--ds-sidebar-disclosure` (the arrow's drawing, the library's\n * `right` icon) and `--ds-sidebar-indent` (a row's depth in squares, read\n * from `aria-level` up to twelve levels).\n */\n\n:where(.ds-row):not(tr) {\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: row;\n  align-items: flex-end;\n  gap: calc(4px * var(--ds-sf));\n  min-width: 0;\n  height: var(--ds-row-height);\n  margin: 0;\n  line-height: var(--ds-type-lineheight-default);\n}\n\n:where(.ds-row--auto):not(tr) {\n  height: auto;\n  min-height: var(--ds-row-height);\n}\n\n:where(.ds-row--stacked):not(tr) {\n  flex-direction: column;\n  align-items: flex-start;\n  justify-content: flex-start;\n  gap: 0;\n  height: auto;\n}\n\n/* The press target: the row itself, or the one target inside it. */\na.ds-row,\nbutton.ds-row,\n.ds-row__target {\n  appearance: none;\n  box-sizing: border-box;\n  margin: 0;\n  border: 0;\n  background: none;\n  color: inherit;\n  font: inherit;\n  letter-spacing: inherit;\n  text-align: start;\n  text-decoration: none;\n  text-transform: none;\n  cursor: pointer;\n  outline: none;\n  -webkit-tap-highlight-color: transparent;\n}\n\n/* The font inherited above would bring the page's line into the row: the words go back on the\n   sixteen, as every row's (a stacked tile keeps its square lines below). */\na.ds-row,\nbutton.ds-row {\n  position: relative;\n  width: 100%;\n  line-height: var(--ds-type-lineheight-default);\n  padding: 0 var(--ds-row-padding, calc(4px * var(--ds-sf)));\n  border-radius: var(--ds-row-radius, 0);\n}\n\n.ds-row__target {\n  padding: 0;\n}\n\n/* Each line of a tile one square, over the inherited font of a native link or button:\n   a tile's lines wrap, so they stay on whole squares rather than the sixteen. */\n.ds-row.ds-row--stacked {\n  line-height: var(--ds-row-height);\n}\n\n/* A row with a target inside: the target's layers cover the row. */\n.ds-row:has(.ds-row__target) {\n  position: relative;\n  isolation: isolate;\n}\n:where(.ds-row:has(.ds-row__target)):not(tr) {\n  padding-inline: var(--ds-row-padding, calc(4px * var(--ds-sf)));\n}\n.ds-row__target::before,\n.ds-row__target::after {\n  content: \"\";\n  position: absolute;\n  inset: 0;\n  border-radius: var(--ds-row-radius, 0);\n}\n.ds-row__target::before { z-index: 1; }\n.ds-row__target::after { z-index: -1; }\n.ds-row:has(.ds-row__target) :where(a[href], button, input, select, textarea, label, summary, [tabindex]):not(.ds-row__target) {\n  position: relative;\n  z-index: 2;\n}\n\n/*\n * The pointer, the press, the current destination and the focus ring are one layer under the\n * row's content (Joachim, 19 October 2026). On a one-square row it is a square high and sits two\n * pixels around what the row holds: from two above the lower sixteen to two below the row's foot,\n * and two past the content at each side, its corners the icon tiles' 4px and those two more, so a\n * 16px icon stands in it with two all round. It is drawn over the row, never moving its words or\n * icons off the grid. An open row (`data-open`) wears the same layer. A taller row (a stacked\n * tile, `auto`) is filled whole.\n * Tokens: `--ds-row-fill-radius` (6px), `--ds-row-fill-overhang` (2px).\n */\na.ds-row,\nbutton.ds-row {\n  isolation: isolate;\n}\na.ds-row::after,\nbutton.ds-row::after {\n  content: \"\";\n  position: absolute;\n  z-index: -1;\n  pointer-events: none;\n}\na.ds-row::after,\nbutton.ds-row::after,\n.ds-row__target::after {\n  --ds-row-overhang: var(--ds-row-fill-overhang, calc(2px * var(--ds-sf)));\n  inset:\n    calc(var(--ds-row-height) - var(--ds-control-height) - var(--ds-row-overhang))\n    calc(var(--ds-row-padding, calc(4px * var(--ds-sf))) - var(--ds-row-overhang))\n    calc(0px - var(--ds-row-overhang));\n  border-radius: var(--ds-row-radius, var(--ds-row-fill-radius, calc(6px * var(--ds-sf))));\n}\n:is(a, button).ds-row:is(.ds-row--stacked, .ds-row--auto)::after,\n:is(.ds-row--stacked, .ds-row--auto) .ds-row__target::after {\n  inset: 0;\n}\na.ds-row[href]:hover::after,\nbutton.ds-row:hover:not(:disabled)::after,\n.ds-row__target:is(a[href], button:not(:disabled)):hover::after {\n  background: var(--ds-row-fill-hover, var(--ds-fill));\n}\na.ds-row[href]:active::after,\nbutton.ds-row:active:not(:disabled)::after,\n.ds-row__target:is(a[href], button:not(:disabled)):active::after {\n  background: var(--ds-row-fill-press, var(--ds-fill-hover));\n}\n.ds-row:is(a, button)[aria-current]:not([aria-current=\"false\"])::after,\n.ds-row__target[aria-current]:not([aria-current=\"false\"])::after {\n  background: var(--ds-row-fill-current, var(--ds-fill-hover));\n}\n.ds-row:is(a, button)[aria-current]:not([aria-current=\"false\"]),\n.ds-row:has(.ds-row__target[aria-current]:not([aria-current=\"false\"])) {\n  --ds-type-weight-default: var(--ds-row-current-weight, 500);\n  font-weight: var(--ds-row-current-weight, 500);\n}\na.ds-row:focus-visible::after,\nbutton.ds-row:focus-visible::after,\n.ds-row__target:focus-visible::after {\n  outline: 2px solid var(--ds-focus-ring);\n  outline-offset: -2px;\n}\na.ds-row:not([href]),\na.ds-row[aria-disabled=\"true\"],\nbutton.ds-row:disabled,\nbutton.ds-row[aria-disabled=\"true\"],\n.ds-row:has(.ds-row__target:is(:disabled, [aria-disabled=\"true\"], a:not([href]))) {\n  cursor: default;\n  opacity: 0.5;\n}\n.ds-row__target:is(:disabled, [aria-disabled=\"true\"], a:not([href])) {\n  cursor: default;\n}\na.ds-row[aria-disabled=\"true\"]:hover::after,\nbutton.ds-row[aria-disabled=\"true\"]:hover::after {\n  background: none;\n}\n\n.ds-row--nav {\n  --ds-row-radius: calc(2px * var(--ds-sf));\n}\n\n/* The parts of a record's row, as the element draws them: a 16px picture before the name takes\n   the first sixteen of its square and the row's 4px gap puts the words on the next; the name\n   hugs and gives way first; the value stands at the row's end. */\n/* The picture is exactly one control (16px) square, standing on the lower sixteen: whatever\n   holds it (a button that opens it, a property's trigger) adds no width, padding or margin,\n   so the 4px gap is the only space before the words, as in every record row. The measures\n   are important because a button's own face rules are more specific than a part's. */\n:is(.ds-row, ds-row, .ds-row__target) > .ds-row__picture {\n  flex: none;\n  display: inline-flex;\n  align-items: flex-end;\n  box-sizing: border-box;\n  width: var(--ds-control-height) !important;\n  min-width: 0 !important;\n  height: var(--ds-control-height);\n  margin: 0 !important;\n  padding: 0 !important;\n}\n/* A picture that opens something of its own (a date to change) stands over the row's press\n   layer, as the end slot does; a plain tile lets the press through to the row. */\n.ds-row__picture:has(button, a) {\n  position: relative;\n  z-index: 2;\n}\n.ds-row__picture :is(ds-button, button, a) {\n  display: flex;\n  width: 100% !important;\n  min-width: 0 !important;\n  height: 100%;\n  margin: 0 !important;\n  padding: 0 !important;\n}\n.ds-row .ds-row__name {\n  flex: 0 1 auto;\n  min-width: 0;\n  overflow: hidden;\n  white-space: nowrap;\n  text-overflow: clip;\n}\n.ds-row .ds-row__name[data-cut=\"end\"] {\n  mask-image: linear-gradient(to right, #000 calc(100% - var(--ds-unit)), transparent);\n}\n.ds-row:dir(rtl) .ds-row__name[data-cut=\"end\"] {\n  mask-image: linear-gradient(to left, #000 calc(100% - var(--ds-unit)), transparent);\n}\n.ds-row .ds-row__value {\n  flex: none;\n  margin-inline-start: auto;\n  white-space: nowrap;\n  text-align: end;\n  font-variant-numeric: tabular-nums;\n}\n\n/* A sidebar of nested things: the tree. */\n\n.ds-sidebar {\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: column;\n  min-width: 0;\n  margin: 0;\n  padding: 0;\n  list-style: none;\n  color: var(--ds-text-color);\n  font-family: \"Inter Arrows\", var(--ds-typeface-regular);\n  font-feature-settings: var(--ds-font-features);\n  font-size: var(--ds-type-size-default);\n  font-weight: var(--ds-type-weight-default);\n  line-height: var(--ds-type-lineheight-default);\n  letter-spacing: var(--ds-type-letterspacing-default);\n}\n\n.ds-sidebar__item {\n  box-sizing: border-box;\n  display: flex;\n  align-items: flex-end;\n  height: var(--ds-row-height);\n  min-width: 0;\n  margin: 0;\n  padding-block: 0;\n  padding-inline: calc(var(--ds-sidebar-indent, 0) * var(--ds-unit)) var(--ds-row-padding, calc(4px * var(--ds-sf)));\n  white-space: nowrap;\n  cursor: pointer;\n  user-select: none;\n  outline: none;\n  -webkit-tap-highlight-color: transparent;\n}\n.ds-sidebar__item[hidden] { display: none; }\n.ds-sidebar__item[aria-level=\"2\"] { --ds-sidebar-indent: 1; }\n.ds-sidebar__item[aria-level=\"3\"] { --ds-sidebar-indent: 2; }\n.ds-sidebar__item[aria-level=\"4\"] { --ds-sidebar-indent: 3; }\n.ds-sidebar__item[aria-level=\"5\"] { --ds-sidebar-indent: 4; }\n.ds-sidebar__item[aria-level=\"6\"] { --ds-sidebar-indent: 5; }\n.ds-sidebar__item[aria-level=\"7\"] { --ds-sidebar-indent: 6; }\n.ds-sidebar__item[aria-level=\"8\"] { --ds-sidebar-indent: 7; }\n.ds-sidebar__item[aria-level=\"9\"] { --ds-sidebar-indent: 8; }\n.ds-sidebar__item[aria-level=\"10\"] { --ds-sidebar-indent: 9; }\n.ds-sidebar__item[aria-level=\"11\"] { --ds-sidebar-indent: 10; }\n.ds-sidebar__item[aria-level=\"12\"] { --ds-sidebar-indent: 11; }\n.ds-sidebar__item:hover:not([aria-disabled=\"true\"]) { background: var(--ds-row-fill-hover, var(--ds-fill)); }\n.ds-sidebar__item:active:not([aria-disabled=\"true\"]) { background: var(--ds-row-fill-press, var(--ds-fill-hover)); }\n.ds-sidebar__item[aria-selected=\"true\"] {\n  --ds-type-weight-default: var(--ds-row-current-weight, 500);\n  background: var(--ds-row-fill-current, var(--ds-fill-hover));\n  font-weight: var(--ds-row-current-weight, 500);\n}\n.ds-sidebar__item:focus-visible {\n  outline: 2px solid var(--ds-focus-ring);\n  outline-offset: -2px;\n}\n.ds-sidebar__item[aria-disabled=\"true\"] {\n  cursor: default;\n  opacity: 0.5;\n}\n\n/* The arrow and an icon each stand on a whole square, drawn on the row's sixteen (two\n   pixels below the square's middle); a leaf keeps the arrow's square empty. */\n.ds-sidebar__disclosure,\n.ds-sidebar__item > .ds-icon {\n  flex: 0 0 var(--ds-unit);\n  width: var(--ds-unit);\n  height: var(--ds-unit);\n  -webkit-mask-size: var(--ds-icon-box, calc(14px * var(--ds-sf)));\n  mask-size: var(--ds-icon-box, calc(14px * var(--ds-sf)));\n  -webkit-mask-position: center calc(50% + 2px * var(--ds-sf));\n  mask-position: center calc(50% + 2px * var(--ds-sf));\n}\n.ds-sidebar__disclosure {\n  --ds-icon-box: calc(14px * var(--ds-sf));\n  display: inline-block;\n  color: var(--ds-text-color-muted);\n  background-color: currentColor;\n  -webkit-mask: var(--ds-sidebar-disclosure, url(\"data:image/svg+xml,%3Csvg xmlns='http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg' viewBox='0 0 16 16'%3E%3Cpath d='M13.1566 8.60594H0V9.61651L13.1562 9.61791L10.249 12.5251L10.9558 13.219L15.0636 9.11123L10.9524 5L10.245 5.70734L13.1566 8.60594Z'/%3E%3C/svg%3E\")) center calc(50% + 2px * var(--ds-sf)) / var(--ds-icon-box) no-repeat;\n  mask: var(--ds-sidebar-disclosure, url(\"data:image/svg+xml,%3Csvg xmlns='http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg' viewBox='0 0 16 16'%3E%3Cpath d='M13.1566 8.60594H0V9.61651L13.1562 9.61791L10.249 12.5251L10.9558 13.219L15.0636 9.11123L10.9524 5L10.245 5.70734L13.1566 8.60594Z'/%3E%3C/svg%3E\")) center calc(50% + 2px * var(--ds-sf)) / var(--ds-icon-box) no-repeat;\n  transform: rotate(0deg);\n  transition: transform 120ms ease-out;\n}\n.ds-sidebar__item:not([aria-expanded]) > .ds-sidebar__disclosure {\n  visibility: hidden;\n}\n.ds-sidebar__item[aria-expanded=\"true\"] > .ds-sidebar__disclosure {\n  transform: rotate(90deg);\n}\n.ds-sidebar__label {\n  flex: 1 1 auto;\n  min-width: 0;\n  padding-inline-start: calc(4px * var(--ds-sf));\n  overflow: hidden;\n  text-overflow: clip;\n}\n.ds-sidebar__label[data-cut=\"end\"] {\n  mask-image: linear-gradient(to right, #000 calc(100% - var(--ds-unit)), transparent);\n}\n.ds-sidebar__label[data-cut=\"end\"]:dir(rtl) {\n  mask-image: linear-gradient(to left, #000 calc(100% - var(--ds-unit)), transparent);\n}\n.ds-sidebar__meta {\n  flex: none;\n  padding-inline-start: calc(4px * var(--ds-sf));\n  color: var(--ds-text-color-muted);\n  font-size: var(--ds-type-size-small);\n  font-variant-numeric: tabular-nums;\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .ds-sidebar__disclosure { transition: none; }\n}\n\n@media (forced-colors: active) {\n  .ds-row:is(a, button)[aria-current]:not([aria-current=\"false\"]),\n  .ds-row__target[aria-current]:not([aria-current=\"false\"])::after,\n  .ds-sidebar__item[aria-selected=\"true\"] {\n    outline: 1px solid Highlight;\n    outline-offset: -1px;\n  }\n  .ds-sidebar__disclosure {\n    background-color: CanvasText;\n  }\n}\n\n/* A controlled detail view: the caller marks its open row, and clears it on close.\n   Navigation's current state and the text weight remain independent. */\n.ds-row[data-open]:not([data-open=\"false\"]) {\n  position: relative;\n  isolation: isolate;\n}\n.ds-row[data-open]:not([data-open=\"false\"])::after {\n  content: \"\";\n  position: absolute;\n  z-index: -1;\n  pointer-events: none;\n  --ds-row-overhang: var(--ds-row-fill-overhang, calc(2px * var(--ds-sf)));\n  inset: calc(var(--ds-row-height) - var(--ds-control-height) - var(--ds-row-overhang))\n    calc(var(--ds-row-padding, calc(4px * var(--ds-sf))) - var(--ds-row-overhang))\n    calc(0px - var(--ds-row-overhang));\n  border-radius: var(--ds-row-radius, var(--ds-row-fill-radius, calc(6px * var(--ds-sf))));\n  background: var(--ds-row-fill-current, var(--ds-fill-hover));\n}\n/* A plain row (no press target inside) has no padding of its own: its words and icons stand on\n   the row's edges, so the layer reaches two past them, as a flush row's does. */\n.ds-row[data-open]:not([data-open=\"false\"]):not(a, button, .ds-row--stacked, .ds-row--auto, :has(.ds-row__target))::after {\n  inset: calc(var(--ds-row-height) - var(--ds-control-height) - var(--ds-row-overhang))\n    calc(0px - var(--ds-row-overhang))\n    calc(0px - var(--ds-row-overhang));\n}\n.ds-row[data-open]:is(.ds-row--stacked, .ds-row--auto)::after { inset: 0; }\n@media (forced-colors: active) {\n  .ds-row[data-open]:not([data-open=\"false\"])::after { outline: 1px solid Highlight; outline-offset: -1px; }\n}\n/*\n * `.ds-context` is the `ds-context` element's look on a native menu, for a page\n * without Lit or a menu a library draws: Ezo's gap face. The rows carry the\n * colour and the menu only cuts the outer silhouette, so the page shows\n * through a pixel between rows and two between groups. The rows are black\n * with white words in both themes, as Ezo's menus always were (the slate in\n * dark, darker than the page). Every row is 19px with the pixel under it, a square's pitch, its words\n * on the sixteen and an icon at its end. A Select's menu is the light face,\n * `.ds-menu`; a Context's is this dark one.\n *\n *   ds-context                 the menu (`role=\"menu\"`); its rows are its buttons,\n *                              links and menu items, or `ds-context__item`\n *   ds-context__item           a row; `--danger` (or `data-danger`) in red\n *   ds-context__label          a heading row, muted\n *   ds-context__shortcut       a shortcut at the row's end, muted\n *   ds-context__separator      a group gap (or an `hr`, or `role=\"separator\"`):\n *                              never a line; first, last or doubled it is quiet\n *   [data-ds-refused]          a refused change: the row turns red\n *   ds-context--bar            the context bar over what is selected: the rows\n *                              side by side, one row high; `ds-context__item--icon`\n *                              a cell holding only an icon, one square\n *\n * The page places and opens it (a popover at the pointer, say) and owns its\n * keys; the faces of hover, focus, disabled and the wait of a pending menu\n * (`aria-busy=\"true\"`) are here. Tokens as the element's: --ds-context-fill,\n * --ds-context-ink, --ds-context-hover, --ds-context-danger,\n * --ds-context-refused, --ds-context-radius.\n *\n * It draws the same on a page without the root stylesheet: the measures come\n * from component-metrics.css, imported above, and every colour and the scale\n * fall back to their values; the type is the page's.\n */\n\n.ds-context {\n  --ds-context-row: calc(var(--ds-row-height) - 1px);\n  /* Black in both themes, as Ezo's menus always were: in dark the slate, darker than the page. */\n  --ds-context-fill: light-dark(var(--ds-black, #2a2a2a), var(--ds-slate, #1e1e1e));\n  --ds-context-ink: var(--ds-white, #ffffff);\n  --ds-context-hover: color-mix(in srgb, var(--ds-context-fill) 78%, var(--ds-context-ink));\n  --ds-context-danger: var(--ds-tuned-red, #ff5f5f);\n  --ds-context-refused: var(--ds-tuned-red, #ff5f5f);\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: column;\n  gap: 1px;\n  width: var(--ds-menu-width, max-content);\n  min-width: calc(4 * var(--ds-unit));\n  max-height: var(--ds-menu-max-height, calc(16 * var(--ds-unit)));\n  overflow-y: auto;\n  margin: 0;\n  padding: 0;\n  border: 0;\n  background: transparent;\n  box-shadow: none;\n  clip-path: inset(0 round var(--ds-context-radius, var(--ds-radius, 4px)));\n  color: var(--ds-context-ink);\n  font-family: \"Inter Arrows\", var(--ds-typeface-regular);\n  font-feature-settings: var(--ds-font-features);\n  font-size: var(--ds-type-size-default);\n  font-weight: var(--ds-type-weight-default);\n  line-height: var(--ds-type-lineheight-default);\n  letter-spacing: var(--ds-type-letterspacing-default);\n  list-style: none;\n}\n\n.ds-context > [role=\"group\"] {\n  display: contents;\n}\n\n/* A row: whatever the page or library styles its buttons with, one row on the sixteen. */\n.ds-context :is(.ds-context__item, :is(.ds-context, .ds-context > [role=\"group\"]) > :is(button, a, li, [role^=\"menuitem\"]):not(.ds-context__label, .ds-context__separator, [role=\"separator\"])) {\n  box-sizing: border-box !important;\n  display: flex !important;\n  flex: 0 0 auto !important;\n  align-items: flex-end !important;\n  justify-content: space-between !important;\n  gap: calc(4px * var(--ds-sf, 1));\n  width: 100%;\n  height: var(--ds-context-row) !important;\n  min-height: var(--ds-context-row) !important;\n  max-height: var(--ds-context-row) !important;\n  margin: 0 !important;\n  padding: 0 calc(4px * var(--ds-sf, 1)) !important;\n  border: 0 !important;\n  border-radius: 0 !important;\n  background: var(--ds-context-fill) !important;\n  color: var(--ds-context-ink) !important;\n  font: inherit;\n  line-height: var(--ds-type-lineheight-default) !important;\n  letter-spacing: inherit;\n  text-align: start;\n  text-decoration: none;\n  white-space: nowrap;\n  cursor: pointer;\n  outline: none;\n  appearance: none;\n  -webkit-tap-highlight-color: transparent;\n}\n\n.ds-context :is(.ds-context__item, :is(.ds-context, .ds-context > [role=\"group\"]) > :is(button, a, li, [role^=\"menuitem\"])):is(:hover, :focus-visible, [data-highlighted]):not(:disabled, [aria-disabled=\"true\"], [data-disabled]) {\n  background: var(--ds-context-hover) !important;\n}\n\n.ds-context :is(.ds-context__item, :is(.ds-context, .ds-context > [role=\"group\"]) > :is(button, a, li, [role^=\"menuitem\"])):focus-visible {\n  box-shadow: inset 0 0 0 2px var(--ds-focus-ring, #594dff);\n}\n\n.ds-context :is(.ds-context__item, :is(.ds-context, .ds-context > [role=\"group\"]) > :is(button, a, li, [role^=\"menuitem\"])):is(:disabled, [aria-disabled=\"true\"], [data-disabled]) {\n  cursor: default;\n  opacity: 0.5;\n}\n\n.ds-context[aria-busy=\"true\"] > * {\n  cursor: wait !important;\n}\n\n/* Danger is red, on either fill. */\n.ds-context :is(.ds-context__item, :is(.ds-context, .ds-context > [role=\"group\"]) > :is(button, a, li, [role^=\"menuitem\"])):is(.ds-context__item--danger, [data-danger], [data-variant=\"destructive\"]) {\n  color: var(--ds-context-danger) !important;\n}\n\n/* A refused change: its row turns red a moment. */\n.ds-context :is(.ds-context__item, :is(.ds-context, .ds-context > [role=\"group\"]) > :is(button, a, li, [role^=\"menuitem\"]))[data-ds-refused] {\n  background: var(--ds-context-refused) !important;\n}\n\n/* Groups are a gap, never a line: the separator takes nothing but the gap after it. */\n.ds-context > :is(hr, .ds-context__separator, [role=\"separator\"]) {\n  flex: 0 0 0 !important;\n  height: 0 !important;\n  margin: 0 !important;\n  padding: 0 !important;\n  border: 0 !important;\n  background: none !important;\n}\n\n/* A group left empty leaves no gap. */\n.ds-context > :is(hr, .ds-context__separator, [role=\"separator\"]):is(:first-child, :last-child),\n.ds-context > :is(hr, .ds-context__separator, [role=\"separator\"]) + :is(hr, .ds-context__separator, [role=\"separator\"]) {\n  display: none !important;\n}\n\n.ds-context :is(.ds-context__label, [data-ds-menu-label]) {\n  box-sizing: border-box;\n  height: var(--ds-context-row);\n  /* The spare three above the sixteen. */\n  padding: calc(var(--ds-context-row) - var(--ds-type-lineheight-default)) calc(4px * var(--ds-sf, 1)) 0;\n  background: var(--ds-context-fill);\n  color: color-mix(in srgb, var(--ds-context-ink) 60%, var(--ds-context-fill));\n  line-height: var(--ds-type-lineheight-default);\n  white-space: nowrap;\n}\n\n.ds-context__shortcut {\n  margin-left: auto;\n  color: color-mix(in srgb, var(--ds-context-ink) 60%, var(--ds-context-fill));\n}\n\n/* The bar: the same rows side by side, the context bar over what is selected.\n   One row high, the cells a pixel apart and groups two, the page showing\n   through; a cell with words is 4px in on the sixteen, a cell holding only an\n   icon (`ds-context__item--icon`) one square, the icon in its middle. As long\n   as its cells. The page stands it half a square above the selection. */\n.ds-context.ds-context--bar {\n  flex-direction: row;\n  width: var(--ds-menu-width, max-content);\n  min-width: 0;\n  height: var(--ds-context-row);\n  max-height: none;\n  overflow: auto hidden;\n  scrollbar-width: none;\n}\n\n.ds-context.ds-context--bar :is(.ds-context__item, :is(.ds-context, .ds-context > [role=\"group\"]) > :is(button, a, li, [role^=\"menuitem\"])) {\n  width: auto;\n  min-width: var(--ds-context-row);\n}\n\n.ds-context.ds-context--bar :is(.ds-context__item, :is(.ds-context, .ds-context > [role=\"group\"]) > :is(button, a, li, [role^=\"menuitem\"])):is(.ds-context__item--icon, [data-ds-context-icon]) {\n  justify-content: center !important;\n  width: var(--ds-context-row);\n  padding: 0 !important;\n}\n\n.ds-context.ds-context--bar > :is(hr, .ds-context__separator, [role=\"separator\"]) {\n  width: 0 !important;\n  height: auto !important;\n}\n\n/*\n * Native controls in shared dress.\n *\n * DS one keeps a few components as plain classes on native elements. shared does\n * the same for everything a person types into or picks from: text fields,\n * selects and checkboxes stay `<input>` and `<select>`, so labels, form\n * semantics and React's controlled inputs work as they always have.\n *\n * `.ds-button` is the `ds-button` element's look on a native `<button>`,\n * for a button inside a drag handle. The drag library recognises only native\n * controls: inside a handle it would lift the row on Space where a\n * `ds-button` was meant to be pressed. Both read the same custom properties.\n * On an `<a href>` it is a link drawn as a button (see `a.ds-button` below).\n */\n\n.ds-button {\n  appearance: none;\n  box-sizing: border-box;\n  display: inline-flex;\n  /* At the foot of a line, so the 16px face takes the lower sixteen of the square. */\n  vertical-align: bottom;\n  flex: 0 0 auto;\n  width: var(--ds-button-width, max-content);\n  align-items: center;\n  justify-content: var(--ds-button-align, flex-start);\n  gap: var(--ds-button-gap, calc(4px * var(--ds-sf)));\n  height: var(--ds-button-height, var(--ds-control-height));\n  margin: 0;\n  padding: var(--ds-button-padding, 0);\n  border: 0;\n  border-radius: var(--ds-radius);\n  background: var(--ds-button-background, transparent);\n  color: var(--ds-button-color, var(--ds-button-text-color));\n  font-family: \"Inter Arrows\", var(--ds-typeface-regular);\n  font-feature-settings: var(--ds-font-features);\n  font-size: var(--ds-type-size-default);\n  line-height: var(--ds-type-lineheight-default);\n  letter-spacing: var(--ds-type-letterspacing-default);\n  white-space: nowrap;\n  cursor: pointer;\n  -webkit-tap-highlight-color: transparent;\n}\n\n.ds-button--icon {\n  justify-content: center;\n  width: var(--ds-button-height, var(--ds-control-height));\n  padding: 0;\n  color: var(--ds-button-color, var(--ds-text-color-muted));\n}\n\n.ds-button--icon:hover:not(:disabled, [aria-disabled=\"true\"]) {\n  --ds-button-color: var(--ds-text-color);\n}\n\n.ds-button:focus-visible {\n  outline: 2px solid var(--ds-focus-ring);\n  outline-offset: 1px;\n}\n\n.ds-button:disabled,\n.ds-button[aria-disabled=\"true\"] {\n  cursor: default;\n  opacity: 0.5;\n}\n\n/*\n * one.css carries older button rules that dim a button on hover and nudge it\n * on press. The shared button does neither: these match their specificity, so\n * controls.css, loaded after one.css, wins.\n */\n.ds-button:hover:not(:disabled, [aria-disabled=\"true\"]) {\n  filter: none;\n}\n\n.ds-button:active:not(:disabled, [aria-disabled=\"true\"]) {\n  transform: none;\n}\n\n/*\n * `a.ds-button` is a link drawn as a button. The browser keeps the link:\n * middle-click, a new tab, Copy link and Enter. It never takes the link's\n * underline or colours, in any state, so every face (primary, secondary,\n * icon, tabs) looks as it does on a `<button>`. A disabled link has no `href`\n * and carries `aria-disabled=\"true\"` and `role=\"link\"`.\n */\na.ds-button,\na.ds-button:is(:hover, :focus, :active) {\n  text-decoration: none;\n}\n\na.ds-button:is(:link, :visited) {\n  color: var(--ds-button-color, var(--ds-button-text-color));\n}\n\na.ds-button.ds-button--icon:is(:link, :visited) {\n  color: var(--ds-button-color, var(--ds-text-color-muted));\n}\n\na.ds-button[aria-disabled=\"true\"] {\n  pointer-events: none;\n}\n\n/*\n * `.ds-link` is a link in running text: the text's ink, underlined by a\n * hairline 2px below the letters (as a toast's actions are), which turns to the full ink under\n * the pointer. A visited link is drawn in the muted ink. Words keep their\n * sentence case. Tokens: `--ds-link-color`, `--ds-link-visited-color`,\n * `--ds-link-line-color`, `--ds-link-hover-line-color`.\n */\n.ds-link {\n  color: var(--ds-link-color, currentColor);\n  text-decoration-line: underline;\n  text-decoration-thickness: 1px;\n  text-decoration-color: var(--ds-link-line-color, color-mix(in srgb, currentColor 40%, transparent));\n  text-underline-offset: calc(2px * var(--ds-sf));\n  cursor: pointer;\n}\n\n.ds-link:visited {\n  color: var(--ds-link-visited-color, var(--ds-text-color-muted));\n}\n\n.ds-link:hover {\n  text-decoration-color: var(--ds-link-hover-line-color, currentColor);\n}\n\n/* Quiet navigation and related-component lists: no underline in any state. */\n.ds-link.ds-link--plain {\n  text-decoration: none;\n}\n\n.ds-link:focus-visible {\n  outline: 2px solid var(--ds-focus-ring);\n  outline-offset: 1px;\n}\n\n.ds-link[aria-disabled=\"true\"] {\n  cursor: default;\n  opacity: 0.5;\n  pointer-events: none;\n}\n\n.ds-input,\n.ds-select {\n  box-sizing: border-box;\n  min-width: 0;\n  height: var(--ds-input-height, var(--ds-control-height));\n  margin: 0;\n  padding: 0 calc(4px * var(--ds-sf));\n  border: 0;\n  border-radius: var(--ds-radius);\n  background: var(--ds-fill);\n  color: var(--ds-text-color);\n  font-family: \"Inter Arrows\", var(--ds-typeface-regular);\n  font-feature-settings: var(--ds-font-features);\n  font-size: var(--ds-type-size-default);\n  line-height: var(--ds-type-lineheight-default);\n  letter-spacing: var(--ds-type-letterspacing-default);\n  outline: none;\n}\n\n.ds-input::placeholder {\n  color: var(--ds-title-color);\n}\n\n.ds-input:focus-visible,\n.ds-select:focus-visible,\n.ds-checkbox:focus-visible,\n.ds-radio:focus-visible,\n.ds-switch:focus-visible {\n  outline: 2px solid var(--ds-focus-ring);\n  outline-offset: 1px;\n}\n\n.ds-input:disabled,\n.ds-select:disabled,\n.ds-checkbox:disabled,\n.ds-radio:disabled,\n.ds-switch:disabled {\n  cursor: default;\n  opacity: 0.5;\n}\n\n.ds-select {\n  appearance: none;\n  padding-right: calc(16px * var(--ds-sf));\n  background-image:\n    linear-gradient(45deg, transparent 50%, currentColor 50%),\n    linear-gradient(135deg, currentColor 50%, transparent 50%);\n  background-position:\n    calc(100% - 9px) 50%,\n    calc(100% - 6px) 50%;\n  background-size:\n    3px 3px,\n    3px 3px;\n  background-repeat: no-repeat;\n  cursor: pointer;\n}\n\n/* A multiline field, `ds-input` on a <textarea>, spans whole rows: --ds-textarea-rows sets how many, three by default. */\ntextarea.ds-input {\n  display: block;\n  height: var(--ds-textarea-height, calc(var(--ds-textarea-rows, 3) * var(--ds-row-height)));\n  min-height: var(--ds-row-height);\n  padding: var(--ds-textarea-padding, calc(4px * var(--ds-sf)));\n  border-radius: var(--ds-textarea-radius, calc(4px * var(--ds-sf)));\n  resize: vertical;\n}\n\n/*\n * `.ds-checkbox` and `.ds-radio` are the `ds-checkbox` and `ds-radio` elements'\n * faces on a native `<input>`: a box one control (16px) square on the field's\n * ground with a 1px line, standing as an icon does, on the lower sixteen at the\n * start of its square, so it takes one square and the words begin on the next\n * (Joachim, 19 October 2026). The checkbox has the corners of a control and fills with the accent,\n * the check (`x-icon/check.svg`) in its ink; the radio is a circle with a dot\n * half a square across in the text colour.\n */\n.ds-checkbox,\n.ds-radio {\n  appearance: none;\n  box-sizing: border-box;\n  display: inline-grid;\n  flex: 0 0 auto;\n  place-items: center;\n  vertical-align: top;\n  width: var(--ds-control-height);\n  height: var(--ds-control-height);\n  margin: 0;\n  margin-block-start: calc(var(--ds-row-height) - var(--ds-control-height));\n  margin-inline-end: calc(var(--ds-row-height) - var(--ds-control-height));\n  padding: 0;\n  border: 1px solid var(--ds-border-color);\n  background: var(--ds-input-background);\n  cursor: pointer;\n}\n\n.ds-checkbox {\n  --ds-checkbox-mark: url(\"data:image/svg+xml,%3Csvg%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%2016%2016%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20d%3D%22M6.68649%2011.884L12.443%206.13601L11.736%205.42715L6.68835%2010.4827L4.26399%208.0501L3.55696%208.74525L6.68649%2011.884Z%22%20fill%3D%22currentColor%22%2F%3E%0A%3C%2Fsvg%3E\");\n  border-radius: var(--ds-radius);\n  corner-shape: var(--ds-corner-shape, round);\n  color: var(--ds-button-text-color-on-accent);\n}\n\n.ds-checkbox:is(:checked, :indeterminate) {\n  background: var(--ds-accent-color);\n}\n\n.ds-checkbox::before,\n.ds-radio::before {\n  content: \"\";\n  opacity: 0;\n  background: currentColor;\n}\n\n.ds-checkbox::before {\n  width: var(--ds-control-height);\n  height: var(--ds-control-height);\n  mask: var(--ds-checkbox-mark) center / contain no-repeat;\n}\n\n.ds-checkbox:indeterminate::before {\n  width: calc(var(--ds-control-height) / 2);\n  height: calc(2px * var(--ds-sf));\n  mask: none;\n}\n\n.ds-radio {\n  border-radius: 50%;\n  color: var(--ds-text-color);\n}\n\n.ds-radio::before {\n  width: calc(var(--ds-control-height) / 2);\n  height: calc(var(--ds-control-height) / 2);\n  border-radius: 50%;\n}\n\n.ds-checkbox:is(:checked, :indeterminate)::before,\n.ds-radio:checked::before {\n  opacity: 1;\n}\n\n/*\n * `.ds-switch` is the `ds-switch` element's look on a native\n * `<button role=\"switch\" aria-checked>`: two control heights wide less 4px (28 × 16),\n * its thumb one control high less a 2px inset, travelling 12px. A pill with a white\n * round thumb, grey when off and the darker green when on, whatever the page's accent: the\n * one switch (Joachim, 19 October 2026).\n */\n\n.ds-switch {\n  --ds-choice-unit: var(--ds-control-height);\n  appearance: none;\n  box-sizing: border-box;\n  position: relative;\n  display: inline-block;\n  flex: 0 0 auto;\n  vertical-align: middle;\n  width: calc(2 * var(--ds-choice-unit) - 4px * var(--ds-sf));\n  height: var(--ds-choice-unit);\n  margin: 0;\n  padding: calc(2px * var(--ds-sf));\n  border: 0;\n  border-radius: var(--ds-choice-unit);\n  background: var(--ds-fill);\n  color: var(--ds-white);\n  cursor: pointer;\n  touch-action: manipulation;\n}\n\n.ds-switch::after {\n  content: \"\";\n  display: block;\n  width: calc(var(--ds-choice-unit) - 4px * var(--ds-sf));\n  height: 100%;\n  border-radius: 50%;\n  background: var(--ds-white);\n  transform: translateX(0);\n  transition: transform 140ms ease;\n}\n\n.ds-switch[aria-checked=\"true\"] {\n  background: var(--ds-switch-track-on);\n}\n\n.ds-switch[aria-checked=\"true\"]::after {\n  transform: translateX(calc(var(--ds-choice-unit) - 4px * var(--ds-sf)));\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .ds-switch::after {\n    transition: none;\n  }\n}\n\n/*\n * `.ds-range` draws a native `<input type=\"range\">`: one control high,\n * standing on the lower sixteen of its square (the spare four above it as a\n * margin, so it takes one square alone and in a row), eight squares wide.\n * The track is a 1px line across the middle of the control, the thumb one\n * control high and half a control wide with the shared corners, in the ink.\n * The browser keeps the value, the keys, the form data and the events.\n *\n * Tokens: `--ds-range-width` (eight squares), `--ds-range-track` (the line,\n * the title grey), `--ds-range-thumb` (the ink) and `--ds-range-thumb-width`.\n * WebKit and Blink draw the parts as `::-webkit-slider-*`, Firefox as\n * `::-moz-range-*`; both get the same track and thumb.\n */\n\n.ds-range {\n  -webkit-appearance: none;\n  appearance: none;\n  box-sizing: border-box;\n  display: inline-block;\n  vertical-align: bottom;\n  width: var(--ds-range-width, calc(8 * var(--ds-unit)));\n  min-width: 0;\n  height: var(--ds-control-height);\n  margin: calc(var(--ds-row-height) - var(--ds-control-height)) 0 0;\n  padding: 0;\n  border: 0;\n  border-radius: var(--ds-radius);\n  background: transparent;\n  color: var(--ds-range-thumb, var(--ds-text-color));\n  font: inherit;\n  cursor: pointer;\n  touch-action: pan-y;\n  -webkit-tap-highlight-color: transparent;\n}\n\n.ds-range::-webkit-slider-runnable-track {\n  box-sizing: border-box;\n  height: var(--ds-control-height);\n  border: 0;\n  background: linear-gradient(var(--ds-range-track, var(--ds-title-color)) 0 0) 0 calc(var(--ds-control-height) / 2) / 100% 1px no-repeat;\n}\n\n.ds-range::-moz-range-track {\n  box-sizing: border-box;\n  height: var(--ds-control-height);\n  border: 0;\n  background: linear-gradient(var(--ds-range-track, var(--ds-title-color)) 0 0) 0 calc(var(--ds-control-height) / 2) / 100% 1px no-repeat;\n}\n\n.ds-range::-moz-range-progress {\n  background: transparent;\n}\n\n.ds-range::-webkit-slider-thumb {\n  -webkit-appearance: none;\n  appearance: none;\n  box-sizing: border-box;\n  width: var(--ds-range-thumb-width, calc(var(--ds-control-height) / 2));\n  height: var(--ds-control-height);\n  border: 0;\n  border-radius: var(--ds-radius);\n  background: currentColor;\n}\n\n.ds-range::-moz-range-thumb {\n  box-sizing: border-box;\n  width: var(--ds-range-thumb-width, calc(var(--ds-control-height) / 2));\n  height: var(--ds-control-height);\n  border: 0;\n  border-radius: var(--ds-radius);\n  background: currentColor;\n}\n\n.ds-range:focus-visible {\n  outline: 2px solid var(--ds-focus-ring);\n  outline-offset: 1px;\n}\n\n.ds-range:disabled {\n  cursor: default;\n  opacity: 0.5;\n}\n\n/*\n * `.ds-tabs` is the `ds-tabs` element's row on native buttons. As an option\n * group (role=\"group\", a segmented control) its `.ds-button` choices are\n * grey and the chosen one, aria-pressed, aria-selected or aria-current, is in\n * the accent, as the primary and secondary buttons are.\n */\n\n.ds-tabs {\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  gap: calc(4px * var(--ds-sf));\n  min-width: 0;\n  height: var(--ds-row-height);\n}\n\n.ds-tabs--fill > * {\n  flex: 1 1 0;\n  justify-content: center;\n}\n\n.ds-tabs[role=\"group\"] > .ds-button {\n  --ds-button-height: var(--ds-row-height);\n  --ds-button-padding: 0 calc(4px * var(--ds-sf));\n  --ds-button-background: var(--ds-button-background-color-secondary);\n  min-width: 0;\n}\n\n.ds-tabs[role=\"group\"] > .ds-button:hover:not(:disabled, [aria-disabled=\"true\"]) {\n  --ds-button-background: var(--ds-fill-hover);\n}\n\n.ds-tabs[role=\"group\"] > .ds-button:is([aria-pressed=\"true\"], [aria-selected=\"true\"], [aria-current]:not([aria-current=\"false\"])) {\n  --ds-button-background: var(--ds-button-background-color-primary);\n  --ds-button-color: var(--ds-button-text-color-on-accent);\n}\n\n/*\n * `.ds-overlay` is the `ds-overlay` element's frame on a native `<dialog>`, a\n * modal by default: twenty squares wide, a square of padding, square corners,\n * a hairline and the paper. `ds-overlay--sheet`, `ds-overlay--drawer` (with\n * `ds-overlay--start` for the start side) and `ds-overlay--screen` are its\n * other types (overlay.css). Its header, title, description, footer and close button are marked\n * with data-ds-overlay, as inside the element.\n */\n\ndialog.ds-overlay {\n  box-sizing: border-box;\n  position: fixed;\n  inset: 0;\n  width: var(--ds-overlay-width, calc(20 * var(--ds-unit)));\n  max-width: var(--ds-overlay-max-width, calc(100vw - 2 * var(--ds-unit)));\n  max-height: var(--ds-overlay-max-height, calc(100dvh - 2 * var(--ds-unit)));\n  height: var(--ds-overlay-height, fit-content);\n  margin: auto;\n  padding: var(--ds-overlay-padding, var(--ds-unit));\n  border: var(--ds-overlay-border, 1px solid var(--ds-border-color));\n  border-radius: 0;\n  background: var(--ds-overlay-paper, var(--ds-paper));\n  color: var(--ds-text-color);\n  box-shadow: none;\n  overflow: auto;\n  overscroll-behavior: contain;\n  font-family: \"Inter Arrows\", var(--ds-typeface-regular);\n  font-feature-settings: var(--ds-font-features);\n  font-size: var(--ds-type-size-default);\n  font-weight: var(--ds-type-weight-default);\n  line-height: var(--ds-type-lineheight-default);\n  letter-spacing: var(--ds-type-letterspacing-default);\n}\n\ndialog.ds-overlay[open] {\n  display: flex;\n  flex-direction: column;\n  gap: var(--ds-unit);\n}\n\ndialog.ds-overlay::backdrop {\n  background: color-mix(in srgb, var(--ds-black) 40%, transparent);\n}\n\n.ds-overlay [data-ds-overlay=\"header\"] {\n  display: flex;\n  flex-direction: column;\n}\n\n/* The header keeps the last square of its row for the close button, only when it has one. */\ndialog.ds-overlay:has(> [data-ds-overlay=\"close\"]) [data-ds-overlay=\"header\"] {\n  padding-inline-end: var(--ds-unit);\n}\n\n/* The title on its square's lower sixteen, as every row's words. */\n.ds-overlay [data-ds-overlay=\"title\"] {\n  display: flex;\n  align-items: flex-end;\n  min-height: var(--ds-row-height);\n  margin: 0;\n  color: var(--ds-text-color);\n  font: inherit;\n  font-weight: var(--ds-type-weight-bold);\n  line-height: var(--ds-type-lineheight-default);\n}\n\n.ds-overlay [data-ds-overlay=\"description\"] {\n  margin: 0;\n  color: var(--ds-text-color-muted);\n  font: inherit;\n}\n\n.ds-overlay [data-ds-overlay=\"footer\"] {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  justify-content: flex-end;\n  gap: calc(var(--ds-unit) / 2);\n  min-height: var(--ds-row-height);\n}\n\n.ds-overlay [data-ds-overlay=\"close\"] {\n  position: absolute;\n  top: var(--ds-unit);\n  right: var(--ds-unit);\n}\n\n/* A field in the frame, as a prompt has: its label one row high, the field\n * one row high beneath it and as wide as the frame, two squares in all. */\n.ds-overlay [data-ds-overlay=\"field\"] {\n  display: flex;\n  flex-direction: column;\n}\n\n.ds-overlay [data-ds-overlay=\"label\"] {\n  min-height: var(--ds-row-height);\n  line-height: var(--ds-row-height);\n}\n\n.ds-overlay [data-ds-overlay=\"field\"] > .ds-input {\n  --ds-input-height: var(--ds-row-height);\n  width: 100%;\n}\n\n/*\n * `.ds-button--primary` and `--secondary` are the element's variants on a\n * native button: a form's submit button stays native so Enter in a field\n * submits the form. `--danger` is its `danger` attribute.\n */\n\n.ds-button--primary,\n.ds-button--secondary {\n  --ds-button-padding: 0 calc(4px * var(--ds-sf));\n}\n\n.ds-button--primary {\n  --ds-button-background: var(--ds-button-background-color-primary);\n  --ds-button-color: var(--ds-button-text-color-on-accent);\n}\n\n.ds-button--secondary {\n  --ds-button-background: var(--ds-button-background-color-secondary);\n}\n\n.ds-button--secondary:hover:not(:disabled, [aria-disabled=\"true\"]) {\n  --ds-button-background: var(--ds-fill-hover);\n}\n\n/* `.ds-button--danger` is the element's `danger`: a destructive action's words\n * in the danger colour, on the secondary face or none. */\n.ds-button--danger {\n  --ds-button-color: var(--ds-danger-color, var(--ds-tuned-red));\n}\n\n/*\n * Words and an icon on one face hug them. A 16 × 16 icon carries about 4px\n * of its own room around its glyph, so beside words it takes no gap and, on a\n * filled face, none of the padding on its side: the glyph stands 4px from the\n * words and 4px from the face's edge, as the words stand from the other edge.\n * The same on every face: `.ds-button`, a slotted `ds-button`, the host face\n * (and the shadow face in ds-button.css). The words are an element beside the\n * icon (`ds-text`, a span); an icon of a product's own is an inline `svg` or\n * marked `data-ds-icon`, and is drawn sixteen square here. A menu's entries\n * keep their gap, so their words line up down the menu.\n */\n:is(.ds-button, ds-button[control=\"slotted\"]:not([menu-item]) > :is(button, a), ds-button[control=\"host\"]:not([menu-item])):not([role=\"option\"], [role^=\"menuitem\"]):has(> :is(ds-icon, .ds-icon, svg, [data-ds-icon]):not(:only-child)) {\n  --ds-button-gap: 0px;\n}\n\n:is(.ds-button, ds-button[control=\"slotted\"] > :is(button, a), ds-button[control=\"host\"]) > :is(svg, [data-ds-icon]):not(:only-child) {\n  flex: 0 0 auto;\n  width: var(--ds-control-height);\n  height: var(--ds-control-height);\n}\n\n:is(.ds-button--primary, .ds-button--secondary, ds-button:is([primary], [secondary])[control=\"slotted\"] > :is(button, a), ds-button:is([primary], [secondary])[control=\"host\"]) > :is(ds-icon, .ds-icon, svg, [data-ds-icon]):last-child:not(:first-child) {\n  margin-inline-end: calc(-4px * var(--ds-sf));\n}\n\n:is(.ds-button--primary, .ds-button--secondary, ds-button:is([primary], [secondary])[control=\"slotted\"] > :is(button, a), ds-button:is([primary], [secondary])[control=\"host\"]) > :is(ds-icon, .ds-icon, svg, [data-ds-icon]):first-child:not(:last-child) {\n  margin-inline-start: calc(-4px * var(--ds-sf));\n}\n\n.ds-button--fixed {\n  width: var(--ds-button-width, calc(4 * var(--ds-unit)));\n}\n\n.ds-button--wide {\n  justify-content: center;\n  width: 100%;\n}\n\n/*\n * `.ds-menu` is the `ds-menu` element's look on a menu a library draws:\n * the context menu's items come from Radix, which owns their roles, focus and\n * keys, so they stay Radix's and take shared's paper, rows and type.\n * On whole squares, as the element: the line and the padding inside it make\n * half a square on each side, entries are one square each with nothing\n * between them, a separator is one square with its line, and there is no\n * shadow. n entries make a menu n + 1 squares high.\n */\n\n.ds-menu {\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: column;\n  gap: 0;\n  min-width: calc(8 * var(--ds-unit));\n  max-width: calc(12 * var(--ds-unit));\n  max-height: var(--ds-menu-max-height, calc(16 * var(--ds-unit)));\n  overflow-y: auto;\n  padding: calc(var(--ds-unit) / 2 - 1px);\n  border: 1px solid var(--ds-border-color);\n  border-radius: var(--ds-radius-card);\n  background: var(--ds-paper);\n  color: var(--ds-text-color);\n  box-shadow: none;\n  font-family: \"Inter Arrows\", var(--ds-typeface-regular);\n  font-feature-settings: var(--ds-font-features);\n  font-size: var(--ds-type-size-default);\n  font-weight: var(--ds-type-weight-default);\n  line-height: var(--ds-type-lineheight-default);\n  letter-spacing: var(--ds-type-letterspacing-default);\n}\n\n.ds-menu__item {\n  position: relative;\n  box-sizing: border-box;\n  display: flex;\n  align-items: center;\n  gap: calc(4px * var(--ds-sf));\n  width: 100%;\n  min-height: var(--ds-row-height);\n  padding: calc(2px * var(--ds-sf)) calc(6px * var(--ds-sf));\n  border-radius: calc(4px * var(--ds-sf));\n  color: var(--ds-text-color);\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: clip;\n  cursor: default;\n  user-select: none;\n  outline: none;\n}\n\n/* Words cut short fade over the entry's last square, never an ellipsis:\n * 0-face/cut-fade.ts marks the entry `data-cut=\"end\"` while they do not fit. */\n.ds-menu__item[data-cut=\"end\"] {\n  mask-image: linear-gradient(to right, #000 calc(100% - var(--ds-unit)), transparent);\n}\n.ds-menu__item[data-cut=\"end\"]:dir(rtl) {\n  mask-image: linear-gradient(to left, #000 calc(100% - var(--ds-unit)), transparent);\n}\n\n/* An entry a library draws as its own button or link is one square high too,\n * whatever that library's button styles say. */\n.ds-menu > :is(button, a, [role=\"option\"], [role^=\"menuitem\"]),\n.ds-menu > [role=\"group\"] > :is(button, a, [role=\"option\"], [role^=\"menuitem\"]) {\n  box-sizing: border-box !important;\n  flex: 0 0 auto !important;\n  height: var(--ds-row-height) !important;\n  min-height: var(--ds-row-height) !important;\n  max-height: var(--ds-row-height) !important;\n  margin-block: 0 !important;\n  padding-block: 0 !important;\n  line-height: var(--ds-type-lineheight-default) !important;\n}\n\n/* A menu item may be a native button: it keeps the row's look, not a button's. */\n:where(button).ds-menu__item {\n  appearance: none;\n  margin: 0;\n  border: 0;\n  background: transparent;\n  font: inherit;\n  letter-spacing: inherit;\n  text-align: start;\n}\n\n.ds-menu__item--inset {\n  padding-left: calc(var(--ds-unit) + calc(4px * var(--ds-sf)));\n}\n\n.ds-menu__item:hover,\n.ds-menu__item:focus-visible,\n.ds-menu__item[data-highlighted] {\n  background: var(--ds-fill);\n}\n\n.ds-menu__item[data-variant=\"destructive\"] {\n  color: var(--ds-danger-color, var(--ds-tuned-red));\n}\n\n.ds-menu__item[data-disabled],\n.ds-menu__item[aria-disabled=\"true\"] {\n  opacity: 0.5;\n  pointer-events: none;\n}\n\n.ds-menu__indicator {\n  position: absolute;\n  left: calc(6px * var(--ds-sf));\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: calc(12px * var(--ds-sf));\n  height: calc(12px * var(--ds-sf));\n  pointer-events: none;\n}\n\n.ds-menu__indicator svg {\n  width: 100%;\n  height: 100%;\n}\n\n.ds-menu__chevron {\n  width: calc(12px * var(--ds-sf));\n  height: calc(12px * var(--ds-sf));\n  margin-left: auto;\n  color: var(--ds-text-color-muted);\n}\n\n.ds-menu__label {\n  box-sizing: border-box;\n  min-height: var(--ds-row-height);\n  padding: calc(2px * var(--ds-sf)) calc(6px * var(--ds-sf));\n  color: var(--ds-title-color);\n  font-size: var(--ds-type-size-small);\n}\n\n.ds-menu__separator {\n  flex: 0 0 auto;\n  height: 1px;\n  /* One square with its line. */\n  margin: calc(var(--ds-unit) / 2 - 1px) calc(6px * var(--ds-sf)) calc(var(--ds-unit) / 2);\n  background: var(--ds-border-color);\n}\n\n.ds-menu__shortcut {\n  margin-left: auto;\n  padding-left: var(--ds-unit);\n  color: var(--ds-title-color);\n  font-size: var(--ds-type-size-small);\n}\n\n/*\n * Pieces the components draw, as classes on native elements: a field's label\n * row, an avatar, a badge, a toggle button, an icon and a file drop zone. Each\n * reads the same tokens as its element, so a page without Lit draws the same\n * look.\n */\n\n/*\n * `.ds-field` is the label row `ds-input` draws, around any native control:\n * the label (`.ds-field__label`) on a one-square line above it, then a hint\n * (`.ds-field__hint`) in the muted ink and an error (`.ds-field__error`) in\n * the danger colour, each on one-square lines. Every row is at least one\n * square high and a control lower than that stands centred on it, so the\n * field keeps to whole squares. `.ds-field--beside` sets the label beside the\n * control, in a column `--ds-field-label-width` wide (four squares), with the\n * hint and the error under the control. An empty hint or error takes no room,\n * so the error can stay in the page as a live region.\n */\n\n.ds-field {\n  box-sizing: border-box;\n  display: grid;\n  grid-template-columns: minmax(0, 1fr);\n  grid-auto-rows: minmax(var(--ds-row-height), auto);\n  align-items: center;\n  justify-items: start;\n  min-width: 0;\n  margin: 0;\n  color: var(--ds-text-color);\n  font-family: \"Inter Arrows\", var(--ds-typeface-regular);\n  font-feature-settings: var(--ds-font-features);\n  font-size: var(--ds-type-size-default);\n  font-weight: var(--ds-type-weight-default);\n  line-height: var(--ds-unit);\n  letter-spacing: var(--ds-type-letterspacing-default);\n}\n\n.ds-field > :is(.ds-input, .ds-select) {\n  justify-self: stretch;\n}\n\n.ds-field__label,\n.ds-field__hint,\n.ds-field__error {\n  display: block;\n  min-width: 0;\n  margin: 0;\n  font: inherit;\n  letter-spacing: inherit;\n}\n\n.ds-field__label {\n  color: var(--ds-field-label-color, var(--ds-text-color));\n}\n\n.ds-field__hint {\n  color: var(--ds-text-color-muted);\n}\n\n.ds-field__error {\n  color: var(--ds-danger-color);\n}\n\n.ds-field__hint:empty,\n.ds-field__error:empty {\n  display: none;\n}\n\n.ds-field--beside {\n  grid-template-columns: var(--ds-field-label-width, calc(4 * var(--ds-unit))) minmax(0, 1fr);\n}\n\n.ds-field--beside > * {\n  grid-column: 2;\n}\n\n.ds-field--beside > .ds-field__label {\n  grid-column: 1;\n  grid-row: 1;\n  align-self: start;\n}\n\n/*\n * `.ds-avatar` is the `ds-avatar` element's mark: round and one control high,\n * an initial in small type on the neutral fill, or an `<img alt=\"\">` after the\n * initial, covering it. While the picture loads the initial shows; remove a\n * picture that fails (`onerror`), as the element does, or the browser draws\n * its broken-image mark. `--large` is two squares with type a square high,\n * `--pair` fits two characters between the hairline edges, `--square` gives it\n * a picture's corners, `--outlined` draws the hairline in its ink and\n * `--pending` greys out someone who has not accepted yet.\n * `--ds-avatar-background` fills it with a colour and `--ds-avatar-color`\n * letters it: on a fill, pick the black or white ink that reads on it\n * (`--ds-black`, `--ds-white`).\n */\n\n.ds-avatar {\n  --ds-avatar-size: var(--ds-control-height);\n  --ds-avatar-pair-type-size: var(--ds-type-size-small);\n  box-sizing: border-box;\n  position: relative;\n  display: inline-grid;\n  place-items: center;\n  flex: 0 0 auto;\n  vertical-align: middle;\n  width: var(--ds-avatar-size);\n  height: var(--ds-avatar-size);\n  overflow: hidden;\n  border-radius: 50%;\n  corner-shape: round;\n  background: var(--ds-avatar-background, var(--ds-fill));\n  color: var(--ds-avatar-color, var(--ds-text-color));\n  font: var(--ds-type-weight-default) var(--ds-type-size-small) / 1 \"Inter Arrows\", var(--ds-typeface-regular);\n  letter-spacing: normal;\n  text-align: center;\n  white-space: nowrap;\n  user-select: none;\n  -webkit-user-select: none;\n}\n\n.ds-avatar > img {\n  position: absolute;\n  inset: 0;\n  display: block;\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n}\n\n.ds-avatar--large {\n  --ds-avatar-size: calc(2 * var(--ds-unit));\n  --ds-avatar-pair-type-size: var(--ds-type-size-default);\n  font-size: var(--ds-unit);\n}\n\n.ds-avatar--pair {\n  font-size: min(var(--ds-avatar-pair-type-size), calc((var(--ds-avatar-size) - 2px) / 2));\n}\n\n.ds-avatar--square {\n  border-radius: var(--ds-avatar-radius, var(--ds-radius));\n  corner-shape: var(--ds-corner-shape, round);\n}\n\n.ds-avatar--outlined::after {\n  content: \"\";\n  position: absolute;\n  inset: 0;\n  border: 1px solid var(--ds-avatar-outline, currentColor);\n  border-radius: inherit;\n  pointer-events: none;\n}\n\n.ds-avatar--pending {\n  background: var(--ds-fill);\n  color: var(--ds-text-color-muted);\n}\n\n.ds-avatar--pending > img {\n  filter: grayscale(1);\n  opacity: 0.5;\n}\n\n/*\n * `.ds-badge` is the `ds-badge` element's status label: one square high on the\n * neutral fill, its words padded 4px, never a button. Words that do not fit\n * are cut, never with an ellipsis: in a `.ds-badge__label` of their own they\n * fade over its last square while marked `data-cut=\"end\"`, the fill staying\n * whole. Where the browser can size to content in calc (calc-size), its width\n * rounds up to whole squares as the element's does; elsewhere it hugs the\n * words. An icon inside is a `.ds-icon` before the words. `--icon` shows the\n * icon alone, one square wide, and keeps the words for assistive technology:\n * put them in an element of their own. `--ds-badge-background` and\n * `--ds-badge-color` give a status a meaningful colour.\n */\n\n.ds-badge {\n  box-sizing: border-box;\n  display: inline-block;\n  flex: 0 0 auto;\n  vertical-align: middle;\n  width: max-content;\n  width: calc-size(max-content, round(up, size, var(--ds-unit)));\n  min-width: var(--ds-row-height);\n  max-width: 100%;\n  height: var(--ds-row-height);\n  padding: 0 calc(4px * var(--ds-sf));\n  overflow: hidden;\n  background: var(--ds-badge-background, var(--ds-fill));\n  color: var(--ds-badge-color, var(--ds-text-color));\n  font-family: \"Inter Arrows\", var(--ds-typeface-regular);\n  font-feature-settings: var(--ds-font-features);\n  font-size: var(--ds-type-size-default);\n  font-weight: var(--ds-type-weight-default);\n  line-height: var(--ds-row-height);\n  letter-spacing: var(--ds-type-letterspacing-default);\n  text-overflow: clip;\n  white-space: nowrap;\n}\n\n.ds-badge__label {\n  display: inline-block;\n  max-width: 100%;\n  overflow: hidden;\n  vertical-align: top;\n  text-overflow: clip;\n  white-space: nowrap;\n}\n.ds-badge__label[data-cut=\"end\"] {\n  mask-image: linear-gradient(to right, #000 calc(100% - var(--ds-unit)), transparent);\n}\n.ds-badge__label[data-cut=\"end\"]:dir(rtl) {\n  mask-image: linear-gradient(to left, #000 calc(100% - var(--ds-unit)), transparent);\n}\n\n.ds-badge > .ds-icon {\n  vertical-align: top;\n  margin-top: calc((var(--ds-row-height) - var(--ds-icon-box, var(--ds-control-height))) / 2);\n  margin-right: calc(4px * var(--ds-sf));\n}\n\n.ds-badge--icon {\n  position: relative;\n  width: var(--ds-row-height);\n  padding: 0;\n  text-align: center;\n}\n\n.ds-badge--icon > .ds-icon {\n  margin-right: 0;\n}\n\n.ds-badge--icon > :not(.ds-icon) {\n  position: absolute;\n  width: 1px;\n  height: 1px;\n  overflow: hidden;\n  clip-path: inset(50%);\n  white-space: nowrap;\n}\n\n/*\n * `.ds-toggle` makes a `.ds-button` a toggle button, `<button aria-pressed>`:\n * the secondary button's grey while it is off, the primary button's accent\n * while it is on, as a chosen segment of `.ds-tabs[role=\"group\"]` is. Its\n * words stay the same in both states; the page toggles `aria-pressed`.\n * A setting that is on or off is a `.ds-switch`; one of several choices is a\n * `.ds-tabs[role=\"group\"]`.\n */\n\n.ds-toggle {\n  --ds-button-padding: 0 calc(4px * var(--ds-sf));\n  --ds-button-background: var(--ds-button-background-color-secondary);\n}\n\n.ds-toggle:hover:not(:disabled, [aria-disabled=\"true\"]) {\n  --ds-button-background: var(--ds-fill-hover);\n}\n\n.ds-toggle[aria-pressed=\"true\"],\n.ds-toggle[aria-pressed=\"true\"]:hover:not(:disabled, [aria-disabled=\"true\"]) {\n  --ds-button-background: var(--ds-button-background-color-primary);\n  --ds-button-color: var(--ds-button-text-color-on-accent);\n}\n\n/*\n * `.ds-icon` is the `ds-icon` element's drawing without the element: a\n * Design system 1 icon file as a mask, painted in the text colour\n * (`--ds-icon-color`), 14px by default, 12px with `--small` and 16px with\n * `--large`, times the scale. `--ds-icon` names the file, as Sync 1's `icons`\n * export copies it: `style=\"--ds-icon: url(icons/close.svg)\"` (a path from the\n * page) or a rule per icon in the page's stylesheet. The mask takes only the\n * drawing's shape, so an icon with colours of its own is an `<img>`. These\n * rules have no specificity: a page that drew its own `.ds-icon` keeps its\n * rule until it removes it.\n */\n\n:where(.ds-icon) {\n  --ds-icon-box: calc(var(--ds-icon-size, 14px) * var(--ds-sf));\n  display: inline-block;\n  flex: 0 0 auto;\n  width: var(--ds-icon-box);\n  height: calc(var(--ds-icon-box) / var(--ds-icon-ratio, 1));\n  color: var(--ds-icon-color, currentColor);\n  background-color: currentColor;\n  -webkit-mask: var(--ds-icon) center / contain no-repeat;\n  mask: var(--ds-icon) center / contain no-repeat;\n}\n\n:where(.ds-icon--small) {\n  --ds-icon-size: 12px;\n}\n\n:where(.ds-icon--large) {\n  --ds-icon-size: 16px;\n}\n\n/*\n * `.ds-flag` is a country's flag from `DS1/x-flag/`, an `<img>` of the file\n * named by its two-letter code in lower case (`x-flag/ie.svg`): 3:2 with\n * corners a quarter of its height (4px at 16) and a hairline in the fill's\n * grey centred on its edge, so a white field keeps its edge on the paper. One\n * control high (16px) and half as wide again, 12px high with `--small`, times\n * the scale; on a line it stands on the sixteen, and words after it start 4px\n * on. In a table's row it stands in the middle of the row instead, as much\n * room above as below. Its `alt` is the country's name, or empty beside the\n * name written out.\n */\n\n:where(.ds-flag) {\n  --ds-flag-box: calc(var(--ds-flag-size, 16px) * var(--ds-sf));\n  display: inline-block;\n  flex: 0 0 auto;\n  box-sizing: border-box;\n  width: calc(var(--ds-flag-box) * 1.5);\n  height: var(--ds-flag-box);\n  margin-inline-end: calc(4px * var(--ds-sf));\n  border-radius: calc(var(--ds-flag-box) / 4);\n  vertical-align: bottom;\n  object-fit: cover;\n  outline: 1px solid var(--ds-fill);\n  outline-offset: -0.5px;\n}\n\n:where(.ds-flag--small) {\n  --ds-flag-size: 12px;\n}\n\n/* The row's foot holds the flag's foot on the sixteen; lifting it half the room left over centres it. */\n:where(.ds-table :is(th, td) .ds-flag) {\n  translate: 0 calc((var(--ds-flag-box) - var(--ds-table-row)) / 2);\n}\n\n/*\n * `.ds-drop` is `ds-file-picker`'s area on a `<label>` around a native\n * `<input type=\"file\">`: the secondary button's face, as wide as its row and\n * eight squares high (`--compact`: four), its words centred in a square of\n * padding. The input covers the zone unseen, so a click, the keyboard and a\n * dropped file all reach it, and the browser keeps labels, forms, `required`,\n * `multiple` and reset. Keyboard focus draws the focus ring. A page that also\n * handles drops on a larger surface sets `data-dragging` on the zone while\n * files are dragged over it, for the ring and the hover fill. A `.ds-button`\n * on a `<span>` inside draws a button face among the words.\n *\n * The same native input directly inside a `label.ds-button` is the file\n * picker's button: the button's face, one square high.\n */\n\n.ds-drop {\n  box-sizing: border-box;\n  position: relative;\n  display: flex;\n  flex-wrap: wrap;\n  align-content: center;\n  align-items: center;\n  justify-content: center;\n  gap: calc(var(--ds-unit) / 2);\n  width: 100%;\n  min-width: 0;\n  height: calc(8 * var(--ds-unit));\n  margin: 0;\n  padding: var(--ds-unit);\n  overflow: hidden;\n  border-radius: var(--ds-radius);\n  corner-shape: var(--ds-corner-shape, round);\n  background: var(--ds-button-background-color-secondary);\n  color: var(--ds-button-text-color);\n  font-family: \"Inter Arrows\", var(--ds-typeface-regular);\n  font-feature-settings: var(--ds-font-features);\n  font-size: var(--ds-type-size-default);\n  font-weight: var(--ds-type-weight-default);\n  line-height: var(--ds-type-lineheight-default);\n  letter-spacing: var(--ds-type-letterspacing-default);\n  text-align: center;\n  cursor: pointer;\n  user-select: none;\n  -webkit-user-select: none;\n  -webkit-tap-highlight-color: transparent;\n}\n\n.ds-drop--compact {\n  height: calc(4 * var(--ds-unit));\n}\n\nlabel.ds-button:has(> input[type=\"file\"]) {\n  --ds-button-height: var(--ds-row-height);\n  position: relative;\n  overflow: hidden;\n}\n\n:is(.ds-drop, label.ds-button) > input[type=\"file\"]:not([hidden]) {\n  position: absolute;\n  inset: 0;\n  box-sizing: border-box;\n  display: block;\n  width: 100%;\n  height: 100%;\n  min-width: 0;\n  margin: 0;\n  padding: 0;\n  border: 0;\n  opacity: 0;\n  cursor: pointer;\n}\n\n:is(.ds-drop, label.ds-button) > input[type=\"file\"]::file-selector-button {\n  cursor: pointer;\n}\n\n.ds-drop:hover:not(:has(> input:disabled)),\n.ds-drop[data-dragging]:not(:has(> input:disabled)) {\n  background: var(--ds-fill-hover);\n}\n\n.ds-drop:has(> input:focus-visible),\n.ds-drop[data-dragging]:not(:has(> input:disabled)),\nlabel.ds-button:has(> input[type=\"file\"]:focus-visible) {\n  outline: 2px solid var(--ds-focus-ring);\n  outline-offset: 1px;\n}\n\n.ds-drop:has(> input:disabled),\nlabel.ds-button:has(> input[type=\"file\"]:disabled) {\n  cursor: default;\n  opacity: 0.5;\n}\n\n:is(.ds-drop, label.ds-button) > input[type=\"file\"]:disabled {\n  cursor: default;\n}\n";
 //#endregion
 //#region DS1/2-core/styles/ds-notice.css?inline
 var ds_notice_default = "/* ds-notice.css */\n/* The element only places the block; 1-root/notice.css draws it and\n   controls.css its dismiss button. */\n\n:host {\n  display: block;\n  min-width: 0;\n}\n\n:host([hidden]),\n[hidden] {\n  display: none !important;\n}\n\n/* The banner is placed by the host; its block then fills the host. */\n:host([banner]),\n:host([form=\"banner\"]) {\n  position: absolute;\n  top: 0;\n  inset-inline: 0;\n  z-index: 9999;\n}\n:host([banner]) .ds-notice--banner,\n:host([form=\"banner\"]) .ds-notice--banner {\n  position: static;\n}\n\n/* The app banner stands in the flow, at the top of the page. */\n:host([form=\"app\"]) {\n  display: block;\n}\n\n/* Slotted words take the notice's lines rather than their own margins. */\n::slotted([slot=\"heading\"]),\n::slotted(:not([slot])) {\n  margin: 0;\n}\n\n/* The app's own picture in the icon slot fills its two squares. */\n::slotted(img[slot=\"icon\"]) {\n  display: block;\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n}\n";
@@ -10885,7 +11166,7 @@ function meterAria(value, min = 0, max = 1, options = {}) {
 }
 //#endregion
 //#region DS1/1-root/figures.css?inline
-var figures_default = "/* Shape is a surface preference. Keep these base lengths unscaled: each\n * component resolves them with its own --ds-sf in component-metrics.css. */\n[data-ds-shape=\"square\"],\n:host([data-ds-shape=\"square\"]) {\n  --ds-corner-size: 0px;\n  --ds-corner-shape: round;\n  --ds-button-inset: 0.5px;\n}\n\n[data-ds-shape=\"rounded\"],\n:host([data-ds-shape=\"rounded\"]) {\n  --ds-corner-size: 4px;\n  --ds-corner-shape: round;\n  --ds-button-inset: 2.5px;\n}\n\n[data-ds-shape=\"circular\"],\n:host([data-ds-shape=\"circular\"]) {\n  --ds-corner-size: 999px;\n  --ds-corner-shape: round;\n  --ds-button-inset: 5px;\n}\n\n/* A squircle needs twice an arc's radius for the same apparent corner.\n * Circular controls keep true semicircles even in a squircle browser. */\n@supports (corner-shape: squircle) {\n  [data-ds-shape=\"rounded\"],\n  :host([data-ds-shape=\"rounded\"]) {\n    --ds-corner-size: 8px;\n    --ds-corner-shape: squircle;\n  }\n}\n/* Resolve dimensions where a component is drawn. Inherited calc() values have\n * already used their ancestor's scale. Base tokens stay unscaled and inherit;\n * resolved tokens can still be overridden directly on a component.\n * data-ds-surface gives ordinary layout elements the same scaled measures.\n */\n:root,\n:host,\n:where([data-ds-surface]) {\n  --ds-unit: calc(var(--ds-1, 20px) * var(--ds-sf, 1));\n  --ds-control-height: calc(var(--ds-control-size, var(--ds-08, 16px)) * var(--ds-sf, 1));\n  --ds-row-height: calc(var(--ds-row-size, var(--ds-1, 20px)) * var(--ds-sf, 1));\n  --ds-type-size-default: calc(var(--ds-text-size, 14px) * var(--ds-sf, 1));\n  --ds-type-size-small: calc(var(--ds-small-text-size, 10px) * var(--ds-sf, 1));\n  --ds-type-size-heading: calc(var(--ds-heading-text-size, 13px) * var(--ds-sf, 1));\n  --ds-type-size-display: calc(var(--ds-display-text-size, 20px) * var(--ds-sf, 1));\n  --ds-type-lineheight-default: calc(var(--ds-text-leading, 16px) * var(--ds-sf, 1));\n  --ds-type-letterspacing-default: calc(var(--ds-text-tracking, -0.3px) * var(--ds-sf, 1));\n  --ds-radius: calc(var(--ds-corner-size, 4px) * var(--ds-sf, 1));\n  --ds-radius-card: calc(var(--ds-card-corner-size, 4px) * var(--ds-sf, 1));\n}\n/*\n * Figures, as plain classes on native elements: a stat and a group of stats.\n * The `ds-stat` element draws the same parts; controls.css imports this\n * file. A value against its range, steps and page dots are `progress.css`.\n *\n * Everything sits on the paper with no box, every line is one square and\n * widths come in whole squares. Colour is kept for a state: the danger colour\n * for a figure that is over.\n *\n * A stat: a label, a figure and a line for its change or caption.\n *\n *   ds-stat                  the block, as wide as its column\n *   ds-stat__label           one line, muted; an icon may lead it on its own square\n *   ds-stat__icon            the square an icon from the library stands on\n *   ds-stat__figure          the figure in tabular numerals, 20 on two squares\n *   ds-stat__digit           one digit in a cell of one width, for a face without tabular numerals\n *   ds-stat__caption         one line, muted, under the figure\n *   ds-stat__change          the change at the start of the caption, in the text colour;\n *                            --danger or --warning where the page knows which way is bad\n *   ds-stat--danger, --warning    the figure in that colour\n *   ds-stats                 a group of stats on whole squares: columns eight\n *                            squares wide, one square between them and between rows\n *   ds-stats[data-frame]     the group in a rounded 1px frame with a 1px line\n *                            between stats, as a framed table: the columns share\n *                            the width, each stat's words 4px in from its lines\n *                            as a framed table's, and a square at its foot, so\n *                            the frame stays whole squares high\n *\n * Tokens: `--ds-stat-size` (the figure's type size before the scale, 20px)\n * and `--ds-stat-lines` (the squares its line takes, 2), `--ds-stat-typeface`\n * (the medium face), `--ds-stat-digit` (a digit cell's width, 1ch),\n * `--ds-stat-change-color`, and `--ds-stats-width` (a column's width in\n * squares, 8).\n *\n */\n\n/* ---- Stat ------------------------------------------------------------ */\n\n.ds-stat {\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n  min-width: 0;\n  margin: 0;\n  color: var(--ds-text-color);\n  font-family: var(--ds-typeface-regular);\n  font-feature-settings: var(--ds-font-features);\n  font-size: var(--ds-type-size-default);\n  font-weight: var(--ds-type-weight-default);\n  line-height: var(--ds-unit);\n  letter-spacing: var(--ds-type-letterspacing-default);\n  text-transform: none;\n}\n\n.ds-stat__label,\n.ds-stat__figure,\n.ds-stat__caption {\n  box-sizing: border-box;\n  max-width: 100%;\n  margin: 0;\n  font: inherit;\n  letter-spacing: inherit;\n}\n\n/* Optional spacing between distinct text groups, independent of line height. */\n.ds-stat__label { margin-block-end: var(--ds-stat-label-gap, 0px); }\n.ds-stat__figure { margin-block-end: var(--ds-stat-figure-gap, 0px); }\n\n.ds-stat__label,\n.ds-stat__caption {\n  display: flex;\n  align-items: flex-start;\n  min-height: var(--ds-unit);\n  color: var(--ds-text-color-muted);\n  overflow-wrap: var(--ds-stat-text-overflow-wrap, anywhere);\n}\n\n.ds-stat__icon {\n  display: inline-flex;\n  flex: none;\n  align-items: center;\n  justify-content: center;\n  width: var(--ds-unit);\n  height: var(--ds-unit);\n}\n\n.ds-stat__figure {\n  display: block;\n  overflow: hidden;\n  font-family: var(--ds-stat-typeface, var(--ds-typeface-medium));\n  font-size: calc(var(--ds-stat-size, var(--ds-display-text-size, 20px)) * var(--ds-sf, 1));\n  font-weight: var(--ds-type-weight-bold);\n  font-variant-numeric: tabular-nums;\n  line-height: calc(var(--ds-stat-lines, 2) * var(--ds-unit));\n  min-height: calc(var(--ds-stat-lines, 2) * var(--ds-unit));\n  letter-spacing: calc(var(--ds-display-text-tracking, -0.4px) * var(--ds-sf, 1));\n  white-space: var(--ds-stat-figure-white-space, nowrap);\n  overflow-wrap: var(--ds-stat-figure-overflow-wrap, normal);\n  text-overflow: clip;\n}\n\n/* A figure too wide for its column fades over its last square, never an ellipsis (0-face/cut-fade.ts marks it). */\n.ds-stat__figure[data-cut=\"end\"] {\n  mask-image: linear-gradient(to right, #000 calc(100% - var(--ds-unit)), transparent);\n}\n.ds-stat__figure[data-cut=\"end\"]:dir(rtl) {\n  mask-image: linear-gradient(to left, #000 calc(100% - var(--ds-unit)), transparent);\n}\n\n.ds-stat__digit {\n  display: inline-block;\n  width: var(--ds-stat-digit, 1ch);\n  text-align: center;\n}\n\n.ds-stat--danger .ds-stat__figure {\n  color: var(--ds-danger-color);\n}\n\n.ds-stat--warning .ds-stat__figure {\n  color: var(--ds-warning-color);\n}\n\n.ds-stat__change {\n  display: inline-flex;\n  flex: none;\n  align-items: center;\n  height: var(--ds-unit);\n  margin-inline-end: calc(4px * var(--ds-sf, 1));\n  color: var(--ds-stat-change-color, var(--ds-text-color));\n  font-variant-numeric: tabular-nums;\n  white-space: nowrap;\n}\n\n.ds-stat__change--danger {\n  --ds-stat-change-color: var(--ds-danger-color);\n}\n\n.ds-stat__change--warning {\n  --ds-stat-change-color: var(--ds-warning-color);\n}\n\n.ds-stats {\n  box-sizing: border-box;\n  display: grid;\n  grid-template-columns: repeat(auto-fill, min(100%, calc(var(--ds-stats-width, 8) * var(--ds-unit))));\n  gap: var(--ds-unit);\n  margin: 0;\n  padding: 0;\n  list-style: none;\n}\n\n.ds-stats[data-frame] {\n  --ds-stats-radius: var(--ds-radius-card, calc(4px * var(--ds-sf, 1)));\n  grid-template-columns: repeat(auto-fit, minmax(min(100%, calc(var(--ds-stats-width, 8) * var(--ds-unit))), 1fr));\n  position: relative;\n  gap: 0;\n  border-radius: var(--ds-stats-radius);\n}\n/* The frame is drawn over the stats, as a framed table's is over its cells. */\n.ds-stats[data-frame]::after {\n  position: absolute;\n  inset: 0;\n  z-index: 1;\n  box-sizing: border-box;\n  border: 1px solid var(--ds-border-color, light-dark(#d8d8d8, #3d3d3d));\n  border-radius: var(--ds-stats-radius);\n  content: \"\";\n  pointer-events: none;\n}\n.ds-stats[data-frame] > * {\n  min-width: 0;\n  padding: 0 calc(4px * var(--ds-sf, 1)) var(--ds-unit);\n}\n.ds-stats[data-frame] > * + * {\n  box-shadow: inset 1px 0 0 var(--ds-border-color, light-dark(#d8d8d8, #3d3d3d));\n}\n.ds-stats[data-frame]:dir(rtl) > * + * {\n  box-shadow: inset -1px 0 0 var(--ds-border-color, light-dark(#d8d8d8, #3d3d3d));\n}\n\n.ds-stats > li {\n  min-width: 0;\n  margin: 0;\n}\n";
+var figures_default = "/* Shape is a surface preference. Keep these base lengths unscaled: each\n * component resolves them with its own --ds-sf in component-metrics.css. */\n[data-ds-shape=\"square\"],\n:host([data-ds-shape=\"square\"]) {\n  --ds-corner-size: 0px;\n  --ds-corner-shape: round;\n  --ds-button-inset: 0.5px;\n}\n\n[data-ds-shape=\"rounded\"],\n:host([data-ds-shape=\"rounded\"]) {\n  --ds-corner-size: 4px;\n  --ds-corner-shape: round;\n  --ds-button-inset: 2.5px;\n}\n\n[data-ds-shape=\"circular\"],\n:host([data-ds-shape=\"circular\"]) {\n  --ds-corner-size: 999px;\n  --ds-corner-shape: round;\n  --ds-button-inset: 5px;\n}\n\n/* A squircle needs twice an arc's radius for the same apparent corner.\n * Circular controls keep true semicircles even in a squircle browser. */\n@supports (corner-shape: squircle) {\n  [data-ds-shape=\"rounded\"],\n  :host([data-ds-shape=\"rounded\"]) {\n    --ds-corner-size: 8px;\n    --ds-corner-shape: squircle;\n  }\n}\n/* Resolve dimensions where a component is drawn. Inherited calc() values have\n * already used their ancestor's scale. Base tokens stay unscaled and inherit;\n * resolved tokens can still be overridden directly on a component.\n * data-ds-surface gives ordinary layout elements the same scaled measures.\n */\n:root,\n:host,\n:where([data-ds-surface]) {\n  --ds-unit: calc(var(--ds-1, 20px) * var(--ds-sf, 1));\n  --ds-control-height: calc(var(--ds-control-size, var(--ds-08, 16px)) * var(--ds-sf, 1));\n  --ds-row-height: calc(var(--ds-row-size, var(--ds-1, 20px)) * var(--ds-sf, 1));\n  --ds-type-size-default: calc(var(--ds-text-size, 14px) * var(--ds-sf, 1));\n  --ds-type-size-small: calc(var(--ds-small-text-size, 10px) * var(--ds-sf, 1));\n  --ds-type-size-heading: calc(var(--ds-heading-text-size, 13px) * var(--ds-sf, 1));\n  --ds-type-size-display: calc(var(--ds-display-text-size, 20px) * var(--ds-sf, 1));\n  --ds-type-lineheight-default: calc(var(--ds-text-leading, 16px) * var(--ds-sf, 1));\n  --ds-type-letterspacing-default: calc(var(--ds-text-tracking, -0.3px) * var(--ds-sf, 1));\n  --ds-radius: calc(var(--ds-corner-size, 4px) * var(--ds-sf, 1));\n  --ds-radius-card: calc(var(--ds-card-corner-size, 4px) * var(--ds-sf, 1));\n}\n/*\n * Figures, as plain classes on native elements: a stat and a group of stats.\n * The `ds-stat` element draws the same parts; controls.css imports this\n * file. A value against its range, steps and page dots are `progress.css`.\n *\n * Everything sits on the paper with no box, every line is one square and\n * widths come in whole squares. Colour is kept for a state: the danger colour\n * for a figure that is over.\n *\n * A stat: a label, a figure and a line for its change or caption.\n *\n *   ds-stat                  the block, as wide as its column\n *   ds-stat__label           one line, muted; an icon may lead it on its own square\n *   ds-stat__icon            the square an icon from the library stands on\n *   ds-stat__figure          the figure in tabular numerals, 20 on two squares\n *   ds-stat__digit           one digit in a cell of one width, for a face without tabular numerals\n *   ds-stat__caption         one line, muted, under the figure\n *   ds-stat__change          the change at the start of the caption, in the text colour;\n *                            --danger or --warning where the page knows which way is bad\n *   ds-stat--danger, --warning    the figure in that colour\n *   ds-stats                 a group of stats on whole squares: columns eight\n *                            squares wide, one square between them and between rows\n *   ds-stats[data-frame]     the group in a rounded 1px frame with a 1px line\n *                            between stats, as a framed table: the columns share\n *                            the width, each stat's words 4px in from its lines\n *                            as a framed table's, and a square at its foot, so\n *                            the frame stays whole squares high\n *\n * Tokens: `--ds-stat-size` (the figure's type size before the scale, 20px)\n * and `--ds-stat-lines` (the squares its line takes, 2), `--ds-stat-typeface`\n * (the medium face), `--ds-stat-digit` (a digit cell's width, 1ch),\n * `--ds-stat-change-color`, and `--ds-stats-width` (a column's width in\n * squares, 8).\n *\n */\n\n/* ---- Stat ------------------------------------------------------------ */\n\n.ds-stat {\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n  min-width: 0;\n  margin: 0;\n  color: var(--ds-text-color);\n  font-family: \"Inter Arrows\", var(--ds-typeface-regular);\n  font-feature-settings: var(--ds-font-features);\n  font-size: var(--ds-type-size-default);\n  font-weight: var(--ds-type-weight-default);\n  line-height: var(--ds-unit);\n  letter-spacing: var(--ds-type-letterspacing-default);\n  text-transform: none;\n}\n\n.ds-stat__label,\n.ds-stat__figure,\n.ds-stat__caption {\n  box-sizing: border-box;\n  max-width: 100%;\n  margin: 0;\n  font: inherit;\n  letter-spacing: inherit;\n}\n\n/* Optional spacing between distinct text groups, independent of line height. */\n.ds-stat__label { margin-block-end: var(--ds-stat-label-gap, 0px); }\n.ds-stat__figure { margin-block-end: var(--ds-stat-figure-gap, 0px); }\n\n.ds-stat__label,\n.ds-stat__caption {\n  display: flex;\n  align-items: flex-start;\n  min-height: var(--ds-unit);\n  color: var(--ds-text-color-muted);\n  overflow-wrap: var(--ds-stat-text-overflow-wrap, anywhere);\n}\n\n.ds-stat__icon {\n  display: inline-flex;\n  flex: none;\n  align-items: center;\n  justify-content: center;\n  width: var(--ds-unit);\n  height: var(--ds-unit);\n}\n\n.ds-stat__figure {\n  display: block;\n  overflow: hidden;\n  font-family: \"Inter Arrows\", var(--ds-stat-typeface, var(--ds-typeface-medium));\n  font-size: calc(var(--ds-stat-size, var(--ds-display-text-size, 20px)) * var(--ds-sf, 1));\n  font-weight: var(--ds-type-weight-bold);\n  font-variant-numeric: tabular-nums;\n  line-height: calc(var(--ds-stat-lines, 2) * var(--ds-unit));\n  min-height: calc(var(--ds-stat-lines, 2) * var(--ds-unit));\n  letter-spacing: calc(var(--ds-display-text-tracking, -0.4px) * var(--ds-sf, 1));\n  white-space: var(--ds-stat-figure-white-space, nowrap);\n  overflow-wrap: var(--ds-stat-figure-overflow-wrap, normal);\n  text-overflow: clip;\n}\n\n/* A figure too wide for its column fades over its last square, never an ellipsis (0-face/cut-fade.ts marks it). */\n.ds-stat__figure[data-cut=\"end\"] {\n  mask-image: linear-gradient(to right, #000 calc(100% - var(--ds-unit)), transparent);\n}\n.ds-stat__figure[data-cut=\"end\"]:dir(rtl) {\n  mask-image: linear-gradient(to left, #000 calc(100% - var(--ds-unit)), transparent);\n}\n\n.ds-stat__digit {\n  display: inline-block;\n  width: var(--ds-stat-digit, 1ch);\n  text-align: center;\n}\n\n.ds-stat--danger .ds-stat__figure {\n  color: var(--ds-danger-color);\n}\n\n.ds-stat--warning .ds-stat__figure {\n  color: var(--ds-warning-color);\n}\n\n.ds-stat__change {\n  display: inline-flex;\n  flex: none;\n  align-items: center;\n  height: var(--ds-unit);\n  margin-inline-end: calc(4px * var(--ds-sf, 1));\n  color: var(--ds-stat-change-color, var(--ds-text-color));\n  font-variant-numeric: tabular-nums;\n  white-space: nowrap;\n}\n\n.ds-stat__change--danger {\n  --ds-stat-change-color: var(--ds-danger-color);\n}\n\n.ds-stat__change--warning {\n  --ds-stat-change-color: var(--ds-warning-color);\n}\n\n.ds-stats {\n  box-sizing: border-box;\n  display: grid;\n  grid-template-columns: repeat(auto-fill, min(100%, calc(var(--ds-stats-width, 8) * var(--ds-unit))));\n  gap: var(--ds-unit);\n  margin: 0;\n  padding: 0;\n  list-style: none;\n}\n\n.ds-stats[data-frame] {\n  --ds-stats-radius: var(--ds-radius-card, calc(4px * var(--ds-sf, 1)));\n  grid-template-columns: repeat(auto-fit, minmax(min(100%, calc(var(--ds-stats-width, 8) * var(--ds-unit))), 1fr));\n  position: relative;\n  gap: 0;\n  border-radius: var(--ds-stats-radius);\n}\n/* The frame is drawn over the stats, as a framed table's is over its cells. */\n.ds-stats[data-frame]::after {\n  position: absolute;\n  inset: 0;\n  z-index: 1;\n  box-sizing: border-box;\n  border: 1px solid var(--ds-border-color, light-dark(#d8d8d8, #3d3d3d));\n  border-radius: var(--ds-stats-radius);\n  content: \"\";\n  pointer-events: none;\n}\n.ds-stats[data-frame] > * {\n  min-width: 0;\n  padding: 0 calc(4px * var(--ds-sf, 1)) var(--ds-unit);\n}\n.ds-stats[data-frame] > * + * {\n  box-shadow: inset 1px 0 0 var(--ds-border-color, light-dark(#d8d8d8, #3d3d3d));\n}\n.ds-stats[data-frame]:dir(rtl) > * + * {\n  box-shadow: inset -1px 0 0 var(--ds-border-color, light-dark(#d8d8d8, #3d3d3d));\n}\n\n.ds-stats > li {\n  min-width: 0;\n  margin: 0;\n}\n";
 //#endregion
 //#region DS1/2-core/styles/ds-stat.css?inline
 var ds_stat_default = "/* ds-stat.css */\n/* The element only places the block; 1-root/figures.css draws it. */\n\n:host {\n  display: block;\n  min-width: 0;\n}\n\n:host([hidden]),\n[hidden] {\n  display: none !important;\n}\n\n/* Slotted words take the stat's lines rather than their own margins. */\n::slotted([slot]) {\n  margin: 0;\n}\n\n/* What stands between the figure and the caption, a meter say, takes the\n   stat's width. */\n::slotted(:not([slot])) {\n  align-self: stretch;\n  margin: 0;\n}\n\n/* The figure read whole when its digits are drawn in cells. */\n.hidden-words {\n  position: absolute;\n  width: 1px;\n  height: 1px;\n  overflow: hidden;\n  clip-path: inset(50%);\n  white-space: nowrap;\n}\n";
@@ -11379,7 +11660,7 @@ function driveCarousel(block, track, holder, options = {}) {
 }
 //#endregion
 //#region DS1/1-root/progress.css?inline
-var progress_default = "/* Shape is a surface preference. Keep these base lengths unscaled: each\n * component resolves them with its own --ds-sf in component-metrics.css. */\n[data-ds-shape=\"square\"],\n:host([data-ds-shape=\"square\"]) {\n  --ds-corner-size: 0px;\n  --ds-corner-shape: round;\n  --ds-button-inset: 0.5px;\n}\n\n[data-ds-shape=\"rounded\"],\n:host([data-ds-shape=\"rounded\"]) {\n  --ds-corner-size: 4px;\n  --ds-corner-shape: round;\n  --ds-button-inset: 2.5px;\n}\n\n[data-ds-shape=\"circular\"],\n:host([data-ds-shape=\"circular\"]) {\n  --ds-corner-size: 999px;\n  --ds-corner-shape: round;\n  --ds-button-inset: 5px;\n}\n\n/* A squircle needs twice an arc's radius for the same apparent corner.\n * Circular controls keep true semicircles even in a squircle browser. */\n@supports (corner-shape: squircle) {\n  [data-ds-shape=\"rounded\"],\n  :host([data-ds-shape=\"rounded\"]) {\n    --ds-corner-size: 8px;\n    --ds-corner-shape: squircle;\n  }\n}\n/* Resolve dimensions where a component is drawn. Inherited calc() values have\n * already used their ancestor's scale. Base tokens stay unscaled and inherit;\n * resolved tokens can still be overridden directly on a component.\n * data-ds-surface gives ordinary layout elements the same scaled measures.\n */\n:root,\n:host,\n:where([data-ds-surface]) {\n  --ds-unit: calc(var(--ds-1, 20px) * var(--ds-sf, 1));\n  --ds-control-height: calc(var(--ds-control-size, var(--ds-08, 16px)) * var(--ds-sf, 1));\n  --ds-row-height: calc(var(--ds-row-size, var(--ds-1, 20px)) * var(--ds-sf, 1));\n  --ds-type-size-default: calc(var(--ds-text-size, 14px) * var(--ds-sf, 1));\n  --ds-type-size-small: calc(var(--ds-small-text-size, 10px) * var(--ds-sf, 1));\n  --ds-type-size-heading: calc(var(--ds-heading-text-size, 13px) * var(--ds-sf, 1));\n  --ds-type-size-display: calc(var(--ds-display-text-size, 20px) * var(--ds-sf, 1));\n  --ds-type-lineheight-default: calc(var(--ds-text-leading, 16px) * var(--ds-sf, 1));\n  --ds-type-letterspacing-default: calc(var(--ds-text-tracking, -0.3px) * var(--ds-sf, 1));\n  --ds-radius: calc(var(--ds-corner-size, 4px) * var(--ds-sf, 1));\n  --ds-radius-card: calc(var(--ds-card-corner-size, 4px) * var(--ds-sf, 1));\n}\n/*\n * Progress, as plain classes on native elements: a value against its range,\n * a sequence of steps, or a dot for each page. The `ds-progress` element\n * draws the same parts; controls.css imports this file.\n *\n * Everything sits on the paper with no box, every line is one square and\n * widths come in whole squares. Colour is kept for a state: the danger colour\n * for a value that is over or a step that failed, the ink for the current\n * step and the current dot.\n *\n * A value against its range, one square high (HTML's <progress>):\n *\n *   ds-progress              the row; role=\"meter\" with aria-valuenow, -min, -max and -valuetext\n *   ds-progress__fill        the bar, half a square high, drawn to --ds-progress-value (0 to 1)\n *   ds-progress--squares     the range in squares instead, each one square\n *   ds-progress__square      one square of the range; --on when it is filled\n *   ds-progress--over        past the end: filled whole in the danger colour\n *\n * Tokens: `--ds-progress-value`, `--ds-progress-color` (the ink by default)\n * and `--ds-progress-track` (the grey fill).\n *\n * A sequence of steps, one square high, each step on whole squares:\n *\n *   ds-progress--steps       with ds-progress, on an <ol>; the steps on one row, joined by a line\n *   ds-progress--vertical    one step to a row, each with room for its body under it\n *   ds-progress__step        an <li>; aria-current=\"step\" on the current one\n *   ds-progress__step--done, --current, --failed    states; upcoming without one\n *   ds-progress__link        a step that goes somewhere: an <a href> around its mark and label\n *   ds-progress__mark        the number (or the done or failed icon), one control high\n *   ds-progress__label       the step's name on one line\n *   ds-progress__state       the state in words for assistive technology, hidden (\"Done\")\n *   ds-progress__body        what belongs under a step in a vertical sequence\n *\n * A dot for each page, one square each:\n *\n *   ds-progress--dots        with ds-progress, a group of dots (role=\"group\")\n *   ds-progress__dot         a button; `data-state` is `past`, `current` (with\n *                            `aria-current=\"true\"`), `next`, `future`, or `end` for a\n *                            last dot marked as an end\n *\n * Tokens: the dot colours `--ds-progress-dot-past` and `-future` (the muted\n * text colour by default), `-current`, `-next` and `-end` (the text colour),\n * set on the dots or any element around them. Past, current and next dots are\n * filled; future dots and the end marker are rings.\n */\n\n/* ---- A value against its range: the bar, or the range in squares ---- */\n\n.ds-progress {\n  box-sizing: border-box;\n  position: relative;\n  display: block;\n  width: 100%;\n  height: var(--ds-unit);\n  margin: 0;\n}\n\n/* The range and its bar are a band half a square high across the middle of\n   the row, as a chart's ratio is drawn. */\n.ds-progress:not(.ds-progress--squares, .ds-progress--steps, .ds-progress--dots)::before,\n.ds-progress__fill {\n  position: absolute;\n  inset-inline: 0;\n  top: calc(var(--ds-unit) / 4);\n  height: calc(var(--ds-unit) / 2);\n}\n\n.ds-progress:not(.ds-progress--squares, .ds-progress--steps, .ds-progress--dots)::before {\n  content: \"\";\n  background: var(--ds-progress-track, var(--ds-fill));\n}\n\n.ds-progress__fill {\n  display: block;\n  background: var(--ds-progress-color, var(--ds-text-color));\n  transform: scaleX(var(--ds-progress-value, 0));\n  transform-origin: left center;\n  transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);\n}\n\n.ds-progress__fill:dir(rtl) {\n  transform-origin: right center;\n}\n\n.ds-progress--over .ds-progress__fill {\n  background: var(--ds-danger-color);\n  transform: none;\n}\n\n.ds-progress--squares {\n  display: flex;\n  width: max-content;\n  max-width: 100%;\n  overflow: hidden;\n}\n\n.ds-progress__square {\n  flex: none;\n  width: calc(var(--ds-unit) - 1px);\n  height: calc(var(--ds-unit) - 1px);\n  margin-inline-end: 1px;\n  background: var(--ds-progress-track, var(--ds-fill));\n}\n\n.ds-progress__square--on {\n  background: var(--ds-progress-color, var(--ds-text-color));\n}\n\n.ds-progress--over .ds-progress__square {\n  background: var(--ds-danger-color);\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .ds-progress__fill {\n    transition: none;\n  }\n}\n\n/* ---- A sequence of steps --------------------------------------------- */\n\n.ds-progress--steps {\n  box-sizing: border-box;\n  position: static;\n  display: flex;\n  width: auto;\n  height: auto;\n  flex-wrap: wrap;\n  align-items: flex-start;\n  min-width: 0;\n  margin: 0;\n  padding: 0;\n  list-style: none;\n  color: var(--ds-text-color);\n  font-family: var(--ds-typeface-regular);\n  font-feature-settings: var(--ds-font-features);\n  font-size: var(--ds-type-size-default);\n  font-weight: var(--ds-type-weight-default);\n  line-height: var(--ds-unit);\n  letter-spacing: var(--ds-type-letterspacing-default);\n  text-transform: none;\n}\n\n/* Each step rounds its width up to whole squares where the browser can size\n   to content in calc; elsewhere it hugs its words. */\n.ds-progress__step {\n  --ds-progress-mark: transparent;\n  --ds-progress-mark-ink: var(--ds-text-color-muted);\n  --ds-progress-mark-line: var(--ds-border-color);\n  box-sizing: border-box;\n  position: relative;\n  display: flex;\n  align-items: flex-start;\n  min-width: 0;\n  max-width: 100%;\n  width: max-content;\n  width: calc-size(max-content, round(up, size, var(--ds-unit)));\n  min-height: var(--ds-unit);\n  margin: 0;\n  color: var(--ds-text-color-muted);\n}\n\n/* A line joins a step to the next: at least one square, across whatever the\n   step's rounding leaves, a quarter of a square short of each end. */\n.ds-progress__step:not(:last-child)::after {\n  content: \"\";\n  flex: 1 0 var(--ds-unit);\n  height: var(--ds-unit);\n  background: linear-gradient(var(--ds-border-color), var(--ds-border-color)) center / calc(100% - var(--ds-unit) / 2) 1px no-repeat;\n}\n\n.ds-progress__step--done {\n  --ds-progress-mark: var(--ds-fill);\n  --ds-progress-mark-ink: var(--ds-text-color);\n  --ds-progress-mark-line: transparent;\n  color: var(--ds-text-color);\n}\n\n.ds-progress__step--current {\n  --ds-progress-mark: var(--ds-text-color);\n  --ds-progress-mark-ink: var(--ds-paper);\n  --ds-progress-mark-line: transparent;\n  color: var(--ds-text-color);\n}\n\n.ds-progress__step--failed {\n  --ds-progress-mark: var(--ds-danger-color);\n  --ds-progress-mark-ink: light-dark(var(--ds-white), var(--ds-black));\n  --ds-progress-mark-line: transparent;\n  color: var(--ds-danger-color);\n}\n\n.ds-progress__link {\n  display: flex;\n  align-items: flex-start;\n  min-width: 0;\n  color: inherit;\n  text-decoration: none;\n  border-radius: var(--ds-radius);\n}\n\n.ds-progress__link:hover .ds-progress__label {\n  text-decoration: underline;\n  text-decoration-thickness: 1px;\n  text-underline-offset: calc(3px * var(--ds-sf, 1));\n}\n\n.ds-progress__link:focus-visible {\n  outline: 2px solid var(--ds-focus-ring);\n  outline-offset: -2px;\n}\n\n.ds-progress__mark {\n  box-sizing: border-box;\n  display: flex;\n  flex: none;\n  align-items: center;\n  justify-content: center;\n  width: var(--ds-control-height);\n  height: var(--ds-control-height);\n  margin: calc((var(--ds-unit) - var(--ds-control-height)) / 2);\n  overflow: hidden;\n  background: var(--ds-progress-mark);\n  box-shadow: inset 0 0 0 1px var(--ds-progress-mark-line);\n  color: var(--ds-progress-mark-ink);\n  --ds-icon-color: var(--ds-progress-mark-ink);\n  font-family: var(--ds-typeface-medium);\n  font-size: var(--ds-type-size-small);\n  font-weight: var(--ds-type-weight-bold);\n  font-variant-numeric: tabular-nums;\n  line-height: var(--ds-control-height);\n  letter-spacing: 0;\n}\n\n.ds-progress__label {\n  min-width: 0;\n  padding-inline-end: calc(4px * var(--ds-sf, 1));\n  overflow: hidden;\n  white-space: nowrap;\n  text-overflow: clip;\n}\n\n/* A cut step name fades over its last square, never an ellipsis (0-face/cut-fade.ts marks it). */\n.ds-progress__label[data-cut=\"end\"] {\n  mask-image: linear-gradient(to right, #000 calc(100% - var(--ds-unit)), transparent);\n}\n.ds-progress__label[data-cut=\"end\"]:dir(rtl) {\n  mask-image: linear-gradient(to left, #000 calc(100% - var(--ds-unit)), transparent);\n}\n\n.ds-progress__step--current .ds-progress__label {\n  font-family: var(--ds-typeface-medium);\n  font-weight: var(--ds-type-weight-bold);\n}\n\n.ds-progress__state {\n  position: absolute;\n  width: 1px;\n  height: 1px;\n  overflow: hidden;\n  clip-path: inset(50%);\n  white-space: nowrap;\n}\n\n.ds-progress--vertical {\n  flex-direction: column;\n  flex-wrap: nowrap;\n}\n\n.ds-progress--vertical .ds-progress__step {\n  flex-wrap: wrap;\n  width: 100%;\n}\n\n.ds-progress--vertical .ds-progress__step::after {\n  content: none;\n}\n\n/* Its content stands in a column, so an inline element in it (text drawn by\n   an element, say) takes its own lines rather than a line box's descent. */\n.ds-progress__body {\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: column;\n  flex: 1 0 100%;\n  min-width: 0;\n  padding-inline-start: var(--ds-unit);\n  color: var(--ds-text-color);\n}\n\n/* ---- A dot for each page ------------------------------------------- */\n\n.ds-progress--dots {\n  position: static;\n  display: inline-flex;\n  width: auto;\n  flex: none;\n  align-items: center;\n  height: var(--ds-row-height);\n  margin: 0;\n  padding: 0;\n}\n\n.ds-progress__dot {\n  --ds-progress-dot-color: var(--ds-progress-dot-future, var(--ds-text-color-muted));\n  appearance: none;\n  box-sizing: border-box;\n  display: inline-flex;\n  flex: none;\n  align-items: center;\n  justify-content: center;\n  width: var(--ds-unit);\n  height: var(--ds-unit);\n  margin: 0;\n  padding: 0;\n  border: 0;\n  border-radius: var(--ds-radius);\n  background: transparent;\n  color: inherit;\n  cursor: pointer;\n  -webkit-tap-highlight-color: transparent;\n}\n\n/* The dot itself: 4px, scaled with the surface, a fifth of the square. */\n.ds-progress__dot::before {\n  content: \"\";\n  box-sizing: border-box;\n  width: calc(4px * var(--ds-sf, 1));\n  height: calc(4px * var(--ds-sf, 1));\n  border-radius: 50%;\n  background: transparent;\n  box-shadow: inset 0 0 0 1px var(--ds-progress-dot-color);\n  transition: transform 160ms ease-out;\n}\n\n.ds-progress__dot[data-state=\"past\"] { --ds-progress-dot-color: var(--ds-progress-dot-past, var(--ds-text-color-muted)); }\n.ds-progress__dot[data-state=\"next\"] { --ds-progress-dot-color: var(--ds-progress-dot-next, var(--ds-text-color)); }\n.ds-progress__dot[data-state=\"end\"] { --ds-progress-dot-color: var(--ds-progress-dot-end, var(--ds-text-color)); }\n.ds-progress__dot[aria-current=\"true\"] { --ds-progress-dot-color: var(--ds-progress-dot-current, var(--ds-text-color)); }\n\n.ds-progress__dot:is([data-state=\"past\"], [data-state=\"next\"], [aria-current=\"true\"])::before {\n  background: var(--ds-progress-dot-color);\n}\n\n/* The current dot is half again as large. */\n.ds-progress__dot[aria-current=\"true\"]::before {\n  transform: scale(1.5);\n}\n\n.ds-progress__dot:hover:not([aria-current=\"true\"])::before {\n  transform: scale(1.25);\n}\n\n.ds-progress__dot:focus-visible {\n  outline: 2px solid var(--ds-focus-ring);\n  outline-offset: -2px;\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .ds-progress__dot::before {\n    transition: none;\n  }\n}\n";
+var progress_default = "/* Shape is a surface preference. Keep these base lengths unscaled: each\n * component resolves them with its own --ds-sf in component-metrics.css. */\n[data-ds-shape=\"square\"],\n:host([data-ds-shape=\"square\"]) {\n  --ds-corner-size: 0px;\n  --ds-corner-shape: round;\n  --ds-button-inset: 0.5px;\n}\n\n[data-ds-shape=\"rounded\"],\n:host([data-ds-shape=\"rounded\"]) {\n  --ds-corner-size: 4px;\n  --ds-corner-shape: round;\n  --ds-button-inset: 2.5px;\n}\n\n[data-ds-shape=\"circular\"],\n:host([data-ds-shape=\"circular\"]) {\n  --ds-corner-size: 999px;\n  --ds-corner-shape: round;\n  --ds-button-inset: 5px;\n}\n\n/* A squircle needs twice an arc's radius for the same apparent corner.\n * Circular controls keep true semicircles even in a squircle browser. */\n@supports (corner-shape: squircle) {\n  [data-ds-shape=\"rounded\"],\n  :host([data-ds-shape=\"rounded\"]) {\n    --ds-corner-size: 8px;\n    --ds-corner-shape: squircle;\n  }\n}\n/* Resolve dimensions where a component is drawn. Inherited calc() values have\n * already used their ancestor's scale. Base tokens stay unscaled and inherit;\n * resolved tokens can still be overridden directly on a component.\n * data-ds-surface gives ordinary layout elements the same scaled measures.\n */\n:root,\n:host,\n:where([data-ds-surface]) {\n  --ds-unit: calc(var(--ds-1, 20px) * var(--ds-sf, 1));\n  --ds-control-height: calc(var(--ds-control-size, var(--ds-08, 16px)) * var(--ds-sf, 1));\n  --ds-row-height: calc(var(--ds-row-size, var(--ds-1, 20px)) * var(--ds-sf, 1));\n  --ds-type-size-default: calc(var(--ds-text-size, 14px) * var(--ds-sf, 1));\n  --ds-type-size-small: calc(var(--ds-small-text-size, 10px) * var(--ds-sf, 1));\n  --ds-type-size-heading: calc(var(--ds-heading-text-size, 13px) * var(--ds-sf, 1));\n  --ds-type-size-display: calc(var(--ds-display-text-size, 20px) * var(--ds-sf, 1));\n  --ds-type-lineheight-default: calc(var(--ds-text-leading, 16px) * var(--ds-sf, 1));\n  --ds-type-letterspacing-default: calc(var(--ds-text-tracking, -0.3px) * var(--ds-sf, 1));\n  --ds-radius: calc(var(--ds-corner-size, 4px) * var(--ds-sf, 1));\n  --ds-radius-card: calc(var(--ds-card-corner-size, 4px) * var(--ds-sf, 1));\n}\n/*\n * Progress, as plain classes on native elements: a value against its range,\n * a sequence of steps, or a dot for each page. The `ds-progress` element\n * draws the same parts; controls.css imports this file.\n *\n * Everything sits on the paper with no box, every line is one square and\n * widths come in whole squares. Colour is kept for a state: the danger colour\n * for a value that is over or a step that failed, the ink for the current\n * step and the current dot.\n *\n * A value against its range, one square high (HTML's <progress>):\n *\n *   ds-progress              the row; role=\"meter\" with aria-valuenow, -min, -max and -valuetext\n *   ds-progress__fill        the bar, half a square high, drawn to --ds-progress-value (0 to 1)\n *   ds-progress--squares     the range in squares instead, each one square\n *   ds-progress__square      one square of the range; --on when it is filled\n *   ds-progress--over        past the end: filled whole in the danger colour\n *\n * Tokens: `--ds-progress-value`, `--ds-progress-color` (the ink by default)\n * and `--ds-progress-track` (the grey fill).\n *\n * A sequence of steps, one square high, each step on whole squares:\n *\n *   ds-progress--steps       with ds-progress, on an <ol>; the steps on one row, joined by a line\n *   ds-progress--vertical    one step to a row, each with room for its body under it\n *   ds-progress__step        an <li>; aria-current=\"step\" on the current one\n *   ds-progress__step--done, --current, --failed    states; upcoming without one\n *   ds-progress__link        a step that goes somewhere: an <a href> around its mark and label\n *   ds-progress__mark        the number (or the done or failed icon), one control high\n *   ds-progress__label       the step's name on one line\n *   ds-progress__state       the state in words for assistive technology, hidden (\"Done\")\n *   ds-progress__body        what belongs under a step in a vertical sequence\n *\n * A dot for each page, one square each:\n *\n *   ds-progress--dots        with ds-progress, a group of dots (role=\"group\")\n *   ds-progress__dot         a button; `data-state` is `past`, `current` (with\n *                            `aria-current=\"true\"`), `next`, `future`, or `end` for a\n *                            last dot marked as an end\n *\n * Tokens: the dot colours `--ds-progress-dot-past` and `-future` (the muted\n * text colour by default), `-current`, `-next` and `-end` (the text colour),\n * set on the dots or any element around them. Past, current and next dots are\n * filled; future dots and the end marker are rings.\n */\n\n/* ---- A value against its range: the bar, or the range in squares ---- */\n\n.ds-progress {\n  box-sizing: border-box;\n  position: relative;\n  display: block;\n  width: 100%;\n  height: var(--ds-unit);\n  margin: 0;\n}\n\n/* The range and its bar are a band half a square high across the middle of\n   the row, as a chart's ratio is drawn. */\n.ds-progress:not(.ds-progress--squares, .ds-progress--steps, .ds-progress--dots)::before,\n.ds-progress__fill {\n  position: absolute;\n  inset-inline: 0;\n  top: calc(var(--ds-unit) / 4);\n  height: calc(var(--ds-unit) / 2);\n}\n\n.ds-progress:not(.ds-progress--squares, .ds-progress--steps, .ds-progress--dots)::before {\n  content: \"\";\n  background: var(--ds-progress-track, var(--ds-fill));\n}\n\n.ds-progress__fill {\n  display: block;\n  background: var(--ds-progress-color, var(--ds-text-color));\n  transform: scaleX(var(--ds-progress-value, 0));\n  transform-origin: left center;\n  transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);\n}\n\n.ds-progress__fill:dir(rtl) {\n  transform-origin: right center;\n}\n\n.ds-progress--over .ds-progress__fill {\n  background: var(--ds-danger-color);\n  transform: none;\n}\n\n.ds-progress--squares {\n  display: flex;\n  width: max-content;\n  max-width: 100%;\n  overflow: hidden;\n}\n\n.ds-progress__square {\n  flex: none;\n  width: calc(var(--ds-unit) - 1px);\n  height: calc(var(--ds-unit) - 1px);\n  margin-inline-end: 1px;\n  background: var(--ds-progress-track, var(--ds-fill));\n}\n\n.ds-progress__square--on {\n  background: var(--ds-progress-color, var(--ds-text-color));\n}\n\n.ds-progress--over .ds-progress__square {\n  background: var(--ds-danger-color);\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .ds-progress__fill {\n    transition: none;\n  }\n}\n\n/* ---- A sequence of steps --------------------------------------------- */\n\n.ds-progress--steps {\n  box-sizing: border-box;\n  position: static;\n  display: flex;\n  width: auto;\n  height: auto;\n  flex-wrap: wrap;\n  align-items: flex-start;\n  min-width: 0;\n  margin: 0;\n  padding: 0;\n  list-style: none;\n  color: var(--ds-text-color);\n  font-family: \"Inter Arrows\", var(--ds-typeface-regular);\n  font-feature-settings: var(--ds-font-features);\n  font-size: var(--ds-type-size-default);\n  font-weight: var(--ds-type-weight-default);\n  line-height: var(--ds-unit);\n  letter-spacing: var(--ds-type-letterspacing-default);\n  text-transform: none;\n}\n\n/* Each step rounds its width up to whole squares where the browser can size\n   to content in calc; elsewhere it hugs its words. */\n.ds-progress__step {\n  --ds-progress-mark: transparent;\n  --ds-progress-mark-ink: var(--ds-text-color-muted);\n  --ds-progress-mark-line: var(--ds-border-color);\n  box-sizing: border-box;\n  position: relative;\n  display: flex;\n  align-items: flex-start;\n  min-width: 0;\n  max-width: 100%;\n  width: max-content;\n  width: calc-size(max-content, round(up, size, var(--ds-unit)));\n  min-height: var(--ds-unit);\n  margin: 0;\n  color: var(--ds-text-color-muted);\n}\n\n/* A line joins a step to the next: at least one square, across whatever the\n   step's rounding leaves, a quarter of a square short of each end. */\n.ds-progress__step:not(:last-child)::after {\n  content: \"\";\n  flex: 1 0 var(--ds-unit);\n  height: var(--ds-unit);\n  background: linear-gradient(var(--ds-border-color), var(--ds-border-color)) center / calc(100% - var(--ds-unit) / 2) 1px no-repeat;\n}\n\n.ds-progress__step--done {\n  --ds-progress-mark: var(--ds-fill);\n  --ds-progress-mark-ink: var(--ds-text-color);\n  --ds-progress-mark-line: transparent;\n  color: var(--ds-text-color);\n}\n\n.ds-progress__step--current {\n  --ds-progress-mark: var(--ds-text-color);\n  --ds-progress-mark-ink: var(--ds-paper);\n  --ds-progress-mark-line: transparent;\n  color: var(--ds-text-color);\n}\n\n.ds-progress__step--failed {\n  --ds-progress-mark: var(--ds-danger-color);\n  --ds-progress-mark-ink: light-dark(var(--ds-white), var(--ds-black));\n  --ds-progress-mark-line: transparent;\n  color: var(--ds-danger-color);\n}\n\n.ds-progress__link {\n  display: flex;\n  align-items: flex-start;\n  min-width: 0;\n  color: inherit;\n  text-decoration: none;\n  border-radius: var(--ds-radius);\n}\n\n.ds-progress__link:hover .ds-progress__label {\n  text-decoration: underline;\n  text-decoration-thickness: 1px;\n  text-underline-offset: calc(3px * var(--ds-sf, 1));\n}\n\n.ds-progress__link:focus-visible {\n  outline: 2px solid var(--ds-focus-ring);\n  outline-offset: -2px;\n}\n\n.ds-progress__mark {\n  box-sizing: border-box;\n  display: flex;\n  flex: none;\n  align-items: center;\n  justify-content: center;\n  width: var(--ds-control-height);\n  height: var(--ds-control-height);\n  margin: calc((var(--ds-unit) - var(--ds-control-height)) / 2);\n  overflow: hidden;\n  background: var(--ds-progress-mark);\n  box-shadow: inset 0 0 0 1px var(--ds-progress-mark-line);\n  color: var(--ds-progress-mark-ink);\n  --ds-icon-color: var(--ds-progress-mark-ink);\n  font-family: \"Inter Arrows\", var(--ds-typeface-medium);\n  font-size: var(--ds-type-size-small);\n  font-weight: var(--ds-type-weight-bold);\n  font-variant-numeric: tabular-nums;\n  line-height: var(--ds-control-height);\n  letter-spacing: 0;\n}\n\n.ds-progress__label {\n  min-width: 0;\n  padding-inline-end: calc(4px * var(--ds-sf, 1));\n  overflow: hidden;\n  white-space: nowrap;\n  text-overflow: clip;\n}\n\n/* A cut step name fades over its last square, never an ellipsis (0-face/cut-fade.ts marks it). */\n.ds-progress__label[data-cut=\"end\"] {\n  mask-image: linear-gradient(to right, #000 calc(100% - var(--ds-unit)), transparent);\n}\n.ds-progress__label[data-cut=\"end\"]:dir(rtl) {\n  mask-image: linear-gradient(to left, #000 calc(100% - var(--ds-unit)), transparent);\n}\n\n.ds-progress__step--current .ds-progress__label {\n  font-family: \"Inter Arrows\", var(--ds-typeface-medium);\n  font-weight: var(--ds-type-weight-bold);\n}\n\n.ds-progress__state {\n  position: absolute;\n  width: 1px;\n  height: 1px;\n  overflow: hidden;\n  clip-path: inset(50%);\n  white-space: nowrap;\n}\n\n.ds-progress--vertical {\n  flex-direction: column;\n  flex-wrap: nowrap;\n}\n\n.ds-progress--vertical .ds-progress__step {\n  flex-wrap: wrap;\n  width: 100%;\n}\n\n.ds-progress--vertical .ds-progress__step::after {\n  content: none;\n}\n\n/* Its content stands in a column, so an inline element in it (text drawn by\n   an element, say) takes its own lines rather than a line box's descent. */\n.ds-progress__body {\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: column;\n  flex: 1 0 100%;\n  min-width: 0;\n  padding-inline-start: var(--ds-unit);\n  color: var(--ds-text-color);\n}\n\n/* ---- A dot for each page ------------------------------------------- */\n\n.ds-progress--dots {\n  position: static;\n  display: inline-flex;\n  width: auto;\n  flex: none;\n  align-items: center;\n  height: var(--ds-row-height);\n  margin: 0;\n  padding: 0;\n}\n\n.ds-progress__dot {\n  --ds-progress-dot-color: var(--ds-progress-dot-future, var(--ds-text-color-muted));\n  appearance: none;\n  box-sizing: border-box;\n  display: inline-flex;\n  flex: none;\n  align-items: center;\n  justify-content: center;\n  width: var(--ds-unit);\n  height: var(--ds-unit);\n  margin: 0;\n  padding: 0;\n  border: 0;\n  border-radius: var(--ds-radius);\n  background: transparent;\n  color: inherit;\n  cursor: pointer;\n  -webkit-tap-highlight-color: transparent;\n}\n\n/* The dot itself: 4px, scaled with the surface, a fifth of the square. */\n.ds-progress__dot::before {\n  content: \"\";\n  box-sizing: border-box;\n  width: calc(4px * var(--ds-sf, 1));\n  height: calc(4px * var(--ds-sf, 1));\n  border-radius: 50%;\n  background: transparent;\n  box-shadow: inset 0 0 0 1px var(--ds-progress-dot-color);\n  transition: transform 160ms ease-out;\n}\n\n.ds-progress__dot[data-state=\"past\"] { --ds-progress-dot-color: var(--ds-progress-dot-past, var(--ds-text-color-muted)); }\n.ds-progress__dot[data-state=\"next\"] { --ds-progress-dot-color: var(--ds-progress-dot-next, var(--ds-text-color)); }\n.ds-progress__dot[data-state=\"end\"] { --ds-progress-dot-color: var(--ds-progress-dot-end, var(--ds-text-color)); }\n.ds-progress__dot[aria-current=\"true\"] { --ds-progress-dot-color: var(--ds-progress-dot-current, var(--ds-text-color)); }\n\n.ds-progress__dot:is([data-state=\"past\"], [data-state=\"next\"], [aria-current=\"true\"])::before {\n  background: var(--ds-progress-dot-color);\n}\n\n/* The current dot is half again as large. */\n.ds-progress__dot[aria-current=\"true\"]::before {\n  transform: scale(1.5);\n}\n\n.ds-progress__dot:hover:not([aria-current=\"true\"])::before {\n  transform: scale(1.25);\n}\n\n.ds-progress__dot:focus-visible {\n  outline: 2px solid var(--ds-focus-ring);\n  outline-offset: -2px;\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .ds-progress__dot::before {\n    transition: none;\n  }\n}\n";
 //#endregion
 //#region DS1/2-core/styles/ds-progress.css?inline
 var ds_progress_default = "/* ds-progress.css */\n/* The element only places the row; 1-root/progress.css draws it. */\n\n:host {\n  display: block;\n  min-width: 0;\n}\n\n:host([dots]) {\n  display: inline-flex;\n  vertical-align: top;\n}\n\n:host([hidden]),\n[hidden] {\n  display: none !important;\n}\n\n/* What a page slots under a step takes the step's lines, not its own margins,\n   and stands at least a square high, so text drawn one control high (a\n   ds-text) keeps the steps under it on the grid. */\n::slotted(*) {\n  min-height: var(--ds-unit);\n  margin: 0;\n}\n";
@@ -11712,7 +11993,7 @@ _Progress.styles = [
 define("ds-progress", Progress);
 //#endregion
 //#region DS1/2-core/styles/ds-tooltip.css?inline
-var ds_tooltip_default = ":host {\n  position: relative;\n  display: inline-flex;\n  align-items: center;\n}\n:host([hidden]) { display: none !important; }\n\n/* In the top layer (a manual popover), fixed over its control by the box\n * ds-tooltip.ts measures: centred, two pixels above, shifted to stay four\n * pixels inside the window; nothing the control stands in can cut it short. */\n.bubble {\n  box-sizing: border-box;\n  position: fixed;\n  inset: auto;\n  left: var(--ds-tooltip-x, 50%);\n  top: var(--ds-tooltip-above, auto);\n  margin: 0;\n  border: 0;\n  overflow: visible;\n  transform: translate(calc(-50% + var(--ds-tooltip-shift, 0px)), -100%);\n  z-index: var(--ds-tooltip-z-index, 1000);\n  width: max-content;\n  max-width: min(calc(320px * var(--ds-sf, var(--sf, 1))), calc(100vw - 20px));\n  min-height: calc(16px * var(--ds-sf, var(--sf, 1)));\n  padding: 0 calc(2.5px * var(--ds-sf, var(--sf, 1)));\n  border-radius: calc(4px * var(--ds-sf, var(--sf, 1)));\n  background: var(--ds-tooltip-background, light-dark(var(--ds-black, var(--black)), var(--ds-white, var(--white))));\n  color: var(--ds-tooltip-color, light-dark(var(--ds-white, var(--white)), var(--ds-black, var(--black))));\n  font-family: var(--ds-typeface-regular, var(--typeface-regular));\n  font-size: calc(14px * var(--ds-sf, var(--sf, 1)));\n  line-height: calc(16px * var(--ds-sf, var(--sf, 1)));\n  font-weight: 400;\n  letter-spacing: var(--ds-type-letterspacing-default, 0);\n  text-align: center;\n  white-space: normal;\n  overflow-wrap: anywhere;\n  pointer-events: none;\n}\n\n.bubble[hidden] { display: none; }\n\n.bubble[data-side=\"bottom\"] {\n  top: var(--ds-tooltip-below, auto);\n  transform: translateX(calc(-50% + var(--ds-tooltip-shift, 0px)));\n}\n";
+var ds_tooltip_default = ":host {\n  position: relative;\n  display: inline-flex;\n  align-items: center;\n}\n:host([hidden]) { display: none !important; }\n\n/* In the top layer (a manual popover), fixed over its control by the box\n * ds-tooltip.ts measures: centred, two pixels above, shifted to stay four\n * pixels inside the window; nothing the control stands in can cut it short. */\n.bubble {\n  box-sizing: border-box;\n  position: fixed;\n  inset: auto;\n  left: var(--ds-tooltip-x, 50%);\n  top: var(--ds-tooltip-above, auto);\n  margin: 0;\n  border: 0;\n  overflow: visible;\n  transform: translate(calc(-50% + var(--ds-tooltip-shift, 0px)), -100%);\n  z-index: var(--ds-tooltip-z-index, 1000);\n  width: max-content;\n  max-width: min(calc(320px * var(--ds-sf, var(--sf, 1))), calc(100vw - 20px));\n  min-height: calc(16px * var(--ds-sf, var(--sf, 1)));\n  padding: 0 calc(2.5px * var(--ds-sf, var(--sf, 1)));\n  border-radius: calc(4px * var(--ds-sf, var(--sf, 1)));\n  background: var(--ds-tooltip-background, light-dark(var(--ds-black, var(--black)), var(--ds-white, var(--white))));\n  color: var(--ds-tooltip-color, light-dark(var(--ds-white, var(--white)), var(--ds-black, var(--black))));\n  font-family: \"Inter Arrows\", var(--ds-typeface-regular, var(--typeface-regular));\n  font-size: calc(14px * var(--ds-sf, var(--sf, 1)));\n  line-height: calc(16px * var(--ds-sf, var(--sf, 1)));\n  font-weight: 400;\n  letter-spacing: var(--ds-type-letterspacing-default, 0);\n  text-align: center;\n  white-space: normal;\n  overflow-wrap: anywhere;\n  pointer-events: none;\n}\n\n.bubble[hidden] { display: none; }\n\n.bubble[data-side=\"bottom\"] {\n  top: var(--ds-tooltip-below, auto);\n  transform: translateX(calc(-50% + var(--ds-tooltip-shift, 0px)));\n}\n";
 //#endregion
 //#region DS1/2-core/ds-tooltip.ts
 var _Tooltip;
@@ -11980,15 +12261,28 @@ define("ds-accordion", Accordion);
 var avatarIcon = "<svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<path d=\"M8.00001 8.56915C8.71876 8.56915 9.36524 8.67853 9.93946 8.89728C10.5137 9.11212 11.0039 9.39142 11.4102 9.73517C11.8203 10.0789 12.0434 10.4012 12.2583 10.7957C12.3903 11.0383 12.5357 11.3646 12.6249 11.756C12.6779 11.9885 12.7133 12.2215 12.7133 12.7234H3.28666C3.28666 12.2215 3.32208 11.9885 3.37507 11.756C3.46425 11.3646 3.6096 11.0383 3.74169 10.7957C3.95654 10.4012 4.17962 10.0789 4.58978 9.73517C4.99603 9.39142 5.48626 9.11212 6.06048 8.89728C6.6347 8.67853 7.28126 8.56915 8.00001 8.56915Z\" fill=\"currentColor\"/>\n<path d=\"M8.00291 7.71044C7.60056 7.71044 7.22947 7.61191 6.88963 7.41484C6.55369 7.2142 6.28416 6.94369 6.08103 6.60331C5.87791 6.26293 5.77634 5.88314 5.77634 5.46394C5.77634 5.04832 5.87791 4.67569 6.08103 4.34607C6.28416 4.01285 6.55564 3.74951 6.89548 3.55603C7.23533 3.35897 7.60447 3.26044 8.00291 3.26044C8.40134 3.26044 8.76853 3.35718 9.10447 3.55065C9.44041 3.74055 9.70994 4.0021 9.91306 4.33532C10.1201 4.66495 10.2236 5.03757 10.2236 5.45319C10.2236 5.87598 10.1201 6.25935 9.91306 6.60331C9.70994 6.94369 9.44041 7.2142 9.10447 7.41484C8.76853 7.61191 8.40134 7.71044 8.00291 7.71044Z\" fill=\"currentColor\"/>\n</svg>";
 //#endregion
 //#region DS1/2-core/styles/ds-avatar.css?inline
-var ds_avatar_default = "/* Shape is a surface preference. Keep these base lengths unscaled: each\n * component resolves them with its own --ds-sf in component-metrics.css. */\n[data-ds-shape=\"square\"],\n:host([data-ds-shape=\"square\"]) {\n  --ds-corner-size: 0px;\n  --ds-corner-shape: round;\n  --ds-button-inset: 0.5px;\n}\n\n[data-ds-shape=\"rounded\"],\n:host([data-ds-shape=\"rounded\"]) {\n  --ds-corner-size: 4px;\n  --ds-corner-shape: round;\n  --ds-button-inset: 2.5px;\n}\n\n[data-ds-shape=\"circular\"],\n:host([data-ds-shape=\"circular\"]) {\n  --ds-corner-size: 999px;\n  --ds-corner-shape: round;\n  --ds-button-inset: 5px;\n}\n\n/* A squircle needs twice an arc's radius for the same apparent corner.\n * Circular controls keep true semicircles even in a squircle browser. */\n@supports (corner-shape: squircle) {\n  [data-ds-shape=\"rounded\"],\n  :host([data-ds-shape=\"rounded\"]) {\n    --ds-corner-size: 8px;\n    --ds-corner-shape: squircle;\n  }\n}\n/* Resolve dimensions where a component is drawn. Inherited calc() values have\n * already used their ancestor's scale. Base tokens stay unscaled and inherit;\n * resolved tokens can still be overridden directly on a component.\n * data-ds-surface gives ordinary layout elements the same scaled measures.\n */\n:root,\n:host,\n:where([data-ds-surface]) {\n  --ds-unit: calc(var(--ds-1, 20px) * var(--ds-sf, 1));\n  --ds-control-height: calc(var(--ds-control-size, var(--ds-08, 16px)) * var(--ds-sf, 1));\n  --ds-row-height: calc(var(--ds-row-size, var(--ds-1, 20px)) * var(--ds-sf, 1));\n  --ds-type-size-default: calc(var(--ds-text-size, 14px) * var(--ds-sf, 1));\n  --ds-type-size-small: calc(var(--ds-small-text-size, 10px) * var(--ds-sf, 1));\n  --ds-type-size-heading: calc(var(--ds-heading-text-size, 13px) * var(--ds-sf, 1));\n  --ds-type-size-display: calc(var(--ds-display-text-size, 20px) * var(--ds-sf, 1));\n  --ds-type-lineheight-default: calc(var(--ds-text-leading, 16px) * var(--ds-sf, 1));\n  --ds-type-letterspacing-default: calc(var(--ds-text-tracking, -0.3px) * var(--ds-sf, 1));\n  --ds-radius: calc(var(--ds-corner-size, 4px) * var(--ds-sf, 1));\n  --ds-radius-card: calc(var(--ds-card-corner-size, 4px) * var(--ds-sf, 1));\n}\n:host {\n  /* One control high, inside a one-square row. */\n  --avatar-size: var(--ds-control-height);\n  --avatar-pair-type-size: var(--ds-type-size-small);\n  display: inline-flex;\n  position: relative;\n  flex: 0 0 auto;\n  vertical-align: middle;\n  width: var(--avatar-size);\n  height: var(--avatar-size);\n}\n:host([size=\"large\"]) {\n  --avatar-size: calc(2 * var(--ds-unit));\n  --avatar-pair-type-size: var(--ds-type-size-default);\n}\n:host([size=\"fill\"]) {\n  width: 100%;\n  height: 100%;\n  min-width: 0;\n  aspect-ratio: var(--ds-avatar-intrinsic-ratio, 1);\n}\n:host([hidden]) {\n  display: none !important;\n}\n.frame {\n  box-sizing: border-box;\n  position: relative;\n  display: grid;\n  place-items: center;\n  width: 100%;\n  height: 100%;\n  overflow: hidden;\n  border-radius: 50%;\n  corner-shape: round;\n  background: var(--ds-avatar-background, var(--ds-fill));\n  color: var(--ds-avatar-color, var(--ds-text-color));\n  font: var(--ds-type-weight-default) var(--ds-type-size-default)/1 var(--ds-typeface-regular);\n  letter-spacing: normal;\n  user-select: none;\n  -webkit-user-select: none;\n}\n/* An avatar is round unless it is square, with a picture's corners; a logo is\n   a brand mark and keeps the corners of its own drawing. */\n:host([shape=\"square\"]) .frame {\n  border-radius: var(--ds-avatar-radius, var(--ds-radius));\n  corner-shape: var(--ds-corner-shape, round);\n}\n:host([logo]) .frame {\n  border-radius: 0;\n}\n:host(:not([size=\"large\"], [size=\"fill\"])) .frame {\n  font-size: var(--ds-type-size-small);\n}\n:host([size=\"large\"]) .frame {\n  font-size: var(--ds-unit);\n}\n.initial[data-pair] {\n  /* Full-width initials must fit inside both hairline edges, even at compact\n     and independent nested scales. Keep the normal type size when it fits. */\n  font-size: min(\n    var(--avatar-pair-type-size),\n    calc((var(--avatar-size) - 2px) / var(--initial-count))\n  );\n}\n:host([outlined]) .frame::after {\n  content: \"\";\n  position: absolute;\n  inset: 0;\n  border: 1px solid var(--ds-avatar-outline, currentColor);\n  border-radius: inherit;\n  pointer-events: none;\n}\n:host([pending]) .frame {\n  background: var(--ds-fill);\n  color: var(--ds-text-color-muted);\n}\n:host([pending]) img {\n  filter: grayscale(1);\n  opacity: 0.5;\n}\n:host([plain]) .frame {\n  background: transparent;\n  color: var(--ds-avatar-color, inherit);\n}\nimg,\n.mask {\n  position: absolute;\n  inset: 0;\n  display: block;\n  width: 100%;\n  height: 100%;\n}\nimg {\n  object-fit: cover;\n  visibility: hidden;\n}\nimg[data-visible] {\n  visibility: visible;\n}\n:host([fit=\"contain\"]) img {\n  object-fit: contain;\n  padding: calc(2px * var(--ds-sf));\n  box-sizing: border-box;\n}\n.mask {\n  background: currentColor;\n  mask-position: center;\n  mask-size: contain;\n  mask-repeat: no-repeat;\n}\n:host([fit=\"contain\"]:not([plain])) .mask {\n  inset: 10%;\n  width: 80%;\n  height: 80%;\n}\n.initial {\n  overflow: hidden;\n  max-width: 100%;\n  white-space: nowrap;\n  text-align: center;\n}\nds-icon {\n  flex: none;\n}\n";
+var ds_avatar_default = "/* Shape is a surface preference. Keep these base lengths unscaled: each\n * component resolves them with its own --ds-sf in component-metrics.css. */\n[data-ds-shape=\"square\"],\n:host([data-ds-shape=\"square\"]) {\n  --ds-corner-size: 0px;\n  --ds-corner-shape: round;\n  --ds-button-inset: 0.5px;\n}\n\n[data-ds-shape=\"rounded\"],\n:host([data-ds-shape=\"rounded\"]) {\n  --ds-corner-size: 4px;\n  --ds-corner-shape: round;\n  --ds-button-inset: 2.5px;\n}\n\n[data-ds-shape=\"circular\"],\n:host([data-ds-shape=\"circular\"]) {\n  --ds-corner-size: 999px;\n  --ds-corner-shape: round;\n  --ds-button-inset: 5px;\n}\n\n/* A squircle needs twice an arc's radius for the same apparent corner.\n * Circular controls keep true semicircles even in a squircle browser. */\n@supports (corner-shape: squircle) {\n  [data-ds-shape=\"rounded\"],\n  :host([data-ds-shape=\"rounded\"]) {\n    --ds-corner-size: 8px;\n    --ds-corner-shape: squircle;\n  }\n}\n/* Resolve dimensions where a component is drawn. Inherited calc() values have\n * already used their ancestor's scale. Base tokens stay unscaled and inherit;\n * resolved tokens can still be overridden directly on a component.\n * data-ds-surface gives ordinary layout elements the same scaled measures.\n */\n:root,\n:host,\n:where([data-ds-surface]) {\n  --ds-unit: calc(var(--ds-1, 20px) * var(--ds-sf, 1));\n  --ds-control-height: calc(var(--ds-control-size, var(--ds-08, 16px)) * var(--ds-sf, 1));\n  --ds-row-height: calc(var(--ds-row-size, var(--ds-1, 20px)) * var(--ds-sf, 1));\n  --ds-type-size-default: calc(var(--ds-text-size, 14px) * var(--ds-sf, 1));\n  --ds-type-size-small: calc(var(--ds-small-text-size, 10px) * var(--ds-sf, 1));\n  --ds-type-size-heading: calc(var(--ds-heading-text-size, 13px) * var(--ds-sf, 1));\n  --ds-type-size-display: calc(var(--ds-display-text-size, 20px) * var(--ds-sf, 1));\n  --ds-type-lineheight-default: calc(var(--ds-text-leading, 16px) * var(--ds-sf, 1));\n  --ds-type-letterspacing-default: calc(var(--ds-text-tracking, -0.3px) * var(--ds-sf, 1));\n  --ds-radius: calc(var(--ds-corner-size, 4px) * var(--ds-sf, 1));\n  --ds-radius-card: calc(var(--ds-card-corner-size, 4px) * var(--ds-sf, 1));\n}\n:host {\n  /* One control high, inside a one-square row. */\n  --avatar-size: var(--ds-control-height);\n  --avatar-pair-type-size: var(--ds-type-size-small);\n  display: inline-flex;\n  position: relative;\n  flex: 0 0 auto;\n  vertical-align: middle;\n  width: var(--avatar-size);\n  height: var(--avatar-size);\n}\n:host([size=\"large\"]) {\n  --avatar-size: calc(2 * var(--ds-unit));\n  --avatar-pair-type-size: var(--ds-type-size-default);\n}\n:host([size=\"fill\"]) {\n  width: 100%;\n  height: 100%;\n  min-width: 0;\n  aspect-ratio: var(--ds-avatar-intrinsic-ratio, 1);\n}\n:host([hidden]) {\n  display: none !important;\n}\n.frame {\n  box-sizing: border-box;\n  position: relative;\n  display: grid;\n  place-items: center;\n  width: 100%;\n  height: 100%;\n  overflow: hidden;\n  border-radius: 50%;\n  corner-shape: round;\n  background: var(--ds-avatar-background, var(--ds-fill));\n  color: var(--ds-avatar-color, var(--ds-text-color));\n  font: var(--ds-type-weight-default) var(--ds-type-size-default)/1 \"Inter Arrows\", var(--ds-typeface-regular);\n  letter-spacing: normal;\n  user-select: none;\n  -webkit-user-select: none;\n}\n/* An avatar is round unless it is square, with a picture's corners; a logo is\n   a brand mark and keeps the corners of its own drawing. */\n:host([shape=\"square\"]) .frame {\n  border-radius: var(--ds-avatar-radius, var(--ds-radius));\n  corner-shape: var(--ds-corner-shape, round);\n}\n:host([logo]) .frame {\n  border-radius: 0;\n}\n:host(:not([size=\"large\"], [size=\"fill\"])) .frame {\n  font-size: var(--ds-type-size-small);\n}\n:host([size=\"large\"]) .frame {\n  font-size: var(--ds-unit);\n}\n.initial[data-pair] {\n  /* Full-width initials must fit inside both hairline edges, even at compact\n     and independent nested scales. Keep the normal type size when it fits. */\n  font-size: min(\n    var(--avatar-pair-type-size),\n    calc((var(--avatar-size) - 2px) / var(--initial-count))\n  );\n}\n:host([outlined]) .frame::after {\n  content: \"\";\n  position: absolute;\n  inset: 0;\n  border: 1px solid var(--ds-avatar-outline, currentColor);\n  border-radius: inherit;\n  pointer-events: none;\n}\n:host([pending]) .frame {\n  background: var(--ds-fill);\n  color: var(--ds-text-color-muted);\n}\n:host([pending]) img {\n  filter: grayscale(1);\n  opacity: 0.5;\n}\n:host([plain]) .frame {\n  background: transparent;\n  color: var(--ds-avatar-color, inherit);\n}\nimg,\n.mask {\n  position: absolute;\n  inset: 0;\n  display: block;\n  width: 100%;\n  height: 100%;\n}\nimg {\n  object-fit: cover;\n  visibility: hidden;\n}\nimg[data-visible] {\n  visibility: visible;\n}\n:host([fit=\"contain\"]) img {\n  object-fit: contain;\n  padding: calc(2px * var(--ds-sf));\n  box-sizing: border-box;\n}\n.mask {\n  background: currentColor;\n  mask-position: center;\n  mask-size: contain;\n  mask-repeat: no-repeat;\n}\n:host([fit=\"contain\"]:not([plain])) .mask {\n  inset: 10%;\n  width: 80%;\n  height: 80%;\n}\n.initial {\n  overflow: hidden;\n  max-width: 100%;\n  white-space: nowrap;\n  text-align: center;\n}\nds-icon {\n  flex: none;\n}\n";
 //#endregion
 //#region DS1/2-core/ds-avatar.ts
 var _Avatar;
 provideIcons({ avatar: avatarIcon });
 /** The ink that reads on a fill: black on a light one, white on a dark one. */
 var inkOn = (rgb) => {
-	const linear = rgb.map((n) => n <= .04045 ? n / 12.92 : ((n + .055) / 1.055) ** 2.4);
-	return linear[0] * .2126 + linear[1] * .7152 + linear[2] * .0722 > .22 ? "var(--ds-black)" : "var(--ds-white)";
+	const fill = [...rgb, 1];
+	const white = [
+		1,
+		1,
+		1,
+		1
+	];
+	if (contrastRatio([
+		42 / 255,
+		42 / 255,
+		42 / 255,
+		1
+	], fill) >= 4.5) return "var(--ds-black)";
+	if (contrastRatio(white, fill) >= 4.5) return "var(--ds-white)";
+	return "black";
 };
 /** Saved identity colours are hex; their ink must stay legible in either theme. */
 function avatarInk(color) {
@@ -12023,6 +12317,14 @@ function inkOnResolved(fill) {
 var Avatar = class extends i$4 {
 	constructor() {
 		super();
+		this.inkFrame = 0;
+		this.queueInk = () => {
+			const view = this.ownerDocument.defaultView;
+			if (!this.inkFrame) this.inkFrame = view.requestAnimationFrame(() => {
+				this.inkFrame = 0;
+				this.resolveInk();
+			});
+		};
 		this.label = "";
 		this.initial = "?";
 		this.src = "";
@@ -12034,6 +12336,28 @@ var Avatar = class extends i$4 {
 		this.fit = "cover";
 		this.logo = this.mask = this.outlined = this.pending = this.plain = this.loaded = this.failed = false;
 	}
+	connectedCallback() {
+		super.connectedCallback();
+		const view = this.ownerDocument.defaultView;
+		this.inkObserver = new view.MutationObserver(this.queueInk);
+		for (let parent = this; parent; parent = parent.parentElement ?? parent.getRootNode().host ?? null) this.inkObserver.observe(parent, {
+			attributes: true,
+			attributeFilter: [
+				"class",
+				"style",
+				"data-theme"
+			]
+		});
+		view.addEventListener("load", this.queueInk, true);
+	}
+	disconnectedCallback() {
+		super.disconnectedCallback();
+		this.inkObserver?.disconnect();
+		const view = this.ownerDocument.defaultView;
+		view.cancelAnimationFrame(this.inkFrame);
+		this.inkFrame = 0;
+		view.removeEventListener("load", this.queueInk, true);
+	}
 	willUpdate(changed) {
 		if (changed.has("src")) {
 			this.loaded = false;
@@ -12043,7 +12367,7 @@ var Avatar = class extends i$4 {
 	}
 	/** A fill named by a variable (`var(--brand-highlight)`) gets its ink once the browser has resolved it. */
 	updated() {
-		if (this.ink || this.pending || this.plain || !this.color || avatarInk(this.color)) return;
+		if (this.ink || this.pending || this.plain) return;
 		this.resolveInk();
 	}
 	/** Reads the fill as drawn; while the variable is still undefined (its stylesheet on its way), looks again next
@@ -12051,12 +12375,28 @@ var Avatar = class extends i$4 {
 	resolveInk(tries = 0) {
 		const frame = this.renderRoot.querySelector(".frame");
 		if (!frame || !this.isConnected) return;
-		const ink = inkOnResolved(getComputedStyle(frame).backgroundColor);
-		if (ink) {
-			frame.style.color = ink;
+		if (this.ink || this.pending || this.plain) return;
+		const view = this.ownerDocument.defaultView;
+		const read = colorReader(this.ownerDocument);
+		let fill = read(view.getComputedStyle(frame).backgroundColor);
+		if (fill && fill[3] > 0) {
+			for (let parent = this; parent && fill[3] < 1; parent = parent.parentElement ?? parent.getRootNode().host ?? null) {
+				const background = read(view.getComputedStyle(parent).backgroundColor);
+				if (background) fill = composite(fill, background);
+			}
+			if (fill[3] < 1) return;
+			const tokens = view.getComputedStyle(this);
+			const black = read(tokens.getPropertyValue("--ds-black").trim()), white = read(tokens.getPropertyValue("--ds-white").trim());
+			const ink = black && contrastRatio(black, fill) >= 4.5 ? "var(--ds-black)" : white && contrastRatio(white, fill) >= 4.5 ? "var(--ds-white)" : contrastRatio([
+				0,
+				0,
+				0,
+				1
+			], fill) >= 4.5 ? "black" : "white";
+			if (frame.style.color !== ink) frame.style.color = ink;
 			return;
 		}
-		if (tries < 60) requestAnimationFrame(() => this.resolveInk(tries + 1));
+		if (tries < 60) this.ownerDocument.defaultView.requestAnimationFrame(() => this.resolveInk(tries + 1));
 		if (tries === 0 && this.ownerDocument.readyState !== "complete") this.ownerDocument.defaultView?.addEventListener("load", () => this.resolveInk(60), { once: true });
 	}
 	render() {
@@ -12071,7 +12411,7 @@ var Avatar = class extends i$4 {
       class="frame"
       style=${o({
 			backgroundColor: !this.pending && !this.plain ? this.color || void 0 : void 0,
-			color: !this.pending ? this.ink || avatarInk(this.color) : void 0
+			color: !this.pending ? this.ink || (!this.plain ? avatarInk(this.color) : void 0) : void 0
 		})}
       role=${this.label ? "img" : A}
       aria-label=${this.label || A}
@@ -12631,7 +12971,7 @@ _CalendarBase.properties = {
 };
 //#endregion
 //#region DS1/3-unit/styles/ds-calendar.css?inline
-var ds_calendar_default = "/* ds-calendar.css\n * A month on whole squares. A day is --ds-calendar-day-squares wide (four,\n * one when compact) and, beside its date's square, holds --ds-calendar-lines\n * one-square lines of events and one square to spare. Every line of words\n * stands on the lower sixteen of its square. The boxes are hairlines centred\n * on the grid lines, the month's frame rounded more than a card, as a larger\n * thing wears a larger curve; a full month names its days inside the first\n * week's boxes, and writes a week's number on its first day; today is a red\n * disc nine tenths of a square across, its weekday's name in the same red.\n *\n * A picker is a field's face: one control high at the foot of its square,\n * as wide as its words (it hugs them, as a button does), its words 4px in and the chevron-down icon\n * (16px, 2px from the end) at its end; a range is one value. Its month opens on the menu's frame, half a square from\n * the field: a 1px line, half a square inside it, no shadow, so eight squares\n * wide. Inside, on whole squares: the first and last day to type (each with\n * its time below when times are on), one square spare, the compact month one\n * square a day, then Include time and Clear, each one square, set off by\n * one-square separators with a line through them. */\n\n:host {\n  --ds-calendar-day: calc(var(--ds-unit) * var(--ds-calendar-day-squares, 4));\n  --ds-calendar-day-height: calc(var(--ds-unit) * (var(--ds-calendar-lines, 2) + 2));\n  /* The weekdays' own row over the days: none in a full month, whose first week names them; a square when compact. */\n  --ds-calendar-weekdays: 0px;\n  /* The month's height under its header, fixed: six weeks. Every view takes it with `fixed`. */\n  --ds-calendar-area: calc(var(--ds-calendar-weekdays) + 6 * var(--ds-calendar-day-height));\n  --ds-calendar-line: 1px solid var(--ds-border-color);\n  /* Three times a card's corner, at most a square: twelve pixels on the base card, none where cards are square. */\n  --ds-calendar-radius: clamp(0px, calc(3 * var(--ds-radius-card, calc(4px * var(--ds-sf, 1)))), var(--ds-unit));\n  --ds-calendar-today: var(--ds-red-for-blood);\n  --ds-calendar-today-ink: var(--ds-white, #fff);\n  --ds-calendar-selected: var(--ds-sharp-blue);\n  --ds-calendar-selected-ink: var(--ds-white, #fff);\n  --ds-calendar-band: color-mix(in srgb, var(--ds-calendar-selected) 16%, var(--ds-paper));\n  --ds-calendar-mark: calc(var(--ds-unit) * 0.9);\n  --ds-calendar-pad: calc(4px * var(--ds-sf, 1));\n  /* Heat, in four steps of the accent: its pastel, between, the colour, and\n     past it (deepened with the ink on light paper, the full colour on dark).\n     The words are the ink on every step but the two darkest on dark paper. */\n  --ds-calendar-heat-1: var(--one-apple-green-pastel, color-mix(in srgb, var(--ds-apple-green) 40%, var(--ds-paper)));\n  --ds-calendar-heat-3: var(--one-apple-green, var(--ds-apple-green));\n  --ds-calendar-heat-2: color-mix(in srgb, var(--ds-calendar-heat-1), var(--ds-calendar-heat-3));\n  --ds-calendar-heat-4: light-dark(color-mix(in srgb, var(--ds-apple-green) 60%, var(--ds-slate)), var(--ds-apple-green));\n  --ds-calendar-heat-ink-1: light-dark(var(--ds-slate), var(--ds-white));\n  --ds-calendar-heat-ink-2: light-dark(var(--ds-slate), var(--ds-white));\n  --ds-calendar-heat-ink-3: var(--ds-slate);\n  --ds-calendar-heat-ink-4: var(--ds-slate);\n  box-sizing: border-box;\n  display: inline-block;\n  vertical-align: top;\n  color: var(--ds-text-color);\n  font-family: var(--ds-typeface-regular);\n  font-feature-settings: var(--ds-font-features);\n  font-size: var(--ds-type-size-default);\n  font-weight: var(--ds-type-weight-default);\n  line-height: var(--ds-type-lineheight-default);\n  letter-spacing: var(--ds-type-letterspacing-default);\n}\n:host([hidden]) { display: none !important; }\n/* A compact day is square: one square, or two where the month has room. Its marks grow with it. */\n:host([compact]) {\n  --ds-calendar-weekdays: var(--ds-unit);\n  --ds-calendar-day-height: var(--ds-calendar-day);\n  --ds-calendar-mark: calc(var(--ds-unit) * (var(--ds-calendar-day-squares, 1) * 0.75 + 0.15));\n}\n\n.calendar { width: calc(7 * var(--ds-calendar-day)); }\n\n/* The title and the arrows: one square, one square above the days (none when compact). */\n.header {\n  box-sizing: border-box;\n  display: flex;\n  align-items: flex-end;\n  gap: var(--ds-calendar-pad);\n  height: var(--ds-unit);\n  margin-block-end: var(--ds-unit);\n}\n:host([compact]) .header { margin-block-end: 0; }\n.title {\n  flex: 1 1 auto;\n  min-width: 0;\n  overflow: hidden;\n  font-family: var(--ds-typeface-medium, var(--ds-typeface-regular));\n  text-overflow: clip;\n  white-space: nowrap;\n}\n.controls {\n  display: flex;\n  flex: 0 0 auto;\n  margin-inline-start: auto;\n  align-items: flex-end;\n  gap: 0;\n}\n/* A step back, Today and a step on: a plain split button, the segments a hair apart and one\n * control high at the square's foot, their words and arrows in the title grey on no ground in\n * any state; the pointer inks them. */\n.controls { gap: 1px; }\n:is(.nav, .today-button) {\n  appearance: none;\n  box-sizing: border-box;\n  display: inline-flex;\n  flex: 0 0 auto;\n  align-items: center;\n  justify-content: center;\n  height: var(--ds-control-height);\n  margin: 0;\n  padding: 0 calc(5px * var(--ds-sf, 1));\n  border: 0;\n  border-radius: var(--ds-radius);\n  background: transparent;\n  color: var(--ds-title-color);\n  font: inherit;\n  line-height: var(--ds-control-height);\n  letter-spacing: inherit;\n  white-space: nowrap;\n  cursor: pointer;\n  -webkit-tap-highlight-color: transparent;\n}\n.nav { width: var(--ds-control-height); padding: 0; }\n.nav > ds-icon { --ds-icon-size: 16px; color: inherit; }\n:is(.nav, .today-button):hover:not(:disabled) { color: var(--ds-text-color); }\n:is(.nav, .today-button):focus-visible { outline: 1px solid currentColor; outline-offset: -2px; }\n.nav:disabled { cursor: default; opacity: 0.5; }\n:host(:dir(rtl)) .nav > ds-icon { transform: scaleX(-1); }\n/* A compact month's arrows are chevrons a square wide each, filled under the pointer. */\n:host([compact]) .nav { width: var(--ds-unit); }\n:host([compact]) .nav:hover:not(:disabled) { background: var(--ds-fill); }\n\n/* The title as a plain button, its words alone: pressing it travels up to the months of the year,\n * then to twelve years. One control high at the square's foot, the words on the sixteen where the\n * title stands, hugging them: never a bar across the header, the pointer filling it only 4px past\n * the words at each side. */\n.title-button {\n  display: inline-flex;\n  flex: 0 1 auto;\n  align-items: center;\n  gap: 0;\n  max-width: 100%;\n  height: var(--ds-control-height);\n  margin: 0 0 0 calc(-4px * var(--ds-sf, 1));\n  padding: 0 calc(4px * var(--ds-sf, 1));\n  border: 0;\n  border-radius: var(--ds-radius);\n  background: transparent;\n  color: var(--ds-text-color);\n  font: inherit;\n  font-family: var(--ds-typeface-medium, var(--ds-typeface-regular));\n  line-height: var(--ds-control-height);\n  letter-spacing: inherit;\n  cursor: pointer;\n}\n:host(:dir(rtl)) .title-button { margin: 0 calc(-4px * var(--ds-sf, 1)) 0 0; }\n.title-button:hover { background: var(--ds-fill); }\n.title-button:focus-visible { outline: 2px solid var(--ds-focus-ring); outline-offset: -2px; }\n.title-text { min-width: 0; overflow: hidden; text-overflow: clip; white-space: nowrap; }\n/* Cut words fade over their last square, never an ellipsis: the title, a weekday's name and\n   the picker's value (0-face/cut-fade.ts marks them; an event's name is drawn below). */\n:is(.title, .title-text, .weekday, .trigger .text, .swimlane-month)[data-cut=\"end\"] { mask-image: linear-gradient(to right, #000 calc(100% - var(--ds-unit)), transparent); }\n:host(:dir(rtl)) :is(.title, .title-text, .weekday, .trigger .text, .swimlane-month)[data-cut=\"end\"] { mask-image: linear-gradient(to left, #000 calc(100% - var(--ds-unit)), transparent); }\n\n/* The months of a year, or twelve years: cells whole squares wide, three across a narrow month\n * and four across a wider one, each row one square, one square apart. The area keeps the days'\n * height, so nothing below moves between levels. */\n.picks {\n  box-sizing: border-box;\n  height: calc(var(--ds-calendar-weekdays) + var(--ds-calendar-weeks, 6) * var(--ds-calendar-day-height));\n  outline: none;\n}\n.pick-row {\n  display: grid;\n  grid-template-columns: repeat(var(--ds-calendar-pick-columns, 3), calc(var(--ds-calendar-pick-cell, 2) * var(--ds-unit)));\n  height: var(--ds-unit);\n  margin-block-end: var(--ds-unit);\n}\n/* Each choice hugs its words, one control high on the row's sixteen and padded 4px from them, as\n * a button is, in the middle of its cell; never stretched to fill the cell. */\n.pick {\n  box-sizing: border-box;\n  display: flex;\n  align-items: flex-end;\n  justify-content: center;\n  min-width: 0;\n  height: var(--ds-unit);\n  margin: 0;\n  padding: 0;\n  border: 0;\n  background: transparent;\n  color: var(--ds-text-color);\n  font: inherit;\n  letter-spacing: inherit;\n  cursor: pointer;\n  outline: none;\n}\n.pick-mark {\n  box-sizing: border-box;\n  display: inline-flex;\n  flex: 0 1 auto;\n  align-items: center;\n  justify-content: center;\n  max-width: 100%;\n  height: var(--ds-control-height);\n  padding: 0 calc(4px * var(--ds-sf, 1));\n  overflow: hidden;\n  border-radius: var(--ds-radius);\n  line-height: var(--ds-control-height);\n  font-variant-numeric: tabular-nums;\n  white-space: nowrap;\n}\n.pick:hover:not(:disabled):not([data-today], [data-selected]) .pick-mark { background: var(--ds-fill); }\n.pick:focus-visible .pick-mark { outline: 2px solid var(--ds-focus-ring); outline-offset: -1px; }\n/* The current month or year and the chosen one take the accent, as a chosen segment does. */\n.pick:is([data-today], [data-selected]) .pick-mark { background: var(--ds-accent-color); color: var(--ds-button-text-color-on-accent); }\n.pick:disabled { color: var(--ds-title-color); cursor: default; opacity: 0.5; }\n\n/* Clear, only while something is chosen: a button one control high, centred on the square right under the dates. */\n.foot {\n  display: flex;\n  align-items: flex-end;\n  justify-content: center;\n  height: var(--ds-unit);\n}\n\n@media (prefers-reduced-motion: no-preference) {\n  :is(.grid, .picks, .swimlane, .own-view)[data-travel] { animation: ds-calendar-level 160ms cubic-bezier(0.22, 1, 0.36, 1); }\n}\n@keyframes ds-calendar-level {\n  from { opacity: 0; transform: scale(0.98); }\n  to { opacity: 1; transform: none; }\n}\n\n.grid { outline: none; }\n/* A calendar with a header takes sideways touches on its days and months for its swipe (ds-calendar.ts),\n   so a carousel or a page around it stays put; up and down still scroll the page. */\n[data-swipe] :is(.grid, .picks) { touch-action: pan-y; }\n.weekdays,\n.week {\n  display: grid;\n  grid-template-columns: repeat(7, var(--ds-calendar-day));\n}\n\n/* The weekday names: a block line in the title grey, at the start of a wide day, centred on a compact one. */\n.weekday {\n  box-sizing: border-box;\n  height: var(--ds-unit);\n  padding: calc(4px * var(--ds-sf, 1)) var(--ds-calendar-pad) 0;\n  overflow: hidden;\n  color: var(--ds-title-color);\n  text-overflow: clip;\n  white-space: nowrap;\n}\n:host([compact]) .weekday { padding-inline: 0; text-align: center; }\n/* A full month's weekdays are named inside its first week's boxes; the row stays for those who listen. */\n:host(:not([compact])) .weekdays {\n  position: absolute;\n  width: 1px;\n  height: 1px;\n  overflow: hidden;\n  clip-path: inset(50%);\n  white-space: nowrap;\n}\n\n/* A day's box: hairlines on the grid lines, top and start; the last column\n * and the last week close it at the end and the foot. */\n.day {\n  position: relative;\n  box-sizing: border-box;\n  min-width: 0;\n  height: var(--ds-calendar-day-height);\n  outline: none;\n}\n.day::after {\n  position: absolute;\n  inset: -0.5px;\n  border-block-start: var(--ds-calendar-line);\n  border-inline-start: var(--ds-calendar-line);\n  content: \"\";\n  pointer-events: none;\n}\n.day:nth-child(7)::after { border-inline-end: var(--ds-calendar-line); }\n.week:last-child .day::after { border-block-end: var(--ds-calendar-line); }\n/* The month's frame has a card's rounded corners, as a framed table does: the\n * four corner days round their box, its hairlines and whatever fills it. */\n.weekdays + .week .day:first-child,\n.weekdays + .week .day:first-child::after { border-start-start-radius: var(--ds-calendar-radius); }\n.weekdays + .week .day:nth-child(7),\n.weekdays + .week .day:nth-child(7)::after { border-start-end-radius: var(--ds-calendar-radius); }\n.week:last-child .day:first-child,\n.week:last-child .day:first-child::after { border-end-start-radius: var(--ds-calendar-radius); }\n.week:last-child .day:nth-child(7),\n.week:last-child .day:nth-child(7)::after { border-end-end-radius: var(--ds-calendar-radius); }\n:host([compact]) .day { border-radius: 0; }\n:host([compact]) .day::after { content: none; }\n\n.day[data-day] { cursor: default; }\n:host([selectable]) .day[data-day]:not([aria-disabled=\"true\"]) { cursor: pointer; }\n:host([selectable]:not([compact])) .day[data-day]:not([aria-disabled=\"true\"]):hover { background: var(--ds-row-fill-hover, var(--ds-fill)); }\n.day:focus-visible { outline: 2px solid var(--ds-focus-ring); outline-offset: -2px; }\n:host([compact]) .day:focus-visible { outline: none; }\n:host([compact]) .day:focus-visible .date { outline: 2px solid var(--ds-focus-ring); outline-offset: -1px; }\n\n/* The date: on the first square, at the end of a wide day, in the title grey; before it, at the\n * day's start, the first week's weekday name and the week's number in the compressed face. */\n.date-line {\n  box-sizing: border-box;\n  display: flex;\n  align-items: flex-end;\n  justify-content: flex-end;\n  gap: var(--ds-calendar-pad);\n  height: var(--ds-unit);\n  padding-inline: var(--ds-calendar-pad);\n}\n.date {\n  margin-inline-start: auto;\n  color: var(--ds-title-color);\n  font-variant-numeric: tabular-nums;\n}\n.weekday-name,\n.week-number {\n  flex: 0 0 auto;\n  color: var(--ds-title-color);\n  white-space: nowrap;\n}\n.weekday-name[data-today] { color: var(--ds-calendar-today); }\n.week-number { font-family: var(--ds-typeface-compressed); }\n.day.outside .date-line { justify-content: flex-start; }\n\n/* A compact day: the date centred in its square, in the ink; with events,\n * the empty days fall back to the title grey and the busy ones keep the ink. */\n:host([compact]) .date-line { justify-content: center; padding: 0; }\n:host([compact]) .date { margin-inline-start: 0; }\n:host([compact]) .date { color: var(--ds-text-color); }\n:host([compact][data-events]) .day:not([data-busy]) .date { color: var(--ds-title-color); }\n:host([compact][selectable]) .day[data-day]:not([aria-disabled=\"true\"], [data-today], [data-selected]):hover .date { background: var(--ds-fill); }\n\n/* Today and the selected day: a disc nine tenths of a square, centred on the date's square. */\n.day:is([data-today], [data-selected]) .date-line { padding-inline-end: calc(var(--ds-unit) * 0.05); }\n.day:is([data-today], [data-selected]) .date { align-self: center; }\n:host([compact]) .day:is([data-today], [data-selected]) .date-line { padding: 0; }\n.date {\n  box-sizing: border-box;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  min-width: var(--ds-calendar-mark);\n  height: var(--ds-calendar-mark);\n  border-radius: 999px;\n}\n.day:not([data-today], [data-selected]) .date { min-width: 0; height: auto; }\n:host([compact]) .day .date { min-width: var(--ds-calendar-mark); height: var(--ds-calendar-mark); }\n.day[data-today] .date { background: var(--ds-calendar-today); color: var(--ds-calendar-today-ink); letter-spacing: 0; }\n/* Today's ink holds in a compact month too, where quiet days take the title colour and the text colour above. */\n:host([compact]) .day[data-today] .date,\n:host([compact][data-events]) .day[data-today]:not([data-busy]) .date { color: var(--ds-calendar-today-ink); }\n/* The selected day, and each end of a range: a square with the system's corners in the selection's blue. */\n.day[data-selected] .date { border-radius: var(--ds-radius); background: var(--ds-calendar-selected); color: var(--ds-calendar-selected-ink); letter-spacing: 0; }\n\n.day[aria-disabled=\"true\"] .date { color: var(--ds-title-color); opacity: 0.5; }\n\n/* Heat: the date's mark filled by its step, a picture's corners, inside the day's square; today and the selection draw over it. */\n.day[data-heat]:not([data-today], [data-selected]) .date-line { padding-inline-end: calc(var(--ds-unit) * 0.05); }\n.day[data-heat]:not([data-today], [data-selected]) .date { align-self: center; }\n.day[data-heat]:not([data-today], [data-selected]) .date {\n  min-width: var(--ds-calendar-mark);\n  height: var(--ds-calendar-mark);\n  border-radius: var(--ds-radius);\n  letter-spacing: 0;\n}\n.day[data-heat=\"1\"]:not([data-today], [data-selected]) .date { background: var(--ds-calendar-heat-1); color: var(--ds-calendar-heat-ink-1); }\n.day[data-heat=\"2\"]:not([data-today], [data-selected]) .date { background: var(--ds-calendar-heat-2); color: var(--ds-calendar-heat-ink-2); }\n.day[data-heat=\"3\"]:not([data-today], [data-selected]) .date { background: var(--ds-calendar-heat-3); color: var(--ds-calendar-heat-ink-3); }\n.day[data-heat=\"4\"]:not([data-today], [data-selected]) .date { background: var(--ds-calendar-heat-4); color: var(--ds-calendar-heat-ink-4); }\n:host([compact]) .day[data-heat]:not([data-today], [data-selected]) .date-line { padding: 0; }\n\n/* Events: one square each, stacked edge to edge on the day's lines, drawn one pixel short. */\n.events {\n  display: flex;\n  flex-direction: column;\n}\n.event,\n.more {\n  box-sizing: border-box;\n  display: flex;\n  align-items: flex-end;\n  gap: var(--ds-calendar-pad);\n  height: calc(var(--ds-unit) - 1px);\n  /* A pixel at the start, so the day's line (and the month's frame) shows beside a bar. */\n  margin: 0.5px 0.5px 0.5px 1px;\n  padding-inline: var(--ds-calendar-pad);\n  overflow: hidden;\n  white-space: nowrap;\n}\n.event {\n  background: var(--ds-calendar-event-fill, var(--ds-fill));\n  color: var(--ds-calendar-event-ink, var(--ds-text-color));\n  cursor: pointer;\n}\n.event .name { min-width: 0; overflow: hidden; }\n/* A name its bar cuts fades out over the bar's last square, at the end where it is cut. */\n.event .name[data-cut=\"end\"] { mask-image: linear-gradient(to right, #000 calc(100% - var(--ds-unit)), transparent); }\n:host(:dir(rtl)) .event .name[data-cut=\"end\"] { mask-image: linear-gradient(to left, #000 calc(100% - var(--ds-unit)), transparent); }\n/* An event over several days is one bar from its first day in the week,\n * drawn over the days after it (and their lines) with its name written once. */\n.event[data-span] {\n  position: relative;\n  z-index: 1;\n  width: calc(var(--ds-calendar-event-span) * var(--ds-calendar-day) - 1.5px);\n}\n/* A line a bar passes over, or an empty line above another event. */\n.line { flex: 0 0 auto; height: var(--ds-unit); }\n.event .time { flex: 0 0 auto; opacity: 0.6; font-variant-numeric: tabular-nums; }\n.more { color: var(--ds-title-color); cursor: pointer; }\n.more:hover { color: var(--ds-text-color); }\n\n/* A day whose hidden events are unfolded lays them over the days below. */\n.day[data-open] { z-index: 1; }\n.day[data-open] .events {\n  position: absolute;\n  inset-block-start: var(--ds-unit);\n  inset-inline: 0;\n  background: var(--ds-paper);\n  box-shadow: 0 0 0 1px var(--ds-border-color);\n}\n\n@media (prefers-reduced-motion: no-preference) {\n  .event, .more { transition: opacity 120ms ease; }\n}\n\n/* A compact day's date stands in the middle of its square once the square is two or more wide. */\n:host([compact][data-roomy]) .date-line { align-items: center; height: var(--ds-calendar-day-height); }\n\n/* The days of the months before and after, in the title grey. */\n.day[data-outside] .date { color: var(--ds-title-color); }\n:host([compact]) .day[data-outside] .date { color: var(--ds-title-color); }\n\n/* A range: the days between its ends on a band of the selection's blue; the band runs into each end's square. */\n/* In a month of boxes the band fills them; in a compact month it is the marks' height on their\n * line, from the middle of the first day to the middle of the last, so the ends and the band read\n * as one bar, the ends' squares drawn over it flush. */\n:host(:not([compact])) .day:is([data-inside], [data-first], [data-last]) { background: var(--ds-calendar-band); }\n:host([compact]) .day { isolation: isolate; }\n:host([compact]) .day:is([data-inside], [data-first], [data-last])::before {\n  position: absolute;\n  z-index: -1;\n  inset-inline: 0;\n  top: calc((var(--ds-calendar-day-height) - var(--ds-calendar-mark)) / 2);\n  height: var(--ds-calendar-mark);\n  background: var(--ds-calendar-band);\n  content: \"\";\n}\n:host([compact]) .day[data-first]::before { inset-inline-start: 50%; }\n:host([compact]) .day[data-last]::before { inset-inline-end: 50%; }\n:host([compact]) .day[data-inside] .date-line { align-items: center; padding: 0; }\n:host([compact][selectable]) .day[data-inside]:hover .date { background: transparent; }\n\n/* In a compact month the pointer's day and the chosen day take squares with the system's corners; today keeps its disc. */\n:host([compact]) .date { border-radius: var(--ds-radius); }\n:host([compact]) .day[data-today]:not([data-selected]) .date { border-radius: 999px; }\n\n/* The picker: a field that opens the small month. */\n:host([picker]) {\n  display: inline-flex;\n  width: max-content !important;\n  flex: 0 0 auto !important;\n  justify-self: start !important;\n  max-width: 100%;\n  align-items: flex-end;\n  vertical-align: bottom;\n  height: var(--ds-unit);\n}\n\n.trigger {\n  display: inline-flex;\n  align-items: center;\n  gap: calc(4px * var(--ds-sf, 1));\n  width: max-content !important;\n  max-width: 100%;\n  padding-inline: calc(4px * var(--ds-sf, 1)) calc(2px * var(--ds-sf, 1));\n  text-align: start;\n  cursor: pointer;\n}\n.trigger:disabled { cursor: default; }\n.trigger .arrow { flex: 0 0 auto; }\n.trigger .text {\n  flex: 1 1 auto;\n  min-width: 0;\n  overflow: hidden;\n  text-overflow: clip;\n  white-space: nowrap;\n}\n.trigger[data-empty] .text { color: var(--ds-title-color); }\n\n/* The month's panel, on the menu's frame. */\n.popover {\n  position: fixed;\n  inset: auto;\n  box-sizing: border-box;\n  margin: 0;\n  padding: 0;\n  border: 0;\n  border-radius: var(--ds-radius-card);\n  background: var(--ds-paper);\n  color: var(--ds-text-color);\n  box-shadow: none;\n  overflow: visible;\n}\n.popover:not(:popover-open) { display: none; }\n\n/* The days to type: a row of one square for each end, its time on the row below; one square spare after. */\n.fields { margin-block-end: 0; }\n.field-row {\n  display: flex;\n  align-items: flex-end;\n  gap: calc(var(--ds-unit) / 2);\n  height: var(--ds-unit);\n}\n.field { flex: 1 1 auto; min-width: 0; }\n.clock { flex: 1 1 auto; min-width: 0; }\n.fields, .options { width: calc(7 * var(--ds-unit)); }\n\n/* Include time and Clear, each one square, the words on the sixteen. */\n.option {\n  box-sizing: border-box;\n  display: flex;\n  align-items: flex-end;\n  justify-content: space-between;\n  gap: var(--ds-unit);\n  width: 100%;\n  height: var(--ds-unit);\n  margin: 0;\n  padding: 0 calc(4px * var(--ds-sf, 1));\n  border: 0;\n  border-radius: var(--ds-radius);\n  background: transparent;\n  color: var(--ds-text-color);\n  font: inherit;\n  letter-spacing: inherit;\n  text-align: start;\n  cursor: pointer;\n}\n.option:hover:not(:disabled) { background: var(--ds-row-fill-hover, var(--ds-fill)); }\n.option:focus-visible { outline: 2px solid var(--ds-focus-ring); outline-offset: -2px; }\n.option:disabled { color: var(--ds-title-color); cursor: default; }\n.option .ds-switch { flex: 0 0 auto; }\n\n/* Adjacent picker controls share one continuous menu surface. */\n.separator {\n  display: none;\n  position: relative;\n  height: 0;\n}\n.separator::after {\n  position: absolute;\n  inset-inline: 0;\n  top: calc(50% - 0.5px);\n  height: 1px;\n  background: var(--ds-border-color);\n  content: \"\";\n}\n\n@media (prefers-reduced-motion: no-preference) {\n  .popover:popover-open {\n    animation: ds-calendar-picker-in 140ms cubic-bezier(0.22, 1, 0.36, 1);\n  }\n}\n@keyframes ds-calendar-picker-in {\n  from { opacity: 0; transform: translateY(calc(-4px * var(--ds-sf, 1))); }\n  to { opacity: 1; transform: none; }\n}\n\n/* Day, Week and Month on a split button in the middle of the header, the\n * title at its start and Today and the arrows at its end. */\n.header[data-views] {\n  display: grid;\n  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);\n}\n.header[data-views] .controls { justify-self: end; }\n/* The title hugs its words in its column, never stretched across it. */\n.header[data-views] .title { justify-self: start; }\n.views { justify-self: center; }\n/* On a phone the title and the arrows keep the first row, and Day, Week and\n * Month stand on a row of their own a square under them. */\n@media (max-width: 639px) {\n  .header[data-views] {\n    grid-template-columns: minmax(0, 1fr) auto;\n    grid-template-rows: var(--ds-unit) var(--ds-unit);\n    row-gap: var(--ds-unit);\n    height: auto;\n  }\n  .header[data-views] .views { grid-column: 1 / -1; grid-row: 2; justify-self: start; }\n}\n\n/* One day: its events without a time on lines a day wide across the top, then\n * its hours, one square each with a hairline at the foot, in an area twelve\n * squares high that scrolls; an hour's events stand a day wide beside each\n * other after its name and wrap onto more squares when they need them. */\n.day-view { width: calc(7 * var(--ds-calendar-day)); }\n.all-day {\n  display: grid;\n  grid-template-columns: repeat(7, var(--ds-calendar-day));\n  padding-block-end: var(--ds-unit);\n}\n.hours {\n  position: relative;\n  height: calc(12 * var(--ds-unit));\n  overflow-y: auto;\n  box-sizing: border-box;\n  border: var(--ds-calendar-line);\n  border-radius: var(--ds-calendar-radius);\n}\n.hour:last-child { border-block-end: 0; }\n.hour {\n  box-sizing: border-box;\n  display: flex;\n  align-items: flex-start;\n  min-height: var(--ds-unit);\n  border-block-end: var(--ds-calendar-line);\n}\n.hour-name {\n  box-sizing: border-box;\n  flex: 0 0 calc(2 * var(--ds-unit));\n  height: calc(var(--ds-unit) - 1px);\n  padding-block-start: calc(3px * var(--ds-sf, 1));\n  padding-inline-start: var(--ds-calendar-pad);\n  color: var(--ds-title-color);\n  font-variant-numeric: tabular-nums;\n  line-height: calc(16px * var(--ds-sf, 1));\n  white-space: nowrap;\n}\n.hour-events {\n  display: flex;\n  flex: 1 1 auto;\n  flex-wrap: wrap;\n  min-width: 0;\n}\n.hour-events .event,\n.all-day .event { width: calc(var(--ds-calendar-day) - 1.5px); }\n\n\n/* A swimlane: weeks across, a square each (20 by 20), so the month's width\n * holds a week to each of its squares, 28 at the default. Over them the\n * months, one square, a name where the month owning the week changes, and\n * each week's first date, one square, centred in the title grey (today's\n * week writes today in its disc). Then a row to an event, a square high, in\n * the month's hairline boxes and rounded frame; an event is one bar from its\n * first week to its last, filled with its colour, its name on the sixteen,\n * written once and fading where it is cut. */\n.swimlane {\n  --ds-calendar-week: var(--ds-unit);\n  width: calc(var(--ds-calendar-weeks) * var(--ds-calendar-week));\n}\n[data-swipe] .swimlane { touch-action: pan-y; }\n.swimlane-months,\n.swimlane-dates,\n.swimlane-grid {\n  display: grid;\n  grid-template-columns: repeat(var(--ds-calendar-weeks), var(--ds-calendar-week));\n}\n.swimlane-months,\n.swimlane-dates { height: var(--ds-unit); }\n.swimlane-month {\n  box-sizing: border-box;\n  min-width: 0;\n  height: var(--ds-unit);\n  padding: calc(4px * var(--ds-sf, 1)) var(--ds-calendar-pad) 0;\n  overflow: hidden;\n  text-overflow: clip;\n  white-space: nowrap;\n}\n.swimlane-date {\n  box-sizing: border-box;\n  display: flex;\n  align-items: flex-end;\n  justify-content: center;\n  height: var(--ds-unit);\n  font-variant-numeric: tabular-nums;\n  letter-spacing: 0;\n}\n.swimlane-date .date { color: var(--ds-title-color); }\n.swimlane-date:not([data-today]) .date { min-width: 0; height: auto; }\n.swimlane-date[data-today] { align-items: center; }\n.swimlane-date[data-today] .date { background: var(--ds-calendar-today); color: var(--ds-calendar-today-ink); letter-spacing: 0; }\n.swimlane-grid { grid-template-rows: repeat(var(--ds-calendar-rows), var(--ds-calendar-week)); }\n.swimlane-grid .cell { position: relative; box-sizing: border-box; min-width: 0; }\n.swimlane-grid .cell::after {\n  position: absolute;\n  inset: -0.5px;\n  border-block-start: var(--ds-calendar-line);\n  border-inline-start: var(--ds-calendar-line);\n  content: \"\";\n  pointer-events: none;\n}\n.swimlane-grid .cell[data-last-column]::after { border-inline-end: var(--ds-calendar-line); }\n.swimlane-grid .cell[data-last-row]::after { border-block-end: var(--ds-calendar-line); }\n.swimlane-grid .cell[data-first-row][data-first-column]::after { border-start-start-radius: var(--ds-calendar-radius); }\n.swimlane-grid .cell[data-first-row][data-last-column]::after { border-start-end-radius: var(--ds-calendar-radius); }\n.swimlane-grid .cell[data-last-row][data-first-column]::after { border-end-start-radius: var(--ds-calendar-radius); }\n.swimlane-grid .cell[data-last-row][data-last-column]::after { border-end-end-radius: var(--ds-calendar-radius); }\n.swimlane-grid .event {\n  position: relative;\n  z-index: 1;\n  height: calc(var(--ds-calendar-week) - 1px);\n  min-width: 0;\n  padding-block: 0;\n  border: 0;\n  font: inherit;\n  letter-spacing: inherit;\n  text-align: start;\n}\n.swimlane-grid .event:hover { background: color-mix(in srgb, var(--ds-calendar-event-fill, var(--ds-fill)) 88%, var(--ds-text-color)); }\n.swimlane-grid .event:focus-visible { outline: 2px solid var(--ds-focus-ring); outline-offset: -2px; }\n\n/* A page's own view, chosen in the switch: what the page puts in the slot of\n * its name, under the header and as wide as the month. */\n.own-view { width: calc(7 * var(--ds-calendar-day)); }\n\n/* Fixed, every view stands in the six-week month's height (--ds-calendar-area),\n * so nothing under the calendar moves when the view changes: the week's days\n * grow to it, the day's hours fill what the untimed events leave, the\n * swimlane's rows fill it under the months and dates and scroll past it, and a\n * page's own view gets it and scrolls inside. */\n:host([fixed]:not([compact])) .grid[data-view=\"week\"] .week .day { height: var(--ds-calendar-area); }\n:host([fixed]) :is(.swimlane, .own-view, .day-view) { box-sizing: border-box; height: var(--ds-calendar-area); }\n:host([fixed]) .own-view { overflow: auto; }\n:host([fixed]) .day-view { display: flex; flex-direction: column; }\n:host([fixed]) .day-view .hours { flex: 1 1 auto; min-height: 0; height: auto; }\n:host([fixed]) .swimlane-scroll {\n  max-height: calc(var(--ds-calendar-fit) * var(--ds-calendar-week));\n  overflow-x: hidden;\n  overflow-y: auto;\n  scrollbar-width: thin;\n  /* Room for the frame's hairlines, which stand half a pixel outside the cells. */\n  margin: -0.5px;\n  padding: 0.5px;\n}\n\n/* Activity: the days as quiet squares, a contribution grid on the swimlane's\n * footing. Every other weekday is named down the start in the title grey,\n * two squares wide; the months stand over their weeks; a week is a column a\n * square wide with its days down it, each a square drawn two pixels in with a\n * picture's corners, quiet in the fill or filled with its events' colours. */\n.activity {\n  display: grid;\n  grid-template-columns: calc(2 * var(--ds-unit)) max-content;\n  align-items: start;\n}\n.activity-rail {\n  display: grid;\n  grid-template-rows: repeat(7, var(--ds-unit));\n  padding-block-start: var(--ds-unit);\n  color: var(--ds-title-color);\n}\n.activity-weekday {\n  box-sizing: border-box;\n  height: var(--ds-unit);\n  padding-block-start: calc(4px * var(--ds-sf, 1));\n  overflow: hidden;\n  white-space: nowrap;\n}\n.activity-months,\n.activity-grid {\n  display: grid;\n  grid-template-columns: repeat(var(--ds-calendar-weeks), var(--ds-unit));\n}\n.activity-months { height: var(--ds-unit); }\n.activity-month {\n  box-sizing: border-box;\n  min-width: 0;\n  height: var(--ds-unit);\n  padding-block-start: calc(4px * var(--ds-sf, 1));\n  overflow: visible;\n  white-space: nowrap;\n}\n.activity-grid { grid-template-rows: repeat(7, var(--ds-unit)); }\n.activity-row { display: contents; }\n.activity-hidden {\n  position: absolute;\n  width: 1px;\n  height: 1px;\n  overflow: hidden;\n  clip-path: inset(50%);\n  white-space: nowrap;\n}\n.activity-day { position: relative; }\n.activity-day[data-day]::before {\n  content: \"\";\n  position: absolute;\n  inset: calc(2px * var(--ds-sf, 1));\n  border-radius: calc(2px * var(--ds-sf, 1));\n  background: var(--ds-calendar-cell-fill, var(--ds-fill));\n}\n:host([selectable]) .activity-day[data-day] { cursor: pointer; }\n.activity-day[data-selected]::before { outline: 1px solid var(--ds-text-color); }\n/* On a narrow screen the weekdays take one letter. */\n@media (max-width: 720px) {\n  .activity-weekday:not(:empty) { font-size: 0; }\n  .activity-weekday:not(:empty)::after { content: attr(data-narrow); font-size: var(--ds-type-size-default); }\n}\n";
+var ds_calendar_default = "/* ds-calendar.css\n * A month on whole squares. A day is --ds-calendar-day-squares wide (four,\n * one when compact) and, beside its date's square, holds --ds-calendar-lines\n * one-square lines of events and one square to spare. Every line of words\n * stands on the lower sixteen of its square. The boxes are hairlines centred\n * on the grid lines, the month's frame rounded more than a card, as a larger\n * thing wears a larger curve; a full month names its days inside the first\n * week's boxes, and writes a week's number on its first day; today is a red\n * disc nine tenths of a square across, its weekday's name in the same red.\n *\n * A picker is a field's face: one control high at the foot of its square,\n * as wide as its words (it hugs them, as a button does), its words 4px in and the chevron-down icon\n * (16px, 2px from the end) at its end; a range is one value. Its month opens on the menu's frame, half a square from\n * the field: a 1px line, half a square inside it, no shadow, so eight squares\n * wide. Inside, on whole squares: the first and last day to type (each with\n * its time below when times are on), one square spare, the compact month one\n * square a day, then Include time and Clear, each one square, set off by\n * one-square separators with a line through them. */\n\n:host {\n  --ds-calendar-day: calc(var(--ds-unit) * var(--ds-calendar-day-squares, 4));\n  --ds-calendar-day-height: calc(var(--ds-unit) * (var(--ds-calendar-lines, 2) + 2));\n  /* The weekdays' own row over the days: none in a full month, whose first week names them; a square when compact. */\n  --ds-calendar-weekdays: 0px;\n  /* The month's height under its header, fixed: six weeks. Every view takes it with `fixed`. */\n  --ds-calendar-area: calc(var(--ds-calendar-weekdays) + 6 * var(--ds-calendar-day-height));\n  --ds-calendar-line: 1px solid var(--ds-border-color);\n  /* Three times a card's corner, at most a square: twelve pixels on the base card, none where cards are square. */\n  --ds-calendar-radius: clamp(0px, calc(3 * var(--ds-radius-card, calc(4px * var(--ds-sf, 1)))), var(--ds-unit));\n  --ds-calendar-today: var(--ds-red-for-blood);\n  --ds-calendar-today-ink: var(--ds-white, #fff);\n  --ds-calendar-selected: var(--ds-sharp-blue);\n  --ds-calendar-selected-ink: var(--ds-white, #fff);\n  --ds-calendar-band: color-mix(in srgb, var(--ds-calendar-selected) 16%, var(--ds-paper));\n  --ds-calendar-mark: calc(var(--ds-unit) * 0.9);\n  --ds-calendar-pad: calc(4px * var(--ds-sf, 1));\n  /* Heat, in four steps of the accent: its pastel, between, the colour, and\n     past it (deepened with the ink on light paper, the full colour on dark).\n     The words are the ink on every step but the two darkest on dark paper. */\n  --ds-calendar-heat-1: var(--one-apple-green-pastel, color-mix(in srgb, var(--ds-apple-green) 40%, var(--ds-paper)));\n  --ds-calendar-heat-3: var(--one-apple-green, var(--ds-apple-green));\n  --ds-calendar-heat-2: color-mix(in srgb, var(--ds-calendar-heat-1), var(--ds-calendar-heat-3));\n  --ds-calendar-heat-4: light-dark(color-mix(in srgb, var(--ds-apple-green) 60%, var(--ds-slate)), var(--ds-apple-green));\n  --ds-calendar-heat-ink-1: light-dark(var(--ds-slate), var(--ds-white));\n  --ds-calendar-heat-ink-2: light-dark(var(--ds-slate), var(--ds-white));\n  --ds-calendar-heat-ink-3: var(--ds-slate);\n  --ds-calendar-heat-ink-4: var(--ds-slate);\n  box-sizing: border-box;\n  display: inline-block;\n  vertical-align: top;\n  color: var(--ds-text-color);\n  font-family: \"Inter Arrows\", var(--ds-typeface-regular);\n  font-feature-settings: var(--ds-font-features);\n  font-size: var(--ds-type-size-default);\n  font-weight: var(--ds-type-weight-default);\n  line-height: var(--ds-type-lineheight-default);\n  letter-spacing: var(--ds-type-letterspacing-default);\n}\n:host([hidden]) { display: none !important; }\n/* A compact day is square: one square, or two where the month has room. Its marks grow with it. */\n:host([compact]) {\n  --ds-calendar-weekdays: var(--ds-unit);\n  --ds-calendar-day-height: var(--ds-calendar-day);\n  --ds-calendar-mark: calc(var(--ds-unit) * (var(--ds-calendar-day-squares, 1) * 0.75 + 0.15));\n}\n\n.calendar { width: calc(7 * var(--ds-calendar-day)); }\n\n/* The title and the arrows: one square, one square above the days (none when compact). */\n.header {\n  box-sizing: border-box;\n  display: flex;\n  align-items: flex-end;\n  gap: var(--ds-calendar-pad);\n  height: var(--ds-unit);\n  margin-block-end: var(--ds-unit);\n}\n:host([compact]) .header { margin-block-end: 0; }\n.title {\n  flex: 1 1 auto;\n  min-width: 0;\n  overflow: hidden;\n  font-family: \"Inter Arrows\", var(--ds-typeface-medium, var(--ds-typeface-regular));\n  text-overflow: clip;\n  white-space: nowrap;\n}\n.controls {\n  display: flex;\n  flex: 0 0 auto;\n  margin-inline-start: auto;\n  align-items: flex-end;\n  gap: 0;\n}\n/* A step back, Today and a step on: a plain split button, the segments a hair apart and one\n * control high at the square's foot, their words and arrows in the title grey on no ground in\n * any state; the pointer inks them. */\n.controls { gap: 1px; }\n:is(.nav, .today-button) {\n  appearance: none;\n  box-sizing: border-box;\n  display: inline-flex;\n  flex: 0 0 auto;\n  align-items: center;\n  justify-content: center;\n  height: var(--ds-control-height);\n  margin: 0;\n  padding: 0 calc(5px * var(--ds-sf, 1));\n  border: 0;\n  border-radius: var(--ds-radius);\n  background: transparent;\n  color: var(--ds-title-color);\n  font: inherit;\n  line-height: var(--ds-control-height);\n  letter-spacing: inherit;\n  white-space: nowrap;\n  cursor: pointer;\n  -webkit-tap-highlight-color: transparent;\n}\n.nav { width: var(--ds-control-height); padding: 0; }\n.nav > ds-icon { --ds-icon-size: 16px; color: inherit; }\n:is(.nav, .today-button):hover:not(:disabled) { color: var(--ds-text-color); }\n:is(.nav, .today-button):focus-visible { outline: 1px solid currentColor; outline-offset: -2px; }\n.nav:disabled { cursor: default; opacity: 0.5; }\n:host(:dir(rtl)) .nav > ds-icon { transform: scaleX(-1); }\n/* A compact month's arrows are chevrons a square wide each, filled under the pointer. */\n:host([compact]) .nav { width: var(--ds-unit); }\n:host([compact]) .nav:hover:not(:disabled) { background: var(--ds-fill); }\n\n/* The title as a plain button, its words alone: pressing it travels up to the months of the year,\n * then to twelve years. One control high at the square's foot, the words on the sixteen where the\n * title stands, hugging them: never a bar across the header, the pointer filling it only 4px past\n * the words at each side. */\n.title-button {\n  display: inline-flex;\n  flex: 0 1 auto;\n  align-items: center;\n  gap: 0;\n  max-width: 100%;\n  height: var(--ds-control-height);\n  margin: 0 0 0 calc(-4px * var(--ds-sf, 1));\n  padding: 0 calc(4px * var(--ds-sf, 1));\n  border: 0;\n  border-radius: var(--ds-radius);\n  background: transparent;\n  color: var(--ds-text-color);\n  font: inherit;\n  font-family: \"Inter Arrows\", var(--ds-typeface-medium, var(--ds-typeface-regular));\n  line-height: var(--ds-control-height);\n  letter-spacing: inherit;\n  cursor: pointer;\n}\n:host(:dir(rtl)) .title-button { margin: 0 calc(-4px * var(--ds-sf, 1)) 0 0; }\n.title-button:hover { background: var(--ds-fill); }\n.title-button:focus-visible { outline: 2px solid var(--ds-focus-ring); outline-offset: -2px; }\n.title-text { min-width: 0; overflow: hidden; text-overflow: clip; white-space: nowrap; }\n/* Cut words fade over their last square, never an ellipsis: the title, a weekday's name and\n   the picker's value (0-face/cut-fade.ts marks them; an event's name is drawn below). */\n:is(.title, .title-text, .weekday, .trigger .text, .swimlane-month)[data-cut=\"end\"] { mask-image: linear-gradient(to right, #000 calc(100% - var(--ds-unit)), transparent); }\n:host(:dir(rtl)) :is(.title, .title-text, .weekday, .trigger .text, .swimlane-month)[data-cut=\"end\"] { mask-image: linear-gradient(to left, #000 calc(100% - var(--ds-unit)), transparent); }\n\n/* The months of a year, or twelve years: cells whole squares wide, three across a narrow month\n * and four across a wider one, each row one square, one square apart. The area keeps the days'\n * height, so nothing below moves between levels. */\n.picks {\n  box-sizing: border-box;\n  height: calc(var(--ds-calendar-weekdays) + var(--ds-calendar-weeks, 6) * var(--ds-calendar-day-height));\n  outline: none;\n}\n.pick-row {\n  display: grid;\n  grid-template-columns: repeat(var(--ds-calendar-pick-columns, 3), calc(var(--ds-calendar-pick-cell, 2) * var(--ds-unit)));\n  height: var(--ds-unit);\n  margin-block-end: var(--ds-unit);\n}\n/* Each choice hugs its words, one control high on the row's sixteen and padded 4px from them, as\n * a button is, in the middle of its cell; never stretched to fill the cell. */\n.pick {\n  box-sizing: border-box;\n  display: flex;\n  align-items: flex-end;\n  justify-content: center;\n  min-width: 0;\n  height: var(--ds-unit);\n  margin: 0;\n  padding: 0;\n  border: 0;\n  background: transparent;\n  color: var(--ds-text-color);\n  font: inherit;\n  letter-spacing: inherit;\n  cursor: pointer;\n  outline: none;\n}\n.pick-mark {\n  box-sizing: border-box;\n  display: inline-flex;\n  flex: 0 1 auto;\n  align-items: center;\n  justify-content: center;\n  max-width: 100%;\n  height: var(--ds-control-height);\n  padding: 0 calc(4px * var(--ds-sf, 1));\n  overflow: hidden;\n  border-radius: var(--ds-radius);\n  line-height: var(--ds-control-height);\n  font-variant-numeric: tabular-nums;\n  white-space: nowrap;\n}\n.pick:hover:not(:disabled):not([data-today], [data-selected]) .pick-mark { background: var(--ds-fill); }\n.pick:focus-visible .pick-mark { outline: 2px solid var(--ds-focus-ring); outline-offset: -1px; }\n/* The current month or year and the chosen one take the accent, as a chosen segment does. */\n.pick:is([data-today], [data-selected]) .pick-mark { background: var(--ds-accent-color); color: var(--ds-button-text-color-on-accent); }\n.pick:disabled { color: var(--ds-title-color); cursor: default; opacity: 0.5; }\n\n/* Clear, only while something is chosen: a button one control high, centred on the square right under the dates. */\n.foot {\n  display: flex;\n  align-items: flex-end;\n  justify-content: center;\n  height: var(--ds-unit);\n}\n\n@media (prefers-reduced-motion: no-preference) {\n  :is(.grid, .picks, .swimlane, .own-view)[data-travel] { animation: ds-calendar-level 160ms cubic-bezier(0.22, 1, 0.36, 1); }\n}\n@keyframes ds-calendar-level {\n  from { opacity: 0; transform: scale(0.98); }\n  to { opacity: 1; transform: none; }\n}\n\n.grid { outline: none; }\n/* A calendar with a header takes sideways touches on its days and months for its swipe (ds-calendar.ts),\n   so a carousel or a page around it stays put; up and down still scroll the page. */\n[data-swipe] :is(.grid, .picks) { touch-action: pan-y; }\n.weekdays,\n.week {\n  display: grid;\n  grid-template-columns: repeat(7, var(--ds-calendar-day));\n}\n\n/* The weekday names: a block line in the title grey, at the start of a wide day, centred on a compact one. */\n.weekday {\n  box-sizing: border-box;\n  height: var(--ds-unit);\n  padding: calc(4px * var(--ds-sf, 1)) var(--ds-calendar-pad) 0;\n  overflow: hidden;\n  color: var(--ds-title-color);\n  text-overflow: clip;\n  white-space: nowrap;\n}\n:host([compact]) .weekday { padding-inline: 0; text-align: center; }\n/* A full month's weekdays are named inside its first week's boxes; the row stays for those who listen. */\n:host(:not([compact])) .weekdays {\n  position: absolute;\n  width: 1px;\n  height: 1px;\n  overflow: hidden;\n  clip-path: inset(50%);\n  white-space: nowrap;\n}\n\n/* A day's box: hairlines on the grid lines, top and start; the last column\n * and the last week close it at the end and the foot. */\n.day {\n  position: relative;\n  box-sizing: border-box;\n  min-width: 0;\n  height: var(--ds-calendar-day-height);\n  outline: none;\n}\n.day::after {\n  position: absolute;\n  inset: -0.5px;\n  border-block-start: var(--ds-calendar-line);\n  border-inline-start: var(--ds-calendar-line);\n  content: \"\";\n  pointer-events: none;\n}\n.day:nth-child(7)::after { border-inline-end: var(--ds-calendar-line); }\n.week:last-child .day::after { border-block-end: var(--ds-calendar-line); }\n/* The month's frame has a card's rounded corners, as a framed table does: the\n * four corner days round their box, its hairlines and whatever fills it. */\n.weekdays + .week .day:first-child,\n.weekdays + .week .day:first-child::after { border-start-start-radius: var(--ds-calendar-radius); }\n.weekdays + .week .day:nth-child(7),\n.weekdays + .week .day:nth-child(7)::after { border-start-end-radius: var(--ds-calendar-radius); }\n.week:last-child .day:first-child,\n.week:last-child .day:first-child::after { border-end-start-radius: var(--ds-calendar-radius); }\n.week:last-child .day:nth-child(7),\n.week:last-child .day:nth-child(7)::after { border-end-end-radius: var(--ds-calendar-radius); }\n:host([compact]) .day { border-radius: 0; }\n:host([compact]) .day::after { content: none; }\n\n.day[data-day] { cursor: default; }\n:host([selectable]) .day[data-day]:not([aria-disabled=\"true\"]) { cursor: pointer; }\n:host([selectable]:not([compact])) .day[data-day]:not([aria-disabled=\"true\"]):hover { background: var(--ds-row-fill-hover, var(--ds-fill)); }\n.day:focus-visible { outline: 2px solid var(--ds-focus-ring); outline-offset: -2px; }\n:host([compact]) .day:focus-visible { outline: none; }\n:host([compact]) .day:focus-visible .date { outline: 2px solid var(--ds-focus-ring); outline-offset: -1px; }\n\n/* The date: on the first square, at the end of a wide day, in the title grey; before it, at the\n * day's start, the first week's weekday name and the week's number in the compressed face. */\n.date-line {\n  box-sizing: border-box;\n  display: flex;\n  align-items: flex-end;\n  justify-content: flex-end;\n  gap: var(--ds-calendar-pad);\n  height: var(--ds-unit);\n  padding-inline: var(--ds-calendar-pad);\n}\n.date {\n  margin-inline-start: auto;\n  color: var(--ds-title-color);\n  font-variant-numeric: tabular-nums;\n}\n.weekday-name,\n.week-number {\n  flex: 0 0 auto;\n  color: var(--ds-title-color);\n  white-space: nowrap;\n}\n.weekday-name[data-today] { color: var(--ds-calendar-today); }\n.week-number { font-family: \"Inter Arrows\", var(--ds-typeface-compressed); }\n.day.outside .date-line { justify-content: flex-start; }\n\n/* A compact day: the date centred in its square, in the ink; with events,\n * the empty days fall back to the title grey and the busy ones keep the ink. */\n:host([compact]) .date-line { justify-content: center; padding: 0; }\n:host([compact]) .date { margin-inline-start: 0; }\n:host([compact]) .date { color: var(--ds-text-color); }\n:host([compact][data-events]) .day:not([data-busy]) .date { color: var(--ds-title-color); }\n:host([compact][selectable]) .day[data-day]:not([aria-disabled=\"true\"], [data-today], [data-selected]):hover .date { background: var(--ds-fill); }\n\n/* Today and the selected day: a disc nine tenths of a square, centred on the date's square. */\n.day:is([data-today], [data-selected]) .date-line { padding-inline-end: calc(var(--ds-unit) * 0.05); }\n.day:is([data-today], [data-selected]) .date { align-self: center; }\n:host([compact]) .day:is([data-today], [data-selected]) .date-line { padding: 0; }\n.date {\n  box-sizing: border-box;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  min-width: var(--ds-calendar-mark);\n  height: var(--ds-calendar-mark);\n  border-radius: 999px;\n}\n.day:not([data-today], [data-selected]) .date { min-width: 0; height: auto; }\n:host([compact]) .day .date { min-width: var(--ds-calendar-mark); height: var(--ds-calendar-mark); }\n.day[data-today] .date { background: var(--ds-calendar-today); color: var(--ds-calendar-today-ink); letter-spacing: 0; }\n/* Today's ink holds in a compact month too, where quiet days take the title colour and the text colour above. */\n:host([compact]) .day[data-today] .date,\n:host([compact][data-events]) .day[data-today]:not([data-busy]) .date { color: var(--ds-calendar-today-ink); }\n/* The selected day, and each end of a range: a square with the system's corners in the selection's blue. */\n.day[data-selected] .date { border-radius: var(--ds-radius); background: var(--ds-calendar-selected); color: var(--ds-calendar-selected-ink); letter-spacing: 0; }\n\n.day[aria-disabled=\"true\"] .date { color: var(--ds-title-color); opacity: 0.5; }\n\n/* Heat: the date's mark filled by its step, a picture's corners, inside the day's square; today and the selection draw over it. */\n.day[data-heat]:not([data-today], [data-selected]) .date-line { padding-inline-end: calc(var(--ds-unit) * 0.05); }\n.day[data-heat]:not([data-today], [data-selected]) .date { align-self: center; }\n.day[data-heat]:not([data-today], [data-selected]) .date {\n  min-width: var(--ds-calendar-mark);\n  height: var(--ds-calendar-mark);\n  border-radius: var(--ds-radius);\n  letter-spacing: 0;\n}\n.day[data-heat=\"1\"]:not([data-today], [data-selected]) .date { background: var(--ds-calendar-heat-1); color: var(--ds-calendar-heat-ink-1); }\n.day[data-heat=\"2\"]:not([data-today], [data-selected]) .date { background: var(--ds-calendar-heat-2); color: var(--ds-calendar-heat-ink-2); }\n.day[data-heat=\"3\"]:not([data-today], [data-selected]) .date { background: var(--ds-calendar-heat-3); color: var(--ds-calendar-heat-ink-3); }\n.day[data-heat=\"4\"]:not([data-today], [data-selected]) .date { background: var(--ds-calendar-heat-4); color: var(--ds-calendar-heat-ink-4); }\n:host([compact]) .day[data-heat]:not([data-today], [data-selected]) .date-line { padding: 0; }\n\n/* Events: one square each, stacked edge to edge on the day's lines, drawn one pixel short. */\n.events {\n  display: flex;\n  flex-direction: column;\n}\n.event,\n.more {\n  box-sizing: border-box;\n  display: flex;\n  align-items: flex-end;\n  gap: var(--ds-calendar-pad);\n  height: calc(var(--ds-unit) - 1px);\n  /* A pixel at the start, so the day's line (and the month's frame) shows beside a bar. */\n  margin: 0.5px 0.5px 0.5px 1px;\n  padding-inline: var(--ds-calendar-pad);\n  overflow: hidden;\n  white-space: nowrap;\n}\n.event {\n  background: var(--ds-calendar-event-fill, var(--ds-fill));\n  color: var(--ds-calendar-event-ink, var(--ds-text-color));\n  cursor: pointer;\n}\n.event .name { min-width: 0; overflow: hidden; }\n/* A name its bar cuts fades out over the bar's last square, at the end where it is cut. */\n.event .name[data-cut=\"end\"] { mask-image: linear-gradient(to right, #000 calc(100% - var(--ds-unit)), transparent); }\n:host(:dir(rtl)) .event .name[data-cut=\"end\"] { mask-image: linear-gradient(to left, #000 calc(100% - var(--ds-unit)), transparent); }\n/* An event over several days is one bar from its first day in the week,\n * drawn over the days after it (and their lines) with its name written once. */\n.event[data-span] {\n  position: relative;\n  z-index: 1;\n  width: calc(var(--ds-calendar-event-span) * var(--ds-calendar-day) - 1.5px);\n}\n/* A line a bar passes over, or an empty line above another event. */\n.line { flex: 0 0 auto; height: var(--ds-unit); }\n.event .time { flex: 0 0 auto; opacity: 0.6; font-variant-numeric: tabular-nums; }\n.more { color: var(--ds-title-color); cursor: pointer; }\n.more:hover { color: var(--ds-text-color); }\n\n/* A day whose hidden events are unfolded lays them over the days below. */\n.day[data-open] { z-index: 1; }\n.day[data-open] .events {\n  position: absolute;\n  inset-block-start: var(--ds-unit);\n  inset-inline: 0;\n  background: var(--ds-paper);\n  box-shadow: 0 0 0 1px var(--ds-border-color);\n}\n\n@media (prefers-reduced-motion: no-preference) {\n  .event, .more { transition: opacity 120ms ease; }\n}\n\n/* A compact day's date stands in the middle of its square once the square is two or more wide. */\n:host([compact][data-roomy]) .date-line { align-items: center; height: var(--ds-calendar-day-height); }\n\n/* The days of the months before and after, in the title grey. */\n.day[data-outside] .date { color: var(--ds-title-color); }\n:host([compact]) .day[data-outside] .date { color: var(--ds-title-color); }\n\n/* A range: the days between its ends on a band of the selection's blue; the band runs into each end's square. */\n/* In a month of boxes the band fills them; in a compact month it is the marks' height on their\n * line, from the middle of the first day to the middle of the last, so the ends and the band read\n * as one bar, the ends' squares drawn over it flush. */\n:host(:not([compact])) .day:is([data-inside], [data-first], [data-last]) { background: var(--ds-calendar-band); }\n:host([compact]) .day { isolation: isolate; }\n:host([compact]) .day:is([data-inside], [data-first], [data-last])::before {\n  position: absolute;\n  z-index: -1;\n  inset-inline: 0;\n  top: calc((var(--ds-calendar-day-height) - var(--ds-calendar-mark)) / 2);\n  height: var(--ds-calendar-mark);\n  background: var(--ds-calendar-band);\n  content: \"\";\n}\n:host([compact]) .day[data-first]::before { inset-inline-start: 50%; }\n:host([compact]) .day[data-last]::before { inset-inline-end: 50%; }\n:host([compact]) .day[data-inside] .date-line { align-items: center; padding: 0; }\n:host([compact][selectable]) .day[data-inside]:hover .date { background: transparent; }\n\n/* In a compact month the pointer's day and the chosen day take squares with the system's corners; today keeps its disc. */\n:host([compact]) .date { border-radius: var(--ds-radius); }\n:host([compact]) .day[data-today]:not([data-selected]) .date { border-radius: 999px; }\n\n/* The picker: a field that opens the small month. */\n:host([picker]) {\n  display: inline-flex;\n  width: max-content !important;\n  flex: 0 0 auto !important;\n  justify-self: start !important;\n  max-width: 100%;\n  align-items: flex-end;\n  vertical-align: bottom;\n  height: var(--ds-unit);\n}\n\n.trigger {\n  display: inline-flex;\n  align-items: center;\n  gap: calc(4px * var(--ds-sf, 1));\n  width: max-content !important;\n  max-width: 100%;\n  padding-inline: calc(4px * var(--ds-sf, 1)) calc(2px * var(--ds-sf, 1));\n  text-align: start;\n  cursor: pointer;\n}\n.trigger:disabled { cursor: default; }\n.trigger .arrow { flex: 0 0 auto; }\n.trigger .text {\n  flex: 1 1 auto;\n  min-width: 0;\n  overflow: hidden;\n  text-overflow: clip;\n  white-space: nowrap;\n}\n.trigger[data-empty] .text { color: var(--ds-title-color); }\n\n/* The month's panel, on the menu's frame. */\n.popover {\n  position: fixed;\n  inset: auto;\n  box-sizing: border-box;\n  margin: 0;\n  padding: 0;\n  border: 0;\n  border-radius: var(--ds-radius-card);\n  background: var(--ds-paper);\n  color: var(--ds-text-color);\n  box-shadow: none;\n  overflow: visible;\n}\n.popover:not(:popover-open) { display: none; }\n\n/* The days to type: a row of one square for each end, its time on the row below; one square spare after. */\n.fields { margin-block-end: 0; }\n.field-row {\n  display: flex;\n  align-items: flex-end;\n  gap: calc(var(--ds-unit) / 2);\n  height: var(--ds-unit);\n}\n.field { flex: 1 1 auto; min-width: 0; }\n.clock { flex: 1 1 auto; min-width: 0; }\n.fields, .options { width: calc(7 * var(--ds-unit)); }\n\n/* Include time and Clear, each one square, the words on the sixteen. */\n.option {\n  box-sizing: border-box;\n  display: flex;\n  align-items: flex-end;\n  justify-content: space-between;\n  gap: var(--ds-unit);\n  width: 100%;\n  height: var(--ds-unit);\n  margin: 0;\n  padding: 0 calc(4px * var(--ds-sf, 1));\n  border: 0;\n  border-radius: var(--ds-radius);\n  background: transparent;\n  color: var(--ds-text-color);\n  font: inherit;\n  letter-spacing: inherit;\n  text-align: start;\n  cursor: pointer;\n}\n.option:hover:not(:disabled) { background: var(--ds-row-fill-hover, var(--ds-fill)); }\n.option:focus-visible { outline: 2px solid var(--ds-focus-ring); outline-offset: -2px; }\n.option:disabled { color: var(--ds-title-color); cursor: default; }\n.option .ds-switch { flex: 0 0 auto; }\n\n/* Adjacent picker controls share one continuous menu surface. */\n.separator {\n  display: none;\n  position: relative;\n  height: 0;\n}\n.separator::after {\n  position: absolute;\n  inset-inline: 0;\n  top: calc(50% - 0.5px);\n  height: 1px;\n  background: var(--ds-border-color);\n  content: \"\";\n}\n\n@media (prefers-reduced-motion: no-preference) {\n  .popover:popover-open {\n    animation: ds-calendar-picker-in 140ms cubic-bezier(0.22, 1, 0.36, 1);\n  }\n}\n@keyframes ds-calendar-picker-in {\n  from { opacity: 0; transform: translateY(calc(-4px * var(--ds-sf, 1))); }\n  to { opacity: 1; transform: none; }\n}\n\n/* Day, Week and Month on a split button in the middle of the header, the\n * title at its start and Today and the arrows at its end. */\n.header[data-views] {\n  display: grid;\n  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);\n}\n.header[data-views] .controls { justify-self: end; }\n/* The title hugs its words in its column, never stretched across it. */\n.header[data-views] .title { justify-self: start; }\n.views { justify-self: center; }\n/* On a phone the title and the arrows keep the first row, and Day, Week and\n * Month stand on a row of their own a square under them. */\n@media (max-width: 639px) {\n  .header[data-views] {\n    grid-template-columns: minmax(0, 1fr) auto;\n    grid-template-rows: var(--ds-unit) var(--ds-unit);\n    row-gap: var(--ds-unit);\n    height: auto;\n  }\n  .header[data-views] .views { grid-column: 1 / -1; grid-row: 2; justify-self: start; }\n}\n\n/* One day: its events without a time on lines a day wide across the top, then\n * its hours, one square each with a hairline at the foot, in an area twelve\n * squares high that scrolls; an hour's events stand a day wide beside each\n * other after its name and wrap onto more squares when they need them. */\n.day-view { width: calc(7 * var(--ds-calendar-day)); }\n.all-day {\n  display: grid;\n  grid-template-columns: repeat(7, var(--ds-calendar-day));\n  padding-block-end: var(--ds-unit);\n}\n.hours {\n  position: relative;\n  height: calc(12 * var(--ds-unit));\n  overflow-y: auto;\n  box-sizing: border-box;\n  border: var(--ds-calendar-line);\n  border-radius: var(--ds-calendar-radius);\n}\n.hour:last-child { border-block-end: 0; }\n.hour {\n  box-sizing: border-box;\n  display: flex;\n  align-items: flex-start;\n  min-height: var(--ds-unit);\n  border-block-end: var(--ds-calendar-line);\n}\n.hour-name {\n  box-sizing: border-box;\n  flex: 0 0 calc(2 * var(--ds-unit));\n  height: calc(var(--ds-unit) - 1px);\n  padding-block-start: calc(3px * var(--ds-sf, 1));\n  padding-inline-start: var(--ds-calendar-pad);\n  color: var(--ds-title-color);\n  font-variant-numeric: tabular-nums;\n  line-height: calc(16px * var(--ds-sf, 1));\n  white-space: nowrap;\n}\n.hour-events {\n  display: flex;\n  flex: 1 1 auto;\n  flex-wrap: wrap;\n  min-width: 0;\n}\n.hour-events .event,\n.all-day .event { width: calc(var(--ds-calendar-day) - 1.5px); }\n\n\n/* A swimlane: weeks across, a square each (20 by 20), so the month's width\n * holds a week to each of its squares, 28 at the default. Over them the\n * months, one square, a name where the month owning the week changes, and\n * each week's first date, one square, centred in the title grey (today's\n * week writes today in its disc). Then a row to an event, a square high, in\n * the month's hairline boxes and rounded frame; an event is one bar from its\n * first week to its last, filled with its colour, its name on the sixteen,\n * written once and fading where it is cut. */\n.swimlane {\n  --ds-calendar-week: var(--ds-unit);\n  width: calc(var(--ds-calendar-weeks) * var(--ds-calendar-week));\n}\n[data-swipe] .swimlane { touch-action: pan-y; }\n.swimlane-months,\n.swimlane-dates,\n.swimlane-grid {\n  display: grid;\n  grid-template-columns: repeat(var(--ds-calendar-weeks), var(--ds-calendar-week));\n}\n.swimlane-months,\n.swimlane-dates { height: var(--ds-unit); }\n.swimlane-month {\n  box-sizing: border-box;\n  min-width: 0;\n  height: var(--ds-unit);\n  padding: calc(4px * var(--ds-sf, 1)) var(--ds-calendar-pad) 0;\n  overflow: hidden;\n  text-overflow: clip;\n  white-space: nowrap;\n}\n.swimlane-date {\n  box-sizing: border-box;\n  display: flex;\n  align-items: flex-end;\n  justify-content: center;\n  height: var(--ds-unit);\n  font-variant-numeric: tabular-nums;\n  letter-spacing: 0;\n}\n.swimlane-date .date { color: var(--ds-title-color); }\n.swimlane-date:not([data-today]) .date { min-width: 0; height: auto; }\n.swimlane-date[data-today] { align-items: center; }\n.swimlane-date[data-today] .date { background: var(--ds-calendar-today); color: var(--ds-calendar-today-ink); letter-spacing: 0; }\n.swimlane-grid { grid-template-rows: repeat(var(--ds-calendar-rows), var(--ds-calendar-week)); }\n.swimlane-grid .cell { position: relative; box-sizing: border-box; min-width: 0; }\n.swimlane-grid .cell::after {\n  position: absolute;\n  inset: -0.5px;\n  border-block-start: var(--ds-calendar-line);\n  border-inline-start: var(--ds-calendar-line);\n  content: \"\";\n  pointer-events: none;\n}\n.swimlane-grid .cell[data-last-column]::after { border-inline-end: var(--ds-calendar-line); }\n.swimlane-grid .cell[data-last-row]::after { border-block-end: var(--ds-calendar-line); }\n.swimlane-grid .cell[data-first-row][data-first-column]::after { border-start-start-radius: var(--ds-calendar-radius); }\n.swimlane-grid .cell[data-first-row][data-last-column]::after { border-start-end-radius: var(--ds-calendar-radius); }\n.swimlane-grid .cell[data-last-row][data-first-column]::after { border-end-start-radius: var(--ds-calendar-radius); }\n.swimlane-grid .cell[data-last-row][data-last-column]::after { border-end-end-radius: var(--ds-calendar-radius); }\n.swimlane-grid .event {\n  position: relative;\n  z-index: 1;\n  height: calc(var(--ds-calendar-week) - 1px);\n  min-width: 0;\n  padding-block: 0;\n  border: 0;\n  font: inherit;\n  letter-spacing: inherit;\n  text-align: start;\n}\n.swimlane-grid .event:hover { background: color-mix(in srgb, var(--ds-calendar-event-fill, var(--ds-fill)) 88%, var(--ds-text-color)); }\n.swimlane-grid .event:focus-visible { outline: 2px solid var(--ds-focus-ring); outline-offset: -2px; }\n\n/* A page's own view, chosen in the switch: what the page puts in the slot of\n * its name, under the header and as wide as the month. */\n.own-view { width: calc(7 * var(--ds-calendar-day)); }\n\n/* Fixed, every view stands in the six-week month's height (--ds-calendar-area),\n * so nothing under the calendar moves when the view changes: the week's days\n * grow to it, the day's hours fill what the untimed events leave, the\n * swimlane's rows fill it under the months and dates and scroll past it, and a\n * page's own view gets it and scrolls inside. */\n:host([fixed]:not([compact])) .grid[data-view=\"week\"] .week .day { height: var(--ds-calendar-area); }\n:host([fixed]) :is(.swimlane, .own-view, .day-view) { box-sizing: border-box; height: var(--ds-calendar-area); }\n:host([fixed]) .own-view { overflow: auto; }\n:host([fixed]) .day-view { display: flex; flex-direction: column; }\n:host([fixed]) .day-view .hours { flex: 1 1 auto; min-height: 0; height: auto; }\n:host([fixed]) .swimlane-scroll {\n  max-height: calc(var(--ds-calendar-fit) * var(--ds-calendar-week));\n  overflow-x: hidden;\n  overflow-y: auto;\n  scrollbar-width: thin;\n  /* Room for the frame's hairlines, which stand half a pixel outside the cells. */\n  margin: -0.5px;\n  padding: 0.5px;\n}\n\n/* Activity: the days as quiet squares, a contribution grid on the swimlane's\n * footing. Every other weekday is named down the start in the title grey,\n * two squares wide; the months stand over their weeks; a week is a column a\n * square wide with its days down it, each a square drawn two pixels in with a\n * picture's corners, quiet in the fill or filled with its events' colours. */\n.activity {\n  display: grid;\n  grid-template-columns: calc(2 * var(--ds-unit)) max-content;\n  align-items: start;\n}\n.activity-rail {\n  display: grid;\n  grid-template-rows: repeat(7, var(--ds-unit));\n  padding-block-start: var(--ds-unit);\n  color: var(--ds-title-color);\n}\n.activity-weekday {\n  box-sizing: border-box;\n  height: var(--ds-unit);\n  padding-block-start: calc(4px * var(--ds-sf, 1));\n  overflow: hidden;\n  white-space: nowrap;\n}\n.activity-months,\n.activity-grid {\n  display: grid;\n  grid-template-columns: repeat(var(--ds-calendar-weeks), var(--ds-unit));\n}\n.activity-months { height: var(--ds-unit); }\n.activity-month {\n  box-sizing: border-box;\n  min-width: 0;\n  height: var(--ds-unit);\n  padding-block-start: calc(4px * var(--ds-sf, 1));\n  overflow: visible;\n  white-space: nowrap;\n}\n.activity-grid { grid-template-rows: repeat(7, var(--ds-unit)); }\n.activity-row { display: contents; }\n.activity-hidden {\n  position: absolute;\n  width: 1px;\n  height: 1px;\n  overflow: hidden;\n  clip-path: inset(50%);\n  white-space: nowrap;\n}\n.activity-day { position: relative; }\n.activity-day[data-day]::before {\n  content: \"\";\n  position: absolute;\n  inset: calc(2px * var(--ds-sf, 1));\n  border-radius: calc(2px * var(--ds-sf, 1));\n  background: var(--ds-calendar-cell-fill, var(--ds-fill));\n}\n:host([selectable]) .activity-day[data-day] { cursor: pointer; }\n.activity-day[data-selected]::before { outline: 1px solid var(--ds-text-color); }\n/* On a narrow screen the weekdays take one letter. */\n@media (max-width: 720px) {\n  .activity-weekday:not(:empty) { font-size: 0; }\n  .activity-weekday:not(:empty)::after { content: attr(data-narrow); font-size: var(--ds-type-size-default); }\n}\n";
 //#endregion
 //#region DS1/3-unit/ds-calendar.ts
 var _Calendar;
@@ -14928,10 +15268,10 @@ _Form.styles = i$5`
       pointer-events: none;
     }
   `;
-customElements.define("ds-form", Form);
+define("ds-form", Form);
 //#endregion
 //#region DS1/3-unit/styles/ds-list.css?inline
-var ds_list_default = "/* Shape is a surface preference. Keep these base lengths unscaled: each\n * component resolves them with its own --ds-sf in component-metrics.css. */\n[data-ds-shape=\"square\"],\n:host([data-ds-shape=\"square\"]) {\n  --ds-corner-size: 0px;\n  --ds-corner-shape: round;\n  --ds-button-inset: 0.5px;\n}\n\n[data-ds-shape=\"rounded\"],\n:host([data-ds-shape=\"rounded\"]) {\n  --ds-corner-size: 4px;\n  --ds-corner-shape: round;\n  --ds-button-inset: 2.5px;\n}\n\n[data-ds-shape=\"circular\"],\n:host([data-ds-shape=\"circular\"]) {\n  --ds-corner-size: 999px;\n  --ds-corner-shape: round;\n  --ds-button-inset: 5px;\n}\n\n/* A squircle needs twice an arc's radius for the same apparent corner.\n * Circular controls keep true semicircles even in a squircle browser. */\n@supports (corner-shape: squircle) {\n  [data-ds-shape=\"rounded\"],\n  :host([data-ds-shape=\"rounded\"]) {\n    --ds-corner-size: 8px;\n    --ds-corner-shape: squircle;\n  }\n}\n/* Resolve dimensions where a component is drawn. Inherited calc() values have\n * already used their ancestor's scale. Base tokens stay unscaled and inherit;\n * resolved tokens can still be overridden directly on a component.\n * data-ds-surface gives ordinary layout elements the same scaled measures.\n */\n:root,\n:host,\n:where([data-ds-surface]) {\n  --ds-unit: calc(var(--ds-1, 20px) * var(--ds-sf, 1));\n  --ds-control-height: calc(var(--ds-control-size, var(--ds-08, 16px)) * var(--ds-sf, 1));\n  --ds-row-height: calc(var(--ds-row-size, var(--ds-1, 20px)) * var(--ds-sf, 1));\n  --ds-type-size-default: calc(var(--ds-text-size, 14px) * var(--ds-sf, 1));\n  --ds-type-size-small: calc(var(--ds-small-text-size, 10px) * var(--ds-sf, 1));\n  --ds-type-size-heading: calc(var(--ds-heading-text-size, 13px) * var(--ds-sf, 1));\n  --ds-type-size-display: calc(var(--ds-display-text-size, 20px) * var(--ds-sf, 1));\n  --ds-type-lineheight-default: calc(var(--ds-text-leading, 16px) * var(--ds-sf, 1));\n  --ds-type-letterspacing-default: calc(var(--ds-text-tracking, -0.3px) * var(--ds-sf, 1));\n  --ds-radius: calc(var(--ds-corner-size, 4px) * var(--ds-sf, 1));\n  --ds-radius-card: calc(var(--ds-card-corner-size, 4px) * var(--ds-sf, 1));\n}\n/* ds-list.css */\n\n:host {\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: column;\n  gap: var(--ds-list-gap, 0);\n  width: 100%;\n  min-width: 0;\n}\n:host([hidden]) { display: none !important; }\n\n:host([columns]) {\n  display: grid;\n  grid-template-columns: repeat(var(--ds-list-columns, 2), minmax(0, 1fr));\n  column-gap: var(--ds-list-column-gap, calc(var(--ds-unit) / 2));\n}\n\n:host([columns=\"2\"]) {\n  --ds-list-columns: 2;\n}\n\n:host([columns=\"3\"]) {\n  --ds-list-columns: 3;\n}\n\n/* The group's name on the square above its rows: words on the lower sixteen of the square with\n   the spare four above, in the muted ink, as a day's heading stands over Money's payments. It\n   names the list (aria-label), so the drawn words are hidden from assistive technology. */\n.heading {\n  box-sizing: border-box;\n  flex: none;\n  grid-column: 1 / -1;\n  width: 100%;\n  height: var(--ds-unit);\n  padding-top: calc(4px * var(--ds-sf));\n  overflow: hidden;\n  color: var(--ds-list-heading-color, var(--ds-text-color-muted));\n  font-family: var(--ds-typeface-regular);\n  font-feature-settings: var(--ds-font-features);\n  font-size: var(--ds-type-size-default);\n  font-weight: var(--ds-type-weight-default);\n  line-height: var(--ds-type-lineheight-default);\n  letter-spacing: var(--ds-type-letterspacing-default);\n  white-space: nowrap;\n  text-overflow: clip;\n}\n/* A cut heading fades over its last square, never an ellipsis (0-face/cut-fade.ts marks it). */\n.heading[data-cut=\"end\"] { mask-image: linear-gradient(to right, #000 calc(100% - var(--ds-unit)), transparent); }\n:host(:dir(rtl)) .heading[data-cut=\"end\"] { mask-image: linear-gradient(to left, #000 calc(100% - var(--ds-unit)), transparent); }\n";
+var ds_list_default = "/* Shape is a surface preference. Keep these base lengths unscaled: each\n * component resolves them with its own --ds-sf in component-metrics.css. */\n[data-ds-shape=\"square\"],\n:host([data-ds-shape=\"square\"]) {\n  --ds-corner-size: 0px;\n  --ds-corner-shape: round;\n  --ds-button-inset: 0.5px;\n}\n\n[data-ds-shape=\"rounded\"],\n:host([data-ds-shape=\"rounded\"]) {\n  --ds-corner-size: 4px;\n  --ds-corner-shape: round;\n  --ds-button-inset: 2.5px;\n}\n\n[data-ds-shape=\"circular\"],\n:host([data-ds-shape=\"circular\"]) {\n  --ds-corner-size: 999px;\n  --ds-corner-shape: round;\n  --ds-button-inset: 5px;\n}\n\n/* A squircle needs twice an arc's radius for the same apparent corner.\n * Circular controls keep true semicircles even in a squircle browser. */\n@supports (corner-shape: squircle) {\n  [data-ds-shape=\"rounded\"],\n  :host([data-ds-shape=\"rounded\"]) {\n    --ds-corner-size: 8px;\n    --ds-corner-shape: squircle;\n  }\n}\n/* Resolve dimensions where a component is drawn. Inherited calc() values have\n * already used their ancestor's scale. Base tokens stay unscaled and inherit;\n * resolved tokens can still be overridden directly on a component.\n * data-ds-surface gives ordinary layout elements the same scaled measures.\n */\n:root,\n:host,\n:where([data-ds-surface]) {\n  --ds-unit: calc(var(--ds-1, 20px) * var(--ds-sf, 1));\n  --ds-control-height: calc(var(--ds-control-size, var(--ds-08, 16px)) * var(--ds-sf, 1));\n  --ds-row-height: calc(var(--ds-row-size, var(--ds-1, 20px)) * var(--ds-sf, 1));\n  --ds-type-size-default: calc(var(--ds-text-size, 14px) * var(--ds-sf, 1));\n  --ds-type-size-small: calc(var(--ds-small-text-size, 10px) * var(--ds-sf, 1));\n  --ds-type-size-heading: calc(var(--ds-heading-text-size, 13px) * var(--ds-sf, 1));\n  --ds-type-size-display: calc(var(--ds-display-text-size, 20px) * var(--ds-sf, 1));\n  --ds-type-lineheight-default: calc(var(--ds-text-leading, 16px) * var(--ds-sf, 1));\n  --ds-type-letterspacing-default: calc(var(--ds-text-tracking, -0.3px) * var(--ds-sf, 1));\n  --ds-radius: calc(var(--ds-corner-size, 4px) * var(--ds-sf, 1));\n  --ds-radius-card: calc(var(--ds-card-corner-size, 4px) * var(--ds-sf, 1));\n}\n/* ds-list.css */\n\n:host {\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: column;\n  gap: var(--ds-list-gap, 0);\n  width: 100%;\n  min-width: 0;\n}\n:host([hidden]) { display: none !important; }\n\n:host([columns]) {\n  display: grid;\n  grid-template-columns: repeat(var(--ds-list-columns, 2), minmax(0, 1fr));\n  column-gap: var(--ds-list-column-gap, calc(var(--ds-unit) / 2));\n}\n\n:host([columns=\"2\"]) {\n  --ds-list-columns: 2;\n}\n\n:host([columns=\"3\"]) {\n  --ds-list-columns: 3;\n}\n\n/* The group's name on the square above its rows: words on the lower sixteen of the square with\n   the spare four above, in the muted ink, as a day's heading stands over Money's payments. It\n   names the list (aria-label), so the drawn words are hidden from assistive technology. */\n.heading {\n  box-sizing: border-box;\n  flex: none;\n  grid-column: 1 / -1;\n  width: 100%;\n  height: var(--ds-unit);\n  padding-top: calc(4px * var(--ds-sf));\n  overflow: hidden;\n  color: var(--ds-list-heading-color, var(--ds-text-color-muted));\n  font-family: \"Inter Arrows\", var(--ds-typeface-regular);\n  font-feature-settings: var(--ds-font-features);\n  font-size: var(--ds-type-size-default);\n  font-weight: var(--ds-type-weight-default);\n  line-height: var(--ds-type-lineheight-default);\n  letter-spacing: var(--ds-type-letterspacing-default);\n  white-space: nowrap;\n  text-overflow: clip;\n}\n/* A cut heading fades over its last square, never an ellipsis (0-face/cut-fade.ts marks it). */\n.heading[data-cut=\"end\"] { mask-image: linear-gradient(to right, #000 calc(100% - var(--ds-unit)), transparent); }\n:host(:dir(rtl)) .heading[data-cut=\"end\"] { mask-image: linear-gradient(to left, #000 calc(100% - var(--ds-unit)), transparent); }\n";
 //#endregion
 //#region DS1/3-unit/ds-list.ts
 var _List;
@@ -15044,7 +15384,7 @@ _List.styles = r$4(ds_list_default);
 define("ds-list", List);
 //#endregion
 //#region DS1/3-unit/styles/ds-matrix.css?inline
-var ds_matrix_default = "/* ds-matrix.css\n * Rows against columns on the 20px pitch: the row names in --ds-matrix-names\n * squares (eight), then one square per column, each square 19px inside and a\n * 1px line at its end and foot, so a mark fills the inside exactly. Above,\n * a bar one square high for each group of columns, then their names rising\n * at 45° in six squares. One outline with the system's 4px corners goes round\n * the squares. The legend below, in small type, starts where the squares do. */\n\n:host {\n  --ds-matrix-line: var(--ds-border-color);\n  --ds-matrix-colour: var(--ds-accent-color);\n  --ds-matrix-heading: calc(var(--ds-unit) * 6);\n  box-sizing: border-box;\n  display: block;\n  min-width: 0;\n  color: var(--ds-text-color);\n  font-family: var(--ds-typeface-regular);\n  font-feature-settings: var(--ds-font-features);\n  font-size: var(--ds-type-size-default);\n  font-weight: var(--ds-type-weight-default);\n  line-height: var(--ds-type-lineheight-default);\n  letter-spacing: var(--ds-type-letterspacing-default);\n}\n:host([hidden]) { display: none !important; }\n\n.matrix {\n  /* Room at the end for the last slanted names. */\n  padding-inline-end: var(--ds-matrix-heading);\n  overflow-x: auto;\n}\n\n.grid {\n  position: relative;\n  display: grid;\n  grid-template-columns: calc(var(--ds-unit) * var(--ds-matrix-names, 8)) repeat(var(--ds-matrix-columns, 1), var(--ds-unit));\n  grid-template-rows: var(--ds-unit) var(--ds-matrix-heading) repeat(var(--ds-matrix-body, 1), var(--ds-unit));\n  width: max-content;\n  outline: none;\n}\n.row { display: contents; }\n\n/* A group's bar: its colour, its name in the ink on the sixteen, fading out over its last 12px. */\n.group {\n  position: relative;\n  box-sizing: border-box;\n  display: flex;\n  align-items: flex-end;\n  grid-row: 1;\n  min-width: 0;\n  border-inline-end: 1px solid var(--ds-paper);\n  background: var(--ds-matrix-colour);\n  color: var(--ds-slate);\n  font-family: var(--ds-typeface-medium, var(--ds-typeface-regular));\n}\n.group > span {\n  position: absolute;\n  inset-inline: calc(4px * var(--ds-sf, 1)) 0;\n  bottom: 0;\n  overflow: hidden;\n  white-space: nowrap;\n  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 12px * var(--ds-sf, 1)), transparent);\n  mask-image: linear-gradient(to right, #000 calc(100% - 12px * var(--ds-sf, 1)), transparent);\n}\n\n.corner { grid-row: 2; grid-column: 1; }\n\n/* A column's name rises at 45° from the middle of its square, read left to right. */\n.column {\n  position: relative;\n  grid-row: 2;\n  background: color-mix(in srgb, var(--ds-matrix-colour) 22%, transparent);\n  cursor: pointer;\n}\n.column > span {\n  position: absolute;\n  inset-inline-start: calc(var(--ds-unit) / 2);\n  bottom: calc(4px * var(--ds-sf, 1));\n  z-index: 2;\n  white-space: nowrap;\n  transform: rotate(-45deg);\n  transform-origin: 0 100%;\n}\n:host(:dir(rtl)) .column > span { transform: rotate(45deg); transform-origin: 100% 100%; }\n.column[data-lit] > span { text-decoration: underline; text-underline-offset: 3px; }\n\n/* The row names end 4px clear of the squares, cut short when they must be. */\n.name {\n  box-sizing: border-box;\n  grid-column: 1;\n  min-width: 0;\n  padding-inline-end: calc(4px * var(--ds-sf, 1));\n  overflow: hidden;\n  text-align: end;\n  text-overflow: clip;\n  white-space: nowrap;\n  cursor: pointer;\n}\n/* A cut name fades over its last square, never an ellipsis (0-face/cut-fade.ts marks it). */\n.name[data-cut=\"end\"] { mask-image: linear-gradient(to right, #000 calc(100% - var(--ds-unit)), transparent); }\n:host(:dir(rtl)) .name[data-cut=\"end\"] { mask-image: linear-gradient(to left, #000 calc(100% - var(--ds-unit)), transparent); }\n.name[data-lit] { background: var(--ds-row-fill-hover, var(--ds-fill)); }\n.name.totals { color: var(--ds-title-color); cursor: default; }\n\n/* A square: 19px inside, a line at its end and its foot, tinted by its group. */\n.cell {\n  position: relative;\n  box-sizing: border-box;\n  display: flex;\n  align-items: flex-start;\n  justify-content: center;\n  border-inline-end: 1px solid var(--ds-matrix-line);\n  border-block-end: 1px solid var(--ds-matrix-line);\n  background: color-mix(in srgb, var(--ds-matrix-colour) 22%, var(--ds-paper));\n  outline: none;\n  cursor: pointer;\n}\n.cell[data-lit] { background: color-mix(in srgb, var(--ds-matrix-colour) 22%, var(--ds-row-fill-hover, var(--ds-fill))); }\n.cell:focus-visible { z-index: 4; outline: 2px solid var(--ds-focus-ring); outline-offset: -2px; }\n.count {\n  align-items: flex-end;\n  color: var(--ds-title-color);\n  font-size: var(--ds-type-size-small);\n  font-variant-numeric: tabular-nums;\n  line-height: 1;\n  padding-block-end: calc(4px * var(--ds-sf, 1));\n  cursor: default;\n}\n\n/* One line round the squares, with the system's corners, laid over their outer lines. */\n.frame {\n  position: absolute;\n  z-index: 3;\n  grid-row: 3 / span var(--ds-matrix-body, 1);\n  grid-column: 2 / -1;\n  inset: -1px 0 0 -1px;\n  border: 1px solid var(--ds-matrix-line);\n  border-radius: var(--ds-radius);\n  pointer-events: none;\n}\n\n/* The marks, each drawn in a darker shade of its column's colour. */\n.mark {\n  --ds-matrix-shade: color-mix(in srgb, var(--ds-matrix-colour) 45%, var(--ds-text-color));\n  display: block;\n  flex: none;\n  box-sizing: border-box;\n  width: calc(var(--ds-unit) - 1px);\n  height: calc(var(--ds-unit) - 1px);\n}\n.mark[data-mark=\"fill\"] { background: var(--ds-matrix-colour); }\n.mark[data-mark=\"outline\"] {\n  border: 1px solid var(--ds-matrix-shade);\n  background: color-mix(in srgb, var(--ds-matrix-colour) 40%, transparent);\n}\n/* Stripes on a 4px tile: the squares are 20px apart, five tiles, so they run on from square to square. */\n.mark[data-mark=\"stripes\"] {\n  background: linear-gradient(135deg, var(--ds-matrix-shade) 25%, transparent 25% 50%, var(--ds-matrix-shade) 50% 75%, transparent 75%) 0 0 / 4px 4px;\n}\n.mark[data-mark=\"dot\"] {\n  width: 7px;\n  height: 7px;\n  margin-block-start: 6px;\n  border-radius: 50%;\n  background: var(--ds-matrix-shade);\n}\n.mark[data-mark=\"triangle\"] {\n  width: 9px;\n  height: 8px;\n  margin-block-start: 6px;\n  background: var(--ds-matrix-shade);\n  clip-path: polygon(50% 0, 100% 100%, 0 100%);\n}\n.mark[data-mark=\"dash\"] {\n  width: 9px;\n  height: 1px;\n  margin-block-start: 9px;\n  background: var(--ds-title-color);\n}\n\n/* The legend: one line of small type, starting where the squares start; each mark in a 16px box on the sixteen. */\n.legend {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 0 var(--ds-unit);\n  margin-block-start: var(--ds-unit);\n  padding-inline-start: calc(var(--ds-unit) * var(--ds-matrix-names, 8));\n  color: var(--ds-title-color);\n  font-size: var(--ds-type-size-small);\n  line-height: var(--ds-unit);\n}\n.key { display: inline-flex; align-items: center; gap: calc(4px * var(--ds-sf, 1)); white-space: nowrap; }\n.key-mark {\n  --ds-matrix-colour: var(--ds-title-color);\n  display: inline-flex;\n  flex: none;\n  align-items: center;\n  justify-content: center;\n  width: var(--ds-control-height);\n  height: var(--ds-control-height);\n}\n.key-mark .mark { --ds-matrix-shade: var(--ds-text-color); margin: 0; }\n.key-mark .mark[data-mark=\"fill\"],\n.key-mark .mark[data-mark=\"outline\"],\n.key-mark .mark[data-mark=\"stripes\"] { width: var(--ds-control-height); height: var(--ds-control-height); }\n.key-mark .mark[data-mark=\"outline\"] { background: transparent; border-color: var(--ds-text-color); }\n.key-mark .mark[data-mark=\"dash\"] { width: 8px; }\n";
+var ds_matrix_default = "/* ds-matrix.css\n * Rows against columns on the 20px pitch: the row names in --ds-matrix-names\n * squares (eight), then one square per column, each square 19px inside and a\n * 1px line at its end and foot, so a mark fills the inside exactly. Above,\n * a bar one square high for each group of columns, then their names rising\n * at 45° in six squares. One outline with the system's 4px corners goes round\n * the squares. The legend below, in small type, starts where the squares do. */\n\n:host {\n  --ds-matrix-line: var(--ds-border-color);\n  --ds-matrix-colour: var(--ds-accent-color);\n  --ds-matrix-heading: calc(var(--ds-unit) * 6);\n  box-sizing: border-box;\n  display: block;\n  min-width: 0;\n  color: var(--ds-text-color);\n  font-family: \"Inter Arrows\", var(--ds-typeface-regular);\n  font-feature-settings: var(--ds-font-features);\n  font-size: var(--ds-type-size-default);\n  font-weight: var(--ds-type-weight-default);\n  line-height: var(--ds-type-lineheight-default);\n  letter-spacing: var(--ds-type-letterspacing-default);\n}\n:host([hidden]) { display: none !important; }\n\n.matrix {\n  /* Room at the end for the last slanted names. */\n  padding-inline-end: var(--ds-matrix-heading);\n  overflow-x: auto;\n}\n\n.grid {\n  position: relative;\n  display: grid;\n  grid-template-columns: calc(var(--ds-unit) * var(--ds-matrix-names, 8)) repeat(var(--ds-matrix-columns, 1), var(--ds-unit));\n  grid-template-rows: var(--ds-unit) var(--ds-matrix-heading) repeat(var(--ds-matrix-body, 1), var(--ds-unit));\n  width: max-content;\n  outline: none;\n}\n.row { display: contents; }\n\n/* A group's bar: its colour, its name in the ink on the sixteen, fading out over its last 12px. */\n.group {\n  position: relative;\n  box-sizing: border-box;\n  display: flex;\n  align-items: flex-end;\n  grid-row: 1;\n  min-width: 0;\n  border-inline-end: 1px solid var(--ds-paper);\n  background: var(--ds-matrix-colour);\n  color: var(--ds-slate);\n  font-family: \"Inter Arrows\", var(--ds-typeface-medium, var(--ds-typeface-regular));\n}\n.group > span {\n  position: absolute;\n  inset-inline: calc(4px * var(--ds-sf, 1)) 0;\n  bottom: 0;\n  overflow: hidden;\n  white-space: nowrap;\n  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 12px * var(--ds-sf, 1)), transparent);\n  mask-image: linear-gradient(to right, #000 calc(100% - 12px * var(--ds-sf, 1)), transparent);\n}\n\n.corner { grid-row: 2; grid-column: 1; }\n\n/* A column's name rises at 45° from the middle of its square, read left to right. */\n.column {\n  position: relative;\n  grid-row: 2;\n  background: color-mix(in srgb, var(--ds-matrix-colour) 22%, transparent);\n  cursor: pointer;\n}\n.column > span {\n  position: absolute;\n  inset-inline-start: calc(var(--ds-unit) / 2);\n  bottom: calc(4px * var(--ds-sf, 1));\n  z-index: 2;\n  white-space: nowrap;\n  transform: rotate(-45deg);\n  transform-origin: 0 100%;\n}\n:host(:dir(rtl)) .column > span { transform: rotate(45deg); transform-origin: 100% 100%; }\n.column[data-lit] > span { text-decoration: underline; text-underline-offset: 3px; }\n\n/* The row names end 4px clear of the squares, cut short when they must be. */\n.name {\n  box-sizing: border-box;\n  grid-column: 1;\n  min-width: 0;\n  padding-inline-end: calc(4px * var(--ds-sf, 1));\n  overflow: hidden;\n  text-align: end;\n  text-overflow: clip;\n  white-space: nowrap;\n  cursor: pointer;\n}\n/* A cut name fades over its last square, never an ellipsis (0-face/cut-fade.ts marks it). */\n.name[data-cut=\"end\"] { mask-image: linear-gradient(to right, #000 calc(100% - var(--ds-unit)), transparent); }\n:host(:dir(rtl)) .name[data-cut=\"end\"] { mask-image: linear-gradient(to left, #000 calc(100% - var(--ds-unit)), transparent); }\n.name[data-lit] { background: var(--ds-row-fill-hover, var(--ds-fill)); }\n.name.totals { color: var(--ds-title-color); cursor: default; }\n\n/* A square: 19px inside, a line at its end and its foot, tinted by its group. */\n.cell {\n  position: relative;\n  box-sizing: border-box;\n  display: flex;\n  align-items: flex-start;\n  justify-content: center;\n  border-inline-end: 1px solid var(--ds-matrix-line);\n  border-block-end: 1px solid var(--ds-matrix-line);\n  background: color-mix(in srgb, var(--ds-matrix-colour) 22%, var(--ds-paper));\n  outline: none;\n  cursor: pointer;\n}\n.cell[data-lit] { background: color-mix(in srgb, var(--ds-matrix-colour) 22%, var(--ds-row-fill-hover, var(--ds-fill))); }\n.cell:focus-visible { z-index: 4; outline: 2px solid var(--ds-focus-ring); outline-offset: -2px; }\n.count {\n  align-items: flex-end;\n  color: var(--ds-title-color);\n  font-size: var(--ds-type-size-small);\n  font-variant-numeric: tabular-nums;\n  line-height: 1;\n  padding-block-end: calc(4px * var(--ds-sf, 1));\n  cursor: default;\n}\n\n/* One line round the squares, with the system's corners, laid over their outer lines. */\n.frame {\n  position: absolute;\n  z-index: 3;\n  grid-row: 3 / span var(--ds-matrix-body, 1);\n  grid-column: 2 / -1;\n  inset: -1px 0 0 -1px;\n  border: 1px solid var(--ds-matrix-line);\n  border-radius: var(--ds-radius);\n  pointer-events: none;\n}\n\n/* The marks, each drawn in a darker shade of its column's colour. */\n.mark {\n  --ds-matrix-shade: color-mix(in srgb, var(--ds-matrix-colour) 45%, var(--ds-text-color));\n  display: block;\n  flex: none;\n  box-sizing: border-box;\n  width: calc(var(--ds-unit) - 1px);\n  height: calc(var(--ds-unit) - 1px);\n}\n.mark[data-mark=\"fill\"] { background: var(--ds-matrix-colour); }\n.mark[data-mark=\"outline\"] {\n  border: 1px solid var(--ds-matrix-shade);\n  background: color-mix(in srgb, var(--ds-matrix-colour) 40%, transparent);\n}\n/* Stripes on a 4px tile: the squares are 20px apart, five tiles, so they run on from square to square. */\n.mark[data-mark=\"stripes\"] {\n  background: linear-gradient(135deg, var(--ds-matrix-shade) 25%, transparent 25% 50%, var(--ds-matrix-shade) 50% 75%, transparent 75%) 0 0 / 4px 4px;\n}\n.mark[data-mark=\"dot\"] {\n  width: 7px;\n  height: 7px;\n  margin-block-start: 6px;\n  border-radius: 50%;\n  background: var(--ds-matrix-shade);\n}\n.mark[data-mark=\"triangle\"] {\n  width: 9px;\n  height: 8px;\n  margin-block-start: 6px;\n  background: var(--ds-matrix-shade);\n  clip-path: polygon(50% 0, 100% 100%, 0 100%);\n}\n.mark[data-mark=\"dash\"] {\n  width: 9px;\n  height: 1px;\n  margin-block-start: 9px;\n  background: var(--ds-title-color);\n}\n\n/* The legend: one line of small type, starting where the squares start; each mark in a 16px box on the sixteen. */\n.legend {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 0 var(--ds-unit);\n  margin-block-start: var(--ds-unit);\n  padding-inline-start: calc(var(--ds-unit) * var(--ds-matrix-names, 8));\n  color: var(--ds-title-color);\n  font-size: var(--ds-type-size-small);\n  line-height: var(--ds-unit);\n}\n.key { display: inline-flex; align-items: center; gap: calc(4px * var(--ds-sf, 1)); white-space: nowrap; }\n.key-mark {\n  --ds-matrix-colour: var(--ds-title-color);\n  display: inline-flex;\n  flex: none;\n  align-items: center;\n  justify-content: center;\n  width: var(--ds-control-height);\n  height: var(--ds-control-height);\n}\n.key-mark .mark { --ds-matrix-shade: var(--ds-text-color); margin: 0; }\n.key-mark .mark[data-mark=\"fill\"],\n.key-mark .mark[data-mark=\"outline\"],\n.key-mark .mark[data-mark=\"stripes\"] { width: var(--ds-control-height); height: var(--ds-control-height); }\n.key-mark .mark[data-mark=\"outline\"] { background: transparent; border-color: var(--ds-text-color); }\n.key-mark .mark[data-mark=\"dash\"] { width: 8px; }\n";
 //#endregion
 //#region DS1/3-unit/ds-matrix.ts
 var _Matrix;
@@ -15481,7 +15821,7 @@ _Row.styles = r$4(ds_row_default);
 define("ds-row", Row);
 //#endregion
 //#region DS1/1-root/table.css?inline
-var table_default = "/*\n * A table: words straight on the paper, one square a row. No box and no\n * column lines: each row stands on a hairline at its foot, its words set on\n * that line like a caption: the sixteen of words against the 1px line, three\n * spare above, a 20px pitch, as Ezo sets every row.\n * Column headers keep the text's weight in the title grey; the first column\n * of a body row is a row header in the text colour. Nothing is filled with\n * the accent except a cell someone has selected.\n *\n * `.ds-table` dresses a native <table>; `<ds-table>` draws the same table\n * from data. Put a wide table in `.ds-table-scroll` to scroll it sideways,\n * and give the table `data-sticky` to keep its first column in place.\n *\n *   <th data-numeric>, <td data-numeric>   numbers, set to the column's end\n *   <tfoot>                                totals, under a line of their own\n *   <th colspan=\"2\">                       a column group, in a header row\n *   <th scope=\"rowgroup\">                  a row group, a heading row in grey\n *   <td aria-selected=\"true\">              a selected cell\n *\n * `data-plain` takes every line away: the same rows with no rule at their\n * foot, standing on the paper as a list's rows do (Money's tables), the\n * words still on the lower sixteen of each square.\n *\n * `data-frame` draws the same rows in a rounded 1px frame with a 1px line\n * between columns. Every line is drawn inside the cells' squares, the frame\n * over the first and last pixels as the sheet's lines are at a cell's end and\n * foot, so each row keeps its 20px pitch and the last row's rule is the\n * frame's foot; words stand 4px in from the lines. Fills in the cells keep\n * inside the rounded corners.\n *\n * `data-sheet` makes it a spreadsheet: every cell four squares by one (80 by\n * 20), its 1px lines at its end and foot so the words have 79 by 19, set 4px\n * in on the sixteen. Words that do not fit fade out over the last square\n * where they are cut, never an ellipsis: put them in `.ds-table__words`,\n * which carries the fade (a mask, so it fades to whatever is behind: the\n * paper, a selected or hovered cell's fill). A table marked `data-fit`\n * (`<ds-table sheet>` is) measures its cells and marks the cut ones\n * `data-cut=\"end\"`, or `\"start\"` for a number it has scrolled to its end, so\n * words that fit never fade; without it every cell's end fades. Column letters and the row numbers\n * (`.ds-table__letters`, `.ds-table__number`, two squares wide) stay in place\n * while the sheet scrolls both ways inside `.ds-table-scroll`; give the table\n * `--ds-table-columns` (the number of data columns) and the scroll a height\n * with `--ds-table-height`.\n *\n * `data-reorderable` (set by `<ds-table sheet reorderable>`) gives each row\n * number a grip, `.ds-table__handle` with the `handle` icon, in place of the\n * number while the row is hovered or the grip focused. A lifted row\n * (`tr[data-lifted]`) keeps the paper behind it and follows the pointer; while\n * `data-moving` is on the table the other rows step aside in transform alone,\n * a sortable list's 200ms on cubic-bezier(0.2, 0, 0, 1), and never under\n * reduced motion.\n */\n\n.ds-table {\n  --ds-table-row: var(--ds-row-height, calc(20px * var(--ds-sf, 1)));\n  --ds-table-gap: calc(var(--ds-table-row) / 2);\n  --ds-table-rule: var(--ds-border-color, light-dark(#d8d8d8, #3d3d3d));\n  --ds-table-paper: var(--ds-background, Canvas);\n  width: 100%;\n  border-collapse: collapse;\n  border-spacing: 0;\n  color: var(--ds-text-color, inherit);\n  font-family: var(--ds-typeface-regular, inherit);\n  font-feature-settings: var(--ds-font-features, normal);\n  font-size: var(--ds-type-size-default, 14px);\n  letter-spacing: var(--ds-type-letterspacing-default, normal);\n}\n\n.ds-table :is(th, td) {\n  box-sizing: border-box;\n  height: var(--ds-table-row);\n  padding: 0 var(--ds-table-gap) 0 0;\n  border: 0;\n  border-bottom: 1px solid var(--ds-table-rule);\n  background: transparent;\n  line-height: var(--ds-type-lineheight-default);\n  text-align: start;\n  vertical-align: bottom;\n  font-weight: inherit;\n  white-space: nowrap;\n}\n\n.ds-table :is(th, td):last-child {\n  padding-inline-end: 0;\n}\n\n/* A plain table: no lines at all, each row one square with its words on the lower sixteen. */\n.ds-table[data-plain] :is(th, td) {\n  border-bottom: 0;\n}\n.ds-table[data-frame] {\n  --ds-table-radius: var(--ds-radius-card, calc(8px * var(--ds-sf, 1)));\n  position: relative;\n  border-collapse: separate;\n  border-radius: var(--ds-table-radius);\n  clip-path: inset(0 round var(--ds-table-radius));\n}\n/* The frame is drawn over the cells, so a filled cell never covers it. */\n.ds-table[data-frame]::after {\n  position: absolute;\n  inset: 0;\n  z-index: 1;\n  box-sizing: border-box;\n  border: 1px solid var(--ds-table-rule);\n  border-radius: var(--ds-table-radius);\n  content: \"\";\n  pointer-events: none;\n}\n.ds-table[data-frame] :is(th, td) {\n  padding-inline: calc(4px * var(--ds-sf, 1));\n}\n.ds-table[data-frame] :is(th, td) + :is(th, td) {\n  box-shadow: inset 1px 0 0 var(--ds-table-rule);\n}\n.ds-table[data-frame]:dir(rtl) :is(th, td) + :is(th, td) {\n  box-shadow: inset -1px 0 0 var(--ds-table-rule);\n}\n\n.ds-table thead th,\n.ds-table th[scope=\"rowgroup\"] {\n  color: var(--ds-title-color, light-dark(#6e6e6e, #9a9a9a));\n}\n\n.ds-table tbody th:not([scope=\"rowgroup\"]) {\n  color: inherit;\n}\n\n.ds-table [data-numeric] {\n  text-align: end;\n  font-variant-numeric: tabular-nums;\n}\n\n/* Totals: the rule above them is the last body row's; theirs closes the table. */\n.ds-table tfoot :is(th, td) {\n  color: inherit;\n}\n\n.ds-table [aria-selected=\"true\"] {\n  background: var(--ds-accent-color, Highlight);\n  color: var(--ds-button-text-color-on-accent, inherit);\n}\n\n.ds-table :is(th, td):has(> :is(a, button):only-child) {\n  cursor: pointer;\n}\n\n.ds-table caption {\n  box-sizing: border-box;\n  height: var(--ds-table-row);\n  padding-top: calc(var(--ds-table-row) - var(--ds-type-lineheight-default));\n  line-height: var(--ds-type-lineheight-default);\n  text-align: start;\n  color: var(--ds-title-color, light-dark(#6e6e6e, #9a9a9a));\n}\n\n.ds-table-scroll {\n  max-width: 100%;\n  overflow-x: auto;\n  overscroll-behavior-x: contain;\n}\n\n.ds-table-scroll > .ds-table {\n  width: max-content;\n  min-width: 100%;\n}\n\n.ds-table[data-sticky] :is(th, td):first-child {\n  position: sticky;\n  inset-inline-start: 0;\n  z-index: 1;\n  background: var(--ds-table-paper);\n}\n\n.ds-table[data-sticky] [aria-selected=\"true\"]:first-child {\n  background: var(--ds-accent-color, Highlight);\n}\n\n/* Keep the row whose details are open visible, including its sticky first cell.\n   Cell selection remains independent and keeps its accent. */\n.ds-table tbody > tr[data-open]:not([data-open=\"false\"]) > :is(th, td):not([aria-selected=\"true\"]) {\n  background: var(--ds-row-fill-current, var(--ds-fill-hover));\n}\n@media (forced-colors: active) {\n  .ds-table tbody > tr[data-open]:not([data-open=\"false\"]) > :is(th, td):not([aria-selected=\"true\"]) {\n    background: Highlight;\n    color: HighlightText;\n  }\n}\n\n/* A spreadsheet: cells four squares by one, on lines, lettered and numbered. */\n.ds-table[data-sheet] {\n  --ds-table-cell: calc(4 * var(--ds-table-row));\n  --ds-table-index: calc(2 * var(--ds-table-row));\n  --ds-table-text: calc(4px * var(--ds-sf, 1));\n  table-layout: fixed;\n  width: calc(var(--ds-table-index) + var(--ds-table-columns, 8) * var(--ds-table-cell));\n  min-width: 0;\n  border-collapse: separate;\n  border-spacing: 0;\n}\n.ds-table-scroll > .ds-table[data-sheet] {\n  width: calc(var(--ds-table-index) + var(--ds-table-columns, 8) * var(--ds-table-cell));\n  min-width: 0;\n}\n.ds-table[data-sheet] :is(th, td) {\n  width: var(--ds-table-cell);\n  max-width: var(--ds-table-cell);\n  height: var(--ds-table-row);\n  padding: 0 var(--ds-table-text);\n  border-bottom: 1px solid var(--ds-table-rule);\n  border-inline-end: 1px solid var(--ds-table-rule);\n  overflow: hidden;\n}\n.ds-table[data-sheet] :is(th, td):last-child {\n  padding-inline-end: var(--ds-table-text);\n}\n.ds-table[data-sheet] .ds-table__words {\n  --ds-table-fade-to: right;\n  --ds-table-fade-from: left;\n  display: block;\n  overflow: hidden;\n  white-space: nowrap;\n}\n.ds-table[data-sheet]:dir(rtl) .ds-table__words {\n  --ds-table-fade-to: left;\n  --ds-table-fade-from: right;\n}\n/* Cut words fade over their last square to nothing, at the edge where they are cut. */\n.ds-table[data-sheet]:not([data-fit]) .ds-table__words,\n.ds-table[data-sheet] .ds-table__words[data-cut=\"end\"] {\n  mask-image: linear-gradient(to var(--ds-table-fade-to), #000 calc(100% - var(--ds-table-row)), transparent);\n}\n.ds-table[data-sheet] .ds-table__words[data-cut=\"start\"] {\n  mask-image: linear-gradient(to var(--ds-table-fade-from), #000 calc(100% - var(--ds-table-row)), transparent);\n}\n.ds-table[data-sheet] .ds-table__number {\n  width: var(--ds-table-index);\n  max-width: var(--ds-table-index);\n  position: sticky;\n  inset-inline-start: 0;\n  z-index: 1;\n  background: var(--ds-table-paper);\n  color: var(--ds-title-color, light-dark(#6e6e6e, #9a9a9a));\n  text-align: center;\n  font-variant-numeric: tabular-nums;\n}\n.ds-table[data-sheet] thead :is(th, td) {\n  position: sticky;\n  top: 0;\n  z-index: 3;\n  background: var(--ds-table-paper);\n}\n.ds-table[data-sheet] thead tr + tr :is(th, td) {\n  top: var(--ds-table-row);\n}\n.ds-table[data-sheet] thead .ds-table__number {\n  z-index: 4;\n}\n.ds-table[data-sheet] .ds-table__letters td {\n  color: var(--ds-title-color, light-dark(#6e6e6e, #9a9a9a));\n  text-align: center;\n}\n.ds-table[data-sheet] tbody td:not([data-numeric]) {\n  color: inherit;\n}\n.ds-table[data-sheet] [aria-selected=\"true\"] {\n  background: transparent;\n  color: inherit;\n  box-shadow: inset 0 0 0 2px var(--ds-focus-ring, Highlight);\n}\n.ds-table-scroll:has(> .ds-table[data-sheet]) {\n  max-height: var(--ds-table-height, none);\n  overflow: auto;\n  overscroll-behavior: contain;\n}\n\n/* Rows that move: a grip on the number, the lifted row on paper, the others stepping aside. */\n.ds-table[data-sheet][data-reorderable] tbody .ds-table__number {\n  -webkit-user-select: none;\n  user-select: none;\n  -webkit-touch-callout: none;\n}\n.ds-table__index {\n  transition: opacity 100ms ease;\n}\n.ds-table__handle {\n  all: unset;\n  position: absolute;\n  inset: 0;\n  display: flex;\n  align-items: flex-end;\n  justify-content: center;\n  color: var(--ds-reorder-color, light-dark(#777777, #cccccc));\n  cursor: grab;\n  opacity: 0;\n  transition: opacity 100ms ease;\n}\n.ds-table__handle:hover {\n  color: var(--ds-reorder-active-color, light-dark(#333333, #ffffff));\n}\n.ds-table__handle:focus-visible {\n  box-shadow: inset 0 0 0 2px var(--ds-focus-ring, Highlight);\n}\n@media (hover: hover) {\n  .ds-table[data-reorderable]:not([data-moving]) tbody tr:hover .ds-table__handle { opacity: 1; }\n  .ds-table[data-reorderable]:not([data-moving]) tbody tr:hover .ds-table__index { opacity: 0; }\n}\n.ds-table[data-reorderable] tbody tr:is([data-lifted], :has(.ds-table__handle:focus-visible)) .ds-table__handle { opacity: 1; }\n.ds-table[data-reorderable] tbody tr:is([data-lifted], :has(.ds-table__handle:focus-visible)) .ds-table__index { opacity: 0; }\n.ds-table[data-moving] tbody tr {\n  transition: transform 200ms cubic-bezier(0.2, 0, 0, 1);\n}\n.ds-table[data-moving],\n.ds-table[data-moving] * {\n  cursor: grabbing;\n}\n.ds-table[data-sheet] tbody tr[data-lifted] {\n  position: relative;\n  z-index: 2;\n  transition: none;\n}\n.ds-table[data-sheet] tbody tr[data-lifted] > :is(th, td) {\n  background: var(--ds-table-paper);\n  box-shadow: inset 0 1px var(--ds-table-rule);\n}\n.ds-table__status {\n  position: absolute;\n  width: 1px;\n  height: 1px;\n  overflow: hidden;\n  clip-path: inset(50%);\n  white-space: nowrap;\n}\n@media (prefers-reduced-motion: reduce) {\n  .ds-table[data-moving] tbody tr,\n  .ds-table__index,\n  .ds-table__handle {\n    transition: none;\n  }\n}\n";
+var table_default = "/*\n * A table: words straight on the paper, one square a row. No box and no\n * column lines: each row stands on a hairline at its foot, its words set on\n * that line like a caption: the sixteen of words against the 1px line, three\n * spare above, a 20px pitch, as Ezo sets every row.\n * Column headers keep the text's weight in the title grey; the first column\n * of a body row is a row header in the text colour. Nothing is filled with\n * the accent except a cell someone has selected.\n *\n * `.ds-table` dresses a native <table>; `<ds-table>` draws the same table\n * from data. Put a wide table in `.ds-table-scroll` to scroll it sideways,\n * and give the table `data-sticky` to keep its first column in place.\n *\n *   <th data-numeric>, <td data-numeric>   numbers, set to the column's end\n *   <tfoot>                                totals, under a line of their own\n *   <th colspan=\"2\">                       a column group, in a header row\n *   <th scope=\"rowgroup\">                  a row group, a heading row in grey\n *   <td aria-selected=\"true\">              a selected cell\n *\n * `data-plain` takes every line away: the same rows with no rule at their\n * foot, standing on the paper as a list's rows do (Money's tables), the\n * words still on the lower sixteen of each square.\n *\n * `data-frame` draws the same rows in a rounded 1px frame with a 1px line\n * between columns. Every line is drawn inside the cells' squares, the frame\n * over the first and last pixels as the sheet's lines are at a cell's end and\n * foot, so each row keeps its 20px pitch and the last row's rule is the\n * frame's foot; words stand 4px in from the lines. Fills in the cells keep\n * inside the rounded corners.\n *\n * `data-sheet` makes it a spreadsheet: every cell four squares by one (80 by\n * 20), its 1px lines at its end and foot so the words have 79 by 19, set 4px\n * in on the sixteen. Words that do not fit fade out over the last square\n * where they are cut, never an ellipsis: put them in `.ds-table__words`,\n * which carries the fade (a mask, so it fades to whatever is behind: the\n * paper, a selected or hovered cell's fill). A table marked `data-fit`\n * (`<ds-table sheet>` is) measures its cells and marks the cut ones\n * `data-cut=\"end\"`, or `\"start\"` for a number it has scrolled to its end, so\n * words that fit never fade; without it every cell's end fades. Column letters and the row numbers\n * (`.ds-table__letters`, `.ds-table__number`, two squares wide) stay in place\n * while the sheet scrolls both ways inside `.ds-table-scroll`; give the table\n * `--ds-table-columns` (the number of data columns) and the scroll a height\n * with `--ds-table-height`.\n *\n * `data-reorderable` (set by `<ds-table sheet reorderable>`) gives each row\n * number a grip, `.ds-table__handle` with the `handle` icon, in place of the\n * number while the row is hovered or the grip focused. A lifted row\n * (`tr[data-lifted]`) keeps the paper behind it and follows the pointer; while\n * `data-moving` is on the table the other rows step aside in transform alone,\n * a sortable list's 200ms on cubic-bezier(0.2, 0, 0, 1), and never under\n * reduced motion.\n */\n\n.ds-table {\n  --ds-table-row: var(--ds-row-height, calc(20px * var(--ds-sf, 1)));\n  --ds-table-gap: calc(var(--ds-table-row) / 2);\n  --ds-table-rule: var(--ds-border-color, light-dark(#d8d8d8, #3d3d3d));\n  --ds-table-paper: var(--ds-background, Canvas);\n  width: 100%;\n  border-collapse: collapse;\n  border-spacing: 0;\n  color: var(--ds-text-color, inherit);\n  font-family: \"Inter Arrows\", var(--ds-typeface-regular, inherit);\n  font-feature-settings: var(--ds-font-features, normal);\n  font-size: var(--ds-type-size-default, 14px);\n  letter-spacing: var(--ds-type-letterspacing-default, normal);\n}\n\n.ds-table :is(th, td) {\n  box-sizing: border-box;\n  height: var(--ds-table-row);\n  padding: 0 var(--ds-table-gap) 0 0;\n  border: 0;\n  border-bottom: 1px solid var(--ds-table-rule);\n  background: transparent;\n  line-height: var(--ds-type-lineheight-default);\n  text-align: start;\n  vertical-align: bottom;\n  font-weight: inherit;\n  white-space: nowrap;\n}\n\n.ds-table :is(th, td):last-child {\n  padding-inline-end: 0;\n}\n\n/* A plain table: no lines at all, each row one square with its words on the lower sixteen. */\n.ds-table[data-plain] :is(th, td) {\n  border-bottom: 0;\n}\n.ds-table[data-frame] {\n  --ds-table-radius: var(--ds-radius-card, calc(8px * var(--ds-sf, 1)));\n  position: relative;\n  border-collapse: separate;\n  border-radius: var(--ds-table-radius);\n  clip-path: inset(0 round var(--ds-table-radius));\n}\n/* The frame is drawn over the cells, so a filled cell never covers it. */\n.ds-table[data-frame]::after {\n  position: absolute;\n  inset: 0;\n  z-index: 1;\n  box-sizing: border-box;\n  border: 1px solid var(--ds-table-rule);\n  border-radius: var(--ds-table-radius);\n  content: \"\";\n  pointer-events: none;\n}\n.ds-table[data-frame] :is(th, td) {\n  padding-inline: calc(4px * var(--ds-sf, 1));\n}\n.ds-table[data-frame] :is(th, td) + :is(th, td) {\n  box-shadow: inset 1px 0 0 var(--ds-table-rule);\n}\n.ds-table[data-frame]:dir(rtl) :is(th, td) + :is(th, td) {\n  box-shadow: inset -1px 0 0 var(--ds-table-rule);\n}\n\n.ds-table thead th,\n.ds-table th[scope=\"rowgroup\"] {\n  color: var(--ds-title-color, light-dark(#6e6e6e, #9a9a9a));\n}\n\n.ds-table tbody th:not([scope=\"rowgroup\"]) {\n  color: inherit;\n}\n\n.ds-table [data-numeric] {\n  text-align: end;\n  font-variant-numeric: tabular-nums;\n}\n\n/* Totals: the rule above them is the last body row's; theirs closes the table. */\n.ds-table tfoot :is(th, td) {\n  color: inherit;\n}\n\n.ds-table [aria-selected=\"true\"] {\n  background: var(--ds-accent-color, Highlight);\n  color: var(--ds-button-text-color-on-accent, inherit);\n}\n\n.ds-table :is(th, td):has(> :is(a, button):only-child) {\n  cursor: pointer;\n}\n\n.ds-table caption {\n  box-sizing: border-box;\n  height: var(--ds-table-row);\n  padding-top: calc(var(--ds-table-row) - var(--ds-type-lineheight-default));\n  line-height: var(--ds-type-lineheight-default);\n  text-align: start;\n  color: var(--ds-title-color, light-dark(#6e6e6e, #9a9a9a));\n}\n\n.ds-table-scroll {\n  max-width: 100%;\n  overflow-x: auto;\n  overscroll-behavior-x: contain;\n}\n\n.ds-table-scroll > .ds-table {\n  width: max-content;\n  min-width: 100%;\n}\n\n.ds-table[data-sticky] :is(th, td):first-child {\n  position: sticky;\n  inset-inline-start: 0;\n  z-index: 1;\n  background: var(--ds-table-paper);\n}\n\n.ds-table[data-sticky] [aria-selected=\"true\"]:first-child {\n  background: var(--ds-accent-color, Highlight);\n}\n\n/* Keep the row whose details are open visible, including its sticky first cell.\n   Cell selection remains independent and keeps its accent. */\n.ds-table tbody > tr[data-open]:not([data-open=\"false\"]) > :is(th, td):not([aria-selected=\"true\"]) {\n  background: var(--ds-row-fill-current, var(--ds-fill-hover));\n}\n@media (forced-colors: active) {\n  .ds-table tbody > tr[data-open]:not([data-open=\"false\"]) > :is(th, td):not([aria-selected=\"true\"]) {\n    background: Highlight;\n    color: HighlightText;\n  }\n}\n\n/* A spreadsheet: cells four squares by one, on lines, lettered and numbered. */\n.ds-table[data-sheet] {\n  --ds-table-cell: calc(4 * var(--ds-table-row));\n  --ds-table-index: calc(2 * var(--ds-table-row));\n  --ds-table-text: calc(4px * var(--ds-sf, 1));\n  table-layout: fixed;\n  width: calc(var(--ds-table-index) + var(--ds-table-columns, 8) * var(--ds-table-cell));\n  min-width: 0;\n  border-collapse: separate;\n  border-spacing: 0;\n}\n.ds-table-scroll > .ds-table[data-sheet] {\n  width: calc(var(--ds-table-index) + var(--ds-table-columns, 8) * var(--ds-table-cell));\n  min-width: 0;\n}\n.ds-table[data-sheet] :is(th, td) {\n  width: var(--ds-table-cell);\n  max-width: var(--ds-table-cell);\n  height: var(--ds-table-row);\n  padding: 0 var(--ds-table-text);\n  border-bottom: 1px solid var(--ds-table-rule);\n  border-inline-end: 1px solid var(--ds-table-rule);\n  overflow: hidden;\n}\n.ds-table[data-sheet] :is(th, td):last-child {\n  padding-inline-end: var(--ds-table-text);\n}\n.ds-table[data-sheet] .ds-table__words {\n  --ds-table-fade-to: right;\n  --ds-table-fade-from: left;\n  display: block;\n  overflow: hidden;\n  white-space: nowrap;\n}\n.ds-table[data-sheet]:dir(rtl) .ds-table__words {\n  --ds-table-fade-to: left;\n  --ds-table-fade-from: right;\n}\n/* Cut words fade over their last square to nothing, at the edge where they are cut. */\n.ds-table[data-sheet]:not([data-fit]) .ds-table__words,\n.ds-table[data-sheet] .ds-table__words[data-cut=\"end\"] {\n  mask-image: linear-gradient(to var(--ds-table-fade-to), #000 calc(100% - var(--ds-table-row)), transparent);\n}\n.ds-table[data-sheet] .ds-table__words[data-cut=\"start\"] {\n  mask-image: linear-gradient(to var(--ds-table-fade-from), #000 calc(100% - var(--ds-table-row)), transparent);\n}\n.ds-table[data-sheet] .ds-table__number {\n  width: var(--ds-table-index);\n  max-width: var(--ds-table-index);\n  position: sticky;\n  inset-inline-start: 0;\n  z-index: 1;\n  background: var(--ds-table-paper);\n  color: var(--ds-title-color, light-dark(#6e6e6e, #9a9a9a));\n  text-align: center;\n  font-variant-numeric: tabular-nums;\n}\n.ds-table[data-sheet] thead :is(th, td) {\n  position: sticky;\n  top: 0;\n  z-index: 3;\n  background: var(--ds-table-paper);\n}\n.ds-table[data-sheet] thead tr + tr :is(th, td) {\n  top: var(--ds-table-row);\n}\n.ds-table[data-sheet] thead .ds-table__number {\n  z-index: 4;\n}\n.ds-table[data-sheet] .ds-table__letters td {\n  color: var(--ds-title-color, light-dark(#6e6e6e, #9a9a9a));\n  text-align: center;\n}\n.ds-table[data-sheet] tbody td:not([data-numeric]) {\n  color: inherit;\n}\n.ds-table[data-sheet] [aria-selected=\"true\"] {\n  background: transparent;\n  color: inherit;\n  box-shadow: inset 0 0 0 2px var(--ds-focus-ring, Highlight);\n}\n.ds-table-scroll:has(> .ds-table[data-sheet]) {\n  max-height: var(--ds-table-height, none);\n  overflow: auto;\n  overscroll-behavior: contain;\n}\n\n/* Rows that move: a grip on the number, the lifted row on paper, the others stepping aside. */\n.ds-table[data-sheet][data-reorderable] tbody .ds-table__number {\n  -webkit-user-select: none;\n  user-select: none;\n  -webkit-touch-callout: none;\n}\n.ds-table__index {\n  transition: opacity 100ms ease;\n}\n.ds-table__handle {\n  all: unset;\n  position: absolute;\n  inset: 0;\n  display: flex;\n  align-items: flex-end;\n  justify-content: center;\n  color: var(--ds-reorder-color, light-dark(#777777, #cccccc));\n  cursor: grab;\n  opacity: 0;\n  transition: opacity 100ms ease;\n}\n.ds-table__handle:hover {\n  color: var(--ds-reorder-active-color, light-dark(#333333, #ffffff));\n}\n.ds-table__handle:focus-visible {\n  box-shadow: inset 0 0 0 2px var(--ds-focus-ring, Highlight);\n}\n@media (hover: hover) {\n  .ds-table[data-reorderable]:not([data-moving]) tbody tr:hover .ds-table__handle { opacity: 1; }\n  .ds-table[data-reorderable]:not([data-moving]) tbody tr:hover .ds-table__index { opacity: 0; }\n}\n.ds-table[data-reorderable] tbody tr:is([data-lifted], :has(.ds-table__handle:focus-visible)) .ds-table__handle { opacity: 1; }\n.ds-table[data-reorderable] tbody tr:is([data-lifted], :has(.ds-table__handle:focus-visible)) .ds-table__index { opacity: 0; }\n.ds-table[data-moving] tbody tr {\n  transition: transform 200ms cubic-bezier(0.2, 0, 0, 1);\n}\n.ds-table[data-moving],\n.ds-table[data-moving] * {\n  cursor: grabbing;\n}\n.ds-table[data-sheet] tbody tr[data-lifted] {\n  position: relative;\n  z-index: 2;\n  transition: none;\n}\n.ds-table[data-sheet] tbody tr[data-lifted] > :is(th, td) {\n  background: var(--ds-table-paper);\n  box-shadow: inset 0 1px var(--ds-table-rule);\n}\n.ds-table__status {\n  position: absolute;\n  width: 1px;\n  height: 1px;\n  overflow: hidden;\n  clip-path: inset(50%);\n  white-space: nowrap;\n}\n@media (prefers-reduced-motion: reduce) {\n  .ds-table[data-moving] tbody tr,\n  .ds-table__index,\n  .ds-table__handle {\n    transition: none;\n  }\n}\n";
 //#endregion
 //#region DS1/3-unit/styles/ds-table.css?inline
 var ds_table_default = "/* ds-table.css */\n/* The element only places the table; 1-root/table.css draws it. */\n\n:host {\n  display: block;\n  width: 100%;\n  min-width: 0;\n}\n:host([hidden]) { display: none !important; }\n";
@@ -15966,10 +16306,10 @@ function text(value) {
 	if (blank(value)) return "";
 	return typeof value === "number" ? value.toLocaleString() : String(value);
 }
-customElements.define("ds-table", DsTable);
+define("ds-table", DsTable);
 //#endregion
 //#region DS1/3-unit/styles/ds-table-of-contents.css?inline
-var ds_table_of_contents_default = "/* Shape is a surface preference. Keep these base lengths unscaled: each\n * component resolves them with its own --ds-sf in component-metrics.css. */\n[data-ds-shape=\"square\"],\n:host([data-ds-shape=\"square\"]) {\n  --ds-corner-size: 0px;\n  --ds-corner-shape: round;\n  --ds-button-inset: 0.5px;\n}\n\n[data-ds-shape=\"rounded\"],\n:host([data-ds-shape=\"rounded\"]) {\n  --ds-corner-size: 4px;\n  --ds-corner-shape: round;\n  --ds-button-inset: 2.5px;\n}\n\n[data-ds-shape=\"circular\"],\n:host([data-ds-shape=\"circular\"]) {\n  --ds-corner-size: 999px;\n  --ds-corner-shape: round;\n  --ds-button-inset: 5px;\n}\n\n/* A squircle needs twice an arc's radius for the same apparent corner.\n * Circular controls keep true semicircles even in a squircle browser. */\n@supports (corner-shape: squircle) {\n  [data-ds-shape=\"rounded\"],\n  :host([data-ds-shape=\"rounded\"]) {\n    --ds-corner-size: 8px;\n    --ds-corner-shape: squircle;\n  }\n}\n/* Resolve dimensions where a component is drawn. Inherited calc() values have\n * already used their ancestor's scale. Base tokens stay unscaled and inherit;\n * resolved tokens can still be overridden directly on a component.\n * data-ds-surface gives ordinary layout elements the same scaled measures.\n */\n:root,\n:host,\n:where([data-ds-surface]) {\n  --ds-unit: calc(var(--ds-1, 20px) * var(--ds-sf, 1));\n  --ds-control-height: calc(var(--ds-control-size, var(--ds-08, 16px)) * var(--ds-sf, 1));\n  --ds-row-height: calc(var(--ds-row-size, var(--ds-1, 20px)) * var(--ds-sf, 1));\n  --ds-type-size-default: calc(var(--ds-text-size, 14px) * var(--ds-sf, 1));\n  --ds-type-size-small: calc(var(--ds-small-text-size, 10px) * var(--ds-sf, 1));\n  --ds-type-size-heading: calc(var(--ds-heading-text-size, 13px) * var(--ds-sf, 1));\n  --ds-type-size-display: calc(var(--ds-display-text-size, 20px) * var(--ds-sf, 1));\n  --ds-type-lineheight-default: calc(var(--ds-text-leading, 16px) * var(--ds-sf, 1));\n  --ds-type-letterspacing-default: calc(var(--ds-text-tracking, -0.3px) * var(--ds-sf, 1));\n  --ds-radius: calc(var(--ds-corner-size, 4px) * var(--ds-sf, 1));\n  --ds-radius-card: calc(var(--ds-card-corner-size, 4px) * var(--ds-sf, 1));\n}\n:host {\n  display: block;\n  width: var(--ds-toc-width, calc(12 * var(--ds-unit)));\n  max-width: 100%;\n  color: var(--ds-text-color);\n  font-family: var(--ds-typeface-regular);\n  font-size: var(--ds-type-size-default);\n  font-weight: var(--ds-type-weight-default);\n  line-height: var(--ds-type-lineheight-default);\n  letter-spacing: var(--ds-type-letterspacing-default);\n}\n:host([hidden]) { display: none !important; }\n.title { display: flex; align-items: flex-end; min-height: var(--ds-unit); }\n.links { margin-top: var(--ds-unit); }\na, ::slotted(a) {\n  box-sizing: border-box;\n  display: block;\n  min-height: var(--ds-unit);\n  padding-top: calc(4px * var(--ds-sf));\n  padding-inline-start: calc(var(--toc-depth, 0) * var(--ds-unit));\n  color: var(--ds-toc-color, var(--ds-text-color-muted));\n  font: inherit;\n  line-height: var(--ds-type-lineheight-default);\n  letter-spacing: inherit;\n  text-decoration: none;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: clip;\n}\n/* A cut label fades over its last square, never an ellipsis (0-face/cut-fade.ts marks it). */\na[data-cut=\"end\"], ::slotted(a[data-cut=\"end\"]) {\n  mask-image: linear-gradient(to right, #000 calc(100% - var(--ds-unit)), transparent);\n}\n:host(:dir(rtl)) a[data-cut=\"end\"], :host(:dir(rtl)) ::slotted(a[data-cut=\"end\"]) {\n  mask-image: linear-gradient(to left, #000 calc(100% - var(--ds-unit)), transparent);\n}\na:hover, ::slotted(a:hover) { color: var(--ds-text-color); text-decoration: underline; }\na[aria-current], ::slotted(a[aria-current]) { color: var(--ds-toc-current-color, var(--ds-sharp-blue)); }\na:focus-visible, ::slotted(a:focus-visible) { outline: 1px solid var(--ds-focus-ring); outline-offset: 1px; }\n";
+var ds_table_of_contents_default = "/* Shape is a surface preference. Keep these base lengths unscaled: each\n * component resolves them with its own --ds-sf in component-metrics.css. */\n[data-ds-shape=\"square\"],\n:host([data-ds-shape=\"square\"]) {\n  --ds-corner-size: 0px;\n  --ds-corner-shape: round;\n  --ds-button-inset: 0.5px;\n}\n\n[data-ds-shape=\"rounded\"],\n:host([data-ds-shape=\"rounded\"]) {\n  --ds-corner-size: 4px;\n  --ds-corner-shape: round;\n  --ds-button-inset: 2.5px;\n}\n\n[data-ds-shape=\"circular\"],\n:host([data-ds-shape=\"circular\"]) {\n  --ds-corner-size: 999px;\n  --ds-corner-shape: round;\n  --ds-button-inset: 5px;\n}\n\n/* A squircle needs twice an arc's radius for the same apparent corner.\n * Circular controls keep true semicircles even in a squircle browser. */\n@supports (corner-shape: squircle) {\n  [data-ds-shape=\"rounded\"],\n  :host([data-ds-shape=\"rounded\"]) {\n    --ds-corner-size: 8px;\n    --ds-corner-shape: squircle;\n  }\n}\n/* Resolve dimensions where a component is drawn. Inherited calc() values have\n * already used their ancestor's scale. Base tokens stay unscaled and inherit;\n * resolved tokens can still be overridden directly on a component.\n * data-ds-surface gives ordinary layout elements the same scaled measures.\n */\n:root,\n:host,\n:where([data-ds-surface]) {\n  --ds-unit: calc(var(--ds-1, 20px) * var(--ds-sf, 1));\n  --ds-control-height: calc(var(--ds-control-size, var(--ds-08, 16px)) * var(--ds-sf, 1));\n  --ds-row-height: calc(var(--ds-row-size, var(--ds-1, 20px)) * var(--ds-sf, 1));\n  --ds-type-size-default: calc(var(--ds-text-size, 14px) * var(--ds-sf, 1));\n  --ds-type-size-small: calc(var(--ds-small-text-size, 10px) * var(--ds-sf, 1));\n  --ds-type-size-heading: calc(var(--ds-heading-text-size, 13px) * var(--ds-sf, 1));\n  --ds-type-size-display: calc(var(--ds-display-text-size, 20px) * var(--ds-sf, 1));\n  --ds-type-lineheight-default: calc(var(--ds-text-leading, 16px) * var(--ds-sf, 1));\n  --ds-type-letterspacing-default: calc(var(--ds-text-tracking, -0.3px) * var(--ds-sf, 1));\n  --ds-radius: calc(var(--ds-corner-size, 4px) * var(--ds-sf, 1));\n  --ds-radius-card: calc(var(--ds-card-corner-size, 4px) * var(--ds-sf, 1));\n}\n:host {\n  display: block;\n  width: var(--ds-toc-width, calc(12 * var(--ds-unit)));\n  max-width: 100%;\n  color: var(--ds-text-color);\n  font-family: \"Inter Arrows\", var(--ds-typeface-regular);\n  font-size: var(--ds-type-size-default);\n  font-weight: var(--ds-type-weight-default);\n  line-height: var(--ds-type-lineheight-default);\n  letter-spacing: var(--ds-type-letterspacing-default);\n}\n:host([hidden]) { display: none !important; }\n.title { display: flex; align-items: flex-end; min-height: var(--ds-unit); }\n.links { margin-top: var(--ds-unit); }\na, ::slotted(a) {\n  box-sizing: border-box;\n  display: block;\n  min-height: var(--ds-unit);\n  padding-top: calc(4px * var(--ds-sf));\n  padding-inline-start: calc(var(--toc-depth, 0) * var(--ds-unit));\n  color: var(--ds-toc-color, var(--ds-text-color-muted));\n  font: inherit;\n  line-height: var(--ds-type-lineheight-default);\n  letter-spacing: inherit;\n  text-decoration: none;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: clip;\n}\n/* A cut label fades over its last square, never an ellipsis (0-face/cut-fade.ts marks it). */\na[data-cut=\"end\"], ::slotted(a[data-cut=\"end\"]) {\n  mask-image: linear-gradient(to right, #000 calc(100% - var(--ds-unit)), transparent);\n}\n:host(:dir(rtl)) a[data-cut=\"end\"], :host(:dir(rtl)) ::slotted(a[data-cut=\"end\"]) {\n  mask-image: linear-gradient(to left, #000 calc(100% - var(--ds-unit)), transparent);\n}\na:hover, ::slotted(a:hover) { color: var(--ds-text-color); text-decoration: underline; }\na[aria-current], ::slotted(a[aria-current]) { color: var(--ds-toc-current-color, var(--ds-sharp-blue)); }\na:focus-visible, ::slotted(a:focus-visible) { outline: 1px solid var(--ds-focus-ring); outline-offset: 1px; }\n";
 //#endregion
 //#region DS1/3-unit/ds-table-of-contents.ts
 var _TableOfContents;
@@ -16161,7 +16501,7 @@ var Container = class extends i$4 {
 };
 _Container = Container;
 _Container.styles = r$4(ds_container_default);
-customElements.define("ds-container", Container);
+define("ds-container", Container);
 //#endregion
 //#region DS1/4-page/styles/ds-grid.css?inline
 var ds_grid_default = "/* A one-square pitch by default. Rules stay hairlines at every surface scale. */\n:host {\n  --grid-scale: var(--ds-sf, var(--sf, 1));\n  display: block;\n  position: fixed;\n  top: 0;\n  left: 50%;\n  transform: translateX(-50%);\n  width: var(--ds-grid-width, calc(1440px * var(--grid-scale)));\n  height: var(--ds-grid-height, max(100vh, calc(1280px * var(--grid-scale))));\n  pointer-events: none;\n  z-index: var(--ds-grid-z-index, 300);\n}\n:host([hidden]) { display: none !important; }\n:host([align=\"left\"]) { left: 0; transform: none; }\n:host([align=\"right\"]) { left: auto; right: 0; transform: none; }\n@media (max-width: 768px) {\n  :host { width: calc(100% - 1px); max-width: 100vw; }\n}\n/* The containing element establishes positioning; its content stays above the paper. */\n:host([contained]) { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; transform: none; z-index: 0; }\n.paper {\n  position: absolute;\n  inset: 0;\n  --cell: var(--ds-grid-unit, calc(var(--pitch-x) * var(--grid-scale)));\n  --row: var(--ds-grid-row, calc(var(--pitch-y) * var(--grid-scale)));\n  --stroke: var(--ds-grid-stroke, 1px);\n  background-color: var(--paper);\n  background-size: var(--cell) var(--row);\n  background-position: calc(var(--ds-grid-origin-x, 0px) - var(--stroke) / 2) calc(var(--ds-grid-origin-y, 0px) - var(--stroke) / 2);\n  background-repeat: repeat;\n}\n[data-pattern=\"grid\"] { background-image: linear-gradient(to right, var(--ink) var(--stroke), transparent var(--stroke)), linear-gradient(to bottom, var(--ink) var(--stroke), transparent var(--stroke)); }\n[data-pattern=\"lines\"] { background-image: linear-gradient(to bottom, var(--ink) var(--stroke), transparent var(--stroke)); }\n[data-pattern=\"columns\"] { background-image: linear-gradient(to right, var(--ink) var(--stroke), transparent var(--stroke)); }\n[data-pattern=\"dots\"] {\n  background-image: radial-gradient(circle, var(--ink) var(--stroke), transparent var(--stroke));\n  background-position: var(--ds-grid-origin-x, 0px) calc(var(--ds-grid-origin-y, 0px) - var(--row) / 2);\n}\n[data-pattern=\"none\"] { background-image: none; }\n@media print { :host(:not([contained])) { display: none; } }\n";
@@ -16432,7 +16772,7 @@ function attachOverlay(options) {
 }
 //#endregion
 //#region DS1/4-page/styles/ds-page.css?inline
-var ds_page_default = "/* Shape is a surface preference. Keep these base lengths unscaled: each\n * component resolves them with its own --ds-sf in component-metrics.css. */\n[data-ds-shape=\"square\"],\n:host([data-ds-shape=\"square\"]) {\n  --ds-corner-size: 0px;\n  --ds-corner-shape: round;\n  --ds-button-inset: 0.5px;\n}\n\n[data-ds-shape=\"rounded\"],\n:host([data-ds-shape=\"rounded\"]) {\n  --ds-corner-size: 4px;\n  --ds-corner-shape: round;\n  --ds-button-inset: 2.5px;\n}\n\n[data-ds-shape=\"circular\"],\n:host([data-ds-shape=\"circular\"]) {\n  --ds-corner-size: 999px;\n  --ds-corner-shape: round;\n  --ds-button-inset: 5px;\n}\n\n/* A squircle needs twice an arc's radius for the same apparent corner.\n * Circular controls keep true semicircles even in a squircle browser. */\n@supports (corner-shape: squircle) {\n  [data-ds-shape=\"rounded\"],\n  :host([data-ds-shape=\"rounded\"]) {\n    --ds-corner-size: 8px;\n    --ds-corner-shape: squircle;\n  }\n}\n/* Resolve dimensions where a component is drawn. Inherited calc() values have\n * already used their ancestor's scale. Base tokens stay unscaled and inherit;\n * resolved tokens can still be overridden directly on a component.\n * data-ds-surface gives ordinary layout elements the same scaled measures.\n */\n:root,\n:host,\n:where([data-ds-surface]) {\n  --ds-unit: calc(var(--ds-1, 20px) * var(--ds-sf, 1));\n  --ds-control-height: calc(var(--ds-control-size, var(--ds-08, 16px)) * var(--ds-sf, 1));\n  --ds-row-height: calc(var(--ds-row-size, var(--ds-1, 20px)) * var(--ds-sf, 1));\n  --ds-type-size-default: calc(var(--ds-text-size, 14px) * var(--ds-sf, 1));\n  --ds-type-size-small: calc(var(--ds-small-text-size, 10px) * var(--ds-sf, 1));\n  --ds-type-size-heading: calc(var(--ds-heading-text-size, 13px) * var(--ds-sf, 1));\n  --ds-type-size-display: calc(var(--ds-display-text-size, 20px) * var(--ds-sf, 1));\n  --ds-type-lineheight-default: calc(var(--ds-text-leading, 16px) * var(--ds-sf, 1));\n  --ds-type-letterspacing-default: calc(var(--ds-text-tracking, -0.3px) * var(--ds-sf, 1));\n  --ds-radius: calc(var(--ds-corner-size, 4px) * var(--ds-sf, 1));\n  --ds-radius-card: calc(var(--ds-card-corner-size, 4px) * var(--ds-sf, 1));\n}\n/* ds-page.css\n * Five areas, six arrangements. Every width is whole squares; areas are\n * separated by one square down the page and two across. An empty area takes\n * no room, so its margin goes with it.\n */\n\n:host {\n  --ds-page-nav: calc(12 * var(--ds-unit));\n  --ds-page-aside: calc(12 * var(--ds-unit));\n  --ds-page-measure: calc(32 * var(--ds-unit));\n  --ds-page-tile: calc(12 * var(--ds-unit));\n  --ds-page-gap: calc(2 * var(--ds-unit));\n  --ds-page-line: var(--ds-border-color, var(--ds-slate-light));\n  /* How far the content stands outside its column on each side, the column's place and the\n     grid's lines kept: a phone's lists take a little more width, their words a longer line\n     (Money sets 4px). Zero by default. */\n  --ds-page-bleed: 0px;\n  box-sizing: border-box;\n  display: block;\n  container-type: inline-size;\n  min-width: 0;\n  color: var(--ds-text-color);\n  font-family: var(--ds-typeface-regular);\n  font-feature-settings: var(--ds-font-features);\n  font-size: var(--ds-type-size-default);\n  line-height: var(--ds-type-lineheight-default);\n  letter-spacing: var(--ds-type-letterspacing-default);\n}\n\n:host([hidden]) { display: none; }\n:host([fill]) { height: 100%; }\n\n.page {\n  box-sizing: border-box;\n  display: grid;\n  column-gap: var(--ds-page-gap);\n  grid-template-columns: var(--ds-page-nav) minmax(0, 1fr);\n  grid-template-rows: auto minmax(0, 1fr) auto auto;\n  grid-template-areas:\n    \"nav header\"\n    \"nav main\"\n    \"nav aside\"\n    \"nav footer\";\n  min-height: 100%;\n  padding: var(--ds-unit) calc(var(--ds-unit) - var(--ds-page-bleed));\n}\n\n:host([fill]) .page { height: 100%; }\n\n.area { position: relative; min-width: 0; }\n/* The drawer's menu button: shown only on a narrow page with `drawer`. */\n.bar { display: none; grid-area: bar; }\n.bar[hidden] { display: none !important; }\n.area[data-empty] { display: none; }\n.nav { grid-area: nav; }\n.header { grid-area: header; margin-block-end: var(--ds-unit); }\n.main { grid-area: main; }\n.aside { grid-area: aside; margin-block-start: var(--ds-unit); }\n.footer { grid-area: footer; margin-block-start: var(--ds-unit); }\n\n:host([fill]) :is(.nav, .main, .aside) { min-height: 0; overflow: auto; }\n\n/* List and detail: a wider leading column holds the list. */\n:host([layout=\"split\"]) { --ds-page-nav: calc(16 * var(--ds-unit)); }\n\n/* Inspector: navigation, the work, and its properties beside it. */\n:host([layout=\"inspector\"]) .page {\n  grid-template-columns: var(--ds-page-nav) minmax(0, 1fr) var(--ds-page-aside);\n  grid-template-rows: auto minmax(0, 1fr) auto;\n  grid-template-areas:\n    \"nav header aside\"\n    \"nav main aside\"\n    \"nav footer aside\";\n}\n:host([layout=\"inspector\"]) .aside { margin-block-start: 0; }\n\n/* One column down the middle; centred is narrower and sits in the middle of\n * the height it is given. Tiles fill the width with 12-square tiles.\n *\n * A centred column stands on a whole square. The room beside it is shared out\n * and rounded down to squares, then added to the page's own square of padding,\n * so when the room is an odd number of squares the extra one falls on the\n * trailing side instead of leaving the column on a half. 100% is the width of\n * the element; with less room than the measure needs, the padding stays one\n * square and the column takes what is left. */\n:host(:is([layout=\"column\"], [layout=\"centered\"], [layout=\"tiles\"])) .page {\n  grid-template-columns: minmax(0, calc(var(--ds-page-measure) + 2 * var(--ds-page-bleed)));\n  grid-template-rows: auto auto minmax(0, 1fr) auto auto;\n  grid-template-areas: \"header\" \"nav\" \"main\" \"aside\" \"footer\";\n}\n:host(:is([layout=\"column\"], [layout=\"centered\"])) .page {\n  justify-content: start;\n  padding-inline-start: calc(var(--ds-unit) + max(0px, round(down, calc((100% - 2 * var(--ds-unit) - var(--ds-page-measure)) / 2), var(--ds-unit))) - var(--ds-page-bleed));\n}\n:host(:is([layout=\"column\"], [layout=\"centered\"], [layout=\"tiles\"])) .nav { margin-block-end: var(--ds-unit); }\n\n/* A column or centred page stands what it holds one square apart, as blocks of writing are,\n   so a page needs no spacing of its own; `--ds-page-flow` sets another distance. A button or a tag\n   keeps its own width. */\n:host(:is([layout=\"column\"], [layout=\"centered\"])) .main {\n  display: grid;\n  grid-template-columns: minmax(0, 1fr);\n  align-content: start;\n  gap: var(--ds-page-flow, var(--ds-unit));\n}\n:host(:is([layout=\"column\"], [layout=\"centered\"])) .main ::slotted(:is(ds-button, ds-tag, ds-badge, ds-avatar, ds-cycle, a, button)) { justify-self: start; }\n:host([layout=\"centered\"]) { --ds-page-measure: calc(16 * var(--ds-unit)); }\n:host([layout=\"centered\"]) .page { grid-template-rows: auto; align-content: center; }\n\n:host([layout=\"tiles\"]) .page { grid-template-columns: minmax(0, 1fr); }\n:host([layout=\"tiles\"]) .main {\n  display: grid;\n  grid-template-columns: repeat(auto-fill, var(--ds-page-tile));\n  grid-auto-rows: auto;\n  gap: var(--ds-unit);\n  align-items: start;\n  align-content: start;\n}\n:host([layout=\"tiles\"]) .main ::slotted(*) { min-width: 0; }\n:host([layout=\"tiles\"]) .main ::slotted([data-tile=\"wide\"]) { grid-column: span 2; }\n:host([layout=\"tiles\"]) .main ::slotted([data-tile=\"full\"]) { grid-column: 1 / -1; }\n\n/* Hairlines between columns, on the grid line in the middle of the gap. The\n * column reaches across half the gap to draw it, so its content keeps its\n * whole width. */\n:host([divided]:not([layout=\"column\"]):not([layout=\"centered\"]):not([layout=\"tiles\"])) .nav {\n  border-inline-end: 1px solid var(--ds-page-line);\n  padding-inline-end: calc(var(--ds-page-gap) / 2 - 1px);\n  margin-inline-end: calc(var(--ds-page-gap) / -2);\n}\n:host([divided][layout=\"inspector\"]) .aside {\n  border-inline-start: 1px solid var(--ds-page-line);\n  padding-inline-start: calc(var(--ds-page-gap) / 2 - 1px);\n  margin-inline-start: calc(var(--ds-page-gap) / -2);\n}\n\n/* Narrower than navigation, the work and its properties: properties go below. */\n@container (max-width: 959px) {\n  :host([layout=\"inspector\"]) .page {\n    grid-template-columns: var(--ds-page-nav) minmax(0, 1fr);\n    grid-template-rows: auto minmax(0, 1fr) auto auto;\n    grid-template-areas:\n      \"nav header\"\n      \"nav main\"\n      \"nav aside\"\n      \"nav footer\";\n  }\n  :host([layout=\"inspector\"]) .aside { margin-block-start: var(--ds-unit); }\n  :host([divided][layout=\"inspector\"]) .aside { border-inline-start: 0; padding-inline-start: 0; margin-inline-start: 0; }\n}\n\n/* Phone width: every layout is one column, navigation first. */\n@container (max-width: 599px) {\n  .page,\n  :host([layout=\"inspector\"]) .page {\n    grid-template-columns: minmax(0, 1fr);\n    grid-template-rows: auto;\n    grid-template-areas: \"nav\" \"header\" \"main\" \"aside\" \"footer\";\n    column-gap: 0;\n    align-content: start;\n  }\n  .nav { margin-block-end: var(--ds-unit); }\n  :host([divided]:not([layout=\"column\"]):not([layout=\"centered\"]):not([layout=\"tiles\"])) .nav {\n    border-inline-end: 0;\n    padding-inline-end: 0;\n    margin-inline-end: 0;\n    border-block-end: 1px solid var(--ds-page-line);\n    padding-block-end: calc(var(--ds-unit) - 1px);\n  }\n  :host([fill]) :is(.nav, .main, .aside) { overflow: visible; }\n  :host([fill]) .page { height: auto; }\n  :host([layout=\"tiles\"]) .main { display: flex; flex-direction: column; align-items: stretch; }\n}\n\n/* Phone width with a drawer: the navigation folds away and the menu button\n * stands in a one-square column before the header. In the drawer the\n * navigation takes the panel's width, with none of the page's margins. */\n@container (max-width: 599px) {\n  :host([drawer]) .page,\n  :host([drawer][layout=\"inspector\"]) .page {\n    grid-template-columns: var(--ds-unit) minmax(0, 1fr);\n    column-gap: var(--ds-unit);\n    grid-template-areas: \"bar header\" \"main main\" \"aside aside\" \"footer footer\";\n  }\n  :host([drawer]) .bar {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    height: var(--ds-unit);\n    margin-block-end: var(--ds-unit);\n  }\n  :host([drawer]) .page > .nav { display: none; }\n}\n/* Important, as the layouts' own margins and hairlines for the navigation\n * reach it by more specific selectors. */\n.ds-overlay--screen > .nav {\n  margin: 0 !important;\n  padding: 0 !important;\n  border: 0 !important;\n  overflow: visible !important;\n}\n\n/* Inspection: each area outlined and named by its slot, in the corner its\n * content is least likely to use. */\n:host([view]) .area:not([data-empty]) {\n  outline: 1px dashed color-mix(in srgb, var(--ds-pink) 80%, var(--ds-text-color));\n  outline-offset: -1px;\n}\n:host([view]) .area:not([data-empty])::before {\n  content: attr(data-area);\n  position: absolute;\n  z-index: 1;\n  inset-block-end: 0;\n  inset-inline-end: 0;\n  height: var(--ds-unit);\n  padding-inline: calc(4px * var(--ds-sf));\n  font-size: var(--ds-type-size-small);\n  line-height: var(--ds-unit);\n  color: var(--ds-black);\n  background: var(--ds-pink);\n  pointer-events: none;\n}\n";
+var ds_page_default = "/* Shape is a surface preference. Keep these base lengths unscaled: each\n * component resolves them with its own --ds-sf in component-metrics.css. */\n[data-ds-shape=\"square\"],\n:host([data-ds-shape=\"square\"]) {\n  --ds-corner-size: 0px;\n  --ds-corner-shape: round;\n  --ds-button-inset: 0.5px;\n}\n\n[data-ds-shape=\"rounded\"],\n:host([data-ds-shape=\"rounded\"]) {\n  --ds-corner-size: 4px;\n  --ds-corner-shape: round;\n  --ds-button-inset: 2.5px;\n}\n\n[data-ds-shape=\"circular\"],\n:host([data-ds-shape=\"circular\"]) {\n  --ds-corner-size: 999px;\n  --ds-corner-shape: round;\n  --ds-button-inset: 5px;\n}\n\n/* A squircle needs twice an arc's radius for the same apparent corner.\n * Circular controls keep true semicircles even in a squircle browser. */\n@supports (corner-shape: squircle) {\n  [data-ds-shape=\"rounded\"],\n  :host([data-ds-shape=\"rounded\"]) {\n    --ds-corner-size: 8px;\n    --ds-corner-shape: squircle;\n  }\n}\n/* Resolve dimensions where a component is drawn. Inherited calc() values have\n * already used their ancestor's scale. Base tokens stay unscaled and inherit;\n * resolved tokens can still be overridden directly on a component.\n * data-ds-surface gives ordinary layout elements the same scaled measures.\n */\n:root,\n:host,\n:where([data-ds-surface]) {\n  --ds-unit: calc(var(--ds-1, 20px) * var(--ds-sf, 1));\n  --ds-control-height: calc(var(--ds-control-size, var(--ds-08, 16px)) * var(--ds-sf, 1));\n  --ds-row-height: calc(var(--ds-row-size, var(--ds-1, 20px)) * var(--ds-sf, 1));\n  --ds-type-size-default: calc(var(--ds-text-size, 14px) * var(--ds-sf, 1));\n  --ds-type-size-small: calc(var(--ds-small-text-size, 10px) * var(--ds-sf, 1));\n  --ds-type-size-heading: calc(var(--ds-heading-text-size, 13px) * var(--ds-sf, 1));\n  --ds-type-size-display: calc(var(--ds-display-text-size, 20px) * var(--ds-sf, 1));\n  --ds-type-lineheight-default: calc(var(--ds-text-leading, 16px) * var(--ds-sf, 1));\n  --ds-type-letterspacing-default: calc(var(--ds-text-tracking, -0.3px) * var(--ds-sf, 1));\n  --ds-radius: calc(var(--ds-corner-size, 4px) * var(--ds-sf, 1));\n  --ds-radius-card: calc(var(--ds-card-corner-size, 4px) * var(--ds-sf, 1));\n}\n/* ds-page.css\n * Five areas, six arrangements. Every width is whole squares; areas are\n * separated by one square down the page and two across. An empty area takes\n * no room, so its margin goes with it.\n */\n\n:host {\n  --ds-page-nav: calc(12 * var(--ds-unit));\n  --ds-page-aside: calc(12 * var(--ds-unit));\n  --ds-page-measure: calc(32 * var(--ds-unit));\n  --ds-page-tile: calc(12 * var(--ds-unit));\n  --ds-page-gap: calc(2 * var(--ds-unit));\n  --ds-page-line: var(--ds-border-color, var(--ds-slate-light));\n  /* How far the content stands outside its column on each side, the column's place and the\n     grid's lines kept: a phone's lists take a little more width, their words a longer line\n     (Money sets 4px). Zero by default. */\n  --ds-page-bleed: 0px;\n  box-sizing: border-box;\n  display: block;\n  container-type: inline-size;\n  min-width: 0;\n  color: var(--ds-text-color);\n  font-family: \"Inter Arrows\", var(--ds-typeface-regular);\n  font-feature-settings: var(--ds-font-features);\n  font-size: var(--ds-type-size-default);\n  line-height: var(--ds-type-lineheight-default);\n  letter-spacing: var(--ds-type-letterspacing-default);\n}\n\n:host([hidden]) { display: none; }\n:host([fill]) { height: 100%; }\n\n.page {\n  box-sizing: border-box;\n  display: grid;\n  column-gap: var(--ds-page-gap);\n  grid-template-columns: var(--ds-page-nav) minmax(0, 1fr);\n  grid-template-rows: auto minmax(0, 1fr) auto auto;\n  grid-template-areas:\n    \"nav header\"\n    \"nav main\"\n    \"nav aside\"\n    \"nav footer\";\n  min-height: 100%;\n  padding: var(--ds-unit) calc(var(--ds-unit) - var(--ds-page-bleed));\n}\n\n:host([fill]) .page { height: 100%; }\n\n.area { position: relative; min-width: 0; }\n/* The drawer's menu button: shown only on a narrow page with `drawer`. */\n.bar { display: none; grid-area: bar; }\n.bar[hidden] { display: none !important; }\n.area[data-empty] { display: none; }\n.nav { grid-area: nav; }\n.header { grid-area: header; margin-block-end: var(--ds-unit); }\n.main { grid-area: main; }\n.aside { grid-area: aside; margin-block-start: var(--ds-unit); }\n.footer { grid-area: footer; margin-block-start: var(--ds-unit); }\n\n:host([fill]) :is(.nav, .main, .aside) { min-height: 0; overflow: auto; }\n\n/* List and detail: a wider leading column holds the list. */\n:host([layout=\"split\"]) { --ds-page-nav: calc(16 * var(--ds-unit)); }\n\n/* Inspector: navigation, the work, and its properties beside it. */\n:host([layout=\"inspector\"]) .page {\n  grid-template-columns: var(--ds-page-nav) minmax(0, 1fr) var(--ds-page-aside);\n  grid-template-rows: auto minmax(0, 1fr) auto;\n  grid-template-areas:\n    \"nav header aside\"\n    \"nav main aside\"\n    \"nav footer aside\";\n}\n:host([layout=\"inspector\"]) .aside { margin-block-start: 0; }\n\n/* One column down the middle; centred is narrower and sits in the middle of\n * the height it is given. Tiles fill the width with 12-square tiles.\n *\n * A centred column stands on a whole square. The room beside it is shared out\n * and rounded down to squares, then added to the page's own square of padding,\n * so when the room is an odd number of squares the extra one falls on the\n * trailing side instead of leaving the column on a half. 100% is the width of\n * the element; with less room than the measure needs, the padding stays one\n * square and the column takes what is left. */\n:host(:is([layout=\"column\"], [layout=\"centered\"], [layout=\"tiles\"])) .page {\n  grid-template-columns: minmax(0, calc(var(--ds-page-measure) + 2 * var(--ds-page-bleed)));\n  grid-template-rows: auto auto minmax(0, 1fr) auto auto;\n  grid-template-areas: \"header\" \"nav\" \"main\" \"aside\" \"footer\";\n}\n:host(:is([layout=\"column\"], [layout=\"centered\"])) .page {\n  justify-content: start;\n  padding-inline-start: calc(var(--ds-unit) + max(0px, round(down, calc((100% - 2 * var(--ds-unit) - var(--ds-page-measure)) / 2), var(--ds-unit))) - var(--ds-page-bleed));\n}\n:host(:is([layout=\"column\"], [layout=\"centered\"], [layout=\"tiles\"])) .nav { margin-block-end: var(--ds-unit); }\n\n/* A column or centred page stands what it holds one square apart, as blocks of writing are,\n   so a page needs no spacing of its own; `--ds-page-flow` sets another distance. A button or a tag\n   keeps its own width. */\n:host(:is([layout=\"column\"], [layout=\"centered\"])) .main {\n  display: grid;\n  grid-template-columns: minmax(0, 1fr);\n  align-content: start;\n  gap: var(--ds-page-flow, var(--ds-unit));\n}\n:host(:is([layout=\"column\"], [layout=\"centered\"])) .main ::slotted(:is(ds-button, ds-tag, ds-badge, ds-avatar, ds-cycle, a, button)) { justify-self: start; }\n:host([layout=\"centered\"]) { --ds-page-measure: calc(16 * var(--ds-unit)); }\n:host([layout=\"centered\"]) .page { grid-template-rows: auto; align-content: center; }\n\n:host([layout=\"tiles\"]) .page { grid-template-columns: minmax(0, 1fr); }\n:host([layout=\"tiles\"]) .main {\n  display: grid;\n  grid-template-columns: repeat(auto-fill, var(--ds-page-tile));\n  grid-auto-rows: auto;\n  gap: var(--ds-unit);\n  align-items: start;\n  align-content: start;\n}\n:host([layout=\"tiles\"]) .main ::slotted(*) { min-width: 0; }\n:host([layout=\"tiles\"]) .main ::slotted([data-tile=\"wide\"]) { grid-column: span 2; }\n:host([layout=\"tiles\"]) .main ::slotted([data-tile=\"full\"]) { grid-column: 1 / -1; }\n\n/* Hairlines between columns, on the grid line in the middle of the gap. The\n * column reaches across half the gap to draw it, so its content keeps its\n * whole width. */\n:host([divided]:not([layout=\"column\"]):not([layout=\"centered\"]):not([layout=\"tiles\"])) .nav {\n  border-inline-end: 1px solid var(--ds-page-line);\n  padding-inline-end: calc(var(--ds-page-gap) / 2 - 1px);\n  margin-inline-end: calc(var(--ds-page-gap) / -2);\n}\n:host([divided][layout=\"inspector\"]) .aside {\n  border-inline-start: 1px solid var(--ds-page-line);\n  padding-inline-start: calc(var(--ds-page-gap) / 2 - 1px);\n  margin-inline-start: calc(var(--ds-page-gap) / -2);\n}\n\n/* Narrower than navigation, the work and its properties: properties go below. */\n@container (max-width: 959px) {\n  :host([layout=\"inspector\"]) .page {\n    grid-template-columns: var(--ds-page-nav) minmax(0, 1fr);\n    grid-template-rows: auto minmax(0, 1fr) auto auto;\n    grid-template-areas:\n      \"nav header\"\n      \"nav main\"\n      \"nav aside\"\n      \"nav footer\";\n  }\n  :host([layout=\"inspector\"]) .aside { margin-block-start: var(--ds-unit); }\n  :host([divided][layout=\"inspector\"]) .aside { border-inline-start: 0; padding-inline-start: 0; margin-inline-start: 0; }\n}\n\n/* Phone width: every layout is one column, navigation first. */\n@container (max-width: 599px) {\n  .page,\n  :host([layout=\"inspector\"]) .page {\n    grid-template-columns: minmax(0, 1fr);\n    grid-template-rows: auto;\n    grid-template-areas: \"nav\" \"header\" \"main\" \"aside\" \"footer\";\n    column-gap: 0;\n    align-content: start;\n  }\n  .nav { margin-block-end: var(--ds-unit); }\n  :host([divided]:not([layout=\"column\"]):not([layout=\"centered\"]):not([layout=\"tiles\"])) .nav {\n    border-inline-end: 0;\n    padding-inline-end: 0;\n    margin-inline-end: 0;\n    border-block-end: 1px solid var(--ds-page-line);\n    padding-block-end: calc(var(--ds-unit) - 1px);\n  }\n  :host([fill]) :is(.nav, .main, .aside) { overflow: visible; }\n  :host([fill]) .page { height: auto; }\n  :host([layout=\"tiles\"]) .main { display: flex; flex-direction: column; align-items: stretch; }\n}\n\n/* Phone width with a drawer: the navigation folds away and the menu button\n * stands in a one-square column before the header. In the drawer the\n * navigation takes the panel's width, with none of the page's margins. */\n@container (max-width: 599px) {\n  :host([drawer]) .page,\n  :host([drawer][layout=\"inspector\"]) .page {\n    grid-template-columns: var(--ds-unit) minmax(0, 1fr);\n    column-gap: var(--ds-unit);\n    grid-template-areas: \"bar header\" \"main main\" \"aside aside\" \"footer footer\";\n  }\n  :host([drawer]) .bar {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    height: var(--ds-unit);\n    margin-block-end: var(--ds-unit);\n  }\n  :host([drawer]) .page > .nav { display: none; }\n}\n/* Important, as the layouts' own margins and hairlines for the navigation\n * reach it by more specific selectors. */\n.ds-overlay--screen > .nav {\n  margin: 0 !important;\n  padding: 0 !important;\n  border: 0 !important;\n  overflow: visible !important;\n}\n\n/* Inspection: each area outlined and named by its slot, in the corner its\n * content is least likely to use. */\n:host([view]) .area:not([data-empty]) {\n  outline: 1px dashed color-mix(in srgb, var(--ds-pink) 80%, var(--ds-text-color));\n  outline-offset: -1px;\n}\n:host([view]) .area:not([data-empty])::before {\n  content: attr(data-area);\n  position: absolute;\n  z-index: 1;\n  inset-block-end: 0;\n  inset-inline-end: 0;\n  height: var(--ds-unit);\n  padding-inline: calc(4px * var(--ds-sf));\n  font-size: var(--ds-type-size-small);\n  line-height: var(--ds-unit);\n  color: var(--ds-black);\n  background: var(--ds-pink);\n  pointer-events: none;\n}\n";
 //#endregion
 //#region DS1/4-page/ds-page.ts
 var _Page;
@@ -17013,13 +17353,13 @@ _Footer.styles = [
 define("ds-footer", Footer);
 //#endregion
 //#region DS1/1-root/document.css?inline
-var document_default$1 = "/* Shape is a surface preference. Keep these base lengths unscaled: each\n * component resolves them with its own --ds-sf in component-metrics.css. */\n[data-ds-shape=\"square\"],\n:host([data-ds-shape=\"square\"]) {\n  --ds-corner-size: 0px;\n  --ds-corner-shape: round;\n  --ds-button-inset: 0.5px;\n}\n\n[data-ds-shape=\"rounded\"],\n:host([data-ds-shape=\"rounded\"]) {\n  --ds-corner-size: 4px;\n  --ds-corner-shape: round;\n  --ds-button-inset: 2.5px;\n}\n\n[data-ds-shape=\"circular\"],\n:host([data-ds-shape=\"circular\"]) {\n  --ds-corner-size: 999px;\n  --ds-corner-shape: round;\n  --ds-button-inset: 5px;\n}\n\n/* A squircle needs twice an arc's radius for the same apparent corner.\n * Circular controls keep true semicircles even in a squircle browser. */\n@supports (corner-shape: squircle) {\n  [data-ds-shape=\"rounded\"],\n  :host([data-ds-shape=\"rounded\"]) {\n    --ds-corner-size: 8px;\n    --ds-corner-shape: squircle;\n  }\n}\n/* Resolve dimensions where a component is drawn. Inherited calc() values have\n * already used their ancestor's scale. Base tokens stay unscaled and inherit;\n * resolved tokens can still be overridden directly on a component.\n * data-ds-surface gives ordinary layout elements the same scaled measures.\n */\n:root,\n:host,\n:where([data-ds-surface]) {\n  --ds-unit: calc(var(--ds-1, 20px) * var(--ds-sf, 1));\n  --ds-control-height: calc(var(--ds-control-size, var(--ds-08, 16px)) * var(--ds-sf, 1));\n  --ds-row-height: calc(var(--ds-row-size, var(--ds-1, 20px)) * var(--ds-sf, 1));\n  --ds-type-size-default: calc(var(--ds-text-size, 14px) * var(--ds-sf, 1));\n  --ds-type-size-small: calc(var(--ds-small-text-size, 10px) * var(--ds-sf, 1));\n  --ds-type-size-heading: calc(var(--ds-heading-text-size, 13px) * var(--ds-sf, 1));\n  --ds-type-size-display: calc(var(--ds-display-text-size, 20px) * var(--ds-sf, 1));\n  --ds-type-lineheight-default: calc(var(--ds-text-leading, 16px) * var(--ds-sf, 1));\n  --ds-type-letterspacing-default: calc(var(--ds-text-tracking, -0.3px) * var(--ds-sf, 1));\n  --ds-radius: calc(var(--ds-corner-size, 4px) * var(--ds-sf, 1));\n  --ds-radius-card: calc(var(--ds-card-corner-size, 4px) * var(--ds-sf, 1));\n}\n/*\n * A document page: terms, a privacy policy, a legal notice, a help article.\n *\n * The contents stand at the start, twelve squares wide, and stay in view as\n * the writing scrolls past; the writing, two squares after them, is a reading\n * column of at most thirty-two squares, native headings and paragraphs marked\n * `data-ds-prose` (prose.css draws them). Where the two do not fit side by\n * side the contents stand above the writing. Every line is one square; the\n * contents' links are in the text's ink, the section in view (`aria-current`)\n * on a hairline of the full ink, a third level half a square in. The\n * `ds-document` element builds the contents from the headings and marks the\n * one in view.\n *\n *   ds-document                  the page's two columns\n *   ds-document__toc             the contents, a <nav>, as tall as the writing\n *   ds-document__contents        inside it, what stays in view: the title and the list\n *   ds-document__toc-title       \"Contents\", one line in the title grey\n *   ds-document__toc-list        the links, an <ol> with one link per <li>\n *   ds-document__toc-sub         an <li> for a third-level heading\n *   ds-document__body            the writing, marked data-ds-prose\n *\n * A definition table (`ds-definitions` on a <dl>) sets terms beside what they\n * mean, as a legal notice such as 特定商取引法に基づく表記 does: the term eight\n * squares wide in the muted ink, its definition beside it, each pair on a\n * hairline at its foot with half a square above and below, as a prose table's\n * rows are. Pairs may stand in a <div> each. Below twenty-four squares the\n * definition goes under its term. It works inside or outside prose.\n *\n * Tokens: `--ds-document-top` (where the contents stop below the top of the\n * view, one square; add a sticky header's height), `--ds-definitions-term`\n * (the term column, eight squares).\n */\n\n.ds-document {\n  box-sizing: border-box;\n  display: flex;\n  flex-wrap: wrap;\n  align-items: stretch;\n  gap: var(--ds-unit) calc(2 * var(--ds-unit));\n  min-width: 0;\n  color: var(--ds-text-color);\n  font-family: var(--ds-typeface-regular);\n  font-feature-settings: var(--ds-font-features);\n  font-size: var(--ds-type-size-default);\n  font-weight: var(--ds-type-weight-default);\n  line-height: var(--ds-unit);\n  letter-spacing: var(--ds-type-letterspacing-default);\n}\n\n/* The contents column stretches to the writing's height when the two stand\n   side by side, so what is inside it can stay in view; standing above the\n   writing it is only as tall as itself, and nothing sticks. */\n.ds-document__toc {\n  flex: 0 0 calc(12 * var(--ds-unit));\n  max-width: 100%;\n  min-width: 0;\n}\n\n.ds-document__contents {\n  position: sticky;\n  top: var(--ds-document-top, var(--ds-unit));\n}\n\n.ds-document__toc-title {\n  margin: 0;\n  color: var(--ds-title-color);\n  font: inherit;\n  letter-spacing: inherit;\n}\n\n.ds-document__toc-list,\n.ds-document__toc-list ol {\n  margin: 0;\n  padding: 0;\n  list-style: none;\n}\n\n.ds-document__toc-list li {\n  margin: 0;\n  padding: 0;\n}\n\n.ds-document__toc-list .ds-document__toc-sub {\n  padding-inline-start: calc(var(--ds-unit) / 2);\n}\n\n.ds-document__toc-list a {\n  display: block;\n  overflow: hidden;\n  color: inherit;\n  text-decoration-line: underline;\n  text-decoration-thickness: 1px;\n  text-decoration-color: transparent;\n  text-overflow: clip;\n  text-underline-offset: calc(2px * var(--ds-sf));\n  white-space: nowrap;\n}\n\n/* A cut link fades over its last square, never an ellipsis (0-face/cut-fade.ts marks it). */\n.ds-document__toc-list a[data-cut=\"end\"] {\n  mask-image: linear-gradient(to right, #000 calc(100% - var(--ds-unit)), transparent);\n}\n.ds-document__toc-list a[data-cut=\"end\"]:dir(rtl) {\n  mask-image: linear-gradient(to left, #000 calc(100% - var(--ds-unit)), transparent);\n}\n\n.ds-document__toc-list a:hover {\n  text-decoration-color: color-mix(in srgb, currentColor 40%, transparent);\n}\n\n.ds-document__toc-list a[aria-current]:not([aria-current=\"false\"]) {\n  text-decoration-color: currentColor;\n}\n\n.ds-document__toc-list a:focus-visible {\n  outline: 2px solid var(--ds-focus-ring);\n  outline-offset: -1px;\n}\n\n/* The writing: at least twenty squares beside the contents, else below them. */\n.ds-document__body {\n  flex: 1 1 0;\n  min-width: min(100%, calc(20 * var(--ds-unit)));\n  max-width: calc(32 * var(--ds-unit));\n}\n\n/* A heading the contents jump to stops where the contents do. */\n.ds-document__body :is(h1, h2, h3, h4, h5, h6) {\n  scroll-margin-top: var(--ds-document-top, var(--ds-unit));\n}\n\n/* A definition table. */\n\n.ds-definitions {\n  box-sizing: border-box;\n  container-type: inline-size;\n  display: grid;\n  grid-template-columns: minmax(0, var(--ds-definitions-term, calc(8 * var(--ds-unit)))) minmax(0, 1fr);\n  margin: 0;\n  padding: 0;\n  color: var(--ds-text-color);\n  font-family: var(--ds-typeface-regular);\n  font-size: var(--ds-type-size-default);\n  line-height: var(--ds-unit);\n  letter-spacing: var(--ds-type-letterspacing-default);\n}\n\n.ds-definitions > div {\n  display: contents;\n}\n\n.ds-definitions :is(dt, dd) {\n  box-sizing: border-box;\n  min-width: 0;\n  margin: 0;\n  padding-block: calc(var(--ds-unit) / 2);\n  box-shadow: inset 0 -1px var(--ds-border-color);\n  font: inherit;\n  letter-spacing: inherit;\n  line-height: var(--ds-unit);\n  overflow-wrap: anywhere;\n}\n\n.ds-definitions dt {\n  grid-column: 1;\n  padding-inline-end: calc(var(--ds-unit) / 2);\n  color: var(--ds-text-color-muted);\n}\n\n.ds-definitions dd {\n  grid-column: 2;\n}\n\n@container (max-width: 479px) {\n  .ds-definitions dt,\n  .ds-definitions dd {\n    grid-column: 1 / -1;\n  }\n\n  .ds-definitions dt {\n    padding-block-end: 0;\n    padding-inline-end: 0;\n    box-shadow: none;\n  }\n\n  .ds-definitions dd {\n    padding-block-start: 0;\n  }\n}\n";
+var document_default$1 = "/* Shape is a surface preference. Keep these base lengths unscaled: each\n * component resolves them with its own --ds-sf in component-metrics.css. */\n[data-ds-shape=\"square\"],\n:host([data-ds-shape=\"square\"]) {\n  --ds-corner-size: 0px;\n  --ds-corner-shape: round;\n  --ds-button-inset: 0.5px;\n}\n\n[data-ds-shape=\"rounded\"],\n:host([data-ds-shape=\"rounded\"]) {\n  --ds-corner-size: 4px;\n  --ds-corner-shape: round;\n  --ds-button-inset: 2.5px;\n}\n\n[data-ds-shape=\"circular\"],\n:host([data-ds-shape=\"circular\"]) {\n  --ds-corner-size: 999px;\n  --ds-corner-shape: round;\n  --ds-button-inset: 5px;\n}\n\n/* A squircle needs twice an arc's radius for the same apparent corner.\n * Circular controls keep true semicircles even in a squircle browser. */\n@supports (corner-shape: squircle) {\n  [data-ds-shape=\"rounded\"],\n  :host([data-ds-shape=\"rounded\"]) {\n    --ds-corner-size: 8px;\n    --ds-corner-shape: squircle;\n  }\n}\n/* Resolve dimensions where a component is drawn. Inherited calc() values have\n * already used their ancestor's scale. Base tokens stay unscaled and inherit;\n * resolved tokens can still be overridden directly on a component.\n * data-ds-surface gives ordinary layout elements the same scaled measures.\n */\n:root,\n:host,\n:where([data-ds-surface]) {\n  --ds-unit: calc(var(--ds-1, 20px) * var(--ds-sf, 1));\n  --ds-control-height: calc(var(--ds-control-size, var(--ds-08, 16px)) * var(--ds-sf, 1));\n  --ds-row-height: calc(var(--ds-row-size, var(--ds-1, 20px)) * var(--ds-sf, 1));\n  --ds-type-size-default: calc(var(--ds-text-size, 14px) * var(--ds-sf, 1));\n  --ds-type-size-small: calc(var(--ds-small-text-size, 10px) * var(--ds-sf, 1));\n  --ds-type-size-heading: calc(var(--ds-heading-text-size, 13px) * var(--ds-sf, 1));\n  --ds-type-size-display: calc(var(--ds-display-text-size, 20px) * var(--ds-sf, 1));\n  --ds-type-lineheight-default: calc(var(--ds-text-leading, 16px) * var(--ds-sf, 1));\n  --ds-type-letterspacing-default: calc(var(--ds-text-tracking, -0.3px) * var(--ds-sf, 1));\n  --ds-radius: calc(var(--ds-corner-size, 4px) * var(--ds-sf, 1));\n  --ds-radius-card: calc(var(--ds-card-corner-size, 4px) * var(--ds-sf, 1));\n}\n/*\n * A document page: terms, a privacy policy, a legal notice, a help article.\n *\n * The contents stand at the start, twelve squares wide, and stay in view as\n * the writing scrolls past; the writing, two squares after them, is a reading\n * column of at most thirty-two squares, native headings and paragraphs marked\n * `data-ds-prose` (prose.css draws them). Where the two do not fit side by\n * side the contents stand above the writing. Every line is one square; the\n * contents' links are in the text's ink, the section in view (`aria-current`)\n * on a hairline of the full ink, a third level half a square in. The\n * `ds-document` element builds the contents from the headings and marks the\n * one in view.\n *\n *   ds-document                  the page's two columns\n *   ds-document__toc             the contents, a <nav>, as tall as the writing\n *   ds-document__contents        inside it, what stays in view: the title and the list\n *   ds-document__toc-title       \"Contents\", one line in the title grey\n *   ds-document__toc-list        the links, an <ol> with one link per <li>\n *   ds-document__toc-sub         an <li> for a third-level heading\n *   ds-document__body            the writing, marked data-ds-prose\n *\n * A definition table (`ds-definitions` on a <dl>) sets terms beside what they\n * mean, as a legal notice such as 特定商取引法に基づく表記 does: the term eight\n * squares wide in the muted ink, its definition beside it, each pair on a\n * hairline at its foot with half a square above and below, as a prose table's\n * rows are. Pairs may stand in a <div> each. Below twenty-four squares the\n * definition goes under its term. It works inside or outside prose.\n *\n * Tokens: `--ds-document-top` (where the contents stop below the top of the\n * view, one square; add a sticky header's height), `--ds-definitions-term`\n * (the term column, eight squares).\n */\n\n.ds-document {\n  box-sizing: border-box;\n  display: flex;\n  flex-wrap: wrap;\n  align-items: stretch;\n  gap: var(--ds-unit) calc(2 * var(--ds-unit));\n  min-width: 0;\n  color: var(--ds-text-color);\n  font-family: \"Inter Arrows\", var(--ds-typeface-regular);\n  font-feature-settings: var(--ds-font-features);\n  font-size: var(--ds-type-size-default);\n  font-weight: var(--ds-type-weight-default);\n  line-height: var(--ds-unit);\n  letter-spacing: var(--ds-type-letterspacing-default);\n}\n\n/* The contents column stretches to the writing's height when the two stand\n   side by side, so what is inside it can stay in view; standing above the\n   writing it is only as tall as itself, and nothing sticks. */\n.ds-document__toc {\n  flex: 0 0 calc(12 * var(--ds-unit));\n  max-width: 100%;\n  min-width: 0;\n}\n\n.ds-document__contents {\n  position: sticky;\n  top: var(--ds-document-top, var(--ds-unit));\n}\n\n.ds-document__toc-title {\n  margin: 0;\n  color: var(--ds-title-color);\n  font: inherit;\n  letter-spacing: inherit;\n}\n\n.ds-document__toc-list,\n.ds-document__toc-list ol {\n  margin: 0;\n  padding: 0;\n  list-style: none;\n}\n\n.ds-document__toc-list li {\n  margin: 0;\n  padding: 0;\n}\n\n.ds-document__toc-list .ds-document__toc-sub {\n  padding-inline-start: calc(var(--ds-unit) / 2);\n}\n\n.ds-document__toc-list a {\n  display: block;\n  overflow: hidden;\n  color: inherit;\n  text-decoration-line: underline;\n  text-decoration-thickness: 1px;\n  text-decoration-color: transparent;\n  text-overflow: clip;\n  text-underline-offset: calc(2px * var(--ds-sf));\n  white-space: nowrap;\n}\n\n/* A cut link fades over its last square, never an ellipsis (0-face/cut-fade.ts marks it). */\n.ds-document__toc-list a[data-cut=\"end\"] {\n  mask-image: linear-gradient(to right, #000 calc(100% - var(--ds-unit)), transparent);\n}\n.ds-document__toc-list a[data-cut=\"end\"]:dir(rtl) {\n  mask-image: linear-gradient(to left, #000 calc(100% - var(--ds-unit)), transparent);\n}\n\n.ds-document__toc-list a:hover {\n  text-decoration-color: color-mix(in srgb, currentColor 40%, transparent);\n}\n\n.ds-document__toc-list a[aria-current]:not([aria-current=\"false\"]) {\n  text-decoration-color: currentColor;\n}\n\n.ds-document__toc-list a:focus-visible {\n  outline: 2px solid var(--ds-focus-ring);\n  outline-offset: -1px;\n}\n\n/* The writing: at least twenty squares beside the contents, else below them. */\n.ds-document__body {\n  flex: 1 1 0;\n  min-width: min(100%, calc(20 * var(--ds-unit)));\n  max-width: calc(32 * var(--ds-unit));\n}\n\n/* A heading the contents jump to stops where the contents do. */\n.ds-document__body :is(h1, h2, h3, h4, h5, h6) {\n  scroll-margin-top: var(--ds-document-top, var(--ds-unit));\n}\n\n/* A definition table. */\n\n.ds-definitions {\n  box-sizing: border-box;\n  container-type: inline-size;\n  display: grid;\n  grid-template-columns: minmax(0, var(--ds-definitions-term, calc(8 * var(--ds-unit)))) minmax(0, 1fr);\n  margin: 0;\n  padding: 0;\n  color: var(--ds-text-color);\n  font-family: \"Inter Arrows\", var(--ds-typeface-regular);\n  font-size: var(--ds-type-size-default);\n  line-height: var(--ds-unit);\n  letter-spacing: var(--ds-type-letterspacing-default);\n}\n\n.ds-definitions > div {\n  display: contents;\n}\n\n.ds-definitions :is(dt, dd) {\n  box-sizing: border-box;\n  min-width: 0;\n  margin: 0;\n  padding-block: calc(var(--ds-unit) / 2);\n  box-shadow: inset 0 -1px var(--ds-border-color);\n  font: inherit;\n  letter-spacing: inherit;\n  line-height: var(--ds-unit);\n  overflow-wrap: anywhere;\n}\n\n.ds-definitions dt {\n  grid-column: 1;\n  padding-inline-end: calc(var(--ds-unit) / 2);\n  color: var(--ds-text-color-muted);\n}\n\n.ds-definitions dd {\n  grid-column: 2;\n}\n\n@container (max-width: 479px) {\n  .ds-definitions dt,\n  .ds-definitions dd {\n    grid-column: 1 / -1;\n  }\n\n  .ds-definitions dt {\n    padding-block-end: 0;\n    padding-inline-end: 0;\n    box-shadow: none;\n  }\n\n  .ds-definitions dd {\n    padding-block-start: 0;\n  }\n}\n";
 //#endregion
 //#region DS1/1-root/document.css?raw
-var document_default = "@import \"./component-metrics.css\";\n\n/*\n * A document page: terms, a privacy policy, a legal notice, a help article.\n *\n * The contents stand at the start, twelve squares wide, and stay in view as\n * the writing scrolls past; the writing, two squares after them, is a reading\n * column of at most thirty-two squares, native headings and paragraphs marked\n * `data-ds-prose` (prose.css draws them). Where the two do not fit side by\n * side the contents stand above the writing. Every line is one square; the\n * contents' links are in the text's ink, the section in view (`aria-current`)\n * on a hairline of the full ink, a third level half a square in. The\n * `ds-document` element builds the contents from the headings and marks the\n * one in view.\n *\n *   ds-document                  the page's two columns\n *   ds-document__toc             the contents, a <nav>, as tall as the writing\n *   ds-document__contents        inside it, what stays in view: the title and the list\n *   ds-document__toc-title       \"Contents\", one line in the title grey\n *   ds-document__toc-list        the links, an <ol> with one link per <li>\n *   ds-document__toc-sub         an <li> for a third-level heading\n *   ds-document__body            the writing, marked data-ds-prose\n *\n * A definition table (`ds-definitions` on a <dl>) sets terms beside what they\n * mean, as a legal notice such as 特定商取引法に基づく表記 does: the term eight\n * squares wide in the muted ink, its definition beside it, each pair on a\n * hairline at its foot with half a square above and below, as a prose table's\n * rows are. Pairs may stand in a <div> each. Below twenty-four squares the\n * definition goes under its term. It works inside or outside prose.\n *\n * Tokens: `--ds-document-top` (where the contents stop below the top of the\n * view, one square; add a sticky header's height), `--ds-definitions-term`\n * (the term column, eight squares).\n */\n\n.ds-document {\n  box-sizing: border-box;\n  display: flex;\n  flex-wrap: wrap;\n  align-items: stretch;\n  gap: var(--ds-unit) calc(2 * var(--ds-unit));\n  min-width: 0;\n  color: var(--ds-text-color);\n  font-family: var(--ds-typeface-regular);\n  font-feature-settings: var(--ds-font-features);\n  font-size: var(--ds-type-size-default);\n  font-weight: var(--ds-type-weight-default);\n  line-height: var(--ds-unit);\n  letter-spacing: var(--ds-type-letterspacing-default);\n}\n\n/* The contents column stretches to the writing's height when the two stand\n   side by side, so what is inside it can stay in view; standing above the\n   writing it is only as tall as itself, and nothing sticks. */\n.ds-document__toc {\n  flex: 0 0 calc(12 * var(--ds-unit));\n  max-width: 100%;\n  min-width: 0;\n}\n\n.ds-document__contents {\n  position: sticky;\n  top: var(--ds-document-top, var(--ds-unit));\n}\n\n.ds-document__toc-title {\n  margin: 0;\n  color: var(--ds-title-color);\n  font: inherit;\n  letter-spacing: inherit;\n}\n\n.ds-document__toc-list,\n.ds-document__toc-list ol {\n  margin: 0;\n  padding: 0;\n  list-style: none;\n}\n\n.ds-document__toc-list li {\n  margin: 0;\n  padding: 0;\n}\n\n.ds-document__toc-list .ds-document__toc-sub {\n  padding-inline-start: calc(var(--ds-unit) / 2);\n}\n\n.ds-document__toc-list a {\n  display: block;\n  overflow: hidden;\n  color: inherit;\n  text-decoration-line: underline;\n  text-decoration-thickness: 1px;\n  text-decoration-color: transparent;\n  text-overflow: clip;\n  text-underline-offset: calc(2px * var(--ds-sf));\n  white-space: nowrap;\n}\n\n/* A cut link fades over its last square, never an ellipsis (0-face/cut-fade.ts marks it). */\n.ds-document__toc-list a[data-cut=\"end\"] {\n  mask-image: linear-gradient(to right, #000 calc(100% - var(--ds-unit)), transparent);\n}\n.ds-document__toc-list a[data-cut=\"end\"]:dir(rtl) {\n  mask-image: linear-gradient(to left, #000 calc(100% - var(--ds-unit)), transparent);\n}\n\n.ds-document__toc-list a:hover {\n  text-decoration-color: color-mix(in srgb, currentColor 40%, transparent);\n}\n\n.ds-document__toc-list a[aria-current]:not([aria-current=\"false\"]) {\n  text-decoration-color: currentColor;\n}\n\n.ds-document__toc-list a:focus-visible {\n  outline: 2px solid var(--ds-focus-ring);\n  outline-offset: -1px;\n}\n\n/* The writing: at least twenty squares beside the contents, else below them. */\n.ds-document__body {\n  flex: 1 1 0;\n  min-width: min(100%, calc(20 * var(--ds-unit)));\n  max-width: calc(32 * var(--ds-unit));\n}\n\n/* A heading the contents jump to stops where the contents do. */\n.ds-document__body :is(h1, h2, h3, h4, h5, h6) {\n  scroll-margin-top: var(--ds-document-top, var(--ds-unit));\n}\n\n/* A definition table. */\n\n.ds-definitions {\n  box-sizing: border-box;\n  container-type: inline-size;\n  display: grid;\n  grid-template-columns: minmax(0, var(--ds-definitions-term, calc(8 * var(--ds-unit)))) minmax(0, 1fr);\n  margin: 0;\n  padding: 0;\n  color: var(--ds-text-color);\n  font-family: var(--ds-typeface-regular);\n  font-size: var(--ds-type-size-default);\n  line-height: var(--ds-unit);\n  letter-spacing: var(--ds-type-letterspacing-default);\n}\n\n.ds-definitions > div {\n  display: contents;\n}\n\n.ds-definitions :is(dt, dd) {\n  box-sizing: border-box;\n  min-width: 0;\n  margin: 0;\n  padding-block: calc(var(--ds-unit) / 2);\n  box-shadow: inset 0 -1px var(--ds-border-color);\n  font: inherit;\n  letter-spacing: inherit;\n  line-height: var(--ds-unit);\n  overflow-wrap: anywhere;\n}\n\n.ds-definitions dt {\n  grid-column: 1;\n  padding-inline-end: calc(var(--ds-unit) / 2);\n  color: var(--ds-text-color-muted);\n}\n\n.ds-definitions dd {\n  grid-column: 2;\n}\n\n@container (max-width: 479px) {\n  .ds-definitions dt,\n  .ds-definitions dd {\n    grid-column: 1 / -1;\n  }\n\n  .ds-definitions dt {\n    padding-block-end: 0;\n    padding-inline-end: 0;\n    box-shadow: none;\n  }\n\n  .ds-definitions dd {\n    padding-block-start: 0;\n  }\n}\n";
+var document_default = "@import \"./component-metrics.css\";\n\n/*\n * A document page: terms, a privacy policy, a legal notice, a help article.\n *\n * The contents stand at the start, twelve squares wide, and stay in view as\n * the writing scrolls past; the writing, two squares after them, is a reading\n * column of at most thirty-two squares, native headings and paragraphs marked\n * `data-ds-prose` (prose.css draws them). Where the two do not fit side by\n * side the contents stand above the writing. Every line is one square; the\n * contents' links are in the text's ink, the section in view (`aria-current`)\n * on a hairline of the full ink, a third level half a square in. The\n * `ds-document` element builds the contents from the headings and marks the\n * one in view.\n *\n *   ds-document                  the page's two columns\n *   ds-document__toc             the contents, a <nav>, as tall as the writing\n *   ds-document__contents        inside it, what stays in view: the title and the list\n *   ds-document__toc-title       \"Contents\", one line in the title grey\n *   ds-document__toc-list        the links, an <ol> with one link per <li>\n *   ds-document__toc-sub         an <li> for a third-level heading\n *   ds-document__body            the writing, marked data-ds-prose\n *\n * A definition table (`ds-definitions` on a <dl>) sets terms beside what they\n * mean, as a legal notice such as 特定商取引法に基づく表記 does: the term eight\n * squares wide in the muted ink, its definition beside it, each pair on a\n * hairline at its foot with half a square above and below, as a prose table's\n * rows are. Pairs may stand in a <div> each. Below twenty-four squares the\n * definition goes under its term. It works inside or outside prose.\n *\n * Tokens: `--ds-document-top` (where the contents stop below the top of the\n * view, one square; add a sticky header's height), `--ds-definitions-term`\n * (the term column, eight squares).\n */\n\n.ds-document {\n  box-sizing: border-box;\n  display: flex;\n  flex-wrap: wrap;\n  align-items: stretch;\n  gap: var(--ds-unit) calc(2 * var(--ds-unit));\n  min-width: 0;\n  color: var(--ds-text-color);\n  font-family: \"Inter Arrows\", var(--ds-typeface-regular);\n  font-feature-settings: var(--ds-font-features);\n  font-size: var(--ds-type-size-default);\n  font-weight: var(--ds-type-weight-default);\n  line-height: var(--ds-unit);\n  letter-spacing: var(--ds-type-letterspacing-default);\n}\n\n/* The contents column stretches to the writing's height when the two stand\n   side by side, so what is inside it can stay in view; standing above the\n   writing it is only as tall as itself, and nothing sticks. */\n.ds-document__toc {\n  flex: 0 0 calc(12 * var(--ds-unit));\n  max-width: 100%;\n  min-width: 0;\n}\n\n.ds-document__contents {\n  position: sticky;\n  top: var(--ds-document-top, var(--ds-unit));\n}\n\n.ds-document__toc-title {\n  margin: 0;\n  color: var(--ds-title-color);\n  font: inherit;\n  letter-spacing: inherit;\n}\n\n.ds-document__toc-list,\n.ds-document__toc-list ol {\n  margin: 0;\n  padding: 0;\n  list-style: none;\n}\n\n.ds-document__toc-list li {\n  margin: 0;\n  padding: 0;\n}\n\n.ds-document__toc-list .ds-document__toc-sub {\n  padding-inline-start: calc(var(--ds-unit) / 2);\n}\n\n.ds-document__toc-list a {\n  display: block;\n  overflow: hidden;\n  color: inherit;\n  text-decoration-line: underline;\n  text-decoration-thickness: 1px;\n  text-decoration-color: transparent;\n  text-overflow: clip;\n  text-underline-offset: calc(2px * var(--ds-sf));\n  white-space: nowrap;\n}\n\n/* A cut link fades over its last square, never an ellipsis (0-face/cut-fade.ts marks it). */\n.ds-document__toc-list a[data-cut=\"end\"] {\n  mask-image: linear-gradient(to right, #000 calc(100% - var(--ds-unit)), transparent);\n}\n.ds-document__toc-list a[data-cut=\"end\"]:dir(rtl) {\n  mask-image: linear-gradient(to left, #000 calc(100% - var(--ds-unit)), transparent);\n}\n\n.ds-document__toc-list a:hover {\n  text-decoration-color: color-mix(in srgb, currentColor 40%, transparent);\n}\n\n.ds-document__toc-list a[aria-current]:not([aria-current=\"false\"]) {\n  text-decoration-color: currentColor;\n}\n\n.ds-document__toc-list a:focus-visible {\n  outline: 2px solid var(--ds-focus-ring);\n  outline-offset: -1px;\n}\n\n/* The writing: at least twenty squares beside the contents, else below them. */\n.ds-document__body {\n  flex: 1 1 0;\n  min-width: min(100%, calc(20 * var(--ds-unit)));\n  max-width: calc(32 * var(--ds-unit));\n}\n\n/* A heading the contents jump to stops where the contents do. */\n.ds-document__body :is(h1, h2, h3, h4, h5, h6) {\n  scroll-margin-top: var(--ds-document-top, var(--ds-unit));\n}\n\n/* A definition table. */\n\n.ds-definitions {\n  box-sizing: border-box;\n  container-type: inline-size;\n  display: grid;\n  grid-template-columns: minmax(0, var(--ds-definitions-term, calc(8 * var(--ds-unit)))) minmax(0, 1fr);\n  margin: 0;\n  padding: 0;\n  color: var(--ds-text-color);\n  font-family: \"Inter Arrows\", var(--ds-typeface-regular);\n  font-size: var(--ds-type-size-default);\n  line-height: var(--ds-unit);\n  letter-spacing: var(--ds-type-letterspacing-default);\n}\n\n.ds-definitions > div {\n  display: contents;\n}\n\n.ds-definitions :is(dt, dd) {\n  box-sizing: border-box;\n  min-width: 0;\n  margin: 0;\n  padding-block: calc(var(--ds-unit) / 2);\n  box-shadow: inset 0 -1px var(--ds-border-color);\n  font: inherit;\n  letter-spacing: inherit;\n  line-height: var(--ds-unit);\n  overflow-wrap: anywhere;\n}\n\n.ds-definitions dt {\n  grid-column: 1;\n  padding-inline-end: calc(var(--ds-unit) / 2);\n  color: var(--ds-text-color-muted);\n}\n\n.ds-definitions dd {\n  grid-column: 2;\n}\n\n@container (max-width: 479px) {\n  .ds-definitions dt,\n  .ds-definitions dd {\n    grid-column: 1 / -1;\n  }\n\n  .ds-definitions dt {\n    padding-block-end: 0;\n    padding-inline-end: 0;\n    box-shadow: none;\n  }\n\n  .ds-definitions dd {\n    padding-block-start: 0;\n  }\n}\n";
 //#endregion
 //#region DS1/1-root/prose.css?raw
-var prose_default = "@import \"./component-metrics.css\";\n\n/*\n * Prose: long-form and marketing writing on the grid.\n *\n * Mark the element that holds the writing with `data-ds-prose`. Its headings,\n * paragraphs, lists, links, quotes, code, rules and simple tables stay native\n * elements and take Design system 1's type: every line is one square, one\n * square stands between two blocks and two before a heading, and a title (h1)\n * takes two squares. These count as Design system 1's styles.\n *\n * Nothing outside a marked element is touched: no rule here reaches the page,\n * its body or its controls. Mark a part inside the writing that draws itself\n * (an example, a widget) with `data-ds-not-prose` to leave its contents out.\n *\n * Every rule is one attribute strong ([data-ds-prose] with :where()), so one\n * class in a page's own stylesheet overrides it. The sheet reads the component\n * tokens (component-tokens.css) and the faces the page loads, as controls.css\n * does; it imports no fonts of its own.\n *\n *   h1                          20 on two squares, medium\n *   h2, h3                      17 and 15 on one square, medium\n *   h4, h5, h6, p, li, td, th   14 on one square\n *   code, pre                   13 in the code face, on one square\n *   small                       10\n */\n\n[data-ds-prose] {\n  color: var(--ds-text-color);\n  font-family: var(--ds-typeface-regular);\n  font-feature-settings: var(--ds-font-features);\n  font-size: var(--ds-type-size-default);\n  font-weight: var(--ds-type-weight-default);\n  line-height: var(--ds-unit);\n  letter-spacing: var(--ds-type-letterspacing-default);\n  overflow-wrap: break-word;\n}\n\n/* Blocks start flush; the spacing below puts them on the grid. */\n[data-ds-prose] :where(h1, h2, h3, h4, h5, h6, p, ul, ol, dl, dd, blockquote, pre, table, figure, hr, details):not(:where([data-ds-not-prose] *)) {\n  margin-block: 0;\n}\n\n[data-ds-prose] :where(p, li, dt, dd, td, th, blockquote, summary, figcaption):not(:where([data-ds-not-prose] *)) {\n  font-size: var(--ds-type-size-default);\n  line-height: var(--ds-unit);\n}\n\n/* One square between two blocks, two before a heading. */\n[data-ds-prose] :where(:not(a, abbr, b, bdi, bdo, br, button, cite, code, data, del, dfn, ds-icon, em, i, img, input, ins, kbd, label, mark, q, s, samp, select, small, span, strong, sub, sup, svg, textarea, time, u, var, wbr)) + :where(:not(a, abbr, b, bdi, bdo, br, button, cite, code, data, del, dfn, ds-icon, em, i, img, input, ins, kbd, label, mark, q, s, samp, select, small, span, strong, sub, sup, svg, textarea, time, u, var, wbr, [data-ds-not-prose] *)) {\n  margin-top: var(--ds-unit);\n}\n\n[data-ds-prose] :where(:not(h1, h2, h3, h4, h5, h6)) + :where(h1, h2, h3, h4, h5, h6):not(:where([data-ds-not-prose] *)) {\n  margin-top: calc(2 * var(--ds-unit));\n}\n\n/* Headings */\n\n[data-ds-prose] :where(h1, h2, h3, h4, h5, h6):not(:where([data-ds-not-prose] *)) {\n  color: var(--ds-text-color);\n  font-family: var(--ds-typeface-medium);\n  font-size: var(--ds-type-size-default);\n  font-weight: var(--ds-type-weight-bold);\n  line-height: var(--ds-unit);\n  letter-spacing: var(--ds-type-letterspacing-default);\n}\n\n[data-ds-prose] :where(h1):not(:where([data-ds-not-prose] *)) {\n  font-size: var(--ds-type-size-display);\n  line-height: calc(2 * var(--ds-unit));\n  letter-spacing: calc(var(--ds-display-text-tracking, -0.4px) * var(--ds-sf, 1));\n}\n\n[data-ds-prose] :where(h2):not(:where([data-ds-not-prose] *)) {\n  font-size: calc(var(--ds-prose-h2-size, 17px) * var(--ds-sf, 1));\n  letter-spacing: calc(var(--ds-prose-h2-tracking, -0.34px) * var(--ds-sf, 1));\n}\n\n[data-ds-prose] :where(h3):not(:where([data-ds-not-prose] *)) {\n  font-size: calc(var(--ds-prose-h3-size, 15px) * var(--ds-sf, 1));\n}\n\n/* Lists: items stand edge to edge, indented one square. */\n\n[data-ds-prose] :where(ul, ol):not(:where([data-ds-not-prose] *)) {\n  padding-inline-start: var(--ds-unit);\n}\n\n[data-ds-prose] :where(li + li, li > ul, li > ol, dt + dt, dt + dd, dd + dd):not(:where([data-ds-not-prose] *)) {\n  margin-top: 0;\n}\n\n[data-ds-prose] :where(dt):not(:where([data-ds-not-prose] *)) {\n  font-family: var(--ds-typeface-medium);\n  font-weight: var(--ds-type-weight-bold);\n}\n\n[data-ds-prose] :where(dd):not(:where([data-ds-not-prose] *)) {\n  margin-inline-start: var(--ds-unit);\n}\n\n/* Words */\n\n[data-ds-prose] :where(a):not(:where([data-ds-not-prose] *)) {\n  color: inherit;\n  text-decoration-line: underline;\n  text-decoration-thickness: 1px;\n  text-underline-offset: calc(3px * var(--ds-sf, 1));\n}\n\n[data-ds-prose] :where(a:focus-visible):not(:where([data-ds-not-prose] *)) {\n  outline: 2px solid var(--ds-focus-ring);\n  outline-offset: 1px;\n}\n\n[data-ds-prose] :where(strong, b, th):not(:where([data-ds-not-prose] *)) {\n  font-family: var(--ds-typeface-medium);\n  font-weight: var(--ds-type-weight-bold);\n}\n\n[data-ds-prose] :where(small):not(:where([data-ds-not-prose] *)) {\n  font-size: var(--ds-type-size-small);\n}\n\n[data-ds-prose] :where(blockquote):not(:where([data-ds-not-prose] *)) {\n  margin-inline: 0;\n  padding-inline-start: var(--ds-unit);\n  border: 0;\n  box-shadow: inset 1px 0 var(--ds-text-color-muted);\n}\n\n/* Code: thirteen on the same one-square lines, in the code face. */\n\n[data-ds-prose] :where(code, kbd, samp, pre):not(:where([data-ds-not-prose] *)) {\n  font-family: var(--ds-typeface-mono);\n  font-size: calc(var(--ds-code-text-size, 13px) * var(--ds-sf, 1));\n  line-height: var(--ds-unit);\n  letter-spacing: 0;\n}\n\n[data-ds-prose] :where(:not(pre) > code, kbd, samp):not(:where([data-ds-not-prose] *)) {\n  margin: 0;\n  padding: 0 calc(4px * var(--ds-sf, 1));\n  border-radius: var(--ds-radius);\n  background: var(--ds-fill);\n}\n\n/* A block of code: a square of room around it, its frame a hairline. */\n[data-ds-prose] :where(pre):not(:where([data-ds-not-prose] *)) {\n  overflow-x: auto;\n  padding: var(--ds-unit);\n  border: 0;\n  border-radius: var(--ds-radius);\n  box-shadow: inset 0 0 0 1px var(--ds-border-color);\n  background: transparent;\n  color: inherit;\n}\n\n[data-ds-prose] :where(pre > code):not(:where([data-ds-not-prose] *)) {\n  padding: 0;\n  background: none;\n  font-size: inherit;\n}\n\n/* A rule takes no room: it is a hairline under the space above it. */\n[data-ds-prose] :where(hr):not(:where([data-ds-not-prose] *)) {\n  height: 0;\n  margin-inline: 0;\n  border: 0;\n  box-shadow: 0 1px var(--ds-border-color);\n}\n\n/* A table's row is two squares, ruled by a hairline under it. A wide table\n   scrolls on its own rather than widening the page. */\n[data-ds-prose] :where(table):not(:where([data-ds-not-prose] *)) {\n  display: block;\n  max-width: 100%;\n  overflow-x: auto;\n  border-collapse: collapse;\n  border-spacing: 0;\n  border-radius: 0;\n  font-variant-numeric: tabular-nums;\n}\n\n[data-ds-prose] :where(th, td):not(:where([data-ds-not-prose] *)) {\n  padding: calc(var(--ds-unit) / 2);\n  border: 0;\n  box-shadow: inset 0 -1px var(--ds-border-color);\n  text-align: start;\n  vertical-align: top;\n}\n\n[data-ds-prose] :where(img, video):not(:where([data-ds-not-prose] *)) {\n  max-width: 100%;\n  height: auto;\n  border-radius: var(--ds-radius);\n}\n\n[data-ds-prose] :where(figcaption):not(:where([data-ds-not-prose] *)) {\n  color: var(--ds-text-color-muted);\n}\n";
+var prose_default = "@import \"./component-metrics.css\";\n\n/*\n * Prose: long-form and marketing writing on the grid.\n *\n * Mark the element that holds the writing with `data-ds-prose`. Its headings,\n * paragraphs, lists, links, quotes, code, rules and simple tables stay native\n * elements and take Design system 1's type: every line is one square, one\n * square stands between two blocks and two before a heading, and a title (h1)\n * takes two squares. These count as Design system 1's styles.\n *\n * Nothing outside a marked element is touched: no rule here reaches the page,\n * its body or its controls. Mark a part inside the writing that draws itself\n * (an example, a widget) with `data-ds-not-prose` to leave its contents out.\n *\n * Every rule is one attribute strong ([data-ds-prose] with :where()), so one\n * class in a page's own stylesheet overrides it. The sheet reads the component\n * tokens (component-tokens.css) and the faces the page loads, as controls.css\n * does; it imports no fonts of its own.\n *\n *   h1                          20 on two squares, medium\n *   h2, h3                      17 and 15 on one square, medium\n *   h4, h5, h6, p, li, td, th   14 on one square\n *   code, pre                   13 in the code face, on one square\n *   small                       10\n */\n\n[data-ds-prose] {\n  color: var(--ds-text-color);\n  font-family: \"Inter Arrows\", var(--ds-typeface-regular);\n  font-feature-settings: var(--ds-font-features);\n  font-size: var(--ds-type-size-default);\n  font-weight: var(--ds-type-weight-default);\n  line-height: var(--ds-unit);\n  letter-spacing: var(--ds-type-letterspacing-default);\n  overflow-wrap: break-word;\n}\n\n/* Blocks start flush; the spacing below puts them on the grid. */\n[data-ds-prose] :where(h1, h2, h3, h4, h5, h6, p, ul, ol, dl, dd, blockquote, pre, table, figure, hr, details):not(:where([data-ds-not-prose] *)) {\n  margin-block: 0;\n}\n\n[data-ds-prose] :where(p, li, dt, dd, td, th, blockquote, summary, figcaption):not(:where([data-ds-not-prose] *)) {\n  font-size: var(--ds-type-size-default);\n  line-height: var(--ds-unit);\n}\n\n/* One square between two blocks, two before a heading. */\n[data-ds-prose] :where(:not(a, abbr, b, bdi, bdo, br, button, cite, code, data, del, dfn, ds-icon, em, i, img, input, ins, kbd, label, mark, q, s, samp, select, small, span, strong, sub, sup, svg, textarea, time, u, var, wbr)) + :where(:not(a, abbr, b, bdi, bdo, br, button, cite, code, data, del, dfn, ds-icon, em, i, img, input, ins, kbd, label, mark, q, s, samp, select, small, span, strong, sub, sup, svg, textarea, time, u, var, wbr, [data-ds-not-prose] *)) {\n  margin-top: var(--ds-unit);\n}\n\n[data-ds-prose] :where(:not(h1, h2, h3, h4, h5, h6)) + :where(h1, h2, h3, h4, h5, h6):not(:where([data-ds-not-prose] *)) {\n  margin-top: calc(2 * var(--ds-unit));\n}\n\n/* Headings */\n\n[data-ds-prose] :where(h1, h2, h3, h4, h5, h6):not(:where([data-ds-not-prose] *)) {\n  color: var(--ds-text-color);\n  font-family: \"Inter Arrows\", var(--ds-typeface-medium);\n  font-size: var(--ds-type-size-default);\n  font-weight: var(--ds-type-weight-bold);\n  line-height: var(--ds-unit);\n  letter-spacing: var(--ds-type-letterspacing-default);\n}\n\n[data-ds-prose] :where(h1):not(:where([data-ds-not-prose] *)) {\n  font-size: var(--ds-type-size-display);\n  line-height: calc(2 * var(--ds-unit));\n  letter-spacing: calc(var(--ds-display-text-tracking, -0.4px) * var(--ds-sf, 1));\n}\n\n[data-ds-prose] :where(h2):not(:where([data-ds-not-prose] *)) {\n  font-size: calc(var(--ds-prose-h2-size, 17px) * var(--ds-sf, 1));\n  letter-spacing: calc(var(--ds-prose-h2-tracking, -0.34px) * var(--ds-sf, 1));\n}\n\n[data-ds-prose] :where(h3):not(:where([data-ds-not-prose] *)) {\n  font-size: calc(var(--ds-prose-h3-size, 15px) * var(--ds-sf, 1));\n}\n\n/* Lists: items stand edge to edge, indented one square. */\n\n[data-ds-prose] :where(ul, ol):not(:where([data-ds-not-prose] *)) {\n  padding-inline-start: var(--ds-unit);\n}\n\n[data-ds-prose] :where(li + li, li > ul, li > ol, dt + dt, dt + dd, dd + dd):not(:where([data-ds-not-prose] *)) {\n  margin-top: 0;\n}\n\n[data-ds-prose] :where(dt):not(:where([data-ds-not-prose] *)) {\n  font-family: \"Inter Arrows\", var(--ds-typeface-medium);\n  font-weight: var(--ds-type-weight-bold);\n}\n\n[data-ds-prose] :where(dd):not(:where([data-ds-not-prose] *)) {\n  margin-inline-start: var(--ds-unit);\n}\n\n/* Words */\n\n[data-ds-prose] :where(a):not(:where([data-ds-not-prose] *)) {\n  color: inherit;\n  text-decoration-line: underline;\n  text-decoration-thickness: 1px;\n  text-underline-offset: calc(3px * var(--ds-sf, 1));\n}\n\n[data-ds-prose] :where(a:focus-visible):not(:where([data-ds-not-prose] *)) {\n  outline: 2px solid var(--ds-focus-ring);\n  outline-offset: 1px;\n}\n\n[data-ds-prose] :where(strong, b, th):not(:where([data-ds-not-prose] *)) {\n  font-family: \"Inter Arrows\", var(--ds-typeface-medium);\n  font-weight: var(--ds-type-weight-bold);\n}\n\n[data-ds-prose] :where(small):not(:where([data-ds-not-prose] *)) {\n  font-size: var(--ds-type-size-small);\n}\n\n[data-ds-prose] :where(blockquote):not(:where([data-ds-not-prose] *)) {\n  margin-inline: 0;\n  padding-inline-start: var(--ds-unit);\n  border: 0;\n  box-shadow: inset 1px 0 var(--ds-text-color-muted);\n}\n\n/* Code: thirteen on the same one-square lines, in the code face. */\n\n[data-ds-prose] :where(code, kbd, samp, pre):not(:where([data-ds-not-prose] *)) {\n  font-family: \"Inter Arrows\", var(--ds-typeface-mono);\n  font-size: calc(var(--ds-code-text-size, 13px) * var(--ds-sf, 1));\n  line-height: var(--ds-unit);\n  letter-spacing: 0;\n}\n\n[data-ds-prose] :where(:not(pre) > code, kbd, samp):not(:where([data-ds-not-prose] *)) {\n  margin: 0;\n  padding: 0 calc(4px * var(--ds-sf, 1));\n  border-radius: var(--ds-radius);\n  background: var(--ds-fill);\n}\n\n/* A block of code: a square of room around it, its frame a hairline. */\n[data-ds-prose] :where(pre):not(:where([data-ds-not-prose] *)) {\n  overflow-x: auto;\n  padding: var(--ds-unit);\n  border: 0;\n  border-radius: var(--ds-radius);\n  box-shadow: inset 0 0 0 1px var(--ds-border-color);\n  background: transparent;\n  color: inherit;\n}\n\n[data-ds-prose] :where(pre > code):not(:where([data-ds-not-prose] *)) {\n  padding: 0;\n  background: none;\n  font-size: inherit;\n}\n\n/* A rule takes no room: it is a hairline under the space above it. */\n[data-ds-prose] :where(hr):not(:where([data-ds-not-prose] *)) {\n  height: 0;\n  margin-inline: 0;\n  border: 0;\n  box-shadow: 0 1px var(--ds-border-color);\n}\n\n/* A table's row is two squares, ruled by a hairline under it. A wide table\n   scrolls on its own rather than widening the page. */\n[data-ds-prose] :where(table):not(:where([data-ds-not-prose] *)) {\n  display: block;\n  max-width: 100%;\n  overflow-x: auto;\n  border-collapse: collapse;\n  border-spacing: 0;\n  border-radius: 0;\n  font-variant-numeric: tabular-nums;\n}\n\n[data-ds-prose] :where(th, td):not(:where([data-ds-not-prose] *)) {\n  padding: calc(var(--ds-unit) / 2);\n  border: 0;\n  box-shadow: inset 0 -1px var(--ds-border-color);\n  text-align: start;\n  vertical-align: top;\n}\n\n[data-ds-prose] :where(img, video):not(:where([data-ds-not-prose] *)) {\n  max-width: 100%;\n  height: auto;\n  border-radius: var(--ds-radius);\n}\n\n[data-ds-prose] :where(figcaption):not(:where([data-ds-not-prose] *)) {\n  color: var(--ds-text-color-muted);\n}\n";
 //#endregion
 //#region DS1/4-page/styles/ds-document.css?inline
 var ds_document_default = "/* ds-document.css */\n/* The element places the two columns; 1-root/document.css draws them, and the\n   writing in the page is drawn by prose.css, which the element brings. */\n\n:host {\n  display: block;\n  min-width: 0;\n}\n\n:host([hidden]),\n[hidden] {\n  display: none !important;\n}\n\n/* The page's own contents take the list's place. */\n::slotted([slot=\"contents\"]) {\n  margin: 0;\n}\n";
@@ -17486,7 +17826,7 @@ _Tabs.styles = r$4(ds_tabs_default);
 define("ds-tabs", Tabs);
 //#endregion
 //#region DS1/4-page/styles/ds-panel.css?inline
-var ds_panel_default = "/* Shape is a surface preference. Keep these base lengths unscaled: each\n * component resolves them with its own --ds-sf in component-metrics.css. */\n[data-ds-shape=\"square\"],\n:host([data-ds-shape=\"square\"]) {\n  --ds-corner-size: 0px;\n  --ds-corner-shape: round;\n  --ds-button-inset: 0.5px;\n}\n\n[data-ds-shape=\"rounded\"],\n:host([data-ds-shape=\"rounded\"]) {\n  --ds-corner-size: 4px;\n  --ds-corner-shape: round;\n  --ds-button-inset: 2.5px;\n}\n\n[data-ds-shape=\"circular\"],\n:host([data-ds-shape=\"circular\"]) {\n  --ds-corner-size: 999px;\n  --ds-corner-shape: round;\n  --ds-button-inset: 5px;\n}\n\n/* A squircle needs twice an arc's radius for the same apparent corner.\n * Circular controls keep true semicircles even in a squircle browser. */\n@supports (corner-shape: squircle) {\n  [data-ds-shape=\"rounded\"],\n  :host([data-ds-shape=\"rounded\"]) {\n    --ds-corner-size: 8px;\n    --ds-corner-shape: squircle;\n  }\n}\n/* Resolve dimensions where a component is drawn. Inherited calc() values have\n * already used their ancestor's scale. Base tokens stay unscaled and inherit;\n * resolved tokens can still be overridden directly on a component.\n * data-ds-surface gives ordinary layout elements the same scaled measures.\n */\n:root,\n:host,\n:where([data-ds-surface]) {\n  --ds-unit: calc(var(--ds-1, 20px) * var(--ds-sf, 1));\n  --ds-control-height: calc(var(--ds-control-size, var(--ds-08, 16px)) * var(--ds-sf, 1));\n  --ds-row-height: calc(var(--ds-row-size, var(--ds-1, 20px)) * var(--ds-sf, 1));\n  --ds-type-size-default: calc(var(--ds-text-size, 14px) * var(--ds-sf, 1));\n  --ds-type-size-small: calc(var(--ds-small-text-size, 10px) * var(--ds-sf, 1));\n  --ds-type-size-heading: calc(var(--ds-heading-text-size, 13px) * var(--ds-sf, 1));\n  --ds-type-size-display: calc(var(--ds-display-text-size, 20px) * var(--ds-sf, 1));\n  --ds-type-lineheight-default: calc(var(--ds-text-leading, 16px) * var(--ds-sf, 1));\n  --ds-type-letterspacing-default: calc(var(--ds-text-tracking, -0.3px) * var(--ds-sf, 1));\n  --ds-radius: calc(var(--ds-corner-size, 4px) * var(--ds-sf, 1));\n  --ds-radius-card: calc(var(--ds-card-corner-size, 4px) * var(--ds-sf, 1));\n}\n/* ds-panel.css */\n\n:host {\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: column;\n  min-width: 0;\n  min-height: 0;\n  background: var(--ds-paper);\n  color: var(--ds-text-color);\n  font-family: var(--ds-typeface-regular);\n  font-feature-settings: var(--ds-font-features);\n  font-size: var(--ds-type-size-default);\n  line-height: var(--ds-type-lineheight-default);\n  letter-spacing: var(--ds-type-letterspacing-default);\n}\n\nslot[name=\"header\"],\nslot[name=\"footer\"] {\n  display: block;\n  flex: 0 0 auto;\n}\n\n.body {\n  display: flex;\n  flex: 1 1 auto;\n  flex-direction: column;\n  min-height: 0;\n}\n";
+var ds_panel_default = "/* Shape is a surface preference. Keep these base lengths unscaled: each\n * component resolves them with its own --ds-sf in component-metrics.css. */\n[data-ds-shape=\"square\"],\n:host([data-ds-shape=\"square\"]) {\n  --ds-corner-size: 0px;\n  --ds-corner-shape: round;\n  --ds-button-inset: 0.5px;\n}\n\n[data-ds-shape=\"rounded\"],\n:host([data-ds-shape=\"rounded\"]) {\n  --ds-corner-size: 4px;\n  --ds-corner-shape: round;\n  --ds-button-inset: 2.5px;\n}\n\n[data-ds-shape=\"circular\"],\n:host([data-ds-shape=\"circular\"]) {\n  --ds-corner-size: 999px;\n  --ds-corner-shape: round;\n  --ds-button-inset: 5px;\n}\n\n/* A squircle needs twice an arc's radius for the same apparent corner.\n * Circular controls keep true semicircles even in a squircle browser. */\n@supports (corner-shape: squircle) {\n  [data-ds-shape=\"rounded\"],\n  :host([data-ds-shape=\"rounded\"]) {\n    --ds-corner-size: 8px;\n    --ds-corner-shape: squircle;\n  }\n}\n/* Resolve dimensions where a component is drawn. Inherited calc() values have\n * already used their ancestor's scale. Base tokens stay unscaled and inherit;\n * resolved tokens can still be overridden directly on a component.\n * data-ds-surface gives ordinary layout elements the same scaled measures.\n */\n:root,\n:host,\n:where([data-ds-surface]) {\n  --ds-unit: calc(var(--ds-1, 20px) * var(--ds-sf, 1));\n  --ds-control-height: calc(var(--ds-control-size, var(--ds-08, 16px)) * var(--ds-sf, 1));\n  --ds-row-height: calc(var(--ds-row-size, var(--ds-1, 20px)) * var(--ds-sf, 1));\n  --ds-type-size-default: calc(var(--ds-text-size, 14px) * var(--ds-sf, 1));\n  --ds-type-size-small: calc(var(--ds-small-text-size, 10px) * var(--ds-sf, 1));\n  --ds-type-size-heading: calc(var(--ds-heading-text-size, 13px) * var(--ds-sf, 1));\n  --ds-type-size-display: calc(var(--ds-display-text-size, 20px) * var(--ds-sf, 1));\n  --ds-type-lineheight-default: calc(var(--ds-text-leading, 16px) * var(--ds-sf, 1));\n  --ds-type-letterspacing-default: calc(var(--ds-text-tracking, -0.3px) * var(--ds-sf, 1));\n  --ds-radius: calc(var(--ds-corner-size, 4px) * var(--ds-sf, 1));\n  --ds-radius-card: calc(var(--ds-card-corner-size, 4px) * var(--ds-sf, 1));\n}\n/* ds-panel.css */\n\n:host {\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: column;\n  min-width: 0;\n  min-height: 0;\n  background: var(--ds-paper);\n  color: var(--ds-text-color);\n  font-family: \"Inter Arrows\", var(--ds-typeface-regular);\n  font-feature-settings: var(--ds-font-features);\n  font-size: var(--ds-type-size-default);\n  line-height: var(--ds-type-lineheight-default);\n  letter-spacing: var(--ds-type-letterspacing-default);\n}\n\nslot[name=\"header\"],\nslot[name=\"footer\"] {\n  display: block;\n  flex: 0 0 auto;\n}\n\n.body {\n  display: flex;\n  flex: 1 1 auto;\n  flex-direction: column;\n  min-height: 0;\n}\n";
 //#endregion
 //#region DS1/4-page/ds-panel.ts
 var _Panel;
@@ -17733,7 +18073,7 @@ function bindOverlaySwipe(dialog, options = {}) {
 }
 //#endregion
 //#region DS1/4-page/styles/ds-overlay.css?inline
-var ds_overlay_default = "/* Light DOM preserves native forms, labels and React event targets. */\nds-overlay > dialog {\n  box-sizing: border-box;\n  position: var(--ds-overlay-position, fixed);\n  inset: var(--ds-overlay-inset, 0);\n  width: var(--ds-overlay-width, calc(20 * var(--ds-unit)));\n  max-width: var(--ds-overlay-max-width, calc(100vw - 2 * var(--ds-unit)));\n  max-height: var(--ds-overlay-max-height, calc(100dvh - 2 * var(--ds-unit)));\n  height: var(--ds-overlay-height, fit-content);\n  margin: var(--ds-overlay-margin, auto);\n  padding: var(--ds-overlay-padding, var(--ds-unit));\n  border: var(--ds-overlay-border, 1px solid var(--ds-border-color));\n  border-radius: 0;\n  background: var(--ds-overlay-paper, var(--ds-paper));\n  color: var(--ds-text-color);\n  z-index: var(--ds-overlay-layer, auto);\n  box-shadow: none;\n  overflow: var(--ds-overlay-overflow, auto);\n  overscroll-behavior: contain;\n  font-family: var(--ds-typeface-regular);\n  font-feature-settings: var(--ds-font-features);\n  font-size: var(--ds-type-size-default);\n  font-weight: var(--ds-type-weight-default);\n  line-height: var(--ds-type-lineheight-default);\n  letter-spacing: var(--ds-type-letterspacing-default);\n}\nds-overlay > dialog[open] { display: flex; flex-direction: column; gap: var(--ds-unit); }\nds-overlay > dialog:not([open]) { display: none; }\nds-overlay > dialog[data-ds-type=\"popover\"] {\n  inset: auto;\n  left: var(--ds-overlay-anchor-left, 0px);\n  top: var(--ds-overlay-anchor-top, 0px);\n  margin: calc(var(--ds-unit) / 2);\n  width: var(--ds-overlay-width, max-content);\n  max-width: var(--ds-overlay-available-width, calc(100vw - var(--ds-unit)));\n  max-height: var(--ds-overlay-available-height, calc(100dvh - var(--ds-unit)));\n}\n/* A compact calendar is its own menu surface: no extra frame or spacing. */\nds-overlay > dialog[data-ds-type=\"popover\"]:has(> ds-calendar[compact]) {\n  padding: 0;\n  border: 0;\n  margin: 0;\n  gap: 0;\n}\nds-overlay > dialog[data-ds-overlay-flush] { padding: 0; gap: 0; }\nds-overlay > dialog[data-ds-overlay-rotated] {\n  inset: auto;\n  left: 50%;\n  top: 50%;\n  margin: 0;\n  width: calc(100dvh - 2 * var(--ds-unit));\n  height: calc(100vw - 2 * var(--ds-unit));\n  max-width: none;\n  max-height: none;\n  transform: translate(-50%, -50%) rotate(90deg);\n}\nds-overlay > dialog[data-ds-type=\"screen\"][data-ds-overlay-rotated] { width: 100dvh; height: 100vw; }\nds-overlay > dialog::backdrop { background: color-mix(in srgb, var(--ds-black) 40%, transparent); }\n/* The header keeps the last square of its row for the close button, only when it has one. */\nds-overlay [data-ds-overlay=\"header\"] { display: flex; flex-direction: column; }\nds-overlay > dialog:has(> [data-ds-overlay=\"close\"]) [data-ds-overlay=\"header\"] { padding-inline-end: var(--ds-unit); }\n/* The title on its square's lower sixteen, as every row's words. */\nds-overlay [data-ds-overlay=\"title\"] {\n  display: flex;\n  align-items: flex-end;\n  min-height: var(--ds-row-height);\n  margin: 0;\n  color: var(--ds-text-color);\n  font: inherit;\n  font-weight: var(--ds-type-weight-bold);\n  line-height: var(--ds-type-lineheight-default);\n}\nds-overlay [data-ds-overlay=\"description\"] { margin: 0; color: var(--ds-text-color-muted); font: inherit; }\nds-overlay [data-ds-overlay=\"footer\"] {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  justify-content: flex-end;\n  gap: calc(var(--ds-unit) / 2);\n  min-height: var(--ds-row-height);\n}\nds-overlay [data-ds-overlay=\"close\"] { position: absolute; top: var(--ds-unit); right: var(--ds-unit); }\n\nds-overlay > dialog[data-ds-overlay-inline] {\n  position: relative;\n  inset: auto;\n  width: 100%;\n  max-width: none;\n  max-height: none;\n  margin: 0;\n  padding: 0;\n  gap: 0;\n  border: 0;\n  background: transparent;\n}\n";
+var ds_overlay_default = "/* Light DOM preserves native forms, labels and React event targets. */\nds-overlay > dialog {\n  box-sizing: border-box;\n  position: var(--ds-overlay-position, fixed);\n  inset: var(--ds-overlay-inset, 0);\n  width: var(--ds-overlay-width, calc(20 * var(--ds-unit)));\n  max-width: var(--ds-overlay-max-width, calc(100vw - 2 * var(--ds-unit)));\n  max-height: var(--ds-overlay-max-height, calc(100dvh - 2 * var(--ds-unit)));\n  height: var(--ds-overlay-height, fit-content);\n  margin: var(--ds-overlay-margin, auto);\n  padding: var(--ds-overlay-padding, var(--ds-unit));\n  border: var(--ds-overlay-border, 1px solid var(--ds-border-color));\n  border-radius: 0;\n  background: var(--ds-overlay-paper, var(--ds-paper));\n  color: var(--ds-text-color);\n  z-index: var(--ds-overlay-layer, auto);\n  box-shadow: none;\n  overflow: var(--ds-overlay-overflow, auto);\n  overscroll-behavior: contain;\n  font-family: \"Inter Arrows\", var(--ds-typeface-regular);\n  font-feature-settings: var(--ds-font-features);\n  font-size: var(--ds-type-size-default);\n  font-weight: var(--ds-type-weight-default);\n  line-height: var(--ds-type-lineheight-default);\n  letter-spacing: var(--ds-type-letterspacing-default);\n}\nds-overlay > dialog[open] { display: flex; flex-direction: column; gap: var(--ds-unit); }\nds-overlay > dialog:not([open]) { display: none; }\nds-overlay > dialog[data-ds-type=\"popover\"] {\n  inset: auto;\n  left: var(--ds-overlay-anchor-left, 0px);\n  top: var(--ds-overlay-anchor-top, 0px);\n  margin: calc(var(--ds-unit) / 2);\n  width: var(--ds-overlay-width, max-content);\n  max-width: var(--ds-overlay-available-width, calc(100vw - var(--ds-unit)));\n  max-height: var(--ds-overlay-available-height, calc(100dvh - var(--ds-unit)));\n}\n/* A compact calendar is its own menu surface: no extra frame or spacing. */\nds-overlay > dialog[data-ds-type=\"popover\"]:has(> ds-calendar[compact]) {\n  padding: 0;\n  border: 0;\n  margin: 0;\n  gap: 0;\n}\nds-overlay > dialog[data-ds-overlay-flush] { padding: 0; gap: 0; }\nds-overlay > dialog[data-ds-overlay-rotated] {\n  inset: auto;\n  left: 50%;\n  top: 50%;\n  margin: 0;\n  width: calc(100dvh - 2 * var(--ds-unit));\n  height: calc(100vw - 2 * var(--ds-unit));\n  max-width: none;\n  max-height: none;\n  transform: translate(-50%, -50%) rotate(90deg);\n}\nds-overlay > dialog[data-ds-type=\"screen\"][data-ds-overlay-rotated] { width: 100dvh; height: 100vw; }\nds-overlay > dialog::backdrop { background: color-mix(in srgb, var(--ds-black) 40%, transparent); }\n/* The header keeps the last square of its row for the close button, only when it has one. */\nds-overlay [data-ds-overlay=\"header\"] { display: flex; flex-direction: column; }\nds-overlay > dialog:has(> [data-ds-overlay=\"close\"]) [data-ds-overlay=\"header\"] { padding-inline-end: var(--ds-unit); }\n/* The title on its square's lower sixteen, as every row's words. */\nds-overlay [data-ds-overlay=\"title\"] {\n  display: flex;\n  align-items: flex-end;\n  min-height: var(--ds-row-height);\n  margin: 0;\n  color: var(--ds-text-color);\n  font: inherit;\n  font-weight: var(--ds-type-weight-bold);\n  line-height: var(--ds-type-lineheight-default);\n}\nds-overlay [data-ds-overlay=\"description\"] { margin: 0; color: var(--ds-text-color-muted); font: inherit; }\nds-overlay [data-ds-overlay=\"footer\"] {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  justify-content: flex-end;\n  gap: calc(var(--ds-unit) / 2);\n  min-height: var(--ds-row-height);\n}\nds-overlay [data-ds-overlay=\"close\"] { position: absolute; top: var(--ds-unit); right: var(--ds-unit); }\n\nds-overlay > dialog[data-ds-overlay-inline] {\n  position: relative;\n  inset: auto;\n  width: 100%;\n  max-width: none;\n  max-height: none;\n  margin: 0;\n  padding: 0;\n  gap: 0;\n  border: 0;\n  background: transparent;\n}\n";
 //#endregion
 //#region DS1/1-root/overlay.css?inline
 var overlay_default = "/*\n * Overlay: everything that stands over the page, one component with a type.\n * A `modal` stands in the centre (controls.css and the element's frame); this\n * sheet draws the others, for the `ds-overlay` element (`type=\"sheet\"`,\n * `\"drawer\"` with `side`, `\"screen\"`, which mark its native dialog\n * `data-ds-type` and `data-ds-edge`) and the native frame\n * (`dialog.ds-overlay.ds-overlay--sheet`, `--drawer` with `--start`,\n * `--screen`); controls.css imports it. A popover is placed by the element.\n *\n * - A sheet is as wide as the screen up to 32 squares and centred beyond\n *   that, as high as its content up to two squares below the top, with no\n *   line at its foot; its one line, at the top, is drawn inside its first\n *   square (`--ds-overlay-line`), so it stands on whole squares. A handle two squares wide stands in the middle of its\n *   first square and stays there while the content scrolls.\n * - A drawer is the screen's height and 16 squares wide (`--ds-overlay-width`),\n *   leaving at least two squares of the page beside it; its one line is on\n *   the side that faces the page. `end` is the right in a left-to-right page.\n * - Each keeps the square of padding inside the screen's safe area\n *   (`env(safe-area-inset-*)`, with `viewport-fit=cover` on the page).\n * - Each slides in from its edge and back out to it, in transform alone,\n *   while the backdrop fades; with reduced motion it fades in place. Dragging\n *   it towards its edge (0-face/overlay-swipe.ts) moves it with the finger and\n *   fades the backdrop as it goes.\n * - The page behind a modal native sheet or drawer does not scroll.\n */\n\n:is(ds-overlay > dialog[data-ds-edge=\"bottom\"], dialog.ds-overlay.ds-overlay--sheet),\n:is(ds-overlay > dialog[data-ds-edge=\"end\"], dialog.ds-overlay.ds-overlay--drawer:not(.ds-overlay--start)),\n:is(ds-overlay > dialog[data-ds-edge=\"start\"], dialog.ds-overlay.ds-overlay--drawer.ds-overlay--start) {\n  --ds-overlay-gap: var(--ds-unit);\n  --ds-overlay-inner: var(--ds-overlay-padding, var(--ds-unit));\n  /* The line it faces the page with is drawn inside its first square. */\n  --ds-overlay-within: max(0px, var(--ds-overlay-inner) - var(--ds-overlay-line, 1px));\n  --ds-overlay-motion: var(--ds-overlay-enter, 380ms);\n  --ds-overlay-curve: var(--ds-overlay-easing, cubic-bezier(0.32, 0.72, 0, 1));\n  margin: 0;\n  gap: var(--ds-overlay-gap);\n  transform: var(--ds-overlay-held);\n  transition:\n    transform var(--ds-overlay-motion) var(--ds-overlay-curve),\n    opacity var(--ds-overlay-motion) var(--ds-overlay-curve),\n    overlay var(--ds-overlay-motion) allow-discrete,\n    display var(--ds-overlay-motion) allow-discrete;\n}\n\n/* Content that supplies its own room. */\n:is(ds-overlay > dialog[data-ds-edge], dialog.ds-overlay:is(.ds-overlay--sheet, .ds-overlay--drawer))[data-ds-overlay-flush] {\n  --ds-overlay-inner: 0px;\n  --ds-overlay-gap: 0px;\n}\n\n:is(ds-overlay > dialog[data-ds-edge=\"bottom\"], dialog.ds-overlay.ds-overlay--sheet) {\n  --ds-overlay-held: translateY(var(--ds-overlay-drag, 0px));\n  --ds-overlay-away: translateY(100%);\n  inset: auto 0 0;\n  width: var(--ds-overlay-width, 100%);\n  max-width: min(100%, var(--ds-overlay-sheet-width, calc(32 * var(--ds-unit))));\n  height: var(--ds-overlay-height, fit-content);\n  max-height: calc(100dvh - var(--ds-overlay-sheet-gap, calc(2 * var(--ds-unit))) - env(safe-area-inset-top, 0px));\n  margin: 0 auto;\n  padding:\n    var(--ds-overlay-within)\n    calc(var(--ds-overlay-inner) + env(safe-area-inset-right, 0px))\n    calc(var(--ds-overlay-inner) + env(safe-area-inset-bottom, 0px))\n    calc(var(--ds-overlay-inner) + env(safe-area-inset-left, 0px));\n  border-bottom: 0;\n}\n\n/* The handle: two squares wide, in the middle of the first square, above the\n * content as it scrolls. It takes no room: the content starts where it would. */\n:is(ds-overlay > dialog[data-ds-edge=\"bottom\"], dialog.ds-overlay.ds-overlay--sheet)::before {\n  --ds-overlay-handle-height: calc(4px * var(--ds-sf, 1));\n  content: \"\";\n  display: var(--ds-overlay-handle, block);\n  position: sticky;\n  z-index: 1;\n  /* A sticky offset counts from the content edge, under the sheet's top padding: take that\n     padding off, so the handle is held where it already stands, in the first square. */\n  top: calc((var(--ds-unit) - var(--ds-overlay-handle-height)) / 2 - var(--ds-overlay-line, 1px) - var(--ds-overlay-within));\n  flex: 0 0 auto;\n  align-self: center;\n  width: calc(2 * var(--ds-unit));\n  height: var(--ds-overlay-handle-height);\n  margin-top: calc(var(--ds-overlay-inner) * -1 + (var(--ds-unit) - var(--ds-overlay-handle-height)) / 2);\n  margin-bottom: calc(var(--ds-overlay-inner) - var(--ds-overlay-gap) - var(--ds-overlay-handle-height) - (var(--ds-unit) - var(--ds-overlay-handle-height)) / 2);\n  border-radius: calc(var(--ds-overlay-handle-height) / 2);\n  background: var(--ds-overlay-handle-color, var(--ds-border-color));\n  pointer-events: none;\n}\n\n:is(ds-overlay > dialog[data-ds-edge=\"end\"], dialog.ds-overlay.ds-overlay--drawer:not(.ds-overlay--start)),\n:is(ds-overlay > dialog[data-ds-edge=\"start\"], dialog.ds-overlay.ds-overlay--drawer.ds-overlay--start) {\n  --ds-overlay-held: translateX(var(--ds-overlay-drag, 0px));\n  width: calc(var(--ds-overlay-width, calc(16 * var(--ds-unit))) + var(--ds-overlay-safe-side, 0px));\n  max-width: calc(100vw - 2 * var(--ds-unit));\n  height: 100dvh;\n  max-height: none;\n  border-top: 0;\n  border-bottom: 0;\n}\n\n/* At the right: the end of a left-to-right page, the start of a right-to-left one. */\n:is(ds-overlay > dialog[data-ds-edge=\"end\"], dialog.ds-overlay.ds-overlay--drawer:not(.ds-overlay--start)):not(:dir(rtl)),\n:is(ds-overlay > dialog[data-ds-edge=\"start\"], dialog.ds-overlay.ds-overlay--drawer.ds-overlay--start):dir(rtl) {\n  --ds-overlay-away: translateX(100%);\n  --ds-overlay-safe-side: env(safe-area-inset-right, 0px);\n  inset: 0 0 0 auto;\n  padding:\n    calc(var(--ds-overlay-inner) + env(safe-area-inset-top, 0px))\n    calc(var(--ds-overlay-inner) + env(safe-area-inset-right, 0px))\n    calc(var(--ds-overlay-inner) + env(safe-area-inset-bottom, 0px))\n    var(--ds-overlay-within);\n  border-right: 0;\n}\n\n:is(ds-overlay > dialog[data-ds-edge=\"start\"], dialog.ds-overlay.ds-overlay--drawer.ds-overlay--start):not(:dir(rtl)),\n:is(ds-overlay > dialog[data-ds-edge=\"end\"], dialog.ds-overlay.ds-overlay--drawer:not(.ds-overlay--start)):dir(rtl) {\n  --ds-overlay-away: translateX(-100%);\n  --ds-overlay-safe-side: env(safe-area-inset-left, 0px);\n  inset: 0 auto 0 0;\n  padding:\n    calc(var(--ds-overlay-inner) + env(safe-area-inset-top, 0px))\n    var(--ds-overlay-within)\n    calc(var(--ds-overlay-inner) + env(safe-area-inset-bottom, 0px))\n    calc(var(--ds-overlay-inner) + env(safe-area-inset-left, 0px));\n  border-left: 0;\n}\n\n/* The page behind a native sheet or drawer holds still while it is open, as\n * the element holds it (the element saves and restores the scroll itself). */\n:root:has(dialog.ds-overlay:is(.ds-overlay--sheet, .ds-overlay--drawer):modal) {\n  overflow: hidden;\n  overscroll-behavior: none;\n}\n\n/* Out to its edge, a little quicker than it came; and in from it. */\n:is(ds-overlay > dialog[data-ds-edge], dialog.ds-overlay:is(.ds-overlay--sheet, .ds-overlay--drawer)):not([open]) {\n  --ds-overlay-motion: var(--ds-overlay-exit, 260ms);\n  transform: var(--ds-overlay-away);\n}\n\n@starting-style {\n  :is(ds-overlay > dialog[data-ds-edge], dialog.ds-overlay:is(.ds-overlay--sheet, .ds-overlay--drawer))[open] {\n    transform: var(--ds-overlay-away);\n  }\n}\n\n:is(ds-overlay > dialog[data-ds-edge], dialog.ds-overlay:is(.ds-overlay--sheet, .ds-overlay--drawer))::backdrop {\n  opacity: calc(1 - var(--ds-overlay-progress, 0));\n  transition:\n    opacity var(--ds-overlay-motion, 380ms) ease,\n    overlay var(--ds-overlay-motion, 380ms) allow-discrete,\n    display var(--ds-overlay-motion, 380ms) allow-discrete;\n}\n\n:is(ds-overlay > dialog[data-ds-edge], dialog.ds-overlay:is(.ds-overlay--sheet, .ds-overlay--drawer)):not([open])::backdrop {\n  opacity: 0;\n}\n\n@starting-style {\n  :is(ds-overlay > dialog[data-ds-edge], dialog.ds-overlay:is(.ds-overlay--sheet, .ds-overlay--drawer))[open]::backdrop {\n    opacity: 0;\n  }\n}\n\n/* While a finger holds it, it follows the finger alone. */\n:is(ds-overlay > dialog[data-ds-edge], dialog.ds-overlay:is(.ds-overlay--sheet, .ds-overlay--drawer))[data-ds-overlay-dragging],\n:is(ds-overlay > dialog[data-ds-edge], dialog.ds-overlay:is(.ds-overlay--sheet, .ds-overlay--drawer))[data-ds-overlay-dragging]::backdrop {\n  transition: none;\n}\n\n/* Reduced motion: no slide. It fades where it stands, a dragged one too. */\n@media (prefers-reduced-motion: reduce) {\n  :is(ds-overlay > dialog[data-ds-edge], dialog.ds-overlay:is(.ds-overlay--sheet, .ds-overlay--drawer)) {\n    --ds-overlay-motion: 150ms;\n    transition:\n      opacity var(--ds-overlay-motion) ease,\n      overlay var(--ds-overlay-motion) allow-discrete,\n      display var(--ds-overlay-motion) allow-discrete;\n  }\n\n  :is(ds-overlay > dialog[data-ds-edge], dialog.ds-overlay:is(.ds-overlay--sheet, .ds-overlay--drawer)):not([open]) {\n    --ds-overlay-motion: 150ms;\n    transform: var(--ds-overlay-held);\n    opacity: 0;\n  }\n\n  @starting-style {\n    :is(ds-overlay > dialog[data-ds-edge], dialog.ds-overlay:is(.ds-overlay--sheet, .ds-overlay--drawer))[open] {\n      transform: var(--ds-overlay-held);\n      opacity: 0;\n    }\n  }\n}\n\n/*\n * The screen: an overlay over the whole screen, for navigation folded away on\n * a narrow screen (`ds-header`, `ds-page drawer`, `attachOverlay()`).\n *\n * The panel is the dialog frame (`dialog.ds-overlay`) laid over the whole\n * screen, on the page's own paper, a square of room on every side. Its first\n * row holds the close button where the menu button stood; what the page\n * folded away (its navigation and actions) follows, every link one square\n * high. The page script `0-face/attach-overlay.ts` opens it: it moves the folded parts\n * into the panel and back, keeps focus inside, closes on Escape, on a link and\n * when the screen widens, and holds the page's scroll while it is open.\n * `ds-header` and `ds-page drawer` use the same script and these rules.\n *\n *   ds-overlay--screen         on a <dialog class=\"ds-overlay\">, the panel\n *   ds-overlay__bar             the first row: the close button at its end\n *   ds-overlay__close           the close button, an icon button\n *   ds-overlay__toggle          the button that opens it: it carries\n *                              two icons, the first shown while closed and the\n *                              second (close) while open\n *\n * Tokens: `--ds-overlay-paper` (the page's paper by default).\n */\n\n:is(ds-overlay > dialog[data-ds-type=\"screen\"], dialog.ds-overlay.ds-overlay--screen) {\n  --ds-overlay-width: 100vw;\n  width: 100vw;\n  max-width: none;\n  height: 100dvh;\n  max-height: none;\n  margin: 0;\n  padding: var(--ds-unit);\n  gap: 0;\n  border: 0;\n  background: var(--ds-overlay-paper, var(--background, Canvas));\n  overflow-y: auto;\n}\n\n:is(ds-overlay > dialog[data-ds-type=\"screen\"], dialog.ds-overlay.ds-overlay--screen)[open] {\n  display: flex;\n  flex-direction: column;\n  align-items: stretch;\n  gap: var(--ds-unit);\n}\n\n/* Content that supplies its own room, as the documentation's navigation does. */\n:is(ds-overlay > dialog[data-ds-type=\"screen\"], dialog.ds-overlay.ds-overlay--screen)[data-ds-overlay-flush] {\n  padding: 0;\n  gap: 0;\n}\n\n:is(ds-overlay > dialog[data-ds-type=\"screen\"], dialog.ds-overlay.ds-overlay--screen)::backdrop {\n  background: transparent;\n}\n\n/* It arrives by fading in and settling half a square, and leaves at once. */\n@media (prefers-reduced-motion: no-preference) {\n  :is(ds-overlay > dialog[data-ds-type=\"screen\"], dialog.ds-overlay.ds-overlay--screen)[open] {\n    transition: opacity 160ms ease-out, transform 160ms ease-out;\n  }\n\n  @starting-style {\n    :is(ds-overlay > dialog[data-ds-type=\"screen\"], dialog.ds-overlay.ds-overlay--screen)[open] {\n      opacity: 0;\n      transform: translateY(calc(var(--ds-unit) / -2));\n    }\n  }\n}\n\n.ds-overlay__bar {\n  display: flex;\n  align-items: center;\n  justify-content: flex-end;\n  min-height: var(--ds-row-height);\n}\n\n/* Centred in the last square of the row, as the menu button is. Two classes,\n   so the button's own margin does not undo it. */\n.ds-overlay__bar > .ds-overlay__close {\n  margin-inline-end: calc((var(--ds-unit) - var(--ds-control-height)) / 2);\n}\n\n/* The toggle shows its first icon while closed and its second while open; the\n   close button, a copy of it, shows the second. */\n.ds-overlay__toggle:not([aria-expanded=\"true\"]) > :nth-child(2),\n.ds-overlay__toggle[aria-expanded=\"true\"] > :first-child:not(:only-child),\n.ds-overlay__close > :first-child:not(:only-child) {\n  display: none;\n}\n";
@@ -18194,7 +18534,7 @@ _Overlay.styles = [r$4(component_metrics_default), i$5`:host { display: contents
 define("ds-overlay", Overlay);
 //#endregion
 //#region DS1/2-core/styles/ds-token.css?inline
-var ds_token_default = "/* Shape is a surface preference. Keep these base lengths unscaled: each\n * component resolves them with its own --ds-sf in component-metrics.css. */\n[data-ds-shape=\"square\"],\n:host([data-ds-shape=\"square\"]) {\n  --ds-corner-size: 0px;\n  --ds-corner-shape: round;\n  --ds-button-inset: 0.5px;\n}\n\n[data-ds-shape=\"rounded\"],\n:host([data-ds-shape=\"rounded\"]) {\n  --ds-corner-size: 4px;\n  --ds-corner-shape: round;\n  --ds-button-inset: 2.5px;\n}\n\n[data-ds-shape=\"circular\"],\n:host([data-ds-shape=\"circular\"]) {\n  --ds-corner-size: 999px;\n  --ds-corner-shape: round;\n  --ds-button-inset: 5px;\n}\n\n/* A squircle needs twice an arc's radius for the same apparent corner.\n * Circular controls keep true semicircles even in a squircle browser. */\n@supports (corner-shape: squircle) {\n  [data-ds-shape=\"rounded\"],\n  :host([data-ds-shape=\"rounded\"]) {\n    --ds-corner-size: 8px;\n    --ds-corner-shape: squircle;\n  }\n}\n/* Resolve dimensions where a component is drawn. Inherited calc() values have\n * already used their ancestor's scale. Base tokens stay unscaled and inherit;\n * resolved tokens can still be overridden directly on a component.\n * data-ds-surface gives ordinary layout elements the same scaled measures.\n */\n:root,\n:host,\n:where([data-ds-surface]) {\n  --ds-unit: calc(var(--ds-1, 20px) * var(--ds-sf, 1));\n  --ds-control-height: calc(var(--ds-control-size, var(--ds-08, 16px)) * var(--ds-sf, 1));\n  --ds-row-height: calc(var(--ds-row-size, var(--ds-1, 20px)) * var(--ds-sf, 1));\n  --ds-type-size-default: calc(var(--ds-text-size, 14px) * var(--ds-sf, 1));\n  --ds-type-size-small: calc(var(--ds-small-text-size, 10px) * var(--ds-sf, 1));\n  --ds-type-size-heading: calc(var(--ds-heading-text-size, 13px) * var(--ds-sf, 1));\n  --ds-type-size-display: calc(var(--ds-display-text-size, 20px) * var(--ds-sf, 1));\n  --ds-type-lineheight-default: calc(var(--ds-text-leading, 16px) * var(--ds-sf, 1));\n  --ds-type-letterspacing-default: calc(var(--ds-text-tracking, -0.3px) * var(--ds-sf, 1));\n  --ds-radius: calc(var(--ds-corner-size, 4px) * var(--ds-sf, 1));\n  --ds-radius-card: calc(var(--ds-card-corner-size, 4px) * var(--ds-sf, 1));\n}\n:host { display: inline-flex; max-width: 100%; min-width: 0; vertical-align: middle; }\n:host([hidden]) { display: none !important; }\n.frame { display: flex; align-items: center; box-sizing: border-box; max-width: 100%; min-width: 0; height: var(--ds-row-height); padding-inline-start: calc(4px * var(--ds-sf)); background: var(--ds-fill); color: var(--ds-text-color); border-radius: var(--ds-radius); font-family: var(--ds-typeface-regular); font-size: var(--ds-type-size-default); line-height: var(--ds-type-lineheight-default); letter-spacing: var(--ds-type-letterspacing-default); }\n.copy { display: flex; align-items: baseline; gap: calc(4px * var(--ds-sf)); min-width: 0; padding-inline: calc(4px * var(--ds-sf)); }\n.copy > span, small { overflow: hidden; text-overflow: clip; white-space: nowrap; min-width: 0; }\n/* Cut words fade over their last square, never an ellipsis (0-face/cut-fade.ts marks them). */\n:is(.copy > span, small)[data-cut=\"end\"] { mask-image: linear-gradient(to right, #000 calc(100% - var(--ds-unit)), transparent); }\n:host(:dir(rtl)) :is(.copy > span, small)[data-cut=\"end\"] { mask-image: linear-gradient(to left, #000 calc(100% - var(--ds-unit)), transparent); }\nsmall { font-size: var(--ds-type-size-small); color: var(--ds-text-color-muted); }\nds-button { flex: 0 0 auto; --ds-button-height: var(--ds-row-height); --ds-button-width: var(--ds-row-height); }\n::slotted([slot=\"leading\"]) { flex: 0 0 auto; }\n";
+var ds_token_default = "/* Shape is a surface preference. Keep these base lengths unscaled: each\n * component resolves them with its own --ds-sf in component-metrics.css. */\n[data-ds-shape=\"square\"],\n:host([data-ds-shape=\"square\"]) {\n  --ds-corner-size: 0px;\n  --ds-corner-shape: round;\n  --ds-button-inset: 0.5px;\n}\n\n[data-ds-shape=\"rounded\"],\n:host([data-ds-shape=\"rounded\"]) {\n  --ds-corner-size: 4px;\n  --ds-corner-shape: round;\n  --ds-button-inset: 2.5px;\n}\n\n[data-ds-shape=\"circular\"],\n:host([data-ds-shape=\"circular\"]) {\n  --ds-corner-size: 999px;\n  --ds-corner-shape: round;\n  --ds-button-inset: 5px;\n}\n\n/* A squircle needs twice an arc's radius for the same apparent corner.\n * Circular controls keep true semicircles even in a squircle browser. */\n@supports (corner-shape: squircle) {\n  [data-ds-shape=\"rounded\"],\n  :host([data-ds-shape=\"rounded\"]) {\n    --ds-corner-size: 8px;\n    --ds-corner-shape: squircle;\n  }\n}\n/* Resolve dimensions where a component is drawn. Inherited calc() values have\n * already used their ancestor's scale. Base tokens stay unscaled and inherit;\n * resolved tokens can still be overridden directly on a component.\n * data-ds-surface gives ordinary layout elements the same scaled measures.\n */\n:root,\n:host,\n:where([data-ds-surface]) {\n  --ds-unit: calc(var(--ds-1, 20px) * var(--ds-sf, 1));\n  --ds-control-height: calc(var(--ds-control-size, var(--ds-08, 16px)) * var(--ds-sf, 1));\n  --ds-row-height: calc(var(--ds-row-size, var(--ds-1, 20px)) * var(--ds-sf, 1));\n  --ds-type-size-default: calc(var(--ds-text-size, 14px) * var(--ds-sf, 1));\n  --ds-type-size-small: calc(var(--ds-small-text-size, 10px) * var(--ds-sf, 1));\n  --ds-type-size-heading: calc(var(--ds-heading-text-size, 13px) * var(--ds-sf, 1));\n  --ds-type-size-display: calc(var(--ds-display-text-size, 20px) * var(--ds-sf, 1));\n  --ds-type-lineheight-default: calc(var(--ds-text-leading, 16px) * var(--ds-sf, 1));\n  --ds-type-letterspacing-default: calc(var(--ds-text-tracking, -0.3px) * var(--ds-sf, 1));\n  --ds-radius: calc(var(--ds-corner-size, 4px) * var(--ds-sf, 1));\n  --ds-radius-card: calc(var(--ds-card-corner-size, 4px) * var(--ds-sf, 1));\n}\n:host { display: inline-flex; max-width: 100%; min-width: 0; vertical-align: middle; }\n:host([hidden]) { display: none !important; }\n.frame { display: flex; align-items: center; box-sizing: border-box; max-width: 100%; min-width: 0; height: var(--ds-row-height); padding-inline-start: calc(4px * var(--ds-sf)); background: var(--ds-fill); color: var(--ds-text-color); border-radius: var(--ds-radius); font-family: \"Inter Arrows\", var(--ds-typeface-regular); font-size: var(--ds-type-size-default); line-height: var(--ds-type-lineheight-default); letter-spacing: var(--ds-type-letterspacing-default); }\n.copy { display: flex; align-items: baseline; gap: calc(4px * var(--ds-sf)); min-width: 0; padding-inline: calc(4px * var(--ds-sf)); }\n.copy > span, small { overflow: hidden; text-overflow: clip; white-space: nowrap; min-width: 0; }\n/* Cut words fade over their last square, never an ellipsis (0-face/cut-fade.ts marks them). */\n:is(.copy > span, small)[data-cut=\"end\"] { mask-image: linear-gradient(to right, #000 calc(100% - var(--ds-unit)), transparent); }\n:host(:dir(rtl)) :is(.copy > span, small)[data-cut=\"end\"] { mask-image: linear-gradient(to left, #000 calc(100% - var(--ds-unit)), transparent); }\nsmall { font-size: var(--ds-type-size-small); color: var(--ds-text-color-muted); }\nds-button { flex: 0 0 auto; --ds-button-height: var(--ds-row-height); --ds-button-width: var(--ds-row-height); }\n::slotted([slot=\"leading\"]) { flex: 0 0 auto; }\n";
 //#endregion
 //#region DS1/2-core/ds-token.ts
 var _Token;
@@ -18253,7 +18593,7 @@ _Token.styles = r$4(ds_token_default);
 define("ds-token", Token);
 //#endregion
 //#region DS1/3-unit/styles/ds-token-field.css?inline
-var ds_token_field_default = "/* Shape is a surface preference. Keep these base lengths unscaled: each\n * component resolves them with its own --ds-sf in component-metrics.css. */\n[data-ds-shape=\"square\"],\n:host([data-ds-shape=\"square\"]) {\n  --ds-corner-size: 0px;\n  --ds-corner-shape: round;\n  --ds-button-inset: 0.5px;\n}\n\n[data-ds-shape=\"rounded\"],\n:host([data-ds-shape=\"rounded\"]) {\n  --ds-corner-size: 4px;\n  --ds-corner-shape: round;\n  --ds-button-inset: 2.5px;\n}\n\n[data-ds-shape=\"circular\"],\n:host([data-ds-shape=\"circular\"]) {\n  --ds-corner-size: 999px;\n  --ds-corner-shape: round;\n  --ds-button-inset: 5px;\n}\n\n/* A squircle needs twice an arc's radius for the same apparent corner.\n * Circular controls keep true semicircles even in a squircle browser. */\n@supports (corner-shape: squircle) {\n  [data-ds-shape=\"rounded\"],\n  :host([data-ds-shape=\"rounded\"]) {\n    --ds-corner-size: 8px;\n    --ds-corner-shape: squircle;\n  }\n}\n/* Resolve dimensions where a component is drawn. Inherited calc() values have\n * already used their ancestor's scale. Base tokens stay unscaled and inherit;\n * resolved tokens can still be overridden directly on a component.\n * data-ds-surface gives ordinary layout elements the same scaled measures.\n */\n:root,\n:host,\n:where([data-ds-surface]) {\n  --ds-unit: calc(var(--ds-1, 20px) * var(--ds-sf, 1));\n  --ds-control-height: calc(var(--ds-control-size, var(--ds-08, 16px)) * var(--ds-sf, 1));\n  --ds-row-height: calc(var(--ds-row-size, var(--ds-1, 20px)) * var(--ds-sf, 1));\n  --ds-type-size-default: calc(var(--ds-text-size, 14px) * var(--ds-sf, 1));\n  --ds-type-size-small: calc(var(--ds-small-text-size, 10px) * var(--ds-sf, 1));\n  --ds-type-size-heading: calc(var(--ds-heading-text-size, 13px) * var(--ds-sf, 1));\n  --ds-type-size-display: calc(var(--ds-display-text-size, 20px) * var(--ds-sf, 1));\n  --ds-type-lineheight-default: calc(var(--ds-text-leading, 16px) * var(--ds-sf, 1));\n  --ds-type-letterspacing-default: calc(var(--ds-text-tracking, -0.3px) * var(--ds-sf, 1));\n  --ds-radius: calc(var(--ds-corner-size, 4px) * var(--ds-sf, 1));\n  --ds-radius-card: calc(var(--ds-card-corner-size, 4px) * var(--ds-sf, 1));\n}\n:host { display: block; min-width: 0; width: 100%; }\n:host([hidden]) { display: none !important; }\n.frame { box-sizing: border-box; display: flex; flex-wrap: wrap; align-items: center; width: 100%; min-height: var(--ds-row-height); gap: 0 calc(var(--ds-unit) / 2); border: 0; outline: 1px solid var(--ds-border-color); outline-offset: -1px; border-radius: var(--ds-radius); background: var(--ds-paper); padding: 0; }\n.frame:focus-within { outline: 1px solid var(--ds-focus-ring); outline-offset: -1px; }\nslot { display: contents; }\n.entry { display: flex; align-items: center; flex: 1 1 calc(8 * var(--ds-unit)); min-width: min(100%, calc(4 * var(--ds-unit))); max-width: 100%; height: var(--ds-row-height); }\n::slotted(input) { box-sizing: border-box !important; flex: 1 1 0 !important; width: 0 !important; min-width: 0 !important; max-width: 100% !important; height: var(--ds-row-height) !important; margin: 0 !important; padding: 0 calc(4px * var(--ds-sf)) !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; color: var(--ds-text-color) !important; font-family: var(--ds-typeface-regular) !important; font-size: var(--ds-type-size-default) !important; line-height: var(--ds-type-lineheight-default) !important; letter-spacing: var(--ds-type-letterspacing-default) !important; outline: none !important; box-shadow: none !important; }\n::slotted(input:disabled) { opacity: .5; }\n::slotted(ds-token) { max-width: 100%; }\nds-button { flex: 0 0 auto; --ds-button-width: var(--ds-row-height); --ds-button-height: var(--ds-row-height); }\n";
+var ds_token_field_default = "/* Shape is a surface preference. Keep these base lengths unscaled: each\n * component resolves them with its own --ds-sf in component-metrics.css. */\n[data-ds-shape=\"square\"],\n:host([data-ds-shape=\"square\"]) {\n  --ds-corner-size: 0px;\n  --ds-corner-shape: round;\n  --ds-button-inset: 0.5px;\n}\n\n[data-ds-shape=\"rounded\"],\n:host([data-ds-shape=\"rounded\"]) {\n  --ds-corner-size: 4px;\n  --ds-corner-shape: round;\n  --ds-button-inset: 2.5px;\n}\n\n[data-ds-shape=\"circular\"],\n:host([data-ds-shape=\"circular\"]) {\n  --ds-corner-size: 999px;\n  --ds-corner-shape: round;\n  --ds-button-inset: 5px;\n}\n\n/* A squircle needs twice an arc's radius for the same apparent corner.\n * Circular controls keep true semicircles even in a squircle browser. */\n@supports (corner-shape: squircle) {\n  [data-ds-shape=\"rounded\"],\n  :host([data-ds-shape=\"rounded\"]) {\n    --ds-corner-size: 8px;\n    --ds-corner-shape: squircle;\n  }\n}\n/* Resolve dimensions where a component is drawn. Inherited calc() values have\n * already used their ancestor's scale. Base tokens stay unscaled and inherit;\n * resolved tokens can still be overridden directly on a component.\n * data-ds-surface gives ordinary layout elements the same scaled measures.\n */\n:root,\n:host,\n:where([data-ds-surface]) {\n  --ds-unit: calc(var(--ds-1, 20px) * var(--ds-sf, 1));\n  --ds-control-height: calc(var(--ds-control-size, var(--ds-08, 16px)) * var(--ds-sf, 1));\n  --ds-row-height: calc(var(--ds-row-size, var(--ds-1, 20px)) * var(--ds-sf, 1));\n  --ds-type-size-default: calc(var(--ds-text-size, 14px) * var(--ds-sf, 1));\n  --ds-type-size-small: calc(var(--ds-small-text-size, 10px) * var(--ds-sf, 1));\n  --ds-type-size-heading: calc(var(--ds-heading-text-size, 13px) * var(--ds-sf, 1));\n  --ds-type-size-display: calc(var(--ds-display-text-size, 20px) * var(--ds-sf, 1));\n  --ds-type-lineheight-default: calc(var(--ds-text-leading, 16px) * var(--ds-sf, 1));\n  --ds-type-letterspacing-default: calc(var(--ds-text-tracking, -0.3px) * var(--ds-sf, 1));\n  --ds-radius: calc(var(--ds-corner-size, 4px) * var(--ds-sf, 1));\n  --ds-radius-card: calc(var(--ds-card-corner-size, 4px) * var(--ds-sf, 1));\n}\n:host { display: block; min-width: 0; width: 100%; }\n:host([hidden]) { display: none !important; }\n.frame { box-sizing: border-box; display: flex; flex-wrap: wrap; align-items: center; width: 100%; min-height: var(--ds-row-height); gap: 0 calc(var(--ds-unit) / 2); border: 0; outline: 1px solid var(--ds-border-color); outline-offset: -1px; border-radius: var(--ds-radius); background: var(--ds-paper); padding: 0; }\n.frame:focus-within { outline: 1px solid var(--ds-focus-ring); outline-offset: -1px; }\nslot { display: contents; }\n.entry { display: flex; align-items: center; flex: 1 1 calc(8 * var(--ds-unit)); min-width: min(100%, calc(4 * var(--ds-unit))); max-width: 100%; height: var(--ds-row-height); }\n::slotted(input) { box-sizing: border-box !important; flex: 1 1 0 !important; width: 0 !important; min-width: 0 !important; max-width: 100% !important; height: var(--ds-row-height) !important; margin: 0 !important; padding: 0 calc(4px * var(--ds-sf)) !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; color: var(--ds-text-color) !important; font-family: \"Inter Arrows\", var(--ds-typeface-regular) !important; font-size: var(--ds-type-size-default) !important; line-height: var(--ds-type-lineheight-default) !important; letter-spacing: var(--ds-type-letterspacing-default) !important; outline: none !important; box-shadow: none !important; }\n::slotted(input:disabled) { opacity: .5; }\n::slotted(ds-token) { max-width: 100%; }\nds-button { flex: 0 0 auto; --ds-button-width: var(--ds-row-height); --ds-button-height: var(--ds-row-height); }\n";
 //#endregion
 //#region DS1/3-unit/ds-token-field.ts
 var _TokenField;
@@ -18471,7 +18811,7 @@ _TokenField.styles = r$4(ds_token_field_default);
 define("ds-token-field", TokenField);
 //#endregion
 //#region DS1/3-unit/styles/ds-sidebar.css?inline
-var ds_sidebar_default = "/* Shape is a surface preference. Keep these base lengths unscaled: each\n * component resolves them with its own --ds-sf in component-metrics.css. */\n[data-ds-shape=\"square\"],\n:host([data-ds-shape=\"square\"]) {\n  --ds-corner-size: 0px;\n  --ds-corner-shape: round;\n  --ds-button-inset: 0.5px;\n}\n\n[data-ds-shape=\"rounded\"],\n:host([data-ds-shape=\"rounded\"]) {\n  --ds-corner-size: 4px;\n  --ds-corner-shape: round;\n  --ds-button-inset: 2.5px;\n}\n\n[data-ds-shape=\"circular\"],\n:host([data-ds-shape=\"circular\"]) {\n  --ds-corner-size: 999px;\n  --ds-corner-shape: round;\n  --ds-button-inset: 5px;\n}\n\n/* A squircle needs twice an arc's radius for the same apparent corner.\n * Circular controls keep true semicircles even in a squircle browser. */\n@supports (corner-shape: squircle) {\n  [data-ds-shape=\"rounded\"],\n  :host([data-ds-shape=\"rounded\"]) {\n    --ds-corner-size: 8px;\n    --ds-corner-shape: squircle;\n  }\n}\n/* Resolve dimensions where a component is drawn. Inherited calc() values have\n * already used their ancestor's scale. Base tokens stay unscaled and inherit;\n * resolved tokens can still be overridden directly on a component.\n * data-ds-surface gives ordinary layout elements the same scaled measures.\n */\n:root,\n:host,\n:where([data-ds-surface]) {\n  --ds-unit: calc(var(--ds-1, 20px) * var(--ds-sf, 1));\n  --ds-control-height: calc(var(--ds-control-size, var(--ds-08, 16px)) * var(--ds-sf, 1));\n  --ds-row-height: calc(var(--ds-row-size, var(--ds-1, 20px)) * var(--ds-sf, 1));\n  --ds-type-size-default: calc(var(--ds-text-size, 14px) * var(--ds-sf, 1));\n  --ds-type-size-small: calc(var(--ds-small-text-size, 10px) * var(--ds-sf, 1));\n  --ds-type-size-heading: calc(var(--ds-heading-text-size, 13px) * var(--ds-sf, 1));\n  --ds-type-size-display: calc(var(--ds-display-text-size, 20px) * var(--ds-sf, 1));\n  --ds-type-lineheight-default: calc(var(--ds-text-leading, 16px) * var(--ds-sf, 1));\n  --ds-type-letterspacing-default: calc(var(--ds-text-tracking, -0.3px) * var(--ds-sf, 1));\n  --ds-radius: calc(var(--ds-corner-size, 4px) * var(--ds-sf, 1));\n  --ds-radius-card: calc(var(--ds-card-corner-size, 4px) * var(--ds-sf, 1));\n}\n:host {\n  display: flex;\n  flex-direction: column;\n  width: calc(12 * var(--ds-unit));\n  max-width: 100%;\n  min-width: 0;\n  min-height: 0;\n  color: var(--ds-text-color);\n  font-family: var(--ds-typeface-regular);\n  font-feature-settings: var(--ds-font-features);\n  font-size: var(--ds-type-size-default);\n  font-weight: var(--ds-type-weight-default);\n  line-height: var(--ds-type-lineheight-default);\n  letter-spacing: var(--ds-type-letterspacing-default);\n}\nnav {\n  flex: 1 1 auto;\n  min-height: 0;\n  overflow-y: auto;\n  overscroll-behavior: contain;\n  scrollbar-width: thin;\n  padding: calc(var(--ds-unit) / 2) 0;\n}\n::slotted([slot=\"header\"]), ::slotted([slot=\"footer\"]) { flex: none; }\n.row {\n  --ds-row-gap: 0px;\n  border-radius: calc(2px * var(--ds-sf));\n  padding-inline: calc(4px * var(--ds-sf));\n  padding-inline-start: calc(4px * var(--ds-sf) + var(--depth) * var(--ds-unit) / 2);\n}\n/* The look of every pressable row (ds-row, .ds-row, the tree's rows): the same tokens, the same fallbacks. */\n.row:hover { background: var(--ds-row-fill-hover, var(--ds-fill)); }\n.row[data-current] { background: var(--ds-row-fill-current, var(--ds-fill-hover)); }\n.row[data-current] .choice { --ds-type-weight-default: var(--ds-row-current-weight, 500); }\nds-button { --ds-corner-size: 0px; --ds-button-padding: 0; }\n.disclosure { flex: 0 0 var(--ds-unit); width: var(--ds-unit); }\n.spacer { flex: 1; }\n.disclosure { --ds-button-color: var(--ds-text-color-muted); --ds-button-height: var(--ds-control-height); }\nds-icon { transform: rotate(0deg); }\nds-icon[data-open] { transform: rotate(90deg); }\n.choice { flex: 0 1 auto; min-width: 0; }\n.name:has(ds-icon) { display: flex; align-items: center; gap: calc(4px * var(--ds-sf)); }\n.name { overflow: hidden; white-space: nowrap; text-overflow: clip; }\n/* Cut words fade over their last square, never an ellipsis (0-face/cut-fade.ts marks them). */\n:is(.name, .tree .label)[data-cut=\"end\"] { mask-image: linear-gradient(to right, #000 calc(100% - var(--ds-unit)), transparent); }\n:host(:dir(rtl)) :is(.name, .tree .label)[data-cut=\"end\"] { mask-image: linear-gradient(to left, #000 calc(100% - var(--ds-unit)), transparent); }\n/* A detail (a version) follows the label in the small muted type, 4px after its words and on their line, cut with them. */\n.detail { margin-inline-start: calc(4px * var(--ds-sf)); font-size: var(--ds-type-size-small); line-height: 1; color: var(--ds-text-color-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }\n.name:has(ds-icon) .detail { margin-inline-start: 0; }\n.meta { flex: none; padding-inline-start: calc(4px * var(--ds-sf)); font-size: var(--ds-type-size-small); color: var(--ds-text-color-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }\n.action { margin-inline-start: calc(4px * var(--ds-sf)); --ds-text-size: 10px; --ds-button-color: var(--ds-text-color-muted); }\n.empty { margin: 0; padding: calc(var(--ds-unit) / 2); color: var(--ds-text-color-muted); }\n@media (forced-colors: active) { .row[data-current] { outline: 1px solid Highlight; outline-offset: -1px; } }\n\n/* ---- Tree: the same rows as the native .ds-sidebar tree in 1-root/row.css. ---- */\n.tree {\n  flex: 1 1 auto;\n  display: flex;\n  flex-direction: column;\n  min-width: 0;\n  min-height: 0;\n  overflow-y: auto;\n  overscroll-behavior: contain;\n  scrollbar-width: thin;\n}\n\n/* One square high, its contents on the lower sixteen as every row's; each level one square\n   further in, so a row's arrow stands under its parent's label. */\n.tree .item {\n  box-sizing: border-box;\n  display: flex;\n  align-items: flex-end;\n  height: var(--ds-row-height);\n  min-width: 0;\n  padding-inline: calc(var(--depth, 0) * var(--ds-unit)) var(--ds-row-padding, calc(4px * var(--ds-sf)));\n  border-radius: 0;\n  white-space: nowrap;\n  cursor: pointer;\n  user-select: none;\n  -webkit-tap-highlight-color: transparent;\n  outline: none;\n}\n.tree .item:hover:not([aria-disabled=\"true\"]) { background: var(--ds-row-fill-hover, var(--ds-fill)); }\n.tree .item:active:not([aria-disabled=\"true\"]) { background: var(--ds-row-fill-press, var(--ds-fill-hover)); }\n.tree .item[aria-selected=\"true\"] {\n  --ds-type-weight-default: var(--ds-row-current-weight, 500);\n  background: var(--ds-row-fill-current, var(--ds-fill-hover));\n  font-weight: var(--ds-row-current-weight, 500);\n}\n.tree .item:focus-visible { outline: 2px solid var(--ds-focus-ring); outline-offset: -2px; }\n.tree .item[aria-disabled=\"true\"] { cursor: default; opacity: 0.5; }\n\n/* The arrow and the icon each take a whole square, drawn on the row's sixteen (the square's\n   spare four above); a leaf keeps an empty one so labels line up. */\n.tree .disclosure, .tree .icon {\n  box-sizing: border-box;\n  display: inline-flex;\n  flex: 0 0 var(--ds-unit);\n  justify-content: center;\n  align-items: center;\n  width: var(--ds-unit);\n  height: var(--ds-unit);\n  padding-top: calc(var(--ds-unit) - var(--ds-control-height));\n}\n.tree .disclosure { color: var(--ds-text-color-muted); }\n.tree .disclosure ds-icon { transition: transform 120ms ease-out; }\n.tree .label {\n  flex: 1 1 auto;\n  min-width: 0;\n  padding-inline-start: calc(4px * var(--ds-sf));\n  overflow: hidden;\n  text-overflow: clip;\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .tree .disclosure ds-icon { transition: none; }\n}\n@media (forced-colors: active) {\n  .tree .item[aria-selected=\"true\"] { outline: 1px solid Highlight; outline-offset: -1px; }\n  .tree .item:focus-visible { outline-color: Highlight; }\n}\n\n/* Extend the native destination over the row without moving its words or chevron.\n   Independent disclosure and action controls stand above this hit area. */\n.row { position: relative; isolation: isolate; }\n.choice, .choice > :is(a, button) { position: static; }\n.choice > :is(a, button)::after { content: \"\"; position: absolute; inset: 0; cursor: pointer; }\n.row[data-disabled] .choice > button::after { cursor: default; }\n.row > .disclosure, .row > .action { position: relative; z-index: 1; }\n.row:has(.choice > :focus-visible) { outline: 2px solid var(--ds-focus-ring); outline-offset: -2px; }\n.row[data-drop=\"before\"] { box-shadow: inset 0 1px var(--ds-text-color); }\n.row[data-drop=\"after\"] { box-shadow: inset 0 -1px var(--ds-text-color); }\n\n/* Keep the disclosure press target one square while its icon sits on the sixteen. */\n.row > .disclosure > button::after { content: \"\"; position: absolute; inset: 0; }\n\n:host([disclosure-position=\"start\"]) .row { padding-inline-start: calc(4px * var(--ds-sf) + var(--depth) * var(--ds-unit)); }\n:host([disclosure-position=\"start\"]) .row:not(:has(.disclosure)) .choice { margin-inline-start: var(--ds-unit); }\n\n/* Narrow: eight squares wide, each row hugging its words, so the pointer's and the current\n   row's fill wrap the label (and its meta and disclosure) 4px either side instead of running\n   across the column. Rows still stand one square apart, half a square further in per level. */\n:host([narrow]) { width: calc(8 * var(--ds-unit)); }\n:host([narrow]) nav { display: flex; flex-direction: column; align-items: flex-start; }\n:host([narrow]) .row { width: fit-content; max-width: 100%; }\n:host([narrow]) .spacer { display: none; }\n";
+var ds_sidebar_default = "/* Shape is a surface preference. Keep these base lengths unscaled: each\n * component resolves them with its own --ds-sf in component-metrics.css. */\n[data-ds-shape=\"square\"],\n:host([data-ds-shape=\"square\"]) {\n  --ds-corner-size: 0px;\n  --ds-corner-shape: round;\n  --ds-button-inset: 0.5px;\n}\n\n[data-ds-shape=\"rounded\"],\n:host([data-ds-shape=\"rounded\"]) {\n  --ds-corner-size: 4px;\n  --ds-corner-shape: round;\n  --ds-button-inset: 2.5px;\n}\n\n[data-ds-shape=\"circular\"],\n:host([data-ds-shape=\"circular\"]) {\n  --ds-corner-size: 999px;\n  --ds-corner-shape: round;\n  --ds-button-inset: 5px;\n}\n\n/* A squircle needs twice an arc's radius for the same apparent corner.\n * Circular controls keep true semicircles even in a squircle browser. */\n@supports (corner-shape: squircle) {\n  [data-ds-shape=\"rounded\"],\n  :host([data-ds-shape=\"rounded\"]) {\n    --ds-corner-size: 8px;\n    --ds-corner-shape: squircle;\n  }\n}\n/* Resolve dimensions where a component is drawn. Inherited calc() values have\n * already used their ancestor's scale. Base tokens stay unscaled and inherit;\n * resolved tokens can still be overridden directly on a component.\n * data-ds-surface gives ordinary layout elements the same scaled measures.\n */\n:root,\n:host,\n:where([data-ds-surface]) {\n  --ds-unit: calc(var(--ds-1, 20px) * var(--ds-sf, 1));\n  --ds-control-height: calc(var(--ds-control-size, var(--ds-08, 16px)) * var(--ds-sf, 1));\n  --ds-row-height: calc(var(--ds-row-size, var(--ds-1, 20px)) * var(--ds-sf, 1));\n  --ds-type-size-default: calc(var(--ds-text-size, 14px) * var(--ds-sf, 1));\n  --ds-type-size-small: calc(var(--ds-small-text-size, 10px) * var(--ds-sf, 1));\n  --ds-type-size-heading: calc(var(--ds-heading-text-size, 13px) * var(--ds-sf, 1));\n  --ds-type-size-display: calc(var(--ds-display-text-size, 20px) * var(--ds-sf, 1));\n  --ds-type-lineheight-default: calc(var(--ds-text-leading, 16px) * var(--ds-sf, 1));\n  --ds-type-letterspacing-default: calc(var(--ds-text-tracking, -0.3px) * var(--ds-sf, 1));\n  --ds-radius: calc(var(--ds-corner-size, 4px) * var(--ds-sf, 1));\n  --ds-radius-card: calc(var(--ds-card-corner-size, 4px) * var(--ds-sf, 1));\n}\n:host {\n  display: flex;\n  flex-direction: column;\n  width: calc(12 * var(--ds-unit));\n  max-width: 100%;\n  min-width: 0;\n  min-height: 0;\n  color: var(--ds-text-color);\n  font-family: \"Inter Arrows\", var(--ds-typeface-regular);\n  font-feature-settings: var(--ds-font-features);\n  font-size: var(--ds-type-size-default);\n  font-weight: var(--ds-type-weight-default);\n  line-height: var(--ds-type-lineheight-default);\n  letter-spacing: var(--ds-type-letterspacing-default);\n}\nnav {\n  flex: 1 1 auto;\n  min-height: 0;\n  overflow-y: auto;\n  overscroll-behavior: contain;\n  scrollbar-width: thin;\n  padding: calc(var(--ds-unit) / 2) 0;\n}\n::slotted([slot=\"header\"]), ::slotted([slot=\"footer\"]) { flex: none; }\n.row {\n  --ds-row-gap: 0px;\n  border-radius: calc(2px * var(--ds-sf));\n  padding-inline: calc(4px * var(--ds-sf));\n  padding-inline-start: calc(4px * var(--ds-sf) + var(--depth) * var(--ds-unit) / 2);\n}\n/* The look of every pressable row (ds-row, .ds-row, the tree's rows): the same tokens, the same fallbacks. */\n.row:hover { background: var(--ds-row-fill-hover, var(--ds-fill)); }\n.row[data-current] { background: var(--ds-row-fill-current, var(--ds-fill-hover)); }\n.row[data-current] .choice { --ds-type-weight-default: var(--ds-row-current-weight, 500); }\nds-button { --ds-corner-size: 0px; --ds-button-padding: 0; }\n.disclosure { flex: 0 0 var(--ds-unit); width: var(--ds-unit); }\n.spacer { flex: 1; }\n.disclosure { --ds-button-color: var(--ds-text-color-muted); --ds-button-height: var(--ds-control-height); }\nds-icon { transform: rotate(0deg); }\nds-icon[data-open] { transform: rotate(90deg); }\n.choice { flex: 0 1 auto; min-width: 0; }\n.name:has(ds-icon) { display: flex; align-items: center; gap: calc(4px * var(--ds-sf)); }\n.name { overflow: hidden; white-space: nowrap; text-overflow: clip; }\n/* Cut words fade over their last square, never an ellipsis (0-face/cut-fade.ts marks them). */\n:is(.name, .tree .label)[data-cut=\"end\"] { mask-image: linear-gradient(to right, #000 calc(100% - var(--ds-unit)), transparent); }\n:host(:dir(rtl)) :is(.name, .tree .label)[data-cut=\"end\"] { mask-image: linear-gradient(to left, #000 calc(100% - var(--ds-unit)), transparent); }\n/* A detail (a version) follows the label in the small muted type, 4px after its words and on their line, cut with them. */\n.detail { margin-inline-start: calc(4px * var(--ds-sf)); font-size: var(--ds-type-size-small); line-height: 1; color: var(--ds-text-color-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }\n.name:has(ds-icon) .detail { margin-inline-start: 0; }\n.meta { flex: none; padding-inline-start: calc(4px * var(--ds-sf)); font-size: var(--ds-type-size-small); color: var(--ds-text-color-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }\n.action { margin-inline-start: calc(4px * var(--ds-sf)); --ds-text-size: 10px; --ds-button-color: var(--ds-text-color-muted); }\n.empty { margin: 0; padding: calc(var(--ds-unit) / 2); color: var(--ds-text-color-muted); }\n@media (forced-colors: active) { .row[data-current] { outline: 1px solid Highlight; outline-offset: -1px; } }\n\n/* ---- Tree: the same rows as the native .ds-sidebar tree in 1-root/row.css. ---- */\n.tree {\n  flex: 1 1 auto;\n  display: flex;\n  flex-direction: column;\n  min-width: 0;\n  min-height: 0;\n  overflow-y: auto;\n  overscroll-behavior: contain;\n  scrollbar-width: thin;\n}\n\n/* One square high, its contents on the lower sixteen as every row's; each level one square\n   further in, so a row's arrow stands under its parent's label. */\n.tree .item {\n  box-sizing: border-box;\n  display: flex;\n  align-items: flex-end;\n  height: var(--ds-row-height);\n  min-width: 0;\n  padding-inline: calc(var(--depth, 0) * var(--ds-unit)) var(--ds-row-padding, calc(4px * var(--ds-sf)));\n  border-radius: 0;\n  white-space: nowrap;\n  cursor: pointer;\n  user-select: none;\n  -webkit-tap-highlight-color: transparent;\n  outline: none;\n}\n.tree .item:hover:not([aria-disabled=\"true\"]) { background: var(--ds-row-fill-hover, var(--ds-fill)); }\n.tree .item:active:not([aria-disabled=\"true\"]) { background: var(--ds-row-fill-press, var(--ds-fill-hover)); }\n.tree .item[aria-selected=\"true\"] {\n  --ds-type-weight-default: var(--ds-row-current-weight, 500);\n  background: var(--ds-row-fill-current, var(--ds-fill-hover));\n  font-weight: var(--ds-row-current-weight, 500);\n}\n.tree .item:focus-visible { outline: 2px solid var(--ds-focus-ring); outline-offset: -2px; }\n.tree .item[aria-disabled=\"true\"] { cursor: default; opacity: 0.5; }\n\n/* The arrow and the icon each take a whole square, drawn on the row's sixteen (the square's\n   spare four above); a leaf keeps an empty one so labels line up. */\n.tree .disclosure, .tree .icon {\n  box-sizing: border-box;\n  display: inline-flex;\n  flex: 0 0 var(--ds-unit);\n  justify-content: center;\n  align-items: center;\n  width: var(--ds-unit);\n  height: var(--ds-unit);\n  padding-top: calc(var(--ds-unit) - var(--ds-control-height));\n}\n.tree .disclosure { color: var(--ds-text-color-muted); }\n.tree .disclosure ds-icon { transition: transform 120ms ease-out; }\n.tree .label {\n  flex: 1 1 auto;\n  min-width: 0;\n  padding-inline-start: calc(4px * var(--ds-sf));\n  overflow: hidden;\n  text-overflow: clip;\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .tree .disclosure ds-icon { transition: none; }\n}\n@media (forced-colors: active) {\n  .tree .item[aria-selected=\"true\"] { outline: 1px solid Highlight; outline-offset: -1px; }\n  .tree .item:focus-visible { outline-color: Highlight; }\n}\n\n/* Extend the native destination over the row without moving its words or chevron.\n   Independent disclosure and action controls stand above this hit area. */\n.row { position: relative; isolation: isolate; }\n.choice, .choice > :is(a, button) { position: static; }\n.choice > :is(a, button)::after { content: \"\"; position: absolute; inset: 0; cursor: pointer; }\n.row[data-disabled] .choice > button::after { cursor: default; }\n.row > .disclosure, .row > .action { position: relative; z-index: 1; }\n.row:has(.choice > :focus-visible) { outline: 2px solid var(--ds-focus-ring); outline-offset: -2px; }\n.row[data-drop=\"before\"] { box-shadow: inset 0 1px var(--ds-text-color); }\n.row[data-drop=\"after\"] { box-shadow: inset 0 -1px var(--ds-text-color); }\n\n/* Keep the disclosure press target one square while its icon sits on the sixteen. */\n.row > .disclosure > button::after { content: \"\"; position: absolute; inset: 0; }\n\n:host([disclosure-position=\"start\"]) .row { padding-inline-start: calc(4px * var(--ds-sf) + var(--depth) * var(--ds-unit)); }\n:host([disclosure-position=\"start\"]) .row:not(:has(.disclosure)) .choice { margin-inline-start: var(--ds-unit); }\n\n/* Narrow: eight squares wide, each row hugging its words, so the pointer's and the current\n   row's fill wrap the label (and its meta and disclosure) 4px either side instead of running\n   across the column. Rows still stand one square apart, half a square further in per level. */\n:host([narrow]) { width: calc(8 * var(--ds-unit)); }\n:host([narrow]) nav { display: flex; flex-direction: column; align-items: flex-start; }\n:host([narrow]) .row { width: fit-content; max-width: 100%; }\n:host([narrow]) .spacer { display: none; }\n";
 //#endregion
 //#region DS1/3-unit/ds-sidebar.ts
 var _Sidebar;
@@ -19314,7 +19654,7 @@ function drawSparkline(canvas, values, options) {
 }
 //#endregion
 //#region DS1/2-core/chart/chart.css?inline
-var chart_default = " :host { --ds-chart-ink: var(--text-color, #1e1e1e); --ds-chart-muted: var(--ds-title-color, #6e6e6e); --ds-chart-faint: var(--slate-light, #e6e6e6); --ds-chart-up: var(--apple-green, #99ff73); --ds-chart-down: var(--tuned-red, #ff5f5f); --ds-chart-live: var(--ds-chart-up); --ds-chart-line: var(--ds-chart-faint); --ds-chart-fill: var(--ds-chart-faint); --ds-chart-small: calc(var(--ds-chart-unit, 20px) / 2); font-family: var(--ds-chart-font, var(--typeface-regular, sans-serif)); }\n:host([hidden]) { display: none !important; }\n* { box-sizing: border-box; }\n:host([data-chart-kind=\"line\"]) {\n  position: relative;\n  display: block;\n  width: 100%;\n}\n\n:host([data-chart-kind=\"line\"]) canvas {\n  display: block;\n  touch-action: pan-y;\n  cursor: crosshair;\n}\n\n.live-dot {\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 5px;\n  height: 5px;\n  background: var(--ds-chart-live);\n  pointer-events: none;\n  animation: blink 1s steps(2, jump-none) infinite;\n}\n\n\n:host([data-chart-kind=\"spark\"]) {\n  display: block;\n  height: var(--ds-chart-unit);\n}\n\n:host([data-chart-kind=\"spark\"]) canvas {\n  display: block;\n  border-top-color: var(--ds-chart-faint);\n}\n\n:host([data-chart-kind=\"spark\"]) canvas.up {\n  color: var(--ds-chart-up);\n}\n\n:host([data-chart-kind=\"spark\"]) canvas.down {\n  color: var(--ds-chart-down);\n}\n\n\n:host([data-chart-kind=\"ratio\"]) {\n  display: flex;\n  align-items: center;\n  gap: 1px;\n  height: var(--ds-chart-unit);\n}\n\n.ratio-buy,\n.ratio-sell {\n  height: calc(var(--ds-chart-unit) / 2);\n}\n\n.ratio-buy {\n  background: var(--ds-chart-up);\n}\n\n.ratio-sell {\n  background: var(--ds-chart-down);\n}\n\n\n:host([data-chart-kind=\"range\"]) {\n  position: relative;\n  display: block;\n  height: var(--ds-chart-unit);\n}\n\n.range-track {\n  position: absolute;\n  top: calc(var(--ds-chart-unit) / 2);\n  left: 0;\n  right: 0;\n  height: 1px;\n  background: var(--ds-chart-line);\n}\n\n.range-fill {\n  position: absolute;\n  top: calc(var(--ds-chart-unit) / 4);\n  left: 0;\n  height: calc(var(--ds-chart-unit) / 2);\n  background: var(--ds-chart-fill);\n}\n\n.range-tick {\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 1px;\n  height: var(--ds-chart-unit);\n  background: var(--ds-chart-muted);\n}\n\n.range-dot {\n  position: absolute;\n  top: calc(var(--ds-chart-unit) / 2 - 2px);\n  left: 0;\n  width: 5px;\n  height: 5px;\n  background: var(--ds-chart-ink);\n}\n\n:host([data-chart-kind=\"bars\"]) {\n  display: block;\n}\n\n.bars {\n  display: flex;\n  align-items: flex-start;\n}\n\n.bar-columns {\n  position: relative;\n  display: flex;\n}\n\n:host([fill]) .bar-columns {\n  flex: 1 1 auto;\n  min-width: 0;\n}\n\n.bar-cell {\n  display: grid;\n  grid-template-rows: auto;\n  grid-auto-rows: var(--ds-chart-unit);\n  align-items: center;\n  width: calc(var(--span) * var(--ds-chart-unit));\n}\n\n:host([fill]) .bar-cell {\n  flex: 1 1 0;\n  width: auto;\n  min-width: 0;\n}\n\n.bar-area {\n  position: relative;\n  display: flex;\n  align-items: flex-end;\n  box-shadow: inset 0 -1px 0 var(--ds-chart-line);\n}\n\n/* A scale's lines across the bars, one a square, under them. */\n.bar-guides {\n  position: absolute;\n  inset-inline: 0;\n  top: 0;\n  pointer-events: none;\n  background: repeating-linear-gradient(to top, transparent 0 calc(var(--ds-chart-unit) - 1px), var(--ds-chart-line) calc(var(--ds-chart-unit) - 1px) var(--ds-chart-unit));\n}\n\n.bar-fill {\n  position: relative;\n  width: calc(var(--span) * var(--ds-chart-unit) - 1px);\n}\n\n:host([fill]) .bar-fill,\n:host([fill]) .bar-compare {\n  width: calc(100% - 1px);\n}\n\n.bar-fill.up {\n  background: var(--ds-chart-up);\n}\n\n.bar-fill.down {\n  background: var(--ds-chart-down);\n}\n\n.bar-fill.ink {\n  background: var(--ds-chart-faint);\n}\n\n.bar-compare {\n  position: absolute;\n  left: 0;\n  bottom: 0;\n  z-index: 1;\n  width: calc(var(--span) * var(--ds-chart-unit) - 1px);\n  box-shadow: inset 0 0 0 1px var(--ds-chart-ink);\n}\n\n/* A bar's value just over it, in the small type, centred on the bar and free to run past it. */\n.bar-value {\n  position: absolute;\n  left: 0;\n  width: calc(100% - 1px);\n  display: flex;\n  justify-content: center;\n  font-size: var(--ds-chart-small);\n  line-height: 1;\n  white-space: nowrap;\n  color: var(--ds-chart-ink);\n  font-variant-numeric: tabular-nums;\n}\n\n/* The scale at the end: two squares, each label just above its line, as the line chart's. */\n.bar-axis {\n  position: relative;\n  flex: none;\n  width: calc(2 * var(--ds-chart-unit));\n}\n\n.bar-tick {\n  position: absolute;\n  right: 0;\n  margin-bottom: 2px;\n  font-size: var(--ds-chart-small);\n  line-height: 1;\n  white-space: nowrap;\n  color: var(--ds-chart-muted);\n  font-variant-numeric: tabular-nums;\n}\n\n.bar-caption,\n.bar-label {\n  font-size: var(--ds-chart-small);\n  white-space: nowrap;\n  overflow: hidden;\n}\n\n.bar-label {\n  color: var(--ds-chart-muted);\n}\n\n.bar-label {\n  color: var(--ds-chart-muted);\n}\n\n\n@keyframes blink { from { opacity: 1; } to { opacity: .25; } }\n@media (prefers-reduced-motion: reduce) { .live-dot { animation: none; } }\n";
+var chart_default = " :host { --ds-chart-ink: var(--text-color, #1e1e1e); --ds-chart-muted: var(--ds-title-color, #6e6e6e); --ds-chart-faint: var(--slate-light, #e6e6e6); --ds-chart-up: var(--apple-green, #99ff73); --ds-chart-down: var(--tuned-red, #ff5f5f); --ds-chart-live: var(--ds-chart-up); --ds-chart-line: var(--ds-chart-faint); --ds-chart-fill: var(--ds-chart-faint); --ds-chart-small: calc(var(--ds-chart-unit, 20px) / 2); font-family: \"Inter Arrows\", var(--ds-chart-font, var(--typeface-regular, sans-serif)); }\n:host([hidden]) { display: none !important; }\n* { box-sizing: border-box; }\n:host([data-chart-kind=\"line\"]) {\n  position: relative;\n  display: block;\n  width: 100%;\n}\n\n:host([data-chart-kind=\"line\"]) canvas {\n  display: block;\n  touch-action: pan-y;\n  cursor: crosshair;\n}\n\n.live-dot {\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 5px;\n  height: 5px;\n  background: var(--ds-chart-live);\n  pointer-events: none;\n  animation: blink 1s steps(2, jump-none) infinite;\n}\n\n\n:host([data-chart-kind=\"spark\"]) {\n  display: block;\n  height: var(--ds-chart-unit);\n}\n\n:host([data-chart-kind=\"spark\"]) canvas {\n  display: block;\n  border-top-color: var(--ds-chart-faint);\n}\n\n:host([data-chart-kind=\"spark\"]) canvas.up {\n  color: var(--ds-chart-up);\n}\n\n:host([data-chart-kind=\"spark\"]) canvas.down {\n  color: var(--ds-chart-down);\n}\n\n\n:host([data-chart-kind=\"ratio\"]) {\n  display: flex;\n  align-items: center;\n  gap: 1px;\n  height: var(--ds-chart-unit);\n}\n\n.ratio-buy,\n.ratio-sell {\n  height: calc(var(--ds-chart-unit) / 2);\n}\n\n.ratio-buy {\n  background: var(--ds-chart-up);\n}\n\n.ratio-sell {\n  background: var(--ds-chart-down);\n}\n\n\n:host([data-chart-kind=\"range\"]) {\n  position: relative;\n  display: block;\n  height: var(--ds-chart-unit);\n}\n\n.range-track {\n  position: absolute;\n  top: calc(var(--ds-chart-unit) / 2);\n  left: 0;\n  right: 0;\n  height: 1px;\n  background: var(--ds-chart-line);\n}\n\n.range-fill {\n  position: absolute;\n  top: calc(var(--ds-chart-unit) / 4);\n  left: 0;\n  height: calc(var(--ds-chart-unit) / 2);\n  background: var(--ds-chart-fill);\n}\n\n.range-tick {\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 1px;\n  height: var(--ds-chart-unit);\n  background: var(--ds-chart-muted);\n}\n\n.range-dot {\n  position: absolute;\n  top: calc(var(--ds-chart-unit) / 2 - 2px);\n  left: 0;\n  width: 5px;\n  height: 5px;\n  background: var(--ds-chart-ink);\n}\n\n:host([data-chart-kind=\"bars\"]) {\n  display: block;\n}\n\n.bars {\n  display: flex;\n  align-items: flex-start;\n}\n\n.bar-columns {\n  position: relative;\n  display: flex;\n}\n\n:host([fill]) .bar-columns {\n  flex: 1 1 auto;\n  min-width: 0;\n}\n\n.bar-cell {\n  display: grid;\n  grid-template-rows: auto;\n  grid-auto-rows: var(--ds-chart-unit);\n  align-items: center;\n  width: calc(var(--span) * var(--ds-chart-unit));\n}\n\n:host([fill]) .bar-cell {\n  flex: 1 1 0;\n  width: auto;\n  min-width: 0;\n}\n\n.bar-area {\n  position: relative;\n  display: flex;\n  align-items: flex-end;\n  box-shadow: inset 0 -1px 0 var(--ds-chart-line);\n}\n\n/* A scale's lines across the bars, one a square, under them. */\n.bar-guides {\n  position: absolute;\n  inset-inline: 0;\n  top: 0;\n  pointer-events: none;\n  background: repeating-linear-gradient(to top, transparent 0 calc(var(--ds-chart-unit) - 1px), var(--ds-chart-line) calc(var(--ds-chart-unit) - 1px) var(--ds-chart-unit));\n}\n\n.bar-fill {\n  position: relative;\n  width: calc(var(--span) * var(--ds-chart-unit) - 1px);\n}\n\n:host([fill]) .bar-fill,\n:host([fill]) .bar-compare {\n  width: calc(100% - 1px);\n}\n\n.bar-fill.up {\n  background: var(--ds-chart-up);\n}\n\n.bar-fill.down {\n  background: var(--ds-chart-down);\n}\n\n.bar-fill.ink {\n  background: var(--ds-chart-faint);\n}\n\n.bar-compare {\n  position: absolute;\n  left: 0;\n  bottom: 0;\n  z-index: 1;\n  width: calc(var(--span) * var(--ds-chart-unit) - 1px);\n  box-shadow: inset 0 0 0 1px var(--ds-chart-ink);\n}\n\n/* A bar's value just over it, in the small type, centred on the bar and free to run past it. */\n.bar-value {\n  position: absolute;\n  left: 0;\n  width: calc(100% - 1px);\n  display: flex;\n  justify-content: center;\n  font-size: var(--ds-chart-small);\n  line-height: 1;\n  white-space: nowrap;\n  color: var(--ds-chart-ink);\n  font-variant-numeric: tabular-nums;\n}\n\n/* The scale at the end: two squares, each label just above its line, as the line chart's. */\n.bar-axis {\n  position: relative;\n  flex: none;\n  width: calc(2 * var(--ds-chart-unit));\n}\n\n.bar-tick {\n  position: absolute;\n  right: 0;\n  margin-bottom: 2px;\n  font-size: var(--ds-chart-small);\n  line-height: 1;\n  white-space: nowrap;\n  color: var(--ds-chart-muted);\n  font-variant-numeric: tabular-nums;\n}\n\n.bar-caption,\n.bar-label {\n  font-size: var(--ds-chart-small);\n  white-space: nowrap;\n  overflow: hidden;\n}\n\n.bar-label {\n  color: var(--ds-chart-muted);\n}\n\n.bar-label {\n  color: var(--ds-chart-muted);\n}\n\n\n@keyframes blink { from { opacity: 1; } to { opacity: .25; } }\n@media (prefers-reduced-motion: reduce) { .live-dot { animation: none; } }\n";
 //#endregion
 //#region DS1/2-core/ds-chart.ts
 var _ChartElement;
@@ -19723,7 +20063,7 @@ function isPublicComponent(name) {
 }
 //#endregion
 //#region DS1/2-core/styles/ds-image.css?inline
-var ds_image_default = "/* Shape is a surface preference. Keep these base lengths unscaled: each\n * component resolves them with its own --ds-sf in component-metrics.css. */\n[data-ds-shape=\"square\"],\n:host([data-ds-shape=\"square\"]) {\n  --ds-corner-size: 0px;\n  --ds-corner-shape: round;\n  --ds-button-inset: 0.5px;\n}\n\n[data-ds-shape=\"rounded\"],\n:host([data-ds-shape=\"rounded\"]) {\n  --ds-corner-size: 4px;\n  --ds-corner-shape: round;\n  --ds-button-inset: 2.5px;\n}\n\n[data-ds-shape=\"circular\"],\n:host([data-ds-shape=\"circular\"]) {\n  --ds-corner-size: 999px;\n  --ds-corner-shape: round;\n  --ds-button-inset: 5px;\n}\n\n/* A squircle needs twice an arc's radius for the same apparent corner.\n * Circular controls keep true semicircles even in a squircle browser. */\n@supports (corner-shape: squircle) {\n  [data-ds-shape=\"rounded\"],\n  :host([data-ds-shape=\"rounded\"]) {\n    --ds-corner-size: 8px;\n    --ds-corner-shape: squircle;\n  }\n}\n/* Resolve dimensions where a component is drawn. Inherited calc() values have\n * already used their ancestor's scale. Base tokens stay unscaled and inherit;\n * resolved tokens can still be overridden directly on a component.\n * data-ds-surface gives ordinary layout elements the same scaled measures.\n */\n:root,\n:host,\n:where([data-ds-surface]) {\n  --ds-unit: calc(var(--ds-1, 20px) * var(--ds-sf, 1));\n  --ds-control-height: calc(var(--ds-control-size, var(--ds-08, 16px)) * var(--ds-sf, 1));\n  --ds-row-height: calc(var(--ds-row-size, var(--ds-1, 20px)) * var(--ds-sf, 1));\n  --ds-type-size-default: calc(var(--ds-text-size, 14px) * var(--ds-sf, 1));\n  --ds-type-size-small: calc(var(--ds-small-text-size, 10px) * var(--ds-sf, 1));\n  --ds-type-size-heading: calc(var(--ds-heading-text-size, 13px) * var(--ds-sf, 1));\n  --ds-type-size-display: calc(var(--ds-display-text-size, 20px) * var(--ds-sf, 1));\n  --ds-type-lineheight-default: calc(var(--ds-text-leading, 16px) * var(--ds-sf, 1));\n  --ds-type-letterspacing-default: calc(var(--ds-text-tracking, -0.3px) * var(--ds-sf, 1));\n  --ds-radius: calc(var(--ds-corner-size, 4px) * var(--ds-sf, 1));\n  --ds-radius-card: calc(var(--ds-card-corner-size, 4px) * var(--ds-sf, 1));\n}\n:host { display: block; width: 100%; max-width: 100%; min-width: 0; }\n:host([hidden]) { display: none !important; }\nfigure { margin: 0; }\n/* A picture's corners; a container whose edges cut it (a card's bleed) squares the end and the foot. */\n.media { overflow: hidden; border-radius: var(--ds-radius); border-start-end-radius: var(--ds-image-end-radius, var(--ds-radius)); border-end-end-radius: var(--ds-image-end-radius, var(--ds-radius)); border-end-start-radius: var(--ds-image-foot-radius, var(--ds-radius)); background: var(--ds-image-background, var(--ds-fill)); }\nimg { display: block; width: 100%; max-width: 100%; }\nfigcaption {\n  margin-top: calc(var(--ds-unit) / 2);\n  color: var(--ds-text-color-muted);\n  font-family: var(--ds-typeface-regular);\n  font-feature-settings: var(--ds-font-features);\n  font-size: var(--ds-type-size-default);\n  line-height: var(--ds-row-height);\n}\n";
+var ds_image_default = "/* Shape is a surface preference. Keep these base lengths unscaled: each\n * component resolves them with its own --ds-sf in component-metrics.css. */\n[data-ds-shape=\"square\"],\n:host([data-ds-shape=\"square\"]) {\n  --ds-corner-size: 0px;\n  --ds-corner-shape: round;\n  --ds-button-inset: 0.5px;\n}\n\n[data-ds-shape=\"rounded\"],\n:host([data-ds-shape=\"rounded\"]) {\n  --ds-corner-size: 4px;\n  --ds-corner-shape: round;\n  --ds-button-inset: 2.5px;\n}\n\n[data-ds-shape=\"circular\"],\n:host([data-ds-shape=\"circular\"]) {\n  --ds-corner-size: 999px;\n  --ds-corner-shape: round;\n  --ds-button-inset: 5px;\n}\n\n/* A squircle needs twice an arc's radius for the same apparent corner.\n * Circular controls keep true semicircles even in a squircle browser. */\n@supports (corner-shape: squircle) {\n  [data-ds-shape=\"rounded\"],\n  :host([data-ds-shape=\"rounded\"]) {\n    --ds-corner-size: 8px;\n    --ds-corner-shape: squircle;\n  }\n}\n/* Resolve dimensions where a component is drawn. Inherited calc() values have\n * already used their ancestor's scale. Base tokens stay unscaled and inherit;\n * resolved tokens can still be overridden directly on a component.\n * data-ds-surface gives ordinary layout elements the same scaled measures.\n */\n:root,\n:host,\n:where([data-ds-surface]) {\n  --ds-unit: calc(var(--ds-1, 20px) * var(--ds-sf, 1));\n  --ds-control-height: calc(var(--ds-control-size, var(--ds-08, 16px)) * var(--ds-sf, 1));\n  --ds-row-height: calc(var(--ds-row-size, var(--ds-1, 20px)) * var(--ds-sf, 1));\n  --ds-type-size-default: calc(var(--ds-text-size, 14px) * var(--ds-sf, 1));\n  --ds-type-size-small: calc(var(--ds-small-text-size, 10px) * var(--ds-sf, 1));\n  --ds-type-size-heading: calc(var(--ds-heading-text-size, 13px) * var(--ds-sf, 1));\n  --ds-type-size-display: calc(var(--ds-display-text-size, 20px) * var(--ds-sf, 1));\n  --ds-type-lineheight-default: calc(var(--ds-text-leading, 16px) * var(--ds-sf, 1));\n  --ds-type-letterspacing-default: calc(var(--ds-text-tracking, -0.3px) * var(--ds-sf, 1));\n  --ds-radius: calc(var(--ds-corner-size, 4px) * var(--ds-sf, 1));\n  --ds-radius-card: calc(var(--ds-card-corner-size, 4px) * var(--ds-sf, 1));\n}\n:host { display: block; width: 100%; max-width: 100%; min-width: 0; }\n:host([hidden]) { display: none !important; }\nfigure { margin: 0; }\n/* A picture's corners; a container whose edges cut it (a card's bleed) squares the end and the foot. */\n.media { overflow: hidden; border-radius: var(--ds-radius); border-start-end-radius: var(--ds-image-end-radius, var(--ds-radius)); border-end-end-radius: var(--ds-image-end-radius, var(--ds-radius)); border-end-start-radius: var(--ds-image-foot-radius, var(--ds-radius)); background: var(--ds-image-background, var(--ds-fill)); }\nimg { display: block; width: 100%; max-width: 100%; }\nfigcaption {\n  margin-top: calc(var(--ds-unit) / 2);\n  color: var(--ds-text-color-muted);\n  font-family: \"Inter Arrows\", var(--ds-typeface-regular);\n  font-feature-settings: var(--ds-font-features);\n  font-size: var(--ds-type-size-default);\n  line-height: var(--ds-row-height);\n}\n";
 //#endregion
 //#region DS1/2-core/ds-image.ts
 var _Image;