/* ==========================================================================
   WMBT UI  /  wmbt-ui.css
   Framework-free component library for the "What Must Be True" brand.
   Load order:  ../tokens/tokens.css  then  wmbt-ui.css
   Rule: every value below is a token (var(--...)) or arithmetic on a token.
   ========================================================================== */

/* --------------------------------------------------------------------------
   0. LOCAL COMPONENT TOKENS AND SCOPES
   Round 3. There is one brand colour: Flame. --color-primary is Flame in
   both themes with Night on it. Components only ever ask for
   --color-primary / --color-primary-foreground / --color-primary-border /
   --color-accent-text / --color-ring and the scope they sit in answers.

   - A Flame fill on a light surface always carries the
     --color-primary-border keyline (Night). On dark and Deep Water the same
     token is Flame, so the keyline disappears into the fill.
   - --color-accent-text is for text, links and thin rules: Ember on light,
     Flame on dark. It is never a fill.
   - --color-ring is Deep Water ink on light and Flame on dark, so focus is
     never read as an error border.

   Local --w-* tokens are kept for three jobs only:
   (a) the 4 px unit, so on-grid sizes with no named token (line heights,
       control marks) are multiples instead of raw numbers;
   (b) state values the token file has no name for (disabled, washes);
   (c) values that differ between a light ground and a dark one.
   -------------------------------------------------------------------------- */
:root {
  /* grid unit: 4 px */
  --w-u: var(--primitive-space-1);

  /* line heights on the 4 px rhythm (name is the px result) */
  --w-leading-16: calc(var(--w-u) * 4);
  --w-leading-20: calc(var(--w-u) * 5);
  --w-leading-24: calc(var(--w-u) * 6);
  --w-leading-28: calc(var(--w-u) * 7);
  --w-leading-32: calc(var(--w-u) * 8);
  --w-leading-40: calc(var(--w-u) * 10);
  --w-leading-48: calc(var(--w-u) * 12);
  --w-leading-56: calc(var(--w-u) * 14);
  --w-leading-72: calc(var(--w-u) * 18);
  --w-leading-88: calc(var(--w-u) * 22);

  /* Archivo width axis: wide-set labels and the wordmark */
  --w-font-stretch-wide: 118%;

  /* focus ring geometry */
  --w-ring-width: var(--primitive-border-thick);
  --w-ring-offset: var(--primitive-border-thick);

  /* icon inside 40 px controls: 20 px. Mark inside badges and deltas: 12 px */
  --w-icon-control: calc(var(--w-u) * 5);
  --w-icon-mark: var(--primitive-space-3);

  /* Deep Water and Rainlight, fixed in both themes */
  --w-deep: var(--primitive-color-teal-800);
  --w-on-deep: var(--primitive-color-teal-100);
}

/* Light-ground values for the local tokens that differ by ground. */
:root {
  /* Disabled: a flat neutral. No brand colour, no opacity. */
  --w-disabled-bg: var(--primitive-color-teal-200);
  --w-disabled-fg: var(--primitive-color-teal-500);
  --w-disabled-border: var(--primitive-color-teal-300);
  /* quiet neutral fill for tiles and default badges */
  --w-fill-quiet: var(--primitive-color-teal-200);
  /* outline of a progress or range tube: the Flame keyline on light */
  --w-track-line: var(--primitive-color-teal-950);
  /* the key number: a Flame block with Night figures on light */
  --w-key-bg: var(--primitive-color-amber-400);
  --w-key-fg: var(--primitive-color-teal-950);
  --w-key-line: var(--primitive-color-teal-950);
  --w-key-pad: var(--primitive-space-3);
  /* secondary button */
  --w-btn2-bg: var(--primitive-color-teal-800);
  --w-btn2-fg: var(--primitive-color-teal-100);
  --w-btn2-bg-hover: var(--primitive-color-teal-900);
  --w-btn2-bg-active: var(--primitive-color-teal-950);
  --w-btn2-border: var(--primitive-color-teal-800);
  /* pressed "ink" selection (segmented control): one step past hover */
  --w-secondary-active: var(--primitive-color-teal-950);
  /* overlays: rim, elevated card, fields by the ground they sit on */
  --w-overlay-border: var(--primitive-color-teal-300);
  --w-elevated-bg: var(--primitive-color-teal-0);
  --w-elevated-border: transparent;
  --w-field-on-raised: var(--primitive-color-teal-0);
  --w-field-on-overlay: var(--primitive-color-teal-0);
  --w-card-on-overlay: var(--primitive-color-teal-0);
  /* small quiet text, and disabled text, on an overlay-level surface */
  --w-subtle-on-overlay: var(--primitive-color-teal-600);
  --w-disabled-on-overlay: var(--primitive-color-teal-500);
  /* tooltip: the inverse of the page */
  --w-tooltip-bg: var(--primitive-color-teal-950);
  --w-tooltip-fg: var(--primitive-color-teal-100);
  --w-tooltip-border: var(--primitive-color-teal-950);
  /* warning is carried by a bar and a triangle, never by yellow text */
  --w-warning-bar: var(--primitive-color-sulfur-500);
  --w-warning-mark: var(--primitive-color-teal-900);
  /* alert grounds: the pale status tints on light */
  --w-alert-info-bg: var(--primitive-color-glacier-100);
  --w-alert-success-bg: var(--primitive-color-moss-100);
  --w-alert-danger-bg: var(--primitive-color-crimson-100);
}

/* Deep Water scope: a fixed dark teal surface in both themes (the 30). It
   re-points the semantic layer so any component placed inside simply works.
   Primary is already Flame everywhere, so the scope no longer touches it:
   it only turns the keyline, the accent text and the ring to Flame, and
   supplies dark neutrals and dark status values. Elevation runs one way:
   Deep Water ground, Storm raised, teal-650 overlay, teal-900 wells.
   The video stage is the same scope: its chrome is ordinary teal panels. */
.w-inverse,
.w-band--deep,
.w-nav,
.w-footer,
.w-toast,
.w-drawer,
.w-card--deep,
.w-stage {
  --color-background: var(--primitive-color-teal-800);
  --color-surface: var(--primitive-color-teal-700);
  --color-surface-raised: var(--primitive-color-teal-700);
  --color-surface-overlay: var(--primitive-color-teal-650);
  --color-surface-sunken: var(--primitive-color-teal-900);
  --color-surface-inverse: var(--primitive-color-teal-100);
  --color-foreground: var(--primitive-color-teal-100);
  --color-foreground-muted: var(--primitive-color-teal-300);
  --color-foreground-subtle: var(--primitive-color-teal-400);
  --color-foreground-inverse: var(--primitive-color-teal-900);
  --color-border: var(--primitive-color-teal-600);
  --color-border-strong: var(--primitive-color-teal-400);
  --color-primary-border: var(--color-primary);
  --color-accent-text: var(--color-primary);
  --color-ring: var(--color-primary);
  --color-secondary: var(--primitive-color-teal-100);
  --color-secondary-hover: var(--primitive-color-teal-0);
  --color-secondary-foreground: var(--primitive-color-teal-900);
  --color-success: var(--primitive-color-moss-300);
  --color-success-subtle: var(--primitive-color-moss-900);
  --color-warning: var(--primitive-color-sulfur-300);
  --color-warning-subtle: var(--primitive-color-sulfur-900);
  --color-danger: var(--primitive-color-crimson-300);
  --color-danger-subtle: var(--primitive-color-crimson-900);
  --color-info: var(--primitive-color-glacier-300);
  --color-info-subtle: var(--primitive-color-glacier-900);
  --color-record: var(--primitive-color-crimson-300);
  --color-track-1: var(--primitive-color-glacier-300);
  --color-track-2: var(--primitive-color-moss-300);
  --color-track-3: var(--primitive-color-dusk-300);
  --color-track-4: var(--primitive-color-teal-400);
  color-scheme: dark;
  background-color: var(--color-background);
  color: var(--color-foreground);
}

/* Dark-ground values for the local tokens: the dark theme and every fixed
   dark scope. */
.dark,
[data-theme="dark"],
.w-inverse,
.w-band--deep,
.w-nav,
.w-footer,
.w-toast,
.w-drawer,
.w-card--deep,
.w-stage {
  --w-disabled-bg: var(--primitive-color-teal-700);
  --w-disabled-fg: var(--primitive-color-teal-450);
  --w-disabled-border: var(--primitive-color-teal-600);
  --w-fill-quiet: var(--primitive-color-teal-600);
  --w-track-line: var(--primitive-color-teal-400);
  /* the key number is Flame figures straight on the dark ground */
  --w-key-bg: transparent;
  --w-key-fg: var(--primitive-color-amber-400);
  --w-key-line: transparent;
  --w-key-pad: 0;
  /* secondary is a teal step with a hairline, so Flame stays the brightest
     action on a dark ground */
  --w-btn2-bg: var(--primitive-color-teal-600);
  --w-btn2-fg: var(--primitive-color-teal-100);
  --w-btn2-bg-hover: color-mix(in srgb, var(--primitive-color-teal-600) 70%, var(--primitive-color-teal-500));
  --w-btn2-bg-active: var(--primitive-color-teal-650);
  --w-btn2-border: var(--primitive-color-teal-400);
  --w-secondary-active: var(--primitive-color-teal-200);
  --w-overlay-border: var(--primitive-color-teal-500);
  --w-elevated-bg: var(--primitive-color-teal-650);
  --w-elevated-border: var(--primitive-color-teal-500);
  /* fields sit one step above a card, and are a Storm well inside an
     overlay, because nothing is lighter than the overlay level */
  --w-field-on-raised: var(--primitive-color-teal-650);
  --w-field-on-overlay: var(--primitive-color-teal-700);
  --w-card-on-overlay: var(--primitive-color-teal-600);
  /* teal-400 is 3.4:1 on teal-650, so quiet text steps up to teal-300 (4.8:1) */
  --w-subtle-on-overlay: var(--primitive-color-teal-300);
  /* disabled text: teal-450 is 2.6:1 on teal-650, teal-400 is 3.4:1 */
  --w-disabled-on-overlay: var(--primitive-color-teal-400);
  --w-tooltip-bg: var(--primitive-color-teal-600);
  --w-tooltip-fg: var(--primitive-color-teal-0);
  --w-tooltip-border: var(--primitive-color-teal-400);
  --w-warning-bar: var(--primitive-color-sulfur-300);
  --w-warning-mark: var(--primitive-color-sulfur-300);
  /* alert grounds on dark: one neutral teal lift for every status. The
     900 tints are darker than the panel they sit on, and maroon beside
     olive beside navy reads as mud; bar and icon carry the status. */
  --w-alert-info-bg: color-mix(in srgb, var(--primitive-color-teal-600) 32%, transparent);
  --w-alert-success-bg: color-mix(in srgb, var(--primitive-color-teal-600) 32%, transparent);
  --w-alert-danger-bg: color-mix(in srgb, var(--primitive-color-teal-600) 32%, transparent);
}

/* In the dark theme the page is Night and plain cards are Storm, so the
   pieces that must read as higher than a card (toast, drawer, the emphasis
   card) move up to the overlay level. Lighter is always higher. */
:is(.dark, [data-theme="dark"]) :is(.w-toast, .w-drawer, .w-card--deep) {
  --color-background: var(--primitive-color-teal-650);
  --color-surface: var(--primitive-color-teal-600);
  --color-surface-raised: var(--primitive-color-teal-600);
  --color-surface-overlay: var(--primitive-color-teal-600);
  --color-surface-sunken: var(--primitive-color-teal-800);
  --color-border: var(--primitive-color-teal-500);
  --color-foreground-subtle: var(--primitive-color-teal-300);
  --w-disabled-fg: var(--primitive-color-teal-400);
  --w-disabled-border: var(--primitive-color-teal-500);
}

/* Re-resolve everything derived from the semantic layer in each scope.
   tokens.css declares the component aliases (--button-bg and friends) on
   :root only, and a custom property is substituted where it is declared, so
   without this block a nested scope would inherit the surfaces and keyline
   that :root resolved instead of its own. */
:root,
.dark,
[data-theme="dark"],
.w-inverse,
.w-band--deep,
.w-nav,
.w-footer,
.w-toast,
.w-drawer,
.w-card--deep,
.w-stage {
  --button-bg: var(--color-primary);
  --button-fg: var(--color-primary-foreground);
  --button-bg-hover: var(--color-primary-hover);
  --button-bg-active: var(--color-primary-active);
  --button-border: var(--color-primary-border);
  --input-bg: var(--color-surface-raised);
  --input-fg: var(--color-foreground);
  --input-border: var(--color-border-strong);
  --input-border-focus: var(--color-ring);
  --input-placeholder: var(--color-foreground-subtle);
  --card-bg: var(--color-surface-raised);
  --card-border: var(--color-border);
  --modal-bg: var(--color-surface-overlay);

  /* state washes: a tint of the teal border tone over whatever ground is
     there, so a wash is darker than a light ground, lighter than a dark
     one, and never gray */
  --w-hover-wash: color-mix(in srgb, var(--color-border) 32%, transparent);
  --w-active-wash: color-mix(in srgb, var(--color-border) 58%, transparent);
  /* wayfinding and selection mark: ink, not the brand colour */
  --w-mark: var(--color-foreground);
}

:root { color-scheme: light; }
.dark,
[data-theme="dark"] { color-scheme: dark; }

/* --------------------------------------------------------------------------
   1. BASE
   -------------------------------------------------------------------------- */
*,
*::before,
*::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-height) + var(--primitive-space-5));
}

body {
  margin: 0;
  background-color: var(--color-background);
  color: var(--color-foreground);
  font-family: var(--font-body);
  font-size: var(--text-body-size);
  line-height: var(--w-leading-24);
  font-weight: var(--primitive-font-weight-regular);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-optical-sizing: auto;
}

h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd, ol, ul, fieldset, legend { margin: 0; padding: 0; }
ol, ul { list-style: none; }
fieldset { border: 0; min-width: 0; }
img, svg, video { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; letter-spacing: inherit; margin: 0; }
button { background: none; border: 0; padding: 0; cursor: pointer; }
a { color: inherit; }
table { border-collapse: collapse; border-spacing: 0; }
[hidden] { display: none !important; }
::selection { background-color: var(--color-primary); color: var(--color-primary-foreground); }

/* One focus treatment for everything. --color-ring is Deep Water ink on
   light (12.7:1 on the canvas) and Flame on dark and Deep Water (4.9:1+),
   so a focus ring can never be mistaken for the rose error border. */
:where(a, button, input, select, textarea, summary, [tabindex], [role="tab"], [role="switch"], [role="menuitem"]):focus-visible,
.is-focus {
  outline: var(--w-ring-width) solid var(--color-ring);
  outline-offset: var(--w-ring-offset);
}
:where(a, button, input, select, textarea, summary, [tabindex]):focus:not(:focus-visible) { outline: none; }

.w-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.w-skip-link {
  position: absolute;
  inset-block-start: var(--primitive-space-2);
  inset-inline-start: var(--primitive-space-2);
  z-index: var(--primitive-z-tooltip);
  padding: var(--primitive-space-2) var(--primitive-space-4);
  border: var(--primitive-border-hairline) solid var(--color-primary-border);
  background-color: var(--color-primary);
  color: var(--color-primary-foreground);
  font-weight: var(--primitive-font-weight-semibold);
  border-radius: var(--primitive-radius-sm);
  transform: translateY(-200%);
}
.w-skip-link:focus { transform: none; }

