/* SecurityAlert.ai — Redesign design system
   --------------------------------------------------------------------
   Light DSPM-console aesthetic (Cyera-style). Cool near-white grounds,
   white cards with soft borders, near-black ink, monochrome chrome with
   colour reserved for data. Light-only: the dark theme was removed.

   Tokens are asserted at :root so they override modern-base.css site-wide.
   Modern-base.css is loaded before redesign.css in head-common.php and
   dashboard-head.php, so this :root block wins. Page-specific CSS that
   reads var(--bg), var(--ink), etc. resolves to the light values here. */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Instrument+Serif:ital@1&family=JetBrains+Mono:wght@400;500;600&display=swap');

:root {
  /* Cyera-style light system. Cool near-white grounds, near-black ink,
     monochrome chrome (black buttons / grey active states) with colour
     reserved for data (charts + semantic severity). Blue links, teal for
     positive/coverage. Every token NAME is preserved so page CSS that reads
     var(--bg), var(--ink), var(--accent), etc. flips automatically. */
  --bg:        #F7F8FA;
  --bg-1:      #FFFFFF;
  --bg-2:      #F3F4F6;
  --surface:   #FFFFFF;
  --surface-2: #F3F4F6;
  --line:      rgba(20,22,26,0.08);
  --line-2:    rgba(20,22,26,0.12);
  --line-3:    rgba(20,22,26,0.18);
  --ink:       #14161A;
  --ink-2:     #4B5563;
  --ink-3:     #6B7280;
  --ink-4:     #9AA1AC;
  --accent:    #14161A;
  --accent-1:  #000000;
  --accent-2:  #2A2D33;
  --accent-soft: rgba(20,22,26,0.06);
  --accent-line: rgba(20,22,26,0.22);
  --ok:        #0E9F6E;
  --warn:      #B45309;
  --sev-high:  #EA580C;
  --danger:    #DC2626;
  --info:      #2563EB;
  --link:      #2563EB;
  --teal:      #14B8A6;

  --sans: 'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  --r-sm: 8px;
  --r-md: 10px;
  --r-lg: 12px;

  /* Compatibility aliases for modern-base.css token names so existing
     page-specific CSS keeps working with the light palette without
     needing a rewrite of every selector. */
  --bg-primary:    #F7F8FA;
  --bg-secondary:  #FFFFFF;
  --bg-tertiary:   #F3F4F6;
  --bg-elevated:   #FFFFFF;
  --text-primary:  #14161A;
  --text-secondary:#4B5563;
  --text-tertiary: #6B7280;
  --border-color:  rgba(20,22,26,0.12);
  --border-light:  rgba(20,22,26,0.08);
  --shadow-color:  rgba(16,24,40,0.10);
  --accent-hover:  #000000;
  --accent-light:  #2A2D33;
  --accent-ink:    #14161A;

  /* Completion tokens (defined here too so dashboard pages, which load only
     redesign.css and not modern-base.css, still get a full light palette). */
  --surface-3:     #EDEEF1;
  --accent-subtle: rgba(20,22,26,0.06);
  --border-subtle: rgba(20,22,26,0.08);
  --success:       #0E9F6E;
  --success-light: #16A97A;
  --error:         #DC2626;
  --error-text:    #DC2626;
  --purple:        #6366F1;
  --purple-light:  #818CF8;
  --status-operational: #0E9F6E;
  --status-degraded:    #B45309;
  --status-partial:     #EA580C;
  --status-major:       #DC2626;
  --status-maintenance: #2563EB;
  --status-unknown:     #6B7280;
}

body {
  margin: 0;
  font-family: var(--sans);
  font-size: 15px;
  background: var(--bg);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  letter-spacing: -0.005em;
  overflow-x: hidden;
}
body * { box-sizing: border-box; }

/* selection */
::selection { background: var(--accent-soft); color: var(--ink); }

/* utility */
.mono { font-family: var(--mono); }
.eyebrow {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-3);
  font-weight: 500;
}
.divider { height: 1px; background: var(--line); width: 100%; }
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 16px;
  border-radius: var(--r-sm);
  font: 500 14px/1 var(--sans);
  letter-spacing: -0.005em;
  text-decoration: none;
  cursor: pointer;
  border: 1px solid transparent;
  transition: all 120ms ease;
  white-space: nowrap;
}
.btn-primary {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
  box-shadow: 0 1px 2px rgba(16,24,40,0.10);
}
.btn-primary:hover {
  background: var(--accent-1);
  transform: translateY(-1px);
}
.btn-ghost {
  background: transparent;
  color: var(--ink);
  border-color: var(--line-2);
}
.btn-ghost:hover {
  border-color: var(--line-3);
  background: var(--surface);
}
.btn-sm { padding: 7px 12px; font-size: 13px; }
.btn:active { transform: scale(0.98); transition-duration: 50ms; }
.btn:disabled, .btn.disabled { opacity: 0.5; cursor: not-allowed; pointer-events: none; }
.btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Field tag — small mono pill used everywhere */
.tag {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 8px;
  font: 500 10.5px/1 var(--mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border: 1px solid var(--line-2);
  border-radius: 999px;
  color: var(--ink-2);
  background: var(--surface);
}
.tag-accent {
  border-color: var(--accent-line);
  color: var(--accent-1);
  background: var(--accent-soft);
}
.tag-ok    { color: var(--ok);    border-color: oklch(72% 0.16 152 / 0.35); }
.tag-warn  { color: var(--warn);  border-color: oklch(78% 0.15 75 / 0.35); }
.tag-danger{ color: var(--danger);border-color: color-mix(in srgb, var(--danger) 36%, transparent); background: color-mix(in srgb, var(--danger) 8%, var(--surface)); }

/* container */
.wrap { width: 100%; max-width: 1280px; margin: 0 auto; padding: 0 32px; }
@media (max-width: 720px) { .wrap { padding: 0 20px; } }

/* announce bar — driven by data/whats-new.json, dismissible per message */
.announce-bar {
  background: linear-gradient(90deg, color-mix(in srgb, var(--info) 12%, var(--bg)) 0%, color-mix(in srgb, var(--info) 6%, var(--bg)) 100%);
  border-bottom: 1px solid color-mix(in srgb, var(--info) 30%, var(--line-2));
  font-size: 13px;
  color: var(--ink);
}
.announce-bar-inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 8px 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  flex-wrap: wrap;
}
@media (max-width: 720px) {
  .announce-bar-inner { padding: 8px 16px; gap: 8px; font-size: 12.5px; }
}
.announce-bar-text {
  color: var(--ink);
  font-weight: 500;
  letter-spacing: -0.005em;
}
.announce-bar-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--accent-1);
  text-decoration: none;
  font-weight: 500;
  letter-spacing: -0.005em;
}
.announce-bar-link:hover { text-decoration: underline; }
.announce-bar-dismiss {
  background: transparent;
  border: 0;
  color: var(--ink-3);
  cursor: pointer;
  font: 500 18px/1 var(--sans);
  padding: 0 6px;
  margin-left: 4px;
  line-height: 1;
}
.announce-bar-dismiss:hover { color: var(--ink); }

/* nav */
.nav {
  position: sticky; top: 0; z-index: 30;
  background: color-mix(in srgb, var(--bg) 78%, transparent);
  -webkit-backdrop-filter: saturate(160%) blur(16px);
  backdrop-filter: saturate(160%) blur(16px);
  border-bottom: 1px solid var(--line);
}
.nav-inner {
  display: flex; align-items: center; gap: 24px;
  height: 64px;
  max-width: 1440px;
}
.nav-inner > .logo,
.nav-inner > .nav-links,
.nav-inner > .nav-utility { flex-shrink: 0; }
.nav-links {
  display: flex; align-items: stretch; gap: 22px;
  height: 100%; margin-left: 8px;
}
.nav-links a {
  color: var(--ink-2); text-decoration: none;
  font-size: 14.5px; font-weight: 500;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 0;
  position: relative;
  white-space: nowrap;
}
.nav-links > a { height: 100%; }
.nav-links a:hover { color: var(--ink); }
.nav-links a.is-active { color: var(--ink); }
.nav-links a.is-active::after {
  content: ''; position: absolute; bottom: 0; left: 0; right: 0;
  height: 1px; background: var(--accent);
}

/* Dropdown menu inside .nav-links — used for "Threat intel". The trigger
   matches the styling of regular .nav-links a so the rhythm reads right;
   the panel is positioned absolutely below it. Opens on hover (desktop)
   and on click (any device — JS toggles .is-open). */
