/* AegisLab console, Phase R1-UI design system.
   Visual language adapted from the measured tokens of The Story Archive (docs/design/REFERENCE_DESIGN_AUDIT.md):
   DM Mono throughout, ink on light grey, 2 px ink rules, 12 px cards with a colour bar, a right-hand detail sheet.
   Colour carries meaning and is always paired with a word: moss = verified/pass, crimson = denied by policy,
   cobalt = permitted path, ochre = limitation/warning, danger = failed check or backend error, grey = not run. */

@font-face { font-family: "DM Mono"; src: url("/console/fonts/dm-mono-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "DM Mono"; src: url("/console/fonts/dm-mono-latin-400-italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "DM Mono"; src: url("/console/fonts/dm-mono-latin-500-normal.woff2") format("woff2"); font-weight: 500 600; font-style: normal; font-display: swap; }

/* ================================================================ tokens */
:root {
  /* surfaces and ink (reference values) */
  --bg: #f5f5f5;
  --panel: #ffffff;
  --panel2: #e8e8e8;
  --soft: #ebebeb;
  --ink: #111111;
  --ink2: #595959;
  --ink3: #8a8a8a;          /* inactive chip text: decorative or paired with a label only */
  --line: #d4d4d4;
  --line2: #d9d9d9;
  --faint: #c4c4c4;
  --hover-ink: #3a3a3a;
  --on-ink: #f5f5f5;
  --shadow-pop: 0 8px 24px rgba(0, 0, 0, .14), 0 1px 3px rgba(0, 0, 0, .1);

  /* reference palette */
  --crimson: #b3263e;
  --rust: #b4532a;
  --ochre: #8c6210;
  --moss: #2f7a4a;
  --teal: #1f7a7a;
  --cobalt: #2f6fb3;
  --violet: #5d44a8;
  --plum: #8a3f7a;
  --danger: #9b2c2c;

  /* security states */
  --s-pass: var(--moss);       /* verified, PASS, accepted as expected */
  --s-deny: var(--crimson);    /* refused by policy: a correct security decision */
  --s-allow: var(--cobalt);    /* permitted path, allowed request */
  --s-warn: var(--ochre);      /* limitation, warning, not proven */
  --s-fail: var(--danger);     /* FAIL, ERROR, verification failed */
  --s-none: var(--ink2);       /* not run, unavailable */

  /* evidence labels */
  --l-live: var(--teal);
  --l-rec: var(--ochre);
  --l-pre: var(--violet);
  --l-stub: var(--rust);

  /* graph edges */
  --e-allow: var(--cobalt);
  --e-deny: var(--crimson);
  --e-audit: var(--ochre);
  --e-trust: var(--violet);

  /* type */
  --font: "DM Mono", ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
  --fs-tab: 24px;
  --lh-tab: 36px;
  --fs-title: 19px;
  --fs-body: 15px;
  --fs-read: 14px;
  --fs-tag: 13px;
  --fs-ctl: 13px;
  --fs-ctl-sm: 12px;
  --fs-label: 11px;
  --fs-field: 24px;

  /* space and shape */
  --gutter: 32px;
  --rule: 2px;
  --hband: 3px;
  --tab-h: 52px;
  --ctl-h: 30px;
  --ctl-h-sm: 24px;
  --ctl-h-lg: 40px;
  --ctl-r: 6px;
  --pill: 999px;
  --radius: 12px;
  --ico: 21px;
  --ico-sm: 16px;
  --ico-lg: 30px;
  --sheet-w: clamp(420px, 40vw, 580px);
  --lift: cubic-bezier(.4, 0, .2, 1);
  color-scheme: light;
}

/* ================================================================ base */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
html, body { margin: 0; background: var(--bg); color: var(--ink); }
body { font: 400 var(--fs-body)/1.5 var(--font); font-variant-ligatures: none; min-height: 100vh; }
a { color: inherit; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
h1, h2, h3, h4 { margin: 0; font-weight: 400; line-height: 1.2; }
p { margin: 0 0 .6em; }
ul, ol { margin: 0; }
code, .mono { font-family: var(--font); font-size: .92em; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
button:disabled { cursor: not-allowed; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
::selection { background: var(--ink); color: var(--on-ink); }
.vh { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: -999px; top: 8px; background: var(--ink); color: var(--on-ink); padding: 6px 12px; z-index: 90; border-radius: var(--ctl-r); text-decoration: none; }
.skip:focus { left: 8px; }
.ico { width: var(--ico-sm); height: var(--ico-sm); flex: none; vertical-align: -3px; }
.ico.md { width: var(--ico); height: var(--ico); }
.ico.lg { width: var(--ico-lg); height: var(--ico-lg); }

/* ================================================================ header */
.site-head { padding: 35px var(--gutter) 0; display: grid; grid-template-columns: minmax(0, 1fr); }
.hrow1 { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 52px; padding-bottom: 2px; }
.brand { font-size: var(--fs-tab); line-height: var(--lh-tab); letter-spacing: -.01em; text-decoration: none; display: inline-flex; align-items: baseline; gap: 14px; }
.brand small { font-size: var(--fs-tag); color: var(--ink2); letter-spacing: 0; }
.hrow1 .tools { display: flex; align-items: center; gap: 18px; }
.sys { display: inline-flex; align-items: center; gap: 8px; font-size: var(--fs-tag); color: var(--ink2); white-space: nowrap; }
.sys .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--ink3); flex: none; }
.sys.live .dot { background: var(--s-pass); }
.sys.degraded .dot { background: var(--s-warn); }
.sys.offline .dot { background: var(--s-fail); }
.sys.ro .dot { background: var(--ink3); }
.iconbtn { display: inline-grid; place-items: center; width: var(--ico-lg); height: var(--ico-lg); border: 0; background: none; padding: 0; border-radius: var(--ctl-r); color: var(--ink); text-decoration: none; }
.iconbtn:hover { background: var(--soft); }

.hrow2 { border-top: var(--rule) solid var(--ink); padding: var(--hband) 0; position: relative; }
.subnav { display: flex; justify-content: center; align-items: center; overflow-x: auto; scrollbar-width: none; padding: 0 20px; scroll-padding: 0 40px; }
.subnav::-webkit-scrollbar { display: none; }
.subnav a { flex: none; display: inline-flex; align-items: center; height: var(--tab-h); font-size: var(--fs-tab); letter-spacing: -.01em; text-decoration: none; white-space: nowrap; }
.subnav a:not(:last-child)::after { content: ","; color: var(--ink2); margin-right: .4em; }
.subnav a:hover span { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 7px; }
.subnav a:focus-visible { outline: none; }
.subnav a:focus-visible span { outline: 2px solid var(--ink); outline-offset: 4px; border-radius: 4px; }
.ringed { position: relative; display: inline-block; }

/* hand-drawn selection ring (own path, generated per label in console.js) */
.ring { position: absolute; pointer-events: none; overflow: visible; }
.ring path { fill: none; stroke: #2a2a2a; stroke-linecap: round; stroke-linejoin: round; filter: url(#pencil); stroke-dasharray: 1; stroke-dashoffset: 1; animation: ringin .38s var(--lift) forwards; }
.ring path:first-child { stroke-width: 2.2px; opacity: .9; }
.ring path + path { stroke-width: 1.3px; opacity: .45; animation-delay: .04s; }
@keyframes ringin { to { stroke-dashoffset: 0; } }
.ring.still path { animation: none; stroke-dashoffset: 0; }

/* search band: one big field, filters and sort at the right, ruled above and below */
.band { border-top: var(--rule) solid var(--ink); border-bottom: var(--rule) solid var(--ink); padding: var(--hband) 0; display: flex; align-items: center; gap: 24px; position: relative; }
[hidden] { display: none !important; }
.band[hidden] { display: none; }
.band.solo { border-top: var(--rule) solid var(--ink); border-bottom: 0; padding: 0; }
.search { position: relative; flex: 1 1 auto; min-width: 0; display: flex; align-items: center; }
.search .ico { position: absolute; left: -1px; width: var(--ico); height: var(--ico); pointer-events: none; }
.search input { width: 100%; height: var(--tab-h); border: 0; background: transparent; padding: 0 0 0 34px; font-size: var(--fs-field); letter-spacing: -.01em; border-radius: 0; }
.search input::placeholder { color: var(--ink); opacity: 1; }
.search input:focus { outline: none; }
.search input:focus-visible { box-shadow: inset 0 -2px 0 var(--ink); }
.search input::-webkit-search-cancel-button { -webkit-appearance: none; }
.bandbtn { flex: none; display: inline-flex; align-items: center; gap: 10px; height: var(--tab-h); border: 0; background: none; padding: 0; font-size: var(--fs-field); letter-spacing: -.01em; }
.bandbtn .ico { width: var(--ico); height: var(--ico); transition: transform .18s var(--lift); }
.bandbtn[aria-expanded="true"] .chev { transform: rotate(180deg); }
.bandbtn:focus-visible { outline: none; text-decoration: underline; text-underline-offset: 7px; }
.bandbtn .count { font-size: var(--fs-tag); background: var(--ink); color: var(--on-ink); border-radius: var(--pill); padding: 0 7px; line-height: 20px; }

/* filter panel: facet columns separated by 2 px rules */
.fpanel { padding: 12px 0 0; }
.fpanel[hidden] { display: none; }
.frow { display: flex; align-items: center; gap: 18px; min-height: var(--ctl-h); padding-bottom: 11px; border-bottom: var(--rule) solid var(--ink); font-size: var(--fs-tag); flex-wrap: wrap; }
.frow .spacer { flex: 1; }
.frow label { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.frow input[type="radio"] { appearance: none; width: 16px; height: 16px; border: 2px solid var(--ink); border-radius: 50%; margin: 0; display: grid; place-items: center; }
.frow input[type="radio"]::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--ink); transform: scale(0); transition: transform .12s var(--lift); }
.frow input[type="radio"]:checked::before { transform: scale(1); }
.facets { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); padding: 12px 0 16px; border-bottom: var(--rule) solid var(--ink); }
.facet { padding: 0 20px 8px; border-left: var(--rule) solid var(--ink); min-width: 0; }
.facet:first-child { border-left: 0; padding-left: 0; }
.facet h3 { display: flex; justify-content: space-between; font-size: var(--fs-body); margin: 2px 0 10px; }
.facet h3 span { color: var(--ink2); }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }

/* ================================================================ controls */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: var(--ctl-h); padding: 0 12px; font-size: var(--fs-ctl); border: 0; border-radius: var(--pill); background: transparent; color: var(--ink); box-shadow: inset 0 0 0 2px var(--ink); text-decoration: none; white-space: nowrap; transition: background .15s var(--lift), color .15s var(--lift); }
.btn:hover:not(:disabled) { background: var(--soft); }
.btn.solid { background: var(--ink); color: var(--on-ink); box-shadow: none; font-weight: 500; }
.btn.solid:hover:not(:disabled) { background: var(--hover-ink); }
.btn.lg { height: var(--ctl-h-lg); padding: 0 18px; font-size: var(--fs-body); }
.btn.block { width: 100%; }
.btn.warn { box-shadow: inset 0 0 0 2px var(--danger); color: var(--danger); }
.btn.solid.warn { background: var(--danger); color: var(--on-ink); box-shadow: none; }
.btn:disabled { opacity: .45; }
.btn.busy { opacity: .7; cursor: progress; }
.btn.busy::after { content: ""; width: 10px; height: 10px; border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent; animation: spin .7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.linkbtn { border: 0; background: none; padding: 0; text-decoration: underline; text-underline-offset: 3px; font-size: inherit; }
.why { font-size: var(--fs-ctl-sm); color: var(--ink2); font-style: italic; }

.field { display: inline-flex; flex-direction: column; gap: 4px; font-size: var(--fs-ctl-sm); color: var(--ink2); max-width: 100%; min-width: 0; }
.field select, .select { appearance: none; height: var(--ctl-h); padding: 0 32px 0 12px; font-size: var(--fs-ctl); color: var(--ink); background: var(--bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%23111111' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 11px center / 11px 8px; border: 0; box-shadow: inset 0 0 0 2px var(--ink); border-radius: var(--ctl-r); max-width: 100%; }
.field select:hover { background-color: var(--soft); }

.switch { display: inline-flex; align-items: center; gap: 10px; font-size: var(--fs-tag); cursor: pointer; }
.switch input { appearance: none; width: 34px; height: 20px; border-radius: var(--pill); box-shadow: inset 0 0 0 2px var(--ink); margin: 0; position: relative; background: transparent; transition: background .15s var(--lift); }
.switch input::before { content: ""; position: absolute; top: 4px; left: 4px; width: 12px; height: 12px; border-radius: 50%; background: var(--ink); transition: transform .15s var(--lift), background .15s var(--lift); }
.switch input:checked { background: var(--ink); }
.switch input:checked::before { transform: translateX(14px); background: var(--on-ink); }

/* chips: filter toggles (outlined), on = filled in the facet colour */
.chip { display: inline-flex; align-items: center; gap: 6px; height: var(--ctl-h-sm); padding: 0 10px; font-size: var(--fs-ctl-sm); border: 0; border-radius: var(--pill); background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); white-space: nowrap; transition: background .15s var(--lift); }
.chip:hover { background: var(--soft); }
.chip .n { margin-left: 2px; }
.chip .sw { width: 14px; height: 14px; border-radius: 50%; background: var(--fc, var(--ink)); margin-left: -5px; }
.chip.on, .chip.on:hover { background: var(--fc, var(--ink)); color: #fff; box-shadow: none; }
.chip.zero { opacity: .45; }
.chip.more { font-style: italic; box-shadow: none; border: 1px dashed var(--ink); }
.chip.kind { height: 33px; padding: 0 14px; font-size: var(--fs-tag); background: var(--fc, var(--ink)); color: #fff; box-shadow: none; }
.chip.kind.off { background: transparent; color: var(--ink3); box-shadow: inset 0 0 0 1.5px var(--line2); }
.chip.kind:hover { filter: brightness(1.08); }

/* tags and badges */
.tag { display: inline-flex; align-items: center; gap: 5px; font-size: var(--fs-tag); line-height: 1.5; padding: 2px 9px; border-radius: var(--pill); color: color-mix(in oklab, var(--tc, var(--ink2)) 86%, #000); box-shadow: inset 0 0 0 1.5px var(--tc, var(--ink2)); white-space: nowrap; background: transparent; }
.tag.more { --tc: var(--ink2); }
.badge { display: inline-flex; align-items: center; gap: 5px; font-size: var(--fs-tag); line-height: 1.5; padding: 2px 9px; border-radius: var(--pill); background: var(--bc, var(--panel2)); color: var(--on-ink); white-space: nowrap; }
.badge.neutral { --bc: var(--panel2); color: var(--ink2); }
.label { display: inline-flex; align-items: center; font-size: var(--fs-label); font-weight: 500; letter-spacing: .06em; text-transform: uppercase; line-height: 1.5; padding: 1px 8px; border-radius: var(--pill); color: var(--lc, var(--ink2)); box-shadow: inset 0 0 0 1.5px var(--lc, var(--ink2)); white-space: nowrap; }
.label.live { --lc: var(--l-live); }
.label.rec { --lc: var(--l-rec); }
.label.pre { --lc: var(--l-pre); }
.label.stub { --lc: var(--l-stub); }
.label.sandbox { --lc: var(--l-live); }
.label.na { --lc: var(--s-none); }
.st { font-weight: 500; }
.st.pass, .st.ok { color: var(--s-pass); }
.st.deny, .st.denied { color: var(--s-deny); }
.st.allow, .st.allowed { color: var(--s-allow); }
.st.warn, .st.warning { color: var(--s-warn); }
.st.fail, .st.failed, .st.error, .st.alert { color: var(--s-fail); }
.st.none, .st.info { color: var(--s-none); font-weight: 400; }
.stamp { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; min-width: 86px; padding: 4px 8px; border-radius: var(--ctl-r); font-size: var(--fs-ctl-sm); font-weight: 500; letter-spacing: .05em; color: var(--sc); box-shadow: inset 0 0 0 2px var(--sc); line-height: 1.3; }
.stamp small { font-weight: 400; letter-spacing: 0; font-size: var(--fs-label); }
.stamp.denied { --sc: var(--s-deny); }
.stamp.allowed { --sc: var(--s-allow); }
.stamp.error { --sc: var(--s-fail); background: var(--s-fail); color: var(--on-ink); }
.stamp.attempted { --sc: var(--ink2); }

/* ================================================================ page frame */
main { padding: 40px var(--gutter) 48px; min-height: 60vh; }
main:focus { outline: none; }
.page { animation: pagein .2s var(--lift); }
@keyframes pagein { from { opacity: 0; } to { opacity: 1; } }
.intro { display: flex; justify-content: space-between; align-items: flex-start; gap: 24px; margin-bottom: 28px; flex-wrap: wrap; }
.intro p { max-width: 86ch; margin: 0; }
.intro .labels { display: flex; gap: 6px; flex-wrap: wrap; }
.statement { font-size: var(--fs-tab); line-height: var(--lh-tab); letter-spacing: -.01em; max-width: 46ch; margin: 0 0 18px; }
.lede { max-width: 86ch; }
.muted { color: var(--ink2); }
.small { font-size: var(--fs-tag); }
.tiny { font-size: var(--fs-ctl-sm); color: var(--ink2); }
.it { font-style: italic; }
.foot { font-size: var(--fs-tag); color: var(--ink2); font-style: italic; }
.mt { margin-top: 12px; }
.row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.spread { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; flex-wrap: wrap; }

/* section with a ruled head: title left, count or link right (as the facet heads) */
.sec { margin-top: 44px; }
.sec:first-child { margin-top: 0; }
.sec-head { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; border-top: var(--rule) solid var(--ink); padding-top: 10px; margin-bottom: 16px; flex-wrap: wrap; }
.sec-head h2 { font-size: var(--fs-body); font-weight: 500; }
.sec-head .aside { font-size: var(--fs-tag); color: var(--ink2); }
.sec-head .aside a { color: var(--ink); }
.cols { display: grid; grid-template-columns: repeat(var(--n, 2), minmax(0, 1fr)); }
.cols > * { padding: 0 24px; border-left: var(--rule) solid var(--ink); min-width: 0; }
.cols > *:first-child { padding-left: 0; border-left: 0; }
.cols > *:last-child { padding-right: 0; }

/* label sub-heads, as the sheet's CONNECTIONS heading */
.lbl { font-size: var(--fs-label); font-weight: 600; letter-spacing: .055em; text-transform: uppercase; line-height: 1.5; margin: 22px 0 8px; }
.lbl:first-child { margin-top: 0; }

/* definition ledger */
.ledger { list-style: none; padding: 0; margin: 0; }
.ledger li { display: grid; grid-template-columns: minmax(130px, 34%) minmax(0, 1fr); gap: 16px; padding: 9px 0; border-bottom: 1px solid var(--line); font-size: var(--fs-read); line-height: 1.6; }
.ledger li:first-child { padding-top: 0; }
.ledger .k { color: var(--ink2); }
.ledger .v { min-width: 0; overflow-wrap: anywhere; }
.hash { font-size: var(--fs-ctl-sm); color: var(--ink2); overflow-wrap: anywhere; }

/* run lifecycle: the current state is ringed like the active tab */
.life { list-style: none; padding: 0; margin: 4px 0 14px; display: flex; flex-wrap: wrap; row-gap: 10px; }
.life li { display: flex; flex-direction: column; padding-right: 22px; min-width: 0; }
.life li b { font-weight: 400; font-size: var(--fs-body); }
.life li:not(:last-child) b::after { content: ","; color: var(--ink2); }
.life li span { font-size: var(--fs-ctl-sm); color: var(--ink2); font-style: italic; }
.life li.todo b { color: var(--ink3); }
.life li.fail b { color: var(--s-fail); }

/* ================================================================ cards */
.cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 17px; }
.cards.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cards.five { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.card { --mc: var(--ink2); position: relative; display: flex; flex-direction: column; gap: 8px; min-height: 228px; padding: 18px 18px 18px 26px; border-radius: var(--radius); background: var(--panel); box-shadow: inset 0 0 0 2px var(--mc); overflow: hidden; cursor: pointer; text-align: left; color: var(--ink); text-decoration: none; border: 0; transition: transform .24s var(--lift); }
.card::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 8px; background: var(--mc); }
.card:hover { transform: translateY(-6px); }
.card:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.card.auto { min-height: 0; cursor: default; }
.card.auto:hover { transform: none; }
.card .top { display: flex; justify-content: space-between; align-items: baseline; gap: 14px; padding-bottom: 12px; border-bottom: var(--rule) solid var(--mc); }
.card h3 { flex: 1 1 0; min-width: 0; font-size: var(--fs-title); font-weight: 500; line-height: 1.2; color: var(--mc); display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.card .badge { --bc: var(--mc); }
.card .meta { font-size: var(--fs-read); font-style: italic; color: var(--mc); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.card .mark { display: flex; align-items: center; gap: 6px; font-size: var(--fs-tag); font-weight: 500; color: var(--mc); }
.card .mark .st { font-weight: 500; }
.card .body { font-size: var(--fs-tag); line-height: 1.55; color: var(--ink); }
.card .tagline { display: flex; flex-wrap: wrap; gap: 6px; margin-top: auto; }
.card .tagline .tag { --tc: var(--mc); }
.card.sel { box-shadow: inset 0 0 0 2px var(--mc), 0 0 0 2px var(--bg), 0 0 0 4px var(--ink); }
.card.dim { opacity: .55; }
.card .claims { margin: 0; padding-left: 18px; font-size: var(--fs-tag); line-height: 1.55; }
.card .claims li + li { margin-top: 4px; }
@media (prefers-reduced-motion: no-preference) {
  .card.pre { opacity: 0; translate: 0 14px; }
  .card.in { opacity: 1; translate: 0; transition: opacity .25s var(--lift) var(--d, 0ms), translate .25s var(--lift) var(--d, 0ms), transform .24s var(--lift); }
}
.c-live { --mc: var(--l-live); }
.c-rec { --mc: var(--l-rec); }
.c-pre { --mc: var(--l-pre); }
.c-stub { --mc: var(--l-stub); }
.c-pass { --mc: var(--s-pass); }
.c-deny { --mc: var(--s-deny); }
.c-fail { --mc: var(--s-fail); }
.c-warn { --mc: var(--s-warn); }
.c-ink { --mc: var(--ink); }
.c-grey { --mc: var(--ink2); }

/* ================================================================ tables */
.table-wrap { overflow-x: auto; border-top: var(--rule) solid var(--ink); position: relative; }
.table-wrap.scrolls { background: linear-gradient(to left, rgba(0, 0, 0, .06), transparent 18px) right / 18px 100% no-repeat; }
table { width: 100%; border-collapse: collapse; font-size: var(--fs-tag); }
th { text-align: left; font-size: var(--fs-label); font-weight: 600; letter-spacing: .055em; text-transform: uppercase; color: var(--ink); padding: 10px 12px 8px 0; border-bottom: var(--rule) solid var(--ink); white-space: nowrap; }
th button { border: 0; background: none; padding: 0; font: inherit; letter-spacing: inherit; text-transform: inherit; display: inline-flex; align-items: center; gap: 4px; }
td { padding: 8px 12px 8px 0; border-bottom: 1px solid var(--line); vertical-align: top; }
td.nw, th.nw { white-space: nowrap; }
tbody tr.click { cursor: pointer; }
tbody tr.click:hover td { background: var(--soft); }
tbody tr.click:focus-visible { outline: 2px solid var(--ink); outline-offset: -2px; }
tbody tr.sel td { background: var(--soft); }
tbody tr.sel td:first-child { box-shadow: inset 4px 0 0 var(--ink); padding-left: 10px; }
td:first-child, th:first-child { padding-left: 2px; }
.meta-row { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin: 0 0 14px; font-size: var(--fs-tag); color: var(--ink2); flex-wrap: wrap; }

/* ================================================================ detail sheet */
.scrim { position: fixed; inset: 0; background: rgba(0, 0, 0, 0); z-index: 40; }
.scrim[hidden] { display: none; }
.sheet { position: fixed; top: 0; right: 0; bottom: 0; width: var(--sheet-w); max-width: 100%; background: var(--bg); border-left: var(--rule) solid var(--ink); z-index: 50; display: flex; flex-direction: column; transform: translateX(102%); visibility: hidden; transition: transform .2s var(--lift), visibility 0s .2s; }
.sheet.open { transform: none; visibility: visible; transition: transform .2s var(--lift), visibility 0s; }
.sheet-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 14px; padding: 35px 24px 14px; border-bottom: var(--rule) solid var(--ink); margin: 0 0 0 0; }
.sheet-head h2 { font-size: var(--fs-tab); line-height: 1.2; letter-spacing: .01em; overflow-wrap: anywhere; }
.sheet-meta { padding: 14px 24px 0; font-size: var(--fs-read); font-style: italic; }
.sheet-body { flex: 1; overflow-y: auto; padding: 16px 24px 40px; font-size: var(--fs-read); line-height: 1.6; overscroll-behavior: contain; }
.sheet-body > *:first-child { margin-top: 0; }
.xbtn { flex: none; width: 30px; height: 30px; display: grid; place-items: center; border: 0; background: none; border-radius: var(--ctl-r); margin-top: -2px; }
.xbtn:hover { background: var(--soft); }
.sheet hr, hr.rule { border: 0; border-top: var(--rule) solid var(--ink); margin: 20px 0; }

/* connection rows (as the reference's sheet rows) */
.links { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.links li > a, .links li > button, .links li > div { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 10px; align-items: center; width: 100%; text-align: left; padding: 9px 14px 9px 12px; border: 0; border-radius: 8px; background: transparent; box-shadow: inset 0 0 0 2px var(--ink); text-decoration: none; color: var(--ink); font-size: var(--fs-body); line-height: 1.4; }
.links li > a:hover, .links li > button:hover { background: var(--soft); }
.links small { display: block; font-size: var(--fs-ctl-sm); font-style: italic; color: var(--ink2); }
.links .k { color: var(--kc, var(--ink)); }

/* request ledger and checks */
.steps { list-style: none; padding: 0; margin: 0; }
.steps > li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 14px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.steps .who { font-weight: 500; }
.steps .act { font-size: var(--fs-ctl-sm); }
.steps .exp { color: var(--ink2); font-size: var(--fs-tag); margin-top: 2px; }
.ev { margin-top: 8px; padding: 8px 10px; border-radius: var(--ctl-r); background: var(--panel); box-shadow: inset 0 0 0 1px var(--line); font-size: var(--fs-ctl-sm); line-height: 1.55; overflow-wrap: anywhere; }
.checks { list-style: none; padding: 0; margin: 0; }
.checks li { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 8px; padding: 6px 0; border-bottom: 1px solid var(--line); font-size: var(--fs-tag); }
.checks .found { display: block; color: var(--ink2); font-size: var(--fs-ctl-sm); overflow-wrap: anywhere; }
.checks .ok { color: var(--s-pass); }
.checks .no { color: var(--s-fail); }
.verdict { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 14px; align-items: center; padding: 12px 14px; border-radius: 8px; box-shadow: inset 0 0 0 2px var(--vc); margin: 10px 0 14px; }
.verdict b { font-size: var(--fs-title); font-weight: 500; color: var(--vc); letter-spacing: .02em; }
.verdict.pass { --vc: var(--s-pass); }
.verdict.fail, .verdict.error { --vc: var(--s-fail); }
.note { padding: 10px 14px; border-left: 4px solid var(--nc, var(--s-warn)); background: var(--panel); font-size: var(--fs-tag); line-height: 1.6; margin: 12px 0; }
.note.bad { --nc: var(--s-fail); }
.note.info { --nc: var(--ink); }
.cmd { font-size: var(--fs-ctl-sm); background: var(--ink); color: var(--on-ink); padding: 10px 12px; border-radius: 8px; overflow-x: auto; white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.55; }
pre.json { font-size: var(--fs-ctl-sm); background: var(--panel); box-shadow: inset 0 0 0 1px var(--line); padding: 10px 12px; border-radius: 8px; max-height: 340px; overflow: auto; white-space: pre-wrap; overflow-wrap: anywhere; margin: 8px 0 0; }
.transcript { font-size: var(--fs-ctl-sm); line-height: 1.6; background: var(--panel); box-shadow: inset 0 0 0 1px var(--line); border-radius: 8px; padding: 12px; max-height: 520px; overflow: auto; white-space: pre-wrap; overflow-wrap: anywhere; }
.transcript .pass, .transcript .ok { color: var(--s-pass); }
.transcript .fail, .transcript .bad { color: var(--s-fail); }
.transcript .limit, .transcript .warn { color: var(--s-warn); }
.transcript .head, .transcript .step { font-weight: 500; }
details > summary { cursor: pointer; font-size: var(--fs-tag); }

/* verification checks */
.vchecks { list-style: none; padding: 0; margin: 8px 0 0; }
.vchecks li { padding: 9px 0; border-bottom: 1px solid var(--line); }
.vchecks .k { display: flex; justify-content: space-between; gap: 12px; font-size: var(--fs-read); }
.vchecks p { margin: 2px 0 0; font-size: var(--fs-ctl-sm); color: var(--ink2); }

/* ================================================================ empty, loading, error */
.empty { padding: 34px 20px; text-align: center; color: var(--ink2); font-size: var(--fs-read); border: 1.5px dashed var(--faint); border-radius: var(--radius); }
.empty .ring-plus { width: 70px; height: 70px; border: 2px dashed var(--ink); border-radius: 50%; display: grid; place-items: center; margin: 0 auto 16px; color: var(--ink); }
.empty strong { display: block; font-weight: 400; font-size: 20px; color: var(--ink); margin-bottom: 6px; }
.loading { display: flex; align-items: center; gap: 12px; color: var(--ink2); font-size: var(--fs-read); padding: 30px 0; }
.loading i { display: inline-flex; gap: 5px; }
.loading i b { width: 7px; height: 7px; border-radius: 50%; background: var(--ink); animation: ld 1s var(--lift) infinite; }
.loading i b:nth-child(2) { animation-delay: .15s; }
.loading i b:nth-child(3) { animation-delay: .3s; }
@keyframes ld { 0%, 100% { opacity: .2; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-5px); } }
.errorbox { padding: 18px 20px; border-radius: var(--radius); box-shadow: inset 0 0 0 2px var(--s-fail); font-size: var(--fs-read); }
.errorbox b { color: var(--s-fail); font-weight: 500; }

/* ================================================================ dialog and toast */
dialog.confirm { border: 0; padding: 0; border-radius: var(--radius); background: var(--bg); color: var(--ink); width: min(480px, calc(100vw - 32px)); box-shadow: inset 0 0 0 2px var(--ink), var(--shadow-pop); }
dialog.confirm::backdrop { background: rgba(17, 17, 17, .28); }
dialog.confirm form { padding: 22px 24px 20px; }
dialog.confirm h2 { font-size: 20px; margin-bottom: 12px; }
dialog.confirm p { font-size: var(--fs-read); line-height: 1.6; }
dialog.confirm .row { justify-content: flex-end; margin-top: 18px; }
.toast { position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, 16px); background: var(--ink); color: var(--on-ink); padding: 10px 18px; border-radius: var(--pill); font-size: var(--fs-tag); opacity: 0; pointer-events: none; transition: opacity .18s var(--lift), transform .26s var(--lift); z-index: 80; max-width: calc(100vw - 32px); }
.toast.show { opacity: 1; transform: translate(-50%, 0); }
.toast.err { background: var(--danger); }

/* ================================================================ graph */
.persp { display: flex; align-items: center; flex-wrap: wrap; margin: 0 0 6px; }
.persp a { font-size: var(--fs-tab); letter-spacing: -.01em; text-decoration: none; height: 44px; display: inline-flex; align-items: center; }
.persp a:not(:last-child)::after { content: ","; color: var(--ink2); margin-right: .4em; }
.persp a:focus-visible { outline: none; }
.persp a:focus-visible span { outline: 2px solid var(--ink); outline-offset: 4px; border-radius: 4px; }
.persp-note { font-size: var(--fs-read); margin: 10px 0 18px; max-width: 110ch; }
.kinds { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 12px; }
.kinds .total { margin-left: auto; font-size: var(--fs-tag); }
.gwrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 380px); gap: 0; border: var(--rule) solid var(--ink); border-radius: var(--radius); overflow: hidden; background: var(--bg); }
.gframe { position: relative; min-height: 560px; height: calc(100vh - 360px); max-height: 760px; touch-action: none; overflow: hidden; display: flex; flex-direction: column; }
.gframe:focus-visible { outline: 2px solid var(--ink); outline-offset: -4px; }
.gframe svg.g { width: 100%; flex: 1 1 auto; min-height: 0; display: block; cursor: grab; user-select: none; -webkit-user-select: none; }
.gframe svg.g.dragging { cursor: grabbing; }
.gtools { position: absolute; top: 16px; right: 16px; display: flex; align-items: center; gap: 12px; z-index: 2; }
.zoom { display: inline-flex; border-radius: var(--pill); box-shadow: inset 0 0 0 2px var(--ink); background: var(--bg); }
.zoom button { width: 37px; height: 28px; display: grid; place-items: center; border: 0; background: none; padding: 0; }
.zoom button + button { border-left: 2px solid var(--ink); }
.zoom button:hover { background: var(--soft); }
.zoom button:first-child { border-radius: var(--pill) 0 0 var(--pill); }
.zoom button:last-child { border-radius: 0 var(--pill) var(--pill) 0; }
.roundbtn { width: 30px; height: 30px; border-radius: 50%; border: 0; box-shadow: inset 0 0 0 2px var(--ink); background: var(--bg); display: grid; place-items: center; padding: 0; }
.roundbtn:hover { background: var(--soft); }
/* the caption sits below the drawing (R4): as an overlay it covered the bottom row of components */
.gfoot { flex: none; padding: 8px 24px 14px; font-size: var(--fs-tag); font-style: italic; color: var(--ink2); pointer-events: none; }
.gfoot span { background: var(--bg); box-shadow: 0 0 0 4px var(--bg); }
.gside { border-left: var(--rule) solid var(--ink); padding: 18px 20px 24px; overflow-y: auto; max-height: calc(100vh - 360px); min-height: 560px; font-size: var(--fs-read); line-height: 1.6; }
.gside h3 { font-size: 20px; line-height: 1.25; margin-bottom: 6px; }
.gside .sub { font-style: italic; color: var(--ink2); margin-bottom: 10px; }
.gside ul.plain { list-style: none; padding: 0; margin: 0; }
.gside ul.dash { padding-left: 18px; margin: 0; }
.gside ul.dash li + li { margin-top: 3px; }
/* svg vocabulary */
.g .zone rect { fill: none; stroke: var(--faint); stroke-width: 1.5; stroke-dasharray: 5 5; }
.g .zone text { font: 500 11px var(--font); letter-spacing: .06em; text-transform: uppercase; fill: var(--ink2); }
.g .edge path { fill: none; stroke: var(--kc); stroke-width: 1.6; transition: opacity .18s var(--lift), stroke-width .18s var(--lift); }
.g .edge.deny path { stroke-dasharray: 6 5; }
.g .edge.trust path { stroke-dasharray: 2 4; stroke-linecap: round; }
.g .edge text { font: 400 11px var(--font); fill: var(--kc); paint-order: stroke; stroke: var(--bg); stroke-width: 4px; stroke-linejoin: round; transition: opacity .18s var(--lift); }
.g .edge .x { stroke: var(--kc); stroke-width: 2; }
.g .edge.allow { --kc: var(--e-allow); }
.g .edge.deny { --kc: var(--e-deny); }
.g .edge.audit { --kc: var(--e-audit); }
.g .edge.trust { --kc: var(--e-trust); }
.g .edge.hide { display: none; }
.g .edge.obs path { stroke-width: 2.6; }
.g .obsmark circle { fill: var(--panel); stroke: var(--s-pass); stroke-width: 2; }
.g .obsmark text { font: 500 11px var(--font); fill: var(--s-pass); stroke: none; }
.g .obsmark.fail circle { stroke: var(--s-fail); }
.g .obsmark.fail text { fill: var(--s-fail); }
.g.focus .edge.obs:not(.hot) { opacity: .45; }
.g .node { cursor: pointer; outline: none; }
.g .node rect.box { fill: var(--panel); stroke: var(--ink); stroke-width: 2; transition: fill .15s var(--lift); }
.g .node.trusted rect.box { stroke-width: 2; stroke-dasharray: none; fill: var(--bg); }
.g .node.trusted rect.inner { fill: none; stroke: var(--ink); stroke-width: 1; }
.g .node.out rect.box { stroke-dasharray: 4 4; fill: var(--bg); }
.g .node .bar { fill: var(--mc, var(--ink)); }
.g .node text { font: 400 13px var(--font); fill: var(--ink); pointer-events: none; }
.g .node text.sub { font-size: 11px; font-style: italic; fill: var(--ink2); }
.g .node:hover rect.box { fill: var(--soft); }
.g .node:focus-visible rect.box { stroke-width: 3.5; }
.g .node.sel rect.box { fill: var(--ink); }
.g .node.sel text, .g .node.sel text.sub { fill: var(--on-ink); }
.g .node.match rect.box { stroke-width: 3.5; }
.g.focus .edge:not(.hot) { opacity: .14; }
.g.focus .edge.hot path { stroke-width: 2.6; }
.g.focus .node:not(.sel):not(.near) { opacity: .38; }
.g.focus .zone { opacity: .5; }
.g.searching .node:not(.match) { opacity: .3; }
/* tree columns */
.g .colhead { font: 500 11px var(--font); letter-spacing: .06em; text-transform: uppercase; fill: var(--ink2); }
.g .leaf circle { fill: var(--bg); stroke: var(--ink); stroke-width: 2; }
.g .leaf.sel circle { fill: var(--ink); }
.g .leaf text { font: 400 12.5px var(--font); fill: var(--ink); }
.g .leaf.sel text { font-weight: 500; }
/* timeline */
.g .lane line { stroke: var(--line); stroke-width: 1; }
.g .lane text { font: 400 12px var(--font); fill: var(--ink2); }
.g .axis text { font: 400 11px var(--font); fill: var(--ink2); }
.g .axis line { stroke: var(--ink); stroke-width: 1.5; }
.g .phase line { stroke: var(--ink); stroke-width: 1; stroke-dasharray: 3 4; }
.g .phase text { font: 500 11px var(--font); letter-spacing: .05em; fill: var(--ink); }
.g .dot circle { stroke: var(--bg); stroke-width: 1.5; fill: var(--dc, var(--ink)); transition: r .12s var(--lift); }
.g .dot.denied { --dc: var(--s-deny); }
.g .dot.allowed { --dc: var(--s-allow); }
.g .dot.failed, .g .dot.alert, .g .dot.error { --dc: var(--s-fail); }
.g .dot.checkpoint circle { fill: var(--bg); stroke: var(--ochre); stroke-width: 2.2; }
.g .dot.sel circle { stroke: var(--ink); stroke-width: 3; }
.g.focus .dot:not(.sel) { opacity: .35; }
.gtext { padding: 18px 20px; overflow: auto; flex: 1 1 auto; min-height: 0; }
.gtext table { font-size: var(--fs-tag); }
.gtext h3 { font-size: var(--fs-body); font-weight: 500; margin: 0 0 8px; }

/* ================================================================ experiments chart */
.strip { display: grid; grid-template-columns: 120px minmax(0, 1fr) 210px; align-items: center; gap: 14px; padding: 10px 0; border-bottom: 1px solid var(--line); font-size: var(--fs-tag); }
.strip .track { position: relative; height: 28px; border-bottom: 1.5px solid var(--ink); }
.strip .chance { position: absolute; top: -4px; bottom: 0; border-left: 1.5px dashed var(--ink2); }
.strip .pt { position: absolute; bottom: 5px; width: 12px; height: 12px; margin-left: -6px; border-radius: 50%; background: var(--ink); box-shadow: 0 0 0 1.5px var(--bg); }
.strip .pt.hi { background: var(--s-deny); }
.strip-axis { display: grid; grid-template-columns: 120px minmax(0, 1fr) 210px; gap: 14px; font-size: var(--fs-ctl-sm); color: var(--ink2); padding-top: 6px; }
.strip-axis .ticks { position: relative; height: 18px; }
.strip-axis .ticks span { position: absolute; transform: translateX(-50%); }

/* ================================================================ footer */
.site-foot { margin: 0 var(--gutter); padding: 16px 0 40px; border-top: var(--rule) solid var(--ink); display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; font-size: var(--fs-ctl-sm); color: var(--ink2); }
.site-foot a { color: var(--ink2); }

/* ================================================================ responsive */
@media (max-width: 1279px) {
  :root { --fs-tab: 21px; --fs-field: 21px; }
  .cards, .cards.five { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .subnav { justify-content: flex-start; }
}
@media (max-width: 1099px) {
  .gwrap { grid-template-columns: minmax(0, 1fr); }
  .gside { border-left: 0; border-top: var(--rule) solid var(--ink); max-height: none; min-height: 0; }
  .gframe { height: 62vh; min-height: 420px; }
}
@media (max-width: 1023px) {
  :root { --fs-field: 16px; --sheet-w: min(480px, 100vw); }
  .cards, .cards.three, .cards.five { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bandbtn .lbltxt { font-size: 18px; }
  .sys .long { display: none; }
}
@media (max-width: 899px) {
  .cols { grid-template-columns: minmax(0, 1fr); }
  .cols > * { border-left: 0; padding: 0; }
  .cols > * + * { border-top: var(--rule) solid var(--ink); margin-top: 22px; padding-top: 18px; }
  .strip, .strip-axis { grid-template-columns: 92px minmax(0, 1fr); }
  .strip > :last-child { grid-column: 1 / -1; }
  .strip-axis > :last-child { display: none; }
}
@media (max-width: 699px) {
  :root { --gutter: 24px; --fs-tab: 18px; --tab-h: 46px; --sheet-w: 100vw; }
  .site-head { padding-top: 24px; }
  .brand small { display: none; }
  /* R4.5: in an operator session the header row was ~512 px of unwrapped text and ran off a phone screen (the page then
     stayed panned sideways). Phones get two lines: brand, status and info first; the session controls below. */
  .hrow1 { flex-wrap: wrap; gap: 0 16px; }
  .hrow1 .tools { display: contents; }
  .hrow1::after { content: ""; order: 2; flex-basis: 100%; }
  .hrow1 #sys { order: 1; margin-left: auto; }
  .hrow1 #tm-link { order: 1; }
  .hrow1 #sess, .hrow1 #sess-end { order: 3; margin: 2px 0 6px; }
  .cards, .cards.three, .cards.five { grid-template-columns: minmax(0, 1fr); }
  .card { min-height: 0; }
  main { padding-top: 28px; }
  .statement { font-size: 20px; line-height: 1.45; }
  .bandbtn .lbltxt { display: none; }
  .band { gap: 16px; }
  .ledger li { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .sheet { border-left: 0; }
  .sheet-head { padding-top: 24px; }
  .facet { border-left: 0; padding: 0 0 12px; }
  .facet + .facet { border-top: 1px solid var(--line); padding-top: 12px; }
  .gtools { top: 10px; right: 10px; gap: 8px; }
  .gfoot { padding: 6px 14px 10px; }
  .btn.lg { white-space: normal; height: auto; min-height: var(--ctl-h-lg); padding-block: 8px; text-align: center; }   /* R4: long labels (Verify with the independent verifier) wrap instead of running off a phone screen */
  .kinds .total { margin-left: 0; width: 100%; }
  .persp a { font-size: 20px; }
  .steps > li { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .stamp { justify-self: start; flex-direction: row; gap: 6px; }
  .site-foot { flex-direction: column; }
}
@media (max-width: 359px) {
  :root { --fs-tab: 16px; --gutter: 16px; }
}
@media (max-height: 500px) {
  .gframe { height: 420px; }
}

/* ================================================================ preferences */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0s !important; animation-delay: 0s !important; transition-duration: 0s !important; transition-delay: 0s !important; scroll-behavior: auto !important; }
  .ring path { stroke-dashoffset: 0; }
  .card:hover { transform: none; }
}
@media (forced-colors: active) {
  .card, .btn, .chip, .tag, .label, .stamp, .verdict, .zoom, .roundbtn, .links li > a, .links li > button { border: 1px solid CanvasText; }
  .card::before { background: CanvasText; }
  .g .edge path { stroke: CanvasText; }
  .ring path { stroke: Highlight; filter: none; }
}