/* ==========================================================================
   Supply Run — application stylesheet

   The theme tokens are copied verbatim from the Intrepid Studios site.css so
   the app reads as the same product. They are copied rather than imported for
   two reasons: this app may live on its own subdomain, where it could not
   share the site's cache anyway, and it has to run with no internet at all on
   the standalone device. Nothing here loads from a third party — the fonts
   are served from /assets/fonts.

   Only the components these five pages need are included. The marketing
   furniture (hero, pricing cards, FAQ, code cards) is left out, which is most
   of why this file is a third of site.css.

   Contents
     1. Fonts
     2. Theme tokens
     3. Base
     4. App shell
     5. Sign-in
     6. Search and roster
     7. Order sheet and steppers
     8. Payment and vehicle chips
     9. Loader cards
    10. Follow-up table
    11. Setup
    12. Summary
    13. Toasts and utilities
   ========================================================================== */

/* 1. Fonts ----------------------------------------------------------------- */

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

@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/assets/fonts/archivo-latin-700-normal.woff2') format('woff2');
}

@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/assets/fonts/space-grotesk-latin-600-normal.woff2') format('woff2');
}

@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/ibm-plex-mono-latin-400-normal.woff2') format('woff2');
}

/* 2. Theme tokens ---------------------------------------------------------- */

:root {
  --bg: #edf0ea;
  --bg2: #e2e7de;
  --card: #f6f8f3;
  --ink: #16302a;
  --muted: #3a4e46;
  --line: #16302a;
  --rule: #c3cdc1;
  --strong: #16302a;
  --soft: #6f8a7e;
  --inv: #16302a;
  --inv-ink: #edf0ea;
  --inv-muted: #c9d3cd;
  --inv-line: #6f8a7e;
  --accent: #f08a4b;
  --hover: #b8461a;
  --tag: #2f6b52;

  --btn: #2f6b52;
  --on-btn: #ffffff;
  --pill: #5fb389;
  --on-pill: #0f1d18;

  --wrap: 1280px;
  --gutter: clamp(16px, 4vw, 48px);
  --radius: 4px;

  --sans: 'Archivo', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --display: 'Space Grotesk', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, 'Cascadia Mono', 'Consolas', monospace;

  color-scheme: light;
}

:root[data-theme='dark'] {
  --bg: #0f1d18;
  --bg2: #15271f;
  --card: #142620;
  --ink: #e3eae5;
  --muted: #a9b8b0;
  --line: #3e5c50;
  --rule: #26382f;
  --strong: #a9b8b0;
  --soft: #5e786d;
  --inv: #1b382e;
  --inv-ink: #edf0ea;
  --inv-muted: #c2cec7;
  --inv-line: #6f8a7e;
  --accent: #f08a4b;
  --hover: #f5a877;
  --tag: #8ccb9b;

  color-scheme: dark;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    --bg: #0f1d18;
    --bg2: #15271f;
    --card: #142620;
    --ink: #e3eae5;
    --muted: #a9b8b0;
    --line: #3e5c50;
    --rule: #26382f;
    --strong: #a9b8b0;
    --soft: #5e786d;
    --inv: #1b382e;
    --inv-ink: #edf0ea;
    --inv-muted: #c2cec7;
    --inv-line: #6f8a7e;
    --accent: #f08a4b;
    --hover: #f5a877;
    --tag: #8ccb9b;

    color-scheme: dark;
  }
}

/* 3. Base ------------------------------------------------------------------ */

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

html {
  -webkit-text-size-adjust: 100%;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3 {
  font-family: var(--display);
  font-weight: 600;
  margin: 0;
  letter-spacing: -0.03em;
  text-wrap: balance;
}

h1 { font-size: 30px; }
h2 { font-size: 24px; }
h3 { font-size: 19px; }

p { margin: 0; }

a {
  color: var(--ink);
  text-underline-offset: 3px;
}

a:hover { color: var(--hover); }

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

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

.label {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--muted);
  text-transform: uppercase;
}

.muted { color: var(--muted); }
.lede { font-size: 19px; color: var(--muted); max-width: 46ch; }
.note { margin-top: 10px; font-size: 15px; color: var(--muted); }

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

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 10;
  padding: 12px 18px;
  background: var(--btn);
  color: var(--on-btn);
  font-weight: 700;
  text-decoration: none;
}

