/* ─── Health view (dashboard) ───────────────────────────────────────────────
   Sibling of dashboard-inbox.css: same container width, same card grammar,
   same keyboard-selection treatment. Read that file alongside this one — where
   the two differ, the difference is deliberate and commented.
   ------------------------------------------------------------------------- */

#dashboard-layout.health-layout {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    max-width: min(100%, 52rem);
    margin: 0 auto;
    width: 100%;
}

/* ─── Header ────────────────────────────────────────────────────────────── */

.health-view-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.25rem 0.35rem 0.5rem;
    border-bottom: 1px solid var(--border-primary);
}

.health-view-title {
    margin: 0;
    font-size: 1.15rem;
    font-weight: var(--font-weight-semibold);
    color: var(--text-primary);
}

.health-view-subtitle {
    margin: 0.25rem 0 0;
    font-size: var(--font-size-controls);
    color: var(--text-secondary);
}

.health-view-header-meta {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    flex-shrink: 0;
}

/* Overall score badge. Tinted by band rather than accent-primary: a green
   "healthy" reading must not depend on the user's accent colour. */
.health-view-score-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.25rem;
    padding: 0.1rem 0.45rem;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: var(--font-weight-semibold);
    background: color-mix(in srgb, var(--health-view-band) 18%, transparent);
    color: var(--health-view-band);
    border: 1px solid color-mix(in srgb, var(--health-view-band) 35%, transparent);
}

.health-view-issue-count {
    font-size: 0.72rem;
    color: var(--text-secondary);
}

/* Score bands. Thresholds mirror scoreClass() in health.js: >=90 good,
   >=70 warn, else bad. Set as a variable so badge, row accent and the
   breakdown total all tint from one place. */
.health-view-band-good { --health-view-band: var(--accent-success); }
.health-view-band-warn { --health-view-band: var(--accent-warning); }
.health-view-band-bad { --health-view-band: var(--accent-error); }

/* ─── Summary tiles ─────────────────────────────────────────────────────── */

/* Auto-fit rather than a fixed column count: the row reflows instead of
   overflowing when the sidebar or a narrow window squeezes the container. */
.health-view-tiles {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(6.5rem, 1fr));
    gap: 0.5rem;
    padding: 0 0.35rem;
}

.health-view-tile {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.15rem;
    padding: 0.5rem 0.6rem;
    border: 1px solid var(--border-primary);
    border-radius: var(--layout-radius-sm, 8px);
    background: var(--background-secondary);
    font-family: inherit;
    text-align: left;
    transition: border-color 0.15s ease, background-color 0.15s ease;
}

button.health-view-tile {
    cursor: pointer;
}

button.health-view-tile:hover {
    border-color: color-mix(in srgb, var(--accent-primary) 45%, var(--border-primary));
    background: color-mix(in srgb, var(--accent-primary) 7%, var(--background-secondary));
}

.health-view-tile.is-active {
    border-color: color-mix(in srgb, var(--accent-primary) 55%, transparent);
    background: color-mix(in srgb, var(--accent-primary) 12%, var(--background-secondary));
}

.health-view-tile-label {
    font-size: 0.68rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text-tertiary);
}

.health-view-tile-value {
    font-size: 1.05rem;
    font-weight: var(--font-weight-semibold);
    font-variant-numeric: tabular-nums;
    color: var(--text-primary);
}

/* A count of zero is good news for a problem tile, so it reads as plain text;
   only a non-zero count earns the severity colour. */
.health-view-tile--good:not(.health-view-tile--zero) .health-view-tile-value {
    color: var(--accent-success);
}

/* Monitored is the one tile whose tone is a live reading rather than a fixed
   category, so it carries the state on its whole face instead of just the
   number: a red count alone is easy to miss in a row of five tiles, and this
   one is reporting that something is unreachable right now. */
.health-view-tile--monitored.health-view-tile--bad:not(.health-view-tile--zero) {
    border-color: color-mix(in srgb, var(--accent-error) 55%, transparent);
    background: color-mix(in srgb, var(--accent-error) 10%, var(--background-secondary));
}

.health-view-tile--monitored.health-view-tile--bad:not(.health-view-tile--zero) .health-view-tile-label {
    color: var(--accent-error);
    opacity: 0.9;
}

.health-view-tile--monitored.health-view-tile--good:not(.health-view-tile--zero) {
    border-color: color-mix(in srgb, var(--accent-success) 40%, transparent);
}

.health-view-tile--bad:not(.health-view-tile--zero) .health-view-tile-value {
    color: var(--accent-error);
}

.health-view-tile--warn:not(.health-view-tile--zero) .health-view-tile-value {
    color: var(--accent-warning);
}

/* ─── Toolbar ───────────────────────────────────────────────────────────── */

.health-view-toolbar {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    flex-wrap: wrap;
    padding: 0 0.35rem 0.35rem;
}

.health-view-filter-group {
    display: inline-flex;
    gap: 0.25rem;
    padding: 0.15rem;
    border-radius: 999px;
    border: 1px solid var(--border-primary);
    background: var(--background-secondary);
}

.health-view-filter-btn {
    border: none;
    background: transparent;
    color: var(--text-secondary);
    font-size: 0.78rem;
    padding: 0.25rem 0.65rem;
    border-radius: 999px;
    cursor: pointer;
}

