/* Mobile Responsiveness for Tabbed Layouts */
@media (max-width:768px) {
    /* Global mobile type/layout — moved from session.css: that sheet is DEFERRED on SSR pages,
       so these rules landing ~2s after first paint reflowed the entire landing (measured layout
       shift 0.29). They are page-wide, so they belong in the critical (inlined) set.
       body.session-active #app-root in session.css still overrides the margins by specificity. */
    h1 { font-size:2rem !important;}
    h2 { font-size:1.3rem !important;}
    p { font-size:1rem !important;}
    main#app-root { margin:20px auto !important;padding:0 15px !important;}
    .landing-hero{flex-direction:column;text-align:center;padding:50px 20px;}
    .landing-hero-content{align-items:center;text-align:center;margin-bottom:30px;}
    .landing-trust{justify-content:center;}
    .landing-finale{padding:42px 22px;}
    .landing-finale-title{font-size:1.7rem;}
    .tabbed-layout-wrapper{flex-direction:column;gap:15px;}
    .sidebar-menu-card{position:static;flex:1 1 100%;width:100%;margin-bottom:15px;}
    .compact-header{flex-direction:column;text-align:center;gap:10px;}
    .compact-header-text{text-align:center;}
    .admin-tab-content,.profile-tab-content{padding:20px;}
    .compact-header .icon-container{font-size:3rem;}
    .fc-media-container{height:180px;min-height:100px;}
    .review-wrapper{margin:5px auto!important;padding:10px!important;}
    .fc-content{padding:10px 20px;}
    .fc-prompt{font-size:1.3rem;margin-bottom:10px;}
    .fc-input{padding:10px!important;margin-bottom:5px;}
    .fc-inline-btn{height:42px;width:42px;}
    .progress-tooltip-wrapper{padding-right:50px;/* Leave space for X button */}
    .exercise-card{min-height:auto;}
    .choices-grid{grid-template-columns:1fr;}
    .choices-grid.listen-grid{grid-template-columns:repeat(2,1fr);}/* tall audio buttons stay 2x2 */
    .matching-container{gap:10px;}
    .matching-item{padding:10px;font-size:0.95rem;}
    .listen-choice-btn{flex-direction:column;padding:30px 20px;min-height:140px;gap:8px;}
    .listen-choice-btn .choice-planet-icon{font-size:2.5rem;width:auto;height:auto;margin-bottom:5px;}
    .auth-decal{display:none;}
    .legal-decal{display:none;}
    .footer-content{grid-template-columns:1fr;gap:30px;text-align:center;}
    .footer-logo{align-self:center;}
    .footer-logo-link{align-self:center;justify-content:center;}
    .footer-desc{max-width:100%;}
    .footer-bottom{justify-content:center;text-align:center;}
    /* div-qualified: beats the base .cookie-banner in components.css by SPECIFICITY, so this
       override never depends on sheet order. */
    div.cookie-banner{left:15px;right:15px;max-width:none;bottom:15px;}
    .admin-btn-grid{grid-template-columns:1fr;gap:12px;}
    .admin-snapshot-grid{grid-template-columns:repeat(3,1fr);}
    .admin-lessons-seed-grid{grid-template-columns:1fr;}
    .admin-lessons-seed-grid .admin-tool-btn{justify-content:center;}
    .admin-tool-select{min-width:140px;}
}

@media (max-width:900px) {
    .landing-steps{flex-direction:column;}
    .landing-step{min-width:100%;}
    .landing-step-connector{display:none;}
}

/* Phase 59: admin support detail collapses to one column on narrow screens */
@media (max-width:900px) {
    .adm-support-grid{grid-template-columns:1fr;}
    .support-row{grid-template-columns:90px 1fr;grid-auto-rows:auto;}
    .support-row .badge{justify-self:start;}
}

/* Toast stack goes full-width on phones */
@media (max-width:600px) {
    #corner-stack{left:1rem;right:1rem;bottom:1rem;align-items:stretch;}
    .toast-stack{max-width:none;}
}