.nav-menu { position: relative; display: flex; align-items: stretch; height: 100%; }
.nav-menu-trigger {
  background: transparent; border: 0; cursor: pointer; appearance: none;
  font-family: inherit;
  color: var(--ink-2);
  font-size: 13.5px; font-weight: 500;
  display: inline-flex; align-items: center; gap: 4px;
  padding: 0;
  position: relative;
  white-space: nowrap;
}
.nav-menu-trigger:hover { color: var(--ink); }
.nav-menu-trigger.is-active { color: var(--ink); }
.nav-menu-trigger.is-active::after {
  content: ''; position: absolute; bottom: 0; left: 0; right: 14px;
  height: 1px; background: var(--accent);
}
.nav-menu-chev {
  color: var(--ink-3);
  transition: transform 150ms;
  flex-shrink: 0;
}
.nav-menu.is-open .nav-menu-chev,
.nav-menu:hover .nav-menu-chev { transform: rotate(180deg); color: var(--ink-2); }

.nav-menu-panel {
  position: absolute;
  top: calc(100% + 14px);
  left: -10px;
  min-width: 200px;
  padding: 6px;
  background: var(--bg-2);
  border: 1px solid var(--line-2);
  border-radius: var(--r-md);
  box-shadow: 0 10px 30px -12px rgba(16,24,40,0.14);
  opacity: 0;
  pointer-events: none;
  transform: translateY(-4px);
  transition: opacity 120ms ease, transform 120ms ease;
  z-index: 50;
}
.nav-menu:hover .nav-menu-panel,
.nav-menu:focus-within .nav-menu-panel,
.nav-menu.is-open .nav-menu-panel {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

/* Keep the gap between trigger and panel hover-friendly so the cursor
   doesn't leave the hoverable region when crossing. */
.nav-menu-panel::before {
  content: '';
  position: absolute;
  top: -14px; left: 0; right: 0;
  height: 14px;
}

/* Specificity bump: .nav-links a sets display:inline-flex which would
   otherwise win against a flat .nav-menu-item rule. Scoping under the
   panel pushes us to 0,2,1 and we render block. */
.nav-menu-panel .nav-menu-item {
  display: block;
  padding: 8px 12px;
  border-radius: 6px;
  color: var(--ink-2);
  text-decoration: none;
  font-size: 13.5px;
  font-weight: 500;
  letter-spacing: -0.005em;
  transition: background 100ms, color 100ms;
}
.nav-menu-panel .nav-menu-item:hover { background: var(--surface); color: var(--ink); }
/* Cancel the .nav-links a.is-active underline if it ever sneaks in here. */
.nav-menu-panel .nav-menu-item.is-active::after { display: none; }

.nav-spacer { flex: 1 1 auto; min-width: 0; }
.nav-utility { display: flex; align-items: center; gap: 10px; white-space: nowrap; }
.nav-search {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 10px; height: 32px;
  border: 1px solid var(--line-2);
  background: var(--surface);
  border-radius: 6px;
  color: var(--ink-3);
  font: 500 12px/1 var(--mono);
  cursor: pointer;
  width: 266px;
  min-width: 220px;
  white-space: nowrap;
  overflow: hidden;
}
.nav-search > span:first-of-type { overflow: hidden; text-overflow: ellipsis; }
.nav-search .ico { flex: 0 0 auto; }
.nav-search:hover { border-color: var(--line-3); color: var(--ink-2); }
.nav-search .kbd {
  margin-left: auto;
  font: 500 10px/1 var(--mono);
  padding: 3px 6px;
  border: 1px solid var(--line-2);
  border-radius: 4px;
  color: var(--ink-3);
}

@media (max-width: 1400px) {
  .nav-inner { gap: 16px; }
  .nav-links { gap: 16px; margin-left: 0; }
  .nav-search {
    width: 40px; min-width: 40px; padding: 0;
    justify-content: center;
  }
  .nav-search > span { display: none; }
}

@media (max-width: 1180px) {
  .nav-links { display: none; }
}

@media (max-width: 900px) {
  .nav-search { display: none; }
}

@media (max-width: 640px) {
  .nav-inner { gap: 8px; }
  .nav-utility { gap: 6px; }
  .nav-dashboard-label { display: none; }
  .nav #btn-dashboard-go {
    width: 40px; height: 40px; padding: 0;
    justify-content: center;
  }
  .nav .user-menu-trigger { padding: 6px !important; }
  .nav .user-menu-trigger #user-name { display: none !important; }
}

@media (max-width: 380px) {
  .nav .logo-word { display: none; }
}

/* ─── Logo ─── */
.logo {
  display: inline-flex; align-items: center; gap: 10px;
  text-decoration: none; color: var(--ink);
}
.logo-mark { width: 26px; height: 26px; flex: 0 0 26px; }
.logo-word {
  font: 700 16px/1 var(--sans);
  letter-spacing: -0.025em;
}
.logo-word .dim { color: var(--ink-3); font-weight: 500; }

/* ─── HOME ─── */
.hero {
  position: relative;
  padding: 96px 0 64px;
  overflow: hidden;
}
.hero-grid-bg { display: none; }
.hero-eyebrow-row {
  display: inline-flex; align-items: center; gap: 12px;
  margin-bottom: 24px;
  position: relative; z-index: 2;
}
.hero h1 {
  font: 600 clamp(44px, 5.4vw, 76px)/0.98 var(--sans);
  letter-spacing: -0.035em;
  margin: 0 0 22px;
  max-width: 18ch;
  position: relative; z-index: 2;
  text-wrap: balance;
}
.hero h1 .acc { color: inherit; }
.hero h1 .em { font-style: normal; font-weight: inherit; font-family: inherit; }
.hero p.lede {
  font-size: 18px; line-height: 1.55;
  color: var(--ink-2);
  max-width: 56ch;
  margin: 0 0 36px;
  position: relative; z-index: 2;
  text-wrap: pretty;
}
.hero-cta { display: flex; gap: 10px; flex-wrap: wrap; position: relative; z-index: 2; }

.hero-monitor {
  margin-top: 64px;
  position: relative; z-index: 2;
}

/* monitor card — the live product preview */
.monitor {
  border: 1px solid var(--line-2);
  border-radius: var(--r-lg);
  background: linear-gradient(180deg, var(--surface) 0%, var(--bg-1) 100%);
  overflow: hidden;
  box-shadow:
    0 0 0 1px var(--line) inset,
    0 12px 32px -16px rgba(16,24,40,0.14);
}
.monitor-head {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--line);
  background: var(--bg-2);
}
.monitor-dots { display: flex; gap: 6px; }
.monitor-dots span {
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--surface-2);
  border: 1px solid var(--line-2);
}
.monitor-title {
  display: inline-flex; align-items: center; gap: 8px;
  font: 500 13px/1 var(--mono);
  color: var(--ink-2);
}
.monitor-tabs {
  display: flex; gap: 2px;
  background: var(--surface-2);
  padding: 3px;
  border-radius: 6px;
  margin-left: auto;
}
.monitor-tab {
  font: 500 11px/1 var(--mono);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-3);
  padding: 6px 10px;
  border-radius: 4px;
  cursor: pointer;
  border: 0; background: transparent;
}
.monitor-tab.on {
  background: var(--bg-2);
  color: var(--ink);
  box-shadow: 0 0 0 1px var(--line-2);
}
.monitor-pulse {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--ok);
  box-shadow: 0 0 0 0 rgba(14,159,110,0.5);
  animation: pulse 1.6s ease-out infinite;
}
@keyframes pulse {
  0%   { box-shadow: 0 0 0 0 rgba(14,159,110,0.45); }
  100% { box-shadow: 0 0 0 12px rgba(14,159,110,0); }
}

.monitor-body {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  min-height: 360px;
}
@media (max-width: 900px) { .monitor-body { grid-template-columns: 1fr; } }

.monitor-feed { border-right: 1px solid var(--line); }
.feed-row {
  display: grid;
  grid-template-columns: 84px 1fr auto;
  gap: 16px; align-items: center;
  padding: 14px 18px;
  border-bottom: 1px solid var(--line);
  font-size: 14px;
  transition: background 120ms;
}
.feed-row:last-child { border-bottom: 0; }
.feed-row:hover { background: var(--bg-2); }
.feed-row .ts {
  font: 500 11.5px/1 var(--mono);
  color: var(--ink-3);
  letter-spacing: 0.02em;
}
.feed-row .what { color: var(--ink-2); }
.feed-row .what strong { color: var(--ink); font-weight: 600; }
/* Unified severity pill (matches /vip-protection .vip-risk). Unscoped so the
   dashboard find-rows get the same pill as feed-rows; high+medium => warn. */