.health-view-filter-btn.is-active {
    background: color-mix(in srgb, var(--accent-primary) 16%, transparent);
    color: var(--accent-primary);
}

.health-view-filter-count {
    margin-left: 0.3rem;
    opacity: 0.7;
}

.health-view-search-input {
    flex: 1 1 12rem;
    min-width: 8rem;
    padding: 0.35rem 0.55rem;
    border-radius: 0.4rem;
    border: 1px solid var(--border-primary);
    background: var(--background-primary);
    color: var(--text-primary);
    font-size: 0.82rem;
}

.health-view-sort-select {
    padding: 0.3rem 0.4rem;
    border-radius: 0.4rem;
    border: 1px solid var(--border-primary);
    background: var(--background-primary);
    color: var(--text-primary);
    font-family: inherit;
    font-size: 0.78rem;
    cursor: pointer;
}

.health-view-retest-btn,
.health-view-load-more-btn {
    padding: 0.35rem 0.7rem;
    border-radius: 0.4rem;
    border: 1px solid color-mix(in srgb, var(--accent-primary) 40%, transparent);
    background: color-mix(in srgb, var(--accent-primary) 12%, transparent);
    color: var(--accent-primary);
    font-size: 0.8rem;
    cursor: pointer;
}

.health-view-retest-btn[disabled] {
    opacity: 0.55;
    cursor: default;
}

/* Secondary styling on purpose: this clears a setting on many bookmarks, so it
   must not compete with "Retest all" for the primary action. */
/* Secondary weight: exporting is a side errand next to "Retest all", which is
   the button this toolbar exists for. */
.health-view-export-btn,
.health-view-checkoff-btn {
    padding: 0.35rem 0.7rem;
    border-radius: 0.4rem;
    border: 1px solid var(--border-secondary);
    background: transparent;
    color: var(--text-secondary);
    font-size: 0.8rem;
    cursor: pointer;
}

.health-view-export-btn:hover {
    border-color: color-mix(in srgb, var(--accent-primary) 45%, transparent);
    color: var(--accent-primary);
}

.health-view-checkoff-btn:hover:not([disabled]) {
    border-color: var(--accent-error);
    color: var(--accent-error);
}

.health-view-checkoff-btn[disabled] {
    opacity: 0.45;
    cursor: default;
}

/* Same shape as its "off" counterpart, but tinted toward the accent rather than
   the error colour: this one adds monitoring rather than taking it away. */
.health-view-bulk-monitor-btn {
    padding: 0.35rem 0.7rem;
    border-radius: 0.4rem;
    border: 1px solid var(--border-secondary);
    background: transparent;
    color: var(--text-secondary);
    font-size: 0.8rem;
    cursor: pointer;
}

.health-view-bulk-monitor-btn:hover {
    border-color: var(--accent-primary);
    color: var(--accent-primary);
}

.health-view-load-more-btn {
    display: block;
    width: 100%;
    margin-top: 0.35rem;
}

/* ─── Feed ──────────────────────────────────────────────────────────────── */

.health-view-feed {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
}

/* Favicon column is 3rem, shared with the inbox feed so the two read as one
   system: health rows are scannable status lines, not previews, but the icon is
   large enough to recognise the site at a glance. */
.health-view-item {
    display: grid;
    grid-template-columns: 3rem 1fr;
    gap: 0.85rem;
    padding: 0.75rem 0.85rem;
    border: 1px solid var(--border-primary);
    border-radius: var(--layout-radius-sm, 8px);
    background: var(--background-secondary);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

/* Same left-edge marker as an unread inbox item, tinted by severity. */
.health-view-item.is-broken {
    border-left: 3px solid var(--accent-error);
}

.health-view-item.is-warn {
    border-left: 3px solid var(--accent-warning);
}

.health-view-item:hover {
    border-color: color-mix(in srgb, var(--accent-primary) 42%, var(--border-primary));
    background: color-mix(in srgb, var(--accent-primary) 7%, var(--background-secondary));
}

.health-view-item.keyboard-selected {
    border-color: var(--accent-primary);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent-primary) 28%, transparent);
    background: color-mix(in srgb, var(--accent-primary) 9%, var(--background-secondary));
}

.health-view-item-icon {
    width: 3rem;
    height: 3rem;
    border-radius: calc(var(--layout-radius-sm, 8px) - 2px);
    background: var(--background-primary) center/contain no-repeat;
    border: 1px solid var(--border-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    color: var(--text-tertiary);
    overflow: hidden;
}

.health-view-item-icon img {
    width: 1.7rem;
    height: 1.7rem;
    object-fit: contain;
}

.health-view-item-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.6rem;
}

.health-view-item-title {
    margin: 0;
    font-size: var(--font-size-controls);
    font-weight: var(--font-weight-semibold);
    color: var(--text-primary);
    line-height: 1.35;
    overflow-wrap: anywhere;
}

/* Row score doubles as the breakdown disclosure — it is a real <button>. */
.health-view-item-score {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
    min-width: 2.5rem;
    justify-content: center;
    padding: 0.1rem 0.4rem;
    border-radius: 999px;
    border: 1px solid color-mix(in srgb, var(--health-view-band) 35%, transparent);
    background: color-mix(in srgb, var(--health-view-band) 14%, transparent);
    color: var(--health-view-band);
    font-size: 0.72rem;
    font-weight: var(--font-weight-semibold);
    font-family: inherit;
    cursor: pointer;
}