/* Icons: 24 grid, 1.5 stroke, currentColor */
.w-icon {
  width: var(--icon-size-md);
  height: var(--icon-size-md);
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: var(--icon-stroke);
  stroke-linecap: round;
  stroke-linejoin: round;
}
.w-icon--sm { width: var(--icon-size-sm); height: var(--icon-size-sm); }
.w-icon--md { width: var(--w-icon-control); height: var(--w-icon-control); }
.w-icon--lg { width: var(--icon-size-lg); height: var(--icon-size-lg); }
.w-icon--xl { width: var(--icon-size-xl); height: var(--icon-size-xl); }
/* 12 px status mark for badges and deltas: heavier stroke so the shape,
   not the hue, tells the statuses apart */
.w-icon.w-icon--mark,
.w-badge > .w-icon.w-icon--mark { width: var(--w-icon-mark); height: var(--w-icon-mark); stroke-width: calc(var(--icon-stroke) * 2); }

/* --------------------------------------------------------------------------
   2. TYPOGRAPHY
   Statements: Archivo. Questions and quotations: Newsreader.
   Reading: Plex Sans. Labels and data: Plex Mono.
   -------------------------------------------------------------------------- */
.w-display,
.w-h1, .w-h2, .w-h3, .w-h4, .w-h5 {
  font-family: var(--font-display);
  font-weight: var(--primitive-font-weight-bold);
  letter-spacing: var(--text-heading-tracking);
  color: var(--color-foreground);
  text-wrap: balance;
}
.w-display {
  font-size: var(--primitive-font-size-5xl);
  line-height: var(--w-leading-48);
  font-weight: var(--primitive-font-weight-black);
  letter-spacing: var(--primitive-font-tracking-tighter);
}
.w-h1 { font-size: var(--primitive-font-size-4xl); line-height: var(--w-leading-48); letter-spacing: var(--primitive-font-tracking-tighter); }
.w-h2 { font-size: var(--primitive-font-size-3xl); line-height: var(--w-leading-40); }
.w-h3 { font-size: var(--primitive-font-size-2xl); line-height: var(--w-leading-32); }
.w-h4 { font-size: var(--primitive-font-size-xl); line-height: var(--w-leading-28); font-weight: var(--text-heading-weight); }
.w-h5 { font-size: var(--primitive-font-size-lg); line-height: var(--w-leading-24); font-weight: var(--text-heading-weight); letter-spacing: var(--primitive-font-tracking-normal); }

.w-lead {
  font-size: var(--primitive-font-size-lg);
  line-height: var(--w-leading-28);
  color: var(--color-foreground-muted);
  max-width: var(--layout-measure);
  text-wrap: pretty;
}
.w-body { font-size: var(--text-body-size); line-height: var(--w-leading-24); max-width: var(--layout-measure); text-wrap: pretty; }
.w-small { font-size: var(--text-small-size); line-height: var(--w-leading-20); }
.w-caption { font-size: var(--text-caption-size); line-height: var(--w-leading-16); color: var(--color-foreground-subtle); }
.w-muted { color: var(--color-foreground-muted); }
.w-subtle { color: var(--color-foreground-subtle); }
.w-strong { font-weight: var(--primitive-font-weight-semibold); color: var(--color-foreground); }

/* Eyebrow: Plex Mono, uppercase, caps tracking */
.w-eyebrow {
  display: block;
  font-family: var(--font-accent);
  font-size: var(--text-eyebrow-size);
  line-height: var(--w-leading-16);
  font-weight: var(--primitive-font-weight-medium);
  letter-spacing: var(--text-eyebrow-tracking);
  text-transform: uppercase;
  color: var(--color-foreground-muted);
}
/* The signal rule: a short 4 px warm bar above the eyebrow. It is a thin
   line, so it takes --color-accent-text: Ember on light, Flame on dark and
   Deep Water. Flame is never a thin line on a light surface. */
.w-eyebrow--signal::before {
  content: "";
  display: block;
  width: var(--primitive-space-8);
  height: var(--primitive-border-rule);
  margin-block-end: var(--primitive-space-4);
  background-color: var(--color-accent-text);
}
.w-signal-rule {
  display: block;
  width: var(--primitive-space-8);
  height: var(--primitive-border-rule);
  border: 0;
  margin: 0;
  background-color: var(--color-accent-text);
}

/* Wide-set Archivo label */
.w-overline {
  font-family: var(--font-display);
  font-stretch: var(--w-font-stretch-wide);
  font-size: var(--primitive-font-size-xs);
  line-height: var(--w-leading-16);
  font-weight: var(--primitive-font-weight-bold);
  letter-spacing: var(--primitive-font-tracking-wide);
  text-transform: uppercase;
}

/* Mono data and code */
.w-mono {
  font-family: var(--font-accent);
  font-variant-numeric: tabular-nums;
  letter-spacing: var(--primitive-font-tracking-normal);
}
.w-code {
  font-family: var(--font-accent);
  font-size: var(--text-small-size);
  padding: 0 var(--primitive-space-1);
  border-radius: var(--primitive-radius-xs);
  background-color: var(--w-hover-wash);
  color: var(--color-foreground);
}
.w-kbd {
  display: inline-flex;
  align-items: center;
  min-width: var(--w-leading-20);
  height: var(--w-leading-20);
  padding: 0 var(--primitive-space-1);
  justify-content: center;
  font-family: var(--font-accent);
  font-size: var(--primitive-font-size-2xs);
  line-height: 1;
  color: var(--color-foreground-muted);
  border: var(--primitive-border-hairline) solid var(--color-border);
  border-radius: var(--primitive-radius-xs);
  background-color: var(--w-hover-wash);
}

/* Editorial serif: the question form. One serif moment per view. */
.w-editorial {
  font-family: var(--font-editorial);
  font-weight: var(--primitive-font-weight-regular);
  font-size: var(--primitive-font-size-3xl);
  line-height: var(--w-leading-40);
  letter-spacing: var(--primitive-font-tracking-tight);
  color: var(--color-foreground);
  text-wrap: balance;
}
.w-editorial em { font-style: italic; }
.w-editorial--xl { font-size: var(--primitive-font-size-4xl); line-height: var(--w-leading-48); letter-spacing: var(--primitive-font-tracking-tighter); }
.w-editorial--sm { font-size: var(--primitive-font-size-2xl); line-height: var(--w-leading-32); }

/* Pull quote */
.w-pullquote {
  display: grid;
  gap: var(--primitive-space-5);
  max-width: var(--layout-measure);
}
.w-pullquote::before {
  content: "";
  width: var(--primitive-space-8);
  height: var(--primitive-border-rule);
  background-color: var(--color-accent-text);
}
.w-pullquote__text {
  font-family: var(--font-editorial);
  font-style: italic;
  font-weight: var(--primitive-font-weight-regular);
  font-size: var(--primitive-font-size-2xl);
  line-height: var(--w-leading-32);
  letter-spacing: var(--primitive-font-tracking-tight);
  text-wrap: pretty;
}
.w-pullquote__cite {
  font-family: var(--font-accent);
  font-style: normal;
  font-size: var(--text-caption-size);
  line-height: var(--w-leading-16);
  letter-spacing: var(--text-eyebrow-tracking);
  text-transform: uppercase;
  color: var(--color-foreground-muted);
}

/* Text link: ink text, the underline carries the state */
.w-link {
  color: var(--color-foreground);
  text-decoration: underline;
  text-decoration-color: var(--color-border-strong);
  text-decoration-thickness: var(--primitive-border-hairline);
  text-underline-offset: var(--primitive-space-1);
  transition: text-decoration-color var(--motion-hover) var(--motion-easing);
}
.w-link:hover,
.w-link.is-hover { text-decoration-color: var(--color-foreground); text-decoration-thickness: var(--primitive-border-thick); }

@media (min-width: 48em) {
  .w-display { font-size: var(--text-display-size); line-height: var(--w-leading-88); }
  .w-h1 { font-size: var(--text-h1-size); line-height: var(--w-leading-56); }
  .w-h2 { font-size: var(--text-h2-size); line-height: var(--w-leading-48); }
  .w-h3 { font-size: var(--text-h3-size); line-height: var(--w-leading-40); }
  .w-h4 { font-size: var(--text-h4-size); line-height: var(--w-leading-32); }
  .w-h5 { font-size: var(--text-h5-size); line-height: var(--w-leading-28); }
  .w-lead { font-size: var(--text-lead-size); line-height: var(--w-leading-32); }
  .w-editorial { font-size: var(--text-h1-size); line-height: var(--w-leading-56); letter-spacing: var(--primitive-font-tracking-tighter); }
  .w-editorial--xl { font-size: var(--primitive-font-size-6xl); line-height: var(--w-leading-72); }
  .w-editorial--sm { font-size: var(--primitive-font-size-3xl); line-height: var(--w-leading-40); }
  .w-pullquote__text { font-size: var(--primitive-font-size-3xl); line-height: var(--w-leading-40); }
}

/* --------------------------------------------------------------------------
   3. LAYOUT
   -------------------------------------------------------------------------- */
.w-container {
  width: 100%;
  max-width: calc(var(--layout-container) + var(--spacing-page-margin) * 2);
  margin-inline: auto;
  padding-inline: var(--primitive-space-4);
}
.w-container--narrow { max-width: calc(var(--layout-container) * 0.66 + var(--spacing-page-margin) * 2); }

/* 4 columns mobile, 8 tablet, 12 desktop. Children span everything until told. */
.w-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--primitive-space-4);
}
.w-grid > * { grid-column: 1 / -1; min-width: 0; }
.w-grid--flush { row-gap: 0; }
.w-col-sm-1 { grid-column: auto / span 1; }
.w-col-sm-2 { grid-column: auto / span 2; }
.w-col-sm-3 { grid-column: auto / span 3; }
.w-col-sm-4 { grid-column: auto / span 4; }

/* Equal columns that wrap by themselves */
.w-grid-auto {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--w-grid-min, calc(var(--w-u) * 64))), 1fr));
  gap: var(--spacing-gutter);
}
.w-grid-auto > * { min-width: 0; }

.w-stack { display: flex; flex-direction: column; gap: var(--w-stack-gap, var(--primitive-space-4)); }
.w-stack > * { min-width: 0; }
.w-stack--2xs { --w-stack-gap: var(--primitive-space-1); }
.w-stack--xs { --w-stack-gap: var(--primitive-space-2); }
.w-stack--sm { --w-stack-gap: var(--primitive-space-3); }
.w-stack--md { --w-stack-gap: var(--primitive-space-4); }
.w-stack--lg { --w-stack-gap: var(--primitive-space-5); }
.w-stack--xl { --w-stack-gap: var(--primitive-space-6); }
.w-stack--2xl { --w-stack-gap: var(--primitive-space-8); }
.w-stack--3xl { --w-stack-gap: var(--primitive-space-9); }
.w-stack--start { align-items: flex-start; }

.w-cluster { display: flex; flex-wrap: wrap; align-items: center; gap: var(--w-cluster-gap, var(--primitive-space-3)); }
.w-cluster--xs { --w-cluster-gap: var(--primitive-space-2); }
.w-cluster--lg { --w-cluster-gap: var(--primitive-space-5); }
.w-cluster--between { justify-content: space-between; }
.w-cluster--end { justify-content: flex-end; }
.w-cluster--top { align-items: flex-start; }
.w-cluster--baseline { align-items: baseline; }
.w-cluster--nowrap { flex-wrap: nowrap; }

.w-section { padding-block: var(--primitive-space-9); }
.w-section--tight { padding-block: var(--primitive-space-8); }

.w-band { width: 100%; }
.w-band--surface { background-color: var(--color-surface); }
.w-band--raised { background-color: var(--color-surface-raised); }
.w-band--sunken { background-color: var(--color-surface-sunken); }
.w-band--ruled { border-block: var(--primitive-border-hairline) solid var(--color-border); }

.w-divider { height: 0; margin: 0; border: 0; border-block-start: var(--primitive-border-hairline) solid var(--color-border); }
.w-divider--strong { border-block-start-color: var(--color-foreground); }

@media (min-width: 48em) {
  .w-container { padding-inline: var(--spacing-page-margin); }
  .w-grid { grid-template-columns: repeat(8, minmax(0, 1fr)); gap: var(--spacing-gutter); }
  .w-grid--flush { row-gap: 0; }
  .w-col-md-1 { grid-column: auto / span 1; }
  .w-col-md-2 { grid-column: auto / span 2; }
  .w-col-md-3 { grid-column: auto / span 3; }
  .w-col-md-4 { grid-column: auto / span 4; }
  .w-col-md-5 { grid-column: auto / span 5; }
  .w-col-md-6 { grid-column: auto / span 6; }
  .w-col-md-7 { grid-column: auto / span 7; }
  .w-col-md-8 { grid-column: auto / span 8; }
  .w-section { padding-block: var(--spacing-section); }
  .w-section--tight { padding-block: var(--primitive-space-9); }
}
@media (min-width: 64em) {
  .w-grid { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .w-col-1 { grid-column: auto / span 1; }
  .w-col-2 { grid-column: auto / span 2; }
  .w-col-3 { grid-column: auto / span 3; }
  .w-col-4 { grid-column: auto / span 4; }
  .w-col-5 { grid-column: auto / span 5; }
  .w-col-6 { grid-column: auto / span 6; }
  .w-col-7 { grid-column: auto / span 7; }
  .w-col-8 { grid-column: auto / span 8; }
  .w-col-9 { grid-column: auto / span 9; }
  .w-col-10 { grid-column: auto / span 10; }
  .w-col-11 { grid-column: auto / span 11; }
  .w-col-12 { grid-column: auto / span 12; }
  .w-col-start-2 { grid-column-start: 2; }
  .w-col-start-7 { grid-column-start: 7; }
  .w-col-start-8 { grid-column-start: 8; }
  .w-col-start-9 { grid-column-start: 9; }
}

/* --------------------------------------------------------------------------
   4. BUTTONS
   Height is the master (32 / 40 / 48). State priority: disabled, loading,
   active, focus, hover, default.
   Primary is Flame with Night text on every surface. On a light surface the
   fill alone is 2.1:1 against the canvas, so the button carries the
   --button-border keyline (Night, 17:1). Hover is lighter (amber-300),
   pressed is deeper (amber-500); Night text passes on all three.
   -------------------------------------------------------------------------- */
.w-btn {
  --_bg: var(--button-bg);
  --_fg: var(--button-fg);
  --_bg-hover: var(--button-bg-hover);
  --_bg-active: var(--button-bg-active);
  --_border: var(--button-border);
  --_border-hover: var(--button-border);
  --_h: var(--button-height-md);
  --_px: var(--button-padding-x);
  --_icon: var(--w-icon-control);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--primitive-space-2);
  height: var(--_h);
  padding: 0 var(--_px);
  border: var(--primitive-border-hairline) solid var(--_border);
  border-radius: var(--button-radius);
  background-color: var(--_bg);
  color: var(--_fg);
  font-family: var(--font-body);
  font-size: var(--text-small-size);
  line-height: var(--w-leading-20);
  font-weight: var(--button-font-weight);
  letter-spacing: var(--primitive-font-tracking-normal);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
  transition: background-color var(--motion-hover) var(--motion-easing),
              border-color var(--motion-hover) var(--motion-easing),
              color var(--motion-hover) var(--motion-easing);
}
.w-btn .w-icon { width: var(--_icon); height: var(--_icon); }
.w-btn:hover,
.w-btn.is-hover { background-color: var(--_bg-hover); border-color: var(--_border-hover); }
.w-btn:active,
.w-btn.is-active { background-color: var(--_bg-active); border-color: var(--_border-hover); }

