/* CodeQuest mobile application layer
   Desktop remains governed by site.css. This file defines phone and tablet
   compositions, safe-area behaviour, touch ergonomics and keyboard resilience. */

.mobile-app-nav,
.password-visibility-toggle { display: none; }

@media (max-width: 1023px) {
    html { scroll-padding-top: 4.5rem; }
    body { min-width: 0; min-height: 100dvh; overflow-x: clip; }
    main { min-width: 0; }

    :where(.page-shell, .content-shell, .dashboard-shell, .teacher-shell, .course-shell,
        .practice-shell, .quest-board-shell, .campaign-shell, .portfolio-shell,
        .compliance-shell, .account-panel, .lesson-shell) {
        width: min(100% - 2rem, 48rem);
        max-width: 100%;
    }

    :where(.dashboard-grid, .teacher-dashboard-grid, .course-grid, .topic-grid,
        .campaign-grid, .achievement-grid, .stats-grid, .form-grid, .two-column,
        .split-layout, .quest-board-grid) { grid-template-columns: 1fr; }

    :where(img, svg, canvas, video) { max-width: 100%; }
    :where(pre, code) { overflow-wrap: normal; }

    .table-scroll,
    .mobile-controlled-scroll,
    .dataset-viewer,
    .sql-dataset { max-width: 100%; overflow-x: auto; overscroll-behavior-inline: contain; scrollbar-gutter: stable; }

    dialog, [role="dialog"], .modal-panel { max-width: min(42rem, calc(100vw - 2rem)); max-height: min(85dvh, 52rem); }
}

