/* Grid and flex children must be able to shrink to the screen width. */
.shell{grid-template-columns:228px minmax(0,1fr)}
.main,#content,.panel,.settings-grid>*,.detail-grid>*,.grid2>*,label,.stat,.hero-content{min-width:0}
input,select,textarea{min-width:0;max-width:100%}
.event-body,.row,.panel,.payment-card,.hero-content{overflow-wrap:anywhere}
.hero-content{flex:1}.hero-date{flex-shrink:0}
.day,.cal-event{min-width:0;overflow-wrap:anywhere}
@media(any-pointer:coarse){input,select,textarea,.search input,.row-actions select,.discovery-area select,input[type=file]{font-size:16px}}
@media(min-width:761px) and (max-width:1100px){.shell{grid-template-columns:200px minmax(0,1fr)}}
@media(max-width:760px){
  /* iOS Safari zooms focused controls whose font is smaller than 16px. */
  input,select,textarea,.search input,.row-actions select,.discovery-area select,input[type=file]{font-size:16px}
  .main{width:100%;padding-left:max(16px,env(safe-area-inset-left));padding-right:max(16px,env(safe-area-inset-right))}
  .grid2{grid-template-columns:minmax(0,1fr)}
  .stats{grid-template-columns:repeat(3,minmax(0,1fr))}
  .stat strong{font-size:clamp(18px,5.8vw,25px)}
  .header-row>div{min-width:0}.header-row>.btn{flex-shrink:0}
  .hero{gap:10px;padding:22px 16px}.hero-content,.hero.has-photo .hero-content{max-width:none}
  .hero h2{font-size:clamp(23px,7vw,30px)}
  .calendar-head{gap:10px;flex-wrap:wrap}.calendar-controls{flex-wrap:wrap}
  .summary-bar,.detail-facts,.form-actions{flex-wrap:wrap}
  .modal-top{gap:8px}.modal-top h2{min-width:0;overflow-wrap:anywhere}.modal-tools{flex-shrink:0}
  .btn{max-width:100%}.panel .btn{white-space:normal}
}
/* iOS Safari: date and time fields keep a native minimum width and ignore width:100%; grid tracks of
   1fr (= minmax(auto,1fr)) and labels (display:grid) then grow wider than the dialog and it scrolls sideways. */
input[type=date],input[type=time],input[type=datetime-local]{-webkit-appearance:none;appearance:none;display:block;min-width:0;max-width:100%}
input[type=date]::-webkit-date-and-time-value,input[type=time]::-webkit-date-and-time-value{text-align:left;min-height:1.4em}
label{grid-template-columns:minmax(0,1fr)}
.grid2{grid-template-columns:repeat(2,minmax(0,1fr))}
dialog{overflow-x:hidden;overscroll-behavior:contain;touch-action:pan-y pinch-zoom;width:min(580px,calc(100vw - 28px));max-width:calc(100vw - 28px)}
dialog form,dialog .form-stack,.discovery-area,.link-import,.import-body,.kind-field{min-width:0}
.form-stack{grid-template-columns:minmax(0,1fr)}
input[type=file]{min-width:0;max-width:100%}
/* While a dialog is open the page behind it does not scroll (iOS passes swipes on to it otherwise). */
html:has(dialog[open]){overflow:hidden}
@media(max-width:760px){.grid2{grid-template-columns:minmax(0,1fr)}}
/* Calendar on phones: square day cells, one line per event, so the month fits on one screen. */
@media(max-width:760px){
  .day{min-height:0;aspect-ratio:1/1;padding:3px 2px;overflow:hidden}
  .day-num{width:18px;height:18px;font-size:10px;margin:0 0 1px 1px}
  .cal-event{font-size:8px;line-height:1.25;padding:1px 3px;margin:1px 0;border-radius:4px}
  .weekday{padding:6px 2px}
  .calendar-head{margin:12px 0}
}
/* People: one line per person on phones, settings in a list (see person-menu). */
.person-more{display:none;color:var(--muted)}.person-more .ico{width:18px;height:18px}
.person-head{display:flex;gap:12px;align-items:center;margin:-6px 0 18px}.person-head .avatar{width:48px;height:48px;font-size:15px}
.person-head strong{display:block;font-size:16px}.person-head small{color:var(--muted);font-size:12px;overflow-wrap:anywhere}
.sheet{border:1px solid var(--line);border-radius:16px;overflow:hidden}
.sheet-item{display:flex;align-items:center;gap:14px;width:100%;padding:15px 16px;text-align:left;font-size:15px;border-top:1px solid var(--line)}
.sheet-item:first-child{border-top:0}.sheet-item:hover{background:color-mix(in srgb,var(--ink) 4%,transparent)}
.sheet-item.danger{color:#c2410c}
@media(max-width:760px){
  .people-list .row{padding:11px 0;flex-wrap:nowrap;align-items:center}
  .people-list .row-main{flex:1;min-width:0}
  .people-list .person-more{flex-shrink:0}
  .people-list .person-row{cursor:pointer}
  .people-list .person-row .row-actions{display:none}
  .people-list .person-more{display:flex}
  .people-list .row-main small{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .people-list .row-main>div{min-width:0}
}