/* No web fonts, no imports. System sans for prose, mono for digests. */
:root {
  --ink: #16181d; --ink-2: #4b5160; --paper: #f7f7f4; --card: #ffffff; --rule: #d6d8de; --rule-2: #a7abb6;
  --ok: #17693a; --warn: #8a5a00; --bad: #a3282c; --unk: #4b5160; --focus: #2457d6;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
  --s1: .5rem; --s2: .875rem; --s3: 1.25rem; --s4: 2rem; --s5: 3.25rem;
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root { --ink: #e8e9ec; --ink-2: #a9adb8; --paper: #121317; --card: #1a1c22; --rule: #2d3039; --rule-2: #4a4e5a;
          --ok: #6fce8f; --warn: #e2b25f; --bad: #ff8b8e; --unk: #a9adb8; --focus: #8fb2ff; }
}
* { box-sizing: border-box; }
html { background: var(--paper); color: var(--ink); font: 16px/1.55 var(--sans); -webkit-font-smoothing: antialiased; }
body { max-width: 1120px; margin: 0 auto; padding: var(--s5) var(--s3) var(--s5); }
code, .mono, #ledger, textarea { font-family: var(--mono); }

header { margin-bottom: var(--s5); }
.kicker { font-family: var(--mono); font-size: .8rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-2); margin: 0 0 var(--s1); }
h1 { font-size: clamp(1.75rem, 3vw, 2.25rem); line-height: 1.15; letter-spacing: -.01em; margin: 0 0 var(--s2); }
.lede { font-size: 1.05rem; color: var(--ink); margin: 0 0 var(--s2); max-width: 90ch; }
.meta { font-size: .85rem; color: var(--ink-2); margin: 0; }
.meta code { font-size: .85rem; }

.cols { display: grid; gap: var(--s4); grid-template-columns: 1fr; }
@media (min-width: 900px) { .cols { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); } .col-wide { grid-column: 1 / -1; } }
section { min-width: 0; }
h2 { font-family: var(--mono); font-size: .8rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-2); border-bottom: 1px solid var(--rule); padding-bottom: var(--s1); margin: 0 0 var(--s3); }
p { margin: var(--s1) 0; }
a { color: inherit; text-decoration: underline; text-underline-offset: .18em; text-decoration-color: var(--rule-2); }
a:hover { text-decoration-color: currentColor; }

.row { display: grid; gap: var(--s2); margin-bottom: var(--s3); }
.examples { border-top: 1px solid var(--rule); padding-top: var(--s3); color: var(--ink-2); font-size: .95rem; }
.or { text-align: center; color: var(--ink-2); font-size: .85rem; }
label { display: block; font-size: .95rem; }
.drop { background: var(--card); border: 1.5px dashed var(--rule-2); border-radius: 8px; padding: var(--s4) var(--s3); text-align: center; cursor: pointer; transition: border-color .12s, background .12s; }
.drop:hover, .drop.over { border-color: var(--ink); border-style: solid; }
.drop input { display: block; margin: var(--s2) auto 0; font-family: var(--sans); font-size: .85rem; }
textarea { width: 100%; font-size: .85rem; line-height: 1.5; background: var(--card); color: inherit; border: 1px solid var(--rule); border-radius: 8px; padding: var(--s2); resize: vertical; }
button { font: inherit; font-size: .95rem; background: var(--card); color: var(--ink); border: 1px solid var(--rule-2); border-radius: 6px; padding: .55rem 1rem; cursor: pointer; text-align: left; transition: background .12s, border-color .12s; }
button:hover { border-color: var(--ink); }
button:active { background: var(--rule); }
:is(button, input, textarea, a, summary):focus-visible { outline: 2.5px solid var(--focus); outline-offset: 2px; border-radius: 4px; }

.verdict { background: var(--card); border: 1px solid var(--rule); border-left: 6px solid var(--rule-2); border-radius: 8px; padding: var(--s3) var(--s3); box-shadow: 0 1px 2px rgba(0,0,0,.04), 0 6px 18px rgba(0,0,0,.05); }
.verdict .quiet { color: var(--ink-2); margin: 0; }
.verdict .headline { font-size: 1.15rem; line-height: 1.4; margin: 0 0 var(--s2); }
.verdict strong { font-family: var(--mono); font-size: .8em; letter-spacing: .1em; text-transform: uppercase; }
.verdict .glyph { display: inline-block; width: 1.4em; font-weight: 700; }
.verdict p + p { margin-top: .35rem; }
.verdict.intact { border-left-color: var(--ok); }
.verdict.intact .headline { color: var(--ok); }
.verdict.unsealed { border-left-color: var(--warn); }
.verdict.unsealed .headline { color: var(--warn); }
.verdict.broken { border-left-color: var(--bad); }
.verdict.broken .headline { color: var(--bad); }
.verdict.malformed { border-left-color: var(--unk); border-left-style: dashed; }
.verdict.unsigned { border-left-color: var(--warn); border-left-style: double; }
.verdict.unsigned .headline { color: var(--warn); }
.caveat { border-top: 1px solid var(--rule); padding-top: var(--s1); margin-top: var(--s2) !important; color: var(--warn); font-size: .95rem; }
header .caveat { border: 1px solid var(--warn); border-radius: 6px; padding: var(--s1) var(--s2); }

.tracks { list-style: none; padding: 0; margin: var(--s2) 0 0; display: flex; flex-wrap: wrap; gap: .4rem .9rem; font-size: .9rem; }
.tracks li { border: 1px solid var(--rule); border-radius: 4px; padding: .15rem .5rem; }
.track-name { color: var(--ink-2); margin-right: .35em; }
.track-intact { color: var(--ok); } .track-broken, .track-unverified { color: var(--bad); } .track-pending { color: var(--ink-2); }

.break { border-left: 3px solid var(--bad); padding: var(--s1) var(--s3); margin-top: var(--s3); font-family: var(--mono); font-size: .85rem; overflow-wrap: anywhere; }
.break .where { font-family: var(--sans); font-size: 1rem; font-weight: 600; margin: 0 0 var(--s1); }
.receipts { color: var(--ink-2); font-size: .9rem; }

details { margin-top: var(--s3); }
summary { cursor: pointer; color: var(--ink-2); font-size: .9rem; }
#ledger { font-size: .8rem; padding-left: 1.5rem; margin-top: var(--s2); }
#ledger li { margin: .25rem 0; overflow-wrap: anywhere; }

.file-result { background: var(--card); border: 1px solid var(--rule); border-left: 6px solid var(--rule-2); border-radius: 8px; padding: var(--s2) var(--s3); overflow-wrap: anywhere; }
.file-result.exact { border-left-color: var(--ok); }
.file-result.audio { border-left-color: var(--warn); }
.file-result.none { border-left-color: var(--bad); }
.file-result::before { font-family: var(--mono); font-size: .8em; letter-spacing: .1em; font-weight: 700; margin-right: .6em; }
.file-result.exact::before { content: "EXACT"; color: var(--ok); }
.file-result.audio::before { content: "SAME AUDIO"; color: var(--warn); }
.file-result.none::before { content: "NO MATCH"; color: var(--bad); }

body.prose main { max-width: 72ch; }
body.prose h2 { margin-top: var(--s4); }
body.prose p { margin: var(--s2) 0; line-height: 1.6; }

footer { margin-top: var(--s5); border-top: 1px solid var(--rule); padding-top: var(--s3); color: var(--ink-2); font-size: .85rem; }
footer p { margin: .35rem 0; }