/* magpie-specific styles. Shared system lives in static/ui/{tokens,base}.css
   (synced from ~/Proyectos/apps/ui via `make ui-sync`). Only the app-specific
   component classes below belong here — there is no brand color token. */

/* Sticky-footer layout: main grows, footer settles at the bottom. */
body {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}
main {
    flex: 1 0 auto;
}

/* Match meerkat: only the content column is capped; nav + footer are full-width
   with side padding. (base .container is 860.) */
.container {
    max-width: 1200px;
    padding: 0 32px;
}
.nav {
    padding: 0 32px;
}

/* Hero search (Collect) — centered, not full-width. */
.form-hero {
    max-width: 560px;
    margin-inline: auto;
}

/* coord input with a fixed "pkg:" prefix so it never has to be typed.
   Mirrors base .input-pill (canvas, hairline, full radius, 36px). */
.coord-field {
    display: flex;
    align-items: center;
    width: 100%;
    height: 36px;
    padding: 0 14px;
    background: var(--color-canvas);
    border: 1px solid var(--color-hairline);
    border-radius: var(--radius-full);
}
.coord-field:focus-within {
    border-color: var(--color-ink);
}
.coord-prefix {
    font: 14px var(--font-mono);
    color: var(--color-mute);
}
.coord-input {
    flex: 1;
    min-width: 0;
    padding: 6px 0;
    border: none;
    background: none;
    outline: none;
    font: 14px var(--font-body);
    color: var(--color-ink);
}

/* ── Component grid (.cmp) — square-ish tiles, copied from the design system
   (vulncard.css). Icon + repo link row, name + version, ecosystem pill. ── */
.cmp-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: var(--space-md);
    margin-top: var(--space-lg);
}
.cmp {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
    background: var(--color-canvas);
    border: 1px solid var(--color-hairline);
    border-radius: var(--radius-lg);
    padding: var(--space-lg);
    min-height: 128px;
}
.cmp:hover {
    border-color: var(--color-hairline-strong);
}
.cmp-clickable {
    cursor: pointer;
}
.cmp-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.cmp-icon {
    display: inline-flex;
    color: var(--color-charcoal);
}
.cmp-icon svg {
    width: 32px;
    height: 32px;
}
.cmp-icon img {
    width: 32px;
    height: 32px;
    object-fit: contain;
    border-radius: var(--radius-sm);
}
.cmp-repo {
    display: inline-flex;
    color: var(--color-mute);
}
.cmp-repo:hover {
    color: var(--color-ink);
}
.cmp-repo svg {
    width: 18px;
    height: 18px;
}
.cmp-body {
    margin-top: auto;
}
.cmp-name {
    font-family: var(--font-mono);
    font-size: 14px;
    font-weight: 600;
    color: var(--color-ink);
    line-height: 1.3;
    word-break: break-word;
}
.cmp-ver {
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--color-mute);
    margin-top: 3px;
    overflow-wrap: anywhere;
}
.cmp-eco {
    align-self: flex-start;
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--color-charcoal);
    background: var(--color-surface-soft);
    border: 1px solid var(--color-hairline);
    padding: 1px 7px;
    border-radius: var(--radius-full);
    white-space: nowrap;
}

/* Advisory grid — responsive grid of compact .svc cards. */
.vuln-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(440px, 1fr));
    gap: var(--space-md);
    margin-top: var(--space-lg);
}

/* ── CPE match card (/cpes index) ──────────────────────────────────────
   Header: glyph + CPE 2.3 segmentado + conteo X/4. Breakdown "why it
   matched" en un disclosure (valor por dimensión; range muestra los chips
   NVD y OSV lado a lado para comparar). Footer: ecosystem · purl · CVE.
   Copiado del mockup (CPE Match Cards). */
