/*
 * requests.archangel.agency — console stylesheet.
 *
 * One file, served from this origin, used by the React pages and by the plain
 * HTML the API returns without JavaScript. Tokens, contrast figures and rules
 * come from the design research in docs/research/design/.
 *
 * One carrier per meaning (intake §2.51). Accent colors mean exactly one
 * thing each and always come with a glyph and words:
 *   --command   you can act here (buttons, links)
 *   --confirmed done: received, sent
 *   --caution   needs you, or cannot go ahead here
 *   --critical  an answer to fix, or a failure
 * Everything else is grey on a very dark blue-grey.
 *
 * A quiet console (docs/research/design/ux-critique.md): color only when it
 * means something now; Aldrich for the wordmark and page titles only;
 * monospace only for references; lines where they group something, and
 * space everywhere else.
 */

@font-face {
  font-family: 'Aldrich';
  src: url('/fonts/aldrich-latin.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Atkinson Hyperlegible Next';
  src: url('/fonts/atkinson-hyperlegible-next-latin.woff2') format('woff2');
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Atkinson Hyperlegible Mono';
  src: url('/fonts/atkinson-hyperlegible-mono-latin.woff2') format('woff2');
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: dark;

  /*
   * Neutrals: a very dark blue-grey rather than pure black, which halates
   * under light text. Contrast of the text tones on void/hull/plate/raised.
   */
  --void: #0e1013;
  --hull: #121519;
  --plate: #161a1f;
  --raised: #1c2127;
  --steel: #13171b;
  --line: #242a31; /* decorative hairlines only */
  --faint: #333a42; /* decoration only, never text */
  --edge: #66717d; /* control borders: 3.9–3.3:1 on the surfaces controls sit on */
  --ink-3: #8b939c; /* faintest text allowed: 6.13–5.21:1 */
  --ink-2: #b3bac2; /* secondary text: 9.73–8.27:1 */
  --ink: #e3e6ea; /* body text and focus: 15.22–12.94:1 */
  --ink-strong: #f4f6f8; /* headings: 17.59–14.95:1 */

  /* Accents: one meaning each, a little quieter than signal colors. */
  --command: #6cb2ec; /* 8.36–7.11:1; #07121d on it 8.28:1 */
  --command-hover: #8ec5f2;
  --on-command: #07121d;
  --caution: #e8b04e; /* 9.75–8.29:1 */
  --critical: #ef7b72; /* 7.03–5.98:1 */
  --confirmed: #62cf91; /* 9.85–8.37:1 */

  --font-display: 'Aldrich', 'Atkinson Hyperlegible Next', system-ui, sans-serif;
  --font-body: 'Atkinson Hyperlegible Next', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: 'Atkinson Hyperlegible Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  --strip-height: 48px;
  --rail-width: 336px;
  --bevel: 8px;
  --focus-width: 2px;
}

@media (prefers-contrast: more) {
  :root {
    --ink-3: #bdbdbd;
    --edge: #bdbdbd;
    --line: #767676;
    --faint: #767676;
    --focus-width: 3px;
  }
}

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

html {
  /* The command strip is sticky: keep focused and linked targets clear of it (WCAG 2.4.11). */
  scroll-padding-top: calc(var(--strip-height) + 16px);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--void);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.6;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

::selection {
  background: var(--command);
  color: var(--on-command);
}

h1,
h2,
h3 {
  line-height: 1.2;
  text-wrap: balance;
}

/* Aldrich marks the page title only; everything read is Atkinson Hyperlegible Next. */
h1 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.65rem, 2.6vw, 2.15rem);
  color: var(--ink-strong);
  margin: 0.25rem 0 0.75rem;
}

h2 {
  font-weight: 650;
  font-size: 1.25rem;
  color: var(--ink-strong);
  margin: 2.25rem 0 0.6rem;
}

h3 {
  font-weight: 600;
  font-size: 1.05rem;
  color: var(--ink-strong);
  margin: 1.5rem 0 0.5rem;
}

