/*
 * Healthie.NET dashboard -- Pulse Monitor.
 *
 * No third-party CSS and no web fonts: this ships inside someone else's application, which may run
 * air-gapped, so it must not reach out to a font CDN at render time. The type stack asks for IBM
 * Plex where it is installed and falls back to the platform's own faces, which keeps the monospace
 * columns lining up either way.
 */

.healthie-dashboard {
    /* Dark is the default: this is a wall-display tool. */
    --hpm-bg: #05080A;
    --hpm-panel: #0B1013;
    --hpm-panel2: #111820;
    --hpm-line: #1A232B;
    --hpm-line2: #263340;
    --hpm-text: #DFE9EE;
    --hpm-muted: #7C8C97;
    --hpm-faint: #4A5862;
    --hpm-ok: #38E08F;
    --hpm-ok-bg: rgba(56, 224, 143, 0.09);
    --hpm-warn: #FFC24B;
    --hpm-warn-bg: rgba(255, 194, 75, 0.10);
    --hpm-crit: #FF5A64;
    --hpm-crit-bg: rgba(255, 90, 100, 0.11);
    --hpm-paused: #4A5862;
    --hpm-paused-bg: rgba(74, 88, 98, 0.18);
    --hpm-grid: rgba(56, 224, 143, 0.05);

    --hpm-sans: 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    --hpm-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

    /*
     * The board scrolls itself rather than the page, so its scrollbar is one this stylesheet can
     * theme -- otherwise the platform paints a wide light bar straight down the side of a dark tool,
     * the one part of the board that never matched it. dvh over vh so a mobile browser's chrome does
     * not clip the last row; overscroll-behavior keeps a flick at the end from scrolling the host
     * behind an embedded board.
     *
     * The board is a full-viewport surface by design -- it is served on its own route and shown as
     * the whole page -- so it claims the viewport height here. A host that instead frames it in a
     * shorter region should override the height on .healthie-dashboard; the internal scroll and its
     * theming then apply to whatever height it is given.
     */
    height: 100vh;
    height: 100dvh;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: var(--hpm-line2) transparent;

    background: var(--hpm-bg);
    color: var(--hpm-text);
    font-family: var(--hpm-sans);
}

/*
 * An <svg> is an inline element, so it sits on the text baseline and leaves room underneath for
 * descenders -- which drops every icon below the box it was given and out of alignment with the
 * text beside it. None of these icons is a letter in a line of prose; each one fills its own box.
 * Only the flow is corrected here: sizing stays with whatever holds the icon, so this cannot
 * out-specify the rules that give each one its size.
 */
.healthie-dashboard .healthie-icon {
    display: block;
}

.healthie-dashboard[data-hpm="light"] {
    --hpm-bg: #EFF3F2;
    --hpm-panel: #FFFFFF;
    --hpm-panel2: #E6ECEA;
    --hpm-line: #DAE2E0;
    --hpm-line2: #C2CDCA;
    --hpm-text: #12181B;
    --hpm-muted: #5A6A70;
    --hpm-faint: #93A2A8;
    --hpm-ok: #0B9E5E;
    --hpm-ok-bg: rgba(11, 158, 94, 0.10);
    --hpm-warn: #B57A0D;
    --hpm-warn-bg: rgba(181, 122, 13, 0.12);
    --hpm-crit: #D23440;
    --hpm-crit-bg: rgba(210, 52, 64, 0.10);
    --hpm-paused: #93A2A8;
    --hpm-paused-bg: rgba(147, 162, 168, 0.16);
    --hpm-grid: rgba(11, 158, 94, 0.06);
}

/* Health is carried by these, named once and reused wherever a status colour is needed. */
.healthie-dashboard .hpm-ok { --hpm-status: var(--hpm-ok); --hpm-status-bg: var(--hpm-ok-bg); }
.healthie-dashboard .hpm-warn { --hpm-status: var(--hpm-warn); --hpm-status-bg: var(--hpm-warn-bg); }
.healthie-dashboard .hpm-crit { --hpm-status: var(--hpm-crit); --hpm-status-bg: var(--hpm-crit-bg); }
.healthie-dashboard .hpm-paused { --hpm-status: var(--hpm-paused); --hpm-status-bg: var(--hpm-paused-bg); }
.healthie-dashboard .hpm-muted-tag { --hpm-status: var(--hpm-faint); --hpm-status-bg: transparent; }

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

.healthie-dashboard input,
.healthie-dashboard select,
.healthie-dashboard button {
    font-family: inherit;
}

/* ---------------------------------------------------------------- header -- */

.hpm-header {
    border-bottom: 1px solid var(--hpm-line);
    background: var(--hpm-panel);
}

.hpm-header-inner {
    max-width: 1500px;
    margin: 0 auto;
    padding: 14px 26px 0;
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
}

.hpm-brand {
    display: flex;
    align-items: center;
    gap: 10px;
}

.hpm-wordmark {
    font-family: var(--hpm-mono);
    font-weight: 600;
    font-size: 14px;
    letter-spacing: 0.14em;
}

.hpm-led {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--hpm-status, var(--hpm-ok));
    animation: hpm-led 1.6s ease infinite;
    flex: none;
}

.hpm-led--steady {
    animation: none;
}

.hpm-led--urgent {
    animation-duration: 0.8s;
}

.hpm-overall {
    font-family: var(--hpm-mono);
    font-size: 11px;
    letter-spacing: 0.1em;
    color: var(--hpm-status);
    background: var(--hpm-status-bg);
    padding: 3px 10px;
    border-radius: 4px;
}

.hpm-spacer {
    flex: 1;
}

.hpm-clock {
    font-family: var(--hpm-mono);
    font-size: 12px;
    color: var(--hpm-muted);
}

.hpm-search {
    position: relative;
    display: flex;
    align-items: center;
}

.hpm-search-icon {
    position: absolute;
    left: 10px;
    width: 13px;
    height: 13px;
    color: var(--hpm-faint);
    pointer-events: none;
}

