/* ===================================================================================================================
   Papertrail brand (2026-10-23, brand/receipt/brand.md): an ink page with paper receipts on it and one red stamp.
   Loaded after site.css on every v2 page (landing, /c, /dd, /tiers, /chat, error pages) and overrides its palette
   theme. Ink #141414 · Paper #F4F1E8 · Stamp red #D2261F · Caution amber #B7791F · Graphite #6E6A62 · Rule #E4DED0.
   Newsreader (wordmark, headlines, reading) + JetBrains Mono (labels, numbers, addresses). No gradients, no glass.
   Contrast: red and amber text only on paper (red 4.6:1; amber text uses a darker ink-amber, 5.2:1); on the ink page
   small text is paper or warm grey, red is for shapes and large type. Danger stays red and "ok" is ink: the verdict
   colours keep their meaning on this site. Delete this file's <link> to roll back.
   =================================================================================================================== */
:root {
  --pt-ink: #141414; --pt-paper: #f4f1e8; --pt-red: #d2261f; --pt-amber: #b7791f; --pt-graphite: #6e6a62; --pt-rule: #e4ded0;
  --display: Newsreader, "Iowan Old Style", Georgia, serif;
  --sans: Newsreader, "Iowan Old Style", Georgia, serif;
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  /* the ink page */
  --bg: #141414; --surface: #1c1c1b; --surface-2: #262624; --sel: #2a2a28; --line: #34332f; --line-strong: #4a4843;
  --fg: #f4f1e8; --muted: #c9c4b8; --dim: #a29d92; --on-fg: #141414;
  --accent: #d2261f; --accent-ink: #f4f1e8; --link: #f4f1e8;
  --red: #ff7b72; --red-bg: rgb(210 38 31 / .18);
  --amber: #e2a54a; --amber-bg: rgb(183 121 31 / .18);
  --green: #f4f1e8; --green-bg: rgb(244 241 232 / .08);
  --grey-bg: rgb(244 241 232 / .06);
  --violet: #d2261f; --paper: #f4f1e8; --ink: #141414;
  --radius: 4px;
  --pal-shadow: none;
  color-scheme: dark;
}
/* paper: every receipt-like surface re-declares the tokens, so everything inside reads as ink on paper */
.pal, .card, .progress, .dd-panel, .dd-ticket, .agent, .sc, .how .steps li, .legend li, .live, .rec-stream, .hero-stream, .notice, .viz, .chat-log .bot {
  --bg: #fffdf7; --surface: #f4f1e8; --surface-2: #ebe6d9; --sel: #ece7da; --line: #dcd5c5; --line-strong: #bfb7a5;
  --fg: #141414; --muted: #45423c; --dim: #625e57; --on-fg: #f4f1e8;
  --accent: #d2261f; --accent-ink: #f4f1e8; --link: #b21f19;
  --red: #c4231c; --red-bg: rgb(210 38 31 / .08);
  --amber: #8a5a12; --amber-bg: rgb(183 121 31 / .13);
  --green: #141414; --green-bg: rgb(20 20 20 / .06);
  --grey-bg: rgb(110 106 98 / .1);
  color-scheme: light;
  color: var(--fg);
}

html { background: var(--pt-ink); }
body { font: 17px/1.55 var(--sans); color: var(--fg); background: var(--pt-ink); }
::selection { background: rgb(210 38 31 / .35); color: inherit; }
a { color: var(--link); text-decoration-color: var(--pt-red); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid var(--pt-red); outline-offset: 2px; border-radius: 2px; }
h1, h2, h3, .coin-name, .dd-title, .v-main { font-family: var(--display); font-weight: 500; letter-spacing: -.02em; }
.mono, code, pre, kbd { font-family: var(--mono); }
.hl { color: var(--pt-red); }

/* header: the lockup (favicon art + Newsreader wordmark) on the ink band, mono nav */
.top { border-bottom: 1px solid var(--line); }
.brand { display: inline-flex; align-items: center; gap: 10px; color: var(--pt-paper); text-decoration: none; }
.brand-logo { width: 28px; height: 28px; flex: none; display: block; }
.brand-word { font: 500 26px/1 var(--display); letter-spacing: -.02em; color: var(--pt-paper); }
.brand b { font: 800 11px var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--pt-paper); background: var(--pt-red); padding: 3px 6px; border-radius: 2px; }
.brand b:empty { display: none; }
.top nav a { font: 500 13px var(--mono); color: var(--muted); border-radius: 2px; }
.top nav a:hover { color: var(--pt-paper); background: var(--surface-2); }
.top nav a[aria-current="page"] { color: var(--pt-paper); text-decoration: underline; text-decoration-color: var(--pt-red); text-decoration-thickness: 2px; text-underline-offset: 6px; }

