@ptbdynamic/plinth 0.0.0-stage → 0.1.1

package/packages/css/dist/plinth.css

@@ -0,0 +1,3773 @@
+/* Built from packages/tokens/tokens/*.json. Do not edit by hand. */
+
+@layer plinth {
+  :root {
+    --plinth-ref-color-neutral-0: oklch(1 0 0);
+    --plinth-ref-color-neutral-50: oklch(0.985 0.002 260);
+    --plinth-ref-color-neutral-100: oklch(0.965 0.003 260);
+    --plinth-ref-color-neutral-150: oklch(0.945 0.004 260);
+    --plinth-ref-color-neutral-200: oklch(0.92 0.004 260);
+    --plinth-ref-color-neutral-300: oklch(0.82 0.005 260);
+    --plinth-ref-color-neutral-400: oklch(0.71 0.008 260);
+    --plinth-ref-color-neutral-500: oklch(0.54 0.01 260);
+    --plinth-ref-color-neutral-600: oklch(0.45 0.01 260);
+    --plinth-ref-color-neutral-700: oklch(0.37 0.01 260);
+    --plinth-ref-color-neutral-800: oklch(0.27 0.008 260);
+    --plinth-ref-color-neutral-850: oklch(0.235 0.007 260);
+    --plinth-ref-color-neutral-900: oklch(0.205 0.006 260);
+    --plinth-ref-color-neutral-950: oklch(0.18 0.005 260);
+    --plinth-ref-color-neutral-1000: oklch(0.145 0.004 260);
+    --plinth-ref-color-brand-50: #eff6ff;
+    --plinth-ref-color-brand-100: #dbeafe;
+    --plinth-ref-color-brand-200: #bfdbfe;
+    --plinth-ref-color-brand-300: #93c5fd;
+    --plinth-ref-color-brand-400: #60a5fa;
+    --plinth-ref-color-brand-500: #3b82f6;
+    --plinth-ref-color-brand-600: #2563eb;
+    --plinth-ref-color-brand-700: #1d4ed8;
+    --plinth-ref-color-brand-800: #1e40af;
+    --plinth-ref-color-brand-900: #1e3a8a;
+    --plinth-ref-color-brand-950: #172554;
+    --plinth-ref-color-green-50: #f0fdf4;
+    --plinth-ref-color-green-100: #dcfce7;
+    --plinth-ref-color-green-200: #bbf7d0;
+    --plinth-ref-color-green-400: #4ade80;
+    --plinth-ref-color-green-600: #16a34a;
+    --plinth-ref-color-green-700: #15803d;
+    --plinth-ref-color-green-800: #166534;
+    --plinth-ref-color-green-950: #052e16;
+    --plinth-ref-color-amber-50: #fffbeb;
+    --plinth-ref-color-amber-100: #fef3c7;
+    --plinth-ref-color-amber-200: #fde68a;
+    --plinth-ref-color-amber-400: #fbbf24;
+    --plinth-ref-color-amber-500: #f59e0b;
+    --plinth-ref-color-amber-700: #b45309;
+    --plinth-ref-color-amber-800: #92400e;
+    --plinth-ref-color-amber-950: #451a03;
+    --plinth-ref-color-red-50: #fef2f2;
+    --plinth-ref-color-red-100: #fee2e2;
+    --plinth-ref-color-red-200: #fecaca;
+    --plinth-ref-color-red-400: #f87171;
+    --plinth-ref-color-red-600: #dc2626;
+    --plinth-ref-color-red-700: #b91c1c;
+    --plinth-ref-color-red-800: #991b1b;
+    --plinth-ref-color-red-950: #450a0a;
+    --plinth-ref-color-black-alpha-10: #0000001a;
+    --plinth-ref-color-black-alpha-15: #00000026;
+    --plinth-ref-color-black-alpha-30: #0000004d;
+    --plinth-ref-color-black-alpha-50: #00000080;
+    --plinth-ref-color-black-alpha-60: #00000099;
+    --plinth-ref-color-black-alpha-70: #000000b3;
+    --plinth-ref-color-ink-alpha-6: oklch(0.18 0.005 260 / 0.06);
+    --plinth-ref-color-ink-alpha-10: oklch(0.18 0.005 260 / 0.1);
+    --plinth-ref-color-ink-alpha-20: oklch(0.18 0.005 260 / 0.2);
+    --plinth-ref-color-chalk-alpha-6: oklch(0.965 0.003 260 / 0.06);
+    --plinth-ref-color-chalk-alpha-10: oklch(0.965 0.003 260 / 0.1);
+    --plinth-ref-color-chalk-alpha-20: oklch(0.965 0.003 260 / 0.2);
+    --plinth-ref-color-white-alpha-12: #ffffff1f;
+    --plinth-ref-space-0: 0;
+    --plinth-ref-space-1: 0.25rem;
+    --plinth-ref-space-2: 0.5rem;
+    --plinth-ref-space-3: 0.75rem;
+    --plinth-ref-space-4: 1rem;
+    --plinth-ref-space-5: 1.25rem;
+    --plinth-ref-space-6: 1.5rem;
+    --plinth-ref-space-8: 2rem;
+    --plinth-ref-space-10: 2.5rem;
+    --plinth-ref-space-12: 3rem;
+    --plinth-ref-space-14: 3.5rem;
+    --plinth-ref-space-16: 4rem;
+    --plinth-ref-space-0-5: 0.125rem;
+    --plinth-ref-size-16: 1rem;
+    --plinth-ref-size-20: 1.25rem;
+    --plinth-ref-size-24: 1.5rem;
+    --plinth-ref-size-28: 1.75rem;
+    --plinth-ref-size-32: 2rem;
+    --plinth-ref-size-40: 2.5rem;
+    --plinth-ref-size-44: 2.75rem;
+    --plinth-ref-size-56: 3.5rem;
+    --plinth-ref-size-160: 10rem;
+    --plinth-ref-size-400: 25rem;
+    --plinth-ref-size-480: 30rem;
+    --plinth-ref-radius-0: 0;
+    --plinth-ref-radius-2: 0.125rem;
+    --plinth-ref-radius-4: 0.25rem;
+    --plinth-ref-radius-6: 0.375rem;
+    --plinth-ref-radius-8: 0.5rem;
+    --plinth-ref-radius-10: 0.625rem;
+    --plinth-ref-radius-12: 0.75rem;
+    --plinth-ref-radius-16: 1rem;
+    --plinth-ref-radius-full: 9999px;
+    --plinth-ref-border-width-1: 1px;
+    --plinth-ref-border-width-2: 2px;
+    --plinth-ref-border-width-3: 3px;
+    --plinth-ref-font-family-sans: 'Geist Variable', Geist, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
+    --plinth-ref-font-family-mono: 'Geist Mono Variable', 'Geist Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, 'Liberation Mono', monospace;
+    --plinth-ref-font-size-12: 0.75rem;
+    --plinth-ref-font-size-13: 0.8125rem;
+    --plinth-ref-font-size-14: 0.875rem;
+    --plinth-ref-font-size-15: 0.9375rem;
+    --plinth-ref-font-size-16: 1rem;
+    --plinth-ref-font-size-18: 1.125rem;
+    --plinth-ref-font-size-24: 1.5rem;
+    --plinth-ref-font-size-30: 1.875rem;
+    --plinth-ref-font-size-36: 2.25rem;
+    --plinth-ref-font-size-48: 3rem;
+    --plinth-ref-font-size-64: 4rem;
+    --plinth-ref-font-weight-400: 400;
+    --plinth-ref-font-weight-500: 500;
+    --plinth-ref-font-weight-600: 600;
+    --plinth-ref-font-weight-700: 700;
+    --plinth-ref-font-leading-105: 1.05;
+    --plinth-ref-font-leading-125: 1.25;
+    --plinth-ref-font-leading-150: 1.5;
+    --plinth-ref-font-tracking-0: 0;
+    --plinth-ref-font-tracking-neg-1: -0.01em;
+    --plinth-ref-font-tracking-neg-2: -0.02em;
+    --plinth-ref-font-tracking-neg-4: -0.04em;
+    --plinth-ref-duration-120: 120ms;
+    --plinth-ref-duration-200: 200ms;
+    --plinth-ref-duration-320: 320ms;
+    --plinth-ref-easing-standard: cubic-bezier(0.2, 0, 0, 1);
+    --plinth-ref-easing-enter: cubic-bezier(0, 0, 0, 1);
+    --plinth-ref-easing-exit: cubic-bezier(0.3, 0, 1, 1);
+    --plinth-space-0: var(--plinth-ref-space-0);
+    --plinth-space-1: var(--plinth-ref-space-1);
+    --plinth-space-2: var(--plinth-ref-space-2);
+    --plinth-space-3: var(--plinth-ref-space-3);
+    --plinth-space-4: var(--plinth-ref-space-4);
+    --plinth-space-5: var(--plinth-ref-space-5);
+    --plinth-space-6: var(--plinth-ref-space-6);
+    --plinth-space-8: var(--plinth-ref-space-8);
+    --plinth-space-10: var(--plinth-ref-space-10);
+    --plinth-space-12: var(--plinth-ref-space-12);
+    --plinth-space-14: var(--plinth-ref-space-14);
+    --plinth-space-16: var(--plinth-ref-space-16);
+    --plinth-space-0-5: var(--plinth-ref-space-0-5);
+    --plinth-radius-control: var(--plinth-ref-radius-6);
+    --plinth-radius-container: var(--plinth-ref-radius-10);
+    --plinth-radius-pill: var(--plinth-ref-radius-full);
+    --plinth-border-width-thin: var(--plinth-ref-border-width-1);
+    --plinth-border-width-thick: var(--plinth-ref-border-width-2);
+    --plinth-opacity-disabled: 0.5;
+    --plinth-focus-ring-width: var(--plinth-ref-border-width-2);
+    --plinth-focus-ring-offset: 0;
+    --plinth-focus-ring-offset-filled: var(--plinth-ref-border-width-2);
+    --plinth-focus-ring-offset-inset: -2px;
+    --plinth-font-family-body: var(--plinth-ref-font-family-sans);
+    --plinth-font-family-mono: var(--plinth-ref-font-family-mono);
+    --plinth-font-size-xs: var(--plinth-ref-font-size-12);
+    --plinth-font-size-sm: var(--plinth-ref-font-size-13);
+    --plinth-font-size-md: var(--plinth-ref-font-size-14);
+    --plinth-font-size-lg: var(--plinth-ref-font-size-15);
+    --plinth-font-size-xl: var(--plinth-ref-font-size-18);
+    --plinth-font-size-2xl: var(--plinth-ref-font-size-24);
+    --plinth-font-size-3xl: var(--plinth-ref-font-size-30);
+    --plinth-font-size-4xl: var(--plinth-ref-font-size-36);
+    --plinth-font-size-5xl: var(--plinth-ref-font-size-48);
+    --plinth-font-size-6xl: var(--plinth-ref-font-size-64);
+    --plinth-font-size-field: var(--plinth-ref-font-size-16);
+    --plinth-font-weight-regular: var(--plinth-ref-font-weight-400);
+    --plinth-font-weight-medium: var(--plinth-ref-font-weight-500);
+    --plinth-font-weight-semibold: var(--plinth-ref-font-weight-600);
+    --plinth-font-weight-bold: var(--plinth-ref-font-weight-700);
+    --plinth-font-leading-display: var(--plinth-ref-font-leading-105);
+    --plinth-font-leading-tight: var(--plinth-ref-font-leading-125);
+    --plinth-font-leading-normal: var(--plinth-ref-font-leading-150);
+    --plinth-font-tracking-normal: var(--plinth-ref-font-tracking-0);
+    --plinth-font-tracking-snug: var(--plinth-ref-font-tracking-neg-1);
+    --plinth-font-tracking-tight: var(--plinth-ref-font-tracking-neg-2);
+    --plinth-font-tracking-tighter: var(--plinth-ref-font-tracking-neg-4);
+    --plinth-duration-fast: var(--plinth-ref-duration-120);
+    --plinth-duration-normal: var(--plinth-ref-duration-200);
+    --plinth-duration-slow: var(--plinth-ref-duration-320);
+    --plinth-easing-standard: var(--plinth-ref-easing-standard);
+    --plinth-easing-enter: var(--plinth-ref-easing-enter);
+    --plinth-easing-exit: var(--plinth-ref-easing-exit);
+    --plinth-control-sm: var(--plinth-ref-size-28);
+    --plinth-control-md: var(--plinth-ref-size-32);
+    --plinth-control-lg: var(--plinth-ref-size-40);
+    --plinth-touch-target: var(--plinth-ref-size-40);
+    --plinth-size-icon-sm: var(--plinth-ref-size-16);
+    --plinth-size-icon-md: var(--plinth-ref-size-20);
+    --plinth-size-icon-lg: var(--plinth-ref-size-24);
+    --plinth-size-row: var(--plinth-ref-size-44);
+    --plinth-size-avatar-sm: var(--plinth-ref-size-24);
+    --plinth-size-avatar-md: var(--plinth-ref-size-32);
+    --plinth-size-avatar-lg: var(--plinth-ref-size-40);
+    --plinth-size-avatar-xl: var(--plinth-ref-size-56);
+    --plinth-size-dialog: var(--plinth-ref-size-480);
+    --plinth-size-panel: var(--plinth-ref-size-400);
+    --plinth-size-peek: var(--plinth-ref-size-160);
+    --plinth-layer-base: 0;
+    --plinth-layer-sticky: 100;
+    --plinth-layer-overlay: 200;
+    --plinth-layer-sheet: 300;
+    --plinth-layer-toast: 400;
+    --plinth-breakpoint-md: 768px;
+    --plinth-breakpoint-lg: 1280px;
+    --plinth-header-height: var(--plinth-space-14);
+    --plinth-data-table-row-height: var(--plinth-size-row);
+    --plinth-list-row-height: var(--plinth-size-row);
+    --plinth-pill-height: var(--plinth-control-md);
+    --plinth-dialog-width: var(--plinth-size-dialog);
+    --plinth-sheet-side-width: var(--plinth-size-panel);
+    --plinth-drawer-peek-height: var(--plinth-size-peek);
+    --plinth-section-menu-height: var(--plinth-space-14);
+    --plinth-section-menu-item-height: var(--plinth-control-lg);
+  }
+
+  :root,
+  [data-theme="light"] {
+    color-scheme: light;
+    --plinth-color-surface: var(--plinth-ref-color-neutral-50);
+    --plinth-color-surface-raised: var(--plinth-ref-color-neutral-0);
+    --plinth-color-surface-sunken: var(--plinth-ref-color-neutral-100);
+    --plinth-color-surface-hover: var(--plinth-ref-color-neutral-150);
+    --plinth-color-text: var(--plinth-ref-color-neutral-950);
+    --plinth-color-text-muted: var(--plinth-ref-color-neutral-600);
+    --plinth-color-text-subtle: var(--plinth-ref-color-neutral-500);
+    --plinth-color-border: var(--plinth-ref-color-ink-alpha-10);
+    --plinth-color-border-strong: var(--plinth-ref-color-ink-alpha-20);
+    --plinth-color-divider: var(--plinth-ref-color-ink-alpha-6);
+    --plinth-color-primary: var(--plinth-ref-color-neutral-950);
+    --plinth-color-primary-hover: var(--plinth-ref-color-neutral-800);
+    --plinth-color-primary-active: var(--plinth-ref-color-neutral-700);
+    --plinth-color-on-primary: var(--plinth-ref-color-neutral-0);
+    --plinth-color-primary-edge: var(--plinth-ref-color-white-alpha-12);
+    --plinth-color-accent: var(--plinth-ref-color-brand-600);
+    --plinth-color-accent-text: var(--plinth-ref-color-brand-700);
+    --plinth-color-on-accent: var(--plinth-ref-color-neutral-0);
+    --plinth-color-focus-ring: var(--plinth-ref-color-brand-600);
+    --plinth-color-overlay: var(--plinth-ref-color-black-alpha-50);
+    --plinth-color-info: var(--plinth-ref-color-brand-600);
+    --plinth-color-info-surface: var(--plinth-ref-color-brand-100);
+    --plinth-color-info-text: var(--plinth-ref-color-brand-800);
+    --plinth-color-success: var(--plinth-ref-color-green-600);
+    --plinth-color-success-surface: var(--plinth-ref-color-green-100);
+    --plinth-color-success-text: var(--plinth-ref-color-green-800);
+    --plinth-color-warning: var(--plinth-ref-color-amber-500);
+    --plinth-color-warning-surface: var(--plinth-ref-color-amber-100);
+    --plinth-color-warning-text: var(--plinth-ref-color-amber-800);
+    --plinth-color-danger: var(--plinth-ref-color-red-600);
+    --plinth-color-danger-surface: var(--plinth-ref-color-red-100);
+    --plinth-color-danger-text: var(--plinth-ref-color-red-800);
+    --plinth-color-accent-hover: var(--plinth-ref-color-brand-700);
+    --plinth-color-accent-active: var(--plinth-ref-color-brand-800);
+    --plinth-color-danger-solid: var(--plinth-ref-color-red-600);
+    --plinth-color-danger-solid-hover: var(--plinth-ref-color-red-700);
+    --plinth-color-danger-solid-active: var(--plinth-ref-color-red-800);
+    --plinth-color-on-danger: var(--plinth-ref-color-neutral-0);
+    --plinth-color-accent-subtle: var(--plinth-ref-color-brand-50);
+    --plinth-color-accent-subtle-hover: var(--plinth-ref-color-brand-100);
+    --plinth-color-accent-subtle-active: var(--plinth-ref-color-brand-200);
+    --plinth-elevation-1: 0 1px 2px 0 #0000001a;
+    --plinth-elevation-2: 0 4px 12px 0 #00000026;
+    --plinth-elevation-3: 0 12px 32px 0 #00000026;
+    --plinth-callout-neutral-surface: var(--plinth-color-surface-sunken);
+    --plinth-callout-neutral-border: var(--plinth-color-border);
+    --plinth-callout-info-surface: color-mix(in srgb, var(--plinth-color-info) 6%, transparent);
+    --plinth-callout-info-border: color-mix(in srgb, var(--plinth-color-info) 24%, transparent);
+    --plinth-callout-success-surface: color-mix(in srgb, var(--plinth-color-success) 6%, transparent);
+    --plinth-callout-success-border: color-mix(in srgb, var(--plinth-color-success) 24%, transparent);
+    --plinth-callout-warning-surface: color-mix(in srgb, var(--plinth-color-warning) 6%, transparent);
+    --plinth-callout-warning-border: color-mix(in srgb, var(--plinth-color-warning) 24%, transparent);
+    --plinth-callout-danger-surface: color-mix(in srgb, var(--plinth-color-danger) 6%, transparent);
+    --plinth-callout-danger-border: color-mix(in srgb, var(--plinth-color-danger) 24%, transparent);
+  }
+
+  [data-theme="dark"],
+  .dark {
+    color-scheme: dark;
+    --plinth-color-surface: var(--plinth-ref-color-neutral-950);
+    --plinth-color-surface-raised: var(--plinth-ref-color-neutral-900);
+    --plinth-color-surface-sunken: var(--plinth-ref-color-neutral-1000);
+    --plinth-color-surface-hover: var(--plinth-ref-color-neutral-850);
+    --plinth-color-text: var(--plinth-ref-color-neutral-100);
+    --plinth-color-text-muted: var(--plinth-ref-color-neutral-300);
+    --plinth-color-text-subtle: var(--plinth-ref-color-neutral-400);
+    --plinth-color-border: var(--plinth-ref-color-chalk-alpha-10);
+    --plinth-color-border-strong: var(--plinth-ref-color-chalk-alpha-20);
+    --plinth-color-divider: var(--plinth-ref-color-chalk-alpha-6);
+    --plinth-color-primary: var(--plinth-ref-color-neutral-100);
+    --plinth-color-primary-hover: var(--plinth-ref-color-neutral-200);
+    --plinth-color-primary-active: var(--plinth-ref-color-neutral-300);
+    --plinth-color-on-primary: var(--plinth-ref-color-neutral-950);
+    --plinth-color-primary-edge: var(--plinth-ref-color-black-alpha-10);
+    --plinth-color-accent: var(--plinth-ref-color-brand-600);
+    --plinth-color-accent-text: var(--plinth-ref-color-brand-300);
+    --plinth-color-on-accent: var(--plinth-ref-color-neutral-0);
+    --plinth-color-focus-ring: var(--plinth-ref-color-brand-300);
+    --plinth-color-overlay: var(--plinth-ref-color-black-alpha-70);
+    --plinth-color-info: var(--plinth-ref-color-brand-400);
+    --plinth-color-info-surface: var(--plinth-ref-color-brand-950);
+    --plinth-color-info-text: var(--plinth-ref-color-brand-200);
+    --plinth-color-success: var(--plinth-ref-color-green-400);
+    --plinth-color-success-surface: var(--plinth-ref-color-green-950);
+    --plinth-color-success-text: var(--plinth-ref-color-green-200);
+    --plinth-color-warning: var(--plinth-ref-color-amber-400);
+    --plinth-color-warning-surface: var(--plinth-ref-color-amber-950);
+    --plinth-color-warning-text: var(--plinth-ref-color-amber-200);
+    --plinth-color-danger: var(--plinth-ref-color-red-400);
+    --plinth-color-danger-surface: var(--plinth-ref-color-red-950);
+    --plinth-color-danger-text: var(--plinth-ref-color-red-200);
+    --plinth-color-accent-hover: var(--plinth-ref-color-brand-700);
+    --plinth-color-accent-active: var(--plinth-ref-color-brand-800);
+    --plinth-color-danger-solid: var(--plinth-ref-color-red-600);
+    --plinth-color-danger-solid-hover: var(--plinth-ref-color-red-700);
+    --plinth-color-danger-solid-active: var(--plinth-ref-color-red-800);
+    --plinth-color-on-danger: var(--plinth-ref-color-neutral-0);
+    --plinth-color-accent-subtle: var(--plinth-ref-color-brand-950);
+    --plinth-color-accent-subtle-hover: var(--plinth-ref-color-brand-900);
+    --plinth-color-accent-subtle-active: var(--plinth-ref-color-brand-800);
+    --plinth-elevation-1: 0 1px 2px 0 #0000004d;
+    --plinth-elevation-2: 0 4px 12px 0 #00000080;
+    --plinth-elevation-3: 0 12px 32px 0 #00000099;
+    --plinth-callout-neutral-surface: var(--plinth-color-surface-sunken);
+    --plinth-callout-neutral-border: var(--plinth-color-border);
+    --plinth-callout-info-surface: color-mix(in srgb, var(--plinth-color-info) 8%, transparent);
+    --plinth-callout-info-border: color-mix(in srgb, var(--plinth-color-info) 24%, transparent);
+    --plinth-callout-success-surface: color-mix(in srgb, var(--plinth-color-success) 8%, transparent);
+    --plinth-callout-success-border: color-mix(in srgb, var(--plinth-color-success) 24%, transparent);
+    --plinth-callout-warning-surface: color-mix(in srgb, var(--plinth-color-warning) 8%, transparent);
+    --plinth-callout-warning-border: color-mix(in srgb, var(--plinth-color-warning) 24%, transparent);
+    --plinth-callout-danger-surface: color-mix(in srgb, var(--plinth-color-danger) 8%, transparent);
+    --plinth-callout-danger-border: color-mix(in srgb, var(--plinth-color-danger) 24%, transparent);
+  }
+
+  @media (prefers-color-scheme: dark) {
+    :root:not([data-theme="light"], .light) {
+      color-scheme: dark;
+      --plinth-color-surface: var(--plinth-ref-color-neutral-950);
+      --plinth-color-surface-raised: var(--plinth-ref-color-neutral-900);
+      --plinth-color-surface-sunken: var(--plinth-ref-color-neutral-1000);
+      --plinth-color-surface-hover: var(--plinth-ref-color-neutral-850);
+      --plinth-color-text: var(--plinth-ref-color-neutral-100);
+      --plinth-color-text-muted: var(--plinth-ref-color-neutral-300);
+      --plinth-color-text-subtle: var(--plinth-ref-color-neutral-400);
+      --plinth-color-border: var(--plinth-ref-color-chalk-alpha-10);
+      --plinth-color-border-strong: var(--plinth-ref-color-chalk-alpha-20);
+      --plinth-color-divider: var(--plinth-ref-color-chalk-alpha-6);
+      --plinth-color-primary: var(--plinth-ref-color-neutral-100);
+      --plinth-color-primary-hover: var(--plinth-ref-color-neutral-200);
+      --plinth-color-primary-active: var(--plinth-ref-color-neutral-300);
+      --plinth-color-on-primary: var(--plinth-ref-color-neutral-950);
+      --plinth-color-primary-edge: var(--plinth-ref-color-black-alpha-10);
+      --plinth-color-accent: var(--plinth-ref-color-brand-600);
+      --plinth-color-accent-text: var(--plinth-ref-color-brand-300);
+      --plinth-color-on-accent: var(--plinth-ref-color-neutral-0);
+      --plinth-color-focus-ring: var(--plinth-ref-color-brand-300);
+      --plinth-color-overlay: var(--plinth-ref-color-black-alpha-70);
+      --plinth-color-info: var(--plinth-ref-color-brand-400);
+      --plinth-color-info-surface: var(--plinth-ref-color-brand-950);
+      --plinth-color-info-text: var(--plinth-ref-color-brand-200);
+      --plinth-color-success: var(--plinth-ref-color-green-400);
+      --plinth-color-success-surface: var(--plinth-ref-color-green-950);
+      --plinth-color-success-text: var(--plinth-ref-color-green-200);
+      --plinth-color-warning: var(--plinth-ref-color-amber-400);
+      --plinth-color-warning-surface: var(--plinth-ref-color-amber-950);
+      --plinth-color-warning-text: var(--plinth-ref-color-amber-200);
+      --plinth-color-danger: var(--plinth-ref-color-red-400);
+      --plinth-color-danger-surface: var(--plinth-ref-color-red-950);
+      --plinth-color-danger-text: var(--plinth-ref-color-red-200);
+      --plinth-color-accent-hover: var(--plinth-ref-color-brand-700);
+      --plinth-color-accent-active: var(--plinth-ref-color-brand-800);
+      --plinth-color-danger-solid: var(--plinth-ref-color-red-600);
+      --plinth-color-danger-solid-hover: var(--plinth-ref-color-red-700);
+      --plinth-color-danger-solid-active: var(--plinth-ref-color-red-800);
+      --plinth-color-on-danger: var(--plinth-ref-color-neutral-0);
+      --plinth-color-accent-subtle: var(--plinth-ref-color-brand-950);
+      --plinth-color-accent-subtle-hover: var(--plinth-ref-color-brand-900);
+      --plinth-color-accent-subtle-active: var(--plinth-ref-color-brand-800);
+      --plinth-elevation-1: 0 1px 2px 0 #0000004d;
+      --plinth-elevation-2: 0 4px 12px 0 #00000080;
+      --plinth-elevation-3: 0 12px 32px 0 #00000099;
+      --plinth-callout-neutral-surface: var(--plinth-color-surface-sunken);
+      --plinth-callout-neutral-border: var(--plinth-color-border);
+      --plinth-callout-info-surface: color-mix(in srgb, var(--plinth-color-info) 8%, transparent);
+      --plinth-callout-info-border: color-mix(in srgb, var(--plinth-color-info) 24%, transparent);
+      --plinth-callout-success-surface: color-mix(in srgb, var(--plinth-color-success) 8%, transparent);
+      --plinth-callout-success-border: color-mix(in srgb, var(--plinth-color-success) 24%, transparent);
+      --plinth-callout-warning-surface: color-mix(in srgb, var(--plinth-color-warning) 8%, transparent);
+      --plinth-callout-warning-border: color-mix(in srgb, var(--plinth-color-warning) 24%, transparent);
+      --plinth-callout-danger-surface: color-mix(in srgb, var(--plinth-color-danger) 8%, transparent);
+      --plinth-callout-danger-border: color-mix(in srgb, var(--plinth-color-danger) 24%, transparent);
+    }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    :root {
+      --plinth-duration-fast: 0ms;
+      --plinth-duration-normal: 0ms;
+      --plinth-duration-slow: 0ms;
+    }
+  }
+}
+
+/* avatar.css */
+/*
+ * Avatar: a person or an organisation, as an image, initials, or a person glyph.
+ *
+ * <span class="plinth-avatar" data-size="md" role="img" aria-label="Ana Lima, Online">
+ *   <img class="plinth-avatar-image" src="…" alt="">
+ *     or <span class="plinth-avatar-initials" aria-hidden="true">AL</span>
+ *     or <svg class="plinth-avatar-glyph" aria-hidden="true">…</svg>
+ *   <span class="plinth-avatar-status" data-tone="success" aria-hidden="true"></span>
+ * </span>
+ *
+ * The root carries the name (role="img", aria-label), with the status label after a comma. A
+ * decorative avatar, next to the name it shows, has aria-hidden="true" and no role or label.
+ * Image first, then initials (from the name, or given), then the glyph.
+ *
+ * Sizes (data-size): sm 24px, md 32px (default), lg 40px, xl 56px. Round by default
+ * (radius.pill), so a brand can square it. The status dot takes the badge's tones (data-tone:
+ * neutral, success, warning, danger) and a ring in the page colour; on another surface, set
+ * --plinth-avatar-ring on the container (a card: --plinth-color-surface-raised).
+ */
+
+@layer plinth {
+  .plinth-avatar {
+    --plinth-avatar-size: var(--plinth-size-avatar-md);
+    --plinth-avatar-surface: var(--plinth-color-surface-sunken);
+    --plinth-avatar-status: var(--plinth-color-text-subtle);
+    --plinth-avatar-ring: var(--plinth-color-surface);
+
+    position: relative;
+    display: inline-flex;
+    flex: none;
+    align-items: center;
+    justify-content: center;
+    inline-size: var(--plinth-avatar-size);
+    block-size: var(--plinth-avatar-size);
+    font-family: var(--plinth-font-family-body);
+    font-size: var(--plinth-font-size-xs);
+    font-weight: var(--plinth-font-weight-medium);
+    line-height: 1;
+    vertical-align: middle;
+    color: var(--plinth-color-text-muted);
+    user-select: none;
+    background-color: var(--plinth-avatar-surface);
+    border-radius: var(--plinth-radius-pill);
+  }
+
+  /*
+   * The hairline ring: over an image (positioned boxes paint after in-flow ones) and under the
+   * status dot (which comes later). A border, so forced-colours mode keeps the circle.
+   */
+  .plinth-avatar::before {
+    position: absolute;
+    inset: 0;
+    box-sizing: border-box;
+    pointer-events: none;
+    content: '';
+    border: var(--plinth-border-width-thin) solid var(--plinth-color-border);
+    border-radius: inherit;
+  }
+
+  .plinth-avatar[data-size='sm'] {
+    --plinth-avatar-size: var(--plinth-size-avatar-sm);
+  }
+
+  .plinth-avatar[data-size='lg'] {
+    --plinth-avatar-size: var(--plinth-size-avatar-lg);
+
+    font-size: var(--plinth-font-size-md);
+  }
+
+  .plinth-avatar[data-size='xl'] {
+    --plinth-avatar-size: var(--plinth-size-avatar-xl);
+
+    font-size: var(--plinth-font-size-xl);
+  }
+
+  .plinth-avatar-image {
+    inline-size: 100%;
+    block-size: 100%;
+    object-fit: cover;
+    border-radius: inherit;
+  }
+
+  .plinth-avatar-initials {
+    letter-spacing: var(--plinth-font-tracking-snug);
+  }
+
+  .plinth-avatar-glyph {
+    inline-size: 60%;
+    block-size: 60%;
+  }
+
+  .plinth-avatar-status {
+    position: absolute;
+    inset-block-end: 0;
+    inset-inline-end: 0;
+    inline-size: calc(var(--plinth-avatar-size) * 0.3);
+    block-size: calc(var(--plinth-avatar-size) * 0.3);
+    background-color: var(--plinth-avatar-status);
+
+    /* Stays round when a brand squares the avatar. */
+    border-radius: 50%;
+    box-shadow: 0 0 0 var(--plinth-border-width-thick) var(--plinth-avatar-ring);
+  }
+
+  .plinth-avatar-status[data-tone='success'] {
+    --plinth-avatar-status: var(--plinth-color-success);
+  }
+
+  .plinth-avatar-status[data-tone='warning'] {
+    --plinth-avatar-status: var(--plinth-color-warning);
+  }
+
+  .plinth-avatar-status[data-tone='danger'] {
+    --plinth-avatar-status: var(--plinth-color-danger);
+  }
+
+  @media (forced-colors: active) {
+    .plinth-avatar-status {
+      background-color: CanvasText;
+    }
+  }
+}
+
+/* badge.css */
+/*
+ * Badge: a short label with an optional dot and a tone.
+ *
+ * <span class="plinth-badge" data-tone="success">
+ *   <span class="plinth-badge-dot" aria-hidden="true"></span>
+ *   <span class="plinth-badge-label">Paid</span>
+ * </span>
+ *
+ * Tones: neutral (default, also when data-tone is missing), success, warning, danger.
+ * The label carries the meaning; the tone and the dot only reinforce it.
+ */
+
+@layer plinth {
+  .plinth-badge {
+    --plinth-badge-surface: var(--plinth-color-surface-sunken);
+    --plinth-badge-text: var(--plinth-color-text-muted);
+    --plinth-badge-accent: var(--plinth-color-text-muted);
+
+    display: inline-flex;
+    gap: var(--plinth-space-1);
+    align-items: center;
+    min-inline-size: 0;
+    max-inline-size: 100%;
+    padding-block: var(--plinth-space-0-5);
+    padding-inline: var(--plinth-space-2);
+    font-family: var(--plinth-font-family-body);
+    font-size: var(--plinth-font-size-xs);
+    font-weight: var(--plinth-font-weight-medium);
+    line-height: var(--plinth-font-leading-normal);
+    vertical-align: middle;
+    color: var(--plinth-badge-text);
+    white-space: nowrap;
+    background-color: var(--plinth-badge-surface);
+
+    /* Invisible normally; drawn by the system in forced-colours mode so the badge keeps its edge. */
+    border: 1px solid transparent;
+    border-radius: var(--plinth-radius-pill);
+  }
+
+  .plinth-badge[data-tone='success'] {
+    --plinth-badge-surface: var(--plinth-color-success-surface);
+    --plinth-badge-text: var(--plinth-color-success-text);
+    --plinth-badge-accent: var(--plinth-color-success);
+  }
+
+  .plinth-badge[data-tone='warning'] {
+    --plinth-badge-surface: var(--plinth-color-warning-surface);
+    --plinth-badge-text: var(--plinth-color-warning-text);
+    --plinth-badge-accent: var(--plinth-color-warning);
+  }
+
+  .plinth-badge[data-tone='danger'] {
+    --plinth-badge-surface: var(--plinth-color-danger-surface);
+    --plinth-badge-text: var(--plinth-color-danger-text);
+    --plinth-badge-accent: var(--plinth-color-danger);
+  }
+
+  .plinth-badge-dot {
+    flex: none;
+    inline-size: var(--plinth-space-2);
+    block-size: var(--plinth-space-2);
+    background-color: var(--plinth-badge-accent);
+    border-radius: var(--plinth-radius-pill);
+  }
+
+  .plinth-badge-label {
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  @media (forced-colors: active) {
+    .plinth-badge-dot {
+      background-color: currentcolor;
+    }
+  }
+}
+
+/* button.css */
+/*
+ * Button: the main action control.
+ *
+ * <button type="button" class="plinth-button" data-variant="primary" data-size="md">
+ *   <span class="plinth-icon" data-size="md" aria-hidden="true"><svg>…</svg></span>
+ *   <span class="plinth-button-label">Save</span>
+ *   <span class="plinth-icon" data-size="md" aria-hidden="true"><svg>…</svg></span>
+ * </button>
+ *
+ * With an href it is <a class="plinth-button" href="…"> instead; the icons are optional.
+ *
+ * data-mirror on an icon flips it in right-to-left text, for arrows (mirror-icon and
+ * mirror-trailing in Blade, Vue and React; mirror on the icon button).
+ *
+ * Variants (data-variant): primary (default, also when missing; inverted neutral unless a brand
+ * colours it), accent (the brand's colour, for marketing and brand moments), secondary, ghost, danger, and
+ * danger-ghost for a low-emphasis destructive action (Remove next to an item).
+ * Sizes (data-size): sm 28px, md 32px (default), lg 40px. On a touch screen every size keeps a
+ * 40px touch target through an invisible hit area. Icons inside are 16px on sm and 20px otherwise.
+ *
+ * States:
+ * - disabled: `disabled` on a <button>; on a link, no href, role="link" and aria-disabled="true".
+ * - busy: aria-busy="true" and aria-disabled="true", with
+ *   <span class="plinth-button-spinner" aria-hidden="true"></span> in the leading icon's place.
+ *   It keeps focus; the app ignores activation while busy.
+ * - hover only where the device can hover; the focus ring on :focus-visible.
+ *
+ * Icon button: a button with only an icon, square at the button's height.
+ *
+ * <button type="button" class="plinth-button plinth-icon-button" data-variant="ghost"
+ *   data-size="md" aria-label="More actions">
+ *   <span class="plinth-icon" data-size="md" aria-hidden="true"><svg>…</svg></span>
+ * </button>
+ *
+ * With an href it is a link instead, with the same disabled state as the button's link:
+ *
+ * <a class="plinth-button plinth-icon-button" href="…" data-variant="secondary"
+ *   data-size="md" aria-label="Next page">
+ *   <span class="plinth-icon" data-size="md" data-mirror aria-hidden="true"><svg>…</svg></span>
+ * </a>
+ *
+ * aria-label is required: it is the only name the button has. A toggle has aria-pressed
+ * ("true" or "false"), and pressed shows the selection tint (accent-subtle, accent-text) inside
+ * a 2px accent edge (border-width.thick), so colour is not its only cue; it still answers hover
+ * and press with a step on the tint. In forced colours it takes the Highlight system colour. A
+ * link is never a toggle: aria-pressed is never printed on one.
+ */
+
+@layer plinth {
+  .plinth-button {
+    --plinth-button-surface: var(--plinth-color-primary);
+    --plinth-button-surface-hover: var(--plinth-color-primary-hover);
+    --plinth-button-surface-active: var(--plinth-color-primary-active);
+    --plinth-button-text: var(--plinth-color-on-primary);
+    --plinth-button-edge: transparent;
+    --plinth-button-inner-edge: inset 0 0 0 1px var(--plinth-color-primary-edge);
+    --plinth-button-height: var(--plinth-control-md);
+    --plinth-button-padding: var(--plinth-space-4);
+    --plinth-button-icon-size: var(--plinth-size-icon-md);
+
+    position: relative;
+    display: inline-flex;
+    gap: var(--plinth-space-2);
+    align-items: center;
+    justify-content: center;
+    max-inline-size: 100%;
+    min-block-size: var(--plinth-button-height);
+    padding-block: 0;
+    padding-inline: var(--plinth-button-padding);
+    font-family: var(--plinth-font-family-body);
+    font-size: var(--plinth-font-size-md);
+    font-weight: var(--plinth-font-weight-medium);
+    line-height: var(--plinth-font-leading-tight);
+    vertical-align: middle;
+    color: var(--plinth-button-text);
+    white-space: nowrap;
+    text-decoration: none;
+    cursor: pointer;
+    user-select: none;
+    background-color: var(--plinth-button-surface);
+    border: var(--plinth-border-width-thin) solid var(--plinth-button-edge);
+    border-radius: var(--plinth-radius-control);
+    box-shadow: var(--plinth-button-inner-edge);
+    transition:
+      background-color var(--plinth-duration-fast) var(--plinth-easing-standard),
+      border-color var(--plinth-duration-fast) var(--plinth-easing-standard),
+      box-shadow var(--plinth-duration-fast) var(--plinth-easing-standard);
+  }
+
+  /* The brand's colour, for marketing and brand moments (Upgrade plan): at most one per screen. */
+  .plinth-button[data-variant='accent'] {
+    --plinth-button-surface: var(--plinth-color-accent);
+    --plinth-button-surface-hover: var(--plinth-color-accent-hover);
+    --plinth-button-surface-active: var(--plinth-color-accent-active);
+    --plinth-button-text: var(--plinth-color-on-accent);
+  }
+
+  .plinth-button[data-variant='secondary'] {
+    --plinth-button-inner-edge: none;
+    --plinth-button-surface: var(--plinth-color-surface-raised);
+    --plinth-button-surface-hover: var(--plinth-color-surface-hover);
+    --plinth-button-surface-active: var(--plinth-color-surface-sunken);
+    --plinth-button-text: var(--plinth-color-text);
+    --plinth-button-edge: var(--plinth-color-border-strong);
+  }
+
+  .plinth-button[data-variant='ghost'] {
+    --plinth-button-inner-edge: none;
+    --plinth-button-surface: transparent;
+    --plinth-button-surface-hover: var(--plinth-color-surface-hover);
+    --plinth-button-surface-active: var(--plinth-color-surface-sunken);
+    --plinth-button-text: var(--plinth-color-text);
+  }
+
+  .plinth-button[data-variant='danger'] {
+    --plinth-button-inner-edge: none;
+    --plinth-button-surface: var(--plinth-color-danger-solid);
+    --plinth-button-surface-hover: var(--plinth-color-danger-solid-hover);
+    --plinth-button-surface-active: var(--plinth-color-danger-solid-active);
+    --plinth-button-text: var(--plinth-color-on-danger);
+  }
+
+  .plinth-button[data-variant='danger-ghost'] {
+    --plinth-button-inner-edge: none;
+    --plinth-button-surface: transparent;
+    --plinth-button-surface-hover: var(--plinth-color-danger-surface);
+    --plinth-button-surface-active: var(--plinth-color-danger-surface);
+    --plinth-button-text: var(--plinth-color-danger-text);
+  }
+
+  .plinth-button[data-size='sm'] {
+    --plinth-button-height: var(--plinth-control-sm);
+    --plinth-button-padding: var(--plinth-space-3);
+    --plinth-button-icon-size: var(--plinth-size-icon-sm);
+
+    font-size: var(--plinth-font-size-sm);
+  }
+
+  .plinth-button[data-size='lg'] {
+    --plinth-button-height: var(--plinth-control-lg);
+    --plinth-button-padding: var(--plinth-space-5);
+  }
+
+  /*
+   * On a touch screen, every button keeps a 40px touch target through an invisible hit area,
+   * centred on it, without changing its look (ADR 3: controls look small, touch stays at 40px).
+   */
+  @media (pointer: coarse) {
+    .plinth-button::before {
+      position: absolute;
+      inset-block-start: 50%;
+      inset-inline: 0;
+      block-size: max(100%, var(--plinth-touch-target));
+      content: '';
+      translate: 0 -50%;
+    }
+
+    /* An icon button is narrower than 40px, so its hit area grows sideways too. */
+    .plinth-icon-button::before {
+      inset-inline: min(0%, 50% - var(--plinth-touch-target) / 2);
+    }
+  }
+
+  @media (hover: hover) {
+    .plinth-button:hover {
+      background-color: var(--plinth-button-surface-hover);
+    }
+  }
+
+  .plinth-button:active {
+    background-color: var(--plinth-button-surface-active);
+  }
+
+  .plinth-button:disabled,
+  .plinth-button[aria-disabled='true'] {
+    cursor: not-allowed;
+    background-color: var(--plinth-button-surface);
+  }
+
+  .plinth-button:disabled,
+  .plinth-button[aria-disabled='true']:not([aria-busy='true']) {
+    opacity: var(--plinth-opacity-disabled);
+  }
+
+  .plinth-button[aria-busy='true'] {
+    cursor: progress;
+  }
+
+  .plinth-button:focus-visible {
+    outline: var(--plinth-focus-ring-width) solid var(--plinth-color-focus-ring);
+    outline-offset: var(--plinth-focus-ring-offset-filled);
+  }
+
+  .plinth-button:is(
+      [data-variant='secondary'],
+      [data-variant='ghost'],
+      [data-variant='danger-ghost']
+    ):focus-visible {
+    outline-offset: var(--plinth-focus-ring-offset);
+  }
+
+  .plinth-icon-button {
+    flex: none;
+    inline-size: var(--plinth-button-height);
+    padding-inline: 0;
+  }
+
+  /* The border and an inset ring make the 2px edge, so pressed doesn't move the icon. */
+  .plinth-icon-button[aria-pressed='true'] {
+    --plinth-button-surface: var(--plinth-color-accent-subtle);
+    --plinth-button-surface-hover: var(--plinth-color-accent-subtle-hover);
+    --plinth-button-surface-active: var(--plinth-color-accent-subtle-active);
+    --plinth-button-text: var(--plinth-color-accent-text);
+    --plinth-button-edge: var(--plinth-color-accent);
+    --plinth-button-inner-edge: inset 0 0 0
+      calc(var(--plinth-border-width-thick) - var(--plinth-border-width-thin))
+      var(--plinth-color-accent);
+  }
+
+  /* A gap between the ring and the pressed accent edge, so focus and pressed read apart. */
+  .plinth-icon-button[aria-pressed='true']:focus-visible {
+    outline-offset: var(--plinth-focus-ring-offset-filled);
+  }
+
+  .plinth-button-label {
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  /* The same size as the icon it replaces, so the button keeps its width when it goes busy. */
+  .plinth-button-spinner {
+    flex: none;
+    inline-size: var(--plinth-button-icon-size);
+    block-size: var(--plinth-button-icon-size);
+    border: var(--plinth-border-width-thick) solid currentcolor;
+    border-inline-end-color: transparent;
+    border-radius: 50%;
+    animation: plinth-button-spin calc(var(--plinth-duration-slow) * 3) linear infinite;
+  }
+
+  @keyframes plinth-button-spin {
+    to {
+      transform: rotate(1turn);
+    }
+  }
+
+  @media (forced-colors: active) {
+    .plinth-button {
+      border-color: ButtonText;
+    }
+
+    .plinth-button:disabled,
+    .plinth-button[aria-disabled='true']:not([aria-busy='true']) {
+      color: GrayText;
+      border-color: GrayText;
+    }
+
+    /* The pressed tint is dropped in forced colours, so pressed takes the selection colours,
+       unless it is disabled, which keeps GrayText. */
+    .plinth-icon-button[aria-pressed='true']:not(
+        :disabled,
+        [aria-disabled='true']:not([aria-busy='true'])
+      ) {
+      color: HighlightText;
+      background-color: Highlight;
+      border-color: Highlight;
+    }
+
+    .plinth-button-spinner {
+      forced-color-adjust: none;
+    }
+  }
+}
+
+/* callout.css */
+/*
+ * Callout: a note inside a page, with a tone, an icon, an optional title and actions.
+ *
+ * <div class="plinth-callout" data-tone="warning" role="note">
+ *   <span class="plinth-icon plinth-callout-icon" data-size="md" aria-hidden="true">
+ *     <svg viewBox="0 0 24 24">…</svg>
+ *   </span>
+ *   <div class="plinth-callout-body">
+ *     <p class="plinth-callout-title">Invoices are sent at 9:00</p>
+ *     <div class="plinth-callout-text">Drafts saved after that go out the next morning.</div>
+ *     <div class="plinth-callout-actions">…buttons or links…</div>
+ *   </div>
+ * </div>
+ *
+ * Tones (data-tone): neutral (default, also when the attribute is missing), info, success,
+ * warning, danger. Each tints the surface, the hairline border and the icon, and has its own icon
+ * shape; the title or the text still says what kind of note it is, so the tone is never the only
+ * signal. The tints are the component tokens --plinth-callout-<tone>-surface and -border: faint
+ * and translucent, quieter than the status surfaces a badge uses.
+ *
+ * role: note (default) for a note that is part of the page; status for a message the app adds
+ * after something happens (announced politely); alert for an urgent one (announced at once). A
+ * live region inserted with its content is often not announced, so for a status the app keeps an
+ * empty container with role="status" in the page and puts the callout in it.
+ *
+ * The text may hold paragraphs, links (underlined, in the text's colour) and inline code.
+ *
+ * The icon is decorative (aria-hidden). The tone's icon comes with the component; a project puts
+ * its own SVG in its place. Title, text and actions are each printed only when they have content.
+ */
+
+@layer plinth {
+  .plinth-callout {
+    --plinth-callout-surface: var(--plinth-callout-neutral-surface);
+    --plinth-callout-border: var(--plinth-callout-neutral-border);
+    --plinth-callout-icon-color: var(--plinth-color-text-muted);
+
+    display: flex;
+    gap: var(--plinth-space-3);
+    align-items: flex-start;
+    min-inline-size: 0;
+    padding-block: var(--plinth-space-3);
+    padding-inline: var(--plinth-space-4);
+    font-family: var(--plinth-font-family-body);
+    font-size: var(--plinth-font-size-md);
+    line-height: var(--plinth-font-leading-normal);
+    color: var(--plinth-color-text);
+    overflow-wrap: anywhere;
+    background-color: var(--plinth-callout-surface);
+    border: 1px solid var(--plinth-callout-border);
+    border-radius: var(--plinth-radius-container);
+  }
+
+  .plinth-callout[data-tone='info'] {
+    --plinth-callout-surface: var(--plinth-callout-info-surface);
+    --plinth-callout-border: var(--plinth-callout-info-border);
+    --plinth-callout-icon-color: var(--plinth-color-info-text);
+  }
+
+  .plinth-callout[data-tone='success'] {
+    --plinth-callout-surface: var(--plinth-callout-success-surface);
+    --plinth-callout-border: var(--plinth-callout-success-border);
+    --plinth-callout-icon-color: var(--plinth-color-success-text);
+  }
+
+  .plinth-callout[data-tone='warning'] {
+    --plinth-callout-surface: var(--plinth-callout-warning-surface);
+    --plinth-callout-border: var(--plinth-callout-warning-border);
+    --plinth-callout-icon-color: var(--plinth-color-warning-text);
+  }
+
+  .plinth-callout[data-tone='danger'] {
+    --plinth-callout-surface: var(--plinth-callout-danger-surface);
+    --plinth-callout-border: var(--plinth-callout-danger-border);
+    --plinth-callout-icon-color: var(--plinth-color-danger-text);
+  }
+
+  /* Centred on the first line of text, however tall the line is. */
+  .plinth-callout-icon {
+    margin-block: calc((1lh - var(--plinth-size-icon-md)) / 2);
+    color: var(--plinth-callout-icon-color);
+  }
+
+  .plinth-callout-body {
+    display: flex;
+    flex: 1;
+    flex-direction: column;
+    gap: var(--plinth-space-1);
+    min-inline-size: 0;
+  }
+
+  .plinth-callout-title {
+    margin: 0;
+    font-weight: var(--plinth-font-weight-semibold);
+  }
+
+  .plinth-callout-text > * {
+    margin-block: 0;
+  }
+
+  .plinth-callout-text > * + * {
+    margin-block-start: var(--plinth-space-2);
+  }
+
+  .plinth-callout-text a {
+    color: inherit;
+    text-decoration-line: underline;
+    text-decoration-color: var(--plinth-color-text-muted);
+    text-underline-offset: 0.2em;
+  }
+
+  @media (hover: hover) {
+    .plinth-callout-text a:hover {
+      text-decoration-color: currentcolor;
+    }
+  }
+
+  .plinth-callout-text a:focus-visible {
+    outline: var(--plinth-focus-ring-width) solid var(--plinth-color-focus-ring);
+    outline-offset: var(--plinth-focus-ring-offset);
+    border-radius: var(--plinth-radius-control);
+  }
+
+  .plinth-callout-text code {
+    font-family: var(--plinth-font-family-mono);
+    font-size: var(--plinth-font-size-sm);
+  }
+
+  .plinth-callout-actions {
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--plinth-space-2);
+    align-items: center;
+    margin-block-start: var(--plinth-space-2);
+  }
+
+  /* Small buttons grow a 40px hit area on a touch screen; wrapped rows keep theirs apart. */
+  @media (pointer: coarse) {
+    .plinth-callout-actions {
+      row-gap: var(--plinth-space-3);
+    }
+  }
+}
+
+/* code-block.css */
+/*
+ * Code block: a block of code with an optional file name or label, a copy button and optional
+ * language tabs.
+ *
+ * <div class="plinth-code-block">
+ *   <div class="plinth-code-block-header">
+ *     <span class="plinth-code-block-label">resources/css/brand.css</span>
+ *     <button type="button" class="plinth-button plinth-code-block-copy" data-variant="ghost"
+ *       data-size="sm" hidden>
+ *       <span class="plinth-button-label">Copy</span>
+ *     </button>
+ *     <span class="plinth-code-block-status" role="status"></span>
+ *   </div>
+ *   <pre class="plinth-code-block-code" dir="ltr" tabindex="0"><code>…</code></pre>
+ * </div>
+ *
+ * With language tabs, the header holds a radio group after the label, and there is one <pre> per
+ * tab, in the same order:
+ *
+ *   <div class="plinth-code-block-tabs" role="radiogroup" aria-label="Language">
+ *     <label class="plinth-code-block-tab">
+ *       <input type="radio" class="plinth-code-block-tab-input" name="install-language" checked>
+ *       <span class="plinth-code-block-tab-label">Blade</span>
+ *     </label>
+ *     <label class="plinth-code-block-tab">…Vue…</label>
+ *   </div>
+ *   …
+ *   <pre class="plinth-code-block-code" dir="ltr" tabindex="0"><code>…Blade…</code></pre>
+ *   <pre class="plinth-code-block-code" dir="ltr" tabindex="0"><code>…Vue…</code></pre>
+ *
+ * The root is the <div>, and takes the app's id. The label is optional, and is text or a little
+ * markup (a badge). The tabs are native radio buttons (ADR 2): the browser moves between them with
+ * the arrow keys and remembers the checked one, and CSS shows the <pre> in the checked tab's
+ * place, with no script. Their name is the root's id with -language (one is generated when the
+ * root has no id), and the group's name is tabs-label in Blade, Vue and React ("Language" by
+ * default). In plain HTML, give each block on a page its own name, or their tabs become one group.
+ * Up to six tabs (the layers drop the rest); the first is checked unless the app picks another
+ * (selected), and after that the browser keeps the reader's choice. Inside a <form> the radios
+ * are part of it: they are sent with it (name=on), and a reset checks the starting tab again.
+ *
+ * The code is text, or the markup a highlighter prints (Phiki, Shiki: the spans inside its
+ * <code>). Plinth styles the block, not the tokens: their colours are the highlighter's. The
+ * <pre> keeps the code's lines and scrolls sideways inside its own box, so it takes tabindex="0"
+ * (a scrolling region must be reachable by keyboard), and dir="ltr", as code reads left to right
+ * on any page.
+ *
+ * Copy: the button (button.css) is printed hidden, and the Blade (Alpine), Vue and React layers
+ * show it when the clipboard is there. It copies the text of the <pre> that shows, says Copied
+ * (copied-label) for two seconds and puts the same word in the status, a polite live region,
+ * hidden from sight. The plain HTML works without it, and the header keeps its place for the
+ * button either way. copy: false in Blade, Vue and React leaves
+ * the button and the status out.
+ *
+ * States: the checked tab (input:checked) is a raised surface with a strong edge; hover only
+ * where the device can hover; the focus ring on :focus-visible, on the tab's input (it covers the
+ * tab) and inset on the <pre>. On a touch screen each tab keeps a 40px touch target, as the
+ * button does. The header hides itself when it has nothing to show.
+ */
+
+@layer plinth {
+  .plinth-code-block {
+    box-sizing: border-box;
+    display: flex;
+    flex-direction: column;
+    min-inline-size: 0;
+    max-inline-size: 100%;
+    color: var(--plinth-color-text);
+    background-color: var(--plinth-color-surface-sunken);
+    border: var(--plinth-border-width-thin) solid var(--plinth-color-border);
+    border-radius: var(--plinth-radius-container);
+  }
+
+  .plinth-code-block-header {
+    box-sizing: border-box;
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--plinth-space-2);
+    align-items: center;
+    min-block-size: var(--plinth-touch-target);
+    padding-block: calc((var(--plinth-touch-target) - var(--plinth-control-sm)) / 2);
+    padding-inline: var(--plinth-space-4)
+      calc((var(--plinth-touch-target) - var(--plinth-control-sm)) / 2);
+    border-block-end: var(--plinth-border-width-thin) solid var(--plinth-color-divider);
+  }
+
+  /* Tabs first, with no label: the header's start matches its end. */
+  .plinth-code-block-header:not(:has(.plinth-code-block-label)) {
+    padding-inline-start: calc((var(--plinth-touch-target) - var(--plinth-control-sm)) / 2);
+  }
+
+  /*
+   * Nothing to show: no label, no tabs and no copy button (copy off). A hidden copy button keeps
+   * the header, so the code doesn't move down when the layer shows it.
+   */
+  .plinth-code-block-header:not(
+    :has(.plinth-code-block-label, .plinth-code-block-tabs, .plinth-code-block-copy)
+  ) {
+    display: none;
+  }
+
+  .plinth-code-block-label {
+    display: inline-flex;
+    flex: 0 1 auto;
+    gap: var(--plinth-space-2);
+    align-items: center;
+    min-inline-size: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    font-family: var(--plinth-font-family-mono);
+    font-size: var(--plinth-font-size-xs);
+    line-height: var(--plinth-font-leading-tight);
+    color: var(--plinth-color-text-muted);
+    white-space: nowrap;
+  }
+
+  .plinth-code-block-label:has(+ .plinth-code-block-tabs) {
+    margin-inline-end: var(--plinth-space-2);
+  }
+
+  /* The tabs follow the label; the copy button sits at the end. */
+  .plinth-code-block-tabs {
+    display: flex;
+    flex: 0 1 auto;
+    flex-wrap: wrap;
+    gap: var(--plinth-space-1);
+    align-items: center;
+    min-inline-size: 0;
+  }
+
+  .plinth-code-block-tab {
+    position: relative;
+    box-sizing: border-box;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    min-block-size: var(--plinth-control-sm);
+    padding-block: 0;
+    padding-inline: var(--plinth-space-3);
+    font-family: var(--plinth-font-family-body);
+    font-size: var(--plinth-font-size-sm);
+    font-weight: var(--plinth-font-weight-medium);
+    line-height: var(--plinth-font-leading-tight);
+    color: var(--plinth-color-text-muted);
+    white-space: nowrap;
+    cursor: pointer;
+    user-select: none;
+    background-color: transparent;
+    border: var(--plinth-border-width-thin) solid transparent;
+    border-radius: var(--plinth-radius-control);
+    transition:
+      background-color var(--plinth-duration-fast) var(--plinth-easing-standard),
+      border-color var(--plinth-duration-fast) var(--plinth-easing-standard),
+      color var(--plinth-duration-fast) var(--plinth-easing-standard);
+  }
+
+  /* The radio covers its tab, so the tab is what is focused, clicked and ringed. */
+  .plinth-code-block-tab-input {
+    position: absolute;
+    inset: calc(-1 * var(--plinth-border-width-thin));
+    margin: 0;
+    appearance: none;
+    cursor: pointer;
+    background: none;
+    border: 0;
+    border-radius: var(--plinth-radius-control);
+  }
+
+  .plinth-code-block-tab-input:focus-visible {
+    outline: var(--plinth-focus-ring-width) solid var(--plinth-color-focus-ring);
+    outline-offset: var(--plinth-focus-ring-offset);
+  }
+
+  .plinth-code-block-tab:has(> .plinth-code-block-tab-input:checked) {
+    color: var(--plinth-color-text);
+    background-color: var(--plinth-color-surface-raised);
+    border-color: var(--plinth-color-border-strong);
+  }
+
+  @media (hover: hover) {
+    .plinth-code-block-tab:not(:has(> .plinth-code-block-tab-input:checked)):hover {
+      color: var(--plinth-color-text);
+      background-color: var(--plinth-color-surface-hover);
+    }
+  }
+
+  .plinth-code-block-tab:not(:has(> .plinth-code-block-tab-input:checked)):active {
+    background-color: var(--plinth-color-surface-sunken);
+  }
+
+  /* A 40px touch target through an invisible hit area, as on the button (ADR 3). */
+  @media (pointer: coarse) {
+    .plinth-code-block-tab::before {
+      position: absolute;
+      inset-block-start: 50%;
+      inset-inline: min(0%, 50% - var(--plinth-touch-target) / 2);
+      block-size: max(100%, var(--plinth-touch-target));
+      content: '';
+      translate: 0 -50%;
+    }
+  }
+
+  .plinth-code-block-copy {
+    margin-inline-start: auto;
+  }
+
+  /* The button's own display would beat the hidden attribute. */
+  .plinth-code-block-copy[hidden] {
+    display: none;
+  }
+
+  /* Read out, not shown. */
+  .plinth-code-block-status {
+    position: absolute;
+    inline-size: 1px;
+    block-size: 1px;
+    padding: 0;
+    margin: calc(-1 * var(--plinth-border-width-thin));
+    overflow: hidden;
+    white-space: nowrap;
+    border: 0;
+    clip-path: inset(50%);
+  }
+
+  .plinth-code-block-code {
+    box-sizing: border-box;
+    max-inline-size: 100%;
+    padding: var(--plinth-space-4);
+    margin: 0;
+    overflow-x: auto;
+    overscroll-behavior-inline: contain;
+    font-family: var(--plinth-font-family-mono);
+    font-size: var(--plinth-font-size-sm);
+    line-height: var(--plinth-font-leading-normal);
+    color: var(--plinth-color-text);
+    tab-size: 2;
+    white-space: pre;
+    border-radius: var(--plinth-radius-container);
+  }
+
+  .plinth-code-block-code:focus-visible {
+    outline: var(--plinth-focus-ring-width) solid var(--plinth-color-focus-ring);
+    outline-offset: var(--plinth-focus-ring-offset-inset);
+  }
+
+  .plinth-code-block-code > code {
+    font: inherit;
+    color: inherit;
+    background: none;
+  }
+
+  /*
+   * With tabs, only the checked tab's <pre> shows: the nth tab shows the nth <pre>. Nothing
+   * checked (a reset form) shows the first.
+   */
+  .plinth-code-block:has(.plinth-code-block-tabs) > .plinth-code-block-code {
+    display: none;
+  }
+
+  .plinth-code-block:not(:has(.plinth-code-block-tab-input:checked))
+    > .plinth-code-block-code:first-of-type,
+  .plinth-code-block:has(.plinth-code-block-tab:nth-child(1) > :checked)
+    > .plinth-code-block-code:nth-of-type(1),
+  .plinth-code-block:has(.plinth-code-block-tab:nth-child(2) > :checked)
+    > .plinth-code-block-code:nth-of-type(2),
+  .plinth-code-block:has(.plinth-code-block-tab:nth-child(3) > :checked)
+    > .plinth-code-block-code:nth-of-type(3),
+  .plinth-code-block:has(.plinth-code-block-tab:nth-child(4) > :checked)
+    > .plinth-code-block-code:nth-of-type(4),
+  .plinth-code-block:has(.plinth-code-block-tab:nth-child(5) > :checked)
+    > .plinth-code-block-code:nth-of-type(5),
+  .plinth-code-block:has(.plinth-code-block-tab:nth-child(6) > :checked)
+    > .plinth-code-block-code:nth-of-type(6) {
+    display: block;
+  }
+
+  @media (forced-colors: active) {
+    .plinth-code-block-tab:has(> .plinth-code-block-tab-input:checked) {
+      color: HighlightText;
+      background-color: Highlight;
+      border-color: Highlight;
+    }
+  }
+}
+
+/* confirm-dialog.css */
+/*
+ * Confirmation dialog: a dialog that asks a person to confirm an action before it happens, in
+ * three kinds: simple ("Archive 3 tickets?"), type to confirm ("Type harbour to delete this
+ * project") and password ("Enter your password to change the billing email").
+ *
+ * <dialog id="delete" class="plinth-dialog plinth-confirm-dialog" role="alertdialog"
+ *   closedby="closerequest" aria-labelledby="delete-title" aria-describedby="delete-message">
+ *   <form method="dialog" class="plinth-confirm-dialog-form">
+ *     <div class="plinth-dialog-header">
+ *       <h2 id="delete-title" class="plinth-dialog-title">Delete this project?</h2>
+ *     </div>
+ *     <div class="plinth-dialog-body">
+ *       <p id="delete-message" class="plinth-confirm-dialog-message">Its tickets go too.</p>
+ *       <div class="plinth-confirm-dialog-field">
+ *         <label for="delete-field" class="plinth-confirm-dialog-label">
+ *           Type <strong>harbour</strong> to confirm</label>
+ *         <input id="delete-field" class="plinth-confirm-dialog-input" type="text"
+ *           name="confirmation" required pattern="harbour" autocomplete="off"
+ *           autocapitalize="none" spellcheck="false">
+ *       </div>
+ *       <p id="delete-error" class="plinth-confirm-dialog-error" role="alert">…</p>
+ *     </div>
+ *     <div class="plinth-dialog-footer">
+ *       <button type="button" class="plinth-button" data-variant="secondary" data-size="md"
+ *         commandfor="delete" command="close" value="cancel">
+ *         <span class="plinth-button-label">Cancel</span></button>
+ *       <button type="submit" class="plinth-button plinth-confirm-dialog-confirm"
+ *         data-variant="danger" data-size="md" value="confirm">
+ *         <span class="plinth-button-label">Delete</span></button>
+ *     </div>
+ *   </form>
+ * </dialog>
+ *
+ * It is a dialog (dialog.css, on modal.css, with button.css for its actions) that is never
+ * dismissible: role="alertdialog", closedby="closerequest" and no close button, so a tap on the
+ * backdrop leaves it open, and it closes through its buttons, Escape acting as Cancel. The root
+ * needs an id; the title's, message's, field's and error's ids are the root's id with -title,
+ * -message, -field and -error. The title and the message are required: they are the alert
+ * dialog's name and description. data-side-phone="bottom" makes it a bottom sheet below 768px, as
+ * on the dialog. A project may set its own role and closedby.
+ *
+ * Its content is a <form method="dialog">. Cancel is a button with command="close" and
+ * value="cancel", which closes the dialog with returnValue "cancel" and never submits, so it works
+ * whatever is in the field; Escape closes it with an empty returnValue.
+ * Confirm is the form's only submit button, so Enter in the field confirms too: once the browser
+ * has checked the field, the form fires submit (it bubbles to the dialog, where the app listens)
+ * and the dialog closes with returnValue "confirm". The browser focuses the first control when it
+ * opens: the field, or Cancel when there is none. The browser doesn't empty the field when the
+ * dialog closes, so the app calls reset() on the form on close: the phrase is typed afresh each
+ * time, and a password doesn't stay in the page.
+ *
+ * Kinds (no attribute: the markup is what differs):
+ * - simple: the message only.
+ * - type to confirm: a text field with required and pattern, the phrase with its pattern
+ *   characters escaped. The browser blocks the submit until the text matches, and while the form
+ *   is :invalid the confirm button looks disabled, through CSS alone (it isn't disabled: a press
+ *   shows the browser's message and focuses the field). The label shows the phrase in <strong>;
+ *   a label of the app's own must keep it (:phrase), or nobody can tell what to type.
+ * - password: a field with type="password", name="password", autocomplete="current-password" and
+ *   required, so the confirm button looks disabled until something is typed. Plinth never checks
+ *   a password: the app calls preventDefault() on the submit, sets
+ *   the confirm button busy while it checks, then closes the dialog (close("confirm")) or shows
+ *   the error.
+ *
+ * States:
+ * - error: a message under the field, in danger-text with role="alert" so it is announced when it
+ *   appears; the field has aria-invalid="true", aria-describedby pointing at it, and a thick
+ *   danger edge (thick, so it isn't only a colour).
+ * - busy: the confirm button's busy state (button.css: aria-busy, aria-disabled and a spinner).
+ *   The app ignores another submit while it is busy.
+ * - tone: neutral (default) makes the confirm button primary; danger makes it the danger
+ *   variant, for an action that destroys something.
+ *
+ * Fields are 16px text on a phone, so iOS doesn't zoom the page when one takes focus, and md from
+ * 768px up; they are control.md tall, and 40px on a touch screen.
+ */
+
+@layer plinth {
+  /* The form takes the dialog's place as the column of parts, so the body still scrolls. */
+  .plinth-confirm-dialog-form {
+    display: flex;
+    flex: 1 1 auto;
+    flex-direction: column;
+    min-block-size: 0;
+    margin: 0;
+  }
+
+  .plinth-confirm-dialog-message {
+    margin: 0;
+    overflow-wrap: anywhere;
+  }
+
+  .plinth-confirm-dialog-field {
+    display: grid;
+    gap: var(--plinth-space-2);
+    margin-block-start: var(--plinth-space-4);
+  }
+
+  .plinth-confirm-dialog-label {
+    font-size: var(--plinth-font-size-sm);
+    font-weight: var(--plinth-font-weight-medium);
+    line-height: var(--plinth-font-leading-normal);
+    color: var(--plinth-color-text-muted);
+    overflow-wrap: anywhere;
+  }
+
+  .plinth-confirm-dialog-label strong {
+    font-family: var(--plinth-font-family-mono);
+    font-weight: var(--plinth-font-weight-semibold);
+    color: var(--plinth-color-text);
+  }
+
+  .plinth-confirm-dialog-input {
+    box-sizing: border-box;
+    inline-size: 100%;
+    min-block-size: var(--plinth-control-md);
+    padding-block: 0;
+    padding-inline: var(--plinth-space-3);
+    margin: 0;
+    font-family: var(--plinth-font-family-body);
+    font-size: var(--plinth-font-size-field);
+    line-height: var(--plinth-font-leading-tight);
+    color: var(--plinth-color-text);
+    background-color: var(--plinth-color-surface-sunken);
+    border: var(--plinth-border-width-thin) solid var(--plinth-color-border-strong);
+    border-radius: var(--plinth-radius-control);
+    transition: border-color var(--plinth-duration-fast) var(--plinth-easing-standard);
+  }
+
+  /* The phrase is typed as it shows in the label. */
+  .plinth-confirm-dialog-input[type='text'] {
+    font-family: var(--plinth-font-family-mono);
+  }
+
+  .plinth-confirm-dialog-input:focus-visible {
+    outline: var(--plinth-focus-ring-width) solid var(--plinth-color-focus-ring);
+    outline-offset: var(--plinth-focus-ring-offset);
+  }
+
+  .plinth-confirm-dialog-input[aria-invalid='true'] {
+    border-color: var(--plinth-color-danger);
+    border-width: var(--plinth-border-width-thick);
+  }
+
+  .plinth-confirm-dialog-error {
+    margin-block: var(--plinth-space-2) 0;
+    font-size: var(--plinth-font-size-sm);
+    line-height: var(--plinth-font-leading-normal);
+    color: var(--plinth-color-danger-text);
+    overflow-wrap: anywhere;
+  }
+
+  /* Until the field matches, the confirm button looks disabled; it keeps its contrast. */
+  .plinth-confirm-dialog-form:invalid .plinth-confirm-dialog-confirm:not([aria-busy='true']) {
+    --plinth-button-surface: var(--plinth-color-surface-sunken);
+    --plinth-button-surface-hover: var(--plinth-color-surface-sunken);
+    --plinth-button-surface-active: var(--plinth-color-surface-sunken);
+    --plinth-button-text: var(--plinth-color-text-muted);
+    --plinth-button-edge: var(--plinth-color-border);
+    --plinth-button-inner-edge: none;
+
+    cursor: not-allowed;
+  }
+
+  @media (pointer: coarse) {
+    .plinth-confirm-dialog-input {
+      min-block-size: var(--plinth-touch-target);
+    }
+  }
+
+  @media (min-width: 768px) {
+    .plinth-confirm-dialog-input {
+      font-size: var(--plinth-font-size-md);
+    }
+  }
+
+  @media (forced-colors: active) {
+    .plinth-confirm-dialog-form:invalid .plinth-confirm-dialog-confirm:not([aria-busy='true']) {
+      color: GrayText;
+      border-color: GrayText;
+    }
+  }
+}
+
+/* data-table.css */
+/*
+ * Data table: a collection of records (orders, users, invoices) from one markup, a stack of cards
+ * on a phone and a table from 768px up. No script: the CSS alone changes the layout.
+ *
+ * <table class="plinth-data-table" role="table">
+ *   <caption class="plinth-data-table-caption">Orders</caption>
+ *   <thead class="plinth-data-table-head" role="rowgroup">
+ *     <tr class="plinth-data-table-head-row" role="row">
+ *       <th class="plinth-data-table-column" role="columnheader" scope="col">Order</th>
+ *       <th class="plinth-data-table-column" role="columnheader" scope="col" aria-sort="descending">
+ *         <button type="button" class="plinth-data-table-sort">
+ *           <span class="plinth-data-table-sort-label">Date</span>
+ *           <span class="plinth-icon plinth-data-table-sort-icon" data-size="sm" aria-hidden="true">
+ *             <svg>…<path class="plinth-data-table-sort-up"/><path class="plinth-data-table-sort-down"/></svg>
+ *           </span>
+ *         </button>
+ *       </th>
+ *       <th class="plinth-data-table-column" role="columnheader" scope="col" data-numeric>Total</th>
+ *       <th class="plinth-data-table-column" role="columnheader" scope="col" data-phone="hidden">…</th>
+ *     </tr>
+ *   </thead>
+ *   <tbody class="plinth-data-table-body" role="rowgroup">
+ *     <tr class="plinth-data-table-row" role="row">
+ *       <td class="plinth-data-table-cell" role="cell" data-kind="title">
+ *         <span class="plinth-data-table-label" aria-hidden="true">Order</span>
+ *         <span class="plinth-data-table-value">#1042</span>
+ *       </td>
+ *       <td class="plinth-data-table-cell" role="cell" data-kind="field">…</td>
+ *       <td class="plinth-data-table-cell" role="cell" data-kind="field" data-numeric>…</td>
+ *       <td class="plinth-data-table-cell" role="cell" data-kind="actions">
+ *         <span class="plinth-data-table-value">buttons</span>
+ *       </td>
+ *     </tr>
+ *     <tr class="plinth-data-table-row" role="row" aria-selected="true">…</tr>
+ *   </tbody>
+ * </table>
+ *
+ * With no rows, the body holds the empty state:
+ *
+ *   <tbody class="plinth-data-table-body" role="rowgroup">
+ *     <tr class="plinth-data-table-empty" role="row">
+ *       <td class="plinth-data-table-empty-cell" role="cell" colspan="4">No orders yet.</td>
+ *     </tr>
+ *   </tbody>
+ *
+ * The explicit roles (table, rowgroup, row, columnheader, cell) are part of the contract: some
+ * browsers, Safari in particular, drop a table's semantics once its rows stop displaying as table
+ * rows. The caption is optional; without it, name the table with aria-label or aria-labelledby.
+ *
+ * Each cell repeats its column's name in plinth-data-table-label, shown only on a phone's card
+ * and aria-hidden, since the column header already names the cell. The label is optional (an
+ * actions cell has none). The header row stays in the accessibility tree on a phone, visually
+ * hidden, so every cell keeps its header.
+ *
+ * Choices, on the cells and the column headers:
+ * - data-kind on a cell: field (the default; the label, then the value), title (the card's title,
+ *   first on the card, with no label) or actions (row actions, last on the card, with no label).
+ * - data-numeric: numbers, aligned to the end, with figures of one width.
+ * - data-phone="hidden": a less important column, left out of a phone's card and shown from 768px
+ *   up. Put it on the column header and on every cell of the column, so the two always match.
+ * The title cell is the row's first cell and the actions cell its last: the card moves them to
+ * its top and bottom with `order`, which must not change the reading and focus order.
+ *
+ * The app owns sorting, paging and selection (ADR 2); the table only shows them:
+ * - aria-sort on a sortable column header: none, ascending or descending (one column at a time).
+ *   Its label is a plinth-data-table-sort button, which the app listens to; its icon shows both
+ *   arrows (none) or the one of the order. On a phone the sortable headers stay visible above the
+ *   cards as a row of sort buttons; the other headers are visually hidden.
+ * - aria-selected on a row of a table whose rows can be selected: true for a selected row, false
+ *   for the others. A selected row takes the selection tint (accent-subtle) and an accent edge at
+ *   its start. aria-selected drives the styling only: screen readers don't announce it in a
+ *   table, so the control that selects a row (a checkbox, a pressed button) is the app's, and it
+ *   carries the state.
+ * - the sort button's states: hover where the device can hover, pressed (:active) a surface step
+ *   down, disabled (while a sort loads, say) dimmed with opacity.disabled.
+ * - the empty state: one plinth-data-table-empty row in the body, whose plinth-data-table-empty-cell
+ *   spans every column (colspan).
+ * Paging controls sit outside the table.
+ *
+ * From 768px up the actions sit at the start of their cell, under their column header.
+ *
+ * Text wraps in its cell. A table wider than its container, from 768px up, belongs in a
+ * scrolling container the app adds. --plinth-data-table-row-height is a body row's height (44px).
+ */
+
+@layer plinth {
+  /* The phone: a stack of cards. */
+  .plinth-data-table {
+    position: relative;
+    display: block;
+    inline-size: 100%;
+    font-family: var(--plinth-font-family-body);
+    font-size: var(--plinth-font-size-md);
+    line-height: var(--plinth-font-leading-tight);
+    color: var(--plinth-color-text);
+    border-spacing: 0;
+    border-collapse: separate;
+  }
+
+  .plinth-data-table-caption {
+    display: block;
+    padding-inline: var(--plinth-space-4);
+    margin-block-end: var(--plinth-space-2);
+    font-size: var(--plinth-font-size-sm);
+    font-weight: var(--plinth-font-weight-medium);
+    line-height: var(--plinth-font-leading-normal);
+    color: var(--plinth-color-text-muted);
+    text-align: start;
+    overflow-wrap: anywhere;
+  }
+
+  .plinth-data-table-head {
+    display: block;
+  }
+
+  .plinth-data-table-head-row {
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--plinth-space-2);
+  }
+
+  .plinth-data-table-head-row:has(> [aria-sort]:not([data-phone='hidden'])) {
+    margin-block-end: var(--plinth-space-3);
+  }
+
+  .plinth-data-table-column {
+    display: block;
+    padding: 0;
+    font-size: var(--plinth-font-size-sm);
+    font-weight: var(--plinth-font-weight-medium);
+    color: var(--plinth-color-text-muted);
+    text-align: start;
+  }
+
+  /* Visually hidden, still a column header to assistive technology. */
+  .plinth-data-table-column:not([aria-sort]) {
+    position: absolute;
+    inline-size: 1px;
+    block-size: 1px;
+    overflow: hidden;
+    white-space: nowrap;
+    clip-path: inset(50%);
+  }
+
+  .plinth-data-table-sort {
+    display: inline-flex;
+    gap: var(--plinth-space-1);
+    align-items: center;
+    min-inline-size: var(--plinth-touch-target);
+    min-block-size: var(--plinth-touch-target);
+    padding-inline: var(--plinth-space-3);
+    margin: 0;
+    font: inherit;
+    color: inherit;
+    text-align: inherit;
+    cursor: pointer;
+    background-color: var(--plinth-color-surface-raised);
+    border: var(--plinth-border-width-thin) solid var(--plinth-color-border);
+    border-radius: var(--plinth-radius-pill);
+    transition:
+      color var(--plinth-duration-fast) var(--plinth-easing-standard),
+      background-color var(--plinth-duration-fast) var(--plinth-easing-standard);
+  }
+
+  .plinth-data-table-sort:focus-visible {
+    outline: var(--plinth-focus-ring-width) solid var(--plinth-color-focus-ring);
+    outline-offset: var(--plinth-focus-ring-offset);
+  }
+
+  :is([aria-sort='ascending'], [aria-sort='descending']) > .plinth-data-table-sort {
+    color: var(--plinth-color-text);
+    border-color: var(--plinth-color-border-strong);
+  }
+
+  @media (hover: hover) {
+    .plinth-data-table-sort:hover {
+      color: var(--plinth-color-text);
+      background-color: var(--plinth-color-surface-hover);
+    }
+  }
+
+  .plinth-data-table-sort:disabled {
+    cursor: not-allowed;
+    opacity: var(--plinth-opacity-disabled);
+  }
+
+  .plinth-data-table-sort:enabled:active {
+    background-color: var(--plinth-color-surface-sunken);
+  }
+
+  .plinth-data-table-sort-label {
+    overflow-wrap: anywhere;
+  }
+
+  [aria-sort='none'] .plinth-data-table-sort-icon {
+    color: var(--plinth-color-text-subtle);
+  }
+
+  [aria-sort='ascending'] .plinth-data-table-sort-down,
+  [aria-sort='descending'] .plinth-data-table-sort-up {
+    display: none;
+  }
+
+  .plinth-data-table-body {
+    display: flex;
+    flex-direction: column;
+    gap: var(--plinth-space-3);
+  }
+
+  .plinth-data-table-row {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    padding-block: var(--plinth-space-1);
+    background-color: var(--plinth-color-surface-raised);
+    border: var(--plinth-border-width-thin) solid var(--plinth-color-border);
+    border-radius: var(--plinth-radius-container);
+  }
+
+  .plinth-data-table-cell {
+    display: flex;
+    gap: var(--plinth-space-3);
+    align-items: baseline;
+    justify-content: space-between;
+    padding-block: var(--plinth-space-2);
+    padding-inline: var(--plinth-space-4);
+    overflow-wrap: anywhere;
+  }
+
+  .plinth-data-table-label {
+    flex: none;
+    max-inline-size: 50%;
+    font-size: var(--plinth-font-size-sm);
+    color: var(--plinth-color-text-muted);
+  }
+
+  .plinth-data-table-value {
+    min-inline-size: 0;
+    text-align: end;
+  }
+
+  .plinth-data-table-cell[data-kind='title'] {
+    order: -1;
+    font-weight: var(--plinth-font-weight-medium);
+  }
+
+  .plinth-data-table-cell:is([data-kind='title'], [data-kind='actions']) .plinth-data-table-label {
+    display: none;
+  }
+
+  .plinth-data-table-cell[data-kind='title'] .plinth-data-table-value {
+    text-align: start;
+  }
+
+  .plinth-data-table-cell[data-kind='actions'] {
+    justify-content: flex-end;
+    order: 1;
+    padding-block-start: var(--plinth-space-3);
+    margin-block-start: var(--plinth-space-1);
+    border-block-start: var(--plinth-border-width-thin) solid var(--plinth-color-divider);
+  }
+
+  .plinth-data-table-cell[data-kind='actions'] .plinth-data-table-value {
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--plinth-space-2);
+    align-items: center;
+    justify-content: flex-end;
+  }
+
+  .plinth-data-table [data-numeric] {
+    font-variant-numeric: tabular-nums;
+  }
+
+  .plinth-data-table [data-phone='hidden'] {
+    display: none;
+  }
+
+  .plinth-data-table-row[aria-selected='true'] {
+    background-color: var(--plinth-color-accent-subtle);
+    border-color: var(--plinth-color-accent);
+  }
+
+  /* The selected row's edge, so the tint is not the only sign of it. */
+  .plinth-data-table-row[aria-selected='true']::before {
+    position: absolute;
+    inset-block: var(--plinth-space-3);
+    inset-inline-start: 0;
+    inline-size: var(--plinth-border-width-thick);
+    content: '';
+    background-color: var(--plinth-color-accent);
+    border-radius: var(--plinth-radius-pill);
+  }
+
+  .plinth-data-table-empty {
+    display: block;
+  }
+
+  .plinth-data-table-empty-cell {
+    display: block;
+    padding-block: var(--plinth-space-8);
+    padding-inline: var(--plinth-space-4);
+    color: var(--plinth-color-text-muted);
+    text-align: center;
+    overflow-wrap: anywhere;
+    background-color: var(--plinth-color-surface-raised);
+    border: var(--plinth-border-width-thin) solid var(--plinth-color-border);
+    border-radius: var(--plinth-radius-container);
+  }
+
+  /* From 768px: a table. */
+  @media (min-width: 768px) {
+    .plinth-data-table {
+      display: table;
+    }
+
+    .plinth-data-table-caption {
+      display: table-caption;
+      padding-inline: 0;
+      caption-side: top;
+    }
+
+    .plinth-data-table-head {
+      display: table-header-group;
+    }
+
+    .plinth-data-table-head-row,
+    .plinth-data-table-head-row:has(> [aria-sort]:not([data-phone='hidden'])) {
+      display: table-row;
+      margin: 0;
+    }
+
+    .plinth-data-table-column,
+    .plinth-data-table-column:not([aria-sort]),
+    .plinth-data-table [data-phone='hidden'].plinth-data-table-column {
+      position: static;
+      box-sizing: border-box;
+      display: table-cell;
+      inline-size: auto;
+      block-size: var(--plinth-touch-target);
+      padding-block: 0;
+      padding-inline: var(--plinth-space-3);
+      overflow: visible;
+      vertical-align: middle;
+      white-space: normal;
+      border-block-end: var(--plinth-border-width-thin) solid var(--plinth-color-border);
+      clip-path: none;
+    }
+
+    .plinth-data-table-sort {
+      padding-inline: var(--plinth-space-1);
+      margin-inline: calc(var(--plinth-space-1) * -1);
+      background-color: transparent;
+      border: 0;
+      border-radius: var(--plinth-radius-control);
+    }
+
+    @media (hover: hover) {
+      .plinth-data-table-sort:hover {
+        background-color: transparent;
+      }
+    }
+
+    .plinth-data-table-sort:enabled:active {
+      background-color: var(--plinth-color-surface-sunken);
+    }
+
+    .plinth-data-table-body {
+      display: table-row-group;
+    }
+
+    .plinth-data-table-row {
+      position: static;
+      display: table-row;
+      padding: 0;
+      background-color: transparent;
+      border: 0;
+      border-radius: 0;
+    }
+
+    .plinth-data-table-cell,
+    .plinth-data-table-cell[data-kind='actions'],
+    .plinth-data-table [data-phone='hidden'].plinth-data-table-cell {
+      position: relative;
+      box-sizing: border-box;
+      display: table-cell;
+      block-size: var(--plinth-data-table-row-height);
+      padding-block: var(--plinth-space-2);
+      padding-inline: var(--plinth-space-3);
+      margin: 0;
+      vertical-align: middle;
+      text-align: start;
+      overflow-wrap: break-word;
+      border: 0;
+    }
+
+    .plinth-data-table-row + .plinth-data-table-row > .plinth-data-table-cell {
+      border-block-start: var(--plinth-border-width-thin) solid var(--plinth-color-divider);
+    }
+
+    .plinth-data-table-label {
+      display: none;
+    }
+
+    .plinth-data-table-value {
+      text-align: inherit;
+    }
+
+    .plinth-data-table-cell[data-kind='actions'] .plinth-data-table-value {
+      display: inline-flex;
+      flex-wrap: nowrap;
+    }
+
+    .plinth-data-table-column[data-numeric],
+    .plinth-data-table-cell[data-numeric] {
+      text-align: end;
+    }
+
+    .plinth-data-table-row[aria-selected='true'] {
+      border-color: transparent;
+    }
+
+    .plinth-data-table-row[aria-selected='true'] > .plinth-data-table-cell {
+      background-color: var(--plinth-color-accent-subtle);
+    }
+
+    .plinth-data-table-row[aria-selected='true']::before {
+      content: none;
+    }
+
+    .plinth-data-table-row[aria-selected='true'] > .plinth-data-table-cell:first-child::before {
+      position: absolute;
+      inset-block: 0;
+      inset-inline-start: 0;
+      inline-size: var(--plinth-border-width-thick);
+      content: '';
+      background-color: var(--plinth-color-accent);
+    }
+
+    .plinth-data-table-empty {
+      display: table-row;
+    }
+
+    .plinth-data-table-empty-cell {
+      display: table-cell;
+      background-color: transparent;
+      border: 0;
+      border-radius: 0;
+    }
+  }
+
+  @media (min-width: 1280px) {
+    .plinth-data-table-column,
+    .plinth-data-table-column:not([aria-sort]),
+    .plinth-data-table [data-phone='hidden'].plinth-data-table-column,
+    .plinth-data-table-cell,
+    .plinth-data-table-cell[data-kind='actions'],
+    .plinth-data-table [data-phone='hidden'].plinth-data-table-cell {
+      padding-inline: var(--plinth-space-4);
+    }
+  }
+
+  @media (forced-colors: active) {
+    .plinth-data-table-row[aria-selected='true'],
+    .plinth-data-table-row[aria-selected='true'] > .plinth-data-table-cell {
+      color: HighlightText;
+      background-color: Highlight;
+    }
+  }
+}
+
+/* dialog.css */
+/*
+ * Dialog: a modal for a form, the details of something or its settings, centred on the screen at
+ * every width; with data-side-phone="bottom" it is a bottom sheet below 768px.
+ *
+ * <dialog id="settings" class="plinth-dialog" closedby="any"
+ *   aria-labelledby="settings-title" aria-describedby="settings-description">
+ *   <div class="plinth-dialog-panel">
+ *     <div class="plinth-dialog-handle" aria-hidden="true"></div>
+ *     <div class="plinth-dialog-header">
+ *       <h2 id="settings-title" class="plinth-dialog-title">Settings</h2>
+ *       <p id="settings-description" class="plinth-dialog-description">Changes apply at once.</p>
+ *       <button type="button" class="plinth-button plinth-icon-button plinth-dialog-close"
+ *         data-variant="ghost" data-size="md" aria-label="Close" commandfor="settings"
+ *         command="close">
+ *         <span class="plinth-icon" data-size="md" aria-hidden="true"><svg>…</svg></span>
+ *       </button>
+ *     </div>
+ *     <div class="plinth-dialog-body">…</div>
+ *     <div class="plinth-dialog-footer">…</div>
+ *   </div>
+ * </dialog>
+ *
+ * The root is the <dialog>, and it needs an id: commandfor and aria-labelledby point at it, and
+ * the title's and description's ids are the root's id with -title and -description. The panel is
+ * the root's only child and holds the parts. The handle is there only on a dismissible dialog
+ * with data-side-phone="bottom": decorative (aria-hidden), shown below 768px, where the dialog is
+ * dragged down to close (modal.css). The title is
+ * required; the description (and its aria-describedby) and the footer are optional. The close
+ * button is an icon button (button.css and icon.css). It needs modal.css, the base it shares with
+ * the sheet: the surface, the backdrop, the scroll lock, the motion, the safe areas and the parts
+ * are there, and this file sets only where the dialog sits and how big it is.
+ *
+ * Open it with showModal() or a <button commandfor="settings" command="show-modal">. Open is the
+ * native state, [open]; the browser puts the dialog in the top layer, makes the page inert, traps
+ * focus, and returns focus to what opened it. The dialog fires close when it closes.
+ *
+ * Dismissible (the default): closedby="any" and the close button; the close button, Escape and a
+ * tap on the backdrop close it (closedby="any" is an enhancement Safari doesn't have yet, so the
+ * close button is always there). Not dismissible, for a choice the person must make:
+ * role="alertdialog", closedby="closerequest" and no close button, so a stray tap on the backdrop
+ * does nothing and it closes through its own buttons, with Escape acting as Cancel (the browser
+ * fires cancel, then close, with an empty returnValue). It needs an action that closes it,
+ * usually in the footer, the least destructive first: a touch screen has no Escape, and the
+ * browser focuses the first control. Give it a description: an alert dialog's message is its
+ * accessible description. A project may set its own closedby.
+ *
+ * Presentation: centred at every width, dialog.width wide (less the screen's margin on a phone),
+ * its height capped by the screen's, fading and rising into place. data-side-phone="bottom" (the
+ * only value; leave it out for centred) makes it a bottom sheet below 768px: the screen's width,
+ * on the bottom edge, sliding up, its last part clearing the home indicator; from 768px up it is
+ * centred like any dialog.
+ *
+ * On a phone the dialog's height is capped by 100dvh, which doesn't, on its own, clear the
+ * on-screen keyboard: a page with a form in a dialog sets interactive-widget=resizes-content in
+ * its viewport meta where the browser supports it, as for the sheet.
+ *
+ * In Livewire, a re-render would morph the open dialog back to the server's markup and drop its
+ * open attribute: put wire:ignore.self on the dialog (or keep it outside the component that
+ * re-renders), and always pass an id, since a generated one changes on every render.
+ */
+
+@layer plinth {
+  .plinth-dialog {
+    --plinth-modal-offset: 0 var(--plinth-space-4);
+    --plinth-modal-closed-opacity: 0;
+
+    inset: 0;
+    inline-size: min(100% - 2 * var(--plinth-space-4), var(--plinth-dialog-width));
+    max-block-size: calc(100dvh - 2 * var(--plinth-space-4));
+    margin: auto;
+  }
+
+  .plinth-dialog[data-side-phone='bottom'] {
+    --plinth-modal-offset: 0 100%;
+    --plinth-modal-closed-opacity: 1;
+    --plinth-modal-safe-area-end: env(safe-area-inset-bottom);
+
+    inset-block: auto 0;
+    inline-size: 100%;
+    max-block-size: calc(100dvh - var(--plinth-space-12));
+    margin: 0;
+    border-block-end-width: 0;
+    border-end-start-radius: 0;
+    border-end-end-radius: 0;
+  }
+
+  /* One that can be dismissed is dragged down to close (modal.css): the root fills the screen. */
+  .plinth-dialog[data-side-phone='bottom']:has(> * > .plinth-dialog-handle) {
+    inset: 0;
+    block-size: auto;
+    max-block-size: none;
+    border-width: 0;
+    border-radius: 0;
+  }
+
+  @media (min-width: 768px) {
+    .plinth-dialog,
+    .plinth-dialog[data-side-phone='bottom'],
+    .plinth-dialog[data-side-phone='bottom']:has(> * > .plinth-dialog-handle) {
+      --plinth-modal-offset: 0 var(--plinth-space-4);
+      --plinth-modal-closed-opacity: 0;
+      --plinth-modal-safe-area-end: initial;
+
+      inset: 0;
+      inline-size: min(100% - 2 * var(--plinth-space-8), var(--plinth-dialog-width));
+      block-size: fit-content;
+      max-block-size: calc(100dvh - 2 * var(--plinth-space-8));
+      margin: auto;
+      border-width: var(--plinth-border-width-thin);
+      border-radius: var(--plinth-radius-container);
+    }
+  }
+}
+
+/* drawer.css */
+/*
+ * Drawer: a phone-first panel on the bottom edge that the person drags, like a maps app's panel,
+ * with optional snap points (a peek, half and full height). From 768px up it is a dialog or a
+ * sheet.
+ *
+ * <dialog id="route" class="plinth-drawer" data-desktop="dialog"
+ *   data-snap-points="peek half full" data-snap="peek" closedby="any"
+ *   aria-labelledby="route-title" aria-describedby="route-description">
+ *   <div class="plinth-drawer-panel">
+ *     <div class="plinth-drawer-handle" aria-hidden="true"></div>
+ *     <div class="plinth-drawer-header">
+ *       <h2 id="route-title" class="plinth-drawer-title">Route</h2>
+ *       <p id="route-description" class="plinth-drawer-description">12 min by bike.</p>
+ *       <button type="button" class="plinth-button plinth-icon-button plinth-drawer-close"
+ *         data-variant="ghost" data-size="md" aria-label="Close" commandfor="route"
+ *         command="close">
+ *         <span class="plinth-icon" data-size="md" aria-hidden="true"><svg>…</svg></span>
+ *       </button>
+ *     </div>
+ *     <div class="plinth-drawer-body">…</div>
+ *     <div class="plinth-drawer-footer">…</div>
+ *   </div>
+ * </dialog>
+ *
+ * The root is the <dialog>, and it needs an id: commandfor and aria-labelledby point at it, and
+ * the title's and description's ids are the root's id with -title and -description. The panel is
+ * the root's only child and holds the parts; the handle is always there, first, and decorative
+ * (aria-hidden): Escape and the close button, which is always there too, are the ways to close it
+ * without dragging. The title is required; the description (and its aria-describedby) and the
+ * footer are optional. The close button is an icon button (button.css and icon.css). It needs
+ * modal.css, the base it shares with the dialog and the sheet, where the dragging is described:
+ * this file sets where the drawer sits, how big it is and its snap points.
+ *
+ * Open it with showModal() or a <button commandfor="route" command="show-modal">. Open is the
+ * native state, [open]; the browser puts the drawer in the top layer, makes the page inert, traps
+ * focus, closes on Escape and returns focus. The dialog fires close when it closes, whichever way
+ * it closed.
+ *
+ * On a phone (below 768px) it is the screen's width on the bottom edge and slides up. Dragged
+ * down past its lowest snap point it closes; the layers do that part (modal.css). With no snap
+ * points it is as tall as its content, up to the screen's height less a gap.
+ *
+ * Snap points (data-snap-points, optional): any of peek, half and full, separated by spaces.
+ * With them the panel is the screen's height less a gap, and it rests where it is let go at the
+ * nearest one: peek shows drawer.peek-height of it (the handle, the header and the top of the
+ * body), half the screen's height, full all of it. The body scrolls inside the panel at any of
+ * them, so a drawer with a long body is dragged by its handle and header. data-snap is the snap
+ * point it opens at, one of those listed (the layers print the largest listed when it is missing
+ * or unknown); the browser opens it at full, or the largest listed, and the layers then scroll it
+ * to data-snap. The drawer remembers nothing: where it rests is the person's.
+ *
+ * Desktop (data-desktop): its presentation from 768px up. dialog (the default, also when missing
+ * or unknown) centres it like the dialog, at dialog.width; sheet makes it a full-height panel on
+ * the inline-end edge, sheet.side-width wide, like the sheet. From 768px up there is no handle
+ * and no dragging, the snap points don't apply, and a tap on the backdrop closes it
+ * (closedby="any"; Safari doesn't have it yet, so the close button is always there).
+ *
+ * The motion runs on the motion tokens, which drop to 0ms under prefers-reduced-motion; the
+ * snapping is the browser's scrolling.
+ *
+ * In Livewire, a re-render would morph the open dialog back to the server's markup and drop its
+ * open attribute: put wire:ignore.self on the drawer (or keep it outside the component that
+ * re-renders), and always pass an id, since a generated one changes on every render.
+ */
+
+@layer plinth {
+  .plinth-drawer {
+    --plinth-modal-offset: 0 100%;
+    --plinth-modal-safe-area-end: env(safe-area-inset-bottom);
+
+    /* Translate isn't logical: -1 (under :dir(rtl), below) turns the sheet's slide around. */
+    --plinth-drawer-direction: 1;
+
+    inset: 0;
+    inline-size: 100%;
+    block-size: auto;
+    max-block-size: none;
+    margin: 0;
+    border-width: 0;
+    border-radius: 0;
+  }
+
+  /* With snap points the panel is its full height, and the snap points are where it rests. */
+  .plinth-drawer[data-snap-points] > .plinth-drawer-panel {
+    block-size: calc(
+      100% - max(var(--plinth-space-12), env(safe-area-inset-top) + var(--plinth-space-4))
+    );
+  }
+
+  /* Full is the panel's end on the screen's bottom edge, the base's open position. */
+  .plinth-drawer[data-snap-points]:not([data-snap-points~='full']) > .plinth-drawer-panel {
+    scroll-snap-align: none;
+  }
+
+  /*
+   * Peek and half are the panel's top that far from the screen's bottom edge. The snap areas are
+   * the handle (peek) and the header (half), the first parts of the panel, so their margins add
+   * what lies above them: the handle's margin, then the handle (modal.css; change them together).
+   */
+  .plinth-drawer[data-snap-points~='peek'] .plinth-drawer-handle {
+    scroll-snap-align: start;
+    scroll-margin-block-start: calc(
+      100dvh - var(--plinth-drawer-peek-height) + var(--plinth-space-2)
+    );
+  }
+
+  .plinth-drawer[data-snap-points~='half'] .plinth-drawer-header {
+    scroll-snap-align: start;
+    scroll-margin-block-start: calc(50dvh + var(--plinth-space-2) + var(--plinth-space-1));
+  }
+
+  .plinth-drawer:dir(rtl) {
+    --plinth-drawer-direction: -1;
+  }
+
+  @media (min-width: 768px) {
+    .plinth-drawer {
+      --plinth-modal-offset: 0 var(--plinth-space-4);
+      --plinth-modal-closed-opacity: 0;
+      --plinth-modal-safe-area-end: initial;
+
+      inset: 0;
+      inline-size: min(100% - 2 * var(--plinth-space-8), var(--plinth-dialog-width));
+      block-size: fit-content;
+      max-block-size: calc(100dvh - 2 * var(--plinth-space-8));
+      margin: auto;
+      border-width: var(--plinth-border-width-thin);
+      border-radius: var(--plinth-radius-container);
+    }
+
+    .plinth-drawer[data-desktop='sheet'] {
+      --plinth-modal-offset: calc(100% * var(--plinth-drawer-direction)) 0;
+      --plinth-modal-closed-opacity: 1;
+      --plinth-modal-safe-area-end: env(safe-area-inset-bottom);
+
+      inset-block: 0;
+      inset-inline: auto 0;
+      inline-size: min(100% - var(--plinth-space-12), var(--plinth-sheet-side-width));
+      block-size: auto;
+      max-block-size: none;
+      padding-block: env(safe-area-inset-top) 0;
+      margin: 0;
+      border-width: 0;
+      border-inline-start-width: var(--plinth-border-width-thin);
+      border-radius: 0;
+    }
+
+    .plinth-drawer[data-snap-points] > .plinth-drawer-panel {
+      block-size: auto;
+    }
+
+    .plinth-drawer[data-snap-points] :is(.plinth-drawer-handle, .plinth-drawer-header) {
+      scroll-snap-align: none;
+    }
+  }
+}
+
+/* header.css */
+/*
+ * Header: the top bar of the phone shell, with a leading action, the page's title and trailing
+ * actions. It sticks to the top of the page as the content scrolls under it.
+ *
+ * <header class="plinth-header">
+ *   <div class="plinth-header-leading">
+ *     <a class="plinth-button plinth-icon-button" href="/inbox" data-variant="ghost"
+ *       data-size="md" aria-label="Back">
+ *       <span class="plinth-icon" data-size="md" data-mirror aria-hidden="true"><svg>…</svg></span>
+ *     </a>
+ *   </div>
+ *   <h1 class="plinth-header-title">Inbox</h1>
+ *   <div class="plinth-header-actions">
+ *     <button type="button" class="plinth-button plinth-icon-button" data-variant="ghost"
+ *       data-size="md" aria-label="Search">…</button>
+ *   </div>
+ * </header>
+ *
+ * The root is a <header>: at the top of the page (not inside <main>, <article> or <section>) it is
+ * the page's banner landmark, so a page has one. The title is an <h1>, the page's heading, and is
+ * required. It stays on one line and ends in an ellipsis when it doesn't fit.
+ *
+ * The leading part holds one action, usually an icon button: back (a link, with data-mirror on
+ * its icon so it points the other way in right-to-left text) or a menu button that opens a sheet
+ * (commandfor and command="show-modal"). The actions part holds the trailing actions, at most two
+ * or three icon buttons; put the rest in a menu. Both are optional, and printed only when they
+ * have content. Every icon button needs its own name (label). The header needs button.css and
+ * icon.css for them.
+ *
+ * Its height is the header.height component token (56px), plus env(safe-area-inset-top), which
+ * pads it below the status bar and the notch on a phone that draws under them (viewport-fit=cover);
+ * the inline padding clears the notch on a phone held sideways. It is sticky on the
+ * layer.sticky z-index, so it sits above the page and below sheets and menus (the top layer).
+ * Content scrolls under it, so the app sets scroll-padding-block-start on its scrolling element
+ * (calc(var(--plinth-header-height) + env(safe-area-inset-top))) to keep a focused element or an
+ * anchor's target from landing under the header.
+ *
+ * The actions sit var(--plinth-space-2) apart, so on a touch screen the 40px hit areas of 32px
+ * icon buttons don't overlap.
+ *
+ * The app owns the state: the header has no variants or states of its own. What the actions do is
+ * the app's (a link, a commandfor, wire:click, @click on the icon button).
+ */
+
+@layer plinth {
+  .plinth-header {
+    position: sticky;
+    inset-block-start: 0;
+    z-index: var(--plinth-layer-sticky);
+    box-sizing: border-box;
+    display: flex;
+    gap: var(--plinth-space-2);
+    align-items: center;
+    min-block-size: calc(var(--plinth-header-height) + env(safe-area-inset-top));
+    padding-block-start: env(safe-area-inset-top);
+    padding-inline: max(var(--plinth-space-2), env(safe-area-inset-left))
+      max(var(--plinth-space-2), env(safe-area-inset-right));
+    font-family: var(--plinth-font-family-body);
+    color: var(--plinth-color-text);
+    background-color: var(--plinth-color-surface);
+    border-block-end: var(--plinth-border-width-thin) solid var(--plinth-color-divider);
+  }
+
+  .plinth-header:dir(rtl) {
+    padding-inline: max(var(--plinth-space-2), env(safe-area-inset-right))
+      max(var(--plinth-space-2), env(safe-area-inset-left));
+  }
+
+  .plinth-header-leading,
+  .plinth-header-actions {
+    display: flex;
+    flex: none;
+    gap: var(--plinth-space-2);
+    align-items: center;
+  }
+
+  .plinth-header-title {
+    flex: 1 1 auto;
+    min-inline-size: 0;
+    margin: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    font-size: var(--plinth-font-size-lg);
+    font-weight: var(--plinth-font-weight-semibold);
+    line-height: var(--plinth-font-leading-tight);
+    letter-spacing: var(--plinth-font-tracking-tight);
+    white-space: nowrap;
+  }
+
+  /* Without a leading action or trailing actions, the title keeps the text's distance from the edge. */
+  .plinth-header-title:first-child {
+    margin-inline-start: var(--plinth-space-2);
+  }
+
+  .plinth-header-title:last-child {
+    margin-inline-end: var(--plinth-space-2);
+  }
+
+  @media (min-width: 768px) {
+    .plinth-header {
+      padding-inline: max(var(--plinth-space-4), env(safe-area-inset-left))
+        max(var(--plinth-space-4), env(safe-area-inset-right));
+    }
+
+    .plinth-header:dir(rtl) {
+      padding-inline: max(var(--plinth-space-4), env(safe-area-inset-right))
+        max(var(--plinth-space-4), env(safe-area-inset-left));
+    }
+  }
+}
+
+/* icon.css */
+/*
+ * Icon: a project's own SVG, sized by Plinth.
+ *
+ * Decorative (the default), hidden from assistive technology:
+ * <span class="plinth-icon" data-size="md" aria-hidden="true">
+ *   <svg viewBox="0 0 24 24">…</svg>
+ * </span>
+ *
+ * Meaningful, with a label (an img role makes the SVG inside presentational). Blade, Vue and
+ * React take it as `label`, or as an `aria-label` attribute; a blank label leaves the icon
+ * decorative:
+ * <span class="plinth-icon" data-size="md" role="img" aria-label="Warning">
+ *   <svg viewBox="0 0 24 24">…</svg>
+ * </span>
+ *
+ * Sizes (data-size): sm 16px, md 20px (default, also when the attribute is missing or unknown),
+ * lg 24px. data-mirror flips the icon in right-to-left text, for icons that point a direction.
+ *
+ * The SVG comes from the project, inline or as <use href="sprite.svg#name">. It should draw with
+ * currentColor; Plinth sets no fill or stroke, so outline and filled icon sets both keep theirs.
+ * The icon takes its colour from the text around it.
+ */
+
+@layer plinth {
+  .plinth-icon {
+    --plinth-icon-current-size: var(--plinth-size-icon-md);
+
+    display: inline-flex;
+    flex: none;
+    inline-size: var(--plinth-icon-current-size);
+    block-size: var(--plinth-icon-current-size);
+    vertical-align: middle;
+  }
+
+  .plinth-icon[data-size='sm'] {
+    --plinth-icon-current-size: var(--plinth-size-icon-sm);
+  }
+
+  .plinth-icon[data-size='lg'] {
+    --plinth-icon-current-size: var(--plinth-size-icon-lg);
+  }
+
+  .plinth-icon > svg {
+    inline-size: 100%;
+    block-size: 100%;
+  }
+
+  .plinth-icon[data-mirror]:dir(rtl) > svg {
+    transform: scaleX(-1);
+  }
+}
+
+/* list-card.css */
+/*
+ * List card: a group of list rows on a raised surface, with an optional heading and footer note.
+ *
+ * <div class="plinth-list-card">
+ *   <h2 class="plinth-list-card-heading">Account</h2>
+ *   <ul class="plinth-list-card-list" role="list">
+ *     <li><a class="plinth-list-row" href="…">…</a></li>
+ *     <li><div class="plinth-list-row">…</div></li>
+ *   </ul>
+ *   <p class="plinth-list-card-footer">Changes apply to every device.</p>
+ * </div>
+ *
+ * The heading and the footer are optional, and sit outside the raised surface: the heading above
+ * it, the footer note below. The heading is an <h2> by default; pick the level that fits the page
+ * (heading-level h2 to h6 in Blade, headingLevel in Vue).
+ *
+ * The list is the raised surface (color.surface-raised, radius.container, a hairline in
+ * color.border; no shadow, per ADR 3: the card does not float). The card resets the list's
+ * margin, padding and bullets, and prints role="list" so Safari keeps announcing it. Each row
+ * goes in its own <li> and keeps its own root, states and divider; the surface clips the rows'
+ * hover and selection tints to its corners, and anything a row positions outside itself (a
+ * popover or a dialog is in the top layer, so it is not). The first and last rows take the
+ * surface's inner radius, so their focus ring, drawn inside the row, follows the corners.
+ */
+
+@layer plinth {
+  .plinth-list-card {
+    display: flex;
+    flex-direction: column;
+    gap: var(--plinth-space-2);
+    min-inline-size: 0;
+    font-family: var(--plinth-font-family-body);
+    color: var(--plinth-color-text);
+  }
+
+  .plinth-list-card-heading {
+    padding-inline: var(--plinth-space-4);
+    margin: 0;
+    font-size: var(--plinth-font-size-sm);
+    font-weight: var(--plinth-font-weight-medium);
+    line-height: var(--plinth-font-leading-normal);
+    color: var(--plinth-color-text-muted);
+    overflow-wrap: anywhere;
+  }
+
+  .plinth-list-card-list {
+    padding: 0;
+    margin: 0;
+    overflow: hidden;
+    list-style: none;
+    background-color: var(--plinth-color-surface-raised);
+    border: var(--plinth-border-width-thin) solid var(--plinth-color-border);
+    border-radius: var(--plinth-radius-container);
+  }
+
+  .plinth-list-card-footer {
+    padding-inline: var(--plinth-space-4);
+    margin: 0;
+    font-size: var(--plinth-font-size-sm);
+    line-height: var(--plinth-font-leading-normal);
+    color: var(--plinth-color-text-muted);
+    overflow-wrap: anywhere;
+  }
+
+  .plinth-list-card-list > li:first-child > .plinth-list-row {
+    border-start-start-radius: calc(
+      var(--plinth-radius-container) - var(--plinth-border-width-thin)
+    );
+    border-start-end-radius: calc(var(--plinth-radius-container) - var(--plinth-border-width-thin));
+  }
+
+  .plinth-list-card-list > li:last-child > .plinth-list-row {
+    border-end-start-radius: calc(var(--plinth-radius-container) - var(--plinth-border-width-thin));
+    border-end-end-radius: calc(var(--plinth-radius-container) - var(--plinth-border-width-thin));
+  }
+}
+
+/* list-row.css */
+/*
+ * List row: one row of a list or a sheet, 44px tall at least.
+ *
+ * <div class="plinth-list-row">
+ *   <span class="plinth-list-row-leading">an icon or an avatar</span>
+ *   <span class="plinth-list-row-content">
+ *     <span class="plinth-list-row-title">Notifications</span>
+ *     <span class="plinth-list-row-description">Email and push</span>
+ *   </span>
+ *   <span class="plinth-list-row-trailing">
+ *     a value, a badge or a control
+ *     <span class="plinth-icon plinth-list-row-chevron" data-size="sm" data-mirror
+ *       aria-hidden="true"><svg>…</svg></span>
+ *   </span>
+ * </div>
+ *
+ * The leading slot, the description and the trailing slot are optional; the chevron is the
+ * row's own (chevron in Blade and Vue), and points the other way in right-to-left text.
+ *
+ * The root is the element the app talks to (ADR 2):
+ * - a static row is a <div>;
+ * - a row that navigates is <a class="plinth-list-row" href="…">;
+ * - a row that acts is <button type="button" class="plinth-list-row">.
+ * A link or button row holds no other control: a switch or an icon button in the trailing slot
+ * needs a static row, and its own accessible name.
+ *
+ * States:
+ * - current: aria-current="page" on a link row (or a static row) for the page being shown, set
+ *   by the app; the selection tint (accent-subtle, accent-text) and a heavier title. A button
+ *   row never prints it: a button is not a page.
+ * - disabled: `disabled` on a <button>; on a link, no href, role="link" and aria-disabled="true".
+ * - hover only where the device can hover; the focus ring on :focus-visible, drawn inside the
+ *   row (focus-ring.offset-inset).
+ *
+ * A hairline divider (color.divider) sits between two rows that follow each other, as siblings
+ * or each as the direct child of its own <li>; a wrapper element in between drops it. The app
+ * resets the list (margin, padding, list-style) and adds role="list", which Safari needs to keep
+ * announcing a list without bullets. The height is --plinth-list-row-height (44px); a description makes the
+ * row taller. Long titles and descriptions wrap; the trailing slot keeps its width up to half the
+ * row, and only a value longer than that wraps.
+ */
+
+@layer plinth {
+  .plinth-list-row {
+    box-sizing: border-box;
+    display: flex;
+    gap: var(--plinth-space-3);
+    align-items: center;
+    inline-size: 100%;
+    min-block-size: var(--plinth-list-row-height);
+    padding-block: var(--plinth-space-2);
+    padding-inline: var(--plinth-space-4);
+    margin: 0;
+    font-family: var(--plinth-font-family-body);
+    font-size: var(--plinth-font-size-md);
+    font-weight: var(--plinth-font-weight-regular);
+    line-height: var(--plinth-font-leading-tight);
+    color: var(--plinth-color-text);
+    text-align: start;
+    text-decoration: none;
+    background-color: transparent;
+    border: 0;
+    transition: background-color var(--plinth-duration-fast) var(--plinth-easing-standard);
+  }
+
+  :is(a, button).plinth-list-row {
+    cursor: pointer;
+  }
+
+  li + li > .plinth-list-row {
+    border-block-start: var(--plinth-border-width-thin) solid var(--plinth-color-divider);
+  }
+
+  .plinth-list-row + .plinth-list-row {
+    border-block-start: var(--plinth-border-width-thin) solid var(--plinth-color-divider);
+  }
+
+  @media (hover: hover) {
+    a.plinth-list-row[href]:not([aria-current='page']):hover,
+    button.plinth-list-row:enabled:not([aria-current='page']):hover {
+      background-color: var(--plinth-color-surface-hover);
+    }
+  }
+
+  a.plinth-list-row[href]:not([aria-current='page']):active,
+  button.plinth-list-row:enabled:not([aria-current='page']):active {
+    background-color: var(--plinth-color-surface-sunken);
+  }
+
+  .plinth-list-row[aria-current='page'] {
+    color: var(--plinth-color-accent-text);
+    background-color: var(--plinth-color-accent-subtle);
+  }
+
+  .plinth-list-row:disabled,
+  .plinth-list-row[aria-disabled='true'] {
+    cursor: not-allowed;
+    opacity: var(--plinth-opacity-disabled);
+  }
+
+  /* Inside the row, so a scrolling sheet or a card doesn't cut the ring off at the sides. */
+  .plinth-list-row:focus-visible {
+    outline: var(--plinth-focus-ring-width) solid var(--plinth-color-focus-ring);
+    outline-offset: var(--plinth-focus-ring-offset-inset);
+  }
+
+  .plinth-list-row-leading {
+    display: inline-flex;
+    flex: none;
+    align-items: center;
+    color: var(--plinth-color-text-muted);
+  }
+
+  .plinth-list-row-content {
+    display: flex;
+    flex: 1 1 auto;
+    flex-direction: column;
+    gap: var(--plinth-space-0-5);
+    min-inline-size: 0;
+  }
+
+  .plinth-list-row-title {
+    overflow-wrap: anywhere;
+  }
+
+  .plinth-list-row-description {
+    font-size: var(--plinth-font-size-sm);
+    line-height: var(--plinth-font-leading-normal);
+    color: var(--plinth-color-text-muted);
+    overflow-wrap: anywhere;
+  }
+
+  /* Keeps its width up to half the row, so a long title wraps before a short value does. */
+  .plinth-list-row-trailing {
+    display: inline-flex;
+    flex: none;
+    gap: var(--plinth-space-2);
+    align-items: center;
+    max-inline-size: 50%;
+    color: var(--plinth-color-text-muted);
+    text-align: end;
+    overflow-wrap: anywhere;
+  }
+
+  .plinth-list-row-chevron {
+    color: var(--plinth-color-text-subtle);
+  }
+
+  .plinth-list-row[aria-current='page'] .plinth-list-row-title {
+    font-weight: var(--plinth-font-weight-medium);
+  }
+
+  @media (forced-colors: active) {
+    .plinth-list-row[aria-current='page'] {
+      color: HighlightText;
+      background-color: Highlight;
+    }
+
+    .plinth-list-row:disabled,
+    .plinth-list-row[aria-disabled='true'] {
+      color: GrayText;
+    }
+  }
+}
+
+/* menu-sheet.css */
+/*
+ * Menu sheet: the app shell's menu, a sheet with the signed-in user, the navigation and the
+ * account actions. A side panel from 768px up, a bottom sheet on a phone.
+ *
+ * <dialog id="menu" class="plinth-sheet plinth-menu-sheet" data-side="end"
+ *   data-side-phone="bottom" closedby="any" aria-labelledby="menu-title">
+ *   <div class="plinth-sheet-panel">
+ *     <div class="plinth-sheet-handle" aria-hidden="true"></div>
+ *     <div class="plinth-sheet-header">
+ *       <h2 id="menu-title" class="plinth-sheet-title">Menu</h2>
+ *       <button … class="plinth-button plinth-icon-button plinth-sheet-close" commandfor="menu"
+ *         command="close">…</button>
+ *     </div>
+ *     <div class="plinth-sheet-body">
+ *       <a class="plinth-list-row plinth-menu-sheet-user" href="/profile">
+ *         <span class="plinth-list-row-leading">
+ *           <span class="plinth-avatar" data-size="lg" aria-hidden="true">…</span>
+ *         </span>
+ *         <span class="plinth-list-row-content">
+ *           <span class="plinth-list-row-title">Sam Lee</span>
+ *           <span class="plinth-list-row-description">sam@example.com</span>
+ *         </span>
+ *         <span class="plinth-list-row-trailing">…chevron…</span>
+ *       </a>
+ *       <nav class="plinth-menu-sheet-nav" aria-labelledby="menu-title">
+ *         <div class="plinth-list-card">…link rows, one with aria-current="page"…</div>
+ *       </nav>
+ *       <div class="plinth-menu-sheet-account">
+ *         <div class="plinth-list-card">…Settings, Sign out…</div>
+ *       </div>
+ *     </div>
+ *   </div>
+ * </dialog>
+ *
+ * It is a sheet (sheet.css), always data-side="end" data-side-phone="bottom", with no footer;
+ * everything the sheet's contract says holds, and it needs modal.css, sheet.css, list-row.css, list-card.css, avatar.css,
+ * button.css and icon.css. The root's id is required in practice: the header's menu button opens
+ * it with <button commandfor="menu" command="show-modal">, the close button points at it too, and
+ * the dialog and the nav are named by the title, whose id is the root's id with -title.
+ *
+ * The parts, in the body:
+ * - the user row (optional): a list row with a decorative avatar (lg), the name and an optional
+ *   detail (an email or a role); a static <div>, or a link to the profile with a chevron when it
+ *   has an href. The avatar is decorative because the name is printed next to it.
+ * - the nav (always there): a <nav> named by the sheet's title (aria-labelledby), holding list
+ *   cards of link rows, their headings <h3> under the sheet's <h2> title. The app marks the row
+ *   of the page being shown with aria-current="page" (current on the list row) and keeps it up
+ *   to date; the menu remembers nothing.
+ * - the account (optional): a list card of account actions, such as Settings and Sign out (a
+ *   button row; for a form post, a button row with type="submit" and form="…").
+ *
+ * The parts stack with a gap between them. In the full-height side panel the account sits on the
+ * bottom edge (margin-block-start: auto) and rises with the content when the nav is long; the
+ * body scrolls as one.
+ */
+
+@layer plinth {
+  .plinth-menu-sheet .plinth-sheet-body {
+    display: flex;
+    flex-direction: column;
+    gap: var(--plinth-space-5);
+  }
+
+  .plinth-menu-sheet-nav,
+  .plinth-menu-sheet-account {
+    display: flex;
+    flex-direction: column;
+    gap: var(--plinth-space-5);
+  }
+
+  .plinth-menu-sheet-account {
+    margin-block-start: auto;
+  }
+
+  /* The name reads as the row's heading. */
+  .plinth-menu-sheet-user .plinth-list-row-title {
+    font-weight: var(--plinth-font-weight-medium);
+  }
+
+  /* A link to the profile rounds its hover tint like the list cards' corners below it. */
+  a.plinth-menu-sheet-user {
+    border-radius: var(--plinth-radius-container);
+  }
+}
+
+/* modal.css */
+/*
+ * Modal base: what the dialog (dialog.css), the sheet (sheet.css) and the drawer (drawer.css)
+ * share, written once so they can't drift apart (docs/adr/0005): the root's surface and motion,
+ * the backdrop, the scroll lock, the safe areas, the panel and the grab handle, and the header,
+ * title, description, close button, body and footer. It has no markup of its own and no class:
+ * each component keeps its own root and part classes (plinth-dialog, plinth-dialog-panel, …;
+ * plinth-sheet, plinth-sheet-panel, …), listed here in :is(). A page that loads the components
+ * one by one loads modal.css with them.
+ *
+ * The parts sit in a panel, the root's only child:
+ *   <dialog class="plinth-sheet" …>
+ *     <div class="plinth-sheet-panel">
+ *       <div class="plinth-sheet-handle" aria-hidden="true"></div>   (a bottom panel on a phone)
+ *       <div class="plinth-sheet-header">…</div>
+ *       <div class="plinth-sheet-body">…</div>
+ *       <div class="plinth-sheet-footer">…</div>                       (optional)
+ *     </div>
+ *   </dialog>
+ *
+ * The rules sit in a layer inside plinth (plinth.modal), so a component's own rules win over them
+ * whatever the order the files load in, and a project's utilities win over both.
+ *
+ * Each component sets where its root sits and how big it is, and tunes the motion and the safe
+ * area through three custom properties on the root; it never sets translate or opacity itself:
+ * - --plinth-modal-offset: where the root slides in from and back out to (a translate value;
+ *   0 0, the default, is no slide);
+ * - --plinth-modal-closed-opacity: its opacity while it opens and closes (0 fades it, 1, the
+ *   default, doesn't);
+ * - --plinth-modal-safe-area-end: env(safe-area-inset-bottom) when the root reaches the bottom
+ *   edge of the screen, so its last part clears the home indicator; initial (the default) when
+ *   it doesn't.
+ *
+ * The motion runs on the motion tokens, which drop to 0ms under prefers-reduced-motion. While a
+ * modal is open the page under it doesn't scroll (html:has(…:modal)), and it has no scrollbar
+ * gutter (scrollbar-gutter: auto, over a project's stable in an earlier layer): the top layer is
+ * never drawn in the gutter, so a gutter would leave a strip of the page beside a sheet on the end
+ * edge or the full width. Where the scrollbar takes space the page shifts by its width under the
+ * backdrop; overlay scrollbars take no space and nothing shifts. The body scrolls, with
+ * overscroll-behavior: contain; the header and footer stay put; the margins of the body's first and
+ * last child are reset, so its padding is its edge. On a phone the footer's actions share its
+ * width; from 768px up they sit at its end.
+ *
+ * A bottom panel on a phone (a sheet whose side below 768px is the bottom, a dialog with
+ * data-side-phone="bottom" that can be dismissed, and the drawer) has a grab handle, and the
+ * person drags it down to close it. The layers print the handle only there; its presence is what
+ * turns the dragging on, below 768px. Dragging is native scrolling: the root fills the screen and
+ * is a scroll-snap container, see-through, with a spacer as tall as the screen above the panel,
+ * so the browser gives the momentum and the snapping. Without script the handle shows and the
+ * close button and Escape close the panel. What the platform can't do, the layers add (a few
+ * lines, docs/adr/0002 section 6: x-init in Blade, useSwipeToClose in Vue and React):
+ * - on scrollend (scroll where it is missing), when the panel has gone off the bottom edge, they
+ *   call requestClose() (close() where it is missing), so cancel fires first, as for Escape; when
+ *   the app prevents it, the panel goes back to where it opened;
+ * - a tap on the root itself, above the panel, closes it when closedby="any", since the browser
+ *   reads that tap as one on the dialog, not its backdrop;
+ * - on toggle to open, a drawer with data-snap scrolls to that snap point (a browser that fires no
+ *   toggle on a dialog opens it at its largest).
+ * The snapping is the browser's own scrolling, and the layers' scroll is instant.
+ */
+
+@layer plinth {
+  @layer modal {
+    html:has(:is(.plinth-dialog, .plinth-sheet, .plinth-drawer):modal) {
+      overflow: hidden;
+      scrollbar-gutter: auto;
+    }
+
+    :is(.plinth-dialog, .plinth-sheet, .plinth-drawer) {
+      --plinth-modal-offset: 0 0;
+      --plinth-modal-closed-opacity: 1;
+      --plinth-modal-safe-area-end: initial;
+
+      position: fixed;
+      box-sizing: border-box;
+      flex-direction: column;
+      max-inline-size: 100%;
+      padding: 0;
+      overflow: hidden;
+      font-family: var(--plinth-font-family-body);
+      color: var(--plinth-color-text);
+      background-color: var(--plinth-color-surface-raised);
+      border: var(--plinth-border-width-thin) solid var(--plinth-color-border);
+      border-radius: var(--plinth-radius-container);
+      box-shadow: var(--plinth-elevation-3);
+      opacity: var(--plinth-modal-closed-opacity);
+      translate: var(--plinth-modal-offset);
+      transition:
+        translate var(--plinth-duration-normal) var(--plinth-easing-exit),
+        opacity var(--plinth-duration-normal) var(--plinth-easing-exit),
+        overlay var(--plinth-duration-normal) allow-discrete,
+        display var(--plinth-duration-normal) allow-discrete;
+    }
+
+    :is(.plinth-dialog, .plinth-sheet, .plinth-drawer)[open] {
+      display: flex;
+      opacity: 1;
+      translate: 0 0;
+      transition-timing-function: var(--plinth-easing-enter);
+    }
+
+    @starting-style {
+      :is(.plinth-dialog, .plinth-sheet, .plinth-drawer)[open] {
+        opacity: var(--plinth-modal-closed-opacity);
+        translate: var(--plinth-modal-offset);
+      }
+    }
+
+    :is(.plinth-dialog, .plinth-sheet, .plinth-drawer)::backdrop {
+      background-color: var(--plinth-color-overlay);
+      opacity: 0;
+      transition:
+        opacity var(--plinth-duration-normal) var(--plinth-easing-standard),
+        overlay var(--plinth-duration-normal) allow-discrete,
+        display var(--plinth-duration-normal) allow-discrete;
+    }
+
+    :is(.plinth-dialog, .plinth-sheet, .plinth-drawer)[open]::backdrop {
+      opacity: 1;
+    }
+
+    @starting-style {
+      :is(.plinth-dialog, .plinth-sheet, .plinth-drawer)[open]::backdrop {
+        opacity: 0;
+      }
+    }
+
+    /*
+     * The panel holds the parts, the root's only child. It is the column the body scrolls in;
+     * the root is the surface, except for a bottom panel on a phone (below).
+     */
+    :is(.plinth-dialog-panel, .plinth-sheet-panel, .plinth-drawer-panel) {
+      display: flex;
+      flex: 1 1 auto;
+      flex-direction: column;
+      min-block-size: 0;
+      margin: 0;
+    }
+
+    :is(.plinth-dialog-header, .plinth-sheet-header, .plinth-drawer-header) {
+      display: grid;
+      grid-template-columns: minmax(0, 1fr) auto;
+      gap: var(--plinth-space-1) var(--plinth-space-3);
+      align-items: center;
+      padding-block: var(--plinth-space-3);
+      padding-inline: var(--plinth-space-4) var(--plinth-space-3);
+      border-block-end: var(--plinth-border-width-thin) solid var(--plinth-color-divider);
+    }
+
+    /* With no close button, the header's padding is even. */
+    :is(.plinth-dialog-header, .plinth-sheet-header, .plinth-drawer-header):not(
+      :has(> :is(.plinth-dialog-close, .plinth-sheet-close, .plinth-drawer-close))
+    ) {
+      padding-inline-end: var(--plinth-space-4);
+    }
+
+    :is(.plinth-dialog-title, .plinth-sheet-title, .plinth-drawer-title) {
+      grid-column: 1;
+      margin: 0;
+      font-size: var(--plinth-font-size-lg);
+      font-weight: var(--plinth-font-weight-semibold);
+      line-height: var(--plinth-font-leading-tight);
+      letter-spacing: var(--plinth-font-tracking-tight);
+      overflow-wrap: anywhere;
+    }
+
+    :is(.plinth-dialog-description, .plinth-sheet-description, .plinth-drawer-description) {
+      grid-column: 1;
+      margin: 0;
+      font-size: var(--plinth-font-size-sm);
+      line-height: var(--plinth-font-leading-normal);
+      color: var(--plinth-color-text-muted);
+      overflow-wrap: anywhere;
+    }
+
+    :is(.plinth-dialog-close, .plinth-sheet-close, .plinth-drawer-close) {
+      grid-row: 1;
+      grid-column: 2;
+    }
+
+    :is(.plinth-dialog-body, .plinth-sheet-body, .plinth-drawer-body) {
+      flex: 1 1 auto;
+      min-block-size: 0;
+      padding: var(--plinth-space-4);
+      overflow-y: auto;
+      overscroll-behavior: contain;
+      font-size: var(--plinth-font-size-md);
+      line-height: var(--plinth-font-leading-normal);
+    }
+
+    /* The body's padding is its edge: the first and last child's margins don't add to it. */
+    :is(.plinth-dialog-body, .plinth-sheet-body, .plinth-drawer-body) > :first-child {
+      margin-block-start: 0;
+    }
+
+    :is(.plinth-dialog-body, .plinth-sheet-body, .plinth-drawer-body) > :last-child {
+      margin-block-end: 0;
+    }
+
+    /*
+     * A browser can focus a scrolling area that has nothing focusable in it (Chrome and Firefox
+     * do, Safari doesn't yet), so a long body of text only is better with a link or a control in
+     * it.
+     */
+    :is(.plinth-dialog-body, .plinth-sheet-body, .plinth-drawer-body):focus-visible {
+      outline: var(--plinth-focus-ring-width) solid var(--plinth-color-focus-ring);
+      outline-offset: var(--plinth-focus-ring-offset-inset);
+    }
+
+    /* The last part clears the home indicator when the root reaches the bottom edge. */
+    :is(.plinth-dialog-body, .plinth-sheet-body, .plinth-drawer-body):last-child {
+      padding-block-end: max(
+        var(--plinth-space-4),
+        var(--plinth-modal-safe-area-end, var(--plinth-space-4))
+      );
+    }
+
+    :is(.plinth-dialog-footer, .plinth-sheet-footer, .plinth-drawer-footer) {
+      display: flex;
+      flex-wrap: wrap;
+      gap: var(--plinth-space-2);
+      justify-content: flex-end;
+      padding-block: var(--plinth-space-3)
+        max(var(--plinth-space-3), var(--plinth-modal-safe-area-end, var(--plinth-space-3)));
+      padding-inline: var(--plinth-space-4);
+      border-block-start: var(--plinth-border-width-thin) solid var(--plinth-color-divider);
+    }
+
+    /* On a phone the footer's actions share its width. */
+    :is(.plinth-dialog-footer, .plinth-sheet-footer, .plinth-drawer-footer) > * {
+      flex: 1 1 0;
+    }
+
+    /*
+     * A bottom panel on a phone, dragged down to close: a root whose panel holds a handle (the
+     * layers print one only where the panel is on the bottom edge below 768px, and can be
+     * dismissed). The root fills the screen and is a scroll-snap container, see-through; its
+     * ::before is a spacer as tall as the screen above the panel, so scrolling it down is the
+     * panel going off the bottom edge. The flex column runs bottom up (column-reverse), so the
+     * root opens scrolled to its end, with the panel showing. Two snap positions: the panel's
+     * end on the screen's bottom edge (open), and the spacer filling the screen (closed); the
+     * layers close the dialog when the scrolling settles there. The panel is the surface, and the
+     * body hands a swipe on to the root once it is scrolled to its top.
+     */
+    :is(.plinth-dialog, .plinth-sheet, .plinth-drawer):has(
+      > * > :is(.plinth-dialog-handle, .plinth-sheet-handle, .plinth-drawer-handle)
+    ) {
+      flex-direction: column-reverse;
+      overflow-y: auto;
+      overscroll-behavior: contain;
+      scroll-snap-type: y mandatory;
+      scrollbar-width: none;
+      background-color: transparent;
+      box-shadow: none;
+    }
+
+    /* As a scrolling area the root can take focus (Chrome and Firefox), so it shows the ring. */
+    :is(.plinth-dialog, .plinth-sheet, .plinth-drawer):has(
+        > * > :is(.plinth-dialog-handle, .plinth-sheet-handle, .plinth-drawer-handle)
+      ):focus-visible {
+      outline: var(--plinth-focus-ring-width) solid var(--plinth-color-focus-ring);
+      outline-offset: var(--plinth-focus-ring-offset-inset);
+    }
+
+    :is(.plinth-dialog, .plinth-sheet, .plinth-drawer):has(
+        > * > :is(.plinth-dialog-handle, .plinth-sheet-handle, .plinth-drawer-handle)
+      )::before {
+      flex: none;
+      order: 1;
+      block-size: 100%;
+      content: '';
+      scroll-snap-align: start;
+    }
+
+    :is(.plinth-dialog-panel, .plinth-sheet-panel, .plinth-drawer-panel):has(
+      > :is(.plinth-dialog-handle, .plinth-sheet-handle, .plinth-drawer-handle)
+    ) {
+      flex: none;
+      max-block-size: calc(
+        100% - max(var(--plinth-space-12), env(safe-area-inset-top) + var(--plinth-space-4))
+      );
+      padding-inline: max(env(safe-area-inset-left), env(safe-area-inset-right));
+      scroll-snap-align: end;
+      background-color: var(--plinth-color-surface-raised);
+      border-block-start: var(--plinth-border-width-thin) solid var(--plinth-color-border);
+      border-start-start-radius: var(--plinth-radius-container);
+      border-start-end-radius: var(--plinth-radius-container);
+      box-shadow: var(--plinth-elevation-3);
+    }
+
+    /*
+     * The grab handle, a short pill centred at the top; decorative, since Escape and the close
+     * button close the panel too. From 768px up it is hidden.
+     */
+    :is(.plinth-dialog-handle, .plinth-sheet-handle, .plinth-drawer-handle) {
+      display: block;
+      flex: none;
+      align-self: center;
+      inline-size: var(--plinth-space-10);
+      block-size: var(--plinth-space-1);
+      margin-block-start: var(--plinth-space-2);
+      background-color: var(--plinth-color-border-strong);
+      border-radius: var(--plinth-radius-pill);
+    }
+
+    :is(.plinth-dialog-panel, .plinth-sheet-panel, .plinth-drawer-panel):has(
+        > :is(.plinth-dialog-handle, .plinth-sheet-handle, .plinth-drawer-handle)
+      )
+      > :is(.plinth-dialog-body, .plinth-sheet-body, .plinth-drawer-body) {
+      overscroll-behavior: auto;
+    }
+
+    @media (forced-colors: active) {
+      :is(.plinth-dialog-handle, .plinth-sheet-handle, .plinth-drawer-handle) {
+        background-color: CanvasText;
+      }
+    }
+
+    @media (min-width: 768px) {
+      :is(.plinth-dialog-footer, .plinth-sheet-footer, .plinth-drawer-footer) > * {
+        flex: none;
+      }
+
+      /* From 768px up no panel is dragged: the root is the surface again. */
+      :is(.plinth-dialog, .plinth-sheet, .plinth-drawer):has(
+        > * > :is(.plinth-dialog-handle, .plinth-sheet-handle, .plinth-drawer-handle)
+      ) {
+        flex-direction: column;
+        overflow: hidden;
+        overscroll-behavior: auto;
+        scroll-snap-type: none;
+        scrollbar-width: auto;
+        background-color: var(--plinth-color-surface-raised);
+        box-shadow: var(--plinth-elevation-3);
+      }
+
+      :is(.plinth-dialog, .plinth-sheet, .plinth-drawer):has(
+          > * > :is(.plinth-dialog-handle, .plinth-sheet-handle, .plinth-drawer-handle)
+        )::before {
+        content: none;
+      }
+
+      :is(.plinth-dialog-panel, .plinth-sheet-panel, .plinth-drawer-panel):has(
+        > :is(.plinth-dialog-handle, .plinth-sheet-handle, .plinth-drawer-handle)
+      ) {
+        flex: 1 1 auto;
+        max-block-size: none;
+        padding-inline: 0;
+        scroll-snap-align: none;
+        background-color: transparent;
+        border-block-start: 0;
+        border-radius: 0;
+        box-shadow: none;
+      }
+
+      :is(.plinth-dialog-handle, .plinth-sheet-handle, .plinth-drawer-handle) {
+        display: none;
+      }
+
+      :is(.plinth-dialog-panel, .plinth-sheet-panel, .plinth-drawer-panel):has(
+          > :is(.plinth-dialog-handle, .plinth-sheet-handle, .plinth-drawer-handle)
+        )
+        > :is(.plinth-dialog-body, .plinth-sheet-body, .plinth-drawer-body) {
+        overscroll-behavior: contain;
+      }
+    }
+  }
+}
+
+/* pill-row.css */
+/*
+ * Pill row: a row of pills for filters, segments or sub-pages.
+ *
+ * <div class="plinth-pill-row" role="group" aria-label="Status">
+ *   <button type="button" class="plinth-pill" aria-pressed="true">
+ *     <span class="plinth-pill-label">Open</span>
+ *     <span class="plinth-pill-count">12</span>
+ *   </button>
+ *   <button type="button" class="plinth-pill" aria-pressed="false">
+ *     <span class="plinth-pill-label">Closed</span>
+ *   </button>
+ * </div>
+ *
+ * The root is a <div role="group">, named by aria-label (label in Blade and Vue) or by the app's
+ * own aria-labelledby. A row of links that navigates is <nav class="plinth-pill-row"> instead,
+ * with no role (nav in Blade and Vue), and its pills are links:
+ *
+ * <a class="plinth-pill" href="…" aria-current="page"><span class="plinth-pill-label">…</span></a>
+ *
+ * Each pill is its own component (<x-plinth::pill>, PlinthPill), so the app's attributes and
+ * listeners land on the pill (ADR 2). The count is optional. plinth-pill-label has no rule of its
+ * own: it is a hook for a project's styles.
+ *
+ * States, set by the app:
+ * - selected: a button pill always prints aria-pressed, "true" or "false"; a link pill prints
+ *   aria-current="page" for the page being shown. Selected takes the selection tint
+ *   (accent-subtle, accent-text) inside a 2px accent edge (border-width.thick), where the others
+ *   have a 1px neutral one, so colour is not its only cue. A pressed button still answers hover
+ *   and press with a step on the tint (accent-subtle-hover, accent-subtle-active).
+ * - disabled: `disabled` on a <button>; on a link, no href, role="link" and aria-disabled="true".
+ * - hover only where the device can hover; the focus ring on :focus-visible.
+ *
+ * Layout: on a phone the row scrolls sideways, with no visible scrollbar, and snaps to the pills;
+ * from 768px it wraps. The row's padding keeps the focus ring and the 40px touch target of the
+ * pills inside the scrolling area, whatever --plinth-pill-height is (32px by default). A pill is
+ * at least 40px wide.
+ */
+
+@layer plinth {
+  .plinth-pill-row {
+    box-sizing: border-box;
+    display: flex;
+    gap: var(--plinth-space-2);
+    align-items: center;
+    max-inline-size: 100%;
+    padding-block: max(
+      var(--plinth-space-1),
+      (var(--plinth-touch-target) - var(--plinth-pill-height)) / 2
+    );
+    padding-inline: var(--plinth-space-1);
+    margin: 0;
+    overflow-x: auto;
+    overscroll-behavior-inline: contain;
+    scroll-snap-type: inline proximity;
+    scroll-padding-inline: var(--plinth-space-1);
+    scrollbar-width: none;
+  }
+
+  .plinth-pill {
+    position: relative;
+    box-sizing: border-box;
+    display: inline-flex;
+    flex: none;
+    gap: var(--plinth-space-2);
+    align-items: center;
+    justify-content: center;
+    min-inline-size: var(--plinth-touch-target);
+    min-block-size: var(--plinth-pill-height);
+    padding-block: 0;
+    padding-inline: var(--plinth-space-3);
+    margin: 0;
+    font-family: var(--plinth-font-family-body);
+    font-size: var(--plinth-font-size-sm);
+    font-weight: var(--plinth-font-weight-medium);
+    line-height: var(--plinth-font-leading-tight);
+    color: var(--plinth-color-text);
+    white-space: nowrap;
+    text-decoration: none;
+    cursor: pointer;
+    user-select: none;
+    scroll-snap-align: start;
+    background-color: transparent;
+    border: var(--plinth-border-width-thin) solid var(--plinth-color-border-strong);
+    border-radius: var(--plinth-radius-pill);
+    transition:
+      background-color var(--plinth-duration-fast) var(--plinth-easing-standard),
+      border-color var(--plinth-duration-fast) var(--plinth-easing-standard),
+      box-shadow var(--plinth-duration-fast) var(--plinth-easing-standard),
+      color var(--plinth-duration-fast) var(--plinth-easing-standard);
+  }
+
+  /* A 40px touch target through an invisible hit area, as on the button (ADR 3). */
+  @media (pointer: coarse) {
+    .plinth-pill::before {
+      position: absolute;
+      inset-block-start: 50%;
+      inset-inline: 0;
+      block-size: max(100%, var(--plinth-touch-target));
+      content: '';
+      translate: 0 -50%;
+    }
+  }
+
+  @media (hover: hover) {
+    a.plinth-pill[href]:not([aria-current='page']):hover,
+    button.plinth-pill:enabled:not([aria-pressed='true']):hover {
+      background-color: var(--plinth-color-surface-hover);
+    }
+  }
+
+  a.plinth-pill[href]:not([aria-current='page']):active,
+  button.plinth-pill:enabled:not([aria-pressed='true']):active {
+    background-color: var(--plinth-color-surface-sunken);
+  }
+
+  /* The border and an inset ring make the 2px edge, so selecting doesn't move the label. */
+  .plinth-pill:is([aria-pressed='true'], [aria-current='page']) {
+    color: var(--plinth-color-accent-text);
+    background-color: var(--plinth-color-accent-subtle);
+    border-color: var(--plinth-color-accent);
+    box-shadow: inset 0 0 0 calc(var(--plinth-border-width-thick) - var(--plinth-border-width-thin))
+      var(--plinth-color-accent);
+  }
+
+  /*
+   * A pressed button can be pressed again, so it answers hover and press with a step on the tint.
+   * Not in forced colours, where the tint would replace the system highlight under the label.
+   */
+  @media (hover: hover) and (forced-colors: none) {
+    button.plinth-pill:enabled[aria-pressed='true']:hover {
+      background-color: var(--plinth-color-accent-subtle-hover);
+    }
+  }
+
+  @media (forced-colors: none) {
+    button.plinth-pill:enabled[aria-pressed='true']:active {
+      background-color: var(--plinth-color-accent-subtle-active);
+    }
+  }
+
+  .plinth-pill:disabled,
+  .plinth-pill[aria-disabled='true'] {
+    cursor: not-allowed;
+    opacity: var(--plinth-opacity-disabled);
+  }
+
+  .plinth-pill:focus-visible {
+    outline: var(--plinth-focus-ring-width) solid var(--plinth-color-focus-ring);
+    outline-offset: var(--plinth-focus-ring-offset);
+  }
+
+  /* A gap between the ring and the accent edge, so focus and selection read apart. */
+  .plinth-pill:is([aria-pressed='true'], [aria-current='page']):focus-visible {
+    outline-offset: var(--plinth-focus-ring-offset-filled);
+  }
+
+  .plinth-pill-count {
+    font-weight: var(--plinth-font-weight-regular);
+    font-variant-numeric: tabular-nums;
+    color: var(--plinth-color-text-muted);
+  }
+
+  .plinth-pill:is([aria-pressed='true'], [aria-current='page']) .plinth-pill-count {
+    color: inherit;
+  }
+
+  /* Wider screens have room: the pills wrap onto more lines instead of scrolling. */
+  @media (min-width: 768px) {
+    .plinth-pill-row {
+      flex-wrap: wrap;
+      overflow-x: visible;
+    }
+  }
+
+  @media (forced-colors: active) {
+    .plinth-pill {
+      border-color: ButtonText;
+    }
+
+    .plinth-pill:is([aria-pressed='true'], [aria-current='page']) {
+      color: HighlightText;
+      background-color: Highlight;
+      border-color: Highlight;
+    }
+
+    .plinth-pill:is([aria-pressed='true'], [aria-current='page']) .plinth-pill-count {
+      color: HighlightText;
+    }
+
+    .plinth-pill:disabled,
+    .plinth-pill[aria-disabled='true'] {
+      color: GrayText;
+      background-color: Canvas;
+      border-color: GrayText;
+    }
+  }
+}
+
+/* section-menu.css */
+/*
+ * Section menu: the row under the header that switches between the sections of a page.
+ *
+ * <nav class="plinth-section-menu" aria-label="Project">
+ *   <a class="plinth-section-menu-item" href="/overview" aria-current="page">
+ *     <span class="plinth-section-menu-label">Overview</span>
+ *   </a>
+ *   <a class="plinth-section-menu-item" href="/tasks">
+ *     <span class="plinth-section-menu-label">Tasks</span>
+ *     <span class="plinth-section-menu-count">8</span>
+ *   </a>
+ * </nav>
+ *
+ * The root is a <nav>, named by aria-label (label in Blade and Vue) or by the app's own
+ * aria-labelledby, so it reads apart from the page's other navigation. Its items are links. A
+ * menu that switches views in place, without navigating, has buttons instead, and its root is
+ * <div class="plinth-section-menu" role="group"> (nav set to false in Blade and Vue):
+ *
+ * <button type="button" class="plinth-section-menu-item" aria-pressed="true">…</button>
+ *
+ * Each item is its own component (<x-plinth::section-menu-item>, PlinthSectionMenuItem), so the
+ * app's attributes and listeners land on the item (ADR 2). The count is optional.
+ * plinth-section-menu-label has no rule of its own: it is a hook for a project's styles.
+ *
+ * States, set by the app:
+ * - current: a link prints aria-current="page" for the section being shown; a button always
+ *   prints aria-pressed, "true" or "false". The current item takes the selection tint
+ *   (accent-subtle, accent-text) inside a 2px accent edge (border-width.thick), so colour is not
+ *   its only cue; the others are muted text on no surface, like a ghost button. A pressed button
+ *   still answers hover and press with a step on the tint (accent-subtle-hover,
+ *   accent-subtle-active).
+ * - disabled: `disabled` on a <button>; on a link, no href, role="link" and aria-disabled="true".
+ * - hover only where the device can hover; the focus ring on :focus-visible.
+ *
+ * Layout: a row --plinth-section-menu-height (56px) tall, on the surface with a divider below,
+ * the same inline padding as the header and clear of the notch on a phone held sideways. Its
+ * items are --plinth-section-menu-item-height (40px) tall, never less than the 40px touch
+ * target, and at least 40px wide. The row never wraps: when the items don't fit it scrolls
+ * sideways and snaps to them, with a thin scrollbar for a mouse and none on a touch screen; the
+ * row's block padding keeps the focus ring inside it. The app scrolls a current item that starts
+ * out of view into view.
+ * Placement is the app's: put it under the header, or make it sticky below it with
+ * position: sticky, inset-block-start: calc(var(--plinth-header-height) +
+ * env(safe-area-inset-top)) and z-index: var(--plinth-layer-sticky).
+ */
+
+@layer plinth {
+  .plinth-section-menu {
+    box-sizing: border-box;
+    display: flex;
+    gap: var(--plinth-space-1);
+    align-items: center;
+    min-block-size: var(--plinth-section-menu-height);
+
+    /* What the item and the divider leave of the row's height, so the row is exactly its token. */
+    padding-block: calc(
+      (
+          var(--plinth-section-menu-height) - var(--plinth-section-menu-item-height) -
+            var(--plinth-border-width-thin)
+        ) /
+        2
+    );
+    padding-inline: max(var(--plinth-space-2), env(safe-area-inset-left))
+      max(var(--plinth-space-2), env(safe-area-inset-right));
+    margin: 0;
+    overflow-x: auto;
+    overscroll-behavior-inline: contain;
+    font-family: var(--plinth-font-family-body);
+    scroll-snap-type: inline proximity;
+    scroll-padding-inline: max(var(--plinth-space-2), env(safe-area-inset-left))
+      max(var(--plinth-space-2), env(safe-area-inset-right));
+    scrollbar-width: none;
+    background-color: var(--plinth-color-surface);
+    border-block-end: var(--plinth-border-width-thin) solid var(--plinth-color-divider);
+  }
+
+  .plinth-section-menu:dir(rtl) {
+    padding-inline: max(var(--plinth-space-2), env(safe-area-inset-right))
+      max(var(--plinth-space-2), env(safe-area-inset-left));
+    scroll-padding-inline: max(var(--plinth-space-2), env(safe-area-inset-right))
+      max(var(--plinth-space-2), env(safe-area-inset-left));
+  }
+
+  /* A mouse without a sideways wheel needs a scrollbar to reach the items that don't fit. */
+  @media (hover: hover) and (pointer: fine) {
+    .plinth-section-menu {
+      scrollbar-width: thin;
+    }
+  }
+
+  .plinth-section-menu-item {
+    box-sizing: border-box;
+    display: inline-flex;
+    flex: none;
+    gap: var(--plinth-space-2);
+    align-items: center;
+    justify-content: center;
+    min-inline-size: var(--plinth-touch-target);
+    min-block-size: max(var(--plinth-section-menu-item-height), var(--plinth-touch-target));
+    padding-block: 0;
+    padding-inline: var(--plinth-space-3);
+    margin: 0;
+    font-family: inherit;
+    font-size: var(--plinth-font-size-md);
+    font-weight: var(--plinth-font-weight-medium);
+    line-height: var(--plinth-font-leading-tight);
+    color: var(--plinth-color-text-muted);
+    white-space: nowrap;
+    text-decoration: none;
+    cursor: pointer;
+    user-select: none;
+    scroll-snap-align: start;
+    background-color: transparent;
+    border: var(--plinth-border-width-thin) solid transparent;
+    border-radius: var(--plinth-radius-control);
+    transition:
+      background-color var(--plinth-duration-fast) var(--plinth-easing-standard),
+      border-color var(--plinth-duration-fast) var(--plinth-easing-standard),
+      box-shadow var(--plinth-duration-fast) var(--plinth-easing-standard),
+      color var(--plinth-duration-fast) var(--plinth-easing-standard);
+  }
+
+  @media (hover: hover) {
+    a.plinth-section-menu-item[href]:not([aria-current='page']):hover,
+    button.plinth-section-menu-item:enabled:not([aria-pressed='true']):hover {
+      color: var(--plinth-color-text);
+      background-color: var(--plinth-color-surface-hover);
+    }
+  }
+
+  a.plinth-section-menu-item[href]:not([aria-current='page']):active,
+  button.plinth-section-menu-item:enabled:not([aria-pressed='true']):active {
+    color: var(--plinth-color-text);
+    background-color: var(--plinth-color-surface-sunken);
+  }
+
+  /* The border and an inset ring make the 2px edge, so selecting doesn't move the label. */
+  .plinth-section-menu-item:is([aria-pressed='true'], [aria-current='page']) {
+    color: var(--plinth-color-accent-text);
+    background-color: var(--plinth-color-accent-subtle);
+    border-color: var(--plinth-color-accent);
+    box-shadow: inset 0 0 0 calc(var(--plinth-border-width-thick) - var(--plinth-border-width-thin))
+      var(--plinth-color-accent);
+  }
+
+  /*
+   * A pressed button can be pressed again, so it answers hover and press with a step on the tint.
+   * Not in forced colours, where the tint would replace the system highlight under the label.
+   */
+  @media (hover: hover) and (forced-colors: none) {
+    button.plinth-section-menu-item:enabled[aria-pressed='true']:hover {
+      background-color: var(--plinth-color-accent-subtle-hover);
+    }
+  }
+
+  @media (forced-colors: none) {
+    button.plinth-section-menu-item:enabled[aria-pressed='true']:active {
+      background-color: var(--plinth-color-accent-subtle-active);
+    }
+  }
+
+  .plinth-section-menu-item:disabled,
+  .plinth-section-menu-item[aria-disabled='true'] {
+    cursor: not-allowed;
+    opacity: var(--plinth-opacity-disabled);
+  }
+
+  .plinth-section-menu-item:focus-visible {
+    outline: var(--plinth-focus-ring-width) solid var(--plinth-color-focus-ring);
+    outline-offset: var(--plinth-focus-ring-offset);
+  }
+
+  /* A gap between the ring and the accent edge, so focus and selection read apart. */
+  .plinth-section-menu-item:is([aria-pressed='true'], [aria-current='page']):focus-visible {
+    outline-offset: var(--plinth-focus-ring-offset-filled);
+  }
+
+  .plinth-section-menu-count {
+    font-family: var(--plinth-font-family-mono);
+    font-size: var(--plinth-font-size-xs);
+    font-weight: var(--plinth-font-weight-regular);
+    font-variant-numeric: tabular-nums;
+    color: var(--plinth-color-text-muted);
+  }
+
+  .plinth-section-menu-item:is([aria-pressed='true'], [aria-current='page'])
+    .plinth-section-menu-count {
+    color: inherit;
+  }
+
+  @media (min-width: 768px) {
+    .plinth-section-menu {
+      padding-inline: max(var(--plinth-space-4), env(safe-area-inset-left))
+        max(var(--plinth-space-4), env(safe-area-inset-right));
+      scroll-padding-inline: max(var(--plinth-space-4), env(safe-area-inset-left))
+        max(var(--plinth-space-4), env(safe-area-inset-right));
+    }
+
+    .plinth-section-menu:dir(rtl) {
+      padding-inline: max(var(--plinth-space-4), env(safe-area-inset-right))
+        max(var(--plinth-space-4), env(safe-area-inset-left));
+      scroll-padding-inline: max(var(--plinth-space-4), env(safe-area-inset-right))
+        max(var(--plinth-space-4), env(safe-area-inset-left));
+    }
+  }
+
+  /* The current item is only a surface tint: in forced colours it takes the system highlight. */
+  @media (forced-colors: active) {
+    .plinth-section-menu-item:is([aria-pressed='true'], [aria-current='page']) {
+      color: HighlightText;
+      background-color: Highlight;
+      border-color: Highlight;
+    }
+
+    .plinth-section-menu-item:is([aria-pressed='true'], [aria-current='page'])
+      .plinth-section-menu-count {
+      color: HighlightText;
+    }
+
+    .plinth-section-menu-item:disabled,
+    .plinth-section-menu-item[aria-disabled='true'] {
+      color: GrayText;
+    }
+  }
+}
+
+/* sheet.css */
+/*
+ * Sheet: a modal panel on the edge of the screen the developer picks, for filters, side
+ * information or navigation. Optionally on another edge below 768px.
+ *
+ * <dialog id="filters" class="plinth-sheet" data-side="end" data-side-phone="bottom"
+ *   closedby="any" aria-labelledby="filters-title" aria-describedby="filters-description">
+ *   <div class="plinth-sheet-panel">
+ *     <div class="plinth-sheet-handle" aria-hidden="true"></div>
+ *     <div class="plinth-sheet-header">
+ *       <h2 id="filters-title" class="plinth-sheet-title">Filters</h2>
+ *       <p id="filters-description" class="plinth-sheet-description">Narrow the list down.</p>
+ *       <button type="button" class="plinth-button plinth-icon-button plinth-sheet-close"
+ *         data-variant="ghost" data-size="md" aria-label="Close" commandfor="filters"
+ *         command="close">
+ *         <span class="plinth-icon" data-size="md" aria-hidden="true"><svg>…</svg></span>
+ *       </button>
+ *     </div>
+ *     <div class="plinth-sheet-body">…</div>
+ *     <div class="plinth-sheet-footer">…</div>
+ *   </div>
+ * </dialog>
+ *
+ * The root is the <dialog>, and it needs an id: commandfor and aria-labelledby point at it, and
+ * the title's and description's ids are the root's id with -title and -description. The panel is
+ * the root's only child and holds the parts. The handle is there only where the sheet's side on a
+ * phone is the bottom (data-side="bottom" with no data-side-phone, or data-side-phone="bottom"):
+ * decorative (aria-hidden), shown below 768px, where the sheet is dragged down to close
+ * (modal.css). The title is
+ * required; the description (and its aria-describedby) and the footer are optional. The close
+ * button is an icon button (button.css and icon.css) and is always there: closedby="any" (tap the
+ * backdrop) is an enhancement Safari doesn't have yet. A project may set closedby="closerequest"
+ * on a sheet that must not close on a stray tap.
+ *
+ * Open it with showModal() or a <button commandfor="filters" command="show-modal">. Open is the
+ * native state, [open]; the browser puts the sheet in the top layer, makes the page inert, traps
+ * focus, closes on Escape and returns focus. The dialog fires close when it closes. For a modal
+ * centred on the screen, use the dialog (dialog.css).
+ *
+ * Side (data-side), at every width: end (default, also when missing or unknown) and start are
+ * full-height panels on the inline-end and inline-start edges, sheet.side-width wide and at
+ * most the screen's width less a gap, so the page shows beside them; top and bottom are the
+ * screen's width on the top and bottom edges, as tall as their content up to the screen's height
+ * less a gap that also clears the safe area at the other edge. The sides are logical: in
+ * right-to-left text end is the left edge and start the right.
+ *
+ * Side on a phone (data-side-phone, optional): the side below 768px, one of the same four; from
+ * 768px up data-side holds. data-side="end" data-side-phone="bottom" is a side panel on a tablet
+ * or desktop and a bottom sheet on a phone. Leave it out to keep data-side at every width. It
+ * takes only those four values: any other makes the phone's side end (the layers never print
+ * one, and leave the attribute out instead).
+ *
+ * The edge the sheet sits on has no border or radius; the edge facing the page has a hairline
+ * (in forced colours too), and a top or bottom sheet rounds the corners facing the page. Each
+ * side clears the safe areas it touches (the notch, the status bar and the home indicator, with
+ * viewport-fit=cover).
+ *
+ * The description is a secondary line, at the size of a list row's description.
+ *
+ * The surface, the backdrop, the scroll lock, the motion, the safe areas and the parts come from
+ * the modal base (modal.css), which the dialog shares; load it with this file. The body scrolls,
+ * the header and footer stay put, and the page under an open sheet doesn't scroll. The sheet
+ * slides in from its edge and back out on the motion tokens, which drop to 0ms under
+ * prefers-reduced-motion. This file sets only where the sheet sits and how big it is.
+ *
+ * A sheet on the bottom edge has its height capped by 100dvh, which clears the home indicator
+ * (env(safe-area-inset-bottom)) but not, on its own, the on-screen keyboard: iOS lays the
+ * keyboard over the page. A page with a form in a sheet sets
+ * <meta name="viewport" content="width=device-width, initial-scale=1, interactive-widget=resizes-content">
+ * where the browser supports it, and keeps the sheet's fields near its top.
+ *
+ * In Livewire, a re-render would morph the open dialog back to the server's markup and drop its
+ * open attribute: put wire:ignore.self on the sheet (or keep it outside the component that
+ * re-renders), and always pass an id, since a generated one changes on every render.
+ */
+
+@layer plinth {
+  /*
+   * The end side, the default. The sides are written twice: as the phone's side (data-side-phone,
+   * or data-side without it), and from 768px up as data-side again for a sheet with
+   * data-side-phone. The phone's rules use :where() so the later ones win on order alone.
+   */
+  .plinth-sheet {
+    /* Translate isn't logical: -1 (under :dir(rtl), below) turns the slide around. */
+    --plinth-sheet-direction: 1;
+    --plinth-sheet-safe-area-inline-start: env(safe-area-inset-left);
+    --plinth-sheet-safe-area-inline-end: env(safe-area-inset-right);
+    --plinth-modal-offset: calc(100% * var(--plinth-sheet-direction)) 0;
+    --plinth-modal-safe-area-end: env(safe-area-inset-bottom);
+
+    inset-block: 0;
+    inset-inline: auto 0;
+    inline-size: min(100% - var(--plinth-space-12), var(--plinth-sheet-side-width));
+    block-size: auto;
+    max-block-size: none;
+    padding-block: env(safe-area-inset-top) 0;
+    padding-inline: 0 var(--plinth-sheet-safe-area-inline-end);
+    margin: 0;
+    border-width: 0;
+    border-inline-start-width: var(--plinth-border-width-thin);
+    border-radius: 0;
+  }
+
+  .plinth-sheet:where([data-side='start']:not([data-side-phone]), [data-side-phone='start']) {
+    --plinth-modal-offset: calc(-100% * var(--plinth-sheet-direction)) 0;
+
+    inset-block: 0;
+    inset-inline: 0 auto;
+    inline-size: min(100% - var(--plinth-space-12), var(--plinth-sheet-side-width));
+    max-block-size: none;
+    padding-block: env(safe-area-inset-top) 0;
+    padding-inline: var(--plinth-sheet-safe-area-inline-start) 0;
+    border-width: 0;
+    border-inline-end-width: var(--plinth-border-width-thin);
+    border-radius: 0;
+  }
+
+  .plinth-sheet:where([data-side='top']:not([data-side-phone]), [data-side-phone='top']) {
+    --plinth-modal-offset: 0 -100%;
+    --plinth-modal-safe-area-end: initial;
+
+    inset-block: 0 auto;
+    inset-inline: 0;
+    inline-size: 100%;
+    max-block-size: calc(
+      100dvh - max(var(--plinth-space-12), env(safe-area-inset-bottom) + var(--plinth-space-4))
+    );
+    padding-block: env(safe-area-inset-top) 0;
+    padding-inline: var(--plinth-sheet-safe-area-inline-start)
+      var(--plinth-sheet-safe-area-inline-end);
+    border-width: 0;
+    border-block-end-width: var(--plinth-border-width-thin);
+    border-radius: 0;
+    border-end-start-radius: var(--plinth-radius-container);
+    border-end-end-radius: var(--plinth-radius-container);
+  }
+
+  .plinth-sheet:where([data-side='bottom']:not([data-side-phone]), [data-side-phone='bottom']) {
+    --plinth-modal-offset: 0 100%;
+
+    inset-block: auto 0;
+    inset-inline: 0;
+    inline-size: 100%;
+    max-block-size: calc(
+      100dvh - max(var(--plinth-space-12), env(safe-area-inset-top) + var(--plinth-space-4))
+    );
+    padding-block: 0;
+    padding-inline: var(--plinth-sheet-safe-area-inline-start)
+      var(--plinth-sheet-safe-area-inline-end);
+    border-width: 0;
+    border-block-start-width: var(--plinth-border-width-thin);
+    border-radius: 0;
+    border-start-start-radius: var(--plinth-radius-container);
+    border-start-end-radius: var(--plinth-radius-container);
+  }
+
+  /*
+   * With its grab handle, a bottom sheet on a phone is dragged down to close (modal.css): the root
+   * fills the screen, see-through, and its panel is the surface, as tall as its content up to the
+   * screen's height less a gap.
+   */
+  .plinth-sheet:where([data-side='bottom']:not([data-side-phone]), [data-side-phone='bottom']):has(
+      > * > .plinth-sheet-handle
+    ) {
+    inset: 0;
+    max-block-size: none;
+    padding: 0;
+    border-width: 0;
+    border-radius: 0;
+  }
+
+  /* Right-to-left text turns the slide around and swaps the safe areas. */
+  .plinth-sheet:dir(rtl) {
+    --plinth-sheet-direction: -1;
+    --plinth-sheet-safe-area-inline-start: env(safe-area-inset-right);
+    --plinth-sheet-safe-area-inline-end: env(safe-area-inset-left);
+  }
+
+  @media (min-width: 768px) {
+    .plinth-sheet[data-side-phone] {
+      --plinth-modal-offset: calc(100% * var(--plinth-sheet-direction)) 0;
+      --plinth-modal-safe-area-end: env(safe-area-inset-bottom);
+
+      inset-block: 0;
+      inset-inline: auto 0;
+      inline-size: min(100% - var(--plinth-space-12), var(--plinth-sheet-side-width));
+      max-block-size: none;
+      padding-block: env(safe-area-inset-top) 0;
+      padding-inline: 0 var(--plinth-sheet-safe-area-inline-end);
+      border-width: 0;
+      border-inline-start-width: var(--plinth-border-width-thin);
+      border-radius: 0;
+    }
+
+    .plinth-sheet[data-side-phone][data-side='start'] {
+      --plinth-modal-offset: calc(-100% * var(--plinth-sheet-direction)) 0;
+
+      inset-inline: 0 auto;
+      padding-inline: var(--plinth-sheet-safe-area-inline-start) 0;
+      border-inline-start-width: 0;
+      border-inline-end-width: var(--plinth-border-width-thin);
+    }
+
+    .plinth-sheet[data-side-phone][data-side='top'] {
+      --plinth-modal-offset: 0 -100%;
+      --plinth-modal-safe-area-end: initial;
+
+      inset-block: 0 auto;
+      inset-inline: 0;
+      inline-size: 100%;
+      max-block-size: calc(
+        100dvh - max(var(--plinth-space-12), env(safe-area-inset-bottom) + var(--plinth-space-4))
+      );
+      padding-inline: var(--plinth-sheet-safe-area-inline-start)
+        var(--plinth-sheet-safe-area-inline-end);
+      border-block-end-width: var(--plinth-border-width-thin);
+      border-inline-start-width: 0;
+      border-end-start-radius: var(--plinth-radius-container);
+      border-end-end-radius: var(--plinth-radius-container);
+    }
+
+    .plinth-sheet[data-side='bottom'] {
+      --plinth-modal-offset: 0 100%;
+
+      inset-block: auto 0;
+      inset-inline: 0;
+      inline-size: 100%;
+      max-block-size: calc(
+        100dvh - max(var(--plinth-space-12), env(safe-area-inset-top) + var(--plinth-space-4))
+      );
+      padding-block: 0;
+      padding-inline: var(--plinth-sheet-safe-area-inline-start)
+        var(--plinth-sheet-safe-area-inline-end);
+      border-block-start-width: var(--plinth-border-width-thin);
+      border-inline-start-width: 0;
+      border-start-start-radius: var(--plinth-radius-container);
+      border-start-end-radius: var(--plinth-radius-container);
+    }
+  }
+}