/* D&D kit.css: mechanics only. No colors, fonts or layout opinions.
   The page's own <style> sets the look from the Codex mockup. */

/* Reset */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{min-height:100dvh;overflow-x:hidden;line-height:1.5}
img,video,svg,picture{display:block;max-width:100%}
img{height:auto}
button,input,select,textarea{font:inherit;color:inherit}
a{color:inherit}
body.kit-lock{overflow:hidden}

/* Header: fills the iPhone status-bar strip; .is-solid is toggled by kit.js on scroll.
   Style the big and shrunk states in the page CSS, e.g. header.is-solid .logo{width:52px} */
.kit-header{position:fixed;inset:0 0 auto;z-index:50;padding-top:env(safe-area-inset-top);
  padding-left:env(safe-area-inset-left);padding-right:env(safe-area-inset-right);
  transition:background-color .3s,box-shadow .3s,height .3s}

/* Slide-out panel (<dialog class="kit-panel">). Add .kit-panel--left or --bottom for other edges. */
dialog.kit-panel{border:0;padding:0;margin:0 0 0 auto;height:100dvh;max-height:none;
  width:min(560px,100vw);max-width:100vw;overflow-y:auto;overscroll-behavior:contain;
  padding-top:env(safe-area-inset-top);padding-bottom:env(safe-area-inset-bottom)}
dialog.kit-panel--left{margin:0 auto 0 0}
dialog.kit-panel--bottom{margin:auto 0 0 0;width:100vw;height:auto;max-height:90dvh}
dialog.kit-panel::backdrop{background:rgba(0,0,0,.5)}
dialog.kit-panel[open]{animation:kit-in-right .35s ease}
dialog.kit-panel--left[open]{animation-name:kit-in-left}
dialog.kit-panel--bottom[open]{animation-name:kit-in-up}
@keyframes kit-in-right{from{transform:translateX(100%)}to{transform:none}}
@keyframes kit-in-left{from{transform:translateX(-100%)}to{transform:none}}
@keyframes kit-in-up{from{transform:translateY(100%)}to{transform:none}}
.kit-x{position:sticky;top:0;float:right;z-index:2;width:44px;height:44px;border:0;background:none;
  font-size:30px;line-height:1;cursor:pointer}

/* Video hero: fills its box. Give the parent a size and position:relative. */
.kit-hero-video,.kit-cover{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}

/* Visually hidden (screen-reader text) */
.kit-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* Reduced motion: no animations; kit.js also pauses autoplay video */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important;scroll-behavior:auto!important}
}