/*
 * detail-card — the card chrome for a detail/case-file page's content blocks.
 *
 * ⛔ THIS LIVED IN `risk-detail.css`, AND EVERY OTHER PAGE THAT USED THE CLASS GOT NOTHING.
 *
 * `audit-plan-detail.js` wraps eight Overview blocks — Milestones, Findings Summary,
 * Methodology, Conclusion, both capstone cards and Remediations — in `.detail-card`, with no
 * inline styling. That route loads `dashboard-base.css`, `audit-hub.css` and
 * `activity-timeline.css`; `risk-detail.css` is on none of them, and `SpaCssLoader.unload`
 * removes the previous route's sheets, so it cannot leak in from a page the user visited
 * first. The class was therefore undefined and all eight blocks rendered with no background,
 * no padding and no shadow — the markup said "card" and the pixels said nothing.
 *
 * A class shared by more than one page cannot live in one page's stylesheet. Moved here, into
 * a sheet linked from the app shell, so it is defined wherever the markup is. It is loaded
 * BEFORE any route sheet, so a page that wants to override a card property still can.
 *
 * The rules are unchanged from the risk-detail original and are entirely token-based, so
 * risk-detail renders identically and both themes follow the tokens.
 */

.detail-card {
    background: var(--card-bg);
    border-radius: 12px;
    padding: 1.5rem;
    box-shadow: var(--shadow-sm);
}

.detail-card h3 {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 1rem 0;
}

.detail-card .card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}

.detail-card .card-header h3 {
    margin: 0;
}