/* ============================================================
   Accessibility — focus rings, high-contrast mode
   ============================================================ */

/* (3) Visible focus rings on all interactive elements */
button:focus-visible,
select:focus-visible,
input[type="range"]:focus-visible,
input[type="file"]:focus-visible,
input[type="text"]:focus-visible,
.mode-btn:focus-visible,
.zoom-btn:focus-visible,
.s3-btn:focus-visible,
[role="row"]:focus-visible {
    outline: 3px solid #2563eb !important;
    outline-offset: 2px;
    box-shadow: 0 0 0 5px rgba(37, 99, 235, 0.25);
}

/* Table row focus */
#comparisonTable tr[tabindex]:focus-visible {
    outline: 3px solid #2563eb !important;
    outline-offset: -2px;
    background: var(--primary-light, #dbeafe) !important;
}

/* (5) Screen reader live region */
#a11yLiveRegion {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ============================================================
   (5) High-contrast mode
   ============================================================ */
[data-high-contrast="true"] button,
[data-high-contrast="true"] select,
[data-high-contrast="true"] .mode-btn {
    border: 2px solid #000 !important;
}

[data-high-contrast="true"] .mode-btn.active {
    border: 3px solid #000 !important;
    background: #fbbf24 !important;
    color: #000 !important;
}

[data-high-contrast="true"] #comparisonTable th {
    background: #000 !important;
    color: #fff !important;
}

[data-high-contrast="true"] #comparisonTable tr.selected {
    background: #fbbf24 !important;
    outline: 3px solid #000;
}

[data-high-contrast="true"] #comparisonTable tr[tabindex]:hover {
    background: #e5e7eb !important;
}

/* ── Phase 0: prefers-reduced-motion ─────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ── Phase 0: prefers-contrast ───────────────────────────────────────────── */
@media (prefers-contrast: more) {
    :root {
        --border-color: #000;
    }
    button, select, .mode-btn { border: 2px solid #000 !important; }
    .mode-btn.active { background: #fbbf24 !important; color: #000 !important; border: 3px solid #000 !important; }
}

/* ── Phase 0: Skip-to-content link ───────────────────────────────────────── */
.skip-link {
    position: absolute; top: -100px; left: 8px;
    background: var(--primary-color); color: #fff;
    padding: 8px 16px; border-radius: 0 0 6px 6px;
    z-index: 100000; font-weight: 600; text-decoration: none;
    transition: top 0.2s;
}
.skip-link:focus { top: 0; }