/* SOAgent - application stylesheet.
 *
 * Design system: "V1.0.1" (docs/DESIGN.md). Precision over
 * decoration: tonal layers and crisp 1px outlines instead of soft shadows,
 * 4px left rails for status, tabular figures in every grid, a system/Inter
 * stack, and one flat black for the primary action and the navigation.
 *
 * This file is the appearance half of the frozen DOM contract
 * (docs/dom-contract.md). JS sets state through `data-*` attributes; every
 * colour, glyph and pixel below is CSS reacting to one of them. The single
 * documented exception is `js/pdfCanvas.js`, which sizes the drawing buffer and
 * reads its palette from the `--box-*` / `--detected-*` custom properties on
 * `.pagebox__canvas` further down.
 *
 * Layout: `index.html`, `submit.html`, `review.html`, `status.html`,
 * `tracking.html`, `sync.html` and `presales.html` carry the navigation shell
 * (`<body class="app">` → `.appshell` → `.sidenav` + `.topbar` + `.workarea`;
 * review and presales widen the column with `.workarea--wide`). `prepare.html`
 * carries a focused task shell instead
 * (`<body class="app">` → `.taskshell` → `.taskbar` + `.taskmain` = `.steprail`
 * + `.workzone`), with no global rail - the only way out is back to the order.
 * The `body:not(.app)` centred-column fallback is kept for any page still
 * without a shell; every path shares every component below.
 */

/* ── tokens ─────────────────────────────────────────────────────────── */
:root {
  color-scheme: light;

  /* surfaces - tonal layers, lightest is the card, page sits one step down */
  --surface: #fcf8fa;
  --surface-container-lowest: #ffffff;
  --surface-container-low: #f6f3f5;
  --surface-container: #f0edef;
  --surface-container-high: #eae7e9;
  --surface-container-highest: #e4e2e4;

  --on-surface: #1b1b1d;
  --on-surface-variant: #45464d;
  --outline: #9a9aa1;
  --outline-variant: #d5d3d8;

  /* one flat near-black for the submit gate and the nav (DESIGN §Colors) */
  --primary: #0f172a;
  --primary-hover: #1e293b;
  --on-primary: #ffffff;

  /* status-first semantics */
  --ok: #10b981;      --ok-ink: #05613f;   --ok-bg: #ecfdf5;
  --warn: #f59e0b;    --warn-ink: #925b0b;  --warn-bg: #fff8ec;
  --error: #f43f5e;   --error-ink: #b21133; --error-bg: #fff1f3;
  --info: #6366f1;    --info-ink: #3f3fb0;  --info-bg: #eef0ff;

  --dirty-highlight: #fffbe6;

  --radius: 6px;
  --radius-lg: 10px;
  --radius-sm: 3px;

  --font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;

  /* the only shadow in the system: barely-there, so borders carry depth */
  --lift: 0 1px 2px rgba(15, 23, 42, 0.04);
}

/* ── reset ──────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
body, h1, h2, h3, h4, p, figure, ul, ol { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img { max-width: 100%; display: block; }
button, input, select, textarea { font: inherit; color: inherit; }

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

body {
  font-family: var(--font);
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--on-surface);
  background: var(--surface);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* pages without the navigation shell: a centred reading column */
body:not(.app) {
  max-width: 74rem;
  margin-inline: auto;
  padding: 1.5rem 1.5rem 4rem;
}

/* ── typography ─────────────────────────────────────────────────────── */
h1 { font-size: 1.5rem; font-weight: 700; letter-spacing: -0.02em; color: var(--primary); }
h2 { font-size: 1.125rem; font-weight: 600; margin-top: 1.75rem; }
h3 { font-size: 1rem; font-weight: 600; }
h4 { font-size: 0.9rem; font-weight: 600; }

a { color: var(--info-ink); text-decoration: none; }
a:hover { text-decoration: underline; }

code, pre, .mono { font-family: var(--mono); font-size: 0.8125rem; }
pre {
  background: var(--surface-container-high);
  border: 1px solid var(--outline-variant);
  border-radius: var(--radius);
  padding: 0.75rem;
  overflow-x: auto;
  line-height: 1.45;
}
hr { border: 0; border-top: 1px solid var(--outline-variant); margin: 1.75rem 0; }

summary { cursor: pointer; }
.region__summary, .runcard__summary, .trackcard__summary { list-style: none; }
.region__summary::-webkit-details-marker,
.runcard__summary::-webkit-details-marker,
.trackcard__summary::-webkit-details-marker { display: none; }

/* ═══ navigation shell (submit.html) ═══════════════════════════════════ */
body.app { min-height: 100vh; }

.appshell {
  display: grid;
  grid-template-columns: 15.5rem minmax(0, 1fr);
  min-height: 100vh;
}
.appshell__main { display: flex; flex-direction: column; min-width: 0; }

.workarea {
  flex: 1;
  width: 100%;
  max-width: 68rem;
  margin-inline: auto;
  padding: 2rem 1.5rem 4rem;
}
/* review runs a 10-column editable grid per branch - it wants the room */
.workarea--wide { max-width: 82rem; }

/* ── the rail ───────────────────────────────────────────────────────── */
.sidenav {
  position: sticky;
  top: 0;
  align-self: start;
  height: 100vh;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  padding: 1rem 0.75rem;
  background: var(--surface-container);
  border-right: 1px solid var(--outline-variant);
}

.sidenav__brand { display: flex; align-items: center; gap: 0.6rem; padding: 0.4rem 0.5rem 1rem; }
.sidenav__mark {
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  flex: none;
  border-radius: var(--radius);
  background: var(--primary);
  color: var(--on-primary);
  font-weight: 800;
  font-size: 0.75rem;
  letter-spacing: 0.02em;
}
.sidenav__brandtext { display: flex; flex-direction: column; line-height: 1.2; }
.sidenav__title { font-weight: 800; color: var(--on-surface); }
.sidenav__tag { font-size: 0.58rem; text-transform: uppercase; letter-spacing: 0.09em; color: var(--on-surface-variant); }

.sidenav__new {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  margin: 0 0.25rem 0.9rem;
  padding: 0.55rem;
  border-radius: var(--radius);
  background: var(--primary);
  color: var(--on-primary);
  font-weight: 700;
  font-size: 0.8rem;
}
.sidenav__new:hover { background: var(--primary-hover); text-decoration: none; }

.sidenav__nav { display: flex; flex-direction: column; gap: 0.1rem; flex: 1; }
.sidenav__foot {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  margin-top: 0.5rem;
  padding-top: 0.5rem;
  border-top: 1px solid var(--outline-variant);
}

.sidenav__link {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.5rem 0.6rem;
  border-left: 3px solid transparent;
  border-radius: 0 var(--radius) var(--radius) 0;
  color: var(--on-surface-variant);
  font-size: 0.85rem;
  font-weight: 600;
}
.sidenav__link:hover { background: var(--surface-container-high); color: var(--on-surface); text-decoration: none; }
.sidenav__link[aria-current="page"] {
  background: var(--surface-container-lowest);
  border-left-color: var(--primary);
  color: var(--primary);
}
.sidenav__ico { width: 1.05rem; height: 1.05rem; flex: none; }

/* ── the top bar ────────────────────────────────────────────────────── */
.topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  height: 3.5rem;
  padding: 0 1.5rem;
  background: var(--surface);
  border-bottom: 1px solid var(--outline-variant);
}
.topbar__title { font-weight: 800; font-size: 1rem; letter-spacing: -0.01em; color: var(--primary); flex: none; }
.topbar__actions { display: flex; align-items: center; gap: 0.75rem; min-width: 0; }
.topbar .userbar { border: 0; padding: 0; margin: 0; min-height: 0; flex-wrap: nowrap; min-width: 0; }
.topbar .userbar__email { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 16rem; }
@media (max-width: 40rem) { .topbar .userbar__email { display: none; } }

/* ── page header ────────────────────────────────────────────────────── */
.pagehead { margin-bottom: 1.5rem; }
.pagehead__sub { margin-top: 0.2rem; color: var(--on-surface-variant); font-size: 0.9rem; }

