/* ── Compliance layout (table + overlay drawer) ──────────────────────── */
/*
   2026-05-26: the drawer was previously a flex sibling that shrank the
   table when opened — at narrow widths the columns collapsed into a
   pile of vertically-overflowed text. It's now a fixed-position
   overlay that slides in from the right, sitting on top of the table.
   The table keeps its full width and stays scrollable underneath; the
   user dismisses the drawer to return to the full table view.
*/
#compliance-layout {
  display: block;
  min-width: 0;
}

#compliance-table-area {
  min-width: 0;
  overflow-x: auto;
}

/* Slide-in overlay drawer.

   Positioned via `position: fixed` from the right edge of the viewport
   so opening it does not narrow the table. The drawer can be widened
   via the left-edge resizer (saved to localStorage); the expand button
   takes it to full viewport width. A `transform: translateX(100%)`
   moves it offscreen when closed for a smooth slide-in. */
#comp-detail-panel {
  position: fixed;
  top: var(--topbar-h);
  right: 0;
  bottom: 0;
  width: var(--comp-panel-w, 480px);
  min-width: 320px;
  max-width: 100vw;
  background: var(--panel);
  border-left: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  z-index: 60;
  box-shadow: -8px 0 24px var(--shadow);
  transform: translateX(100%);
  transition: transform 0.18s ease, width 0.18s ease;
}
#comp-detail-panel.open { transform: translateX(0); }

/* Drag handle on the left edge — widens the panel, leaving the table
   underneath unaffected. */
#comp-panel-resizer {
  position: absolute;
  top: 0;
  left: 0;
  width: 6px;
  height: 100%;
  cursor: ew-resize;
  background: transparent;
  z-index: 5;
  transition: background 0.15s;
}
#comp-panel-resizer:hover,
#comp-panel-resizer.dragging { background: var(--accent); opacity: 0.5; }

/* Expanded mode — panel grows to full viewport width. The table still
   exists in the DOM and remains scrollable when the drawer closes;
   no display:none on the table. */
#compliance-layout.expanded #comp-detail-panel { width: 100vw; max-width: 100vw; }

/* While dragging, disable text selection and pointer events on the
   table behind the drawer so the cursor isn't fighting it. */
body.comp-panel-resizing { cursor: ew-resize; user-select: none; }
body.comp-panel-resizing #compliance-table-area { pointer-events: none; }

/* ── Panel header ────────────────────────────────────────────────────── */

#comp-panel-header {
  flex-shrink: 0;
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.85rem 1rem;
  border-bottom: 1px solid var(--border);
  background: var(--panel-2);
}
#comp-panel-title {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}
#comp-panel-name {
  font-size: 0.95rem;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#comp-panel-meta { font-size: 0.78rem; }

#comp-panel-actions {
  flex-shrink: 0;
  display: flex;
  gap: 0.4rem;
  align-items: center;
}
#comp-panel-expand {
  background: none;
  border: 1px solid var(--border);
  color: var(--muted);
  border-radius: 4px;
  cursor: pointer;
  padding: 3px 6px;
  display: flex;
  align-items: center;
  justify-content: center;
}
#comp-panel-expand svg { width: 13px; height: 13px; }
#comp-panel-expand:hover { color: var(--text); border-color: var(--text); }
#comp-panel-close {
  background: none;
  border: 1px solid var(--border);
  color: var(--muted);
  border-radius: 4px;
  cursor: pointer;
  padding: 3px 7px;
  font-size: 0.85rem;
}
#comp-panel-close:hover { color: var(--text); border-color: var(--text); }

/* ── Tabs ────────────────────────────────────────────────────────────── */

#comp-panel-tabs {
  flex-shrink: 0;
  display: flex;
  gap: 0.25rem;
  padding: 0 0.6rem;
  border-bottom: 1px solid var(--border);
  background: var(--panel-2);
  /* Six tabs (incl. Vulnerabilities) overflow the un-expanded drawer; scroll
     horizontally instead of clipping the last tab off the right edge. */
  overflow-x: auto;
  scrollbar-width: thin;
}
.comp-tab {
  background: none;
  border: none;
  color: var(--muted);
  padding: 0.55rem 0.7rem;
  cursor: pointer;
  font-size: 0.78rem;
  font-weight: 500;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  white-space: nowrap;   /* never wrap a tab label */
  flex: 0 0 auto;        /* never shrink a tab below its label width */
}
.comp-tab:hover { color: var(--text); }
.comp-tab.active {
  color: var(--text);
  border-bottom-color: var(--accent);
}

/* ── Persistent Connect block (drawer header) ────────────────────────── */

#comp-panel-connect {
  flex-shrink: 0;
  border-bottom: 1px solid var(--border);
  background: var(--panel);
  padding: 0.55rem 0.7rem 0.4rem;
}
#comp-panel-connect[hidden] { display: none; }
#comp-panel-connect .panel-connect-row {
  background: transparent;
  border: none;
  padding: 0.3rem 0;
  gap: 0.55rem;
}
#comp-panel-connect .panel-connect-banner { margin-top: 0.4rem; }
#comp-panel-connect .panel-connect-banner:empty { margin-top: 0; }

/* ── Panel body ──────────────────────────────────────────────────────── */

#comp-panel-body {
  flex: 1;
  overflow-y: auto;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.comp-tab-pane { display: none; flex-direction: column; gap: 1rem; }
.comp-tab-pane.active { display: flex; }

.panel-config-pre {
  margin: 0;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.75rem;
  line-height: 1.45;
  white-space: pre-wrap;
  word-break: break-word;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 0.7rem 0.8rem;
  color: var(--text);
}

