/* Reusable components. One block per partial in src/_includes/partials/. */

/* ---- Buttons -------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 15px 20px;
  border: 1px solid transparent;
  border-radius: var(--radius);
  font: 600 15px/1 var(--font-sans);
  white-space: nowrap;
  transition: background-color .15s, border-color .15s, color .15s;
}
.btn--primary { background: var(--green); color: var(--on-green); }
.btn--primary:hover { background: var(--green-hover); color: var(--on-green); }
.btn--ghost { border-color: var(--line-strong); color: var(--text); padding: 14px 20px; }
.btn--ghost:hover { border-color: var(--green); color: var(--text-strong); }
.btn--sm { padding: 10px 14px; border-radius: var(--radius-8); font-size: 13px; }
.btn--mono { font-family: var(--font-mono); font-size: 14px; }
.btn--quiet { font-size: 14px; font-weight: 500; padding: 13px 18px; }
.btn--mono.btn--primary { padding: 14px 18px; }
.btn--block { justify-content: center; width: 100%; padding: 12px; border-radius: var(--radius-8); font-size: 13px; }

/* ---- Text helpers & tones ------------------------------------------------- */
.text-green { color: var(--green); }
.text-violet { color: var(--violet-dot); }
.tone--critical { --tone: var(--sev-critical); --tone-bg: var(--sev-critical-bg); --tone-line: var(--sev-critical-line); }
.tone--high { --tone: var(--sev-high); --tone-bg: var(--sev-high-bg); --tone-line: var(--sev-high-line); }
.tone--medium { --tone: var(--sev-medium); --tone-bg: var(--sev-medium-bg); --tone-line: var(--sev-medium-line); }
.tone--low { --tone: var(--sev-low); --tone-bg: var(--sev-low-bg); --tone-line: var(--sev-low-line); }
.tone--green { --tone: var(--green); --tone-bg: var(--green-tint); --tone-line: var(--green-line-flag); }
.tone--violet { --tone: var(--violet-text); --tone-bg: transparent; --tone-line: var(--violet-line); }
.tone--neutral { --tone: var(--text-muted); --tone-bg: transparent; --tone-line: var(--line-strong); }
.tone-text--critical { color: var(--sev-critical); }
.tone-text--high { color: var(--sev-high); }
.tone-text--medium { color: var(--sev-medium); }
.tone-text--low { color: var(--sev-low); }

/* ---- Eyebrows, pulse, section heads -------------------------------------- */
.eyebrow {
  display: flex;
  align-items: center;
  gap: 10px;
  font: 500 12px/1 var(--font-mono);
  letter-spacing: .08em;
  color: var(--green);
}
.pulse { position: relative; display: inline-block; width: 8px; height: 8px; flex: none; }
.pulse::before, .pulse::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--green); }
.pulse::after { animation: pulse 1.8s ease-out infinite; }

.section-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 36px;
}
.section-head__titles { display: flex; flex-direction: column; gap: 12px; }
.section-title { font: 700 40px/1.05 var(--font-sans); letter-spacing: -.03em; color: var(--text-strong); }
.section-lede { font: 400 15px/1.5 var(--font-sans); color: var(--text-dim); max-width: 560px; }
@media (max-width: 640px) { .section-title { font-size: 32px; } }

/* ---- Filters (progressive enhancement) ----------------------------------- */
/* Without JS the controls are not rendered; with JS they reserve their space
   (visibility) until filters.js has wired them up, so nothing shifts. */
.js-only { display: none !important; }
.js .js-only { display: flex !important; visibility: hidden; }
.filters-ready .js-only { visibility: visible; }

.chip-filter { flex-wrap: wrap; gap: 8px; }
.chip-filter__btn {
  padding: 9px 14px;
  border: 1px solid var(--line-3);
  border-radius: 999px;
  background: transparent;
  color: var(--text-3);
  font: 500 13px/1 var(--font-sans);
}
.chip-filter__btn:hover { border-color: var(--green-border); color: var(--text-strong); }
.chip-filter__btn[aria-pressed="true"] { background: var(--green); border-color: var(--green); color: var(--on-green); }