.sev {
  border: 1px solid var(--border-color); border-radius: 999px;
  display: inline-flex; align-items: center;
  font-size: 0.64rem; font-weight: 800; line-height: 1;
  padding: 4px 7px; text-transform: uppercase;
  width: fit-content; white-space: nowrap;
}
.sev.critical, .sev.crit { background: color-mix(in srgb, var(--danger) 8%, var(--bg-primary)); border-color: color-mix(in srgb, var(--danger) 44%, var(--border-color)); color: var(--danger); }
.sev.high, .sev.medium, .sev.med { background: color-mix(in srgb, var(--warn) 8%, var(--bg-primary)); border-color: color-mix(in srgb, var(--warn) 42%, var(--border-color)); color: var(--warn); }
.sev.low { background: color-mix(in srgb, var(--ok) 8%, var(--bg-primary)); border-color: color-mix(in srgb, var(--ok) 32%, var(--border-color)); color: var(--ok); }
.sev.info { color: var(--ink-3); }

/* HIGH gets its own orange (--sev-high) so it is visually distinct from MEDIUM,
   which keeps the amber (--warn). One specificity-boosted override in the shared
   theme file covers every severity-pill family app-wide (redesign.css loads on
   every page; the .theme-redesign prefix outranks each page-scoped .X.high rule).
   To retune the HIGH shade, change --sev-high above — nothing else. */
.theme-redesign .sev.high,
.theme-redesign .rt-sev.sev-high,
.theme-redesign .as-sev.high,
.theme-redesign .asd-sev.high,
.theme-redesign .cve-chip-high,
.theme-redesign .cvt-chip-high,
.theme-redesign .cpol-sev-high,
.theme-redesign .cth-pill-high,
.theme-redesign .ft-risk-badge.high,
.theme-redesign .ft-risk-badge.warning,
.theme-redesign .brand-risk.high,
.theme-redesign .inbox-risk.high,
.theme-redesign .td-risk.high,
.theme-redesign .reports-risk.high,
.theme-redesign .automation-risk.high,
.theme-redesign .vip-risk.high,
.theme-redesign .portfolio-action-item.severity-high .portfolio-action-risk,
.theme-redesign .single-brand-action.severity-high span {
  color: var(--sev-high);
  border-color: color-mix(in srgb, var(--sev-high) 42%, var(--border-color));
  background: color-mix(in srgb, var(--sev-high) 8%, var(--bg-primary));
}

/* Cohesion Wave 3: the same one-source-of-truth treatment for CRITICAL,
   MEDIUM, and LOW, so every severity-pill family renders identical colors
   on every page (critical = --danger, medium = --warn amber, low = --ok).
   Same selector strategy as the HIGH block above. These overrides retire
   once the per-page pill families migrate onto the shared .sev component
   (PHASES-COHESION.md Wave 3d), at which point delete all four blocks. */
.theme-redesign .rt-sev.sev-critical,
.theme-redesign .as-sev.critical,
.theme-redesign .asd-sev.critical,
.theme-redesign .cve-chip-critical,
.theme-redesign .cvt-chip-critical,
.theme-redesign .cpol-sev-critical,
.theme-redesign .cth-pill-critical,
.theme-redesign .ft-risk-badge.critical,
.theme-redesign .brand-risk.critical,
.theme-redesign .inbox-risk.critical,
.theme-redesign .td-risk.critical,
.theme-redesign .reports-risk.critical,
.theme-redesign .automation-risk.critical,
.theme-redesign .vip-risk.critical,
.theme-redesign .portfolio-action-item.severity-critical .portfolio-action-risk,
.theme-redesign .single-brand-action.severity-critical span {
  color: var(--danger);
  border-color: color-mix(in srgb, var(--danger) 44%, var(--border-color));
  background: color-mix(in srgb, var(--danger) 8%, var(--bg-primary));
}
.theme-redesign .rt-sev.sev-medium,
.theme-redesign .as-sev.medium,
.theme-redesign .asd-sev.medium,
.theme-redesign .cve-chip-medium,
.theme-redesign .cvt-chip-medium,
.theme-redesign .cpol-sev-medium,
.theme-redesign .cth-pill-medium,
.theme-redesign .ft-risk-badge.medium,
.theme-redesign .brand-risk.medium,
.theme-redesign .inbox-risk.medium,
.theme-redesign .td-risk.medium,
.theme-redesign .reports-risk.medium,
.theme-redesign .automation-risk.medium,
.theme-redesign .vip-risk.medium,
.theme-redesign .portfolio-action-item.severity-medium .portfolio-action-risk,
.theme-redesign .single-brand-action.severity-medium span {
  color: var(--warn);
  border-color: color-mix(in srgb, var(--warn) 42%, var(--border-color));
  background: color-mix(in srgb, var(--warn) 8%, var(--bg-primary));
}
.theme-redesign .rt-sev.sev-low,
.theme-redesign .as-sev.low,
.theme-redesign .asd-sev.low,
.theme-redesign .cve-chip-low,
.theme-redesign .cvt-chip-low,
.theme-redesign .cpol-sev-low,
.theme-redesign .cth-pill-low,
.theme-redesign .ft-risk-badge.low,
.theme-redesign .brand-risk.low,
.theme-redesign .inbox-risk.low,
.theme-redesign .td-risk.low,
.theme-redesign .reports-risk.low,
.theme-redesign .automation-risk.low,
.theme-redesign .vip-risk.low,
.theme-redesign .portfolio-action-item.severity-low .portfolio-action-risk,
.theme-redesign .single-brand-action.severity-low span {
  color: var(--ok);
  border-color: color-mix(in srgb, var(--ok) 32%, var(--border-color));
  background: color-mix(in srgb, var(--ok) 8%, var(--bg-primary));
}

/* KPI strip — the ONE segmented summary-numbers component for public
   intel + tool pages (cohesion Wave 3; replaced the cvt-/ta-/rw-/ng-/cx-
   per-page clones). App pages use .tk-summary tiles instead. Value scale
   matches .tk-sum-val (20px/600) so public and app numbers read alike. */
.kpi-strip {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 0; margin-bottom: 18px;
  background: var(--bg-1);
  border: 1px solid var(--line-2);
  border-radius: var(--r-md);
  overflow: hidden;
}
.kpi-item { padding: 18px 20px; border-right: 1px solid var(--line-2); }
.kpi-item:last-child { border-right: 0; }
.kpi-val {
  font: 600 20px/1.2 var(--sans);
  color: var(--ink);
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
}
.kpi-lbl {
  font: 600 0.66rem/1.4 var(--sans);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-3);
  margin-top: 6px;
}
.kpi-val.danger { color: var(--danger); }
.kpi-val.warn   { color: var(--warn); }
@media (max-width: 720px) {
  .kpi-item { border-right: 0; border-bottom: 1px solid var(--line-2); }
  .kpi-item:last-child { border-bottom: 0; }
}

.monitor-side { padding: 18px; display: flex; flex-direction: column; gap: 16px; }
.side-block { }
.side-block h4 {
  font: 500 12px/1 var(--mono);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin: 0 0 10px;
  font-weight: 500;
}
.score-ring {
  display: flex; align-items: center; gap: 16px;
}
.score-ring .ring {
  width: 88px; height: 88px;
  flex: 0 0 88px;
  position: relative;
}
.score-ring .ring svg { width: 100%; height: 100%; }
.score-ring .ring .num {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font: 700 28px/1 var(--sans);
  letter-spacing: -0.02em;
}
.score-ring .meta { display: flex; flex-direction: column; gap: 2px; }
.score-ring .meta .lab { color: var(--ink-3); font-size: 12px; }
.score-ring .meta .val { color: var(--ink); font: 600 14px/1.4 var(--sans); }

/* ticker */
.ticker {
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: var(--bg-1);
  padding: 14px 0;
  overflow: hidden;
}
.ticker-track {
  display: flex; gap: 48px;
  white-space: nowrap;
  animation: ticker 60s linear infinite;
}
.ticker-item {
  display: inline-flex; align-items: center; gap: 10px;
  font: 500 13px/1 var(--mono);
  color: var(--ink-2);
  letter-spacing: 0.01em;
}
.ticker-item .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
.ticker-item .grp { color: var(--ink); }
.ticker-item .vic { color: var(--ink-3); }
@keyframes ticker {
  to { transform: translateX(-50%); }
}