/* Secondary: Deep Water on light. On dark it is a teal step with a hairline,
   never a white block, so Flame stays the brightest action in the group. */
.w-btn--secondary {
  --_bg: var(--w-btn2-bg);
  --_fg: var(--w-btn2-fg);
  --_bg-hover: var(--w-btn2-bg-hover);
  --_bg-active: var(--w-btn2-bg-active);
  --_border: var(--w-btn2-border);
  --_border-hover: var(--w-btn2-border);
}
.w-btn--outline {
  --_bg: transparent;
  --_fg: var(--color-foreground);
  --_bg-hover: var(--w-hover-wash);
  --_bg-active: var(--w-active-wash);
  --_border: var(--color-border-strong);
  --_border-hover: var(--color-foreground);
}
.w-btn--ghost {
  --_bg: transparent;
  --_fg: var(--color-foreground);
  --_bg-hover: var(--w-hover-wash);
  --_bg-active: var(--w-active-wash);
  --_border: transparent;
  --_border-hover: transparent;
}
/* Destructive is an outline in Crimson, never a resting solid fill, so the
   only solid warm block in a group is the Flame primary. Shape (outline
   against solid) carries the difference, not hue alone. Pair it with an
   icon or an explicit verb. It only fills while pressed. */
.w-btn--destructive {
  --_bg: transparent;
  --_fg: var(--color-danger);
  --_bg-hover: var(--color-danger-subtle);
  --_bg-active: var(--color-danger);
  --_border: var(--color-danger);
  --_border-hover: var(--color-danger);
}
.w-btn--destructive:active,
.w-btn--destructive.is-active { color: var(--color-foreground-inverse); }
/* Link button: text only, in ink. The underline carries the state. A link
   is not a warm element by default, so a row of links never multiplies the
   brand colour. */
.w-btn--link {
  --_bg: transparent;
  --_fg: var(--color-foreground);
  --_bg-hover: transparent;
  --_bg-active: transparent;
  --_px: 0;
  height: auto;
  border: 0;
  border-radius: var(--primitive-radius-xs);
  text-decoration: underline;
  text-decoration-color: var(--color-border-strong);
  text-decoration-thickness: var(--primitive-border-hairline);
  text-underline-offset: var(--primitive-space-1);
}
.w-btn--link:hover,
.w-btn--link.is-hover,
.w-btn--link:active,
.w-btn--link.is-active { text-decoration-color: currentColor; text-decoration-thickness: var(--primitive-border-thick); }
/* Signal link: the one warm text element a view may carry when it has no
   Flame fill. --color-accent-text is Ember on light (4.66:1 on the canvas)
   and Flame on dark. Flame is never text on a light surface. Do not place it
   on --color-surface-sunken (3.92:1). */
.w-btn--link.w-btn--signal { --_fg: var(--color-accent-text); text-decoration-color: currentColor; }
/* Arrow link: the arrow steps forward on hover */
.w-btn--arrow .w-icon { transition: transform var(--motion-hover) var(--motion-easing); }
.w-btn--arrow:hover .w-icon,
.w-btn--arrow.is-hover .w-icon { transform: translateX(var(--primitive-space-1)); }

.w-btn--sm { --_h: var(--button-height-sm); --_px: var(--primitive-space-4); --_icon: var(--icon-size-sm); }
.w-btn--lg { --_h: var(--button-height-lg); --_px: var(--primitive-space-6); font-size: var(--text-body-size); line-height: var(--w-leading-24); }
.w-btn--icon { --_px: 0; width: var(--_h); }
.w-btn--block { display: flex; width: 100%; }

/* Disabled: a flat neutral teal. No brand colour, no keyline, no opacity.
   Fill buttons keep a neutral block; outline, ghost and link keep their
   shape and lose their ink. */
.w-btn:disabled,
.w-btn[aria-disabled="true"],
.w-btn.is-disabled {
  --_bg: var(--w-disabled-bg);
  --_fg: var(--w-disabled-fg);
  --_border: var(--w-disabled-border);
  cursor: not-allowed;
  pointer-events: none;
}
.w-btn--outline:disabled,
.w-btn--outline[aria-disabled="true"],
.w-btn--outline.is-disabled,
.w-btn--destructive:disabled,
.w-btn--destructive[aria-disabled="true"],
.w-btn--destructive.is-disabled { --_bg: transparent; }
.w-btn--ghost:disabled,
.w-btn--ghost[aria-disabled="true"],
.w-btn--ghost.is-disabled,
.w-btn--link:disabled,
.w-btn--link[aria-disabled="true"],
.w-btn--link.is-disabled { --_bg: transparent; --_border: transparent; text-decoration-color: var(--w-disabled-border); }
/* Loading: spinner takes the leading icon slot, label stays for width.
   The fill stays at full strength. */
.w-btn.is-loading,
.w-btn[aria-busy="true"] {
  cursor: progress;
  pointer-events: none;
}
.w-btn.is-loading::before,
.w-btn[aria-busy="true"]::before {
  content: "";
  width: var(--icon-size-sm);
  height: var(--icon-size-sm);
  flex: none;
  border: var(--primitive-border-thick) solid color-mix(in srgb, currentColor 28%, transparent);
  border-block-start-color: currentColor;
  border-radius: var(--primitive-radius-full);
  animation: w-spin var(--primitive-duration-slow) linear infinite;
  animation-duration: calc(var(--primitive-duration-slow) * 2);
}
.w-btn.is-loading > .w-icon,
.w-btn[aria-busy="true"] > .w-icon { display: none; }

/* Button group: segmented control or joined actions */
.w-btn-group { display: inline-flex; isolation: isolate; }
.w-btn-group > .w-btn { border-radius: 0; }
.w-btn-group > .w-btn + .w-btn { margin-inline-start: calc(var(--primitive-border-hairline) * -1); }
.w-btn-group > .w-btn:not(.w-btn--outline) + .w-btn { margin-inline-start: var(--primitive-border-hairline); }
.w-btn-group > .w-btn:first-child { border-start-start-radius: var(--button-radius); border-end-start-radius: var(--button-radius); }
.w-btn-group > .w-btn:last-child { border-start-end-radius: var(--button-radius); border-end-end-radius: var(--button-radius); }
.w-btn-group > .w-btn:hover,
.w-btn-group > .w-btn:focus-visible { z-index: 1; }
.w-btn-group > .w-btn[aria-pressed="true"],
.w-btn-group > .w-btn.is-selected {
  --_bg: var(--color-secondary);
  --_fg: var(--color-secondary-foreground);
  --_bg-hover: var(--color-secondary-hover);
  --_bg-active: var(--w-secondary-active);
  --_border: var(--color-secondary);
  --_border-hover: var(--color-secondary-hover);
  z-index: 1;
}

/* --------------------------------------------------------------------------
   5. FORMS
   -------------------------------------------------------------------------- */
.w-field { display: grid; align-content: start; gap: var(--primitive-space-2); min-width: 0; }
.w-label {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--primitive-space-3);
  font-size: var(--text-small-size);
  line-height: var(--w-leading-20);
  font-weight: var(--primitive-font-weight-medium);
  color: var(--color-foreground);
}
.w-label__meta {
  font-family: var(--font-accent);
  font-size: var(--primitive-font-size-2xs);
  line-height: var(--w-leading-16);
  font-weight: var(--primitive-font-weight-regular);
  letter-spacing: var(--text-eyebrow-tracking);
  text-transform: uppercase;
  color: var(--color-foreground-subtle);
}
.w-label__req { color: var(--color-danger); margin-inline-start: var(--primitive-space-1); }
.w-help { font-size: var(--text-small-size); line-height: var(--w-leading-20); color: var(--color-foreground-muted); }
.w-error {
  display: flex;
  align-items: flex-start;
  gap: var(--primitive-space-2);
  font-size: var(--text-small-size);
  line-height: var(--w-leading-20);
  font-weight: var(--primitive-font-weight-medium);
  color: var(--color-danger);
}
.w-error .w-icon,
.w-valid .w-icon { width: var(--icon-size-sm); height: var(--icon-size-sm); margin-block-start: var(--primitive-border-thick); }
/* Valid: the same line as an error, with a different icon shape (circle and
   check against the error octagon). Danger and success text sit at the same
   luminance on light, so the icon and the sentence carry the difference. */
.w-valid {
  display: flex;
  align-items: flex-start;
  gap: var(--primitive-space-2);
  font-size: var(--text-small-size);
  line-height: var(--w-leading-20);
  font-weight: var(--primitive-font-weight-medium);
  color: var(--color-success);
}

.w-input {
  --_h: var(--input-height);
  display: block;
  width: 100%;
  min-width: 0;
  height: var(--_h);
  padding: 0 var(--input-padding-x);
  border: var(--primitive-border-hairline) solid var(--input-border);
  border-radius: var(--input-radius);
  background-color: var(--input-bg);
  color: var(--input-fg);
  font-family: var(--font-body);
  font-size: var(--text-body-size);
  line-height: var(--w-leading-24);
  appearance: none;
  transition: border-color var(--motion-hover) var(--motion-easing), box-shadow var(--motion-hover) var(--motion-easing);
}
.w-input::placeholder { color: var(--input-placeholder); opacity: 1; }
.w-input:hover,
.w-input.is-hover { border-color: var(--color-foreground); }
.w-input:focus-visible,
.w-input.is-focus {
  border-color: var(--input-border-focus);
  outline: var(--w-ring-width) solid var(--color-ring);
  outline-offset: 0;
}
/* Invalid is a rose border, doubled. Focus on an invalid field keeps the
   ink (or Flame) ring outside it: focus and error are two different marks. */
.w-input[aria-invalid="true"],
.w-input.is-error {
  border-color: var(--color-danger);
  box-shadow: inset 0 0 0 var(--primitive-border-hairline) var(--color-danger);
}
.w-input.is-valid { border-color: var(--color-success); }
.w-input:disabled,
.w-input.is-disabled {
  background-color: var(--w-disabled-bg);
  border-color: var(--w-disabled-border);
  color: var(--w-disabled-fg);
  -webkit-text-fill-color: var(--w-disabled-fg);
  opacity: 1;
  cursor: not-allowed;
}
.w-input:disabled::placeholder { color: var(--w-disabled-fg); }
.w-select:has(> .w-input:disabled) > .w-icon { color: var(--w-disabled-fg); }
.w-input[readonly] { background-color: var(--w-hover-wash); border-color: var(--color-border); }
.w-input--sm { --_h: var(--button-height-sm); font-size: var(--text-small-size); line-height: var(--w-leading-20); }
.w-input--lg { --_h: var(--button-height-lg); padding-inline: var(--primitive-space-4); }
textarea.w-input {
  height: auto;
  min-height: calc(var(--w-u) * 24);
  padding-block: var(--primitive-space-2);
  resize: vertical;
}

/* Select: native control, drawn chevron */
.w-select { position: relative; display: block; }
.w-select > .w-input { padding-inline-end: var(--primitive-space-7); cursor: pointer; }
.w-select > .w-icon {
  position: absolute;
  inset-block-start: 50%;
  inset-inline-end: var(--primitive-space-3);
  width: var(--icon-size-sm);
  height: var(--icon-size-sm);
  transform: translateY(-50%);
  pointer-events: none;
  color: var(--color-foreground-muted);
}

/* Input with leading icon and trailing slot (search) */
.w-input-wrap { position: relative; display: block; }
.w-input-wrap__lead,
.w-input-wrap__trail {
  position: absolute;
  inset-block-start: 50%;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  color: var(--color-foreground-muted);
}
.w-input-wrap__lead { inset-inline-start: var(--primitive-space-3); width: var(--w-icon-control); height: var(--w-icon-control); pointer-events: none; }
.w-input-wrap__trail { inset-inline-end: var(--primitive-space-2); gap: var(--primitive-space-1); }
.w-input-wrap--lead > .w-input { padding-inline-start: var(--primitive-space-7); }
.w-input-wrap--trail > .w-input { padding-inline-end: var(--primitive-space-8); }
.w-input[type="search"]::-webkit-search-cancel-button { appearance: none; }

/* Inline form: field and action on one line, stacks under 480 */
.w-inline-form { display: flex; flex-direction: column; gap: var(--primitive-space-2); }
.w-inline-form > .w-input,
.w-inline-form > .w-input-wrap { flex: 1 1 auto; }

/* Checkbox and radio */
.w-check {
  display: inline-flex;
  align-items: flex-start;
  gap: var(--primitive-space-3);
  font-size: var(--text-body-size);
  line-height: var(--w-leading-24);
  cursor: pointer;
}
.w-check__text { display: grid; gap: 0; }
.w-check__hint { font-size: var(--text-small-size); line-height: var(--w-leading-20); color: var(--color-foreground-muted); }
.w-check__input {
  appearance: none;
  position: relative;
  flex: none;
  width: var(--w-leading-20);
  height: var(--w-leading-20);
  margin-block-start: var(--primitive-border-thick);
  border: var(--primitive-border-hairline) solid var(--color-foreground-subtle);
  border-radius: var(--primitive-radius-xs);
  background-color: var(--input-bg);
  cursor: pointer;
  transition: background-color var(--motion-hover) var(--motion-easing), border-color var(--motion-hover) var(--motion-easing);
}
.w-check__input[type="radio"] { border-radius: var(--primitive-radius-full); }
.w-check__input:hover,
.w-check__input.is-hover { border-color: var(--color-foreground); }
/* Checked: Flame with a Night mark, inside the Night keyline on light */
.w-check__input:checked,
.w-check__input[type="checkbox"]:indeterminate { background-color: var(--color-primary); border-color: var(--color-primary-border); }
.w-check__input[type="checkbox"]:checked::after {
  content: "";
  position: absolute;
  inset-block-start: var(--primitive-border-thick);
  inset-inline-start: calc(var(--w-u) * 1.5);
  width: calc(var(--w-u) * 1.5);
  height: calc(var(--w-u) * 2.75);
  border: solid var(--color-primary-foreground);
  border-width: 0 var(--primitive-border-thick) var(--primitive-border-thick) 0;
  transform: rotate(45deg);
}
.w-check__input[type="checkbox"]:indeterminate::after {
  content: "";
  position: absolute;
  inset-block-start: 50%;
  inset-inline: var(--primitive-space-1);
  height: var(--primitive-border-thick);
  margin-block-start: calc(var(--primitive-border-hairline) * -1);
  background-color: var(--color-primary-foreground);
}
.w-check__input[type="radio"]:checked::after {
  content: "";
  position: absolute;
  inset: calc(var(--w-u) * 1.25);
  border-radius: var(--primitive-radius-full);
  background-color: var(--color-primary-foreground);
}
.w-check__input[aria-invalid="true"],
.w-check__input.is-error { border-color: var(--color-danger); box-shadow: 0 0 0 var(--primitive-border-hairline) var(--color-danger); }
.w-check__input:disabled { background-color: var(--w-disabled-bg); border-color: var(--w-disabled-border); cursor: not-allowed; }
.w-check__input[type="checkbox"]:disabled:checked::after { border-color: var(--w-disabled-fg); }
.w-check__input[type="checkbox"]:disabled:indeterminate::after,
.w-check__input[type="radio"]:disabled:checked::after { background-color: var(--w-disabled-fg); }
.w-check:has(.w-check__input:disabled) { cursor: not-allowed; color: var(--color-foreground-subtle); }

