/* ---- src/styles/global.css */
/* CVE Security global styles: light/clean theme with dark-mode tokens */

:root {
  /* Brand colors from logo */
  --navy: #1a2744;
  --navy-light: #2a3f66;
  --blue: #4a90d9;
  --blue-light: #6baaf0;
  --blue-pale: #e8f0fe;
  --blue-bg: #f0f6ff;

  /* Neutrals */
  --white: #ffffff;
  --gray-50: #f9fafb;
  --gray-100: #f3f4f6;
  --gray-200: #e5e7eb;
  --gray-300: #d1d5db;
  --gray-400: #9ca3af;
  --gray-500: #6b7280;
  --gray-600: #4b5563;
  --gray-700: #374151;
  --gray-800: #1f2937;
  --gray-900: #111827;

  /* Risk colors (identical across themes — semantic meaning must survive) */
  --risk-critical: #dc2626;
  --risk-high: #ea580c;
  --risk-medium: #d97706;
  --risk-low: #16a34a;
  --risk-safe: #059669;
  /* Text-safe risk inks: the fill values above sit at 3.2 to 3.8 to 1 on white
     as TEXT, under WCAG AA. Words and numbers in a risk color use these; fills,
     rails and badges keep the brighter values. Dark mode maps both to the same
     lightened value below. */
  --ink-critical: #b91c1c;
  --ink-high: #c2410c;
  --ink-medium: #b45309;
  --ink-low: #15803d;
  --ink-safe: #047857;
  /* Link and label blue that passes AA as text (6.2 to 1); the brand blue stays
     for fills, buttons and the logo. */
  --accent-ink: #2b5fb3;

  /* ── Semantic tokens (light) ──────────────────────────────────────────
     Components should consume THESE, not the raw palette vars above.
     The dark overrides live in :root[data-theme="dark"] below. */
  color-scheme: light dark;
  --bg: var(--white);
  --bg-alt: var(--gray-50);
  --surface: var(--white);
  --surface-elevated: var(--white);
  --surface-muted: var(--gray-100);
  --text: var(--gray-800);
  --text-strong: var(--navy);
  --text-muted: var(--gray-600);
  --border: var(--gray-200);
  --border-strong: var(--gray-300);
  --accent: var(--blue);
  --accent-hover: var(--navy-light);
  --accent-pale: var(--blue-pale);

  /* ── Chart tokens (src/components/charts) ────────────────────────────
     Sequential = one hue, light→dark, via color-mix over --chart-seq.
     Categorical slots are FIXED (never cycled; a 4th series folds to "Other")
     and validated for adjacent-pair CVD separation in both themes. --chart-ctx
     is the de-emphasis grey for "same day"/"other". Risk tokens are status
     colours and are never used as series colours. */
  --chart-seq: var(--accent);
  --chart-cat-1: #2a78d6;
  --chart-cat-2: #eb6834;
  --chart-cat-3: #1baf7a;
  --chart-ctx: #aeb8c6;
  --chart-grid: var(--gray-200);
  --chart-axis: var(--gray-300);
  --chart-ink: var(--text-muted);
  --chart-on-fill: #ffffff;

  /* Typography */
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'JetBrains Mono', 'Fira Code', monospace;

  /* Spacing */
  --container-max: 1200px;
  --container-narrow: 800px;

  /* Shadows */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);

  /* Borders */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-full: 9999px;
}

/* ── Dark theme overrides ───────────────────────────────────────────────
   The FOUC script in BaseLayout sets data-theme to "light" or "dark"
   (the resolved value) on <html> before first paint. */
:root[data-theme="dark"] {
  --bg: #0b1220;
  --bg-alt: #0f1830;
  --surface: #152038;
  --surface-elevated: #1c2a48;
  --surface-muted: #1a2440;
  --text: #e5e7eb;
  --text-strong: #f3f4f6;
  --text-muted: #9aa3b2;
  --border: #243352;
  --border-strong: #33446b;
  --accent: #6baaf0;
  --accent-hover: #8fc0f5;
  --accent-pale: rgba(107, 170, 240, 0.15);

  /* Chart tokens: slot 1 is a RE-STEPPED blue (dark --accent #6baaf0 sits
     above the lightness band for a series fill); grid/axis one step off --surface. */
  --chart-seq: #3987e5;
  --chart-cat-1: #3987e5;
  --chart-cat-2: #d95926;
  --chart-cat-3: #199e70;
  --chart-ctx: #4a5670;
  --chart-grid: #1f2a42;
  --chart-axis: #33446b;
  --chart-ink: var(--text-muted);
  --chart-on-fill: #ffffff;

  /* Shadows need more presence on dark surfaces */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.45), 0 2px 4px -2px rgba(0, 0, 0, 0.45);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.5), 0 4px 6px -4px rgba(0, 0, 0, 0.5);

  /* Risk colors lightened for legible contrast on dark surfaces (the light-mode
     values are too dark/saturated against --bg). Applies everywhere the tokens
     are consumed: severity badges, table scores, signal chips, alerts. */
  --risk-critical: #f87171;
  --risk-high: #fb923c;
  --risk-medium: #fbbf24;
  --risk-low: #4ade80;
  --risk-safe: #34d399;
  --ink-critical: #f87171;
  --ink-high: #fb923c;
  --ink-medium: #fbbf24;
  --ink-low: #4ade80;
  --ink-safe: #34d399;
  --accent-ink: #6baaf0;
}

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-family: var(--font-sans);
  color: var(--text);
  background: var(--bg);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: no-preference) {
  html { transition: background-color 0.25s ease, color 0.25s ease; }
  body, .card, .header, .footer, .input { transition: background-color 0.25s ease, border-color 0.25s ease, color 0.25s ease; }
}