p,
li {
  max-width: 70ch;
}

a {
  color: var(--command);
  text-decoration: underline;
  text-underline-offset: 0.18em;
}

a:hover {
  text-decoration-thickness: 2px;
}

:focus-visible {
  outline: var(--focus-width) solid var(--ink);
  outline-offset: 2px;
}

[tabindex='-1']:focus:not(:focus-visible) {
  outline: none;
}

.glyph {
  flex: none;
  vertical-align: middle;
}

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

.skip-link {
  position: absolute;
  left: 12px;
  top: -200px;
  z-index: 100;
  padding: 10px 16px;
  background: var(--command);
  color: var(--on-command);
  font-weight: 600;
  text-decoration: none;
}

.skip-link:focus {
  top: 12px;
}

/* ── Command strip ─────────────────────────────────────────────────────── */

.strip {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 24px;
  min-height: var(--strip-height);
  padding: 0 16px;
  background: var(--steel);
  border-bottom: 1px solid var(--line);
}

.strip-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  color: var(--ink);
  text-decoration: none;
  font-family: var(--font-display);
}

/* A 57×32 window onto the mark's 60 frames, stacked in one image (MarkStrip in src/components/ui.tsx). */
.strip-mark {
  position: relative;
  flex: none;
  width: 57px;
  height: 32px;
  overflow: hidden;
}

.strip-mark img {
  position: absolute;
  top: 0;
  left: 0;
  width: 57px;
  height: 1920px;
  max-width: none;
  mix-blend-mode: screen;
}

/* It turns once as the page opens: 60 frames of 70 ms, as in the GIF. The last frame is the still mark. */
.strip-mark-once {
  animation: mark-turn 4.2s steps(60) 1;
}

/* It turns again only while the person points at it or tabs to it. The first one is hidden rather
   than removed meanwhile, so it does not start over when they move away. */
.strip-mark .strip-mark-loop {
  display: none;
}

.strip-brand:is(:hover, :focus-visible) .strip-mark-once {
  visibility: hidden;
}

.strip-brand:is(:hover, :focus-visible) .strip-mark-loop {
  display: block;
  animation: mark-turn 4.2s steps(60) infinite;
}

@keyframes mark-turn {
  to {
    transform: translateY(-1920px);
  }
}

.strip-name {
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.95rem;
}

.strip-sub {
  color: var(--ink-2);
  font-size: 0.9rem;
  padding-left: 10px;
  border-left: 1px solid var(--edge);
}

.strip-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0 20px;
}

.strip-nav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--ink);
  text-decoration: none;
  font-size: 0.95rem;
}

.strip-nav a:hover {
  text-decoration: underline;
}

.strip-readout {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 10px;
  margin: 0 0 0 auto;
}

.strip-readout-label {
  color: var(--ink-2);
  font-size: 0.9rem;
}

/*
 * The strip is sticky only where it fits on one line. Below that it wraps to
 * two or three lines, and a sticky strip of unknown height could cover the
 * element that has focus (WCAG 2.4.11), so it scrolls away with the page.
 */
@media (max-width: 1279px) {
  .strip {
    position: static;
    padding: 8px 16px;
  }

  html {
    scroll-padding-top: 16px;
  }
}

@media (max-width: 760px) {
  .strip-readout {
    margin-left: 0;
  }
}

/* ── Console: operations view + rail ───────────────────────────────────── */

.console {
  flex: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 32px;
  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
  padding: 24px 16px 48px;
}

.console-single {
  max-width: 60rem;
}

@media (min-width: 1200px) {
  .console:not(.console-single) {
    grid-template-columns: minmax(0, 1fr) var(--rail-width);
    padding: 32px;
  }

  .rail {
    position: sticky;
    top: calc(var(--strip-height) + 24px);
    max-height: calc(100vh - var(--strip-height) - 48px);
    overflow-y: auto;
  }
}

