/* =====================================================================
   sm360-mobile.css  ·  SkillMe360 phone layer  ·  26 Sep 2026
   ---------------------------------------------------------------------
   ONE file, linked once near the end of <body> on every page.
   EVERY rule lives inside a phone-width media query, so desktop and
   tablet-landscape are untouched by construction.

   Each block below fixes a bug that was MEASURED on the live site in a
   real Chromium at iPhone/Android widths (360-440 px) - not guessed.
   The page and element each block targets is named in its comment.

   Rollback: delete the one <link data-sm360-mobile> line from a page.
   ===================================================================== */

/* WHICH SCREENS: phones in portrait (up to 760px wide) AND phones turned
   sideways (touch screen, under 500px tall - landscape iPhones are 844-956
   wide x 360-440 tall). Tested: sideways phones fell outside a width-only
   rule and got the desktop layout squeezed into 390px of height. Tablets
   are taller than 500px, so they keep their current layout.            */
@media (max-width: 760px), (hover: none) and (pointer: coarse) and (max-height: 500px) {

  /* ---------- 0. EVERY PAGE -------------------------------------------
     a) iPhone Safari ZOOMS the whole page when you tap into a text box
        whose font is under 16px. Measured under 16px: instructor booking
        name/email (14.4), DOT ask box on every dashboard (13.1), corporate
        lead form (14.4), Sound Lab search (12), IELTS writing boxes (15.2),
        dictionary filter (13.3). 16px stops the zoom on every one.
     b) Stop iOS inflating text when the phone is turned sideways.
     c) Page background was transparent (Sound Lab): the iPhone
        rubber-band scroll showed a white band. Paint it dark.         */
  input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]):not([type=file]):not([type=hidden]),
  textarea, select { font-size: 16px !important; }
  html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; background-color: #030712; }

  /* ---------- 1. HOMEPAGE (index.html) ---------------------------------
     Measured: below 900px the main menu (.navlinks) is display:none and
     NOTHING replaces it - no way to reach Student / Corporate /
     Instructor / About from the header on a phone. The header was also
     120px tall (two rows of buttons).
     Fix: row 1 = logo + MY360; below it the full menu, wrapped so all
     six links are visible without swiping. The "free mock test" button
     stays in the hero, directly below.                               */
  header.nav .navin { display: grid !important; grid-template-columns: minmax(0,1fr) auto;
    align-items: center; gap: 8px 10px !important; padding: 10px 16px 0 !important; }
  header.nav .brand { grid-row: 1; grid-column: 1; min-width: 0; }
  header.nav .navcta { grid-row: 1; grid-column: 2; justify-self: end; width: auto !important;
    flex-wrap: nowrap !important; gap: 8px !important; }
  header.nav .navcta .btn { flex: 0 0 auto !important; font-size: 13px !important; padding: 9px 13px !important; }
  header.nav .navcta .btn-primary { display: none !important; }
  header.nav .navlinks { display: flex !important; grid-row: 2; grid-column: 1 / -1;
    flex-wrap: wrap !important; gap: 2px 18px !important; padding: 2px 0 8px; }
  /* the account pill injected into the menu duplicates the MY360 button
     in row 1 (same destination: access.html) - hidden on phones only */
  header.nav .navlinks #sm360PassportSlot { display: none !important; }
  header.nav .navlinks a { font-size: 14px !important; padding: 7px 0; flex: 0 0 auto; }

  /* ---------- 2. SIGN-IN (access.html) ---------------------------------
     Measured: the sign-in card was 468px wide on a 390px phone - right
     edge cut off ("Create Acc...", "Forgot p...", "S & P"). Cause: grid
     column refused to shrink below the brand row's nowrap content.   */
  .axwrap { grid-template-columns: minmax(0,1fr) !important; }
  .axwrap > * { min-width: 0 !important; }
  .axleft { padding: 22px 18px !important; }
  .axbrand { flex-wrap: wrap; gap: 10px !important; }
  .axbrand .secure { font-size: 12px !important; padding: 7px 12px !important; }
  .axleft .tog > * { min-width: 0; }

  /* ---------- 3. DASHBOARD SHELL (ielts / corporate / parent) ----------
     Measured: the floating menu buttons (.sb-toggle-btn, fixed at the top
     corners) sat ON TOP of the first line of each page - "ood afternoon"
     on corporate + parent, the logo on the student page. Content also had
     32px side padding on a 390px screen.
     Fix: reserve a clear strip at the top, tighten side padding.     */
  .page.active > main { padding: 74px 16px 104px !important; }
  /* Corporate: its top bar (#cxn-bar) already has the same two buttons
     (All sections = left menu, Team panel = right panel). When that bar
     is showing, the duplicate floating pair is hidden and content only
     needs to clear the bar. When the user hides the bar, they come back. */
  html[data-cxnav="on"] .sb-toggle-btn { display: none !important; }
  html[data-cxnav="on"] .page.active > main { padding-top: 18px !important; }
  /* Parent + student: the accessibility button sat exactly under the
     right-hand menu button (both fixed at the top-right corner) - one of
     them could not be tapped. Move it beside, not under. */
  html:not([data-cxnav="on"]) body:has(.page.active > .sb-toggle-btn.right-toggle) .sma-fab { right: 70px !important; top: 18px !important; }
  /* corporate with its top bar showing: the floating accessibility button
     sat ON the bar's search/panel buttons. It sits just below the bar. */
  html[data-cxnav="on"] .sma-fab { top: calc(54px + env(safe-area-inset-top, 0px)) !important; right: 12px !important; }
  /* The row under the greeting (.top-stats: Dictionary, DOT, Sound Lab,
     stat pills, avatar) was 727px wide on corporate and started at
     x=407 on the student page - i.e. entirely OFF the screen. On a phone
     the Sound Lab / DOT / Dictionary buttons could not be reached from the
     dashboard top at all. Now: greeting full width, row wraps below it. */
  .page.active > main > .top-bar { flex-wrap: wrap !important; gap: 12px !important; align-items: flex-start !important; }
  .page.active > main > .top-bar > .greet { flex: 1 1 100% !important; min-width: 0 !important; }
  .page.active > main > .top-bar > .top-stats { flex: 1 1 100% !important; flex-wrap: wrap !important;
    justify-content: flex-start !important; gap: 8px !important; min-width: 0 !important; }
  .page.active > main > .top-bar > .sm-speed { flex: 0 0 auto; }
  /* corporate top bar: breadcrumb was squeezed to "Dashbo..." */
  #cxn-bar { gap: 2px !important; padding-left: 4px !important; padding-right: 4px !important; }
  #cxn-bar #cxn-open span, #cxn-bar #cxn-open kbd { display: none !important; }
  /* inside a lesson the bar adds a "Lesson 1/10" pill and the long lesson
     title pushed the bar's last buttons (panel, hide bar) off the edge.
     The breadcrumb now gives way first; every button stays on screen. */
  #cxn-bar #cxn-crumbs { flex: 1 1 0 !important; min-width: 0 !important; overflow: hidden !important; }
  #cxn-bar > :not(#cxn-crumbs) { flex-shrink: 0 !important; }
  #cxn-bar .cxn-sep { display: none !important; }
  /* measured inside a lesson at 360px: the bar needed 385px (menu, back,
     forward, the 164px "< Lesson 1/10 >" stepper, search, panel, hide).
     While a lesson is open, the Forward arrow (redo of Back, rarely used)
     steps aside; Back, the lesson's own previous/next and every other
     button stay at full size. Forward returns outside lessons.       */
  #cxn-bar:has(#cxn-step.on) #cxn-fwd { display: none !important; }
  #cxn-step .cxn-num { letter-spacing: 0 !important; }
  /* ...and the lesson TITLE, which lived in the breadcrumb and would be
     squeezed away, gets its own full-width second row in the bar (it is
     shown nowhere else on the lesson screen). Everything the page pins
     under the bar (46px on desktop) moves down to match.              */
  html[data-cxnav="on"] #cxn-bar:has(#cxn-step.on) { height: 84px !important; flex-wrap: wrap !important;
    align-content: flex-start; row-gap: 0 !important; padding-top: 7px !important; padding-bottom: 4px !important; }
  html[data-cxnav="on"] #cxn-bar:has(#cxn-step.on) #cxn-open { margin-left: auto !important; }
  html[data-cxnav="on"] #cxn-bar:has(#cxn-step.on) #cxn-crumbs { order: 99; flex: 1 1 100% !important; overflow: hidden !important;
    padding: 2px 6px 0 !important; height: 40px; max-height: 40px; align-items: center !important; }
  html[data-cxnav="on"] #cxn-bar:has(#cxn-step.on) .cxn-crumb:not(.now), html[data-cxnav="on"] #cxn-bar:has(#cxn-step.on) .cxn-chev { display: none !important; }
  html[data-cxnav="on"] #cxn-bar:has(#cxn-step.on) .cxn-crumb.now { max-width: 100% !important; white-space: normal !important;
    overflow: visible !important; text-overflow: clip !important; text-align: left; line-height: 1.25; font-size: .84rem !important; padding: 0 !important; }
  html[data-cxnav="on"]:has(#cxn-step.on) #corporate-dashboard { padding-top: 84px !important; }
  html[data-cxnav="on"]:has(#cxn-step.on) #corporate-dashboard > .right { top: 84px !important; height: calc(100vh - 84px) !important; }
  html[data-cxnav="on"]:has(#cxn-step.on) #cxr, html[data-cxnav="on"]:has(#cxn-step.on) #cx-pro-ov, html[data-cxnav="on"]:has(#cxn-step.on) #sml-ov { top: 84px !important; }
  /* the lesson player is a full-screen layer pinned to the very top, UNDER
     the bar - its own header (step counter, audio, close) was hidden behind
     the bar. (Same on desktop with the 46px bar - flagged, not changed:
     this file only touches phones.) On phones it now starts below the bar. */
  html[data-cxnav="on"]:has(#cxn-step.on) .cr-player { top: 84px !important; }
  /* simulation scene row: number | title | "Hear the situation" could not
     wrap - the pill was cut at the right edge */
  .cr-throle { flex-wrap: wrap !important; row-gap: 8px; }
  .cr-throle > * { min-width: 0; }

  /* STUDENT lesson player (every Speaking / Writing lesson) - found by
     opening every screen: the sticky lesson header's grid column took the
     title's unwrapped width (437px), so "SKILLME360 - IELTS SPEAKING..." and
     the "1 / 9" step counter ran off the screen and widened the page to
     544px. Column now fits; the title wraps instead of being cut.      */
  .wiz-header { grid-template-columns: 36px minmax(0,1fr) !important; }
  .wiz-header > *, .wiz-progress-wrap, .wiz-progress-meta { min-width: 0 !important; max-width: 100%; }
  .wiz-title-mini { white-space: normal !important; overflow-wrap: anywhere; flex: 1 1 auto; min-width: 0; line-height: 1.3; }
  .wiz-step-counter { flex: 0 0 auto; margin-left: 8px; }
  /* Mock Tests: the test picker dropdown ran off the right edge */
  /* lesson step navigator: 9 desktop columns squeezed to 5 on a phone -
     long step names ("Contrast/Consequence/Anecdote") ran off the edge */
  .wiz-jump-menu { grid-template-columns: repeat(3, minmax(0,1fr)) !important; }
  .wiz-jump-btn { min-width: 0 !important; }
  .wiz-jump-name { white-space: normal !important; overflow-wrap: anywhere; }
  /* score/mock history table (student) and lessons table (parent): with the
     larger-text or reading-font setting the last column ("PRACTICE
     INDICATOR", "Mark complete") spilled past its card and was clipped.
     The card now scrolls sideways ONLY when the table needs it - the same
     treatment the parent calendar card already had.                  */
  .sx-card:has(> .sx-table), .px3-card:has(> .px3-table) { overflow-x: auto !important; overflow-y: hidden !important; -webkit-overflow-scrolling: touch; }
  /* mini Sound Lab window (dashboard music button): header row could not
     wrap, pushing its title off the edge */
  #sml-bar { flex-wrap: wrap !important; row-gap: 6px; }
  #sml-title { min-width: 0 !important; flex: 1 1 auto; }
  .page.active select { max-width: 100% !important; min-width: 0 !important; }
  /* each mock-test row (tag | title | score | button) could not wrap, so
     the title got 48px. Rows wrap on phones, title takes the line.     */
  .mk-test-row { flex-wrap: wrap !important; row-gap: 10px !important; }
  .mk-test-row > .mt-main { flex: 1 1 calc(100% - 80px) !important; }

  /* shared journey timeline (corporate, student, parent, school,
     instructor): 7 fixed columns ~ 465px inside a 260px card - labels
     collided ("AssessmentWorkshop") and ran off the edge. Now swipes. */
  .journey-card { padding: 20px 16px !important; overflow: hidden; }
  .journey-track { overflow-x: auto !important; -webkit-overflow-scrolling: touch;
    grid-auto-columns: 84px; padding-bottom: 6px; }
  .journey-track > * { min-width: 96px; }
  .journey-track .step-name, .journey-track .step-status { font-size: 12.5px !important; white-space: nowrap; }

  /* CORPORATE INNER SCREENS - found by opening every screen (142 of them).
     Book Training, Enrollments, Team Progress, Certifications, Billing:
     the .cx-split grid column sized itself to its content (467-552px on a
     390px phone) so forms and lists ran off the right edge.            */
  .cx-split { grid-template-columns: minmax(0,1fr) !important; }
  .cx-split > *, .cx-panel { min-width: 0 !important; max-width: 100% !important; }
  .cx-panel { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .cx-panel input, .cx-panel select, .cx-panel textarea { max-width: 100%; min-width: 0; }
  /* Calendar: 7 day columns x 71px = 497px. Now 7 equal columns that fit. */
  .cx-calgrid { grid-template-columns: repeat(7, minmax(0,1fr)) !important; gap: 3px !important; }
  .cx-calgrid > * { min-width: 0 !important; padding-left: 3px !important; padding-right: 3px !important; overflow: hidden; }
  .cx-calgrid * { font-size: 11px !important; }
  /* Learning Academy: greeting squeezed beside the readiness ring, the
     settings gear pushed off the edge, heat-map table ~420px wide.     */
  .cr-hero, .cr-top { flex-wrap: wrap !important; }
  .cr-hero > *, .cr-top > *, .cr-card { min-width: 0 !important; max-width: 100%; }
  .cr-card { flex-wrap: wrap !important; }
  .cr-heat { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .cr-hero h2 { white-space: normal !important; overflow-wrap: anywhere; font-size: 28px !important; }
  .cr-hero > .txt { flex: 1 1 100% !important; }
  .cr-hero > .cr-ring { margin-left: auto; margin-right: auto; }
  .cr-card > * { min-width: 0 !important; max-width: 100%; flex-shrink: 1; }
  .cr-card.cr-sim > .badge { align-self: flex-start !important; width: auto !important; max-width: calc(100% - 38px) !important; }
  .cx-calgrid .cx-chip { white-space: normal !important; overflow-wrap: anywhere; font-size: 10px !important; padding: 2px 3px !important; max-width: 100%; display: block; text-align: center; }

  /* corporate "Cosmic Academy" card: icon | copy | button in one row left
     the copy 70px wide - one word per line. Stack it on phones.       */
  .academy-integration-card { flex-direction: column !important; align-items: flex-start !important;
    gap: 14px !important; padding: 22px 18px !important; }
  .academy-integration-card > * { max-width: 100% !important; min-width: 0 !important; }

  /* ---------- 4. INSTRUCTOR (instructor.html) --------------------------
     Measured: three nested paddings (16 + 32 + 16 each side) left 262px
     for cards that need 320px - house-instructor cards ran off the right
     edge ("On request", tags cut). Logo sat under the left menu button. */
  #instructor-dashboard.page.active { padding: 16px 12px 96px !important; }
  #instructor-dashboard .bd-main { padding: 14px 0 0 !important; }
  #instructor-dashboard .bd-strip { padding: 14px !important; }
  #instructor-dashboard .bd-cards { grid-template-columns: minmax(0,1fr) !important; }
  #instructor-dashboard .bd-card, #instructor-dashboard .bd-card-hd,
  #instructor-dashboard .bd-card-ft { min-width: 0 !important; max-width: 100%; }
  #instructor-dashboard .bd-card-ft { flex-wrap: wrap; gap: 6px; }
  /* Two floating menu buttons (.sb-toggle-btn) sat over the logo and the
     page's own header button. Tested: tapping them changes nothing - this
     page has no side panels for them to open. Hidden on phones only. */
  body:has(#instructor-dashboard.page.active) > .sb-toggle-btn { display: none !important; }
  /* "Become an instructor" profile builder: found by opening every screen.
     Its grid column sized itself to its content (473px on a 390px phone),
     so every field and heading ran off the right edge. Fit + stack.   */
  #instructor-dashboard .pbWrap { grid-template-columns: minmax(0,1fr) !important; }
  #instructor-dashboard .pbWrap > *, #instructor-dashboard .pbCols > *, #instructor-dashboard .pbSec { min-width: 0 !important; max-width: 100% !important; }
  #instructor-dashboard .pbCols { flex-direction: column !important; flex-wrap: wrap !important; min-width: 0 !important; }

  /* ---------- 5. PARENT (parent.html) ----------------------------------
     Measured: each child card forced a 3-column desktop grid (64 + 74 +
     130px) into a phone - chips wrapped one word per line ("AHEAD / 2 /
     MO"), the name block was 74px wide. Now: avatar + details, and the
     chart/report row drops underneath at full width.                  */
  .px3-kidcard { grid-template-columns: 56px minmax(0,1fr) !important; gap: 12px 14px !important; }
  .px3-kidcard > :nth-child(n+3) { grid-column: 1 / -1 !important; min-width: 0; }

  /* ---------- 6. SCHOOL / QUEST360 (school.html, quest360_home.html) ---
     Measured: four floating widgets sat on top of the bottom tab bar -
     the "Student" role chip covered "Home", the mic and music buttons
     overlapped each other, the grid button covered "Settings".
     Fix: lift them all above the tab bar, stacked, not overlapping.
     While a full-screen panel (Rewards / Settings) covers the tab bar,
     they drop back to the bottom corner, still not overlapping.       */
  body:has(.qs-dock):not(:has(.qh-panel.open)) #smcd-stack { bottom: calc(112px + env(safe-area-inset-bottom, 0px)) !important; }
  /* the three left-hand buttons sit side by side in ONE low row just
     above the tab bar (music, mic, role chip) - measured: stacked they
     were 270px tall and covered the left edge of every card */
  body:has(.qs-dock):not(:has(.qh-panel.open)) #sm-phonetics-launch { bottom: calc(119px + env(safe-area-inset-bottom, 0px)) !important; left: 14px !important; }
  body:has(.qs-dock):not(:has(.qh-panel.open)) #svl-fab { bottom: calc(112px + env(safe-area-inset-bottom, 0px)) !important; left: 60px !important; }
  body:has(.qs-dock):not(:has(.qh-panel.open)) #smRoleChip { bottom: calc(114px + env(safe-area-inset-bottom, 0px)) !important; left: 120px !important; }
  /* end-of-page room so the last card scrolls fully clear of the tab bar
     and that row (measured end space was 168px; row top is ~170px) */
  body:has(.qs-dock) #qsStage { padding-bottom: calc(200px + env(safe-area-inset-bottom, 0px)) !important; }
  body:has(.qh-panel.open) #sm-phonetics-launch { bottom: calc(21px + env(safe-area-inset-bottom, 0px)) !important; left: 14px !important; }
  body:has(.qh-panel.open) #svl-fab { bottom: calc(14px + env(safe-area-inset-bottom, 0px)) !important; left: 60px !important; }
  body:has(.qh-panel.open) #smRoleChip { bottom: calc(16px + env(safe-area-inset-bottom, 0px)) !important; left: 120px !important; }
  .qh-panel.open { padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px)) !important; }
  .qs-dock { bottom: calc(10px + env(safe-area-inset-bottom, 0px)) !important; }

  /* ---------- 7. FLOATING BUTTONS, EVERY PAGE --------------------------
     Nothing respected the iPhone home-indicator / Safari bottom bar.  */
  body:not(:has(.qs-dock)) #smcd-stack { bottom: calc(14px + env(safe-area-inset-bottom, 0px)) !important; }
  body:not(:has(.qs-dock)) #sm-phonetics-launch { bottom: calc(14px + env(safe-area-inset-bottom, 0px)) !important; }
  /* corporate "Manager view" chip floated mid-screen over the first
     card's button - moved down to the corner row, opposite the grid button */
  #cx-rolechip { bottom: calc(18px + env(safe-area-inset-bottom, 0px)) !important; left: 14px !important; }
  /* corporate confirmation message ("Booking confirmed", "Plan saved")
     popped up on the same row as that chip and the grid button - it now
     shows above them, and wraps rather than running wide */
  .cx-toast { bottom: calc(84px + env(safe-area-inset-bottom, 0px)) !important; max-width: calc(100% - 32px); white-space: normal !important; text-align: center; }
  #sc-hud { bottom: calc(12px + env(safe-area-inset-bottom, 0px)) !important; }

  /* ---------- 8. MOCK EXAM (mock-exam.html) ----------------------------
     Measured: 48px padding inside a 358px plate left 71px for the device
     check text - "A quiet room, and headphones you can keep on for
     thirty minutes" wrapped one or two words per line.               */
  #app .plate { padding: 24px 16px !important; }
  #app .checks .check { padding: 12px 12px !important; gap: 10px !important; flex-wrap: wrap; }
  #app .checks .check .tx { flex: 1 1 150px !important; min-width: 0 !important; }

  /* ---------- 11. TEXT CUT SHORT WITH "..." (phone only) ---------------
     Measured on phones, not on desktop:
       mock exam top bar   "Candidate check-in" -> "Ca..."
       Sound Lab cards     "about - support - teacher" -> "teach..."
       Writing Coach       "Your paragraphs will appear here..." cut
       passport card code  (homepage / level check) cut mid-line
     Each now wraps instead of cutting.                               */
  .top:has(#where) .l { display: flex !important; flex-direction: column; align-items: flex-start; gap: 1px; min-width: 0; }
  .top #where { white-space: normal !important; overflow: visible !important; text-overflow: clip !important; font-size: 11.5px !important; line-height: 1.2; }
  .sound-card-examples { white-space: normal !important; overflow: visible !important; text-overflow: clip !important; line-height: 1.35; }
  .para .topic { white-space: normal !important; text-overflow: clip !important; }
  .smp-mrz { white-space: normal !important; word-break: break-all; overflow: visible !important; text-overflow: clip !important; }

  /* ---------- 12. LAST LINE CLEAR OF FLOATING BUTTONS --------------------
     Measured at the very end of the page: the instructor Live classes card
     sat under the grid button. (The Sound Lab's credits pill that covered
     its footer was removed by the 26 Sep house design, so no rule here.)
     Room added below so the last content always scrolls clear.        */
  body:has(#instructor-dashboard.page.active) #sm-liveclasses { padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px)) !important; }

  /* ---------- 13. READABLE + TAPPABLE ---------------------------------
     a) MY360 passport card (homepage, level check): its text scales with
        the card and fell to 5.9-7.6px on phones - unreadable. Base raised
        so the smallest line is ~9.8px.
     b) Links/buttons measured 11-23px tall (Apple asks 44): "Forgot
        password?", corporate "Browse all", Sound Lab "Back to the chart"
        and "Practise ... ->". Padding + equal negative margin: a bigger
        thumb target with NO visual or layout change.                   */
  .smp, .rp .smp, .rv-pass .smp, .stagepass .smp { font-size: 15px !important; }
  .smp-top { flex-wrap: wrap !important; row-gap: .45em; }
  #aforgot, a.view-all, header.nav ~ * a[href="my360.html"]:not(.btn) { display: inline-block; padding: 11px 0 !important; margin: -11px 0 !important; }
  header.nav .navlinks a { padding: 9px 0 !important; }
  .wrap > header:has(#len) .lang button { min-height: 36px; }

  /* ---------- 15. PASSPORT POPUP (the round "?" button, every page) ----
     Found by opening every screen: the "Your passport" popup is 280px wide
     and anchored to the button's right edge, so wherever the button sits
     near the left of a phone it ran off the screen (instructor: from
     -193px; corporate: from -26px). On phones it opens as a card pinned
     12px from both edges just under the top bar, and scrolls if tall.  */
  .smp-panel { position: fixed !important; left: 12px !important; right: 12px !important;
    top: calc(62px + env(safe-area-inset-top, 0px)) !important; width: auto !important; max-width: none !important;
    max-height: calc(100vh - 90px); overflow-y: auto !important; transform: none !important; z-index: 2147483001 !important; }
  /* text inside wraps (the corporate top bar forces one line on its
     children, which cut the popup's sentences) */
  .smp-panel, .smp-panel * { white-space: normal !important; }
  /* instructor: the popup lives in the header (layer 1) and the page body
     below is also layer 1 but later, so the body painted over the popup.
     While it is open the header's layer is raised.                     */
  .bd-top:has(.smp-panel.open) { z-index: 50 !important; }

  /* ---------- 14. DICTIONARY (sm-dictionary.html) --------------------
     Measured with the phone sideways: the closed word panel is parked
     420px past the right edge; phones widen the page to include it, so
     the whole dictionary zoomed out / scrolled sideways. #app covers the
     same box the panel is positioned against (0,0 full screen), so making
     it the panel's frame and clipping there changes nothing visible.   */
  #app:has(> #panel) { position: relative; overflow: hidden; }

  /* ---------- 10. LEVEL CHECK (level-check.html) -----------------------
     Measured: header kept its desktop 56px side margins (278px wide on a
     390px phone), so the language switch was 134px for 148px of content
     - "English" cut off - and the fixed "?" help button sat on top of it.
     Scoped to the header that holds the language switch (#len).       */
  .wrap > header:has(#len) { box-sizing: border-box; width: calc(100% - 32px) !important; padding: 14px 52px 14px 0 !important; gap: 10px !important; }
  .wrap > header:has(#len) .lang { flex: 0 0 auto; }
  .wrap > header:has(#len) .lang button { white-space: nowrap; padding: 7px 11px !important; }
}

/* iPhone Safari zooms into any text box under 16px in EITHER orientation:
   applied on every touch screen, not just narrow ones.                  */
@media (hover: none) and (pointer: coarse) {
  input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]):not([type=file]):not([type=hidden]),
  textarea, select { font-size: 16px !important; }
}

/* level check on the smallest phones (360-380px, e.g. small Android):
   logo + language pill were 13px wider than the space beside the "?"
   button. Trim the pill's padding and let the logo block shrink.      */
@media (max-width: 380px) {
  .wrap > header:has(#len) .brand { min-width: 0; }
  .wrap > header:has(#len) .lang button { padding: 7px 8px !important; font-size: 12px !important; }
}

/* ---------- 9. ENGLISH SOUND LAB (english-sound-lab/) -----------------
   Measured: the sticky header grew to 136-213px - rows of buttons pinned
   over a quarter of the phone screen the whole time you scroll.
   Fix: one row (~60px); any extra buttons become a swipeable strip.
   NOTE (26 Sep): the Lab now runs the house design (sm360-house.css,
   loaded AFTER this file). No font sizes are set here for the Lab - the
   house design owns type (13px minimum). Only layout lives here.     */
@media (max-width: 640px), (hover: none) and (pointer: coarse) and (max-height: 500px) {
  .site-header { flex-wrap: nowrap !important; overflow-x: auto; overflow-y: hidden;
    -webkit-overflow-scrolling: touch; scrollbar-width: none; gap: 8px !important;
    min-height: 0 !important; padding: 9px 12px !important; }
  .site-header::-webkit-scrollbar { display: none; }
  .site-header > * { flex: 0 0 auto !important; margin: 0 !important; }
  /* the Lab name shrinks and wraps rather than sliding behind the edge
     of the strip on 360-375px phones */
  .site-header > .brand { flex: 1 1 auto !important; min-width: 0 !important; }
  .site-header .brand > span:not(.brand-mark), .site-header .brand strong, .site-header .brand small { min-width: 0; white-space: normal !important; }
  .site-header .brand-mark { width: 38px; height: 38px; }
  .site-header button { min-height: 38px; white-space: nowrap; }

  /* Phrase practice panel ("Say it like you mean it", every track):
     found by opening every screen. It was 451px wide on a 390px phone -
     the close button was OFF the screen (no way to close it), the tip and
     melody chart were cut, and the overlay did not scroll, so the bottom
     buttons could be out of reach on shorter phones.                  */
  .phrase-overlay { grid-template-columns: minmax(0,1fr) !important; place-items: start center !important;
    overflow-y: auto !important; -webkit-overflow-scrolling: touch; padding: 10px 10px calc(84px + env(safe-area-inset-bottom, 0px)) !important; }
  .phrase-panel { width: 100% !important; max-width: 100% !important; min-width: 0 !important; padding: 20px 16px !important; box-sizing: border-box; }
  .phrase-panel > *, .phrase-panel .melody-wrap > * { min-width: 0 !important; max-width: 100%; }
  .phrase-panel .melody-legend, .phrase-panel .melody-words, .phrase-panel .phrase-pills { flex-wrap: wrap !important; }
  .phrase-panel .melody-canvas { width: 100% !important; height: auto; }
  .phrase-panel .phrase-close { top: 12px !important; right: 12px !important; }

  /* "Slow-then-fast..." help text landed in the 42px icon column and
     printed one word per line. Give it the full card width.          */
  .resource-grid article > .external-links { grid-column: 1 / -1 !important; }
}