/* BethOps — Assumption Fine Foods brand. One stylesheet, no frameworks.
   System (from design/bethops-mockup.html): white ground, caramel voice,
   near-black data ink, hairline separation, pill buttons, self-hosted Inter.
   Design bar: a stand-in who has never seen the app knows what to do in 5s. */

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

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/inter-600.woff2) format('woff2');
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/inter-700.woff2) format('woff2');
}

/* Playfair Display — echoes their serif wordmark. Display headings only;
   Inter carries all data, nav and labels. One variable file, 500–800. */
@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 500 800;
  font-display: swap;
  src: url(/playfair-display.woff2) format('woff2');
}

:root {
  --paper: #ffffff;
  --caramel: #a87b4f;
  --caramel-deep: #87613b;
  --espresso: #4e3b26;
  --caramel-wash: #fbf7f2;
  --ink: #1e1a15;
  --ink-2: #4a4136;
  --near-black: #161412;
  --muted: #8a7b64;
  --faint: #a3937c;
  --cream: #f2eee1;
  --hairline: #ece7de;
  --hairline-2: #f3efe8;
  --field-border: #ded4c4;
  --ok: #2f6b3a;
  --alert: #a23b32;
  --r-pill: 999px;
  --font: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-display: 'Playfair Display', Georgia, 'Times New Roman', serif;
}

* {
  box-sizing: border-box;
}

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

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3 {
  margin: 0;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--caramel);
  text-wrap: balance;
}

::selection {
  background: var(--caramel);
  color: var(--cream);
}

:focus-visible {
  outline: 2px solid var(--caramel);
  outline-offset: 3px;
  border-radius: 4px;
}

/* inline SVG icons render at the size their wrapper sets */
svg.ic {
  width: 16px;
  height: 16px;
  display: inline-block;
  vertical-align: -0.18em;
  flex: none;
}

/* author display rules would beat the UA [hidden] default — restate it */
[hidden] {
  display: none !important;
}

/* ===== display headings — Playfair, echoing their serif wordmark =====
   Applied only to display type; nav, labels, data stay Inter. Serifs want
   normal tracking, so these override the tight -0.02em Inter heading default. */
.page-title,
.readback,
.dz-title,
.login-card h1,
.metric .v {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: normal;
}

/* ===== chrome ===== */

/* header — their logo, plain-text caramel nav, thin underline on active */
.topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 44px;
  padding: 20px 40px;
  background: var(--paper);
  background: color-mix(in srgb, var(--paper) 92%, transparent);
  backdrop-filter: saturate(1.2) blur(8px);
  border-bottom: 1px solid var(--hairline);
}

.brand {
  display: block;
  line-height: 0;
  text-decoration: none;
}

.logo {
  height: 28px;
  width: auto;
  display: block;
}

.topbar nav {
  display: flex;
  gap: 30px;
  flex: 1;
}

.topbar nav a {
  color: var(--muted);
  text-decoration: none;
  font-weight: 600;
  font-size: 15px;
  padding: 2px 0;
  position: relative;
}

.topbar nav a:hover {
  color: var(--caramel-deep);
}

.topbar nav a.active {
  color: var(--caramel-deep);
}

.topbar nav a.active::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -6px;
  height: 1.5px;
  background: var(--caramel);
}

.signout-form {
  display: inline;
}

/* a button (logout is a POST), styled to sit quietly like a link */
.signout {
  color: var(--faint);
  font-size: 14px;
  font-weight: 600;
  font-family: inherit;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}

.signout:hover {
  color: var(--caramel-deep);
}

.page {
  max-width: 900px;
  margin: 0 auto;
  padding: 44px 40px 90px;
}

.page-title {
  font-size: 34px;
  letter-spacing: -0.03em;
  margin: 0 0 6px;
}

.empty {
  color: var(--muted);
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
  padding: 26px 0;
}

/* small uppercase section label */
.label {
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 6px;
}

/* quiet state markers (replace the old colored chips) */
.mark {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  white-space: nowrap;
}

.mark.accent {
  color: var(--caramel-deep);
}

.mark.ok {
  color: var(--ok);
}

.mark svg.ic {
  width: 12px;
  height: 12px;
}

