/* TCF Incident Report - design system
   Tokens and component recipes imported from the Claude Design project
   "Incident Report.dc.html" (shadcn/ui vega preset, neutral). Zero chroma
   everywhere except --destructive and the risk-rating selection rings.
   Reference tokens, never raw colours.

   Light is the default; the dark values live in one override block below.
   Every colour a rule needs is a token, including the translucent tints and
   the shadows, so the override block is the only place a theme is described. */

:root {
  color-scheme: light;

  --bg:            oklch(0.985 0 0);
  --card:          oklch(1 0 0);
  --fg:            oklch(0.145 0 0);
  --primary:       oklch(0.205 0 0);
  --primary-fg:    oklch(0.985 0 0);
  --primary-hover: oklch(0.205 0 0 / 0.8);
  --muted:         oklch(0.97 0 0);
  --muted-fg:      oklch(0.556 0 0);
  --border:        oklch(0.922 0 0);
  --ring:          oklch(0.708 0 0);
  --ring-focus:    oklch(0.708 0 0 / 0.5);
  --destructive:   oklch(0.577 0.245 27.325);
  --rate-medium:   oklch(0.87 0 0);
  --rate-high:     oklch(0.439 0 0);
  --ring-low:      oklch(0.577 0.19 148);
  --ring-medium:   oklch(0.577 0.19 255);

  /* Translucent destructive washes. Named by the job, not the alpha, so the
     dark override can pick different alphas without renaming anything. */
  --destructive-soft:  oklch(0.577 0.245 27.325 / 0.08);
  --destructive-tint:  oklch(0.577 0.245 27.325 / 0.12);
  --destructive-hover: oklch(0.577 0.245 27.325 / 0.1);
  --destructive-edge:  oklch(0.577 0.245 27.325 / 0.25);
  --destructive-focus: oklch(0.577 0.245 27.325 / 0.2);

  /* Read by report.js for the on-screen signature stroke. The submitted PNG
     is always dark ink on white and does not use this. */
  --ink: oklch(0.145 0 0);

  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 10px;
  --radius-xl: 14px;
  --radius-pill: 26px;

  --shadow-xs: 0 1px 2px 0 oklch(0.145 0 0 / 0.05);
  --shadow-card: 0 1px 2px 0 oklch(0.145 0 0 / 0.05), 0 0 0 1px oklch(0.145 0 0 / 0.1);
  --shadow-inset: 0 0 0 1px oklch(0.145 0 0 / 0.06);

  --mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Shell proportions. Everything that sets the page rhythm scales with the
     viewport from these four values, so there is no width where the layout
     is stranded between breakpoints. */
  --shell-max: 1400px;
  --shell-pad: clamp(16px, 2.5vw, 40px);
  --shell-gap: clamp(24px, 3vw, 48px);
  --rail: clamp(200px, 18vw, 268px);
  /* Header content lines up with the wizard, whose padding sits inside its
     max-width. */
  --shell-inner: calc(var(--shell-max) - 2 * var(--shell-pad));
  /* Comfortable reading measure for prose inside a wide card. */
  --prose: 78ch;
}

/* ---------- dark theme ----------
   Applied by the `data-theme` attribute only, never by a bare
   `prefers-color-scheme` media query. `js/theme.js` runs from each page head,
   resolves the preference (stored choice, else the OS setting) and stamps the
   result before first paint, so "auto" arrives here already decided. Both
   forms render from JavaScript, so there is no no-JS path to keep working.

   Card sits above bg here, the inverse of light, which is what gives a dark
   surface its depth. Primary flips to near-white with dark text on it. */