.hpm-search input {
    width: 150px;
    padding: 6px 10px 6px 30px;
    border: 1px solid var(--hpm-line);
    border-radius: 6px;
    background: var(--hpm-bg);
    color: var(--hpm-text);
    font-size: 12.5px;
    outline: none;
    font-family: var(--hpm-mono);
}

.hpm-search input:focus {
    border-color: var(--hpm-ok);
}

.hpm-actions {
    display: flex;
    gap: 6px;
}

.hpm-btn {
    padding: 6px 12px;
    border: 1px solid var(--hpm-line2);
    border-radius: 6px;
    background: transparent;
    color: var(--hpm-text);
    font-size: 11.5px;
    font-weight: 600;
    font-family: var(--hpm-mono);
    letter-spacing: 0.04em;
    cursor: pointer;
    white-space: nowrap;
}

.hpm-btn:hover {
    background: var(--hpm-panel2);
}

.hpm-btn--icon {
    padding: 6px 10px;
}

.hpm-btn--start { color: var(--hpm-ok); }
.hpm-btn--stop { color: var(--hpm-crit); }
.hpm-btn--theme { color: var(--hpm-muted); }
.hpm-btn--theme:hover { color: var(--hpm-text); }

/* ------------------------------------------------------- aggregate pulse -- */

.hpm-trace-wrap {
    max-width: 1500px;
    margin: 0 auto;
    padding: 10px 26px 0;
    overflow: hidden;
}

.hpm-trace {
    height: 64px;
    position: relative;
    overflow: hidden;
    background-image:
        linear-gradient(var(--hpm-grid) 1px, transparent 1px),
        linear-gradient(90deg, var(--hpm-grid) 1px, transparent 1px);
    background-size: 22px 22px;
    border: 1px solid var(--hpm-line);
    border-bottom: none;
    border-radius: 8px 8px 0 0;
}

.hpm-trace svg {
    position: absolute;
    top: 0;
    left: 0;
    height: 64px;
    /* Overdrawn by exactly one pattern tile so the scroll loops seamlessly. */
    width: calc(100% + 220px);
    animation: hpm-scroll 4.2s linear infinite;
}

.hpm-trace-label {
    position: absolute;
    right: 12px;
    top: 8px;
    font-family: var(--hpm-mono);
    font-size: 10.5px;
    color: var(--hpm-faint);
    letter-spacing: 0.08em;
}

/* ------------------------------------------------------------------ body -- */

.hpm-body {
    --hpm-nav-w: 208px;

    max-width: 1500px;
    margin: 0 auto;
    padding: 22px 26px 70px;
    display: grid;
    grid-template-columns: var(--hpm-nav-w) minmax(0, 1fr) 400px;
    gap: 18px;
    align-items: start;
}

.hpm-body--nav-collapsed {
    --hpm-nav-w: 54px;
}

.hpm-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* The column header and the rows share this track definition, so they stay aligned. */
.hpm-row,
.hpm-list-head {
    display: grid;
    grid-template-columns: 18px minmax(160px, 1.2fr) 92px minmax(140px, 1fr) 90px 100px;
    gap: 14px;
    align-items: center;
}

/*
    A read-only board renders no per-row controls, so the track they sat in goes too. Leaving it
    would reserve 100px of nothing down the right of every row -- and, because the header shares
    this definition, it has to be dropped from both at once or the two stop lining up.
*/
.hpm-list--readonly .hpm-row,
.hpm-list--readonly .hpm-list-head {
    grid-template-columns: 18px minmax(160px, 1.2fr) 92px minmax(140px, 1fr) 90px;
}

.hpm-list-head {
    padding: 2px 16px 6px;
    font-family: var(--hpm-mono);
    font-size: 10px;
    letter-spacing: 0.1em;
    color: var(--hpm-faint);
}

.hpm-list-head .hpm-right {
    text-align: right;
}

.hpm-row {
    padding: 12px 16px;
    background: var(--hpm-panel);
    border: 1px solid var(--hpm-line);
    border-left: 3px solid var(--hpm-status);
    border-radius: 10px;
    cursor: pointer;
    text-align: left;
    width: 100%;
    font: inherit;
    color: inherit;
    animation: hpm-in 0.3s ease both;
}

.hpm-row:hover {
    background: var(--hpm-panel2);
}

.hpm-row:focus-visible {
    outline: 2px solid var(--hpm-status);
    outline-offset: 2px;
}

.hpm-row--selected {
    border-color: var(--hpm-line2);
}

.hpm-row--paused {
    opacity: 0.55;
}

.hpm-row-name {
    min-width: 0;
}

