:root{--accent:#23485c;--border:#dce3e7;--border-w:1px;--bp-desktop:1100px;--bp-phone:480px;--bp-tablet:760px;--content-max:1220px;--divider:#e7edf0;--dot-size:12px;--focus-ring:#1e5b7a;--font-body:14px;--font-family-body:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;--font-family-mono:"SFMono-Regular",Menlo,Consolas,"DejaVu Sans Mono",monospace;--font-h1:20px;--font-h2:15px;--font-label:11.5px;--font-mono-size:12.5px;--font-small:12.5px;--line-height:1.45;--link:#1e5b7a;--radius-panel:10px;--radius-pill:11px;--space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-5:20px;--space-6:24px;--space-7:32px;--space-8:40px;--surface-header:#23485c;--surface-header-alt:#1b3948;--surface-hover:#eef4f6;--surface-inset:#fbfcfd;--surface-page:#f5f8f9;--surface-panel:#ffffff;--text-inverse:#ffffff;--text-mono:#23485c;--text-muted:#4d5e67;--text-primary:#1b2a33;--verdict-absent:#657379;--verdict-absent-soft:#f5f7f8;--verdict-blocked:#a94141;--verdict-blocked-soft:#f8e9e9;--verdict-clean:#144431;--verdict-clean-soft:#e9f3ee;--verdict-review:#a85b00;--verdict-review-soft:#fdf3e0}
*{box-sizing:border-box}
body{margin:0;font-family:var(--font-family-body);color:var(--text-primary);background:var(--surface-page);font-size:var(--font-body);line-height:var(--line-height)}
.mono{font-family:var(--font-family-mono);font-size:var(--font-mono-size);color:var(--text-mono)}
a{color:var(--link)}
a:focus-visible,button:focus-visible,summary:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}
header{background:var(--surface-header);color:var(--text-inverse);padding:var(--space-4) var(--space-6)}
header h1{margin:0;font-size:var(--font-h1)}
header .sub{color:var(--text-inverse);opacity:.82;font-size:var(--font-small);margin-top:var(--space-1)}
nav{background:var(--surface-header-alt);padding:var(--space-2) var(--space-6);font-size:var(--font-small)}
nav a{color:var(--text-inverse);opacity:.8;text-decoration:none;margin-right:var(--space-4)}
nav a.active,nav a:hover{opacity:1}
.wrap{max-width:var(--content-max);margin:var(--space-5) auto;padding:0 var(--space-5)}
.crumb{color:var(--text-muted);font-size:var(--font-small);margin-bottom:var(--space-3)}
.crumb a{color:var(--accent);text-decoration:none}
.crumb a:hover{text-decoration:underline}
.orient{color:var(--text-muted);font-size:var(--font-small);margin:0 0 var(--space-3);max-width:70em}
.tiles{display:flex;gap:var(--space-3);margin:0 0 var(--space-5);flex-wrap:wrap}
.tile{flex:1;min-width:150px;background:var(--surface-panel);border:var(--border-w) solid var(--border);border-radius:var(--radius-panel);padding:var(--space-3) var(--space-4)}
.tile .n{font-size:26px;font-weight:700}
.tile .l{font-size:var(--font-label);color:var(--text-muted);text-transform:uppercase;letter-spacing:.5px}
.tile.ok .n{color:var(--verdict-clean)}.tile.rev .n{color:var(--verdict-review)}.tile.bad .n{color:var(--verdict-blocked)}
.card{background:var(--surface-panel);border:var(--border-w) solid var(--border);border-radius:var(--radius-panel);overflow:hidden;margin-bottom:var(--space-5)}
.card h2{margin:0;padding:var(--space-3) var(--space-4);font-size:var(--font-h2);border-bottom:var(--border-w) solid var(--border);background:var(--surface-inset)}
table{border-collapse:collapse;width:100%}
th,td{padding:var(--space-2) var(--space-3);text-align:left;border-bottom:var(--border-w) solid var(--divider);white-space:nowrap}
th{font-size:var(--font-label);text-transform:uppercase;letter-spacing:.4px;color:var(--text-muted);background:var(--surface-inset);cursor:pointer;user-select:none}
th.n,td.n{text-align:right;font-variant-numeric:tabular-nums}
tbody tr:hover{background:var(--surface-hover)}
tr.clik{cursor:pointer}
.pill{display:inline-block;padding:2px 9px;border-radius:var(--radius-pill);font-size:var(--font-label);font-weight:600}
.pill.ok{background:var(--verdict-clean-soft);color:var(--verdict-clean)}
.pill.rev{background:var(--verdict-review-soft);color:var(--verdict-review)}
.pill.bad{background:var(--verdict-blocked-soft);color:var(--verdict-blocked)}
.pill.na{background:var(--verdict-absent-soft);color:var(--verdict-absent)}
.filter{padding:var(--space-3) var(--space-4);border-bottom:var(--border-w) solid var(--border);background:var(--surface-inset)}
.filter input,.filter select{padding:var(--space-1) var(--space-2);border:var(--border-w) solid var(--border);border-radius:7px;font-size:var(--font-small);background:var(--surface-panel);color:var(--text-primary)}
.filter input{width:240px}.filter select{margin-left:var(--space-2)}
.matrix td{text-align:left}.matrix td.name{text-align:left;font-weight:600}
.scrollx{overflow-x:auto}
.matrix td.name,.matrix th:first-child{position:sticky;left:0;background:var(--surface-panel);z-index:1}
.dot{display:inline-block;width:var(--dot-size);height:var(--dot-size);border-radius:3px;vertical-align:middle}
.dot.ok{background:var(--verdict-clean)}.dot.rev{background:var(--verdict-review)}.dot.bad{background:var(--verdict-blocked)}.dot.na{background:var(--verdict-absent-soft)}
.legend{font-size:var(--font-small);color:var(--text-muted);padding:var(--space-2) var(--space-4)}
.legend .dot{margin:0 var(--space-1) 0 var(--space-3)}
footer{color:var(--text-muted);font-size:var(--font-small);text-align:center;padding:var(--space-6) 0 var(--space-8)}
.meta td,.meta th{white-space:normal}
.note{color:var(--text-muted);font-size:var(--font-small);white-space:normal}
.art{display:inline-block;margin-right:var(--space-2);font-size:var(--font-small);color:var(--accent)}
.ov{position:fixed;inset:0;background:rgba(20,32,40,.45);display:none;align-items:flex-start;justify-content:center;z-index:50;overflow:auto;padding:var(--space-8) var(--space-4)}
.ov.on{display:flex}
.modal{background:var(--surface-panel);border-radius:var(--radius-panel);max-width:760px;width:100%;box-shadow:0 18px 50px rgba(0,0,0,.3)}
.modal h3{margin:0;padding:var(--space-4) var(--space-5);border-bottom:var(--border-w) solid var(--border);font-size:16px;display:flex;justify-content:space-between;align-items:center}
.modal .x{cursor:pointer;color:var(--text-muted);border:none;background:none;font-size:20px}
.modal .body{padding:var(--space-4) var(--space-5)}
.kv{display:grid;grid-template-columns:190px 1fr;gap:6px 14px;font-size:13px;margin-bottom:var(--space-4)}
.kv .k{color:var(--text-muted)}
.sec{font-size:var(--font-label);text-transform:uppercase;letter-spacing:.4px;color:var(--accent);font-weight:700;margin:var(--space-4) 0 var(--space-2)}
.mtable{border:var(--border-w) solid var(--border);border-radius:8px;overflow:hidden}
.mtable th,.mtable td{font-size:var(--font-small);padding:7px 10px}
details.prov{border:var(--border-w) solid var(--border);border-radius:8px;margin:var(--space-2) 0;background:var(--surface-inset)}
details.prov summary{padding:var(--space-2) var(--space-3);cursor:pointer;font-weight:600;font-size:13px;color:var(--accent)}
details.prov .pbody{padding:var(--space-1) var(--space-3) var(--space-3)}
.gloss{color:var(--text-muted);font-size:12px;margin:1px 0 var(--space-2);white-space:normal}
.shapehead{white-space:normal;line-height:1.5;margin:var(--space-1) 0 var(--space-2)}
.badge{display:inline-block;padding:4px 11px;border-radius:12px;font-size:var(--font-small);font-weight:700;background:var(--verdict-clean-soft);color:var(--verdict-clean)}
.badgewrap{margin:4px 0 10px}
.scrollcap{max-height:320px;overflow:auto}
pre.sql{background:var(--surface-hover);border:var(--border-w) solid var(--border);border-radius:8px;padding:var(--space-2) var(--space-3);font-size:var(--font-small);overflow:auto;margin:var(--space-1) 0;white-space:pre-wrap;font-family:var(--font-family-mono)}
/* H2: dot, count and trend as one fixed-slot unit; the dots form one
   vertical line and the counts another, whether or not a cell has a
   count, so a stage column scans top to bottom without drift */
