/* THE WORD FOR ALL THE WORLD: the brand, as a stylesheet.
 *
 * Brand system v7.4, messaging v1.0, updated 2026-08-20.
 * GENERATED by tools/build_ai.py from the Brand Guide. Do not edit by hand.
 *
 * Link this and assets/fonts/fonts.css and the brand is in place: the tokens
 * below, and the components the guide specifies, built on them. Nothing here
 * is a value somebody picked for this file. Every one of them is read out of
 * https://brand.theword.world/brand and published at https://brand.theword.world/ai/tokens.json.
 */

:root {
  /* Palette */
  --midnight: #0B1A2D;
  --word-blue: #023D6F;
  --parchment: #F7F3EC;
  --flame: #F85842;
  --ember: #C13A24;
  --white: #FFFFFF;

  /* Neutrals, derived from Midnight and Parchment */
  --ink: #0B1A2D;
  --ink-muted: rgba(11,26,45,.80);
  --ink-soft: rgba(11,26,45,.60);
  --ink-faint: rgba(11,26,45,.38);
  --rule: rgba(11,26,45,.18);
  --rule-soft: rgba(11,26,45,.10);
  --wash: rgba(11,26,45,.05);
  --ink-reversed: #F7F3EC;
  --ink-reversed-muted: rgba(247,243,236,.75);
  --ink-reversed-soft: rgba(247,243,236,.55);
  --rule-light: rgba(247,243,236,.22);
  --wash-light: rgba(247,243,236,.08);

  /* Type stacks */
  --serif-display: 'DM Serif Display', Georgia, 'Times New Roman', serif;
  --serif-text: 'DM Serif Text', Georgia, 'Times New Roman', serif;
  --sans: 'DM Sans', -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif;

  /* Type scale */
  --text-label: 12px;
  --leading-label: 1.4;
  --text-caption: 13px;
  --leading-caption: 1.6;
  --text-body-small: 15px;
  --leading-body-small: 1.65;
  --text-body: 17px;
  --leading-body: 1.7;
  --text-body-large: 19px;
  --leading-body-large: 1.65;
  --text-title-small: 22px;
  --leading-title-small: 1.35;
  --text-title: 28px;
  --leading-title: 1.25;
  --text-title-large: 34px;
  --leading-title-large: 1.18;
  --text-display-small: 40px;
  --leading-display-small: 1.12;
  --text-display: 52px;
  --leading-display: 1.08;
  --text-display-large: 72px;
  --leading-display-large: 1.04;

  /* Spacing */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
  --space-10: 128px;

  /* Radius */
  --radius-button: 3px;
  --radius-card: 4px;
  --radius-frame: 6px;

  /* Elevation */
  --elevation-flat: none;
  --elevation-raised: 0 2px 6px rgba(11,26,45,.06);
  --elevation-lifted: 0 10px 30px rgba(11,26,45,.10);
  --elevation-overlay: 0 24px 60px rgba(11,26,45,.18);

  /* Motion */
  --duration-fast: 120ms;
  --duration-base: 150ms;
  --duration-slow: 300ms;
  --easing: cubic-bezier(.2,.6,.2,1);

  /* Breakpoints, for scripts and tooling: CSS media queries cannot read a variable */
  --breakpoint-email: 600px;
  --breakpoint-page: 720px;
  --breakpoint-wide: 1080px;

  /* States */
  --button-hover: #A62F1B;
  --success-state: #5FAD56;
  --error-state: #8C1D13;
  --warning-state: #8A5B12;
  --success-on-dark: #7FC177;
  --error-on-dark: #F0968A;
  --warning-on-dark: #E0B25C;
  --surface-on-dark: #172537;
  --accent-on-dark: #F85842;
}