.ops {
  min-width: 0;
}

.rail {
  display: grid;
  gap: 16px;
  align-content: start;
  min-width: 0;
}

.module {
  background: var(--hull);
  border: 1px solid var(--line);
}

.module-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 12px 14px 0;
  color: var(--ink-strong);
  font-size: 0.98rem;
  font-weight: 600;
}

.module-bar .glyph {
  color: var(--ink-3);
}

.module-body {
  padding: 8px 14px 14px;
}

.module-body > :first-child {
  margin-top: 0;
}

.module-body > :last-child {
  margin-bottom: 0;
}

.rail-empty {
  color: var(--ink-2);
  margin: 0 0 10px;
}

/* ── Readouts ──────────────────────────────────────────────────────────── */

.readouts {
  display: grid;
  gap: 2px;
  margin: 0;
}

.readout {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: 2px 12px;
  padding: 6px 0;
  border-bottom: 1px solid var(--line);
}

.readout dt {
  color: var(--ink-2);
  font-size: 0.9rem;
}

.readout dd {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  font-size: 0.92rem;
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.tone-confirmed {
  color: var(--confirmed);
}

.tone-caution {
  color: var(--caution);
}

.tone-critical {
  color: var(--critical);
}

/* ── Chips ─────────────────────────────────────────────────────────────── */

.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px 10px;
  border: 1px solid color-mix(in srgb, currentColor 45%, transparent);
  font-size: 0.85rem;
  font-weight: 600;
  line-height: 1.5;
}

.chip-confirmed {
  color: var(--confirmed);
  background: color-mix(in srgb, var(--confirmed) 10%, transparent);
}

.chip-caution {
  color: var(--caution);
  background: color-mix(in srgb, var(--caution) 10%, transparent);
}

.chip-critical {
  color: var(--critical);
  background: color-mix(in srgb, var(--critical) 10%, transparent);
}

.chip-info {
  color: var(--ink-2);
}

/* ── Buttons and commands ──────────────────────────────────────────────── */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 44px;
  padding: 8px 18px;
  border: 2px solid var(--command);
  background: var(--command);
  color: var(--on-command);
  font: 600 1rem/1.2 var(--font-body);
  text-decoration: none;
  cursor: pointer;
  transition: background-color 150ms ease, border-color 150ms ease;
}

.btn:hover {
  background: var(--command-hover);
  border-color: var(--command-hover);
  text-decoration: none;
}

.btn-quiet {
  background: transparent;
  border: 1px solid var(--edge);
  color: var(--ink);
}

.btn-quiet .glyph {
  color: var(--command);
}

.btn-quiet:hover {
  background: var(--raised);
  border-color: var(--ink-2);
}

.btn[aria-disabled='true'],
.btn:disabled {
  background: var(--raised);
  border-color: var(--edge);
  color: var(--ink-3);
  cursor: not-allowed;
}

.btn-link:disabled,
button.seq-link:disabled {
  color: var(--ink-3);
  cursor: not-allowed;
}

.btn-send {
  min-height: 48px;
  padding: 10px 22px;
  font-size: 1.05rem;
}

.btn-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 24px;
  padding: 4px 0;
  background: none;
  border: 0;
  color: var(--command);
  font: inherit;
  text-decoration: underline;
  text-underline-offset: 0.18em;
  cursor: pointer;
}

.button-row,
.form-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.form-nav {
  margin: 24px 0;
}

.button-row {
  margin: 8px 0 16px;
}

.command-stack {
  display: grid;
  gap: 10px;
  max-width: 36rem;
  margin: 28px 0;
}

.command {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 52px;
  padding: 10px 16px;
  background: var(--plate);
  border: 1px solid var(--line);
  color: var(--ink);
  font-size: 1.05rem;
  font-weight: 600;
  text-decoration: none;
  transition: background-color 150ms ease, border-color 150ms ease;
}

.command .glyph {
  color: var(--command);
}