/* ---------- 62.1: admin panel on phones ---------- */
@media (max-width:768px) {
    /* ⚠️ THE overflow fix. .tabbed-layout-wrapper is align-items:flex-start, so once it turns into a
       COLUMN here its children size to their own max-content instead of stretching — .sidebar-menu-card
       compensates with width:100% just above, .tab-content-area never got the sibling rule, so the admin
       panel laid itself out ~800px wide inside a 390px phone (measured) and the whole page overflowed.
       min-width:0 additionally lets the inner flex rows shrink below their content. */
    .tab-content-area{width:100%;min-width:0;}
    /* Wide data tables scroll inside their own container instead of stretching the page. */
    .users-table-wrapper{overflow-x:auto;-webkit-overflow-scrolling:touch;}
    .users-table{min-width:640px;}
}
@media (max-width:600px) {
    /* 63: COMPACT job tracker (owner request). Collapsed = just the touch-size expand/stop buttons
       with a progress bar exactly as wide as they are — no title, no status text. Expanding restores
       the full card (title, status, details), so nothing is lost, it just stops covering the page. */
    .genjobs-stack{align-items:flex-end;align-self:flex-end;max-width:min(340px,92vw);}
    .gj-stop,.gj-expand{width:40px;height:40px;border-radius:9px;font-size:0.95rem;}
    .gj-head{gap:0.65rem;margin-bottom:0.4rem;}
    .genjob-card:not(.gj-open){width:max-content;padding:0.5rem;}
    .genjob-card:not(.gj-open) .gj-label,.genjob-card:not(.gj-open) .gj-sub{display:none;}
    .genjob-card.gj-open{max-width:min(340px,92vw);}
    .genjob-card.gj-open .gj-sub{font-size:0.82rem;white-space:normal;}
    .genjob-card.gj-open .gj-label{font-size:0.9rem;}
    /* Academy chapter + lesson rows: title first on its own line, then the control strip — instead of
       squeezing the title to ~30px between the grip and five non-shrinking icon buttons. */
    .academy-chap-head{flex-wrap:wrap;}
    .academy-chap-toggle{flex:1 1 100%;order:-1;flex-wrap:wrap;}
    .academy-chap-name{flex:1 1 100%;white-space:normal;}
    .academy-chap-actions{margin-left:auto;}
    .academy-row{flex-wrap:wrap;}
    .academy-row-main{flex:1 1 100%;order:-1;}
    .academy-tool{width:34px;height:34px;}
    .academy-level-actions,.academy-search-row{flex-wrap:wrap;}
    .academy-search-wrap{max-width:none;}
    /* Concept-A settings rows: label above control instead of a cramped two-column squeeze. */
    .set-arow{flex-direction:column;align-items:stretch;gap:8px;}
    .set-arow .sa-ctl{flex:initial;justify-content:flex-start;flex-wrap:wrap;}
    .set-arow .sa-ctl .dd,.set-arow .sa-ctl input[type="text"]{max-width:100%;}
    .model-inputs{flex-direction:column;align-items:stretch;}
    /* Modals: use the whole phone width; keep them scrollable. */
    .academy-modal-overlay{padding:10px;}
    .academy-modal-card{padding:18px 14px;max-height:92vh;border-radius:14px;}
    .academy-modal-card.academy-course-modal-card{max-width:100%;}
    /* Generator cards: the head keeps light + number + title; the status line lives in the body. */
    .amq-stats{grid-template-columns:repeat(2,1fr);}
    .vocab-gen-headstatus{display:none;}
    .vocab-gen-seqbar{flex-wrap:wrap;}
}

/* Workspace content becomes a single readable column before the global rail turns into a drawer. */
@media (max-width:1024px) {
    body.app-shell-active{--app-content-gutter:20px;--app-content-top:20px;}
    body.lframe-active:not(.hyper-theme)>header::before{content:none;}
    body.lframe-active main#app-root{width:100%!important;margin:0!important;padding:0!important;}
    /* Same rule for learner routes — see the pages.css comment. Higher specificity than the bare
       main#app-root{padding:0 15px!important} at the top of this file, so that line stays put. */
    body.app-shell-active:not(.lframe-active) main#app-root{padding:0!important;}
    .lframe-layout,.lframe-layout .tabbed-layout-wrapper{display:block;min-height:calc(100dvh - var(--app-header-height));}
    .lframe-layout .tab-content-area{max-width:none;padding-bottom:48px;}
}