/* ---------------------------------------------------------------------------
   The component layer.

   HAND-AUTHORED. This file is the second half of assets/brand.css: the tokens
   above it are generated from the Brand Guide, and these are the components the
   guide specifies, built on them.

   Every value here is a var(). A component that hard-codes a colour, a size, or
   a radius has left the system, and the next palette change will not reach it.

   Component ids match ai/components.json, which matches the Figma layer names
   and the Storybook stories, so a Card is a Card wherever anyone looks it up.
--------------------------------------------------------------------------- */

/* --- surfaces, and the two grounds ---------------------------------------
   The brand has two grounds, Parchment and Midnight, and every component has to
   work on both. Rather than every rule carrying a light and a dark variant, the
   ground is named once here and components read the semantic name.

   Set data-theme="dark" on the root for a dark page, or put .on-midnight on any
   section for a dark band inside a light page. Both do the same thing.

   The accent changes with the ground and that is not a preference: Ember on
   Midnight is 3.3:1 and fails, so a text accent on a dark ground is Flame. The
   three state colours lift for the same reason.
------------------------------------------------------------------------- */

:root {
  --ground: var(--parchment);
  --surface: var(--white);
  --surface-sunken: var(--wash);
  --text: var(--ink);
  --text-muted: var(--ink-muted);
  --text-soft: var(--ink-soft);
  --text-faint: var(--ink-faint);
  --border: var(--rule);
  --border-soft: var(--rule-soft);

  --accent: var(--ember);            /* fills: a filled block is legible on both */
  --accent-text: var(--ember);       /* text and borders: changes with the ground */
  --accent-hover: var(--button-hover);

  --state-success: var(--success-state);
  --state-error: var(--error-state);
  --state-warning: var(--warning-state);
}

[data-theme="dark"], .on-midnight {
  --ground: var(--midnight);
  --surface: var(--surface-on-dark);
  --surface-sunken: rgba(11, 26, 45, .35);
  --text: var(--ink-reversed);
  --text-muted: var(--ink-reversed-muted);
  --text-soft: var(--ink-reversed-soft);
  --text-faint: rgba(247, 243, 236, .34);
  --border: var(--rule-light);
  --border-soft: rgba(247, 243, 236, .12);

  --accent-text: var(--accent-on-dark);
  --state-success: var(--success-on-dark);
  --state-error: var(--error-on-dark);
  --state-warning: var(--warning-on-dark);
}

/* --- base ---------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--sans);
  font-size: var(--text-body);
  line-height: var(--leading-body);
  color: var(--text);
  background: var(--ground);
  -webkit-font-smoothing: antialiased;
}
.on-midnight { color: var(--text); background: var(--ground); }

/* Law: visible on every interactive element, never removed. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--accent-text);
  outline-offset: 3px;
  border-radius: var(--radius-button);
}

::selection { background: var(--accent); color: var(--white); }

/* --- typography ---------------------------------------------------------- */

.eyebrow {
  display: block;
  font-family: var(--sans);
  font-weight: 600;
  font-size: var(--text-label);
  line-height: var(--leading-label);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--accent-text);
}

.headline {
  font-family: var(--serif-display);
  font-weight: 400;
  font-size: var(--text-display);
  line-height: var(--leading-display);
  text-wrap: balance;
  margin: 0;
}
.headline em { font-style: italic; }
.headline-small { font-size: var(--text-display-small); line-height: var(--leading-display-small); }
.headline-large { font-size: var(--text-display-large); line-height: var(--leading-display-large); }

.title {
  font-family: var(--serif-text);
  font-weight: 400;
  font-size: var(--text-title);
  line-height: var(--leading-title);
  text-wrap: balance;
  margin: 0;
}

.prose { max-width: 66ch; }
.prose > * + * { margin-top: var(--space-4); }

.lede { font-size: var(--text-body-large); line-height: var(--leading-body-large); }
.muted { color: var(--text-muted); }

.caption {
  font-family: var(--sans);
  font-size: var(--text-caption);
  line-height: var(--leading-caption);
  color: var(--text-muted);
}

/* An inline link. Underlined, because colour alone is not a signal. */
.link {
  color: var(--accent-text);
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  padding-bottom: 1px;
}
.link:hover { border-bottom-width: 2px; }