.command:hover {
  background: var(--raised);
  border-color: var(--ink-2);
}

.command-primary {
  border-color: var(--command);
}

.commands {
  display: grid;
  gap: 8px;
}

.command-button {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 44px;
  padding: 8px 12px;
  background: var(--plate);
  border: 1px solid var(--edge);
  color: var(--ink);
  font: inherit;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}

.command-button .glyph {
  color: var(--command);
}

.command-button:hover:not([aria-disabled='true']) {
  background: var(--raised);
}

.command-button[aria-disabled='true'] {
  color: var(--ink-3);
  cursor: default;
}

.command-button[aria-disabled='true'] .glyph {
  color: var(--ink-3);
}

/* ── Page furniture ────────────────────────────────────────────────────── */

.eyebrow {
  margin: 0;
  color: var(--ink-3);
  font-size: 0.92rem;
}

.lead {
  font-size: 1.12rem;
  color: var(--ink-2);
}

.muted {
  color: var(--ink-2);
}

.hero {
  display: grid;
  justify-items: start;
  gap: 4px;
}

.mark-hero img {
  display: block;
  width: min(208px, 56vw);
  height: auto;
  mix-blend-mode: screen;
}

ul.plain {
  padding-left: 1.25rem;
}

ul.plain li {
  margin: 0.4rem 0;
}

.objectives {
  list-style: none;
  counter-reset: objective;
  padding: 0;
  margin: 1rem 0;
}

.objectives li {
  counter-increment: objective;
  position: relative;
  padding-left: 1.8rem;
  margin: 0.55rem 0;
}

/* Numbered steps: a quiet numeral, no box. */
.objectives li::before {
  content: counter(objective);
  position: absolute;
  left: 0;
  top: 0;
  width: 1.8rem;
  color: var(--ink-3);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.brief {
  padding-bottom: 8px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 8px;
}

/* The privacy promise in one calm line (src/components/ui.tsx, Assurance). */
.assurance {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  max-width: 46rem;
  margin: 20px 0;
  color: var(--ink-2);
}

.assurance .glyph {
  margin-top: 2px;
  color: var(--ink-3);
}

/* One clear action, and a quieter way elsewhere beside it. */
.cta-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 24px;
  margin: 28px 0 12px;
}

.btn-large {
  min-height: 52px;
  padding: 12px 24px;
  font-size: 1.08rem;
}

/* ── Notices ───────────────────────────────────────────────────────────── */

.notice {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  max-width: 46rem;
  margin: 20px 0;
  padding: 14px 16px;
  background: var(--hull);
  border: 1px solid var(--line);
  border-left-width: 3px;
}

.notice > .notice-body:first-child {
  grid-column: 1 / -1;
}

.notice > .glyph {
  margin-top: 2px;
}

.notice-title {
  margin: 0 0 6px;
  color: var(--ink-strong);
  font-weight: 650;
  font-size: 1.05rem;
}

.notice-body p {
  margin: 0.4rem 0;
}

.notice-body > :last-child {
  margin-bottom: 0;
}

.notice-confirmed {
  border-left-color: var(--confirmed);
}

.notice-confirmed > .glyph {
  color: var(--confirmed);
}

.notice-caution {
  border-left-color: var(--caution);
}

.notice-caution > .glyph {
  color: var(--caution);
}

.notice-critical {
  border-left-color: var(--critical);
}

.notice-critical > .glyph {
  color: var(--critical);
}

.notice-info {
  border-left-color: var(--ink-3);
}

.notice-info > .glyph {
  color: var(--ink-2);
}

/* ── Doors (routing) and cards (services) ─────────────────────────────── */

.doors,
.cards {
  list-style: none;
  padding: 0;
  margin: 20px 0;
}

.doors {
  display: grid;
  gap: 10px;
  max-width: 46rem;
}

.doors li,
.cards li {
  max-width: none;
}

