@telepath-computer/television 0.1.205 → 0.1.208

package/dist/canonical/v1/styles.css

@@ -1,15 +1,3 @@
-/*
- * Canonical artifact stylesheet — the curated subset of the design system
- * artifacts inherit at /canonical/v1/styles.css.
- *
- * Includes the design-system primitives artifacts should inherit by default:
- * reset, fonts, tokens, theme defaults, and conservative document typography for plain
- * semantic HTML. Artifact-specific structure and rhythm should still be
- * authored explicitly in the artifact HTML so agents can see and control the
- * result, but basic prose should not fall back to browser defaults.
- *
- * Source of truth for what's in v1. Edits here change what artifacts inherit.
- */
 *,
 *::before,
 *::after {
@@ -22,6 +10,14 @@ body {
   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. */
+body {
+  font-family: var(--font-sans);
+  font-size: var(--text-md);
+  color: var(--color-text);
+}
+
 h1,
 h2,
 h3,
@@ -39,109 +35,41 @@ hr {
 
 button,
 input,
-textarea,
-select {
+select,
+textarea {
   font: inherit;
   color: inherit;
 }
 
+/* Hind — the committed variable cut, weights 300–700. */
 @font-face {
   font-family: "Hind";
-  src: url(/canonical/v1/fonts/Hind-Variable.woff2) format("woff2-variations");
+  src: url(/canonical/v1/fonts/Hind-Variable.933e9900.woff2) format("woff2-variations");
   font-weight: 300 700;
-  font-style: normal;
-  font-display: swap;
+  font-display: block;
 }
 
-
 :root {
-  /* Fonts */
-  --font-sans:
-    "Hind", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial,
-    sans-serif;
-  --font-brand: var(--font-sans);
-  --font-mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, monospace;
-  --font-weight-body: 500;
-
-  /* Type scale */
-  --text-base: 13.5px;
-  --text-scale: 1.125;
-  --text-sm: round(calc(var(--text-base) / var(--text-scale)), 1px);
-  --text-lg: round(calc(var(--text-base) * var(--text-scale)), 1px);
-  --text-xl: round(calc(var(--text-lg) * var(--text-scale)), 1px);
-  --leading-base: 1.5;
-
-  /* Control height — single source of truth for buttons, segmented-controls,
-     inputs and any future control whose shape includes "horizontal pill".
-     Suffix names a size (md = default); add `--control-height-sm`,
-     `--control-height-lg` if/when those sizes appear. Setting the height
-     directly (vs. computing from padding + line-height) is what lets a
-     mixed row of text + icon-only chrome line up exactly. */
-  /* xs is for affordances that live *inside* another control (close on a
-     tab, dismiss on a chip, clear-input). Smaller than the floor a row of
-     siblings would line up with. */
-  --control-height-xs: 18px;
-  --control-height-sm: 24px;
-  --control-height-md: 28px;
-  --control-height-lg: 32px;
-
-  /* Spacing */
-  --space-2: 2px;
-  --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 — pixel-named tokens. Token name = the rounded-rect value
-     (what you'd intuitively dial in). Squircle-supporting browsers bump
-     each step ~25% to keep corner roundness perceptually equivalent
-     (squircles look "tighter" than rounded rects at the same numeric
-     radius). The `corner-shape: squircle` flip lives in elements.css —
-     applied via `*` so any element with a radius gets squircled corners
-     automatically. The `--radius-4` and `--radius-full` ends don't bump:
-     too small to perceive a difference, too large for it to matter. */
-  --radius-4:    4px;
-  --radius-8:    8px;
-  --radius-12:  12px;
-  --radius-16:  16px;
-  --radius-24:  24px;
-  --radius-full: 9999px;
-
-/* Z-index ladder — semantic tiers for stacking. Components set
-     `z-index: var(--layer-*)` directly when they need a specific tier
-     (the `level` attribute in materials.css only controls shadow). */
-  --layer-chrome:  100;
-  --layer-panel:   500;
-  --layer-overlay: 2000;
-
-  /* Shadows */
-  --shadow-hairline: 0 0 0 0.5px var(--color-border);
-  /* Soft 2-layer drop shadow shared by buttons, dropdown triggers, and
-     other controls that aren't surfaces. Surface elevation lives on
-     [level=...] in materials.css. */
-  --shadow-control:
-    0 1px 1px rgb(0 0 0 / 0.04),
-    0 2px 6px rgb(0 0 0 / 0.06);
+  /* Colors */
+  --black: #000000;
+  --white: #ffffff;
 
-  /* Alpha scale — raw percentage values, no base color baked in.
-     Callers mix at the use site:
-       color-mix(in srgb, <base> var(--alpha-700), transparent)
-     One scale serves every base (black, white, currentColor, a brand
-     color, a fixed neutral). Steps follow the Tailwind 50/100/.../950
-     grid. */
-  --alpha-50:  4%;
+  /* Neutral */
+  --neutral-50: oklch(98.5% 0 none);
+  --neutral-100: oklch(97% 0 none);
+  --neutral-200: oklch(92.2% 0 none);
+  --neutral-300: oklch(87% 0 none);
+  --neutral-400: oklch(70.8% 0 none);
+  --neutral-500: oklch(55.6% 0 none);
+  --neutral-600: oklch(43.9% 0 none);
+  --neutral-700: oklch(37.1% 0 none);
+  --neutral-800: oklch(26.9% 0 none);
+  --neutral-900: oklch(20.5% 0 none);
+  --neutral-950: oklch(14.5% 0 none);
+
+  /* Alpha */
+  --alpha-50: 4%;
   --alpha-100: 8%;
-  /* Half-step between 100 and 200 — for surfaces that need a touch
-     more presence than tint-100 without the heft of tint-200 (e.g.
-     a footer button attached to a tint-100 panel). */
-  --alpha-150: 11%;
   --alpha-200: 15%;
   --alpha-300: 22%;
   --alpha-400: 30%;
@@ -152,62 +80,58 @@ select {
   --alpha-900: 90%;
   --alpha-950: 95%;
 
-  /* Tint scale on the inherited text color — auto-flips with context.
-     Useful when you want a faded version of whatever the surrounding
-     foreground color is (label text, separator alphas, recessed
-     button/input bgs on a known surface). */
-  --tint-50:  color-mix(in srgb, currentColor var(--alpha-50),  transparent);
-  --tint-100: color-mix(in srgb, currentColor var(--alpha-100), transparent);
-  --tint-150: color-mix(in srgb, currentColor var(--alpha-150), transparent);
-  --tint-200: color-mix(in srgb, currentColor var(--alpha-200), transparent);
-  --tint-300: color-mix(in srgb, currentColor var(--alpha-300), transparent);
-  --tint-400: color-mix(in srgb, currentColor var(--alpha-400), transparent);
-  --tint-500: color-mix(in srgb, currentColor var(--alpha-500), transparent);
-  --tint-600: color-mix(in srgb, currentColor var(--alpha-600), transparent);
-  --tint-700: color-mix(in srgb, currentColor var(--alpha-700), transparent);
-  --tint-800: color-mix(in srgb, currentColor var(--alpha-800), transparent);
-  --tint-900: color-mix(in srgb, currentColor var(--alpha-900), transparent);
-  --tint-950: color-mix(in srgb, currentColor var(--alpha-950), transparent);
-
-  /* Semantic overlay tokens — chromeless overlay hover/active fills
-     (ghost button, dropdown item, screen pill). Defaults to a black-base
-     mix for light surfaces; `[tone="dark"]` in materials.css repoints
-     these to white-base mixes at one step deeper (8% black ≈ 15% white
-     in perceived intensity). */
-  --color-overlay-hover:  color-mix(in srgb, var(--black) var(--alpha-100), transparent);
-  --color-overlay-active: color-mix(in srgb, var(--black) var(--alpha-300), transparent);
-
-  /* Frosted-glass backdrop filter, shared across translucent surfaces. */
-  --backdrop-blur-glass: blur(20px) saturate(1.4);
+  /* Blue */
+  --blue-50: oklch(0.97 0.014 254.604);
+  --blue-100: oklch(0.932 0.032 255.585);
+  --blue-200: oklch(0.882 0.059 254.128);
+  --blue-300: oklch(0.809 0.105 251.813);
+  --blue-400: oklch(0.707 0.165 254.624);
+  --blue-500: oklch(0.623 0.214 259.815);
+  --blue-600: oklch(0.546 0.245 262.881);
+  --blue-700: oklch(0.488 0.243 264.376);
+  --blue-800: oklch(0.424 0.199 265.638);
+  --blue-900: oklch(0.379 0.146 265.522);
 
-  /* Palette */
-  --black: #000000;
-  --white: #ffffff;
+  /* Red — the destructive and error hue: a press that destroys, a rejected
+     token, a failure line. Tailwind's red, like the blue. */
+  --red-50: oklch(0.971 0.013 17.38);
+  --red-100: oklch(0.936 0.032 17.717);
+  --red-200: oklch(0.885 0.062 18.334);
+  --red-300: oklch(0.808 0.114 19.571);
+  --red-400: oklch(0.704 0.191 22.216);
+  --red-500: oklch(0.637 0.237 25.331);
+  --red-600: oklch(0.577 0.245 27.325);
+  --red-700: oklch(0.505 0.213 27.518);
+  --red-800: oklch(0.444 0.177 26.899);
+  --red-900: oklch(0.396 0.141 25.723);
+
+  /* Yellow — the attention color: worn by things that need noticing exactly
+     while they apply (the update bell), never for emphasis, which is the key
+     color's job. */
+  --yellow-50: oklch(0.987 0.026 102.212);
+  --yellow-100: oklch(0.973 0.071 103.193);
+  --yellow-200: oklch(0.945 0.129 101.54);
+  --yellow-300: oklch(0.905 0.182 98.111);
+  --yellow-400: oklch(0.852 0.199 91.936);
+  --yellow-500: oklch(0.795 0.184 86.047);
+  --yellow-600: oklch(0.681 0.162 75.834);
+  --yellow-700: oklch(0.554 0.135 66.442);
+  --yellow-800: oklch(0.476 0.114 61.907);
+  --yellow-900: oklch(0.421 0.095 57.708);
+  --yellow-950: oklch(0.286 0.066 53.813);
 
-  --neutral-50: oklch(0.985 0 0);
-  --neutral-100: oklch(0.97 0 0);
-  --neutral-200: oklch(0.923 0 0);
-  --neutral-300: oklch(0.869 0 0);
-  --neutral-350: oklch(0.79 0 0);
-  --neutral-400: oklch(0.709 0 0);
-  --neutral-500: oklch(0.553 0 0);
-  --neutral-600: oklch(0.444 0 0);
-  --neutral-700: oklch(0.374 0 0);
-  --neutral-800: oklch(0.268 0 0);
-  --neutral-900: oklch(0.216 0 0);
-  --neutral-950: oklch(0.147 0 0);
-
-  --red-50: oklch(0.969 0.015 12.422);
-  --red-100: oklch(0.941 0.03 12.58);
-  --red-200: oklch(0.892 0.058 10.001);
-  --red-300: oklch(0.81 0.117 11.638);
-  --red-400: oklch(0.712 0.194 13.428);
-  --red-500: oklch(0.645 0.246 16.439);
-  --red-600: oklch(0.586 0.253 17.585);
-  --red-700: oklch(0.514 0.222 16.935);
-  --red-800: oklch(0.455 0.188 13.697);
-  --red-900: oklch(0.41 0.159 10.272);
-  --red-950: oklch(0.271 0.105 12.094);
+  /* Green, orange, purple — accent ramps. Tailwind's values, like the
+     blue. */
+  --green-50: oklch(0.982 0.018 155.826);
+  --green-100: oklch(0.962 0.044 156.743);
+  --green-200: oklch(0.925 0.084 155.995);
+  --green-300: oklch(0.871 0.15 154.449);
+  --green-400: oklch(0.792 0.209 151.711);
+  --green-500: oklch(0.723 0.219 149.579);
+  --green-600: oklch(0.627 0.194 149.214);
+  --green-700: oklch(0.527 0.154 150.069);
+  --green-800: oklch(0.448 0.119 151.328);
+  --green-900: oklch(0.393 0.095 152.535);
 
   --orange-50: oklch(0.98 0.016 73.684);
   --orange-100: oklch(0.954 0.038 75.164);
@@ -219,238 +143,374 @@ select {
   --orange-700: oklch(0.553 0.195 38.402);
   --orange-800: oklch(0.47 0.157 37.304);
   --orange-900: oklch(0.408 0.123 38.172);
-  --orange-950: oklch(0.266 0.079 36.259);
-
-  --yellow-50: oklch(0.987 0.026 102.212);
-  --yellow-100: oklch(0.973 0.071 103.193);
-  --yellow-200: oklch(0.945 0.129 101.54);
-  --yellow-300: oklch(0.905 0.182 98.111);
-  --yellow-400: oklch(0.852 0.199 91.936);
-  --yellow-500: oklch(0.795 0.184 86.047);
-  --yellow-600: oklch(0.681 0.162 75.834);
-  --yellow-700: oklch(0.554 0.135 66.442);
-  --yellow-800: oklch(0.476 0.114 61.907);
-  --yellow-900: oklch(0.421 0.095 57.708);
-  --yellow-950: oklch(0.286 0.066 53.813);
 
-  --green-50: oklch(0.979 0.021 166.113);
-  --green-100: oklch(0.95 0.052 163.051);
-  --green-200: oklch(0.905 0.093 164.15);
-  --green-300: oklch(0.845 0.143 164.978);
-  --green-400: oklch(0.765 0.177 163.223);
-  --green-500: oklch(0.696 0.17 162.48);
-  --green-600: oklch(0.596 0.145 163.225);
-  --green-700: oklch(0.508 0.118 165.612);
-  --green-800: oklch(0.432 0.095 166.913);
-  --green-900: oklch(0.378 0.077 168.94);
-  --green-950: oklch(0.262 0.051 172.552);
+  --purple-50: oklch(0.977 0.014 308.299);
+  --purple-100: oklch(0.946 0.033 307.174);
+  --purple-200: oklch(0.902 0.063 306.703);
+  --purple-300: oklch(0.827 0.119 306.383);
+  --purple-400: oklch(0.714 0.203 305.504);
+  --purple-500: oklch(0.627 0.265 303.9);
+  --purple-600: oklch(0.558 0.288 302.321);
+  --purple-700: oklch(0.496 0.265 301.924);
+  --purple-800: oklch(0.438 0.218 303.724);
+  --purple-900: oklch(0.381 0.176 304.987);
+
+  /* Tint */
+  --tint-50: color-mix(in srgb, currentColor var(--alpha-50), transparent);
+  --tint-100: color-mix(in srgb, currentColor var(--alpha-100), transparent);
+  --tint-200: color-mix(in srgb, currentColor var(--alpha-200), transparent);
+  --tint-300: color-mix(in srgb, currentColor var(--alpha-300), transparent);
+  --tint-400: color-mix(in srgb, currentColor var(--alpha-400), transparent);
+  --tint-500: color-mix(in srgb, currentColor var(--alpha-500), transparent);
+  --tint-600: color-mix(in srgb, currentColor var(--alpha-600), transparent);
+  --tint-700: color-mix(in srgb, currentColor var(--alpha-700), transparent);
+  --tint-800: color-mix(in srgb, currentColor var(--alpha-800), transparent);
+  --tint-900: color-mix(in srgb, currentColor var(--alpha-900), transparent);
+  --tint-950: color-mix(in srgb, currentColor var(--alpha-950), transparent);
 
-  --blue-50: oklch(0.97 0.014 254.604);
-  --blue-100: oklch(0.932 0.032 255.585);
-  --blue-200: oklch(0.882 0.059 254.128);
-  --blue-300: oklch(0.809 0.105 251.813);
-  --blue-400: oklch(0.707 0.165 254.624);
-  --blue-500: oklch(0.623 0.214 259.815);
-  --blue-600: oklch(0.546 0.245 262.881);
-  --blue-700: oklch(0.488 0.243 264.376);
-  --blue-800: oklch(0.424 0.199 265.638);
-  --blue-900: oklch(0.379 0.146 265.522);
-  --blue-950: oklch(0.282 0.091 267.935);
+  /* Color roles — what a color is for, resolved onto the ramps above. */
+  --color-text: var(--neutral-900);
+  --color-text-muted: var(--neutral-500);
+  /* The interface's key color — what carries emphasis and marks the thing
+     you are on. Selection reads as this rather than as a heavier grey, so
+     "hovered" and "selected" differ in hue, not just in weight. */
+  --color-primary: var(--blue-600);
+  /* A fill and the text that survives on it are a pair. Naming the foreground
+     keeps the contrast a stated decision rather than something each use site
+     guesses at — white on blue-500 measures 3.76:1 and fails AA at body size. */
+  --color-on-primary: var(--white);
+  --color-selected: var(--color-primary);
+  /* What the app's own content sits on, behind the surfaces it holds. Darker
+     than those surfaces rather than lighter, so a white one reads as lifted
+     off it — a gap of background is how the app shows where its own chrome
+     ends and something it is holding begins. */
+  --color-background: var(--neutral-200);
+  /* The ground of a document or artifact the app holds. Surface vocabulary
+     belongs to that held content; the chrome's own ground stays
+     --color-background. */
+  --color-surface: var(--white);
+  /* A quiet region within a held surface: distinct without reading as a
+     second layer of app chrome. */
+  --color-surface-muted: var(--neutral-100);
+  /* The ordinary seam between surface regions. Ten percent is deliberate:
+     the alpha ramp's neighbouring steps are too faint and too strong. */
+  --color-border: rgb(0 0 0 / 10%);
+  /* A repeated or subordinate seam should organize without boxing things in;
+     six percent stays below the ordinary border without disappearing. */
+  --color-border-muted: rgb(0 0 0 / 6%);
+  /* A link follows its surrounding text unless a theme gives it an accent. */
+  --color-link: inherit;
+  /* The destructive and error role. */
+  --color-danger: var(--red-600);
+  /* The affirmative and completed-state role. */
+  --color-success: var(--green-600);
+  /* The caution and warning role. */
+  --color-warning: var(--orange-600);
 
-  --purple-50: oklch(0.969 0.016 293.756);
-  --purple-100: oklch(0.943 0.029 294.588);
-  --purple-200: oklch(0.894 0.057 293.283);
-  --purple-300: oklch(0.811 0.111 293.571);
-  --purple-400: oklch(0.702 0.183 293.541);
-  --purple-500: oklch(0.606 0.25 292.717);
-  --purple-600: oklch(0.541 0.281 293.009);
-  --purple-700: oklch(0.491 0.27 292.581);
-  --purple-800: oklch(0.432 0.232 292.759);
-  --purple-900: oklch(0.38 0.189 293.745);
-  --purple-950: oklch(0.283 0.141 291.089);
+  color-scheme: light;
 }
 
-/* Squircle compensation — bump radii ~25% so corners read at the same
-   perceived roundness as the rounded-rect equivalents on browsers that
-   don't yet support `corner-shape: squircle`. The universal corner-shape
-   flip lives in elements.css. */
-@supports (corner-shape: squircle) {
-  :root {
-    --radius-8:  10px;
-    --radius-12: 15px;
-    --radius-16: 20px;
-    --radius-24: 30px;
-  }
+:root {
+  /* Type */
+  /* The base the steps below compute from. */
+  --text-base: 14px;
+  --text-sm: round(calc(var(--text-md) / var(--text-scale)), 1px);
+  --text-md: var(--text-base);
+  --text-lg: round(calc(var(--text-md) * var(--text-scale)), 1px);
+  --text-xl: round(calc(var(--text-lg) * var(--text-scale)), 1px);
+  --text-2xl: round(calc(var(--text-xl) * var(--text-scale)), 1px);
+  --text-3xl: 24px;
+  --text-4xl: 30px;
+  --text-scale: 1.125;
+  --leading-base: 1.5;
+
+  /* Fonts */
+  --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-body: var(--font-weight-medium);
+  --font-weight-semibold: 600;
 }
 
-/* Font switcher — set data-font on <html> to swap --font-sans. */
+:root {
+  /* Spacing */
+  --space-2: 2px;
+  --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;
 
-:root[data-font="system"] {
-  --font-sans:
-    -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
+  /* Radius */
+  --radius-4: 4px;
+  --radius-6: 6px;
+  --radius-8: 8px;
+  --radius-12: 12px;
+  --radius-16: 16px;
+  --radius-24: 24px;
+  --radius-full: 9999px; /* pill — fully rounded ends at any element size */
 }
 
+:root {
+  /* The elevation a floating panel lifts off the page with: a broad soft
+     throw and a tight contact shadow. A role, not a ramp — there is one
+     elevation in the system; a scale grows if more appear. */
+  --shadow-panel:
+    0 8px 24px rgba(0, 0, 0, 0.12),
+    0 2px 8px rgba(0, 0, 0, 0.06);
+}
 
-
+/* Canonical v1 compatibility ([[arch/canonical.md#compatibility]]): retired
+   names only, preserved at shipped values or same-meaning successors. */
 :root {
   --color-bg: var(--neutral-50);
-  --color-bg-muted: var(--neutral-100);
-  --color-surface: var(--white);
-  --color-surface-muted: var(--neutral-100);
+  --color-bg-muted: var(--color-surface-muted);
   --color-interactive: var(--neutral-200);
   --color-interactive-hover: var(--neutral-300);
-
-  /* Borders use alpha so the same hairline reads on light, dark, or
-     image bgs without needing a tone-aware swap. */
-  --color-border: rgba(0, 0, 0, 0.10);
-  --color-border-muted: rgba(0, 0, 0, 0.06);
-
-  --color-text: var(--neutral-900);
-  --color-text-muted: var(--neutral-500);
-  --color-link: inherit;
-  --color-focus-ring: var(--neutral-500);
+  --color-focus-ring: var(--color-primary);
   --color-overlay-backdrop: rgb(0 0 0 / 0.5);
+  --color-overlay-hover: color-mix(in srgb, var(--black) var(--alpha-100), transparent);
+  --color-overlay-active: color-mix(in srgb, var(--black) var(--alpha-300), transparent);
   --color-highlight: rgb(255 255 255 / 0.5);
-  --color-primary: var(--blue-500);
-  --color-danger: var(--red-600);
 
-  color-scheme: light;
-}
+  --font-brand: var(--font-sans);
 
+  --shadow-hairline: 0 0 0 0.5px var(--color-border);
+  --shadow-control:
+    0 1px 1px rgb(0 0 0 / 0.04),
+    0 2px 6px rgb(0 0 0 / 0.06);
 
+  --control-height-xs: 18px;
+  --control-height-sm: 24px;
+  --control-height-md: 28px;
+  --control-height-lg: 32px;
 
+  --layer-chrome: 100;
+  --layer-panel: 500;
+  --layer-overlay: 2000;
+
+  --backdrop-blur-glass: blur(20px) saturate(1.4);
+
+  --neutral-350: oklch(0.79 0 0);
+  --alpha-150: 11%;
+  --tint-150: color-mix(in srgb, currentColor var(--alpha-150), transparent);
+  --blue-950: oklch(0.282 0.091 267.935);
+  --orange-950: oklch(0.266 0.079 36.259);
+  --red-950: oklch(0.271 0.105 12.094);
+  --green-950: oklch(0.262 0.051 172.552);
+  --purple-950: oklch(0.283 0.141 291.089);
+}
+
+/* The prose treatment ([[ui/foundation/index.md]], Prose): document
+   typography for plain semantic HTML, written for a document that is the
+   sheet's own — an artifact's page. Selectors are bare elements at the
+   reset's own specificity, loading after it; a document's own styling,
+   arriving later still, outranks both. */
+
+/* The document's base, set at the root so the scale's steps follow. */
+:root {
+  --text-base: 14.5px;
+}
 
 body {
-  font-family: var(--font-sans);
-  font-size: calc(var(--text-base) + 0.5px);
+  margin: 0;
+  font-size: var(--text-md);
   font-weight: var(--font-weight-body);
   line-height: var(--leading-base);
-  letter-spacing: 0.015em;
-  color: var(--color-text);
-  /* The artifact page is the card surface — Television's artifact-view frames
-     the whole document as a card, so the default page background is the
-     surface color. A muted backdrop (--color-bg) is something an artifact
-     opts into, not the default. */
+  /* The reset supplies the paired text colour. */
   background: var(--color-surface);
   -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
-
-a {
-  color: var(--color-link);
-  text-underline-offset: 0.15em;
-  text-decoration-thickness: 0.08em;
 }
 
-h1,
-h2,
-h3,
-h4,
-h5,
-h6 {
-  font-weight: 600;
+/* The heading scale. */
+h1 {
+  font-size: var(--text-3xl);
+  font-weight: var(--font-weight-semibold);
   line-height: 1.25;
-  color: inherit;
+  margin: 0 0 var(--space-12);
 }
 
-h1 {
-  font-size: 1.3em;
+h2 {
+  font-size: var(--text-xl);
+  font-weight: var(--font-weight-semibold);
+  line-height: 1.3;
+  margin: var(--space-24) 0 var(--space-8);
 }
 
-h2 {
-  font-size: 1.1em;
+h3, h4, h5, h6 {
+  font-size: var(--text-lg);
+  font-weight: var(--font-weight-semibold);
+  margin: var(--space-16) 0 var(--space-4);
 }
 
-h3,
-h4,
-h5,
-h6 {
-  font-size: 1em;
+/* Block rhythm. */
+p, ul, ol, blockquote, pre, hr, table, figure {
+  margin: 0 0 var(--space-12);
 }
 
-p,
-ul,
-ol,
-blockquote,
-pre,
-hr,
-table {
-  margin: var(--space-12) 0;
+body > :last-child {
+  margin-bottom: 0;
 }
 
-:is(h1, h2, h3, h4, h5, h6) + :is(p, ul, ol, blockquote, pre, hr, table) {
-  margin-top: var(--space-8);
+a {
+  color: var(--color-link);
+  text-decoration: underline;
+  text-underline-offset: 2px;
 }
 
-/* Page-header idiom: a <header> holds a heading and optionally one <p>
-   subtitle — a date line, a description. A paragraph inside any header is a
-   subtitle: slightly smaller than body prose, at body weight, hugging its
-   heading — proximity and the heading above do the differentiating. */
-header p {
-  font-size: var(--text-base);
-  font-weight: var(--font-weight-body);
+ul, ol {
+  padding-left: var(--space-24);
 }
-header :is(h1, h2, h3, h4, h5, h6) + p {
-  margin-top: var(--space-2);
+
+li + li {
+  margin-top: var(--space-4);
 }
 
-ul,
-ol {
-  padding-left: var(--space-24);
+blockquote {
+  border-left: 2px solid var(--color-border);
+  padding-left: var(--space-12);
+  color: var(--color-text-muted);
 }
 
-code {
+code, kbd, samp {
   font-family: var(--font-mono);
-  font-size: 0.9em;
-  background: var(--color-bg-muted);
-  padding: var(--space-2) var(--space-4);
+  font-size: var(--text-sm);
+  background: var(--color-surface-muted);
   border-radius: var(--radius-4);
+  padding: 1px var(--space-4);
 }
 
 pre {
   font-family: var(--font-mono);
   font-size: var(--text-sm);
-  background: var(--color-bg-muted);
-  padding: var(--space-12);
+  background: var(--color-surface-muted);
   border: 1px solid var(--color-border-muted);
-  border-radius: var(--radius-8);
+  border-radius: var(--radius-6);
+  padding: var(--space-12);
   overflow-x: auto;
 }
 
+/* A block's code cell. */
 pre code {
   background: none;
+  border-radius: 0;
   padding: 0;
 }
 
-blockquote {
-  padding-left: var(--space-16);
-  border-left: 3px solid var(--color-border);
-  color: var(--color-text-muted);
-}
-
 hr {
-  border: none;
+  border: 0;
   border-top: 1px solid var(--color-border);
 }
 
 table {
-  width: 100%;
   border-collapse: collapse;
+  width: 100%;
 }
 
-th,
-td {
-  padding: var(--space-8) var(--space-12);
-  border: 1px solid var(--color-border);
+th {
   text-align: left;
+  font-weight: var(--font-weight-semibold);
+  background: var(--color-surface-muted);
 }
 
-th {
-  background: var(--color-bg-muted);
-  font-weight: 600;
+th, td {
+  padding: var(--space-4) var(--space-12) var(--space-4) 0;
+  border-bottom: 1px solid var(--color-border);
 }
 
 img {
   max-width: 100%;
   height: auto;
 }
+
+/* The header idiom. */
+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. */
+header :is(h1, h2, h3, h4, h5, h6):has(+ p) {
+  margin-bottom: 0;
+}
+
+header :is(h1, h2, h3, h4, h5, h6) + p {
+  margin-top: var(--space-4);
+}
+
+tv-icon:not(:defined) {
+  display: inline-flex;
+  flex: none;
+  width: 1em;
+  height: 1em;
+  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; }
+
+/* The checklist's looks ([[ui/elements/checkbox-list/index.md]]): the list's
+   stack, the row's marker-and-content grid, and the done treatment.
+   `--checkbox-color` is the styling API ([[arch/ui/elements.md]]). */
+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: 1px solid var(--tint-300);
+  border-radius: var(--radius-4);
+  box-sizing: border-box;
+  cursor: not-allowed;
+}
+
+checkbox-item[checked]::before {
+  background: var(--checkbox-color, var(--color-primary));
+  border-color: var(--checkbox-color, var(--color-primary));
+}
+
+/* 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: 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>') center / 80% no-repeat;
+}
+
+checkbox-item[checked] {
+  color: var(--color-text-muted);
+  text-decoration: line-through;
+  text-decoration-thickness: 0.08em;
+}