.quote {
  font-family: var(--serif-text);
  font-style: italic;
  font-size: var(--text-title);
  line-height: var(--leading-title);
  border-left: 2px solid var(--accent-text);
  padding-left: var(--space-5);
  margin: 0;
  max-width: 44ch;
}
.quote cite { display: block; margin-top: var(--space-3); font: 600 var(--text-caption)/1.5 var(--sans); font-style: normal; color: var(--text-muted); }

.code {
  font-family: 'SF Mono', Consolas, monospace;
  font-size: .88em;
  background: var(--surface-sunken);
  border-radius: var(--radius-button);
  padding: 2px 6px;
}
pre.code { padding: var(--space-4); overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius-card); }
pre.code > code { background: none; padding: 0; }

/* --- surfaces ------------------------------------------------------------ */

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  padding: var(--space-6);
  color: var(--text);
  transition: border-color var(--duration-base) var(--easing),
              box-shadow var(--duration-base) var(--easing);
}
a.card { display: block; text-decoration: none; }
a.card:hover { border-color: var(--accent-text); box-shadow: var(--elevation-lifted); }

.panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-frame);
  padding: var(--space-6);
  box-shadow: var(--elevation-raised);
}

.separator { border: 0; border-top: 1px solid var(--border); margin: var(--space-6) 0; }

/* --- buttons ------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  font-family: var(--sans);
  font-weight: 700;
  font-size: 14.5px;
  letter-spacing: .04em;
  line-height: 1;
  padding: var(--space-3) var(--space-6);
  min-height: 44px;                      /* the recorded touch target */
  border: 0;
  border-radius: var(--radius-button);
  background: var(--accent);
  color: var(--white);
  text-decoration: none;
  cursor: pointer;
  transition: background var(--duration-fast) var(--easing);
}
.btn:hover { background: var(--accent-hover); }

/* Law: Flame never fills a button. Under a white label it is 3.3:1 and fails AA.
   There is no .btn variant that fills with Flame, and there must never be one. */
.btn.ghost {
  background: transparent;
  color: var(--text);
  border: 1.5px solid var(--border);
}
.btn.ghost:hover { background: var(--surface-sunken); }

.btn.quiet { background: transparent; color: var(--accent-text); min-height: 0; padding: var(--space-2) var(--space-3); }
.btn.quiet:hover { background: var(--surface-sunken); }

.btn:disabled, .btn[aria-disabled="true"] {
  background: var(--surface-sunken);
  color: var(--text-faint);
  cursor: not-allowed;
}

/* --- badge --------------------------------------------------------------- */

.badge {
  display: inline-block;
  font-family: var(--sans);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: 4px 9px;
  border-radius: var(--radius-button);
  border: 1px solid var(--border);
  color: var(--text-muted);
}
.badge[data-state="accent"]  { border-color: var(--accent-text); color: var(--accent-text); }
.badge[data-state="solid"]   { background: var(--accent); border-color: var(--accent); color: var(--white); }
.badge[data-state="success"] { border-color: var(--state-success); color: var(--state-success); }
.badge[data-state="warning"] { border-color: var(--state-warning); color: var(--state-warning); }
.badge[data-state="error"]   { border-color: var(--state-error); color: var(--state-error); }

/* --- alert --------------------------------------------------------------- */
/* Never colour alone: the title carries the meaning and the rule reinforces it. */

.alert {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-4) var(--space-5);
  border: 1px solid var(--border);
  border-left: 3px solid var(--text-muted);
  border-radius: var(--radius-card);
  background: var(--surface);
}
.alert > strong { font-size: var(--text-body-small); font-weight: 700; }
.alert > p { margin: 0; font-size: var(--text-body-small); line-height: 1.6; color: var(--text-muted); }
.alert[data-state="success"] { border-left-color: var(--state-success); }
.alert[data-state="success"] > strong { color: var(--state-success); }
.alert[data-state="warning"] { border-left-color: var(--state-warning); }
.alert[data-state="warning"] > strong { color: var(--state-warning); }
.alert[data-state="error"]   { border-left-color: var(--state-error); }
.alert[data-state="error"] > strong { color: var(--state-error); }

