:root{
  --bg:#0b0e13;--bg2:#10141b;--panel:#141922;--panel2:#1a2029;--line:#242c38;--line2:#2f3947;
  --ink:#e6e9ef;--ink2:#aab3c2;--muted:#7d8797;--accent:#4f8cff;--accent2:#7cc0ff;
  --ok:#3fbf7f;--warn:#e0a83a;--bad:#e2574f;--crit:#ff3b30;--info:#5da5ff;--purple:#9d7cff;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --sans:Inter,"Segoe UI",system-ui,-apple-system,Roboto,sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--ink);font:13px/1.45 var(--sans);height:100%}
a{color:var(--accent2);text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
#app{display:grid;grid-template-columns:220px 1fr;min-height:100vh}
.nav{background:var(--bg2);border-right:1px solid var(--line);padding:14px 10px;display:flex;flex-direction:column;position:sticky;top:0;height:100vh}
.brand{display:flex;gap:10px;align-items:center;padding:6px 8px 14px;border-bottom:1px solid var(--line);margin-bottom:10px}
.brand-mark{width:32px;height:32px;border-radius:8px;background:linear-gradient(135deg,#2f6fdb,#5aa0ff);display:grid;place-items:center;font-weight:700;color:#fff}
.brand-name{font-weight:700;letter-spacing:.02em}
.brand-sub{font-size:10.5px;color:var(--muted);letter-spacing:.06em;text-transform:uppercase}
#nav a{display:flex;align-items:center;gap:8px;padding:7px 10px;border-radius:6px;color:var(--ink2);font-size:13px}
#nav a:hover{background:var(--panel)}
#nav a.active{background:var(--panel2);color:var(--ink);box-shadow:inset 2px 0 0 var(--accent)}
#nav a .k{font-family:var(--mono);font-size:10px;color:var(--muted);width:18px}
.nav-foot{margin-top:auto;display:flex;flex-direction:column;gap:6px;padding:10px 8px 0;border-top:1px solid var(--line)}
.main{min-width:0;display:flex;flex-direction:column}
.topbar{display:flex;justify-content:space-between;align-items:center;padding:12px 22px;border-bottom:1px solid var(--line);background:var(--bg2);position:sticky;top:0;z-index:5}
.crumb{font-weight:600;font-size:14px}
.top-actions{display:flex;gap:14px;align-items:center}
.principle{color:var(--muted);font-size:12px;font-style:italic}
.view{padding:18px 22px 40px;display:flex;flex-direction:column;gap:16px}
.badge{display:inline-flex;align-items:center;gap:6px;padding:2px 8px;border-radius:999px;font-size:10.5px;font-family:var(--mono);letter-spacing:.04em;border:1px solid var(--line2);background:var(--panel);color:var(--ink2);text-transform:uppercase}
.badge.ok{border-color:rgba(63,191,127,.4);color:var(--ok)}
.badge.bad{border-color:rgba(226,87,79,.5);color:var(--bad)}
.badge.warn{border-color:rgba(224,168,58,.5);color:var(--warn)}
.badge.info{border-color:rgba(93,165,255,.5);color:var(--info)}
.badge.purple{border-color:rgba(157,124,255,.5);color:var(--purple)}
.small{font-size:11px}.muted{color:var(--muted)}.mono{font-family:var(--mono)}
.grid{display:grid;gap:14px}
.grid.c2{grid-template-columns:repeat(2,minmax(0,1fr))}.grid.c3{grid-template-columns:repeat(3,minmax(0,1fr))}.grid.c4{grid-template-columns:repeat(4,minmax(0,1fr))}
@media(max-width:1100px){.grid.c4{grid-template-columns:repeat(2,1fr)}.grid.c3{grid-template-columns:repeat(2,1fr)}}
@media(max-width:800px){#app{grid-template-columns:1fr}.nav{position:relative;height:auto}.grid.c2,.grid.c3,.grid.c4{grid-template-columns:1fr}.principle{display:none}}
.card{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:14px 16px;min-width:0;overflow-x:auto}
.card h3{margin:0 0 10px;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);font-weight:600;display:flex;justify-content:space-between;align-items:center}
.kpi{display:flex;flex-direction:column;gap:2px}
.kpi .v{font-size:26px;font-weight:700;letter-spacing:-.01em;font-family:var(--mono)}
.kpi .l{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.06em}
.kpi .s{font-size:11px;color:var(--ink2)}
table{width:100%;border-collapse:collapse;font-size:12.5px}
th{text-align:left;font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);padding:6px 8px;border-bottom:1px solid var(--line);font-weight:600;white-space:nowrap}
td{padding:7px 8px;border-bottom:1px solid var(--line);vertical-align:top;white-space:nowrap}
td.small,td.wrap{white-space:normal;min-width:180px;max-width:420px}
tr.row:hover td{background:var(--panel2);cursor:pointer}
td.num,th.num{text-align:right;font-family:var(--mono)}
.chip{display:inline-block;padding:1px 7px;border-radius:5px;font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:.02em}
.chip.LOW{background:rgba(63,191,127,.14);color:var(--ok)}.chip.MEDIUM{background:rgba(224,168,58,.16);color:var(--warn)}
.chip.HIGH{background:rgba(226,87,79,.16);color:var(--bad)}.chip.CRITICAL{background:rgba(255,59,48,.22);color:#ff6b62}
.chip.NONE{background:rgba(125,135,151,.15);color:var(--muted)}
.chip.ALLOW{background:rgba(63,191,127,.14);color:var(--ok)}.chip.DENY,.chip.BLOCK{background:rgba(226,87,79,.16);color:var(--bad)}
.chip.REQUIRE_HUMAN_REVIEW,.chip.STEP_UP,.chip.TEMPORARY_HOLD{background:rgba(224,168,58,.16);color:var(--warn)}
.chip.SUPPORTED,.chip.GRANTED,.chip.RESOLVED{background:rgba(63,191,127,.14);color:var(--ok)}
.chip.CONTRADICTED,.chip.UNSUPPORTED,.chip.DENIED{background:rgba(226,87,79,.16);color:var(--bad)}
.chip.INSUFFICIENT,.chip.PENDING_HUMAN,.chip.WAITING_HUMAN,.chip.OPEN,.chip.TRIAGE,.chip.INVESTIGATING,.chip.ESCALATED{background:rgba(224,168,58,.16);color:var(--warn)}
.chip.trusted{background:rgba(93,165,255,.16);color:var(--info)}.chip.untrusted{background:rgba(226,87,79,.16);color:var(--bad)}.chip.model{background:rgba(157,124,255,.18);color:var(--purple)}
.chip.P1{background:rgba(255,59,48,.22);color:#ff6b62}.chip.P2{background:rgba(226,87,79,.16);color:var(--bad)}.chip.P3,.chip.P4{background:rgba(224,168,58,.16);color:var(--warn)}
.btn{background:var(--panel2);border:1px solid var(--line2);border-radius:7px;padding:7px 12px;cursor:pointer;font-size:12.5px;color:var(--ink)}
.btn:hover{border-color:var(--accent)}
.btn.primary{background:var(--accent);border-color:var(--accent);color:#fff;font-weight:600}
.btn.ghost{background:transparent}
.btn.danger{border-color:rgba(226,87,79,.5);color:var(--bad)}
.btn:disabled{opacity:.5;cursor:not-allowed}
input,select,textarea{background:var(--bg2);border:1px solid var(--line2);border-radius:7px;padding:7px 9px;width:100%}
textarea{min-height:110px;font-family:var(--mono);font-size:12px;resize:vertical}
label.f{display:flex;flex-direction:column;gap:4px;font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.05em}
.row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
tr.row{display:table-row}  /* a clickable table row is a table row, not the flex .row */
.toolbar{display:flex;gap:10px;align-items:end;flex-wrap:wrap}
.toolbar label.f{min-width:160px}
.flow{display:flex;flex-direction:column;gap:0}
.stage{display:grid;grid-template-columns:200px 1fr;gap:12px;padding:9px 12px;border:1px solid var(--line);border-radius:8px;background:var(--bg2);align-items:center}
.stage .t{font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);font-weight:600}
.stage .v{font-family:var(--mono);font-size:12px;word-break:break-word}
.stage.alert{border-color:rgba(226,87,79,.45)}.stage.ok{border-color:rgba(63,191,127,.4)}
.arrow{text-align:center;color:var(--muted);font-size:14px;line-height:1.1;padding:2px 0}
.headline{font-size:18px;font-weight:700;padding:14px 16px;border-radius:10px;background:linear-gradient(90deg,rgba(79,140,255,.12),transparent);border:1px solid var(--line2)}
.factors{display:flex;flex-direction:column;gap:4px}
.factor{display:grid;grid-template-columns:52px 1fr;gap:10px;padding:6px 8px;border-radius:6px;cursor:pointer;border:1px solid transparent}
.factor:hover{background:var(--panel2);border-color:var(--line2)}
.factor .p{font-family:var(--mono);font-weight:700;text-align:right}
.factor .p.pos{color:var(--bad)}.factor .p.neg{color:var(--ok)}
.factor .d{font-size:11px;color:var(--muted)}
.score{display:flex;align-items:baseline;gap:8px}
.score .n{font-size:38px;font-weight:800;font-family:var(--mono);letter-spacing:-.02em}
.score .m{color:var(--muted)}
.bar{height:8px;background:var(--line);border-radius:6px;overflow:hidden;margin:6px 0 10px}
.bar i{display:block;height:100%;background:linear-gradient(90deg,var(--ok),var(--warn),var(--bad),var(--crit))}
.kv{display:grid;grid-template-columns:150px 1fr;gap:4px 12px;font-size:12.5px}
.kv .k{color:var(--muted)}
.kv .v{font-family:var(--mono);word-break:break-word}
pre{background:var(--bg2);border:1px solid var(--line);border-radius:8px;padding:10px;overflow:auto;font-size:11.5px;margin:0;max-height:360px}
.drawer{position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:20;display:flex;justify-content:flex-end}
.drawer.hidden,.hidden{display:none}
.drawer-inner{width:min(1100px,96vw);background:var(--bg);border-left:1px solid var(--line2);height:100%;overflow:auto;padding:20px 24px;position:relative;display:flex;flex-direction:column;gap:14px}
.drawer-close{position:absolute;top:10px;right:14px;background:none;border:none;font-size:22px;color:var(--muted);cursor:pointer}
.toast{position:fixed;bottom:18px;left:50%;transform:translateX(-50%);background:var(--panel2);border:1px solid var(--line2);padding:9px 14px;border-radius:8px;z-index:30;font-size:12.5px}
.chart svg{width:100%;height:auto;display:block}
.legend{display:flex;gap:12px;flex-wrap:wrap;font-size:11px;color:var(--muted);margin-top:6px}
.legend i{display:inline-block;width:10px;height:10px;border-radius:2px;margin-right:5px;vertical-align:middle}
.section-title{font-size:15px;font-weight:700;margin:4px 0 0}
.tabs{display:flex;gap:4px;border-bottom:1px solid var(--line);margin-bottom:10px}
.tabs button{background:none;border:none;padding:8px 12px;color:var(--muted);cursor:pointer;border-bottom:2px solid transparent}
.tabs button.active{color:var(--ink);border-bottom-color:var(--accent)}
.note{font-size:12px;color:var(--ink2);background:rgba(93,165,255,.07);border:1px solid rgba(93,165,255,.25);padding:8px 12px;border-radius:8px}
.evidence-row td:first-child{font-family:var(--mono);color:var(--muted)}
.graph svg{width:100%;height:auto;background:var(--bg2);border-radius:8px;border:1px solid var(--line)}
.graph text{font-size:9px;fill:var(--ink2);font-family:var(--mono)}
.graph .edge{stroke:#3a4557;stroke-width:1}
.graph .el{fill:var(--muted);font-size:8px}
.pill-list{display:flex;gap:6px;flex-wrap:wrap}
.split{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media(max-width:900px){.split{grid-template-columns:1fr}.stage{grid-template-columns:1fr}}
.diff{display:grid;grid-template-columns:230px 1fr 1fr;gap:6px 12px;font-family:var(--mono);font-size:12px}
.diff .h{color:var(--muted);font-family:var(--sans);text-transform:uppercase;font-size:10.5px;letter-spacing:.06em}
.diff .changed{color:var(--warn);font-weight:700}
.trail{display:flex;flex-direction:column;gap:6px}
.trail .e{display:grid;grid-template-columns:150px 1fr;gap:10px;padding:6px 10px;border-left:2px solid var(--line2);background:var(--bg2);border-radius:0 6px 6px 0}
.trail .e .s{font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);font-weight:600}
.trail .e .m{font-family:var(--mono);font-size:11.5px}
.trail .e .d{font-size:11px;color:var(--muted);grid-column:2}
.empty{color:var(--muted);padding:20px;text-align:center}

/* ---- v2.1 console additions ------------------------------------------------------ */
.chip.kind-structural{background:rgba(93,165,255,.16);color:var(--info)}
.chip.kind-empirical{background:rgba(63,191,127,.14);color:var(--ok)}
.chip.kind-synthetic,.chip.kind-offline{background:rgba(125,135,151,.18);color:var(--ink2)}
.chip.kind-design{background:rgba(157,124,255,.18);color:var(--purple)}
.trust-legend{display:flex;gap:10px;flex-wrap:wrap;font-size:11px;margin:6px 0 10px}
.trust-legend span{display:inline-flex;align-items:center;gap:6px;padding:3px 9px;border-radius:999px;border:1px solid var(--line2);background:var(--bg2)}
.trust-legend i{width:10px;height:10px;border-radius:2px;display:inline-block}
.t-user{--tc:var(--bad)}.t-model{--tc:var(--purple)}.t-trusted{--tc:var(--info)}.t-decision{--tc:var(--ok)}.t-derived{--tc:#2ec4b6}.t-human{--tc:var(--warn)}
.trust-legend i.t-user{background:var(--bad)}.trust-legend i.t-model{background:var(--purple)}.trust-legend i.t-trusted{background:var(--info)}.trust-legend i.t-decision{background:var(--ok)}.trust-legend i.t-derived{background:#2ec4b6}.trust-legend i.t-human{background:var(--warn)}
.chip.derived{background:rgba(46,196,182,.15);color:#2ec4b6}.chip.human{background:rgba(224,168,58,.16);color:var(--warn)}.chip.policy{background:rgba(63,191,127,.14);color:var(--ok)}
.stage.k-user{border-left:4px solid var(--bad)}.stage.k-model{border-left:4px solid var(--purple)}.stage.k-trusted{border-left:4px solid var(--info)}.stage.k-decision{border-left:4px solid var(--ok)}
.stage .k{font-size:9.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);grid-column:1 / -1;margin-top:-4px}
.compare{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media(max-width:1000px){.compare{grid-template-columns:1fr}}
.compare .side{border:1px solid var(--line2);border-radius:10px;padding:12px 14px;background:var(--panel)}
.compare .side.bad{border-color:rgba(226,87,79,.5)}.compare .side.good{border-color:rgba(63,191,127,.45)}
.compare .side h4{margin:0 0 6px;font-size:12px;letter-spacing:.06em;text-transform:uppercase}
.compare .caveat{font-size:11px;color:var(--muted);margin-bottom:8px;font-style:italic}
.timeline{display:flex;flex-direction:column;gap:0;position:relative;padding-left:18px;border-left:2px solid var(--line2);margin-left:6px}
.timeline .tl{position:relative;padding:6px 0 6px 12px;display:grid;grid-template-columns:150px 92px 1fr;gap:10px;font-size:12px;align-items:start}
.timeline .tl::before{content:"";position:absolute;left:-24px;top:11px;width:10px;height:10px;border-radius:50%;background:var(--line2);border:2px solid var(--bg)}
.timeline .tl.transaction::before{background:var(--accent)}.timeline .tl.session::before{background:var(--purple)}.timeline .tl.dispute::before{background:var(--warn)}
.timeline .tl.me{background:rgba(79,140,255,.10);border-radius:6px;outline:1px solid rgba(79,140,255,.35)}
.timeline .tl.me::before{background:#fff;box-shadow:0 0 0 3px rgba(79,140,255,.5)}
.timeline .tl.future{opacity:.45}
.timeline .tl .when{font-family:var(--mono);color:var(--muted);font-size:11px}
.timeline .tl .what{color:var(--ink2)}
.components{display:grid;grid-template-columns:110px 1fr 40px;gap:4px 10px;align-items:center;font-size:11.5px;margin:8px 0}
.components .cb{height:7px;background:var(--line);border-radius:4px;overflow:hidden}
.components .cb i{display:block;height:100%;background:var(--accent)}
.components .cn{font-family:var(--mono);text-align:right}
.kpi.small .v{font-size:20px}
.evo{display:flex;align-items:flex-end;gap:3px;height:70px;padding:6px 0}
.evo i{flex:1;background:var(--accent);border-radius:2px 2px 0 0;min-width:3px;opacity:.85}
.evo i.HIGH{background:var(--bad)}.evo i.CRITICAL{background:var(--crit)}.evo i.MEDIUM{background:var(--warn)}.evo i.LOW{background:var(--ok)}
.matrix td.yes{color:var(--bad);font-weight:600}.matrix td.no{color:var(--ok)}
.review-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media(max-width:1000px){.review-grid{grid-template-columns:1fr}}
.callout{padding:10px 12px;border-radius:8px;border:1px solid var(--line2);background:var(--bg2);font-size:12px}
.callout.model{border-color:rgba(157,124,255,.5)}
.callout.decision{border-color:rgba(63,191,127,.45)}
.sec-h{font-size:13px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--ink2);margin:6px 0 0;display:flex;gap:8px;align-items:center}
.sec-h .chip{font-weight:600}
.subtle{font-size:11px;color:var(--muted)}
.src{font-size:10.5px;color:var(--muted);margin-top:8px;padding-top:6px;border-top:1px dashed rgba(125,135,151,.25);line-height:1.45}
.lint-ok{color:var(--ok);font-family:var(--mono);font-size:11px}
.lint-bad{color:var(--warn);font-family:var(--mono);font-size:11px}
td.wrap{white-space:normal}

/* ---- 2.2 showcase pass ---------------------------------------------------------------- */
.stage.off{border-style:dashed;opacity:.62}.stage.off .v{color:var(--muted)}
.verdict{border:1px solid var(--line2);border-radius:10px;padding:14px 16px;background:var(--panel);margin:4px 0 10px}
.verdict-h{font-size:18px;font-weight:700;margin-bottom:10px}
.verdict-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
@media(max-width:1100px){.verdict-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:700px){.verdict-grid{grid-template-columns:1fr}}
.vt{border:1px solid var(--line);border-top:3px solid var(--tc);border-radius:8px;padding:9px 11px;background:var(--bg2);min-width:0}
.vt .l{font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);font-weight:600;display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.vt .v{font-family:var(--mono);font-size:14px;font-weight:700;margin:6px 0 4px;word-break:break-word}
.vt .s{font-size:11px;color:var(--ink2)}
.bad-t{color:var(--bad)}.good-t{color:var(--ok)}
.diff .row-ch{background:rgba(224,168,58,.08)}
.diff > div{padding:2px 4px;border-radius:3px}
.cvr{display:flex;flex-direction:column;gap:4px;margin:4px 0}
.cvr-verdict{font-size:11px;color:var(--muted);display:flex;gap:6px;align-items:center;margin-top:2px}
.grid.c3 .kv{grid-template-columns:118px 1fr}
.cvr-side{border:1px solid var(--line);border-left:3px solid var(--tc);border-radius:6px;padding:6px 9px;background:var(--bg2);min-width:0}
.cvr-side .l{font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);display:flex;gap:6px;align-items:center}
.cvr-side .v{font-family:var(--mono);font-size:12px;margin-top:3px;word-break:break-word}
.cvr-arrow{color:var(--muted);font-size:10.5px;text-transform:uppercase;letter-spacing:.06em;padding-left:10px}
.appr{font-size:12px;padding:5px 9px;border-radius:6px;margin:4px 0;border:1px solid var(--line)}
.appr.ok{border-color:rgba(63,191,127,.4)}.appr.no{border-color:rgba(226,87,79,.45)}
.review-form{display:flex;gap:8px;align-items:center;margin-top:8px;flex-wrap:wrap}
.review-form select{width:auto;min-width:130px}.review-form input{flex:1;min-width:160px;width:auto}
.stack{display:flex;flex-direction:column;gap:14px;min-width:0}
.timeline .tl{grid-template-columns:132px 88px 1fr}

/* --insecure-demo: the server says it is reachable without authentication */
.insecure-banner { background: #8b1a1a; color: #fff; font-weight: 600; padding: 6px 16px; text-align: center; font-size: 13px; }