:root {
  /* SecureAEye command-center palette (dark-canonical). Legacy var names are mapped onto the
     new system at the bottom so every existing page re-skins without touching its component CSS. */
  --bg:#070A12; --bg-grid:#0A0E17;
  --surface-1:#0E1420; --surface-2:#131B2B; --surface-3:#1A2436; --surface-4:#222E45; --surface-purple:#15122A;
  --line:#222E46; --line-soft:#18212F; --line-strong:#35466A;
  --ink-hi:#EDF2FB; --ink:#C7D1E2; --ink-dim:#8B96AC; --ink-faint:#5A6076;
  --ink-on-signal:#04140A; --ink-on-blue:#04121F;
  --blue:#3F9EF0; --blue-bright:#5FB2F6; --blue-deep:#1E5FA8; --blue-ghost:rgba(63,158,240,.12);
  --purple:#9B82F7; --purple-deep:#5B3FB8; --purple-ghost:rgba(155,130,247,.12);
  --amber:#E6A24A;
  --brand-cyan:#4FE0E6; --brand-violet:#A06CF0;
  --signal:#37F08A; --signal-bright:#5CFCA6; --signal-deep:#16A866;
  --signal-ghost:rgba(55,240,138,.12); --signal-line:rgba(55,240,138,.40);
  --cat-social:#EC6FA6; --cat-malware:#F2704A; --cat-network:#3F9EF0; --cat-web:#22C9B6; --cat-identity:#9B82F7;
  --cat-cloud:#74D0F5; --cat-wireless:#E6B23C; --cat-crypto:#C77DF0; --cat-ai:#5E6BFF; --cat-physical:#94A0BC;
  --font-display:"Space Grotesk",system-ui,sans-serif;
  --font-mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --r2:4px; --r3:8px;
  --glow-signal:0 0 0 1px var(--signal-line),0 0 20px rgba(55,240,138,.22);
  /* --- legacy names mapped onto the new system --- */
  --panel:var(--surface-2); --border:var(--line); --text:var(--ink); --muted:var(--ink-dim);
  --accent:var(--blue); --on-accent:var(--ink-on-blue); --accent-soft:var(--blue-ghost);
  --head:var(--bg-grid); --headtext:var(--ink-hi);
  --crit:#FF4D5E; --high:#FF8A3D; --med:#F2CB45; --low:#37F08A; --vlow:#6B7691;
  --chipbg:var(--surface-3); --shadow:inset 0 1px 0 rgba(255,255,255,.04),0 1px 2px rgba(0,0,0,.4);
  color-scheme:dark;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--text);
  font: 15px/1.55 Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
code { font: 12.5px ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; background: var(--chipbg);
  border-radius: 4px; padding: 1px 5px; overflow-wrap: anywhere; }
