/* ===========================================================================
   COD Reconciliation — console styles.

   The subject is a cash book: two columns that are supposed to agree, and the
   work is finding the rows where they do not. Everything here serves that.

   THREE RULES HOLD THE WHOLE SHEET TOGETHER.

   1. ONE ACCENT. Vermillion appears only where money and delivery disagree —
      never as decoration, never on a heading, never on a control. If the page
      is red anywhere, that is the thing to look at. Green, amber and indigo
      survive only as small marks (a dot, a bar fill, a hairline); they never
      fill a badge, because four filled colours is four things shouting.

   2. THREE FACES, THREE JOBS. Serif is money and titles. Sans is sentences
      addressed to a person. Mono is the machine's own vocabulary — ids, enum
      names, timestamps, zone labels. A merchant does not have to be told this
      to benefit from it: within a minute the typewriter text reads as "the
      system's words, not mine", and the amounts read as money.

   3. COLOUR IS NEVER THE ONLY SIGNAL. Every state also carries a word, and a
      discrepancy also carries a flag and a full sentence in plain language.
   =========================================================================== */

:root {
  /* Ground: cool bond paper, not warm cream. This is a cash book, not a menu. */
  --paper: #e9ecf1;
  --card: #ffffff;
  --card-sunk: #f3f5f9;
  --ink: #13171e;
  --ink-soft: #58616f;
  --ink-faint: #8c94a2;
  --rule: #dde2e9;
  --rule-strong: #c2cad5;

  /* THE accent. Reserved for money that disagrees with delivery. */
  --flag: #b0241a;
  --flag-deep: #8b1a12;
  --flag-wash: #fdf1ef;
  --flag-edge: #eec8c2;

  /* Support marks. Never a filled background — a dot, a rule, a bar. */
  --settled: #2d6a51;
  --held: #8a6112;
  --held-wash: #fbf4e6;
  --cp: #38446e;
  --cp-wash: #eceef6;

  --radius: 4px;
  --radius-tight: 2px;
  --sheet: 0 1px 1px rgb(19 23 30 / 4%), 0 10px 30px -22px rgb(19 23 30 / 35%);

  --serif: "Source Serif 4", Georgia, "Times New Roman", serif;
  --sans: "Archivo", "Segoe UI", system-ui, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;
}

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

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

h1,
h2,
h3,
p,
figure,
ul {
  margin: 0;
}

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

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

.skip {
  position: absolute;
  left: -9999px;
}
.skip:focus {
  left: 1rem;
  top: 1rem;
  z-index: 10;
  background: var(--card);
  padding: 0.5rem 0.75rem;
  box-shadow: var(--sheet);
}

/* --- Voice 3: the machine's vocabulary ------------------------------------ */
.eyebrow,
.zone,
.badge,
.mono,
.freshness {
  font-family: var(--mono);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.eyebrow {
  color: var(--ink-faint);
  font-weight: 600;
  margin-bottom: 0.3rem;
}

/* A dotted underline is the page's one signal for "hover me for plain words". */
.explain {
  text-decoration: underline dotted var(--rule-strong);
  text-underline-offset: 3px;
  cursor: help;
}

/* --- Masthead ------------------------------------------------------------- */
.masthead {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: center;
  justify-content: space-between;
  padding: 1.1rem clamp(1rem, 4vw, 2.5rem);
  border-bottom: 1px solid var(--rule);
  background: var(--card);
}

.wordmark {
  display: flex;
  align-items: center;
  gap: 0.7rem;
}

/* A double rule — the cash book's own device for "totals below this line". */
.wordmark__rule {
  width: 24px;
  height: 8px;
  border-top: 2px solid var(--ink);
  border-bottom: 2px solid var(--ink);
}

.wordmark__text {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 1.1875rem;
  letter-spacing: -0.01em;
}

.freshness {
  color: var(--ink-soft);
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  text-transform: none;
  letter-spacing: 0.04em;
}

.freshness::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--settled);
  flex: none;
}

