/* Shared question-first presentation. Worksheet rendering remains original. */
:root{--ink:#1D2B53;--sun:#FFC93C;--sea:#12897C}
body{font-size:17px}
header,main{max-width:1100px}
header{padding:8px 12px 0}
main{padding:0 12px 24px}
.level-nav{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.level-nav a{display:flex;align-items:center;justify-content:center;min-height:44px;min-width:44px;padding:4px 10px;border:2px solid transparent;border-radius:10px;color:var(--ink);font-size:15px;font-weight:800;text-decoration:none}
.level-nav a:first-child{color:var(--sea);text-decoration:underline;text-underline-offset:3px}
.level-nav a[aria-current]{background:var(--sun);border-color:var(--ink)}
.topic-line{display:flex;align-items:center;justify-content:space-between;gap:8px}.topic-line #qcode{font-size:12px;flex-shrink:0}.current-topic{font-size:17px;font-weight:900;line-height:1.25;margin:5px 0 7px;overflow-wrap:anywhere}
.practice-toolbar #speakBtn{min-height:44px;min-width:44px;padding:4px 7px;font-size:18px;flex-shrink:0}
.practice-toolbar{display:flex;gap:6px;align-items:stretch;flex-wrap:wrap}
.shop-link{display:flex;align-items:center;justify-content:center;min-width:64px;min-height:44px;padding:4px 10px;flex-shrink:0;border:2px solid var(--ink);border-radius:10px;background:var(--sun);color:var(--ink);font-size:14px;font-weight:900;text-decoration:none}
.practice-toolbar>.ghost{padding:5px 8px;min-height:44px}
.practice-toolbar .modes{margin:0 0 0 auto;flex:1;max-width:245px;border-radius:10px}
.practice-toolbar .modes button{padding:6px;font-size:14px;min-height:40px}
.question-card{margin:10px 0;padding:12px;box-shadow:4px 4px 0 var(--ink)}
.qhead{font-size:13px;gap:4px}.qhead .ghost{min-height:44px}
.practice-work{display:grid;grid-template-columns:minmax(0,1fr) minmax(280px,.85fr);gap:24px;align-items:start}
.problem-side,.response-side{min-width:0}
#practice .qtext{margin:6px 0 10px;font-size:23px;line-height:1.25}
#practice #qvis{gap:8px;margin-bottom:8px}
#practice #qvis:empty{display:none}
#practice .pad{width:100%;max-width:360px;margin:12px auto 0;grid-template-columns:repeat(auto-fit,minmax(min(100%,max(3.8em,calc((100% - 24px)/3))),1fr));gap:12px}
#practice .key{min-width:64px;font-size:28px}
#practice .key.small{font-size:15px;padding-inline:0}
#practice .numdisp{width:100%;max-width:360px;min-height:56px;margin:0 auto 12px;font-size:32px}
#practice .nfields{gap:8px;margin-bottom:7px}
#practice .nf{height:50px;width:100px;font-size:29px}
#practice .nfw{max-width:100%;text-align:center}
#practice .actions{gap:8px;margin-top:8px;flex-wrap:wrap}
#practice .btn{min-height:48px;padding:8px 6px;font-size:17px}
#practice .choices{gap:6px}
#practice .ch{min-height:44px;min-width:44px;padding:6px;border-radius:10px}
#practice .ch.cell{padding:0;border-radius:0}
#practice .slots{gap:6px;flex-wrap:wrap;margin-bottom:8px}
#practice .slot{width:52px;height:52px;flex-shrink:0}
#practice .palette{gap:6px}
#practice .pal{min-width:48px;height:48px;font-size:24px}
#practice .slot svg,#practice .pal svg{width:42px;height:42px}
#practice .sublabel{margin:6px 0 4px}
#practice .multi-note,#practice .hint{margin-top:5px}
#practice .stats:empty{display:none}
#practice .feedback{font-size:16px}
#practice .linkbtn{min-height:44px;padding:4px}
.topic-settings,.inline-help{color:var(--ink);background:var(--paper);margin:14px 0;padding:16px;min-width:0}
.topic-settings h2{font-size:22px;line-height:1.2;margin:0 0 8px}
.topic-settings #qcode{display:block;font-size:14px;margin-bottom:12px}
.topic-settings #picker{box-shadow:none;margin:0;padding:0;border:0;background:transparent}
.topic-settings select{appearance:none;min-height:44px;min-width:0;padding-right:38px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 18 18'%3E%3Cpath d='m4 7 5 5 5-5' fill='none' stroke='%231D2B53' stroke-width='2'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 10px center}
.topic-settings .qtabs{grid-template-columns:repeat(auto-fit,minmax(min(100%,9em),1fr))}
.topic-settings .qtab{min-height:48px;min-width:0;overflow-wrap:anywhere}
.topic-settings .qtab .qn{width:1.8em;height:1.8em;min-width:26px;min-height:26px}
.inline-help{overflow-wrap:anywhere}.inline-help>h2{font-size:22px;line-height:1.2;margin:0 0 12px}.inline-help .help-subheading{font-size:18px;line-height:1.3;margin:0 0 10px}.inline-help .learn{background:var(--soft);border-radius:12px;padding:12px}.inline-help .learn p{margin:8px 0 0}
.inline-help h1{font-size:26px;margin:14px 0 8px}
.inline-help .sub{margin-bottom:12px}
.inline-help .tip,.inline-help .learn{margin-top:14px}
.inline-help .tools{margin-top:14px}
.inline-help .ctr,.inline-help .tk{width:44px;height:44px}
.inline-help .counters{grid-template-columns:repeat(5,44px)}
.inline-help #toolReset{min-height:44px}
a:focus-visible,summary:focus-visible{outline:3px solid var(--coral);outline-offset:2px}
@media(max-width:700px){
 header{padding:6px 10px 0}main{padding:0 10px 24px}
 /* Keep the question high on small screens; swipe the level row if needed. */
 .level-nav{gap:2px;flex-wrap:nowrap;overflow-x:auto}.level-nav a{padding:3px 8px;font-size:14px;flex-shrink:0;white-space:nowrap}
 .practice-toolbar #speakBtn{flex-shrink:0}
 .level-nav .nav-grade-prefix{display:none}
 .current-topic{font-size:16px;margin:4px 0 6px}
 .practice-toolbar{gap:4px}.practice-toolbar>.ghost{font-size:13px;padding:4px 7px}
 .practice-toolbar .modes{max-width:none}.practice-toolbar .modes button{font-size:13px;padding:4px}
 .practice-work{display:block}
 .question-card{padding:10px;margin-top:8px}
 .level-nav a{padding-inline:5px;font-size:13px}
 #practice .qtext{font-size:20px;margin:2px 0 4px}
 #practice #qvis{margin-bottom:4px}
 #practice .actions{margin-top:4px}
 #practice .nfields{margin-bottom:5px}
 #practice .qhead{font-size:12px}
 #practice .qhead .ghost{font-size:13px;padding:4px 8px}
 #practice .response-side{margin-top:0}
 /* Six grid answers fit one phone row; enlarged text can grow vertically. */
 #practice .slot{width:48px;min-width:48px;height:auto;min-height:52px;padding:1px;overflow-wrap:anywhere}
 #practice .pal{height:auto;min-height:48px}
 /* Static diagrams only: never shrink interactive diagram targets. */
 #practice #qvis>svg:not(:has(.tap)){max-height:200px}
 #practice .way{gap:5px;font-size:15px;flex-wrap:wrap;justify-content:center}
 #practice .stepper output{width:32px}
 #practice .stepper button{width:44px;height:44px}
 #practice .split{gap:8px}
 #practice .ch .chl{font-size:20px;padding:0 3px}
 #practice .srow{gap:4px}
 #practice .pair{gap:4px}
 #practice .eq{font-size:28px;gap:6px}
 #practice .strip{gap:4px}
 #practice .strip .chip{min-width:40px;height:44px;font-size:20px}
 #practice .days{gap:3px}
 #practice .day{min-width:40px;padding:5px 2px;font-size:14px}
 #pdfPanel .actions{flex-wrap:wrap}
 #pdfPanel .actions .btn{min-width:100px}
}
/* Intrinsic control sizing also supports browser text enlargement. */
.practice-toolbar .modes{min-width:max-content;max-width:none}
.practice-toolbar .modes button{min-height:44px}
#practice .key{height:auto;min-height:64px;padding:6px 8px;overflow-wrap:anywhere;touch-action:manipulation}
#practice .key[data-k="back"]{font-size:24px}
#practice .key:active{background:var(--sun)}
#practice .nf{height:auto;min-height:50px;font-size:24px;overflow-wrap:anywhere}
#practice .numdisp{height:auto;min-height:50px;overflow-wrap:anywhere}
#practice .blank{height:auto;min-height:52px}
/* Keep enlarged controls intrinsic; never clip text to fit a phone. */
#practice .stepper button{height:auto;min-height:44px}
#practice .slot{width:max(48px,1.4em)}
#practice .ctab{max-width:100%;width:100%;table-layout:fixed}
#practice .ctab th,#practice .ctab td{min-width:0;padding:6px 4px;overflow-wrap:anywhere}
#practice .key.small{white-space:nowrap;overflow-wrap:normal}
/* A full-width keypad prioritizes touch comfort over forcing mobile tasks above the fold. */
.workbook-links a{display:flex;align-items:center;min-height:44px;color:var(--sea);font-weight:700;text-underline-offset:3px}
.workbook-links h2{font-size:22px;margin-bottom:8px}
/* Seven level links must remain visible on narrow phones. */
@media(max-width:360px){.level-nav{flex-wrap:wrap;overflow-x:visible}}
@media print{
 .level-nav,.current-topic,.practice-toolbar,.topic-settings,.inline-help{display:none!important}
 main{max-width:none;padding:0}
}