/* Switch: a squared slider, not a pill */
.w-switch {
  position: relative;
  flex: none;
  width: var(--w-leading-40);
  height: var(--w-leading-24);
  border: var(--primitive-border-hairline) solid var(--color-foreground-subtle);
  border-radius: var(--primitive-radius-sm);
  background-color: var(--color-surface-sunken);
  cursor: pointer;
  transition: background-color var(--motion-hover) var(--motion-easing), border-color var(--motion-hover) var(--motion-easing);
}
.w-switch::after {
  content: "";
  position: absolute;
  inset-block-start: calc(var(--primitive-space-1) - var(--primitive-border-hairline));
  inset-inline-start: calc(var(--primitive-space-1) - var(--primitive-border-hairline));
  width: var(--primitive-space-4);
  height: var(--primitive-space-4);
  border-radius: var(--primitive-radius-xs);
  background-color: var(--color-foreground-subtle);
  transition: transform var(--motion-hover) var(--motion-easing), background-color var(--motion-hover) var(--motion-easing);
}
.w-switch:hover,
.w-switch.is-hover { border-color: var(--color-foreground); }
.w-switch[aria-checked="true"] { background-color: var(--color-primary); border-color: var(--color-primary-border); }
.w-switch[aria-checked="true"]::after { transform: translateX(var(--primitive-space-4)); background-color: var(--color-primary-foreground); }
/* Disabled keeps the thumb position, which is the state, and drops the colour */
.w-switch:disabled,
.w-switch.is-disabled { background-color: var(--w-disabled-bg); border-color: var(--w-disabled-border); cursor: not-allowed; }
.w-switch:disabled::after,
.w-switch.is-disabled::after { background-color: var(--w-disabled-fg); }
.w-switch-row { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--primitive-space-4); }

/* Range slider. The track is an 8 px tube with an outline (--w-track-line:
   the Night keyline on light, teal-400 on dark) so the Flame fill is never a
   bare thin line on a light surface. The thumb is a Flame block with a
   Night core and the same keyline. */
.w-range {
  --w-range-pct: 50%;
  --_fill: var(--color-primary);
  --_rest: var(--color-surface-sunken);
  --_line: var(--w-track-line);
  --_thumb: var(--color-primary);
  --_thumb-core: var(--color-primary-foreground);
  --_thumb-line: var(--color-primary-border);
  appearance: none;
  display: block;
  width: 100%;
  height: var(--w-leading-24);
  background: transparent;
  cursor: pointer;
}
.w-range::-webkit-slider-runnable-track {
  box-sizing: border-box;
  height: var(--primitive-space-2);
  border: var(--primitive-border-hairline) solid var(--_line);
  border-radius: var(--primitive-radius-xs);
  background: linear-gradient(to right, var(--_fill) var(--w-range-pct), var(--_rest) var(--w-range-pct));
}
.w-range::-moz-range-track {
  box-sizing: border-box;
  height: var(--primitive-space-2);
  border: var(--primitive-border-hairline) solid var(--_line);
  border-radius: var(--primitive-radius-xs);
  background: linear-gradient(to right, var(--_fill) var(--w-range-pct), var(--_rest) var(--w-range-pct));
}
.w-range::-webkit-slider-thumb {
  appearance: none;
  box-sizing: border-box;
  width: var(--w-leading-20);
  height: var(--w-leading-20);
  margin-block-start: calc((var(--primitive-space-2) - var(--primitive-border-thick)) / 2 - var(--w-leading-20) / 2);
  border: var(--primitive-border-rule) solid var(--_thumb);
  border-radius: var(--primitive-radius-xs);
  background-color: var(--_thumb-core);
  box-shadow: 0 0 0 var(--primitive-border-hairline) var(--_thumb-line);
}
.w-range::-moz-range-thumb {
  box-sizing: border-box;
  width: var(--w-leading-20);
  height: var(--w-leading-20);
  border: var(--primitive-border-rule) solid var(--_thumb);
  border-radius: var(--primitive-radius-xs);
  background-color: var(--_thumb-core);
  box-shadow: 0 0 0 var(--primitive-border-hairline) var(--_thumb-line);
}
.w-range:focus-visible,
.w-range.is-focus { outline: none; }
.w-range:focus-visible::-webkit-slider-thumb,
.w-range.is-focus::-webkit-slider-thumb { outline: var(--w-ring-width) solid var(--color-ring); outline-offset: var(--w-ring-offset); }
.w-range:focus-visible::-moz-range-thumb,
.w-range.is-focus::-moz-range-thumb { outline: var(--w-ring-width) solid var(--color-ring); outline-offset: var(--w-ring-offset); }
.w-range:disabled {
  --_fill: var(--w-disabled-fg);
  --_rest: var(--w-disabled-bg);
  --_line: var(--w-disabled-border);
  --_thumb: var(--w-disabled-fg);
  --_thumb-core: var(--w-disabled-bg);
  --_thumb-line: var(--w-disabled-border);
  cursor: not-allowed;
}
.w-range-scale {
  display: flex;
  justify-content: space-between;
  font-family: var(--font-accent);
  font-size: var(--primitive-font-size-2xs);
  line-height: var(--w-leading-16);
  color: var(--color-foreground-subtle);
}

/* File upload */
.w-dropzone {
  position: relative;
  display: grid;
  justify-items: start;
  gap: var(--primitive-space-2);
  padding: var(--primitive-space-5);
  border: var(--primitive-border-hairline) dashed var(--color-border-strong);
  border-radius: var(--primitive-radius-sm);
  background-color: var(--w-hover-wash);
  cursor: pointer;
  transition: border-color var(--motion-hover) var(--motion-easing), background-color var(--motion-hover) var(--motion-easing);
}
.w-dropzone:hover,
.w-dropzone.is-hover { border-color: var(--color-foreground); }
.w-dropzone.is-dragover { border-style: solid; border-color: var(--color-ring); background-color: var(--w-active-wash); }
.w-dropzone.is-error { border-color: var(--color-danger); }
.w-dropzone:focus-within { outline: var(--w-ring-width) solid var(--color-ring); outline-offset: var(--w-ring-offset); }
.w-dropzone__input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.w-dropzone__title { font-weight: var(--primitive-font-weight-medium); }
.w-dropzone__title u { text-decoration-thickness: var(--primitive-border-hairline); text-underline-offset: var(--primitive-space-1); }

.w-file {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--primitive-space-3);
  padding: var(--primitive-space-3);
  border: var(--primitive-border-hairline) solid var(--color-border);
  border-radius: var(--primitive-radius-sm);
  background-color: var(--card-bg);
}
.w-file__name { font-size: var(--text-small-size); line-height: var(--w-leading-20); font-weight: var(--primitive-font-weight-medium); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.w-file__meta { font-family: var(--font-accent); font-size: var(--primitive-font-size-2xs); line-height: var(--w-leading-16); color: var(--color-foreground-subtle); }

@media (min-width: 30em) {
  .w-inline-form { flex-direction: row; }
}

/* --------------------------------------------------------------------------
   6. BADGES, TAGS, CHIPS, AVATAR
   -------------------------------------------------------------------------- */
/* Status badges always carry a mark with its own shape (check, dot,
   triangle, cross) because light danger and success text share a luminance
   and dark danger and success are 1.29:1 apart. Use .w-icon--mark. */
.w-badge {
  --_bg: var(--w-fill-quiet);
  --_fg: var(--color-foreground);
  display: inline-flex;
  align-items: center;
  gap: var(--primitive-space-1);
  height: var(--w-leading-20);
  padding: 0 var(--badge-padding-x);
  border: var(--primitive-border-hairline) solid transparent;
  border-radius: var(--badge-radius);
  background-color: var(--_bg);
  color: var(--_fg);
  font-family: var(--font-accent);
  font-size: var(--badge-font-size);
  line-height: 1;
  font-weight: var(--primitive-font-weight-medium);
  letter-spacing: var(--primitive-font-tracking-wide);
  text-transform: uppercase;
  white-space: nowrap;
}
.w-badge--solid { --_bg: var(--color-secondary); --_fg: var(--color-secondary-foreground); }
.w-badge--signal { --_bg: var(--color-primary); --_fg: var(--color-primary-foreground); border-color: var(--color-primary-border); }
.w-badge--outline { --_bg: transparent; border-color: var(--color-border-strong); }
.w-badge--info { --_bg: var(--color-info-subtle); --_fg: var(--color-info); }
.w-badge--success { --_bg: var(--color-success-subtle); --_fg: var(--color-success); }
/* warning: ink text on the pale ground, a triangle mark; no khaki text */
.w-badge--warning { --_bg: var(--color-warning-subtle); --_fg: var(--color-foreground); }
.w-badge--warning .w-icon { color: var(--w-warning-mark); }
.w-badge--danger { --_bg: var(--color-danger-subtle); --_fg: var(--color-danger); }
.w-badge--lg { height: var(--w-leading-24); font-size: var(--text-caption-size); }
.w-badge__dot { width: var(--primitive-space-2); height: var(--primitive-space-2); border-radius: var(--primitive-radius-full); background-color: currentColor; }

/* Tag: sentence case, for taxonomy */
.w-tag {
  display: inline-flex;
  align-items: center;
  gap: var(--primitive-space-1);
  height: var(--w-leading-24);
  padding: 0 var(--primitive-space-2);
  border: var(--primitive-border-hairline) solid var(--color-border);
  border-radius: var(--primitive-radius-xs);
  background-color: transparent;
  color: var(--color-foreground-muted);
  font-size: var(--text-caption-size);
  line-height: var(--w-leading-16);
  font-weight: var(--primitive-font-weight-medium);
  text-decoration: none;
  white-space: nowrap;
}
a.w-tag:hover,
.w-tag.is-hover { border-color: var(--color-foreground); color: var(--color-foreground); }

/* Chip: interactive, 32 high */
.w-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--primitive-space-2);
  height: var(--button-height-sm);
  padding: 0 var(--primitive-space-3);
  border: var(--primitive-border-hairline) solid var(--color-border-strong);
  border-radius: var(--primitive-radius-sm);
  background-color: transparent;
  color: var(--color-foreground);
  font-size: var(--text-small-size);
  line-height: var(--w-leading-20);
  font-weight: var(--primitive-font-weight-medium);
  white-space: nowrap;
  transition: background-color var(--motion-hover) var(--motion-easing), border-color var(--motion-hover) var(--motion-easing);
}
button.w-chip { cursor: pointer; }
button.w-chip:hover,
.w-chip.is-hover { border-color: var(--color-foreground); }
.w-chip[aria-pressed="true"],
.w-chip.is-selected { background-color: var(--color-secondary); border-color: var(--color-secondary); color: var(--color-secondary-foreground); }
.w-chip--removable { padding-inline-end: var(--primitive-space-1); }
.w-chip__remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--w-leading-24);
  height: var(--w-leading-24);
  border-radius: var(--primitive-radius-xs);
  color: var(--color-foreground-muted);
}
.w-chip__remove:hover { background-color: var(--w-hover-wash); color: var(--color-foreground); }
.w-chip__remove .w-icon { width: var(--icon-size-sm); height: var(--icon-size-sm); }
.w-chip:disabled,
.w-chip.is-disabled { background-color: var(--w-disabled-bg); border-color: var(--w-disabled-border); color: var(--w-disabled-fg); pointer-events: none; }

/* Avatar: a cut square */
.w-avatar {
  --_s: var(--button-height-md);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: var(--_s);
  height: var(--_s);
  border-radius: var(--primitive-radius-sm);
  background-color: var(--color-secondary);
  color: var(--color-secondary-foreground);
  font-family: var(--font-display);
  font-size: var(--text-small-size);
  line-height: 1;
  font-weight: var(--primitive-font-weight-bold);
  letter-spacing: var(--primitive-font-tracking-wide);
  text-transform: uppercase;
}
.w-avatar > img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
.w-avatar--sm { --_s: var(--button-height-sm); font-size: var(--primitive-font-size-2xs); }
.w-avatar--lg { --_s: var(--button-height-lg); font-size: var(--text-body-size); }
.w-avatar--xl { --_s: var(--primitive-space-9); font-size: var(--primitive-font-size-xl); }
.w-avatar--muted { background-color: var(--w-fill-quiet); color: var(--color-foreground); }
.w-avatar--outline { background-color: transparent; color: var(--color-foreground); box-shadow: inset 0 0 0 var(--primitive-border-hairline) var(--color-border-strong); }
.w-avatar__status {
  position: absolute;
  inset-block-end: calc(var(--primitive-space-1) * -1);
  inset-inline-end: calc(var(--primitive-space-1) * -1);
  width: var(--primitive-space-3);
  height: var(--primitive-space-3);
  border: var(--primitive-border-thick) solid var(--color-background);
  border-radius: var(--primitive-radius-full);
  background-color: var(--color-success);
}
.w-avatar-group { display: inline-flex; }
.w-avatar-group > .w-avatar { box-shadow: 0 0 0 var(--primitive-border-thick) var(--color-background); }
.w-avatar-group > .w-avatar + .w-avatar { margin-inline-start: var(--primitive-border-thick); }

/* --------------------------------------------------------------------------
   7. FEEDBACK
   -------------------------------------------------------------------------- */
/* Alerts. Every status has its own icon shape (circle-i, circle-check,
   triangle, octagon) and a 4 px bar; text is always the normal foreground.
   Warning is a neutral panel with a Sulfur bar and a triangle: Sulfur is
   never text and never a tinted block next to Flame. On light the other
   statuses sit on their pale tint; on dark every alert is the same neutral
   teal lift. */
.w-alert {
  --_tone: var(--color-foreground-subtle);
  --_icon: var(--_tone);
  --_bg: var(--w-hover-wash);
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: start;
  gap: var(--primitive-space-3);
  padding: var(--primitive-space-4);
  padding-inline-start: calc(var(--primitive-space-4) - var(--primitive-border-rule));
  border-inline-start: var(--primitive-border-rule) solid var(--_tone);
  border-radius: var(--primitive-radius-xs);
  background-color: var(--_bg);
  color: var(--color-foreground);
}
.w-alert--info { --_tone: var(--color-info); --_bg: var(--w-alert-info-bg); }
.w-alert--success { --_tone: var(--color-success); --_bg: var(--w-alert-success-bg); }
.w-alert--warning { --_tone: var(--w-warning-bar); --_icon: var(--w-warning-mark); }
.w-alert--danger { --_tone: var(--color-danger); --_bg: var(--w-alert-danger-bg); }
.w-alert__icon { color: var(--_icon); }
.w-alert__body { display: grid; gap: var(--primitive-space-1); }
.w-alert__title { font-weight: var(--primitive-font-weight-semibold); line-height: var(--w-leading-24); }
.w-alert__text { font-size: var(--text-small-size); line-height: var(--w-leading-20); color: var(--color-foreground-muted); }
.w-alert__actions { display: flex; flex-wrap: wrap; gap: var(--primitive-space-4); margin-block-start: var(--primitive-space-2); }
.w-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: var(--button-height-sm);
  height: var(--button-height-sm);
  margin: calc(var(--primitive-space-1) * -1);
  border-radius: var(--primitive-radius-sm);
  color: var(--color-foreground-muted);
  transition: background-color var(--motion-hover) var(--motion-easing), color var(--motion-hover) var(--motion-easing);
}
.w-close:hover,
.w-close.is-hover { background-color: var(--w-hover-wash); color: var(--color-foreground); }
.w-close .w-icon { width: var(--w-icon-control); height: var(--w-icon-control); }