body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

main {
  flex: 1;
}

a {
  color: var(--accent);
  text-decoration: none;
  transition: color 0.2s;
}

a:hover {
  color: var(--accent-hover);
}

img {
  max-width: 100%;
  height: auto;
}

/* Container */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 1.5rem;
}

.container--narrow {
  max-width: var(--container-narrow);
}

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.75rem 1.5rem;
  font-size: 1rem;
  font-weight: 600;
  border: none;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all 0.2s;
  text-decoration: none;
  line-height: 1.4;
}

.btn--primary {
  background: var(--blue);
  color: var(--white);
}

.btn--primary:hover {
  background: var(--navy-light);
  color: var(--white);
}

.btn--secondary {
  background: var(--surface);
  color: var(--text-strong);
  border: 2px solid var(--border);
}

.btn--secondary:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.btn--large {
  padding: 1rem 2rem;
  font-size: 1.125rem;
}

.btn--full {
  width: 100%;
}

/* Form elements */
.input {
  width: 100%;
  padding: 0.75rem 1rem;
  font-size: 1rem;
  font-family: var(--font-sans);
  border: 2px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface);
  color: var(--text);
  transition: border-color 0.2s;
  outline: none;
}

.input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-pale);
}

/* Keep browser autofill legible on dark surfaces */
.input:-webkit-autofill,
.input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--text);
  -webkit-box-shadow: 0 0 0 1000px var(--surface) inset;
  caret-color: var(--text);
}

.input--large {
  padding: 1rem 1.25rem;
  font-size: 1.125rem;
}

/* Cards */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1.5rem;
  box-shadow: var(--shadow-sm);
}

.card:hover {
  box-shadow: var(--shadow-md);
}

/* Section spacing */
.section {
  padding: 4rem 0;
}

.section--alt {
  background: var(--bg-alt);
}

/* Typography */
h1, h2, h3, h4 {
  color: var(--text-strong);
  line-height: 1.2;
}

h1 { font-size: 2.5rem; font-weight: 800; }
h2 { font-size: 2rem; font-weight: 700; }
h3 { font-size: 1.5rem; font-weight: 600; }
h4 { font-size: 1.125rem; font-weight: 600; }

/* Risk badge */
.risk-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.25rem 0.75rem;
  border-radius: var(--radius-full);
  font-size: 0.875rem;
  font-weight: 600;
}

.risk-badge--critical { background: color-mix(in srgb, var(--risk-critical) 16%, transparent); color: var(--ink-critical); }
.risk-badge--high { background: color-mix(in srgb, var(--risk-high) 16%, transparent); color: var(--ink-high); }
.risk-badge--medium { background: color-mix(in srgb, var(--risk-medium) 16%, transparent); color: var(--ink-medium); }
.risk-badge--low { background: color-mix(in srgb, var(--risk-low) 16%, transparent); color: var(--ink-low); }
.risk-badge--safe { background: color-mix(in srgb, var(--risk-safe) 16%, transparent); color: var(--ink-safe); }