.seg {
  flex-wrap: wrap;
  gap: 6px;
  padding: 4px;
  border: 1px solid var(--line-2);
  border-radius: var(--radius);
  background: var(--surface-sunken);
}
.seg__btn {
  padding: 8px 12px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: var(--text-dim);
  font: 500 12.5px/1 var(--font-mono);
}
.seg__btn:hover { color: var(--text-strong); }
.seg__btn[aria-pressed="true"] { background: var(--surface-active); color: var(--tone, var(--text-strong)); }

.select-wrap { position: relative; align-items: center; }
.select-wrap::after {
  content: "";
  position: absolute;
  inset-inline-end: 13px;
  top: 50%;
  width: 6px;
  height: 6px;
  border-right: 1.5px solid var(--text-3);
  border-bottom: 1.5px solid var(--text-3);
  transform: translateY(-70%) rotate(45deg);
  pointer-events: none;
}
.select {
  appearance: none;
  padding: 11px 32px 11px 12px;
  border: 1px solid var(--line-3);
  border-radius: 9px;
  background: var(--bg);
  color: var(--text-3);
  font: 500 12.5px/1 var(--font-mono);
}
.select:hover { border-color: var(--line-strong); }

.filter-empty { padding: 24px 0; color: var(--text-dim); font-size: 15px; }
.filter-empty--row { padding: 22px; }
[hidden] { display: none !important; }

/* ---- Chips ---------------------------------------------------------------- */
.sev-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 8px;
  border-radius: var(--radius-sm);
  background: var(--tone-bg);
  color: var(--tone);
  font: 600 11.5px/1 var(--font-mono);
  white-space: nowrap;
}
.flag-list { display: flex; flex-wrap: wrap; gap: 6px; }
.flag-chip {
  display: inline-block;
  padding: 5px 7px;
  border: 1px solid var(--tone-line);
  border-radius: 5px;
  color: var(--tone);
  font: 600 10.5px/1 var(--font-mono);
  letter-spacing: .04em;
  white-space: nowrap;
}
.flag-chip--sm { padding: 4px 6px; border-radius: var(--radius-xs); font-size: 10px; letter-spacing: 0; }
.flag-chip--lg { padding: 6px 8px; font-size: 11px; letter-spacing: 0; }
.tag-chip {
  display: inline-block;
  padding: 6px 9px;
  border: 1px solid var(--tone-line);
  border-radius: var(--radius-sm);
  color: var(--tone);
  font: 600 11.5px/1 var(--font-mono);
}
a.tag-chip:hover { color: var(--text-strong); border-color: var(--tone); }

/* ---- Card primitives ------------------------------------------------------ */
.stretched { color: inherit; }
.stretched::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.stretched:focus-visible { outline: none; }
.stretched:hover { color: inherit; }
:is(.post-card, .cve-card, .adv-row, .cve-row, .related-card):has(.stretched:focus-visible) {
  outline: 2px solid var(--green);
  outline-offset: -2px;
}

