/* ==========================================================================
   Threat radar — page-specific styles
   --------------------------------------------------------------------------
   Loaded only by /threat-radar/, after site.css. Split out of site.css so a
   change here cannot invalidate the stylesheet every other page depends on,
   and so its cache key moves independently.

   Two constraints shape it. The CSP is `style-src 'self'` with no
   unsafe-inline, so nothing data-driven arrives as a style attribute -- bar
   widths and plot positions are SVG geometry. And status is never carried by
   colour alone: every severity badge states its band as text.
   ========================================================================== */

/* Only this page loads this file, so page-scoped variables can live on
   :root without reaching anything else. */
:root {
  --kev: #ff8a63;
  --epss: #8aa6ff;
  --radar-muted: #b9c4dd;   /* lifted from the site default for contrast */
  --radar-line: #24325a;
  --radar-surface: #141d38;
}

.muted { color: var(--radar-muted); }

/* -- hero ---------------------------------------------------------------- */

.radar-hero { padding: 40px 0 24px; }
.radar-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: 36px;
  align-items: center;
}
.radar-hero-copy { min-width: 0; }
.radar-hero-copy h1 { margin: 4px 0 10px; font-size: clamp(1.9rem, 3.4vw, 2.6rem); }
.radar-hero-copy .lead { max-width: 52ch; margin-bottom: 16px; }

.radar-stamp {
  display: inline-flex; align-items: center; gap: 8px;
  margin: 0 0 8px;
  padding: 5px 11px;
  border: 1px solid var(--radar-line);
  border-radius: 999px;
  color: var(--radar-muted);
  font-size: 0.84rem;
}
.radar-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ok); }
.radar-notice { margin: 0 0 16px; color: var(--radar-muted); font-size: 0.88rem; }

.radar-jump { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0; }
.radar-jump .btn { min-height: 44px; display: inline-flex; align-items: center; }
.radar-textlink {
  display: inline-flex; align-items: center;
  min-height: 44px;
  color: var(--accent);
  font-size: 0.9rem;
}

.radar-hero-visual { min-width: 0; display: flex; justify-content: center; }
.radar-plot-figure { margin: 0; max-width: 300px; }
.radar-plot { width: 100%; max-width: 280px; height: auto; display: block; margin-inline: auto; }
.radar-ring { fill: none; stroke: var(--radar-line); stroke-width: 1; }
.radar-point-kev { fill: var(--kev); }
.radar-point-epss { fill: var(--epss); }
.radar-sweep-arc { fill: rgba(138, 166, 255, 0.09); }
.radar-sweep { transform-origin: 120px 120px; animation: radar-spin 14s linear infinite; }
@keyframes radar-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .radar-sweep { animation: none; } }

.radar-plot-legend {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 14px;
  margin: 10px 0 0;
  font-size: 0.78rem; color: var(--radar-muted);
}
.radar-key { display: inline-flex; align-items: center; gap: 6px; }
.radar-key::before { content: ""; width: 8px; height: 8px; border-radius: 50%; }
.radar-key-kev::before { background: var(--kev); }
.radar-key-epss::before { background: var(--epss); }
.radar-key-note { flex-basis: 100%; text-align: center; max-width: 40ch; margin-inline: auto; }

/* -- KPI row ------------------------------------------------------------- */

.radar-kpis { padding: 8px 0 20px; }
.radar-kpi-grid {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px;
}
.radar-kpi {
  display: flex; flex-direction: column; gap: 2px;
  padding: 16px;
  border: 1px solid var(--radar-line);
  border-radius: 12px;
  background: var(--radar-surface);
}
.radar-kpi-value { font-size: 1.6rem; font-weight: 700; line-height: 1.1; }
.radar-kpi-label { font-weight: 600; font-size: 0.92rem; }
.radar-kpi-note { color: var(--radar-muted); font-size: 0.8rem; line-height: 1.45; }

