/* Tablet reading mode · portrait and landscape.
   Keep the complete navigation accessible while maximizing lesson reading space.
   Desktop >1100px keeps its sidebar; touch tablets up to 1366px get this layout. */
@media (min-width:751px) and (max-width:1100px),
       (pointer:coarse) and (min-width:1101px) and (max-width:1366px) {
 :root{--tablet-nav-height:74px}
 .layout{display:block;min-width:0}
 .side{
  display:grid;
  grid-template-columns:132px minmax(0,1fr) 44px;
  align-items:center;
  gap:10px;
  position:sticky;top:0;z-index:80;
  width:100%;height:var(--tablet-nav-height);
  min-height:var(--tablet-nav-height);
  overflow:visible;
  padding:8px clamp(12px,2vw,24px);
  border-right:0;border-bottom:1px solid #29475a;
  box-shadow:0 5px 15px rgba(6,18,36,.17);
 }
 .side .logo{font-size:15px;letter-spacing:.04em;white-space:nowrap}
 .side>.sub{display:none}
 .side nav{
  display:grid;grid-template-columns:repeat(5,minmax(0,1fr)) minmax(98px,1.3fr);
  gap:4px;align-items:center;min-width:0;
  margin:0;overflow:visible;
 }
 .side nav>button,
 .side .lesson-menu-row>[data-page="learn"]{
  min-height:46px;max-height:53px;
  padding:7px 5px;
  border-radius:9px;
  font-size:10.5px;line-height:1.22;
  text-align:center;
  display:flex;align-items:center;justify-content:center;
  overflow:hidden;overflow-wrap:anywhere;
 }
 .side nav>button{min-width:0}
 .side .lesson-menu-group{min-width:0;width:100%}
 .side .lesson-menu-row{gap:3px}
 .side .lesson-menu-row>[data-page="learn"]{flex:1}
 .side .lesson-nav-toggle{
  flex:none;min-width:38px;width:38px;min-height:46px;
  padding:5px 2px;border-radius:8px;
 }
 .side .lesson-nav-count{font-size:10px}
 .side .lesson-nav-chevron{font-size:13px}
 .side .lesson-nav-dropdown{
  position:absolute;top:calc(100% - 2px);
  right:clamp(12px,2vw,24px);
  width:min(365px,calc(100vw - 24px));
  margin:0;z-index:100;
  padding:10px;
  box-shadow:0 18px 35px rgba(6,24,40,.36);
  border-color:#4c7583;
 }
 .side .lesson-nav-list{max-height:min(56vh,420px)}
 .side .sidebar-lesson{min-height:44px;padding:9px 8px}
 .side .sidebar-lesson-title{font-size:12px}
 .side .sidebar-lesson-vi{font-size:10.5px}
 .side .sound-pref{
  margin:0;padding:0;border:0;
  width:44px;height:44px;
 }
 .side .sound-toggle{
  width:44px;height:44px;min-height:44px;
  padding:8px;margin:0;
  justify-content:center;
  border-radius:10px;
 }
 .side .sound-icon{font-size:18px}
 .side .sound-label,.side .sound-value,.side .sound-help{display:none}
 .content,body:has(#learn.active) .content{
  max-width:none;width:100%;min-width:0;
  padding:12px clamp(12px,2.5vw,28px) 24px;
 }
 .content>header{display:none}
 #learn .integrated-top{margin:5px 0 10px;padding:12px 16px;gap:14px}
 #learn .integrated-top h2{font-size:19px;line-height:1.3}
 #learn .integrated-top p[lang="en"]{font-size:12px;line-height:1.5}
 #learn .integrated-top p.integrated-intro-vi{font-size:10.5px;line-height:1.4}
 #learn .integrated-stats{padding:7px 12px}
 #learn .integrated-stats strong{font-size:20px}
 #learn .integrated-header{padding:18px 22px 15px}
 #learn .integrated-header h2{font-size:24px}
 #learn .integrated-header h3{font-size:13px}
 #learn .integrated-week-nav{
  top:var(--tablet-nav-height);
  padding:8px 12px 9px;
  scroll-margin-top:var(--tablet-nav-height);
 }
 #learn .integrated-day-strip{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:5px;overflow:visible}
 #learn .integrated-day{
  min-width:0;max-width:none;min-height:48px;
  padding:7px 5px;
  grid-template-columns:37px minmax(0,1fr);
  gap:1px 5px;
 }
 #learn .integrated-day .day-index{font-size:9px}
 #learn .integrated-day .day-name{font-size:10.5px}
 #learn .integrated-day .day-sub{font-size:9.5px}
 #learn .journey-body{max-width:none;margin:0}
 #learn .integrated-body{padding:7px clamp(13px,2.8vw,28px) 20px}
 #learn .integrated-stage{scroll-margin-top:155px}
 #learn .stage-heading h3{font-size:20px}
 #learn .teach-context-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
 #learn .teach-context-outside{grid-column:1/-1}
 #learn .teach-context-card{padding:13px}
 #learn .teach-pair p[lang="en"]{font-size:14px;line-height:1.75}
 #learn .teach-pair p[lang="vi"]{font-size:12px;line-height:1.65}
 #learn .teach-guide-head{padding:12px 15px}
 #learn .teach-task-row{grid-template-columns:130px minmax(0,1fr);gap:12px;padding:13px 15px}
 #learn .teach-specific{padding:13px 15px}
 #learn .journey-choice{min-height:48px}
 #learn textarea.study-notes{min-height:150px;font-size:15px}
 #learn .archviz-node{min-height:105px}
 #learn .archviz-tab{min-height:46px}
 #learn .archviz-detail{min-height:94px}
 #learn .integrated-footer button{min-height:46px}
}
/* Portrait tablet: make the course wide and preserve comfortable tap targets. */
@media (min-width:751px) and (max-width:900px) {
 :root{--tablet-nav-height:76px}
 .side{grid-template-columns:112px minmax(0,1fr) 42px;gap:6px;padding-inline:10px}
 .side .logo{font-size:13.5px}
 .side nav{gap:3px;grid-template-columns:repeat(5,minmax(0,1fr)) minmax(93px,1.3fr)}
 .side nav>button,.side .lesson-menu-row>[data-page="learn"]{font-size:10px;padding:6px 3px}
 .side .sound-pref,.side .sound-toggle{width:42px;height:44px}
 #learn .integrated-day{grid-template-columns:1fr;gap:1px;padding:6px 8px}
 #learn .integrated-day .day-index{grid-row:auto}
 #learn .integrated-day .day-name{font-size:11px}
 #learn .integrated-day .day-sub{font-size:10px}
 #learn .teach-context-grid{grid-template-columns:1fr}
 #learn .teach-context-outside{grid-column:auto}
 #learn .archviz-track{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;overflow:visible}
 #learn .archviz-node{min-width:0;min-height:91px;flex:auto}
 #learn .archviz-node:after{display:none}
 #learn .teach-task-row{grid-template-columns:112px minmax(0,1fr)}
}
/* Landscape tablet: diagrams and application examples can sit side-by-side. */
@media (min-width:901px) and (max-width:1100px),
       (pointer:coarse) and (min-width:1101px) and (max-width:1366px) {
 #learn .teach-context-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
 #learn .teach-context-outside{grid-column:auto}
 #learn .archviz-track{display:flex;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x proximity;padding-bottom:8px}
 #learn .archviz-node{min-width:144px;flex:1 0 144px;scroll-snap-align:start}
}
/* Tablet-specific reading improvements and system controls. */
@media (min-width:751px) and (max-width:1100px),
       (pointer:coarse) and (min-width:1101px) and (max-width:1366px) {
 .side button,.side .sidebar-lesson,#learn button{touch-action:manipulation}
 #learn .archviz-node:focus-visible{outline-offset:2px}
 #learn .archviz-track{-webkit-overflow-scrolling:touch}
}
@media (prefers-reduced-motion:reduce) {
 .side .lesson-nav-chevron{transition:none}
}