.skip-link:focus { left: 8px; top: 8px; }

/* 4. App shell ------------------------------------------------------------- */

.wrap {
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.wrap-narrow {
  max-width: 560px;
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* The bar is sticky because on a long check-in the operator still needs the
   extras counters and the event name in view. */
.app-head {
  position: sticky;
  top: 0;
  z-index: 6;
  background: var(--bg);
  border-bottom: 1px solid var(--rule);
}

.app-head-inner {
  max-width: var(--wrap);
  margin-inline: auto;
  padding: 10px var(--gutter);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 20px;
  justify-content: space-between;
}

.brand {
  display: flex;
  align-items: center;
  gap: 9px;
  text-decoration: none;
  color: var(--ink);
  font-family: var(--display);
  font-weight: 600;
  font-size: 19px;
  letter-spacing: -0.02em;
}

.brand svg { flex: 0 0 auto; }

.app-nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px 16px;
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.app-nav a {
  text-decoration: none;
  padding: 10px 0;
}

.app-nav a[aria-current='page'] {
  text-decoration: underline;
  text-underline-offset: 6px;
}

.icon-btn {
  height: 38px;
  min-width: 38px;
  padding: 0 12px;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: transparent;
  color: var(--ink);
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font: 400 13px var(--mono);
  text-transform: uppercase;
  cursor: pointer;
}

.icon-btn:hover {
  color: var(--hover);
  border-color: var(--hover);
}

.theme-toggle .when-light { display: inline-flex; align-items: center; gap: 7px; }
.theme-toggle .when-dark { display: none; align-items: center; gap: 7px; }

:root[data-theme='dark'] .theme-toggle .when-light { display: none; }
:root[data-theme='dark'] .theme-toggle .when-dark { display: inline-flex; }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) .theme-toggle .when-light { display: none; }
  :root:not([data-theme='light']) .theme-toggle .when-dark { display: inline-flex; }
}

main { padding-block: 24px 80px; }

.page-head {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
  align-items: baseline;
  justify-content: space-between;
  padding-bottom: 10px;
  margin-bottom: 20px;
  border-bottom: 2px solid var(--strong);
}

/* 5. Buttons, pills, cards ------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 22px;
  border: 0;
  border-radius: var(--radius);
  background: var(--btn);
  color: var(--on-btn);
  font: 700 17px var(--sans);
  text-decoration: none;
  cursor: pointer;
}

.btn:hover { background: var(--ink); color: var(--bg); }

.btn[disabled],
.btn[aria-disabled='true'] {
  opacity: 0.5;
  cursor: not-allowed;
}

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

.btn-ghost:hover {
  background: transparent;
  color: var(--hover);
  border-color: var(--hover);
}

.btn-sm {
  min-height: 40px;
  padding: 0 14px;
  font-size: 15px;
}

.btn-danger { background: var(--hover); color: #fff; }
.btn-danger:hover { background: var(--ink); }

.btn-block { width: 100%; }

/* The big one at the bottom of a check-in. It arms on first tap and completes
   on the second, so a pocket brush or a mis-aimed thumb cannot take money. */
.btn-commit {
  min-height: 62px;
  font-size: 19px;
}

.btn-commit[data-armed='true'] {
  background: var(--hover);
  color: #fff;
}

.pill {
  display: inline-block;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.02em;
  padding: 3px 11px;
  border-radius: 999px;
  background: var(--pill);
  color: var(--on-pill);
  text-transform: uppercase;
  white-space: nowrap;
}

.pill-ink { background: var(--ink); color: var(--bg); }
.pill-warn { background: var(--accent); color: #2a1407; }
.pill-quiet { background: transparent; border: 1px solid var(--line); color: var(--muted); }

.card {
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--card);
}

.stack { display: flex; flex-direction: column; gap: 14px; }
.stack-sm { display: flex; flex-direction: column; gap: 8px; }
.row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.row-between { justify-content: space-between; }
.row-tight { gap: 6px; }
.grow { flex: 1 1 auto; min-width: 0; }

.mt-1 { margin-top: 8px; }
.mt-2 { margin-top: 18px; }
.mt-3 { margin-top: 28px; }

/* 6. Forms ----------------------------------------------------------------- */