/* Cover art placeholder (the hatched gradient from the mockup) */
.cover-art {
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(135deg, var(--hatch-strong) 0 1px, transparent 1px 10px),
    linear-gradient(135deg, var(--cover-a, var(--tone-violet)), var(--cover-b, var(--tone-neutral)));
}
.cover-art--dark-web { --cover-a: var(--tone-violet); --cover-b: var(--tone-green); }
.cover-art--malware { --cover-a: var(--tone-green); --cover-b: var(--tone-neutral); }
.cover-art--threat-actor { --cover-a: var(--tone-green); --cover-b: var(--tone-violet); }
.cover-art--brand { --cover-a: var(--tone-violet); --cover-b: var(--tone-neutral); }
.cover-art--vulns { --cover-a: var(--tone-amber); --cover-b: var(--tone-neutral); }
.cover-art--easm { --cover-a: var(--tone-blue); --cover-b: var(--tone-neutral); }
.cover__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* ---- Post cards ----------------------------------------------------------- */
.post-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
  gap: 20px;
}
.post-grid + .post-grid { margin-top: 20px; }
.post-grid--list { grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); }
.post-card {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--line-2);
  border-radius: var(--radius-lg);
  background: var(--surface-2);
  transition: border-color .15s, transform .15s;
}
.post-card:hover { border-color: var(--green-border); transform: translateY(-2px); }
.post-card__cover { position: relative; aspect-ratio: 16 / 9; overflow: hidden; }
.post-card__body { display: flex; flex-direction: column; gap: 12px; flex: 1; padding: 24px; }
.post-card__tag { font: 500 11.5px/1.3 var(--font-mono); letter-spacing: .05em; color: var(--tone); }
.post-card__title { font: 650 20px/1.25 var(--font-sans); letter-spacing: -.015em; color: var(--text-strong); text-wrap: pretty; }
.post-card__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-top: auto; padding-top: 10px; font: 400 12.5px/1 var(--font-sans); color: var(--text-faint); }

.post-card--featured {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr));
  border-radius: var(--radius-xl);
}
.post-card--featured:hover { transform: none; }
.post-card--featured .post-card__cover { aspect-ratio: auto; min-height: 320px; }
.post-card--featured .post-card__body { gap: 18px; justify-content: center; padding: 40px; }
.post-card--featured .post-card__tag { font-size: 12px; }
.post-card__title--featured { font: 700 32px/1.12 var(--font-sans); letter-spacing: -.025em; text-wrap: balance; }
.post-card__lede { font: 400 16px/1.6 var(--font-sans); color: var(--text-muted); text-wrap: pretty; }
.post-card--featured .post-card__meta { margin-top: 0; padding-top: 0; gap: 16px; font-size: 13px; }
@media (max-width: 640px) {
  .post-card--featured .post-card__cover { min-height: 200px; }
  .post-card--featured .post-card__body { padding: 24px; }
  .post-card__title--featured { font-size: 26px; }
}
.badge-featured {
  position: absolute;
  top: 18px;
  inset-inline-start: 18px;
  padding: 6px 9px;
  border-radius: 5px;
  background: var(--green);
  color: var(--on-green);
  font: 600 11px/1 var(--font-mono);
  letter-spacing: .05em;
}
.byline { display: inline-flex; align-items: center; gap: 8px; }
.avatar { width: 24px; height: 24px; border-radius: 50%; background: var(--surface-active); border: 1px solid var(--line-3); flex: none; }

