/* The pieces /open, /proof and the homepage's receipt band share (round 4
   R4-6): the receipt card, the drop zone, the facts list, the check lines,
   the odds instrument with its sliders and bars. Tokens only, from
   brand.css: no new colour enters here.

   COLOUR, measured on the grounds these sit on (brand.css records each):
     the receipt well --field: --ink 15.6, --ink-2 10.66, --ink-3 6.14,
       --pulse 11.6, --leaf 9.3
     a card in a shade band --surface-grove: --ink 11.59, --ink-2 7.87,
       --pulse 8.65, --flare 5.23
   Runs that clear the goal are --pulse, runs that miss are --ink-3; brass is
   the one button and nothing else; --primary is links and focus only. */

/* ── two columns, folding at 880 like every hand-written section ───────── */
.pf-hero,.sf-grid,.op-grid{display:grid;gap:48px;align-items:start;}
@media (min-width:880px){
  .pf-hero{grid-template-columns:1fr 1fr;gap:56px;}
  .sf-grid{grid-template-columns:0.8fr 1.2fr;gap:32px;}
  .op-grid{grid-template-columns:0.85fr 1.15fr;gap:32px;}
}

/* ── the receipt well ─────────────────────────────────────────────────── */
.sf-receipt{background:var(--field);border:1px solid var(--border-strong);border-radius:14px;
  padding:clamp(20px,3vw,26px);font-family:var(--mono);}
.sf-receipt-h{font-family:var(--mono);font-size:12px;letter-spacing:0.08em;text-transform:uppercase;
  color:var(--leaf);margin:0;}
.sf-kv{display:grid;grid-template-columns:minmax(96px,max-content) 1fr;gap:8px 16px;margin:16px 0 0;
  font-family:var(--mono);font-size:13.5px;line-height:1.5;}
.sf-kv dt{color:var(--ink-3);}
.sf-kv dd{margin:0;color:var(--ink);overflow-wrap:anywhere;}
.sf-kv dd.mark-range{color:var(--pulse);}
.sf-receipt .btn-quiet{font-family:var(--sans);}

/* The line under a press. role=status on every one of them. */
.sf-said{font-size:15px;line-height:1.55;color:var(--ink-2);max-width:60ch;margin:0;font-family:var(--sans);}
.sf-said:empty{display:none;}
.sf-said.is-ok{color:var(--leaf);}
.sf-said.is-bad{color:var(--flare);}

/* ── the drop zone ────────────────────────────────────────────────────── */
.sf-drop{border:1.5px dashed var(--border-strong);border-radius:14px;padding:24px;
  display:grid;gap:12px;justify-items:start;}
.sf-drop.is-over{border-color:var(--pulse);}
.sf-drop-t{font-family:var(--mono);font-size:15px;color:var(--ink);margin:0;}
.sf-pick{cursor:pointer;}
.sf-pick:focus-within{outline:2px solid var(--primary);outline-offset:2px;}
.sf-panel{background:var(--surface-grove);border:1px solid var(--border);border-radius:14px;
  padding:clamp(20px,3vw,26px);}
.band:not(.shade) .sf-panel{background:var(--surface-card);}

/* ── the check lines: the words carry the meaning, the mark is a second channel ── */
.sf-checks{list-style:none;margin:16px 0 0;padding:0;display:grid;gap:8px;}
.sf-checks li{position:relative;padding-left:24px;font-size:15px;line-height:1.5;color:var(--ink-2);max-width:60ch;}
.sf-checks li::before{position:absolute;left:0;top:0;font-family:var(--mono);}
.sf-checks li.is-ok::before{content:'\2713';color:var(--leaf);}
.sf-checks li.is-bad::before{content:'\2717';color:var(--flare);}
.sf-checks li.is-open::before{content:'\00B7';color:var(--ink-3);}

/* ── the odds instrument: sliders, the numeral, the bars ──────────────── */
.op-card{background:var(--surface-grove);border:1px solid var(--border);border-radius:16px;
  padding:clamp(20px,3vw,26px);display:grid;gap:16px;}
.band:not(.shade) .op-card{background:var(--surface-card);}
.op-label{font-family:var(--mono);font-size:12px;letter-spacing:0.08em;text-transform:uppercase;color:var(--ink-3);margin:0;}
.op-sliders{display:grid;gap:14px;}
.op-sl{display:grid;gap:6px;}
.op-sl-row{display:flex;justify-content:space-between;gap:12px;font-size:14.5px;color:var(--ink-2);}
.op-sl-row b{color:var(--ink);font-weight:600;font-variant-numeric:tabular-nums;}
.op-sl input[type=range]{width:100%;accent-color:var(--brass);min-height:32px;margin:0;}
.op-fixed{display:flex;justify-content:space-between;gap:12px;font-size:14px;color:var(--ink-3);}
.op-odds{display:flex;align-items:flex-end;gap:14px;}
.op-n{font-family:var(--serif);font-weight:600;font-size:clamp(3.5rem,8vw,5.25rem);line-height:0.9;color:var(--pulse);
  font-variant-numeric:tabular-nums;}
.op-n-u{font-size:14.5px;line-height:1.4;color:var(--ink-2);padding-bottom:6px;}
.op-was{font-family:var(--mono);font-size:12.5px;color:var(--ink-3);}
.op-bars{display:flex;align-items:flex-end;gap:2px;height:48px;}
.op-bars span{flex:1;min-width:2px;border-radius:2px 2px 0 0;background:var(--ink-3);}
.op-bars span.is-hit{background:var(--pulse);}
.op-line{border-top:1px solid var(--border);padding-top:12px;font-size:14.5px;line-height:1.55;color:var(--ink-2);margin:0;}
.op-line b{color:var(--ink);}
.op-src{font-size:13px;color:var(--ink-3);margin:0;}

/* ── /proof's rows ────────────────────────────────────────────────────── */
.pf-rows{display:grid;}
.pf-row{display:grid;gap:8px;padding:18px 0;border-top:1px solid var(--border);}
@media (min-width:880px){ .pf-row{grid-template-columns:0.9fr 1.4fr 220px;gap:28px;align-items:baseline;} }
.pf-t{font-family:var(--sans);font-size:18px;font-weight:600;color:var(--ink);margin:0;}
.pf-row .body{margin:0;}
.pf-a{color:var(--primary-ink);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px;}
@media (min-width:880px){ .pf-a{justify-self:end;} }

/* ── /open's three notes ──────────────────────────────────────────────── */
.op-notes{display:grid;gap:32px;}
@media (min-width:880px){ .op-notes{grid-template-columns:repeat(3,1fr);gap:28px;} }
.op-notes>div{border-top:2px solid var(--border-strong);padding-top:14px;}
.op-notes .body{max-width:34ch;}