.freshness[data-state="stale"]::before {
  background: var(--held);
}
.freshness[data-state="down"]::before {
  background: var(--flag);
}

/* One tick per poll, so eventual consistency has a heartbeat you can see. */
.freshness[data-pulse="on"]::before {
  animation: tick 600ms ease-out;
}

@keyframes tick {
  from {
    transform: scale(2.1);
    opacity: 0.35;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}

/* --- Alert ---------------------------------------------------------------- */
.alert {
  margin: 1rem clamp(1rem, 4vw, 2.5rem) 0;
  padding: 0.85rem 1rem;
  background: var(--flag-wash);
  border: 1px solid var(--flag-edge);
  border-left: 3px solid var(--flag);
  border-radius: var(--radius);
  color: var(--flag-deep);
  font-size: 0.875rem;
}

.alert code {
  font-family: var(--mono);
  font-size: 0.8125rem;
}

/* --- Layout --------------------------------------------------------------- */
main {
  padding: clamp(1rem, 3vw, 1.75rem) clamp(1rem, 4vw, 2.5rem) 3rem;
  max-width: 1400px;
  margin: 0 auto;
}

.stack {
  display: grid;
  gap: 1.5rem;
}

.panel {
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
}

.panel--sheet {
  box-shadow: var(--sheet);
}

.panel__head {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.5rem;
  align-items: flex-end;
  justify-content: space-between;
  padding: 1.1rem 1.25rem;
  border-bottom: 1px solid var(--rule);
}

.panel__title {
  font-family: var(--serif);
  font-size: 1.1875rem;
  font-weight: 600;
  letter-spacing: -0.005em;
  line-height: 1.25;
}

.panel__lede {
  color: var(--ink-soft);
  font-size: 0.8125rem;
  margin-top: 0.35rem;
  max-width: 68ch;
}

/* The zone label is not decoration: it is the API's own `source` and
   `consistency` fields, printed where the data lands. The plain line beneath it
   is what a merchant actually needs from it. */
.zone-block {
  text-align: right;
  display: grid;
  gap: 0.2rem;
  justify-items: end;
}

.zone {
  color: var(--ink-faint);
  letter-spacing: 0.1em;
}

.zone-note {
  font-size: 0.75rem;
  color: var(--ink-faint);
  max-width: 34ch;
  text-align: right;
}

/* ===========================================================================
   THE SUMMARY BAND — the one-second answer.

   Not four equal tiles. The first cell is twice the width, carries the only red
   on a calm page, and states both halves of the question a merchant has when
   they open this: how many, and how much.
   =========================================================================== */
.ledger-strip {
  display: grid;
  grid-template-columns: minmax(0, 1.9fr) repeat(3, minmax(0, 1fr));
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--sheet);
}

@media (max-width: 900px) {
  .ledger-strip {
    grid-template-columns: repeat(auto-fit, minmax(165px, 1fr));
  }
  .tally--lead {
    grid-column: 1 / -1;
  }
}

.tally {
  background: var(--card);
  padding: 1rem 1.15rem 1.1rem;
}

