/* Content first on iPad/iPhone; controls remain at least 44px. */
#shelf:has(.library.scrolling){padding:8px max(8px,env(safe-area-inset-right)) max(8px,env(safe-area-inset-bottom))}
#shelf .library.scrolling{width:min(1180px,100%)}
#shelf .library.scrolling .library-header{padding:5px 12px;gap:8px;min-height:56px}
#shelf .library.scrolling .library-header>span{font-size:17px}
#shelf .paged .lib-top{padding:6px 12px;gap:6px;grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
#shelf .paged .lib-title{grid-column:1/-1;gap:8px}
#shelf .paged .lib-title h3{font-size:20px;line-height:1.2}
#shelf .paged .lib-water-key{display:none}
#shelf .paged .lib-tools{flex-wrap:nowrap;min-width:0;gap:6px}
#shelf .paged .lib-seg{flex:none;border-width:2px;border-radius:10px}
#shelf .paged .lib-seg button{font-size:13px;padding:0 8px}
#shelf .paged .lib-search{min-width:70px;padding:0 6px;border-width:2px}
#shelf .paged .fit-chapters{gap:6px}
#shelf .paged .fit-chapters select,#shelf .paged .fit-chapters button{border-width:2px;font-size:14px;padding:4px 6px}
#shelf .paged .lib-scroll{padding:5px 12px 8px}
#shelf .paged .lib-chhead{padding:4px 6px;gap:8px}
#shelf .paged .library-thumbnail{height:44px;width:56px}
#shelf .paged .lib-sub{margin:4px 0;padding:5px 7px 7px}
#shelf .paged .lib-sub h5{margin-bottom:5px}
#shelf .paged .lib-row{min-height:86px;padding:6px 9px}
#shelf .fit-pages{padding:5px 12px 7px}
.sp-width{display:flex;align-items:center;gap:5px;white-space:nowrap;font-size:13px;order:-1;flex:none}
#scratchpadPenWidth{min-height:44px;min-width:88px;font:600 16px var(--f-body);border:2px solid var(--ink);border-radius:10px;background:#fff;padding:3px}
#scratchpad .sp-toolbar{padding:5px;gap:5px}
#scratchpad .sp-status{font-size:12px;line-height:1.35}
#scratchpad .sp-settings>summary{font-size:13px}
.tl-open{max-width:160px;padding:8px 16px;text-align:center}
.tl-open:focus-visible{outline:4px solid #ef762d;outline-offset:3px}
.hw-modal{padding:10px;align-items:center;overflow:hidden}
.hw-card{max-height:100%;min-height:0}
.hw-review-body{flex:1}
.hw-keyboard .hw-ink-preview,.hw-keyboard .hw-recognition-note{display:none}
.hw-keyboard .hw-header{padding:8px 58px 8px 12px;min-height:54px}
.hw-keyboard .hw-header h2{font-size:20px}
.hw-keyboard .hw-review-body{padding:8px 12px;gap:6px}
.hw-keyboard .hw-question-context{padding:5px 8px;font-size:15px;max-height:90px;overflow:auto}
.hw-keyboard .hw-review-actions{padding:6px 10px;gap:6px}
.hw-keyboard .hw-check-feedback:empty{display:none}
#handwritingType{background:#fff7dd;min-width:72px}
#sceneMusic[hidden]{display:none!important}
@media(min-width:740px) and (max-width:1400px){
 body[data-view=game]:not(.dungeon-battle) #stage:not(.scratch-open):not(.with-sheet){--coachW:0px}
 body[data-view=game]:not(.dungeon-battle) #stage:not(.scratch-open):not(.with-sheet)>.coach{display:none!important}
 #board .qhead h2{font-size:clamp(21px,2.2vw,28px)}
 #board .qhead{margin-bottom:7px;gap:8px}
 #qarea .bk-pic,#qarea .mt-pic{max-height:min(48dvh,420px);max-width:min(100%,calc(min(48dvh,420px) * var(--ar,1)))}
 #qarea .bk-pic img,#qarea .mt-pic img{max-height:100%;object-fit:contain;object-position:center}
}
@media(max-width:739px){
 #shelf .library.scrolling .library-header{flex-wrap:nowrap;padding:4px 7px;gap:5px}
 #shelf .library.scrolling .library-header>span{font-size:14px}
 #shelf .library-grade{font-size:0;margin-left:auto;gap:0}
 #shelf .library-grade select{font-size:14px;max-width:114px;padding:4px}
 #shelf .library-back{padding:4px 7px;font-size:14px}
 #shelf .paged .lib-top{display:flex;flex-direction:column;padding:5px 8px;gap:5px}
 #shelf .paged .lib-title h3{font-size:18px}
 #shelf .lib-prog{font-size:12px}#shelf .lib-prog .lib-bookbar{width:60px}
 #shelf .paged .lib-scroll{padding:4px 8px 8px}
 #board{padding:10px!important}
 #board .qhead{margin-bottom:6px;gap:6px}
 #board .qhead h2{font-size:18px;line-height:1.25}
 #board .qhead .src{display:none}
 #board .tl-open{min-width:88px;max-width:132px;font-size:13px;padding:7px 12px}
 #board .tl-open-label,#board .tl-open-short{font-size:13px}
 #board .review-notice{font-size:12px;padding:5px;gap:4px}
 #qarea{gap:6px}#qarea .hw-launch{margin:0}
 #qarea .bk-text{font-size:20px;line-height:1.4}
 #qarea .bk-pic,#qarea .mt-pic{max-height:min(42dvh,280px);max-width:min(100%,calc(min(42dvh,280px) * var(--ar,1)))}
 #qarea .bk-pic img,#qarea .mt-pic img{max-height:100%;object-fit:contain;object-position:center}
 #qarea .bk-tray{gap:7px;padding:8px}
 #qarea .bk-tray .chip{min-height:44px;padding:6px 10px}
 #scratchpad .sp-toolbar{flex-wrap:nowrap;min-height:54px;overflow:auto}
 #scratchpad .sp-navigation{padding:2px 5px;gap:4px}
 #scratchpad .sp-footer .sp-account{display:none}
 #scratchpad .sp-header{min-height:50px}
 #scratchpad .hw-tools{flex-wrap:wrap;gap:4px;padding:3px 5px}
 #scratchpad .hw-status{flex-basis:100%;font-size:11px;line-height:1.3}
 #scratchpad .hw-status:empty{display:none}
 .hw-modal{padding:6px}
 .hw-review-actions button{min-height:44px;font-size:14px}
 .hw-keyboard .hw-confirm{font-size:13px;min-height:44px}
}
@media(prefers-reduced-motion:reduce){.tl-open,.tl-open-sheen{animation:none}}
/* The book dialog owns its header; the underlying global header must not cover it. */
body:has(#shelf:not([hidden]) .library.scrolling)>.hud{visibility:hidden;pointer-events:none}
#shelf .paged .lib-txt{grid-template-columns:max-content minmax(0,1fr);column-gap:8px;row-gap:2px;line-height:1.25}
#shelf .paged .lib-txt>small,#shelf .paged .lib-txt>b{grid-column:1/-1}
@media(min-width:740px) and (max-width:1400px){body[data-view=game]:not(.dungeon-battle) #stage:not(.scratch-open):not(.with-sheet){grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr)}}
#stage.scratch-open .hw-launch{display:none}
@media(max-width:739px){#stage.scratch-open .review-notice,#stage.scratch-open .rv-ribbon{display:none}#stage.scratch-open .qhead{margin-bottom:4px}}
/* While writing, retain the question and lesson cue above the paper. */
@media(max-width:739px){
 #stage.scratch-open #board .qhead h2{font-size:16px}
 #stage.scratch-open #board .tl-open{padding:7px 10px;min-height:44px}
 #stage.scratch-open #board .tl-open-label,#stage.scratch-open #board .tl-open-short{font-size:12px}
}