@0001-labs/design-system-1 0.3.0-alpha.19 → 0.3.0-alpha.21

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

@@ -6644,7 +6644,7 @@ _ColorInput.styles = [r$3(component_metrics_default), i$4`
 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\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/*\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, a square below the words\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  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  padding: var(--ds-card-padding) var(--ds-card-padding) 0;\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.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.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;\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;\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.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: var(--ds-unit);\n}\n\n.ds-card__media--center {\n  justify-content: center;\n  margin-inline: calc(-1 * var(--ds-card-padding));\n}\n\n.ds-card__media--bleed {\n  margin-inline-end: calc(-1 * var(--ds-card-padding));\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@media (hover: hover) and (prefers-reduced-motion: no-preference) {\n  a.ds-card > .ds-card__media,\n  .ds-card[data-interactive] > .ds-card__media {\n    transition: transform 240ms cubic-bezier(0.23, 1, 0.32, 1);\n  }\n\n  a.ds-card:hover > .ds-card__media,\n  .ds-card[data-interactive]:hover > .ds-card__media {\n    transform: translateY(calc(-0.25 * var(--ds-unit)));\n  }\n}\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\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/*\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, a square below the words\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  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-padding) + var(--ds-bento-inset-top, 0px))\n    calc(var(--ds-card-padding) + var(--ds-bento-inset-end, 0px))\n    var(--ds-bento-inset-bottom, 0px)\n    calc(var(--ds-card-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.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.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;\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;\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.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: var(--ds-unit);\n}\n\n.ds-card__media--center {\n  justify-content: center;\n  margin-inline: calc(-1 * var(--ds-card-padding));\n}\n\n.ds-card__media--bleed {\n  margin-inline-end: calc(-1 * var(--ds-card-padding));\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@media (hover: hover) and (prefers-reduced-motion: no-preference) {\n  a.ds-card > .ds-card__media,\n  .ds-card[data-interactive] > .ds-card__media {\n    transition: transform 240ms cubic-bezier(0.23, 1, 0.32, 1);\n  }\n\n  a.ds-card:hover > .ds-card__media,\n  .ds-card[data-interactive]:hover > .ds-card__media {\n    transform: translateY(calc(-0.25 * var(--ds-unit)));\n  }\n}\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";
@@ -8800,7 +8800,7 @@ function ensureSmartAppBanner(options) {
 	const meta = document.createElement("meta");
 	meta.name = "apple-itunes-app";
 	meta.content = [`app-id=${options.appId}`, options.open ? `app-argument=${options.open}` : ""].filter(Boolean).join(", ");
-	document.head.append(meta);
+	document.head.appendChild(meta);
 }
 /**
 * Opens the app: the deep link first, then the App Store when the page is
@@ -8828,7 +8828,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\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-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, as an Ezo item's are. 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\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.ds-table thead th,\n.ds-table th[scope=\"rowgroup\"] {\n  color: var(--ds-title-color, light-dark(#797979, #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(#797979, #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  text-overflow: ellipsis;\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__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(#797979, #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: 2;\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: 3;\n}\n.ds-table[data-sheet] .ds-table__letters td {\n  color: var(--ds-title-color, light-dark(#797979, #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 * 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\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.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 * 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, on its own square, 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: flex-start;\n  width: 100%;\n  max-width: var(--ds-empty-measure, calc(16 * var(--ds-unit)));\n  margin: 0;\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__icon {\n  display: flex;\n  align-items: center;\n  height: var(--ds-unit);\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  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: 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--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 * 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 square mark; 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  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: ellipsis;\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: ellipsis;\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 * 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 * in twelve squares (as a page's navigation column is, so the links stand\n * over the work), the navigation two squares after it, the actions at the end. 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: flex;\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  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__nav {\n  flex: 1 1 auto;\n  flex-wrap: wrap;\n  row-gap: 0;\n}\n\n.ds-header__actions {\n  flex: 0 0 auto;\n  justify-content: flex-end;\n  gap: calc(var(--ds-unit) / 2);\n  margin-inline-start: auto;\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  margin-inline-start: auto;\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 * 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, two squares apart; then, two squares\n * below, the legal line at the start and the preferences (language and theme,\n * as `ds-cycle` or native buttons) at the end. Every line is one square, the\n * column headings in the title grey, the links in the text's ink with a faint\n * hairline under the pointer. A hairline runs along its top. Columns that do\n * not fit beside the brand go below it, and on a narrow screen everything\n * stands in one column. The `ds-footer` element draws the same 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__heading           the column's heading, one line in the title grey\n *   ds-footer__links             the links, a <ul> with one link 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__preferences       in it, the language and theme controls, at its end\n *\n * Tokens: `--ds-footer-line` (the hairline along the top).\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(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 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: ellipsis;\n  text-underline-offset: calc(2px * var(--ds-sf));\n  vertical-align: top;\n  white-space: nowrap;\n}\n\n.ds-footer__links a:hover {\n  text-decoration-color: color-mix(in srgb, currentColor 40%, transparent);\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__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   preferences at the end; on a narrow screen the preferences go first. */\n.ds-footer__base {\n  display: flex;\n  flex: 0 0 100%;\n  flex-wrap: wrap;\n  align-items: flex-start;\n  gap: var(--ds-unit) calc(2 * var(--ds-unit));\n  min-width: 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/*\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: ellipsis;\n  text-underline-offset: calc(2px * var(--ds-sf));\n  white-space: nowrap;\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 * 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/* 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 * 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, a square below the words\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  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  padding: var(--ds-card-padding) var(--ds-card-padding) 0;\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.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.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;\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;\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.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: var(--ds-unit);\n}\n\n.ds-card__media--center {\n  justify-content: center;\n  margin-inline: calc(-1 * var(--ds-card-padding));\n}\n\n.ds-card__media--bleed {\n  margin-inline-end: calc(-1 * var(--ds-card-padding));\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@media (hover: hover) and (prefers-reduced-motion: no-preference) {\n  a.ds-card > .ds-card__media,\n  .ds-card[data-interactive] > .ds-card__media {\n    transition: transform 240ms cubic-bezier(0.23, 1, 0.32, 1);\n  }\n\n  a.ds-card:hover > .ds-card__media,\n  .ds-card[data-interactive]:hover > .ds-card__media {\n    transform: translateY(calc(-0.25 * var(--ds-unit)));\n  }\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 *\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.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: 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: nowrap;\n  text-overflow: ellipsis;\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 > li {\n  min-width: 0;\n  margin: 0;\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: ellipsis;\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 * 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 *   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 short with an ellipsis\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/* 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: ellipsis;\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 *\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\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);\n  --ds-context-refused: var(--ds-tuned-red);\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));\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)) !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);\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)) 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/*\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>`: one square on the field's ground with a 1px\n * line. 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: middle;\n  width: var(--ds-row-height);\n  height: var(--ds-row-height);\n  margin: 0;\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: calc(0.8 * var(--ds-row-height));\n  height: calc(0.8 * var(--ds-row-height));\n  mask: var(--ds-checkbox-mark) center / contain no-repeat;\n}\n\n.ds-checkbox:indeterminate::before {\n  width: calc(var(--ds-row-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-row-height) / 2);\n  height: calc(var(--ds-row-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, its thumb\n * one control high less a 2px inset, travelling one control height.\n * `.ds-switch--rounded` is the round variant with a white thumb.\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));\n  height: var(--ds-choice-unit);\n  margin: 0;\n  padding: calc(2px * var(--ds-sf));\n  border: 0;\n  border-radius: var(--ds-radius);\n  background: var(--ds-fill);\n  color: var(--ds-text-color-muted);\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: var(--ds-radius);\n  background: currentColor;\n  transform: translateX(0);\n  transition: transform 140ms ease;\n}\n\n.ds-switch[aria-checked=\"true\"] {\n  background: var(--ds-accent-color);\n  color: var(--ds-button-text-color-on-accent);\n}\n\n.ds-switch[aria-checked=\"true\"]::after {\n  transform: translateX(var(--ds-choice-unit));\n}\n\n.ds-switch--rounded {\n  border-radius: var(--ds-choice-unit);\n  color: var(--ds-white);\n}\n\n.ds-switch--rounded::after {\n  border-radius: 50%;\n  background: var(--ds-white);\n}\n\n.ds-switch--rounded[aria-checked=\"true\"] {\n  background: var(--ds-switch-track-on);\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.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: ellipsis;\n  cursor: default;\n  user-select: none;\n  outline: none;\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 and cut short with an ellipsis, never a\n * button. 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: ellipsis;\n  white-space: nowrap;\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-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\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-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, as an Ezo item's are. 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\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.ds-table thead th,\n.ds-table th[scope=\"rowgroup\"] {\n  color: var(--ds-title-color, light-dark(#797979, #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(#797979, #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  text-overflow: ellipsis;\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__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(#797979, #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: 2;\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: 3;\n}\n.ds-table[data-sheet] .ds-table__letters td {\n  color: var(--ds-title-color, light-dark(#797979, #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 * 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\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.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 * 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, on its own square, 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: flex-start;\n  width: 100%;\n  max-width: var(--ds-empty-measure, calc(16 * var(--ds-unit)));\n  margin: 0;\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__icon {\n  display: flex;\n  align-items: center;\n  height: var(--ds-unit);\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  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: 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--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 * 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 square mark; 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  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: ellipsis;\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: ellipsis;\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 * 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 * in twelve squares (as a page's navigation column is, so the links stand\n * over the work), the navigation two squares after it, the actions at the end. 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: flex;\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  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__nav {\n  flex: 1 1 auto;\n  flex-wrap: wrap;\n  row-gap: 0;\n}\n\n.ds-header__actions {\n  flex: 0 0 auto;\n  justify-content: flex-end;\n  gap: calc(var(--ds-unit) / 2);\n  margin-inline-start: auto;\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  margin-inline-start: auto;\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 * 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, two squares apart; then, two squares\n * below, the legal line at the start and the preferences (language and theme,\n * as `ds-cycle` or native buttons) at the end. Every line is one square, the\n * column headings in the title grey, the links in the text's ink with a faint\n * hairline under the pointer. A hairline runs along its top. Columns that do\n * not fit beside the brand go below it, and on a narrow screen everything\n * stands in one column. The `ds-footer` element draws the same 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__heading           the column's heading, one line in the title grey\n *   ds-footer__links             the links, a <ul> with one link 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__preferences       in it, the language and theme controls, at its end\n *\n * Tokens: `--ds-footer-line` (the hairline along the top).\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(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 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: ellipsis;\n  text-underline-offset: calc(2px * var(--ds-sf));\n  vertical-align: top;\n  white-space: nowrap;\n}\n\n.ds-footer__links a:hover {\n  text-decoration-color: color-mix(in srgb, currentColor 40%, transparent);\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__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   preferences at the end; on a narrow screen the preferences go first. */\n.ds-footer__base {\n  display: flex;\n  flex: 0 0 100%;\n  flex-wrap: wrap;\n  align-items: flex-start;\n  gap: var(--ds-unit) calc(2 * var(--ds-unit));\n  min-width: 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/*\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: ellipsis;\n  text-underline-offset: calc(2px * var(--ds-sf));\n  white-space: nowrap;\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 * 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 * Tokens: `--ds-bento-gap` (half a square), `--ds-bento-columns`,\n * `--ds-bento-row`, and on a tile `--ds-bento-span`, `--ds-bento-rows`.\n */\n\n.ds-bento {\n  --ds-bento-gap: calc(var(--ds-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-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-unit) / 4);\n  /* Exactly its squares wide: each column one square. */\n  width: calc(var(--ds-bento-columns, 48) * var(--ds-unit));\n  max-width: none;\n  grid-template-columns: repeat(var(--ds-bento-columns, 48), var(--ds-unit));\n  grid-auto-rows: var(--ds-unit);\n  grid-auto-flow: row;\n  gap: 0;\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-unit) + var(--ds-bento-inset-top))\n    calc(var(--ds-unit) + var(--ds-bento-inset-end))\n    calc(var(--ds-unit) + var(--ds-bento-inset-bottom))\n    calc(var(--ds-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/* 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 * 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, a square below the words\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  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-padding) + var(--ds-bento-inset-top, 0px))\n    calc(var(--ds-card-padding) + var(--ds-bento-inset-end, 0px))\n    var(--ds-bento-inset-bottom, 0px)\n    calc(var(--ds-card-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.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.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;\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;\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.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: var(--ds-unit);\n}\n\n.ds-card__media--center {\n  justify-content: center;\n  margin-inline: calc(-1 * var(--ds-card-padding));\n}\n\n.ds-card__media--bleed {\n  margin-inline-end: calc(-1 * var(--ds-card-padding));\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@media (hover: hover) and (prefers-reduced-motion: no-preference) {\n  a.ds-card > .ds-card__media,\n  .ds-card[data-interactive] > .ds-card__media {\n    transition: transform 240ms cubic-bezier(0.23, 1, 0.32, 1);\n  }\n\n  a.ds-card:hover > .ds-card__media,\n  .ds-card[data-interactive]:hover > .ds-card__media {\n    transform: translateY(calc(-0.25 * var(--ds-unit)));\n  }\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 *\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.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: 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: nowrap;\n  text-overflow: ellipsis;\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 > li {\n  min-width: 0;\n  margin: 0;\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: ellipsis;\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 * 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 *   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 short with an ellipsis\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/* 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: ellipsis;\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 *\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\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);\n  --ds-context-refused: var(--ds-tuned-red);\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));\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)) !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);\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)) 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/*\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>`: one square on the field's ground with a 1px\n * line. 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: middle;\n  width: var(--ds-row-height);\n  height: var(--ds-row-height);\n  margin: 0;\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: calc(0.8 * var(--ds-row-height));\n  height: calc(0.8 * var(--ds-row-height));\n  mask: var(--ds-checkbox-mark) center / contain no-repeat;\n}\n\n.ds-checkbox:indeterminate::before {\n  width: calc(var(--ds-row-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-row-height) / 2);\n  height: calc(var(--ds-row-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, its thumb\n * one control high less a 2px inset, travelling one control height.\n * `.ds-switch--rounded` is the round variant with a white thumb.\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));\n  height: var(--ds-choice-unit);\n  margin: 0;\n  padding: calc(2px * var(--ds-sf));\n  border: 0;\n  border-radius: var(--ds-radius);\n  background: var(--ds-fill);\n  color: var(--ds-text-color-muted);\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: var(--ds-radius);\n  background: currentColor;\n  transform: translateX(0);\n  transition: transform 140ms ease;\n}\n\n.ds-switch[aria-checked=\"true\"] {\n  background: var(--ds-accent-color);\n  color: var(--ds-button-text-color-on-accent);\n}\n\n.ds-switch[aria-checked=\"true\"]::after {\n  transform: translateX(var(--ds-choice-unit));\n}\n\n.ds-switch--rounded {\n  border-radius: var(--ds-choice-unit);\n  color: var(--ds-white);\n}\n\n.ds-switch--rounded::after {\n  border-radius: 50%;\n  background: var(--ds-white);\n}\n\n.ds-switch--rounded[aria-checked=\"true\"] {\n  background: var(--ds-switch-track-on);\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.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: ellipsis;\n  cursor: default;\n  user-select: none;\n  outline: none;\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 and cut short with an ellipsis, never a\n * button. 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: ellipsis;\n  white-space: nowrap;\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-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";
 //#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";
@@ -10741,7 +10741,7 @@ var CalendarBase = class extends i$2 {
 		this.relabel = () => this.requestUpdate();
 		this.value = "";
 		this.selectable = false;
-		this.range = false;
+		this.endPending = false;
 		this.literal = false;
 		this.events = [];
 	}
@@ -10758,6 +10758,7 @@ var CalendarBase = class extends i$2 {
 	willUpdate(changed) {
 		super.willUpdate(changed);
 		if (changed.has("value") && this.value && !readRange(this.value).start) this.value = "";
+		if (changed.has("value") && this.value !== this.pressedValue) this.endPending = false;
 	}
 	/** Shared words, filled in: `words("Week {week}", { week: 42 })`. */
 	words(key, params) {
@@ -10788,21 +10789,18 @@ var CalendarBase = class extends i$2 {
 	/** The chosen days: the first and the last of a range, or the one day twice. */
 	get chosen() {
 		const { start, end } = readRange(this.value);
-		return this.range ? {
-			start,
-			end
-		} : {
+		return {
 			start,
-			end: start
+			end: end || start
 		};
 	}
 	/** How a day stands to the selection: an end of it, inside it, or neither; with the end still to come, the pointer previews it. */
 	selection(day) {
 		let { start, end } = this.chosen;
-		if (this.range && start && !end && this.hoverDay) end = this.hoverDay;
+		if (this.endPending && start && this.hoverDay) end = this.hoverDay;
 		if (end && end < start) [start, end] = [end, start];
 		const selected = day === start || day === end;
-		const spans = Boolean(this.range && start && end && start !== end);
+		const spans = Boolean(start && end && start !== end);
 		return {
 			selected,
 			inside: spans && day > start && day < end,
@@ -10834,7 +10832,10 @@ var CalendarBase = class extends i$2 {
 	}
 	/**
 	* A person pressed a day: `day-press` fires, and unless it is cancelled a
-	* selectable calendar takes the day and fires `change`.
+	* selectable calendar takes the day and fires `change`. There is one way to
+	* pick: the first press chooses a day, which is the value; the next ends a
+	* range from it, before or after (the same day again keeps the one day);
+	* the press after that starts again.
 	*/
 	press(day) {
 		const pressed = new CustomEvent("day-press", {
@@ -10848,15 +10849,15 @@ var CalendarBase = class extends i$2 {
 		});
 		if (!this.dispatchEvent(pressed) || !this.selectable || !this.allowed(day)) return;
 		const previous = this.value || "";
-		let value = day;
-		if (this.range) {
-			const { start, end } = readRange(previous);
-			if (start && !end) value = day < start ? `${day}/${start}` : `${start}/${day}`;
-		}
+		const { start: first } = readRange(previous);
+		const ending = this.endPending && Boolean(first);
+		const value = !ending || day === first ? day : day < first ? `${day}/${first}` : `${first}/${day}`;
 		this.focusDay = day;
-		if (value === previous) return;
-		this.value = value;
+		this.endPending = !ending;
 		this.hoverDay = void 0;
+		this.pressedValue = value;
+		if (value === previous && !ending) return;
+		this.value = value;
 		const { start, end } = readRange(value);
 		this.dispatchEvent(new CustomEvent("change", {
 			bubbles: true,
@@ -10865,7 +10866,7 @@ var CalendarBase = class extends i$2 {
 				value,
 				previous,
 				start,
-				end: this.range ? end : start
+				end: ending ? end || start : ""
 			}
 		}));
 	}
@@ -10915,10 +10916,6 @@ _CalendarBase.properties = {
 		type: Boolean,
 		reflect: true
 	},
-	range: {
-		type: Boolean,
-		reflect: true
-	},
 	label: { type: String },
 	literal: {
 		type: Boolean,
@@ -10926,21 +10923,64 @@ _CalendarBase.properties = {
 	},
 	events: { attribute: false },
 	focusDay: { state: true },
-	hoverDay: { state: true }
+	hoverDay: { state: true },
+	endPending: { state: true }
 };
 //#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; today is a red disc nine tenths of a square across. */\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  --ds-calendar-line: 1px solid var(--ds-border-color);\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  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-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: ellipsis;\n  white-space: nowrap;\n}\n.controls {\n  display: flex;\n  flex: 0 0 auto;\n  align-items: flex-end;\n  gap: 0;\n}\n/* Each arrow is a chevron on its own square, one control high at the square's foot,\n * in the title grey; the pointer fills it with the system's corners and inks it. */\n.nav {\n  flex: 0 0 auto;\n  width: var(--ds-unit);\n  height: var(--ds-control-height);\n  border-radius: var(--ds-radius);\n  color: var(--ds-title-color);\n}\n.nav:hover:not(:disabled) { background: var(--ds-fill); color: var(--ds-text-color); }\n:host(:dir(rtl)) .nav > ds-icon { transform: scaleX(-1); }\n\n.grid { outline: none; }\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: ellipsis;\n  white-space: nowrap;\n}\n:host([compact]) .weekday { padding-inline: 0; text-align: center; }\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: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. */\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  color: var(--ds-title-color);\n  font-variant-numeric: tabular-nums;\n}\n.week-number {\n  margin-inline-end: auto;\n  color: var(--ds-title-color);\n  font-family: var(--ds-typeface-compressed);\n}\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 { 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 { align-items: center; padding-inline-end: calc(var(--ds-unit) * 0.05); }\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/* 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/* 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  margin: 0.5px;\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; text-overflow: ellipsis; }\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.day[data-inside] { background: var(--ds-calendar-band); }\n:host(:not([compact])) .day:is([data-first], [data-last]) { background: var(--ds-calendar-band); }\n:host([compact]) .day[data-first] { background: linear-gradient(to right, transparent 50%, var(--ds-calendar-band) 50%); }\n:host([compact]) .day[data-last] { background: linear-gradient(to left, transparent 50%, var(--ds-calendar-band) 50%); }\n:host([compact]:dir(rtl)) .day[data-first] { background: linear-gradient(to left, transparent 50%, var(--ds-calendar-band) 50%); }\n:host([compact]:dir(rtl)) .day[data-last] { background: linear-gradient(to right, transparent 50%, var(--ds-calendar-band) 50%); }\n:host([compact][selectable]) .day[data-inside]:hover .date { background: transparent; }\n\n/* Today, as words in the title grey beside the arrows. */\n.today-button {\n  height: var(--ds-control-height);\n  padding-inline: calc(4px * var(--ds-sf, 1));\n  border: 0;\n  background: transparent;\n  color: var(--ds-title-color);\n}\n.today-button:hover { background: var(--ds-fill); color: var(--ds-text-color); }\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";
+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; today is a red disc nine tenths of a square across.\n *\n * A picker is the select's face: one control high at the foot of its square,\n * ten squares wide by default, the calendar icon at its start and the down\n * arrow at its end. 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  --ds-calendar-line: 1px solid var(--ds-border-color);\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  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-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: ellipsis;\n  white-space: nowrap;\n}\n.controls {\n  display: flex;\n  flex: 0 0 auto;\n  align-items: flex-end;\n  gap: 0;\n}\n/* Each arrow is a chevron on its own square, one control high at the square's foot,\n * in the title grey; the pointer fills it with the system's corners and inks it. */\n.nav {\n  flex: 0 0 auto;\n  width: var(--ds-unit);\n  height: var(--ds-control-height);\n  border-radius: var(--ds-radius);\n  color: var(--ds-title-color);\n}\n.nav:hover:not(:disabled) { background: var(--ds-fill); color: var(--ds-text-color); }\n:host(:dir(rtl)) .nav > ds-icon { transform: scaleX(-1); }\n\n.grid { outline: none; }\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: ellipsis;\n  white-space: nowrap;\n}\n:host([compact]) .weekday { padding-inline: 0; text-align: center; }\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: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. */\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  color: var(--ds-title-color);\n  font-variant-numeric: tabular-nums;\n}\n.week-number {\n  margin-inline-end: auto;\n  color: var(--ds-title-color);\n  font-family: var(--ds-typeface-compressed);\n}\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 { 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 { align-items: center; padding-inline-end: calc(var(--ds-unit) * 0.05); }\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/* 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/* 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  margin: 0.5px;\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; text-overflow: ellipsis; }\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.day[data-inside] { background: var(--ds-calendar-band); }\n:host(:not([compact])) .day:is([data-first], [data-last]) { background: var(--ds-calendar-band); }\n:host([compact]) .day[data-first] { background: linear-gradient(to right, transparent 50%, var(--ds-calendar-band) 50%); }\n:host([compact]) .day[data-last] { background: linear-gradient(to left, transparent 50%, var(--ds-calendar-band) 50%); }\n:host([compact]:dir(rtl)) .day[data-first] { background: linear-gradient(to left, transparent 50%, var(--ds-calendar-band) 50%); }\n:host([compact]:dir(rtl)) .day[data-last] { background: linear-gradient(to right, transparent 50%, var(--ds-calendar-band) 50%); }\n:host([compact][selectable]) .day[data-inside]:hover .date { background: transparent; }\n\n/* Today, as words in the title grey beside the arrows. */\n.today-button {\n  height: var(--ds-control-height);\n  padding-inline: calc(4px * var(--ds-sf, 1));\n  border: 0;\n  background: transparent;\n  color: var(--ds-title-color);\n}\n.today-button:hover { background: var(--ds-fill); color: var(--ds-text-color); }\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  --ds-calendar-picker-width: calc(10 * var(--ds-unit));\n  display: inline-flex;\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: flex-end;\n  gap: calc(4px * var(--ds-sf, 1));\n  width: var(--ds-calendar-picker-width);\n  padding-inline: 0 calc(4px * var(--ds-sf, 1));\n  text-align: start;\n  cursor: pointer;\n}\n.trigger:disabled { cursor: default; }\n.trigger .icon,\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: ellipsis;\n  white-space: nowrap;\n}\n.trigger[data-empty] .text { color: var(--ds-title-color); }\n.trigger[aria-expanded=\"true\"] .arrow { transform: rotate(180deg); }\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: 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  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: var(--ds-unit); }\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/* A separator: one square with a 1px line through its middle. */\n.separator {\n  position: relative;\n  height: var(--ds-unit);\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  .trigger .arrow { transition: transform 140ms ease; }\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";
 //#endregion
 //#region DS1/3-unit/ds-calendar.ts
 var _Calendar;
 var whole$1 = (value, least, most, fallback) => typeof value === "number" && Number.isFinite(value) ? Math.max(least, Math.min(most, Math.floor(value))) : fallback;
+var TIME = /^([01]\d|2[0-3]):([0-5]\d)$/;
+/** Reads a value: `2026-10-21`, `2026-10-21T14:30`, or two of them joined by `/`. */
+function readDateValue(value) {
+	const read = (part) => {
+		const [day = "", time = ""] = (part ?? "").trim().split("T");
+		if (!isDay(day)) return void 0;
+		const clock = time.slice(0, 5);
+		return {
+			day,
+			time: TIME.test(clock) ? clock : ""
+		};
+	};
+	const [first, second] = (value ?? "").split("/");
+	let start = read(first), end = read(second);
+	if (start && end && `${end.day}T${end.time}` < `${start.day}T${start.time}`) [start, end] = [end, start];
+	return {
+		start,
+		end
+	};
+}
+/**
+* Writes a value from its ends, the times only with `time`. An end that is
+* the same moment as the start leaves the value one day.
+*/
+function writeDateValue(start, end, options) {
+	if (!start) return "";
+	const part = (side) => options.time && side.time ? `${side.day}T${side.time}` : side.day;
+	return end && part(end) !== part(start) ? `${part(start)}/${part(end)}` : part(start);
+}
+/** Reads what a person typed: a day written `YYYY-MM-DD`, or a date the browser can read ("Oct 21, 2026"). */
+function parseTypedDay(text) {
+	const trimmed = text.trim();
+	if (isDay(trimmed)) return trimmed;
+	const moment = Date.parse(trimmed);
+	return Number.isFinite(moment) ? dayOf(new Date(moment)) : null;
+}
+var openPickers = /* @__PURE__ */ new Set();
 /**
 * @element ds-calendar
 * @prop {string} month - The month shown, `YYYY-MM` (or a day in it). The
 *   selected day's month, or today's, when left out; the arrows change it.
-* @prop {string} value - The selected day, `YYYY-MM-DD`.
-* @prop {boolean} selectable - Pressing a day selects it and fires `change`.
+* @prop {string} value - The selected day, `YYYY-MM-DD`, or a range,
+*   `YYYY-MM-DD/YYYY-MM-DD`; in a picker either end may carry a time
+*   (`2026-10-21T09:00`).
+* @prop {boolean} selectable - Pressing a day selects it and fires `change`:
+*   the first press one day, the next the end of a range from it.
+* @prop {boolean} picker - A field one control high that opens the small
+*   month below it, with the days to type, Include time and Clear.
 * @prop {boolean} compact - One square per day, no events written out: the
 *   small month.
 * @prop {number} dayWidth - Squares per day (`day-width`): 4 by default, 1
@@ -10951,8 +10991,6 @@ var whole$1 = (value, least, most, fallback) => typeof value === "number" && Num
 * @prop {boolean} fixed - Always draw six weeks, so the month keeps its height.
 * @prop {boolean} outsideDays - Draw the days of the months before and after
 *   in the title grey (`outside-days`); pressing one moves there.
-* @prop {boolean} range - A selectable calendar chooses a first and a last
-*   day; `value` is then `YYYY-MM-DD/YYYY-MM-DD`.
 * @prop {boolean} noHeader - Leave out the title and arrows (`no-header`).
 * @prop {boolean} noToday - Leave out the Today button (`no-today`).
 * @prop {string} min - The first day a person may choose.
@@ -10960,24 +10998,42 @@ var whole$1 = (value, least, most, fallback) => typeof value === "number" && Num
 * @prop {string} weekStart - The week's first day (`week-start`), 0–6 from
 *   Sunday or its English name; the language's own by default.
 * @prop {string} today - The day drawn as today; the reader's own by default.
+* @prop {string} label - The grid's name, or a picker's: a translation key,
+*   or literal words with `literal`.
+* @prop {string} name - The form field's name.
+* @prop {string} placeholder - A picker's words before a day is chosen; the
+*   shared "Choose a date" by default.
+* @prop {string} length - How a picker writes a day: `short`, `medium` (the
+*   default) or `long`.
+* @prop {boolean} time - A picker chooses a time with each day (Include time).
+* @prop {boolean} required - A form needs a value; a picker leaves Clear out.
+* @prop {boolean} disabled - A picker cannot be opened.
+* @prop {boolean} open - A picker's month is open.
 * @prop {CalendarEvent[]} events - What happens on the days (property only).
 *
 * @fires day-press - A day was pressed or chosen with Enter or Space;
 *   `{ day, events }`. Cancelable: cancelled, a selectable calendar keeps its value.
-* @fires change - A person selected a day; `{ value, previous }`.
+* @fires change - A person selected a day or ended a range;
+*   `{ value, previous, start, end }`, `end` empty while it is still to come.
+* @fires input - A picker's value changed, the same moment as `change`.
 * @fires event-press - An event was pressed; `{ event, day }`.
 * @fires navigate - A person moved to another month; `{ month }`.
+* @fires ds-calendar-toggle - A picker's month opened or closed; `{ open }`.
 *
 * @example
 * <ds-calendar month="2026-10" week-numbers></ds-calendar>
-* <ds-calendar compact selectable value="2026-10-18"></ds-calendar>
-* <ds-calendar compact selectable range value="2026-10-18/2026-10-24"></ds-calendar>
+* <ds-calendar compact selectable value="2026-10-18/2026-10-24"></ds-calendar>
+* <ds-calendar picker label="When" literal name="when" value="2026-10-21/2026-10-24"></ds-calendar>
 */
 var Calendar = class extends CalendarBase {
 	constructor() {
 		super();
 		this.weeksRun = "rows";
 		this.byDay = /* @__PURE__ */ new Map();
+		this.internals = typeof this.attachInternals === "function" ? this.attachInternals() : null;
+		this.initial = "";
+		this.shown = false;
+		this.focusMonth = false;
 		this.onKeyDown = (event) => {
 			const cell = event.target.closest("[data-day]");
 			if (!cell) return;
@@ -10987,9 +11043,9 @@ var Calendar = class extends CalendarBase {
 				this.press(day);
 				return;
 			}
-			if (event.key === "Escape" && this.open) {
+			if (event.key === "Escape" && this.unfolded) {
 				event.stopPropagation();
-				this.open = void 0;
+				this.unfolded = void 0;
 				return;
 			}
 			const target = this.keyTarget(event, day);
@@ -11005,7 +11061,7 @@ var Calendar = class extends CalendarBase {
 			if (!cell) return;
 			const day = cell.dataset.day;
 			if (find("[data-more]")) {
-				this.open = this.open === day ? void 0 : day;
+				this.unfolded = this.unfolded === day ? void 0 : day;
 				return;
 			}
 			const chip = find("[data-event]");
@@ -11019,14 +11075,93 @@ var Calendar = class extends CalendarBase {
 			if (!sameMonth(day, this.shownMonth)) this.showMonth(day, true);
 		};
 		this.onPointerOver = (event) => {
-			if (!this.range || !this.selectable) return;
-			const { start, end } = readRange(this.value);
-			if (!start || end) return;
+			if (!this.endPending || !this.selectable) return;
 			const day = event.composedPath().find((node) => node instanceof HTMLElement && node.dataset?.day)?.dataset.day;
 			if (day !== this.hoverDay && (!day || this.allowed(day))) this.hoverDay = day;
 		};
 		this.onFocusOut = (event) => {
-			if (this.open && !(event.relatedTarget instanceof Node && this.renderRoot.contains(event.relatedTarget))) this.open = void 0;
+			if (this.unfolded && !(event.relatedTarget instanceof Node && this.renderRoot.contains(event.relatedTarget))) this.unfolded = void 0;
+		};
+		this.place = () => {
+			const panel = this.panel, trigger = this.trigger;
+			if (!this.shown || !panel || !trigger) return;
+			const rect = trigger.getBoundingClientRect();
+			const view = this.ownerDocument.defaultView;
+			const viewport = view.visualViewport;
+			const left = viewport?.offsetLeft ?? 0, top = viewport?.offsetTop ?? 0;
+			const width = viewport?.width ?? view.innerWidth, height = viewport?.height ?? view.innerHeight;
+			const box = panel.getBoundingClientRect();
+			const gap = (parseFloat(getComputedStyle(panel).paddingTop) || 9) + 1;
+			const square = Math.max(rect.height, gap * 2);
+			const foot = rect.bottom, head = rect.bottom - square;
+			const below = top + height - foot - 2 * gap, above = head - top - 2 * gap;
+			const up = below < box.height && above > below;
+			const x = getComputedStyle(this).direction === "rtl" ? rect.right - box.width : rect.left;
+			panel.style.left = `${Math.max(left + gap, Math.min(x, left + width - gap - box.width))}px`;
+			panel.style.top = `${Math.max(top + gap, up ? head - gap - box.height : foot + gap)}px`;
+		};
+		this.onOutside = (event) => {
+			if (!event.composedPath().includes(this)) this.open = false;
+		};
+		this.toggle = () => {
+			if (this.disabled) return;
+			this.focusMonth = false;
+			this.open = !this.open;
+		};
+		this.onTriggerKey = (event) => {
+			if (this.disabled) return;
+			if (event.key === "ArrowDown" || event.key === "ArrowUp" || (event.key === "Enter" || event.key === " ") && !this.open) {
+				event.preventDefault();
+				this.focusMonth = true;
+				if (this.open) this.focusPickerDay();
+				else this.open = true;
+			}
+		};
+		this.onPanelKey = (event) => {
+			if (event.key === "Escape" && !event.defaultPrevented) {
+				event.preventDefault();
+				event.stopPropagation();
+				this.open = false;
+			}
+		};
+		this.onPanelFocusOut = (event) => {
+			const next = event.relatedTarget;
+			if (this.open && next instanceof Node && !this.contains(next) && !this.renderRoot.contains(next)) this.open = false;
+		};
+		this.picked = (event) => {
+			event.stopPropagation();
+			const { start, end } = this.ends;
+			const first = {
+				day: event.detail.start,
+				time: start?.time || (this.time ? "09:00" : "")
+			};
+			if (!event.detail.end) {
+				this.write(first, void 0);
+				return;
+			}
+			const last = {
+				day: event.detail.end,
+				time: end?.time || (this.time ? "10:00" : "")
+			};
+			this.write(first, last);
+			if (!this.time) this.open = false;
+		};
+		this.setTime = () => {
+			this.time = !this.time;
+			const { start, end } = this.ends;
+			const timed = (side, clock) => side ? {
+				...side,
+				time: this.time ? side.time || clock : ""
+			} : void 0;
+			this.write(timed(start, "09:00"), timed(end ?? (this.time ? start : void 0), "10:00"));
+		};
+		this.passPress = (event) => {
+			const control = event.currentTarget.querySelector(".ds-switch");
+			if (control && !event.composedPath().includes(control)) control.click();
+		};
+		this.clear = () => {
+			this.commit("");
+			this.open = false;
 		};
 		this.compact = false;
 		this.weekNumbers = false;
@@ -11034,6 +11169,25 @@ var Calendar = class extends CalendarBase {
 		this.outsideDays = false;
 		this.noHeader = false;
 		this.noToday = false;
+		this.picker = false;
+		this.time = false;
+		this.required = false;
+		this.disabled = false;
+		this.open = false;
+	}
+	disconnectedCallback() {
+		this.hide(false);
+		super.disconnectedCallback();
+	}
+	firstUpdated() {
+		this.initial = this.value;
+	}
+	/** The form was reset: back to the value it started with. */
+	formResetCallback() {
+		this.value = this.initial;
+	}
+	formDisabledCallback(disabled) {
+		this.disabled = disabled;
 	}
 	/** The first of the month shown. */
 	get shownMonth() {
@@ -11054,13 +11208,29 @@ var Calendar = class extends CalendarBase {
 		this.style.setProperty("--ds-calendar-lines", String(this.eventLines));
 		this.toggleAttribute("data-events", (this.events ?? []).length > 0);
 		this.toggleAttribute("data-roomy", this.squaresPerDay >= 2);
+		if (this.picker && changed.has("value") && this.value) {
+			const { start, end } = this.ends;
+			if (!start) this.value = "";
+			else if (start.time || end?.time) this.time = true;
+		}
+		if (changed.has("disabled") && this.disabled) this.open = false;
+	}
+	updated(changed) {
+		super.updated(changed);
+		if (changed.has("value") || changed.has("required")) {
+			this.internals?.setFormValue(this.value || null);
+			if (this.required && !this.value) this.internals?.setValidity({ valueMissing: true }, this.pickerWords(void 0, "Choose a date"), this.trigger ?? void 0);
+			else this.internals?.setValidity({});
+		}
+		if (changed.has("open") || changed.has("picker")) if (this.open && this.picker) this.show();
+		else this.hide(changed.get("open") === true);
 	}
 	/** Shows another month and says so with `navigate`. */
 	showMonth(month, announce = false) {
 		const first = readMonth(month);
 		if (!first || first === this.shownMonth) return;
 		this.month = first.slice(0, 7);
-		this.open = void 0;
+		this.unfolded = void 0;
 		if (announce) this.announceMonth(first);
 	}
 	/** The month before, as the previous arrow does. */
@@ -11118,7 +11288,7 @@ var Calendar = class extends CalendarBase {
 		const isToday = day === this.todayDay;
 		const { selected, inside, first, last } = this.selection(day);
 		const allowed = this.allowed(day);
-		const unfolded = this.open === day;
+		const unfolded = this.unfolded === day;
 		const shown = unfolded || events.length <= lines ? events : events.slice(0, Math.max(0, lines - 1));
 		const hidden = events.length - shown.length;
 		return b$1`<div
@@ -11160,6 +11330,7 @@ var Calendar = class extends CalendarBase {
     </div>`;
 	}
 	render() {
+		if (this.picker) return this.renderPicker();
 		const month = this.shownMonth;
 		const first = this.firstDay;
 		const weeks = monthWeeks(month, first, this.fixed);
@@ -11173,7 +11344,7 @@ var Calendar = class extends CalendarBase {
         part="grid"
         role="grid"
         aria-label=${this.nameOr(monthTitle(month))}
-        aria-multiselectable=${this.selectable ? String(this.range) : A}
+        aria-multiselectable=${this.selectable ? "true" : A}
         @keydown=${this.onKeyDown}
         @click=${this.onClick}
       >
@@ -11184,355 +11355,276 @@ var Calendar = class extends CalendarBase {
       </div>
     </div>`;
 	}
-};
-_Calendar = Calendar;
-_Calendar.properties = {
-	...CalendarBase.properties,
-	month: {
-		type: String,
-		reflect: true
-	},
-	compact: {
-		type: Boolean,
-		reflect: true
-	},
-	dayWidth: {
-		type: Number,
-		attribute: "day-width"
-	},
-	lines: { type: Number },
-	weekNumbers: {
-		type: Boolean,
-		attribute: "week-numbers",
-		reflect: true
-	},
-	fixed: {
-		type: Boolean,
-		reflect: true
-	},
-	outsideDays: {
-		type: Boolean,
-		attribute: "outside-days",
-		reflect: true
-	},
-	noHeader: {
-		type: Boolean,
-		attribute: "no-header",
-		reflect: true
-	},
-	noToday: {
-		type: Boolean,
-		attribute: "no-today",
-		reflect: true
-	},
-	open: { state: true }
-};
-_Calendar.styles = [
-	r$3(component_metrics_default),
-	r$3(controls_default),
-	r$3(ds_calendar_default)
-];
-define("ds-calendar", Calendar);
-//#endregion
-//#region DS1/3-unit/styles/ds-calendar-large.css?inline
-var ds_calendar_large_default = "/* ds-calendar-large.css\n * The grid drawn --ds-calendar-scale times (one and a half by default): a\n * cell is a square of 30px, its lines 1.5px, its words the heading size\n * times the scale (19.5px). Weeks run in columns and the days down them; the\n * frame's corners are four tenths of a cell. Today is a red disc nine tenths\n * of a cell across, the selected day an ink square of the same size. */\n\n:host {\n  --ds-calendar-cell: calc(var(--ds-unit) * var(--ds-calendar-scale, 1.5));\n  --ds-calendar-stroke: calc(1px * var(--ds-calendar-scale, 1.5));\n  --ds-calendar-ink: var(--ds-text-color);\n  --ds-calendar-event-fill: var(--ds-apple-green);\n  --ds-calendar-today: var(--ds-red-for-blood);\n  --ds-calendar-today-ink: var(--ds-white, #fff);\n  --ds-calendar-mark: calc(var(--ds-calendar-cell) * 0.9);\n  --ds-calendar-corner: calc(var(--ds-calendar-cell) * 0.4);\n  --ds-calendar-rail: calc(var(--ds-calendar-cell) * 2);\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: calc(var(--ds-type-size-heading) * var(--ds-calendar-scale, 1.5));\n  font-weight: var(--ds-type-weight-default);\n  line-height: 1;\n  letter-spacing: var(--ds-type-letterspacing-default);\n}\n:host([hidden]) { display: none !important; }\n\n.calendar { min-width: 0; }\n\n/* The title and the arrows: one cell high, over the months. */\n.header {\n  display: flex;\n  align-items: flex-end;\n  gap: calc(4px * var(--ds-sf, 1));\n  height: var(--ds-calendar-cell);\n  margin-inline-start: calc(var(--ds-calendar-rail) + var(--ds-unit) / 2);\n  font-size: var(--ds-type-size-default);\n  line-height: var(--ds-type-lineheight-default);\n}\n.title {\n  flex: 1 1 auto;\n  min-width: 0;\n  overflow: hidden;\n  font-size: calc(var(--ds-type-size-heading) * var(--ds-calendar-scale, 1.5));\n  line-height: var(--ds-calendar-cell);\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n.controls { display: flex; flex: 0 0 auto; align-items: flex-end; gap: 0; }\n/* Each arrow is a chevron on its own square, as in a month. */\n.nav { flex: 0 0 auto; width: var(--ds-unit); height: var(--ds-control-height); border-radius: var(--ds-radius); color: var(--ds-title-color); }\n.nav:hover:not(:disabled) { background: var(--ds-fill); color: var(--ds-text-color); }\n:host(:dir(rtl)) .nav > ds-icon { transform: scaleX(-1); }\n\n.body {\n  display: grid;\n  grid-template-columns: var(--ds-calendar-rail) minmax(0, 1fr);\n  column-gap: calc(var(--ds-unit) / 2);\n}\n\n/* The weekdays down the start, outside the scroll: every other one named. */\n.rail {\n  display: grid;\n  grid-template-rows: repeat(7, var(--ds-calendar-cell));\n  padding-block-start: var(--ds-calendar-cell);\n  color: var(--ds-title-color);\n  font-size: var(--ds-type-size-default);\n  line-height: var(--ds-type-lineheight-default);\n}\n.weekday {\n  display: flex;\n  align-items: center;\n  justify-content: flex-end;\n  white-space: nowrap;\n}\n\n.scroller {\n  overflow-x: auto;\n  overflow-y: hidden;\n  scrollbar-width: none;\n  overscroll-behavior-x: contain;\n}\n.scroller::-webkit-scrollbar { display: none; }\n\n/* The months over their weeks, one cell high, their names on its foot. */\n.months {\n  display: grid;\n  grid-template-columns: repeat(var(--ds-calendar-weeks), var(--ds-calendar-cell));\n  height: var(--ds-calendar-cell);\n}\n.month {\n  display: flex;\n  align-items: flex-end;\n  min-width: 0;\n  padding: 0 var(--ds-calendar-stroke) calc(3px * var(--ds-calendar-scale, 1.5));\n  overflow: hidden;\n  white-space: nowrap;\n}\n\n/* The frame: a line all round with rounded corners; the cells draw the lines inside. */\n.frame {\n  box-sizing: border-box;\n  width: max-content;\n  border: var(--ds-calendar-stroke) solid var(--ds-calendar-ink);\n  border-radius: var(--ds-calendar-corner);\n  overflow: hidden;\n}\n.grid {\n  display: grid;\n  grid-template-columns: repeat(var(--ds-calendar-weeks), var(--ds-calendar-cell));\n  grid-template-rows: repeat(7, var(--ds-calendar-cell));\n}\n.row { display: contents; }\n.hidden {\n  position: absolute;\n  width: 1px;\n  height: 1px;\n  overflow: hidden;\n  clip-path: inset(50%);\n  white-space: nowrap;\n}\n\n.cell {\n  box-sizing: border-box;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: var(--ds-calendar-cell);\n  height: var(--ds-calendar-cell);\n  border-block-start: var(--ds-calendar-stroke) solid var(--ds-calendar-ink);\n  border-inline-start: var(--ds-calendar-stroke) solid var(--ds-calendar-ink);\n  background: var(--ds-calendar-cell-fill, transparent);\n  font-variant-numeric: tabular-nums;\n  outline: none;\n}\n.cell[data-first-row] { border-block-start-width: 0; }\n.cell[data-first-column] { border-inline-start-width: 0; }\n.cell[data-filled] { color: var(--ds-slate); }\n:host([selectable]) .cell:not([aria-disabled=\"true\"]) { cursor: pointer; }\n:host([selectable]) .cell:not([aria-disabled=\"true\"], [data-filled]):hover { background: var(--ds-row-fill-hover, var(--ds-fill)); }\n.cell:focus-visible { outline: 2px solid var(--ds-focus-ring); outline-offset: -3px; }\n.cell[aria-disabled=\"true\"] { color: var(--ds-title-color); }\n\n.date {\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  letter-spacing: 0;\n}\n.cell[data-today] .date { border-radius: 999px; background: var(--ds-calendar-today); color: var(--ds-calendar-today-ink); }\n.cell[data-selected] .date { background: var(--ds-calendar-ink); color: var(--ds-paper); }\n.cell[data-inside]:not([data-filled]) { background: color-mix(in srgb, var(--ds-calendar-ink) 12%, var(--ds-paper)); }\n.cell[data-today][data-selected] .date { border-radius: 999px; box-shadow: inset 0 0 0 var(--ds-calendar-stroke) var(--ds-calendar-today); }\n\n/* On a narrow screen the weekdays take one letter and one square. */\n@media (max-width: 720px) {\n  :host { --ds-calendar-rail: var(--ds-unit); }\n  .rail .weekday:not(:empty) { font-size: 0; }\n  .rail .weekday:not(:empty)::after { content: attr(data-narrow); font-size: var(--ds-type-size-default); }\n}\n\n/* Activity keeps the day grid, with quiet separated squares and event colours. */\n:host([activity]) .frame { border: 0; border-radius: 0; }\n:host([activity]) .cell { position: relative; border: 0; background: none; }\n:host([activity]) .cell::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([activity]) .date { display: none; }\n:host([activity]) .cell[data-selected]::before { outline: 1px solid var(--ds-calendar-ink); }\n";
-//#endregion
-//#region DS1/3-unit/ds-calendar-large.ts
-var _CalendarLarge;
-/** The fill for a day: one colour, or bands side by side. */
-function fillOf(events) {
-	if (!events.length) return void 0;
-	const colours = [...new Set(events.map((event) => event.color || "var(--ds-calendar-event-fill)"))];
-	if (colours.length === 1) return colours[0];
-	const share = 100 / colours.length;
-	return `linear-gradient(90deg, ${colours.map((colour, index) => `${colour} ${index * share}% ${(index + 1) * share}%`).join(", ")})`;
-}
-/**
-* @element ds-calendar-large
-* @prop {string} start - The first month drawn, `YYYY-MM`; the month before
-*   today's by default.
-* @prop {number} months - How many months are drawn: 6 by default.
-* @prop {number} scale - How many times the grid it is drawn: 1.5 by default.
-* @prop {string} value - The selected day, `YYYY-MM-DD`.
-* @prop {boolean} selectable - Pressing a day selects it and fires `change`.
-* @prop {boolean} noHeader - Leave out the title and arrows (`no-header`).
-* @prop {string} min - The first day a person may choose.
-* @prop {string} max - The last day a person may choose.
-* @prop {string} weekStart - The week's first day (`week-start`); the
-*   language's own by default.
-* @prop {string} today - The day drawn as today; the reader's own by default.
-* @prop {CalendarEvent[]} events - What happens on the days (property only).
-*
-* @fires day-press - A day was pressed or chosen with Enter or Space; `{ day, events }`.
-* @fires change - A person selected a day; `{ value, previous }`.
-* @fires navigate - The months drawn moved on or back; `{ month }`, the first one.
-*
-* @example
-* <ds-calendar-large start="2026-09" months="6"></ds-calendar-large>
-*/
-var CalendarLarge = class extends CalendarBase {
-	constructor() {
-		super();
-		this.weeksRun = "columns";
-		this.byDay = /* @__PURE__ */ new Map();
-		this.placed = false;
-		this.frame = 0;
-		this.onScroll = () => {
-			cancelAnimationFrame(this.frame);
-			this.frame = requestAnimationFrame(() => {
-				const scroller = this.scroller;
-				const cell = scroller?.querySelector(".cell")?.getBoundingClientRect().width;
-				if (!scroller || !cell) return;
-				const column = Math.min(this.weekStarts.length - 1, Math.max(0, Math.round(Math.abs(scroller.scrollLeft) / cell)));
-				this.visible = startOfMonth(addDays(this.weekStarts[column], 3));
-			});
-		};
-		this.onKeyDown = (event) => {
-			const cell = event.target.closest("[data-day]");
-			if (!cell) return;
-			const day = cell.dataset.day;
-			if (event.key === "Enter" || event.key === " ") {
-				event.preventDefault();
-				this.press(day);
-				return;
-			}
-			const target = this.keyTarget(event, day);
-			if (!target) return;
-			event.preventDefault();
-			if (target < this.weekStarts[0] || target > this.lastDay) {
-				const by = target < this.weekStarts[0] ? -1 : 1;
-				const first = addMonths(this.firstMonth, by);
-				this.start = first.slice(0, 7);
-				this.announceMonth(first);
-			}
-			this.focusCell(target);
-		};
-		this.onClick = (event) => {
-			const cell = event.composedPath().find((node) => node instanceof HTMLElement && node.dataset?.day);
-			if (!cell) return;
-			const day = cell.dataset.day;
-			this.focusDay = day;
-			this.press(day);
-		};
-		this.noHeader = false;
-		this.activity = false;
-	}
-	/** The first of the first month drawn. */
-	get firstMonth() {
-		return readMonth(this.start) ?? addMonths(startOfMonth(this.todayDay), -1);
-	}
-	get monthCount() {
-		const count = this.months;
-		return typeof count === "number" && Number.isFinite(count) ? Math.max(1, Math.min(36, Math.floor(count))) : 6;
+	pickerWords(value, fallback) {
+		if (value && this.literal) return value;
+		return getText(value || fallback) || value || fallback;
 	}
-	/** The first day of each week drawn, from the week holding the first month's first day. */
-	get weekStarts() {
-		const first = this.firstMonth;
-		const from = addDays(first, -((weekdayOf(first) - this.firstDay + 7) % 7));
-		const last = addDays(addMonths(first, this.monthCount), -1);
-		const weeks = [];
-		for (let day = from; day <= last; day = addDays(day, 7)) weeks.push(day);
-		return weeks;
+	get trigger() {
+		return this.renderRoot.querySelector(".trigger");
 	}
-	get lastDay() {
-		return addDays(this.weekStarts.at(-1), 6);
+	get panel() {
+		return this.renderRoot.querySelector(".popover");
 	}
-	eventsOn(day) {
-		return this.byDay.get(day) ?? [];
+	/** The small month inside the picker. */
+	get smallMonth() {
+		return this.renderRoot.querySelector("ds-calendar");
 	}
-	willUpdate(changed) {
-		super.willUpdate(changed);
-		const scale = typeof this.scale === "number" && Number.isFinite(this.scale) && this.scale > 0 ? this.scale : this.activity ? 1 : 1.5;
-		this.style.setProperty("--ds-calendar-scale", String(scale));
+	get ends() {
+		return readDateValue(this.value);
 	}
-	firstUpdated() {
-		const today = this.todayDay;
-		this.scrollToDay(today >= this.weekStarts[0] && today <= this.lastDay ? startOfMonth(today) : this.firstMonth, false);
-		this.placed = true;
+	/** Opens a picker's month. */
+	show() {
+		if (this.shown || !this.picker || this.disabled || !this.isConnected) return;
+		const panel = this.panel;
+		if (!panel) return;
+		for (const other of openPickers) if (other !== this) other.open = false;
+		openPickers.add(this);
+		this.shown = true;
+		this.open = true;
+		const month = this.smallMonth;
+		if (month) {
+			month.month = (this.ends.start?.day || this.today || this.todayDay).slice(0, 7);
+			month.endPending = false;
+		}
+		panel.showPopover?.();
+		this.place();
+		if (month) month.updateComplete.then(this.place);
+		this.ownerDocument.addEventListener("pointerdown", this.onOutside, true);
+		this.ownerDocument.addEventListener("scroll", this.place, true);
+		window.addEventListener("resize", this.place);
+		this.dispatchEvent(new CustomEvent("ds-calendar-toggle", {
+			bubbles: true,
+			composed: true,
+			detail: { open: true }
+		}));
+		if (this.focusMonth) this.focusPickerDay();
 	}
-	disconnectedCallback() {
-		cancelAnimationFrame(this.frame);
-		super.disconnectedCallback();
+	/** Closes a picker's month, giving focus back to the field when it was inside. */
+	hide(restore = true) {
+		if (!this.shown) return;
+		this.shown = false;
+		openPickers.delete(this);
+		const panel = this.panel;
+		const within = panel?.matches(":focus-within");
+		if (panel?.matches(":popover-open")) panel.hidePopover?.();
+		this.ownerDocument.removeEventListener("pointerdown", this.onOutside, true);
+		this.ownerDocument.removeEventListener("scroll", this.place, true);
+		window.removeEventListener("resize", this.place);
+		this.open = false;
+		if (restore && within) this.trigger?.focus({ preventScroll: true });
+		this.dispatchEvent(new CustomEvent("ds-calendar-toggle", {
+			bubbles: true,
+			composed: true,
+			detail: { open: false }
+		}));
 	}
-	get scroller() {
-		return this.renderRoot.querySelector(".scroller");
+	async focusPickerDay() {
+		const month = this.smallMonth;
+		if (!month) return;
+		await month.updateComplete;
+		month.renderRoot.querySelector("[data-day][tabindex=\"0\"]")?.focus({ preventScroll: true });
 	}
-	columnOf(day) {
-		return this.weekStarts.findIndex((start) => day >= start && day <= addDays(start, 6));
+	/** Takes a new value and says so. */
+	commit(value) {
+		const previous = this.value || "";
+		if (value === previous) return;
+		this.value = value;
+		const { start, end } = readDateValue(value);
+		const detail = {
+			value,
+			previous,
+			start: start?.day ?? "",
+			end: end?.day ?? start?.day ?? ""
+		};
+		this.dispatchEvent(new CustomEvent("input", {
+			bubbles: true,
+			composed: true,
+			detail
+		}));
+		this.dispatchEvent(new CustomEvent("change", {
+			bubbles: true,
+			composed: true,
+			detail
+		}));
 	}
-	/** Scrolls the week holding `day` to the start of the view. */
-	scrollToDay(day, smooth = true) {
-		const scroller = this.scroller;
-		const column = this.columnOf(day);
-		if (!scroller || column < 0) return;
-		const cell = scroller.querySelector(".cell")?.getBoundingClientRect().width ?? 30;
-		const reduce = matchMedia?.("(prefers-reduced-motion: reduce)").matches;
-		const rtl = getComputedStyle(this).direction === "rtl";
-		scroller.scrollTo({
-			left: (rtl ? -1 : 1) * column * cell,
-			behavior: smooth && !reduce ? "smooth" : "auto"
-		});
-		this.visible = startOfMonth(day);
+	write(start, end) {
+		this.commit(writeDateValue(start, end, { time: this.time }));
 	}
-	/** Moves the view a month back or on; past the months drawn, the months move with it. */
-	step(by) {
-		const target = addMonths(this.visible ?? this.firstMonth, by);
-		const first = this.firstMonth;
-		const end = addMonths(first, this.monthCount);
-		if (target < first || target >= end) {
-			this.start = addMonths(first, by).slice(0, 7);
-			this.announceMonth(addMonths(first, by));
-			this.updateComplete.then(() => this.scrollToDay(target, false));
+	/** A day typed in a field, read when the person leaves it or presses Enter. */
+	typed(side, input) {
+		const { start, end } = this.ends;
+		const text = input.value.trim();
+		if (!text) {
+			if (side === "start") this.commit("");
+			else this.write(start, void 0);
 			return;
 		}
-		this.scrollToDay(target);
+		const day = parseTypedDay(text);
+		if (!day) {
+			input.value = this.fieldText(side === "start" ? start : end);
+			return;
+		}
+		const next = {
+			day,
+			time: (side === "start" ? start : end)?.time || (this.time ? side === "start" ? "09:00" : "10:00" : "")
+		};
+		if (side === "start") this.write(next, end);
+		else this.write(start ?? next, next);
+		const month = this.smallMonth;
+		if (month) month.month = day.slice(0, 7);
 	}
-	/** The month before, as the previous arrow does. */
-	previousMonth() {
-		this.step(-1);
+	timed(side, input) {
+		const { start, end } = this.ends;
+		const clock = TIME.test(input.value) ? input.value : "";
+		if (side === "start" && start) this.write({
+			...start,
+			time: clock
+		}, end);
+		if (side === "end" && start) this.write(start, {
+			day: (end ?? start).day,
+			time: clock
+		});
 	}
-	/** The month after, as the next arrow does. */
-	nextMonth() {
-		this.step(1);
+	moment(side) {
+		const [year, month, date] = side.day.split("-").map(Number);
+		const [hours, minutes] = (side.time || "12:00").split(":").map(Number);
+		return Date.UTC(year, month - 1, date, hours, minutes);
 	}
-	/** Brings today into view, moving the months drawn when it is outside them. */
-	showToday() {
-		const today = this.todayDay;
-		if (today < this.weekStarts[0] || today > this.lastDay) {
-			const first = addMonths(startOfMonth(today), -1);
-			this.start = first.slice(0, 7);
-			this.announceMonth(first);
-			this.updateComplete.then(() => this.scrollToDay(startOfMonth(today), false));
-		} else this.scrollToDay(startOfMonth(today));
-		this.focusDay = today;
+	formatter(withTime) {
+		return dateFormatter({
+			dateStyle: this.length ?? "medium",
+			...withTime ? { timeStyle: "short" } : {},
+			timeZone: "UTC"
+		});
 	}
-	get tabDay() {
-		const first = this.weekStarts[0], last = this.lastDay;
-		for (const day of [
-			this.focusDay,
-			this.chosen.start,
-			this.todayDay
-		]) if (day && day >= first && day <= last) return day;
-		return this.firstMonth;
+	fieldText(side) {
+		return side ? this.formatter(false).format(this.moment(side)) : "";
 	}
-	renderHeader() {
-		if (this.noHeader) return A;
-		const arrow = (which) => b$1`<button
-      class="ds-button ds-button--icon nav"
-      part=${which}
-      type="button"
-      aria-label=${this.words(which === "previous" ? "Previous month" : "Next month")}
-      @click=${() => which === "previous" ? this.previousMonth() : this.nextMonth()}
-    ><ds-icon type=${which === "previous" ? "chevron-left" : "chevron-right"} size="large" aria-hidden="true"></ds-icon></button>`;
-		return b$1`<div class="header" part="header">
-      <span class="title" aria-live="polite">${monthTitle(this.visible ?? this.firstMonth)}</span>
-      <span class="controls">
-        ${arrow("previous")}
-        <button class="ds-button ds-button--secondary" part="today" type="button" @click=${() => this.showToday()}>${this.words("Today")}</button>
-        ${arrow("next")}
-      </span>
-    </div>`;
+	/** The face's words: one day, or a range written as the language writes one ("Oct 21 – 24, 2026"). */
+	faceText() {
+		const { start, end } = this.ends;
+		if (!start) return this.pickerWords(this.placeholder, "Choose a date");
+		const formatter = this.formatter(Boolean(start.time || end?.time));
+		if (!end) return formatter.format(this.moment(start));
+		return formatter.formatRange ? formatter.formatRange(this.moment(start), this.moment(end)) : `${formatter.format(this.moment(start))} – ${formatter.format(this.moment(end))}`;
 	}
-	render() {
-		const weeks = this.weekStarts;
-		const first = weeks[0], last = this.lastDay;
-		this.byDay = eventsByDay(this.events ?? [], first, last);
-		const short = weekdayNames(this.firstDay, "short");
-		const narrow = weekdayNames(this.firstDay, "narrow");
-		const long = weekdayNames(this.firstDay, "long");
-		const today = this.todayDay;
-		const tab = this.tabDay;
-		const labels = [];
-		for (let month = this.firstMonth, index = 0; index < this.monthCount; index++, month = addMonths(month, 1)) {
-			const column = this.columnOf(month);
-			const next = this.columnOf(addMonths(month, 1));
-			labels.push({
-				column,
-				span: Math.max(1, (next < 0 ? weeks.length : next) - column),
-				day: month
-			});
-		}
-		const ends = /* @__PURE__ */ new Set();
-		for (const event of this.events ?? []) {
-			ends.add(event.start);
-			if (event.end) ends.add(event.end);
-		}
-		return b$1`<div class="calendar" part="calendar" style=${`--ds-calendar-weeks: ${weeks.length}`}>
-      ${this.renderHeader()}
-      <div class="body">
-        <div class="rail" part="weekdays" aria-hidden="true">
-          ${short.map((name, row) => b$1`<span class="weekday" data-narrow=${narrow[row]}>${row % 2 === 1 ? name : ""}</span>`)}
+	renderEnd(side, value, name) {
+		const label = side === "start" ? name : `${name}, ${this.pickerWords(void 0, "End date")}`;
+		return b$1`<div class="field-row" part="field">
+        <input
+          class="ds-input field"
+          type="text"
+          autocomplete="off"
+          aria-label=${label}
+          placeholder=${side === "start" ? this.pickerWords(this.placeholder, "Choose a date") : this.pickerWords(void 0, "End date")}
+          .value=${this.fieldText(value)}
+          @change=${(event) => this.typed(side, event.target)}
+          @keydown=${(event) => {
+			if (event.key === "Enter") {
+				event.preventDefault();
+				this.typed(side, event.target);
+			}
+		}}
+        />
+      </div>
+      ${this.time ? b$1`<div class="field-row" part="field">
+            <input
+              class="ds-input clock"
+              type="time"
+              aria-label=${`${label}, ${this.pickerWords(void 0, "Time")}`}
+              .value=${value?.time ?? ""}
+              ?disabled=${!this.ends.start}
+              @change=${(event) => this.timed(side, event.target)}
+            />
+          </div>` : A}`;
+	}
+	renderPicker() {
+		const { start, end } = this.ends;
+		const text = this.faceText();
+		const name = this.label ? this.pickerWords(this.label, this.label) : this.pickerWords(void 0, "Date");
+		const days = start ? end ? `${start.day}/${end.day}` : start.day : "";
+		return b$1`<button
+        class="ds-select trigger"
+        part="trigger"
+        type="button"
+        aria-haspopup="dialog"
+        aria-expanded=${String(this.open)}
+        aria-label=${start ? `${name}, ${text}` : name}
+        ?disabled=${this.disabled}
+        ?data-empty=${!start}
+        @click=${this.toggle}
+        @keydown=${this.onTriggerKey}
+      >
+        <ds-icon class="icon" type="calendar" aria-hidden="true"></ds-icon>
+        <span class="text">${text}</span>
+        <ds-icon class="arrow" type="down" aria-hidden="true"></ds-icon>
+      </button>
+      <div
+        class="popover"
+        part="popover"
+        popover="manual"
+        role="dialog"
+        aria-label=${name}
+        @keydown=${this.onPanelKey}
+        @focusout=${this.onPanelFocusOut}
+      >
+        <div class="fields">
+          ${this.renderEnd("start", start, name)}
+          ${this.renderEnd("end", start ? end ?? start : void 0, name)}
         </div>
-        <div class="scroller" part="scroller" @scroll=${this.onScroll}>
-          <div class="months" aria-hidden="true">
-            ${labels.map(({ column, span, day }) => b$1`<span class="month" style=${`grid-column: ${column + 1} / span ${span}`}>${day.slice(5, 7) === "01" || day === this.firstMonth ? monthTitle(day, "short") : monthName(day, "short")}</span>`)}
-          </div>
-          <div class="frame" part="frame">
-            <div
-              class="grid"
-              part="grid"
-              role="grid"
-              aria-label=${this.nameOr(`${monthTitle(this.firstMonth)} – ${monthTitle(addMonths(this.firstMonth, this.monthCount - 1))}`)}
-              @keydown=${this.onKeyDown}
-              @click=${this.onClick}
-            >
-              ${short.map((_, row) => b$1`<div role="row" class="row">
-                <span role="rowheader" class="hidden">${long[row]}</span>
-                ${weeks.map((start, column) => {
-			const day = addDays(start, row);
-			const events = this.eventsOn(day);
-			const isToday = day === today;
-			const { selected, inside } = this.selection(day);
-			const written = isToday || selected || events.length > 0 && ends.has(day);
-			const fill = fillOf(events);
-			return b$1`<div
-                    role="gridcell"
-                    class="cell"
-                    part=${[
-				"cell",
-				isToday ? "today" : "",
-				selected ? "selected" : "",
-				events.length ? "filled" : ""
-			].filter(Boolean).join(" ")}
-                    data-day=${day}
-                    tabindex=${day === tab ? 0 : -1}
-                    aria-label=${this.cellLabel(day, events)}
-                    title=${this.activity ? this.cellLabel(day, events) : A}
-                    aria-selected=${this.selectable ? String(selected || inside) : A}
-                    aria-current=${isToday ? "date" : A}
-                    aria-disabled=${this.allowed(day) ? A : "true"}
-                    ?data-today=${isToday}
-                    ?data-selected=${selected}
-                    ?data-inside=${inside}
-                    ?data-filled=${events.length > 0}
-                    ?data-first-row=${row === 0}
-                    ?data-first-column=${column === 0}
-                    style=${`grid-row: ${row + 1}; grid-column: ${column + 1};${fill ? ` --ds-calendar-cell-fill: ${fill};` : ""}`}
-                  >${written ? b$1`<span class="date" aria-hidden="true">${dateNumber(day)}</span>` : A}</div>`;
-		})}
-              </div>`)}
-            </div>
+        <ds-calendar
+          compact
+          selectable
+          fixed
+          outside-days
+          .value=${days}
+          .min=${this.min}
+          .max=${this.max}
+          .weekStart=${this.weekStart}
+          .today=${this.today}
+          @change=${this.picked}
+        ></ds-calendar>
+        <div class="options" part="options">
+          <div class="separator" aria-hidden="true"></div>
+          <div class="option" @click=${this.passPress}>
+            <span>${this.pickerWords(void 0, "Include time")}</span>
+            <button class="ds-switch" type="button" role="switch" aria-label=${this.pickerWords(void 0, "Include time")} aria-checked=${String(this.time)} @click=${this.setTime}></button>
           </div>
+          ${this.required ? A : b$1`<div class="separator" aria-hidden="true"></div>
+                <button class="option clear" part="clear" type="button" ?disabled=${!start} @click=${this.clear}>${this.pickerWords(void 0, "Clear")}</button>`}
         </div>
-      </div>
-    </div>`;
-	}
-	updated(changed) {
-		super.updated(changed);
-		if (this.placed && changed.has("start") && this.visible && !this.focusDay) this.scrollToDay(this.visible, false);
+      </div>`;
 	}
 };
-_CalendarLarge = CalendarLarge;
-_CalendarLarge.properties = {
+_Calendar = Calendar;
+_Calendar.formAssociated = true;
+_Calendar.properties = {
 	...CalendarBase.properties,
-	start: {
+	month: {
 		type: String,
 		reflect: true
 	},
-	months: { type: Number },
-	scale: { type: Number },
-	activity: {
+	compact: {
+		type: Boolean,
+		reflect: true
+	},
+	dayWidth: {
+		type: Number,
+		attribute: "day-width"
+	},
+	lines: { type: Number },
+	weekNumbers: {
+		type: Boolean,
+		attribute: "week-numbers",
+		reflect: true
+	},
+	fixed: {
+		type: Boolean,
+		reflect: true
+	},
+	outsideDays: {
 		type: Boolean,
+		attribute: "outside-days",
 		reflect: true
 	},
 	noHeader: {
@@ -11540,530 +11632,578 @@ _CalendarLarge.properties = {
 		attribute: "no-header",
 		reflect: true
 	},
-	visible: { state: true }
+	noToday: {
+		type: Boolean,
+		attribute: "no-today",
+		reflect: true
+	},
+	picker: {
+		type: Boolean,
+		reflect: true
+	},
+	name: {
+		type: String,
+		reflect: true
+	},
+	placeholder: { type: String },
+	length: { type: String },
+	time: {
+		type: Boolean,
+		reflect: true
+	},
+	required: {
+		type: Boolean,
+		reflect: true
+	},
+	disabled: {
+		type: Boolean,
+		reflect: true
+	},
+	open: {
+		type: Boolean,
+		reflect: true
+	},
+	unfolded: { state: true }
 };
-_CalendarLarge.styles = [
+_Calendar.styles = [
 	r$3(component_metrics_default),
 	r$3(controls_default),
-	r$3(ds_calendar_large_default)
+	r$3(ds_calendar_default)
 ];
-define("ds-calendar-large", CalendarLarge);
-//#endregion
-//#region DS1/1-root/carousel.css?inline
-var carousel_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\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/*\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/* 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";
+define("ds-calendar", Calendar);
 //#endregion
-//#region DS1/3-unit/styles/ds-carousel.css?inline
-var ds_carousel_default = "/* ds-carousel.css */\n/* The element only places the parts; 1-root/carousel.css draws them and\n   controls.css the buttons. The slides are the element's children, so the\n   track's rules for its children are said again for slotted ones. */\n\n:host {\n  display: block;\n  min-width: 0;\n}\n\n:host([hidden]) {\n  display: none !important;\n}\n\n::slotted(*) {\n  box-sizing: border-box;\n  flex: none;\n  min-width: 0;\n  margin: 0;\n  scroll-snap-align: start;\n}\n\n/* One slide to a stop; a strip of slides of their own width may pass a few. */\n:host(:not([slide-width=\"auto\"])) ::slotted(*) {\n  scroll-snap-stop: always;\n}\n\n:host(:dir(rtl)) :is(.ds-carousel__previous, .ds-carousel__next) > ds-icon {\n  transform: scaleX(-1);\n}\n";
+//#region DS1/3-unit/styles/ds-calendar-large.css?inline
+var ds_calendar_large_default = "/* ds-calendar-large.css\n * The grid drawn --ds-calendar-scale times (one and a half by default): a\n * cell is a square of 30px, its lines 1.5px, its words the heading size\n * times the scale (19.5px). Weeks run in columns and the days down them; the\n * frame's corners are four tenths of a cell. Today is a red disc nine tenths\n * of a cell across, the selected day an ink square of the same size. */\n\n:host {\n  --ds-calendar-cell: calc(var(--ds-unit) * var(--ds-calendar-scale, 1.5));\n  --ds-calendar-stroke: calc(1px * var(--ds-calendar-scale, 1.5));\n  --ds-calendar-ink: var(--ds-text-color);\n  --ds-calendar-event-fill: var(--ds-apple-green);\n  --ds-calendar-today: var(--ds-red-for-blood);\n  --ds-calendar-today-ink: var(--ds-white, #fff);\n  --ds-calendar-mark: calc(var(--ds-calendar-cell) * 0.9);\n  --ds-calendar-corner: calc(var(--ds-calendar-cell) * 0.4);\n  --ds-calendar-rail: calc(var(--ds-calendar-cell) * 2);\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: calc(var(--ds-type-size-heading) * var(--ds-calendar-scale, 1.5));\n  font-weight: var(--ds-type-weight-default);\n  line-height: 1;\n  letter-spacing: var(--ds-type-letterspacing-default);\n}\n:host([hidden]) { display: none !important; }\n\n.calendar { min-width: 0; }\n\n/* The title and the arrows: one cell high, over the months. */\n.header {\n  display: flex;\n  align-items: flex-end;\n  gap: calc(4px * var(--ds-sf, 1));\n  height: var(--ds-calendar-cell);\n  margin-inline-start: calc(var(--ds-calendar-rail) + var(--ds-unit) / 2);\n  font-size: var(--ds-type-size-default);\n  line-height: var(--ds-type-lineheight-default);\n}\n.title {\n  flex: 1 1 auto;\n  min-width: 0;\n  overflow: hidden;\n  font-size: calc(var(--ds-type-size-heading) * var(--ds-calendar-scale, 1.5));\n  line-height: var(--ds-calendar-cell);\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n.controls { display: flex; flex: 0 0 auto; align-items: flex-end; gap: 0; }\n/* Each arrow is a chevron on its own square, as in a month. */\n.nav { flex: 0 0 auto; width: var(--ds-unit); height: var(--ds-control-height); border-radius: var(--ds-radius); color: var(--ds-title-color); }\n.nav:hover:not(:disabled) { background: var(--ds-fill); color: var(--ds-text-color); }\n:host(:dir(rtl)) .nav > ds-icon { transform: scaleX(-1); }\n\n.body {\n  display: grid;\n  grid-template-columns: var(--ds-calendar-rail) minmax(0, 1fr);\n  column-gap: calc(var(--ds-unit) / 2);\n}\n\n/* The weekdays down the start, outside the scroll: every other one named. */\n.rail {\n  display: grid;\n  grid-template-rows: repeat(7, var(--ds-calendar-cell));\n  padding-block-start: var(--ds-calendar-cell);\n  color: var(--ds-title-color);\n  font-size: var(--ds-type-size-default);\n  line-height: var(--ds-type-lineheight-default);\n}\n.weekday {\n  display: flex;\n  align-items: center;\n  justify-content: flex-end;\n  white-space: nowrap;\n}\n\n.scroller {\n  overflow-x: auto;\n  overflow-y: hidden;\n  scrollbar-width: none;\n  overscroll-behavior-x: contain;\n}\n.scroller::-webkit-scrollbar { display: none; }\n\n/* The months over their weeks, one cell high, their names on its foot. */\n.months {\n  display: grid;\n  grid-template-columns: repeat(var(--ds-calendar-weeks), var(--ds-calendar-cell));\n  height: var(--ds-calendar-cell);\n}\n.month {\n  display: flex;\n  align-items: flex-end;\n  min-width: 0;\n  padding: 0 var(--ds-calendar-stroke) calc(3px * var(--ds-calendar-scale, 1.5));\n  overflow: hidden;\n  white-space: nowrap;\n}\n\n/* The frame: a line all round with rounded corners; the cells draw the lines inside. */\n.frame {\n  box-sizing: border-box;\n  width: max-content;\n  border: var(--ds-calendar-stroke) solid var(--ds-calendar-ink);\n  border-radius: var(--ds-calendar-corner);\n  overflow: hidden;\n}\n.grid {\n  display: grid;\n  grid-template-columns: repeat(var(--ds-calendar-weeks), var(--ds-calendar-cell));\n  grid-template-rows: repeat(7, var(--ds-calendar-cell));\n}\n.row { display: contents; }\n.hidden {\n  position: absolute;\n  width: 1px;\n  height: 1px;\n  overflow: hidden;\n  clip-path: inset(50%);\n  white-space: nowrap;\n}\n\n.cell {\n  box-sizing: border-box;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: var(--ds-calendar-cell);\n  height: var(--ds-calendar-cell);\n  border-block-start: var(--ds-calendar-stroke) solid var(--ds-calendar-ink);\n  border-inline-start: var(--ds-calendar-stroke) solid var(--ds-calendar-ink);\n  background: var(--ds-calendar-cell-fill, transparent);\n  font-variant-numeric: tabular-nums;\n  outline: none;\n}\n.cell[data-first-row] { border-block-start-width: 0; }\n.cell[data-first-column] { border-inline-start-width: 0; }\n.cell[data-filled] { color: var(--ds-slate); }\n:host([selectable]) .cell:not([aria-disabled=\"true\"]) { cursor: pointer; }\n:host([selectable]) .cell:not([aria-disabled=\"true\"], [data-filled]):hover { background: var(--ds-row-fill-hover, var(--ds-fill)); }\n.cell:focus-visible { outline: 2px solid var(--ds-focus-ring); outline-offset: -3px; }\n.cell[aria-disabled=\"true\"] { color: var(--ds-title-color); }\n\n.date {\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  letter-spacing: 0;\n}\n.cell[data-today] .date { border-radius: 999px; background: var(--ds-calendar-today); color: var(--ds-calendar-today-ink); }\n.cell[data-selected] .date { background: var(--ds-calendar-ink); color: var(--ds-paper); }\n.cell[data-inside]:not([data-filled]) { background: color-mix(in srgb, var(--ds-calendar-ink) 12%, var(--ds-paper)); }\n.cell[data-today][data-selected] .date { border-radius: 999px; box-shadow: inset 0 0 0 var(--ds-calendar-stroke) var(--ds-calendar-today); }\n\n/* On a narrow screen the weekdays take one letter and one square. */\n@media (max-width: 720px) {\n  :host { --ds-calendar-rail: var(--ds-unit); }\n  .rail .weekday:not(:empty) { font-size: 0; }\n  .rail .weekday:not(:empty)::after { content: attr(data-narrow); font-size: var(--ds-type-size-default); }\n}\n\n/* Activity keeps the day grid, with quiet separated squares and event colours. */\n:host([activity]) .frame { border: 0; border-radius: 0; }\n:host([activity]) .cell { position: relative; border: 0; background: none; }\n:host([activity]) .cell::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([activity]) .date { display: none; }\n:host([activity]) .cell[data-selected]::before { outline: 1px solid var(--ds-calendar-ink); }\n";
 //#endregion
-//#region DS1/3-unit/ds-carousel.ts
-var _Carousel;
-/** A whole number of squares, or `undefined` for a value that is not one. */
-var squares = (value, least) => typeof value === "number" && Number.isFinite(value) && value >= least ? Math.floor(value) : void 0;
+//#region DS1/3-unit/ds-calendar-large.ts
+var _CalendarLarge;
+/** The fill for a day: one colour, or bands side by side. */
+function fillOf(events) {
+	if (!events.length) return void 0;
+	const colours = [...new Set(events.map((event) => event.color || "var(--ds-calendar-event-fill)"))];
+	if (colours.length === 1) return colours[0];
+	const share = 100 / colours.length;
+	return `linear-gradient(90deg, ${colours.map((colour, index) => `${colour} ${index * share}% ${(index + 1) * share}%`).join(", ")})`;
+}
 /**
-* @element ds-carousel
-* @prop {string} label - The region's name: a translation key, or literal
-*   words. Name what the slides show ("Colours", "What people say").
-* @prop {boolean} literal - Show `label` as written, never looked up.
-* @prop {number} current - The slide in view, from 0. Setting it scrolls there.
-* @prop {boolean} buttons - Show previous and next buttons beside the dots.
-* @prop {boolean} noDots - Leave the dots out (`no-dots`).
-* @prop {boolean} end - Draw the last dot as an end marker.
-* @prop {number | "auto"} slideWidth - Each slide's width in whole squares
-*   (`slide-width`); the carousel's own width when not set; `auto` for slides
-*   of their own width, a strip of several in view.
-* @prop {number} gap - Squares between slides; one by default.
-* @prop {string} bleed - `none` (the default) keeps the strip in its box;
-*   `end` runs it on to the window's end edge, the first slide still on the
-*   box's start; `both` runs it to both edges.
-* @prop {boolean} loop - Hold the slides three times over, so the strip has no
-*   end. The copies are hidden from assistive technology and never focused;
-*   a looping carousel draws no dots.
-* @prop {string} autoplay - Move on a slide at a time by itself: empty for
-*   every five seconds, or a number of milliseconds. Held while a person is
-*   in the strip or cannot see it, never under reduced motion, and always
-*   with a pause button.
-* @prop {boolean} free - Slide freely, without stopping at slides.
-*
-* @slot - The slides, one element each.
-*
-* @fires change - A person moved to another slide: by swiping, scrolling, a
-*   dot or a button. `detail` is `{ index, previous }`. Setting `current` or
-*   calling `goTo()` does not fire it.
+* @element ds-calendar-large
+* @prop {string} start - The first month drawn, `YYYY-MM`; the month before
+*   today's by default.
+* @prop {number} months - How many months are drawn: 6 by default.
+* @prop {number} scale - How many times the grid it is drawn: 1.5 by default.
+* @prop {string} value - The selected day, `YYYY-MM-DD`.
+* @prop {boolean} selectable - Pressing a day selects it and fires `change`.
+* @prop {boolean} noHeader - Leave out the title and arrows (`no-header`).
+* @prop {string} min - The first day a person may choose.
+* @prop {string} max - The last day a person may choose.
+* @prop {string} weekStart - The week's first day (`week-start`); the
+*   language's own by default.
+* @prop {string} today - The day drawn as today; the reader's own by default.
+* @prop {CalendarEvent[]} events - What happens on the days (property only).
 *
-* The element is a region described as a carousel, named by `label`; each
-* slide is a group labelled "2 of 5" unless the page labels it, and the
-* current slide is announced politely when it changes. It moves on its own
-* only with `autoplay`. `bleed`, `loop` and `autoplay` are read when the
-* element first draws; put a new element in its place to change them.
+* @fires day-press - A day was pressed or chosen with Enter or Space; `{ day, events }`.
+* @fires change - A person selected a day; `{ value, previous }`.
+* @fires navigate - The months drawn moved on or back; `{ month }`, the first one.
 *
 * @example
-* <ds-carousel label="Colours" slide-width="12" buttons>
-*   <figure>…</figure>
-*   <figure>…</figure>
-* </ds-carousel>
+* <ds-calendar-large start="2026-09" months="6"></ds-calendar-large>
 */
-var Carousel = class extends i$2 {
+var CalendarLarge = class extends CalendarBase {
 	constructor() {
 		super();
-		this.drive = null;
-		this.own = /* @__PURE__ */ new Map();
+		this.weeksRun = "columns";
+		this.byDay = /* @__PURE__ */ new Map();
+		this.placed = false;
 		this.frame = 0;
-		this.moving = false;
-		this.relabel = () => {
-			this.labelSlides();
-			this.requestUpdate();
-		};
-		this.scrolled = () => {
+		this.onScroll = () => {
 			cancelAnimationFrame(this.frame);
-			if (this.loop) return;
 			this.frame = requestAnimationFrame(() => {
-				if (this.pending !== void 0) {
-					clearTimeout(this.settle);
-					this.settle = setTimeout(() => {
-						this.pending = void 0;
-					}, 150);
-					return;
-				}
-				const track = this.track;
-				if (track) this.show(nearestSlide(track, this.slides, this.index));
+				const scroller = this.scroller;
+				const cell = scroller?.querySelector(".cell")?.getBoundingClientRect().width;
+				if (!scroller || !cell) return;
+				const column = Math.min(this.weekStarts.length - 1, Math.max(0, Math.round(Math.abs(scroller.scrollLeft) / cell)));
+				this.visible = startOfMonth(addDays(this.weekStarts[column], 3));
 			});
 		};
-		this.ended = () => {
-			this.pending = void 0;
-		};
-		this.picked = (event) => {
-			event.stopPropagation();
+		this.onKeyDown = (event) => {
+			const cell = event.target.closest("[data-day]");
+			if (!cell) return;
+			const day = cell.dataset.day;
+			if (event.key === "Enter" || event.key === " ") {
+				event.preventDefault();
+				this.press(day);
+				return;
+			}
+			const target = this.keyTarget(event, day);
+			if (!target) return;
 			event.preventDefault();
-			this.move(event.detail.index);
+			if (target < this.weekStarts[0] || target > this.lastDay) {
+				const by = target < this.weekStarts[0] ? -1 : 1;
+				const first = addMonths(this.firstMonth, by);
+				this.start = first.slice(0, 7);
+				this.announceMonth(first);
+			}
+			this.focusCell(target);
 		};
-		this.literal = false;
-		this.current = 0;
-		this.buttons = false;
-		this.noDots = false;
-		this.end = false;
-		this.bleed = "none";
-		this.loop = false;
-		this.autoplay = null;
-		this.free = false;
-		this.count = 0;
-		this.announcement = "";
-		this.paused = false;
+		this.onClick = (event) => {
+			const cell = event.composedPath().find((node) => node instanceof HTMLElement && node.dataset?.day);
+			if (!cell) return;
+			const day = cell.dataset.day;
+			this.focusDay = day;
+			this.press(day);
+		};
+		this.noHeader = false;
+		this.activity = false;
 	}
-	/** The slides: the elements given to the carousel, without a loop's copies. */
-	get slides() {
-		return [...this.children].filter((child) => child instanceof HTMLElement && !child.hasAttribute("slot") && !child.hasAttribute("data-ds-carousel-copy"));
+	/** The first of the first month drawn. */
+	get firstMonth() {
+		return readMonth(this.start) ?? addMonths(startOfMonth(this.todayDay), -1);
 	}
-	/** Milliseconds between autoplay steps; 0 for none. */
-	get every() {
-		return autoplayInterval(this.autoplay);
+	get monthCount() {
+		const count = this.months;
+		return typeof count === "number" && Number.isFinite(count) ? Math.max(1, Math.min(36, Math.floor(count))) : 6;
 	}
-	/** Slides of their own width: a strip. */
-	get strip() {
-		return this.slideWidth === "auto";
+	/** The first day of each week drawn, from the week holding the first month's first day. */
+	get weekStarts() {
+		const first = this.firstMonth;
+		const from = addDays(first, -((weekdayOf(first) - this.firstDay + 7) % 7));
+		const last = addDays(addMonths(first, this.monthCount), -1);
+		const weeks = [];
+		for (let day = from; day <= last; day = addDays(day, 7)) weeks.push(day);
+		return weeks;
 	}
-	get track() {
-		return this.renderRoot.querySelector(".ds-carousel__track");
+	get lastDay() {
+		return addDays(this.weekStarts.at(-1), 6);
 	}
-	/** The slide in view, inside the count. */
-	get index() {
-		const current = Number.isFinite(this.current) ? Math.floor(this.current) : 0;
-		return Math.max(0, Math.min(this.count - 1, current));
+	eventsOn(day) {
+		return this.byDay.get(day) ?? [];
 	}
-	connectedCallback() {
-		super.connectedCallback();
-		window.addEventListener("language-changed", this.relabel);
-		window.addEventListener("translations-loaded", this.relabel);
+	willUpdate(changed) {
+		super.willUpdate(changed);
+		const scale = typeof this.scale === "number" && Number.isFinite(this.scale) && this.scale > 0 ? this.scale : this.activity ? 1 : 1.5;
+		this.style.setProperty("--ds-calendar-scale", String(scale));
+	}
+	firstUpdated() {
+		const today = this.todayDay;
+		this.scrollToDay(today >= this.weekStarts[0] && today <= this.lastDay ? startOfMonth(today) : this.firstMonth, false);
+		this.placed = true;
 	}
 	disconnectedCallback() {
-		window.removeEventListener("language-changed", this.relabel);
-		window.removeEventListener("translations-loaded", this.relabel);
 		cancelAnimationFrame(this.frame);
-		clearTimeout(this.settle);
-		this.drive?.stop();
-		this.drive = null;
 		super.disconnectedCallback();
 	}
-	words(value, fallback, params) {
-		const text = value && this.literal ? value : getText(value || fallback, params) || value || fallback;
-		return params ? text.replace(/\{\{?(\w+)\}?\}/g, (whole, name) => name in params ? String(params[name]) : whole) : text;
-	}
-	/** Writes an attribute the page has not written, and remembers it as this element's. */
-	write(element, name, value) {
-		const mine = this.own.get(element) ?? /* @__PURE__ */ new Set();
-		if (element.hasAttribute(name) && !mine.has(name)) return;
-		mine.add(name);
-		this.own.set(element, mine);
-		if (element.getAttribute(name) !== value) element.setAttribute(name, value);
-	}
-	labelSlides() {
-		const slides = this.slides;
-		const labelled = (slide) => slide.hasAttribute("aria-labelledby");
-		slides.forEach((slide, index) => {
-			this.write(slide, "role", "group");
-			this.write(slide, "aria-roledescription", this.words(void 0, "Slide"));
-			if (!labelled(slide)) this.write(slide, "aria-label", this.words(void 0, "{index} of {count}", {
-				index: index + 1,
-				count: slides.length
-			}));
-		});
-		this.count = slides.length;
+	get scroller() {
+		return this.renderRoot.querySelector(".scroller");
 	}
-	willUpdate(changed) {
-		super.willUpdate(changed);
-		if (!this.hasUpdated) this.labelSlides();
-		this.write(this, "role", "region");
-		this.write(this, "aria-roledescription", this.words(void 0, "Carousel"));
-		if (!this.hasAttribute("aria-labelledby")) this.write(this, "aria-label", this.words(this.label, "Carousel"));
-		const width = squares(typeof this.slideWidth === "string" && this.slideWidth !== "auto" ? Number(this.slideWidth) : typeof this.slideWidth === "number" ? this.slideWidth : void 0, 1);
-		const gap = squares(this.gap, 0);
-		if (this.strip) this.style.setProperty("--ds-carousel-slide", "max-content");
-		else if (width) this.style.setProperty("--ds-carousel-slide", `calc(var(--ds-unit) * ${width})`);
-		else this.style.removeProperty("--ds-carousel-slide");
-		if (gap !== void 0) this.style.setProperty("--ds-carousel-gap", `calc(var(--ds-unit) * ${gap})`);
-		else this.style.removeProperty("--ds-carousel-gap");
+	columnOf(day) {
+		return this.weekStarts.findIndex((start) => day >= start && day <= addDays(start, 6));
 	}
-	firstUpdated() {
-		const track = this.track;
-		const bleed = bleedOf(this.bleed);
-		if (track && (bleed !== "none" || this.loop || this.every > 0)) this.drive = driveCarousel(this, track, this, {
-			bleed,
-			loop: this.loop,
-			autoplay: this.every
+	/** Scrolls the week holding `day` to the start of the view. */
+	scrollToDay(day, smooth = true) {
+		const scroller = this.scroller;
+		const column = this.columnOf(day);
+		if (!scroller || column < 0) return;
+		const cell = scroller.querySelector(".cell")?.getBoundingClientRect().width ?? 30;
+		const reduce = matchMedia?.("(prefers-reduced-motion: reduce)").matches;
+		const rtl = getComputedStyle(this).direction === "rtl";
+		scroller.scrollTo({
+			left: (rtl ? -1 : 1) * column * cell,
+			behavior: smooth && !reduce ? "smooth" : "auto"
 		});
+		this.visible = startOfMonth(day);
 	}
-	updated(changed) {
-		super.updated(changed);
-		if (this.loop) return;
-		if (changed.has("current")) {
-			if (this.moving) {
-				this.moving = false;
-				return;
-			}
-			this.travel(this.index, changed.get("current") !== void 0);
-		} else if (changed.has("count") && !changed.get("count") && this.index > 0) this.travel(this.index, false);
-	}
-	/** Goes to a slide: smoothly, unless the reader asks for reduced motion. Fires no `change`. */
-	goTo(index) {
-		this.current = index;
-	}
-	/** Goes to the next slide, as the next button does. */
-	next() {
-		if (this.drive) this.drive.step(1);
-		else this.move(this.index + 1);
-	}
-	/** Goes to the previous slide, as the previous button does. */
-	previous() {
-		if (this.drive) this.drive.step(-1);
-		else this.move(this.index - 1);
+	/** Moves the view a month back or on; past the months drawn, the months move with it. */
+	step(by) {
+		const target = addMonths(this.visible ?? this.firstMonth, by);
+		const first = this.firstMonth;
+		const end = addMonths(first, this.monthCount);
+		if (target < first || target >= end) {
+			this.start = addMonths(first, by).slice(0, 7);
+			this.announceMonth(addMonths(first, by));
+			this.updateComplete.then(() => this.scrollToDay(target, false));
+			return;
+		}
+		this.scrollToDay(target);
 	}
-	togglePause() {
-		this.paused = !this.paused;
-		this.drive?.pause(this.paused);
+	/** The month before, as the previous arrow does. */
+	previousMonth() {
+		this.step(-1);
 	}
-	travel(index, smooth) {
-		const track = this.track;
-		const slide = this.slides[index];
-		if (!track || !slide || !scrollToSlide(track, slide, smooth)) return;
-		this.pending = index;
-		clearTimeout(this.settle);
-		this.settle = setTimeout(() => {
-			this.pending = void 0;
-		}, 600);
+	/** The month after, as the next arrow does. */
+	nextMonth() {
+		this.step(1);
 	}
-	/** A person moved to `index`: show it, say it, and fire `change`. */
-	show(index) {
-		const target = Math.max(0, Math.min(this.count - 1, index));
-		const previous = this.index;
-		if (target === previous || this.count === 0) return;
-		this.moving = true;
-		this.current = target;
-		this.announcement = this.words(void 0, "{index} of {count}", {
-			index: target + 1,
-			count: this.count
-		});
-		this.dispatchEvent(new CustomEvent("change", {
-			bubbles: true,
-			composed: true,
-			detail: {
-				index: target,
-				previous
-			}
-		}));
+	/** Brings today into view, moving the months drawn when it is outside them. */
+	showToday() {
+		const today = this.todayDay;
+		if (today < this.weekStarts[0] || today > this.lastDay) {
+			const first = addMonths(startOfMonth(today), -1);
+			this.start = first.slice(0, 7);
+			this.announceMonth(first);
+			this.updateComplete.then(() => this.scrollToDay(startOfMonth(today), false));
+		} else this.scrollToDay(startOfMonth(today));
+		this.focusDay = today;
 	}
-	move(index) {
-		const target = Math.max(0, Math.min(this.count - 1, index));
-		this.travel(target, true);
-		this.show(target);
+	get tabDay() {
+		const first = this.weekStarts[0], last = this.lastDay;
+		for (const day of [
+			this.focusDay,
+			this.chosen.start,
+			this.todayDay
+		]) if (day && day >= first && day <= last) return day;
+		return this.firstMonth;
 	}
-	render() {
-		const index = this.index;
-		const driven = this.drive !== null || bleedOf(this.bleed) !== "none" || this.loop || this.every > 0;
-		const button = (which) => b$1`<button
-      class="ds-button ds-button--icon ds-carousel__${which}"
+	renderHeader() {
+		if (this.noHeader) return A;
+		const arrow = (which) => b$1`<button
+      class="ds-button ds-button--icon nav"
       part=${which}
       type="button"
-      aria-label=${this.words(void 0, which === "previous" ? "Previous slide" : "Next slide")}
-      ?disabled=${!driven && (which === "previous" ? index <= 0 : index >= this.count - 1)}
-      @click=${() => which === "previous" ? this.previous() : this.next()}
-    ><ds-icon type=${which === "previous" ? "left" : "right"} aria-hidden="true"></ds-icon></button>`;
-		const moving = this.every > 0 && !prefersReducedMotion();
-		const dots = !this.noDots && !this.loop;
-		const controls = this.buttons || dots || moving;
-		const bleed = bleedOf(this.bleed);
-		return b$1`<div class="ds-carousel" part="carousel" data-slides=${this.strip ? "auto" : A} data-bleed=${bleed === "none" ? A : bleed} data-snap=${this.free ? "none" : A}>
-      <div class="ds-carousel__track" part="track" @scroll=${this.scrolled} @scrollend=${this.ended}>
-        <slot @slotchange=${() => this.labelSlides()}></slot>
+      aria-label=${this.words(which === "previous" ? "Previous month" : "Next month")}
+      @click=${() => which === "previous" ? this.previousMonth() : this.nextMonth()}
+    ><ds-icon type=${which === "previous" ? "chevron-left" : "chevron-right"} size="large" aria-hidden="true"></ds-icon></button>`;
+		return b$1`<div class="header" part="header">
+      <span class="title" aria-live="polite">${monthTitle(this.visible ?? this.firstMonth)}</span>
+      <span class="controls">
+        ${arrow("previous")}
+        <button class="ds-button ds-button--secondary" part="today" type="button" @click=${() => this.showToday()}>${this.words("Today")}</button>
+        ${arrow("next")}
+      </span>
+    </div>`;
+	}
+	render() {
+		const weeks = this.weekStarts;
+		const first = weeks[0], last = this.lastDay;
+		this.byDay = eventsByDay(this.events ?? [], first, last);
+		const short = weekdayNames(this.firstDay, "short");
+		const narrow = weekdayNames(this.firstDay, "narrow");
+		const long = weekdayNames(this.firstDay, "long");
+		const today = this.todayDay;
+		const tab = this.tabDay;
+		const labels = [];
+		for (let month = this.firstMonth, index = 0; index < this.monthCount; index++, month = addMonths(month, 1)) {
+			const column = this.columnOf(month);
+			const next = this.columnOf(addMonths(month, 1));
+			labels.push({
+				column,
+				span: Math.max(1, (next < 0 ? weeks.length : next) - column),
+				day: month
+			});
+		}
+		const ends = /* @__PURE__ */ new Set();
+		for (const event of this.events ?? []) {
+			ends.add(event.start);
+			if (event.end) ends.add(event.end);
+		}
+		return b$1`<div class="calendar" part="calendar" style=${`--ds-calendar-weeks: ${weeks.length}`}>
+      ${this.renderHeader()}
+      <div class="body">
+        <div class="rail" part="weekdays" aria-hidden="true">
+          ${short.map((name, row) => b$1`<span class="weekday" data-narrow=${narrow[row]}>${row % 2 === 1 ? name : ""}</span>`)}
+        </div>
+        <div class="scroller" part="scroller" @scroll=${this.onScroll}>
+          <div class="months" aria-hidden="true">
+            ${labels.map(({ column, span, day }) => b$1`<span class="month" style=${`grid-column: ${column + 1} / span ${span}`}>${day.slice(5, 7) === "01" || day === this.firstMonth ? monthTitle(day, "short") : monthName(day, "short")}</span>`)}
+          </div>
+          <div class="frame" part="frame">
+            <div
+              class="grid"
+              part="grid"
+              role="grid"
+              aria-label=${this.nameOr(`${monthTitle(this.firstMonth)} – ${monthTitle(addMonths(this.firstMonth, this.monthCount - 1))}`)}
+              @keydown=${this.onKeyDown}
+              @click=${this.onClick}
+            >
+              ${short.map((_, row) => b$1`<div role="row" class="row">
+                <span role="rowheader" class="hidden">${long[row]}</span>
+                ${weeks.map((start, column) => {
+			const day = addDays(start, row);
+			const events = this.eventsOn(day);
+			const isToday = day === today;
+			const { selected, inside } = this.selection(day);
+			const written = isToday || selected || events.length > 0 && ends.has(day);
+			const fill = fillOf(events);
+			return b$1`<div
+                    role="gridcell"
+                    class="cell"
+                    part=${[
+				"cell",
+				isToday ? "today" : "",
+				selected ? "selected" : "",
+				events.length ? "filled" : ""
+			].filter(Boolean).join(" ")}
+                    data-day=${day}
+                    tabindex=${day === tab ? 0 : -1}
+                    aria-label=${this.cellLabel(day, events)}
+                    title=${this.activity ? this.cellLabel(day, events) : A}
+                    aria-selected=${this.selectable ? String(selected || inside) : A}
+                    aria-current=${isToday ? "date" : A}
+                    aria-disabled=${this.allowed(day) ? A : "true"}
+                    ?data-today=${isToday}
+                    ?data-selected=${selected}
+                    ?data-inside=${inside}
+                    ?data-filled=${events.length > 0}
+                    ?data-first-row=${row === 0}
+                    ?data-first-column=${column === 0}
+                    style=${`grid-row: ${row + 1}; grid-column: ${column + 1};${fill ? ` --ds-calendar-cell-fill: ${fill};` : ""}`}
+                  >${written ? b$1`<span class="date" aria-hidden="true">${dateNumber(day)}</span>` : A}</div>`;
+		})}
+              </div>`)}
+            </div>
+          </div>
+        </div>
       </div>
-      ${controls && this.count > 1 ? b$1`<div class="ds-carousel__controls" part="controls">
-            ${moving ? b$1`<button
-                  class="ds-button ds-button--icon ds-carousel__pause"
-                  part="pause"
-                  type="button"
-                  aria-pressed=${String(this.paused)}
-                  aria-label=${this.words(void 0, this.paused ? "Play" : "Pause")}
-                  @click=${this.togglePause}
-                ><ds-icon type=${this.paused ? "play-alt" : "pause"} aria-hidden="true"></ds-icon></button>` : A}
-            ${this.buttons ? button("previous") : A}
-            ${dots ? b$1`<ds-progress part="dots" .dots=${this.count} .active=${index} ?end=${this.end} @select=${this.picked}></ds-progress>` : A}
-            ${this.buttons ? button("next") : A}
-          </div>` : A}
-      <span class="ds-carousel__status" part="status" aria-live="polite" aria-atomic="true">${this.announcement}</span>
     </div>`;
 	}
+	updated(changed) {
+		super.updated(changed);
+		if (this.placed && changed.has("start") && this.visible && !this.focusDay) this.scrollToDay(this.visible, false);
+	}
 };
-_Carousel = Carousel;
-_Carousel.properties = {
-	label: { type: String },
-	literal: {
-		type: Boolean,
-		reflect: true
-	},
-	current: {
-		type: Number,
-		reflect: true
-	},
-	buttons: {
-		type: Boolean,
-		reflect: true
-	},
-	noDots: {
-		type: Boolean,
-		reflect: true,
-		attribute: "no-dots"
-	},
-	end: {
-		type: Boolean,
-		reflect: true
-	},
-	slideWidth: {
-		attribute: "slide-width",
-		reflect: true,
-		converter: {
-			fromAttribute: (value) => value === null ? void 0 : value === "auto" ? "auto" : Number(value),
-			toAttribute: (value) => value === void 0 ? null : String(value)
-		}
-	},
-	gap: { type: Number },
-	bleed: {
+_CalendarLarge = CalendarLarge;
+_CalendarLarge.properties = {
+	...CalendarBase.properties,
+	start: {
 		type: String,
 		reflect: true
 	},
-	loop: {
+	months: { type: Number },
+	scale: { type: Number },
+	activity: {
 		type: Boolean,
 		reflect: true
 	},
-	autoplay: {
-		type: String,
-		reflect: true
-	},
-	free: {
+	noHeader: {
 		type: Boolean,
+		attribute: "no-header",
 		reflect: true
 	},
-	count: { state: true },
-	announcement: { state: true },
-	paused: { state: true }
+	visible: { state: true }
 };
-_Carousel.styles = [
+_CalendarLarge.styles = [
 	r$3(component_metrics_default),
 	r$3(controls_default),
-	r$3(carousel_default),
-	r$3(ds_carousel_default)
+	r$3(ds_calendar_large_default)
 ];
-define("ds-carousel", Carousel);
-//#endregion
-//#region DS1/3-unit/styles/ds-date-picker.css?inline
-var ds_date_picker_default = "/* ds-date-picker.css\n * The field is the select's face: one control high at the foot of its\n * square, ten squares wide by default, the calendar icon at its start and\n * the down arrow at its end. The panel opens on the menu's frame, half a\n * square from the field: a 1px line, half a square inside it, no shadow, so\n * eight squares wide. Inside, on whole squares: the first and last day to\n * type (each with its time below when times are on), one square spare, the\n * compact month one square a day with 18px marks, then Include time and\n * Clear, each one square, set off by one-square separators with a line\n * through them. */\n\n:host {\n  --ds-date-picker-width: calc(10 * var(--ds-unit));\n  box-sizing: border-box;\n  display: inline-flex;\n  align-items: flex-end;\n  vertical-align: bottom;\n  height: var(--ds-unit);\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-type-lineheight-default);\n}\n:host([hidden]) { display: none !important; }\n\n.trigger {\n  display: inline-flex;\n  align-items: flex-end;\n  gap: calc(4px * var(--ds-sf, 1));\n  width: var(--ds-date-picker-width);\n  padding-inline: 0 calc(4px * var(--ds-sf, 1));\n  text-align: start;\n  cursor: pointer;\n}\n.trigger:disabled { cursor: default; }\n.trigger .icon,\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: ellipsis;\n  white-space: nowrap;\n}\n.trigger[data-empty] .text { color: var(--ds-title-color); }\n.trigger[aria-expanded=\"true\"] .arrow { transform: rotate(180deg); }\n\n/* The panel, on the menu's frame. */\n.popover {\n  position: fixed;\n  inset: auto;\n  box-sizing: border-box;\n  margin: 0;\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  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: var(--ds-unit); }\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/* The switches 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/* A separator: one square with a 1px line through its middle. */\n.separator {\n  position: relative;\n  height: var(--ds-unit);\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-date-picker-in 140ms cubic-bezier(0.22, 1, 0.36, 1);\n  }\n  .trigger .arrow { transition: transform 140ms ease; }\n}\n@keyframes ds-date-picker-in {\n  from { opacity: 0; transform: translateY(calc(-4px * var(--ds-sf, 1))); }\n  to { opacity: 1; transform: none; }\n}\n";
+define("ds-calendar-large", CalendarLarge);
 //#endregion
-//#region DS1/3-unit/ds-date-picker.ts
-var _DatePicker;
-var TIME = /^([01]\d|2[0-3]):([0-5]\d)$/;
-/** Reads a value: `2026-10-21`, `2026-10-21T14:30`, or two of them joined by `/`. */
-function readDateValue(value) {
-	const read = (part) => {
-		const [day = "", time = ""] = (part ?? "").trim().split("T");
-		if (!isDay(day)) return void 0;
-		const clock = time.slice(0, 5);
+//#region DS1/0-face/bento.ts
+/** Reads `data-place` ("x y w h"); `undefined` unless it is four whole numbers with a size. */
+function bentoPlace(value) {
+	const parts = (value ?? "").trim().split(/[\s,]+/).map(Number);
+	if (parts.length !== 4 || parts.some((part) => !Number.isInteger(part) || part < 0)) return void 0;
+	const [x, y, w, h] = parts;
+	return w > 0 && h > 0 ? [
+		x,
+		y,
+		w,
+		h
+	] : void 0;
+}
+var overlaps = (a0, a1, b0, b1) => a0 < b1 && b0 < a1;
+/** For each place, the sides that face another tile across a one-square gap. */
+function bentoReach(places) {
+	return places.map(([x, y, w, h], index) => {
+		const others = places.filter((_, other) => other !== index);
 		return {
-			day,
-			time: TIME.test(clock) ? clock : ""
+			start: others.some(([ox, oy, ow, oh]) => ox + ow + 1 === x && overlaps(y, y + h, oy, oy + oh)),
+			end: others.some(([ox, oy, , oh]) => x + w + 1 === ox && overlaps(y, y + h, oy, oy + oh)),
+			top: others.some(([ox, oy, ow, oh]) => oy + oh + 1 === y && overlaps(x, x + w, ox, ox + ow)),
+			bottom: others.some(([ox, oy, ow]) => y + h + 1 === oy && overlaps(x, x + w, ox, ox + ow))
 		};
-	};
-	const [first, second] = (value ?? "").split("/");
-	let start = read(first), end = read(second);
-	if (start && end && `${end.day}T${end.time}` < `${start.day}T${start.time}`) [start, end] = [end, start];
-	return {
-		start,
-		end
-	};
-}
-/**
-* Writes a value from its ends, the times only with `time`. An end that is
-* the same moment as the start leaves the value one day.
-*/
-function writeDateValue(start, end, options) {
-	if (!start) return "";
-	const part = (side) => options.time && side.time ? `${side.day}T${side.time}` : side.day;
-	return end && part(end) !== part(start) ? `${part(start)}/${part(end)}` : part(start);
+	});
 }
-/** Reads what a person typed: a day written `YYYY-MM-DD`, or a date the browser can read ("Oct 21, 2026"). */
-function parseTypedDay(text) {
-	const trimmed = text.trim();
-	if (isDay(trimmed)) return trimmed;
-	const moment = Date.parse(trimmed);
-	return Number.isFinite(moment) ? dayOf(new Date(moment)) : null;
+/** Places one squares bento's tiles: their squares and their reach, as custom properties. */
+function placeBento(bento) {
+	const placed = [...bento.children].filter((child) => child instanceof HTMLElement && !child.hidden).map((tile) => ({
+		tile,
+		place: bentoPlace(tile.dataset.place)
+	})).filter((entry) => !!entry.place);
+	const reach = bentoReach(placed.map((entry) => entry.place));
+	placed.forEach(({ tile, place: [x, y, w, h] }, index) => {
+		const sides = reach[index];
+		tile.style.setProperty("--ds-bento-x", String(x));
+		tile.style.setProperty("--ds-bento-y", String(y));
+		tile.style.setProperty("--ds-bento-w", String(w));
+		tile.style.setProperty("--ds-bento-h", String(h));
+		for (const side of [
+			"start",
+			"top",
+			"end",
+			"bottom"
+		]) tile.style.setProperty(`--ds-bento-${side}`, sides[side] ? "1" : "0");
+	});
 }
-var openPickers = /* @__PURE__ */ new Set();
+//#endregion
+//#region DS1/3-unit/styles/ds-bento.css?inline
+var ds_bento_default = "/* ds-bento.css */\n/* The element's bento: the same as 1-root/bento.css's .ds-bento, on the host and its slotted tiles. */\n\n:host {\n  --ds-bento-gap: calc(var(--ds-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-unit))), auto);\n  grid-auto-flow: row dense;\n  gap: var(--ds-bento-gap);\n}\n:host([hidden]) { display: none !important; }\n\n::slotted(*) {\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::slotted([data-span=\"2\"]) { --ds-bento-span: 2; }\n::slotted([data-span=\"3\"]) { --ds-bento-span: 3; }\n::slotted([data-span=\"4\"]) { --ds-bento-span: 4; }\n::slotted([data-span=\"5\"]) { --ds-bento-span: 5; }\n::slotted([data-span=\"6\"]) { --ds-bento-span: 6; }\n::slotted([data-rows=\"2\"]) { --ds-bento-rows: 2; }\n::slotted([data-rows=\"3\"]) { --ds-bento-rows: 3; }\n::slotted([data-rows=\"4\"]) { --ds-bento-rows: 4; }\n::slotted([data-rows=\"5\"]) { --ds-bento-rows: 5; }\n::slotted([data-rows=\"6\"]) { --ds-bento-rows: 6; }\n\n@media (max-width: 600px) {\n  :host(:not([squares])) { grid-template-columns: minmax(0, 1fr); }\n  :host(:not([squares])) ::slotted(*) { grid-column: auto; }\n}\n\n:host([squares]) {\n  --ds-bento-reach: calc(var(--ds-unit) / 4);\n  /* Exactly its squares wide: each column one square. */\n  width: calc(var(--ds-bento-columns, 48) * var(--ds-unit));\n  max-width: none;\n  grid-template-columns: repeat(var(--ds-bento-columns, 48), var(--ds-unit));\n  grid-auto-rows: var(--ds-unit);\n  grid-auto-flow: row;\n  gap: 0;\n}\n:host([squares]) ::slotted(*) {\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:host([squares]) ::slotted(:not(.ds-card, ds-card)) {\n  padding:\n    calc(var(--ds-unit) + var(--ds-bento-inset-top))\n    calc(var(--ds-unit) + var(--ds-bento-inset-end))\n    calc(var(--ds-unit) + var(--ds-bento-inset-bottom))\n    calc(var(--ds-unit) + var(--ds-bento-inset-start));\n}\n";
+//#endregion
+//#region DS1/3-unit/ds-bento.ts
+var _Bento;
+var Bento = class extends i$2 {
+	constructor() {
+		super();
+		this.squares = false;
+	}
+	connectedCallback() {
+		super.connectedCallback();
+		this.observer = new MutationObserver(() => this.place());
+		this.observer.observe(this, {
+			childList: true,
+			subtree: true,
+			attributes: true,
+			attributeFilter: ["data-place", "hidden"]
+		});
+	}
+	disconnectedCallback() {
+		this.observer?.disconnect();
+		super.disconnectedCallback();
+	}
+	updated() {
+		if (this.columns) this.style.setProperty("--ds-bento-columns", String(this.columns));
+		else this.style.removeProperty("--ds-bento-columns");
+		this.place();
+	}
+	place() {
+		if (this.squares) placeBento(this);
+	}
+	render() {
+		return b$1`<slot @slotchange=${() => this.place()}></slot>`;
+	}
+};
+_Bento = Bento;
+_Bento.properties = {
+	columns: {
+		type: Number,
+		reflect: true
+	},
+	squares: {
+		type: Boolean,
+		reflect: true
+	}
+};
+_Bento.styles = [r$3(component_metrics_default), r$3(ds_bento_default)];
+define("ds-bento", Bento);
+//#endregion
+//#region DS1/1-root/carousel.css?inline
+var carousel_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\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/*\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/* 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";
+//#endregion
+//#region DS1/3-unit/styles/ds-carousel.css?inline
+var ds_carousel_default = "/* ds-carousel.css */\n/* The element only places the parts; 1-root/carousel.css draws them and\n   controls.css the buttons. The slides are the element's children, so the\n   track's rules for its children are said again for slotted ones. */\n\n:host {\n  display: block;\n  min-width: 0;\n}\n\n:host([hidden]) {\n  display: none !important;\n}\n\n::slotted(*) {\n  box-sizing: border-box;\n  flex: none;\n  min-width: 0;\n  margin: 0;\n  scroll-snap-align: start;\n}\n\n/* One slide to a stop; a strip of slides of their own width may pass a few. */\n:host(:not([slide-width=\"auto\"])) ::slotted(*) {\n  scroll-snap-stop: always;\n}\n\n:host(:dir(rtl)) :is(.ds-carousel__previous, .ds-carousel__next) > ds-icon {\n  transform: scaleX(-1);\n}\n";
+//#endregion
+//#region DS1/3-unit/ds-carousel.ts
+var _Carousel;
+/** A whole number of squares, or `undefined` for a value that is not one. */
+var squares = (value, least) => typeof value === "number" && Number.isFinite(value) && value >= least ? Math.floor(value) : void 0;
 /**
-* @element ds-date-picker
-* @prop {string} value - `YYYY-MM-DD`, `YYYY-MM-DDTHH:MM`, or two joined by
-*   `/` for a range; empty for none.
-* @prop {string} name - The form field's name.
-* @prop {string} label - The field's accessible name: a translation key, or
-*   literal words.
-* @prop {boolean} literal - Show `label` and `placeholder` as written.
-* @prop {string} placeholder - The words before a day is chosen; the shared
-*   "Choose a date" by default.
-* @prop {string} length - How a day is written: `short`, `medium` (the
-*   default) or `long`.
-* @prop {boolean} time - Choose a time with each day (the Include time switch).
-* @prop {boolean} noOptions - Leave the Include time switch out (`no-options`);
-*   `time` still applies.
-* @prop {string} min - The first day a person may choose.
-* @prop {string} max - The last day a person may choose.
-* @prop {string} weekStart - The week's first day (`week-start`); the
-*   language's own by default.
-* @prop {string} today - The day drawn as today; the reader's own by default.
-* @prop {boolean} required - A form needs a value; Clear is left out.
-* @prop {boolean} disabled - The field cannot be opened.
-* @prop {boolean} open - The panel is open.
+* @element ds-carousel
+* @prop {string} label - The region's name: a translation key, or literal
+*   words. Name what the slides show ("Colours", "What people say").
+* @prop {boolean} literal - Show `label` as written, never looked up.
+* @prop {number} current - The slide in view, from 0. Setting it scrolls there.
+* @prop {boolean} buttons - Show previous and next buttons beside the dots.
+* @prop {boolean} noDots - Leave the dots out (`no-dots`).
+* @prop {boolean} end - Draw the last dot as an end marker.
+* @prop {number | "auto"} slideWidth - Each slide's width in whole squares
+*   (`slide-width`); the carousel's own width when not set; `auto` for slides
+*   of their own width, a strip of several in view.
+* @prop {number} gap - Squares between slides; one by default.
+* @prop {string} bleed - `none` (the default) keeps the strip in its box;
+*   `end` runs it on to the window's end edge, the first slide still on the
+*   box's start; `both` runs it to both edges.
+* @prop {boolean} loop - Hold the slides three times over, so the strip has no
+*   end. The copies are hidden from assistive technology and never focused;
+*   a looping carousel draws no dots.
+* @prop {string} autoplay - Move on a slide at a time by itself: empty for
+*   every five seconds, or a number of milliseconds. Held while a person is
+*   in the strip or cannot see it, never under reduced motion, and always
+*   with a pause button.
+* @prop {boolean} free - Slide freely, without stopping at slides.
 *
-* @fires change - A person changed the value; `{ value, previous }`.
-* @fires input - The same moment, for code listening as to a field.
-* @fires ds-date-picker-toggle - The panel opened or closed; `{ open }`.
+* @slot - The slides, one element each.
+*
+* @fires change - A person moved to another slide: by swiping, scrolling, a
+*   dot or a button. `detail` is `{ index, previous }`. Setting `current` or
+*   calling `goTo()` does not fire it.
+*
+* The element is a region described as a carousel, named by `label`; each
+* slide is a group labelled "2 of 5" unless the page labels it, and the
+* current slide is announced politely when it changes. It moves on its own
+* only with `autoplay`. `bleed`, `loop` and `autoplay` are read when the
+* element first draws; put a new element in its place to change them.
 *
 * @example
-* <ds-date-picker label="When" literal name="when" value="2026-10-21/2026-10-24"></ds-date-picker>
+* <ds-carousel label="Colours" slide-width="12" buttons>
+*   <figure>…</figure>
+*   <figure>…</figure>
+* </ds-carousel>
 */
-var DatePicker = class extends i$2 {
-	constructor() {
-		super();
-		this.internals = typeof this.attachInternals === "function" ? this.attachInternals() : null;
-		this.initial = "";
-		this.shown = false;
-		this.focusMonth = false;
-		this.relabel = () => this.requestUpdate();
-		this.place = () => {
-			const panel = this.panel, trigger = this.trigger;
-			if (!this.shown || !panel || !trigger) return;
-			const rect = trigger.getBoundingClientRect();
-			const view = this.ownerDocument.defaultView;
-			const viewport = view.visualViewport;
-			const left = viewport?.offsetLeft ?? 0, top = viewport?.offsetTop ?? 0;
-			const width = viewport?.width ?? view.innerWidth, height = viewport?.height ?? view.innerHeight;
-			const box = panel.getBoundingClientRect();
-			const gap = (parseFloat(getComputedStyle(panel).paddingTop) || 9) + 1;
-			const square = Math.max(rect.height, gap * 2);
-			const foot = rect.bottom, head = rect.bottom - square;
-			const below = top + height - foot - 2 * gap, above = head - top - 2 * gap;
-			const up = below < box.height && above > below;
-			const x = getComputedStyle(this).direction === "rtl" ? rect.right - box.width : rect.left;
-			panel.style.left = `${Math.max(left + gap, Math.min(x, left + width - gap - box.width))}px`;
-			panel.style.top = `${Math.max(top + gap, up ? head - gap - box.height : foot + gap)}px`;
-		};
-		this.onOutside = (event) => {
-			if (!event.composedPath().includes(this)) this.open = false;
-		};
-		this.toggle = () => {
-			if (this.disabled) return;
-			this.focusMonth = false;
-			this.open = !this.open;
-		};
-		this.onTriggerKey = (event) => {
-			if (this.disabled) return;
-			if (event.key === "ArrowDown" || event.key === "ArrowUp" || (event.key === "Enter" || event.key === " ") && !this.open) {
-				event.preventDefault();
-				this.focusMonth = true;
-				if (this.open) this.focusDay();
-				else this.open = true;
-			}
+var Carousel = class extends i$2 {
+	constructor() {
+		super();
+		this.drive = null;
+		this.own = /* @__PURE__ */ new Map();
+		this.frame = 0;
+		this.moving = false;
+		this.relabel = () => {
+			this.labelSlides();
+			this.requestUpdate();
 		};
-		this.onPanelKey = (event) => {
-			if (event.key === "Escape" && !event.defaultPrevented) {
-				event.preventDefault();
-				event.stopPropagation();
-				this.open = false;
-			}
+		this.scrolled = () => {
+			cancelAnimationFrame(this.frame);
+			if (this.loop) return;
+			this.frame = requestAnimationFrame(() => {
+				if (this.pending !== void 0) {
+					clearTimeout(this.settle);
+					this.settle = setTimeout(() => {
+						this.pending = void 0;
+					}, 150);
+					return;
+				}
+				const track = this.track;
+				if (track) this.show(nearestSlide(track, this.slides, this.index));
+			});
 		};
-		this.onFocusOut = (event) => {
-			const next = event.relatedTarget;
-			if (this.open && next instanceof Node && !this.contains(next) && !this.renderRoot.contains(next)) this.open = false;
+		this.ended = () => {
+			this.pending = void 0;
 		};
 		this.picked = (event) => {
 			event.stopPropagation();
-			const { start, end } = this.ends;
-			const first = {
-				day: event.detail.start,
-				time: start?.time || (this.time ? "09:00" : "")
-			};
-			if (!event.detail.end) {
-				this.awaitingEnd = true;
-				this.write(first, void 0);
-				return;
-			}
-			this.awaitingEnd = false;
-			const last = {
-				day: event.detail.end,
-				time: end?.time || (this.time ? "10:00" : "")
-			};
-			this.write(first, last);
-			if (!this.time) this.open = false;
-		};
-		this.setTime = () => {
-			this.time = !this.time;
-			const { start, end } = this.ends;
-			const timed = (side, clock) => side ? {
-				...side,
-				time: this.time ? side.time || clock : ""
-			} : void 0;
-			this.write(timed(start, "09:00"), timed(end ?? (this.time ? start : void 0), "10:00"));
-		};
-		this.passPress = (event) => {
-			const control = event.currentTarget.querySelector(".ds-switch");
-			if (control && !event.composedPath().includes(control)) control.click();
-		};
-		this.clear = () => {
-			this.commit("");
-			this.open = false;
+			event.preventDefault();
+			this.move(event.detail.index);
 		};
-		this.value = "";
 		this.literal = false;
-		this.time = false;
-		this.noOptions = false;
-		this.required = false;
-		this.disabled = false;
-		this.open = false;
-		this.awaitingEnd = false;
+		this.current = 0;
+		this.buttons = false;
+		this.noDots = false;
+		this.end = false;
+		this.bleed = "none";
+		this.loop = false;
+		this.autoplay = null;
+		this.free = false;
+		this.count = 0;
+		this.announcement = "";
+		this.paused = false;
+	}
+	/** The slides: the elements given to the carousel, without a loop's copies. */
+	get slides() {
+		return [...this.children].filter((child) => child instanceof HTMLElement && !child.hasAttribute("slot") && !child.hasAttribute("data-ds-carousel-copy"));
+	}
+	/** Milliseconds between autoplay steps; 0 for none. */
+	get every() {
+		return autoplayInterval(this.autoplay);
+	}
+	/** Slides of their own width: a strip. */
+	get strip() {
+		return this.slideWidth === "auto";
+	}
+	get track() {
+		return this.renderRoot.querySelector(".ds-carousel__track");
+	}
+	/** The slide in view, inside the count. */
+	get index() {
+		const current = Number.isFinite(this.current) ? Math.floor(this.current) : 0;
+		return Math.max(0, Math.min(this.count - 1, current));
 	}
 	connectedCallback() {
 		super.connectedCallback();
@@ -12073,330 +12213,220 @@ var DatePicker = class extends i$2 {
 	disconnectedCallback() {
 		window.removeEventListener("language-changed", this.relabel);
 		window.removeEventListener("translations-loaded", this.relabel);
-		this.hide(false);
+		cancelAnimationFrame(this.frame);
+		clearTimeout(this.settle);
+		this.drive?.stop();
+		this.drive = null;
 		super.disconnectedCallback();
 	}
-	firstUpdated() {
-		this.initial = this.value;
-	}
-	/** The form was reset: back to the value it started with. */
-	formResetCallback() {
-		this.value = this.initial;
-	}
-	formDisabledCallback(disabled) {
-		this.disabled = disabled;
-	}
-	words(value, fallback) {
-		if (value && this.literal) return value;
-		return getText(value || fallback) || value || fallback;
-	}
-	get trigger() {
-		return this.renderRoot.querySelector(".trigger");
-	}
-	get panel() {
-		return this.renderRoot.querySelector(".popover");
-	}
-	get calendar() {
-		return this.renderRoot.querySelector("ds-calendar");
-	}
-	get ends() {
-		return readDateValue(this.value);
-	}
-	willUpdate(changed) {
-		super.willUpdate(changed);
-		if (changed.has("value") && this.value) {
-			const { start, end } = this.ends;
-			if (!start) this.value = "";
-			else if (start.time || end?.time) this.time = true;
-		}
-		if (changed.has("disabled") && this.disabled) this.open = false;
-	}
-	updated(changed) {
-		super.updated(changed);
-		if (changed.has("value") || changed.has("required")) {
-			this.internals?.setFormValue(this.value || null);
-			if (this.required && !this.value) this.internals?.setValidity({ valueMissing: true }, this.words(void 0, "Choose a date"), this.trigger ?? void 0);
-			else this.internals?.setValidity({});
-		}
-		if (changed.has("open")) if (this.open) this.show();
-		else this.hide(changed.get("open") === true);
-	}
-	/** Opens the panel. */
-	show() {
-		if (this.shown || this.disabled || !this.isConnected) return;
-		const panel = this.panel;
-		if (!panel) return;
-		for (const other of openPickers) if (other !== this) other.open = false;
-		openPickers.add(this);
-		this.shown = true;
-		this.open = true;
-		this.awaitingEnd = false;
-		const calendar = this.calendar;
-		if (calendar) calendar.month = (this.ends.start?.day || this.today || today()).slice(0, 7);
-		panel.showPopover?.();
-		this.place();
-		if (calendar) calendar.updateComplete.then(this.place);
-		this.ownerDocument.addEventListener("pointerdown", this.onOutside, true);
-		this.ownerDocument.addEventListener("scroll", this.place, true);
-		window.addEventListener("resize", this.place);
-		this.dispatchEvent(new CustomEvent("ds-date-picker-toggle", {
-			bubbles: true,
-			composed: true,
-			detail: { open: true }
-		}));
-		if (this.focusMonth) this.focusDay();
-	}
-	/** Closes the panel, giving focus back to the field when it was inside. */
-	hide(restore = true) {
-		if (!this.shown) return;
-		this.shown = false;
-		openPickers.delete(this);
-		this.awaitingEnd = false;
-		const panel = this.panel;
-		const within = panel?.matches(":focus-within");
-		if (panel?.matches(":popover-open")) panel.hidePopover?.();
-		this.ownerDocument.removeEventListener("pointerdown", this.onOutside, true);
-		this.ownerDocument.removeEventListener("scroll", this.place, true);
-		window.removeEventListener("resize", this.place);
-		this.open = false;
-		if (restore && within) this.trigger?.focus({ preventScroll: true });
-		this.dispatchEvent(new CustomEvent("ds-date-picker-toggle", {
-			bubbles: true,
-			composed: true,
-			detail: { open: false }
-		}));
-	}
-	async focusDay() {
-		const calendar = this.calendar;
-		if (!calendar) return;
-		await calendar.updateComplete;
-		calendar.renderRoot.querySelector("[data-day][tabindex=\"0\"]")?.focus({ preventScroll: true });
-	}
-	/** Takes a new value and says so. */
-	commit(value) {
-		const previous = this.value || "";
-		if (value === previous) return;
-		this.value = value;
-		const detail = {
-			value,
-			previous
-		};
-		this.dispatchEvent(new CustomEvent("input", {
-			bubbles: true,
-			composed: true,
-			detail
-		}));
-		this.dispatchEvent(new CustomEvent("change", {
-			bubbles: true,
-			composed: true,
-			detail
-		}));
-	}
-	write(start, end) {
-		this.commit(writeDateValue(start, end, { time: this.time }));
+	words(value, fallback, params) {
+		const text = value && this.literal ? value : getText(value || fallback, params) || value || fallback;
+		return params ? text.replace(/\{\{?(\w+)\}?\}/g, (whole, name) => name in params ? String(params[name]) : whole) : text;
 	}
-	/** A day typed in a field, read when the person leaves it or presses Enter. */
-	typed(side, input) {
-		const { start, end } = this.ends;
-		const text = input.value.trim();
-		if (!text) {
-			if (side === "start") this.commit("");
-			else this.write(start, void 0);
-			return;
-		}
-		const day = parseTypedDay(text);
-		if (!day) {
-			input.value = this.fieldText(side === "start" ? start : end);
-			return;
-		}
-		const next = {
-			day,
-			time: (side === "start" ? start : end)?.time || (this.time ? side === "start" ? "09:00" : "10:00" : "")
-		};
-		if (side === "start") this.write(next, end);
-		else this.write(start ?? next, next);
-		this.awaitingEnd = false;
-		const calendar = this.calendar;
-		if (calendar) calendar.month = day.slice(0, 7);
+	/** Writes an attribute the page has not written, and remembers it as this element's. */
+	write(element, name, value) {
+		const mine = this.own.get(element) ?? /* @__PURE__ */ new Set();
+		if (element.hasAttribute(name) && !mine.has(name)) return;
+		mine.add(name);
+		this.own.set(element, mine);
+		if (element.getAttribute(name) !== value) element.setAttribute(name, value);
 	}
-	timed(side, input) {
-		const { start, end } = this.ends;
-		const clock = TIME.test(input.value) ? input.value : "";
-		if (side === "start" && start) this.write({
-			...start,
-			time: clock
-		}, end);
-		if (side === "end" && start) this.write(start, {
-			day: (end ?? start).day,
-			time: clock
+	labelSlides() {
+		const slides = this.slides;
+		const labelled = (slide) => slide.hasAttribute("aria-labelledby");
+		slides.forEach((slide, index) => {
+			this.write(slide, "role", "group");
+			this.write(slide, "aria-roledescription", this.words(void 0, "Slide"));
+			if (!labelled(slide)) this.write(slide, "aria-label", this.words(void 0, "{index} of {count}", {
+				index: index + 1,
+				count: slides.length
+			}));
 		});
+		this.count = slides.length;
 	}
-	moment(side) {
-		const [year, month, date] = side.day.split("-").map(Number);
-		const [hours, minutes] = (side.time || "12:00").split(":").map(Number);
-		return Date.UTC(year, month - 1, date, hours, minutes);
+	willUpdate(changed) {
+		super.willUpdate(changed);
+		if (!this.hasUpdated) this.labelSlides();
+		this.write(this, "role", "region");
+		this.write(this, "aria-roledescription", this.words(void 0, "Carousel"));
+		if (!this.hasAttribute("aria-labelledby")) this.write(this, "aria-label", this.words(this.label, "Carousel"));
+		const width = squares(typeof this.slideWidth === "string" && this.slideWidth !== "auto" ? Number(this.slideWidth) : typeof this.slideWidth === "number" ? this.slideWidth : void 0, 1);
+		const gap = squares(this.gap, 0);
+		if (this.strip) this.style.setProperty("--ds-carousel-slide", "max-content");
+		else if (width) this.style.setProperty("--ds-carousel-slide", `calc(var(--ds-unit) * ${width})`);
+		else this.style.removeProperty("--ds-carousel-slide");
+		if (gap !== void 0) this.style.setProperty("--ds-carousel-gap", `calc(var(--ds-unit) * ${gap})`);
+		else this.style.removeProperty("--ds-carousel-gap");
 	}
-	formatter(withTime) {
-		return dateFormatter({
-			dateStyle: this.length ?? "medium",
-			...withTime ? { timeStyle: "short" } : {},
-			timeZone: "UTC"
+	firstUpdated() {
+		const track = this.track;
+		const bleed = bleedOf(this.bleed);
+		if (track && (bleed !== "none" || this.loop || this.every > 0)) this.drive = driveCarousel(this, track, this, {
+			bleed,
+			loop: this.loop,
+			autoplay: this.every
 		});
 	}
-	fieldText(side) {
-		return side ? this.formatter(false).format(this.moment(side)) : "";
+	updated(changed) {
+		super.updated(changed);
+		if (this.loop) return;
+		if (changed.has("current")) {
+			if (this.moving) {
+				this.moving = false;
+				return;
+			}
+			this.travel(this.index, changed.get("current") !== void 0);
+		} else if (changed.has("count") && !changed.get("count") && this.index > 0) this.travel(this.index, false);
 	}
-	/** The face's words: one day, or a range written as the language writes one ("Oct 21 – 24, 2026"). */
-	faceText() {
-		const { start, end } = this.ends;
-		if (!start) return this.words(this.placeholder, "Choose a date");
-		const formatter = this.formatter(Boolean(start.time || end?.time));
-		if (!end) return formatter.format(this.moment(start));
-		return formatter.formatRange ? formatter.formatRange(this.moment(start), this.moment(end)) : `${formatter.format(this.moment(start))} – ${formatter.format(this.moment(end))}`;
+	/** Goes to a slide: smoothly, unless the reader asks for reduced motion. Fires no `change`. */
+	goTo(index) {
+		this.current = index;
 	}
-	renderEnd(side, value, name) {
-		const label = side === "start" ? name : `${name}, ${this.words(void 0, "End date")}`;
-		return b$1`<div class="field-row" part="field">
-        <input
-          class="ds-input field"
-          type="text"
-          autocomplete="off"
-          aria-label=${label}
-          placeholder=${side === "start" ? this.words(this.placeholder, "Choose a date") : this.words(void 0, "End date")}
-          .value=${this.fieldText(value)}
-          @change=${(event) => this.typed(side, event.target)}
-          @keydown=${(event) => {
-			if (event.key === "Enter") {
-				event.preventDefault();
-				this.typed(side, event.target);
+	/** Goes to the next slide, as the next button does. */
+	next() {
+		if (this.drive) this.drive.step(1);
+		else this.move(this.index + 1);
+	}
+	/** Goes to the previous slide, as the previous button does. */
+	previous() {
+		if (this.drive) this.drive.step(-1);
+		else this.move(this.index - 1);
+	}
+	togglePause() {
+		this.paused = !this.paused;
+		this.drive?.pause(this.paused);
+	}
+	travel(index, smooth) {
+		const track = this.track;
+		const slide = this.slides[index];
+		if (!track || !slide || !scrollToSlide(track, slide, smooth)) return;
+		this.pending = index;
+		clearTimeout(this.settle);
+		this.settle = setTimeout(() => {
+			this.pending = void 0;
+		}, 600);
+	}
+	/** A person moved to `index`: show it, say it, and fire `change`. */
+	show(index) {
+		const target = Math.max(0, Math.min(this.count - 1, index));
+		const previous = this.index;
+		if (target === previous || this.count === 0) return;
+		this.moving = true;
+		this.current = target;
+		this.announcement = this.words(void 0, "{index} of {count}", {
+			index: target + 1,
+			count: this.count
+		});
+		this.dispatchEvent(new CustomEvent("change", {
+			bubbles: true,
+			composed: true,
+			detail: {
+				index: target,
+				previous
 			}
-		}}
-        />
-      </div>
-      ${this.time ? b$1`<div class="field-row" part="field">
-            <input
-              class="ds-input clock"
-              type="time"
-              aria-label=${`${label}, ${this.words(void 0, "Time")}`}
-              .value=${value?.time ?? ""}
-              ?disabled=${!this.ends.start}
-              @change=${(event) => this.timed(side, event.target)}
-            />
-          </div>` : A}`;
+		}));
+	}
+	move(index) {
+		const target = Math.max(0, Math.min(this.count - 1, index));
+		this.travel(target, true);
+		this.show(target);
 	}
 	render() {
-		const { start, end } = this.ends;
-		const text = this.faceText();
-		const name = this.label ? this.words(this.label, this.label) : this.words(void 0, "Date");
-		const days = start ? this.awaitingEnd ? start.day : `${start.day}/${(end ?? start).day}` : "";
-		return b$1`<button
-        class="ds-select trigger"
-        part="trigger"
-        type="button"
-        aria-haspopup="dialog"
-        aria-expanded=${String(this.open)}
-        aria-label=${start ? `${name}, ${text}` : name}
-        ?disabled=${this.disabled}
-        ?data-empty=${!start}
-        @click=${this.toggle}
-        @keydown=${this.onTriggerKey}
-      >
-        <ds-icon class="icon" type="calendar" aria-hidden="true"></ds-icon>
-        <span class="text">${text}</span>
-        <ds-icon class="arrow" type="down" aria-hidden="true"></ds-icon>
-      </button>
-      <div
-        class="popover"
-        part="popover"
-        popover="manual"
-        role="dialog"
-        aria-label=${name}
-        @keydown=${this.onPanelKey}
-        @focusout=${this.onFocusOut}
-      >
-        <div class="fields">
-          ${this.renderEnd("start", start, name)}
-          ${this.renderEnd("end", start ? end ?? start : void 0, name)}
-        </div>
-        <ds-calendar
-          compact
-          selectable
-          range
-          fixed
-          outside-days
-          .value=${days}
-          .min=${this.min}
-          .max=${this.max}
-          .weekStart=${this.weekStart}
-          .today=${this.today}
-          @change=${this.picked}
-        ></ds-calendar>
-        <div class="options" part="options">
-          ${this.noOptions ? A : b$1`<div class="separator" aria-hidden="true"></div>
-                <div class="option" @click=${this.passPress}>
-                  <span>${this.words(void 0, "Include time")}</span>
-                  <button class="ds-switch" type="button" role="switch" aria-label=${this.words(void 0, "Include time")} aria-checked=${String(this.time)} @click=${this.setTime}></button>
-                </div>`}
-          ${this.required ? A : b$1`<div class="separator" aria-hidden="true"></div>
-                <button class="option clear" part="clear" type="button" ?disabled=${!start} @click=${this.clear}>${this.words(void 0, "Clear")}</button>`}
-        </div>
-      </div>`;
+		const index = this.index;
+		const driven = this.drive !== null || bleedOf(this.bleed) !== "none" || this.loop || this.every > 0;
+		const button = (which) => b$1`<button
+      class="ds-button ds-button--icon ds-carousel__${which}"
+      part=${which}
+      type="button"
+      aria-label=${this.words(void 0, which === "previous" ? "Previous slide" : "Next slide")}
+      ?disabled=${!driven && (which === "previous" ? index <= 0 : index >= this.count - 1)}
+      @click=${() => which === "previous" ? this.previous() : this.next()}
+    ><ds-icon type=${which === "previous" ? "left" : "right"} aria-hidden="true"></ds-icon></button>`;
+		const moving = this.every > 0 && !prefersReducedMotion();
+		const dots = !this.noDots && !this.loop;
+		const controls = this.buttons || dots || moving;
+		const bleed = bleedOf(this.bleed);
+		return b$1`<div class="ds-carousel" part="carousel" data-slides=${this.strip ? "auto" : A} data-bleed=${bleed === "none" ? A : bleed} data-snap=${this.free ? "none" : A}>
+      <div class="ds-carousel__track" part="track" @scroll=${this.scrolled} @scrollend=${this.ended}>
+        <slot @slotchange=${() => this.labelSlides()}></slot>
+      </div>
+      ${controls && this.count > 1 ? b$1`<div class="ds-carousel__controls" part="controls">
+            ${moving ? b$1`<button
+                  class="ds-button ds-button--icon ds-carousel__pause"
+                  part="pause"
+                  type="button"
+                  aria-pressed=${String(this.paused)}
+                  aria-label=${this.words(void 0, this.paused ? "Play" : "Pause")}
+                  @click=${this.togglePause}
+                ><ds-icon type=${this.paused ? "play-alt" : "pause"} aria-hidden="true"></ds-icon></button>` : A}
+            ${this.buttons ? button("previous") : A}
+            ${dots ? b$1`<ds-progress part="dots" .dots=${this.count} .active=${index} ?end=${this.end} @select=${this.picked}></ds-progress>` : A}
+            ${this.buttons ? button("next") : A}
+          </div>` : A}
+      <span class="ds-carousel__status" part="status" aria-live="polite" aria-atomic="true">${this.announcement}</span>
+    </div>`;
 	}
 };
-_DatePicker = DatePicker;
-_DatePicker.formAssociated = true;
-_DatePicker.properties = {
-	value: {
-		type: String,
+_Carousel = Carousel;
+_Carousel.properties = {
+	label: { type: String },
+	literal: {
+		type: Boolean,
 		reflect: true
 	},
-	name: {
-		type: String,
+	current: {
+		type: Number,
 		reflect: true
 	},
-	label: { type: String },
-	literal: {
+	buttons: {
 		type: Boolean,
 		reflect: true
 	},
-	placeholder: { type: String },
-	length: { type: String },
-	time: {
+	noDots: {
 		type: Boolean,
-		reflect: true
+		reflect: true,
+		attribute: "no-dots"
 	},
-	noOptions: {
+	end: {
 		type: Boolean,
-		attribute: "no-options",
 		reflect: true
 	},
-	min: { type: String },
-	max: { type: String },
-	weekStart: {
+	slideWidth: {
+		attribute: "slide-width",
+		reflect: true,
+		converter: {
+			fromAttribute: (value) => value === null ? void 0 : value === "auto" ? "auto" : Number(value),
+			toAttribute: (value) => value === void 0 ? null : String(value)
+		}
+	},
+	gap: { type: Number },
+	bleed: {
 		type: String,
-		attribute: "week-start"
+		reflect: true
 	},
-	today: { type: String },
-	required: {
+	loop: {
 		type: Boolean,
 		reflect: true
 	},
-	disabled: {
-		type: Boolean,
+	autoplay: {
+		type: String,
 		reflect: true
 	},
-	open: {
+	free: {
 		type: Boolean,
 		reflect: true
 	},
-	awaitingEnd: { state: true }
+	count: { state: true },
+	announcement: { state: true },
+	paused: { state: true }
 };
-_DatePicker.styles = [
+_Carousel.styles = [
 	r$3(component_metrics_default),
 	r$3(controls_default),
-	r$3(ds_date_picker_default)
+	r$3(carousel_default),
+	r$3(ds_carousel_default)
 ];
-define("ds-date-picker", DatePicker);
+define("ds-carousel", Carousel);
 //#endregion
 //#region DS1/3-unit/ds-form.ts
 var _Form;
@@ -16539,6 +16569,6 @@ _Image.properties = {
 _Image.styles = r$3(ds_image_default);
 define("ds-image", Image);
 //#endregion
-export { Accordion, Avatar, AvatarGroup, Badge, Button, COMPONENT_VISIBILITY, CONTENTS_LABEL, Calendar, CalendarBase, CalendarLarge, Card, Carousel, ChartElement, Checkbox, ColorInput, Composer, Container, Context, Cycle, DEFAULT_LANGUAGE, DatePicker, DocumentPage, DsTable, EMPTY_HEADING, Empty, FALLBACK_LANGUAGE, FilePicker, Footer, Form, Gap, Grid, GridBars, GridChart, GridLineChart, GridRange, GridRatio, GridSpark, Header, Icon, Image, Input, LANGUAGES, LANGUAGE_METADATA, LOCALE_TAGS, LONG_PRESS_DELAY, List, MENU_LABEL, MESSAGE_ICONS, Matrix, Menu, Message, NOTICE_ICONS, Notice, Overlay, PAGE_LAYOUTS, Page, Panel, Progress, Radio, Row, SUPPORTED_LANGUAGES, Select, Series, Sidebar, Stat, Swatch, Switch, THEME_MODES, TOUCH_TOOLTIP_DURATION, Tabs, Tag, Text, Toaster, Token, TokenField, Tooltip, applike, applyScaling, ariaKeyShortcuts, avatarInk, calculateScalingFactor, columnLetter, componentVisibility, configureFormat, configureI18n, configureLanguageRouting, connectSidebar, createChart, currencyDigits, currencySymbol, currentLanguage, currentTheme, currentThemeMode, dateFormatter, detectMobileDevice, documentLevels, drawSparkline, englishText, fallbackLanguages, fillPlaceholders, followSystemTheme, footerPreferences, formatCompact, formatDate, formatDateTime, formatList, formatMoney, formatMoneyToParts, formatMonthDay, formatMonthDayTime, formatMonthYear, formatNumber, formatPercent, formatPrice, formatRelativeTime, formatTime, fromMinorUnits, getAvailableLanguages, getAvailableLanguagesSync, getBrowserLanguage, getDeviceInfo, getLanguageDisplayName, getLanguageRoutingOptions, getPriceCurrency, getPriceLabel, getScalingFactor, getText, getThemeMode, hasTranslation, headingId, hideTooltip, initDeviceDetection, initGridShortcut, initTooltips, isApplePlatform, isLanguage, isLanguageSlug, isModKey, isPublicComponent, isTranslationsFile, isTyping, keyWord, languageFromSlug, languageOrder, languageSlug, listFormatter, loadLanguage, loadSharedWords, loadTranslations, localeTag, matchesShortcut, measureStyle, toast as message, toast, modKey, nativeLanguageName, normalizeLanguage, numberFormatter, onShortcut, orderColumns, parseLanguagePath, parseShortcut, parseTypedDay, pickLanguages, placeholdersIn, preferenceStorageKey, provideIcons, readDateValue, readLanguageFile, readMonth, readRange, relativeTimeFormatter, relativeTimeUnit, resolveText, savePreferences, scale, scalingConfig, scalingFactor, setKeyWords, setLanguage, setScalingConfig, setTheme, setThemeMode, shortcutLabel, showTooltip, startScaling, stepStates, stripLanguagePrefix, textInLanguage, themeIconSvg, toDevicePixel, toLayoutStep, toMinorUnits, translate, treeStep, unscale, updateScalingFactor, validateTranslations, withLanguagePrefix, writeDateValue };
+export { Accordion, Avatar, AvatarGroup, Badge, Bento, Button, COMPONENT_VISIBILITY, CONTENTS_LABEL, Calendar, CalendarBase, CalendarLarge, Card, Carousel, ChartElement, Checkbox, ColorInput, Composer, Container, Context, Cycle, DEFAULT_LANGUAGE, DocumentPage, DsTable, EMPTY_HEADING, Empty, FALLBACK_LANGUAGE, FilePicker, Footer, Form, Gap, Grid, GridBars, GridChart, GridLineChart, GridRange, GridRatio, GridSpark, Header, Icon, Image, Input, LANGUAGES, LANGUAGE_METADATA, LOCALE_TAGS, LONG_PRESS_DELAY, List, MENU_LABEL, MESSAGE_ICONS, Matrix, Menu, Message, NOTICE_ICONS, Notice, Overlay, PAGE_LAYOUTS, Page, Panel, Progress, Radio, Row, SUPPORTED_LANGUAGES, Select, Series, Sidebar, Stat, Swatch, Switch, THEME_MODES, TOUCH_TOOLTIP_DURATION, Tabs, Tag, Text, Toaster, Token, TokenField, Tooltip, applike, applyScaling, ariaKeyShortcuts, avatarInk, calculateScalingFactor, columnLetter, componentVisibility, configureFormat, configureI18n, configureLanguageRouting, connectSidebar, createChart, currencyDigits, currencySymbol, currentLanguage, currentTheme, currentThemeMode, dateFormatter, detectMobileDevice, documentLevels, drawSparkline, englishText, fallbackLanguages, fillPlaceholders, followSystemTheme, footerPreferences, formatCompact, formatDate, formatDateTime, formatList, formatMoney, formatMoneyToParts, formatMonthDay, formatMonthDayTime, formatMonthYear, formatNumber, formatPercent, formatPrice, formatRelativeTime, formatTime, fromMinorUnits, getAvailableLanguages, getAvailableLanguagesSync, getBrowserLanguage, getDeviceInfo, getLanguageDisplayName, getLanguageRoutingOptions, getPriceCurrency, getPriceLabel, getScalingFactor, getText, getThemeMode, hasTranslation, headingId, hideTooltip, initDeviceDetection, initGridShortcut, initTooltips, isApplePlatform, isLanguage, isLanguageSlug, isModKey, isPublicComponent, isTranslationsFile, isTyping, keyWord, languageFromSlug, languageOrder, languageSlug, listFormatter, loadLanguage, loadSharedWords, loadTranslations, localeTag, matchesShortcut, measureStyle, toast as message, toast, modKey, nativeLanguageName, normalizeLanguage, numberFormatter, onShortcut, orderColumns, parseLanguagePath, parseShortcut, parseTypedDay, pickLanguages, placeholdersIn, preferenceStorageKey, provideIcons, readDateValue, readLanguageFile, readMonth, readRange, relativeTimeFormatter, relativeTimeUnit, resolveText, savePreferences, scale, scalingConfig, scalingFactor, setKeyWords, setLanguage, setScalingConfig, setTheme, setThemeMode, shortcutLabel, showTooltip, startScaling, stepStates, stripLanguagePrefix, textInLanguage, themeIconSvg, toDevicePixel, toLayoutStep, toMinorUnits, translate, treeStep, unscale, updateScalingFactor, validateTranslations, withLanguagePrefix, writeDateValue };
 
 //# sourceMappingURL=design-system-1.bundle.js.map