.tally__label {
  font-family: var(--mono);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.tally__value {
  font-family: var(--serif);
  font-size: 1.75rem;
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.1;
  margin-top: 0.35rem;
  font-variant-numeric: tabular-nums lining-nums;
}

.tally__note {
  font-size: 0.75rem;
  color: var(--ink-soft);
  margin-top: 0.3rem;
}

/* The lead cell: bigger type, and the only place the accent is allowed to sit
   on a whole surface. */
.tally--lead {
  padding: 1.15rem 1.35rem 1.25rem;
}

.tally--lead .tally__value {
  font-size: clamp(2.5rem, 5.5vw, 3.375rem);
  line-height: 1;
  margin-top: 0.15rem;
}

.tally--lead .tally__note {
  font-size: 0.875rem;
  margin-top: 0.45rem;
  max-width: 48ch;
}

.tally--flagged {
  background: var(--flag-wash);
}

.tally--flagged .tally__label,
.tally--flagged .tally__value {
  color: var(--flag);
}

.tally--flagged .tally__note {
  color: var(--flag-deep);
}

/* The money at stake, set on the same line as the count so the two halves of
   the answer arrive together. */
.tally__stake {
  font-family: var(--serif);
  font-size: 1.5rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums lining-nums;
  letter-spacing: -0.01em;
  color: var(--flag-deep);
  margin-left: 0.6rem;
}

.tally__stake small {
  font-family: var(--sans);
  font-size: 0.8125rem;
  font-weight: 400;
  letter-spacing: 0;
  color: var(--flag-deep);
  margin-left: 0.2rem;
}

.tally--settled-all .tally__value {
  color: var(--settled);
}

/* ===========================================================================
   THE ORDERS TABLE — the working surface.
   =========================================================================== */
.table-scroll {
  overflow-x: auto;
}

.orders {
  width: 100%;
  min-width: 940px;
  table-layout: fixed;
  border-collapse: collapse;
  font-size: 0.875rem;
}

.orders th {
  font-family: var(--mono);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-align: left;
  color: var(--ink-faint);
  padding: 0.65rem 0.85rem;
  border-bottom: 1px solid var(--rule-strong);
  vertical-align: bottom;
}

.orders td {
  padding: 1rem 0.85rem;
  border-bottom: 1px solid var(--rule);
  vertical-align: middle;
}

.orders tbody tr:last-child td {
  border-bottom: 0;
}

.orders tbody tr:hover {
  background: var(--card-sunk);
}

/* A flagged row: a calm wash, a hard accent edge, and a red amount. Three
   signals, only one of which is colour. */
.orders tr[data-flagged="true"] {
  background: var(--flag-wash);
}

.orders tr[data-flagged="true"]:hover {
  background: #fbe7e3;
}

.orders tr[data-flagged="true"] td:first-child {
  box-shadow: inset 3px 0 0 var(--flag);
}

.col-order {
  width: 92px;
}
.col-customer {
  width: 16%;
}
.col-bar {
  width: 27%;
}
.col-diff {
  width: 138px;
}
.col-delivery {
  width: 118px;
}

.th-right {
  text-align: right;
}

/* Order ids are for machines. Six characters is enough to match one against a
   courier's spreadsheet; the full hash is on hover and on the detail page. */
.order-chip {
  font-family: var(--mono);
  font-size: 0.75rem;
  letter-spacing: 0.02em;
  text-decoration: none;
  color: var(--ink-soft);
  background: var(--card-sunk);
  border: 1px solid var(--rule);
  border-radius: var(--radius-tight);
  padding: 0.2rem 0.4rem;
  display: inline-block;
}

.order-chip:hover {
  color: var(--cp);
  border-color: var(--rule-strong);
  background: var(--cp-wash);
}

.customer {
  font-size: 0.9375rem;
  font-weight: 500;
  line-height: 1.3;
}

.customer a {
  color: inherit;
  text-decoration: none;
}

.customer a:hover {
  text-decoration: underline;
}

.empty {
  padding: 3rem 1.25rem;
  text-align: center;
  color: var(--ink-soft);
}

.empty strong {
  display: block;
  font-family: var(--serif);
  font-size: 1.125rem;
  color: var(--ink);
  margin-bottom: 0.3rem;
}

/* --- The difference column: a statement's right-hand edge ------------------ */
.diff {
  text-align: right;
  font-variant-numeric: tabular-nums lining-nums;
}

.diff__amount {
  font-family: var(--serif);
  font-size: 1.375rem;
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.15;
  display: block;
}

.diff__word {
  font-size: 0.75rem;
  color: var(--ink-soft);
  display: block;
  margin-top: 0.05rem;
}

.diff[data-tone="flag"] .diff__amount {
  color: var(--flag);
}
.diff[data-tone="flag"] .diff__word {
  color: var(--flag-deep);
}
.diff[data-tone="held"] .diff__amount {
  color: var(--held);
}

.diff__none {
  color: var(--ink-faint);
  font-family: var(--serif);
  font-size: 1.125rem;
}

/* --- Delivery: a word and a dot, never a filled badge ---------------------- */
.delivery {
  display: inline-flex;
  align-items: baseline;
  gap: 0.4rem;
  font-size: 0.875rem;
  color: var(--ink);
}

.delivery::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--ink-faint);
  flex: none;
  transform: translateY(-1px);
}