.hpm-row-title,
.hpm-row-sub {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.hpm-row-title {
    font-weight: 600;
    font-size: 14px;
}

.hpm-row-sub {
    font-family: var(--hpm-mono);
    font-size: 10.5px;
    color: var(--hpm-faint);
    margin-top: 2px;
}

.hpm-rate {
    font-family: var(--hpm-mono);
    font-size: 16px;
    font-weight: 600;
}

.hpm-rate--paused {
    color: var(--hpm-faint);
}

.hpm-rate-unit {
    font-family: var(--hpm-mono);
    font-size: 9.5px;
    color: var(--hpm-faint);
    display: block;
}

.hpm-blips {
    display: flex;
    align-items: center;
    gap: 4px;
    height: 26px;
    border-bottom: 1px solid var(--hpm-line);
}

.hpm-blip {
    flex: 1;
    max-width: 7px;
    background: var(--hpm-status);
    border-radius: 1px;
    align-self: flex-end;
}

/* Height carries severity too, so a failing run reads without relying on colour. */
.hpm-blip--ok { height: 9px; }
.hpm-blip--warn { height: 18px; }
.hpm-blip--crit { height: 24px; }

.hpm-blips-empty {
    font-family: var(--hpm-mono);
    font-size: 10px;
    color: var(--hpm-faint);
    align-self: center;
}

.hpm-time {
    font-family: var(--hpm-mono);
    font-size: 11px;
    color: var(--hpm-muted);
    text-align: right;
    white-space: nowrap;
}

.hpm-row-actions {
    display: flex;
    gap: 4px;
    justify-content: flex-end;
}

.hpm-icon-btn {
    width: 26px;
    height: 26px;
    border: 1px solid var(--hpm-line);
    border-radius: 6px;
    background: transparent;
    color: var(--hpm-muted);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
}

.hpm-icon-btn svg {
    width: 11px;
    height: 11px;
}

.hpm-icon-btn:hover {
    color: var(--hpm-text);
    border-color: var(--hpm-line2);
}

.hpm-icon-btn--run:hover {
    color: var(--hpm-warn);
}

.hpm-empty {
    padding: 40px;
    text-align: center;
    color: var(--hpm-muted);
    border: 1px dashed var(--hpm-line2);
    border-radius: 10px;
    font-size: 13px;
}

.hpm-skeleton {
    height: 52px;
    border-radius: 10px;
    background: var(--hpm-panel);
    border: 1px solid var(--hpm-line);
    animation: hpm-pulse 1.4s ease-in-out infinite;
}

/* ------------------------------------------------------------ side panel -- */

.hpm-side {
    position: sticky;
    top: 18px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.hpm-panel {
    background: var(--hpm-panel);
    border: 1px solid var(--hpm-line);
    border-radius: 12px;
    overflow: hidden;
}

.hpm-panel-head {
    padding: 16px 18px 14px;
    border-bottom: 1px solid var(--hpm-line);
}

.hpm-eyebrow {
    font-family: var(--hpm-mono);
    font-size: 10px;
    letter-spacing: 0.12em;
    color: var(--hpm-faint);
    margin-bottom: 6px;
}

.hpm-sel-title {
    display: flex;
    align-items: center;
    gap: 10px;
}

.hpm-sel-name {
    font-weight: 700;
    font-size: 17px;
}

.hpm-tag {
    font-family: var(--hpm-mono);
    font-size: 10px;
    letter-spacing: 0.08em;
    padding: 3px 8px;
    border-radius: 4px;
    color: var(--hpm-status);
    border: 1px solid var(--hpm-status);
    white-space: nowrap;
}

.hpm-sel-fullname {
    font-family: var(--hpm-mono);
    font-size: 10px;
    color: var(--hpm-faint);
    margin-top: 6px;
    word-break: break-all;
}

.hpm-panel-body {
    padding: 16px 18px;
}

.hpm-stats {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 8px;
    margin-bottom: 14px;
}

.hpm-stat {
    border: 1px solid var(--hpm-line);
    border-radius: 8px;
    padding: 9px 10px;
}

.hpm-stat-label {
    font-family: var(--hpm-mono);
    font-size: 9px;
    letter-spacing: 0.1em;
    color: var(--hpm-faint);
}

.hpm-stat-value {
    font-family: var(--hpm-mono);
    font-size: 15px;
    font-weight: 600;
    margin-top: 3px;
}

.hpm-message {
    font-size: 12.5px;
    line-height: 1.55;
    padding: 10px 12px;
    border-radius: 8px;
    background: var(--hpm-status-bg);
    color: var(--hpm-status);
    border-left: 2px solid var(--hpm-status);
    margin-bottom: 14px;
    overflow-wrap: anywhere;
}

.hpm-sel-actions {
    display: flex;
    gap: 6px;
    margin-bottom: 16px;
}

.hpm-sel-btn {
    flex: 1;
    padding: 8px 0;
    border: 1px solid var(--hpm-line2);
    border-radius: 7px;
    background: transparent;
    color: var(--hpm-text);
    font-family: var(--hpm-mono);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.06em;
    cursor: pointer;
}

.hpm-sel-btn:hover {
    background: var(--hpm-panel2);
}

.hpm-sel-btn--primary {
    border: none;
    background: var(--hpm-ok);
    color: var(--hpm-bg);
}

.hpm-sel-btn--primary:hover {
    opacity: 0.88;
    background: var(--hpm-ok);
}

.hpm-sel-btn--reset {
    color: var(--hpm-warn);
}

.hpm-fields {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.hpm-field label {
    display: block;
    font-family: var(--hpm-mono);
    font-size: 9px;
    letter-spacing: 0.1em;
    color: var(--hpm-faint);
    margin-bottom: 5px;
}

.hpm-field select,
.hpm-field input {
    width: 100%;
    padding: 7px 8px;
    border: 1px solid var(--hpm-line);
    border-radius: 7px;
    background: var(--hpm-bg);
    color: var(--hpm-text);
    font-size: 12px;
    outline: none;
    font-family: var(--hpm-mono);
}

.hpm-field select:focus,
.hpm-field input:focus {
    border-color: var(--hpm-ok);
}

/* ------------------------------------------------------------- event log -- */

.hpm-log-head {
    display: flex;
    align-items: center;
    padding: 12px 18px;
    border-bottom: 1px solid var(--hpm-line);
}

.hpm-log-led {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--hpm-ok);
    animation: hpm-led 1.2s ease infinite;
}

.hpm-log-body {
    max-height: 300px;
    overflow-y: auto;
}

.hpm-log-empty {
    padding: 18px;
    font-size: 12px;
    color: var(--hpm-faint);
    text-align: center;
}

.hpm-event {
    display: flex;
    gap: 10px;
    align-items: baseline;
    padding: 8px 18px;
    border-bottom: 1px solid var(--hpm-line);
    font-size: 12px;
}

.hpm-event-time,
.hpm-event-tag {
    font-family: var(--hpm-mono);
    font-size: 10.5px;
    white-space: nowrap;
}

.hpm-event-time {
    color: var(--hpm-faint);
}

.hpm-event-tag {
    color: var(--hpm-status, var(--hpm-faint));
}

.hpm-event-text {
    color: var(--hpm-muted);
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ------------------------------------------------------------ responsive -- */

@media (max-width: 1100px) {
    /* The detail panel drops below the list; the rail keeps its column. */
    .hpm-body {
        grid-template-columns: var(--hpm-nav-w) minmax(0, 1fr);
    }

    .hpm-side {
        position: static;
        grid-column: 1 / -1;
    }
}

@media (max-width: 820px) {
    .hpm-list-head {
        display: none;
    }

    /* Below this the six-column grid cannot hold. The row folds to name and controls, and the
       sparkline is dropped rather than squeezed into something unreadable. */
    .hpm-row {
        grid-template-columns: 18px minmax(0, 1fr) auto;
    }

    .hpm-row .hpm-rate-cell,
    .hpm-row .hpm-blips,
    .hpm-row .hpm-blips-empty,
    .hpm-row .hpm-time {
        display: none;
    }

    .hpm-header-inner,
    .hpm-trace-wrap,
    .hpm-body {
        padding-left: 14px;
        padding-right: 14px;
    }

    .hpm-search input {
        width: 110px;
    }
}

/* ------------------------------------------------------------- animation -- */

@keyframes hpm-scroll {
    from { transform: translateX(0); }
    to { transform: translateX(-220px); }
}

@keyframes hpm-led {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.35; }
}

@keyframes hpm-in {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes hpm-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

/* Motion here is decorative -- a scrolling trace and blinking LEDs -- so it is dropped for anyone
   who has asked for less of it. */
@media (prefers-reduced-motion: reduce) {
    .healthie-dashboard *,
    .healthie-dashboard *::before,
    .healthie-dashboard *::after {
        animation: none !important;
        transition: none !important;
    }
}

/* --------------------------------------------------------------------------
 * Toolbar: how the list is laid out, and whether it is grouped.
 * ---------------------------------------------------------------------- */

.hpm-toolbar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 16px 8px;
}

.hpm-viewswitch {
    display: flex;
    gap: 4px;
}

.hpm-btn--sm {
    padding: 4px 9px;
    font-size: 10px;
}

.hpm-btn--icon.hpm-btn--sm {
    width: 26px;
    height: 24px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.hpm-btn--icon.hpm-btn--sm svg {
    width: 12px;
    height: 12px;
}

/* The on state of a toggle, so which view is active is shown rather than implied. */
.hpm-btn--on {
    border-color: var(--hpm-ok);
    color: var(--hpm-ok);
    background: var(--hpm-ok-bg);
}

/* --------------------------------------------------------------------------
 * Tags.
 * ---------------------------------------------------------------------- */

.hpm-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-left: 6px;
    padding: 1px 6px;
    border: 1px solid var(--hpm-line2);
    border-radius: 999px;
    background: var(--hpm-panel2);
    color: var(--hpm-muted);
    font-family: var(--hpm-mono);
    font-size: 9.5px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    white-space: nowrap;
}

.hpm-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 6px 0 8px;
}

.hpm-chips .hpm-chip {
    margin-left: 0;
}

.hpm-chip--editable {
    padding-right: 2px;
}

.hpm-chips-empty {
    font-size: 11px;
    color: var(--hpm-faint);
}

.hpm-chip-x {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 13px;
    height: 13px;
    padding: 0;
    border: none;
    border-radius: 999px;
    background: transparent;
    color: var(--hpm-faint);
    cursor: pointer;
}

.hpm-chip-x svg {
    width: 9px;
    height: 9px;
}

.hpm-chip-x:hover {
    background: var(--hpm-crit-bg);
    color: var(--hpm-crit);
}

.hpm-tags-editor {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--hpm-line);
}