/* Toast: an always-dark overlay. Deep Water over a light page; in the dark
   theme it rises to the overlay level (teal-650) so it is lighter than the
   cards under it. Tone is carried by the icon shape, then the colour. */
.w-toast-region {
  position: fixed;
  inset-block-end: var(--primitive-space-4);
  inset-inline-end: var(--primitive-space-4);
  z-index: var(--primitive-z-toast);
  display: flex;
  flex-direction: column;
  gap: var(--primitive-space-2);
  width: min(calc(var(--w-u) * 96), calc(100% - var(--primitive-space-6)));
  pointer-events: none;
}
.w-toast {
  --_tone: var(--color-foreground-subtle);
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: start;
  gap: var(--primitive-space-3);
  padding: var(--primitive-space-4);
  border: var(--primitive-border-hairline) solid var(--w-overlay-border);
  border-radius: var(--primitive-radius-sm);
  box-shadow: var(--primitive-shadow-lg);
  pointer-events: auto;
}
.w-toast--info { --_tone: var(--color-info); }
.w-toast--success { --_tone: var(--color-success); }
.w-toast--warning { --_tone: var(--w-warning-mark); }
.w-toast--danger { --_tone: var(--color-danger); }
.w-toast__icon { color: var(--_tone); }
.w-toast__body { display: grid; gap: var(--primitive-space-1); }
.w-toast__title { font-size: var(--text-small-size); line-height: var(--w-leading-24); font-weight: var(--primitive-font-weight-semibold); }
.w-toast__text { font-size: var(--text-small-size); line-height: var(--w-leading-20); color: var(--color-foreground-muted); }
.w-toast.is-entering { animation: w-rise var(--motion-enter) var(--motion-easing); }
.w-toast.is-leaving { animation: w-fade-out var(--motion-exit) var(--primitive-ease-exit) forwards; }

/* Tooltip: Night on a light page. On a dark page Night would equal the
   ground, so it is teal-600 with a teal-400 rim: the lightest surface,
   because it sits above everything. --tooltip-bg is not used for that
   reason (it is Night in both themes). */
.w-tooltip {
  position: fixed;
  z-index: var(--primitive-z-tooltip);
  max-width: calc(var(--w-u) * 64);
  padding: var(--primitive-space-1) var(--primitive-space-2);
  border: var(--primitive-border-hairline) solid var(--w-tooltip-border);
  border-radius: var(--primitive-radius-xs);
  background-color: var(--w-tooltip-bg);
  color: var(--w-tooltip-fg);
  font-size: var(--text-caption-size);
  line-height: var(--w-leading-16);
  font-weight: var(--primitive-font-weight-medium);
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--motion-hover) var(--motion-easing);
}
.w-tooltip.is-open { opacity: 1; }
.w-tooltip--static { position: static; display: inline-block; opacity: 1; }

/* Progress bar */
.w-progress { display: grid; gap: var(--primitive-space-2); }
.w-progress__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--primitive-space-4); font-size: var(--text-small-size); line-height: var(--w-leading-20); font-weight: var(--primitive-font-weight-medium); }
.w-progress__value { font-family: var(--font-accent); font-variant-numeric: tabular-nums; font-weight: var(--primitive-font-weight-regular); color: var(--color-foreground-muted); }
/* The track is a tube: a sunken well inside an outline. On light the
   outline is the Night keyline, so the Flame fill is enclosed (Flame alone
   is 2.1:1 on the canvas); the fill ends in the same keyline, which marks
   the value at 17:1. On dark the outline is teal-400, the end line is Flame
   (so it vanishes) and Flame needs no help (7:1+ on the well). */
.w-progress__track {
  --_line: var(--w-track-line);
  --_end: var(--color-primary-border);
  position: relative;
  box-sizing: border-box;
  height: var(--primitive-space-2);
  border: var(--primitive-border-hairline) solid var(--_line);
  border-radius: var(--primitive-radius-xs);
  background-color: var(--color-surface-sunken);
  overflow: hidden;
}
.w-progress__bar {
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  box-sizing: border-box;
  width: var(--w-progress, 0%);
  border-inline-end: var(--primitive-border-hairline) solid var(--_end);
  background-color: var(--color-primary);
  transition: width var(--motion-enter) var(--motion-easing);
}
.w-progress--sm .w-progress__track { height: calc(var(--w-u) * 1.5); }
.w-progress--neutral .w-progress__track { --_line: var(--color-border-strong); --_end: transparent; }
.w-progress--neutral .w-progress__bar { background-color: var(--color-foreground); }
/* danger: rose fill, rose outline. Always pair it with the octagon icon in
   the head (.w-progress__flag); the hue alone does not say "over" */
.w-progress--danger .w-progress__track { --_line: var(--color-danger); --_end: transparent; background-color: var(--color-danger-subtle); }
.w-progress--danger .w-progress__bar { background-color: var(--color-danger); }
.w-progress__flag { display: inline-flex; align-items: center; gap: var(--primitive-space-1); }
.w-progress__flag .w-icon { width: var(--icon-size-sm); height: var(--icon-size-sm); color: var(--color-danger); }
.w-progress--indeterminate .w-progress__bar { width: 40%; animation: w-slide calc(var(--primitive-duration-slow) * 4) var(--motion-easing) infinite; }

/* Skeleton */
.w-skeleton {
  display: block;
  height: var(--primitive-space-4);
  border-radius: var(--primitive-radius-xs);
  background-color: var(--w-active-wash);
  background-image: linear-gradient(90deg, transparent, var(--w-hover-wash), transparent);
  background-size: 200% 100%;
  background-repeat: no-repeat;
  animation: w-shimmer calc(var(--primitive-duration-slow) * 4) linear infinite;
}
.w-skeleton--title { height: var(--primitive-space-5); width: 60%; }
.w-skeleton--text { height: var(--primitive-space-3); }
.w-skeleton--short { width: 40%; }
.w-skeleton--avatar { width: var(--button-height-md); height: var(--button-height-md); border-radius: var(--primitive-radius-sm); }
.w-skeleton--block { height: calc(var(--w-u) * 32); border-radius: var(--primitive-radius-sm); }

/* Spinner */
.w-spinner {
  display: inline-block;
  flex: none;
  width: var(--icon-size-md);
  height: var(--icon-size-md);
  border: var(--primitive-border-thick) solid color-mix(in srgb, currentColor 24%, transparent);
  border-block-start-color: currentColor;
  border-radius: var(--primitive-radius-full);
  animation: w-spin calc(var(--primitive-duration-slow) * 2) linear infinite;
}
.w-spinner--sm { width: var(--icon-size-sm); height: var(--icon-size-sm); }
.w-spinner--lg { width: var(--icon-size-lg); height: var(--icon-size-lg); }

/* Empty state: left aligned, like everything else */
.w-empty {
  display: grid;
  justify-items: start;
  gap: var(--primitive-space-4);
  padding: var(--primitive-space-6);
  border: var(--primitive-border-hairline) dashed var(--color-border-strong);
  border-radius: var(--primitive-radius-md);
}
.w-empty__icon,
.w-icon-tile {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--button-height-lg);
  height: var(--button-height-lg);
  border-radius: var(--primitive-radius-sm);
  background-color: var(--w-fill-quiet);
  color: var(--color-foreground);
}
.w-icon-tile--solid { background-color: var(--color-secondary); color: var(--color-secondary-foreground); }
.w-empty__text { display: grid; gap: var(--primitive-space-2); max-width: calc(var(--w-u) * 120); }

@keyframes w-spin { to { transform: rotate(360deg); } }
@keyframes w-shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }
@keyframes w-slide { from { transform: translateX(-100%); } to { transform: translateX(250%); } }
@keyframes w-rise { from { opacity: 0; transform: translateY(var(--primitive-space-2)); } to { opacity: 1; transform: none; } }
@keyframes w-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes w-fade-out { to { opacity: 0; transform: translateY(var(--primitive-space-1)); } }

/* --------------------------------------------------------------------------
   8. NAVIGATION
   -------------------------------------------------------------------------- */
/* Tabs: a 4 px ink rule (--w-mark) and a weight change mark the active tab.
   Wayfinding is not the brand colour, so tabs, side navigation and selected
   rows never spend the one warm element a view is allowed. */
.w-tabs__list {
  display: flex;
  gap: var(--primitive-space-5);
  border-block-end: var(--primitive-border-hairline) solid var(--color-border);
  overflow-x: auto;
  scrollbar-width: none;
}
.w-tabs__list::-webkit-scrollbar { display: none; }
.w-tab {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--primitive-space-2);
  flex: none;
  height: var(--button-height-lg);
  padding: 0 var(--primitive-space-1);
  margin-block-end: calc(var(--primitive-border-hairline) * -1);
  border-block-end: var(--primitive-border-hairline) solid transparent;
  color: var(--color-foreground-muted);
  font-size: var(--text-small-size);
  line-height: var(--w-leading-20);
  font-weight: var(--primitive-font-weight-medium);
  white-space: nowrap;
  cursor: pointer;
  transition: color var(--motion-hover) var(--motion-easing), box-shadow var(--motion-hover) var(--motion-easing);
}
.w-tab:hover,
.w-tab.is-hover { color: var(--color-foreground); box-shadow: inset 0 calc(var(--primitive-border-rule) * -1) 0 var(--color-border); }
.w-tab[aria-selected="true"],
.w-tab.is-selected {
  color: var(--color-foreground);
  font-weight: var(--primitive-font-weight-semibold);
  border-block-end-color: var(--w-mark);
  box-shadow: inset 0 calc(var(--primitive-border-rule) * -1) 0 var(--w-mark);
}
.w-tab:focus-visible,
.w-tab.is-focus { outline-offset: calc(var(--w-ring-width) * -1); }
.w-tab:disabled,
.w-tab[aria-disabled="true"] { color: var(--w-disabled-fg); cursor: not-allowed; pointer-events: none; }
.w-tab__count { font-family: var(--font-accent); font-size: var(--primitive-font-size-2xs); color: var(--color-foreground-subtle); }
.w-tabs__panel { padding-block-start: var(--primitive-space-5); }
.w-tabs__panel:focus-visible { outline-offset: var(--primitive-space-1); }

/* Accordion */
.w-accordion { border-block-start: var(--primitive-border-hairline) solid var(--color-foreground); }
.w-accordion__item { border-block-end: var(--primitive-border-hairline) solid var(--color-border); }
.w-accordion__trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--primitive-space-4);
  width: 100%;
  min-height: var(--primitive-space-9);
  padding: var(--primitive-space-4) 0;
  text-align: start;
  font-family: var(--font-display);
  font-size: var(--primitive-font-size-lg);
  line-height: var(--w-leading-24);
  font-weight: var(--text-heading-weight);
  color: var(--color-foreground);
  cursor: pointer;
}
.w-accordion__trigger:hover .w-accordion__mark,
.w-accordion__trigger.is-hover .w-accordion__mark { background-color: var(--w-hover-wash); }
.w-accordion__mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: var(--button-height-sm);
  height: var(--button-height-sm);
  border-radius: var(--primitive-radius-sm);
  color: var(--color-foreground-muted);
  transition: transform var(--motion-hover) var(--motion-easing), background-color var(--motion-hover) var(--motion-easing);
}
.w-accordion__mark .w-icon { width: var(--w-icon-control); height: var(--w-icon-control); }
.w-accordion__trigger[aria-expanded="true"] .w-accordion__mark { transform: rotate(45deg); color: var(--color-foreground); }
.w-accordion__panel { padding-block-end: var(--primitive-space-5); padding-inline-end: var(--primitive-space-8); color: var(--color-foreground-muted); max-width: var(--layout-measure); }

/* Breadcrumb */
.w-breadcrumb { display: flex; flex-wrap: wrap; align-items: center; gap: var(--primitive-space-2); font-size: var(--text-small-size); line-height: var(--w-leading-20); }
.w-breadcrumb li { display: inline-flex; align-items: center; gap: var(--primitive-space-2); color: var(--color-foreground-muted); }
.w-breadcrumb li + li::before { content: "/"; font-family: var(--font-accent); color: var(--color-border-strong); }
.w-breadcrumb a { text-decoration: none; border-radius: var(--primitive-radius-xs); }
.w-breadcrumb a:hover { color: var(--color-foreground); text-decoration: underline; text-underline-offset: var(--primitive-space-1); }
.w-breadcrumb [aria-current="page"] { color: var(--color-foreground); font-weight: var(--primitive-font-weight-medium); }

/* Pagination */
.w-pagination { display: flex; flex-wrap: wrap; align-items: center; gap: var(--primitive-space-1); }
.w-page {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--primitive-space-2);
  min-width: var(--button-height-md);
  height: var(--button-height-md);
  padding: 0 var(--primitive-space-2);
  border-radius: var(--primitive-radius-sm);
  font-family: var(--font-accent);
  font-size: var(--text-small-size);
  font-variant-numeric: tabular-nums;
  color: var(--color-foreground-muted);
  text-decoration: none;
  transition: background-color var(--motion-hover) var(--motion-easing), color var(--motion-hover) var(--motion-easing);
}
.w-page .w-icon { width: var(--w-icon-control); height: var(--w-icon-control); }
a.w-page:hover,
button.w-page:hover,
.w-page.is-hover { background-color: var(--w-hover-wash); color: var(--color-foreground); }
.w-page[aria-current="page"],
.w-page.is-selected { background-color: var(--color-secondary); color: var(--color-secondary-foreground); font-weight: var(--primitive-font-weight-medium); }
.w-page[aria-disabled="true"],
.w-page:disabled { color: var(--w-disabled-fg); pointer-events: none; }
.w-page--label { font-family: var(--font-body); font-weight: var(--primitive-font-weight-medium); padding-inline: var(--primitive-space-3); }

/* Steps: the chain. Complete is ink with a check, the current node is the
   warm one (Flame with a Night figure, inside the Night keyline on light),
   upcoming is outline. .w-steps--quiet makes the current node heavy ink
   instead, for a chain that sits beside a primary button. */