/* narrow: the rail becomes a scrolling strip above the content */
@media (max-width: 60rem) {
  .appshell { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
  .sidenav {
    position: static;
    height: auto;
    flex-direction: row;
    align-items: center;
    gap: 0.35rem;
    overflow-x: auto;
    border-right: 0;
    border-bottom: 1px solid var(--outline-variant);
    padding: 0.5rem 0.75rem;
  }
  .sidenav__brand { padding: 0 0.5rem 0 0; border: 0; }
  .sidenav__brandtext, .sidenav__new, .sidenav__foot { display: none; }
  .sidenav__nav { flex-direction: row; flex: 0 0 auto; }
  .sidenav__link { white-space: nowrap; border-left: 0; border-bottom: 3px solid transparent; border-radius: var(--radius) var(--radius) 0 0; }
  .sidenav__link[aria-current="page"] { border-left: 0; border-bottom-color: var(--primary); }
  .workarea { padding: 1.5rem 1rem 3rem; }
}

/* ═══ user bar ═════════════════════════════════════════════════════════ */
.userbar {
  display: flex;
  gap: 0.6rem;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  font-size: 0.8125rem;
}
body:not(.app) .userbar {
  min-height: 1.9rem;
  padding-bottom: 0.6rem;
  margin-bottom: 1rem;
  border-bottom: 1px solid var(--outline-variant);
}
.userbar__name { font-weight: 600; }
.userbar__email { color: var(--on-surface-variant); }
.userbar__signout { padding: 0.3rem 0.6rem; font-size: 0.75rem; }
.userbar__warning[data-tone="warn"] {
  background: var(--warn);
  color: #1b1b1d;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 0.68rem;
  padding: 0.2rem 0.5rem;
  border-radius: 999px;
}

/* ═══ notices ═════════════════════════════════════════════════════════ */
.notice {
  position: relative;
  padding: 0.7rem 0.9rem 0.7rem 2.1rem;
  margin: 0.85rem 0;
  border: 1px solid var(--outline-variant);
  border-left: 4px solid var(--outline);
  border-radius: var(--radius);
  background: var(--surface-container-low);
  font-size: 0.875rem;
}
.notice::before {
  position: absolute;
  left: 0.7rem;
  top: 0.72rem;
  width: 0.95rem;
  height: 0.95rem;
  border-radius: 999px;
  font-size: 0.68rem;
  font-weight: 800;
  line-height: 0.95rem;
  text-align: center;
  color: #fff;
}
.notice[data-tone="ok"]    { border-left-color: var(--ok);    background: var(--ok-bg); }
.notice[data-tone="warn"]  { border-left-color: var(--warn);  background: var(--warn-bg); }
.notice[data-tone="error"] { border-left-color: var(--error); background: var(--error-bg); }
.notice[data-tone="info"]  { border-left-color: var(--info);  background: var(--info-bg); }
.notice[data-tone="ok"]::before    { content: "\2713"; background: var(--ok); }
.notice[data-tone="warn"]::before   { content: "\0021"; background: var(--warn); }
.notice[data-tone="error"]::before  { content: "\00D7"; background: var(--error); }
.notice[data-tone="info"]::before   { content: "i";     background: var(--info); }
.notice pre { margin-top: 0.5rem; font-size: 0.75rem; }
.notice a { font-weight: 600; }

/* ═══ toolbars ════════════════════════════════════════════════════════ */
.toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  align-items: flex-end;
  margin: 0.9rem 0;
}
.toolbar__status { color: var(--on-surface-variant); font-size: 0.78rem; }

/* ═══ form controls ═══════════════════════════════════════════════════ */
.field { display: flex; flex-direction: column; gap: 0.35rem; }
.field > span, .field > label {
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--on-surface-variant);
}
.field__req {
  margin-left: 0.35rem;
  padding: 0.05rem 0.35rem;
  border-radius: 999px;
  background: var(--warn-bg);
  color: var(--warn-ink);
  font-size: 0.6rem;
}

input[type="text"], input[type="number"], input[type="search"], select, textarea {
  width: 100%;
  padding: 0.5rem 0.6rem;
  border: 1px solid var(--outline-variant);
  border-radius: var(--radius);
  background: var(--surface-container-lowest);
  color: var(--on-surface);
}
input::placeholder, textarea::placeholder { color: var(--outline); }
textarea { resize: vertical; min-height: 6rem; line-height: 1.5; }

input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--info);
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15);
}
:focus-visible { outline: 2px solid var(--info); outline-offset: 1px; }
input[type="checkbox"] { width: auto; accent-color: var(--primary); }

input[type="file"] {
  width: 100%;
  padding: 0.8rem;
  border: 1px dashed var(--outline);
  border-radius: var(--radius);
  background: var(--surface-container-low);
  font-size: 0.8rem;
  cursor: pointer;
}
input[type="file"]::file-selector-button {
  margin-right: 0.75rem;
  padding: 0.35rem 0.7rem;
  border: 1px solid var(--outline-variant);
  border-radius: var(--radius);
  background: var(--surface-container-lowest);
  font: inherit;
  font-weight: 600;
  font-size: 0.75rem;
  cursor: pointer;
}

/* ── buttons ────────────────────────────────────────────────────────── */
button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  padding: 0.5rem 0.85rem;
  font-weight: 600;
  font-size: 0.8125rem;
  border: 1px solid var(--outline-variant);
  border-radius: var(--radius);
  background: var(--surface-container-lowest);
  color: var(--on-surface);
  cursor: pointer;
  transition: background-color 0.12s ease;
}
button:hover:not(:disabled) { background: var(--surface-container-high); }
button:disabled { opacity: 0.55; cursor: not-allowed; }
button:focus-visible { outline: 2px solid var(--info); outline-offset: 2px; }

/* the primary action: the submit gate and the review approve */
button[type="submit"], #approve {
  background: var(--primary);
  color: var(--on-primary);
  border-color: var(--primary);
}
button[type="submit"]:hover:not(:disabled), #approve:hover:not(:disabled) { background: var(--primary-hover); }
button[type="submit"]:disabled {
  background: var(--surface-container-highest);
  color: var(--on-surface-variant);
  border-color: var(--outline-variant);
  opacity: 1;
}

/* compact scale for the many in-context buttons */
.toolbar button,
.region__decide button,
.rowselect__bar button,
.steplist__jump,
.grid__add, .grid__delete,
.boxlist__delete, .pagebox__clear,
.region__suggest, .region__resetheader,
.rowselect__promote, .rowselect__reset,
.filecard__remove {
  padding: 0.32rem 0.6rem;
  font-size: 0.75rem;
}
.filecard__remove { border-color: transparent; background: transparent; color: var(--on-surface-variant); }
.filecard__remove:hover:not(:disabled) { background: var(--error-bg); color: var(--error-ink); }

/* ═══ bento layout + cards (submit) ═══════════════════════════════════ */
.bento { display: grid; gap: 1.25rem; grid-template-columns: 1fr; }
.bento__col { display: flex; flex-direction: column; gap: 1.25rem; min-width: 0; }
.bento__col > .notice { margin: 0; }
@media (min-width: 60rem) {
  .bento { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); align-items: start; }
}

.card {
  border: 1px solid var(--outline-variant);
  border-radius: var(--radius-lg);
  background: var(--surface-container-lowest);
  box-shadow: var(--lift);
  overflow: hidden;
}
.card--rail { border-left: 3px solid var(--primary); }

.card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.8rem 1rem;
  background: var(--surface-container-low);
  border-bottom: 1px solid var(--outline-variant);
}
.card__title {
  margin: 0;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--on-surface-variant);
}
.card__count { font-size: 0.7rem; font-weight: 700; color: var(--on-surface-variant); }
.card__action {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--primary);
  cursor: pointer;
  padding: 0.2rem 0.4rem;
  border-radius: var(--radius-sm);
}
.card__action:hover { background: var(--surface-container-high); }
.card__body { padding: 1rem; display: flex; flex-direction: column; gap: 1rem; }
.card__body > .toolbar__status { margin: 0; }

/* ── the submit gate ────────────────────────────────────────────────── */
.submitgate {
  padding: 1rem;
  border-top: 1px solid var(--outline-variant);
  background: var(--surface-container-low);
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.submitgate > button { width: 100%; padding: 0.7rem; font-size: 0.9rem; }
.submitgate__hint { text-align: center; font-size: 0.75rem; }
.submitgate:has(> button:disabled) .submitgate__hint { color: var(--warn-ink); font-weight: 600; }

/* ── recent runs ────────────────────────────────────────────────────── */
.runs { margin-top: 2.5rem; }
.runs__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 0.75rem;
}
.runs__head h2 { margin: 0; }
.runs .toolbar { margin: 0; }

/* ═══ attachment list (submit, prepare chooser) ══════════════════════ */
.filelist { display: grid; gap: 0.5rem; }
.filelist[data-state="empty"] {
  display: block;
  border: 1px dashed var(--outline-variant);
  border-radius: var(--radius);
  padding: 1.25rem;
  text-align: center;
  color: var(--on-surface-variant);
  font-size: 0.8rem;
  font-style: normal;
}
.filelist[data-state="empty"]::after { content: "No attachments yet - add a workbook, PDF or image above."; }

/* flex-wrap, not grid: the name + a small badge on line 1, then meta, status
 * and the way-in each on their own line - robust when the regions link is
 * absent (an "other" file) and when only name + meta are present (uploading). */
.filecard {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: 0.55rem;
  row-gap: 0.25rem;
  padding: 0.7rem 0.8rem;
  border: 1px solid var(--outline-variant);
  border-left: 3px solid var(--outline-variant);
  border-radius: var(--radius);
  background: var(--surface-container-lowest);
}
.filecard[data-prepared="true"]  { border-left-color: var(--ok); }
.filecard[data-prepared="false"] { border-left-color: var(--error); }

/* file kind as a crisp mono badge, driven only by data-file-kind */
.filecard::before {
  content: "FILE";
  order: 0;
  align-self: flex-start;
  position: relative;
  top: 0.05rem;
  padding: 0.16rem 0.3rem;
  border-radius: var(--radius-sm);
  font-family: var(--mono);
  font-size: 0.55rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  background: var(--surface-container-high);
  color: var(--on-surface-variant);
}
.filecard[data-file-kind="excel"]::before { content: "XLS"; background: var(--ok-bg);    color: var(--ok-ink); }
.filecard[data-file-kind="pdf"]::before   { content: "PDF"; background: var(--error-bg); color: var(--error-ink); }
.filecard[data-file-kind="image"]::before { content: "IMG"; background: var(--info-bg);  color: var(--info-ink); }
.filecard[data-file-kind="other"]::before { content: "TXT"; }

