/* Mobile refinements, after the illustrated journey styles. */
@media(max-width:800px){
  html{scroll-padding-top:130px;scrollbar-gutter:stable}
  body{min-width:0;overflow-x:clip;-webkit-text-size-adjust:100%}
  .masthead,.steps-wrap,.workspace,.identity-layout,.identity-hub,.identity-personal,.field,.field-grid,.appearance-fields{min-width:0;max-width:100%}
  .masthead{padding-top:max(12px,env(safe-area-inset-top));flex-wrap:wrap;gap:10px}
  .header-actions{min-width:0;flex-wrap:wrap;justify-content:flex-end}
  .header-actions a{white-space:normal}
  .steps{overflow-x:auto;touch-action:pan-x pan-y;overscroll-behavior-x:contain;scrollbar-width:thin;max-width:100vw}
  .steps button,.text-button,.bottom-nav button,.card-buttons button,.hub-copy button{min-height:44px}
  input,select,textarea{font-size:16px!important;max-width:100%;box-sizing:border-box}
  h1,h2,h3,p,a,button{overflow-wrap:break-word}
  .detail-dialog,.confirm-dialog{max-width:calc(100vw - 24px);max-height:calc(100dvh - 28px);overflow-y:auto;overscroll-behavior:contain}
  .bottom-nav{padding-bottom:max(24px,env(safe-area-inset-bottom));gap:12px;flex-wrap:wrap}
  .bottom-nav button{max-width:100%;white-space:normal}
  .identity-personal .privacy,.hub-copy p{font-size:13px!important;line-height:1.65}
  .field-grid>*{min-width:0}
  .attributes-table{width:100%;table-layout:fixed}
}
@media(max-width:540px){
  .identity-hub .start-choice:nth-child(3){grid-template-columns:minmax(0,1fr);gap:12px}
  .identity-hub .start-choice:nth-child(3) .hub-art{height:200px;width:100%;margin:0}
  .identity-hub .hub-copy{min-width:0}
  .identity-hub .hub-copy p{font-size:13px!important;line-height:1.65}
  .catalog-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .choice-card,.card-buttons{min-width:0}
  .card-art{height:170px}
  .card-buttons button{white-space:normal}
  .landing-hero .section-intro{font-size:15px;line-height:1.7}
  .landing-hero .hero-note{font-size:12px;line-height:1.6}
  .review-overview{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:360px){
  .masthead{padding-inline:12px}.masthead .brand img{width:112px}
  .catalog-grid{grid-template-columns:minmax(0,1fr)}
  .identity-personal{grid-template-columns:90px minmax(0,1fr);gap:10px}
  .attribute-name{font-size:20px}.attribute-input{gap:2px}.attribute-input button{padding-inline:4px}
}