/* records.css: the shared layer for the /receipts/ pillar (revamp/whole-apex,
   2026-10-13). Composes with either stylesheet layer (system.css on the door,
   palette.css + site.css on the editorial pages): every token has a fallback.
   Type sizes are system tokens only (type_gate). */

/* PLACEHOLDER: unruled copy, visibly marked so the owner can redline it in one
   pass. Loud by default. Nothing inside a .ph block is a claim. The small form
   (.ph--inline) marks a drafted line in place, beside the line it marks.
   THE QUIET TOGGLE (RULED 2026-10-14, the door review): html.ph-quiet collapses
   every .ph to a one-line chip, a dashed left rule in the context's quiet ink,
   for design review; the full text returns on hover or focus. /assets/ph.js sets
   the class from ?ph=quiet. Loud stays the default. */
.ph{display:block;margin:var(--s-4,1rem) 0;padding:.6rem .8rem;border:2px dashed #b42318;
  border-radius:6px;background:#fff4e5;color:#7a2e0e;font-family:var(--mono,ui-monospace,monospace);
  font-size:var(--t-xs);line-height:var(--lh-body,1.6);font-weight:400;font-style:normal;
  letter-spacing:0;text-transform:none;text-align:left;overflow-wrap:anywhere}
.ph--inline{display:inline;margin:0;padding:.05rem .3rem;border-width:1px;vertical-align:baseline}
/* The specificity fix: a dark context (.on-dark, .on-room) or a page rule on its
   parent must never repaint a placeholder. Same declarations, raised to (0,2,0). */