/* ---- Table card (advisories, CVE list) ----------------------------------- */
.table-card { overflow: hidden; border: 1px solid var(--line-2); border-radius: var(--radius-lg); background: var(--surface); }
.table-card__foot {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 10px;
  padding: 16px 22px;
  font: 500 13px/1 var(--font-sans);
  color: var(--text-dim);
}
.adv-head, .adv-row {
  display: grid;
  grid-template-columns: 120px minmax(0, 1fr) 150px 110px 110px;
  gap: 20px;
  align-items: center;
  padding-inline: 22px;
}
.adv-head {
  padding-block: 14px;
  border-bottom: 1px solid var(--line);
  font: 500 11px/1 var(--font-mono);
  letter-spacing: .08em;
  color: var(--text-faint);
}
.adv-row { position: relative; padding-block: 18px; border-bottom: 1px solid var(--line-faint); }
.adv-row:hover { background: var(--green-row); }
.adv-row__id { font: 500 13px/1 var(--font-mono); color: var(--green); }
.adv-row__main { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.adv-row__title { font: 550 15px/1.35 var(--font-sans); color: var(--text-strong); }
.adv-row__vendor { font: 400 12.5px/1.2 var(--font-sans); color: var(--text-faint); }
.adv-row__cve { font: 400 12.5px/1 var(--font-mono); color: var(--text-muted); }
.adv-row__sev { justify-self: start; }
.adv-row__date { font: 400 13px/1 var(--font-sans); color: var(--text-dim); }
@media (max-width: 860px) {
  .adv-head { display: none; }
  .adv-row { grid-template-columns: 1fr auto; gap: 10px 16px; }
  .adv-row__main { grid-column: 1 / -1; order: 2; }
  .adv-row__id { order: 1; }
  .adv-row__sev { order: 1; justify-self: end; }
  .adv-row__cve { order: 3; }
  .adv-row__date { order: 3; justify-self: end; }
}

/* ---- CVE cards ------------------------------------------------------------ */
.cve-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 360px), 1fr));
  gap: 1px;
  background: var(--line);
}
.cve-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 24px;
  background: var(--surface-0);
  transition: background-color .15s;
}
.cve-card:hover { background: var(--surface-2); }
.cve-card__top { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.cve-card__id { font: 600 13.5px/1 var(--font-mono); color: var(--text); }
.cve-card__head { display: flex; flex-direction: column; gap: 6px; }
.cve-card__product { font: 500 12.5px/1.3 var(--font-sans); color: var(--text-dim); }
.cve-card__title { font: 600 16px/1.35 var(--font-sans); color: var(--text-strong); text-wrap: pretty; }
.cve-card__foot { display: flex; justify-content: space-between; gap: 10px; margin-top: auto; font: 400 12px/1 var(--font-mono); color: var(--text-faint); }

/* ---- Diras take box ------------------------------------------------------- */
.take {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 20px 22px;
  border: 1px solid var(--green-line);
  border-radius: 14px;
  background: var(--green-tint);
}
.take__label { font: 600 11px/1 var(--font-mono); letter-spacing: .06em; color: var(--green); }
.take__text { font: 400 15.5px/1.65 var(--font-sans); color: var(--text-soft); }
.take--compact { gap: 5px; padding: 12px 14px; border-color: var(--green-line-soft); border-radius: var(--radius); background: var(--green-tint); }
.take--compact .take__label { font-size: 10.5px; }
.take--compact .take__text { font-size: 13.5px; line-height: 1.5; color: var(--text-2); }
.take--findings { gap: 10px; padding: 22px 24px; }
.take__list { display: flex; flex-direction: column; gap: 6px; margin: 0; padding-inline-start: 18px; font: 400 15.5px/1.65 var(--font-sans); color: var(--text-soft); }
.take__list li::marker { color: var(--green); }
h2.take__label { margin: 0; }

/* ---- Breadcrumbs ---------------------------------------------------------- */
.breadcrumbs { margin-bottom: 36px; font: 500 12.5px/1.4 var(--font-mono); color: var(--text-faint); }
.breadcrumbs ol { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; padding: 0; list-style: none; }
.breadcrumbs li { display: flex; gap: 10px; }
.breadcrumbs li + li::before { content: "/"; color: var(--text-faint); }
.breadcrumbs [aria-current="page"] { color: var(--text-3); overflow-wrap: anywhere; }

/* ---- Chip rows ------------------------------------------------------------ */
.chip-row { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.chip-row--lg { gap: 10px; }
.tag-chip--lg { padding: 7px 10px; font-size: 12px; }
.status-chip { display: inline-block; padding: 7px 10px; border-radius: var(--radius-sm); font: 600 12px/1 var(--font-mono); }
.status-chip--patched { background: var(--green); color: var(--on-green); }
.status-chip--vendor-notified { border: 1px solid var(--violet-line); color: var(--violet-text); }
.status-chip--unpatched { border: 1px solid var(--sev-critical-line); color: var(--sev-critical); }
.pill-btn {
  padding: 8px 10px;
  border: 1px solid var(--line-3);
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text-3);
  font: 500 12px/1 var(--font-mono);
}
.pill-btn:hover { border-color: var(--green-border); color: var(--text-strong); }

/* ---- Table of contents ---------------------------------------------------- */
.toc { display: flex; flex-direction: column; gap: 4px; font: 400 13.5px/1.4 var(--font-sans); }
.toc__title { margin-bottom: 10px; font: 500 11px/1 var(--font-mono); letter-spacing: .08em; color: var(--text-faint); }
.toc__list { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; }
.toc__link { display: block; padding: 7px 0 7px 14px; border-inline-start: 1px solid var(--line-3); color: var(--text-dim); }
.toc__link:hover { color: var(--text-strong); }
.toc__link[aria-current] { border-color: var(--green); color: var(--text-strong); }

/* ---- Code block ----------------------------------------------------------- */
.code-block { margin: 0; overflow: hidden; border: 1px solid var(--line-2); border-radius: var(--radius-md); background: var(--surface-0); }
.code-block__bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  border-bottom: 1px solid var(--line);
  font: 500 12px/1 var(--font-mono);
  color: var(--text-faint);
}
.code-block__copy { padding: 0; border: 0; background: none; color: var(--text-faint); font: inherit; }
.code-block__copy:hover { color: var(--green); }
.code-block pre { margin: 0; padding: 18px 20px; overflow: auto; font: 400 13.5px/1.7 var(--font-mono); color: var(--text-3); }
.code-block pre:focus-visible { outline-offset: -2px; }
.code-block code { font: inherit; background: none; padding: 0; color: inherit; }