:root[data-theme="dark"] {
  color-scheme: dark;

  --bg:            oklch(0.145 0 0);
  --card:          oklch(0.205 0 0);
  --fg:            oklch(0.985 0 0);
  --primary:       oklch(0.985 0 0);
  --primary-fg:    oklch(0.205 0 0);
  --primary-hover: oklch(0.985 0 0 / 0.85);
  --muted:         oklch(0.269 0 0);
  --muted-fg:      oklch(0.708 0 0);
  --border:        oklch(1 0 0 / 0.12);
  --ring:          oklch(0.556 0 0);
  --ring-focus:    oklch(0.708 0 0 / 0.45);
  --destructive:   oklch(0.704 0.191 22.216);

  /* The risk scale reads by escalating brightness against a dark ground, the
     mirror of the light theme where it escalates by darkness. High keeps the
     dark-text-on-light treatment so it still outranks medium at a glance. */
  --rate-medium:   oklch(0.32 0 0);
  --rate-high:     oklch(0.75 0 0);
  --ring-low:      oklch(0.72 0.19 148);
  --ring-medium:   oklch(0.68 0.19 255);

  /* Heavier alphas: a wash that reads on white disappears on near-black. */
  --destructive-soft:  oklch(0.704 0.191 22.216 / 0.14);
  --destructive-tint:  oklch(0.704 0.191 22.216 / 0.2);
  --destructive-hover: oklch(0.704 0.191 22.216 / 0.16);
  --destructive-edge:  oklch(0.704 0.191 22.216 / 0.4);
  --destructive-focus: oklch(0.704 0.191 22.216 / 0.3);

  --ink: oklch(0.985 0 0);

  /* Shadows cannot lift a dark surface, so they become hairlines instead. */
  --shadow-xs: 0 1px 2px 0 oklch(0 0 0 / 0.3);
  --shadow-card: 0 1px 2px 0 oklch(0 0 0 / 0.3), 0 0 0 1px oklch(1 0 0 / 0.08);
  --shadow-inset: 0 0 0 1px oklch(1 0 0 / 0.08);
}

/* Native form chrome the tokens cannot reach: the select chevron is baked
   into a data URI, and the date/time pickers follow `color-scheme` above. */
:root[data-theme="dark"] select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23a1a1a1' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
}

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

/* Component display rules below would otherwise beat the UA [hidden] rule. */
[hidden] { display: none !important; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 14px;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--primary); text-decoration: underline; text-underline-offset: 3px; }
a:hover { color: var(--fg); }

input, select, textarea, button { font-family: inherit; }
::placeholder { color: var(--muted-fg); }

input[type="checkbox"], input[type="radio"] {
  accent-color: var(--primary);
  width: 16px; height: 16px;
  margin: 0; flex: none;
  cursor: pointer;
}

.mono { font-family: var(--mono); }
.tabular { font-variant-numeric: tabular-nums; }
.req { color: var(--destructive); }

/* ---------- app header ---------- */

.app-header {
  position: sticky; top: 0; z-index: 10;
  padding: 14px var(--shell-pad);
  background: var(--card);
  border-bottom: 1px solid var(--border);
}
.app-header-inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px;
  width: 100%; max-width: var(--shell-inner); margin: 0 auto;
}
.app-header .brand { display: flex; align-items: baseline; gap: 12px; min-width: 0; }
.app-header .brand-name { white-space: nowrap; }
.app-header .brand-name { font-size: 15px; font-weight: 600; letter-spacing: -0.01em; }
.app-header .meta { display: flex; align-items: center; gap: 10px; }

.meta-mono { font-family: var(--mono); font-size: 11px; color: var(--muted-fg); }

/* ---------- signed-in state ---------- */

.signed-in {
  display: inline-flex; align-items: center; gap: 6px;
  height: 28px; padding: 0 4px 0 10px;
  border: 1px solid var(--border); border-radius: var(--radius-pill);
  background: var(--card); color: var(--muted-fg);
  font-size: 12px; font-weight: 500;
}
.signed-in > svg { flex: none; }
.signed-in-name {
  max-width: 18ch; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap;
  color: var(--fg);
}
.signed-in-out {
  height: 20px; padding: 0 8px;
  border: none; border-radius: var(--radius-pill);
  background: transparent; color: var(--muted-fg);
  font-size: 11px; font-weight: 500;
  cursor: pointer; transition: all 0.15s;
}
.signed-in-out:hover { background: var(--muted); color: var(--fg); }