/* footer */
.foot { border-top: 1px dashed var(--line-strong); color: var(--dim); font: 13px/1.7 var(--mono); }
.foot strong { color: var(--pt-paper); }
.foot a { color: var(--muted); }
.foot-brand { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; }
.foot-brand img { width: 20px; height: 20px; }
.foot-brand span { font: 500 20px/1 var(--display); letter-spacing: -.02em; color: var(--pt-paper); }

/* type on the ink page */
.hero h1, .land h1 { font: 500 clamp(38px, 6.4vw, 68px)/1.02 var(--display); letter-spacing: -.02em; }
.lede, .land .lede { color: var(--muted); }
.eyebrow { font: 500 12px var(--mono); color: var(--muted); background: none; border: 1px solid var(--line-strong); border-radius: 2px; }
.eyebrow .dot { background: var(--pt-red); box-shadow: none; border-radius: 50%; }
.sec-h, .dd-head .eyebrow { display: inline-flex; align-items: center; gap: 10px; font: 700 12px var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--pt-paper); }
.sec-h::before { content: ""; width: 22px; height: 3px; background: var(--pt-red); flex: none; }
.sec-sub, .proof, .hint { color: var(--dim); }
.pal-h, .dd-panel h2, .coverage h3, .progress h2, .story .lbl, .live-label, .rec-top h2, .hs-top h2 { font-family: var(--mono); letter-spacing: .12em; }
.pal-cmd { color: var(--pt-red); font-weight: 700; }

/* paper surfaces: square corners, flat, a hairline instead of a drop shadow */
.pal, .card, .progress, .dd-panel, .dd-ticket, .agent, .sc, .how .steps li, .legend li, .live, .rec-stream, .hero-stream, .viz {
  background: var(--surface); border: 1px solid var(--line); border-radius: 3px; box-shadow: none; backdrop-filter: none;
}
.notice { background: var(--surface); border: 1px solid var(--line); border-left: 4px solid var(--pt-amber); border-radius: 3px; color: var(--fg); }
.notice.err { border-left-color: var(--pt-red); background: var(--surface); }
/* the torn bottom edge of a receipt (brand mark / banner-2): zigzag cut with a mask, content keeps its padding */
.card, .dd-ticket, .sc {
  --tear: conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) 50% / 14px 100%;
  -webkit-mask: var(--tear); mask: var(--tear); padding-bottom: 10px;
}
.card-foot { padding-bottom: 16px; }

/* buttons: ink on paper, paper on ink (one red accent per view stays the stamp) */
.btn-primary { background: var(--fg); color: var(--on-fg); border: 1px solid var(--fg); border-radius: 2px; font: 700 14px var(--mono); letter-spacing: .04em; }
.btn-primary:hover:not(:disabled) { background: var(--fg); filter: none; box-shadow: 3px 3px 0 var(--pt-red); }
.btn-primary kbd { border-color: currentColor; }
.btn { background: transparent; color: var(--fg); border: 1px solid var(--line-strong); border-radius: 2px; font: 500 14px var(--mono); }
.btn:hover { background: var(--sel); border-color: var(--fg); }
.ca-form input, .wl-form input, .chat-form input { font-family: var(--mono); color: var(--fg); }
.ca-form input::placeholder { font-family: var(--mono); color: var(--dim); }
.wl-form input, .chat-form input { background: var(--bg); border: 1px solid var(--line-strong); border-radius: 2px; }
.ca-form:focus-within { box-shadow: inset 0 -2px 0 var(--pt-red); }
.ca-form.ok { box-shadow: inset 0 -2px 0 var(--fg); } .ca-form.bad { box-shadow: inset 0 -2px 0 var(--pt-amber); }
.pal-foot { border-top: 1px dashed var(--line-strong); }
.pal-q, .ca-form { border-bottom: 1px dashed var(--line-strong); }

/* feed and showcase */
.feed a:hover, .feed a:focus-visible { background: var(--sel); }
.feed .sym, .sc .sym { font-family: var(--display); font-weight: 600; font-size: 18px; }
.feed .when, .sc-pick, .sc-foot { color: var(--dim); }
.sc:hover, .sc:focus-visible { background: var(--surface); border-color: var(--fg); }
.sc:hover .sc-foot { color: var(--accent); }
.av, .coin-mono { background: var(--surface-2); border: 1px solid var(--line); border-radius: 2px; }
.av .mono, .coin-mono { color: var(--muted); }
.coin-img { border-radius: 2px; }
.how .steps .n { color: var(--pt-red); font-weight: 700; }
.how .steps h3 { font-size: 22px; }

