/* Reuse the approved lettering reader; only add interactive story controls. */
#comic-reader{min-height:100dvh}.stage{display:block!important;align-content:normal!important}.focus-wrap{width:100%}.context{margin-bottom:12px}.context-button{cursor:zoom-out}#context-art{height:auto;aspect-ratio:var(--panel-ratio,2 / 1)}
[data-mode=guided] .stage{display:flex!important;flex-direction:column}[data-mode=guided] #context{order:0}[data-mode=guided] #focus-wrap{order:1}[data-mode=guided] #story-card{order:2}
.story-card{max-width:700px;margin:12px auto 20px;padding:24px;border:2px solid var(--ink);background:var(--paper);border-radius:5px}.story-card h1,.story-card h2{font-size:22px;line-height:1.25;margin:0 0 12px}.story-card p{font-size:16px;line-height:1.6;margin:0 0 16px}.story-card .card-count{font-size:14px;color:var(--muted);margin:0 0 8px}.answer-list{display:grid;gap:10px}.answer-button{width:100%;min-height:56px;background:white;border:2px solid var(--ink);border-radius:6px;padding:14px 16px;text-align:left;font-size:17px;line-height:1.3}.answer-button small{display:block;font-size:13px;color:var(--muted);margin-top:6px;line-height:1.5}.answer-button[aria-pressed=true]{background:var(--yellow)}.answer-button:disabled{opacity:1;cursor:default}.answer-button:disabled:not([aria-pressed=true]){opacity:.55}.answers-math{grid-template-columns:repeat(3,1fr)}.answers-math .answer-button{text-align:center;font-size:25px}.hint-button{margin-top:14px}.hint-text{border-left:3px solid var(--purple);padding-left:12px;margin-top:14px}.math-viz{margin:20px 0;display:grid;gap:10px}.math-viz figcaption{font-size:13px;line-height:1.5}.math-bar{display:grid;grid-template-columns:repeat(var(--cells),1fr);gap:3px;border:2px solid var(--ink);padding:3px;min-height:45px;background:white}.math-cell{min-width:0;min-height:34px;border:1px solid var(--ink);background:#fff}.math-cell.filled{background:var(--purple)}.math-cell.striped{background:repeating-linear-gradient(45deg,#ddd7c8 0 5px,#625d6b 5px 7px)}.math-cell.group-end{border-right:4px solid var(--ink)}.math-grid{display:grid;grid-template-columns:repeat(var(--cols),1fr);gap:5px;max-width:320px}.math-equation{font-size:26px!important;font-weight:600;text-align:center;padding:16px;background:#eee8f7}.ending-actions{display:flex;flex-wrap:wrap;gap:12px}.ending-actions a{display:flex;align-items:center;min-height:48px;color:var(--purple)}
#scroll-page .page-panel{cursor:zoom-in;margin-bottom:12px}#scroll-page .story-card{margin-top:18px;margin-bottom:24px}#scroll-continue{margin:12px auto 24px}.reader-footer{padding-top:10px}.is-decision #closer{visibility:hidden}.is-decision #stage{flex:1}.is-decision .context{display:none!important}.is-decision #focus-wrap{display:none!important}
.decision-review{font-size:13px!important;color:var(--muted)}.page-panel svg{background:#fff}.loading-note{padding:24px;line-height:1.6}
@media(max-width:600px){.reader-options{position:relative}.story-card{padding:18px 14px}.story-card h1,.story-card h2{font-size:20px}.story-card p{font-size:15px}.answers-math .answer-button{font-size:23px;padding:14px 8px}[data-mode=guided] .context-button{width:min(160px,100%);max-width:160px;margin-inline:auto}.reader-bottom{flex-wrap:wrap}.answer-button{min-height:56px}.math-bar{gap:2px;padding:2px}.math-cell{min-height:30px}}

/* ---------- Reader fit (responsive QA 2026-10-16) ----------
   The reader is exactly one screen tall (dvh), so the page itself never scrolls. Bars keep their size; the stage
   takes the rest and scrolls inside itself when a card is long. The panel is as large as the stage allows at its
   own aspect ratio, capped so the art is not blown up past its pixels: at most 1.6x on standard screens and
   1 CSS px per art px on high-density screens (2x device pixels on iPads). Full screen lifts that cap.
   Scroll mode in the normal page keeps the document scroll. */
#comic-reader{--pad-l:max(24px,env(safe-area-inset-left));--pad-r:max(24px,env(safe-area-inset-right));--max-scale:1.6;height:100vh;height:100dvh;min-height:0;overflow:hidden}
@media(min-resolution:1.2dppx){#comic-reader{--max-scale:1.33}}
@media(min-resolution:1.45dppx){#comic-reader{--max-scale:1.1}}
@media(min-resolution:1.6dppx){#comic-reader{--max-scale:1}}
#comic-reader[data-mode=scroll]:not(.expanded){height:auto;min-height:100vh;min-height:100dvh;overflow:visible}
#comic-reader.expanded{padding:0;overflow:hidden}

/* bars: 44px logo target, safe-area insets on every side */
#comic-reader .reader-bar{flex:none;padding:max(16px,env(safe-area-inset-top)) var(--pad-r) 16px var(--pad-l)}
#comic-reader .logo{display:inline-flex;align-items:center;min-height:44px;min-width:44px}
#comic-reader .reader-options{flex:none;padding-left:var(--pad-l);padding-right:var(--pad-r)}
#comic-reader .reader-footer{flex:none;padding:10px var(--pad-r) max(14px,env(safe-area-inset-bottom)) var(--pad-l)}
#comic-reader .reader-footer{position:relative}#comic-reader #announcement{margin:0;left:0;bottom:0}

/* stage */
#comic-reader .stage{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:6px var(--pad-r) 12px var(--pad-l)}
#comic-reader[data-mode=scroll]:not(.expanded) .stage{overflow:visible}
#comic-reader:not([data-mode=scroll]) .stage{display:flex!important;flex-direction:column}
#comic-reader:not([data-mode=scroll]) #story-card .story-card{width:100%}
#comic-reader:not([data-mode=scroll]) .context{flex:none}

/* the panel: fills the focus area, keeps its ratio, no letterbox bands */
#comic-reader #focus-wrap{flex:1 1 0;min-height:180px;width:100%;max-width:none;margin:0;display:grid;place-items:center;background:transparent;border:0;overflow:visible;touch-action:pan-y pinch-zoom}
#comic-reader #focus-art{box-sizing:content-box;width:min(100%,calc(var(--crop-w,724) * var(--max-scale) * 1px));height:auto;max-width:none;max-height:calc(100svh - 300px);min-height:0;aspect-ratio:var(--crop-ratio,1);border:2px solid var(--ink);background:var(--ink)}
@supports (width:1cqh){
  #comic-reader #focus-wrap{container-type:size}
  #comic-reader #focus-art{width:min(100cqw - 4px,(100cqh - 4px) * var(--crop-r,1),var(--crop-w,724) * var(--max-scale) * 1px);max-height:none}
  #comic-reader.expanded #focus-art{width:min(100cqw - 4px,(100cqh - 4px) * var(--crop-r,1))}
}
#scroll-page .page-panel svg{max-width:calc(var(--crop-w,724) * var(--max-scale) * 1px);margin-inline:auto}

/* the transcript opens under the panel without pushing the footer off screen */
#comic-reader:not([data-mode=scroll]) #transcript,#comic-reader.expanded #transcript{max-height:32vh;max-height:32dvh;overflow-y:auto;margin-bottom:0}

/* readable sizes for 9 to 12 year olds: nothing under 13px */
#comic-reader .episode{font-size:13px}
#comic-reader .episode strong{font-size:15px}
#comic-reader .icon-button{font-size:14px}
#comic-reader .text-button{font-size:14px}
#comic-reader .position{font-size:14px}
#comic-reader .reader-bottom{font-size:14px}
#comic-reader .context-button span{font-size:13px}
#comic-reader .context p{font-size:13px}

@media(max-width:600px){
  #comic-reader{--pad-l:max(12px,env(safe-area-inset-left));--pad-r:max(12px,env(safe-area-inset-right))}
  #comic-reader .reader-bar{padding-top:max(6px,env(safe-area-inset-top));padding-bottom:6px}
  #comic-reader .reader-options{padding-top:6px;padding-bottom:6px}
  #comic-reader .stage{padding:4px max(8px,env(safe-area-inset-right)) 8px max(8px,env(safe-area-inset-left))}
  #comic-reader .reader-footer{padding-top:8px;padding-bottom:max(8px,env(safe-area-inset-bottom))}
  #comic-reader .reader-bottom{margin-top:4px}
  #comic-reader .episode strong{font-size:14px}
}

/* Compact chrome (full screen from 700px wide, and short landscape screens): logo, title, modes and the
   full-screen button share one row, so the panel gets the height. Set by story-v2.js (.chrome-compact). */
#comic-reader.chrome-compact{display:grid;grid-template-columns:auto minmax(0,1fr) auto auto;grid-template-rows:auto minmax(0,1fr) auto;align-items:center}
.chrome-compact .reader-bar{display:contents}
.chrome-compact .logo{grid-area:1/1;margin:max(6px,env(safe-area-inset-top)) 0 6px var(--pad-l)}
.chrome-compact .episode{grid-area:1/2;margin-left:16px;min-width:0}
.chrome-compact .episode>*{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chrome-compact .reader-options{grid-area:1/3;padding:6px 0 6px 12px}
.chrome-compact #fullscreen{grid-area:1/4;margin:6px var(--pad-r) 6px 12px}
.chrome-compact .stage{grid-area:2/1/3/5;align-self:stretch;border-top:1px solid #d9d2c3;padding-top:10px}
.chrome-compact .reader-footer{grid-area:3/1/4/5}
@media(max-width:999px){.chrome-compact .fs-label{display:none}.chrome-compact #fullscreen{padding:8px}}
@media(min-width:900px){
  .chrome-compact .reader-footer{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;column-gap:16px;padding-top:8px;padding-bottom:max(8px,env(safe-area-inset-bottom))}
  .chrome-compact .reader-bottom{display:contents}
  .chrome-compact #navigation-hint{grid-area:1/1;justify-self:start;color:var(--muted)}
  .chrome-compact #paging{grid-area:1/2;width:560px;max-width:100%;margin:0}
  .chrome-compact #scroll-continue{grid-area:1/2;margin:0}
  .chrome-compact #transcript-toggle{grid-area:1/3;justify-self:end;color:var(--muted)}
  .chrome-compact #transcript{grid-area:2/1/3/4;width:100%}
}