.door {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
  min-height: 64px;
  padding: 14px 16px;
  background: var(--plate);
  border: 1px solid var(--line);
  color: var(--ink);
  text-decoration: none;
  transition: background-color 150ms ease, border-color 150ms ease;
}

.door-primary {
  border-color: var(--command);
}

.door:hover {
  background: var(--raised);
  border-color: var(--ink-2);
}

.door-title {
  display: block;
  color: var(--ink-strong);
  font-size: 1.08rem;
  font-weight: 650;
}

.door-detail {
  display: block;
  color: var(--ink-2);
}

.door .chip {
  margin-top: 6px;
}

.door-go {
  color: var(--command);
}

.cards {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 22rem), 1fr));
}

.card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 14px;
  padding: 16px;
  background: var(--plate);
  border: 1px solid var(--line);
}

.card-glyph {
  color: var(--ink-2);
}

.card-title {
  margin: 0 0 6px;
  font-size: 1.08rem;
  font-weight: 650;
}

.card p {
  margin: 0.4rem 0;
}

.card-detail-label {
  color: var(--ink-2);
}

/* Not taken here: quieter than the services on offer, with the reason in words. No opacity. */
.card-unavailable {
  background: var(--hull);
  color: var(--ink-2);
}

.card-reason {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  color: var(--ink);
}

.card-reason .glyph {
  margin-top: 4px;
}

/* ── The request form ──────────────────────────────────────────────────── */

.request-form {
  position: relative;
}

/* Honeypot: off-canvas rather than display:none, which scripted fills skip. */
.trap {
  position: absolute;
  left: -9999px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.step {
  min-width: 0;
  margin: 0 0 16px;
  padding: 0;
  border: 0;
}

[hidden] {
  display: none !important;
}

.step-legend {
  width: 100%;
  padding: 0;
}

.step-title {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 10px;
  margin: 24px 0 12px;
  color: var(--ink-strong);
  font-weight: 650;
  font-size: 1.35rem;
}

.step-title .glyph {
  color: var(--ink-3);
}

.step-intro {
  max-width: 40rem;
  margin: 0 0 20px;
  color: var(--ink-2);
}

/* "Step 3 of 7": a quiet line above the title, inside the same heading. */
.step-count {
  flex-basis: 100%;
  order: -1;
  color: var(--ink-3);
  font-size: 0.92rem;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

.field {
  min-width: 0;
  max-width: 40rem;
  margin: 0 0 24px;
  padding: 0;
  border: 0;
}

.field-label {
  display: block;
  padding: 0;
  margin-bottom: 4px;
  font-weight: 600;
  font-size: 1.05rem;
}

.field-hint {
  margin: 0 0 8px;
  color: var(--ink-2);
}

.field-only-if {
  font-weight: 600;
}

.field-error {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 0 0 8px;
  color: var(--critical);
  font-weight: 600;
}

.field-error .glyph {
  margin-top: 4px;
}

.field-invalid {
  padding-left: 14px;
  border-left: 3px solid var(--critical);
}

input[type='text'],
input[type='email'],
input[type='date'],
textarea,
select {
  width: 100%;
  min-height: 44px;
  padding: 10px 12px;
  background: var(--hull);
  color: var(--ink);
  border: 1px solid var(--edge);
  border-radius: 0;
  font: inherit;
  font-size: 1rem;
}

textarea {
  resize: vertical;
  line-height: 1.5;
}

input[aria-invalid='true'],
textarea[aria-invalid='true'],
select[aria-invalid='true'] {
  border: 2px solid var(--critical);
}

/* The calendar button inside a date input is its own tab stop; the whole input shows focus. */
input[type='date']:focus,
input[type='date']::-webkit-calendar-picker-indicator:focus-visible {
  outline: var(--focus-width) solid var(--ink);
  outline-offset: 2px;
}

.options {
  display: grid;
  gap: 8px;
}

.options-cards {
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr));
  max-width: none;
}