/* verdict chips and labels */
.vb, .pill, .lbl, .kind { border-radius: 2px; }
.vb-unverified, .vb-unchecked, .s-unchecked { color: var(--dim); }
.k-tech { color: var(--fg); border-color: var(--line-strong); }

/* coin card */
.card-head { border-bottom: 1px dashed var(--line-strong); }
.asof-stamp { border: 1px dashed var(--line-strong); border-radius: 2px; color: var(--dim); }
.asof-stamp.stale { color: var(--amber); border-color: var(--pt-amber); background: var(--amber-bg); }
.verdict, .verdict.v-red, .verdict.v-caution, .verdict.v-clean, .verdict.v-unchecked { background: var(--bg); border: 1px solid var(--line); border-left-width: 4px; border-radius: 2px; color: var(--fg); }
.verdict.v-red { border-left-color: var(--pt-red); background: var(--red-bg); }
.verdict.v-caution { border-left-color: var(--pt-amber); background: var(--amber-bg); }
.verdict.v-clean { border-left-color: var(--pt-ink); }
.verdict .stamp-line, .v-clean .stamp-line { color: var(--muted); }
.v-unchecked .stamp, .dd-stamp.unchecked { color: var(--dim); }
.v-main { font-weight: 600; }
.story { background: var(--bg); border: 1px solid var(--line); border-radius: 2px; }
.row + .row { border-top: 1px dashed var(--line); }
.row:hover { background: var(--sel); border-radius: 0; }
.coverage { border-top: 1px dashed var(--line-strong); }
.card-foot { border-top: 1px dashed var(--line-strong); }
.empty-card .stamp { font: 800 56px/1 var(--mono); color: var(--pt-red); letter-spacing: .04em; }
.live .checks { color: var(--accent); }

/* recorded stream, charts, screens */
.rec-stream, .hero-stream { background: var(--bg); }
.rec-top, .hs-top { background: var(--surface); border-bottom: 1px dashed var(--line-strong); }
.rec-dot { background: var(--pt-red); }
@keyframes recpulse { 50% { box-shadow: 0 0 0 5px rgb(210 38 31 / .2); opacity: .6; } }
.chart .track { fill: var(--surface-2); }
.chart .node { fill: var(--surface-2); stroke: var(--line-strong); }
.c-dev { fill: var(--pt-ink); stroke: var(--pt-ink); } .c-top { fill: var(--pt-graphite); stroke: var(--pt-graphite); }
.c-moved { fill: var(--pt-amber); stroke: var(--pt-amber); } .c-moved-n { stroke: var(--pt-amber); }
.viz-key .k.c-dev { background: var(--pt-ink); } .viz-key .k.c-top { background: var(--pt-graphite); } .viz-key .k.c-moved { background: var(--pt-amber); }
.viz-key .k { border-radius: 0; }
.dd-screen .screen, .rec-screen { background: var(--pt-ink); border-radius: 2px; }
.dd-screen figcaption, .rec-screen figcaption { background: rgb(20 20 20 / .82); color: var(--pt-paper); border-radius: 2px; }
.live-dot { color: var(--pt-paper); background: var(--pt-red); border-color: var(--pt-red); border-radius: 2px; }

/* live DD */
.dd .meter { font-family: var(--mono); background: var(--surface); border: 1px solid var(--line); border-radius: 2px; }
.dd-stages li.active .dot { background: var(--pt-red); box-shadow: 0 0 0 4px rgb(210 38 31 / .18); }
.dd-stages li.done .dot { background: var(--fg); }
.dd-stages li, .dd-log li { border-radius: 2px; }

/* agent waitlist, chat, tiers */
.agent .tag { color: var(--pt-red); border-color: var(--pt-red); border-radius: 2px; font-weight: 700; }
.chat-log .me { background: var(--pt-ink); color: var(--pt-paper); border-radius: 2px; }
.chat-log .bot { background: var(--surface); color: var(--fg); border: 1px solid var(--line); border-radius: 2px; }
.legend li { background: var(--surface); }
.legend p { color: var(--muted); }

@media (max-width: 640px) {
  .brand-word { font-size: 22px; }
  body { font-size: 16px; }
}
@media (prefers-reduced-motion: reduce) { .rec-dot { animation: none; } }
@media (forced-colors: active) { .card, .dd-ticket, .sc { -webkit-mask: none; mask: none; } }
