/**
 * @armage/tokens — Armage Design System custom properties.
 *
 * Source: the Armage Design System artifact (sole author: owner), corrected
 * per docs/architecture/design-system-audit-2026-09-16.md:
 *   - restored tokens the 2026-09-16 migration dropped (measures, signal/label
 *     type composites, dark hairline overrides)
 *   - type styles carry the SPEC metrics (typography.md), not the broken 1.4
 *     line-height regeneration
 *   - contrast fixes A1-A5: focus ring >=3:1 on paper, --text-accent on
 *     console, links on sunken ground
 *   - migration-artifact tokens removed (--text-text-*, duplicate aliases)
 * Themes: :root = paper. [data-theme='console'] = console. Surfaces are
 * classes (.ground-*), not themes. Verified by src/contrast.test.ts.
 */

:root {
  /* ── ink ramp (warm neutral) ─────────────────────────────────────── */
  --ink-0: #f7f5f1;
  --ink-50: #efebe4;
  --ink-100: #dedacf;
  --ink-200: #c4bfb0;
  --ink-300: #a6a092;
  --ink-400: #89826f;
  --ink-500: #6e675a;
  --ink-600: #564f44;
  --ink-700: #3f3a31;
  --ink-800: #2b2722;
  --ink-900: #201e1a;
  --ink-950: #141210;

  /* ── accents and semantics ───────────────────────────────────────── */
  --signal-100: #d6f7e3;
  --signal-300: #7fe4a8;
  --signal-500: #2ed16a;
  --signal-600: #1fa954;
  --signal-700: #16803f;
  --signal-800: #0f5c2c;
  --caution-500: #e5c042;
  --caution-600: #c09c1f;
  --caution-700: #7a6210;
  --danger-500: #e5533d;
  --danger-600: #b5402c;
  --info-500: #4c8df6;
  --info-600: #2c6ad1;
  --info-700: #1e4d9e;

  /* ── grounds ─────────────────────────────────────────────────────── */
  --bg-paper: #faf7f0;
  --bg-surface: #fdfbf6;
  --bg-sunken: #f2ede1;
  --bg-console: #141210;
  --bg-console-raised: #1d1b17;
  --bg-console-sunken: #0c0b0a;

  --ground-default: var(--bg-paper);
  --ground-raised: var(--bg-surface);
  --ground-sunken: var(--bg-sunken);
  --ground-dark: var(--bg-console);
  --ground-dark-raised: var(--bg-console-raised);

  /* ── text ────────────────────────────────────────────────────────── */
  --text-primary: var(--ink-900);
  --text-secondary: var(--ink-600);
  --text-tertiary: var(--ink-500);
  --text-inverse: #f7f5f1;
  --text-inverse-secondary: #a8a29a;
  --text-inverse-tertiary: #8a847b;
  --text-accent: var(--signal-700);
  --text-link: var(--signal-700);
  --text-link-hover: var(--signal-800);

  /* ── borders ─────────────────────────────────────────────────────── */
  --border-subtle: var(--ink-100);
  --border-default: var(--ink-200);
  --border-strong: var(--ink-400);
  --border-console: #2e2b26;
  --border-console-strong: #474339;
  --border-width-hairline: 1px;
  --border-width-bracket: 2px;
  --bracket-width: 2px;
  --bracket-color: var(--signal-500);
  --bracket-color-caution: var(--caution-500);
  --border-hairline: 1px solid var(--ink-100);
  --border-hairline-default: 1px solid var(--ink-200);
  --border-hairline-strong: 1px solid var(--ink-400);
  --border-hairline-dark: 1px solid var(--border-console);
  --border-hairline-dark-strong: 1px solid var(--border-console-strong);
  --rule-row: 1px solid var(--ink-100);
  --rule-row-dark: 1px solid var(--border-console);

  /* ── interaction ─────────────────────────────────────────────────── */
  --accent-primary: var(--signal-500);
  --accent-primary-hover: var(--signal-600);
  --accent-primary-press: var(--signal-700);
  --accent-on-primary: #0c0b0a;
  --accent-secondary: var(--info-500);
  --accent-secondary-hover: var(--info-600);
  /* A1 fix: signal-500 on paper is 1.88:1 — below the 3:1 non-text floor.
     On paper the ring is signal-700 (4.66:1); console overrides to 500. */
  --focus-ring: var(--signal-700);
  --focus-ring-width: 3px;
  --focus-ring-offset: 2px;
  --on-state-fill: var(--accent-on-primary);
  /* v2 (Oct 2026) call to action: the ink block with the green tick on
     cream; the console theme and .ar-on-dark swap it to the green block with
     near-black type and tick (ink on near-black vanishes). Signal-500 on
     ink-900 is 8.3:1, so green may be this small here. One primary per view. */
  --cta-fill: var(--ink-900);
  --cta-fill-hover: var(--ink-800);
  --cta-fill-press: var(--ink-950);
  --cta-ink: var(--text-inverse);
  --cta-tick: var(--signal-500);
  /* Alias for components that read a *-ring-color name (DS v2 bundle). */
  --focus-ring-color: var(--focus-ring);

  /* ── washes and scrims ───────────────────────────────────────────── */
  --scrim-modal: rgba(12, 11, 10, 0.62);
  --scrim-image: rgba(20, 18, 16, 0.38);
  --veil-on-cream: rgba(32, 30, 26, 0.06);
  --veil-on-cream-press: rgba(32, 30, 26, 0.12);
  --veil-on-dark: rgba(247, 245, 241, 0.08);
  --veil-on-dark-press: rgba(247, 245, 241, 0.14);
  /* v2 (Oct 2026): the one sanctioned gradient — signal green at 22% as a
     soft radial LIGHT inside a box (console plan band, glass plan band,
     feature window, console CTA box). Never a section wash, never under
     type smaller than --signal-type-min-size on cream. */
  --signal-glow: rgba(46, 209, 106, 0.22);

  /* ── surface-aware state colours (the markings lookup) ───────────── */
  --signal-type-large: var(--signal-500);
  --signal-type-small: var(--signal-700);
  /* v2: green is legal as TYPE on cream only at this size or larger
     (material.md, client decision; 1.9:1, a documented brand exception). */
  --signal-type-min-size: 24px;
  --signal-on-cream: var(--signal-700);
  --caution-on-cream: var(--caution-700);
  --danger-on-cream: var(--danger-600);
  --info-on-cream: var(--info-600);
  --signal-on-sunken: var(--signal-800);
  --caution-on-sunken: var(--caution-700);
  --danger-on-sunken: var(--danger-600);
  --info-on-sunken: var(--info-700);
  --signal-on-dark: var(--signal-500);
  --caution-on-dark: var(--caution-500);
  --danger-on-dark: var(--danger-500);
  --info-on-dark: var(--info-500);

  /* ── exit actions (brand rule, 2026-10-09) ───────────────────────────
     Sign out, log out, leave a workspace: an exit is quiet at rest (the
     control's own colours) and turns to the danger lookup only on hover or
     keyboard focus - a soft wash of --danger-on-cream at --exit-wash-mix,
     type and border in --danger-on-cream, a short fade (--exit-motion), and
     the exit arrow steps 2px outward (--exit-nudge; none under reduced
     motion). Never red at rest: red at rest means an error or a destructive
     action that deletes something. Compose the wash where it is used so it
     follows the surface (cream; .ground-sunken and the console theme set it to 0%):
       background: color-mix(in srgb, var(--danger-on-cream) var(--exit-wash-mix), transparent); */
  --exit-wash-mix: 9%;
  --exit-motion: var(--duration-fast) var(--ease-out);
  --exit-nudge: -2px;

  /* ── glass / plate material ──────────────────────────────────────── */
  --plate-ink-fill: rgba(20, 18, 16, 0.3);
  --plate-ink-edge: rgba(250, 247, 240, 0.2);
  --plate-ink-text: #faf7f0;
  --plate-cream-fill: rgba(253, 251, 246, 0.62);
  --plate-cream-edge: rgba(32, 30, 26, 0.1);
  --plate-cream-text: var(--ink-900);
  --chrome-ink-fill: rgba(20, 18, 16, 0.72);
  --chrome-cream-fill: rgba(250, 247, 240, 0.82);
  --overlay-ink-fill: rgba(20, 18, 16, 0.86);
  --overlay-cream-fill: rgba(250, 247, 240, 0.92);
  --plate-ink-fill-compact: rgba(20, 18, 16, 0.46);
  --plate-cream-fill-compact: rgba(253, 251, 246, 0.78);
  --chrome-ink-fill-compact: rgba(20, 18, 16, 0.84);
  --chrome-cream-fill-compact: rgba(250, 247, 240, 0.9);
  --overlay-ink-fill-compact: rgba(20, 18, 16, 0.93);
  --overlay-cream-fill-compact: rgba(250, 247, 240, 0.96);
  --plate-ink-rule: rgba(250, 247, 240, 0.12);
  --plate-cream-rule: rgba(32, 30, 26, 0.08);
  --plate-blur: 14px;
  --plate-radius: 3px;
  --plate-motion: 180ms;
  --plate-saturate: 1.15;
  --plate-highlight: inset 0 1px 0 rgba(250, 247, 240, 0.28);
  --plate-highlight-light: inset 0 1px 0 rgba(253, 251, 246, 0.75);
  /* v2: glass casts no shadow; the overlay tier is the one exception. */
  --plate-shadow: none;
  --overlay-shadow: var(--shadow-console-md);
  --border-hairline-plate: 1px solid var(--plate-ink-edge);
  --glass-float-inset: 16px;
  --glass-float-radius: 8px;
  --blur-overlay: 8px;
  --grain-size: 200px;
  --grain-on-cream: 0.055;
  --grain-on-dark: 0.075;
  --grain-on-image: 0.11;
  /* v2: the grain tile is a same-origin SVG beside this file (feTurbulence,
     one 200px tile) — not a data: URI, which the site CSP (img-src 'self')
     would block. Bundlers resolve it like the fonts below. */
  --grain-tile: url('./grain.svg?v=15b2292d');
  /* Stacking inside a grounded box: grain above the ground, content above
     the grain, a glass plate above both (grain never crosses onto a plate). */
  --z-page-grain: 0;
  --z-ground-grain: 1;
  --z-sheet: 1;
  --z-plate: 2;

  /* ── liquid instruments ──────────────────────────────────────────── */
  --liquid-trough-cream: var(--bg-sunken);
  --liquid-volume-cream: var(--bg-surface);
  /* TODO(owner): #ffffff is the palette's only pure white (its own rule
     forbids it) but nothing lighter than bg-surface exists for the hover
     wash. Kept pending an owner design pass — see audit. */
  --liquid-volume-hover-cream: #ffffff;
  --liquid-edge-cream: var(--signal-on-cream);
  --liquid-tick-cream: var(--border-strong);
  --liquid-range-cream: var(--ink-500);
  --liquid-ink-cream: var(--text-primary);
  --liquid-trough-ink: var(--plate-ink-fill);
  --liquid-volume-ink: rgba(250, 247, 240, 0.14);
  --liquid-volume-hover-ink: rgba(250, 247, 240, 0.2);
  --liquid-edge-ink: rgba(250, 247, 240, 0.92);
  --liquid-tick-ink: rgba(250, 247, 240, 0.28);
  --liquid-range-ink: rgba(250, 247, 240, 0.55);
  --liquid-ink-ink: rgba(250, 247, 240, 0.9);
  --liquid-height: 52px;
  --liquid-inset: 3px;
  --liquid-tick-size: 3px;
  --liquid-radius: 12px;
  --liquid-vol-radius: 8px;
  --liquid-edge-width: 2px;
  --liquid-edge-height: 58%;
  --liquid-stops: 9;

  /* ── shadows ─────────────────────────────────────────────────────── */
  --shadow-sm: 0 1px 2px rgba(23, 22, 19, 0.08);
  --shadow-md: 0 2px 8px rgba(23, 22, 19, 0.1), 0 1px 2px rgba(23, 22, 19, 0.08);
  --shadow-lg: 0 8px 24px rgba(23, 22, 19, 0.14), 0 2px 6px rgba(23, 22, 19, 0.08);
  --shadow-console-sm: 0 1px 2px rgba(0, 0, 0, 0.5);
  --shadow-console-md: 0 4px 16px rgba(0, 0, 0, 0.55);
  --shadow-focus: 0 0 0 3px rgba(46, 209, 106, 0.38);
  --shadow-inset-hairline: inset 0 0 0 1px var(--ink-200);

  /* ── spacing (4px baseline) ──────────────────────────────────────── */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
  --space-32: 128px;
  --baseline: 4px;
  --subunit: 8px;
  --rhythm-section: 96px;
  --rhythm-block: 56px;
  --rhythm-group: 32px;
  --rhythm-item: 16px;
  --rhythm-tight: 8px;

  /* ── grid ────────────────────────────────────────────────────────── */
  --grid-columns: 12;
  --grid-gutter: 32px;
  --grid-margin: 112px;
  --grid-column: 72px;
  --grid-canvas: 1440px;
  --grid-content: 1216px;
  --grid-columns-compact: 4;
  --grid-gutter-compact: 16px;
  --grid-margin-compact: 20px;
  --grid-columns-tablet: 8;
  --grid-gutter-tablet: 24px;
  --grid-margin-tablet: 32px;
  --grid-columns-laptop: 12;
  --grid-gutter-laptop: 24px;
  --grid-margin-laptop: 56px;
  --bp-compact: 480px;
  --bp-tablet: 768px;
  --bp-laptop: 1024px;
  --bp-wide: 1440px;

  /* ── measures (restored — dropped in the artifact migration) ─────── */
  --measure-body: 72ch;
  --measure-comfort: 62ch;
  --measure-lede: 48ch;
  --measure-display: 16ch;

  /* ── radii ───────────────────────────────────────────────────────── */
  --radius-none: 0px;
  --radius-sm: 2px;
  --radius-md: 4px;
  --radius-lg: 8px;
  --radius-xl: 12px;
  --radius-full: 999px;
  /* v2 (Oct 2026) role names — one corner language. radius-control on
     everything clicked or selected (buttons, chips, tags, tabs, inputs, logo
     tiles); radius-box on everything that holds content (cards, plan cards,
     feature boxes, compare tables, CTA boxes, dialogs). Pills are retired:
     radius-full only for things round by nature (dots, avatars, troughs). */
  --radius-control: var(--radius-sm);
  --radius-box: var(--radius-lg);

  /* ── motion ──────────────────────────────────────────────────────── */
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out: cubic-bezier(0, 0, 0.2, 1);
  --ease-entrance: cubic-bezier(0.16, 0.84, 0.44, 1);
  --duration-fast: 120ms;
  --duration-standard: 180ms;
  --duration-slow: 280ms;
  --duration-entrance: 420ms;
  --slide-state: 4px;
  /* Reveal and route-transition values are not here: the motion system owns
     them, configured in one place (packages/motion/src/system/config.ts) and
     generated into its own variables.css. */

  /* ── opacity ─────────────────────────────────────────────────────── */
  --opacity-disabled: 0.4;
  --opacity-ghost: 0.56;
  --opacity-scrim: 0.62;
  --opacity-veil-hover: 0.06;
  --opacity-veil-press: 0.12;
  --opacity-hairline-on-dark: 0.16;
  --opacity-0: 0;
  --opacity-full: 1;

  /* ── z scale ─────────────────────────────────────────────────────── */
  --z-below: -1;
  --z-base: 0;
  --z-raised: 100;
  --z-sticky: 200;
  --z-nav: 300;
  --z-dropdown: 400;
  --z-scrim: 500;
  --z-modal: 600;
  --z-toast: 700;
  --z-tooltip: 800;
  --z-debug: 900;

  /* ── type: families ──────────────────────────────────────────────── */
  --font-core: 'Archivo', 'Helvetica Neue', Helvetica, sans-serif;
  --font-signal: 'Martian Mono', ui-monospace, monospace;

  /* ── type: composed styles (spec metrics from typography.md).
       font shorthand cannot carry letter-spacing — pair with --tracking-*. */
  --type-display-xl: 400 88px/0.92 var(--font-core);
  --type-display-l: 400 64px/0.92 var(--font-core);
  --type-display-m: 400 48px/1.05 var(--font-core);
  --type-headline: 400 32px/1.05 var(--font-core);
  --type-title: 500 24px/1.25 var(--font-core);
  --type-subtitle: 500 20px/1.25 var(--font-core);
  --type-body-l: 400 18px/1.65 var(--font-core);
  --type-body: 400 16px/1.5 var(--font-core);
  --type-body-s: 400 14px/1.5 var(--font-core);
  --type-caption: 400 13px/1.5 var(--font-core);
  --type-signal: 500 12px/1.35 var(--font-signal);
  --type-signal-micro: 400 11px/1.35 var(--font-signal);
  --type-signal-wide: 500 12px/1.35 var(--font-signal);
  --tracking-display: -0.03em;
  --tracking-display-m: -0.02em;
  --tracking-title: -0.01em;
  --tracking-normal: 0em;
  --tracking-signal: 0.08em;
  --tracking-wide: 0.14em;
  /* v2 aliases: the DS bundle and JSX read these names. */
  --tracking-label: var(--tracking-signal);
  --tracking-display-xl: var(--tracking-display);
  --type-label: var(--type-signal);
  --type-micro: var(--type-signal-micro);
  /* Signal size steps the control sizes read (sm label 11, md 12, lg 13). */
  --text-micro: 11px;
  --text-label: 12px;
  --text-caption: 13px;
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;
  --leading-display: 0.92;
  --leading-tight: 1.05;
  --leading-snug: 1.25;
  --leading-normal: 1.5;
  --leading-relaxed: 1.65;
  --leading-signal: 1.35;
}

/* Phone floor for the micro signal style: 11 px mono is set for the laptop
   canvas and reads as 11 px on a phone too, where it labels twenty to sixty
   elements a page. One step up there; nothing else about the style changes
   (src/contrast.test.ts reads the :root block above, not this override). */
@media (max-width: 47.99rem) {
  :root {
    --type-signal-micro: 400 12px/1.35 var(--font-signal);
  }
}

/* ── console theme ─────────────────────────────────────────────────── */
/* .ar-on-dark is the DS v2 scope name for "inside a dark box" (a console
   plan band, a console CTA box, an ink glass plate): same re-scope, so a
   box can opt in with a class where a theme attribute would be heavy. */
[data-theme='console'],
.ar-on-dark {
  /* Inherited `color` resolves var() where it was declared (body, paper), so
     the themed subtree must re-declare it or bare headings/paragraphs keep
     paper ink on console ground (1.2:1 — invisible). */
  color: var(--text-primary);
  --bg-surface: var(--bg-console-raised);
  --bg-sunken: var(--bg-console-sunken);
  --ground-default: var(--bg-console);
  --ground-raised: var(--bg-console-raised);
  --ground-sunken: var(--bg-console-sunken);
  /* Exit actions on console: red type only. Menus and cards sit on the raised
     console ground, where any wash drops danger-500 below 4.5:1 (9% = 4.20:1;
     plain = 4.61:1). */
  --exit-wash-mix: 0%;
  --text-primary: var(--text-inverse);
  --text-secondary: var(--text-inverse-secondary);
  --text-tertiary: var(--text-inverse-tertiary);
  /* A2 fix: signal-700 on console is 3.73:1 — accent reads through the
     surface lookup like everything else. */
  --text-accent: var(--signal-on-dark);
  --text-link: var(--signal-on-dark);
  --text-link-hover: var(--signal-300);
  --border-subtle: var(--border-console);
  --border-default: var(--border-console);
  --border-strong: var(--border-console-strong);
  /* restored — dropped per-theme overrides */
  --border-hairline: var(--border-hairline-dark);
  --border-hairline-default: var(--border-hairline-dark);
  --border-hairline-strong: var(--border-hairline-dark-strong);
  --rule-row: var(--rule-row-dark);
  --focus-ring: var(--signal-500);
  /* v2 CTA swap: the green block with near-black type and tick. */
  --cta-fill: var(--signal-500);
  --cta-fill-hover: var(--signal-600);
  --cta-fill-press: var(--signal-700);
  --cta-ink: var(--accent-on-primary);
  --cta-tick: var(--accent-on-primary);
  /* Green type below 24px on console reads through the dark lookup (the
     artifact keeps signal-700 here, which is 3.73:1 — the A2 rule applies). */
  --signal-type-small: var(--signal-on-dark);
  --veil-on-cream: var(--veil-on-dark);
  --veil-on-cream-press: var(--veil-on-dark-press);
  --signal-on-cream: var(--signal-on-dark);
  --caution-on-cream: var(--caution-on-dark);
  --danger-on-cream: var(--danger-on-dark);
  --info-on-cream: var(--info-on-dark);
  /* Sunken-on-console is near-black: the -on-sunken lookups must step to the
     dark set too (signal-800 on console-sunken is 2.4:1). */
  --signal-on-sunken: var(--signal-on-dark);
  --caution-on-sunken: var(--caution-on-dark);
  --danger-on-sunken: var(--danger-on-dark);
  --info-on-sunken: var(--info-on-dark);
  --liquid-trough-cream: var(--liquid-trough-ink);
  --liquid-volume-cream: var(--liquid-volume-ink);
  --liquid-volume-hover-cream: var(--liquid-volume-hover-ink);
  --liquid-edge-cream: var(--liquid-edge-ink);
  --liquid-tick-cream: var(--liquid-tick-ink);
  --liquid-range-cream: var(--liquid-range-ink);
  --liquid-ink-cream: var(--liquid-ink-ink);
  --shadow-sm: var(--shadow-console-sm);
  --shadow-md: var(--shadow-console-md);
  --shadow-inset-hairline: inset 0 0 0 1px var(--border-console);
}

/* ── sunken surface (class, not theme — DS law: surface, then colour) ─ */
.ground-sunken {
  background: var(--ground-sunken);
  /* A3 fix: links/accent on sunken step to the sunken lookup (4.5:1+). */
  --text-link: var(--signal-on-sunken);
  --text-link-hover: var(--signal-800);
  --text-accent: var(--signal-on-sunken);
  --signal-on-cream: var(--signal-on-sunken);
  --caution-on-cream: var(--caution-on-sunken);
  --danger-on-cream: var(--danger-on-sunken);
  --info-on-cream: var(--info-on-sunken);
  /* Exit actions on sunken: red type only, no wash (any wash drops danger-600
     below 4.5:1 on sunken cream; the contrast test holds this). */
  --exit-wash-mix: 0%;
}

.ground-raised {
  background: var(--ground-raised);
}

/* ── type classes (spec metrics) ───────────────────────────────────── */
.text-display-xl { font: var(--type-display-xl); letter-spacing: var(--tracking-display); }
.text-display-l { font: var(--type-display-l); letter-spacing: var(--tracking-display); }
.text-display-m { font: var(--type-display-m); letter-spacing: var(--tracking-display-m); }
.text-headline { font: var(--type-headline); letter-spacing: var(--tracking-display-m); }
.text-title { font: var(--type-title); letter-spacing: var(--tracking-title); }
.text-subtitle { font: var(--type-subtitle); letter-spacing: var(--tracking-title); }
.text-body-l { font: var(--type-body-l); }
.text-body { font: var(--type-body); }
.text-body-s { font: var(--type-body-s); }
.text-caption { font: var(--type-caption); }
.text-signal,
.text-signal-micro,
.text-signal-wide {
  text-transform: uppercase;
  font-variant-numeric: tabular-nums;
}
.text-signal { font: var(--type-signal); letter-spacing: var(--tracking-signal); }
.text-signal-micro { font: var(--type-signal-micro); letter-spacing: var(--tracking-signal); }
.text-signal-wide { font: var(--type-signal-wide); letter-spacing: var(--tracking-wide); }

/* ── fonts (self-hosted, subset WOFF2, SIL OFL 1.1 — licences alongside) ─ */
@font-face {
  font-family: 'Archivo';
  src: url('./fonts/Archivo-Regular.woff2?v=18e5849d') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Archivo';
  src: url('./fonts/Archivo-Medium.woff2?v=25e0fecf') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Archivo';
  src: url('./fonts/Archivo-SemiBold.woff2?v=624801bc') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Archivo';
  src: url('./fonts/Archivo-Bold.woff2?v=bec5ba39') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Martian Mono';
  src: url('./fonts/MartianMono-Regular.woff2?v=93c9373c') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Martian Mono';
  src: url('./fonts/MartianMono-Medium.woff2?v=3cd681b4') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@media (prefers-color-scheme: dark) {
  html:not([data-theme]) {
  /* Inherited `color` resolves var() where it was declared (body, paper), so
     the themed subtree must re-declare it or bare headings/paragraphs keep
     paper ink on console ground (1.2:1 — invisible). */
  color: var(--text-primary);
  --bg-surface: var(--bg-console-raised);
  --bg-sunken: var(--bg-console-sunken);
  --ground-default: var(--bg-console);
  --ground-raised: var(--bg-console-raised);
  --ground-sunken: var(--bg-console-sunken);
  /* Exit actions on console: red type only. Menus and cards sit on the raised
     console ground, where any wash drops danger-500 below 4.5:1 (9% = 4.20:1;
     plain = 4.61:1). */
  --exit-wash-mix: 0%;
  --text-primary: var(--text-inverse);
  --text-secondary: var(--text-inverse-secondary);
  --text-tertiary: var(--text-inverse-tertiary);
  /* A2 fix: signal-700 on console is 3.73:1 — accent reads through the
     surface lookup like everything else. */
  --text-accent: var(--signal-on-dark);
  --text-link: var(--signal-on-dark);
  --text-link-hover: var(--signal-300);
  --border-subtle: var(--border-console);
  --border-default: var(--border-console);
  --border-strong: var(--border-console-strong);
  /* restored — dropped per-theme overrides */
  --border-hairline: var(--border-hairline-dark);
  --border-hairline-default: var(--border-hairline-dark);
  --border-hairline-strong: var(--border-hairline-dark-strong);
  --rule-row: var(--rule-row-dark);
  --focus-ring: var(--signal-500);
  /* v2 CTA swap: the green block with near-black type and tick. */
  --cta-fill: var(--signal-500);
  --cta-fill-hover: var(--signal-600);
  --cta-fill-press: var(--signal-700);
  --cta-ink: var(--accent-on-primary);
  --cta-tick: var(--accent-on-primary);
  /* Green type below 24px on console reads through the dark lookup (the
     artifact keeps signal-700 here, which is 3.73:1 — the A2 rule applies). */
  --signal-type-small: var(--signal-on-dark);
  --veil-on-cream: var(--veil-on-dark);
  --veil-on-cream-press: var(--veil-on-dark-press);
  --signal-on-cream: var(--signal-on-dark);
  --caution-on-cream: var(--caution-on-dark);
  --danger-on-cream: var(--danger-on-dark);
  --info-on-cream: var(--info-on-dark);
  /* Sunken-on-console is near-black: the -on-sunken lookups must step to the
     dark set too (signal-800 on console-sunken is 2.4:1). */
  --signal-on-sunken: var(--signal-on-dark);
  --caution-on-sunken: var(--caution-on-dark);
  --danger-on-sunken: var(--danger-on-dark);
  --info-on-sunken: var(--info-on-dark);
  --liquid-trough-cream: var(--liquid-trough-ink);
  --liquid-volume-cream: var(--liquid-volume-ink);
  --liquid-volume-hover-cream: var(--liquid-volume-hover-ink);
  --liquid-edge-cream: var(--liquid-edge-ink);
  --liquid-tick-cream: var(--liquid-tick-ink);
  --liquid-range-cream: var(--liquid-range-ink);
  --liquid-ink-cream: var(--liquid-ink-ink);
  --shadow-sm: var(--shadow-console-sm);
  --shadow-md: var(--shadow-console-md);
  --shadow-inset-hairline: inset 0 0 0 1px var(--border-console);
    color-scheme: dark;
  }
}

/*
 * Forms (@armage/ui/forms.css). Tokens only; paper and console grounds.
 * One visible form, grouped into labelled sections: boxed fields in pairs,
 * large tile choices, a full-width send bar. Fields are Surface, never glass;
 * focus draws the tracking-frame corners (the site search's language).
 *
 *   .ar-tabs / .ar-tab          page-level tabs (real links); index + tracking-frame corners mark the current one
 *   .ar-form-section            a labelled group; __head carries label + "Required"
 *   .ar-field + .ar-input/.ar-textarea
 *   .ar-tiles + .ar-tile        radio or checkbox tiles
 *   .ar-check                   consent checkbox
 *   .ar-send                    full-width submit bar
 */

/* ── tabs ──────────────────────────────────────────────────────────── */
.ar-tabs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-top: var(--border-hairline-strong);
  border-bottom: var(--border-hairline-strong);
  background: var(--ground-default);
}

.ar-tab {
  position: relative;
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
  min-height: calc(var(--space-16) + var(--space-2));
  padding: var(--space-5) var(--space-4);
  font: var(--type-title);
  letter-spacing: var(--tracking-title);
  color: var(--text-tertiary);
  text-decoration: none;
}

@media (min-width: 640px) {
  .ar-tab {
    font: var(--type-headline);
    letter-spacing: var(--tracking-display-m);
  }
}

.ar-tab + .ar-tab {
  border-left: var(--border-hairline-strong);
}

/* Index number: the system's mono data voice. */
.ar-tab__index {
  font: var(--type-signal-micro);
  letter-spacing: var(--tracking-signal);
  color: var(--text-tertiary);
}

/* Tracking-frame corners (the search's "object found" language) mark the
   current tab; a faint frame previews it on hover. */
.ar-tab::before,
.ar-tab::after {
  content: '';
  position: absolute;
  width: var(--space-4);
  height: var(--space-4);
  border: 0 solid var(--text-tertiary);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--duration-fast) var(--ease-standard);
}

.ar-tab::before {
  top: var(--space-2);
  left: var(--space-2);
  border-top-width: var(--border-width-bracket);
  border-left-width: var(--border-width-bracket);
}

.ar-tab::after {
  right: var(--space-2);
  bottom: var(--space-2);
  border-right-width: var(--border-width-bracket);
  border-bottom-width: var(--border-width-bracket);
}

.ar-tab:hover {
  color: var(--text-secondary);
}

.ar-tab:hover::before,
.ar-tab:hover::after {
  opacity: var(--opacity-ghost);
}

.ar-tab[aria-current='page'] {
  color: var(--text-primary);
}

.ar-tab[aria-current='page'] .ar-tab__index {
  color: var(--text-accent);
}

.ar-tab[aria-current='page']::before,
.ar-tab[aria-current='page']::after {
  border-color: var(--text-accent);
  opacity: 1;
}

.ar-tab:focus-visible {
  outline: var(--focus-ring-width) solid var(--focus-ring);
  outline-offset: calc(-1 * var(--focus-ring-width));
}

/* ── sections ──────────────────────────────────────────────────────── */
.ar-form {
  display: grid;
  gap: var(--rhythm-group);
}

.ar-form-section {
  display: grid;
  gap: var(--space-4);
  margin: 0;
  padding: 0;
  border: 0;
  min-width: 0;
}

.ar-form-section__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-4);
  width: 100%;
  margin-bottom: var(--space-2);
  padding: 0 0 var(--space-3);
  border-bottom: var(--border-hairline);
  font: var(--type-signal-micro);
  letter-spacing: var(--tracking-signal);
  text-transform: uppercase;
  color: var(--text-tertiary);
}

/* Fields sit one item apart: a form is one surface, not a stack of bands.
   Short fields (name, email, organisation, role) pair up from 640 px; a
   textarea or a field marked full keeps the whole row. */
.ar-form-grid {
  display: grid;
  gap: var(--space-4);
}

@media (min-width: 640px) {
  .ar-form-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .ar-form-grid > .ar-field--full {
    grid-column: 1 / -1;
  }
}

/* ── field ─────────────────────────────────────────────────────────── */
.ar-field {
  display: grid;
  /* One column that never grows past the field: a file picker's or a long
     option's own width can no longer widen the form (ADR 0113). */
  grid-template-columns: minmax(0, 1fr);
  align-content: start;
  gap: var(--space-2);
  min-width: 0;
}

.ar-field__label,
.ar-tiles__legend {
  font: var(--type-body);
  color: var(--text-primary);
}

.ar-field__required {
  color: var(--text-accent);
}

.ar-field__note {
  color: var(--text-tertiary);
  font: var(--type-body-s);
}

.ar-field__hint {
  font: var(--type-caption);
  color: var(--text-tertiary);
}

.ar-field__error {
  margin: 0;
  font: var(--type-caption);
  color: var(--danger-on-cream);
}

.ar-field__control {
  position: relative;
}

/* Controls stand 48 px: above the 44 px target floor, one step under the
   old 52, which five fields and fourteen tiles turned into a screen. */
.ar-input,
.ar-textarea {
  display: block;
  /* The width includes the padding and border on every surface: the console
     bundle has no global box-sizing reset, and a 100% field plus its padding
     pushed every console page wider than a phone. */
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  min-height: var(--space-12);
  padding: var(--space-3) var(--space-4);
  border: var(--border-width-hairline) solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--ground-raised);
  color: var(--text-primary);
  font: var(--type-body);
  caret-color: var(--text-accent);
}

.ar-textarea {
  min-height: var(--space-32);
  resize: vertical;
}

.ar-input::placeholder,
.ar-textarea::placeholder {
  color: var(--text-tertiary);
}

.ar-input:hover,
.ar-textarea:hover {
  border-color: var(--text-secondary);
}

.ar-input:focus,
.ar-textarea:focus {
  outline: none;
  border-color: var(--text-primary);
}

.ar-input[aria-invalid='true'],
.ar-textarea[aria-invalid='true'] {
  border-color: var(--danger-on-cream);
}

/* A file picker: the field's box, with the picker button drawn as a small
   control inside it (the browser's own button never shows through). */
.ar-input[type='file'] {
  display: flex;
  align-items: center;
  padding: var(--space-2) var(--space-3) var(--space-2) var(--space-2);
  font: var(--type-body-s);
  color: var(--text-secondary);
  cursor: pointer;
}

.ar-input[type='file']::file-selector-button {
  min-height: var(--space-8);
  margin-right: var(--space-3);
  padding: 0 var(--space-3);
  border: var(--border-width-hairline) solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--ground-default);
  color: var(--text-primary);
  font: var(--type-signal-micro);
  letter-spacing: var(--tracking-signal);
  text-transform: uppercase;
  cursor: pointer;
}

.ar-input[type='file']:hover::file-selector-button {
  border-color: var(--text-secondary);
}

.ar-input[type='file']:focus-visible {
  outline: var(--focus-ring-width) solid var(--focus-ring);
  outline-offset: var(--focus-ring-offset);
}

/* The chosen file, previewed before upload (cover tools; script-enhanced). */
.ar-cover-local {
  display: grid;
  grid-template-columns: minmax(0, 7rem) minmax(0, 1fr);
  gap: var(--space-3);
  align-items: center;
  padding: var(--space-2);
  border: var(--border-width-hairline) dashed var(--border-strong);
  border-radius: var(--radius-sm);
}

.ar-cover-local[hidden] {
  display: none;
}

.ar-cover-local img {
  display: block;
  width: 100%;
  aspect-ratio: 1200 / 630;
  object-fit: cover;
  border-radius: var(--radius-sm);
  background: var(--ground-sunken);
}

.ar-cover-local img[hidden] {
  display: none;
}

.ar-cover-local__note {
  margin: 0;
  font: var(--type-caption);
  color: var(--text-secondary);
}

.ar-cover-local__note[data-tone='error'] {
  color: var(--danger-on-cream);
}

/* Tracking-frame corners around the focused control. */
.ar-field__control::before,
.ar-field__control::after {
  content: '';
  position: absolute;
  width: var(--space-3);
  height: var(--space-3);
  border: 0 solid var(--text-accent);
  opacity: 0;
  pointer-events: none;
}

.ar-field__control::before {
  top: calc(-1 * var(--space-1));
  left: calc(-1 * var(--space-1));
  border-top-width: var(--border-width-bracket);
  border-left-width: var(--border-width-bracket);
}

.ar-field__control::after {
  right: calc(-1 * var(--space-1));
  bottom: calc(-1 * var(--space-1));
  border-right-width: var(--border-width-bracket);
  border-bottom-width: var(--border-width-bracket);
}

.ar-field__control:focus-within::before,
.ar-field__control:focus-within::after {
  opacity: 1;
}

/* ── tiles ─────────────────────────────────────────────────────────── */
.ar-tiles {
  display: grid;
  gap: var(--space-3);
  margin: 0;
  padding: 0;
  border: 0;
  min-width: 0;
}

.ar-tiles__legend {
  padding: 0;
  margin-bottom: var(--space-3);
}

.ar-tiles__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-2);
}

@media (min-width: 640px) {
  .ar-tiles__grid {
    grid-template-columns: repeat(
      auto-fill,
      minmax(min(100%, calc(var(--space-32) + var(--space-16))), 1fr)
    );
  }
}

.ar-tile {
  position: relative;
  display: grid;
}

.ar-tile input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.ar-tile span {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: var(--space-12);
  padding: var(--space-2) var(--space-3);
  border: var(--border-width-hairline) solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--ground-raised);
  color: var(--text-primary);
  font: var(--type-body-s);
  text-align: center;
}

.ar-tile input:hover + span {
  border-color: var(--text-secondary);
}

.ar-tile input:checked + span {
  border-color: var(--text-primary);
  background: var(--text-primary);
  color: var(--ground-default);
}

.ar-tile input:focus-visible + span {
  outline: var(--focus-ring-width) solid var(--focus-ring);
  outline-offset: var(--focus-ring-offset);
}

.ar-tile input[aria-invalid='true'] + span {
  border-color: var(--danger-on-cream);
}

/* ── consent ───────────────────────────────────────────────────────── */
.ar-check {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-3);
  align-items: start;
  font: var(--type-body-s);
  color: var(--text-secondary);
}

.ar-check input {
  width: var(--space-5);
  height: var(--space-5);
  margin: 0;
  accent-color: var(--text-primary);
}

/* ── send bar ──────────────────────────────────────────────────────── */
.ar-send {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: calc(var(--space-16) - var(--space-1));
  border: 0;
  border-radius: var(--radius-sm);
  background: var(--text-primary);
  color: var(--ground-default);
  font: var(--type-signal);
  letter-spacing: var(--tracking-signal);
  text-transform: uppercase;
  cursor: pointer;
}

.ar-send:hover {
  background: var(--text-secondary);
}

.ar-send[aria-busy='true'] {
  opacity: var(--opacity-ghost);
  cursor: progress;
}

.ar-send:focus-visible {
  outline: var(--focus-ring-width) solid var(--focus-ring);
  outline-offset: var(--focus-ring-offset);
}

/* An image dragged over the cover upload form (cover preview script). */
form[data-dropping='true'] {
  outline: var(--border-width-bracket) dashed var(--text-accent);
  outline-offset: var(--space-1);
}

/* A cover tools button while its request runs. */
button[aria-busy='true'] {
  cursor: progress;
}

/*
 * Controls (@armage/ui/controls.css): buttons, links, badges, navigation
 * link, skip link. Armage Design System v2 (the material system, Oct 2026),
 * 13 UI primitives / controls. Framework-free: Astro, Workers HTML and a
 * React port share these classes. Tokens only — no literal colour, size,
 * duration or easing below.
 *
 *   .ar-control + .ar-btn--primary|secondary|ghost|danger + .ar-size--sm|md|lg
 *       primary    the ink block with the green trailing tick on cream; the
 *                  green block with near-black type and tick inside
 *                  [data-theme='console'], .ar-on-dark or an ink glass plate
 *       secondary  hairline outline · ghost  text only · danger  destructive
 *       every variant takes --radius-control (2px); pills are retired
 *       sizes      sm 32 (dense console chrome only) · md 40 (default) · lg 48
 *       [data-tick='false']      suppresses the drawn tick
 *       .ar-btn__tick            an inline-SVG tick child replaces the drawn one
 *       .ar-btn--full            full-width block
 *       [data-state='loading'] or [aria-busy='true']   inert; the tick pulses
 *   .ar-link · .ar-link--signal · .ar-link--quiet    inline links
 *   .ar-badge + .ar-badge--found|verifying|failed|info|neutral
 *             + .ar-badge--solid · .ar-badge--dot     Signal readout tag
 *   .ar-navlink   Signal-type navigation link; aria-current="page" underlines in signal
 *   .ar-skip      skip link, visible on focus
 *
 * Motion law: state changes are instant; only opacity and transform transition.
 * Touch targets: md is 40px tall and grows its hit area to 48px with an
 * invisible ::before (no layout change); lg is 48px on its own; sm (32px)
 * grows to 44px. Hit areas of controls stacked closer than 8px overlap.
 *
 *   <button class="ar-control ar-btn--primary">Start a project</button>
 *   <a class="ar-control ar-btn--secondary ar-size--lg" href="/pricing">See every plan</a>
 *   <button class="ar-control ar-btn--primary ar-btn--full" aria-busy="true" data-state="loading">Sending</button>
 *   <button class="ar-control ar-btn--danger" type="button">Revoke access</button>
 *   <a class="ar-link ar-link--quiet" href="/trust">what you own</a>
 *   <span class="ar-badge ar-badge--found ar-badge--dot">Found</span>
 */

/* ── shared control contract ───────────────────────────────────────── */
.ar-control {
  --ar-hit: var(--space-1);
  position: relative;
  font: var(--type-signal);
  letter-spacing: var(--tracking-signal);
  text-transform: uppercase;
  font-variant-numeric: tabular-nums;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: var(--space-10);
  padding-inline: var(--space-5);
  border: 0;
  border-radius: var(--radius-control);
  background: transparent;
  color: inherit;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
}

/* The hit-area extension: invisible, block-wise only, moves nothing. */
.ar-control::before {
  content: '';
  position: absolute;
  inset: calc(-1 * var(--ar-hit)) 0;
}

.ar-control:focus-visible {
  outline: var(--focus-ring-width) solid var(--focus-ring);
  outline-offset: var(--focus-ring-offset);
}

.ar-control[disabled],
.ar-control[aria-disabled='true'] {
  opacity: var(--opacity-disabled);
  cursor: not-allowed;
  pointer-events: none;
}

/* Loading: the app owns the state (aria-busy + data-state); the sheet reads it. */
.ar-control[data-state='loading'],
.ar-control[aria-busy='true'] {
  opacity: var(--opacity-ghost);
  cursor: progress;
  pointer-events: none;
}

.ar-btn--full {
  display: flex;
  width: 100%;
}

/* ── sizes: 32 / 40 / 48, every one on the 8px sub-unit ───────────── */
.ar-size--sm {
  --ar-hit: calc(var(--space-3) / 2);
  min-height: var(--space-8);
  padding-inline: var(--space-4);
  font-size: var(--text-micro);
}
.ar-size--md {
  --ar-hit: var(--space-1);
  min-height: var(--space-10);
  padding-inline: var(--space-5);
}
.ar-size--lg {
  --ar-hit: 0px;
  min-height: var(--space-12);
  padding-inline: var(--space-6);
  font-size: var(--text-caption);
}

/* ── primary: the ink block with the green tick ────────────────────── */
/* --cta-* resolve to ink-900 / paper / signal-500 on cream and to the green
   block (signal-500 / near-black / near-black) inside the console theme,
   .ar-on-dark and an ink glass plate (material.css). */
.ar-btn--primary {
  background: var(--cta-fill);
  color: var(--cta-ink);
}
.ar-btn--primary:hover {
  background: var(--cta-fill-hover);
  color: var(--cta-ink);
}
.ar-btn--primary:active {
  background: var(--cta-fill-press);
}

/* The trailing tick (M2 8h11 M9 4l4 4-4 4), drawn by the sheet so existing
   markup gets it with no DOM change: a shaft and two diagonal strokes made
   of gradients, in --cta-tick. 14px box, 2px stroke, tip on the midline. */
.ar-btn--primary::after,
.ar-btn__tick {
  --ar-tick-size: calc(var(--space-3) + var(--border-width-bracket));
  --ar-tick-stroke: var(--border-width-bracket);
  --ar-tick-head: calc(var(--space-1) + var(--border-width-hairline));
  --ar-tick-inset: calc(var(--ar-tick-size) / 2 - var(--ar-tick-head));
  display: inline-flex;
  flex: 0 0 auto;
  width: var(--ar-tick-size);
  height: var(--ar-tick-size);
  color: var(--cta-tick);
  transition: transform var(--duration-standard) var(--ease-standard);
}
.ar-btn--primary::after {
  content: '';
  background:
    linear-gradient(currentColor, currentColor) 0 50% / calc(100% - var(--border-width-hairline))
      var(--ar-tick-stroke) no-repeat,
    linear-gradient(
        45deg,
        transparent calc(50% - var(--ar-tick-stroke) / 2),
        currentColor calc(50% - var(--ar-tick-stroke) / 2),
        currentColor calc(50% + var(--ar-tick-stroke) / 2),
        transparent calc(50% + var(--ar-tick-stroke) / 2)
      )
      right var(--border-width-hairline) top var(--ar-tick-inset) / var(--ar-tick-head)
      var(--ar-tick-head) no-repeat,
    linear-gradient(
        135deg,
        transparent calc(50% - var(--ar-tick-stroke) / 2),
        currentColor calc(50% - var(--ar-tick-stroke) / 2),
        currentColor calc(50% + var(--ar-tick-stroke) / 2),
        transparent calc(50% + var(--ar-tick-stroke) / 2)
      )
      right var(--border-width-hairline) bottom var(--ar-tick-inset) / var(--ar-tick-head)
      var(--ar-tick-head) no-repeat;
}
.ar-btn__tick svg {
  width: 100%;
  height: 100%;
  display: block;
}
/* An explicit tick child (or an opt-out) retires the drawn one. */
.ar-btn--primary[data-tick='false']::after,
.ar-btn--primary:has(.ar-btn__tick)::after {
  content: none;
}
.ar-btn--primary:hover::after,
.ar-btn--primary:hover .ar-btn__tick {
  transform: translateX(var(--slide-state));
}
.ar-btn--primary[data-state='loading']::after,
.ar-btn--primary[aria-busy='true']::after,
.ar-btn--primary[data-state='loading'] .ar-btn__tick,
.ar-btn--primary[aria-busy='true'] .ar-btn__tick {
  animation: ar-tick-pulse var(--duration-entrance) var(--ease-standard) infinite alternate;
}
@keyframes ar-tick-pulse {
  from {
    opacity: var(--opacity-full);
  }
  to {
    opacity: var(--opacity-ghost);
  }
}
/* Icons inside the primary take the tick colour, never the label colour. */
.ar-btn--primary .ar-icon,
.ar-btn--primary > svg {
  color: var(--cta-tick);
}

/* ── secondary: the hairline ───────────────────────────────────────── */
.ar-btn--secondary {
  background: transparent;
  color: var(--text-primary);
  box-shadow: inset 0 0 0 var(--border-width-hairline) var(--border-default);
}
.ar-btn--secondary:hover {
  background: var(--veil-on-cream);
  color: var(--text-primary);
  box-shadow: inset 0 0 0 var(--border-width-hairline) var(--border-strong);
}
.ar-btn--secondary:active {
  background: var(--veil-on-cream-press);
}

/* ── ghost: text only ──────────────────────────────────────────────── */
.ar-btn--ghost {
  background: transparent;
  color: var(--text-secondary);
  padding-inline: var(--space-3);
}
.ar-btn--ghost:hover {
  background: var(--veil-on-cream);
  color: var(--text-primary);
}
.ar-btn--ghost:active {
  background: var(--veil-on-cream-press);
}

/* ── danger: destructive ───────────────────────────────────────────── */
/* Paper type on danger-600 is 7.6:1; on danger-500 it drops to 3.3:1, so
   hover keeps the fill and answers with an inner rim (the secondary's
   "gains a border" move) instead of the lighter step the artifact uses. */
.ar-btn--danger {
  background: var(--danger-600);
  color: var(--text-inverse);
}
.ar-btn--danger:hover {
  background: var(--danger-600);
  color: var(--text-inverse);
  box-shadow: inset 0 0 0 var(--border-width-bracket) var(--danger-500);
}
.ar-btn--danger:active {
  box-shadow: inset 0 0 0 var(--border-width-hairline) var(--danger-500);
}

/* ── links ─────────────────────────────────────────────────────────── */
/* The underline is the affordance: it thickens on hover and is never
   removed from a prose link. */
.ar-link {
  color: var(--text-link);
  text-decoration: underline;
  text-decoration-thickness: var(--border-width-hairline);
  text-underline-offset: 0.18em;
}
.ar-link:hover {
  color: var(--text-link-hover);
  text-decoration-thickness: var(--border-width-bracket);
}
.ar-link:focus-visible {
  outline: var(--focus-ring-width) solid var(--focus-ring);
  outline-offset: var(--focus-ring-offset);
  border-radius: var(--radius-control);
}
/* Signal register: nav and readout links. */
.ar-link--signal {
  font: var(--type-signal);
  letter-spacing: var(--tracking-signal);
  text-transform: uppercase;
  text-decoration: none;
}
.ar-link--signal:hover {
  text-decoration: underline;
  text-decoration-thickness: var(--border-width-hairline);
}
/* Quiet: ink until hover, for links inside prose that would otherwise turn
   a paragraph green. */
.ar-link--quiet {
  color: var(--text-primary);
  text-decoration-color: var(--border-strong);
}
.ar-link--quiet:hover {
  color: var(--text-link);
  text-decoration-color: currentColor;
}

/* ── badge: the Signal readout tag ─────────────────────────────────── */
/* The tone IS the information (found · verifying · failed · info · neutral).
   Soft = hairline with stepped ink; solid = state fill with near-black type. */
.ar-badge {
  --ar-badge-fill: var(--ink-100);
  font: var(--type-micro);
  letter-spacing: var(--tracking-signal);
  text-transform: uppercase;
  font-variant-numeric: tabular-nums;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-control);
  background: transparent;
  color: var(--text-secondary);
  box-shadow: inset 0 0 0 var(--border-width-hairline) var(--border-default);
  white-space: nowrap;
}
.ar-badge--neutral {
  --ar-badge-fill: var(--ink-100);
  color: var(--text-secondary);
}
.ar-badge--found {
  --ar-badge-fill: var(--accent-primary);
  color: var(--signal-on-cream);
}
.ar-badge--verifying {
  --ar-badge-fill: var(--caution-500);
  color: var(--caution-on-cream);
}
.ar-badge--failed {
  --ar-badge-fill: var(--danger-500);
  color: var(--danger-on-cream);
}
.ar-badge--info {
  --ar-badge-fill: var(--info-500);
  color: var(--info-on-cream);
}
.ar-badge--dot::before {
  content: '';
  flex: 0 0 auto;
  width: var(--space-2);
  height: var(--space-2);
  border-radius: var(--radius-full);
  background: var(--ar-badge-fill);
}
.ar-badge--solid {
  background: var(--ar-badge-fill);
  color: var(--on-state-fill);
  box-shadow: none;
}
.ar-badge--solid.ar-badge--dot::before {
  background: var(--on-state-fill);
}

/* ── navigation link ───────────────────────────────────────────────── */
.ar-navlink {
  font: var(--type-signal);
  letter-spacing: var(--tracking-signal);
  text-transform: uppercase;
  color: var(--text-secondary);
  text-decoration: none;
  padding-block: var(--space-2);
  border-bottom: var(--border-width-bracket) solid transparent;
}
.ar-navlink:hover {
  color: var(--text-primary);
}
.ar-navlink[aria-current='page'] {
  color: var(--text-primary);
  border-bottom-color: var(--signal-on-cream);
}
.ar-navlink:focus-visible {
  outline: var(--focus-ring-width) solid var(--focus-ring);
  outline-offset: var(--focus-ring-offset);
}

/* ── skip link ─────────────────────────────────────────────────────── */
.ar-skip {
  position: absolute;
  left: var(--space-4);
  top: var(--space-4);
  z-index: var(--z-tooltip);
  transform: translateY(-200%);
  background: var(--cta-fill);
  color: var(--cta-ink);
  padding: var(--space-3) var(--space-5);
  border-radius: var(--radius-control);
  font: var(--type-signal);
  letter-spacing: var(--tracking-signal);
  text-transform: uppercase;
  text-decoration: none;
}
.ar-skip:focus {
  transform: translateY(0);
}

/* ── reduced motion: the tick stays put, nothing pulses ────────────── */
@media (prefers-reduced-motion: reduce) {
  .ar-btn--primary::after,
  .ar-btn__tick {
    transition: none;
    animation: none;
  }
  .ar-btn--primary:hover::after,
  .ar-btn--primary:hover .ar-btn__tick {
    transform: none;
  }
}

/*
 * Material (@armage/ui/material.css): grounds, grain, glass. Armage Design
 * System v2 (the material system, 03 Graphic language / material.md).
 * Client spec for glass: INK 30 · BLUR 14 · SAT 1.15 · EDGE CREAM 20 · R3.
 *
 * Ground jurisdiction (material.md):
 *   Cream (--bg-paper) is the default everywhere. The marketing site is
 *   cream-led with dark passages — AT MOST ONE DARK PASSAGE PER PAGE (a hero
 *   moment, a stat band, a console plan band or CTA box). Dark (--bg-console)
 *   otherwise belongs to the operator console and to media chrome. Image
 *   grounds host the glass plate and carry the heaviest grain.
 *
 * Grain is a property of the GROUND: one 200px procedural tile as a top
 * layer, never on text, never on a plate, never in an exported asset.
 * Strength per ground: cream 5.5% · dark 7.5% · imagery 11% (--grain-on-*).
 *
 * Glass is chrome, never content: nav bars, overlays, media controls,
 * floating summaries, and (v2) the header band of a plan card, the window of
 * a feature box, the plate of a CTA box. One glass layer per composition;
 * never glass-on-glass, never behind body text. Radius --plate-radius (3px);
 * no pill glass. Controls on glass are opaque.
 *
 *   .ar-ground + .ar-ground--paper|raised|sunken|dark
 *       a grounded section: isolation + the grain layer. Dark grounds also
 *       take .ar-on-dark (the console re-scope from tokens.css).
 *   .ar-grain + .ar-grain--dark|image · .ar-grain--fixed
 *       the grain layer: absolute, decorative (aria-hidden), above the
 *       ground and below content; --fixed is the page-level layer
 *   .ar-ground__sheet   content lifted above the grain (z-sheet)
 *   .ar-mat--glass      the material (blur + saturation + edge, z-plate)
 *   .ar-mat--plate|chrome|overlay   tier: how opaque the fill is
 *   .ar-mat--cream|ink  direction: light or dark ground beneath
 *   .ar-mat--float|edge mount: inset with radius, or flush to the window
 *   .ar-mat-rule        a hairline INSIDE a pane, in the pane's own rule token
 *
 *   <section class="ar-ground ar-ground--dark ar-on-dark">
 *     <div class="ar-grain ar-grain--dark" aria-hidden="true"></div>
 *     <div class="ar-ground__sheet">…</div>
 *   </section>
 *   <header class="ar-mat--glass ar-mat--chrome ar-mat--cream ar-mat--float">…</header>
 *
 * Framework-free CSS: Astro, React and plain HTML use the same classes.
 * Motion law: only opacity and transform ever transition; blur never animates.
 */

/* ── grounds and grain ─────────────────────────────────────────────── */
.ar-ground {
  position: relative;
  isolation: isolate;
  background: var(--ground-default);
}
.ar-ground--raised {
  background: var(--ground-raised);
}
.ar-ground--sunken {
  background: var(--ground-sunken);
}
.ar-ground--dark {
  background: var(--ground-dark);
  color: var(--text-inverse);
}
.ar-ground__sheet {
  position: relative;
  z-index: var(--z-sheet);
}

.ar-grain {
  position: absolute;
  inset: 0;
  z-index: var(--z-ground-grain);
  pointer-events: none;
  background-image: var(--grain-tile);
  background-size: var(--grain-size);
  opacity: var(--grain-on-cream);
}
.ar-grain--dark {
  opacity: var(--grain-on-dark);
}
.ar-grain--image {
  opacity: var(--grain-on-image);
}
.ar-grain--fixed {
  position: fixed;
  z-index: var(--z-page-grain);
}

/* ── glass ─────────────────────────────────────────────────────────── */
.ar-mat--glass {
  position: relative;
  z-index: var(--z-plate);
  border-radius: var(--plate-radius);
  box-shadow: var(--plate-shadow);
  /* Prefixed first, standard last: the CSS minifier keeps only the last of the
     pair, and the standard property is the one Chrome, Edge and Firefox read. */
  -webkit-backdrop-filter: blur(var(--plate-blur)) saturate(var(--plate-saturate));
  backdrop-filter: blur(var(--plate-blur)) saturate(var(--plate-saturate));
}

.ar-mat--glass.ar-mat--cream {
  color: var(--plate-cream-text);
  border: var(--border-width-hairline) solid var(--plate-cream-edge);
}

/* An ink plate is a dark ground: the CTA inside it swaps to the green block
   exactly as it does inside the console theme. */
.ar-mat--glass.ar-mat--ink {
  color: var(--plate-ink-text);
  border: var(--border-width-hairline) solid var(--plate-ink-edge);
  --cta-fill: var(--signal-500);
  --cta-fill-hover: var(--signal-600);
  --cta-fill-press: var(--signal-700);
  --cta-ink: var(--accent-on-primary);
  --cta-tick: var(--accent-on-primary);
}

.ar-mat--plate.ar-mat--cream {
  background: var(--plate-cream-fill);
  box-shadow: var(--plate-highlight-light);
}
.ar-mat--plate.ar-mat--ink {
  background: var(--plate-ink-fill);
  box-shadow: var(--plate-highlight);
}
.ar-mat--chrome.ar-mat--cream {
  background: var(--chrome-cream-fill);
}
.ar-mat--chrome.ar-mat--ink {
  background: var(--chrome-ink-fill);
}
/* The overlay tier is the one glass permitted a shadow. */
.ar-mat--overlay.ar-mat--cream {
  background: var(--overlay-cream-fill);
  box-shadow: var(--plate-highlight-light), var(--shadow-lg);
}
.ar-mat--overlay.ar-mat--ink {
  background: var(--overlay-ink-fill);
  box-shadow: var(--plate-highlight), var(--overlay-shadow);
}

.ar-mat--float {
  border-radius: var(--glass-float-radius);
}
.ar-mat--edge {
  border-radius: 0;
  border-inline-width: 0;
  border-top-width: 0;
}

/* Internal rules inside a pane: the pane's edge token is too strong for its
   internals and --border-subtle is invisible through a tint. */
.ar-mat-rule {
  border-color: var(--plate-cream-rule);
}
.ar-mat--ink .ar-mat-rule {
  border-color: var(--plate-ink-rule);
}

/* Controls on glass are OPAQUE: a translucent button over a translucent pane
   has no measurable contrast. The secondary takes the veil as a solid fill. */
.ar-mat--glass .ar-btn--secondary {
  background: var(--veil-on-dark);
  box-shadow: inset 0 0 0 var(--border-width-hairline) var(--plate-ink-edge);
}
.ar-mat--glass.ar-mat--cream .ar-btn--secondary {
  background: var(--veil-on-cream);
  box-shadow: inset 0 0 0 var(--border-width-hairline) var(--plate-cream-edge);
}

/* Compact screens: denser fills keep text on glass at 4.5:1 over busier grounds. */
@media (max-width: 767px) {
  .ar-mat--plate.ar-mat--cream {
    background: var(--plate-cream-fill-compact);
  }
  .ar-mat--plate.ar-mat--ink {
    background: var(--plate-ink-fill-compact);
  }
  .ar-mat--chrome.ar-mat--cream {
    background: var(--chrome-cream-fill-compact);
  }
  .ar-mat--chrome.ar-mat--ink {
    background: var(--chrome-ink-fill-compact);
  }
  .ar-mat--overlay.ar-mat--cream {
    background: var(--overlay-cream-fill-compact);
  }
  .ar-mat--overlay.ar-mat--ink {
    background: var(--overlay-ink-fill-compact);
  }
}

/* No backdrop-filter support: an opaque ground, never unreadable glass. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .ar-mat--glass.ar-mat--cream {
    background: var(--ground-default);
  }
  .ar-mat--glass.ar-mat--ink {
    background: var(--bg-console);
  }
}

/*
 * Boxes (@armage/ui/boxes.css): the container patterns the marketing site
 * and the portal share. Armage Design System v2, 16 brand components /
 * boxes (Oct 2026). Framework-free; tokens only. Requires controls.css
 * (the CTAs) and material.css (the glass plates).
 *
 * One corner language: a box takes --radius-box (8px); every control, chip
 * and tile inside it takes --radius-control (2px); glass keeps --plate-radius.
 * Green appears where it means something: the check, a live state, the
 * found state, the glow in a console band. Numbers are never green.
 *
 * A dark part (a console plan band, a console box, a console strip) carries
 * the class `ar-on-dark` as well as its data-tone: ar-on-dark is the console
 * re-scope from tokens.css (text, borders, veils, lookups, CTA swap), so a
 * box never restates a theme. The CTA inside a dark part is the green block.
 *
 *   .ar-plan[data-tone=paper|glass|console|image] (+ .is-recommended)
 *       __tab · __head (+ ar-on-dark on console/image) · __plate (glass
 *       tones add ar-mat--glass ar-mat--plate ar-mat--cream|ink) · __photo
 *       (image tone) · __name · __price · __amount · __period · __tagline ·
 *       __note · __body · __list · __feature (+ .is-muted) · __extras ·
 *       __extras-title · __foot
 *   .ar-feature[data-tone=sunken|paper|console]
 *       __title · __sub · __window (ar-mat--glass ar-mat--plate ar-mat--cream|ink)
 *       · __bar (+ ar-mat-rule) · __dot · __content
 *   .ar-compare[data-tone=console|paper] > table.ar-compare__table
 *       __corner · __plan (+ .is-recommended) · __rec · __planname ·
 *       __planprice · __section (tbody; [data-open=false] or a __toggle
 *       with aria-expanded=false collapses its rows) · __sechead · __toggle
 *       · __chev · __sectitle · __count · __row · __label · __labeltext ·
 *       __note · __cell (+ .is-start, .is-recommended, [data-value=yes|no])
 *       · __val[data-state=found|scoped|request] · __logos
 *   .ar-cta[data-tone=console|glass]
 *       __plate (glass tone) · __copy · __eyebrow · __title · __body · __side
 *       · __people · __person · (actions are .ar-control buttons)
 *   .ar-logo-tile (+ img or __mono)
 *   .ar-logos + .ar-logos--rows|chips
 *       __group · __label · __list · __item · __name · __note ·
 *       __status[data-status=live|scoped|request|addon|included]
 *   .ar-strip[data-tone=paper|console]  __label · __row · __item · __logo · __word
 *   .ar-box-check · .ar-box-dash   the marks (drawn; an inline SVG child may replace them)
 *   .ar-sr                         visually hidden
 *
 * Usage — PlanCard (console band, recommended):
 *   <article class="ar-plan is-recommended" data-tone="console">
 *     <div class="ar-plan__tab">Recommended</div>
 *     <header class="ar-plan__head ar-on-dark">
 *       <div class="ar-plan__plate">
 *         <div class="ar-plan__name">Newsroom Daily</div>
 *         <div class="ar-plan__price"><span class="ar-plan__amount">$1,500</span><span class="ar-plan__period">/month</span></div>
 *         <p class="ar-plan__tagline">A department with sections and more than one voice.</p>
 *         <div class="ar-plan__note">+ $1,500 set-up, once</div>
 *       </div>
 *     </header>
 *     <div class="ar-plan__body">
 *       <ul class="ar-plan__list" role="list">
 *         <li class="ar-plan__feature">20 stories a month</li>
 *         <li class="ar-plan__feature is-muted">Single sign-on</li>
 *       </ul>
 *       <div class="ar-plan__extras"><div class="ar-plan__extras-title">Everything in Newsroom Weekly, plus:</div><ul class="ar-plan__list" role="list">…</ul></div>
 *     </div>
 *     <footer class="ar-plan__foot"><a class="ar-control ar-btn--primary ar-size--lg ar-btn--full" href="/start">Start Newsroom Daily</a></footer>
 *   </article>
 *   Glass band: data-tone="glass" and <div class="ar-plan__plate ar-mat--glass ar-mat--plate ar-mat--cream">.
 *   Image band: data-tone="image", header also ar-on-dark, <img class="ar-plan__photo" alt="">
 *   first inside the header, plate ar-mat--glass ar-mat--plate ar-mat--ink.
 *
 * Usage — FeatureBox:
 *   <article class="ar-feature" data-tone="sunken">
 *     <h3 class="ar-feature__title">Referral paths <span class="ar-feature__sub">measured against a baseline</span></h3>
 *     <div class="ar-feature__window ar-mat--glass ar-mat--plate ar-mat--cream">
 *       <div class="ar-feature__bar ar-mat-rule"><span class="ar-feature__dot" aria-hidden="true"></span>armage / referrals</div>
 *       <div class="ar-feature__content">…readout rows, a logo list, a small table…</div>
 *     </div>
 *   </article>
 *   Console tone: data-tone="console" + class ar-on-dark on the article; window ar-mat--ink.
 *
 * Usage — CompareTable (console):
 *   <div class="ar-compare ar-on-dark" data-tone="console">
 *     <table class="ar-compare__table">
 *       <caption class="ar-sr">Every plan, every row</caption>
 *       <thead><tr>
 *         <th scope="col" class="ar-compare__corner">Compare plans</th>
 *         <th scope="col" class="ar-compare__plan is-recommended">
 *           <span class="ar-compare__rec">Recommended</span>
 *           <span class="ar-compare__planname">Newsroom Daily</span>
 *           <span class="ar-compare__planprice">$1,500 / mo</span>
 *           <a class="ar-control ar-btn--primary ar-size--sm" href="/start">Start</a>
 *         </th>
 *       </tr></thead>
 *       <tbody class="ar-compare__section">
 *         <tr class="ar-compare__sechead"><th colspan="5" scope="colgroup">
 *           <button type="button" class="ar-compare__toggle" aria-expanded="true">
 *             <span class="ar-compare__chev" aria-hidden="true"></span>
 *             <span class="ar-compare__sectitle">Publishing</span>
 *             <span class="ar-compare__count">4</span>
 *           </button>
 *         </th></tr>
 *         <tr class="ar-compare__row">
 *           <th scope="row" class="ar-compare__label"><span class="ar-compare__labeltext">Stories a month</span><span class="ar-compare__note">Researched, drafted, sourced</span></th>
 *           <td class="ar-compare__cell"><span class="ar-compare__val">8</span></td>
 *           <td class="ar-compare__cell is-recommended" data-value="yes"><span class="ar-sr">Included</span></td>
 *           <td class="ar-compare__cell" data-value="no"><span class="ar-sr">Not included</span></td>
 *           <td class="ar-compare__cell"><span class="ar-compare__val" data-state="scoped">Scoped</span></td>
 *         </tr>
 *       </tbody>
 *     </table>
 *   </div>
 *   Collapse: a script flips aria-expanded on the toggle (the sheet hides the
 *   rows via :has); without script every section stays open. Below 760px the
 *   table scrolls sideways inside its box; the label column stays put.
 *
 * Usage — CtaBox (console):
 *   <section class="ar-cta ar-on-dark" data-tone="console">
 *     <div class="ar-cta__copy">
 *       <div class="ar-cta__eyebrow">Talk to the team</div>
 *       <h3 class="ar-cta__title">Not sure which plan fits?</h3>
 *       <p class="ar-cta__body">Twenty minutes: what you run, what is missing, where Armage fits.</p>
 *     </div>
 *     <div class="ar-cta__side">
 *       <ul class="ar-cta__people" role="list" aria-label="Who you will speak to">
 *         <li class="ar-cta__person" title="Jean-Stéphane Lopez"><span>JL</span></li>
 *       </ul>
 *       <a class="ar-control ar-btn--secondary" href="/pricing">See every plan</a>
 *       <a class="ar-control ar-btn--primary" href="/start">Book the mapping call</a>
 *     </div>
 *   </section>
 *   Glass tone: data-tone="glass" (no ar-on-dark) and wrap copy + side in
 *   <div class="ar-cta__plate ar-mat--glass ar-mat--plate ar-mat--cream">.
 *
 * Usage — LogoList (chips) and LogoStrip:
 *   <div class="ar-logos ar-logos--chips">
 *     <div class="ar-logos__group">
 *       <div class="ar-logos__label">Your site</div>
 *       <ul class="ar-logos__list" role="list">
 *         <li class="ar-logos__item">
 *           <span class="ar-logo-tile" aria-hidden="true"><span class="ar-logo-tile__mono">WP</span></span>
 *           <span class="ar-logos__name">WordPress<span class="ar-logos__note">publishing API</span></span>
 *           <span class="ar-logos__status" data-status="scoped">Scoped</span>
 *         </li>
 *       </ul>
 *     </div>
 *   </div>
 *   <section class="ar-strip" data-tone="paper">
 *     <div class="ar-strip__label">Built with</div>
 *     <ul class="ar-strip__row" role="list">
 *       <li class="ar-strip__item"><img class="ar-strip__logo" src="/logos/x.svg" alt="X"></li>
 *       <li class="ar-strip__item"><span class="ar-strip__word">Cloudflare</span></li>
 *     </ul>
 *   </section>
 */

/* ── shared: visually hidden, the check and the dash ───────────────── */
.ar-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* The marks are drawn by the sheet (a rotated L for the check, a bar for the
   dash) inside a 16px box; an inline SVG child replaces the drawing. */
.ar-box-check,
.ar-box-dash {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: var(--space-4);
  height: var(--space-4);
}
.ar-box-check {
  color: var(--signal-on-cream);
}
.ar-box-dash {
  color: var(--text-tertiary);
}
.ar-box-check:empty::before {
  content: '';
  width: var(--space-1);
  height: var(--space-2);
  margin-bottom: var(--space-1);
  border-right: var(--border-width-bracket) solid currentColor;
  border-bottom: var(--border-width-bracket) solid currentColor;
  transform: rotate(45deg);
}
.ar-box-dash:empty::before {
  content: '';
  width: var(--space-2);
  border-bottom: var(--border-width-bracket) solid currentColor;
}
.ar-box-check svg,
.ar-box-dash svg {
  width: 100%;
  height: 100%;
  display: block;
}

/* ── logo tile: a square, never a circle ───────────────────────────── */
.ar-logo-tile {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: var(--space-6);
  height: var(--space-6);
  overflow: hidden;
  border-radius: var(--radius-control);
  background: var(--bg-surface);
  box-shadow: inset 0 0 0 var(--border-width-hairline) var(--border-default);
}
.ar-logo-tile img {
  width: 72%;
  height: 72%;
  object-fit: contain;
  display: block;
}
.ar-logo-tile__mono {
  font: var(--type-signal);
  font-size: calc(var(--space-2) + var(--border-width-hairline));
  letter-spacing: 0;
  line-height: 1;
  color: var(--text-secondary);
}
.ar-on-dark .ar-logo-tile,
[data-theme='console'] .ar-logo-tile {
  background: var(--bg-console-raised);
}

/* ── logo list: rows (models, systems) or square chips (integrations) ─ */
.ar-logos {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}
.ar-logos__label {
  font: var(--type-micro);
  letter-spacing: var(--tracking-signal);
  text-transform: uppercase;
  color: var(--text-tertiary);
  margin-bottom: var(--space-3);
}
.ar-logos__list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.ar-logos--rows .ar-logos__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.ar-logos--rows .ar-logos__item {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-1) var(--space-3);
  font: var(--type-body-s);
  color: var(--text-primary);
}
.ar-logos--chips .ar-logos__list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}
.ar-logos--chips .ar-logos__item {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: calc(var(--space-8) + var(--space-1));
  padding: var(--space-1) var(--space-3) var(--space-1) var(--space-1);
  border-radius: var(--radius-control);
  box-shadow: inset 0 0 0 var(--border-width-hairline) var(--border-default);
  background: var(--bg-surface);
  font: var(--type-body-s);
  color: var(--text-primary);
}
.ar-logos--chips .ar-logos__item .ar-logo-tile {
  width: var(--space-5);
  height: var(--space-5);
}
.ar-logos__name {
  display: inline-flex;
  flex-direction: column;
  min-width: 0;
}
.ar-logos__note {
  font: var(--type-caption);
  color: var(--text-tertiary);
}
.ar-logos__status {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font: var(--type-micro);
  letter-spacing: var(--tracking-signal);
  text-transform: uppercase;
  color: var(--text-tertiary);
  white-space: nowrap;
}
.ar-logos--chips .ar-logos__status {
  margin-left: var(--space-2);
}
.ar-logos__status::before {
  content: '';
  flex: 0 0 auto;
  width: calc(var(--space-3) / 2);
  height: calc(var(--space-3) / 2);
  border-radius: var(--radius-full);
  background: currentColor;
}
/* live and included are signal, scoped is caution, request and addon stay
   tertiary; the -on-cream lookups flip inside ar-on-dark on their own. */
.ar-logos__status[data-status='live'],
.ar-logos__status[data-status='included'] {
  color: var(--signal-on-cream);
}
.ar-logos__status[data-status='scoped'] {
  color: var(--caution-on-cream);
}

/* ── logo strip: one monochrome row between two hairlines ──────────── */
.ar-strip {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  padding: var(--space-6) 0;
  border-block: var(--border-hairline);
}
.ar-strip[data-tone='console'] {
  background: var(--bg-console);
  padding-inline: var(--space-8);
}
.ar-strip__label {
  font: var(--type-micro);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--text-tertiary);
  white-space: nowrap;
  flex: 0 0 auto;
}
.ar-strip__row {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex: 1 1 auto;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4) var(--space-8);
}
.ar-strip__item {
  display: flex;
  align-items: center;
  height: calc(var(--space-6) + var(--space-1));
}
.ar-strip__logo {
  height: 100%;
  width: auto;
  max-width: calc(var(--space-32) + var(--space-1));
  object-fit: contain;
  filter: grayscale(1) contrast(1.1);
  opacity: var(--opacity-ghost);
  transition: opacity var(--duration-standard) var(--ease-standard);
}
.ar-strip__logo:hover {
  opacity: var(--opacity-full);
}
.ar-on-dark .ar-strip__logo,
[data-theme='console'] .ar-strip__logo {
  filter: grayscale(1) invert(1) brightness(1.4);
}
.ar-strip__word {
  font: var(--type-body-l);
  letter-spacing: var(--tracking-title);
  color: var(--text-secondary);
}

/* ── plan card ─────────────────────────────────────────────────────── */
.ar-plan {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--bg-surface);
  border-radius: var(--radius-box);
  box-shadow: inset 0 0 0 var(--border-width-hairline) var(--border-default);
}
.ar-plan.is-recommended {
  box-shadow: inset 0 0 0 var(--border-width-hairline) var(--text-primary);
}
/* The ink tab sits on the card's top edge; it is the CTA material, so it is
   the ink block on cream and the green block inside a dark theme. */
.ar-plan__tab {
  position: absolute;
  top: 0;
  left: var(--space-6);
  transform: translateY(-100%);
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-control) var(--radius-control) 0 0;
  background: var(--cta-fill);
  color: var(--cta-ink);
  font: var(--type-micro);
  letter-spacing: var(--tracking-signal);
  text-transform: uppercase;
}
.ar-plan__tab::before {
  content: '';
  flex: 0 0 auto;
  width: calc(var(--space-3) / 2);
  height: calc(var(--space-3) / 2);
  background: var(--cta-tick);
}
.ar-plan__head {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: var(--space-8) var(--space-6) var(--space-6);
  border-radius: var(--radius-box) var(--radius-box) 0 0;
  background: var(--bg-sunken);
  border-bottom: var(--border-hairline);
}
/* Grain belongs to the band (the ground), never to the plate on it. */
.ar-plan__head::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: var(--z-ground-grain);
  pointer-events: none;
  background-image: var(--grain-tile);
  background-size: var(--grain-size);
  opacity: var(--grain-on-cream);
}
.ar-plan[data-tone='glass'] .ar-plan__head {
  padding: var(--space-4);
  background:
    radial-gradient(90% 120% at 18% 0%, var(--signal-glow), transparent 62%),
    radial-gradient(70% 90% at 100% 100%, var(--signal-glow), transparent 70%), var(--bg-sunken);
}
.ar-plan[data-tone='console'] .ar-plan__head {
  background:
    radial-gradient(110% 130% at 12% 0%, var(--signal-glow), transparent 58%), var(--bg-console);
  border-bottom-color: var(--border-console);
}
.ar-plan[data-tone='console'] .ar-plan__head::after {
  opacity: var(--grain-on-dark);
}
.ar-plan[data-tone='image'] .ar-plan__head {
  padding: var(--space-4);
  background: var(--bg-console);
  border-bottom-color: var(--border-console);
}
.ar-plan[data-tone='image'] .ar-plan__head::after {
  opacity: var(--grain-on-image);
}
.ar-plan__photo {
  position: absolute;
  inset: 0;
  z-index: var(--z-page-grain);
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.ar-plan__plate {
  position: relative;
  z-index: var(--z-plate);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.ar-plan__plate.ar-mat--glass {
  padding: var(--space-5);
}
.ar-plan__name {
  font: var(--type-micro);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--text-secondary);
}
.ar-plan__price {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  margin-top: var(--space-2);
}
.ar-plan__amount {
  font: var(--type-display-m);
  letter-spacing: var(--tracking-display-m);
  font-variant-numeric: tabular-nums;
  color: var(--text-primary);
}
.ar-plan__period {
  font: var(--type-body-s);
  color: var(--text-tertiary);
}
.ar-plan__tagline {
  margin: 0;
  font: var(--type-body-s);
  color: var(--text-secondary);
}
.ar-plan__note {
  font: var(--type-micro);
  letter-spacing: var(--tracking-signal);
  text-transform: uppercase;
  color: var(--text-tertiary);
}
.ar-plan__body {
  flex: 1 1 auto;
  padding: var(--space-6);
}
.ar-plan__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.ar-plan__feature {
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
  font: var(--type-body-s);
  color: var(--text-primary);
}
.ar-plan__feature.is-muted {
  color: var(--text-tertiary);
}
/* The mark is drawn unless the item brings its own .ar-box-check/.ar-box-dash. */
.ar-plan__feature:not(:has(.ar-box-check, .ar-box-dash))::before {
  content: '';
  flex: 0 0 auto;
  box-sizing: border-box;
  width: var(--space-1);
  height: var(--space-2);
  margin: calc(var(--space-1) / 2) calc(var(--space-2) - var(--border-width-bracket)) 0
    calc(var(--space-1) + var(--border-width-hairline));
  border-right: var(--border-width-bracket) solid var(--signal-on-cream);
  border-bottom: var(--border-width-bracket) solid var(--signal-on-cream);
  transform: rotate(45deg);
}
.ar-plan__feature.is-muted:not(:has(.ar-box-check, .ar-box-dash))::before {
  width: var(--space-2);
  height: 0;
  margin: calc(var(--space-2) + var(--border-width-hairline)) var(--space-1) 0 var(--space-1);
  border-right: 0;
  border-bottom: var(--border-width-bracket) solid var(--text-tertiary);
  transform: none;
}
.ar-plan__feature .ar-box-check,
.ar-plan__feature .ar-box-dash {
  margin-top: calc(var(--space-1) / 2);
}
.ar-plan__extras {
  margin-top: var(--space-6);
  padding-top: var(--space-5);
  border-top: var(--border-hairline);
}
.ar-plan__extras-title {
  font: var(--type-caption);
  color: var(--text-tertiary);
  margin-bottom: var(--space-3);
}
.ar-plan__foot {
  padding: 0 var(--space-6) var(--space-6);
}

/* ── feature box: claim + qualifier, a glass window that bleeds out ─── */
.ar-feature {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  padding: var(--space-6) 0 0 var(--space-6);
  min-height: calc(var(--space-32) * 2.5);
  border-radius: var(--radius-box);
  background: var(--bg-sunken);
  box-shadow: inset 0 0 0 var(--border-width-hairline) var(--border-subtle);
}
/* The glow behind the window (the one sanctioned gradient), then the grain. */
.ar-feature::before {
  content: '';
  position: absolute;
  inset: auto -10% -30% 30%;
  height: 70%;
  z-index: var(--z-page-grain);
  background: radial-gradient(closest-side, var(--signal-glow), transparent);
  pointer-events: none;
}
.ar-feature::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: var(--z-ground-grain);
  pointer-events: none;
  background-image: var(--grain-tile);
  background-size: var(--grain-size);
  opacity: var(--grain-on-cream);
}
.ar-feature[data-tone='paper'] {
  background: var(--bg-surface);
}
.ar-feature[data-tone='console'] {
  background: var(--bg-console);
  box-shadow: inset 0 0 0 var(--border-width-hairline) var(--border-console);
}
.ar-feature[data-tone='console']::after {
  opacity: var(--grain-on-dark);
}
.ar-feature__title {
  position: relative;
  z-index: var(--z-sheet);
  margin: 0;
  padding-right: var(--space-6);
  font: var(--type-title);
  letter-spacing: var(--tracking-title);
  color: var(--text-primary);
  display: flex;
  flex-direction: column;
}
.ar-feature__sub {
  color: var(--text-tertiary);
}
.ar-feature .ar-feature__window.ar-mat--glass {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  border-radius: var(--plate-radius) 0 0 0;
  border-right-width: 0;
  border-bottom-width: 0;
  overflow: hidden;
}
.ar-feature__bar {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  border-bottom: var(--border-width-hairline) solid;
  font: var(--type-micro);
  letter-spacing: var(--tracking-signal);
  text-transform: uppercase;
  color: var(--text-tertiary);
}
.ar-feature__dot {
  flex: 0 0 auto;
  width: calc(var(--space-3) / 2);
  height: calc(var(--space-3) / 2);
  background: var(--signal-on-cream);
}
.ar-feature__content {
  padding: var(--space-4);
  font: var(--type-body-s);
}

/* ── compare table: console ground, a real table, collapsible sections ─ */
/* Positioned, so the .ar-sr texts inside the cells (absolute) are contained
   by the scrolling box rather than the viewport, which they would otherwise
   widen past the phone's edge. */
.ar-compare {
  position: relative;
  border-radius: var(--radius-box);
  overflow-x: auto;
  background: var(--bg-surface);
  box-shadow: inset 0 0 0 var(--border-width-hairline) var(--border-default);
  --ar-compare-ground: var(--bg-surface);
}
.ar-compare[data-tone='console'] {
  background: var(--bg-console);
  box-shadow: inset 0 0 0 var(--border-width-hairline) var(--border-console);
  --ar-compare-ground: var(--bg-console);
}
.ar-compare__table {
  width: 100%;
  min-width: calc(var(--bp-tablet) - var(--space-2));
  border-collapse: collapse;
  table-layout: fixed;
}
.ar-compare__table th,
.ar-compare__table td {
  padding: var(--space-4) var(--space-5);
  border-bottom: var(--border-width-hairline) solid var(--border-subtle);
  vertical-align: top;
  text-align: center;
  font: var(--type-body-s);
  color: var(--text-primary);
}
.ar-compare__table thead th {
  position: sticky;
  top: 0;
  z-index: var(--z-plate);
  background: var(--ar-compare-ground);
  vertical-align: bottom;
  padding-block: var(--space-5);
}
/* The first column stays put while the rest scrolls sideways. */
.ar-compare__table .ar-compare__corner,
.ar-compare__table .ar-compare__label {
  position: sticky;
  left: 0;
  z-index: var(--z-sheet);
  background: var(--ar-compare-ground);
  text-align: left;
}
.ar-compare__table thead .ar-compare__corner {
  z-index: calc(var(--z-plate) + var(--z-sheet));
}
.ar-compare__table .ar-compare__corner {
  width: 30%;
  font: var(--type-micro);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--text-tertiary);
}
.ar-compare__plan > span {
  display: block;
  margin-inline: auto;
}
.ar-compare__plan > .ar-control {
  margin-inline: auto;
  margin-top: var(--space-3);
}
.ar-compare__planname {
  font: var(--type-subtitle);
  letter-spacing: var(--tracking-title);
  color: var(--text-primary);
}
.ar-compare__planprice {
  font: var(--type-micro);
  letter-spacing: var(--tracking-signal);
  text-transform: uppercase;
  color: var(--text-tertiary);
  margin-top: var(--space-1);
}
.ar-compare__plan > .ar-compare__rec {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
  font: var(--type-micro);
  letter-spacing: var(--tracking-signal);
  text-transform: uppercase;
  color: var(--signal-on-cream);
}
.ar-compare__rec::before {
  content: '';
  width: calc(var(--space-3) / 2);
  height: calc(var(--space-3) / 2);
  background: currentColor;
}
.ar-compare__table .ar-compare__sechead th {
  padding: 0;
  text-align: left;
  background: var(--veil-on-cream);
}
.ar-compare__toggle {
  all: unset;
  box-sizing: border-box;
  width: 100%;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  cursor: pointer;
  font: var(--type-subtitle);
  letter-spacing: var(--tracking-title);
  color: var(--text-primary);
}
.ar-compare__toggle:focus-visible {
  outline: var(--focus-ring-width) solid var(--focus-ring);
  outline-offset: calc(-1 * var(--focus-ring-width));
}
/* The chevron is drawn: a rotated corner that turns when the section closes. */
.ar-compare__chev {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--space-4);
  height: var(--space-4);
  color: var(--text-tertiary);
  transition: transform var(--duration-standard) var(--ease-standard);
}
.ar-compare__chev:empty::before {
  content: '';
  width: calc(var(--space-2) - var(--border-width-bracket));
  height: calc(var(--space-2) - var(--border-width-bracket));
  margin-top: calc(-1 * var(--space-1));
  border-right: var(--border-width-bracket) solid currentColor;
  border-bottom: var(--border-width-bracket) solid currentColor;
  transform: rotate(45deg);
}
.ar-compare__chev svg {
  width: 100%;
  height: 100%;
}
.ar-compare__toggle[aria-expanded='false'] .ar-compare__chev {
  transform: rotate(-90deg);
}
.ar-compare__count {
  margin-left: auto;
  font: var(--type-micro);
  letter-spacing: var(--tracking-signal);
  color: var(--text-tertiary);
}
/* Collapse: either the tbody carries data-open="false" or its toggle says
   aria-expanded="false"; the section head and its count stay visible. */
.ar-compare__section[data-open='false'] .ar-compare__row,
.ar-compare__section:has(.ar-compare__toggle[aria-expanded='false']) .ar-compare__row {
  display: none;
}
.ar-compare__table .ar-compare__label {
  font-weight: var(--weight-regular);
}
.ar-compare__labeltext {
  display: block;
  color: var(--text-primary);
}
.ar-compare__note {
  display: block;
  margin-top: var(--space-1);
  font: var(--type-caption);
  color: var(--text-tertiary);
  max-width: calc(var(--measure-lede) * 0.75);
}
.ar-compare__cell {
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}
.ar-compare__table .ar-compare__cell.is-start {
  text-align: left;
}
/* The recommended column: a faint veil, nothing louder. */
.ar-compare__table .ar-compare__cell.is-recommended,
.ar-compare__table .ar-compare__plan.is-recommended {
  background: var(--veil-on-cream);
}
.ar-compare__table thead .ar-compare__plan.is-recommended {
  background: linear-gradient(var(--veil-on-cream), var(--veil-on-cream)), var(--ar-compare-ground);
}
/* Drawn check / dash cells: data-value="yes" | "no" (with an .ar-sr text). */
.ar-compare__cell[data-value]::before {
  content: '';
  display: inline-block;
  box-sizing: border-box;
  vertical-align: middle;
}
.ar-compare__cell[data-value='yes']::before {
  width: var(--space-1);
  height: var(--space-2);
  margin-bottom: var(--space-1);
  border-right: var(--border-width-bracket) solid var(--signal-on-cream);
  border-bottom: var(--border-width-bracket) solid var(--signal-on-cream);
  transform: rotate(45deg);
}
.ar-compare__cell[data-value='no']::before {
  width: var(--space-2);
  height: 0;
  border-bottom: var(--border-width-bracket) solid var(--text-tertiary);
}
/* Green is the check and the found state only; a number is never green. */
.ar-compare__val[data-state='found'] {
  color: var(--signal-on-cream);
}
.ar-compare__val[data-state='scoped'] {
  color: var(--caution-on-cream);
}
.ar-compare__val[data-state='request'] {
  color: var(--text-tertiary);
}
.ar-compare__logos {
  text-align: left;
}
.ar-compare__logos .ar-logos__item {
  font: var(--type-caption);
}
.ar-compare__logos .ar-logos__label {
  margin-bottom: var(--space-2);
}

/* ── CTA box: a question, the people, one action ───────────────────── */
.ar-cta {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-8);
  flex-wrap: wrap;
  padding: var(--space-8);
  border-radius: var(--radius-box);
  background: var(--bg-surface);
  box-shadow: inset 0 0 0 var(--border-width-hairline) var(--border-default);
}
.ar-cta[data-tone='console'] {
  background:
    radial-gradient(70% 160% at 100% 50%, var(--signal-glow), transparent 60%), var(--bg-console);
  box-shadow: inset 0 0 0 var(--border-width-hairline) var(--border-console);
}
.ar-cta[data-tone='glass'] {
  padding: var(--space-4);
  background:
    radial-gradient(60% 140% at 90% 50%, var(--signal-glow), transparent 65%), var(--bg-sunken);
  box-shadow: none;
}
.ar-cta::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: var(--z-ground-grain);
  pointer-events: none;
  background-image: var(--grain-tile);
  background-size: var(--grain-size);
  opacity: var(--grain-on-cream);
}
.ar-cta[data-tone='console']::after {
  opacity: var(--grain-on-dark);
}
.ar-cta__plate {
  flex: 1 1 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-8);
  flex-wrap: wrap;
  padding: var(--space-6) var(--space-8);
}
.ar-cta__copy,
.ar-cta__side {
  position: relative;
  z-index: var(--z-sheet);
}
.ar-cta__copy {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  max-width: var(--measure-lede);
}
.ar-cta__eyebrow {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font: var(--type-micro);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--signal-on-cream);
}
.ar-cta__eyebrow::before {
  content: '';
  width: calc(var(--space-3) / 2);
  height: calc(var(--space-3) / 2);
  background: currentColor;
}
.ar-cta__title {
  margin: 0;
  font: var(--type-title);
  letter-spacing: var(--tracking-title);
  color: var(--text-primary);
}
.ar-cta__body {
  margin: 0;
  font: var(--type-body-s);
  color: var(--text-secondary);
}
.ar-cta__side {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  flex-wrap: wrap;
}
/* People: round by nature, so radius-full is right here. Initials stand in
   for a photo; names and photos only with the person's consent. */
.ar-cta__people {
  list-style: none;
  margin: 0 var(--space-2) 0 0;
  padding: 0;
  display: flex;
}
.ar-cta__person {
  width: var(--space-10);
  height: var(--space-10);
  margin-left: calc(-1 * var(--space-3) / 2);
  border-radius: var(--radius-full);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-sunken);
  box-shadow: 0 0 0 var(--border-width-bracket) var(--bg-surface);
  font: var(--type-micro);
  letter-spacing: var(--tracking-signal);
  text-transform: uppercase;
  color: var(--text-secondary);
}
.ar-cta__person:first-child {
  margin-left: 0;
}
.ar-on-dark .ar-cta__person,
[data-theme='console'] .ar-cta__person {
  background: var(--bg-console-raised);
  box-shadow: 0 0 0 var(--border-width-bracket) var(--bg-console);
}
.ar-cta__person img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ── compact: boxes stack, the table scrolls inside its box ────────── */
@media (max-width: 767px) {
  .ar-cta,
  .ar-cta__plate {
    padding: var(--space-6);
  }
  .ar-cta__side {
    width: 100%;
  }
  /* A long label wraps inside its button instead of widening a 320 px page (ADR 0109). */
  .ar-cta__plate,
  .ar-cta__copy,
  .ar-cta__side {
    min-width: 0;
  }
  .ar-cta__side > .ar-control {
    max-width: 100%;
    white-space: normal;
    text-align: center;
  }
  .ar-feature {
    min-height: 0;
  }
}

/* ── reduced motion ────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .ar-compare__chev,
  .ar-strip__logo {
    transition: none;
  }
}

/*
 * Portal auth surfaces (@armage/portal/auth.css). Tokens only.
 *
 * The language: a console-dark brand panel (mark, display type, the three
 * onboarding steps as instrument plates) beside a quiet form column that
 * reuses the site's form system (@armage/ui/forms.css) - fields are Surface,
 * focus draws tracking-frame corners, the send bar is ink. No gradients, no
 * imagery, no JavaScript: the panel's depth comes from ground steps, hairlines
 * and grain. Signal green stays a <5% accent (step index, live markers).
 *
 *   .ar-auth                 the split viewport
 *   .ar-auth__panel          brand side (always console ground)
 *   .ar-auth__steps/step     onboarding sequence plates
 *   .ar-auth__main/card      form side (theme follows the surface)
 *   .ar-auth__sso-btn        OAuth provider buttons
 *   .ar-auth__divider        "or" rule
 *   .ar-auth__notice         result band (error / confirmation)
 *   .ar-auth__code           TOTP / verification code entry
 *   .ar-auth__secret         TOTP manual-entry key
 *   .ar-session              the signed-in shell card
 */

/* ── page base (DS law: the page itself carries an explicit ground, so
      overscroll and anything past the fold never expose the browser's
      default white behind a dark surface) ──────────────────────────────── */

html {
  height: 100%;
  background: var(--ground-default);
  color-scheme: light;
}

html[data-theme='console'] {
  color-scheme: dark;
}

body {
  min-height: 100%;
  margin: 0;
  background: var(--ground-default);
  color: var(--text-primary);
  font: var(--type-body);
  -webkit-font-smoothing: antialiased;
}

/* ── page scaffold ─────────────────────────────────────────────────────── */

.ar-auth {
  min-height: 100vh;
  min-height: 100dvh;
  display: grid;
  background: var(--ground-default);
  color: var(--text-primary);
}

@media (min-width: 1024px) {
  .ar-auth {
    grid-template-columns: minmax(400px, 44%) minmax(0, 1fr);
  }
}

/* ── brand panel ───────────────────────────────────────────────────────── */

.ar-auth__panel {
  position: relative;
  display: grid;
  align-content: space-between;
  gap: var(--rhythm-block);
  padding: var(--space-8) var(--space-8) var(--space-6);
  background: var(--bg-console);
  color: var(--text-inverse);
  overflow: hidden;
}

@media (min-width: 1024px) {
  .ar-auth__panel {
    padding: var(--space-12) var(--space-10) var(--space-10);
  }
}

/* Depth without gradients: a sunken instrument field inset by a hairline. */
.ar-auth__panel::before {
  content: '';
  position: absolute;
  inset: var(--space-4);
  border: var(--border-hairline-dark);
  pointer-events: none;
}

.ar-auth__brand {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  color: var(--text-inverse);
  text-decoration: none;
}

.ar-auth__brand-mark {
  width: var(--space-8);
  height: var(--space-8);
  display: block;
}

.ar-auth__brand-name {
  font: var(--type-signal-wide);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}

.ar-auth__panel-copy {
  position: relative;
  display: grid;
  gap: var(--space-4);
  max-width: var(--measure-lede);
}

.ar-auth__panel-title {
  margin: 0;
  font: var(--type-display-m);
  letter-spacing: var(--tracking-display-m);
}

.ar-auth__panel-sub {
  margin: 0;
  font: var(--type-body);
  color: var(--text-inverse-secondary);
  max-width: var(--measure-comfort);
}

/* Environment marker: the mono data voice, signal only when synthetic. */
.ar-auth__panel-env {
  position: relative;
  font: var(--type-signal-micro);
  letter-spacing: var(--tracking-signal);
  text-transform: uppercase;
  color: var(--text-inverse-tertiary);
}

/* ── onboarding steps ──────────────────────────────────────────────────── */

.ar-auth__steps {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

.ar-auth__step {
  display: grid;
  align-content: start;
  gap: var(--space-3);
  min-height: calc(var(--space-24) + var(--space-2));
  padding: var(--space-4);
  border: var(--border-width-hairline) solid var(--plate-ink-edge);
  border-radius: var(--plate-radius);
  background: var(--plate-ink-fill);
  color: var(--text-inverse-secondary);
  font: var(--type-body-s);
}

.ar-auth__step[data-state='current'] {
  /* --bg-paper is the one ground the console theme never darkens, so the
     current step stays a light card with readable ink on every surface. */
  background: var(--bg-paper);
  border-color: var(--bg-paper);
  color: var(--ink-900);
  box-shadow: var(--shadow-console-sm);
}

.ar-auth__step-index {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--space-6);
  height: var(--space-6);
  border-radius: var(--radius-full);
  border: var(--border-width-hairline) solid var(--text-inverse-tertiary);
  font: var(--type-signal-micro);
  letter-spacing: var(--tracking-signal);
  color: var(--text-inverse-secondary);
}

.ar-auth__step[data-state='current'] .ar-auth__step-index {
  background: var(--accent-primary);
  border-color: var(--accent-primary);
  color: var(--on-state-fill);
}

@media (max-width: 1023.98px) {
  .ar-auth__panel {
    gap: var(--rhythm-group);
  }
  .ar-auth__panel-title {
    font: var(--type-headline);
    letter-spacing: var(--tracking-display-m);
  }
  .ar-auth__steps {
    display: none;
  }
}

/* ── form column ───────────────────────────────────────────────────────── */

.ar-auth__main {
  display: grid;
  align-content: center;
  justify-content: center;
  padding: var(--space-10) var(--space-4) var(--space-16);
}

.ar-auth__card {
  width: min(100%, calc(var(--grid-column) * 5 + var(--grid-gutter) * 4));
  display: grid;
  gap: var(--rhythm-group);
}

.ar-auth__heading {
  display: grid;
  gap: var(--space-2);
  text-align: center;
}

.ar-auth__title {
  margin: 0;
  font: var(--type-title);
  letter-spacing: var(--tracking-title);
}

.ar-auth__sub {
  margin: 0;
  font: var(--type-body-s);
  color: var(--text-tertiary);
}

/* ── SSO ───────────────────────────────────────────────────────────────── */

.ar-auth__sso {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3);
}

.ar-auth__sso-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: calc(var(--space-12) + var(--space-1));
  padding: var(--space-2) var(--space-4);
  border: var(--border-width-hairline) solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--ground-raised);
  color: var(--text-primary);
  font: var(--type-body-s);
  text-decoration: none;
  cursor: pointer;
}

.ar-auth__sso-btn:hover {
  border-color: var(--text-secondary);
}

.ar-auth__sso-btn:focus-visible {
  outline: var(--focus-ring-width) solid var(--focus-ring);
  outline-offset: var(--focus-ring-offset);
}

.ar-auth__sso-btn svg {
  width: var(--space-4);
  height: var(--space-4);
  flex: none;
}

.ar-auth__divider {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--space-3);
  color: var(--text-tertiary);
  font: var(--type-signal-micro);
  letter-spacing: var(--tracking-signal);
  text-transform: uppercase;
}

.ar-auth__divider::before,
.ar-auth__divider::after {
  content: '';
  border-top: var(--border-hairline);
}

/* ── notices ───────────────────────────────────────────────────────────── */

.ar-auth__notice {
  margin: 0;
  padding: var(--space-3) var(--space-4);
  border: var(--border-width-hairline) solid var(--border-default);
  border-left: var(--border-width-bracket) solid var(--danger-on-cream);
  border-radius: var(--radius-sm);
  background: var(--ground-raised);
  font: var(--type-body-s);
  color: var(--text-primary);
}

.ar-auth__notice[data-tone='ok'] {
  border-left-color: var(--signal-on-cream);
}

/* ── code entry and TOTP key ───────────────────────────────────────────── */

.ar-auth__code {
  text-align: center;
  font: var(--type-title);
  font-family: var(--font-signal);
  letter-spacing: var(--tracking-wide);
  font-variant-numeric: tabular-nums;
}

/* QR card: always a light ground, sized for phone cameras across the desk. */
.ar-auth__qr {
  justify-self: center;
  width: min(100%, calc(var(--space-32) + var(--space-24) + var(--space-12)));
  padding: var(--space-3);
  border: var(--border-hairline);
  border-radius: var(--radius-md);
  background: var(--bg-paper);
}

.ar-auth__qr svg {
  display: block;
  width: 100%;
  height: auto;
}

.ar-auth__manual {
  display: grid;
  gap: var(--space-3);
}

.ar-auth__manual summary {
  cursor: pointer;
  font: var(--type-body-s);
  color: var(--text-link);
  text-align: center;
}

.ar-auth__secret {
  display: block;
  padding: var(--space-3) var(--space-4);
  border: var(--border-hairline);
  border-radius: var(--radius-sm);
  background: var(--ground-sunken);
  font: var(--type-signal);
  letter-spacing: var(--tracking-signal);
  color: var(--text-primary);
  overflow-wrap: anywhere;
  user-select: all;
}

.ar-auth__hintlist {
  margin: 0;
  padding-left: var(--space-5);
  display: grid;
  gap: var(--space-2);
  font: var(--type-body-s);
  color: var(--text-secondary);
}

/* ── auxiliary links ───────────────────────────────────────────────────── */

.ar-auth__alt {
  margin: 0;
  text-align: center;
  font: var(--type-body-s);
  color: var(--text-tertiary);
}

.ar-auth__alt a,
.ar-auth__forgot {
  color: var(--text-link);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.ar-auth__alt a:hover,
.ar-auth__forgot:hover {
  color: var(--text-link-hover);
}

.ar-auth__forgot {
  font: var(--type-caption);
  justify-self: end;
}

.ar-auth__field-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3);
}

@media (max-width: 479.98px) {
  .ar-auth__field-row {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ── signed-in shell ───────────────────────────────────────────────────── */

.ar-session {
  min-height: 100vh;
  min-height: 100dvh;
  display: grid;
  align-content: start;
  gap: var(--rhythm-block);
  /* One column that may shrink below its content's widest line: without it
     the shell grew to the console nav's width and scrolled sideways on a
     phone (seen in the 390 px cover screenshots, ADR 0068). */
  grid-template-columns: minmax(0, 1fr);
  padding: var(--space-8) var(--space-4) var(--space-16);
  background: var(--ground-default);
  color: var(--text-primary);
}

.ar-session__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3) var(--space-4);
  max-width: var(--grid-content);
  width: 100%;
  margin: 0 auto;
  padding-bottom: var(--space-4);
  border-bottom: var(--border-hairline);
}

.ar-session__card {
  max-width: calc(var(--grid-column) * 7 + var(--grid-gutter) * 6);
  width: 100%;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--rhythm-group);
}

.ar-session__facts {
  margin: 0;
  display: grid;
  gap: 0;
  border-top: var(--border-hairline);
}

.ar-session__facts > div {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
  gap: var(--space-4);
  padding: var(--space-3) 0;
  border-bottom: var(--rule-row);
}

.ar-session__facts dt {
  font: var(--type-signal-micro);
  letter-spacing: var(--tracking-signal);
  text-transform: uppercase;
  color: var(--text-tertiary);
  align-self: center;
}

.ar-session__facts dd {
  margin: 0;
  font: var(--type-body-s);
  overflow-wrap: anywhere;
}

.ar-session--wide .ar-session__card--wide {
  max-width: var(--grid-content);
}

.ar-shell__side {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3) var(--space-8);
  min-width: 0;
}

.ar-shell__nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-4);
}

.ar-shell__nav-link {
  font: var(--type-signal);
  letter-spacing: var(--tracking-signal);
  text-transform: uppercase;
  color: var(--text-tertiary);
  text-decoration: none;
  padding: var(--space-2) 0;
  border-bottom: var(--border-width-bracket) solid transparent;
}

.ar-shell__nav-link:hover {
  color: var(--text-secondary);
}

.ar-shell__nav-link[aria-current='page'] {
  color: var(--text-primary);
  border-bottom-color: var(--accent-primary);
}

/* ── content engine ────────────────────────────────────────────────────── */

.ar-console-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-4);
  flex-wrap: wrap;
}

.ar-console-table {
  width: 100%;
  border-collapse: collapse;
  font: var(--type-body-s);
}

.ar-console-table th {
  text-align: left;
  padding: var(--space-2) var(--space-3);
  font: var(--type-signal-micro);
  letter-spacing: var(--tracking-signal);
  text-transform: uppercase;
  color: var(--text-tertiary);
  border-bottom: var(--border-hairline-strong);
}

.ar-console-table td {
  padding: var(--space-3);
  border-bottom: var(--rule-row);
  vertical-align: baseline;
}

.ar-console-table a {
  color: var(--text-primary);
  text-decoration: none;
}

.ar-console-table a:hover {
  color: var(--text-link);
}

.ar-status {
  display: inline-block;
  padding: 0 var(--space-2);
  border: var(--border-width-hairline) solid var(--border-strong);
  border-radius: var(--radius-full);
  font: var(--type-signal-micro);
  letter-spacing: var(--tracking-signal);
  text-transform: uppercase;
  color: var(--text-secondary);
  white-space: nowrap;
}

.ar-status[data-status='published'] {
  color: var(--signal-on-cream);
  border-color: var(--signal-on-cream);
}

.ar-status[data-status='review_required'] {
  color: var(--caution-on-cream);
  border-color: var(--caution-on-cream);
}

.ar-status[data-status='rejected'],
.ar-status[data-status='failed'] {
  color: var(--danger-on-cream);
  border-color: var(--danger-on-cream);
}

.ar-console-actions {
  display: flex;
  gap: var(--space-3);
  flex-wrap: wrap;
  align-items: center;
}

.ar-console-actions form {
  display: inline-flex;
  gap: var(--space-2);
  align-items: center;
}

a.ar-send {
  text-decoration: none;
}

.ar-console-editor {
  min-height: calc(var(--space-32) * 3);
  font-family: var(--font-signal);
  font-size: 14px;
  line-height: 1.6;
}

.ar-console-meta {
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: var(--space-4);
  padding: var(--space-4);
  border: var(--border-hairline);
  border-radius: var(--radius-md);
  background: var(--ground-raised);
}

.ar-console-meta dt {
  font: var(--type-signal-micro);
  letter-spacing: var(--tracking-signal);
  text-transform: uppercase;
  color: var(--text-tertiary);
}

.ar-console-meta dd {
  margin: var(--space-1) 0 0;
  font: var(--type-body-s);
  overflow-wrap: anywhere;
}

.ar-session__signout {
  display: inline-flex;
  align-items: center;
  min-height: var(--space-10);
  padding: 0 var(--space-4);
  border: var(--border-width-hairline) solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--ground-raised);
  color: var(--text-primary);
  font: var(--type-signal-micro);
  letter-spacing: var(--tracking-signal);
  text-transform: uppercase;
  cursor: pointer;
  transition:
    color var(--exit-motion),
    background-color var(--exit-motion),
    border-color var(--exit-motion);
}

/* Exit action (brand rule, @armage/tokens --exit-*): a quiet red wash on hover, never a red resting state. */
.ar-session__signout:hover {
  border-color: var(--danger-on-cream);
  background: color-mix(in srgb, var(--danger-on-cream) var(--exit-wash-mix), var(--ground-raised));
  color: var(--danger-on-cream);
}

.ar-session__signout:focus-visible {
  outline: var(--focus-ring-width) solid var(--focus-ring);
  outline-offset: var(--focus-ring-offset);
}

/* The cover and its rights decision (ADR 0043). */
.ar-console-cover {
  display: grid;
  gap: var(--space-4);
  padding: var(--space-4);
  border: var(--border-hairline);
  border-radius: var(--radius-md);
  background: var(--ground-raised);
}

.ar-console-cover__img {
  display: block;
  width: 100%;
  max-width: 640px;
  height: auto;
  aspect-ratio: 16 / 8;
  object-fit: cover;
  border-radius: var(--radius-sm);
  background: var(--ground-dark);
}

.ar-console-cover__meta {
  display: grid;
  gap: var(--space-2);
}

.ar-console-cover__meta p {
  margin: 0;
}

.ar-status[data-status='pending'] {
  color: var(--text-secondary);
}

.ar-status[data-status='cleared'] {
  color: var(--accent-primary);
}

@media (min-width: 720px) {
  .ar-console-cover {
    grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
    align-items: start;
  }
}

/* Replacing the cover (ADR 0068, amended): the decision row, a candidate
   beside the current cover, and the upload folded underneath. */
.ar-console-cover__meta .ar-console-panel__title {
  align-items: center;
}

.ar-console-cover__tools {
  display: grid;
  gap: var(--space-3);
  margin-top: var(--space-1);
  padding-top: var(--space-3);
  border-top: var(--border-hairline);
}

.ar-console-panel > .ar-console-cover__tools {
  margin-top: 0;
}

/* One row of equal buttons: the lead action takes its own line when the
   column is narrow, the others share the next and stretch to fill it. */
.ar-console-cover__decide {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.ar-console-cover__decide > form {
  display: flex;
  flex: 1 1 auto;
  gap: var(--space-2);
  margin: 0;
}

.ar-console-cover__decide .ar-control {
  flex: 1 1 auto;
  justify-content: center;
  text-align: center;
}

.ar-console-cover__decide > form.ar-console-cover__act--lead,
.ar-console-cover__decide > .ar-control.ar-console-cover__lead {
  flex-basis: 100%;
}

.ar-console-cover__act--reason {
  flex-wrap: wrap;
}

.ar-console-cover__act--reason .ar-console-cover__reason {
  flex: 1 1 12rem;
  width: auto;
  min-height: var(--space-10);
  padding-block: var(--space-2);
}

.ar-console-cover__act--reason .ar-control {
  flex: 0 0 auto;
}

.ar-console-cover__tools > .ar-field__hint {
  margin: 0;
}

/* The upload, folded: a quiet outlined disclosure under the decision row. */
.ar-console-cover__upload {
  border: var(--border-hairline);
  border-radius: var(--radius-sm);
  background: var(--ground-default);
}

.ar-console-cover__summary {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-height: var(--space-10);
  padding: 0 var(--space-3);
  cursor: pointer;
  font: var(--type-signal-micro);
  letter-spacing: var(--tracking-signal);
  text-transform: uppercase;
  color: var(--text-primary);
}

.ar-console-cover__summary:hover {
  color: var(--text-secondary);
}

.ar-console-cover__summary:focus-visible {
  outline: var(--focus-ring-width) solid var(--focus-ring);
  outline-offset: var(--focus-ring-offset);
}

.ar-console-cover__form {
  display: grid;
  gap: var(--space-3);
  padding: var(--space-1) var(--space-3) var(--space-3);
}

.ar-console-cover__form .ar-field,
.ar-console-compare__form .ar-field {
  display: grid;
  gap: var(--space-1);
}

.ar-console-cover__form .ar-field__hint,
.ar-console-compare__form .ar-field__hint {
  margin: 0;
}

.ar-console-cover__form > .ar-control {
  justify-content: center;
}

/* A candidate beside the current cover. */
.ar-console-compare {
  display: grid;
  gap: var(--space-3);
  padding: var(--space-3);
  border: var(--border-width-hairline) solid var(--accent-primary);
  border-radius: var(--radius-sm);
  background: var(--ground-default);
}

.ar-console-compare__title {
  margin: 0;
  font: var(--type-signal-micro);
  letter-spacing: var(--tracking-signal);
  text-transform: uppercase;
  color: var(--text-primary);
}

.ar-console-compare__pair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-2);
}

.ar-console-compare__fig {
  display: grid;
  gap: var(--space-1);
  margin: 0;
}

.ar-console-compare__img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1200 / 630;
  object-fit: cover;
  border-radius: var(--radius-sm);
  background: var(--ground-sunken);
}

.ar-console-compare__img--empty {
  display: grid;
  place-items: center;
  font: var(--type-caption);
  color: var(--text-tertiary);
}

.ar-console-compare__fig figcaption {
  font: var(--type-signal-micro);
  letter-spacing: var(--tracking-signal);
  text-transform: uppercase;
  color: var(--text-tertiary);
}

.ar-console-compare__fig--new figcaption {
  color: var(--text-accent);
}

.ar-console-compare > .ar-field__hint {
  margin: 0;
}

.ar-console-compare__form {
  display: grid;
  gap: var(--space-3);
}

/* ── editorial queue, story workflow and preview (console) ─────────────── */

.ar-console-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.ar-console-muted {
  color: var(--text-tertiary);
  font: var(--type-body-s);
}

.ar-console-empty {
  margin: 0;
  padding: var(--space-6) var(--space-4);
  border: var(--border-width-hairline) dashed var(--border-strong);
  border-radius: var(--radius-md);
  color: var(--text-secondary);
  font: var(--type-body-s);
}

.ar-console-kicker {
  margin: 0 0 var(--space-2);
  font: var(--type-signal-micro);
  letter-spacing: var(--tracking-signal);
  text-transform: uppercase;
  color: var(--text-accent);
}

.ar-console-tabs,
.ar-console-filters,
.ar-console-stats,
.ar-console-waiting,
.ar-console-sections,
.ar-checklist,
.ar-rail__steps {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Stage tabs: links with counts; the current stage carries aria-current. */
.ar-console-tabs {
  display: flex;
  gap: var(--space-1);
  overflow-x: auto;
  border-bottom: var(--border-hairline);
}

.ar-console-tabs__link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: var(--space-10);
  padding: 0 var(--space-3);
  font: var(--type-signal);
  letter-spacing: var(--tracking-signal);
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--text-secondary);
  text-decoration: none;
  border-bottom: var(--border-width-bracket) solid transparent;
}

.ar-console-tabs__link:hover {
  color: var(--text-primary);
}

.ar-console-tabs__link[aria-current='page'] {
  color: var(--text-primary);
  border-bottom-color: var(--accent-primary);
}

.ar-console-tabs__count {
  min-width: var(--space-5);
  padding: 0 var(--space-1);
  border: var(--border-width-hairline) solid var(--border-default);
  border-radius: var(--radius-full);
  background: var(--ground-raised);
  text-align: center;
  font: var(--type-signal-micro);
}

/* A filter as a dropdown (ADR 0113): label, select, and Show without script. */
.ar-console-pick {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-3);
}

.ar-console-pick__label {
  font: var(--type-body-s);
  color: var(--text-secondary);
}

.ar-console-pick__select {
  width: auto;
  min-width: 0;
  max-width: 100%;
}

.ar-console-pick [data-pick-submit][hidden] {
  display: none;
}

.ar-console-filters {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.ar-console-filter {
  display: inline-flex;
  align-items: center;
  min-height: var(--space-8);
  padding: 0 var(--space-3);
  border: var(--border-width-hairline) solid var(--border-default);
  border-radius: var(--radius-full);
  font: var(--type-body-s);
  color: var(--text-secondary);
  text-decoration: none;
}

.ar-console-filter:hover {
  border-color: var(--border-strong);
  color: var(--text-primary);
}

.ar-console-filter[aria-current='true'] {
  border-color: var(--accent-primary);
  color: var(--text-primary);
}

.ar-console-tabs__link:focus-visible,
.ar-console-filter:focus-visible,
.ar-console-stat:focus-visible,
.ar-console-table a:focus-visible,
.ar-console-waiting a:focus-visible,
.ar-console-live a:focus-visible,
.ar-console-edit__summary:focus-visible,
.ar-preview a:focus-visible {
  outline: var(--focus-ring-width) solid var(--focus-ring);
  outline-offset: var(--focus-ring-offset);
}

/* Wide tables scroll inside their own frame at phone width, never the page.
   The frame is the containing block of what is positioned inside it (the
   visually hidden caption): otherwise that escaped the frame and widened the
   page (ADR 0113). It is a named region a keyboard can reach and scroll. */
.ar-console-table-wrap {
  position: relative;
  overflow-x: auto;
}

.ar-console-table-wrap:focus-visible {
  outline: var(--focus-ring-width) solid var(--focus-ring);
  outline-offset: var(--focus-ring-offset);
}

.ar-console-table-wrap .ar-console-table {
  min-width: 640px;
}

.ar-console-table td .ar-status {
  margin-left: var(--space-2);
}

.ar-status[data-status='restricted'] {
  color: var(--danger-on-cream);
  border-color: var(--danger-on-cream);
}

.ar-status[data-status='none'] {
  color: var(--text-tertiary);
  border-style: dashed;
}

.ar-status[data-status='approved'] {
  color: var(--info-on-cream);
  border-color: var(--info-on-cream);
}

/* Overview: stage counts as links into the queue. */
.ar-console-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: var(--space-3);
}

.ar-console-stat {
  display: grid;
  gap: var(--space-1);
  padding: var(--space-4);
  border: var(--border-hairline);
  border-radius: var(--radius-md);
  background: var(--ground-raised);
  color: var(--text-primary);
  text-decoration: none;
}

.ar-console-stat:hover {
  border-color: var(--border-strong);
}

.ar-console-stat__count {
  font: var(--type-title);
}

.ar-console-stat__label {
  font: var(--type-signal-micro);
  letter-spacing: var(--tracking-signal);
  text-transform: uppercase;
  color: var(--text-secondary);
}

.ar-console-waiting {
  display: grid;
}

.ar-console-waiting li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-2);
  padding: var(--space-3) 0;
  border-bottom: var(--rule-row);
}

.ar-console-waiting a {
  color: var(--text-primary);
}

.ar-console-waiting a:hover {
  color: var(--text-link);
}

.ar-console-meta--compact {
  padding: var(--space-3) var(--space-4);
}

.ar-console-meta--stack {
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-3);
}

/* Panels: one per concern on the story page. */
.ar-console-panel {
  display: grid;
  /* One column no wider than the panel: a long select or a file picker
     cannot widen it past a 320 px screen (ADR 0113). */
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-3);
  min-width: 0;
  padding: var(--space-4);
  border: var(--border-hairline);
  border-radius: var(--radius-md);
  background: var(--ground-raised);
}

.ar-console-panel__title {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-2);
  font: var(--type-signal);
  letter-spacing: var(--tracking-signal);
  text-transform: uppercase;
  color: var(--text-primary);
}

.ar-console-panel__title .ar-console-muted {
  text-transform: none;
  letter-spacing: normal;
}

.ar-console-panel > p {
  margin: 0;
}

.ar-console-story {
  display: grid;
  gap: var(--space-4);
  align-items: start;
}

.ar-console-story__main,
.ar-console-story__side {
  display: grid;
  gap: var(--space-4);
  min-width: 0;
}

@media (min-width: 960px) {
  .ar-console-story {
    grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr);
  }

  /* The cover sits in the narrow column: stack the image over its facts. */
  .ar-console-story__side .ar-console-cover {
    grid-template-columns: minmax(0, 1fr);
  }
}

.ar-console-live {
  margin: 0;
  padding: var(--space-3) var(--space-4);
  border: var(--border-width-hairline) solid var(--signal-on-cream);
  border-radius: var(--radius-sm);
  font: var(--type-body-s);
  overflow-wrap: anywhere;
}

.ar-console-live a {
  color: var(--text-link);
}

.ar-console-live a:hover {
  color: var(--text-link-hover);
}

/* Workflow rail: Draft, In review, Approved, Published. */
.ar-rail {
  display: grid;
  gap: var(--space-3);
  padding: var(--space-4);
  border: var(--border-hairline);
  border-radius: var(--radius-md);
  background: var(--ground-raised);
}

.ar-rail__steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-2);
  counter-reset: rail;
}

.ar-rail__step {
  counter-increment: rail;
  display: grid;
  gap: var(--space-2);
  font: var(--type-signal-micro);
  letter-spacing: var(--tracking-signal);
  text-transform: uppercase;
  color: var(--text-tertiary);
}

.ar-rail__step::before {
  content: '';
  display: block;
  height: var(--space-1);
  border-radius: var(--radius-full);
  background: var(--border-default);
}

.ar-rail__label::before {
  content: counter(rail) ' ';
}

.ar-rail__step[data-state='done'] {
  color: var(--text-secondary);
}

.ar-rail__step[data-state='done']::before {
  background: var(--text-secondary);
}

.ar-rail__step[data-state='current'] {
  color: var(--text-primary);
}

.ar-rail__step[data-state='current']::before {
  background: var(--accent-primary);
}

.ar-rail__step[data-state='rejected'],
.ar-rail__step[data-state='failed'] {
  color: var(--danger-on-cream);
}

.ar-rail__step[data-state='rejected']::before,
.ar-rail__step[data-state='failed']::before {
  background: var(--danger-on-cream);
}

.ar-rail__step[data-state='off'] {
  color: var(--text-secondary);
}

.ar-rail__step[data-state='off']::before {
  background: transparent;
  border: var(--border-width-hairline) dashed var(--border-strong);
}

.ar-rail__note,
.ar-rail__next {
  margin: 0;
  font: var(--type-body-s);
  color: var(--text-secondary);
}

.ar-rail__next {
  font: var(--type-body);
  color: var(--text-primary);
}

.ar-rail__next-label {
  margin-right: var(--space-2);
  font: var(--type-signal-micro);
  letter-spacing: var(--tracking-signal);
  text-transform: uppercase;
  color: var(--text-accent);
}

/* Readiness checklist: block, warn, info, ok; blocks first. */
.ar-checklist {
  display: grid;
  gap: var(--space-2);
}

.ar-checklist__item {
  display: grid;
  grid-template-columns: 7ch minmax(0, 1fr);
  gap: var(--space-3);
  align-items: baseline;
  padding: var(--space-2) var(--space-3);
  border-left: var(--border-width-bracket) solid var(--border-default);
  font: var(--type-body-s);
  color: var(--text-secondary);
}

.ar-checklist__level {
  font: var(--type-signal-micro);
  letter-spacing: var(--tracking-signal);
  text-transform: uppercase;
  white-space: nowrap;
}

.ar-checklist__item[data-level='block'] {
  border-left-color: var(--danger-on-cream);
  color: var(--text-primary);
}

.ar-checklist__item[data-level='block'] .ar-checklist__level {
  color: var(--danger-on-cream);
}

.ar-checklist__item[data-level='warn'] {
  border-left-color: var(--caution-on-cream);
  color: var(--text-primary);
}

.ar-checklist__item[data-level='warn'] .ar-checklist__level {
  color: var(--caution-on-cream);
}

.ar-checklist__item[data-level='info'] {
  border-left-color: var(--info-on-cream);
}

.ar-checklist__item[data-level='info'] .ar-checklist__level {
  color: var(--info-on-cream);
}

.ar-checklist__item[data-level='ok'] .ar-checklist__level {
  color: var(--signal-on-cream);
}

/* Actions: the forward step first; consequential steps set apart below. */
.ar-console-action {
  display: inline-flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  align-items: center;
}

.ar-console-action .ar-input {
  width: auto;
  min-width: 14rem;
}

.ar-console-blocked {
  margin: 0;
  flex-basis: 100%;
  font: var(--type-body-s);
  color: var(--danger-on-cream);
}

/* Approve and send back (ADR 0078): one form each, the note and time prefilled.
   Stacked even inside .ar-console-actions, whose inline-flex rule for forms
   would otherwise put the labels, inputs and buttons on one line. */
.ar-console-decide,
.ar-console-actions form.ar-console-decide {
  display: grid;
  gap: var(--space-2);
  flex-basis: 100%;
  max-width: 40rem;
}

.ar-console-decide .ar-console-actions {
  margin-top: var(--space-1);
}

.ar-console-decide .ar-field__hint {
  margin: 0;
}

.ar-console-reject {
  flex-basis: 100%;
}

.ar-console-reject > summary {
  list-style: none;
  cursor: pointer;
  width: max-content;
}

.ar-console-reject > summary::-webkit-details-marker {
  display: none;
}

.ar-console-reject[open] > summary {
  margin-bottom: var(--space-3);
}

/* A social post's text as drafted, read-only. */
.ar-console-post__text {
  margin: 0;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  font: var(--type-body-s);
}

/* Per-client sub-nav (Overview, Newsroom, Domain, Connections): the same
   tabs as the queue, under the acting-for banner. */
.ar-console-subnav {
  display: grid;
  gap: var(--space-2);
}

.ar-console-subnav__name {
  margin: 0;
  font: var(--type-signal-micro);
  letter-spacing: var(--tracking-signal);
  text-transform: uppercase;
  color: var(--text-tertiary);
}

/* Quick-pick reasons: radio buttons drawn as chips. */
.ar-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  border: 0;
}

.ar-chips legend {
  margin-bottom: var(--space-2);
}

.ar-chip {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: var(--space-8);
  padding: 0 var(--space-3);
  border: var(--border-width-hairline) solid var(--border-strong);
  border-radius: var(--radius-full);
  font: var(--type-body-s);
  cursor: pointer;
}

.ar-chip input {
  position: absolute;
  opacity: 0;
  inset: 0;
  margin: 0;
  cursor: pointer;
}

.ar-chip:has(input:checked) {
  background: var(--accent-primary);
  border-color: var(--accent-primary);
  color: var(--on-state-fill);
}

.ar-chip:has(input:focus-visible) {
  outline: 2px solid var(--accent-primary);
  outline-offset: 2px;
}

/* Sortable column headers: a link per column, the active one marked. */
.ar-console-table th a {
  color: inherit;
  text-decoration: none;
}

.ar-console-table th a:hover,
.ar-console-table th a[aria-current='true'] {
  color: var(--text-primary);
}

.ar-console-table th a[aria-current='true']::after {
  content: ' ↓';
}

.ar-console-table th a[aria-current='true'][data-dir='asc']::after {
  content: ' ↑';
}

/* The queue's row actions (publish now, schedule, unpublish...), and the Slack page. */
.ar-console-row-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.ar-console-code {
  margin: 0;
  font: var(--type-headline);
  font-family: var(--font-signal);
}

.ar-console-links {
  display: grid;
  gap: var(--space-3);
  margin: 0 0 var(--space-3);
  padding: 0;
  list-style: none;
}

.ar-console-links li {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-3);
}

.ar-console-secondary {
  display: grid;
  gap: var(--space-3);
  padding-top: var(--space-3);
  border-top: var(--border-hairline);
}

.ar-console-secondary__item {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
}

.ar-console-secondary__item .ar-field__hint {
  margin: 0;
}

/* Sections panel. */
.ar-console-sections {
  display: grid;
  gap: var(--space-1);
  font: var(--type-body);
}

.ar-console-file {
  display: grid;
  gap: var(--space-2);
}

.ar-console-file__row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.ar-console-file__row .ar-input {
  flex: 1 1 12rem;
  width: auto;
}

/* Editor, folded until needed (native disclosure, no script). */
.ar-console-edit {
  border: var(--border-hairline);
  border-radius: var(--radius-md);
  background: var(--ground-raised);
}

.ar-console-edit__summary {
  padding: var(--space-4);
  cursor: pointer;
  font: var(--type-signal);
  letter-spacing: var(--tracking-signal);
  text-transform: uppercase;
}

.ar-console-edit > .ar-form {
  padding: 0 var(--space-4) var(--space-4);
}

.ar-console-help {
  margin: var(--space-1) 0 0;
  padding-left: var(--space-4);
  display: grid;
  gap: var(--space-1);
}

.ar-console-help code {
  font-family: var(--font-signal);
  overflow-wrap: anywhere;
}

/* "Edit and preview" (apps/app/src/story-editor.ts): the form and "As it
   will appear" in one panel. Side by side when the panel is wide enough for
   both at a readable measure; otherwise stacked, and with the story editor
   script, Write and Preview become two tabs of the one editor. */
.ar-story-editor {
  container-type: inline-size;
}

.ar-story-editor__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-4);
}

.ar-story-editor__state {
  margin: 0;
  font: var(--type-body-s);
  color: var(--caution-on-cream);
}

.ar-story-editor__state:empty {
  display: none;
}

.ar-story-editor__tabs {
  display: inline-flex;
  margin-left: auto;
  border: var(--border-width-hairline) solid var(--border-default);
  border-radius: var(--radius-full);
  padding: 2px;
}

.ar-story-editor__tabs[hidden] {
  display: none;
}

.ar-story-editor__tab {
  min-height: var(--space-8);
  padding: 0 var(--space-4);
  border: 0;
  border-radius: var(--radius-full);
  background: transparent;
  font: var(--type-signal);
  letter-spacing: var(--tracking-signal);
  text-transform: uppercase;
  color: var(--text-secondary);
  cursor: pointer;
}

.ar-story-editor__tab[aria-pressed='true'] {
  background: var(--ground-raised);
  color: var(--text-primary);
  box-shadow: inset 0 0 0 var(--border-width-hairline) var(--accent-primary);
}

.ar-story-editor__panes {
  display: grid;
  gap: var(--space-4);
  align-items: start;
}

.ar-story-editor__write,
.ar-story-editor__preview {
  display: grid;
  gap: var(--space-2);
  min-width: 0;
}

.ar-story-editor__pane-label {
  margin: 0;
  font: var(--type-signal);
  letter-spacing: var(--tracking-signal);
  text-transform: uppercase;
  color: var(--text-secondary);
}

.ar-story-editor__label-row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-1) var(--space-3);
}

.ar-story-editor__count {
  font: var(--type-caption);
  font-variant-numeric: tabular-nums;
  color: var(--text-tertiary);
}

.ar-story-editor__count[data-tone='caution'] {
  color: var(--caution-on-cream);
}

.ar-story-editor__tools {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  margin-bottom: var(--space-2);
}

.ar-story-editor__tools[hidden] {
  display: none;
}

.ar-story-editor__tool {
  min-height: var(--space-8);
  min-width: var(--space-8);
  padding: 0 var(--space-2);
  border: var(--border-width-hairline) solid var(--border-default);
  border-radius: var(--radius-sm);
  background: var(--ground-default);
  font: var(--type-body-s);
  color: var(--text-secondary);
  cursor: pointer;
}

.ar-story-editor__tool:hover {
  border-color: var(--border-strong);
  color: var(--text-primary);
}

.ar-story-editor__help > summary {
  cursor: pointer;
  font: var(--type-body-s);
  color: var(--text-secondary);
}

.ar-story-editor__save {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.ar-story-editor__keys {
  white-space: nowrap;
  font: var(--type-caption);
  color: var(--text-tertiary);
}

.ar-story-editor__tab:focus-visible,
.ar-story-editor__tool:focus-visible,
.ar-story-editor__help > summary:focus-visible,
.ar-story-editor .ar-preview-frame:focus-visible {
  outline: var(--focus-ring-width) solid var(--focus-ring);
  outline-offset: var(--focus-ring-offset);
}

/* Narrow, with the script: one pane at a time. */
[data-enhanced='true'][data-view='write'] .ar-story-editor__preview,
[data-enhanced='true'][data-view='preview'] .ar-story-editor__write {
  display: none;
}

/* Touch: the toolbar is fingers-sized; no shortcut hint without a keyboard. */
@media (pointer: coarse) {
  .ar-story-editor__tool,
  .ar-story-editor__tab {
    min-height: 44px;
    min-width: 44px;
  }

  .ar-story-editor__keys {
    display: none;
  }
}

@container (min-width: 880px) {
  .ar-story-editor__panes {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }

  .ar-story-editor__tabs {
    display: none;
  }

  [data-enhanced='true'][data-view] .ar-story-editor__write,
  [data-enhanced='true'][data-view] .ar-story-editor__preview {
    display: grid;
  }

  /* The preview stays in view while the text scrolls, under the sticky top
     bar (.ar-ws-top: var(--space-3) from the top, var(--space-16) tall). */
  .ar-story-editor__preview {
    position: sticky;
    top: calc(var(--space-16) + var(--space-6));
  }

  .ar-story-editor .ar-console-editor {
    min-height: 55vh;
  }

  .ar-story-editor .ar-preview-frame {
    max-height: calc(100vh - var(--space-16) * 2);
    padding: var(--space-8) var(--space-6);
  }
}

/* "As it will appear": the story on the site's paper ground and type, inside
   the console. The frame re-declares the paper lookups so every token below
   resolves as it does on arm-age.com. */
.ar-preview-frame {
  --text-primary: var(--ink-900);
  --text-secondary: var(--ink-600);
  --text-tertiary: var(--ink-500);
  --text-link: var(--signal-700);
  --text-link-hover: var(--signal-800);
  --text-accent: var(--signal-700);
  --border-default: var(--ink-200);
  --border-hairline: 1px solid var(--ink-100);
  --border-hairline-default: 1px solid var(--ink-200);
  --focus-ring: var(--signal-700);
  --caution-on-cream: var(--caution-700);
  max-height: 80vh;
  overflow-y: auto;
  padding: var(--space-6) var(--space-4);
  border-radius: var(--radius-sm);
  background: var(--bg-paper);
  color: var(--text-primary);
  color-scheme: light;
}

@media (min-width: 720px) {
  .ar-preview-frame {
    padding: var(--space-10) var(--space-8);
  }
}

.ar-preview {
  max-width: var(--measure-body);
  margin: 0 auto;
  display: grid;
  gap: var(--space-4);
  font: var(--type-body-l);
  color: var(--text-primary);
}

.ar-preview p {
  margin: 0;
}

.ar-preview__kicker {
  font: var(--type-signal);
  letter-spacing: var(--tracking-signal);
  text-transform: uppercase;
  color: var(--text-accent);
}

.ar-preview__title {
  margin: 0;
  font: var(--type-display-m);
  letter-spacing: var(--tracking-display-m);
  overflow-wrap: anywhere;
}

@media (max-width: 719.98px) {
  .ar-preview__title {
    font: var(--type-headline);
  }
}

.ar-preview__summary {
  font: var(--type-subtitle);
  color: var(--text-secondary);
}

.ar-preview__cover {
  margin: 0;
  display: grid;
  gap: var(--space-2);
}

.ar-preview__cover img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 8;
  object-fit: cover;
  border-radius: var(--radius-sm);
  background: var(--ink-100);
}

.ar-preview__cover figcaption,
.ar-preview__placeholder figcaption {
  font: var(--type-caption);
  color: var(--text-tertiary);
}

.ar-preview__body {
  display: grid;
  gap: var(--space-4);
}

.ar-preview__h2 {
  margin: var(--space-4) 0 0;
  font: var(--type-title);
  letter-spacing: var(--tracking-title);
}

.ar-preview__h3 {
  margin: var(--space-2) 0 0;
  font: var(--type-subtitle);
}

.ar-preview__list {
  margin: 0;
  padding-left: var(--space-6);
  display: grid;
  gap: var(--space-2);
}

.ar-preview__quote {
  margin: 0;
  padding-left: var(--space-4);
  border-left: var(--border-width-bracket) solid var(--accent-primary);
  font: var(--type-subtitle);
}

.ar-preview__attribution {
  margin-top: var(--space-2);
  font: var(--type-body-s);
  color: var(--text-secondary);
}

.ar-preview__callout {
  padding: var(--space-4);
  border: var(--border-hairline);
  border-radius: var(--radius-md);
  background: var(--ink-50);
  font: var(--type-body);
}

.ar-preview__callout-title {
  margin-bottom: var(--space-2);
  font: var(--type-signal);
  letter-spacing: var(--tracking-signal);
  text-transform: uppercase;
}

.ar-preview__placeholder {
  margin: 0;
  padding: var(--space-8) var(--space-4);
  border: var(--border-width-hairline) dashed var(--ink-400);
  border-radius: var(--radius-sm);
  text-align: center;
  overflow-wrap: anywhere;
}

/* Video card: Armage's own design linking out, like the public page. */
.ar-preview__video {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-4);
  border: var(--border-width-hairline) solid var(--ink-200);
  border-radius: var(--radius-md);
  background: var(--bg-console);
  color: var(--text-inverse);
  text-decoration: none;
}

.ar-preview__video:hover {
  border-color: var(--accent-primary);
}

.ar-preview__play {
  position: relative;
  flex: none;
  width: var(--space-12);
  height: var(--space-12);
  border-radius: var(--radius-full);
  background: var(--accent-primary);
}

.ar-preview__play::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 54%;
  transform: translate(-50%, -50%);
  border-style: solid;
  border-width: var(--space-2) 0 var(--space-2) var(--space-3);
  border-color: transparent transparent transparent var(--on-state-fill);
}

.ar-preview__video-text {
  display: grid;
  gap: var(--space-1);
  min-width: 0;
}

.ar-preview__video-title {
  font: var(--type-subtitle);
  overflow-wrap: anywhere;
}

.ar-preview__video .ar-preview__host {
  color: var(--text-inverse-secondary);
}

/* Further reading: one preview row per link, with its host and a tag. */
.ar-preview__links {
  display: grid;
  gap: var(--space-3);
  padding-top: var(--space-4);
  border-top: var(--border-hairline-default);
}

.ar-preview__links-title {
  margin: 0;
  font: var(--type-signal);
  letter-spacing: var(--tracking-signal);
  text-transform: uppercase;
  color: var(--text-secondary);
}

.ar-preview__link-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
}

.ar-preview__link {
  display: grid;
  gap: var(--space-1);
  padding: var(--space-3) 0;
  border-bottom: var(--border-hairline);
}

.ar-preview__link-text {
  font: var(--type-body);
  font-weight: var(--weight-semibold);
  color: var(--text-link);
  text-decoration: underline;
  text-underline-offset: 2px;
  overflow-wrap: anywhere;
}

.ar-preview__link-text:hover {
  color: var(--text-link-hover);
}

.ar-preview__link-note {
  font: var(--type-body-s);
  color: var(--text-secondary);
}

.ar-preview__link-note[data-missing='true'] {
  font-style: italic;
  color: var(--caution-on-cream);
}

.ar-preview__link-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
}

.ar-preview__host {
  font: var(--type-signal-micro);
  letter-spacing: var(--tracking-signal);
  color: var(--text-tertiary);
  overflow-wrap: anywhere;
}

.ar-preview__tag {
  padding: 0 var(--space-2);
  border: var(--border-width-hairline) solid var(--ink-400);
  border-radius: var(--radius-full);
  font: var(--type-signal-micro);
  letter-spacing: var(--tracking-signal);
  text-transform: uppercase;
  color: var(--text-secondary);
}

.ar-preview__tag[data-tag='armage'] {
  border-color: var(--signal-700);
  color: var(--signal-700);
}

.ar-preview__empty {
  font: var(--type-body-s);
  color: var(--text-tertiary);
}

/* ── New post (ADR 0083): console and workspace, phone first ─────────────── */

.ar-compose {
  display: grid;
  gap: var(--space-4);
  max-width: 44rem;
}
.ar-compose__accounts {
  display: grid;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  border: 0;
}
.ar-compose__account {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  min-height: 44px;
  font: var(--type-body-s);
  color: var(--text-primary);
}
.ar-compose__account input {
  width: 20px;
  height: 20px;
}
.ar-compose__note {
  font: var(--type-body-s);
  color: var(--text-tertiary);
}
.ar-compose .ar-input,
.ar-compose input[type='file'] {
  width: 100%;
  box-sizing: border-box;
  font-size: max(16px, 1em); /* no zoom on focus in mobile Safari */
}
.ar-compose__media {
  display: grid;
  gap: var(--space-3);
  margin: var(--space-3) 0 0;
  padding: 0;
  list-style: none;
}
.ar-compose__item {
  display: grid;
  gap: var(--space-2);
  padding: var(--space-3);
  border: var(--border-hairline);
  border-radius: var(--radius-sm);
  background: var(--ground-raised);
}
.ar-compose__item[data-state='error'] .ar-compose__note,
.ar-compose__held {
  color: var(--danger-on-cream);
  font: var(--type-body-s);
}
.ar-compose__thumb {
  max-width: 100%;
  max-height: 12rem;
  object-fit: contain;
  border-radius: var(--radius-sm);
}
.ar-compose__name {
  font: var(--type-body-s);
  color: var(--text-primary);
  overflow-wrap: anywhere;
}
.ar-compose__remove,
.ar-compose__cancel {
  justify-self: start;
  min-height: 44px;
  color: var(--text-link);
  background: none;
  border: 0;
  padding: 0;
  font: var(--type-body-s);
  cursor: pointer;
}
.ar-compose__own summary {
  min-height: 44px;
  display: flex;
  align-items: center;
  cursor: pointer;
  color: var(--text-link);
}
.ar-compose__preview {
  display: grid;
  gap: var(--space-3);
}
.ar-compose__card {
  padding: var(--space-3);
  border: var(--border-hairline);
  border-radius: var(--radius-sm);
}
.ar-compose__card[data-held='yes'] {
  border-color: var(--danger-on-cream);
}
.ar-compose__label {
  margin: 0;
  font: var(--type-signal-micro);
  letter-spacing: var(--tracking-signal);
  color: var(--text-secondary);
}
.ar-compose__text {
  margin: var(--space-2) 0;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  font: var(--type-body-s);
  color: var(--text-primary);
}
.ar-compose__actions,
.ar-compose__schedule {
  display: grid;
  gap: var(--space-3);
}
.ar-compose__actions button {
  min-height: 48px;
  width: 100%;
}
@media (min-width: 640px) {
  .ar-compose__actions button {
    width: auto;
    justify-self: start;
  }
}

/* ── New post as six numbered steps (2026-10-15, phone first) ────────────── */

.ar-compose__steps {
  display: grid;
  gap: var(--space-5);
  margin: 0;
  padding: 0;
  list-style: none;
}
.ar-compose__step {
  display: grid;
  gap: var(--space-2);
  padding-block-end: var(--space-5);
  border-block-end: var(--border-hairline);
}
.ar-compose__step:last-child {
  border-block-end: 0;
  padding-block-end: 0;
}
.ar-compose__fieldset {
  display: grid;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  border: 0;
  min-width: 0;
}
.ar-compose__title {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  font: var(--type-subtitle);
  color: var(--text-primary);
}
.ar-compose__num {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 28px;
  height: 28px;
  border-radius: var(--radius-full);
  background: var(--accent-primary);
  color: var(--bg-surface);
  font: var(--type-body-s);
  font-weight: var(--weight-semibold);
}
.ar-compose__optional {
  font: var(--type-body-s);
  color: var(--text-tertiary);
}
.ar-compose__tiles {
  display: grid;
  gap: var(--space-2);
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
}
.ar-compose__tile {
  position: relative;
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-3);
  min-height: 56px;
  padding: var(--space-3);
  border: var(--border-hairline);
  border-radius: var(--radius-md);
  background: var(--bg-surface);
  cursor: pointer;
}
.ar-compose__tile:has(.ar-compose__check:checked) {
  border-color: var(--accent-primary);
  box-shadow: inset 0 0 0 1px var(--accent-primary);
}
.ar-compose__tile:has(.ar-compose__check:disabled) {
  opacity: 0.55;
  cursor: not-allowed;
}
.ar-compose__tile:has(.ar-compose__check:focus-visible) {
  outline: var(--focus-ring-width) solid var(--focus-ring);
  outline-offset: var(--focus-ring-offset);
}
.ar-compose__check {
  width: 22px;
  height: 22px;
  margin: 0;
  accent-color: var(--accent-primary);
}
.ar-compose__tile-text {
  display: grid;
  min-width: 0;
  font: var(--type-body-s);
  color: var(--text-secondary);
  overflow-wrap: anywhere;
}
.ar-compose__tile-text b {
  color: var(--text-primary);
}
.ar-compose__needs {
  font: var(--type-body-s);
  color: var(--caution-on-cream);
}
.ar-compose__tick {
  visibility: hidden;
  color: var(--accent-primary);
}
.ar-compose__check:checked ~ .ar-compose__tick {
  visibility: visible;
}
.ar-compose__count {
  margin: 0;
  font: var(--type-body-s);
  color: var(--text-secondary);
}
.ar-compose__count[data-over='yes'] {
  color: var(--caution-on-cream);
}
.ar-compose__chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}
.ar-compose__chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  min-height: 36px;
  padding-inline: var(--space-3) var(--space-1);
  border-radius: var(--radius-full);
  background: var(--bg-sunken);
  color: var(--text-primary);
  font: var(--type-body-s);
}
.ar-compose__chip-remove {
  display: inline-grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: var(--radius-full);
  background: none;
  color: var(--text-secondary);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}
.ar-compose__drop {
  display: grid;
  justify-items: center;
  gap: var(--space-1);
  padding: var(--space-6) var(--space-4);
  border: 2px dashed var(--border-strong);
  border-radius: var(--radius-md);
  background: var(--ground-raised);
  text-align: center;
  cursor: pointer;
}
.ar-compose__drop[data-over='yes'],
.ar-compose__drop:has(.ar-compose__file:focus-visible) {
  border-color: var(--accent-primary);
}
.ar-compose__drop-icon {
  color: var(--accent-primary);
}
.ar-compose__drop-main {
  font: var(--type-body);
  font-weight: var(--weight-semibold);
  color: var(--text-primary);
}
.ar-compose__drop-sub {
  font: var(--type-body-s);
  color: var(--text-tertiary);
}
.ar-compose .ar-compose__file {
  margin-block-start: var(--space-2);
}
/* With the script the whole zone is the button; the native picker stays reachable. */
.ar-compose[data-enhanced] .ar-compose__file {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
.ar-compose__progress {
  width: 100%;
  height: 8px;
  accent-color: var(--accent-primary);
}
.ar-compose__keep {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 44px;
  font: var(--type-body-s);
  color: var(--text-primary);
}
.ar-compose__from {
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  background: var(--bg-sunken);
  font: var(--type-body-s);
  color: var(--text-primary);
}
.ar-compose__from p {
  margin: 0;
}
/* Posts start from the library (ADR 0085): Start from, the pickers, share links. */
.ar-lib__start {
  display: grid;
  gap: var(--space-2);
  margin-bottom: var(--space-5);
}
.ar-lib__choices {
  display: grid;
  gap: var(--space-2);
  grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
}
.ar-lib__choice {
  display: grid;
  gap: var(--space-1);
  min-height: 56px;
  padding: var(--space-3) var(--space-4);
  border: var(--border-hairline);
  border-radius: var(--radius-md);
  background: var(--bg-surface);
  color: var(--text-secondary);
  font: var(--type-body-s);
  text-decoration: none;
}
.ar-lib__choice b {
  color: var(--text-primary);
}
.ar-lib__choice[aria-current='true'] {
  border-color: var(--accent-primary);
  box-shadow: inset 0 0 0 1px var(--accent-primary);
}
.ar-lib__choice:focus-visible {
  outline: var(--focus-ring-width) solid var(--focus-ring);
  outline-offset: var(--focus-ring-offset);
}
.ar-lib__search {
  display: grid;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
}
.ar-lib__search-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}
.ar-lib__search-row .ar-input {
  flex: 1 1 14rem;
  min-height: 48px;
  font-size: 16px;
}
.ar-lib__search-row button {
  min-height: 48px;
}
.ar-lib__list {
  display: grid;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}
.ar-lib__row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3);
  border: var(--border-hairline);
  border-radius: var(--radius-md);
  background: var(--bg-surface);
}
.ar-lib__row--issue {
  grid-template-columns: minmax(0, 1fr);
}
.ar-lib__thumb {
  width: 64px;
  height: 64px;
  border-radius: var(--radius-sm);
  object-fit: cover;
  background: var(--bg-sunken);
}
.ar-lib__thumb--empty {
  display: block;
}
.ar-lib__text {
  display: grid;
  gap: var(--space-1);
  min-width: 0;
  font: var(--type-body-s);
  color: var(--text-secondary);
  overflow-wrap: anywhere;
}
.ar-lib__text b {
  color: var(--text-primary);
}
.ar-lib__titles {
  color: var(--text-secondary);
}
.ar-lib__use,
.ar-lib__row .ar-lib__share {
  grid-column: 1 / -1;
  justify-content: center;
  min-height: 48px;
}
.ar-lib__share {
  white-space: nowrap;
}
@media (min-width: 48rem) {
  .ar-lib__row {
    grid-template-columns: auto minmax(0, 1fr) auto;
  }
  .ar-lib__row--issue {
    grid-template-columns: minmax(0, 1fr) auto;
  }
  .ar-lib__use,
  .ar-lib__row .ar-lib__share {
    grid-column: auto;
  }
}
.ar-compose__empty {
  display: grid;
  gap: var(--space-3);
  max-width: 44rem;
}
.ar-compose__empty-title {
  margin: 0;
  font: var(--type-subtitle);
  color: var(--text-primary);
}
.ar-compose__connect {
  margin: 0;
}
.ar-compose__connect button {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}
.ar-compose__connect-main {
  min-height: 48px;
  width: 100%;
}
.ar-compose__connect-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}
@media (min-width: 640px) {
  .ar-compose__connect-main {
    width: auto;
  }
}

/* How posting works (Connections, workspace and console) */
.ar-compose-how {
  display: grid;
  gap: var(--space-3);
  margin-block: var(--space-4);
  padding: var(--space-4);
  border-radius: var(--radius-md);
  background: var(--bg-surface);
  box-shadow: inset 0 0 0 var(--border-width-hairline) var(--border-subtle);
}
.ar-compose-how__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}
.ar-compose-how__title {
  margin: 0;
  font: var(--type-subtitle);
  color: var(--text-primary);
}
.ar-compose-how__cta {
  min-height: 48px;
}
.ar-compose-how__steps {
  display: grid;
  gap: var(--space-3);
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
}
.ar-compose-how__step {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--space-2);
  align-items: start;
  font: var(--type-body-s);
  color: var(--text-primary);
}
.ar-compose-how__line {
  color: var(--text-secondary);
}

/* "Also post to social accounts" on a story's decision (console) */
.ar-compose-choice {
  display: grid;
  gap: var(--space-1);
  margin: var(--space-2) 0;
  padding: var(--space-3);
  border: var(--border-hairline);
  border-radius: var(--radius-sm);
}
.ar-compose-choice__row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 44px;
  font: var(--type-body-s);
  color: var(--text-primary);
}
.ar-compose-choice__row input {
  width: 20px;
  height: 20px;
  accent-color: var(--accent-primary);
}

/* ══ the staff console in the workspace's design system (2026-10-14) ══════
   Owner: "the console style such as header, columns, UI in sync with what
   we currently have in app.arm-age.com … the SAME design system". The frame
   is the workspace's own (.ar-ws, console-shell.ts); the console's older
   page markup (.ar-console-*, .ar-status, .ar-auth__notice) takes the
   workspace's card, table, badge, tab and tile looks here, scoped to the
   console root (.ar-cs) so the client portal is untouched. */

/* ── frame details the workspace script would otherwise own ───────────── */

.ar-cs-ident .ar-ws-switch__btn {
  cursor: default;
}

.ar-cs-env {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0;
  font: var(--type-micro);
  letter-spacing: var(--tracking-signal);
  text-transform: uppercase;
  color: var(--caution-on-cream);
}

.ar-cs-env[data-env='production'] {
  color: var(--signal-on-cream);
}

.ar-cs-env__dot {
  width: var(--space-2);
  height: var(--space-2);
  border-radius: var(--radius-full);
  background: currentColor;
}

@media (max-width: 767px) {
  .ar-cs-envbadge {
    display: none;
  }
}

.ar-cs-gap {
  margin-top: var(--space-4);
}

.ar-cs-pad {
  padding: var(--space-5);
}

/* ── page heads: the workspace's title, line and actions ──────────────── */

.ar-cs .ar-console-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-4);
}

.ar-cs .ar-console-head h1,
.ar-cs .ar-ws-main > h1.text-headline,
.ar-cs .ar-console-head .text-headline {
  margin: 0;
  font: var(--type-title);
  letter-spacing: var(--tracking-title);
  color: var(--text-primary);
}

.ar-cs .ar-console-kicker {
  margin: 0 0 var(--space-1);
  font: var(--type-micro);
  letter-spacing: var(--tracking-signal);
  text-transform: uppercase;
  color: var(--text-tertiary);
}

.ar-cs .ar-auth__sub {
  margin: var(--space-1) 0 0;
  font: var(--type-body);
  color: var(--text-secondary);
}

.ar-cs .text-title {
  margin: 0;
  font: var(--type-body-s);
  font-weight: var(--weight-semibold);
  letter-spacing: normal;
  color: var(--text-primary);
}

/* ── panels are workspace cards ───────────────────────────────────────── */

.ar-cs .ar-console-panel,
.ar-cs .ar-console-cover,
.ar-cs .ar-rail,
.ar-cs dl.ar-console-meta {
  gap: var(--space-4);
  padding: var(--space-5);
  border: 0;
  border-radius: var(--radius-box);
  background: var(--bg-surface);
  box-shadow: inset 0 0 0 var(--border-width-hairline) var(--border-subtle);
}

.ar-cs .ar-console-panel > .ar-console-panel__title:first-child {
  margin: calc(-1 * var(--space-5)) calc(-1 * var(--space-5)) 0;
  padding: var(--space-4) var(--space-5);
  border-bottom: var(--border-width-hairline) solid var(--border-subtle);
}

.ar-cs .ar-console-panel__title {
  font: var(--type-body-s);
  font-weight: var(--weight-semibold);
  letter-spacing: normal;
  text-transform: none;
  color: var(--text-primary);
}

.ar-cs .ar-console-muted {
  color: var(--text-secondary);
  font: var(--type-body-s);
}

/* ── tables are workspace tables ──────────────────────────────────────── */

.ar-cs .ar-console-table-wrap {
  overflow-x: auto;
  border-radius: var(--radius-box);
  background: var(--bg-surface);
  box-shadow: inset 0 0 0 var(--border-width-hairline) var(--border-subtle);
}

/* A client's name and its set-up fold share the first cell: each is a
   24 px target with room between them (WCAG 2.5.8; ADR 0113). */
.ar-cs .ar-console-table td > a:first-child {
  display: inline-flex;
  align-items: center;
  min-height: var(--space-6);
}
.ar-cs .ar-console-table td > details > summary {
  line-height: var(--space-6);
}
.ar-cs .ar-console-table td > details {
  margin-top: var(--space-1);
}

.ar-cs .ar-console-panel .ar-console-table-wrap {
  margin-inline: calc(var(--space-5) * -1);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.ar-cs .ar-console-table th,
.ar-cs .ar-console-table td {
  padding: var(--space-3) var(--space-5);
  text-align: left;
  vertical-align: middle;
  border-bottom: var(--border-width-hairline) solid var(--border-subtle);
}

.ar-cs .ar-console-table thead th {
  padding-block: var(--space-2);
  font: var(--type-micro);
  letter-spacing: var(--tracking-signal);
  text-transform: uppercase;
  color: var(--text-tertiary);
  white-space: nowrap;
}

.ar-cs .ar-console-table tbody tr:last-child > * {
  border-bottom: 0;
}

.ar-cs .ar-console-table a {
  color: var(--text-primary);
  font-weight: var(--weight-medium);
}

/* ── statuses are workspace badges ────────────────────────────────────── */

.ar-cs .ar-status {
  --ar-badge-fill: var(--ink-100);
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1) var(--space-3);
  border: 0;
  border-radius: var(--radius-control);
  background: transparent;
  box-shadow: inset 0 0 0 var(--border-width-hairline) var(--border-default);
  font: var(--type-micro);
  letter-spacing: var(--tracking-signal);
  text-transform: uppercase;
  font-variant-numeric: tabular-nums;
  color: var(--text-secondary);
  white-space: nowrap;
}

.ar-cs .ar-status::before {
  content: '';
  flex: 0 0 auto;
  width: var(--space-2);
  height: var(--space-2);
  border-radius: var(--radius-full);
  background: var(--ar-badge-fill);
}

.ar-cs .ar-status[data-status='published'],
.ar-cs .ar-status[data-status='cleared'],
.ar-cs .ar-status[data-status='active'],
.ar-cs .ar-status[data-status='sent'] {
  --ar-badge-fill: var(--accent-primary);
  color: var(--signal-on-cream);
}

.ar-cs .ar-status[data-status='review_required'],
.ar-cs .ar-status[data-status='pending'] {
  --ar-badge-fill: var(--caution-500);
  color: var(--caution-on-cream);
}

.ar-cs .ar-status[data-status='approved'],
.ar-cs .ar-status[data-status='scheduled'] {
  --ar-badge-fill: var(--info-500);
  color: var(--info-on-cream);
}

.ar-cs .ar-status[data-status='rejected'],
.ar-cs .ar-status[data-status='failed'],
.ar-cs .ar-status[data-status='error'],
.ar-cs .ar-status[data-status='restricted'] {
  --ar-badge-fill: var(--danger-500);
  color: var(--danger-on-cream);
}

/* ── tabs and filters are the workspace's ─────────────────────────────── */

.ar-cs .ar-console-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  width: fit-content;
  max-width: 100%;
  padding: var(--space-1);
  border: 0;
  border-radius: var(--radius-control);
  background: var(--bg-sunken);
}

.ar-cs .ar-console-tabs__link {
  min-height: 0;
  padding: var(--space-1) var(--space-3);
  border: 0;
  border-radius: var(--radius-control);
  font: var(--type-body-s);
  letter-spacing: normal;
  text-transform: none;
  color: var(--text-secondary);
}

.ar-cs .ar-console-tabs__link[aria-current='page'] {
  background: var(--bg-surface);
  color: var(--text-primary);
  box-shadow: var(--shadow-sm);
}

.ar-cs .ar-console-tabs__count {
  min-width: 0;
  padding: 0;
  border: 0;
  background: transparent;
  font: var(--type-micro);
  font-variant-numeric: tabular-nums;
  opacity: var(--opacity-ghost);
}

.ar-cs .ar-console-filter {
  min-height: var(--space-10);
  padding: var(--space-2) var(--space-3);
  border: 0;
  border-radius: var(--radius-control);
  box-shadow: inset 0 0 0 var(--border-width-hairline) var(--border-default);
  font: var(--type-body-s);
  color: var(--text-secondary);
}

.ar-cs .ar-console-filter[aria-current='true'] {
  background: var(--text-primary);
  color: var(--bg-surface);
  box-shadow: none;
}

/* ── tiles, empty states, notices ─────────────────────────────────────── */

.ar-cs .ar-console-stat {
  padding: var(--space-4) var(--space-5);
  border: 0;
  border-radius: var(--radius-box);
  background: var(--bg-surface);
  box-shadow: inset 0 0 0 var(--border-width-hairline) var(--border-subtle);
}

.ar-cs .ar-console-stat__count {
  font: var(--type-display-m);
  letter-spacing: var(--tracking-display-m);
  font-variant-numeric: tabular-nums;
}

.ar-cs .ar-console-empty {
  padding: var(--space-6) var(--space-5);
  border: 0;
  border-radius: var(--radius-box);
  background: var(--bg-surface);
  box-shadow: inset 0 0 0 var(--border-width-hairline) var(--border-subtle);
  color: var(--text-secondary);
}

.ar-cs .ar-auth__notice {
  padding: var(--space-3) var(--space-4);
  border: 0;
  border-radius: var(--radius-control);
  background: transparent;
  box-shadow: inset 0 0 0 var(--border-width-hairline) var(--danger-500);
  color: var(--danger-on-cream);
  font: var(--type-body-s);
}

.ar-cs .ar-auth__notice[data-tone='ok'] {
  box-shadow: inset 0 0 0 var(--border-width-hairline) var(--signal-500);
  color: var(--signal-on-cream);
}

.ar-cs .ar-auth__notice[role='note'] {
  box-shadow: inset 0 0 0 var(--border-width-hairline) var(--border-default);
  color: var(--text-primary);
}

.ar-cs .ar-console-subnav {
  display: grid;
  gap: var(--space-3);
}

/* ── overview: the pipeline ───────────────────────────────────────────── */

.ar-cs-pipe {
  display: block;
  width: 100%;
  height: var(--space-2);
  margin-bottom: var(--space-4);
  border-radius: var(--radius-full);
  background: var(--bg-sunken);
}

.ar-cs-pipe__seg[data-stage='progress'] {
  fill: var(--ink-400);
}
.ar-cs-pipe__seg[data-stage='review'] {
  fill: var(--caution-500);
}
.ar-cs-pipe__seg[data-stage='ready'] {
  fill: var(--info-500);
}
.ar-cs-pipe__seg[data-stage='scheduled'] {
  fill: var(--signal-300);
}
.ar-cs-pipe__seg[data-stage='live'] {
  fill: var(--signal-500);
}
.ar-cs-pipe__seg[data-stage='off'] {
  fill: var(--ink-600);
}

.ar-cs .ar-cs-stages {
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
}

.ar-cs-stage .ar-ws-tile__label {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}

.ar-cs-stage__key {
  width: var(--space-2);
  height: var(--space-2);
  border-radius: var(--radius-full);
  background: var(--ink-400);
}

.ar-cs-stage[data-stage='review'] .ar-cs-stage__key {
  background: var(--caution-500);
}
.ar-cs-stage[data-stage='ready'] .ar-cs-stage__key {
  background: var(--info-500);
}
.ar-cs-stage[data-stage='scheduled'] .ar-cs-stage__key {
  background: var(--signal-300);
}
.ar-cs-stage[data-stage='live'] .ar-cs-stage__key {
  background: var(--signal-500);
}
.ar-cs-stage[data-stage='off'] .ar-cs-stage__key {
  background: var(--ink-600);
}

.ar-cs .ar-ws-tile[data-tone='warn'] {
  box-shadow: inset 0 0 0 var(--border-width-hairline) var(--caution-500);
}

.ar-cs .ar-ws-tile[data-tone='warn'] .ar-ws-tile__value {
  color: var(--caution-on-cream);
}

.ar-cs-next {
  display: grid;
  gap: var(--space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

.ar-cs-next li {
  display: grid;
  gap: var(--space-1);
  padding-left: var(--space-3);
  border-left: var(--border-width-bracket) solid var(--info-500);
}

.ar-cs-next__when {
  font: var(--type-micro);
  letter-spacing: var(--tracking-signal);
  text-transform: uppercase;
  color: var(--text-tertiary);
}

/* The networks with their state: lit when connected, a dot for the state. */
.ar-cs-band {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.ar-cs-band__item {
  position: relative;
  line-height: 0;
}

.ar-cs-band__item[data-state='available'] {
  opacity: var(--opacity-ghost);
  filter: grayscale(1);
}

.ar-cs-band__dot {
  position: absolute;
  right: calc(-1 * var(--space-1));
  bottom: calc(-1 * var(--space-1));
  width: var(--space-3);
  height: var(--space-3);
  border-radius: var(--radius-full);
  box-shadow: 0 0 0 2px var(--bg-surface);
  background: var(--signal-500);
}

.ar-cs-band__item[data-state='attention'] .ar-cs-band__dot {
  background: var(--danger-500);
}

.ar-cs-band__item[data-state='connecting'] .ar-cs-band__dot {
  background: var(--caution-500);
}

.ar-cs-band__item[data-state='available'] .ar-cs-band__dot {
  display: none;
}

.ar-cs-tile-mono {
  display: grid;
  place-items: center;
  width: var(--space-10);
  height: var(--space-10);
  border-radius: var(--radius-control);
  background: var(--ink-0);
  color: var(--ink-950);
  font: var(--type-micro);
}

.ar-cs-net {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}

/* Posts inside the Waiting and Sent cards: one block each, ruled. */
.ar-cs-posts {
  display: grid;
}

.ar-cs-post {
  display: grid;
  gap: var(--space-3);
  padding-block: var(--space-4);
  border-bottom: var(--border-width-hairline) solid var(--border-subtle);
}

.ar-cs-post:first-child {
  padding-top: 0;
}

.ar-cs-post:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}

.ar-cs-post__title {
  margin: 0;
  font: var(--type-body);
  font-weight: var(--weight-semibold);
}

.ar-cs-post p {
  margin: 0;
}

/* ── calendar ─────────────────────────────────────────────────────────── */

.ar-cs-cal__nav {
  display: flex;
  gap: var(--space-2);
}

.ar-cs-legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-5);
  margin: 0 0 var(--space-4);
  padding: 0;
  list-style: none;
}

.ar-cs-legend__item {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font: var(--type-caption);
  color: var(--text-secondary);
}

.ar-cs-legend__swatch {
  width: var(--space-2);
  height: var(--space-2);
  border-radius: var(--radius-full);
}

.ar-cs-legend__item[data-kind='scheduled'] .ar-cs-legend__swatch,
.ar-cs-cal__chip[data-kind='scheduled']::before,
.ar-cs-kind[data-kind='scheduled']::before {
  background: var(--info-500);
}

.ar-cs-legend__item[data-kind='live'] .ar-cs-legend__swatch,
.ar-cs-cal__chip[data-kind='live']::before,
.ar-cs-kind[data-kind='live']::before {
  background: var(--signal-500);
}

.ar-cs-legend__item[data-kind='post'] .ar-cs-legend__swatch,
.ar-cs-cal__chip[data-kind='post']::before,
.ar-cs-kind[data-kind='post']::before {
  background: var(--caution-500);
}

.ar-cs-legend__item[data-kind='sent'] .ar-cs-legend__swatch,
.ar-cs-cal__chip[data-kind='sent']::before,
.ar-cs-kind[data-kind='sent']::before {
  background: var(--ink-300);
}

.ar-cs-kind {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font: var(--type-micro);
  letter-spacing: var(--tracking-signal);
  text-transform: uppercase;
  color: var(--text-secondary);
  white-space: nowrap;
}

.ar-cs-kind::before {
  content: '';
  width: var(--space-2);
  height: var(--space-2);
  border-radius: var(--radius-full);
}

.ar-cs-cal {
  display: none;
  overflow: hidden;
  border-radius: var(--radius-control);
  box-shadow: inset 0 0 0 var(--border-width-hairline) var(--border-subtle);
}

@media (min-width: 900px) {
  .ar-cs-cal {
    display: block;
  }
}

.ar-cs-cal__head,
.ar-cs-cal__grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
}

.ar-cs-cal__head li {
  padding: var(--space-2) var(--space-3);
  border-bottom: var(--border-width-hairline) solid var(--border-subtle);
  background: var(--bg-sunken);
  font: var(--type-micro);
  letter-spacing: var(--tracking-signal);
  text-transform: uppercase;
  color: var(--text-tertiary);
}

.ar-cs-cal__day {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  min-width: 0;
  min-height: 7rem;
  padding: var(--space-2);
  border-right: var(--border-width-hairline) solid var(--border-subtle);
  border-bottom: var(--border-width-hairline) solid var(--border-subtle);
}

.ar-cs-cal__day:nth-child(7n) {
  border-right: 0;
}

.ar-cs-cal__day[data-out='true'] {
  background: var(--bg-sunken);
}

.ar-cs-cal__num {
  align-self: flex-start;
  min-width: var(--space-6);
  padding: 0 var(--space-1);
  border-radius: var(--radius-full);
  text-align: center;
  font: var(--type-micro);
  font-variant-numeric: tabular-nums;
  color: var(--text-tertiary);
}

.ar-cs-cal__day[data-today='true'] .ar-cs-cal__num {
  background: var(--text-primary);
  color: var(--bg-surface);
}

.ar-cs-cal__chip {
  position: relative;
  display: flex;
  gap: var(--space-1);
  min-width: 0;
  padding: var(--space-1) var(--space-2) var(--space-1) var(--space-3);
  border-radius: var(--radius-control);
  background: var(--bg-sunken);
  color: var(--text-primary);
  font: var(--type-caption);
  text-decoration: none;
  overflow: hidden;
}

.ar-cs-cal__chip::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: var(--border-width-bracket);
}

.ar-cs-cal__chip:hover {
  box-shadow: inset 0 0 0 var(--border-width-hairline) var(--border-strong);
}

.ar-cs-cal__chip:focus-visible {
  outline: var(--focus-ring-width) solid var(--focus-ring);
  outline-offset: var(--focus-ring-offset);
}

.ar-cs-cal__time {
  flex: none;
  color: var(--text-tertiary);
  font-variant-numeric: tabular-nums;
}

.ar-cs-cal__title {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.ar-cs-cal__more {
  padding-left: var(--space-2);
  font: var(--type-micro);
  color: var(--text-tertiary);
}

.ar-cs .ar-ws-table tr[data-today='true'] > * {
  background: var(--bg-sunken);
}

/* A meta list (ul) stays a plain list, not a card. */
.ar-cs ul.ar-console-meta {
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  list-style: none;
}

/* A form button that reads as a link ("Send the code again"). */
.ar-auth__alt .ar-link {
  appearance: none;
  border: 0;
  padding: 0;
  background: none;
  font: inherit;
  cursor: pointer;
  color: var(--text-link);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.ar-auth__alt .ar-link:hover {
  color: var(--text-link-hover);
}

.ar-auth__alt .ar-link:focus-visible {
  outline: var(--focus-ring-width) solid var(--focus-ring);
  outline-offset: var(--focus-ring-offset);
}

/* ADR 0113: touch targets (staff console pages). On a touch screen of any
   width the console's tabs, filters, pills, section links, calendar chips,
   table links and moment links are 44 px; a mouse keeps the denser sizes. */
@media (pointer: coarse) {
  :is(.ar-ws, .ar-ws-frame) .ar-console-tabs__link,
  :is(.ar-ws, .ar-ws-frame) .ar-console-filter,
  :is(.ar-ws, .ar-ws-frame) .ar-cs-pill,
  :is(.ar-ws, .ar-ws-frame) .ar-cs-secnav__link,
  :is(.ar-ws, .ar-ws-frame) .ar-cs-cal__chip {
    min-height: 44px;
    align-items: center;
  }
  :is(.ar-ws, .ar-ws-frame) :is(.ar-console-table, .ar-ws-table) :is(th, td) a:not(.ar-control),
  :is(.ar-ws, .ar-ws-frame) .ar-console-kicker a,
  :is(.ar-ws, .ar-ws-frame) .ar-ws-table__link,
  :is(.ar-ws, .ar-ws-frame) .ar-ev-session__time > a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
  .ar-compose__chip-remove {
    width: 44px;
    height: 44px;
  }
  /* A bare field (a date and time, a number) stands as tall as a control. */
  :is(.ar-ws, .ar-ws-frame)
    input:not([type='hidden'], [type='checkbox'], [type='radio'], [type='file'], [type='range']) {
    min-height: 44px;
  }
  :is(.ar-ws, .ar-ws-frame) .ar-check,
  :is(.ar-ws, .ar-ws-frame) .ar-chip {
    min-height: 44px;
  }
  .ar-ob-alt .ar-link,
  .ar-auth__alt button.ar-link,
  :is(.ar-ws, .ar-ws-frame) .ar-cs-paste > summary,
  :is(.ar-ws, .ar-ws-frame) .ar-ws-card__head a {
    min-height: 44px;
    align-items: center;
  }
  /* A tick box with its words: the whole line is the target. */
  :is(.ar-ws, .ar-ws-frame) label:has(> input:is([type='checkbox'], [type='radio'])) {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    min-height: 44px;
  }
  /* A sort link in a column head is at least as wide as it is tall. */
  :is(.ar-ws, .ar-ws-frame) :is(.ar-console-table, .ar-ws-table) th > a {
    min-width: 44px;
  }
}

/* ADR 0113: on a phone the queue's stages wrap onto a second line instead of
   scrolling sideways, so every stage is in view and whole. */
@media (max-width: 767px) {
  .ar-console-tabs {
    flex-wrap: wrap;
    overflow-x: visible;
  }
}

/* ADR 0113: a console button with a long label ("Back to <a client's name>")
   wraps on a narrow phone instead of widening the page. */
.ar-ob-body[data-page='console'] .ar-control {
  max-width: 100%;
}

@media (max-width: 599.98px) {
  .ar-ob-body[data-page='console'] .ar-control {
    white-space: normal;
    text-align: center;
  }
}

/*
 * The client portal's shell and onboarding (@armage/portal/onboarding.css,
 * v2). Tokens only; every colour reads a token, so the paper (light) and
 * console (dark) themes - and the OS default between them - restyle the
 * whole page with no rule written twice. Requires tokens, forms, controls,
 * material and boxes (the plan cards and the compare table).
 *
 *   .ar-ob                  two panes: the question (main) and the side
 *   .ar-ob__top/body/foot   brand + Log out · the question column · dashes + look
 *   .ar-ob-q                headline + a lighter second line, same size
 *   .ar-ob-form / -field    one input group; .ar-ob-opt option cards; .ar-ob-look
 *   .ar-ob__dashes          progress: done (links back) and current in ink
 *   .ar-ob-theme            Light | Dark, bottom-right
 *   .ar-proof               signed out: Armage News headlines on the console ground
 *   .ar-pv                  signed in: the live preview (window, sidebar, cards, chips)
 *   .ar-plans               the full-width plan page
 *
 * Motion law: only opacity and transform move; nothing moves under
 * prefers-reduced-motion. Colour changes (the look) are instant.
 */

/* ── base ─────────────────────────────────────────────────────────────── */

.ar-ob-body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  background: var(--ground-default);
  color: var(--text-primary);
  font: var(--type-body);
  -webkit-font-smoothing: antialiased;
}

.ar-ob-body *,
.ar-ob-body *::before,
.ar-ob-body *::after {
  box-sizing: border-box;
}

/* Layout classes set display; an element the script hides must still hide. */
.ar-ob-body [hidden] {
  display: none !important;
}

.ar-ob__sr,
.ar-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.ar-ob-icon {
  flex: none;
  display: block;
}

@keyframes ar-ob-in {
  from {
    opacity: 0;
    transform: translateY(var(--space-2));
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes ar-ob-fade {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* ── the two panes ────────────────────────────────────────────────────── */

.ar-ob {
  min-height: 100vh;
  min-height: 100dvh;
  display: grid;
}

@media (min-width: 1024px) {
  .ar-ob {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
}

.ar-ob__main {
  position: relative;
  min-height: 100vh;
  min-height: 100dvh;
  display: grid;
  grid-template-rows: auto 1fr auto;
  padding: var(--space-10) var(--space-12) var(--space-8);
  background: var(--ground-default);
}

.ar-ob__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
}

.ar-ob__brand {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--text-primary);
  text-decoration: none;
}

.ar-ob__brand .ar-auth__brand-mark {
  width: var(--space-6);
  height: var(--space-6);
  display: block;
}

.ar-ob__brand-name {
  font: var(--type-signal-wide);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}

.ar-ob__brand:focus-visible,
.ar-ob__logout-btn:focus-visible,
.ar-ob__dash-hit:focus-visible,
.ar-ob-theme__opt:focus-visible {
  outline: var(--focus-ring-width) solid var(--focus-ring);
  outline-offset: var(--focus-ring-offset);
  border-radius: var(--radius-control);
}

.ar-ob__logout {
  margin: 0;
}

.ar-ob__logout-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: var(--space-10);
  padding: 0 var(--space-2);
  border: 0;
  background: transparent;
  color: var(--text-secondary);
  font: var(--type-body-s);
  cursor: pointer;
  border-radius: var(--radius-control);
  transition:
    color var(--exit-motion),
    background-color var(--exit-motion);
}

.ar-ob__logout-btn .ar-ob-icon {
  transition: transform var(--exit-motion);
}

/* Exit action (brand rule, @armage/tokens --exit-*): a quiet red wash, the arrow steps out. */
.ar-ob__logout-btn:hover {
  background: color-mix(in srgb, var(--danger-on-cream) var(--exit-wash-mix), transparent);
  color: var(--danger-on-cream);
}

.ar-ob__logout-btn:hover .ar-ob-icon {
  transform: translateX(var(--exit-nudge));
}

@media (prefers-reduced-motion: reduce) {
  .ar-ob__logout-btn .ar-ob-icon {
    transition: none;
  }
  .ar-ob__logout-btn:hover .ar-ob-icon {
    transform: none;
  }
}

.ar-ob__body {
  display: grid;
  align-items: center;
  justify-items: center;
  padding: var(--space-12) 0;
}

.ar-ob__col {
  width: min(100%, calc(var(--space-32) * 3 + var(--space-16)));
  animation: ar-ob-in var(--duration-slow) var(--ease-entrance) both;
}

.ar-ob__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
}

/* ── the question ─────────────────────────────────────────────────────── */

.ar-ob-q {
  margin: 0 0 var(--space-4);
}

.ar-ob-q__title,
.ar-ob-q__sub {
  margin: 0;
  font: var(--type-title);
  font-weight: var(--weight-regular);
  letter-spacing: var(--tracking-display-m);
  text-wrap: balance;
}

.ar-ob-q__title {
  color: var(--text-primary);
}

.ar-ob-q__sub {
  color: var(--text-tertiary);
  overflow-wrap: anywhere;
}

.ar-ob-form {
  display: grid;
  gap: var(--space-4);
  margin: 0;
}

.ar-ob-form > .ar-ob__cta {
  margin-top: var(--space-2);
}

/* The closing screens: a paragraph or a note, then the way on. */
.ar-ob-text + .ar-ob__cta,
.ar-ob-note + .ar-ob__cta {
  margin-top: var(--space-6);
}

.ar-ob-text {
  margin: 0;
  font: var(--type-body-s);
  color: var(--text-secondary);
}

.ar-ob-note {
  margin: 0;
  font: var(--type-caption);
  color: var(--text-tertiary);
}

.ar-ob-alt {
  margin: 0;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2);
  font: var(--type-caption);
  color: var(--text-tertiary);
}

.ar-ob-alt a,
.ar-ob-forgot,
.ar-ob-check a {
  color: var(--text-primary);
  text-decoration: underline;
  text-decoration-color: var(--border-strong);
  text-underline-offset: 0.2em;
}

.ar-ob-alt a:hover,
.ar-ob-forgot:hover,
.ar-ob-check a:hover {
  text-decoration-color: currentColor;
}

.ar-ob-alt__sep {
  flex: 1;
}

.ar-ob-back {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
}

.ar-ob-alt .ar-ob-back {
  text-decoration: none;
  color: var(--text-secondary);
}

.ar-ob-forgot {
  justify-self: end;
  margin-top: calc(-1 * var(--space-2));
  font: var(--type-caption);
}

.ar-ob-notice {
  margin: 0;
  padding: var(--space-3) var(--space-4);
  border: var(--border-width-hairline) solid var(--border-subtle);
  border-left: var(--border-width-bracket) solid var(--danger-on-cream);
  border-radius: var(--radius-control);
  background: var(--ground-raised);
  font: var(--type-body-s);
  color: var(--text-primary);
}

.ar-ob-notice[data-tone='ok'] {
  border-left-color: var(--signal-on-cream);
}

/* ── fields: quieter hairlines than the site's forms ──────────────────── */

.ar-ob-field {
  gap: var(--space-2);
}

.ar-ob-field .ar-field__hint,
.ar-ob-field .ar-field__error {
  margin: 0;
}

.ar-ob-field .ar-field__label {
  font: var(--type-body-s);
  color: var(--text-primary);
}

.ar-ob .ar-input,
.ar-ob .ar-textarea {
  border-color: var(--border-default);
  border-radius: var(--radius-control);
}

.ar-ob .ar-input:hover,
.ar-ob .ar-textarea:hover {
  border-color: var(--border-strong);
}

.ar-ob .ar-input:focus,
.ar-ob .ar-textarea:focus {
  border-color: var(--text-primary);
}

.ar-ob .ar-input[aria-invalid='true'] {
  border-color: var(--danger-on-cream);
}

.ar-ob .ar-textarea {
  min-height: var(--space-24);
}

.ar-ob-pair {
  display: grid;
  gap: var(--space-4);
}

@media (min-width: 640px) {
  .ar-ob-pair {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.ar-ob-select select {
  appearance: none;
  padding-right: var(--space-10);
  cursor: pointer;
}

.ar-ob-select__chev {
  position: absolute;
  right: var(--space-3);
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-tertiary);
  pointer-events: none;
}

/* The primary waits for a valid screen (the script disables it). */
.ar-ob .ar-ob__cta[disabled],
.ar-plans .ar-ob__cta[disabled] {
  pointer-events: none;
}

/* ── password rules and consent ───────────────────────────────────────── */

.ar-ob-rules {
  display: grid;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.ar-ob-rule {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font: var(--type-caption);
  color: var(--text-tertiary);
}

.ar-ob-rule[data-met='true'] {
  color: var(--signal-on-cream);
}

.ar-ob-rule[data-met='false'] .ar-ob-icon {
  opacity: var(--opacity-disabled);
}

.ar-ob-check {
  font: var(--type-caption);
}

.ar-ob-check input {
  width: var(--space-4);
  height: var(--space-4);
  margin-top: var(--border-width-bracket);
}

/* ── option cards: icon · title · tag · one line ──────────────────────── */

.ar-ob-opts,
.ar-ob-looks {
  display: grid;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  border: 0;
  min-width: 0;
}

.ar-ob-opt,
.ar-ob-look {
  position: relative;
  display: block;
}

.ar-ob-opt__input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
  z-index: 1;
}

.ar-ob-opt__box {
  display: grid;
  grid-template-columns: var(--space-8) minmax(0, 1fr) var(--space-4);
  align-items: center;
  gap: var(--space-3);
  min-height: var(--space-16);
  padding: var(--space-3) var(--space-4);
  border: var(--border-width-hairline) solid var(--border-default);
  border-radius: var(--radius-control);
  background: var(--ground-raised);
}

.ar-ob-opt__icon {
  display: grid;
  place-items: center;
  width: var(--space-8);
  height: var(--space-8);
  border: var(--border-width-hairline) solid var(--border-subtle);
  border-radius: var(--radius-control);
  background: var(--ground-default);
  color: var(--text-secondary);
}

.ar-ob-opt__text {
  display: grid;
  gap: var(--space-1);
  min-width: 0;
}

.ar-ob-opt__title {
  display: block;
  font: var(--type-body-s);
  font-weight: var(--weight-medium);
  color: var(--text-primary);
}

.ar-ob-opt__tag {
  display: inline-block;
  margin-left: var(--space-2);
  vertical-align: middle;
  font: var(--type-micro);
  letter-spacing: var(--tracking-signal);
  text-transform: uppercase;
  padding: var(--border-width-bracket) var(--space-2);
  border-radius: var(--radius-control);
  background: var(--ground-sunken);
  color: var(--text-secondary);
}

.ar-ob-opt__line {
  font: var(--type-caption);
  color: var(--text-tertiary);
}

.ar-ob-opt__check {
  color: var(--signal-on-cream);
  opacity: 0;
}

.ar-ob-opt__input:hover + .ar-ob-opt__box,
.ar-ob-opt__input:hover + .ar-ob-look__box {
  border-color: var(--border-strong);
}

.ar-ob-opt__input:checked + .ar-ob-opt__box,
.ar-ob-opt__input:checked + .ar-ob-look__box {
  border-color: var(--text-primary);
  box-shadow: inset 0 0 0 var(--border-width-hairline) var(--text-primary);
  background: var(--ground-sunken);
}

.ar-ob-opt__input:checked + .ar-ob-opt__box .ar-ob-opt__icon {
  border-color: var(--text-primary);
  background: var(--text-primary);
  color: var(--ground-default);
}

.ar-ob-opt__input:checked + .ar-ob-opt__box .ar-ob-opt__tag {
  background: var(--ground-raised);
}

.ar-ob-opt__input:checked + * .ar-ob-opt__check {
  opacity: 1;
}

.ar-ob-opt__input:focus-visible + .ar-ob-opt__box,
.ar-ob-opt__input:focus-visible + .ar-ob-look__box {
  outline: var(--focus-ring-width) solid var(--focus-ring);
  outline-offset: var(--focus-ring-offset);
}

.ar-ob-opt__input[aria-invalid='true'] + .ar-ob-opt__box {
  border-color: var(--danger-on-cream);
}

/* Six organization types: two columns of compact cards, icon over title. */
@media (min-width: 480px) {
  .ar-ob-opts--grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .ar-ob-opts--grid .ar-ob-opt__box {
    grid-template-columns: minmax(0, 1fr);
    align-content: start;
    gap: var(--space-2);
    min-height: calc(var(--space-24) + var(--space-4));
    padding: var(--space-3) var(--space-4) var(--space-4);
  }
  .ar-ob-opts--grid .ar-ob-opt__check {
    position: absolute;
    top: var(--space-3);
    right: var(--space-3);
  }
}

.ar-ob-opts > .ar-field__error {
  grid-column: 1 / -1;
}

/* ── the look: two cards with a drawn dashboard ──────────────────────── */

.ar-ob-looks {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3);
}

.ar-ob-look__box {
  display: grid;
  border: var(--border-width-hairline) solid var(--border-default);
  border-radius: var(--radius-control);
  background: var(--ground-raised);
  overflow: hidden;
}

.ar-ob-look__label {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  border-top: var(--border-width-hairline) solid var(--border-subtle);
  font: var(--type-body-s);
  color: var(--text-primary);
}

.ar-ob-look__label .ar-ob-opt__check {
  margin-left: auto;
}

/* The thumbnails keep their own colours whatever the page's look. */
.ar-ob-look__thumb {
  --t-ground: var(--bg-paper);
  --t-raised: #fdfbf6;
  --t-line: var(--ink-100);
  --t-ink: var(--ink-900);
  display: grid;
  grid-template-rows: var(--space-6) 1fr;
  height: calc(var(--space-24) + var(--space-6));
  padding: var(--space-3) 0 0 var(--space-4);
  background: var(--t-ground);
}

.ar-ob-look__thumb[data-look='dark'] {
  --t-ground: var(--bg-console-sunken);
  --t-raised: var(--bg-console-raised);
  --t-line: var(--border-console);
  --t-ink: var(--ink-0);
}

.ar-ob-look__bar {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: 0 var(--space-3);
  border: var(--border-width-hairline) solid var(--t-line);
  border-bottom: 0;
  border-radius: var(--radius-sm) 0 0 0;
  background: var(--t-raised);
}

.ar-ob-look__bar i {
  display: block;
  height: var(--space-1);
  width: var(--space-8);
  border-radius: var(--radius-sm);
  background: var(--t-line);
}

.ar-ob-look__bar i:first-child {
  width: var(--space-2);
  height: var(--space-2);
  border-radius: var(--radius-full);
}

.ar-ob-look__body {
  display: grid;
  grid-template-columns: var(--space-10) 1fr;
  border: var(--border-width-hairline) solid var(--t-line);
  border-bottom: 0;
  background: var(--t-raised);
}

.ar-ob-look__side {
  display: grid;
  align-content: start;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-2);
  border-right: var(--border-width-hairline) solid var(--t-line);
}

.ar-ob-look__side i,
.ar-ob-look__main i {
  display: block;
  height: var(--space-1);
  border-radius: var(--radius-sm);
  background: var(--t-line);
}

.ar-ob-look__main {
  display: grid;
  align-content: start;
  gap: var(--space-2);
  padding: var(--space-3);
}

.ar-ob-look__main .ar-ob-look__line {
  height: var(--space-6);
  border-radius: var(--radius-sm);
  background: var(--t-ground);
  border: var(--border-width-hairline) solid var(--t-line);
  border-bottom: var(--border-width-bracket) solid var(--signal-500);
}

.ar-ob-look__main i:nth-child(3) {
  width: 70%;
}

/* ── progress dashes and the look switch ─────────────────────────────── */

.ar-ob__dashes {
  display: flex;
  gap: var(--space-1);
  margin: 0;
  padding: 0;
  list-style: none;
}

.ar-ob__dash-hit {
  display: block;
  padding: var(--space-3) 0;
}

.ar-ob__dash-hit::before {
  content: '';
  display: block;
  width: calc(var(--space-5) - var(--space-1));
  height: var(--border-width-bracket);
  border-radius: var(--radius-sm);
  background: var(--border-subtle);
}

.ar-ob__dash[data-state='done'] .ar-ob__dash-hit::before,
.ar-ob__dash[data-state='current'] .ar-ob__dash-hit::before {
  background: var(--text-primary);
}

.ar-ob__dash[data-state='current'] .ar-ob__dash-hit::before {
  width: var(--space-8);
}

a.ar-ob__dash-hit:hover::before {
  background: var(--text-secondary);
}

.ar-ob-theme {
  display: inline-flex;
  border: var(--border-width-hairline) solid var(--border-subtle);
  border-radius: var(--radius-control);
  background: var(--ground-raised);
}

.ar-ob-theme__opt {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  min-height: var(--space-8);
  padding: 0 var(--space-3);
  font: var(--type-micro);
  letter-spacing: var(--tracking-signal);
  text-transform: uppercase;
  color: var(--text-tertiary);
  text-decoration: none;
}

.ar-ob-theme__opt + .ar-ob-theme__opt {
  border-left: var(--border-width-hairline) solid var(--border-subtle);
}

.ar-ob-theme__opt:hover {
  color: var(--text-primary);
}

.ar-ob-theme__opt[aria-current='true'] {
  background: var(--ground-sunken);
  color: var(--text-primary);
}

/* ── the signed-out "talk to us" card ────────────────────────────────── */

.ar-ob-talk {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-3);
  margin-top: var(--space-6);
  padding: var(--space-4);
  border: var(--border-width-hairline) solid var(--border-subtle);
  border-radius: var(--radius-box);
  background: var(--ground-raised);
}

.ar-ob-talk__icon {
  display: grid;
  place-items: center;
  width: var(--space-10);
  height: var(--space-10);
  border-radius: var(--radius-control);
  background: var(--ground-sunken);
  color: var(--text-secondary);
}

.ar-ob-talk__text {
  display: grid;
  gap: var(--space-1);
}

.ar-ob-talk__title {
  font: var(--type-body-s);
  font-weight: var(--weight-medium);
}

.ar-ob-talk__sub {
  font: var(--type-caption);
  color: var(--text-tertiary);
}

.ar-ob-talk__btn {
  gap: var(--space-1);
}

/* SSO inside the shell: a quieter pair under the primary. */
.ar-ob .ar-auth__sso-btn {
  min-height: var(--space-12);
  border-color: var(--border-default);
  border-radius: var(--radius-control);
}

.ar-ob .ar-auth__divider {
  margin: var(--space-1) 0;
}

.ar-ob .ar-auth__qr {
  justify-self: start;
}

/* ── signed out: Armage News on the console ground ───────────────────── */

.ar-ob__side {
  display: none;
}

@media (min-width: 1024px) {
  .ar-ob__side {
    display: block;
    position: sticky;
    top: 0;
    height: 100vh;
    height: 100dvh;
    overflow: hidden;
  }
}

.ar-proof {
  background: var(--bg-console);
  color: var(--text-primary);
}

@media (min-width: 1024px) {
  .ar-proof {
    display: grid;
    grid-template-rows: minmax(0, 1fr) auto;
  }
}

.ar-proof::before,
.ar-pv::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: var(--grain-tile);
  background-size: var(--grain-size);
  opacity: var(--grain-on-dark);
  pointer-events: none;
}

.ar-proof__frame {
  position: relative;
  align-self: center;
  justify-self: center;
  width: min(calc(100% - var(--space-24)), calc(var(--space-32) * 4));
  display: grid;
  gap: var(--space-5);
}

/* The one sanctioned gradient: signal light inside the box, behind the lead story. */
.ar-proof__frame::before {
  content: '';
  position: absolute;
  inset: calc(-1 * var(--space-16));
  background: radial-gradient(closest-side, var(--signal-glow), transparent);
  opacity: var(--opacity-ghost);
  pointer-events: none;
}

.ar-proof__label {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0;
  font: var(--type-micro);
  letter-spacing: var(--tracking-signal);
  text-transform: uppercase;
  color: var(--text-secondary);
}

.ar-proof__live {
  width: var(--space-2);
  height: var(--space-2);
  border-radius: var(--radius-full);
  background: var(--signal-500);
}

.ar-proof__list {
  position: relative;
  display: grid;
  gap: var(--space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

.ar-proof__item {
  animation: ar-ob-in var(--duration-entrance) var(--ease-entrance) both;
}

.ar-proof__item:nth-child(2) {
  animation-delay: 90ms;
}

.ar-proof__item:nth-child(3) {
  animation-delay: 180ms;
}

.ar-proof__story {
  display: grid;
  grid-template-columns: var(--space-16) minmax(0, 1fr);
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-3);
  border: var(--border-width-hairline) solid var(--border-subtle);
  border-radius: var(--radius-box);
  background: var(--bg-console-raised);
  color: var(--text-primary);
  text-decoration: none;
  transition: transform var(--duration-standard) var(--ease-standard);
}

a.ar-proof__story:hover {
  transform: translateY(calc(-1 * var(--border-width-bracket)));
}

a.ar-proof__story:focus-visible {
  outline: var(--focus-ring-width) solid var(--focus-ring);
  outline-offset: var(--focus-ring-offset);
}

.ar-proof__story--lead {
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
  padding: 0;
  overflow: hidden;
}

.ar-proof__cover {
  display: block;
  width: var(--space-16);
  height: var(--space-16);
  object-fit: cover;
  border-radius: var(--radius-control);
  background: var(--bg-console-sunken);
}

.ar-proof__cover--none {
  display: grid;
  place-items: center;
  color: var(--text-tertiary);
}

.ar-proof__story--lead .ar-proof__cover {
  width: 100%;
  height: calc(var(--space-32) + var(--space-12));
  border-radius: 0;
}

.ar-proof__copy {
  display: grid;
  gap: var(--space-2);
  min-width: 0;
}

.ar-proof__story--lead .ar-proof__copy {
  padding: var(--space-4) var(--space-5) var(--space-5);
}

.ar-proof__meta {
  font: var(--type-micro);
  letter-spacing: var(--tracking-signal);
  text-transform: uppercase;
  color: var(--text-tertiary);
}

.ar-proof__title {
  font: var(--type-body-s);
  color: var(--text-primary);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.ar-proof__story--lead .ar-proof__title {
  font: var(--type-subtitle);
  font-weight: var(--weight-regular);
  letter-spacing: var(--tracking-title);
  -webkit-line-clamp: 3;
}

.ar-proof__note {
  position: relative;
  margin: 0;
  font: var(--type-caption);
  color: var(--text-tertiary);
  max-width: var(--measure-lede);
}

.ar-proof__strip {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-2) var(--space-8);
  margin: 0;
  padding: var(--space-6) var(--space-8);
  border-top: var(--border-width-hairline) solid var(--border-subtle);
  font: var(--type-signal);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--text-tertiary);
}

.ar-proof__product {
  color: inherit;
  text-decoration: none;
  border-radius: var(--radius-control);
}

.ar-proof__product:hover {
  color: var(--text-primary);
  text-decoration: underline;
  text-underline-offset: var(--space-1);
}

.ar-proof__product:focus-visible {
  outline: var(--focus-ring-width) solid var(--focus-ring);
  outline-offset: var(--focus-ring-offset);
}

/* ── signed in: the live preview ─────────────────────────────────────── */

.ar-pv {
  background: var(--ground-sunken);
  border-left: var(--border-width-hairline) solid var(--border-subtle);
}

.ar-pv::before {
  opacity: var(--grain-on-cream);
}

/* The window sits inside the panel side to side (ADR 0113: a bleed past the
   right edge cut the preview's text off); it still runs off the bottom. */
.ar-pv__stage {
  position: absolute;
  top: var(--space-10);
  left: var(--space-10);
  right: var(--space-10);
  bottom: calc(-1 * var(--space-20));
}

.ar-pv__window {
  height: 100%;
  display: grid;
  grid-template-rows: var(--space-12) minmax(0, 1fr);
  grid-template-columns: minmax(0, 1fr);
  border: var(--border-width-hairline) solid var(--border-subtle);
  border-radius: var(--radius-box);
  background: var(--ground-default);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}

.ar-pv__chrome {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: 0 var(--space-5);
  border-bottom: var(--border-width-hairline) solid var(--border-subtle);
  background: var(--ground-raised);
}

.ar-pv__lights {
  display: flex;
  gap: var(--space-2);
}

.ar-pv__lights i {
  width: var(--space-3);
  height: var(--space-3);
  border-radius: var(--radius-full);
  background: var(--border-default);
}

.ar-pv__url {
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-control);
  background: var(--ground-sunken);
  font: var(--type-caption);
  color: var(--text-tertiary);
  white-space: nowrap;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ar-pv__app {
  display: grid;
  grid-template-columns: calc(var(--space-32) + var(--space-20)) minmax(0, 1fr);
  min-height: 0;
}

.ar-pv__side {
  display: grid;
  align-content: start;
  gap: var(--space-2);
  padding: var(--space-5) var(--space-3);
  border-right: var(--border-width-hairline) solid var(--border-subtle);
  background: var(--ground-raised);
}

.ar-pv__logo .ar-auth__brand-mark,
.ar-pv__logo svg {
  width: var(--space-5);
  height: var(--space-5);
  margin: 0 var(--space-2) var(--space-3);
  color: var(--text-primary);
}

.ar-pv__ws {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2);
  border: var(--border-width-hairline) solid var(--border-subtle);
  border-radius: var(--radius-control);
  background: var(--ground-default);
  color: var(--text-tertiary);
}

.ar-pv__avatar {
  display: grid;
  place-items: center;
  width: var(--space-8);
  height: var(--space-8);
  border-radius: var(--radius-control);
  background: var(--text-primary);
  color: var(--ground-default);
  font: var(--type-micro);
  letter-spacing: var(--tracking-signal);
}

.ar-pv__avatar--lg {
  width: var(--space-12);
  height: var(--space-12);
  font: var(--type-signal);
}

.ar-pv__ws-text {
  display: grid;
  min-width: 0;
}

.ar-pv__ws-text b,
.ar-pv__ws-text small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ar-pv__ws-text b {
  font: var(--type-caption);
  font-weight: var(--weight-medium);
  color: var(--text-primary);
}

.ar-pv__ws-text small {
  font: var(--type-micro);
  letter-spacing: var(--tracking-signal);
  text-transform: uppercase;
  color: var(--text-tertiary);
}

.ar-pv__nav-label {
  margin: var(--space-3) var(--space-2) 0;
  font: var(--type-micro);
  letter-spacing: var(--tracking-signal);
  text-transform: uppercase;
  color: var(--text-tertiary);
}

.ar-pv__nav {
  display: grid;
  gap: var(--space-1);
  margin: 0;
  padding: 0;
  list-style: none;
}

.ar-pv__nav-item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2);
  border-radius: var(--radius-control);
  font: var(--type-caption);
  color: var(--text-secondary);
}

.ar-pv__nav-item span {
  flex: 1;
}

.ar-pv__nav-dot {
  width: var(--space-2);
  height: var(--space-2);
  border-radius: var(--radius-full);
  background: transparent;
}

.ar-pv__nav-item[data-on='true'] {
  background: var(--ground-default);
  color: var(--text-primary);
}

.ar-pv__nav-item[data-on='true'] .ar-pv__nav-dot {
  background: var(--signal-500);
}

.ar-pv__nav-item[data-on='false'] {
  opacity: var(--opacity-disabled);
}

.ar-pv__main {
  display: grid;
  align-content: start;
  gap: var(--space-5);
  padding: var(--space-6);
  min-width: 0;
}

.ar-pv__head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: var(--space-4);
  padding-bottom: var(--space-4);
  border-bottom: var(--border-width-hairline) solid var(--border-subtle);
}

.ar-pv__crumb {
  margin: 0;
  font: var(--type-micro);
  letter-spacing: var(--tracking-signal);
  text-transform: uppercase;
  color: var(--text-tertiary);
}

.ar-pv__title {
  margin: var(--space-1) 0 0;
  font: var(--type-title);
  font-weight: var(--weight-regular);
  letter-spacing: var(--tracking-title);
  color: var(--text-primary);
}

.ar-pv__chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
}

.ar-pv__chip {
  padding: var(--border-width-bracket) var(--space-2);
  border: var(--border-width-hairline) solid var(--border-subtle);
  border-radius: var(--radius-control);
  font: var(--type-micro);
  letter-spacing: var(--tracking-signal);
  text-transform: uppercase;
  color: var(--text-secondary);
  white-space: nowrap;
}

.ar-pv__grid {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
  gap: var(--space-4);
}

.ar-pv__col {
  display: grid;
  align-content: start;
  gap: var(--space-3);
}

.ar-pv__story {
  display: grid;
  grid-template-columns: var(--space-16) minmax(0, 1fr);
  gap: var(--space-3);
  padding: var(--space-3);
  border: var(--border-width-hairline) solid var(--border-subtle);
  border-radius: var(--radius-box);
  background: var(--ground-raised);
}

.ar-pv__cover {
  height: var(--space-16);
  border-radius: var(--radius-control);
  background: var(--ground-sunken);
}

.ar-pv__story--lead {
  grid-template-columns: minmax(0, 1fr);
}

.ar-pv__story--lead .ar-pv__cover {
  height: var(--space-24);
}

.ar-pv__story-copy {
  display: grid;
  align-content: start;
  justify-items: start;
  gap: var(--space-1);
  min-width: 0;
}

.ar-pv__story-copy b {
  font: var(--type-body-s);
  font-weight: var(--weight-medium);
  color: var(--text-primary);
}

.ar-pv__bar {
  display: block;
  width: 100%;
  height: var(--space-2);
  margin: var(--space-1) 0;
  border-radius: var(--radius-sm);
  background: var(--border-subtle);
}

.ar-pv__bar--dark {
  background: var(--border-default);
}

.ar-pv__w30 {
  width: 30%;
}
.ar-pv__w40 {
  width: 40%;
}
.ar-pv__w45 {
  width: 45%;
}
.ar-pv__w50 {
  width: 50%;
}
.ar-pv__w55 {
  width: 55%;
}
.ar-pv__w60 {
  width: 60%;
}
.ar-pv__w65 {
  width: 65%;
}
.ar-pv__w70 {
  width: 70%;
}
.ar-pv__w80 {
  width: 80%;
}
.ar-pv__w90 {
  width: 90%;
}

.ar-pv__badge {
  display: inline-block;
  padding: var(--border-width-hairline) var(--space-2);
  border: var(--border-width-hairline) solid var(--border-default);
  border-radius: var(--radius-control);
  font: var(--type-micro);
  letter-spacing: var(--tracking-signal);
  text-transform: uppercase;
  color: var(--text-secondary);
  white-space: nowrap;
}

.ar-pv__badge--wait {
  border-color: var(--caution-500);
  color: var(--caution-on-cream);
}

.ar-pv__badge--ok {
  border-color: var(--signal-500);
  color: var(--signal-on-cream);
}

.ar-pv__panel {
  display: grid;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  border: var(--border-width-hairline) solid var(--border-subtle);
  border-radius: var(--radius-box);
  background: var(--ground-raised);
}

.ar-pv__panel-title {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0 0 var(--space-1);
  font: var(--type-micro);
  letter-spacing: var(--tracking-signal);
  text-transform: uppercase;
  color: var(--text-secondary);
}

.ar-pv__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}

.ar-pv__mini {
  padding: var(--border-width-hairline) var(--space-2);
  border-radius: var(--radius-control);
  background: var(--text-primary);
  color: var(--ground-default);
  font: var(--type-micro);
  letter-spacing: var(--tracking-signal);
  text-transform: uppercase;
}

.ar-pv__empty {
  margin: 0;
  font: var(--type-caption);
  color: var(--text-tertiary);
}

.ar-pv__live {
  width: var(--space-2);
  height: var(--space-2);
  border-radius: var(--radius-full);
  background: var(--signal-500);
}

.ar-pv__status {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font: var(--type-micro);
  letter-spacing: var(--tracking-signal);
  text-transform: uppercase;
  color: var(--text-tertiary);
  white-space: nowrap;
}

.ar-pv__status::before {
  content: '';
  width: var(--space-2);
  height: var(--space-2);
  border-radius: var(--radius-full);
  background: var(--border-default);
}

.ar-pv__status[data-status='live'] {
  color: var(--signal-on-cream);
}

.ar-pv__status[data-status='live']::before {
  background: var(--signal-500);
}

.ar-pv__status[data-status='scoped'] {
  color: var(--caution-on-cream);
}

.ar-pv__status[data-status='scoped']::before {
  background: var(--caution-500);
}

.ar-pv__status[data-status='planned'] {
  color: var(--text-secondary);
}

.ar-pv__status[data-status='included'] {
  color: var(--text-primary);
}

.ar-pv__status[data-status='included']::before {
  background: var(--text-primary);
}

/* The floating card(s): the step's answer, projected over the workspace. */
.ar-pv__float {
  position: absolute;
  top: var(--space-16);
  left: calc(var(--space-32) + var(--space-8));
  width: min(
    calc(var(--space-32) * 3 + var(--space-8)),
    calc(100% - var(--space-32) - var(--space-24))
  );
  z-index: 2;
}

.ar-pv-stack {
  display: grid;
  gap: var(--space-3);
}

.ar-pv-card {
  display: grid;
  gap: var(--space-3);
  padding: var(--space-5);
  border: var(--border-width-hairline) solid var(--border-subtle);
  border-radius: var(--radius-box);
  background: var(--ground-raised);
  box-shadow: var(--shadow-lg);
  animation: ar-ob-in var(--duration-entrance) var(--ease-entrance) both;
}

.ar-pv-card__variant {
  display: grid;
  gap: var(--space-3);
  animation: ar-ob-fade var(--duration-slow) var(--ease-standard) both;
}

.ar-pv-card__head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-3);
}

.ar-pv-card__head > span:not(.ar-pv-card__icon):not(.ar-pv__avatar) {
  display: grid;
  gap: var(--border-width-bracket);
  min-width: 0;
}

.ar-pv-card__head b {
  font: var(--type-body);
  font-weight: var(--weight-medium);
  color: var(--text-primary);
}

.ar-pv-card__head small {
  font: var(--type-caption);
  color: var(--text-tertiary);
}

.ar-pv-card__icon {
  display: grid;
  place-items: center;
  width: var(--space-10);
  height: var(--space-10);
  border: var(--border-width-hairline) solid var(--border-subtle);
  border-radius: var(--radius-control);
  background: var(--ground-default);
  color: var(--text-secondary);
}

.ar-pv-card__label {
  margin: var(--space-1) 0 0;
  font: var(--type-micro);
  letter-spacing: var(--tracking-signal);
  text-transform: uppercase;
  color: var(--text-tertiary);
}

.ar-pv-card__chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.ar-pv-card__chips .ar-pv__bar {
  width: var(--space-16);
  margin: 0;
  height: var(--space-6);
}

.ar-pv-card__queue {
  display: grid;
}

.ar-pv-card__q {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) 0;
  border-top: var(--border-width-hairline) solid var(--border-subtle);
  font: var(--type-body-s);
}

.ar-pv-card__q b {
  font-weight: var(--weight-medium);
}

.ar-pv-card__q .ar-pv__bar {
  margin: 0;
}

.ar-pv-card__note {
  margin: 0;
  font: var(--type-caption);
  color: var(--text-tertiary);
}

.ar-pv-card__profile {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.ar-pv-card__profile > span:last-child {
  flex: 1;
  display: grid;
  font: var(--type-body-s);
}

.ar-pv-card__portrait {
  display: grid;
  place-items: center;
  width: var(--space-12);
  height: var(--space-12);
  border-radius: var(--radius-full);
  background: var(--ground-sunken);
  color: var(--text-tertiary);
}

.ar-pv-card__list,
.ar-pv-card__agenda {
  display: grid;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
  font: var(--type-body-s);
}

.ar-pv-card__list li,
.ar-pv-card__agenda li {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.ar-pv-card__agenda .ar-ob-icon {
  color: var(--signal-on-cream);
}

.ar-pv-card__slot {
  display: grid;
  gap: var(--space-1);
  padding: var(--space-3) var(--space-4);
  border: var(--border-width-hairline) solid var(--border-subtle);
  border-radius: var(--radius-control);
  background: var(--ground-sunken);
  font: var(--type-body-s);
}

.ar-pv-card__slot-label {
  font: var(--type-micro);
  letter-spacing: var(--tracking-signal);
  text-transform: uppercase;
  color: var(--text-tertiary);
}

.ar-pv-card__setting {
  display: grid;
  grid-template-columns: calc(var(--space-20) + var(--space-4)) minmax(0, 1fr);
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) 0;
  border-top: var(--border-width-hairline) solid var(--border-subtle);
}

.ar-pv-card__setting-label {
  font: var(--type-micro);
  letter-spacing: var(--tracking-signal);
  text-transform: uppercase;
  color: var(--text-tertiary);
}

.ar-pv-card__sys {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  font: var(--type-body-s);
  animation: ar-ob-fade var(--duration-slow) var(--ease-standard) both;
}

.ar-pv-card__sys b {
  font-weight: var(--weight-medium);
}

.ar-pv-card__sys .ar-pv__bar {
  margin: 0;
}

.ar-pv-card__kv {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-3) 0 0;
  border-top: var(--border-width-hairline) solid var(--border-subtle);
  font: var(--type-body-s);
  color: var(--text-secondary);
}

.ar-pv-card__kv b {
  font-weight: var(--weight-medium);
  color: var(--text-primary);
}

.ar-pv-card__fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3);
  margin: 0;
  padding-top: var(--space-3);
  border-top: var(--border-width-hairline) solid var(--border-subtle);
}

.ar-pv-card__fields div {
  display: grid;
  gap: var(--space-1);
  min-width: 0;
}

.ar-pv-card__fields dt {
  font: var(--type-micro);
  letter-spacing: var(--tracking-signal);
  text-transform: uppercase;
  color: var(--text-tertiary);
}

.ar-pv-card__fields dd {
  margin: 0;
  padding: var(--space-2) var(--space-3);
  border: var(--border-width-hairline) solid var(--border-subtle);
  border-radius: var(--radius-control);
  background: var(--ground-default);
  font: var(--type-body-s);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ar-pv-card__rail {
  display: flex;
  gap: var(--space-1);
  margin: 0;
  padding: 0;
  list-style: none;
}

.ar-pv-card__rail li {
  flex: 1;
  padding-top: var(--space-2);
  border-top: var(--border-width-bracket) solid var(--border-subtle);
  font: var(--type-micro);
  letter-spacing: var(--tracking-signal);
  text-transform: uppercase;
  color: var(--text-tertiary);
}

.ar-pv-card__rail li[data-state='done'] {
  border-top-color: var(--text-primary);
  color: var(--text-secondary);
}

.ar-pv-card__rail li[data-state='current'] {
  border-top-color: var(--signal-500);
  color: var(--text-primary);
}

/* The two chips under the preview and the illustrative note. */
.ar-pv__chips {
  position: absolute;
  right: var(--space-8);
  bottom: var(--space-8);
  z-index: 3;
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.ar-pv__talk {
  gap: var(--space-2);
  min-height: var(--space-10);
  box-shadow: var(--shadow-md);
}

.ar-pv__illustrative {
  position: absolute;
  left: var(--space-10);
  bottom: var(--space-10);
  z-index: 3;
  margin: 0;
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-control);
  background: var(--ground-raised);
  font: var(--type-micro);
  letter-spacing: var(--tracking-signal);
  text-transform: uppercase;
  color: var(--text-tertiary);
}

.ar-pv__talk:focus-visible {
  outline: var(--focus-ring-width) solid var(--focus-ring);
  outline-offset: var(--focus-ring-offset);
}

/* ── done / home facts ───────────────────────────────────────────────── */

.ar-ob-facts {
  display: grid;
  margin: 0 0 var(--space-4);
  border-top: var(--border-width-hairline) solid var(--border-subtle);
}

.ar-ob-facts div {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
  gap: var(--space-4);
  padding: var(--space-3) 0;
  border-bottom: var(--border-width-hairline) solid var(--border-subtle);
}

.ar-ob-facts dt {
  font: var(--type-micro);
  letter-spacing: var(--tracking-signal);
  text-transform: uppercase;
  color: var(--text-tertiary);
}

.ar-ob-facts dd {
  margin: 0;
  font: var(--type-body-s);
}

.ar-ob-after {
  display: grid;
  gap: var(--space-2);
  margin: 0 0 var(--space-4);
  padding-left: var(--space-5);
  font: var(--type-body-s);
  color: var(--text-secondary);
}

/* ── the plan page ───────────────────────────────────────────────────── */

.ar-plans {
  min-height: 100vh;
  min-height: 100dvh;
  padding: var(--space-8) var(--space-12) var(--space-24);
  background: var(--ground-default);
}

.ar-plans__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
}

.ar-plans__brand {
  display: inline-flex;
  align-items: center;
  gap: var(--space-4);
}

.ar-plans__back {
  display: grid;
  place-items: center;
  width: var(--space-8);
  height: var(--space-8);
  border-radius: var(--radius-control);
  color: var(--text-tertiary);
}

.ar-plans__back:hover {
  color: var(--text-primary);
  background: var(--veil-on-cream);
}

.ar-plans__main {
  max-width: var(--grid-content);
  margin: var(--space-12) auto 0;
  display: grid;
  gap: var(--space-6);
  animation: ar-ob-in var(--duration-slow) var(--ease-entrance) both;
}

.ar-plans__head {
  display: grid;
  gap: var(--space-4);
}

.ar-plans__head .ar-ob-q {
  margin: 0;
}

.ar-plans__billing {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.ar-plans__opt {
  font: var(--type-body-s);
  color: var(--text-tertiary);
  text-decoration: none;
}

.ar-plans__opt[aria-checked='true'] {
  color: var(--text-primary);
}

.ar-plans__switch {
  position: relative;
  display: block;
  width: var(--space-12);
  height: var(--space-6);
  border: var(--border-width-hairline) solid var(--border-default);
  border-radius: var(--radius-control);
  background: var(--ground-sunken);
}

.ar-plans__knob {
  position: absolute;
  top: var(--border-width-bracket);
  left: var(--border-width-bracket);
  width: calc(var(--space-5) - var(--border-width-hairline));
  height: calc(var(--space-5) - var(--border-width-hairline));
  border-radius: var(--radius-sm);
  background: var(--ground-raised);
  box-shadow: var(--shadow-sm);
  transition: transform var(--duration-standard) var(--ease-standard);
}

.ar-plans[data-interval='yearly'] .ar-plans__switch {
  background: var(--text-primary);
  border-color: var(--text-primary);
}

.ar-plans[data-interval='yearly'] .ar-plans__knob {
  transform: translateX(var(--space-6));
  background: var(--ground-default);
}

.ar-plans__free {
  padding: var(--border-width-bracket) var(--space-2);
  border: var(--border-width-hairline) solid var(--border-default);
  border-radius: var(--radius-control);
  font: var(--type-micro);
  letter-spacing: var(--tracking-signal);
  text-transform: uppercase;
  color: var(--text-secondary);
}

.ar-plans[data-interval='yearly'] .ar-plans__free {
  border-color: var(--text-primary);
  color: var(--text-primary);
}

/* Both prices are in the markup; the page's interval picks one. */
.ar-plans [data-yearly] {
  display: none;
}

.ar-plans[data-interval='yearly'] [data-monthly] {
  display: none;
}

.ar-plans[data-interval='yearly'] [data-yearly] {
  display: inline;
}

.ar-plans__grid {
  display: grid;
  gap: var(--space-4);
  margin: 0;
  padding: var(--space-6) 0 0;
  list-style: none;
}

@media (min-width: 768px) {
  .ar-plans__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1200px) {
  .ar-plans__grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.ar-plans__cell {
  min-width: 0;
  display: grid;
}

.ar-plans .ar-plan h2,
.ar-plans .ar-plan p {
  margin: 0;
}

.ar-plans__namerow {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
}

.ar-plans__namerow .ar-plan__name {
  white-space: nowrap;
}

.ar-plans__save {
  padding: var(--border-width-hairline) var(--space-2);
  border: var(--border-width-hairline) solid currentColor;
  border-radius: var(--radius-control);
  font: var(--type-micro);
  letter-spacing: var(--tracking-signal);
  text-transform: uppercase;
  white-space: nowrap;
}

.ar-plans[data-interval='yearly'] .ar-plans__save[data-yearly] {
  display: inline-block;
}

.ar-plans__was {
  margin-left: var(--space-1);
  font: var(--type-body-s);
  color: var(--text-tertiary);
}

.ar-plan__foot .ar-plans__checkout {
  margin: 0;
  width: 100%;
}

/* "Continue to secure checkout" may take two lines in a narrow card. */
.ar-plans__checkout .ar-ob__cta {
  white-space: normal;
  text-align: center;
}

.ar-plan__foot {
  display: grid;
  gap: var(--space-2);
}

.ar-plans__fine {
  margin: 0;
  max-width: var(--measure-body);
  font: var(--type-caption);
  color: var(--text-tertiary);
}

.ar-plans__pair {
  display: grid;
  gap: var(--space-4);
  margin-top: var(--space-6);
}

.ar-plans__band {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-6);
  padding: var(--space-8);
  border-radius: var(--radius-box);
  background:
    radial-gradient(circle at 85% 0%, var(--signal-glow), transparent 55%), var(--bg-console);
  color: var(--text-primary);
  overflow: hidden;
}

.ar-plans__band-title {
  margin: 0;
  font: var(--type-title);
  font-weight: var(--weight-regular);
  letter-spacing: var(--tracking-title);
}

.ar-plans__band-sub {
  margin: var(--space-2) 0 0;
  max-width: var(--measure-lede);
  font: var(--type-body-s);
  color: var(--text-secondary);
}

.ar-plans__compare {
  display: grid;
  gap: var(--space-4);
  margin-top: var(--space-10);
}

.ar-plans__h2 {
  margin: 0;
  font: var(--type-title);
  font-weight: var(--weight-regular);
  letter-spacing: var(--tracking-title);
}

/* ── phones: one column, the side goes, the dashes pin to the bottom ── */

@media (max-width: 1023.98px) {
  .ar-ob__main {
    padding: var(--space-6) var(--space-6) calc(var(--space-20) + var(--space-2));
  }

  .ar-ob__body {
    padding: var(--space-10) 0 var(--space-6);
  }

  .ar-ob__foot {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: var(--z-sticky);
    padding: var(--space-3) var(--space-6) var(--space-4);
    background: var(--ground-default);
  }

  .ar-ob__logout-label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }

  .ar-ob__dash-hit::before {
    width: var(--space-4);
  }

  .ar-ob__dash[data-state='current'] .ar-ob__dash-hit::before {
    width: var(--space-6);
  }

  .ar-plans {
    padding: var(--space-6) var(--space-5) var(--space-16);
  }

  .ar-plans__main {
    margin-top: var(--space-8);
  }
}

@media (max-width: 479.98px) {
  .ar-ob-talk {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .ar-ob-talk__btn {
    grid-column: 1 / -1;
  }

  .ar-ob-theme__opt span {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
}

/* ── motion off ───────────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  .ar-ob__col,
  .ar-proof__item,
  .ar-pv-card,
  .ar-pv-card__variant,
  .ar-pv-card__sys,
  .ar-plans__main {
    animation: none;
  }

  .ar-plans__knob,
  .ar-proof__story {
    transition: none;
  }
}

/* A form button that reads as a link ("Send the code again"), 24 px tall
   at least (WCAG 2.5.8). */
.ar-ob-alt .ar-link {
  display: inline-flex;
  align-items: center;
  min-height: var(--space-6);
  appearance: none;
  border: 0;
  padding: 0;
  background: none;
  font: inherit;
  cursor: pointer;
  color: var(--text-primary);
  text-decoration: underline;
  text-decoration-color: var(--border-strong);
  text-underline-offset: 0.2em;
}

.ar-ob-alt .ar-link:hover {
  text-decoration-color: currentColor;
}

.ar-ob-alt .ar-link:focus-visible {
  outline: var(--focus-ring-width) solid var(--focus-ring);
  outline-offset: var(--focus-ring-offset);
}

/* ── ADR 0113: every device (sign-in, onboarding, plans) ─────────────── */

/* The steps as one menu where eight dashes are too small to tap. */
.ar-ob__steps {
  display: none;
  position: relative;
}

.ar-ob__steps-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  min-height: 44px;
  padding: 0 var(--space-3);
  border: var(--border-width-hairline) solid var(--border-subtle);
  border-radius: var(--radius-control);
  background: var(--ground-raised);
  font: var(--type-caption);
  color: var(--text-secondary);
  cursor: pointer;
  list-style: none;
}

.ar-ob__steps-btn::-webkit-details-marker {
  display: none;
}

.ar-ob__steps-btn:focus-visible {
  outline: var(--focus-ring-width) solid var(--focus-ring);
  outline-offset: var(--focus-ring-offset);
}

.ar-ob__steps-bar {
  display: inline-flex;
  gap: 2px;
}

.ar-ob__steps-bar i {
  width: var(--space-2);
  height: var(--border-width-bracket);
  border-radius: var(--radius-sm);
  background: var(--border-subtle);
}

.ar-ob__steps-bar i[data-step='done'],
.ar-ob__steps-bar i[data-step='current'] {
  background: var(--text-primary);
}

.ar-ob__steps-list {
  position: absolute;
  bottom: calc(100% + var(--space-2));
  left: 0;
  z-index: var(--z-dropdown);
  min-width: calc(var(--space-32) + var(--space-16));
  max-height: min(70dvh, 28rem);
  overflow-y: auto;
  margin: 0;
  padding: var(--space-2);
  list-style: none;
  border: var(--border-width-hairline) solid var(--border-subtle);
  border-radius: var(--radius-box);
  background: var(--ground-raised);
  box-shadow: var(--shadow-lg);
}

.ar-ob__steps-item {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 0 var(--space-3);
  border-radius: var(--radius-control);
  font: var(--type-body-s);
  color: var(--text-primary);
  text-decoration: none;
}

a.ar-ob__steps-item:hover {
  background: var(--veil-on-cream);
}

a.ar-ob__steps-item:focus-visible {
  outline: var(--focus-ring-width) solid var(--focus-ring);
  outline-offset: calc(-1 * var(--focus-ring-width));
}

.ar-ob__steps-item[data-step='todo'] {
  color: var(--text-tertiary);
}

.ar-ob__steps-item[aria-current='step'] {
  font-weight: var(--weight-medium);
  background: var(--ground-sunken);
}

@media (max-width: 767.98px) {
  .ar-ob__dashes {
    display: none;
  }

  .ar-ob__steps {
    display: block;
  }
}

/* A dash is at least 24 px wide everywhere (WCAG 2.5.8), so dashes never crowd. */
.ar-ob__dash-hit {
  min-width: var(--space-6);
}

/* A full-width action or a long label wraps on a narrow screen instead of
   widening the page (the staff-console redirect on /pending at 320 px). */
.ar-ob-body:not([data-page='console']) .ar-control {
  max-width: 100%;
}

@media (max-width: 599.98px) {
  .ar-ob-body:not([data-page='console']) .ar-control {
    white-space: normal;
    text-align: center;
  }
}

/* A touch screen: 44 px targets for every control and stand-alone link. */
@media (pointer: coarse) {
  .ar-ob-body:not([data-page='console']) .ar-control,
  .ar-ob__brand,
  .ar-ob__logout-btn,
  .ar-ob-theme__opt,
  .ar-plans__opt,
  .ar-plans__back,
  .ar-proof__product {
    min-height: 44px;
  }

  .ar-ob__logout-btn,
  .ar-ob-theme__opt,
  .ar-plans__back {
    min-width: 44px;
    justify-content: center;
  }

  .ar-ob__dash-hit {
    min-width: 44px;
    min-height: 44px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .ar-ob__dashes {
    gap: 0;
  }

  .ar-ob-alt a,
  .ar-ob-alt .ar-link,
  .ar-ob-forgot,
  .ar-ob-check a,
  .ar-auth a,
  .ar-auth summary {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }

  .ar-plans__opt,
  .ar-proof__product {
    display: inline-flex;
    align-items: center;
  }

  .ar-plans__opt,
  .ar-ob-alt a,
  .ar-ob-alt .ar-link {
    min-width: 44px;
    justify-content: center;
  }

  .ar-ob summary {
    display: flex;
    align-items: center;
    min-height: 44px;
  }

  /* The switch keeps its look; a 44 px hit area surrounds it. */
  .ar-plans__switch {
    min-width: 44px;
  }

  .ar-plans__switch::after {
    content: '';
    position: absolute;
    inset: calc(-1 * var(--space-3)) 0;
    min-height: 44px;
  }
}

/*
 * The client workspace (@armage/portal/workspace.css; ADR 0061): the app
 * shell after onboarding and its pages. Tokens only, so the paper (light)
 * and console (dark) themes and the OS default restyle it with no rule
 * written twice; the one exception is the glass top bar, whose material
 * direction (cream or ink) follows the theme below. Requires tokens, forms,
 * controls, material, boxes and onboarding.css (base, .ar-ob__sr, .ar-ob-theme).
 *
 *   .ar-ws            the frame: sidebar + content column
 *   .ar-ws-side       sidebar on the raised ground; a drawer on the overlay
 *                     glass under 1024px (opened by #ws-nav:target or the script)
 *   .ar-ws-top        the floating glass top bar (the site header's material)
 *   .ar-ws-menu       <details> menus: the workspace switcher, the account
 *   .ar-ws-head/card/tile/rail/table/tabs/empty/int   the pages
 *
 * Material law: one glass layer per composition - the top bar on a laptop,
 * the drawer on a phone (the top bar's menu then sits under the scrim).
 * Motion law: only opacity and transform move, nothing under reduced motion.
 */

.ar-ws {
  --ar-ws-side-w: 15.5rem;
  --ar-ws-side-collapsed: 4.5rem;
  min-height: 100vh;
  min-height: 100dvh;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  background: var(--ground-default);
}

@media (min-width: 1024px) {
  .ar-ws {
    --ar-ws-rail: var(--ar-ws-side-w);
    grid-template-columns: var(--ar-ws-side-w) minmax(0, 1fr);
    /* The sidebar's ground and rule continue below it on a long page. */
    background-image: linear-gradient(
      to right,
      var(--ground-raised) calc(var(--ar-ws-rail) - var(--border-width-hairline)),
      var(--border-subtle) calc(var(--ar-ws-rail) - var(--border-width-hairline)),
      var(--border-subtle) var(--ar-ws-rail),
      transparent var(--ar-ws-rail)
    );
  }
  .ar-ws[data-collapsed='true'] {
    --ar-ws-rail: var(--ar-ws-side-collapsed);
  }
  .ar-ws[data-collapsed='true'] {
    grid-template-columns: var(--ar-ws-side-collapsed) minmax(0, 1fr);
  }
  /* Collapsing gives the page the width the sidebar gave up, so the right
     edge does not open an empty gutter on wide screens. */
  .ar-ws[data-collapsed='true'] .ar-ws-main {
    max-width: calc(76rem + var(--ar-ws-side-w) - var(--ar-ws-side-collapsed));
  }
}

.ar-ws-skip:focus {
  transform: none;
}

/* Every interactive thing in the shell shows the same ring. */
.ar-ws a:focus-visible,
.ar-ws button:focus-visible,
.ar-ws summary:focus-visible,
.ar-ws-side:focus-visible,
.ar-ws-main:focus-visible,
.ar-ws-code:focus-visible,
.ar-ws-table-wrap:focus-visible {
  outline: var(--focus-ring-width) solid var(--focus-ring);
  outline-offset: var(--focus-ring-offset);
}
.ar-ws-main:focus:not(:focus-visible),
.ar-ws-side:focus:not(:focus-visible) {
  outline: none;
}

/* ── sidebar ─────────────────────────────────────────────────────────── */

.ar-ws-side {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-3);
  background: var(--ground-raised);
  border-right: var(--border-width-hairline) solid var(--border-subtle);
  color: var(--text-primary);
}

@media (min-width: 1024px) {
  .ar-ws-side {
    position: sticky;
    top: 0;
    height: 100vh;
    height: 100dvh;
    overflow: hidden;
  }
}

.ar-ws-side__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: var(--space-10);
  padding-inline: var(--space-2);
}

.ar-ws-brand {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--text-primary);
  text-decoration: none;
  border-radius: var(--radius-control);
}
.ar-ws-brand .ar-auth__brand-mark {
  width: var(--space-6);
  height: var(--space-6);
  display: block;
  flex: none;
}
.ar-ws-brand__name {
  font: var(--type-signal-wide);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}

.ar-ws-side__scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.ar-ws-nav__group {
  margin: var(--space-3) 0 var(--space-1);
  padding-inline: var(--space-3);
  font: var(--type-micro);
  letter-spacing: var(--tracking-signal);
  text-transform: uppercase;
  color: var(--text-tertiary);
}

.ar-ws-nav {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--border-width-bracket);
}

.ar-ws-nav__link {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-height: var(--space-10);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-control);
  color: var(--text-secondary);
  font: var(--type-body-s);
  text-decoration: none;
}
.ar-ws-nav__link:hover {
  color: var(--text-primary);
  background: var(--veil-on-cream);
}
.ar-ws-nav__link[aria-current='page'] {
  color: var(--text-primary);
  background: var(--bg-surface);
  box-shadow: inset 0 0 0 var(--border-width-hairline) var(--border-default);
  font-weight: var(--weight-medium);
}
.ar-ws-nav__link[aria-current='page'] .ar-ob-icon {
  color: var(--text-accent);
}
.ar-ws-nav__label {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ar-ws-nav__count {
  flex: none;
  min-width: var(--space-5);
  padding: 0 var(--space-1);
  border-radius: var(--radius-control);
  background: var(--caution-500);
  color: var(--on-state-fill);
  font: var(--type-micro);
  font-variant-numeric: tabular-nums;
  text-align: center;
  line-height: var(--space-5);
}

.ar-ws-side__foot {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding-top: var(--space-3);
  border-top: var(--border-width-hairline) solid var(--border-subtle);
}
.ar-ws-side__foot .ar-control {
  justify-content: flex-start;
  gap: var(--space-3);
}

/* Collapsed (laptop only): icons, the counts as dots, names on hover via title. */
@media (min-width: 1024px) {
  .ar-ws[data-collapsed='true'] .ar-ws-side {
    padding-inline: var(--space-2);
  }
  .ar-ws[data-collapsed='true'] .ar-ws-nav__label,
  .ar-ws[data-collapsed='true'] .ar-ws-brand__name,
  .ar-ws[data-collapsed='true'] .ar-ws-switch__text,
  .ar-ws[data-collapsed='true'] .ar-ws-switch__chev,
  .ar-ws[data-collapsed='true'] .ar-ws-nav__group {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
  .ar-ws[data-collapsed='true'] .ar-ws-nav__link,
  .ar-ws[data-collapsed='true'] .ar-ws-side__foot .ar-control,
  .ar-ws[data-collapsed='true'] .ar-ws-switch__btn,
  .ar-ws[data-collapsed='true'] .ar-ws-side__top {
    justify-content: center;
    padding-inline: 0;
  }
  .ar-ws[data-collapsed='true'] .ar-ws-nav__link {
    position: relative;
  }
  .ar-ws[data-collapsed='true'] .ar-ws-nav__link .ar-ws-nav__count {
    position: absolute;
    top: var(--space-1);
    right: var(--space-1);
    min-width: var(--space-2);
    height: var(--space-2);
    padding: 0;
    font-size: 0;
    line-height: 0;
  }
  .ar-ws[data-collapsed='true'] .ar-ws-side__foot .ar-ws-nav__count {
    display: none;
  }
}

/* ── the workspace switcher and the menus (<details>) ────────────────── */

.ar-ws-menu {
  position: relative;
}
.ar-ws-menu > summary {
  list-style: none;
  cursor: pointer;
}
.ar-ws-menu > summary::-webkit-details-marker {
  display: none;
}

.ar-ws-switch__btn {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-height: var(--space-12);
  padding: var(--space-2);
  border-radius: var(--radius-control);
  background: var(--bg-surface);
  box-shadow: inset 0 0 0 var(--border-width-hairline) var(--border-default);
}
.ar-ws-switch__btn:hover {
  box-shadow: inset 0 0 0 var(--border-width-hairline) var(--border-strong);
}
.ar-ws-switch__avatar,
.ar-ws-user__avatar {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--space-8);
  height: var(--space-8);
  border-radius: var(--radius-control);
  background: var(--ground-dark);
  color: var(--text-inverse);
  font: var(--type-signal);
  letter-spacing: 0;
}
.ar-ws-user__avatar {
  border-radius: var(--radius-full);
  background: var(--ground-sunken);
  color: var(--text-primary);
  box-shadow: inset 0 0 0 var(--border-width-hairline) var(--border-default);
}
.ar-ws-switch__text,
.ar-ws-user__text {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 1 1 auto;
  line-height: 1.25;
}
.ar-ws-switch__text b,
.ar-ws-user__text b {
  font: var(--type-body-s);
  font-weight: var(--weight-semibold);
  color: var(--text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ar-ws-switch__text small,
.ar-ws-user__text small {
  font: var(--type-caption);
  color: var(--text-tertiary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ar-ws-switch__chev,
.ar-ws-user__chev {
  color: var(--text-tertiary);
}

.ar-ws-menu__pop {
  position: absolute;
  z-index: var(--z-dropdown);
  top: calc(100% + var(--space-2));
  left: 0;
  min-width: 100%;
  width: max-content;
  max-width: min(20rem, calc(100vw - var(--space-8)));
  padding: var(--space-2);
  border-radius: var(--radius-box);
  background: var(--ground-raised);
  color: var(--text-primary);
  box-shadow:
    inset 0 0 0 var(--border-width-hairline) var(--border-default),
    var(--shadow-lg);
  animation: ar-ob-fade var(--duration-standard) var(--ease-standard);
}
.ar-ws-menu__pop--end {
  left: auto;
  right: 0;
}
.ar-ws-menu__label {
  margin: var(--space-1) var(--space-2) var(--space-2);
  font: var(--type-micro);
  letter-spacing: var(--tracking-signal);
  text-transform: uppercase;
  color: var(--text-tertiary);
  overflow: hidden;
  text-overflow: ellipsis;
}
.ar-ws-menu__list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.ar-ws-menu__item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  width: 100%;
  min-height: var(--space-10);
  padding: var(--space-2);
  border: 0;
  border-radius: var(--radius-control);
  background: none;
  color: var(--text-primary);
  font: var(--type-body-s);
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}
.ar-ws-menu__item small {
  margin-left: auto;
  padding-left: var(--space-4);
  font: var(--type-caption);
  color: var(--text-tertiary);
}
a.ar-ws-menu__item:hover,
.ar-ws-menu__item--button:hover {
  background: var(--veil-on-cream);
}
/* Exit action (brand rule, @armage/tokens --exit-*): a quiet red wash, the arrow steps out. */
.ar-ws-menu__item--signout {
  transition:
    color var(--exit-motion),
    background-color var(--exit-motion);
}
.ar-ws-menu__item--signout .ar-ob-icon {
  transition: transform var(--exit-motion);
}
.ar-ws-menu__item--signout:hover,
.ar-ws-menu__item--signout:focus-visible {
  background: color-mix(in srgb, var(--danger-on-cream) var(--exit-wash-mix), transparent);
  color: var(--danger-on-cream);
}
.ar-ws-menu__item--signout:hover .ar-ob-icon {
  transform: translateX(var(--exit-nudge));
}
@media (prefers-reduced-motion: reduce) {
  .ar-ws-menu__item--signout .ar-ob-icon {
    transition: none;
  }
  .ar-ws-menu__item--signout:hover .ar-ob-icon {
    transform: none;
  }
}
.ar-ws-menu__item--muted {
  color: var(--text-secondary);
  cursor: default;
}
.ar-ws-menu__gap {
  width: var(--space-4);
  flex: none;
}
.ar-ws-menu__item[aria-current='true'] .ar-ob-icon {
  color: var(--text-accent);
}
.ar-ws-menu__note {
  margin: var(--space-2);
  font: var(--type-caption);
  color: var(--text-tertiary);
}
.ar-ws-menu__form {
  margin: var(--space-1) 0 0;
  padding-top: var(--space-1);
  border-top: var(--border-width-hairline) solid var(--border-subtle);
}

/* ── the content column and the top bar ──────────────────────────────── */

.ar-ws-frame {
  min-width: 0;
  display: flex;
  flex-direction: column;
}

/* Where a jump to the Watch room's stage lands: under this bar (ADR 0121). */
.ar-ws-main {
  --ar-watch-stick: calc(var(--space-3) + var(--space-16));
}
.ar-ws-top {
  position: sticky;
  top: var(--space-3);
  z-index: var(--z-sticky);
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin: var(--space-3) var(--space-4) 0;
  padding: var(--space-2) var(--space-2) var(--space-2) var(--space-3);
  min-height: var(--space-16);
}

/* The glass takes the ink direction wherever the page is dark. */
[data-theme='console'] .ar-ws-top.ar-mat--glass {
  background: var(--chrome-ink-fill);
  color: var(--plate-ink-text);
  border-color: var(--plate-ink-edge);
}
@media (prefers-color-scheme: dark) {
  html:not([data-theme]) .ar-ws-top.ar-mat--glass {
    background: var(--chrome-ink-fill);
    color: var(--plate-ink-text);
    border-color: var(--plate-ink-edge);
  }
}
@media (max-width: 767px) {
  [data-theme='console'] .ar-ws-top.ar-mat--glass {
    background: var(--chrome-ink-fill-compact);
  }
}

.ar-ws-iconbtn {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--space-10);
  height: var(--space-10);
  padding: 0;
  border: 0;
  border-radius: var(--radius-control);
  background: none;
  color: var(--text-secondary);
  text-decoration: none;
  cursor: pointer;
}
.ar-ws-iconbtn:hover {
  color: var(--text-primary);
  background: var(--veil-on-cream);
}
.ar-ws-top__collapse {
  display: none;
}
@media (min-width: 1024px) {
  .ar-ws-top__menu {
    display: none;
  }
  .ar-ws-top__collapse:not([hidden]) {
    display: inline-flex;
  }
}

.ar-ws-crumbs {
  flex: 1 1 auto;
  min-width: 0;
}
.ar-ws-crumbs ol {
  list-style: none;
  margin: 0;
  padding: 0 var(--space-2);
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font: var(--type-body-s);
  color: var(--text-secondary);
  white-space: nowrap;
}
.ar-ws-crumbs li {
  display: inline-flex;
  align-items: center;
  min-width: 0;
}
.ar-ws-crumbs li:first-child {
  overflow: hidden;
}
.ar-ws-crumbs a {
  color: var(--text-secondary);
  text-decoration: none;
  overflow: hidden;
  text-overflow: ellipsis;
  border-radius: var(--radius-control);
}
.ar-ws-crumbs a:hover {
  color: var(--text-primary);
}
.ar-ws-crumbs [aria-current='page'] {
  color: var(--text-primary);
  font-weight: var(--weight-medium);
  overflow: hidden;
  text-overflow: ellipsis;
}

.ar-ws-top__end {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  flex: none;
}
.ar-ws-themes {
  display: inline-flex;
}
/* One icon: the look you can switch to (both when the OS decides; the script marks it). */
.ar-ws-theme[aria-current='true'] {
  display: none;
}
.ar-ws-top__help {
  gap: var(--space-2);
}
.ar-ws-user {
  margin-left: var(--space-1);
}
.ar-ws-user__btn {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-height: var(--space-10);
  padding: var(--space-1) var(--space-2) var(--space-1) var(--space-1);
  border-radius: var(--radius-control);
}
.ar-ws-user__btn:hover {
  background: var(--veil-on-cream);
}
.ar-ws-user__text {
  max-width: 12rem;
}

@media (max-width: 1279px) {
  .ar-ws-user__text {
    display: none;
  }
}
@media (max-width: 767px) {
  .ar-ws-top {
    margin-inline: var(--space-2);
    gap: var(--space-1);
  }
  .ar-ws-user__chev {
    display: none;
  }
  /* Help keeps its icon on a phone; the word goes to screen readers only. */
  .ar-ws-top__help-label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
  }
  .ar-ws-top__help {
    padding-inline: var(--space-2);
  }
}

/* ── the drawer (under 1024px) ───────────────────────────────────────── */

.ar-ws-side__close,
.ar-ws-scrim {
  display: none;
}

@media (max-width: 1023px) {
  .ar-ws-side {
    position: fixed;
    z-index: var(--z-modal);
    inset: 0 auto 0 0;
    width: min(20rem, calc(100vw - var(--space-12)));
    overflow: hidden;
    border-right: var(--border-width-hairline) solid var(--plate-cream-edge);
    background: var(--overlay-cream-fill-compact);
    box-shadow: var(--plate-highlight-light), var(--shadow-lg);
    /* Prefixed first, standard last: the minifier keeps only the last of the pair. */
    -webkit-backdrop-filter: blur(var(--plate-blur)) saturate(var(--plate-saturate));
    backdrop-filter: blur(var(--plate-blur)) saturate(var(--plate-saturate));
    transform: translateX(-104%);
    visibility: hidden;
    transition:
      transform var(--duration-standard) var(--ease-standard),
      visibility 0s linear var(--duration-standard);
  }
  [data-theme='console'] .ar-ws-side {
    background: var(--overlay-ink-fill-compact);
    border-right-color: var(--plate-ink-edge);
    box-shadow: var(--plate-highlight), var(--overlay-shadow);
  }
  .ar-ws-side:target,
  .ar-ws[data-open='true'] .ar-ws-side {
    transform: none;
    visibility: visible;
    transition: transform var(--duration-standard) var(--ease-entrance);
  }
  .ar-ws-side__close {
    display: inline-flex;
  }
  .ar-ws-side:target ~ .ar-ws-scrim,
  .ar-ws[data-open='true'] .ar-ws-scrim {
    display: block;
    position: fixed;
    inset: 0;
    z-index: var(--z-scrim);
    background: var(--veil-on-dark);
    animation: ar-ob-fade var(--duration-standard) var(--ease-standard);
  }
}
@media (max-width: 1023px) and (prefers-color-scheme: dark) {
  html:not([data-theme]) .ar-ws-side {
    background: var(--overlay-ink-fill-compact);
    border-right-color: var(--plate-ink-edge);
  }
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .ar-ws-side {
    background: var(--ground-raised);
  }
}

/* ── the page ────────────────────────────────────────────────────────── */

.ar-ws-main {
  flex: 1 1 auto;
  width: 100%;
  max-width: 76rem;
  padding: var(--space-8) var(--space-8) var(--space-16);
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}
@media (max-width: 767px) {
  .ar-ws-main {
    padding: var(--space-6) var(--space-4) var(--space-12);
    gap: var(--space-4);
  }
}

.ar-ws-notice {
  overflow-wrap: anywhere;
  margin: 0;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-control);
  box-shadow: inset 0 0 0 var(--border-width-hairline) var(--danger-500);
  color: var(--danger-on-cream);
  font: var(--type-body-s);
}
.ar-ws-notice[data-tone='ok'] {
  box-shadow: inset 0 0 0 var(--border-width-hairline) var(--signal-500);
  color: var(--signal-on-cream);
}

.ar-ws-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-4);
}
.ar-ws-head__text,
.ar-ws-head__actions {
  min-width: 0;
  max-width: 100%;
}
.ar-ws-head__title {
  overflow-wrap: anywhere;
  margin: 0;
  font: var(--type-title);
  letter-spacing: var(--tracking-title);
  color: var(--text-primary);
}
.ar-ws-head__sub {
  margin: var(--space-1) 0 0;
  font: var(--type-body);
  color: var(--text-secondary);
}
.ar-ws-head__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}
.ar-ws-head__actions form {
  margin: 0;
}
.ar-ws-head__actions .ar-control,
.ar-ws-empty .ar-control,
.ar-ws-card .ar-control {
  gap: var(--space-2);
}

.ar-ws-grid {
  display: grid;
  align-items: start;
  gap: var(--space-4);
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 1024px) {
  .ar-ws-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .ar-ws-card--wide {
    grid-column: 1 / -1;
  }
}

.ar-ws-card {
  min-width: 0;
  border-radius: var(--radius-box);
  background: var(--bg-surface);
  box-shadow: inset 0 0 0 var(--border-width-hairline) var(--border-subtle);
}
.ar-ws-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  border-bottom: var(--border-width-hairline) solid var(--border-subtle);
}
.ar-ws-card__title {
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font: var(--type-body-s);
  font-weight: var(--weight-semibold);
  color: var(--text-primary);
}
.ar-ws-card__title .ar-ob-icon {
  color: var(--text-tertiary);
}
.ar-ws-card__body {
  padding: var(--space-5);
  font: var(--type-body-s);
  color: var(--text-primary);
}
.ar-ws-card__body > :first-child {
  margin-top: 0;
}
.ar-ws-card__body > :last-child {
  margin-bottom: 0;
}

.ar-ws-dim {
  color: var(--text-secondary);
  font: var(--type-body-s);
}
.ar-ws-big {
  margin: 0 0 var(--space-1);
  font: var(--type-subtitle);
  color: var(--text-primary);
}
.ar-ws-fine {
  margin: 0;
  max-width: var(--measure-body);
  font: var(--type-caption);
  color: var(--text-tertiary);
}
.ar-ws-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font: var(--type-body-s);
}
.ar-ws-subhead {
  margin: var(--space-6) 0 var(--space-3);
  font: var(--type-body-s);
  font-weight: var(--weight-semibold);
}
.ar-ws-card code,
.ar-ws-code {
  font-family: var(--font-signal);
  font-size: 0.85em;
}

/* Tiles: real counts only. */
.ar-ws-tiles {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
@media (max-width: 767px) {
  .ar-ws-tiles {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-2);
  }
}
.ar-ws-tile {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radius-box);
  background: var(--bg-surface);
  box-shadow: inset 0 0 0 var(--border-width-hairline) var(--border-subtle);
  color: var(--text-primary);
  text-decoration: none;
}
a.ar-ws-tile:hover {
  box-shadow: inset 0 0 0 var(--border-width-hairline) var(--border-strong);
}
.ar-ws-tile__label {
  font: var(--type-micro);
  letter-spacing: var(--tracking-signal);
  text-transform: uppercase;
  color: var(--text-tertiary);
}
.ar-ws-tile__value {
  font: var(--type-display-m);
  letter-spacing: var(--tracking-display-m);
  font-variant-numeric: tabular-nums;
}
.ar-ws-tile__note {
  font: var(--type-caption);
  color: var(--text-secondary);
}
@media (max-width: 767px) {
  .ar-ws-tile {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: baseline;
    column-gap: var(--space-3);
  }
  .ar-ws-tile__value {
    order: -1;
    font: var(--type-title);
  }
}

/* The set-up rail. */
.ar-ws-rail {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-4);
  grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
}
.ar-ws-rail__step {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: var(--space-3);
  row-gap: var(--space-1);
  align-items: start;
}
.ar-ws-rail__dot {
  grid-row: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--space-5);
  height: var(--space-5);
  border-radius: var(--radius-full);
  box-shadow: inset 0 0 0 var(--border-width-bracket) var(--border-default);
  color: var(--on-state-fill);
}
.ar-ws-rail__step[data-state='done'] .ar-ws-rail__dot {
  background: var(--signal-500);
  box-shadow: none;
}
.ar-ws-rail__step[data-state='current'] .ar-ws-rail__dot {
  box-shadow: inset 0 0 0 var(--border-width-bracket) var(--caution-500);
}
.ar-ws-rail__step[data-state='current'] .ar-ws-rail__dot::after {
  content: '';
  width: var(--space-2);
  height: var(--space-2);
  border-radius: var(--radius-full);
  background: var(--caution-500);
}
.ar-ws-rail__label {
  font: var(--type-body-s);
  font-weight: var(--weight-medium);
}
.ar-ws-rail__step[data-state='todo'] .ar-ws-rail__label {
  color: var(--text-secondary);
}
.ar-ws-rail__note {
  grid-column: 2;
  font: var(--type-caption);
  color: var(--text-tertiary);
}

/* Lists inside cards. */
.ar-ws-checks,
.ar-ws-plain,
.ar-ws-mini {
  list-style: none;
  margin: var(--space-3) 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.ar-ws-checks li {
  display: flex;
  gap: var(--space-2);
  align-items: flex-start;
  color: var(--text-secondary);
}
.ar-ws-checks .ar-ob-icon {
  margin-top: var(--space-1);
  color: var(--text-accent);
}
.ar-ws-plain {
  margin: 0;
  gap: var(--space-1);
}
.ar-ws-mini li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}
.ar-ws-mini li > span:first-child {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ar-ws-steps {
  margin: 0 0 var(--space-4);
  padding-left: var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  color: var(--text-secondary);
}
.ar-ws-steps b {
  color: var(--text-primary);
  font-weight: var(--weight-semibold);
}

.ar-ws-facts {
  margin: 0;
  display: grid;
  gap: var(--space-3);
}
.ar-ws-facts > div {
  display: grid;
  grid-template-columns: minmax(8rem, 12rem) minmax(0, 1fr);
  gap: var(--space-3);
  align-items: baseline;
}
@media (max-width: 767px) {
  .ar-ws-facts > div {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-1);
  }
}
.ar-ws-facts dt {
  font: var(--type-micro);
  letter-spacing: var(--tracking-signal);
  text-transform: uppercase;
  color: var(--text-tertiary);
}
.ar-ws-facts dd {
  margin: 0;
  min-width: 0;
  overflow-wrap: anywhere;
}

/* The empty state. */
.ar-ws-empty {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-2);
  padding: var(--space-4) 0;
  max-width: var(--measure-body);
}
.ar-ws-empty__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--space-12);
  height: var(--space-12);
  margin-bottom: var(--space-2);
  border-radius: var(--radius-box);
  background: var(--ground-sunken);
  color: var(--text-secondary);
  box-shadow: inset 0 0 0 var(--border-width-hairline) var(--border-subtle);
}
.ar-ws-empty__title {
  margin: 0;
  font: var(--type-body);
  font-weight: var(--weight-semibold);
  color: var(--text-primary);
}
.ar-ws-empty__line {
  margin: 0 0 var(--space-2);
  color: var(--text-secondary);
}
.ar-ws-main > .ar-ws-empty {
  padding: var(--space-8);
  border-radius: var(--radius-box);
  background: var(--bg-surface);
  box-shadow: inset 0 0 0 var(--border-width-hairline) var(--border-subtle);
  max-width: none;
}

/* Tables. The wrap is the containing block of what is positioned inside
   it (a visually-hidden caption or label), so nothing in a scrolled table
   widens the page (ADR 0113). */
.ar-ws-table-wrap {
  position: relative;
  overflow-x: auto;
  margin-inline: calc(var(--space-5) * -1);
}
.ar-ws-table {
  width: 100%;
  border-collapse: collapse;
  font: var(--type-body-s);
}
.ar-ws-table th,
.ar-ws-table td {
  padding: var(--space-3) var(--space-5);
  text-align: left;
  vertical-align: middle;
  border-bottom: var(--border-width-hairline) solid var(--border-subtle);
}
.ar-ws-table tbody tr:last-child > * {
  border-bottom: 0;
}
.ar-ws-table thead th {
  padding-block: var(--space-2);
  font: var(--type-micro);
  letter-spacing: var(--tracking-signal);
  text-transform: uppercase;
  color: var(--text-tertiary);
  white-space: nowrap;
}
.ar-ws-table__title {
  font-weight: var(--weight-medium);
  color: var(--text-primary);
}
.ar-ws-table__title small {
  display: block;
  font: var(--type-caption);
  color: var(--text-tertiary);
}
.ar-ws-table__num {
  white-space: nowrap;
  color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
}
.ar-ws-table form {
  margin: 0;
}
/* A DNS value or a key breaks anywhere rather than run a table wide. */
.ar-ws-table--all code {
  word-break: break-all;
}
/* Phones: each row stacks (title, then status), the dates fold away. */
@media (max-width: 767px) {
  .ar-ws-table-wrap {
    overflow: visible;
  }
  .ar-ws-table thead {
    display: none;
  }
  .ar-ws-table tr {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-5);
    border-bottom: var(--border-width-hairline) solid var(--border-subtle);
  }
  .ar-ws-table tbody tr:last-child {
    border-bottom: 0;
  }
  .ar-ws-table th,
  .ar-ws-table td {
    padding: 0;
    border: 0;
  }
  .ar-ws-table th:nth-child(n + 3),
  .ar-ws-table td:nth-child(n + 3):not(:last-child) {
    display: none;
  }
  /* A kept last column with nothing in it shows nothing, not a dash. */
  .ar-ws-table__none {
    display: none;
  }
  /* ADR 0113: a stacked row is as wide as the screen, never its longest
     address: the table and its rows are blocks, and a URL, a key or a DNS
     value breaks anywhere inside its cell. */
  .ar-ws-table,
  .ar-ws-table tbody {
    display: block;
  }
  .ar-ws-table tr > * {
    max-width: 100%;
    overflow-wrap: anywhere;
  }
  .ar-ws-table code {
    word-break: break-all;
  }
  /* A table every column of which is needed on a phone (DNS records to add). */
  .ar-ws-table--all th:nth-child(n + 3),
  .ar-ws-table--all td:nth-child(n + 3):not(:last-child) {
    display: block;
  }
  .ar-ws-table--all td.ar-ws-table__none:nth-child(n + 3):not(:last-child) {
    display: none;
  }
}

/* Tabs (links: they work without script). */
.ar-ws-tabs ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}
.ar-ws-tabs__tab {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: var(--space-10);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-control);
  box-shadow: inset 0 0 0 var(--border-width-hairline) var(--border-default);
  color: var(--text-secondary);
  font: var(--type-body-s);
  text-decoration: none;
}
.ar-ws-tabs__tab:hover {
  color: var(--text-primary);
}
.ar-ws-tabs__tab[aria-current='page'] {
  background: var(--ground-dark);
  color: var(--text-inverse);
  box-shadow: none;
}
.ar-ws-tabs__n {
  font: var(--type-micro);
  font-variant-numeric: tabular-nums;
}

/* A tab row as one dropdown on a phone (ADR 0113): the same links. */
.ar-ws-filter {
  display: none;
}
.ar-ws-filter__btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 44px;
  padding: 0 var(--space-4);
  border-radius: var(--radius-control);
  box-shadow: inset 0 0 0 var(--border-width-hairline) var(--border-default);
  background: var(--ground-raised);
  color: var(--text-primary);
  font: var(--type-body-s);
}
.ar-ws-filter__n {
  font: var(--type-micro);
  font-variant-numeric: tabular-nums;
  color: var(--text-secondary);
}
.ar-ws-filter__pop {
  max-height: min(60dvh, 26rem);
  overflow-y: auto;
}
.ar-ws-filter .ar-ws-menu__item {
  justify-content: space-between;
  gap: var(--space-4);
}
.ar-ws-filter .ar-ws-menu__item[aria-current='page'] {
  font-weight: var(--weight-medium);
}
@media (max-width: 767px) {
  .ar-ws-tabs:has(+ .ar-ws-filter),
  .ar-dir__tabs:has(+ .ar-ws-filter) {
    display: none;
  }
  .ar-ws-filter {
    display: block;
  }
}
[data-theme='console'] .ar-ws-tabs__tab[aria-current='page'] {
  background: var(--text-primary);
  color: var(--bg-console);
}

/* Code. */
.ar-ws-code {
  margin: var(--space-3) 0 0;
  padding: var(--space-4);
  max-height: 22rem;
  overflow: auto;
  border-radius: var(--radius-control);
  background: var(--ground-sunken);
  box-shadow: inset 0 0 0 var(--border-width-hairline) var(--border-subtle);
  color: var(--text-primary);
  line-height: 1.6;
  white-space: pre;
}
/* A post's words, not code: they wrap to the box (ADR 0113). */
.ar-ws-code--text {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.ar-ws-reveal {
  margin-bottom: var(--space-4);
  padding: var(--space-4);
  border-radius: var(--radius-control);
  box-shadow: inset 0 0 0 var(--border-width-bracket) var(--signal-500);
}

/* Forms in cards. */
.ar-ws-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  max-width: 32rem;
}
.ar-ws-scopes {
  margin: 0;
  padding: 0;
  border: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.ar-ws-scope {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-height: var(--space-10);
}
.ar-ws-form .ar-control {
  align-self: flex-start;
  gap: var(--space-2);
}
/* Row actions: several one-button forms side by side (webhook endpoints). */
.ar-ws-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}
.ar-ws-actions form {
  margin: 0;
}

/* ── connections (ADR 0079) ─────────────────────────────────────────── */

.ar-ws-connect {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
  gap: var(--space-2);
  margin-block: var(--space-3);
}
.ar-ws-connect form,
.ar-ws-inline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  margin: 0;
}
.ar-ws-inline .ar-input {
  inline-size: auto;
  max-width: 100%;
}
.ar-ws-inline > * {
  min-width: 0;
  max-width: 100%;
}
.ar-ws-post {
  display: grid;
  gap: var(--space-3);
  padding-block: var(--space-4);
}
.ar-ws-post + .ar-ws-post {
  border-block-start: var(--border-width-hairline) solid var(--border-subtle);
}
.ar-ws-list {
  margin: 0;
  padding-inline-start: var(--space-4);
}

/* ── integrations ────────────────────────────────────────────────────── */

.ar-ws-legend {
  list-style: none;
  margin: 0;
  padding: var(--space-4) var(--space-5);
  display: grid;
  gap: var(--space-3) var(--space-6);
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  border-radius: var(--radius-box);
  background: var(--bg-surface);
  box-shadow: inset 0 0 0 var(--border-width-hairline) var(--border-subtle);
}
.ar-ws-legend li {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.ar-ws-status {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font: var(--type-micro);
  letter-spacing: var(--tracking-signal);
  text-transform: uppercase;
  color: var(--text-tertiary);
  white-space: nowrap;
}
.ar-ws-status::before {
  content: '';
  flex: none;
  width: var(--space-2);
  height: var(--space-2);
  border-radius: var(--radius-full);
  background: currentColor;
}
.ar-ws-status[data-status='available'] {
  color: var(--signal-on-cream);
}
.ar-ws-status[data-status='included'] {
  color: var(--info-on-cream);
}
.ar-ws-status[data-status='planned'] {
  color: var(--caution-on-cream);
}
[data-theme='console'] .ar-ws-status[data-status='available'] {
  color: var(--signal-on-dark);
}
[data-theme='console'] .ar-ws-status[data-status='included'] {
  color: var(--info-on-dark);
}
[data-theme='console'] .ar-ws-status[data-status='planned'] {
  color: var(--caution-on-dark);
}
@media (prefers-color-scheme: dark) {
  html:not([data-theme]) .ar-ws-status[data-status='available'] {
    color: var(--signal-on-dark);
  }
  html:not([data-theme]) .ar-ws-status[data-status='included'] {
    color: var(--info-on-dark);
  }
  html:not([data-theme]) .ar-ws-status[data-status='planned'] {
    color: var(--caution-on-dark);
  }
}

.ar-ws-int {
  display: grid;
  gap: var(--space-3);
}
.ar-ws-int__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-1) var(--space-4);
}
.ar-ws-int__title {
  margin: 0;
  font: var(--type-subtitle);
  color: var(--text-primary);
}
.ar-ws-int__head .ar-ws-dim {
  margin: 0;
}
.ar-ws-int__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-3);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr));
}
.ar-ws-int__item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-areas:
    'logo text'
    'logo status';
  column-gap: var(--space-4);
  row-gap: var(--space-2);
  align-items: start;
  padding: var(--space-4);
  border-radius: var(--radius-box);
  background: var(--bg-surface);
  box-shadow: inset 0 0 0 var(--border-width-hairline) var(--border-subtle);
}
.ar-ws-int__item .ar-ws-logo {
  grid-area: logo;
  width: var(--space-10);
  height: var(--space-10);
  color: var(--text-primary);
}
.ar-ws-int__text {
  grid-area: text;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  font: var(--type-body-s);
}
.ar-ws-int__text b {
  font-weight: var(--weight-semibold);
  color: var(--text-primary);
}
.ar-ws-int__text span {
  color: var(--text-secondary);
}
.ar-ws-int__item .ar-ws-status {
  grid-area: status;
}
.ar-ws-logo__svg {
  display: block;
}

@media (prefers-reduced-motion: reduce) {
  .ar-ws *,
  .ar-ws *::before,
  .ar-ws *::after {
    animation: none !important;
    transition: none !important;
  }
}

/* The switcher opens in place inside the sidebar (its scroll would clip a pop-over). */
.ar-ws-switch .ar-ws-menu__pop {
  position: static;
  width: auto;
  max-width: none;
  margin-top: var(--space-2);
  box-shadow: inset 0 0 0 var(--border-width-hairline) var(--border-default);
}
@media (min-width: 1024px) {
  .ar-ws[data-collapsed='true'] .ar-ws-switch .ar-ws-menu__pop {
    display: none;
  }
}

/* ── deciding (ADR 0062) ─────────────────────────────────────────────── */

.ar-ws-table__link,
.ar-ws-mini__link,
.ar-ws-queue__title {
  color: var(--text-primary);
  text-decoration: underline;
  text-decoration-color: var(--border-strong);
  text-underline-offset: 0.2em;
  border-radius: var(--radius-control);
}
.ar-ws-table__link:hover,
.ar-ws-mini__link:hover,
.ar-ws-queue__title:hover {
  text-decoration-color: currentColor;
}
.ar-ws-mini__link {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ar-ws-queue {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}
.ar-ws-queue__item {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-3) var(--space-6);
  padding: var(--space-4) 0;
  border-bottom: var(--border-width-hairline) solid var(--border-subtle);
}
.ar-ws-queue__item:first-child {
  padding-top: 0;
}
.ar-ws-queue__item:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}
.ar-ws-queue__item[data-highlight='true'] {
  box-shadow: inset var(--border-width-bracket) 0 0 var(--caution-500);
  padding-left: var(--space-3);
}
.ar-ws-queue__text {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  min-width: 0;
  flex: 1 1 18rem;
}
.ar-ws-queue__title {
  font: var(--type-body);
  font-weight: var(--weight-medium);
}

.ar-ws-decide {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: var(--space-2);
}
.ar-ws-decide form {
  margin: 0;
}
.ar-ws-decide .ar-control {
  gap: var(--space-2);
}
.ar-ws-decide__reject > summary {
  list-style: none;
  cursor: pointer;
}
.ar-ws-decide__reject > summary::-webkit-details-marker {
  display: none;
}
.ar-ws-decide__reject[open] {
  flex: 1 1 100%;
}
.ar-ws-decide__reject[open] > form {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin-top: var(--space-3);
  max-width: 34rem;
}
.ar-ws-decide__reject[open] > form .ar-control {
  align-self: flex-start;
}
.ar-ws-decide__mfa {
  flex: 1 1 100%;
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font: var(--type-caption);
  color: var(--text-secondary);
}
/* How an approved story publishes, above the owner's Publish now. */
.ar-ws-decide__how {
  flex: 1 1 100%;
  margin: 0;
}

/* Quick-pick reasons for sending a story back (ADR 0078's chips, as radios). */
.ar-ws-chips {
  margin: 0;
  padding: 0;
  border: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}
.ar-ws-chips > legend {
  margin-bottom: var(--space-2);
}
.ar-ws-chip {
  position: relative;
  display: inline-flex;
  cursor: pointer;
}
.ar-ws-chip input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}
.ar-ws-chip span {
  display: inline-flex;
  align-items: center;
  min-height: var(--space-10);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-control);
  box-shadow: inset 0 0 0 var(--border-width-hairline) var(--border-default);
  color: var(--text-secondary);
  font: var(--type-body-s);
}
.ar-ws-chip:hover span {
  color: var(--text-primary);
}
.ar-ws-chip input:checked + span {
  background: var(--ground-dark);
  color: var(--text-inverse);
  box-shadow: none;
}
[data-theme='console'] .ar-ws-chip input:checked + span {
  background: var(--text-primary);
  color: var(--bg-console);
}
.ar-ws-chip input:focus-visible + span {
  outline: var(--focus-ring-width) solid var(--focus-ring);
  outline-offset: var(--focus-ring-offset);
}

/* Pages of a long list: the count, Previous, Next. */
.ar-ws-pager {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-4);
}
.ar-ws-pager p {
  margin: 0 auto 0 0;
}

.ar-ws-lede {
  margin: 0 0 var(--space-4);
  font: var(--type-body-l);
  color: var(--text-primary);
  max-width: var(--measure-body);
}
.ar-ws-prose {
  max-width: var(--measure-body);
  font: var(--type-body);
  color: var(--text-primary);
}
.ar-ws-prose p {
  margin: 0 0 var(--space-4);
}
.ar-ws-prose h2,
.ar-ws-prose h3 {
  margin: var(--space-8) 0 var(--space-3);
  font: var(--type-subtitle);
  color: var(--text-primary);
  text-wrap: balance;
}
.ar-ws-prose h3 {
  font: var(--type-body-l);
  font-weight: var(--weight-medium);
}
.ar-ws-prose ul,
.ar-ws-prose ol {
  margin: 0 0 var(--space-4);
  padding-left: var(--space-6);
  display: grid;
  gap: var(--space-2);
}
.ar-ws-story__quote {
  margin: var(--space-6) 0;
  padding-left: var(--space-4);
  border-left: var(--border-width-hairline) solid var(--border-strong);
}
.ar-ws-story__quote blockquote {
  margin: 0;
}
.ar-ws-story__quote figcaption {
  font: var(--type-body-s);
  color: var(--text-secondary);
}
.ar-ws-story__callout {
  margin: var(--space-6) 0;
  padding: var(--space-4) var(--space-4);
  border: var(--border-width-hairline) solid var(--border-subtle);
  border-radius: var(--radius-box);
  background: var(--ground-raised);
}
.ar-ws-story__callout p:last-child {
  margin-bottom: 0;
}
.ar-ws-story__callout-title,
.ar-ws-story__links-title {
  margin: 0 0 var(--space-2);
  font: var(--type-micro);
  letter-spacing: var(--tracking-signal);
  text-transform: uppercase;
  color: var(--text-tertiary);
}
.ar-ws-story__links {
  margin-top: var(--space-8);
  padding-top: var(--space-4);
  border-top: var(--border-width-hairline) solid var(--border-subtle);
}
.ar-ws-prose a {
  color: var(--text-link);
}
.ar-ws-story__links ul {
  padding-left: 0;
  list-style: none;
}

/* Phones: the breadcrumb keeps only the page it names. */
@media (max-width: 767px) {
  .ar-ws-crumbs li:not(:last-child) {
    display: none;
  }
}

/* Covers (ADR 0066): a thumbnail beside every story in a list, the cover
   large on the story page. A neutral box stands in until there is one. */
.ar-ws-thumb {
  flex: 0 0 auto;
  display: block;
  width: 4rem;
  height: 2.5rem;
  object-fit: cover;
  border-radius: var(--radius-md);
  background: var(--bg-sunken);
  border: var(--border-width-hairline) solid var(--border-subtle);
}
.ar-ws-thumb--empty {
  background: repeating-linear-gradient(135deg, var(--bg-sunken) 0 6px, var(--bg-surface) 6px 12px);
}
.ar-ws-table__story,
.ar-ws-mini__story {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-width: 0;
}
.ar-ws-mini__story .ar-ws-thumb {
  width: 3rem;
  height: 1.875rem;
}
.ar-ws-cover {
  margin: 0 0 var(--space-4);
}
.ar-ws-cover img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1200 / 630;
  object-fit: cover;
  border-radius: var(--radius-md);
  background: var(--bg-sunken);
}
.ar-ws-cover figcaption {
  margin-top: var(--space-2);
  font: var(--type-caption);
}
.ar-ws-cover--empty {
  padding: var(--space-4);
  border: var(--border-width-hairline) dashed var(--border-default);
  border-radius: var(--radius-md);
}

/* Changing a cover (ADR 0068, amended): a new cover beside the current one,
   three choices under it; the upload folds open under the row. */
.ar-ws-cover-tools {
  display: grid;
  gap: var(--space-4);
  margin: 0 0 var(--space-5);
}
.ar-ws-cover-tools__row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: var(--space-2);
}
.ar-ws-cover-tools__row form {
  margin: 0;
}
.ar-ws-cover-upload > summary {
  list-style: none;
  cursor: pointer;
}
.ar-ws-cover-upload > summary::-webkit-details-marker {
  display: none;
}
.ar-ws-cover-upload[open] {
  flex: 1 1 100%;
}
.ar-ws-cover-upload[open] > form {
  display: grid;
  gap: var(--space-3);
  max-width: 34rem;
  margin-top: var(--space-3);
  padding: var(--space-4);
  border: var(--border-width-hairline) solid var(--border-default);
  border-radius: var(--radius-md);
  background: var(--bg-surface);
}
.ar-ws-cover-upload form .ar-field__hint,
.ar-ws-cover-upload form .ar-ws-dim {
  margin: 0;
}
.ar-ws-cover-upload form > .ar-control {
  justify-self: start;
}
.ar-ws-compare {
  display: grid;
  gap: var(--space-3);
  padding: var(--space-4);
  border: var(--border-width-hairline) solid var(--border-default);
  border-radius: var(--radius-md);
  background: var(--bg-surface);
}
.ar-ws-compare__title {
  margin: 0;
  font: var(--type-label);
  color: var(--text-primary);
}
.ar-ws-compare__pair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3);
}
.ar-ws-compare__fig {
  display: grid;
  gap: var(--space-2);
  margin: 0;
}
.ar-ws-compare__fig img,
.ar-ws-compare__none {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1200 / 630;
  object-fit: cover;
  border-radius: var(--radius-sm);
  background: var(--bg-sunken);
}
.ar-ws-compare__none {
  display: grid;
  place-items: center;
  font: var(--type-caption);
  color: var(--text-tertiary);
}
.ar-ws-compare__fig figcaption {
  font: var(--type-caption);
  color: var(--text-secondary);
}
.ar-ws-compare__fig--new img {
  outline: var(--border-width-bracket) solid var(--text-accent);
  outline-offset: calc(-1 * var(--border-width-bracket));
}
.ar-ws-compare__fig--new figcaption {
  color: var(--text-accent);
}
.ar-ws-compare > .ar-ws-dim {
  margin: 0;
}
.ar-ws-compare__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin: 0;
}
.ar-ws-compare__actions .ar-control {
  gap: var(--space-2);
}

/* ── integrations directory (owner 2026-10-14) ──────────────────────── */
/* The hero: what Distribution does beside a drifting band of the
   networks' own tiles; then one list, filtered by category and search. */

.ar-dir__hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-6);
  padding: var(--space-6);
  border-radius: var(--radius-box);
  background: var(--bg-surface);
  box-shadow: inset 0 0 0 var(--border-width-hairline) var(--border-subtle);
  overflow: hidden;
}
@media (min-width: 1024px) {
  .ar-dir__hero {
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    align-items: center;
    padding: var(--space-8);
  }
}
.ar-dir__hero-text {
  display: grid;
  gap: var(--space-3);
  align-content: start;
}
.ar-dir__hero-text > * {
  margin: 0;
}
.ar-dir__eyebrow {
  font: var(--type-signal-micro);
  letter-spacing: var(--tracking-signal);
  text-transform: uppercase;
  color: var(--text-tertiary);
}
.ar-dir__hero-title {
  font: var(--type-title);
  color: var(--text-primary);
  text-wrap: balance;
}
.ar-dir__hero-line {
  font: var(--type-body);
  color: var(--text-secondary);
  max-width: 34rem;
}
.ar-dir__stat {
  font: var(--type-body-s);
  color: var(--text-secondary);
}
.ar-dir__stat b {
  font: var(--type-headline);
  color: var(--text-primary);
  margin-inline-end: var(--space-1);
}
.ar-dir__hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4);
  padding-block-start: var(--space-2);
}

/* The band: two rows of tiles drifting in opposite directions, faded at
   both edges. The run is written twice, so -50% lands on a seam. */
.ar-dir__band {
  display: grid;
  gap: var(--space-3);
  padding-block: var(--space-4);
  border-radius: var(--radius-box);
  background: var(--bg-sunken);
  box-shadow: inset 0 0 0 var(--border-width-hairline) var(--border-subtle);
  overflow: hidden;
  -webkit-mask-image: linear-gradient(
    90deg,
    transparent,
    var(--ink-950) 12%,
    var(--ink-950) 88%,
    transparent
  );
  mask-image: linear-gradient(
    90deg,
    transparent,
    var(--ink-950) 12%,
    var(--ink-950) 88%,
    transparent
  );
}
.ar-dir__track {
  display: flex;
  gap: var(--space-3);
  width: max-content;
  list-style: none;
  margin: 0;
  padding: 0;
  animation: ar-dir-drift 48s linear infinite;
}
.ar-dir__track li {
  display: flex;
}
.ar-dir__track--back {
  animation-direction: reverse;
  animation-duration: 56s;
  padding-inline-start: var(--space-8);
}
@keyframes ar-dir-drift {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}

/* The directory: tabs and search on one bar, then the rows. */
.ar-dir {
  border-radius: var(--radius-box);
  background: var(--bg-surface);
  box-shadow: inset 0 0 0 var(--border-width-hairline) var(--border-subtle);
  overflow: hidden;
}
.ar-dir__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  border-block-end: var(--border-width-hairline) solid var(--border-subtle);
}
.ar-dir__tabs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  padding: var(--space-1);
  border-radius: var(--radius-control);
  background: var(--bg-sunken);
}
.ar-dir__tab {
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-control);
  font: var(--type-body-s);
  color: var(--text-secondary);
  text-decoration: none;
  transition: color var(--duration-fast) var(--ease-out);
}
.ar-dir__tab:hover {
  color: var(--text-primary);
}
.ar-dir__tab[aria-current='page'] {
  background: var(--bg-surface);
  color: var(--text-primary);
  box-shadow: var(--shadow-sm);
}
.ar-dir__search {
  position: relative;
  display: flex;
  align-items: center;
  margin: 0;
  flex: 1 1 16rem;
  max-width: 22rem;
}
@media (max-width: 767px) {
  .ar-dir__search {
    max-width: none;
  }
  .ar-dir__tile {
    align-self: start;
  }
}
.ar-dir__search-icon {
  position: absolute;
  inset-inline-start: var(--space-3);
  display: flex;
  color: var(--text-tertiary);
  pointer-events: none;
}
.ar-dir__search-icon svg {
  width: var(--space-4);
  height: var(--space-4);
}
.ar-dir__search .ar-input {
  width: 100%;
  padding-inline-start: var(--space-8);
}
.ar-dir__list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.ar-dir__row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-areas:
    'tile text'
    'tile side';
  gap: var(--space-2) var(--space-4);
  align-items: center;
  padding: var(--space-4) var(--space-5);
  transition: background-color var(--duration-fast) var(--ease-out);
}
.ar-dir__row + .ar-dir__row {
  border-block-start: var(--border-width-hairline) solid var(--border-subtle);
}
.ar-dir__row:hover {
  background: var(--bg-sunken);
}
@media (min-width: 768px) {
  .ar-dir__row {
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas: 'tile text side';
  }
}
.ar-dir__tile {
  grid-area: tile;
  display: flex;
}
.ar-dir__tile .ar-ws-logo {
  width: var(--space-10);
  height: var(--space-10);
  color: var(--text-primary);
}
.ar-dir__text {
  grid-area: text;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  font: var(--type-body-s);
  color: var(--text-secondary);
}
.ar-dir__text b {
  font-weight: var(--weight-semibold);
  color: var(--text-primary);
}
.ar-dir__side {
  grid-area: side;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  gap: var(--space-2) var(--space-3);
}
@media (min-width: 768px) {
  .ar-dir__side {
    justify-content: flex-end;
  }
}
.ar-dir__side form {
  margin: 0;
}
.ar-dir__who {
  font: var(--type-caption);
  color: var(--text-tertiary);
  max-width: 12rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* A fact under a network's name (ADR 0086): who, since, last post, a reason. */
.ar-dir__fact {
  font: var(--type-caption);
  color: var(--text-tertiary);
}
.ar-dir__fact[data-tone='warn'] {
  color: var(--caution-on-cream);
}
.ar-dir__ghost {
  background: transparent;
  box-shadow: none;
  color: var(--text-secondary);
}
.ar-dir__ghost:hover {
  color: var(--text-primary);
}
.ar-dir__pill {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-full);
  font: var(--type-caption);
  color: var(--text-secondary);
  box-shadow: inset 0 0 0 var(--border-width-hairline) var(--border-subtle);
  white-space: nowrap;
}
.ar-dir__pill::before {
  content: '';
  width: var(--space-2);
  height: var(--space-2);
  border-radius: var(--radius-full);
  background: currentColor;
}
.ar-dir__pill[data-tone='on'] {
  color: var(--signal-on-cream);
}
.ar-dir__pill[data-tone='info'] {
  color: var(--info-on-cream);
}
.ar-dir__pill[data-tone='warn'] {
  color: var(--caution-on-cream);
}
.ar-dir__pill[data-tone='muted'] {
  color: var(--text-tertiary);
}
[data-theme='console'] .ar-dir__pill[data-tone='on'] {
  color: var(--signal-on-dark);
}
[data-theme='console'] .ar-dir__pill[data-tone='info'] {
  color: var(--info-on-dark);
}
[data-theme='console'] .ar-dir__pill[data-tone='warn'] {
  color: var(--caution-on-dark);
}
@media (prefers-color-scheme: dark) {
  html:not([data-theme]) .ar-dir__pill[data-tone='on'] {
    color: var(--signal-on-dark);
  }
  html:not([data-theme]) .ar-dir__pill[data-tone='info'] {
    color: var(--info-on-dark);
  }
  html:not([data-theme]) .ar-dir__pill[data-tone='warn'] {
    color: var(--caution-on-dark);
  }
}
.ar-dir__none {
  margin: 0;
  padding: var(--space-6) var(--space-5);
  color: var(--text-secondary);
}

/* Connections: the account's tile beside its name, and one card per
   network to connect. */
.ar-ws-acct {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
}
.ar-ws-connect .ar-ws-connect__card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-2) var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-box);
  background: var(--bg-surface);
  box-shadow: inset 0 0 0 var(--border-width-hairline) var(--border-subtle);
  transition: box-shadow var(--duration-fast) var(--ease-out);
}
.ar-ws-connect .ar-ws-connect__card:hover {
  box-shadow: inset 0 0 0 var(--border-width-hairline) var(--border-strong);
}
.ar-ws-connect__card b {
  font: var(--type-body-s);
  font-weight: var(--weight-semibold);
  color: var(--text-primary);
}
.ar-ws-connect__card small {
  grid-column: 1 / -1;
}

/* ── Event intake (ADR 0087): the phone capture form and the session list ── */

.ar-ev-capture {
  display: grid;
  gap: var(--space-5);
  max-width: 40rem;
}

.ar-ev-capture .ar-chips {
  gap: var(--space-2);
}

/* Phone first: chips and switches are thumb-sized (48 px and up). */
.ar-ev-capture .ar-chip {
  min-height: 48px;
  padding: 0 var(--space-4);
  font: var(--type-body-s);
}

.ar-ev-chip__sub {
  margin-left: var(--space-2);
  color: inherit;
  opacity: 0.75;
}

.ar-ev-chip--now {
  border-color: var(--accent-primary);
  border-width: var(--border-width-bracket);
}

.ar-ev-switch {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-height: 48px;
  padding: var(--space-2) var(--space-3);
  border: var(--border-width-hairline) solid var(--border-default);
  border-radius: var(--radius-control);
  font: var(--type-body-s);
  cursor: pointer;
}

.ar-ev-switch input {
  width: 28px;
  height: 28px;
  margin: 0;
  accent-color: var(--accent-primary);
}

.ar-ev-switches {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: var(--space-3);
}

.ar-ev-pick {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 64px;
  width: 100%;
  font-size: 1.125rem;
}

.ar-ev-capture input[type='file'] {
  font-size: 16px;
  min-height: 48px;
}

.ar-ev-uploads {
  display: grid;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.ar-ev-upload {
  display: grid;
  gap: var(--space-1);
  padding: var(--space-3);
  border: var(--border-width-hairline) solid var(--border-subtle);
  border-radius: var(--radius-control);
  background: var(--bg-surface);
}

.ar-ev-upload__name {
  overflow-wrap: anywhere;
  font-weight: var(--weight-medium);
}

.ar-ev-upload__bar {
  width: 100%;
}

.ar-ev-upload__note {
  color: var(--text-secondary);
}

.ar-ev-upload[data-state='error'] .ar-ev-upload__note {
  color: var(--text-primary);
  font-weight: var(--weight-semibold);
}

.ar-ev-sessions {
  display: grid;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.ar-ev-session {
  display: grid;
  grid-template-columns: 7.5rem minmax(0, 1fr) auto;
  gap: var(--space-3);
  align-items: baseline;
  padding: var(--space-3);
  border: var(--border-width-hairline) solid var(--border-subtle);
  border-radius: var(--radius-control);
  overflow-wrap: anywhere;
}
.ar-ev-session > * {
  min-width: 0;
  max-width: 100%;
}

.ar-ev-session[data-now='true'] {
  border-color: var(--accent-primary);
  border-width: var(--border-width-bracket);
}

.ar-ev-session__time {
  font: var(--type-caption);
  color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
@media (max-width: 40rem) {
  .ar-ev-session__time {
    white-space: normal;
  }
}

.ar-ev-session__who {
  display: block;
  font: var(--type-caption);
  color: var(--text-secondary);
  overflow-wrap: anywhere;
}
/* An address (a page URL, a bucket key): breaks anywhere rather than widening its row. */
.ar-cs-addr,
.ar-ev-session__who a,
.ar-ev-session__who code {
  overflow-wrap: anywhere;
  word-break: break-all;
}

.ar-ev-session__count {
  font: var(--type-caption);
  color: var(--text-secondary);
  max-width: 100%;
}

@media (max-width: 40rem) {
  .ar-ev-session {
    grid-template-columns: 1fr auto;
  }

  .ar-ev-session__time {
    grid-column: 1 / -1;
  }

  /* The right-hand fact (a count, an access label) takes its own row under the
     body: beside the title it squeezed both into narrow columns (seen at 390 px). */
  .ar-ev-session__count {
    grid-column: 1 / -1;
  }
}

.ar-ev-clip {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-2);
  padding: var(--space-3) 0;
  border-top: var(--border-width-hairline) solid var(--border-subtle);
  min-width: 0;
}
.ar-ev-clip > * {
  min-width: 0;
  max-width: 100%;
  overflow-wrap: anywhere;
}

.ar-ev-clip__fields {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  align-items: end;
  min-width: 0;
}
.ar-ev-clip__fields > * {
  min-width: 0;
  max-width: 100%;
}

.ar-ev-clip__fields .ar-input {
  max-width: min(14rem, 100%);
}

.ar-ev-key {
  margin: 0;
  font: var(--type-caption);
  font-family: var(--font-signal);
  color: var(--text-tertiary);
  overflow-wrap: anywhere;
  word-break: break-all;
}

/* ── the next newsletter issue (ADR 0047 amendment 2026-10-15) ──────── */

/* The email in a sandboxed frame; the email paints its own paper. */
.ar-ws-mailframe {
  display: block;
  width: 100%;
  min-height: 32rem;
  height: 75vh;
  margin-top: var(--space-3);
  border: 0;
  border-radius: var(--radius-control);
  box-shadow: inset 0 0 0 var(--border-width-hairline) var(--border-subtle);
}
.ar-ws-mailtext {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
/* The candidate chosen before a two-step proof: offered again, first in view. */
.ar-ws-compare--chosen {
  border-color: var(--text-accent);
}

/* ── the console event page (ADR 0097): status strip, section nav, folds ── */

/* The page's folds, the strip and the nav, stacked. */
.ar-cs-event {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-3);
  min-width: 0;
}
.ar-cs-event > * {
  min-width: 0;
  max-width: 100%;
}

/* The strip under the page head: the event's state as pills, one next step
   at the end of the first row (the pills wrap under it on a narrower screen). */
.ar-cs-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: var(--space-2);
  margin: 0;
}
.ar-cs-strip__pills {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  min-width: 0;
  flex: 1 1 0;
}
.ar-cs-strip__action {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  flex: 0 1 auto;
  min-width: 0;
  max-width: 100%;
  margin-left: auto;
}
.ar-cs-strip__action form {
  margin: 0;
}
@media (max-width: 767px) {
  /* One row that scrolls sideways; the next step stays on its own line. */
  .ar-cs-strip__pills {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    margin-inline: calc(-1 * var(--space-4));
    padding-inline: var(--space-4);
    flex-basis: 100%;
  }
  .ar-cs-strip__pills::-webkit-scrollbar {
    display: none;
  }
}
.ar-cs-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: var(--space-8);
  padding: 0 var(--space-3);
  border-radius: var(--radius-full);
  box-shadow: inset 0 0 0 var(--border-width-hairline) var(--border-subtle);
  font: var(--type-caption);
  color: var(--text-secondary);
  text-decoration: none;
  white-space: nowrap;
  flex: none;
}
.ar-cs-pill:hover {
  box-shadow: inset 0 0 0 var(--border-width-hairline) var(--border-strong);
  color: var(--text-primary);
}
.ar-cs-pill::before {
  content: '';
  flex: none;
  width: var(--space-2);
  height: var(--space-2);
  border-radius: var(--radius-full);
  background: currentColor;
  opacity: var(--opacity-ghost);
}
.ar-cs-pill__k {
  color: var(--text-tertiary);
}
.ar-cs-pill__v {
  color: inherit;
  font-weight: var(--weight-medium);
}
.ar-cs-pill[data-tone='on'] {
  color: var(--signal-on-cream);
}
.ar-cs-pill[data-tone='info'] {
  color: var(--info-on-cream);
}
.ar-cs-pill[data-tone='warn'] {
  color: var(--caution-on-cream);
}
.ar-cs-pill[data-tone='on']::before,
.ar-cs-pill[data-tone='info']::before,
.ar-cs-pill[data-tone='warn']::before {
  opacity: var(--opacity-full);
}
[data-theme='console'] .ar-cs-pill[data-tone='on'] {
  color: var(--signal-on-dark);
}
[data-theme='console'] .ar-cs-pill[data-tone='info'] {
  color: var(--info-on-dark);
}
[data-theme='console'] .ar-cs-pill[data-tone='warn'] {
  color: var(--caution-on-dark);
}
@media (prefers-color-scheme: dark) {
  html:not([data-theme]) .ar-cs-pill[data-tone='on'] {
    color: var(--signal-on-dark);
  }
  html:not([data-theme]) .ar-cs-pill[data-tone='info'] {
    color: var(--info-on-dark);
  }
  html:not([data-theme]) .ar-cs-pill[data-tone='warn'] {
    color: var(--caution-on-dark);
  }
}
@media (max-width: 767px) {
  .ar-cs-pill {
    min-height: var(--space-10);
  }
}

/* The section nav: jump links in one row, sticky, scrolling sideways. */
.ar-cs-secnav {
  min-width: 0;
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
  margin: 0 calc(-1 * var(--space-2));
  padding: var(--space-2);
  background: var(--ground-default);
}
.ar-cs-secnav__list {
  display: flex;
  gap: var(--space-1);
  margin: 0;
  padding: 0;
  list-style: none;
  overflow-x: auto;
  scrollbar-width: none;
  border-bottom: var(--border-width-hairline) solid var(--border-subtle);
}
.ar-cs-secnav__list::-webkit-scrollbar {
  display: none;
}
.ar-cs-secnav__link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: var(--space-10);
  padding: 0 var(--space-3);
  font: var(--type-signal);
  letter-spacing: var(--tracking-signal);
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--text-secondary);
  text-decoration: none;
  border-bottom: var(--border-width-bracket) solid transparent;
}
.ar-cs-secnav__link:hover {
  color: var(--text-primary);
}
.ar-cs-secnav__count {
  min-width: var(--space-5);
  padding: 0 var(--space-1);
  border: var(--border-width-hairline) solid var(--border-default);
  border-radius: var(--radius-full);
  background: var(--ground-raised);
  text-align: center;
  font: var(--type-signal-micro);
}
.ar-cs-secnav__count[data-tone='warn'] {
  color: var(--caution-on-cream);
  border-color: currentColor;
}
[data-theme='console'] .ar-cs-secnav__count[data-tone='warn'] {
  color: var(--caution-on-dark);
}

/* A folding card: the summary is the card's head, 48 px tall at least. */
.ar-ws-fold > summary {
  list-style: none;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-height: var(--space-12);
  padding: var(--space-2) var(--space-5);
  cursor: pointer;
  color: var(--text-primary);
}
.ar-ws-fold > summary::-webkit-details-marker {
  display: none;
}
.ar-ws-fold[open] > summary {
  border-bottom: var(--border-width-hairline) solid var(--border-subtle);
}
.ar-ws-fold__title {
  flex: 1 1 auto;
  min-width: 0;
  /* A heading (the page's outline, ADR 0113) that looks like the fold's label. */
  margin: 0;
  font: var(--type-body-s);
  font-weight: var(--weight-semibold);
}
.ar-ws-fold__meta {
  flex: 0 1 auto;
  min-width: 0;
  font: var(--type-caption);
  color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
  text-align: end;
}
.ar-ws-fold__meta[data-tone='warn'] {
  color: var(--caution-on-cream);
}
.ar-ws-fold__meta[data-tone='on'] {
  color: var(--signal-on-cream);
}
[data-theme='console'] .ar-ws-fold__meta[data-tone='warn'] {
  color: var(--caution-on-dark);
}
[data-theme='console'] .ar-ws-fold__meta[data-tone='on'] {
  color: var(--signal-on-dark);
}
.ar-ws-fold__chev {
  flex: none;
  color: var(--text-tertiary);
  transition: transform var(--duration-fast) var(--ease-out);
}
.ar-ws-fold[open] > summary .ar-ws-fold__chev {
  transform: rotate(180deg);
}
.ar-ws-fold__body {
  padding: var(--space-5);
  display: grid;
  gap: var(--space-3);
}
.ar-ws-fold__body > * {
  margin: 0;
  min-width: 0;
  max-width: 100%;
}
.ar-ws-fold__body {
  grid-template-columns: minmax(0, 1fr);
  overflow-wrap: anywhere;
}
@media (max-width: 767px) {
  .ar-ws-fold > summary {
    padding-inline: var(--space-4);
  }
  .ar-ws-fold__body {
    padding: var(--space-4);
  }
}
/* The preview fold holds the client's view, which lays itself out. */
.ar-ws-fold--preview .ar-ws-fold__body {
  display: block;
}

/* A row of day tabs with the time zone at its end. */
.ar-cs-days {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2) var(--space-4);
}
.ar-cs-days .ar-console-tabs {
  min-width: 0;
  max-width: 100%;
  border-bottom: 0;
}
.ar-cs-days__tz {
  font: var(--type-caption);
  color: var(--text-tertiary);
  white-space: nowrap;
}

/* A group inside a fold (the proposals of one recording): a plain details row. */
.ar-cs-group > summary {
  list-style: none;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-height: var(--space-10);
  cursor: pointer;
  font: var(--type-body-s);
  font-weight: var(--weight-semibold);
  color: var(--text-primary);
}
.ar-cs-group > summary::-webkit-details-marker {
  display: none;
}
.ar-cs-group > summary::after {
  content: '';
  width: var(--space-2);
  height: var(--space-2);
  border-right: var(--border-width-hairline) solid currentColor;
  border-bottom: var(--border-width-hairline) solid currentColor;
  transform: rotate(-45deg);
  color: var(--text-tertiary);
}
.ar-cs-group[open] > summary::after {
  transform: rotate(45deg);
}
.ar-cs-group__count {
  font: var(--type-caption);
  font-weight: var(--weight-regular);
  color: var(--text-secondary);
}
.ar-cs-group + .ar-cs-group {
  border-top: var(--border-width-hairline) solid var(--border-subtle);
}
/* Questions people asked (ADR 0105 §4): the answer given and its moments under each question. */
.ar-cs-asked__answer {
  margin: 0;
  font: var(--type-body-s);
  line-height: 1.6;
  color: var(--text-primary);
  overflow-wrap: anywhere;
}
.ar-cs-asked__cites {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-3);
  font: var(--type-caption);
  color: var(--text-secondary);
}
.ar-cs-person > summary {
  cursor: pointer;
  min-height: var(--space-10);
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2);
  min-width: 0;
  overflow-wrap: anywhere;
}
.ar-cs-person > summary > * {
  min-width: 0;
}

/* The publish screen (ADR 0098): what becomes public, as a plain list. */
.ar-cs-publish {
  display: grid;
  gap: var(--space-4);
}
.ar-cs-publish__list {
  margin: 0;
  padding-left: var(--space-5);
  display: grid;
  gap: var(--space-2);
  font: var(--type-body-s);
  color: var(--text-primary);
}
.ar-cs-publish__names {
  color: var(--text-secondary);
}

/* A short form in a fold: its rows stacked. */
.ar-cs-form {
  display: grid;
  gap: var(--space-3);
  margin: 0;
}
.ar-cs-form .ar-ws-help {
  margin: 0;
}

/* One line of controls: a select and its button. */
.ar-cs-line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  margin: 0;
}
.ar-cs-line .ar-input {
  inline-size: auto;
  max-width: 100%;
}
.ar-cs-line > * {
  min-width: 0;
  max-width: 100%;
}
.ar-cs-line .ar-field__label {
  font: var(--type-body-s);
}

/* How it works: the explanation, folded, at the end of a card. */
.ar-ws-help > summary {
  list-style: none;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: var(--space-8);
  cursor: pointer;
  font: var(--type-caption);
  color: var(--text-secondary);
}
.ar-ws-help > summary::-webkit-details-marker {
  display: none;
}
.ar-ws-help > summary::before {
  content: '';
  width: var(--space-2);
  height: var(--space-2);
  border-right: var(--border-width-hairline) solid currentColor;
  border-bottom: var(--border-width-hairline) solid currentColor;
  transform: rotate(-45deg);
  transition: transform var(--duration-fast) var(--ease-out);
}
.ar-ws-help[open] > summary::before {
  transform: rotate(45deg);
}
.ar-ws-help > summary:hover {
  color: var(--text-primary);
}
.ar-ws-help__body {
  display: grid;
  gap: var(--space-2);
  margin-top: var(--space-2);
  max-width: var(--measure-body);
  font: var(--type-caption);
  color: var(--text-secondary);
}
.ar-ws-help__body p {
  margin: 0;
}
/* A command a recording still needs (ADR 0090) wraps instead of widening the page. */
.ar-ws-fold__body pre {
  max-width: 100%;
  overflow-x: auto;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
@media (prefers-reduced-motion: reduce) {
  .ar-ws-fold__chev,
  .ar-ws-help > summary::before {
    transition: none;
  }
}

/* Terms to review (ADR 0099): the sample line with the word marked. */
.ar-cs-term__sample {
  display: block;
  font: var(--type-body-s);
  color: var(--text-secondary);
}
.ar-cs-term__sample mark {
  background: transparent;
  color: var(--caution-on-cream);
  font-weight: var(--weight-semibold);
  text-decoration: underline;
  text-decoration-style: wavy;
  text-underline-offset: 0.15em;
  padding: 0 0.1em;
}
[data-theme='console'] .ar-cs-term__sample mark {
  color: var(--caution-on-dark);
}

/* ADR 0113: a bare file picker keeps to its column (its own width is wider
   than a 320 px phone). */
:is(.ar-ws, .ar-ws-frame) input[type='file'] {
  max-width: 100%;
}

/* ADR 0113: touch targets (shared shell). A touch screen at any width (a
   phone, a tablet either way up) gets 44 px targets on the console's and the
   workspace's shell and controls; a mouse keeps the denser desktop sizes.
   The page-specific rules sit beside their pages. */
@media (pointer: coarse) {
  .ar-ws-iconbtn {
    min-width: 44px;
    min-height: 44px;
  }
  .ar-ws-user__btn,
  .ar-ws-menu__item,
  .ar-ws-nav__link,
  :is(.ar-ws, .ar-ws-frame) .ar-control,
  :is(.ar-ws, .ar-ws-frame) .ar-control.ar-size--sm,
  :is(.ar-ws, .ar-ws-frame) .ar-input,
  :is(.ar-ws, .ar-ws-frame) select,
  :is(.ar-ws, .ar-ws-frame) summary {
    min-height: 44px;
  }
  :is(.ar-ws, .ar-ws-frame) .ar-control.ar-size--sm {
    align-items: center;
  }
}

/* ADR 0113: touch targets (client workspace pages). The page content of
   app.arm-age.com (not the console, whose own rules sit in auth.css) on a touch screen: stand-alone links, choices and rows
   are 44 px; a link inside a sentence stays in its line (WCAG 2.5.8's
   inline exception). */
@media (pointer: coarse) {
  .ar-ws-top__help {
    min-width: 44px;
    justify-content: center;
  }
  .ar-ws-brand,
  .ar-ws-crumbs a,
  body:not([data-page='console']) .ar-ws-main a.ar-link,
  body:not([data-page='console']) .ar-ws-main .ar-ws-link,
  .ar-ws-mini__link,
  .ar-ws-queue__title,
  .ar-ws-tabs__tab,
  .ar-dir__tab,
  .ar-ws-scope,
  .ar-ws-chip,
  body:not([data-page='console']) .ar-ws-main .ar-check {
    min-height: 44px;
  }
  .ar-ws-crumbs a,
  body:not([data-page='console']) .ar-ws-main a.ar-link,
  body:not([data-page='console']) .ar-ws-main .ar-ws-link,
  .ar-dir__tab {
    display: inline-flex;
    align-items: center;
  }
  body:not([data-page='console']) .ar-ws-main a.ar-link,
  body:not([data-page='console']) .ar-ws-main .ar-ws-link {
    min-width: 44px;
    justify-content: center;
  }
  .ar-ws-mini__link,
  .ar-ws-queue__title {
    display: flex;
    align-items: center;
  }
  .ar-ws-crumbs a,
  .ar-dir__tab {
    min-width: 44px;
    justify-content: center;
  }
  .ar-ws-scope,
  .ar-ws-chip {
    display: flex;
    align-items: center;
  }
  body:not([data-page='console']) .ar-ws-main p.ar-ws-dim > .ar-ws-link,
  body:not([data-page='console']) .ar-ws-main .ar-ws-dim > a.ar-link,
  body:not([data-page='console']) .ar-ws-main span.ar-ws-dim > .ar-ws-link {
    display: inline;
    min-height: 0;
    min-width: 0;
  }
}

/* ── ADR 0115: one way to decide ──────────────────────────────────────────
   The decision bar (where it stands, one action, the rest folded, one
   sentence), the inline confirmation, and the bulk bar over a list to review.
   Shared by the console and the workspace (packages/portal/src/decide.ts). */
.ar-decide {
  display: grid;
  gap: var(--space-2);
  min-width: 0;
  max-width: 100%;
}
.ar-decide__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  min-width: 0;
}
.ar-decide__bar > form {
  margin: 0;
  display: inline-flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  max-width: 100%;
}
.ar-decide .ar-control {
  gap: var(--space-2);
}
.ar-decide__state {
  cursor: default;
}
.ar-cs-pill[data-tone='danger'] {
  color: var(--danger-on-cream);
}
.ar-cs-pill[data-tone='danger']::before {
  opacity: var(--opacity-full);
}
[data-theme='console'] .ar-cs-pill[data-tone='danger'] {
  color: var(--danger-on-dark);
}
@media (prefers-color-scheme: dark) {
  html:not([data-theme]) .ar-cs-pill[data-tone='danger'] {
    color: var(--danger-on-dark);
  }
}
.ar-decide__fold,
.ar-confirm {
  min-width: 0;
  max-width: 100%;
}
.ar-decide__fold > summary,
.ar-confirm > summary {
  list-style: none;
  cursor: pointer;
}
.ar-decide__fold > summary::-webkit-details-marker,
.ar-confirm > summary::-webkit-details-marker {
  display: none;
}
.ar-decide__chev {
  transition: transform var(--duration-fast) var(--ease-standard);
}
.ar-decide__fold[open] > summary .ar-decide__chev {
  transform: rotate(180deg);
}
@media (prefers-reduced-motion: reduce) {
  .ar-decide__chev {
    transition: none;
  }
}
/* An open fold takes its own line at the end of the bar, under the buttons. */
.ar-decide__bar > .ar-decide__fold[open],
.ar-decide__bar > .ar-confirm[open] {
  flex: 1 1 100%;
  order: 10;
}
.ar-decide__panel,
.ar-confirm__panel {
  display: grid;
  gap: var(--space-3);
  min-width: 0;
  max-width: 40rem;
  margin: var(--space-2) 0 0;
  padding: var(--space-3);
  border-radius: var(--radius-box);
  box-shadow: inset 0 0 0 var(--border-width-hairline) var(--border-subtle);
}
.ar-decide__panel > form {
  margin: 0;
  display: grid;
  gap: var(--space-3);
  min-width: 0;
}
/* A field and its button on one line where there is room. */
.ar-decide__row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--space-2);
  min-width: 0;
}
.ar-decide__row > .ar-field {
  flex: 1 1 12rem;
  min-width: 0;
  margin: 0;
}
.ar-decide__fields {
  display: grid;
  gap: var(--space-3);
  min-width: 0;
}
.ar-decide__fields .ar-field {
  margin: 0;
}
.ar-decide__note {
  margin: 0;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font: var(--type-caption);
  color: var(--text-secondary);
  overflow-wrap: anywhere;
}
.ar-decide__note[data-tone='warn'],
.ar-confirm__mark {
  color: var(--danger-on-cream);
}
[data-theme='console'] .ar-decide__note[data-tone='warn'],
[data-theme='console'] .ar-confirm__mark {
  color: var(--danger-on-dark);
}
@media (prefers-color-scheme: dark) {
  html:not([data-theme]) .ar-decide__note[data-tone='warn'],
  html:not([data-theme]) .ar-confirm__mark {
    color: var(--danger-on-dark);
  }
}
.ar-confirm {
  display: inline-block;
}
.ar-confirm[open] {
  display: block;
  flex: 1 1 100%;
}
.ar-confirm[data-tone='danger'] .ar-confirm__panel {
  box-shadow: inset 0 0 0 var(--border-width-hairline) var(--border-default);
  border-left: var(--space-1) solid var(--danger-on-cream);
}
[data-theme='console'] .ar-confirm[data-tone='danger'] .ar-confirm__panel {
  border-left-color: var(--danger-on-dark);
}
@media (prefers-color-scheme: dark) {
  html:not([data-theme]) .ar-confirm[data-tone='danger'] .ar-confirm__panel {
    border-left-color: var(--danger-on-dark);
  }
}
.ar-confirm__line {
  margin: 0;
  font: var(--type-body-s);
  overflow-wrap: anywhere;
}
.ar-confirm__mark {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-weight: var(--weight-semibold);
}
.ar-confirm__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

/* The bulk bar over a list to review. */
.ar-bulk {
  margin: 0 0 var(--space-3);
  display: grid;
  gap: var(--space-2);
  min-width: 0;
}
.ar-bulk__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  min-width: 0;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-box);
  box-shadow: inset 0 0 0 var(--border-width-hairline) var(--border-subtle);
}
.ar-bulk__bar .ar-input {
  width: auto;
  max-width: 100%;
  min-height: var(--space-10);
  padding: var(--space-2) var(--space-3);
  font: var(--type-body-s);
}
.ar-bulk__count {
  font: var(--type-caption);
  color: var(--text-secondary);
  margin-right: auto;
}
.ar-bulk__acts {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  min-width: 0;
}
.ar-bulk__keys {
  margin: 0;
  font: var(--type-caption);
  color: var(--text-secondary);
}
.ar-bulk__all,
.ar-bulk__pick {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  cursor: pointer;
}
.ar-bulk__pick {
  justify-content: center;
  min-width: var(--space-6);
  min-height: var(--space-6);
}
/* A row to review: the tick, the row, its actions (the same row as the events lists). */
.ar-ev-session.ar-review__row {
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: start;
}
.ar-review__body {
  display: grid;
  gap: var(--space-1);
  min-width: 0;
}
.ar-review__acts {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: flex-start;
  gap: var(--space-2);
  min-width: 0;
}
.ar-review__acts > form {
  margin: 0;
}
.ar-review__row[data-picked='true'] {
  background: var(--veil-on-cream);
}
[data-theme='console'] .ar-review__row[data-picked='true'] {
  background: var(--veil-on-dark);
}
.ar-review__row:focus-visible {
  outline: var(--focus-ring-width) solid var(--focus-ring-color);
  outline-offset: var(--focus-ring-offset);
}
@media (max-width: 767px) {
  .ar-ev-session.ar-review__row {
    grid-template-columns: auto minmax(0, 1fr);
  }
  .ar-review__acts {
    grid-column: 1 / -1;
    justify-content: flex-start;
  }
}
@media (pointer: coarse) {
  .ar-bulk__keys:not([hidden]) {
    display: none;
  }
  :is(.ar-ws, .ar-ws-frame) .ar-bulk__pick,
  :is(.ar-ws, .ar-ws-frame) .ar-bulk__all {
    min-width: 44px;
    min-height: 44px;
  }
}
.ar-review__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-1) var(--space-3);
  min-width: 0;
}
.ar-review__time {
  color: var(--text-link);
  font: var(--type-signal-micro);
  letter-spacing: var(--tracking-signal);
  white-space: nowrap;
}
.ar-review__why > summary {
  cursor: pointer;
  width: max-content;
  max-width: 100%;
  font: var(--type-caption);
  color: var(--text-secondary);
}
.ar-review__why > p {
  margin: var(--space-1) 0 0;
}
@media (pointer: coarse) {
  :is(.ar-ws, .ar-ws-frame) .ar-review__time {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
}
@media (pointer: coarse) {
  :is(.ar-ws, .ar-ws-frame) .ar-review__why > summary {
    display: flex;
    align-items: center;
    min-width: 44px;
  }
}
@media (pointer: coarse) {
  :is(.ar-ws, .ar-ws-frame) .ar-bulk__bar .ar-input {
    min-height: 44px;
  }
  :is(.ar-ws, .ar-ws-frame) .ar-cs-asked__cites a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
}
/* A row's confirmation, open, takes the row's full width under it (ADR 0115). */
.ar-ev-session > :has(> .ar-confirm[open]) {
  grid-column: 1 / -1;
}
@media (pointer: coarse) {
  :is(.ar-ws, .ar-ws-frame) a.ar-cs-addr {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
}

/*
 * The console's Shorts fold (ADR 0119): a strip of chips, a dropdown, five
 * small folds, the phone-sized preview in the one player, the frame grid and
 * its check. Tokens only; every control 44 px on a touch screen.
 */
.ar-shorts__chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
}
.ar-shorts__pick {
  margin-bottom: var(--space-3);
}
.ar-shorts__pick .ar-input {
  min-width: 0;
  flex: 1 1 16rem;
}
.ar-shorts__title {
  margin: 0 0 var(--space-2);
  font-weight: var(--weight-semibold);
}
.ar-shorts__step {
  border-top: var(--border-width-hairline) solid var(--border-subtle);
}
.ar-shorts__step-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  min-height: 44px;
  cursor: pointer;
}
.ar-shorts__step-title {
  font-weight: var(--weight-medium);
}
.ar-shorts__step-meta {
  font: var(--type-caption);
  color: var(--text-tertiary);
}
.ar-shorts__step-body {
  display: grid;
  gap: var(--space-3);
  padding-bottom: var(--space-4);
}
.ar-shorts__phone {
  width: min(16rem, 100%);
}
.ar-shorts__frames {
  display: block;
  max-width: 40rem;
}
.ar-shorts__frames img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius-sm);
  background: var(--ground-sunken);
}
.ar-shorts__check,
.ar-shorts__captions,
.ar-shorts__schedule {
  display: grid;
  gap: var(--space-2);
  align-items: start;
}
.ar-shorts__check .ar-check,
.ar-shorts__platform .ar-check {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 44px;
}
.ar-shorts__caption > summary {
  min-height: 44px;
  display: flex;
  align-items: center;
  cursor: pointer;
}
.ar-shorts__caption textarea {
  width: 100%;
  box-sizing: border-box;
}
.ar-shorts__platforms {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-1);
}
.ar-shorts__platform {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  min-height: 44px;
}
.ar-shorts__connect {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}
.ar-shorts__state {
  font: var(--type-caption);
  color: var(--text-secondary);
}
.ar-shorts__done {
  margin: 0;
}
.ar-shorts__crop {
  flex-wrap: wrap;
}
.ar-shorts__range {
  flex: 1 1 10rem;
  min-height: 44px;
}

/* The Shorts fold's Faculty: handles for @mentions and each person's share kit (ADR 0119 §8). */
.ar-shorts__people {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-4);
}
.ar-shorts__person {
  display: grid;
  gap: var(--space-2);
  padding-top: var(--space-3);
  border-top: var(--border-width-hairline) solid var(--border-subtle);
}
.ar-shorts__handles {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  align-items: center;
}
.ar-shorts__handle {
  flex: 1 1 9rem;
  min-width: 0;
}
.ar-shorts__handle .ar-input {
  width: 100%;
  box-sizing: border-box;
}
.ar-shorts__kit {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  align-items: center;
}

/*
 * The one player (ADR 0118): the look of every video a viewer can press play
 * on — the Watch room's stage on every door, the clip viewer, a story's
 * video — over the markup of player.ts and the script of
 * client/player-core.ts. The picture, the line, the deck, the states and
 * fullscreen; a surface adds only its own frame around it (events.css: the
 * stage's place in the room; the dialog of a clip). The
 * player's parts keep the class names they had on the stage (ar-watch__deck,
 * ar-watch__tl-…), so nothing that styled them moves. Tokens only; motion
 * is opacity and transform and stops under prefers-reduced-motion. Loaded
 * before events.css wherever both are.
 */

/*
 * The box: the picture, its states and its deck; the element that fills the
 * screen. Without weight (:where), so the surface's own frame for it (the
 * stage's place in the room, the clip's dialog) wins whatever order the sheets load in.
 */
:where(.ar-player) {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-box);
  background: var(--ground-dark);
}

:where(.ar-player) .ar-watch__video {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 0;
  background: var(--bg-console-sunken);
}

/*
 * The line (ADR 0117 §1, after ADR 0103 and 0116 §3): one quiet progress
 * line at the foot of the picture, the time played and the time left at its
 * ends. 4 px at rest; under a pointer, a finger dragging or the keyboard it
 * grows to 10 px (a transform, so nothing reflows), a knob appears and the
 * highlights show as small dots on it. A card floats above: the storyboard's
 * frame of that second, the time, and one short line (who speaks and the
 * session, or a highlight's title). The hit area is 24 px with a pointer and
 * 44 px with a finger. On the ink glass, in the plate's own colours.
 */
.ar-watch__timeline {
  --ar-tl-track: 10px;
  --ar-tl-hit: 24px;
  --ar-tl-half: 5.5rem;
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-3);
  min-height: var(--ar-tl-hit);
}
.ar-watch__timeline[hidden] {
  display: none;
}
.ar-watch__tl-now,
.ar-watch__tl-left {
  min-width: 3.25em;
  font: var(--type-signal);
  letter-spacing: var(--tracking-signal);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  color: var(--text-inverse-secondary);
}
.ar-watch__tl-left {
  text-align: right;
}
.ar-watch__tl-bar {
  position: relative;
  height: var(--ar-tl-hit);
  cursor: pointer;
  touch-action: none;
  outline: none;
}
.ar-watch__tl-track {
  position: absolute;
  left: 0;
  right: 0;
  top: calc((var(--ar-tl-hit) - var(--ar-tl-track)) / 2);
  height: var(--ar-tl-track);
  overflow: hidden;
  border-radius: var(--radius-full);
  background: var(--plate-ink-edge);
  transform: scaleY(0.4);
  transition: transform var(--duration-fast) var(--ease-standard);
}
.ar-watch__tl-bar.is-scrubbing .ar-watch__tl-track,
.ar-watch__tl-bar:focus-visible .ar-watch__tl-track {
  transform: none;
}
.ar-watch__tl-bar:focus-visible {
  box-shadow: 0 0 0 var(--focus-ring-width) var(--focus-ring);
  border-radius: var(--radius-control);
}
.ar-watch__tl-loaded,
.ar-watch__tl-played,
.ar-watch__tl-range {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  pointer-events: none;
}
.ar-watch__tl-loaded {
  background: var(--plate-ink-rule);
}
.ar-watch__tl-played {
  background: var(--plate-ink-text);
}
.ar-watch__tl-range {
  background: var(--signal-300);
  opacity: 0.6;
}
.ar-watch__tl-range[hidden] {
  display: none;
}
/* A highlight: a small dot, seen only while the line is grown. */
.ar-watch__tl-dot {
  position: absolute;
  top: 50%;
  width: 4px;
  height: 4px;
  margin: -2px 0 0 -2px;
  border-radius: var(--radius-full);
  background: var(--signal-300);
  box-shadow: 0 0 0 1px var(--ground-dark);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--duration-fast) var(--ease-standard);
}
.ar-watch__tl-bar.is-scrubbing .ar-watch__tl-dot,
.ar-watch__tl-bar:focus-visible .ar-watch__tl-dot {
  opacity: 1;
}
.ar-watch__tl-playhead {
  position: absolute;
  top: calc(var(--ar-tl-hit) / 2 - 7px);
  width: 14px;
  height: 14px;
  margin-left: -7px;
  border-radius: var(--radius-full);
  background: var(--plate-ink-text);
  box-shadow: var(--shadow-sm);
  pointer-events: none;
  transform: scale(0);
  transition: transform var(--duration-fast) var(--ease-standard);
}
.ar-watch__tl-bar.is-scrubbing .ar-watch__tl-playhead,
.ar-watch__tl-bar:focus-visible .ar-watch__tl-playhead {
  transform: scale(1);
}
@media (hover: hover) {
  .ar-watch__tl-bar:hover .ar-watch__tl-track {
    transform: none;
  }
  .ar-watch__tl-bar:hover .ar-watch__tl-dot {
    opacity: 1;
  }
  .ar-watch__tl-bar:hover .ar-watch__tl-playhead {
    transform: scale(1);
  }
}
/* The card: the picture (16:9), the time, one short line. Glass, never content. */
.ar-watch__tl-tip {
  position: absolute;
  z-index: var(--z-tooltip);
  bottom: calc(100% + var(--space-2));
  transform: translateX(-50%);
  display: grid;
  gap: var(--space-1);
  width: calc(2 * var(--ar-tl-half));
  padding: var(--space-1);
  border-radius: var(--radius-box);
  background: var(--overlay-ink-fill);
  box-shadow:
    inset 0 0 0 var(--border-width-hairline) var(--plate-ink-edge),
    var(--overlay-shadow);
  -webkit-backdrop-filter: blur(var(--plate-blur)) saturate(var(--plate-saturate));
  backdrop-filter: blur(var(--plate-blur)) saturate(var(--plate-saturate));
  color: var(--plate-ink-text);
  pointer-events: none;
}
.ar-watch__tl-tip[hidden] {
  display: none;
}
.ar-watch__tl-thumb {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-md);
  background-color: var(--bg-console);
  background-repeat: no-repeat;
  overflow: hidden;
}
.ar-watch__tl-thumb[hidden] {
  display: none;
}
.ar-watch__tl-thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.ar-watch__tl-tip-text {
  display: grid;
  justify-items: center;
  gap: 2px;
  min-width: 0;
  padding: 0 var(--space-1) 2px;
  text-align: center;
  font: var(--type-caption);
}
.ar-watch__tl-tip-text time {
  font: var(--type-signal);
  letter-spacing: var(--tracking-signal);
  font-variant-numeric: tabular-nums;
}
.ar-watch__tl-tip-kind {
  font: var(--type-signal-micro);
  letter-spacing: var(--tracking-signal);
  text-transform: uppercase;
  color: var(--signal-300);
}
.ar-watch__tl-tip-label {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text-inverse-secondary);
}
@media (pointer: coarse) {
  .ar-watch__timeline {
    --ar-tl-hit: 44px;
  }
}
@media (max-width: 767px) {
  .ar-watch__timeline {
    --ar-tl-half: 4.25rem;
    gap: var(--space-2);
  }
}
@media (prefers-reduced-motion: reduce) {
  .ar-watch__tl-track,
  .ar-watch__tl-playhead,
  .ar-watch__tl-dot {
    transition: none;
  }
}

/*
 * The deck (ADR 0103, redrawn by ADR 0116 §4): the player's own controls,
 * laid over the picture inside the stage (so they stay in fullscreen). One
 * ink glass plate at the foot holds the scrubber and a row of controls (the
 * angle is one small select in it, beside the speed: ADR 0121); on a touch
 * screen the transport sits in the middle. Square or softly rounded, never a
 * circle or a pill (ADR 0121). Glass is chrome, never content (material.css): one plate, its
 * controls opaque, blur never animated; only opacity moves, and not under
 * reduced motion. Hidden until the script removes the native bar, so no
 * JavaScript means the browser's own controls, as before.
 */
.ar-watch__deck {
  --ar-deck-target: 40px;
  position: absolute;
  inset: 0;
  z-index: 2;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  color: var(--plate-ink-text);
  pointer-events: none;
  transition: opacity var(--duration-standard) var(--ease-standard);
}
.ar-watch__deck[hidden] {
  display: none;
}
.ar-watch__deck > * {
  pointer-events: auto;
}
.ar-watch__deck-mid {
  /* Placed, not flowed: the event's videos share its cell (ADR 0128). */
  grid-row: 1;
  grid-column: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-6);
  pointer-events: none;
}
/*
 * The event's videos (ADR 0128): "2 / 4" and the title between a quiet
 * previous and next, in the picture's top corner, on its own small ink
 * plate; it fades with the rest of the deck. The title goes when the player
 * is narrow (the count and the arrows stay).
 */
.ar-player__blocks {
  /* Its own target size: it lies outside the deck that sets the deck's. */
  --ar-deck-target: 40px;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  min-width: 0;
  max-width: calc(100% - var(--space-4));
  margin: var(--space-2);
  border-radius: var(--radius-md);
  background: var(--overlay-ink-fill);
  color: var(--plate-ink-text);
  transition: opacity var(--duration-standard) var(--ease-standard);
}
@media (pointer: coarse) {
  .ar-player__blocks {
    --ar-deck-target: 44px;
  }
}
/* It rests with the deck: gone while the picture plays untouched. */
.ar-player.has-deck.is-idle .ar-player__blocks {
  opacity: 0;
  pointer-events: none;
}
@media (prefers-reduced-motion: reduce) {
  .ar-player__blocks {
    transition: none;
  }
}
.ar-player__block-step {
  text-decoration: none;
}
.ar-player__block-step:not([href]) {
  visibility: hidden;
}
.ar-player__block-at {
  display: inline-flex;
  align-items: baseline;
  gap: var(--space-2);
  min-width: 0;
  padding: 0 var(--space-1);
  font: var(--type-signal);
  letter-spacing: var(--tracking-signal);
  white-space: nowrap;
  color: var(--plate-ink-text);
}
.ar-player__block-n {
  font-variant-numeric: tabular-nums;
}
.ar-player__block-title {
  min-width: 0;
  max-width: 16rem;
  overflow: hidden;
  text-overflow: ellipsis;
  text-transform: uppercase;
  color: var(--text-inverse-secondary);
}
@container ar-stage (max-width: 519px) {
  .ar-player__block-title {
    display: none;
  }
}
/*
 * A swipe moves between the videos (ADR 0128, amended): a finger, a mouse's
 * drag or a trackpad's two fingers; a vertical one scrolls the page. The
 * picture follows the hand, settles back or slides out, and the next video
 * slides in from the side it came from.
 */
.ar-player.has-swipe .ar-watch__video {
  touch-action: pan-y pinch-zoom;
  user-select: none;
  transition: transform 0.28s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.ar-player.has-swipe .ar-watch__video.is-following {
  transition: none;
}
.ar-came-next .ar-watch__video {
  animation: ar-came 0.36s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.ar-came-prev .ar-watch__video {
  animation: ar-came 0.36s cubic-bezier(0.2, 0.8, 0.2, 1);
  --ar-came: -1;
}
@keyframes ar-came {
  from {
    transform: translateX(calc(var(--ar-came, 1) * 18%));
    opacity: 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  .ar-player.has-swipe .ar-watch__video {
    transition: none;
  }
  .ar-came-next .ar-watch__video,
  .ar-came-prev .ar-watch__video {
    animation: none;
  }
}
.ar-watch__deck-mid > * {
  pointer-events: auto;
}
/*
 * The foot (ADR 0117 §1): one quiet glass plate floating a little inside the
 * picture's edges — the line, then the row of controls. A phone held
 * upright (under 600 px) keeps only the line at the foot, flush with the
 * edges, and lifts the row's options to the top corner, as the phone's own
 * player does; everything fades together.
 */
.ar-watch__deck-foot {
  grid-row: 2;
  grid-column: 1;
  display: grid;
  gap: 0;
  margin: 0 var(--space-3) var(--space-3);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-xl);
  background: var(--chrome-ink-fill);
  box-shadow: inset 0 0 0 var(--border-width-hairline) var(--plate-ink-edge);
  -webkit-backdrop-filter: blur(var(--plate-blur)) saturate(var(--plate-saturate));
  backdrop-filter: blur(var(--plate-blur)) saturate(var(--plate-saturate));
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .ar-watch__deck-foot {
    background: var(--bg-console);
  }
}
.ar-watch__deck-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-1);
  min-width: 0;
}
.ar-watch__deck-btn {
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  min-width: var(--ar-deck-target);
  min-height: var(--ar-deck-target);
  padding: 0 var(--space-1);
  border: 0;
  border-radius: var(--radius-md);
  background: transparent;
  color: inherit;
  cursor: pointer;
}
.ar-watch__deck-btn[hidden],
.ar-watch__deck-btn > span[hidden],
.ar-watch__big > span[hidden] {
  display: none;
}
.ar-watch__deck-btn:hover {
  background: var(--veil-on-dark-press);
}
.ar-watch__deck-btn:focus-visible,
.ar-watch__big:focus-visible {
  outline: var(--focus-ring-width) solid var(--focus-ring);
  outline-offset: -2px;
}
.ar-watch__deck-btn[aria-pressed='true'] .ar-watch__deck-cc {
  background: var(--plate-ink-text);
  color: var(--ground-dark);
}
.ar-watch__deck-cc {
  padding: 1px var(--space-1);
  border: var(--border-width-hairline) solid currentColor;
  border-radius: var(--radius-sm);
  font: var(--type-signal);
  letter-spacing: var(--tracking-signal);
}
.ar-watch__deck-right {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  margin-left: auto;
  flex: 0 0 auto;
}
.ar-watch__deck-vol {
  display: inline-flex;
  align-items: center;
}
.ar-watch__deck-range {
  width: 5rem;
  accent-color: var(--plate-ink-text);
}
.ar-watch__deck .ar-player__select {
  min-height: var(--space-8);
  min-width: 0;
  padding-block: 0;
  padding-inline: var(--space-2);
  background-color: var(--veil-on-dark);
  color: var(--plate-ink-text);
  border-color: var(--plate-ink-edge);
  border-radius: var(--radius-md);
  font: var(--type-signal);
  width: auto;
}
/*
 * The angle (ADR 0121): the same select, reading the angle shown, with a
 * small chevron so it reads as a choice ("PODIUM v"); left-aligned so the
 * chevron never sits on the word.
 */
.ar-player__pick {
  position: relative;
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
}
.ar-watch__deck .ar-player__pick .ar-player__select {
  padding-inline: var(--space-2) calc(var(--space-2) + 16px);
  text-align: left;
  text-align-last: left;
  letter-spacing: var(--tracking-signal);
  text-transform: uppercase;
}
.ar-player__pick-icon {
  position: absolute;
  right: var(--space-2);
  top: 50%;
  display: inline-grid;
  transform: translateY(-50%);
  pointer-events: none;
}
.ar-player__select[aria-busy] {
  cursor: progress;
}
.ar-watch__deck .ar-player__select option {
  color: var(--text-primary);
}
.ar-watch__deck .ar-player__select:focus-visible {
  outline: var(--focus-ring-width) solid var(--focus-ring);
  outline-offset: 2px;
}
/*
 * The player's own label and select (ADR 0118, amendment 2026-10-25): a page
 * that loads player.css alone (a story's video) draws the deck as the stage
 * does, with nothing borrowed from the room's sheet or the forms' sheet.
 */
.ar-player__sr {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
.ar-player__select {
  /* Drawn by the stylesheet in every engine: WebKit otherwise paints a white
     native box on the picture (ADR 0119 found it on the reel). A softly
     rounded box reading its value (1×, Podium), as the deck's buttons. */
  -webkit-appearance: none;
  appearance: none;
  text-align: center;
  text-align-last: center;
  display: block;
  box-sizing: border-box;
  min-width: 0;
  margin: 0;
  border: var(--border-width-hairline) solid var(--plate-ink-edge);
  outline: none;
  caret-color: var(--text-accent);
}
/* The big play: the poster's invitation, and the middle of the touch transport. */
.ar-watch__big {
  display: inline-grid;
  place-items: center;
  width: 64px;
  height: 64px;
  padding: 0;
  border: var(--border-width-hairline) solid var(--plate-ink-edge);
  border-radius: var(--radius-box);
  background: var(--overlay-ink-fill);
  color: var(--plate-ink-text);
  cursor: pointer;
  -webkit-backdrop-filter: blur(var(--plate-blur));
  backdrop-filter: blur(var(--plate-blur));
}
.ar-watch__big:hover {
  background: var(--bg-console);
}
.ar-watch__deck-mid .ar-watch__deck-btn {
  min-width: 52px;
  min-height: 52px;
  border-radius: var(--radius-box);
  background: var(--overlay-ink-fill);
}
/* A pointer: the big play only while paused; the ten seconds live on the row. */
@media (pointer: fine) {
  .ar-watch__deck [data-ctl-touch] {
    display: none;
  }
  .ar-player:not(.is-paused) .ar-watch__big {
    opacity: 0;
    pointer-events: none;
  }
}
/* A finger: the transport in the middle; the row keeps the options. */
@media (pointer: coarse) {
  .ar-watch__deck [data-ctl-desk],
  .ar-watch__deck-row [data-ctl-play],
  .ar-watch__deck-vol .ar-watch__deck-range {
    display: none;
  }
  .ar-watch__deck {
    --ar-deck-target: 44px;
  }
  /* A finger's targets (ADR 0109), the player's own on every page that has one. */
  .ar-watch__deck .ar-player__select,
  .ar-player .ar-control.ar-size--sm {
    min-height: 44px;
  }
  /* The volume slider on a touch tablet: a 44 px tall thumb lane (ADR 0112). */
  .ar-watch__deck-range {
    height: 44px;
  }
}
/* At rest while it plays: no chrome at all. */
.ar-player.is-idle .ar-watch__deck {
  opacity: 0;
}
.ar-player.is-idle .ar-watch__deck > *,
.ar-player.is-idle .ar-watch__deck-mid > * {
  pointer-events: none;
}
.ar-player.is-idle {
  cursor: none;
}
/*
 * Before the first play the picture is the frame: the big play shows on it,
 * and the angle where the block has two (ADR 0121: a viewer may choose the
 * slides before pressing play). Everything else at the foot waits, its plate
 * too; focus on any of it shows it all.
 */
.ar-player.has-deck:not(.is-started) [data-ctl-touch],
.ar-player.has-deck:not(.is-started):not(:focus-within)
  :is(
    .ar-watch__timeline,
    .ar-watch__deck-row > :not(.ar-watch__deck-right),
    .ar-watch__deck-right > :not(.ar-player__pick)
  ) {
  opacity: 0;
  pointer-events: none;
}
.ar-player.has-deck:not(.is-started):not(:focus-within)
  :is(.ar-watch__deck-foot, .ar-watch__deck-row) {
  background: transparent;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
.ar-player.has-deck:not(.is-started) .ar-player__pick {
  border-radius: var(--radius-md);
  background: var(--overlay-ink-fill);
}
@media (max-width: 767px) {
  .ar-watch__deck-range {
    display: none;
  }
  .ar-watch__big {
    width: 56px;
    height: 56px;
  }
  .ar-watch__deck-mid {
    gap: var(--space-4);
  }
}
/*
 * A phone held upright (and any window under 600 px): the line alone at the
 * foot, the options (the angle among them, ADR 0121) in the top corner, the
 * transport in the middle whatever the pointer. The deck becomes one grid —
 * the options in its first row, wrapping inside it before they would leave
 * the picture (ADR 0117 §1).
 */
@media (max-width: 599px) {
  .ar-watch__deck {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr) auto;
  }
  /* The top corner is the options' here. The arrows go to the picture's
     edges, half way down, either side of the transport; the count sits at
     the foot's left, words only, so a tap there still reaches the picture. */
  .ar-player__blocks {
    inset: 0;
    display: block;
    max-width: none;
    margin: 0;
    background: none;
    pointer-events: none;
  }
  .ar-player__block-step {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    border-radius: var(--radius-md);
    background: var(--overlay-ink-fill);
    pointer-events: auto;
  }
  .ar-player__block-step:first-child {
    left: var(--space-1);
  }
  .ar-player__block-step:last-child {
    right: var(--space-1);
  }
  .ar-player__block-at {
    position: absolute;
    left: var(--space-2);
    bottom: calc(var(--space-10) + var(--space-2));
    padding: 2px var(--space-1);
    border-radius: var(--radius-sm);
    background: var(--overlay-ink-fill);
  }
  .ar-watch__deck-mid {
    grid-column: 1 / -1;
    grid-row: 2;
  }
  .ar-watch__deck-foot {
    display: contents;
  }
  .ar-watch__deck-foot > .ar-watch__timeline {
    grid-column: 1 / -1;
    grid-row: 3;
    padding: 0 var(--space-3);
    background: var(--chrome-ink-fill-compact);
  }
  .ar-watch__deck-foot > .ar-watch__deck-row {
    grid-column: 1;
    grid-row: 1;
    align-self: start;
    justify-self: end;
    justify-content: flex-end;
    min-width: 0;
    gap: 0;
    margin: var(--space-1);
    border-radius: var(--radius-box);
    background: var(--overlay-ink-fill);
  }
  /* The transport in the middle for a mouse too: the row keeps the options. */
  .ar-watch__deck [data-ctl-touch] {
    display: inline-grid;
  }
  .ar-player:not(.is-paused) .ar-watch__big {
    opacity: 1;
    pointer-events: auto;
  }
  .ar-watch__deck [data-ctl-desk],
  .ar-watch__deck-row [data-ctl-play],
  .ar-watch__deck [data-ctl-mute] {
    display: none;
  }
  .ar-watch__deck .ar-player__select {
    width: 3.75rem;
    padding-inline: var(--space-1);
    background-color: transparent;
    border-color: transparent;
  }
  .ar-watch__deck .ar-player__pick .ar-player__select {
    width: auto;
    padding-inline: var(--space-1) calc(var(--space-1) + 16px);
  }
  .ar-player__pick-icon {
    right: var(--space-1);
  }
}
/* The narrowest phones: picture in picture gives its room to the rest of the row. */
@media (max-width: 399px) {
  .ar-watch__deck [data-ctl-pip] {
    display: none;
  }
}
/*
 * The player's own width decides what the row holds (a 1024 px window gives
 * the stage about 620 px beside the rail): the volume slider goes first,
 * picture in picture next; the row wraps before it overflows.
 */
.ar-player {
  container: ar-stage / inline-size;
}
@container ar-stage (max-width: 760px) {
  .ar-watch__deck-range {
    display: none;
  }
}
@container ar-stage (max-width: 520px) {
  .ar-watch__deck [data-ctl-pip] {
    display: none;
  }
}
@media (max-width: 359px) {
  .ar-watch__deck-right {
    gap: 0;
  }
  .ar-watch__deck .ar-player__select {
    width: 3.25rem;
    padding-inline: 2px var(--space-3);
    letter-spacing: 0;
  }
}
/* The brief sign after a skip, or a play or pause from the keyboard. */
.ar-watch__skip {
  position: absolute;
  z-index: 3;
  top: 50%;
  left: 50%;
  display: inline-grid;
  place-items: center;
  min-width: 72px;
  height: 72px;
  padding: 0 var(--space-3);
  border-radius: var(--radius-box);
  background: var(--overlay-ink-fill);
  color: var(--plate-ink-text);
  font: var(--type-subtitle);
  font-variant-numeric: tabular-nums;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, -50%) scale(0.9);
  transition:
    opacity var(--duration-fast) var(--ease-standard),
    transform var(--duration-fast) var(--ease-standard);
}
.ar-watch__skip[data-side='back'] {
  left: 22%;
}
.ar-watch__skip[data-side='fwd'] {
  left: 78%;
}
.ar-watch__skip.is-on {
  opacity: 1;
  transform: translate(-50%, -50%);
}
.ar-watch__skip svg {
  width: 28px;
  height: 28px;
}
@media (prefers-reduced-motion: reduce) {
  .ar-watch__skip {
    transition: none;
  }
}
/*
 * Fullscreen: the player's box is the element (the stage's, a clip's in its
 * dialog, a story's); the video fills it, the deck lies over it.
 */
.ar-player:fullscreen,
.ar-player.is-full {
  display: grid;
  width: 100%;
  height: 100%;
  max-height: none;
  background: var(--ground-dark);
  border-radius: 0;
}
/*
 * The stage fills the screen over the page (ADR 0134): the page's root is the
 * fullscreen element, so the stage can be replaced when the block changes in
 * place and the screen stays full.
 */
:root:fullscreen .ar-player.is-full {
  position: fixed;
  inset: 0;
  z-index: 2147483000;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  max-width: none;
  margin: 0;
  aspect-ratio: auto;
}
.ar-player:fullscreen .ar-watch__angle,
.ar-player.is-full .ar-watch__angle {
  height: 100%;
}
.ar-player:fullscreen .ar-watch__video,
.ar-player.is-full .ar-watch__video {
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
  object-fit: contain;
}
@media (prefers-reduced-motion: reduce) {
  .ar-watch__deck {
    transition: none;
  }
}

/* The states over the picture (ADR 0116 §2): loading, buffering, slow, a failure. */
.ar-watch__state {
  position: absolute;
  z-index: 3;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  max-width: calc(100% - var(--space-8));
  padding: var(--space-2) var(--space-3);
  border-radius: var(--glass-float-radius);
  background: var(--overlay-ink-fill);
  color: var(--plate-ink-text);
  font: var(--type-body-s);
  pointer-events: none;
}
.ar-watch__state[hidden] {
  display: none;
}
.ar-watch__state [data-state-retry] {
  pointer-events: auto;
}
.ar-watch__state[data-state='error'] .ar-watch__spinner {
  display: none;
}
.ar-watch__spinner {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  border: 2px solid var(--plate-ink-edge);
  border-top-color: var(--plate-ink-text);
  border-radius: var(--radius-full);
  animation: ar-watch-spin 0.9s linear infinite;
}
@keyframes ar-watch-spin {
  to {
    transform: rotate(360deg);
  }
}
@media (prefers-reduced-motion: reduce) {
  .ar-watch__spinner {
    animation: none;
    border-color: var(--plate-ink-text);
  }
}
/* While the deck shows in the middle, a state sits above it. */
.ar-player:not(.is-idle).has-deck .ar-watch__state {
  top: 28%;
}
/* The seek's frame: the storyboard's picture of the second asked for, until it lands. */
.ar-watch__veil {
  position: absolute;
  inset: 0;
  z-index: 1;
  background-color: var(--ground-dark);
  background-repeat: no-repeat;
  pointer-events: none;
}
.ar-watch__veil[hidden] {
  display: none;
}

/*
 * A finger (iOS above all): a select under 16 px makes Safari zoom the page
 * when it opens (ADR 0121). The deck's selects read 16 px there and size to
 * their words, which still fit the row at 320 px.
 */
@media (pointer: coarse) {
  .ar-player .ar-watch__deck .ar-player__select {
    width: auto;
    font-size: 16px;
    letter-spacing: 0;
  }
}

/* The narrowest phones: the transport draws in so the edge arrows keep clear of it (ADR 0128). */
@media (max-width: 399px) {
  .ar-player:has(> .ar-player__blocks) .ar-watch__deck-mid {
    gap: var(--space-2);
  }
}
/* Under 360 px the picture is too short for the count beside the transport: the arrows say it (their names). */
@media (max-width: 359px) {
  .ar-player__block-at {
    display: none;
  }
}
/* While the stage waits with Resume (after a highlight), that note has the corner. */
.ar-player:has(> .ar-watch__held:not([hidden])) .ar-player__blocks {
  visibility: hidden;
}

/*
 * An event's film (ADR 0132): the one player with one quiet line under it,
 * the same on the event page and the product page. A readable width on a
 * wide screen, the full column on a phone; nothing pins it (ADR 0121).
 */
.ar-film {
  display: grid;
  gap: var(--space-2);
  max-width: 64rem;
  margin: 0;
  min-width: 0;
}
.ar-film__cap {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-3);
  font: var(--type-body-s);
  color: var(--text-secondary);
}
.ar-film__title {
  font-weight: var(--weight-medium);
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}

/*
 * The event surfaces (ADR 0094): the event overview (hero, Continue
 * watching, Ask, the program as a timeline, the faculty, the highlights
 * reel) and the Watch room (ADR 0091) it opens. One file so the workspace,
 * the screening page, the console and later arm-age.com or a client's own
 * site include the same rules. Tokens only: the paper and console themes
 * restyle everything with no rule written twice. No gradients, no
 * decorative glyphs; motion is one short transition and stops under
 * prefers-reduced-motion.
 */

/* ── the Watch room (ADR 0091) ──────────────────────────────────────────── */

/*
 * Desktop: the stage on the left, a sticky rail the height of the viewport
 * on the right, the blocks strip under both. Phone and tablet: the stage,
 * then the rail's tabs, everything in one column. The video itself is never
 * pinned (ADR 0121): no sticky stage and no small player on any device; it
 * scrolls with the page like everything else. Tokens only; the console
 * theme restyles it with no rule twice.
 */
/* The height of a surface's pinned header, which sets it (ADR 0109): where a jump to the stage or a pane lands. */
:root {
  --ar-watch-stick: 0px;
}
.ar-watch {
  --ar-watch-rail: 22rem;
  --ar-watch-gap: var(--space-5);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--ar-watch-gap);
  align-items: start;
}

/*
 * Desktop (ADR 0137): the stage is as wide as the window allows and no taller
 * than fits under the page's title with its caption, so the whole picture is on
 * the first screen; the rail takes whatever width is left over.
 */
@media (min-width: 1024px) {
  .ar-watch {
    --ar-watch-stage-max: max(30rem, calc((100dvh - 20rem) * 16 / 9));
    grid-template-columns: minmax(0, var(--ar-watch-stage-max)) minmax(var(--ar-watch-rail), 1fr);
  }
  .ar-watch__blocks-nav {
    grid-column: 1 / -1;
  }
  .ar-watch__rail {
    position: sticky;
    top: var(--space-4);
    max-height: calc(100dvh - var(--space-8));
  }
}
@media (min-width: 1024px) and (max-width: 1279px) {
  .ar-watch {
    --ar-watch-rail: 20rem;
  }
}
@media (min-width: 1440px) {
  .ar-watch {
    --ar-watch-rail: 26rem;
  }
}

.ar-watch__main {
  display: grid;
  /* One column that follows the window: without it the track kept the
     stage's desktop width when a window narrowed or a tablet turned (ADR 0109). */
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-3);
  min-width: 0;
}
.ar-watch__main > * {
  min-width: 0;
}

.ar-watch__stage {
  position: relative;
  background: var(--bg-console-sunken);
  border-radius: var(--radius-box);
  overflow: hidden;
  box-shadow: inset 0 0 0 var(--border-width-hairline) var(--border-subtle);
  /* A jump from far down the page brings it back under the pinned header. */
  scroll-margin-top: calc(var(--ar-watch-stick) + var(--space-2));
}

.ar-watch__angle[hidden] {
  display: none;
}

.ar-watch__frame {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 0;
  background: var(--bg-console-sunken);
}

.ar-watch__notice {
  margin: var(--space-6);
}
/* The stage is dark in either look: its notices take the dark ground's
   colours, never the page's (4.5:1 on the sunken stage; ADR 0113). */
.ar-watch__stage .ar-ws-notice {
  box-shadow: inset 0 0 0 var(--border-width-hairline) var(--danger-on-dark);
  color: var(--danger-on-dark);
}
.ar-watch__stage .ar-ws-notice[data-tone='ok'] {
  box-shadow: inset 0 0 0 var(--border-width-hairline) var(--signal-500);
  color: var(--signal-on-dark);
}

/*
 * Phone and tablet: the stage runs edge to edge and scrolls with the page
 * (ADR 0121: never pinned while the viewer reads the speakers and the rail).
 */
@media (max-width: 1023px) {
  .ar-watch__main {
    gap: var(--space-2);
  }
  .ar-watch__stage {
    border-radius: 0;
    box-shadow: none;
  }
  .ar-ws-main .ar-watch__stage {
    margin-inline: calc(-1 * var(--space-4));
  }
}
/*
 * A phone on its side (ADR 0104): a 16:9 stage is taller than the viewport,
 * so the video is capped at two thirds of the height.
 */
@media (max-width: 1023px) and (max-height: 520px) {
  .ar-watch__video,
  .ar-watch__frame {
    max-height: 66dvh;
    object-fit: contain;
    background: var(--ground-dark);
  }
}

/* A picture cut from the storyboard (a highlight without its own frame, a result). */
.ar-watch__tile {
  display: block;
  aspect-ratio: 16 / 9;
  background-color: var(--ground-sunken);
  background-repeat: no-repeat;
}
.ar-watch .has-tile {
  position: relative;
}
.ar-watch .has-tile > img {
  visibility: hidden;
}
.ar-watch .has-tile > .ar-watch__tile {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.ar-watch__cite:has(> .ar-watch__hit-pic) > .ar-watch__hit-pic {
  grid-row: span 2;
}
/* Stream's player keeps the line under the stage (on the page's own ground). */
.ar-watch__stage + .ar-watch__timeline .ar-watch__tl-track {
  background: var(--border-subtle);
}
.ar-watch__stage + .ar-watch__timeline .ar-watch__tl-played {
  background: var(--text-primary);
}
.ar-watch__stage + .ar-watch__timeline :is(.ar-watch__tl-now, .ar-watch__tl-left) {
  color: var(--text-secondary);
}

/* The bar under the stage: now playing on the left, controls on the right. */
.ar-watch__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2) var(--space-4);
}
.ar-watch__now {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 2px;
  min-width: 0;
  flex: 1 1 16rem;
}
.ar-watch__now-chapter {
  font: var(--type-subtitle);
  color: var(--text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
@media (max-width: 767px) {
  .ar-watch__now-chapter {
    font: var(--type-body);
    font-weight: var(--weight-medium);
  }
}
.ar-watch__now-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  font: var(--type-caption);
  color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
  /* The height of a filled line from the start (ADR 0117): the clock filling in
     after load moves nothing below it (the speakers' row, the rail). */
  min-height: 1.65em;
}
.ar-watch__now-meta > span:empty {
  display: none;
}
.ar-watch__controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
}
/* The angle's links: a page without the script (ADR 0121: the deck's select replaces them). */
.ar-watch__angles {
  display: inline-flex;
  gap: var(--space-1);
}
.ar-watch__angles[hidden] {
  display: none;
}

/* After a highlight (ADR 0116 §1): the stage waits, paused, and says so. */
.ar-watch__held {
  position: absolute;
  z-index: 3;
  left: var(--space-3);
  top: var(--space-3);
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  max-width: calc(100% - var(--space-6) - 12rem);
  margin: 0;
  padding: var(--space-1) var(--space-1) var(--space-1) var(--space-3);
  border-radius: var(--glass-float-radius);
  background: var(--overlay-ink-fill);
  color: var(--plate-ink-text);
  font: var(--type-body-s);
}
.ar-watch__held[hidden] {
  display: none;
}
@media (max-width: 767px) {
  .ar-watch__held {
    max-width: calc(100% - var(--space-4));
    left: var(--space-2);
    top: auto;
    bottom: calc(var(--space-12) + var(--space-10));
  }
}

/*
 * The chapters, folded on every width (ADR 0128): the chapter playing and
 * the next two, with their session's heading; "All chapters (N)" opens the
 * rest in place (and the viewer's choice is kept). The window follows the
 * playback.
 */
.ar-watch__sessions.is-brief > .ar-watch__session:not(.is-near-group),
.ar-watch__sessions.is-brief .ar-watch__chapter:not(.is-near) {
  display: none;
}
.ar-watch__all {
  margin-top: var(--space-3);
}

/* The rail's Highlights only toggle (the phone badge presses it). */
.ar-watch__only[hidden] {
  display: none;
}
.ar-watch__only {
  flex: 0 0 auto;
}

/* Chips: the angle's links without the script, All chapters. Square, never a pill. */
.ar-watch__chip {
  display: inline-flex;
  align-items: center;
  min-height: var(--space-8);
  padding: 0 var(--space-3);
  border: var(--border-width-hairline) solid var(--border-default);
  border-radius: var(--radius-control);
  background: transparent;
  color: var(--text-secondary);
  font: var(--type-signal);
  letter-spacing: var(--tracking-signal);
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
}
.ar-watch__chip:hover {
  color: var(--text-primary);
  border-color: var(--border-strong);
}
.ar-watch__chip[aria-current='true'],
.ar-watch__chip[aria-pressed='true'] {
  background: var(--text-primary);
  border-color: var(--text-primary);
  color: var(--ground-default);
}
@media (max-width: 1023px) {
  .ar-watch__chip {
    min-height: var(--space-10);
  }
}

/*
 * The speakers under the stage (ADR 0117 §2), in the spirit of a cast row:
 * large portraits (softly rounded squares, as the faculty's: ADR 0121), the
 * name and the affiliation, a row that scrolls
 * sideways on its own (never the page). The one speaking now gets a signal
 * ring and says so; a speaker without a photo gets a monogram on the dark
 * ground of the stage, the same size and ring, so it reads as chosen.
 */
.ar-watch__cast {
  display: grid;
  gap: var(--space-2);
  min-width: 0;
  margin-top: var(--space-2);
}
.ar-watch__cast-h {
  margin: 0;
  font: var(--type-signal);
  letter-spacing: var(--tracking-signal);
  text-transform: uppercase;
  color: var(--text-secondary);
}
.ar-watch__cast-row {
  position: relative;
  display: flex;
  gap: var(--space-2);
  margin: 0;
  padding: var(--space-1) 2px var(--space-2);
  list-style: none;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scrollbar-width: thin;
  /* Never the page's scroll anchor: the stage above it is (a web font's swap moves nothing). */
  overflow-anchor: none;
}
.ar-watch__cast-row > li {
  flex: 0 0 auto;
  scroll-snap-align: start;
}
.ar-watch__cast-item {
  display: grid;
  justify-items: center;
  align-content: start;
  gap: var(--space-1);
  width: 8rem;
  padding: var(--space-2) var(--space-1);
  border: 0;
  border-radius: var(--radius-box);
  background: transparent;
  color: var(--text-primary);
  text-align: center;
  cursor: pointer;
}
.ar-watch__cast-item:hover {
  background: var(--ground-sunken);
}
.ar-watch__cast-item:focus-visible {
  outline: var(--focus-ring-width) solid var(--focus-ring);
  outline-offset: -2px;
}
.ar-watch__cast-pic {
  display: block;
  width: 96px;
  height: 96px;
  margin-bottom: var(--space-1);
  overflow: hidden;
  border-radius: var(--radius-box);
  background: var(--ground-dark);
  box-shadow: 0 0 0 var(--border-width-hairline) var(--border-subtle);
  transition: box-shadow var(--duration-fast) var(--ease-standard);
}
.ar-watch__cast-photo {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.ar-watch__cast-mono {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  color: var(--plate-ink-text);
  font: var(--type-subtitle);
  font-family: var(--font-signal);
  letter-spacing: var(--tracking-signal);
}
.ar-watch__cast-name {
  font: var(--type-body-s);
  font-weight: var(--weight-medium);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
}
.ar-watch__cast-about {
  font: var(--type-caption);
  color: var(--text-secondary);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
}
/* Said only for the one speaking; its room is kept so nothing moves when it changes. */
.ar-watch__cast-now {
  visibility: hidden;
  white-space: nowrap;
  font: var(--type-signal-micro);
  letter-spacing: var(--tracking-signal);
  text-transform: uppercase;
  color: var(--signal-on-cream);
}
.ar-watch__cast-item.is-now .ar-watch__cast-pic {
  box-shadow:
    0 0 0 3px var(--ground-default),
    0 0 0 5px var(--signal-500);
}
.ar-watch__cast-item.is-now .ar-watch__cast-now {
  visibility: visible;
}
@media (max-width: 767px) {
  .ar-watch__cast-item {
    width: 6.75rem;
  }
  .ar-watch__cast-pic {
    width: 76px;
    height: 76px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .ar-watch__cast-pic {
    transition: none;
  }
}

/* Share (ADR 0104): the bar's button opens the page's one sheet (below). */
.ar-watch__share-btn {
  gap: var(--space-1);
}
.ar-watch__share-btn[hidden] {
  display: none;
}
/* Phones: now playing on its own row, the controls on a second one, 44 px targets. */
@media (max-width: 640px) {
  .ar-watch__now {
    flex-basis: 100%;
  }
  .ar-watch__controls {
    width: 100%;
  }
  .ar-watch__controls .ar-control,
  .ar-watch__passage .ar-control,
  .ar-watch__resume .ar-control {
    min-height: 2.75rem;
  }
}

.ar-watch__resume,
.ar-watch__passage {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-3);
  margin: 0;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-control);
  background: var(--ground-raised);
  box-shadow: inset 0 0 0 var(--border-width-hairline) var(--border-subtle);
  font: var(--type-body-s);
}
.ar-watch__resume[hidden],
.ar-watch__passage[hidden] {
  display: none;
}

/* The rail. */
.ar-watch__rail {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  gap: var(--space-3);
  background: var(--ground-raised);
  border-radius: var(--radius-box);
  box-shadow: inset 0 0 0 var(--border-width-hairline) var(--border-subtle);
  padding: var(--space-3);
}
@media (max-width: 1023px) {
  .ar-watch__rail {
    background: transparent;
    box-shadow: none;
    padding: 0;
  }
}
.ar-watch__tabs {
  display: flex;
  gap: var(--space-1);
  padding: var(--space-1);
  border-radius: var(--radius-control);
  background: var(--ground-sunken);
}
.ar-watch__tab {
  flex: 1 1 0;
  min-height: var(--space-8);
  border: 0;
  border-radius: var(--radius-control);
  background: transparent;
  color: var(--text-secondary);
  font: var(--type-signal);
  letter-spacing: var(--tracking-signal);
  text-transform: uppercase;
  cursor: pointer;
}
.ar-watch__tab[aria-selected='true'] {
  background: var(--ground-raised);
  color: var(--text-primary);
  box-shadow: var(--shadow-sm);
}
@media (max-width: 1023px) {
  .ar-watch__tab {
    min-height: var(--space-10);
  }
}
/* The rail's head: the tabs, and the speaker dropdown (ADR 0097) beside them
   when the rail has room for both at their natural width, on its own full
   row under them otherwise (a phone, or the 22 rem rail with three tabs). */
.ar-watch__rail-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
}
.ar-watch__rail-head .ar-watch__tabs {
  flex: 1 1 auto;
  min-width: 0;
}
.ar-watch__speaker {
  display: flex;
  flex: 1 1 auto;
  min-width: 0;
}
.ar-watch__speaker .ar-input {
  min-height: var(--space-10);
  width: 100%;
  font: var(--type-body-s);
}
.ar-watch__speaker[hidden] {
  display: none;
}
.ar-watch__pane {
  min-height: 0;
  flex: 1 1 auto;
}
.ar-watch__pane[hidden] {
  display: none;
}
@media (min-width: 1024px) {
  .ar-watch__pane {
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
  }
}

/* Chapters by session. */
.ar-watch__sessions,
.ar-watch__chapters {
  list-style: none;
  margin: 0;
  padding: 0;
}
.ar-watch__sessions {
  display: grid;
  gap: var(--space-3);
}
.ar-watch__session[hidden] {
  display: none;
}
.ar-watch__session-link {
  display: grid;
  gap: 2px;
  padding: var(--space-2) var(--space-2) var(--space-1);
  color: inherit;
  text-decoration: none;
  border-radius: var(--radius-control);
}
.ar-watch__session-link:hover {
  background: var(--ground-sunken);
}
.ar-watch__session-title {
  display: block;
  padding: var(--space-2) var(--space-2) 0;
  font: var(--type-body-s);
  font-weight: var(--weight-semibold);
  color: var(--text-primary);
}
.ar-watch__session-link .ar-watch__session-title {
  padding: 0;
}
.ar-watch__session-meta {
  font: var(--type-caption);
  color: var(--text-secondary);
}
.ar-watch__chapter {
  display: grid;
  gap: 2px;
  padding: var(--space-1) 0;
}
.ar-watch__chapter[hidden] {
  display: none;
}
.ar-watch__chapter-link {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: baseline;
  gap: var(--space-2);
  padding: var(--space-2);
  border-radius: var(--radius-control);
  color: var(--text-primary);
  text-decoration: none;
  font: var(--type-body-s);
}
.ar-watch__chapter-link:hover {
  background: var(--ground-sunken);
}
.ar-watch__chapter[aria-current='true'] > .ar-watch__chapter-link {
  background: var(--ground-sunken);
  box-shadow: inset var(--border-width-bracket) 0 0 var(--accent-primary);
}
.ar-watch__chapter time,
.ar-watch__at {
  font: var(--type-signal);
  color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
}
/* A highlight's picture leads the row (ADR 0096): its own frame, or the place
   the script paints from the storyboard (ADR 0116 §5); four columns either way. */
.ar-watch__chapter[data-kind='highlight'] .ar-watch__chapter-link {
  grid-template-columns: auto auto auto minmax(0, 1fr);
  align-items: center;
}
.ar-watch__chapter-frame {
  display: block;
  width: 4rem;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: var(--radius-sm);
  background: var(--bg-console-sunken);
  box-shadow: inset 0 0 0 var(--border-width-hairline) var(--border-subtle);
}
.ar-watch__chapter-frame img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.ar-watch__star {
  display: inline-flex;
  color: var(--accent-primary);
}
[data-theme='paper'] .ar-watch__star,
:root:not([data-theme]) .ar-watch__star {
  color: var(--signal-700);
}
.ar-watch__chapter-meta,
.ar-watch__chapter-sum {
  margin: 0;
  padding-inline: var(--space-2);
  font: var(--type-caption);
  color: var(--text-secondary);
}
.ar-watch__chapter[data-review='proposed'] > .ar-watch__chapter-link {
  box-shadow: inset var(--border-width-bracket) 0 0 var(--caution-500);
}
.ar-watch__chapter[data-review='rejected'] {
  opacity: var(--opacity-ghost);
}
.ar-watch__chapter .ar-console-row-actions {
  padding: var(--space-1) var(--space-2) var(--space-2);
}
/* A highlight's clip (ADR 0093): one line under the row, its links beside it. */
.ar-watch__clip {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-1) var(--space-2);
  margin: 0;
  padding-inline: var(--space-2);
  font: var(--type-caption);
  color: var(--text-secondary);
}
.ar-watch__clip--failed {
  color: var(--caution-700, var(--text-secondary));
}
.ar-watch__clip-link {
  color: var(--text-accent);
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

/* The transcript: turns, lines, find. */
.ar-watch__find {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto auto;
  align-items: center;
  gap: var(--space-2);
}
.ar-watch__find[hidden] {
  display: none;
}
.ar-watch__find .ar-input {
  min-height: var(--space-8);
  font: var(--type-body-s);
}
.ar-watch__find-icon {
  display: inline-flex;
  color: var(--text-tertiary);
}
.ar-watch__find-count {
  font: var(--type-caption);
  color: var(--text-secondary);
  white-space: nowrap;
}
.ar-watch__find-count:empty {
  display: none;
}
.ar-watch__transcript {
  display: grid;
  gap: var(--space-3);
  font: var(--type-body-s);
  line-height: 1.6;
}
@media (min-width: 1024px) {
  .ar-watch__transcript {
    overflow-y: auto;
    min-height: 0;
    max-height: calc(100dvh - 12rem);
    padding-right: var(--space-1);
    overscroll-behavior: contain;
    scrollbar-width: thin;
  }
}
.ar-watch__transcript:focus-visible {
  outline: var(--focus-ring-width) solid var(--focus-ring);
  outline-offset: 2px;
}
.ar-watch__turn[hidden] {
  display: none;
}
.ar-watch__turn-head {
  display: flex;
  gap: var(--space-2);
  align-items: baseline;
  padding: 0 var(--space-2);
}
.ar-watch__who {
  font-weight: var(--weight-semibold);
  color: var(--text-primary);
}
.ar-watch__turn-body {
  margin: 2px 0 0;
  padding: 0 var(--space-2);
  color: var(--text-primary);
}
.ar-watch__line {
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background var(--duration-standard) var(--ease-standard);
}
.ar-watch__line:hover {
  background: var(--ground-sunken);
}
.ar-watch__line[aria-current='true'] {
  background: var(--signal-100);
  color: var(--ink-900);
}
[data-theme='console'] .ar-watch__line[aria-current='true'] {
  background: var(--signal-800);
  color: var(--text-inverse);
}
.ar-watch__line--match {
  box-shadow: inset 0 -2px 0 var(--caution-500);
}
.ar-watch__line--here {
  background: var(--caution-500);
  color: var(--ink-950);
}
.ar-watch__line:focus-visible {
  outline: var(--focus-ring-width) solid var(--focus-ring);
  outline-offset: 1px;
}
@media (prefers-reduced-motion: reduce) {
  .ar-watch__line {
    transition: none;
  }
}

/* The Ask pane (ADR 0092): the box, the answer, the moments found, the brief. */
.ar-watch__ask {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-2);
}
.ar-watch__ask .ar-input {
  min-height: var(--space-8);
  font: var(--type-body-s);
}
.ar-watch__ask [hidden] {
  display: none;
}
@media (max-width: 1023px) {
  .ar-watch__ask .ar-input,
  .ar-watch__ask .ar-control {
    min-height: var(--space-12);
  }
}
.ar-watch__ask-status {
  margin: 0;
  font: var(--type-caption);
  color: var(--text-secondary);
}
.ar-watch__ask-status:empty {
  display: none;
}
.ar-watch__answer {
  display: grid;
  gap: var(--space-2);
  padding: var(--space-3);
  border-radius: var(--radius-control);
  background: var(--ground-sunken);
  box-shadow: inset 0 0 0 var(--border-width-hairline) var(--border-subtle);
}
.ar-watch__answer[hidden] {
  display: none;
}
.ar-watch__answer-label,
.ar-watch__found-title,
.ar-watch__brief-title {
  margin: 0;
  font: var(--type-signal);
  letter-spacing: var(--tracking-signal);
  text-transform: uppercase;
  color: var(--text-secondary);
}
.ar-watch__answer-text {
  margin: 0;
  font: var(--type-body-s);
  line-height: 1.6;
  color: var(--text-primary);
}
.ar-watch__cites,
.ar-watch__examples {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-1);
}
.ar-watch__cite,
.ar-watch__hit,
.ar-watch__example {
  display: grid;
  gap: 2px;
  width: 100%;
  min-height: var(--space-10);
  padding: var(--space-2);
  border: 0;
  border-radius: var(--radius-control);
  background: transparent;
  color: var(--text-primary);
  font: var(--type-body-s);
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--duration-standard) var(--ease-standard);
}
@media (max-width: 1023px) {
  .ar-watch__cite,
  .ar-watch__hit,
  .ar-watch__example {
    min-height: var(--space-12);
  }
}
.ar-watch__hit:hover,
.ar-watch__example:hover {
  background: var(--ground-sunken);
}
.ar-watch__cite:hover {
  background: var(--ground-raised);
}
.ar-watch__cite:focus-visible,
.ar-watch__hit:focus-visible,
.ar-watch__example:focus-visible {
  outline: var(--focus-ring-width) solid var(--focus-ring);
  outline-offset: 1px;
}
.ar-watch__cite {
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: var(--space-2);
  align-items: baseline;
}
.ar-watch__cite > .ar-watch__hit-text {
  grid-column: 2;
}
.ar-watch__cite-n {
  font: var(--type-signal);
  color: var(--text-secondary);
}
.ar-watch__hit-head {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  align-items: baseline;
  font: var(--type-caption);
  color: var(--text-secondary);
}
.ar-watch__hit-text {
  font: var(--type-body-s);
  line-height: 1.5;
  color: var(--text-primary);
}
.ar-watch__badge {
  padding: 0 var(--space-1);
  border-radius: var(--radius-sm);
  box-shadow: inset 0 0 0 var(--border-width-hairline) var(--border-subtle);
  font: var(--type-signal-micro);
  letter-spacing: var(--tracking-signal);
  text-transform: uppercase;
  color: var(--text-tertiary);
}
.ar-watch__found {
  display: grid;
  gap: var(--space-3);
}
.ar-watch__found:empty {
  display: none;
}
.ar-watch__found-count {
  margin: 0;
  font: var(--type-caption);
  color: var(--text-secondary);
}
.ar-watch__found-group {
  display: grid;
  gap: var(--space-1);
}
.ar-watch__found-title {
  padding: 0 var(--space-2);
}
.ar-watch__ask-empty {
  display: grid;
  gap: var(--space-3);
}
.ar-watch__ask-empty[hidden] {
  display: none;
}
.ar-watch__ask-hint {
  margin: 0;
  font: var(--type-body-s);
  color: var(--text-secondary);
}
.ar-watch__example {
  background: var(--ground-sunken);
}
.ar-watch__example:hover {
  box-shadow: inset 0 0 0 var(--border-width-hairline) var(--border-subtle);
}
.ar-watch__brief {
  display: grid;
  gap: var(--space-1);
  padding: 0 var(--space-2);
  font: var(--type-body-s);
  color: var(--text-primary);
}
.ar-watch__brief p {
  margin: 0;
}
/* Ask that answers (ADR 0105 §5): the question echoed, the answer as short
   paragraphs, follow-up chips, a vote, the passages folded, a thin thinking bar. */
.ar-watch__answer-q {
  margin: 0;
  font: var(--type-body-s);
  font-weight: 600;
  color: var(--text-primary);
}
.ar-watch__answer-label.is-verified {
  color: var(--text-primary);
}
.ar-watch__answer-text {
  display: grid;
  gap: var(--space-2);
}
.ar-watch__answer-text p {
  margin: 0;
  font: var(--type-body-s);
  line-height: 1.6;
  color: var(--text-primary);
  overflow-wrap: anywhere;
}
.ar-watch__chips {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}
.ar-watch__chips[hidden] {
  display: none;
}
.ar-watch__follow {
  display: inline-flex;
  align-items: center;
  min-height: var(--space-10);
  max-width: 100%;
  padding: var(--space-1) var(--space-3);
  border: 0;
  border-radius: var(--radius-control);
  background: var(--ground-raised);
  box-shadow: inset 0 0 0 var(--border-width-hairline) var(--border-subtle);
  color: var(--text-primary);
  font: var(--type-caption);
  text-align: left;
  cursor: pointer;
  overflow-wrap: anywhere;
}
.ar-watch__follow:hover {
  background: var(--ground-sunken);
}
.ar-watch__follow:focus-visible {
  outline: var(--focus-ring-width) solid var(--focus-ring);
  outline-offset: 1px;
}
.ar-watch__vote {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  font: var(--type-caption);
  color: var(--text-secondary);
}
.ar-watch__vote[hidden] {
  display: none;
}
.ar-watch__vote-btn {
  display: inline-grid;
  place-items: center;
  width: var(--space-10);
  height: var(--space-10);
  border: 0;
  border-radius: var(--radius-control);
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
}
.ar-watch__vote-btn:hover {
  background: var(--ground-raised);
  color: var(--text-primary);
}
.ar-watch__vote-btn[aria-pressed='true'] {
  background: var(--ground-raised);
  color: var(--text-primary);
  box-shadow: inset 0 0 0 var(--border-width-hairline) var(--border-strong, var(--border-subtle));
}
.ar-watch__vote-btn:focus-visible {
  outline: var(--focus-ring-width) solid var(--focus-ring);
  outline-offset: 1px;
}
.ar-watch__vote-thanks:empty {
  display: none;
}
.ar-watch__found-fold {
  border-radius: var(--radius-control);
  box-shadow: inset 0 0 0 var(--border-width-hairline) var(--border-subtle);
}
.ar-watch__found-fold[hidden] {
  display: none;
}
.ar-watch__found-summary {
  display: flex;
  align-items: center;
  min-height: var(--space-10);
  padding: 0 var(--space-3);
  font: var(--type-caption);
  color: var(--text-secondary);
  cursor: pointer;
  list-style: none;
}
.ar-watch__found-summary::-webkit-details-marker {
  display: none;
}
.ar-watch__found-summary::before {
  content: '';
  width: 0;
  height: 0;
  margin-right: var(--space-2);
  border-style: solid;
  border-width: 4px 0 4px 6px;
  border-color: transparent transparent transparent currentColor;
}
.ar-watch__found-fold[open] > .ar-watch__found-summary::before {
  transform: rotate(90deg);
}
.ar-watch__found-fold > .ar-watch__found {
  padding: 0 var(--space-2) var(--space-2);
}
.ar-watch__found-fold > .ar-watch__found:empty {
  display: none;
}
.ar-watch__thinking {
  position: relative;
  height: 2px;
  overflow: hidden;
  border-radius: 1px;
  background: var(--border-subtle);
}
.ar-watch__thinking[hidden] {
  display: none;
}
.ar-watch__thinking > span {
  position: absolute;
  inset: 0 auto 0 -40%;
  width: 40%;
  background: var(--text-secondary);
  animation: ar-watch-thinking 1.2s ease-in-out infinite;
}
@keyframes ar-watch-thinking {
  to {
    left: 100%;
  }
}
@media (max-width: 1023px) {
  .ar-watch__follow,
  .ar-watch__found-summary {
    min-height: var(--space-12);
  }
  .ar-watch__vote-btn {
    width: var(--space-12);
    height: var(--space-12);
  }
}
@media (prefers-reduced-motion: reduce) {
  .ar-watch__thinking > span {
    animation: none;
    inset: 0;
    width: 100%;
    opacity: 0.5;
  }
}
@media (prefers-reduced-motion: reduce) {
  .ar-watch__cite,
  .ar-watch__hit,
  .ar-watch__example {
    transition: none;
  }
}

/* The blocks strip: every recording as a card with its frame. */
.ar-watch__blocks-nav {
  display: grid;
  gap: var(--space-2);
}
.ar-watch__blocks-title {
  margin: 0;
  font: var(--type-signal);
  letter-spacing: var(--tracking-signal);
  text-transform: uppercase;
  color: var(--text-secondary);
}
.ar-watch__blocks {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr));
  gap: var(--space-3);
}
@media (max-width: 767px) {
  .ar-watch__blocks {
    grid-auto-flow: column;
    grid-auto-columns: 70vw;
    grid-template-columns: none;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding-bottom: var(--space-2);
    margin-inline: calc(-1 * var(--space-4));
    padding-inline: var(--space-4);
  }
  .ar-watch__block {
    scroll-snap-align: start;
  }
}
.ar-watch__block-link {
  display: grid;
  gap: var(--space-2);
  color: inherit;
  text-decoration: none;
  border-radius: var(--radius-box);
}
.ar-watch__block-link:hover .ar-watch__block-title {
  text-decoration: underline;
}
.ar-watch__block-frame {
  display: block;
  aspect-ratio: 16 / 9;
  background: var(--bg-console-sunken);
  border-radius: var(--radius-box);
  overflow: hidden;
  box-shadow: inset 0 0 0 var(--border-width-hairline) var(--border-subtle);
}
.ar-watch__block[aria-current='true'] .ar-watch__block-frame {
  box-shadow: inset 0 0 0 var(--border-width-bracket) var(--accent-primary);
}
.ar-watch__block-frame img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.ar-watch__block-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  color: var(--text-inverse-tertiary);
}
.ar-watch__block-text {
  display: grid;
  gap: 2px;
  padding-inline: var(--space-1);
}
.ar-watch__block-title {
  font: var(--type-body-s);
  font-weight: var(--weight-medium);
  color: var(--text-primary);
}
.ar-watch__block-meta {
  font: var(--type-caption);
  color: var(--text-secondary);
}

/* The screening page: no shell, one column, the room gets the width. */
.ar-screen__main {
  max-width: 88rem;
  margin: 0 auto;
  padding: var(--space-6) var(--space-4) var(--space-10);
  display: grid;
  gap: var(--space-5);
}
@media (max-width: 1023px) {
  .ar-screen__main .ar-watch__main {
    margin-inline: calc(-1 * var(--space-4));
    padding-inline: var(--space-4);
  }
  .ar-screen__main .ar-watch__stage {
    margin-inline: calc(-1 * var(--space-4));
  }
}

.ar-screen .ar-auth__brand {
  color: var(--text-primary);
}
.ar-screen__bar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  align-items: center;
  justify-content: space-between;
}
.ar-screen__head {
  display: grid;
  gap: var(--space-1);
}
.ar-screen__head h1 {
  margin: 0;
}
.ar-screen__grid {
  display: grid;
  gap: var(--space-4);
}
@media (min-width: 1024px) {
  .ar-screen__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* ── the one box and its results (ADR 0116 §7) ──────────────────────────── */

/* The box: one field, its glass-free search icon inside, Ask at its end. */
.ar-watch__rail > .ar-watch__ask {
  position: relative;
  grid-template-columns: minmax(0, 1fr) auto;
}
.ar-watch__rail > .ar-watch__ask .ar-watch__find-icon {
  position: absolute;
  left: var(--space-3);
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
}
.ar-watch__rail > .ar-watch__ask .ar-input {
  grid-column: 1;
  min-height: var(--space-10);
  padding-left: calc(var(--space-3) + 16px + var(--space-2));
}
.ar-watch__ask-context {
  margin: calc(-1 * var(--space-2)) 0 0;
  font: var(--type-caption);
  color: var(--text-tertiary);
  min-height: 0;
}
.ar-watch__ask-context:empty {
  display: none;
}
.ar-watch__rail-head[hidden],
.ar-watch__results[hidden],
.ar-watch__found-group[hidden],
.ar-watch__ask-this[hidden] {
  display: none;
}
.ar-watch__results {
  display: grid;
  align-content: start;
  gap: var(--space-3);
  min-height: 0;
  flex: 1 1 auto;
}
@media (min-width: 1024px) {
  .ar-watch__results {
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
  }
}
.ar-watch__results-head {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-height: var(--space-8);
}
.ar-watch__results-head .ar-watch__ask-status {
  flex: 1 1 auto;
  min-width: 0;
}
.ar-watch__results-close {
  margin-left: auto;
}
.ar-watch__ask-this {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  width: 100%;
  min-height: var(--space-10);
  padding: var(--space-2) var(--space-3);
  border: var(--border-width-hairline) solid var(--border-default);
  border-radius: var(--radius-control);
  background: var(--ground-default);
  color: var(--text-primary);
  font: var(--type-body-s);
  text-align: left;
  cursor: pointer;
}
.ar-watch__ask-this:hover {
  border-color: var(--border-strong);
}
.ar-watch__ask-this:focus-visible {
  outline: var(--focus-ring-width) solid var(--focus-ring);
  outline-offset: 1px;
}
.ar-watch__found-n {
  margin-left: var(--space-1);
  color: var(--text-tertiary);
}
.ar-watch__found-list {
  display: grid;
  gap: 2px;
}
/* A result with a picture: the frame of that second (the storyboard), then the words. */
.ar-watch__hit {
  grid-template-columns: minmax(0, 1fr);
}
.ar-watch__hit:has(> .ar-watch__hit-pic),
.ar-watch__hit--person,
.ar-watch__cite:has(> .ar-watch__hit-pic) {
  grid-template-columns: 4.5rem minmax(0, 1fr);
  column-gap: var(--space-3);
  align-items: start;
}
.ar-watch__cite:has(> .ar-watch__hit-pic) {
  grid-template-columns: 4.5rem auto minmax(0, 1fr);
}
.ar-watch__cite:has(> .ar-watch__hit-pic) > .ar-watch__hit-text {
  grid-column: 2 / -1;
}
.ar-watch__hit-pic {
  width: 4.5rem;
  border-radius: var(--radius-sm);
}
.ar-watch__hit-body {
  display: grid;
  gap: 2px;
  min-width: 0;
}
.ar-watch__hit-name {
  font: var(--type-body-s);
  font-weight: var(--weight-semibold);
}
.ar-watch__hit-where {
  font: var(--type-caption);
  color: var(--text-tertiary);
}
.ar-watch__hit-text mark {
  background: transparent;
  color: inherit;
  box-shadow: inset 0 -2px 0 var(--signal-500);
}
.ar-watch__hit--person .ar-watch__sp-portrait,
.ar-watch__hit--person .ar-watch__sp-photo,
.ar-watch__hit--person .ar-watch__sp-mono {
  width: var(--space-10);
  height: var(--space-10);
}
/* The chapters pane's own tools: the speaker dropdown and Highlights only. */
.ar-watch__pane-tools {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
}

/* Who is speaking, under the stage: a button that opens their profile. */
.ar-watch__now-who {
  display: inline-flex;
  align-items: center;
  min-height: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--text-link);
  font: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
  cursor: pointer;
}
.ar-watch__now-who[hidden] {
  display: none;
}
.ar-watch__now-who:disabled {
  color: inherit;
  text-decoration: none;
  cursor: default;
}
.ar-watch__now-who:focus-visible {
  outline: var(--focus-ring-width) solid var(--focus-ring);
  outline-offset: 2px;
}

/* ── the Speakers pane (ADR 0116 §6) ────────────────────────────────────── */
.ar-watch__sps,
.ar-watch__sp-moments {
  list-style: none;
  margin: 0;
  padding: 0;
}
.ar-watch__sps {
  display: grid;
  gap: var(--space-3);
}
.ar-watch__sp {
  display: grid;
  gap: var(--space-2);
  padding: var(--space-3);
  border-radius: var(--radius-control);
  background: var(--ground-default);
  box-shadow: inset 0 0 0 var(--border-width-hairline) var(--border-subtle);
  scroll-margin-top: calc(var(--ar-watch-stick) + var(--space-4));
}
.ar-watch__sp.is-open,
.ar-watch__sp:focus {
  box-shadow: inset 0 0 0 var(--border-width-hairline) var(--border-strong);
  outline: none;
}
.ar-watch__sp:focus-visible {
  outline: var(--focus-ring-width) solid var(--focus-ring);
  outline-offset: 1px;
}
.ar-watch__sp-head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--space-3);
  align-items: center;
}
.ar-watch__sp-portrait {
  display: block;
  width: 56px;
  height: 56px;
}
.ar-watch__sp-photo,
.ar-watch__sp-mono {
  display: block;
  width: 56px;
  height: 56px;
  border-radius: var(--radius-control);
  object-fit: cover;
  background: var(--ground-sunken);
}
.ar-watch__sp-mono {
  display: inline-grid;
  place-items: center;
  color: var(--text-secondary);
  font: var(--type-signal-wide);
  letter-spacing: var(--tracking-signal);
}
.ar-watch__sp-who {
  display: grid;
  gap: 2px;
  min-width: 0;
}
.ar-watch__sp-name {
  font: var(--type-body);
  font-weight: var(--weight-semibold);
  color: var(--text-primary);
}
.ar-watch__sp-role {
  font: var(--type-signal-micro);
  letter-spacing: var(--tracking-signal);
  text-transform: uppercase;
  color: var(--text-tertiary);
}
.ar-watch__sp-about {
  font: var(--type-caption);
  color: var(--text-secondary);
}
.ar-watch__sp-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  margin-inline-start: calc(-1 * var(--space-2));
}
.ar-watch__sp-ext {
  display: inline-grid;
  place-items: center;
  width: var(--space-10);
  height: var(--space-10);
  border-radius: var(--radius-control);
  color: var(--text-secondary);
}
.ar-watch__sp-ext:hover,
.ar-watch__sp-ext:focus-visible {
  color: var(--text-link);
  background: var(--ground-sunken);
}
.ar-watch__sp-bio > summary {
  display: inline-flex;
  align-items: center;
  min-height: var(--space-8);
  font: var(--type-signal);
  letter-spacing: var(--tracking-signal);
  text-transform: uppercase;
  color: var(--text-secondary);
  cursor: pointer;
}
.ar-watch__sp-bio > p {
  margin: var(--space-1) 0 0;
  font: var(--type-body-s);
  color: var(--text-secondary);
}
.ar-watch__sp-h {
  margin: var(--space-1) 0 0;
  font: var(--type-signal);
  letter-spacing: var(--tracking-signal);
  text-transform: uppercase;
  color: var(--text-secondary);
}
.ar-watch__sp-moments {
  display: grid;
  gap: 2px;
}
.ar-watch__sp-link {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-3);
  align-items: center;
  min-height: var(--space-10);
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-control);
  color: var(--text-primary);
  text-decoration: none;
}
.ar-watch__sp-link:has(> .ar-watch__sp-frame) {
  grid-template-columns: 4rem minmax(0, 1fr);
}
.ar-watch__sp-link:hover {
  background: var(--ground-sunken);
}
.ar-watch__sp-link:focus-visible {
  outline: var(--focus-ring-width) solid var(--focus-ring);
  outline-offset: 1px;
}
.ar-watch__sp-frame {
  display: block;
  width: 4rem;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: var(--radius-sm);
  background: var(--ground-sunken);
}
.ar-watch__sp-frame img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.ar-watch__sp-text {
  display: grid;
  gap: 1px;
  min-width: 0;
  font: var(--type-body-s);
}
.ar-watch__sp-line {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font: var(--type-signal);
  letter-spacing: var(--tracking-signal);
  color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
}
.ar-watch__sp-where,
.ar-watch__sp-more,
.ar-watch__sp-else {
  margin: 0;
  font: var(--type-caption);
  color: var(--text-tertiary);
}
.ar-watch__sp-else a {
  display: inline-flex;
  align-items: center;
  min-height: var(--space-8);
  color: var(--text-link);
}
@media (pointer: coarse) {
  .ar-watch__sp-link,
  .ar-watch__sp-ext,
  .ar-watch__sp-bio > summary,
  .ar-watch__sp-else a,
  .ar-watch__ask-this,
  .ar-watch__rail > .ar-watch__ask .ar-input {
    min-height: 44px;
  }
  .ar-watch__sp-ext {
    width: 44px;
    height: 44px;
  }
  .ar-watch__now-who {
    min-height: 44px;
  }
}

/* ── the event overview (ADR 0094) ─────────────────────────────────────── */

/*
 * The front door of an event: hero, Continue watching and Ask, the room, the
 * highlights reel, then the program beside the faculty. One column on a phone
 * (44 px targets), two from 1024 px where it helps. Tokens only.
 */
.ar-event {
  /* How far the frames strip bleeds on a phone: the page's own gutter (ADR 0109). */
  --ar-event-bleed: var(--space-4);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-8);
  min-width: 0;
}
.ar-event > * {
  min-width: 0;
}
@media (max-width: 767px) {
  .ar-event {
    gap: var(--space-6);
  }
}

/* The hero. */
.ar-event__hero {
  display: grid;
  gap: var(--space-3);
  justify-items: start;
}
.ar-event__hero > .ar-control {
  margin-bottom: var(--space-2);
}
.ar-event__kicker {
  margin: 0;
  font: var(--type-signal);
  letter-spacing: var(--tracking-signal);
  text-transform: uppercase;
  color: var(--text-tertiary);
}
.ar-event__name {
  margin: 0;
  max-width: var(--measure-display);
  font: var(--type-display-m);
  letter-spacing: var(--tracking-display-m);
  color: var(--text-primary);
  text-wrap: balance;
  overflow-wrap: break-word;
}
@media (max-width: 767px) {
  .ar-event__name {
    font: var(--type-headline);
  }
}
.ar-event__lede {
  margin: 0;
  max-width: var(--measure-lede);
  font: var(--type-body-l);
  color: var(--text-primary);
  text-wrap: pretty;
}
.ar-event__about {
  margin: 0;
  max-width: var(--measure-comfort);
  font: var(--type-body);
  color: var(--text-secondary);
}
.ar-event__facts {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-4);
  margin: var(--space-1) 0 0;
  font: var(--type-signal);
  letter-spacing: var(--tracking-signal);
  text-transform: uppercase;
  color: var(--text-secondary);
}
.ar-event__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-2);
}
.ar-event__actions .ar-control {
  gap: var(--space-2);
  min-height: var(--space-10);
}

/*
 * The room on the page (ADR 0124): the video and the speakers first. The
 * hero is the date line (with the way back to Events) and the title, set
 * smaller so the stage begins on the first screen of a phone or a tablet;
 * the words about the event fold under About, under the speakers' row.
 */
.ar-event__hero--compact {
  gap: var(--space-2);
  /* The stage close under the title and the switch (ADR 0137). */
  margin-bottom: calc(var(--space-3) - var(--space-6));
}
.ar-event__hero--compact .ar-event__name {
  max-width: none;
  font: var(--type-headline);
  letter-spacing: var(--tracking-display-m);
}
@media (max-width: 767px) {
  .ar-event__hero--compact .ar-event__name {
    font: var(--type-title);
    letter-spacing: normal;
  }
}
.ar-event__crumb {
  color: var(--text-primary);
}
.ar-event[data-roomed] {
  gap: var(--space-6);
}
@media (max-width: 767px) {
  .ar-event[data-roomed] {
    gap: var(--space-4);
  }
}
.ar-event__about-fold {
  border-block: var(--border-width-hairline) solid var(--border-subtle);
}
.ar-event__about-fold > summary {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-height: var(--ar-event-target, var(--space-10));
  list-style: none;
  cursor: pointer;
  font: var(--type-signal);
  letter-spacing: var(--tracking-signal);
  text-transform: uppercase;
  color: var(--text-primary);
}
/* A finger on any width (a tablet too): 44 px. */
@media (pointer: coarse) {
  .ar-event__about-fold > summary {
    min-height: calc(var(--space-10) + var(--space-1));
  }
}
.ar-event__about-fold > summary::-webkit-details-marker {
  display: none;
}
.ar-event__about-fold > summary:focus-visible {
  outline: var(--focus-ring-width) solid var(--focus-ring);
  outline-offset: 2px;
}
.ar-event__about-facts {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text-secondary);
}
.ar-event__about-fold > summary > svg {
  flex: none;
  margin-left: auto;
  transition: transform var(--duration-fast) var(--ease-standard);
}
.ar-event__about-fold[open] > summary > svg {
  transform: rotate(180deg);
}
.ar-event__about-body {
  display: grid;
  gap: var(--space-3);
  justify-items: start;
  padding-bottom: var(--space-4);
}
@media (prefers-reduced-motion: reduce) {
  .ar-event__about-fold > summary > svg {
    transition: none;
  }
}

/* The strip of block frames: a reel across the width, scrolling sideways when it must. */
.ar-event__frames {
  list-style: none;
  margin: var(--space-4) 0 0;
  padding: 0 0 var(--space-1);
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(14rem, 1fr);
  gap: var(--space-3);
  width: 100%;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scrollbar-width: thin;
}
@media (max-width: 767px) {
  .ar-event__frames {
    grid-auto-columns: 70%;
    margin-inline: calc(-1 * var(--ar-event-bleed));
    padding-inline: var(--ar-event-bleed);
    scroll-padding-inline: var(--ar-event-bleed);
    width: auto;
    scrollbar-width: none;
  }
}
.ar-event__frame {
  min-width: 0;
  scroll-snap-align: start;
}
.ar-event__frame-link {
  display: grid;
  gap: var(--space-2);
  color: var(--text-primary);
  text-decoration: none;
}
.ar-event__frame-pic,
.ar-event__reel-pic {
  position: relative;
  display: block;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: var(--radius-sm);
  background: var(--bg-console-sunken);
  box-shadow: inset 0 0 0 var(--border-width-hairline) var(--border-subtle);
}
.ar-event__frame-pic img,
.ar-event__reel-pic img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--duration-standard) var(--ease-standard);
}
.ar-event__frame-link:hover .ar-event__frame-pic img,
.ar-event__reel-link:hover .ar-event__reel-pic img {
  transform: scale(1.02);
}
.ar-event__frame-empty {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: var(--text-inverse-tertiary);
}
.ar-event__frame-play {
  position: absolute;
  left: var(--space-2);
  bottom: var(--space-2);
  display: inline-grid;
  place-items: center;
  width: var(--space-8);
  height: var(--space-8);
  border-radius: var(--radius-control);
  background: var(--ground-dark);
  color: var(--text-inverse);
  opacity: var(--opacity-ghost);
  transition: opacity var(--duration-fast) var(--ease-standard);
}
.ar-event__frame-link:hover .ar-event__frame-play,
.ar-event__frame-link:focus-visible .ar-event__frame-play {
  opacity: var(--opacity-full);
}
.ar-event__frame-text {
  display: grid;
  gap: 2px;
}
.ar-event__frame-title {
  font: var(--type-body-s);
  font-weight: var(--weight-medium);
}
.ar-event__frame-link:hover .ar-event__frame-title {
  text-decoration: underline;
  text-underline-offset: 0.15em;
}
.ar-event__frame-meta,
.ar-event__reel-meta,
.ar-event__row-meta,
.ar-event__session-meta,
.ar-event__speaker-facts {
  font: var(--type-signal-micro);
  letter-spacing: var(--tracking-signal);
  text-transform: uppercase;
  color: var(--text-tertiary);
}

/* Continue watching and Ask, side by side when there is room. */
.ar-event__top {
  display: grid;
  gap: var(--space-3);
}
@media (min-width: 1024px) {
  .ar-event__top {
    grid-template-columns: repeat(auto-fit, minmax(22rem, 1fr));
    align-items: center;
  }
}
.ar-event__continue {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-control);
  background: var(--ground-raised);
  box-shadow: inset 0 0 0 var(--border-width-hairline) var(--border-subtle);
}
.ar-event__continue[hidden],
.ar-event__continue [hidden] {
  display: none;
}
.ar-event__continue-icon {
  display: inline-flex;
  color: var(--text-tertiary);
}
.ar-event__continue-text {
  flex: 1 1 12rem;
  display: grid;
  gap: 2px;
  font: var(--type-body-s);
  color: var(--text-primary);
}
.ar-event__continue-label {
  font: var(--type-signal-micro);
  letter-spacing: var(--tracking-signal);
  text-transform: uppercase;
  color: var(--text-tertiary);
}
.ar-event__continue .ar-control {
  gap: var(--space-2);
  min-height: var(--space-10);
}
.ar-event__ask {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-2);
  margin: 0;
  padding: var(--space-2) var(--space-2) var(--space-2) var(--space-4);
  border-radius: var(--radius-control);
  background: var(--ground-raised);
  box-shadow: inset 0 0 0 var(--border-width-hairline) var(--border-subtle);
}
.ar-event__ask-icon {
  display: inline-flex;
  color: var(--text-tertiary);
}
.ar-event__ask .ar-input {
  min-height: var(--space-10);
  border: 0;
  background: transparent;
  box-shadow: none;
  font: var(--type-body);
}
.ar-event__ask .ar-control {
  min-height: var(--space-10);
}
/* The borderless field still shows where the keyboard is (ADR 0113). */
.ar-event__ask .ar-input:focus-visible {
  outline: var(--focus-ring-width) solid var(--focus-ring);
  outline-offset: var(--focus-ring-offset);
}

/* Sections. */
.ar-event__section {
  display: grid;
  gap: var(--space-4);
  min-width: 0;
}
.ar-event__h2 {
  margin: 0;
  padding-top: var(--space-4);
  border-top: var(--border-width-hairline) solid var(--border-strong);
  font: var(--type-title);
  letter-spacing: var(--tracking-title);
  color: var(--text-primary);
}
.ar-event__columns {
  display: grid;
  gap: var(--space-8);
  align-items: start;
}
/* The program on its own (ADR 0116 §6): a readable measure, not the full canvas. */
.ar-event__columns > .ar-event__program {
  max-width: 64rem;
}
/* The program folded (ADR 0117 §2): one line, "Full program", that opens the whole schedule. */
.ar-event__fold > summary {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-1) var(--space-3);
  min-height: 44px;
  padding: var(--space-4) 0;
  border-top: var(--border-width-hairline) solid var(--border-strong);
  border-bottom: var(--border-width-hairline) solid var(--border-subtle);
  list-style: none;
  cursor: pointer;
}
.ar-event__fold > summary::-webkit-details-marker {
  display: none;
}
.ar-event__fold > summary:focus-visible {
  outline: var(--focus-ring-width) solid var(--focus-ring);
  outline-offset: 2px;
}
.ar-event__fold-title {
  font: var(--type-title);
  letter-spacing: var(--tracking-title);
  color: var(--text-primary);
}
.ar-event__fold-meta {
  flex: 1 1 auto;
  font: var(--type-caption);
  color: var(--text-secondary);
}
.ar-event__fold > summary svg {
  flex: 0 0 auto;
  transition: transform var(--duration-fast) var(--ease-standard);
}
.ar-event__fold[open] > summary svg {
  transform: rotate(180deg);
}
.ar-event__fold[open] > summary {
  margin-bottom: var(--space-4);
}
@media (prefers-reduced-motion: reduce) {
  .ar-event__fold > summary svg {
    transition: none;
  }
}

/* The reel: the six best highlights as frames. */
.ar-event__reel {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-5) var(--space-4);
  grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
}
@media (max-width: 767px) {
  .ar-event__reel {
    grid-template-columns: minmax(0, 1fr);
  }
}
.ar-event__reel-item {
  display: grid;
  gap: var(--space-2);
  min-width: 0;
  align-content: start;
}
.ar-event__reel-link {
  display: grid;
  gap: var(--space-2);
  color: var(--text-primary);
  text-decoration: none;
}
.ar-event__reel-link:hover .ar-event__reel-title {
  text-decoration: underline;
  text-underline-offset: 0.15em;
}
.ar-event__reel-time {
  position: absolute;
  left: var(--space-2);
  bottom: var(--space-2);
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-sm);
  background: var(--ground-dark);
  color: var(--text-inverse);
  font: var(--type-signal-micro);
  letter-spacing: var(--tracking-signal);
  font-variant-numeric: tabular-nums;
}
.ar-event__reel-title {
  font: var(--type-subtitle);
  letter-spacing: var(--tracking-title);
  text-wrap: balance;
  overflow-wrap: break-word;
}
.ar-event__reel-sum {
  margin: 0;
  font: var(--type-body-s);
  color: var(--text-secondary);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}
.ar-event__reel-item .ar-watch__clip {
  padding-inline: 0;
}
/* The card's foot: the clip line and Share (ADR 0104) side by side, wrapping on a phone. */
.ar-event__reel-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-3);
  min-width: 0;
}
.ar-event__reel-foot:empty {
  display: none;
}
.ar-event__reel-share {
  gap: var(--space-1);
  margin-left: auto;
}
.ar-event__reel-share[hidden],
.ar-event__share[hidden] {
  display: none;
}
.ar-event__share {
  gap: var(--space-2);
}
/* A card whose highlight has a rendered clip (ADR 0101): the frame plays it; the glyph says so. */
.ar-event__reel-clip {
  display: block;
  color: var(--text-primary);
  text-decoration: none;
  border-radius: var(--radius-sm);
}
.ar-event__reel-clip:hover .ar-event__reel-pic img {
  transform: scale(1.02);
}
.ar-event__reel-clip:hover .ar-event__frame-play,
.ar-event__reel-clip:focus-visible .ar-event__frame-play {
  opacity: var(--opacity-full);
}
/* The time badge has the frame's bottom-left; the glyph takes the right. */
.ar-event__reel-pic .ar-event__frame-play {
  left: auto;
  right: var(--space-2);
}
.ar-event__more > summary {
  display: inline-flex;
  width: auto;
  list-style: none;
  cursor: pointer;
}
.ar-event__more > summary::-webkit-details-marker {
  display: none;
}
.ar-event__rows {
  list-style: none;
  margin: var(--space-4) 0 0;
  padding: 0;
  display: grid;
}
.ar-event__row {
  display: grid;
  gap: var(--space-1);
  padding: var(--space-3) 0;
  border-top: var(--border-width-hairline) solid var(--border-subtle);
}
.ar-event__row-link {
  display: flex;
  gap: var(--space-3);
  align-items: baseline;
  min-height: var(--space-6);
  color: var(--text-primary);
  text-decoration: none;
}
.ar-event__row-link time,
.ar-event__time {
  font: var(--type-signal);
  letter-spacing: var(--tracking-signal);
  font-variant-numeric: tabular-nums;
  color: var(--text-secondary);
  white-space: nowrap;
}
.ar-event__row-link:hover .ar-event__row-title {
  text-decoration: underline;
  text-underline-offset: 0.15em;
}
.ar-event__row-title {
  font: var(--type-body);
  font-weight: var(--weight-medium);
}

/* The program: a timeline per day. */
.ar-event__day {
  display: grid;
  gap: var(--space-3);
}
.ar-event__day + .ar-event__day {
  margin-top: var(--space-4);
}
.ar-event__day-title {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-3);
  align-items: baseline;
  margin: 0;
  font: var(--type-subtitle);
  letter-spacing: var(--tracking-title);
  color: var(--text-primary);
}
.ar-event__day-date {
  font: var(--type-signal);
  letter-spacing: var(--tracking-signal);
  text-transform: uppercase;
  color: var(--text-tertiary);
}
.ar-event__timeline {
  /* "10:45 AM–12:00 PM" in the signal face, with room to spare. */
  --ar-event-time: 10.5rem;
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
}
.ar-event__session {
  position: relative;
  display: grid;
  grid-template-columns: var(--ar-event-time) minmax(0, 1fr);
  gap: var(--space-3);
  align-items: start;
  padding: var(--space-3) 0 var(--space-3) var(--space-5);
}
/* The rail: one hairline down the day, a mark per session; a recorded one is filled. */
.ar-event__session::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: var(--border-width-hairline);
  background: var(--border-subtle);
}
.ar-event__session::after {
  content: '';
  position: absolute;
  left: calc(-1 * var(--space-1) + var(--border-width-hairline) / 2);
  top: calc(var(--space-3) + 0.45em);
  width: var(--space-2);
  height: var(--space-2);
  border-radius: var(--radius-full);
  background: var(--ground-default);
  box-shadow: inset 0 0 0 var(--border-width-hairline) var(--text-tertiary);
}
.ar-event__session[data-recorded='true']::after {
  background: var(--accent-primary);
  box-shadow: none;
}
.ar-event__session--break {
  padding-block: var(--space-2);
}
.ar-event__session--break::after {
  width: var(--space-1);
  height: var(--space-1);
  left: calc(-1 * var(--space-1) / 2 + var(--border-width-hairline) / 2);
  top: calc(var(--space-2) + 0.55em);
}
.ar-event__session--break .ar-event__session-title {
  font: var(--type-body-s);
  color: var(--text-tertiary);
}
.ar-event__session-body {
  display: grid;
  gap: var(--space-1);
  min-width: 0;
  justify-items: start;
}
.ar-event__session-title {
  font: var(--type-body);
  font-weight: var(--weight-medium);
  color: var(--text-primary);
  overflow-wrap: break-word;
}
.ar-event__session-who {
  font: var(--type-body-s);
  color: var(--text-secondary);
}
.ar-event__session-details {
  display: grid;
  gap: var(--space-1);
  justify-items: start;
  width: 100%;
}
.ar-event__session-details > summary {
  display: grid;
  gap: var(--space-1);
  min-height: var(--space-6);
  list-style: none;
  cursor: pointer;
}
.ar-event__session-details > summary::-webkit-details-marker {
  display: none;
}
.ar-event__session-details > summary .ar-event__session-title::after {
  content: ' +';
  color: var(--text-tertiary);
}
.ar-event__session-details[open] > summary .ar-event__session-title::after {
  content: ' \2013';
}
.ar-event__session-summary {
  display: grid;
  gap: var(--space-2);
  margin-top: var(--space-1);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-control);
  background: var(--ground-raised);
  box-shadow: inset 0 0 0 var(--border-width-hairline) var(--border-subtle);
  font: var(--type-body-s);
  color: var(--text-primary);
}
.ar-event__session-summary p {
  margin: 0;
}
.ar-event__watch {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  min-height: var(--space-6);
  padding: var(--space-1) 0;
  font: var(--type-body-s);
  font-weight: var(--weight-medium);
  color: var(--text-link);
  text-decoration: none;
}
.ar-event__watch:hover {
  color: var(--text-link-hover);
  text-decoration: underline;
  text-underline-offset: 0.15em;
}
/* The event's film under the title (ADR 0132): one quiet link, its length beside it. */
.ar-event__film-link {
  margin: 0;
}
.ar-event__film-len {
  margin-left: var(--space-1);
  font-weight: var(--weight-regular);
  color: var(--text-tertiary);
  font-variant-numeric: tabular-nums;
}
.ar-event__zone {
  margin: 0;
  font: var(--type-caption);
  color: var(--text-tertiary);
}
/* A phone: one column, every target 44 px and up. */
@media (max-width: 767px) {
  .ar-event {
    --ar-event-target: calc(var(--space-10) + var(--space-1));
  }
  .ar-event__session {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-1);
  }
  .ar-event__watch,
  .ar-event__row-link,
  .ar-event__more > summary,
  .ar-event__actions .ar-control,
  .ar-event__continue .ar-control,
  .ar-event__ask .ar-control,
  .ar-event__ask .ar-input,
  .ar-event__hero > .ar-control,
  .ar-event__session-details > summary {
    min-height: var(--ar-event-target);
  }
  .ar-event__row-link {
    align-items: center;
  }
  .ar-event .ar-watch__clip-link {
    display: inline-flex;
    align-items: center;
    min-height: var(--ar-event-target);
    padding-inline: var(--space-1);
  }
}

/*
 * The faculty (ADR 0100), its own section since ADR 0116 §6: a grid of
 * cards across the page, before the program — the portrait, who they are,
 * their links, a short bio, where they appear (each session with its time and
 * a jump into the room) and their best highlights as frames.
 */
.ar-event__section-lede {
  margin: calc(-1 * var(--space-2)) 0 0;
  font: var(--type-caption);
  color: var(--text-tertiary);
}
.ar-event__speakers {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-4);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 21rem), 1fr));
}
.ar-event__speaker {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-2);
  min-width: 0;
  padding: var(--space-4);
  border-radius: var(--radius-box);
  background: var(--ground-raised);
  box-shadow: inset 0 0 0 var(--border-width-hairline) var(--border-subtle);
}
.ar-event__speaker-top {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--space-3);
  align-items: center;
  width: 100%;
}
.ar-event__portrait {
  display: block;
  width: 72px;
  height: 72px;
}
.ar-event__monogram {
  display: inline-grid;
  place-items: center;
  width: 72px;
  height: 72px;
  border-radius: var(--radius-control);
  background: var(--ground-sunken);
  color: var(--text-secondary);
  font: var(--type-signal-wide);
  letter-spacing: var(--tracking-signal);
}
.ar-event__photo {
  display: block;
  width: 72px;
  height: 72px;
  border-radius: var(--radius-control);
  object-fit: cover;
  background: var(--ground-sunken);
}
.ar-event__speaker-head {
  display: grid;
  gap: 2px;
  min-width: 0;
}
.ar-event__speaker-name {
  font: var(--type-subtitle);
  color: var(--text-primary);
}
.ar-event__speaker-role,
.ar-event__speaker-label {
  font: var(--type-signal-micro);
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: var(--tracking-signal);
}
.ar-event__speaker-label {
  margin-top: var(--space-1);
}
.ar-event__speaker-about,
.ar-event__speaker-bio {
  font: var(--type-body-s);
  color: var(--text-secondary);
}
/* The bio: a short line or three, never the whole page. */
.ar-event__speaker-bio {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  overflow: hidden;
  overflow-wrap: anywhere;
}
.ar-event__speaker-facts {
  font: var(--type-caption);
  color: var(--text-tertiary);
}
.ar-event__appears,
.ar-event__speaker-hls {
  list-style: none;
  margin: 0;
  padding: 0;
  width: 100%;
}
.ar-event__appears {
  display: grid;
  gap: 2px;
}
.ar-event__appear {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  column-gap: var(--space-2);
  align-items: baseline;
  min-height: var(--space-10);
  padding: var(--space-1) var(--space-2);
  margin-inline: calc(-1 * var(--space-2));
  border-radius: var(--radius-control);
  color: var(--text-primary);
  text-decoration: none;
}
a.ar-event__appear:hover {
  background: var(--ground-sunken);
}
a.ar-event__appear:focus-visible {
  outline: var(--focus-ring-width) solid var(--focus-ring);
  outline-offset: 1px;
}
.ar-event__appear--still {
  grid-template-columns: minmax(0, 1fr);
}
.ar-event__appear-title {
  font: var(--type-body-s);
  color: var(--text-link);
}
.ar-event__appear--still .ar-event__appear-title {
  color: var(--text-primary);
}
.ar-event__appear-when {
  font: var(--type-caption);
  color: var(--text-tertiary);
  font-variant-numeric: tabular-nums;
}
.ar-event__speaker-hls {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-2);
}
.ar-event__speaker-hl {
  display: grid;
  gap: var(--space-1);
  color: var(--text-primary);
  text-decoration: none;
}
.ar-event__speaker-hl:focus-visible {
  outline: var(--focus-ring-width) solid var(--focus-ring);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}
.ar-event__speaker-hl-pic {
  position: relative;
  display: block;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: var(--radius-sm);
  background: var(--ground-sunken);
}
.ar-event__speaker-hl-pic img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.ar-event__speaker-hl-pic time {
  position: absolute;
  left: 2px;
  bottom: 2px;
  padding: 0 var(--space-1);
  border-radius: var(--radius-sm);
  background: var(--overlay-ink-fill);
  color: var(--plate-ink-text);
  font: var(--type-signal-micro);
  letter-spacing: var(--tracking-signal);
}
.ar-event__speaker-hl-title {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
  font: var(--type-caption);
  color: var(--text-secondary);
}
.ar-event__speaker-hl:hover .ar-event__speaker-hl-title {
  color: var(--text-primary);
}
.ar-event__speaker .ar-event__watch {
  margin-top: auto;
}
/* The person's links: icon buttons, each a 44 px target, drawn flush with the text. */
.ar-event__speaker-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  margin-inline-start: calc(-1 * var(--space-3));
  margin-block: calc(-1 * var(--space-1));
}
.ar-event__speaker-link {
  display: inline-grid;
  place-items: center;
  width: calc(var(--space-10) + var(--space-1));
  height: calc(var(--space-10) + var(--space-1));
  border-radius: var(--radius-control);
  color: var(--text-secondary);
  text-decoration: none;
}
.ar-event__speaker-link:hover,
.ar-event__speaker-link:focus-visible {
  color: var(--text-link);
  background: var(--ground-sunken);
}
.ar-event__speaker-link .ar-ob-icon {
  display: block;
}
@media (pointer: coarse) {
  .ar-event__appear {
    min-height: 44px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ar-event__frame-pic img,
  .ar-event__reel-pic img,
  .ar-event__frame-play {
    transition: none;
  }
}

/* ── the clip viewer (ADR 0101) ───────────────────────────────────────── */

/*
 * One native <dialog> for every clip on the page, inert until a Play. The
 * browser lays it in the top layer, holds focus inside and closes it on Esc;
 * the backdrop is the modal scrim. Tokens only; the box fills the dialog so
 * a click outside it is a click on the dialog (the script closes it).
 */
.ar-clip {
  --ar-clip-target: 2.75rem;
  width: min(56rem, calc(100vw - 2 * var(--space-4)));
  max-height: calc(100dvh - 2 * var(--space-4));
  margin: auto;
  padding: 0;
  border: 0;
  border-radius: var(--radius-box);
  background: var(--ground-raised);
  color: var(--text-primary);
  box-shadow: var(--shadow-lg);
  overflow: auto;
}
.ar-clip::backdrop {
  background: var(--scrim-modal);
}
.ar-clip__box {
  display: grid;
  gap: var(--space-3);
  padding: var(--space-4);
}
.ar-clip__head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: auto auto auto;
  gap: var(--space-1) var(--space-3);
  align-items: start;
}
.ar-clip__kicker {
  margin: 0;
  font: var(--type-signal-micro);
  letter-spacing: var(--tracking-signal);
  text-transform: uppercase;
  color: var(--text-tertiary);
}
.ar-clip__title {
  margin: 0;
  font: var(--type-subtitle);
  letter-spacing: var(--tracking-title);
  text-wrap: balance;
  overflow-wrap: break-word;
}
.ar-clip__meta {
  margin: 0;
  font: var(--type-body-s);
  color: var(--text-secondary);
}
.ar-clip__meta:empty,
.ar-clip__kicker:empty {
  display: none;
}
.ar-clip__close {
  grid-column: 2;
  grid-row: 1 / span 3;
  min-width: var(--ar-clip-target);
  min-height: var(--ar-clip-target);
}
.ar-clip__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}
.ar-clip__actions .ar-control {
  min-height: var(--ar-clip-target);
}
.ar-clip__link {
  font: var(--type-body-s);
}
.ar-clip__link[hidden],
.ar-clip__hint[hidden] {
  display: none;
}
.ar-clip__hint {
  margin: 0;
  font: var(--type-caption);
  color: var(--text-secondary);
}
@media (max-width: 767px) {
  .ar-clip__box {
    padding: var(--space-3);
  }
  .ar-clip__actions .ar-control {
    flex: 1 1 auto;
    justify-content: center;
  }
}
/*
 * A phone on its side (ADR 0109): the clip fits the screen's height with its
 * title above, instead of a full-width 16:9 that runs past the bottom.
 */
@media (max-height: 560px) {
  .ar-clip__stage {
    width: min(100%, calc((100dvh - 15rem) * 16 / 9));
    justify-self: center;
  }
}
/* Phones: the viewer is a bottom sheet too (ADR 0104), full width, above the home bar. */
@media (max-width: 640px) {
  .ar-clip {
    width: 100vw;
    max-width: none;
    max-height: calc(100dvh - var(--space-8));
    margin: auto 0 0;
    border-radius: var(--radius-box) var(--radius-box) 0 0;
  }
  .ar-clip__box {
    padding-bottom: max(var(--space-3), env(safe-area-inset-bottom));
  }
}

/* ── the share sheet (ADR 0104) ───────────────────────────────────────── */

/*
 * One native <dialog> per room that every Share on the page opens: a preview
 * of what is shared (the card or the frame, the title, the event, the time),
 * the chooser (this moment, this highlight, the event) as pills, the places
 * as a grid of tiles, the link itself, the surface's note. A centred card on
 * desktop; on phones a sheet from the bottom, full width, padded past the
 * safe area, every target 44 px. Tokens only; nothing in it loads before it
 * opens.
 */
.ar-share {
  --ar-share-target: 2.75rem;
  width: min(34rem, calc(100vw - 2 * var(--space-4)));
  max-height: calc(100dvh - 2 * var(--space-4));
  margin: auto;
  padding: 0;
  border: 0;
  border-radius: var(--radius-box);
  background: var(--ground-raised);
  color: var(--text-primary);
  box-shadow: var(--shadow-lg);
  overflow: auto;
}
.ar-share::backdrop {
  background: var(--scrim-modal);
}
.ar-share__box {
  display: grid;
  gap: var(--space-4);
  padding: var(--space-5);
}
.ar-share__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}
.ar-share__h {
  margin: 0;
  font: var(--type-subtitle);
  letter-spacing: var(--tracking-title);
}
.ar-share__close {
  min-width: var(--ar-share-target);
  min-height: var(--ar-share-target);
}
.ar-share__preview {
  display: grid;
  grid-template-columns: 9rem minmax(0, 1fr);
  gap: var(--space-3);
  align-items: center;
}
.ar-share__pic {
  position: relative;
  display: block;
  aspect-ratio: 1200 / 630;
  overflow: hidden;
  border-radius: var(--radius-sm);
  background: var(--bg-console-sunken);
  box-shadow: inset 0 0 0 var(--border-width-hairline) var(--border-subtle);
}
.ar-share__pic img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.ar-share__pic img[hidden] {
  display: none;
}
.ar-share__pic-empty {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: var(--text-tertiary);
}
.ar-share__pic-empty[hidden] {
  display: none;
}
.ar-share__text {
  display: grid;
  gap: 2px;
  min-width: 0;
}
.ar-share__title {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font: var(--type-body);
  font-weight: var(--weight-medium);
  color: var(--text-primary);
  overflow-wrap: anywhere;
}
.ar-share__event {
  font: var(--type-body-s);
  color: var(--text-secondary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ar-share__event[hidden] {
  display: none;
}
.ar-share__kicker {
  font: var(--type-signal-micro);
  letter-spacing: var(--tracking-signal);
  text-transform: uppercase;
  color: var(--text-tertiary);
  font-variant-numeric: tabular-nums;
}
.ar-share__kicker:empty {
  display: none;
}
.ar-share__what {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}
.ar-share__pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--space-10);
  padding: 0 var(--space-4);
  border: var(--border-width-hairline) solid var(--border-default);
  border-radius: var(--radius-control);
  background: transparent;
  color: var(--text-secondary);
  font: var(--type-signal);
  letter-spacing: var(--tracking-signal);
  text-transform: uppercase;
  cursor: pointer;
}
.ar-share__pill:hover {
  color: var(--text-primary);
  border-color: var(--border-strong);
}
.ar-share__pill[aria-pressed='true'] {
  background: var(--text-primary);
  border-color: var(--text-primary);
  color: var(--ground-default);
}
.ar-share__pill[hidden] {
  display: none;
}
.ar-share__pill:focus-visible,
.ar-share__to:focus-visible {
  outline: var(--focus-ring-width) solid var(--focus-ring);
  outline-offset: 2px;
}
.ar-share__where {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(5.5rem, 1fr));
  gap: var(--space-2);
}
/* The six places on one row in the desktop card: auto-fill left "More…" alone below. */
@media (min-width: 641px) {
  .ar-share__where {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
}
.ar-share__to {
  display: grid;
  justify-items: center;
  align-content: center;
  gap: var(--space-1);
  min-height: 4.25rem;
  padding: var(--space-2);
  border: var(--border-width-hairline) solid var(--border-subtle);
  border-radius: var(--radius-control);
  background: transparent;
  color: var(--text-primary);
  font: var(--type-caption);
  text-decoration: none;
  cursor: pointer;
}
.ar-share__to:hover {
  background: var(--veil-on-cream);
  border-color: var(--border-default);
}
.ar-share__to[hidden] {
  display: none;
}
.ar-share__link {
  display: block;
}
.ar-share__link .ar-input {
  min-height: var(--space-10);
  font: var(--type-caption);
  font-family: var(--font-signal);
}
.ar-share__note {
  margin: 0;
  font: var(--type-caption);
  color: var(--text-tertiary);
}
.ar-share__status {
  margin: 0;
  min-height: 1.2em;
  font: var(--type-caption);
  color: var(--signal-on-cream);
}
@media (max-width: 640px) {
  .ar-share {
    width: 100vw;
    max-width: none;
    max-height: calc(100dvh - var(--space-8));
    margin: auto 0 0;
    border-radius: var(--radius-box) var(--radius-box) 0 0;
  }
  .ar-share__box {
    gap: var(--space-3);
    padding: var(--space-4) max(var(--space-4), env(safe-area-inset-right))
      max(var(--space-4), env(safe-area-inset-bottom))
      max(var(--space-4), env(safe-area-inset-left));
  }
  .ar-share__preview {
    grid-template-columns: 7rem minmax(0, 1fr);
  }
  .ar-share__where {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .ar-share__to {
    min-height: var(--ar-share-target);
  }
  .ar-share__pill {
    flex: 1 1 auto;
    min-height: var(--ar-share-target);
  }
}
@media (prefers-reduced-motion: no-preference) {
  .ar-share[open],
  .ar-clip[open] {
    animation: ar-sheet-in 160ms ease-out;
  }
}
@keyframes ar-sheet-in {
  from {
    opacity: 0;
    transform: translateY(var(--space-3));
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* ── rules the room shares with the workspace stylesheet ──────────────── */

/*
 * The room and the overview write three workspace classes (a dim line, a
 * notice, a plain list). The workspace and the console load workspace.css
 * beside this file; the public doors (arm-age.com, a hosted client newsroom,
 * ADR 0095 §3) load this file alone, so the same three rules are here too,
 * unchanged.
 */
.ar-ws-notice {
  margin: 0;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-control);
  box-shadow: inset 0 0 0 var(--border-width-hairline) var(--danger-500);
  color: var(--danger-on-cream);
  font: var(--type-body-s);
}
.ar-ws-notice[data-tone='ok'] {
  box-shadow: inset 0 0 0 var(--border-width-hairline) var(--signal-500);
  color: var(--signal-on-cream);
}
.ar-ws-dim {
  color: var(--text-secondary);
  font: var(--type-body-s);
}
.ar-ws-list {
  margin: 0;
  padding-inline-start: var(--space-4);
}
/* The visually hidden heading and label the room writes (auth.css has the same rule for the app Workers). */
.ar-console-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ── the console's faculty editing (ADR 0100; the console loads this file too) ── */

.ar-cs-edit,
.ar-cs-paste {
  margin-top: var(--space-3);
}
.ar-cs-edit > summary,
.ar-cs-paste > summary {
  list-style: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  min-height: var(--space-10);
}
.ar-cs-edit > summary::-webkit-details-marker,
.ar-cs-paste > summary::-webkit-details-marker {
  display: none;
}
.ar-cs-edit[open] > summary,
.ar-cs-paste[open] > summary {
  margin-bottom: var(--space-3);
}
.ar-cs-edit .ar-cs-form + .ar-cs-line {
  margin-top: var(--space-3);
}
.ar-cs-links {
  display: grid;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  border: 0;
  min-width: 0;
}
.ar-cs-links > legend {
  padding: 0;
  margin-bottom: var(--space-1);
}
.ar-cs-links .ar-cs-line .ar-cs-url {
  flex: 1 1 16rem;
  min-width: 0;
}

/*
 * Words longer than the box (ADR 0109): "hepaticoduodenostomy" in a chapter
 * title at 320 px, a URL in an answer, a long name on a card break inside the
 * box instead of pushing the page sideways.
 */
.ar-watch,
.ar-event,
.ar-share,
.ar-clip {
  /* break-word, not anywhere: a word breaks only when it cannot fit its own
     line, so "WhatsApp" in a share target never splits to fill a grid. */
  overflow-wrap: break-word;
}

/*
 * Touch screens at every width (ADR 0109): a tablet held either way gets the
 * phone's 44 px targets on the room, the overview and the dialogs, not only a
 * narrow window. A pointer keeps the denser desktop sizes.
 */
@media (pointer: coarse) {
  /* The player's own targets (the deck, its select, the line) live in player.css. */
  .ar-watch .ar-watch__chip,
  .ar-watch .ar-control.ar-size--sm,
  .ar-watch .ar-watch__speaker .ar-input,
  .ar-watch__tab,
  .ar-event .ar-control.ar-size--sm,
  .ar-event .ar-control,
  .ar-event__more > summary,
  .ar-event__session-details > summary,
  .ar-share .ar-control,
  .ar-clip .ar-control {
    min-height: 44px;
  }
  .ar-watch__chapter-link,
  .ar-event__row-link,
  .ar-event__watch,
  .ar-event__reel-link {
    min-height: 44px;
    align-items: center;
  }
  .ar-watch__clip-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    min-width: 44px;
    padding-inline: var(--space-1);
  }
}

/*
 * The highlights reel (ADR 0119): one clip at a time in the one player, the
 * feed snapping vertically. A desktop shows a centred 16:9 stage up to 960 px
 * with the identity strip and the three actions under it; a phone fills the
 * screen with the podium cropped to portrait at the recording's crop
 * (--ar-reel-crop, set by the script from the console's value), the words at
 * the foot and the actions on the right. No counts, no likes, no comments.
 * Reduced motion: the snap cuts, nothing animates.
 */
.ar-reel {
  --ar-reel-h: calc(100svh - var(--ar-watch-stick, 0px));
  --ar-reel-crop: 50%;
  position: relative;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  grid-template-columns: minmax(0, 1fr);
  min-width: 0;
  max-width: 100%;
  background: var(--ground-dark);
  color: var(--text-inverse);
  border-radius: var(--radius-box);
}
.ar-reel__head {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-3) var(--space-2);
  color: var(--text-inverse);
}
.ar-reel__head .ar-control {
  color: var(--text-inverse);
  min-width: 44px;
  min-height: 44px;
}
/* Where the viewer is in the feed: one thin segment a clip, the one playing filling. */
.ar-reel__progress {
  position: absolute;
  inset: var(--space-1) var(--space-3) auto;
  display: flex;
  gap: 3px;
  height: 2px;
  pointer-events: none;
}
.ar-reel__seg {
  flex: 1;
  min-width: 2px;
  overflow: hidden;
  border-radius: 1px;
  background: var(--plate-ink-edge);
}
.ar-reel__seg-fill {
  --ar-reel-p: 0;
  display: block;
  height: 100%;
  background: var(--text-inverse);
  transform: scaleX(var(--ar-reel-p));
  transform-origin: left center;
}
.ar-reel__heading {
  flex: 1;
  min-width: 0;
  margin: 0;
  font: var(--type-caption);
  font-weight: var(--weight-medium);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ar-reel__event {
  color: var(--text-inverse-secondary);
}
.ar-reel__nav {
  display: flex;
  gap: var(--space-1);
}
.ar-reel__feed {
  list-style: none;
  margin: 0;
  padding: 0;
  height: var(--ar-reel-h);
  overflow-y: auto;
  overscroll-behavior: contain;
  scroll-snap-type: y mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
}
.ar-reel__feed::-webkit-scrollbar {
  display: none;
}
.ar-reel__feed:focus {
  outline: none;
}
.ar-reel__item {
  scroll-snap-align: start;
  scroll-snap-stop: always;
  height: var(--ar-reel-h);
  display: grid;
  align-content: center;
  justify-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4) var(--space-6);
  box-sizing: border-box;
}
.ar-reel {
  scroll-margin-top: calc(var(--ar-watch-stick, 0px) + var(--space-2));
}
.ar-reel__stage {
  width: min(960px, 100%, calc((var(--ar-reel-h) - 9rem) * 16 / 9));
}
.ar-reel__player {
  width: 100%;
}
/* Under the stage: the clip's words and person, then Share and Save. */
.ar-reel__info {
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);
  width: min(960px, 100%);
}
.ar-reel__about {
  flex: 1;
  min-width: 0;
  display: grid;
  gap: var(--space-1);
}
.ar-reel__clip-title {
  margin: 0;
  font: var(--type-subtitle);
  font-weight: var(--weight-semibold);
  color: var(--text-inverse);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.ar-reel__byline {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-width: 0;
}
.ar-reel__who {
  flex: 1;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-width: 0;
  min-height: 44px;
  color: var(--text-inverse);
  text-decoration: none;
}
.ar-reel__who:focus-visible,
.ar-reel__full:focus-visible {
  outline: var(--focus-ring-width) solid var(--focus-ring);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}
.ar-reel__photo {
  flex: none;
  width: 32px;
  height: 32px;
  border-radius: var(--radius-control);
  object-fit: cover;
  background: var(--overlay-ink-fill);
}
.ar-reel__monogram {
  display: grid;
  place-items: center;
  font: var(--type-caption);
  font-weight: var(--weight-semibold);
}
/* The person on one line: name, then the credential, cut with an ellipsis. */
.ar-reel__name {
  min-width: 0;
  font: var(--type-body-s);
  font-weight: var(--weight-semibold);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ar-reel__credential {
  font-weight: var(--weight-regular);
  color: var(--text-inverse-secondary);
}
/* Full talk: a compact pill, the one way back into the whole session. */
.ar-reel__full {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  min-height: 36px;
  padding: 0 var(--space-3);
  border-radius: var(--radius-control);
  background: var(--text-inverse);
  color: var(--ground-dark);
  font: var(--type-body-s);
  font-weight: var(--weight-semibold);
  text-decoration: none;
  white-space: nowrap;
}
@media (pointer: coarse) {
  .ar-reel__full {
    min-height: 44px;
  }
}
/* Share and Save: an icon in a 44 px softly rounded square (never a circle, ADR 0121), a small word under it. */
.ar-reel__actions {
  display: flex;
  gap: var(--space-3);
}
.ar-reel__act {
  display: grid;
  justify-items: center;
  gap: var(--space-1);
  min-width: 44px;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: var(--text-inverse);
  font: var(--type-caption);
  cursor: pointer;
}
.ar-reel__act[hidden] {
  display: none;
}
.ar-reel__act-icon {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: var(--border-width-hairline) solid var(--plate-ink-edge);
  border-radius: var(--radius-md);
  background: var(--overlay-ink-fill);
}
.ar-reel__act:focus-visible {
  outline: none;
}
.ar-reel__act:focus-visible .ar-reel__act-icon {
  outline: var(--focus-ring-width) solid var(--focus-ring);
  outline-offset: 2px;
}
.ar-reel__act[aria-pressed='true'] .ar-reel__act-icon {
  border-color: var(--signal-300);
  color: var(--signal-300);
}
.ar-reel__act-label {
  font: var(--type-caption);
  line-height: 1;
}
/* The captions' size, known to the script that places them (reel-player.ts CUE_LINE). */
.ar-reel__player video::cue {
  font-size: 22px;
  line-height: 29px;
}
@media (max-width: 767px) {
  .ar-reel__player video::cue {
    font-size: 18px;
    line-height: 24px;
  }
}
.ar-reel__sound {
  position: absolute;
  top: var(--space-3);
  left: 50%;
  z-index: 3;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 44px;
  padding: 0 var(--space-4);
  border: var(--border-width-hairline) solid var(--plate-ink-edge);
  border-radius: var(--radius-control);
  background: var(--overlay-ink-fill);
  color: var(--plate-ink-text);
  font: var(--type-body-s);
  cursor: pointer;
}
.ar-reel__sound[hidden] {
  display: none;
}
.ar-reel__sound:focus-visible {
  outline: var(--focus-ring-width) solid var(--focus-ring);
  outline-offset: 2px;
}
.ar-reel__next-note {
  position: absolute;
  left: 50%;
  bottom: var(--space-8);
  z-index: 5;
  transform: translateX(-50%);
  margin: 0;
}
.ar-reel__next-note[hidden] {
  display: none;
}
/*
 * A phone: one clip a screen, the podium cropped to portrait, the words at the
 * foot, Share and Save on the right above them. On a public door (--screen)
 * the reel fills the whole screen over the page; a signed-in surface keeps it
 * under its own menu bar, the script sizing the feed to the window. The feed
 * moves by a swipe: no chevrons.
 */
@media (max-width: 767px) {
  .ar-reel {
    border-radius: 0;
  }
  .ar-reel__nav {
    display: none;
  }
  .ar-reel--screen {
    position: fixed;
    inset: 0;
    z-index: var(--z-modal);
    grid-template-rows: minmax(0, 1fr);
  }
  .ar-reel--screen .ar-reel__head {
    position: absolute;
    inset: 0 0 auto;
    z-index: 4;
    padding-top: calc(var(--space-3) + env(safe-area-inset-top, 0px));
    background: var(--scrim-image);
    pointer-events: none;
  }
  .ar-reel--screen .ar-reel__progress {
    top: calc(var(--space-1) + env(safe-area-inset-top, 0px));
  }
  .ar-reel--screen .ar-reel__head .ar-control {
    pointer-events: auto;
  }
  /* Below the player's top row of options, never over them. */
  .ar-reel__sound {
    top: 3.5rem;
  }
  .ar-reel--screen .ar-reel__sound {
    top: calc(7.75rem + env(safe-area-inset-top, 0px));
  }
  .ar-reel__head {
    gap: var(--space-2);
    padding-inline: var(--space-2);
  }
  .ar-reel--screen .ar-reel__feed,
  .ar-reel--screen .ar-reel__item {
    --ar-reel-h: 100svh;
  }
  /* The player's top controls sit under the reel's own bar. */
  .ar-reel--screen .ar-reel__player .ar-watch__deck {
    padding-top: calc(4.5rem + env(safe-area-inset-top, 0px));
    box-sizing: border-box;
  }
  .ar-reel__item {
    position: relative;
    display: block;
    padding: 0;
  }
  .ar-reel__stage,
  .ar-reel__player {
    position: absolute;
    inset: 0;
    width: auto;
    border-radius: 0;
  }
  .ar-reel__player .ar-watch__angle {
    height: 100%;
  }
  .ar-reel__player .ar-watch__video {
    height: 100%;
    aspect-ratio: auto;
    object-fit: cover;
    object-position: var(--ar-reel-crop, 50%) 50%;
  }
  /* The rail over the panel; the panel above the player's own line. */
  .ar-reel__info {
    position: absolute;
    left: var(--space-3);
    right: var(--space-3);
    bottom: calc(3.75rem + env(safe-area-inset-bottom, 0px));
    z-index: 3;
    width: auto;
    flex-direction: column-reverse;
    align-items: stretch;
    gap: var(--space-3);
    pointer-events: none;
  }
  .ar-reel__actions {
    align-self: flex-end;
    flex-direction: column;
    pointer-events: auto;
  }
  .ar-reel__about {
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-sm);
    background: var(--plate-ink-fill-compact);
  }
  .ar-reel__clip-title {
    font: var(--type-body);
    font-weight: var(--weight-semibold);
  }
  .ar-reel__who,
  .ar-reel__full {
    pointer-events: auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ar-reel__feed {
    scroll-behavior: auto;
  }
}

/* The overview's "Play as reel" tile: the first of the highlights. */
.ar-event__reel-play {
  position: relative;
  display: grid;
  align-content: end;
  min-height: 12rem;
  height: 100%;
  overflow: hidden;
  border-radius: var(--radius-sm);
  background: var(--ground-dark);
  color: var(--text-inverse);
  text-decoration: none;
}
.ar-event__reel-play img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.5;
}
.ar-event__reel-play-text {
  position: relative;
  display: grid;
  gap: var(--space-1);
  padding: var(--space-4);
}
.ar-event__reel-play-title {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font: var(--type-subtitle);
  font-weight: var(--weight-semibold);
}
.ar-event__reel-play-meta {
  font: var(--type-signal-micro);
  letter-spacing: var(--tracking-signal);
  text-transform: uppercase;
  color: var(--text-inverse-secondary);
}
.ar-event__reel-play:focus-visible {
  outline: var(--focus-ring-width) solid var(--focus-ring);
  outline-offset: 2px;
}

/* The console's Shorts preview (ADR 0119): the one player, portrait. */
.ar-shorts__player .ar-watch__video {
  aspect-ratio: 9 / 16;
  object-fit: contain;
}

/*
 * A page that makes one want to scroll (ADR 0129), with the room on it.
 * The highlights: one row, sideways on a phone and a tablet, the "Play as
 * reel" tile first; "All highlights (N)" under it. The speakers the row under
 * the stage does not list: a compact grid.
 */
.ar-event[data-roomed] .ar-event__reel {
  grid-template-columns: none;
  grid-auto-flow: column;
  grid-auto-columns: minmax(12rem, 1fr);
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scrollbar-width: thin;
  padding-bottom: var(--space-1);
}
.ar-event[data-roomed] .ar-event__reel > li {
  scroll-snap-align: start;
}
@media (max-width: 1023px) {
  .ar-event[data-roomed] .ar-event__reel {
    grid-auto-columns: minmax(11rem, 42%);
  }
}
@media (max-width: 767px) {
  .ar-event[data-roomed] .ar-event__reel {
    grid-auto-columns: 64%;
    margin-inline: calc(-1 * var(--ar-event-bleed));
    padding-inline: var(--ar-event-bleed);
    scroll-padding-inline: var(--ar-event-bleed);
    scrollbar-width: none;
  }
}
.ar-event__people {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-3) var(--space-4);
  grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));
}
.ar-event__person {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-rows: auto auto;
  column-gap: var(--space-3);
  align-items: center;
  min-height: var(--space-10);
  color: var(--text-primary);
  text-decoration: none;
}
.ar-event__person-pic {
  grid-row: 1 / span 2;
  display: block;
  width: 48px;
  height: 48px;
}
.ar-event__person-pic .ar-event__photo,
.ar-event__person-pic .ar-event__monogram {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-control);
  object-fit: cover;
}
.ar-event__person-name {
  font: var(--type-body-s);
  font-weight: var(--weight-medium);
  align-self: end;
}
.ar-event__person-about {
  font: var(--type-caption);
  color: var(--text-secondary);
  align-self: start;
}
a.ar-event__person:hover .ar-event__person-name {
  text-decoration: underline;
}
a.ar-event__person:focus-visible {
  outline: var(--focus-ring-width) solid var(--focus-ring);
  outline-offset: 2px;
}
/* The other videos' frames under the room: small, a strip to choose from (the stage's plate already steps through them). */
.ar-event[data-roomed] .ar-event__frames {
  grid-auto-columns: 14rem;
  justify-content: start;
}
@media (max-width: 767px) {
  .ar-event[data-roomed] .ar-event__frames {
    grid-auto-columns: 46%;
  }
}

/*
 * Days and workshops (ADR 0131). The Day switch under the title: plain text
 * links, the shown day underlined; no pill, no circle. Each link is at least
 * 44 px tall so a finger finds it. Server-rendered: a tap loads the day.
 */
.ar-event__days {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 0 var(--space-5);
  margin: 0;
  max-width: 100%;
}
.ar-event__day-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding-inline: var(--space-1);
  font: var(--type-body);
  font-weight: 600;
  color: var(--text-secondary);
  text-decoration: none;
  border-bottom: 2px solid transparent;
  overflow-wrap: anywhere;
}
.ar-event__day-link:hover {
  color: var(--text-primary);
}
.ar-event__day-link[aria-current='page'] {
  color: var(--text-primary);
  border-bottom-color: currentColor;
}
.ar-event__day-link:focus-visible {
  outline: var(--focus-ring-width) solid var(--focus-ring);
  outline-offset: 2px;
}
.ar-event__day-intro {
  display: grid;
  gap: var(--space-1);
  max-width: var(--measure-comfort);
}
.ar-event__day-heading {
  margin: 0;
  font: var(--type-title);
  letter-spacing: var(--tracking-title);
  color: var(--text-primary);
  text-wrap: balance;
}
.ar-event__day-line {
  margin: 0;
  font: var(--type-body);
  color: var(--text-secondary);
  text-wrap: pretty;
}
/*
 * A phone (ADR 0137): the switch is one line under the title, a little smaller,
 * and slides sideways if a long day name ever needs it; every link stays 44 px tall.
 */
@media (max-width: 767px) {
  .ar-event__days {
    flex-wrap: nowrap;
    gap: 0 var(--space-4);
    overflow-x: auto;
    scrollbar-width: none;
  }
  .ar-event__days::-webkit-scrollbar {
    display: none;
  }
  .ar-event__day-link {
    flex: none;
    padding-inline: 0;
    font: var(--type-body-s);
    font-weight: 600;
    white-space: nowrap;
    overflow-wrap: normal;
  }
}
@media (max-width: 479px) {
  .ar-event__day-kind {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
}
/* A page without the hero (the console's Watch page) carries the switch above its room. */
.ar-event__days-bar {
  margin-block: var(--space-2) var(--space-4);
}

/*
 * A workshop day's steps: a clean numbered list (number, title, one line,
 * length, Watch). From a tablet up it is open; on a phone it folds under one
 * line, as the page's other lists do (ADR 0129). Nothing pins.
 */
.ar-event__steps,
.ar-event__scope {
  display: grid;
  gap: var(--space-3);
  min-width: 0;
}
.ar-event__step-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0;
}
.ar-event__step {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-3);
  padding-block: var(--space-3);
  border-bottom: var(--border-width-hairline) solid var(--border-subtle);
}
.ar-event__step:last-child {
  border-bottom: 0;
}
.ar-event__step-n {
  min-width: 2ch;
  font: var(--type-title);
  font-variant-numeric: tabular-nums;
  color: var(--text-tertiary);
  text-align: right;
}
.ar-event__step[aria-current] .ar-event__step-n {
  color: var(--text-primary);
}
.ar-event__step-text {
  display: grid;
  gap: var(--space-1);
  min-width: 0;
}
.ar-event__step-title {
  font: var(--type-body);
  font-weight: 600;
  color: var(--text-primary);
  overflow-wrap: anywhere;
}
.ar-event__step-line {
  font: var(--type-body);
  color: var(--text-secondary);
  overflow-wrap: anywhere;
}
.ar-event__step-meta {
  font: var(--type-signal);
  letter-spacing: var(--tracking-signal);
  text-transform: uppercase;
  color: var(--text-tertiary);
}
.ar-event__step .ar-event__step-watch {
  gap: var(--space-2);
  min-height: 44px;
  white-space: nowrap;
}
.ar-event__steps-fold {
  display: none;
  border-block: var(--border-width-hairline) solid var(--border-subtle);
}
.ar-event__steps-fold > summary {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-height: 44px;
  list-style: none;
  cursor: pointer;
  font: var(--type-signal);
  letter-spacing: var(--tracking-signal);
  text-transform: uppercase;
  color: var(--text-primary);
}
.ar-event__steps-fold > summary::-webkit-details-marker {
  display: none;
}
.ar-event__steps-fold > summary:focus-visible {
  outline: var(--focus-ring-width) solid var(--focus-ring);
  outline-offset: 2px;
}
.ar-event__steps-fold > summary > svg {
  flex: none;
  margin-left: auto;
}
.ar-event__steps-fold[open] > summary > svg {
  transform: rotate(180deg);
}
@media (max-width: 767px) {
  .ar-event__steps-h {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
  }
  .ar-event__step-list--wide {
    display: none;
  }
  .ar-event__steps-fold {
    display: block;
  }
  .ar-event__step {
    grid-template-columns: auto minmax(0, 1fr);
  }
  .ar-event__step .ar-event__step-watch {
    grid-column: 2;
    justify-self: start;
  }
}

/* ── Scope Lab (ADR 0135) ─────────────────────────────────────────────────── */

/* The event page's "Through the scope" list: the steps' list, a square frame for the number. */
.ar-event__scope-img,
.ar-scope__thumb {
  display: block;
  flex: none;
  width: 64px;
  height: 64px;
  overflow: hidden;
  border-radius: var(--radius-sm);
  background: var(--ground-sunken);
}
/* The square inside the scope's circle: the frame scaled by √2, never its black corners. */
.ar-event__scope-img > img,
.ar-scope__thumb > img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.42);
}
/*
 * The event's "Through the scope" view (?view=scope): the models open, never
 * folded (it is the view); the frame and the name link to the model's page.
 */
.ar-event__scope-frame {
  display: block;
  border-radius: var(--radius-sm);
}
.ar-event__scope-frame:focus-visible,
.ar-event__scope-name:focus-visible {
  outline: var(--focus-ring-width) solid var(--focus-ring);
  outline-offset: 2px;
}
a.ar-event__scope-name {
  text-decoration: none;
}
a.ar-event__scope-name:hover {
  text-decoration: underline;
}
.ar-event--scope .ar-event__ask {
  margin-top: var(--space-2);
}
/* A model's page inside its event: the way back to the event, then the switch. */
.ar-scope__event {
  display: grid;
  gap: var(--space-1);
  min-width: 0;
}
.ar-scope__back {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  min-height: 44px;
}
/* A step filmed through the scope links to its model. */
.ar-event__step-scope {
  font: var(--type-caption);
  color: var(--text-link);
}
.ar-event__scope-note {
  margin: 0 0 var(--space-2);
  font: var(--type-body-s);
  color: var(--text-secondary);
}

/* Room + Scope together on the stage: the scope a large square inset over the room. */
.ar-together {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-2);
}
.ar-together[hidden],
.ar-together [hidden] {
  display: none;
}
.ar-together__note {
  font: var(--type-caption);
  color: var(--text-secondary);
}
.ar-watch__stage.is-together .ar-watch__angle[data-together-inset] {
  position: absolute;
  z-index: 2;
  right: var(--space-3);
  bottom: calc(var(--space-12) + var(--space-4));
  width: min(36%, 420px);
  height: auto;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border: var(--border-width-hairline) solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--ground-dark);
  box-shadow: var(--overlay-shadow);
  cursor: pointer;
}
.ar-watch__stage.is-together .ar-watch__angle[data-together-inset] .ar-watch__video {
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
  object-fit: cover;
  pointer-events: none;
}
/* The room as the inset keeps its own frame (16:9), not a square crop. */
.ar-watch__stage.is-scope-large .ar-watch__angle[data-together-inset] {
  aspect-ratio: 16 / 9;
}
.ar-watch__stage.is-scope-large .ar-watch__angle[data-together-inset] .ar-watch__video {
  object-fit: contain;
}
/* A phone: one picture at a time, full width; the button swaps them. */
@media (max-width: 767px) {
  .ar-watch__stage.is-together .ar-watch__angle[data-together-inset] {
    position: absolute;
    width: 1px;
    height: 1px;
    right: 0;
    bottom: 0;
    opacity: 0;
    border: 0;
    box-shadow: none;
    pointer-events: none;
  }
}

/* A model's page (/models/<slug>): the moment on the one player, the moments beside it. */
.ar-scope {
  display: grid;
  gap: var(--space-6);
}
.ar-scope__kicker {
  margin: 0;
  font: var(--type-signal);
  letter-spacing: var(--tracking-signal);
  text-transform: uppercase;
  color: var(--text-tertiary);
}
.ar-scope__h1 {
  margin: var(--space-1) 0 0;
  font: var(--type-title);
  letter-spacing: var(--tracking-title);
  color: var(--text-primary);
}
.ar-scope__line {
  margin: var(--space-2) 0 0;
  font: var(--type-body);
  color: var(--text-secondary);
}
.ar-scope__facts {
  margin: var(--space-1) 0 0;
  font: var(--type-body-s);
  color: var(--text-tertiary);
}
.ar-scope__grid {
  display: grid;
  gap: var(--space-4) var(--space-6);
}
/* A wide screen: the moment's words beside the picture, the list under them. */
@media (min-width: 1024px) {
  .ar-scope__grid {
    grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
    grid-template-areas:
      'stage now'
      'stage list';
    grid-template-rows: auto 1fr;
    align-items: start;
  }
  .ar-scope__stage {
    grid-area: stage;
  }
  .ar-scope__now {
    grid-area: now;
  }
  .ar-scope__list {
    grid-area: list;
  }
}
.ar-scope__stage .ar-player {
  max-width: 720px;
  margin-inline: auto;
}
/* A wide screen: the square picture and the moment's words above the fold together. */
@media (min-width: 1024px) {
  .ar-scope__stage .ar-player {
    max-width: min(640px, calc(100vh - 260px));
    max-width: min(640px, calc(100dvh - 260px));
  }
}
.ar-scope__stage .ar-watch__video {
  width: 100%;
  aspect-ratio: 1 / 1;
  background: var(--ground-dark);
  object-fit: contain;
}
.ar-scope__now {
  display: grid;
  gap: var(--space-1);
}
.ar-scope__count,
.ar-scope__meta {
  margin: 0;
  font: var(--type-body-s);
  color: var(--text-secondary);
}
.ar-scope__meta a {
  color: var(--text-link);
}
.ar-scope__title {
  margin: 0;
  font: var(--type-subtitle);
  color: var(--text-primary);
}
.ar-scope__caption {
  margin: 0;
  font: var(--type-body);
  color: var(--text-primary);
}
.ar-scope__nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin: var(--space-2) 0 0;
}
.ar-scope__go {
  min-height: 44px;
}
.ar-scope__list-h {
  margin: 0 0 var(--space-2);
  font: var(--type-body);
  font-weight: var(--weight-semibold);
  color: var(--text-primary);
}
.ar-scope__items {
  margin: 0;
  padding: 0;
  list-style: none;
}
.ar-scope__item {
  border-bottom: var(--border-width-hairline) solid var(--border-subtle);
}
.ar-scope__item:last-child {
  border-bottom: 0;
}
.ar-scope__item-link {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  gap: var(--space-3);
  align-items: center;
  min-height: 44px;
  padding-block: var(--space-2);
  color: inherit;
  text-decoration: none;
}
.ar-scope__item-link:focus-visible {
  outline: var(--focus-ring-width) solid var(--focus-ring);
  outline-offset: 2px;
}
.ar-scope__item[aria-current] .ar-scope__item-title {
  text-decoration: underline;
  text-underline-offset: 3px;
}
.ar-scope__thumb {
  width: 72px;
  height: 72px;
}
.ar-scope__item-text {
  display: grid;
  gap: 2px;
  min-width: 0;
}
.ar-scope__item-title {
  font: var(--type-body-s);
  font-weight: var(--weight-semibold);
  color: var(--text-primary);
}
.ar-scope__item-line,
.ar-scope__item-meta {
  font: var(--type-caption);
  color: var(--text-secondary);
}
.ar-scope__note,
.ar-scope__credit {
  margin: var(--space-3) 0 0;
  font: var(--type-caption);
  color: var(--text-tertiary);
}

/* The console's Scope fold: a moment's frame above its form. */
.ar-scope-console__frame {
  display: block;
  width: 96px;
  height: 96px;
  margin-bottom: var(--space-2);
  object-fit: cover;
  border-radius: var(--radius-sm);
  background: var(--ground-sunken);
}