.field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 14px;
  font-weight: 700;
}

.field input,
.field select,
.field textarea {
  min-height: 48px;
  padding: 0 14px;
  border-radius: var(--radius);
  border: 1px solid var(--soft);
  background: var(--bg);
  color: var(--ink);
  font: 400 17px var(--sans);
  width: 100%;
}

.field textarea {
  padding: 12px 14px;
  resize: vertical;
  line-height: 1.5;
  min-height: 72px;
}

.field input:focus,
.field select:focus,
.field textarea:focus { border-color: var(--btn); }

.field input[aria-invalid='true'] {
  border-color: var(--hover);
  border-width: 2px;
}

.field-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.field-row > .field { flex: 1 1 160px; min-width: 0; }

.status {
  margin: 0;
  padding: 12px 14px;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: var(--bg2);
  font-size: 15px;
}

.status[hidden] { display: none; }
.status.is-ok { border-color: var(--btn); }
.status.is-error { border-color: var(--hover); }

/* 7. Search and roster ----------------------------------------------------- */

.search-wrap { position: relative; }

.search-input {
  width: 100%;
  min-height: 58px;
  padding: 0 16px;
  border-radius: var(--radius);
  border: 2px solid var(--line);
  background: var(--card);
  color: var(--ink);
  font: 400 20px var(--sans);
}

.search-input:focus { border-color: var(--btn); outline: none; }

.results {
  list-style: none;
  margin: 12px 0 0;
  padding: 0;
  border-top: 2px solid var(--strong);
}

.results:empty { border-top: 0; }

.results > li { border-bottom: 1px solid var(--rule); }

.result-btn {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 14px;
  padding: 14px 4px;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.result-btn:hover { background: var(--bg2); }

.result-btn strong {
  font-family: var(--display);
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.02em;
}

.result-meta {
  flex: 1 1 100%;
  font-family: var(--mono);
  font-size: 13px;
  color: var(--muted);
}

/* Several rows sharing an email or a phone are a real possibility in the
   import, so the operator is shown both rather than one being guessed at. */
.result-dupe {
  border-left: 3px solid var(--accent);
  padding-left: 10px;
}

/* 8. Order sheet and steppers ---------------------------------------------- */

.order-card + .order-card { margin-top: 14px; }

.order-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px 16px;
  padding-bottom: 10px;
  border-bottom: 2px solid var(--strong);
}

.lines {
  list-style: none;
  margin: 0;
  padding: 0;
}

.lines > li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
  padding: 12px 0;
  border-bottom: 1px solid var(--rule);
}

.line-name { flex: 1 1 120px; min-width: 0; font-weight: 700; }

.line-name small {
  display: block;
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 400;
  color: var(--muted);
}

.line-cost {
  flex: 0 0 auto;
  font-family: var(--mono);
  font-size: 15px;
  text-align: right;
  min-width: 74px;
}

/* A stepper rather than a number field: at a table, with cold hands, tapping
   a 44px target beats selecting text in a spinner. */
.stepper {
  display: inline-flex;
  align-items: stretch;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  flex: 0 0 auto;
}

.stepper button {
  width: 46px;
  min-height: 46px;
  border: 0;
  background: transparent;
  color: var(--ink);
  font: 400 24px var(--mono);
  line-height: 1;
  cursor: pointer;
}

.stepper button:hover:not([disabled]) { background: var(--btn); color: var(--on-btn); }
.stepper button[disabled] { opacity: 0.3; cursor: not-allowed; }

.stepper output {
  min-width: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--mono);
  font-size: 19px;
  border-inline: 1px solid var(--line);
  background: var(--bg);
}

.stepper output[data-changed='true'] {
  background: var(--accent);
  color: #2a1407;
}

.totals {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px 16px;
  padding-top: 14px;
  font-family: var(--display);
  font-size: 23px;
  font-weight: 600;
  letter-spacing: -0.02em;
}

.grand-total {
  margin-top: 16px;
  padding: 16px 18px;
  border-radius: var(--radius);
  background: var(--inv);
  color: var(--inv-ink);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px 16px;
}

.grand-total .amount {
  font-family: var(--display);
  font-size: 34px;
  font-weight: 600;
  letter-spacing: -0.03em;
}