.on-dark .ph,.on-room .ph,.ph.ph{background:#fff4e5;color:#7a2e0e;border-color:#b42318}
/* THE NOTE FORM (2026-10-14, the craft pass): a draft mark that annotates a composed
   element without breaking it. Still loud in hue (the placeholder red ink and a dashed red
   rule), but no box and no fill: one small line hung at the element's right edge, a margin
   note, not debris. Inside running text it drops to its own line instead of gluing to the
   last word. Raised to (0,2,0) and declared after .ph.ph so it wins in loud mode; the
   quiet toggle below is (0,2,1) and still collapses it. */
.ph.ph--note{display:block;width:fit-content;max-width:100%;margin:var(--s-2) 0 0 auto;
  padding:.1rem 0 .1rem .6rem;border:0;border-left:1px dashed #b42318;border-radius:0;
  background:transparent;color:#7a2e0e;font-size:var(--t-xs);line-height:var(--lh-tight,1.3);text-align:right}
@media(max-width:799px){.ph.ph--note{margin-left:0;text-align:left}}
html.ph-quiet .ph,html.ph-quiet .on-dark .ph,html.ph-quiet .on-room .ph{
  display:block;max-width:var(--measure,40rem);margin:var(--s-2,.5rem) 0;padding:.1rem 0 .1rem .6rem;
  border:0;border-left:1px dashed currentColor;border-radius:0;background:transparent;
  color:var(--ink-3,rgba(42,33,24,.70));font-size:var(--t-xs);white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}
html.ph-quiet .ph--inline,html.ph-quiet .on-dark .ph--inline,html.ph-quiet .on-room .ph--inline{
  display:inline-block;max-width:12rem;margin:0 0 0 .3rem;vertical-align:baseline}
html.ph-quiet .ph:hover,html.ph-quiet .ph:focus-within{white-space:normal;overflow:visible}

/* THE SUBPAGE LAYER (2026-10-14, the subpage alignment, RULED spec). Every page of the
   pillar (and /about/) sits on system.css like the door. The page-specific sheets it still
   needs (verify.css, kit-request.css, recompute.css) read the old editorial token names;
   inside main.subpage those names resolve to the system's own tokens, so the sheets render
   in the door's palette without a page-local copy of the map. Scoped to .subpage, so the
   legacy pages that also load this file keep their own palette. */
.subpage{--accent:var(--a-2);--link:var(--a-2);--ink-900:var(--ink);--text:var(--ink-2);
  --muted:var(--ink-3);--quiet:var(--ink-3);--faint:var(--ink-3);--hairline:var(--line);
  --divider:var(--line-strong);--rule:var(--line);--bg:var(--on-act);--bg-alt:var(--g-2);
  --pass:var(--ok-ink);--fail:var(--bad-ink);--green:var(--ok-ink);--lcd:var(--l-2)}
/* section heads carried in lowercase markup are set in sentence case (as site.css did) */
.subpage h2::first-letter{text-transform:uppercase}
.subpage .mono{font-family:var(--mono)}
/* the shared instruments, in the door's voice: heads in ink (they were set in the accent),
   emphasis in ink, the quiet second-tier recompute buttons hover on the system's wash. */
.subpage .verify h2,.subpage .recompute h2{color:var(--ink);font-family:var(--serif);font-weight:400;
  font-size:var(--t-2xl);line-height:var(--lh-head)}
.subpage .verify-lede em,.subpage .recompute-lede em,.subpage .recompute-fold-body em{color:var(--ink)}
.subpage .recompute-run[data-op="reorder"]:hover:not(:disabled),
.subpage .recompute-run[data-op="tamper"]:hover:not(:disabled){background:var(--act-wash);border-color:var(--act)}

/* The claim of record on each case page: the instrument's value and boundary,
   quoted from the foundation record. A 1px frame on the card ground; the accent is a
   3px mark at the left edge, nothing more. */
.claim{margin:var(--s-6) 0 0;max-width:var(--measure);padding:var(--s-4) var(--s-5);
  border:1px solid var(--line);border-left:3px solid var(--a-2);border-radius:var(--r-md);background:var(--g-1)}
.claim__row{margin:var(--s-3) 0 0;font-size:var(--t-md);line-height:var(--lh-body);color:var(--ink)}
.claim__row:first-child{margin-top:0}
.claim__row ul{margin:var(--s-2) 0 0 var(--s-5);padding:0}
.claim__row li{margin:var(--s-1) 0;font-size:var(--t-sm)}
.claim__k{display:inline-block;min-width:5.5rem;margin-right:var(--s-2);font-family:var(--sans);
  font-size:var(--t-xs);font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--a-2)}
@media(max-width:640px){.claim{padding:var(--s-4)}.claim__k{display:block;margin:0 0 var(--s-1)}}

/* The request door on a case page: the form lives on /receipts/kits/. A quiet link
   (.btn .btn--quiet carries the look); this class is kit-request.js's hook. */
.kit-door__go:focus-visible{outline:3px solid var(--a-2);outline-offset:3px}

/* THE CASE PAGE TEMPLATE (the five case pages): the exhibit, its two verdict cards, the
   fingerprint block, the boundary callout. On system tokens; the system's .card, .note
   and .verdict are reset here where the case page uses those names for its own parts. */
.case .exhibit{margin:var(--s-8) 0 0;padding-top:var(--s-7);border-top:1px solid var(--line-strong)}
.case .exhibit>h2{margin-top:0}
.case .corpus{margin:var(--s-3) 0 0;max-width:var(--measure);font-size:var(--t-md);line-height:var(--lh-body);color:var(--ink-3)}
.case .corpus strong{color:var(--ink)}
.case .corpus em{font-style:italic;font-weight:400;color:var(--ink-3)}
.case .grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-5);align-items:start;margin-top:var(--s-6)}
@media(max-width:640px){.case .grid{grid-template-columns:1fr}}
.case .card{padding:var(--s-5);border-top-width:2px}
.case .card.green{border-top-color:var(--ok)}
.case .card.red{border-top-color:var(--bad)}
.case .card .verdict{margin:0;font-size:var(--t-sm);font-weight:600;align-items:center;gap:var(--s-2)}
.case .card .verdict::before{content:"";width:8px;height:8px;border-radius:50%;flex:none}
.case .card.green .verdict{color:var(--ok-ink)}
.case .card.green .verdict::before{background:var(--ok)}
.case .card.red .verdict{color:var(--bad-ink)}
.case .card.red .verdict::before{background:var(--bad)}
.case .op{margin:var(--s-2) 0 var(--s-4);font-size:var(--t-sm);line-height:var(--lh-lede);color:var(--ink-3)}
.case .op--ridge{margin:var(--s-2) 0 0}
.case .op a{color:var(--a-2)}
.case .row{display:flex;justify-content:space-between;align-items:center;gap:var(--s-3);padding:var(--s-2) 0;
  font-size:var(--t-sm);border-top:1px solid var(--line-soft)}
.case .row span:first-child{color:var(--ink-3)}
.case .row span:last-child{color:var(--ink);font-weight:500;font-variant-numeric:tabular-nums}
.case .row span[title]{font-family:var(--mono);font-weight:400;font-size:var(--t-xs);color:var(--ink);
  background:var(--chip);padding:.14rem .42rem;border-radius:var(--r-sm)}
.case .card .note{margin:var(--s-4) 0 0;padding:0;border:0;border-radius:0;background:none;
  font-size:var(--t-sm);line-height:var(--lh-body);color:var(--ink-2)}
