#blazor-error-ui {
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

#blazor-error-ui .dismiss {
    cursor: pointer;
    position: absolute;
    right: 0.75rem;
    top: 0.5rem;
}

:root {
    font-size: var(--rz-root-font-size);
    color-scheme: dark;
}

body {
    font-family: var(--rz-text-font-family);
    color: var(--rz-text-color);
    font-size: var(--rz-body-font-size);
    line-height: var(--rz-body-line-height);
    /* Shorthand + !important: clears Radzen standard-dark's body mesh image. */
    background: var(--bg) !important;
}

.rz-body {
    --rz-body-padding: 0;
}

a {
    color: var(--rz-link-color);
}

a:hover,
a:focus {
    color: var(--rz-link-hover-color);
}

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

.blazor-error-boundary::after {
    content: "An error has occurred."
}

.loading-progress {
    position: relative;
    display: block;
    width: 8rem;
    height: 8rem;
    margin: 20vh auto 1rem auto;
}

.loading-progress circle {
    fill: none;
    stroke: #e0e0e0;
    stroke-width: 0.6rem;
    transform-origin: 50% 50%;
    transform: rotate(-90deg);
}

.loading-progress circle:last-child {
    stroke: #1b6ec2;
    stroke-dasharray: calc(3.141 * var(--blazor-load-percentage, 0%) * 0.8), 500%;
    transition: stroke-dasharray 0.05s ease-in-out;
}

.loading-progress-text {
    position: absolute;
    text-align: center;
    font-weight: bold;
    inset: calc(20vh + 3.25rem) 0 auto 0.2rem;
}

.loading-progress-text:after {
    content: var(--blazor-load-percentage-text, "Loading");
}

/* Monitoring Status Indicators */
.status-indicator {
    display: inline-block;
    width: 9px;
    height: 9px;
    border-radius: 2px;
    flex-shrink: 0;
}

.status-up {
    background-color: var(--rz-success);
    box-shadow: 0 0 4px var(--rz-success);
}

.status-down {
    background-color: var(--rz-danger);
    box-shadow: 0 0 4px var(--rz-danger);
    animation: pulse-down 1.5s ease-in-out infinite;
}

.status-checking {
    background-color: var(--rz-warning);
}

.status-unknown {
    background-color: var(--rz-text-disabled-color);
    opacity: 0.7;
}

.status-not-monitored {
    background-color: transparent;
    border: 2px solid var(--rz-text-disabled-color);
    opacity: 0.6;
}

.status-disabled {
    background-color: var(--rz-text-disabled-color);
    opacity: 0.5;
}

@keyframes pulse-down {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.6; transform: scale(1.1); }
}

/* Self-updating "UPDATED hh:mm:ss" readout (LiveUpdatedAt) */
.live-updated {
    font: 500 11px/1 var(--font-mono);
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--ink-2);
    white-space: nowrap;
}

.live-updated__time {
    color: var(--ink);
}

/* Dashboard hero: [status cell + category tiles] | attention panel */
.hero-grid {
    display: grid;
    grid-template-columns: 1fr 360px;
    gap: 14px;
    margin-bottom: 16px;
}

@media (max-width: 1200px) {
    .hero-grid {
        grid-template-columns: 1fr;
    }
}

.hero-panel {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 6px;
    display: flex;
    flex-wrap: wrap;
    overflow: hidden;
}

/* Overall status cell */
.hero-status {
    flex: 3 1 300px;
    min-width: 280px;
    padding: 16px 20px;
    border-top: 2px solid var(--con-green);
    border-right: 1px solid var(--line);
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 13px;
}

.hero-status--degraded { border-top-color: var(--con-yellow); }
.hero-status--critical { border-top-color: var(--con-red); }

.hero-status__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.hero-status__readout {
    display: flex;
    align-items: baseline;
    gap: 10px;
}

.hero-status__count {
    font: 700 42px/1 var(--font-mono);
    color: var(--ink);
    letter-spacing: -2px;
}

.hero-status__count-total {
    color: var(--ink-3);
    font-weight: 600;
    font-size: 26px;
}

.hero-status__count-label {
    font: 600 10px/1 var(--font-mono);
    letter-spacing: 2px;
    color: var(--ink-2);
    padding-bottom: 4px;
}

.hero-status__segments {
    display: flex;
    gap: 3px;
    height: 9px;
}

.hero-status__segment {
    flex: 1;
    border-radius: 1px;
}

.hero-status__segment--up { background: var(--con-green); }
.hero-status__segment--down { background: var(--con-red); }
.hero-status__segment--unknown { background: rgba(255, 255, 255, .12); }