.health-view-item-score:hover {
    background: color-mix(in srgb, var(--health-view-band) 24%, transparent);
}

.health-view-item-score-caret {
    font-size: 0.6rem;
    opacity: 0.8;
    transition: transform 0.15s ease;
}

.health-view-item-score[aria-expanded="true"] .health-view-item-score-caret {
    transform: rotate(90deg);
}

.health-view-item-meta {
    margin: 0.2rem 0 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem 0.6rem;
    font-size: 0.78rem;
    color: var(--text-secondary);
}

.health-view-item-reason {
    color: var(--text-secondary);
}

/* ─── Last opened ───────────────────────────────────────────────────────────
   Always present, so the meta line keeps one shape across rows rather than a
   field that appears and disappears. Quieter than the reason beside it: it is
   context for the row, not a finding about it. */
.health-view-item-opened {
    color: var(--text-secondary);
    opacity: 0.85;
    white-space: nowrap;
}

/* Never opened is a finding — the same signal the Stale filter and the score
   act on — so it carries the weight the neutral timestamps deliberately do not. */
.health-view-item-opened.is-never {
    color: var(--text-muted, var(--text-secondary));
    opacity: 1;
    font-style: italic;
}

.health-view-item.is-broken .health-view-item-reason {
    color: var(--accent-error);
}

/* ─── Check-mode badge ──────────────────────────────────────────────────────
   Names why a row does or does not have a heartbeat, and doubles as the control
   that changes it: the label is already where the eye goes to ask the question,
   so making it the button costs no extra room in the row. */

.health-check-mode-wrap {
    position: relative;
    display: inline-flex;
}

.health-check-mode {
    padding: 0.05rem 0.4rem;
    border: 1px solid var(--border-secondary);
    border-radius: 999px;
    background: transparent;
    color: inherit;
    font-family: inherit;
    font-size: 0.68rem;
    line-height: 1.5;
    white-space: nowrap;
    cursor: pointer;
}

.health-check-mode.is-monitor {
    border-color: color-mix(in srgb, var(--accent-primary) 55%, var(--border-secondary));
    background: color-mix(in srgb, var(--accent-primary) 12%, transparent);
    color: var(--text-primary);
}

.health-check-mode.is-periodic {
    color: var(--text-secondary);
}

/* Most bookmarks are unchecked. A solid pill on every one of them would drown
   the rows that do carry a mode, so the "off" badge stays nearly invisible until
   the row is hovered or selected — the moments the control is wanted. */
.health-check-mode.is-off {
    border-color: transparent;
    color: var(--text-tertiary);
    opacity: 0;
}

.health-view-item:hover .health-check-mode.is-off,
.health-view-item.keyboard-selected .health-check-mode.is-off,
.health-check-mode.is-off:focus-visible,
.health-check-mode.is-off[aria-expanded="true"] {
    border-color: var(--border-secondary);
    opacity: 1;
}

.health-check-mode:hover,
.health-check-mode:focus-visible {
    border-color: var(--accent-primary);
    color: var(--accent-primary);
}

/* The shortcut hint rides along only once the row is the keyboard target —
   printing "c" on every badge would turn the meta line into a keymap. */
.health-check-mode kbd {
    display: none;
    margin-left: 0.3rem;
    font-size: 0.9em;
    opacity: 0.7;
}

.health-view-item.keyboard-selected .health-check-mode kbd {
    display: inline;
}

/* ─── Check-mode popover ─────────────────────────────────────────────────── */

.health-check-menu {
    min-width: 15rem;
}

.health-check-option {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
}

.health-check-option-body {
    font-size: 0.7rem;
    color: var(--text-secondary);
    white-space: normal;
}

.health-check-option:hover .health-check-option-body,
.health-check-option:focus-visible .health-check-option-body {
    color: inherit;
}

.health-check-option.is-active {
    background: color-mix(in srgb, var(--accent-primary) 8%, var(--background-primary));
}

.health-check-option.is-active .health-check-option-label::after {
    content: " ✓";
    color: var(--accent-primary);
}

.health-view-check-note {
    margin: 0.5rem 0 0;
    color: var(--text-secondary);
    font-size: 0.75rem;
    line-height: 1.45;
}

/* ─── Uptime monitoring ─────────────────────────────────────────────────── */

.health-monitor-strip {
    margin-top: 0.4rem;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
    font-size: 0.72rem;
    color: var(--text-secondary);
}

/* The heartbeat bar. Bars stay a fixed minimum width and the row scrolls rather
   than compressing them: a squashed bar hides exactly the outage it exists to
   show. */
.health-monitor-strip .health-heartbeat {
    display: flex;
    align-items: flex-end;
    gap: 1px;
    height: 16px;
    max-width: 100%;
    overflow-x: auto;
    scrollbar-width: none;
}

.health-monitor-strip .health-heartbeat::-webkit-scrollbar {
    display: none;
}

.health-heartbeat-bar {
    flex: 0 0 auto;
    width: 3px;
    height: 100%;
    border-radius: 1px;
    background: var(--border-secondary);
}

.health-heartbeat-bar.is-up {
    background: var(--accent-success);
}

.health-heartbeat-bar.is-down {
    background: var(--accent-error);
}