.hpm-tag-add {
    display: flex;
    gap: 6px;
}

.hpm-tag-add input {
    flex: 1;
    min-width: 0;
    padding: 6px 8px;
    border: 1px solid var(--hpm-line);
    border-radius: 6px;
    background: var(--hpm-bg);
    color: var(--hpm-text);
    font-family: var(--hpm-mono);
    font-size: 11.5px;
    outline: none;
}

.hpm-tag-add input:focus {
    border-color: var(--hpm-ok);
}

.hpm-select {
    padding: 6px 8px;
    border: 1px solid var(--hpm-line);
    border-radius: 6px;
    background: var(--hpm-bg);
    color: var(--hpm-text);
    font-family: var(--hpm-mono);
    font-size: 11px;
    letter-spacing: 0.04em;
    outline: none;
    cursor: pointer;
}

.hpm-select:focus {
    border-color: var(--hpm-ok);
}

.hpm-field--inline {
    display: flex;
    align-items: center;
}

/* --------------------------------------------------------------------------
 * Pinning.
 * ---------------------------------------------------------------------- */

.hpm-pin-mark {
    display: inline-block;
    width: 10px;
    height: 10px;
    margin-right: 5px;
    color: var(--hpm-status, var(--hpm-muted));
    vertical-align: -1px;
}

.hpm-icon-btn--on {
    border-color: var(--hpm-status, var(--hpm-ok));
    color: var(--hpm-status, var(--hpm-ok));
    background: var(--hpm-status-bg, var(--hpm-ok-bg));
}

/* --------------------------------------------------------------------------
 * Tag groups.
 * ---------------------------------------------------------------------- */

.hpm-group {
    margin-bottom: 10px;
    border: 1px solid var(--hpm-line);
    border-radius: 8px;
    background: var(--hpm-panel);
    overflow: hidden;
}

.hpm-group-head {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 9px 12px;
    border: none;
    /* Carries the worst health inside it, faint enough that the rows stay the loudest thing. */
    border-left: 3px solid var(--hpm-status, var(--hpm-line2));
    background: var(--hpm-panel2);
    color: var(--hpm-text);
    font-family: var(--hpm-mono);
    font-size: 11px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    text-align: left;
    cursor: pointer;
}

.hpm-group-head:hover {
    background: var(--hpm-status-bg, var(--hpm-panel2));
}

.hpm-group-chevron {
    display: block;
    width: 12px;
    height: 12px;
    color: var(--hpm-muted);
    transition: transform 0.15s ease;
}

.hpm-group-chevron--open {
    transform: rotate(90deg);
}

.hpm-group-name {
    color: var(--hpm-text);
    font-weight: 600;
}

.hpm-group-count {
    padding: 1px 6px;
    border-radius: 999px;
    background: var(--hpm-bg);
    color: var(--hpm-muted);
    font-size: 9.5px;
}

.hpm-group-stats {
    display: flex;
    gap: 4px;
}

.hpm-gs {
    min-width: 20px;
    padding: 1px 5px;
    border-radius: 4px;
    font-size: 10px;
    text-align: center;
}

