/* Shared responsive guardrails for public forms. */
*,*::before,*::after{box-sizing:border-box}
html,body{width:100%;max-width:100%;overflow-x:hidden}
.public-shell,.public-header,.intro-card,.order-card,.bulk-card,.step,.step-content,.form-grid,.section-heading,.submit-row,.confirmation{min-width:0;max-width:100%}
img,svg,canvas,video,iframe{max-width:100%;height:auto}
input,select,textarea,button{max-width:100%}
.public-header,.section-heading,.submit-row,.confirmation-actions{flex-wrap:wrap}
.step-content>*,.form-grid>*,.participant-picker>*,.routine-grid>*{min-width:0}

@media(max-width:760px){
  .public-shell{width:min(100% - 20px,680px);padding-top:10px}
  .public-header{align-items:flex-start}
  .intro-card,.poster-card,.track-grid,.participant-picker,.form-grid,.media-options{grid-template-columns:1fr!important}
  .step{grid-template-columns:34px minmax(0,1fr);padding:22px 18px;gap:12px}
  .submit-row,.bulk-card{align-items:stretch;flex-direction:column}
  .submit-row button,.bulk-card button,.confirmation-actions button,.confirmation-actions a{width:100%}
  dialog{width:calc(100% - 20px);max-width:500px;max-height:calc(100dvh - 20px);overflow:auto}
}

@media(max-width:420px){
  .public-header{display:grid}
  .brand{min-width:0}
  .brand strong{overflow-wrap:anywhere}
  .intro-card,.poster-card{padding:18px}
  .step{padding:18px 14px}
  .confirmation{padding:28px 18px}
}