@font-face { font-family: "Poppins"; src: url("/static/fonts/poppins-Regular.woff") format("woff"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Poppins"; src: url("/static/fonts/poppins-Medium.woff") format("woff"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Poppins"; src: url("/static/fonts/poppins-Bold.woff") format("woff"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Harbor Mono"; src: url("/static/fonts/dejavu-sans-mono.woff") format("woff"); font-weight: 400; font-display: swap; }

:root {
  color-scheme: dark;
  --night: #0D0C1D;
  --deck: #16152B;
  --deck-2: #1D1C37;
  --rope: #2B2949;
  --rope-2: #3A3760;
  --foam: #ECEAF5;
  --fog: #A3A1BC;
  --fog-2: #7E7B9C;
  --beacon: #3D74FF;
  --beacon-ink: #FFFFFF;
  --seal-a: #F71F75;
  --seal-b: #6A2BD0;
  --seal: linear-gradient(100deg, var(--seal-a), var(--seal-b));
  --cleared: #3DD598;
  --sealed: #C59BFF;
  --held: #F5B941;
  --refused: #FF5A5F;
  --fault: #8B87B0;

  --sans: "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "Harbor Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;

  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px;
  --r-pane: 14px; --r-ctl: 8px;
  --rail: 248px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--night);
  color: var(--foam);
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.6;
  font-feature-settings: "kern", "lnum";
}
img { max-width: 100%; height: auto; }
a { color: #9DB7FF; text-underline-offset: 3px; }
a:hover { color: var(--foam); }
:focus-visible { outline: 2px solid var(--beacon); outline-offset: 2px; border-radius: 4px; }
h1, h2, h3 { line-height: 1.25; margin: 0; font-weight: 500; }
h1 { font-size: 28px; letter-spacing: -0.01em; }
h2 { font-size: 20px; }
h3 { font-size: 16px; }
p { margin: 0; }
code, .mono { font-family: var(--mono); font-size: 0.86em; }
.muted { color: var(--fog); }
.small { font-size: 13px; }
.hidden { display: none !important; }
.nowrap { white-space: nowrap; }

.skip { position: absolute; left: -999px; top: 8px; background: var(--beacon); color: #fff; padding: 8px 12px; border-radius: var(--r-ctl); z-index: 10; }
.skip:focus { left: 8px; }

/* ---------------------------------------------------------------- banner */
.synthetic {
  background: var(--deck-2);
  border-bottom: 1px solid var(--rope);
  color: var(--fog);
  font-size: 13px;
  padding: 6px var(--s4);
  text-align: center;
}
.synthetic strong { color: var(--held); font-weight: 500; }

/* ---------------------------------------------------------------- shell */
.shell { display: grid; grid-template-columns: var(--rail) minmax(0, 1fr); min-height: calc(100vh - 34px); }
.rail {
  border-right: 1px solid var(--rope);
  padding: var(--s5) var(--s4);
  display: flex; flex-direction: column; gap: var(--s5);
  position: sticky; top: 0; align-self: start; height: calc(100vh - 34px);
}
.brand { display: flex; align-items: center; gap: var(--s3); padding: 0 var(--s2); }
.brand-mark { width: 56px; height: auto; }
.brand-name { display: block; font-weight: 700; font-size: 18px; letter-spacing: 0.01em; }
.brand-by { display: block; color: var(--fog); font-size: 12px; }

.nav { display: flex; flex-direction: column; gap: 2px; }
.nav button {
  all: unset; cursor: pointer;
  display: flex; justify-content: space-between; align-items: center;
  padding: 9px var(--s3); border-radius: var(--r-ctl);
  color: var(--fog); font-size: 14px;
}
.nav button:hover { color: var(--foam); background: var(--deck); }
.nav button[aria-current="page"] { color: var(--foam); background: var(--deck-2); box-shadow: inset 3px 0 0 var(--beacon); }
.nav button:focus-visible { outline: 2px solid var(--beacon); }
.count { min-width: 22px; text-align: center; font-size: 12px; padding: 0 6px; border-radius: 999px; background: var(--held); color: #1b1300; font-weight: 500; }

.who { margin-top: auto; display: flex; flex-direction: column; gap: var(--s2); padding: var(--s3); border: 1px solid var(--rope); border-radius: var(--r-pane); }
.who-label { font-size: 12px; color: var(--fog); }
.who-role { font-size: 13px; color: var(--fog); }
.who-actions { display: flex; gap: var(--s2); flex-wrap: wrap; }

.main { padding: var(--s6) var(--s6) var(--s7); max-width: 1280px; outline: none; }

.foot {
  border-top: 1px solid var(--rope);
  padding: var(--s5) var(--s6);
  display: grid; grid-template-columns: 140px 1fr; gap: var(--s2) var(--s5); align-items: center;
  color: var(--fog); font-size: 13px;
}
.foot-logo { grid-row: span 2; width: 140px; }
.foot-links { display: flex; gap: var(--s4); }

/* ---------------------------------------------------------------- controls */
.btn {
  appearance: none; border: 1px solid transparent; cursor: pointer;
  font: inherit; font-size: 14px; font-weight: 500;
  padding: 9px 16px; border-radius: var(--r-ctl);
  background: var(--deck-2); color: var(--foam); border-color: var(--rope-2);
  transition: background-color .12s ease, border-color .12s ease;
}
.btn:hover { border-color: var(--fog-2); }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn-primary { background: var(--beacon); border-color: var(--beacon); color: var(--beacon-ink); }
.btn-primary:hover { background: #2E63EC; border-color: #2E63EC; }
.btn-danger { background: transparent; color: var(--refused); border-color: rgba(255, 90, 95, .5); }
.btn-ok { background: transparent; color: var(--cleared); border-color: rgba(61, 213, 152, .5); }
.btn-quiet { background: transparent; border-color: transparent; color: var(--fog); padding: 4px 6px; font-size: 13px; font-weight: 400; }
.btn-quiet:hover { color: var(--foam); border-color: transparent; text-decoration: underline; }
.btn[aria-busy="true"] { position: relative; color: transparent; }
.btn[aria-busy="true"]::after { content: "Working…"; position: absolute; inset: 0; display: grid; place-items: center; color: var(--foam); font-size: 13px; }

.select, .input, .textarea {
  width: 100%; font: inherit; color: var(--foam);
  background: var(--night); border: 1px solid var(--rope-2); border-radius: var(--r-ctl);
  padding: 9px 12px;
}
.textarea { resize: vertical; min-height: 200px; line-height: 1.55; }
.textarea.code { font-family: var(--mono); font-size: 13px; min-height: 360px; }
.select:focus, .input:focus, .textarea:focus { border-color: var(--beacon); outline: none; box-shadow: 0 0 0 3px rgba(61, 116, 255, .25); }
.field { display: flex; flex-direction: column; gap: 6px; }
.field > span { font-size: 13px; color: var(--fog); }
.fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s3); }
.fields > :first-child { grid-column: 1 / -1; }
.check { display: flex; gap: var(--s2); align-items: flex-start; font-size: 14px; color: var(--foam); }
.check input { margin-top: 5px; accent-color: var(--beacon); width: 16px; height: 16px; }

/* ---------------------------------------------------------------- page structure */
.page-head { display: flex; justify-content: space-between; align-items: flex-end; gap: var(--s4); margin-bottom: var(--s5); flex-wrap: wrap; }
.page-head p { color: var(--fog); max-width: 64ch; margin-top: 6px; }
.section { margin-top: var(--s6); }
.section > h2 { margin-bottom: var(--s3); }

.pane { background: var(--deck); border: 1px solid var(--rope); border-radius: var(--r-pane); padding: var(--s5); }
.pane + .pane { margin-top: var(--s4); }
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: var(--s5); align-items: start; }
.stack { display: flex; flex-direction: column; gap: var(--s4); }
.row { display: flex; gap: var(--s3); align-items: center; flex-wrap: wrap; }
.row.end { justify-content: flex-end; }
.between { display: flex; justify-content: space-between; align-items: center; gap: var(--s3); flex-wrap: wrap; }

.samples { display: flex; gap: var(--s2); flex-wrap: wrap; align-items: center; }
.samples .lead { font-size: 13px; color: var(--fog); margin-right: var(--s1); }
.chip-btn { all: unset; cursor: pointer; font-size: 13px; padding: 4px 10px; border-radius: 999px; border: 1px solid var(--rope-2); color: var(--fog); }
.chip-btn:hover { color: var(--foam); border-color: var(--fog-2); }
.chip-btn:focus-visible { outline: 2px solid var(--beacon); }

/* ---------------------------------------------------------------- the manifest (centrepiece) */
.manifest-empty { color: var(--fog); border: 1px dashed var(--rope-2); border-radius: var(--r-pane); padding: var(--s6) var(--s5); text-align: center; }
.manifest-empty strong { display: block; color: var(--foam); font-weight: 500; margin-bottom: 6px; font-size: 16px; }

.verdict { border-left: 4px solid var(--fault); padding: 2px 0 2px var(--s4); }
.verdict-title { font-size: 26px; font-weight: 700; line-height: 1.2; }
.verdict-sub { color: var(--fog); margin-top: 4px; }
.verdict[data-d="ALLOW"] { border-color: var(--cleared); } .verdict[data-d="ALLOW"] .verdict-title { color: var(--cleared); }
.verdict[data-d="REDACT_AND_ALLOW"] { border-color: var(--sealed); } .verdict[data-d="REDACT_AND_ALLOW"] .verdict-title { color: var(--sealed); }
.verdict[data-d="REVIEW_REQUIRED"] { border-color: var(--held); } .verdict[data-d="REVIEW_REQUIRED"] .verdict-title { color: var(--held); }
.verdict[data-d="BLOCK"] { border-color: var(--refused); } .verdict[data-d="BLOCK"] .verdict-title { color: var(--refused); }

.payload-label { display: flex; justify-content: space-between; gap: var(--s3); font-size: 13px; color: var(--fog); margin-bottom: 6px; }
.payload {
  font-family: var(--mono); font-size: 13.5px; line-height: 1.75;
  white-space: pre-wrap; overflow-wrap: anywhere;
  background: var(--night); border: 1px solid var(--rope); border-radius: var(--r-ctl);
  padding: var(--s4); margin: 0; max-height: 420px; overflow: auto;
}
.payload.withheld { color: var(--fog-2); }
.seal {
  display: inline-block; padding: 0 8px; border-radius: 999px;
  background: var(--seal); color: #fff; font-weight: 400;
  box-decoration-break: clone; -webkit-box-decoration-break: clone;
  line-height: 1.5;
}
.seal.secret { background: none; color: var(--refused); outline: 1px solid var(--refused); outline-offset: -1px; }

.explain { background: var(--deck-2); border-radius: var(--r-ctl); padding: var(--s3) var(--s4); font-size: 14px; }
.explain-head { font-size: 12px; color: var(--fog); margin-bottom: 2px; }

/* ---------------------------------------------------------------- tags & tables */
.tag { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; padding: 1px 9px; border-radius: 999px; border: 1px solid var(--rope-2); color: var(--fog); white-space: nowrap; }
.tag::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.tag[data-d="ALLOW"], .tag[data-s="COMPLETED"] { color: var(--cleared); border-color: rgba(61, 213, 152, .4); }
.tag[data-d="REDACT_AND_ALLOW"] { color: var(--sealed); border-color: rgba(197, 155, 255, .4); }
.tag[data-d="REVIEW_REQUIRED"], .tag[data-s="AWAITING_REVIEW"], .tag[data-s="APPROVED"] { color: var(--held); border-color: rgba(245, 185, 65, .4); }
.tag[data-d="BLOCK"], .tag[data-s="BLOCKED"], .tag[data-s="REJECTED"] { color: var(--refused); border-color: rgba(255, 90, 95, .4); }
.tag[data-s="ERROR"], .tag[data-s="EXPIRED"] { color: var(--fault); }
.tag.plain::before { display: none; }
.tag.pass { color: var(--cleared); } .tag.fail { color: var(--refused); }

.table-wrap { overflow-x: auto; border: 1px solid var(--rope); border-radius: var(--r-pane); }
table { width: 100%; border-collapse: collapse; font-size: 14px; }
th { text-align: left; font-weight: 500; color: var(--fog); font-size: 13px; padding: 10px var(--s4); border-bottom: 1px solid var(--rope); background: var(--deck); }
td { padding: 10px var(--s4); border-bottom: 1px solid var(--rope); vertical-align: top; }
tr:last-child td { border-bottom: 0; }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
tr.clickable { cursor: pointer; }
tr.clickable:hover td { background: var(--deck); }

.kv { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 6px var(--s4); font-size: 14px; }
.kv dt { color: var(--fog); }
.kv dd { margin: 0; overflow-wrap: anywhere; }

.rules { display: flex; flex-wrap: wrap; gap: 6px; }
.rule { font-family: var(--mono); font-size: 12px; padding: 1px 8px; border-radius: 6px; background: var(--deck-2); color: var(--fog); }
.rule.deciding { color: var(--foam); outline: 1px solid var(--rope-2); }

.notice { border: 1px solid var(--rope-2); border-radius: var(--r-ctl); padding: var(--s3) var(--s4); font-size: 14px; }
.notice.error { border-color: rgba(255, 90, 95, .55); color: #FFC9CB; background: rgba(255, 90, 95, .07); }
.notice.ok { border-color: rgba(61, 213, 152, .5); color: #BFF3DD; background: rgba(61, 213, 152, .06); }

details.disclose { border-top: 1px solid var(--rope); padding-top: var(--s3); }
details.disclose summary { cursor: pointer; color: var(--fog); font-size: 14px; }
details.disclose summary:hover { color: var(--foam); }
details.disclose[open] summary { margin-bottom: var(--s3); }
.list { margin: 0; padding-left: 18px; color: var(--fog); font-size: 14px; }
.list li + li { margin-top: 4px; }

/* ---------------------------------------------------------------- scenarios */
.scen { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: var(--s4); padding: var(--s4) 0; border-bottom: 1px solid var(--rope); align-items: start; }
.scen:last-child { border-bottom: 0; }
.scen-id { font-weight: 700; font-size: 22px; color: var(--fog-2); line-height: 1.2; }
.scen-body { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.scen-meta { display: flex; gap: var(--s2); flex-wrap: wrap; align-items: center; font-size: 13px; color: var(--fog); }
.scen-result { margin-top: var(--s2); display: flex; flex-direction: column; gap: var(--s2); }
.steps { margin: 0; padding-left: 20px; font-size: 13.5px; color: var(--fog); }
.checks { display: flex; flex-wrap: wrap; gap: 6px; }
.scoreline { font-size: 15px; }
.scoreline strong { font-weight: 700; }

/* ---------------------------------------------------------------- oversight */
.bar { display: flex; height: 14px; border-radius: 999px; overflow: hidden; background: var(--rope); }
.bar > span { display: block; height: 100%; }
.legend { display: flex; gap: var(--s4); flex-wrap: wrap; font-size: 13px; color: var(--fog); margin-top: var(--s2); }
.legend i { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 6px; }
.figures { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 0; border: 1px solid var(--rope); border-radius: var(--r-pane); overflow: hidden; }
.figures > div { padding: var(--s4); border-right: 1px solid var(--rope); }
.figures > div:last-child { border-right: 0; }
.figures dt { color: var(--fog); font-size: 13px; }
.figures dd { margin: 2px 0 0; font-size: 20px; font-weight: 500; font-variant-numeric: tabular-nums; }

/* ---------------------------------------------------------------- audit */
.chain { list-style: none; margin: 0; padding: 0; }
.chain li { display: grid; grid-template-columns: 52px minmax(0, 1fr) auto; gap: var(--s3); padding: 10px 0; border-bottom: 1px solid var(--rope); font-size: 14px; }
.chain .seq { color: var(--fog-2); font-variant-numeric: tabular-nums; }
.chain .hash { font-family: var(--mono); font-size: 12px; color: var(--fog); }

/* ---------------------------------------------------------------- drawer */
.drawer-back { position: fixed; inset: 0; background: rgba(5, 4, 15, .6); z-index: 20; }
.drawer {
  position: fixed; top: 0; right: 0; bottom: 0; width: min(640px, 100vw);
  background: var(--deck); border-left: 1px solid var(--rope-2); z-index: 21;
  padding: var(--s5); overflow-y: auto; display: flex; flex-direction: column; gap: var(--s4);
}
.drawer-head { display: flex; justify-content: space-between; align-items: center; gap: var(--s3); }
.json { font-family: var(--mono); font-size: 12px; white-space: pre-wrap; overflow-wrap: anywhere; background: var(--night); border: 1px solid var(--rope); border-radius: var(--r-ctl); padding: var(--s3); margin: 0; max-height: 360px; overflow: auto; color: var(--fog); }

/* ---------------------------------------------------------------- responsive */
@media (max-width: 1080px) {
  .split { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 820px) {
  .shell { grid-template-columns: minmax(0, 1fr); }
  .rail { position: static; height: auto; border-right: 0; border-bottom: 1px solid var(--rope); padding: var(--s4); gap: var(--s3); }
  .nav { flex-direction: row; overflow-x: auto; gap: 4px; padding-bottom: 2px; scrollbar-width: thin; }
  .nav button { white-space: nowrap; padding: 7px 12px; }
  .nav button[aria-current="page"] { box-shadow: inset 0 -2px 0 var(--beacon); }
  .who { margin-top: 0; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 6px var(--s3); padding: var(--s3); }
  .who-role { display: none; }
  .who-actions { grid-column: 1 / -1; }
  .main { padding: var(--s5) var(--s4) var(--s6); }
  .fields { grid-template-columns: minmax(0, 1fr); }
  h1 { font-size: 23px; }
  .verdict-title { font-size: 22px; }
  .foot { grid-template-columns: minmax(0, 1fr); padding: var(--s5) var(--s4); }
  .foot-logo { grid-row: auto; }
  .scen { grid-template-columns: 28px minmax(0, 1fr); }
  .scen > .scen-act { grid-column: 2; }
  .chain li { grid-template-columns: 40px minmax(0, 1fr); }
  .chain .hash { grid-column: 2; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

/* Enthernet branding + campaign series links */
.brand-logo { display: inline-flex; line-height: 0; flex: none; }
.brand-logo img { height: 40px; width: auto; display: block; }
.brand-logo:focus-visible, .foot-logo:focus-visible { outline: 2px solid var(--beacon); outline-offset: 2px; }
.foot-logo { display: block; line-height: 0; }
.foot-logo img { width: 140px; height: auto; display: block; }
.bb-series { grid-column: 2; display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: baseline; }
.bb-series a { color: var(--fog); text-decoration: underline; text-underline-offset: 3px; }
.bb-series a:hover { color: var(--foam); }
.bb-series [aria-current] { color: var(--foam); font-weight: 700; }
@media (max-width: 720px) { .bb-series { grid-column: auto; } }
.brand { flex-direction: column; align-items: flex-start; gap: var(--s2); }