/* The name is the first thing to go on a phone; the icon still says signed in. */
@media (max-width: 560px) {
  .signed-in-name { display: none; }
  .signed-in { padding-left: 8px; }
}

/* ---------- theme toggle ---------- */

.theme-toggle {
  display: inline-flex; align-items: center; gap: 6px;
  height: 28px; padding: 0 10px;
  border: 1px solid var(--border); border-radius: var(--radius-pill);
  background: var(--card); color: var(--muted-fg);
  font-size: 12px; font-weight: 500;
  cursor: pointer; transition: all 0.15s;
}
.theme-toggle:hover { background: var(--muted); color: var(--fg); }
.theme-toggle:focus-visible {
  outline: none;
  border-color: var(--ring);
  box-shadow: 0 0 0 3px var(--ring-focus);
}
/* The label is the only thing worth dropping on a phone; the icon still says
   which mode is active. */
@media (max-width: 560px) {
  .theme-toggle span { display: none; }
  .theme-toggle { padding: 0 8px; }
}

/* ---------- badges ---------- */

.badge {
  display: inline-flex; align-items: center;
  height: 20px; padding: 0 8px;
  border-radius: var(--radius-pill);
  background: var(--muted); color: var(--primary);
  font-size: 12px; font-weight: 500;
}
.badge-medium { background: var(--rate-medium); color: var(--primary); }
.badge-high { background: var(--rate-high); color: var(--primary-fg); }
.badge-extreme { background: var(--destructive-tint); color: var(--destructive); }

/* ---------- wizard layout ---------- */

.wizard {
  display: grid;
  grid-template-columns: var(--rail) minmax(0, 1fr);
  gap: var(--shell-gap);
  max-width: var(--shell-max);
  margin: 0 auto;
  padding: clamp(20px, 2.5vw, 32px) var(--shell-pad) clamp(48px, 8vh, 96px);
  align-items: start;
}

.wizard-aside {
  position: sticky; top: 88px;
  display: flex; flex-direction: column; gap: 14px;
}
.wizard-main { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
/* Render slots that must not add a box of their own */
.slot-contents { display: contents; }

.eyebrow {
  font-size: 12px; font-weight: 500;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--muted-fg);
}

.progress-track {
  height: 4px; border-radius: 999px;
  background: var(--border); overflow: hidden;
}
.progress-fill {
  height: 100%; border-radius: 999px;
  background: var(--primary);
  transition: width 0.25s ease;
}

.step-nav { display: flex; flex-direction: column; gap: 2px; }
.step-nav button {
  display: flex; align-items: center; gap: 10px;
  width: 100%; padding: 8px 10px;
  border: none; border-radius: var(--radius-md);
  background: transparent; color: var(--muted-fg);
  font-size: 14px; font-weight: 400;
  text-align: left; cursor: pointer;
  transition: all 0.15s;
}
.step-nav button:hover { background: var(--muted); color: var(--fg); }
.step-nav button[aria-current="step"] {
  background: var(--muted); color: var(--fg); font-weight: 500;
}
.step-nav .num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 20px; height: 20px; flex: none;
  border: 1px solid var(--border); border-radius: 999px;
  font-family: var(--mono); font-size: 10px;
}
.step-nav button[aria-current="step"] .num {
  border-color: transparent;
  background: var(--primary); color: var(--primary-fg);
}

.aside-note {
  margin: 0; padding-top: 12px;
  border-top: 1px solid var(--border);
  font-size: 12px; line-height: 1.6;
  color: var(--muted-fg); text-wrap: pretty;
}

/* ---------- clear form ---------- */

.clear-form { align-self: flex-start; color: var(--muted-fg); }
.clear-form:hover:not(:disabled) { color: var(--destructive); border-color: var(--destructive); }

.clear-confirm { display: flex; flex-direction: column; gap: 8px; }
.clear-confirm-q { font-size: 12px; font-weight: 500; color: var(--destructive); }
.clear-yes {
  background: var(--destructive); color: var(--primary-fg);
  border-color: transparent;
}
.clear-yes:hover:not(:disabled) { background: var(--destructive); opacity: 0.85; }

/* ---------- cards ---------- */

