/* Scale the whole course; keep its three zoom buttons in viewport coordinates. */
:root { --app-zoom:1; --app-zoom-inverse:1; --zoom-top:56px; --zoom-view-height:calc(100vh - 56px); --zoom-view-width:100vw; }
@media screen {
body.has-zoom { zoom:var(--app-zoom); padding-top:var(--zoom-top); min-height:calc(var(--zoom-view-height) + var(--zoom-top)); }
.zoom-controls { zoom:var(--app-zoom-inverse); position:fixed; z-index:210; top:0; right:0; left:0; height:56px; display:flex; align-items:center; justify-content:space-between; gap:12px; padding:5px 12px; border-bottom:1px solid var(--line); background:var(--surface); color:var(--ink); box-shadow:0 1px 8px #0001; }
.zoom-label { font:800 13px/1.2 var(--font); }
.zoom-buttons { display:flex; align-items:center; gap:4px; }
.zoom-button,.zoom-reset { display:grid; place-items:center; min-width:44px; height:44px; margin:0; border:1px solid var(--line); border-radius:12px; background:var(--surface-2); color:var(--ink); cursor:pointer; font:800 25px/1 var(--font); }
.zoom-reset { min-width:68px; font-size:14px; background:var(--surface); }
.zoom-button:hover,.zoom-reset:hover { border-color:var(--brand); }
.zoom-button:disabled { opacity:.4; cursor:default; }
body.has-zoom .topbar,body.has-zoom .player-top { top:var(--zoom-top); }
body.has-zoom .player { min-height:var(--zoom-view-height); }
body.has-zoom .player-foot { padding-inline:max(18px, calc((var(--zoom-view-width) - 780px) / 2 + 18px)); }
body.has-zoom .reader,body.has-zoom .modal-back { top:var(--zoom-top); }
body.has-zoom .modal-back { overflow:auto; }
body.has-zoom .notes-settings { max-height:calc(var(--zoom-view-height) * .38); }
body.has-zoom.notes-open .player-foot { padding-inline:18px; }
body.zoom-tablet .topbar-in { flex-wrap:wrap; gap:8px; padding-block:10px; }
body.zoom-tablet .topnav { order:3; width:100%; margin-left:0; overflow-x:auto; }
body.zoom-narrow .topstats .pill { display:none; }
body.zoom-narrow .hero-in { grid-template-columns:minmax(0,1fr); }
body.zoom-narrow .gh-in { grid-template-columns:minmax(0,1fr); }
body.zoom-narrow .hero-art { display:none; }
body.zoom-narrow .how,body.zoom-narrow .guide-index-grid,body.zoom-narrow .guide-start,body.zoom-narrow .guide-topic-main { grid-template-columns:minmax(0,1fr); }
body.zoom-narrow .grade-grid { grid-template-columns:repeat(auto-fit,minmax(min(240px,100%),1fr)); }
body.zoom-narrow.notes-open #app { margin-right:0; margin-left:0; }
body.zoom-small .wrap,body.zoom-small .player-body { padding-inline:10px; }
body.zoom-small .card,body.zoom-small .guide-topic,body.zoom-small .guide-start,body.zoom-small .starter-topic { padding:12px; }
body.zoom-small .topstats { flex-wrap:wrap; }
body.zoom-small #app { overflow-wrap:anywhere; }
body.zoom-small .btn { min-width:0; max-width:100%; white-space:normal; overflow-wrap:anywhere; }
body.zoom-small .tiles,body.zoom-small .drill-grid { grid-template-columns:minmax(0,1fr); }
body.zoom-small .course-search { width:100%; min-width:0; flex-basis:100%; }
body.zoom-small .guide-topic-top { flex-wrap:wrap; }
/* Wide counting grids and tables keep their geometry in their own scroller. */
body.zoom-small .card-body > * { min-width:0; max-width:100%; overflow-x:auto; }
body.zoom-small .card-body > table { display:block; }
body.zoom-small .q { max-width:100%; overflow-x:auto; }
body.zoom-small .reader-nav { flex-wrap:wrap; }
body.zoom-small .player-top { gap:6px; padding-inline:8px; }
body.zoom-small .player-top .chip-btn { font-size:0; padding:8px; }
body.zoom-small .player-top .chip-btn::before { content:'📖'; font-size:18px; }
body.zoom-small .notes-launcher span { display:none; }
body.zoom-short .notes-tools { flex-wrap:nowrap; overflow-x:auto; }
body.zoom-short .notes-lesson { display:none; }
body.zoom-short .notes-pages { flex-wrap:nowrap; }
body.zoom-short .notes-pages .notes-button { min-width:28px; min-height:32px; padding:3px; }
body.zoom-short .notes-page-number { min-width:28px; }
}
@media print {
  .zoom-controls { display:none!important; }
  body.has-zoom { zoom:1!important; padding-top:0; min-height:0; }
  body.has-zoom .player { min-height:0; }
}