@media(max-width:900px){
  body{padding-bottom:calc(76px + env(safe-area-inset-bottom));padding-top:58px}
  .sidebar{display:none}.main{margin-left:0}.topbar{position:fixed;top:0;left:0;right:0;height:58px;padding:0 12px;z-index:100;background:rgba(245,240,230,.97)}.mobile-logo{display:block;width:34px;height:34px;border-radius:10px;background:white var(--drz) center/contain no-repeat;border:1px solid var(--line)}.page-name{display:flex;align-items:center;gap:9px}.page-name strong{font-size:13px}.top-course summary{min-height:36px;padding:0 9px;font-size:10px}.notify{display:none}
  .content{padding:12px 10px 24px;max-width:none}
  .mobile-nav{position:fixed;left:7px;right:7px;bottom:calc(7px + env(safe-area-inset-bottom));z-index:150;display:grid;grid-template-columns:repeat(5,1fr);min-height:64px;padding:5px;border:1px solid rgba(229,222,210,.98);border-radius:18px;background:rgba(255,253,249,.97);box-shadow:0 18px 50px rgba(7,26,49,.16);backdrop-filter:blur(20px)}
  .mobile-tab{min-width:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;border-radius:12px;color:#8a959e;font-size:9px;font-weight:750;cursor:pointer;text-decoration:none;touch-action:manipulation;min-height:52px}
  .mobile-tab i{width:20px;height:20px;display:grid;place-items:center;font-style:normal;font-size:15px}
  #p-home:checked~.app [for=p-home].mobile-tab,#p-course:checked~.app [for=p-course].mobile-tab,#p-schedule:checked~.app [for=p-schedule].mobile-tab,#p-resources:checked~.app [for=p-resources].mobile-tab,#p-more:checked~.app [for=p-more].mobile-tab,#p-recordings:checked~.app [for=p-more].mobile-tab,#p-exams:checked~.app [for=p-more].mobile-tab,#p-office:checked~.app [for=p-more].mobile-tab,#p-payments:checked~.app [for=p-more].mobile-tab{background:var(--navy);color:white}
  .hero{padding:14px;border-radius:15px}h1{font-size:27px}.hero p{font-size:11px}.hero-row{display:block}.grid.two,.grid.three{grid-template-columns:1fr}.grid{gap:9px}.card{border-radius:14px}.current-course{align-items:flex-start}.current-course>.btn{display:none}
  .next-card{min-height:220px;padding:14px}.next-card h2{font-size:23px}
  .week-event summary{grid-template-columns:40px minmax(0,1fr) auto;padding:11px}.week-expand{padding-left:59px}.stat-grid{grid-template-columns:repeat(3,1fr)}.media-card{grid-template-columns:105px 1fr}
  .toolbar{display:block}.toolbar .filter-tabs{margin-top:8px;width:100%}.filter-tabs label{min-height:38px}
  .calendar-week{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch}.day{min-width:190px;flex:0 0 190px;min-height:260px;scroll-snap-align:start}
  .recording-card>details>summary{grid-template-columns:90px minmax(0,1fr);padding:9px}.recording-card summary>b{display:none}.recording-expand{padding:0 9px 10px}.secure-player{min-height:185px}.resource-card>summary{grid-template-columns:38px minmax(0,1fr);padding:9px}.resource-card summary>b{display:none}.resource-expand{padding:0 9px 10px}
  .more-grid{grid-template-columns:1fr 1fr}.viewer-panel{inset:0;border-radius:0}.viewer-toolbar{display:block}.viewer-toolbar span{display:block}.viewer-toolbar span+span{margin-top:3px}.viewer-canvas{padding:14px 8px}.viewer-page{width:100%;min-height:720px;padding:38px 26px}.viewer-page h2{font-size:22px}.viewer-page .wm{font-size:14px}
  .exam-overview,.exam-two{grid-template-columns:1fr}.exam-next{min-height:230px;padding:16px}.exam-next h2{font-size:27px}.exam-tool-grid{grid-template-columns:1fr 1fr}.exam-tool{min-height:145px}.exam-section-title{align-items:flex-start}.readiness-score span{text-align:left}
  .mobile-safe-note{display:block;margin:0 0 9px;padding:9px 10px;border-radius:10px;background:#edf4f0;color:#456b59;font-size:9px;line-height:1.4}
}
@media(max-width:420px){
  .top-actions{gap:5px}.top-course summary{max-width:120px}.top-course summary span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.content{padding-left:8px;padding-right:8px}
  .stat-grid{grid-template-columns:1fr 1fr}.stat-grid .stat:last-child{grid-column:1/-1}.media-card{grid-template-columns:1fr}.media-thumb{min-height:145px}.quick-grid{grid-template-columns:1fr 1fr}.more-grid,.exam-tool-grid{grid-template-columns:1fr}.exam-next h2{font-size:24px}.scope-row{grid-template-columns:32px minmax(0,1fr)}.scope-row b{grid-column:2}.readiness-score{display:block}.readiness-score span{display:block;max-width:none;margin-top:7px}
}

/* ==========================================================
   FINAL MOBILE + DESKTOP CONSOLIDATION
   Core navigation intentionally uses native HTML state controls.
   ========================================================== */

/* Only show course-switch UI when the signed-in student owns 2+ courses. */
body[data-course-count="1"] .side-course,
body[data-course-count="1"] .top-course{
  display:none!important;
}

/* Remove any prototype/debug helper if an older browser cached the node. */
.mobile-safe-note{display:none!important}

/* Native controls should always read as interactive. */
label[for],
summary,
a.btn,
.quick,
.more-item[href]{
  touch-action:manipulation;
}

/* Calendar confirmation */
.calendar-card{
  text-align:left;
}
.calendar-card > small{
  display:block;
  margin-top:10px;
  color:var(--gold);
  font-size:9px;
  font-weight:850;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.calendar-modal-icon{
  width:38px;
  height:38px;
  display:grid;
  place-items:center;
  border-radius:11px;
  background:var(--goldsoft);
  color:var(--navy);
  font-size:16px;
}
.calendar-modal-note{
  margin-top:12px;
  padding:10px;
  border:1px solid var(--line);
  border-radius:10px;
  background:var(--paper2);
  color:var(--muted);
  font-size:9px;
  line-height:1.45;
}

/* iPhone / iPad portrait */
@media(max-width:900px){
  body{
    padding-top:calc(58px + env(safe-area-inset-top));
    padding-bottom:calc(82px + env(safe-area-inset-bottom));
  }

  .topbar{
    height:calc(58px + env(safe-area-inset-top));
    padding-top:env(safe-area-inset-top);
  }

  /* Fix specificity bug that hid the Dr Z mark in the mobile header. */
  .page-name .mobile-logo{
    display:block!important;
    flex:0 0 34px;
  }

  .page-name{
    min-width:0;
  }

  .page-name strong{
    min-width:0;
    overflow:hidden;
    white-space:nowrap;
    text-overflow:ellipsis;
  }

  .top-actions{
    min-width:0;
  }

  .top-course summary{
    min-height:44px;
    max-width:126px;
  }

  /* Notifications remain available on iPhone instead of disappearing. */
  .notify{
    display:block!important;
  }

  .notify summary{
    width:42px;
    height:42px;
  }

  .notify-panel{
    position:fixed;
    top:calc(62px + env(safe-area-inset-top));
    left:10px;
    right:10px;
    width:auto;
    max-height:min(60dvh,420px);
    overflow:auto;
    z-index:220;
  }

  /* 44px minimum touch targets on mobile. */
  .btn{
    min-height:44px;
    padding-left:13px;
    padding-right:13px;
  }

  .schedule-tabs label,
  .filter-tabs label{
    min-height:44px;
  }

  .course-choice{
    min-height:44px;
    display:flex;
    align-items:center;
  }

  .mobile-nav{
    bottom:calc(7px + env(safe-area-inset-bottom));
  }

  .mobile-tab{
    min-height:54px;
  }

  .calendar-card .action-row{
    display:grid;
    grid-template-columns:1fr;
  }

  .calendar-card .btn{
    width:100%;
  }

  /* The page itself switches in place. Only resource/join/calendar viewers overlay. */
  .view{
    min-width:0;
  }
}

/* Narrow iPhone fallback */
@media(max-width:360px){
  .page-name .mobile-logo{
    width:31px;
    height:31px;
    flex-basis:31px;
  }

  .page-name strong{
    font-size:12px;
  }

  .top-course summary{
    max-width:104px;
    padding-left:7px;
    padding-right:7px;
  }

  .notify summary{
    width:38px;
    height:38px;
  }

  .mobile-nav{
    left:5px;
    right:5px;
    bottom:calc(5px + env(safe-area-inset-bottom));
    padding:4px;
  }

  .mobile-tab{
    font-size:8px;
  }
}

/* Landscape phone: preserve usable content height. */
@media(max-width:900px) and (max-height:500px){
  body{
    padding-bottom:calc(64px + env(safe-area-inset-bottom));
  }

  .mobile-nav{
    min-height:52px;
  }

  .mobile-tab{
    min-height:44px;
    gap:1px;
  }

  .mobile-tab i{
    height:16px;
    font-size:12px;
  }

  .mobile-tab span{
    font-size:8px;
  }
}