.filecard__name   { order: 1; flex: 1 1 auto; min-width: 0; font-weight: 600; overflow-wrap: anywhere; }
.filecard__remove { order: 2; flex: 0 0 auto; margin-left: auto; }
.filecard__meta {
  order: 3;
  flex: 1 1 100%;
  margin-left: 1.9rem;
  font-size: 0.72rem;
  color: var(--on-surface-variant);
  font-variant-numeric: tabular-nums;
}
.filecard__status {
  order: 4;
  flex: 1 1 100%;
  margin-left: 1.9rem;
  font-size: 0.72rem;
  color: var(--on-surface-variant);
  overflow-wrap: anywhere;
}
.filecard[data-prepared="false"] .filecard__status { color: var(--warn-ink); }

.filecard__regions {
  order: 5;
  flex: 0 0 auto;
  margin: 0.2rem 0 0 1.9rem;
  padding: 0.3rem 0.6rem;
  border: 1px solid var(--outline-variant);
  border-radius: var(--radius);
  font-size: 0.72rem;
  font-weight: 700;
  background: var(--surface-container-lowest);
  color: var(--primary);
}
.filecard__regions:hover { background: var(--surface-container-high); text-decoration: none; }
.filecard[data-prepared="false"] .filecard__regions {
  background: var(--error);
  border-color: var(--error);
  color: #fff;
}
.filecard[data-prepared="false"] .filecard__regions:hover { background: var(--error-ink); }

/* ═══ stat tiles (status, tracking, home) ════════════════════════════ */
.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
  gap: 0.9rem;
  margin: 1.25rem 0;
}
.stat {
  padding: 0.9rem 1rem;
  border: 1px solid var(--outline-variant);
  border-top: 3px solid var(--outline-variant);
  border-radius: var(--radius);
  background: var(--surface-container-lowest);
  box-shadow: var(--lift);
}
.stat__label {
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--on-surface-variant);
}
.stat__value {
  display: block;
  margin-top: 0.15rem;
  font-size: 1.9rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--primary);
}
.stat[data-run-status="COMPLETED"], .stat[data-stage="PREPARED"] { border-top-color: var(--ok); }
.stat[data-run-status="FAILED"] { border-top-color: var(--error); }
.stat[data-run-status="PARSING"], .stat[data-stage="TRANSFORMING"] { border-top-color: var(--warn); }
.stat[data-stage="SUBMITTED"] { border-top-color: var(--primary); }
.stat[data-stage="UPLOADED"] { border-top-color: var(--outline); }
.stat[data-run-status] .stat__label::before,
.stat[data-stage] .stat__label::before {
  content: "";
  display: inline-block;
  width: 0.5rem;
  height: 0.5rem;
  margin-right: 0.4rem;
  border-radius: 999px;
  background: var(--outline);
  vertical-align: baseline;
}
.stat[data-run-status="COMPLETED"] .stat__label::before, .stat[data-stage="PREPARED"] .stat__label::before { background: var(--ok); }
.stat[data-run-status="FAILED"] .stat__label::before { background: var(--error); }
.stat[data-run-status="PARSING"] .stat__label::before, .stat[data-stage="TRANSFORMING"] .stat__label::before { background: var(--warn); }
.stat[data-stage="SUBMITTED"] .stat__label::before { background: var(--primary); }

/* ═══ data grids (.grid) ═════════════════════════════════════════════ */
.grid {
  border-collapse: collapse;
  width: 100%;
  font-size: 0.875rem;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}
.grid th, .grid__cell {
  border: 1px solid var(--outline-variant);
  padding: 0.45rem 0.6rem;
  text-align: left;
  vertical-align: top;
}
.grid th, .grid thead th {
  background: var(--surface-container-high);
  font-family: var(--font);
  font-size: 0.66rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--on-surface-variant);
  white-space: nowrap;
}
.grid tbody th[scope="row"] { text-transform: none; font-size: 0.8rem; }

/* editable columns get a "you can type here" heading (DESIGN §Data Grids).
 * data-editable is written by grid.js - review's grid is its only user. */
.grid thead th[data-editable="true"] {
  color: var(--primary);
  background: var(--surface-container);
  box-shadow: inset 0 -2px 0 rgba(15, 23, 42, 0.16);
}
.grid thead th[data-editable="true"]::after {
  content: "\270E";
  margin-left: 0.35rem;
  font-weight: 400;
  color: var(--outline);
}

.grid__row:hover { background: var(--surface-container-low); }
.grid__row[data-dirty="true"] { background: var(--dirty-highlight); }
.grid__row[data-dirty="true"] .grid__cell { border-color: var(--warn); }

/* a bare grid on a page scrolls inside its own box - never the page body */
#runs, #config, #health { overflow-x: auto; }
.grid__wrap, .region__preview {
  overflow: auto;
  max-height: 30rem;
  border: 1px solid var(--outline-variant);
  border-radius: var(--radius);
  background: var(--surface-container-lowest);
}
.grid__wrap .grid thead th, .region__preview .grid thead th {
  position: sticky;
  top: 0;
  z-index: 1;
}
.grid__wrap .grid, .region__preview .grid { border: 0; }
.grid__wrap .toolbar { margin: 0; padding: 0.5rem; background: var(--surface-container-low); }

/* editable cells: dense, borderless until focused */
.grid__cell input, .grid__cell select {
  width: 100%;
  min-width: 3rem;
  border: 1px solid transparent;
  background: transparent;
  padding: 0.2rem 0.3rem;
  border-radius: var(--radius-sm);
  box-shadow: none;
}
.grid__cell input:focus, .grid__cell select:focus {
  outline: none;
  border-color: var(--info);
  background: var(--surface-container-lowest);
  box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.18);
}
.grid__cell[data-state="empty"] { text-align: center; color: var(--on-surface-variant); font-style: italic; }

/* match status / item source - CSS supplies the glyph, verbatim data-* value */
.legend { display: flex; flex-wrap: wrap; gap: 1rem; font-size: 0.78rem; color: var(--on-surface-variant); margin: 1rem 0; }
.legend__item { display: inline-flex; align-items: center; gap: 0.4rem; font-weight: 600; }
.legend__item::before,
.grid__cell[data-match-status]::before,
.grid__cell[data-item-source]::before {
  content: "";
  display: inline-block;
  width: 0.6rem;
  height: 0.6rem;
  border-radius: 999px;
  background: var(--outline);
  flex: none;
}
.legend__item[data-match-status="Matched"]::before,      .grid__cell[data-match-status="Matched"]::before      { background: var(--ok); }
.legend__item[data-match-status="PartialMatch"]::before,  .grid__cell[data-match-status="PartialMatch"]::before { background: var(--warn); }
.legend__item[data-match-status="NotFound"]::before,      .grid__cell[data-match-status="NotFound"]::before     { background: var(--error); }
.legend__item[data-item-source="salesLines"]::before,     .grid__cell[data-item-source="salesLines"]::before    { background: var(--info); border-radius: 2px; }
.legend__item[data-item-source="itemVariants"]::before,   .grid__cell[data-item-source="itemVariants"]::before  { background: #8b5cf6; border-radius: 2px; }
.grid__cell[data-match-status], .grid__cell[data-item-source] { white-space: nowrap; }

/* run status in a grid cell (submit recent runs, tracking detail) */
.grid__cell[data-run-status] { font-weight: 600; }
.grid__cell[data-run-status="COMPLETED"] { color: var(--ok-ink); }
.grid__cell[data-run-status="FAILED"]    { color: var(--error-ink); }
.grid__cell[data-run-status="PARSING"],
.grid__cell[data-run-status="MATCHING"],
.grid__cell[data-run-status="FINALIZING"],
.grid__cell[data-run-status="POST_PROCESSING"] { color: var(--warn-ink); }

/* ═══ pending order review ═══════════════════════════════════════════ */

/* the order picker reads as a self-contained control panel */
#orderpicker {
  align-items: flex-end;
  gap: 0.75rem 1rem;
  padding: 0.9rem 1rem;
  border: 1px solid var(--outline-variant);
  border-radius: var(--radius-lg);
  background: var(--surface-container-lowest);
  box-shadow: var(--lift);
}
#orderpicker .field { flex: 1 1 24rem; margin: 0; }

/* customer + the Save/Approve actions: a sticky header, so the two writes stay
 * reachable however far down a long order the reviewer has scrolled */
.reviewhead {
  position: sticky;
  top: 3.5rem;              /* clears the .topbar */
  z-index: 15;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.4rem 1.5rem;
  margin: 1.25rem 0 1rem;
  padding: 0.85rem 0;
  background: var(--surface);
  border-bottom: 1px solid var(--outline-variant);
}
.reviewhead__meta { min-width: 0; }
.reviewhead__meta h2 { margin: 0; font-size: 1.1rem; }
.reviewhead__meta .mono {
  display: block;
  margin-top: 0.1rem;
  font-size: 0.72rem;
  overflow-wrap: anywhere;
}
.reviewhead__actions { margin: 0; align-items: center; flex: 0 0 auto; }

/* the legend as tonal pills, per DESIGN §Badges */
.legend { gap: 0.5rem; margin: 1rem 0 0.75rem; align-items: center; }
.legend__item {
  padding: 0.2rem 0.6rem 0.2rem 0.5rem;
  border: 1px solid var(--outline-variant);
  border-radius: 999px;
  background: var(--surface-container-lowest);
  font-size: 0.72rem;
}

/* a branch: a self-contained card with a 4px status rail. Green by default;
 * amber when it still carries an unresolved blocking issue (which review.js
 * renders as a warn notice directly inside the section) */
.branch {
  margin: 1.25rem 0;
  border: 1px solid var(--outline-variant);
  border-left: 4px solid var(--ok);
  border-radius: var(--radius-lg);
  background: var(--surface-container-lowest);
  box-shadow: var(--lift);
  overflow: hidden;
}
.branch:has(> .notice[data-tone="warn"]),
.branch:has(> .notice[data-tone="error"]) { border-left-color: var(--warn); }

