/* QMR v0.1-RC9.3 — targeted mobile Safari/phone screen correction.
   Desktop/tablet and desktop A4 print remain the RC9.2 baseline. */
@media screen and (max-width: 720px) {
  /* The old 70px header cannot contain two rows of language links on a phone. */
  .nak-header {
    height:auto !important;
    min-height:0 !important;
    display:flex;
    flex-direction:column;
    align-items:stretch !important;
    justify-content:flex-start;
    gap:7px;
    padding:10px max(14px,env(safe-area-inset-left,0px)) 10px max(14px,env(safe-area-inset-right,0px));
    overflow:visible;
  }
  .nak-brand-image {display:flex;align-items:center;max-width:none;margin:0 !important;flex:0 0 auto;}
  .nak-brand-image img {width:141px;height:auto;max-height:42px;}
  .nak-header-actions {display:flex;flex-wrap:nowrap;min-width:0;width:100%;gap:6px;align-items:center;justify-content:space-between;}
  .qmr-language-picker {display:flex;align-items:center;gap:4px;flex:0 0 auto;max-width:calc(100% - 76px);}
  .qmr-lang-btn {min-width:42px;min-height:43px;padding:7px 9px;font-size:.78rem;}
  .qmr-lang-btn.qmr-lang-cn {min-width:75px;}
  .nak-all-tools {white-space:nowrap;font-size:.77rem;flex:0 0 auto;}
  .qmr-hero {padding-top:12px;}
  #front{padding-top:12px;}

  /* Keep all 3 labels, but stack each under its step number. No clipping or sideways panning. */
  .qmr-flow, #profile .qmr-flow {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:3px;padding:10px 0 8px;margin:0;max-width:100%;min-width:0;}
  .qmr-flow-connector{display:none;}
  .qmr-flow-step {display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;min-width:0;max-width:100%;white-space:normal;overflow-wrap:normal;text-align:center;font-size:.7rem;line-height:1.16;}
  .qmr-flow-number{flex:0 0 auto;height:27px;width:27px;font-size:.75rem;}
  #profile,#quiz,#results {max-width:100%;min-width:0;overflow-wrap:break-word;}
  #profile .workflow-header{margin:9px 0 11px;}
  #profile .workflow-header h1 {font-size:clamp(1.55rem,6.5vw,1.82rem);line-height:1.16;}
  #profile .workflow-header p {font-size:.9rem;line-height:1.38;}
  #profile .profile-card {width:100%;max-width:100%;min-width:0;margin-bottom:16px;padding:14px 13px;}
  #profile .profile-card .nak-field {min-width:0;}
  #profile .self-scale {padding-top:8px;margin:8px 0;min-width:0;}
  #profile .self-scale p{font-size:.87rem;line-height:1.35;margin-bottom:9px;}
  #profile .rating-grid {grid-template-columns:repeat(5,minmax(0,1fr));gap:6px;max-width:100%;}
  #profile .rate-choice {min-width:0;}
  #profile .rate-choice span{height:44px;}
  #profile .nak-actions{margin-top:12px;gap:8px;}
  #profile .nak-actions .nak-btn{min-height:44px;}

  /* Keep question actions visible while answers remain scrollable. */
  #quiz:not([hidden]) .quiz-actions{
    position:fixed;
    z-index:65;
    left:0;right:0;bottom:0;
    max-width:none;
    display:flex;
    flex-direction:row;
    justify-content:space-between;
    align-items:stretch;
    gap:10px;
    margin:0;
    padding:9px max(14px,env(safe-area-inset-left,0px)) calc(9px + env(safe-area-inset-bottom,0px)) max(14px,env(safe-area-inset-right,0px));
    background:#fff;
    border-top:1px solid #d3e6f1;
    box-shadow:0 -5px 18px rgba(23,59,80,.10);
  }
  #quiz:not([hidden]) .quiz-actions .nak-btn{min-height:48px;min-width:0;font-size:.85rem;white-space:normal;padding:8px 10px;line-height:1.2;}
  #quiz:not([hidden]) .quiz-actions > .nak-btn{flex:0 1 38%;}
  #quiz:not([hidden]) .quiz-actions .nak-actions-right{flex:1;min-width:0;width:auto;margin:0;display:flex;}
  #quiz:not([hidden]) .quiz-actions .nak-actions-right .nak-btn{width:100%;}
  #quiz:not([hidden]) .qmr-assessment-panel{padding-bottom:18px;}
  #quiz:not([hidden]){padding-bottom:calc(102px + env(safe-area-inset-bottom,0px));}
  #quiz:not([hidden]) .nak-answer-option{min-height:54px;}
  #quiz:not([hidden]) .answer-tip{margin-bottom:0;}
}
@media screen and (max-width:340px){
  .qmr-lang-btn{min-width:39px;padding:7px 7px;font-size:.74rem;}
  .qmr-lang-btn.qmr-lang-cn{min-width:70px;}
  .nak-all-tools{font-size:.72rem;}
}
