/* Advisories list, advisory pages and the open data page. Loaded after /styles.css. No inline style anywhere: SVG colours come from classes here. */

/* ---- Severity colour hooks ---- */
.sev-critical { --sev: var(--sev-critical); }
.sev-high { --sev: var(--sev-high); }
.sev-medium { --sev: var(--sev-medium); }
.sev-low { --sev: var(--sev-low); }

/* ---- Badges ---- */
.adv-badges { display: flex; flex-wrap: wrap; gap: var(--s-1-5); margin: 0; }
.badge.epss { color: hsl(var(--link)); border-color: hsl(var(--primary) / 0.6); background: hsl(var(--background)); }
.badge.epss::before { content: none; }

/* ---- KPI strip ---- */
.adv-stats { display: grid; gap: var(--s-4); }
.adv-stats .kpi-row { list-style: none; padding: 0; margin: 0; }
.kpi.kpi-kev .stat { color: hsl(var(--danger)); }
.adv-stats .kpi-row { grid-template-columns: repeat(auto-fit, minmax(min(100%, 10rem), 1fr)); }
@media (min-width: 48rem) { .adv-stats .kpi-row.kpi-n4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* ---- Severity stacked bar (one bar, segments sized by SVG width attributes) ---- */
.adv-sevbar { display: grid; gap: var(--s-2); margin: 0; max-width: 40rem; }
.adv-sevbar figcaption { font-size: var(--text-sm); font-weight: 600; color: hsl(var(--foreground)); }
.adv-sevbar svg { display: block; width: 100%; height: 0.75rem; border-radius: 999px; background: hsl(var(--secondary)); overflow: hidden; }
.sev-seg { fill: var(--sev); }
.sevbar-legend { display: flex; flex-wrap: wrap; gap: var(--s-1) var(--s-4); list-style: none; padding: 0; margin: 0; font-size: var(--text-sm); }
.sevbar-legend li { display: inline-flex; align-items: center; gap: var(--s-1-5); }
.sevbar-legend .dot { width: 0.625rem; height: 0.625rem; border-radius: 50%; background: var(--sev); }
.adv-sevbar .meta { margin: 0; }

/* ---- The one control bar (static nav.filters is the no-script fallback; the script hides it) ---- */
nav.filters[hidden] { display: none; }
.adv-tools { margin-block: var(--s-4); }
.adv-tools .seg button[aria-disabled="true"] { opacity: 0.45; cursor: not-allowed; }
.adv-sort-field { display: inline-flex; align-items: center; gap: var(--s-2); margin: 0; font-size: var(--text-sm); }
.adv-sort-field select { font: inherit; color: hsl(var(--foreground)); background: hsl(var(--background)); border: 1px solid hsl(var(--border)); border-radius: var(--radius); padding: var(--s-1) var(--s-2); }
.adv-sort-field select:focus-visible { outline: 2px solid hsl(var(--ring)); outline-offset: 2px; }
.adv-tools .seg button[data-sev="critical"][aria-pressed="true"] { color: var(--sev-critical); box-shadow: 0 0 0 1px var(--sev-critical) inset; background: hsl(var(--background)); }
.adv-tools .seg button[data-sev="high"][aria-pressed="true"] { color: var(--sev-high); box-shadow: 0 0 0 1px var(--sev-high) inset; background: hsl(var(--background)); }
.adv-tools .seg button[data-sev="medium"][aria-pressed="true"] { color: var(--sev-medium); box-shadow: 0 0 0 1px var(--sev-medium) inset; background: hsl(var(--background)); }
.adv-tools .seg button[data-sev="low"][aria-pressed="true"] { color: var(--sev-low); box-shadow: 0 0 0 1px var(--sev-low) inset; background: hsl(var(--background)); }
.adv-tools #adv-kev[aria-pressed="true"] { color: hsl(var(--danger)); box-shadow: 0 0 0 1px hsl(var(--danger)) inset; background: hsl(var(--background)); }
.adv-tools .seg button:focus-visible { outline: 2px solid hsl(var(--ring)); outline-offset: 2px; }
.adv-tools #adv-count { margin: 0; text-align: end; }

/* ---- Card grid ---- */
.adv-grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr)); gap: var(--s-4); }
.adv-card { display: flex; flex-direction: column; gap: var(--s-2-5); padding: var(--s-5); border-inline-start: 3px solid var(--sev, hsl(var(--border))); }
.adv-card[data-sev="critical"] { --sev: var(--sev-critical); }
.adv-card[data-sev="high"] { --sev: var(--sev-high); }
.adv-card[data-sev="medium"] { --sev: var(--sev-medium); }
.adv-card[data-sev="low"] { --sev: var(--sev-low); }
.adv-card h2 { font-size: var(--text-lg); line-height: 1.35; margin: 0; }
.adv-card h2 a { color: hsl(var(--foreground)); text-decoration: none; }
.adv-card h2 a::after { content: ""; position: absolute; inset: 0; }
.adv-card { position: relative; transition: border-color 160ms ease, transform 160ms ease; }
.adv-card:hover { border-color: hsl(var(--primary) / 0.5); }
.adv-card:focus-within { outline: 2px solid hsl(var(--ring)); outline-offset: 2px; }
.adv-card h2 a:focus-visible { outline: none; }
.adv-card > p { margin: 0; }
.adv-card-meta { margin-top: auto !important; display: flex; flex-wrap: wrap; gap: var(--s-1) var(--s-3); font-size: var(--text-xs); }
.adv-card-meta span:first-child { font-family: var(--mono); color: hsl(var(--foreground)); }
@media (prefers-reduced-motion: reduce) { .adv-card { transition: none; } }