.w-steps { --_node: var(--button-height-sm); display: flex; flex-direction: column; }
.w-steps__item {
  position: relative;
  display: flex;
  gap: var(--primitive-space-4);
  flex: 1 1 0;
  padding-block-end: var(--primitive-space-5);
}
.w-steps__item:last-child { padding-block-end: 0; }
.w-steps__item::after {
  content: "";
  position: absolute;
  inset-block-start: calc(var(--_node) + var(--primitive-space-1));
  inset-block-end: var(--primitive-space-1);
  inset-inline-start: calc(var(--_node) / 2 - var(--primitive-border-hairline) / 2);
  width: var(--primitive-border-hairline);
  background-color: var(--color-border-strong);
}
.w-steps__item:last-child::after { display: none; }
.w-steps__item.is-complete::after { background-color: var(--color-foreground); }
.w-steps__node {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: var(--_node);
  height: var(--_node);
  border: var(--primitive-border-hairline) solid var(--color-border-strong);
  border-radius: var(--primitive-radius-sm);
  font-family: var(--font-accent);
  font-size: var(--text-caption-size);
  font-weight: var(--primitive-font-weight-medium);
  color: var(--color-foreground-muted);
}
.w-steps__node .w-icon { width: var(--icon-size-sm); height: var(--icon-size-sm); }
.w-steps__item.is-complete .w-steps__node { background-color: var(--color-secondary); border-color: var(--color-secondary); color: var(--color-secondary-foreground); }
.w-steps__item.is-current .w-steps__node,
.w-steps__item[aria-current="step"] .w-steps__node { background-color: var(--color-primary); border-color: var(--color-primary-border); color: var(--color-primary-foreground); font-weight: var(--primitive-font-weight-semibold); }
.w-steps--quiet .w-steps__item.is-current .w-steps__node,
.w-steps--quiet .w-steps__item[aria-current="step"] .w-steps__node { background-color: transparent; border-color: var(--color-foreground); color: var(--color-foreground); box-shadow: inset 0 0 0 var(--primitive-border-hairline) var(--color-foreground); }
.w-steps__item.is-error .w-steps__node { border-color: var(--color-danger); color: var(--color-danger); }
.w-steps__body { display: grid; gap: var(--primitive-space-1); align-content: start; padding-block-start: var(--primitive-space-1); }
.w-steps__label { font-family: var(--font-display); font-size: var(--text-body-size); line-height: var(--w-leading-24); font-weight: var(--text-heading-weight); color: var(--color-foreground-muted); }
.w-steps__item.is-complete .w-steps__label,
.w-steps__item.is-current .w-steps__label,
.w-steps__item[aria-current="step"] .w-steps__label { color: var(--color-foreground); }
.w-steps__meta { font-size: var(--text-small-size); line-height: var(--w-leading-20); color: var(--color-foreground-muted); }

@media (min-width: 48em) {
  .w-steps:not(.w-steps--vertical) { flex-direction: row; gap: var(--primitive-space-2); }
  .w-steps:not(.w-steps--vertical) .w-steps__item { flex-direction: column; gap: var(--primitive-space-3); padding-block-end: 0; padding-inline-end: var(--primitive-space-4); }
  .w-steps:not(.w-steps--vertical) .w-steps__item::after {
    inset-block-start: calc(var(--_node) / 2 - var(--primitive-border-hairline) / 2);
    inset-block-end: auto;
    inset-inline-start: calc(var(--_node) + var(--primitive-space-2));
    inset-inline-end: 0;
    width: auto;
    height: var(--primitive-border-hairline);
  }
  .w-steps:not(.w-steps--vertical) .w-steps__body { padding-block-start: 0; }
}

/* Top navigation bar: Deep Water in both themes. --nav-bg is not used: it
   aliases --color-surface-inverse, which turns light under the dark theme. */
.w-nav {
  position: relative;
  z-index: var(--primitive-z-sticky);
}
.w-nav--sticky { position: sticky; inset-block-start: 0; }
.w-nav__inner { display: flex; align-items: center; gap: var(--primitive-space-5); height: var(--nav-height); }
.w-brand {
  display: inline-flex;
  align-items: center;
  gap: var(--primitive-space-3);
  font-family: var(--font-display);
  font-stretch: var(--w-font-stretch-wide);
  font-size: var(--primitive-font-size-lg);
  line-height: 1;
  font-weight: var(--primitive-font-weight-black);
  letter-spacing: var(--primitive-font-tracking-wide);
  color: var(--color-foreground);
  text-decoration: none;
}
/* The mark is Flame. It lives on Deep Water; on a light ground the keyline
   token turns Night and outlines it. */
.w-brand__mark { width: var(--primitive-space-3); height: var(--primitive-space-3); background-color: var(--color-primary); box-shadow: 0 0 0 var(--primitive-border-hairline) var(--color-primary-border); }
.w-brand__sub {
  font-family: var(--font-accent);
  font-stretch: normal;
  font-size: var(--primitive-font-size-2xs);
  font-weight: var(--primitive-font-weight-regular);
  letter-spacing: var(--text-eyebrow-tracking);
  text-transform: uppercase;
  color: var(--color-foreground-subtle);
}
.w-nav__links { display: none; align-items: stretch; gap: var(--primitive-space-5); height: 100%; margin-inline-start: var(--primitive-space-5); }
.w-nav__link {
  display: inline-flex;
  align-items: center;
  height: 100%;
  font-size: var(--text-small-size);
  line-height: var(--w-leading-20);
  font-weight: var(--primitive-font-weight-medium);
  color: var(--color-foreground-muted);
  text-decoration: none;
  transition: color var(--motion-hover) var(--motion-easing), box-shadow var(--motion-hover) var(--motion-easing);
}
.w-nav__link:hover,
.w-nav__link.is-hover { color: var(--color-foreground); box-shadow: inset 0 calc(var(--primitive-border-rule) * -1) 0 var(--color-border); }
.w-nav__link[aria-current="page"],
.w-nav__link.is-selected { color: var(--color-foreground); box-shadow: inset 0 calc(var(--primitive-border-rule) * -1) 0 var(--w-mark); }
.w-nav__link:focus-visible { outline-offset: calc(var(--w-ring-width) * -1); }
.w-nav__actions { display: flex; align-items: center; gap: var(--primitive-space-2); margin-inline-start: auto; }
.w-nav__desktop { display: none; }
@media (min-width: 64em) {
  .w-nav__links { display: flex; }
  .w-nav__desktop { display: inline-flex; }
  .w-nav__toggle { display: none; }
}

/* Mobile drawer: a native dialog, so focus is trapped by the platform */
.w-drawer {
  position: fixed;
  inset: 0 0 0 auto;
  width: min(calc(var(--w-u) * 80), 88vw);
  max-width: none;
  height: 100dvh;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  border-inline-start: var(--primitive-border-hairline) solid var(--color-border);
  overflow-y: auto;
}
.w-drawer::backdrop { background-color: var(--color-overlay); }
.w-drawer[open] { animation: w-drawer-in var(--motion-enter) var(--motion-easing); }
.w-drawer__head { display: flex; align-items: center; justify-content: space-between; height: var(--nav-height); padding-inline: var(--primitive-space-4); border-block-end: var(--primitive-border-hairline) solid var(--color-border); }
.w-drawer__body { display: grid; gap: var(--primitive-space-5); padding: var(--primitive-space-4); }
.w-drawer__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: var(--button-height-lg);
  border-block-end: var(--primitive-border-hairline) solid var(--color-border);
  font-family: var(--font-display);
  font-size: var(--primitive-font-size-lg);
  font-weight: var(--text-heading-weight);
  text-decoration: none;
}
.w-drawer__link[aria-current="page"] { box-shadow: inset var(--primitive-border-rule) 0 0 var(--w-mark); padding-inline-start: var(--primitive-space-4); }
@keyframes w-drawer-in { from { transform: translateX(100%); } to { transform: none; } }

/* Side navigation */
.w-sidenav { display: grid; gap: var(--primitive-space-5); align-content: start; }
.w-sidenav__group { display: grid; gap: var(--primitive-space-1); }
.w-sidenav__label {
  padding: 0 var(--primitive-space-3) var(--primitive-space-2);
  font-family: var(--font-accent);
  font-size: var(--primitive-font-size-2xs);
  line-height: var(--w-leading-16);
  letter-spacing: var(--text-eyebrow-tracking);
  text-transform: uppercase;
  color: var(--color-foreground-subtle);
}
.w-sidenav__link {
  display: flex;
  align-items: center;
  gap: var(--primitive-space-3);
  min-height: var(--button-height-md);
  padding: 0 var(--primitive-space-3);
  border-radius: var(--primitive-radius-sm);
  font-size: var(--text-small-size);
  line-height: var(--w-leading-20);
  font-weight: var(--primitive-font-weight-medium);
  color: var(--color-foreground-muted);
  text-decoration: none;
  transition: background-color var(--motion-hover) var(--motion-easing), color var(--motion-hover) var(--motion-easing);
}
.w-sidenav__link .w-icon { width: var(--w-icon-control); height: var(--w-icon-control); }
.w-sidenav__link:hover,
.w-sidenav__link.is-hover { background-color: var(--w-hover-wash); color: var(--color-foreground); }
.w-sidenav__link[aria-current="page"],
.w-sidenav__link.is-selected {
  background-color: var(--w-active-wash);
  color: var(--color-foreground);
  font-weight: var(--primitive-font-weight-semibold);
  box-shadow: inset var(--primitive-border-rule) 0 0 var(--w-mark);
}
.w-sidenav__link[aria-disabled="true"] { color: var(--w-disabled-fg); pointer-events: none; }
.w-sidenav__trail { margin-inline-start: auto; font-family: var(--font-accent); font-size: var(--primitive-font-size-2xs); color: var(--color-foreground-subtle); }

/* Footer: Deep Water */
.w-footer { padding-block: var(--primitive-space-9) var(--primitive-space-5); }
.w-footer__top { padding-block-end: var(--primitive-space-9); }
.w-footer__heading {
  margin-block-end: var(--primitive-space-4);
  font-family: var(--font-accent);
  font-size: var(--primitive-font-size-2xs);
  line-height: var(--w-leading-16);
  font-weight: var(--primitive-font-weight-regular);
  letter-spacing: var(--text-eyebrow-tracking);
  text-transform: uppercase;
  color: var(--color-foreground-subtle);
}
.w-footer__links { display: grid; gap: var(--primitive-space-2); }
.w-footer__links a { font-size: var(--text-small-size); line-height: var(--w-leading-24); color: var(--color-foreground-muted); text-decoration: none; }
.w-footer__links a:hover { color: var(--color-foreground); text-decoration: underline; text-underline-offset: var(--primitive-space-1); }
.w-footer__bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--primitive-space-3) var(--primitive-space-5);
  padding-block-start: var(--primitive-space-5);
  border-block-start: var(--primitive-border-hairline) solid var(--color-border);
  font-family: var(--font-accent);
  font-size: var(--primitive-font-size-2xs);
  line-height: var(--w-leading-16);
  letter-spacing: var(--primitive-font-tracking-wide);
  text-transform: uppercase;
  color: var(--color-foreground-subtle);
}
.w-footer__bottom a { text-decoration: none; }
.w-footer__bottom a:hover { color: var(--color-foreground); }

/* --------------------------------------------------------------------------
   9. OVERLAYS
   -------------------------------------------------------------------------- */
/* Modal and menu sit at the overlay level: white on light, teal-650 on dark
   (lighter than a Storm card) with a teal-500 rim, since a dark shadow does
   not show on a dark page. Fields inside are Storm wells on dark. */
.w-modal,
.w-menu__list {
  --input-bg: var(--w-field-on-overlay);
  --input-placeholder: var(--w-subtle-on-overlay);
  --card-bg: var(--w-card-on-overlay);
  --color-foreground-subtle: var(--w-subtle-on-overlay);
  --w-disabled-fg: var(--w-disabled-on-overlay);
}
.w-modal {
  width: min(var(--modal-width), calc(100% - var(--primitive-space-6)));
  max-height: calc(100dvh - var(--primitive-space-9));
  padding: 0;
  border: var(--primitive-border-hairline) solid var(--w-overlay-border);
  border-radius: var(--modal-radius);
  background-color: var(--modal-bg);
  color: var(--color-foreground);
  box-shadow: var(--modal-shadow);
  overflow: hidden;
}
dialog.w-modal[open] { display: flex; flex-direction: column; animation: w-rise var(--motion-enter) var(--motion-easing); }
.w-modal::backdrop { background-color: var(--color-overlay); animation: w-fade-in var(--motion-enter) var(--motion-easing); }
.w-modal--sm { width: min(calc(var(--w-u) * 96), calc(100% - var(--primitive-space-6))); }
.w-modal--lg { width: min(calc(var(--w-u) * 160), calc(100% - var(--primitive-space-6))); }
.w-modal--static { position: static; display: flex; flex-direction: column; margin: 0; max-width: 100%; }
.w-modal__header { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--primitive-space-4); padding: var(--primitive-space-5) var(--primitive-space-5) 0; }
.w-modal__title { font-family: var(--font-display); font-size: var(--primitive-font-size-xl); line-height: var(--w-leading-28); font-weight: var(--primitive-font-weight-bold); letter-spacing: var(--text-heading-tracking); }
.w-modal__body { display: grid; gap: var(--primitive-space-4); padding: var(--primitive-space-3) var(--primitive-space-5) var(--primitive-space-5); overflow-y: auto; color: var(--color-foreground-muted); }
.w-modal__footer {
  display: flex;
  flex-direction: column-reverse;
  gap: var(--primitive-space-2);
  padding: var(--primitive-space-4) var(--primitive-space-5);
  border-block-start: var(--primitive-border-hairline) solid var(--w-overlay-border);
  background-color: var(--w-hover-wash);
}
@media (min-width: 30em) {
  .w-modal__footer { flex-direction: row; justify-content: flex-end; gap: var(--primitive-space-3); }
}

/* Dropdown menu */
.w-menu { position: relative; display: inline-block; }
.w-menu__list {
  position: absolute;
  inset-block-start: calc(100% + var(--primitive-space-1));
  inset-inline-start: 0;
  z-index: var(--primitive-z-overlay);
  min-width: calc(var(--w-u) * 60);
  padding: var(--primitive-space-1);
  border: var(--primitive-border-hairline) solid var(--w-overlay-border);
  border-radius: var(--primitive-radius-sm);
  background-color: var(--modal-bg);
  box-shadow: var(--primitive-shadow-md);
  animation: w-rise var(--motion-hover) var(--motion-easing);
}
.w-menu__list--end { inset-inline-start: auto; inset-inline-end: 0; }
.w-menu__list--static { position: static; animation: none; display: inline-block; }
.w-menu__item {
  display: flex;
  align-items: center;
  gap: var(--primitive-space-3);
  width: 100%;
  min-height: var(--button-height-sm);
  padding: var(--primitive-space-1) var(--primitive-space-2);
  border-radius: var(--primitive-radius-xs);
  font-size: var(--text-small-size);
  line-height: var(--w-leading-20);
  color: var(--color-foreground);
  text-align: start;
  text-decoration: none;
  cursor: pointer;
}
.w-menu__item .w-icon { width: var(--icon-size-sm); height: var(--icon-size-sm); color: var(--color-foreground-muted); }
.w-menu__item:hover,
.w-menu__item:focus-visible,
.w-menu__item.is-hover { background-color: var(--w-hover-wash); }
.w-menu__item:focus-visible { outline-offset: calc(var(--w-ring-width) * -1); }
.w-menu__item--danger,
.w-menu__item--danger .w-icon { color: var(--color-danger); }
.w-menu__item[aria-disabled="true"],
.w-menu__item:disabled,
.w-menu__item[aria-disabled="true"] .w-icon,
.w-menu__item:disabled .w-icon { color: var(--w-disabled-fg); pointer-events: none; }
.w-menu__item[aria-checked="true"] { font-weight: var(--primitive-font-weight-semibold); }
.w-menu__shortcut { margin-inline-start: auto; padding-inline-start: var(--primitive-space-4); font-family: var(--font-accent); font-size: var(--primitive-font-size-2xs); color: var(--color-foreground-subtle); }
.w-menu__label { padding: var(--primitive-space-2) var(--primitive-space-2) var(--primitive-space-1); font-family: var(--font-accent); font-size: var(--primitive-font-size-2xs); line-height: var(--w-leading-16); letter-spacing: var(--text-eyebrow-tracking); text-transform: uppercase; color: var(--color-foreground-subtle); }
.w-menu__sep { height: 0; margin: var(--primitive-space-1) calc(var(--primitive-space-1) * -1); border: 0; border-block-start: var(--primitive-border-hairline) solid var(--w-overlay-border); }