/* A bucket holding both a success and a failure — visually distinct from a
   clean outage so instability is not mistaken for downtime. */
.health-heartbeat-bar.is-degraded {
    background: var(--accent-warning);
}

.health-heartbeat-bar.is-unknown {
    background: color-mix(in srgb, var(--border-secondary) 55%, transparent);
}

.health-monitor-uptime {
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    color: var(--text-primary);
}

.health-sparkline {
    color: var(--text-secondary);
    opacity: 0.75;
    flex: 0 0 auto;
}

.health-monitor-ping {
    font-variant-numeric: tabular-nums;
}

.health-monitor-down {
    color: var(--accent-error);
    font-weight: 600;
}

.health-monitor-pending {
    font-style: italic;
    opacity: 0.8;
}

/* Enlarge button. Pushed to the end of the strip and kept quiet until the row is
   hovered or selected — same treatment as the check-mode kbd hint, so a list of
   monitored rows is not a column of icons competing with the heartbeats. */
.health-monitor-expand-btn {
    margin-left: auto;
    padding: 0.05rem 0.35rem;
    border: 1px solid transparent;
    border-radius: var(--layout-radius-sm, 8px);
    background: transparent;
    color: inherit;
    font-family: inherit;
    font-size: 0.8rem;
    line-height: 1.4;
    opacity: 0.45;
    cursor: pointer;
    transition: opacity 0.12s ease, border-color 0.12s ease;
}

.health-view-item:hover .health-monitor-expand-btn,
.health-view-item.keyboard-selected .health-monitor-expand-btn,
.health-monitor-expand-btn:focus-visible {
    opacity: 1;
    border-color: var(--border-secondary);
}

.health-monitor-expand-btn kbd {
    display: none;
    margin-left: 0.25rem;
    font-size: 0.62rem;
    opacity: 0.7;
}

.health-view-item.keyboard-selected .health-monitor-expand-btn kbd {
    display: inline;
}

.health-view-score-item.is-ongoing .health-view-score-item-cost {
    color: var(--accent-error);
    font-weight: 600;
}

/* ─── Enlarged monitor statistics (modal) ───────────────────────────────── */

.health-monitor-stats {
    text-align: left;
    font-size: var(--font-size-controls);
    color: var(--text-secondary);
}

.health-monitor-stats-url {
    margin: 0 0 0.75rem;
    font-size: 0.75rem;
    color: var(--text-secondary);
    word-break: break-all;
}

.health-monitor-stats-down {
    margin: 0 0 0.5rem;
    color: var(--accent-error);
    font-weight: 600;
}

.health-monitor-stat-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.5rem;
    margin-bottom: 1rem;
}

@media (max-width: 30rem) {
    .health-monitor-stat-grid {
        grid-template-columns: 1fr;
    }
}

.health-monitor-stat {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    padding: 0.55rem 0.6rem;
    border: 1px solid var(--border-primary);
    border-radius: var(--layout-radius-sm, 8px);
    background: color-mix(in srgb, var(--border-primary) 12%, transparent);
}

.health-monitor-stat-label {
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    opacity: 0.8;
}

.health-monitor-stat-value {
    font-size: 1.15rem;
    font-weight: var(--font-weight-semibold);
    font-variant-numeric: tabular-nums;
    color: var(--text-primary);
}

/* A window with no samples reads as absent, not as a measured zero. */
.health-monitor-stat--empty .health-monitor-stat-value {
    font-size: 0.85rem;
    font-weight: 400;
    font-style: italic;
    color: var(--text-secondary);
    opacity: 0.75;
}

.health-monitor-stat-sub {
    font-size: 0.68rem;
    opacity: 0.7;
    font-variant-numeric: tabular-nums;
}

.health-monitor-stats-heading {
    margin: 0 0 0.35rem;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--text-secondary);
    opacity: 0.85;
}

/* The chart scrolls inside its own box rather than widening the modal. */
.health-monitor-chart {
    max-width: 100%;
    overflow-x: auto;
    margin-bottom: 0.75rem;
}

.health-sparkline--large {
    display: block;
    width: 100%;
    height: auto;
    min-width: 20rem;
    color: var(--accent-primary);
    opacity: 1;
}

.health-sparkline--large .health-sparkline-axis {
    fill: var(--text-secondary);
    opacity: 0.75;
    font-variant-numeric: tabular-nums;
}

/* Faint until hovered or selected: the dots mark where the measurements are
   without speckling the line. */
.health-sparkline--large .health-sparkline-dot {
    opacity: 0.28;
    transition: opacity 0.12s ease, r 0.12s ease;
    pointer-events: none;
}

.health-sparkline--large .health-sparkline-dot.is-selected {
    opacity: 1;
    r: 4.5;
}

/* Full-height columns so a point can be hit without pixel-hunting the dot. */
.health-sparkline-hit {
    cursor: pointer;
    outline: none;
}

.health-sparkline-hit:hover,
.health-sparkline-hit.is-selected {
    fill: currentColor;
    fill-opacity: 0.07;
}

.health-sparkline-hit:focus-visible {
    fill: currentColor;
    fill-opacity: 0.14;
    stroke: currentColor;
    stroke-width: 1;
    stroke-opacity: 0.5;
}

/* The readout under the chart. Fixed height so selecting a point never shifts
   the content below it. */
