/* Typefaces served from ../fonts (see fonts/README.md): nothing is loaded from another site. */
@font-face{font-family:"IBM Plex Sans";font-style:normal;font-weight:400;font-display:swap;src:url("../fonts/ibm-plex-sans-latin-400-normal.woff2") format("woff2")}
@font-face{font-family:"IBM Plex Sans";font-style:normal;font-weight:500;font-display:swap;src:url("../fonts/ibm-plex-sans-latin-500-normal.woff2") format("woff2")}
@font-face{font-family:"IBM Plex Sans";font-style:normal;font-weight:600;font-display:swap;src:url("../fonts/ibm-plex-sans-latin-600-normal.woff2") format("woff2")}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:400;font-display:swap;src:url("../fonts/ibm-plex-mono-latin-400-normal.woff2") format("woff2")}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:500;font-display:swap;src:url("../fonts/ibm-plex-mono-latin-500-normal.woff2") format("woff2")}
/* ─────────────────────────────────────────────────────────
   Design tokens
   Light is the default. Dark is opt-in via [data-theme="dark"]
   and persists across sessions.
   ───────────────────────────────────────────────────────── */
:root{
  --paper:#FAFAF9; --surface:#FFFFFF; --sunken:#F5F5F4;
  --ink:#1C1917; --ink-2:#57534E; --ink-3:#8A8580;
  --rule:#E7E5E4; --rule-2:#D6D3D1;

  /* Outcome colours carry meaning. They are the only saturation
     on the page, so they read as signal rather than decoration. */
  --deny:#9F1239;   --deny-bg:#FDF2F5;
  --redact:#A16207; --redact-bg:#FEFAF0;
  --warn:#7C4A03;   --warn-bg:#FDF8F2;
  --allow:#3F6212;  --allow-bg:#F6FAF2;

  --focus:#1D4ED8;
  --chart:#57534E;

  --radius:7px;
  --radius-sm:5px;
}

[data-theme="dark"]{
  --paper:#16150F; --surface:#1D1C16; --sunken:#12110C;
  --ink:#F2EFE6; --ink-2:#B5AFA0; --ink-3:#7D786C;
  --rule:#2E2C24; --rule-2:#403D33;

  --deny:#F2889F;   --deny-bg:#2A1119;
  --redact:#E0B155; --redact-bg:#241B0C;
  --warn:#D9A566;   --warn-bg:#231A0E;
  --allow:#9FCB6B;  --allow-bg:#17200E;

  --focus:#7FA6FF;
  --chart:#B5AFA0;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}

body{
  background:var(--paper);
  color:var(--ink);
  font:400 14px/1.5 "IBM Plex Sans",system-ui,-apple-system,sans-serif;
  -webkit-font-smoothing:antialiased;
}

.mono{
  font-family:"IBM Plex Mono",ui-monospace,SFMono-Regular,monospace;
  font-variant-numeric:tabular-nums;
}

button{font:inherit;color:inherit;background:none;border:none;cursor:pointer}
:focus-visible{outline:2px solid var(--focus);outline-offset:2px;border-radius:2px}

.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;
}

/* ── Top bar ───────────────────────────────────────────── */
header.topbar{
  display:flex;align-items:center;gap:1.5rem;
  padding:0 1.25rem;height:52px;
  border-bottom:1px solid var(--rule);
  background:var(--surface);
  position:sticky;top:0;z-index:20;
}
.brand{display:flex;align-items:baseline;gap:.5rem;font-weight:600;letter-spacing:-.01em}
.brand span{font-weight:400;color:var(--ink-3);font-size:12.5px}

nav.tabs{display:flex;gap:.25rem;margin-left:auto}
nav.tabs button{padding:.4rem .7rem;border-radius:var(--radius-sm);color:var(--ink-2);font-size:13.5px}
nav.tabs button:hover{background:var(--sunken);color:var(--ink)}
nav.tabs button[aria-current="page"]{background:var(--sunken);color:var(--ink);font-weight:500}