/* ===== buttons — their pill CTA ===== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  font-family: inherit;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0.01em;
  padding: 12px 26px;
  border-radius: var(--r-pill);
  border: 1.5px solid var(--field-border);
  background: transparent;
  color: var(--caramel-deep);
  cursor: pointer;
  text-decoration: none;
  text-align: center;
  transition: background 0.16s, color 0.16s, border-color 0.16s, transform 0.05s;
  white-space: nowrap;
}

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

.btn:active {
  transform: translateY(1px);
}

.btn.primary {
  background: var(--caramel);
  border-color: transparent;
  color: var(--cream);
}

.btn.primary:hover {
  background: var(--caramel-deep);
  border-color: transparent;
}

.btn.dark {
  background: var(--near-black);
  border-color: transparent;
  color: var(--cream);
}

.btn.dark:hover {
  background: #000;
}

.btn:disabled,
.btn.primary:disabled {
  background: transparent;
  border-color: var(--hairline);
  color: var(--faint);
  cursor: not-allowed;
  transform: none;
}

.btn.big {
  font-size: 16px;
  padding: 15px 34px;
}

.btn.sm {
  font-size: 13px;
  padding: 6px 16px;
}

.btn.wide {
  width: 100%;
}

/* ===== fields — underline style, like the mockup ===== */

.field-grid input,
.field-grid select,
.field-row input,
.field-row select,
.link-existing select,
.login-card input {
  display: block;
  width: 100%;
  font-family: inherit;
  font-size: 15px;
  color: var(--ink);
  background: var(--paper);
  border: 0;
  border-bottom: 1.5px solid var(--field-border);
  border-radius: 0;
  padding: 8px 2px;
  margin-top: 4px;
}

.field-grid input:focus,
.field-grid select:focus,
.field-row input:focus,
.field-row select:focus,
.link-existing select:focus,
.login-card input:focus,
input.filter:focus {
  outline: none;
  border-bottom-color: var(--caramel);
}

.field-grid select,
.field-row select,
.link-existing select {
  appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%239A8B76' stroke-width='2.2' stroke-linecap='round'><path d='M6 9l6 6 6-6'/></svg>");
  background-repeat: no-repeat;
  background-position: right 2px center;
  padding-right: 26px;
}

.field-grid label,
.field-row label,
.link-existing label,
.login-card label {
  display: block;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

.field-grid label.check,
label.check {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--ink-2);
  font-size: 14.5px;
  letter-spacing: normal;
  text-transform: none;
}

.field-grid label.check input,
label.check input {
  width: auto;
  margin: 0;
}

input[type='checkbox'],
input[type='radio'] {
  accent-color: var(--caramel);
}

.field-row {
  display: flex;
  gap: 18px;
  align-items: flex-end;
  flex-wrap: wrap;
}

.field-row label {
  min-width: 120px;
}

.field-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px 24px;
  max-width: 560px;
  margin-bottom: 20px;
}

.field-grid .span2 {
  grid-column: span 2;
}

.hint {
  color: var(--faint);
  font-size: 13px;
  margin: 4px 0 12px;
}

/* ===== login ===== */

.bare .page {
  max-width: 460px;
}

.login-card {
  margin-top: 9vh;
  padding-top: 34px;
  border-top: 1px solid var(--hairline);
}

.bare .login-card {
  border-top: 0;
  padding-top: 0;
}

.login-card .logo {
  height: 34px;
  margin-bottom: 30px;
}

.login-card h1 {
  font-size: 30px;
  margin: 0 0 6px;
}

.login-card .sub {
  color: var(--muted);
  margin: 0 0 30px;
}

.login-card label {
  margin: 0 0 2px;
}

.login-card input {
  margin: 0 0 26px;
}

.form-error {
  color: var(--alert);
  font-weight: 600;
  font-size: 14.5px;
  margin: 10px 0 0;
}

/* ===== drop zone ===== */

.dropzone {
  border: 1.5px dashed var(--field-border);
  border-radius: 4px;
  padding: 80px 30px;
  text-align: center;
  cursor: pointer;
  margin-bottom: 56px;
  transition: border-color 0.16s, background 0.16s;
}

.dropzone:hover,
.dropzone.dragover {
  border-color: var(--caramel);
  background: var(--caramel-wash);
}

.dz-icon {
  color: var(--caramel);
  margin-bottom: 20px;
}

.dz-icon svg.ic {
  width: 34px;
  height: 34px;
}

.dz-title {
  font-size: 30px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--caramel);
  margin: 0 0 12px;
}

.dz-sub {
  color: var(--muted);
  max-width: 46ch;
  margin: 0 auto 26px;
}

.dz-choose {
  pointer-events: none; /* the whole zone is the click target */
}

.dropzone.compact {
  padding: 16px 24px;
  margin-bottom: 44px;
}

.dropzone.compact .dz-icon,
.dropzone.compact .dz-sub,
.dropzone.compact .dz-choose {
  display: none;
}