.card {
  display: flex; flex-direction: column; gap: 24px;
  padding: 24px; border-radius: var(--radius-xl);
  background: var(--card);
  box-shadow: var(--shadow-card);
}
.card-head { display: flex; flex-direction: column; gap: 4px; }
.card-title { font-size: 16px; font-weight: 500; }
.card-desc { font-size: 14px; color: var(--muted-fg); text-wrap: pretty; max-width: var(--prose); }

.divided { padding-top: 20px; border-top: 1px solid var(--border); }

/* Nested row card: person, equipment, vehicle, product, release */
.row-card {
  display: flex; flex-direction: column; gap: 16px;
  padding: 16px; border-radius: var(--radius-lg);
  background: var(--bg);
  box-shadow: var(--shadow-inset);
}
.row-card-head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.row-card-title { font-size: 14px; font-weight: 600; }
.row-stack { display: flex; flex-direction: column; gap: 16px; }
.row-stack-sm { display: flex; flex-direction: column; gap: 12px; }

/* ---------- fields ---------- */

.field { display: flex; flex-direction: column; gap: 6px; }
.field > label, .field-label { font-size: 14px; font-weight: 500; }

/* The percentage in each clamp is what caps the column count on a wide card:
   30% cannot fit more than three tracks, 45% no more than two. The pixel
   bounds keep controls usable on a phone and stop them stretching on a
   desktop monitor. */
.field-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(clamp(200px, 30%, 320px), 1fr));
  gap: 16px;
}
.field-grid.narrow { grid-template-columns: repeat(auto-fit, minmax(clamp(180px, 24%, 260px), 1fr)); }
.field-grid.wide { grid-template-columns: repeat(auto-fit, minmax(clamp(240px, 45%, 520px), 1fr)); }

.check-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(clamp(180px, 24%, 260px), 1fr));
  gap: 12px 20px;
}
.check-grid.roomy {
  grid-template-columns: repeat(auto-fit, minmax(clamp(200px, 30%, 320px), 1fr));
  gap: 16px 20px;
}

.check {
  display: flex; align-items: center; gap: 8px;
  font-size: 14px; cursor: pointer;
}
.radio-row { display: flex; flex-wrap: wrap; gap: 20px; }
.chip-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }

input[type="text"], input[type="tel"], input[type="date"],
input[type="time"], input[type="email"], select, textarea {
  width: 100%;
  height: 36px;
  padding: 0 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--card);
  box-shadow: var(--shadow-xs);
  font-size: 14px;
  color: var(--fg);
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
}
textarea {
  height: auto; padding: 8px 10px;
  line-height: 1.5; resize: vertical;
}
input:focus, select:focus, textarea:focus {
  border-color: var(--ring);
  box-shadow: 0 0 0 3px var(--ring-focus);
}
input[aria-invalid="true"], select[aria-invalid="true"], textarea[aria-invalid="true"] {
  border-color: var(--destructive);
  box-shadow: 0 0 0 3px var(--destructive-focus);
}

select {
  padding-right: 30px;
  appearance: none;
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23808080' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 8px center;
}

/* Read-only value box: incident number, date reported */
.readonly-box {
  display: flex; align-items: center;
  height: 36px; padding: 0 10px;
  border: 1px solid var(--border); border-radius: var(--radius-md);
  background: var(--muted);
  font-size: 14px; color: var(--muted-fg);
}
.readonly-box.mono { font-size: 13px; }

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

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: 36px; padding: 0 12px;
  border: 1px solid transparent; border-radius: var(--radius-md);
  font-size: 14px; font-weight: 500;
  cursor: pointer; transition: all 0.15s;
}
.btn:focus-visible {
  outline: none;
  border-color: var(--ring);
  box-shadow: 0 0 0 3px var(--ring-focus);
}
.btn:active:not(:disabled) { transform: translateY(1px); }
.btn:disabled { opacity: 0.5; cursor: default; }

.btn-primary { background: var(--primary); color: var(--primary-fg); }
.btn-primary:hover:not(:disabled) { background: var(--primary-hover); }

