/*
 * Domain Health dashboard
 *
 * Consumer API for the report (Task 8) and live results (Task 9):
 * - Layout: dh-summary, dh-kpi-grid, dh-fix-grid, dh-category-grid
 * - State: dh-grade, dh-health-status, dh-status-count, dh-empty-state
 * - Data: dh-score-donut (--dh-score), dh-meter (--dh-value)
 * - Detail: dh-finding, dh-evidence, dh-filters, dh-actions
 *
 * Keep every component below .domain-health-dashboard. Percentage custom
 * properties are expected to be numeric values clamped to 0–100 by consumers.
 */

.domain-health-dashboard {
    --dh-surface: var(--bs-body-bg, #ffffff);
    --dh-surface-muted: var(--bs-tertiary-bg, #f4f6f8);
    --dh-border: var(--bs-border-color, #d8dee5);
    --dh-text: var(--bs-body-color, #1f2933);
    --dh-muted: var(--bs-secondary-color, #5f6b76);
    --dh-primary: var(--bs-primary, #0d6efd);
    --dh-success: var(--bs-success, #198754);
    --dh-warning: var(--bs-warning, #b58105);
    --dh-danger: var(--bs-danger, #b02a37);
    --dh-neutral: var(--bs-secondary, #66717d);
    --dh-unknown: #77818c;
    --dh-track: var(--bs-secondary-bg, #e4e8ec);
    --dh-focus: #0d6efd;
    --dh-radius: var(--bs-border-radius, 0.375rem);
    color: var(--dh-text);
    min-width: 0;
    overflow-wrap: anywhere;
}

.domain-health-dashboard *,
.domain-health-dashboard *::before,
.domain-health-dashboard *::after {
    box-sizing: border-box;
}

.domain-health-dashboard .tool-card {
    color: var(--dh-text);
    background: var(--dh-surface);
    border-color: var(--dh-border);
}

.domain-health-dashboard .tool-card .text-muted {
    color: var(--dh-muted) !important;
}

@media (prefers-color-scheme: dark) {
    .domain-health-dashboard {
        --dh-surface: #111827;
        --dh-surface-muted: #1f2937;
        --dh-border: #475569;
        --dh-text: #f8fafc;
        --dh-muted: #cbd5e1;
        --dh-primary: #93c5fd;
        --dh-success: #6ee7b7;
        --dh-warning: #fcd34d;
        --dh-danger: #fda4af;
        --dh-neutral: #cbd5e1;
        --dh-unknown: #cbd5e1;
        --dh-track: #475569;
        --dh-focus: #93c5fd;
        color-scheme: dark;
    }
}

.domain-health-dashboard a,
.domain-health-dashboard button,
.domain-health-dashboard input,
.domain-health-dashboard select,
.domain-health-dashboard summary {
    overflow-wrap: anywhere;
}

.domain-health-dashboard :is(a, button, input, select, textarea, summary):focus-visible {
    outline: 3px solid var(--dh-focus);
    outline-offset: 2px;
}

/* Summary, grade, health status, and score/coverage KPIs */
.domain-health-dashboard .dh-summary {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1rem;
    padding: clamp(1rem, 2.5vw, 1.5rem);
    margin-block-end: 1rem;
    background: var(--dh-surface);
    border: 1px solid var(--dh-border);
    border-radius: var(--dh-radius);
}

.domain-health-dashboard .dh-summary__main,
.domain-health-dashboard .dh-summary__score,
.domain-health-dashboard .dh-summary__meta {
    min-width: 0;
}

.domain-health-dashboard .dh-summary__eyebrow,
.domain-health-dashboard .dh-kpi__label,
.domain-health-dashboard .dh-category__label,
.domain-health-dashboard .dh-status-count__label {
    margin: 0 0 0.25rem;
    color: var(--dh-muted);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    line-height: 1.35;
    text-transform: uppercase;
}

.domain-health-dashboard .dh-summary__title {
    margin: 0;
    font-size: clamp(1.25rem, 3vw, 1.75rem);
    line-height: 1.25;
}

.domain-health-dashboard .dh-summary__description {
    max-width: 68ch;
    margin: 0.5rem 0 0;
    color: var(--dh-muted);
}

.domain-health-dashboard .dh-grade,
.domain-health-dashboard .dh-health-status,
.domain-health-dashboard .dh-tone {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    max-width: 100%;
    border: 1px solid currentColor;
    border-radius: var(--dh-radius);
    font-weight: 700;
    line-height: 1.25;
}

.domain-health-dashboard .dh-grade {
    min-width: 2.5rem;
    min-height: 2.5rem;
    justify-content: center;
    padding: 0.35rem 0.65rem;
    font-size: 1.25rem;
}

.domain-health-dashboard .dh-health-status,
.domain-health-dashboard .dh-tone {
    min-height: 2rem;
    padding: 0.3rem 0.55rem;
    font-size: 0.8125rem;
}

.domain-health-dashboard :is(.dh-grade, .dh-health-status, .dh-tone).is-success,
.domain-health-dashboard :is(.dh-grade, .dh-health-status, .dh-tone)[data-tone="success"] {
    color: var(--dh-success);
    background: var(--dh-surface);
    background: color-mix(in srgb, var(--dh-success) 8%, var(--dh-surface));
}

.domain-health-dashboard :is(.dh-grade, .dh-health-status, .dh-tone).is-warning,
.domain-health-dashboard :is(.dh-grade, .dh-health-status, .dh-tone)[data-tone="warning"] {
    color: var(--dh-warning);
    background: var(--dh-surface);
    background: color-mix(in srgb, var(--dh-warning) 8%, var(--dh-surface));
}

.domain-health-dashboard :is(.dh-grade, .dh-health-status, .dh-tone).is-danger,
.domain-health-dashboard :is(.dh-grade, .dh-health-status, .dh-tone)[data-tone="danger"] {
    color: var(--dh-danger);
    background: var(--dh-surface);
    background: color-mix(in srgb, var(--dh-danger) 8%, var(--dh-surface));
}

.domain-health-dashboard :is(.dh-grade, .dh-health-status, .dh-tone).is-neutral,
.domain-health-dashboard :is(.dh-grade, .dh-health-status, .dh-tone)[data-tone="neutral"],
.domain-health-dashboard :is(.dh-grade, .dh-health-status, .dh-tone).is-unknown,
.domain-health-dashboard :is(.dh-grade, .dh-health-status, .dh-tone)[data-tone="unknown"] {
    color: var(--dh-neutral);
    background: var(--dh-surface-muted);
}

.domain-health-dashboard .dh-score-donut {
    --dh-score: 0;
    --dh-donut-tone: var(--dh-primary);
    position: relative;
    display: grid;
    width: clamp(8.5rem, 25vw, 10rem);
    aspect-ratio: 1;
    place-items: center;
    margin-inline: auto;
    border-radius: 50%;
    background: conic-gradient(
        var(--dh-donut-tone) calc(var(--dh-score) * 1%),
        var(--dh-track) 0
    );
}

.domain-health-dashboard .dh-score-donut::before {
    position: absolute;
    width: 72%;
    aspect-ratio: 1;
    border: 1px solid var(--dh-border);
    border-radius: 50%;
    background: var(--dh-surface);
    content: "";
}

.domain-health-dashboard .dh-score-donut__content {
    position: relative;
    z-index: 1;
    display: grid;
    max-width: 68%;
    place-items: center;
    text-align: center;
}

.domain-health-dashboard .dh-score-donut__value {
    font-size: clamp(1.5rem, 5vw, 2.25rem);
    font-weight: 750;
    line-height: 1;
}

.domain-health-dashboard .dh-score-donut__label,
.domain-health-dashboard .dh-score-donut__unknown {
    margin-top: 0.3rem;
    color: var(--dh-muted);
    font-size: 0.75rem;
    line-height: 1.25;
}

.domain-health-dashboard .dh-score-donut__unknown {
    display: none;
    color: var(--dh-text);
    font-weight: 700;
}

.domain-health-dashboard .dh-score-donut.is-success,
.domain-health-dashboard .dh-score-donut[data-tone="success"] {
    --dh-donut-tone: var(--dh-success);
}

.domain-health-dashboard .dh-score-donut.is-warning,
.domain-health-dashboard .dh-score-donut[data-tone="warning"] {
    --dh-donut-tone: var(--dh-warning);
}

.domain-health-dashboard .dh-score-donut.is-danger,
.domain-health-dashboard .dh-score-donut[data-tone="danger"] {
    --dh-donut-tone: var(--dh-danger);
}

.domain-health-dashboard .dh-score-donut.is-neutral,
.domain-health-dashboard .dh-score-donut[data-tone="neutral"] {
    --dh-donut-tone: var(--dh-neutral);
}

.domain-health-dashboard .dh-score-donut.is-unknown,
.domain-health-dashboard .dh-score-donut[data-tone="unknown"] {
    background: var(--dh-track);
}

.domain-health-dashboard .dh-score-donut.is-unknown .dh-score-donut__value,
.domain-health-dashboard .dh-score-donut[data-tone="unknown"] .dh-score-donut__value,
.domain-health-dashboard .dh-score-donut.is-unknown .dh-score-donut__label,
.domain-health-dashboard .dh-score-donut[data-tone="unknown"] .dh-score-donut__label {
    display: none;
}

.domain-health-dashboard .dh-score-donut.is-unknown .dh-score-donut__unknown,
.domain-health-dashboard .dh-score-donut[data-tone="unknown"] .dh-score-donut__unknown {
    display: block;
}

.domain-health-dashboard .dh-kpi-grid,
.domain-health-dashboard .dh-status-counts {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
}

.domain-health-dashboard .dh-kpi,
.domain-health-dashboard .dh-status-count {
    min-width: 0;
    padding: 0.9rem;
    background: var(--dh-surface);
    border: 1px solid var(--dh-border);
    border-radius: var(--dh-radius);
}

.domain-health-dashboard .dh-kpi__value,
.domain-health-dashboard .dh-status-count__value {
    display: block;
    font-size: clamp(1.25rem, 4vw, 1.75rem);
    font-weight: 750;
    line-height: 1.15;
}

.domain-health-dashboard .dh-kpi__context,
.domain-health-dashboard .dh-status-count__context {
    margin-top: 0.3rem;
    color: var(--dh-muted);
    font-size: 0.8125rem;
}

/* Priority remediation: consumers render no more than three cards. */
.domain-health-dashboard .dh-fix-section,
.domain-health-dashboard .dh-category-section,
.domain-health-dashboard .dh-findings-section {
    margin-block: 1.25rem;
}

.domain-health-dashboard .dh-section-heading {
    margin: 0 0 0.75rem;
    font-size: 1.125rem;
}

.domain-health-dashboard .dh-fix-grid,
.domain-health-dashboard .dh-category-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0.75rem;
}

.domain-health-dashboard .dh-fix-card {
    min-width: 0;
    padding: 1rem;
    background: var(--dh-surface);
    border: 1px solid var(--dh-border);
    border-inline-start: 0.25rem solid var(--dh-neutral);
    border-radius: var(--dh-radius);
}

.domain-health-dashboard .dh-fix-card.is-success,
.domain-health-dashboard .dh-fix-card[data-tone="success"] {
    border-inline-start-color: var(--dh-success);
}

.domain-health-dashboard .dh-fix-card.is-warning,
.domain-health-dashboard .dh-fix-card[data-tone="warning"] {
    border-inline-start-color: var(--dh-warning);
}

.domain-health-dashboard .dh-fix-card.is-danger,
.domain-health-dashboard .dh-fix-card[data-tone="danger"] {
    border-inline-start-color: var(--dh-danger);
}

.domain-health-dashboard .dh-fix-card.is-unknown,
.domain-health-dashboard .dh-fix-card[data-tone="unknown"] {
    border-inline-start-color: var(--dh-unknown);
}

.domain-health-dashboard .dh-fix-card__title,
.domain-health-dashboard .dh-category__title,
.domain-health-dashboard .dh-finding__title {
    margin: 0;
    font-size: 1rem;
    line-height: 1.35;
}

.domain-health-dashboard .dh-fix-card__body {
    margin: 0.5rem 0 0;
    color: var(--dh-muted);
}

.domain-health-dashboard .dh-fix-card__action {
    margin-top: 0.75rem;
}

/* Category health and coverage are separate blocks; labels remain required. */
.domain-health-dashboard .dh-category-card {
    min-width: 0;
    padding: 1rem;
    background: var(--dh-surface);
    border: 1px solid var(--dh-border);
    border-radius: var(--dh-radius);
}

.domain-health-dashboard .dh-category__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.domain-health-dashboard .dh-category__health,
.domain-health-dashboard .dh-category__coverage {
    min-width: 0;
}

.domain-health-dashboard .dh-category__coverage {
    padding-top: 0.9rem;
    margin-top: 0.9rem;
    border-top: 1px solid var(--dh-border);
}

.domain-health-dashboard .dh-category__value {
    font-size: 1.25rem;
    font-weight: 750;
}

.domain-health-dashboard .dh-category__note {
    margin: 0.35rem 0 0;
    color: var(--dh-muted);
    font-size: 0.8125rem;
}

.domain-health-dashboard .dh-meter {
    --dh-value: 0;
    --dh-meter-tone: var(--dh-primary);
    height: 0.5rem;
    margin-top: 0.5rem;
    overflow: hidden;
    background: var(--dh-track);
    border-radius: 0.125rem;
}

.domain-health-dashboard .dh-meter__fill {
    width: calc(var(--dh-value) * 1%);
    height: 100%;
    background: var(--dh-meter-tone);
}

.domain-health-dashboard .dh-meter.is-success,
.domain-health-dashboard .dh-meter[data-tone="success"] {
    --dh-meter-tone: var(--dh-success);
}

.domain-health-dashboard .dh-meter.is-warning,
.domain-health-dashboard .dh-meter[data-tone="warning"] {
    --dh-meter-tone: var(--dh-warning);
}

.domain-health-dashboard .dh-meter.is-danger,
.domain-health-dashboard .dh-meter[data-tone="danger"] {
    --dh-meter-tone: var(--dh-danger);
}

.domain-health-dashboard .dh-meter.is-neutral,
.domain-health-dashboard .dh-meter[data-tone="neutral"],
.domain-health-dashboard .dh-meter.is-unknown,
.domain-health-dashboard .dh-meter[data-tone="unknown"] {
    --dh-meter-tone: var(--dh-neutral);
}

/* Status counts, filters, and report actions */
.domain-health-dashboard .dh-status-count {
    border-block-start: 0.2rem solid var(--dh-neutral);
}

.domain-health-dashboard .dh-status-count.is-success,
.domain-health-dashboard .dh-status-count[data-tone="success"] {
    border-block-start-color: var(--dh-success);
}

.domain-health-dashboard .dh-status-count.is-warning,
.domain-health-dashboard .dh-status-count[data-tone="warning"] {
    border-block-start-color: var(--dh-warning);
}

.domain-health-dashboard .dh-status-count.is-danger,
.domain-health-dashboard .dh-status-count[data-tone="danger"] {
    border-block-start-color: var(--dh-danger);
}

.domain-health-dashboard .dh-filters,
.domain-health-dashboard .dh-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: end;
    gap: 0.75rem;
    min-width: 0;
    margin-block: 1rem;
}

.domain-health-dashboard .dh-filter {
    flex: 1 1 10rem;
    min-width: 0;
}

.domain-health-dashboard .dh-filter label {
    display: block;
    margin-bottom: 0.3rem;
    font-size: 0.8125rem;
    font-weight: 700;
}

.domain-health-dashboard .dh-filter :is(select, input),
.domain-health-dashboard .dh-actions :is(a, button),
.domain-health-dashboard .dh-finding :is(a, button) {
    min-height: 2.75rem;
}

.domain-health-dashboard .dh-filter :is(select, input) {
    width: 100%;
}

.domain-health-dashboard .dh-actions > * {
    flex: 0 1 auto;
}

/* Findings and bounded technical evidence */
.domain-health-dashboard .dh-finding {
    min-width: 0;
    margin-bottom: 0.75rem;
    background: var(--dh-surface);
    border: 1px solid var(--dh-border);
    border-radius: var(--dh-radius);
}

.domain-health-dashboard .dh-finding__header,
.domain-health-dashboard .dh-finding__body {
    min-width: 0;
    padding: 1rem;
}

.domain-health-dashboard .dh-finding__header {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
    border-bottom: 1px solid var(--dh-border);
}

.domain-health-dashboard .dh-finding__summary,
.domain-health-dashboard .dh-finding__impact,
.domain-health-dashboard .dh-finding__recommendation {
    max-width: 78ch;
}

.domain-health-dashboard .dh-finding__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    color: var(--dh-muted);
    font-size: 0.8125rem;
}

.domain-health-dashboard details.dh-evidence {
    margin-top: 0.75rem;
    color: var(--dh-text);
    background: var(--dh-surface);
    border: 1px solid var(--dh-border);
    border-radius: var(--dh-radius);
}

.domain-health-dashboard .dh-evidence > summary {
    min-height: 2.75rem;
    padding: 0.75rem 2.25rem 0.75rem 0.85rem;
    cursor: pointer;
    font-weight: 700;
}

.domain-health-dashboard .dh-evidence[open] > summary {
    border-bottom: 1px solid var(--dh-border);
}

.domain-health-dashboard .dh-evidence__body {
    min-width: 0;
    padding: 0.85rem;
}

.domain-health-dashboard .dh-evidence :is(pre, code),
.domain-health-dashboard .dh-command {
    font-family: var(--bs-font-monospace, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace);
}

.domain-health-dashboard .dh-evidence pre,
.domain-health-dashboard pre.dh-command {
    max-width: 100%;
    padding: 0.85rem;
    overflow: auto;
    color: var(--dh-text);
    background: var(--dh-surface-muted);
    border: 1px solid var(--dh-border);
    border-radius: calc(var(--dh-radius) * 0.75);
    font-size: 0.8125rem;
    line-height: 1.55;
    tab-size: 4;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.domain-health-dashboard .dh-evidence a {
    word-break: break-word;
}

/* Empty, insufficient, unavailable, and still-running states */
.domain-health-dashboard .dh-empty-state,
.domain-health-dashboard .dh-insufficient-state {
    padding: clamp(1.25rem, 4vw, 2rem);
    text-align: center;
    background: var(--dh-surface-muted);
    border: 1px solid var(--dh-border);
    border-radius: var(--dh-radius);
}

.domain-health-dashboard .dh-empty-state__title,
.domain-health-dashboard .dh-insufficient-state__title {
    margin: 0;
    font-size: 1.125rem;
}

.domain-health-dashboard .dh-empty-state__body,
.domain-health-dashboard .dh-insufficient-state__body {
    max-width: 60ch;
    margin: 0.5rem auto 0;
    color: var(--dh-muted);
}

.domain-health-dashboard .dh-empty-state__action,
.domain-health-dashboard .dh-insufficient-state__action {
    margin-top: 1rem;
}

@media (min-width: 576px) {
    .domain-health-dashboard .dh-summary {
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: center;
    }

    .domain-health-dashboard .dh-kpi-grid,
    .domain-health-dashboard .dh-status-counts {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .domain-health-dashboard .dh-category-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 992px) {
    .domain-health-dashboard .dh-fix-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .domain-health-dashboard .dh-category-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 360px) {
    .domain-health-dashboard .dh-kpi-grid,
    .domain-health-dashboard .dh-status-counts {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 575.98px) {
    .domain-health-dashboard .dh-actions > *,
    .domain-health-dashboard .dh-actions .btn,
    .domain-health-dashboard .dh-filter {
        width: 100%;
    }

    .domain-health-dashboard .dh-finding__header {
        display: block;
    }

    .domain-health-dashboard .dh-finding__meta {
        margin-top: 0.75rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .domain-health-dashboard *,
    .domain-health-dashboard *::before,
    .domain-health-dashboard *::after {
        animation-duration: 0.01ms;
        animation-iteration-count: 1;
        scroll-behavior: auto;
        transition-duration: 0.01ms;
    }
}

@media (forced-colors: active) {
    .domain-health-dashboard {
        --dh-focus: Highlight;
    }

    .domain-health-dashboard .dh-score-donut,
    .domain-health-dashboard .dh-meter {
        border: 1px solid CanvasText;
        background: Canvas;
    }

    .domain-health-dashboard .dh-score-donut::before {
        background: Canvas;
    }

    .domain-health-dashboard .dh-meter__fill {
        background: Highlight;
    }

    .domain-health-dashboard :is(.dh-grade, .dh-health-status, .dh-tone),
    .domain-health-dashboard .dh-fix-card,
    .domain-health-dashboard .dh-status-count {
        border-color: CanvasText;
    }
}

@media print {
    .domain-health-dashboard {
        --dh-surface: #ffffff;
        --dh-surface-muted: #ffffff;
        --dh-border: #666666;
        --dh-text: #000000;
        --dh-muted: #333333;
        color: #000000;
    }

    .domain-health-dashboard .dh-actions,
    .domain-health-dashboard .dh-filters,
    .domain-health-dashboard .dh-empty-state__action,
    .domain-health-dashboard .dh-insufficient-state__action {
        display: none;
    }

    .domain-health-dashboard .dh-summary,
    .domain-health-dashboard .dh-kpi,
    .domain-health-dashboard .dh-fix-card,
    .domain-health-dashboard .dh-category-card,
    .domain-health-dashboard .dh-status-count,
    .domain-health-dashboard .dh-finding {
        break-inside: avoid;
        box-shadow: none;
    }

    .domain-health-dashboard details.dh-evidence:not([open]) > *:not(summary) {
        display: block;
    }

    .domain-health-dashboard a[href]::after {
        content: " (" attr(href) ")";
        font-size: 0.8em;
        font-weight: 400;
    }
}