.dropzone.compact .dz-title {
  font-size: 14.5px;
  font-weight: 600;
  letter-spacing: normal;
  color: var(--muted);
  margin: 0;
}

.dz-status {
  margin: 10px 0 0;
  font-weight: 600;
  color: var(--caramel-deep);
  min-height: 1.2em;
}

.dropzone.compact .dz-status {
  margin-top: 4px;
}

.dz-status:empty {
  margin: 0;
  min-height: 0;
}

.dz-status.error {
  color: var(--alert);
}

.dz-status.busy {
  color: var(--muted);
}

/* ===== review ===== */

.readback {
  font-size: 40px;
  line-height: 1.1;
  letter-spacing: -0.03em;
  margin: 0 0 10px;
}

.review-sub {
  color: var(--muted);
  margin: 0 0 36px;
}

/* metric row — thin, airy, no boxes */
.metrics {
  display: flex;
  gap: 56px;
  padding: 22px 0;
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
  margin-bottom: 48px;
}

.metric .v {
  font-size: 32px;
  font-weight: 600;
  letter-spacing: -0.03em;
  color: var(--caramel);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.metric .k {
  font-size: 11.5px;
  color: var(--muted);
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  margin-top: 10px;
}

/* flagged stop — a bold, unmissable box per customer question (Beth 20 Jul:
   "can we highlight/bold the Border for each customer question please") */
.stop.flagged {
  padding: 26px 26px 26px 26px;
  border: 2px solid var(--caramel-deep);
  border-left-width: 6px;
  border-radius: 6px;
  margin-bottom: 26px;
  background: rgba(168, 123, 79, 0.04);
}

.flagged-list {
  margin-bottom: 8px;
}

.stop-head {
  display: flex;
  align-items: baseline;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}

.stop-head .who {
  font-size: 20px;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -0.01em;
}

.inv {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--caramel-deep);
  font-size: 14px;
}

.ref {
  color: var(--faint);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}

.flag-messages {
  list-style: none;
  margin: 0 0 18px;
  padding: 0;
  color: var(--ink-2);
  max-width: 66ch;
}

.flag-messages li {
  margin: 2px 0;
}

/* clean stops — bare rows, hairlines only */
.clean-head {
  margin: 52px 0 4px;
}

.stop.clean {
  border-bottom: 1px solid var(--hairline-2);
}

.clean-list .stop.clean:first-of-type {
  border-top: 1px solid var(--hairline-2);
}

.stop.clean summary {
  display: grid;
  grid-template-columns: 110px 1fr auto minmax(120px, auto) 20px;
  align-items: center;
  gap: 20px;
  padding: 15px 0;
  cursor: pointer;
  list-style: none;
  font-size: 15.5px;
}

.stop.clean summary::-webkit-details-marker {
  display: none;
}

.stop.clean .who-cell {
  display: flex;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
  min-width: 0;
}

.stop.clean .contact {
  color: var(--ink);
}

.stop.clean .qty {
  font-variant-numeric: tabular-nums;
  color: var(--muted);
  font-weight: 600;
  text-align: right;
  white-space: nowrap;
}

.stop.clean .goods {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.03em;
  color: var(--caramel-deep);
  white-space: nowrap;
}

.chev {
  color: var(--faint);
  justify-self: end;
  line-height: 0;
}

.chev svg.ic {
  transition: transform 0.16s;
}

details[open] > summary .chev svg.ic {
  transform: rotate(180deg);
}

.stop-body {
  padding: 6px 0 26px 26px;
  border-top: 1px solid var(--hairline-2);
  margin-top: -1px;
}

.stop-meta {
  color: var(--muted);
  font-size: 14.5px;
  margin: 12px 0 4px;
}

.stop-meta p {
  margin: 2px 0;
}

.stop-meta .rider {
  color: var(--caramel-deep);
}

.info-flag {
  color: var(--ink-2);
  font-size: 14.5px;
  margin: 12px 0 0;
  max-width: 66ch;
}

/* lines table */

table.lines {
  width: 100%;
  max-width: 440px;
  border-collapse: collapse;
  font-size: 14.5px;
  margin: 10px 0 20px;
}

table.lines td {
  text-align: left;
  padding: 7px 0;
  border-bottom: 1px solid var(--hairline-2);
  color: var(--ink-2);
}

table.lines tr:last-child td {
  border-bottom: 0;
}

table.lines td.num {
  text-align: right;
  white-space: nowrap;
  width: 52px;
  color: var(--muted);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  padding-right: 20px;
}