.topright{display:flex;align-items:center;gap:.75rem;padding-left:1rem;border-left:1px solid var(--rule)}
.whoami{font-size:13px;color:var(--ink-2);text-align:right;line-height:1.3}
.whoami b{display:block;color:var(--ink);font-weight:500}
.iconbtn{width:30px;height:30px;display:grid;place-items:center;border-radius:var(--radius-sm);color:var(--ink-2)}
.iconbtn:hover{background:var(--sunken);color:var(--ink)}

/* ── Layout ────────────────────────────────────────────── */
main{padding:1.25rem;max-width:1500px;margin:0 auto}
.view[hidden]{display:none}
h1{font-size:18px;font-weight:600;margin:0 0 .15rem;letter-spacing:-.01em}
.sub{color:var(--ink-3);font-size:13px;margin:0 0 1.1rem}

/* ── Signals ───────────────────────────────────────────── */
.signals{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  border:1px solid var(--rule);border-radius:var(--radius);
  background:var(--surface);overflow:hidden;margin-bottom:1rem;
}
.signal{padding:.7rem .9rem;border-right:1px solid var(--rule)}
.signal:last-child{border-right:none}
.signal dt{font-size:12px;color:var(--ink-3);margin-bottom:.25rem}
.signal dd{margin:0;font-size:21px;font-weight:600;letter-spacing:-.02em}
.signal .delta{font-size:11.5px;font-weight:400;color:var(--ink-3);margin-left:.4rem}
.signal.flag dd{color:var(--deny)}

/* ── Callouts ──────────────────────────────────────────── */
.callout{
  border:1px solid var(--rule);border-radius:var(--radius);
  background:var(--surface);padding:.75rem .9rem;margin-bottom:1rem;
  font-size:13px;color:var(--ink-2);
}
.callout b{color:var(--ink);font-weight:500}
.callout.attention{border-left:3px solid var(--deny)}
.callout.caution{border-left:3px solid var(--redact)}
.callout.neutral{border-left:3px solid var(--ink-3)}
.callout.plain{background:var(--sunken)}
.detail-panel{border:1px solid var(--rule);border-radius:8px;padding:.8rem 1rem;margin:0 0 1rem;background:var(--paper)}
.detail-panel .panel-head{display:flex;justify-content:space-between;align-items:baseline;gap:1rem}
.detail-panel h2{font-size:15px;font-weight:600;margin:0}
.eventlist{list-style:none;margin:.5rem 0;padding:0}
.eventlist li{display:flex;gap:1rem;padding:.3rem 0;border-top:1px solid var(--rule)}
.eventlist li .when{margin-left:auto}
tr.clickable.selected{background:var(--sunken)}
.subhead{font-size:15px;font-weight:600;margin:2rem 0 .25rem}
.callout h2{font-size:13px;font-weight:600;margin:0 0 .5rem;color:var(--ink)}
.callout ul{list-style:none;margin:0;padding:0;display:grid;gap:.4rem}
.callout li{display:flex;gap:.6rem;align-items:baseline}
.callout li button{color:var(--focus);font-size:12.5px;margin-left:auto;white-space:nowrap}
.callout li button:hover{text-decoration:underline}
.callout code{font-family:"IBM Plex Mono",monospace;font-size:12px;background:var(--sunken);padding:.1rem .3rem;border-radius:3px}

/* ── Filters ───────────────────────────────────────────── */
.filters{
  display:flex;flex-wrap:wrap;gap:.5rem;align-items:center;
  padding:.6rem .75rem;background:var(--surface);
  border:1px solid var(--rule);border-bottom:none;
  border-radius:var(--radius) var(--radius) 0 0;
}
.filters input,.filters select{
  font:inherit;font-size:13px;padding:.35rem .5rem;
  border:1px solid var(--rule-2);border-radius:var(--radius-sm);
  background:var(--paper);color:var(--ink);
}
.filters input[type=search]{min-width:230px}
.filters .spacer{margin-left:auto;color:var(--ink-3);font-size:12.5px}
.linkbtn{color:var(--focus);font-size:12.5px}
.linkbtn:hover{text-decoration:underline}

