/* Shared screen safety for Dani's 10-inch tablet and narrow mobile phones. */
:root{overflow-wrap:normal}html,body{max-width:100%;overflow-x:clip}
*,*::before,*::after{box-sizing:border-box}
img,video,canvas,svg{max-width:100%}
main,section,article,.sg-wrap,.sg-grid,.sg-story-card,.sg-question-card,.sg-quiz-layout,.sg-answers,.sg-answer,.mb-wrap,.tr-workshop,.tr-panel,.ww-parent-grid{min-width:0;max-width:100%}
h1,h2,h3,h4,p,small,strong,button,a,label,summary{overflow-wrap:anywhere}
textarea,input,select{max-width:100%;min-width:0}
@media(max-width:680px){
 .sg-wrap{padding-inline:clamp(7px,2.3vw,15px)!important}
 .sg-header{display:flex;flex-wrap:wrap;align-items:center;gap:7px}
 .sg-header .sg-brand{min-width:0;font-size:clamp(13px,3.5vw,18px)!important}
 .sg-hero{padding:clamp(12px,3vw,20px)!important;gap:10px}
 .sg-hero h1{font-size:clamp(27px,7vw,41px)!important;line-height:1.1!important}
 .sg-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:9px!important}
 .sg-story-card{padding:11px!important;min-height:0!important}
 .sg-story-title{font-size:clamp(16px,4.2vw,21px)!important;line-height:1.25!important}
 .sg-story-desc,.sg-story-meta{font-size:clamp(12px,3.15vw,14px)!important;line-height:1.4!important}
 .sg-question-card h2{font-size:clamp(23px,5.7vw,31px)!important}
 .sg-answer{font-size:clamp(14px,3.8vw,17px)!important;min-height:52px}
 .sg-companion{max-width:100%;overflow-wrap:anywhere}
 .sg-progress-strip{gap:7px}
}
@media(max-width:350px){.sg-grid{grid-template-columns:1fr!important}.sg-header{justify-content:center}.sg-brand{text-align:center}.sg-progress-strip{grid-template-columns:repeat(2,minmax(0,1fr))!important}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;animation-duration:.01ms!important}}

/* Form controls keep their native tap size and avoid iOS input zoom. */
@media(max-width:820px){
  body{min-width:0}
  header,footer,.sa-top,.fs-top{max-width:100%}
  button,a,input,select,textarea{touch-action:manipulation}
}
@media(max-width:480px){
  input,select,textarea{font-size:16px!important}
  button{max-width:100%}
}