@lutra-ui-system/react 0.1.0

package/dist/styles.css

@@ -0,0 +1,3474 @@
+/*
+ * @lutra-ui-system/react stylesheet.
+ *
+ * Plain, standards-based CSS shipped as a single file. Consumers import it once:
+ *
+ *   import '@lutra-ui-system/react/styles.css';
+ *
+ * This file is the source-side entry point and is composed with plain `@import`.
+ * The build inlines those imports, so what ships in `dist/styles.css` is one flat
+ * stylesheet with no `@import` left in it. That matters: a distributed stylesheet
+ * that still contained `@import` would either need the consumer's bundler to
+ * resolve it or would cost a second network request, and neither is something a
+ * library should require. See `scripts/build-styles.mjs`.
+ *
+ * The file has two layers, and the order matters:
+ *
+ * 1. The generated token layer, which declares every Lutra design token as a CSS
+ *    custom property on `:root`, plus the dark values on `[data-theme='dark']`.
+ *    It is produced from `tokens/source.json` and is not hand-edited.
+ * 2. One file per component, which reads those tokens and never a raw value.
+ *
+ * Rules for anything added here:
+ * - Every selector is prefixed with `lutra-`, so the library cannot collide with
+ *   a consuming application's styles.
+ * - The only global selectors permitted are the token layer's `:root` and
+ *   `[data-theme]` blocks, and they declare custom properties and nothing else.
+ *   A declaration that paints — a colour, a font, a margin on `body` — must never
+ *   appear on a global selector: a library stylesheet does not get to restyle a
+ *   page it was merely imported into. See `docs/decisions/0002-design-tokens.md`.
+ * - No component rule may reach for `:root`, an element selector, or `*`.
+ * - Sizes use `rem` and unitless line heights, so the library respects the user's
+ *   browser font size and keeps working under zoom. Border and outline widths are
+ *   the exception and stay in `px`; see the unit policy in `docs/design-tokens.md`.
+ * - No rule may convey state through colour alone.
+ * - Text must be allowed to wrap rather than overflow or clip.
+ */
+
+/*
+ * GENERATED FILE — DO NOT EDIT.
+ *
+ * Produced by `scripts/generate-tokens.mjs` from `src/tokens/source.json`.
+ * Change a value in `source.json` and regenerate; an edit here is overwritten by the next build
+ * and is caught by the drift check in `src/tokens/tokens.test.ts`.
+ *
+ * See `docs/design-tokens.md` for the naming rule, the unit policy, and the theme contract.
+ */
+:root {
+  /* Lutra Theme */
+  --lutra-color-background-canvas: #f5f7fa;
+  --lutra-color-background-disabled: #e5e7eb;
+  --lutra-color-background-elevated: #ffffff;
+  --lutra-color-background-subtle: #f5f7fa;
+  --lutra-color-background-subtle-active: #dfe5ed;
+  --lutra-color-background-subtle-hover: #eaeef4;
+  --lutra-color-background-surface: #ffffff;
+  --lutra-color-background-transparent: #ffffff00;
+  --lutra-color-border-default: #d0d7de;
+  --lutra-color-border-disabled: #d1d5db;
+  --lutra-color-border-strong: #7f8896;
+  --lutra-color-border-subtle: #e8ecf2;
+  --lutra-color-border-transparent: #ffffff00;
+  --lutra-color-brand-primary: #3265d3;
+  --lutra-color-brand-primary-active: #1f4087;
+  --lutra-color-brand-primary-hover: #2852ac;
+  --lutra-color-feedback-danger: #d14343;
+  --lutra-color-feedback-danger-active: #942c2c;
+  --lutra-color-feedback-danger-hover: #b33636;
+  --lutra-color-feedback-danger-text: #c73f3f;
+  --lutra-color-focus-ring: #3f7cff;
+  --lutra-color-icon-default: var(--lutra-color-text-primary);
+  --lutra-color-link-text: var(--lutra-color-brand-primary);
+  --lutra-color-text-disabled: #9ca3af;
+  --lutra-color-text-inverse: #ffffff;
+  --lutra-color-text-muted: #6b7280;
+  --lutra-color-text-on-brand: #ffffff;
+  --lutra-color-text-on-danger: #ffffff;
+  --lutra-color-text-primary: #111827;
+  --lutra-color-text-secondary: #6b7280;
+  --lutra-component-button-danger-border: var(--lutra-color-feedback-danger);
+  --lutra-component-button-danger-surface: var(--lutra-color-feedback-danger);
+  --lutra-component-button-danger-surface-active: var(--lutra-color-feedback-danger-active);
+  --lutra-component-button-danger-surface-hover: var(--lutra-color-feedback-danger-hover);
+  --lutra-component-button-danger-text: var(--lutra-color-text-on-danger);
+  --lutra-component-button-disabled-border: var(--lutra-color-border-disabled);
+  --lutra-component-button-disabled-surface: var(--lutra-color-background-disabled);
+  --lutra-component-button-disabled-text: var(--lutra-color-text-disabled);
+  --lutra-component-button-focus: var(--lutra-color-focus-ring);
+  --lutra-component-button-primary-border: var(--lutra-color-brand-primary);
+  --lutra-component-button-primary-surface: var(--lutra-color-brand-primary);
+  --lutra-component-button-primary-surface-active: var(--lutra-color-brand-primary-active);
+  --lutra-component-button-primary-surface-hover: var(--lutra-color-brand-primary-hover);
+  --lutra-component-button-primary-text: var(--lutra-color-text-on-brand);
+  --lutra-component-button-secondary-border: var(--lutra-color-border-strong);
+  --lutra-component-button-secondary-surface: var(--lutra-color-background-subtle);
+  --lutra-component-button-secondary-surface-active: var(--lutra-color-background-subtle-active);
+  --lutra-component-button-secondary-surface-hover: var(--lutra-color-background-subtle-hover);
+  --lutra-component-button-secondary-text: var(--lutra-color-text-primary);
+  --lutra-component-checkbox-border-default: var(--lutra-component-input-border-default);
+  --lutra-component-checkbox-border-disabled: var(--lutra-color-border-disabled);
+  --lutra-component-checkbox-border-hover: var(--lutra-component-input-border-hover);
+  --lutra-component-checkbox-border-invalid: var(--lutra-component-input-border-invalid);
+  --lutra-component-checkbox-description: var(--lutra-color-text-secondary);
+  --lutra-component-checkbox-error-text: var(--lutra-component-field-error-text);
+  --lutra-component-checkbox-fill-disabled: var(--lutra-color-background-disabled);
+  --lutra-component-checkbox-fill-invalid: var(--lutra-color-feedback-danger);
+  --lutra-component-checkbox-fill-selected: var(--lutra-color-brand-primary);
+  --lutra-component-checkbox-fill-selected-hover: var(--lutra-color-brand-primary-hover);
+  --lutra-component-checkbox-label: var(--lutra-color-text-primary);
+  --lutra-component-checkbox-mark: var(--lutra-color-text-on-brand);
+  --lutra-component-checkbox-mark-on-danger: var(--lutra-color-text-on-danger);
+  --lutra-component-checkbox-surface: var(--lutra-color-background-surface);
+  --lutra-component-checkbox-text-disabled: var(--lutra-color-text-disabled);
+  --lutra-component-content-accent: var(--lutra-color-brand-primary);
+  --lutra-component-content-body: var(--lutra-color-text-secondary);
+  --lutra-component-content-border: var(--lutra-color-border-default);
+  --lutra-component-content-icon: var(--lutra-color-icon-default);
+  --lutra-component-content-surface: var(--lutra-color-background-surface);
+  --lutra-component-content-surface-subtle: var(--lutra-color-background-subtle);
+  --lutra-component-content-title: var(--lutra-color-text-primary);
+  --lutra-component-field-error-text: var(--lutra-color-feedback-danger-text);
+  --lutra-component-input-border-default: var(--lutra-color-border-strong);
+  --lutra-component-input-border-focus: var(--lutra-color-focus-ring);
+  --lutra-component-input-border-hover: var(--lutra-color-brand-primary-hover);
+  --lutra-component-input-border-invalid: var(--lutra-color-feedback-danger);
+  --lutra-component-input-placeholder: var(--lutra-color-text-secondary);
+  --lutra-component-input-surface: var(--lutra-color-background-surface);
+  --lutra-component-input-text: var(--lutra-color-text-primary);
+  --lutra-component-link-text-default: var(--lutra-color-link-text);
+  --lutra-component-link-text-focus: var(--lutra-color-link-text);
+  --lutra-component-link-text-hover: var(--lutra-color-link-text);
+  --lutra-component-link-text-visited: var(--lutra-color-text-secondary);
+  --lutra-component-menu-border: var(--lutra-component-input-border-default);
+  --lutra-component-menu-divider: var(--lutra-component-input-border-default);
+  --lutra-component-menu-item-danger: var(--lutra-component-field-error-text);
+  --lutra-component-menu-item-hover: var(--lutra-color-background-subtle);
+  --lutra-component-menu-item-text: var(--lutra-color-text-primary);
+  --lutra-component-menu-surface: var(--lutra-color-background-elevated);
+  --lutra-component-modal-body: var(--lutra-color-text-secondary);
+  --lutra-component-modal-border: var(--lutra-component-input-border-default);
+  --lutra-component-modal-divider: var(--lutra-component-input-border-default);
+  --lutra-component-modal-scrim: #0f172aa3;
+  --lutra-component-modal-surface: var(--lutra-color-background-elevated);
+  --lutra-component-modal-title: var(--lutra-color-text-primary);
+  --lutra-component-navigation-border: var(--lutra-color-border-default);
+  --lutra-component-navigation-focus: var(--lutra-color-focus-ring);
+  --lutra-component-navigation-item-indicator: var(--lutra-color-brand-primary);
+  --lutra-component-navigation-item-text: var(--lutra-color-text-primary);
+  --lutra-component-navigation-surface: var(--lutra-color-background-surface);
+  --lutra-component-publishing-accent: var(--lutra-color-brand-primary);
+  --lutra-component-publishing-body: var(--lutra-color-text-secondary);
+  --lutra-component-publishing-border: var(--lutra-color-border-default);
+  --lutra-component-publishing-code-surface: var(--lutra-color-background-elevated);
+  --lutra-component-publishing-metadata: var(--lutra-color-text-muted);
+  --lutra-component-publishing-surface: var(--lutra-color-background-surface);
+  --lutra-component-publishing-surface-subtle: var(--lutra-color-background-subtle);
+  --lutra-component-publishing-title: var(--lutra-color-text-primary);
+  --lutra-component-radio-border-default: var(--lutra-component-checkbox-border-default);
+  --lutra-component-radio-border-disabled: var(--lutra-component-checkbox-border-disabled);
+  --lutra-component-radio-border-hover: var(--lutra-component-checkbox-border-hover);
+  --lutra-component-radio-border-invalid: var(--lutra-component-checkbox-border-invalid);
+  --lutra-component-radio-description: var(--lutra-component-checkbox-description);
+  --lutra-component-radio-error-text: var(--lutra-component-checkbox-error-text);
+  --lutra-component-radio-fill-disabled: var(--lutra-component-checkbox-fill-disabled);
+  --lutra-component-radio-fill-invalid: var(--lutra-component-checkbox-fill-invalid);
+  --lutra-component-radio-fill-selected: var(--lutra-component-checkbox-fill-selected);
+  --lutra-component-radio-fill-selected-hover: var(--lutra-component-checkbox-fill-selected-hover);
+  --lutra-component-radio-label: var(--lutra-component-checkbox-label);
+  --lutra-component-radio-mark: var(--lutra-component-checkbox-mark);
+  --lutra-component-radio-mark-on-danger: var(--lutra-component-checkbox-mark-on-danger);
+  --lutra-component-radio-surface: var(--lutra-component-checkbox-surface);
+  --lutra-component-radio-text-disabled: var(--lutra-component-checkbox-text-disabled);
+  --lutra-component-toggle-border-default: var(--lutra-component-input-border-default);
+  --lutra-component-toggle-border-hover: var(--lutra-component-input-border-hover);
+  --lutra-component-toggle-border-invalid: var(--lutra-component-input-border-invalid);
+  --lutra-component-toggle-description: var(--lutra-color-text-secondary);
+  --lutra-component-toggle-error-text: var(--lutra-component-field-error-text);
+  --lutra-component-toggle-focus: var(--lutra-color-focus-ring);
+  --lutra-component-toggle-label: var(--lutra-color-text-primary);
+  --lutra-component-toggle-thumb-disabled: var(--lutra-color-text-disabled);
+  --lutra-component-toggle-thumb-off: var(--lutra-color-text-secondary);
+  --lutra-component-toggle-thumb-on: var(--lutra-color-text-on-brand);
+  --lutra-component-toggle-track-disabled: var(--lutra-color-background-disabled);
+  --lutra-component-toggle-track-off: var(--lutra-component-checkbox-surface);
+  --lutra-component-toggle-track-on: var(--lutra-component-checkbox-fill-selected);
+  --lutra-component-toggle-track-on-hover: var(--lutra-component-checkbox-fill-selected-hover);
+  --lutra-component-tooltip-border: var(--lutra-color-text-primary);
+  --lutra-component-tooltip-surface: var(--lutra-color-text-primary);
+  --lutra-component-tooltip-text: var(--lutra-color-background-canvas);
+
+  /* Lutra Typography */
+  --lutra-text-body: 1rem;
+  --lutra-text-body-small: 0.875rem;
+  --lutra-text-button-lg: 1rem;
+  --lutra-text-button-md: 0.875rem;
+  --lutra-text-button-sm: 0.8125rem;
+  --lutra-text-caption: 0.75rem;
+  --lutra-text-code: 0.875rem;
+  --lutra-text-display: 2rem;
+  --lutra-text-h1: 1.5rem;
+  --lutra-text-h2: 1.25rem;
+  --lutra-text-h3: 1.125rem;
+  --lutra-text-label: 0.8125rem;
+  --lutra-type-family-mono: 'Atkinson Hyperlegible Mono', ui-monospace, SFMono-Regular, 'SF Mono', Menlo, monospace;
+  --lutra-type-family-sans: 'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+  --lutra-type-line-height-body: 1.5;
+  --lutra-type-line-height-body-small: 1.4286;
+  --lutra-type-line-height-button-lg: 1.5;
+  --lutra-type-line-height-button-md: 1.4286;
+  --lutra-type-line-height-button-sm: 1.2308;
+  --lutra-type-line-height-caption: 1.3333;
+  --lutra-type-line-height-code: 1.5714;
+  --lutra-type-line-height-display: 1.25;
+  --lutra-type-line-height-h1: 1.3333;
+  --lutra-type-line-height-h2: 1.4;
+  --lutra-type-line-height-h3: 1.3333;
+  --lutra-type-line-height-label: 1.2308;
+  --lutra-type-weight-bold: 700;
+  --lutra-type-weight-medium: 500;
+  --lutra-type-weight-regular: 400;
+  --lutra-type-weight-semibold: 600;
+
+  /* Lutra Spacing */
+  --lutra-border-width-thick: 2px;
+  --lutra-border-width-thin: 1px;
+  --lutra-radius-full: 999px;
+  --lutra-radius-lg: 0.75rem;
+  --lutra-radius-md: 0.5rem;
+  --lutra-radius-none: 0;
+  --lutra-radius-sm: 0.25rem;
+  --lutra-space-2xl: 1.5rem;
+  --lutra-space-2xs: 0.125rem;
+  --lutra-space-3xl: 2rem;
+  --lutra-space-lg: 1rem;
+  --lutra-space-md: 0.75rem;
+  --lutra-space-sm: 0.5rem;
+  --lutra-space-xl: 1.25rem;
+  --lutra-space-xs: 0.25rem;
+
+  /* Lutra Layout */
+  --lutra-layout-article-max: 45rem;
+  --lutra-layout-container-max: 75rem;
+  --lutra-layout-gutter-desktop: 2rem;
+  --lutra-layout-gutter-mobile: 1rem;
+  --lutra-layout-gutter-tablet: 1.5rem;
+  --lutra-layout-section-lg: 6rem;
+  --lutra-layout-section-sm: 4rem;
+}
+
+/* Dark mode. Every token whose value differs in dark, plus every alias that reaches one — an
+ * alias is substituted where it is declared, so it has to be re-declared here to resolve
+ * against dark values rather than inheriting the light result from :root. */
+[data-theme='dark'] {
+  --lutra-color-background-canvas: #0f172a;
+  --lutra-color-background-disabled: #1f2937;
+  --lutra-color-background-elevated: #1f2937;
+  --lutra-color-background-subtle: #1f2937;
+  --lutra-color-background-subtle-active: #354256;
+  --lutra-color-background-subtle-hover: #2a3646;
+  --lutra-color-background-surface: #111827;
+  --lutra-color-border-default: #374151;
+  --lutra-color-border-disabled: #374151;
+  --lutra-color-border-strong: #6b7688;
+  --lutra-color-border-subtle: #2d3748;
+  --lutra-color-brand-primary: #3a6ee0;
+  --lutra-color-feedback-danger: #ff5c8a;
+  --lutra-color-feedback-danger-active: #ff9ab8;
+  --lutra-color-feedback-danger-hover: #ff7ba1;
+  --lutra-color-feedback-danger-text: #ff8fab;
+  --lutra-color-icon-default: var(--lutra-color-text-primary);
+  --lutra-color-link-text: #7aa2ff;
+  --lutra-color-text-disabled: #6b7280;
+  --lutra-color-text-inverse: #111827;
+  --lutra-color-text-muted: #9ca3af;
+  --lutra-color-text-on-danger: #2b0713;
+  --lutra-color-text-primary: #f9fafb;
+  --lutra-color-text-secondary: #d1d5db;
+  --lutra-component-button-danger-border: var(--lutra-color-feedback-danger);
+  --lutra-component-button-danger-surface: var(--lutra-color-feedback-danger);
+  --lutra-component-button-danger-surface-active: var(--lutra-color-feedback-danger-active);
+  --lutra-component-button-danger-surface-hover: var(--lutra-color-feedback-danger-hover);
+  --lutra-component-button-danger-text: var(--lutra-color-text-on-danger);
+  --lutra-component-button-disabled-border: var(--lutra-color-border-disabled);
+  --lutra-component-button-disabled-surface: var(--lutra-color-background-disabled);
+  --lutra-component-button-disabled-text: var(--lutra-color-text-disabled);
+  --lutra-component-button-primary-border: var(--lutra-color-brand-primary);
+  --lutra-component-button-primary-surface: var(--lutra-color-brand-primary);
+  --lutra-component-button-secondary-border: var(--lutra-color-border-strong);
+  --lutra-component-button-secondary-surface: var(--lutra-color-background-subtle);
+  --lutra-component-button-secondary-surface-active: var(--lutra-color-background-subtle-active);
+  --lutra-component-button-secondary-surface-hover: var(--lutra-color-background-subtle-hover);
+  --lutra-component-button-secondary-text: var(--lutra-color-text-primary);
+  --lutra-component-checkbox-border-default: var(--lutra-component-input-border-default);
+  --lutra-component-checkbox-border-disabled: var(--lutra-color-border-disabled);
+  --lutra-component-checkbox-border-invalid: var(--lutra-component-input-border-invalid);
+  --lutra-component-checkbox-description: var(--lutra-color-text-secondary);
+  --lutra-component-checkbox-error-text: var(--lutra-component-field-error-text);
+  --lutra-component-checkbox-fill-disabled: var(--lutra-color-background-disabled);
+  --lutra-component-checkbox-fill-invalid: var(--lutra-color-feedback-danger);
+  --lutra-component-checkbox-fill-selected: var(--lutra-color-brand-primary);
+  --lutra-component-checkbox-label: var(--lutra-color-text-primary);
+  --lutra-component-checkbox-mark-on-danger: var(--lutra-color-text-on-danger);
+  --lutra-component-checkbox-surface: var(--lutra-color-background-surface);
+  --lutra-component-checkbox-text-disabled: var(--lutra-color-text-disabled);
+  --lutra-component-content-accent: var(--lutra-color-brand-primary);
+  --lutra-component-content-body: var(--lutra-color-text-secondary);
+  --lutra-component-content-border: var(--lutra-color-border-default);
+  --lutra-component-content-icon: var(--lutra-color-icon-default);
+  --lutra-component-content-surface: var(--lutra-color-background-surface);
+  --lutra-component-content-surface-subtle: var(--lutra-color-background-subtle);
+  --lutra-component-content-title: var(--lutra-color-text-primary);
+  --lutra-component-field-error-text: var(--lutra-color-feedback-danger-text);
+  --lutra-component-input-border-default: var(--lutra-color-border-strong);
+  --lutra-component-input-border-invalid: var(--lutra-color-feedback-danger);
+  --lutra-component-input-placeholder: var(--lutra-color-text-secondary);
+  --lutra-component-input-surface: var(--lutra-color-background-surface);
+  --lutra-component-input-text: var(--lutra-color-text-primary);
+  --lutra-component-link-text-default: var(--lutra-color-link-text);
+  --lutra-component-link-text-focus: var(--lutra-color-link-text);
+  --lutra-component-link-text-hover: var(--lutra-color-link-text);
+  --lutra-component-link-text-visited: var(--lutra-color-text-secondary);
+  --lutra-component-menu-border: var(--lutra-component-input-border-default);
+  --lutra-component-menu-divider: var(--lutra-component-input-border-default);
+  --lutra-component-menu-item-danger: var(--lutra-component-field-error-text);
+  --lutra-component-menu-item-hover: var(--lutra-color-background-subtle);
+  --lutra-component-menu-item-text: var(--lutra-color-text-primary);
+  --lutra-component-menu-surface: var(--lutra-color-background-elevated);
+  --lutra-component-modal-body: var(--lutra-color-text-secondary);
+  --lutra-component-modal-border: var(--lutra-component-input-border-default);
+  --lutra-component-modal-divider: var(--lutra-component-input-border-default);
+  --lutra-component-modal-scrim: #0f172ac2;
+  --lutra-component-modal-surface: var(--lutra-color-background-elevated);
+  --lutra-component-modal-title: var(--lutra-color-text-primary);
+  --lutra-component-navigation-border: var(--lutra-color-border-default);
+  --lutra-component-navigation-item-indicator: var(--lutra-color-focus-ring);
+  --lutra-component-navigation-item-text: var(--lutra-color-text-primary);
+  --lutra-component-navigation-surface: var(--lutra-color-background-surface);
+  --lutra-component-publishing-accent: var(--lutra-color-brand-primary);
+  --lutra-component-publishing-body: var(--lutra-color-text-secondary);
+  --lutra-component-publishing-border: var(--lutra-color-border-default);
+  --lutra-component-publishing-code-surface: var(--lutra-color-background-elevated);
+  --lutra-component-publishing-metadata: var(--lutra-color-text-muted);
+  --lutra-component-publishing-surface: var(--lutra-color-background-surface);
+  --lutra-component-publishing-surface-subtle: var(--lutra-color-background-subtle);
+  --lutra-component-publishing-title: var(--lutra-color-text-primary);
+  --lutra-component-radio-border-default: var(--lutra-component-checkbox-border-default);
+  --lutra-component-radio-border-disabled: var(--lutra-component-checkbox-border-disabled);
+  --lutra-component-radio-border-invalid: var(--lutra-component-checkbox-border-invalid);
+  --lutra-component-radio-description: var(--lutra-component-checkbox-description);
+  --lutra-component-radio-error-text: var(--lutra-component-checkbox-error-text);
+  --lutra-component-radio-fill-disabled: var(--lutra-component-checkbox-fill-disabled);
+  --lutra-component-radio-fill-invalid: var(--lutra-component-checkbox-fill-invalid);
+  --lutra-component-radio-fill-selected: var(--lutra-component-checkbox-fill-selected);
+  --lutra-component-radio-label: var(--lutra-component-checkbox-label);
+  --lutra-component-radio-mark-on-danger: var(--lutra-component-checkbox-mark-on-danger);
+  --lutra-component-radio-surface: var(--lutra-component-checkbox-surface);
+  --lutra-component-radio-text-disabled: var(--lutra-component-checkbox-text-disabled);
+  --lutra-component-toggle-border-default: var(--lutra-component-input-border-default);
+  --lutra-component-toggle-border-invalid: var(--lutra-component-input-border-invalid);
+  --lutra-component-toggle-description: var(--lutra-color-text-secondary);
+  --lutra-component-toggle-error-text: var(--lutra-component-field-error-text);
+  --lutra-component-toggle-label: var(--lutra-color-text-primary);
+  --lutra-component-toggle-thumb-disabled: var(--lutra-color-text-disabled);
+  --lutra-component-toggle-thumb-off: var(--lutra-color-text-secondary);
+  --lutra-component-toggle-track-disabled: var(--lutra-color-background-disabled);
+  --lutra-component-toggle-track-off: var(--lutra-component-checkbox-surface);
+  --lutra-component-toggle-track-on: var(--lutra-component-checkbox-fill-selected);
+  --lutra-component-tooltip-border: var(--lutra-color-text-primary);
+  --lutra-component-tooltip-surface: var(--lutra-color-text-primary);
+  --lutra-component-tooltip-text: var(--lutra-color-background-canvas);
+}
+
+/* An explicit light region, so a light island inside a dark one is possible. Same set as above,
+ * back at their light values. */
+[data-theme='light'] {
+  --lutra-color-background-canvas: #f5f7fa;
+  --lutra-color-background-disabled: #e5e7eb;
+  --lutra-color-background-elevated: #ffffff;
+  --lutra-color-background-subtle: #f5f7fa;
+  --lutra-color-background-subtle-active: #dfe5ed;
+  --lutra-color-background-subtle-hover: #eaeef4;
+  --lutra-color-background-surface: #ffffff;
+  --lutra-color-border-default: #d0d7de;
+  --lutra-color-border-disabled: #d1d5db;
+  --lutra-color-border-strong: #7f8896;
+  --lutra-color-border-subtle: #e8ecf2;
+  --lutra-color-brand-primary: #3265d3;
+  --lutra-color-feedback-danger: #d14343;
+  --lutra-color-feedback-danger-active: #942c2c;
+  --lutra-color-feedback-danger-hover: #b33636;
+  --lutra-color-feedback-danger-text: #c73f3f;
+  --lutra-color-icon-default: var(--lutra-color-text-primary);
+  --lutra-color-link-text: var(--lutra-color-brand-primary);
+  --lutra-color-text-disabled: #9ca3af;
+  --lutra-color-text-inverse: #ffffff;
+  --lutra-color-text-muted: #6b7280;
+  --lutra-color-text-on-danger: #ffffff;
+  --lutra-color-text-primary: #111827;
+  --lutra-color-text-secondary: #6b7280;
+  --lutra-component-button-danger-border: var(--lutra-color-feedback-danger);
+  --lutra-component-button-danger-surface: var(--lutra-color-feedback-danger);
+  --lutra-component-button-danger-surface-active: var(--lutra-color-feedback-danger-active);
+  --lutra-component-button-danger-surface-hover: var(--lutra-color-feedback-danger-hover);
+  --lutra-component-button-danger-text: var(--lutra-color-text-on-danger);
+  --lutra-component-button-disabled-border: var(--lutra-color-border-disabled);
+  --lutra-component-button-disabled-surface: var(--lutra-color-background-disabled);
+  --lutra-component-button-disabled-text: var(--lutra-color-text-disabled);
+  --lutra-component-button-primary-border: var(--lutra-color-brand-primary);
+  --lutra-component-button-primary-surface: var(--lutra-color-brand-primary);
+  --lutra-component-button-secondary-border: var(--lutra-color-border-strong);
+  --lutra-component-button-secondary-surface: var(--lutra-color-background-subtle);
+  --lutra-component-button-secondary-surface-active: var(--lutra-color-background-subtle-active);
+  --lutra-component-button-secondary-surface-hover: var(--lutra-color-background-subtle-hover);
+  --lutra-component-button-secondary-text: var(--lutra-color-text-primary);
+  --lutra-component-checkbox-border-default: var(--lutra-component-input-border-default);
+  --lutra-component-checkbox-border-disabled: var(--lutra-color-border-disabled);
+  --lutra-component-checkbox-border-invalid: var(--lutra-component-input-border-invalid);
+  --lutra-component-checkbox-description: var(--lutra-color-text-secondary);
+  --lutra-component-checkbox-error-text: var(--lutra-component-field-error-text);
+  --lutra-component-checkbox-fill-disabled: var(--lutra-color-background-disabled);
+  --lutra-component-checkbox-fill-invalid: var(--lutra-color-feedback-danger);
+  --lutra-component-checkbox-fill-selected: var(--lutra-color-brand-primary);
+  --lutra-component-checkbox-label: var(--lutra-color-text-primary);
+  --lutra-component-checkbox-mark-on-danger: var(--lutra-color-text-on-danger);
+  --lutra-component-checkbox-surface: var(--lutra-color-background-surface);
+  --lutra-component-checkbox-text-disabled: var(--lutra-color-text-disabled);
+  --lutra-component-content-accent: var(--lutra-color-brand-primary);
+  --lutra-component-content-body: var(--lutra-color-text-secondary);
+  --lutra-component-content-border: var(--lutra-color-border-default);
+  --lutra-component-content-icon: var(--lutra-color-icon-default);
+  --lutra-component-content-surface: var(--lutra-color-background-surface);
+  --lutra-component-content-surface-subtle: var(--lutra-color-background-subtle);
+  --lutra-component-content-title: var(--lutra-color-text-primary);
+  --lutra-component-field-error-text: var(--lutra-color-feedback-danger-text);
+  --lutra-component-input-border-default: var(--lutra-color-border-strong);
+  --lutra-component-input-border-invalid: var(--lutra-color-feedback-danger);
+  --lutra-component-input-placeholder: var(--lutra-color-text-secondary);
+  --lutra-component-input-surface: var(--lutra-color-background-surface);
+  --lutra-component-input-text: var(--lutra-color-text-primary);
+  --lutra-component-link-text-default: var(--lutra-color-link-text);
+  --lutra-component-link-text-focus: var(--lutra-color-link-text);
+  --lutra-component-link-text-hover: var(--lutra-color-link-text);
+  --lutra-component-link-text-visited: var(--lutra-color-text-secondary);
+  --lutra-component-menu-border: var(--lutra-component-input-border-default);
+  --lutra-component-menu-divider: var(--lutra-component-input-border-default);
+  --lutra-component-menu-item-danger: var(--lutra-component-field-error-text);
+  --lutra-component-menu-item-hover: var(--lutra-color-background-subtle);
+  --lutra-component-menu-item-text: var(--lutra-color-text-primary);
+  --lutra-component-menu-surface: var(--lutra-color-background-elevated);
+  --lutra-component-modal-body: var(--lutra-color-text-secondary);
+  --lutra-component-modal-border: var(--lutra-component-input-border-default);
+  --lutra-component-modal-divider: var(--lutra-component-input-border-default);
+  --lutra-component-modal-scrim: #0f172aa3;
+  --lutra-component-modal-surface: var(--lutra-color-background-elevated);
+  --lutra-component-modal-title: var(--lutra-color-text-primary);
+  --lutra-component-navigation-border: var(--lutra-color-border-default);
+  --lutra-component-navigation-item-indicator: var(--lutra-color-brand-primary);
+  --lutra-component-navigation-item-text: var(--lutra-color-text-primary);
+  --lutra-component-navigation-surface: var(--lutra-color-background-surface);
+  --lutra-component-publishing-accent: var(--lutra-color-brand-primary);
+  --lutra-component-publishing-body: var(--lutra-color-text-secondary);
+  --lutra-component-publishing-border: var(--lutra-color-border-default);
+  --lutra-component-publishing-code-surface: var(--lutra-color-background-elevated);
+  --lutra-component-publishing-metadata: var(--lutra-color-text-muted);
+  --lutra-component-publishing-surface: var(--lutra-color-background-surface);
+  --lutra-component-publishing-surface-subtle: var(--lutra-color-background-subtle);
+  --lutra-component-publishing-title: var(--lutra-color-text-primary);
+  --lutra-component-radio-border-default: var(--lutra-component-checkbox-border-default);
+  --lutra-component-radio-border-disabled: var(--lutra-component-checkbox-border-disabled);
+  --lutra-component-radio-border-invalid: var(--lutra-component-checkbox-border-invalid);
+  --lutra-component-radio-description: var(--lutra-component-checkbox-description);
+  --lutra-component-radio-error-text: var(--lutra-component-checkbox-error-text);
+  --lutra-component-radio-fill-disabled: var(--lutra-component-checkbox-fill-disabled);
+  --lutra-component-radio-fill-invalid: var(--lutra-component-checkbox-fill-invalid);
+  --lutra-component-radio-fill-selected: var(--lutra-component-checkbox-fill-selected);
+  --lutra-component-radio-label: var(--lutra-component-checkbox-label);
+  --lutra-component-radio-mark-on-danger: var(--lutra-component-checkbox-mark-on-danger);
+  --lutra-component-radio-surface: var(--lutra-component-checkbox-surface);
+  --lutra-component-radio-text-disabled: var(--lutra-component-checkbox-text-disabled);
+  --lutra-component-toggle-border-default: var(--lutra-component-input-border-default);
+  --lutra-component-toggle-border-invalid: var(--lutra-component-input-border-invalid);
+  --lutra-component-toggle-description: var(--lutra-color-text-secondary);
+  --lutra-component-toggle-error-text: var(--lutra-component-field-error-text);
+  --lutra-component-toggle-label: var(--lutra-color-text-primary);
+  --lutra-component-toggle-thumb-disabled: var(--lutra-color-text-disabled);
+  --lutra-component-toggle-thumb-off: var(--lutra-color-text-secondary);
+  --lutra-component-toggle-track-disabled: var(--lutra-color-background-disabled);
+  --lutra-component-toggle-track-off: var(--lutra-component-checkbox-surface);
+  --lutra-component-toggle-track-on: var(--lutra-component-checkbox-fill-selected);
+  --lutra-component-tooltip-border: var(--lutra-color-text-primary);
+  --lutra-component-tooltip-surface: var(--lutra-color-text-primary);
+  --lutra-component-tooltip-text: var(--lutra-color-background-canvas);
+}
+
+/*
+ * Button.
+ *
+ * The public styling contract is the `lutra-button` class plus the `data-variant`,
+ * `data-size`, `data-content-type` and `data-full-width` attributes. Interaction
+ * states are selected from the platform — `:hover`, `:active`, `:focus-visible`,
+ * `:disabled` — never from a prop.
+ *
+ * Two token tiers are in play:
+ *
+ * 1. **Design tokens** — generated from the Figma library into
+ *    `src/tokens/generated.css` and declared on `:root`. Button never reads a raw
+ *    value, and never hard-codes a Figma colour as a `var()` fallback: the token
+ *    layer is always present, because it ships in the same stylesheet.
+ *
+ *    Every colour comes from Figma's own `component/button/*` alias layer, so the
+ *    design system decides what "the primary surface" is and this file only
+ *    consumes it. Sizes, spacing and type come from the core scales
+ *    (`--lutra-space-*`, `--lutra-text-*`, `--lutra-radius-*`,
+ *    `--lutra-border-width-*`, `--lutra-type-*`), which Figma does not mirror per
+ *    component.
+ * 2. **Component tokens** — `--lutra-button-*`, declared below on the component
+ *    root. Each one names which design token it takes its value from, so the
+ *    mapping from the design system to this component is one readable list.
+ *
+ * Overriding a `--lutra-button-*` property on a Button, or a `--lutra-*` design
+ * token at any level above it, retunes the component without touching this file.
+ *
+ * The handful of values with no Figma variable behind them are marked. They are
+ * accessibility floors and drawing details Figma has no way to express, not colours
+ * or type someone forgot to tokenise.
+ */
+
+.lutra-button {
+  /* Brand, used by `variant="primary"`. */
+  --lutra-button-brand: var(--lutra-component-button-primary-surface);
+  --lutra-button-brand-hover: var(--lutra-component-button-primary-surface-hover);
+  --lutra-button-brand-active: var(--lutra-component-button-primary-surface-active);
+  --lutra-button-brand-border: var(--lutra-component-button-primary-border);
+  --lutra-button-on-brand: var(--lutra-component-button-primary-text);
+
+  /* Danger, used by `variant="danger"`. */
+  --lutra-button-danger: var(--lutra-component-button-danger-surface);
+  --lutra-button-danger-hover: var(--lutra-component-button-danger-surface-hover);
+  --lutra-button-danger-active: var(--lutra-component-button-danger-surface-active);
+  --lutra-button-danger-border: var(--lutra-component-button-danger-border);
+  --lutra-button-on-danger: var(--lutra-component-button-danger-text);
+
+  /* Neutral, used by `variant="secondary"`. */
+  --lutra-button-neutral: var(--lutra-component-button-secondary-surface);
+  --lutra-button-neutral-hover: var(--lutra-component-button-secondary-surface-hover);
+  --lutra-button-neutral-active: var(--lutra-component-button-secondary-surface-active);
+  --lutra-button-border: var(--lutra-component-button-secondary-border);
+  --lutra-button-text: var(--lutra-component-button-secondary-text);
+
+  /* Disabled. Deliberate colours rather than an opacity wash, so the state is a
+   * real visual change and not just a faded version of the enabled button. */
+  --lutra-button-disabled-surface: var(--lutra-component-button-disabled-surface);
+  --lutra-button-disabled-border: var(--lutra-component-button-disabled-border);
+  --lutra-button-disabled-text: var(--lutra-component-button-disabled-text);
+
+  /* Type. Line heights are unitless ratios, so they follow the font size. */
+  --lutra-button-font-family: var(--lutra-type-family-sans);
+  --lutra-button-font-weight: var(--lutra-type-weight-medium);
+  --lutra-button-font-size-sm: var(--lutra-text-button-sm);
+  --lutra-button-font-size-md: var(--lutra-text-button-md);
+  --lutra-button-font-size-lg: var(--lutra-text-button-lg);
+  --lutra-button-line-height-sm: var(--lutra-type-line-height-button-sm);
+  --lutra-button-line-height-md: var(--lutra-type-line-height-button-md);
+  --lutra-button-line-height-lg: var(--lutra-type-line-height-button-lg);
+
+  /* Spacing. */
+  --lutra-button-padding-inline-sm: var(--lutra-space-sm);
+  --lutra-button-padding-inline-md: var(--lutra-space-lg);
+  --lutra-button-padding-inline-lg: var(--lutra-space-xl);
+  --lutra-button-gap-sm: var(--lutra-space-xs);
+  --lutra-button-gap-md: var(--lutra-space-sm);
+  --lutra-button-gap-lg: var(--lutra-space-md);
+
+  /* Shape. */
+  --lutra-button-radius: var(--lutra-radius-md);
+  --lutra-button-border-width: var(--lutra-border-width-thin);
+
+  /* Focus. The ring colour is the one canonical `color/focus/ring`; the width is
+   * Figma's thick border. The offset has no Figma variable — Figma documents the
+   * ring as a drawn rectangle rather than a value — and it is not cosmetic: it is
+   * what puts the ring on the surface *behind* a filled button, where it clears
+   * WCAG 1.4.11's 3:1, instead of on the button's own fill where it would be about
+   * 1.4:1 and invisible. See `button.md`. */
+  --lutra-button-focus-ring-color: var(--lutra-component-button-focus);
+  --lutra-button-focus-ring-width: var(--lutra-border-width-thick);
+  --lutra-button-focus-ring-offset: 2px;
+
+  /* NO FIGMA VARIABLE. Figma draws buttons at a fixed height; these become
+   * `min-block-size` instead, because a fixed height on a text-bearing container
+   * clips wrapped labels and breaks at 200% zoom. `rem` so they grow with the
+   * reader's font size. 36px, 40px, 44px. */
+  --lutra-button-min-height-sm: 2.25rem;
+  --lutra-button-min-height-md: 2.5rem;
+  --lutra-button-min-height-lg: 2.75rem;
+
+  /* NO FIGMA VARIABLE. Vertical breathing room a wrapped label needs once the
+   * button is free to grow; small enough that a single-line button is still
+   * exactly its minimum height. */
+  --lutra-button-padding-block: var(--lutra-space-xs);
+
+  /* NO FIGMA VARIABLE. The stable 16px icon slot from the Figma documentation, so
+   * a button's height does not depend on the icon a consumer passes. */
+  --lutra-button-icon-size: 1rem;
+
+  /* NO FIGMA VARIABLE. The 44px minimum pointer target. An accessibility floor
+   * rather than a design value, and it must not be tuned down. */
+  --lutra-button-min-target-size: 2.75rem;
+
+  box-sizing: border-box;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  margin: 0;
+  padding-block: var(--lutra-button-padding-block);
+  border-style: solid;
+  border-width: var(--lutra-button-border-width);
+  border-radius: var(--lutra-button-radius);
+  font-family: var(--lutra-button-font-family);
+  font-weight: var(--lutra-button-font-weight);
+  text-align: center;
+  cursor: pointer;
+
+  /* Strips the platform's own button chrome so the token colours are what shows,
+   * notably on iOS Safari. */
+  appearance: none;
+
+  /* Long labels and long words wrap rather than overflow the button. Nothing here
+   * sets a fixed height, so the button grows to hold them. */
+  overflow-wrap: break-word;
+  text-wrap: pretty;
+}
+
+/* Variants.
+ *
+ * Each carries a border in its own fill colour, so swapping variants never
+ * changes a button's size. */
+
+.lutra-button[data-variant='primary'] {
+  border-color: var(--lutra-button-brand-border);
+  background-color: var(--lutra-button-brand);
+  color: var(--lutra-button-on-brand);
+}
+
+/* Only the fill moves on hover and active. The border stays at the base brand
+ * colour, which is what Figma draws and why `component/button/primary/border` is a
+ * separate token from the surface. */
+
+.lutra-button[data-variant='primary']:not(:disabled):hover {
+  background-color: var(--lutra-button-brand-hover);
+}
+
+.lutra-button[data-variant='primary']:not(:disabled):active {
+  background-color: var(--lutra-button-brand-active);
+}
+
+.lutra-button[data-variant='secondary'] {
+  border-color: var(--lutra-button-border);
+  background-color: var(--lutra-button-neutral);
+  color: var(--lutra-button-text);
+}
+
+.lutra-button[data-variant='secondary']:not(:disabled):hover {
+  background-color: var(--lutra-button-neutral-hover);
+}
+
+.lutra-button[data-variant='secondary']:not(:disabled):active {
+  background-color: var(--lutra-button-neutral-active);
+}
+
+.lutra-button[data-variant='danger'] {
+  border-color: var(--lutra-button-danger-border);
+  background-color: var(--lutra-button-danger);
+  color: var(--lutra-button-on-danger);
+}
+
+.lutra-button[data-variant='danger']:not(:disabled):hover {
+  background-color: var(--lutra-button-danger-hover);
+}
+
+.lutra-button[data-variant='danger']:not(:disabled):active {
+  background-color: var(--lutra-button-danger-active);
+}
+
+/* Sizes.
+ *
+ * `min-block-size` rather than `height`: it reproduces the Figma height for the
+ * single-line case the design draws, and lets the button grow when the label
+ * wraps or the user raises their font size. */
+
+.lutra-button[data-size='sm'] {
+  min-block-size: var(--lutra-button-min-height-sm);
+  padding-inline: var(--lutra-button-padding-inline-sm);
+  gap: var(--lutra-button-gap-sm);
+  font-size: var(--lutra-button-font-size-sm);
+  line-height: var(--lutra-button-line-height-sm);
+}
+
+.lutra-button[data-size='md'] {
+  min-block-size: var(--lutra-button-min-height-md);
+  padding-inline: var(--lutra-button-padding-inline-md);
+  gap: var(--lutra-button-gap-md);
+  font-size: var(--lutra-button-font-size-md);
+  line-height: var(--lutra-button-line-height-md);
+}
+
+.lutra-button[data-size='lg'] {
+  min-block-size: var(--lutra-button-min-height-lg);
+  padding-inline: var(--lutra-button-padding-inline-lg);
+  gap: var(--lutra-button-gap-lg);
+  font-size: var(--lutra-button-font-size-lg);
+  line-height: var(--lutra-button-line-height-lg);
+}
+
+/* Disabled, which is also how loading renders.
+ *
+ * The colour change is a real one — a different surface, border and text, not the
+ * enabled button at a lower opacity — and it is never the only signal: the button
+ * is natively disabled, so it is skipped by Tab, announced as unavailable, and
+ * shows the platform's own cursor. Hover and active are excluded above. */
+
+.lutra-button:disabled {
+  border-color: var(--lutra-button-disabled-border);
+  background-color: var(--lutra-button-disabled-surface);
+  color: var(--lutra-button-disabled-text);
+  cursor: default;
+}
+
+/* Focus.
+ *
+ * The browser outline is replaced, not removed: a 2px ring at a 2px offset, in a
+ * colour with enough contrast against the surface behind the button. The offset
+ * is what makes the ring visible against a filled button — see `tokens/focus.css`. */
+
+.lutra-button:focus-visible {
+  outline: var(--lutra-button-focus-ring-width) solid var(--lutra-button-focus-ring-color);
+  outline-offset: var(--lutra-button-focus-ring-offset);
+}
+
+/* Full width. Layout only. */
+
+.lutra-button[data-full-width] {
+  inline-size: 100%;
+}
+
+/* Icon slot.
+ *
+ * A fixed 16px box, so a button's height does not depend on the icon a consumer
+ * happens to pass. The SVG rule sizes an arbitrary consumer icon to the slot; it
+ * is scoped under the icon class, so it cannot restyle anything else on the page. */
+
+.lutra-button__icon {
+  display: inline-flex;
+  flex: 0 0 auto;
+  align-items: center;
+  justify-content: center;
+  inline-size: var(--lutra-button-icon-size);
+  block-size: var(--lutra-button-icon-size);
+}
+
+.lutra-button__icon > svg {
+  inline-size: 100%;
+  block-size: 100%;
+}
+
+/* Label.
+ *
+ * When a loading label replaces the ordinary one, both are stacked in the same
+ * grid cell so the button keeps the wider of the two widths and the swap causes no
+ * layout shift. The measuring copy is hidden from sight and from assistive
+ * technology, so it contributes width and nothing else. */
+
+.lutra-button__label {
+  min-inline-size: 0;
+}
+
+.lutra-button__label--swapped {
+  display: grid;
+  grid-template-areas: 'label';
+  align-items: center;
+  justify-items: center;
+}
+
+.lutra-button__label--swapped > * {
+  grid-area: label;
+}
+
+.lutra-button__label-measure {
+  visibility: hidden;
+}
+
+/* Icon-only.
+ *
+ * The drawn button keeps its size at every scale — an `sm` icon-only button is
+ * still 36px — and reaches the 44px minimum pointer target through a transparent
+ * hit area centred on it. Growing the button instead would make `sm`, `md` and
+ * `lg` icon-only buttons indistinguishable. */
+
+.lutra-button[data-content-type='icon-only'] {
+  position: relative;
+  padding-inline: 0;
+}
+
+.lutra-button[data-content-type='icon-only'][data-size='sm'] {
+  inline-size: var(--lutra-button-min-height-sm);
+}
+
+.lutra-button[data-content-type='icon-only'][data-size='md'] {
+  inline-size: var(--lutra-button-min-height-md);
+}
+
+.lutra-button[data-content-type='icon-only'][data-size='lg'] {
+  inline-size: var(--lutra-button-min-height-lg);
+}
+
+.lutra-button[data-content-type='icon-only']::after {
+  content: '';
+  position: absolute;
+  inset-block-start: 50%;
+  inset-inline-start: 50%;
+  transform: translate(-50%, -50%);
+  inline-size: 100%;
+  block-size: 100%;
+  min-inline-size: var(--lutra-button-min-target-size);
+  min-block-size: var(--lutra-button-min-target-size);
+}
+
+/* Spinner.
+ *
+ * Built from borders rather than an imported asset: three sides in the current
+ * text colour, one transparent, rotating. `currentcolor` means it is legible on
+ * every variant and in the disabled palette without a token of its own. */
+
+.lutra-button__spinner {
+  flex: 0 0 auto;
+  box-sizing: border-box;
+  inline-size: var(--lutra-button-icon-size);
+  block-size: var(--lutra-button-icon-size);
+  border: var(--lutra-button-focus-ring-width) solid currentcolor;
+  border-block-start-color: transparent;
+  border-radius: 50%;
+  animation: lutra-button-spin 0.7s linear infinite;
+}
+
+@keyframes lutra-button-spin {
+  to {
+    transform: rotate(1turn);
+  }
+}
+
+/* Reduced motion: the rotation is slowed to a crawl rather than removed. A static
+ * ring does not read as "working"; a slow one does, without the fast spin that
+ * the preference exists to avoid. */
+
+@media (prefers-reduced-motion: reduce) {
+  .lutra-button__spinner {
+    animation-duration: 2.4s;
+  }
+}
+
+/* Windows High Contrast Mode and other forced-colours modes.
+ *
+ * The system replaces the token colours, which is the point of the mode. What it
+ * does not do reliably is keep a custom focus ring visible, so the ring is pinned
+ * to the system highlight colour. Disabled buttons already pick up `GrayText`
+ * from the native `disabled` attribute. */
+
+@media (forced-colors: active) {
+  .lutra-button:focus-visible {
+    outline-color: Highlight;
+  }
+}
+
+/*
+ * Link.
+ *
+ * The public styling contract is the `lutra-link` class plus `data-variant`. Hover, focus, active
+ * and visited are selected from the platform — `:hover`, `:focus-visible`, `:active`, `:visited` —
+ * never from a prop.
+ *
+ * Colour is never the only thing separating an inline link from the prose around it: inline links
+ * keep their underline at rest, which is what the annotation asks for.
+ */
+
+.lutra-link {
+  --lutra-link-text: var(--lutra-component-link-text-default);
+  --lutra-link-text-hover: var(--lutra-component-link-text-hover);
+  --lutra-link-text-focus: var(--lutra-component-link-text-focus);
+  --lutra-link-text-visited: var(--lutra-component-link-text-visited);
+
+  --lutra-link-focus-ring-color: var(--lutra-component-navigation-focus);
+  --lutra-link-focus-ring-width: var(--lutra-border-width-thick);
+
+  /* NO FIGMA VARIABLE. The same 2px offset every other Lutra control uses, so a focused link in a
+   * row of controls shows one treatment. */
+  --lutra-link-focus-ring-offset: 2px;
+
+  /* NO FIGMA VARIABLE. Figma keeps a 44px target on standalone links. */
+  --lutra-link-standalone-min-target: 2.75rem;
+
+  color: var(--lutra-link-text);
+  border-radius: var(--lutra-radius-sm);
+
+  /* Underline thickness follows the font, and the offset keeps the line clear of descenders so the
+   * text stays readable rather than struck through. */
+  text-decoration-thickness: from-font;
+  text-underline-offset: 0.2em;
+
+  /* A long URL or an unbroken word wraps rather than pushing its container wider. */
+  overflow-wrap: break-word;
+}
+
+/* Inline links live in prose and keep their underline at rest — colour alone is not enough to find
+ * a link inside a paragraph. */
+
+.lutra-link[data-variant='inline'] {
+  text-decoration-line: underline;
+}
+
+/* Standalone links sit on their own, where position and spacing already separate them, so the
+ * underline is reserved for hover. The minimum target is met without changing the drawn text: an
+ * inline-flex box with a minimum block size grows the hit area, not the type. */
+
+.lutra-link[data-variant='standalone'] {
+  display: inline-flex;
+  align-items: center;
+  min-block-size: var(--lutra-link-standalone-min-target);
+  text-decoration-line: none;
+}
+
+.lutra-link:hover {
+  color: var(--lutra-link-text-hover);
+  text-decoration-line: underline;
+}
+
+/* `:visited` is deliberately after `:hover` for the colour, and the browser restricts what may be
+ * styled here anyway — colour is one of the few properties allowed, which is exactly what Figma
+ * varies. */
+
+.lutra-link:visited {
+  color: var(--lutra-link-text-visited);
+}
+
+.lutra-link:visited:hover {
+  color: var(--lutra-link-text-hover);
+}
+
+.lutra-link:focus-visible {
+  color: var(--lutra-link-text-focus);
+  outline: var(--lutra-link-focus-ring-width) solid var(--lutra-link-focus-ring-color);
+  outline-offset: var(--lutra-link-focus-ring-offset);
+}
+
+/* Forced-colours modes: the system supplies its own link colour, and what it does not reliably keep
+ * is a custom focus ring, so that is pinned to the system highlight. */
+
+@media (forced-colors: active) {
+  .lutra-link:focus-visible {
+    outline-color: Highlight;
+  }
+}
+
+/*
+ * Navigation Item.
+ *
+ * A destination inside a navigation landmark. The styling contract is the `lutra-navigation-item`
+ * class; the current state is selected from `[aria-current='page']` rather than from a class, so the
+ * look and what assistive technology is told cannot drift apart.
+ *
+ * Figma draws four states — default, hover, focus, current. Three of them are platform states and are
+ * selected as such; only `current` is a property, because only `current` is a fact about the page
+ * rather than about the pointer.
+ */
+
+.lutra-navigation-item {
+  --lutra-navigation-item-text: var(--lutra-component-navigation-item-text);
+  --lutra-navigation-item-indicator: var(--lutra-component-navigation-item-indicator);
+  --lutra-navigation-item-focus-ring-color: var(--lutra-component-navigation-focus);
+  --lutra-navigation-item-focus-ring-width: var(--lutra-border-width-thick);
+
+  /* NO FIGMA VARIABLE. Figma draws a 44px tall item with 8/8/6/8 padding, a 4px gap above a 32×2
+   * indicator, and a 4px corner on the focus ring. The 44px target is the annotation's minimum. */
+  --lutra-navigation-item-min-target: 2.75rem;
+  --lutra-navigation-item-indicator-inline-size: 2rem;
+  --lutra-navigation-item-indicator-block-size: 2px;
+
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: var(--lutra-space-xs);
+  box-sizing: border-box;
+  min-block-size: var(--lutra-navigation-item-min-target);
+  padding: var(--lutra-space-sm) var(--lutra-space-sm) calc(var(--lutra-space-sm) - 2px);
+  border-radius: var(--lutra-radius-sm);
+
+  color: var(--lutra-navigation-item-text);
+  font-family: var(--lutra-type-family-sans);
+  font-size: var(--lutra-text-body);
+  line-height: var(--lutra-type-line-height-body);
+  font-weight: var(--lutra-type-weight-medium);
+  text-decoration-line: none;
+
+  /* A long destination name wraps rather than pushing the navigation wider. */
+  overflow-wrap: break-word;
+  text-wrap: pretty;
+}
+
+/* Hover is the only place the underline appears at rest-adjacent state, matching Figma. */
+
+.lutra-navigation-item:hover {
+  text-decoration-line: underline;
+  text-decoration-thickness: from-font;
+  text-underline-offset: 0.2em;
+}
+
+.lutra-navigation-item:focus-visible {
+  outline: var(--lutra-navigation-item-focus-ring-width) solid
+    var(--lutra-navigation-item-focus-ring-color);
+
+  /* No offset, because Figma draws the ring on the item's own 4px corner rather than around it, and
+   * items sit 4px apart — an offset ring would touch its neighbour. */
+  outline-offset: 0;
+}
+
+/* The current destination: a weight change, an indicator bar, and colour — three signals, so no one
+ * of them has to carry it alone. Selected from the ARIA attribute, so it cannot be styled as current
+ * without also being announced as current. */
+
+.lutra-navigation-item[aria-current='page'] {
+  font-weight: var(--lutra-type-weight-semibold);
+}
+
+.lutra-navigation-item__indicator {
+  inline-size: var(--lutra-navigation-item-indicator-inline-size);
+  block-size: var(--lutra-navigation-item-indicator-block-size);
+  border-radius: var(--lutra-radius-full);
+  background-color: var(--lutra-navigation-item-indicator);
+
+  /* Holds its size when the item is in a flex column that would otherwise squash it. */
+  flex: 0 0 auto;
+}
+
+/* Forced-colours modes: the indicator's background is not painted, so it is pinned to the system
+ * highlight, and the focus ring to the same — otherwise the current item and the focused item both
+ * lose their only remaining distinction. */
+
+@media (forced-colors: active) {
+  .lutra-navigation-item__indicator {
+    background-color: Highlight;
+    forced-color-adjust: none;
+  }
+
+  .lutra-navigation-item:focus-visible {
+    outline-color: Highlight;
+  }
+}
+
+/*
+ * Mobile Navigation.
+ *
+ * A disclosure: a trigger button and a panel of destinations. Nothing here is modal, so nothing here
+ * needs a scrim or the top layer — the panel is an ordinary positioned element.
+ *
+ * Figma draws a 390px panel below the trigger with a 16px inline gutter and a 24px bottom pad. The
+ * width is not fixed here: the panel stretches to its container and is capped, so it works at 400%
+ * zoom, where a fixed 390px panel would simply overflow.
+ */
+
+.lutra-mobile-navigation {
+  --lutra-mobile-navigation-surface: var(--lutra-component-navigation-surface);
+  --lutra-mobile-navigation-border: var(--lutra-component-navigation-border);
+  --lutra-mobile-navigation-border-width: var(--lutra-border-width-thin);
+
+  /* NO FIGMA VARIABLE. Figma draws a 390px panel. */
+  --lutra-mobile-navigation-max-inline-size: 24.375rem;
+
+  /* **No shadow, deliberately.** The Figma component binds no effect style and carries no effect of
+   * its own — unlike Tooltip, Dropdown and Dialog, which each bind one. The panel is separated by its
+   * border and surface alone, which is consistent with the Elevation page's instruction to use
+   * elevation "sparingly to clarify layer relationships—not as decoration". The shadow that used to
+   * be here was invented, and is gone.
+   *
+   * NO FIGMA VARIABLE: the layer token does not exist, so the z-index keeps a local fallback. There
+   * is no layer scale in Figma — elevation is expressed as effect styles, not as a z-index ramp. */
+  --lutra-mobile-navigation-layer: var(--lutra-layer-popover, 900);
+
+  position: relative;
+}
+
+.lutra-mobile-navigation__panel {
+  position: absolute;
+  inset-block-start: calc(100% + var(--lutra-space-xs));
+
+  box-sizing: border-box;
+  inline-size: max-content;
+  min-inline-size: 100%;
+  max-inline-size: min(var(--lutra-mobile-navigation-max-inline-size), 100vw);
+
+  display: flex;
+  flex-direction: column;
+  gap: var(--lutra-space-sm);
+  padding: var(--lutra-space-md) var(--lutra-space-lg) var(--lutra-space-2xl);
+
+  border: var(--lutra-mobile-navigation-border-width) solid var(--lutra-mobile-navigation-border);
+  border-radius: var(--lutra-radius-md);
+  background-color: var(--lutra-mobile-navigation-surface);
+  z-index: var(--lutra-mobile-navigation-layer);
+}
+
+/*
+ * Which edge the panel is anchored to, following the same `data-align` convention as Tooltip.
+ *
+ * The panel used to be anchored to the inline start unconditionally. That is correct only when the
+ * trigger sits at the start of its row — and the Figma `Site Header` puts it at the **end**, with the
+ * site name at the start. A start-anchored panel hanging off a trigger that is itself a gutter's
+ * width from the edge extends past the viewport, which forces the horizontal scrolling that WCAG
+ * 1.4.10 exists to prevent. No story exercised an end-aligned trigger, so nothing caught it until a
+ * real site header did.
+ *
+ * `start` remains the default, so this changes no existing composition.
+ */
+
+.lutra-mobile-navigation__panel[data-align='start'] {
+  inset-inline-start: 0;
+}
+
+.lutra-mobile-navigation__panel[data-align='end'] {
+  inset-inline-end: 0;
+}
+
+/* The panel's own controls row. The close button sits at the end, where a thumb reaches it. */
+
+.lutra-mobile-navigation__controls {
+  display: flex;
+  justify-content: flex-end;
+  flex: 0 0 auto;
+}
+
+/* Destinations stack full width, so the whole row is the target rather than just the text. */
+
+.lutra-mobile-navigation__nav {
+  display: flex;
+  flex-direction: column;
+  gap: var(--lutra-space-xs);
+}
+
+.lutra-mobile-navigation__nav .lutra-navigation-item {
+  align-items: flex-start;
+}
+
+/* Forced-colours modes: the border is what separates the panel from the page behind it — which is
+ * true in every mode here, since this panel has no shadow. */
+
+@media (forced-colors: active) {
+  .lutra-mobile-navigation__panel {
+    border-color: CanvasText;
+  }
+}
+
+/*
+ * Tooltip.
+ *
+ * Positioned with ordinary absolute positioning against an inline-block wrapper. `placement` and
+ * `align` are data attributes; the component flips to the opposite side when the preferred one does
+ * not fit, and that flip is the whole of the positioning logic. No floating-element engine, and no
+ * dependency.
+ *
+ * The tooltip is only in the DOM while open, so there is nothing to hide and no stale
+ * `aria-describedby` target left behind.
+ *
+ * There is no transition. Motion tokens are still deferred in the design system, and the 120ms open
+ * delay in the component comes from the Figma API contract rather than from an invented scale.
+ */
+
+.lutra-tooltip-wrapper {
+  position: relative;
+  display: inline-block;
+}
+
+.lutra-tooltip {
+  --lutra-tooltip-surface: var(--lutra-component-tooltip-surface);
+  --lutra-tooltip-text: var(--lutra-component-tooltip-text);
+  --lutra-tooltip-border: var(--lutra-component-tooltip-border);
+  --lutra-tooltip-radius: var(--lutra-radius-md);
+  --lutra-tooltip-border-width: var(--lutra-border-width-thin);
+  --lutra-tooltip-padding-block: var(--lutra-space-xs);
+  --lutra-tooltip-padding-inline: var(--lutra-space-sm);
+
+  /* NO FIGMA VARIABLE. The 8px offset from the Figma API contract, and a maximum width so a long
+   * tooltip wraps into a readable column instead of stretching across the viewport. */
+  --lutra-tooltip-offset: var(--lutra-space-sm);
+  --lutra-tooltip-max-inline-size: 20rem;
+
+  /* The canonical `Elevation/Medium` effect style, reproduced verbatim: 0 6px 16px black at 20%.
+   *
+   * NO FIGMA VARIABLE, and not an invented value either — the Elevation foundations page states that
+   * elevation "is expressed as reusable effect styles, not numeric tokens", so there is nothing for
+   * the token pipeline to read. Every one of the twelve Tooltip variants binds this style; the
+   * stylesheet had no shadow at all, which is the drift this corrects. */
+  --lutra-tooltip-shadow: 0 6px 16px rgb(0 0 0 / 20%);
+
+  position: absolute;
+  z-index: var(--lutra-layer-tooltip, 950);
+  box-sizing: border-box;
+  inline-size: max-content;
+  max-inline-size: var(--lutra-tooltip-max-inline-size);
+  padding: var(--lutra-tooltip-padding-block) var(--lutra-tooltip-padding-inline);
+  border: var(--lutra-tooltip-border-width) solid var(--lutra-tooltip-border);
+  border-radius: var(--lutra-tooltip-radius);
+  background-color: var(--lutra-tooltip-surface);
+  box-shadow: var(--lutra-tooltip-shadow);
+  color: var(--lutra-tooltip-text);
+  font-family: var(--lutra-type-family-sans);
+  font-size: var(--lutra-text-body-small);
+  line-height: var(--lutra-type-line-height-body-small);
+
+  /* The pointer *is* allowed here, and that is deliberate. WCAG 2.2 SC 1.4.13 requires content shown
+   * on hover to stay visible while the pointer is on it, which a surface with `pointer-events: none`
+   * can never satisfy — the pointer would pass straight through and the tooltip would close as soon
+   * as it left the trigger.
+   *
+   * Nothing is swallowed by this, because the tooltip holds nothing to interact with: it sits
+   * outside the trigger rather than over it, and interactive content inside a tooltip warns in
+   * development. */
+
+  overflow-wrap: break-word;
+  text-wrap: pretty;
+}
+
+/* Placement. */
+
+.lutra-tooltip[data-placement='top'] {
+  inset-block-end: calc(100% + var(--lutra-tooltip-offset));
+}
+
+.lutra-tooltip[data-placement='bottom'] {
+  inset-block-start: calc(100% + var(--lutra-tooltip-offset));
+}
+
+.lutra-tooltip[data-placement='left'] {
+  inset-inline-end: calc(100% + var(--lutra-tooltip-offset));
+}
+
+.lutra-tooltip[data-placement='right'] {
+  inset-inline-start: calc(100% + var(--lutra-tooltip-offset));
+}
+
+/* Alignment along the chosen side. Vertical placements align horizontally and the reverse, so the
+ * two axes are handled separately. */
+
+.lutra-tooltip[data-placement='top'][data-align='start'],
+.lutra-tooltip[data-placement='bottom'][data-align='start'] {
+  inset-inline-start: 0;
+}
+
+.lutra-tooltip[data-placement='top'][data-align='center'],
+.lutra-tooltip[data-placement='bottom'][data-align='center'] {
+  inset-inline-start: 50%;
+  transform: translateX(-50%);
+}
+
+.lutra-tooltip[data-placement='top'][data-align='end'],
+.lutra-tooltip[data-placement='bottom'][data-align='end'] {
+  inset-inline-end: 0;
+}
+
+.lutra-tooltip[data-placement='left'][data-align='start'],
+.lutra-tooltip[data-placement='right'][data-align='start'] {
+  inset-block-start: 0;
+}
+
+.lutra-tooltip[data-placement='left'][data-align='center'],
+.lutra-tooltip[data-placement='right'][data-align='center'] {
+  inset-block-start: 50%;
+  transform: translateY(-50%);
+}
+
+.lutra-tooltip[data-placement='left'][data-align='end'],
+.lutra-tooltip[data-placement='right'][data-align='end'] {
+  inset-block-end: 0;
+}
+
+/* Forced-colours modes: the system replaces the surface and text, and the border is what keeps the
+ * tooltip distinguishable from the page behind it. */
+
+@media (forced-colors: active) {
+  .lutra-tooltip {
+    border-color: CanvasText;
+  }
+}
+
+/*
+ * Dropdown.
+ *
+ * A disclosure: a button and a panel of ordinary buttons and links. Nothing here implies a menu
+ * role, and the items are styled by class rather than by element, so a `<button>` item and an `<a>`
+ * item are indistinguishable to look at while staying distinct to assistive technology.
+ *
+ * The panel is positioned absolutely against the wrapper. It needs to sit above the page, and while
+ * Figma does define elevation, it defines it as effect styles rather than as a z-index scale — so
+ * the shadow is canonical and the z-index falls back to a local value —
+ * see `dropdown.md`.
+ */
+
+.lutra-dropdown {
+  position: relative;
+  display: inline-block;
+}
+
+.lutra-dropdown__panel {
+  --lutra-dropdown-surface: var(--lutra-component-menu-surface);
+  --lutra-dropdown-border: var(--lutra-component-menu-border);
+  --lutra-dropdown-radius: var(--lutra-radius-md);
+  --lutra-dropdown-border-width: var(--lutra-border-width-thin);
+  --lutra-dropdown-padding-block: var(--lutra-space-xs);
+
+  /* NO FIGMA VARIABLE. Figma draws a 240px panel. */
+  --lutra-dropdown-min-inline-size: 15rem;
+
+  /* The canonical `Elevation/Medium` effect style, reproduced verbatim: 0 6px 16px black at 20%.
+   *
+   * NO FIGMA VARIABLE, and not an invented value either — the Elevation foundations page states that
+   * elevation "is expressed as reusable effect styles, not numeric tokens", so there is nothing for
+   * the token pipeline to read. The style is named here so the value stays traceable to it. */
+  --lutra-dropdown-shadow: 0 6px 16px rgb(0 0 0 / 20%);
+
+  position: absolute;
+  z-index: var(--lutra-layer-popover, 900);
+  inset-block-start: calc(100% + var(--lutra-space-xs));
+  inset-inline-start: 0;
+  box-sizing: border-box;
+  min-inline-size: var(--lutra-dropdown-min-inline-size);
+  max-inline-size: min(20rem, calc(100vw - var(--lutra-space-2xl)));
+  padding-block: var(--lutra-dropdown-padding-block);
+  border: var(--lutra-dropdown-border-width) solid var(--lutra-dropdown-border);
+  border-radius: var(--lutra-dropdown-radius);
+  background-color: var(--lutra-dropdown-surface);
+  box-shadow: var(--lutra-dropdown-shadow);
+}
+
+/* Items.
+ *
+ * Styled by class, not element, so a button item and a link item look identical while keeping the
+ * semantics that tell them apart. */
+
+.lutra-dropdown__item {
+  --lutra-dropdown-item-text: var(--lutra-component-menu-item-text);
+  --lutra-dropdown-item-hover: var(--lutra-component-menu-item-hover);
+  --lutra-dropdown-item-danger: var(--lutra-component-menu-item-danger);
+  --lutra-dropdown-item-disabled: var(--lutra-color-text-disabled);
+
+  /* NO FIGMA VARIABLE. Figma draws a 44px row, which is also the minimum pointer target. */
+  --lutra-dropdown-item-min-height: 2.75rem;
+
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  gap: var(--lutra-space-sm);
+  inline-size: 100%;
+  min-block-size: var(--lutra-dropdown-item-min-height);
+  margin: 0;
+  padding: var(--lutra-space-xs) var(--lutra-space-md);
+  border: 0;
+  border-radius: var(--lutra-radius-sm);
+  background-color: transparent;
+  color: var(--lutra-dropdown-item-text);
+  font-family: var(--lutra-type-family-sans);
+  font-size: var(--lutra-text-body-small);
+  line-height: var(--lutra-type-line-height-body-small);
+  text-align: start;
+  text-decoration: none;
+  cursor: pointer;
+  appearance: none;
+}
+
+.lutra-dropdown__item[data-tone='danger'] {
+  color: var(--lutra-dropdown-item-danger);
+}
+
+.lutra-dropdown__item:hover:not(:disabled):not([aria-disabled='true']) {
+  background-color: var(--lutra-dropdown-item-hover);
+}
+
+/* Focus is a ring at the same width and offset every other Lutra control uses, drawn inside the
+ * panel so it is not clipped by the panel's own rounded corner. */
+
+.lutra-dropdown__item:focus-visible {
+  background-color: var(--lutra-dropdown-item-hover);
+  outline: var(--lutra-border-width-thick) solid var(--lutra-color-focus-ring);
+  outline-offset: -2px;
+}
+
+.lutra-dropdown__item:disabled,
+.lutra-dropdown__item[aria-disabled='true'] {
+  color: var(--lutra-dropdown-item-disabled);
+  cursor: not-allowed;
+}
+
+/* Long labels wrap inside the panel rather than escaping it. */
+
+.lutra-dropdown__item-label {
+  min-inline-size: 0;
+  overflow-wrap: break-word;
+  text-wrap: pretty;
+}
+
+.lutra-dropdown__item-icon {
+  flex: 0 0 auto;
+  display: inline-flex;
+  inline-size: 1rem;
+  block-size: 1rem;
+}
+
+.lutra-dropdown__item-icon > svg {
+  inline-size: 100%;
+  block-size: 100%;
+}
+
+.lutra-dropdown__separator {
+  margin: var(--lutra-space-xs) 0;
+  border: 0;
+  border-block-start: var(--lutra-border-width-thin) solid var(--lutra-component-menu-divider);
+}
+
+/* Forced-colours modes: the system replaces the surface and the shadow is not painted, so the
+ * border is what keeps the panel distinguishable from the page behind it. */
+
+@media (forced-colors: active) {
+  .lutra-dropdown__panel {
+    border-color: CanvasText;
+  }
+}
+
+/*
+ * Dialog.
+ *
+ * A native <dialog> opened with showModal(), so the top layer, the inert background, focus
+ * containment and Escape all come from the browser. The stylesheet only has to draw it.
+ *
+ * The scrim is ::backdrop — the element's own pseudo-element — which is why no separate overlay node
+ * exists and why nothing has to manage z-index against the rest of the page. The top layer sits
+ * above everything regardless of stacking context, which is also why Dialog needs no entry in the
+ * layer scale the design system is still missing.
+ */
+
+.lutra-dialog {
+  --lutra-dialog-surface: var(--lutra-component-modal-surface);
+  --lutra-dialog-border: var(--lutra-component-modal-border);
+  --lutra-dialog-title: var(--lutra-component-modal-title);
+  --lutra-dialog-body: var(--lutra-component-modal-body);
+  --lutra-dialog-divider: var(--lutra-component-modal-divider);
+  --lutra-dialog-scrim: var(--lutra-component-modal-scrim);
+  --lutra-dialog-radius: var(--lutra-radius-lg);
+  --lutra-dialog-border-width: var(--lutra-border-width-thin);
+
+  /* NO FIGMA VARIABLE. Figma draws 400/560/720px panels and a 16px viewport gutter. */
+  --lutra-dialog-max-inline-size-sm: 25rem;
+  --lutra-dialog-max-inline-size-md: 35rem;
+  --lutra-dialog-max-inline-size-lg: 45rem;
+  --lutra-dialog-gutter: var(--lutra-space-lg);
+
+  /* The canonical `Elevation/Large` effect style, reproduced verbatim: 0 8px 24px black at 18%.
+   *
+   * NO FIGMA VARIABLE, and not an invented value either — the Elevation foundations page states that
+   * elevation "is expressed as reusable effect styles, not numeric tokens", so there is nothing for
+   * the token pipeline to read. The style is named here so the value stays traceable to it. */
+  --lutra-dialog-shadow: 0 8px 24px rgb(0 0 0 / 18%);
+
+  box-sizing: border-box;
+  padding: 0;
+  border: var(--lutra-dialog-border-width) solid var(--lutra-dialog-border);
+  border-radius: var(--lutra-dialog-radius);
+  background-color: var(--lutra-dialog-surface);
+  color: var(--lutra-dialog-body);
+  font-family: var(--lutra-type-family-sans);
+  box-shadow: var(--lutra-dialog-shadow);
+
+  /* Stretches to the available width on a narrow screen and never touches the viewport edge.
+   * `dvh` so a mobile browser's collapsing toolbar does not hide the footer. */
+  inline-size: calc(100vw - var(--lutra-dialog-gutter) * 2);
+  max-block-size: calc(100dvh - var(--lutra-dialog-gutter) * 2);
+
+  /* The dialog element itself never scrolls; the body inside it does. Scrolling here as well would
+   * let the header and footer drift out of reach. */
+  overflow: hidden;
+}
+
+.lutra-dialog[data-size='sm'] {
+  max-inline-size: var(--lutra-dialog-max-inline-size-sm);
+}
+
+.lutra-dialog[data-size='md'] {
+  max-inline-size: var(--lutra-dialog-max-inline-size-md);
+}
+
+.lutra-dialog[data-size='lg'] {
+  max-inline-size: var(--lutra-dialog-max-inline-size-lg);
+}
+
+.lutra-dialog::backdrop {
+  background-color: var(--lutra-dialog-scrim);
+}
+
+/* The dialog is focusable only as a target for `initialFocus="dialog"`. It is not a tab stop, and
+ * the ring would be noise around the whole panel, so it is suppressed here specifically — every
+ * control inside keeps its own. */
+.lutra-dialog:focus {
+  outline: none;
+}
+
+/* A column: header and footer hold their size, the body takes what is left and scrolls. */
+
+.lutra-dialog__panel {
+  display: flex;
+  flex-direction: column;
+  max-block-size: inherit;
+  block-size: 100%;
+}
+
+.lutra-dialog__header {
+  display: flex;
+  align-items: flex-start;
+  gap: var(--lutra-space-lg);
+  flex: 0 0 auto;
+  padding: var(--lutra-space-2xl) var(--lutra-space-2xl) var(--lutra-space-lg);
+}
+
+.lutra-dialog__heading-group {
+  display: flex;
+  flex-direction: column;
+  gap: var(--lutra-space-sm);
+  min-inline-size: 0;
+  flex: 1 1 auto;
+}
+
+.lutra-dialog__title {
+  margin: 0;
+  font-size: var(--lutra-text-h2);
+  line-height: var(--lutra-type-line-height-h2);
+  font-weight: var(--lutra-type-weight-semibold);
+  color: var(--lutra-dialog-title);
+
+  /* A long title wraps rather than pushing the close button off the panel. */
+  overflow-wrap: break-word;
+  text-wrap: pretty;
+}
+
+.lutra-dialog__description {
+  margin: 0;
+  font-size: var(--lutra-text-body);
+  line-height: var(--lutra-type-line-height-body);
+  color: var(--lutra-dialog-body);
+  overflow-wrap: break-word;
+  text-wrap: pretty;
+}
+
+/* The only scrolling region, so the header and the actions can never drift out of reach. The
+ * footer's border doubles as the line the content scrolls beneath. */
+
+.lutra-dialog__body {
+  flex: 1 1 auto;
+  min-block-size: 0;
+  overflow-y: auto;
+  padding: 0 var(--lutra-space-2xl) var(--lutra-space-2xl);
+  color: var(--lutra-dialog-body);
+  font-size: var(--lutra-text-body);
+  line-height: var(--lutra-type-line-height-body);
+  overscroll-behavior: contain;
+}
+
+.lutra-dialog__footer {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: flex-end;
+  gap: var(--lutra-space-md);
+  flex: 0 0 auto;
+  padding: var(--lutra-space-lg) var(--lutra-space-2xl);
+  border-block-start: var(--lutra-border-width-thin) solid var(--lutra-dialog-divider);
+}
+
+/* Forced-colours modes: the scrim is not painted and the shadow disappears, so the border is what
+ * separates the dialog from the page behind it. */
+
+@media (forced-colors: active) {
+  .lutra-dialog {
+    border-color: CanvasText;
+  }
+}
+
+/*
+ * Card and Card Footer.
+ *
+ * A bounded surface and its action row. Everything drawn here comes from foundations the rest of the
+ * library already uses — a card is not a second place where type, spacing or colour get decided.
+ *
+ * The border is on both elevations deliberately. In dark mode `color/background/surface` and
+ * `color/border/default` carry the whole separation from the page, and the shadow contributes almost
+ * nothing, which is why a flat card still reads as bounded there.
+ */
+
+.lutra-card {
+  --lutra-card-surface: var(--lutra-color-background-surface);
+  --lutra-card-border: var(--lutra-color-border-default);
+  --lutra-card-border-width: var(--lutra-border-width-thin);
+  --lutra-card-radius: var(--lutra-radius-lg);
+  --lutra-card-padding: var(--lutra-space-2xl);
+  --lutra-card-gap: var(--lutra-space-lg);
+  --lutra-card-header-gap: var(--lutra-space-xs);
+  --lutra-card-title: var(--lutra-color-text-primary);
+  --lutra-card-text: var(--lutra-color-text-secondary);
+
+  /* The canonical `Elevation/Small` effect style, reproduced verbatim: 0 1px 2px black at 10%.
+   *
+   * NO FIGMA VARIABLE, and not an invented value either — the Elevation foundations page states that
+   * elevation "is expressed as reusable effect styles, not numeric tokens", so there is nothing for
+   * the token pipeline to read. The style is named here so the value stays traceable to it. */
+  --lutra-card-shadow-raised: 0 1px 2px rgb(0 0 0 / 10%);
+
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  gap: var(--lutra-card-gap);
+  padding: var(--lutra-card-padding);
+
+  border: var(--lutra-card-border-width) solid var(--lutra-card-border);
+  border-radius: var(--lutra-card-radius);
+  background-color: var(--lutra-card-surface);
+  color: var(--lutra-card-text);
+  font-family: var(--lutra-type-family-sans);
+}
+
+.lutra-card[data-elevation='raised'] {
+  box-shadow: var(--lutra-card-shadow-raised);
+}
+
+/* The heading and its metadata read as one unit, so they share a block with a tighter gap than the
+ * one between blocks. */
+
+.lutra-card__header {
+  display: flex;
+  flex-direction: column;
+  gap: var(--lutra-card-header-gap);
+  min-inline-size: 0;
+}
+
+.lutra-card__title {
+  margin: 0;
+  font-size: var(--lutra-text-h3);
+  line-height: var(--lutra-type-line-height-h3);
+  font-weight: var(--lutra-type-weight-semibold);
+  color: var(--lutra-card-title);
+
+  /* Headings wrap rather than truncate. Truncation hides information from everyone equally,
+   * including from assistive technology, which reads the full string while the reader cannot. */
+  overflow-wrap: break-word;
+  text-wrap: pretty;
+}
+
+.lutra-card__supporting-text {
+  margin: 0;
+  font-size: var(--lutra-text-body-small);
+  line-height: var(--lutra-type-line-height-body-small);
+  color: var(--lutra-card-text);
+  overflow-wrap: break-word;
+  text-wrap: pretty;
+}
+
+.lutra-card__body {
+  font-size: var(--lutra-text-body);
+  line-height: var(--lutra-type-line-height-body);
+  color: var(--lutra-card-text);
+  overflow-wrap: break-word;
+  text-wrap: pretty;
+
+  /* Grows with its content. Nothing here depends on a particular string length, and cards in a row
+   * are equal width with independent height. */
+  min-inline-size: 0;
+}
+
+/* The action row.
+ *
+ * `align` sets `justify-content` and nothing else. There is no `row-reverse`: it would put focus
+ * order out of step with reading order, which is a defect that looks perfectly correct on screen. */
+
+.lutra-card-footer {
+  --lutra-card-footer-gap: var(--lutra-space-md);
+
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--lutra-card-footer-gap);
+}
+
+.lutra-card-footer[data-align='start'] {
+  justify-content: flex-start;
+}
+
+.lutra-card-footer[data-align='end'] {
+  justify-content: flex-end;
+}
+
+/* Forced-colours modes: the shadow is not painted, so the border is the whole of the boundary. */
+
+@media (forced-colors: active) {
+  .lutra-card {
+    border-color: CanvasText;
+  }
+}
+
+/*
+ * Link Card.
+ *
+ * The same surface as Card, with one anchor whose pseudo-element covers it. The card is the
+ * positioning context; the anchor is the only interactive thing in it.
+ *
+ * Hover and focus are selected from the platform — `:hover` and `:has(:focus-visible)` — never from a
+ * prop, and both change more than colour so the state survives greyscale.
+ */
+
+.lutra-link-card {
+  --lutra-link-card-surface: var(--lutra-color-background-surface);
+  --lutra-link-card-border: var(--lutra-color-border-default);
+  --lutra-link-card-border-hover: var(--lutra-color-border-strong);
+  --lutra-link-card-border-width: var(--lutra-border-width-thin);
+  --lutra-link-card-radius: var(--lutra-radius-lg);
+  --lutra-link-card-padding: var(--lutra-space-2xl);
+  --lutra-link-card-gap: var(--lutra-space-lg);
+  --lutra-link-card-row-gap: var(--lutra-space-sm);
+  --lutra-link-card-text: var(--lutra-component-link-text-default);
+  --lutra-link-card-text-hover: var(--lutra-component-link-text-hover);
+  --lutra-link-card-supporting-text: var(--lutra-color-text-secondary);
+  --lutra-link-card-focus-ring-color: var(--lutra-color-focus-ring);
+  --lutra-link-card-focus-ring-width: var(--lutra-border-width-thick);
+
+  /* The canonical `Elevation/Small` effect style, reproduced verbatim: 0 1px 2px black at 10%. Same
+   * value and same reasoning as Card's raised elevation.
+   *
+   * NO FIGMA VARIABLE, and not an invented value either — the Elevation foundations page states that
+   * elevation "is expressed as reusable effect styles, not numeric tokens", so there is nothing for
+   * the token pipeline to read. The style is named here so the value stays traceable to it. */
+  --lutra-link-card-shadow-hover: 0 1px 2px rgb(0 0 0 / 10%);
+
+  /* The positioning context the stretched pseudo-element resolves against. */
+  position: relative;
+
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  gap: var(--lutra-link-card-gap);
+  padding: var(--lutra-link-card-padding);
+
+  border: var(--lutra-link-card-border-width) solid var(--lutra-link-card-border);
+  border-radius: var(--lutra-link-card-radius);
+  background-color: var(--lutra-link-card-surface);
+  font-family: var(--lutra-type-family-sans);
+}
+
+/* The heading holds the link and the chevron on one row. It is a heading, so it keeps its margin
+ * reset and its own type — the level it renders at is a prop, and never implied by this size. */
+
+.lutra-link-card__heading {
+  display: flex;
+  align-items: flex-start;
+  gap: var(--lutra-link-card-row-gap);
+  margin: 0;
+  font-size: var(--lutra-text-h3);
+  line-height: var(--lutra-type-line-height-h3);
+  font-weight: var(--lutra-type-weight-semibold);
+  min-inline-size: 0;
+}
+
+.lutra-link-card__link {
+  color: var(--lutra-link-card-text);
+  text-decoration-line: none;
+  min-inline-size: 0;
+
+  /* Headings wrap rather than truncate, here as everywhere. */
+  overflow-wrap: break-word;
+  text-wrap: pretty;
+}
+
+/* What makes the whole surface clickable without putting the whole surface inside the anchor. The
+ * anchor keeps its own small box — and therefore its own accessible name — while this covers the
+ * card. */
+.lutra-link-card__link::after {
+  content: '';
+  position: absolute;
+  inset: 0;
+  border-radius: inherit;
+}
+
+.lutra-link-card__chevron {
+  /* Holds its size beside a wrapping heading, and aligns with the first line rather than centring
+   * against a heading that may be three lines tall. */
+  flex: 0 0 auto;
+  inline-size: 1.5rem;
+  block-size: 1.5rem;
+  margin-block-start: 0.125rem;
+}
+
+.lutra-link-card__supporting-text {
+  margin: 0;
+  font-size: var(--lutra-text-body-small);
+  line-height: var(--lutra-type-line-height-body-small);
+  font-weight: var(--lutra-type-weight-regular);
+  color: var(--lutra-link-card-supporting-text);
+  overflow-wrap: break-word;
+  text-wrap: pretty;
+}
+
+/* Hover raises the card, strengthens the border and underlines the link text. Selected on the card
+ * rather than the anchor, because the pseudo-element means the pointer is over the card whenever it
+ * is over the link. */
+
+.lutra-link-card:hover {
+  border-color: var(--lutra-link-card-border-hover);
+  box-shadow: var(--lutra-link-card-shadow-hover);
+}
+
+.lutra-link-card:hover .lutra-link-card__link {
+  color: var(--lutra-link-card-text-hover);
+  text-decoration-line: underline;
+  text-decoration-thickness: from-font;
+  text-underline-offset: 0.2em;
+}
+
+/* Focus. Drawn on the card, because a ring around the anchor's own small box would not describe what
+ * activating it does.
+ *
+ * Figma thickens the 1px border to a 2px stroke. An outline is used instead so the ring can appear
+ * without a 1px layout shift that would nudge every card in a grid; it reads identically and keeps
+ * the weight change the annotation asks for. `:focus-visible` so it answers the keyboard rather than
+ * the pointer. */
+
+.lutra-link-card:has(.lutra-link-card__link:focus-visible) {
+  outline: var(--lutra-link-card-focus-ring-width) solid var(--lutra-link-card-focus-ring-color);
+  outline-offset: 0;
+  border-color: var(--lutra-link-card-focus-ring-color);
+}
+
+.lutra-link-card:has(.lutra-link-card__link:focus-visible) .lutra-link-card__link {
+  color: var(--lutra-link-card-text-hover);
+}
+
+/* Forced-colours modes: the shadow is not painted and system colours replace the rest, so the border
+ * carries the boundary and the ring is pinned to the system highlight. */
+
+@media (forced-colors: active) {
+  .lutra-link-card {
+    border-color: CanvasText;
+  }
+
+  .lutra-link-card:has(.lutra-link-card__link:focus-visible) {
+    outline-color: Highlight;
+  }
+}
+
+/*
+ * Table.
+ *
+ * Native table semantics throughout; this stylesheet only draws them. Every part carries its own
+ * class rather than being reached through an element selector, which is why `TableRow` exists as a
+ * component at all — the divider, the hover tint and the selected tint have to hang off something
+ * prefixed with `lutra-`.
+ *
+ * Row dividers use `color/border/default` rather than `color/border/subtle`. Default carries more of
+ * the separation in dark mode, where the surface tints sit close together, and the Table pattern says
+ * so explicitly.
+ */
+
+.lutra-table-wrapper {
+  --lutra-table-surface: var(--lutra-color-background-surface);
+  --lutra-table-header-surface: var(--lutra-color-background-subtle);
+  --lutra-table-row-hover: var(--lutra-color-background-subtle);
+  --lutra-table-row-selected: var(--lutra-color-background-subtle);
+  --lutra-table-border: var(--lutra-color-border-default);
+  --lutra-table-border-width: var(--lutra-border-width-thin);
+  --lutra-table-radius: var(--lutra-radius-md);
+  --lutra-table-text: var(--lutra-color-text-primary);
+  --lutra-table-text-muted: var(--lutra-color-text-secondary);
+  --lutra-table-icon-muted: var(--lutra-color-text-muted);
+  --lutra-table-padding-block: var(--lutra-space-md);
+  --lutra-table-padding-inline: var(--lutra-space-lg);
+  --lutra-table-focus-ring-color: var(--lutra-color-focus-ring);
+  --lutra-table-focus-ring-width: var(--lutra-border-width-thick);
+
+  /* NO FIGMA VARIABLE. The 44px pointer target the whole library holds to, expressed here as a hit
+   * area that grows into the cell padding rather than as a taller row — Figma draws the dashed 44px
+   * outlines overlapping a 52px row for exactly this reason. */
+  --lutra-table-hit-target: 2.75rem;
+
+  display: flex;
+  flex-direction: column;
+  font-family: var(--lutra-type-family-sans);
+}
+
+/* The result count after a sort, filter or page change. Visible as well as announced — a count is
+ * useful to everyone, and a live region nobody can see is easy to forget to maintain.
+ *
+ * The node is always in the DOM, because a live region only announces changes to a region that was
+ * already there. Empty, it has no text and therefore no line box, so it draws nothing; the spacing
+ * below it is applied only when it has content, which is why the wrapper carries no gap. It is never
+ * hidden with `display: none` — that would remove it from the accessibility tree and silence it. */
+
+.lutra-table__status {
+  font-size: var(--lutra-text-body-small);
+  line-height: var(--lutra-type-line-height-body-small);
+  color: var(--lutra-table-text-muted);
+}
+
+.lutra-table__status:not(:empty) {
+  margin-block-end: var(--lutra-space-sm);
+}
+
+/* The scroll region. Focusable only while it overflows, which is when there is something to reach. */
+
+.lutra-table__scroll {
+  overflow-x: auto;
+  border: var(--lutra-table-border-width) solid var(--lutra-table-border);
+  border-radius: var(--lutra-table-radius);
+  background-color: var(--lutra-table-surface);
+}
+
+.lutra-table__scroll:focus-visible {
+  outline: var(--lutra-table-focus-ring-width) solid var(--lutra-table-focus-ring-color);
+  outline-offset: 2px;
+}
+
+.lutra-table {
+  inline-size: 100%;
+
+  /* Collapsed, so a row's divider is one line rather than two touching borders. */
+  border-collapse: collapse;
+  color: var(--lutra-table-text);
+  font-size: var(--lutra-text-body-small);
+  line-height: var(--lutra-type-line-height-body-small);
+}
+
+.lutra-table__caption {
+  padding: var(--lutra-table-padding-block) var(--lutra-table-padding-inline);
+  color: var(--lutra-table-text-muted);
+  text-align: start;
+}
+
+/* Visually hidden, but present for assistive technology. Scoped to the table rather than shipped as
+ * a global utility — the stylesheet does not get to add global classes to a consuming page. */
+
+.lutra-table__visually-hidden {
+  position: absolute;
+  inline-size: 1px;
+  block-size: 1px;
+  margin: -1px;
+  padding: 0;
+  overflow: hidden;
+  white-space: nowrap;
+  clip-path: inset(50%);
+  border: 0;
+}
+
+/* Rows. The divider sits on the row, so it spans the full width regardless of how many cells there
+ * are. */
+
+.lutra-table-row {
+  border-block-start: var(--lutra-table-border-width) solid var(--lutra-table-border);
+}
+
+.lutra-table-row:hover {
+  background-color: var(--lutra-table-row-hover);
+}
+
+/* The tint is supplemental. The checked box in the selection cell is the primary cue, which is what
+ * keeps selection legible in greyscale, in high contrast and on paper. */
+
+.lutra-table-row[data-selected='true'] {
+  background-color: var(--lutra-table-row-selected);
+}
+
+/* Header cells. */
+
+.lutra-table-header-cell {
+  padding: var(--lutra-table-padding-block) var(--lutra-table-padding-inline);
+  background-color: var(--lutra-table-header-surface);
+  color: var(--lutra-table-text);
+  font-weight: var(--lutra-type-weight-semibold);
+  text-align: start;
+  vertical-align: middle;
+}
+
+.lutra-table-header-cell[data-align='right'] {
+  text-align: end;
+}
+
+/* A sortable header holds a button. The button fills the cell so the whole header is the target,
+ * while remaining a real button rather than a clickable `th`. */
+
+.lutra-table-header-cell__button {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--lutra-space-sm);
+  inline-size: 100%;
+  margin: 0;
+  padding: 0;
+  border: 0;
+  border-radius: var(--lutra-radius-sm);
+  background: none;
+  color: inherit;
+  font: inherit;
+  text-align: inherit;
+  cursor: pointer;
+}
+
+.lutra-table-header-cell[data-align='right'] .lutra-table-header-cell__button {
+  justify-content: flex-end;
+}
+
+.lutra-table-header-cell__button:focus-visible {
+  outline: var(--lutra-table-focus-ring-width) solid var(--lutra-table-focus-ring-color);
+  outline-offset: 2px;
+}
+
+.lutra-table-header-cell__sort-icon {
+  flex: 0 0 auto;
+  inline-size: 1rem;
+  block-size: 1rem;
+}
+
+/* Unsorted is quieter than a live sort direction, but the glyph differs in all three states, so the
+ * colour is never what carries the direction. */
+
+.lutra-table-header-cell__sort-icon[data-state='unsorted'] {
+  color: var(--lutra-table-icon-muted);
+}
+
+/* Value cells. */
+
+.lutra-table-cell {
+  padding: var(--lutra-table-padding-block) var(--lutra-table-padding-inline);
+  text-align: start;
+  vertical-align: top;
+  overflow-wrap: break-word;
+}
+
+.lutra-table-cell[data-emphasis='strong'] {
+  font-weight: var(--lutra-type-weight-semibold);
+  color: var(--lutra-table-text);
+}
+
+.lutra-table-cell[data-emphasis='muted'] {
+  color: var(--lutra-table-text-muted);
+}
+
+/* Right-aligned cells are numeric by convention, and numbers only line up column-wise in tabular
+ * figures. Figma cannot express the OpenType feature, so the design depends on this rule existing. */
+
+.lutra-table-cell[data-align='right'] {
+  text-align: end;
+  font-variant-numeric: tabular-nums;
+}
+
+/* Selection cells. */
+
+.lutra-table-selection-cell {
+  inline-size: 1px;
+  padding: var(--lutra-table-padding-block) var(--lutra-table-padding-inline);
+  vertical-align: top;
+}
+
+.lutra-table-selection-cell__label {
+  display: inline-flex;
+  align-items: center;
+
+  /* The label is the 44px target for the checkbox inside it, without changing the drawn control. */
+  min-inline-size: var(--lutra-table-hit-target);
+  min-block-size: var(--lutra-table-hit-target);
+  margin-block: calc((var(--lutra-table-hit-target) - 1.5rem) / -2);
+}
+
+/* Row actions.
+ *
+ * The buttons stay compact so rows stay dense; the pointer target grows into the cell padding
+ * instead of adding to the row height. */
+
+.lutra-table-row-actions {
+  padding: var(--lutra-space-sm) var(--lutra-table-padding-inline);
+  text-align: end;
+  vertical-align: middle;
+  white-space: nowrap;
+}
+
+.lutra-table-row-actions__row {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: var(--lutra-space-sm);
+}
+
+.lutra-table-row-actions__row > * {
+  position: relative;
+}
+
+/* The invisible 44 × 44px target, centred on the control and overlapping the row padding. The row
+ * below stays its own height; only the hit area grows. */
+
+.lutra-table-row-actions__row > *::before {
+  content: '';
+  position: absolute;
+  inset-block-start: 50%;
+  inset-inline-start: 50%;
+  translate: -50% -50%;
+  min-inline-size: var(--lutra-table-hit-target);
+  min-block-size: var(--lutra-table-hit-target);
+  inline-size: 100%;
+  block-size: 100%;
+}
+
+/* Empty state. The structure around it stays; only the rows are gone. */
+
+.lutra-table-empty-state__cell {
+  padding: var(--lutra-space-3xl) var(--lutra-table-padding-inline);
+}
+
+.lutra-table-empty-state__content {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: var(--lutra-space-md);
+  text-align: center;
+}
+
+.lutra-table-empty-state__icon {
+  inline-size: 1.5rem;
+  block-size: 1.5rem;
+  color: var(--lutra-table-icon-muted);
+}
+
+.lutra-table-empty-state__title {
+  margin: 0;
+  font-size: var(--lutra-text-body);
+  line-height: var(--lutra-type-line-height-body);
+  color: var(--lutra-table-text);
+}
+
+.lutra-table-empty-state__body {
+  margin: 0;
+  color: var(--lutra-table-text-muted);
+  text-wrap: pretty;
+}
+
+/* Forced-colours modes: tints are not painted, so the dividers and the border carry the structure,
+ * and the focus ring is pinned to the system highlight. */
+
+@media (forced-colors: active) {
+  .lutra-table-row,
+  .lutra-table__scroll {
+    border-color: CanvasText;
+  }
+
+  .lutra-table__scroll:focus-visible,
+  .lutra-table-header-cell__button:focus-visible {
+    outline-color: Highlight;
+  }
+}
+
+/*
+ * Input.
+ *
+ * The public styling contract is the `lutra-input` class plus the `data-size` and
+ * `data-full-width` attributes, and `aria-invalid` for the error state. Hover,
+ * focus and disabled are selected from the platform — `:hover`, `:focus-visible`,
+ * `:disabled` — never from a prop.
+ *
+ * Colour comes from Figma's `component/input/*` alias layer, so the design system
+ * decides what an input surface, its text, its placeholder and each of its border
+ * states are. Sizes, spacing and type come from the core scales. The values with
+ * no Figma variable behind them are marked.
+ *
+ * The error state is styled from `aria-invalid` rather than a `data-*` attribute
+ * of its own. There is then no way for the field to look wrong while reporting
+ * itself valid, because the attribute that assistive technology reads is the same
+ * one the stylesheet matches on.
+ */
+
+.lutra-input {
+  /* Surface and text. */
+  --lutra-input-surface: var(--lutra-component-input-surface);
+  --lutra-input-text: var(--lutra-component-input-text);
+  --lutra-input-placeholder: var(--lutra-component-input-placeholder);
+
+  /* Border, one token per state. */
+  --lutra-input-border: var(--lutra-component-input-border-default);
+  --lutra-input-border-hover: var(--lutra-component-input-border-hover);
+  --lutra-input-border-focus: var(--lutra-component-input-border-focus);
+  --lutra-input-border-invalid: var(--lutra-component-input-border-invalid);
+
+  /* Disabled.
+   *
+   * NO `component/input/*` ALIAS. Figma binds the core disabled tokens directly
+   * here — the Input alias layer has surface, text, placeholder and four border
+   * states, but no disabled trio. These are the tokens the Figma component
+   * actually uses, so they are what this reproduces; the gap is recorded in
+   * `input.md` as something for the design system to close. */
+  --lutra-input-disabled-surface: var(--lutra-color-background-disabled);
+  --lutra-input-disabled-border: var(--lutra-color-border-disabled);
+  --lutra-input-disabled-text: var(--lutra-color-text-disabled);
+
+  /* Shape and type. */
+  --lutra-input-radius: var(--lutra-radius-md);
+  --lutra-input-border-width: var(--lutra-border-width-thin);
+  --lutra-input-border-width-focus: var(--lutra-border-width-thick);
+  --lutra-input-font-family: var(--lutra-type-family-sans);
+  --lutra-input-font-weight: var(--lutra-type-weight-medium);
+
+  /* Per size: 8px, 12px, 16px of inline padding. */
+  --lutra-input-padding-inline-sm: var(--lutra-space-sm);
+  --lutra-input-padding-inline-md: var(--lutra-space-md);
+  --lutra-input-padding-inline-lg: var(--lutra-space-lg);
+
+  /* 14px, 16px, 18px. */
+  --lutra-input-font-size-sm: var(--lutra-text-body-small);
+  --lutra-input-font-size-md: var(--lutra-text-body);
+  --lutra-input-font-size-lg: var(--lutra-text-h3);
+
+  /* The leading paired with each size in the type ramp. Figma draws a flat 120%
+   * on this component with no variable behind it; inside a fixed-height control
+   * the two are visually identical, and using the ramp keeps the field consistent
+   * with every other piece of text at the same size. */
+  --lutra-input-line-height-sm: var(--lutra-type-line-height-body-small);
+  --lutra-input-line-height-md: var(--lutra-type-line-height-body);
+  --lutra-input-line-height-lg: var(--lutra-type-line-height-h3);
+
+  /* NO FIGMA VARIABLE. Figma draws inputs at a fixed 36/40/44px; these become
+   * `min-block-size` instead, because a fixed height on a text-bearing control
+   * breaks at 200% zoom. `rem` so they grow with the reader's font size. */
+  --lutra-input-min-height-sm: 2.25rem;
+  --lutra-input-min-height-md: 2.5rem;
+  --lutra-input-min-height-lg: 2.75rem;
+
+  /* NO FIGMA VARIABLE. Figma centres the value inside a fixed height; this is the
+   * vertical breathing room the text needs once the field is free to grow. */
+  --lutra-input-padding-block: var(--lutra-space-2xs);
+
+  box-sizing: border-box;
+  inline-size: 100%;
+  max-inline-size: 100%;
+  margin: 0;
+  padding-block: var(--lutra-input-padding-block);
+  border-style: solid;
+  border-width: var(--lutra-input-border-width);
+  border-color: var(--lutra-input-border);
+  border-radius: var(--lutra-input-radius);
+  background-color: var(--lutra-input-surface);
+  color: var(--lutra-input-text);
+  font-family: var(--lutra-input-font-family);
+  font-weight: var(--lutra-input-font-weight);
+
+  /* Strips the platform's own field chrome — notably iOS Safari's inner shadow
+   * and rounded corners — so the token values are what shows. */
+  appearance: none;
+}
+
+/* Sizes.
+ *
+ * `min-block-size` rather than `height`: it reproduces the Figma height at the
+ * default font size and lets the field grow when the reader raises theirs. */
+
+.lutra-input[data-size='sm'] {
+  min-block-size: var(--lutra-input-min-height-sm);
+  padding-inline: var(--lutra-input-padding-inline-sm);
+  font-size: var(--lutra-input-font-size-sm);
+  line-height: var(--lutra-input-line-height-sm);
+}
+
+.lutra-input[data-size='md'] {
+  min-block-size: var(--lutra-input-min-height-md);
+  padding-inline: var(--lutra-input-padding-inline-md);
+  font-size: var(--lutra-input-font-size-md);
+  line-height: var(--lutra-input-line-height-md);
+}
+
+.lutra-input[data-size='lg'] {
+  min-block-size: var(--lutra-input-min-height-lg);
+  padding-inline: var(--lutra-input-padding-inline-lg);
+  font-size: var(--lutra-input-font-size-lg);
+  line-height: var(--lutra-input-line-height-lg);
+}
+
+/* Placeholder.
+ *
+ * A different token from the value, so an empty field and a filled one are
+ * distinguishable at a glance. Before this distinction existed both resolved to
+ * the same colour. It is an emphasis difference only — the placeholder still
+ * measures above 4.5:1 on both surfaces, because a placeholder is text and
+ * dimming it below AA to sharpen the contrast between the two is not a trade this
+ * library makes. `opacity: 1` overrides the faded default Firefox applies. */
+
+.lutra-input::placeholder {
+  color: var(--lutra-input-placeholder);
+  opacity: 1;
+}
+
+/* Interaction states. */
+
+.lutra-input:hover:not(:disabled) {
+  border-color: var(--lutra-input-border-hover);
+}
+
+/* Focus.
+ *
+ * Input draws focus by thickening its own border rather than adding a separate
+ * ring — a deliberate difference from Button, using the same `color/focus/ring`
+ * source. The thickening is not decoration: the focus colour against the resting
+ * border is only about 1.1:1, so a colour change alone would not be a perceivable
+ * indicator. The added pixel replaces surface, where the focus colour reaches
+ * roughly 3.8:1 on light and clears the 3:1 that WCAG 2.4.11 asks of the changed
+ * area. Removing the thickening would break the indicator.
+ *
+ * That pixel is added as an inset shadow rather than by raising `border-width`,
+ * so the value does not shift sideways when the field takes focus.
+ *
+ * The native outline is replaced, not removed — and `forced-colors` below covers
+ * the mode where a shadow is not painted at all. */
+
+.lutra-input:focus-visible {
+  border-color: var(--lutra-input-border-focus);
+  box-shadow: inset 0 0 0
+    calc(var(--lutra-input-border-width-focus) - var(--lutra-input-border-width))
+    var(--lutra-input-border-focus);
+  outline: none;
+}
+
+/* Invalid.
+ *
+ * Matched on `aria-invalid` so the look and the announced state are the same
+ * fact. Focus is ordered after this on purpose: a focused invalid field shows the
+ * focus indicator, because losing track of focus is the more serious failure and
+ * the error is still announced by `aria-invalid` and carried by the message the
+ * field wrapper renders. Figma does not draw the focused-and-invalid combination;
+ * this is recorded in `input.md`. */
+
+.lutra-input[aria-invalid='true'] {
+  border-color: var(--lutra-input-border-invalid);
+}
+
+.lutra-input[aria-invalid='true']:focus-visible {
+  border-color: var(--lutra-input-border-focus);
+}
+
+/* Disabled.
+ *
+ * Deliberate colours rather than an opacity wash, so the state is a real visual
+ * change. It is never the only signal: the field is natively disabled, so it is
+ * skipped by Tab, announced as unavailable, and rejects input.
+ *
+ * `-webkit-text-fill-color` is not redundant. iOS Safari renders disabled field
+ * text at reduced opacity and ignores `color`, which would wash out the chosen
+ * disabled token and undo the point of picking one. */
+
+.lutra-input:disabled {
+  border-color: var(--lutra-input-disabled-border);
+  background-color: var(--lutra-input-disabled-surface);
+  color: var(--lutra-input-disabled-text);
+  -webkit-text-fill-color: var(--lutra-input-disabled-text);
+  cursor: not-allowed;
+}
+
+.lutra-input:disabled::placeholder {
+  color: var(--lutra-input-disabled-text);
+  -webkit-text-fill-color: var(--lutra-input-disabled-text);
+}
+
+/* Read-only keeps the normal visual treatment. It stays focusable and its value
+ * stays selectable and copyable, which is the behaviour that distinguishes it
+ * from disabled, so it must not be dressed up to look unavailable. */
+
+/* Full width. Layout only.
+ *
+ * The base rule already fills the inline axis, which is what a field in a form
+ * almost always wants. `data-full-width` additionally opts out of any width a
+ * layout has constrained it to. */
+
+.lutra-input[data-full-width] {
+  inline-size: 100%;
+}
+
+/* Forced-colours modes.
+ *
+ * The system replaces the token colours, which is the point of the mode. What it
+ * does not do is paint the inset shadow the focus indicator is built from, so
+ * focus is restored here as a real outline in the system highlight colour.
+ * Disabled fields already pick up `GrayText` from the native attribute. */
+
+@media (forced-colors: active) {
+  .lutra-input:focus-visible {
+    outline: var(--lutra-input-border-width-focus) solid Highlight;
+    outline-offset: 1px;
+  }
+}
+
+/*
+ * Select.
+ *
+ * The public styling contract is the `lutra-select` class plus `data-size` and `data-full-width`,
+ * and `aria-invalid` for the error state — the same contract Input uses, and for the same reason:
+ * matching on the ARIA attribute means the look and the announced state cannot drift apart.
+ *
+ * Figma binds Select to the `component/input/*` alias layer rather than one of its own, so this
+ * consumes exactly the same tokens Input does. That is the design system's decision, not a
+ * shortcut: a select and a text field are the same surface with the same border states.
+ *
+ * ## Why there is a wrapper
+ *
+ * A `<select>` cannot render a pseudo-element, and a `background-image` chevron would have to be a
+ * fixed-colour asset — wrong in the other theme and wrong when disabled. The wrapper exists solely
+ * so the chevron can be a mask filled with a token colour. It is the smallest thing that keeps the
+ * chevron on the token system, and it is why this component has one when Input does not.
+ */
+
+.lutra-select-wrapper {
+  --lutra-select-chevron-size: 1rem;
+  --lutra-select-chevron-color: var(--lutra-component-input-text);
+
+  /* NO FIGMA VARIABLE. Figma lays the chevron out with auto-layout; in CSS the trailing space has
+   * to be reserved explicitly, so it is the leading padding plus the icon plus a gap. */
+  --lutra-select-chevron-gap: var(--lutra-space-sm);
+
+  position: relative;
+  display: block;
+  inline-size: 100%;
+}
+
+/* The chevron. A mask filled with `background-color`, so the glyph takes a token colour and follows
+ * the theme and the disabled state, rather than being a fixed-colour image. `pointer-events: none`
+ * keeps clicks going to the control underneath. */
+
+.lutra-select-wrapper::after {
+  content: '';
+  position: absolute;
+  inset-inline-end: var(--lutra-select-chevron-inset, var(--lutra-space-md));
+  inset-block-start: 50%;
+  transform: translateY(-50%);
+  inline-size: var(--lutra-select-chevron-size);
+  block-size: var(--lutra-select-chevron-size);
+  background-color: var(--lutra-select-chevron-color);
+  pointer-events: none;
+
+  --lutra-select-chevron-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
+  -webkit-mask-image: var(--lutra-select-chevron-glyph);
+  mask-image: var(--lutra-select-chevron-glyph);
+  -webkit-mask-repeat: no-repeat;
+  mask-repeat: no-repeat;
+  -webkit-mask-size: 100% 100%;
+  mask-size: 100% 100%;
+}
+
+/* The chevron greys out with the control, because it is part of the control. */
+.lutra-select-wrapper:has(> .lutra-select:disabled)::after {
+  --lutra-select-chevron-color: var(--lutra-color-text-disabled);
+}
+
+.lutra-select {
+  /* Shared with Input, by way of Figma's own bindings. */
+  --lutra-select-surface: var(--lutra-component-input-surface);
+  --lutra-select-text: var(--lutra-component-input-text);
+  --lutra-select-border: var(--lutra-component-input-border-default);
+  --lutra-select-border-hover: var(--lutra-component-input-border-hover);
+  --lutra-select-border-focus: var(--lutra-component-input-border-focus);
+  --lutra-select-border-invalid: var(--lutra-component-input-border-invalid);
+
+  /* NO `component/input/*` ALIAS. Figma binds the core disabled tokens directly, exactly as it does
+   * on Input; the alias layer has no disabled trio. See `select.md`. */
+  --lutra-select-disabled-surface: var(--lutra-color-background-disabled);
+  --lutra-select-disabled-border: var(--lutra-color-border-disabled);
+  --lutra-select-disabled-text: var(--lutra-color-text-disabled);
+
+  --lutra-select-radius: var(--lutra-radius-md);
+  --lutra-select-border-width: var(--lutra-border-width-thin);
+  --lutra-select-border-width-focus: var(--lutra-border-width-thick);
+  --lutra-select-font-family: var(--lutra-type-family-sans);
+  --lutra-select-font-weight: var(--lutra-type-weight-medium);
+
+  --lutra-select-padding-inline-sm: var(--lutra-space-sm);
+  --lutra-select-padding-inline-md: var(--lutra-space-md);
+  --lutra-select-padding-inline-lg: var(--lutra-space-lg);
+
+  --lutra-select-font-size-sm: var(--lutra-text-body-small);
+  --lutra-select-font-size-md: var(--lutra-text-body);
+  --lutra-select-font-size-lg: var(--lutra-text-h3);
+
+  --lutra-select-line-height-sm: var(--lutra-type-line-height-body-small);
+  --lutra-select-line-height-md: var(--lutra-type-line-height-body);
+  --lutra-select-line-height-lg: var(--lutra-type-line-height-h3);
+
+  /* NO FIGMA VARIABLE. Figma draws 36/40/44px fixed heights; these become `min-block-size` so the
+   * control grows with the reader's font size instead of clipping at 200% zoom. */
+  --lutra-select-min-height-sm: 2.25rem;
+  --lutra-select-min-height-md: 2.5rem;
+  --lutra-select-min-height-lg: 2.75rem;
+  --lutra-select-padding-block: var(--lutra-space-2xs);
+
+  box-sizing: border-box;
+  inline-size: 100%;
+  max-inline-size: 100%;
+  margin: 0;
+  padding-block: var(--lutra-select-padding-block);
+  border-style: solid;
+  border-width: var(--lutra-select-border-width);
+  border-color: var(--lutra-select-border);
+  border-radius: var(--lutra-select-radius);
+  background-color: var(--lutra-select-surface);
+  color: var(--lutra-select-text);
+  font-family: var(--lutra-select-font-family);
+  font-weight: var(--lutra-select-font-weight);
+  cursor: pointer;
+
+  /* Removes the platform's own dropdown arrow, so the Figma chevron is the only one drawn. */
+  appearance: none;
+}
+
+/* Sizes. `min-block-size` rather than `height`, so the control grows with the reader's font size.
+ * Trailing padding reserves room for the chevron. */
+
+.lutra-select[data-size='sm'] {
+  min-block-size: var(--lutra-select-min-height-sm);
+  padding-inline: var(--lutra-select-padding-inline-sm)
+    calc(
+      var(--lutra-select-padding-inline-sm) + var(--lutra-select-chevron-size) +
+        var(--lutra-select-chevron-gap)
+    );
+  font-size: var(--lutra-select-font-size-sm);
+  line-height: var(--lutra-select-line-height-sm);
+}
+
+.lutra-select[data-size='md'] {
+  min-block-size: var(--lutra-select-min-height-md);
+  padding-inline: var(--lutra-select-padding-inline-md)
+    calc(
+      var(--lutra-select-padding-inline-md) + var(--lutra-select-chevron-size) +
+        var(--lutra-select-chevron-gap)
+    );
+  font-size: var(--lutra-select-font-size-md);
+  line-height: var(--lutra-select-line-height-md);
+}
+
+.lutra-select[data-size='lg'] {
+  min-block-size: var(--lutra-select-min-height-lg);
+  padding-inline: var(--lutra-select-padding-inline-lg)
+    calc(
+      var(--lutra-select-padding-inline-lg) + var(--lutra-select-chevron-size) +
+        var(--lutra-select-chevron-gap)
+    );
+  font-size: var(--lutra-select-font-size-lg);
+  line-height: var(--lutra-select-line-height-lg);
+}
+
+/* The chevron sits at the same inset as the control's own padding, per size. */
+
+.lutra-select-wrapper:has(> .lutra-select[data-size='sm']) {
+  --lutra-select-chevron-inset: var(--lutra-space-sm);
+}
+
+.lutra-select-wrapper:has(> .lutra-select[data-size='md']) {
+  --lutra-select-chevron-inset: var(--lutra-space-md);
+}
+
+.lutra-select-wrapper:has(> .lutra-select[data-size='lg']) {
+  --lutra-select-chevron-inset: var(--lutra-space-lg);
+}
+
+/* Interaction states, matching Input. */
+
+.lutra-select:hover:not(:disabled) {
+  border-color: var(--lutra-select-border-hover);
+}
+
+/* Focus thickens the control's own border, as Input does. The extra pixel is an inset shadow rather
+ * than a wider border, so the value does not shift sideways on focus — and it is what makes the
+ * indicator perceivable: the focus colour against the resting border is only about 1.1:1, while the
+ * added pixel replaces surface, where it clears 3:1. */
+
+.lutra-select:focus-visible {
+  border-color: var(--lutra-select-border-focus);
+  box-shadow: inset 0 0 0
+    calc(var(--lutra-select-border-width-focus) - var(--lutra-select-border-width))
+    var(--lutra-select-border-focus);
+  outline: none;
+}
+
+.lutra-select[aria-invalid='true'] {
+  border-color: var(--lutra-select-border-invalid);
+}
+
+.lutra-select[aria-invalid='true']:focus-visible {
+  border-color: var(--lutra-select-border-focus);
+}
+
+.lutra-select:disabled {
+  border-color: var(--lutra-select-disabled-border);
+  background-color: var(--lutra-select-disabled-surface);
+  color: var(--lutra-select-disabled-text);
+  -webkit-text-fill-color: var(--lutra-select-disabled-text);
+  cursor: not-allowed;
+}
+
+/* The options popup is drawn by the operating system, not by this stylesheet. Setting a colour on
+ * the options is the one thing that reliably keeps it readable in dark mode on the browsers that
+ * respect it, without pretending the popup is ours to style. */
+
+.lutra-select option {
+  background-color: var(--lutra-select-surface);
+  color: var(--lutra-select-text);
+}
+
+/* Forced-colours modes. The mask is painted with `background-color`, which the system replaces, so
+ * the chevron survives. The inset focus shadow is not painted, so focus is restored as an outline. */
+
+@media (forced-colors: active) {
+  .lutra-select:focus-visible {
+    outline: var(--lutra-select-border-width-focus) solid Highlight;
+    outline-offset: 1px;
+  }
+}
+
+/*
+ * Checkbox, and the choice-item layout shared with Radio and Toggle.
+ *
+ * `.lutra-choice*` lives here because Checkbox is the first component to need it, the same way the
+ * `.lutra-field*` shell lives in `field.css` and serves Select Field too. Radio Item and Toggle Item
+ * reuse these classes rather than each defining their own — one label treatment, one description
+ * treatment, one gap.
+ *
+ * The control is a native `<input type="checkbox">` with `appearance: none`, drawn with its own
+ * pseudo-element. Once appearance is none the input is an ordinary box that accepts `::after`,
+ * which is what lets the mark be a mask filled with a token colour rather than a fixed-colour
+ * image that would be wrong in dark mode.
+ *
+ * The mixed state is selected with the native `:indeterminate` pseudo-class, which matches the DOM
+ * property assistive technology reads. There is no mirrored data attribute to fall out of step.
+ */
+
+.lutra-checkbox {
+  --lutra-checkbox-size: 1.25rem;
+  --lutra-checkbox-surface: var(--lutra-component-checkbox-surface);
+  --lutra-checkbox-border: var(--lutra-component-checkbox-border-default);
+  --lutra-checkbox-border-hover: var(--lutra-component-checkbox-border-hover);
+  --lutra-checkbox-border-invalid: var(--lutra-component-checkbox-border-invalid);
+  --lutra-checkbox-border-disabled: var(--lutra-component-checkbox-border-disabled);
+  --lutra-checkbox-fill-selected: var(--lutra-component-checkbox-fill-selected);
+  --lutra-checkbox-fill-selected-hover: var(--lutra-component-checkbox-fill-selected-hover);
+  --lutra-checkbox-fill-invalid: var(--lutra-component-checkbox-fill-invalid);
+  --lutra-checkbox-fill-disabled: var(--lutra-component-checkbox-fill-disabled);
+  --lutra-checkbox-mark: var(--lutra-component-checkbox-mark);
+  --lutra-checkbox-mark-on-danger: var(--lutra-component-checkbox-mark-on-danger);
+  --lutra-checkbox-mark-disabled: var(--lutra-component-checkbox-text-disabled);
+
+  --lutra-checkbox-radius: var(--lutra-radius-sm);
+  --lutra-checkbox-border-width: var(--lutra-border-width-thick);
+  --lutra-checkbox-focus-ring-color: var(--lutra-color-focus-ring);
+  --lutra-checkbox-focus-ring-width: var(--lutra-border-width-thick);
+
+  /* NO FIGMA VARIABLE. Figma draws the focus state as a 28px ring around the 20px box, which is a
+   * 2px ring at a 2px offset — the same geometry Button uses. */
+  --lutra-checkbox-focus-ring-offset: 2px;
+
+  box-sizing: border-box;
+  flex: 0 0 auto;
+  display: grid;
+  place-content: center;
+  inline-size: var(--lutra-checkbox-size);
+  block-size: var(--lutra-checkbox-size);
+  margin: 0;
+  border: var(--lutra-checkbox-border-width) solid var(--lutra-checkbox-border);
+  border-radius: var(--lutra-checkbox-radius);
+  background-color: var(--lutra-checkbox-surface);
+  cursor: pointer;
+  appearance: none;
+}
+
+/* The mark. A mask filled with a token colour, so it follows the theme and the disabled state. */
+
+.lutra-checkbox::after {
+  content: '';
+  inline-size: 0.75rem;
+  block-size: 0.75rem;
+  background-color: var(--lutra-checkbox-mark);
+
+  /* Nothing to show until the box is checked or mixed. */
+  -webkit-mask-image: none;
+  mask-image: none;
+  -webkit-mask-repeat: no-repeat;
+  mask-repeat: no-repeat;
+  -webkit-mask-position: center;
+  mask-position: center;
+  -webkit-mask-size: 100% 100%;
+  mask-size: 100% 100%;
+}
+
+.lutra-checkbox:checked:not(:indeterminate) {
+  --lutra-checkbox-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 6.5l2.5 2.5L10 3.5'/%3E%3C/svg%3E");
+}
+
+/* The mixed state is a dash, and it wins over the tick: a box can be checked in the DOM and mixed
+ * at the same time, and mixed is what is being communicated. */
+.lutra-checkbox:indeterminate {
+  --lutra-checkbox-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M3 6h6'/%3E%3C/svg%3E");
+}
+
+.lutra-checkbox:checked::after,
+.lutra-checkbox:indeterminate::after {
+  -webkit-mask-image: var(--lutra-checkbox-check);
+  mask-image: var(--lutra-checkbox-check);
+}
+
+.lutra-checkbox:checked,
+.lutra-checkbox:indeterminate {
+  border-color: var(--lutra-checkbox-fill-selected);
+  background-color: var(--lutra-checkbox-fill-selected);
+}
+
+/* Interaction states. */
+
+.lutra-checkbox:hover:not(:disabled) {
+  border-color: var(--lutra-checkbox-border-hover);
+}
+
+.lutra-checkbox:checked:hover:not(:disabled),
+.lutra-checkbox:indeterminate:hover:not(:disabled) {
+  border-color: var(--lutra-checkbox-fill-selected-hover);
+  background-color: var(--lutra-checkbox-fill-selected-hover);
+}
+
+/* Focus is a ring outside the box, not a border change: the box's own border already carries the
+ * checked state, so changing it would make two states fight for the same pixel. */
+
+.lutra-checkbox:focus-visible {
+  outline: var(--lutra-checkbox-focus-ring-width) solid var(--lutra-checkbox-focus-ring-color);
+  outline-offset: var(--lutra-checkbox-focus-ring-offset);
+}
+
+/* Invalid, matched on the ARIA attribute so the look and the announced state are one fact. */
+
+.lutra-checkbox[aria-invalid='true'] {
+  border-color: var(--lutra-checkbox-border-invalid);
+}
+
+.lutra-checkbox[aria-invalid='true']:checked,
+.lutra-checkbox[aria-invalid='true']:indeterminate {
+  border-color: var(--lutra-checkbox-border-invalid);
+  background-color: var(--lutra-checkbox-fill-invalid);
+}
+
+.lutra-checkbox[aria-invalid='true']:checked::after,
+.lutra-checkbox[aria-invalid='true']:indeterminate::after {
+  background-color: var(--lutra-checkbox-mark-on-danger);
+}
+
+/* Disabled. Deliberate colours rather than an opacity wash; the native attribute is what carries
+ * the state to assistive technology. */
+
+.lutra-checkbox:disabled {
+  border-color: var(--lutra-checkbox-border-disabled);
+  background-color: var(--lutra-checkbox-fill-disabled);
+  cursor: not-allowed;
+}
+
+.lutra-checkbox:disabled::after {
+  background-color: var(--lutra-checkbox-mark-disabled);
+}
+
+/* Forced-colours modes: the mask survives because it is painted with `background-color`, but the
+ * checked fill and the border are replaced by the system, so the mark needs to follow the system
+ * text colour to stay visible. */
+
+@media (forced-colors: active) {
+  .lutra-checkbox::after {
+    background-color: CanvasText;
+  }
+
+  .lutra-checkbox:disabled::after {
+    background-color: GrayText;
+  }
+}
+
+/*
+ * The choice item: a control beside a label and an optional description.
+ *
+ * Shared by Checkbox Item, Radio Item and Toggle Item. Toggle Item puts its control after the
+ * content, which is the only structural difference and is handled by a modifier.
+ */
+
+.lutra-choice {
+  --lutra-choice-gap: var(--lutra-space-md);
+  --lutra-choice-content-gap: var(--lutra-space-2xs);
+  --lutra-choice-label-color: var(--lutra-component-checkbox-label);
+  --lutra-choice-description-color: var(--lutra-component-checkbox-description);
+  --lutra-choice-label-size: var(--lutra-text-body);
+  --lutra-choice-label-line-height: var(--lutra-type-line-height-body);
+  --lutra-choice-description-size: var(--lutra-text-body-small);
+  --lutra-choice-description-line-height: var(--lutra-type-line-height-body-small);
+
+  display: flex;
+  align-items: flex-start;
+  gap: var(--lutra-choice-gap);
+  font-family: var(--lutra-type-family-sans);
+}
+
+.lutra-choice__content {
+  display: flex;
+  flex-direction: column;
+  gap: var(--lutra-choice-content-gap);
+  min-inline-size: 0;
+}
+
+/* The label is the click target as well as the name, so it gets the pointer cursor the control has.
+ * `display: block` and no height: a long label wraps and the row grows with it. */
+
+.lutra-choice__label {
+  display: block;
+  font-size: var(--lutra-choice-label-size);
+  line-height: var(--lutra-choice-label-line-height);
+  color: var(--lutra-choice-label-color);
+  cursor: pointer;
+  overflow-wrap: break-word;
+  text-wrap: pretty;
+}
+
+.lutra-choice__description {
+  margin: 0;
+  font-size: var(--lutra-choice-description-size);
+  line-height: var(--lutra-choice-description-line-height);
+  color: var(--lutra-choice-description-color);
+  overflow-wrap: break-word;
+  text-wrap: pretty;
+}
+
+.lutra-choice[data-disabled='true'] .lutra-choice__label {
+  color: var(--lutra-component-checkbox-text-disabled);
+  cursor: not-allowed;
+}
+
+.lutra-choice[data-disabled='true'] .lutra-choice__description {
+  color: var(--lutra-component-checkbox-text-disabled);
+}
+
+/*
+ * The control keeps its 20px drawn size, and the row reaches a comfortable pointer target through
+ * the label rather than by growing the box: the label is associated with `for`/`id`, so the whole
+ * of it is clickable. That is why nothing here sets a 44px height — a fixed height would clip a
+ * wrapped label, and the target is already larger than the control.
+ *
+ * The control is nudged down so it sits on the label's first line rather than its box top.
+ */
+
+.lutra-choice > .lutra-checkbox,
+.lutra-choice > .lutra-radio {
+  margin-block-start: calc(
+    (var(--lutra-choice-label-line-height) * 1em - var(--lutra-checkbox-size, 1.25rem)) / 2
+  );
+}
+
+/*
+ * Radio.
+ *
+ * The same 20px control as Checkbox, drawn round instead of square, with a dot instead of a tick.
+ * It reuses the `.lutra-choice*` layout defined in `checkbox.css`, so a radio row and a checkbox row
+ * are the same shape — same gap, same label treatment, same description treatment.
+ *
+ * The control is a native `<input type="radio">` with `appearance: none`, drawn with its own
+ * pseudo-element. Grouping, arrow-key navigation and single-selection all come from the element.
+ */
+
+.lutra-radio {
+  --lutra-radio-size: 1.25rem;
+  --lutra-radio-surface: var(--lutra-component-radio-surface);
+  --lutra-radio-border: var(--lutra-component-radio-border-default);
+  --lutra-radio-border-hover: var(--lutra-component-radio-border-hover);
+  --lutra-radio-border-invalid: var(--lutra-component-radio-border-invalid);
+  --lutra-radio-border-disabled: var(--lutra-component-radio-border-disabled);
+  --lutra-radio-fill-selected: var(--lutra-component-radio-fill-selected);
+  --lutra-radio-fill-selected-hover: var(--lutra-component-radio-fill-selected-hover);
+  --lutra-radio-fill-invalid: var(--lutra-component-radio-fill-invalid);
+  --lutra-radio-fill-disabled: var(--lutra-component-radio-fill-disabled);
+  --lutra-radio-mark: var(--lutra-component-radio-mark);
+  --lutra-radio-mark-on-danger: var(--lutra-component-radio-mark-on-danger);
+  --lutra-radio-mark-disabled: var(--lutra-component-radio-text-disabled);
+
+  --lutra-radio-border-width: var(--lutra-border-width-thick);
+  --lutra-radio-focus-ring-color: var(--lutra-color-focus-ring);
+  --lutra-radio-focus-ring-width: var(--lutra-border-width-thick);
+
+  /* NO FIGMA VARIABLE. Figma draws focus as a 28px ring around the 20px control — a 2px ring at a
+   * 2px offset, the same geometry Checkbox and Button use. */
+  --lutra-radio-focus-ring-offset: 2px;
+
+  /* NO FIGMA VARIABLE. Figma draws the selected dot at 8px inside the 20px control. */
+  --lutra-radio-mark-size: 0.5rem;
+
+  box-sizing: border-box;
+  flex: 0 0 auto;
+  display: grid;
+  place-content: center;
+  inline-size: var(--lutra-radio-size);
+  block-size: var(--lutra-radio-size);
+  margin: 0;
+  border: var(--lutra-radio-border-width) solid var(--lutra-radio-border);
+  border-radius: var(--lutra-radius-full);
+  background-color: var(--lutra-radio-surface);
+  cursor: pointer;
+  appearance: none;
+}
+
+/* The dot. A solid circle rather than a mask — a filled shape needs no glyph. */
+
+.lutra-radio::after {
+  content: '';
+  inline-size: var(--lutra-radio-mark-size);
+  block-size: var(--lutra-radio-mark-size);
+  border-radius: var(--lutra-radius-full);
+  background-color: transparent;
+}
+
+.lutra-radio:checked {
+  border-color: var(--lutra-radio-fill-selected);
+  background-color: var(--lutra-radio-fill-selected);
+}
+
+.lutra-radio:checked::after {
+  background-color: var(--lutra-radio-mark);
+}
+
+/* Interaction states. */
+
+.lutra-radio:hover:not(:disabled) {
+  border-color: var(--lutra-radio-border-hover);
+}
+
+.lutra-radio:checked:hover:not(:disabled) {
+  border-color: var(--lutra-radio-fill-selected-hover);
+  background-color: var(--lutra-radio-fill-selected-hover);
+}
+
+/* Focus is a ring outside the control, not a border change: the border already carries the selected
+ * state. */
+
+.lutra-radio:focus-visible {
+  outline: var(--lutra-radio-focus-ring-width) solid var(--lutra-radio-focus-ring-color);
+  outline-offset: var(--lutra-radio-focus-ring-offset);
+}
+
+/* Invalid.
+ *
+ * Matched on a data attribute rather than `aria-invalid`, which ARIA 1.2 deprecates on the radio
+ * role — a single option cannot usefully be invalid on its own. The semantic state lives at group
+ * level, which Field Group owns; this only draws it. */
+
+.lutra-radio[data-invalid] {
+  border-color: var(--lutra-radio-border-invalid);
+}
+
+.lutra-radio[data-invalid]:checked {
+  border-color: var(--lutra-radio-border-invalid);
+  background-color: var(--lutra-radio-fill-invalid);
+}
+
+.lutra-radio[data-invalid]:checked::after {
+  background-color: var(--lutra-radio-mark-on-danger);
+}
+
+/* Disabled. */
+
+.lutra-radio:disabled {
+  border-color: var(--lutra-radio-border-disabled);
+  background-color: var(--lutra-radio-fill-disabled);
+  cursor: not-allowed;
+}
+
+.lutra-radio:disabled:checked::after {
+  background-color: var(--lutra-radio-mark-disabled);
+}
+
+/* Forced-colours modes: the system replaces the fill, so the dot follows the system text colour to
+ * stay visible against it. */
+
+@media (forced-colors: active) {
+  .lutra-radio:checked::after {
+    background-color: CanvasText;
+  }
+
+  .lutra-radio:disabled:checked::after {
+    background-color: GrayText;
+  }
+}
+
+/*
+ * Toggle.
+ *
+ * A native `<input type="checkbox" role="switch">` with `appearance: none`, drawn as a track with a
+ * thumb on its own pseudo-element.
+ *
+ * The state is carried by the thumb's position as well as its colour, and `role="switch"` puts
+ * on/off in the accessibility tree — so nothing about this control depends on colour alone.
+ *
+ * There is deliberately **no transition** on the thumb. Motion tokens are still deferred in the
+ * design system, so a duration here would be an invented value rather than a system one. When the
+ * motion scale lands, the movement belongs on `--lutra-motion-*` and gets a
+ * `prefers-reduced-motion` guard with it.
+ */
+
+.lutra-toggle {
+  /* NO FIGMA VARIABLE. Figma draws the track at 40×24 with a 16px thumb, and no size scale exists
+   * for this component. */
+  --lutra-toggle-track-inline-size: 2.5rem;
+  --lutra-toggle-track-block-size: 1.5rem;
+  --lutra-toggle-thumb-size: 1rem;
+
+  --lutra-toggle-track-off: var(--lutra-component-toggle-track-off);
+  --lutra-toggle-track-on: var(--lutra-component-toggle-track-on);
+  --lutra-toggle-track-on-hover: var(--lutra-component-toggle-track-on-hover);
+  --lutra-toggle-track-disabled: var(--lutra-component-toggle-track-disabled);
+  --lutra-toggle-border: var(--lutra-component-toggle-border-default);
+  --lutra-toggle-border-hover: var(--lutra-component-toggle-border-hover);
+  --lutra-toggle-border-invalid: var(--lutra-component-toggle-border-invalid);
+  --lutra-toggle-thumb-off: var(--lutra-component-toggle-thumb-off);
+  --lutra-toggle-thumb-on: var(--lutra-component-toggle-thumb-on);
+  --lutra-toggle-thumb-disabled: var(--lutra-component-toggle-thumb-disabled);
+  --lutra-toggle-focus: var(--lutra-component-toggle-focus);
+
+  --lutra-toggle-border-width: var(--lutra-border-width-thin);
+  --lutra-toggle-focus-ring-width: var(--lutra-border-width-thick);
+
+  /* NO FIGMA VARIABLE. Figma draws the focus state as a thicker track border in the focus colour;
+   * this offsets a ring instead, matching every other control in the library, so a row of mixed
+   * controls shows one focus treatment. */
+  --lutra-toggle-focus-ring-offset: 2px;
+
+  box-sizing: border-box;
+  position: relative;
+  flex: 0 0 auto;
+  display: block;
+  inline-size: var(--lutra-toggle-track-inline-size);
+  block-size: var(--lutra-toggle-track-block-size);
+  margin: 0;
+  border: var(--lutra-toggle-border-width) solid var(--lutra-toggle-border);
+  border-radius: var(--lutra-radius-full);
+  background-color: var(--lutra-toggle-track-off);
+  cursor: pointer;
+  appearance: none;
+}
+
+/* The thumb. Its position is the primary signal — colour reinforces it. */
+
+.lutra-toggle::after {
+  content: '';
+  position: absolute;
+  inset-block-start: 50%;
+  inset-inline-start: calc(
+    (var(--lutra-toggle-track-block-size) - var(--lutra-toggle-thumb-size)) / 2 -
+      var(--lutra-toggle-border-width)
+  );
+  transform: translateY(-50%);
+  inline-size: var(--lutra-toggle-thumb-size);
+  block-size: var(--lutra-toggle-thumb-size);
+  border-radius: var(--lutra-radius-full);
+  background-color: var(--lutra-toggle-thumb-off);
+}
+
+.lutra-toggle:checked {
+  border-color: var(--lutra-toggle-track-on);
+  background-color: var(--lutra-toggle-track-on);
+}
+
+.lutra-toggle:checked::after {
+  inset-inline-start: auto;
+  inset-inline-end: calc(
+    (var(--lutra-toggle-track-block-size) - var(--lutra-toggle-thumb-size)) / 2 -
+      var(--lutra-toggle-border-width)
+  );
+  background-color: var(--lutra-toggle-thumb-on);
+}
+
+/* Interaction states. */
+
+.lutra-toggle:hover:not(:disabled) {
+  border-color: var(--lutra-toggle-border-hover);
+}
+
+.lutra-toggle:checked:hover:not(:disabled) {
+  border-color: var(--lutra-toggle-track-on-hover);
+  background-color: var(--lutra-toggle-track-on-hover);
+}
+
+.lutra-toggle:focus-visible {
+  outline: var(--lutra-toggle-focus-ring-width) solid var(--lutra-toggle-focus);
+  outline-offset: var(--lutra-toggle-focus-ring-offset);
+}
+
+/* Invalid — visual only; see `toggle.md`. */
+
+.lutra-toggle[data-invalid] {
+  border-color: var(--lutra-toggle-border-invalid);
+}
+
+/* Disabled. */
+
+.lutra-toggle:disabled {
+  background-color: var(--lutra-toggle-track-disabled);
+  cursor: not-allowed;
+}
+
+.lutra-toggle:disabled::after {
+  background-color: var(--lutra-toggle-thumb-disabled);
+}
+
+/* Forced-colours modes: the system replaces the track fill, so the thumb takes the system text
+ * colour to stay visible, and the border carries the on/off difference. */
+
+@media (forced-colors: active) {
+  .lutra-toggle::after {
+    background-color: CanvasText;
+  }
+
+  .lutra-toggle:disabled::after {
+    background-color: GrayText;
+  }
+}
+
+/*
+ * The trailing-control variant of the choice row.
+ *
+ * Toggle Item puts the label first and the switch at the end — a settings-list convention, where the
+ * name of the setting reads first and the switches line up down the right edge. Checkbox Item and
+ * Radio Item put the control first. Both use `.lutra-choice`; only the order and the gap differ.
+ *
+ * The DOM order matches the visual order, so reading order and Tab order agree with what is drawn.
+ */
+
+.lutra-choice--trailing {
+  --lutra-choice-gap: var(--lutra-space-lg);
+
+  justify-content: space-between;
+}
+
+.lutra-choice--trailing .lutra-choice__content {
+  flex: 1 1 auto;
+}
+
+/* Aligned to the first line of the label rather than the top of the row, so a two-line label does
+ * not leave the switch floating. */
+.lutra-choice--trailing > .lutra-toggle {
+  margin-block-start: calc(
+    (var(--lutra-choice-label-line-height) * 1em - var(--lutra-toggle-track-block-size)) / 2
+  );
+}
+
+.lutra-choice[data-disabled='true'] > .lutra-toggle {
+  cursor: not-allowed;
+}
+
+/*
+ * Field.
+ *
+ * These classes are shared: `Field` and `SelectField` render the same shell around different
+ * controls, so both use `.lutra-field*`. The control inside brings its own styling.
+ *
+ * Order is label → hint → control → error, expressed as source order in a vertical stack rather
+ * than by any reordering property, so the visual order and the DOM order — which is the order a
+ * screen reader and the Tab key follow — are the same thing.
+ *
+ * Figma composes the field with 4px auto-layout spacing and draws its supporting text below the
+ * control, because the component models one supporting slot that becomes the error when invalid.
+ * The accessibility annotation is the behavioural contract and puts the error below the control
+ * while a hint is guidance read before typing, so the implementation splits them. See `field.md`.
+ */
+
+.lutra-field {
+  --lutra-field-gap: var(--lutra-space-xs);
+  --lutra-field-label-color: var(--lutra-color-text-primary);
+  --lutra-field-label-size: var(--lutra-text-body-small);
+  --lutra-field-label-line-height: var(--lutra-type-line-height-body-small);
+
+  /* NO FIGMA VARIABLE. The label and hint are the same size, so weight is what separates them.
+   * Figma binds no weight variable on these text nodes. */
+  --lutra-field-label-weight: var(--lutra-type-weight-medium);
+  --lutra-field-hint-weight: var(--lutra-type-weight-regular);
+
+  /* Figma draws the Field hint in text/primary. Field Group draws its hint in text/secondary.
+   * Both are reproduced as drawn; the divergence is recorded in `field.md` for the design system
+   * to reconcile rather than being resolved unilaterally here. */
+  --lutra-field-hint-color: var(--lutra-color-text-primary);
+  --lutra-field-error-color: var(--lutra-component-field-error-text);
+  --lutra-field-indicator-color: var(--lutra-color-text-primary);
+  --lutra-field-indicator-required-color: var(--lutra-component-field-error-text);
+
+  display: flex;
+  flex-direction: column;
+  gap: var(--lutra-field-gap);
+  font-family: var(--lutra-type-family-sans);
+}
+
+/* Normal inline flow rather than flex, so the indicator wraps inline with the label text the way
+ * the annotation describes, and so the space between them is a real text space that the accessible
+ * name includes. A flex `gap` would look right and read as "Email addressRequired". */
+
+.lutra-field__label {
+  display: block;
+  font-size: var(--lutra-field-label-size);
+  line-height: var(--lutra-field-label-line-height);
+  font-weight: var(--lutra-field-label-weight);
+  color: var(--lutra-field-label-color);
+
+  /* A long label wraps and grows the field. Nothing here sets a height. */
+  overflow-wrap: break-word;
+  text-wrap: pretty;
+}
+
+/* The indicator wraps inline with the label text rather than sitting in its own column, so a long
+ * label pushes it onto the next line instead of squeezing the label. It is inside the <label>, so
+ * it is part of the accessible name. */
+
+.lutra-field__indicator {
+  font-weight: var(--lutra-field-hint-weight);
+  color: var(--lutra-field-indicator-color);
+}
+
+.lutra-field__indicator[data-indicator='required'] {
+  color: var(--lutra-field-indicator-required-color);
+}
+
+.lutra-field__hint,
+.lutra-field__error {
+  margin: 0;
+  font-size: var(--lutra-field-label-size);
+  line-height: var(--lutra-field-label-line-height);
+  font-weight: var(--lutra-field-hint-weight);
+  overflow-wrap: break-word;
+  text-wrap: pretty;
+}
+
+.lutra-field__hint {
+  color: var(--lutra-field-hint-color);
+}
+
+.lutra-field__error {
+  color: var(--lutra-field-error-color);
+}
+
+/* Invalid.
+ *
+ * The label takes the error colour, which is what Figma draws. Colour is never the only signal: the
+ * control carries `aria-invalid`, and the error message is text rather than a coloured decoration.
+ */
+
+.lutra-field[data-invalid='true'] .lutra-field__label {
+  color: var(--lutra-field-error-color);
+}
+
+/*
+ * Field Group.
+ *
+ * A native `<fieldset>` and `<legend>`. Both come with default browser styling that has to be
+ * cleared before they can be laid out — a fieldset has a border and padding, and a legend sits
+ * inside that border with its own inline behaviour. Everything below the reset is the design.
+ *
+ * Order is legend → hint → controls → error, matching Field, expressed as source order so the drawn
+ * order and the reading order are the same.
+ */
+
+.lutra-field-group {
+  --lutra-field-group-gap: var(--lutra-space-sm);
+  --lutra-field-group-item-gap: var(--lutra-space-md);
+  --lutra-field-group-legend-color: var(--lutra-color-text-primary);
+  --lutra-field-group-legend-size: var(--lutra-text-body);
+  --lutra-field-group-legend-line-height: var(--lutra-type-line-height-body);
+  --lutra-field-group-hint-color: var(--lutra-color-text-secondary);
+  --lutra-field-group-hint-size: var(--lutra-text-body-small);
+  --lutra-field-group-hint-line-height: var(--lutra-type-line-height-body-small);
+  --lutra-field-group-error-color: var(--lutra-component-field-error-text);
+  --lutra-field-group-error-gap: var(--lutra-space-xs);
+
+  /* NO FIGMA VARIABLE. Figma binds no weight on the legend; it is heavier than the options so the
+   * question reads before the answers. */
+  --lutra-field-group-legend-weight: var(--lutra-type-weight-medium);
+
+  /* Clearing the browser's own fieldset chrome. */
+  min-inline-size: 0;
+  margin: 0;
+  padding: 0;
+  border: 0;
+
+  display: flex;
+  flex-direction: column;
+  gap: var(--lutra-field-group-gap);
+  font-family: var(--lutra-type-family-sans);
+}
+
+/* A legend is not an ordinary flex item — browsers give it special placement inside the fieldset
+ * border. `float: left` with a full-width clear is the reliable way to make it behave as a normal
+ * block at the top of the stack without losing its semantics. */
+
+.lutra-field-group__legend {
+  float: left;
+  inline-size: 100%;
+  padding: 0;
+  font-size: var(--lutra-field-group-legend-size);
+  line-height: var(--lutra-field-group-legend-line-height);
+  font-weight: var(--lutra-field-group-legend-weight);
+  color: var(--lutra-field-group-legend-color);
+  overflow-wrap: break-word;
+  text-wrap: pretty;
+}
+
+.lutra-field-group__legend + * {
+  clear: both;
+}
+
+.lutra-field-group__hint {
+  margin: 0;
+  font-size: var(--lutra-field-group-hint-size);
+  line-height: var(--lutra-field-group-hint-line-height);
+  color: var(--lutra-field-group-hint-color);
+  overflow-wrap: break-word;
+  text-wrap: pretty;
+}
+
+.lutra-field-group__items {
+  display: flex;
+  flex-direction: column;
+  gap: var(--lutra-field-group-item-gap);
+}
+
+/* The error.
+ *
+ * An icon beside the message, which is what Figma draws here — and what Field's error does not have.
+ * The difference is reproduced rather than reconciled; see `field-group.md`. The icon is decorative,
+ * so the signal is the message text and the shape, never the colour alone.
+ */
+
+.lutra-field-group__error {
+  display: flex;
+  align-items: flex-start;
+  gap: var(--lutra-field-group-error-gap);
+  margin: 0;
+  font-size: var(--lutra-field-group-hint-size);
+  line-height: var(--lutra-field-group-hint-line-height);
+  color: var(--lutra-field-group-error-color);
+  overflow-wrap: break-word;
+  text-wrap: pretty;
+}
+
+.lutra-field-group__error-icon {
+  flex: 0 0 auto;
+  inline-size: 1rem;
+  block-size: 1rem;
+
+  /* Nudged onto the first line of the message rather than the top of its box. */
+  margin-block-start: calc((var(--lutra-field-group-hint-line-height) * 1em - 1rem) / 2);
+}
+
+/*
+ * Error Summary.
+ *
+ * Shown above the form after a failed submit, and only then. The red border and the alert icon both
+ * carry the meaning, and the heading says it in words, so nothing here depends on colour alone.
+ */
+
+.lutra-error-summary {
+  --lutra-error-summary-surface: var(--lutra-color-background-surface);
+  --lutra-error-summary-border: var(--lutra-color-feedback-danger);
+  --lutra-error-summary-border-width: var(--lutra-border-width-thick);
+  --lutra-error-summary-radius: var(--lutra-radius-md);
+  --lutra-error-summary-padding: var(--lutra-space-xl);
+  --lutra-error-summary-gap: var(--lutra-space-md);
+  --lutra-error-summary-row-gap: var(--lutra-space-sm);
+  --lutra-error-summary-title: var(--lutra-color-text-primary);
+  --lutra-error-summary-link: var(--lutra-component-field-error-text);
+  --lutra-error-summary-focus-ring-color: var(--lutra-color-focus-ring);
+  --lutra-error-summary-focus-ring-width: var(--lutra-border-width-thick);
+
+  /* NO FIGMA VARIABLE. The same 2px offset every other Lutra control uses for its focus ring. */
+  --lutra-error-summary-focus-ring-offset: 2px;
+
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  gap: var(--lutra-error-summary-gap);
+  padding: var(--lutra-error-summary-padding);
+
+  border: var(--lutra-error-summary-border-width) solid var(--lutra-error-summary-border);
+  border-radius: var(--lutra-error-summary-radius);
+  background-color: var(--lutra-error-summary-surface);
+  font-family: var(--lutra-type-family-sans);
+}
+
+/* The container takes focus programmatically, so its ring has to be visible when it does — this is
+ * one of the few places `:focus` rather than `:focus-visible` is right, because the focus was moved
+ * by the application and there is no keystroke for the browser to judge. */
+
+.lutra-error-summary:focus {
+  outline: var(--lutra-error-summary-focus-ring-width) solid
+    var(--lutra-error-summary-focus-ring-color);
+  outline-offset: var(--lutra-error-summary-focus-ring-offset);
+}
+
+.lutra-error-summary__heading-row {
+  display: flex;
+  align-items: flex-start;
+  gap: var(--lutra-error-summary-row-gap);
+}
+
+.lutra-error-summary__icon {
+  flex: 0 0 auto;
+  inline-size: 1.5rem;
+  block-size: 1.5rem;
+  color: var(--lutra-error-summary-border);
+}
+
+.lutra-error-summary__title {
+  margin: 0;
+  font-size: var(--lutra-text-h3);
+  line-height: var(--lutra-type-line-height-h3);
+  font-weight: var(--lutra-type-weight-semibold);
+  color: var(--lutra-error-summary-title);
+  overflow-wrap: break-word;
+  text-wrap: pretty;
+}
+
+.lutra-error-summary__list {
+  display: flex;
+  flex-direction: column;
+  gap: var(--lutra-error-summary-row-gap);
+  margin: 0;
+  padding: 0;
+
+  /* A real list for the count, without the marker — the number of problems is the point, and the
+   * bullets would compete with the link underlines. */
+  list-style: none;
+}
+
+.lutra-error-summary__link {
+  color: var(--lutra-error-summary-link);
+  font-size: var(--lutra-text-body);
+  line-height: var(--lutra-type-line-height-body);
+
+  /* Underlined at rest: these are links inside a block of red text, and colour alone would not
+   * separate them from the message they sit in. */
+  text-decoration-line: underline;
+  text-decoration-thickness: from-font;
+  text-underline-offset: 0.2em;
+  overflow-wrap: break-word;
+}
+
+.lutra-error-summary__link:hover {
+  text-decoration-thickness: 0.125em;
+}
+
+.lutra-error-summary__link:focus-visible {
+  outline: var(--lutra-error-summary-focus-ring-width) solid
+    var(--lutra-error-summary-focus-ring-color);
+  outline-offset: var(--lutra-error-summary-focus-ring-offset);
+  border-radius: var(--lutra-radius-sm);
+}
+
+/* Forced-colours modes: the red border is not painted, so the border is pinned to the system's own
+ * boundary colour and the focus ring to its highlight. */
+
+@media (forced-colors: active) {
+  .lutra-error-summary {
+    border-color: CanvasText;
+  }
+
+  .lutra-error-summary:focus,
+  .lutra-error-summary__link:focus-visible {
+    outline-color: Highlight;
+  }
+}
+