/* Mobile hardening: kills horizontal overflow/drag and tightens small-screen layout. */
html{-webkit-text-size-adjust:100%}
html,body{max-width:100%;overflow-x:clip;overscroll-behavior-x:none}

/* Decorative blobs sit outside their cards and widened the document. */
.intro-card,.complete-card,.card{overflow:hidden}

/* Grid/flex children (and fieldsets, which default to min-inline-size:min-content) must be allowed to shrink. */
fieldset{min-inline-size:0}
.shell,.card,.matrix,.matrix-row,.option-list,.option,.scale-options,.scale-option,.field-grid,.field-grid label,.navigation{min-width:0}
img,svg,video,table,pre{max-width:100%}
.question-title,.question-help,.matrix-label,.option,.scale-option,.concept,.lede,h1,h2{overflow-wrap:anywhere}

@media(max-width:800px){
  /* Never let the matrix fall back to its wide two-column track. */
  .matrix-row{display:block;grid-template-columns:1fr}
  .scale-options{grid-template-columns:repeat(5,minmax(0,1fr))}
}

@media(max-width:640px){
  /* 16px avoids Safari's zoom-on-focus, which left the page zoomed and pannable. */
  input,select,textarea{font-size:16px}
  .shell{width:min(100% - 24px,1080px);margin:16px auto}
  .topbar{padding:0 16px;gap:12px}
  .wordmark{font-size:15px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .intro-card,.question-card{padding:24px 18px}
  .complete-card{padding:32px 18px}
  .intro-card h1{font-size:clamp(28px,8vw,36px)}
  .question-title{font-size:clamp(20px,5.6vw,24px)}
  .scale-options{grid-template-columns:1fr;gap:8px}
  .option,.scale-option{min-height:48px}

  /* Sticky footer nav: full-bleed inside the card so content scrolls under it cleanly. */
  .navigation{
    position:sticky;bottom:0;z-index:2;
    margin:24px -18px 0;
    padding:14px 18px calc(12px + env(safe-area-inset-bottom,0px));
    background:#fff;border-top:1px solid var(--line);
    box-shadow:0 -12px 18px -12px rgba(20,40,35,.18)
  }
  .navigation button{flex:1;min-height:50px}
}

/* Completion screen: respondents see a plain thank-you; admins get the field controls. */
.handback-note{margin:6px 0 0;color:var(--muted);font-size:15px}
.complete-actions{margin-top:28px;padding-top:22px;border-top:1px solid var(--line)}
.complete-actions-label{margin:0 0 14px;font-size:11px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.complete-actions .primary-button,.complete-actions .secondary-button{margin:5px}
@media(max-width:640px){.complete-actions .primary-button,.complete-actions .secondary-button{display:block;width:100%;margin:8px 0 0}}