.health-monitor-readout {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.2rem 0.6rem;
    min-height: 1.9rem;
    margin-bottom: 0.85rem;
    padding: 0.35rem 0.55rem;
    border-radius: calc(var(--layout-radius-sm, 8px) - 2px);
    border: 1px solid var(--border-secondary);
    background: var(--background-primary);
    font-size: 0.75rem;
}

.health-monitor-readout-hint {
    font-style: italic;
    opacity: 0.7;
}

.health-monitor-readout-value {
    font-size: 0.95rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--accent-primary);
}

.health-monitor-readout-when {
    font-variant-numeric: tabular-nums;
    opacity: 0.85;
}

.health-monitor-readout-checks {
    opacity: 0.7;
}

.health-monitor-readout-state {
    margin-left: auto;
    padding: 0.05rem 0.4rem;
    border-radius: 999px;
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    background: color-mix(in srgb, var(--accent-success) 16%, transparent);
    color: var(--accent-success);
}

.health-monitor-readout-state.is-down {
    background: color-mix(in srgb, var(--accent-error) 16%, transparent);
    color: var(--accent-error);
}

.health-monitor-readout-state.is-degraded {
    background: color-mix(in srgb, var(--accent-warning) 16%, transparent);
    color: var(--accent-warning);
}

.health-monitor-readout-state.is-unknown {
    background: color-mix(in srgb, var(--border-secondary) 55%, transparent);
    color: var(--text-secondary);
}

@media (prefers-reduced-motion: reduce) {
    .health-sparkline--large .health-sparkline-dot {
        transition: none;
    }
}

.health-monitor-chart-empty {
    margin: 0 0 0.75rem;
    font-style: italic;
    opacity: 0.8;
}

/* Taller than the row heartbeat: this is the one place with room for it. */
.health-monitor-stats-heartbeat .health-heartbeat {
    display: flex;
    align-items: flex-end;
    gap: 2px;
    height: 34px;
    max-width: 100%;
    overflow-x: auto;
    margin-bottom: 0.6rem;
}

.health-monitor-stats-heartbeat .health-heartbeat-bar {
    width: 6px;
    border-radius: 2px;
}

.health-monitor-meta {
    margin: 0 0 0.85rem;
    font-size: 0.72rem;
    opacity: 0.85;
}

.health-monitor-stats-incidents .health-view-score-list {
    max-height: 13rem;
    overflow-y: auto;
}

/* ─── Score breakdown ───────────────────────────────────────────────────── */

.health-view-score-panel {
    margin-top: 0.55rem;
    padding: 0.55rem 0.65rem;
    border-radius: calc(var(--layout-radius-sm, 8px) - 2px);
    border: 1px solid var(--border-secondary);
    background: var(--background-primary);
}

.health-view-score-intro {
    margin: 0 0 0.4rem;
    font-size: 0.75rem;
    color: var(--text-tertiary);
}

