/* ===========================================================================
   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 ------------------------------------------------------------ */

/* The roll is read at arm's length on a screen, not held in the hand, so it is
   620px wide and set at 15px: the widths and sizes below are the legibility
   floor, not a style choice. */
.roll {
  position: relative; width: 620px; max-width: 100%;
  background: var(--surface); color: var(--text);
  font: 15px/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 15px/1 var(--mono); letter-spacing: .34em; text-transform: uppercase; }
.brand small { display: block; font: 400 12px/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 11px/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: 13px; 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 52px/0.9 var(--mono); letter-spacing: -.04em; }
.grand .n.bad { color: var(--bad); }
.grand .n.good { color: var(--good); }
.grand .of { font: 500 12px/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: 8px 0 0; }
.ln .nm { font-size: 14.5px; 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-size: 14.5px; 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); }
/* The signed-in marker: a line whose answer came from inside a session. It is
   deliberately quiet and unmistakable, printed beside the line's name, and only
   ever on a line the session actually decided. */
.sg { flex: none; font-family: var(--mono); font-size: 9.5px; font-weight: 700; letter-spacing: .08em; color: var(--accent);
  border: 1px solid currentColor; border-radius: 3px; padding: 1px 4px; transform: translateY(-1px); }
.ln.struck .sg { display: none; }
.say { color: var(--muted); padding: 2px 0 0 28px; font-size: 13.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: 7px 0 0 28px; padding: 8px 10px; border-left: 2px solid var(--accent); background: var(--surface-2); font-size: 13px; color: var(--muted); white-space: pre-wrap; overflow-wrap: anywhere; word-break: break-word; }
.fix { margin: 7px 0 0 28px; padding: 8px 10px; border: 1px dashed var(--border); font-size: 13.5px; }
.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 21px/1 var(--mono); letter-spacing: .12em; padding: 8px 11px;
  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: 13.5px; letter-spacing: .04em; }
.sealed span { color: var(--muted); font-size: 13px; }
.sealed .buy { display: inline-block; margin-top: 9px; padding: 9px 15px; border: 1px solid var(--text); border-radius: 4px; font: 700 13px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; }
.small { font-size: 12px; line-height: 1.65; 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; }

/* ---- the photographs (sample receipts only) ------------------------------
   A demo receipt prints two photographs of the page it is about. They sit
   between the header and the first line, at the full width of the roll, and
   the phone one keeps its own 320px beside its caption wherever that fits. */

.shots { margin: 16px 0 4px; display: grid; gap: 14px; }
.shot { display: grid; gap: 6px; min-width: 0; }
.shot img {
  display: block; width: 100%; height: auto;
  border: 1px solid var(--border); border-radius: 3px;
  background: var(--surface-2);
}
.shot .cap { font: 400 12px/1.5 var(--mono); color: var(--subtle); }
.shot .cap b { color: var(--muted); font-weight: 700; }
/* The phone shot and its caption, side by side: 320px of picture, the rest
   of the width for the words. It folds to one column when there is no room. */
.shots .pair { display: grid; grid-template-columns: 320px minmax(0, 1fr); gap: 14px; align-items: start; }
.shots .pair .shot img { width: 320px; max-width: 100%; }
.shots .note { font: 400 12px/1.55 var(--mono); color: var(--subtle); }

/* 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. The
   sizes here RISE from the values they replace: a phone is a small window onto
   the same text, not a reason to print it smaller. */
@media (max-width: 470px) {
  .roll { padding: 26px 16px 28px; font-size: 14px; }
  .roll.narrow { width: 100%; }
  .ln { gap: 5px; }
  .ln .w { width: 16px; }
  .ln .val { font-size: 13.5px; }
  .ln .nm { font-size: 13.5px; }
  .sg { font-size: 9px; }
  .say { padding-left: 21px; font-size: 13px; }
  .ev, .fix { margin-left: 21px; font-size: 12.5px; }
  .meta { font-size: 12px; }
  .small { font-size: 11.5px; }
  .grand .n { font-size: 44px; }
  .verdict { gap: 8px; }
  .stamp { font-size: 15px; padding: 6px 8px; letter-spacing: .08em; }
  .brand { letter-spacing: .22em; }
  .barcode i, .barcode i:nth-child(3n), .barcode i:nth-child(5n) { width: 2px; }
  .shots .pair { grid-template-columns: minmax(0, 1fr); }
  .shots .pair .shot img { width: 100%; }
  .shot .cap, .shots .note { font-size: 11.5px; }
}

/* ===========================================================================
   The SOTA Security Model block.
   A paid roll carries a second, separate section below the twelve lines: what
   the model noticed. It is fenced off from the receipt's own grammar on
   purpose - a hairline box and a tinted ground, so nobody reads a model's
   guess as a line the checks answered.
   =========================================================================== */
.sota {
  margin: 14px 0 0;
  padding: 12px 12px 14px;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--surface-2);
}
.sota > .lab { display: block; margin-bottom: 7px; }
.sota .small { color: var(--muted); }
.sota-finding {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px dashed var(--border);
}
.sota .ev { margin-left: 0; }
.sota .fix { margin-left: 0; background: var(--surface); }
.sota-could-not {
  margin-top: 14px;
  padding-top: 10px;
  border-top: 1px dashed var(--border);
}
.sev {
  display: inline-block;
  margin-right: 4px;
  padding: 2px 5px 3px;
  border: 1px solid currentColor;
  border-radius: 3px;
  font: 700 10px/1 var(--mono);
  letter-spacing: .12em;
  vertical-align: 1px;
}
.sev-high { color: var(--bad); }
.sev-medium { color: var(--warn); }
.sev-low { color: var(--muted); }
.sev-noted { color: var(--subtle); }

/* "For agents": a small block on the landing page and on /pricing, pointing at
   /llms.txt. Plain, and in the same voice as the rest of the page. */
.for-agents { font-size: 13.5px; color: var(--muted); }
.for-agents code { font: 12px/1.4 var(--mono); }

/* ---- the way to the full report ----------------------------------------- */
/* Below the model's read and above the small print: the roll is the record, the
   report is the same record held open. Paid receipts only - a free roll has no
   report to point at, and a sample is ours rather than a customer's. */
.reportlink {
  margin: 14px 0 0;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--surface-2);
}
.reportlink .lab { display: block; margin-bottom: 5px; }
.reportlink p { margin: 0 0 10px; }
.reportlink .btn { padding: 11px 15px; }
@media (max-width: 470px) {
  .reportlink { padding: 10px; }
  .reportlink .btn { display: block; width: 100%; }
}