/* ═══════════════════════════════════════════════════════════════════
   Vulnerability database — /tools/known-vulnerabilities/
   Builds on assets/tools.css. Colour is spent on one thing: severity.
   ═══════════════════════════════════════════════════════════════════ */

/* The severity spectrum: one bar, every band a filter */
.vdb-spectrum-bar {
    display: flex;
    gap: 3px;
    height: 76px;
}

.vdb-seg {
    position: relative;
    flex: 1 1 0;
    /* a small band (Low, Not scored) is never narrower than its own label */
    min-width: max-content;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 10px 12px;
    border-radius: 6px;
    text-decoration: none;
    color: #fff;
    transition: transform .15s ease, box-shadow .15s ease, opacity .15s ease;
}

.vdb-seg:first-child { border-radius: 10px 6px 6px 10px; }
.vdb-seg:last-child { border-radius: 6px 10px 10px 6px; }

#mhp-tool .vdb-seg { color: #fff; }
#mhp-tool .seg-critical { background: var(--sev-critical); }
#mhp-tool .seg-high { background: var(--sev-high); }
#mhp-tool .seg-medium { background: var(--sev-medium); color: #241800; }
#mhp-tool .seg-low { background: var(--sev-low); }
#mhp-tool .seg-unknown { background: #3a4560; color: var(--night-text); }

.vdb-seg-label {
    font-size: 13px;
    font-weight: 700;
    line-height: 1.2;
    white-space: nowrap;
}

.vdb-seg-count {
    font-size: 22px;
    font-weight: 900;
    line-height: 1.1;
    letter-spacing: -.01em;
    font-variant-numeric: tabular-nums;
}

.vdb-seg:hover,
.vdb-seg:focus-visible {
    transform: translateY(-3px);
    box-shadow: 0 10px 24px rgba(0,0,0,.35);
}

.vdb-spectrum-bar:has(.is-active) .vdb-seg:not(.is-active) {
    opacity: .38;
}

.vdb-seg.is-active {
    box-shadow: 0 0 0 2px var(--night), 0 0 0 4px var(--night-ink);
}

.vdb-spectrum-note {
    margin: 14px 0 0;
    font-size: 14px;
    color: var(--night-muted);
}

/* Filters */
.vdb-filters {
    display: grid;
    grid-template-columns: minmax(220px, 1.4fr) repeat(3, minmax(150px, 1fr)) auto;
    gap: 14px;
    align-items: end;
    background: var(--sheet);
    border: 1px solid var(--rule);
    border-radius: 12px;
    padding: 18px;
}

/* Must-Have Captcha injects its honeypot (div.mhchp) into every form on uncached
   requests; keep it out of the grid flow so it does not open an empty row */
.vdb-filters {
    position: relative;
}

.vdb-filters > :not(.vdb-field):not(.vdb-actions) {
    position: absolute;
}

.vdb-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

.vdb-field label {
    font-size: 13px;
    font-weight: 700;
    color: var(--soft);
}

.vdb-field input,
.vdb-field select {
    width: 100%;
    height: 44px;
    border: 1px solid #CDD5E0;
    border-radius: 8px;
    padding: 0 12px;
    font: inherit;
    font-size: 15px;
    color: var(--ink);
    background-color: #fff;
}

.vdb-field select {
    appearance: none;
    padding-right: 34px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%235B6678' stroke-width='1.8'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    text-overflow: ellipsis;
}

.vdb-field input:focus,
.vdb-field select:focus {
    outline: none;
    border-color: var(--link);
    box-shadow: 0 0 0 3px rgba(46,107,240,.18);
}

/* Desktop sorts by the column headers; the menu is for small screens */
.vdb-field-sort {
    display: none;
}

.vdb-actions {
    display: flex;
    align-items: center;
    gap: 14px;
}

.vdb-actions button {
    height: 44px;
    padding: 0 20px;
    border: 0;
    border-radius: 8px;
    background: var(--ink);
    color: #fff;
    font: inherit;
    font-size: 15px;
    font-weight: 800;
    cursor: pointer;
    white-space: nowrap;
}

.vdb-actions button:hover {
    background: #26305a;
}

.vdb-actions button:focus-visible {
    outline: 3px solid var(--link);
    outline-offset: 2px;
}