.cpe-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(440px, 1fr));
    gap: var(--space-md);
    margin-top: var(--space-lg);
    align-items: start;
}
.cpe {
    background: var(--color-canvas);
    border: 1px solid var(--color-hairline);
    border-radius: var(--radius-lg);
    padding: var(--space-lg) var(--space-xl);
}
.cpe-head { display: flex; align-items: center; gap: var(--space-md); }
.cpe-glyph { display: inline-flex; color: var(--color-charcoal); flex: none; }
.cpe-glyph svg { width: 18px; height: 18px; }
.cpe-id { font-family: var(--font-mono); font-size: 15px; line-height: 1.3; min-width: 0; word-break: break-all; }
.cpe-id-prefix { color: var(--color-mute); }
.cpe-id-main { color: var(--color-ink); font-weight: 600; }
.cpe-id-sep { color: var(--color-mute); }
.cpe-count {
    margin-left: auto; flex: none; white-space: nowrap;
    font-family: var(--font-mono); font-size: 11px; color: var(--color-charcoal);
    background: var(--color-surface-soft); border: 1px solid var(--color-hairline);
    padding: 2px 9px; border-radius: var(--radius-full);
}
/* structured "why it matched" breakdown — tucked into a disclosure */
.cpe-disclose { margin-top: var(--space-md); }
.cpe-disclose-head {
    display: flex; align-items: center; gap: var(--space-sm);
    width: 100%; background: none; border: none; cursor: pointer;
    padding: var(--space-sm) 0; font: inherit; text-align: left;
}
.cpe-disclose-label {
    font-family: var(--font-body); font-size: 12px; font-weight: 600;
    letter-spacing: .02em; color: var(--color-charcoal); white-space: nowrap;
}
.cpe-disclose-head:hover .cpe-disclose-label { color: var(--color-ink); }
.cpe-disclose-n {
    margin-left: auto; flex: none; white-space: nowrap;
    font-family: var(--font-mono); font-size: 11px; color: var(--color-mute);
    background: var(--color-surface-soft); border: 1px solid var(--color-hairline);
    padding: 2px 9px; border-radius: var(--radius-full);
}
.cpe-break { margin: 0; padding-top: var(--space-md); }
.cpe-disclose.open .cpe-break { display: flex; flex-direction: column; gap: var(--space-sm); }
.cpe-break-row { display: grid; grid-template-columns: 96px 1fr; align-items: start; gap: var(--space-md); }
.cpe-break-row dt {
    font-family: var(--font-body); font-size: 11px; text-transform: uppercase;
    letter-spacing: 0.04em; color: var(--color-mute); padding-top: 3px;
}
.cpe-break-row dd { margin: 0; }
.cpe-val { font-family: var(--font-mono); font-size: 14px; color: var(--color-ink); }
.cpe-break-row.is-off .cpe-val { color: var(--color-mute); text-decoration: line-through; text-decoration-color: var(--color-hairline-strong); }
.cpe-break-row.is-off dt { color: var(--color-mute); }
.cpe-ranges-stack { display: flex; flex-direction: column; gap: 6px; }
.cpe-ranges { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.cpe-rlabel {
    font-family: var(--font-body); font-size: 11px; text-transform: uppercase;
    letter-spacing: 0.04em; color: var(--color-mute); flex: none;
}
.cpe-range {
    font-family: var(--font-mono); font-size: 13px; color: var(--color-ink);
    background: var(--color-surface-soft); border: 1px solid var(--color-hairline);
    padding: 2px 9px; border-radius: var(--radius-full); white-space: nowrap;
}
.cpe-break-row.is-off .cpe-range { color: var(--color-charcoal); }
/* footer meta */
.cpe-foot {
    display: flex; align-items: center; gap: var(--space-md); flex-wrap: wrap;
    margin-top: var(--space-lg); padding-top: var(--space-md);
    border-top: 1px solid var(--color-hairline);
}
.cpe-eco {
    font-family: var(--font-mono); font-size: 11px; color: var(--color-charcoal);
    background: var(--color-surface-soft); border: 1px solid var(--color-hairline);
    padding: 2px 9px; border-radius: var(--radius-full);
}
.cpe-purl { font-family: var(--font-mono); font-size: 12px; color: var(--color-mute); cursor: pointer; }
.cpe-purl:hover { color: var(--color-ink); }
.cpe-cve { margin-left: auto; font-size: 13px; }
@media (max-width: 560px) {
    .cpe-break-row { grid-template-columns: 1fr; gap: 2px; }
    .cpe-cve { margin-left: 0; }
}

/* ── Single advisory card (.svc) ───────────────────────────────────────
   OriginalID IS the title, with (CanonicalID) in parens. Score pill + source
   pill on the right, then external links (GitHub / OSV) and the published /
   updated dates. Copied verbatim from the design system (vulncard.css). */
.svc {
    background: var(--color-canvas);
    border: 1px solid var(--color-hairline);
    border-radius: var(--radius-lg);
    padding: var(--space-xl);
}

.svc-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-lg);
    flex-wrap: wrap;
}
/* id on top, alias (CVE) stacked below — keeps the title column narrow so the
   score pill stays aligned top-right even when id+alias are long. */
