/**
 * AMA Speaking - phone-first layout (not a shrunk laptop UI).
 * Phones: compact top bar + bottom tab bar; tiles as tappable rows; full-width content.
 */
html[data-ama-phone="1"] .desktop-sidebar,
html[data-ama-phone="1"] #nav-toggle {
 display: none !important;
}

@media (max-width: 959px) {
 :root {
 --ama-mobile-header: calc(54px + env(safe-area-inset-top, 0px));
 --ama-mobile-chrome: var(--ama-mobile-header);
 --ama-mobile-bottom: calc(64px + env(safe-area-inset-bottom, 0px));
 }

 html {
 -webkit-tap-highlight-color: transparent;
 }

 .site-header {
 position: sticky;
 top: 0;
 z-index: 8500;
 padding-top: env(safe-area-inset-top, 0px);
 box-shadow: 0 2px 12px rgba(0, 0, 0, 0.22);
 }

 /* One compact course strip at top - no duplicate bottom tabs */
 html:not(.ama-nav-collapsed) .top-main-nav-wrap {
 display: block !important;
 padding: 2px 8px 4px !important;
 border-top: 1px solid rgba(214, 179, 106, 0.22);
 }

 html.ama-nav-collapsed .top-main-nav-wrap {
 display: none !important;
 }

 #mobile-bottom-nav {
 display: none !important;
 position: fixed;
 bottom: 0;
 left: 0;
 right: 0;
 z-index: 9000;
 margin: 0;
 padding: 6px 4px calc(6px + env(safe-area-inset-bottom, 0px));
 justify-content: space-around;
 align-items: stretch;
 gap: 2px;
 background: linear-gradient(180deg, #0b1733 0%, #132a52 100%);
 border-top: 2px solid rgba(214, 179, 106, 0.55);
 box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.28);
 }

 body[class*="view-"]:not(.view-admin):not(.practice-focus):not(.ama-study-focus) #mobile-bottom-nav button {
 flex: 1;
 min-width: 0;
 min-height: 48px;
 display: flex;
 flex-direction: column;
 align-items: center;
 justify-content: center;
 gap: 3px;
 padding: 6px 2px;
 border: none;
 border-radius: 12px;
 background: transparent;
 color: rgba(255, 255, 255, 0.82);
 font: 700 0.58rem system-ui, sans-serif;
 cursor: pointer;
 -webkit-tap-highlight-color: transparent;
 }

 body[class*="view-"]:not(.view-admin):not(.practice-focus):not(.ama-study-focus) #mobile-bottom-nav button i {
 font-size: 1.15rem;
 }

 body[class*="view-"]:not(.view-admin):not(.practice-focus):not(.ama-study-focus) #mobile-bottom-nav button.active {
 color: #fff;
 background: rgba(217, 39, 54, 0.35);
 box-shadow: inset 0 0 0 1px rgba(214, 179, 106, 0.45);
 }

 body[class*="view-"]:not(.view-admin):not(.practice-focus) #app-main {
 padding-bottom: calc(54px + env(safe-area-inset-bottom, 0px)) !important;
 padding-left: max(10px, env(safe-area-inset-left, 0px));
 padding-right: max(10px, env(safe-area-inset-right, 0px));
 }

 html:not(.ama-nav-collapsed) .top-main-nav-wrap .ama-nav-pill {
 min-height: 32px !important;
 padding: 4px 10px !important;
 font-size: 0.62rem !important;
 border-radius: 999px !important;
 flex-direction: row !important;
 gap: 5px !important;
 }

 html:not(.ama-nav-collapsed) .top-main-nav-wrap .ama-nav-pill span {
 white-space: nowrap;
 }

 html:not(.ama-nav-collapsed) .top-main-nav-wrap .ama-nav-pill i {
 font-size: 0.78rem !important;
 }

 html:not(.ama-nav-collapsed) .top-main-nav-wrap .top-main-nav {
 display: flex !important;
 flex-wrap: nowrap !important;
 overflow-x: auto !important;
 gap: 4px !important;
 padding: 2px 0 !important;
 -webkit-overflow-scrolling: touch;
 }

 body.view-hub .quick-nav-controls,
 body.view-hub .ama-quick-nav {
 display: none !important;
 }

 body:not(.view-hub):not(.view-admin) .quick-nav-controls,
 body:not(.view-hub):not(.view-admin) .ama-quick-nav {
 display: flex !important;
 flex-direction: row !important;
 left: max(10px, env(safe-area-inset-left, 0px));
 right: auto;
 bottom: calc(10px + env(safe-area-inset-bottom, 0px));
 gap: 6px;
 }

 #nav-toggle {
 display: none !important;
 }

 .ama-topbar__inner {
 flex-wrap: nowrap;
 padding: 8px 10px 6px !important;
 }

 .ama-topbar__start {
 min-width: 0;
 flex: 1 1 auto;
 }

 .ama-topbar-actions {
 flex-shrink: 0;
 gap: 4px;
 }

 .topbar--pro .brand-text-block {
 display: none;
 }

 .topbar--pro .brand-logo {
 height: 36px;
 max-width: 96px;
 }

 .topbar--pro .brand-logo-frame {
 padding: 3px 6px;
 }

 .ama-util-btn {
 min-width: 44px;
 min-height: 44px;
 }

 .ama-topbar-signin {
 min-width: 44px;
 min-height: 44px;
 }

 body.view-hub #ama-topbar-back:disabled,
 body.view-hub #ama-topbar-forward:disabled {
 display: none;
 }

 /* Home - native app feel */
 body.view-hub #app-main {
 padding-left: 0 !important;
 padding-right: 0 !important;
 }

 body.view-hub .ama-home-hero--ref {
 padding-left: 10px;
 padding-right: 10px;
 }

 body.view-hub .ama-home-body {
 padding-left: 12px;
 padding-right: 12px;
 }

 body.view-hub .ama-home-search {
 min-height: 48px;
 }

 body.view-hub .ama-home-search button,
 body.view-hub .ama-home-search input {
 min-height: 44px;
 }

 /* Campus pages - full width, not a narrow desktop column */
 body.ama-pre-surface .wrap,
 body.ama-ielts-campus .wrap,
 body.ama-pre-surface .wrap--light,
 body.ama-ielts-campus .wrap--light {
 max-width: 100%;
 margin-left: 0;
 margin-right: 0;
 border-radius: 0;
 padding-left: 12px;
 padding-right: 12px;
 }

 body.ama-pre-surface .ama-pre-studio__hint,
 body.ama-ielts-campus .ama-pre-studio__hint {
 font-size: 0.82rem;
 line-height: 1.45;
 margin-bottom: 12px;
 }

 /* IELTS campus */
 body.ama-ielts-campus .ielts-wrap {
 padding-left: max(12px, env(safe-area-inset-left, 0px));
 padding-right: max(12px, env(safe-area-inset-right, 0px));
 }

 body.ama-ielts-campus .ielts-tabs {
 top: var(--ama-mobile-chrome);
 margin-left: -4px;
 margin-right: -4px;
 padding-left: 8px;
 padding-right: 8px;
 -webkit-overflow-scrolling: touch;
 scroll-snap-type: x proximity;
 }

 body.ama-ielts-campus .ielts-tab {
 scroll-snap-align: start;
 padding: 5px 9px;
 font-size: 0.72rem;
 min-height: 30px;
 }

 body.ama-ielts-campus .ielts-tab span {
 max-width: 9.5em;
 overflow: hidden;
 text-overflow: ellipsis;
 white-space: nowrap;
 }

 body.ama-ielts-campus .ielts-section {
 padding: 14px 12px;
 border-radius: 14px;
 }

 /* Tablet: 2-column tiles */
 body.ama-ielts-campus .ama-campus-tiles,
 body.ama-pre-surface .ama-campus-tiles {
 grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
 gap: 10px !important;
 }

 body.ama-ielts-campus .ama-campus-studio .ama-pre-tile,
 body.ama-pre-surface .ama-campus-studio .ama-pre-tile {
 aspect-ratio: unset;
 min-height: 48px;
 padding: 8px 10px !important;
 }

 body.ama-ielts-studio .ama-pre-tile--studybook {
 grid-column: 1 / -1 !important;
 min-height: 72px;
 flex-direction: row;
 justify-content: flex-start;
 gap: 14px;
 padding: 14px 16px !important;
 }

 .ama-ielts-book-door {
 width: 100%;
 min-height: 52px;
 margin-bottom: 12px;
 }

 /* Speaking book */
 .sbook-part-toggle {
 grid-template-columns: 1fr;
 }

 .sbook-topic-grid {
 grid-template-columns: 1fr !important;
 }

 .sbook-topic-card__qlist {
 font-size: 0.76rem;
 max-height: none;
 }

 .sbook-q-index__row {
 flex-direction: column;
 align-items: stretch;
 }

 .sbook-q-index__main {
 min-height: 44px;
 }

 .sbook-listen-icon {
 align-self: flex-end;
 width: 44px !important;
 height: 44px !important;
 }

 .sbook-textarea {
 font-size: 16px;
 min-height: 140px;
 }

 .sbook-mode-toggle {
 display: grid;
 grid-template-columns: 1fr 1fr;
 gap: 8px;
 }

 .sbook-mode {
 min-height: 48px;
 justify-content: center;
 }

 /* Homework / practice touch targets */
 .practice-record,
 .practice-submit-hw,
 .hw-q-card button,
 .ielts-btn {
 min-height: 48px;
 }

 input[type="text"],
 input[type="email"],
 input[type="search"],
 input[type="password"],
 textarea,
 select {
 font-size: 16px !important;
 }

 .mobile-install-bar {
 bottom: calc(var(--ama-mobile-bottom) + 8px) !important;
 }

 /* Hamburger menu - bottom sheet (phone pattern) */
 .ama-course-menu {
 place-items: end stretch;
 padding: 0;
 align-items: stretch;
 }

 .ama-course-menu__panel {
 width: 100%;
 max-width: none;
 margin: 0;
 margin-top: auto;
 border-radius: 20px 20px 0 0;
 max-height: min(88vh, 640px);
 overflow-y: auto;
 -webkit-overflow-scrolling: touch;
 padding-bottom: calc(20px + env(safe-area-inset-bottom, 0px));
 }

 .ama-course-menu__grid button {
 min-height: 52px;
 font-size: 0.95rem;
 padding: 14px 16px;
 }

 .ama-course-menu__close {
 min-height: 52px;
 font-size: 1rem;
 }

 .ielts-hero {
 padding: 20px 14px 18px !important;
 border-radius: 0 !important;
 margin-left: -12px;
 margin-right: -12px;
 width: calc(100% + 24px);
 max-width: none;
 }

 .ielts-hero h2 {
 font-size: 1.35rem !important;
 }

 .ielts-hero__stats {
 flex-direction: column;
 align-items: stretch;
 }

 .ielts-stat {
 width: 100%;
 justify-content: space-between;
 }
}