.field-radios:has(.options-cards) {
  max-width: 60rem;
}

.option {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  min-height: 44px;
  padding: 10px 12px;
  background: var(--plate);
  border: 1px solid var(--faint);
  cursor: pointer;
  transition: background-color 150ms ease, border-color 150ms ease;
}

.options-cards .option {
  padding: 14px;
}

.option:hover {
  background: var(--raised);
}

/* Selected: the filled radio says it; the edge and a lighter surface back it up. */
.option:has(input:checked) {
  background: var(--raised);
  border-color: var(--command);
  box-shadow: inset 0 0 0 1px var(--command);
}

.option input,
.check input {
  flex: none;
  width: 22px;
  height: 22px;
  margin: 2px 0 0;
  accent-color: var(--command);
}

.option-glyph {
  color: var(--ink-2);
}

.option-label {
  display: block;
  font-weight: 600;
}

.option-hint {
  display: block;
  color: var(--ink-2);
}

.check {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.check label {
  cursor: pointer;
}

.error-summary {
  max-width: 46rem;
  margin: 16px 0 24px;
  padding: 14px 18px;
  background: var(--hull);
  border: 1px solid var(--line);
  border-left: 3px solid var(--critical);
}

.error-summary-title {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 8px;
  color: var(--ink-strong);
  font-weight: 650;
  font-size: 1.1rem;
}

.error-summary-title .glyph {
  color: var(--critical);
}

.error-summary ul,
.error-list {
  margin: 0;
  padding-left: 1.2rem;
}

.review-group {
  padding: 12px 0;
  border-top: 1px solid var(--line);
  max-width: 60rem;
}

.review-head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px 16px;
}

.review-head h3 {
  margin: 0;
  font-weight: 650;
  font-size: 1.05rem;
}

.review-list {
  margin: 8px 0 0;
}

.review-row {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
  gap: 4px 16px;
  padding: 6px 0;
  border-bottom: 1px solid var(--line);
}

.review-row dt {
  color: var(--ink-2);
}