.hpm-gs--ok { background: var(--hpm-ok-bg); color: var(--hpm-ok); }
.hpm-gs--warn { background: var(--hpm-warn-bg); color: var(--hpm-warn); }
.hpm-gs--crit { background: var(--hpm-crit-bg); color: var(--hpm-crit); }

.hpm-group-body {
    padding: 8px;
}

.hpm-group-body .hpm-row {
    margin-bottom: 6px;
}

.hpm-group-body .hpm-row:last-child {
    margin-bottom: 0;
}

/* --------------------------------------------------------------------------
 * Card view. The markup is the row's; only the shape changes.
 * ---------------------------------------------------------------------- */

.hpm-list--cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
    gap: 10px;
    align-content: start;
}

/* The toolbar, the empty state and a group are bands, not cells. */
.hpm-list--cards > .hpm-toolbar,
.hpm-list--cards > .hpm-empty,
.hpm-list--cards > .hpm-group,
.hpm-list--cards > .hpm-skeleton {
    grid-column: 1 / -1;
}

.hpm-list--cards .hpm-row,
.hpm-group-body--cards .hpm-row {
    grid-template-columns: 18px 1fr;
    grid-template-areas:
        "led name"
        ". rate"
        ". blips"
        ". time"
        ". actions";
    gap: 7px 10px;
    align-items: start;
    margin-bottom: 0;
}

/* Same as above: no controls to lay out, so the card loses the row that held them. */
.hpm-list--readonly.hpm-list--cards .hpm-row,
.hpm-list--readonly .hpm-group-body--cards .hpm-row {
    grid-template-areas:
        "led name"
        ". rate"
        ". blips"
        ". time";
}

.hpm-list--cards .hpm-row-name,
.hpm-group-body--cards .hpm-row-name { grid-area: name; }

.hpm-list--cards .hpm-rate-cell,
.hpm-group-body--cards .hpm-rate-cell { grid-area: rate; justify-self: start; }

.hpm-list--cards .hpm-blips,
.hpm-list--cards .hpm-blips-empty,
.hpm-group-body--cards .hpm-blips,
.hpm-group-body--cards .hpm-blips-empty { grid-area: blips; }

.hpm-list--cards .hpm-time,
.hpm-group-body--cards .hpm-time { grid-area: time; text-align: left; }

.hpm-list--cards .hpm-row-actions,
.hpm-group-body--cards .hpm-row-actions { grid-area: actions; justify-content: flex-start; }

.hpm-list--cards .hpm-row-sub,
.hpm-group-body--cards .hpm-row-sub {
    white-space: normal;
}

.hpm-group-body--cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
    gap: 8px;
}

/* --------------------------------------------------------------------------
 * Legend and about.
 * ---------------------------------------------------------------------- */

.hpm-legend-group {
    margin-bottom: 14px;
}

.hpm-legend-group:last-child {
    margin-bottom: 0;
}

.hpm-legend {
    display: grid;
    grid-template-columns: 14px 1fr;
    gap: 7px 8px;
    margin: 6px 0 0;
    font-size: 11.5px;
    color: var(--hpm-muted);
}

.hpm-legend dt {
    display: flex;
    align-items: center;
    height: 100%;
}

.hpm-legend dd {
    margin: 0;
}

.hpm-legend b {
    color: var(--hpm-text);
    font-weight: 600;
}

.hpm-key {
    display: block;
    width: 9px;
    height: 9px;
    border-radius: 50%;
}

.hpm-ok-key { background: var(--hpm-ok); }
.hpm-warn-key { background: var(--hpm-warn); }
.hpm-crit-key { background: var(--hpm-crit); }
.hpm-paused-key { background: var(--hpm-paused); }

.hpm-about-list {
    margin: 6px 0 0;
    padding-left: 15px;
    font-size: 11.5px;
    line-height: 1.7;
    color: var(--hpm-muted);
}

.hpm-about-list b {
    color: var(--hpm-text);
    font-weight: 600;
}

.hpm-about-text {
    margin: 6px 0 8px;
    font-size: 11.5px;
    line-height: 1.6;
    color: var(--hpm-muted);
}