h1 { font-size: 30px; line-height: 1.2; margin: 0 0 8px; letter-spacing: -.01em; }
h2 { font-size: 20px; margin: 32px 0 10px; }
h3 { font-size: 15px; margin: 18px 0 6px; }
.muted { color: var(--muted); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.wrap { max-width: 1200px; margin: 0 auto; padding: 28px 16px 64px; }
.lede { color: var(--muted); font-size: 16.5px; max-width: 72ch; margin: 0 0 14px; }

header.site { background: var(--head); color: var(--headtext); position: sticky; top: 0; z-index: 10; }
.bar { max-width: 1200px; margin: 0 auto; padding: 12px 16px; display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.brand { color: var(--headtext); font-weight: 700; display: inline-flex; align-items: center; gap: 9px; }
.brand:hover { text-decoration: none; }
.logo { width: 22px; height: 22px; background: url(favicon.svg) center/contain no-repeat; display: inline-block; }
header nav { display: flex; gap: 4px; margin-left: auto; flex-wrap: wrap; }
header nav a { color: #cbd5e1; padding: 5px 10px; border-radius: 6px; font-size: 14px; }
header nav a:hover { background: rgba(255,255,255,.08); text-decoration: none; }
header nav a[aria-current] { color: #fff; background: rgba(56,189,248,.18); }
footer.site { border-top: 1px solid var(--border); color: var(--muted); font-size: 13px; }

/* hero / stats */
.hero { margin: 8px 0 30px; }
.eyebrow { display: inline-block; font-size: 11.5px; font-weight: 700; letter-spacing: .09em;
  text-transform: uppercase; color: var(--accent); background: var(--accent-soft);
  padding: 5px 12px; border-radius: 999px; margin-bottom: 16px; }
.hero h1 { font-size: 40px; line-height: 1.08; letter-spacing: -.022em; margin: 0 0 12px; }
.hero .lede { font-size: 18px; line-height: 1.5; max-width: 64ch; margin: 0; }
.hero .lede b { color: var(--text); font-weight: 600; }
.herohint { color: var(--muted); font-size: 13.5px; margin: 18px 0 0; }
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px;
  margin: 22px 0 0; max-width: 740px; }
.stats div { background: var(--panel); border: 1px solid var(--border); border-radius: 14px;
  padding: 15px 18px; box-shadow: var(--shadow); position: relative; overflow: hidden; }
.stats div::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--border); }
.stats .t-accent::before { background: var(--accent); }
.stats .t-gap::before { background: var(--high); }
.stats b { display: block; font-size: 32px; font-weight: 700; line-height: 1; letter-spacing: -.02em;
  font-variant-numeric: tabular-nums; margin-bottom: 7px; }
.stats .t-accent b { color: var(--accent); }
.stats .t-gap b { color: var(--high); }
.stats span { color: var(--muted); font-size: 11.5px; text-transform: uppercase; letter-spacing: .05em; font-weight: 600; }

/* search */
.searchrow { display: flex; gap: 8px; margin: 18px 0 10px; }
.searchrow input { flex: 1; min-width: 0; font: inherit; font-size: 16px; padding: 11px 14px; border-radius: 10px;
  border: 1px solid var(--border); background: var(--panel); color: var(--text); box-shadow: var(--shadow); }
.searchrow input:focus, .searchrow select:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
.searchrow select { font: inherit; padding: 0 10px; border-radius: 10px; border: 1px solid var(--border); background: var(--panel); color: var(--text); }
.btn { display: inline-block; font: inherit; font-size: 14px; padding: 8px 14px; border-radius: 9px; border: 1px solid var(--accent);
  background: var(--accent); color: var(--on-accent); cursor: pointer; }
.btn:hover { text-decoration: none; filter: brightness(1.08); }
.btn.ghost { background: var(--panel); color: var(--text); border-color: var(--border); }
#toggleFilters { display: none; }
.link { background: none; border: 0; color: var(--accent); cursor: pointer; font: inherit; font-size: 13px; padding: 0; }

.cats { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 18px; }
.cat { font: inherit; font-size: 13px; border: 1px solid var(--border); background: var(--panel); color: var(--text);
  border-radius: 999px; padding: 5px 11px; cursor: pointer; }
.cat span { color: var(--muted); font-variant-numeric: tabular-nums; margin-left: 3px; }
.cat.on { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.cat.on span { color: inherit; opacity: .75; }

/* layout */
.layout { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 24px; align-items: start; }
.filters { position: sticky; top: 70px; max-height: calc(100vh - 86px); overflow: auto; background: var(--panel);
  border: 1px solid var(--border); border-radius: 12px; padding: 12px 14px; box-shadow: var(--shadow); }
.fhead { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.toggle { display: flex; gap: 8px; font-size: 14px; padding: 3px 0; cursor: pointer; }
.facet { border-top: 1px solid var(--border); padding: 6px 0; }
.facet summary { cursor: pointer; font-weight: 600; font-size: 13.5px; padding: 4px 0; }
.facet summary em { font-style: normal; background: var(--accent); color: var(--on-accent); border-radius: 999px; padding: 0 6px; font-size: 11px; }
.facet label { display: flex; align-items: center; gap: 8px; font-size: 13.5px; padding: 2px 0 2px 2px; cursor: pointer; }
.facet label span { flex: 1; }
.facet label i { font-style: normal; color: var(--muted); font-size: 12px; font-variant-numeric: tabular-nums; }

.resulthead { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-bottom: 10px; color: var(--muted); font-size: 14px; }
.active { display: flex; gap: 6px; flex-wrap: wrap; }
.pill { font: inherit; font-size: 12px; border: 1px solid var(--accent); background: var(--accent-soft); color: var(--text);
  border-radius: 999px; padding: 2px 9px; cursor: pointer; }
.results { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.res a { display: block; background: var(--panel); border: 1px solid var(--border); border-radius: 12px; padding: 13px 16px;
  color: var(--text); box-shadow: var(--shadow); transition: border-color .12s, transform .12s, box-shadow .12s; }
.res a:hover { border-color: var(--accent); text-decoration: none; transform: translateY(-2px);
  box-shadow: 0 4px 14px rgba(15,23,42,.1); }
.rtop { display: flex; gap: 10px; align-items: baseline; justify-content: space-between; }
.res h3 { margin: 0; font-size: 16px; }
.res p { margin: 3px 0 8px; color: var(--muted); font-size: 14px; }
.rchips { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; font-size: 12.5px; }
.badges { display: flex; gap: 4px; flex-shrink: 0; }
.badge { font-size: 10.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; border-radius: 999px; padding: 1px 7px; }
.badge.lab { background: rgba(21,128,61,.14); color: var(--low); }
.badge.kev { background: rgba(255,77,94,.16); color: var(--crit); }
.intelnote { font-size: 12.5px; color: var(--muted); margin: 2px 0 10px; line-height: 1.5; }
.intelnote a { color: var(--accent); }
.badge.art { background: var(--accent-soft); color: var(--accent); }
.badge.pos { background: rgba(161,98,7,.14); color: var(--med); }
.empty { color: var(--muted); padding: 30px; text-align: center; }
.more { margin: 16px auto 0; display: block; }

/* chips (facet values) */
.chip { display: inline-block; font-size: 12px; background: var(--chipbg); border-radius: 6px; padding: 1px 7px; margin: 1px 3px 1px 0; }
.severity-critical, .v-critical { color: var(--crit); font-weight: 600; }
.severity-high { color: var(--high); font-weight: 600; }
.severity-medium { color: var(--med); }
.severity-low, .severity-very-low { color: var(--vlow); }
.detectability-none, .detectability-low { color: var(--crit); }
.detectability-medium { color: var(--med); }
.detectability-high { color: var(--low); }
.out-detected { color: var(--low); font-weight: 600; }
.out-partially-detected { color: var(--med); font-weight: 600; }
.out-not-detected, .out-missed { color: var(--crit); font-weight: 600; }
.st-enriched, .st-reviewed { color: var(--low); }

/* provenance: the left edge says where a value came from (text colour still says the value) */
.chip[class*="prov-"] { border-left: 3px solid transparent; }
.prov-reviewed { border-left-color: var(--low) !important; }
.prov-lab { border-left-color: var(--accent) !important; }
.prov-imported { border-left-color: var(--vlow) !important; }
.prov-derived { border-left-color: var(--med) !important; }
.prov-machine { border-left: 3px dashed var(--high) !important; }
.provsum { font-size: 13px; color: var(--muted); }
.badge.unr { background: rgba(194,65,12,.14); color: var(--high); }

/* coverage dashboard */
.prose.wide { max-width: 1100px; }
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 10px; margin: 18px 0; }
.tile { background: var(--panel); border: 1px solid var(--border); border-radius: 10px; padding: 10px 14px; }
.tile b { display: block; font-size: 26px; font-variant-numeric: tabular-nums; }
.tile span { color: var(--muted); font-size: 13px; }
.t-detected b { color: var(--low); } .t-partial b { color: var(--med); } .t-missed b { color: var(--crit); }
.out-partial { color: var(--med); font-weight: 600; }
.out-untested, .out-skipped { color: var(--muted); }
.verdict-lab-lower { color: var(--crit); font-weight: 600; }
.verdict-lab-higher { color: var(--accent); font-weight: 600; }
.verdict-agrees { color: var(--low); }
.verdict-no-prediction, .verdict-not-measured { color: var(--muted); }
ol.targets li { margin: 6px 0; overflow-wrap: anywhere; }

/* detail */
.crumb { font-size: 14px; color: var(--muted); margin: 0 0 14px; }
.detail .cols { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 32px; align-items: start; }
.detail aside { position: sticky; top: 76px; }
.example { background: var(--panel); border: 1px solid var(--border); border-left: 3px solid var(--accent); border-radius: 8px; padding: 10px 14px; }
table { border-collapse: collapse; width: 100%; font-size: 14px; }
th, td { text-align: left; padding: 6px 10px; border-bottom: 1px solid var(--border); vertical-align: top; }
.kv th { width: 200px; color: var(--muted); font-weight: 500; }
.tw { overflow-x: auto; background: var(--panel); border: 1px solid var(--border); border-radius: 10px; }
.tw thead th { background: var(--chipbg); font-weight: 600; }
ul.plain { padding-left: 18px; }
ul.plain li { margin: 3px 0; overflow-wrap: anywhere; }
ul.plain.big li { margin: 10px 0; font-size: 16px; }
.count { font-size: 12px; color: var(--muted); background: var(--chipbg); border-radius: 999px; padding: 1px 8px; font-weight: 500; }
blockquote { margin: 6px 0; padding: 4px 12px; border-left: 3px solid var(--border); color: var(--muted); }
dl.meta { background: var(--panel); border: 1px solid var(--border); border-radius: 12px; padding: 12px 16px; font-size: 14px; }
dl.meta dt { color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: .04em; margin-top: 8px; }
dl.meta dt:first-child { margin-top: 0; }
dl.meta dd { margin: 2px 0 0; overflow-wrap: anywhere; }
.poster-thumb img { width: 100%; border-radius: 10px; border: 1px solid var(--border); background: #fff; display: block; }

/* compare view */
.cmp-pick { position: relative; max-width: 560px; margin: 18px 0 8px; }
.cmp-pick input { width: 100%; font: inherit; font-size: 16px; padding: 11px 14px; border-radius: 10px;
  border: 1px solid var(--border); background: var(--panel); color: var(--text); box-shadow: var(--shadow); }
.cmp-pick input:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
.cmp-sug { list-style: none; margin: 4px 0 0; padding: 4px; position: absolute; left: 0; right: 0; z-index: 20;
  background: var(--panel); border: 1px solid var(--border); border-radius: 10px; box-shadow: var(--shadow); max-height: 320px; overflow: auto; }
.cmp-sug li { display: flex; align-items: baseline; gap: 10px; padding: 7px 10px; border-radius: 7px; cursor: pointer; }
.cmp-sug li:hover, .cmp-sug li.on { background: var(--accent-soft); }
.cmp-sug li span { flex: 1; }
.cmp-sug li em { font-style: normal; color: var(--muted); font-size: 12px; }
.cmp-sel { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin: 6px 0 4px; }
.cmp-pill { display: inline-flex; align-items: center; gap: 6px; }
.cmp-pill button, .cmp-x { background: none; border: 0; color: inherit; cursor: pointer; font: inherit; font-size: 15px; line-height: 1; padding: 0; }
.cmp-hint { color: var(--muted); background: var(--panel); border: 1px dashed var(--border); border-radius: 12px; padding: 24px; text-align: center; }
.cmp-tw { margin-top: 16px; }
table.cmp { font-size: 14px; }
table.cmp col.cmp-lead { width: 180px; }
table.cmp th, table.cmp td { vertical-align: top; }
table.cmp thead th { background: var(--chipbg); }
table.cmp thead th a { display: block; font-size: 15px; }
table.cmp thead th .muted { display: block; font-size: 12px; font-weight: 400; }
.cmp-x { float: right; color: var(--muted); }
.cmp-x:hover { color: var(--crit); }
tr.cmp-sec th { background: var(--bg); color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: .04em; font-weight: 600; }
table.cmp tbody th { color: var(--muted); font-weight: 500; }
tr.cmp-diff th { border-left: 3px solid var(--accent); }
tr.cmp-diff td { background: var(--accent-soft); }
.cmp-na { color: var(--muted); }
.cmp-sub { margin: 1px 0; }
.cmp-sub .muted { font-size: 11px; }
.cmp-count { font-weight: 700; font-variant-numeric: tabular-nums; }
.cmp-items { font-size: 12px; margin-top: 2px; display: flex; flex-wrap: wrap; gap: 3px 6px; }
tr.cmp-rel td { max-width: 340px; }

/* prose (articles/about) */
.prose { max-width: 860px; }
.prose li { margin: 4px 0; overflow-wrap: anywhere; }
.prose hr { border: 0; border-top: 1px solid var(--border); margin: 28px 0; }

/* cards */
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; margin-top: 18px; }
.card { background: var(--panel); border: 1px solid var(--border); border-radius: 12px; padding: 16px; color: var(--text); box-shadow: var(--shadow); }
.card:hover { border-color: var(--accent); text-decoration: none; }
.card h3 { margin: 0 0 6px; }
.card p { color: var(--muted); font-size: 14px; margin: 0 0 8px; }
.card.poster img { width: 100%; aspect-ratio: 1000 / 1414; object-fit: cover; object-position: top; border-radius: 8px; border: 1px solid var(--border); background: #fff; display: block; margin-bottom: 10px; }
/* blog post cards + kind badges */
.card.post:hover { transform: translateY(-2px); box-shadow: 0 4px 14px rgba(15,23,42,.1); transition: transform .12s, box-shadow .12s; }
.card.post h3 { margin: 8px 0 6px; font-size: 17px; }
.kbadge { display: inline-block; font-size: 10.5px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .05em; border-radius: 999px; padding: 2px 9px; }
.k-det { background: rgba(21,128,61,.14); color: var(--low); }
.k-gap { background: rgba(194,65,12,.14); color: var(--high); }
.k-dis { background: var(--accent-soft); color: var(--accent); }
.k-neg { background: rgba(185,28,28,.13); color: var(--crit); }
.k-pat { background: rgba(161,98,7,.14); color: var(--med); }
.postmeta { margin: 0 0 8px; }
/* patterns page — coverage ranking tables */
td.rank { color: var(--muted); font-variant-numeric: tabular-nums; width: 1%; }
td.covcell { white-space: nowrap; font-variant-numeric: tabular-nums; }
.covbar { display: inline-block; width: 90px; height: 7px; background: var(--chipbg); border-radius: 999px;
  overflow: hidden; vertical-align: middle; margin-right: 8px; }
.covbar > i { display: block; height: 100%; background: var(--accent); border-radius: 999px; }
td.exlist { font-size: 13px; }
td.exlist a { white-space: nowrap; }

@media (max-width: 860px) {
  .layout, .detail .cols { grid-template-columns: minmax(0, 1fr); }
  #toggleFilters { display: inline-block; }
  .filters { display: none; position: static; max-height: none; }
  .filters.open { display: block; }
  .detail aside { position: static; }
  .detail aside .poster-thumb { display: none; }
  .kv th { width: 40%; }
  h1 { font-size: 25px; }
  .hero h1 { font-size: 29px; }
  .hero .lede { font-size: 16px; }
  .searchrow { flex-wrap: wrap; }
  .searchrow input { flex-basis: 100%; }
  .searchrow select { flex: 1; padding: 9px 10px; }
  .cats { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; scrollbar-width: thin; }
  .cat { white-space: nowrap; }
  .stats { grid-template-columns: 1fr 1fr; gap: 10px; }
  .stats div { padding: 12px 14px; }
  .stats b { font-size: 26px; }
  header nav { margin-left: 0; }
}

/* ---- Detection opportunity block (defender-facing: command + telemetry + what fired) ---- */
.detop { border: 1px solid var(--border); border-left: 4px solid var(--accent);
  background: var(--panel); border-radius: 12px; padding: 14px 18px 6px; margin: 18px 0 24px;
  box-shadow: var(--shadow); }
.detop > h2 { margin-top: 4px; }
.detop-tag { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em;
  color: var(--accent); background: var(--accent-soft); border-radius: 999px; padding: 2px 9px;
  vertical-align: middle; margin-left: 6px; }
.detop-intro { color: var(--muted); max-width: 74ch; margin: 2px 0 10px; }
.detop-h { font-weight: 600; margin: 14px 0 6px; font-size: 14px; }
pre.cmd { background: var(--chipbg); border: 1px solid var(--border); border-radius: 8px;
  padding: 10px 12px; overflow-x: auto; margin: 4px 0; }
pre.cmd code { background: none; padding: 0; font-size: 12.5px; white-space: pre; color: var(--text); }
.cmd-meta { font-size: 12px; color: var(--muted); margin-top: 8px; }
.cmd-cleanup { margin: 2px 0 8px; }
.cmd-cleanup summary { font-size: 12px; color: var(--muted); cursor: pointer; }
.measured { border-top: 1px dashed var(--border); padding-top: 10px; margin-top: 10px; }
.measured:first-of-type { border-top: 0; }
.measured-head { font-size: 14px; margin-bottom: 4px; }
ul.fired { list-style: none; padding: 0; margin: 4px 0; }
ul.fired li { padding: 3px 0; font-size: 14px; }
.detop .badge { font-size: 11px; border-radius: 6px; padding: 0 6px; background: var(--chipbg); color: var(--muted); }
.detop .badge.lab { background: rgba(21,128,61,.14); color: var(--low); }
.detop .gap { color: var(--high); font-size: 14px; background: rgba(194,65,12,.08);
  border-radius: 8px; padding: 7px 10px; margin: 8px 0; }
.detop .noise, .detop .bundled { font-size: 13px; margin: 4px 0; }
.detop .eid { white-space: nowrap; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12px; }
.detop .queued { color: var(--muted); font-size: 14px; }

/* Blog hero banners — generated inline SVG, one per post (scripts/gen_site.py blog_hero_svg) */
.hero-fig { margin: 0 0 30px; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; line-height: 0; }
.hero-fig .blog-hero { display: block; width: 100%; height: auto; aspect-ratio: 1200 / 500; object-fit: cover; }
.prose .postmeta + .hero-fig { margin-top: 6px; }
.card.post { overflow: hidden; }
.card.post .hero-thumb { display: block; margin: -16px -16px 12px; border-bottom: 1px solid var(--line); line-height: 0; }
.card.post .hero-thumb .blog-hero { display: block; width: 100%; height: auto; aspect-ratio: 1200 / 500; object-fit: cover; }