/* --- forms --------------------------------------------------------------- */

.field { display: flex; flex-direction: column; gap: var(--space-2); }
.field > label { font-weight: 600; font-size: var(--text-body-small); }

.field input, .field select, .field textarea {
  font-family: var(--sans);
  font-size: var(--text-body);
  color: var(--text);
  background: var(--surface-sunken);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  padding: var(--space-3) var(--space-4);
  min-height: 44px;
  width: 100%;
}
.field textarea { min-height: 96px; resize: vertical; line-height: var(--leading-body); }
.field input::placeholder, .field textarea::placeholder { color: var(--text-soft); }

.field .hint  { font-size: var(--text-caption); color: var(--text-muted); }
.field .error { font-size: var(--text-caption); color: var(--state-error); font-weight: 600; }
.field[data-state="error"] input,
.field[data-state="error"] select,
.field[data-state="error"] textarea { border-color: var(--state-error); }
.field[data-state="warning"] .hint { color: var(--state-warning); }

/* Checkbox, radio, switch. Native controls tinted, so keyboard and screen reader
   behaviour is the platform's rather than something reimplemented badly. */
.choice { display: flex; align-items: center; gap: var(--space-3); font-size: var(--text-body-small); }
.choice input[type="checkbox"], .choice input[type="radio"] {
  width: 18px; height: 18px; margin: 0; accent-color: var(--accent); flex: none;
}
.switch { display: inline-flex; align-items: center; gap: var(--space-3); cursor: pointer; }
.switch > input { position: absolute; opacity: 0; width: 0; height: 0; }
.switch > .track {
  width: 42px; height: 24px; border-radius: 12px; background: var(--surface-sunken);
  border: 1px solid var(--border); position: relative; flex: none;
  transition: background var(--duration-base) var(--easing);
}
.switch > .track::after {
  content: ""; position: absolute; top: 2px; left: 2px; width: 18px; height: 18px;
  border-radius: 50%; background: var(--surface);
  box-shadow: var(--elevation-raised);
  transition: transform var(--duration-base) var(--easing);
}
.switch > input:checked + .track { background: var(--accent); border-color: var(--accent); }
.switch > input:checked + .track::after { transform: translateX(18px); background: var(--white); }
.switch > input:focus-visible + .track { outline: 2px solid var(--accent-text); outline-offset: 3px; }

/* --- navigation ---------------------------------------------------------- */

.breadcrumb { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); font-size: var(--text-caption); color: var(--text-muted); }
.breadcrumb a { color: var(--text-muted); text-decoration: none; }
.breadcrumb a:hover { color: var(--accent-text); }
.breadcrumb li + li::before { content: "/"; margin-right: var(--space-2); color: var(--text-faint); }
.breadcrumb ol, .breadcrumb ul { display: contents; list-style: none; margin: 0; padding: 0; }
.breadcrumb li { display: flex; align-items: center; }

.tabs { display: flex; gap: var(--space-5); border-bottom: 1px solid var(--border); }
.tabs > a, .tabs > button {
  appearance: none; background: none; border: 0; cursor: pointer;
  font-family: var(--sans); font-weight: 600; font-size: var(--text-body-small);
  color: var(--text-muted); text-decoration: none;
  padding: var(--space-3) 0; margin-bottom: -1px;
  border-bottom: 2px solid transparent;
}
.tabs > [aria-selected="true"], .tabs > .active { color: var(--text); border-bottom-color: var(--accent-text); }

.pagination { display: flex; align-items: center; gap: var(--space-2); font-size: var(--text-body-small); }
.pagination a, .pagination span {
  min-width: 36px; min-height: 36px; display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--border); border-radius: var(--radius-button);
  color: var(--text-muted); text-decoration: none;
}
.pagination a:hover { border-color: var(--accent-text); color: var(--accent-text); }
.pagination [aria-current="page"] { background: var(--accent); border-color: var(--accent); color: var(--white); }