.delivery[data-status="DELIVERED"]::before {
  background: var(--settled);
}
.delivery[data-status="RETURNED"]::before {
  background: var(--held);
}
.delivery[data-status="DISPATCHED"]::before {
  background: var(--cp);
}

/* --- What this means: the column the tool exists for ----------------------- */
/*
   Nothing here is clipped and nothing is nowrap. The plain-language headline is
   the biggest thing in the cell; the sentence under it says what to do; the
   system's own labels sit at the bottom in the machine voice — kept because
   they are authoritative, demoted because a merchant does not read them.
*/
.means {
  max-width: 48ch;
}

.means__headline {
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.3;
}

.means__headline .flagmark {
  color: var(--flag);
  font-size: 0.8125rem;
  margin-right: 0.3rem;
}

.means[data-tone="flag"] .means__headline {
  color: var(--flag);
}

.means__sentence {
  font-size: 0.8125rem;
  color: var(--ink-soft);
  line-height: 1.45;
  margin-top: 0.15rem;
}

.means[data-tone="flag"] .means__sentence {
  color: var(--flag-deep);
}

.means__sys {
  font-family: var(--mono);
  font-size: 0.625rem;
  font-weight: 500;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-top: 0.45rem;
}

.means[data-tone="flag"] .means__sys {
  color: #b98d87;
}

/* ===========================================================================
   THE SIGNATURE: the reconciliation bar.

   Collected and expected share ONE scale, so the bar is a true comparison
   rather than a percentage. The expected line sits wherever expected falls on
   that scale — which means an overpayment physically OVERSHOOTS it, because the
   ledger never clamps and neither does its picture. The overshoot is hatched so
   it reads as "past the line", not as "more progress".
   =========================================================================== */
.recbar {
  display: grid;
  gap: 0.45rem;
}

.recbar__figures {
  font-variant-numeric: tabular-nums lining-nums;
  line-height: 1.2;
  display: flex;
  align-items: baseline;
  gap: 0.4rem;
  flex-wrap: wrap;
}

.recbar__collected {
  font-family: var(--serif);
  font-size: 1.25rem;
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--ink);
}

.recbar__expected-text {
  font-size: 0.8125rem;
  color: var(--ink-soft);
}

.recbar__track {
  position: relative;
  height: 16px;
  background: var(--card-sunk);
  border: 1px solid var(--rule-strong);
  border-radius: var(--radius-tight);
}

.recbar__clip {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: 1px;
}

.recbar__fill {
  position: absolute;
  inset: 0 auto 0 0;
  width: calc(var(--collected-pct) * 1%);
  background: var(--bar-color, var(--ink-faint));
}

/* Everything past the expected line, drawn as hatch in the accent. */
.recbar__over {
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(var(--expected-pct) * 1%);
  width: calc((var(--collected-pct) - var(--expected-pct)) * 1%);
  background: repeating-linear-gradient(-45deg, var(--flag) 0 3px, #d4574d 3px 6px);
}

/* The expected line: where the courier's obligation ends. Taller than the track
   on purpose — it is a target, not part of the fill. */
.recbar__expected {
  position: absolute;
  top: -5px;
  bottom: -5px;
  left: calc(var(--expected-pct) * 1%);
  width: 2px;
  background: var(--ink);
  transform: translateX(-1px);
}

.recbar__expected::after {
  content: "";
  position: absolute;
  left: -2px;
  top: -3px;
  border-left: 3px solid transparent;
  border-right: 3px solid transparent;
  border-top: 4px solid var(--ink);
}

/* The legend, printed once, above the column it explains. */
.bar-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 0.2rem 0.9rem;
  font-family: var(--mono);
  font-size: 0.6875rem;
  letter-spacing: 0.04em;
  color: var(--ink-faint);
  text-transform: none;
  font-weight: 400;
  margin-top: 0.4rem;
}