.hero-status__foot {
    font: 500 9px/1 var(--font-mono);
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--ink-3);
}

.hero-status__foot .down { color: var(--con-red); }

/* Category tiles (click = grid filter). --tile carries the accent. */
.cat-tile {
    all: unset;
    box-sizing: border-box;
    flex: 1 1 150px;
    min-width: 140px;
    padding: 16px 18px;
    border-top: 2px solid var(--tile, var(--con-primary));
    border-right: 1px solid var(--line);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 12px;
    cursor: pointer;
    transition: background 0.15s ease;
}

.cat-tile:last-of-type { border-right: none; }
.cat-tile:hover { background: color-mix(in srgb, var(--tile, var(--con-primary)) 4%, transparent); }
.cat-tile--active { background: color-mix(in srgb, var(--tile, var(--con-primary)) 9%, transparent); }
.cat-tile--devices { --tile: var(--con-primary); }
.cat-tile--containers { --tile: var(--con-sky); }
.cat-tile--services { --tile: var(--con-orange); }

.cat-tile__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.cat-tile__label {
    display: flex;
    align-items: center;
    gap: 7px;
    font: 600 9px/1 var(--font-mono);
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--ink-2);
}

.cat-tile__label .con-icon {
    color: var(--tile);
    font-size: 14px;
}

.cat-tile__count {
    font: 700 22px/1 var(--font-mono);
    color: var(--ink);
}

.cat-tile__count-total {
    color: var(--ink-3);
    font-size: 14px;
}

.cat-tile__bar {
    height: 6px;
    background: var(--inset);
    border-radius: 3px;
    overflow: hidden;
}

.cat-tile__bar-fill {
    display: block;
    height: 100%;
    transition: width 0.4s ease;
}

.cat-tile__chips {
    display: flex;
    flex-direction: column;
    gap: 5px;
    min-height: 27px;
}

.cat-tile__chip {
    display: flex;
    align-items: center;
    gap: 6px;
    font: 500 10px/1 var(--font-mono);
    color: var(--ink-2);
    white-space: nowrap;
}

.cat-tile__chip .con-icon {
    font-size: 12px;
}

/* Attention panel */
.attn-panel {
    background: var(--panel);
    border: 1px solid var(--line);
    border-top: 2px solid var(--con-orange);
    border-radius: 6px;
    padding: 18px;
    display: flex;
    flex-direction: column;
}

.attn-panel__title {
    font: 600 9.5px/1 var(--font-mono);
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--ink-2);
    margin-bottom: 14px;
}

.attn-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 9px;
}

.attn-row {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 9px 12px;
    background: var(--inset);
    border-left: 3px solid var(--line-2);
    border-radius: 3px;
    font-size: 12.5px;
    color: var(--ink);
    cursor: pointer;
    transition: background 0.15s ease;
}

.attn-row:hover { background: color-mix(in srgb, var(--con-primary) 6%, var(--inset)); }
.attn-row--static { cursor: default; }
.attn-row--danger { border-left-color: var(--con-red); }
.attn-row--warning { border-left-color: var(--con-yellow); }
.attn-row--info { border-left-color: var(--con-sky); }

.attn-row__icon {
    display: inline-flex;
    font-size: 15px;
    flex: none;
}

.attn-row--danger .attn-row__icon { color: var(--con-red); }
.attn-row--warning .attn-row__icon { color: var(--con-yellow); }
.attn-row--info .attn-row__icon { color: var(--con-sky); }

.attn-row__text {
    flex: 1;
    line-height: 1.35;
}

.attn-row__text .muted {
    color: var(--ink-2);
    font-size: 11px;
}

.attn-row__chevron {
    display: inline-flex;
    font-size: 14px;
    color: var(--ink-3);
}

.attn-empty {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: var(--con-green);
    padding: 20px 0;
}

.attn-empty__label {
    font: 600 10px/1 var(--font-mono);
    letter-spacing: 2px;
    text-transform: uppercase;
}

.attn-panel__footer {
    margin-top: auto;
    padding-top: 10px;
    text-align: right;
    font: 600 10px/1 var(--font-mono);
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--con-primary);
    text-decoration: none;
}

.attn-panel__footer:hover {
    color: color-mix(in srgb, var(--con-primary) 78%, white);
}

/* Monitoring charts toolbar */
.charts-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem 1.5rem;
    padding: 0.75rem 0;
    margin-bottom: 0.75rem;
}