.radar-sources {
  list-style: none; margin: 12px 0 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 6px;
  font-size: 0.78rem; color: var(--radar-muted);
}
.radar-sources li {
  padding: 3px 9px;
  border: 1px solid var(--radar-line);
  border-radius: 999px;
}

/* -- the two signals ----------------------------------------------------- */

.radar-signals { padding: 12px 0 24px; }
.radar-signal-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.radar-signal {
  padding: 16px 18px;
  border: 1px solid var(--radar-line);
  border-left-width: 3px;
  border-radius: 12px;
}
.radar-signal-kev { border-left-color: var(--kev); }
.radar-signal-epss { border-left-color: var(--epss); }
.radar-signal-tag {
  margin: 0; font-size: 0.72rem; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase;
}
.radar-signal-kev .radar-signal-tag { color: var(--kev); }
.radar-signal-epss .radar-signal-tag { color: var(--epss); }
.radar-signal-src { margin: 4px 0 2px; font-weight: 600; }
.radar-signal-meaning { margin: 0; color: var(--radar-muted); font-size: 0.88rem; }
.radar-signal-rule {
  margin: 12px 0 0; padding: 12px 16px;
  border-left: 3px solid var(--accent);
  background: var(--bg-soft);
  border-radius: 0 10px 10px 0;
  font-size: 0.92rem;
}

/* -- panels -------------------------------------------------------------- */

.radar-panel { padding: 40px 0; scroll-margin-top: calc(var(--header-h, 65px) + 16px); }
.radar-panel .wrap {
  border: 1px solid var(--radar-line);
  border-top-width: 3px;
  border-radius: 14px;
  padding: 22px;
}
.radar-panel-kev .wrap { border-top-color: var(--kev); }
.radar-panel-epss .wrap { border-top-color: var(--epss); }
.radar-panel h2 { margin: 6px 0 8px; }
.radar-panel .lead { font-size: 0.96rem; max-width: 78ch; margin-bottom: 16px; }
.radar-badge {
  display: inline-block; margin: 0;
  font-size: 0.72rem; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase;
}
.radar-badge-kev { color: var(--kev); }
.radar-badge-epss { color: var(--epss); }

/* -- one chart per section ---------------------------------------------- */

