/* R12 · Final accessibility, responsive and release hardening layer. */
.skip-link {
    position: fixed;
    z-index: 100000;
    top: 12px;
    left: 12px;
    transform: translateY(-160%);
    padding: 10px 14px;
    border-radius: 10px;
    background: #0b1f3a;
    color: #fff;
    font-weight: 800;
    text-decoration: none;
    box-shadow: 0 8px 26px rgba(11, 31, 58, .22);
}

.skip-link:focus-visible {
    transform: translateY(0);
    outline: 3px solid #65c7ff;
    outline-offset: 3px;
}

html {
    text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
}

body,
.app-main,
.page-container,
.public-shell,
.kid-mode-shell,
.kid-mode-shell__main {
    min-width: 0;
}

button,
input,
select,
textarea {
    font: inherit;
}

button,
a,
input[type="button"],
input[type="submit"],
input[type="radio"],
input[type="checkbox"],
select {
    touch-action: manipulation;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
    outline: 3px solid #087fff;
    outline-offset: 3px;
}

img,
svg,
canvas,
video {
    max-width: 100%;
}

.flash[role="status"],
.flash[role="alert"] {
    scroll-margin-top: 92px;
}

.page-container :is(table, pre, code),
.public-shell :is(table, pre, code) {
    max-width: 100%;
}

.page-container pre,
.public-shell pre {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

@media (max-width: 900px) {
    .topbar {
        align-items: flex-start;
        gap: 12px;
    }

    .topbar-actions {
        flex-wrap: wrap;
        justify-content: flex-end;
    }

    .page-container {
        width: 100%;
        box-sizing: border-box;
    }

    .page-container table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
}

@media (max-width: 640px) {
    .topbar {
        padding-inline: max(14px, env(safe-area-inset-left)) max(14px, env(safe-area-inset-right));
    }

    .topbar h1 {
        max-width: 100%;
        overflow-wrap: anywhere;
    }

    .topbar-actions {
        width: 100%;
        justify-content: flex-start;
    }

    .topbar-icon-btn,
    .dark-toggle,
    .topbar-exit-btn,
    .kms-logout,
    .kms-audio-btn {
        min-width: 44px;
        min-height: 44px;
    }

    .page-container {
        padding-left: max(14px, env(safe-area-inset-left));
        padding-right: max(14px, env(safe-area-inset-right));
        padding-bottom: max(24px, env(safe-area-inset-bottom));
    }
}

@media (forced-colors: active) {
    a,
    button,
    input,
    select,
    textarea {
        forced-color-adjust: auto;
    }

    :focus-visible {
        outline: 3px solid CanvasText;
    }
}

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

    html:focus-within {
        scroll-behavior: auto;
    }
}