.svc-title-wrap {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    min-width: 0;
}
.svc-canonical {
    font-family: var(--font-mono);
    font-size: 18px;
    font-weight: 600;
    line-height: 1.2;
    color: var(--color-ink);
    letter-spacing: -0.01em;
    white-space: nowrap;
    flex: 0 0 auto;
}
.svc-paren {
    font-family: var(--font-mono);
    font-size: 13px;
    color: var(--color-mute);
}

/* score pill + source pill, right-aligned */
.svc-scores {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    flex-wrap: wrap;
    justify-content: flex-end;
}
.svc-src-pill {
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--color-charcoal);
    background: var(--color-surface-soft);
    border: 1px solid var(--color-hairline);
    padding: 1px 7px;
    border-radius: var(--radius-full);
}

/* Score pill — TYPE · SCORE · BUCKET, tinted + bordered by bucket (Meerkat). */
.svc-score {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.02em;
    padding: 1px 7px;
    border-radius: var(--radius-full);
    border: 1px solid transparent;
}
.svc-score-type {
    font-weight: 700;
}
.svc-score-sep {
    opacity: 0.45;
}
.svc-score-bucket {
    font-weight: 500;
}
.svc-score.sev-critical {
    background: var(--color-severity-critical);
    color: var(--color-severity-critical-ink);
    border-color: var(--color-severity-critical-border);
}
.svc-score.sev-high {
    background: var(--color-severity-high);
    color: var(--color-severity-high-ink);
    border-color: var(--color-severity-high-border);
}
.svc-score.sev-medium {
    background: var(--color-severity-medium);
    color: var(--color-severity-medium-ink);
    border-color: var(--color-severity-medium-border);
}
.svc-score.sev-low {
    background: var(--color-severity-low);
    color: var(--color-severity-low-ink);
    border-color: var(--color-severity-low-border);
}
.svc-score.sev-none {
    background: var(--color-severity-none);
    color: var(--color-severity-none-ink);
    border-color: var(--color-severity-none-border);
}

/* external links row (GitHub advisory / OSV) */
.svc-links {
    display: flex;
    align-items: center;
    gap: var(--space-lg);
    margin-top: var(--space-md);
}
.svc-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 500;
    color: var(--color-charcoal);
    text-decoration: none;
}
.svc-link:hover {
    color: var(--color-ink);
}
.svc-link svg {
    width: 15px;
    height: 15px;
}

/* published / updated dates */
.svc-dates {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    flex-wrap: wrap;
    margin-top: var(--space-md);
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--color-charcoal);
}
.svc-dlabel {
    color: var(--color-mute);
}
.svc-rel {
    color: var(--color-mute);
}
.svc-ddot {
    color: var(--color-hairline-strong);
}

/* clickable advisory card → vuln detail page */
.svc-clickable {
    cursor: pointer;
}
.svc-clickable:hover {
    border-color: var(--color-hairline-strong);
}

/* ── Vuln detail page (vuln/{id}) ──────────────────────────────────────
   Breadcrumb + page header, then one .evc card per source advisory.
   Copied verbatim from the design system (vulncard.css + vulnerability-page). */