.hpm-about-links {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.hpm-about-links a {
    padding: 4px 9px;
    border: 1px solid var(--hpm-line2);
    border-radius: 6px;
    color: var(--hpm-muted);
    font-family: var(--hpm-mono);
    font-size: 10.5px;
    text-decoration: none;
}

.hpm-about-links a:hover {
    border-color: var(--hpm-ok);
    color: var(--hpm-ok);
}

.hpm-dot {
    color: var(--hpm-ok);
}

/* --------------------------------------------------------------------------
 * Scrollbars. Styled rather than left to the platform, which paints a wide
 * light-grey bar straight down the side of a dark panel.
 * ---------------------------------------------------------------------- */

/* The board's own scrollbar; scrollbar-width and -color are set on the root rule. A little wider
   than the panels' because it runs the full height of the page. */
.healthie-dashboard::-webkit-scrollbar {
    width: 12px;
}

.healthie-dashboard::-webkit-scrollbar-track {
    background: transparent;
}

.healthie-dashboard::-webkit-scrollbar-thumb {
    border: 3px solid transparent;
    border-radius: 999px;
    background: var(--hpm-line2);
    background-clip: padding-box;
}

.healthie-dashboard::-webkit-scrollbar-thumb:hover {
    background: var(--hpm-faint);
    background-clip: padding-box;
}

.hpm-log-body {
    scrollbar-width: thin;
    scrollbar-color: var(--hpm-line2) transparent;
}

.hpm-log-body::-webkit-scrollbar {
    width: 8px;
}

.hpm-log-body::-webkit-scrollbar-track {
    background: transparent;
}

.hpm-log-body::-webkit-scrollbar-thumb {
    border: 2px solid transparent;
    border-radius: 999px;
    background: var(--hpm-line2);
    background-clip: padding-box;
}

.hpm-log-body::-webkit-scrollbar-thumb:hover {
    background: var(--hpm-faint);
    background-clip: padding-box;
}

/* --------------------------------------------------------------------------
 * Someone who has asked their system for less motion should not be handed a
 * scrolling heartbeat and a blinking LED.
 * ---------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
    .healthie-dashboard *,
    .healthie-dashboard *::before,
    .healthie-dashboard *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
    }
}

/* --------------------------------------------------------------------------
 * Legend and about popover. Hangs off the ? in the header: read once, then in
 * the way forever if it were given a permanent panel.
 * ---------------------------------------------------------------------- */

.hpm-backdrop {
    position: fixed;
    inset: 0;
    z-index: 40;
    background: rgba(0, 0, 0, 0.45);
}

.hpm-popover {
    position: fixed;
    top: 58px;
    right: 26px;
    z-index: 50;
    width: 370px;
    max-width: calc(100vw - 32px);
    max-height: calc(100vh - 80px);
    overflow-y: auto;
    border: 1px solid var(--hpm-line2);
    border-radius: 10px;
    background: var(--hpm-panel);
    box-shadow: 0 18px 48px rgba(0, 0, 0, 0.5);
    animation: hpm-pop 0.12s ease-out;
}

.hpm-popover-head {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 12px 10px 14px;
    border-bottom: 1px solid var(--hpm-line);
}

.hpm-popover-body {
    padding: 14px;
}

.hpm-popover {
    scrollbar-width: thin;
    scrollbar-color: var(--hpm-line2) transparent;
}

.hpm-popover::-webkit-scrollbar {
    width: 8px;
}

.hpm-popover::-webkit-scrollbar-track {
    background: transparent;
}

.hpm-popover::-webkit-scrollbar-thumb {
    border: 2px solid transparent;
    border-radius: 999px;
    background: var(--hpm-line2);
    background-clip: padding-box;
}

@keyframes hpm-pop {
    from { opacity: 0; transform: translateY(-6px); }
    to { opacity: 1; transform: translateY(0); }
}

/* A group is where a checker lives and a tag is a label on it, so they must not read as the same
   thing sitting side by side. */
.hpm-chip--group {
    border-color: var(--hpm-line2);
    background: transparent;
    color: var(--hpm-text);
    font-weight: 600;
}

.hpm-group-select {
    width: 100%;
    margin-top: 6px;
}

/* --------------------------------------------------------------------------
 * Density. The selected checker's controls are set once and then left alone,
 * while the event log is read continuously -- so the controls give up their
 * slack and the log takes it.
 * ---------------------------------------------------------------------- */

.hpm-side .hpm-panel-body {
    padding: 12px 14px 14px;
}

.hpm-stats {
    gap: 6px;
    margin-bottom: 8px;
}

.hpm-stat {
    padding: 7px 9px;
}

.hpm-message {
    margin-bottom: 8px;
    padding: 8px 10px;
}

.hpm-sel-actions {
    gap: 5px;
    margin-bottom: 8px;
}

.hpm-sel-btn {
    padding: 7px 10px;
}

.hpm-fields {
    gap: 8px;
}

.hpm-tags-editor {
    margin-top: 9px;
    padding-top: 9px;
}

.hpm-side .hpm-panel-head {
    padding: 11px 14px 9px;
}

/* Roughly twice what it had, which is the point of the density above. */
.hpm-log-body {
    max-height: 460px;
}

.hpm-log-expand {
    width: 22px;
    height: 22px;
    margin-left: 8px;
}

.hpm-log-expand svg {
    width: 10px;
    height: 10px;
}

/* --------------------------------------------------------------------------
 * The event log at full size.
 * ---------------------------------------------------------------------- */

.hpm-modal {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 50;
    display: flex;
    flex-direction: column;
    width: min(980px, calc(100vw - 48px));
    height: min(720px, calc(100vh - 64px));
    border: 1px solid var(--hpm-line2);
    border-radius: 10px;
    background: var(--hpm-panel);
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.55);
    animation: hpm-modal-in 0.12s ease-out;
}

.hpm-modal-body {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--hpm-line2) transparent;
}

.hpm-modal-body::-webkit-scrollbar {
    width: 8px;
}

.hpm-modal-body::-webkit-scrollbar-track {
    background: transparent;
}

.hpm-modal-body::-webkit-scrollbar-thumb {
    border: 2px solid transparent;
    border-radius: 999px;
    background: var(--hpm-line2);
    background-clip: padding-box;
}

.hpm-modal-note {
    font-family: var(--hpm-mono);
    font-size: 10px;
    letter-spacing: 0.06em;
    color: var(--hpm-faint);
    text-transform: uppercase;
}

.hpm-log-table {
    width: 100%;
    border-collapse: collapse;
    font-family: var(--hpm-mono);
    font-size: 11.5px;
}

.hpm-log-table thead th {
    position: sticky;
    top: 0;
    z-index: 1;
    padding: 8px 14px;
    border-bottom: 1px solid var(--hpm-line);
    background: var(--hpm-panel2);
    color: var(--hpm-faint);
    font-size: 9.5px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-align: left;
}

.hpm-log-table td {
    padding: 7px 14px;
    border-bottom: 1px solid var(--hpm-line);
    vertical-align: top;
}

.hpm-log-table tbody tr:hover {
    background: var(--hpm-status-bg, var(--hpm-panel2));
}

.hpm-log-table td:first-child {
    white-space: nowrap;
    color: var(--hpm-faint);
}

.hpm-log-table td:nth-child(2) {
    white-space: nowrap;
}

/* Wraps rather than truncating: the sidebar clips a message to a line, and reading the whole of
   one is the reason to open this. */
.hpm-log-detail {
    width: 100%;
    color: var(--hpm-text);
    line-height: 1.5;
    white-space: normal;
    word-break: break-word;
}

@keyframes hpm-modal-in {
    from { opacity: 0; transform: translate(-50%, calc(-50% - 6px)); }
    to { opacity: 1; transform: translate(-50%, -50%); }
}

/* ---------------------------------------------------------------------------------------------
   Panels that appear only when a feature package is installed: leadership, alerts, and the
   explanation. Built from the same variables as everything above, so they inherit both themes and
   need no colours of their own.
   --------------------------------------------------------------------------------------------- */