.branch h3 {
  margin: 0;
  padding: 0.85rem 1.1rem;
  background: var(--surface-container-low);
  border-bottom: 1px solid var(--outline-variant);
  font-size: 0.95rem;
}
.branch h3::before { content: none; }   /* the card rail replaces the inline bar */

/* blocking issues: full-bleed banners between the header and the grid */
.branch > .notice {
  margin: 0;
  border-width: 0 0 1px;
  border-left-width: 4px;
  border-radius: 0;
}

/* the grid fills the card - the card already supplies the frame */
.branch .grid__wrap {
  margin: 0;
  border: 0;
  border-radius: 0;
  max-height: 32rem;
}
.branch .grid thead th:first-child { border-left: 0; }
.branch .grid tbody .grid__cell:first-child { border-left: 0; }

/* an unmatched line is one the branch cannot be approved with - accent its
 * match cell so it reads at a glance, without fighting the dirty-row highlight */
.branch .grid__cell[data-match-status] { border-left: 3px solid var(--outline); }
.branch .grid__cell[data-match-status="Matched"]      { border-left-color: var(--ok); }
.branch .grid__cell[data-match-status="PartialMatch"] { border-left-color: var(--warn); }
.branch .grid__cell[data-match-status="NotFound"]     { border-left-color: var(--error); }

/* the pencil the template shows on a human-edited line (the row, not the cell -
 * grid.js tracks dirtiness per row) */
.grid__row[data-dirty="true"] .grid__cell:first-child { position: relative; }
.grid__row[data-dirty="true"] .grid__cell:first-child::after {
  content: "\270E";
  position: absolute;
  top: 0.1rem;
  right: 0.2rem;
  font-size: 0.6rem;
  line-height: 1;
  color: var(--warn);
  pointer-events: none;
}

/* ═══ home / system overview ═════════════════════════════════════════ */

/* the five workflows as a bento of link-cards - the product's front door,
 * per ui-spec §4 item 6 (they used to be stat tiles) */
.launchpad {
  display: grid;
  gap: 0.9rem;
  grid-template-columns: 1fr;
  align-items: start;          /* cards take their own height, not the row's */
  margin: 0.25rem 0 1.5rem;
}
@media (min-width: 40rem) { .launchpad { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 64rem) { .launchpad { grid-template-columns: repeat(3, 1fr); } }

.launchcard {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  min-height: 8rem;
  padding: 1.1rem 2.4rem 1.15rem 1.1rem;
  border: 1px solid var(--outline-variant);
  border-left: 4px solid var(--outline-variant);
  border-radius: var(--radius-lg);
  background: var(--surface-container-lowest);
  box-shadow: var(--lift);
  color: var(--on-surface);
  transition: border-color 0.12s ease, background-color 0.12s ease;
}
.launchcard:hover {
  text-decoration: none;
  border-color: var(--outline);
  border-left-color: var(--primary);
  background: var(--surface-container-low);
}
.launchcard:focus-visible { outline: 2px solid var(--info); outline-offset: 2px; }
@media (min-width: 40rem) { .launchcard--wide { grid-column: span 2; justify-content: center; } }

.launchcard__ico { flex: none; width: 1.5rem; height: 1.5rem; color: var(--primary); margin-bottom: 0.3rem; }
.launchcard__title { font-weight: 700; font-size: 0.95rem; }
.launchcard__desc { font-size: 0.8rem; color: var(--on-surface-variant); }
.launchcard::after {
  content: "\2192";
  position: absolute;
  top: 1.05rem;
  right: 1.1rem;
  color: var(--outline);
  transition: transform 0.12s ease, color 0.12s ease;
}
.launchcard:hover::after { color: var(--primary); transform: translateX(3px); }

/* config + health: operator diagnostics, below the divider (ui-spec §2.1) */
.diag { display: grid; gap: 1.5rem 2rem; grid-template-columns: 1fr; }
@media (min-width: 60rem) { .diag { grid-template-columns: minmax(0, 1.8fr) minmax(0, 1fr); } }
.diag__col { display: flex; flex-direction: column; gap: 0.5rem; min-width: 0; }
.diag__col h2 {
  margin: 0;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--on-surface-variant);
}
.diag__links { margin-top: 1.5rem; font-size: 0.8rem; color: var(--on-surface-variant); }

/* ═══ crew run status ═══════════════════════════════════════════════ */

/* the filter bar reads as a self-contained control panel, the twin of
 * review's #orderpicker - a select, a row cap, the auto-refresh toggle and
 * the "updated …" caption, which sits to the right. tracking.html's
 * #trackfilter is the same control, one extra toggle */
#runfilter,
#trackfilter,
#inboxfilter {
  align-items: flex-end;
  gap: 0.75rem 1rem;
  padding: 0.9rem 1rem;
  border: 1px solid var(--outline-variant);
  border-radius: var(--radius-lg);
  background: var(--surface-container-lowest);
  box-shadow: var(--lift);
}
#runfilter .field, #trackfilter .field, #inboxfilter .field { margin: 0; }
#runfilter #status { min-width: 12rem; }
#trackfilter #stage { min-width: 14rem; }
#runfilter #limit, #trackfilter #limit { width: 7rem; }
#runfilter #lastupdated,
#trackfilter #lastupdated,
#inboxfilter #lastupdated { margin-left: auto; align-self: center; }

/* the "Run queue" heading, over the card list */
.workarea > h2 { margin-top: 2rem; padding-bottom: 0.4rem; border-bottom: 1px solid var(--outline-variant); }

/* ═══ run cards (status) ═════════════════════════════════════════════ */
.runcard {
  border: 1px solid var(--outline-variant);
  border-left: 4px solid var(--outline);
  border-radius: var(--radius);
  background: var(--surface-container-lowest);
  margin: 0.75rem 0;
  box-shadow: var(--lift);
}
.runcard[data-run-status="COMPLETED"] { border-left-color: var(--ok); }
.runcard[data-run-status="FAILED"]    { border-left-color: var(--error); }
.runcard[data-run-status="QUEUED"]    { border-left-color: var(--info); }
.runcard[data-run-status="PARSING"],
.runcard[data-run-status="MATCHING"],
.runcard[data-run-status="FINALIZING"],
.runcard[data-run-status="POST_PROCESSING"] { border-left-color: var(--warn); }

.runcard__summary {
  cursor: pointer;
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: baseline;
  padding: 0.7rem 0.9rem;
}
.runcard__id { font-family: var(--mono); font-size: 0.8rem; }
.runcard__hint { flex: 1 1 8rem; font-weight: 600; }
.runcard__time, .runcard__duration { color: var(--on-surface-variant); font-size: 0.8rem; font-variant-numeric: tabular-nums; }
.runcard__section { margin: 0.75rem 0.9rem; }
.runcard__section h3 { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--on-surface-variant); margin-bottom: 0.35rem; }
.runcard .grid, .runcard .notice { margin: 0.75rem 0.9rem; max-width: 48rem; }

/* status badge - pill, coloured from data-run-status, glyph from CSS */
.runcard__status {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  padding: 0.15rem 0.5rem;
  border-radius: 999px;
  background: var(--surface-container-high);
  color: var(--on-surface-variant);
}
.runcard__status::before {
  content: "";
  display: inline-block;
  width: 0.45rem;
  height: 0.45rem;
  margin-right: 0.35rem;
  border-radius: 999px;
  background: currentColor;
  vertical-align: 0.02em;
}
.runcard__status[data-run-status="QUEUED"]          { background: var(--info-bg);  color: var(--info-ink); }
.runcard__status[data-run-status="PARSING"],
.runcard__status[data-run-status="MATCHING"],
.runcard__status[data-run-status="FINALIZING"],
.runcard__status[data-run-status="POST_PROCESSING"] { background: var(--warn-bg);  color: var(--warn-ink); }
.runcard__status[data-run-status="COMPLETED"]       { background: var(--ok-bg);    color: var(--ok-ink); }
.runcard__status[data-run-status="FAILED"]          { background: var(--error-bg); color: var(--error-ink); }
.runcard__duration[data-running="true"]::before { content: "\23F1\FE0F  "; }

/* ═══ tracking cards ═════════════════════════════════════════════════ */
.trackcard {
  border: 1px solid var(--outline-variant);
  border-left: 4px solid var(--outline);
  border-radius: var(--radius);
  background: var(--surface-container-lowest);
  margin: 0.75rem 0;
  box-shadow: var(--lift);
}
.trackcard__summary {
  cursor: pointer;
  display: grid;
  /* five children: name · position pill · progress · who · time */
  grid-template-columns: minmax(0, 2.2fr) auto minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 1fr);
  gap: 0.35rem 1rem;
  align-items: center;
  padding: 0.8rem 1rem;
}
.trackcard__who, .trackcard__time { text-align: right; overflow-wrap: anywhere; }
.trackcard__name { font-weight: 700; overflow-wrap: anywhere; }
.trackcard__progress, .trackcard__who, .trackcard__time { font-size: 0.78rem; color: var(--on-surface-variant); font-variant-numeric: tabular-nums; }
.trackcard .grid, .trackcard .notice, .trackcard__links { margin: 0.75rem 1rem; }

