/* Portrait media occupies the upper half; teaching notes scroll in the lower half. */
@media screen and (orientation:portrait){
 @media(max-width:800px),(pointer:coarse){
  body[data-codex-family='library'] dialog.detail{height:var(--codex-viewport-height);max-height:var(--codex-viewport-height);overflow:hidden}
  body[data-codex-family='library'] .dgrid{display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr) minmax(0,1fr);height:100%;max-height:100%;min-height:0;overflow:hidden;align-items:stretch}
  body[data-codex-family='library'] .viewer{display:flex;flex-direction:column;height:100%;min-height:0;overflow:hidden;padding-top:0}
  body[data-codex-family='library'] .viewer-tools{flex:0 0 auto;min-height:0;padding-bottom:6px;gap:6px;max-height:48%;overflow-y:auto;overscroll-behavior:contain}
  body[data-codex-family='library'] .viewer-tools>.codex-plate-nav{flex-basis:100%;padding-top:4px;gap:6px}
  body[data-codex-family='library'] .viewer-tools>.codex-plate-nav .codex-touch-hint{display:none}
  body[data-codex-family='library'] .stage{height:auto;flex:1 1 0;min-height:0;padding-top:8px;padding-bottom:8px}
  body[data-codex-family='library'] .viewer>.note{flex:0 0 auto;max-height:22%;overflow-y:auto;margin:0 8px 4px;padding:6px 10px;overscroll-behavior:contain}
  body[data-codex-family='library'] .viewer>.strip{flex:0 0 auto;max-height:20%;padding:5px 8px;min-height:0}
  body[data-codex-family='library'] .viewer>.strip button{width:48px;height:44px;flex:0 0 48px}
  body[data-codex-family='library'] .info{height:100%;min-height:0;overflow-y:auto;overflow-x:hidden;overscroll-behavior-y:contain;scrollbar-gutter:stable;scrollbar-width:thin;border-top:1px solid var(--codex-line);padding-top:14px}
  body[data-codex-family='library'] .info .top{position:relative;flex:0 0 auto;padding:0 0 18px}
  body[data-codex-family='library'] .info .top:after{content:'Scroll notes ↓';bottom:0;right:0;font-size:11px}
  body[data-codex-family='step1'] .md,body[data-codex-family='step1'] .md.dg{display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:calc(60px + var(--codex-safe-top)) minmax(0,1fr) minmax(0,1fr);height:var(--codex-viewport-height);max-height:var(--codex-viewport-height);overflow:hidden}
  body[data-codex-family='step1'] .md::before{height:calc(60px + var(--codex-safe-top));min-height:0}
  body[data-codex-family='step1'] .md .stage{height:100%;min-height:0;overflow:hidden}
  body[data-codex-family='step1'] .md .view{min-height:0}
  body[data-codex-family='step1'] .md .sbar{max-height:48%;overflow-y:auto;overscroll-behavior:contain}
  body[data-codex-family='step1'] .md .strip{max-height:20%;min-height:0;flex-shrink:0}
  body[data-codex-family='step1'] .md .side{height:100%;min-height:0;overflow-y:auto;overflow-x:hidden;overscroll-behavior-y:contain;scrollbar-gutter:stable;scrollbar-width:thin;border-top:1px solid var(--codex-line);padding-top:14px}
  body[data-codex-family='step1'] .md.dg.focus{grid-template-rows:calc(60px + var(--codex-safe-top)) minmax(0,1fr)}
 }
}
/* Short phone landscape uses the full available height, with image and notes beside each other. */
@media screen and (orientation:landscape){
 @media(max-width:1000px),(pointer:coarse) and (max-height:600px){
  body[data-codex-family='library'] dialog.detail{position:fixed;inset:0;width:100%;max-width:100%;height:var(--codex-viewport-height);max-height:var(--codex-viewport-height);margin:0;border-radius:0;overflow:hidden}
  body[data-codex-family='library'] .dgrid{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(0,1fr);grid-template-rows:minmax(0,1fr);height:100%;max-height:100%;min-height:0;overflow:hidden;align-items:stretch}
  body[data-codex-family='library'] .viewer{display:flex;flex-direction:column;height:100%;min-height:0;overflow:hidden;padding-top:0}
  body[data-codex-family='library'] .viewer-tools{min-height:0;flex:0 0 auto;max-height:48%;overflow-y:auto;padding:calc(6px + var(--codex-safe-top)) 12px 6px calc(12px + var(--codex-safe-left));gap:6px;overscroll-behavior:contain}
  body[data-codex-family='library'] .viewer-tools>.codex-plate-nav{padding-top:4px;gap:6px}
  body[data-codex-family='library'] .viewer-tools>.codex-plate-nav .codex-touch-hint{display:none}
  body[data-codex-family='library'] .stage{height:auto;flex:1 1 0;min-height:0;padding:8px 16px 8px calc(16px + var(--codex-safe-left))}
  body[data-codex-family='library'] .viewer>.note{flex:0 0 auto;max-height:22%;overflow-y:auto;margin:0 8px 4px;padding:6px 10px;overscroll-behavior:contain}
  body[data-codex-family='library'] .viewer>.strip{flex:0 0 auto;max-height:20%;padding:5px 8px calc(5px + var(--codex-safe-bottom));min-height:0}
  body[data-codex-family='library'] .viewer>.strip button{width:48px;height:44px;flex:0 0 48px}
  body[data-codex-family='library'] .info{height:100%;min-height:0;overflow-y:auto;overflow-x:hidden;padding:calc(64px + var(--codex-safe-top)) calc(18px + var(--codex-safe-right)) calc(20px + var(--codex-safe-bottom)) 18px;scrollbar-gutter:stable;scrollbar-width:thin;overscroll-behavior-y:contain}
  body[data-codex-family='library'] .info .top{position:relative;flex:0 0 auto;padding:0 0 18px}
  body[data-codex-family='library'] .info .top:after{content:'Scroll notes ↓';bottom:0;right:0;font-size:11px}
  body[data-codex-family='library'] .info .x{position:fixed;top:calc(12px + var(--codex-safe-top));right:calc(14px + var(--codex-safe-right));min-width:44px;min-height:44px;z-index:10}
  body[data-codex-family='step1'] .mb{padding:0;height:var(--codex-viewport-height);max-height:var(--codex-viewport-height);bottom:auto}
  body[data-codex-family='step1'] .md,body[data-codex-family='step1'] .md.dg{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(0,1fr);grid-template-rows:minmax(0,1fr);height:var(--codex-viewport-height);max-height:var(--codex-viewport-height);width:100%;max-width:100%;overflow:hidden;border-radius:0}
  body[data-codex-family='step1'] .md::before{display:none}
  body[data-codex-family='step1'] .md .stage{grid-row:1;grid-column:1;height:100%;min-height:0;overflow:hidden;padding-top:var(--codex-safe-top)}
  body[data-codex-family='step1'] .md .view{min-height:0;padding-left:var(--codex-safe-left)}
  body[data-codex-family='step1'] .md .sbar{max-height:48%;overflow-y:auto;padding-bottom:calc(7px + var(--codex-safe-bottom));overscroll-behavior:contain}
  body[data-codex-family='step1'] .md .strip{max-height:20%;min-height:0;flex-shrink:0}
  body[data-codex-family='step1'] .md .side{grid-row:1;grid-column:2;height:100%;min-height:0;overflow-y:auto;overflow-x:hidden;padding:calc(64px + var(--codex-safe-top)) calc(18px + var(--codex-safe-right)) calc(20px + var(--codex-safe-bottom)) 18px;scrollbar-gutter:stable;scrollbar-width:thin;overscroll-behavior-y:contain}
  body[data-codex-family='step1'] .md>.x{position:fixed;top:calc(12px + var(--codex-safe-top));right:calc(14px + var(--codex-safe-right));min-width:44px;min-height:44px;z-index:30}
  body[data-codex-family='step1'] .md.dg.focus{grid-template-columns:minmax(0,1fr)}
  body[data-codex-family='step1'] .md.dg.focus .stage{padding-top:calc(60px + var(--codex-safe-top))}
 }
}
body[data-codex-family='library'] .info.quiz-hidden :is(.exam,.look,.watch,.note,.related,.companions,.actions,.credit){display:none}
body[data-codex-family='library'] .info.quiz-hidden h2{filter:none;user-select:text;pointer-events:auto}
body[data-codex-family='library'] .info.quiz-hidden .top:after{content:none}
body[data-codex-family='library'] .quiz-prompt{display:flex;flex-direction:column;gap:16px;padding:18px;border:1px solid var(--codex-line);border-right:3px solid var(--codex-track);border-radius:12px;background:var(--codex-soft);box-shadow:4px 3px 16px -8px var(--codex-track)}
body[data-codex-family='library'] .quiz-prompt p{margin:0;font:400 15px/1.5 var(--codex-sans)}
body[data-codex-family='library'] .quiz-prompt .quiz-reveal{align-self:flex-start;min-height:44px}
body[data-codex-family='step1'] .side.hidden-a :is(.hide,.src){display:none}
body[data-codex-family='step1'] .side:not(.hidden-a) .quiz-instruction{display:none}
body[data-codex-family='step1'] .quiz-instruction{padding:16px;border:1px solid var(--codex-line);border-right:3px solid var(--codex-track);border-radius:12px;background:var(--codex-soft);margin:0}
.codex-media-error{position:absolute;inset:12px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:16px;text-align:center;background:#10272b;color:#fff;z-index:2;font:400 15px/1.5 var(--codex-sans,Arial,sans-serif)}
.codex-media-error button{min-height:44px;padding:10px 18px;border:1px solid #ffffff66;border-radius:8px;background:#fff;color:var(--codex-track);font-weight:600;touch-action:manipulation}