/* v0.9.8 — Device QA & Mobile Fixes
   Focus: school notebook 1366×768, tablet, iPhone/Android, keyboard/viewport,
   horizontal overflow, touch targets and compact landscape use. */

/* Cross-device intrinsic sizing guardrails. */
html,body{width:100%;max-width:100%;overflow-x:clip}
main,.page-view,.site-header,.site-footer{min-width:0}
img,svg,canvas,video{max-width:100%;height:auto}
input,select,textarea,button{max-width:100%}
.field,.student-auth-form,.classroom-code-row,.share-row,.teacher-filters,.create-room-form{min-width:0}

/* Tablet headers can have more navigation items after student/teacher login.
   Keep them reachable instead of squeezing or clipping them. */
@media(max-width:1024px){
  .site-header{row-gap:8px}
  .main-nav{
    flex-wrap:nowrap!important;
    justify-content:flex-start!important;
    overflow-x:auto;
    overflow-y:hidden;
    overscroll-behavior-inline:contain;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
    scroll-snap-type:x proximity;
    padding-bottom:3px;
  }
  .main-nav::-webkit-scrollbar{display:none}
  .main-nav a{flex:0 0 auto!important;scroll-snap-align:start}
  .header-right{min-width:0;max-width:100%;flex-wrap:wrap;justify-content:flex-end}
  .teacher-dashboard-tabs,.track-tabs{scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .teacher-dashboard-tabs::-webkit-scrollbar,.track-tabs::-webkit-scrollbar{display:none}
  .page-heading,.section-heading,.classroom-active-top,.student-account-heading{min-width:0}
  .table-scroll{max-width:100%;-webkit-overflow-scrolling:touch}

  /* Dynamic viewport units behave better when mobile browser bars expand/collapse. */
  #view-lab .python-ide,#view-lab .python-code-surface{
    min-height:260px;
    height:clamp(300px,55dvh,560px);
  }
}

/* iPhone/Android portrait: prevent form zoom, protect touch targets and sticky controls. */
@media(max-width:700px){
  main{width:min(100% - 24px,1480px)}
  input,select,textarea{font-size:16px!important}
  .field input,.field select,.teacher-pin-form input,.student-auth-form input,
  .classroom-code-row input,.share-row input{width:100%;min-width:0}

  :where(.primary-cta,.secondary-cta,.teacher-cta,.auth-tab,.teacher-dashboard-tab,
  .mobile-lab-tabs button,.room-actions button,.student-manage-actions button,
  .room-member-actions button,.stage-actions button){min-height:44px}

  details>summary{min-height:44px}

  .mobile-lab-tabs{
    top:calc(var(--site-header-height,0px) + 4px);
    max-width:100%;
    overflow:hidden;
  }
  #view-lab .stage-run-actions{
    bottom:max(8px,env(safe-area-inset-bottom));
  }
  #view-lab .python-ide,#view-lab .python-code-surface{
    min-height:300px;
    height:clamp(300px,52dvh,520px);
  }

  .toast{
    left:50%;right:auto;
    width:min(360px,calc(100% - 24px));
    max-width:calc(100% - 24px);
    transform:translateX(-50%);
    overflow-wrap:anywhere;
  }

  .teacher-dashboard-tab{white-space:nowrap}
  .teacher-toolbar-actions,.student-home-actions,.classroom-actions{max-width:100%}
  .teacher-toolbar-actions>*,.student-home-actions>*,.classroom-actions>*{min-width:0}
}

/* Very narrow phones: keep dense controls usable without horizontal clipping. */
@media(max-width:430px){
  .site-header{padding-left:12px;padding-right:12px}
  .site-brand{min-width:0}
  .site-brand>span{min-width:0}
  .brand-secondary{white-space:normal}
  .main-nav a{padding-inline:10px}
  .header-right{width:auto;margin-left:auto}
  .header-right select{max-width:88px}

  .student-home-stats{gap:8px}
  .student-home-stats article{min-width:0;padding-left:12px;padding-right:12px}
  .student-next-mission,.student-home-rooms,.student-account-card,.classroom-join-card{max-width:100%}

  .share-row,.classroom-code-row{grid-template-columns:1fr!important}
  .share-row>*,.classroom-code-row>*{width:100%}

  #view-lab .stage-run-actions{
    grid-template-columns:minmax(0,1fr) 52px 58px;
    gap:5px;
    margin-inline:-2px;
  }
  #view-lab .stage-run-actions button{padding-inline:5px;font-size:.74rem}
}

/* Short landscape phones/tablets: reduce browser chrome cost and use dvh. */
@media(orientation:landscape) and (max-width:900px) and (max-height:520px){
  .site-header{position:static;padding-top:7px;padding-bottom:7px;row-gap:5px}
  .brand-secondary{display:none}
  .main-nav{padding-top:4px;padding-bottom:1px}
  .main-nav a{min-height:36px;padding-top:5px;padding-bottom:5px}
  .page-view{padding-top:10px}
  .mobile-lab-tabs{position:static;margin-bottom:6px}
  #view-lab .python-ide,#view-lab .python-code-surface{
    min-height:260px;
    height:min(66dvh,340px);
  }
  #view-lab .stage-run-actions{position:static}
}

/* When a software keyboard substantially shrinks the visual viewport,
   sticky UI can cover inputs/editors. Temporarily return those bars to flow. */
.cc-keyboard-open .mobile-lab-tabs,
.cc-keyboard-open #view-lab .stage-run-actions{position:static!important}
.cc-keyboard-open #view-lab .python-ide,
.cc-keyboard-open #view-lab .python-code-surface{height:max(260px,42dvh)}

/* Compact 1366×768 school notebooks: avoid vertical crowding outside the Lab too. */
@media(min-width:1025px) and (max-height:820px){
  .page-view:not(#view-lab){padding-top:18px}
  .page-heading{padding-top:8px;padding-bottom:16px}
  .teacher-dashboard-tabs{position:sticky;top:var(--site-header-height,0px);z-index:20}
  .teacher-tab-panel{padding-top:16px}
}

@media(prefers-reduced-motion:reduce){
  .main-nav{scroll-behavior:auto!important}
}