/* ═══════════════════════════════════════════════════════════════════════════
   report-cards.css — card separation for the analysis report
   2026-07-30 · NEW FILE. `css/styles.css` is FROZEN (CLAUDE.md Rule 2), so this
   loads AFTER it and overrides at equal specificity, which the cascade resolves
   in this file's favour.

   WHY A SEPARATE FILE AND NOT A TOKEN CHANGE:
   `--border-color` is used by ~40 rules — sidebar, topbar, form sections, search
   inputs, tables. Darkening the token would darken every one of them. The
   complaint is about the report's cards, so the fix is scoped to `.result-card`.

   THE MEASUREMENT:
     light   page #f5f5f5 · card rgba(255,255,255,.75) · border rgba(0,0,0,.10)
     dark    page #141414 · card rgba(28,28,28,.65)    · border rgba(46,46,46,.6)
   A 10%-black hairline between a near-white card and a near-white page is below
   the threshold where an edge reads as an edge. Same story in dark: #2e2e2e at
   60% alpha over #141414 is a ~7% luminance step.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Light theme — the reported case. */
:root.light .result-card {
  border-color: rgba(0, 0, 0, .22);
}

/* ⚠ THE HOVER RULE MUST BE OVERRIDDEN TOO, AND IT IS NOT SYMMETRIC.
   `styles.css:279` is `.result-card:hover{border-color:rgba(46,46,46,.8)}` — a
   DARK value written for the dark theme only. In light theme that fires as a
   near-black border on hover, so hovering currently makes the border JUMP from
   barely-visible to almost black. Without this rule, fixing the resting state
   would make that jump smaller but still wrong. */
:root.light .result-card:hover {
  border-color: rgba(0, 0, 0, .34);
}

/* Dark theme — same defect, milder. Kept in the same file so the two themes
   cannot drift apart the way the hover rule above already had. */
:root:not(.light) .result-card {
  border-color: rgba(255, 255, 255, .13);
}

:root:not(.light) .result-card:hover {
  border-color: rgba(255, 255, 255, .22);
}

/* The header's divider inherits `--border-color` and would otherwise be lighter
   than the card outline it sits inside — an inner line weaker than the outer one
   reads as a rendering artefact rather than structure. */
:root.light .result-card-header {
  border-bottom-color: rgba(0, 0, 0, .16);
}

:root:not(.light) .result-card-header {
  border-bottom-color: rgba(255, 255, 255, .09);
}

/* A collapsed header hides its divider (`styles.css:418` sets it transparent).
   That rule is more specific than nothing, but this file's selector above has
   the same specificity and comes later, so it would win and re-show the line on
   collapsed cards. Restore the frozen behaviour explicitly. */
.result-card-header.rc-collapsed {
  border-bottom-color: transparent;
}