/* ===========================================================================
   Walkaround - the receipt grammar.
   Taken from the approved design (plan 3, receipt.css). The values underneath
   it are the platform token contract (--app-*), so light and dark both work;
   the plan's own variable names are kept as aliases so the grammar below is
   the design's, unchanged.
   =========================================================================== */

:root {
  --app-bg: #f9f8f5;
  --app-surface: #ffffff;
  --app-surface-2: #f2f0ea;
  --app-border: #e6e3dc;
  --app-text: #17181b;
  --app-muted: #5d6068;
  --app-subtle: #8b8e95;
  --app-accent: #3a6ff0;
  --app-good: #1f9d6a;
  --app-bad: #d8453b;
  --app-warn: #b7791f;
  --app-font: 'Atkinson Hyperlegible Next', 'Atkinson Hyperlegible', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --app-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --app-radius: 6px;
  --app-shadow: 0 1px 2px rgba(0, 0, 0, .05), 0 22px 44px -30px rgba(0, 0, 0, .45);
  color-scheme: light;

  /* the design's own names, aliased onto the tokens above */
  --bg: var(--app-bg);
  --surface: var(--app-surface);
  --surface-2: var(--app-surface-2);
  --border: var(--app-border);
  --text: var(--app-text);
  --muted: var(--app-muted);
  --subtle: var(--app-subtle);
  --accent: var(--app-accent);
  --good: var(--app-good);
  --bad: var(--app-bad);
  --warn: var(--app-warn);
  --font: var(--app-font);
  --mono: var(--app-mono);
}

[data-app-mode="dark"],
[data-theme="dark"] {
  --app-bg: #1d1e21;
  --app-surface: #25262a;
  --app-surface-2: #2c2d32;
  --app-border: #37383e;
  --app-text: #ecebe7;
  --app-muted: #a9aab0;
  --app-subtle: #7c7e85;
  --app-accent: #7aa2ff;
  --app-good: #3ccf8e;
  --app-bad: #ff6b5e;
  --app-warn: #e3a84a;
  --app-shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 22px 44px -30px rgba(0, 0, 0, .8);
  color-scheme: dark;
}

* { box-sizing: border-box; }

/* ---- the roll ------------------------------------------------------------ */

.roll {
  position: relative; width: 440px; max-width: 100%;
  background: var(--surface); color: var(--text);
  font: 12.5px/1.5 var(--mono);
  padding: 30px 26px 32px;
  box-shadow: var(--app-shadow);
}
.roll::before, .roll::after {
  content: ''; position: absolute; left: 0; right: 0; height: 8px;
  background: radial-gradient(circle at 5px 8px, var(--bg) 4.6px, transparent 5px) 0 0 / 10px 8px repeat-x;
}
.roll::before { top: -8px; }
.roll::after { bottom: -8px; transform: scaleY(-1); }
.roll.narrow { width: 330px; }
.centre { text-align: center; }
.brand { font: 700 13px/1 var(--mono); letter-spacing: .34em; text-transform: uppercase; }
.brand small { display: block; font: 400 10px/1.6 var(--mono); letter-spacing: .18em; color: var(--subtle); margin-top: 7px; }
.rule { border: 0; border-top: 1px solid var(--text); margin: 12px 0; }
.rule.thin { border-top: 1px solid var(--border); }
.rule.dash { border-top: 1px dashed var(--border); }
.lab { font: 700 9.5px/1 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--subtle); }
.lab.ink { color: var(--text); }

.meta { display: flex; justify-content: space-between; gap: 12px; font-size: 11px; color: var(--muted); }
.meta b { color: var(--text); font-weight: 600; }

/* The total: a count of ways in, not a score. The stamp sits in the flow
   beside it, so it can never cover the header or clip the figure. */
.verdict { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 4px 0 12px; flex-wrap: wrap; }
.verdict .grand { text-align: right; margin: 0; margin-left: auto; }
.grand { text-align: right; margin: 14px 0 4px; }
.grand .n { font: 700 46px/0.9 var(--mono); letter-spacing: -.04em; }
.grand .n.bad { color: var(--bad); }
.grand .n.good { color: var(--good); }
.grand .of { font: 500 10px/1.4 var(--mono); color: var(--subtle); letter-spacing: .14em; text-transform: uppercase; }

