/* One scrollable field area keeps task/feed actions reachable above the keyboard
   and mobile navigation. The dialog top layer remains above page navigation. */
dialog:has(.modal-form-fields){overflow:hidden;max-height:min(90dvh,840px)}
dialog:has(.modal-form-fields) .modal-inner{display:flex;flex-direction:column;overflow:hidden;max-height:min(90dvh,840px);padding-bottom:16px}
dialog:has(.modal-form-fields) .modal-heading{flex:none}
dialog:has(.modal-form-fields) form{display:flex;flex-direction:column;min-height:0;overflow:hidden}
.modal-form-fields{min-height:0;overflow-y:auto;overscroll-behavior:contain;scroll-padding-block:12px;padding:2px 3px 4px;margin-inline:-3px}
dialog:has(.modal-form-fields) .modal-footer{flex:none;padding-top:14px;margin-top:8px;border-top:1px solid var(--line);background:var(--surface)}
.field-error{display:block;color:var(--danger,#a53542);font-size:12px;line-height:1.4}
.form-field [aria-invalid="true"]{border-color:var(--danger,#a53542);outline:1px solid var(--danger,#a53542);outline-offset:1px}
.feeding-round-status{display:flex;align-items:flex-start;gap:8px;line-height:1.6;overflow-wrap:anywhere}
.feeding-round-status .icon{flex:none;margin-top:3px}
@media(max-width:570px){
 dialog:has(.modal-form-fields){width:calc(100vw - 20px);max-height:calc(100dvh - env(safe-area-inset-top,0px) - 20px)}
 dialog:has(.modal-form-fields) .modal-inner{max-height:calc(100dvh - env(safe-area-inset-top,0px) - 22px);padding:18px 16px calc(12px + env(safe-area-inset-bottom,0px))}
 dialog:has(.modal-form-fields) .modal-footer{flex-direction:row;align-items:stretch;gap:8px}
 dialog:has(.modal-form-fields) .modal-footer>button{min-height:44px;width:auto;flex:1;white-space:normal}
 .modal-form-fields input,.modal-form-fields select,.modal-form-fields textarea{font-size:16px}
}