/* Phones use the former paper area for a full-width, four-row number pad. */
.phone-layout.practice-open .quiz{padding:8px;gap:8px;grid-template-rows:44px 4px minmax(0,1fr);grid-template-areas:'top' 'progress' 'exercise'}
.phone-layout.practice-open .memo{display:none}
.phone-layout.practice-open .exercise{grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(232px,.95fr) minmax(200px,1.05fr);gap:16px}
.phone-layout.practice-open .quiz-top{min-width:0;gap:6px}
.phone-layout.practice-open .quiz-top>strong{flex-shrink:0;font-size:12px;white-space:nowrap}
.phone-layout.practice-open .subject-tag{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:4px 8px;font-size:12px}
.phone-layout.practice-open .quiz .back{flex-shrink:0;padding:6px 10px;font-size:14px}
.phone-layout.practice-open .question-side{grid-template-rows:minmax(60px,1fr) 104px 52px;gap:8px}
.phone-layout.practice-open .question-line{font-size:clamp(42px,13vw,60px)}
.phone-layout.practice-open .answer{border-radius:12px}
.phone-layout.practice-open .question-support{grid-template-rows:40px 44px 12px;gap:4px}
.phone-layout.practice-open .feedback{font-size:14px;gap:6px;line-height:1.3;min-height:0}
.phone-layout.practice-open .feedback-mark{width:36px;height:36px;flex-basis:36px}
.phone-layout.practice-open .hint-button{height:44px;min-height:44px;font-size:16px}
.phone-layout.practice-open .spoken-chant{grid-template-columns:minmax(0,1fr) 44px 108px;gap:6px}
.phone-layout.practice-open .chant-reading{grid-column:auto;font-size:clamp(16px,4.4vw,20px);line-height:1.3}
.phone-layout.practice-open .voice-credit{font-size:10px}
.phone-layout.practice-open .answer-actions{width:min(100%,360px)}
.phone-layout.practice-open .answer-actions .check{height:52px;min-height:52px;font-size:21px;padding:6px 12px}
.phone-layout.practice-open .keypad{gap:8px}
.phone-layout.practice-open .keypad button{font-size:clamp(32px,9vw,44px);min-height:44px;border-radius:14px}
.phone-layout.practice-open .keypad .clear{font-size:19px}
.phone-layout.practice-open .keypad .delete{font-size:30px}
/* A hint opens over the pad and stays reachable without moving the page. */
.phone-layout.practice-open .hint-panel{position:fixed;inset:auto max(12px,env(safe-area-inset-right)) max(12px,env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-left));width:auto;max-height:55dvh;overflow-y:auto;overscroll-behavior:contain}

/* Compact Safari viewports still reserve a separate submit row and 44px keys. */
@media(max-height:550px) and (orientation:portrait){
  .phone-layout.practice-open .quiz{padding:6px;gap:6px}
  .phone-layout.practice-open .exercise{grid-template-rows:minmax(194px,1fr) minmax(197px,1fr);gap:12px}
  .phone-layout.practice-open .question-side{grid-template-rows:minmax(50px,1fr) 88px 48px;gap:4px}
  .phone-layout.practice-open .question-line{font-size:38px}
  .phone-layout.practice-open .question-support{grid-template-rows:32px 44px 8px;gap:2px}
  .phone-layout.practice-open .feedback-mark{height:32px;width:32px;flex-basis:32px}
  .phone-layout.practice-open .feedback{font-size:13px}
  .phone-layout.practice-open .voice-credit{font-size:8px}
  .phone-layout.practice-open .answer-actions .check{height:48px;min-height:48px;font-size:20px}
  .phone-layout.practice-open .keypad{gap:6px}
}

/* A landscape phone has more usable room beside the equation than below it. */
@media(orientation:landscape){
  .phone-layout.practice-open .exercise{grid-template-columns:minmax(0,3fr) minmax(0,2fr);grid-template-rows:minmax(0,1fr);gap:24px}
  .phone-layout.practice-open .question-side{grid-template-rows:minmax(50px,1fr) 104px 48px;gap:6px}
  .phone-layout.practice-open .question-line{font-size:clamp(36px,min(7vw,16dvh),66px)}
  .phone-layout.practice-open .chant-reading{font-size:17px}
  .phone-layout.practice-open .answer-actions .check{height:48px;min-height:48px;font-size:20px}
  .phone-layout.practice-open .keypad button{font-size:clamp(30px,9dvh,40px)}
  .phone-layout.practice-open .keypad .clear{font-size:18px}
  .phone-layout.practice-open .keypad .delete{font-size:28px}
}
@media(orientation:landscape) and (max-height:350px){
  .phone-layout.practice-open .quiz{padding:6px;gap:6px}
  .phone-layout.practice-open .question-side{grid-template-rows:minmax(44px,1fr) 88px 44px;gap:4px}
  .phone-layout.practice-open .question-support{grid-template-rows:32px 44px 8px;gap:2px}
  .phone-layout.practice-open .question-line{font-size:36px}
  .phone-layout.practice-open .feedback{font-size:13px}
  .phone-layout.practice-open .feedback-mark{height:32px;width:32px;flex-basis:32px}
  .phone-layout.practice-open .voice-credit{font-size:8px}
  .phone-layout.practice-open .answer-actions .check{height:44px;min-height:44px}
  .phone-layout.practice-open .keypad{gap:6px}
}