/* stats strip */
.stats {
  padding: 96px 0;
  border-bottom: 1px solid var(--line);
}
.stats-grid {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 0;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--bg-1);
}
@media (max-width: 800px) { .stats-grid { grid-template-columns: repeat(2, 1fr); } }
.stat {
  padding: 28px 28px;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  position: relative;
}
.stat:last-child { border-right: 0; }
@media (max-width: 800px) {
  .stat:nth-child(2n) { border-right: 0; }
  .stat:nth-last-child(-n+2) { border-bottom: 0; }
}
.stat .lab {
  font: 600 12px/1 var(--mono);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 14px;
}
.stat .num {
  font: 600 clamp(36px, 4vw, 52px)/1 var(--sans);
  letter-spacing: -0.025em;
  color: var(--ink);
}
.stat .num .acc { color: var(--accent); }
.stat .ctx { font-size: 14px; color: var(--ink-3); margin-top: 8px; }
.stat .spark {
  position: absolute; right: 18px; top: 18px;
  width: 70px; height: 22px;
  color: var(--ink-4);
}

/* pillars */
.pillars { padding: 96px 0; }
.section-head { display: flex; align-items: end; justify-content: space-between; gap: 24px; margin-bottom: 40px; flex-wrap: wrap; }
.section-head h2 {
  font: 600 clamp(32px, 4vw, 48px)/1.04 var(--sans);
  letter-spacing: -0.03em;
  margin: 8px 0 0;
  max-width: 22ch;
  text-wrap: balance;
}
.section-head h2 .em { font-style: normal; }
.section-head .sub { color: var(--ink-2); font-size: 15.5px; max-width: 40ch; }

.pillar-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
@media (max-width: 900px) { .pillar-grid { grid-template-columns: 1fr; } }
.pillar {
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--bg-1);
  overflow: hidden;
  display: flex; flex-direction: column;
  transition: border-color 150ms, transform 150ms;
}
.pillar:hover { border-color: var(--line-3); transform: translateY(-2px); }
.pillar-img {
  height: 180px;
  background: var(--surface-2);
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid var(--line);
}
.pillar-img .placeholder {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-end;
  padding: 16px;
  background:
    repeating-linear-gradient(135deg,
      var(--bg-2) 0px, var(--bg-2) 6px,
      var(--surface) 6px, var(--surface) 12px);
}
.pillar-img .placeholder::after {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(circle at 80% 20%, var(--accent-soft), transparent 40%);
}
.pillar-img .ph-label {
  font: 500 10.5px/1.3 var(--mono);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-3);
  background: rgba(255,255,255,0.88);
  padding: 6px 8px;
  border: 1px solid var(--line-2);
  border-radius: 4px;
  position: relative; z-index: 2;
}
.pillar-body { padding: 24px; flex: 1; display: flex; flex-direction: column; }
.pillar-body h3 {
  font: 600 19px/1.2 var(--sans);
  letter-spacing: -0.018em;
  margin: 0 0 8px;
}
.pillar-body p { color: var(--ink-2); font-size: 15px; line-height: 1.6; margin: 0 0 16px; }
.pillar-body ul { list-style: none; padding: 0; margin: 0 0 18px; display: flex; flex-direction: column; gap: 6px; }
.pillar-body ul li {
  display: flex; gap: 10px; align-items: center;
  font: 500 12.5px/1.2 var(--mono);
  color: var(--ink-2);
  letter-spacing: 0.02em;
}
.pillar-body ul li::before {
  content: ''; width: 12px; height: 1px; background: var(--accent); flex: 0 0 12px;
}
.pillar-body .more {
  margin-top: auto;
  font: 500 13px/1 var(--sans);
  color: var(--accent-1);
  text-decoration: none;
  display: inline-flex; align-items: center; gap: 6px;
}

/* footer */
.foot {
  border-top: 1px solid var(--line);
  padding: 64px 0 28px;
  margin-top: 64px;
  background: var(--bg-1);
}
.foot-grid {
  display: grid;
  grid-template-columns: 1.4fr repeat(4, 1fr);
  gap: 32px;
  padding-bottom: 48px;
  border-bottom: 1px solid var(--line);
}
@media (max-width: 900px) { .foot-grid { grid-template-columns: 1fr 1fr; } }
.foot-brand { max-width: 320px; color: var(--ink-2); font-size: 14.5px; }
.foot-brand p { margin: 16px 0 0; line-height: 1.55; }
.foot-col h5 {
  font: 500 12px/1 var(--mono);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin: 0 0 14px;
  font-weight: 500;
}
.foot-col a {
  display: block;
  color: var(--ink-2);
  text-decoration: none;
  font-size: 14.5px;
  padding: 4px 0;
}
.foot-col a:hover { color: var(--ink); }
.foot-bottom {
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 16px;
  padding-top: 24px;
  font: 500 12px/1 var(--mono);
  color: var(--ink-3);
  letter-spacing: 0.04em;
}

/* ─── DASHBOARD ─── */
.dash {
  display: grid;
  grid-template-columns: 240px 1fr;
  min-height: calc(100vh - 64px);
}
@media (max-width: 1000px) { .dash { grid-template-columns: 1fr; } }

.side {
  border-right: 1px solid var(--line);
  background: var(--bg-1);
  padding: 24px 16px;
}
@media (max-width: 1000px) { .side { display: none; } }
.side-section { margin-bottom: 24px; }
.side-section h6 {
  font: 600 11px/1 var(--sans);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-4);
  margin: 0 0 10px;
  padding: 0 8px;
}
.side-link {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px;
  border-radius: 6px;
  color: var(--ink-2);
  text-decoration: none;
  font-size: 14px;
  cursor: pointer;
  margin-bottom: 1px;
  border: 1px solid transparent;
}
.side-link:hover { background: var(--surface-2); color: var(--ink); }
.side-link.on {
  background: var(--surface-2);
  color: var(--ink);
  border-color: transparent;
  font-weight: 600;
}
.side-link svg { color: var(--ink-3); }
.side-link.on svg { color: var(--accent-1); }
.side-link .pip {
  margin-left: auto;
  font: 500 10.5px/1 var(--mono);
  color: var(--ink-3);
}

/* Task-based app navigation. Primary links stay visually dominant while
   source-specific tools live in compact native disclosure menus. */
.side-workspace { margin-bottom: 18px; }
.side-mobile-head { display: none; }
#workspace-pill {
  min-width: 0;
  padding: 7px 9px;
  display: flex;
  align-items: center;
  gap: 9px;
  border: 1px solid var(--line-2);
  border-radius: 7px;
  background: var(--bg-1);
}
.side-workspace-mark {
  width: 22px;
  height: 22px;
  border-radius: 5px;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  flex: 0 0 22px;
}
.side-account-copy {
  min-width: 0;
  flex: 1 1 auto;
}
#sidebar-account-name {
  display: block;
  min-width: 0;
  overflow: hidden;
  color: var(--ink);
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 13px;
  font-weight: 600;
}
#workspace-plan {
  flex: 0 0 auto;
  margin-left: auto;
  color: var(--ink-3);
  font-size: 10px;
  white-space: nowrap;
}
.side-nav-section { margin-bottom: 8px; }
.side-section-divided,
.side-section-admin {
  border-top: 1px solid var(--line-2);
  padding-top: 9px;
  margin-top: 9px;
}
.side-section-toggle {
  width: 100%;
  min-height: 30px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 5px 8px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--ink-4);
  cursor: pointer;
  font: 600 11px/1 var(--sans);
  letter-spacing: 0.045em;
  text-align: left;
  text-transform: uppercase;
}
.side-section-toggle:hover { color: var(--ink-2); background: var(--surface-2); }
.side-nav-section.has-active > .side-section-toggle { color: var(--ink-2); }
.side-section-toggle > svg {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  transition: transform 150ms ease;
}
.side-nav-section.is-collapsed > .side-section-toggle > svg { transform: rotate(-90deg); }
.side-section-body[hidden] { display: none !important; }
.side-section-body { padding-top: 2px; }
.side-nav-cluster { margin-bottom: 2px; }
.side-context {
  margin: -1px 0 5px 34px;
  color: var(--ink-3);
}
.side-context summary {
  min-height: 25px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  padding: 4px 8px;
  border-radius: 5px;
  cursor: pointer;
  font-size: 11.5px;
  list-style: none;
  user-select: none;
}
.side-context summary::-webkit-details-marker { display: none; }
.side-context summary:hover { color: var(--ink-2); background: var(--surface-2); }
.side-context summary svg {
  width: 12px;
  height: 12px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  transition: transform 150ms ease;
}
.side-context[open] summary svg { transform: rotate(180deg); }
.side-context-links {
  margin: 1px 0 4px 4px;
  padding-left: 8px;
  border-left: 1px solid var(--line-2);
}
.side-context-link {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 5px 6px;
  border-radius: 4px;
  color: var(--ink-3);
  font-size: 12px;
  line-height: 1.25;
  text-decoration: none;
}
.side-context-link > span { margin-left: auto; color: var(--ink-4); font-size: 10px; }
.side-context-link:hover { color: var(--ink); background: var(--surface-2); }
.side-context-link.on { color: var(--ink); font-weight: 600; }
.side-admin-dot {
  width: 6px;
  height: 6px;
  margin: 0 5px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.55;
  flex: 0 0 6px;
}