/* A line item: name, dotted leader, consequence, then evidence underneath. */
.ln { display: flex; align-items: baseline; gap: 6px; padding: 7px 0 0; }
.ln .nm { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ln .ld { flex: 1 1 20px; border-bottom: 1px dotted var(--subtle); transform: translateY(-3px); }
.ln .val { font-weight: 700; white-space: nowrap; letter-spacing: .04em; }
.ln .val.bad { color: var(--bad); }
.ln .val.good { color: var(--good); }
.ln .w { flex: none; width: 22px; font-weight: 700; }
.ln .w.bad { color: var(--bad); }
.ln .w.good { color: var(--good); }
.ln .w.na { color: var(--subtle); }
.say { color: var(--muted); padding: 1px 0 0 28px; font-size: 11.5px; }
.say.struck { color: var(--subtle); text-decoration: line-through; text-decoration-thickness: 1px; }
/* The rescan keeps the old line, struck through, above the new one. */
.ln.struck { color: var(--subtle); text-decoration: line-through; text-decoration-thickness: 1px; }
.ln.struck .val, .ln.struck .w, .ln.struck .nm { color: var(--subtle); }
.ev { margin: 6px 0 0 28px; padding: 7px 9px; border-left: 2px solid var(--accent); background: var(--surface-2); font-size: 10.5px; color: var(--muted); white-space: pre-wrap; overflow-wrap: anywhere; word-break: break-word; }
.fix { margin: 6px 0 0 28px; padding: 7px 9px; border: 1px dashed var(--border); font-size: 11px; }
.fix .lab { display: block; margin-bottom: 3px; }

/* The stamp is the verdict. One per receipt, in the flow beside the count. */
.stamp {
  display: inline-block; transform: rotate(-2.5deg);
  border: 2.5px solid var(--bad); color: var(--bad); border-radius: 4px;
  font: 800 17px/1 var(--mono); letter-spacing: .12em; padding: 7px 10px;
  opacity: .9; mix-blend-mode: multiply; white-space: nowrap; max-width: 100%;
}
[data-app-mode="dark"] .stamp, [data-theme="dark"] .stamp { mix-blend-mode: screen; opacity: .95; }
.stamp.ok { border-color: var(--good); color: var(--good); }
.stamp.na { border-color: var(--subtle); color: var(--subtle); }

/* Sealed: the rest of the roll exists, folded, until it is paid for. */
.sealed {
  margin-top: 14px; padding: 16px 12px; text-align: center;
  border-top: 1px dashed var(--border); border-bottom: 1px dashed var(--border);
  background: repeating-linear-gradient(-45deg, var(--surface-2) 0 7px, transparent 7px 14px);
}
.sealed b { display: block; font-size: 12px; letter-spacing: .04em; }
.sealed span { color: var(--muted); font-size: 11px; }
.sealed .buy { display: inline-block; margin-top: 9px; padding: 8px 14px; border: 1px solid var(--text); border-radius: 4px; font: 700 11px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; }
.small { font-size: 10px; line-height: 1.6; color: var(--subtle); }
.small b { color: var(--muted); }
.barcode { display: flex; gap: 2px; align-items: flex-end; height: 30px; margin: 12px 0 4px; justify-content: center; overflow: hidden; }
.barcode i { display: block; background: var(--text); width: 2px; flex: none; }
.barcode i:nth-child(3n) { width: 4px; }
.barcode i:nth-child(5n) { width: 1px; }

/* Narrow: 390px is a real width for this page, so the roll gives up padding
   before it gives up content. Nothing here may cause a sideways scroll. */
@media (max-width: 470px) {
  .roll { padding: 26px 16px 28px; font-size: 11.5px; }
  .roll.narrow { width: 100%; }
  .ln { gap: 5px; }
  .ln .w { width: 16px; }
  .ln .val { font-size: 11px; }
  .ln .nm { font-size: 11px; }
  .say { padding-left: 21px; font-size: 11px; }
  .ev, .fix { margin-left: 21px; }
  .grand .n { font-size: 38px; }
  .verdict { gap: 8px; }
  .stamp { font-size: 13px; padding: 5px 8px; letter-spacing: .08em; }
  .brand { letter-spacing: .22em; }
  .barcode i, .barcode i:nth-child(3n), .barcode i:nth-child(5n) { width: 2px; }
}