/* ---------- Phase 82: persistent authenticated command rail ---------- */
@media (max-width:1280px) {
    .shell-stat-daily{display:none;}
}

@media (max-width:1120px) {
    .shell-stat-streak{display:none;}
}

@media (max-width:1024px) {
    body.app-shell-active>header{width:100%;margin-left:0;}
    body.app-shell-active main#app-root,body.lframe-active main#app-root{width:100%!important;margin-left:0!important;}
    body.app-shell-active .site-footer{padding-left:20px;}
    .app-command-rail {
        z-index:130;
        width:min(320px,calc(100vw - 40px));
        transform:translateX(-105%);
        visibility:hidden;
        border-right-color:rgba(183,173,255,0.22);
        box-shadow:22px 0 55px rgba(24,20,48,0.28);
    }
    .app-command-rail.is-open{transform:translateX(0);visibility:visible;}
    .app-command-rail .app-rail-close{display:grid;}
    .app-command-rail .app-rail-collapse{display:none;}
    .app-command-rail .app-rail-brand{display:flex;}
    .app-command-rail .app-rail-brand span,.app-command-rail .app-rail-group-label,.app-command-rail .app-rail-link span,.app-command-rail .app-rail-context .admin-tab-btn,.app-command-rail .app-rail-context .profile-tab-btn{display:flex;}
    .app-command-rail .app-rail-panel-divider{display:block;}
    .app-command-rail .app-rail-context .admin-acc-sub.open{display:flex;}
    .app-command-rail .app-rail-link{justify-content:flex-start;gap:11px;padding-inline:11px;}
    .app-rail-collapsed .app-command-rail .app-rail-secondary{flex-direction:row;gap:7px;}
    .app-command-rail .app-rail-secondary .app-rail-dock-btn{justify-content:center;padding-inline:0;}
    .app-command-rail .app-rail-context .admin-acc-parent{justify-content:flex-start;padding-inline:12px;font-size:inherit;}
    .app-command-rail .app-rail-context .admin-acc-parent .admin-nav-icon{margin:0;font-size:inherit;}
    .app-command-rail .app-rail-context .admin-acc-chev,.app-command-rail .app-rail-context .admin-nav-badge{display:inline-block;}
    .app-rail-backdrop {
        position:fixed;
        inset:0;
        z-index:120;
        display:block;
        padding:0;
        border:0;
        background:rgba(31,26,57,0.46);
        backdrop-filter:blur(2px);
        -webkit-backdrop-filter:blur(2px);
    }
    .app-rail-backdrop[hidden]{display:none!important;}
    #main-nav.nav-auth-utility{flex-wrap:nowrap;gap:10px;padding-inline:14px;}
    .nav-auth-utility #mobile-menu-toggle{display:grid!important;order:0;}
    .shell-mobile-brand{display:flex;align-items:center;gap:8px;text-decoration:none;}
    .shell-mobile-brand img{width:31px;height:31px;}
    .shell-mobile-brand span{color:var(--shell-nav-text);font-family:var(--font-display),sans-serif;font-size:1.18rem;font-weight:800;line-height:1;}
    .nav-auth-utility .shell-route-context{min-width:0;margin-left:8px;}
    /* Phase 118: the bar is tight between 769px and 1024px — the field narrows rather than crowding
       the status strip. Phase 120 (Defect 2): the width is reserved at the larger (former-focus) size
       instead of growing on :focus, so focusing the field never reflows the status strip or nav links
       beside it — same fix as the base rule in variables.css, applied to this breakpoint's pair. */
    .nav-auth-utility .shell-search-input{width:224px;}
    .app-command-rail:not(.is-open) .app-rail-particle{will-change:auto;}
}
@media(prefers-reduced-motion:reduce) and (max-width:1024px){.app-command-rail{transition:none;}}