.crumb {
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--color-mute);
    margin-bottom: 10px;
}
.crumb b {
    color: var(--color-charcoal);
    font-weight: 600;
}
.ph {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}
.ph-title {
    font-family: var(--font-display);
    font-size: 26px;
    font-weight: 600;
    color: var(--color-ink);
    line-height: 1.15;
}
.ph-target {
    font-family: var(--font-body);
    font-size: 13px;
    color: var(--color-mute);
    margin-top: 8px;
}

.evc {
    background: var(--color-canvas);
    border: 1px solid var(--color-hairline);
    border-radius: var(--radius-lg);
    padding: var(--space-xl);
}
.evc + .evc {
    margin-top: var(--space-lg);
}
.evc-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-lg);
    flex-wrap: wrap;
}
.evc-title-wrap {
    display: flex;
    align-items: baseline;
    gap: var(--space-sm);
    flex-wrap: wrap;
    min-width: 0;
}
.evc-title {
    margin: 0;
    font-family: var(--font-mono);
    font-size: 18px;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--color-ink);
    line-height: 1.2;
    word-break: break-word;
}
.evc-canonical {
    font-family: var(--font-mono);
    font-size: 13px;
    color: var(--color-mute);
}
.evc-pills {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    flex: 0 0 auto;
    flex-wrap: wrap;
}
.evc-eco {
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--color-charcoal);
    background: var(--color-surface-soft);
    border: 1px solid var(--color-hairline);
    padding: 1px 7px;
    border-radius: var(--radius-full);
}
.evc-links {
    display: flex;
    align-items: center;
    gap: var(--space-lg);
    margin-top: var(--space-md);
}
.evc-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 500;
    color: var(--color-charcoal);
    text-decoration: none;
}
.evc-link:hover {
    color: var(--color-ink);
}
.evc-link svg {
    width: 15px;
    height: 15px;
}
.evc-desc {
    margin: var(--space-lg) 0 0;
    font-family: var(--font-body);
    font-size: 14px;
    line-height: 1.5;
    color: var(--color-body);
    max-width: 72ch;
    text-wrap: pretty;
}
.evc-dates {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    flex-wrap: wrap;
    margin-top: var(--space-md);
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--color-charcoal);
}
.evc-dlabel {
    color: var(--color-mute);
}
.evc-rel {
    color: var(--color-mute);
}
.evc-dot {
    color: var(--color-hairline-strong);
}
.evc-affected {
    margin-top: var(--space-xl);
    padding-top: var(--space-lg);
    border-top: 1px solid var(--color-hairline);
}
.evc-affected-label {
    font-family: var(--font-body);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--color-charcoal);
    margin-bottom: var(--space-md);
}
.evc-affected-label .evc-count {
    font-family: var(--font-mono);
    font-weight: 500;
    color: var(--color-mute);
    margin-left: 6px;
    text-transform: none;
    letter-spacing: 0;
}
.evc-pkg-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}
.evc-pkg {
    border: 1px solid var(--color-hairline);
    border-radius: var(--radius-lg);
    padding: var(--space-md) var(--space-lg);
    background: var(--color-surface-soft);
}
.evc-pkg-head {
    justify-content: flex-start;
}
.evc-purl {
    font-family: var(--font-mono);
    font-size: 13px;
    color: var(--color-ink);
    word-break: break-word;
}
.evc-pkg-fix {
    margin-left: auto;
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--color-severity-low-ink);
    background: var(--color-canvas);
    border: 1px solid var(--color-hairline);
    padding: 2px 9px;
    border-radius: var(--radius-full);
    white-space: nowrap;
}
.evc-pkg .collapse-body {
    margin-top: var(--space-md);
}
.evc-kv {
    margin: 0;
    display: grid;
    gap: var(--space-sm);
}
.evc-kv-row {
    display: grid;
    grid-template-columns: 140px 1fr;
    gap: var(--space-md);
    align-items: start;
}
.evc-kv-row dt {
    font-family: var(--font-body);
    font-size: 12px;
    color: var(--color-mute);
}
.evc-kv-row dd {
    margin: 0;
    font-family: var(--font-body);
    font-size: 13px;
    color: var(--color-body);
}
.evc-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
}
.evc-range {
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--color-ink);
    line-height: 1.6;
    background: var(--color-canvas);
    border: 1px solid var(--color-hairline);
    padding: 2px 9px;
    border-radius: var(--radius-full);
    white-space: nowrap;
}
.evc-ver {
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--color-ink);
    line-height: 1.6;
    background: var(--color-canvas);
    border: 1px solid var(--color-hairline);
    padding: 2px 9px;
    border-radius: var(--radius-full);
    white-space: nowrap;
}
.evc-empty {
    font-family: var(--font-mono);
    font-size: 13px;
    color: var(--color-mute);
}
.evc-more {
    font: 500 12px var(--font-body);
    color: var(--color-charcoal);
    line-height: 1.6;
    background: none;
    border: 1px dashed var(--color-hairline-strong);
    padding: 2px 10px;
    border-radius: var(--radius-full);
    cursor: pointer;
    white-space: nowrap;
}
.evc-more:hover {
    color: var(--color-ink);
    border-color: var(--color-ink);
}
@media (max-width: 560px) {
    .evc-kv-row {
        grid-template-columns: 1fr;
        gap: 2px;
    }
}