/* --------------------------------------------------------------------------
   10. CARDS
   -------------------------------------------------------------------------- */
.w-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--primitive-space-4);
  padding: var(--card-padding);
  border: var(--primitive-border-hairline) solid var(--card-border);
  border-radius: var(--card-radius);
  background-color: var(--card-bg);
  color: var(--color-foreground);
}
.w-card--lg { gap: var(--primitive-space-5); }
@media (min-width: 48em) {
  .w-card--lg { padding: var(--primitive-space-6); }
}
/* fields on a card sit one step above it on dark (teal-650 on Storm) */
.w-card,
.w-list,
.w-table-wrap,
.w-file { --input-bg: var(--w-field-on-raised); --input-placeholder: var(--w-subtle-on-overlay); }
.w-card--outline { background-color: transparent; }
/* Elevated: a shadow on light. A dark shadow does not show on a dark page,
   so on dark the card itself rises to the overlay level with a rim. */
.w-card--elevated { --color-foreground-subtle: var(--w-subtle-on-overlay); background-color: var(--w-elevated-bg); border-color: var(--w-elevated-border); box-shadow: var(--primitive-shadow-lg); }
.w-card--flush { padding: 0; overflow: hidden; }
/* Emphasis card: Deep Water on a light page, so a Flame button or figure
   inside it needs no keyline. In the dark theme it rises to the overlay
   level (teal-650), lighter than the Storm cards beside it. Fields inside
   are Storm: a step up on Deep Water, a well on teal-650. */
.w-card--deep { --input-bg: var(--primitive-color-teal-700); background-color: var(--color-background); border-color: var(--color-border); }
.w-card--interactive { box-shadow: var(--card-shadow); transition: box-shadow var(--motion-hover) var(--motion-easing), border-color var(--motion-hover) var(--motion-easing), transform var(--motion-hover) var(--motion-easing); }
.w-card--interactive:hover,
.w-card--interactive.is-hover { border-color: var(--color-foreground); box-shadow: var(--card-shadow-hover); }
.w-card--interactive:active,
.w-card--interactive.is-active { box-shadow: var(--primitive-shadow-none); }
.w-card--interactive:focus-within,
.w-card--interactive.is-focus { outline: var(--w-ring-width) solid var(--color-ring); outline-offset: var(--w-ring-offset); }
.w-card.is-disabled { background-color: var(--w-disabled-bg); border-color: var(--w-disabled-border); pointer-events: none; }
.w-card.is-disabled,
.w-card.is-disabled * { color: var(--w-disabled-fg); }
.w-card.is-selected { border-color: var(--w-mark); box-shadow: inset 0 var(--primitive-border-rule) 0 var(--w-mark); }
/* Stretched link: the title link covers the card */
.w-card__link { color: inherit; text-decoration: none; }
.w-card__link::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.w-card__link:focus-visible { outline: none; }
.w-card__header { display: grid; gap: var(--primitive-space-2); }
.w-card__title { font-family: var(--font-display); font-size: var(--primitive-font-size-xl); line-height: var(--w-leading-28); font-weight: var(--text-heading-weight); letter-spacing: var(--text-heading-tracking); }
.w-card__text { font-size: var(--text-body-size); line-height: var(--w-leading-24); color: var(--color-foreground-muted); }
.w-card__body { display: grid; gap: var(--primitive-space-3); padding: var(--card-padding); }
.w-card__footer { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--primitive-space-3); margin-block-start: auto; padding-block-start: var(--primitive-space-4); border-block-start: var(--primitive-border-hairline) solid var(--color-border); }
.w-card__media { position: relative; aspect-ratio: 16 / 9; background-color: var(--w-deep); color: var(--primitive-color-teal-500); overflow: hidden; }
.w-card__media > svg { width: 100%; height: 100%; }
.w-card__meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--primitive-space-2) var(--primitive-space-3); font-family: var(--font-accent); font-size: var(--primitive-font-size-2xs); line-height: var(--w-leading-16); letter-spacing: var(--primitive-font-tracking-wide); text-transform: uppercase; color: var(--color-foreground-subtle); }

/* Stat / metric */
.w-stat { display: grid; gap: var(--primitive-space-2); align-content: start; }
.w-stat__label { font-family: var(--font-accent); font-size: var(--text-caption-size); line-height: var(--w-leading-16); letter-spacing: var(--text-eyebrow-tracking); text-transform: uppercase; color: var(--color-foreground-muted); }
.w-stat__value {
  font-family: var(--font-display);
  font-size: var(--primitive-font-size-5xl);
  line-height: var(--w-leading-48);
  font-weight: var(--primitive-font-weight-bold);
  letter-spacing: var(--primitive-font-tracking-tighter);
  font-variant-numeric: tabular-nums;
}
.w-stat__value--lg { font-size: var(--primitive-font-size-5xl); line-height: var(--w-leading-56); }
.w-stat__unit { font-size: var(--primitive-font-size-xl); font-weight: var(--text-heading-weight); letter-spacing: var(--primitive-font-tracking-normal); margin-inline-start: var(--primitive-space-1); color: var(--color-foreground-muted); }
/* The one key number. On a light surface it is a Flame block with Night
   figures inside the Night keyline (Flame is never text on light). On dark
   and Deep Water the --w-key-* tokens drop the block and the figures
   themselves are Flame (4.9:1 or better). */
.w-stat__value--signal {
  justify-self: start;
  padding-inline: var(--w-key-pad);
  border-radius: var(--primitive-radius-sm);
  box-shadow: inset 0 0 0 var(--primitive-border-hairline) var(--w-key-line);
  background-color: var(--w-key-bg);
  color: var(--w-key-fg);
}
/* Delta: direction is an arrow (up, down) or a bar (flat), the amount is
   written with its sign, and colour comes last. Never the same arrow for a
   rise and a fall. */
.w-stat__delta { display: inline-flex; align-items: center; gap: var(--primitive-space-1); font-family: var(--font-accent); font-size: var(--text-caption-size); line-height: var(--w-leading-16); font-variant-numeric: tabular-nums; color: var(--color-foreground-muted); }
.w-stat__delta .w-icon { width: var(--icon-size-sm); height: var(--icon-size-sm); stroke-width: calc(var(--icon-stroke) * 1.5); }
.w-stat__delta--up { color: var(--color-success); }
.w-stat__delta--down { color: var(--color-danger); }
.w-stat__note { font-size: var(--text-small-size); line-height: var(--w-leading-20); color: var(--color-foreground-muted); }

/* Quote card */
.w-quote { display: flex; flex-direction: column; gap: var(--primitive-space-5); }
.w-quote > .w-person { margin-block-start: auto; }
.w-quote__text { font-family: var(--font-editorial); font-style: italic; font-size: var(--primitive-font-size-xl); line-height: var(--w-leading-32); letter-spacing: var(--primitive-font-tracking-tight); color: var(--color-foreground); text-wrap: pretty; }
.w-person { display: flex; align-items: center; gap: var(--primitive-space-3); }
.w-person__name { font-size: var(--text-small-size); line-height: var(--w-leading-20); font-weight: var(--primitive-font-weight-semibold); }
.w-person__role { font-size: var(--text-caption-size); line-height: var(--w-leading-16); color: var(--color-foreground-muted); }

/* Pricing */
.w-price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 var(--primitive-space-2); }
.w-price__amount { font-family: var(--font-display); font-size: var(--primitive-font-size-5xl); line-height: var(--w-leading-48); font-weight: var(--primitive-font-weight-bold); letter-spacing: var(--primitive-font-tracking-tighter); font-variant-numeric: tabular-nums; }
.w-price__period { font-family: var(--font-accent); font-size: var(--text-caption-size); line-height: var(--w-leading-16); color: var(--color-foreground-muted); }
.w-checklist { display: grid; gap: var(--primitive-space-3); }
.w-checklist li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--primitive-space-3); font-size: var(--text-small-size); line-height: var(--w-leading-20); color: var(--color-foreground-muted); }
.w-checklist .w-icon { width: var(--w-icon-control); height: var(--w-icon-control); color: var(--color-foreground); }
.w-checklist li.is-off { color: var(--color-foreground-subtle); text-decoration: line-through; }
.w-checklist li.is-off .w-icon { color: var(--color-border-strong); }

/* --------------------------------------------------------------------------
   11. DATA
   -------------------------------------------------------------------------- */
.w-table-wrap { overflow-x: auto; border: var(--primitive-border-hairline) solid var(--card-border); border-radius: var(--card-radius); background-color: var(--card-bg); }
.w-table { width: 100%; font-size: var(--text-small-size); line-height: var(--w-leading-20); text-align: start; }
.w-table caption { padding: var(--primitive-space-4); text-align: start; font-family: var(--font-display); font-size: var(--primitive-font-size-lg); line-height: var(--w-leading-24); font-weight: var(--text-heading-weight); caption-side: top; }
.w-table th,
.w-table td { padding: var(--primitive-space-3) var(--primitive-space-4); text-align: start; vertical-align: middle; white-space: nowrap; }
.w-table thead th {
  height: var(--button-height-md);
  padding-block: 0;
  border-block-end: var(--primitive-border-hairline) solid var(--color-foreground);
  font-family: var(--font-accent);
  font-size: var(--primitive-font-size-2xs);
  font-weight: var(--primitive-font-weight-medium);
  letter-spacing: var(--text-eyebrow-tracking);
  text-transform: uppercase;
  color: var(--color-foreground-muted);
}
.w-table tbody tr { border-block-end: var(--primitive-border-hairline) solid var(--color-border); transition: background-color var(--motion-hover) var(--motion-easing); }
.w-table tbody tr:last-child { border-block-end: 0; }
.w-table tbody tr:hover,
.w-table tbody tr.is-hover { background-color: var(--w-hover-wash); }
.w-table tbody tr[aria-selected="true"],
.w-table tbody tr.is-selected { background-color: var(--w-active-wash); box-shadow: inset var(--primitive-border-rule) 0 0 var(--w-mark); }
.w-table tbody th { font-weight: var(--primitive-font-weight-medium); color: var(--color-foreground); }
.w-table tbody td { color: var(--color-foreground-muted); }
.w-table tfoot td,
.w-table tfoot th { border-block-start: var(--primitive-border-hairline) solid var(--color-foreground); font-weight: var(--primitive-font-weight-semibold); color: var(--color-foreground); }
.w-table .w-num { text-align: end; font-family: var(--font-accent); font-variant-numeric: tabular-nums; color: var(--color-foreground); }
.w-table thead .w-num { color: var(--color-foreground-muted); }
.w-table--compact th,
.w-table--compact td { padding-block: var(--primitive-space-2); }
.w-table__sort { display: inline-flex; align-items: center; gap: var(--primitive-space-1); font: inherit; letter-spacing: inherit; text-transform: inherit; color: inherit; cursor: pointer; border-radius: var(--primitive-radius-xs); }
.w-table__sort:hover { color: var(--color-foreground); }
.w-table__sort .w-icon { width: var(--icon-size-sm); height: var(--icon-size-sm); color: var(--color-border-strong); }
.w-table th[aria-sort="ascending"],
.w-table th[aria-sort="descending"] { color: var(--color-foreground); }
.w-table th[aria-sort="ascending"] .w-icon,
.w-table th[aria-sort="descending"] .w-icon { color: var(--color-foreground); }
.w-table th[aria-sort="descending"] .w-icon { transform: rotate(180deg); }

/* List rows */
.w-list { border: var(--primitive-border-hairline) solid var(--card-border); border-radius: var(--card-radius); background-color: var(--card-bg); overflow: hidden; }
.w-list--plain { border-inline: 0; border-radius: 0; background-color: transparent; border-block-color: var(--color-border); }
.w-list__row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--primitive-space-4);
  min-height: var(--primitive-space-9);
  padding: var(--primitive-space-3) var(--primitive-space-4);
  border-block-end: var(--primitive-border-hairline) solid var(--color-border);
  color: inherit;
  text-decoration: none;
  transition: background-color var(--motion-hover) var(--motion-easing);
}
.w-list__row:last-child { border-block-end: 0; }
a.w-list__row:hover,
.w-list__row.is-hover { background-color: var(--w-hover-wash); }
a.w-list__row:focus-visible { outline-offset: calc(var(--w-ring-width) * -1); }
.w-list__row.is-selected { background-color: var(--w-active-wash); box-shadow: inset var(--primitive-border-rule) 0 0 var(--w-mark); }
.w-list__row.is-disabled { pointer-events: none; }
.w-list__row.is-disabled,
.w-list__row.is-disabled * { color: var(--w-disabled-fg); border-color: var(--w-disabled-border); box-shadow: none; }
.w-list__body { display: grid; min-width: 0; }
.w-list__title { font-weight: var(--primitive-font-weight-medium); line-height: var(--w-leading-24); }
.w-list__meta { font-size: var(--text-small-size); line-height: var(--w-leading-20); color: var(--color-foreground-muted); }
.w-list__trail { white-space: nowrap; display: inline-flex; align-items: center; gap: var(--primitive-space-3); color: var(--color-foreground-muted); }
.w-list__trail .w-icon { width: var(--w-icon-control); height: var(--w-icon-control); }
.w-list__index { font-family: var(--font-accent); font-size: var(--text-caption-size); color: var(--color-foreground-subtle); min-width: var(--primitive-space-5); }

/* --------------------------------------------------------------------------
   12. COMPOSED SECTIONS
   One warm focal element per section, and it is Flame: a primary button
   (keylined on light), or one key number. A second action is an ink link or
   a secondary button. Left aligned.
   -------------------------------------------------------------------------- */
.w-section-head { display: grid; gap: var(--primitive-space-4); margin-block-end: var(--primitive-space-8); max-width: calc(var(--w-u) * 180); }

.w-hero { padding-block: var(--primitive-space-9); }
.w-hero__copy { display: grid; gap: var(--primitive-space-5); align-content: center; }
.w-hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--primitive-space-4) var(--primitive-space-5); margin-block-start: var(--primitive-space-3); }
.w-hero__note { font-family: var(--font-accent); font-size: var(--text-caption-size); line-height: var(--w-leading-16); color: var(--color-foreground-subtle); }

/* Feature grid: ruled columns, numbered in mono */
.w-feature { display: grid; gap: var(--primitive-space-3); align-content: start; padding-block-start: var(--primitive-space-5); border-block-start: var(--primitive-border-hairline) solid var(--color-foreground); }
.w-feature__index { font-family: var(--font-accent); font-size: var(--text-caption-size); line-height: var(--w-leading-16); letter-spacing: var(--text-eyebrow-tracking); color: var(--color-foreground-subtle); }
.w-feature__head { display: flex; align-items: center; justify-content: space-between; gap: var(--primitive-space-3); margin-block-end: var(--primitive-space-3); color: var(--color-foreground); }

