/* Shared phone and tablet organization for every learner studio. */
html{max-width:100%;overflow-x:hidden}body{max-width:100%;overflow-x:hidden}img,svg,canvas,video{max-width:100%}textarea,input,select,button{max-width:100%}
@media(max-width:900px){
  .dss-shell{position:relative!important;grid-template-columns:minmax(0,1fr)!important;gap:8px!important;padding:9px 12px!important}
  .dss-brand,.dss-stage,.dss-controls{grid-column:1!important;grid-row:auto!important;min-width:0}
  .dss-controls{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr));overflow:visible!important;gap:7px!important}
  .dss-controls>*{width:100%;min-width:0;justify-content:center;text-align:center}
  .dss-controls label{display:grid!important;grid-template-columns:auto minmax(0,1fr)}
  .dss-controls select{width:100%;max-width:none!important}
  .dss-curriculum{max-width:none!important;grid-column:1/-1}
  .shell,.studio,.journey-grid,.workshop-shell,.page{grid-template-columns:minmax(0,1fr)!important}
  .path,.reality,.curriculum-panel,.side-column,.journey-panel{position:static!important;max-height:none!important;width:auto!important}
  .path-list{display:flex!important;overflow-x:auto!important;scroll-snap-type:x proximity;padding-bottom:5px}
  .path-step{flex:0 0 min(72vw,220px);scroll-snap-align:start}
  .reference-panel,.calculator-panel{position:fixed!important;inset:auto 8px 8px!important;width:auto!important;max-height:min(72vh,620px)!important;overflow:auto!important;border-radius:16px!important}
  table{display:block;max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
}
@media(max-width:640px){
  body{font-size:16px}
  .app,#app,.app-shell,.workshop-shell,.page{width:100%!important;max-width:100%!important;margin:0!important;padding-left:8px!important;padding-right:8px!important}
  .top,.topbar,.site-header{align-items:stretch!important;flex-direction:column!important;padding:10px!important;gap:8px!important}
  .top .nav,.site-header nav,.top-actions{display:flex!important;width:100%;overflow-x:auto;flex-wrap:nowrap!important;padding-bottom:3px}
  .top .nav>* ,.site-header nav>* ,.top-actions>*{flex:0 0 auto}
  .hero,.stage,.card,.activity-card,.tutorial,.case-card,.team-panel,.interaction-card,.mission{padding:16px!important;border-radius:14px!important}
  .hero h1,.start-screen h1{font-size:clamp(31px,10vw,44px)!important;line-height:1.04!important}
  .answers,.choice-grid,.checkin-choices,.feedback-grid,.compare-grid,.document-preview-grid,.context-lesson-grid,.knowledge-flow,.research-grid,.dimension-grid,.quantity-grid,.readiness-options,.dawc-work{grid-template-columns:minmax(0,1fr)!important}
  .actions,.question-actions,.result-actions,.teaching-actions{display:grid!important;grid-template-columns:minmax(0,1fr)!important;gap:8px!important}
  .actions button,.actions .btn,.question-actions button,.result-actions button,.teaching-actions button{width:100%!important;min-height:46px}
  .response-tabs,.symbol-bar,.draw-toolbar{flex-wrap:nowrap!important;overflow-x:auto!important;padding-bottom:5px}
  .response-tabs button,.symbol-bar button,.draw-toolbar button{flex:0 0 auto;min-height:42px;min-width:42px}
  .response-workspace,.activity-tool-mount,.dsk-root{max-width:100%;overflow:hidden}
  .source-row,.sort-row,.inventory-row,.math-worked-line{grid-template-columns:minmax(0,1fr)!important}
  .source-row>* ,.inventory-row>* ,.math-worked-line>*{grid-column:1!important}
  .modal{padding:8px!important}.modal-card{padding:16px!important;max-height:94vh!important}
  textarea{min-height:130px;font-size:16px!important}input,select{font-size:16px!important}
}