/* ---- Advisory page ---- */
main.advisory .page-head .adv-badges { margin-block-end: var(--s-2); }
main.advisory .page-head .adv-badges .badge { font-size: var(--text-sm); padding: var(--s-1) var(--s-3); }
.adv-key { display: grid; gap: var(--s-4); margin-block-end: var(--section-gap); }
@media (min-width: 40rem) { .adv-key { grid-template-columns: 1fr 1fr; } }
.adv-key .panel { display: grid; gap: var(--s-3); align-content: start; position: relative; overflow: hidden; }
.adv-key .panel::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; }
.adv-care::before { background: hsl(var(--warn)); }
.adv-do::before { background: hsl(var(--ok)); }
.adv-key h2 { font-size: var(--text-xl); margin: 0; }
.adv-key ul, .adv-key ol { padding-inline-start: var(--s-5); display: grid; gap: var(--s-1-5); }

/* Score gauges (.adv-scores, .adv-gauge) live in styles.css: the static and live CVE pages use them too. */

/* ---- Open data download cards ---- */
.dl-grid { display: grid; gap: var(--s-4); list-style: none; padding: 0; grid-template-columns: repeat(auto-fill, minmax(min(100%, 18rem), 1fr)); }
.dl-card { display: grid; grid-template-columns: auto 1fr; gap: var(--s-3) var(--s-4); padding: var(--s-5); align-content: start; }
.dl-ico { color: hsl(var(--link)); padding: var(--s-2); width: 2.75rem; height: 2.75rem; border-radius: var(--radius); background: hsl(var(--primary) / 0.1); box-shadow: 0 0 0 1px hsl(var(--primary) / 0.3) inset; }
.dl-body { display: grid; gap: var(--s-2); min-width: 0; }
.dl-body h3 { font-family: var(--mono); font-size: var(--text-base); margin: 0; overflow-wrap: anywhere; }
.dl-body p { margin: 0; }
.dl-foot { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); }
.dl-count::before { content: none; }
.dl-btn { grid-column: 1 / -1; width: 100%; }

/* "Who should care" holds less text than "What to do": size each panel to its content, not the row. */
.panel.adv-care, .panel.adv-todo { align-self: start; }

/* The sort label is one word: keep it on one line beside its select. */
.adv-sort-field { display: inline-flex; align-items: center; gap: var(--s-2); margin: 0; white-space: nowrap; }