/* Exhibit 3 only. Everything shared is ../lab.css. Outcome colours: a hit and a miss are both "over 900" (red family),
   told apart by fill; a false alarm is amber; a quiet, correct day is ink at low weight. */
:root { --hit: #a32d2d; --miss: #a32d2d; --fa: #b7791f; --quiet: rgba(27, 35, 40, .35); }

.ledger { margin: 0; color: var(--deep-ink); }
.ledger .blk { margin-bottom: 18px; }
.ledger .lbl { font-size: 13px; color: var(--deep-muted); margin-bottom: 6px; }
.ledger .lbl b { color: #fbf7ec; font: 600 22px/1 var(--font-display); margin-right: 6px; }
.ledger .dots { display: flex; flex-wrap: wrap; gap: 3px; max-width: 520px; }
.ledger .dots i { width: 8px; height: 8px; border-radius: 50%; display: block; }
.ledger i.hit { background: #e0766b; }
.ledger i.miss { border: 1.5px solid #e0766b; }
.ledger i.fa { background: #d9a648; }
.ledger i { transition: opacity .25s, transform .25s; }
.ledger i.off { opacity: 0; transform: scale(.4); }
@media (prefers-reduced-motion: reduce) { .ledger i { transition: none; } }
.ledger .play { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 4px 0 10px; }
.ledger .play button { background: none; color: #fbf7ec; border: 1px solid rgba(233, 228, 214, .5); border-radius: var(--radius); min-height: 40px; padding: 6px 14px; cursor: pointer; font-size: var(--fs-note); }
.ledger .play button:hover { border-color: #fbf7ec; }
.ledger #ledger-read { font: 13px var(--font-mono); color: var(--deep-ink); }
.ledger figcaption { font-size: 12px; color: var(--deep-muted); margin-top: 4px; max-width: 520px; }

.picker.always { display: block; max-width: 420px; margin-bottom: 14px; }
.picker.always label { display: block; font-size: var(--fs-note); font-weight: 600; margin-bottom: 6px; }
.picker.always select { width: 100%; min-height: 44px; font: inherit; padding: 8px 10px; border: 1px solid var(--rule); border-radius: var(--radius); background: var(--card); color: var(--ink); }
.bwlist { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 0 24px; border-top: 1px solid var(--line); }
@media (max-width: 760px) { .bwlist { display: none; } }
.bwlist h4 { grid-column: 1 / -1; margin: 14px 0 4px; font: 600 var(--fs-note)/1.2 var(--font-display); color: var(--muted); }
.bwlist button { display: grid; grid-template-columns: 1fr; gap: 2px; width: 100%; text-align: left; padding: 7px 4px; border: 0; border-bottom: 1px solid var(--hair); background: none; cursor: pointer; min-height: 44px; font-size: var(--fs-note); }
.bwlist button:hover { background: var(--paper-2); }
.bwlist button[aria-current=true] { background: var(--card); box-shadow: inset 3px 0 0 var(--pick); }
.bwlist .nm { font-weight: 600; line-height: 1.25; }
.bwlist .tg { font: 12px/1.3 var(--font-mono); color: var(--muted); }

.sample { border-top: 1px solid var(--line); margin-top: 18px; padding-top: 14px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px 32px; }
@media (max-width: 760px) { .sample { grid-template-columns: 1fr; } }
.sample .when { font: 600 var(--fs-body)/1.3 var(--font-display); }
.sample .verdict { font: 600 28px/1.15 var(--font-display); margin: 6px 0; }
.sample dl { display: grid; grid-template-columns: max-content 1fr; gap: 4px 14px; font-size: var(--fs-note); margin: 0; }
.sample dt { color: var(--muted); }
.sample dd { margin: 0; }
.out-hit { color: var(--hit); } .out-miss { color: var(--miss); } .out-fa { color: #855817; } .out-quiet { color: var(--muted); }
.ea-table { border-collapse: collapse; width: 100%; max-width: 760px; font-size: var(--fs-note); margin: 8px 0 14px; }
.ea-table th, .ea-table td { text-align: left; padding: 6px 12px 6px 0; border-bottom: 1px solid var(--hair); }
.ea-table th { color: var(--muted); font-weight: 600; }
.ea-table td.n { font-family: var(--font-mono); font-size: 13px; }