.dash-main {
  padding: 32px 40px 64px;
  min-width: 0;
}
@media (max-width: 720px) { .dash-main { padding: 24px 20px 64px; } }

.dash-head {
  display: flex; align-items: end; justify-content: space-between; gap: 24px;
  margin-bottom: 24px; flex-wrap: wrap;
}
.dash-head h1 {
  font: 600 32px/1.1 var(--sans);
  letter-spacing: -0.025em;
  margin: 6px 0 0;
}
.dash-head .meta {
  display: flex; gap: 8px; align-items: center;
}

/* exposure score panel */
.exposure-panel {
  display: grid;
  grid-template-columns: 380px 1fr;
  gap: 16px;
  margin-bottom: 24px;
}
@media (max-width: 1100px) { .exposure-panel { grid-template-columns: 1fr; } }
.panel {
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--bg-1);
  padding: 24px;
}
.panel-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 20px;
}
.panel-head h3 {
  font: 600 14px/1 var(--sans);
  letter-spacing: -0.005em;
  margin: 0;
}
.panel-head .panel-meta {
  font: 500 11px/1 var(--mono);
  color: var(--ink-3);
  letter-spacing: 0.04em;
}
.score-big {
  display: flex; align-items: center; gap: 24px;
}
.score-big .ring-big {
  width: 156px; height: 156px;
  flex: 0 0 156px;
  position: relative;
}
.score-big .ring-big .center {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.score-big .ring-big .center .n {
  font: 600 56px/1 var(--sans);
  letter-spacing: -0.03em;
}
.score-big .ring-big .center .lbl {
  font: 600 11px/1 var(--mono);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-top: 4px;
}
/* New score hero: huge letter grade as the centerpiece, with the
   numeric score smaller below it. Mirrors SecurityScorecard's
   "B / 720" rendering convention so security buyers compare at a
   glance. */
.score-big .ring-big .center .grade {
  font: 700 64px/1 var(--sans);
  letter-spacing: -0.04em;
  color: var(--ink);
}
.score-big .ring-big .center .n-mini {
  font: 500 13px/1 var(--mono);
  color: var(--ink-2);
  margin-top: 6px;
  letter-spacing: 0.02em;
}
.score-big .ring-big .center .n-mini .of {
  color: var(--ink-3);
  margin-left: 2px;
  font-weight: 400;
}
.score-meta {
  display: flex; flex-direction: column; justify-content: center; gap: 10px;
  flex: 1; min-width: 0;
}
.score-meta .tier {
  display: inline-flex; align-items: center;
  font: 600 14px/1 var(--sans);
  color: var(--ink-2);
  padding: 0;
  letter-spacing: -0.01em;
}
.score-meta .tier::before {
  content: "";
  display: inline-block;
  width: 6px; height: 6px; border-radius: 50%;
  background: currentColor;
  margin-right: 8px; opacity: 0.8;
}
.score-meta .tier[data-tier="Excellent"],
.score-meta .tier[data-tier="Strong"]    { color: var(--ok); }
.score-meta .tier[data-tier="Adequate"]  { color: var(--warn); }
.score-meta .tier[data-tier="Needs work"]{ color: var(--status-partial); }
.score-meta .tier[data-tier="At risk"]   { color: var(--danger); }
.score-meta .delta {
  font: 500 12px/1.4 var(--mono);
  color: var(--ink-3);
  letter-spacing: 0.02em;
}
.score-meta .delta[data-state="up"]   { color: var(--ok); }
.score-meta .delta[data-state="down"] { color: var(--danger); }
.score-meta .delta[data-state="flat"] { color: var(--ink-3); }
.score-meta .delta[data-state="empty"]{ display: none; }
.score-meta .benchmark {
  font: 500 12px/1.45 var(--mono);
  color: var(--ink-3);
  letter-spacing: 0.02em;
}
.score-meta .benchmark.empty { color: var(--ink-3); opacity: 0.7; }
.score-meta .benchmark .pos {
  color: var(--ink);
  font-weight: 600;
}
.score-meta .benchmark .src {
  color: var(--ink-3);
  font-size: 11px;
  display: block;
  margin-top: 3px;
  opacity: 0.75;
}
.score-meta .last-assessed {
  font: 500 11px/1 var(--mono);
  color: var(--ink-3);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  opacity: 0.7;
}
.score-deltas { display: flex; flex-direction: column; gap: 14px; flex: 1; min-width: 0; }
.score-row {
  display: grid;
  grid-template-columns: 90px 1fr 56px;
  gap: 12px; align-items: center;
}
.score-row .lab {
  font: 500 11.5px/1 var(--mono);
  letter-spacing: 0.04em;
  color: var(--ink-2);
  text-transform: uppercase;
}
.score-row .bar {
  height: 6px;
  border-radius: 3px;
  background: var(--surface-2);
  overflow: hidden;
  position: relative;
}
.score-row .bar > span {
  display: block; height: 100%;
  background: linear-gradient(90deg, var(--accent), var(--accent-1));
  border-radius: 3px;
}
.score-row .val {
  font: 600 13px/1 var(--mono);
  text-align: right;
  color: var(--ink);
}

/* findings feed */
.findings { }
.findings-head {
  display: flex; align-items: center; gap: 8px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--line);
  background: var(--bg-2);
  border-top-left-radius: var(--r-lg);
  border-top-right-radius: var(--r-lg);
}
.findings-head h3 { font: 600 14px/1 var(--sans); margin: 0; }

/* Signed-out auth gates. Every gated page used to render its gate heading
   as an h2 or h3 while the real h1 sat in the hidden app markup, so an
   anonymous visitor (and any screen reader or crawler) got a page with no
   visible top-level heading at all. The gate heading is now the h1 and this
   class holds the size the h2 used to have, so nothing changes visually. */
.auth-gate-title {
  color: var(--ink);
  margin: 0 0 10px;
  font: 600 22px/1.3 var(--sans);
}
.findings-head .live {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--accent);
  margin-left: 10px;
  animation: pulse 1.6s ease-out infinite;
}
.findings-head .filters {
  margin-left: auto;
  display: flex; gap: 4px;
}
/* The chip row is nowrap and sits after the heading in a flex row, so on a
   narrow screen it runs past the viewport and the whole page scrolls
   sideways. overview.css already fixed this, but only under
   .overview-findings, so /demo (which uses the bare component) still
   overflowed by 104px at 375px. Fixing it on the base component covers
   every page that uses it. */
@media (max-width: 820px) {
  .findings-head { flex-wrap: wrap; }
  .findings-head .filters { flex: 0 0 100%; margin-left: 0; flex-wrap: wrap; }
}
.filter-chip {
  font: 500 11px/1 var(--mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 6px 10px;
  border-radius: 4px;
  border: 1px solid var(--line-2);
  background: transparent;
  color: var(--ink-3);
  cursor: pointer;
}
.filter-chip.on {
  border-color: var(--accent-line);
  color: var(--accent-1);
  background: var(--accent-soft);
}
.filter-chip:hover { color: var(--ink); }
.findings-thead {
  display: grid;
  grid-template-columns: 90px 200px 1fr 200px 110px 90px;
  gap: 12px; align-items: center;
  padding: 10px 16px;
  border: 1px solid var(--line);
  border-top: 0;
  background: var(--bg-2);
  font: 600 11px/1 var(--mono);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-3);
}
.findings-thead > div { white-space: nowrap; }
/* Sortable columns. The triangle ::after sits faded on every sortable
   header so the affordance is visible at idle; the active column gets
   full opacity, with the direction reflecting the current sort. */
.findings-thead [data-sort-col] {
  cursor: pointer;
  user-select: none;
  display: inline-flex;
  align-items: center;
  transition: color 0.12s;
}
.findings-thead [data-sort-col]:hover { color: var(--ink-2); }
.findings-thead [data-sort-col]:focus-visible {
  outline: 2px solid var(--accent-line);
  outline-offset: 2px;
  border-radius: 3px;
}
.findings-thead [data-sort-col]::after {
  content: '';
  display: inline-block;
  width: 0;
  height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid currentColor;
  margin-left: 5px;
  opacity: 0.25;
  transition: opacity 0.1s;
}
.findings-thead [data-sort-col]:hover::after { opacity: 0.55; }
.findings-thead [data-sort-col].is-sort-asc::after {
  border-top: 0;
  border-bottom: 5px solid currentColor;
  opacity: 1;
}
.findings-thead [data-sort-col].is-sort-desc::after { opacity: 1; }
/* Drill-down filters: dimension chips that slice the live findings
   list client-side. Toggle visibility with the "Filter…" chip in the
   findings header. Each dimension is multi-select; tapping a chip
   toggles it. The active-filters bar above the table summarizes the
   current filter set with dismissible pills. */