.btn-outline {
  border-color: var(--border);
  background: var(--card); color: var(--fg);
  box-shadow: var(--shadow-xs);
}
.btn-outline:hover:not(:disabled) { background: var(--muted); }

.btn-sm { height: 32px; padding: 0 10px; }
.btn-add { align-self: flex-start; }

.btn-remove {
  display: inline-flex; align-items: center;
  height: 24px; padding: 0 8px;
  border: none; border-radius: var(--radius-md);
  background: transparent; color: var(--muted-fg);
  font-size: 12px; font-weight: 500;
  cursor: pointer; transition: all 0.15s;
}
.btn-remove:hover { background: var(--destructive-hover); color: var(--destructive); }

/* ---------- error summary ---------- */

.error-card {
  display: flex; flex-direction: column; gap: 6px;
  padding: 16px 20px; border-radius: var(--radius-xl);
  background: var(--destructive-soft);
  box-shadow: 0 0 0 1px var(--destructive-edge);
}
.error-card strong { font-size: 14px; font-weight: 500; color: var(--destructive); }
.error-card span { font-size: 14px; color: var(--destructive); }

/* ---------- file upload ---------- */

.dropzone {
  display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 6px;
  padding: 28px;
  border: 1px dashed var(--border); border-radius: var(--radius-lg);
  background: var(--bg); cursor: pointer;
  text-align: center;
  transition: all 0.15s;
}
.dropzone:hover, .dropzone.is-dragover { background: var(--muted); border-color: var(--ring); }
.dropzone input[type="file"] { display: none; }
.dropzone-title { font-size: 14px; font-weight: 500; }
.dropzone-hint { font-family: var(--mono); font-size: 11px; color: var(--muted-fg); }

.file-row { display: flex; align-items: center; gap: 8px; font-size: 14px; }
/* The file icon draws with currentColor, so its tint is set here rather than
   passed to App.icon as a literal. */
.file-row > svg { color: var(--muted-fg); flex: none; }
.file-row .file-name { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.file-row .file-size { font-family: var(--mono); font-size: 11px; color: var(--muted-fg); }
.status-ok { font-family: var(--mono); font-size: 11px; color: var(--muted-fg); }
.status-err { font-family: var(--mono); font-size: 11px; color: var(--destructive); }

/* ---------- risk matrix ---------- */

.matrix {
  display: grid;
  grid-template-columns: 108px repeat(5, minmax(0, 1fr));
  gap: 3px;
  font-size: 12px;
}
.matrix .axis { padding: 4px 6px; color: var(--muted-fg); }
.matrix .axis.axis-row { padding: 8px 6px; }
.matrix .axis.is-selected { color: var(--fg); font-weight: 600; }
/* Cells are buttons: clicking one sets both consequence and likelihood. */
.matrix .cell {
  display: flex; align-items: center; justify-content: center;
  padding: 8px 0; border: none; border-radius: var(--radius-sm);
  font-family: inherit; font-size: inherit; font-weight: 500;
  cursor: pointer;
  transition: box-shadow 0.15s;
}
.matrix .cell:focus-visible { outline: 2px solid var(--fg); outline-offset: 1px; }
.matrix .cell.is-selected { font-weight: 600; position: relative; z-index: 1; }
.matrix .cell.rate-low { background: var(--muted); color: var(--muted-fg); }
.matrix .cell.rate-medium { background: var(--rate-medium); color: var(--primary); }
.matrix .cell.rate-high { background: var(--rate-high); color: var(--primary-fg); }
.matrix .cell.rate-extreme {
  background: var(--destructive-tint); color: var(--destructive);
}
.matrix .cell.rate-low.is-selected { box-shadow: 0 0 0 3px var(--ring-low); }
.matrix .cell.rate-medium.is-selected { box-shadow: 0 0 0 3px var(--ring-medium); }
.matrix .cell.rate-high.is-selected,
.matrix .cell.rate-extreme.is-selected { box-shadow: 0 0 0 3px var(--destructive); }

.escalation-note { font-size: 14px; color: var(--destructive); }

/* ---------- table (corrective actions) ---------- */

.table-wrap { position: relative; width: 100%; overflow-x: auto; }
table.data { width: 100%; border-collapse: collapse; font-size: 14px; }
table.data th {
  height: 40px; padding: 8px;
  text-align: left; font-weight: 500; color: var(--fg);
  white-space: nowrap;
  border-bottom: 1px solid var(--border);
}
table.data td { padding: 8px; vertical-align: middle; }
table.data tbody tr { border-bottom: 1px solid var(--border); }
table.data tbody tr:last-child { border-bottom: 0; }
table.data td input { min-width: 150px; }

/* ---------- external notifications ---------- */

.notify-list { display: flex; flex-direction: column; gap: 12px; }
.notify-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 220px);
  align-items: center; gap: 12px;
}
.notify-custom { display: flex; align-items: center; gap: 8px; }
.notify-row .ref { font-family: var(--mono); font-size: 13px; }

