:root { color-scheme: dark; --bg-primary:#091613; --bg-secondary:#111e1b; --text-primary:#c1c8c4; --text-secondary:#a1d1bf; --accent:#55ffbe; --border:#414846; --error:#ffaaa3; --radius:3px; --font-sans:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; }
* { box-sizing:border-box; } body { margin:0; background:var(--bg-primary); color:var(--text-primary); font:15px/1.6 var(--font-sans); } a { color:var(--text-secondary); text-underline-offset:4px; } a:hover { color:var(--accent); } :focus-visible { outline:2px solid var(--accent); outline-offset:4px; } header { display:flex; justify-content:space-between; align-items:center; gap:16px; flex-wrap:wrap; padding:22px 5vw; border-bottom:1px solid var(--border); background:var(--bg-secondary); } .brand { font-size:24px; font-weight:650; text-decoration:none; } .brand span { font-weight:400; color:var(--text-primary); } .mode,.eyebrow { font-size:11px; letter-spacing:1.3px; } nav { display:flex; gap:28px; padding:0 5vw; border-bottom:1px solid var(--border); } nav a { padding:14px 0; text-decoration:none; border-bottom:2px solid transparent; } nav a[aria-current] { color:var(--accent); border-color:var(--accent); } main { max-width:1240px; margin:auto; padding:28px 5vw 60px; } .notice { border-left:3px solid var(--text-secondary); padding:10px 16px; background:var(--bg-secondary); display:grid; gap:2px; font-size:13px; } .notice span,.muted { color:var(--text-secondary); } .heading { margin:32px 0; } .eyebrow { color:var(--text-secondary); margin-bottom:8px; } h1 { font-size:32px; line-height:1.2; margin:0 0 12px; font-weight:600; } h2 { font-size:19px; font-weight:600; } section { margin:30px 0; } section + section { border-top:1px solid var(--border); padding-top:18px; } p { margin:10px 0; } .facts { display:grid; grid-template-columns:minmax(130px,1fr) minmax(0,3fr); margin:20px 0; } dt,dd { border-bottom:1px solid var(--border); padding:16px 0; margin:0; min-width:0; overflow-wrap:anywhere; } dt { font-weight:600; padding-right:20px; } .followups { padding-left:20px; } .followups li { padding:6px 0; } button,.button { border:1px solid var(--border); border-radius:var(--radius); background:var(--bg-secondary); color:var(--text-primary); padding:9px 16px; font:inherit; cursor:pointer; text-decoration:none; display:inline-block; } button:hover,.button:hover { border-color:var(--accent); } label { display:block; margin-bottom:8px; font-weight:600; } .search { display:flex; align-items:center; gap:14px; flex-wrap:wrap; } input { flex:1 1 240px; min-width:0; border:1px solid var(--border); border-radius:var(--radius); background:var(--bg-secondary); color:var(--text-primary); padding:10px 12px; font:inherit; } input::placeholder { color:var(--text-secondary); } .table-scroll { overflow:auto; } table { width:100%; border-collapse:collapse; text-align:left; } th,td { padding:16px 12px; border-bottom:1px solid var(--border); vertical-align:top; overflow-wrap:anywhere; } thead { background:var(--bg-secondary); font-size:12px; } tbody th { width:28%; font-weight:500; } td:nth-child(2) { width:23%; } code { font-size:13px; overflow-wrap:anywhere; } footer { border-top:1px solid var(--border); padding:18px 5vw; font-size:12px; color:var(--text-secondary); } .skip { position:absolute; top:-80px; left:12px; padding:8px; background:var(--bg-secondary); } .skip:focus { top:8px; } .error { color:var(--error); } .htmx-indicator { visibility:hidden; font-size:12px; } .htmx-request .htmx-indicator,.htmx-request.htmx-indicator { visibility:visible; } @media(max-width:640px) { h1 { font-size:27px; } .facts { grid-template-columns:minmax(0,1fr); } dt { border-bottom:0; padding-bottom:0; } dd { padding-top:6px; } th,td { padding:12px 8px; } table { min-width:540px; } .mode { font-size:10px; } }

/* Operational surfaces: cards summarize; tables retain comparable records. */
:root { --bg-card:#15251f; --bg-hover:#1c3028; --border-subtle:#2b4037; --warning:#edc078; --warning-bg:#302a1d; --accent-surface:#153e2f; }
header { border-top:3px solid var(--text-secondary); }
.brand { color:var(--accent); letter-spacing:-.5px; }
.mode { border:1px solid var(--border); border-radius:var(--radius); padding:5px 9px; color:var(--text-secondary); }
nav a { padding-left:12px; padding-right:12px; }
nav a[aria-current] { background:var(--bg-secondary); }
.heading h1 { letter-spacing:-.7px; }
.summary-grid,.environment-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; }
.card { background:var(--bg-card); border:1px solid var(--border-subtle); border-radius:var(--radius); padding:24px; min-width:0; }
.summary-grid > section { margin:0; }
.coverage-card { border-top:3px solid var(--text-secondary); }
.attention-card { border-top:3px solid var(--warning); }
.card h2,.card h3 { margin:0; }
.card h3 { font-size:17px; font-weight:600; }
.metric { display:block; font-size:38px; font-weight:600; line-height:1.2; margin:12px 0 6px; color:var(--text-secondary); }
.attention-card .metric { color:var(--warning); }
.card .button,.attention-card > a { margin-top:12px; }
.primary { background:var(--accent-surface); border-color:var(--text-secondary); color:var(--text-secondary); }
.section-heading,.card-heading { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px; }
.section-heading h2 { margin:0; }
.environment-grid { margin-top:18px; }
.badge { display:inline-block; font-size:11px; line-height:1.5; font-weight:500; letter-spacing:.2px; padding:3px 7px; border:1px solid var(--border); border-radius:var(--radius); background:var(--bg-secondary); color:var(--text-secondary); }
.warning { color:var(--warning); background:var(--warning-bg); border-color:var(--warning); }
.compact-facts { margin:18px 0 0; }
.compact-facts dt { font-size:12px; color:var(--text-secondary); border:0; padding:12px 0 2px; }
.compact-facts dd { padding:0 0 12px; border-color:var(--border-subtle); font-size:14px; }
.compact-facts dd:last-child { border:0; padding-bottom:0; }
.verification-panel { border-top:1px solid var(--border-subtle); padding:24px; }
.followups { padding-left:24px; margin-bottom:0; }
.followups li { padding:12px 0 12px 8px; border-bottom:1px solid var(--border-subtle); }
.followups li:last-child { border:0; }
.followups li::marker { color:var(--warning); font-weight:600; }
.filter-panel { padding:20px; background:var(--bg-card); border:1px solid var(--border-subtle); border-radius:var(--radius); }
.filter-panel label { font-size:13px; }
.table-scroll { border:1px solid var(--border-subtle); border-radius:var(--radius); background:var(--bg-secondary); }
th,td { border-color:var(--border-subtle); }
thead { background:var(--bg-card); color:var(--text-secondary); }
tbody tr:hover { background:var(--bg-hover); }
tbody th a { font-weight:600; text-decoration:none; }
tbody th a:hover { text-decoration:underline; }
tbody tr:last-child > * { border-bottom:0; }
.path-badge { background:var(--accent-surface); }
.detail-panel { background:var(--bg-card); padding:8px 24px; border:1px solid var(--border-subtle); border-radius:var(--radius); }
.detail-panel dt,.detail-panel dd { border-color:var(--border-subtle); }
@media(max-width:760px) { .summary-grid,.environment-grid { grid-template-columns:minmax(0,1fr); } .card { padding:20px; } .section-heading { align-items:flex-start; } }

nav { gap:12px; flex-wrap:wrap; }
.card .table-scroll { margin-top:20px; }

.pagination { display:flex; gap:16px; align-items:center; flex-wrap:wrap; margin:20px 0; }

.flow { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:30px; list-style:none; padding:0; margin:24px 0; }
.flow li { position:relative; min-width:0; }
.flow li + li::before { content:'→'; position:absolute; left:-24px; top:32px; color:var(--text-secondary); }
.flow a { display:block; height:100%; border:1px solid var(--border); border-top:3px solid var(--text-secondary); background:var(--bg-card); border-radius:var(--radius); padding:20px; text-decoration:none; }
.flow a:hover { background:var(--bg-hover); border-color:var(--accent); }
.flow strong,.flow span { display:block; }
.flow span { margin-top:8px; font-size:13px; color:var(--text-primary); }
.legacy-flow { grid-template-columns:repeat(2,minmax(0,1fr)); }
.legacy-flow a { border-top-color:var(--warning); }
article[id] { scroll-margin-top:24px; }
@media(max-width:760px) { .flow { grid-template-columns:minmax(0,1fr); } .flow li + li::before { content:'↓'; top:-29px; left:24px; } }

:root { --status-neutral-bg:#23332d; --status-neutral-text:#c1c8c4; }
.status-pill { display:inline-flex; align-items:center; gap:6px; border-radius:999px; padding:2px 9px; font-size:12px; background:var(--status-neutral-bg); color:var(--status-neutral-text); border:1px solid var(--border); width:max-content; }
.status-pill::before { content:'?'; font-size:11px; font-weight:700; }
.request-map { border:1px solid var(--border-subtle); padding:24px; border-radius:var(--radius); background:var(--bg-secondary); }
.diagram-scroll { overflow-x:auto; }
.diagram-canvas { position:relative; height:410px; min-width:900px; }
.diagram-lines { position:absolute; inset:0; width:100%; height:100%; }
.diagram-lines path { stroke:var(--text-secondary); stroke-width:1.5; fill:none; marker-end:url(#arrow); }
.diagram-lines marker path { fill:var(--text-secondary); stroke:none; marker-end:none; }
.diagram-lines .legacy-line { stroke-dasharray:6 5; }
.component-node { position:absolute; width:19.5%; padding:14px; background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius); text-decoration:none; display:grid; gap:4px; min-height:104px; }
.component-node strong { font-size:16px; }
.component-node > span:not(.status-pill) { font-size:12px; color:var(--text-secondary); }
.component-node[aria-current] { outline:2px solid var(--text-secondary); background:var(--bg-hover); }
.component-node:hover { border-color:var(--accent); }
.node-application { left:2.5%; top:96px; }.node-broker { left:27.5%; top:96px; }.node-gateway { left:52.5%; top:96px; }.node-provider { left:77.5%; top:96px; }
.node-processing { left:2.5%; top:282px; }.node-evidence { left:27.5%; top:282px; }.node-operations { left:77.5%; top:282px; }
.legacy-label { position:absolute; top:4px; left:23%; font-size:12px; color:var(--text-secondary); }
.evidence-label { position:absolute; top:230px; left:39%; font-size:12px; color:var(--text-secondary); }
.chunks-label { position:absolute; top:298px; left:22.2%; font-size:11px; color:var(--text-secondary); }
.flow-legend { display:flex; gap:24px; flex-wrap:wrap; font-size:12px; color:var(--text-secondary); }
.line-key { display:inline-block; width:28px; border-top:2px solid var(--text-secondary); vertical-align:middle; margin-right:6px; }.line-key.dashed { border-top-style:dashed; }
.component-panels { display:grid; gap:20px; }.component-panel[hidden] { display:none; }

.sign-in-panel { max-width:480px; margin:60px auto; }
.header-actions { display:flex; align-items:center; gap:12px; flex-wrap:wrap; }