/* ============================================================
   CIP SENTINEL — Design Tokens & Component Styles
   Critical Infrastructure Protection Intelligence Hub
   ============================================================

   TEXT ALIGNMENT STANDARD
   Headings, body text, card titles, card descriptions, list items,
   panel text, and labels are left-aligned (text-align: start).
   A section intro shares the left edge of the cards under it.
   The only exception is a stat tile: the large numeric KPI (or
   short stat value) and its caption are centered, and every stat
   tile uses that same treatment (.hero-stat, .ai-matrix-metric,
   .itm-stat, .cip015-timer-cell).
   Do not center a card or panel, do not center a text block with
   margin: auto and a narrow max-width, and do not use
   justify-content: center on a text container.
   ============================================================ */

/* --- Type Scale (Fluid) --- */
:root {
  --text-xs:   clamp(0.75rem,  0.7rem  + 0.25vw, 0.875rem);
  --text-sm:   clamp(0.875rem, 0.8rem  + 0.35vw, 1rem);
  --text-base: clamp(1rem,     0.95rem + 0.25vw, 1.125rem);
  --text-lg:   clamp(1.125rem, 1rem    + 0.75vw, 1.5rem);
  --text-xl:   clamp(1.5rem,   1.2rem  + 1.25vw, 2.25rem);
  --text-2xl:  clamp(2rem,     1.2rem  + 2.5vw,  3.5rem);

  /* Spacing (4px base) */
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.25rem;
  --space-6:  1.5rem;
  --space-8:  2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;
  --space-32: 8rem;

  /* Radius */
  --radius-sm: 0.375rem;
  --radius-md: 0.5rem;
  --radius-lg: 0.75rem;
  --radius-xl: 1rem;
  --radius-full: 9999px;

  /* Transitions */
  --transition-interactive: 180ms cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);

  /* Content widths. One shell for every page so headings and
     cards share a left edge. Fluid gutter lives on .hero / .section. */
  --content-max: 1560px;
  --page-gutter: clamp(0.75rem, 0.45rem + 1.1vw, 2rem);
  --content-narrow: var(--content-max);
  --content-default: var(--content-max);
  --content-wide: var(--content-max);

  /* Font families */
  --font-display: 'General Sans', 'Inter', sans-serif;
  --font-body: 'Satoshi', 'Inter', sans-serif;
  --font-mono: 'JetBrains Mono', 'Courier New', monospace;
}

/* --- DARK THEME (default for this site) --- */
:root, [data-theme="dark"] {
  --color-bg:               #0c1017;
  --color-surface:          #111820;
  --color-surface-2:        #161e28;
  --color-surface-offset:   #1a2332;
  --color-surface-offset-2: #1f2a3a;
  --color-surface-dynamic:  #253344;
  --color-divider:          #263040;
  --color-border:           #2d3a4d;

  --color-text:             #d4dbe6;
  --color-text-muted:       #7a8a9e;
  --color-text-faint:       #4a5a70;
  --color-text-inverse:     #0c1017;

  /* Primary — Teal/Cyan for CIP compliance */
  --color-primary:          #3db8c4;
  --color-primary-hover:    #2da0ab;
  --color-primary-active:   #1e8892;
  --color-primary-highlight: #1a3a40;

  /* Alert — Amber/Orange for vulnerabilities */
  --color-alert:            #e8943a;
  --color-alert-hover:      #d07c28;
  --color-alert-active:     #b86818;
  --color-alert-highlight:  #3a2e1a;

  /* Crossroads accent (indigo) — third section color */
  --color-crossroads:           #5b6ce0;
  --color-crossroads-hover:     #4858c8;
  --color-crossroads-active:    #3947b0;
  --color-crossroads-highlight: #1f2540;

  /* Critical — Red for critical severity */
  --color-critical:         #e05252;
  --color-critical-hover:   #c93e3e;
  --color-critical-highlight: #3a1a1a;

  /* Success — Green */
  --color-success:          #52b87a;
  --color-success-highlight: #1a3a28;

  /* Shadows */
  --shadow-sm: 0 1px 2px oklch(0 0 0 / 0.25);
  --shadow-md: 0 4px 12px oklch(0 0 0 / 0.35);
  --shadow-lg: 0 12px 32px oklch(0 0 0 / 0.45);
}

/* --- LINK COLOR TOKENS (added with global link rule below) ---
   These ride alongside --color-primary so the value can shift when other
   theming changes. Visited stays distinguishable but accessible. */
:root {
  --color-link:           #5fd0db;     /* slightly brighter than primary for body text, AAA on dark */
  --color-link-visited:   #b9d6c8;     /* muted teal-green, still distinguishable */
  --color-link-hover:     #8ee6ee;
}

/* --- LIGHT THEME --- */
[data-theme="light"] {
  --color-bg:               #f0f2f5;
  --color-surface:          #ffffff;
  --color-surface-2:        #f7f8fa;
  --color-surface-offset:   #ebeef2;
  --color-surface-offset-2: #e2e6ec;
  --color-surface-dynamic:  #d8dce4;
  --color-divider:          #d0d5de;
  --color-border:           #c4cad6;

  --color-text:             #1a2030;
  --color-text-muted:       #5a6578;
  --color-text-faint:       #8e97a8;
  --color-text-inverse:     #f0f2f5;

  --color-primary:          #0e7a84;
  --color-primary-hover:    #096068;
  --color-primary-active:   #064a52;
  --color-primary-highlight: #d4eff2;

  --color-alert:            #c47020;
  --color-alert-hover:      #a85d14;
  --color-alert-active:     #8c4c08;
  --color-alert-highlight:  #fef3e2;

  --color-critical:         #c43030;
  --color-critical-hover:   #a52424;
  --color-critical-highlight: #fde8e8;

  --color-success:          #2d8a52;
  --color-success-highlight: #e2f5ea;

  --color-link:             #0a6770;     /* deeper teal, AA on light bg */
  --color-link-visited:     #6b3a8c;     /* purple, conventional visited cue */
  --color-link-hover:       #084f57;

  --shadow-sm: 0 1px 2px oklch(0.2 0.01 240 / 0.06);
  --shadow-md: 0 4px 12px oklch(0.2 0.01 240 / 0.08);
  --shadow-lg: 0 12px 32px oklch(0.2 0.01 240 / 0.12);
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme]) {
    --color-bg:               #f0f2f5;
    --color-surface:          #ffffff;
    --color-surface-2:        #f7f8fa;
    --color-surface-offset:   #ebeef2;
    --color-surface-offset-2: #e2e6ec;
    --color-surface-dynamic:  #d8dce4;
    --color-divider:          #d0d5de;
    --color-border:           #c4cad6;
    --color-text:             #1a2030;
    --color-text-muted:       #5a6578;
    --color-text-faint:       #8e97a8;
    --color-text-inverse:     #f0f2f5;
    --color-primary:          #0e7a84;
    --color-primary-hover:    #096068;
    --color-primary-active:   #064a52;
    --color-primary-highlight: #d4eff2;
    --color-alert:            #c47020;
    --color-alert-hover:      #a85d14;
    --color-alert-active:     #8c4c08;
    --color-alert-highlight:  #fef3e2;
    --color-critical:         #c43030;
    --color-critical-hover:   #a52424;
    --color-critical-highlight: #fde8e8;
    --color-success:          #2d8a52;
    --color-success-highlight: #e2f5ea;
    --color-link:             #0a6770;
    --color-link-visited:     #6b3a8c;
    --color-link-hover:       #084f57;
    --shadow-sm: 0 1px 2px oklch(0.2 0.01 240 / 0.06);
    --shadow-md: 0 4px 12px oklch(0.2 0.01 240 / 0.08);
    --shadow-lg: 0 12px 32px oklch(0.2 0.01 240 / 0.12);
  }
}

/* --- GLOBAL LINK STYLING ---
   Targets links inside content/structural regions only.
   Excluded by selector specificity:
     - .nav-links a (sidebar nav)
     - .standard-card a (compact cards)
     - inline styled anchors with explicit color in HTML (override)
   :visited gets a distinct token so previously-clicked links remain readable. */
main a:not([class]),
main a.fg-link,
main p a,
main li a,
main td a,
main h1 a, main h2 a, main h3 a, main h4 a,
main figcaption a,
.fg-body a,
.fg-prose a,
.op-fg-prose a,
.legal-page a,
.modal-source a,
.modal-table a,
.geo-sources-grid a,
.tm-sources a,
.tm-cve-list a,
.tm-methodology a,
.doc-list a,
.footer-legal a,
.footer-legal-links a,
footer.site-footer a {
  color: var(--color-link);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
  transition: color 0.15s ease;
}

main a:not([class]):visited,
main a.fg-link:visited,
main p a:visited,
main li a:visited,
main td a:visited,
main figcaption a:visited,
.fg-body a:visited,
.fg-prose a:visited,
.op-fg-prose a:visited,
.legal-page a:visited,
.modal-source a:visited,
.modal-table a:visited,
.geo-sources-grid a:visited,
.tm-sources a:visited,
.tm-cve-list a:visited,
.tm-methodology a:visited,
.doc-list a:visited,
.footer-legal a:visited,
.footer-legal-links a:visited,
footer.site-footer a:visited {
  color: var(--color-link-visited);
}

main a:not([class]):hover,
main a.fg-link:hover,
main p a:hover,
main li a:hover,
main td a:hover,
main figcaption a:hover,
.fg-body a:hover,
.fg-prose a:hover,
.op-fg-prose a:hover,
.legal-page a:hover,
.modal-source a:hover,
.modal-table a:hover,
.geo-sources-grid a:hover,
.tm-sources a:hover,
.tm-cve-list a:hover,
.tm-methodology a:hover,
.doc-list a:hover,
.footer-legal a:hover,
.footer-legal-links a:hover,
footer.site-footer a:hover {
  color: var(--color-link-hover);
  text-decoration-thickness: 2px;
}

main a:focus-visible,
.fg-body a:focus-visible,
.fg-prose a:focus-visible,
.op-fg-prose a:focus-visible,
.legal-page a:focus-visible,
footer a:focus-visible {
  outline: 2px solid var(--color-link-hover);
  outline-offset: 2px;
  border-radius: 2px;
}

/* ============================================================
   LAYOUT
   ============================================================ */

.container,
.container--narrow,
.hero-inner,
.newsletter-inner,
.footer-inner {
  width: 100%;
  max-width: var(--content-max);
  margin-inline: auto;
  padding-inline: 0;
  min-width: 0;
}

/* Direct section children that are not wrapped in .container use the
   same shell, so a full-bleed panel lines up with the hero and cards. */
.tab-content > .section > * {
  width: 100%;
  max-width: var(--content-max);
  margin-inline: auto;
  min-width: 0;
}

/* ============================================================
   HEADER / NAV
   ============================================================ */

/* ============================================================
   LEFT SIDEBAR NAVIGATION
   ============================================================ */

:root {
  --side-nav-width: 240px;
  --mobile-topbar-height: 56px;
}

/* Shared logo bits (still used by sidebar + mobile topbar) */
.logo-icon {
  width: 32px;
  height: 32px;
  min-width: 32px;
  flex-shrink: 0;
  color: var(--color-primary);
}

.logo-text {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-lg);
  letter-spacing: -0.02em;
  white-space: nowrap;
  color: var(--color-text);
}

.logo-text span {
  color: var(--color-primary);
}

/* --- Sidebar shell --- */
.side-nav {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: var(--side-nav-width);
  background: var(--color-surface);
  border-right: 1px solid var(--color-divider);
  padding: var(--space-5) var(--space-3) var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  overflow-y: auto;
  z-index: 60;
}

.side-logo {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  text-decoration: none;
  color: var(--color-text);
  padding: 0 var(--space-2) var(--space-2);
  border-bottom: 1px solid var(--color-divider);
}

.side-section {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.side-section-label {
  font-family: var(--font-mono, var(--font-body));
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-text);  /* matches "CIP" in the sidebar logo */
  padding: 0 var(--space-3);
  opacity: 1;
}

/* Nav list inside sidebar */
.side-nav .nav-links {
  display: flex;
  flex-direction: column;
  gap: 2px;
  list-style: none;
  padding: 0;
  margin: 0;
}

.side-nav .nav-links a {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-text-muted);
  text-decoration: none;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  line-height: 1.3;
  white-space: nowrap;
  transition: color var(--transition-interactive),
              background var(--transition-interactive);
}

.side-nav .nav-links a[data-tab="enforcement"] {
  white-space: normal;
  line-height: 1.35;
}
.side-nav .nav-links a[data-tab="enforcement"] span {
  min-width: 0;
}
.side-nav .nav-links a svg {
  flex-shrink: 0;
  opacity: 0.7;
  transition: opacity var(--transition-interactive);
}

.side-nav .nav-links a:hover {
  color: var(--color-text);
  background: var(--color-surface-offset);
}

.side-nav .nav-links a:hover svg {
  opacity: 1;
}

.side-nav .nav-links a.active {
  color: var(--color-primary);
  background: oklch(from var(--color-primary) l c h / 0.1);
}

.side-nav .nav-links a.active svg {
  opacity: 1;
}

/* Sidebar footer (search + theme) */
.side-footer {
  margin-top: auto;
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-divider);
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.side-search {
  flex: 1;
  min-width: 0;
  justify-content: flex-start;
}
.side-search .search-trigger-label { display: inline; }

.theme-toggle {
  padding: var(--space-2);
  border-radius: var(--radius-md);
  color: var(--color-text-muted);
  transition: color var(--transition-interactive),
              background var(--transition-interactive);
  background: transparent;
  border: none;
  cursor: pointer;
}

.theme-toggle:hover {
  color: var(--color-text);
  background: var(--color-surface-offset);
}

/* --- Main content offset (desktop) --- */
body.has-side-nav main,
body.has-side-nav .newsletter-section,
body.has-side-nav .site-footer {
  padding-left: var(--side-nav-width);
}

/* Ensure full-bleed sections still look right inside the offset frame */
body.has-side-nav main > * {
  max-width: none;
}

/* --- Mobile top bar (hidden on desktop) --- */
.mobile-topbar {
  display: none;
}

/* The hamburger only lives inside the mobile topbar, which is hidden on desktop. */

.mobile-brand {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  text-decoration: none;
  color: var(--color-text);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-base);
}

.mobile-brand span span {
  color: var(--color-primary);
}

.mobile-menu-btn {
  background: transparent;
  border: none;
  color: var(--color-text);
  cursor: pointer;
  padding: var(--space-2);
  border-radius: var(--radius-md);
}

.mobile-menu-btn:hover {
  background: var(--color-surface-offset);
}

/* Mobile backdrop */
.side-nav-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  z-index: 55;
  opacity: 0;
  transition: opacity 0.25s var(--ease-out);
}

.side-nav-backdrop.open {
  display: block;
  opacity: 1;
}

/* --- Breakpoint: below 900px, collapse sidebar to off-canvas + show topbar --- */
@media (max-width: 900px) {
  .mobile-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    height: var(--mobile-topbar-height);
    padding: 0 var(--space-3);
    background: oklch(from var(--color-bg) l c h / 0.92);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--color-divider);
    position: sticky;
    top: 0;
    z-index: 50;
  }

  .side-nav {
    transform: translateX(-100%);
    transition: transform 0.28s var(--ease-out);
    box-shadow: var(--shadow-xl, 0 20px 50px rgba(0, 0, 0, 0.45));
    width: min(320px, 85vw);
  }

  .side-nav.open {
    transform: translateX(0);
  }

  body.has-side-nav main,
  body.has-side-nav .newsletter-section,
  body.has-side-nav .site-footer {
    padding-left: 0;
  }

  /* Prevent body scroll when sidebar is open */
  body.side-nav-open {
    overflow: hidden;
  }
}

/* ============================================================
   HERO
   ============================================================ */

.hero {
  padding-block: max(clamp(var(--space-12), 8vw, var(--space-24)), 5.5rem) clamp(var(--space-8), 5vw, var(--space-16));
  padding-inline: var(--page-gutter);
  text-align: start;
  position: relative;
  overflow: hidden;
}

.hero::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: radial-gradient(ellipse 60% 50% at 20% 50%, oklch(from var(--color-primary) l c h / 0.06), transparent),
              radial-gradient(ellipse 40% 40% at 80% 30%, oklch(from var(--color-alert) l c h / 0.04), transparent);
  pointer-events: none;
}

.hero-inner {
  position: relative;
}

.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 500;
  color: var(--color-primary);
  background: var(--color-primary-highlight);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-full);
  border: 1px solid oklch(from var(--color-primary) l c h / 0.2);
  margin-bottom: var(--space-6);
}

.hero-badge .pulse {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-primary);
  animation: pulse 2s ease-in-out infinite;
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}

.hero h1 {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--color-text);
  margin-bottom: var(--space-4);
  max-width: 18ch;
}

/* One-line variant for longer titles (e.g., Critical Infrastructure Protection Sentinel) */
.hero h1.hero-heading-oneline {
  max-width: none;
  font-size: clamp(1.35rem, 0.85rem + 2.2vw, 2.5rem);
  white-space: normal;
  overflow-wrap: anywhere;
  text-align: start;
}

.hero p {
  font-size: var(--text-base);
  color: var(--color-text-muted);
  max-width: 78ch;
  margin-bottom: var(--space-8);
  line-height: 1.65;
}

.hero-stats {
  display: flex;
  gap: var(--space-8);
  flex-wrap: wrap;
}

.hero-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  min-width: 0;
}
.hero-stat-num {
  font-family: var(--font-mono);
  font-size: var(--text-xl);
  font-weight: 700;
  color: var(--color-primary);
  line-height: 1.15;
}

.hero-stat-value {
  font-family: var(--font-mono);
  font-size: var(--text-xl);
  font-weight: 700;
  color: var(--color-primary);
  line-height: 1.2;
}

.hero-stat-value.alert {
  color: var(--color-alert);
}

.hero-stat-value.critical {
  color: var(--color-critical);
}

.hero-stat-label {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-top: var(--space-1);
}

/* ============================================================
   SECTIONS
   ============================================================ */

.section {
  padding-block: clamp(var(--space-8), 6vw, var(--space-20));
  padding-inline: var(--page-gutter);
}

.section-header {
  margin-bottom: var(--space-8);
}

.section-header h2,
.section-header h3 {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--color-text);
  margin-bottom: var(--space-2);
  text-align: start;
}

.section-header p {
  font-size: var(--text-base);
  color: var(--color-text-muted);
}

.section-label {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-primary);
  margin-bottom: var(--space-3);
}

/* ============================================================
   TABS (Page Navigation)
   ============================================================ */

.page-tabs {
  display: flex;
  gap: var(--space-1);
  padding: var(--space-2) var(--space-4);
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-divider);
  overflow-x: auto;
  max-width: var(--content-wide);
  margin-inline: auto;
}

.page-tab {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-text-muted);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-md);
  white-space: nowrap;
  transition: color var(--transition-interactive),
              background var(--transition-interactive);
  cursor: pointer;
  border: none;
  background: none;
}

.page-tab:hover {
  color: var(--color-text);
  background: var(--color-surface-offset);
}

.page-tab.active {
  color: var(--color-primary);
  background: var(--color-primary-highlight);
}

.tab-content {
  display: none;
}

.tab-content.active {
  display: block;
}

/* ============================================================
   NEWS CARDS
   ============================================================ */

.news-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr));
  gap: var(--space-4);
}

.news-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  transition: box-shadow var(--transition-interactive),
              transform var(--transition-interactive),
              border-color var(--transition-interactive);
}

.news-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
  border-color: oklch(from var(--color-primary) l c h / 0.3);
}

.news-card-meta {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
}