.panel-backup-posture {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 0.7rem 0.9rem;
  color: var(--text);
}
.panel-backup-posture h4 {
  margin: 0 0 0.5rem 0;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-strong, var(--text));
}
.panel-backup-posture dl {
  display: grid;
  grid-template-columns: max-content 1fr;
  column-gap: 0.9rem;
  row-gap: 0.25rem;
  margin: 0;
  font-size: 0.78rem;
}
.panel-backup-posture dt { color: var(--muted, var(--dim)); }
.panel-backup-posture dd { margin: 0; color: var(--text); }
.panel-bp-ok   { color: var(--text); }
.panel-bp-warn { color: var(--warn); font-weight: 600; }
.panel-bp-bad  { color: var(--danger); font-weight: 600; }

.owner-row {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
}
.owner-value {
  font-size: 0.85rem;
  font-weight: 500;
}
.owner-edit-btn {
  font-size: 0.75rem;
  padding: 0.2rem 0.5rem;
}

/* H.6 — SLA-breach badge for findings with kind=unvalidated_sla_breach.
   Distinct color from severity badges so operators can tell SLA-breach
   fails apart from organic fails at a glance. Amber rather than red:
   the underlying posture isn't necessarily wrong, the evidence has
   gone stale. */
.sla-breach-badge {
  display: inline-block;
  margin-left: 0.4rem;
  padding: 0.1rem 0.4rem;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  background: var(--warn-bg);
  color: var(--warn);
  border: 1px solid var(--warn-bg);
  border-radius: 3px;
  vertical-align: middle;
  cursor: help;
}

/* Phase 7 PR-C — DAM-evidence badge for findings with kind=dam_evidence.
   Distinct teal accent so the operator can tell a DAM-evidence-backed
   finding apart from a posture-scanner finding at a glance. The
   underlying remediation differs (DAM findings clear by adjusting
   rule overrides / business hours or by getting real activity to
   flow through; posture findings clear by changing the database's
   configuration). */
.dam-evidence-badge {
  display: inline-block;
  margin-left: 0.4rem;
  padding: 0.1rem 0.4rem;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  background: var(--info-bg);
  color: var(--info);
  border: 1px solid var(--info-border);
  border-radius: 3px;
  vertical-align: middle;
  cursor: help;
}

/* H.5.b — per-finding remediation, expandable inside the Title cell. */
.finding-remediation { display: inline; }
.finding-remediation > summary {
  list-style: none;
  cursor: pointer;
  display: inline;
}
.finding-remediation > summary::-webkit-details-marker { display: none; }
.finding-remediation > summary::before {
  content: "▶ ";
  color: var(--muted, var(--dim));
  font-size: 0.7rem;
  margin-right: 0.25rem;
}
.finding-remediation[open] > summary::before { content: "▼ "; }

/* ADR #13 — one-fix, multi-medium remediation block. Console/CLI/CloudFormation/
   Terraform/Pulumi tabs with copy-paste code + a "Required by" framework-citation
   row. (The legacy per-chip `.rem-section` styles were removed with the per-chip
   path in §122 — the block always renders the canonical object now.) */
.finding-remediation > .rem-v2 {
  margin-top: 0.5rem;
  padding: 0.5rem 0.6rem;
  border-left: 2px solid var(--accent);
  background: var(--lift);
  border-radius: 3px;
}
.rem-v2-summary {
  margin: 0 0 0.4rem 0;
  font-size: 0.8rem;
  font-weight: 600;
  line-height: 1.4;
  color: var(--text-strong, var(--text));
}
.rem-v2-detail p { margin: 0 0 0.35rem 0; font-size: 0.76rem; line-height: 1.45; }
.rem-unfilled {
  font-size: 0.72rem;
  margin: 0 0 0.45rem 0;
  color: var(--muted, var(--dim));
}
.rem-unfilled-label { text-transform: uppercase; letter-spacing: 0.03em; margin-right: 0.35rem; }
.rem-ph {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.72rem;
  color: var(--text);
  border-bottom: 1px dashed var(--accent);
  padding: 0 0.05rem;
}
.rem-v2-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.15rem;
  border-bottom: 1px solid var(--border);
  margin-bottom: 0.45rem;
}
.rem-tab {
  appearance: none;
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--muted, var(--dim));
  font-size: 0.74rem;
  padding: 0.2rem 0.5rem;
  cursor: pointer;
  margin-bottom: -1px;
}
.rem-tab:hover { background: var(--lift-2, var(--lift)); color: var(--text); }
.rem-tab.active { color: var(--text); border-bottom-color: var(--accent); font-weight: 600; }
.rem-panel { display: none; }
.rem-panel.active { display: block; }
.rem-steps { margin: 0; padding-left: 1.1rem; font-size: 0.76rem; line-height: 1.5; }
.rem-steps li { margin-bottom: 0.2rem; }
.rem-prose p { margin: 0 0 0.35rem 0; font-size: 0.76rem; line-height: 1.45; }
.rem-code-wrap { position: relative; }
.rem-code {
  margin: 0;
  padding: 0.5rem 0.6rem;
  background: var(--inset, var(--panel));
  border: 1px solid var(--border);
  border-radius: 3px;
  overflow-x: auto;
  white-space: pre;
}
.rem-code code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.72rem;
  line-height: 1.5;
  color: var(--text);
  background: none;
  border: none;
  padding: 0;
}
.rem-copy {
  position: absolute;
  top: 0.3rem;
  right: 0.3rem;
  appearance: none;
  background: var(--panel-2);
  border: 1px solid var(--border);
  color: var(--muted, var(--dim));
  font-size: 0.68rem;
  padding: 0.1rem 0.45rem;
  border-radius: 3px;
  cursor: pointer;
}
.rem-copy:hover { color: var(--text); background: var(--panel-3, var(--panel-2)); }
.rem-copy.copied { color: var(--ok); border-color: var(--ok); }
.rem-caveats {
  margin: 0.45rem 0 0 0;
  padding-left: 1.1rem;
  font-size: 0.72rem;
  color: var(--warn);
  line-height: 1.4;
}
.rem-required-by {
  margin-top: 0.5rem;
  font-size: 0.72rem;
  color: var(--muted, var(--dim));
}
.rem-required-label {
  text-transform: uppercase;
  letter-spacing: 0.03em;
  margin-right: 0.35rem;
}
.rem-cite {
  display: inline-block;
  font-size: 0.7rem;
  color: var(--text);
  background: var(--border);
  padding: 0.05rem 0.35rem;
  border-radius: 3px;
  margin: 0.1rem 0.15rem 0.1rem 0;
}
.rem-docs { margin-top: 0.4rem; font-size: 0.72rem; }
.rem-docs a { color: var(--accent); }