.radar-chart { margin: 0 0 16px; }
.radar-chart figcaption {
  font-size: 0.82rem; color: var(--radar-muted); margin-bottom: 8px;
}
.radar-dist { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.radar-dist-row {
  display: grid; grid-template-columns: 88px 1fr 30px;
  align-items: center; gap: 10px; font-size: 0.84rem;
}
.radar-dist-label { color: var(--radar-muted); }
.radar-dist-count { text-align: right; font-variant-numeric: tabular-nums; }

.radar-bar { width: 100%; height: 6px; display: block; }
.radar-bar-track { fill: rgba(255, 255, 255, 0.08); }
.radar-bar-fill { fill: var(--accent); }
[class*="radar-bar-kev"] .radar-bar-fill { fill: var(--kev); }
[class*="radar-bar-epss"] .radar-bar-fill { fill: var(--epss); }

/* -- toolbar and pager --------------------------------------------------- */

.radar-toolbar {
  display: flex; flex-wrap: wrap; align-items: end; gap: 10px;
  margin: 0 0 12px; padding: 14px;
  border: 1px solid var(--radar-line);
  border-radius: 12px;
}
.radar-field { display: grid; gap: 4px; }
.radar-field-search { flex: 1 1 240px; }
.radar-field label { font-size: 0.78rem; color: var(--radar-muted); }
.radar-input, .radar-select {
  min-height: 44px; padding: 8px 11px;
  border-radius: 9px; border: 1px solid var(--radar-line);
  background: var(--bg); color: var(--text);
  font: inherit; font-size: 0.9rem;
}

/* Explicit, because a bare <button> inherits the browser's light chrome:
   near-white background with near-white text made the label look blank. */
.radar-reset, .radar-page-btn {
  min-height: 44px;
  padding: 8px 16px;
  border-radius: 9px;
  border: 1px solid var(--radar-line);
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: 0.9rem;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.radar-reset:hover, .radar-page-btn:hover:not(:disabled) {
  background: var(--bg-soft);
  border-color: var(--accent);
}
.radar-reset:active, .radar-page-btn:active:not(:disabled) { background: var(--bg-card); }
.radar-page-btn:disabled { opacity: 0.45; cursor: default; }
.radar-input:focus-visible, .radar-select:focus-visible,
.radar-reset:focus-visible, .radar-page-btn:focus-visible,
.radar-expand:focus-visible, .radar-cve:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
}

.radar-pager {
  display: flex; flex-wrap: wrap; align-items: center;
  justify-content: space-between; gap: 10px;
  margin: 12px 0 0;
}
.radar-count { margin: 0; color: var(--radar-muted); font-size: 0.86rem; }
.radar-pager-controls { display: flex; gap: 8px; }
.radar-empty {
  margin: 12px 0 0; padding: 14px;
  border: 1px dashed var(--radar-line); border-radius: 12px;
  color: var(--radar-muted);
}

/* -- the table ----------------------------------------------------------- */

.radar-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
  /* The global `table` rule sets min-width: 640px for the site's scrollable
     tables. This one manages its own width and becomes cards on mobile. */
  min-width: 0;
  margin-top: 4px;
}
.radar-table thead th {
  position: sticky;
  /* Below the sticky site header, whatever height it currently is. The literal
     65px this carried was measured at 1440 and left the header overlapping the
     table head everywhere the nav wraps to a second row. */
  top: var(--header-h, 65px);
  z-index: 2;
  background: var(--bg);
  text-align: left;
  padding: 9px 10px;
  border-bottom: 1px solid var(--radar-line);
  font-size: 0.76rem; letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--radar-muted);
}
.radar-table td {
  padding: 11px 10px;
  border-bottom: 1px solid rgba(36, 50, 90, 0.55);
  vertical-align: top;
}
.radar-table tbody tr:hover { background: rgba(79, 140, 255, 0.06); }
.radar-table tbody tr:focus-within { background: rgba(79, 140, 255, 0.11); }
.radar-table td:nth-child(1) { white-space: nowrap; }
.radar-table td:nth-child(3), .radar-table td:nth-child(4) { font-variant-numeric: tabular-nums; }
.radar-table td:nth-child(5) { white-space: nowrap; color: var(--radar-muted); }
.radar-table td:nth-child(2) { max-width: 46ch; }

.radar-cve {
  font-family: var(--mono); font-size: 0.86rem;
  color: var(--accent); text-decoration: none;
  border-bottom: 1px solid transparent;
}
.radar-cve:hover { border-bottom-color: currentColor; }

.radar-desc {
  overflow-wrap: anywhere;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; line-height: 1.5;
}
.radar-desc.is-open { -webkit-line-clamp: unset; overflow: visible; }
.radar-expand {
  margin-top: 3px; padding: 4px 0; min-height: 32px;
  background: none; border: 0; color: var(--accent);
  font: inherit; font-size: 0.8rem; cursor: pointer;
}
/* The 44px target is about fingers. An inline text control inside a table cell
   at 32px is comfortable with a mouse and clears the WCAG 2.2 AA minimum of
   24px; on a touch screen it is not, and there can be fifteen of them stacked
   in the card layout. Grown only where the pointer is coarse, so the desktop
   table does not gain 12px on every row for nothing. */
@media (pointer: coarse) {
  .radar-expand { min-height: 44px; padding: 10px 0; }
}
.radar-expand:hover { text-decoration: underline; }

