:root{
  --bg:#f6f7f9; --surface:#ffffff; --surface2:#f9fafb; --subtle:#eef1f5;
  --border:#e3e7ed; --border-strong:#cfd5de;
  --primary:#1d6fd8; --primary-strong:#1559b3; --primary-soft:#e6f0fc;
  --success:#15803d; --success-soft:#e7f6ec;
  --warning:#a16207; --warning-soft:#fdf6e3;
  --danger:#c2410c; --danger-soft:#fdeee7;
  --violet:#6d28d9; --cyan:#0e7490;
  --heading:#111827; --text:#374151; --muted:#6b7280; --faint:#9ca3af;
}
*{margin:0;padding:0;box-sizing:border-box;-webkit-print-color-adjust:exact;print-color-adjust:exact}
body{background:var(--bg);color:var(--text);font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Inter,sans-serif;font-size:13.5px;padding:22px 28px 80px;max-width:1280px;margin:0 auto}
.pdf-btn{background:var(--primary);color:#fff;border:none;border-radius:9px;padding:8px 14px;font-size:13px;font-weight:600;cursor:pointer}
.pdf-btn:hover{background:var(--primary-strong)}

.mono,code{font-family:ui-monospace,Menlo,monospace}
code{font-size:12px;background:var(--subtle);padding:1px 5px;border-radius:5px;color:var(--primary-strong)}

/* header */
.kick{font-size:11px;text-transform:uppercase;letter-spacing:.6px;color:var(--primary-strong);font-weight:700}
html.embed .screen .kick{display:none}          /* inside QA Core the rail + picker already say where we are */
html.embed body{padding-top:14px}
.hd{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:16px}
.hd h1{color:var(--heading);font-size:26px;letter-spacing:-.3px}
.hd .sub{color:var(--muted);font-size:13px;max-width:720px}

/* overview cards */
.kpis{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:14px}
.kpi{background:var(--surface);border:1px solid var(--border);border-radius:16px;padding:16px 18px;box-shadow:0 1px 2px rgba(16,24,40,.04),0 4px 14px rgba(16,24,40,.03)}
.kpi .l{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.5px;font-weight:700;display:flex;gap:7px;align-items:center}
.kpi .l i{width:22px;height:22px;border-radius:7px;display:inline-flex;align-items:center;justify-content:center;font-style:normal;font-size:12px;background:var(--primary-soft);color:var(--primary-strong)}
.kpi .big{font-size:32px;font-weight:750;color:var(--heading);line-height:1.15;margin-top:6px;font-variant-numeric:tabular-nums}
.kpi .big small{font-size:14px;color:var(--faint);font-weight:500;margin-left:3px}
.kpi .stack{margin-top:12px;height:7px}
.kpi .foot{font-size:12px;color:var(--muted);margin-top:8px}
.total{display:flex;gap:18px;align-items:center}
.total svg{transform:rotate(-90deg);flex:0 0 88px}
.total ul{list-style:none;display:grid;gap:5px;font-size:12.5px;flex:1}
.total li{display:flex;gap:8px;align-items:center} .total li b{margin-left:auto;color:var(--heading);font-variant-numeric:tabular-nums}
.stack{display:flex;height:8px;border-radius:5px;overflow:hidden;background:var(--subtle)}
.stack i{display:block;height:100%}

/* tabs */
.tabs{display:flex;gap:4px;margin-top:22px;border-bottom:1px solid var(--border)}
.tabs button{background:none;border:none;padding:10px 14px;color:var(--muted);font-size:13.5px;border-bottom:2px solid transparent;margin-bottom:-1px;display:flex;gap:7px;align-items:center;cursor:pointer;font-family:inherit}
.tabs button span{background:var(--subtle);color:var(--muted);border-radius:10px;padding:0 7px;font-size:11px;font-weight:650}
.tabs button.on{color:var(--primary-strong);border-bottom-color:var(--primary);font-weight:650}
.tabs button.on span{background:var(--primary-soft);color:var(--primary-strong)}
.tabs button.att span{background:var(--warning-soft);color:var(--warning)}
.tabbody{margin-top:14px}
ul.beh{list-style:none;display:grid;gap:8px}
.tabbody ul.beh{background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:16px 18px}
ul.beh li{padding-left:16px;position:relative;line-height:1.55}
ul.beh li::before{content:"";position:absolute;left:0;top:8px;width:6px;height:6px;border-radius:50%;background:var(--primary)}

/* tables: full grid lines */
table.grid{width:100%;border-collapse:collapse;background:var(--surface);font-size:13px}
table.grid th{background:var(--surface2);text-align:left;font-size:10.5px;text-transform:uppercase;letter-spacing:.5px;color:var(--muted);padding:8px 11px;border:1px solid var(--border);white-space:nowrap}
table.grid th small{display:block;text-transform:none;letter-spacing:0;font-weight:500;color:var(--faint);font-size:10.5px}
table.grid td{padding:8px 11px;border:1px solid var(--border);vertical-align:middle}
table.grid .num{text-align:center;font-variant-numeric:tabular-nums}
table.grid tr.case{cursor:pointer}
table.grid tr.case:hover td,table.grid tr.case.open td{background:var(--primary-soft)}
table.grid tr.grp td{background:var(--subtle);font-weight:700;color:var(--heading);font-size:12px;padding:6px 11px}
table.grid tr.grp td span{font-weight:400;color:var(--faint);margin-left:6px}
table.grid tr.det>td{padding:0;background:var(--surface);cursor:default}
table.grid td.no{color:var(--faint);font-variant-numeric:tabular-nums;width:52px}
table.grid td.nm{color:var(--heading);font-weight:550}
table.grid td.msg{font-family:ui-monospace,Menlo,monospace;font-size:12px;color:var(--heading);word-break:break-word}
.zero{color:var(--faint)}
.pn{display:inline-block;font-size:10.5px;font-weight:700;border-radius:5px;padding:1px 6px}
.pn.P{color:var(--success);background:var(--success-soft)} .pn.N{color:var(--danger);background:var(--danger-soft)}
.dot{width:8px;height:8px;border-radius:50%;flex:0 0 8px}
.ok{color:var(--success)} .ok .dot,.dot.ok{background:var(--success)}
.bad{color:var(--danger)} .bad .dot,.dot.bad{background:var(--danger)}
.vd{font-size:11px;font-weight:650;border-radius:20px;padding:3px 9px;text-align:center;line-height:1.3;white-space:nowrap;display:inline-block}
.tk{font:600 11.5px ui-monospace,Menlo,monospace;color:var(--danger);margin-left:8px;text-decoration:none;white-space:nowrap}
.tk:hover{text-decoration:underline}

/* error codes tab: one code chip per answer, the ledger's text beside it */
.rule{background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:10px 14px;margin-bottom:12px;font-size:12.5px;line-height:1.55}
.rule b{color:var(--heading)}
.ec{display:flex;gap:7px;align-items:baseline}
.ec+.ec{margin-top:5px}
.ec small{color:var(--faint);font-size:11px}
.ec .em{font-family:ui-monospace,Menlo,monospace;font-size:11.5px;color:var(--muted);word-break:break-word}
.chip.code{color:var(--heading);background:var(--subtle);min-width:26px;text-align:center}
.same{font-size:11.5px;font-weight:700;border-radius:20px;padding:3px 10px;white-space:nowrap}
/* errors tab: one wide column per ledger — status, codes, every full message */
table.errs td{vertical-align:top}
table.errs .kind{font-size:10px;text-transform:uppercase;letter-spacing:.4px;color:var(--faint);font-weight:600;margin-top:3px}
table.errs .ans+.ans{margin-top:8px;padding-top:8px;border-top:1px solid var(--border)}
table.errs td.rdiff{color:var(--danger);font-weight:600;font-size:12px} table.errs td.rsame{color:var(--success);font-size:12px}
table.errs tr.open td{background:var(--surface2)} table.errs td.ropen{color:var(--warning);font-weight:600;font-size:12px}
table.errs .why{font-size:11.5px;color:var(--muted);font-weight:400;margin-top:4px}
table.errs .crow{display:flex;align-items:center;gap:8px;margin-top:6px}
table.errs .crow .cl{font:10px ui-monospace,Menlo,monospace;color:var(--muted);min-width:196px}
table.errs .crow .ec{display:inline-flex} table.errs .crow .ec+.ec{margin-top:0;margin-left:6px}
table.errs .crow .chip.code{font-size:12.5px;background:var(--primary-soft);color:var(--primary-strong)}
table.errs .emsg{font-family:ui-monospace,Menlo,monospace;font-size:11px;color:var(--text);word-break:break-word;margin-top:5px;padding-top:5px;border-top:1px dashed var(--border);line-height:1.45}
.doc table.errs .emsg{font-size:9.5px}
.same.y{color:var(--success);background:var(--success-soft)} .same.n{color:var(--danger);background:var(--danger-soft)}

/* story card */
.card{padding:4px 28px 22px;background:var(--surface)}
/* goal: blue rule above, grey rule below, no fill; first line a touch larger, ledger lines beneath */
.about{border-top:2px solid var(--primary);border-bottom:1px solid var(--border);padding:10px 0 12px;font-size:14.5px;color:var(--heading);line-height:1.6;margin-top:8px}
.about.hold{border-top-color:var(--warning)}
.about .ledger{margin-top:2px;font-size:13.5px;color:var(--text);line-height:1.5} .about>div+.ledger{margin-top:6px}
.ledger b{color:var(--primary-strong);font-weight:650;margin-right:4px}
/* verdict as a small note at the foot of the Outcome panel */
.note{margin-top:12px;padding-top:10px;border-top:1px dashed var(--border);font-size:12.5px;color:var(--muted);display:flex;gap:8px;align-items:center}
.note .dot{width:8px;height:8px;border-radius:50%;flex:0 0 8px}
.note b{font-weight:650}
/* outcome strip per ledger (panel 3): coloured edge = outcome, chip = status, PASSED/FAILED at the right */
.strip{display:grid;grid-template-columns:max-content 1fr auto;gap:4px 14px;border-left:3px solid var(--border);border-radius:0 8px 8px 0;background:var(--surface2);padding:8px 12px;align-items:center}
.strip+.strip{margin-top:6px}
.strip.ok{border-left-color:var(--success)} .strip.bad{border-left-color:var(--danger)}
.strip .nm{color:var(--heading);font-weight:650}
.strip .p{font-size:11.5px;font-weight:700;white-space:nowrap} .strip .p.ok{color:var(--success)} .strip .p.bad{color:var(--danger)}
.strip .rr{grid-column:1 / -1;margin-top:2px}
/* numbered panels: 1 What is tested · 2 Steps · 3 Outcome */
.panel{border:1px solid var(--border);border-radius:12px;overflow:hidden;background:var(--surface);margin:12px 0 0}
.panel .band{display:flex;align-items:center;gap:10px;padding:8px 14px;background:var(--surface2);border-bottom:1px solid var(--border)}
.panel .band .n{width:22px;height:22px;border-radius:7px;background:var(--primary);color:#fff;display:inline-flex;align-items:center;justify-content:center;font-size:11.5px;font-weight:700}
.panel .band h4{font-size:12px;text-transform:uppercase;letter-spacing:.6px;color:var(--heading);font-weight:700}
.panel .pb{padding:14px 16px}
.panel .kv{grid-template-columns:max-content 1fr;font-size:13px;gap:7px 14px;align-items:start}
/* table.exp sits inside table.grid (case detail row): border:none stops the grid's cell lines reaching it */
table.exp{border-collapse:collapse;font-size:13px} table.exp td{padding:3px 14px 3px 0;vertical-align:middle;border:none} table.exp td.w{color:var(--heading);font-weight:600}
.strip .m{grid-column:1 / -1;font-family:ui-monospace,Menlo,monospace;font-size:11.5px;color:var(--text);line-height:1.5;word-break:break-word;padding-top:2px}
.strip .m b{font-family:inherit;color:var(--faint);font-size:10.5px;text-transform:uppercase;letter-spacing:.4px;font-weight:700;margin-right:6px}
.chip{display:inline-block;font-size:11.5px;font-weight:700;border-radius:6px;padding:2px 8px;font-family:ui-monospace,Menlo,monospace}
.chip.ok{color:var(--success);background:var(--success-soft)}
.chip.bad{color:var(--danger);background:var(--danger-soft)}
.seqarrow{margin:0 4px;color:var(--muted,#8a94a6);font-weight:700}
.chip.na{color:var(--muted,#8a94a6);background:var(--subtle)}
.chip.blocked{color:#475569;background:#eef2f7}
.strip.blocked{border-left-color:#94a3b8}
.nawhy{color:var(--muted,#8a94a6)}
.card .strip{background:var(--surface)}
.kv{display:grid;grid-template-columns:110px 1fr;gap:4px 10px;font-size:12.5px}
.kv .kk{color:var(--muted)}
.trace summary{cursor:pointer;color:var(--primary-strong);font-size:11.5px;list-style:none}
.trace summary::before{content:"▸ ";color:var(--faint)} .trace[open] summary::before{content:"▾ "}
.trace pre{margin-top:6px;white-space:pre-wrap;word-break:break-all;font-size:11px;color:var(--text);background:var(--surface);border:1px solid var(--border);border-radius:7px;padding:8px;max-height:260px;overflow:auto}
.blank{color:var(--faint);font-size:12px;font-style:italic}
.empty{padding:30px;text-align:center;color:var(--faint)}
@media screen and (max-width:900px){
  body{padding:16px}
  .kpis{grid-template-columns:1fr 1fr}
  .tabs{overflow-x:auto}
  .tabbody{overflow-x:auto}
  .card{padding:4px 12px 14px}
}

/* ── PDF: the document look — every case written out, no cards, tabs or controls ── */
.doc{display:none;color:var(--text);font-size:12px}
.doc h1{font-size:26px;color:var(--heading);margin:3px 0 4px}
.doc .lede{font-size:13px}
.doc .sum{display:flex;gap:16px;flex-wrap:wrap;margin:12px 0 2px;font-size:12.5px;align-items:baseline}
.doc .sum b{font-size:18px;margin-right:4px}
.doc h2{font-size:15px;color:var(--heading);margin:24px 0 4px;padding-bottom:5px;border-bottom:1px solid var(--border);display:flex;gap:10px;align-items:baseline;break-after:avoid}
.doc h2 small{font-size:11px;color:var(--faint);font-weight:400}
.doc ul.beh{gap:4px;margin-top:8px}
.doc .rule{border:none;padding:0;margin:6px 0 0;font-size:11.5px;background:none}
.doc table.plain{width:100%;border-collapse:collapse;font-size:11.5px;margin-top:6px}
.doc table.plain th{text-align:left;font-size:9.5px;text-transform:uppercase;letter-spacing:.5px;color:var(--faint);padding:4px 6px;border-bottom:1px solid var(--border-strong)}
.doc table.plain td{padding:5px 6px;border-bottom:1px solid var(--border);vertical-align:top}
.doc table.plain .num{text-align:center}
.doc table.plain .ec .em{font-size:10px}
.doc .entry{padding:12px 0 10px;border-bottom:1px solid var(--border);break-inside:avoid}
.doc .entry .t{display:flex;gap:10px;align-items:baseline}
.doc .entry .t .no{color:var(--primary-strong);font-weight:700;min-width:28px}
.doc .entry .t h3{font-size:13px;color:var(--heading);flex:1}
.doc .entry .body{padding-left:38px}
.doc .entry .goal{margin-top:4px;line-height:1.55;color:var(--heading)}
.doc .entry .goal .ledger{font-size:11.5px}
.doc .entry .kv{grid-template-columns:96px 1fr;gap:3px 12px;margin-top:7px;font-size:11.5px}
.doc .entry .kv .kk{color:var(--faint);font-size:9.5px;text-transform:uppercase;letter-spacing:.4px;font-weight:700;padding-top:2px}
.doc .entry ol{margin:0 0 0 16px;display:grid;gap:1px}
.doc .oc{display:grid;grid-template-columns:100px auto 1fr;gap:2px 10px;align-items:baseline}
.doc .oc .w{font-weight:600;color:var(--heading)}
.doc .oc .p{font-size:10.5px;font-weight:700} .doc .oc .p.ok{color:var(--success)} .doc .oc .p.bad{color:var(--danger)}
.doc .oc .m{grid-column:2 / -1;font:10px ui-monospace,Menlo,monospace;color:var(--muted);word-break:break-word}
@page{size:A4;margin:16mm 14mm 18mm}
@media print{
  body{background:#fff;padding:0;max-width:none}
  .screen{display:none!important}
  .doc{display:block}
  html.embed .doc .kick{display:block}
}

/* trace + outcome */
.faint{color:var(--faint)}
.trace .tx{margin-top:6px} .txh{font-size:10.5px;color:var(--faint);margin-top:6px;font-weight:600}
.note{font-size:11px;color:var(--muted);margin-top:4px}
ol.steps{margin:8px 0 0 18px;font-size:13px;display:grid;gap:4px;line-height:1.5}
ol.steps li::marker{color:var(--faint);font-weight:600}

/* home: one row per command document */
table.grid tr.cmd{cursor:pointer}
table.grid tr.cmd:hover td{background:var(--primary-soft)}
.home-h{margin:22px 0 10px;font-size:12px;text-transform:uppercase;letter-spacing:.5px;color:var(--muted);font-weight:700}