.bar-legend span {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
}

.bar-legend i {
  width: 14px;
  height: 9px;
  display: inline-block;
  border: 1px solid var(--rule-strong);
  background: var(--card-sunk);
}

.bar-legend i[data-key="collected"] {
  background: var(--ink-faint);
  border-color: var(--ink-faint);
}

.bar-legend i[data-key="expected"] {
  width: 2px;
  height: 12px;
  background: var(--ink);
  border: 0;
}

.bar-legend i[data-key="over"] {
  background: repeating-linear-gradient(-45deg, var(--flag) 0 3px, #d4574d 3px 6px);
  border-color: var(--flag);
}

/* --- Badges: outlines, not fills. Only the flag tone gets a wash. ---------- */
.badge {
  display: inline-block;
  padding: 0.2rem 0.45rem;
  border-radius: var(--radius-tight);
  letter-spacing: 0.09em;
  white-space: nowrap;
  background: transparent;
  color: var(--ink-soft);
  border: 1px solid var(--rule-strong);
}

.badge[data-tone="settled"] {
  color: var(--settled);
  border-color: #b9d2c6;
}

.badge[data-tone="held"] {
  color: var(--held);
  border-color: #ddc79a;
}

.badge[data-tone="flag"] {
  color: var(--flag);
  border-color: var(--flag-edge);
  background: var(--flag-wash);
}

.badge[data-tone="cp"] {
  color: var(--cp);
  border-color: #c3c9de;
}

/* ===========================================================================
   Book a delivery — deliberately the quietest panel on the page. It is an
   action you take after reading, so it reads after the table.
   =========================================================================== */
.panel--form {
  background: var(--card-sunk);
}

.form-body {
  padding: 1.1rem 1.25rem 1.25rem;
}

.form-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 0.8fr) auto;
  gap: 0.85rem;
  align-items: start;
  margin-top: 0.9rem;
}

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

.field label {
  display: block;
  font-size: 0.8125rem;
  font-weight: 500;
  margin-bottom: 0.3rem;
}

.field__unit {
  font-family: var(--mono);
  font-size: 0.6875rem;
  color: var(--ink-faint);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.field input {
  width: 100%;
  padding: 0.55rem 0.65rem;
  font-family: var(--mono);
  font-size: 0.875rem;
  color: var(--ink);
  background: var(--card);
  border: 1px solid var(--rule-strong);
  border-radius: var(--radius-tight);
}

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

.field__error {
  color: var(--flag);
  font-size: 0.75rem;
  margin-top: 0.25rem;
}

.button {
  padding: 0.6rem 1.15rem;
  font-family: var(--sans);
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--card);
  background: var(--ink);
  border: 1px solid var(--ink);
  border-radius: var(--radius-tight);
  cursor: pointer;
}

.button:hover {
  background: #000;
}

.button[disabled] {
  opacity: 0.5;
  cursor: progress;
}

.field--submit {
  align-self: end;
}

.field--submit .button {
  width: 100%;
}

.form-receipt {
  margin-top: 0.85rem;
  padding: 0.6rem 0.75rem;
  background: var(--card);
  border: 1px solid var(--rule);
  border-left: 3px solid var(--settled);
  border-radius: var(--radius-tight);
  font-size: 0.8125rem;
}

.form-receipt code {
  font-family: var(--mono);
  font-size: 0.75rem;
}

/* ===========================================================================
   Detail view
   =========================================================================== */