/* Lift risk-text contrast on dark backgrounds */
:root[data-theme="dark"] .risk-badge--critical { color: #f87171; }
:root[data-theme="dark"] .risk-badge--high { color: #fb923c; }
:root[data-theme="dark"] .risk-badge--medium { color: #fbbf24; }
:root[data-theme="dark"] .risk-badge--low { color: #4ade80; }
:root[data-theme="dark"] .risk-badge--safe { color: #34d399; }

/* Loading spinner */
.spinner {
  width: 1.5rem;
  height: 1.5rem;
  border: 3px solid var(--border);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 0.6s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* Alert boxes */
.alert {
  padding: 1rem 1.25rem;
  border-radius: var(--radius-md);
  font-size: 0.95rem;
}

.alert--info { background: var(--accent-pale); color: var(--text-strong); }
.alert--success { background: color-mix(in srgb, var(--risk-safe) 14%, transparent); color: var(--ink-safe); }
.alert--warning { background: color-mix(in srgb, var(--risk-medium) 14%, transparent); color: var(--ink-medium); }
.alert--error { background: color-mix(in srgb, var(--risk-critical) 14%, transparent); color: var(--ink-critical); }

:root[data-theme="dark"] .alert--success { color: #34d399; }
:root[data-theme="dark"] .alert--warning { color: #fbbf24; }
:root[data-theme="dark"] .alert--error { color: #f87171; }

/* Responsive */
@media (max-width: 768px) {
  h1 { font-size: 2rem; }
  h2 { font-size: 1.5rem; }
  .section { padding: 2.5rem 0; }
  .container { padding: 0 1.25rem; }
}

@media (max-width: 480px) {
  h1 { font-size: 1.75rem; }
  .btn--large { padding: 0.875rem 1.5rem; font-size: 1rem; }
  .container { padding: 0 1rem; }
  .card { padding: 1.25rem; }
  .input--large { padding: 0.875rem 1rem; font-size: 1rem; }
}

/* Per-entity "follow as feed" link (assessment item 18), under an entity h1/lede. */
.feed-sub { font-size: 0.82rem; margin: 0.25rem 0 1.25rem; color: var(--text-muted); }
.feed-sub a { color: var(--accent); text-decoration: none; }
.feed-sub a:hover { text-decoration: underline; }

/* ---- src/components/Header.astro */
.header {
    position: sticky;
    top: 0;
    z-index: 100;
    background: color-mix(in srgb, var(--surface-elevated) 92%, transparent);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--border);
  }

  .header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 4.25rem;
  }

  .header__logo {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0.2rem;
    line-height: 1.05;
    text-decoration: none;
  }

  .header__mark {
    display: none;
    height: 2.1rem;
    width: auto;
  }

  .header__mark--light { display: block; }
  html[data-theme='dark'] .header__mark--light { display: none; }
  html[data-theme='dark'] .header__mark--dark { display: block; }

  .header__right {
    display: flex;
    align-items: center;
    gap: 0.5rem;
  }

  .header__nav {
    display: flex;
    gap: 0.25rem;
  }

  .header__link {
    padding: 0.5rem 1rem;
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--text-muted);
    border-radius: var(--radius-md);
    transition: all 0.2s;
    white-space: nowrap;
  }

  .header__link:hover {
    color: var(--text-strong);
    background: var(--surface-muted);
  }

  .header__link.active {
    color: var(--accent);
    background: var(--accent-pale);
  }

  /* "More" disclosure dropdown */
  .nav-more { position: relative; }
  .nav-more__summary {
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
    cursor: pointer;
    list-style: none;
    user-select: none;
  }
  .nav-more__summary::-webkit-details-marker { display: none; }
  .nav-more__caret { opacity: 0.65; transition: transform 0.2s; }
  .nav-more[open] .nav-more__caret { transform: rotate(180deg); }
  .nav-more__panel {
    position: absolute;
    top: calc(100% + 0.4rem);
    right: 0;
    min-width: 11rem;
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    padding: 0.4rem;
    background: var(--surface-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    z-index: 101;
  }
  .nav-more__item { display: block; }
  .nav-more__label {
    padding: 0.55rem 1rem 0.15rem;
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-muted);
    opacity: 0.8;
    user-select: none;
  }

  .theme-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border: none;
    border-radius: var(--radius-md);
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    transition: background 0.2s, color 0.2s;
    flex-shrink: 0;
  }

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

  .theme-toggle:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
  }

  .header__search svg { display: block; }
  .theme-toggle__icon { display: none; }
  /* Default (no explicit pref attr yet) shows the system icon */
  .theme-toggle .theme-toggle__icon--system { display: block; }
  .theme-toggle[data-pref="light"] .theme-toggle__icon--system,
  .theme-toggle[data-pref="dark"] .theme-toggle__icon--system { display: none; }
  .theme-toggle[data-pref="light"] .theme-toggle__icon--light { display: block; }
  .theme-toggle[data-pref="dark"] .theme-toggle__icon--dark { display: block; }

  .header__mobile-toggle {
    display: none;
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    padding: 0.5rem;
  }

  /* The full navigation needs about 890 px; under 900 px the menu button takes over, so no page
     scrolls sideways between 769 and 889 px (2026-09-27; the break was 768 px). */
  @media (max-width: 900px) {
    .header__inner {
      height: 3.75rem;
    }

    .header__nav {
      display: none;
      position: absolute;
      top: 3.75rem;
      left: 0;
      right: 0;
      background: var(--surface-elevated);
      border-bottom: 1px solid var(--border);
      flex-direction: column;
      padding: 0.75rem;
      box-shadow: var(--shadow-lg);
      /* The menu is anchored to the sticky header, so page scrolling can never
         reveal its tail — it must scroll ITSELF. Without this cap the expanded
         menu ran to ~842px and the last items (Sources) were untappable on
         iPhones. dvh tracks Safari's collapsing chrome; the vh line is the
         fallback for iOS < 15.4. Momentum scrolling is default on modern iOS,
         so no -webkit-overflow-scrolling needed. */
      max-height: calc(100vh - 3.75rem);
      max-height: calc(100dvh - 3.75rem);
      overflow-y: auto;
      overscroll-behavior: contain;
      padding-bottom: max(0.75rem, env(safe-area-inset-bottom));
    }

    .header__nav.open {
      display: flex;
    }

    /* 0.625rem keeps rows above the 44px tap-target floor while shaving
       ~60px off the full menu vs the old 0.75rem. */
    .header__link {
      padding: 0.625rem 1rem;
    }

    /* In the stacked mobile menu the dropdown flows inline (no floating panel) */
    .nav-more { width: 100%; }
    .nav-more__panel {
      position: static;
      box-shadow: none;
      border: none;
      background: transparent;
      min-width: 0;
      padding: 0 0 0 0.75rem;
    }
    .nav-more__caret { display: none; }

    .header__mobile-toggle {
      display: block;
    }

    /* Without JavaScript the menu button cannot open the menu, so the links stay in the header and
       wrap (Codex review, 2026-09-27). src/layouts/BaseLayout.astro marks <html data-js> when scripts run. */
    html:not([data-js]) .header { position: static; }   /* an open More list scrolls with the page */
    html:not([data-js]) .header__inner { height: auto; flex-wrap: wrap; gap: 0.25rem 0.75rem; padding-top: 0.5rem; padding-bottom: 0.5rem; }
    html:not([data-js]) .header__right { flex-wrap: wrap; }
    html:not([data-js]) .header__nav { display: flex; position: static; flex-direction: row; flex-wrap: wrap; max-height: none; overflow: visible; padding: 0; border: 0; box-shadow: none; background: transparent; }
    html:not([data-js]) .header__mobile-toggle { display: none; }
  }

/* ---- src/components/Footer.astro */
.footer {
    margin-top: 4rem;
    border-top: 1px solid var(--border);
    background: var(--surface);
    padding: 2.5rem 0 2rem;
  }

  .footer__inner {
    display: flex;
    justify-content: space-between;
    gap: 2rem;
    flex-wrap: wrap;
  }

  .footer__brandrow {
    margin: 0;
    line-height: 0;
  }

  .footer__mark {
    display: none;
    height: 1.75rem;
    width: auto;
  }

  .footer__mark--light { display: inline-block; }
  html[data-theme='dark'] .footer__mark--light { display: none; }
  html[data-theme='dark'] .footer__mark--dark { display: inline-block; }

  .footer__tagline {
    margin: 0.4rem 0 0;
    max-width: 34rem;
    color: var(--text-muted);
    font-size: 0.9rem;
    line-height: 1.6;
  }

  .footer__contact {
    margin: 0.75rem 0 0;
    font-size: 0.95rem;
  }

  .footer__contact a {
    color: var(--accent);
    font-weight: 600;
  }

  .footer__contact a:hover { text-decoration: underline; }

  .footer__nav {
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
    gap: 0.4rem 1.35rem;
    max-width: 30rem;
  }

  .footer__nav a {
    color: var(--text-muted);
    font-size: 0.9rem;
    white-space: nowrap;
  }

  .footer__nav a:hover { color: var(--accent); }

  .footer__legal {
    margin-top: 2rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--border);
  }

  .footer__legal p {
    margin: 0 0 0.5rem;
    color: var(--text-muted);
    font-size: 0.78rem;
    line-height: 1.6;
  }

  .footer__legal a {
    color: var(--text-muted);
    text-decoration: underline;
    text-decoration-color: var(--border-strong);
  }

  .footer__legal a:hover { color: var(--accent); }

/* ---- src/components/CveTable.astro */
.score__by { display: block; font-size: 0.7rem; font-weight: 600; color: var(--text-muted); white-space: nowrap; }
  .score__hi { display: block; font-size: 0.7rem; font-weight: 700; white-space: nowrap; }
  .table-wrap { overflow-x: auto; }

  .cve-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.92rem;
  }
  .cve-table caption {
    text-align: left;
    color: var(--text-muted);
    font-size: 0.85rem;
    padding-bottom: 0.5rem;
  }
  .cve-table th {
    text-align: left;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
    padding: 0.5rem 0.75rem;
    border-bottom: 1px solid var(--border-strong);
    white-space: nowrap;
  }
  .cve-table td {
    padding: 0.55rem 0.75rem;
    border-bottom: 1px solid var(--border);
    vertical-align: top;
  }
  .cve-table .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }

  .cve-id { white-space: nowrap; }
  .date, .read { white-space: nowrap; font-variant-numeric: tabular-nums; }
  .cve-id a { font-weight: 600; color: var(--text-strong); }
  .cve-id a:hover { color: var(--accent); }

  /* The summary stays a table cell, so every cell in a row shares one height and one rule; a -webkit-box cell leaves
     the table and its border stops short of the row's (owner, Oct. 24, 2026). A CVE title is short and complete
     (scripts/title_standard.py) and ends in the weakness, so it wraps in full; the two-line clamp sits on the text
     inside, for the description cut printed for a CVE with no title. */
  .summary {
    min-width: 16rem;
    max-width: 34rem;
    color: var(--text);
  }
  .summary__t { display: block; }
  .summary:not(.summary--title) .summary__t {
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }

  .score { font-weight: 700; }
  .sev-critical { color: var(--ink-critical); }
  .sev-high     { color: var(--ink-high); }
  .sev-medium   { color: var(--ink-medium); }
  .sev-low      { color: var(--ink-low); }
  .sev-none     { color: var(--text-muted); }

  .signals { white-space: nowrap; }
  .chip {
    display: inline-block;
    padding: 0.05rem 0.45rem;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    margin-right: 0.3rem;
  }
  .chip--kev     { background: color-mix(in srgb, var(--risk-critical) 14%, transparent); color: var(--ink-critical); }
  .chip--triage  { background: transparent; color: var(--ink-critical); border: 1px dashed var(--risk-critical); }
  .chip--detect  { background: color-mix(in srgb, var(--risk-safe) 14%, transparent); color: var(--ink-safe); }
  .chip--exploit { background: color-mix(in srgb, var(--risk-high) 14%, transparent); color: var(--ink-high); }
  .chip--host    { background: var(--surface-muted); color: var(--text-muted); border: 1px dashed var(--border); }
  /* Field sighting: amber like Automatable, never the Exploited red. */
  .chip--sighted { background: color-mix(in srgb, var(--risk-medium) 16%, transparent); color: var(--ink-medium); }
  .chip--chain { background: color-mix(in srgb, var(--risk-high) 14%, transparent); color: var(--ink-high); }

  .empty { padding: 1.5rem 0.75rem; }
  .muted { color: var(--text-muted); }

  .cell-label { display: none; }

  /* Below 820 px each CVE is a card, as the filterable lists draw theirs (FilterList.astro): the ID, the title in
     full, the labeled scores, then the signals, with no sideways scrolling. The roles in the markup keep the table
     semantics some browsers drop once a table's display changes, and the labels are hidden from screen readers,
     which hear the column heading. */
  @media (max-width: 820px) {
    .table-wrap { overflow: visible; }
    .cve-table, .cve-table tbody { display: block; width: 100%; }
    .cve-table caption { display: block; }
    .cve-table thead { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }
    .cve-table tbody tr { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 0.4rem 1.25rem; padding: 0.65rem 0.75rem; margin: 0 0 0.6rem; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface); }
    .cve-table td { padding: 0; border: 0; }
    .cve-table .cve-id, .cve-table .summary, .cve-table .signals { flex: 1 1 100%; }
    .cve-table .summary { order: 1; min-width: 0; max-width: none; }
    .cve-table td[data-label] { order: 2; text-align: left; }
    .cve-table .signals { order: 3; white-space: normal; line-height: 1.8; }
    .cve-table .signals:not(:has(.chip)) { display: none; }
    .cell-label { display: block; font-size: 0.66rem; font-weight: 700; letter-spacing: 0.04em; line-height: 1.4; text-transform: uppercase; color: var(--text-muted); }
  }