/* ADR #13 R6 — "Protect this data" playbook on the Data Findings tab. */
.protect-block { margin-top: 0.6rem; }
.protect-lead { margin: 0 0 0.5rem 0; font-size: 0.78rem; }
.protect-list { list-style: none; margin: 0; padding: 0; }
.protect-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.3rem 0.1rem;
  border-bottom: 1px solid var(--border);
  font-size: 0.8rem;
}
.protect-row:last-child { border-bottom: none; }
.protect-ctrl { flex: 1; }
.protect-status {
  font-size: 0.7rem;
  padding: 0.05rem 0.4rem;
  border-radius: 3px;
  white-space: nowrap;
}
.protect-status.protect-gap { color: var(--danger); border: 1px solid var(--danger); }
.protect-status.protect-ok  { color: var(--ok);     border: 1px solid var(--ok); }
.protect-status.protect-unk { color: var(--warn);   border: 1px solid var(--warn); }
.protect-status.protect-na  { color: var(--muted, var(--dim)); border: 1px solid var(--border); }
.protect-fix {
  appearance: none;
  background: var(--panel-2);
  border: 1px solid var(--border);
  color: var(--accent);
  font-size: 0.7rem;
  padding: 0.1rem 0.45rem;
  border-radius: 3px;
  cursor: pointer;
  white-space: nowrap;
}
.protect-fix:hover { background: var(--panel-3, var(--panel-2)); }

.panel-posture-row {
  display: flex;
  gap: 0.65rem;
  align-items: stretch;
}

.panel-posture-widget {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
  padding: 0.6rem 0.5rem 0.5rem;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: var(--panel-2);
  flex: 0 0 auto;
}

.panel-posture-svg { width: 80px; height: 80px; }

.posture-pct-text { font-size: 18px; font-weight: 700; fill: var(--text); }
.posture-sub-text { font-size: 10px; fill: var(--muted); }

.posture-label {
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted);
}

.panel-sev-stack {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.sev-stat {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0 0.65rem;
  border-radius: 5px;
  border: 1px solid var(--border);
  flex: 1;
}

.sev-stat-count {
  font-size: 1.05rem;
  font-weight: 700;
  min-width: 2ch;
  text-align: right;
}

.sev-stat-name {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
}

.sev-bg-critical { border-color: var(--sev-critical-border); background: var(--sev-critical-bg); }
.sev-bg-critical .sev-stat-count { color: var(--sev-critical); }

.sev-bg-high { border-color: var(--sev-high-border); background: var(--sev-high-bg); }
.sev-bg-high .sev-stat-count { color: var(--sev-high); }

.sev-bg-medium { border-color: var(--sev-medium-border); background: var(--sev-medium-bg); }
.sev-bg-medium .sev-stat-count { color: var(--sev-medium); }

.sev-bg-low { border-color: var(--sev-low-border); background: var(--sev-low-bg); }
.sev-bg-low .sev-stat-count { color: var(--sev-low); }

/* A count of ZERO is good news and must not shout. Un-styled, an all-clear
   resource still rendered four fully-saturated severity boxes, so "no
   critical findings" looked exactly as alarming as "four critical findings"
   — the colour tracked the CATEGORY rather than whether anything was in it.
   Two classes, so this beats the single-class .sev-bg-* it overrides. */
.sev-stat.sev-stat-zero {
  border-color: var(--border);
  background: var(--panel-2);
}
.sev-stat.sev-stat-zero .sev-stat-count { color: var(--muted); }
.sev-stat.sev-stat-zero .sev-stat-name  { color: var(--dim); }

.panel-section-title {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
  margin-bottom: 0.35rem;
}

.detail-table { width: 100%; border-collapse: collapse; font-size: 0.82rem; }
.detail-table th, .detail-table td { padding: 0.4rem 0.65rem; border-bottom: 1px solid var(--border); text-align: left; vertical-align: top; }
.detail-table th { background: var(--panel-3); color: var(--muted); font-weight: 500; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.04em; }

/* ── Schema tab ──────────────────────────────────────────────────────── */

.panel-connect-meta { margin: 0; font-size: 0.78rem; }

.perm-db-wide {
  display: inline-block;
  padding: 1px 7px;
  border-radius: 10px;
  font-size: 0.7rem;
  font-weight: 600;
  background: var(--border-mid);
  color: var(--accent-hi);
  border: 1px solid var(--accent);
}

.schema-block { display: flex; flex-direction: column; gap: 0.35rem; }

.schema-table {
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--panel-2);
  padding: 0.35rem 0.6rem;
}
.schema-table > summary {
  cursor: pointer;
  font-size: 0.8rem;
  list-style: none;
  padding: 0.15rem 0;
}
.schema-table > summary::-webkit-details-marker { display: none; }
.schema-table > summary::before { content: "▸ "; color: var(--muted); }
.schema-table[open] > summary::before { content: "▾ "; }