@media (max-width:768px) {
    .shell-nav-corners{inset:6px;--shell-nav-corner-width:20px;--shell-nav-corner-height:11px;}
    body>header::after{content:'· 07 · ◇ · 14 / 78 · ◌ · 21 · ◇ · 35 / 09 ·';right:68px;left:68px;letter-spacing:0.17em;text-shadow:0 52px var(--shell-nav-interface-warm);}
    #main-nav{flex-wrap:wrap;padding:10px 14px;}
    #mobile-menu-toggle{display:grid!important;order:-1;}
    .nav-links {
        display:none;
        flex-direction:column;
        width:100%;
        gap:2px;
        padding:9px 0 2px;
        border:0;
        border-top:1px solid rgba(111,95,228,0.11);
        border-radius:0;
        margin-top:5px;
        order:3;
        background:transparent;
        box-shadow:none;
    }
    #main-nav .nav-links>a{width:100%;justify-content:flex-start;padding:8px 10px;}
    #main-nav .nav-links>a.active{background:linear-gradient(90deg,rgba(111,95,228,0.1),transparent 72%);}
    #main-nav .nav-links>a::after{right:auto;bottom:4px;left:10px;transform:scaleX(0.35);transform-origin:left;}
    #main-nav .nav-links>a.active::after{transform:scaleX(1);}
    #main-nav .nav-links>a:hover::after,#main-nav .nav-links>a:focus-visible::after{transform:scaleX(0.72);}
    .nav-links.show{display:flex;animation:slideDown 0.3s ease;}
    .nav-auth-utility .shell-route-context{display:none;}
    /* ⚠️ THE FIELD IS NOT HIDDEN AT THIS WIDTH — IT MOVES. app-shell.js relocates the one mounted
       .shell-search form out of #main-nav into #nav-search-bar below the header, and back on the
       way up. This rule covers only the instant between a nav render and that relocation, so the
       field never flashes inside the row it is about to leave. Scoped to #main-nav rather than the
       two nav classes precisely so it stops applying the moment the form is moved out.

       History worth keeping: Phase 118 hid the field here outright and pointed at the command
       rail's Dictionary link; Phase 119 added a 44px trigger for the public nav ONLY, leaving
       logged-in learners with nothing; Phase 120 replaced the trigger with this always-visible row
       for both navs. A field you can see beats a button that reveals one. */
    #main-nav .shell-search{display:none;}
    .nav-search-bar{display:block;padding:9px 14px calc(9px + env(safe-area-inset-bottom));background:var(--nav-bg);border-bottom:1px solid rgba(111,95,228,0.14);box-shadow:0 12px 26px -24px rgba(43,33,94,0.34);}
    .nav-search-bar .shell-search{display:flex;width:100%;}
    .nav-search-bar .shell-search-shell,.nav-search-bar .shell-search-input{width:100%;}
    /* The `/` shortcut hint is a keyboard affordance, and there is no keyboard to hint at here. */
    .nav-search-bar .shell-search-key{display:none;}
    .nav-auth-utility .shell-status-strip{margin-left:auto;}
    .nav-auth-utility .nav-right-actions{margin-left:0;}
    @keyframes slideDown {
        from{opacity:0;transform:translateY(-10px);}
        to{opacity:1;transform:translateY(0);}
    }
}