/* ── Table ─────────────────────────────────────────────── */
.tablewrap{
  border:1px solid var(--rule);border-radius:0 0 var(--radius) var(--radius);
  background:var(--surface);overflow:hidden;
}
.tablewrap.solo{border-radius:var(--radius)}
table{width:100%;border-collapse:collapse}
thead th{
  text-align:left;font-size:12px;font-weight:500;color:var(--ink-3);
  padding:.5rem .75rem;border-bottom:1px solid var(--rule);
  background:var(--sunken);white-space:nowrap;
}
tbody td{padding:.55rem .75rem;border-bottom:1px solid var(--rule);vertical-align:top}
tbody tr:last-child td{border-bottom:none}
tbody tr.clickable{cursor:pointer}
tbody tr.clickable:hover{background:var(--sunken)}
.t-time{font-size:12.5px;color:var(--ink-2);white-space:nowrap}
.t-user{font-weight:500}
.t-user small{display:block;font-weight:400;color:var(--ink-3);font-size:12px}
.t-quiet{color:var(--ink-2);font-size:12.5px}
.linkish{color:var(--focus)}
.linkish:hover{text-decoration:underline}

.empty{padding:2.5rem 1rem;text-align:center;color:var(--ink-3)}
.empty p{margin:0 0 .5rem}

/* ── Tags and outcomes ─────────────────────────────────── */
.tag{
  display:inline-block;padding:.1rem .4rem;border-radius:4px;
  font-size:11.5px;font-weight:500;margin:0 .2rem .2rem 0;white-space:nowrap;
}
.tag.PII,.tag.HEALTH{background:var(--redact-bg);color:var(--redact)}
.tag.CREDENTIALS,.tag.INJECTION{background:var(--deny-bg);color:var(--deny)}
.tag.GROUNDING{background:var(--warn-bg);color:var(--warn)}
.tag.SOURCE_CODE,.tag.FINANCIAL,.tag.LEGAL,.tag.INTERNAL{background:var(--sunken);color:var(--ink-2)}

.act{font-weight:500;font-size:13px;white-space:nowrap}
.act::before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;margin-right:.45rem;vertical-align:middle}
.act.deny{color:var(--deny)}     .act.deny::before{background:var(--deny)}
.act.redact{color:var(--redact)} .act.redact::before{background:var(--redact)}
.act.warn{color:var(--warn)}     .act.warn::before{background:var(--warn)}
.act.allow{color:var(--allow)}   .act.allow::before{background:var(--allow)}

/* ── Drawer ────────────────────────────────────────────── */
.drawer{
  position:fixed;top:0;right:0;bottom:0;width:min(440px,100%);
  background:var(--surface);border-left:1px solid var(--rule);
  padding:1.1rem 1.25rem;overflow-y:auto;z-index:30;
  box-shadow:-8px 0 24px rgba(0,0,0,.06);
}
[data-theme="dark"] .drawer{box-shadow:-8px 0 24px rgba(0,0,0,.4)}
.drawer[hidden]{display:none}
.drawer-head{display:flex;align-items:flex-start;gap:1rem;margin-bottom:1rem}
.drawer h2{font-size:15px;font-weight:600;margin:0}
.drawer .close{margin-left:auto;color:var(--ink-3);font-size:20px;line-height:1}
.drawer dl{display:grid;grid-template-columns:110px 1fr;gap:.55rem 1rem;margin:0 0 1.2rem;font-size:13px}
.drawer dt{color:var(--ink-3)}
.drawer dd{margin:0;word-break:break-word}
.drawer h3{font-size:12.5px;font-weight:600;margin:0 0 .5rem;color:var(--ink-2)}
.ctrl{border:1px solid var(--rule);border-radius:6px;padding:.5rem .65rem;margin-bottom:.45rem;font-size:12.5px}
.ctrl b{display:block;font-weight:500;margin-bottom:.15rem}
.ctrl span{color:var(--ink-3)}
.scrim{position:fixed;inset:0;background:rgba(0,0,0,.12);z-index:29}
.scrim[hidden]{display:none}