/* Stats band */
.w-statband { display: grid; gap: var(--primitive-space-6); }
.w-statband > .w-stat { padding-block-start: var(--primitive-space-5); border-block-start: var(--primitive-border-hairline) solid var(--color-border); }

/* Testimonial */
.w-testimonial { display: grid; gap: var(--primitive-space-6); }
.w-testimonial__text { font-family: var(--font-editorial); font-weight: var(--primitive-font-weight-regular); font-size: var(--primitive-font-size-2xl); line-height: var(--w-leading-32); letter-spacing: var(--primitive-font-tracking-tight); text-wrap: pretty; }
.w-testimonial__text em { font-style: italic; }

/* CTA band */
.w-cta { display: grid; gap: var(--primitive-space-6); align-items: end; }

@media (min-width: 48em) {
  .w-hero { padding-block: var(--spacing-section); }
  .w-statband { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--primitive-space-8) var(--spacing-gutter); }
  .w-stat__value--lg { font-size: var(--primitive-font-size-6xl); line-height: var(--w-leading-72); }
  .w-testimonial__text { font-size: var(--text-h2-size); line-height: var(--w-leading-48); letter-spacing: var(--primitive-font-tracking-tighter); }
  .w-quote__text { font-size: var(--primitive-font-size-2xl); }
}
@media (min-width: 64em) {
  .w-statband { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .w-cta { grid-template-columns: minmax(0, 1fr) auto; }
}

/* --------------------------------------------------------------------------
   13. VIDEO STAGE
   The preview and timeline of the interactive video builder. The stage is a
   member of the Deep Water scope: title bar, transport and timeline are
   ordinary teal panels (--color-canvas-video-surround is Deep Water).
   Neutral gray appears in exactly one place, the viewer well behind the
   footage (--color-canvas-video), so picture colour is judged against a
   ground with no tint. The well is darker than the chrome around it.

   Colour jobs inside the stage:
   - tracks take --color-track-1..4 (video, audio, text, effects). Each kind
     also has its own clip pattern, so the hue is never the only cue;
   - Flame is reserved for the playhead and the selected clip;
   - recording is --color-record on a teal-900 chip (9:1), with a label.
   Set --w-stage-playhead (0% to 100%) on .w-stage to place the playhead and
   --w-stage-tracks if the timeline does not have four lanes.
   -------------------------------------------------------------------------- */
.w-stage {
  --w-stage-playhead: 0%;
  --w-stage-tracks: 4;
  --_head: calc(var(--w-u) * 24);
  --_ruler: var(--w-leading-24);
  --_lane: var(--button-height-sm);
  --_gap: var(--primitive-space-1);
  display: grid;
  border: var(--primitive-border-hairline) solid var(--color-border);
  border-radius: var(--card-radius);
  background-color: var(--color-canvas-video-surround);
  overflow: hidden;
  font-size: var(--text-small-size);
  line-height: var(--w-leading-20);
}
/* Title bar and transport: Storm panels, one step above the Deep Water chrome */
.w-stage__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--primitive-space-2) var(--primitive-space-4);
  min-height: var(--button-height-lg);
  padding: var(--primitive-space-2) var(--primitive-space-4);
  background-color: var(--color-surface-raised);
}
.w-stage__bar + .w-stage__viewport,
.w-stage__viewport + .w-stage__bar,
.w-stage__bar + .w-stage__timeline { border-block-start: var(--primitive-border-hairline) solid var(--color-border); }
.w-stage__title { font-weight: var(--primitive-font-weight-semibold); color: var(--color-foreground); }
.w-stage__meta,
.w-stage__time {
  font-family: var(--font-accent);
  font-size: var(--text-caption-size);
  line-height: var(--w-leading-16);
  font-variant-numeric: tabular-nums;
  letter-spacing: var(--primitive-font-tracking-wide);
  color: var(--color-foreground-muted);
}
.w-stage__time strong { font-weight: var(--primitive-font-weight-medium); color: var(--color-foreground); }

/* Record indicator: the record colour as a dot on its own teal-900 chip,
   with a label, so it never depends on hue alone and always has 4.5:1 */
.w-stage__rec {
  display: inline-flex;
  align-items: center;
  gap: var(--primitive-space-2);
  height: var(--w-leading-24);
  padding: 0 var(--primitive-space-2);
  border: var(--primitive-border-hairline) solid var(--color-border);
  border-radius: var(--primitive-radius-xs);
  background-color: var(--color-surface-sunken);
  color: var(--color-foreground);
  font-family: var(--font-accent);
  font-size: var(--primitive-font-size-2xs);
  line-height: 1;
  font-weight: var(--primitive-font-weight-medium);
  letter-spacing: var(--text-eyebrow-tracking);
  text-transform: uppercase;
}
.w-stage__rec::before {
  content: "";
  width: var(--primitive-space-2);
  height: var(--primitive-space-2);
  border-radius: var(--primitive-radius-full);
  background-color: var(--color-record);
}

/* Viewer well: the only neutral gray in the system. A 16:9 frame centred
   on it. */
.w-stage__viewport {
  display: grid;
  place-items: center;
  padding: var(--primitive-space-5);
  background-color: var(--color-canvas-video);
}
.w-stage__frame {
  position: relative;
  width: min(100%, calc(var(--w-u) * 160));
  aspect-ratio: 16 / 9;
  overflow: hidden;
  outline: var(--primitive-border-hairline) solid var(--primitive-color-gray-800);
}
.w-stage__frame > img,
.w-stage__frame > video,
.w-stage__frame > svg { width: 100%; height: 100%; object-fit: cover; }
/* title-safe guide, 5% in */
.w-stage__safe {
  position: absolute;
  inset: 5%;
  border: var(--primitive-border-hairline) dashed color-mix(in srgb, var(--primitive-color-gray-100) 55%, transparent);
  pointer-events: none;
}
/* Placeholder footage for the kit: a frame with real colour variety (sky,
   sun, hills, water) drawn from the support hues, so the reason for the
   neutral well is visible. Replace with an img or video. */
.w-stage__footage {
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle at 72% 46%, var(--primitive-color-sulfur-100) 0 4%, var(--primitive-color-sulfur-300) 4.4% 6%, transparent 6.4%),
    radial-gradient(ellipse 46% 38% at 72% 50%, color-mix(in srgb, var(--primitive-color-amber-200) 85%, transparent), transparent 72%),
    linear-gradient(to bottom, transparent 0 60%, var(--primitive-color-glacier-300) 60% 61%, var(--primitive-color-glacier-500) 72%, var(--primitive-color-glacier-900) 100%),
    linear-gradient(to bottom, var(--primitive-color-glacier-700) 0%, var(--primitive-color-glacier-500) 18%, var(--primitive-color-dusk-300) 38%, var(--primitive-color-crimson-300) 50%, var(--primitive-color-amber-200) 60%);
}
.w-stage__footage::before,
.w-stage__footage::after { content: ""; position: absolute; inset: 0; }
/* far ridge, in light */
.w-stage__footage::before {
  background-image: linear-gradient(to bottom, var(--primitive-color-moss-300), var(--primitive-color-moss-700));
  clip-path: polygon(0% 62%, 0% 44%, 9% 38%, 17% 45%, 26% 33%, 34% 41%, 43% 49%, 52% 54%, 60% 62%);
}
/* near bank, in shade */
.w-stage__footage::after {
  background-image: linear-gradient(to bottom, var(--primitive-color-moss-700), var(--primitive-color-moss-900));
  clip-path: polygon(0% 100%, 0% 66%, 12% 60%, 24% 68%, 38% 78%, 55% 90%, 70% 100%);
}
/* Lower third burned over the picture */
.w-stage__caption {
  position: absolute;
  inset-inline-start: 8%;
  inset-block-end: 10%;
  display: grid;
  gap: var(--primitive-space-1);
  max-width: 70%;
  padding: var(--primitive-space-2) var(--primitive-space-3);
  border-inline-start: var(--primitive-border-rule) solid var(--primitive-color-gray-100);
  background-color: color-mix(in srgb, var(--primitive-color-gray-950) 82%, transparent);
  color: var(--primitive-color-gray-100);
  font-size: var(--text-caption-size);
  line-height: var(--w-leading-16);
}
.w-stage__caption strong { font-family: var(--font-display); font-size: var(--text-body-size); line-height: var(--w-leading-24); font-weight: var(--text-heading-weight); }

/* Timeline: a label column and a lane column on the Deep Water chrome.
   Ruler, then tracks. Lanes are teal-900 wells. */
.w-stage__timeline {
  display: grid;
  grid-template-columns: var(--_head) minmax(0, 1fr);
  padding: var(--primitive-space-2) var(--primitive-space-4) var(--primitive-space-4) 0;
}
.w-stage__heads,
.w-stage__lanes { display: grid; grid-template-rows: var(--_ruler) repeat(var(--w-stage-tracks), var(--_lane)); row-gap: var(--_gap); }
.w-stage__head {
  --_track: var(--color-track-1);
  display: flex;
  align-items: center;
  gap: var(--primitive-space-2);
  padding-inline-start: var(--primitive-space-4);
  font-family: var(--font-accent);
  font-size: var(--primitive-font-size-2xs);
  letter-spacing: var(--text-eyebrow-tracking);
  text-transform: uppercase;
  color: var(--color-foreground-muted);
}
/* track key: a swatch of the track colour beside its name */
.w-stage__head::before {
  content: "";
  flex: none;
  width: var(--primitive-space-1);
  height: var(--primitive-space-4);
  border-radius: var(--primitive-radius-xs);
  background-color: var(--_track);
}
.w-stage__head:empty::before { display: none; }
.w-stage__lanes { position: relative; }
.w-stage__ruler {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  border-block-end: var(--primitive-border-hairline) solid var(--color-border-strong);
  background-image: repeating-linear-gradient(to right, var(--color-border-strong) 0 var(--primitive-border-hairline), transparent var(--primitive-border-hairline) calc(100% / 18));
  background-size: 100% var(--primitive-space-2);
  background-position: 0 100%;
  background-repeat: no-repeat;
  font-family: var(--font-accent);
  font-size: var(--primitive-font-size-2xs);
  line-height: var(--w-leading-16);
  font-variant-numeric: tabular-nums;
  color: var(--color-foreground-muted);
}
.w-stage__ruler > span { padding-inline-start: var(--primitive-space-1); }
.w-stage__ruler > span:last-child { padding-inline: 0 var(--primitive-space-1); }
.w-stage__track {
  --_track: var(--color-track-1);
  position: relative;
  border-radius: var(--primitive-radius-xs);
  background-color: var(--color-surface-sunken);
}
/* one modifier colours a lane's key and every clip in it */
.w-stage__head--audio,
.w-stage__track--audio { --_track: var(--color-track-2); }
.w-stage__head--text,
.w-stage__track--text { --_track: var(--color-track-3); }
.w-stage__head--fx,
.w-stage__track--fx { --_track: var(--color-track-4); }

/* Clip: place with --w-clip-start and --w-clip-length (percent of the lane).
   A tint of the track colour with a solid cap in it; the label stays in the
   normal foreground (10:1 or better on every tint). */
.w-stage__clip {
  --_fill: color-mix(in srgb, var(--_track) 26%, var(--color-surface-sunken));
  position: absolute;
  inset-block: var(--primitive-border-thick);
  inset-inline-start: var(--w-clip-start, 0%);
  width: var(--w-clip-length, 20%);
  display: flex;
  align-items: center;
  padding: 0 var(--primitive-space-2);
  border: var(--primitive-border-hairline) solid color-mix(in srgb, var(--_track) 60%, var(--color-surface-sunken));
  border-block-start: var(--primitive-border-rule) solid var(--_track);
  border-radius: var(--primitive-radius-xs);
  background-color: var(--_fill);
  color: var(--color-foreground);
  font-family: var(--font-accent);
  font-size: var(--primitive-font-size-2xs);
  line-height: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.w-stage__clip > span { overflow: hidden; text-overflow: ellipsis; }
/* Selected: a Flame frame. With the playhead it is the stage's warm mark. */
.w-stage__clip.is-selected {
  border-color: var(--color-primary);
  box-shadow: inset 0 0 0 var(--primitive-border-hairline) var(--color-primary);
  font-weight: var(--primitive-font-weight-semibold);
}
/* audio: a level pattern, label on a clear patch */
.w-stage__track--audio .w-stage__clip {
  background-image: repeating-linear-gradient(to right, color-mix(in srgb, var(--_track) 70%, var(--color-surface-sunken)) 0 var(--primitive-border-hairline), transparent var(--primitive-border-hairline) var(--primitive-space-1));
  background-size: 100% 50%;
  background-position: 0 60%;
  background-repeat: no-repeat;
}
.w-stage__track--audio .w-stage__clip > span { margin-inline-start: calc(var(--primitive-space-1) * -1); padding-inline: var(--primitive-space-1) var(--primitive-space-2); background-color: var(--_fill); }
/* text: dashed outline */
.w-stage__track--text .w-stage__clip { border-inline-style: dashed; border-block-end-style: dashed; }
/* effects: diagonal hatch */
.w-stage__track--fx .w-stage__clip {
  background-image: repeating-linear-gradient(135deg, color-mix(in srgb, var(--_track) 34%, transparent) 0 var(--primitive-border-thick), transparent var(--primitive-border-thick) var(--primitive-space-2));
}

/* Playhead: Flame, with a flag at the ruler. */
.w-stage__playhead {
  position: absolute;
  inset-block: 0;
  inset-inline-start: var(--w-stage-playhead);
  width: var(--primitive-border-thick);
  margin-inline-start: calc(var(--primitive-border-hairline) * -1);
  background-color: var(--color-primary);
  pointer-events: none;
}
.w-stage__playhead::before {
  content: "";
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 50%;
  width: var(--primitive-space-3);
  height: var(--primitive-space-3);
  transform: translateX(-50%);
  border-radius: var(--primitive-radius-xs) var(--primitive-radius-xs) var(--primitive-radius-full) var(--primitive-radius-full);
  background-color: var(--color-primary);
}
@media (min-width: 48em) {
  .w-stage__viewport { padding: var(--primitive-space-6); }
}

/* --------------------------------------------------------------------------
   14. MOTION PREFERENCES
   Spinners keep turning (they are status, not decoration) but slow down.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *,
  *::before,
  *::after {
    transition-duration: 0s !important;
    animation-delay: 0s !important;
  }
  .w-skeleton,
  .w-progress--indeterminate .w-progress__bar,
  .w-toast.is-entering,
  .w-modal[open],
  .w-modal::backdrop,
  .w-drawer[open],
  .w-menu__list { animation: none !important; }
  .w-btn--arrow:hover .w-icon { transform: none; }
  .w-spinner,
  .w-btn.is-loading::before,
  .w-btn[aria-busy="true"]::before { animation-duration: calc(var(--primitive-duration-slow) * 6) !important; }
}

@media (forced-colors: active) {
  .w-btn, .w-input, .w-card, .w-badge, .w-chip { border-color: currentColor; }
  .w-eyebrow--signal::before, .w-signal-rule, .w-pullquote::before, .w-brand__mark { background-color: CanvasText; }
}