/* ATLAS · components/finding-card.css
 * Provenance: AuditHunt v3 · Phase 1.4 · amended Phase 10 2026-04-29
 * Spec: §XX.4 — steel ground, severity left-bar, header/body/replay
 * Phase 10: severity pill contrast fixed; hover state added.
 */

.finding {
  background: var(--steel); border: 1px solid var(--line);
  border-left: 4px solid var(--sev-color, var(--sev-high));
  padding: 20px 24px 24px;
  font-family: var(--f-body); color: var(--bone);
  transition: border-left-width 180ms var(--ease-out-cubic),
              background 180ms var(--ease-out-cubic);
}
.finding:hover {
  border-left-width: 6px;
  background: color-mix(in oklab, var(--steel) 92%, var(--bone) 8%);
}
.finding[data-sev="crit"]  { --sev-color: var(--sev-crit); }
.finding[data-sev="high"]  { --sev-color: var(--sev-high); }
.finding[data-sev="med"]   { --sev-color: var(--sev-med); }
.finding[data-sev="low"]   { --sev-color: var(--sev-low); }
.finding[data-sev="info"]  { --sev-color: var(--sev-info); }

.finding-head {
  display: flex; justify-content: space-between; align-items: center;
  font-family: var(--f-mono); font-size: 10px; letter-spacing: 1.8px;
  color: var(--mute); text-transform: uppercase; margin-bottom: 12px;
}

/* Severity pill — bone text for contrast on dark sev backgrounds */
.finding-sev {
  padding: 3px 10px; border-radius: 999px;
  background: color-mix(in oklab, var(--sev-color) 28%, transparent);
  color: var(--ash);
  border: 1px solid color-mix(in oklab, var(--sev-color) 44%, transparent);
}
/* Critical gets bone (most readable) due to darkest background */
.finding[data-sev="crit"] .finding-sev {
  color: var(--bone);
  background: color-mix(in oklab, var(--sev-crit) 36%, transparent);
}

.finding-title {
  font-family: var(--f-display); font-weight: 400; font-size: 24px;
  letter-spacing: -0.4px; line-height: 1.2; margin: 0 0 6px;
}
.finding-loc {
  font-family: var(--f-mono); font-size: 12px; color: var(--ash);
  margin-bottom: 14px;
}
.finding-loc::after { content: " ↗"; color: var(--mute); }
.finding-body {
  font-size: 14px; line-height: 1.55; color: var(--ash);
  max-width: 60ch;
}
.finding-replay {
  margin-top: 16px;
  font-family: var(--f-mono); font-size: 11px; letter-spacing: 1.4px;
  color: var(--gold); cursor: pointer; text-transform: uppercase;
}
.finding-replay::after { content: " ↓"; }