/* ── Package card (.pkg) — header (icon + name + coord + repo link), a 4-col
   meta strip (version / ecosystem / license / cpe), and a nested repository
   sub-card (stars/forks/lang + last push/release). ── */
.pkg {
    background: var(--color-canvas);
    border: 1px solid var(--color-hairline);
    border-radius: var(--radius-lg);
    padding: var(--space-xl);
}
.pkg-head {
    display: flex;
    align-items: flex-start;
    gap: var(--space-md);
}
.pkg-icon {
    width: 56px;
    height: 56px;
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-lg);
    border: 1px solid var(--color-hairline);
    background: var(--color-surface-soft);
    color: var(--color-charcoal);
}
.pkg-icon svg {
    width: 26px;
    height: 26px;
}
.pkg-icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: var(--radius-lg);
}
.pkg-id {
    min-width: 0;
    flex: 1;
}
.pkg-name {
    font-family: var(--font-display);
    font-size: 24px;
    font-weight: 600;
    line-height: 1.15;
    color: var(--color-ink);
}
.pkg-coord {
    font-family: var(--font-mono);
    font-size: 14px;
    color: var(--color-mute);
    margin-top: 4px;
    word-break: break-all;
}
.pkg-repo-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex: none;
    font: 500 13px var(--font-body);
    color: var(--color-charcoal);
    text-decoration: none;
}
.pkg-repo-link:hover {
    color: var(--color-ink);
}
.pkg-repo-link svg {
    width: 16px;
    height: 16px;
}

.pkg-meta {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-lg);
    margin-top: var(--space-lg);
    padding-top: var(--space-lg);
    border-top: 1px solid var(--color-hairline);
}
@media (max-width: 640px) {
    .pkg-meta {
        grid-template-columns: repeat(2, 1fr);
    }
}
.pkg-flabel {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-mute);
    margin-bottom: 6px;
}
.pkg-fval {
    font-size: 14px;
    color: var(--color-ink);
}
.pkg-fval.mono {
    font-family: var(--font-mono);
}
.pkg-eco {
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--color-charcoal);
    background: var(--color-surface-soft);
    border: 1px solid var(--color-hairline);
    padding: 1px 9px;
    border-radius: var(--radius-full);
}
.pkg-muted {
    color: var(--color-mute);
}
.pkg-cpe-empty {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--color-mute);
}
.pkg-cpe-empty svg {
    width: 14px;
    height: 14px;
}
.pkg-cpe-list { display: flex; flex-direction: column; gap: 2px; }
.pkg-cpe {
    font-family: var(--font-mono); font-size: 12px; color: var(--color-ink);
    overflow-wrap: anywhere; cursor: help;
}