/* ---- Product CTA ---------------------------------------------------------- */
.cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 20px;
  padding: 28px;
  border: 1px solid var(--line-2);
  border-radius: var(--radius-lg);
  background: linear-gradient(135deg, var(--tone-violet-cta), var(--surface));
}
.cta__symbol { height: 36px; width: auto; }
.cta__copy { display: flex; flex-direction: column; gap: 6px; flex: 1; min-width: 220px; }
.cta__title { font: 600 16px/1.3 var(--font-sans); color: var(--text-strong); }
.cta__text { font: 400 14px/1.5 var(--font-sans); color: var(--text-muted); }
.cta__btn { padding: 13px 16px; border-radius: 9px; font-size: 14px; }
.cta--compact { flex-direction: column; align-items: stretch; gap: 10px; padding: 20px; border-radius: 14px; }
.cta--compact .cta__symbol { height: 24px; align-self: flex-start; }
.cta--compact .cta__copy { min-width: 0; gap: 10px; }
.cta--compact .cta__title { font-size: 15px; line-height: 1.35; }
.cta--compact .cta__text { font-size: 13.5px; }
.cta--compact .cta__btn { justify-content: center; padding: 12px; border-radius: var(--radius-8); font-size: 13px; }

/* ---- Score: meter, card, grid -------------------------------------------- */
.meter { display: grid; grid-template-columns: repeat(10, 1fr); gap: 4px; }
.meter__seg { height: 8px; border-radius: 2px; background: var(--line-3); }
.meter__seg.is-on { background: var(--tone); }
.vector {
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-8);
  background: var(--surface-0);
  font: 400 12.5px/1.5 var(--font-mono);
  color: var(--text-3);
  overflow-wrap: anywhere;
}
.score-card {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 28px;
  border: 1px solid var(--tone-line);
  border-radius: var(--radius-xl);
  background: linear-gradient(180deg, var(--tone-bg), transparent);
}
.score-card__top { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; }
.score-card__score { display: flex; flex-direction: column; gap: 8px; }
.score-card__label { font: 500 11px/1 var(--font-mono); letter-spacing: .08em; color: var(--text-dim); }
.score-card__value { font: 800 72px/.9 var(--font-sans); letter-spacing: -.04em; color: var(--tone); }
.score-card__sev { padding: 8px 10px; border: 1px solid var(--tone); border-radius: var(--radius-sm); font: 700 13px/1 var(--font-mono); color: var(--tone); }