table .num {
  text-align: right;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

table.lines .embedded {
  color: var(--muted);
}

table.lines .note-row td {
  font-weight: 600;
  color: var(--ink);
}

.unknown-mark {
  color: var(--caramel-deep);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-left: 10px;
  white-space: nowrap;
}

/* fix / edit forms — quiet, no boxes; they sit inside the stop's caramel rule */
.fix-form,
.edit-form {
  margin: 18px 0 4px;
}

.fix-form + .fix-form {
  border-top: 1px solid var(--hairline-2);
  padding-top: 20px;
}

.fix-why {
  margin: 0 0 16px;
  color: var(--ink-2);
  max-width: 66ch;
}

.link-existing {
  border-top: 1px solid var(--hairline-2);
  margin-top: 22px;
  padding-top: 16px;
  display: flex;
  gap: 16px;
  align-items: flex-end;
  flex-wrap: wrap;
}

.link-existing label {
  flex: 1;
  min-width: 240px;
}

.exclude-toggle {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: 13.5px;
  color: var(--muted);
  margin-top: 20px;
  cursor: pointer;
  max-width: 64ch;
}

.exclude-toggle input {
  margin-top: 3px;
}

/* approve bar */

.approve-bar {
  position: sticky;
  bottom: 0;
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
  margin-top: 40px;
  padding: 20px 0;
  background: var(--paper);
  background: color-mix(in srgb, var(--paper) 94%, transparent);
  backdrop-filter: blur(6px);
  border-top: 1px solid var(--hairline);
}

.approve-info {
  flex: 1;
  font-size: 16px;
  color: var(--muted);
}

.approve-info strong {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}

.label-pick {
  display: block;
  font-size: 14px;
  color: var(--muted);
  margin-top: 4px;
}

.label-pick label {
  margin-right: 12px;
  cursor: pointer;
}

/* quiet destructive escape hatch — delete the upload, start over */
.btn.ghost.danger {
  background: none;
  border: 1px solid var(--hairline);
  color: #9c2f1d;
  font-size: 13.5px;
}

.btn.ghost.danger:hover {
  border-color: #9c2f1d;
}

/* "Masters edits refresh this run" hint on unknown-product/customer questions */
.refresh-hint {
  margin: 0 0 14px;
  font-size: 13.5px;
  color: var(--muted);
  max-width: 66ch;
}

/* ===== actions (post-approve) — a numbered sequence, next step lit ===== */

.steps {
  display: flex;
  flex-direction: column;
  margin: 8px 0 4px;
}

.step {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 20px 0;
  border-bottom: 1px solid var(--hairline);
}

.step:first-child {
  border-top: 1px solid var(--hairline);
}

.step .idx {
  width: 26px;
  font-variant-numeric: tabular-nums;
  color: var(--faint);
  font-weight: 600;
  font-size: 15px;
  flex: none;
}

.step.done .idx {
  color: var(--ok);
}

.step.next .idx {
  color: var(--caramel);
}

.step-link {
  font-family: inherit;
  font-size: 17px;
  font-weight: 600;
  background: none;
  border: 0;
  padding: 0;
  text-align: left;
  text-decoration: none;
  color: var(--ink);
  cursor: pointer;
}

.step.pending .step-link {
  color: var(--muted);
  font-weight: 600;
}

.step.done .step-link:hover,
.step.pending .step-link:hover {
  color: var(--caramel-deep);
}

/* the next undone step is the only lit control */
.step.next .step-link {
  background: var(--caramel);
  color: var(--cream);
  border-radius: var(--r-pill);
  padding: 13px 30px;
  transition: background 0.16s;
}

.step.next .step-link:hover {
  background: var(--caramel-deep);
}

.step.next .step-link#send-btn,
.step.next button.step-link[data-send-run] {
  background: var(--near-black);
}

.step.next .step-link#send-btn:hover,
.step.next button.step-link[data-send-run]:hover {
  background: #000;
}

/* Section 5 with zero signs: visible but inert */
.step.dormant .idx {
  color: var(--faint);
}

.step.dormant .step-note {
  font-size: 15px;
  font-weight: 500;
  color: var(--muted);
}

.step .spacer {
  flex: 1;
}

.step .stamp {
  font-size: 13.5px;
  color: var(--ok);
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}

.step .stamp svg.ic {
  width: 15px;
  height: 15px;
}

.send-note {
  margin-top: 24px;
  color: var(--muted);
  font-size: 14px;
  max-width: 64ch;
}

/* ===== armed-send result (✓ / ⚠) ===== */

.send-result {
  margin-top: 28px;
  padding: 18px 22px;
  border-radius: 10px;
  max-width: 72ch;
}

.send-result.ok {
  background: #eef6ee;
  border: 1px solid #cfe4cf;
}

.send-result.bad {
  background: #fdf1ef;
  border: 1px solid #f0d2cc;
}

.send-result.stale {
  background: #fdf7ec;
  border: 1px solid #efdfc0;
}

.send-headline {
  font-size: 16px;
  font-weight: 600;
  margin: 0;
}

.send-result.ok .send-headline {
  color: #22662a;
}

.send-result.bad .send-headline {
  color: #9c2f1d;
}

.send-result.stale .send-headline {
  color: #7a5a17;
}

.send-problems {
  margin: 12px 0 0;
  padding-left: 20px;
  font-size: 14px;
}

.send-problems li {
  margin: 4px 0;
}

.send-soft {
  margin: 10px 0 0;
  padding-left: 20px;
  font-size: 13px;
  color: var(--muted);
}

.send-result .btn.danger {
  margin-top: 16px;
  background: #9c2f1d;
  color: #fff;
  border: none;
}

.undo-link {
  margin-top: 14px;
  background: none;
  border: none;
  padding: 0;
  font-size: 13px;
  color: var(--muted);
  text-decoration: underline;
  cursor: pointer;
}

/* ===== past runs ===== */

.past {
  margin-top: 72px;
}

.past h2 {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 10px;
}

table.past-runs {
  width: 100%;
  border-collapse: collapse;
  font-size: 14.5px;
}

table.past-runs th,
table.past-runs td {
  text-align: left;
  padding: 12px 18px 12px 0;
  border-bottom: 1px solid var(--hairline-2);
  vertical-align: top;
}

table.past-runs th {
  color: var(--muted);
  font-size: 11.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.13em;
  border-bottom-color: var(--hairline);
}

table.past-runs .file {
  color: var(--faint);
  font-size: 13px;
  word-break: break-all;
}

table.past-runs .statuses .mark {
  margin: 1px 14px 1px 0;
}

/* R3: voided runs stay visible but clearly dead */
table.past-runs tr.voided td {
  opacity: 0.45;
}

table.past-runs tr.voided .file {
  text-decoration: line-through;
}

table.past-runs .row-actions {
  text-align: right;
  padding-right: 0;
}

.row-delete {
  background: none;
  border: none;
  color: #9c2f1d;
  font: inherit;
  font-size: 13px;
  cursor: pointer;
  padding: 0;
  opacity: 0.65;
}

.row-delete:hover {
  opacity: 1;
  text-decoration: underline;
}

/* R3: delete-the-whole-run control under the approved step list */
.run-danger {
  margin-top: 26px;
  padding-top: 18px;
  border-top: 1px solid var(--hairline-2);
}

/* R4: post-approval quantity edit */
.edit-qty {
  margin-top: 26px;
  padding-top: 18px;
  border-top: 1px solid var(--hairline-2);
}

.edit-qty summary {
  cursor: pointer;
  font-weight: 600;
  font-size: 14.5px;
  color: var(--ink-2);
}

.edit-qty form {
  margin-top: 14px;
}

table.qty-table {
  border-collapse: collapse;
  font-size: 14.5px;
  margin: 14px 0 18px;
}

table.qty-table th,
table.qty-table td {
  text-align: left;
  padding: 8px 22px 8px 0;
  border-bottom: 1px solid var(--hairline-2);
}

table.qty-table th {
  color: var(--muted);
  font-size: 11.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.13em;
}

table.qty-table th.num,
table.qty-table td.num {
  text-align: right;
  padding-right: 0;
}

table.qty-table td.num input {
  width: 88px;
  text-align: right;
}

table.qty-table .inv {
  color: var(--faint);
  font-size: 13px;
}

/* ===== masters ===== */

.tabs {
  display: flex;
  gap: 30px;
  margin: 18px 0 34px;
  border-bottom: 1px solid var(--hairline);
}

.tab {
  text-decoration: none;
  color: var(--muted);
  font-weight: 600;
  font-size: 15px;
  padding: 0 0 12px;
  position: relative;
}

.tab:hover {
  color: var(--caramel-deep);
}

.tab.active {
  color: var(--caramel-deep);
}

.tab.active::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 1.5px;
  background: var(--caramel);
}

