/* Mobile-only overrides. Existing desktop geometry and typography stay intact. */
@media(max-width:650px){
  html{scroll-padding-top:110px;scroll-padding-bottom:100px}
  body{min-width:0;-webkit-tap-highlight-color:transparent}
  main{padding:0 max(12px,env(safe-area-inset-right)) calc(100px + env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-left))}
  aside{height:calc(76px + env(safe-area-inset-bottom));padding:7px max(10px,env(safe-area-inset-right)) calc(7px + env(safe-area-inset-bottom)) max(10px,env(safe-area-inset-left));box-shadow:0 -5px 25px #49355308}
  nav button{min-height:58px;justify-content:center;gap:1px;border-radius:14px}
  nav span{font-size:11px}
  header{position:sticky;top:0;z-index:4;background:var(--bg);height:calc(84px + env(safe-area-inset-top));padding-top:env(safe-area-inset-top);gap:8px}
  header .primary{min-height:46px;flex-shrink:0;font-size:13px;padding:11px 14px}
  button,.text-btn,.contact-link{min-height:44px}
  input,select,textarea{min-height:46px;font-size:16px}
  input[type=checkbox]{min-height:24px;min-width:24px;accent-color:var(--accent)}
  .card{padding:18px 16px}
  .card-head{flex-wrap:wrap;gap:8px}
  .card-head .text-btn{padding:6px 8px}
  .calendar-head{gap:3px}
  .calendar-head button{min-width:44px;padding:6px}
  .calendar-head select{font-size:15px;max-width:117px}
  .month-title{align-items:center;min-width:0}
  .month-title input{max-width:75px;font-size:15px}
  .week,.days{margin-inline:-8px;gap:2px}
  .days button{height:44px;min-height:44px;aspect-ratio:auto;min-width:0;font-size:14px;border-radius:11px}
  .days i{bottom:4px}
  .legend{flex-wrap:wrap;gap:8px}
  .appt button{min-width:44px;min-height:44px}
  .appt-info strong,.appt-info p,.next-name,.client-list h2,.helper,.notice{overflow-wrap:anywhere}
  .appt-time{min-width:47px}
  .toolbar{align-items:stretch}
  .toolbar button{font-size:13px}
  .toolbar input[type=date]{flex:1;max-width:100%;min-width:130px}
  .actions>*{max-width:100%}
  .actions button{white-space:normal;text-align:center}
  .service-row input{font-size:14px;min-width:0}
  .hours-row input{font-size:14px;min-width:0}
  .split{flex-wrap:wrap}
  dialog{width:calc(100% - 16px);max-width:590px;max-height:calc(min(100dvh,var(--usable-height,100dvh)) - 16px - env(safe-area-inset-top) - env(safe-area-inset-bottom));padding:20px 16px;margin:auto;border-radius:21px;overflow-y:auto;overscroll-behavior:contain;scroll-padding:70px 0 20px}
  .modal-title{position:sticky;top:-20px;padding:8px 0;background:var(--paper);z-index:2;margin-bottom:14px;border-bottom:1px solid var(--line)}
  .modal-title button{min-width:44px}
  .form-grid{gap:0 10px}
  .form-grid label{min-height:19px;font-size:12px}
  #appointment-form .field:has(#a-name),#appointment-form .field:has(#a-phone){grid-column:1/-1}
  .suggestions button{min-height:52px}
  summary{padding:12px 0;min-height:48px}
  .visit-record summary{overflow-wrap:anywhere}
  .visit-record small{font-size:12px}
  .treatment-section textarea{min-height:72px}
  #toast{bottom:calc(90px + env(safe-area-inset-bottom));font-size:13px;overflow-wrap:anywhere}
  body:has(dialog[open]){overflow:hidden}
}
@media(max-width:375px){
  .stat strong{font-size:23px}
  .stat>span{font-size:10px}
  .stats .stat:nth-child(3) strong{font-size:21px!important}
  .form-grid:has(input[type=date]) input[type=date],.form-grid input[type=time]{padding-inline:6px;font-size:14px}
}