.hpm-replica {
    padding: 4px 9px;
    border: 1px solid var(--hpm-line2);
    border-radius: 999px;
    font-family: var(--hpm-mono);
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.08em;
    white-space: nowrap;
}

.hpm-replica--leader {
    color: var(--hpm-ok);
    border-color: var(--hpm-ok);
    background: var(--hpm-ok-bg);
}

/* A follower is not a fault, so it reads as information rather than as a warning. */
.hpm-replica--follower {
    color: var(--hpm-faint);
}

.hpm-btn--alerts-dropped {
    color: var(--hpm-crit);
    border-color: var(--hpm-crit);
}

/* ---------------------------------------------------------------------------
   Side menu

   A rail rather than a drawer, and no JavaScript, because this package ships
   without any: an overlay drawer needs a backdrop and a focus trap to be
   honest about keyboard use, and neither is doable in CSS alone. Collapsed it
   keeps its icons and its toggle, so nothing becomes unreachable and the page
   does not reflow onto a different set of controls.
   --------------------------------------------------------------------------- */

.hpm-nav {
    position: sticky;
    top: 14px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    padding: 8px;
    border: 1px solid var(--hpm-line);
    border-radius: 8px;
    background: var(--hpm-panel);
}

.hpm-nav-toggle {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 8px 9px;
    border: 0;
    border-radius: 6px;
    background: none;
    color: var(--hpm-faint);
    font: inherit;
    font-size: 11.5px;
    letter-spacing: 0.09em;
    cursor: pointer;
}

.hpm-nav-toggle:hover {
    color: var(--hpm-text);
    background: var(--hpm-line);
}

.hpm-nav-burger {
    flex: 0 0 auto;
    width: 16px;
    height: 16px;
}

.hpm-nav-heading {
    margin: 12px 0 4px;
    padding: 0 9px;
    color: var(--hpm-faint);
    font-size: 9.5px;
    letter-spacing: 0.16em;
}

.hpm-nav-item {
    display: flex;
    align-items: center;
    gap: 9px;
    width: 100%;
    padding: 7px 9px;
    border: 0;
    border-left: 2px solid transparent;
    border-radius: 0 6px 6px 0;
    background: none;
    color: var(--hpm-text);
    font: inherit;
    font-size: 11.5px;
    letter-spacing: 0.05em;
    text-align: left;
    cursor: pointer;
}

.hpm-nav-item:hover {
    background: var(--hpm-line);
}

.hpm-nav-item--current {
    border-left-color: var(--hpm-accent, var(--hpm-ok));
    background: var(--hpm-line);
}

.hpm-nav-dot {
    flex: 0 0 auto;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--hpm-faint);
}

.hpm-nav-dot.hpm-ok { background: var(--hpm-ok); }
.hpm-nav-dot.hpm-warn { background: var(--hpm-warn); }
.hpm-nav-dot.hpm-crit { background: var(--hpm-crit); }