/* The extras counter strip, always visible while checking someone in. */
.extras-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 4px;
}

.extras-chip {
  font-family: var(--mono);
  font-size: 12px;
  padding: 3px 10px;
  border-radius: 999px;
  border: 1px solid var(--rule);
  color: var(--muted);
  white-space: nowrap;
}

.extras-chip[data-empty='true'] {
  border-color: var(--hover);
  color: var(--hover);
}

/* 9. Payment and vehicle chips --------------------------------------------- */

.chip-set {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.chip {
  min-height: 46px;
  padding: 0 16px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--ink);
  font: 400 16px var(--sans);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.chip:hover { border-color: var(--hover); color: var(--hover); }

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

.chip-swatch {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 1px solid rgba(0, 0, 0, 0.35);
  flex: 0 0 auto;
}

.chip-sm { min-height: 38px; padding: 0 13px; font-size: 14px; }

/* The state picker: likely states first, the rest behind a toggle. One tap
   covers almost every plate without shipping a map. */
.state-more[hidden] { display: none; }

.split-rows {
  list-style: none;
  margin: 10px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.split-rows > li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.split-rows select,
.split-rows input {
  min-height: 44px;
  padding: 0 12px;
  border-radius: var(--radius);
  border: 1px solid var(--soft);
  background: var(--bg);
  color: var(--ink);
  font: 400 16px var(--sans);
}

.split-rows input { flex: 1 1 110px; min-width: 0; }

/* 10. Loader cards --------------------------------------------------------- */

.loader-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.load-card {
  border: 1px solid var(--line);
  border-left: 5px solid var(--btn);
  border-radius: var(--radius);
  background: var(--card);
  padding: 16px 18px;
}

/* A car collecting for several households gets a different edge and an
   itemised breakdown, so a loader never splits one pile by accident. */
.load-card[data-multi='true'] { border-left-color: var(--accent); }
.load-card[data-loaded='true'] { opacity: 0.55; border-left-color: var(--soft); }

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

.load-name {
  font-family: var(--display);
  font-size: 23px;
  font-weight: 600;
  letter-spacing: -0.025em;
}

.load-when { font-family: var(--mono); font-size: 13px; color: var(--muted); }

.load-vehicle {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
}

.load-qty {
  list-style: none;
  margin: 12px 0 0;
  padding: 0;
  border-top: 1px solid var(--rule);
}

.load-qty > li {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  padding: 9px 0;
  border-bottom: 1px solid var(--rule);
}

.load-qty .qty {
  font-family: var(--mono);
  font-size: 19px;
  text-align: right;
  white-space: nowrap;
}

.load-qty .qty small {
  display: block;
  font-size: 12px;
  color: var(--muted);
}

.load-split {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px dashed var(--soft);
}

.load-split > div + div { margin-top: 10px; }

.load-split .who {
  font-family: var(--mono);
  font-size: 13px;
  color: var(--muted);
  text-transform: uppercase;
}

.load-split ul {
  list-style: none;
  margin: 4px 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 4px 16px;
  font-size: 15px;
}

/* A card that has just arrived gets one quiet pulse — enough to catch an eye
   across a loading bay without turning the screen into a slot machine. */
@keyframes arrive {
  from { background: var(--pill); }
  to { background: var(--card); }
}

.load-card[data-new='true'] { animation: arrive 1.6s ease-out; }

.live-dot {
  display: inline-block;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--pill);
  flex: 0 0 auto;
}

.live-dot[data-state='down'] { background: var(--hover); }
.live-dot[data-state='connecting'] { background: var(--accent); }

/* 11. Follow-up table ------------------------------------------------------ */

.table-scroll { overflow-x: auto; }

table.grid {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
  min-width: 720px;
}

table.grid th,
table.grid td {
  padding: 12px 14px;
  border-bottom: 1px solid var(--rule);
  vertical-align: top;
}

table.grid thead th {
  border-bottom: 2px solid var(--strong);
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 400;
  white-space: nowrap;
}

table.grid tbody tr:hover { background: var(--bg2); }

.contact-links {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.contact-links a {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 38px;
  padding: 0 11px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  text-decoration: none;
  font-family: var(--mono);
  font-size: 13px;
  text-transform: uppercase;
}

.contact-links a:hover { border-color: var(--hover); }

.filters {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  margin-bottom: 18px;
}

.filters input[type='search'] {
  flex: 1 1 220px;
  min-width: 0;
  min-height: 46px;
  padding: 0 14px;
  border-radius: var(--radius);
  border: 1px solid var(--soft);
  background: var(--bg);
  color: var(--ink);
  font: 400 16px var(--sans);
}

/* 12. Setup ---------------------------------------------------------------- */

.drop {
  border: 2px dashed var(--soft);
  border-radius: var(--radius);
  padding: 32px 24px;
  text-align: center;
  background: var(--card);
}

.drop[data-over='true'] { border-color: var(--btn); background: var(--bg2); }

.product-rows {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 2px solid var(--strong);
}

.product-rows > li {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 10px 14px;
  padding: 14px 0;
  border-bottom: 1px solid var(--rule);
}

.product-rows .field { flex: 0 1 120px; }
.product-rows .field-name { flex: 2 1 180px; }

.money-input { position: relative; }

.money-input::before {
  content: '$';
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--muted);
  font-family: var(--mono);
  pointer-events: none;
}

.money-input input { padding-left: 26px; }

.warnings {
  list-style: none;
  margin: 10px 0 0;
  padding: 0;
  max-height: 220px;
  overflow-y: auto;
  font-size: 15px;
  color: var(--muted);
}

.warnings > li {
  padding: 7px 0;
  border-bottom: 1px solid var(--rule);
}

.dupe-group {
  padding: 12px 14px;
  border: 1px solid var(--accent);
  border-radius: var(--radius);
  background: var(--bg2);
}

.dupe-group + .dupe-group { margin-top: 10px; }

.steps-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 22px;
  font-family: var(--mono);
  font-size: 13px;
  text-transform: uppercase;
}