.trackcard__position {
  justify-self: start;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  padding: 0.2rem 0.55rem;
  border-radius: 999px;
  background: var(--surface-container-high);
  color: var(--on-surface-variant);
}
/* three bands: being prepared · with the machine · needs a person */
.trackcard[data-position="uploaded"]     .trackcard__position,
.trackcard[data-position="transforming"] .trackcard__position { background: var(--info-bg); color: var(--info-ink); }
.trackcard[data-position="prepared"]     .trackcard__position { background: var(--ok-bg); color: var(--ok-ink); }
.trackcard[data-position="submitted"]    .trackcard__position,
.trackcard[data-position="queued"]       .trackcard__position,
.trackcard[data-position="parsing"]      .trackcard__position { background: var(--warn-bg); color: var(--warn-ink); }
.trackcard[data-position="completed"]    .trackcard__position,
.trackcard[data-position="approved"]     .trackcard__position { background: var(--ok-bg); color: var(--ok-ink); }
.trackcard[data-position="review"]       .trackcard__position { background: var(--warn); color: #1b1b1d; }
.trackcard[data-position="failed"]       .trackcard__position { background: var(--error-bg); color: var(--error-ink); }
.trackcard[data-position="discarded"]    .trackcard__position { background: var(--surface-container-high); color: var(--outline); text-decoration: line-through; }
.trackcard[data-position="failed"] { border-left-color: var(--error); }
.trackcard[data-position="review"] { border-left-color: var(--warn); }
.trackcard[data-position="completed"], .trackcard[data-position="approved"], .trackcard[data-position="prepared"] { border-left-color: var(--ok); }

.grid__cell[data-review-state="unknown"] { color: var(--warn-ink); }

@media (max-width: 48rem) {
  .trackcard__summary { grid-template-columns: 1fr; gap: 0.35rem; }
  .trackcard__who, .trackcard__time { text-align: left; }
}

/* ═══ regions - Excel tables, detected page tables, drawn boxes ═══════ */
.filepanel { margin-bottom: 1.25rem; }
.sheet { margin: 1rem 0; }
.sheet__name {
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--on-surface-variant);
  margin: 1rem 0 0.5rem;
}

.region {
  border: 1px solid var(--outline-variant);
  border-left: 4px solid var(--outline-variant);
  border-radius: var(--radius);
  background: var(--surface-container-lowest);
  margin: 0.9rem 0;
  box-shadow: var(--lift);
  overflow: hidden;
}
.region[data-decision="undecided"] { border-left-color: var(--warn); }
.region[data-decision="accept"], .region[data-decided="true"] { border-left-color: var(--ok); }
.region[data-decision="dismiss"] { opacity: 0.55; border-left-color: var(--outline-variant); }
.region[data-region-source="detected"] { border-left-style: dashed; }
.region[data-current="true"] { outline: 2px solid var(--primary); outline-offset: -1px; }

.region__summary {
  cursor: pointer;
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  align-items: baseline;
  padding: 0.7rem 0.9rem;
  background: var(--surface-container-low);
  border-bottom: 1px solid var(--outline-variant);
}
.region__range { font-family: var(--mono); font-weight: 600; font-size: 0.82rem; }
.region__size { color: var(--on-surface-variant); font-size: 0.8rem; }
.region__decision { font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; color: var(--on-surface-variant); }
.region[data-decision="accept"] .region__decision { color: var(--ok-ink); }
.region[data-decision="dismiss"] .region__decision { color: var(--on-surface-variant); }
.region__warning[data-tone="warn"] { color: var(--warn-ink); font-size: 0.78rem; font-weight: 600; }
.region__warning[data-tone="warn"]::before { content: "\26A0  "; }

.region__decide { padding: 0.7rem 0.9rem 0; margin: 0; }
.region[data-decision="accept"] .region__accept,
.region[data-decision="dismiss"] .region__dismiss {
  background: var(--primary);
  color: var(--on-primary);
  border-color: var(--primary);
}
.region__mapping {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  align-items: end;
  padding: 0.7rem 0.9rem;
}
.region[data-region-source="drawn"] .region__mapping { border-top: 1px dashed var(--outline-variant); }
.region .field { margin: 0; min-width: 9rem; flex: 1 1 9rem; }
.region .field > span { display: block; }
.region__suggest { align-self: end; }

.region__preview { margin: 0.7rem 0.9rem; max-height: 24rem; }
.region__rows { margin: 0 0.9rem 0.9rem; }

/* ═══ row selection + grid editing (prepare) ════════════════════════ */
.rowselect__bar { align-items: center; font-size: 0.8rem; margin: 0.6rem 0; }
.rowselect__count { flex: 1 1 100%; }
.rowselect__cell { width: 2.5rem; text-align: center; }
.grid th.rowselect__cell { font-size: 0.58rem; }

.rowselect__toggle { accent-color: var(--primary); }
.grid__row[data-excluded="true"] { opacity: 0.45; }
.grid__row[data-excluded="true"] .rowselect__value { text-decoration: line-through; }

/* a resting cell is text; it becomes an <input> only while being retyped */
.rowselect__value { cursor: text; }
.rowselect__value:focus { outline: 2px solid var(--info); outline-offset: -2px; }
.rowselect__value[data-edited="true"] {
  background: var(--dirty-highlight);
  box-shadow: inset 3px 0 0 var(--warn);
}
.rowselect__input {
  width: 100%;
  border: 1px solid var(--info);
  border-radius: var(--radius-sm);
  padding: 0.15rem 0.3rem;
  background: var(--surface-container-lowest);
}

.rowselect__head { padding: 0; }
.rowselect__name {
  width: 100%;
  min-width: 4rem;
  border: 1px solid transparent;
  background: transparent;
  padding: 0.3rem 0.4rem;
  font-family: var(--font);
  font-size: 0.66rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--on-surface-variant);
}
.rowselect__name:hover { border-color: var(--outline-variant); }
.rowselect__name:focus { outline: none; border-color: var(--info); background: var(--surface-container-lowest); color: var(--on-surface); }
.rowselect__head[data-renamed="true"] { background: var(--dirty-highlight); }
.rowselect__head[data-renamed="true"] .rowselect__name { color: var(--warn-ink); }
.rowselect__promote { width: 100%; }

/* ═══ Transform / Clean - the task shell (prepare) ═════════════════ */
/* A focused, full-height work surface. Its own header (no global rail - the
 * only way out is back to the order), a vertical region rail, and a scrolling
 * work zone. Only prepare.html carries `.taskshell`; the block names are new
 * and additive, the same way submit.html's `.appshell` was. */
.taskshell {
  display: flex;
  flex-direction: column;
  height: 100vh;
  overflow: hidden;
  background: var(--surface-container-high);
}

/* ── the task header ────────────────────────────────────────────────── */
.taskbar {
  flex: none;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 1.25rem;
  height: 4rem;
  padding: 0 1.25rem;
  background: var(--surface-container-lowest);
  border-bottom: 1px solid var(--outline-variant);
}
.taskbar__back {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.4rem 0.7rem;
  border: 1px solid var(--outline-variant);
  border-radius: var(--radius);
  background: var(--surface-container-lowest);
  color: var(--on-surface-variant);
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  white-space: nowrap;
}
.taskbar__back:hover { background: var(--surface-container-high); color: var(--primary); text-decoration: none; }
.taskbar__ico { width: 1rem; height: 1rem; flex: none; }

.taskbar__titles { min-width: 0; }
.taskbar__titles h1 {
  font-size: 1.05rem;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.taskbar__actions { display: flex; align-items: center; gap: 1rem; min-width: 0; }
.taskbar__autosave {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.3rem 0.6rem;
  border: 1px solid var(--outline-variant);
  border-radius: var(--radius);
  background: var(--surface-container-low);
  color: var(--on-surface-variant);
  font-size: 0.68rem;
  font-weight: 600;
  white-space: nowrap;
}
.taskbar .userbar { border: 0; padding: 0; margin: 0; min-height: 0; flex-wrap: nowrap; min-width: 0; }
.taskbar .userbar__email { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 14rem; }

.taskshell__notices { flex: none; padding: 0.75rem 1.25rem; background: var(--surface-container-high); }
.taskshell__notices:empty { display: none; }
.taskshell__notices .notice { margin: 0; }
.taskshell__notices .notice + .notice { margin-top: 0.5rem; }

/* ── the two panes ─────────────────────────────────────────────────── */
.taskmain {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: 18rem minmax(0, 1fr);
}

/* ── the region rail ───────────────────────────────────────────────── */
.steprail {
  display: flex;
  flex-direction: column;
  min-height: 0;
  background: var(--surface-container-lowest);
  border-right: 1px solid var(--outline-variant);
}
.steprail__head {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.8rem 1rem;
  background: var(--surface-container-low);
  border-bottom: 1px solid var(--outline-variant);
}
.steprail__title {
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--on-surface-variant);
}
.steprail__count {
  font-family: var(--mono);
  font-size: 0.68rem;
  font-weight: 700;
  color: var(--on-surface-variant);
  background: var(--surface-container-high);
  padding: 0.1rem 0.4rem;
  border-radius: var(--radius-sm);
}
.steprail__count:empty { display: none; }

.steplist {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 0.4rem;
}
.steplist[data-state="empty"],
.steplist[data-state="error"] {
  padding: 1rem;
  color: var(--on-surface-variant);
  font-size: 0.82rem;
}
.steplist__items { display: flex; flex-direction: column; gap: 0.15rem; }

/* one rail row: a status left-rail from data-decided/data-decision, a status
 * dot from the same, and the primary rail for the current step */