/* ---------- signature ---------- */

.signature-pad {
  display: block; width: 100%; height: 160px;
  border: 1px dashed var(--border); border-radius: var(--radius-lg);
  background: var(--bg);
  touch-action: none; cursor: crosshair;
}
.signature-foot {
  display: flex; flex-wrap: wrap; align-items: center;
  justify-content: space-between; gap: 12px;
}

/* ---------- wizard footer ---------- */

.wizard-foot {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding-top: 4px;
}
.wizard-foot .left,
.wizard-foot .right { display: flex; align-items: center; gap: 10px; }

.turnstile-box { display: flex; justify-content: flex-start; }

/* ---------- confirmation ---------- */

.confirmation-wrap {
  max-width: 640px; margin: 0 auto;
  padding: clamp(32px, 9vh, 96px) var(--shell-pad);
}
.confirmation-head { display: flex; align-items: center; gap: 12px; }
.confirmation-tick {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; flex: none;
  border-radius: 999px;
  background: var(--primary); color: var(--primary-fg);
}
.confirmation-title { font-size: 16px; font-weight: 500; }
.confirmation-number {
  font-family: var(--mono); font-size: 20px; font-weight: 500;
  letter-spacing: 0.02em;
}
.bullet-list { display: flex; flex-direction: column; gap: 10px; }
.bullet {
  display: flex; align-items: flex-start; gap: 10px;
  font-size: 14px; line-height: 1.5;
}
.bullet::before {
  content: ''; margin-top: 7px;
  width: 5px; height: 5px; flex: none;
  border-radius: 999px; background: var(--muted-fg);
}

/* ---------- responsive ---------- */

/* The rail stops earning its column before the content does: fold it into a
   horizontal step strip while the cards still have room. */
@media (max-width: 900px) {
  .app-header { padding: 12px var(--shell-pad); }
  .app-header-inner { gap: 12px; flex-wrap: wrap; }
  .wizard {
    grid-template-columns: minmax(0, 1fr);
    gap: 20px;
    padding: 16px var(--shell-pad) 24px;
  }
  .wizard-aside { position: static; gap: 10px; }
  .step-nav {
    flex-direction: row; flex-wrap: nowrap;
    gap: 6px; overflow-x: auto;
    padding-bottom: 4px;
    scrollbar-width: thin;
  }
  .step-nav button { width: auto; flex: none; white-space: nowrap; }
  .aside-note { display: none; }
  .card { padding: clamp(14px, 3.5vw, 20px); gap: 16px; }
  .notify-row { grid-template-columns: minmax(0, 1fr); }
  .matrix { grid-template-columns: clamp(64px, 20vw, 100px) repeat(5, minmax(0, 1fr)); font-size: 11px; }
  .matrix .axis { padding: 4px; }
  /* Pinned so Continue is reachable without scrolling the whole step. */
  .wizard-foot {
    position: sticky; bottom: 0;
    margin: 0 calc(-1 * var(--shell-pad));
    padding: 12px var(--shell-pad) calc(12px + env(safe-area-inset-bottom));
    background: var(--card);
    border-top: 1px solid var(--border);
  }
}