.news-tag {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 600;
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-sm);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.news-tag.cip {
  color: var(--color-primary);
  background: var(--color-primary-highlight);
}

.news-tag.ferc {
  color: var(--color-alert);
  background: var(--color-alert-highlight);
}

.news-tag.policy {
  color: #8b7ad4;
  background: oklch(from #8b7ad4 l c h / 0.12);
}

.news-tag.cyber {
  color: var(--color-critical);
  background: var(--color-critical-highlight);
}

.news-tag.ot {
  color: var(--color-success);
  background: var(--color-success-highlight);
}

.news-date {
  font-size: var(--text-xs);
  color: var(--color-text-faint);
  font-family: var(--font-mono);
}

.news-card h3 {
  font-family: var(--font-display);
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--color-text);
  line-height: 1.4;
}

.news-card p {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: 1.6;
  flex: 1;
}

.news-card-link {
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-primary);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  transition: color var(--transition-interactive);
}

.news-card-link:hover {
  color: var(--color-primary-hover);
}

.news-card-link svg {
  width: 14px;
  height: 14px;
  transition: transform var(--transition-interactive);
}

.news-card-link:hover svg {
  transform: translateX(2px);
}

/* ============================================================
   VULNERABILITY TABLE
   ============================================================ */

.vuln-table-wrapper {
  overflow-x: auto;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
}

.vuln-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm);
}

.vuln-table thead {
  background: var(--color-surface-offset);
}

.vuln-table th {
  text-align: left;
  padding: var(--space-3) var(--space-4);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-text-muted);
  white-space: nowrap;
  border-bottom: 1px solid var(--color-divider);
}

.vuln-table td {
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--color-divider);
  vertical-align: top;
}

.vuln-table tbody tr {
  transition: background var(--transition-interactive);
}

.vuln-table tbody tr:hover {
  background: var(--color-surface-offset);
}

.vuln-table tbody tr:last-child td {
  border-bottom: none;
}

.severity-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 700;
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-sm);
  text-transform: uppercase;
}

.severity-badge.critical {
  color: var(--color-critical);
  background: var(--color-critical-highlight);
}

.severity-badge.high {
  color: var(--color-alert);
  background: var(--color-alert-highlight);
}

.severity-badge.medium {
  color: #d4a520;
  background: oklch(from #d4a520 l c h / 0.12);
}

.cvss-score {
  font-family: var(--font-mono);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.vuln-vendor {
  font-weight: 500;
  color: var(--color-text);
}

.vuln-product {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  margin-top: var(--space-1);
}

.sector-tag {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  font-weight: 600;
  padding: 2px var(--space-1);
  border-radius: var(--radius-sm);
  background: var(--color-surface-offset);
  color: var(--color-text-muted);
  white-space: nowrap;
}

/* ============================================================
   CIP STANDARDS REFERENCE
   ============================================================ */

.standards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
  gap: var(--space-4);
}

.standard-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  transition: box-shadow var(--transition-interactive),
              border-color var(--transition-interactive);
}

.standard-card:hover {
  box-shadow: var(--shadow-sm);
  border-color: oklch(from var(--color-primary) l c h / 0.3);
}

.standard-id {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--color-primary);
  text-transform: uppercase;
  margin-bottom: var(--space-2);
}

.standard-card h3 {
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-text);
  margin-bottom: var(--space-2);
}

.standard-card p {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  line-height: 1.6;
}

.standard-status {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-family: var(--font-mono);
  font-size: 0.65rem;
  font-weight: 600;
  padding: 2px var(--space-2);
  border-radius: var(--radius-full);
  margin-top: var(--space-3);
  text-transform: uppercase;
}

.standard-status.active {
  color: var(--color-success);
  background: var(--color-success-highlight);
}

.standard-status.upcoming {
  color: var(--color-alert);
  background: var(--color-alert-highlight);
}

.standard-status.development {
  color: var(--color-text-muted);
  background: var(--color-surface-offset);
}

/* ============================================================
   RESOURCES / LINKS
   ============================================================ */

.resource-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.resource-item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-4);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  text-decoration: none;
  color: var(--color-text);
  transition: box-shadow var(--transition-interactive),
              border-color var(--transition-interactive),
              transform var(--transition-interactive);
}

.resource-item:hover {
  box-shadow: var(--shadow-sm);
  border-color: oklch(from var(--color-primary) l c h / 0.3);
  transform: translateY(-1px);
}

.resource-icon {
  width: 20px;
  height: 20px;
  color: var(--color-primary);
  flex-shrink: 0;
  margin-top: 2px;
}

.resource-item h3 {
  font-size: var(--text-sm);
  font-weight: 600;
  margin-bottom: var(--space-1);
}

.resource-item p {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

/* ============================================================
   TIMELINE
   ============================================================ */

.timeline {
  position: relative;
  padding-left: var(--space-8);
}

.timeline::before {
  content: '';
  position: absolute;
  left: 12px;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--color-divider);
}

.timeline-item {
  position: relative;
  margin-bottom: var(--space-6);
}

.timeline-item::before {
  content: '';
  position: absolute;
  left: calc(-1 * var(--space-8) + 8px);
  top: 6px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--color-primary);
  border: 2px solid var(--color-bg);
}

.timeline-item.alert::before {
  background: var(--color-alert);
}

.timeline-date {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-text-faint);
  margin-bottom: var(--space-1);
}

.timeline-item h3 {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-text);
  margin-bottom: var(--space-1);
}

.timeline-item p {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  line-height: 1.6;
}

/* ============================================================
   FOOTER
   ============================================================ */

.site-footer {
  border-top: 1px solid var(--color-divider);
  padding: var(--space-8) var(--space-4);
  text-align: center;
}

.footer-inner {
  max-width: var(--content-wide);
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
}

.footer-inner p {
  font-size: var(--text-xs);
  color: var(--color-text-faint);
}

.footer-inner a {
  color: var(--color-text-muted);
  text-decoration: none;
  transition: color var(--transition-interactive);
}

.footer-inner a:hover {
  color: var(--color-primary);
}

/* RSS subscribe button */
.rss-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 12px;
  border-radius: 6px;
  background: rgba(61, 184, 196, 0.12);
  color: var(--color-primary);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-decoration: none;
  border: 1px solid rgba(61, 184, 196, 0.25);
  transition: background 0.2s, border-color 0.2s;
  white-space: nowrap;
}

.rss-btn:hover {
  background: rgba(61, 184, 196, 0.22);
  border-color: rgba(61, 184, 196, 0.5);
  color: var(--color-primary);
}

/* Last Updated Badge */
.last-updated-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  background: var(--color-surface);
  border: 1px solid var(--color-divider);
  border-radius: 999px;
  padding: var(--space-1) var(--space-4);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  margin-top: var(--space-2);
}

.last-updated-badge strong {
  color: var(--color-primary);
  font-weight: 600;
}

.last-updated-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--color-primary);
  flex-shrink: 0;
  animation: pulse-dot 2.5s ease-in-out infinite;
}

@keyframes pulse-dot {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.4; transform: scale(0.75); }
}

/* ============================================================
   SCROLL ANIMATIONS
   ============================================================ */

.fade-in {
  opacity: 1;
}

@supports (animation-timeline: scroll()) {
  .fade-in {
    opacity: 0;
    animation: reveal-fade linear both;
    animation-timeline: view();
    animation-range: entry 0% entry 100%;
  }
}

@keyframes reveal-fade {
  to { opacity: 1; }
}

/* ============================================================
   MOBILE
   ============================================================ */

@media (max-width: 768px) {
  /* Sidebar nav rules live in the dedicated sidebar section above. */

  .hero h1 {
    font-size: clamp(1.5rem, 1rem + 3vw, 2.5rem);
  }

  .hero-stats {
    gap: var(--space-6);
  }

  .news-grid {
    grid-template-columns: 1fr;
  }

  .standards-grid {
    grid-template-columns: 1fr;
  }

  .page-tabs {
    gap: 0;
    padding: var(--space-2);
  }

  .page-tab {
    padding: var(--space-2) var(--space-3);
    font-size: var(--text-xs);
  }

  .vuln-table {
    font-size: var(--text-xs);
  }

  .vuln-table th,
  .vuln-table td {
    padding: var(--space-2) var(--space-3);
  }

  .section {
    padding-block: var(--space-8);
    padding-inline: var(--page-gutter);
  }
}

@media (max-width: 480px) {
  .hero-stats {
    flex-direction: column;
    gap: var(--space-4);
  }
}

/* ============================================================
   HERO STAT BUTTONS
   ============================================================ */
.hero-stat-btn {
  background: none;
  border: none;
  cursor: pointer;
  text-align: center;
  padding: 0;
  font-family: inherit;
  transition: transform 0.15s ease, opacity 0.15s ease;
}
.hero-stat-btn:hover {
  opacity: 0.85;
  transform: translateY(-2px);
}
.hero-stat-btn:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 4px;
  border-radius: 4px;
}
.stat-link-hint {
  font-size: 0.7em;
  opacity: 0.6;
  vertical-align: super;
  font-style: normal;
}

/* ============================================================
   NEWSLETTER SECTION
   ============================================================ */
.newsletter-section {
  background: var(--color-surface);
  border-top: 1px solid var(--color-divider);
  border-bottom: 1px solid var(--color-divider);
  padding: var(--space-12) var(--space-6);
}
.newsletter-inner {
  display: flex;
  align-items: center;
  gap: var(--space-10);
  flex-wrap: wrap;
}
.newsletter-text {
  flex: 1 1 16rem;
  min-width: 0;
}
.newsletter-text h2 {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: 700;
  color: var(--color-text);
  margin-bottom: var(--space-2);
}
.newsletter-text p {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: 1.6;
}
.newsletter-form {
  flex: 1 1 18rem;
  min-width: 0;
  max-width: 100%;
}
.newsletter-input-group {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  min-width: 0;
  max-width: 100%;
}
.newsletter-input {
  flex: 1 1 12rem;
  min-width: 0;
  width: auto;
  max-width: 100%;
  padding: 10px 14px;
  border-radius: 8px;
  border: 1px solid var(--color-divider);
  background: var(--color-bg);
  color: var(--color-text);
  font-size: var(--text-sm);
  font-family: inherit;
  outline: none;
  transition: border-color 0.2s;
}
.newsletter-input:focus {
  border-color: var(--color-primary);
}
.newsletter-input::placeholder {
  color: var(--color-text-faint);
}
.newsletter-submit {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 18px;
  background: var(--color-primary);
  color: var(--color-bg);
  border: none;
  border-radius: 8px;
  font-size: var(--text-sm);
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  white-space: normal;
  max-width: 100%;
  transition: opacity 0.2s;
}
.newsletter-submit:hover {
  opacity: 0.88;
}
.newsletter-disclaimer {
  font-size: var(--text-xs);
  color: var(--color-text-faint);
  margin-top: var(--space-2);
}
.newsletter-success {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #4ade80;
  font-size: var(--text-sm);
  font-weight: 500;
  margin-top: var(--space-3);
}
.newsletter-success[hidden] {
  display: none !important;
}
.newsletter-error {
  color: var(--color-critical);
  font-size: var(--text-xs);
  margin-top: var(--space-2);
}
.newsletter-error[hidden] {
  display: none !important;
}

/* ============================================================
   MODALS
   ============================================================ */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.72);
  backdrop-filter: blur(4px);
  z-index: 1000;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: var(--space-6) var(--space-4);
  overflow-y: auto;
}
.modal-box {
  background: var(--color-surface);
  border: 1px solid var(--color-divider);
  border-radius: 12px;
  width: 100%;
  max-width: 720px;
  position: relative;
  margin: auto;
}
.modal-box--wide {
  max-width: 900px;
}
.modal-header {
  padding: var(--space-6) var(--space-6) var(--space-4);
  border-bottom: 1px solid var(--color-divider);
  position: relative;
}
.modal-header h2 {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 700;
  color: var(--color-text);
  margin-bottom: var(--space-1);
  padding-right: var(--space-10);
}
.modal-header p {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}
.modal-close {
  position: absolute;
  top: var(--space-4);
  right: var(--space-4);
  background: none;
  border: 1px solid var(--color-divider);
  border-radius: 6px;
  width: 32px;
  height: 32px;
  font-size: 18px;
  line-height: 1;
  color: var(--color-text-muted);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s, color 0.15s;
}
.modal-close:hover {
  background: var(--color-surface-alt);
  color: var(--color-text);
}
.modal-body {
  padding: var(--space-6);
  max-height: 70vh;
  overflow-y: auto;
}
.modal-table-wrap {
  overflow-x: auto;
  margin-bottom: var(--space-4);
  border-radius: 8px;
  border: 1px solid var(--color-divider);
}
.modal-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-xs);
}
.modal-table th {
  background: var(--color-surface-alt);
  color: var(--color-text-muted);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 10px 12px;
  text-align: left;
  white-space: nowrap;
  border-bottom: 1px solid var(--color-divider);
}
.modal-table td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--color-divider);
  color: var(--color-text);
  vertical-align: top;
  line-height: 1.5;
}
.modal-table tr:last-child td {
  border-bottom: none;
}
.modal-table tr:hover td {
  background: var(--color-surface-alt);
}
.modal-table a {
  color: var(--color-primary);
  text-decoration: none;
  font-weight: 600;
}
.modal-table a:hover {
  text-decoration: underline;
}
.modal-source {
  font-size: var(--text-xs);
  color: var(--color-text-faint);
  margin-top: var(--space-4);
}
.modal-source a {
  color: var(--color-primary);
  text-decoration: none;
}
.modal-source a:hover {
  text-decoration: underline;
}

/* Status badges in modal table */
.status-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  white-space: nowrap;
}
.status-badge.enforced {
  background: rgba(61,184,196,0.15);
  color: var(--color-primary);
  border: 1px solid rgba(61,184,196,0.3);
}
.status-badge.pending {
  background: rgba(232,148,58,0.15);
  color: var(--color-alert);
  border: 1px solid rgba(232,148,58,0.3);
}

/* CVSS pills */
.cvss-pill {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: var(--text-xs);
  font-weight: 700;
  font-family: var(--font-mono);
}
.cvss-pill.critical { background: rgba(224,82,82,0.18); color: var(--color-critical); border: 1px solid rgba(224,82,82,0.35); }
.cvss-pill.high     { background: rgba(232,148,58,0.18); color: var(--color-alert);    border: 1px solid rgba(232,148,58,0.35); }
.cvss-pill.medium   { background: rgba(250,204,21,0.18); color: #facc15;               border: 1px solid rgba(250,204,21,0.35); }
.cvss-pill.low      { background: rgba(99,199,99,0.18);  color: #63c763;               border: 1px solid rgba(99,199,99,0.35); }
.cvss-vector {
  font-family: var(--font-mono);
  font-size: 9px;
  color: var(--color-text-faint);
  white-space: nowrap;
}
.cvss-legend {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-4);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

/* CIP Updates modal */
.updates-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
  gap: var(--space-4);
  margin-bottom: var(--space-6);
}
@media (max-width: 640px) {
  .updates-grid { grid-template-columns: 1fr; }
}
.update-card {
  background: var(--color-surface-alt);
  border: 1px solid var(--color-divider);
  border-radius: 10px;
  overflow: hidden;
}
.update-card-header {
  padding: var(--space-4);
  border-bottom: 1px solid var(--color-divider);
}
.update-card-header h3 {
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--color-text);
  margin: var(--space-2) 0 var(--space-2);
}
.update-card-header p {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  line-height: 1.6;
}
.update-tag {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.update-tag.enforced { background: rgba(61,184,196,0.15); color: var(--color-primary); border: 1px solid rgba(61,184,196,0.3); }
.update-tag.pending  { background: rgba(232,148,58,0.15); color: var(--color-alert);   border: 1px solid rgba(232,148,58,0.3); }
.update-tag.pipeline { background: rgba(139,92,246,0.15); color: #a78bfa;              border: 1px solid rgba(139,92,246,0.3); }
.update-docs {
  padding: var(--space-4);
}
.update-docs h4 {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-faint);
  margin-bottom: var(--space-2);
  margin-top: var(--space-3);
}
.update-docs h4:first-child { margin-top: 0; }
.doc-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.doc-list li { font-size: var(--text-xs); }
.doc-list a {
  color: var(--color-primary);
  text-decoration: none;
}
.doc-list a:hover { text-decoration: underline; }

/* Regional entity color tags */
.doc-region {
  display: flex;
  align-items: center;
  gap: 6px;
}
.doc-region span:first-child {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 38px;
  padding: 1px 5px;
  border-radius: 4px;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.06em;
  flex-shrink: 0;
}
.doc-region.rf    span:first-child { background: rgba(59,130,246,0.18); color: #93c5fd; border: 1px solid rgba(59,130,246,0.3); }
.doc-region.serc  span:first-child { background: rgba(232,148,58,0.18); color: var(--color-alert); border: 1px solid rgba(232,148,58,0.3); }
.doc-region.wecc  span:first-child { background: rgba(61,184,196,0.18); color: var(--color-primary); border: 1px solid rgba(61,184,196,0.3); }
.doc-region.tre   span:first-child { background: rgba(139,92,246,0.18); color: #a78bfa; border: 1px solid rgba(139,92,246,0.3); }
.doc-region.mro   span:first-child { background: rgba(99,199,99,0.18);  color: #63c763; border: 1px solid rgba(99,199,99,0.3); }
.doc-region.npcc  span:first-child { background: rgba(251,113,133,0.18); color: #fda4af; border: 1px solid rgba(251,113,133,0.3); }

.regional-legend {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-divider);
}

/* Ensure hidden attribute properly hides modals */
.modal-overlay[hidden] {
  display: none !important;
}

/* ============================================================
   GLOBAL THREATS TAB
   ============================================================ */

/* Alert banner */
.geo-alert-banner {
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);
  background: rgba(224,82,82,0.08);
  border: 1px solid rgba(224,82,82,0.3);
  border-left: 4px solid var(--color-critical);
  border-radius: 8px;
  padding: var(--space-4) var(--space-5);
  margin-bottom: var(--space-8);
  font-size: var(--text-sm);
  color: var(--color-text);
  line-height: 1.6;
}
.geo-alert-icon {
  color: var(--color-critical);
  flex-shrink: 0;
  margin-top: 2px;
}
.geo-alert-banner strong {
  display: block;
  color: var(--color-critical);
  font-weight: 700;
  margin-bottom: 4px;
}

/* Section blocks */
.geo-section-block {
  margin-bottom: var(--space-10);
}
.geo-section-title {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 700;
  color: var(--color-text);
  margin-bottom: var(--space-5);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--color-divider);
}

/* Threat actor cards */
.threat-actor-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
  gap: var(--space-4);
}
@media (max-width: 768px) {
  .threat-actor-grid { grid-template-columns: 1fr; }
}
.threat-actor-card {
  background: var(--color-surface);
  border: 1px solid var(--color-divider);
  border-radius: 10px;
  overflow: hidden;
}
.threat-actor-header {
  padding: var(--space-3) var(--space-4);
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--color-divider);
}
.threat-actor-header.iran  { background: rgba(224,82,82,0.08); border-left: 3px solid var(--color-critical); }
.threat-actor-header.china { background: rgba(232,148,58,0.08); border-left: 3px solid var(--color-alert); }
.threat-actor-header.russia { background: rgba(139,92,246,0.08); border-left: 3px solid #a78bfa; }
.threat-actor-header.nk    { background: rgba(99,199,99,0.08);  border-left: 3px solid #63c763; }
.threat-nation {
  font-weight: 700;
  font-size: var(--text-sm);
  color: var(--color-text);
}
.threat-level {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 2px 8px;
  border-radius: 999px;
}
.threat-level.critical { background: rgba(224,82,82,0.15); color: var(--color-critical); border: 1px solid rgba(224,82,82,0.3); }
.threat-level.high     { background: rgba(232,148,58,0.15); color: var(--color-alert);   border: 1px solid rgba(232,148,58,0.3); }
.threat-actor-body {
  padding: var(--space-4);
}
.threat-actor-body p {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  line-height: 1.65;
  margin-bottom: var(--space-3);
}
.threat-targets {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-bottom: var(--space-3);
}
.threat-target {
  background: var(--color-surface-alt);
  border: 1px solid var(--color-divider);
  border-radius: 4px;
  padding: 2px 7px;
  font-size: 10px;
  color: var(--color-text-muted);
  font-weight: 500;
}
.threat-ttps {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  line-height: 1.6;
  margin-bottom: var(--space-3);
  padding: var(--space-3);
  background: var(--color-surface-alt);
  border-radius: 6px;
  border-left: 2px solid var(--color-divider);
}
.threat-ttps strong {
  color: var(--color-text);
}
.threat-source-link {
  font-size: var(--text-xs);
  color: var(--color-primary);
  text-decoration: none;
  font-weight: 600;
}
.threat-source-link:hover { text-decoration: underline; }

/* Physical vs Cyber split */
.impact-split-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
  gap: var(--space-4);
}
@media (max-width: 768px) {
  .impact-split-grid { grid-template-columns: 1fr; }
}
.impact-col {
  background: var(--color-surface);
  border: 1px solid var(--color-divider);
  border-radius: 10px;
  overflow: hidden;
}
.impact-col-header {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  font-size: var(--text-sm);
  font-weight: 700;
  border-bottom: 1px solid var(--color-divider);
}
.impact-col.physical .impact-col-header { color: var(--color-alert); background: rgba(232,148,58,0.08); }
.impact-col.cyber    .impact-col-header { color: var(--color-primary); background: rgba(61,184,196,0.08); }
.impact-list {
  list-style: none;
  padding: var(--space-4);
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
.impact-list li {
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--color-divider);
}
.impact-list li:last-child {
  padding-bottom: 0;
  border-bottom: none;
}
.impact-list strong {
  display: block;
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--color-text);
  margin-bottom: 4px;
}
.impact-list span {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  line-height: 1.65;
}

