/* SQL Trust Gate · center layout only.
   Reuses app-base.css tokens/classes (header, chips, panels, tiles, badges,
   ledger, footer, focus rings). This file adds the demo's distinct mechanic:
   the candidate-SQL view + side-by-side wrong-number-vs-abstain hero panels,
   and the two-column console (verdict cards + ledger rail). Palette comes
   entirely from the base · no colours redefined here. */

main.wrap{max-width:1180px}
h1.title{max-width:20ch;font-size:34px}

.block{margin-top:40px}
.block-h{margin-bottom:18px}
.block-h h2{font-size:21px;font-weight:600;letter-spacing:-.02em;margin:0 0 6px}
.block-sub{font-size:14px;color:var(--body);max-width:78ch;margin:0} .block-sub b{color:var(--ink);font-weight:600}

/* ---------- HERO PAIR: baseline-wrong vs gate-abstain, side by side ---------- */
.heroes{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.hero{border:1px solid var(--line);border-radius:10px;background:var(--surface);overflow:hidden}
.hero-q{font-size:15px;font-weight:600;padding:15px 18px 14px;border-bottom:1px solid var(--line2);line-height:1.45}
.hero-q .qi{display:block;font-family:var(--mono);font-size:10px;text-transform:uppercase;letter-spacing:.05em;color:var(--accent);font-weight:500;margin-bottom:5px}
.vs{display:grid;grid-template-columns:1fr 34px 1fr;align-items:stretch}
.side{padding:18px 18px 20px}
.side.bad{background:#FCF3F2;border-right:1px solid var(--line2)}
.side.good{background:#F4F8F5}
.vsmid{display:grid;place-items:center;font-family:var(--mono);font-size:11px;color:var(--muted);background:var(--wash);border-left:1px solid var(--line2);border-right:1px solid var(--line2)}
.sh{font-size:12px;color:var(--body2);margin-bottom:12px;line-height:1.5}
.bignum{font-family:var(--mono);font-size:30px;font-weight:600;letter-spacing:-.02em;line-height:1;font-variant-numeric:tabular-nums}
.bignum.bad{color:var(--danger)} .bignum.abst{color:var(--warn);font-size:26px}
.sn{font-size:12px;color:var(--cap);margin-top:10px;line-height:1.5} .sn b{color:var(--ink)}
.clausep{display:inline-block;margin-top:4px;font-size:11px;color:var(--warn);background:var(--esc-bg);border:1px solid #E9D9B8;border-radius:5px;padding:5px 8px;line-height:1.45}
.hero-foot{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:13px 18px;border-top:1px solid var(--line2);background:#FCFCFB;flex-wrap:wrap}
.hf-l{font-size:12px;color:var(--body);max-width:64ch} .hf-l b{color:var(--ink)}
.btn.gho{background:var(--surface);color:var(--ink);border:1px solid var(--line)}
.btn.gho:hover{border-color:var(--accent);color:var(--accent);background:var(--surface)}

/* ---------- run-bank bar ---------- */
.bankbar{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:20px}
.bankbar-note{font-size:12.5px;color:var(--cap)}

/* ---------- chips ---------- */
.chips-h{font-family:var(--mono);font-size:10px;text-transform:uppercase;letter-spacing:.06em;color:var(--cap);font-weight:500;margin:0 0 9px}
.qchip{font-family:var(--mono);font-size:11px;color:var(--body2);background:var(--surface);border:1px solid var(--line);border-radius:30px;padding:6px 12px;cursor:pointer;max-width:340px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:left}
.qchip:hover{border-color:var(--accent);color:var(--accent)}

/* ---------- scoreboard ---------- */
.scoreboard{border:1px solid var(--line);border-radius:10px;background:var(--surface);overflow:hidden;margin:6px 0 22px}
.sbh{padding:12px 16px;border-bottom:1px solid var(--line);font-family:var(--mono);font-size:11px;color:var(--cap)}
.sb-tiles{border:none;border-radius:0}
.sb-tiles .t .v.good{color:var(--ok)} .sb-tiles .t .v.bad{color:var(--danger)}
.sbnote{padding:13px 16px;border-top:1px solid var(--line2);font-size:13px;color:var(--body2)} .sbnote b{color:var(--ink)}

/* ---------- console: verdict column + ledger rail ---------- */
.console-grid{display:grid;grid-template-columns:1fr 332px;gap:22px;align-items:start}
.out{display:flex;flex-direction:column;gap:18px}

/* verdict card */
.rescard{border:1px solid var(--line);border-radius:10px;background:var(--surface);overflow:hidden;animation:rise .22s ease}
@keyframes rise{from{opacity:0;transform:translateY(6px)}}
.rescard.ok{border-left:3px solid var(--ok)} .rescard.warn{border-left:3px solid var(--warn)} .rescard.rev{border-left:3px solid var(--review)}
.rc-top{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;padding:14px 16px;border-bottom:1px solid var(--line2)}
.rc-q{font-size:14.5px;font-weight:600;line-height:1.45}
.rc-q .qi{display:block;font-family:var(--mono);font-size:10px;text-transform:uppercase;letter-spacing:.05em;color:var(--cap);font-weight:500;margin-bottom:4px}
.rc-grid{display:grid;grid-template-columns:1fr 1fr;gap:0}
.sqlcol{border-right:1px solid var(--line2)}
.col-h{font-family:var(--mono);font-size:10px;text-transform:uppercase;letter-spacing:.04em;color:var(--cap);padding:11px 14px 8px} .col-h .muted{text-transform:none;letter-spacing:0;font-size:10px}
pre.sql{margin:0;padding:0 14px 14px;font-family:var(--mono);font-size:11.5px;line-height:1.6;color:var(--body2);white-space:pre-wrap;word-break:break-word;overflow-x:auto}
pre.sql mark{border-radius:3px;padding:1px 2px;background:transparent;color:inherit}
pre.sql mark.bad{background:#F7DCD8;color:var(--danger);box-shadow:inset 0 -2px 0 var(--danger)}
pre.sql mark.warn{background:#F4E6C8;color:var(--warn);box-shadow:inset 0 -2px 0 var(--warn)}
pre.sql mark.rev{background:#E2DCF4;color:var(--review);box-shadow:inset 0 -2px 0 var(--review)}

.checks{list-style:none;margin:0;padding:0 14px 4px}
.checks li{display:grid;grid-template-columns:16px 1fr;gap:6px 8px;padding:6px 0;border-top:1px solid var(--line2);align-items:start}
.checks li:first-child{border-top:none}
.checks .ci{font-family:var(--mono);font-size:12px;font-weight:600}
.checks li.ok .ci{color:var(--ok)} .checks li.no .ci{color:var(--danger)}
.checks .cc{font-size:12px;color:var(--ink);font-weight:500}
.checks .cd{grid-column:2;font-size:10.5px;color:var(--cap)}
.checks li.no .cd{color:var(--danger)}

/* result blocks inside the check column */
.resnum{margin:8px 14px 16px;padding:14px;border:1px solid #CDE6D7;background:var(--allow-bg);border-radius:8px;text-align:center}
.rn-v{font-size:26px;font-weight:600;color:var(--ok);letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.rn-l{font-family:var(--mono);font-size:10.5px;color:var(--body2);margin-top:5px}
.syn-inline{color:var(--warn)}
.resblk{margin:8px 14px 16px;padding:13px 14px;border-radius:8px}
.resblk.warn{border:1px solid #E9D9B8;background:var(--esc-bg)}
.resblk.rev{border:1px solid #D7CFF0;background:var(--rev-bg)}
.resblk.approved{border:1px solid #CDE6D7;background:var(--allow-bg)}
.rb-h{font-size:13px;font-weight:600;margin-bottom:5px}
.resblk.warn .rb-h{color:var(--warn)} .resblk.rev .rb-h{color:var(--review)} .resblk.approved .rb-h{color:var(--ok)}
.rb-b{font-size:12px;color:var(--body2);line-height:1.5}
.abst-vs{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:11px;padding-top:11px;border-top:1px dashed #E0CFA8}
.abst-vs.none{border:none;padding:0;margin-top:8px}
.abst-vs .lbl{font-family:var(--mono);font-size:10px;text-transform:uppercase;letter-spacing:.04em;color:var(--cap)}
.abst-vs .num{font-size:18px;font-weight:600;font-variant-numeric:tabular-nums}
.abst-vs .num.bad{color:var(--danger);text-decoration:line-through;text-decoration-color:rgba(192,54,44,.5)}
.abst-vs .tag{font-family:var(--mono);font-size:9.5px;color:var(--ok);background:var(--allow-bg);border:1px solid #CDE6D7;border-radius:30px;padding:2px 8px}
.abst-vs.none .lbl{color:var(--warn)}

/* drafted (LLM) explanation */
.drafted{padding:13px 16px;border-top:1px solid var(--line2);background:#FCFCFB}
.dr-h{font-family:var(--mono);font-size:10px;text-transform:uppercase;letter-spacing:.04em;color:var(--cap);margin-bottom:8px} .dr-h .muted{text-transform:none;letter-spacing:0}
.dr-l{display:flex;justify-content:space-between;gap:14px;padding:5px 0;border-top:1px solid var(--line2);align-items:baseline}
.dr-l:first-of-type{border-top:none}
.dr-t{font-size:12.5px;color:var(--body2)} .dr-c{font-size:10px;color:var(--accent);white-space:nowrap;flex-shrink:0}

.prov{padding:11px 16px;border-top:1px solid var(--line2);margin:0}

/* ledger rail */
.rail{position:sticky;top:84px}
.led-mid{display:flex;flex-direction:column;gap:2px;min-width:0}
.led-q{color:var(--cap);font-size:10px} .led-cl{color:var(--body2);font-size:9.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ledger .row{grid-template-columns:34px 1fr auto}
.ledger .row .seq{color:var(--cap)}

@media(max-width:980px){
  .console-grid{grid-template-columns:1fr}
  .rail{position:static}
  .heroes{grid-template-columns:1fr}
  .rc-grid{grid-template-columns:1fr} .sqlcol{border-right:none;border-bottom:1px solid var(--line2)}
}
@media(max-width:560px){
  .vs{grid-template-columns:1fr} .side.bad{border-right:none;border-bottom:1px solid var(--line2)}
  .vsmid{display:none}
}