:root{
  /* Enterprise palette — warm paper + near-black ink, one accent.
     Source: the "Rebranding for enterprise look" design project. IBM Plex Sans
     is self-hosted (one variable woff2, 400-700) alongside IBM Plex Mono, so
     the font-src 'self' CSP holds with no external font requests. */
  --paper:#F7F4EE;      /* page ground */
  --band:#F3EFE6;       /* neutral chip / segment fill */
  --panel:#FFFDF9;      /* card surface, a shade lighter than the page */
  --ink:#16150F;
  --ink-soft:#3D3A32;
  --ink-faint:#6B675E;
  --ink-mute:#756F64;   /* quiet text, still AA on paper */
  --line:#E3DED3;
  --line-soft:#ECE7DB;  /* row rules inside a card */
  --accent:#D9481F;     /* decorative brand orange */
  --danger:#A13315;     /* accessible action and critical-state orange */
  --danger-ink:#A13315;
  --danger-wash:#FBEEE8;
  --danger-line:#EEB9A4;
  --amber:#8C6B2E;
  --amber-wash:#F5EFE0;
  --amber-line:#DFD2B4;
  --clear-wash:#F3EFE6;
  --slate:#6B675E;
  --slate-wash:#F3EFE6;
  --sov:#23221C;        /* dark chrome: ticker, primary buttons, active segment */
  --sov-line:#3A382F;
  --sov-ink:#F7F4EE;
  --ok:#356F40;
  --gold:#8C6B2E;
  --radius:10px;
  --chip-radius:999px;
  --page-max:1220px;
  --display-size:clamp(50px,6.7vw,82px);
  --display-line:.96;
  --display-track:-.052em;
  --mono:'IBM Plex Mono',ui-monospace,monospace;
  --sans:'IBM Plex Sans',system-ui,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
html{font-family:var(--sans)}
body{
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  -webkit-font-smoothing:antialiased;
  display:flex;
  flex-direction:column;
  min-height:100vh;
}
a{color:inherit}
.sr-only{
  position:absolute!important;width:1px!important;height:1px!important;padding:0!important;
  margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;
  white-space:nowrap!important;border:0!important;
}
.skip-link{
  position:fixed;z-index:1000;inset-block-start:10px;inset-inline-start:10px;
  transform:translateY(-150%);padding:10px 14px;border:2px solid var(--ink);
  border-radius:var(--radius);background:var(--panel);color:var(--ink);
  font:700 13px var(--sans);text-decoration:none;
}
.skip-link:focus{transform:translateY(0)}
:focus-visible{outline:3px solid var(--danger-ink);outline-offset:3px}
::selection{background:var(--danger-wash);color:var(--ink)}
input,textarea{caret-color:var(--danger-ink)}

/* ---- header ---- */
header{
  display:flex;align-items:center;justify-content:space-between;
  padding:20px 40px 18px;gap:16px;flex-wrap:wrap;
  border-bottom:1px solid var(--line);
}
.wordmark{display:flex;align-items:center;gap:12px;cursor:pointer;text-decoration:none}
.wordmark .wm-emblem{height:46px;width:auto;flex:none;display:block}
.wm-text{display:flex;flex-direction:column;line-height:1.1}
.wm-name{
  font-family:var(--sans);font-weight:800;font-size:20px;letter-spacing:.04em;
  color:var(--ink);display:inline-flex;align-items:flex-start;
}
.wm-tag{
  font-family:var(--mono);font-size:11px;color:var(--ink-soft);margin-top:3px;
  letter-spacing:.02em;
}
.header-left{display:flex;align-items:center;gap:34px;flex-wrap:wrap}
.mobile-menu-toggle{display:none}
.header-right{display:flex;align-items:center;gap:22px;flex-wrap:wrap}
/* top navigation menu - grouped dropdowns (enterprise style, pure CSS/CSP-safe) */
.hmenu{display:flex;align-items:center;gap:6px}
.hm-item{position:relative}
.hm-top{
  display:inline-flex;align-items:center;gap:5px;cursor:pointer;
  border:0;background:transparent;padding:8px 12px;border-radius:var(--radius);
  font-family:var(--sans);font-size:14px;font-weight:600;color:var(--ink);
  text-decoration:none;
  transition:color .12s ease,background .12s ease;
}
.hm-caret{font-size:9px;color:var(--ink-faint);transition:transform .15s ease}
/* Hover changes the trigger only. Opening is click-driven so the visual state
   and aria-expanded always agree. */
@media (hover:hover){
  .hm-item:hover .hm-top{color:var(--danger);background:var(--band)}
}
.hm-item.open .hm-top{color:var(--danger);background:var(--band)}
.hm-item.open .hm-caret{transform:rotate(180deg);color:var(--danger)}
.hm-drop{
  position:absolute;top:calc(100% + 6px);inset-inline-start:0;min-width:210px;z-index:40;
  display:flex;flex-direction:column;padding:6px;
  background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:0 8px 28px rgba(20,24,28,.12);
  opacity:0;visibility:hidden;transform:translateY(-4px);
  transition:opacity .13s ease,transform .13s ease,visibility .13s;
}
.hm-item.open .hm-drop{opacity:1;visibility:visible;transform:translateY(0)}
.hm-drop a{
  font-family:var(--sans);font-size:13.5px;color:var(--ink-soft);text-decoration:none;
  padding:8px 12px;border-radius:var(--radius);white-space:nowrap;transition:all .1s ease;
}
.hm-drop a:hover{background:var(--band);color:var(--danger)}
/* instant hover tooltips */
[data-tip]{position:relative}
[data-tip]::after{
  content:attr(data-tip);position:absolute;top:calc(100% + 7px);left:50%;
  transform:translateX(-50%) translateY(-3px);
  background:var(--ink);color:#fff;font-family:var(--sans);font-size:11.5px;
  font-weight:600;letter-spacing:.02em;padding:5px 10px;border-radius:4px;
  white-space:nowrap;opacity:0;pointer-events:none;
  transition:opacity .12s ease,transform .12s ease;z-index:30;
}
[data-tip]::before{
  content:"";position:absolute;top:calc(100% + 2px);left:50%;
  transform:translateX(-50%) translateY(-3px);
  border:5px solid transparent;border-bottom-color:var(--ink);
  opacity:0;pointer-events:none;transition:opacity .12s ease,transform .12s ease;z-index:30;
}
[data-tip]:hover::after,[data-tip]:hover::before,[data-tip]:focus-visible::after,[data-tip]:focus-visible::before{
  opacity:1;transform:translateX(-50%) translateY(0);
}
.auth{display:flex;align-items:center;gap:10px}
.signin{
  font-family:var(--sans);font-size:13px;font-weight:600;color:var(--ink);
  text-decoration:none;padding:7px 10px;border-radius:var(--radius);
  transition:color .12s ease;
}
.signin:hover{color:var(--danger)}
.signup{
  font-family:var(--sans);font-size:13px;font-weight:700;letter-spacing:.03em;
  color:#fff;background:var(--danger);text-decoration:none;
  padding:8px 16px;border-radius:var(--radius);transition:background .12s ease;
}
.signup:hover{background:var(--danger-ink)}
.header-meta{
  font-family:var(--mono);font-size:11px;color:var(--ink-faint);letter-spacing:.03em;
}

/* ---- orange-bar signature ---- */
.obar::after{
  content:"";display:block;width:38px;height:4px;background:var(--accent);margin-top:11px;
}

main{flex:1;display:flex;flex-direction:column}

.hide{display:none!important}

/* Search and CVE routes reuse the homepage shell, but the marketing sections
   are not part of the lookup experience. Keep the shared site navigation and
   move directly into the compact search/report surface. */
body.result-route .top-alert,
body.result-route .home-section,
body.result-route .home-cta{display:none}

/* ---- landing ---- */
.landing{
  flex:1;display:flex;flex-direction:column;align-items:center;
  padding:0 24px 80px;
}
.hero{
  display:flex;flex-direction:column;align-items:center;
  justify-content:center;text-align:center;width:100%;
  padding:8vh 0 8px;
}
.landing h1{
  font-family:var(--sans);font-weight:700;font-size:clamp(32px,5vw,54px);
  letter-spacing:-.01em;line-height:1.12;
  max-width:19ch;margin-bottom:26px;color:var(--ink);
}
.landing h1 .hot{color:var(--danger)}
.landing h1::after{
  content:"";display:block;width:36px;height:3px;background:var(--accent);
  margin:26px auto 0;
}

.searchwrap{width:100%;max-width:640px}
.searchbox{
  display:flex;align-items:stretch;background:#FFFFFF;
  border:1px solid var(--line);border-radius:var(--radius);
  overflow:hidden;transition:box-shadow .15s ease;
}
.searchbox:focus-within{border-color:var(--ink);box-shadow:0 0 0 3px rgba(35,34,28,.08)}
.searchbox input{
  flex:1;border:0;outline:0;background:transparent;
  font-family:var(--mono);font-size:13px;color:var(--ink);
  padding:9px 14px;
}
.searchbox input::placeholder{color:var(--ink-faint)}
.searchbox button{
  border:0;background:var(--sov);color:var(--sov-ink);cursor:pointer;
  font-family:var(--sans);font-size:11.5px;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;padding:0 22px;margin:3px;
  border-radius:8px;
  transition:background .15s ease;
}
.searchbox button:hover{background:#312F27}

.sub{
  margin-top:16px;color:var(--ink-soft);font-size:14px;line-height:1.5;
  max-width:44ch;margin-left:auto;margin-right:auto;
}
.chips{
  margin-top:26px;display:flex;gap:8px;flex-wrap:wrap;justify-content:center;
}
.chips .lbl{
  font-family:var(--mono);font-size:11px;color:var(--ink-faint);
  letter-spacing:.05em;text-transform:uppercase;align-self:center;
  margin-right:4px;
}
.chip{
  font-family:var(--mono);font-size:13px;background:var(--panel);
  border:1px solid var(--line);border-radius:3px;padding:6px 14px;
  cursor:pointer;transition:all .12s ease;color:var(--ink);
}
.chip:hover{border-color:var(--danger);color:var(--danger);transform:translateY(-1px)}

/* ---- trending ---- */
.trending{width:100%;max-width:760px;margin:24px auto 0}
.trend-head{margin-bottom:14px}
.trend-head .th-t{
  font-family:var(--sans);font-size:17px;font-weight:700;letter-spacing:0;
  color:var(--ink);display:flex;align-items:center;gap:10px;
}
.trend-head .th-t::after{content:"";display:block;width:28px;height:3px;background:var(--accent);margin-top:0}
.trend-head .th-t .live{
  width:7px;height:7px;border-radius:50%;background:var(--danger);
  box-shadow:0 0 0 3px var(--danger-wash);
}
.trend-head .th-s{
  font-size:13px;color:var(--ink-soft);margin-top:5px;
  display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px;
}
.trend-head .th-s .upd{font-family:var(--mono);font-size:11px;color:var(--ink-faint)}

.trend-list{
  border:1px solid var(--line);border-radius:var(--radius);
  overflow:hidden;background:var(--panel);
}
.trow{
  display:grid;
  grid-template-columns:34px 1fr auto;
  align-items:center;gap:16px;padding:13px 20px;
  border-bottom:1px solid var(--line-soft);cursor:pointer;
  transition:background .1s ease;
}
.trow:last-child{border-bottom:0}
.trow:hover{background:var(--band)}
.trow .rank{
  font-family:var(--mono);font-size:11px;color:var(--ink-mute);text-align:end;
}
.tmain{min-width:0}
.tname{
  font-size:14.5px;font-weight:500;color:var(--ink);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  display:flex;align-items:center;gap:9px;
}
.tname .emergent{
  font-family:var(--mono);font-size:9.5px;font-weight:600;text-transform:uppercase;
  letter-spacing:.05em;color:var(--danger-ink);border:1px solid var(--danger-line);
  background:var(--danger-wash);border-radius:var(--chip-radius);padding:1px 7px;flex:none;
}
.tsub{
  font-family:var(--mono);font-size:11.5px;color:var(--ink-faint);margin-top:3px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.tsub .cveid{color:var(--danger);font-weight:600}
.tname .vbadge{
  font-family:var(--mono);font-size:10.5px;font-weight:600;color:var(--slate);
  background:var(--slate-wash);border:1px solid #CBD2DE;border-radius:var(--chip-radius);
  padding:1px 8px;flex:none;
}
.mchip{
  font-family:var(--mono);font-size:10.5px;font-weight:600;letter-spacing:.04em;
  text-transform:uppercase;color:#fff;padding:3px 9px;border-radius:4px;
}
.mchip.exploited{background:var(--danger)}
.mchip.weaponized{background:var(--amber)}
.mchip.poc{background:var(--slate)}
/* Two trending lists side by side. When #obs-trending hides itself (non-
   Enterprise), the remaining #trending flexes to full width. */
.trend-cols{
  width:100%;max-width:1180px;margin:24px auto 0;
  display:flex;gap:28px;align-items:flex-start;flex-wrap:wrap;
}
.trend-cols > .trending{margin:0;flex:1 1 420px;min-width:0;max-width:none}
/* Reserve two subtitle lines so a one-line and a two-line header stay the same
   height and both lists start at the same Y (keeps the two columns aligned). */
.trend-cols .th-s{min-height:34px}
@media (max-width:820px){ .trend-cols{gap:20px} }

/* Observed-scanning "Attacked in <country>" (Enterprise): human, actionable rows
   - product/version headline, small CVE id, highlighted observed-IP count. */
.orow{
  display:grid;grid-template-columns:34px 1fr auto;
  align-items:center;gap:14px;padding:13px 20px;
  border-bottom:1px solid var(--line-soft);cursor:pointer;transition:background .1s ease;
}
.orow:last-child{border-bottom:0}
.orow:hover{background:var(--band)}
.oname{
  font-size:14.5px;font-weight:600;color:var(--ink);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  display:flex;align-items:center;gap:9px;
}
.osub{
  font-family:var(--mono);font-size:11px;color:var(--ink-faint);margin-top:3px;
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;
}
.osub .ocve{color:var(--ink-mute);font-size:10.5px}
/* The key number: how many unique source IPs were seen scanning this. */
.obs-trend{
  font-family:var(--mono);font-size:9.5px;font-weight:600;text-transform:uppercase;
  letter-spacing:.05em;border-radius:var(--chip-radius);padding:1px 7px;
}
.obs-trend.up{color:var(--danger-ink);border:1px solid var(--danger-line);background:var(--danger-wash)}
.obs-trend.down{color:var(--ink-mute);border:1px solid var(--line);background:var(--band)}
.tempty{padding:16px 20px;font-size:13px;color:var(--ink-faint)}
/* Anonymous slim pitch bar, above the trending lists (not a full column). */
.obs-teaser-bar{
  width:100%;max-width:1180px;margin:24px auto 0;
  display:flex;align-items:center;gap:20px;flex-wrap:wrap;
  padding:12px 18px;border:1px solid var(--line);border-radius:var(--radius);
  background:var(--band);
}
.obs-teaser-bar .otb-text{flex:1 1 320px;font-size:13px;color:var(--ink-soft);line-height:1.45}
.obs-teaser-bar .otb-text strong{color:var(--ink)}
.obs-teaser-bar .otb-cta{display:flex;gap:10px;flex:none}
.obs-teaser-bar + .trend-cols{margin-top:14px}
.ot-btn{
  font-size:12.5px;font-weight:600;text-decoration:none;padding:7px 14px;border-radius:6px;white-space:nowrap;
  border:1px solid var(--line);color:var(--ink-soft);background:var(--panel);transition:background .1s ease;
}
.ot-btn:hover{background:var(--band)}
.ot-btn.primary{background:var(--danger);border-color:var(--danger);color:#fff}
.ot-btn.primary:hover{filter:brightness(1.05)}
.tepss{text-align:end;font-family:var(--mono)}
.tepss .v{font-size:14px;color:var(--ink-soft)}
.tepss .v.hi{color:var(--ink);font-weight:600}
.tepss .k{font-size:9.5px;color:var(--ink-faint);text-transform:uppercase;letter-spacing:.05em}

/* ---- result ---- */
.result{
  width:100%;max-width:1180px;margin:0 auto;padding:8px 32px 80px;
}
/* Two-column detail: main content left, a sticky facts/tuner rail right.
   Collapses to a single column below 900px. */
.detail-grid{display:grid;grid-template-columns:1fr;gap:22px;align-items:start}
.detail-main{min-width:0}
.detail-side{min-width:0}
@media(min-width:900px){
  .detail-grid{grid-template-columns:minmax(0,1fr) 330px;gap:24px}
  .detail-side{position:sticky;top:18px}
}
.facts-rail{grid-template-columns:1fr;margin-bottom:0}
.facts-rail .fact:nth-child(odd){border-inline-end:0}
.rbar{
  display:flex;align-items:stretch;gap:12px;margin-bottom:22px;
}
.rbar-home{
  flex:none;border:1px solid var(--line);background:var(--panel);cursor:pointer;
  font-family:var(--sans);font-weight:700;font-size:13px;color:var(--ink);
  letter-spacing:.02em;padding:0 16px;border-radius:var(--radius);
  display:inline-flex;align-items:center;gap:6px;transition:all .12s ease;
}
.rbar-home:hover{border-color:var(--danger);color:var(--danger)}
.rbar-box{flex:1}
.rbar-input{
  flex:1;min-width:0;border:0;outline:0;background:transparent;
  font-family:var(--mono);font-size:15px;color:var(--ink);padding:12px 16px;
}
.rbar-box button{
  border:0;background:var(--sov);color:var(--sov-ink);cursor:pointer;
  font-family:var(--sans);font-size:12px;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;padding:0 20px;transition:background .15s ease;
}
.rbar-box button:hover{background:var(--danger-ink)}

.result-head{
  display:flex;align-items:baseline;gap:14px;margin-bottom:18px;
  flex-wrap:wrap;
}
.back{
  font-family:var(--mono);font-size:13px;color:var(--ink-soft);
  cursor:pointer;border:0;background:none;padding:0;
  display:inline-flex;align-items:center;gap:6px;
}
.back:hover{color:var(--ink)}
.query-id{font-family:var(--mono);font-size:20px;font-weight:600;letter-spacing:-.01em}
.query-kind{
  font-family:var(--mono);font-size:11px;text-transform:uppercase;
  letter-spacing:.06em;color:var(--ink-faint);border:1px solid var(--line);
  padding:2px 8px;border-radius:4px;
}
.scope{
  font-family:var(--mono);font-size:12px;color:var(--ink-soft);
}
.scope b{color:var(--ink)}

/* verdict block */
.verdict{
  border-radius:var(--radius);padding:26px 26px 24px;margin-bottom:22px;
  border:1px solid var(--line);
  animation:rise .28s cubic-bezier(.2,.7,.2,1) both;
}
@keyframes rise{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
/* The state card is a PANEL with a state rule down its edge, not a filled
   block: the design keeps large fills off the reading surface and spends the
   accent on the left border, the beacon and the headline. */
.verdict{background:var(--panel);border-left:3px solid var(--line)}
.verdict.danger{border-left-color:var(--danger)}
.verdict.clear{border-left-color:var(--ink-mute)}
.verdict.amber{border-left-color:var(--amber)}

.verdict .status{
  font-family:var(--sans);font-weight:800;text-transform:uppercase;
  font-size:clamp(22px,3.2vw,33px);line-height:1.08;letter-spacing:-.01em;
  display:flex;align-items:center;gap:13px;flex-wrap:wrap;
}
.verdict.danger .status{color:var(--danger)}
.verdict.clear .status{color:var(--ink)}
.verdict.amber .status{color:var(--amber)}
.beacon{
  width:14px;height:14px;border-radius:50%;flex:none;
}
.verdict.danger .beacon{background:var(--danger);
  box-shadow:0 0 0 0 rgba(212,46,31,.5);animation:pulse 1.8s infinite}
.verdict.clear .beacon{background:var(--ink-faint)}
.verdict.amber .beacon{background:var(--amber)}
@keyframes pulse{
  0%{box-shadow:0 0 0 0 rgba(212,46,31,.45)}
  70%{box-shadow:0 0 0 10px rgba(212,46,31,0)}
  100%{box-shadow:0 0 0 0 rgba(212,46,31,0)}
}
.verdict .desc{
  margin-top:12px;font-size:15px;color:var(--ink);line-height:1.5;
}
.verdict .desc .prod{font-family:var(--mono);font-weight:500}
/* state elaboration line under the status (maturity · exploits · KEV · …) */
.verdict .state-line{
  margin-top:9px;font-family:var(--mono);font-size:13px;font-weight:500;
}
.verdict.danger .state-line,
.verdict.amber .state-line,
.verdict.clear .state-line{color:var(--ink-faint)}
/* trending pill next to the status */
.trend-pill{
  font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:.03em;
  text-transform:uppercase;color:#fff;background:var(--danger);
  border-radius:var(--chip-radius);padding:3px 10px;align-self:center;
}
.verdict.amber .trend-pill{background:var(--amber)}
.verdict .count-note{
  font-family:var(--mono);font-size:13px;color:var(--ink-soft);margin-top:6px;
}

/* Quota banner — one quiet line, only past 80% of a budget.
   Muted amber by default so it reads as information rather than an error; it
   only turns red past 95%, where the limit really is about to bite. */
.quota-banner{
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  padding:9px 16px;background:#F5EAD0;border-bottom:1px solid #E0CFA6;
  font-family:var(--sans);font-size:13px;color:#5C4A22;
}
.quota-banner.qb-critical{background:#F7DED4;border-bottom-color:#E7BCAC;color:#7A3218}
.quota-banner .qb-msg{flex:1 1 auto;min-width:0}
.quota-banner .qb-link{
  color:inherit;font-weight:600;text-decoration:underline;
  text-underline-offset:2px;white-space:nowrap;
}
.quota-banner .qb-close{
  border:0;background:none;cursor:pointer;line-height:1;padding:2px 4px;
  font-size:17px;color:inherit;opacity:.55;
}
.quota-banner .qb-close:hover{opacity:1}
@media (max-width:520px){
  .quota-banner{font-size:12.5px;gap:10px;padding:8px 12px}
}

/* Sign-up wall — shown in place of CVE detail for signed-out visitors, since
   the intel endpoints require an account. Buttons mirror auth.css .btn-primary,
   restated here because index.html loads only home.css. */
.verdict .cta-row{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px}
.verdict .cta-row a{
  display:inline-block;border-radius:var(--radius);text-decoration:none;
  font-family:var(--sans);font-size:13px;font-weight:700;letter-spacing:.05em;
  text-transform:uppercase;padding:11px 20px;transition:background .15s ease;
}
.verdict .cta-row .btn-primary{background:var(--danger);color:#fff;border:0}
.verdict .cta-row .btn-primary:hover{background:var(--danger-ink)}
.verdict .cta-row .btn-ghost{
  background:transparent;color:var(--ink);border:1px solid var(--line);
}
.verdict .cta-row .btn-ghost:hover{background:var(--band)}

/* facts row (cve) */
.facts{
  display:grid;grid-template-columns:repeat(2,1fr);gap:0;
  border:1px solid var(--line);border-radius:var(--radius);
  overflow:hidden;background:var(--panel);margin-bottom:22px;
}
.fact{padding:14px 18px;border-bottom:1px solid var(--line)}
.fact:nth-child(odd){border-inline-end:1px solid var(--line)}
.fact .k{
  font-family:var(--mono);font-size:11px;text-transform:uppercase;
  letter-spacing:.05em;color:var(--ink-faint);margin-bottom:5px;
}
.fact .v{font-family:var(--mono);font-size:15px;font-weight:500}
.fact .v.hot{color:var(--danger)}
.fact .v.pill{
  display:inline-block;background:var(--ink);color:#fff;font-size:12px;
  padding:2px 9px;border-radius:4px;letter-spacing:.03em;
}
.fact .v.pill.act{background:var(--danger)}

.advice{
  font-size:15px;line-height:1.55;color:var(--ink);
  padding:15px 18px;background:var(--panel);border:1px solid var(--line);
  border-inline-start:3px solid var(--danger);border-radius:var(--radius);
}
.advice.calm{border-inline-start-color:var(--ink-faint)}
.advice b{font-weight:600}

/* component: exploited list */
.section-label{
  font-family:var(--sans);font-size:13px;font-weight:700;text-transform:uppercase;
  letter-spacing:.03em;color:var(--ink);margin:0 2px 14px;
}
.section-label::after{content:"";display:block;width:30px;height:3px;background:var(--accent);margin-top:8px}
.vuln{
  display:flex;align-items:center;gap:14px;background:var(--panel);
  border:1px solid var(--line);border-inline-start:3px solid var(--danger);
  border-radius:var(--radius);padding:14px 16px;margin-bottom:8px;
  cursor:pointer;transition:transform .1s ease,box-shadow .12s ease;
}
.vuln:hover{transform:translateX(2px);box-shadow:-2px 2px 0 rgba(212,46,31,.12)}
/* Decision colour on the leading edge, keyed off the data-dec attribute the row
   already carries. It used to be an inline style="border-inline-start-color:…"
   written by renderFindings, which `style-src 'self'` blocks outright — so every
   search result rendered with the default red edge regardless of its decision,
   silently, since the CSP violation only shows in the console. */
.vuln[data-dec="immediate"]{border-inline-start-color:#7a3c14}
.vuln[data-dec="ooc"]{border-inline-start-color:#5e4010}
.vuln[data-dec="scheduled"]{border-inline-start-color:#4a3e18}
.vuln[data-dec="defer"]{border-inline-start-color:#4a4a4a}
/* Quiet rows (non-exploited, and the malicious-package list) carry a softer
   description than a finding does. Same story: an inline style, blocked, so
   they were rendering at finding weight. */
.vuln.quiet .meta .nm{color:var(--ink-soft);font-weight:400}
/* The id is an <a> to /cve/<id>. It keeps the ink colour so the row does not
   turn into a wall of blue, and earns an underline on hover — the row already
   moves under the cursor, this says which part of it is the record. */
.vuln .cve{font-family:var(--mono);font-size:15px;font-weight:600;min-width:150px;
  color:inherit;text-decoration:none}
.vuln:hover .cve{text-decoration:underline;text-underline-offset:3px}
.vuln .cve:hover{color:var(--danger)}
/* Shown only when the whole search resolved to one record. */
.sole-hit{
  display:inline-block;margin:14px 0 0;font-family:var(--mono);font-size:12px;
  color:var(--danger);border:1px solid var(--danger-line);background:var(--danger-wash);
  border-radius:var(--chip-radius);padding:7px 12px;text-decoration:none;
}
.sole-hit:hover{border-color:var(--danger)}
.vuln .meta{font-size:13px;color:var(--ink-soft);flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vuln .meta .nm{color:var(--ink);font-weight:500}
.vuln .when{font-family:var(--mono);font-size:12px;color:var(--danger)}
.vuln .dec{
  font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:.04em;
  background:var(--danger);color:#fff;padding:3px 9px;border-radius:4px;
}
.dchip{
  font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:.04em;
  color:#fff;padding:3px 9px;border-radius:4px;flex:none;transition:background .18s ease;
}
.dchip.act{background:var(--danger)}
.dchip.attend{background:var(--amber)}
.dchip.trackstar{background:var(--slate)}
.dchip.track{background:var(--ink-faint)}
.autotag{
  font-family:var(--mono);font-size:10px;text-transform:uppercase;letter-spacing:.04em;
  color:var(--ink-soft);border:1px solid var(--line);border-radius:var(--chip-radius);
  padding:1px 7px;margin-left:8px;vertical-align:middle;
}
/* Attribution badge on a result row — same pill as .autotag; the actor variant
   picks up the danger accent because "who is behind it" is the sharper signal. */
.attrtag{
  font-family:var(--mono);font-size:10px;text-transform:uppercase;letter-spacing:.04em;
  color:var(--ink-soft);border:1px solid var(--line);border-radius:var(--chip-radius);
  padding:1px 7px;margin-left:8px;vertical-align:middle;
}
.attrtag.actor{color:var(--danger);border-color:var(--danger)}
/* Malicious-package badge. Filled rather than outlined: it is the one row state
   that means "do not install this", and an outline pill reads as metadata next
   to a description. */
.attrtag.mal{color:var(--paper);background:var(--danger);border-color:var(--danger);font-weight:700}
/* The package coordinate that follows it — npm · left-pad 1.2.3. Lower-case and
   monospace because it is something you paste into a lockfile search. */
.pkgtag{
  font-family:var(--mono);font-size:10px;letter-spacing:.02em;
  color:var(--danger);border:1px solid var(--danger-line);background:var(--danger-wash);
  border-radius:var(--chip-radius);padding:1px 7px;margin-left:6px;vertical-align:middle;
  /* Wider than .attrtag: the package name is the one string on the row anyone
     copies, and a scoped npm name (@scope/pkg) spends half its width before it
     says anything. The full value stays in the title. */
  max-width:34ch;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:inline-block;
}
.dsummary{
  font-family:var(--mono);font-size:13px;color:var(--ink-soft);
  margin-top:12px;padding-top:12px;border-top:1px solid var(--danger-line);
}
.dsummary b{font-weight:600}
.dsummary b.act{color:var(--danger)}
.dsummary b.attend{color:var(--amber)}
.dsummary b.trackstar{color:var(--slate)}
.dsummary b.track{color:var(--ink-soft)}
.asset-tuner{margin-top:0}

.hidden-line{
  margin-top:14px;display:flex;align-items:center;gap:14px;
  font-family:var(--mono);font-size:13px;color:var(--ink-soft);
}
.hidden-line .rule{flex:1;height:1px;background:var(--line)}
.hidden-line button{
  border:1px solid var(--line);background:var(--panel);color:var(--ink-soft);
  font-family:var(--mono);font-size:12px;padding:4px 12px;border-radius:var(--chip-radius);
  cursor:pointer;transition:all .12s ease;
}
.hidden-line button:hover{border-color:var(--ink);color:var(--ink)}

.rest{margin-top:12px;display:none}
.rest.open{display:block}
.rest .vuln{border-inline-start-color:var(--line);cursor:default}
.rest .vuln:hover{transform:none;box-shadow:none}
.rest .vuln .when{color:var(--ink-faint)}
.rest .dot{width:8px;height:8px;border-radius:50%;background:var(--ink-faint);flex:none}
.rest .vuln .status-txt{font-family:var(--mono);font-size:12px;color:var(--ink-faint)}

/* ---- STIX intel ---- */
.intel{
  background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);
  padding:20px;margin-bottom:22px;
}
.intel-head{
  display:flex;align-items:baseline;justify-content:space-between;
  margin-bottom:18px;gap:12px;flex-wrap:wrap;
}
.intel-head .ih-t{font-family:var(--sans);font-size:15px;font-weight:700;letter-spacing:.01em;color:var(--ink)}
.intel-head .ih-src{
  font-family:var(--mono);font-size:11px;color:var(--ink-faint);
  letter-spacing:.03em;cursor:pointer;
}
.intel-head .ih-src:hover{color:var(--ink-soft)}

.ladder{display:flex;align-items:center;margin-bottom:18px;flex-wrap:wrap;gap:4px 0}
.rung{display:flex;align-items:center;gap:8px;opacity:.4}
.rung.reached{opacity:1}
.rung .rdot{
  width:11px;height:11px;border-radius:50%;background:var(--line);flex:none;
  border:2px solid var(--line);
}
.rung.reached .rdot{background:var(--ink-faint);border-color:var(--ink-faint)}
.rung .rlbl{font-family:var(--mono);font-size:12.5px;color:var(--ink-soft);white-space:nowrap}
.rung.reached .rlbl{color:var(--ink)}
.rung.cur .rlbl{font-weight:600}
.rung.cur.hot .rdot{background:var(--danger);border-color:var(--danger);box-shadow:0 0 0 4px var(--danger-wash)}
.rung.cur.hot .rlbl{color:var(--danger)}
.rung.cur.warm .rdot{background:var(--amber);border-color:var(--amber);box-shadow:0 0 0 4px var(--amber-wash)}
.rung.cur.warm .rlbl{color:var(--amber)}
.rung-sep{flex:1;min-width:20px;height:2px;background:var(--line);margin:0 10px}

.facet{
  display:flex;gap:16px;padding:12px 0;border-top:1px solid var(--line);
  align-items:baseline;
}
.facet .flabel{
  font-family:var(--mono);font-size:11px;text-transform:uppercase;letter-spacing:.05em;
  color:var(--ink-faint);width:150px;flex:none;display:flex;align-items:center;gap:8px;
}
.facet .fnone{font-family:var(--mono);font-size:13px;color:var(--ink-faint);font-style:italic}
.chips-row{display:flex;flex-wrap:wrap;gap:7px}
.ichip{
  font-family:var(--mono);font-size:12.5px;padding:4px 11px;border-radius:var(--chip-radius);
  border:1px solid var(--line);color:var(--ink);background:var(--paper);
}
.ichip.actor{border-color:var(--danger-line);background:var(--danger-wash);color:var(--danger-ink)}
.ichip.tool{border-color:var(--amber-line);background:var(--amber-wash);color:var(--amber)}
.ichip.country{background:var(--panel)}
.ichip.tech{background:var(--slate-wash);border-color:#CBD2DE;color:var(--slate)}
.tech-toggle{
  border:1px solid var(--line);background:var(--panel);color:var(--ink-soft);
  font-family:var(--mono);font-size:10px;text-transform:uppercase;letter-spacing:.04em;
  padding:2px 9px;border-radius:var(--chip-radius);cursor:pointer;
}
.tech-toggle:hover{border-color:var(--ink);color:var(--ink)}
.tech-row{display:none}
.tech-row.open{display:flex}

/* ---- ssvc tuner ---- */
.tuner{
  background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);
  padding:20px 20px 22px;margin-bottom:22px;
}
.tuner-head{margin-bottom:16px}
.tuner-head .t{
  font-family:var(--sans);font-size:14px;font-weight:700;text-transform:uppercase;letter-spacing:.03em;color:var(--ink);
}
.tuner-head .t::after{content:"";display:block;width:30px;height:3px;background:var(--accent);margin-top:8px}
.tuner-head .s{font-size:13px;color:var(--ink-soft);margin-top:10px;line-height:1.45}
.ctrl{margin-bottom:14px}
.ctrl:last-of-type{margin-bottom:0}
.ctrl .clabel{
  font-family:var(--mono);font-size:11px;text-transform:uppercase;
  letter-spacing:.05em;color:var(--ink-faint);margin-bottom:7px;
  display:flex;align-items:center;gap:8px;
}
.framework-help{
  margin-top:7px;color:var(--ink-faint);font-size:12px;line-height:1.5;
}
/* Segmented control as individual pills - wraps cleanly in the narrow rail
   (a joined inline-flex left broken half-borders when it wrapped). */
.seg{display:flex;flex-wrap:wrap;gap:6px}
.seg button{
  flex:1 1 auto;border:1px solid var(--line);border-radius:var(--chip-radius);
  background:var(--panel);cursor:pointer;
  font-family:var(--mono);font-size:11px;color:var(--ink-faint);
  padding:6px 10px;text-align:center;
  transition:background .12s ease,color .12s ease,border-color .12s ease;white-space:nowrap;
}
.seg button:hover{background:var(--band);color:var(--ink);border-color:var(--ink-faint)}
.seg button.on{background:var(--sov);color:var(--sov-ink);border-color:var(--sov)}
.feed-pills{display:flex;gap:8px;flex-wrap:wrap}
.locked-pill{
  display:inline-flex;align-items:center;gap:8px;font-family:var(--mono);
  font-size:13px;background:var(--danger-wash);color:var(--danger-ink);
  border:1px solid var(--danger-line);padding:7px 13px;border-radius:var(--radius);
}
.locked-pill .lbeacon{width:8px;height:8px;border-radius:50%;background:var(--danger)}
/* muted variant - feed exploitation/automatability pills (not "active") */
.locked-pill.muted{background:var(--clear-wash);color:var(--ink-soft);border-color:var(--line)}
.locked-pill.muted .lbeacon{background:var(--ink-faint)}

.out-row{
  display:flex;align-items:center;gap:22px;margin-top:20px;padding-top:18px;
  border-top:1px solid var(--line);flex-wrap:wrap;
}
.decision{display:flex;flex-direction:column;gap:4px}
.decision .dlabel{
  font-family:var(--mono);font-size:11px;text-transform:uppercase;
  letter-spacing:.05em;color:var(--ink-faint);
}
.decision .dval{
  font-family:var(--mono);font-weight:700;font-size:30px;letter-spacing:-.02em;
  line-height:1;transition:color .18s ease;
}
.dval.act{color:var(--danger)}
.dval.attend{color:var(--amber)}
.dval.trackstar{color:var(--slate)}
.dval.track{color:var(--ink-soft)}

footer{
  border-top:1px solid var(--line);margin-top:56px;background:var(--band);
}
.foot-base{
  padding:18px 28px;font-family:var(--mono);font-size:11.5px;
  color:var(--ink-faint);letter-spacing:.03em;
  display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px;
  max-width:960px;margin:0 auto;
}
.foot-official{color:var(--sov);font-weight:600}
.foot-links{display:flex;gap:18px;flex-wrap:wrap}
.foot-links a{color:var(--ink-soft);text-decoration:none;transition:color .12s ease}
.foot-links a:hover{color:var(--danger)}

@media(max-width:560px){
  header{padding:14px 16px 12px}
  .landing{padding:0 16px 60px}
  .hero{padding:5vh 0 8px}
  .result{padding:8px 14px 60px}
  /* trending */
  .trow{grid-template-columns:20px 1fr auto;gap:10px;padding:12px 14px}
  .tepss{display:none}
  /* stats 2x2 */
  .stats{flex-wrap:wrap}
  .stat{flex:1 1 50%;border-inline-end:0}
  .stat:nth-child(odd){border-inline-end:1px solid var(--line)}
  .stat:nth-child(-n+2){border-bottom:1px solid var(--line)}
  /* facts single column */
  .facts{grid-template-columns:1fr}
  .fact:nth-child(odd){border-inline-end:0}
  /* findings rows wrap gracefully */
  .vuln{flex-wrap:wrap;gap:6px 12px}
  .vuln .cve{min-width:0}
  .vuln .meta{flex:1 1 100%;order:3;white-space:normal}
  /* intel facets stack */
  .facet{flex-direction:column;gap:8px}
  .facet .flabel{width:auto}
  /* result bar: home button icon-only feel */
  .rbar{gap:8px}
  .rbar-home{padding:0 12px}
  /* comfortable tap targets */
  .seg button{padding:11px 15px}
  .signin{padding:9px 10px}
  .signup{padding:10px 16px}
  .tech-toggle{padding:5px 11px}
  .chip{padding:9px 14px}
  .hidden-line button{padding:7px 14px}
}
@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
}

/* ---- signed-in account submenu (session.js) ---- */
.acct-menu{position:relative}
.acct-chip{
  display:inline-flex;align-items:center;gap:8px;cursor:pointer;
  border:1px solid var(--line);background:var(--panel);border-radius:var(--chip-radius);
  font-family:var(--sans);font-size:13px;font-weight:600;color:var(--ink);
  padding:7px 14px;transition:all .12s ease;max-width:280px;
}
.acct-chip:hover{border-color:var(--danger)}
.acct-dot{width:8px;height:8px;border-radius:50%;background:var(--danger);
  box-shadow:0 0 0 3px var(--danger-wash);flex:none}
.acct-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:150px}
.acct-tier{
  font-family:var(--mono);font-size:10px;font-weight:600;text-transform:uppercase;
  letter-spacing:.05em;color:var(--danger);border:1px solid var(--danger-line);
  background:var(--danger-wash);border-radius:var(--chip-radius);padding:1px 8px;flex:none;
}
/* Trial pill inside the account chip - deliberately quiet: muted mono text, no
   accent colour, and hidden entirely when there's no active trial. */
.acct-trial{
  font-family:var(--mono);font-size:10px;font-weight:600;color:var(--ink-faint);
  background:var(--clear-wash);border-radius:999px;
  padding:2px 9px;flex:none;letter-spacing:.02em;white-space:nowrap;
}
.acct-trial:empty{display:none}
.acct-caret{font-size:10px;color:var(--ink-faint)}
.acct-drop{
  display:none;position:absolute;top:calc(100% + 8px);right:0;min-width:200px;
  background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:0 8px 24px rgba(54,62,69,.12);padding:6px;z-index:40;
}
.acct-drop.open{display:block}
.acct-drop a,.acct-drop button{
  display:block;width:100%;text-align:start;border:0;background:none;cursor:pointer;
  font-family:var(--sans);font-size:13.5px;font-weight:600;color:var(--ink);
  text-decoration:none;padding:10px 12px;border-radius:4px;transition:all .1s ease;
}
.acct-drop a:hover,.acct-drop button:hover{background:var(--danger-wash);color:var(--danger-ink)}

/* ---- component search: facet strip, pager ---- */
.facet-strip{display:flex;flex-wrap:wrap;gap:7px;margin-top:14px}
.fchip{
  font-family:var(--mono);font-size:12px;font-weight:600;cursor:pointer;
  border:1px solid var(--line);background:var(--paper);color:var(--ink-soft);
  border-radius:var(--chip-radius);padding:4px 12px;transition:all .12s ease;
}
.fchip.hot{border-color:var(--danger-line);color:var(--danger-ink)}
.fchip.warm{border-color:var(--amber-line);color:var(--amber)}
.fchip:not(.passive):hover{transform:translateY(-1px);border-color:var(--ink)}
.fchip.on{background:var(--ink);border-color:var(--ink);color:#fff}
.fchip.passive{cursor:default}
.pager{
  display:flex;align-items:center;justify-content:center;gap:16px;
  margin:18px 0 6px;font-family:var(--mono);font-size:12.5px;color:var(--ink-soft);
}
.pager button{
  border:1px solid var(--line);background:var(--panel);color:var(--ink);
  font-family:var(--mono);font-size:12.5px;padding:6px 14px;border-radius:var(--chip-radius);
  cursor:pointer;transition:all .12s ease;
}
.pager button:hover:not(:disabled){border-color:var(--danger);color:var(--danger)}
.pager button:disabled{opacity:.4;cursor:default}

/* ---- hover info panel ---- */
.hovercard{
  display:none;position:fixed;z-index:60;pointer-events:none;
  background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:0 10px 30px rgba(54,62,69,.18);padding:16px;
}
.hovercard.show{display:block}
.hovercard .hc-head{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.hovercard .hc-id{font-family:var(--mono);font-size:14px;font-weight:700;color:var(--danger)}
.hovercard .hc-prod{font-family:var(--sans);font-size:13.5px;font-weight:700;color:var(--ink)}
.hovercard .hc-desc{
  margin-top:9px;font-size:12.5px;line-height:1.5;color:var(--ink-soft);
  max-height:78px;overflow:hidden;
}
.hovercard .hc-grid{
  display:grid;grid-template-columns:auto 1fr;gap:4px 14px;margin-top:11px;
  padding-top:10px;border-top:1px solid var(--line);
}
.hovercard .hk{
  font-family:var(--mono);font-size:10.5px;text-transform:uppercase;
  letter-spacing:.05em;color:var(--ink-faint);
}
.hovercard .hv{font-family:var(--mono);font-size:12px;color:var(--ink)}
.hovercard .hv.hot{color:var(--danger);font-weight:600}
.hovercard .hc-hint{
  margin-top:10px;font-family:var(--mono);font-size:10.5px;color:var(--ink-faint);
  text-transform:uppercase;letter-spacing:.05em;
}

/* ---- search syntax guide ---- */
.syntax{position:relative;margin-top:22px;text-align:start}
.syntax summary{
  font-family:var(--mono);font-size:11.5px;text-transform:uppercase;
  letter-spacing:.05em;color:var(--ink-faint);cursor:pointer;text-align:center;
  list-style:none;min-height:32px;display:inline-flex;align-items:center;justify-content:center;
  padding-inline:8px;
}
.syntax summary::before{content:"› "}
.syntax[open] summary::before{content:"⌄ "}
.syntax summary:hover{color:var(--danger)}
.syntax-panel{
  position:absolute;z-index:80;inset-block-start:calc(100% + 10px);inset-inline-end:0;
  width:min(860px,calc(100vw - 64px));max-height:min(70vh,680px);overflow:auto;
  background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:0 18px 48px rgba(22,21,15,.18);overscroll-behavior:contain;
  scrollbar-width:none;scroll-behavior:smooth;
}
.syntax-panel::-webkit-scrollbar{display:none}
.syntax-panel-head{
  position:sticky;z-index:2;top:0;display:flex;align-items:center;justify-content:space-between;
  min-height:48px;padding:8px 16px;border-bottom:1px solid var(--line);background:var(--panel);
}
.syntax-panel-head strong{font:700 12px/1.4 var(--mono);letter-spacing:.04em;text-transform:uppercase}
.syntax-close{
  position:relative;width:34px;height:34px;padding:0;border:1px solid transparent;
  border-radius:var(--chip-radius);background:transparent;color:var(--ink);cursor:pointer;
}
.syntax-close i,.syntax-close i::before{
  content:"";position:absolute;inset-block-start:50%;inset-inline-start:50%;width:14px;height:1px;
  background:currentColor;transform:translate(-50%,-50%) rotate(45deg);
}
.syntax-close i::before{transform:translate(-50%,-50%) rotate(90deg)}
.syntax-close:hover{border-color:var(--line);background:var(--band);color:var(--danger)}
.syn-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  gap:16px;margin-top:0;border:0;border-radius:0;background:var(--panel);padding:16px;
}
.syn-col{display:flex;flex-direction:column;gap:6px;align-items:flex-start}
.syn-h{
  font-family:var(--sans);font-size:11px;font-weight:700;text-transform:uppercase;
  letter-spacing:.04em;color:var(--ink);margin-bottom:2px;
}
.syn-h::after{content:"";display:block;width:18px;height:2px;background:var(--accent);margin-top:4px}
.syn-ex{
  font-family:var(--mono);font-size:12px;color:var(--ink-soft);background:none;
  border:0;cursor:pointer;padding:2px 0;text-align:start;transition:color .1s ease;
}
.syn-ex:hover{color:var(--danger)}
/* Pro-gated qualifier groups carry a small tier tag; the worked-example column
   spans wider because each entry is a sentence plus the query it runs. */
.syn-tier{
  font-family:var(--sans);font-size:9px;font-weight:700;letter-spacing:.06em;
  color:var(--danger);border:1px solid var(--danger);border-radius:3px;
  padding:0 4px;margin-inline-start:6px;vertical-align:middle;
}
.syn-sub{font-family:var(--mono);font-size:10px;color:var(--ink-faint);margin:-2px 0 2px}
.syn-col-wide{grid-column:span 2}
.syn-col-wide .syn-ex{
  font-family:var(--sans);font-size:11.5px;line-height:1.5;color:var(--ink-soft);
}
.syn-col-wide .syn-ex code{
  font-family:var(--mono);font-size:11px;color:var(--ink-faint);
}
.syn-col-wide .syn-ex:hover code{color:var(--danger)}
@media (max-width:720px){.syn-col-wide{grid-column:span 1}}
.syn-note{
  margin:0;padding:12px 16px 16px;font-family:var(--mono);font-size:10.5px;color:var(--ink-faint);
  text-align:center;letter-spacing:.03em;
}
@media(max-width:720px){
  .syntax-panel{
    position:fixed;z-index:120;inset:16px;width:auto;max-height:none;
    padding-bottom:env(safe-area-inset-bottom);
  }
  .syntax-panel-head{min-height:56px}
  .syntax-close{width:44px;height:44px}
  .syn-grid{grid-template-columns:1fr;padding:16px}
  .syn-ex{min-height:36px;padding-block:7px}
}
@media(prefers-reduced-motion:no-preference){
  .syntax[open] .syntax-panel{animation:syntax-float-in .18s cubic-bezier(.2,.8,.2,1) both}
  @keyframes syntax-float-in{
    from{opacity:0;transform:translateY(-6px)}
    to{opacity:1;transform:none}
  }
}

/* ---- SSVC decision palette - mirror of vdb-dashboard SSVC_COLOR ---- */
.dchip.immediate{background:#7a3c14}
.dchip.ooc{background:#5e4010}
.dchip.scheduled{background:#4a3e18}
.dchip.defer{background:#4a4a4a}
.dval.immediate{color:#7a3c14}
.dval.ooc{color:#5e4010}
.dval.scheduled{color:#4a3e18}
.dval.defer{color:#4a4a4a}
.dsummary b.immediate{color:#7a3c14}
.dsummary b.ooc{color:#5e4010}
.dsummary b.scheduled{color:#4a3e18}
.dsummary b.defer{color:#4a4a4a}

/* ---- transparent pagination reload ---- */
#comp-body{transition:opacity .18s ease}
#comp-body.soft-loading{opacity:.45;pointer-events:none}

/* ---- tuner help: wide tooltips + "?" hint ---- */
.tip-wide[data-tip]::after{
  white-space:normal;width:260px;text-align:start;line-height:1.45;
}
.qmark{
  display:inline-flex;align-items:center;justify-content:center;
  width:15px;height:15px;border-radius:50%;flex:none;cursor:help;
  border:1px solid var(--line);background:var(--panel);color:var(--ink-faint);
  font-family:var(--sans);font-size:10px;font-weight:700;
  vertical-align:middle;margin-inline-start:4px;
}
.qmark:hover{border-color:var(--danger);color:var(--danger)}

/* ---- clickable SSVC decision summary + clear + filter note ---- */
.dsum-lbl{color:var(--ink-faint)}
.dfilter{
  font-family:var(--mono);font-size:12px;font-weight:600;cursor:pointer;
  border:1px solid var(--line);background:var(--paper);
  border-radius:var(--chip-radius);padding:3px 11px;margin-inline-end:4px;
  transition:all .12s ease;
}
.dfilter.immediate{color:#7a3c14;border-color:#d8c3b2}
.dfilter.ooc{color:#5e4010;border-color:#d8ceb2}
.dfilter.scheduled{color:#4a3e18;border-color:#d2ccb8}
.dfilter.defer{color:#4a4a4a;border-color:var(--line)}
.dfilter:hover{transform:translateY(-1px)}
.dfilter.immediate.on{background:#7a3c14;color:#fff;border-color:#7a3c14}
.dfilter.ooc.on{background:#5e4010;color:#fff;border-color:#5e4010}
.dfilter.scheduled.on{background:#4a3e18;color:#fff;border-color:#4a3e18}
.dfilter.defer.on{background:#4a4a4a;color:#fff;border-color:#4a4a4a}
.fchip.clear{border-style:dashed;color:var(--ink-faint)}
.fchip.clear:hover{border-color:var(--danger);color:var(--danger)}
.decfilter-note{
  font-family:var(--mono);font-size:12px;color:var(--ink-soft);margin:2px 2px 12px;
}
.decfilter-note b{color:var(--ink)}
.linkbtn{
  border:0;background:none;cursor:pointer;color:var(--danger);font-weight:600;
  font-family:var(--mono);font-size:12px;padding:0;text-decoration:underline;
}

/* ---- tier plan line ---- */
.plan-line{
  margin-top:12px;max-width:640px;width:100%;text-align:center;
  font-family:var(--mono);font-size:11.5px;color:var(--ink-faint);letter-spacing:.02em;
}
.plan-line b{color:var(--danger);text-transform:uppercase}
.plan-line a{color:var(--ink-soft);text-decoration:underline}
.plan-line a:hover{color:var(--danger)}

/* ---- CVE detail sections (software / references / repositories) ---- */
.detail-section{
  background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);
  padding:20px;margin-bottom:22px;
}
.ds-head{
  font-family:var(--sans);font-size:15px;font-weight:700;letter-spacing:.01em;
  color:var(--ink);display:flex;align-items:center;
  justify-content:space-between;gap:12px;margin-bottom:14px;
}
.ds-head::after{content:none}
.ds-count{
  font-family:var(--mono);font-size:11px;font-weight:400;color:var(--ink-mute);
  text-transform:none;letter-spacing:0;
}
.sw-list{display:flex;flex-wrap:wrap;gap:8px}
.sw-row{
  display:inline-flex;align-items:center;gap:8px;border:1px solid var(--line);
  background:var(--paper);border-radius:var(--chip-radius);padding:5px 12px;
}
.sw-name{font-family:var(--mono);font-size:12.5px;color:var(--ink)}
.ds-more{
  margin-top:14px;border:1px solid var(--line);background:var(--panel);
  color:var(--ink);font-family:var(--mono);font-size:12.5px;cursor:pointer;
  padding:8px 16px;border-radius:var(--chip-radius);transition:all .12s ease;
}
.ds-more:hover{border-color:var(--danger);color:var(--danger)}
.ds-more-loading{font-family:var(--mono);font-size:12px;color:var(--ink-faint)}

.ref-list{display:flex;flex-direction:column;gap:2px}
.ref-row{
  display:flex;align-items:center;gap:12px;padding:11px 12px;border-radius:var(--radius);
  text-decoration:none;color:var(--ink);border:1px solid transparent;transition:all .1s ease;
}
.ref-row:hover{background:var(--band);border-color:var(--line)}
.ref-badge{
  font-family:var(--mono);font-size:10px;font-weight:600;text-transform:uppercase;
  letter-spacing:.04em;color:var(--slate);background:var(--slate-wash);
  border:1px solid #CBD2DE;border-radius:var(--chip-radius);padding:2px 9px;flex:none;
}
.ref-badge.weapon{color:var(--danger);background:none;border-color:transparent}
/* An empty badge still occupies its grid cell — that is the point, it keeps the
   repository name in the 1fr column — but it must not draw a pill. */
.ref-badge:empty{background:none;border-color:transparent;padding:0}
/* Repository trust grades. `danger` is the only one that shouts: 439 of 25,553
   repositories are graded Dangerous/Scam, and the reader is about to click one. */
.ref-badge.danger{color:#FFFFFF;background:var(--danger);border-color:var(--danger)}
.ref-badge.warn{color:var(--amber);background:var(--amber-wash);border-color:#DDCFAE}
.ref-badge.trusted{color:var(--slate);background:none;border-color:#CBD2DE}
.ref-desc{
  flex:1;min-width:0;font-size:13px;color:var(--ink);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.ref-host{font-family:var(--mono);font-size:11px;color:var(--ink-faint);flex:none}
.repo-stars{font-family:var(--mono);font-size:11.5px;color:var(--amber);flex:none}
.detail-section.upsell{border-style:dashed;background:var(--band)}
.upsell-body{font-size:13.5px;color:var(--ink-soft);line-height:1.5}
.upsell-body a{color:var(--danger);font-weight:600;text-decoration:none}
.upsell-body a:hover{text-decoration:underline}

/* Tier-locked tuner: reuse the shared .upsell style (see .detail-section.upsell
   / .upsell-body above) so the SSVC lock matches Affected software / References
   / Repositories exactly. */
.tuner-locked .upsell-body{margin-top:2px}

/* Malicious-packages registry list (/malicious). Reuses the landing trending
   layout (.trend-head / .trend-list / .trow); rows are links here. */
a.trow{text-decoration:none;color:inherit}
.eco-badge{font-family:var(--sans);font-size:10.5px;font-weight:700;letter-spacing:.04em;
  text-transform:uppercase;color:var(--slate);background:var(--slate-wash);
  border-radius:3px;padding:2px 6px;flex:none}
.tname .tmore{font-family:var(--mono);font-size:11px;color:var(--ink-faint);flex:none}
.fix-badge{font-family:var(--sans);font-size:10.5px;font-weight:600;letter-spacing:.02em;
  color:#2F7A3D;background:#E8F3EA;border:1px solid #BFE0C6;border-radius:var(--radius);padding:1px 8px;flex:none}

/* Detail page: malicious packages replace the exploitation ladder with a plain
   "Malicious" state (the code is the threat, not a patchable vuln). */
.mal-ladder{display:flex;align-items:center;gap:9px;font-size:14px;color:var(--ink);padding:4px 0 2px}
.mal-ladder .rdot{width:9px;height:9px;border-radius:50%;background:var(--danger);flex:none}
.mal-ladder b{color:var(--danger)}

/* ---- collapsible detail sections + clickable software rows ---- */
.ds-head{cursor:pointer;user-select:none}
.ds-toggle{font-size:12px;color:var(--ink-faint);transition:transform .15s ease;flex:none}
.detail-section.collapsed .ds-toggle{transform:rotate(-90deg)}
.detail-section.collapsed .ds-body{display:none}
.ds-hint{font-size:12px;color:var(--ink-faint);margin-bottom:12px;font-style:italic}

/* ds-info — a 13px "i" in the section header that opens a legend panel.
   The explanation started as a four-line italic paragraph above the list, which
   is a wall placed in front of the thing the reader came for. Small, out of the
   way, and it defines every badge using the same chip the rows use — matching
   by eye beats reading a description of a colour. */
.ds-info{
  display:inline-flex;align-items:center;justify-content:center;
  width:13px;height:13px;margin-inline-start:7px;vertical-align:1px;
  border:1px solid var(--line);border-radius:50%;
  font-family:var(--mono);font-size:9px;font-weight:700;font-style:italic;
  color:var(--ink-faint);background:var(--paper);cursor:help;position:relative;
  text-transform:none;letter-spacing:0;
}
.ds-info:hover{color:var(--ink);border-color:var(--ink)}

/* The panel. padding-top on the pop bridges the gap to the icon, so the pointer
   can travel into it without crossing dead space and dismissing it. */
.ds-pop{
  position:absolute;top:100%;inset-inline-start:-10px;z-index:40;
  width:330px;padding-top:8px;
  opacity:0;visibility:hidden;transition:opacity .12s ease;
  cursor:default;text-align:start;text-transform:none;letter-spacing:0;
}
.ds-info:hover>.ds-pop,.ds-info:focus>.ds-pop,.ds-info:focus-within>.ds-pop{
  opacity:1;visibility:visible;
}
.ds-pop::before{
  content:"";display:block;
  background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:0 6px 20px rgba(0,0,0,.14);
  position:absolute;inset:8px 0 0 0;
}
.lg-title,.lg-row,.lg-foot{position:relative}
.lg-title{
  font-family:var(--mono);font-size:10px;font-weight:600;letter-spacing:.07em;
  text-transform:uppercase;color:var(--ink-mute);
  padding:11px 13px 0;
}
.lg-row{display:flex;gap:9px;align-items:flex-start;padding:8px 13px 0}
.lg-row .ref-badge{flex:none;margin-top:1px}
.lg-txt{
  font-family:var(--sans);font-size:11.5px;font-weight:400;font-style:normal;
  line-height:1.45;color:var(--ink);
}
.lg-foot{
  font-family:var(--sans);font-size:11px;font-weight:400;line-height:1.45;
  color:var(--ink-faint);padding:10px 13px 12px;margin-top:9px;
  border-top:1px solid var(--line-soft);
}
.ds-pop>:last-child{padding-bottom:12px}

/* Narrow screens: the panel is wider than the gutter, so pin it to the card. */
@media (max-width:520px){
  .ds-pop{width:min(330px,86vw);inset-inline-start:auto;inset-inline-end:-10px}
}

.sw-row{
  cursor:pointer;font:inherit;color:inherit;text-align:start;
}
.sw-row:hover{border-color:var(--danger);transform:translateY(-1px)}
.sw-row .sw-go{font-family:var(--mono);font-size:11px;color:var(--ink-faint);flex:none}
.sw-row:hover .sw-go{color:var(--danger)}

/* ---- CVE aliases ("also known as") - grouped, collapsible ---- */
.alias-block{
  border:1px solid var(--line);border-radius:var(--radius);background:var(--panel);
  padding:14px 18px;margin-bottom:22px;
}
.alias-head{display:flex;align-items:center;gap:12px;margin-bottom:12px}
.alias-label{
  font-family:var(--mono);font-size:11px;text-transform:uppercase;letter-spacing:.05em;
  color:var(--ink-faint);
}
.alias-count{font-family:var(--mono);font-size:11px;color:var(--ink-faint)}
.alias-all{
  margin-left:auto;font-family:var(--mono);font-size:11px;color:var(--ink-soft);
  cursor:pointer;border:1px solid var(--line);background:var(--paper);border-radius:var(--radius);
  padding:3px 10px;transition:all .12s ease;
}
.alias-all:hover{border-color:var(--ink);color:var(--ink)}
/* Groups are compact pills that wrap side by side. Opening one promotes it to a
   full-width row (flex-basis:100%) so its chips get their own line - 40 closed
   groups stay a few tidy rows instead of 40 stacked bars. */
.alias-groups{display:flex;flex-wrap:wrap;gap:6px;align-items:flex-start}
.alias-group{
  border:1px solid var(--line);border-radius:var(--chip-radius);background:var(--paper);
  transition:border-radius .1s ease;
}
.alias-group.open{flex:1 1 100%;border-radius:var(--radius)}
.alias-grp-head{
  display:flex;align-items:center;gap:7px;cursor:pointer;text-align:left;
  border:0;background:transparent;padding:5px 12px;
  font-family:var(--sans);font-size:12px;color:var(--ink);transition:color .12s ease;
}
.alias-grp-head:hover{color:var(--danger)}
.alias-caret{
  font-size:9px;color:var(--ink-faint);display:inline-block;transition:transform .15s ease;
}
.alias-group.open .alias-caret{transform:rotate(90deg)}
.alias-grp-name{font-weight:600}
.alias-grp-n{
  font-family:var(--mono);font-size:10px;color:var(--ink-faint);
  background:var(--panel);border-radius:var(--chip-radius);padding:0 6px;
}
.alias-grp-items{
  display:none;flex-wrap:wrap;gap:7px;padding:0 12px 11px 28px;
}
.alias-group.open .alias-grp-items{display:flex}
.alias-chip{
  font-family:var(--mono);font-size:12px;color:var(--ink-soft);cursor:pointer;
  border:1px solid var(--line);background:var(--panel);border-radius:var(--chip-radius);
  padding:3px 11px;transition:all .12s ease;
}
.alias-chip:hover{border-color:var(--danger);color:var(--danger);transform:translateY(-1px)}

/* ---- CISA BOD 26-04 advisory remediation guidance ---- */
.bod-guidance{
  margin-top:16px;padding-top:14px;border-top:1px dashed var(--line);
}
.bod-guidance:empty{display:none}
.bod-head{display:flex;align-items:baseline;gap:10px;margin-bottom:6px}
.bod-t{
  font-family:var(--mono);font-size:11px;text-transform:uppercase;
  letter-spacing:.05em;color:var(--ink-faint);
}
.bod-src{
  font-family:var(--mono);font-size:10px;color:var(--ink-faint);
  border:1px solid var(--line);border-radius:var(--chip-radius);padding:0 7px;
  text-decoration:none;transition:all .12s ease;
}
a.bod-src:hover{color:var(--danger);border-color:var(--danger)}
.bod-window{
  font-size:15px;font-weight:600;color:var(--ink);line-height:1.4;margin-bottom:4px;
}
.bod-window.overdue{color:var(--danger)}
.bod-over{
  font-family:var(--mono);font-size:10px;font-weight:700;letter-spacing:.06em;
  color:#fff;background:var(--danger);border-radius:4px;padding:2px 7px;
  margin-left:8px;vertical-align:middle;
}
.bod-row{
  font-family:var(--mono);font-size:12px;color:var(--ink-soft);
  line-height:1.6;
}
.bod-row b{font-weight:700;color:var(--ink)}
.bod-window.overdue + .bod-row b{color:var(--danger)}
.bod-triage{color:var(--amber)}
.bod-crit{
  display:flex;flex-wrap:wrap;gap:6px;margin-top:9px;
}
.bod-chip{
  font-family:var(--mono);font-size:10.5px;color:var(--ink-faint);
  border:1px solid var(--line);border-radius:var(--chip-radius);padding:2px 9px;
}
.bodtag{
  font-family:var(--mono);font-size:10px;font-weight:600;letter-spacing:.03em;
  color:var(--ink-soft);border:1px solid var(--line);border-radius:4px;
  padding:2px 6px;flex:none;
}
.bodtag.over{color:#fff;background:var(--danger);border-color:var(--danger)}

/* ---- static doc pages (how / api / about / contact / tos) ---- */
.doc-main{flex:1;width:min(calc(100% - 40px),var(--page-max));max-width:none;margin:0 auto;padding:56px 0 72px}
.doc-main h1{
  max-width:16ch;margin:0;font-family:var(--sans);font-weight:700;
  font-size:var(--display-size);line-height:var(--display-line);
  text-transform:none;letter-spacing:var(--display-track);color:var(--ink);text-wrap:balance;
}
.doc-main h1::after{display:none}
.doc-main .doc-sub{margin-top:22px;color:var(--ink-soft);font-size:16px;line-height:1.65;max-width:62ch}
.doc-main h2{
  font-family:var(--sans);font-weight:800;font-size:19px;text-transform:uppercase;
  letter-spacing:.02em;color:var(--ink);margin:44px 0 4px;scroll-margin-top:24px;
}
.doc-main h2::after{content:"";display:block;width:30px;height:3px;background:var(--accent);margin-top:7px}
.doc-main h3{font-family:var(--sans);font-weight:700;font-size:15px;color:var(--ink);margin:26px 0 2px}
.doc-main p{margin-top:12px;color:var(--ink-soft);font-size:14.5px;line-height:1.65;max-width:72ch}
.doc-main p b{color:var(--ink)}
.doc-main ul{margin:12px 0 0 20px;color:var(--ink-soft);font-size:14.5px;line-height:1.65}
.doc-main li{margin-top:6px}
.doc-main a{color:var(--danger);text-decoration:none}
.doc-main a:hover{text-decoration:underline}
.doc-main code{
  font-family:var(--mono);font-size:13px;background:var(--band);
  border:1px solid var(--line);border-radius:4px;padding:1px 6px;
}
.doc-main pre{
  margin-top:14px;background:var(--sov);color:var(--sov-ink);border-radius:var(--radius);
  padding:16px 18px;overflow-x:auto;font-family:var(--mono);font-size:12.5px;line-height:1.6;
}
.doc-main pre code{background:transparent;border:0;padding:0;color:inherit;font-size:inherit}
.doc-table{width:100%;border-collapse:collapse;margin-top:14px;font-size:13.5px}
.doc-table th{
  text-align:left;font-family:var(--mono);font-size:11px;text-transform:uppercase;
  letter-spacing:.05em;color:var(--ink-faint);border-bottom:1px solid var(--line);
  padding:8px 12px 8px 0;
}
.doc-table td{border-bottom:1px solid var(--line);padding:9px 12px 9px 0;color:var(--ink-soft);vertical-align:top}
.doc-table td:first-child{font-family:var(--mono);font-size:12.5px;color:var(--ink);white-space:nowrap}
.doc-table .y{color:var(--ink);font-weight:600}
/* prose-cols: comparison tables where the first column is a sentence - undo
   the mono/nowrap first-column treatment meant for endpoint-name columns. */
.doc-table.prose-cols td:first-child{
  font-family:inherit;font-size:inherit;color:var(--ink-soft);white-space:normal;
}
.doc-table.prose-cols td{padding-inline-end:24px;vertical-align:top}
.table-scroll{
  width:100%;max-width:100%;overflow-x:auto;overscroll-behavior-inline:contain;
  scrollbar-gutter:stable;-webkit-overflow-scrolling:touch;
}
.table-scroll:focus-visible{border-radius:var(--radius)}
.table-scroll .doc-table{min-width:680px}
.doc-note{
  margin-top:16px;border:1px solid var(--line);border-inline-start:3px solid var(--danger);
  border-radius:var(--radius);background:var(--band);padding:13px 16px;
  color:var(--ink-soft);font-size:13.5px;line-height:1.55;
}
.doc-main .doc-foot{margin-top:8px;font-size:12.5px;color:var(--ink-faint);line-height:1.5}

/* Jump-out link to the STIX explorer with the current query prefilled. */
.stix-jump{
  font-family:var(--mono);font-size:inherit;color:var(--danger);
  text-decoration:none;white-space:nowrap;
}
.stix-jump:hover{text-decoration:underline;text-underline-offset:2px}

/* Download the current result set as a STIX 2.1 bundle. Same look as the graph
   link; when the tier cannot export (applyStixGate leaves it .locked) it dims
   and turns into the request-access upsell rather than a dead download. */
.stix-dl{
  font-family:var(--mono);font-size:inherit;color:var(--danger);
  text-decoration:none;white-space:nowrap;cursor:pointer;
}
.stix-dl:hover{text-decoration:underline;text-underline-offset:2px}
.stix-dl.locked{color:var(--ink-soft);opacity:.75}
.stix-dl.locked:hover{text-decoration:none}

/* homepage-only announcement banner above the header */
.top-alert{
  display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;
  background:var(--sov);color:var(--sov-ink);
  font-family:var(--mono);font-size:12.5px;line-height:1.45;
  padding:8px max(40px,calc((100% - 1180px)/2));
}
.top-alert b{color:#FF8A5E;font-weight:600}
.top-alert .al-dot{
  width:7px;height:7px;border-radius:50%;background:var(--danger);flex:none;
  box-shadow:0 0 0 3px rgba(233,85,43,.25);
}
.top-alert .al-text{margin-inline-end:auto}
.top-alert .al-meta{color:#D5D0C5;white-space:nowrap}
@media (max-width:640px){
  .top-alert{padding:8px 16px}
}

/* blog index */
.post-list{margin-top:34px;display:flex;flex-direction:column;gap:14px}
.post-card{
  display:block;border:1px solid var(--line);border-radius:var(--radius);
  background:var(--panel);padding:20px 22px;text-decoration:none;
  transition:transform .1s ease,box-shadow .12s ease;
}
.post-card:hover{transform:translateX(2px);box-shadow:-2px 2px 0 rgba(212,46,31,.12)}
.post-card .pc-date{font-family:var(--mono);font-size:11.5px;color:var(--ink-faint)}
.post-card h3{font-family:var(--sans);font-weight:800;font-size:18px;color:var(--ink);margin:6px 0 6px}
.post-card p{color:var(--ink-soft);font-size:14px;line-height:1.55;margin:0}
.post-card .pc-read{display:inline-block;margin-top:10px;font-family:var(--mono);font-size:12px;color:var(--danger)}
.doc-main .post-meta{font-family:var(--mono);font-size:12px;color:var(--ink-faint);margin-top:10px}

/* Result-row meta: keep the trailing tags visible.
   .meta was a single-line ellipsis box, so anything after the description —
   the automatable tag, and now the attribution badges — was clipped out of
   sight (measured up to 1.7k px past the right edge). Make it a flex row where
   only the DESCRIPTION truncates and the tags hold their width. */
.vuln .meta{display:flex;align-items:center;min-width:0;overflow:visible}
.vuln .meta .nm{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vuln .meta .autotag,.vuln .meta .attrtag,.vuln .meta .pkgtag{flex:0 0 auto}
/* Keep a readable slice of the description no matter how long the actor name
   is: the badge truncates before the text does. */
.vuln .meta .nm{min-width:16ch}
.vuln .meta .attrtag{max-width:118px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media(max-width:560px){
  /* The row stacks here and .meta wraps to its own line, so let the description
     wrap too and allow the badges onto a second line rather than squeezing. */
  .vuln .meta{flex-wrap:wrap;row-gap:4px}
  .vuln .meta .nm{flex:1 1 100%;white-space:normal;overflow:visible}
  .vuln .meta .attrtag{margin-left:0;margin-right:8px}
  .vuln .meta .pkgtag{margin-left:0;margin-right:8px;max-width:100%}
}

/* Pro-gated syntax examples for a tier that cannot run them: visibly present
   (they advertise what Pro unlocks) but not clickable, since the API would
   answer 403. */
.syn-ex.locked{opacity:.42;cursor:not-allowed}
.syn-ex.locked:hover{color:var(--ink-soft)}
.syn-col-wide .syn-ex.locked:hover code{color:var(--ink-faint)}

/* Story chips are filters, not labels: they run the query in data-run.
   They are <button>s, so only the interaction bits are set here — the font,
   padding, border and the .actor/.tool washes all come from .ichip above.
   (Resetting `font` or `background` here silently overrode those and blew the
   chips up to body-text size.) */
.ichip.pivot{cursor:pointer;-webkit-appearance:none;appearance:none;text-align:inherit}
.ichip.pivot:hover{border-color:var(--danger);color:var(--danger)}

/* ── Enterprise theme trim ───────────────────────────────────────────────────
   Card surfaces sit a shade lighter than the page ground, separated by a warm
   hairline rather than shadow — the flat, printed feel of the design. */
header,footer,.detail-section,.intel,.verdict,.side-card,
.syn-grid,.vuln,.sw-row,.trow{background:var(--panel)}
.detail-section,.intel,.side-card,.syn-grid{border-color:var(--line)}
.ds-head,.facet{border-color:var(--line-soft)}

/* Counts and secondary metadata drop to the quietest ink in the palette. */
.ds-count,.syn-note,.foot-links a,.ih-src{color:var(--ink-mute)}

/* Chip washes carry their own hairline so a squared chip reads as a token
   rather than a filled block. */
.ichip.actor{border-color:var(--danger-line)}
.ichip.tool{border-color:var(--amber-line)}

/* Segmented controls: the selected option is the dark chrome, matching the
   exposure / impact switches in the design. */
.seg button[aria-pressed="true"],.seg button.on{
  background:var(--sov);border-color:var(--sov);color:var(--sov-ink);
}

/* Field labels stay mono/uppercase/letterspaced — in the design that treatment
   marks a DATA LABEL, while card headings are sentence-case sans. Keeping the
   two distinct is what stops every heading shouting at the same volume. */
.facet .flabel,.kv .k,.side-card .sc-label{
  font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-faint);font-weight:400;
}

/* Section marker used on the platform page: a dark mono pill followed by a rule
   that runs to the edge (design: "THE CHALLENGE", "THE SOLUTION", …). */
.sec-marker{display:flex;align-items:center;gap:16px;margin-bottom:24px}
.sec-marker .sm-label{
  font-family:var(--mono);font-size:10px;letter-spacing:.12em;
  color:var(--sov-ink);background:var(--sov);border-radius:var(--chip-radius);
  padding:4px 11px;flex:none;
}
.sec-marker::after{content:"";flex:1;height:1px;background:var(--line)}

/* Dark call-to-action band (design: "Is it being exploited right now?"). */
.cta-band{
  background:var(--sov);border-radius:var(--radius);padding:24px 28px;
  display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;
  font-family:var(--mono);font-size:14px;color:var(--sov-ink);
}
.cta-band .cta-hot{color:#F0885F}
.cta-band .cta-primary{
  background:var(--danger);color:#fff;border-radius:var(--chip-radius);
  font-family:var(--mono);font-size:11.5px;letter-spacing:.06em;padding:10px 18px;
}
.cta-band .cta-ghost{
  border:1px solid #6D685C;color:var(--sov-ink);border-radius:var(--chip-radius);
  font-family:var(--mono);font-size:11.5px;letter-spacing:.06em;padding:10px 18px;
}

/* ══ Enterprise design — component parity ═══════════════════════════════════
   Ported from Harpia CVE Enterprise.dc.html / Harpia Home.dc.html. The design
   keeps the page quiet and tabular: a small mono state line instead of a slab
   headline, plain dotted lists instead of chip walls, and real rows for
   software / references / repositories. */

/* — Exploitation status: mono 15px accent heading with an 8px dot, meta line,
     then the description. Not a 33px uppercase slab. — */
.verdict{padding:22px 24px}
.verdict .status{
  font-family:var(--mono);font-size:15px;font-weight:600;letter-spacing:.06em;
  text-transform:uppercase;line-height:1.3;gap:12px;
}
.verdict .beacon{width:8px;height:8px;box-shadow:none}
.verdict .trend-pill{
  font-family:var(--mono);font-size:9.5px;letter-spacing:.08em;font-weight:400;
  color:var(--danger);background:transparent;border:1px solid var(--danger-line);
  border-radius:var(--chip-radius);padding:2px 7px;text-transform:uppercase;
}
.verdict .state-line{
  font-family:var(--mono);font-size:11.5px;color:var(--ink-faint);
  margin:8px 0 14px;line-height:1.6;
}
.verdict .desc{font-size:14px;line-height:1.65;color:var(--ink-soft);text-wrap:pretty}

/* — Also known as: one dotted line of "VENDOR ×N", not a grid of pills. — */
.alias-block{padding:18px 24px}
.alias-head{gap:10px}
.alias-label{
  font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;
  font-weight:600;color:var(--ink-faint);
}
.alias-count{font-family:var(--mono);font-size:11px;color:var(--ink-mute)}
.alias-all{
  font-family:var(--mono);font-size:11px;color:var(--ink-faint);background:none;
  border:0;text-decoration:underline;text-underline-offset:3px;cursor:pointer;
}
.alias-groups{display:block;font-size:13.5px;line-height:2;color:var(--ink-soft)}
.alias-group{display:inline}
.alias-grp-head{
  display:inline;background:none;border:0;padding:0;cursor:pointer;
  font-family:inherit;font-size:13.5px;color:var(--ink-soft);
}
.alias-group:not(:last-child) .alias-grp-head::after{content:" · ";color:var(--ink-mute)}
.alias-caret{display:none}
.alias-grp-n::before{content:"×";color:var(--ink-mute);margin-inline-end:1px}
.alias-grp-n{font-family:var(--mono);font-size:12px;color:var(--ink-mute)}
.alias-grp-items{padding-inline-start:0}

/* — "How it's being used": a 150px label column against free-flowing values. — */
.intel{padding:22px 24px}
.facet{
  display:grid;grid-template-columns:150px 1fr;column-gap:18px;row-gap:0;
  align-items:baseline;padding:8px 0;border-top:1px solid var(--line-soft);
}
.facet .flabel{align-self:baseline}
.facet .chips-row{gap:6px}

/* CWE, origin, sectors and geography read as dotted text in the design — the
   chip treatment is reserved for named actors and techniques. They stay
   buttons (each is a filter), so this is a visual demotion only. */
.facet.plain .ichip{
  background:none;border:0;border-radius:0;padding:0;
  font-size:12.5px;color:var(--ink-soft);
}
.facet.plain .ichip:not(:last-child)::after{content:" ·";color:var(--ink-mute)}
.facet.plain .ichip:hover{color:var(--danger)}

/* — Affected software / references / repositories: hairline rows, not pills. — */
.sw-list{display:block}
.sw-row{
  display:grid;grid-template-columns:1fr auto auto;align-items:center;gap:12px;
  width:100%;text-align:start;background:none;border:0;border-radius:0;
  border-top:1px solid var(--line-soft);padding:9px 2px;cursor:pointer;
}
.sw-row:hover{background:var(--band)}
.sw-name{font-family:var(--mono);font-size:12px;color:var(--ink-soft)}
.sw-row .vbadge{
  font-family:var(--mono);font-size:12px;color:var(--ink-faint);
  background:none;border:0;padding:0;white-space:nowrap;
}
.sw-go{font-size:11px;color:var(--ink-mute)}

.ref-row{
  display:grid;grid-template-columns:84px 76px 1fr auto;gap:14px;align-items:baseline;
  padding:8px 2px;border-top:1px solid var(--line-soft);border-bottom:0;
}
.ref-row:hover{background:var(--band)}
.ref-badge{
  font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;font-weight:600;
  text-transform:uppercase;background:none;border:0;padding:0;color:var(--ink-faint);
}
.ref-badge.weapon{color:var(--danger)}
.ref-desc{
  font-size:13px;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.ref-host{font-family:var(--mono);font-size:10.5px;color:var(--ink-mute);text-align:end}
/* Source publication date, second cell and a FIXED width. Every .ref-row is its
   own grid (.ref-list is a flex column), so a date in a content-sized cell
   resolves at a different x on every row and the column stops being a column.
   Tabular figures for the same reason. The cell is emitted even when a source
   carries no date, which keeps the four-column grid stable. */
.ref-when{
  font-family:var(--mono);font-size:10.5px;color:var(--ink-faint);
  font-variant-numeric:tabular-nums;white-space:nowrap;
}
.repo-stars{font-family:var(--mono);font-size:11px;color:var(--ink-faint);text-align:end}
/* Repo name is no longer bold - the description carries the weight difference
   instead, so a wall of repos reads as a list rather than a wall of headings. */
.repo-row .rr-desc{color:var(--ink-faint)}

/* — Key facts rail: the design's two-up grid of mono label over mono value. — */
.facts-rail{display:grid;grid-template-columns:1fr 1fr;row-gap:16px;column-gap:16px}
.facts-rail .fact .k{
  font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-faint);margin-bottom:3px;
}
.facts-rail .fact .v{font-family:var(--mono);font-size:13px;color:var(--ink)}
.facts-rail .fact .v.hot{color:var(--danger);font-weight:600}
/* Key facts: the design draws ONE card with a plain two-up grid inside — no
   cell borders carving it into a table. */
.facts{border:1px solid var(--line);overflow:visible}
.facts .fact{padding:0;border-bottom:0}
.facts .fact:nth-child(odd){border-inline-end:0}
.facts.facts-rail{padding:20px 22px}
.facts .fact .v{font-size:13px;font-weight:400}

/* Decision: mono 24px in the design, not a 30px display number. */
.decision .dval{font-size:24px;font-weight:600;letter-spacing:0}
.decision .dlabel{font-size:9.5px;letter-spacing:.1em}

/* Side-panel headings follow the same sentence-case rule as the main cards;
   the accent tick above them is the design's marker. */
.side-card .sc-title,.tuner-head{
  font-family:var(--sans);font-size:14.5px;font-weight:700;letter-spacing:0;
  text-transform:none;color:var(--ink);
}

/* Alias line: plain text, no pill outlines (the box came from .alias-grp-head's
   base rule further up). */
.alias-grp-head,.alias-grp-head:hover{
  border:0!important;background:none!important;box-shadow:none;padding:0!important;
}
.alias-grp-name{font-weight:600;color:var(--ink)}

/* Alias line, for real: the pill outline lives on .alias-group / .alias-grp-n
   further up, not on the head button. */
.alias-group{border:0;background:none;border-radius:0}
.alias-group.open{border-radius:0}
.alias-grp-n{background:none;padding:0;font-size:12px}

/* Tuner heading: sentence case with the accent tick, and body copy at the
   design's quiet 12.5px rather than near-body weight. */
.tuner-head .t{
  font-family:var(--sans);font-size:14.5px;font-weight:700;letter-spacing:0;
  text-transform:none;color:var(--ink);
}
.tuner-head .t::after{width:28px;height:3px;margin-top:12px}
.tuner-head .s{font-size:12.5px;color:var(--ink-faint);line-height:1.6;margin-top:10px}

/* ── Header / chrome parity ─────────────────────────────────────────────────
   The design's bar is 64px with the wordmark, plain sans nav, and mono account
   metadata on the right — no oversized padding, no pill buttons. */
header{padding:0 32px;height:64px;flex-wrap:nowrap;background:var(--panel)}
.wordmark .wm-emblem{height:40px}
.wm-name{font-size:17px;font-weight:700;letter-spacing:.14em}
.wm-tag{
  font-family:var(--mono);font-size:9.5px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--ink-faint);margin-top:2px;
}
.hm-top{font-family:var(--sans);font-size:13.5px;font-weight:500;color:var(--ink-soft)}
.header-left{gap:28px}
.header-right{gap:10px;font-family:var(--mono);font-size:12px}

/* Account chip: green dot + username + squared tier tag, as drawn. */
.acct-name{font-family:var(--mono);font-size:12px;color:var(--ink)}
.acct-tier{
  font-family:var(--mono);font-size:9.5px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--ink-faint);border:1px solid var(--line);border-radius:var(--chip-radius);
  padding:2px 6px;background:none;
}
/* The markup already carries .acct-dot — styling it here rather than adding a
   second dot via ::before, which is what put two beside each other. In the
   design it is the green "signed in" dot, and the chip has no frame. */
.acct-dot{
  width:7px;height:7px;background:var(--ok);box-shadow:none;
}
.acct-chip{
  border:0;background:none;padding:0 2px;font-family:var(--mono);
  font-size:12px;font-weight:400;color:var(--ink);
}
.acct-chip:hover{background:none;color:var(--danger)}

/* Sign in / Sign up: mono, squared; the accent stays on the primary action. */
.signin{font-family:var(--mono);font-size:12px;color:var(--ink-soft)}
.signup{
  font-family:var(--mono);font-size:11.5px;letter-spacing:.06em;
  background:var(--danger);color:#fff;border-radius:var(--chip-radius);padding:8px 16px;
}
.signup:hover{background:var(--danger-ink)}

/* Footer + ticker: the dark bands from the design. */
footer{background:var(--panel);border-top:1px solid var(--line)}
.foot-base{font-family:var(--mono);font-size:11px;color:var(--ink-faint)}
.foot-official{color:var(--ink);font-weight:700}

/* Maturity badges are TINTED chips in the design, not solid fills — orange is
   spent on the signal, not on a block of colour. Neutral by default; the
   orange tint is reserved for confirmed exploitation. */
.mchip{
  font-family:var(--mono);font-size:9.5px;font-weight:600;letter-spacing:.1em;
  text-transform:uppercase;border-radius:var(--chip-radius);padding:4px 9px;
  background:var(--band);border:1px solid var(--line);color:var(--ink-faint);
}
.mchip.exploited{background:var(--danger-wash);border-color:var(--danger-line);color:var(--danger-ink)}
.mchip.weaponized{background:var(--amber-wash);border-color:var(--amber-line);color:var(--amber)}
.mchip.poc{background:var(--band);border-color:var(--line);color:var(--ink-faint)}

/* Version tag on a trending row: neutral chip, per the design's grey scale. */
.tname .vbadge{
  color:var(--ink-faint);background:var(--band);border-color:var(--line);font-weight:400;
}

/* "+N more" tail on a capped tag list — a link, not another chip. */
.ichip-more{
  font-family:var(--mono);font-size:11px;color:var(--ink-faint);background:none;
  border:0;padding:3px 6px;cursor:pointer;text-decoration:underline;text-underline-offset:3px;
}
.ichip-more:hover{color:var(--danger)}

/* ── Reference conformance ──────────────────────────────────────────────────
   Values measured against Harpia CVE Enterprise.dc.html, element by element,
   rather than eyeballed. Each rule below closes a specific measured gap. */

/* header: 64px in the design; ours collapsed to content height (36px). */
header{min-height:64px}

/* Title row: mono 24px/600 id, and a 10px squared tag on the chip fill. */
.result-head .query-id{font-family:var(--mono);font-size:24px;font-weight:600;letter-spacing:.01em}
.query-kind{
  font-family:var(--mono);font-size:10px;letter-spacing:.08em;
  border:1px solid var(--line);background:var(--band);color:var(--ink-faint);
  padding:3px 8px;border-radius:var(--chip-radius);
}
.result-head .scope{font-family:var(--mono);font-size:12px;color:var(--ink-faint)}

/* The status meta line is MUTED in the design — the accent is spent on the
   heading, the dot and the left rule, not on this row. */
.verdict .state-line{color:var(--ink-faint)}

/* Chips are 11px throughout the design; .ichip was 12.5px. */
.ichip{font-size:11px;padding:3px 9px}

/* Section cards: 22px/24px padding, not 20px. */
.detail-section,.intel,.verdict{padding:22px 24px}
.alias-block{padding:18px 24px}
.facts-rail,.tuner{padding:20px 22px}

/* Actors and techniques read as text, like ORIGIN — the value is still a
   filter, it just stops shouting. A plain facet wraps as prose, so the
   technique lists (up to ~116 entries) stay readable behind their toggle. */
.facet.plain .chips-row{display:block;line-height:1.7}
.facet.plain .ichip{display:inline;white-space:normal}
.facet.plain .ichip:not(:last-child)::after{content:" · ";color:var(--ink-mute)}
.facet.plain .tech-row.open{display:block}
.tech-toggle{
  font-family:var(--mono);font-size:11px;color:var(--ink-faint);
  border:1px solid var(--line);border-radius:var(--chip-radius);
  background:none;padding:3px 10px;cursor:pointer;margin-inline-start:8px;
}
.tech-toggle:hover{border-color:var(--danger);color:var(--danger)}

/* Advice band — the design's exact treatment: tinted panel with a full hairline
   in the accent family, no left rule, 13.5px on the darker accent ink.
     border 1px #eeb9a4 · background #fbeee8 · padding 14px 20px
     font-size 13.5px · line-height 1.6 · color #a13315 */
.advice{
  font-size:13.5px;line-height:1.6;color:var(--danger-ink);
  padding:14px 20px;background:var(--danger-wash);
  border:1px solid var(--danger-line);border-inline-start:1px solid var(--danger-line);
  border-radius:var(--radius);
}
.advice.calm{
  color:var(--ink-soft);background:var(--band);border-color:var(--line);
  border-inline-start-color:var(--line);
}

/* ── Reference conformance, second pass ─────────────────────────────────────
   Remaining measured gaps plus the tuner card's type, all from the reference's
   inline styles. */

/* Ladder labels are mono 11px in the design. */
.rlbl{font-family:var(--mono);font-size:11px;letter-spacing:.04em}

/* Tuner labels use the compact mono evidence scale. */
.ctrl .clabel{font-size:9.5px;letter-spacing:.1em;margin-bottom:7px}

/* Feed chips: accent tint for the live state, neutral for automatability.
   Scoped to the pill itself — ".feed-pills span" also matched the status dot
   nested inside it, which then took chip padding and rendered as a 20x8 oval. */
.feed-pills > .locked-pill{
  font-family:var(--mono);font-size:11px;border-radius:var(--chip-radius);padding:4px 10px;
}

/* Remediation guidance + decision note follow the design's sans/mono split. */
.dec-note,.rem-note{font-size:12.5px;line-height:1.6;color:var(--ink-soft)}
.rem-src,.dec-src{font-family:var(--mono);font-size:10.5px;color:var(--ink-mute)}

/* Ticker: mono 11px on the dark band. */
.al-text{font-family:var(--mono);font-size:11px}

/* Reference: sectors and geography are comma-separated prose; CWE, origin and
   aliases use the middot. Same plain treatment, different joiner. */
.facet.plain.comma .ichip:not(:last-child)::after{content:", ";color:var(--ink-soft)}

/* Ladder labels: mono 11px (the base .rlbl rule further up set 12.5px). */
.rung .rlbl{font-family:var(--mono);font-size:11px;letter-spacing:.04em}

/* The plain-facet display:block beat .tech-row{display:none}, so the technique
   lists rendered expanded instead of behind their "show N →" button. Restate
   the collapsed default at matching specificity. */
.facet.plain .chips-row.tech-row{display:none}
.facet.plain .chips-row.tech-row.open{display:block}

/* A trailing space inside ::after content collapses in inline flow, so the
   comma joiner needs it preserved. */
.facet.plain .ichip:not(:last-child)::after,
.facet.plain.comma .ichip:not(:last-child)::after{white-space:pre}

/* Technique facets: label in column 1, control + collapsed list in column 2 —
   the reference's arrangement. The button keeps its own casing (the label's
   uppercase no longer cascades into it). */
.facet-val{min-width:0}
.tech-toggle{margin-inline-start:0;text-transform:none}
.facet-val .tech-row{margin-top:8px}

/* ── Reference conformance, third pass ──────────────────────────────────────
   The right rail and the section footers, measured against the design. */

/* "Show all N →" is the design's small mono control: 11.5px, 7px/14px. */
.ds-more{font-size:11.5px;padding:7px 14px;color:var(--ink)}

/* Tuner body copy is regular weight — it was rendering at 700 and reading as a
   second heading. */
.tuner-head .s{font-weight:400}

/* Remediation guidance follows the decision block's scale: a mono 9.5px data
   label, the source as quiet inline mono (no boxed chip), and the window line
   as ordinary 12.5px body rather than a 15px semibold statement. */
.bod-t{font-size:9.5px;letter-spacing:.1em}
.bod-src{
  border:0;padding:0;font-size:10.5px;color:var(--ink-mute);
  text-decoration:underline;text-underline-offset:3px;
}
.bod-window{font-family:var(--sans);font-size:12.5px;font-weight:400;color:var(--ink-soft);line-height:1.6}
.bod-row{font-size:12.5px}
.bod-chip{font-size:10px;padding:3px 8px;color:var(--ink-faint)}

/* Feed pills: the reference sizes these like every other chip (mono 11px,
   4px/10px, 3px corner) and gives the live state a small round dot — ours was
   a 13px pill whose dot flex-shrank into an oval. */
.locked-pill{font-size:11px;padding:4px 10px;border-radius:var(--chip-radius);gap:6px}
.locked-pill .lbeacon{width:6px;height:6px;flex:none}

/* Forensic triage is a critical signal, so it takes the accent ink rather than
   the amber that sat outside the palette. */
.bod-triage{color:var(--danger-ink)}

/* Vertical rhythm in the main column: the reference stacks these blocks with a
   flex column and an 18px gap. Ours relied on each block's own margin-bottom,
   and .advice had none — so the section under it sat flush against it. */
.detail-main{display:flex;flex-direction:column;gap:18px}
.detail-main > *{margin-bottom:0}

/* Title row is bare — no card behind the id, severity and CVSS. */
.result-head{background:none;border:0;padding-inline:0}

/* The home control beside the search field is plain mono text in the design
   (⌂ HARPIA, 11px, letterspaced, muted) — not a bordered button. */
.rbar-home{
  border:0;background:none;padding:0 4px;
  font-family:var(--mono);font-size:11px;font-weight:400;
  letter-spacing:.06em;text-transform:uppercase;color:var(--ink-faint);
}
.rbar-home:hover{color:var(--danger);border-color:transparent}

/* Result search field matches the header band: mono 13px on 9/14 padding. */
.rbar-input{font-size:13px;padding:9px 14px}

/* Repository rows follow the design's 74px / 1fr / 64px grid — the trailing
   arrow that used to sit in a fourth cell wrapped to its own line. */
.ref-row.repo-row{grid-template-columns:74px 1fr 64px}

/* ── Small screens ──────────────────────────────────────────────────────────
   The 64px fixed-height, nowrap header from the desktop rebrand overflowed the
   viewport by ~84px on a 390px phone and overlapped the wordmark. The design
   references are desktop-only, so these rules keep its language (mono labels,
   squared chips, warm surfaces) while letting the chrome wrap. */
@media (max-width:720px){
  header{
    height:auto;min-height:0;padding:12px 16px;
    flex-wrap:wrap;row-gap:12px;column-gap:12px;
  }
  .header-left{flex:1 1 100%;gap:12px}
  .header-right{flex:1 1 100%;justify-content:flex-start;gap:12px}
  .hmenu{flex:1 1 100%;order:3;gap:4px;flex-wrap:wrap}
  .wordmark .wm-emblem{height:28px}
  .wm-name{font-size:14px}

  /* Account chip must not push the row wider than the screen. */
  .acct-menu,.acct-chip{max-width:100%;min-width:0}
  .acct-name{max-width:38vw}

  /* Content gutters match the header's. */
  .result{padding-inline:16px}
  .rbar{flex-wrap:wrap;gap:8px}

  /* Definition grids stack: a 150px label column leaves no room for values. */
  .facet{grid-template-columns:1fr;row-gap:4px;padding:10px 0}
  .facet .flabel{margin-bottom:2px}
  .facts-rail{grid-template-columns:1fr 1fr}

  /* Rows that use fixed side columns on desktop. */
  .ref-row,.ref-row.repo-row{grid-template-columns:64px 1fr;row-gap:2px}
  .ref-host,.repo-stars{grid-column:2;text-align:start}
  /* Two columns and four cells, so every reference cell is placed BY HAND here.
     Auto-placement walks the DOM order (badge, date, description, host) and puts
     the description on the second row next to the date, which reads as a
     three-line card. Explicit rows keep it at two: badge + description, then date
     + host. 10px on the date because the 64px column is the badge's width, not
     the 76px the desktop grid gives it. */
  .ref-row:not(.repo-row) .ref-desc{grid-column:2;grid-row:1}
  .ref-when{grid-column:1;grid-row:2;font-size:10px}
  .ref-row:not(.repo-row) .ref-host{grid-row:2}
  .alias-head{flex-wrap:wrap;row-gap:4px}

  /* The hover dropdowns are absolutely positioned with a 210px floor; on a
     390px screen the right-hand ones hang past the edge and widen the document
     even while hidden (visibility:hidden still lays out). Pin them to the menu
     row and cap them to the viewport. */
  .hm-item{position:static}
  /* ...which makes the header the containing block — but only if the header is
     itself positioned. Without this the drop resolved against the page and
     top:calc(100% + 6px) put it a full document-height below the fold. */
  header{position:relative}
  .hm-drop{
    inset-inline:16px auto;min-width:0;
    max-width:calc(100vw - 32px);width:calc(100vw - 32px);
  }
}

/* A grid/flex item defaults to min-width:auto, so the nowrap+ellipsis on
   .ref-desc could not actually shrink — a long repo name like
   "Puliczek/CVE-2021-44228-PoC-log4j-bypass-words" widened the whole row past
   the viewport instead of truncating. */
.ref-desc{min-width:0}
.ref-desc b{overflow-wrap:anywhere}

/* `1fr` is `minmax(auto,1fr)`, and auto floors at min-content — so a long
   unbreakable repo name still set the column's minimum and the row (not the
   clipped text) pushed the document wider. minmax(0,1fr) lets it actually
   shrink so the ellipsis does its job. */
.ref-row{grid-template-columns:84px 76px minmax(0,1fr) auto}
.ref-row.repo-row{grid-template-columns:74px minmax(0,1fr) 64px}
.sw-row{grid-template-columns:minmax(0,1fr) auto auto}
.facet{grid-template-columns:150px minmax(0,1fr)}
@media (max-width:720px){
  .ref-row,.ref-row.repo-row{grid-template-columns:64px minmax(0,1fr)}
  .facet{grid-template-columns:minmax(0,1fr)}
}

@media (max-width:720px){
  /* Hover tooltips are absolutely positioned but still contribute to the
     scrollable width (measured: .seg 395px inside a 312px rail), and a hover
     tooltip is unreachable on touch anyway — the title attribute still carries
     the text for assistive tech. */
  [data-tip]::after,[data-tip]::before{display:none!important}
  .detail-side{overflow-x:clip}
  .doc-main{width:calc(100% - 24px);padding-inline:0}
  .doc-main p,.doc-main ul{font-size:16px;line-height:1.62}
  .doc-main input,.doc-main select,.doc-main textarea,
  .auth-main input,.auth-main select,.auth-main textarea,
  .account-main input,.account-main select,.account-main textarea{font-size:16px}
  .table-scroll{margin-inline:0}
}

@media (pointer:coarse){
  button,.hm-top,.hm-drop a,.signin,.signup,.acct-chip,.acct-drop a,
  .oauth-btn,.fchip,.chip,.stix-jump,.stix-dl{
    min-height:44px;
  }
  button,.hm-top,.hm-drop a,.signin,.signup,.acct-chip,.acct-drop a,
  .oauth-btn,.fchip,.chip{display:inline-flex;align-items:center;justify-content:center}
  .ra-close{min-width:44px;min-height:44px}
}

/* body is a column flex container, so header/footer are flex ITEMS and default
   to flex-shrink:1. Once the header wrapped to two rows on a phone, the flex
   algorithm shrank it back to a single 25px line and its content spilled over
   the page — the overlap in the mobile screenshot. Chrome elements must not
   shrink. */
header,footer{flex:none}

@media (max-width:720px){
  /* The STIX explorer is a force-directed graph with a legend rail and a
     details rail — it needs a pointer and room. Hide its entry points rather
     than let a phone open something unusable. */
  .stix-jump{display:none}
}

/* ── Live figures on the intelligence page ─────────────────────────────────
   The page ships placeholders and fills them from the feed. A figure that has
   not arrived must not read like a real one, and a figure that CANNOT arrive
   must say so — the previous behaviour was to leave a baked-in snapshot in
   place, which showed stale numbers as current whenever the API was down. */
[data-live]{color:var(--ink-faint)}
[data-live="ok"]{color:inherit}
/* The status LINE is a real signal, so it earns the accent. The figures
   themselves just go quiet — eighteen orange em dashes would spend the one
   colour this design reserves for critical findings on "we could not fetch". */
[data-live="error"]{color:var(--danger);font-family:var(--sans)}
[data-live="na"]{color:var(--ink-faint);animation:none}
.f-num[data-live],.s-num[data-live],.c-num[data-live]{opacity:.45}
.f-num[data-live="ok"],.s-num[data-live="ok"],.c-num[data-live="ok"]{opacity:1}
/* A slow feed should look like it is working, not like it is broken. */
@media (prefers-reduced-motion:no-preference){
  [data-live]:not([data-live="ok"]):not([data-live="error"]):not([data-live="na"]){animation:live-wait 1.4s ease-in-out infinite}
}

/* ---- homepage composition: operational intelligence briefing ---- */
.home-landing{max-width:none;padding:0 40px}
.home-hero{
  width:100%;max-width:1180px;margin:0 auto;padding:80px 0 72px;
  display:grid;grid-template-columns:minmax(0,.88fr) minmax(460px,1.12fr);
  gap:64px;align-items:center;
}
.hero-copy{max-width:570px}
.section-label{margin-bottom:14px;font:700 10.5px/1.4 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--danger)}
.home-hero h1{
  max-width:11ch;margin:0 0 24px;font-size:clamp(36px,5vw,54px);font-weight:700;
  line-height:1.06;letter-spacing:-.02em;color:var(--ink);text-align:start;
}
.home-hero h1::after{display:none}
.hero-lede{max-width:62ch;font-size:16px;line-height:1.65;color:var(--ink-soft)}
.hero-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:28px}
.home-btn{
  min-height:44px;display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:10px 16px;
  border-radius:var(--radius);font:700 12px/1.4 var(--mono);letter-spacing:.03em;
  text-decoration:none;transition:background .14s ease,border-color .14s ease,color .14s ease;
}
a.home-btn::after,.template-platform-grid a::after{
  content:"";width:14px;height:14px;flex:none;background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8h9M8.5 4.5 12 8l-3.5 3.5' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8h9M8.5 4.5 12 8l-3.5 3.5' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
  transition:transform .18s cubic-bezier(.22,1,.36,1);
}
a.home-btn:hover::after,.template-platform-grid a:hover::after{transform:translateX(3px)}
.home-btn-primary{border:1px solid var(--danger);background:var(--danger);color:var(--panel)}
.home-btn-primary:hover{background:var(--sov);border-color:var(--sov)}
.home-btn-ghost{border:1px solid var(--line);background:transparent;color:var(--ink)}
.home-btn-ghost:hover{border-color:var(--ink);background:var(--panel)}
.home-btn-dark{border:1px solid var(--sov);background:var(--sov);color:var(--sov-ink)}
.home-btn-dark:hover{background:var(--danger);border-color:var(--danger)}
.hero-note{max-width:60ch;margin-top:17px;font:400 11.5px/1.55 var(--mono);color:var(--ink-faint)}
.lookup-panel{min-width:0;border:1px solid var(--line);border-radius:var(--radius);background:var(--panel)}
.lookup-head{
  min-height:44px;padding:0 16px;display:flex;align-items:center;justify-content:space-between;
  border-bottom:1px solid var(--line);font:600 11px/1.4 var(--mono);letter-spacing:.04em;
  text-transform:uppercase;color:var(--ink-faint);
}
.lookup-panel .searchwrap{max-width:none;padding:22px}
.lookup-panel .searchbox{box-shadow:none}
.lookup-panel .sub{text-align:start;margin:13px 0 0;max-width:none}
.lookup-panel .chips{justify-content:flex-start;margin-top:19px}
.lookup-panel .syntax{margin-top:18px;text-align:start}
.proof-strip{
  width:100%;max-width:1180px;margin:0 auto;display:grid;grid-template-columns:repeat(4,1fr);
  border-block:1px solid var(--line);
}
.proof-item{padding:24px;border-inline-end:1px solid var(--line)}
.proof-item:last-child{border-inline-end:0}
.proof-strip strong{display:block;font-size:19px;font-weight:800;line-height:1.25;letter-spacing:.02em;color:var(--ink)}
.proof-strip span{display:block;margin-top:8px;font-size:12px;line-height:1.45;color:var(--ink-soft)}

.home-section{width:100%;max-width:1180px;margin:0 auto;padding:80px 40px;border-bottom:1px solid var(--line)}
.section-intro{display:grid;grid-template-columns:minmax(0,1fr) minmax(280px,430px);gap:64px;align-items:start;margin-bottom:44px}
.section-intro h2,.workflow-copy h2,.developer-section h2,.home-cta h2{
  max-width:18ch;margin-top:0;font-size:clamp(26px,4vw,38px);font-weight:800;line-height:1.1;
  letter-spacing:-.01em;color:var(--ink);text-wrap:balance;
}
.section-intro > p,.workflow-copy > p,.developer-section > div > p,.home-cta p{
  max-width:62ch;font-size:14.5px;line-height:1.65;color:var(--ink-soft);
}
.pulse-section{max-width:none;background:var(--band)}
.pulse-section > *{max-width:1100px;margin-inline:auto}
.pulse-ledger{border-top:1px solid var(--line)}
.pulse-row{
  min-height:64px;display:grid;grid-template-columns:minmax(180px,.8fr) minmax(220px,1.2fr) auto;
  gap:24px;align-items:center;padding:12px 0;border-bottom:1px solid var(--line);
  color:var(--ink);
}
.pulse-name{font-size:16px;font-weight:700}
.pulse-change{font:500 12px/1.5 var(--mono);color:var(--ink-faint)}
.pulse-status{padding:4px 8px;border:1px solid var(--line);border-radius:var(--chip-radius);font:600 10px/1.4 var(--mono);text-transform:uppercase;color:var(--ink-soft)}
.pulse-status.active{border-color:var(--danger-line);background:var(--danger-wash);color:var(--danger)}
.pulse-section .trow{cursor:pointer}
.pulse-section .trow:hover{background:var(--band)}
.pulse-section .orow{cursor:default}
.pulse-section .request-access-btn{margin-top:12px;text-decoration:none}
.trend-layout{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(260px,.6fr);gap:18px;align-items:start}
.trend-layout > .trending{max-width:none;margin:0}
.trend-context{padding:24px;border:1px solid var(--line);border-radius:var(--radius);background:var(--panel)}
.trend-context h3{margin:0;font-size:23px;line-height:1.15;letter-spacing:-.02em;color:var(--ink)}
.trend-context p{margin-top:12px;font-size:13px;line-height:1.6;color:var(--ink-soft)}
.trend-filters{display:flex;flex-wrap:wrap;gap:7px;margin:20px 0}
.trend-filters span,.trend-filters a{padding:6px 8px;border:1px solid var(--line);border-radius:var(--chip-radius);font:600 10px/1.4 var(--mono);color:var(--ink-faint);text-decoration:none}
.trend-filters a:hover{border-color:var(--danger);color:var(--danger);background:var(--danger-wash)}
.trend-context code{display:block;padding:13px;border:1px solid var(--line);border-radius:var(--radius);background:var(--band);font:11px/1.55 var(--mono);color:var(--ink-soft)}
.section-links{display:flex;gap:24px;margin-top:20px}
.section-links a,.capability-ledger a{font-size:12.5px;font-weight:650;color:var(--danger);text-underline-offset:3px}

.capability-ledger{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--line)}
.capability-ledger article{padding:28px 32px 30px 0;border-bottom:1px solid var(--line)}
.capability-ledger article:nth-child(odd){border-inline-end:1px solid var(--line)}
.capability-ledger article:nth-child(even){padding-inline-start:32px}
.capability-ledger h3{font-size:19px;line-height:1.25;color:var(--ink)}
.capability-number{display:block;margin-bottom:26px;font:600 10.5px/1.4 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-faint)}
.capability-ledger p{max-width:58ch;margin:10px 0 17px;font-size:14px;line-height:1.6;color:var(--ink-soft)}
.workflow-section{display:grid;grid-template-columns:.8fr 1.2fr;gap:64px;align-items:center}
.workflow-copy > p{margin:18px 0 24px}
.workflow-copy .home-btn{width:max-content}
.workflow-steps{list-style:none;border-top:1px solid var(--line)}
.workflow-steps li{position:relative;display:grid;grid-template-columns:minmax(150px,.7fr) 1.3fr;gap:22px;padding:20px 18px;border-bottom:1px solid var(--line)}
.workflow-steps li::before{content:"";position:absolute;inset-inline-start:0;top:25px;width:6px;height:6px;border-radius:50%;background:var(--ink-faint)}
.workflow-steps li.is-active{background:var(--danger-wash)}
.workflow-steps li.is-active::before{background:var(--danger)}
.workflow-steps strong{font-size:14px}.workflow-steps span{font-size:13px;line-height:1.5;color:var(--ink-soft)}
.developer-section{background:var(--panel)}
.developer-section > div > p{margin-top:18px}
.integration-ledger{display:grid;grid-template-columns:repeat(6,1fr);border-top:1px solid var(--line)}
.integration-ledger span{min-height:64px;display:flex;align-items:center;padding:14px 18px;border-bottom:1px solid var(--line);font:600 11.5px/1.4 var(--mono);color:var(--ink-soft)}
.integration-ledger span:not(:last-child){border-inline-end:1px solid var(--line)}
.home-cta{width:calc(100% - 80px);max-width:1100px;margin:80px auto;padding:44px;display:flex;justify-content:space-between;gap:44px;align-items:center;background:var(--sov);color:var(--sov-ink);border-radius:var(--radius)}
.home-cta h2{margin:0;color:var(--sov-ink);max-width:22ch}.home-cta p{margin-top:10px;color:#D5D0C5}
.home-cta .hero-actions{margin-top:0;flex:none}.home-cta .home-btn-ghost{border-color:var(--sov-line);color:var(--sov-ink)}
.home-cta .home-btn-ghost:hover{background:var(--paper);color:var(--ink)}
.home-footer{width:100%;max-width:1180px;margin:0 auto;padding:46px 40px;display:grid;grid-template-columns:1.7fr repeat(4,1fr);gap:40px}
.footer-brand p{max-width:36ch;margin-top:12px;font-size:12.5px;line-height:1.55;color:var(--ink-faint)}
.home-footer nav{display:flex;flex-direction:column;align-items:flex-start;gap:9px}
.home-footer nav strong{margin-bottom:3px;font:600 11px/1.4 var(--mono);letter-spacing:.05em;text-transform:uppercase;color:var(--ink)}
.home-footer nav a{font-size:12.5px;color:var(--ink-soft);text-decoration:none}.home-footer nav a:hover{color:var(--danger);text-decoration:underline;text-underline-offset:3px}

@media(max-width:1060px){
  .home-hero{grid-template-columns:1fr;gap:42px;max-width:820px}
  .hero-copy{max-width:720px}.home-hero h1{max-width:13ch}
  .home-footer{grid-template-columns:1.5fr repeat(2,1fr)}
}
@media(max-width:720px){
  .home-landing{padding-inline:16px}.home-hero{padding:44px 0;gap:32px}
  .home-hero h1{font-size:clamp(34px,11vw,46px)}.hero-lede{font-size:16px}
  .lookup-panel .searchwrap{padding:16px}.lookup-panel .chips{display:none}
  .lookup-panel .searchbox input{font-size:16px}
  .lookup-panel .syntax summary{min-height:44px;width:100%}
  .proof-strip{grid-template-columns:1fr 1fr}.proof-item{padding:20px 14px}
  .proof-item:nth-child(2){border-inline-end:0}.proof-item:nth-child(-n+2){border-bottom:1px solid var(--line)}
  .home-section{padding:64px 16px}.section-intro{grid-template-columns:1fr;gap:16px;margin-bottom:32px}
  .pulse-row{grid-template-columns:1fr auto;gap:6px 16px;padding:15px 0}.pulse-change{grid-column:1}.pulse-status{grid-column:2;grid-row:1/3}
  .capability-ledger{grid-template-columns:1fr}.capability-ledger article,.capability-ledger article:nth-child(even){padding:24px 0;border-inline-end:0}
  .workflow-section{grid-template-columns:1fr;gap:42px}
  .trend-layout{grid-template-columns:1fr}
  .integration-ledger{grid-template-columns:repeat(3,1fr)}
  .integration-ledger span{border-inline-end:0}
  .integration-ledger span:not(:nth-child(3n)){border-inline-end:1px solid var(--line)}
  .workflow-steps li{grid-template-columns:1fr;gap:7px}
  .home-cta{width:calc(100% - 32px);margin:64px 16px;padding:28px 22px;align-items:flex-start;flex-direction:column}
  .home-footer{padding:38px 16px;grid-template-columns:1fr 1fr;gap:34px 24px}.footer-brand{grid-column:1/-1}
}

/* Motion explains disclosure and control state; it never delays reading. */
.home-btn:active,.searchbox button:active,.chip:active,.syn-ex:active{transform:translateY(1px)}
@media(max-width:980px) and (prefers-reduced-motion:no-preference){
  header.nav-open .hmenu,
  header.nav-open > .auth{
    transform-origin:top;animation:home-menu-reveal .18s cubic-bezier(.16,1,.3,1) both;
  }
  @keyframes home-menu-reveal{
    from{opacity:0;clip-path:inset(0 0 100% 0);transform:translateY(-4px)}
    to{opacity:1;clip-path:inset(0);transform:none}
  }
}

/* Shared mobile navigation: compact at rest, complete when opened. */
@media(max-width:980px){
  header{padding:12px 16px;row-gap:0}
  .header-left{
    width:100%;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;align-items:center;
  }
  .mobile-menu-toggle{
    display:inline-flex;min-width:76px;min-height:44px;align-items:center;justify-content:center;gap:9px;
    border:1px solid var(--line);border-radius:var(--radius);background:var(--panel);
    color:var(--ink);font:600 11px/1.4 var(--mono);letter-spacing:.04em;text-transform:uppercase;
  }
  .mobile-menu-toggle i,
  .mobile-menu-toggle i::before{
    content:"";display:block;width:13px;height:1px;background:currentColor;transition:transform .15s ease;
  }
  .mobile-menu-toggle i::before{transform:translateY(4px)}
  header.nav-open .mobile-menu-toggle i{transform:rotate(45deg)}
  header.nav-open .mobile-menu-toggle i::before{transform:rotate(90deg)}
  .hmenu,
  header > .auth{display:none}
  header.nav-open .hmenu{
    grid-column:1/-1;display:flex;flex-direction:column;align-items:stretch;gap:0;
    margin-top:12px;padding-top:8px;border-top:1px solid var(--line);
  }
  header.nav-open > .auth{
    width:100%;display:flex;padding-top:10px;margin-top:10px;border-top:1px solid var(--line);
  }
  .hm-item{width:100%}
  .hm-top{
    width:100%;min-height:44px;justify-content:space-between;padding:10px 4px;border-radius:0;
  }
  .hm-drop{
    position:static;width:100%;max-width:none;min-width:0;padding:2px 0 8px 12px;
    border:0;border-top:1px solid var(--line-soft);border-radius:0;box-shadow:none;
    opacity:1;visibility:visible;transform:none;display:none;background:transparent;
  }
  .hm-item.open .hm-drop{display:flex}
  .hm-drop a{min-height:44px;padding:10px 8px;white-space:normal}
  .auth .signin,
  .auth .signup{min-height:44px;flex:1}
}
@media(max-width:460px){
  .proof-strip{grid-template-columns:1fr}.proof-item{border-inline-end:0;border-bottom:1px solid var(--line)}
  .proof-item:last-child{border-bottom:0}.home-footer{grid-template-columns:1fr}
  .integration-ledger{grid-template-columns:repeat(2,1fr)}
  .integration-ledger span:not(:nth-child(3n)){border-inline-end:0}
  .integration-ledger span:nth-child(odd){border-inline-end:1px solid var(--line)}
}
@keyframes live-wait{0%,100%{opacity:.4}50%{opacity:.7}}

/* Homepage v2 mirrors the approved reference composition. It keeps Harpia's
   paper palette and Plex typography while adopting the reference's generous
   rounded containers, card rhythm, proportions, and section geometry. */
.template-home{background:var(--paper);color:var(--ink)}
.template-container{width:min(calc(100% - 40px),1220px);margin-inline:auto}
.template-home .top-alert{min-height:32px;padding-inline:max(20px,calc((100% - 1220px)/2));font-size:10.5px;letter-spacing:.04em}
.template-home .top-alert > span:first-child{display:flex;align-items:center;gap:9px}
body > header{width:min(calc(100% - 40px),1220px);height:72px;min-height:72px;margin-inline:auto;padding:0;border-bottom:1px solid var(--line);background:transparent}
.template-home .template-hero{padding:44px 0;overflow:visible}
.template-hero-grid{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center}
.template-hero-copy{max-width:670px}
.template-hero-copy h1{max-width:760px;margin:21px 0 22px;font-size:var(--display-size);font-weight:700;line-height:var(--display-line);letter-spacing:var(--display-track);color:var(--ink)}
.template-hero-copy h1 em{font-style:normal;color:var(--danger)}
.template-hero-copy > p{max-width:660px;font-size:18px;line-height:1.65;color:var(--ink-soft)}
.template-console{border-radius:16px;overflow:visible;box-shadow:0 16px 42px rgba(22,21,15,.08)}
.template-console .lookup-head{border-radius:16px 16px 0 0;background:var(--sov);color:var(--sov-ink)}
.terminal-dots{display:flex;gap:5px}.terminal-dots i{width:7px;height:7px;border-radius:50%;background:var(--ink-muted)}.terminal-dots i:first-child{background:var(--danger)}
.template-console .searchwrap{padding:30px 26px}
.template-console .searchbox{min-height:46px;border-radius:10px;overflow:hidden}
.template-console .searchbox button{border-radius:8px}
.template-home .proof-strip{max-width:none;border:0;border-block:1px solid var(--line);border-radius:0;overflow:visible;background:transparent}
.template-home .proof-item{min-height:116px;display:flex;flex-direction:column;justify-content:center;padding:22px 24px}
.template-home .proof-item strong{font-size:26px}.template-home .proof-item span{max-width:22ch}
.template-section{padding:36px 0}
.template-trending{margin-top:28px;background:linear-gradient(180deg,var(--band),var(--paper))}
.template-section-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(300px,440px);align-items:start;gap:50px;margin-bottom:36px}
.template-section-head h2{max-width:700px;margin:0;font-size:clamp(30px,4vw,46px);line-height:1.04;letter-spacing:-.035em}
.template-section-head > p{max-width:440px;margin:46px 0 0;font-size:14px;line-height:1.65;color:var(--ink-soft)}
.template-home .trend-layout{grid-template-columns:1.4fr .6fr;gap:18px;align-items:stretch}
.template-home .trending,.template-home .trend-context{border:1px solid var(--line);border-radius:14px;overflow:hidden;background:var(--panel)}
.template-home .trending .trend-head{padding:20px 20px 0}
.template-home .trending .trend-list{border-top:1px solid var(--line)}
.template-home .trending .trow{min-height:78px;grid-template-columns:34px minmax(0,1fr) 92px auto;padding:0 18px}
.template-home .trending .tname{font-size:15px;font-weight:750}.template-home .trending .tname .cveid{color:var(--ink)}
.template-home .trending .tsub{font-family:var(--sans);font-size:11.5px;color:var(--ink-faint)}
.trend-signal{display:inline-flex;align-items:center;justify-content:center;color:var(--danger)}
.trend-signal svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.template-home .trend-context{padding:24px}.template-home .trend-context code{border-radius:10px}
.trend-context-label{margin-bottom:10px;font:700 10.5px/1.4 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--danger)}
.template-home .section-label{display:inline-block;min-height:0;margin-bottom:14px;padding:0;border:0;border-radius:0;background:transparent;color:var(--danger)}
.template-home .section-label::after,.template-home .trend-head .th-t::after,.trending-page .section-label::after{display:none}
.template-home .chip,.template-home .trend-filters span,.template-home .mchip,.template-home .vbadge{border-radius:999px}
.template-home .trend-page-link{display:inline-flex;align-items:center;gap:7px;min-height:44px;margin-top:11px;padding:0;font:700 11px/1.4 var(--mono);color:var(--danger);text-decoration:none}
.template-home .trend-page-link svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;transition:transform .18s cubic-bezier(.22,1,.36,1)}
.template-home .trend-page-link:hover span{text-decoration:underline;text-underline-offset:4px}.template-home .trend-page-link:hover svg{transform:translateX(3px)}
.template-home .trend-page-link:focus-visible{outline:3px solid var(--danger-line);outline-offset:4px;border-radius:4px}
.trending-page .section-label{display:inline-block;min-height:0;margin-bottom:14px;padding:0;border:0;border-radius:0;background:transparent;font:700 10.5px/1.4 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--danger)}
.template-platform-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
.template-platform-grid article{position:relative;min-height:255px;padding:28px;border:1px solid var(--line);border-radius:16px;background:var(--panel);overflow:hidden}
.template-platform-grid article > span{font:600 10.5px/1.4 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-faint)}
.template-platform-grid h3{max-width:19ch;margin:34px 0 9px;font-size:24px;line-height:1.15;letter-spacing:-.03em}
.template-platform-grid p{max-width:500px;font-size:14px;line-height:1.6;color:var(--ink-soft)}
.template-platform-grid a{position:absolute;bottom:25px;display:inline-flex;align-items:center;gap:7px;font-size:12.5px;font-weight:700;color:var(--danger);text-underline-offset:3px}
.template-workflow{padding:44px 0;background:var(--sov);color:var(--sov-ink)}
.template-workflow-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:56px;align-items:center}
.template-workflow .workflow-copy h2{max-width:12ch;margin:10px 0 18px;font-size:46px;line-height:1.02;letter-spacing:-.045em;color:var(--sov-ink)}
.template-workflow .workflow-copy p{max-width:52ch;margin-bottom:24px;font-size:16px;color:#D5D0C5}
.template-steps{margin:0;padding:0 0 0 28px;border-inline-start:1px solid var(--sov-line);list-style:none}
.template-steps li{position:relative;padding:18px 0 22px}.template-steps li::before{content:"";position:absolute;left:-33px;top:24px;width:8px;height:8px;border:3px solid var(--sov);border-radius:50%;background:#756F64}.template-steps li.active::before{background:var(--danger);box-shadow:0 0 0 5px rgba(217,72,31,.16)}
.template-steps small{font:500 10.5px/1.4 var(--mono);color:#AAA398}.template-steps h3{margin:4px 0;font-size:18px;color:var(--sov-ink)}.template-steps p{margin:0;font-size:12px;color:#D5D0C5}
.developer-delivery{display:grid;grid-template-columns:.9fr 1.1fr;border-radius:18px;overflow:hidden;background:var(--sov);color:var(--sov-ink);box-shadow:0 16px 38px rgba(22,21,15,.1)}
.developer-delivery-copy{padding:34px 36px}
.delivery-status{display:inline-flex;align-items:center;gap:7px;padding:6px 10px;border:1px solid var(--sov-line);border-radius:999px;font:700 10px/1.4 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:#D5D0C5}
.delivery-status i{width:6px;height:6px;border-radius:50%;background:var(--danger)}
.developer-delivery h3{max-width:18ch;margin:24px 0 12px;font-size:27px;line-height:1.12;letter-spacing:-.025em;color:var(--sov-ink)}
.developer-delivery-copy p{max-width:48ch;font-size:13.5px;line-height:1.65;color:#D5D0C5}
.developer-delivery-copy a{display:inline-flex;margin-top:22px;font-size:12.5px;font-weight:700;color:#F0885F;text-underline-offset:3px}
.developer-delivery pre{align-self:stretch;margin:20px 20px 20px 0;padding:26px;border:1px solid var(--sov-line);border-radius:14px;background:#191813;overflow:auto;color:#D5D0C5;font:12px/1.7 var(--mono)}
.developer-delivery pre span{color:#F0885F;font-weight:700}
.delivery-interfaces{grid-column:1/-1;display:flex;gap:8px;flex-wrap:wrap;padding:16px 20px;border-top:1px solid var(--sov-line)}
.delivery-interfaces span{display:inline-flex;align-items:center;min-height:34px;padding:7px 11px;border:1px solid var(--sov-line);border-radius:999px;font:600 10.5px/1.4 var(--mono);color:#D5D0C5}
#developers.template-section{padding-top:40px;padding-bottom:14px}
.template-cta{padding:14px 0 44px}.template-cta-box{display:flex;align-items:center;justify-content:space-between;gap:30px;padding:30px 34px;border:1px solid var(--line);border-radius:18px;background:var(--panel)}
.cta-kicker{display:inline-block;margin-bottom:12px;padding:0;border:0;border-radius:0;background:transparent;font:700 10px/1.4 var(--mono);letter-spacing:.07em;text-transform:uppercase;color:var(--danger)}
.template-cta h2{max-width:28ch;margin:0;font-size:28px;line-height:1.12;letter-spacing:-.025em}.template-cta p{margin:7px 0 0;color:var(--ink-soft)}.template-cta .hero-actions{margin:0;flex:none}
.template-footer-grid{display:grid;grid-template-columns:1.5fr repeat(4,1fr);gap:28px;padding:36px 0 50px}
.template-footer-grid nav{display:flex;flex-direction:column;align-items:flex-start;gap:8px}.template-footer-grid nav strong{font:600 10.5px/1.4 var(--mono);letter-spacing:.08em;text-transform:uppercase}.template-footer-grid nav a{font-size:12px;color:var(--ink-soft);text-decoration:none}.template-footer-grid nav a:hover{color:var(--danger)}
body.result-route .template-hero,body.result-route .template-container > .proof-strip,body.result-route .template-section,body.result-route .template-workflow,body.result-route .template-cta{display:none}
.route-loading{min-height:180px;display:grid;grid-template-columns:12px minmax(0,1fr);align-content:center;column-gap:12px;padding:28px 0;color:var(--ink)}
.route-loading > span{grid-row:1/3;align-self:start;width:8px;height:8px;margin-top:5px;border-radius:50%;background:var(--danger);animation:route-pulse 1.1s ease-in-out infinite alternate}
.route-loading strong{font-size:15px}.route-loading small{margin-top:3px;font-size:12.5px;color:var(--ink-faint)}
@keyframes route-pulse{to{opacity:.35}}
@media(max-width:980px){body > header{width:calc(100% - 24px);height:auto;min-height:0;padding:12px 0}.template-hero-grid,.template-workflow-grid,.template-home .trend-layout{grid-template-columns:1fr}.template-home .proof-strip{grid-template-columns:repeat(2,1fr)}.template-platform-grid{grid-template-columns:repeat(2,1fr)}.template-footer-grid{grid-template-columns:repeat(2,1fr)}.template-section-head{grid-template-columns:1fr;gap:16px}.template-section-head > p{margin-top:0}.template-home .proof-item:nth-child(2){border-inline-end:0}.template-home .proof-item:nth-child(-n+2){border-bottom:1px solid var(--line)}}
@media(max-width:720px){:root{--display-size:48px}.template-container{width:min(calc(100% - 24px),1220px)}.template-home header{width:calc(100% - 24px)}.template-home .template-hero{padding:36px 0}.template-hero-copy h1,.doc-main h1,.trend-page-hero h1{font-size:var(--display-size)}.template-hero-copy > p{font-size:16px}.template-console .searchwrap{padding:18px}.template-console .searchbox{min-height:44px}.template-home .proof-strip,.template-platform-grid{grid-template-columns:1fr}.template-home .proof-item{min-height:94px;border-inline-end:0;border-bottom:1px solid var(--line)}.template-home .proof-item:last-child{border-bottom:0}.template-section{padding:40px 0}.template-home .trending .trow{min-height:88px;grid-template-columns:28px minmax(0,1fr) auto;gap:4px 10px;padding:10px 14px}.template-home .trending .trow .rank{grid-row:1/3}.template-home .trending .tmain{align-self:end}.template-home .trend-signal{grid-column:2;justify-self:start;align-self:start}.template-home .trending .mchip{grid-column:3;grid-row:1/3}.template-platform-grid article{min-height:245px}.template-workflow{padding:44px 0}.template-workflow .workflow-copy h2{font-size:38px}#developers.template-section{padding-top:40px}.developer-delivery{grid-template-columns:1fr}.developer-delivery-copy{padding:28px}.developer-delivery pre{margin:0 16px 16px}.delivery-interfaces{grid-column:1}.template-cta-box{align-items:flex-start;flex-direction:column;padding:26px}.template-footer-grid{grid-template-columns:1fr 1fr}.template-footer-grid .footer-brand{grid-column:1/-1}}
@media(prefers-reduced-motion:reduce){a.home-btn::after,.template-platform-grid a::after,.template-home .trend-page-link svg{transition:none}.route-loading > span{animation:none}}

/* Dedicated global + location trend view. The page is server-rendered HTML;
   only the two live lists hydrate in the browser. */
.trending-page{background:var(--paper);color:var(--ink)}
.trend-page-main{display:block}
.trend-page-hero{padding:76px 0 46px}
.trend-page-hero h1{max-width:16ch;margin:8px 0 18px;font-size:var(--display-size);font-weight:700;line-height:var(--display-line);letter-spacing:var(--display-track);text-wrap:balance}
.trend-page-hero p{max-width:650px;font-size:17px;line-height:1.65;color:var(--ink-soft)}
.trend-page-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;align-items:start;padding-bottom:82px}
.trend-page-panel{min-width:0;border:1px solid var(--line);border-radius:16px;overflow:hidden;background:var(--panel)}
.trend-page-panel-head{min-height:112px;display:flex;align-items:flex-start;justify-content:space-between;gap:20px;padding:24px;border-bottom:1px solid var(--line)}
.trend-page-panel-head h2{margin:8px 0 0;font-size:24px;line-height:1.15;letter-spacing:-.025em}
.trend-page-kicker,.live-status,.trend-page-status{display:inline-flex;align-items:center;border-radius:999px;font:700 10px/1.4 var(--mono);letter-spacing:.05em;text-transform:uppercase}
.trend-page-kicker{padding:5px 9px;border:1px solid var(--line);background:var(--band);color:var(--ink-faint)}
.live-status{gap:6px;padding:5px 9px;border:1px solid var(--danger-line);background:var(--danger-wash);color:var(--danger)}
.live-status i{width:6px;height:6px;border-radius:50%;background:currentColor}
.trend-page-row{min-height:124px;display:grid;grid-template-columns:38px minmax(0,1fr) auto;gap:14px;align-items:start;padding:18px;border-bottom:1px solid var(--line);color:inherit;text-decoration:none}
.trend-page-row:hover{background:var(--band)}
.trend-page-row:last-child{border-bottom:0}.trend-page-row .rank{margin-top:3px;font:500 10.5px/1.4 var(--mono);color:var(--ink-faint)}
.trend-page-copy{min-width:0}.trend-page-row strong{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:15.5px;letter-spacing:-.01em}
.trend-page-meta{display:flex;align-items:center;min-width:0;gap:7px;margin-top:5px;font:500 10.5px/1.4 var(--mono);color:var(--ink-faint)}
.trend-page-meta span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.trend-page-meta i{width:3px;height:3px;border-radius:50%;background:var(--line);flex:none}
.trend-page-copy p{display:-webkit-box;overflow:hidden;-webkit-box-orient:vertical;-webkit-line-clamp:2;max-width:58ch;margin:9px 0 0;font-size:12.5px;line-height:1.5;color:var(--ink-soft)}
.trend-page-status{align-self:start;padding:5px 8px;border:1px solid var(--line);background:var(--band);color:var(--ink-soft);white-space:nowrap}
.trend-page-list > .tempty{padding:24px}.trend-page-gate{min-height:310px;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;padding:34px}.trend-page-gate h3{margin:0;font-size:22px}.trend-page-gate p{max-width:42ch;margin:10px 0 22px;font-size:13px;line-height:1.6;color:var(--ink-soft)}
.trend-page-note{display:grid;grid-template-columns:.8fr 1.2fr;gap:60px;align-items:start;margin-bottom:82px;padding:34px;border:1px solid var(--line);border-radius:16px;background:var(--band)}
.trend-page-note h2{margin:0;font-size:28px}.trend-page-note p{margin:0;font-size:14px;line-height:1.7;color:var(--ink-soft)}
@media(max-width:820px){.trend-page-grid,.trend-page-note{grid-template-columns:1fr}.trend-page-hero{padding:56px 0 36px}.trend-page-grid{padding-bottom:60px}.trend-page-note{gap:20px;margin-bottom:60px;padding:24px}}
@media(max-width:460px){.trend-page-row{min-height:146px;grid-template-columns:28px minmax(0,1fr);gap:10px;padding:16px 14px}.trend-page-status{grid-column:2;width:max-content;margin-top:0}.trend-page-panel-head{min-height:104px;padding:20px}.trend-page-gate{min-height:250px;padding:24px}}

/* Malicious-package intelligence uses the same 1220px editorial grid and
   restrained rounded surfaces as /trending. The package coordinate—not a
   vulnerability score—is the primary object on both the list and detail page. */
.malicious-page{background:var(--paper);color:var(--ink)}
.malicious-page-grid{display:grid;grid-template-columns:minmax(0,1.65fr) minmax(280px,.7fr);gap:18px;align-items:start;padding-bottom:28px}
.malicious-feed-panel{min-width:0}
.malicious-page-row{min-height:118px}
.malicious-status{border-color:var(--danger-line);background:var(--danger-wash);color:var(--danger-ink)}
.malicious-page-brief{padding:28px;border:1px solid var(--line);border-radius:16px;background:var(--panel)}
.malicious-page-brief h2{margin:0;font-size:26px;line-height:1.12;letter-spacing:-.03em}
.malicious-page-brief p{margin:13px 0 0;font-size:14px;line-height:1.65;color:var(--ink-soft)}
.malicious-page-brief ol{display:grid;gap:10px;margin:22px 0 0;padding:20px 0 0 22px;border-top:1px solid var(--line);font-size:13px;line-height:1.5;color:var(--ink-soft)}
.malicious-page .trend-page-link{display:inline-flex;align-items:center;gap:7px;min-height:44px;margin-top:20px;font:700 11px/1.4 var(--mono);color:var(--danger);text-decoration:none}
.malicious-page .trend-page-link svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;transition:transform .18s cubic-bezier(.22,1,.36,1)}
.malicious-page .trend-page-link:hover span{text-decoration:underline;text-underline-offset:4px}
.malicious-page .trend-page-link:hover svg{transform:translateX(3px)}
.malicious-page-pager{min-height:66px;display:flex;align-items:center;justify-content:space-between;gap:14px;padding:14px 18px;border-top:1px solid var(--line)}
.malicious-page-pager:empty{display:none}
.malicious-page-pager button{min-height:38px;padding:8px 14px;border:1px solid var(--line);border-radius:999px;background:var(--panel);color:var(--ink);font:700 11px/1.4 var(--mono);cursor:pointer}
.malicious-page-pager button:hover:not(:disabled){border-color:var(--ink-faint);background:var(--band)}
.malicious-page-pager button:disabled{opacity:.38;cursor:not-allowed}
.malicious-page-pager .pinfo{font:500 10.5px/1.4 var(--mono);color:var(--ink-faint);text-align:center}
.malicious-page .trend-page-note{margin-top:0}
@media(max-width:820px){.malicious-page-grid{grid-template-columns:1fr;padding-bottom:18px}.malicious-page-brief{padding:24px}}
@media(max-width:520px){.malicious-page-pager{flex-wrap:wrap}.malicious-page-pager .pinfo{width:100%;order:-1}.malicious-page-row{min-height:148px}}
@media(prefers-reduced-motion:reduce){.malicious-page .trend-page-link svg{transition:none}}

/* Dedicated MAL record: no EPSS, CVSS, KEV, exploitation ladder, or decision
   tuner. The page answers which package, what the source says, and what to do. */
.mal-detail-grid{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:18px;align-items:start}
.mal-detail-main{display:grid;gap:18px;min-width:0}
.mal-package-hero,.mal-response,.mal-package-facts{border:1px solid var(--line);border-radius:16px;background:var(--panel)}
.mal-package-hero{padding:32px}
.mal-package-state{display:flex;align-items:center;gap:8px;font:700 10.5px/1.4 var(--mono);letter-spacing:.07em;text-transform:uppercase;color:var(--danger)}
.mal-package-state span{width:8px;height:8px;border-radius:50%;background:currentColor}
.mal-package-hero h1{max-width:18ch;margin:18px 0 12px;font-size:clamp(36px,5vw,62px);line-height:1;letter-spacing:-.04em;overflow-wrap:anywhere}
.mal-package-hero h1 a{color:inherit;text-decoration-color:transparent;text-decoration-thickness:2px;text-underline-offset:7px;transition:color .16s ease,text-decoration-color .16s ease}
.mal-package-hero h1 a:hover{color:var(--danger-ink);text-decoration-color:currentColor}
.mal-package-hero h1 a:focus-visible{outline:3px solid var(--danger-line);outline-offset:6px;border-radius:4px}
.mal-package-lede{max-width:66ch;margin:0;font-size:16px;line-height:1.65;color:var(--ink-soft)}
.mal-package-context{max-width:68ch;margin:22px 0 0;padding-top:20px;border-top:1px solid var(--line);font-size:13.5px;line-height:1.65;color:var(--ink)}
.mal-response{padding:28px 30px}
.mal-response h2,.mal-package-facts h2{margin:0;font-size:22px;line-height:1.15;letter-spacing:-.025em}
.mal-response ol{display:grid;gap:0;margin:22px 0 0;padding:0;list-style:none;counter-reset:mal-response}
.mal-response li{counter-increment:mal-response;display:grid;grid-template-columns:34px minmax(0,1fr);gap:3px 10px;padding:16px 0;border-top:1px solid var(--line)}
.mal-response li::before{content:counter(mal-response,decimal-leading-zero);grid-row:1/3;font:600 10.5px/1.5 var(--mono);color:var(--ink-faint)}
.mal-response li strong{font-size:14px}
.mal-response li span{font-size:13px;line-height:1.55;color:var(--ink-soft)}
.mal-package-facts{position:sticky;top:18px;padding:26px}
.mal-fact-group + dl,.mal-package-facts dl + .mal-fact-group{margin-top:24px;padding-top:22px;border-top:1px solid var(--line)}
.mal-package-facts h2{font-size:17px}
.mal-coordinate{display:grid;gap:4px;margin-top:14px;padding:13px 14px;border:1px solid transparent;border-radius:12px;background:var(--band);color:inherit;text-decoration:none;transition:border-color .16s ease,background .16s ease}
.mal-coordinate:hover{border-color:var(--line);background:var(--paper)}
.mal-coordinate:focus-visible{outline:3px solid var(--danger-line);outline-offset:3px}
.mal-coordinate strong{font:700 13px/1.4 var(--mono);overflow-wrap:anywhere}
.mal-coordinate span{font:500 10.5px/1.4 var(--mono);color:var(--ink-faint)}
.mal-package-facts dl{display:grid;gap:0;margin:0}
.mal-package-facts dl div{display:grid;grid-template-columns:100px minmax(0,1fr);gap:12px;padding:11px 0;border-bottom:1px solid var(--line)}
.mal-package-facts dl div:last-child{border-bottom:0}
.mal-package-facts dt{font:500 10.5px/1.4 var(--mono);color:var(--ink-faint)}
.mal-package-facts dd{margin:0;font:600 11px/1.4 var(--mono);text-align:right;overflow-wrap:anywhere}
.mal-aliases{display:flex;flex-wrap:wrap;gap:7px;margin-top:13px}
.mal-aliases a{display:inline-flex;align-items:center;min-height:34px;padding:5px 10px;border:1px solid var(--line);border-radius:999px;background:var(--band);color:var(--ink);font:600 10px/1.4 var(--mono);text-decoration:none}
.mal-aliases a:hover{border-color:var(--ink-faint);background:var(--paper)}
.mal-aliases a:focus-visible{outline:3px solid var(--danger-line);outline-offset:3px}
.mal-empty-fact{margin:12px 0 0;font-size:12.5px;line-height:1.55;color:var(--ink-soft)}
.mal-back-link{display:inline-flex;margin-top:24px;font:700 11px/1.4 var(--mono);color:var(--danger);text-decoration:none}
.mal-back-link:hover{text-decoration:underline;text-underline-offset:4px}
@media(max-width:880px){.mal-detail-grid{grid-template-columns:1fr}.mal-package-facts{position:static}.mal-package-hero{padding:26px}.mal-response{padding:24px}}
@media(max-width:520px){.mal-package-hero h1{font-size:38px}.mal-package-facts dl div{grid-template-columns:1fr;gap:4px}.mal-package-facts dd{text-align:left}.mal-aliases a{min-height:44px;padding-inline:12px}}
@media(pointer:coarse){.mal-aliases a{min-height:44px;padding-inline:12px}}
@media(prefers-reduced-motion:reduce){.mal-package-hero h1 a,.mal-coordinate{transition:none}}

/* Result-page controls use one restrained enterprise palette. Signal colour
   belongs to evidence and status, while interactive filters stay neutral until
   selected. This keeps a dense result set from reading like a wall of alerts. */
body.result-route .fchip,
body.result-route .fchip.hot,
body.result-route .fchip.warm,
body.result-route .dfilter,
body.result-route .dfilter.immediate,
body.result-route .dfilter.ooc,
body.result-route .dfilter.scheduled,
body.result-route .dfilter.defer,
body.result-route .ichip.pivot,
body.result-route .ichip.pivot.actor,
body.result-route .ichip.pivot.tool,
body.result-route .ichip.pivot.tech{
  border-color:var(--line);background:var(--panel);color:var(--ink-soft);box-shadow:none;
}
body.result-route .fchip:not(.passive):hover,
body.result-route .dfilter:hover,
body.result-route .ichip.pivot:hover,
body.result-route .pager button:hover:not(:disabled){
  border-color:var(--ink-faint);background:var(--band);color:var(--ink);transform:none;
}
body.result-route .fchip.on,
body.result-route .fchip.hot.on,
body.result-route .fchip.warm.on,
body.result-route .dfilter.on,
body.result-route .dfilter.immediate.on,
body.result-route .dfilter.ooc.on,
body.result-route .dfilter.scheduled.on,
body.result-route .dfilter.defer.on{
  border-color:var(--sov);background:var(--sov);color:var(--sov-ink);
}
body.result-route .fchip.clear{border-style:solid;color:var(--ink-faint)}
body.result-route .fchip.clear:hover{border-color:var(--ink-faint);background:var(--band);color:var(--ink)}
body.result-route .section-label{
  display:block;min-height:0;margin:0 0 14px;padding:0 0 10px;
  border:0;border-bottom:1px solid var(--line);border-radius:0;
  background:transparent;color:var(--ink);letter-spacing:.08em;
}
body.result-route .advice,
body.result-route .advice.calm{
  color:var(--ink-soft);background:var(--band);border-color:var(--line);
  border-inline-start-color:var(--line);
}
body.result-route .advice b{color:var(--ink)}

/* ── Site notice (analytics consent) ───────────────────────────────────────────────────────────
   Shown once, until a choice is stored. Deliberately quiet: it is a
   housekeeping question, not a finding, so it uses the panel surface and the
   ordinary line colour rather than the accent this design reserves for
   critical signals. */
#site-notice{
  position:fixed;inset-inline:0;bottom:0;z-index:80;
  display:flex;align-items:center;justify-content:center;gap:18px;flex-wrap:wrap;
  padding:12px 20px;background:var(--panel);border-top:1px solid var(--line);
  box-shadow:0 -6px 20px rgba(20,24,28,.06);
}
#site-notice p{margin:0;font-family:var(--sans);font-size:13px;color:var(--ink-soft);max-width:70ch}
.notice-actions{display:flex;gap:8px;flex:none}
#site-notice button{
  font-family:var(--sans);font-size:13px;font-weight:600;cursor:pointer;
  padding:6px 16px;border-radius:var(--radius);border:1px solid var(--line);
  background:var(--panel);color:var(--ink);transition:border-color .12s ease,color .12s ease;
}
#site-notice button:hover{border-color:var(--ink-faint)}
#site-notice .notice-accept{background:var(--ink);border-color:var(--ink);color:var(--paper)}
#site-notice .notice-accept:hover{opacity:.88}
@media (max-width:720px){
  #site-notice{gap:10px;padding:12px 16px;justify-content:flex-start}
  #site-notice p{font-size:12.5px}
  .notice-actions{width:100%}
  #site-notice button{flex:1}
}

/* ── Request-access floating panel ─────────────────────────────────────────
   A site-wide modal (styles here, logic in session.js) opened by any
   [data-request-access] trigger — the CVE upsell blocks, the usage page, the
   account plan. Self-contained: index.html does not load auth.css, so this
   cannot lean on .field / .btn-primary and defines its own. */
.ra-overlay{
  position:fixed;inset:0;z-index:200;display:none;
  align-items:center;justify-content:center;padding:20px;
  background:rgba(20,21,15,.44);
}
.ra-overlay.on{display:flex}
.ra-panel{
  position:relative;width:100%;max-width:460px;max-height:calc(100vh - 40px);overflow-y:auto;
  background:var(--panel);border:1px solid var(--line);border-radius:6px;
  box-shadow:0 20px 60px rgba(20,24,28,.28);padding:30px 32px;
}
@media (prefers-reduced-motion:no-preference){
  .ra-overlay.on .ra-panel{animation:ra-rise .16s ease}
}
@keyframes ra-rise{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.ra-close{
  position:absolute;top:12px;right:14px;border:0;background:none;cursor:pointer;
  font-size:22px;line-height:1;color:var(--ink-faint);padding:4px;
}
.ra-close:hover{color:var(--ink)}
.ra-eyebrow{
  display:inline-block;font-family:var(--mono);font-size:11px;font-weight:600;
  letter-spacing:.12em;text-transform:uppercase;color:var(--ink-faint);
  border:1px solid var(--line);border-radius:3px;padding:3px 9px;margin-bottom:12px;
}
.ra-panel h2{font-family:var(--sans);font-size:20px;font-weight:700;color:var(--ink);margin:0 0 10px}
.ra-lead{font-size:14px;color:var(--ink-soft);line-height:1.55;margin:0 0 16px}
.ra-who{
  font-family:var(--mono);font-size:12px;color:var(--ink-faint);
  background:var(--band);border-radius:var(--radius);padding:9px 12px;margin:0 0 16px;
}
.ra-field{margin-bottom:14px}
.ra-field label{display:block;font-family:var(--mono);font-size:11px;font-weight:600;
  letter-spacing:.06em;text-transform:uppercase;color:var(--ink-faint);margin-bottom:6px}
.ra-field select,.ra-field textarea{
  width:100%;border:1.5px solid var(--line);border-radius:var(--radius);
  background:var(--paper);font-family:var(--mono);font-size:14px;color:var(--ink);
  padding:10px 12px;outline:0;transition:border-color .12s ease,box-shadow .12s ease;
}
.ra-field textarea{resize:vertical;min-height:76px;line-height:1.5}
.ra-field select:focus,.ra-field textarea:focus{border-color:var(--ink);box-shadow:0 0 0 4px var(--danger-wash)}
.ra-submit{
  width:100%;margin-top:6px;border:0;border-radius:var(--radius);cursor:pointer;
  background:var(--danger);color:#fff;font-family:var(--sans);font-size:13.5px;
  font-weight:700;letter-spacing:.05em;text-transform:uppercase;padding:13px 0;
  transition:background .12s ease;
}
.ra-submit:hover{background:var(--danger-ink)}
.ra-submit:disabled{opacity:.55;cursor:default}
.ra-notice{font-size:13.5px;line-height:1.5;margin-top:14px}
.ra-notice.err{color:var(--danger)}
.ra-notice.ok{color:var(--ink-soft)}
.ra-signedout a{color:var(--danger);font-weight:600;text-decoration:none}
.ra-signedout a:hover{text-decoration:underline}
/* The trigger button used inside upsell blocks and the usage page. */
.request-access-btn{
  display:inline-block;margin-top:4px;border:1px solid var(--danger-line);
  background:var(--danger-wash);color:var(--danger-ink);cursor:pointer;
  font-family:var(--sans);font-size:13px;font-weight:600;
  padding:7px 15px;border-radius:var(--radius);transition:all .12s ease;
}
.request-access-btn:hover{background:var(--danger);color:#fff;border-color:var(--danger)}

/* ── Loud one-time trial-consent panel (session.js) ────────────────────────
   The ONE loud trial surface - the quiet chip governs the ongoing state. No
   close button: the user accepts or declines, and both persist server-side. */
.trial-lock{overflow:hidden}
.trial-overlay{
  position:fixed;inset:0;z-index:300;display:flex;
  align-items:center;justify-content:center;padding:20px;
  background:rgba(20,21,15,.55);backdrop-filter:blur(2px);
}
.trial-panel{
  position:relative;width:100%;max-width:480px;max-height:calc(100vh - 40px);overflow-y:auto;
  background:var(--panel);border:1px solid var(--line);border-radius:8px;
  box-shadow:0 24px 70px rgba(20,24,28,.34);padding:32px 34px;
  border-top:5px solid var(--danger);
}
@media (prefers-reduced-motion:no-preference){
  .trial-overlay .trial-panel{animation:ra-rise .18s ease}
}
.trial-eyebrow{
  display:inline-block;font-family:var(--mono);font-size:11px;font-weight:700;
  letter-spacing:.12em;text-transform:uppercase;color:var(--danger);
  background:var(--danger-wash);border:1px solid var(--danger-line);
  border-radius:999px;padding:3px 11px;margin-bottom:14px;
}
.trial-title{
  font-family:var(--sans);font-size:23px;font-weight:800;line-height:1.15;
  letter-spacing:-.01em;color:var(--ink);margin:0 0 12px;
}
.trial-lead{font-size:14.5px;color:var(--ink-soft);line-height:1.6;margin:0 0 20px}
.trial-check{
  display:flex;align-items:flex-start;gap:10px;cursor:pointer;
  font-size:13.5px;color:var(--ink);line-height:1.45;
  background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);
  padding:12px 14px;margin-bottom:18px;
}
.trial-check input{margin-top:2px;width:16px;height:16px;flex:none;accent-color:var(--danger);cursor:pointer}
.trial-actions{display:flex;flex-direction:column;gap:10px}
.trial-accept{
  width:100%;border:0;border-radius:var(--radius);cursor:pointer;
  background:var(--danger);color:#fff;font-family:var(--sans);font-size:14px;
  font-weight:700;letter-spacing:.04em;text-transform:uppercase;padding:14px 0;
  transition:background .12s ease;
}
.trial-accept:hover{background:var(--danger-ink)}
.trial-accept:disabled{opacity:.5;cursor:default}
.trial-decline{
  width:100%;border:0;background:none;cursor:pointer;
  font-family:var(--sans);font-size:13px;font-weight:600;color:var(--ink-faint);
  padding:6px 0;transition:color .12s ease;
}
.trial-decline:hover{color:var(--ink)}
.trial-decline:disabled{opacity:.5;cursor:default}
.trial-msg{font-size:13px;color:var(--danger);margin-top:12px;min-height:1px;text-align:center}

/* ── Gated plan features (CVE page) ────────────────────────────────────────
   Lists only endpoints the caller's tier cannot reach. It never varies based
   on hidden intelligence inside the current CVE. */
.intel-locked{
  margin-top:14px;padding:14px 16px;border:1px solid var(--line);
  border-radius:var(--radius);background:var(--band);
}
.il-head{
  display:flex;align-items:center;gap:8px;
  font-family:var(--sans);font-size:13px;font-weight:700;color:var(--ink);
}
.il-lock{
  width:11px;height:9px;flex:none;border-radius:2px;background:var(--danger);
  position:relative;box-shadow:0 0 0 2px var(--danger-wash);
}
.il-lock::before{
  content:"";position:absolute;left:2.5px;top:-4px;width:6px;height:6px;
  border:1.5px solid var(--danger);border-bottom:0;border-radius:3px 3px 0 0;
}
.il-sub{font-size:12.5px;color:var(--ink-soft);line-height:1.5;margin:6px 0 10px}
.il-rows{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:12px}
.il-cat{
  font-family:var(--mono);font-size:11.5px;color:var(--ink-faint);
  background:var(--panel);border:1px solid var(--line);border-radius:3px;
  padding:3px 9px;position:relative;padding-left:20px;
}
/* A tiny lock glyph on each category, so "locked" reads without a wall of text. */
.il-cat::before{
  content:"";position:absolute;left:8px;top:50%;transform:translateY(-50%);
  width:6px;height:5px;background:var(--ink-mute);border-radius:1px;
}
.il-cat::after{
  content:"";position:absolute;left:9.5px;top:calc(50% - 5px);width:3px;height:4px;
  border:1px solid var(--ink-mute);border-bottom:0;border-radius:2px 2px 0 0;
}

/* Panel field hint — mirrors auth.css .hint, since the panel is styled from
   home.css (index doesn't load auth.css). */
.ra-hint{font-size:11.5px;color:var(--ink-faint);margin-top:5px}

/* CSP UTILITIES. The site is served under `style-src 'self'` with no
   'unsafe-inline', so a style="..." attribute in markup is DROPPED BY THE
   BROWSER — silently, with only a console violation to show for it. That made
   every style="display:none" a visible element and every style="width:N%" a
   full-width bar. These replace them.
   Note .style.x = y from JavaScript is NOT affected: CSSOM assignment is not
   what style-src governs, which is why the bugs only ever showed in markup. */
.u-nodec{text-decoration:none}
.u-hide{display:none}
.u-mono12{font-family:var(--mono);font-size:12px}
.u-narrow{max-width:760px;margin:0 auto;padding:28px 20px}

/* Application and utility results share the same outer grid as the canonical
   header. Narrow pages constrain their children instead of centering a second,
   unrelated page shell. */
.result,
main.result.u-narrow{
  width:min(calc(100% - 40px),var(--page-max));max-width:none;
  margin-inline:auto;padding-inline:0;
}
main.result.u-narrow > *{width:min(100%,760px)}
@media(max-width:980px){
  .result,
  main.result.u-narrow{width:calc(100% - 24px)}
}