.review-row dd {
  margin: 0;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

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

.ready {
  max-width: 46rem;
  margin: 20px 0;
  padding: 16px;
  background: var(--hull);
  border: 1px solid var(--line);
  border-left: 3px solid var(--confirmed);
}

.ready-state {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 6px;
  color: var(--ink-strong);
  font-weight: 650;
  font-size: 1.15rem;
}

.ready-state .glyph {
  color: var(--confirmed);
}

/* Says what Copy and Download did, next to the buttons. Empty until then. */
.receipt-status {
  min-height: 1.5em;
  margin: 0 0 8px;
  color: var(--ink-2);
}

/* The reference, issued like a credential. */
.credential {
  display: inline-block;
  margin: 6px 0 12px;
  padding: 12px 16px;
  background: var(--void);
  border: 1px solid var(--line);
  color: var(--ink-strong);
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: clamp(1.4rem, 5vw, 2.1rem);
  letter-spacing: 0.06em;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
  user-select: all;
}

/* ── Rail: your progress ───────────────────────────────────────────────── */

.sequence {
  list-style: none;
  display: grid;
  gap: 4px;
  margin: 0;
  padding: 0;
}

.seq-link {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 40px;
  padding: 6px 8px;
  background: none;
  border: 1px solid transparent;
  color: var(--ink);
  font: inherit;
  text-align: left;
  text-decoration: none;
}

a.seq-link,
button.seq-link {
  cursor: pointer;
}

a.seq-link:hover,
button.seq-link:hover {
  background: var(--raised);
}

.seq-state {
  color: var(--ink-3);
  font-size: 0.85rem;
}

.seq-complete .glyph {
  color: var(--confirmed);
}

.seq-current .seq-link {
  background: var(--raised);
  border-color: var(--faint);
}

.seq-attention .glyph,
.seq-attention .seq-state {
  color: var(--caution);
}

.seq-not-started .glyph {
  color: var(--ink-3);
}

/* ── Staff console ─────────────────────────────────────────────────────── */

.table-scroll {
  max-width: 100%;
  overflow-x: auto;
}

.queue {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.95rem;
}

/* Cells keep to one line; on a narrow screen the table scrolls inside its box. */
.queue th,
.queue td {
  padding: 8px 10px;
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: middle;
  white-space: nowrap;
}

.queue th {
  color: var(--ink-2);
  font-size: 0.85rem;
  font-weight: 600;
}

.queue tr[aria-current='true'] {
  background: var(--raised);
}

.queue-ref {
  font-family: var(--font-mono);
}

.queue-notes {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.staff-detail {
  margin-top: 24px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}

.staff-detail h3 {
  margin: 28px 0 10px;
}

.staff-view h4 {
  margin: 0;
  color: var(--ink-strong);
  font-weight: 650;
}

.staff-form {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  max-width: 46rem;
}

.staff-form select,
.staff-form input[type='text'] {
  width: auto;
  min-width: 12rem;
}

.file-button {
  cursor: pointer;
}

/* The file input is hidden; its label is the control, so it shows the focus. */
.file-button:focus-within {
  outline: var(--focus-width) solid var(--ink);
  outline-offset: 2px;
}

.btn-danger {
  background: transparent;
  border-color: var(--critical);
  color: var(--critical);
}

.btn-danger:hover {
  background: var(--raised);
  border-color: var(--critical);
}

.btn-quiet[aria-pressed='true'] {
  background: var(--raised);
  border-color: var(--ink);
  color: var(--ink);
}

/* ── Footer ────────────────────────────────────────────────────────────── */

.footer {
  display: grid;
  gap: 8px;
  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
  padding: 20px 16px 32px;
  border-top: 1px solid var(--line);
  color: var(--ink-2);
  font-size: 0.9rem;
}

.footer p {
  margin: 0;
}

.footer nav {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 20px;
}

.footer a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 32px;
  color: var(--ink-2);
}

.footer-build {
  color: var(--ink-3);
  font-family: var(--font-mono);
}

/* ── Chamfers ──────────────────────────────────────────────────────────── */

/*
 * True bevels where the browser supports corner-shape; square corners
 * elsewhere. Never clip-path: it cuts off the focus ring (the knights defect
 * the design research found).
 */
@supports (corner-shape: bevel) {
  .btn,
  .command,
  .command-button,
  .door,
  .card,
  .option,
  .notice,
  .module,
  .credential,
  .error-summary,
  .ready,
  .chip,
  .step-count {
    border-radius: var(--bevel);
    corner-shape: bevel;
  }
}

/* ── Preferences ───────────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition: none !important;
    animation: none !important;
    scroll-behavior: auto !important;
  }
}

@media (prefers-contrast: more) {
  .chip-confirmed,
  .chip-caution,
  .chip-critical {
    background: transparent;
  }

  .card-unavailable {
    background: var(--plate);
  }
}

@media (forced-colors: active) {
  .btn,
  .command,
  .command-button,
  .door,
  .card,
  .option,
  .notice,
  .chip {
    border: 2px solid CanvasText;
  }

  .option:has(input:checked) {
    outline: 3px solid Highlight;
  }

  /* Transparent borders become visible in forced colors; keep only the current step's frame. */
  .seq-link {
    border-color: Canvas;
  }

  .seq-current .seq-link {
    border-color: Highlight;
  }

  .command-button[aria-disabled='true'],
  .command-button[aria-disabled='true'] .glyph,
  .btn:disabled,
  .btn-link:disabled,
  button.seq-link:disabled {
    color: GrayText;
    border-color: GrayText;
  }

  .strip-mark img,
  .mark-hero img {
    mix-blend-mode: normal;
  }
}

@media print {
  .strip-nav,
  .rail,
  .form-nav,
  .skip-link {
    display: none !important;
  }

  body {
    background: #fff;
    color: #000;
  }
}