/* ---- src/pages/index.astro */
/* The sign-up block follows the lead chart on the same ground, so it closes that section's gap. */
  .home-news { padding-top: 0; }

  .hero {
    padding: 4rem 0 2.5rem;
  }
  .hero__eyebrow {
    margin: 0 0 0.75rem;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--accent);
  }
  .hero h1 {
    font-size: clamp(1.9rem, 4.5vw, 2.8rem);
    letter-spacing: -0.02em;
    margin: 0 0 0.75rem;
  }
  .hero__sub {
    font-size: 1.1rem;
    color: var(--text-muted);
    line-height: 1.7;
    margin: 0 0 1.75rem;
    max-width: 42rem;
  }
  .hero__search {
    display: flex;
    gap: 0.5rem;
    max-width: 38rem;
  }
  .hero__search .input { flex: 1; }
  .hero__sub a { color: inherit; text-decoration: underline; text-underline-offset: 0.15em; }

  /* The one chart: a single segmented bar, read left to right as "how early". */
  .section--lead { padding-top: 0.5rem; }
  .lead { display: flex; flex-direction: column; gap: 0.6rem; }
  .lead__axis { margin: 0; font-size: 0.78rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.04em; }
  .lead__bar { display: block; width: 100%; height: 2.6rem; border-radius: 6px; overflow: hidden; background: var(--surface); }
  .lead__segs {
    list-style: none; margin: 0; padding: 0;
    display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 0.75rem 1.25rem;
  }
  .lead__seg { display: flex; flex-direction: column; gap: 0.1rem; padding-left: 0.65rem; border-left: 3px solid var(--border-strong); }
  .lead__seg--early { border-left-color: var(--risk-high); }
  .lead__seg--late { border-left-color: var(--risk-medium); }
  .lead__n { font-size: 1.5rem; font-weight: 800; line-height: 1.1; color: var(--text-strong); font-variant-numeric: tabular-nums; }
  .lead__seg--early .lead__n { color: var(--ink-high); }
  .lead__seg--late .lead__n { color: var(--ink-medium); }
  .lead__l { font-size: 0.85rem; color: var(--text-muted); line-height: 1.4; }
  .lead__more { margin: 0.25rem 0 0; font-size: 0.92rem; }
  .lead__more a { color: var(--accent); font-weight: 500; }
  .lead__table { border-collapse: collapse; font-size: 0.9rem; }
  .lead__table th, .lead__table td { text-align: left; padding: 0.3rem 0.6rem; border-bottom: 1px solid var(--border); }
  .lead__table td { text-align: right; font-variant-numeric: tabular-nums; }

  /* The lens grid: neutral cards; tone lives in the figure (or the arrow) only. */
  .section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 0.5rem; }
  .section-head h2 { margin: 0; }
  .lens-group { margin-top: 1.5rem; }
  .lens-group__title { margin: 0 0 0.6rem; font-size: 0.8rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-muted); }
  /* auto-fill keeps empty tracks, so a two-tile group stays on the same column rhythm as a three-tile one. */
  .lens-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 0.85rem; }
  .lens {
    display: flex; flex-direction: column; gap: 0.2rem;
    padding: 0.9rem 1rem 1rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-md, 8px);
    background: var(--surface);
    text-decoration: none; color: inherit;
    transition: border-color 0.15s, transform 0.15s;
  }
  .lens:hover { border-color: var(--accent); }
  .lens:hover .lens__l { color: var(--accent); }
  .lens__n { font-size: 1.55rem; font-weight: 800; line-height: 1.1; color: var(--text-strong); font-variant-numeric: tabular-nums; }
  .lens__n--arrow { font-size: 1.35rem; font-weight: 600; color: var(--text-muted); }
  .lens--critical .lens__n { color: var(--ink-critical); }
  .lens--high .lens__n { color: var(--ink-high); }
  .lens--medium .lens__n { color: var(--ink-medium); }
  .lens--safe .lens__n { color: var(--ink-safe); }
  .lens--accent .lens__n { color: var(--accent); }
  .lens__l { font-weight: 600; color: var(--text-strong); font-size: 0.98rem; }
  .lens__d { font-size: 0.86rem; color: var(--text-muted); line-height: 1.5; }
  @media (prefers-reduced-motion: reduce) {
    .lens { transition: none; }
  }
  @media (max-width: 600px) {
    .hero__search { flex-direction: column; }
  }

