/* Keep the APK's phone layout. Wide screens use bounded cards and forms,
   and content can wrap at every breakpoint without resizing the interface. */
.app-shell #viewContent,.welcome>div,.next-card>div,.category-card{min-width:0}
.welcome h1,.next-card h3,.category-card h3{overflow-wrap:anywhere}
.category-tag{min-width:0;overflow-wrap:anywhere}
.next-card>div:not(.next-icon){flex:1}
.sheet-option>span{min-width:0;overflow-wrap:anywhere}
.modal-head h2{min-width:0;overflow-wrap:anywhere}
.modal-head>.icon-btn{flex-shrink:0}
.modal-footer{flex-wrap:wrap}
.modal-footer .btn{min-width:0;white-space:normal}
.modal-body .row:not(.wrap)>.btn{min-width:0;white-space:normal}
.field input,.field select,.field textarea{min-width:0;max-width:100%}
.check-label input{flex-shrink:0}
.two-col{grid-template-columns:repeat(2,minmax(0,1fr))}

@media(min-width:751px){
  .app-shell{width:100%;max-width:1680px;padding-inline:clamp(24px,3vw,48px)}
  .app-shell .welcome{padding-block:16px 24px}
  .app-shell .welcome h1{font-size:32px}
  .app-shell[data-view="settings"] .welcome>.btn{display:none}
  .app-shell .next-card{padding:22px 25px;gap:22px}
  .app-shell .speech-grid,.app-shell .category-grid{grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:18px}
  .app-shell .category-card{padding:20px 22px}
  .app-shell .bottom-nav,.bottom-nav{max-width:1680px}
  .app-shell .empty{max-width:820px;margin:20px auto;width:100%}
  .modal{max-height:calc(100dvh - 40px)}
  .modal-head h2{font-size:23px}
  .modal-body{scrollbar-gutter:stable}
  .modal-footer{justify-content:flex-end}
  .modal-footer .btn{flex:0 1 auto;min-width:130px}
  .modal .format-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
}

@media(min-width:751px) and (max-width:959px){
  .app-shell .speech-grid,.app-shell .category-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}

@media(max-width:360px){
  /* Existing mobile sheets stay stacked at the bottom; long action labels wrap. */
  .modal .review-header{align-items:flex-start;flex-wrap:wrap}
  .modal .format-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}