.hpm-nav-text {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.hpm-nav-count {
    flex: 0 0 auto;
    color: var(--hpm-faint);
    font-size: 10px;
}

.hpm-nav-count--warn {
    color: var(--hpm-crit);
}

/* Collapsed: the labels go, the icons and the toggle stay. */
.hpm-body--nav-collapsed .hpm-nav-text,
.hpm-body--nav-collapsed .hpm-nav-count,
.hpm-body--nav-collapsed .hpm-nav-label,
.hpm-body--nav-collapsed .hpm-nav-heading {
    display: none;
}

.hpm-body--nav-collapsed .hpm-nav-item,
.hpm-body--nav-collapsed .hpm-nav-toggle {
    justify-content: center;
    padding-inline: 0;
}

.hpm-body--nav-collapsed .hpm-nav-dot {
    width: 9px;
    height: 9px;
}

/* The cron box sits under the interval and threshold pair, full width. */
.hpm-field--cron {
    margin-top: 10px;
}

.hpm-field--cron input {
    font-family: var(--hpm-mono);
}

.hpm-field--cron input[aria-invalid="true"] {
    border-color: var(--hpm-crit);
}

.hpm-field-hint,
.hpm-field-error {
    margin-top: 5px;
    font-size: 10.5px;
    line-height: 1.45;
}

.hpm-field-hint {
    color: var(--hpm-faint);
}

.hpm-field-hint code {
    font-family: var(--hpm-mono);
    color: var(--hpm-muted);
}

.hpm-field-error {
    color: var(--hpm-crit);
}

/* A cron expression is text, not a number, so it does not get the big numeric treatment. */
.hpm-rate--cron {
    font-family: var(--hpm-mono);
    font-size: 11px;
    letter-spacing: 0;
}

/*
 * A disabled control that still looks live invites the click it will ignore -- which is the same
 * complaint as the interval picker silently doing nothing, moved one step later. The browser's own
 * 0.7 opacity is not enough against this palette.
 */
.hpm-field select:disabled,
.hpm-field input:disabled {
    color: var(--hpm-faint);
    background: var(--hpm-panel2);
    border-style: dashed;
    cursor: not-allowed;
}

.hpm-field:has(select:disabled) > label,
.hpm-field:has(input:disabled) > label {
    color: var(--hpm-faint);
}
/*
 * Below this a rail costs more width than it earns, so it becomes a strip above the list: one
 * horizontally scrolling row of the same items. Still every entry, still no JavaScript, and nothing
 * overlays the content -- which is what an off-canvas drawer would need a focus trap to do honestly.
 */
@media (max-width: 820px) {
    .hpm-body,
    .hpm-body--nav-collapsed {
        grid-template-columns: minmax(0, 1fr);
    }

    .hpm-nav {
        position: static;
        padding: 6px;
    }

    /* The items live in this wrapper, so this is what has to become the row. */
    .hpm-nav-body {
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 6px;
        overflow-x: auto;
        scrollbar-width: thin;
        scrollbar-color: var(--hpm-line2) transparent;
    }

    .hpm-nav-toggle,
    .hpm-nav-heading {
        display: none;
    }

    .hpm-nav-item {
        width: auto;
        flex: 0 0 auto;
        border-left: 0;
        border-bottom: 2px solid transparent;
        border-radius: 6px;
    }

    .hpm-nav-item--current {
        border-left-color: transparent;
        border-bottom-color: var(--hpm-accent, var(--hpm-ok));
    }

    /* The labels come back here even when the rail was left collapsed on a wider screen. */
    .hpm-body--nav-collapsed .hpm-nav-text,
    .hpm-body--nav-collapsed .hpm-nav-count {
        display: inline;
    }
}

/* ---------------------------------------------------------------------------
   Views

   Alerts and metrics render in the middle column, in place of the checker list,
   rather than as a band above it. The band displaced every row on the page when
   it opened and had nowhere to sit once the side menu existed.
   --------------------------------------------------------------------------- */

.hpm-list--hidden {
    display: none;
}

.hpm-view {
    display: flex;
    flex-direction: column;
    gap: 14px;
    min-width: 0;
    padding: 16px 18px 20px;
    border: 1px solid var(--hpm-line);
    border-radius: 8px;
    background: var(--hpm-panel);
}

.hpm-view-head {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    flex-wrap: wrap;
}

.hpm-view-title {
    margin: 0;
    font-family: var(--hpm-mono);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.14em;
}

.hpm-view-subtitle {
    margin: 6px 0 0;
    color: var(--hpm-faint);
    font-family: var(--hpm-mono);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.16em;
}

.hpm-view-sub,
.hpm-view-note {
    margin: 4px 0 0;
    color: var(--hpm-muted);
    font-size: 11.5px;
    line-height: 1.5;
}

.hpm-view-sub code,
.hpm-view-note code,
.hpm-sink-note code {
    font-family: var(--hpm-mono);
    font-size: 10.5px;
    color: var(--hpm-text);
}

.hpm-view-empty {
    padding: 26px 4px;
    color: var(--hpm-faint);
    font-size: 12px;
    text-align: center;
}

.hpm-view-section {
    margin-top: 6px;
    padding-top: 14px;
    border-top: 1px solid var(--hpm-line);
}

.hpm-view-actions {
    display: flex;
    gap: 8px;
    margin-top: 12px;
    flex-wrap: wrap;
}

/* ------------------------------------------------------------------ sinks -- */

.hpm-sinks {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 8px;
}

.hpm-sink {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    padding: 9px 11px;
    border: 1px solid var(--hpm-line);
    border-left: 2px solid var(--hpm-status, var(--hpm-faint));
    border-radius: 6px;
    background: var(--hpm-bg);
}

.hpm-sink--ok { --hpm-status: var(--hpm-ok); }
.hpm-sink--failing { --hpm-status: var(--hpm-crit); }
.hpm-sink--none { --hpm-status: var(--hpm-warn); }

.hpm-sink-dot {
    flex: 0 0 auto;
    width: 7px;
    height: 7px;
    margin-top: 4px;
    border-radius: 50%;
    background: var(--hpm-status);
}

.hpm-sink-body {
    min-width: 0;
}

.hpm-sink-name {
    font-family: var(--hpm-mono);
    font-size: 11.5px;
    letter-spacing: 0.05em;
}

.hpm-sink-note {
    margin-top: 3px;
    color: var(--hpm-muted);
    font-size: 10.5px;
    line-height: 1.5;
}

.hpm-sink-error {
    color: var(--hpm-crit);
}

/* ------------------------------------------------------------------ alerts -- */

.hpm-alert-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.hpm-alert {
    padding: 9px 12px;
    border: 1px solid var(--hpm-line);
    border-left: 3px solid var(--hpm-status, var(--hpm-faint));
    border-radius: 6px;
    background: var(--hpm-bg);
}

.hpm-alert--undelivered {
    background: var(--hpm-crit-bg);
}

.hpm-alert-main {
    display: flex;
    align-items: center;
    gap: 9px;
    flex-wrap: wrap;
}

.hpm-alert-name {
    font-size: 12.5px;
    font-weight: 600;
}

.hpm-alert-move {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.hpm-alert-arrow {
    color: var(--hpm-faint);
}

/* A health, as a chip, coloured by the health it names. */
.hpm-hchip {
    padding: 1px 6px;
    border-radius: 3px;
    color: var(--hpm-status);
    background: var(--hpm-status-bg);
    font-family: var(--hpm-mono);
    font-size: 9.5px;
    letter-spacing: 0.08em;
}

.hpm-alert-when {
    color: var(--hpm-faint);
    font-family: var(--hpm-mono);
    font-size: 10.5px;
    white-space: nowrap;
}

.hpm-alert-msg {
    margin-top: 5px;
    color: var(--hpm-muted);
    font-size: 11.5px;
    line-height: 1.5;
}

.hpm-pill {
    padding: 2px 7px;
    border-radius: 3px;
    color: var(--hpm-status, var(--hpm-faint));
    background: var(--hpm-status-bg, transparent);
    font-family: var(--hpm-mono);
    font-size: 9.5px;
    letter-spacing: 0.08em;
    white-space: nowrap;
}

.hpm-pill--crit { --hpm-status: var(--hpm-crit); --hpm-status-bg: var(--hpm-crit-bg); }

.hpm-pager {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding-top: 4px;
}

.hpm-pager-at {
    color: var(--hpm-faint);
    font-family: var(--hpm-mono);
    font-size: 10.5px;
    letter-spacing: 0.08em;
}

.hpm-check {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 10px;
    color: var(--hpm-muted);
    font-size: 11.5px;
}

/* ----------------------------------------------------------------- metrics -- */

.hpm-metrics {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 8px;
}

.hpm-metric {
    padding: 11px 13px;
    border: 1px solid var(--hpm-line);
    border-radius: 6px;
    background: var(--hpm-bg);
}

.hpm-metric--warn {
    border-color: var(--hpm-warn);
}

.hpm-metric-label {
    color: var(--hpm-faint);
    font-family: var(--hpm-mono);
    font-size: 9.5px;
    letter-spacing: 0.14em;
}

.hpm-metric-value {
    margin-top: 5px;
    font-family: var(--hpm-mono);
    font-size: 19px;
    font-weight: 600;
}