.vdb-clear {
    font-size: 14px;
    font-weight: 700;
    color: var(--link) !important;
    text-decoration: none;
    white-space: nowrap;
}

.vdb-count {
    margin: 22px 2px 12px;
    font-size: 15px;
    color: var(--soft);
}

.vdb-count strong {
    color: var(--ink);
    font-variant-numeric: tabular-nums;
}

/* Table */
.vdb-sheet {
    background: var(--sheet);
    border: 1px solid var(--rule);
    border-radius: 12px;
    overflow: hidden;
}

.vdb-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14.5px;
    line-height: 1.45;
    font-variant-numeric: tabular-nums;
}

.vdb-table th {
    text-align: left;
    background: #FAFBFC;
    border-bottom: 1px solid var(--rule);
    padding: 0;
    font-size: 13px;
    font-weight: 800;
    color: var(--soft);
    white-space: nowrap;
}

.vdb-table th a {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 14px 14px;
    text-decoration: none;
}

.vdb-table th a:hover,
.vdb-table th a.is-sorted {
    color: var(--ink);
}

.vdb-sort-icon {
    width: 8px;
    height: 12px;
    flex: none;
}

.vdb-sort-icon path {
    fill: #C3CBD8;
}

th[aria-sort="ascending"] .vdb-sort-icon .up,
th[aria-sort="descending"] .vdb-sort-icon .down {
    fill: var(--link);
}

.vdb-table td {
    padding: 14px;
    border-bottom: 1px solid var(--rule-soft);
    vertical-align: top;
}

.vdb-table tbody tr:last-child td {
    border-bottom: 0;
}

.vdb-table tbody tr:hover td {
    background: #FAFBFD;
}

.c-severity { width: 118px; }
.c-component { width: 21%; }
.c-affected { width: 14%; }
.c-published { width: 112px; white-space: nowrap; }
.c-cve { width: 160px; white-space: nowrap; }
.c-source { width: 104px; }

/* Severity chip: the score is the label */
.sev {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 700;
    color: var(--soft);
    white-space: nowrap;
}

.sev b {
    display: inline-grid;
    place-items: center;
    min-width: 40px;
    height: 26px;
    padding: 0 6px;
    border-radius: 6px;
    font-size: 13.5px;
    font-weight: 900;
    color: #fff;
}