.charts-toolbar__title {
    margin: 0;
    margin-right: auto;
}

.charts-toolbar__group {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
}

.charts-toolbar__control {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font: 600 9px/1 var(--font-mono);
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--ink-3);
}

.charts-toolbar__control .rz-dropdown {
    min-width: 70px;
    height: 28px;
    /* rz-dropdown is a clipping column flexbox; Radzen's label padding-block pushes
       the text below a 28px box — zero it and center instead */
    justify-content: center;
}

.charts-toolbar__control .rz-dropdown .rz-dropdown-label {
    padding-block: 0;
    line-height: normal;
}

.charts-toolbar__location-chips {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 0.25rem;
}

/* Location chips use the shared .filter-chip (console-tokens.css) */

/* Chart Size Options */
.chart-compact .rz-card,
.chart-compact .chart-card {
    padding: 0.5rem 0.65rem;
}

.chart-compact .rz-chart {
    height: 100px !important;
}

.chart-compact .rz-mb-2 {
    margin-bottom: 0.25rem !important;
}

.chart-large .rz-chart {
    height: 200px !important;
}

/* Compact badge for long status text (Proxmox info, etc.) */
.badge-compact {
    font-size: 0.65rem !important;
    padding: 0.15rem 0.4rem !important;
    white-space: nowrap;
}

/* Device detail tab strip: breathing room below the hero panel */
.device-tabs {
    margin-top: 16px;
}

/* Inset sub-cards for resource monitoring full-mode charts (console inner-card voice) */
.resource-chart-card {
    border: 1px solid var(--line);
    border-radius: 5px;
    padding: 0.75rem 0.85rem;
    background: var(--inset);
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.resource-chart-card__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
}

.resource-chart-card__title {
    font: 600 9px/1 var(--font-mono);
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: var(--ink-3);
}

.resource-chart-card__meta {
    font: 500 10px/1 var(--font-mono);
    color: var(--ink-2);
    white-space: nowrap;
}

/* Unified dashboard grid */
.unified-method-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font: 500 11px/1 var(--font-mono);
    color: var(--ink-2);
}

.unified-method-badge .rzi,
.unified-method-badge .con-icon {
    font-size: 0.85rem;
    line-height: 1;
}

.unified-icon-svg {
    display: inline-block;
    width: 0.85rem;
    height: 0.85rem;
    -webkit-mask-image: url('../images/proxmox.svg');
    mask-image: url('../images/proxmox.svg');
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    background-color: currentColor;
}

.unified-icon-label {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 0.75rem;
    color: var(--rz-text-disabled-color);
    line-height: 1;
    white-space: nowrap;
}

.unified-response {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font: 600 11.5px/1 var(--font-mono);
}

.unified-response .rzi,
.unified-response .con-icon {
    font-size: 0.85rem;
    line-height: 1;
}

.unified-response.response-good {
    color: var(--rz-success);
}

.unified-response.response-ok {
    color: var(--rz-warning);
}

.unified-response.response-slow {
    color: var(--rz-danger);
}

/* Chart card (console panel around MonitoringChart/ResourceMonitoringCharts) */
.chart-card {
    padding: 13px 15px;
    height: 100%;
    box-sizing: border-box;
}

.chart-card .rz-link {
    font: 600 12px/1.2 var(--font-mono);
}

/* Chart header */
.chart-header {
    font-size: 0.8rem;
}

.chart-header .rz-text-caption {
    font-size: 0.7rem;
}
/* ==========================================================================
   Shared hero shell — used by DeviceHero and ServiceHero. Not scoped so both
   components reuse the same class set.
   ========================================================================== */

.hero {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    padding: 20px;
    border-radius: 8px;
    background: var(--panel);
    border: 1px solid var(--line);
    border-top: 2px solid var(--hero-state, var(--con-primary));
}