/* ── Panels and charts ─────────────────────────────────── */
.grid2{display:grid;grid-template-columns:repeat(auto-fit,minmax(340px,1fr));gap:1rem;margin-bottom:1rem}
.panel{border:1px solid var(--rule);border-radius:var(--radius);background:var(--surface);overflow:hidden;margin-bottom:1rem}
.panel-head{padding:.65rem .9rem;border-bottom:1px solid var(--rule);display:flex;align-items:center;gap:.6rem}
.panel-head h2{font-size:13.5px;font-weight:600;margin:0}
.panel-head .hint{font-size:12px;color:var(--ink-3);margin-left:auto}
.panel-body{padding:.9rem}
.panel-ctl{margin-left:auto;display:flex;align-items:center;gap:.5rem}
.panel-ctl select{font:inherit;font-size:12.5px;padding:.22rem .4rem;border:1px solid var(--rule-2);border-radius:var(--radius-sm);background:var(--paper);color:var(--ink)}

.toggle{display:flex;border:1px solid var(--rule-2);border-radius:var(--radius-sm);overflow:hidden}
.toggle button{padding:.22rem .5rem;font-size:12px;color:var(--ink-3);background:var(--paper)}
.toggle button+button{border-left:1px solid var(--rule-2)}
.toggle button[aria-pressed="true"]{background:var(--sunken);color:var(--ink);font-weight:500}
.toggle button:hover{color:var(--ink)}

.statbar{
  display:flex;flex-wrap:wrap;gap:.75rem;align-items:center;
  padding:.65rem .85rem;border:1px solid var(--rule);
  border-radius:var(--radius);background:var(--surface);margin-bottom:1rem;
}
.statbar label{display:flex;align-items:center;gap:.4rem;font-size:12.5px;color:var(--ink-3)}
.statbar select{font:inherit;font-size:13px;padding:.3rem .45rem;border:1px solid var(--rule-2);border-radius:var(--radius-sm);background:var(--paper);color:var(--ink)}
.statbar .spacer{margin-left:auto;font-size:12.5px;color:var(--ink-3)}

.bars{display:grid;gap:.5rem}
.bar-row{display:grid;grid-template-columns:120px 1fr 52px;align-items:center;gap:.7rem;font-size:12.5px}
.bar-track{height:16px;background:var(--sunken);border-radius:3px;overflow:hidden;display:flex}
.bar-track i{display:block;height:100%}
.bar-track i.deny{background:var(--deny)}
.bar-track i.redact{background:var(--redact)}
.bar-track i.warn{background:var(--warn)}
.bar-track i.allow{background:var(--allow)}
.bar-n{text-align:right;color:var(--ink-3)}

.legend{display:flex;gap:1rem;flex-wrap:wrap;font-size:12px;color:var(--ink-2);margin-top:.75rem;padding-top:.65rem;border-top:1px solid var(--rule)}
.legend span{display:flex;align-items:center;gap:.35rem}
.legend i{width:9px;height:9px;border-radius:2px;display:block}

.spark{width:100%;height:130px;display:block}
.trend-x{display:flex;justify-content:space-between;font-size:11.5px;color:var(--ink-3);margin-top:.35rem}