.schema-cols {
  list-style: none;
  margin: 0.3rem 0 0.1rem;
  padding: 0 0 0 1rem;
  font-size: 0.78rem;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.15rem 0.75rem;
}
.schema-cols li { line-height: 1.5; }

/* ── Connect button (Config tab) ─────────────────────────────────────── */

.panel-connect-row {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.55rem 0.7rem;
  border: 1px solid var(--border);
  border-radius: 5px;
  background: var(--panel-2);
  font-size: 0.8rem;
}
.panel-connect-btn {
  background: var(--accent);
  color: var(--on-fill);
  border: none;
  padding: 0.35rem 0.85rem;
  border-radius: 4px;
  cursor: pointer;
  font-size: 0.78rem;
  font-weight: 600;
}
.panel-connect-btn:hover:not(:disabled) { filter: brightness(1.1); }
.panel-connect-btn:disabled { opacity: 0.55; cursor: progress; }
.panel-connect-btn.secondary {
  background: transparent;
  color: var(--fg);
  border: 1px solid var(--border);
}

.panel-connect-banner {
  margin-top: 0.5rem;
  min-height: 0;
}
.panel-connect-banner p { margin: 0; font-size: 0.78rem; }
.panel-connect-error { color: var(--danger); }

.panel-connect-error-box {
  border: 1px solid var(--danger-bg);
  background: var(--danger-bg);
  border-radius: 5px;
  padding: 0.65rem 0.8rem;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}
.panel-connect-error-title { color: var(--danger); font-weight: 600; font-size: 0.8rem; }
.panel-connect-error-msg   { color: var(--danger); font-size: 0.78rem; word-break: break-word; }
.panel-connect-error-hint  { color: var(--danger); font-size: 0.75rem; line-height: 1.45; }
.panel-connect-error-hint code {
  background: var(--danger-bg);
  color: var(--danger);
  padding: 0 4px;
  border-radius: 3px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.72rem;
}

.panel-connect-stub {
  padding: 0.6rem 0.75rem;
  margin-top: 0.5rem;
  border: 1px dashed var(--border);
  border-radius: 5px;
  background: var(--panel);
}
.panel-connect-stub p { margin: 0; font-size: 0.78rem; }

.panel-connect-inherited {
  padding: 0.6rem 0.75rem;
  border: 1px solid var(--border-mid);
  background: var(--panel-2);
  border-radius: 5px;
}
.panel-connect-inherited-title {
  margin: 0 0 0.2rem;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--accent);
}
.panel-connect-inherited-body {
  margin: 0;
  font-size: 0.78rem;
  line-height: 1.45;
  color: var(--text);
}
.panel-connect-inherited-body code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.72rem;
  background: var(--panel-3);
  color: var(--accent);
  padding: 0 4px;
  border-radius: 3px;
}

/* ── Saved connection row ────────────────────────────────────────────── */

.panel-saved-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.55rem 0.75rem;
  margin-bottom: 0.45rem;
  border: 1px solid var(--ok-bg);
  background: var(--ok-bg);
  border-radius: 5px;
}
.panel-saved-meta { min-width: 0; flex: 1; }
.panel-saved-title {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  margin: 0 0 0.15rem;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--ok);
}
.panel-saved-line {
  margin: 0;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.8rem;
  color: var(--text);
  word-break: break-all;
}
.panel-saved-sub {
  margin: 0.1rem 0 0;
  font-size: 0.72rem;
}
/* IAM-mode connection line — explains why no host/user is shown rather
   than rendering "unknown@unknown host" (which reads as an error). */
.panel-saved-iam {
  color: var(--muted);
  font-style: italic;
}

/* Inline status + timestamp. Was previously a separate floating chip
   above/below the timestamp; combined into one row with an icon so the
   eye reads "✓ Scan succeeded · 2026-05-25 03:57 UTC" as a single fact. */
.panel-saved-status-line {
  margin: 0.25rem 0 0;
  font-size: 0.74rem;
  display: flex;
  align-items: center;
  gap: 0.35rem;
}
.panel-saved-status-line.is-ok      { color: var(--ok); }
.panel-saved-status-line.is-failed  { color: var(--danger-2); }
.panel-saved-status-line.is-neutral { color: var(--muted); }
.panel-saved-status-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  border-radius: 999px;
  font-size: 0.62rem;
  font-weight: 700;
  flex-shrink: 0;
}
.panel-saved-status-line.is-ok .panel-saved-status-icon {
  background: var(--ok-bg);
  color: var(--ok);
}
.panel-saved-status-line.is-failed .panel-saved-status-icon {
  background: var(--danger-bg);
  color: var(--danger-2);
}

.panel-saved-actions {
  display: flex;
  gap: 0.4rem;
  flex-shrink: 0;
  align-items: center;
}

/* Destructive button — used for Forget. Outlined with a red border +
   trash icon so the action reads as destructive even when sitting
   alongside the neutral Rescan button. */
.panel-connect-btn.danger {
  background: transparent;
  color: var(--danger-2);
  border: 1px solid var(--danger-bg);
}
.panel-connect-btn.danger:hover:not(:disabled) {
  background: var(--danger-bg);
  color: var(--danger);
  border-color: var(--danger);
}
.panel-forget-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
}
.panel-forget-btn svg { flex-shrink: 0; }
/* Inactive Forget — used when the saved profile is a managed-secret
   or IAM-only mode (operator must revoke the underlying credential
   directly). Still styled as the destructive button so the user
   reads the label as one action, just unavailable here. */