.back {
  display: inline-block;
  font-size: 0.8125rem;
  font-weight: 500;
  text-decoration: none;
  margin-bottom: 1.1rem;
}

.back:hover {
  text-decoration: underline;
}

/* The name first. A merchant recognises "Deepa Maharjan"; nobody recognises a
   twenty-character hash, so the hash is a chip underneath with a copy button. */
.detail-head {
  margin-bottom: 1.5rem;
}

.detail-head h1 {
  font-family: var(--serif);
  font-size: clamp(1.75rem, 4vw, 2.375rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.1;
}

.detail-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.85rem;
  margin-top: 0.6rem;
  font-size: 0.8125rem;
  color: var(--ink-soft);
}

.id-chip {
  font-family: var(--mono);
  font-size: 0.75rem;
  background: var(--card);
  border: 1px solid var(--rule-strong);
  border-radius: var(--radius-tight);
  padding: 0.2rem 0.45rem;
  color: var(--ink-soft);
}

.copy-id {
  font-family: var(--sans);
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--cp);
  background: transparent;
  border: 0;
  padding: 0.2rem 0.1rem;
  cursor: pointer;
  text-decoration: underline;
}

/* The verdict banner: on a detail page there is room to say the whole thing in
   a sentence, so it leads and everything else supports it. */
.verdict {
  border: 1px solid var(--rule);
  border-left: 4px solid var(--rule-strong);
  border-radius: var(--radius);
  background: var(--card);
  padding: 1.15rem 1.35rem 1.25rem;
  margin-bottom: 1.25rem;
}

.verdict[data-tone="flag"] {
  background: var(--flag-wash);
  border-color: var(--flag-edge);
  border-left-color: var(--flag);
}

.verdict[data-tone="settled"] {
  border-left-color: var(--settled);
}

.verdict[data-tone="held"] {
  border-left-color: var(--held);
}

.verdict__headline {
  font-family: var(--serif);
  font-size: 1.625rem;
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.2;
}

.verdict[data-tone="flag"] .verdict__headline {
  color: var(--flag);
}

.verdict__sentence {
  font-size: 0.9375rem;
  color: var(--ink-soft);
  margin-top: 0.35rem;
  max-width: 72ch;
}

.verdict[data-tone="flag"] .verdict__sentence {
  color: var(--flag-deep);
}

.verdict__sys {
  font-family: var(--mono);
  font-size: 0.625rem;
  font-weight: 500;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-top: 0.7rem;
}

.compare {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 1.25rem;
  margin-bottom: 1.25rem;
  align-items: start;
}

.book {
  padding: 1.15rem 1.35rem 1.35rem;
}

.book__head {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 0.95rem;
}

.book__caption {
  font-size: 0.8125rem;
  color: var(--ink-soft);
  margin-top: 0.3rem;
  max-width: 54ch;
}

/* Ruled paper, and ONLY here: this panel is the book of record. */
.book--authoritative {
  background-image: repeating-linear-gradient(
    to bottom,
    transparent 0,
    transparent 27px,
    var(--cp-wash) 27px,
    var(--cp-wash) 28px
  );
  border-color: #c9cfe1;
}

.book__figures {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 0.95rem 1.25rem;
  padding-top: 0.95rem;
  border-top: 1px solid var(--rule);
}