@media (max-width:600px) {
    .shell-nav-corners{inset:5px;--shell-nav-corner-width:18px;--shell-nav-corner-height:10px;--shell-nav-corner-radius:7px;}
    body>header::after{content:'· 07 · ◇ · 14 / 78 · ◌ · 21 ·';right:65px;left:65px;font-size:0.5rem;letter-spacing:0.14em;text-shadow:0 51px var(--shell-nav-interface-warm);}
    #main-nav{gap:6px;padding:8px 12px;}
    #main-nav a.nav-logo{padding:5px 4px;}
    .nav-logo-container::after{display:none;}
    .mobile-menu-toggle {
        display:grid!important;
        place-items:center;
        width:38px;
        height:38px;
        padding:0;
        font-size:1.35rem;
    }
    .nav-logo-container{gap:7px;margin-right:auto;}
    .nav-logo-img{width:31px;height:31px;}
    .nav-logo-word{font-size:1.22rem;}
    .nav-right-actions{gap:8px;padding-left:0;border-left:0;}
    .nav-auth-utility{min-height:var(--app-header-height);}
    .nav-auth-utility .shell-mobile-brand span{display:none;}
    .nav-auth-utility .nav-go-pro{display:none;}
    .nav-auth-utility .shell-stat{padding-inline:7px;}
    .nav-auth-utility .shell-stat small{display:none;}
    .shell-level-popover{position:fixed;top:calc(var(--app-header-height) + 8px);right:12px;left:12px;width:auto;transform-origin:top center;}
    .nav-lang-btn{width:36px;height:36px;font-size:1.25rem;border-radius:11px;}
    .nav-notification-btn{width:36px;height:36px;border-radius:11px;font-size:0.98rem;}
    .nav-user-avatar{width:38px;height:38px;font-size:1.1rem;}
    .nav-notification-badge{top:-4px;right:-4px;min-width:17px;height:17px;font-size:0.58rem;}
    .notification-panel{top:calc(var(--app-header-height) + 6px);right:8px;width:calc(100vw - 16px);max-height:calc(100dvh - var(--app-header-height) - 14px);border-radius:16px;}
    .notification-panel-body{max-height:calc(100dvh - var(--app-header-height) - 73px);}
    .lframe-layout .tab-content-area{padding-bottom:40px;}
    .lframe-layout .sidebar-menu-card,.app-command-rail{width:min(304px,calc(100vw - 28px));}
    .lframe-layout .admin-tab-content,.lframe-layout .profile-tab-content{padding:18px 14px;border-radius:18px;}
    .has-surface-corners>.surface-corners{--surface-corner-size:22px;inset:8px;opacity:0.66;}
    .surface-corners-subtle>.surface-corners{--surface-corner-size:17px;inset:6px;opacity:0.42;}
}

@media (max-width:480px) {
    .nav-auth-utility .shell-status-strip{display:none;}
    .nav-auth-utility .nav-right-actions{margin-left:auto;gap:5px;}
    .notification-panel-head{padding-inline:11px;}
    .notification-mark-all{padding-inline:6px;font-size:0.71rem;}
}

@media (max-width:900px) {
    .public-support-layout{grid-template-columns:1fr;max-width:720px;}
    .public-support-side{display:grid;grid-template-columns:1fr 1fr;}
}

@media (max-width:600px) {
    .public-support-page{padding:38px 14px 58px;}
    .public-support-hero{margin-bottom:24px;}
    .public-support-hero p{font-size:0.9rem;}
    .public-support-side{display:flex;}
    .public-support-console{padding:20px 15px;}
    .public-support-fields-two{grid-template-columns:1fr;}
    .public-support-submit{align-items:stretch;flex-direction:column;}
    .public-support-submit .btn{width:100%;}
    .public-support-section-head{align-items:flex-start;}
    .public-support-ratebox{align-items:stretch;}
    .nav-public .nav-right-actions{margin-left:auto;}
}

/* ---------- Phase 83: learner Dashboard ---------- */
@media (max-width:1180px) {
    .dash-progress-grid{grid-template-columns:1fr;}
}

@media (max-width:900px) {
    .dash-mission-panel{grid-template-columns:100px minmax(0,1fr);min-height:0;}
    .dash-mission-art{width:100px;height:100px;}
    .dash-mission-actions{grid-column:1/-1;flex-direction:row;align-items:center;justify-content:space-between;width:100%;}
    .dash-flight-panel{grid-template-columns:1fr;}
    .dash-freeze{display:grid;grid-template-columns:46px minmax(0,1fr) auto;align-items:center;border-top:1px solid rgba(111,95,228,0.1);border-left:0;}
    .dash-progress-grid{grid-template-columns:1fr;}
    .dash-progress-panel{min-height:260px;}
}