.panel-connect-btn.danger.is-disabled,
.panel-connect-btn.danger:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  background: transparent;
}

/* ── Save-connection checkbox in manual form ────────────────────────── */

.manual-form-save {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  text-transform: none;
  letter-spacing: 0;
  font-size: 0.78rem;
  color: var(--text);
  cursor: pointer;
}
.manual-form-save .dim { font-size: 0.72rem; }
.manual-form-save input[type="checkbox"] {
  margin: 0;
  accent-color: var(--accent);
}

/* ── Compliance re-score banner + spinner ───────────────────────────── */

.panel-rescore-banner {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0 0 0.6rem;
  padding: 0.5rem 0.75rem;
  border-radius: 5px;
  font-size: 0.78rem;
  line-height: 1.4;
}
.panel-rescore-banner.refreshing {
  background: var(--panel-2);
  border: 1px solid var(--border-mid);
  color: var(--muted);
}
.panel-rescore-banner.still-processing {
  background: var(--warn-bg);
  border: 1px solid var(--warn-bg);
  color: var(--warn);
}

.spinner {
  display: inline-block;
  width: 12px;
  height: 12px;
  border: 2px solid var(--border-mid);
  border-top-color: var(--muted);
  border-radius: 50%;
  animation: dbc-spin 0.75s linear infinite;
  flex-shrink: 0;
}
@keyframes dbc-spin {
  to { transform: rotate(360deg); }
}

/* ── Manual credentials form ─────────────────────────────────────────── */

.panel-manual-form {
  margin-top: 0.5rem;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--panel);
  padding: 0.7rem 0.8rem;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}
.panel-manual-form[hidden] { display: none; }

.manual-form-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

.manual-form-close {
  background: none;
  border: 1px solid var(--border);
  color: var(--muted);
  border-radius: 4px;
  cursor: pointer;
  padding: 1px 7px;
  font-size: 0.8rem;
}
.manual-form-close:hover { color: var(--text); border-color: var(--text); }

.manual-form-intro {
  margin: 0;
  font-size: 0.75rem;
  line-height: 1.45;
}

.panel-manual-form .form-row {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.panel-manual-form label {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
}

.panel-manual-form input[type="text"],
.panel-manual-form input[type="number"],
.panel-manual-form input[type="password"],
.panel-manual-form select {
  background: var(--panel-2);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 4px;
  padding: 0.32rem 0.5rem;
  font-family: inherit;
  font-size: 0.82rem;
}
.panel-manual-form input:focus,
.panel-manual-form select:focus {
  outline: 1px solid var(--accent);
  border-color: var(--accent);
}

.panel-manual-form .form-hint {
  margin: 0;
  font-size: 0.7rem;
  color: var(--muted);
}

.manual-form-grid {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 0.5rem 0.6rem;
}

.manual-form-footer {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  margin-top: 0.1rem;
}

.manual-form-actions {
  display: flex;
  gap: 0.4rem;
  justify-content: flex-end;
}

.panel-manual-form .form-error {
  background: var(--danger-bg);
  color: var(--danger);
  border: 1px solid var(--danger-bg);
  border-radius: 4px;
  padding: 0.35rem 0.55rem;
  font-size: 0.76rem;
}

/* ── DSPM sensitivity badges ─────────────────────────────────────────── */

.dspm-pill {
  display: inline-block;
  padding: 1px 7px;
  border-radius: 10px;
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  border: 1px solid;
  vertical-align: middle;
  white-space: nowrap;
}
/* Spacing before/after when inline with flowing content. Tables add no margin. */
.panel-connect-meta .dspm-pill,
.panel-section-title .dspm-pill,
.schema-table > summary .dspm-pill {
  margin-left: 0.4rem;
}
.dspm-pill.small { font-size: 0.64rem; padding: 0 6px; }
.dspm-pill.dspm-critical { color: var(--sev-critical); background: var(--sev-critical-bg); border-color: var(--sev-critical-border); }
.dspm-pill.dspm-high     { color: var(--sev-high); background: var(--sev-high-bg); border-color: var(--sev-high-border); }
.dspm-pill.dspm-medium   { color: var(--sev-medium); background: var(--sev-medium-bg); border-color: var(--sev-medium-border); }
.dspm-pill.dspm-low      { color: var(--sev-low); background: var(--sev-low-bg); border-color: var(--sev-low-border); }
.dspm-pill.dspm-none     { color: var(--muted); background: transparent; border-color: var(--border); }

.dspm-classifier-row {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  margin-left: 0.3rem;
  vertical-align: middle;
}

.dspm-classifier-pill {
  display: inline-block;
  padding: 0 6px;
  font-size: 0.68rem;
  font-weight: 500;
  border-radius: 3px;
  border: 1px solid;
  background: var(--panel-2);
  color: var(--accent);
  line-height: 1.5;
}
.dspm-classifier-pill.conf-high {
  border-color: var(--neutral-bg);
  background: var(--panel-2);
  color: var(--neutral);
}
.dspm-classifier-pill.conf-medium {
  border-color: var(--accent);
  background: var(--panel-2);
  color: var(--accent-hi);
}
.dspm-classifier-pill.conf-low {
  border-color: var(--border);
  background: var(--panel-2);
  color: var(--muted);
}

.dspm-bump-hint {
  color: var(--warn-2);
  font-weight: 700;
  margin-left: 0.25rem;
  cursor: help;
}

/* ── Status chips (fail / unvalidated / not_applicable / pass rollup) ── */

.status-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: 0.2rem 0 0.1rem;
}