/* Risk matrix table */
.geo-risk-table td:nth-child(3),
.geo-risk-table td:nth-child(4) {
  text-align: center;
}
.risk-badge {
  display: inline-block;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  white-space: nowrap;
}
.risk-badge.critical { background: rgba(224,82,82,0.18); color: var(--color-critical); border: 1px solid rgba(224,82,82,0.3); }
.risk-badge.high     { background: rgba(232,148,58,0.18); color: var(--color-alert);   border: 1px solid rgba(232,148,58,0.3); }
.risk-badge.medium   { background: rgba(250,204,21,0.18); color: #facc15;              border: 1px solid rgba(250,204,21,0.3); }

/* Recommended actions */
.actions-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
  gap: var(--space-4);
}
@media (max-width: 900px) {
  .actions-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
  .actions-grid { grid-template-columns: 1fr; }
}
.action-card {
  background: var(--color-surface);
  border: 1px solid var(--color-divider);
  border-radius: 10px;
  padding: var(--space-5);
  position: relative;
}
.action-number {
  font-family: var(--font-mono);
  font-size: var(--text-2xl);
  font-weight: 700;
  color: var(--color-divider);
  line-height: 1;
  margin-bottom: var(--space-2);
}
.action-card h4 {
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--color-text);
  margin-bottom: var(--space-2);
}
.action-card p {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  line-height: 1.65;
  margin-bottom: var(--space-3);
}
.action-urgency {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.action-urgency.urgent { background: rgba(224,82,82,0.15); color: var(--color-critical); border: 1px solid rgba(224,82,82,0.3); }
.action-urgency.high   { background: rgba(232,148,58,0.15); color: var(--color-alert);   border: 1px solid rgba(232,148,58,0.3); }
.action-urgency.medium { background: rgba(61,184,196,0.15); color: var(--color-primary); border: 1px solid rgba(61,184,196,0.3); }

/* Sources */
.geo-sources {
  border-top: 1px solid var(--color-divider);
  padding-top: var(--space-6);
}
.geo-sources h4 {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-faint);
  margin-bottom: var(--space-3);
}
.geo-sources-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
  gap: var(--space-2);
}
@media (max-width: 640px) {
  .geo-sources-grid { grid-template-columns: 1fr; }
}
.geo-sources-grid a {
  font-size: var(--text-xs);
  color: var(--color-primary);
  text-decoration: none;
}
.geo-sources-grid a:hover { text-decoration: underline; }

/* ============================================================
   COMMUNITY FORUM
   ============================================================ */

/* Auth bar */
.comm-auth-bar {
  background: var(--color-surface);
  border: 1px solid var(--color-divider);
  border-radius: 8px;
  padding: var(--space-3) var(--space-5);
  margin-bottom: var(--space-6);
}
.comm-auth-logged-out,
.comm-auth-logged-in {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  flex-wrap: wrap;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}
.comm-auth-btns {
  display: flex;
  gap: var(--space-2);
}

/* Buttons */
.comm-btn-primary {
  padding: 8px 16px;
  background: var(--color-primary);
  color: var(--color-bg);
  border: none;
  border-radius: 6px;
  font-size: var(--text-sm);
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: opacity 0.2s;
}
.comm-btn-primary:hover { opacity: 0.88; }
.comm-btn-outline {
  padding: 7px 14px;
  background: transparent;
  color: var(--color-primary);
  border: 1px solid var(--color-primary);
  border-radius: 6px;
  font-size: var(--text-sm);
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: background 0.2s;
}
.comm-btn-outline:hover { background: rgba(61,184,196,0.1); }

/* Layout */
.comm-layout {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: var(--space-6);
  align-items: flex-start;
}
@media (max-width: 768px) {
  .comm-layout { grid-template-columns: 1fr; }
}

/* Sidebar */
.comm-sidebar {
  background: var(--color-surface);
  border: 1px solid var(--color-divider);
  border-radius: 10px;
  overflow: hidden;
  position: sticky;
  top: 80px;
}
.comm-sidebar-header {
  padding: var(--space-3) var(--space-4);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-faint);
  border-bottom: 1px solid var(--color-divider);
  background: var(--color-surface-alt);
}
.comm-category-list {
  list-style: none;
  padding: var(--space-2) 0;
  margin: 0;
}
.comm-category-item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: 9px var(--space-4);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.comm-category-item:hover { background: var(--color-surface-alt); color: var(--color-text); }
.comm-category-item.active { color: var(--color-text); font-weight: 600; }
.comm-cat-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.comm-cat-icon { flex-shrink: 0; }
.comm-new-post-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: calc(100% - var(--space-6));
  margin: var(--space-3) var(--space-3) var(--space-3);
  padding: 9px;
  background: var(--color-primary);
  color: var(--color-bg);
  border: none;
  border-radius: 7px;
  font-size: var(--text-sm);
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: opacity 0.2s;
}
.comm-new-post-btn:hover:not(:disabled) { opacity: 0.85; }
.comm-new-post-btn:disabled { opacity: 0.4; cursor: not-allowed; }

/* Main area */
.comm-main {
  background: var(--color-surface);
  border: 1px solid var(--color-divider);
  border-radius: 10px;
  overflow: hidden;
  min-height: 400px;
}
.comm-list-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--color-divider);
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--color-text);
  background: var(--color-surface-alt);
}
.comm-post-count {
  font-size: var(--text-xs);
  color: var(--color-text-faint);
  font-weight: 400;
}

/* Post list items */
.comm-post-item {
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--color-divider);
  cursor: pointer;
  transition: background 0.15s;
}
.comm-post-item:last-child { border-bottom: none; }
.comm-post-item:hover { background: var(--color-surface-alt); }
.comm-post-meta {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: 5px;
}
.comm-cat-badge {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.comm-post-date {
  font-size: var(--text-xs);
  color: var(--color-text-faint);
}
.comm-post-title {
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--color-text);
  margin-bottom: 4px;
  line-height: 1.4;
}
.comm-post-preview {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  line-height: 1.5;
  margin-bottom: var(--space-3);
}
.comm-post-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: var(--text-xs);
  color: var(--color-text-faint);
}
.comm-reply-count {
  display: flex;
  align-items: center;
  gap: 4px;
}

/* Single post view */
.comm-back-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: var(--space-3) var(--space-5);
  font-size: var(--text-xs);
  color: var(--color-primary);
  background: none;
  border: none;
  border-bottom: 1px solid var(--color-divider);
  width: 100%;
  text-align: left;
  cursor: pointer;
  font-family: inherit;
  font-weight: 600;
}
.comm-back-btn:hover { background: var(--color-surface-alt); }
.comm-post-full { padding: var(--space-5); border-bottom: 1px solid var(--color-divider); }
.comm-post-full-title {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 700;
  color: var(--color-text);
  margin: var(--space-2) 0 var(--space-3);
}
.comm-post-body {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: 1.7;
  white-space: pre-wrap;
}
.comm-post-author-line {
  font-size: var(--text-xs);
  color: var(--color-text-faint);
  margin-top: var(--space-4);
}

/* Replies */
.comm-replies-section { padding: var(--space-5); }
.comm-replies-section h4 {
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--color-text);
  margin-bottom: var(--space-4);
}
.comm-reply {
  border: 1px solid var(--color-divider);
  border-radius: 8px;
  padding: var(--space-4);
  margin-bottom: var(--space-3);
  background: var(--color-surface-alt);
}
.comm-reply-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-2);
  font-size: var(--text-xs);
  color: var(--color-text-faint);
}
.comm-reply-header strong { color: var(--color-text); }
.comm-reply-body {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: 1.6;
  white-space: pre-wrap;
}

/* Reply form */
.comm-reply-form { margin-top: var(--space-4); }
.comm-signin-prompt {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-top: var(--space-4);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

/* New post form */
.comm-new-post-box {
  padding: var(--space-5);
}
.comm-new-post-box h3 {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 700;
  color: var(--color-text);
  margin-bottom: var(--space-5);
}

/* Form elements */
.comm-form-group {
  margin-bottom: var(--space-4);
}
.comm-form-group label {
  display: block;
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--color-text-muted);
  margin-bottom: var(--space-2);
  letter-spacing: 0.04em;
}
.comm-input,
.comm-select,
.comm-textarea {
  width: 100%;
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid var(--color-divider);
  background: var(--color-bg);
  color: var(--color-text);
  font-size: var(--text-sm);
  font-family: inherit;
  outline: none;
  transition: border-color 0.2s;
  box-sizing: border-box;
}
.comm-input:focus,
.comm-select:focus,
.comm-textarea:focus { border-color: var(--color-primary); }
.comm-textarea { resize: vertical; min-height: 100px; }
.comm-select { cursor: pointer; }
.comm-form-actions { display: flex; gap: var(--space-3); margin-top: var(--space-3); }
.comm-form-error {
  color: var(--color-critical);
  font-size: var(--text-xs);
  margin-top: var(--space-2);
  padding: var(--space-2) var(--space-3);
  background: rgba(224,82,82,0.08);
  border-radius: 6px;
  border: 1px solid rgba(224,82,82,0.2);
}
.comm-form-success {
  color: #4ade80;
  font-size: var(--text-xs);
  margin-top: var(--space-2);
  padding: var(--space-2) var(--space-3);
  background: rgba(74,222,128,0.08);
  border-radius: 6px;
  border: 1px solid rgba(74,222,128,0.2);
}
.comm-loading {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-8);
  color: var(--color-text-faint);
  font-size: var(--text-sm);
  justify-content: center;
}
.comm-empty {
  padding: var(--space-8);
  text-align: start;
  color: var(--color-text-faint);
  font-size: var(--text-sm);
}
.spin {
  animation: spin 1s linear infinite;
}
@keyframes spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* Auth modal */
.auth-toggle {
  text-align: center;
  font-size: var(--text-xs);
  color: var(--color-text-faint);
  margin-top: var(--space-4);
}
.auth-toggle-btn {
  background: none;
  border: none;
  color: var(--color-primary);
  font-size: var(--text-xs);
  font-weight: 600;
  cursor: pointer;
  padding: 0;
  font-family: inherit;
}
.auth-toggle-btn:hover { text-decoration: underline; }

/* ============================================================
   LEGAL PAGES (privacy, terms, dmca, aup, cookies, unsubscribe)
   ============================================================ */
.legal-page {
  max-width: 780px;
  margin: 0 auto;
  padding: var(--space-8) var(--space-5) var(--space-12);
}
.legal-header {
  margin-bottom: var(--space-8);
  padding-bottom: var(--space-5);
  border-bottom: 1px solid var(--color-divider);
}
.legal-header h1 {
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  font-weight: 700;
  color: var(--color-text);
  margin-bottom: var(--space-2);
}
.legal-effective {
  font-size: var(--text-xs);
  color: var(--color-text-faint);
  font-family: var(--font-mono);
}
.legal-page section {
  margin-bottom: var(--space-6);
}
.legal-page h2 {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 700;
  color: var(--color-text);
  margin-bottom: var(--space-3);
  padding-top: var(--space-2);
}
.legal-page h3 {
  font-family: var(--font-display);
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--color-text);
  margin: var(--space-4) 0 var(--space-2);
}
.legal-page p,
.legal-page li {
  font-size: var(--text-sm);
  line-height: 1.75;
  color: var(--color-text-muted);
}
.legal-page ul,
.legal-page ol {
  padding-left: var(--space-5);
  margin-bottom: var(--space-3);
}
.legal-page li {
  margin-bottom: var(--space-2);
}
.legal-page a {
  color: var(--color-primary);
  text-decoration: none;
}
.legal-page a:hover { text-decoration: underline; }
.legal-page strong { color: var(--color-text); }

.agent-block {
  background: var(--color-surface);
  border: 1px solid var(--color-divider);
  border-left: 3px solid var(--color-primary);
  border-radius: 6px;
  padding: var(--space-4);
  margin: var(--space-3) 0;
  font-size: var(--text-sm);
  line-height: 1.8;
  color: var(--color-text);
}
.legal-note {
  background: var(--color-surface-alt);
  border-radius: 6px;
  padding: var(--space-3) var(--space-4);
  font-size: var(--text-xs) !important;
  color: var(--color-text-muted) !important;
  line-height: 1.6 !important;
  border-left: 3px solid var(--color-alert);
}

/* ============================================================
   UPDATED SITE FOOTER WITH LEGAL LINKS
   ============================================================ */
.footer-legal {
  width: 100%;
  max-width: 900px;
  margin: var(--space-5) auto 0;
  border-top: 1px solid var(--color-divider);
  padding-top: var(--space-5);
  font-size: var(--text-xs);
  color: var(--color-text-faint);
  line-height: 1.7;
  text-align: center;
}
.footer-legal p {
  margin: 0 auto var(--space-3);
  max-width: 72ch;
}
.footer-legal-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-4);
  padding-top: var(--space-3);
  margin-top: var(--space-3);
  border-top: 1px solid var(--color-divider);
  justify-content: center;
}
.footer-legal-links a {
  color: var(--color-text-muted);
  text-decoration: none;
  font-size: var(--text-xs);
  font-weight: 500;
  transition: color 0.15s;
}
.footer-legal-links a:hover {
  color: var(--color-primary);
}
.footer-legal-links span {
  color: var(--color-text-faint);
  opacity: 0.5;
}

/* ============================================================
   CONTACT CARD (Resources tab)
   ============================================================ */
.contact-card {
  background: linear-gradient(135deg, rgba(61,184,196,0.08) 0%, rgba(61,184,196,0.02) 100%);
  border: 1px solid rgba(61,184,196,0.25);
  border-radius: 12px;
  padding: var(--space-5) var(--space-6);
  margin-bottom: var(--space-8);
}
.contact-card-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
  flex-wrap: wrap;
}
.contact-card-title {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 700;
  color: var(--color-text);
  margin-bottom: var(--space-2);
}
.contact-card-desc {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: 1.6;
  margin: 0;
  max-width: 480px;
}
.contact-card-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 18px;
  background: var(--color-primary);
  color: var(--color-bg);
  border-radius: 8px;
  font-size: var(--text-sm);
  font-weight: 600;
  font-family: var(--font-mono);
  text-decoration: none;
  white-space: nowrap;
  transition: opacity 0.2s, transform 0.15s;
}
.contact-card-btn:hover {
  opacity: 0.9;
  transform: translateY(-1px);
}

/* =========================================================
   THREAT MAP TAB
   ========================================================= */

.tm-filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-6);
  padding: var(--space-4) var(--space-5);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-5);
}

.tm-filter-group {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
}

.tm-filter-label {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-text-muted);
  font-weight: 600;
  margin-right: var(--space-1);
}

.tm-chip {
  font: inherit;
  font-size: 0.82rem;
  font-weight: 500;
  padding: 6px 12px;
  background: var(--color-surface-2);
  color: var(--color-text-muted);
  border: 1px solid var(--color-border);
  border-radius: 999px;
  cursor: pointer;
  transition: all 0.15s ease;
  white-space: nowrap;
}

.tm-chip:hover {
  background: var(--color-surface-offset);
  color: var(--color-text);
  border-color: var(--color-primary);
}

.tm-chip--active {
  background: var(--color-primary-highlight);
  color: var(--color-primary);
  border-color: var(--color-primary);
}

.tm-chip--critical.tm-chip--active {
  background: var(--color-critical-highlight);
  color: var(--color-critical);
  border-color: var(--color-critical);
}

.tm-chip--high.tm-chip--active {
  background: var(--color-alert-highlight);
  color: var(--color-alert);
  border-color: var(--color-alert);
}

/* Layout */
.tm-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 380px;
  gap: var(--space-5);
  margin-bottom: var(--space-6);
}

@media (max-width: 1100px) {
  .tm-layout {
    grid-template-columns: 1fr;
  }
}

/* Map container */
.tm-map-container {
  position: relative;
  background: #0c1017;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  min-height: 420px;
}

#tmMap {
  display: block;
  width: 100%;
  height: auto;
}

.tm-country {
  transition: fill 0.2s ease;
}

.tm-country--active {
  cursor: pointer;
}

.tm-marker {
  transition: r 0.2s ease;
}

.tm-marker--origin:hover,
.tm-marker--target:hover {
  r: 9;
}

.tm-pulse {
  animation: tmPulse 2.4s ease-out infinite;
  transform-origin: center;
  transform-box: fill-box;
}

@keyframes tmPulse {
  0% { r: 6; opacity: 0.7; }
  100% { r: 18; opacity: 0; }
}

.tm-legend {
  position: absolute;
  top: 12px;
  right: 12px;
  background: rgba(17, 24, 32, 0.92);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 10px 14px;
  font-size: 0.78rem;
  color: var(--color-text);
  z-index: 2;
  backdrop-filter: blur(6px);
  max-width: 220px;
}

.tm-legend-title {
  font-weight: 700;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-text-muted);
  margin-bottom: 6px;
}

.tm-legend-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 3px 0;
  color: var(--color-text-muted);
}

.tm-legend-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}

.tm-legend-dot--origin {
  background: #e05252;
  box-shadow: 0 0 6px rgba(224, 82, 82, 0.6);
}

.tm-legend-dot--target {
  background: #3db8c4;
}