.radar-cvss {
  display: inline-flex; align-items: baseline; gap: 5px;
  padding: 2px 8px; border-radius: 7px;
  border: 1px solid var(--radar-line);
  white-space: nowrap;
}
.radar-cvss-score { font-weight: 700; }
.radar-cvss-band { font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.04em; }
.radar-cvss-critical { border-color: rgba(255, 107, 107, 0.5); color: #ff9d9d; }
.radar-cvss-high { border-color: rgba(255, 179, 71, 0.5); color: #ffc978; }
.radar-cvss-medium { border-color: rgba(255, 214, 102, 0.4); color: #ffe08a; }
.radar-cvss-low { border-color: rgba(74, 222, 128, 0.4); color: #86efac; }
.radar-cvss-none { color: var(--radar-muted); }

.radar-epss-value { display: block; font-weight: 600; margin-bottom: 3px; }
.radar-table td:nth-child(4) .radar-bar { width: 84px; }
.radar-year { display: block; font-size: 0.74rem; opacity: 0.8; }

/* -- scoring and CTA ----------------------------------------------------- */

.radar-scoring { padding: 40px 0; scroll-margin-top: calc(var(--header-h, 65px) + 16px); }
.radar-explain-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px; margin: 18px 0;
}
.radar-explain {
  padding: 16px 18px;
  border: 1px solid var(--radar-line);
  border-radius: 12px;
}
.radar-explain h3 { margin: 0 0 6px; font-size: 0.98rem; }
.radar-explain p { margin: 0; color: var(--radar-muted); font-size: 0.88rem; }
.radar-why { max-width: 80ch; font-size: 0.94rem; }

.radar-flow {
  list-style: none; display: flex; flex-wrap: wrap; justify-content: center;
  gap: 8px; margin: 0 0 18px; padding: 0;
}
.radar-flow li {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 13px;
  border: 1px solid var(--radar-line); border-radius: 999px;
  font-size: 0.83rem;
}
.radar-flow li + li::before { content: "\2192"; margin-right: 3px; color: var(--radar-muted); }

/* -- responsive ---------------------------------------------------------- */

@media (max-width: 1000px) {
  .radar-kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
  .radar-hero-grid { grid-template-columns: 1fr; gap: 24px; }
  .radar-hero-visual { order: -1; }
  .radar-signal-grid { grid-template-columns: 1fr; }
  .radar-panel .wrap { padding: 18px 16px; }
}

/* Below this the same rows become cards. One set of markup, two presentations:
   the previous version shipped every row twice and doubled the page weight. */
@media (max-width: 760px) {
  .radar-table, .radar-table tbody, .radar-table tr, .radar-table td { display: block; }
  /* `display: block` above beats the UA rule that makes [hidden] display:none,
     so every paginated-out row rendered as a card and the page ran to thirty
     thousand pixels. Any author display rule needs this counterpart. */
  .radar-table tr[hidden], .radar-table td[hidden] { display: none; }
  .radar-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .radar-table tr {
    margin-bottom: 10px; padding: 14px;
    border: 1px solid var(--radar-line); border-radius: 12px;
  }
  .radar-table td {
    display: grid; grid-template-columns: 92px 1fr; gap: 10px;
    padding: 5px 0; border: 0; white-space: normal;
  }
  .radar-table td::before {
    content: attr(data-label);
    color: var(--radar-muted);
    font-size: 0.74rem; text-transform: uppercase; letter-spacing: 0.05em;
    padding-top: 2px;
  }
  .radar-table td:nth-child(1), .radar-table td:nth-child(5) { white-space: normal; }
  .radar-table td:nth-child(2) { max-width: none; }
  .radar-table td:nth-child(4) .radar-bar { width: 100%; max-width: 160px; }
  .radar-count { flex-basis: 100%; }
  .radar-field-search { flex-basis: 100%; }
  .radar-dist-row { grid-template-columns: 80px 1fr 28px; }
}

@media (max-width: 560px) {
  .radar-kpi-grid { grid-template-columns: 1fr; }
  .radar-hero { padding: 28px 0 16px; }
}