.steplist__jump {
  width: 100%;
  justify-content: flex-start;
  gap: 0.5rem;
  text-align: left;
  padding: 0.55rem 0.6rem 0.55rem 0.75rem;
  border: 1px solid transparent;
  border-left: 3px solid var(--outline-variant);
  border-radius: 0 var(--radius) var(--radius) 0;
  background: transparent;
  color: var(--on-surface-variant);
  font-weight: 600;
  white-space: normal;
  overflow-wrap: anywhere;
}
.steplist__jump:hover:not(:disabled) { background: var(--surface-container-high); }
.steplist__jump::after {
  content: "";
  flex: none;
  width: 0.5rem;
  height: 0.5rem;
  margin-left: auto;
  border-radius: 999px;
  background: var(--outline-variant);
}
.steplist__item[data-decided="true"]  .steplist__jump { border-left-color: var(--ok); }
.steplist__item[data-decided="false"] .steplist__jump { border-left-color: var(--warn); }
.steplist__item[data-decided="true"]  .steplist__jump::after { background: var(--ok); }
.steplist__item[data-decided="false"] .steplist__jump::after { background: var(--warn); }
.steplist__item[data-decision="dismiss"] .steplist__jump {
  opacity: 0.5;
  border-left-color: var(--outline-variant);
  text-decoration: line-through;
}
.steplist__item[data-decision="dismiss"] .steplist__jump::after { background: var(--outline); }
.steplist__item[data-current="true"] .steplist__jump {
  background: var(--surface-container-high);
  border-color: var(--outline-variant);
  border-left-color: var(--primary);
  color: var(--primary);
  font-weight: 700;
}
.steplist__item[data-step="draw"] .steplist__jump {
  border-left-style: dashed;
  border-left-color: var(--info);
}
.steplist__item[data-step="draw"] .steplist__jump::after {
  content: "\270E";
  width: auto;
  height: auto;
  background: none;
  color: var(--info);
  font-size: 0.8rem;
}

/* ── the work zone ─────────────────────────────────────────────────── */
.workzone {
  min-height: 0;
  overflow-y: auto;
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
}
.workzone__intro {
  margin-bottom: 0.75rem;
  max-width: 64ch;
  font-size: 0.82rem;
  color: var(--on-surface-variant);
}
.workzone__intro:empty { display: none; }
.workzone > #panel { flex: 1; }
.workzone > #chooser { margin: 0.5rem 0 1rem; }

.stepper {
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin: 0.5rem 0;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--outline-variant);
  border-radius: var(--radius);
  background: var(--surface-container-low);
}
.stepper__status { flex: 1 1 auto; text-align: center; }

.donebar {
  margin-top: 1.25rem;
  padding: 0.85rem 1rem;
  border: 1px solid var(--outline-variant);
  border-left: 3px solid var(--primary);
  border-radius: var(--radius);
  background: var(--surface-container-lowest);
  box-shadow: var(--lift);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1rem;
}
.donebar > button {
  background: var(--primary);
  color: var(--on-primary);
  border-color: var(--primary);
  padding: 0.6rem 1.1rem;
}
.donebar > button:hover:not(:disabled) { background: var(--primary-hover); }
.donebar__status { flex: 1 1 12rem; }

/* the region editor sits directly in the work zone here, not in a page column */
.workzone #panel > .notice:first-child { margin-top: 0; }
.workzone .region { margin: 0.75rem 0; }
.workzone .region:first-of-type { margin-top: 0.25rem; }

/* the decision pill in a region summary - "Reviewing" until it is decided */
.region__decision {
  padding: 0.12rem 0.5rem;
  border-radius: 999px;
  background: var(--surface-container-high);
}
.region[data-decision="undecided"] .region__decision::after { content: "Reviewing"; }
.region[data-decision="undecided"] .region__decision { background: var(--warn-bg); color: var(--warn-ink); }
.region[data-decision="accept"] .region__decision  { background: var(--ok-bg); color: var(--ok-ink); }
.region[data-decision="dismiss"] .region__decision { background: var(--surface-container-high); color: var(--on-surface-variant); }

/* the column mapping reads as a sunk "schema" panel, per DESIGN §Elevation */
.region__mapping {
  background: var(--surface-container-low);
  border-top: 1px solid var(--outline-variant);
}
.region[data-region-source="drawn"] .region__mapping { border-top: 1px dashed var(--outline-variant); }

/* the grid's own inputs render as the text they stand in for. The shared
 * `input[type="text"]` and `.grid__cell input` rules out-specify the base
 * `.rowselect__*` rules, so the name box needs winning back here - scoped to
 * the region grid, so review's editable grid is untouched. */
.rowselect__head .rowselect__name {
  border-color: transparent;
  background: transparent;
  padding: 0.3rem 0.4rem;
  box-shadow: none;
}
.rowselect__head .rowselect__name:hover { border-color: var(--outline-variant); }
.rowselect__head .rowselect__name:focus {
  border-color: var(--info);
  background: var(--surface-container-lowest);
  color: var(--on-surface);
}
.rowselect__head[data-renamed="true"] .rowselect__name { color: var(--warn-ink); }
.rowselect__value .rowselect__input {
  border: 1px solid var(--info);
  background: var(--surface-container-lowest);
  box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.18);
  padding: 0.15rem 0.3rem;
}

/* an edited cell gets the amber pencil the template shows, on top of the
 * dirty-highlight it already carries */
.rowselect__value[data-edited="true"] { position: relative; }
.rowselect__value[data-edited="true"]::after {
  content: "\270E";
  position: absolute;
  top: 0.05rem;
  right: 0.2rem;
  font-size: 0.6rem;
  line-height: 1;
  color: var(--warn);
  pointer-events: none;
}

/* wide screens: the page and the region read off it, side by side, with the
 * page image sticky while the grid scrolls. `:has()` keeps it to the page
 * whose region is the current step - in the drawing step every page is full
 * width again, because that is the surface a new box is dragged on. */
@media (min-width: 80rem) {
  .workzone .sheet[data-page-section]:has(.region:not([hidden])) {
    display: grid;
    grid-template-columns: minmax(0, 22rem) minmax(0, 1fr);
    gap: 0.5rem 1.75rem;
    align-items: start;
  }
  .workzone .sheet[data-page-section]:has(.region:not([hidden])) > .pagebox {
    grid-column: 1;
    grid-row: 1 / 999;
    position: sticky;
    top: 0;
    align-self: start;
    margin: 0.5rem 0 0;
  }
  .workzone .sheet[data-page-section]:has(.region:not([hidden])) > .pagebox__label,
  .workzone .sheet[data-page-section]:has(.region:not([hidden])) > .regionlist,
  .workzone .sheet[data-page-section]:has(.region:not([hidden])) > .boxlist {
    grid-column: 2;
  }
}

/* narrow: the rail becomes a capped strip above the work zone */
@media (max-width: 60rem) {
  .taskmain { grid-template-columns: 1fr; grid-template-rows: auto minmax(0, 1fr); }
  .steprail { border-right: 0; border-bottom: 1px solid var(--outline-variant); max-height: 13rem; }
  .taskbar { grid-template-columns: auto 1fr; height: auto; padding: 0.6rem 1rem; gap: 0.5rem 1rem; }
  .taskbar__actions { grid-column: 1 / -1; justify-content: space-between; }
  .taskbar__autosave { display: none; }
  .workzone { padding: 1rem; }
}

/* ═══ page canvas (prepare - PDF / image) ═══════════════════════════ */
.pagebox {
  position: relative;
  display: block;
  max-width: 100%;
  margin: 1rem 0;
  border: 1px solid var(--outline-variant);
  border-radius: var(--radius);
  background: var(--surface-container-lowest);
  overflow: hidden;
}
.pagebox[data-boxes="0"][data-detected="0"] { border-style: dashed; }
.pagebox__image { display: block; width: 100%; height: auto; }
.pagebox__canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  cursor: crosshair;
  /* a drag on a touchscreen must draw, not scroll */
  touch-action: none;

  /* the canvas palette - pdfCanvas.js reads these, since a <canvas> cannot be
   * styled by CSS. Amber = a box somebody drew; blue = a table the server
   * found; grey = one that was refused but kept visible. */
  --box-stroke: #d97706;
  --box-fill: rgba(245, 158, 11, 0.16);
  --detected-stroke: #2563eb;
  --detected-fill: rgba(37, 99, 235, 0.12);
  --dismissed-stroke: #9ca3af;
}
.pagebox__label {
  display: flex;
  gap: 0.6rem;
  align-items: baseline;
  flex-wrap: wrap;
  margin: 0.75rem 0 0.35rem;
  font-size: 0.85rem;
  font-weight: 600;
}

.regionlist { display: grid; gap: 0.4rem; margin: 0.5rem 0 0.75rem; }
.regionlist[data-state="empty"] { color: var(--on-surface-variant); font-size: 0.82rem; }

.boxlist { display: grid; gap: 0.35rem; margin: 0.4rem 0 1rem; }
.boxlist[data-state="empty"] { display: none; }
.boxlist__item { display: flex; gap: 0.6rem; align-items: baseline; font-size: 0.82rem; }
.boxlist__label { font-weight: 700; }
.boxlist__coords { color: var(--on-surface-variant); font-family: var(--mono); font-size: 0.75rem; }

/* the page a region belongs to - hidden by prepare.js when another is current */
.sheet[data-page-section][hidden] { display: none; }

/* ═══ universal state channel ══════════════════════════════════════ */
@keyframes so-pulse { 0%, 100% { opacity: 0.55; } 50% { opacity: 0.85; } }
[data-state="loading"], [data-state="busy"] {
  animation: so-pulse 1.4s ease-in-out infinite;
  pointer-events: none;
  cursor: progress;
}
[data-state="empty"] { color: var(--on-surface-variant); font-style: italic; }
[data-state="error"] { border-color: var(--error); }