.findings-drilldown {
  border: 1px solid var(--line);
  border-top: 0;
  background: var(--bg-2);
  padding: 14px 16px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px;
}
.findings-drilldown .dd-group {
  display: flex; flex-direction: column; gap: 6px;
}
.findings-drilldown .dd-label {
  font: 600 10px/1 var(--mono);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ink-3);
}
.findings-drilldown .dd-chips {
  display: flex; flex-wrap: wrap; gap: 6px;
}
.findings-drilldown .dd-chip {
  font: 500 11.5px/1 var(--mono);
  padding: 5px 9px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--bg-1);
  color: var(--ink-2);
  cursor: pointer;
  transition: all 0.12s;
}
.findings-drilldown .dd-chip:hover { border-color: var(--line-2); color: var(--ink); }
.findings-drilldown .dd-chip.on {
  border-color: var(--accent-line);
  background: var(--accent-soft);
  color: var(--accent-1);
}
.findings-drilldown .dd-chip .dd-count {
  margin-left: 6px;
  color: var(--ink-3);
  font-weight: 400;
}
.findings-drilldown .dd-chip.on .dd-count { color: var(--accent-1); opacity: 0.7; }
.findings-active-filters {
  border: 1px solid var(--line);
  border-top: 0;
  background: var(--bg-1);
  padding: 10px 16px;
  display: flex; flex-wrap: wrap; gap: 6px;
  align-items: center;
}
.findings-active-filters .af-label {
  font: 500 11px/1 var(--mono);
  color: var(--ink-3);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-right: 4px;
}
.findings-active-filters .af-pill {
  font: 500 11.5px/1 var(--mono);
  padding: 5px 8px 5px 10px;
  border: 1px solid var(--accent-line);
  border-radius: var(--r-md);
  background: var(--accent-soft);
  color: var(--accent-1);
  display: inline-flex; align-items: center; gap: 6px;
}
.findings-active-filters .af-pill button {
  background: none; border: 0; padding: 0; cursor: pointer;
  color: currentColor; opacity: 0.6; font: 500 14px/1 var(--mono);
}
.findings-active-filters .af-pill button:hover { opacity: 1; }
.findings-active-filters .af-clear {
  margin-left: auto;
  font: 500 11px/1 var(--mono);
  color: var(--ink-3);
  background: none; border: 0; cursor: pointer; padding: 4px 8px;
}
.findings-active-filters .af-clear:hover { color: var(--ink); }

.findings-list {
  border: 1px solid var(--line);
  border-top: 0;
  border-bottom-left-radius: var(--r-lg);
  border-bottom-right-radius: var(--r-lg);
  background: var(--bg-1);
  overflow: hidden;
}
.find-row {
  display: grid;
  grid-template-columns: 90px 200px 1fr 200px 110px 90px;
  gap: 12px; align-items: start;
  padding: 14px 16px;
  border-top: 1px solid var(--line);
  font-size: 14px;
}
@media (max-width: 1100px) {
  .findings-thead { grid-template-columns: 80px 1fr 90px; }
  .findings-thead .th-host, .findings-thead .th-source, .findings-thead .th-when { display: none; }
  .find-row { grid-template-columns: 80px 1fr 90px; }
  .find-row .col-host, .find-row .col-source, .find-row .col-time { display: none; }
}
.find-row:first-child { border-top: 0; }
.find-row:hover { background: var(--bg-2); }
.find-row .col-time { font: 500 11.5px/1 var(--mono); color: var(--ink-3); }
.find-row .col-host { font: 500 12px/1 var(--mono); color: var(--ink-2); }
.find-row .col-title { color: var(--ink); font-weight: 500; }
.find-row .col-title .meta {
  display: block; color: var(--ink-3); font-size: 13px; margin-top: 4px; font-weight: 400;
}
.find-row .col-source { font: 500 11px/1 var(--mono); color: var(--ink-3); letter-spacing: 0.04em; }
.find-row .col-action {
  font: 500 11.5px/1 var(--mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* secondary panel grid */
.dash-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 24px; }
@media (max-width: 1000px) { .dash-grid { grid-template-columns: 1fr; } }

.world-card { padding: 24px; }
.world-vis {
  height: 220px;
  background:
    radial-gradient(ellipse at 50% 50%, var(--accent-soft) 0%, transparent 60%);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  position: relative;
  overflow: hidden;
  margin-bottom: 16px;
}
.world-vis svg { position: absolute; inset: 0; width: 100%; height: 100%; }

.actor-list { display: flex; flex-direction: column; }
.actor-row {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 14px; align-items: center;
  padding: 12px 0;
  border-top: 1px solid var(--line);
}
.actor-row:first-child { border-top: 0; padding-top: 0; }
.actor-row .name { font: 600 14px/1.2 var(--sans); }
.actor-row .name .alias { color: var(--ink-3); font-weight: 400; }
.actor-row .ttp { font: 500 11px/1 var(--mono); color: var(--ink-3); letter-spacing: 0.04em; }
.actor-row .heat {
  width: 80px; height: 6px;
  background: var(--surface-2);
  border-radius: 3px;
  overflow: hidden;
}
.actor-row .heat > span {
  display: block; height: 100%;
  background: linear-gradient(90deg, var(--accent-2), var(--accent));
}

/* nav avatar */
.avatar {
  width: 30px; height: 30px; border-radius: 50%;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color: #fff;
  font: 600 11.5px/1 var(--sans);
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--line-3);
}

/* small icons */
.ico { width: 16px; height: 16px; flex: 0 0 16px; color: currentColor; }
.ico-sm { width: 14px; height: 14px; flex: 0 0 14px; }

/* page transitions */
.page-enter { animation: fadeUp 280ms ease-out both; }
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

/* misc */
.muted { color: var(--ink-3); }
.row { display: flex; align-items: center; gap: 8px; }

/* ─── Accessibility ─── */
/* Visible keyboard focus everywhere; mouse/programmatic focus stays clean via :focus-visible. */
:focus-visible {
  outline: 2px solid var(--accent-1);
  outline-offset: 2px;
  border-radius: inherit;
}
/* Skip-to-content link: off-screen until focused. */
.skip-link {
  position: absolute; left: 8px; top: -48px; z-index: 100;
  background: var(--accent); color: #fff;
  padding: 10px 16px; border-radius: var(--r-sm);
  font: 600 14px/1 var(--sans); text-decoration: none;
  transition: top 120ms ease;
}
.skip-link:focus { top: 8px; }
/* Larger touch targets on coarse (touch) pointers. */
@media (pointer: coarse) {
  .btn-sm { min-height: 40px; }
  .nav-search { min-height: 40px; }
  .side-link { min-height: 40px; }
}
/* Respect reduced-motion: stop perpetual ticker/pulse and entrance/hover motion. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .ticker-track, .page-enter { animation: none !important; }
}

/* ─── Mobile navigation (hamburger + drawers) ─── */
.nav-burger, .sidebar-mobile-toggle, .nav-mobile { display: none; }
.sidebar-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.55); z-index: 75; }
.sidebar-overlay[hidden] { display: none; }
@media (max-width: 1180px) {
  .nav-burger {
    display: inline-flex; align-items: center; justify-content: center;
    width: 40px; height: 40px; border-radius: var(--r-sm);
    background: transparent; border: 1px solid var(--line-2); color: var(--ink); cursor: pointer;
  }
  .nav-mobile.open {
    display: block; position: fixed; left: 0; right: 0; top: 64px;
    background: var(--bg-1); border-bottom: 1px solid var(--line);
    padding: 8px 20px 20px; z-index: 40;
    max-height: calc(100vh - 64px); overflow-y: auto;
  }
  .nav-mobile a {
    display: block; padding: 12px 4px; color: var(--ink-2);
    text-decoration: none; font-size: 15px; border-bottom: 1px solid var(--line);
  }
  .nav-mobile a:hover { color: var(--ink); }
  .nav-mobile .nav-mobile-h6 {
    font: 600 11px/1 var(--mono); letter-spacing: 0.04em; text-transform: uppercase;
    color: var(--ink-3); padding: 16px 4px 6px;
  }
}
@media (max-width: 1000px) {
  /* The toggle is fixed at left:12px top:74px; give page content room so
     it never sits on top of the page heading. */
  .dash-main { padding-top: 64px; }
  .sidebar-mobile-toggle {
    display: inline-flex; align-items: center; justify-content: center;
    position: fixed; left: 12px; top: 74px; z-index: 70;
    width: 42px; height: 42px; border-radius: var(--r-sm);
    background: var(--surface); border: 1px solid var(--line-2); color: var(--ink); cursor: pointer;
    box-shadow: 0 6px 18px -8px rgba(16,24,40,0.16);
  }
  .side {
    display: block !important;
    position: fixed; left: 0; top: 0; bottom: 0;
    width: 264px; max-width: 84vw;
    transform: translateX(-100%); transition: transform 200ms ease;
    z-index: 80; overflow-y: auto;
    box-shadow: 0 24px 60px -20px rgba(16,24,40,0.22);
  }
  .side-mobile-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: -12px -4px 18px;
    padding: 4px 4px 12px;
    border-bottom: 1px solid var(--line);
    color: var(--ink-3);
    font: 600 11px/1 var(--sans);
    letter-spacing: .045em;
    text-transform: uppercase;
  }
  .side-mobile-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    border: 1px solid var(--line-2);
    border-radius: var(--r-sm);
    background: var(--surface);
    color: var(--ink);
    cursor: pointer;
  }
  .side-mobile-close:hover { background: var(--surface-2); }
  .side.open { transform: translateX(0); }
  body.sidebar-drawer-open { overflow: hidden; }
}