/* the filter box is the hero */
input.filter {
  width: 100%;
  font-family: inherit;
  font-size: 19px;
  color: var(--ink);
  background: var(--paper);
  border: 0;
  border-bottom: 1.5px solid var(--field-border);
  border-radius: 0;
  padding: 10px 2px;
  margin-bottom: 22px;
}

input.filter::placeholder {
  color: var(--faint);
}

.new-master {
  margin-bottom: 30px;
}

.new-master summary {
  display: inline-flex;
  list-style: none;
  cursor: pointer;
}

.new-master summary::-webkit-details-marker {
  display: none;
}

.new-master .master-form {
  margin-top: 26px;
  padding: 24px 0 8px;
  border-top: 1px solid var(--hairline);
}

.mrow {
  border-bottom: 1px solid var(--hairline-2);
}

.master-list .mrow:first-child {
  border-top: 1px solid var(--hairline-2);
}

.mrow summary {
  display: flex;
  align-items: baseline;
  gap: 14px;
  flex-wrap: wrap;
  padding: 15px 0;
  cursor: pointer;
  list-style: none;
  font-size: 15.5px;
}

.mrow summary::-webkit-details-marker {
  display: none;
}

.mrow summary strong {
  font-weight: 600;
  color: var(--ink);
}

.mrow summary .chev {
  margin-left: auto;
  align-self: center;
}