@media (max-width:700px) {
    body.app-shell-active{--app-content-gutter:14px;--app-content-top:12px;}
    .dash-welcome {
        display:grid;
        grid-template-columns:minmax(0,1fr) auto;
        grid-template-areas:"kicker language" "title title" "context context";
        align-items:center;
        column-gap:10px;
        row-gap:5px;
        margin-bottom:14px;
    }
    .dash-welcome>div:first-child{display:contents;}
    .dash-kicker{grid-area:kicker;}
    .dash-welcome h1{grid-area:title;margin-block:1px 0;}
    .dash-welcome p{grid-area:context;}
    .dash-language{grid-area:language;min-width:0;justify-self:end;}
    .dash-language small{display:none;}
    .dash-track-grid{grid-template-columns:1fr;}
    .dash-track-panel{min-height:300px;}
    .dash-section{margin-top:28px;}
}

@media (max-width:600px) {
    body.app-shell-active{--app-content-gutter:12px;}
    .dash-welcome{column-gap:8px;row-gap:4px;padding-inline:2px;}
    .dash-welcome h1{font-size:1.65rem!important;}
    .dash-welcome p{font-size:0.78rem!important;}
    .dash-language{gap:7px;padding:6px 8px;}
    .dash-language-flag{width:31px;height:21px;flex-basis:31px;font-size:1.05rem;}
    .dash-language strong{max-width:90px;overflow:hidden;font-size:0.75rem;text-overflow:ellipsis;white-space:nowrap;}
    .dash-mission-panel{grid-template-columns:74px minmax(0,1fr);gap:12px;padding:25px 16px 17px;border-radius:19px;}
    .dash-mission-art{width:74px;height:74px;}
    .dash-mission-copy h2{font-size:1.3rem!important;}
    .dash-mission-copy p{font-size:0.82rem!important;}
    .dash-mission-meta{margin-top:8px;font-size:0.69rem;}
    .dash-mission-actions{align-items:stretch;flex-direction:column;gap:8px;}
    .dash-mission-cta{width:100%;min-width:0;}
    .dash-alt-link{justify-content:center;}
    .dash-section{margin-top:24px;}
    .dash-section-head h2{font-size:1.13rem!important;}
    .dash-track-panel,.dash-flight-main,.dash-progress-panel{padding:20px 17px;}
    .dash-track-head{grid-template-columns:42px minmax(0,1fr) auto;gap:10px;}
    .dash-track-icon{width:40px;height:40px;border-radius:13px;}
    .dash-track-head h3,.dash-panel-heading h2,.dash-panel-heading h3{font-size:1rem!important;}
    .dash-track-state{padding-inline:7px;font-size:0.64rem;}
    .dash-sector-trigger{max-width:42px;width:42px;padding:0;justify-content:center;}
    .dash-sector-trigger span,.dash-sector-trigger .fa-chevron-down{display:none;}
    .dash-vocab-metrics strong{font-size:1.28rem;}
    .dash-track-links{align-items:flex-start;}
    .dash-track-actions{gap:10px;}
    .dash-forecast{gap:5px;}
    .dash-forecast-day{grid-template-rows:17px 62px 15px;}
    .dash-forecast-bar{height:62px;}
    .dash-forecast-empty{grid-template-columns:1fr;gap:12px;}
    .dash-forecast-ghost{height:54px;}
    .dash-freeze{grid-template-columns:42px minmax(0,1fr);gap:12px;padding:18px 17px;}
    .dash-freeze-icon{width:42px;height:42px;}
    .dash-freeze .btn-ghost{grid-column:1/-1;justify-content:center;width:100%;}
    .dash-progress-grid{gap:14px;}
    .dash-mastery-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
    .dash-activity-stat dd{align-items:flex-start;flex-direction:column;gap:3px;}
    .dash-activity-stat dd small{max-width:100%;}
    .dash-sector-options{grid-template-columns:1fr;}
    .dash-dialog-overlay{align-items:flex-end;padding:10px;}
    .dash-dialog{max-height:91dvh;padding:20px 16px;border-radius:20px;}
    .dash-freeze-fields{grid-template-columns:1fr;}
    .dash-dialog-actions{align-items:stretch;flex-direction:column-reverse;}
    .dash-dialog-actions .btn,.dash-dialog-actions .btn-ghost{justify-content:center;width:100%;}
}