/* ---------- investigation form (investigate.html) ----------
   Legacy class names mapped onto the same tokens so both pages read
   as one product. */

header.site {
  max-width: min(900px, var(--shell-inner)); margin: 0 auto;
  padding: clamp(16px, 3vw, 24px) var(--shell-pad) 0;
}
header.site .site-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 16px; margin-bottom: 8px;
}
header.site h1 { font-size: 24px; font-weight: 600; letter-spacing: -0.01em; margin: 0; }
header.site p { margin: 0; font-size: 14px; color: var(--muted-fg); text-wrap: pretty; }

/* Scoped to .form-page: the wizard also renders a <main>, and these rules
   would otherwise cap and pad it. */
.form-page {
  max-width: min(900px, var(--shell-inner)); margin: 0 auto;
  padding: clamp(16px, 3vw, 24px) var(--shell-pad) clamp(48px, 8vh, 96px);
}
.form-page > form { display: flex; flex-direction: column; gap: 20px; }
.form-page > .card { margin-bottom: 20px; }

.form-page .card h2 { font-size: 16px; font-weight: 500; margin: 0; }
/* Block, not flex: these labels wrap their own control and put the
   mandatory marker inline with the caption. */
.form-page .card > label { display: block; font-size: 14px; font-weight: 500; }
.form-page .card > label > input,
.form-page .card > label > select,
.form-page .card > label > textarea { margin-top: 6px; }
.form-page .card fieldset { border: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.form-page .card legend { padding: 0; font-size: 14px; font-weight: 500; }

.hint, .note { margin: 0; font-size: 14px; color: var(--muted-fg); text-wrap: pretty; }

.summary dl {
  display: grid;
  grid-template-columns: minmax(140px, 30%) 1fr;
  gap: 8px 16px; margin: 0; font-size: 14px;
}
.summary dt { font-weight: 500; color: var(--muted-fg); }
.summary dd { margin: 0; overflow-wrap: anywhere; }

.choice-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px 20px; }
.choice { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 400; cursor: pointer; }
.yesno { display: flex; gap: 20px; }

.row-list { display: flex; flex-direction: column; gap: 8px; }
.rep-row {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 8px; align-items: center;
}
.rep-row .rm, .file-list .rm {
  height: 24px; padding: 0 8px;
  border: none; border-radius: var(--radius-md);
  background: transparent; color: var(--muted-fg);
  font-size: 12px; font-weight: 500; cursor: pointer;
}
.rep-row .rm:hover, .file-list .rm:hover {
  background: var(--destructive-hover); color: var(--destructive);
}

.add-row {
  align-self: flex-start;
  height: 32px; padding: 0 10px;
  border: 1px solid var(--border); border-radius: var(--radius-md);
  background: var(--card); box-shadow: var(--shadow-xs);
  font-size: 14px; font-weight: 500; color: var(--fg);
  cursor: pointer; transition: all 0.15s;
}
.add-row:hover { background: var(--muted); }

.file-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.file-list li { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 14px; }

button.primary {
  align-self: flex-start;
  height: 36px; padding: 0 12px;
  border: 1px solid transparent; border-radius: var(--radius-md);
  background: var(--primary); color: var(--primary-fg);
  font-size: 14px; font-weight: 500;
  cursor: pointer; transition: all 0.15s;
}
button.primary:hover:not(:disabled) { background: var(--primary-hover); }
button.primary:disabled { opacity: 0.5; cursor: default; }

.errors { display: none; }
.errors.show {
  display: block;
  padding: 16px 20px; border-radius: var(--radius-xl);
  background: var(--destructive-soft);
  box-shadow: 0 0 0 1px var(--destructive-edge);
  color: var(--destructive); font-size: 14px;
}
.errors ul { margin: 0; padding-left: 18px; }

.badge.Open { background: var(--destructive-tint); color: var(--destructive); }
.badge.Closed { background: var(--muted); color: var(--primary); }

.confirmation .number { font-family: var(--mono); font-size: 20px; font-weight: 500; }

@media (max-width: 900px) {
  .summary dl { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .summary dl dd { margin-bottom: 8px; }
}