/* =========================================================================
   Domain Health Report — all colours/spacing via design tokens so dark mode
   is automatic. Phantom tokens (--card-bg / --color-surface) are NOT used.
   ========================================================================= */

.dhr-lead { max-width: 60ch; }

/* ---- Hero: overall grade badge + score ---------------------------------- */
.dhr-hero {
    display: flex;
    align-items: center;
    gap: var(--space-lg, 1.5rem);
    padding: var(--space-lg, 1.5rem);
    border-radius: var(--radius-lg, 12px);
    border: 1px solid var(--surface-border, #e9ecef);
    background: var(--surface-card, #fff);
    box-shadow: var(--shadow-md, 0 4px 6px -1px rgba(0, 0, 0, .1));
    margin: var(--space-lg, 1.5rem) 0;
}
.dhr-hero__badge {
    flex: 0 0 auto;
    width: 104px; height: 104px;
    display: flex; align-items: center; justify-content: center;
    border-radius: var(--radius-full, 9999px);
    font-size: 2.6rem; font-weight: 800; line-height: 1;
    color: var(--color-text-inverse, #fff);
}
.dhr-hero__body { min-width: 0; }
.dhr-hero__title { margin: 0 0 var(--space-xs, .25rem); font-size: 1.35rem; }
.dhr-hero__domain { color: var(--color-primary, #f15a23); word-break: break-all; }
.dhr-hero__score { margin: 0 0 var(--space-xs, .25rem); font-size: 1.05rem; }
.dhr-hero__summary { margin: 0 0 var(--space-xs, .25rem); color: var(--color-text-secondary, #6c757d); }
.dhr-hero__meta { margin: 0; font-size: .82rem; color: var(--color-text-muted, #767676); }

/* Grade colour bands (shared by hero + category sub-grades). */
.dhr-grade--aplus, .dhr-grade--a { background: var(--color-success, #5cb85c); }
.dhr-grade--b { background: var(--color-primary, #f15a23); }
.dhr-grade--c, .dhr-grade--d { background: var(--color-warning, #f0ad4e); }
.dhr-grade--f { background: var(--color-danger, #d9534f); }
.dhr-grade--na { background: var(--color-text-secondary, #6c757d); }

/* ---- Prioritised "What to fix" ------------------------------------------ */
.dhr-fixlist {
    margin: var(--space-lg, 1.5rem) 0;
    padding: var(--space-lg, 1.5rem);
    border-radius: var(--radius-lg, 12px);
    border: 1px solid var(--surface-border, #e9ecef);
    background: var(--surface-subtle, #f8f9fa);
}
.dhr-fixlist h2 { margin: 0 0 var(--space-md, 1rem); font-size: 1.25rem; }
.dhr-fixlist__items { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-sm, .5rem); }
.dhr-fix {
    display: flex; align-items: flex-start; gap: var(--space-sm, .5rem);
    padding: var(--space-sm, .5rem) var(--space-md, 1rem);
    background: var(--surface-card, #fff);
    border: 1px solid var(--surface-border, #e9ecef);
    border-left-width: 4px;
    border-radius: var(--radius, 8px);
}
.dhr-fix--critical { border-left-color: var(--color-danger, #d9534f); }
.dhr-fix--high     { border-left-color: var(--color-warning-dark, #ec971f); }
.dhr-fix--medium   { border-left-color: var(--color-warning, #f0ad4e); }
.dhr-fix--low      { border-left-color: var(--color-text-secondary, #6c757d); }
.dhr-fix__sev {
    flex: 0 0 auto; font-size: .68rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: .04em; padding: .15rem .5rem; border-radius: var(--radius-full, 9999px);
    color: var(--color-text-inverse, #fff); margin-top: .1rem;
}
.dhr-fix--critical .dhr-fix__sev { background: var(--color-danger, #d9534f); }
.dhr-fix--high .dhr-fix__sev     { background: var(--color-warning-dark, #ec971f); }
.dhr-fix--medium .dhr-fix__sev   { background: var(--color-warning, #f0ad4e); color: var(--text-default, #212529); }
.dhr-fix--low .dhr-fix__sev      { background: var(--color-text-secondary, #6c757d); }
.dhr-fix__text { flex: 1 1 auto; }
.dhr-fix__cat { font-weight: 600; }
.dhr-fixlist__clean { margin: 0; color: var(--color-success, #5cb85c); font-weight: 600; }

/* ---- Category sub-grade cards ------------------------------------------- */
.dhr-cats {
    display: grid;
    gap: var(--space-md, 1rem);
    margin: var(--space-lg, 1.5rem) 0;
}
@media (min-width: 600px) { .dhr-cats { grid-template-columns: 1fr 1fr; } }
@media (min-width: 992px) { .dhr-cats { grid-template-columns: 1fr 1fr 1fr; } }

.dhr-card {
    border: 1px solid var(--surface-border, #e9ecef);
    border-radius: var(--radius-lg, 12px);
    background: var(--surface-card, #fff);
    overflow: hidden;
}
.dhr-card[open] { box-shadow: var(--shadow-md, 0 4px 6px -1px rgba(0, 0, 0, .1)); }

.dhr-card__head {
    display: flex; align-items: center; gap: var(--space-sm, .5rem);
    padding: var(--space-md, 1rem);
    cursor: pointer; list-style: none;
}
.dhr-card__head::-webkit-details-marker { display: none; }
.dhr-card__icon {
    flex: 0 0 auto; width: 2.25rem; height: 2.25rem;
    display: flex; align-items: center; justify-content: center;
    border-radius: var(--radius, 8px);
    background: var(--surface-subtle, #f1f3f5);
    color: var(--color-primary, #f15a23);
    font-size: 1.05rem;
}
.dhr-card__titles { flex: 1 1 auto; min-width: 0; }
.dhr-card__label { margin: 0; font-size: 1.05rem; }
.dhr-card__summary { margin: 0; font-size: .82rem; color: var(--color-text-secondary, #6c757d); }
.dhr-card__grade {
    flex: 0 0 auto;
    min-width: 2.4rem; height: 2.4rem; padding: 0 .5rem;
    display: flex; align-items: center; justify-content: center;
    border-radius: var(--radius, 8px);
    font-weight: 800; font-size: 1.05rem;
    color: var(--color-text-inverse, #fff);
}
.dhr-card__chevron { flex: 0 0 auto; color: var(--color-text-muted, #767676); transition: transform .25s ease; }
.dhr-card[open] .dhr-card__chevron { transform: rotate(180deg); }

/* Left status accent on the whole card. */
.dhr-card { border-left-width: 4px; }
.dhr-card--pass { border-left-color: var(--color-success, #5cb85c); }
.dhr-card--warn { border-left-color: var(--color-warning, #f0ad4e); }
.dhr-card--fail { border-left-color: var(--color-danger, #d9534f); }
.dhr-card--info { border-left-color: var(--color-text-secondary, #6c757d); }

.dhr-card__body { padding: 0 var(--space-md, 1rem) var(--space-md, 1rem); }

.dhr-findings { list-style: none; margin: 0 0 var(--space-md, 1rem); padding: 0; }
.dhr-finding {
    display: flex; align-items: flex-start; gap: var(--space-sm, .5rem);
    padding: var(--space-xs, .35rem) 0;
    border-top: 1px solid var(--surface-border, #e9ecef);
    font-size: .92rem;
}
.dhr-finding:first-child { border-top: 0; }
.dhr-finding__icon { flex: 0 0 auto; margin-top: .15rem; }
.dhr-finding--pass .dhr-finding__icon { color: var(--color-success, #5cb85c); }
.dhr-finding--warn .dhr-finding__icon { color: var(--color-warning-dark, #ec971f); }
.dhr-finding--fail .dhr-finding__icon { color: var(--color-danger, #d9534f); }
.dhr-finding--info .dhr-finding__icon { color: var(--color-text-secondary, #6c757d); }
.dhr-finding__text { flex: 1 1 auto; min-width: 0; word-break: break-word; }
.dhr-finding__label { font-weight: 600; }

.dhr-card__link {
    display: inline-flex; align-items: center; gap: .4rem;
    font-size: .88rem; font-weight: 600;
    color: var(--color-primary, #f15a23); text-decoration: none;
}
.dhr-card__link:hover { text-decoration: underline; }

.dhr-card--cnc .dhr-card__icon { background: var(--surface-subtle, #f1f3f5); color: var(--color-text-muted, #767676); }

/* Explainer styling removed — this page migrated to the shared .educational-content
   + .edu-cards/.edu-card structure (custom/css/content-layout.css). */

/* ---- FAQ (no-JS <details> accordion, token-driven) ---------------------- */
.dhr-faq { margin-top: var(--space-2xl, 3rem); }
.dhr-faq h2 { margin-bottom: var(--space-md, 1rem); }
.dhr-faq__list { display: flex; flex-direction: column; gap: var(--space-sm, .5rem); }
.dhr-faq__item {
    border: 1px solid var(--surface-border, #e9ecef);
    border-radius: var(--radius-lg, 12px);
    background: var(--surface-card, #fff);
}
.dhr-faq__q {
    cursor: pointer; list-style: none;
    padding: var(--space-md, 1rem) var(--space-lg, 1.25rem);
    font-weight: 600; font-size: 1.05rem;
    display: flex; justify-content: space-between; align-items: center; gap: 1rem;
    color: var(--text-default, #212529);
}
.dhr-faq__q::-webkit-details-marker { display: none; }
.dhr-faq__q::after {
    content: "\f078"; font-family: "Font Awesome 6 Free"; font-weight: 900;
    font-size: .8rem; color: var(--color-text-muted, #6c757d); transition: transform .25s ease;
}
.dhr-faq__item[open] .dhr-faq__q::after { transform: rotate(180deg); }
.dhr-faq__a { padding: 0 var(--space-lg, 1.25rem) var(--space-md, 1.15rem); }
.dhr-faq__a p { margin: 0; line-height: 1.65; color: var(--color-text-secondary, #495057); }