/* ── Hub tabs: the ONE sub-navigation strip (cohesion Wave 3d).
   Ported from the cert-hub skin. Adopted by the cert hub, attack-surface
   sections, settings tabs, and brand-detail section nav — each hub keeps
   its own routing/JS; this is the shared visual skin. The component
   styles BOTH `.on` and `.active` as the active state so no existing JS
   class-toggle had to change (cert renders 'on' server-side; settings +
   brand-detail JS toggle 'active'; attack-surface renders 'active').
   Collapsing to one state class requires migrating cert-tabs.php first
   (intentional debt). Button reset included because settings tabs are
   <button> elements. ── */
.hub-tabs-clip { position: relative; margin-bottom: 22px; }
.hub-tabs-clip::after {
  content: '';
  position: absolute;
  top: 0; right: 0; bottom: 1px;
  width: 34px;
  background: linear-gradient(90deg, transparent, var(--bg));
  pointer-events: none;
}
@media (min-width: 1200px) { .hub-tabs-clip::after { display: none; } }
.hub-tabs {
  display: flex;
  gap: 2px;
  flex-wrap: nowrap;
  overflow-x: auto;
  border-bottom: 1px solid var(--line);
  scrollbar-width: none;
}
.hub-tabs::-webkit-scrollbar { display: none; }
.hub-tab {
  appearance: none; background: transparent; border: 0; cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 10px 15px;
  white-space: nowrap;
  color: var(--ink-3);
  font: 600 0.86rem/1 var(--sans);
  text-decoration: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color 0.12s, border-color 0.12s;
}
.hub-tab:hover { color: var(--ink); }
.hub-tab.on, .hub-tab.active { color: var(--ink); border-bottom-color: var(--accent); }
.hub-tab-pip {
  display: inline-block;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--surface-2);
  color: var(--ink-3);
  font: 600 10px/1.6 var(--mono);
  vertical-align: middle;
}
.hub-tab-pip:empty { display: none; }
.hub-tab.on .hub-tab-pip, .hub-tab.active .hub-tab-pip {
  background: color-mix(in srgb, var(--accent) 16%, transparent);
  color: var(--accent);
}
.hub-tab-pip.badge-danger {
  background: color-mix(in srgb, var(--danger) 8%, var(--bg-1));
  color: var(--danger);
}
/* Sticky variant (brand-detail): stays below the site navbar (z 30). */
.hub-tabs--sticky { position: sticky; top: 0; z-index: 5; background: var(--bg); box-shadow: 0 1px 3px rgba(0,0,0,0.06); }
/* Wrap variant for hubs where sticky prevents the clip fade (brand-detail's
   16 tabs): multi-row instead of hidden-scrollbar overflow. */
.hub-tabs--wrap { flex-wrap: wrap; overflow-x: visible; }

/* Breathing room under a sticky tab strip. .dash-main's 32px top padding sits
   ABOVE the strip, so anything following it butted straight up against the
   strip's bottom border. Only brand-detail puts .hub-tabs directly above a
   .dash-head today, but this is scoped to the strip rather than the page so any
   hub that adopts the pattern inherits the spacing. */
.hub-tabs--sticky + * { margin-top: 28px; }

/* ── Dual-shell public pages inside the app shell (shell-open.php) ──
   Their marketing containers center at a max-width for anonymous
   visitors; inside .dash-main the page-shell standard applies: FULL
   WIDTH, LEFT-ALIGNED, no double horizontal padding (.dash-main
   provides the gutters). Vertical rhythm: top comes from .dash-main,
   bottom padding kept for scroll room. */
.dash-main .rw-page,
.dash-main .ta-page,
.dash-main .ahm-page,
.dash-main .cve-page,
.dash-main .cl-page,
.dash-main .cl-wrap,
.dash-main .api-shell,
.dash-main .wrap,
.dash-main .intel-library-page,
.dash-main .va-page,
.dash-main .ci-page {
  max-width: none;
  margin: 0;
  padding: 0 0 48px;
}
.dash-main .intel-library-page,
.dash-main .va-page,
.dash-main .ci-page { width: auto; }
.dash-main .cl-wrap { padding: 0; }

/* Vendor security grade card. Sits under the command metrics on a vendor's
   overview; brands never render it. */
.vp-posture { margin-top: 16px; }
.vp-posture-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.vp-posture-head h3 { margin: 0 0 4px; font-size: 1.05rem; }
.vp-posture-head p { margin: 0; font-size: 0.82rem; color: var(--ink-3); }
.vp-grade { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.1; }
.vp-grade strong { font: 700 34px/1 var(--sans); letter-spacing: -0.02em; }
.vp-grade span { font-size: 0.74rem; color: var(--ink-3); margin-top: 4px; }
.vp-grade.tone-ok strong { color: var(--ok); }
.vp-grade.tone-warn strong { color: var(--warn); }
.vp-grade.tone-danger strong { color: var(--danger); }
.vp-posture-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 14px; }
.vp-trend { display: inline-flex; align-items: center; gap: 8px; font-size: 0.78rem; color: var(--ink-3); }
.vp-spark { color: var(--ink-3); }
.vp-weak { margin: 12px 0 0; font-size: 0.82rem; color: var(--ink-2); }

/* ── Vendor policy watching ──────────────────────────────────────────
   This panel was ported from Relevant threats and kept that page's rt-*
   classes, whose stylesheet brand-detail does not load, so it rendered as
   raw markup. These are page-owned styles in the site's own language:
   neutral full outlines, no edge accents, the shared button family. */
.vp-add {
  display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px;
  padding: 14px; margin: 14px 0 18px;
  border: 1px solid var(--line); border-radius: 10px; background: var(--bg-2);
}
.vp-add label { display: flex; flex-direction: column; gap: 5px; font: 600 11px/1.2 var(--sans); color: var(--ink-3); text-transform: uppercase; letter-spacing: .04em; }
.vp-add select, .vp-add input {
  min-width: 0; border: 1px solid var(--line-2); border-radius: 8px;
  background: var(--surface); color: var(--ink); padding: 8px 10px; font: inherit; font-size: 13px;
}
/* The flex sizing belongs on the LABEL, which is the row item. Putting
   `flex: 1 1 280px` on the input made 280px its HEIGHT, because the label
   is a COLUMN flex container and flex-basis follows the main axis. */
.vp-add label.vp-url { flex: 1 1 280px; min-width: 240px; }
.vp-add input[type="url"] { width: 100%; }
.vp-add-actions { display: flex; gap: 8px; flex-wrap: wrap; }

.vp-stack { display: grid; gap: 10px; }
.vp-group { display: grid; gap: 10px; margin-bottom: 20px; }
.vp-group h4 { margin: 0; font: 600 12px/1.2 var(--sans); color: var(--ink-3); text-transform: uppercase; letter-spacing: .05em; }

.vp-doc { border: 1px solid var(--line); border-radius: 10px; padding: 14px; background: var(--surface); }
.vp-doc-head { display: flex; justify-content: space-between; gap: 14px; align-items: flex-start; }
.vp-doc p { margin: 10px 0 0; font-size: 0.84rem; color: var(--ink-2); line-height: 1.5; }
.vp-doc-url { margin-top: 6px; font-size: 0.78rem; word-break: break-all; }
.vp-doc-url a { color: var(--link); }
.vp-badges { display: flex; flex-wrap: wrap; gap: 6px; }
.vp-badge {
  display: inline-block; padding: 2px 8px; border-radius: 999px;
  border: 1px solid var(--line-2); background: var(--bg-2);
  font: 600 10.5px/1.6 var(--sans); color: var(--ink-2);
  text-transform: uppercase; letter-spacing: .04em; white-space: nowrap;
}
.vp-badge.high, .vp-badge.critical { border-color: color-mix(in srgb, var(--danger) 45%, var(--line-2)); color: var(--danger); background: color-mix(in srgb, var(--danger) 8%, transparent); }
.vp-badge.medium { border-color: color-mix(in srgb, var(--warn) 45%, var(--line-2)); color: var(--warn); background: color-mix(in srgb, var(--warn) 8%, transparent); }
.vp-doc-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }

.vp-clauses { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); }
.vp-clauses h5 { margin: 0 0 6px; font: 600 11px/1.2 var(--sans); color: var(--ink-3); text-transform: uppercase; letter-spacing: .04em; }
.vp-clauses ul { margin: 0; padding-left: 18px; display: grid; gap: 5px; }
.vp-clauses li { font-size: 0.82rem; color: var(--ink-2); line-height: 1.5; }
.vp-summary { font-size: 0.84rem; color: var(--ink); }

.vp-empty { padding: 16px; border: 1px dashed var(--line-2); border-radius: 10px; color: var(--ink-3); font-size: 0.84rem; }
.vp-message { margin: 0 0 12px; padding: 10px 12px; border: 1px solid var(--line-2); border-radius: 8px; font-size: 0.84rem; background: var(--bg-2); color: var(--ink-2); }
.vp-message.error { border-color: color-mix(in srgb, var(--danger) 45%, var(--line-2)); color: var(--danger); }
.vp-message.success { border-color: color-mix(in srgb, var(--ok) 45%, var(--line-2)); color: var(--ok); }

@media (max-width: 720px) {
  .vp-add { flex-direction: column; align-items: stretch; }
  .vp-add label.vp-url { flex: 1 1 auto; min-width: 0; }
}

/* Per-domain breakdown under the vendor grade. */
.vp-domains { margin-top: 14px; }
.vp-domain-grade {
  display: inline-block; min-width: 26px; text-align: center;
  padding: 1px 6px; margin-right: 8px; border-radius: 5px;
  font: 800 11px/1.6 var(--sans); border: 1px solid var(--line-2);
}
.vp-domain-grade.tone-ok { color: var(--ok); border-color: color-mix(in srgb, var(--ok) 45%, var(--line-2)); background: color-mix(in srgb, var(--ok) 8%, transparent); }
.vp-domain-grade.tone-warn { color: var(--warn); border-color: color-mix(in srgb, var(--warn) 45%, var(--line-2)); background: color-mix(in srgb, var(--warn) 8%, transparent); }
.vp-domain-grade.tone-danger { color: var(--danger); border-color: color-mix(in srgb, var(--danger) 45%, var(--line-2)); background: color-mix(in srgb, var(--danger) 8%, transparent); }
.vp-domain-score { font: 600 12px/1 var(--mono); color: var(--ink-2); }
.vp-domain-detail { color: var(--ink-3); font-size: 0.8rem; }

/* Open-issues disclosure: the count opens the rows behind it. A zero is not a
   control, so .vp-issues-none stays plain text.

   Both share one geometry so the DIGITS line up down the column. The button
   carries a caret, a gap, padding and a border that a bare zero does not, and
   right-aligning the cell then aligned the caret instead of the number, which
   left every clickable count sitting a caret's width to the left of the zeros.
   The zero reserves the same caret box with a hidden ::after. */
.vp-issues-btn,
.vp-issues-none {
    font: inherit;
    font-variant-numeric: tabular-nums;
    border: 1px solid transparent;
    border-radius: 6px;
    padding: 2px 6px;
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 4px;
}
.vp-issues-btn {
    color: var(--accent);
    background: none;
    cursor: pointer;
}
/* The rating opens the same panel as the count, so a domain below 100 with
   nothing counted is still interrogable. Keeps the grade pill and score
   exactly as they render unclickable; only the caret and hover are added. */
.vp-rating-btn {
    font: inherit;
    color: inherit;
    background: none;
    border: 1px solid transparent;
    border-radius: 6px;
    padding: 2px 6px;
    margin-left: -6px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.vp-rating-btn:hover { border-color: color-mix(in srgb, var(--accent) 40%, var(--line-2)); background: color-mix(in srgb, var(--accent) 7%, transparent); }
.vp-rating-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.vp-rating-btn[aria-expanded="true"] .vp-issues-caret { transform: rotate(180deg); }
.vp-rating-btn .vp-issues-caret { color: var(--accent); }
.vp-issues-none { color: var(--ink-3); }
/* Same width as .vp-issues-caret, so a zero occupies the identical box. */
.vp-issues-none::after {
    content: '\25BE';
    font-size: 9px;
    visibility: hidden;
}
.vp-issues-btn:hover { border-color: color-mix(in srgb, var(--accent) 40%, var(--line-2)); background: color-mix(in srgb, var(--accent) 7%, transparent); }
.vp-issues-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.vp-issues-caret { font-size: 9px; transition: transform 120ms ease; }
.vp-issues-btn[aria-expanded="true"] .vp-issues-caret { transform: rotate(180deg); }
.vp-issues-row > td { padding: 0; background: var(--bg-secondary); }
.vp-issues-body { padding: 14px 16px; font-size: 0.84rem; color: var(--ink-2); }
.vp-issue-list { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.vp-issue { display: flex; align-items: flex-start; gap: 10px; line-height: 1.5; }
.vp-issue strong { color: var(--ink); font-weight: 600; word-break: break-word; }
.vp-issue-detail { display: block; color: var(--ink-3); font-size: 0.8rem; word-break: break-word; }
.vp-issue-sev {
    flex: 0 0 auto;
    min-width: 58px;
    text-align: center;
    text-transform: uppercase;
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: .04em;
    border: 1px solid var(--line-2);
    border-radius: 5px;
    padding: 2px 6px;
    margin-top: 1px;
    color: var(--ink-3);
}
.vp-issue.sev-critical .vp-issue-sev,
.vp-issue.sev-high .vp-issue-sev { color: var(--danger); border-color: color-mix(in srgb, var(--danger) 40%, var(--line-2)); background: color-mix(in srgb, var(--danger) 8%, transparent); }
.vp-issue.sev-medium .vp-issue-sev { color: var(--warn); border-color: color-mix(in srgb, var(--warn) 40%, var(--line-2)); background: color-mix(in srgb, var(--warn) 8%, transparent); }
.vp-issue-lead { margin: 0 0 10px; font-size: 0.8rem; color: var(--ink-2); }
/* Sector picker on the ransomware card. The sector drives the sector-activity
   line beside it and the peer benchmark on /vendors. */
.vp-sector-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.vp-sector-row .vp-weak { margin: 0; }
.vp-sector { display: inline-flex; align-items: center; gap: 8px; font-size: 0.78rem; color: var(--ink-3); }
.vp-sector select {
    font: inherit;
    font-size: 0.78rem;
    padding: 4px 8px;
    border: 1px solid var(--line-2);
    border-radius: 7px;
    background: var(--bg-secondary);
    color: var(--ink);
    cursor: pointer;
}
.vp-sector select:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
/* A contributing row is real evidence but not a counted issue, so it reads
   quieter than a severity. */
.vp-issue:not(.is-counted) .vp-issue-sev {
    color: var(--ink-3);
    border-style: dashed;
    background: none;
}
.vp-issue-more,
.vp-issue-note { margin: 12px 0 0; font-size: 0.76rem; color: var(--ink-3); }

/* Ransomware susceptibility factors. */
.vp-ransom .vp-grade strong { font-size: 30px; }
.vp-ransom .vp-grade span { text-transform: uppercase; letter-spacing: .05em; font-weight: 700; }
.vp-factors { margin: 14px 0 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.vp-factors li { font-size: 0.84rem; color: var(--ink-2); line-height: 1.5; }
.vp-factors strong { color: var(--ink); }

/* Wrapper the shared paginator attaches to on pages with bespoke table
   chrome. Layout only: the table keeps its own styling. */
.tk-paginated { display: block; }

/* Vendor detail page. Its own sections, not brand panels with exclusions. */
.vd-panel { display: none; }
.vd-panel.active { display: block; }
.vd-panel h2 { margin: 18px 0 4px; font-size: 1.05rem; }
.vd-sub { margin: 0 0 14px; font-size: 0.84rem; color: var(--ink-3); line-height: 1.55; max-width: 78ch; }
.vd-muted { color: var(--ink-3); }
.vd-triage { border: 1px solid var(--line-2); border-radius: 6px; background: var(--surface); color: var(--ink); font: inherit; font-size: 12px; padding: 3px 6px; }