.tm-legend-arc {
  width: 20px;
  height: 2px;
  background: linear-gradient(90deg, #e05252, #e8943a, #3db8c4);
  flex-shrink: 0;
}

.tm-legend-country {
  width: 14px;
  height: 10px;
  background: #263a44;
  border: 1px solid #3db8c4;
  flex-shrink: 0;
}

.tm-tooltip {
  position: absolute;
  pointer-events: none;
  background: rgba(12, 16, 23, 0.96);
  border: 1px solid var(--color-primary);
  border-radius: var(--radius-sm);
  padding: 8px 12px;
  font-size: 0.82rem;
  color: var(--color-text);
  opacity: 0;
  transition: opacity 0.15s ease;
  z-index: 3;
  max-width: 280px;
  line-height: 1.5;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
}

.tm-tooltip strong {
  color: var(--color-primary);
}

.tm-loading {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-muted);
  font-size: 0.9rem;
}

/* Side Panel */
.tm-side-panel {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-5);
  max-height: 640px;
  overflow-y: auto;
  position: relative;
}

.tm-side-empty {
  text-align: start;
  padding: var(--space-6) var(--space-3);
  color: var(--color-text-muted);
}

.tm-side-empty-icon {
  width: 48px;
  height: 48px;
  margin: 0 0 var(--space-3);
  color: var(--color-primary);
  opacity: 0.5;
}

.tm-side-empty-icon svg {
  width: 100%;
  height: 100%;
}

.tm-side-empty h3 {
  font-size: 1.05rem;
  color: var(--color-text);
  margin: 0 0 var(--space-2);
}

.tm-side-empty p {
  font-size: 0.88rem;
  margin: 0;
  line-height: 1.5;
}

/* Only display close button when it's inside the side-detail panel (its proper home).
   Defends against the deploy platform occasionally splitting our <script> tag
   and leaking the template-literal HTML into the body. */
.tm-detail-close {
  display: none;
}
.tm-side-detail .tm-detail-close {
  display: flex;
  position: absolute;
  top: 12px;
  right: 12px;
  width: 32px;
  height: 32px;
  padding: 0;
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-muted);
  transition: all 0.15s ease;
}

.tm-detail-close:hover {
  background: var(--color-critical-highlight);
  color: var(--color-critical);
  border-color: var(--color-critical);
}

.tm-detail-close svg {
  width: 14px;
  height: 14px;
}

.tm-detail-header {
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--color-divider);
  margin-bottom: var(--space-4);
  padding-right: 40px;
}

.tm-detail-header h3 {
  font-size: 1.25rem;
  margin: var(--space-2) 0 var(--space-1);
  color: var(--color-text);
  font-family: 'JetBrains Mono', monospace;
}

.tm-detail-sub {
  font-size: 0.82rem;
  color: var(--color-text-muted);
  font-weight: 500;
}

.tm-badge {
  display: inline-block;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  padding: 3px 8px;
  border-radius: var(--radius-sm);
  text-transform: uppercase;
  font-family: 'JetBrains Mono', monospace;
}

.tm-badge--critical {
  background: var(--color-critical-highlight);
  color: var(--color-critical);
  border: 1px solid var(--color-critical);
}

.tm-badge--high {
  background: var(--color-alert-highlight);
  color: var(--color-alert);
  border: 1px solid var(--color-alert);
}

.tm-badge--medium {
  background: var(--color-surface-offset);
  color: var(--color-text-muted);
  border: 1px solid var(--color-border);
}

.tm-field {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: var(--space-3) 0;
}

.tm-field-label {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-text-muted);
  font-weight: 600;
}

.tm-field-value {
  font-size: 0.9rem;
  color: var(--color-text);
}

.tm-detail-section {
  margin-top: var(--space-4);
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-divider);
}

.tm-detail-section h4 {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-primary);
  margin: 0 0 var(--space-3);
  font-weight: 700;
}

.tm-target-list,
.tm-ttp-list,
.tm-campaign-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.tm-target-list li,
.tm-ttp-list li,
.tm-campaign-list li {
  padding: 8px 12px;
  background: var(--color-surface-2);
  border-left: 2px solid var(--color-primary);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  font-size: 0.85rem;
  line-height: 1.5;
  color: var(--color-text);
}

.tm-target-list .tm-sectors {
  display: block;
  margin-top: 2px;
  font-size: 0.78rem;
  color: var(--color-text-muted);
}

.tm-sector-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.tm-sector-chip {
  font-size: 0.75rem;
  padding: 3px 10px;
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  border-radius: 999px;
  color: var(--color-text-muted);
}

.tm-cve-list {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.85rem;
  line-height: 1.8;
  word-break: break-word;
}

.tm-cve-list a {
  color: var(--color-alert);
  text-decoration: none;
  background: var(--color-alert-highlight);
  padding: 2px 6px;
  border-radius: 3px;
  border: 1px solid rgba(232, 148, 58, 0.3);
}

.tm-cve-list a:hover {
  background: var(--color-alert);
  color: var(--color-text-inverse);
}

.tm-sources {
  font-size: 0.85rem;
  line-height: 1.7;
}

.tm-sources a {
  color: var(--color-primary);
  text-decoration: none;
}

.tm-sources a:hover {
  text-decoration: underline;
}

.tm-muted {
  color: var(--color-text-faint);
  font-style: italic;
}

/* Actor List Grid */
.tm-actor-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
  gap: var(--space-3);
  margin-bottom: var(--space-6);
}

.tm-actor-card {
  text-align: left;
  font: inherit;
  padding: var(--space-4);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all 0.15s ease;
  color: var(--color-text);
  position: relative;
}

.tm-actor-card:hover {
  background: var(--color-surface-2);
  border-color: var(--color-primary);
  transform: translateY(-2px);
}

.tm-actor-card--selected {
  background: var(--color-primary-highlight);
  border-color: var(--color-primary);
  box-shadow: 0 0 0 1px var(--color-primary);
}

.tm-actor-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-2);
}

.tm-actor-origin {
  font-size: 0.75rem;
  color: var(--color-text-muted);
  font-weight: 500;
}

.tm-actor-name {
  font-family: 'JetBrains Mono', monospace;
  font-size: 1rem;
  font-weight: 600;
  color: var(--color-text);
  margin-bottom: 4px;
}

.tm-actor-sub {
  font-size: 0.8rem;
  color: var(--color-text-muted);
  margin-bottom: var(--space-2);
  line-height: 1.4;
}

.tm-actor-meta {
  font-size: 0.75rem;
  color: var(--color-text-faint);
  padding-top: var(--space-2);
  border-top: 1px solid var(--color-divider);
}

.tm-empty-list {
  grid-column: 1 / -1;
  padding: var(--space-5);
  text-align: start;
  color: var(--color-text-muted);
  background: var(--color-surface);
  border: 1px dashed var(--color-border);
  border-radius: var(--radius-md);
}

/* Methodology */
.tm-methodology {
  padding: var(--space-5);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  margin-top: var(--space-5);
}

.tm-methodology h3 {
  font-size: 1rem;
  margin: 0 0 var(--space-3);
  color: var(--color-primary);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-family: 'JetBrains Mono', monospace;
}

.tm-methodology p {
  font-size: 0.88rem;
  color: var(--color-text-muted);
  line-height: 1.6;
  margin: 0 0 var(--space-3);
}

.tm-methodology p:last-child {
  margin-bottom: 0;
}

.tm-methodology a {
  color: var(--color-primary);
  text-decoration: none;
}

.tm-methodology a:hover {
  text-decoration: underline;
}

.tm-methodology strong {
  color: var(--color-text);
}

/* Mobile refinements */
@media (max-width: 700px) {
  .tm-filter-bar {
    flex-direction: column;
    gap: var(--space-3);
  }
  .tm-legend {
    position: static;
    margin: 8px;
    max-width: 100%;
  }
  .tm-side-panel {
    max-height: none;
  }
}

/* =========================================================
   FERC ORDER 919 CALLOUT
   ========================================================= */

.order-919-callout {
  background: linear-gradient(135deg, rgba(61, 184, 196, 0.08), rgba(232, 148, 58, 0.05));
  border: 1px solid var(--color-primary);
  border-left: 4px solid var(--color-primary);
  border-radius: var(--radius-md);
  padding: var(--space-6);
  margin-bottom: var(--space-6);
  position: relative;
  overflow: hidden;
}

.order-919-callout::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 240px;
  height: 240px;
  background: radial-gradient(circle, rgba(61, 184, 196, 0.15) 0%, transparent 70%);
  pointer-events: none;
  transform: translate(60px, -60px);
}

.order-919-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--space-4);
  flex-wrap: wrap;
  margin-bottom: var(--space-4);
  position: relative;
  z-index: 1;
}

.order-919-eyebrow {
  display: inline-block;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  color: var(--color-primary);
  font-weight: 600;
  margin-bottom: var(--space-2);
}

.order-919-title {
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 1rem + 0.8vw, 1.45rem);
  font-weight: 700;
  color: var(--color-text);
  margin: 0 0 var(--space-2);
  line-height: 1.25;
}

.order-919-sub {
  font-size: 0.85rem;
  color: var(--color-text-muted);
  margin: 0;
  font-family: 'JetBrains Mono', monospace;
  line-height: 1.5;
}

.order-919-badge {
  display: inline-block;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  padding: 6px 12px;
  background: var(--color-primary);
  color: #0c1017;
  border-radius: var(--radius-sm);
  white-space: nowrap;
  flex-shrink: 0;
  align-self: flex-start;
}

.order-919-lead {
  font-size: 0.95rem;
  color: var(--color-text);
  line-height: 1.65;
  margin: 0 0 var(--space-5);
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--color-divider);
  position: relative;
  z-index: 1;
}

.order-919-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
  gap: var(--space-5);
  margin-bottom: var(--space-5);
  position: relative;
  z-index: 1;
}

@media (max-width: 900px) {
  .order-919-grid {
    grid-template-columns: 1fr;
  }
}

.order-919-col h4 {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-primary);
  font-weight: 700;
  margin: 0 0 var(--space-3);
  padding-bottom: var(--space-2);
  border-bottom: 1px solid rgba(61, 184, 196, 0.3);
}

.order-919-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.order-919-list li {
  font-size: 0.85rem;
  line-height: 1.55;
  color: var(--color-text);
  padding-left: 14px;
  position: relative;
}

.order-919-list li::before {
  content: "\203A";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--color-primary);
  font-weight: 700;
}

.order-919-list li strong {
  color: var(--color-primary);
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.82rem;
}

.order-919-note {
  font-size: 0.78rem;
  color: var(--color-text-muted);
  font-style: italic;
  margin: var(--space-3) 0 0;
  padding-top: var(--space-2);
  border-top: 1px dashed var(--color-divider);
}

.order-919-footer {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-4);
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-divider);
  position: relative;
  z-index: 1;
}

.order-919-timeline {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.order-919-ts-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-text-muted);
  font-weight: 600;
}

.order-919-ts-value {
  font-size: 0.9rem;
  color: var(--color-text);
  font-weight: 600;
  font-family: 'JetBrains Mono', monospace;
}

.order-919-links {
  margin-left: auto;
  display: flex;
  gap: var(--space-3);
  flex-wrap: wrap;
}

.order-919-links a {
  font-size: 0.82rem;
  color: var(--color-primary);
  text-decoration: none;
  padding: 6px 12px;
  background: rgba(61, 184, 196, 0.08);
  border: 1px solid rgba(61, 184, 196, 0.3);
  border-radius: var(--radius-sm);
  transition: all 0.15s ease;
  white-space: nowrap;
}

.order-919-links a:hover {
  background: var(--color-primary);
  color: #0c1017;
  border-color: var(--color-primary);
}

/* Order 919 status badge for affected standards */
.standard-status.order919 {
  background: rgba(61, 184, 196, 0.12);
  color: var(--color-primary);
  border: 1px solid rgba(61, 184, 196, 0.4);
  margin-top: 6px;
  font-size: 0.7rem;
  font-weight: 600;
}

/* Allow standard cards to stack multiple status badges */
.standard-card {
  display: flex;
  flex-direction: column;
}

.standard-card .standard-status + .standard-status {
  margin-top: 6px;
}

/* ============================================================
   SITE SEARCH
   ============================================================ */

/* Search trigger button in the header */
.search-trigger {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font: inherit;
  font-size: 0.82rem;
  padding: 6px 12px 6px 10px;
  background: var(--color-surface-2);
  color: var(--color-text-muted);
  border: 1px solid var(--color-border);
  border-radius: 6px;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.15s ease;
  min-width: 180px;
}
.search-trigger:hover {
  background: var(--color-surface-offset);
  color: var(--color-text);
  border-color: var(--color-primary);
}
.search-trigger svg { color: var(--color-text-muted); flex-shrink: 0; }
.search-trigger-label { flex: 1; text-align: left; }
.search-trigger-kbd {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.7rem;
  padding: 1px 6px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 3px;
  color: var(--color-text-muted);
}

/* The old 1500px collapse rule was for the top nav; with the sidebar the search
   trigger now always lives inside the sidebar footer where label fits comfortably.
   We still want to hide the kbd hint when the sidebar is narrow. */
.side-search .search-trigger-kbd { display: none; }

/* Overlay */
.search-overlay {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 10vh 16px 16px;
  opacity: 0;
  transition: opacity 0.18s ease;
  pointer-events: none;
}
.search-overlay.open { opacity: 1; pointer-events: auto; }
.search-overlay[hidden] { display: none !important; }

.search-overlay-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(8, 12, 18, 0.72);
  backdrop-filter: blur(6px);
}

.search-overlay-dialog {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 640px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.55);
  max-height: min(80vh, 720px);
  display: flex;
  flex-direction: column;
  transform: translateY(-10px) scale(0.98);
  transition: transform 0.18s ease;
}
.search-overlay.open .search-overlay-dialog { transform: none; }

.search-overlay-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--color-divider);
}
.search-overlay-icon { color: var(--color-text-muted); flex-shrink: 0; }
.search-overlay-input {
  font: inherit;
  font-size: 1rem;
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  color: var(--color-text);
  padding: 4px 0;
}
.search-overlay-input::placeholder { color: var(--color-text-faint); }
.search-overlay-close {
  font: inherit;
  background: transparent;
  border: none;
  padding: 4px 8px;
  cursor: pointer;
}
.search-overlay-close kbd {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.72rem;
  padding: 2px 8px;
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  border-radius: 4px;
  color: var(--color-text-muted);
}
.search-overlay-close:hover kbd {
  background: var(--color-critical-highlight);
  color: var(--color-critical);
  border-color: var(--color-critical);
}

.search-overlay-scope {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  background: var(--color-surface-2);
  border-bottom: 1px solid var(--color-divider);
  font-size: 0.78rem;
  color: var(--color-text-muted);
  flex-wrap: wrap;
}
.search-overlay-scope-label {
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 600;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.68rem;
}
.search-overlay-scope-value { color: var(--color-primary); font-weight: 600; }
.search-overlay-hint { margin-left: auto; font-size: 0.72rem; }
.search-overlay-hint kbd {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.68rem;
  padding: 1px 5px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 3px;
  margin: 0 2px;
}

.search-overlay-preview {
  flex: 1;
  overflow-y: auto;
  padding: 12px 8px;
  min-height: 200px;
}

.search-overlay-empty {
  text-align: start;
  padding: 36px 24px;
  color: var(--color-text-muted);
}
.search-overlay-empty-icon { color: var(--color-primary); opacity: 0.5; margin-bottom: 12px; }
.search-overlay-empty-title { font-size: 1rem; color: var(--color-text); font-weight: 600; margin-bottom: 4px; }
.search-overlay-empty-hint { font-size: 0.82rem; }

/* Result groups inside overlay */
.search-group { padding: 4px 8px 10px; }
.search-group-header {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-primary);
  font-weight: 700;
  padding: 8px 12px 6px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.search-group-count {
  background: var(--color-primary-highlight);
  color: var(--color-primary);
  padding: 1px 8px;
  border-radius: 999px;
  font-size: 0.65rem;
}

.search-group-items { display: flex; flex-direction: column; }

.search-result {
  display: block;
  width: 100%;
  text-align: left;
  font: inherit;
  padding: 10px 14px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 6px;
  cursor: pointer;
  color: var(--color-text);
  transition: background 0.12s ease, border-color 0.12s ease;
}
.search-result:hover,
.search-result:focus-visible {
  background: var(--color-surface-2);
  border-color: var(--color-border);
  outline: none;
}
.search-result-title {
  font-size: 0.92rem;
  font-weight: 600;
  line-height: 1.35;
  margin-bottom: 2px;
}
.search-result-meta {
  font-size: 0.78rem;
  color: var(--color-text-muted);
}
.search-result-cve {
  font-family: 'JetBrains Mono', monospace;
  font-weight: 700;
  color: var(--color-primary);
}
.search-result-sev {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.72rem;
  padding: 1px 6px;
  border-radius: 3px;
  font-weight: 700;
  letter-spacing: 0.06em;
}
.search-result-sev.critical { color: var(--color-critical); background: var(--color-critical-highlight); }
.search-result-sev.high     { color: var(--color-alert);    background: var(--color-alert-highlight); }
.search-result-tag {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.68rem;
  padding: 1px 6px;
  background: var(--color-surface-offset);
  border-radius: 3px;
  color: var(--color-text-muted);
}

.search-result mark {
  background: rgba(61, 184, 196, 0.25);
  color: var(--color-text);
  padding: 0 2px;
  border-radius: 2px;
}

.search-group-more {
  display: block;
  width: 100%;
  text-align: left;
  font: inherit;
  font-size: 0.82rem;
  background: transparent;
  color: var(--color-primary);
  border: none;
  padding: 8px 14px 4px;
  cursor: pointer;
  font-weight: 500;
}
.search-group-more:hover { text-decoration: underline; }

/* Dedicated search-results tab page */
.search-results-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-4);
  margin-bottom: var(--space-5);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--color-divider);
  flex-wrap: wrap;
}
.search-results-query {
  font-size: 1.1rem;
  color: var(--color-text);
}
.search-results-query span { color: var(--color-primary); font-weight: 600; font-family: 'JetBrains Mono', monospace; }
.search-results-meta { font-size: 0.85rem; color: var(--color-text-muted); }

.search-results-group { margin-bottom: var(--space-6); }
.search-results-group-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding-bottom: var(--space-2);
  border-bottom: 2px solid var(--color-primary);
  margin-bottom: var(--space-3);
}
.search-results-group-header h3 {
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-primary);
  font-family: 'JetBrains Mono', monospace;
  margin: 0;
}
.search-results-group-count { font-size: 0.82rem; color: var(--color-text-muted); }

.search-results-group-items {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
  gap: var(--space-3);
}

.search-results-group-items .search-result {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
}

.search-empty-page {
  padding: var(--space-6);
  background: var(--color-surface);
  border: 1px dashed var(--color-border);
  border-radius: var(--radius-md);
  text-align: start;
}
.search-empty-page h3 { margin: 0 0 var(--space-2); color: var(--color-text); }
.search-empty-page p  { margin: 0; color: var(--color-text-muted); font-size: 0.9rem; }

/* Scoped filter "no matches" banner */
.scope-empty {
  padding: var(--space-4) var(--space-5);
  margin-top: var(--space-4);
  background: var(--color-surface);
  border: 1px dashed var(--color-border);
  border-radius: var(--radius-md);
  text-align: start;
  color: var(--color-text-muted);
}
.scope-empty p { margin: 0 0 var(--space-2); font-size: 0.9rem; }
.scope-empty p:last-child { margin-bottom: 0; }
.scope-empty strong { color: var(--color-primary); }
.scope-empty-hint { font-size: 0.82rem; color: var(--color-text-faint); }
.scope-empty kbd {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.72rem;
  padding: 1px 6px;
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  border-radius: 3px;
  margin: 0 2px;
}