.health-view-score-list {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.health-view-score-item {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.75rem;
    font-size: 0.78rem;
    color: var(--text-secondary);
}

.health-view-score-item-cost {
    flex-shrink: 0;
    font-variant-numeric: tabular-nums;
    color: var(--accent-error);
}

/* The failing status code next to an outage's timestamp: supporting detail, so
   it sits back from the time it annotates. */
.health-view-score-item-reason {
    color: var(--text-tertiary);
}

.health-view-score-total {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.75rem;
    margin-top: 0.45rem;
    padding-top: 0.4rem;
    border-top: 1px solid var(--border-secondary);
    font-size: 0.78rem;
    font-weight: var(--font-weight-semibold);
    color: var(--text-primary);
}

.health-view-score-total-value {
    font-variant-numeric: tabular-nums;
    color: var(--health-view-band);
}

/* ─── Row actions ───────────────────────────────────────────────────────── */

/* Inbox shows actions on every card. Health lists run to dozens of rows, so they
   stay collapsed until the row is hovered, focused, or keyboard-selected —
   quieter than inbox, same button sizing.

   grid-template-rows 0fr → 1fr collapses the row's height rather than only its
   opacity: reserving the space would leave every row padded with a strip of
   emptiness. The buttons keep their box (no display:none), so they stay
   focusable and Tab still reveals them via :focus-within. */
.health-view-item-actions {
    display: grid;
    grid-template-rows: 0fr;
    margin-top: 0;
    opacity: 0;
    transition: grid-template-rows 0.14s ease, opacity 0.12s ease, margin-top 0.14s ease;
}

.health-view-item-actions > * {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    min-height: 0;
    overflow: hidden;
}

/* The collapsing wrapper clips its content, which would cut off an open menu.
   Only while a menu is open does the row let it escape — the height animation is
   finished by then, so nothing jumps. */
.health-view-item-actions:has(.health-view-menu:not([hidden])),
.health-view-item-actions:has(.health-view-menu:not([hidden])) > * {
    overflow: visible;
}

.health-view-item:hover .health-view-item-actions,
.health-view-item:focus-within .health-view-item-actions,
.health-view-item.keyboard-selected .health-view-item-actions {
    grid-template-rows: 1fr;
    margin-top: 0.55rem;
    opacity: 1;
}

/* Never hide an action from assistive tech or keyboard users: opacity:0 keeps
   the buttons focusable, and focus-within reveals them on Tab. */
.health-view-action-btn {
    padding: 0.2rem 0.55rem;
    border-radius: 0.35rem;
    border: 1px solid var(--border-primary);
    background: var(--background-primary);
    color: var(--text-primary);
    font-size: 0.78rem;
    font-family: inherit;
    cursor: pointer;
}

.health-view-action-btn:hover {
    border-color: color-mix(in srgb, var(--accent-primary) 45%, transparent);
    color: var(--accent-primary);
}

.health-view-action-btn--danger:hover {
    border-color: color-mix(in srgb, var(--accent-error) 45%, transparent);
    color: var(--accent-error);
}

.health-view-action-btn[disabled] {
    opacity: 0.55;
    cursor: default;
}

.health-view-action-btn kbd {
    margin-left: 0.25rem;
    font-size: 0.68rem;
    opacity: 0.75;
}

/* ─── Row overflow menu ─────────────────────────────────────────────────── */

.health-view-menu-wrap {
    position: relative;
    display: inline-flex;
}

/* Above the rows below it, and above the score panel of its own row.
   Surface deliberately matches the dashboard's .move-popover: an opaque
   --background-secondary, not --background-modal. The modal colour is
   semi-transparent by design and only reads correctly behind a backdrop blur;
   used flat here it let the row underneath bleed through and washed the menu
   out on every theme. */
.health-view-menu {
    position: absolute;
    top: calc(100% + 0.3rem);
    left: 0;
    z-index: 20;
    min-width: 12rem;
    padding: 0.35rem 0 0.45rem;
    display: flex;
    flex-direction: column;
    gap: 0.05rem;
    border: 1px solid var(--border-primary);
    border-radius: 0.65rem;
    background: var(--background-secondary);
    color: var(--text-primary);
    font-family: var(--font-family-main);
    box-shadow: 0 4px 18px color-mix(in srgb, var(--text-primary) 14%, transparent);
}

/* The modern layout gives .move-popover softer corners and a blurred edge; the
   health menu follows so both context menus stay indistinguishable. */
body[data-layout-version="modern"] .health-view-menu {
    border-radius: var(--layout-radius-md);
    border-color: var(--layout-surface-border, var(--border-primary));
    box-shadow: var(--layout-shadow-md);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}

/* The display above beats the browser's default [hidden] rule, so a closed menu
   would stay laid out — invisible enough to miss by eye, but still clickable and
   still announced to assistive tech. */
.health-view-menu[hidden] {
    display: none;
}

/* Flipped by toggleMenu() when the menu would fall off the bottom. */
.health-view-menu--up {
    top: auto;
    bottom: calc(100% + 0.3rem);
}

.health-view-menu-item {
    padding: 0.45rem 0.85rem;
    margin: 0 0.3rem;
    border: none;
    border-radius: 0.4rem;
    background: transparent;
    color: var(--text-primary);
    font-family: inherit;
    font-size: calc(var(--font-size-controls) * 0.92);
    font-weight: var(--font-weight-medium);
    text-align: left;
    cursor: pointer;
    transition:
        background-color 0.12s ease,
        color 0.12s ease;
}

/* Mixed against --background-primary rather than transparent: the menu is
   opaque now, so an alpha highlight would darken instead of tint. */
.health-view-menu-item:hover,
.health-view-menu-item:focus-visible {
    background: color-mix(in srgb, var(--accent-primary) 12%, var(--background-primary));
    color: var(--text-primary);
}

body[data-layout-version="modern"] .health-view-menu-item {
    border-radius: var(--layout-radius-sm);
}

body[data-layout-version="modern"] .health-view-menu-item:hover,
body[data-layout-version="modern"] .health-view-menu-item:focus-visible {
    background: color-mix(in srgb, var(--accent-primary) 14%, var(--background-primary));
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent-primary) 22%, transparent);
}

.health-view-menu-item--danger {
    color: var(--accent-error);
}

.health-view-menu-item--danger:hover,
.health-view-menu-item--danger:focus-visible {
    background: color-mix(in srgb, var(--accent-error) 14%, var(--background-primary));
    color: var(--accent-error);
}

.health-view-menu-item[disabled] {
    opacity: 0.5;
    cursor: default;
}

.health-view-menu-label {
    margin: 0;
    padding: 0.5rem 0.85rem 0.2rem;
    font-size: calc(var(--font-size-controls) * 0.68);
    font-weight: var(--font-weight-medium);
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--text-tertiary, var(--text-secondary));
}

.health-view-menu-label--danger {
    color: color-mix(in srgb, var(--accent-error) 75%, var(--text-tertiary));
}

/* ─── Groups, empty states ──────────────────────────────────────────────── */

.health-view-group {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
}

.health-view-group-title {
    margin: 0.35rem 0 0;
    font-size: 0.72rem;
    font-weight: var(--font-weight-semibold);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text-tertiary);
}

.health-view-group-items {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
}

.health-view-empty-state,
.health-view-empty {
    padding: 2rem 1rem;
    text-align: center;
    color: var(--text-secondary);
}

.health-view-empty-title {
    margin: 0 0 0.35rem;
    font-size: var(--font-size-controls);
    color: var(--text-primary);
}

.health-view-empty-hint {
    margin: 0;
    font-size: 0.85rem;
}

/* Rendered twice — above and below the list — so a long list never pushes the
   shortcut hints out of sight. */
