/* Keep a question and its controls together in Safari's small viewport.
   Content can still grow and scroll with larger text or longer translations. */
@media(max-width:700px){
  .result-actions .secondary-button[data-action]{flex:1 0 auto;white-space:nowrap;padding-inline:6px;gap:5px}
  html[data-view="quiz"]{-webkit-text-size-adjust:100%;text-size-adjust:100%}
  html[data-view="quiz"] .site-shell{width:calc(100% - 28px)}
  html[data-view="quiz"] .site-header,
  html[data-view="quiz"] .site-footer{display:none}
  html[data-view="quiz"] .language-switcher{padding:6px 0 4px;gap:6px}
  html[data-view="quiz"] .language-switcher button{font-size:11px;padding:5px 10px;min-height:32px}
  html[data-view="quiz"] .quiz-shell{padding:6px 0 8px;min-height:0}
  html[data-view="quiz"] .quiz-toolbar{gap:10px;min-height:30px}
  html[data-view="quiz"] .quiz-toolbar .text-button{font-size:11px;min-height:32px}
  html[data-view="quiz"] .progress-caption{font-size:9px;padding:3px 8px;gap:7px;transform:none;box-shadow:2px 2px 0 var(--ink)}
  html[data-view="quiz"] .progress-caption strong{font-size:18px}
  html[data-view="quiz"] .progress-track{height:7px;margin:8px 0 10px}
  html[data-view="quiz"] .question-meta{font-size:10px;gap:10px;margin:0}
  html[data-view="quiz"] .question-meta>span:first-child{font-size:9px;padding:2px 6px;transform:none}
  html[data-view="quiz"] .question-title{font-size:clamp(17px,4.8vw,20px);line-height:1.45;margin:9px 0 5px;letter-spacing:0}
  html[data-view="quiz"] .question-instruction{font-size:10px;line-height:1.5;margin:0 0 10px}
  html[data-view="quiz"] .choices{gap:8px;min-width:0}
  html[data-view="quiz"] .choice-content{font-size:13px;line-height:1.5;gap:10px;padding:9px 10px;min-height:56px;box-shadow:2px 2px 0 #17191640}
  html[data-view="quiz"] .choice-letter{width:25px;height:25px;font-size:11px;flex-shrink:0}
  html[data-view="quiz"] .choice-content>span:last-child{min-width:0;overflow-wrap:anywhere}
  html[data-view="quiz"] .choice input:checked+.choice-content{transform:none;box-shadow:3px 3px 0 var(--ink)}
  html[data-view="quiz"] .quiz-bottom{position:sticky;bottom:0;z-index:3;background:var(--paper);margin:10px -2px 0;padding:7px 2px max(7px,env(safe-area-inset-bottom));gap:12px}
  html[data-view="quiz"] .quiz-bottom .primary-button{font-size:13px;min-height:46px;min-width:145px;padding:10px 15px;gap:15px}
  html[data-view="quiz"] .quiz-bottom .text-button{font-size:11px;min-height:44px}
  html[data-view="quiz"] .quiz-small-note{display:none}
}
@media(max-width:700px) and (max-height:650px){
  html[data-view="quiz"] .question-title{font-size:17px;margin-top:7px}
  html[data-view="quiz"] .choice-content{padding:7px 9px;min-height:50px}
  html[data-view="quiz"] .choices{gap:6px}
  html[data-view="quiz"] .question-instruction{margin-bottom:7px}
  html[data-view="quiz"] .quiz-bottom{margin-top:7px}
}