@media (max-width:390px) {
    .dash-welcome p{display:none;}
    .dash-language{background:transparent;border-color:transparent;backdrop-filter:none;-webkit-backdrop-filter:none;}
    .dash-language>span:last-child{display:none;}
    .dash-mission-panel{grid-template-columns:66px minmax(0,1fr);}
    .dash-mission-art{width:66px;height:66px;}
    .dash-mission-actions{grid-column:1/-1;}
    .dash-track-links{flex-direction:column;}
    .dash-vocab-metrics>div{padding-inline:5px;}
}

/* ---------- Phase 86: Word Orbit ---------- */
@media (max-width:1024px) {
    .orbit-toolbar{grid-template-columns:minmax(220px,1fr) minmax(160px,200px) minmax(150px,180px);}
}

@media (max-width:820px) {
    .orbit-word-list{grid-template-columns:1fr;}
}

@media (max-width:760px) {
    .orbit-command-head{grid-template-columns:48px minmax(0,1fr) auto;}
    .orbit-command-icon{width:48px;height:48px;}
    .orbit-mastery{min-width:142px;}
    .orbit-toolbar{grid-template-columns:1fr 1fr;}
    .orbit-search{grid-column:1/-1;}
    .orbit-inspector-layer{display:flex;align-items:flex-end;}
    .orbit-inspector {
        position:relative;
        top:auto;
        right:auto;
        width:100%;
        height:auto;
        max-height:88dvh;
        padding:23px 20px 20px;
        border-top:1px solid rgba(111,95,228,0.2);
        border-left:0;
        border-radius:22px 22px 0 0;
        animation:orbitInspectorSheetIn 0.24s ease-out;
    }
    @keyframes orbitInspectorSheetIn{from{opacity:0;transform:translateY(30px);}to{opacity:1;transform:translateY(0);}}
}
@media(prefers-reduced-motion:reduce) and (max-width:760px){.orbit-inspector{animation:none;}}

@media (max-width:600px) {
    .vocabulary-container{padding-bottom:42px;}
    .orbit-command-panel{padding:15px 14px 12px;border-radius:18px;}
    .orbit-command-head{grid-template-columns:58px minmax(0,1fr) auto;gap:10px;}
    .orbit-command-art .module-focal-art{width:58px;height:58px;}
    .orbit-command-head h1{font-size:1.35rem!important;white-space:nowrap;}
    .orbit-command-head p{font-size:0.69rem!important;}
    .orbit-eyebrow{font-size:0.56rem;letter-spacing:0.12em;}
    .orbit-mastery{min-width:92px;padding:5px 0 5px 9px;}
    .orbit-mastery strong{font-size:0.72rem;}
    .orbit-mastery>span{display:none;}
    .orbit-metric-grid{gap:5px;margin-top:10px;}
    .orbit-metric{justify-content:center;gap:3px;padding:6px 4px;border-radius:9px;}
    .orbit-metric span{font-size:0.58rem;}
    .orbit-metric strong{font-size:0.78rem;}
    .orbit-session-dock{grid-template-columns:minmax(0,1fr) auto;gap:8px;margin-top:8px;padding:8px 8px 8px 10px;}
    .orbit-session-icon{display:none;}
    .orbit-session-copy>span{font-size:0.52rem;}
    .orbit-session-copy strong{font-size:0.76rem;}
    .orbit-session-copy small{display:none;}
    .orbit-session-action{min-width:106px;padding:7px 9px;font-size:0.69rem;}
    .orbit-mode-links{display:grid;grid-template-columns:repeat(4,1fr);gap:3px;margin-top:6px;}
    .orbit-mode-links a{justify-content:center;gap:4px;padding:5px 3px;font-size:0.56rem;}
    .orbit-chart-panel{margin-top:11px;padding:15px 13px 18px;border-radius:18px;}
    .orbit-chart-head{align-items:center;margin-bottom:10px;}
    .orbit-chart-head h2{font-size:1.02rem!important;}
    .orbit-result-count{font-size:0.64rem!important;}
    .orbit-toolbar{gap:6px;}
    .orbit-search input,.orbit-select-wrap .dd-btn{height:38px;border-radius:10px;font-size:0.76rem;}
    .orbit-state-filters{gap:4px;margin:7px -2px 0;padding:0 2px 3px;overflow-x:auto;scrollbar-width:none;}
    .orbit-state-filters::-webkit-scrollbar{display:none;}
    .orbit-state-filters button{flex:none;gap:4px;padding:5px 7px;font-size:0.63rem;}
    .orbit-state-filters span{min-width:17px;padding-inline:4px;font-size:0.58rem;}
    .orbit-word-list{gap:6px;margin-top:9px;}
    .orbit-word-row{grid-template-columns:27px minmax(0,1fr) minmax(90px,auto) 10px;gap:8px;min-height:59px;padding:8px 9px;border-radius:10px;}
    .orbit-word-meta{display:none;}
    .orbit-state-mark{width:26px;height:26px;border-radius:8px;}
    .orbit-word-copy strong{font-size:0.82rem;}
    .orbit-word-copy small{font-size:0.66rem;}
    .orbit-word-schedule strong{font-size:0.63rem;}
    .orbit-word-schedule small{font-size:0.56rem;}
    .orbit-word-skeleton>span:nth-child(3){display:none;}
    .orbit-empty-state{min-height:210px;padding:28px 14px;}
    .orbit-empty-state p{font-size:0.82rem!important;}
    .orbit-pagination{flex-direction:column;gap:7px;margin-top:14px;}
    .orbit-inspector{padding:20px 17px 17px;}
    .orbit-inspector-identity{margin-top:18px;}
    .orbit-inspector-identity h2{font-size:1.62rem!important;}
    .orbit-inspector-identity p,.orbit-inspector-mnemonic p{font-size:0.79rem!important;}
    .orbit-inspector-image{height:128px;margin-top:16px;}
    .orbit-inspector-meta{margin-top:18px;}
    .orbit-inspector-actions{align-items:stretch;flex-direction:column;}
    .orbit-inspector-actions .btn-ghost{justify-content:center;width:100%;}
}

