/* =============================================================================
   Global Accessibility Layer
   Loaded last so it wins over per-page stylesheets.
   ============================================================================= */

/* ── Skip link ───────────────────────────────────────────────────────────── */

.skip-link {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1000;
    padding: 12px 20px;
    background: var(--accent-primary);
    color: var(--on-accent);
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
    border-bottom-right-radius: var(--radius-md);
    transform: translateY(-120%);
    transition: transform var(--transition-fast);
}

.skip-link:focus {
    transform: translateY(0);
}

/* ── Visually hidden (available to screen readers only) ──────────────────── */

.visually-hidden {
    position: absolute !important;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ── Focus ring ──────────────────────────────────────────────────────────── */

/* Keyboard focus is always visible, everywhere. */
:focus-visible {
    outline: var(--focus-ring-width) solid var(--focus-ring);
    outline-offset: var(--focus-ring-offset);
    border-radius: 4px;
}

/* Pointer focus stays quiet. */
:focus:not(:focus-visible) {
    outline: none;
}

/* Elements that already carry their own radius keep it under the ring. */
.post-card:focus-visible,
.sidebar-card:focus-visible,
.profile-game-card:focus-visible,
.compare-card:focus-visible {
    border-radius: var(--radius-xl);
}

.btn:focus-visible,
.sidebar-btn:focus-visible,
.sheet-pill:focus-visible,
.track-pill:focus-visible,
.toggle-btn:focus-visible,
.filter-pill:focus-visible {
    border-radius: var(--radius-sm);
}

/* On accent-filled surfaces a light ring disappears - flip to a dark one
   plus a light halo so it reads on both the button and the page behind it. */
.btn-primary:focus-visible,
.btn-register:focus-visible,
.fab-btn:focus-visible,
.btn-create-post:focus-visible,
.error-btn-primary:focus-visible,
.comment-send-btn:focus-visible {
    outline-color: var(--focus-ring-contrast);
    outline-offset: -4px;
    box-shadow: 0 0 0 2px var(--focus-ring);
}

/* Avatars and other circles */
.avatar-circle:focus-visible,
.profile-pill:focus-visible,
.mobile-avatar-btn:focus-visible {
    border-radius: var(--radius-full);
}

/* ── Touch targets ───────────────────────────────────────────────────────── */

/* Icon-only controls need a real hit area even when the glyph is small. */
.options-toggle,
.comment-edit-btn,
.comment-delete-btn,
.sheet-close,
.log-modal-close,
.toast-close,
.share-btn {
    min-width: 44px;
    min-height: 44px;
}

/* ── Fixed bottom nav: clear the iOS home indicator ──────────────────────── */

@media (max-width: 640px) {
    .bottom-nav {
        height: calc(64px + env(safe-area-inset-bottom, 0px));
        padding-bottom: env(safe-area-inset-bottom, 0px);
    }

    body {
        padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px));
    }

    /* Bottom-nav labels were 10.5px in muted grey - too small and too faint. */
    .bottom-label {
        font-size: 11.5px;
    }
}

/* ── 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;
    }

    /* Ambient glows are pure decoration - drop them entirely. */
    .glow-top,
    .glow-bottom,
    .compare-glow-tr,
    .compare-glow-bl,
    .profile-game-glow-tr,
    .profile-game-glow-bl {
        display: none;
    }
}