/* Dialog geometry follows the visual viewport, independently of the app behind it. */
:root{--dialog-height:min(var(--dialog-visible-height,100dvh),100dvh)}
body .sheet-backdrop,body .modal-backdrop{
 top:var(--dialog-visible-top,0px);bottom:auto;
 height:var(--dialog-height);box-sizing:border-box;
 z-index:100;
}
body .modal-backdrop{z-index:110}
body .sheet{bottom:10px;box-sizing:border-box;max-height:calc(var(--dialog-height) - 20px)!important}
body .modal{box-sizing:border-box;max-height:calc(var(--dialog-height) - 20px)!important;overflow-y:auto;overscroll-behavior:contain}
body .sheet input:not([type=checkbox]):not([type=radio]),body .sheet textarea,
body .modal input:not([type=checkbox]):not([type=radio]),body .modal textarea{font-size:16px!important}
body .sheet:has(.program-create){
 display:flex!important;flex-direction:column;
 height:min(510px,calc(var(--dialog-height) - 20px));
 padding:14px!important;overflow:hidden!important;
}
.program-create{display:flex;flex-direction:column;flex:1;min-height:0;gap:12px}
.program-create-heading,.program-create-actions{flex:0 0 auto}
.program-create-heading .h2{margin:0 0 5px!important}
.program-create-heading .smalltxt{font-size:11px!important}
.program-create-fields{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:3px 3px 8px;scroll-padding:8px}
.program-create-fields .field{margin:0 0 12px!important}
.program-create-fields .field:last-child{margin-bottom:0!important}
.program-create-fields input,.program-create-fields select{width:100%;box-sizing:border-box;min-height:44px;font-size:16px!important}
.program-create-actions{display:flex;gap:10px;padding-top:8px;border-top:1px solid #ffffff12}
.program-create-actions button{min-height:44px}
@media(max-height:420px){
 .program-create{gap:8px}
 .program-create-heading .smalltxt{display:none}
}