/* --- disclosure ---------------------------------------------------------- */

.accordion { border-top: 1px solid var(--border); }
.accordion > details { border-bottom: 1px solid var(--border); }
.accordion summary {
  cursor: pointer; list-style: none; padding: var(--space-4) 0;
  font-weight: 600; font-size: var(--text-body-small);
  display: flex; align-items: center; gap: var(--space-3);
}
.accordion summary::-webkit-details-marker { display: none; }
.accordion summary::before {
  content: "+"; color: var(--accent-text); font-weight: 400; width: 1em; flex: none;
}
.accordion details[open] summary::before { content: "−"; }
.accordion .body { padding: 0 0 var(--space-4) calc(1em + var(--space-3)); color: var(--text-muted); font-size: var(--text-body-small); }

/* --- overlays ------------------------------------------------------------ */

.dialog {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-frame);
  box-shadow: var(--elevation-overlay);
  padding: var(--space-6);
  max-width: 480px;
  display: flex; flex-direction: column; gap: var(--space-4);
}
.dialog .actions { display: flex; gap: var(--space-3); justify-content: flex-end; }

.menu {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  box-shadow: var(--elevation-overlay);
  padding: var(--space-2);
  min-width: 200px;
  display: flex; flex-direction: column;
}
.menu a, .menu button {
  appearance: none; background: none; border: 0; text-align: left; cursor: pointer;
  font-family: var(--sans); font-size: var(--text-body-small); color: var(--text);
  text-decoration: none; padding: var(--space-3); border-radius: var(--radius-button);
}
.menu a:hover, .menu button:hover { background: var(--surface-sunken); }
.menu hr { border: 0; border-top: 1px solid var(--border-soft); margin: var(--space-2) 0; }

.tooltip {
  display: inline-block;
  background: var(--midnight);
  color: var(--parchment);
  border: 1px solid var(--rule-light);
  font-size: var(--text-caption);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-button);
  box-shadow: var(--elevation-lifted);
}

.toast {
  display: flex; align-items: flex-start; gap: var(--space-3);
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent-text);
  border-radius: var(--radius-card);
  box-shadow: var(--elevation-overlay);
  padding: var(--space-4);
  max-width: 380px;
  font-size: var(--text-body-small);
}

/* --- feedback ------------------------------------------------------------ */

.progress {
  height: 6px; border-radius: 3px; background: var(--surface-sunken); overflow: hidden;
}
.progress > span { display: block; height: 100%; background: var(--accent); border-radius: 3px; }

.skeleton {
  background: var(--surface-sunken);
  border-radius: var(--radius-button);
  display: block;
  min-height: 1em;
}
.skeleton + .skeleton { margin-top: var(--space-3); }

.empty {
  text-align: center;
  padding: var(--space-8) var(--space-5);
  border: 1px dashed var(--border);
  border-radius: var(--radius-frame);
  display: flex; flex-direction: column; align-items: center; gap: var(--space-3);
  color: var(--text-muted);
}

.avatar {
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--midnight);
  display: inline-flex; align-items: center; justify-content: center;
  overflow: hidden; flex: none;
}
.avatar img { width: 68%; height: 68%; object-fit: contain; }

/* --- the 1 as a mask ------------------------------------------------------ */
/* EVERY1's signature move: photography cut into the numeral rather than placed
   beside it. The ratio below is written by the build from the published manifest,
   so redrawing the numeral cannot leave every masked image stretched.

   The mask is a shape, not a mark, so it takes no ink. What shows through is the
   photograph, and every rule about photography still applies to it: documentary
   capture, consent obtained, and a caption wherever it is published. */