.case .brake{margin:var(--s-4) 0 0;font-size:var(--t-sm);line-height:var(--lh-body);color:var(--bad-ink)}
.case .brake strong{color:var(--bad-ink)}
.case .digest{margin:var(--s-6) 0 0;padding:var(--s-3) var(--s-4);font-family:var(--mono);font-size:var(--t-xs);
  line-height:var(--lh-body);color:var(--ink-3);background:var(--chip);border-radius:var(--r-md)}
.case .digest strong{font-family:var(--sans);color:var(--ink)}
.case .scope{margin:var(--s-4) 0 0;max-width:var(--measure);font-size:var(--t-md);line-height:var(--lh-body);color:var(--ink-3)}
.case .bound{margin:var(--s-8) 0 0;padding:var(--s-5) var(--s-6);background:var(--g-2);
  border:1px solid var(--line);border-left:3px solid var(--a-2);border-radius:var(--r-md)}
.case .bound h2{margin-top:0}
.case .bound p{margin:var(--s-3) 0 0;max-width:var(--measure);font-family:var(--serif);font-size:var(--t-lg);
  line-height:var(--lh-body);color:var(--ink-2)}
.case .curve{margin-top:var(--s-6)}
@media(max-width:640px){.case .bound{padding:var(--s-4)}.case .bound p{font-size:var(--t-md)}}

/* Moved-here labels on the method page's depth layer. */
.depth{margin-top:var(--s-8);padding-top:var(--s-6);border-top:1px solid var(--line-strong)}
.depth__item{margin-top:var(--s-7)}
.moved__from{font-size:var(--t-xs);font-weight:600;letter-spacing:.08em;text-transform:uppercase;
  color:var(--ink-3);margin:var(--s-6) 0 var(--s-2)}
.moved__from a{color:var(--a-2)}

/* The records index cards. */
.recs{display:grid;grid-template-columns:1fr;gap:var(--s-4);margin-top:var(--s-6)}
.rec{display:block;padding:var(--s-5);background:var(--surface);color:inherit;text-decoration:none;
  border:1px solid var(--line);border-top:2px solid var(--a-2);border-radius:var(--r-md)}
.rec:hover,.rec:focus-visible{border-color:var(--a-2)}
.rec:focus-visible{outline:2px solid var(--a-2);outline-offset:2px}
.rec__name{margin:0 0 var(--s-2);font-size:var(--t-xs);font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-3);line-height:var(--lh-tight)}
.rec__q{font-family:var(--serif);font-size:var(--t-xl);line-height:var(--lh-head);color:var(--ink)}
.rec__line{margin-top:var(--s-2);font-size:var(--t-sm);line-height:var(--lh-body);color:var(--ink-2)}
.rec__dg{margin-top:var(--s-3);font-family:var(--mono);font-size:var(--t-xs);
  color:var(--ink-3);overflow-wrap:anywhere;word-break:break-all}
.rec__k{font-family:var(--sans);font-weight:600;letter-spacing:.08em;
  text-transform:uppercase;margin-right:var(--s-1)}
.rec__go{display:inline-block;margin-top:var(--s-3);font-size:var(--t-sm);font-weight:600;color:var(--a-2)}

/* Long digests anywhere on the pillar: wrap, never force a horizontal scroll. */
.fp,.digest,.verify-expected,.verify-live,.kit-hash,.dg{overflow-wrap:anywhere;word-break:break-all}

/* Touch targets on the pillar's controls (44px minimum). */
.verify-run,.verify-select,.kit-request-form button,.kit-request-form input[type="email"],
.kit-request-form select,.recompute-run,.residue-run{min-height:44px}
.verify-tamper{min-height:44px}

/* THE RECORD PAGES (2026-10-15, RULED: the old-stack pages onto system.css). /sweep/,
   /controls/, the three OpenHands study pages and /docs/ left palette.css + site.css and
   their page-local copies of the editorial system; they open in the subpage anatomy (the
   band--sub head, the prose body) like the case pages, and main carries .subpage.record.
   These are the parts they share, on system tokens. Each page keeps only its own rules. */
.record .prose code,.record .sub-line code{font-family:var(--mono);font-size:.875em;overflow-wrap:anywhere}
.record .mono{font-size:.875em;overflow-wrap:anywhere}
.record .prose>.scope{font-family:var(--sans);font-size:var(--t-md);line-height:var(--lh-body);color:var(--ink-3)}
.record .cite{display:block;margin-top:var(--s-2);font-family:var(--mono);font-size:var(--t-xs);color:var(--ink-3)}
/* the closing line rhymes with the head: serif at the lede step, on a rule */
.record .prose>.closing{margin-top:var(--s-8);padding-top:var(--s-6);border-top:1px solid var(--line-strong);
  font-size:var(--t-xl);line-height:var(--lh-lede);color:var(--ink)}