.figure__label {
  font-family: var(--mono);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.figure__value {
  font-family: var(--serif);
  font-size: 1.75rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums lining-nums;
  letter-spacing: -0.02em;
  line-height: 1.15;
  margin-top: 0.1rem;
}

.figure__value--word {
  font-family: var(--sans);
  font-size: 1.0625rem;
  font-weight: 500;
  letter-spacing: 0;
}

.figure__value[data-tone="flag"] {
  color: var(--flag);
}

.figure__note {
  font-size: 0.75rem;
  color: var(--ink-soft);
}

/* --- The projected / authoritative switch ---------------------------------- */
.switch {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  padding: 0.85rem 1rem;
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  margin-bottom: 1.25rem;
  cursor: pointer;
}

.switch input {
  margin: 0.2rem 0 0;
  accent-color: var(--cp);
  width: 1rem;
  height: 1rem;
}

.switch__text strong {
  display: block;
  font-size: 0.875rem;
  font-weight: 600;
}

.switch__text span {
  font-size: 0.8125rem;
  color: var(--ink-soft);
}

.divergence {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.5rem;
  align-items: center;
  padding: 0.7rem 1rem;
  border-radius: var(--radius);
  margin-bottom: 1.25rem;
  font-size: 0.8125rem;
  background: var(--card);
  border: 1px solid var(--rule);
  border-left: 3px solid var(--rule-strong);
  color: var(--ink-soft);
}

.divergence[data-converged="true"] {
  border-left-color: var(--settled);
}

.divergence[data-converged="false"] {
  border-left-color: var(--held);
  background: var(--held-wash);
}

.divergence b {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}

/* --- Timeline -------------------------------------------------------------- */
.timeline {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.875rem;
}

.timeline th {
  text-align: left;
  font-family: var(--mono);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-faint);
  padding: 0.65rem 1rem;
  border-bottom: 1px solid var(--rule-strong);
  white-space: nowrap;
}

.timeline td {
  padding: 0.8rem 1rem;
  border-bottom: 1px solid var(--rule);
  vertical-align: top;
}

.timeline tbody tr:last-child td {
  border-bottom: 0;
}

.event-plain {
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.3;
}

/* Inside the timeline's first cell the id sits on its own line under the
   machine name; the Happened/Received columns are `td.stamp` and unaffected. */
.timeline td .stamp {
  display: block;
  margin-top: 0.1rem;
}

.stamp {
  font-family: var(--mono);
  font-size: 0.75rem;
  color: var(--ink-soft);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.event-type {
  font-family: var(--mono);
  font-size: 0.625rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-faint);
  display: block;
  margin-top: 0.25rem;
}

.repeat {
  font-family: var(--mono);
  font-size: 0.6875rem;
  font-weight: 600;
  color: var(--held);
  border: 1px solid #ddc79a;
  border-radius: var(--radius-tight);
  padding: 0.05rem 0.3rem;
  margin-left: 0.35rem;
  white-space: nowrap;
}

.money-cell {
  font-family: var(--serif);
  font-size: 1.125rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums lining-nums;
  white-space: nowrap;
  text-align: right;
}

.money-cell[data-empty="true"] {
  font-size: 1rem;
  color: var(--ink-faint);
  font-weight: 400;
}

.raw-link {
  font-family: var(--mono);
  font-size: 0.6875rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
}

.raw-link:hover {
  text-decoration: underline;
}

.held-list {
  margin: 0.7rem 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0.35rem;
}

.held-list li {
  font-family: var(--mono);
  font-size: 0.75rem;
  padding: 0.4rem 0.55rem;
  background: var(--card-sunk);
  border-left: 2px solid var(--rule-strong);
  border-radius: 0 var(--radius-tight) var(--radius-tight) 0;
}

/* --- Footer ---------------------------------------------------------------- */
.footer {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  justify-content: space-between;
  padding: 1rem clamp(1rem, 4vw, 2.5rem);
  border-top: 1px solid var(--rule);
  color: var(--ink-faint);
  font-size: 0.75rem;
}

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

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

/* ===========================================================================
   Simulator — a control surface sitting inside a reading surface, so it is
   given the one device nothing else on the page uses: a heavy top rule in the
   CP indigo. It reads as an instrument panel rather than another card.
   =========================================================================== */
.sim {
  border-top: 3px solid var(--cp);
  margin-bottom: 1.25rem;
}

.sim__body {
  padding: 1.1rem 1.25rem 1.25rem;
}

.sim[data-busy="true"] {
  cursor: progress;
}

.sim__buttons {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 0.6rem;
  margin: 1rem 0;
}