/* Narrow phones - list rows instead of tiny square tiles */
@media (max-width: 559px) {
 body.ama-ielts-campus .ama-campus-tiles,
 body.ama-pre-surface .ama-campus-tiles {
 grid-template-columns: 1fr !important;
 gap: 8px !important;
 }

 .ama-campus-studio .ama-pre-tile,
 .ama-campus-studio .ama-pre-tile--lead {
 flex-direction: row;
 justify-content: flex-start;
 align-items: center;
 min-height: 56px;
 padding: 10px 14px !important;
 gap: 14px;
 aspect-ratio: unset;
 border-radius: 14px;
 }

 .ama-campus-studio .ama-pre-tile span,
 .ama-campus-studio .ama-pre-tile small {
 text-align: left;
 }

 .ama-campus-studio .ama-pre-tile small {
 display: block;
 margin-top: 2px;
 }

 .ama-campus-studio .ama-pre-tile i,
 .ama-pre-studio.ama-campus-studio .ama-pre-tile--lead i,
 .ama-ielts-studio .ama-pre-tile--lead i {
 width: 44px !important;
 height: 44px !important;
 min-width: 44px;
 font-size: 1.05rem !important;
 margin: 0;
 }

 .ama-ielts-studio .ama-pre-tile--studybook {
 flex-direction: row;
 }

 #ama-study-focus-top {
 display: none !important;
 }
}

