/* The practice surface fills the available viewport, including Safari's bars. */
html{height:100%;overflow:hidden;overscroll-behavior:none}
body{position:fixed;inset:0;width:100%;height:100vh;height:100dvh;overflow:hidden;display:grid;grid-template-rows:52px minmax(0,1fr) 26px;overscroll-behavior:none}
.header{width:100%;max-width:1080px;height:52px;padding:8px 24px}
.header .brand-icon{width:32px;height:32px;font-size:26px}
.header-stats{display:flex;align-items:center;gap:10px}
.points-total{white-space:nowrap;padding:4px 12px;border:1px solid #ead18a;border-radius:50px;background:#fff6d9;color:#795400;font-size:14px}
.points-total strong{font-variant-numeric:tabular-nums}
main{width:100%;height:100%;min-height:0;padding:8px 24px;margin:0 auto}
footer{padding:0;font-size:12px;line-height:26px}
.home{height:100%;min-height:0;display:grid;grid-template-rows:auto minmax(180px,.9fr) minmax(220px,1.1fr) 36px;gap:12px}
.home .intro{margin:0}
.home .intro .eyebrow,.home .intro>p{display:none}
.home .intro h1{margin:0;font-size:28px;line-height:1.3}
.home .subjects{min-height:0;grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:repeat(2,minmax(0,1fr));gap:12px}
.home .subject{position:relative;min-width:0;min-height:0;padding:12px 16px;display:grid;grid-template-columns:44px minmax(0,1fr);column-gap:12px;align-content:center}
.home .subject-top{grid-column:1;grid-row:1 / span 2;margin:0;align-self:center}
.home .subject .selection{position:absolute;right:8px;top:8px;width:19px;height:19px;font-size:11px}
.home .subject-symbol{width:44px;height:44px;font-size:32px}
.home .subject strong{grid-column:2;padding-right:12px;font-size:clamp(17px,2.4vw,24px);letter-spacing:.01em;line-height:1.35}
.home .subject.purple .subject-symbol{background:#eee4ff;color:#7350bc}
.home .sequence-symbol{font-size:17px;white-space:nowrap}
.home .subject-description{grid-column:2;font-size:13px}
.home .setup{min-height:0;margin:0;padding:14px 18px;display:flex;flex-direction:column;justify-content:center}
.home .setup-label{margin-bottom:8px}
.home .setup h2{font-size:17px}
.home .level{min-height:48px;padding:7px 12px}
.home .level strong{font-size:15px}
.home .level span{font-size:13px}
.home .times-levels{grid-template-columns:repeat(5,minmax(0,1fr));gap:7px}
.home .ordered-levels{grid-template-columns:repeat(3,minmax(0,1fr))}
.home .advanced-levels{grid-template-columns:repeat(5,minmax(0,1fr))}
.home .times-levels .level{min-height:44px;padding:5px;font-size:15px}
.home .start-row{margin-top:10px;padding-top:10px;gap:12px;flex-direction:row}
.home .start{min-width:260px;min-height:52px;padding:10px 18px;font-size:16px}
.home .start-row p{font-size:14px}
.home .home-notes{flex-wrap:nowrap;margin:0;gap:12px;min-height:0;font-size:12px}
.home .text-button{min-height:36px;font-size:12px}
#parent-help[open]{position:fixed;inset:8%;z-index:10;padding:20px;background:white;border:2px solid #cbd8ed;border-radius:18px;overflow:auto;overscroll-behavior:contain;box-shadow:0 0 0 100vmax #18335560}
#parent-help summary{min-height:44px;color:#255be5}
.result{height:100%;min-height:0;padding:12px 20px;display:flex;flex-direction:column;justify-content:center;border-radius:20px}
.result-badge{display:none}
.result h1{font-size:24px;margin:2px 0 6px}
.result-description{font-size:14px}
.result .eyebrow{font-size:14px}
.result-reward{display:flex;align-items:center;justify-content:center;gap:18px;flex-wrap:wrap;padding:6px 10px;margin:6px 0;border:1px solid #ead18a;border-radius:12px;background:#fff6d9;color:#795400;font-size:14px}
.result-reward strong{font-size:19px}
.points-warning{font-size:12px;color:#966016}
.result-score{flex-direction:row;align-items:center;justify-content:center;gap:20px;padding:8px;margin:8px 0;font-size:13px}
.result-score strong{font-size:32px;line-height:1.2}
.result-score strong span{font-size:18px}
.review-list>div{padding:7px 3px}
.review-list strong{font-size:18px}
.review-list span{font-size:12px}
.result-actions{margin-top:12px;gap:8px}
.result-actions button{min-height:48px;padding:9px;font-size:15px}
.result-actions.has-retry{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
.result-actions.has-retry [data-action='retry']{grid-column:1/-1}
.result-ordered .review-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.result-ordered .review-list>div{min-width:0;flex-direction:column;justify-content:center;gap:2px;padding:8px 3px;border:1px solid #e0e8f5;border-radius:12px;background:#f7faff}
.result-ordered .review-list strong{font-size:clamp(13px,2.3vw,18px);white-space:nowrap}
.result-ordered .review-list span{font-size:12px}
.result-advanced{max-width:860px}
.result-advanced .review-list{grid-template-columns:repeat(5,minmax(0,1fr))}
.result-advanced .review-list strong{font-size:clamp(12px,1.8vw,18px)}
@media(max-height:650px){
  body{grid-template-rows:44px minmax(0,1fr)}
  .header{height:44px;padding:5px 18px}
  footer{display:none}
  main{padding:4px 18px 8px}
  .home{grid-template-rows:auto minmax(152px,1fr) auto 36px;gap:8px}
  .home .intro h1{font-size:24px}
  .home .subject{padding:8px 14px}
  .home .subject-top{grid-row:1;margin:0}
  .home .subject-description{display:none}
  .home .setup{padding:10px 16px}
}
@media(max-height:750px){
  .result .eyebrow,.result-description{display:none}
  .result h1{font-size:22px;line-height:1.2}
  .result-score{padding:4px 8px;margin:6px 0}
  .result-score strong{font-size:28px}
  .review-list>div{padding:4px 3px}
  .review-list strong{font-size:17px;line-height:1.3}
  .review-list span{font-size:12px;line-height:1.3}
  .result-actions{margin-top:10px}
  .result-actions button{min-height:44px;height:44px;padding:6px;font-size:14px}
}
@media(max-width:650px){
  main{padding-left:10px;padding-right:10px}
  .header{padding-left:12px;padding-right:12px}
  .header-stats .grade{display:none}
  .points-total{font-size:12px;padding:4px 8px}
  .home{gap:8px}
  .home .intro h1{font-size:23px}
  .home .subjects{gap:8px}
  .home .subject{padding:10px;grid-template-columns:32px minmax(0,1fr);column-gap:8px}
  .home .subject-symbol{width:32px;height:32px;font-size:25px}
  .home .sequence-symbol{font-size:14px}
  .home .subject strong{font-size:17px}
  .home .subject-description{font-size:11px}
  .home .setup{padding:12px}
  .home .level{padding:5px;align-items:center;text-align:center}
  .home .start-row p,.home .home-notes>span{display:none}
  .home .start{width:100%;min-width:0}
  .home .home-notes{justify-content:flex-end}
  .result{padding:10px}
  .result h1{font-size:22px}
  .result-score{gap:10px}
  .result-ordered .review-list{gap:5px}
  .result-ordered .review-list span{font-size:11px}
  .result-advanced .review-list span{font-size:10px}
  .result-reward{gap:8px;font-size:12px}
  .result-reward strong{font-size:16px}
}
.sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
html.practice-open{height:100%;overflow:hidden;overscroll-behavior:none}
.practice-open body{position:fixed;inset:0;width:100%;height:100vh;height:100dvh;overflow:hidden;overscroll-behavior:none;background:#fff;display:block}
.practice-open .header,.practice-open footer{display:none}
.practice-open main{width:100%;max-width:none;height:100%;min-height:0;margin:0;padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left)}
/* The two equal content rows keep the paper full-width in both orientations. */
.practice-open .quiz{width:100%;height:100%;min-height:0;padding:12px;border:0;border-radius:0;display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:44px 4px minmax(0,1fr) minmax(0,1fr);grid-template-areas:'top' 'progress' 'exercise' 'memo';gap:10px}
.practice-open .quiz-top{grid-area:top;position:static;flex-wrap:nowrap;min-width:0;padding:0;border-radius:0;gap:10px;font-size:14px}
.practice-open .quiz .back{min-height:44px;height:44px;padding:6px 14px;font-size:16px;box-shadow:none;border-radius:12px}
.practice-open .subject-tag{font-size:14px;padding:4px 12px}
.practice-open .progress{grid-area:progress;min-width:0;margin:0;gap:7px}
.practice-open .progress span{height:4px}
.practice-open .exercise{grid-area:exercise;min-width:0;min-height:0;display:grid;grid-template-columns:minmax(0,3fr) minmax(0,2fr);gap:clamp(18px,3vw,40px)}
/* Reserve the feedback/voice rows even before answering, so the equation stays put. */
.practice-open .question-side{position:relative;min-width:0;min-height:0;padding:0;display:grid;grid-template-rows:minmax(0,1fr) 108px clamp(52px,8dvh,72px);gap:10px;justify-items:center}
.practice-open .question-line{flex:1 1 0;display:flex;align-items:center;justify-content:center;flex-wrap:nowrap;gap:.15em;width:100%;min-width:0;min-height:0;white-space:nowrap;font-size:clamp(32px,min(8.6vw,11dvh),100px)}
.practice-open .equation{flex:0 0 auto;min-width:0;margin:0;gap:.12em;font-size:inherit;justify-content:center;line-height:1.2}
.practice-open .answer{position:relative;flex:0 0 1.95em;height:1.35em;min-width:0;margin:0;border-width:3px;border-radius:16px;font-size:inherit;gap:0}
.practice-open #answer-value{width:100%;text-align:center;font-variant-numeric:tabular-nums}
.practice-open .answer-caret{position:absolute;right:.12em;top:50%;transform:translateY(-50%);height:.65em}
.practice-open .correct-answer{border-color:#b6cbff;background:#f6f9ff;color:var(--blue)}
.practice-open .correct-answer .answer-caret{visibility:hidden;animation:none}
.review-list .review-mark{color:#e23d48;font-size:20px;line-height:1;vertical-align:-1px}
.practice-open .question-support{display:grid;grid-template-rows:44px 44px 12px;align-items:center;justify-items:center;gap:4px;width:100%;min-width:0;height:100%}
.practice-open .feedback{min-height:0;height:100%;margin:0;display:flex;align-items:center;justify-content:center;gap:8px;font-size:16px;line-height:1.4;text-align:left}
.practice-open .feedback-mark{flex:0 0 40px;width:40px;height:40px;fill:none;stroke-width:4;stroke-linecap:round}
.practice-open .feedback-mark>*{visibility:hidden}
.practice-open .feedback[data-result='correct'] .mark-circle{visibility:visible;stroke:#e23d48}
.practice-open .feedback[data-result='wrong'] .mark-cross{visibility:visible;stroke:#56759f}
.practice-open .hint-button{min-height:44px;height:44px;margin:0;padding:6px 18px;gap:18px;font-size:16px}
.practice-open .hint-panel{position:absolute;top:100%;left:0;z-index:3;width:min(100%,540px);padding:12px;background:#fffae8;border:1px solid #dfbc52;border-radius:14px;box-shadow:0 6px 22px #213b6320}
.practice-open .hint{padding:0;margin:0;background:none;font-size:16px;line-height:1.7}
.practice-open .chant-hint::first-line{font-size:22px}
.practice-open .hint-close{display:block;margin:8px 0 0 auto;min-height:44px;padding:6px 18px;background:white;border:1px solid #dfbc52;border-radius:10px;color:#755615}
.practice-open .spoken-chant{display:grid;grid-template-columns:minmax(0,1fr) 44px 132px;align-items:center;gap:8px;width:100%;max-width:600px;padding:0;margin:0;border:0;border-radius:0;background:none}
.practice-open .chant-reading{font-size:clamp(18px,2.3vw,26px);line-height:1.3;text-align:center}
.practice-open .listen-button{width:44px;height:44px;min-height:44px;margin:0;padding:0;font-size:20px}
.practice-open .speech-speed{margin:0;display:block;min-width:0}
.practice-open .speech-speed select{width:100%;min-width:0;height:44px;min-height:44px;padding:4px;font-size:13px}
.practice-open .voice-credit{margin:0;font-size:10px;line-height:1.2}
/* Keeping submit below the equation leaves all four keypad rows large, and
   puts clear/delete in a separate column from the answer/next button. */
.practice-open .answer-actions{flex:0 0 auto;width:min(100%,360px);margin:0;padding:0;border:0}
.practice-open .answer-actions .check{min-height:52px;height:clamp(52px,8dvh,72px);margin:0;padding:8px 14px;font-size:clamp(19px,2.4vw,26px);white-space:nowrap}
.practice-open .keypad-side{display:flex;min-width:0;min-height:0;padding:0 0 3px}
.practice-open .keypad{height:100%;width:100%;min-height:0;grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:repeat(4,minmax(0,1fr));gap:clamp(8px,1.4dvh,14px)}
.practice-open .keypad button{min-height:44px;min-width:0;padding:2px;font-size:clamp(32px,min(4.6vw,6dvh),54px);border-radius:16px}
.practice-open .keypad .clear{font-size:clamp(17px,2vw,23px)}
.practice-open .keypad .delete{font-size:clamp(27px,3vw,36px)}
.practice-open .memo{grid-area:memo;display:grid;grid-template-rows:minmax(0,1fr) 44px;gap:6px;min-width:0;min-height:0;height:100%;margin:0;padding:0;border:0}
.practice-open .memo-canvas{grid-row:1;min-width:0;min-height:0;width:100%;height:100%;border:1px solid #c9d5e7;border-radius:12px;background:#fff}
.practice-open .memo-tools{grid-row:2;display:flex;flex-wrap:nowrap;min-width:0;gap:6px;height:44px;margin:0;padding:0}
.practice-open .memo-tools button{flex-shrink:0;min-width:44px;min-height:44px;height:44px;padding:5px 8px;border-width:1px;border-radius:10px;font-size:13px;line-height:1.3}
.practice-open .memo-tools [data-memo='pen'],.practice-open .memo-tools [data-memo='undo']{width:44px;padding:0;font-size:27px}
.practice-open .memo-tools .memo-clear{margin-left:auto}
.practice-open .memo-tools label{flex-shrink:0;justify-content:center;gap:2px;min-height:44px;height:44px;font-size:21px}
.practice-open .memo-tools input{width:18px;height:18px;margin:0}

@media(max-height:650px){
  .practice-open .quiz{padding:8px;gap:8px}
  .practice-open .question-side{grid-template-rows:minmax(0,1fr) 108px 48px;gap:6px}
  .practice-open .question-line{font-size:clamp(32px,min(8.6vw,10dvh),100px)}
  .practice-open .feedback{min-height:20px;font-size:14px}
  .practice-open .answer-actions .check{height:48px;min-height:48px;font-size:20px}
  .practice-open .chant-reading{font-size:19px}
}

/* Small split-screen windows retain the same problem/keypad/paper arrangement. */
@media(max-width:650px){
  .practice-open .quiz{padding:8px;gap:8px}
  .practice-open .exercise{gap:14px}
  .practice-open .quiz-top{font-size:12px;gap:6px}
  .practice-open .quiz .back{padding:6px 10px;font-size:14px}
  .practice-open .subject-tag{font-size:12px;padding:4px 8px}
  .practice-open .question-side{grid-template-rows:minmax(0,1fr) 132px clamp(52px,8dvh,72px);gap:6px}
  .practice-open .question-support{grid-template-rows:40px 72px 12px}
  .practice-open .question-line{font-size:clamp(26px,min(8.2vw,10dvh),54px)}
  .practice-open .answer{border-radius:12px}
  .practice-open .feedback{font-size:13px;min-height:18px}
  .practice-open .spoken-chant{grid-template-columns:44px minmax(0,132px);justify-content:center;gap:4px}
  .practice-open .chant-reading{grid-column:1/-1;font-size:17px}
  .practice-open .answer-actions .check{font-size:17px;padding:6px}
  .practice-open .keypad{gap:6px}
  .practice-open .keypad button{font-size:28px;border-radius:10px}
  .practice-open .keypad .clear{font-size:13px}
  .practice-open .keypad .delete{font-size:23px}
  .practice-open .memo-tools{gap:4px}
  .practice-open .memo-tools button{padding:5px 6px;font-size:12px}
  .practice-open .memo-tools [data-memo='pen'],.practice-open .memo-tools [data-memo='undo']{font-size:25px}
}

@media(max-width:650px) and (max-height:650px){
  .practice-open .question-side{grid-template-rows:minmax(0,1fr) 132px 48px}
  .practice-open .question-line{font-size:clamp(26px,min(8.2vw,7dvh),54px)}
}