/* the back row: the subpage link row's quiet links, each a 44px target */
.record .prose>.back{margin-top:var(--s-7);font-family:var(--sans);font-size:var(--t-sm);color:var(--ink-3)}
.record .back a{display:inline-flex;align-items:center;min-height:44px;color:var(--a-2);
  text-underline-offset:4px;text-decoration-thickness:1px}
/* THE RECORD TABLE: every table on these pages scrolls inside its own frame, never the page */
.record .swrap,.record .tbl,.record .tablewrap{margin-top:var(--s-5);max-width:100%;overflow-x:auto;
  border:1px solid var(--line);border-radius:var(--r-sm);background:var(--g-1)}
.record table{border-collapse:collapse;width:100%;font-family:var(--sans);font-size:var(--t-sm);
  line-height:var(--lh-tight);color:var(--ink-2)}
.record th,.record td{padding:var(--s-2) var(--s-3);text-align:left;vertical-align:top;
  border-bottom:1px solid var(--line-soft)}
.record th{color:var(--ink);font-weight:600;background:var(--chip);border-bottom-color:var(--line)}
.record thead th{font-size:var(--t-2xs);letter-spacing:.09em;text-transform:uppercase;white-space:nowrap}
.record tbody tr:last-child td{border-bottom:0}
.record table a{color:var(--a-2);text-underline-offset:3px}
.record caption{caption-side:top;padding:var(--s-3) var(--s-3) var(--s-2);text-align:left;
  font-size:var(--t-sm);line-height:var(--lh-lede);color:var(--ink-3)}
/* the sweep and controls tables (table.sweep): data rows, a sub line, a stability bar */
.record table.sweep{min-width:44rem}
.record table.sweep .m{font-family:var(--mono);font-size:.9em}
.record table.sweep .sub{display:block;margin-top:2px;font-family:var(--sans);font-size:var(--t-xs);color:var(--ink-3)}
.record table.sweep tr.flag td{background:rgba(190,134,33,.10)}
.record .bar{display:inline-block;width:5rem;height:7px;margin-left:var(--s-2);vertical-align:middle;
  overflow:hidden;border-radius:2px;background:var(--g-3)}
.record .bar i{display:block;height:100%;background:var(--ok)}
.record tr.flag .bar i{background:var(--warn)}
/* THE OPENHANDS STUDY (three pages, main.study): the census tables right-align their
   numbers; .chip here is a byte chip (a hash, set exactly), not the system's status chip;
   .kv here is a list of label rows, not the system's two-column kv. */
.study .tbl th,.study .tbl td{text-align:right;font-variant-numeric:tabular-nums;color:var(--ink)}
.study .tbl th:first-child,.study .tbl td:first-child{text-align:left;color:var(--ink-3);
  font-family:var(--mono);font-weight:500}
.study .tbl thead th:first-child{font-family:var(--sans);font-weight:600}
.study .tbl.files td:nth-child(2),.study .tbl.files th:nth-child(2){text-align:left}
.study .tbl.files td:first-child{white-space:nowrap}
.study .chip{display:inline;padding:.14rem .42rem;border-radius:var(--r-sm);background:var(--chip);
  font-family:var(--mono);font-size:var(--t-xs);font-weight:400;letter-spacing:0;text-transform:none;
  color:var(--ink);overflow-wrap:anywhere}
.study .kv{display:block;margin-top:var(--s-5);max-width:var(--measure);padding:0;font-size:var(--t-sm);
  line-height:var(--lh-body);color:var(--ink-2)}
.study .kv>div{display:grid;grid-template-columns:11rem 1fr;gap:var(--s-3);padding:var(--s-2) 0;
  border-top:1px solid var(--line-soft)}
.study .kv>div:first-child{border-top:0}
.study .kv>div>span:first-child{padding-top:.2rem;font-size:var(--t-2xs);font-weight:600;letter-spacing:.09em;
  text-transform:uppercase;color:var(--ink-3)}
@media(max-width:640px){.study .kv>div{grid-template-columns:1fr;gap:var(--s-1)}}
/* 24px targets on the study's file links (2.5.8) */
.study .tbl a{display:inline-flex;align-items:center;min-height:24px}