.pkg-repo {
    margin-top: var(--space-lg);
    background: var(--color-surface-soft);
    border: 1px solid var(--color-hairline);
    border-radius: var(--radius-lg);
    padding: var(--space-lg);
}
.pkg-repo-label {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-mute);
    margin-bottom: var(--space-md);
}
.pkg-repo-label svg {
    width: 14px;
    height: 14px;
}
.pkg-repo-stats {
    display: flex;
    align-items: center;
    gap: var(--space-xl);
    flex-wrap: wrap;
    font-size: 14px;
    color: var(--color-charcoal);
}
.pkg-stat {
    display: inline-flex;
    align-items: center;
    gap: 7px;
}
.pkg-stat b {
    color: var(--color-ink);
    font-weight: 600;
}
.pkg-stat svg {
    width: 15px;
    height: 15px;
    color: var(--color-mute);
}
.pkg-lang-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--color-charcoal);
    display: inline-block;
}
.pkg-repo-dates {
    display: flex;
    gap: var(--space-section);
    flex-wrap: wrap;
    margin-top: var(--space-lg);
    padding-top: var(--space-lg);
    border-top: 1px solid var(--color-hairline);
}
.pkg-dlabel {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-mute);
    margin-bottom: 6px;
}
.pkg-dlabel svg {
    width: 14px;
    height: 14px;
}
.pkg-dval {
    font-family: var(--font-mono);
    font-size: 14px;
    color: var(--color-ink);
}
.pkg-drel {
    font-family: var(--font-mono);
    font-size: 13px;
    color: var(--color-mute);
    margin-top: 2px;
}

/* Source errors panel */
.errors-title {
    font-size: 15px;
    font-weight: 500;
    color: var(--color-ink);
}
.error-item {
    margin-top: var(--space-xs);
    color: var(--color-charcoal);
    font-size: 13px;
}

/* Vulnerability groups + members (Collect view) */
.vuln-section-title {
    font-family: var(--font-display);
    font-size: 18px;
    font-weight: 600;
    line-height: 1.3;
    color: var(--color-ink);
}
/* vuln section header: title left, order select + pager right */
.vuln-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-md);
    flex-wrap: wrap;
}
.vuln-controls {
    display: flex;
    align-items: center;
    gap: var(--space-md);
}
.vuln-empty {
    margin-top: var(--space-xl);
    text-align: center;
    color: var(--color-body);
}
.vuln-empty-inline {
    color: var(--color-body);
}

/* ── Grouped advisory card (.vc-card) ──────────────────────────────────
   A canonical advisory (root) + collapsible source-record children.
   Copied verbatim from the design system (vulncard.css). The lone change:
   the matched-dot uses --color-ink instead of the ring palette's amber, so
   the Collect view stays pure-monochrome (filled = matched, grey = not). */
.vc-card {
    background: var(--color-canvas);
    border: 1px solid var(--color-hairline);
    border-radius: var(--radius-lg);
    overflow: hidden;
}
.vc-card + .vc-card {
    margin-top: var(--space-md);
}
.vc-card.is-open {
    border-color: var(--color-hairline-strong);
}
.vc-card.is-unaffected {
    background: var(--color-surface-soft);
}

/* Root header row */
.vc-head {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-lg);
    background: none;
    border: none;
    cursor: pointer;
    text-align: left;
    font: inherit;
    padding: var(--space-lg) var(--space-xl);
}
.vc-head:hover {
    background: var(--color-surface-soft);
}
.vc-canonical {
    font-family: var(--font-mono);
    font-size: 18px;
    font-weight: 600;
    color: var(--color-ink);
    letter-spacing: -0.01em;
}
.vc-card.is-unaffected .vc-canonical {
    color: var(--color-charcoal);
}

/* clickable name → internal page (vuln / component), with a small ↗ affordance */
.vc-open { display: inline-flex; align-items: center; gap: 5px; cursor: pointer; }
.vc-open:hover { text-decoration: underline; text-underline-offset: 3px; }
.open-ico { width: 13px; height: 13px; flex: none; color: var(--color-mute); }
.vc-open:hover .open-ico { color: var(--color-ink); }

