/* ── Accessibility Baseline — Sprint 16 (WCAG 2.1 AA) ── */

/* ── Screen reader only ── */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ── Skip to content link ── */
.skip-to-content {
    position: absolute;
    top: -60px;
    left: 8px;
    z-index: 10050;
    padding: 10px 18px;
    background: var(--brand-primary, #4826fd);
    color: #ffffff;
    font-size: 14px;
    font-weight: 600;
    border-radius: 0 0 var(--radius, 8px) var(--radius, 8px);
    text-decoration: none;
    transition: top 0.2s ease;
}

.skip-to-content:focus,
.skip-to-content:focus-visible {
    top: 0;
    color: #ffffff;
    text-decoration: none;
    outline: 3px solid #ffffff;
    outline-offset: -3px;
}

@media (prefers-reduced-motion: reduce) {
    .skip-to-content {
        transition: none;
    }
}

/* Remove default outline on the focus target region (skip link destination) */
main.page-content:focus,
#mainContentRegion:focus {
    outline: none;
}

/* ── Status badge: icon + text labels (never color-only) ── */
.status-badge {
    gap: 5px;
}

.status-badge .status-badge-icon {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
}

/* Icon markers injected via ::before for badges that only have color/text.
   These provide a non-color visual differentiator. */
.status-badge.status-running::before {
    content: "";
    display: inline-block;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: currentColor;
    flex-shrink: 0;
}

.status-badge.status-stopped::before {
    content: "";
    display: inline-block;
    width: 7px;
    height: 7px;
    border: 1.5px solid currentColor;
    border-radius: 50%;
    background: transparent;
    flex-shrink: 0;
}

.status-badge.status-disconnected::before,
.status-badge.status-expired::before {
    content: "";
    display: inline-block;
    width: 8px;
    height: 8px;
    background: currentColor;
    flex-shrink: 0;
    /* diamond/warning marker */
    transform: rotate(45deg);
}

.status-badge.status-pending::before,
.status-badge.status-building::before {
    content: "";
    display: inline-block;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    border: 1.5px solid currentColor;
    border-top-color: transparent;
    flex-shrink: 0;
}

/* Do not double up markers when an explicit icon is already present */
.status-badge.has-icon::before {
    display: none;
}

/* ── Global reduced-motion: neutralize transitions and animations ── */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }
}