.mrow-meta {
  color: var(--muted);
  font-size: 13.5px;
}

.mrow .master-form {
  padding: 8px 0 26px 26px;
}

.mrow .confirm {
  align-self: center;
  color: var(--ok);
  border-color: var(--ok);
}

.mrow .confirm:hover {
  border-color: var(--ok);
  background: var(--ok);
  color: var(--paper);
}

.inferred-note {
  color: var(--ink-2);
  border-left: 2px solid var(--caramel);
  padding: 4px 0 4px 18px;
  margin: 0 0 26px;
  max-width: 66ch;
}

.goods-list {
  list-style: none;
  padding: 0;
  margin: 0;
  max-width: 440px;
}

.goods-list li {
  border-bottom: 1px solid var(--hairline-2);
  padding: 13px 0;
}

.goods-list li:first-child {
  border-top: 1px solid var(--hairline-2);
}

.goods-list code {
  font-family: inherit;
  font-size: 15.5px;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: 0.02em;
}

/* ===== tracking ===== */

.rag-section {
  margin: 0 0 34px;
}

.rag-section-title {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin: 0 0 10px;
  font-size: 17px;
  font-weight: 600;
  cursor: pointer;
  list-style: none;
  user-select: none;
}

.rag-section-title::-webkit-details-marker {
  display: none;
}

.rag-chevron {
  align-self: center;
  width: 8px;
  height: 8px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(-45deg);
  transition: transform 0.15s ease;
}

details[open] > .rag-section-title .rag-chevron {
  transform: rotate(45deg);
}

.rag-section-title .dot {
  align-self: center;
}

.rag-section-title.red {
  color: var(--alert);
}

.rag-section-title.amber {
  color: var(--caramel-deep);
}

.rag-section-title.green {
  color: var(--ok);
}

.rag-section-meaning {
  font-size: 13.5px;
  font-weight: 400;
  color: var(--ink-2);
}

.dot {
  display: inline-block;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  vertical-align: baseline;
  flex: none;
}

.dot.green {
  background: var(--ok);
}

/* caramel carries "slowing" — the brand system has no amber */
.dot.amber {
  background: var(--caramel);
}

.dot.red {
  background: var(--alert);
}

table.tracking-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14.5px;
  margin-top: 18px;
}

table.tracking-table th,
table.tracking-table td {
  text-align: left;
  padding: 12px 18px 12px 0;
  border-bottom: 1px solid var(--hairline-2);
}

table.tracking-table th {
  color: var(--muted);
  font-size: 11.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.13em;
  border-bottom-color: var(--hairline);
}

table.tracking-table td.num,
table.tracking-table th.num {
  padding-right: 0;
  padding-left: 18px;
}

/* ===== start a run (home) — calendar beside the AM/PM pills + button ===== */

.new-run {
  margin-bottom: 60px;
}

.new-run-title {
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 600;
  letter-spacing: normal;
  color: var(--caramel);
  margin: 0 0 22px;
}

.new-run-grid {
  display: flex;
  gap: 48px;
  align-items: flex-start;
  flex-wrap: wrap;
}

.new-run-controls {
  display: flex;
  flex-direction: column;
  gap: 22px;
  min-width: 200px;
}

.new-run-controls .btn.big {
  align-self: flex-start;
}

.new-run-controls .form-error {
  margin: 0;
}

.slot-hint {
  margin: 0;
  max-width: 320px;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--muted);
}

/* AM / PM trip toggle — filled-caramel selected pill */
.slot-pills {
  display: inline-flex;
  gap: 8px;
}