.matrix td a,.matrix td .cellgrid{display:grid;grid-template-columns:14px 32px 12px;gap:3px;justify-content:start;align-items:center;padding:var(--space-1) var(--space-3);text-decoration:none;color:var(--text-primary)}
.matrix td a .dot,.matrix td .cellgrid .dot{grid-column:1;justify-self:center}
.matrix td a:hover{background:var(--surface-hover);border-radius:6px}
.cellnum{font-size:var(--font-label);font-variant-numeric:tabular-nums;color:var(--text-muted);grid-column:2;text-align:right}
.trend{font-size:11px;color:var(--text-muted);grid-column:3;text-align:left}
.asof{display:block;font-weight:400;font-size:10.5px;color:var(--text-muted);text-transform:none;letter-spacing:0}
.totals{padding:var(--space-2) var(--space-4);border-bottom:var(--border-w) solid var(--border);font-size:13px}
.tiles-subject{color:var(--text-muted);font-size:13px;margin:0 0 var(--space-2)}
a.tile{display:block;text-decoration:none;color:inherit}
a.tile:hover{border-color:var(--accent);background:var(--surface-hover)}
.tile-inert{opacity:.75}
.rel{color:var(--text-muted);font-size:var(--font-small);margin-left:6px}
.pill.latest{background:var(--accent);color:var(--text-inverse);margin-left:6px}
@media (max-width:760px){
 .wrap{margin:var(--space-3) auto;padding:0 var(--space-2)}
 header{padding:var(--space-3) var(--space-4)}
 nav{padding:var(--space-2) var(--space-4)}
 .tiles{gap:var(--space-2)}
 .tile{min-width:calc(50% - var(--space-2))}
 #runstbl thead,#tbl thead{display:none}
 #runstbl,#tbl,#runstbl tbody,#tbl tbody,#runstbl tr,#tbl tr,#runstbl td,#tbl td{display:block;width:100%}
 #runstbl tr,#tbl tr{border:var(--border-w) solid var(--border);border-radius:var(--radius-panel);margin:0 0 var(--space-3);padding:var(--space-2) var(--space-3);background:var(--surface-panel)}
 #runstbl td,#tbl td{border:none;padding:2px 0;white-space:normal;text-align:left}
 #runstbl td::before,#tbl td::before{content:attr(data-l);display:inline-block;min-width:96px;color:var(--text-muted);font-size:var(--font-label);text-transform:uppercase;letter-spacing:.4px}
 #runstbl td.n,#tbl td.n{text-align:left}
 .kv{grid-template-columns:1fr;gap:2px 0}
 /* the run meta block: four columns clip on a phone; stack to label over
    value, and let long hashes wrap rather than overflow */
 .meta tr{display:block;border-bottom:1px solid var(--divider)}
 .meta th,.meta td{display:block;width:100%;border-bottom:none;white-space:normal}
 .meta th{padding:var(--space-2) var(--space-3) 0;font-size:var(--font-label);color:var(--text-muted)}
 .meta td{padding:2px var(--space-3) var(--space-2);overflow-wrap:anywhere}
 .ov{padding:var(--space-3) var(--space-2)}
 .filter input{width:100%}
 .filter select{margin:var(--space-2) 0 0;margin-left:0}
}
@media (max-width:480px){
 .hide-phone{display:none}
 .tile .n{font-size:var(--font-h1)}
}