/* PhoBee tablet/mobile release gate.
   Loaded last so touch-device behavior wins without changing desktop layouts. */

:root{--ph-mobile-safe-bottom:env(safe-area-inset-bottom,0px)}

@supports(height:100dvh){
  .practice-shell,.student-sidebar-layout,.student-sidebar-content,
  .teacher-header.teacher-sidebar,.student-sidebar{min-height:100dvh}
  .teacher-header.teacher-sidebar,.student-sidebar{height:100dvh}
}

/* iPad/touch devices cannot depend on hover to reveal navigation. */
@media (hover:none) and (pointer:coarse){
  .teacher-header.teacher-sidebar:hover,
  .teacher-header.teacher-sidebar:focus-within{width:var(--teacher-rail-collapsed)!important;box-shadow:5px 0 18px rgba(38,51,71,.08)!important}
  .teacher-sidebar:hover .teacher-brand-mark,
  .teacher-sidebar:focus-within .teacher-brand-mark{display:block!important}
  .teacher-sidebar:hover .teacher-brand-lockup,
  .teacher-sidebar:focus-within .teacher-brand-lockup{display:none!important}
  .teacher-sidebar:hover .student-brand,
  .teacher-sidebar:focus-within .student-brand{justify-content:center!important;padding-left:0!important}
  .teacher-sidebar:hover .teacher-sidebar-label,
  .teacher-sidebar:focus-within .teacher-sidebar-label,
  .teacher-sidebar:hover .teacher-sidebar-section-label,
  .teacher-sidebar:focus-within .teacher-sidebar-section-label{opacity:0!important;transform:translateX(-7px)!important}
  .teacher-sidebar:not(:hover):not(:focus-within) .teacher-sidebar-link:hover::after,
  .teacher-sidebar:not(:hover):not(:focus-within) .teacher-sidebar-link:focus-visible::after{display:none!important}

  /* Keep the account action reachable without a hover-expanded rail. */
  .teacher-sidebar .teacher-account.teacher-sidebar-account{
    min-height:112px!important;grid-template-columns:1fr!important;justify-items:center!important;
    row-gap:5px!important;padding:10px 2px!important
  }
  .teacher-sidebar .teacher-account-avatar{grid-row:auto!important}
  .teacher-sidebar .teacher-account>:not(.teacher-account-avatar){grid-column:1!important}
  .teacher-sidebar .teacher-account>span:not(.teacher-account-avatar){display:none!important}
  .teacher-sidebar .teacher-account .text-button{
    opacity:1!important;pointer-events:auto!important;width:46px!important;min-width:46px!important;height:44px!important;
    padding:0!important;display:flex!important;align-items:center!important;justify-content:center!important;overflow:hidden!important;font-size:0!important;
    border-radius:9px!important;color:#fff!important
  }
  .teacher-sidebar .teacher-account .text-button::before{content:none}
  .teacher-sidebar .teacher-profile-link-label{display:none!important}

  .student-sidebar:hover,.student-sidebar:focus-within{width:76px!important}
  .student-sidebar:hover .student-side-nav__item span,
  .student-sidebar:hover .student-side-signout span,
  .student-sidebar:hover .student-side-profile>span,
  .student-sidebar:focus-within .student-side-nav__item span,
  .student-sidebar:focus-within .student-side-signout span,
  .student-sidebar:focus-within .student-side-profile>span{opacity:0!important}
  .student-sidebar .phobee-student-rail-mark,.student-sidebar .student-brand-mark{display:block!important}
  .student-sidebar .phobee-student-rail-lockup,.student-sidebar .student-brand-lockup{display:none!important}

  button,a,[role="button"],input[type="checkbox"],input[type="radio"]{-webkit-tap-highlight-color:rgba(63,70,165,.14)}
}

