/* Kit v5 · overlay (overlay.js). Popovers, pickers, sheets and dialogs share one motion and one sheet.
   The page's own CSS places and dresses a popover; this file adds the motion, the dialog frame and the phone sheet.
   Motion: in over --k-move, out over --k-exit, on --k-ease (no overshoot). None under reduced motion. */

/* closed means gone, whatever display the page gives the panel */
.k-overlay[hidden]{display:none!important}
.k-overlay[data-k-state]{transition:opacity var(--k-move,360ms) var(--k-ease,ease),transform var(--k-move,360ms) var(--k-ease,ease)}
.k-overlay[data-k-state="enter"],.k-overlay[data-k-state="exit"]{opacity:0;transform:translateY(-6px)}
.k-overlay[data-k-state="exit"]{transition-duration:var(--k-exit,280ms);pointer-events:none}
.k-overlay:focus{outline:none}
.k-overlay:focus-visible{outline:2px solid var(--k-focus,#1f3a68);outline-offset:2px}

/* a modal: a <dialog> in the top layer, centred, scrolling inside itself when it is taller than the screen */
dialog.k-overlay{max-height:calc(100dvh - 32px);overflow:auto;overscroll-behavior:contain}
dialog.k-overlay[data-k-state="enter"],dialog.k-overlay[data-k-state="exit"]{transform:translateY(8px)}
dialog.k-overlay::backdrop{background:rgba(10,12,14,.22);transition:opacity var(--k-move,360ms) var(--k-ease,ease)}
dialog.k-overlay[data-k-state="enter"]::backdrop,dialog.k-overlay[data-k-state="exit"]::backdrop{opacity:0}
dialog.k-overlay[data-k-state="exit"]::backdrop{transition-duration:var(--k-exit,280ms)}

/* placement "sheet" under 640px: a bottom sheet that rises from the bottom edge, clear of the home indicator */
.k-overlay[data-k-sheet]{position:fixed;inset:auto 0 0 0;margin:0;width:100%;max-width:none;max-height:min(86dvh,calc(100dvh - 24px));
  border-radius:24px 24px 0 0;padding-bottom:calc(22px + env(safe-area-inset-bottom,0px))}
.k-overlay[data-k-sheet][data-k-state="enter"],.k-overlay[data-k-sheet][data-k-state="exit"]{transform:translateY(100%);opacity:1}

@media (prefers-reduced-motion:reduce){
  .k-overlay,.k-overlay[data-k-state],.k-overlay::backdrop{transition:none!important}
}
@media print{.k-overlay{display:none!important}}