.steps-nav span {
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid var(--rule);
  color: var(--muted);
}

.steps-nav span[data-active='true'] {
  border-color: var(--line);
  background: var(--ink);
  color: var(--bg);
}

.steps-nav span[data-done='true'] { border-color: var(--btn); color: var(--tag); }

/* 13. Summary -------------------------------------------------------------- */

.stat-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0 44px;
  margin-bottom: 8px;
}

.stat-row > div {
  border-top: 2px solid var(--strong);
  padding-top: 8px;
  min-width: 110px;
}

.stat-row dt {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--muted);
}

.stat-row dd {
  margin: 2px 0 0;
  font-family: var(--display);
  font-size: 31px;
  font-weight: 600;
  letter-spacing: -0.03em;
}

.section + .section { margin-top: 36px; }

.section > h2 {
  padding-bottom: 8px;
  border-bottom: 2px solid var(--strong);
  margin-bottom: 4px;
}

.flag { color: var(--hover); font-weight: 700; }

/* 14. Toasts and utilities ------------------------------------------------- */

/* Anchored to the bottom on a phone, where the thumb and the eye already are. */
.toasts {
  position: fixed;
  left: 50%;
  bottom: 16px;
  transform: translateX(-50%);
  z-index: 20;
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: min(440px, calc(100vw - 32px));
  pointer-events: none;
}

.toast {
  padding: 13px 16px;
  border-radius: var(--radius);
  background: var(--inv);
  color: var(--inv-ink);
  font-size: 16px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.28);
}

.toast[data-kind='error'] { background: var(--hover); color: #fff; }
.toast[data-kind='ok'] { background: var(--btn); color: #fff; }

.empty {
  padding: 40px 20px;
  text-align: center;
  color: var(--muted);
}

.spinner-line {
  height: 2px;
  background: var(--pill);
  transform-origin: left;
  animation: slide 1.1s ease-in-out infinite;
}

@keyframes slide {
  0% { transform: scaleX(0); }
  50% { transform: scaleX(1); }
  100% { transform: scaleX(0); transform-origin: right; }
}

@media (max-width: 640px) {
  .app-head { position: static; }
  h1 { font-size: 26px; }
  main { padding-block: 18px 72px; }
  .card { padding: 16px; }
  table.grid { min-width: 560px; }
}

@media print {
  .app-head,
  .filters,
  .btn,
  .toasts { display: none; }

  body { background: #fff; color: #000; }
  .card, .load-card { border-color: #999; }
}