/* ---- sites/_year/site.css */
/* The CVE year sites (cve-2025.com and after): the rules they add on top of cve-security.com's own styles (global.css and the Header, Footer,
   CveTable and homepage styles, which the builder reads from the main site's source each night). Only the main
   site's semantic tokens appear here, so light and dark mode follow its theme. */
[hidden] { display: none !important; }
.sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }

/* The masthead: the CVE Security logo leads to cve-security.com; the line under it leads home. */
.header__brand { display: flex; flex-direction: column; justify-content: center; gap: 0.15rem; }
.header__site { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-muted); line-height: 1.1; }
.header__site:hover { color: var(--accent); }
@media (max-width: 900px) { .header__mark { height: 1.8rem; } .header__site { font-size: 0.66rem; } }

/* Hero additions */
.hero__sub a { color: inherit; text-decoration: underline; text-underline-offset: 0.15em; }
.hero__hint { margin: 0.75rem 0 0; font-size: 0.88rem; color: var(--text-muted); }
.hero__hint a { color: var(--accent-ink); font-family: var(--font-mono); font-size: 0.84rem; }
.hero--month { padding-bottom: 1.75rem; }
.hero--month h1 { font-size: clamp(1.7rem, 4vw, 2.4rem); }
.crumbs { display: flex; gap: 0.5rem; align-items: center; margin: 0 0 0.9rem; font-size: 0.85rem; color: var(--text-muted); }
.crumbs a { color: var(--accent-ink); font-weight: 600; }