.slot-pill {
  position: relative;
  display: inline-flex;
  align-items: center;
  padding: 11px 26px;
  border-radius: var(--r-pill);
  border: 1.5px solid var(--field-border);
  font-weight: 600;
  font-size: 15px;
  color: var(--caramel-deep);
  cursor: pointer;
  user-select: none;
  transition: background 0.16s, color 0.16s, border-color 0.16s;
}

.slot-pill:hover {
  border-color: var(--caramel);
}

.slot-pill:has(input:checked) {
  background: var(--caramel);
  border-color: transparent;
  color: var(--cream);
}

.slot-pill:focus-within {
  outline: 2px solid var(--caramel);
  outline-offset: 3px;
}

/* the real radio drives :checked but sits invisible behind the pill */
.slot-pill input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  margin: 0;
}

/* month calendar — run.js renders the head + 7-col grid into #cal */
.cal {
  width: 300px;
  max-width: 100%;
  flex: none;
}

.cal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.cal-title {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 600;
  color: var(--ink);
}

.cal-nav {
  font-family: inherit;
  font-size: 22px;
  line-height: 1;
  color: var(--caramel-deep);
  background: none;
  border: 0;
  cursor: pointer;
  padding: 2px 12px;
  border-radius: var(--r-pill);
}

.cal-nav:hover {
  background: var(--caramel-wash);
  color: var(--caramel);
}

.cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 3px;
}

.cal-dow {
  text-align: center;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--faint);
  padding-bottom: 6px;
}

.cal-day {
  font-family: inherit;
  font-size: 14px;
  color: var(--ink);
  background: none;
  border: 1.5px solid transparent;
  border-radius: 50%;
  padding: 0;
  aspect-ratio: 1 / 1;
  cursor: pointer;
  font-variant-numeric: tabular-nums;
  transition: background 0.12s, border-color 0.12s, color 0.12s;
}

.cal-day:hover {
  background: var(--caramel-wash);
}

.cal-day.other {
  color: var(--faint);
}

/* today = caramel ring; selected = filled caramel */
.cal-day.today {
  border-color: var(--caramel);
}

.cal-day.sel {
  background: var(--caramel);
  border-color: transparent;
  color: var(--cream);
}

.cal-day.sel:hover {
  background: var(--caramel-deep);
}

/* ===== run detail — pill tabs + panels ===== */

/* Scoped by :has() to the run tab bar (hash links) so the masters .tabs —
   underline links with real hrefs — is untouched. */
.tabs:has(a[href^='#']) {
  gap: 8px;
  margin: 20px 0 30px;
  border-bottom: 0;
  flex-wrap: wrap;
}

.tabs a[href^='#'] {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 18px;
  border-radius: var(--r-pill);
  border: 1.5px solid var(--field-border);
  color: var(--caramel-deep);
  text-decoration: none;
  font-weight: 600;
  font-size: 14px;
  white-space: nowrap;
  transition: background 0.16s, color 0.16s, border-color 0.16s;
}

.tabs a[href^='#']:hover {
  border-color: var(--caramel);
}

.tabs a[href^='#'].active {
  background: var(--caramel);
  border-color: transparent;
  color: var(--cream);
}

/* an upload tab that still needs fixes carries a small accent dot (.dot.amber);
   on the filled active pill it flips to cream so it stays visible */
.tabs a[href^='#'] .dot {
  align-self: center;
}

.tabs a[href^='#'].active .dot.amber {
  background: var(--cream);
}

/* a deleted upload's tab reads greyed and struck-through */
.tabs a[href^='#'].voided {
  opacity: 0.5;
  text-decoration: line-through;
}

/* only the active tab's panel shows */
.tab-panel:not(.active) {
  display: none;
}

/* Overall panel — numbered list of this run's uploads */
.run-uploads {
  list-style: none;
  margin: 0 0 30px;
  padding: 0;
  counter-reset: none;
}

.run-uploads li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding: 14px 0;
  border-bottom: 1px solid var(--hairline-2);
}

.run-uploads li:first-child {
  border-top: 1px solid var(--hairline-2);
}

.run-uploads li.voided .ru-name {
  opacity: 0.5;
  text-decoration: line-through;
}

.ru-name {
  color: var(--ink-2);
  font-size: 14.5px;
}

/* Confirm All Uploads — Beth's gate on the Overall tab (24 Jul slides). The
   button sits above the Excel/signs/Send confirmation box; while blocked it is
   disabled and each blocker is a named, clickable line to the offending tab. */
.confirm-gate {
  margin: 0 0 26px;
}