/* Flash highlight on jumped-to item */
@keyframes searchFlash {
  0%, 100% { box-shadow: 0 0 0 0 rgba(61, 184, 196, 0); }
  30%, 60% { box-shadow: 0 0 0 3px rgba(61, 184, 196, 0.45); }
}
.search-highlight-flash {
  animation: searchFlash 2.2s ease-out;
  border-radius: 4px;
}

/* =========================================================
   DASHBOARD NEWS SCROLL CONTAINER (2-row max + scroll)
   ========================================================= */

/* Section header variant with CTA on the right */
.section-header-with-cta {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-4);
  flex-wrap: wrap;
  margin-bottom: var(--space-4);
}
.section-header-with-cta > div:first-child { flex: 1; min-width: min(280px, 100%); }

.section-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 100%;
  white-space: normal;
  text-align: start;
  padding: 8px 14px;
  background: var(--color-primary-highlight);
  color: var(--color-primary);
  border: 1px solid rgba(61, 184, 196, 0.4);
  border-radius: 6px;
  font-size: 0.85rem;
  font-weight: 600;
  text-decoration: none;
  overflow-wrap: anywhere;
  transition: all 0.15s ease;
}
.section-cta:hover {
  background: var(--color-primary);
  color: var(--color-bg);
  border-color: var(--color-primary);
  transform: translateX(2px);
}

/* Scroll container for the dashboard news grid.
   Height is calibrated to fit ~2 rows of cards. We use a CSS variable so we
   can tune per-breakpoint without duplicating the rule everywhere. */
.news-scroll {
  --news-scroll-height: 820px;       /* 2 rows at desktop, roughly 400px per row + gap */
  position: relative;
  max-height: var(--news-scroll-height);
  overflow-y: auto;
  overflow-x: hidden;
  padding-right: 6px;                /* breathing room so card shadow doesn't hit scrollbar */
  padding-bottom: 32px;              /* space above fade so last cards aren't cut mid-height */
  /* Firefox scrollbar styling */
  scrollbar-width: thin;
  scrollbar-color: rgba(61, 184, 196, 0.4) transparent;
}

/* WebKit scrollbar: slim and theme-matched */
.news-scroll::-webkit-scrollbar { width: 10px; }
.news-scroll::-webkit-scrollbar-track { background: transparent; }
.news-scroll::-webkit-scrollbar-thumb {
  background: rgba(61, 184, 196, 0.3);
  border-radius: 10px;
  border: 2px solid var(--color-bg);
}
.news-scroll::-webkit-scrollbar-thumb:hover { background: rgba(61, 184, 196, 0.55); }

/* Bottom fade to signal "more below" when content is taller than the container */
.news-scroll-fade {
  position: sticky;
  bottom: 0;
  left: 0;
  right: 0;
  height: 48px;
  margin-top: -48px;
  pointer-events: none;
  background: linear-gradient(to bottom, rgba(12, 16, 23, 0), var(--color-bg) 85%);
  z-index: 1;
}

/* Responsive height tuning so 2 rows is roughly right at each breakpoint */
@media (max-width: 1100px) {
  .news-scroll { --news-scroll-height: 780px; }
}
@media (max-width: 900px) {
  .news-scroll { --news-scroll-height: 720px; }
}
@media (max-width: 600px) {
  /* On mobile the grid collapses to 1 column. 2 cards is plenty. */
  .news-scroll { --news-scroll-height: 680px; padding-right: 0; }
}

/* Make sure the Dashboard news grid lays out the same as before inside the
   scroll container (just auto-fill columns). Also remove its own bottom margin
   since the scroll container manages spacing now. */
.news-grid-dashboard { margin-bottom: 0; }

/* ============================================================
   DASHBOARD: TWO-COLUMN NEWS SPLIT
   Replaces the old single-column scrollable news feed.
   On desktop (>=1024px): two equal columns side-by-side.
   On smaller screens: stacks vertically.
   ============================================================ */
.dash-news-split {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
  gap: var(--space-6);
  align-items: start;
}

@media (max-width: 1023px) {
  .dash-news-split {
    grid-template-columns: 1fr;
    gap: var(--space-8);
  }
}

.dash-news-col {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.dash-news-col-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-3);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--color-divider);
  flex-wrap: wrap;
}

.dash-news-col-title {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 700;
  color: var(--color-text);
  line-height: 1.2;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.dash-news-col-eyebrow {
  font-family: var(--font-mono, "SF Mono", Menlo, monospace);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-primary);
}

.dash-news-col-cta {
  flex-shrink: 0;
  font-size: var(--text-sm);
  white-space: normal;
}

/* Each column's news-grid stacks cards vertically (single column inside the column) */
.news-grid-dashboard-col {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin: 0;
}

/* Make cards inside the dashboard columns slightly more compact than the
   full-tab cards, since we have less horizontal space and want all 3 to read
   well without scrolling. */
.news-grid-dashboard-col .news-card {
  padding: var(--space-4) var(--space-5);
}

.news-grid-dashboard-col .news-card h3 {
  font-size: var(--text-base);
  line-height: 1.35;
  margin-bottom: var(--space-2);
}

.news-grid-dashboard-col .news-card p {
  font-size: var(--text-sm);
  line-height: 1.5;
  /* Clamp body text to 4 lines to keep all 3 cards visually balanced */
  display: -webkit-box;
  -webkit-line-clamp: 4;
  line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-bottom: var(--space-3);
}

/* ============================================================
   VULNERABILITY FILTER BAR
   ============================================================ */
.vuln-filter-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3) var(--space-5);
  padding: var(--space-3) var(--space-4);
  margin-bottom: var(--space-4);
  background: var(--color-surface);
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-md);
}
.vuln-filter-group {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
}
.vuln-filter-label {
  font-family: var(--font-mono, "SF Mono", Menlo, monospace);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-right: var(--space-1);
}
.vuln-filter-btn {
  background: transparent;
  border: 1px solid var(--color-divider);
  color: var(--color-text-muted);
  padding: 4px 12px;
  font-size: var(--text-sm);
  font-weight: 500;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease;
}
.vuln-filter-btn:hover {
  color: var(--color-text);
  border-color: var(--color-primary);
}
.vuln-filter-btn.active {
  color: var(--color-primary);
  border-color: var(--color-primary);
  background: oklch(from var(--color-primary) l c h / 0.10);
}
.vuln-filter-status {
  margin-left: auto;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  font-family: var(--font-mono, "SF Mono", Menlo, monospace);
}

/* "New this week" recency toggle in the vuln filter bar */
.vuln-recency-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px 6px 12px;
  font-weight: 600;
  font-size: var(--text-sm);
  border: 1px solid var(--color-divider);
  background: var(--color-surface);
  color: var(--color-text-muted);
  cursor: pointer;
  border-radius: var(--radius-sm);
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
  position: relative;
}
.vuln-recency-btn:hover {
  border-color: var(--color-primary);
  color: var(--color-text);
}
.vuln-recency-btn.active {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-text-inverse, #0a1518);
}
.vuln-recency-btn.active .vuln-recency-dot {
  background: var(--color-text-inverse, #0a1518);
  box-shadow: none;
  animation: none;
}
.vuln-recency-btn.active .vuln-recency-count {
  background: rgba(0, 0, 0, 0.25);
  color: inherit;
}

/* Pulsing dot to draw attention when there are new items */
.vuln-recency-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-primary);
  box-shadow: 0 0 0 0 var(--color-primary);
  animation: vuln-recency-pulse 2.2s infinite;
  flex-shrink: 0;
}
.vuln-recency-btn[data-empty="true"] .vuln-recency-dot {
  background: var(--color-text-muted);
  animation: none;
  box-shadow: none;
  opacity: 0.5;
}
@keyframes vuln-recency-pulse {
  0%   { box-shadow: 0 0 0 0 oklch(from var(--color-primary) l c h / 0.55); }
  70%  { box-shadow: 0 0 0 10px oklch(from var(--color-primary) l c h / 0); }
  100% { box-shadow: 0 0 0 0 oklch(from var(--color-primary) l c h / 0); }
}
@media (prefers-reduced-motion: reduce) {
  .vuln-recency-dot { animation: none; }
}

.vuln-recency-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 20px;
  padding: 0 6px;
  border-radius: 10px;
  background: oklch(from var(--color-primary) l c h / 0.18);
  color: var(--color-primary);
  font-family: var(--font-mono, "SF Mono", Menlo, monospace);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1;
}

/* When recency filter is active, give those rows a subtle left-edge accent */
.vuln-table tbody tr.vuln-row-new td:first-child {
  position: relative;
}
.vuln-table tbody tr.vuln-row-new td:first-child::before {
  content: "";
  position: absolute;
  left: 0; top: 8px; bottom: 8px;
  width: 3px;
  background: var(--color-primary);
  border-radius: 2px;
}

/* ===========================================
   OP SENTINEL SECTION (amber accent)
   =========================================== */
.op-hero {
  background:
    radial-gradient(circle at 90% 10%, rgba(232, 148, 58, 0.10), transparent 50%),
    radial-gradient(circle at 10% 90%, rgba(232, 148, 58, 0.06), transparent 50%),
    var(--color-surface);
  border: 1px solid rgba(232, 148, 58, 0.30);
  border-radius: 14px;
  padding: var(--space-6) var(--space-7);
  margin-bottom: var(--space-8);
}
.op-eyebrow {
  font-family: "SF Mono", Menlo, monospace;
  color: var(--color-alert);
  font-size: var(--text-xs);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  margin-bottom: var(--space-3);
}
.op-hero h2 {
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  font-weight: 700;
  margin: 0 0 var(--space-3) 0;
  color: var(--color-text);
  line-height: 1.15;
}
.op-hero h2 .accent { color: var(--color-alert); }
.op-hero p { color: var(--color-text-muted); line-height: 1.6; max-width: 800px; }

.op-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: var(--space-3);
  margin-top: var(--space-5);
}
.op-stat {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 10px;
  padding: var(--space-3) var(--space-4);
  text-align: left;
}
.op-stat-num {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: 800;
  color: var(--color-alert);
  line-height: 1;
}
.op-stat-label {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-top: 4px;
}

/* Category cards */
.op-cat-grid { display: flex; flex-direction: column; gap: var(--space-3); }
.op-cat-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-left: 4px solid var(--color-alert);
  border-radius: 10px;
  overflow: hidden;
  transition: border-color 0.2s ease, background-color 0.2s ease;
}
.op-cat-card[open] {
  border-color: rgba(232, 148, 58, 0.45);
  background: var(--color-surface-2, var(--color-surface));
}
.op-cat-card summary {
  display: grid;
  grid-template-columns: 80px 1fr auto 24px;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-5);
  cursor: pointer;
  list-style: none;
  user-select: none;
}
.op-cat-card summary::-webkit-details-marker { display: none; }
.op-cat-card summary:focus-visible {
  outline: 2px solid var(--color-alert);
  outline-offset: -2px;
}
.op-cat-prefix {
  font-family: "SF Mono", Menlo, monospace;
  font-size: var(--text-xl);
  font-weight: 700;
  color: var(--color-alert);
  background: rgba(232, 148, 58, 0.10);
  border: 1px solid rgba(232, 148, 58, 0.30);
  border-radius: 6px;
  padding: 8px 0;
  text-align: center;
  letter-spacing: 0.04em;
}
.op-cat-meta {}
.op-cat-name {
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--color-text);
  margin-bottom: 2px;
}
.op-cat-summary {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: 1.45;
  margin-bottom: 4px;
}
.op-cat-applies {
  font-family: "SF Mono", Menlo, monospace;
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  letter-spacing: 0.04em;
}
.op-cat-applies-label { color: var(--color-text-faint); margin-right: 4px; }
.op-cat-count {
  font-family: "SF Mono", Menlo, monospace;
  font-size: var(--text-base);
  font-weight: 700;
  color: var(--color-alert);
  white-space: nowrap;
}
.op-cat-count span {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  font-weight: 400;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-left: 4px;
}
.op-cat-chevron {
  font-size: 18px;
  color: var(--color-text-muted);
  transition: transform 0.2s ease;
  text-align: center;
}
.op-cat-card[open] .op-cat-chevron { transform: rotate(180deg); }

.op-std-list {
  list-style: none;
  margin: 0;
  padding: 0 var(--space-5) var(--space-3);
  border-top: 1px solid var(--color-border);
}
.op-std-row {
  display: grid;
  grid-template-columns: 130px 1fr;
  gap: var(--space-4);
  align-items: baseline;
  padding: 10px 0;
  border-bottom: 1px solid var(--color-divider);
}
.op-std-row:last-child { border-bottom: none; }
.op-std-num {
  font-family: "SF Mono", Menlo, monospace;
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--color-alert) !important;
  letter-spacing: 0.02em;
  text-decoration: none;
  white-space: nowrap;
}
.op-std-num:hover { text-decoration: underline; }
.op-std-title {
  font-size: var(--text-sm);
  color: var(--color-text) !important;
  text-decoration: none;
  line-height: 1.45;
}
.op-std-title:hover { color: var(--color-alert) !important; text-decoration: underline; }
.op-cat-foot {
  padding: 0 var(--space-5) var(--space-4);
  font-size: var(--text-xs);
}
.op-cat-foot a {
  color: var(--color-alert) !important;
  text-decoration: none;
  font-family: "SF Mono", Menlo, monospace;
  letter-spacing: 0.04em;
}
.op-cat-foot a:hover { text-decoration: underline; }

