/* A stable book: only the text scrolls; the illustration and controls stay put. */
body:has(#reader[open]){overflow:hidden}
.reader-dialog{height:min(980px,96dvh);max-height:96dvh}
.reader-top{gap:16px;min-height:58px;padding:9px 20px}
.reader-top>p{flex:1;min-width:0;max-width:none;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:19px}
.reader-top .quiet-button{min-height:44px;white-space:nowrap}
.reader-top .language-toggle{flex-shrink:0}
.reader-body{display:flex;flex-direction:column;overflow:hidden;min-height:0}
.reader-tools{flex-shrink:0;flex-wrap:nowrap;gap:12px;padding:5px 20px}
.reader-tools>div{flex-wrap:nowrap;gap:4px}
.reader-tools button{min-height:44px;padding:9px 12px}
#chapter-label{white-space:nowrap;font-size:12px}
.narrator-bar{display:none}
.book-spread{flex:1;min-height:0;grid-template-columns:minmax(0,43%) minmax(0,57%);grid-template-rows:minmax(0,1fr);align-items:stretch;margin:0 20px 4px;overflow:hidden}
.picture-page{position:relative;top:auto;min-width:0;min-height:0;height:auto;overflow:hidden;background:#f3f0e5}
.picture-button{display:block;position:relative;width:100%;height:100%;padding:0;border:0;background:none;cursor:zoom-in}
.picture-page img{object-fit:contain;object-position:center top;width:100%;height:100%}
.picture-zoom{position:absolute;right:12px;bottom:12px;border:1px solid #d4ddc9;border-radius:24px;padding:8px 12px;background:#fffef7ed;color:#315e50;font-size:12px;pointer-events:none}
.picture-button:focus-visible{outline:3px solid #315e50;outline-offset:-4px}
.text-page{min-height:0;overflow:auto;overscroll-behavior:contain;overflow-anchor:none;scroll-behavior:auto;scroll-padding:24px;padding:24px 30px 32px;scrollbar-gutter:stable}
.text-page:focus-visible{outline:2px solid #8eaa73;outline-offset:-3px}
.text-page h2{font-size:29px;line-height:1.25;margin:8px 0 18px}
.story-text{font-size:22px;line-height:1.85;overflow-wrap:anywhere}
.story-text.large{font-size:28px}
.reader-hint{margin-top:20px}
.book-spread.text-only{width:calc(100% - 40px);grid-template-columns:minmax(0,1fr);margin:0 auto 4px;max-width:900px}
.book-spread.text-only .text-page{padding:28px 40px}
.text-page .story-ending{margin:25px 0 0;padding:22px;max-width:none}
.reader-bottom{gap:12px;padding:9px 20px 8px;min-width:0;justify-content:space-between}
.reader-bottom .page-arrow{width:44px;height:44px;flex-shrink:0}
.playback{justify-content:center;gap:8px;min-width:0}
.playback .primary-button{min-width:135px}
.playback .quiet-button{min-height:44px}
.speed-label select{min-height:44px;font-size:14px}
.speech-status:empty{display:none}
.speech-status{min-height:0;max-height:65px;overflow:auto;padding:2px 16px 8px}
.reader-options{width:min(390px,calc(100vw - 24px));padding:28px;max-height:90dvh;overflow:auto}
.reader-options h2{font-size:29px;margin:8px 35px 23px 0}
.reader-option-list{display:grid;gap:9px}
.reader-option-list>.quiet-button{text-align:left;min-height:48px;border:1px solid #d9e1ce;border-radius:10px;padding:13px 16px}
.picture-dialog{width:min(1050px,100vw);height:min(900px,100dvh);max-height:100dvh;max-width:100vw;background:#f7f4e9;overflow:hidden}
.picture-dialog[open]{display:flex;flex-direction:column}
.picture-dialog-top{display:flex;align-items:center;justify-content:space-between;gap:15px;padding:10px 18px;flex-shrink:0;border-bottom:1px solid #dce2d1}
.picture-dialog-top p{font:20px/1.3 var(--serif);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.picture-dialog-top button{min-height:44px;flex-shrink:0}
.picture-dialog img{flex:1;min-height:0;width:100%;object-fit:contain;padding:12px}
@media(max-width:700px){
  .reader-dialog{width:100vw;height:100dvh;max-height:100dvh;border-radius:0;padding-top:env(safe-area-inset-top)}
  .reader-top{padding:5px 10px;gap:8px;min-height:52px}
  .reader-top>p{font-size:16px;max-width:none}
  .reader-top #reader-close{font-size:0;width:44px;padding:8px}
  .reader-top #reader-close::before{content:'←';font-size:24px}
  .reader-top .language-toggle button{min-height:40px;min-width:36px;padding:9px 7px}
  .reader-tools{padding:2px 10px;gap:4px;min-height:48px}
  #chapter-label{font-size:11px}
  .reader-tools>div{gap:0}
  .reader-tools button{padding:8px;font-size:12px}
  .book-spread{grid-template-columns:minmax(0,1fr);grid-template-rows:clamp(110px,25dvh,230px) minmax(0,1fr);margin:0 8px 0;border-radius:12px}
  .picture-page{height:auto;min-height:0;border-bottom:1px solid #e0e3d5}
  .picture-zoom{right:8px;bottom:8px;padding:6px 10px;font-size:11px}
  .text-page{border-left:0;padding:15px 18px 24px;scroll-padding:18px}
  #chapter-number{display:none}
  .text-page h2{font-size:25px;margin:0 0 12px}
  .story-text{font-size:21px;line-height:1.8}
  .story-text.large{font-size:27px}
  .book-spread.text-only{width:calc(100% - 16px);grid-template-rows:minmax(0,1fr);margin-bottom:0}
  .book-spread.text-only .text-page{padding:18px 22px 25px}
  .text-page .story-ending{padding:18px}
  .reader-bottom{display:grid;grid-template-columns:44px minmax(0,1fr) 44px;gap:5px;padding:7px 10px calc(7px + env(safe-area-inset-bottom))}
  .reader-bottom>.page-arrow{grid-row:1;align-self:center;width:44px;height:44px}
  .reader-bottom>.page-arrow:last-child{grid-column:3}
  .playback{grid-column:2;grid-row:1;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px;align-items:center}
  .playback .primary-button{min-width:0;font-size:13px;padding:10px 9px;min-height:44px}
  .playback #replay-button{font-size:12px;padding:8px;min-height:44px}
  .playback .speed-label{grid-column:1/-1;justify-content:center;gap:7px}
  .speed-label select{font-size:16px;padding:7px 9px;min-width:0;width:174px;max-width:100%;min-height:40px}
  #page-count{display:none}
  .speech-status{font-size:11px;padding:0 12px calc(5px + env(safe-area-inset-bottom));max-height:50px}
  .picture-dialog{border-radius:0;padding-top:env(safe-area-inset-top);padding-bottom:env(safe-area-inset-bottom)}
  .picture-dialog-top{padding:8px 12px}
  .picture-dialog-top p{font-size:16px}
  .picture-dialog-top button{font-size:12px}
  /* 16px form text avoids automatic form zoom on iPhones. */
  input:not([type=checkbox]):not([type=radio]),select,textarea{font-size:16px}
  .form-row,.creator-form .form-row{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .creator-form label,.creator-form select,.family-panel-card input,.family-panel-card select{min-width:0;max-width:100%}
}
@media(max-width:360px){
  #chapter-label{font-size:10px}
  .reader-tools button{padding:8px 6px;font-size:11px}
  .text-page{padding:13px 15px 22px}
  .text-page h2{font-size:23px}
  .reader-bottom{padding-left:7px;padding-right:7px;gap:3px}
  .speed-label{font-size:11px}
  .speed-label select{width:155px;font-size:14px}
  .creator-form .form-row{grid-template-columns:minmax(0,1fr)}
}
@media(orientation:landscape) and (max-height:600px) and (max-width:1100px){
  .reader-dialog{width:100vw;height:100dvh;max-height:100dvh;border-radius:0}
  .reader-top{min-height:46px;padding:1px max(10px,env(safe-area-inset-right)) 1px max(10px,env(safe-area-inset-left))}
  .reader-top>p{font-size:16px}
  .reader-tools{min-height:44px;padding:0 12px}
  .reader-tools button{min-height:44px;padding:8px 12px;font-size:12px}
  .book-spread{grid-template-columns:minmax(0,38%) minmax(0,62%);grid-template-rows:minmax(0,1fr);margin:0 max(10px,env(safe-area-inset-right)) 0 max(10px,env(safe-area-inset-left))}
  .picture-page{height:auto;min-height:0;border-bottom:0}
  .text-page{border-left:1px solid #e0e3d5;padding:14px 22px 24px}
  #chapter-number{display:none}
  .text-page h2{font-size:24px;margin:0 0 12px}
  .story-text{font-size:21px;line-height:1.8}
  .reader-bottom{display:flex;gap:8px;padding:4px max(12px,env(safe-area-inset-right)) calc(4px + env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-left))}
  .reader-bottom>.playback{display:flex;flex-wrap:nowrap;gap:7px;flex:1}
  .playback .primary-button{min-width:105px;font-size:13px}
  .playback .speed-label{display:flex;gap:6px}
  .speed-label select{width:160px;min-width:0;font-size:14px;min-height:44px}
  #page-count{display:none}
  .speech-status{max-height:30px;font-size:11px;padding:0 10px 3px}
}
@media(orientation:landscape) and (max-height:600px) and (max-width:650px){
  .playback .speed-label>span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}
  .speed-label select{width:145px}
  .playback #replay-button{padding:8px 5px}
}