.status-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.15rem 0.55rem;
  font-size: 0.72rem;
  font-weight: 600;
  border-radius: 4px;
  border: 1px solid;
  letter-spacing: 0.02em;
}
.status-chip::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: currentColor;
}
.status-chip.status-fail           { color: var(--danger); border-color: var(--danger-bg); background: var(--danger-bg); }
.status-chip.status-sla-breach     { color: var(--warn); border-color: var(--warn-bg); background: var(--warn-bg); cursor: help; }
.status-chip.status-unvalidated    { color: var(--warn); border-color: var(--warn-bg); background: var(--warn-bg); }
.status-chip.status-manual         { color: var(--info); border-color: var(--info-bg); background: var(--info-bg); cursor: help; }
.status-chip.status-not-applicable { color: var(--muted); border-color: var(--border); background: var(--panel); }
.status-chip.status-pass           { color: var(--ok); border-color: var(--ok-bg); background: var(--ok-bg); }

/* Framework chips (per-finding mapping list, H.1.5). Shares the same
   rounded-pill chrome as `.count-pill` so the count badge in the
   Controls category header and the framework chips beneath it read
   as one chip family. */
.framework-chip {
  display: inline-flex;
  align-items: center;
  margin: 0 0.2rem 0.15rem 0;
  padding: 0.05rem 0.55rem;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--panel-2);
  color: var(--accent);
  white-space: nowrap;
  line-height: 1.4;
}

.status-block-subtitle {
  margin: 0.1rem 0 0.45rem !important;
  font-size: 0.75rem;
}

/* ── Classified Data section on the Compliance tab ───────────────────── */

.panel-section { margin-top: 0.2rem; }

.dspm-summary-block {
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--panel-2);
  padding: 0.7rem 0.85rem;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}
.dspm-summary-sentence {
  margin: 0;
  font-size: 0.85rem;
  color: var(--text);
  line-height: 1.5;
}
.panel-section-link {
  align-self: flex-start;
  background: transparent;
  border: 0;
  color: var(--accent);
  font: inherit;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  padding: 0;
}
.panel-section-link:hover { text-decoration: underline; }

/* Finding cards — replace the cramped 5-column table inside the drawer
   so nothing scrolls horizontally. Each card is self-contained and
   wraps naturally. */
.finding-card-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.finding-card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-left: 3px solid var(--border);
  border-radius: 6px;
  padding: 0.55rem 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}
.finding-card-sev-critical { border-left-color: var(--sev-critical); }
.finding-card-sev-high     { border-left-color: var(--sev-high); }
.finding-card-sev-medium   { border-left-color: var(--sev-medium); }
.finding-card-sev-low      { border-left-color: var(--sev-low); }

.finding-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.finding-card-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  align-items: center;
}
.finding-card-sev {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
}
.finding-card-title {
  margin: 0;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--text);
  line-height: 1.4;
}
.finding-card-reason {
  margin: 0;
  font-size: 0.8rem;
  line-height: 1.5;
}

/* Unified-model severity rationale (lit at the PR 1.9 flip): explains how the
   displayed severity was computed — "Severity  base 2 × regulated data
   (US_SSN) ×2 × known-exploited CVE ×2". The tag uses the gate-checked
   --muted-on---border chip pairing; the body is muted supporting detail under
   the badge. Distinct from .finding-card-reason (the control's failure evidence). */
.finding-card-sevreason {
  margin: 0;
  font-size: 0.76rem;
  line-height: 1.5;
  color: var(--muted);
}
.sevreason-tag {
  display: inline-block;
  margin-right: 0.4rem;
  padding: 0 6px;
  border-radius: 3px;
  background: var(--border);
  color: var(--muted);
  font-size: 0.66rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.finding-card-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.55rem;
  font-size: 0.75rem;
}
.finding-card-canonical { color: var(--muted); }

/* Drawer-side remediation link inside the card — was an inline
   "▶/▼ Title" element in the table; now a labelled "View remediation"
   link at the foot of the card. */
.finding-card-remediation { display: inline-block; margin-left: auto; }
.finding-card-remediation > summary {
  cursor: pointer;
  color: var(--accent);
  font-size: 0.78rem;
  font-weight: 600;
  list-style: none;
}
.finding-card-remediation > summary::marker { content: ""; }
.finding-card-remediation > summary::-webkit-details-marker { display: none; }
.finding-card-remediation > summary::before { content: ""; }
.finding-card-remediation[open] > summary { color: var(--muted); }

/* Auto-remediation (#14) — the "Fix it" one-click button on a failing
   finding card. `margin-left: auto` groups it with the remediation link at
   the right edge of the foot. Disabled state (Phase 0 + capability-gated)
   reads as clearly inert. */
.finding-fix-btn {
  margin-left: auto;
  padding: 0.2rem 0.6rem;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--on-fill);
  background: var(--accent);
  border: 1px solid transparent;
  border-radius: var(--radius-sm, 4px);
  cursor: pointer;
}
.finding-fix-btn:hover:not(:disabled) { filter: brightness(1.08); }
.finding-fix-btn:disabled {
  color: var(--muted);
  background: var(--border);
  cursor: not-allowed;
}
/* When the fix button is present it owns the auto margin; the remediation
   link then sits directly after it rather than also pushing right. */
.finding-fix-btn + .finding-card-remediation { margin-left: 0.55rem; }

/* Auto-remediation (#14) preview/apply modal. Reuses the shared
   .modal-overlay / .modal-content scrim; rem-* are the body specifics. */