.health-view-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem 0.8rem;
    padding: 0 0.35rem;
    margin: 0;
    font-size: 0.72rem;
    color: var(--text-tertiary);
}

/* The dashboard's own "> search" hint sits below the layout container; the
   bottom padding keeps the legend clear of it. */
.health-view-legend--bottom {
    padding-bottom: 1.25rem;
}

.health-view-legend kbd {
    padding: 0.05rem 0.3rem;
    border-radius: 3px;
    border: 1px solid var(--border-primary);
    background: var(--background-secondary);
    font-size: 0.68rem;
}

/* ─── Motion & narrow viewports ─────────────────────────────────────────── */

body.no-animations .health-view-item,
body.no-animations .health-view-item-actions,
body.no-animations .health-view-item-score-caret {
    transition: none !important;
}

@media (prefers-reduced-motion: reduce) {
    .health-view-item,
    .health-view-item-actions,
    .health-view-item-score-caret {
        transition: none !important;
    }
}

/* Touch devices have no hover: without this the actions would only ever show
   on tap-focus. */
@media (hover: none) {
    .health-view-item-actions {
        grid-template-rows: 1fr;
        margin-top: 0.55rem;
        opacity: 1;
    }
}

@media (max-width: 520px) {
    .health-view-item {
        grid-template-columns: 1fr;
    }

    .health-view-item-icon {
        display: none;
    }

    .health-view-toolbar {
        flex-wrap: wrap;
    }

    .health-view-item-actions {
        grid-template-rows: 1fr;
        margin-top: 0.55rem;
        opacity: 1;
    }

    .health-view-tiles {
        grid-template-columns: repeat(auto-fit, minmax(5rem, 1fr));
    }
}

/* ─── Modern layout ─────────────────────────────────────────────────────────
   Scoped to body[data-layout-version="modern"]; classic above is untouched.

   The view already reads --layout-radius-sm with an 8px fallback in a dozen
   places, so corners track the layout for free. What classic cannot express is
   the rest of the modern grammar: surface tint, layered shadow, the softer
   focus ring, and hover as a lift rather than a border-colour change. Tokens
   come from layout-modern-tokens.css.

   The row menu (.health-view-menu) is styled next to its classic rule above,
   where the display/[hidden] interaction it depends on is documented.
   ------------------------------------------------------------------------- */

/* Focus ring: matches the dashboard's, replacing each control's default. */
body[data-layout-version="modern"] .health-view-tile:focus-visible,
body[data-layout-version="modern"] .health-view-filter-btn:focus-visible,
body[data-layout-version="modern"] .health-view-action-btn:focus-visible,
body[data-layout-version="modern"] .health-view-export-btn:focus-visible,
body[data-layout-version="modern"] .health-view-checkoff-btn:focus-visible,
body[data-layout-version="modern"] .health-view-bulk-monitor-btn:focus-visible,
body[data-layout-version="modern"] .health-monitor-expand-btn:focus-visible,
body[data-layout-version="modern"] .health-view-item:focus-visible {
    outline: var(--layout-focus-ring);
    outline-offset: 2px;
}

/* ─── Header ────────────────────────────────────────────────────────────── */

/* Softened to match the dashboard header's divider, which is a tinted hairline
   rather than a full-strength border. */
body[data-layout-version="modern"] .health-view-header {
    border-bottom-color: color-mix(in srgb, var(--border-primary) 32%, transparent);
    padding-bottom: 0.7rem;
}

/* ─── Summary tiles ─────────────────────────────────────────────────────── */

body[data-layout-version="modern"] .health-view-tile {
    border-radius: var(--layout-radius-md);
    border-color: var(--layout-surface-border);
    background: var(--layout-surface);
    box-shadow: var(--layout-shadow-sm);
    transition:
        border-color var(--layout-transition),
        background-color var(--layout-transition),
        box-shadow var(--layout-transition),
        transform var(--layout-transition);
}

/* Modern reads hover as a lift; classic only recolours the border. */
body[data-layout-version="modern"] button.health-view-tile:hover {
    box-shadow: var(--layout-shadow-md);
    transform: translateY(-1px);
}

body[data-layout-version="modern"] .health-view-tile.is-active {
    border-color: color-mix(in srgb, var(--accent-primary) 55%, transparent);
    box-shadow:
        var(--layout-shadow-sm),
        inset 0 0 0 1px color-mix(in srgb, var(--accent-primary) 22%, transparent);
}

/* ─── Toolbar & filters ─────────────────────────────────────────────────── */

body[data-layout-version="modern"] .health-view-filter-group {
    border-radius: var(--layout-radius-pill);
    border-color: var(--layout-surface-border);
    background: var(--layout-surface);
    box-shadow: var(--layout-shadow-sm);
}

body[data-layout-version="modern"] .health-view-filter-btn {
    border-radius: var(--layout-radius-pill);
    transition:
        background-color var(--layout-transition),
        color var(--layout-transition);
}

body[data-layout-version="modern"] .health-view-filter-btn.is-active {
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent-primary) 24%, transparent);
}

/* The three toolbar buttons share one shape in classic (0.4rem); keep them
   sharing one shape here rather than pinning each to its own radius. */