/* OP roadmap (amber) */
.op-roadmap-card {
  border: 1px solid var(--color-border);
  border-radius: 10px;
  padding: var(--space-4);
  background: var(--color-surface);
}
.op-roadmap-card.is-active {
  border: 1px solid rgba(232, 148, 58, 0.40);
  background: rgba(232, 148, 58, 0.06);
}
.op-roadmap-card.is-active .op-roadmap-when { color: var(--color-alert); }
.op-roadmap-when {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 4px;
}
.op-roadmap-title { font-weight: 600; color: var(--color-text); margin-bottom: 4px; }
.op-roadmap-tag {
  font-family: "SF Mono", Menlo, monospace;
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

/* OP Field Guide article (amber accent) */
.op-fg-article {
  border-top: 1px solid var(--color-border);
  padding-top: var(--space-8);
  margin-bottom: var(--space-10);
}
.op-fg-badge {
  background: rgba(232, 148, 58, 0.15);
  color: var(--color-alert);
  padding: 4px 10px;
  border-radius: 4px;
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.op-fg-meta {
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}
.op-fg-article h3 {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: 700;
  color: var(--color-text);
  margin: var(--space-3) 0 var(--space-4);
  line-height: 1.25;
}
.op-fg-article h4 {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 600;
  margin-top: var(--space-8);
  margin-bottom: var(--space-3);
  color: var(--color-text);
}
.op-fg-prose { line-height: 1.7; color: var(--color-text); }
.op-fg-prose ul, .op-fg-prose ol { margin: var(--space-3) 0 var(--space-5) var(--space-5); }
.op-fg-prose li { margin-bottom: 6px; }
.op-fg-disclaimer {
  background: rgba(232, 148, 58, 0.06);
  border: 1px solid rgba(232, 148, 58, 0.22);
  border-radius: 10px;
  padding: var(--space-4) var(--space-5);
  margin-bottom: var(--space-8);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: 1.6;
}
.op-fg-sources {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  padding: var(--space-4);
}
.op-fg-sources ul { margin: 0; list-style: disc; padding-left: var(--space-5); line-height: 1.7; }

/* Mobile tweaks */
@media (max-width: 720px) {
  .op-cat-card summary {
    grid-template-columns: 70px 1fr 24px;
    grid-template-rows: auto auto;
    gap: var(--space-3);
  }
  .op-cat-prefix { grid-row: span 2; }
  .op-cat-count { grid-column: 2; grid-row: 2; text-align: left; }
  .op-cat-chevron { grid-column: 3; grid-row: 1 / span 2; align-self: center; }
  .op-std-row { grid-template-columns: 110px 1fr; gap: var(--space-3); }
}

/* ===========================================
   FIELD GUIDE — EXPANDABLE ARTICLE PATTERN
   =========================================== */
.fg-article, .op-fg-article {
  position: relative;
  /* In collapsed state, suppress the existing border-top + padding-top from inline styles for clean card look */
}

/* Summary card (visible when collapsed) */
.fg-summary-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 12px;
  padding: var(--space-5) var(--space-6);
  margin-bottom: var(--space-3);
  transition: border-color 0.2s ease, background-color 0.2s ease;
}
.fg-summary-card:hover {
  border-color: rgba(61, 184, 196, 0.40);
}
.op-fg-article .fg-summary-card:hover {
  border-color: rgba(232, 148, 58, 0.40);
}
.fg-summary-card .fg-summary-meta {
  display: flex;
  gap: var(--space-3);
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: var(--space-3);
}
.fg-summary-card .fg-summary-meta .fg-summary-badge {
  background: rgba(61, 184, 196, 0.15);
  color: var(--color-primary, #3db8c4);
  padding: 4px 10px;
  border-radius: 4px;
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.op-fg-article .fg-summary-card .fg-summary-meta .fg-summary-badge {
  background: rgba(232, 148, 58, 0.15);
  color: var(--color-alert);
}
.fg-summary-card .fg-summary-meta .fg-summary-stat {
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}
.fg-summary-card h3.fg-summary-title {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: 700;
  color: var(--color-text);
  margin: 0 0 var(--space-3);
  line-height: 1.25;
}
.fg-summary-card .fg-summary-teaser {
  color: var(--color-text-muted);
  line-height: 1.65;
  margin-bottom: var(--space-4);
  font-size: var(--text-base);
}
.fg-summary-card .fg-open-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  background: var(--color-primary, #3db8c4);
  color: #0a1518 !important;
  border: none;
  border-radius: 8px;
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: 700;
  letter-spacing: 0.04em;
  cursor: pointer;
  text-decoration: none !important;
  transition: transform 0.15s ease, opacity 0.15s ease;
}
.op-fg-article .fg-summary-card .fg-open-btn {
  background: var(--color-alert);
}
.fg-summary-card .fg-open-btn:hover { transform: translateY(-1px); opacity: 0.92; }
.fg-summary-card .fg-open-btn .arrow {
  transition: transform 0.2s ease;
  display: inline-block;
}
.fg-summary-card .fg-open-btn:hover .arrow { transform: translateX(2px); }

/* Expandable region (the existing article body, video, sources) */
.fg-expandable {
  display: none;
}
.fg-article.is-open .fg-expandable,
.op-fg-article.is-open .fg-expandable {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: var(--space-6);
  margin-top: var(--space-5);
  padding-top: var(--space-5);
  border-top: 1px solid var(--color-border);
}

/* Hide the summary card when open (replaced by close button) */
.fg-article.is-open .fg-summary-card,
.op-fg-article.is-open .fg-summary-card { display: none; }

/* Open-state header (badge + title + close button) */
.fg-open-header {
  display: none;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: var(--space-3);
}
.fg-article.is-open .fg-open-header,
.op-fg-article.is-open .fg-open-header { display: flex; }
.fg-open-header-meta {
  flex: 1;
  min-width: 0;
}
.fg-open-header-row {
  display: flex; gap: var(--space-3); align-items: center;
  flex-wrap: wrap; margin-bottom: var(--space-3);
}
.fg-open-header h3 {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: 700;
  color: var(--color-text);
  margin: 0;
  line-height: 1.25;
}
.fg-close-btn {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  background: transparent;
  color: var(--color-text-muted);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
}
.fg-close-btn:hover {
  border-color: var(--color-primary, #3db8c4);
  color: var(--color-text);
}
.op-fg-article .fg-close-btn:hover { border-color: var(--color-alert); }

/* Sticky ToC */
.fg-toc {
  position: sticky;
  top: var(--space-5);
  align-self: flex-start;
  max-height: calc(100vh - 100px);
  overflow-y: auto;
  padding-right: var(--space-2);
}
.fg-toc-label {
  font-family: "SF Mono", Menlo, monospace;
  font-size: var(--text-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-bottom: var(--space-3);
}
.fg-toc ul { list-style: none; padding: 0; margin: 0; }
.fg-toc li { margin-bottom: var(--space-2); }
.fg-toc a {
  display: block;
  font-size: var(--text-sm);
  color: var(--color-text-muted) !important;
  text-decoration: none;
  padding: 6px 10px;
  border-left: 2px solid transparent;
  border-radius: 0 4px 4px 0;
  transition: color 0.15s ease, border-color 0.15s ease, background-color 0.15s ease;
  line-height: 1.4;
}
.fg-toc a:hover {
  color: var(--color-text) !important;
  border-left-color: var(--color-primary, #3db8c4);
  background: rgba(61, 184, 196, 0.05);
}
.op-fg-article .fg-toc a:hover {
  border-left-color: var(--color-alert);
  background: rgba(232, 148, 58, 0.05);
}
.fg-toc a.is-active {
  color: var(--color-text) !important;
  border-left-color: var(--color-primary, #3db8c4);
  background: rgba(61, 184, 196, 0.08);
  font-weight: 600;
}
.op-fg-article .fg-toc a.is-active {
  border-left-color: var(--color-alert);
  background: rgba(232, 148, 58, 0.08);
}

/* Article body inside expandable */
.fg-body-col { min-width: 0; /* fix flexbox overflow */ }
.fg-body-col > h3:first-child {
  /* Hide the in-body h3 since we render it in the open-header */
  display: none;
}

/* Mobile: collapse to single column */
@media (max-width: 880px) {
  .fg-article.is-open .fg-expandable,
  .op-fg-article.is-open .fg-expandable {
    grid-template-columns: 1fr;
    gap: var(--space-4);
  }
  .fg-toc {
    position: static;
    max-height: none;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    padding: var(--space-3);
    background: var(--color-surface);
  }
  .fg-open-header {
    flex-direction: column;
  }
}

/* ===========================================
   CROSSROADS SECTION (indigo accent)
   Editorial column \u2014 where infrastructure, threats,
   and external pressures converge.
   =========================================== */
.cr-hero {
  background:
    radial-gradient(circle at 90% 10%, rgba(91, 108, 224, 0.12), transparent 50%),
    radial-gradient(circle at 10% 90%, rgba(91, 108, 224, 0.06), transparent 50%),
    var(--color-surface);
  border: 1px solid rgba(91, 108, 224, 0.30);
  border-radius: 14px;
  padding: var(--space-6) var(--space-7);
  margin-bottom: var(--space-8);
}
.cr-eyebrow {
  font-family: "SF Mono", Menlo, monospace;
  color: var(--color-crossroads);
  font-size: var(--text-xs);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  margin-bottom: var(--space-3);
}
.cr-hero h2 {
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  font-weight: 700;
  margin: 0 0 var(--space-3) 0;
  color: var(--color-text);
  line-height: 1.15;
}
.cr-hero h2 .accent { color: var(--color-crossroads); }
.cr-hero p { color: var(--color-text-muted); line-height: 1.6; max-width: 800px; }

/* Crossroads tag (used on news cards / dashboard) */
.news-tag.crossroads {
  background: var(--color-crossroads-highlight);
  color: var(--color-crossroads);
  border: 1px solid rgba(91, 108, 224, 0.30);
}

/* Article (Crossroads prose) \u2014 mirrors the Field Guide collapsible pattern */
.cr-article-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 12px;
  margin-bottom: var(--space-5);
  overflow: hidden;
}
.cr-article-card[open] {
  border-color: rgba(91, 108, 224, 0.40);
}
.cr-article-summary {
  padding: var(--space-5) var(--space-6);
  cursor: pointer;
  list-style: none;
}
.cr-article-summary::-webkit-details-marker { display: none; }
.cr-article-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  margin-bottom: var(--space-2);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}
.cr-article-meta .news-tag.crossroads { font-size: var(--text-xs); }
.cr-article-summary h3 {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: 700;
  color: var(--color-text);
  margin: 0 0 var(--space-3) 0;
  line-height: 1.2;
}
.cr-article-summary p {
  color: var(--color-text-muted);
  line-height: 1.6;
  margin: 0 0 var(--space-3) 0;
}
.cr-article-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: "SF Mono", Menlo, monospace;
  color: var(--color-crossroads);
  font-size: var(--text-sm);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.cr-article-card[open] .cr-article-toggle .cr-toggle-open { display: none; }
.cr-article-toggle .cr-toggle-close { display: none; }
.cr-article-card[open] .cr-article-toggle .cr-toggle-close { display: inline; }

.cr-article-body {
  padding: 0 var(--space-6) var(--space-6);
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: var(--space-6);
  border-top: 1px solid var(--color-border);
  padding-top: var(--space-5);
  margin-top: var(--space-2);
}
.cr-toc {
  position: sticky;
  top: var(--space-5);
  align-self: start;
}
.cr-toc-label {
  font-family: "SF Mono", Menlo, monospace;
  color: var(--color-crossroads);
  font-size: var(--text-xs);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  margin-bottom: var(--space-3);
}
.cr-toc ol { list-style: none; padding: 0; margin: 0; }
.cr-toc li { margin-bottom: 8px; }
.cr-toc a {
  color: var(--color-text-muted);
  text-decoration: none;
  font-size: var(--text-sm);
  line-height: 1.4;
  display: block;
  padding: 4px 0;
  border-left: 2px solid transparent;
  padding-left: 10px;
  transition: color 0.15s ease, border-color 0.15s ease;
}
.cr-toc a:hover { color: var(--color-crossroads); border-left-color: var(--color-crossroads); }

.cr-prose { line-height: 1.7; color: var(--color-text); }
.cr-prose h4 {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 700;
  color: var(--color-text);
  margin: var(--space-6) 0 var(--space-3) 0;
  padding-top: var(--space-2);
}
.cr-prose h4:first-child { margin-top: 0; }
.cr-prose p { margin: 0 0 var(--space-4) 0; color: var(--color-text); }
.cr-prose ul, .cr-prose ol { margin: var(--space-3) 0 var(--space-5) var(--space-5); }
.cr-prose li { margin-bottom: 8px; }
.cr-prose a {
  color: var(--color-crossroads);
  text-decoration: none;
  border-bottom: 1px solid rgba(91, 108, 224, 0.35);
  transition: color 0.15s ease, border-color 0.15s ease;
}
.cr-prose a:hover { color: var(--color-crossroads-hover); border-bottom-color: var(--color-crossroads-hover); }

@media (max-width: 900px) {
  .cr-article-body { grid-template-columns: 1fr; }
  .cr-toc { position: static; }
}

/* Crossroads figure block */
.cr-prose .figure-block {
  background: var(--color-surface);
  border: 1px solid rgba(91, 108, 224, 0.30);
  border-radius: 12px;
  padding: var(--space-5);
  margin: var(--space-6) 0;
}
.cr-prose .figure-block svg .box   { fill: #14282e; stroke: #5b6ce0; stroke-width: 1.2; }
.cr-prose .figure-block svg .text  { fill: #e6f0f2; font-size: 14px; text-anchor: middle; }
.cr-prose .figure-block svg .title { font-weight: 700; font-size: 15px; fill: #5b6ce0; }
.cr-prose .figure-block .figure-caption {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: 1.5;
  margin: var(--space-4) 0 0 0;
  text-align: center;
}
.cr-prose .figure-block .figure-caption strong { color: var(--color-crossroads); }


/* === AI News tag (added 2026-06-02 with AI News tab launch) === */
.news-tag.ai {
  color: #b06ee0;
  background: oklch(from #b06ee0 l c h / 0.14);
}

/* === Confirmed styles for tag classes used throughout the site === */
.news-tag.threat {
  color: var(--color-alert);
  background: var(--color-alert-highlight);
}
.news-tag.ot-ics {
  color: var(--color-success);
  background: var(--color-success-highlight);
}


/* ============================================================
   AI MILESTONE TIMELINE — AI News tab (added 2026-06-02)
   ============================================================ */
.ai-timeline-section {
  margin: 0 0 var(--space-8) 0;
  padding: var(--space-6);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}
.ai-timeline-header {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: var(--space-5);
}
.ai-timeline-eyebrow {
  display: block;
  font-family: var(--font-mono, 'SF Mono', Menlo, monospace);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #b06ee0;
  margin-bottom: 6px;
}
.ai-timeline-title {
  font-size: 1.35rem;
  font-weight: 700;
  margin: 0 0 6px 0;
  color: var(--color-text);
  line-height: 1.25;
}
.ai-timeline-subtitle {
  margin: 0;
  font-size: 0.85rem;
  color: var(--color-text-muted);
  max-width: 60ch;
  line-height: 1.4;
}
.ai-timeline-legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  font-size: 0.78rem;
  color: var(--color-text-muted);
  align-items: center;
}
.ai-tl-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}
.ai-tl-dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}
.ai-tl-dot-threat  { background: #e05252; box-shadow: 0 0 0 2px rgba(224,82,82,0.18); }
.ai-tl-dot-defense { background: #3db8c4; box-shadow: 0 0 0 2px rgba(61,184,196,0.18); }
.ai-tl-dot-policy  { background: #b06ee0; box-shadow: 0 0 0 2px rgba(176,110,224,0.18); }

/* Horizontally scrollable strip */
.ai-timeline-scroll {
  overflow-x: auto;
  overflow-y: hidden;
  padding: var(--space-2) 0 var(--space-3) 0;
  scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
}
.ai-timeline-scroll:focus { outline: 2px solid var(--color-primary); outline-offset: 2px; border-radius: 4px; }

.ai-timeline-track {
  position: relative;
  display: flex;
  gap: var(--space-4);
  padding: 36px var(--space-2) var(--space-2) var(--space-2);
  min-width: max-content;
}
.ai-timeline-loading {
  font-size: 0.85rem;
  color: var(--color-text-muted);
  padding: var(--space-4);
}

/* Horizontal baseline rail running through dot row */
.ai-timeline-rail {
  position: absolute;
  top: 42px;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(to right, transparent 0, var(--color-border) 24px, var(--color-border) calc(100% - 24px), transparent 100%);
  z-index: 0;
}

/* Each milestone is a column: dot on top, card below */
.ai-tl-item {
  position: relative;
  flex: 0 0 260px;
  width: 260px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  z-index: 1;
}
.ai-tl-marker {
  position: relative;
  height: 24px;
  margin-bottom: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ai-tl-marker .ai-tl-dot {
  width: 14px;
  height: 14px;
}
.ai-tl-card {
  background: var(--color-bg, #ffffff);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm, 6px);
  padding: var(--space-3) var(--space-3);
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 160px;
}
.ai-tl-item-threat  .ai-tl-card { border-top: 2px solid #e05252; }
.ai-tl-item-defense .ai-tl-card { border-top: 2px solid #3db8c4; }
.ai-tl-item-policy  .ai-tl-card { border-top: 2px solid #b06ee0; }

.ai-tl-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: 11px;
}
.ai-tl-kind {
  display: inline-block;
  font-family: var(--font-mono, 'SF Mono', Menlo, monospace);
  font-weight: 700;
  letter-spacing: 0.08em;
  padding: 2px 6px;
  border-radius: 3px;
  font-size: 10px;
}
.ai-tl-kind-threat  { color: #e05252; background: rgba(224,82,82,0.10); }
.ai-tl-kind-defense { color: #3db8c4; background: rgba(61,184,196,0.10); }
.ai-tl-kind-policy  { color: #b06ee0; background: rgba(176,110,224,0.10); }

.ai-tl-date {
  color: var(--color-text-muted);
  font-family: var(--font-mono, 'SF Mono', Menlo, monospace);
  font-size: 11px;
  white-space: nowrap;
}
.ai-tl-label {
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--color-text);
  line-height: 1.3;
}
.ai-tl-body {
  font-size: 0.78rem;
  color: var(--color-text-muted);
  line-height: 1.45;
  display: -webkit-box;
  -webkit-line-clamp: 5;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.ai-tl-source {
  margin-top: auto;
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--color-primary);
  text-decoration: none;
}
.ai-tl-source:hover { text-decoration: underline; }

.ai-timeline-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-border);
  font-size: 11px;
  color: var(--color-text-faint, var(--color-text-muted));
  font-family: var(--font-mono, 'SF Mono', Menlo, monospace);
  letter-spacing: 0.04em;
}

@media (max-width: 640px) {
  .ai-timeline-header { flex-direction: column; }
  .ai-tl-item { flex: 0 0 220px; width: 220px; }
  .ai-timeline-title { font-size: 1.1rem; }
}


/* ============================================================
   SITE-WIDE IMAGE LIGHTBOX (added 2026-06-03)
   ============================================================ */
.lightbox-eligible {
  cursor: zoom-in;
  transition: filter 0.15s ease-out, box-shadow 0.15s ease-out;
}
.lightbox-eligible:hover,
.lightbox-eligible:focus-visible {
  filter: brightness(1.03);
  box-shadow: 0 0 0 2px rgba(61, 184, 196, 0.45);
  outline: none;
}
.lightbox-eligible:focus-visible {
  box-shadow: 0 0 0 3px var(--color-primary, #3db8c4);
}

.lightbox-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(10, 21, 24, 0.92);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(16px, 4vh, 48px);
  cursor: zoom-out;
  animation: lightboxFadeIn 0.18s ease-out;
}
.lightbox-overlay[hidden] {
  display: none !important;
}

@keyframes lightboxFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.lightbox-close {
  position: fixed;
  top: 18px;
  right: 20px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.25);
  background: rgba(255, 255, 255, 0.08);
  color: #ffffff;
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  z-index: 1;
  transition: background 0.12s ease-out, transform 0.12s ease-out;
}
.lightbox-close:hover,
.lightbox-close:focus-visible {
  background: rgba(255, 255, 255, 0.18);
  transform: scale(1.05);
  outline: none;
}

.lightbox-figure {
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  max-width: 100%;
  max-height: 100%;
  cursor: auto;
}

.lightbox-image-wrap {
  flex: 0 1 auto;
  max-width: min(96vw, 1600px);
  max-height: calc(100vh - 120px);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.04);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5);
}

.lightbox-image,
.lightbox-svg,
.lightbox-clone {
  display: block;
  max-width: 100%;
  max-height: calc(100vh - 140px);
  object-fit: contain;
  background: #ffffff;
  border-radius: 6px;
}

/* For inline SVG charts, give them a white card so dark gridlines stay visible */
.lightbox-svg {
  padding: 24px;
  min-width: min(85vw, 1100px);
  min-height: min(70vh, 700px);
}

.lightbox-caption {
  color: #e6f0f2;
  font-size: 0.88rem;
  line-height: 1.5;
  max-width: min(85vw, 1100px);
  text-align: center;
  font-style: italic;
  opacity: 0.92;
}
.lightbox-caption:empty {
  display: none;
}

@media (max-width: 640px) {
  .lightbox-close { top: 12px; right: 12px; width: 40px; height: 40px; }
  .lightbox-svg { padding: 12px; min-width: 0; min-height: 0; }
  .lightbox-caption { font-size: 0.82rem; }
}

@media (prefers-reduced-motion: reduce) {
  .lightbox-overlay { animation: none; }
  .lightbox-eligible { transition: none; }
  .lightbox-close { transition: none; }
}


/* ============================================================
   AI THREAT MATRIX TAB (added 2026-06-08)
   ============================================================ */
.ai-matrix-metrics {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(9.5rem, 100%), 1fr));
  gap: var(--space-3);
  margin: 0 0 var(--space-6) 0;
  min-width: 0;
}
.ai-matrix-metric {
  padding: var(--space-4);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  min-width: 0;
}
.ai-matrix-metric-value {
  font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2rem);
  font-weight: 700;
  color: #b06ee0;
  line-height: 1.0;
  font-variant-numeric: tabular-nums;
}
.ai-matrix-metric-label {
  font-size: 0.75rem;
  color: var(--color-text-muted);
  margin-top: 6px;
  font-family: var(--font-mono, 'SF Mono', Menlo, monospace);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.ai-matrix-wrap {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-3);
  margin-bottom: var(--space-6);
  max-width: 100%;
  min-width: 0;
}
.ai-matrix-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  max-width: 100%;
  min-width: 0;
}
.ai-matrix-scroll:focus { outline: 2px solid #b06ee0; outline-offset: 2px; border-radius: 4px; }

.ai-matrix-table {
  width: 100%;
  min-width: 760px;
  border-collapse: separate;
  border-spacing: 4px;
  font-size: 0.78rem;
}
.ai-matrix-corner {
  padding: 6px 10px;
  text-align: left;
  font-family: var(--font-mono, 'SF Mono', Menlo, monospace);
  font-size: 0.66rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  font-weight: 600;
  vertical-align: bottom;
  min-width: 220px;
}
.ai-matrix-col-head {
  padding: 6px 4px;
  text-align: center;
  background: var(--color-bg);
  border-radius: 4px;
  color: var(--color-text);
  font-weight: 600;
  vertical-align: bottom;
  font-size: 0.74rem;
}
.ai-matrix-col-short { display: block; font-family: var(--font-mono, 'SF Mono', Menlo, monospace); letter-spacing: 0.04em; }
.ai-matrix-col-long  { display: none; font-size: 0.65rem; color: var(--color-text-muted); }
@media (min-width: 900px) {
  .ai-matrix-col-long { display: block; margin-top: 2px; }
}

.ai-matrix-row-head {
  text-align: left;
  padding: 6px 10px;
  background: var(--color-bg);
  border-radius: 4px;
  color: var(--color-text);
  font-weight: 500;
  vertical-align: middle;
}
.ai-matrix-tactic-id {
  display: block;
  font-family: var(--font-mono, 'SF Mono', Menlo, monospace);
  font-size: 0.66rem;
  color: var(--color-text-muted);
  letter-spacing: 0.04em;
}
.ai-matrix-tactic-name { display: block; font-weight: 600; }

.ai-matrix-cell {
  padding: 6px 4px;
  text-align: center;
  border-radius: 4px;
  font-family: var(--font-mono, 'SF Mono', Menlo, monospace);
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--color-text);
  transition: transform 0.12s ease-out;
  cursor: help;
  min-width: 56px;
}
.ai-matrix-cell:hover { transform: scale(1.06); }

/* Magenta heatmap (single-hue, varying lightness) */
/* Fixed dark text on all cells — the magenta heatmap backgrounds are light
   enough that #1a1024 stays WCAG-AA legible in both light and dark mode. */
.ai-cell-i0 { background: oklch(from #b06ee0 calc(l + 0.42) calc(c * 0.10) h / 0.4); color: #1a1024 !important; }
.ai-cell-i1 { background: oklch(from #b06ee0 calc(l + 0.34) calc(c * 0.20) h);       color: #1a1024 !important; }
.ai-cell-i2 { background: oklch(from #b06ee0 calc(l + 0.20) calc(c * 0.45) h);       color: #1a1024 !important; }
.ai-cell-i3 { background: oklch(from #b06ee0 calc(l + 0.06) calc(c * 0.75) h);       color: #1a1024 !important; }
.ai-cell-i4 { background: #b06ee0;                                                    color: #1a1024 !important; }

.ai-matrix-loading {
  padding: var(--space-5);
  text-align: start;
  font-size: 0.88rem;
  color: var(--color-text-muted);
}

/* Case study cards under the heatmap */
.ai-matrix-cases {
  margin: var(--space-6) 0 var(--space-6) 0;
}
.ai-matrix-cases-title {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--color-text);
  margin-bottom: var(--space-4);
}
.ai-matrix-cases-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
  gap: var(--space-3);
}
.ai-cs-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: var(--space-3);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm, 6px);
  text-decoration: none;
  color: var(--color-text);
  transition: border-color 0.12s ease-out, transform 0.12s ease-out;
}
.ai-cs-card:hover { border-color: #b06ee0; transform: translateY(-2px); }
.ai-cs-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: var(--font-mono, 'SF Mono', Menlo, monospace);
  font-size: 0.72rem;
  color: var(--color-text-muted);
}
.ai-cs-id     { color: #b06ee0; font-weight: 700; }
.ai-cs-name   { font-size: 0.92rem; font-weight: 600; line-height: 1.3; }
.ai-cs-actor, .ai-cs-target { font-size: 0.74rem; color: var(--color-text-muted); }

/* Methodology disclosure */
.ai-matrix-method {
  margin: var(--space-6) 0 var(--space-4) 0;
  padding: var(--space-4);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}
.ai-matrix-method summary {
  font-weight: 600;
  cursor: pointer;
  color: var(--color-text);
}
.ai-matrix-method-body {
  margin-top: var(--space-3);
  font-size: 0.86rem;
  color: var(--color-text-muted);
  line-height: 1.55;
}
.ai-matrix-method-body p { margin: 0 0 var(--space-3) 0; }
.ai-matrix-method-body a { color: var(--color-primary); }


/* ============================================================
   AI THREAT MATRIX DETAIL PANEL (added 2026-06-08)
   ============================================================ */
.ai-matrix-detail {
  margin: var(--space-5) 0 var(--space-6) 0;
  padding: var(--space-5);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  position: relative;
  min-height: 180px;
}
.ai-matrix-detail-empty {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: start;
  gap: 8px;
  padding: var(--space-5) var(--space-4);
  color: var(--color-text-muted);
}
/* HTML hidden attribute must win against the display:flex above */
.ai-matrix-detail-empty[hidden],
.ai-matrix-detail-body[hidden] { display: none !important; }
.ai-matrix-detail-empty svg { color: #b06ee0; opacity: 0.55; margin-bottom: 6px; }
.ai-matrix-detail-empty h3 { font-size: 1.0rem; font-weight: 600; color: var(--color-text); margin: 0; }
.ai-matrix-detail-empty p  { font-size: 0.86rem; line-height: 1.5; max-width: 60ch; margin: 4px 0 0 0; }

.ai-matrix-detail-body { position: relative; }

.ai-matrix-detail-close {
  position: absolute;
  top: -4px;
  right: -4px;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid var(--color-border);
  border-radius: 50%;
  color: var(--color-text-muted);
  cursor: pointer;
  transition: background 0.12s ease-out, color 0.12s ease-out;
}
.ai-matrix-detail-close:hover,
.ai-matrix-detail-close:focus-visible {
  background: var(--color-bg);
  color: var(--color-text);
  outline: none;
}

.ai-matrix-detail-header {
  margin-bottom: var(--space-4);
  padding-right: var(--space-6);
}
.ai-matrix-detail-eyebrow {
  font-family: var(--font-mono, 'SF Mono', Menlo, monospace);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  color: #b06ee0;
  margin-bottom: 6px;
}
.ai-matrix-detail-id    { color: #b06ee0; font-weight: 700; }
.ai-matrix-detail-times { color: var(--color-text-muted); }
.ai-matrix-detail-dep   { color: var(--color-text); }
.ai-matrix-detail-title {
  font-size: clamp(1.15rem, 1rem + 0.8vw, 1.4rem);
  font-weight: 700;
  color: var(--color-text);
  margin: 0 0 8px 0;
  line-height: 1.2;
}
.ai-matrix-detail-badges { display: flex; flex-wrap: wrap; gap: 6px; }
.ai-matrix-detail-badge {
  display: inline-block;
  font-family: var(--font-mono, 'SF Mono', Menlo, monospace);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  padding: 3px 8px;
  border-radius: 4px;
}
.ai-matrix-detail-badge-i4 { background: #b06ee0; color: #1a1024; }
.ai-matrix-detail-badge-i3 { background: oklch(from #b06ee0 calc(l + 0.06) calc(c * 0.75) h); color: #1a1024; }
.ai-matrix-detail-badge-i2 { background: oklch(from #b06ee0 calc(l + 0.20) calc(c * 0.45) h); color: #1a1024; }
.ai-matrix-detail-badge-i1 { background: oklch(from #b06ee0 calc(l + 0.34) calc(c * 0.20) h); color: #1a1024; }
.ai-matrix-detail-badge-i0 { background: var(--color-bg); color: var(--color-text-muted); border: 1px solid var(--color-border); }
.ai-matrix-detail-badge-neutral { background: var(--color-bg); color: var(--color-text-muted); border: 1px solid var(--color-border); }

.ai-matrix-detail-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
  gap: var(--space-4);
  margin-bottom: var(--space-4);
}
@media (max-width: 720px) {
  .ai-matrix-detail-grid { grid-template-columns: 1fr; }
}

.ai-matrix-detail-section h4 {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin: 0 0 6px 0;
  font-family: var(--font-mono, 'SF Mono', Menlo, monospace);
}
.ai-matrix-detail-section p {
  margin: 0 0 8px 0;
  font-size: 0.88rem;
  line-height: 1.5;
  color: var(--color-text);
}
.ai-matrix-detail-exposure-note {
  color: var(--color-text-muted) !important;
  font-style: italic;
}

.ai-matrix-detail-cases {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr));
  gap: var(--space-3);
}
.ai-matrix-detail-case {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: var(--space-3);
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: 6px;
  text-decoration: none;
  color: var(--color-text);
  transition: border-color 0.12s ease-out, transform 0.12s ease-out;
}
.ai-matrix-detail-case:hover { border-color: #b06ee0; transform: translateY(-2px); }
.ai-matrix-detail-case-meta {
  display: flex;
  justify-content: space-between;
  font-family: var(--font-mono, 'SF Mono', Menlo, monospace);
  font-size: 0.7rem;
  color: var(--color-text-muted);
}
.ai-matrix-detail-case-id   { color: #b06ee0; font-weight: 700; }
.ai-matrix-detail-case-name { font-size: 0.86rem; font-weight: 600; line-height: 1.3; }
.ai-matrix-detail-case-actor { font-size: 0.72rem; color: var(--color-text-muted); }

.ai-matrix-detail-footer {
  margin-top: var(--space-4);
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-border);
}
.ai-matrix-detail-source {
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--color-primary);
  text-decoration: none;
}
.ai-matrix-detail-source:hover { text-decoration: underline; }

.ai-matrix-muted { color: var(--color-text-muted); font-style: italic; }

/* Selected cell highlight */
.ai-matrix-cell {
  cursor: pointer;
  outline: none;
}
.ai-matrix-cell:focus-visible {
  box-shadow: 0 0 0 3px #b06ee0;
  position: relative;
  z-index: 1;
}
.ai-cell-selected {
  box-shadow: 0 0 0 3px #b06ee0 !important;
  position: relative;
  z-index: 2;
}

/* ============ Incident Drill-Down Threat Map ============ */
.itm-stats { display:grid; grid-template-columns:repeat(auto-fit, minmax(min(9rem, 100%), 1fr)); gap:.75rem; margin-bottom:1rem; min-width:0; }
.itm-stat { background:var(--color-surface-offset, #1c1b19); border:1px solid var(--color-border, #393836); border-radius:8px; padding:.7rem .9rem; display:flex; flex-direction:column; align-items:center; text-align:center; min-width:0; }
.itm-stat-value { font-size:clamp(1.35rem, 1rem + 1vw, 1.6rem); font-weight:700; color:var(--color-text, #cdccca); line-height:1.1; }
.itm-stat-label { font-size:.72rem; color:var(--color-text-muted, #797876); text-transform:uppercase; letter-spacing:.06em; margin-top:.25rem; }
.itm-toolbar { display:flex; gap:1rem; align-items:center; margin:.5rem 0 .75rem; }
.itm-back-btn { background:var(--color-surface-offset, #1c1b19); border:1px solid var(--color-border, #393836); color:var(--color-text, #cdccca); padding:.4rem .8rem; border-radius:6px; cursor:pointer; font-size:.85rem; }
.itm-back-btn:hover { background:var(--color-surface, #171614); }
.itm-crumb { font-size:.85rem; color:var(--color-text-muted, #797876); }
.itm-map-wrap { position:relative; margin-bottom:1rem; }
.itm-map { height:520px !important; width:100%; border-radius:10px; border:1px solid var(--color-border, #393836); background:#0e0f13; }
.itm-legend { position:absolute; top:12px; right:12px; background:var(--color-surface, rgba(23,26,32,0.92)); border:1px solid var(--color-border, #393836); border-radius:8px; padding:.6rem .8rem; font-size:.72rem; color:var(--color-text, #cdccca); z-index:400; max-width:240px; box-shadow:0 4px 12px rgba(0,0,0,0.35); }
.itm-legend-title { font-size:.65rem; text-transform:uppercase; letter-spacing:.08em; color:var(--color-text-muted, #797876); margin-bottom:.3rem; }
.itm-legend-row { display:flex; align-items:center; gap:.5rem; margin-bottom:.25rem; }
.itm-legend-dot { display:inline-block; width:12px; height:12px; border-radius:50%; border:2px solid var(--color-text-muted, #797876); }
.itm-legend-dot--filled { background:var(--color-text-muted, #797876); }
.itm-legend-dot--hollow { background:transparent; }
.itm-legend-dot--ai { background:transparent; border-color:#3db8c4; border-width:3px; }
.itm-detail-panel { background:var(--color-surface-offset, #1c1b19); border:1px solid var(--color-border, #393836); border-radius:10px; padding:1.1rem 1.2rem; margin-bottom:1rem; min-height:200px; }
.itm-panel-empty { text-align:start; padding:2rem 1rem; color:var(--color-text-muted, #797876); }
.itm-panel-empty-title { font-weight:600; color:var(--color-text, #cdccca); margin-bottom:.4rem; }
.itm-panel-empty-body { font-size:.9rem; max-width:65ch; margin:0; }
.itm-panel-head { display:flex; gap:1.2rem; margin-bottom:1rem; padding-bottom:.75rem; border-bottom:1px solid var(--color-border, #393836); }
.itm-panel-meta { display:flex; gap:.6rem; align-items:center; font-size:.75rem; margin-bottom:.4rem; flex-wrap:wrap; }
.itm-panel-date { color:var(--color-text-muted, #797876); font-family:'SF Mono',Menlo,monospace; }
.itm-impact-chip { color:#fff; font-size:.68rem; text-transform:uppercase; letter-spacing:.06em; padding:.15rem .45rem; border-radius:3px; font-weight:600; }
.itm-panel-attrib { font-weight:600; text-transform:uppercase; letter-spacing:.05em; font-size:.7rem; }
.itm-panel-title { font-size:1.15rem; color:var(--color-text, #cdccca); margin:.15rem 0 .3rem; }
.itm-panel-location { font-size:.82rem; color:var(--color-text-muted, #797876); }
.itm-panel-grid { display:grid; grid-template-columns:1fr 1fr; gap:1.5rem; }
@media (max-width:800px) { .itm-panel-grid { grid-template-columns:1fr; } .itm-stats { grid-template-columns:repeat(2,1fr); } }
.itm-panel-col { display:flex; flex-direction:column; gap:1rem; }
.itm-section-label { font-size:.68rem; text-transform:uppercase; letter-spacing:.08em; color:var(--color-text-muted, #797876); margin-bottom:.35rem; display:flex; justify-content:space-between; align-items:baseline; }
.itm-panel-tab-link { font-size:.7rem; color:var(--color-primary, #3db8c4); text-decoration:none; text-transform:none; letter-spacing:normal; }
.itm-panel-tab-link:hover { text-decoration:underline; }
.itm-summary-body { font-size:.88rem; color:var(--color-text, #cdccca); line-height:1.5; margin:0; }
.itm-attrib-note { font-size:.82rem; color:var(--color-text-muted, #797876); line-height:1.45; margin:0; font-style:italic; }
.itm-panel-note { font-size:.8rem; color:var(--color-text-faint, #5a5957); font-style:italic; }
.itm-badge-row { display:flex; flex-wrap:wrap; gap:.35rem; }
.itm-badge { display:inline-block; padding:.2rem .5rem; border-radius:4px; font-size:.72rem; font-family:'SF Mono',Menlo,monospace; text-decoration:none; border:1px solid; }
.itm-badge-cve    { color:#e05252; border-color:rgba(224,82,82,.4); background:rgba(224,82,82,.08); }
.itm-badge-attck  { color:var(--color-primary, #3db8c4); border-color:rgba(61,184,196,.4); background:rgba(61,184,196,.08); }
.itm-badge-atlas  { color:#b06ee0; border-color:rgba(176,110,224,.4); background:rgba(176,110,224,.08); }
.itm-badge-sector { color:var(--color-text-muted, #797876); border-color:var(--color-border, #393836); background:transparent; }
.itm-badge:hover { filter:brightness(1.2); }
.itm-src-link { color:var(--color-primary, #3db8c4); text-decoration:none; font-size:.82rem; }
.itm-src-link:hover { text-decoration:underline; }
.itm-actor-card { background:rgba(0,0,0,0.2); padding:.75rem .9rem; border-radius:6px; margin-top:.2rem; }
.itm-actor-head { display:flex; justify-content:space-between; align-items:baseline; margin-bottom:.4rem; flex-wrap:wrap; gap:.5rem; }
.itm-actor-nation { font-size:.75rem; color:var(--color-text-muted, #797876); }
.itm-actor-aliases { font-size:.78rem; color:var(--color-text-muted, #797876); margin-bottom:.5rem; }
.itm-actor-block { margin-top:.6rem; }
.itm-actor-block ul { margin:.2rem 0 0 1.1rem; padding:0; font-size:.82rem; color:var(--color-text, #cdccca); }
.itm-actor-block li { margin-bottom:.15rem; }
.itm-block-label { font-size:.65rem; text-transform:uppercase; letter-spacing:.08em; color:var(--color-text-muted, #797876); margin-bottom:.25rem; }
.itm-methodology { background:var(--color-surface-offset, #1c1b19); border:1px solid var(--color-border, #393836); border-radius:8px; padding:.9rem 1.1rem; font-size:.83rem; color:var(--color-text-muted, #797876); }
.itm-methodology h3 { font-size:.9rem; color:var(--color-text, #cdccca); margin:0 0 .4rem; }
.itm-methodology p { margin:0; line-height:1.5; }
.itm-methodology code { font-family:'SF Mono',Menlo,monospace; font-size:.78rem; color:var(--color-primary, #3db8c4); background:rgba(61,184,196,.08); padding:1px 5px; border-radius:3px; }
.itm-error { padding:2rem; text-align:start; color:var(--color-critical, #e05252); }
/* Leaflet dark tile inversion for consistent theme */
.itm-map .leaflet-tile { filter: brightness(0.55) invert(1) contrast(0.9) hue-rotate(180deg) saturate(0.35); }
.itm-map .leaflet-container { background:#0e0f13; }
.itm-map .leaflet-control-attribution { background:var(--color-surface, rgba(23,26,32,0.9)); color:var(--color-text-muted, #797876); font-size:.65rem; }
.itm-map .leaflet-control-attribution a { color:var(--color-primary, #3db8c4); }
.itm-map .leaflet-control-zoom a { background:var(--color-surface, rgba(23,26,32,0.9)); color:var(--color-text, #cdccca); border-color:var(--color-border, #393836); }
/* Only invert map tiles in dark mode; light mode uses OSM naturally */
@media (prefers-color-scheme: light) { :root:not([data-theme]) .itm-map .leaflet-tile { filter:none; } .itm-map .leaflet-container { background:#f7f9fc; } }
[data-theme="light"] .itm-map .leaflet-tile { filter:none; }
[data-theme="light"] .itm-map .leaflet-container { background:#f7f9fc; }
.itm-dot, .itm-dot-halo { cursor: pointer; }
.itm-dot { transition: transform 120ms ease-out; }
.itm-dot:hover { filter: brightness(1.15); }

/* ============ CIP-015 Countdown Timer ============ */
.cip015-timer { background:rgba(224,82,82,0.06); border:1px solid rgba(224,82,82,0.25); border-radius:10px; padding:1rem 1.25rem; margin:1.25rem 0 1.5rem; }
.cip015-timer-label { font-size:.78rem; color:var(--color-text-muted); text-transform:uppercase; letter-spacing:.06em; margin-bottom:.6rem; }
.cip015-timer-target { color:#e05252; font-weight:600; }
.cip015-timer-values { display:grid; grid-template-columns:repeat(auto-fit, minmax(min(5.5rem, 100%), 1fr)); gap:.75rem; }
.cip015-timer-cell { background:var(--color-surface); border:1px solid var(--color-border); border-radius:8px; padding:.65rem .5rem; text-align:center; }
.cip015-timer-num { display:block; font-size:2rem; font-weight:700; color:#e05252; line-height:1.1; font-variant-numeric:tabular-nums lining-nums; font-family:'SF Mono', Menlo, monospace; }
.cip015-timer-unit { display:block; font-size:.68rem; text-transform:uppercase; letter-spacing:.08em; color:var(--color-text-muted); margin-top:.2rem; }
@media (max-width:640px) { .cip015-timer-num { font-size:1.4rem; } }

/* ============ CIP-015 Vendor Block ============ */
.cip015-vendors { margin-top:1.75rem; padding-top:1.25rem; border-top:1px solid var(--color-border); }
.cip015-vendors-head h4 { font-size:1.05rem; font-weight:700; margin:0 0 .4rem; color:var(--color-text); }
.cip015-vendors-head p { font-size:.85rem; color:var(--color-text-muted); line-height:1.5; margin:0 0 1rem; }
.cip015-vendor-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(280px,100%),1fr)); gap:.75rem; margin-bottom:1rem; }
.cip015-vendor-card { background:var(--color-surface); border:1px solid var(--color-border); border-radius:8px; padding:.85rem 1rem; display:flex; flex-direction:column; }
.cip015-vendor-name { font-size:1rem; font-weight:700; color:var(--color-text); margin-bottom:.15rem; display:flex; justify-content:space-between; align-items:baseline; gap:.5rem; flex-wrap:wrap; }
.cip015-vendor-cat { font-size:.65rem; text-transform:uppercase; letter-spacing:.08em; color:#3db8c4; background:rgba(61,184,196,0.08); border:1px solid rgba(61,184,196,0.25); border-radius:3px; padding:.1rem .4rem; font-weight:600; }
.cip015-vendor-product { font-size:.78rem; color:var(--color-primary, #3db8c4); font-family:'SF Mono', Menlo, monospace; margin-bottom:.5rem; }
.cip015-vendor-desc { font-size:.83rem; color:var(--color-text-muted); line-height:1.5; margin:0 0 .6rem; flex:1; }
.cip015-vendor-link { font-size:.8rem; color:var(--color-primary, #3db8c4); text-decoration:none; font-weight:500; align-self:flex-start; }
.cip015-vendor-link:hover { text-decoration:underline; }
.cip015-vendors-footnote { font-size:.78rem; color:var(--color-text-muted); line-height:1.55; font-style:italic; background:rgba(0,0,0,0.15); border:1px solid var(--color-border); border-radius:6px; padding:.7rem .9rem; margin:0; }
.cip015-vendors-footnote strong { color:var(--color-text); font-style:normal; }

/* ============ CIP-015 Gartner MQ Summary ============ */
.cip015-gartner-summary { background:linear-gradient(180deg, rgba(61,184,196,0.05), rgba(61,184,196,0.01)); border:1px solid rgba(61,184,196,0.3); border-radius:10px; padding:1rem 1.2rem; margin-bottom:1.25rem; }
.cip015-gartner-quadrant { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(260px,100%),1fr)); gap:.85rem; margin-bottom:.75rem; }
.cip015-gartner-quad { background:var(--color-surface); border:1px solid var(--color-border); border-radius:8px; padding:.75rem .9rem; }
.cip015-gartner-quad-label { font-size:.7rem; text-transform:uppercase; letter-spacing:.09em; font-weight:700; margin-bottom:.4rem; padding-bottom:.35rem; border-bottom:1px solid var(--color-border); }
.cip015-gartner-quad-label span { font-family:'SF Mono', Menlo, monospace; font-weight:400; opacity:.7; }
.cip015-gartner-leaders .cip015-gartner-quad-label { color:#3db8c4; }
.cip015-gartner-visionaries .cip015-gartner-quad-label { color:#b06ee0; }
.cip015-gartner-challengers .cip015-gartner-quad-label { color:#e8943a; }
.cip015-gartner-quad ul { margin:0; padding-left:1.1rem; list-style:disc; }
.cip015-gartner-quad li { font-size:.82rem; color:var(--color-text-muted); line-height:1.5; margin-bottom:.35rem; }
.cip015-gartner-quad li strong { color:var(--color-text); }
.cip015-gartner-caveat { font-size:.72rem; color:var(--color-text-faint); line-height:1.5; margin:0; font-style:italic; }

.cip015-vendor-subhead { font-size:.85rem; font-weight:700; color:var(--color-text); text-transform:uppercase; letter-spacing:.08em; margin:0 0 .75rem; }
.cip015-mq-leader { color:#3db8c4 !important; background:rgba(61,184,196,0.15) !important; border-color:rgba(61,184,196,0.4) !important; }
.cip015-mq-visionary { color:#b06ee0 !important; background:rgba(176,110,224,0.15) !important; border-color:rgba(176,110,224,0.4) !important; }

/* ============ Floating Subscribe Button (top-right, all tabs) ============ */
.floating-subscribe-btn {
  position: fixed;
  top: 1.25rem;
  right: 1.25rem;
  z-index: 900;
  max-width: calc(100% - 1.5rem);
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .55rem 1.1rem;
  border: none;
  border-radius: 24px;
  background: var(--color-primary, #3db8c4);
  color: var(--color-text-inverse, #fff);
  font-size: .88rem;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(61,184,196,0.35), 0 2px 4px rgba(0,0,0,0.15);
  transition: transform .15s ease-out, box-shadow .15s ease-out, background .15s ease-out;
}
.floating-subscribe-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(61,184,196,0.45), 0 3px 6px rgba(0,0,0,0.2);
  background: var(--color-primary-hover, #4bc9d5);
}
.floating-subscribe-btn:active { transform: translateY(0); }
.floating-subscribe-btn svg { flex-shrink: 0; }
/* On very narrow screens (below the mobile-topbar breakpoint) push the button below the topbar */
@media (max-width: 900px) {
  .floating-subscribe-btn { top: calc(var(--mobile-topbar-height) + 0.65rem); right: .75rem; padding: .5rem .9rem; font-size: .82rem; }
  /* Keep the homepage hero clear of the fixed Subscribe control. */
  #tab-dashboard > .hero { padding-top: 5.5rem; }
}

/* ============ Subscribe Modal ============ */
.subscribe-modal {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 1000;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}
.subscribe-modal.is-open { display: flex; }
.subscribe-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.65);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.subscribe-modal-panel {
  position: relative;
  background: var(--color-surface, #171614);
  border: 1px solid var(--color-border, #393836);
  border-radius: 14px;
  padding: 2rem 2rem 1.5rem;
  max-width: 480px;
  width: 100%;
  max-height: calc(100vh - 2rem);
  overflow-y: auto;
  box-shadow: 0 20px 60px rgba(0,0,0,0.5);
  animation: subscribe-modal-in 200ms ease-out;
}
@keyframes subscribe-modal-in {
  from { opacity: 0; transform: translateY(12px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.subscribe-modal-close {
  position: absolute;
  top: .75rem;
  right: .75rem;
  background: transparent;
  border: none;
  color: var(--color-text-muted, #7a7974);
  cursor: pointer;
  padding: .35rem;
  border-radius: 6px;
  display: inline-flex;
}
.subscribe-modal-close:hover {
  color: var(--color-text, #cdccca);
  background: rgba(255,255,255,0.06);
}
.subscribe-modal-eyebrow {
  font-size: .7rem;
  font-family: 'SF Mono', Menlo, monospace;
  color: var(--color-primary, #3db8c4);
  letter-spacing: .08em;
  margin-bottom: .4rem;
}
.subscribe-modal-title {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--color-text, #cdccca);
  margin: 0 0 .5rem;
  line-height: 1.2;
}
.subscribe-modal-body {
  font-size: .92rem;
  color: var(--color-text-muted, #7a7974);
  line-height: 1.5;
  margin: 0 0 1.25rem;
}
.subscribe-modal-form { margin: 0; }
.subscribe-modal-label {
  display: block;
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--color-text-muted, #7a7974);
  margin-bottom: .4rem;
  font-weight: 600;
}
.subscribe-modal-input-group {
  display: flex;
  gap: .5rem;
  margin-bottom: .6rem;
}
.subscribe-modal-input {
  flex: 1;
  padding: .7rem .9rem;
  border-radius: 8px;
  border: 1px solid var(--color-border, #393836);
  background: var(--color-surface-offset, #1c1b19);
  color: var(--color-text, #cdccca);
  font-size: .95rem;
}
.subscribe-modal-input:focus {
  outline: 2px solid var(--color-primary, #3db8c4);
  outline-offset: 1px;
  border-color: transparent;
}
.subscribe-modal-submit {
  padding: .7rem 1.2rem;
  border-radius: 8px;
  border: none;
  background: var(--color-primary, #3db8c4);
  color: var(--color-text-inverse, #fff);
  font-weight: 600;
  font-size: .9rem;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  white-space: nowrap;
}
.subscribe-modal-submit:hover { background: var(--color-primary-hover, #4bc9d5); }
.subscribe-modal-submit:disabled { opacity: .6; cursor: wait; }
@media (max-width: 480px) {
  .subscribe-modal-panel { padding: 1.5rem 1.25rem 1.25rem; }
  .subscribe-modal-input-group { flex-direction: column; }
  .subscribe-modal-submit { justify-content: center; }
}
.subscribe-modal-disclaimer {
  font-size: .72rem;
  color: var(--color-text-faint, #5a5957);
  margin: 0 0 1rem;
  text-align: left;
}
.subscribe-modal-success,
.subscribe-modal-error {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .7rem .9rem;
  border-radius: 8px;
  font-size: .88rem;
  line-height: 1.4;
  margin-bottom: 1rem;
}
.subscribe-modal-success {
  background: rgba(67,122,34,0.12);
  border: 1px solid rgba(67,122,34,0.35);
  color: var(--color-success, #6daa45);
}
.subscribe-modal-error {
  background: rgba(224,82,82,0.10);
  border: 1px solid rgba(224,82,82,0.35);
  color: #e05252;
}
.subscribe-modal-benefits {
  list-style: none;
  padding: .85rem 0 0;
  margin: .5rem 0 0;
  border-top: 1px solid var(--color-border, #393836);
}
.subscribe-modal-benefits li {
  display: flex;
  align-items: center;
  gap: .55rem;
  font-size: .85rem;
  color: var(--color-text-muted, #7a7974);
  padding: .25rem 0;
}
.subscribe-modal-benefits svg {
  color: var(--color-primary, #3db8c4);
  flex-shrink: 0;
}
body.subscribe-modal-locked { overflow: hidden; }
.cr-pdf-actions {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin: 0 0 var(--space-5);
  padding: var(--space-3) var(--space-4);
  border: 1px solid color-mix(in srgb, var(--color-crossroads) 34%, var(--color-border));
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--color-crossroads) 7%, var(--color-surface));
  color: var(--color-text-muted);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
}

.cr-pdf-download {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 40px;
  padding: 0 var(--space-4);
  border-radius: var(--radius-sm);
  background: var(--color-crossroads);
  color: #fff !important;
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: 700;
  text-decoration: none !important;
}

.cr-pdf-download:hover {
  filter: brightness(1.08);
  transform: translateY(-1px);
}

.cr-pdf-download:focus-visible {
  outline: 2px solid var(--color-crossroads);
  outline-offset: 3px;
}

@media (max-width: 640px) {
  .cr-pdf-actions {
    align-items: flex-start;
    flex-direction: column;
  }

  .cr-pdf-download {
    justify-content: center;
    width: 100%;
  }
}

/* New brand mark (raster logo, Sep 2026) */
.logo-img {
  border-radius: 9px;
  object-fit: contain;
  background: #fff;
  box-shadow: 0 0 0 1px var(--color-divider);
}
.side-logo .logo-img { width: 44px; height: 44px; min-width: 44px; }
.mobile-brand .logo-img { width: 32px; height: 32px; min-width: 32px; border-radius: 7px; }

/* Standalone legal pages header (privacy, terms, cookies, aup, dmca, unsubscribe) */
.site-header .nav-wrap {
  max-width: 960px;
  margin: 0 auto;
  padding: var(--space-4) var(--space-5);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  border-bottom: 1px solid var(--color-divider);
}
.site-header .brand {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  text-decoration: none;
  color: var(--color-text);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-lg);
  letter-spacing: -0.02em;
}
.site-header .brand img { box-shadow: 0 0 0 1px var(--color-divider); background: #fff; }
.site-header .brand-accent { color: var(--color-primary); }

/* ===== Crossroads Issue 6 article components (Oct 2026) ===== */
.cr-prose .cr-standfirst {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  line-height: 1.45;
  font-weight: 600;
  color: var(--color-text);
  border-left: 3px solid var(--color-crossroads);
  padding-left: var(--space-4);
  margin: 0 0 var(--space-6) 0;
}
.cr-prose h5 {
  font-family: var(--font-display);
  font-size: var(--text-base);
  font-weight: 700;
  color: var(--color-text);
  margin: var(--space-6) 0 var(--space-2);
  letter-spacing: -0.005em;
}
.cr-prose .cr-pullquote {
  margin: var(--space-6) 0;
  padding: var(--space-5) var(--space-6);
  border-left: 4px solid var(--color-crossroads);
  background: color-mix(in srgb, var(--color-crossroads) 7%, transparent);
  border-radius: 0 var(--radius-md, 8px) var(--radius-md, 8px) 0;
}
.cr-prose .cr-pullquote p {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--text-lg);
  line-height: 1.4;
  font-weight: 600;
  color: var(--color-text);
}
.cr-prose .cr-note {
  margin: var(--space-4) 0 var(--space-5);
  padding: var(--space-3) var(--space-4);
  border: 1px dashed var(--color-divider);
  border-radius: var(--radius-md, 8px);
  font-size: var(--text-sm);
}
.cr-prose .cr-note p { margin: 0; color: var(--color-text-muted); }
.cr-prose ul.cr-cols {
  columns: 2;
  column-gap: var(--space-8);
  margin-left: var(--space-5);
}
.cr-prose ul.cr-cols li { break-inside: avoid; margin-bottom: 6px; }
@media (max-width: 640px) { .cr-prose ul.cr-cols { columns: 1; } }
.cr-prose ul.cr-questions { list-style: none; margin-left: 0; padding-left: 0; }
.cr-prose ul.cr-questions li {
  position: relative;
  padding-left: 1.6em;
}
.cr-prose ul.cr-questions li::before {
  content: "?";
  position: absolute; left: 0; top: 0;
  font-family: var(--font-mono, monospace);
  font-weight: 700;
  color: var(--color-crossroads);
}
.cr-prose ol.cr-flow {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 6px;
  margin: var(--space-4) 0 var(--space-5);
  padding: 0;
  counter-reset: crflow;
}
.cr-prose ol.cr-flow li {
  counter-increment: crflow;
  display: inline-flex;
  align-items: center;
  margin: 0;
  font-size: var(--text-sm);
  font-weight: 600;
}
.cr-prose ol.cr-flow li span, .cr-prose ol.cr-flow li {
  color: var(--color-text);
}
.cr-prose ol.cr-flow li::before {
  content: counter(crflow);
  display: inline-grid; place-items: center;
  width: 20px; height: 20px; margin-right: 6px;
  border-radius: 50%;
  background: var(--color-crossroads);
  color: #fff;
  font-size: 11px; font-family: var(--font-mono, monospace);
}
.cr-prose ol.cr-flow li:not(:last-child)::after {
  content: "→";
  margin-left: 8px;
  color: var(--color-text-faint);
}
.cr-prose ol.cr-ladder { margin-left: var(--space-5); }
.cr-prose ol.cr-ladder li::marker { color: var(--color-crossroads); font-weight: 700; }
.cr-prose ul.cr-scenarios { list-style: none; margin-left: 0; padding-left: 0; display: grid; gap: var(--space-3); }
.cr-prose ul.cr-scenarios li {
  margin: 0;
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-md, 8px);
  background: var(--color-surface);
}
.cr-prose ul.cr-scenarios li strong { color: var(--color-crossroads); }
.cr-prose ol.cr-numbered { margin-left: var(--space-5); }
.cr-prose ol.cr-numbered li::marker { color: var(--color-crossroads); font-weight: 700; font-family: var(--font-mono, monospace); }
.cr-prose .cr-table--clean {
  width: 100%;
  border-collapse: collapse;
  margin: var(--space-4) 0 var(--space-5);
  font-size: var(--text-sm);
}
.cr-prose .cr-table--clean th {
  text-align: left;
  padding: 10px 12px;
  border-bottom: 2px solid var(--color-crossroads);
  color: var(--color-crossroads);
  font-family: var(--font-mono, monospace);
  font-size: 0.78em;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  vertical-align: bottom;
}
.cr-prose .cr-table--clean td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--color-divider);
  vertical-align: top;
  color: var(--color-text);
}
.cr-prose .cr-table--clean td:first-child { font-weight: 600; min-width: 7.5em; }
.cr-prose .cr-table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: var(--space-4) 0 var(--space-5); }
.cr-prose .cr-table-scroll .cr-table--clean { margin: 0; min-width: 600px; }
.cr-prose .cr-table--matrix th, .cr-prose .cr-table--matrix td { padding: 8px 8px; }
.cr-prose .cr-takeaway {
  margin: var(--space-8) 0 var(--space-6);
  padding: var(--space-5) var(--space-6);
  border-radius: var(--radius-lg, 12px);
  border: 1px solid color-mix(in srgb, var(--color-crossroads) 40%, transparent);
  background: color-mix(in srgb, var(--color-crossroads) 6%, var(--color-surface));
}
.cr-prose .cr-takeaway-label {
  font-family: var(--font-mono, monospace);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-crossroads);
  margin-bottom: var(--space-3);
}
.cr-prose .cr-takeaway ol { margin-left: var(--space-5); }
.cr-prose .cr-takeaway p:last-child { margin-bottom: 0; }
/* Keep wide tables inside their scroll wrapper instead of stretching the article grid */
.cr-article-body > * { min-width: 0; }
.cr-prose { min-width: 0; overflow-wrap: break-word; }
.cr-prose .cr-table-scroll { max-width: 100%; }
.cr-prose .cr-table--matrix { font-size: 0.8rem; }
.cr-prose .cr-table--matrix td:first-child { min-width: 0; }
@media (max-width: 640px) {
  .cr-prose .cr-table--clean th, .cr-prose .cr-table--clean td { padding: 8px 6px; }
  .cr-prose .cr-table--clean td:first-child { min-width: 0; }
  .cr-prose .cr-table--clean th { letter-spacing: 0.03em; }
}

/* Small editorial labels: readable in both themes. */
:root,[data-theme="dark"] { --accessible-orange:#e8943a; --accessible-teal:#3db8c4; --accessible-purple:#b06ee0; }
[data-theme="light"] { --accessible-orange:#9a5a12; --accessible-teal:#1d7480; --accessible-purple:#7a3fb0; }
@media(prefers-color-scheme:light) { :root:not([data-theme]) { --accessible-orange:#9a5a12; --accessible-teal:#1d7480; --accessible-purple:#7a3fb0; } }
.section-eyebrow,.news-tag { font-size:max(11px,.7rem); }
[data-theme="light"] .section-eyebrow { color:var(--accessible-orange); }
[data-theme="light"] .news-tag { color:#1d7480; }

/* ============================================================
   FLUID PAGE + ALIGNMENT GUARDS
   Applied last so they win over earlier component defaults.
   ============================================================ */

main :where(h1, h2, h3, h4, h5, h6, p, li, label, figcaption, dt, dd) {
  text-align: start;
  overflow-wrap: break-word;
}
main :where(a, code, kbd) {
  overflow-wrap: anywhere;
}

/* Stat tiles stay centered, including the value and its caption. */
.hero-stat,
.hero-stat-btn,
.hero-stat-value,
.hero-stat-num,
.hero-stat-label,
.ai-matrix-metric,
.ai-matrix-metric-value,
.ai-matrix-metric-label,
.itm-stat,
.itm-stat-value,
.itm-stat-label,
.cip015-timer-cell,
.cip015-timer-num,
.cip015-timer-unit {
  text-align: center;
}

.deadlines-grid {
  grid-template-columns: repeat(auto-fit, minmax(min(17.5rem, 100%), 1fr)) !important;
}
.about-grid,
.fg-roadmap,
.fg-special-grid {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)) !important;
}
#tab-standards [style*="minmax(320px"],
#tab-standards [style*="minmax(280px"],
#tab-standards [style*="minmax(220px"] {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)) !important;
}
#trend-grid {
  grid-template-columns: repeat(auto-fit, minmax(min(16rem, 100%), 1fr)) !important;
}

#tm-controls,
#tm-heatmap-wrap,
#tm-table-wrap,
.ai-matrix-scroll,
.vuln-table-wrapper,
.itm-map-wrap,
.tm-map-container {
  max-width: 100%;
  min-width: 0;
}
#tm-controls label {
  flex-wrap: wrap !important;
  min-width: 0 !important;
  max-width: 100%;
  flex: 1 1 16rem;
}
#tm-controls select,
#tm-sector-filter,
#tm-sev-filter {
  min-width: 0 !important;
  max-width: 100% !important;
  width: 100%;
}
#tm-stats > .hero-stat {
  flex: 1 1 9rem;
  min-width: 0 !important;
}

img, picture, video, canvas, svg,
.itm-map, .leaflet-container, #tmMap, #itmMap {
  max-width: 100%;
}
.leaflet-container img.leaflet-tile,
.itm-map .leaflet-tile {
  max-width: none;
}

@media (max-width: 900px) {
  .hero h1,
  .section-header h2,
  .newsletter-text h2 {
    font-size: clamp(1.35rem, 1rem + 2.4vw, 2rem);
  }
}

/* Events page and dashboard teaser: same shell, left edge, no overflow. */
#dash-events > *,
#tab-events .container {
  width: 100%;
  max-width: var(--content-max);
  margin-inline: auto;
  min-width: 0;
}
.events-list,
.events-card,
.events-filters,
.events-notes,
.events-when,
.events-card-meta {
  min-width: 0;
  max-width: 100%;
}
.events-filter {
  max-width: 100%;
  white-space: normal;
  overflow-wrap: anywhere;
  text-align: start;
}
.events-card,
.events-title,
.events-desc,
.events-when,
.events-note,
.events-notes li {
  text-align: start;
  overflow-wrap: anywhere;
}