.hero__top {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.hero__heading {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex: 1;
    min-width: 0;
    flex-wrap: wrap;
}

.hero__hostname {
    font-size: 24px;
    font-weight: 700;
    color: var(--ink);
    margin: 0;
    line-height: 1;
}

.hero__state {
    font: 600 9px/1 var(--font-mono);
    letter-spacing: 1.5px;
    text-transform: uppercase;
    padding: 5px 9px;
    border-radius: 3px;
    color: var(--state, var(--ink-3));
    background: color-mix(in srgb, var(--state, var(--ink-3)) 14%, transparent);
    border: 1px solid color-mix(in srgb, var(--state, var(--ink-3)) 40%, transparent);
}

.hero__state--up { --state: var(--con-green); }

.hero__state--down {
    --state: var(--con-red);
    animation: hero-state-pulse 1.8s ease-in-out infinite;
}

.hero__state--unknown { --state: var(--con-yellow); }

.hero__state--disabled { --state: rgba(255, 255, 255, 0.38); }

/* State drives the hero panel's top accent (CSS-only via :has) */
.hero:has(.hero__state--up) { --hero-state: var(--con-green); }
.hero:has(.hero__state--down) { --hero-state: var(--con-red); }
.hero:has(.hero__state--unknown) { --hero-state: var(--con-yellow); }
.hero:has(.hero__state--disabled) { --hero-state: var(--line-2); }

/* The hero's headline dot is round with a glow (table dots stay square) */
.hero__heading > .status-indicator {
    border-radius: 50%;
}

.hero__heading > .status-indicator.status-up { box-shadow: 0 0 10px var(--con-green); }
.hero__heading > .status-indicator.status-down { box-shadow: 0 0 10px var(--con-red); }

@keyframes hero-state-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.55; }
}

.hero__age {
    font: 500 10px/1 var(--font-mono);
    letter-spacing: 0.5px;
    color: var(--ink-3);
}