.rem-modal { max-width: 640px; }
.rem-modal-head h3 { margin: 0 0 0.25rem; font-size: 1rem; }
.rem-resource { margin: 0 0 0.75rem; font-size: 0.8rem; display: flex; gap: 0.5rem; align-items: baseline; }
.rem-resource code { word-break: break-all; }
.rem-inputs { display: flex; flex-direction: column; gap: 0.5rem; margin-bottom: 0.75rem; }
.rem-input-row { display: flex; flex-direction: column; gap: 0.2rem; font-size: 0.8rem; }
.rem-input-row input { padding: 0.3rem 0.5rem; }
.rem-body h4 { margin: 0.75rem 0 0.3rem; font-size: 0.82rem; }
.rem-diff { width: 100%; border-collapse: collapse; font-size: 0.78rem; }
.rem-diff th, .rem-diff td { text-align: left; padding: 0.25rem 0.5rem; border-bottom: 1px solid var(--border); }
.rem-diff th { color: var(--muted); font-weight: 600; }
.rem-disruption { color: var(--danger, #d9534f); font-size: 0.82rem; font-weight: 600; margin: 0 0 0.5rem; }
.rem-caveats { margin: 0.2rem 0 0; padding-left: 1.1rem; font-size: 0.78rem; color: var(--muted); }
.rem-call-details > summary { cursor: pointer; color: var(--accent); font-size: 0.78rem; font-weight: 600; margin-top: 0.6rem; }
.rem-call { background: var(--panel); padding: 0.5rem; border-radius: 4px; overflow-x: auto; font-size: 0.72rem; white-space: pre; }
.panel-rescore-banner.remediation-done { color: var(--on-fill); background: var(--pass, #3a9d5d); }

/* Phase 3 — parked two-phase param-group fix awaiting an explicit reboot.
   Amber via the shared warn tokens (never Activity-scoped class reuse). */
.panel-rescore-banner.pending-reboot {
  background: var(--warn-bg);
  border: 1px solid var(--warn-bg);
  color: var(--warn);
  justify-content: space-between;
}
.panel-rescore-banner.pending-reboot .rem-reboot-btn {
  flex: none;
  white-space: nowrap;
}

/* The parked fix belongs to a cluster MEMBER, not the drawer's cluster — name
   the instance inline so "Reboot now" can't read as being about the cluster.
   Inherits the banner's warn ink; only the weight/size separate it. */
.rem-park-target {
  font-weight: 600;
  font-size: 0.78rem;
  word-break: break-all;
}

/* Same idea in the Fix-it modal: a one-line heads-up that the control fails on
   a member and the fix lands there. Muted so it reads as context, not alarm. */
.rem-member-note {
  margin: 0 0 0.75rem;
  font-size: 0.78rem;
  color: var(--muted);
}

/* A fix attempt that was refused or failed. Danger tokens, not warn: an amber
   banner here would sit next to the amber "parked, awaiting your reboot" one
   and the two mean opposite things (that one needs a click, this one is over).
   Wraps rather than flexes to one line — the reason strings are sentences. */
.panel-rescore-banner.rem-failed {
  display: block;
  background: var(--danger-bg);
  border: 1px solid var(--danger-bg);
  color: var(--danger);
}
.panel-rescore-banner.rem-failed .mono {
  word-break: break-all;
}

/* Collapsible "Not applicable" / "Passing controls" sections —
   give the +/- collapse indicator a real button affordance so it
   reads as clickable rather than as a bullet point. */
.finding-collapse {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 6px;
}
.finding-collapse > summary {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.55rem 0.85rem;
  cursor: pointer;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text);
  list-style: none;
  user-select: none;
}
.finding-collapse > summary::marker { content: ""; }
.finding-collapse > summary::-webkit-details-marker { display: none; }
.finding-collapse > summary::before {
  content: "▸";
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border: 1px solid var(--border);
  border-radius: 4px;
  font-size: 0.75rem;
  color: var(--accent);
  background: var(--accent-a10);
  transition: transform 0.12s;
}
.finding-collapse[open] > summary::before { content: "▾"; }
.finding-collapse > summary:hover::before {
  background: var(--accent-a16);
  border-color: var(--accent);
}
.finding-collapse-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.6rem;
  padding: 0.05rem 0.5rem;
  background: var(--border);
  color: var(--muted);
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.finding-collapse[open] > summary { border-bottom: 1px solid var(--border); }
.finding-collapse > .status-block-subtitle,
.finding-collapse > .finding-card-list {
  padding: 0.55rem 0.85rem 0.85rem;
}

.dspm-stat-row {
  display: flex;
  gap: 0.45rem;
}

.dspm-stat {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 0.35rem 0.55rem;
  border: 1px solid var(--border);
  border-radius: 5px;
  background: var(--panel);
}

.dspm-stat-value {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--text);
}

.dspm-stat-label {
  font-size: 0.66rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
}

.dspm-cat-block {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.dspm-cat-title {
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--accent-hi);
}

.dspm-cat-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem 0.7rem;
  font-size: 0.78rem;
}

.dspm-count {
  display: inline-block;
  min-width: 2ch;
  text-align: right;
  color: var(--text);
  font-weight: 600;
}

.dspm-count-label {
  color: var(--muted);
}

/* ── Data Findings tab ───────────────────────────────────────────────── */

.findings-synthetic-banner {
  border: 1px solid var(--warn-bg);
  background: var(--warn-bg);
  color: var(--warn);
  border-radius: 6px;
  padding: 0.55rem 0.75rem;
  margin-bottom: 0.75rem;
  font-size: 0.85rem;
  line-height: 1.4;
}
.findings-synthetic-banner strong { color: var(--warn); }

.findings-rollup {
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--panel-2);
  padding: 0.75rem 0.85rem;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.findings-rollup-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem;
}

.findings-rollup-head .panel-section-title { margin-bottom: 0; }

.findings-stat-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr));
  gap: 0.4rem;
}