/* Section furniture */
.section-head { gap: 0.5rem 1rem; }
.asof { font-size: 0.8rem; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.section-sum { margin: 0.5rem 0 1.5rem; max-width: 46rem; color: var(--text-muted); }
.lens-grid--wide { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
a.lens[aria-current="true"] { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-pale); }

/* The finder: filters above the shared CVE table */
.finder__bar { display: flex; flex-wrap: wrap; gap: 0.75rem 1rem; margin: 0 0 0.85rem; }
.finder__field { display: flex; flex-direction: column; gap: 0.25rem; min-width: 11rem; flex: 0 1 auto; }
.finder__label { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-muted); }
.finder__select {
  appearance: none; -webkit-appearance: none;
  padding: 0.55rem 2.2rem 0.55rem 0.8rem; font: inherit; font-size: 0.92rem; color: var(--text);
  background: var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") no-repeat right 0.8rem center;
  border: 2px solid var(--border); border-radius: var(--radius-md); cursor: pointer;
}
.finder__select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-pale); }
.finder__flags { display: flex; flex-wrap: wrap; gap: 0.45rem; margin: 0 0 1rem; }
.flag {
  display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.35rem 0.8rem; font: inherit; font-size: 0.84rem; font-weight: 600;
  color: var(--text-muted); background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--radius-full); cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.flag:hover { color: var(--text-strong); border-color: var(--accent); }
.flag:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.flag::before { content: ""; width: 0.55rem; height: 0.55rem; border-radius: 50%; background: var(--border-strong); }
.flag--kev::before { background: var(--risk-critical); }
.flag--watch::before { background: var(--risk-high); }
.flag--detect::before, .flag--fix::before { background: var(--risk-safe); }
.flag--exploit::before { background: var(--risk-high); }
.flag--clear::before { display: none; }
.flag--clear { border-style: dashed; }
.flag[aria-pressed="true"] { color: var(--text-strong); background: var(--accent-pale); border-color: var(--accent); }
.finder__status { margin: 0 0 0.75rem; font-size: 0.92rem; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.finder__status a { font-weight: 600; }
.finder__status b { color: var(--text-strong); }
.finder__more { margin: 1rem 0 0; text-align: center; }
.finder__more .btn { font-size: 0.92rem; padding: 0.6rem 1.25rem; }
.finder[aria-busy="true"] .cve-table { opacity: 0.6; }
.cve-table .date { color: var(--text-muted); font-size: 0.86rem; }
.cve-table .summary--desc { color: var(--text-muted); }

/* Chips this site adds beside the shared ones */
.chip--watch { background: transparent; color: var(--ink-high); border: 1px solid color-mix(in srgb, var(--risk-high) 55%, transparent); }
.chip--fix { background: transparent; color: var(--ink-safe); border: 1px solid color-mix(in srgb, var(--risk-safe) 50%, transparent); }

/* Months: one bar a month, by record count */
.months-year { margin: 0 0 1.5rem; }
.months-year h3 { margin: 0 0 0.5rem; font-size: 0.8rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-muted); }
.months { list-style: none; display: grid; gap: 0.15rem; }
.months a { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr) 4.5rem; align-items: center; gap: 0.85rem; padding: 0.35rem 0.6rem; border-radius: var(--radius-sm); color: var(--text); }
.months a:hover { background: var(--surface-muted); color: var(--text-strong); }
.months__m { font-weight: 600; color: var(--text-strong); }
.months__bar { display: block; height: 0.6rem; border-radius: 3px; background: var(--surface-muted); overflow: hidden; }
.months__bar span { display: block; height: 100%; border-radius: 3px; background: var(--chart-seq); }
.months__n { text-align: right; font-variant-numeric: tabular-nums; font-size: 0.9rem; color: var(--text-muted); }
@media (max-width: 520px) { .months a { grid-template-columns: 6.25rem minmax(0, 1fr) 3.75rem; gap: 0.6rem; } }