.score-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--line-2);
  border-radius: var(--radius-lg);
  background: var(--line-2);
}
.score-grid > div { display: flex; flex-direction: column; gap: 8px; padding: 18px 22px; background: var(--surface); }
.score-grid dt { font: 500 11px/1 var(--font-mono); letter-spacing: .08em; color: var(--text-faint); }
.score-grid dd { margin: 0; font: 600 15px/1.2 var(--font-sans); color: var(--text-strong); }
.score-grid .score-grid__main { grid-column: 1 / -1; padding: 22px; }
.score-grid__main dd { display: flex; align-items: baseline; gap: 12px; }
.score-grid__value { font: 800 60px/.9 var(--font-sans); letter-spacing: -.04em; color: var(--tone); }
.score-grid__sev { font: 700 13px/1 var(--font-mono); color: var(--tone); }
.score-grid dd.score-grid__num { font-size: 20px; line-height: 1; }
.score-grid dd.text-green { color: var(--green); }

/* ---- Meta grid ------------------------------------------------------------ */
.meta-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr));
  margin: 0;
  border-bottom: 1px solid var(--line-2);
}
.meta-grid > div { display: flex; flex-direction: column; gap: 8px; padding: 22px 20px 22px 0; }
.meta-grid dt { font: 500 11px/1 var(--font-mono); letter-spacing: .08em; color: var(--text-faint); }
.meta-grid dd { margin: 0; font: 500 15px/1.35 var(--font-sans); color: var(--text); }

/* ---- Data tables (affected versions, IOCs) ------------------------------- */
.data-table, .ioc-table {
  width: 100%;
  border: 1px solid var(--line-2);
  border-radius: var(--radius-md);
  border-collapse: separate;
  border-spacing: 0;
  overflow: hidden;
  font: 400 13.5px/1.3 var(--font-mono);
}
.data-table th { padding: 12px 16px; border-bottom: 1px solid var(--line); font-weight: 400; text-align: start; color: var(--text-faint); }
.data-table td { padding: 14px 16px; border-bottom: 1px solid var(--line-faint); color: var(--text-soft); }
.data-table tr:last-child td { border-bottom: 0; }
.data-table td.tone-text--critical { color: var(--sev-critical); }
.data-table td.text-green { color: var(--green); }
.data-table td { overflow-wrap: anywhere; }
/* Below 640px each row becomes a stacked card (DESIGN.md: tables collapse < 640px). */
@media (max-width: 640px) {
  .data-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .data-table, .data-table tbody, .data-table tr, .data-table td { display: block; }
  .data-table tr { padding: 12px 16px; border-bottom: 1px solid var(--line-faint); }
  .data-table tr:last-child { border-bottom: 0; }
  .data-table td { display: grid; grid-template-columns: 88px minmax(0, 1fr); gap: 12px; padding: 4px 0; border: 0; }
  .data-table td::before { content: attr(data-label); color: var(--text-faint); font-size: 11px; line-height: 1.6; letter-spacing: .06em; }
}
.ioc-table { font-size: 13px; line-height: 1.4; }
.ioc-table th, .ioc-table td { padding: 13px 16px; border-bottom: 1px solid var(--line-faint); text-align: start; vertical-align: top; }
.ioc-table tbody th { width: 126px; font-weight: 400; color: var(--text-faint); }
.ioc-table td { color: var(--text-soft); overflow-wrap: anywhere; }
.ioc-table tr:last-child > * { border-bottom: 0; }