.hero__facts {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.hero__fact {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 10px;
    border-radius: 3px;
    font: 500 11px/1.4 var(--font-mono);
    color: var(--ink-2);
    background: var(--inset);
    border: 1px solid var(--line);
}

.hero__fact i,
.hero__fact .con-icon {
    font-size: 13px;
    color: var(--con-primary);
}

.hero__fact--mono {
    font-family: var(--font-mono);
}

.hero__type-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.hero__type-chip {
    display: inline-flex;
    flex-direction: column-reverse;
    align-items: center;
    justify-content: center;
    gap: 0.15rem;
    padding: 8px 12px;
    min-height: 2.6rem;
    border-radius: 4px;
    background: var(--panel-2);
    border: 1px solid var(--line);
}

.hero__type-chip-label {
    font: 600 8.5px/1 var(--font-mono);
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: var(--ink-3);
}

.hero__type-chip-value {
    font: 600 13px/1.1 var(--font-mono);
    color: var(--ink);
    font-variant-numeric: tabular-nums;
}

.hero__type-chip-pulse {
    width: 10px;
    height: 10px;
    margin: 3px;
    border-radius: 50%;
    background: var(--con-green);
    box-shadow: 0 0 0 0 color-mix(in srgb, var(--con-green) 60%, transparent);
    animation: heimdall-pulse 1.8s ease-out infinite;
}

@keyframes heimdall-pulse {
    0%   { box-shadow: 0 0 0 0 color-mix(in srgb, var(--con-green) 55%, transparent); }
    70%  { box-shadow: 0 0 0 6px transparent; }
    100% { box-shadow: 0 0 0 0 transparent; }
}

.hero__type-chip--ok      { background: color-mix(in srgb, var(--con-green) 10%, transparent);  border-color: color-mix(in srgb, var(--con-green) 30%, transparent); }
.hero__type-chip--warn    { background: color-mix(in srgb, var(--con-yellow) 10%, transparent); border-color: color-mix(in srgb, var(--con-yellow) 35%, transparent); }
.hero__type-chip--danger  { background: color-mix(in srgb, var(--con-red) 10%, transparent);  border-color: color-mix(in srgb, var(--con-red) 40%, transparent); }
.hero__type-chip--info    { background: color-mix(in srgb, var(--con-sky) 10%, transparent); border-color: color-mix(in srgb, var(--con-sky) 35%, transparent); }
.hero__type-chip--disabled {
    background: rgba(128, 128, 128, 0.08);
    border-color: rgba(128, 128, 128, 0.25);
    opacity: 0.8;
}

.hero__metrics {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    padding-top: 0.25rem;
    /* Reserve space for the StatusTimeline detail panel (rendered only when a bucket is selected).
       Without this, the hero collapses when no bucket is picked and expands when one is, which
       makes the HeimdallSpinner (full-page, 70vh) visibly shrink when loading completes. */
    min-height: 400px;
}

/* HeimdallSpinner FullPage mode defaults to min-height: 70vh (meant for actual route loads).
   Inside a hero or peek dialog, constrain it to match the populated hero's typical height so the
   dialog doesn't visibly shrink when loading finishes. Chained class selector outranks the
   HeimdallSpinner scoped rule's specificity without !important. */
.hero .heimdall-spinner.heimdall-spinner--full-page,
.peek .heimdall-spinner.heimdall-spinner--full-page {
    min-height: 420px;
}

.hero__stats-row {
    display: flex;
    gap: 2rem;
    flex-wrap: wrap;
}

.hero__stat {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.hero__stat-label {
    font: 600 8.5px/1 var(--font-mono);
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: var(--ink-3);
}

.hero__stat-value {
    font: 700 18px/1.2 var(--font-mono);
    color: var(--ink);
    font-variant-numeric: tabular-nums;
}

.hero__timeline {
    min-width: 0;
}

/* ---- Events & Help pages (console idiom) ---------------------------------- */

/* Unread marker: primary square dot */
.unread-dot {
    display: inline-block;
    width: 7px;
    height: 7px;
    border-radius: 1px;
    background: var(--con-primary);
    flex: none;
}

/* Standalone intro paragraph under a console-page-head */
.help-intro {
    font-size: 13.5px;
    line-height: 1.6;
    color: var(--ink-2);
    max-width: 860px;
    margin: 0 0 18px;
}

.help-intro strong {
    color: var(--ink);
    font-weight: 600;
}

/* Console prose — readable body content inside panels (help pages) */
.console-prose p {
    margin: 0 0 10px;
    font-size: 13px;
    line-height: 1.55;
    color: var(--ink-2);
}

.console-prose p:last-child {
    margin-bottom: 0;
}

.console-prose strong {
    color: var(--ink);
    font-weight: 600;
}

.console-prose ul,
.console-prose ol {
    margin: 0 0 10px;
    padding-left: 20px;
    font-size: 13px;
    line-height: 1.6;
    color: var(--ink-2);
}

.console-prose ul:last-child,
.console-prose ol:last-child {
    margin-bottom: 0;
}

.console-prose li {
    margin-bottom: 4px;
}

.console-prose code {
    font-family: var(--font-mono);
    font-size: 11.5px;
    background: var(--inset);
    border: 1px solid var(--line);
    border-radius: 3px;
    padding: 1px 5px;
    color: var(--ink);
}

.console-prose pre {
    font-family: var(--font-mono);
    font-size: 12px;
    line-height: 1.5;
    background: var(--inset);
    border: 1px solid var(--line);
    border-radius: 5px;
    padding: 12px 14px;
    overflow-x: auto;
    color: var(--ink);
    margin: 0 0 10px;
}

.console-prose pre:last-child {
    margin-bottom: 0;
}

.console-prose a {
    color: var(--con-primary);
    text-decoration: none;
}

.console-prose a:hover {
    color: color-mix(in srgb, var(--con-primary) 78%, white);
}

/* Inset callout with severity left accent (replaces RadzenAlert in help pages) */
.console-note {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    background: var(--inset);
    border: 1px solid var(--line);
    border-left: 3px solid var(--con-sky);
    border-radius: 4px;
    padding: 10px 12px;
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--ink-2);
    margin: 0 0 10px;
}

.console-note:last-child {
    margin-bottom: 0;
}

.console-note > .con-icon {
    font-size: 14px;
    color: var(--con-sky);
    flex: none;
    margin-top: 1px;
}

.console-note--warning {
    border-left-color: var(--con-yellow);
}

.console-note--warning > .con-icon {
    color: var(--con-yellow);
}

/* Help index: topic card grid */
.help-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 14px;
}

/* Pair with .panel + .accent-top-primary (accent must come from console-tokens.css —
   it loads after site.css, so a border-top here would lose to .panel's border shorthand) */
.help-card {
    padding: 16px 18px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.help-card__icon {
    font-size: 22px;
    color: var(--con-primary);
}

.help-card__title {
    font: 600 13px/1.3 var(--font-sans);
    color: var(--ink);
}

.help-card__desc {
    margin: 0;
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--ink-2);
    flex: 1;
}

.help-card__link {
    font: 600 10px/1 var(--font-mono);
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--con-primary);
    text-decoration: none;
}

.help-card__link:hover {
    color: color-mix(in srgb, var(--con-primary) 78%, white);
}

/* Getting-started step number chip */
.help-step-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 4px;
    flex: none;
    font: 700 11px/1 var(--font-mono);
    color: var(--con-primary);
    background: color-mix(in srgb, var(--con-primary) 14%, transparent);
    border: 1px solid color-mix(in srgb, var(--con-primary) 40%, transparent);
}

.help-step-num--green {
    color: var(--con-green);
    background: color-mix(in srgb, var(--con-green) 14%, transparent);
    border-color: color-mix(in srgb, var(--con-green) 40%, transparent);
}