.findings-stat {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 0.4rem 0.6rem;
  border: 1px solid var(--border);
  border-radius: 5px;
  background: var(--panel);
}

.findings-stat-value {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--text);
}

.findings-stat-label {
  font-size: 0.66rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
}

.findings-cat-block { margin: 0; }

.findings-skipped { font-size: 0.78rem; }
.findings-skipped summary { cursor: pointer; padding: 0.2rem 0; }
.findings-skipped-list { list-style: none; margin: 0.3rem 0 0 1rem; padding: 0; font-size: 0.75rem; }
.findings-skipped-list li { padding: 0.1rem 0; }

.findings-table-list { display: flex; flex-direction: column; gap: 0.4rem; margin-top: 0.4rem; }

.findings-table-card {
  border: 1px solid var(--border);
  border-radius: 5px;
  background: var(--panel-2);
  padding: 0.4rem 0.65rem;
}
.findings-table-card[open] {
  background: var(--panel-2);
}

.findings-table-summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.55rem;
  font-size: 0.82rem;
}
.findings-table-summary::-webkit-details-marker { display: none; }
.findings-table-summary::before { content: "▸"; color: var(--muted); margin-right: 0.1rem; }
.findings-table-card[open] > .findings-table-summary::before { content: "▾"; }

.findings-table-meta { margin-left: auto; font-size: 0.72rem; }
.findings-table-skipped {
  color: var(--warn-2);
  font-size: 0.72rem;
  font-weight: 500;
}

.findings-col-list {
  list-style: none;
  margin: 0.4rem 0 0.1rem;
  padding: 0 0 0 0.9rem;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  font-size: 0.8rem;
}
.findings-col-list li {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  align-items: center;
}

.findings-table-empty { margin: 0.4rem 0 0.2rem; font-size: 0.78rem; }

.findings-empty {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.findings-anon-note {
  margin: 0.3rem 0 0;
  font-size: 0.72rem;
  font-style: italic;
}

/* Yellow nudge appended to a Connect/DSPM in-progress banner when the
   scan has been running longer than _STALE_IN_PROGRESS_MIN. Surfaces
   the same staleness threshold the API enforces server-side (~30 min)
   so users aren't blocked by a stuck spinner. */
.panel-connect-stale-hint {
  margin: 0.4rem 0 0;
  padding: 0.4rem 0.6rem;
  border: 1px solid var(--warn-bg);
  border-left: 3px solid var(--warn);
  background: var(--warn-bg);
  border-radius: 3px;
  font-size: 0.75rem;
  line-height: 1.4;
  color: var(--warn);
}

/* ── Vulnerability Assessment (VA) tab ───────────────────────────── */
.va-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}

/* Patch-currency banner — the authoritative lead signal, so it sits at
   the very top of the pane with a strong left accent. */
.va-patch-banner {
  padding: 0.55rem 0.7rem;
  border-radius: 5px;
  border: 1px solid var(--border);
  border-left: 4px solid var(--border);
  font-size: 0.82rem;
  line-height: 1.45;
  margin-bottom: 0.7rem;
}
.va-patch-banner code { font-size: 0.78rem; }
.va-patch-banner--behind  { border-left-color: var(--danger); background: var(--danger-bg); }
.va-patch-banner--current { border-left-color: var(--ok); background: var(--ok-bg); }
.va-patch-banner--unknown { border-left-color: var(--accent-hi); background: var(--panel-2); }

.va-sev-summary {
  display: flex;
  gap: 0.4rem;
  margin-bottom: 0.4rem;
}
.va-sev-summary .sev-stat { padding: 0.3rem 0.6rem; }

.va-cve-list {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  margin-top: 0.4rem;
}

.va-cve-card {
  border: 1px solid var(--border);
  border-left: 3px solid var(--border);
  border-radius: 4px;
  background: var(--panel-2, var(--panel-2));
}
.va-cve-card.va-cve-card-sev-critical { border-left-color: var(--sev-critical); }
.va-cve-card.va-cve-card-sev-high     { border-left-color: var(--sev-high); }
.va-cve-card.va-cve-card-sev-medium   { border-left-color: var(--sev-medium); }
.va-cve-card.va-cve-card-sev-low      { border-left-color: var(--sev-low); }
/* VA.3 — a suppressed CVE has dropped out of the rollup counts server-side;
   de-emphasize it but keep it visible so auditors can see why. */
.va-cve-card--suppressed { opacity: 0.55; border-left-color: var(--border); }

.va-cve-summary {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.4rem;
  padding: 0.45rem 0.6rem;
  cursor: pointer;
  font-size: 0.82rem;
}
.va-cve-id code { font-weight: 600; }
.va-cve-title { color: var(--muted); flex: 1; min-width: 8rem; }

.cve-chip {
  display: inline-block;
  padding: 0.05rem 0.45rem;
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 600;
  background: var(--border);
}

.va-cve-body {
  padding: 0 0.6rem 0.55rem;
  font-size: 0.8rem;
  line-height: 1.45;
}
.va-cve-caveat {
  margin: 0 0 0.4rem;
  font-size: 0.76rem;
}
.va-cve-desc { margin: 0.2rem 0 0.4rem; }
.va-cve-dl {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 0.1rem 0.6rem;
  margin: 0.3rem 0;
}
.va-cve-dl dt { color: var(--muted); font-size: 0.74rem; }
.va-cve-dl dd { margin: 0; }
.va-cve-remediation { margin: 0.3rem 0; }
.va-cve-refs { margin-top: 0.3rem; font-size: 0.76rem; }
.va-cve-refs a { color: var(--accent); }

.va-scan-row {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-top: 0.8rem;
}
.va-empty { padding: 0.4rem 0; }