/* responsive.css — extracted verbatim from the original single-file index.html.
   Source lines: 306-398, 556-557
   No rules were edited; only relocated. */
/* MOBILE */
@media(max-width:767px){#mob-menu-btn{display:flex!important}}

/* ══ MOBILE RESPONSIVE ══ */
@media(max-width:767px){
  /* Sidebar off — main takes full width */
  #main-content{margin-left:0!important}
  #sidebar{width:min(84vw,320px)!important;min-width:0!important}
  #mob-menu-btn{display:flex!important}
  #mob-nav{display:block!important}
  /* mob-nav shown on mobile only */
  /* Bottom nav padding so content doesn't hide behind it */
  #main-content>div:last-child{padding-bottom:80px!important}
  /* Hide right mission list panel on mobile — not enough space */
  .mp-right-panel{display:none!important}
  /* Lesson body — allow left side to scroll full width */
  #mp-right{display:none!important}
  /* Lesson topbar — wrap on very small screens */
  .mv-topbar-acts{flex-wrap:wrap;gap:6px}
  /* Lesson content full width */
  #mp-right{display:none!important}
  /* Lesson info padding smaller on mobile */
  #main-content [style*="padding:24px 28px"]{padding:16px 14px!important}
  /* Video max height on mobile */
  #player-wrapper{height:auto!important;max-height:none!important;aspect-ratio:16/9}
  #player-wrapper video{object-fit:contain!important}
  /* Fallback for older iOS/Android that lack aspect-ratio support */
  @supports not (aspect-ratio:16/9){
    #player-wrapper{height:0!important;padding-bottom:56.25%!important;position:relative!important}
  }
  .dash-stats-grid{grid-template-columns:repeat(2,1fr)!important}
  /* Module banner text truncation */
  .module-banner-title{font-size:12px!important}
  /* Lesson meta row stacks on mobile */
  .lesson-meta-row{flex-direction:column!important}
  /* Profile name */
  .sb-name{font-size:13px!important}
  /* My courses section header */
  .section-hdr-row{flex-direction:column!important;gap:8px!important}
  /* Admin class cards */
  .class-grid{grid-template-columns:repeat(2,1fr)!important}

  /* Dashboard layout stacks */
  .dashboard-layout{flex-direction:column}
  .lesson-panel-wrap{width:100%!important;border-left:none!important;border-top:1px solid rgba(255,255,255,.06)!important;padding:12px!important}
  .courses-col{padding:12px!important}

  /* Stats grid → 2 cols */
  .stats-grid{grid-template-columns:repeat(2,1fr)!important;gap:8px!important}
  .ach-grid{grid-template-columns:repeat(2,1fr)!important}

  /* Reduce padding on content areas */
  #v-dash,#v-fix{padding:16px 12px 60px!important}

  /* Admin table scrollable */
  .admin-table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
}
@media(max-width:820px){
  /* Admin compact */
  #main-content>div[style*="padding:24px"], .adm-pad{padding:14px!important}
  .admin-table-wrap{overflow-x:auto!important;-webkit-overflow-scrolling:touch}
  .admin-table th{padding:10px 10px;font-size:10px}
  .admin-table td{padding:10px 10px;font-size:13px}
  .stu-avatar{width:30px;height:30px;font-size:11px;border-radius:8px}}
@media(max-width:820px){
  .wvp-root{height:auto!important;min-height:100vh;min-height:100dvh;overflow:visible!important}
  /* Workshop player: one normal page scroll (video, details, then the lesson list) — the old
     inner-scrolling list collapsed to nothing in landscape and sat under the bottom bar. */
  .wvp-split{flex-direction:column!important;overflow:visible!important}
  .wvp-main{flex:none!important;overflow:visible!important}
  .wvp-side{width:100%!important;flex:none!important;border-left:none!important;border-top:1px solid rgba(255,255,255,.08)!important;overflow:visible!important;padding-bottom:calc(84px + env(safe-area-inset-bottom))}
  /* Lesson page: natural page scroll on mobile */
  .lesson-root{height:auto!important;min-height:100vh;overflow:visible!important}
  .lesson-root>div{overflow:visible!important}
  .lesson-body-split{flex-direction:column!important;overflow:visible!important}
  .lesson-left-col{overflow:visible!important}
}

@media(max-width:480px){
  /* Single col stats on very small */
  .stats-grid{grid-template-columns:repeat(2,1fr)!important}

  /* Top bar tighter */
  .top-bar{padding:10px 12px!important}
  .admin-top-bar{padding:10px 12px!important;gap:8px!important}

  /* Lesson panel meta row stacks */
  .lesson-meta-row{flex-direction:column!important}

  /* Journey strip dots smaller */
  .jd-dot{width:22px!important;height:22px!important;font-size:8px!important}
}


@media(max-width:720px){.demo-tbl-desktop{display:none!important}.demo-tbl-cards{display:flex!important}}
@media(max-width:480px){body.demo-active{padding-top:56px}body.demo-active .top-bar,body.demo-active .admin-top-bar{top:56px}#demo-topbar{height:56px}#demo-timer{padding:5px 13px;gap:9px}#demo-timer #demo-timer-clock{font-size:19px}#demo-toast-wrap{top:64px;left:12px;right:12px;align-items:stretch}.demo-toast{max-width:none}}

/* ══ MOBILE UX PASS (2026-11) — see MOBILE_UX_AUDIT.md ══════════════════════════════════
   Breakpoints: phone ≤767px (bottom bar + drawer) · lesson/workshop phone layout ≤820px ·
   landscape phone = (max-height:500px) and (pointer:coarse). Order matters: keep the landscape
   block LAST so it beats the tablet/desktop full-height rules. */

/* 1. Per-screen scroll locks — set by lesson.js / quiz.js / workshop.js, cleared by the router.
      Desktop scrolls inside the page's columns; phones/tablets scroll the page itself. */
@media(min-width:821px){body.lock-lesson,body.lock-wvp{overflow:hidden}}
@media(min-width:768px){body.lock-quiz{overflow:hidden}}

/* 2. Full-height desktop/tablet layouts: 100vh is taller than the visible area on iPad Safari
      while its toolbar shows. dvh = visible height (same as vh on desktop). Inline 100vh stays
      as the fallback for older browsers. */
@supports (height:100dvh){
  @media(min-width:821px){.lesson-root,.wvp-root{height:100dvh!important}}
  @media(min-width:768px){.be-quiz-wrap{height:100dvh}}
}

/* 3. Phones */
@media(max-width:767px){
  /* No sideways page drag. On #main-content (not html/body): clip there creates no scroll box,
     so the sticky top bar keeps working. */
  #main-content{overflow-x:clip}
  /* Bottom bar = ~63px + the home-indicator inset on iPhones; keep the last card above it. */
  #main-content>div:last-child{padding-bottom:calc(84px + env(safe-area-inset-bottom))!important}
  /* Drawer scrolls on its own without dragging the page behind it */
  #sidebar,#sidebar .sb-nav{overscroll-behavior:contain}
  /* Touch targets: small text links get a bigger hit area without moving the layout */
  .dsh-link{padding:12px 6px;margin:-12px -6px}
  .wvg-chips>*{min-height:40px}
  .pf-btn{min-height:40px;padding:9px 16px}
  .bl-eye{width:40px;height:40px;right:3px}
  .bl-link{padding:10px 0;margin:-8px 0}
  /* Profile → Change password: one column; messages get their own line */
  .pf-pass-acts{flex-direction:column}
  .pf-pass-acts>button{width:100%;min-height:46px}
  /* 16px inputs stop iOS Safari zooming the page when a field is focused */
  input:not([type=checkbox]):not([type=radio]):not([type=range]),textarea,select{font-size:16px!important}
}

/* 4. Touch screens: finger-sized video overlay controls */
@media(hover:none) and (pointer:coarse){
  #player-wrapper #fullscreen-btn,#player-wrapper .qbtn{min-height:34px;min-width:34px;font-size:12px!important}
}

/* 5. Landscape phones — wider than the phone breakpoints, so they used to get the desktop
      lesson/quiz/workshop layout with tiny inner-scrolling columns. One page scroll instead,
      and the whole 16:9 video stays on screen. KEEP LAST. */
@media(max-height:500px) and (pointer:coarse){
  body.lock-lesson,body.lock-quiz,body.lock-wvp{overflow:visible}
  .lesson-root{height:auto!important;min-height:100vh;overflow:visible!important}
  .lesson-root>div{overflow:visible!important}
  .lesson-body-split{flex-direction:column!important;overflow:visible!important}
  .lesson-left-col{overflow:visible!important}
  .mp-right-panel,#mp-right{display:none!important}
  #player-wrapper{width:min(100%,calc((100vh - 64px) * 16 / 9))!important;width:min(100%,calc((100dvh - 64px) * 16 / 9))!important;margin-inline:auto;height:auto!important;aspect-ratio:16/9}
  .be-quiz-wrap{height:auto!important;min-height:100vh;overflow:visible!important}
  .be-quiz-body{flex:none!important;overflow:visible!important}
  .wvp-root{height:auto!important;min-height:100vh;overflow:visible!important}
  .wvp-split{flex-direction:column!important;overflow:visible!important}
  .wvp-main{flex:none!important;overflow:visible!important}
  .wvp-side{width:100%!important;flex:none!important;border-left:none!important;overflow:visible!important}
}