.vc-head-right {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    flex: none;
}

/* freshness tags at the end of the row: NEW (ink) + UPDATED (outline) */
.vc-tag {
    font-family: var(--font-body);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.04em;
    padding: 1px 7px;
    border-radius: var(--radius-full);
    white-space: nowrap;
}
.vc-tag-new {
    background: var(--color-ink);
    color: var(--color-canvas);
}
.vc-tag-upd {
    background: var(--color-canvas);
    color: var(--color-ink);
    border: 1px solid var(--color-hairline-strong);
}

/* root + child severity use the shared .svc-score pill (TYPE · SCORE · BUCKET).
   the "not affected" tag */
.vc-na {
    font-family: var(--font-body);
    font-size: 12px;
    color: var(--color-mute);
    border: 1px solid var(--color-hairline);
    padding: 4px 11px;
    border-radius: var(--radius-full);
    white-space: nowrap;
}

/* child count + chevron */
.vc-count {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-body);
    font-size: 13px;
    color: var(--color-mute);
    white-space: nowrap;
}
.vc-chev {
    display: inline-block;
    font-size: 10px;
    color: var(--color-mute);
    transition: transform 0.15s ease;
}
.vc-chev.open {
    transform: rotate(90deg);
}

/* Children */
.vc-children {
    border-top: 1px solid var(--color-hairline);
}
.vc-child {
    display: flex;
    gap: var(--space-xl);
    justify-content: space-between;
    align-items: flex-start;
    padding: var(--space-lg) var(--space-xl);
}
.vc-child + .vc-child {
    border-top: 1px solid var(--color-hairline);
}
.vc-child-main {
    min-width: 0;
    flex: 1;
}

.vc-child-pills {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    flex-wrap: wrap;
}
.vc-id {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    white-space: nowrap;
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--color-ink);
    background: var(--color-canvas);
    border: 1px solid var(--color-hairline-strong);
    padding: 4px 10px;
    border-radius: var(--radius-full);
}
.vc-src {
    color: var(--color-mute);
}

/* advisory title/summary line under the child pills */
.vc-desc {
    margin-top: 10px;
    font-family: var(--font-body);
    font-size: 14px;
    color: var(--color-body);
    line-height: 1.45;
    text-wrap: pretty;
}

/* match-reason strip */
.vc-match {
    margin-top: 12px;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    font-family: var(--font-mono);
    font-size: 12px;
}
.vc-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    flex: none;
}
.vc-match.is-match .vc-dot {
    background: var(--color-ink);
}
.vc-match.no-match .vc-dot {
    background: var(--color-hairline-strong);
}
.vc-ver {
    color: var(--color-ink);
    white-space: nowrap;
}
.vc-reason {
    color: var(--color-charcoal);
    padding: 2px 8px;
    white-space: nowrap;
    background: var(--color-surface-soft);
    border-radius: var(--radius-full);
}
.vc-match.no-match .vc-reason {
    color: var(--color-mute);
}
.vc-range {
    color: var(--color-mute);
    white-space: nowrap;
}
.vc-fix {
    color: var(--color-charcoal);
    white-space: nowrap;
}

/* right column: dates stacked over the advisory links */
.vc-child-side {
    flex: none;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: var(--space-md);
}
.vc-dates {
    text-align: right;
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-family: var(--font-body);
    font-size: 12px;
    color: var(--color-charcoal);
    white-space: nowrap;
}
.vc-dlabel {
    color: var(--color-mute);
}
.vc-rel {
    color: var(--color-mute);
}
.vc-child-links {
    display: flex;
    align-items: center;
    gap: var(--space-md);
}

@media (max-width: 640px) {
    .vc-child {
        flex-direction: column;
        gap: var(--space-md);
    }
    .vc-child-side {
        align-items: flex-start;
    }
    .vc-dates {
        text-align: left;
    }
}