@media (max-width:390px) {
    .orbit-command-head p{max-width:150px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
    .orbit-mastery{min-width:74px;}
    .orbit-mastery strong{font-size:0.64rem;}
    .orbit-metric span{max-width:48px;}
    .orbit-mode-links a span{display:none;}
    .orbit-mode-links a{font-size:0.7rem;}
    .orbit-word-schedule small{display:none;}
}

/* ---------- Phase 87: user provisioning dialogs ---------- */
@media (max-width:600px) {
    .users-add-btn{width:100%;margin-left:0;justify-content:center;}
    .user-modal-overlay{align-items:flex-end;padding:8px;}
    .user-modal-card{max-height:92dvh;padding:22px 17px;border-radius:18px 18px 12px 12px;}
    .user-create-grid{grid-template-columns:1fr;gap:0;}
    .user-modal-intro{margin-right:24px;}
    .user-password-mode{flex-direction:column;}
    .user-modal-actions{align-items:stretch;flex-direction:column-reverse;}
    .user-modal-actions .btn,.user-modal-actions .btn-ghost{justify-content:center;width:100%;}
    .user-credential-row>div{grid-template-columns:1fr;}
    .user-credential-row .btn-ghost{justify-content:center;}
    .udt-row{align-items:flex-start;flex-direction:column;gap:3px;}
    .udt-value{text-align:left;}
    .udt-account-actions{align-items:stretch;flex-direction:column;}
    .udt-account-actions .btn-ghost{justify-content:center;width:100%;}
}

/* ---------- General: Languages ---------- */
@media (max-width:640px) {
    .vocab-lang-form{grid-template-columns:1fr;}
    .vocab-lang-form .rl-variant-lab{grid-column:auto;}
    .vocab-langs>#rl-save{width:100%;justify-content:center;}
    .vocab-lang-row{align-items:flex-start;}
    .vocab-lang-row-counts{width:100%;}
}

/* ---------- Phase 97.1: External API ---------- */
@media (max-width:700px) {
    .external-api-secret{grid-template-columns:1fr;padding:14px;}
    .external-api-secret-actions{grid-column:1;align-items:stretch;flex-direction:column;}
    .external-api-secret-actions .btn-ghost,.external-api-form>.btn,.external-api-flag-auth .btn-ghost{justify-content:center;width:100%;}
}