.sev-critical b { background: var(--sev-critical); }
.sev-high b { background: var(--sev-high); }
.sev-medium b { background: var(--sev-medium); color: #241800; }
.sev-low b { background: var(--sev-low); }
.sev-unknown b, .sev-none b { background: var(--sev-unknown); color: var(--soft); }

.sev.sev-critical > span { color: var(--sev-critical); }
.sev.sev-high > span { color: #B23C0B; }

.comp-name {
    display: block;
    font-weight: 800;
    color: var(--ink) !important;
    text-decoration: none;
    overflow-wrap: anywhere;
}

.comp-name:hover {
    color: var(--link) !important;
    text-decoration: underline;
}

.comp-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 3px;
    font-size: 13px;
    color: var(--soft);
}

.comp-meta code {
    color: var(--soft);
    overflow-wrap: anywhere;
}

.vuln-type {
    display: block;
    font-weight: 800;
    color: var(--ink);
}

.vuln-title {
    display: block;
    margin-top: 2px;
    color: var(--soft);
    font-size: 13.5px;
    overflow-wrap: anywhere;
}

.vuln-noauth {
    display: inline-block;
    margin-top: 6px;
    padding: 1px 8px;
    border-radius: 999px;
    border: 1px solid rgba(200,16,46,.28);
    color: var(--sev-critical);
    font-size: 12px;
    font-weight: 800;
    white-space: nowrap;
}

.c-affected code {
    color: var(--ink);
    overflow-wrap: anywhere;
}

.c-affected .fixed {
    display: block;
    margin-top: 4px;
    font-size: 13px;
    color: #12805C;
    font-weight: 700;
}

.c-affected .fixed code {
    color: #12805C;
}

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

.c-published {
    color: var(--soft);
}

.c-cve a {
    color: var(--link) !important;
    text-decoration: none;
}

.c-cve a:hover {
    text-decoration: underline;
}

.c-source {
    color: var(--soft);
}

/* Empty state */
.vdb-empty {
    background: var(--sheet);
    border: 1px dashed #CDD5E0;
    border-radius: 12px;
    padding: 40px 32px;
    text-align: center;
}

.vdb-empty h2 {
    margin: 0 0 8px;
    font-size: 22px;
    font-weight: 900;
    color: var(--ink);
}

.vdb-empty p {
    margin: 0 auto 16px;
    max-width: 52ch;
    color: var(--soft);
}

.vdb-empty a {
    font-weight: 800;
    color: var(--link) !important;
}

/* Pager */
.vdb-pager {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 22px;
}

.vdb-pager-numbers {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 4px;
}

.vdb-pager a,
.vdb-pager span.current,
.vdb-pager .gap,
.vdb-pager-step {
    display: inline-grid;
    place-items: center;
    min-width: 40px;
    height: 40px;
    padding: 0 10px;
    border-radius: 8px;
    font-size: 15px;
    font-weight: 700;
    text-decoration: none;
    font-variant-numeric: tabular-nums;
}

.vdb-pager a {
    color: var(--ink);
}

.vdb-pager a:hover {
    background: #E9EEF5;
}

.vdb-pager span.current {
    background: var(--ink);
    color: #fff;
}

.vdb-pager .gap {
    min-width: 20px;
    color: var(--soft);
}

.vdb-pager-step {
    border: 1px solid var(--rule);
    background: var(--sheet);
    padding: 0 16px;
}

.vdb-pager-step.is-disabled {
    color: #B4BDCB;
}

/* ── tablet ─────────────────────────────────────────────────────── */

@media (max-width: 1100px) {
    .vdb-filters {
        grid-template-columns: 1fr 1fr 1fr;
    }
    .vdb-field-search {
        grid-column: 1 / -1;
    }
    .c-source,
    .vdb-table th.c-source {
        display: none;
    }
}

/* ── narrow: rows become stacked entries ────────────────────────── */

@media (max-width: 920px) {

    /* the bar wraps into two rows instead of squeezing the small bands */
    .vdb-spectrum-bar {
        height: auto;
        flex-wrap: wrap;
    }

    .vdb-seg {
        flex: 1 1 calc(50% - 3px) !important;
        min-height: 62px;
        border-radius: 8px !important;
    }

    .vdb-filters {
        grid-template-columns: 1fr 1fr;
        padding: 14px;
        gap: 12px;
    }

    .vdb-field-sort {
        display: flex;
    }

    .vdb-actions {
        grid-column: 1 / -1;
    }

    .vdb-actions button {
        flex: 1;
    }

    .vdb-table thead {
        display: none;
    }

    .vdb-table,
    .vdb-table tbody {
        display: block;
    }

    /* score in a left gutter, everything else flows beside it */
    .vdb-table tr {
        position: relative;
        display: flex;
        flex-wrap: wrap;
        align-items: baseline;
        gap: 6px 14px;
        padding: 16px 16px 16px 74px;
        border-bottom: 1px solid var(--rule-soft);
    }

    .vdb-table tbody tr:last-child {
        border-bottom: 0;
    }

    .vdb-table td {
        display: block;
        padding: 0;
        border: 0;
        width: auto !important;
    }

    .vdb-table tbody tr:hover td {
        background: none;
    }

    .vdb-table td.c-severity {
        position: absolute;
        left: 16px;
        top: 16px;
    }

    /* the word stays for screen readers; the score chip carries it visually */
    .sev > span {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        white-space: nowrap;
    }

    .vdb-table td.c-component,
    .vdb-table td.c-vuln {
        flex: 1 1 100%;
    }

    .vdb-table td.c-affected,
    .vdb-table td.c-published,
    .vdb-table td.c-cve {
        flex: none;
        font-size: 13px;
    }

    .c-affected .fixed {
        display: inline;
        margin: 0 0 0 8px;
    }

    .vdb-table td.c-source {
        display: none;
    }

    .vdb-pager {
        flex-wrap: wrap;
        justify-content: center;
    }

    .vdb-pager-numbers {
        order: -1;
        width: 100%;
    }
}

@media (max-width: 420px) {
    .vdb-filters {
        grid-template-columns: 1fr;
    }
}

@media (prefers-reduced-motion: reduce) {
    .vdb-seg {
        transition: none;
    }
    .vdb-seg:hover,
    .vdb-seg:focus-visible {
        transform: none;
    }
}