[hidden] { display: none !important; }

/* value colours reused outside a grid cell (kept from the contract) */
[data-match-status="Matched"]      { color: var(--ok-ink); }
[data-match-status="PartialMatch"] { color: var(--warn-ink); }
[data-match-status="NotFound"]     { color: var(--error-ink); }

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

/* ═══════════════════════════════════════════════════════════════════
   Data refresh  (sync.html)

   Two new blocks and two data-* channels. `.syncrow` is one target's
   progress during a live job; `.synccard` is one past job in the history.
   Appearance stays here: sync.js writes `data-sync-state` / `data-sync-status`
   and the width of the fill, and nothing else.
   ═══════════════════════════════════════════════════════════════════ */

.card__note {
  margin: 0;
  font-size: 0.78rem;
  line-height: 1.5;
  color: var(--on-surface-variant);
}
.card__note code { font-family: var(--mono); font-size: 0.92em; }

.field__check {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.82rem;
  font-weight: 500;
  padding: 0.15rem 0;
  cursor: pointer;
}
.field__check input { margin: 0; }

/* ── one target's progress ── */

.syncrow {
  display: grid;
  grid-template-columns: 10rem 1fr;
  grid-template-areas: "label bar" "label meta";
  gap: 0.2rem 0.75rem;
  align-items: center;
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--outline-variant);
}
.syncrow:last-child { border-bottom: 0; }

.syncrow__label {
  grid-area: label;
  font-size: 0.82rem;
  font-weight: 600;
}

.syncrow__bar {
  grid-area: bar;
  height: 6px;
  border-radius: var(--radius-sm);
  background: var(--surface-container-high);
  overflow: hidden;
}

.syncrow__fill {
  height: 100%;
  background: var(--outline);
  border-radius: inherit;
  transition: width 0.4s ease;
}

.syncrow__meta {
  grid-area: meta;
  font-size: 0.74rem;
  font-variant-numeric: tabular-nums;
  color: var(--on-surface-variant);
}

.syncrow[data-sync-state="running"] .syncrow__fill { background: var(--info); }
.syncrow[data-sync-state="done"]    .syncrow__fill { background: var(--ok); }
.syncrow[data-sync-state="failed"]  .syncrow__fill { background: var(--error); }
.syncrow[data-sync-state="failed"]  .syncrow__meta { color: var(--error-ink); }
.syncrow[data-sync-state="queued"]  .syncrow__label { color: var(--on-surface-variant); }

/* A running bar with no percentage yet (fetching from BC) still has to look
   alive, or an eight-minute fetch reads as a hang. */
.syncrow[data-sync-state="running"] .syncrow__fill[style*="width:0%"] {
  width: 100% !important;
  opacity: 0.35;
  animation: syncpulse 1.6s ease-in-out infinite;
}
@keyframes syncpulse { 50% { opacity: 0.12; } }

/* ── one past job ── */

.synccard {
  border: 1px solid var(--outline-variant);
  border-left: 4px solid var(--outline);
  border-radius: var(--radius);
  background: var(--surface-container-lowest);
  padding: 0.75rem 1rem;
  margin-bottom: 0.6rem;
  box-shadow: var(--lift);
}
.synccard[data-sync-status="COMPLETED"] { border-left-color: var(--ok); }
.synccard[data-sync-status="FAILED"]    { border-left-color: var(--error); }
.synccard[data-sync-status="RUNNING"]   { border-left-color: var(--info); }
.synccard[data-sync-status="QUEUED"]    { border-left-color: var(--outline); }

.synccard__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.75rem;
  margin-bottom: 0.4rem;
}
.synccard__status {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.06em;
}
.synccard[data-sync-status="COMPLETED"] .synccard__status { color: var(--ok-ink); }
.synccard[data-sync-status="FAILED"]    .synccard__status { color: var(--error-ink); }
.synccard[data-sync-status="RUNNING"]   .synccard__status { color: var(--info-ink); }

.synccard__when,
.synccard__by,
.synccard__dur {
  font-size: 0.74rem;
  color: var(--on-surface-variant);
  font-variant-numeric: tabular-nums;
}
.synccard__dur { margin-left: auto; }

.synccard__lines {
  margin: 0;
  padding-left: 1.1rem;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}
.synccard__lines li {
  font-size: 0.76rem;
  font-variant-numeric: tabular-nums;
  color: var(--on-surface-variant);
}

.synccard__error {
  margin: 0.5rem 0 0;
  font-size: 0.76rem;
  color: var(--error-ink);
}

@media (min-width: 900px) {
  #triggercard, #activecard { min-width: 0; }
  .workarea .bento:has(#activecard:not([hidden])) {
    grid-template-columns: 1fr 1fr;
  }
}

/* ── presales (docs/dom-contract.md 2026-09-20) ────────────────────────
 * Three columns: the category picker, the live item list, the detail panel.
 * One column on a narrow viewport - the picker and the list are both usable
 * stacked, and the detail panel only matters once something is selected.
 */
.presales {
  display: grid;
  gap: 1.25rem;
  grid-template-columns: 1fr;
}
@media (min-width: 60rem) {
  .presales {
    grid-template-columns: minmax(0, 14rem) minmax(0, 1.5fr) minmax(0, 1fr);
    align-items: start;
  }
}

.catlist {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  border: 1px solid var(--outline-variant);
  border-radius: var(--radius-lg);
  background: var(--surface-container-lowest);
  box-shadow: var(--lift);
  padding: 0.6rem;
}
.catlist__group { display: flex; flex-direction: column; }
.catlist__item {
  display: block;
  width: 100%;
  text-align: left;
  border: none;
  background: none;
  border-radius: var(--radius-sm);
  padding: 0.45rem 0.6rem;
  font: inherit;
  font-size: 0.88rem;
  color: var(--on-surface);
  cursor: pointer;
}
.catlist__item:hover { background: var(--surface-container-low); }
.catlist__item[data-selected="true"] {
  background: var(--primary);
  color: var(--on-primary);
}
.catlist__item[data-level="sub"] {
  padding-left: 1.5rem;
  font-size: 0.82rem;
  color: var(--on-surface-variant);
}
.catlist__item[data-level="sub"][data-selected="true"] { color: var(--on-primary); }
.catlist__sub {
  display: flex;
  flex-direction: column;
  gap: 0.05rem;
  margin: 0.1rem 0 0.35rem;
}
.catlist__sub[data-state="collapsed"] { display: none; }

.itemlist__col {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  min-width: 0;
}
.itemlist__head input {
  width: 100%;
  border: 1px solid var(--outline-variant);
  border-radius: var(--radius);
  padding: 0.5rem 0.75rem;
  font: inherit;
  background: var(--surface-container-lowest);
  color: var(--on-surface);
}
.itemlist {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  max-height: 72vh;
  overflow-y: auto;
}
.itemlist__hint {
  color: var(--on-surface-variant);
  padding: 0.75rem;
  font-size: 0.88rem;
}
.itemcard {
  border: 1px solid var(--outline-variant);
  border-radius: var(--radius);
  background: var(--surface-container-lowest);
  padding: 0.6rem 0.8rem;
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  cursor: pointer;
}
.itemcard:hover { background: var(--surface-container-low); }
.itemcard[data-selected="true"] {
  border-color: var(--primary);
  box-shadow: 0 0 0 1px var(--primary);
}
.itemcard__title { font-weight: 600; font-size: 0.92rem; }
.itemcard__meta, .itemcard__isbn, .itemcard__sales {
  font-size: 0.78rem;
  color: var(--on-surface-variant);
  font-variant-numeric: tabular-nums;
}
.itemcard__sales { color: var(--ok-ink); }

.itemgroup { list-style: none; }
.itemgroup__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.5rem 0.6rem;
  border: 1px solid var(--outline-variant);
  border-radius: var(--radius);
  background: var(--surface-container-low);
  font-size: 0.86rem;
  font-weight: 600;
  cursor: pointer;
}
.itemgroup__header:hover { background: var(--surface-container); }
.itemgroup__count { font-weight: 400; color: var(--on-surface-variant); }
.itemgroup__items {
  list-style: none;
  margin: 0.4rem 0 0 0;
  padding: 0 0 0 0.4rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.insight {
  border: 1px solid var(--outline-variant);
  border-radius: var(--radius-lg);
  background: var(--surface-container-lowest);
  box-shadow: var(--lift);
  padding: 1rem;
  min-width: 0;
}
.insight__head h2 { margin: 0 0 0.5rem; font-size: 1.05rem; }
.insight__body p {
  margin: 0.25rem 0;
  font-size: 0.88rem;
  color: var(--on-surface-variant);
}

/* ── presales: the read, the comparison, the notes ─────────────────────
 * docs/presales-plan.md §8, dom-contract 2026-09-21. Phases 4-6 render into
 * the SAME `.insight` panel phase 3 introduced - one book selected shows its
 * read, a second flips the panel to `.compare` - so there is nothing here
 * that competes with it for the third column.
 *
 * `data-insight-state` (empty | idle | ready) and `data-grounded`
 * (true | false | unknown) are the state channels. Grounding is the one that
 * matters: Google Books' coverage of Indian school guides is patchy, and an
 * unverified read must never look like a verified one. The server already
 * puts that sentence in `caveats` as a `warn` notice - the rail below is the
 * same fact said in colour, not instead of it.
 */

/* The primary action on this page, alongside the submit gate and approve. */
#readbtn, #comparebtn {
  background: var(--primary);
  color: var(--on-primary);
  border-color: var(--primary);
}
#readbtn:hover:not(:disabled),
#comparebtn:hover:not(:disabled) { background: var(--primary-hover); }