/* ---- Timeline ------------------------------------------------------------- */
.timeline { position: relative; display: flex; flex-direction: column; margin: 0; padding: 0 0 0 22px; list-style: none; }
.timeline::before { content: ""; position: absolute; left: 5px; top: 8px; bottom: 8px; width: 1px; background: var(--line-3); }
.timeline__item { position: relative; display: flex; flex-direction: column; gap: 4px; padding-bottom: 22px; }
.timeline__item::before {
  content: "";
  position: absolute;
  left: -21px;
  top: 6px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--text-dim);
  box-shadow: 0 0 0 4px var(--bg);
}
.timeline__item--confirmed::before { background: var(--violet-text); }
.timeline__item--fixed::before { background: var(--green); }
.timeline time { font: 500 12.5px/1.2 var(--font-mono); color: var(--text-dim); }
.timeline span { font: 500 15.5px/1.4 var(--font-sans); color: var(--text); }

/* ---- Reference list ------------------------------------------------------- */
.ref-list { display: flex; flex-direction: column; gap: 10px; margin: 0; padding: 0; list-style: none; font: 400 14px/1.4 var(--font-mono); }
.ref-list a { overflow-wrap: anywhere; }
.ref-list--sans { font-family: var(--font-sans); font-size: 15px; }

/* ---- FAQ ------------------------------------------------------------------ */
.faq { overflow: hidden; border: 1px solid var(--line-2); border-radius: var(--radius-md); }
.faq__item { border-bottom: 1px solid var(--line-faint); }
.faq__item:last-child { border-bottom: 0; }
.faq__q {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 18px;
  cursor: pointer;
  list-style: none;
  font: 600 15px/1.4 var(--font-sans);
  color: var(--text-strong);
}
.faq__q::-webkit-details-marker { display: none; }
.faq__q::after { content: "+"; font-family: var(--font-mono); color: var(--green); }
.faq__item[open] .faq__q::after { content: "\2212"; }
.faq__q:focus-visible { outline-offset: -2px; }
.faq__a { padding: 0 18px 16px; font: 400 15px/1.65 var(--font-sans); color: var(--text-lede); }

/* ---- Related cards -------------------------------------------------------- */
.related-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; }
.related-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 8px;
  height: 100%;
  padding: 16px;
  border: 1px solid var(--line-2);
  border-radius: var(--radius-md);
  background: var(--surface);
  transition: border-color .15s;
}
.related-card:hover { border-color: var(--green-border); }
.related-card__top { display: flex; justify-content: space-between; gap: 8px; font: 500 12.5px/1 var(--font-mono); color: var(--green); }
.related-card__title { margin: 0; font: 500 14px/1.4 var(--font-sans); color: var(--text); }

