/* Focused reading: one viewport, full page, controls in their own layout row. */
body[data-route="reader"] { overflow:hidden; }
body[data-route="reader"] #app { display:block; min-height:0; height:100dvh; }
body[data-route="reader"] .reader-main { margin:0; padding:0; width:100%; max-width:none; min-height:0; height:100dvh; }
.reader-workspace { height:100%; display:grid; grid-template-rows:auto minmax(80px,1fr) auto; background:#F6F5EF; }
.reader-topbar { display:flex; flex-wrap:wrap; align-items:center; gap:20px; min-width:0; padding:10px 24px; background:#fff; border-bottom:1px solid #DDE3DA; }
.reader-title { min-width:0; flex:1; display:flex; align-items:baseline; gap:16px; }
.reader-title h1 { font-size:20px; line-height:1.4; font-weight:650; margin:0; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.reader-title > span { color:#596B61; font-size:14px; white-space:nowrap; }
.reader-view-tools { display:flex; flex-wrap:wrap; max-width:100%; gap:8px; align-items:center; }
.reader-topbar button { min-height:44px; flex-shrink:0; white-space:nowrap; }
body[data-route="reader"] .reader-grid { display:grid; grid-template-columns:minmax(0,1fr); gap:16px; min-height:0; min-width:0; margin:0; padding:16px 24px; overflow:hidden; }
body[data-route="reader"] .reader-grid.is-practicing { grid-template-columns:minmax(0,1fr) 280px; }
body[data-route="reader"] .reading-stage { min-width:0; min-height:0; height:100%; margin:0; padding:0; border:0; border-radius:16px; box-shadow:none; background:#EAF0E6; overflow:hidden; }
body[data-route="reader"] .reader-visuals { display:grid; grid-template-columns:minmax(0,1fr); gap:12px; height:100%; min-height:0; margin:0; padding:0; }
body[data-route="reader"] .reader-visuals.with-camera { grid-template-columns:minmax(0,1fr) 148px; padding-right:12px; align-items:stretch; }
body[data-route="reader"] .page-area { display:grid; align-items:center; justify-items:center; min-height:0; min-width:0; height:100%; overflow:hidden; padding:0; margin:0; background:transparent; border-radius:12px; }
body[data-route="reader"] .page-area.is-zoomed { display:block; overflow:auto; padding:8px; }
body[data-route="reader"] .page-image { position:relative; flex:none; max-width:none; max-height:none; min-height:0; margin:0; overflow:hidden; border:0; border-radius:4px; box-shadow:0 2px 12px #243e3615; }
body[data-route="reader"] .page-image > img { display:block; width:100%; height:100%; max-width:none; max-height:none; object-fit:contain; }
body[data-route="reader"] .word-boxes { inset:0; }
body[data-route="reader"] .reading-camera { width:100%; min-width:0; align-self:start; margin:12px 0 0; padding:0; box-shadow:none; }
body[data-route="reader"] .reading-camera-preview { display:block; width:100%; height:auto; aspect-ratio:4/3; object-fit:cover; border-radius:12px; background:#243E36; }
body[data-route="reader"] .reading-guide { min-width:0; min-height:0; overflow:auto; height:100%; margin:0; padding:16px; border:1px solid #DDE3DA; border-radius:16px; box-shadow:none; background:white; }
body[data-route="reader"] .reading-guide[hidden] { display:none; }
.practice-heading { display:flex; align-items:center; justify-content:space-between; gap:8px; }
.practice-heading h2 { margin:0; font-size:20px; }
.practice-heading button { width:44px; height:44px; padding:8px; }
body[data-route="reader"] .word-tray { max-height:none; overflow:visible; margin:12px 0; }
body[data-route="reader"] .reading-guide p { font-size:14px; margin:8px 0; }
body[data-route="reader"] .guide-actions { flex-wrap:wrap; }
body[data-route="reader"] .reader-dock { display:grid; grid-template-columns:auto minmax(320px,620px); justify-content:space-between; align-items:start; gap:24px; padding:12px 24px max(12px,env(safe-area-inset-bottom)); background:white; border-top:1px solid #DDE3DA; }
body[data-route="reader"] .page-nav { display:flex; align-items:center; justify-content:center; gap:8px; padding:0; margin:0; min-width:0; border:0; }
body[data-route="reader"] .page-nav button { min-height:48px; min-width:44px; margin:0; white-space:nowrap; }
.page-position { font-variant-numeric:tabular-nums; }
.page-position small { display:block; font-size:12px; }
body[data-route="reader"] .record-bar.reading-flow { display:block; position:static; min-width:0; width:auto; padding:0; margin:0; background:transparent; border:0; border-radius:0; box-shadow:none; }
body[data-route="reader"] .reading-steps { display:grid; grid-template-columns:minmax(0,1fr) 20px minmax(0,1fr); gap:8px; margin:0; }
body[data-route="reader"] .reading-steps.single-step { grid-template-columns:1fr; }
body[data-route="reader"] .reading-step { min-height:48px; height:auto; padding:10px 16px; line-height:1.4; font-size:16px; }
body[data-route="reader"] .step-number { width:24px; height:24px; font-size:14px; flex-shrink:0; }
.reading-feedback { display:flex; align-items:center; flex-wrap:wrap; gap:6px 12px; min-height:24px; margin-top:6px; }
body[data-route="reader"] .reading-flow-hint { margin:0; font-size:13px; line-height:1.5; color:#596B61; }
body[data-route="reader"] .record-clock { font-size:14px; flex-shrink:0; }
body[data-route="reader"] .reading-feedback .mic-meter { width:90px; margin:0; padding:0; }
body[data-route="reader"] .reading-feedback .text-button { min-height:32px; padding:2px 8px; }
.reader-tool-list { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:20px; }
.reader-page-picker { display:grid; grid-template-columns:repeat(auto-fill,minmax(100px,1fr)); gap:8px; max-height:60vh; overflow:auto; }
.reader-page-picker .active { background:#285C49; color:white; }
@media(max-width:1000px) {
 .reader-topbar { padding:8px 16px; gap:12px; }
 .reader-title { display:block; }
 .reader-title > span { font-size:12px; }
 body[data-route="reader"] .reader-grid { padding:12px 16px; gap:12px; }
 body[data-route="reader"] .reader-grid.is-practicing { grid-template-columns:minmax(0,1fr) 240px; }
 body[data-route="reader"] .reader-dock { padding:10px 16px; gap:16px; grid-template-columns:auto minmax(0,1fr); }
 body[data-route="reader"] .reading-step { padding:10px 8px; }
 body[data-route="reader"] .page-nav { gap:4px; }
 body[data-route="reader"] .page-nav .secondary { padding:10px; }
}
@media(max-width:700px) {
 .reader-topbar { flex-wrap:wrap; gap:4px 12px; padding:6px 12px; }
 .reader-title h1 { font-size:18px; }
 .reader-title > span { display:none; }
 .reader-view-tools { width:100%; justify-content:space-between; gap:0; }
 .reader-view-tools button { font-size:14px; padding:8px; }
 body[data-route="reader"] .reader-grid { padding:8px; gap:8px; }
 body[data-route="reader"] .reader-grid.is-practicing { grid-template-columns:minmax(0,1fr); grid-template-rows:minmax(60px,1fr) minmax(0,140px); }
 body[data-route="reader"] .reading-guide { padding:8px 12px; }
 body[data-route="reader"] .reader-visuals.with-camera { grid-template-columns:minmax(0,1fr) 80px; gap:4px; padding-right:6px; }
 body[data-route="reader"] .reading-camera { margin-top:8px; }
 body[data-route="reader"] .reader-dock { grid-template-columns:minmax(0,1fr); gap:8px; padding:8px 12px max(8px,env(safe-area-inset-bottom)); }
 body[data-route="reader"] .page-nav { justify-content:space-between; }
 body[data-route="reader"] .page-nav button { min-height:44px; }
 body[data-route="reader"] .reading-step { font-size:15px; }
 body[data-route="reader"] .reading-feedback { justify-content:center; }
 .reader-tool-list { grid-template-columns:1fr; }
}
@media(max-height:500px) and (min-width:701px) {
 .reader-topbar { padding:4px 12px; }
 body[data-route="reader"] .reader-grid { padding:6px 12px; }
 body[data-route="reader"] .reader-dock { padding:6px 12px; }
 .reader-title > span { display:none; }
}
.reader-workspace .sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0; }
body[data-route="reader"] .reader-dock { margin:0; }
body[data-route="reader"] .reader-dock span { margin-top:0; }
body[data-route="reader"] .reading-feedback .mic-level { display:flex; flex-direction:row; align-items:center; gap:6px; margin:0; max-width:none; font-size:12px; }
body[data-route="reader"] .reading-feedback .mic-level meter { width:64px; min-width:64px; height:12px; }
@media(max-width:700px) {
 body[data-route="reader"] .page-nav .secondary { flex:1; min-width:0; padding:8px; white-space:normal; }
 body[data-route="reader"] .page-nav .secondary .icon { display:none; }
 body[data-route="reader"] .page-position { padding:8px; }
}