@media (max-width: 767px) {
    :root {
        --mobile-gutter: clamp(.9rem, 4vw, 1.25rem);
        --mobile-nav-height: 4.25rem;
        --mobile-touch: 2.75rem;
    }

    html { scroll-padding-top: 4rem; scroll-padding-bottom: calc(var(--mobile-nav-height) + env(safe-area-inset-bottom)); }
    body { min-height: var(--cq-visual-viewport-height, 100dvh); font-size: 1rem; -webkit-text-size-adjust: 100%; }
    body.is-authenticated { padding-bottom: calc(var(--mobile-nav-height) + env(safe-area-inset-bottom)); }
    body.is-authenticated .site-footer { display: none; }

    .site-header { position: sticky; top: 0; z-index: 80; padding-top: env(safe-area-inset-top); backdrop-filter: blur(18px); }
    .site-header--app { border-bottom-color: rgba(255,255,255,.08); background: rgba(7,16,21,.94); }
    .site-header--app .site-nav { min-height: 3.5rem; }
    .site-header--app .menu-button { display: none; }
    .site-header--app .site-logo__text small { display: none; }

    .mobile-app-nav {
        position: fixed; z-index: 95; right: 0; bottom: 0; left: 0;
        display: grid; grid-template-columns: repeat(5, minmax(0, 1fr));
        min-height: calc(var(--mobile-nav-height) + env(safe-area-inset-bottom));
        padding: .35rem max(.4rem, env(safe-area-inset-right)) calc(.3rem + env(safe-area-inset-bottom)) max(.4rem, env(safe-area-inset-left));
        border-top: 1px solid rgba(255,255,255,.12); background: rgba(7,16,21,.97);
        box-shadow: 0 -1rem 2.5rem rgba(0,0,0,.24); backdrop-filter: blur(20px);
    }
    .mobile-app-nav a, .mobile-app-nav button {
        display: flex; align-items: center; justify-content: center; flex-direction: column; gap: .1rem;
        min-width: 0; min-height: 3.45rem; margin: 0; padding: .2rem .1rem; border: 0;
        border-radius: .75rem; background: transparent; color: #8fa3a9;
        font: inherit; font-size: .65rem; font-weight: 750; line-height: 1; text-decoration: none;
    }
    .mobile-app-nav a[aria-current="page"] { color: var(--cq-cyan, #4bd3de); background: rgba(75,211,222,.1); }
    .mobile-app-nav__icon { display: grid; place-items: center; min-height: 1.45rem; font-size: 1.28rem; font-weight: 800; line-height: 1; }

    .mobile-menu {
        position: fixed; inset: auto max(.6rem, env(safe-area-inset-right)) calc(var(--mobile-nav-height) + env(safe-area-inset-bottom) + .5rem) max(.6rem, env(safe-area-inset-left));
        max-height: min(72dvh, calc(var(--cq-visual-viewport-height, 100dvh) - 9rem)); overflow-y: auto;
        border-radius: 1.15rem; box-shadow: 0 1.5rem 4rem rgba(0,0,0,.5);
    }
    .mobile-menu.is-portaled { z-index: 120; margin: 0; }
    body.mobile-menu-open::before {
        position: fixed; inset: 0; z-index: 105; content: "";
        background: rgba(1, 6, 9, .62); backdrop-filter: blur(3px);
    }
    .mobile-menu nav a, .mobile-menu nav button { min-height: var(--mobile-touch); border-radius: .65rem; }
    .mobile-menu-open { overflow: hidden; }

    main > :where(section, article, div):not(.message-stack) { scroll-margin-top: 4.25rem; }
    :where(.page-shell, .content-shell, .dashboard-shell, .teacher-shell, .course-shell,
        .practice-shell, .quest-board-shell, .campaign-shell, .portfolio-shell,
        .compliance-shell, .account-panel, .lesson-shell) {
        width: 100%; padding-inline: var(--mobile-gutter);
    }

    h1 { font-size: clamp(1.75rem, 8vw, 2.35rem); line-height: 1.06; text-wrap: balance; }
    h2 { font-size: clamp(1.35rem, 6vw, 1.75rem); line-height: 1.12; text-wrap: balance; }
    h3 { font-size: clamp(1.08rem, 4.8vw, 1.3rem); line-height: 1.18; }
    p, li { line-height: 1.55; }
    .eyebrow { font-size: .7rem; letter-spacing: .1em; }

    :where(button, .button, [class*="-action"], input[type="submit"], input[type="button"], summary, select) { min-height: var(--mobile-touch); }
    :where(input:not([type="checkbox"]):not([type="radio"]), select, textarea) { width: 100%; min-height: var(--mobile-touch); font-size: 1rem; }
    textarea { line-height: 1.5; resize: vertical; }
    :where(form, fieldset, label) { min-width: 0; }
    :where(.button-row, .form-actions, .card-actions, .teacher-actions, .campaign-actions, .quiz-actions) { gap: .65rem; }
    :where(.button-row, .form-actions):not(.keep-inline) > :where(a, button, .button, form) { width: 100%; }
    :where(.button-row, .form-actions) form > :where(button, .button) { width: 100%; }

    .has-password-toggle { position: relative; }
    .has-password-toggle input { padding-right: 4.5rem; }
    .password-visibility-toggle {
        position: absolute; right: .4rem; bottom: .35rem; z-index: 2; display: block; min-height: 2.2rem;
        padding: .35rem .65rem; border: 0; background: transparent; color: var(--cq-cyan, #4bd3de);
        font-size: .78rem; font-weight: 800;
    }

    /* Authentication is a task screen on phones, not a marketing screen. */
    body[data-route="site:login"] .site-header,
    body[data-route="site:register"] .site-header,
    body[data-route^="site:password_reset"] .site-header { position: relative; }
    body[data-route="site:login"] .site-header .mobile-header-cta,
    body[data-route="site:login"] .site-header .menu-button,
    body[data-route="site:register"] .site-header .mobile-header-cta { display: none; }
    body[data-route="site:login"] .site-nav { grid-template-columns: 1fr; min-height: 3.25rem; }
    body[data-route="site:login"] .site-logo { justify-self: center; }
    body[data-route="site:login"] .site-logo__text small { display: none; }
    body[data-route="site:login"] .account-page {
        min-height: calc(var(--cq-visual-viewport-height, 100dvh) - 3.25rem - env(safe-area-inset-top));
        padding: .75rem var(--mobile-gutter) max(1rem, env(safe-area-inset-bottom));
    }
    body[data-route="site:login"] .account-panel { display: block; width: min(100%, 27rem); padding: 0; }
    body[data-route="site:login"] .account-copy { padding: .2rem 0 .75rem; text-align: center; }
    body[data-route="site:login"] .account-copy .eyebrow,
    body[data-route="site:login"] .account-system-list { display: none; }
    body[data-route="site:login"] .account-copy h1 { margin: 0; font-size: 1.75rem; }
    body[data-route="site:login"] .account-copy p { margin: .35rem 0 0; font-size: .86rem; }
    body[data-route="site:login"] .account-form { gap: .65rem; padding: 1rem; border-radius: 1rem; }
    body[data-route="site:login"] .account-form label { gap: .3rem; }
    body[data-route="site:login"] .account-form .button { margin-top: .15rem; }
    body[data-route="site:login"] .form-note { margin: 0; font-size: .82rem; }
    body[data-route="site:login"] .form-alert { padding: .65rem .75rem; font-size: .82rem; line-height: 1.35; }
    body[data-route="site:login"] .site-footer { display: none; }

    /* Public landing: short, decisive sections with the action above the fold. */
    body[data-route="site:home"] :where(.home-hero, .public-hero) { min-height: auto; padding-block: clamp(2rem, 8vh, 4rem); }
    body[data-route="site:home"] :where(.home-hero, .public-hero) h1 { max-width: 13ch; }
    body[data-route="site:home"] :where(.home-hero, .public-hero) .button { width: 100%; }
    body[data-route="site:home"] :where(.home-section, section[class*="section"]) { min-height: 0; padding-block: 2.5rem; }
    body[data-route="site:home"] :where(.hero-visual, .decorative-grid, .ambient-orb) { animation: none; }

    /* Content cards become full-width app surfaces. */
    :where(.dashboard-card, .teacher-card, .course-card, .topic-card, .achievement-card,
        .quest-card, .campaign-card, .portfolio-card, .compliance-card, .quiz-card,
        .lesson-section, .practice-card) { border-radius: .9rem; }
    :where(.dashboard-card, .teacher-card, .course-card, .topic-card, .achievement-card,
        .quest-card, .campaign-card, .portfolio-card, .compliance-card, .quiz-card) { padding: 1rem; }

    /* Administrative tables become independently scannable records. */
    table.mobile-card-table, .mobile-card-table tbody, .mobile-card-table tr, .mobile-card-table td { display: block; width: 100%; }
    .mobile-card-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
    .mobile-card-table tbody { display: grid; gap: .75rem; }
    .mobile-card-table tr { padding: .35rem .85rem; border: 1px solid var(--cq-border, rgba(255,255,255,.14)); border-radius: .85rem; background: var(--cq-surface, #0d1d21); }
    .mobile-card-table td { display: grid; grid-template-columns: minmax(6.5rem, .75fr) minmax(0, 1.25fr); gap: .75rem; padding: .65rem 0; border: 0; border-bottom: 1px solid var(--cq-border-subtle, rgba(255,255,255,.08)); text-align: right; overflow-wrap: anywhere; }
    .mobile-card-table td:last-child { border-bottom: 0; }
    .mobile-card-table td::before { content: attr(data-label); color: var(--cq-text-muted, #9caeb3); font-size: .72rem; font-weight: 800; letter-spacing: .04em; text-align: left; text-transform: uppercase; }
    .mobile-card-table td :where(a, button, .button) { width: auto; min-width: var(--mobile-touch); }

    /* Lesson stages behave like focused learning screens. */
    .lesson-page { padding-bottom: calc(var(--mobile-nav-height) + env(safe-area-inset-bottom)); }
    .lesson-page :where(.lesson-stage-nav, .lesson-progress, .stage-progress) { position: sticky; top: calc(3.5rem + env(safe-area-inset-top)); z-index: 55; }
    .lesson-page :where(.lesson-stage-grid, .mission-stage-grid, .theory-layout, .apply-layout) { grid-template-columns: 1fr; }
    .lesson-page :where(.lesson-section, .mission-workspace-card, .mission-objective-card) { width: 100%; margin-inline: 0; padding: 1rem; }
    .lesson-page :where(.mission-guidance-block, .mission-hint-panel, .success-criteria, .j223-success-criteria) { max-height: 12rem; overflow-y: auto; }
    .lesson-page :where(.visual-flow, .embedded-flow-visual, [role="table"]) { overflow-x: auto; overscroll-behavior-inline: contain; }

    /* Editors fill the useful viewport; actions stay thumb-reachable. */
    .mobile-code-editor,
    .lesson-page textarea.python-editor,
    .lesson-page textarea[data-j223-solution] {
        min-height: clamp(16rem, 44dvh, 29rem) !important; padding: .9rem !important;
        overflow: auto !important; white-space: pre !important; overflow-wrap: normal !important; word-break: normal !important;
        font-size: max(.875rem, 14px) !important; line-height: 1.55 !important; tab-size: 4;
    }
    .lesson-page :where(.python-controls, .editor-actions, .j223-actions, .mission-run-actions) {
        position: sticky; z-index: 45; bottom: calc(var(--mobile-nav-height) + env(safe-area-inset-bottom) + .35rem);
        display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem;
        padding: .55rem; border: 1px solid var(--cq-border, rgba(255,255,255,.14)); border-radius: .85rem;
        background: rgba(7,16,21,.96); box-shadow: 0 .6rem 2rem rgba(0,0,0,.38); backdrop-filter: blur(16px);
    }
    .lesson-page :where(.python-output, .code-output, .j223-result) { min-height: 6rem; margin-top: .65rem; overflow-x: auto; }

    /* Dialogs use bottom-sheet geometry; large task dialogs use the full screen. */
    dialog, [role="dialog"], .modal-panel {
        position: fixed; inset: auto 0 0; width: 100%; max-width: none; max-height: min(88dvh, var(--cq-visual-viewport-height, 88dvh));
        margin: 0; padding: 1.15rem var(--mobile-gutter) calc(1.15rem + env(safe-area-inset-bottom));
        border-radius: 1.25rem 1.25rem 0 0; overflow-y: auto;
    }
    dialog::before, [role="dialog"]::before, .modal-panel::before { content: ""; display: block; width: 2.75rem; height: .25rem; margin: -.45rem auto .9rem; border-radius: 1rem; background: rgba(255,255,255,.3); }
    :where(dialog, [role="dialog"], .modal-panel).is-full-screen-mobile { inset: 0; max-height: 100dvh; border-radius: 0; padding-top: calc(1rem + env(safe-area-inset-top)); }

    .message-stack { position: fixed; top: calc(3.75rem + env(safe-area-inset-top)); right: var(--mobile-gutter); left: var(--mobile-gutter); z-index: 110; }
    .site-message { padding: .75rem; border-radius: .8rem; font-size: .84rem; }
    .cookie-banner { max-height: min(70dvh, var(--cq-visual-viewport-height, 70dvh)); overflow-y: auto; }
}

@media (max-width: 359px) {
    :root { --mobile-gutter: .75rem; }
    .mobile-app-nav a, .mobile-app-nav button { font-size: .58rem; }
    .mobile-app-nav__icon { font-size: 1.1rem; }
    h1 { font-size: 1.65rem; }
    .mobile-card-table td { grid-template-columns: 1fr; gap: .25rem; text-align: left; }
}

@media (orientation: landscape) and (max-height: 540px) and (max-width: 1023px) {
    :root { --mobile-nav-height: 3.5rem; }
    .mobile-app-nav { grid-template-columns: repeat(5, 1fr); }
    .mobile-app-nav a, .mobile-app-nav button { min-height: 2.8rem; flex-direction: row; gap: .35rem; }
    .mobile-app-nav__icon { font-size: 1rem; }
    .lesson-page .mobile-code-editor { min-height: 55dvh !important; }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto !important; }
    .mobile-app-nav, .mobile-menu, dialog, [role="dialog"] { animation: none !important; transition: none !important; }
}

@media (prefers-contrast: more) {
    .mobile-app-nav, .mobile-menu, .mobile-card-table tr { border-color: currentColor; }
    .mobile-app-nav a[aria-current="page"] { outline: 2px solid currentColor; outline-offset: -2px; }
}