/* Method: short labeled paragraphs */
.method { display: grid; gap: 1rem; }
.method > div { display: grid; grid-template-columns: minmax(0, 9.5rem) minmax(0, 1fr); gap: 0.25rem 1.5rem; padding-top: 1rem; border-top: 1px solid var(--border); }
.method > div:first-child { border-top: 0; padding-top: 0; }
.method dt { font-size: 0.74rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-strong); padding-top: 0.2rem; }
.method dd { max-width: 46rem; font-size: 0.95rem; line-height: 1.65; color: var(--text); }
@media (max-width: 640px) { .method > div { grid-template-columns: minmax(0, 1fr); } }

/* Month page */
.section--month { padding-top: 0; }
.month-pager { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin: 0 0 1rem; font-size: 0.92rem; font-weight: 600; }
.month-pager--foot { margin: 1.25rem 0 0; }

/* Not found */
.notfound__go { display: flex; flex-wrap: wrap; gap: 0.75rem; }

/* The group after the year in the month list: a muted bar, apart from the months */
.months-year--group h3 { margin-top: 0.25rem; }
.months-year--group .months__bar span { background: var(--chart-ctx); }

/* Column chart: CISA KEV listings by CISA listing month */
.cols-fig { margin: 0; }
.cols { list-style: none; display: grid; grid-template-columns: repeat(var(--cols, 13), minmax(0, 1fr)); gap: 0.3rem; align-items: end; }
.cols__col { display: grid; grid-template-rows: 9rem auto auto; justify-items: center; min-width: 0; }
.cols__plot { display: flex; flex-direction: column; justify-content: flex-end; align-items: center; width: 100%; height: 9rem; border-bottom: 1px solid var(--chart-axis); }
.cols__n { font-size: 0.74rem; font-weight: 700; color: var(--text-strong); font-variant-numeric: tabular-nums; line-height: 1.4; }
.cols__n--zero { color: var(--text-muted); font-weight: 500; }
.cols__bar { display: block; width: min(100%, 2.2rem); border-radius: 3px 3px 0 0; background: var(--chart-seq); }
.cols__col--group { margin-left: 0.5rem; padding-left: 0.5rem; border-left: 1px dashed var(--border-strong); }
.cols__col--group .cols__bar { background: var(--chart-ctx); }
.cols__col--partial .cols__bar { background: repeating-linear-gradient(135deg, var(--chart-seq) 0 4px, color-mix(in srgb, var(--chart-seq) 45%, transparent) 4px 8px); }
.cols__m { margin-top: 0.3rem; font-size: 0.72rem; color: var(--chart-ink); white-space: nowrap; }
.cols__y { font-size: 0.66rem; font-weight: 700; color: var(--text-muted); min-height: 1em; white-space: nowrap; }
.cols-fig__cap { margin-top: 0.6rem; font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-muted); }
@media (max-width: 560px) { .cols { gap: 0.15rem; } .cols__col--group { margin-left: 0.2rem; padding-left: 0.2rem; } .cols__n { font-size: 0.66rem; } }

/* Table view and the compact tables */
.tableview { margin-top: 1rem; font-size: 0.9rem; }
.tableview summary { cursor: pointer; color: var(--accent-ink); font-weight: 600; }
.tableview .mini { margin-top: 0.75rem; }
.mini { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
.mini caption { text-align: left; font-size: 0.82rem; color: var(--text-muted); padding-bottom: 0.4rem; }
.mini th { text-align: left; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-muted); padding: 0.45rem 0.6rem; border-bottom: 1px solid var(--border-strong); white-space: nowrap; }
.mini td { padding: 0.45rem 0.6rem; border-bottom: 1px solid var(--border); vertical-align: top; }
.mini .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.mini td.num { font-weight: 600; color: var(--text-strong); }
.mini--rank td:first-child { color: var(--text-muted); font-weight: 500; width: 2.5rem; }
.mini--cwe td:first-child { white-space: nowrap; font-family: var(--font-mono); font-size: 0.84rem; }
.mini--cwe td:nth-child(2) { color: var(--text); }
.ranks { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); gap: 1.25rem; }
.rank-card { padding: 1.1rem 1.2rem 1.2rem; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); }
.rank-card h3 { font-size: 1.1rem; margin: 0 0 0.35rem; }
.rank-card__sum { margin: 0 0 0.75rem; font-size: 0.86rem; color: var(--text-muted); line-height: 1.55; }
.note { margin: 1rem 0 0; font-size: 0.86rem; color: var(--text-muted); }