/* Prevent iOS Safari's automatic zoom when form controls receive focus. */
@media(max-width:1100px){
  input,select,textarea{font-size:16px!important}

  .teacher-main,.student-main{overflow-x:hidden}
  .teacher-sidebar~.teacher-main{padding-left:20px!important;padding-right:20px!important}

  /* Collection builder: two desktop columns are too cramped beside the rail on iPad. */
  .list-builder-grid{grid-template-columns:1fr!important}
  .builder-current{position:static!important}
  .list-builder-page{max-width:100%!important}
  .builder-results{max-height:none!important}
  .list-builder-heading{gap:16px!important}
  .list-builder-heading h1{font-size:clamp(2.1rem,6vw,3.1rem)!important}

  /* Teacher dashboard/report tables remain usable rather than clipping. */
  .align-table-scroll{overflow-x:auto!important;-webkit-overflow-scrolling:touch;padding-bottom:4px}
  .align-assignment-table,.align-roster-table{min-width:760px}
  .reports-assignment-panel{overflow:hidden}
  .reports-assignment-table{min-width:0}
  .reports-assignment-row{grid-template-columns:minmax(210px,1.35fr) .6fr .75fr 20px!important}
  .reports-assignment-row>span:nth-of-type(3){display:none!important}

  /* Library filters and action groups fit touch widths cleanly. */
  .design-filter-panel{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .design-library-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .design-library-actions{flex-wrap:wrap!important}
  .design-card-button{min-height:44px}

  /* Sharing preview summary must not force five narrow columns. */
  .phobee-shared-summary{grid-template-columns:repeat(3,minmax(0,1fr))!important}

  /* Practice is the critical student iPad workflow. */
  .practice-shell{min-height:100dvh;padding-bottom:calc(14px + var(--ph-mobile-safe-bottom))}
  .practice-topbar{min-height:62px;padding:9px 18px}
  .practice-card{
    width:calc(100% - 24px)!important;margin:18px auto!important;
    padding:24px clamp(16px,4vw,34px) 30px!important;border-radius:18px!important
  }
  .practice-stage{margin-top:20px!important}
  .chunk-row{gap:clamp(18px,4vw,42px)!important;min-height:112px}
  .letter-groups{gap:10px!important;margin-top:22px!important}
  .letter-group{max-width:100%;flex-wrap:wrap;justify-content:center;gap:6px!important;padding:8px!important}
  .letter-square{width:clamp(40px,6vw,56px)!important;height:clamp(50px,7vw,64px)!important}
  .support-panel{max-width:100%!important}
  .whole-word-button{min-height:52px!important}
  .keyboard-capture{
    position:fixed!important;left:50%!important;bottom:1px!important;top:auto!important;
    width:1px!important;height:1px!important;transform:translateX(-50%)!important;opacity:.01!important
  }
  .word-award__card{max-height:calc(100dvh - 28px);overflow:auto}
}

/* iPad content creation: prioritize the teacher's actual list.
   The catalog browser is a desktop affordance; on touch tablets the first pane
   becomes a compact dictionary-search strip and results appear only after a search. */
@media (hover:none) and (pointer:coarse) and (max-width:1100px){
  .list-builder-grid>.builder-pane:first-child{
    padding:14px 16px!important;
    border-radius:16px!important;
    box-shadow:0 5px 14px rgba(38,49,77,.06)!important
  }
  .list-builder-grid>.builder-pane:first-child .builder-pane-head{margin-bottom:10px!important}
  .list-builder-grid>.builder-pane:first-child .builder-pane-title h2{font-size:1.12rem!important}
  .list-builder-grid>.builder-pane:first-child .builder-wave-icon{width:36px!important;height:36px!important;font-size:1.1rem!important}
  .list-builder-grid>.builder-pane:first-child .builder-pane-head>span,
  .list-builder-grid>.builder-pane:first-child .builder-help,
  .list-builder-grid>.builder-pane:first-child .builder-category-row,
  .list-builder-grid>.builder-pane:first-child [data-catalog-results]{display:none!important}
  .list-builder-grid>.builder-pane:first-child .builder-search{grid-template-columns:minmax(0,1fr) auto!important;gap:8px!important}
  .list-builder-grid>.builder-pane:first-child .builder-search input{padding:12px 13px!important}
  .list-builder-grid>.builder-pane:first-child .builder-search-button{min-height:44px!important;padding:0 14px!important;box-shadow:none!important}
  .list-builder-grid>.builder-pane:first-child [data-dictionary-results]:not([hidden]){
    display:grid!important;gap:10px!important;margin-top:12px!important
  }
  .list-builder-grid>.builder-pane:first-child [data-dictionary-results] .builder-result{padding:12px!important;border-radius:12px!important}
  .builder-current{padding-top:18px!important}
  .builder-draft{min-height:0!important}
}

@media(max-width:820px){
  .design-filter-panel,.design-library-grid{grid-template-columns:1fr!important}
  .phobee-shared-summary{grid-template-columns:repeat(2,minmax(0,1fr))!important}

  .builder-pane{padding:18px!important;border-radius:18px!important}
  .builder-search,.builder-list-name-row{grid-template-columns:1fr!important}
  .builder-result{flex-direction:column!important}
  .builder-result-actions{width:100%!important;justify-content:flex-end!important}

  .teacher-recording-word{flex-direction:column!important}
  .teacher-recording-actions{width:100%!important}
  .teacher-record-button,.teacher-play-button,.teacher-icon-button,.teacher-delete-audio{flex:1 1 140px}

  .practice-meta{grid-template-columns:1fr!important}
  .points-pill{justify-self:start}
  .practice-progress{overflow-x:auto;padding-bottom:3px}
}

/* Preserve compact search + button side-by-side on typical iPad portrait widths. */
@media (hover:none) and (pointer:coarse) and (min-width:651px) and (max-width:820px){
  .list-builder-grid>.builder-pane:first-child .builder-search{grid-template-columns:minmax(0,1fr) auto!important}
}

/* Phone-width fallback. iPads never hit this in normal full-screen use, but it
   keeps the pilot usable if a teacher opens PhoBee on a phone. */
@media(max-width:650px){
  :root{--teacher-rail-collapsed:58px}
  .teacher-header.teacher-sidebar{width:58px!important;padding-left:5px!important;padding-right:5px!important}
  .teacher-sidebar~.teacher-main{margin-left:58px!important;width:calc(100% - 58px)!important;padding:20px 10px calc(72px + var(--ph-mobile-safe-bottom))!important}
  .teacher-sidebar-link{padding:0 8px!important;justify-content:center}
  .teacher-sidebar-icon{width:30px!important;min-width:30px!important}
  .teacher-sidebar .teacher-brand-mark{width:42px!important}

  .student-sidebar{width:58px!important;padding-left:5px!important;padding-right:5px!important}
  .student-sidebar:hover,.student-sidebar:focus-within{width:58px!important}
  .student-sidebar-content{margin-left:58px!important}
  .student-side-nav__item,.student-side-profile,.student-side-signout{padding:0 9px!important;justify-content:center}
  .student-main:not(.teacher-main){padding-left:10px!important;padding-right:10px!important}

  .phobee-shared-summary{grid-template-columns:1fr!important}
  .phobee-shared-actions{padding:16px!important}
  .phobee-shared-word-list li{grid-template-columns:1fr!important}

  .practice-topbar{padding:8px 12px}
  .practice-brand{font-size:1.05rem}
  .practice-card{width:calc(100% - 12px)!important;margin:6px auto 10px!important;padding:16px 8px 22px!important}
  .practice-instruction{margin:18px 0 12px}
  .chunk-row{gap:12px!important;overflow-x:auto;justify-content:flex-start;padding:0 4px 5px;scrollbar-width:thin}
  .chunk-wrap{min-width:72px}
  .letter-square{width:36px!important;height:48px!important;font-size:1.35rem!important}
  .word-award__actions,.results-actions{grid-template-columns:1fr!important;display:grid!important}
}

/* Respect safe-area insets on home-screen or edge-to-edge iPad/iPhone use. */
@supports(padding:max(0px)){
  .teacher-header.teacher-sidebar,.student-sidebar{padding-bottom:max(12px,var(--ph-mobile-safe-bottom))}
  .practice-topbar{padding-left:max(18px,env(safe-area-inset-left));padding-right:max(18px,env(safe-area-inset-right))}
}