/* Tablet portrait uses the same live, state-preserving sections as landscape. */
.vp-answer-part{display:inline-flex;flex-wrap:wrap;align-items:center;gap:4px 8px;max-width:100%;min-width:0}
@media(min-width:740px) and (min-height:540px){
 body.study-window #qarea .vp-answer-part{flex-direction:row}
 body.study-window #qarea .module-scene{margin:0;min-width:0;width:100%}
 /* Comparison objects must share one view and one image scale. Nested cards
    otherwise keep a fixed 190px picture well after the pane has become shorter. */
 body.study-window #qarea .md-cards:has(.md-compare){grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;align-items:stretch}
 body.study-window #qarea .md-cards:has(.md-compare)>.md-observe{justify-content:flex-start}
 body.study-window #qarea .md-compare>.md-nested-figure:only-child{grid-column:1/-1;width:100%}
 body.study-window #qarea .md-compare{--vp-comparison-height:clamp(46px,calc(var(--vp-media-height,290px) - 100px),190px)}
 body.study-window #qarea .md-compare .md-picture{display:flex;align-items:flex-end;justify-content:center;height:var(--vp-comparison-height);min-height:0}
 body.study-window #qarea .md-compare .md-picture img{max-height:calc(var(--vp-comparison-height) - 6px)!important;width:auto!important;height:auto!important;object-fit:contain}
 body.study-window #qarea .fm-question-pane .fm-ex-h{flex-wrap:wrap;gap:6px;padding:6px 8px}
 body.study-window #qarea .fm-question-pane table.dt,
 body.study-window #sheet .demo table.dt{width:100%;table-layout:auto;overflow-wrap:anywhere}
 body.study-window #qarea .fm-question-pane table.dt :is(th,td),
 body.study-window #sheet .demo table.dt :is(th,td){padding:5px 6px}
 /* A re-opened section should appear immediately without rotated tag corners
    temporarily creating native WebKit scrollbars. Teaching motion is unchanged. */
 body.study-window #sheet .vp-paged>.pop{animation:vp-section-in .18s ease-out both}
 body.study-window:has(#board.smart-expanded)>.hud{visibility:hidden}
 body.study-window #board.smart-expanded{inset:var(--vp-expand-inset,12px) var(--vp-expand-inset,12px) auto!important;height:calc(var(--learning-viewport-height,100dvh) - 2 * var(--vp-expand-inset,12px))!important}
 body.study-window #board.smart-expanded #qarea .smart-question-stem :is(.bk-pic,.mt-pic){width:min(100%,calc((var(--vp-media-height,360px) - var(--learning-frame-y,6px)) * var(--learning-image-ratio,1) + var(--learning-frame-x,6px)))!important}
}
@keyframes vp-section-in{from{opacity:0}to{opacity:1}}
@media(max-width:959px),(orientation:portrait){body.study-window #board.smart-expanded{--vp-expand-inset:6px}}
@media (min-width:740px) and (min-height:540px) and (orientation:portrait){
 body.study-window:not(.dungeon-battle) #board{display:flex;flex-direction:column;height:100%;min-height:0;padding:12px 16px}
 body.study-window:not(.dungeon-battle) #qarea{display:flex;flex-direction:column;flex:1;height:100%;max-height:100%;min-height:0;overflow:auto}
 body.study-window #qarea :is(.smart-question-grid,.fm-layout){display:grid;grid-template-columns:minmax(235px,.8fr) minmax(0,1.4fr);grid-template-rows:minmax(0,1fr);flex:1;height:100%;min-height:0;gap:12px}
 body.study-window #qarea .fm-ex .fm-layout{grid-template-columns:minmax(0,1.15fr) minmax(280px,1fr)}
 body.study-window #qarea :is(.smart-question-stem,.smart-question-answers,.fm-question-pane,.fm-display-pane,.fd-deck-panel){min-height:0;height:100%;max-height:100%;overflow:auto}
 body.study-window #qarea>.fm{flex:1;min-height:0;height:100%;max-height:100%}
 body.study-window #qarea>.fm.fm-ex>.fm-ex-b{flex:1;min-height:0;height:100%;max-height:100%}
 body.study-window #qarea .vp-lesson-tabs{display:flex;flex-direction:column;gap:8px;min-height:0;height:100%}
 body.study-window #qarea .vp-lesson-tabs>.fd-tabs{flex:none}
 body.study-window #qarea .vp-lesson-tabs>.fd-deck-panel{flex:1;height:auto;min-height:0;overflow:auto}
 body.study-window #qarea .fm-layout.vp-search-tabs{grid-template-columns:minmax(0,1fr);grid-template-rows:48px minmax(0,1fr)}
 body.study-window #qarea .vp-paged{height:var(--vp-page-height)!important}
 body.study-window #qarea .fm-acts{flex:none}
 body.study-window #qarea .smart-question-grid:has(.smart-question-stem img){grid-template-columns:minmax(0,1.1fr) minmax(270px,1fr)}
 body.study-window #qarea .smart-question-grid.smart-marked{grid-template-columns:minmax(0,1.4fr) minmax(250px,1fr)}
}

/* An explanation gets the available reading window; closing restores the live question. */
@media(min-width:740px) and (min-height:540px){
 body.study-window:not(.dungeon-battle) #stage.with-sheet{grid-template-columns:minmax(0,1fr)!important;grid-template-rows:minmax(0,1fr)!important;grid-template-areas:'aside'!important;padding:0 var(--gutR) var(--gutB) var(--gutL)}
 body.study-window:not(.dungeon-battle) #stage.with-sheet>.play,
 body.study-window:not(.dungeon-battle) #stage.with-sheet>.learning-divider{display:none!important}
 body.study-window:not(.dungeon-battle) #stage.with-sheet>#sheet{height:100%;max-height:100%;min-height:0;width:100%;padding:14px;gap:10px;overflow:hidden}
 body.study-window #sheet .sheet-content{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(240px,1fr);grid-template-rows:auto auto minmax(0,1fr);gap:12px;overflow:hidden;min-height:0}
 body.study-window #sheet .explanation-guide{grid-column:1/-1;grid-row:1;margin:0;padding:6px 10px}
 body.study-window #sheet .answer-reading{grid-column:1/-1;grid-row:2;margin:0;min-height:0;overflow:auto;white-space:pre-line}
 body.study-window #sheet .demo{grid-column:1;grid-row:3;min-height:0;min-width:0;max-height:100%;padding:12px;overflow:auto;align-content:start}
 body.study-window #sheet .demo:empty{display:none}
 body.study-window #sheet .ptext{grid-column:2;grid-row:3;min-height:0;min-width:0;overflow:auto;white-space:pre-line;font-size:20px;line-height:1.6;padding:10px;background:#fff5de;border-radius:14px;overflow-wrap:anywhere}
 body.study-window #sheet.retry .ptext{grid-column:1/-1}
 body.study-window #sheet .pbtns{margin-top:0;flex:none}
 body.study-window #sheet .vp-paged{align-items:stretch}
 body.study-window #sheet .vp-lane{position:relative;padding-bottom:56px!important;box-sizing:border-box}
 body.study-window #sheet :is(svg,img,canvas){max-width:100%;object-fit:contain}
 body.study-window #sheet :is(.bk-dimg,.bk-pic img,.mt-pic img,.md-write-image,.fl-docimg){max-height:var(--vp-media-height,350px);width:auto;height:auto}
 body.study-window #sheet .demo>.vp-pages{align-self:end}
 body.study-window #sheet .demo .fm-demo{width:100%;min-width:0}
}

@media(min-width:740px) and (min-height:540px){
 body.study-window #sheet .vp-lane>*{margin-block:0!important}
 body.study-window #sheet :is(.vp-paged,.vp-flow)>*{margin-block:0!important}
}

/* Keep short battle cards compact; constrain only cards that exceed the arena. */
@media(min-width:740px) and (min-height:540px){
 body.study-window.dungeon-battle #stage:has(#board[data-vp-battle-fit]),
 body.study-window.dungeon-battle #stage:has(#board[data-vp-battle-fit])>.play,
 body.study-window.dungeon-battle #stage #board[data-vp-battle-fit],
 body.study-window.dungeon-battle #sheet[data-vp-battle-fit]{height:var(--dg-paper-height)!important}
 body.study-window.dungeon-battle #board[data-vp-battle-fit] #qarea{flex:1;min-height:0;container:study-card / inline-size}
 body.study-window.dungeon-battle #board[data-vp-battle-fit] .smart-question-grid{height:100%}
 body.study-window.dungeon-battle #sheet[data-vp-battle-fit] .sheet-content{flex:1;min-height:0}
 body.study-window.dungeon-battle #sheet .sheet-content{grid-template-columns:minmax(0,1.3fr) minmax(210px,1fr)}
}
@media(min-width:740px) and (min-height:540px){
 body.study-window #qarea .vp-flow>*{margin-block:0!important}
 body.study-window #sheet .demo svg{max-height:var(--vp-media-height,350px);height:auto;object-fit:contain}
 body.study-window.focus-mode #board:has(#qarea>.fm)>.qhead h2{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
 body.study-window.dungeon-battle #board .qhead{padding:6px 12px;margin-bottom:6px}
 body.study-window.dungeon-battle #qarea{gap:8px}
 body.study-window.dungeon-battle:has([data-vp-battle-fit]){--dg-paper-width:min(calc(100vw - 300px),1080px)}
}
@media(min-width:740px) and (max-width:899px) and (min-height:540px){body.study-window.dungeon-battle:has([data-vp-battle-fit]){--dg-paper-width:calc(100vw - 20px)}}
@media(min-width:740px) and (min-height:540px){
 body.study-window .vp-page-fragment{white-space:normal}
 body.study-window #sheet figure>img{max-height:calc(var(--vp-media-height,350px) - 90px);width:auto;height:auto;object-fit:contain}
}
@media(min-width:740px) and (min-height:540px){
 body.study-window #qarea>.fm{box-sizing:border-box;margin-block:0}
 body.study-window #qarea .vp-paged .md-observe img{max-height:calc(var(--vp-media-height,260px) - 85px);width:auto;object-fit:contain}
}
@media(min-width:740px) and (min-height:540px){
 /* The battle HUD already shows progress; the full question heading remains in its reading pane. */
 body.study-window.dungeon-battle:is(.smart-study,.focus-mode) #board>.qhead{display:none!important}
}
@media(min-width:740px) and (min-height:540px){
 body.study-window #qarea>.fm.fm-ex{flex:1;min-height:0;height:100%;max-height:100%;overflow:hidden}
}

@media(min-width:740px) and (min-height:540px){
 body.study-window.dungeon-battle #sheet:not([data-vp-battle-fit]) .sheet-content{grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto auto auto}
 body.study-window.dungeon-battle #sheet:not([data-vp-battle-fit]) .demo{grid-column:1;grid-row:3}
 body.study-window.dungeon-battle #sheet:not([data-vp-battle-fit]) .ptext{grid-column:1;grid-row:4;padding:4px 0;background:none}
}

@media(min-width:740px) and (min-height:540px){
 body.study-window #sheet .answer-reading{min-height:min-content}
}

/* Complete questions stay in one view; a small layout-aware reduction is enough
   for normal exercises. Long reading keeps native scrolling, never extra pages. */
#questionListen{display:inline-flex;align-items:center;justify-content:center;gap:5px;min-width:80px;min-height:44px;padding:5px 12px;border:3px solid var(--ink);border-radius:14px;background:#ffdf78;color:var(--ink);font:700 16px/1.2 var(--f-body);box-shadow:0 3px 0 #a4804e;cursor:pointer}
#questionListen[aria-busy=true]{background:#c3ebd8}
#board>.qhead{position:relative;padding-right:98px}
#questionListen{position:absolute;right:0;top:0}
@media(min-width:740px) and (min-height:540px){
 body.study-window #qarea :is(button,[role=button],input:not([type=range]),select,.bk-blank,.mt-box,.fm-slot,.ms-slot){min-height:var(--study-hit-size,44px);min-width:var(--study-hit-size,44px);box-sizing:border-box}
 body.study-window #qarea :is(.bk-line,.bk-sent,.mt-line,.mt-prompt,.fm-para-b,.fl-doc,.ms-sent){font-size:max(20px,var(--study-reading-size,18px))}
 body.study-window #qarea :is(.smart-question-stem,.smart-question-answers,.fm-question-pane,.fm-display-pane){scrollbar-width:thin;overscroll-behavior:contain}
 body.study-window #qarea .fm-display-pane:has(.fl-search){display:flex!important;flex-direction:column}
 body.study-window #qarea .mp-sort-task>.mp-pool{display:flex;flex-wrap:wrap;gap:6px}
 body.study-window #qarea .mp-sort-preview{display:none}
 body.study-window #sheet .answer-reading{max-height:180px;overflow:auto}
 body.study-window #sheet .ptext{font-size:max(18px,var(--study-reading-size,18px))}
 body.study-window #sheet :is(button,[role=button]){min-height:var(--study-hit-size,44px);min-width:var(--study-hit-size,44px)}
 body.study-window.dungeon-battle:is(.smart-study,.focus-mode) #board>.qhead{display:flex!important;min-height:44px;padding:4px 100px 4px 8px}
 body.study-window.dungeon-battle:is(.smart-study,.focus-mode) #board>.qhead #qtitle{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
}