/* Round 28 (UIX-6, r.392): system status dot with a pulse; unknown (28d UPD-5) is grey without a pulse. */

.sc-status-dot {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: inherit;
    text-decoration: none;
}

.sc-status-dot-pulse {
    position: relative;
    flex: 0 0 auto;
    width: 8px;
    height: 8px;
    border-radius: var(--sc-radius-full);
    background: currentColor;
}

.sc-status-dot.is-operational .sc-status-dot-pulse { color: var(--sc-color-green); }
.sc-status-dot.is-degraded .sc-status-dot-pulse { color: var(--sc-color-orange); }
.sc-status-dot.is-outage .sc-status-dot-pulse { color: var(--sc-color-danger); }
.sc-status-dot.is-unknown .sc-status-dot-pulse { color: var(--sc-color-text-muted); }
.sc-status-dot.is-unknown .sc-status-dot-pulse::after { display: none; }

.sc-status-dot-pulse::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: currentColor;
    animation: sc-status-pulse 2s ease-out infinite;
}

@keyframes sc-status-pulse {
    from { transform: scale(1); opacity: .6; }
    to { transform: scale(2.5); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .sc-status-dot-pulse::after { animation: none; display: none; }
}

/* Run 29c (HLT-1, §7.I; merged here at integration 29c): Health level badge (x-sc.health-badge); colours only from tokens. */

.sc-health-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-weight: 500;
    line-height: 1;
}

.sc-health-badge svg {
    width: 14px;
    height: 14px;
    flex: 0 0 auto;
}

.sc-health-badge[data-level="critical"] { color: var(--sc-color-danger); }
.sc-health-badge[data-level="warning"] { color: var(--sc-color-orange); }
.sc-health-badge[data-level="ok"] { color: var(--sc-color-green); }

.sc-health-badge-count { color: var(--sc-color-text); }
.sc-health-badge-mark { stroke: var(--sc-color-white); }