/* ---- CVE rows (radar table) ---------------------------------------------- */
.cve-head, .cve-row {
  display: grid;
  grid-template-columns: 130px minmax(0, 1fr) 118px;
  gap: 18px;
  padding-inline: 20px;
}
.cve-head {
  padding-block: 14px;
  border-bottom: 1px solid var(--line);
  font: 500 11px/1 var(--font-mono);
  letter-spacing: .08em;
  color: var(--text-faint);
}
.cve-list { margin: 0; }
.cve-row { position: relative; align-items: start; padding-block: 18px; border-bottom: 1px solid var(--line-faint); }
.cve-row:hover { background: var(--green-row); }
.cve-row__id { font: 500 13px/1.4 var(--font-mono); color: var(--green); }
.cve-row__main { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.cve-row__title { font: 550 15px/1.35 var(--font-sans); color: var(--text-strong); }
.cve-row__meta { font: 400 12.5px/1.3 var(--font-sans); color: var(--text-faint); }
.cve-row__sev { justify-self: start; }
@media (max-width: 640px) {
  .cve-head { display: none; }
  .cve-row { grid-template-columns: 1fr auto; gap: 10px; }
  .cve-row__main { grid-column: 1 / -1; order: 2; }
}

/* ---- Pagination ----------------------------------------------------------- */
.table-card__foot--pager { align-items: center; padding: 14px 20px; }
.pager ul { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0; padding: 0; list-style: none; font: 500 12.5px/1 var(--font-mono); }
.pager__link { display: block; padding: 8px 11px; border-radius: 7px; color: var(--text-dim); }
.pager__link:hover { color: var(--text-strong); background: var(--hover-bg); }
.pager__link[aria-current="page"] { background: var(--green); color: var(--on-green); }
.pager__link.is-disabled { color: var(--text-faint); cursor: default; }
.pager__link.is-disabled:hover { background: none; color: var(--text-faint); }
.pager__gap { padding: 8px 4px; color: var(--text-dim); }
.hub-count { margin-inline-start: auto; font: 400 13px/1 var(--font-sans); color: var(--text-faint); }

/* ---- Side cards (hub sidebars) ------------------------------------------- */
.side-card { display: flex; flex-direction: column; gap: 12px; padding: 20px; border: 1px solid var(--line-2); border-radius: 14px; background: var(--surface); }
.side-card__title { font: 500 11px/1 var(--font-mono); letter-spacing: .08em; color: var(--text-faint); }
.side-card--accent { gap: 10px; border-color: var(--green-line); background: var(--green-tint); }
.side-card__heading { font: 600 15px/1.3 var(--font-sans); color: var(--text-strong); }
.side-card__text { font: 400 13.5px/1.5 var(--font-sans); color: var(--text-muted); }
.vendor-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.vendor-chips a { display: block; padding: 8px 10px; border: 1px solid var(--line-3); border-radius: 7px; font: 500 12.5px/1 var(--font-sans); color: var(--text-3); }
.vendor-chips a:hover, .vendor-chips a[aria-current] { border-color: var(--green); color: var(--text-strong); }
.archive-list { display: flex; flex-direction: column; gap: 10px; margin: 0; padding: 0; list-style: none; }
.archive-list a { display: flex; justify-content: space-between; font: 400 14px/1.4 var(--font-sans); color: var(--text-3); }
.archive-list a:hover, .archive-list a[aria-current] { color: var(--text-strong); }
.archive-list__count { color: var(--text-faint); font-family: var(--font-mono); font-size: 12.5px; }

.muted { color: var(--text-dim); }


/* ---- Search bar ----------------------------------------------------------- */
.search-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 36px 0 18px;
  padding: 6px 6px 6px 18px;
  border: 1px solid var(--line-3);
  border-radius: var(--radius-md);
  background: var(--surface);
}
.search-bar:focus-within { border-color: var(--green-border); }
.search-bar__prompt { font: 500 14px/1 var(--font-mono); color: var(--green); }
.search-bar__input {
  flex: 1;
  min-width: 0;
  padding: 10px 0;
  border: 0;
  background: transparent;
  color: var(--text);
  font: 400 15px/1 var(--font-sans);
}
.search-bar__input::placeholder { color: var(--text-faint); }
.search-bar__input:focus { outline: none; }
.search-bar__btn { padding: 12px 16px; border-radius: var(--radius-8); font-size: 13px; }

/* ---- Search results ------------------------------------------------------- */
.search-status { min-height: 1.5em; margin: 8px 0 20px; font: 400 14px/1.5 var(--font-sans); color: var(--text-dim); }
/* Reserve a viewport of space so results arriving after load do not shift the footer (CLS). */
.search-results { display: flex; flex-direction: column; min-height: 100vh; margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.search-results:empty { border-top: 0; }
.search-result { display: flex; flex-direction: column; gap: 6px; padding: 20px 0; border-bottom: 1px solid var(--line); }
.search-result__type { font: 600 11px/1 var(--font-mono); letter-spacing: .06em; color: var(--green); }
.search-result__title { font: 600 18px/1.35 var(--font-sans); }
.search-result__title a { color: var(--text-strong); }
.search-result__title a:hover { color: var(--green-hover); }
.search-result__excerpt { max-width: 760px; font: 400 14.5px/1.6 var(--font-sans); color: var(--text-muted); }
.search-result__excerpt mark { background: var(--green-tint); color: var(--green); }