/* Phase 6.4 shared mobile + accessibility hardening. Keep game-specific layouts authoritative. */

.tc-a11y-skip-link {
    position: fixed;
    top: 12px;
    left: 12px;
    z-index: 999999;
    padding: 10px 14px;
    border-radius: 10px;
    background: #fff;
    color: #111;
    font-weight: 800;
    text-decoration: none;
    box-shadow: 0 8px 30px rgba(0,0,0,.22);
    transform: translateY(-180%);
    transition: transform .15s ease;
}

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

.tc-app :where(a, button, input, select, textarea, summary, [tabindex]:not([tabindex="-1"])):focus-visible,
.tc-auth-page :where(a, button, input, select, textarea, summary, [tabindex]:not([tabindex="-1"])):focus-visible {
    outline: 3px solid currentColor;
    outline-offset: 3px;
}

.tc-app,
.tc-auth-page {
    max-width: 100%;
}

.tc-app img,
.tc-auth-page img {
    max-width: 100%;
}

.tc-app table {
    max-width: 100%;
}

.tc-a11y-table-scroll {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* Hard responsive shell boundary.
 * Anything below small-desktop width must use the drawer/mobile navigation shell,
 * regardless of device height, orientation, pointer type or browser emulation. */
@media (max-width: 1279px) {
    html body.tc-page .theorycampus-app .tc-shell {
        display: block !important;
        grid-template-columns: none !important;
    }

    html body.tc-page .theorycampus-app .tc-main {
        grid-column: auto !important;
        width: 100% !important;
        max-width: none !important;
        min-width: 0 !important;
    }

    html body.tc-page .theorycampus-app .tc-sidebar {
        position: fixed !important;
        top: 0 !important;
        right: auto !important;
        bottom: 0 !important;
        left: 0 !important;
        width: min(320px, 82vw) !important;
        max-width: 100% !important;
        transform: translateX(-105%) !important;
        transition: transform .25s ease !important;
        z-index: 40000 !important;
        box-shadow: 14px 0 36px rgba(20,16,17,.18) !important;
    }

    html body.tc-page .theorycampus-app .tc-sidebar.is-open {
        transform: translateX(0) !important;
    }

    html body.tc-page .theorycampus-app .tc-menu {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        min-width: 44px !important;
        min-height: 44px !important;
        flex: 0 0 auto !important;
    }
}

@media (max-width: 767px) {
    .tc-app input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
    .tc-app select,
    .tc-app textarea,
    .tc-auth-page input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
    .tc-auth-page select,
    .tc-auth-page textarea {
        font-size: 16px;
    }

    .tc-app :where(.tc-btn, .button, .tc-nav a, form button, form input[type="submit"]),
    .tc-auth-page :where(button, .tc-btn, input[type="submit"]) {
        min-height: 44px;
    }

    .tc-app :where(.tc-card, .tc-panel, .tc-section),
    .tc-auth-page :where(.tc-auth-card, .tc-auth-panel) {
        max-width: 100%;
    }
}

/* Small desktop / MacBook Air route-based layout fixes.
 * Route scoping is deliberate so developer role preview behaves exactly like a real student session. */
@media (min-width: 1280px) and (max-width: 1439px) {
    html body.tc-page .theorycampus-app[data-route="dashboard"] .tc-dashboard-grid {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 18px !important;
    }

    html body.tc-page .theorycampus-app[data-route="dashboard"] .tc-class-sessions {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 16px !important;
    }

    html body.tc-page .theorycampus-app[data-route="dashboard"] .tc-feed-list {
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 12px !important;
    }

    html body.tc-page .theorycampus-app[data-route="training"] .tc-game-grid,
    html body.tc-page .theorycampus-app[data-route="training"] [class~="tc-game-grid"] {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 20px !important;
        width: 100% !important;
    }

    html body.tc-page .theorycampus-app[data-route="dashboard"] .tc-event-player-banner .tc-phase56-reward {
        display: grid !important;
        grid-template-columns: auto minmax(0, 1fr) !important;
        align-items: center !important;
        gap: 3px 12px !important;
        width: 100% !important;
        max-width: none !important;
        min-height: 0 !important;
        padding: 8px 14px !important;
        background: var(--tc-red,#e8242c) !important;
        border-color: var(--tc-red,#e8242c) !important;
        color: #fff !important;
        box-sizing: border-box !important;
    }

    html body.tc-page .theorycampus-app[data-route="dashboard"] .tc-event-player-banner .tc-phase56-reward > span,
    html body.tc-page .theorycampus-app[data-route="dashboard"] .tc-event-player-banner .tc-phase56-reward > strong,
    html body.tc-page .theorycampus-app[data-route="dashboard"] .tc-event-player-banner .tc-phase56-reward > small,
    html body.tc-page .theorycampus-app[data-route="dashboard"] .tc-event-player-banner .tc-phase56-reward * {
        color: #fff !important;
    }

    html body.tc-page .theorycampus-app[data-route="dashboard"] .tc-event-player-banner .tc-phase56-reward > small {
        grid-column: 1 / -1 !important;
        margin: 0 !important;
        font-size: 10px !important;
        line-height: 1.2 !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .tc-app *,
    .tc-app *::before,
    .tc-app *::after,
    .tc-auth-page *,
    .tc-auth-page *::before,
    .tc-auth-page *::after {
        scroll-behavior: auto !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
}