.insight[data-grounded="false"] { border-left: 4px solid var(--warn); }
.insight[data-grounded="true"] { border-left: 4px solid var(--ok); }

.insight__meta {
  margin: 0.1rem 0;
  font-size: 0.78rem;
  color: var(--on-surface-variant);
  font-variant-numeric: tabular-nums;
}
.insight__summary { margin: 0 0 0.75rem; font-size: 0.9rem; }
.insight__stamp {
  font-size: 0.72rem;
  color: var(--on-surface-variant);
  margin: 0.4rem 0 0;
}
.insight__head .toolbar { margin-top: 0.6rem; flex-wrap: wrap; }
.insight__body h3, .painpoints h3, .altlist h3, #notesblock h3 {
  margin: 0.9rem 0 0.35rem;
  font-size: 0.76rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--on-surface-variant);
}

/* Strengths and weaknesses, side by side - the shape the judgement is in. */
.proscons {
  display: grid;
  gap: 0.75rem;
  grid-template-columns: 1fr;
}
@media (min-width: 44rem) {
  .proscons { grid-template-columns: 1fr 1fr; }
}
.proscons__col ul, .painpoints ul {
  margin: 0;
  padding-left: 1.1rem;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.proscons__item, .painpoints li { font-size: 0.84rem; }
.proscons__col:first-child .proscons__item::marker { color: var(--ok); }
.proscons__col:last-child .proscons__item::marker { color: var(--warn); }
.painpoints li::marker { color: var(--error); }

/* Alternatives - every one of these is a real SKU, checked server-side. */
.altlist { display: flex; flex-direction: column; gap: 0.4rem; }
.altlist:empty { display: none; }
.altlist__pick {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  border: 1px solid var(--outline-variant);
  border-left: 3px solid var(--info);
  border-radius: var(--radius);
  background: var(--surface-container-lowest);
  padding: 0.5rem 0.7rem;
}
.altlist__title { font-weight: 600; font-size: 0.86rem; }
.altlist__meta {
  font-size: 0.74rem;
  color: var(--on-surface-variant);
  font-variant-numeric: tabular-nums;
}
.altlist__reason { font-size: 0.82rem; margin-top: 0.15rem; }

/* ── compare ─────────────────────────────────────────────────────────── */
.compare { display: flex; flex-direction: column; gap: 0.6rem; }
.compare__cols {
  display: grid;
  gap: 0.6rem;
  grid-template-columns: 1fr 1fr;
}
.compare__col {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  border: 1px solid var(--outline-variant);
  border-radius: var(--radius);
  background: var(--surface-container-lowest);
  padding: 0.5rem 0.7rem;
  min-width: 0;
}
/* The winner, when there is one. `data-verdict="false"` is the ordinary
 * state, not a loss - a comparison that ends "it depends" leaves both here. */
.compare__col[data-verdict="true"] {
  border-color: var(--ok);
  box-shadow: 0 0 0 1px var(--ok);
}
.compare__label {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--on-surface-variant);
}
.compare__verdict {
  border-left: 3px solid var(--outline-variant);
  padding: 0.4rem 0 0.4rem 0.7rem;
  font-size: 0.86rem;
}
.compare__verdict[data-decided="true"] { border-left-color: var(--ok); }
.compare__verdict p { margin: 0.25rem 0 0; color: var(--on-surface-variant); }
.compare__dim {
  display: grid;
  grid-template-columns: minmax(0, 8rem) 1fr 1fr;
  gap: 0.5rem;
  padding: 0.35rem 0;
  border-top: 1px solid var(--outline-variant);
  font-size: 0.8rem;
}
.compare__dimname { font-weight: 600; color: var(--on-surface-variant); }
.compare__dim[data-favours="a"] .compare__dimval:nth-of-type(1),
.compare__dim[data-favours="b"] .compare__dimval:nth-of-type(2) {
  font-weight: 600;
  color: var(--ok-ink);
}
.compare__clear { margin-left: auto; }

/* An item card now carries which SLOT it occupies, not a boolean. */
.itemcard[data-selected="a"], .itemcard[data-selected="b"] {
  border-color: var(--primary);
  box-shadow: 0 0 0 1px var(--primary);
}
.itemcard[data-selected="b"] { border-left: 4px solid var(--info); }

/* ── notes: the human half of the loop ───────────────────────────────── */
.notelist { display: flex; flex-direction: column; gap: 0.4rem; }
.notelist__editor { display: flex; flex-direction: column; gap: 0.4rem; }
.notelist__input {
  width: 100%;
  border: 1px solid var(--outline-variant);
  border-radius: var(--radius);
  padding: 0.5rem 0.7rem;
  background: var(--surface-container-lowest);
  color: var(--on-surface);
  resize: vertical;
}
.notelist__add { align-self: flex-start; }
.notelist__note {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  border: 1px solid var(--outline-variant);
  border-radius: var(--radius);
  background: var(--surface-container-low);
  padding: 0.45rem 0.65rem;
  position: relative;
}
.notelist__author {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--on-surface-variant);
}
.notelist__body { margin: 0; font-size: 0.84rem; white-space: pre-wrap; }
.notelist__delete {
  position: absolute;
  top: 0.35rem;
  right: 0.4rem;
  padding: 0.15rem 0.4rem;
  font-size: 0.68rem;
  font-weight: 500;
  border: none;
  background: none;
  color: var(--on-surface-variant);
}
.notelist__delete:hover:not(:disabled) {
  background: var(--error-bg);
  color: var(--error-ink);
}

/* ═══ inbox: emailed orders waiting to be started ═════════════════════
 * The peer of .trackcard and .runcard - an outlined card with a 4px status
 * rail on the left. `data-inbound-status` is the state channel and every
 * colour is here, never in inbox.js, exactly as `data-run-status` works. */
.maillist { display: grid; gap: 0.75rem; margin: 0.75rem 0; }

.mailcard {
  border: 1px solid var(--outline-variant);
  border-left: 4px solid var(--outline);
  border-radius: var(--radius);
  background: var(--surface-container-lowest);
  padding: 0.9rem 1rem;
  box-shadow: var(--lift);
}
.mailcard[data-state="busy"] { opacity: 0.6; pointer-events: none; }

.mailcard__head {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 1rem;
  align-items: baseline;
  justify-content: space-between;
}
.mailcard__subject { font-weight: 700; overflow-wrap: anywhere; }
.mailcard__state {
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 0.15rem 0.5rem;
  border-radius: 999px;
  background: var(--surface-container-high);
  color: var(--on-surface-variant);
  white-space: nowrap;
}

.mailcard__from {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1rem;
  justify-content: space-between;
  margin: 0.4rem 0 0;
  font-size: 0.8rem;
  color: var(--on-surface-variant);
}
.mailcard__who { overflow-wrap: anywhere; }
.mailcard__when { font-variant-numeric: tabular-nums; white-space: nowrap; }

.mailcard__body {
  margin: 0.6rem 0 0;
  font-size: 0.85rem;
  color: var(--on-surface-variant);
  /* A preview, not the email. Three lines is enough to recognise an order
   * without the card becoming the thing you read it in. */
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  white-space: pre-wrap;
}

.mailcard__files {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem 0.75rem;
  margin: 0.6rem 0 0;
  font-size: 0.78rem;
  color: var(--on-surface-variant);
}
/* A skipped attachment is stated, never hidden: this service never writes to
 * the mailbox, so this line is the only place it is recorded at all. */
.mailcard__skipped {
  padding: 0.1rem 0.45rem;
  border-radius: var(--radius-sm, 4px);
  background: var(--warn-bg);
  color: var(--warn-ink);
}
.mailcard__error {
  margin: 0.6rem 0 0;
  padding: 0.45rem 0.6rem;
  border-radius: var(--radius-sm, 4px);
  background: var(--error-bg);
  color: var(--error-ink);
  font-size: 0.8rem;
  overflow-wrap: anywhere;
}

.mailcard__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
  margin-top: 0.8rem;
}
.mailcard__run { font-size: 0.8rem; margin-left: auto; }

/* The rail and the pill, from the one state attribute. */
.mailcard[data-inbound-status="QUEUED"],
.mailcard[data-inbound-status="FETCHING"] { border-left-color: var(--info, var(--outline)); }
.mailcard[data-inbound-status="QUEUED"]   .mailcard__state,
.mailcard[data-inbound-status="FETCHING"] .mailcard__state { background: var(--info-bg); color: var(--info-ink); }

.mailcard[data-inbound-status="READY"] { border-left-color: var(--ok, var(--outline)); }
.mailcard[data-inbound-status="READY"] .mailcard__state { background: var(--ok-bg); color: var(--ok-ink); }

/* Not an error - a body-only order is a real order - but it does need
 * somebody to look at it before it can become anything. */
.mailcard[data-inbound-status="NO_ATTACHMENT"] { border-left-color: var(--warn); }
.mailcard[data-inbound-status="NO_ATTACHMENT"] .mailcard__state { background: var(--warn-bg); color: var(--warn-ink); }

.mailcard[data-inbound-status="FAILED"] { border-left-color: var(--error); }
.mailcard[data-inbound-status="FAILED"] .mailcard__state { background: var(--error-bg); color: var(--error-ink); }

.mailcard[data-inbound-status="SUBMITTED"] { border-left-color: var(--outline-variant); opacity: 0.75; }