/* Month page figures: count and share */
.facts { display: grid; grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr)); gap: 0.6rem; margin: 1.5rem 0 0; }
.facts__cell { padding: 0.7rem 0.85rem; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface); }
.facts__cell dt { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-muted); }
.facts__cell dd { display: flex; flex-direction: column; }
.facts__n { font-size: 1.45rem; font-weight: 800; line-height: 1.15; color: var(--text-strong); font-variant-numeric: tabular-nums; }
.facts__cell--critical .facts__n { color: var(--ink-critical); }
.facts__cell--high .facts__n { color: var(--ink-high); }
.facts__cell--safe .facts__n { color: var(--ink-safe); }
.facts__p { font-size: 0.8rem; color: var(--text-muted); }
.facts__note { margin: 0.9rem 0 0; max-width: 52rem; font-size: 0.86rem; color: var(--text-muted); }
.mini__tie td { color: var(--text-muted); font-size: 0.85rem; }
.mini__tie td.num { font-weight: 500; color: var(--text-muted); }

/* The intro: the text on the left and the figures card on the right, one column on narrow screens */
.hero--year { padding: 3rem 0 1.75rem; }
.hero__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(19rem, 25rem); gap: 1.5rem 3rem; align-items: center; }
.hero--year h1 { max-width: 40rem; }
.hero--year .hero__sub { margin: 0; max-width: 40rem; font-size: 1rem; line-height: 1.65; }
@media (max-width: 960px) { .hero__grid { grid-template-columns: minmax(0, 1fr); } }
.readout { padding: 1.1rem 1.2rem 1rem; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--shadow-sm); }
.readout__head { display: flex; align-items: baseline; justify-content: space-between; gap: 0.5rem 1rem; flex-wrap: wrap; margin: 0 0 0.6rem; }
.readout__head h2 { font-size: 0.78rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-muted); }
.readout__list { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.35rem; }
.readout__item { display: flex; flex-direction: column; padding: 0.5rem 0.6rem; border-radius: var(--radius-md); color: inherit; }
.readout__item:hover { background: var(--surface-muted); }
.readout__item:hover .readout__l { color: var(--accent); }
.readout__n { font-size: 1.45rem; font-weight: 800; line-height: 1.15; color: var(--text-strong); font-variant-numeric: tabular-nums; }
.readout__item--critical .readout__n { color: var(--ink-critical); }
.readout__item--high .readout__n { color: var(--ink-high); }
.readout__item--safe .readout__n { color: var(--ink-safe); }
.readout__l { font-size: 0.85rem; font-weight: 600; color: var(--text-strong); line-height: 1.3; }
.readout__note { margin: 0.5rem 0 0; font-size: 0.78rem; color: var(--text-muted); }

/* The search, the filters and the signal flags in one panel as wide as the table, right under the intro */
.section--finder { padding-top: 0.5rem; }
.finder__panel { margin: 0 0 1.25rem; padding: 1.1rem 1.2rem 0.9rem; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--bg-alt); }
.finder__search { display: flex; gap: 0.5rem; }
.finder__search .input { flex: 1; min-width: 0; }
.finder__controls { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 0.75rem 1.5rem; margin-top: 0.9rem; }
.finder__controls .finder__bar, .finder__controls .finder__flags { margin: 0; }
.finder__controls .finder__field { min-width: 10rem; }
.finder__hint { margin: 0.8rem 0 0; font-size: 0.84rem; color: var(--text-muted); }
.finder__hint a { font-family: var(--font-mono); font-size: 0.8rem; color: var(--accent-ink); }
.finder__status:focus { outline: none; }
@media (max-width: 600px) {
  .finder__search { flex-direction: column; }
  .finder__controls { align-items: stretch; }
  .finder__controls .finder__bar { display: grid; grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr)); gap: 0.6rem; }
  .finder__controls .finder__field { min-width: 0; }
  .finder__select { width: 100%; }
}

/* The home page runs on the wide column, so the intro, the search, the table and every section heading share one
   left edge; prose and the smaller figures keep a readable measure inside it. */
.months-year, #kev-months .cols-fig, #kev-months .tableview, .mini--cwe, .method { max-width: 56rem; }

/* Skip link: the first stop for a keyboard, shown when it has focus */
.skip { position: absolute; left: 1rem; top: -3rem; z-index: 200; padding: 0.5rem 0.9rem; border-radius: var(--radius-md); background: var(--accent); color: #fff; font-weight: 600; }
.skip:focus { top: 0.75rem; color: #fff; }

/* Pages within a month: 1,000 records a page */
.page-nav { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem; margin: 0 0 1rem; font-size: 0.9rem; }
.page-nav--foot { margin: 1.25rem 0 0; }
.page-nav__label { margin-right: 0.35rem; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--text-muted); }
.page-nav a, .page-nav span[aria-current] { display: inline-flex; align-items: center; justify-content: center; min-width: 2.2rem; height: 2.2rem; padding: 0 0.6rem; border: 1px solid var(--border); border-radius: var(--radius-md); font-weight: 600; font-variant-numeric: tabular-nums; }
.page-nav a { color: var(--accent-ink); background: var(--surface); }
.page-nav a:hover { border-color: var(--accent); }
.page-nav span[aria-current] { color: var(--text-strong); background: var(--accent-pale); border-color: var(--accent); }