body[data-layout-version="modern"] .health-view-export-btn,
body[data-layout-version="modern"] .health-view-checkoff-btn,
body[data-layout-version="modern"] .health-view-bulk-monitor-btn {
    border-radius: var(--layout-radius-sm);
    border-color: var(--layout-surface-border);
    transition:
        border-color var(--layout-transition),
        color var(--layout-transition),
        background-color var(--layout-transition);
}

body[data-layout-version="modern"] .health-view-export-btn:hover,
body[data-layout-version="modern"] .health-view-bulk-monitor-btn:hover {
    background: color-mix(in srgb, var(--accent-primary) 8%, transparent);
}

body[data-layout-version="modern"] .health-view-checkoff-btn:hover:not([disabled]) {
    background: color-mix(in srgb, var(--accent-error) 8%, transparent);
}

/* ─── Feed rows ─────────────────────────────────────────────────────────── */

body[data-layout-version="modern"] .health-view-item {
    border-radius: var(--layout-radius-md);
    border-color: var(--layout-surface-border);
    background: var(--layout-surface);
    box-shadow: var(--layout-shadow-sm);
    transition:
        border-color var(--layout-transition),
        background-color var(--layout-transition),
        box-shadow var(--layout-transition),
        transform var(--layout-transition);
}

/* The severity marker is a left border in classic. A rounded row would clip it
   into a wedge, so modern redraws it as an inset bar that follows the corner. */
body[data-layout-version="modern"] .health-view-item.is-broken,
body[data-layout-version="modern"] .health-view-item.is-warn {
    border-left-width: 1px;
    border-left-color: var(--layout-surface-border);
}

body[data-layout-version="modern"] .health-view-item.is-broken {
    box-shadow:
        var(--layout-shadow-sm),
        inset 3px 0 0 0 var(--accent-error);
}

body[data-layout-version="modern"] .health-view-item.is-warn {
    box-shadow:
        var(--layout-shadow-sm),
        inset 3px 0 0 0 var(--accent-warning);
}

body[data-layout-version="modern"] .health-view-item:hover {
    box-shadow: var(--layout-shadow-md);
    transform: translateY(-1px);
}

/* Hover must not erase the severity marker, so each state restates its bar. */
body[data-layout-version="modern"] .health-view-item.is-broken:hover {
    box-shadow:
        var(--layout-shadow-md),
        inset 3px 0 0 0 var(--accent-error);
}

body[data-layout-version="modern"] .health-view-item.is-warn:hover {
    box-shadow:
        var(--layout-shadow-md),
        inset 3px 0 0 0 var(--accent-warning);
}

body[data-layout-version="modern"] .health-view-item.keyboard-selected {
    box-shadow:
        var(--layout-shadow-md),
        0 0 0 2px color-mix(in srgb, var(--accent-primary) 28%, transparent);
}

body[data-layout-version="modern"] .health-view-item.keyboard-selected.is-broken {
    box-shadow:
        var(--layout-shadow-md),
        0 0 0 2px color-mix(in srgb, var(--accent-primary) 28%, transparent),
        inset 3px 0 0 0 var(--accent-error);
}

body[data-layout-version="modern"] .health-view-item.keyboard-selected.is-warn {
    box-shadow:
        var(--layout-shadow-md),
        0 0 0 2px color-mix(in srgb, var(--accent-primary) 28%, transparent),
        inset 3px 0 0 0 var(--accent-warning);
}

body[data-layout-version="modern"] .health-view-item-icon {
    border-radius: var(--layout-radius-sm);
    border-color: var(--layout-surface-border);
}

/* ─── Row actions ───────────────────────────────────────────────────────── */

body[data-layout-version="modern"] .health-view-action-btn {
    border-radius: var(--layout-radius-sm);
    border-color: var(--layout-surface-border);
    transition:
        border-color var(--layout-transition),
        color var(--layout-transition),
        background-color var(--layout-transition);
}

body[data-layout-version="modern"] .health-view-action-btn:hover {
    background: color-mix(in srgb, var(--accent-primary) 10%, transparent);
}

body[data-layout-version="modern"] .health-view-action-btn--danger:hover {
    background: color-mix(in srgb, var(--accent-error) 10%, transparent);
}

body[data-layout-version="modern"] .health-monitor-expand-btn {
    border-radius: var(--layout-radius-sm);
}

/* ─── Monitor statistics (modal) ────────────────────────────────────────── */

body[data-layout-version="modern"] .health-monitor-stat {
    border-radius: var(--layout-radius-md);
    border-color: var(--layout-surface-border);
    background: var(--layout-surface);
}

/* ─── Empty states ──────────────────────────────────────────────────────── */

/* Classic leaves these as bare centred text. Modern gives them the same dashed
   placeholder card the empty dashboard uses, so an empty health view reads as a
   deliberate state rather than a failed render. */
body[data-layout-version="modern"] .health-view-empty-state,
body[data-layout-version="modern"] .health-view-empty {
    border: 1px dashed var(--layout-surface-border);
    border-radius: var(--layout-radius-lg);
    background: color-mix(in srgb, var(--background-secondary) 42%, transparent);
}

/* ─── Motion preferences ────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
    body[data-layout-version="modern"] .health-view-tile,
    body[data-layout-version="modern"] .health-view-item,
    body[data-layout-version="modern"] button.health-view-tile:hover,
    body[data-layout-version="modern"] .health-view-item:hover {
        transition: none;
        transform: none;
    }
}