/* Follow the visual viewport instead of centring behind the iOS keyboard. */
#ki-check-dialog.visual-viewport-form,#callback-dialog.visual-viewport-form{
 --form-safe-top:max(12px,env(safe-area-inset-top,0px));
 --form-safe-bottom:max(12px,env(safe-area-inset-bottom,0px));
 top:calc(var(--form-viewport-top,0px) + (var(--form-viewport-height,100dvh) + var(--form-safe-top) - var(--form-safe-bottom))/2);
 bottom:auto;margin-block:0;translate:0 -50%;
 max-height:calc(var(--form-viewport-height,100dvh) - var(--form-safe-top) - var(--form-safe-bottom));
 overscroll-behavior:contain;
}
#ki-check-dialog.visual-viewport-form:not(.compact){height:min(700px,calc(var(--form-viewport-height,100dvh) - var(--form-safe-top) - var(--form-safe-bottom)))}
#ki-check-dialog.short-form-viewport .dialog-top{padding:10px 20px 8px}
#ki-check-dialog.short-form-viewport .dialog-brand img{width:96px;height:38px}
#ki-check-dialog.short-form-viewport .dialog-brand>span{font-size:12px}
#ki-check-dialog.short-form-viewport .close{width:32px;height:32px}
#ki-check-dialog.short-form-viewport .dialog-body{padding:12px 20px 16px}
#ki-check-dialog.short-form-viewport .progress{margin-inline:20px}
#ki-check-dialog.short-form-viewport .step-label{margin-bottom:6px;font-size:12px}
#ki-check-dialog.short-form-viewport #dialog-title{font-size:26px;line-height:1.1}
#ki-check-dialog.short-form-viewport .step{padding-top:12px}
#ki-check-dialog.short-form-viewport input:not([type="checkbox"]){font-size:18px;padding:11px 12px;min-height:46px}
#ki-check-dialog.short-form-viewport .error{min-height:0;margin:4px 0 10px;font-size:13px}
#ki-check-dialog.short-form-viewport .primary{min-height:46px;padding:11px 16px;font-size:18px}
#ki-check-dialog.short-form-viewport .bottom{margin-top:8px}
#callback-dialog.short-form-viewport{padding:18px 20px}
#callback-dialog.short-form-viewport h2{font-size:28px;margin:10px 32px 20px 0}
#callback-title:focus,#ki-check-dialog #dialog-title:focus{outline:none}
/* Let Safari extend the page beneath its native glass UI, respecting cutouts. */
@media(max-width:700px){
 :root{--header:calc(74px + env(safe-area-inset-top,0px));--gap:max(20px,env(safe-area-inset-left,0px),env(safe-area-inset-right,0px))}
 .header{padding-top:calc(12px + env(safe-area-inset-top,0px))}
 footer{padding-bottom:max(20px,env(safe-area-inset-bottom,0px))}
}
@media(pointer:coarse) and (min-width:701px){
 .header{padding-inline:max(var(--gap),env(safe-area-inset-left,0px),env(safe-area-inset-right,0px))}
}

/* Safari may expose the page canvas beyond a native dialog backdrop.
   Match that canvas to the backdrop over white while a form is open.
   Section surfaces and the dialog itself keep their own backgrounds. */
@media(max-width:700px),(pointer:coarse){
 html:has(#ki-check-dialog[open]),body:has(#ki-check-dialog[open]){background-color:#a3aea9}
 html:has(#callback-dialog[open]),body:has(#callback-dialog[open]){background-color:#777}
}