.pie-wrap{display:flex;gap:1.1rem;align-items:center;flex-wrap:wrap}
.pie{flex:0 0 150px}
.pie path{transition:opacity .12s}
.pie path:hover{opacity:.75;cursor:pointer}
.pie-key{flex:1;min-width:150px;display:grid;gap:.3rem}
.pie-key div{display:flex;align-items:center;gap:.5rem;font-size:12.5px}
.pie-key i{width:9px;height:9px;border-radius:2px;flex:0 0 auto}
.pie-key b{font-weight:400;flex:1;color:var(--ink-2)}
.pie-key span{color:var(--ink-3);font-variant-numeric:tabular-nums}
.chart-empty{color:var(--ink-3);font-size:13px;margin:0;padding:1rem 0;text-align:center}

/* ── Coverage ──────────────────────────────────────────── */
.cov-row{display:flex;align-items:center;gap:.9rem;padding:.55rem .9rem;border-bottom:1px solid var(--rule)}
.cov-row:last-child{border-bottom:none}
.cov-ref{font-size:12.5px;min-width:150px}
.cov-bar{flex:1;height:5px;background:var(--sunken);border-radius:3px;overflow:hidden}
.cov-bar i{display:block;height:100%;background:var(--allow)}
.cov-bar.none i{background:var(--rule-2)}
.cov-n{font-size:12.5px;color:var(--ink-3);min-width:82px;text-align:right}

/* ── Rules ─────────────────────────────────────────────── */
.pri{font-weight:600;font-size:13px}
.pri.zero{color:var(--deny)}
tr.disabled-row{opacity:.5}

/* ── Person ────────────────────────────────────────────── */
.person-head{display:flex;align-items:flex-start;gap:1rem;border:1px solid var(--rule);border-radius:var(--radius);background:var(--surface);padding:.9rem 1rem;margin-bottom:1rem}
.person-head h2{font-size:16px;font-weight:600;margin:0 0 .15rem}
.person-head p{margin:0;font-size:13px;color:var(--ink-3)}
.person-head .back{margin-left:auto;color:var(--focus);font-size:13px;white-space:nowrap}
.person-head .back:hover{text-decoration:underline}

/* ── Banner for mock mode ──────────────────────────────── */
.mockbar{
  background:var(--redact-bg);color:var(--redact);
  font-size:12.5px;padding:.4rem 1.25rem;text-align:center;
  border-bottom:1px solid var(--rule);
}
.mockbar[hidden]{display:none}

.loading{color:var(--ink-3);font-size:13px;padding:.8rem 0}
.pager{display:flex;align-items:center;justify-content:center;gap:1rem;padding:.8rem;border-top:1px solid var(--rule)}
.pager button:disabled{opacity:.45;cursor:not-allowed}

/* ── Sign-in ─────────────────────────────────────────────── */

.signin { max-width: 26rem; margin: 10vh auto; padding: 2rem; text-align: center;
  background: var(--surface); border: 1px solid var(--rule-2); border-radius: var(--radius); }
.signin h1 { font-size: 1.15rem; margin: 0 0 .5rem; }
.signin p { color: var(--ink-2); margin: 0 0 1.25rem; }
.signin-buttons { display: grid; gap: .6rem; }
.signin-button { display: block; padding: .65rem 1rem; border: 1px solid var(--rule-2);
  border-radius: var(--radius-sm); color: var(--ink); text-decoration: none; font-weight: 500; }
.signin-button:hover, .signin-button:focus-visible { border-color: var(--ink-3); background: var(--sunken); }

/* ── Buttons, forms and dialogs (rules, wording) ─────────── */

