/* ── Header item wrapper ── */
.header-item {
    background: var(--bg-1);
    transition: background 0.15s;
}

.header-item:hover { background: var(--bg-2); }

/* ── Remediation panel ── */
.remediation {
    border-top: 1px solid var(--border);
    background: var(--bg-0);
    padding: 0;
    overflow: hidden;
    max-height: 0;
    transition: max-height 0.3s ease, padding 0.2s ease;
}

.remediation.open {
    max-height: 600px;
    padding: 1.25rem;
}

.remediation-why {
    font-size: 0.82rem;
    color: var(--text-2);
    line-height: 1.6;
    margin-bottom: 1rem;
    padding-left: 0.75rem;
    border-left: 2px solid var(--border-hover);
}

.fix-tabs {
    display: flex;
    gap: 2px;
    margin-bottom: 0.75rem;
}

.fix-tab {
    font-family: var(--font-mono);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    padding: 0.3rem 0.75rem;
    border-radius: 3px;
    border: 1px solid var(--border);
    background: transparent;
    color: var(--text-3);
    cursor: pointer;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.fix-tab:hover { color: var(--text-1); border-color: var(--border-hover); }

.fix-tab.active {
    background: var(--accent-dim);
    color: var(--accent);
    border-color: rgba(56, 189, 248, 0.3);
}

.fix-panels { position: relative; }

.fix-panel { display: none; }
.fix-panel.active { display: block; }

.fix-code-wrap {
    position: relative;
    background: #040810;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 0.875rem 3rem 0.875rem 1rem;
}

.fix-code {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    color: var(--accent);
    line-height: 1.6;
    white-space: pre-wrap;
    word-break: break-all;
    margin: 0;
}

.fix-copy {
    position: absolute;
    top: 0.6rem;
    right: 0.6rem;
    background: var(--bg-3);
    border: 1px solid var(--border);
    border-radius: 3px;
    color: var(--text-3);
    font-family: var(--font-mono);
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    padding: 0.25rem 0.5rem;
    cursor: pointer;
    transition: color 0.15s, border-color 0.15s, background 0.15s;
}

.fix-copy:hover { color: var(--text-1); border-color: var(--border-hover); }
.fix-copy.copied { color: var(--success); border-color: rgba(34,197,94,0.3); background: var(--success-dim); }

.fix-note {
    font-size: 0.75rem;
    color: var(--text-3);
    margin-top: 0.6rem;
    line-height: 1.5;
}

.fix-note::before { content: 'ℹ '; }
.fix-note--flush  { margin: 0; }

/* ── Severity badges ── */
.sev-badge {
    font-family: var(--font-mono);
    font-size: 0.58rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    padding: 0.12rem 0.4rem;
    border-radius: 3px;
    display: inline-block;
    margin-bottom: 0.3rem;
}

.sev-critical { background: rgba(239,68,68,0.12);  color: #ef4444; border: 1px solid rgba(239,68,68,0.25); }
.sev-high     { background: rgba(249,115,22,0.12); color: #f97316; border: 1px solid rgba(249,115,22,0.25); }
.sev-medium   { background: rgba(245,158,11,0.12); color: #f59e0b; border: 1px solid rgba(245,158,11,0.25); }
.sev-low      { background: rgba(100,116,139,0.12);color: #64748b; border: 1px solid rgba(100,116,139,0.25); }

.legacy-badge {
    font-family: var(--font-mono);
    font-size: 0.55rem;
    letter-spacing: 0.06em;
    padding: 0.1rem 0.35rem;
    border-radius: 3px;
    color: var(--text-3);
    border: 1px solid var(--border);
    margin-left: 0.35rem;
    vertical-align: middle;
}

/* ── Quality warnings ── */
.quality-warnings {
    margin-top: 0.35rem;
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.quality-warning {
    font-family: var(--font-mono);
    font-size: 0.68rem;
    color: #f59e0b;
    display: flex;
    align-items: flex-start;
    gap: 0.35rem;
    line-height: 1.4;
}

.quality-warning::before { content: '⚠'; flex-shrink: 0; }

.sev-warn-critical { color: #ef4444; }
.sev-warn-high     { color: #f97316; }
.sev-warn-medium   { color: var(--warning); }
.sev-warn-low      { color: var(--text-2); }

.warn-pts {
    opacity: 0.7;
    font-size: 0.65rem;
}

/* ── WEAK badge ── */
.header-badge.weak {
    background: rgba(245,158,11,0.12);
    color: #f59e0b;
    border: 1px solid rgba(245,158,11,0.25);
}

/* ── Variant summary ── */
.variant-summary {
    font-size: 0.78rem;
    color: var(--text-2);
    line-height: 1.5;
    margin-bottom: 0.75rem;
    padding: 0.5rem 0.75rem;
    background: var(--bg-3);
    border-radius: 4px;
    border-left: 2px solid var(--accent);
}

.fix-tabs--sm .fix-tab {
    font-size: 0.62rem;
    padding: 0.2rem 0.55rem;
}

/* ── Fix toggle button on header row ── */
.fix-toggle {
    font-family: var(--font-mono);
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    padding: 0.2rem 0.55rem;
    border-radius: 3px;
    border: 1px solid rgba(56, 189, 248, 0.25);
    background: var(--accent-dim);
    color: var(--accent);
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
    margin-top: 0.5rem;
    display: inline-block;
}

.fix-toggle:hover { background: rgba(56, 189, 248, 0.18); border-color: rgba(56, 189, 248, 0.5); }
.fix-toggle.open  { background: rgba(56, 189, 248, 0.18); }

/* ── Full Fix Guide ── */
.fix-guide {
    background: var(--bg-1);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
}

.fix-guide-header {
    padding: 1.25rem;
    border-bottom: 1px solid var(--border);
}

.fix-guide-header h3 {
    font-family: var(--font-mono);
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--text-1);
    margin-bottom: 0.25rem;
}

.fix-guide-header p {
    font-size: 0.8rem;
    color: var(--text-2);
}

.fix-guide-body {
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.fix-guide-tabs {
    display: flex;
    gap: 2px;
}

.guide-tab {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    padding: 0.35rem 0.9rem;
    border-radius: 3px;
    border: 1px solid var(--border);
    background: transparent;
    color: var(--text-3);
    cursor: pointer;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.guide-tab:hover { color: var(--text-1); }
.guide-tab.active {
    background: var(--accent-dim);
    color: var(--accent);
    border-color: rgba(56, 189, 248, 0.3);
}

.guide-panel { display: none; }
.guide-panel.active { display: block; }

.guide-intro {
    font-size: 0.78rem;
    color: var(--text-2);
    margin-bottom: 0.75rem;
    line-height: 1.5;
}