@media (max-width: 420px) {
 #ama-easy-listen-toggle {
 display: none !important;
 }

 .ama-topbar-actions .app-refresh-btn {
 order: 10;
 }
}

@media (hover: none) and (pointer: coarse) {
 .ama-campus-studio .ama-pre-tile:hover,
 .ama-home-course:hover,
 .sbook-topic-card:hover {
 transform: none;
 box-shadow: inherit;
 }

 .ama-campus-studio .ama-pre-tile:active {
 transform: scale(0.98);
 opacity: 0.92;
 }
}

/* Teaching stability: stop layout jump / shake on phones, iPads, TV browsers */
@media (max-width: 960px) {
 html { scroll-behavior: auto !important; }
 body { overscroll-behavior-y: contain; }
 .view { min-width: 0; max-width: 100%; }
 .view img, .view video, .view canvas, .view iframe { max-width: 100%; height: auto; }
 .sch-table-wrap, .sch-tablewrap { -webkit-overflow-scrolling: touch; touch-action: pan-x pan-y pinch-zoom; }
}
@media (min-width: 961px) {
 /* TV / laptop: no horizontal shake, but keep vertical trackpad scroll alive */
 html { overflow-x: hidden; overflow-y: auto; }
 body { overflow-x: hidden; overflow-y: visible; }
 #app-main, .view--active { max-width: 100vw; }
}