.btn{
  font-size:13px;font-weight:500;padding:.4rem .8rem;border-radius:var(--radius-sm);
  border:1px solid var(--rule-2);background:var(--surface);color:var(--ink);
}
.btn:hover{background:var(--sunken)}
.btn:disabled{opacity:.55;cursor:default}
.btn.primary{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.btn.primary:hover{opacity:.9;background:var(--ink)}
.btn.danger{background:var(--deny);color:var(--paper);border-color:var(--deny)}
.btn.danger:hover{opacity:.9;background:var(--deny)}
.warn-box{border:1px solid var(--deny);border-radius:6px;padding:.6rem .8rem;margin:.6rem 0;font-size:13px}
.linkbtn.danger{color:var(--deny);font-weight:500}
.row-actions{white-space:nowrap;text-align:right}
.row-actions .linkbtn{margin-left:.7rem}
tr.selected td{background:var(--sunken)}

.field{display:grid;gap:.3rem;margin-bottom:.8rem;font-size:13px}
.field-label{font-weight:500;color:var(--ink)}
.field-hint{font-size:12px;color:var(--ink-3)}
.field input[type=text],.field input[type=number],.field select,.field textarea{
  font:inherit;font-size:13px;color:var(--ink);background:var(--surface);
  border:1px solid var(--rule-2);border-radius:var(--radius-sm);padding:.4rem .55rem;width:100%;
}
.field textarea{resize:vertical;line-height:1.45}
.field.check{display:flex;gap:.5rem;align-items:center;margin-top:1.55rem}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:.9rem}
.group[hidden]{display:none}
.kinds{display:flex;flex-wrap:wrap;gap:.3rem .8rem}
.kind{display:inline-flex;gap:.3rem;align-items:center;font-size:12.5px;color:var(--ink-2)}
.form-error{color:var(--deny);font-size:12.5px;margin:.2rem 0 .6rem}
.buttons{display:flex;gap:.6rem;align-items:center;flex-wrap:wrap}

dialog{
  border:1px solid var(--rule-2);border-radius:var(--radius);background:var(--surface);color:var(--ink);
  padding:0;width:min(640px,calc(100vw - 2rem));max-height:calc(100vh - 3rem);overflow:auto;
}
dialog::backdrop{background:rgba(0,0,0,.4)}
.dialog-head{padding:1rem 1.2rem .2rem}
.dialog-head h2{margin:0;font-size:16px}
#rule-dialog-body{padding:.6rem 1.2rem 0}
#lh-release-body,#lh-release-error{padding:.2rem 1.2rem 0;max-width:34rem}
.dialog-foot{display:flex;justify-content:flex-end;gap:.6rem;padding:.8rem 1.2rem 1rem;border-top:1px solid var(--rule)}

/* ── Devices, usage, wording ─────────────────────────────── */

.health{font-weight:500;font-size:13px;white-space:nowrap}
.health::before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;margin-right:.45rem;vertical-align:1px;background:var(--ink-3)}
.health.healthy{color:var(--allow)} .health.healthy::before{background:var(--allow)}
.health.silent{color:var(--redact)} .health.silent::before{background:var(--redact)}
.health.tampered{color:var(--deny)} .health.tampered::before{background:var(--deny)}
.health.stopped{color:var(--ink-2)}
.chk{font-size:12px;color:var(--ink-3);white-space:nowrap}
/* AI app use: a row opens to show what is behind its numbers */
.caret{display:inline-block;width:1.1em;color:var(--ink-3)}
tr.subrow td{background:var(--sunken);padding:.25rem .75rem .75rem 2.1rem}
tr.subrow:hover{background:none}
.subtable{border:1px solid var(--rule);border-radius:var(--radius-sm);background:var(--surface);overflow:hidden}
.subtable table{font-size:12.5px}
.subtable .empty{padding:.9rem}
.linkish.as-button{font:inherit;text-align:left}

.chk.good{color:var(--allow)} .chk.bad{color:var(--deny);font-weight:500}

.wd-message{max-width:46rem;color:var(--ink-2);font-size:13px}
.preview{
  padding:.7rem .9rem;background:var(--sunken);border:1px solid var(--rule);
  border-radius:var(--radius-sm);font-size:13.5px;line-height:1.5;
}
.preview.bad{color:var(--deny);background:var(--deny-bg)}