.button--scenario {
  display: grid;
  gap: 0.2rem;
  text-align: left;
  padding: 0.6rem 0.75rem;
  font-size: 0.875rem;
  font-weight: 600;
  background: var(--card);
  color: var(--ink);
  border-color: var(--rule-strong);
}

.button--scenario:hover {
  background: var(--cp-wash);
  border-color: var(--cp);
}

.button--scenario span {
  font-family: var(--sans);
  font-size: 0.75rem;
  font-weight: 400;
  color: var(--ink-soft);
}

.button--danger {
  width: auto;
  background: var(--flag);
  border-color: var(--flag);
}

.button--danger:hover {
  background: var(--flag-deep);
}

.sim__custom,
.sim__secret {
  border-top: 1px solid var(--rule);
  padding-top: 0.85rem;
  margin-top: 0.85rem;
}

.sim__custom summary,
.sim__secret summary {
  font-family: var(--mono);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-soft);
  cursor: pointer;
}

.sim__custom-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 0.75rem;
  align-items: end;
  margin-top: 0.85rem;
}

.sim__custom label,
.sim__secret label {
  display: grid;
  gap: 0.3rem;
}

.sim__custom span,
.sim__secret span {
  font-size: 0.75rem;
  font-weight: 500;
}

.sim__custom select,
.sim__custom input,
.sim__secret input {
  width: 100%;
  padding: 0.45rem 0.55rem;
  font-family: var(--mono);
  font-size: 0.8125rem;
  color: var(--ink);
  background: var(--card-sunk);
  border: 1px solid var(--rule-strong);
  border-radius: var(--radius-tight);
}

.sim__secret {
  margin-bottom: 0.85rem;
}

.sim__secret p {
  font-size: 0.75rem;
  color: var(--ink-soft);
  margin-top: 0.5rem;
  max-width: 62ch;
}

.sim__dlq {
  border-top: 1px solid var(--rule);
  padding-top: 0.95rem;
  margin-top: 0.25rem;
}

.sim__dlq p {
  font-size: 0.75rem;
  color: var(--ink-soft);
  margin-top: 0.55rem;
  max-width: 68ch;
}

.sim__dlq code {
  font-family: var(--mono);
}

.sim-log {
  list-style: none;
  margin: 1.1rem 0 0;
  padding: 0.7rem 0 0;
  border-top: 1px solid var(--rule);
  display: grid;
  gap: 0.3rem;
  max-height: 15rem;
  overflow-y: auto;
}

.sim-log li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.6rem;
  font-family: var(--mono);
  font-size: 0.75rem;
  padding: 0.25rem 0.4rem;
  border-left: 2px solid var(--rule);
}

.sim-log li[data-tone="good"] {
  border-left-color: var(--settled);
}

.sim-log li[data-tone="bad"] {
  border-left-color: var(--flag);
  background: var(--flag-wash);
}

.sim-log li[data-tone="wait"] {
  border-left-color: var(--held);
}

.sim-log__time {
  color: var(--ink-faint);
  font-variant-numeric: tabular-nums;
}

.sim-log__empty {
  color: var(--ink-faint);
  border-left-color: transparent;
}

/* --- Dead-letter panel ----------------------------------------------------- */
.dlq {
  border-left: 4px solid var(--flag);
}

.dlq__body {
  padding: 1rem 1.25rem 1.25rem;
}

.dlq .held-list li {
  background: var(--flag-wash);
  border-left-color: var(--flag);
}

/* --- Narrow screens: drop the two columns whose content already repeats in
       the "what this means" cell, rather than letting anything clip. -------- */
@media (max-width: 1080px) {
  .orders {
    min-width: 700px;
  }
  .col-order,
  .col-delivery,
  .orders td.cell-order,
  .orders td.cell-delivery,
  .orders th.head-order,
  .orders th.head-delivery {
    display: none;
  }
  .orders tr[data-flagged="true"] td:first-child {
    box-shadow: inset 3px 0 0 var(--flag);
  }
}