.mask-1 {
  display: block;
  aspect-ratio: 0.6432;
  -webkit-mask-image: url("/assets/logos/every1/every1-numeral.svg");
          mask-image: url("/assets/logos/every1/every1-numeral.svg");
  -webkit-mask-repeat: no-repeat;  mask-repeat: no-repeat;
  -webkit-mask-position: center;   mask-position: center;
  -webkit-mask-size: contain;      mask-size: contain;
  background: var(--midnight);
}
.mask-1 > img, .mask-1 > video {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
/* Where masking is not supported the image still shows, uncropped, rather than
   vanishing. A browser that cannot cut the shape should not lose the picture. */
@supports not (mask-image: url("#")) {
  .mask-1 { aspect-ratio: auto; }
}

/* --- the record ---------------------------------------------------------- */

.record {
  background: var(--ground);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: var(--space-7) 0;
}
.record .verse {
  font-family: var(--serif-text);
  font-style: italic;
  font-size: var(--text-title-large);
  line-height: var(--leading-title-large);
  max-width: 44ch;
}
.record .dateline { margin-top: var(--space-5); font-size: var(--text-caption); color: var(--text-muted); }
.record .signature { margin-top: var(--space-5); }
.record .signature img { height: 54px; width: auto; display: block; }

.endorse {
  font-family: var(--sans);
  font-weight: 600;
  font-size: var(--text-label);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--text-muted);
}

/* --- the official figure ------------------------------------------------- */
/* Flame's one job at size: a display numeral on Midnight, with a sans label.
   This component only belongs on a dark ground, which is why it does not read
   the themed accent. */

.stat { text-align: left; }
.stat .fig {
  font-family: var(--serif-display);
  font-size: var(--text-display);
  line-height: 1;
  color: var(--flame);
  font-variant-numeric: tabular-nums;
}
.stat .lab {
  margin-top: var(--space-2);
  font-family: var(--sans); font-weight: 600; font-size: var(--text-label);
  letter-spacing: .18em; text-transform: uppercase; color: var(--parchment);
}
.stat .source { margin-top: var(--space-2); font-size: var(--text-caption); color: var(--ink-reversed-muted); }

/* --- footage ------------------------------------------------------------- */
/* Law: nothing sits on footage without the scrim, and type on it is White or
   Parchment. There is no rule here that sets Flame or Ember over an image. */

.footage { position: relative; overflow: hidden; background: var(--midnight); }
.footage > video, .footage > img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
}
.footage > .scrim {
  position: absolute; inset: 0;
  background: linear-gradient(180deg,
    rgba(11,26,45,.78) 0%, rgba(11,26,45,.55) 40%, rgba(11,26,45,.82) 100%);
}
.footage > .inner { position: relative; z-index: 2; color: var(--white); }

.lower-third {
  display: inline-block;
  background: rgba(11,26,45,.82);
  padding: var(--space-3) var(--space-4);
  border-left: 2px solid var(--flame);
}
.lower-third .name {
  font-family: var(--sans); font-weight: 600; font-size: var(--text-body);
  letter-spacing: .04em; text-transform: uppercase; color: var(--white);
}
.lower-third .role { font-family: var(--sans); font-size: var(--text-caption); color: var(--ink-reversed-muted); }

/* --- tables -------------------------------------------------------------- */

.table-scroll { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius-card); }
.table-scroll > table { border-collapse: collapse; width: 100%; }
.table-scroll th, .table-scroll td {
  text-align: left; padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--border-soft); vertical-align: top;
  font-size: var(--text-body-small); line-height: var(--leading-body-small);
}
.table-scroll thead th {
  font-family: var(--sans); font-weight: 600; font-size: var(--text-label);
  letter-spacing: .14em; text-transform: uppercase; color: var(--text-muted);
  background: var(--surface-sunken); white-space: nowrap;
}
.table-scroll tbody tr:last-child td { border-bottom: 0; }

/* --- motion -------------------------------------------------------------- */
/* Law: motion confirms an action, it never performs. Under a reduced-motion
   preference every transition here is suppressed and the still frame stands. */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  .footage > video { display: none; }
}