.confirm-gate #confirm-all[disabled] {
  opacity: 0.45;
  cursor: not-allowed;
}

.confirm-gate #confirm-box {
  margin-top: 18px;
}

.gate-blockers {
  list-style: none;
  margin: 14px 0 0;
  padding: 0;
  max-width: 66ch;
}

.gate-blockers li {
  padding: 8px 0;
  border-bottom: 1px solid var(--hairline-2);
  font-size: 14.5px;
}

.gate-blockers li:first-child {
  border-top: 1px solid var(--hairline-2);
}

.gate-blockers a {
  color: var(--caramel-deep);
  text-decoration: none;
}

.gate-blockers a:hover {
  text-decoration: underline;
}

/* Signs stay printable while the gate is shut (packing-floor material). */
.signs-early {
  margin: 16px 0 0;
  font-size: 14.5px;
}

.signs-early .step-note {
  color: var(--muted);
}

/* upload panel step 1 — the invoice list folded behind a disclosure (Beth 26 Jul) */
.step.invoices-step {
  display: block;
}

.inv-details summary {
  display: flex;
  align-items: center;
  gap: 20px;
  cursor: pointer;
  list-style: none;
}

.inv-details summary::-webkit-details-marker {
  display: none;
}

.inv-details summary::after {
  content: '';
  width: 0;
  height: 0;
  border-left: 7px solid var(--faint);
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  transition: transform 0.16s;
}

.inv-details[open] summary::after {
  transform: rotate(90deg);
}

.inv-details .clean-list {
  margin-top: 14px;
}

/* the upload panel's print steps continue below the Invoices li — one rail */
.steps:has(.invoices-step) {
  margin-bottom: 0;
}

.steps-continue {
  margin-top: 0;
}

.steps-continue .step:first-child {
  border-top: 0;
}

/* review-upload panel — the invoices still needing a fix */
.fix-list {
  list-style: none;
  margin: 6px 0 22px;
  padding: 0;
  max-width: 66ch;
}

.fix-list li {
  padding: 8px 0;
  border-bottom: 1px solid var(--hairline-2);
  color: var(--ink-2);
  font-size: 14.5px;
}

.fix-list li:first-child {
  border-top: 1px solid var(--hairline-2);
}

/* review-upload panel — primary "Review" action beside the ghost delete */
.upload-actions {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
  margin-top: 24px;
}

/* run header — big date · slot with the status chip on the same line */
.run-head {
  display: flex;
  align-items: baseline;
  gap: 8px 18px;
  flex-wrap: wrap;
  margin: 0 0 10px;
}

.run-head .readback {
  margin: 0;
}

/* back link on the review page (← 24/07/2026 · PM) */
.back-link {
  display: inline-block;
  color: var(--muted);
  text-decoration: none;
  font-weight: 600;
  font-size: 14.5px;
  margin: 0 0 20px;
}

.back-link:hover {
  color: var(--caramel-deep);
}

/* ===== small screens ===== */

@media (max-width: 680px) {
  .strip {
    padding: 8px 20px;
    font-size: 10px;
    letter-spacing: 0.12em;
  }

  .topbar {
    padding: 16px 20px;
    gap: 20px;
  }

  .topbar nav {
    gap: 18px;
  }

  .page {
    padding: 30px 20px 80px;
  }

  .readback {
    font-size: 30px;
  }

  .dz-title {
    font-size: 24px;
  }

  .metrics {
    gap: 32px;
    flex-wrap: wrap;
  }

  .field-grid {
    grid-template-columns: 1fr;
  }

  .field-grid .span2 {
    grid-column: span 1;
  }

  .stop.clean summary {
    grid-template-columns: 1fr auto;
    gap: 4px 16px;
  }

  .stop.clean summary .inv {
    grid-row: 1;
  }

  .stop.clean summary .goods,
  .stop.clean summary .chev {
    display: none;
  }

  .new-run-grid {
    gap: 28px;
  }

  /* step rows: the lit pill needs the row's width — the ✓ stamp drops to its
     own line instead of squeezing the button into a one-word-per-line blob */
  .step {
    flex-wrap: wrap;
    row-gap: 10px;
  }

  .step .stamp {
    flex-basis: 100%;
    margin-left: 44px;
  }

  .step.next .step-link {
    padding: 12px 22px;
    border-radius: 22px;
  }

  /* tabs never wrap on mobile — they scroll sideways instead */
  .tabs:has(a[href^='#']) {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 6px;
  }
}

@media (prefers-reduced-motion: reduce) {
  * {
    transition: none !important;
  }
}