@telepath-computer/television 0.1.216 → 1.3.3

package/dist/canonical/v2/styles.css

@@ -0,0 +1,1241 @@
+/* Foundation styling carries no specificity: every selector that can be is
+   wrapped in `:where()`, so later sheets — the element sheets, surfaces,
+   themes — override any of this with a plain rule. The universal box-sizing
+   rule stays bare only because pseudo-elements cannot appear inside
+   `:where()`; its selectors carry no specificity anyway. */
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
+:where(html, body) {
+  margin: 0;
+  padding: 0;
+}
+
+/* The document's base typography, stated once at the root: surfaces inherit
+   rather than restate, and the form controls below inherit it in turn. */
+:where(body) {
+  font-family: var(--font-sans);
+  font-size: var(--text-md);
+  font-weight: var(--font-weight-normal);
+  line-height: normal;
+  color: var(--color-text);
+}
+
+:where(h1, h2, h3, h4, h5, h6, p, ul, ol, blockquote, pre, hr) {
+  margin: 0;
+}
+
+:where(button, input, select, textarea) {
+  font: inherit;
+  color: inherit;
+}
+
+/* Floating elements arrive with UA chrome — a solid border and padding on
+   dialog and on popover hosts. Zeroed here so the panel styling states only
+   what a panel looks like. The UA margin stays: it centers a modal dialog. */
+:where(dialog, [popover]) {
+  border: 0;
+  padding: 0;
+}
+
+/* Hind — the committed variable cut, weights 300–700. */
+@font-face {
+  font-family: "Hind";
+  src: url(/canonical/v2/fonts/Hind-Variable.933e9900.woff2) format("woff2-variations");
+  font-weight: 300 700;
+  font-display: block;
+}
+
+:where(:root) {  /* The faces above, named; weights as material plus the body role. */
+  --font-sans: "Hind", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
+  --font-mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, monospace;
+  --font-weight-normal: 400;
+  --font-weight-medium: 500;
+  --font-weight-semibold: 600;
+}
+
+/* Palette seeds and derived scales adapted from Tailwind CSS.
+   https://github.com/tailwindlabs/tailwindcss
+   Copyright (c) Tailwind Labs, Inc.
+   MIT License; see THIRD-PARTY-NOTICES.txt. */
+
+/* Both tables sit at zero specificity — ambient styling is the weakest
+   thing in the cascade, tokens included. A theme states a token with a
+   plain `:root` and out-cascades both tables at once — one statement, both
+   modes — or writes its own `[data-theme="dark"]` block to retune dark
+   alone. Between the tables themselves, source order decides: the dark
+   table follows the light one, so it wins where the attribute matches. */
+:where(:root) {
+  /* Complete decorative paints. The consuming pseudo sets 1em to its radius. */
+  --panel-edge-highlight: linear-gradient(to bottom,
+    rgb(255 255 255 / .36) 0 .5px,
+    rgb(255 255 255 / .28) .5px 1px,
+    rgb(255 255 255 / .20) 1em);
+  --panel-edge-shadow: 0 0 0 .5px rgb(0 0 0 / .205);
+
+  /* Panels: popovers, menus, selects and dialogs. */
+  --panel-background: var(--color-surface);
+  --panel-text-color: var(--color-text);
+  --panel-border-color: var(--color-border);
+  --panel-border: none;
+
+  /* Options: menu items and select options. */
+  --option-background-highlighted: color-mix(in oklch, transparent, var(--option-background-active) var(--hover-mix));
+  --option-background-active: var(--tint-active);
+
+  /* Checked checklist marker fill and border. */
+  --checkbox-color: var(--color-primary);
+
+  /* Controls share these defaults in app and artifact documents. */
+  --control-text-color: var(--color-text);
+  --control-border-color: var(--color-border);
+  --control-border-width: 1px;
+  --control-border: var(--control-border-width) solid var(--control-border-color);
+  --input-placeholder-text-color: var(--color-text-muted);
+
+  /* Slots — the theme's raw material, each stated at its own 500 step: the
+     hue's mid, the brand weight. A theme restates any of them and the scale
+     below it regenerates. The neutral is genuinely neutral; give it a chroma
+     and hue and the whole grey world takes the undertone. */
+  --neutral: oklch(0.556 0 0);
+  --red: oklch(0.637 0.237 25.331);
+  --orange: oklch(0.705 0.213 47.604);
+  --yellow: oklch(0.852 0.199 91.936);
+  --green: oklch(0.723 0.219 149.579);
+  --cyan: oklch(0.715 0.143 215.221);
+  --blue: oklch(0.623 0.214 259.815);
+  --purple: oklch(0.627 0.265 303.9);
+  --pink: oklch(0.656 0.241 354.308);
+  /* The one tunable identity — any color a theme or picker supplies; used
+     raw as the accent fill, and everything accent-flavored derives from it. */
+  --accent: var(--blue);
+
+  /* Scales. Every step is generated around its slot: pale steps climb a
+     fraction of the headroom from the slot's lightness to white, deep steps
+     climb toward black, and every step keeps a fraction of the slot's chroma.
+     The numbers sit inline, per scale, per step — tuning is editing the line.
+     Cluster scales carry the curve measured off the hand-tuned red ramp;
+     yellow carries its own numbers, including chroma fractions above 1 and
+     per-step hue rotation (dark yellow at constant hue is olive).
+
+     The neutral scale is a lightness ladder with chroma carried unchanged:
+     dose arithmetic cannot hold an undertone at the pale end, and the
+     interface's contrast skeleton wants stated lightnesses. */
+  --neutral-50: oklch(from var(--neutral) 0.985 c h);
+  --neutral-100: oklch(from var(--neutral) 0.97 c h);
+  --neutral-200: oklch(from var(--neutral) 0.922 c h);
+  --neutral-300: oklch(from var(--neutral) 0.87 c h);
+  --neutral-400: oklch(from var(--neutral) 0.708 c h);
+  --neutral-500: var(--neutral);
+  --neutral-600: oklch(from var(--neutral) 0.439 c h);
+  --neutral-700: oklch(from var(--neutral) 0.371 c h);
+  --neutral-800: oklch(from var(--neutral) 0.269 c h);
+  --neutral-900: oklch(from var(--neutral) 0.205 c h);
+  --neutral-950: oklch(from var(--neutral) 0.145 c h);
+
+  --red-50: oklch(from var(--red) calc(l + (1 - l) * 0.92) calc(c * 0.055) h);
+  --red-100: oklch(from var(--red) calc(l + (1 - l) * 0.824) calc(c * 0.135) h);
+  --red-200: oklch(from var(--red) calc(l + (1 - l) * 0.683) calc(c * 0.262) h);
+  --red-300: oklch(from var(--red) calc(l + (1 - l) * 0.471) calc(c * 0.481) h);
+  --red-400: oklch(from var(--red) calc(l + (1 - l) * 0.185) calc(c * 0.806) h);
+  --red-500: var(--red);
+  --red-600: oklch(from var(--red) calc(l * (1 - 0.094)) calc(c * 1.034) h);
+  --red-700: oklch(from var(--red) calc(l * (1 - 0.207)) calc(c * 0.899) h);
+  --red-800: oklch(from var(--red) calc(l * (1 - 0.303)) calc(c * 0.747) h);
+  --red-900: oklch(from var(--red) calc(l * (1 - 0.378)) calc(c * 0.595) h);
+  --red-950: oklch(from var(--red) calc(l * (1 - 0.595)) calc(c * 0.435) h);
+
+  --orange-50: oklch(from var(--orange) calc(l + (1 - l) * 0.92) calc(c * 0.055) h);
+  --orange-100: oklch(from var(--orange) calc(l + (1 - l) * 0.824) calc(c * 0.135) h);
+  --orange-200: oklch(from var(--orange) calc(l + (1 - l) * 0.683) calc(c * 0.262) h);
+  --orange-300: oklch(from var(--orange) calc(l + (1 - l) * 0.471) calc(c * 0.481) h);
+  --orange-400: oklch(from var(--orange) calc(l + (1 - l) * 0.185) calc(c * 0.806) h);
+  --orange-500: var(--orange);
+  --orange-600: oklch(from var(--orange) calc(l * (1 - 0.094)) calc(c * 1.034) h);
+  --orange-700: oklch(from var(--orange) calc(l * (1 - 0.207)) calc(c * 0.899) h);
+  --orange-800: oklch(from var(--orange) calc(l * (1 - 0.303)) calc(c * 0.747) h);
+  --orange-900: oklch(from var(--orange) calc(l * (1 - 0.378)) calc(c * 0.595) h);
+  --orange-950: oklch(from var(--orange) calc(l * (1 - 0.595)) calc(c * 0.435) h);
+
+  --yellow-50: oklch(from var(--yellow) calc(l + (1 - l) * 0.937) calc(c * 0.141) calc(h + 10));
+  --yellow-100: oklch(from var(--yellow) calc(l + (1 - l) * 0.868) calc(c * 0.386) calc(h + 11));
+  --yellow-200: oklch(from var(--yellow) calc(l + (1 - l) * 0.732) calc(c * 0.701) calc(h + 10));
+  --yellow-300: oklch(from var(--yellow) calc(l + (1 - l) * 0.537) calc(c * 0.989) calc(h + 6));
+  --yellow-400: oklch(from var(--yellow) calc(l + (1 - l) * 0.278) calc(c * 1.082) calc(h + 3));
+  --yellow-500: var(--yellow);
+  --yellow-600: oklch(from var(--yellow) calc(l * (1 - 0.08)) calc(c * 0.95) calc(h - 6));
+  --yellow-700: oklch(from var(--yellow) calc(l * (1 - 0.19)) calc(c * 0.8) calc(h - 14));
+  --yellow-800: oklch(from var(--yellow) calc(l * (1 - 0.33)) calc(c * 0.65) calc(h - 26));
+  --yellow-900: oklch(from var(--yellow) calc(l * (1 - 0.46)) calc(c * 0.52) calc(h - 32));
+  --yellow-950: oklch(from var(--yellow) calc(l * (1 - 0.64)) calc(c * 0.359) calc(h - 38));
+
+  --green-50: oklch(from var(--green) calc(l + (1 - l) * 0.92) calc(c * 0.055) h);
+  --green-100: oklch(from var(--green) calc(l + (1 - l) * 0.824) calc(c * 0.135) h);
+  --green-200: oklch(from var(--green) calc(l + (1 - l) * 0.683) calc(c * 0.262) h);
+  --green-300: oklch(from var(--green) calc(l + (1 - l) * 0.471) calc(c * 0.481) h);
+  --green-400: oklch(from var(--green) calc(l + (1 - l) * 0.185) calc(c * 0.806) h);
+  --green-500: var(--green);
+  --green-600: oklch(from var(--green) calc(l * (1 - 0.094)) calc(c * 1.034) h);
+  --green-700: oklch(from var(--green) calc(l * (1 - 0.207)) calc(c * 0.899) h);
+  --green-800: oklch(from var(--green) calc(l * (1 - 0.303)) calc(c * 0.747) h);
+  --green-900: oklch(from var(--green) calc(l * (1 - 0.378)) calc(c * 0.595) h);
+  --green-950: oklch(from var(--green) calc(l * (1 - 0.595)) calc(c * 0.435) h);
+
+  --cyan-50: oklch(from var(--cyan) calc(l + (1 - l) * 0.92) calc(c * 0.055) h);
+  --cyan-100: oklch(from var(--cyan) calc(l + (1 - l) * 0.824) calc(c * 0.135) h);
+  --cyan-200: oklch(from var(--cyan) calc(l + (1 - l) * 0.683) calc(c * 0.262) h);
+  --cyan-300: oklch(from var(--cyan) calc(l + (1 - l) * 0.471) calc(c * 0.481) h);
+  --cyan-400: oklch(from var(--cyan) calc(l + (1 - l) * 0.185) calc(c * 0.806) h);
+  --cyan-500: var(--cyan);
+  --cyan-600: oklch(from var(--cyan) calc(l * (1 - 0.094)) calc(c * 1.034) h);
+  --cyan-700: oklch(from var(--cyan) calc(l * (1 - 0.207)) calc(c * 0.899) h);
+  --cyan-800: oklch(from var(--cyan) calc(l * (1 - 0.303)) calc(c * 0.747) h);
+  --cyan-900: oklch(from var(--cyan) calc(l * (1 - 0.378)) calc(c * 0.595) h);
+  --cyan-950: oklch(from var(--cyan) calc(l * (1 - 0.595)) calc(c * 0.435) h);
+
+  --blue-50: oklch(from var(--blue) calc(l + (1 - l) * 0.92) calc(c * 0.055) h);
+  --blue-100: oklch(from var(--blue) calc(l + (1 - l) * 0.824) calc(c * 0.135) h);
+  --blue-200: oklch(from var(--blue) calc(l + (1 - l) * 0.683) calc(c * 0.262) h);
+  --blue-300: oklch(from var(--blue) calc(l + (1 - l) * 0.471) calc(c * 0.481) h);
+  --blue-400: oklch(from var(--blue) calc(l + (1 - l) * 0.185) calc(c * 0.806) h);
+  --blue-500: var(--blue);
+  --blue-600: oklch(from var(--blue) calc(l * (1 - 0.094)) calc(c * 1.034) h);
+  --blue-700: oklch(from var(--blue) calc(l * (1 - 0.207)) calc(c * 0.899) h);
+  --blue-800: oklch(from var(--blue) calc(l * (1 - 0.303)) calc(c * 0.747) h);
+  --blue-900: oklch(from var(--blue) calc(l * (1 - 0.378)) calc(c * 0.595) h);
+  --blue-950: oklch(from var(--blue) calc(l * (1 - 0.595)) calc(c * 0.435) h);
+
+  --purple-50: oklch(from var(--purple) calc(l + (1 - l) * 0.92) calc(c * 0.055) h);
+  --purple-100: oklch(from var(--purple) calc(l + (1 - l) * 0.824) calc(c * 0.135) h);
+  --purple-200: oklch(from var(--purple) calc(l + (1 - l) * 0.683) calc(c * 0.262) h);
+  --purple-300: oklch(from var(--purple) calc(l + (1 - l) * 0.471) calc(c * 0.481) h);
+  --purple-400: oklch(from var(--purple) calc(l + (1 - l) * 0.185) calc(c * 0.806) h);
+  --purple-500: var(--purple);
+  --purple-600: oklch(from var(--purple) calc(l * (1 - 0.094)) calc(c * 1.034) h);
+  --purple-700: oklch(from var(--purple) calc(l * (1 - 0.207)) calc(c * 0.899) h);
+  --purple-800: oklch(from var(--purple) calc(l * (1 - 0.303)) calc(c * 0.747) h);
+  --purple-900: oklch(from var(--purple) calc(l * (1 - 0.378)) calc(c * 0.595) h);
+  --purple-950: oklch(from var(--purple) calc(l * (1 - 0.595)) calc(c * 0.435) h);
+
+  --pink-50: oklch(from var(--pink) calc(l + (1 - l) * 0.92) calc(c * 0.055) h);
+  --pink-100: oklch(from var(--pink) calc(l + (1 - l) * 0.824) calc(c * 0.135) h);
+  --pink-200: oklch(from var(--pink) calc(l + (1 - l) * 0.683) calc(c * 0.262) h);
+  --pink-300: oklch(from var(--pink) calc(l + (1 - l) * 0.471) calc(c * 0.481) h);
+  --pink-400: oklch(from var(--pink) calc(l + (1 - l) * 0.185) calc(c * 0.806) h);
+  --pink-500: var(--pink);
+  --pink-600: oklch(from var(--pink) calc(l * (1 - 0.094)) calc(c * 1.034) h);
+  --pink-700: oklch(from var(--pink) calc(l * (1 - 0.207)) calc(c * 0.899) h);
+  --pink-800: oklch(from var(--pink) calc(l * (1 - 0.303)) calc(c * 0.747) h);
+  --pink-900: oklch(from var(--pink) calc(l * (1 - 0.378)) calc(c * 0.595) h);
+  --pink-950: oklch(from var(--pink) calc(l * (1 - 0.595)) calc(c * 0.435) h);
+
+  --accent-50: oklch(from var(--accent) calc(l + (1 - l) * 0.92) calc(c * 0.055) h);
+  --accent-100: oklch(from var(--accent) calc(l + (1 - l) * 0.824) calc(c * 0.135) h);
+  --accent-200: oklch(from var(--accent) calc(l + (1 - l) * 0.683) calc(c * 0.262) h);
+  --accent-300: oklch(from var(--accent) calc(l + (1 - l) * 0.471) calc(c * 0.481) h);
+  --accent-400: oklch(from var(--accent) calc(l + (1 - l) * 0.185) calc(c * 0.806) h);
+  --accent-500: var(--accent);
+  --accent-600: oklch(from var(--accent) calc(l * (1 - 0.094)) calc(c * 1.034) h);
+  --accent-700: oklch(from var(--accent) calc(l * (1 - 0.207)) calc(c * 0.899) h);
+  --accent-800: oklch(from var(--accent) calc(l * (1 - 0.303)) calc(c * 0.747) h);
+  --accent-900: oklch(from var(--accent) calc(l * (1 - 0.378)) calc(c * 0.595) h);
+  --accent-950: oklch(from var(--accent) calc(l * (1 - 0.595)) calc(c * 0.435) h);
+
+  /* Alpha scales — each color slot at a ladder of opacities, compositing on
+     whatever is beneath: restate the slot and its alphas follow. Used for
+     tinted backgrounds and translucent content. */
+  --neutral-alpha-5: oklch(from var(--neutral) l c h / var(--alpha-5)); --neutral-alpha-10: oklch(from var(--neutral) l c h / var(--alpha-10)); --neutral-alpha-15: oklch(from var(--neutral) l c h / var(--alpha-15));
+  --neutral-alpha-25: oklch(from var(--neutral) l c h / var(--alpha-25)); --neutral-alpha-50: oklch(from var(--neutral) l c h / var(--alpha-50)); --neutral-alpha-75: oklch(from var(--neutral) l c h / var(--alpha-75));
+  --red-alpha-5: oklch(from var(--red) l c h / var(--alpha-5)); --red-alpha-10: oklch(from var(--red) l c h / var(--alpha-10)); --red-alpha-15: oklch(from var(--red) l c h / var(--alpha-15));
+  --red-alpha-25: oklch(from var(--red) l c h / var(--alpha-25)); --red-alpha-50: oklch(from var(--red) l c h / var(--alpha-50)); --red-alpha-75: oklch(from var(--red) l c h / var(--alpha-75));
+  --orange-alpha-5: oklch(from var(--orange) l c h / var(--alpha-5)); --orange-alpha-10: oklch(from var(--orange) l c h / var(--alpha-10)); --orange-alpha-15: oklch(from var(--orange) l c h / var(--alpha-15));
+  --orange-alpha-25: oklch(from var(--orange) l c h / var(--alpha-25)); --orange-alpha-50: oklch(from var(--orange) l c h / var(--alpha-50)); --orange-alpha-75: oklch(from var(--orange) l c h / var(--alpha-75));
+  --yellow-alpha-5: oklch(from var(--yellow) l c h / var(--alpha-5)); --yellow-alpha-10: oklch(from var(--yellow) l c h / var(--alpha-10)); --yellow-alpha-15: oklch(from var(--yellow) l c h / var(--alpha-15));
+  --yellow-alpha-25: oklch(from var(--yellow) l c h / var(--alpha-25)); --yellow-alpha-50: oklch(from var(--yellow) l c h / var(--alpha-50)); --yellow-alpha-75: oklch(from var(--yellow) l c h / var(--alpha-75));
+  --green-alpha-5: oklch(from var(--green) l c h / var(--alpha-5)); --green-alpha-10: oklch(from var(--green) l c h / var(--alpha-10)); --green-alpha-15: oklch(from var(--green) l c h / var(--alpha-15));
+  --green-alpha-25: oklch(from var(--green) l c h / var(--alpha-25)); --green-alpha-50: oklch(from var(--green) l c h / var(--alpha-50)); --green-alpha-75: oklch(from var(--green) l c h / var(--alpha-75));
+  --cyan-alpha-5: oklch(from var(--cyan) l c h / var(--alpha-5)); --cyan-alpha-10: oklch(from var(--cyan) l c h / var(--alpha-10)); --cyan-alpha-15: oklch(from var(--cyan) l c h / var(--alpha-15));
+  --cyan-alpha-25: oklch(from var(--cyan) l c h / var(--alpha-25)); --cyan-alpha-50: oklch(from var(--cyan) l c h / var(--alpha-50)); --cyan-alpha-75: oklch(from var(--cyan) l c h / var(--alpha-75));
+  --blue-alpha-5: oklch(from var(--blue) l c h / var(--alpha-5)); --blue-alpha-10: oklch(from var(--blue) l c h / var(--alpha-10)); --blue-alpha-15: oklch(from var(--blue) l c h / var(--alpha-15));
+  --blue-alpha-25: oklch(from var(--blue) l c h / var(--alpha-25)); --blue-alpha-50: oklch(from var(--blue) l c h / var(--alpha-50)); --blue-alpha-75: oklch(from var(--blue) l c h / var(--alpha-75));
+  --purple-alpha-5: oklch(from var(--purple) l c h / var(--alpha-5)); --purple-alpha-10: oklch(from var(--purple) l c h / var(--alpha-10)); --purple-alpha-15: oklch(from var(--purple) l c h / var(--alpha-15));
+  --purple-alpha-25: oklch(from var(--purple) l c h / var(--alpha-25)); --purple-alpha-50: oklch(from var(--purple) l c h / var(--alpha-50)); --purple-alpha-75: oklch(from var(--purple) l c h / var(--alpha-75));
+  --pink-alpha-5: oklch(from var(--pink) l c h / var(--alpha-5)); --pink-alpha-10: oklch(from var(--pink) l c h / var(--alpha-10)); --pink-alpha-15: oklch(from var(--pink) l c h / var(--alpha-15));
+  --pink-alpha-25: oklch(from var(--pink) l c h / var(--alpha-25)); --pink-alpha-50: oklch(from var(--pink) l c h / var(--alpha-50)); --pink-alpha-75: oklch(from var(--pink) l c h / var(--alpha-75));
+  --accent-alpha-5: oklch(from var(--accent) l c h / var(--alpha-5)); --accent-alpha-10: oklch(from var(--accent) l c h / var(--alpha-10)); --accent-alpha-15: oklch(from var(--accent) l c h / var(--alpha-15));
+  --accent-alpha-25: oklch(from var(--accent) l c h / var(--alpha-25)); --accent-alpha-50: oklch(from var(--accent) l c h / var(--alpha-50)); --accent-alpha-75: oklch(from var(--accent) l c h / var(--alpha-75));
+
+  /* The alpha ladder the alpha scales read — nominal percent, values tunable
+     within a few points of their names. */
+  --alpha-3: 3%; --alpha-5: 5%; --alpha-10: 10%; --alpha-15: 15%; --alpha-20: 20%;
+  --alpha-25: 25%; --alpha-40: 40%; --alpha-50: 50%; --alpha-75: 75%;
+
+  /* Active strength and hover position are independent. Hover moves this
+     fraction of the way from resting to the resolved active color. The
+     default is halfway in both appearances. */
+  --hover-mix: 50%;
+  --alpha-active: 8%;
+
+  /* Ghost controls use their text pigment at active strength. Hover blends
+     transparent with that resolved endpoint, including theme overrides. */
+  --tint-hover: color-mix(in oklch, transparent, var(--tint-active) var(--hover-mix));
+  --tint-active: oklch(from currentColor l c h / var(--alpha-active));
+
+  /* Stencil icons: a drawing from the glyph vocabulary, packaged as a mask
+     for the places a rule must draw it — a pseudo-element can hold no
+     element, so the checklist's done mark and the select's selected mark
+     paint through this stencil instead of composing tv-icon. */
+  --icon-check: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 12"><path d="M10.2 3.1 5.1 8.2 2.4 5.5" fill="none" stroke="black" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/></svg>');
+
+  /* Neutral roles — the interface's jobs, pointed at the material. Sheets
+     read roles and scales, never a value of their own. */
+  /* Pure white, stated: the surface is a frame for user content, and
+     white-backgrounded artifacts and images must composite seamlessly. */
+  --color-surface: white;
+  --color-surface-muted: var(--neutral-100);
+  --color-text: var(--neutral-900);
+  --color-text-muted: var(--neutral-500);
+  /* Reversed type — the text knocked out of a solid fill. One token: fills
+     share the readable band by construction (meanings sit at fill weight),
+     and a variant whose fill is too light for reversed type wears
+     --color-text instead. */
+  --color-text-reversed: white;
+  /* Borders are tints of the text role, not stated steps: a translucent
+     edge always separates from whatever ground it sits on — an opaque
+     step vanishes the day a region paints that same step. Dark appearance
+     uses stronger tints to keep the edges visible. */
+  --color-border: oklch(from var(--color-text) l c h / 12%);
+  /* Translucent surface fills; backdrop blur is applied by the component. */
+  --tint-surface: oklch(from var(--color-surface) l c h / var(--alpha-50));
+  --tint-surface-muted: oklch(from var(--color-surface-muted) l c h / var(--alpha-50));
+  /* A control is a small surface, lifted by its border. */
+  --control-background: var(--color-surface);
+  /* Situations — danger, alert, success, primary. Each is one pointer at
+     the hue's 500; its tints and state fills derive from it, so repointing
+     the situation moves everything that wears it. */
+  --color-danger: var(--red-500);
+  --tint-danger: oklch(from var(--color-danger) l c h / var(--alpha-10));
+  --tint-danger-hover: color-mix(in oklch, transparent, var(--tint-danger-active) var(--hover-mix));
+  --tint-danger-active: oklch(from var(--color-danger) l c h / var(--alpha-active));
+
+  --color-alert: var(--yellow-500);
+  --tint-alert: oklch(from var(--color-alert) l c h / var(--alpha-10));
+  --tint-alert-hover: color-mix(in oklch, transparent, var(--tint-alert-active) var(--hover-mix));
+  --tint-alert-active: oklch(from var(--color-alert) l c h / var(--alpha-active));
+
+  --color-success: var(--green-500);
+  --tint-success: oklch(from var(--color-success) l c h / var(--alpha-10));
+
+  /* The primary action — the accent worn as a situation: the default
+     button, the current sidebar row. Selection wears it too; a selected
+     role returns the day selection and primary want different colors. */
+  --color-primary: var(--accent-500);
+  --tint-primary: oklch(from var(--color-primary) l c h / var(--alpha-10));
+  --tint-primary-hover: color-mix(in oklch, transparent, var(--tint-primary-active) var(--hover-mix));
+  --tint-primary-active: oklch(from var(--color-primary) l c h / var(--alpha-active));
+  /* The text on the primary fill, computed against it: dark ink above the
+     contrast flip, near-white below — so any accent, light gold included,
+     keeps a legible label wherever the fill appears. */
+  --color-primary-text: oklch(from var(--color-primary) clamp(0.2, (var(--contrast-flip) - l) * 1e6, 0.98) 0 h);
+  /* The keyboard's ring: one stroke wherever focus lands — width and
+     pigment here, the offset each control's own. */
+  --outline-focus: 2px solid var(--color-primary);
+
+  /* Filled active colors move toward black or white according to state-flip.
+     Hover follows the resolved active endpoint. Ordinary buttons consume
+     only resting and active fills; their hover appearance stays unchanged.
+     Derived states accept colors. Supply explicit states for gradients. */
+  --control-background-hover: color-mix(in oklch, var(--control-background), var(--control-background-active) var(--hover-mix));
+  --control-background-active: color-mix(in oklch, var(--control-background), oklch(from var(--control-background) clamp(0, (var(--state-flip) - l) * 1e6, 1) 0 h) var(--alpha-active));
+  --color-primary-hover: color-mix(in oklch, var(--color-primary), var(--color-primary-active) var(--hover-mix));
+  --color-primary-active: color-mix(in oklch, var(--color-primary), oklch(from var(--color-primary) clamp(0, (var(--state-flip) - l) * 1e6, 1) 0 h) var(--alpha-active));
+  --color-danger-hover: color-mix(in oklch, var(--color-danger), var(--color-danger-active) var(--hover-mix));
+  --color-danger-active: color-mix(in oklch, var(--color-danger), oklch(from var(--color-danger) clamp(0, (var(--state-flip) - l) * 1e6, 1) 0 h) var(--alpha-active));
+  --color-alert-hover: color-mix(in oklch, var(--color-alert), var(--color-alert-active) var(--hover-mix));
+  --color-alert-active: color-mix(in oklch, var(--color-alert), oklch(from var(--color-alert) clamp(0, (var(--state-flip) - l) * 1e6, 1) 0 h) var(--alpha-active));
+
+  /* A link follows its surrounding text unless a theme gives it an accent.
+     currentColor, not inherit: it means the ambient ink in any property it
+     lands in, and CSS-wide keywords substitute brittly through var(). */
+  --color-link: currentColor;
+  /* The dialog backdrop: near-black at the overlay opacity, dimming the
+     page; deriving from the neutral keeps the theme's undertone. */
+  --color-overlay: oklch(from var(--neutral-950) l c h / var(--alpha-40));
+
+  /* Two thresholds read a fill's own lightness and pick between two
+     outcomes. --state-flip steers the fill's motion in its states: a fill
+     lighter than it darkens on hover and press, a darker one lightens —
+     a genuinely dark fill has nowhere darker to go. --contrast-flip
+     steers the ink on the fill: a fill lighter than it wears dark text,
+     a darker one wears reversed type. Different questions flip at
+     different points — a red of 0.6 lightness wants reversed text yet
+     still darkens on press. */
+  --state-flip: 0.35;
+  --contrast-flip: 0.66;
+
+  color-scheme: light;
+}
+
+/* The dark table changes the role pointers. Scales are not restated as
+   scales; the hue slots take slightly lighter values (saturated mids vibrate
+   on near-black), and every derived step follows. The neutral slot does not
+   move — the roles flip which steps they take. */
+:where([data-theme="dark"]) {
+  --panel-edge-shadow: 0 0 0 .5px rgb(0 0 0 / .912);
+  --alpha-active: 12%;
+  --red: oklch(0.704 0.191 22.216);
+  --orange: oklch(0.75 0.183 55.934);
+  --yellow: oklch(0.879 0.169 91.5);
+  --green: oklch(0.792 0.209 151.711);
+  --cyan: oklch(0.789 0.154 211.53);
+  --blue: oklch(0.707 0.165 254.624);
+  --purple: oklch(0.714 0.203 305.504);
+  --pink: oklch(0.718 0.202 349.761);
+
+  --color-surface: var(--neutral-900);
+  --color-surface-muted: var(--neutral-800);
+  --color-text: var(--neutral-100);
+  --color-text-muted: var(--neutral-400);
+  --color-border: oklch(from var(--color-text) l c h / 18%);
+
+  color-scheme: dark;
+}
+
+:where(:root) {
+  /* Controls follow the standard UI text size by default. */
+  --control-font-size: var(--text-md);
+
+  /* Type — one seed; each size a stated multiple, written as its tuned pixel
+     over the default base: retune --text-base and every size follows (at the
+     root — the var chain resolves there, not per subtree); read the fraction
+     and you see the pixels it lands on at 14. */
+  --text-base: 14px;
+  --text-sm: round(calc(var(--text-base) * 12 / 14), 1px);
+  --text-md: var(--text-base);
+  --text-lg: round(calc(var(--text-base) * 16 / 14), 1px);
+  --text-xl: round(calc(var(--text-base) * 18 / 14), 1px);
+  --text-2xl: round(calc(var(--text-base) * 20 / 14), 1px);
+  --text-3xl: round(calc(var(--text-base) * 24 / 14), 1px);
+  --text-4xl: round(calc(var(--text-base) * 30 / 14), 1px);
+
+  /* The control lines: the line-height a control's label uses, and the one
+     input its height derives from — the line, plus the space-2 padding step
+     top and bottom, plus a 1px border each side, gives every control the
+     same height: 18 + 4 + 2 = 24px (14 + 4 + 2 = 20px at the small step).
+     Stated in pixels, not a ratio: a control's cell is tighter than prose,
+     immune to the leading around it, and lands on even pixels in any font. */
+  --line-control: 18px;
+  --line-control-sm: 14px;
+}
+
+:where(:root) {
+  /* Ordinary buttons and text fields share control padding. */
+  --control-padding: var(--space-2) var(--space-16);
+
+  /* Spacing — the thirteen legal distances. The ladder is a constraint, not a
+     theming surface: names state their fixed pixel values, and an off-ladder
+     length in a sheet is a visible smell. A density mode, if ever real,
+     swaps the ladder wholesale rather than lying under these names. */
+  --space-2: 2px;
+  --space-3: 3px;
+  --space-4: 4px;
+  --space-6: 6px;
+  --space-8: 8px;
+  --space-10: 10px;
+  --space-12: 12px;
+  --space-16: 16px;
+  --space-20: 20px;
+  --space-24: 24px;
+  --space-32: 32px;
+  --space-48: 48px;
+  --space-64: 64px;
+
+  /* Radius roles — jobs, themable. A numbered ladder would be value-names a
+     theme cannot restate without lying. */
+  --control-radius: 6px; /* buttons, inputs, menu items, small insets */
+  --radius-pill: 9999px; /* fully rounded ends at any element size */
+
+  /* Shared panel corners. */
+  --panel-radius: 8px;
+
+  /* The clearance a placed panel keeps on every side — off the trigger and
+     off every window edge ([[ui/foundation/popover/index.md]], Placement).
+     The element reads it from computed style, so a theme override reaches
+     the placement algorithm. Foundation, not app chrome: the popover family
+     ships to artifact documents, so its clearance must travel with it. */
+  --popover-distance: var(--space-4);
+}
+
+:where(:root) {
+  /* Reusable elevations, from a close contact to a broad floating shadow. */
+  --shadow-sm: 0 1px 4px oklch(from var(--neutral-950) l c h / var(--alpha-15));
+  --shadow-md: 0 4px 12px oklch(from var(--neutral-950) l c h / var(--alpha-15));
+  --shadow-lg:
+    0 8px 24px oklch(from var(--neutral-950) l c h / var(--alpha-10)),
+    0 2px 8px oklch(from var(--neutral-950) l c h / var(--alpha-5));
+
+  /* Broad window elevation for artifact frames. */
+  --shadow-xl:
+    0 24px 48px oklch(from var(--neutral-950) l c h / var(--alpha-15)),
+    0 4px 12px oklch(from var(--neutral-950) l c h / 7.5%);
+
+  /* Popovers, including menus and selects, sit closer than dialogs. */
+  --popover-shadow: var(--shadow-md);
+  --dialog-shadow: var(--shadow-lg);
+}
+
+/* Dark surfaces need stronger shadows with the same neutral pigment. */
+:where([data-theme="dark"]) {
+  --shadow-sm: 0 1px 4px oklch(from var(--neutral-950) l c h / var(--alpha-40));
+  --shadow-md: 0 4px 12px oklch(from var(--neutral-950) l c h / var(--alpha-40));
+  --shadow-lg:
+    0 8px 24px oklch(from var(--neutral-950) l c h / var(--alpha-40)),
+    0 2px 8px oklch(from var(--neutral-950) l c h / var(--alpha-25));
+  --shadow-xl:
+    0 24px 48px oklch(from var(--neutral-950) l c h / 30%),
+    0 4px 12px oklch(from var(--neutral-950) l c h / 18.75%);
+}
+
+/* The app-level paint order ([[ui/foundation/index.md]], Layers): every
+   z-index either places an element on one of these or lifts above siblings
+   with a calculation on one. Zero specificity like every token table — a
+   plain `:root` rule from a theme beats it. */
+:where(:root) {
+  /* The base plane the document lays out. Nothing is placed on it; lifts on
+     the base plane calculate from it. */
+  --layer-ground: 0;
+  /* Floating panels opened from a surface: menus, the top-bar popovers. */
+  --layer-panel: 100;
+  /* The interruption: the dialog overlay and its backdrop. */
+  --layer-overlay: 200;
+}
+
+/* The prose treatment ([[ui/foundation/index.md]], Prose): document
+   typography for plain semantic HTML, applying inside any region marked
+   text-display="prose". Zero specificity like every foundation rule; a
+   document's own styling outranks all of it. */
+
+:where([text-display="prose"]) {
+  font-size: var(--text-md);
+  font-weight: var(--font-weight-medium);
+  line-height: 1.5;
+  -webkit-font-smoothing: antialiased;
+}
+
+/* The heading scale. */
+:where([text-display="prose"] h1) {
+  font-size: var(--text-3xl);
+  font-weight: var(--font-weight-semibold);
+  line-height: 1.25;
+  margin: 0 0 var(--space-12);
+}
+
+:where([text-display="prose"] h2) {
+  font-size: var(--text-xl);
+  font-weight: var(--font-weight-semibold);
+  line-height: 1.3;
+  margin: var(--space-24) 0 var(--space-8);
+}
+
+:where([text-display="prose"] h3, [text-display="prose"] h4, [text-display="prose"] h5, [text-display="prose"] h6) {
+  font-size: var(--text-lg);
+  font-weight: var(--font-weight-semibold);
+  margin: var(--space-16) 0 var(--space-4);
+}
+
+/* Block rhythm. */
+:where([text-display="prose"] p, [text-display="prose"] ul, [text-display="prose"] ol, [text-display="prose"] blockquote, [text-display="prose"] pre, [text-display="prose"] hr, [text-display="prose"] table, [text-display="prose"] figure) {
+  margin: 0 0 var(--space-12);
+}
+
+:where([text-display="prose"] > :last-child) {
+  margin-bottom: 0;
+}
+
+:where([text-display="prose"] a) {
+  color: var(--color-link);
+  text-decoration: underline;
+  text-underline-offset: 2px;
+}
+
+:where([text-display="prose"] ul, [text-display="prose"] ol) {
+  padding-left: var(--space-24);
+}
+
+:where([text-display="prose"] li + li) {
+  margin-top: var(--space-4);
+}
+
+:where([text-display="prose"] blockquote) {
+  border-left: 2px solid var(--color-border);
+  padding-left: var(--space-12);
+  color: var(--color-text-muted);
+}
+
+:where([text-display="prose"] code, [text-display="prose"] kbd, [text-display="prose"] samp) {
+  font-family: var(--font-mono);
+  font-size: var(--text-sm);
+  background: var(--color-surface-muted);
+  border-radius: var(--control-radius);
+  padding: 1px var(--space-4);
+}
+
+:where([text-display="prose"] pre) {
+  font-family: var(--font-mono);
+  font-size: var(--text-sm);
+  background: var(--color-surface-muted);
+  border: 1px solid var(--color-border);
+  border-radius: var(--control-radius);
+  padding: var(--space-12);
+  overflow-x: auto;
+}
+
+/* A block's code cell. */
+:where([text-display="prose"] pre code) {
+  background: none;
+  border-radius: 0;
+  padding: 0;
+}
+
+:where([text-display="prose"] hr) {
+  border: 0;
+  border-top: 1px solid var(--color-border);
+}
+
+:where([text-display="prose"] table) {
+  border-collapse: collapse;
+  width: 100%;
+}
+
+:where([text-display="prose"] th) {
+  text-align: left;
+  font-weight: var(--font-weight-semibold);
+  background: var(--color-surface-muted);
+}
+
+:where([text-display="prose"] th, [text-display="prose"] td) {
+  padding: var(--space-4) var(--space-12) var(--space-4) 0;
+  border-bottom: 1px solid var(--color-border);
+}
+
+:where([text-display="prose"] img) {
+  max-width: 100%;
+  height: auto;
+}
+
+/* The header idiom. */
+:where([text-display="prose"] header p) {
+  color: var(--color-text-muted);
+}
+
+/* The heading's own bottom margin would collapse with the subtitle's; the
+   pair states its gap once. */
+:where(header :is(h1, h2, h3, h4, h5, h6):has(+ p)) {
+  margin-bottom: 0;
+}
+
+:where(header :is(h1, h2, h3, h4, h5, h6) + p) {
+  margin-top: var(--space-4);
+}
+
+/* Every rule in this sheet is wrapped in `:where()`, which contributes
+   nothing to specificity — foundation styling is the weakest thing in the
+   cascade, and a component placing a button overrides any of it with a plain
+   selector instead of contriving one that outranks it. Without this,
+   `button:hover:not(:disabled)` beats a component's own `:hover` rule, and
+   the component has to mirror the `:not()` to win — a workaround that reads
+   like an accident and gets tidied away. Within the sheet, source order does
+   the layering: intents beat the bare element, sizes beat the intents. */
+:where(button) {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--space-6);
+  padding: var(--control-padding);
+  border: var(--control-border);
+  border-radius: var(--control-radius);
+  /* A button is a surface of its own, lifted off whatever it sits on, rather
+     than a bordered hole in it. The fill is the kind's situation role, and
+     hover and press are that role's derived state fills in the token table
+     ([[ui/foundation/tokens/colors.css]]) — the state rules below point at
+     them per kind, so a theme that restates a fill gets its states for
+     free, and one with an exact opinion overrides a state token. */
+  background: var(--control-background);
+  color: var(--control-text-color);
+  /* A button is a target, not text to select through. */
+  cursor: default;
+}
+
+/* A colored intent is a fill declaration; its states follow below. The
+   label is reversed type with the contrast clamp layered over it per kind,
+   so a theme's repointed situation keeps a legible label — the clamp
+   answers dark text on the alert gold (a clamp line drops at parse time in
+   engines without relative color, leaving the reversed role). */
+:where(button[intent]) {
+  border-color: transparent;
+  color: var(--color-text-reversed);
+}
+
+/* The primary intent is the default action — the one Return fires; the
+   accent worn as a fill, macOS-style. */
+:where(button[intent="primary"]) {
+  background: var(--color-primary);
+  color: var(--color-primary-text);
+}
+
+:where(button[intent="danger"]) {
+  background: var(--color-danger);
+  color: oklch(from var(--color-danger) clamp(0.2, (var(--contrast-flip) - l) * 1e6, 0.98) 0 h);
+}
+
+:where(button[intent="alert"]) {
+  background: var(--color-alert);
+  color: oklch(from var(--color-alert) clamp(0.2, (var(--contrast-flip) - l) * 1e6, 0.98) 0 h);
+}
+
+/* Buttons retain their resting appearance on hover. Pressed fills follow
+   the base fills so source order lets the state win. */
+:where(button:active:not(:disabled)) {
+  background: var(--control-background-active);
+}
+
+:where(button[intent="primary"]:active:not(:disabled)) {
+  background: var(--color-primary-active);
+}
+
+:where(button[intent="danger"]:active:not(:disabled)) {
+  background: var(--color-danger-active);
+}
+
+:where(button[intent="alert"]:active:not(:disabled)) {
+  background: var(--color-alert-active);
+}
+
+/* Keyboard focus only — a ring on every click would be noise. */
+:where(button:focus-visible) {
+  outline: var(--outline-focus);
+  outline-offset: 1px;
+}
+
+/* Faded rather than restyled, so a disabled button keeps its shape and stays
+   recognisable as the control it is. */
+:where(button:disabled) {
+  opacity: 0.4;
+}
+
+/* A button whose whole content is an icon: a square line-sized cell, the
+   glyph centred. Geometry only — the quiet treatment is `ghost`, stated
+   separately. */
+:where(button[icon]) {
+  padding: var(--space-2);
+  display: inline-grid;
+  place-items: center;
+}
+
+/* The expanded state: the button holds the panel it opened (the element
+   maintains `aria-expanded`).
+   Source order puts it after the ghost and pointer-state rules. A filled
+   button holds the press-step fill; the ghost's tint treatment below is
+   guarded out of every kind. */
+:where(button[aria-expanded="true"]:not(:disabled):not([variant="ghost"])) {
+  background: var(--control-background-active);
+}
+
+:where(button[intent="primary"][aria-expanded="true"]:not(:disabled):not([variant="ghost"])) {
+  background: var(--color-primary-active);
+}
+
+:where(button[intent="danger"][aria-expanded="true"]:not(:disabled):not([variant="ghost"])) {
+  background: var(--color-danger-active);
+}
+
+:where(button[intent="alert"][aria-expanded="true"]:not(:disabled):not([variant="ghost"])) {
+  background: var(--color-alert-active);
+}
+
+/* Ghost buttons inherit their containing text color. Intent colors
+   remain explicit; hover gives way to pressed and expanded states. */
+:where(button[variant="ghost"]) {
+  border-color: transparent;
+  background: transparent;
+  color: inherit;
+}
+
+:where(button[variant="ghost"][intent="primary"]) { color: var(--color-primary); }
+:where(button[variant="ghost"][intent="danger"]) { color: var(--color-danger); }
+:where(button[variant="ghost"][intent="alert"]) { color: var(--color-alert); }
+
+:where(button[variant="ghost"]:hover:not(:disabled)) {
+  background: var(--tint-hover);
+}
+
+:where(button[variant="ghost"]:is(:active, [aria-expanded="true"]):not(:disabled)) {
+  background: var(--tint-active);
+  background-clip: border-box;
+}
+
+:where(button[variant="ghost"][intent="primary"]:hover:not(:disabled)) {
+  background: var(--tint-primary-hover);
+}
+
+:where(button[variant="ghost"][intent="primary"]:is(:active, [aria-expanded="true"]):not(:disabled)) {
+  background: var(--tint-primary-active);
+}
+
+:where(button[variant="ghost"][intent="danger"]:hover:not(:disabled)) {
+  background: var(--tint-danger-hover);
+}
+
+:where(button[variant="ghost"][intent="danger"]:is(:active, [aria-expanded="true"]):not(:disabled)) {
+  background: var(--tint-danger-active);
+}
+
+:where(button[variant="ghost"][intent="alert"]:hover:not(:disabled)) {
+  background: var(--tint-alert-hover);
+}
+
+:where(button[variant="ghost"][intent="alert"]:is(:active, [aria-expanded="true"]):not(:disabled)) {
+  background: var(--tint-alert-active);
+}
+
+:where(button[icon])::before {
+  content: "";
+  inline-size: 1lh;
+  block-size: 1lh;
+  grid-area: 1 / 1;
+}
+
+:where(button[icon] > *) {
+  grid-area: 1 / 1;
+}
+
+/* Sizes. A size pairs a text step — the line a control's cell follows —
+   with a padding step, so a size means the same thing wherever it appears
+   and mixed rows line up. The control lines are shared vocabulary
+   ([[ui/foundation/tokens/text.css]]): non-button controls — the tab, the
+   sidebar channel — state the same line from their own sheets.
+
+   Placed after the attribute rules above: at equal (zero) specificity,
+   source order lets a size outrank them (`size="sm"` padding beats
+   `icon`). */
+
+/* The default size, stated: a control's line is the control's, not its
+   context's — without this, height follows whatever leading the surroundings
+   happen to have. Stated in pixels, not the prose leading: a control's cell
+   is tighter than a paragraph's. A control's height is derived, never
+   declared: the control line, plus the space-2 padding step top and
+   bottom, plus a 1px border each side (transparent where no border
+   shows) — 24px, with the line as the only input
+   ([[ui/foundation/tokens/text.css]]). A control that visually contains
+   another holds it as an overlaid sibling. */
+:where(button) {
+  font-size: var(--control-font-size);
+  line-height: var(--line-control);
+}
+
+:where(button[size="sm"]) {
+  font-size: var(--text-sm);
+  /* Stated in pixels, not a ratio: a compact control's cell hugs its content,
+     and the default's prose leading would leave it mostly air. */
+  line-height: var(--line-control-sm);
+  padding: var(--space-2) var(--space-8);
+}
+
+:where(button[size="sm"][icon]) {
+  padding: var(--space-2);
+}
+
+/* A sized control sizes the icon it holds: whatever size the composer put on
+   the icon, the control's own wins — `tv-icon[size]` names a fixed pixel
+   size, so left alone the icon would ignore the control shrinking around it.
+   12px is the even-pixel step below the sm line, the same seat the default
+   button gives its glyph. */
+:where(button[size="sm"] tv-icon) {
+  font-size: 12px;
+}
+
+:where(:is(input:not([type]), input[type=""], input[type="text"], input[type="email"], input[type="url"], input[type="tel"], input[type="password"], input[type="number"], textarea)) {
+  box-sizing: border-box;
+  font-family: var(--font-sans);
+  font-size: var(--control-font-size);
+  line-height: var(--line-control);
+  color: var(--control-text-color);
+  background: var(--control-background);
+  border: var(--control-border);
+  border-radius: var(--control-radius);
+  padding: var(--control-padding);
+}
+
+:where(:is(input:not([type]), input[type=""], input[type="text"], input[type="email"], input[type="url"], input[type="tel"], input[type="password"], input[type="number"], textarea))::placeholder {
+  color: var(--input-placeholder-text-color);
+  opacity: 1;
+}
+
+:where(:is(input:not([type]), input[type=""], input[type="text"], input[type="email"], input[type="url"], input[type="tel"], input[type="password"], input[type="number"], textarea):focus-visible) {
+  outline: var(--outline-focus);
+  outline-offset: 0;
+}
+
+:where(:is(input:not([type]), input[type=""], input[type="text"], input[type="email"], input[type="url"], input[type="tel"], input[type="password"], input[type="number"], textarea)[aria-invalid="true"]) {
+  border-color: var(--color-danger);
+}
+
+:where(:is(input:not([type]), input[type=""], input[type="text"], input[type="email"], input[type="url"], input[type="tel"], input[type="password"], input[type="number"], textarea):disabled) {
+  background: var(--color-surface-muted);
+  opacity: 0.4;
+}
+
+:where(textarea) {
+  line-height: 1.5;
+  resize: vertical;
+}
+
+/* Shared error-message styling; validation and announcement belong to the surface. */
+:where(.tv-error) {
+  margin: 0;
+  color: var(--color-danger);
+  font-size: var(--text-sm);
+  line-height: 1.5;
+  overflow-wrap: anywhere;
+}
+
+/* The popover: the panel that floats over the page while the page stays
+   live, anchored to the trigger that opened it
+   ([[ui/foundation/popover/index.md]]). This sheet states the box and the
+   open state; the contents belong to the composing surface, and where the
+   panel sits is stated by the placement algorithm in the spec. */
+
+/* The box: the panel and the background, nothing inward. Sized to the
+   contents, not the page. tv-menu ([[ui/foundation/menu/index.md]]) and
+   tv-select ([[ui/foundation/select/index.md]]) are popover
+   specializations and wear the same box. */
+:where(tv-popover, tv-menu, tv-select) {
+  position: relative;
+  isolation: isolate;
+  width: max-content;
+  background: var(--panel-background);
+  background-clip: border-box;
+  /* Its own surface, its own ink and face: a panel floats over arbitrary
+     context and never inherits the color or font treatment around it —
+     the way a native menu renders as a system panel wherever it opens.
+     Weight and leading are the document base's and inherit unrepeated. */
+  color: var(--panel-text-color);
+  font-family: var(--font-sans);
+  border: var(--panel-border);
+  border-radius: var(--panel-radius);
+  box-shadow: var(--popover-shadow);
+}
+
+:where(tv-popover, tv-menu, tv-select)::before {
+  content: "";
+  position: var(--_panel-edge-position, absolute);
+  inset: var(--_panel-edge-inset, 0);
+  width: var(--_panel-edge-width, auto);
+  height: var(--_panel-edge-height, auto);
+  box-sizing: border-box;
+  border-radius: inherit;
+  box-shadow: var(--panel-edge-shadow);
+  pointer-events: none;
+}
+
+:where(tv-popover, tv-menu, tv-select)::after {
+  content: "";
+  position: var(--_panel-edge-position, absolute);
+  inset: var(--_panel-edge-inset, 0);
+  width: var(--_panel-edge-width, auto);
+  height: var(--_panel-edge-height, auto);
+  box-sizing: border-box;
+  border-radius: inherit;
+  padding: 1px;
+  font-size: var(--panel-radius);
+  background: var(--panel-edge-highlight);
+  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
+  mask-composite: exclude;
+  pointer-events: none;
+  z-index: 1;
+}
+
+/* The `open` attribute is the open state ([[ui/foundation/popover/index.md]],
+   Markup). The closed rule is deliberately not `:where()`-wrapped: an
+   interior sheet stating its own open display (a flex panel) must not
+   accidentally out-cascade closedness. */
+tv-popover:not([open]),
+tv-menu:not([open]),
+tv-select:not([open]) {
+  display: none;
+}
+
+:where(tv-popover[open], tv-menu[open], tv-select[open]) {
+  display: block;
+}
+
+/* The expanded trigger's treatment is the button's
+   ([[ui/foundation/button/index.md]]): the element maintains
+   `aria-expanded`, and the button sheet paints the state. */
+
+/* Native dialogs use the same paints; their container owns placement. */
+:where(dialog) {
+  position: relative;
+  isolation: isolate;
+  background: var(--panel-background);
+  background-clip: border-box;
+  color: var(--panel-text-color);
+  border: var(--panel-border);
+  border-radius: var(--panel-radius);
+  box-shadow: var(--dialog-shadow);
+}
+
+:where(dialog)::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  border-radius: inherit;
+  box-shadow: var(--panel-edge-shadow);
+  pointer-events: none;
+}
+
+:where(dialog)::after {
+  content: "";
+  position: absolute;
+  inset: 0;
+  border-radius: inherit;
+  padding: 1px;
+  font-size: var(--panel-radius);
+  background: var(--panel-edge-highlight);
+  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
+  mask-composite: exclude;
+  pointer-events: none;
+  z-index: 1;
+}
+
+/* The panel is a container: it can hold focus, but it never wears the focus
+   ring — that affordance belongs to its contents. */
+:where(dialog:focus-visible) {
+  outline: none;
+}
+
+:where(dialog:has(> .dialog-content)) {
+  overflow: visible;
+}
+
+/* Flex sizing applies both authored height and max-height to the scroll box. */
+:where(dialog[open]:has(> .dialog-content)) {
+  display: flex;
+  flex-direction: column;
+}
+
+/* The content scrolls inside the native dialog while its exterior paints remain visible. */
+:where(dialog > .dialog-content) {
+  height: 100%;
+  min-height: 0;
+  max-width: calc(100vw - 2 * var(--space-16));
+  max-height: calc(100vh - 2 * var(--space-16));
+  overflow: auto;
+  border-radius: inherit;
+}
+
+/* The menu interior ([[ui/foundation/menu/index.md]]): the panel is the
+   popover's box ([[ui/foundation/popover/styles.css]]); these rules state
+   what a menu holds inside it. */
+:where(tv-menu) {
+  min-width: 180px;
+  padding: var(--space-4);
+}
+
+:where(tv-menu-item) {
+  display: flex;
+  align-items: center;
+  /* The control line, stated as the button states it — a menu row is a
+     control, not prose, and inherits prose leading without this. */
+  font-size: var(--text-md);
+  line-height: var(--line-control);
+  /* A deeper inset than a control's row padding, and no border at all —
+     menu rows read as one list, and sit denser than controls standing
+     alone. */
+  padding: var(--space-3) var(--space-10);
+  /* The panel's radius less its padding, so the two curves sit concentric. */
+  border-radius: calc(var(--panel-radius) - var(--space-4));
+  cursor: default;
+}
+
+/* One highlight: the hover tint stands down while the keyboard holds the
+   highlight (a script focus from pointing shows no :focus-visible, so the
+   pointer path keeps its tint); the mouse moving again takes it back. */
+:where(tv-menu:not(:has(:focus-visible)) tv-menu-item:hover),
+:where(tv-menu-item:focus-visible) {
+  background: var(--option-background-highlighted);
+  outline: none;
+}
+
+:where(tv-menu-item:active) {
+  background: var(--option-background-active);
+}
+
+/* The destructive treatment: the danger situation as text, and the
+   situation's own tints, stated explicitly so a theme
+   overrides the pigment through the role. */
+:where(tv-menu-item[intent="danger"]) {
+  color: var(--color-danger);
+}
+
+:where(tv-menu:not(:has(:focus-visible)) tv-menu-item[intent="danger"]:hover),
+:where(tv-menu-item[intent="danger"]:focus-visible) {
+  background: var(--tint-danger-hover);
+}
+
+:where(tv-menu-item[intent="danger"]:active) {
+  background: var(--tint-danger-active);
+}
+
+:where(tv-menu hr) {
+  border: 0;
+  border-top: 1px solid var(--color-border);
+  margin: var(--space-4) calc(-1 * var(--space-4));
+}
+
+/* The select interior ([[ui/foundation/select/index.md]]): the panel is
+   the popover's box ([[ui/foundation/popover/styles.css]]); these rules state
+   what a select holds inside it. The row sits as the menu's does
+   ([[ui/foundation/menu/styles.css]]), with a leading gutter carrying the
+   selected mark. */
+/* The trigger: the choice reads from the leading edge and the caret sits
+   pinned at the trailing edge — the native pop-up arrangement, visible
+   whenever the widest-option width leaves room. The hook is the combobox
+   semantics the element writes on the trigger ([[arch/ui/elements.md]]);
+   the button's own inline-flex row ([[ui/foundation/button/button.css]])
+   supplies the rest. */
+:where(button[aria-haspopup="listbox"]) {
+  justify-content: space-between;
+  text-align: left;
+  /* Tighter than the standalone button's inset: the panel opens over this
+     control at its width, so the trigger sits closer to its list rows than
+     to freestanding buttons. Tighter still on the trailing side — the caret
+     hugs the right edge, since the label holds the left. */
+  padding-inline: var(--space-8) var(--space-4);
+}
+
+/* No minimum of its own: the panel is at least as wide as its trigger
+   ([[ui/foundation/select/index.md]], Placement), and no wider than its
+   options ask. */
+:where(tv-select) {
+  padding: var(--space-4);
+}
+
+:where(tv-option) {
+  position: relative;
+  display: flex;
+  align-items: center;
+  /* The control line, stated as the button states it — an option row is a
+     control, not prose, and inherits prose leading without this. */
+  font-size: var(--text-md);
+  line-height: var(--line-control);
+  /* A near-even inset: the leading edge holds the mark's gutter, and the
+     trailing edge carries enough of it back that the row reads balanced. */
+  padding: var(--space-3) var(--space-12) var(--space-3) var(--space-20);
+  /* The panel's radius less its padding, so the two curves sit concentric. */
+  border-radius: calc(var(--panel-radius) - var(--space-4));
+  cursor: default;
+}
+
+/* One highlight, element-managed ([[ui/foundation/select/index.md]],
+   Keyboard) — pointer and keyboard share the tint by construction, so no
+   hover rule exists to fight it. */
+:where(tv-option[highlighted]) {
+  background: var(--option-background-highlighted);
+}
+
+:where(tv-option:active) {
+  background: var(--option-background-active);
+}
+
+/* The selected mark: a check in the leading gutter, drawn as a mask (the
+   checklist's technique, [[ui/foundation/checkbox-list/styles.css]]) so the
+   authored option carries no icon markup. currentColor keeps it true on the
+   highlight tint. */
+:where(tv-option[selected])::before {
+  content: "";
+  position: absolute;
+  left: var(--space-4);
+  top: 50%;
+  translate: 0 -50%;
+  width: 1em;
+  height: 1em;
+  background: currentColor;
+  mask: var(--icon-check) center / 80% no-repeat;
+}
+
+/* The checklist's looks ([[ui/foundation/checkbox-list/index.md]]): the list's
+   stack, the row's marker-and-content grid, and the done treatment.
+   The checked marker consumes the shared `--checkbox-color` token. */
+checkbox-list {
+  display: grid;
+  gap: var(--space-6);
+  margin: var(--space-12) 0;
+}
+
+checkbox-item {
+  position: relative;
+  display: grid;
+  grid-template-columns: 1em minmax(0, 1fr);
+  gap: var(--space-8);
+  align-items: baseline;
+}
+
+/* The marker box, seated on the first line's text. */
+checkbox-item::before {
+  content: "";
+  width: 1em;
+  height: 1em;
+  align-self: start;
+  translate: 0 0.12em;
+  background: transparent;
+  border: var(--control-border);
+  border-radius: var(--control-radius);
+  box-sizing: border-box;
+  cursor: not-allowed;
+}
+
+checkbox-item[checked]::before {
+  background: var(--checkbox-color);
+  border-color: var(--checkbox-color);
+}
+
+/* The check, drawn as a mask over the marker's cell. */
+checkbox-item[checked]::after {
+  content: "";
+  position: absolute;
+  left: 0;
+  top: 0.12em;
+  width: 1em;
+  height: 1em;
+  background: var(--color-surface);
+  mask: var(--icon-check) center / 80% no-repeat;
+}
+
+checkbox-item[checked] {
+  color: var(--color-text-muted);
+  text-decoration: line-through;
+  text-decoration-thickness: 0.08em;
+}
+
+tv-icon:not(:defined) {
+  display: inline-flex;
+  flex: none;
+  width: 1em;
+  height: 1em;
+  /* Glyphs are drawn on a square canvas whose visual weight sits below the
+     cap height of the text beside them; nudging down aligns their centre with
+     the text's rather than with its baseline box. */
+  vertical-align: -0.125em;
+}
+
+tv-icon:not(:defined)[size="sm"] { font-size: 16px; }
+
+tv-icon:not(:defined)[size="md"] { font-size: 20px; }
+
+tv-icon:not(:defined)[size="lg"] { font-size: 24px; }
+
+tv-icon:not(:defined)[size="xl"] { font-size: 32px; }