/* kit v1.2.5, copied from metaproject/ui/kit */
/* sheet.css: bottom sheet on phones, right side panel from 900px (sheet.js). */

/* The page under an open sheet stays put. */
html.kit-sheet-open { overflow: hidden; }

/* The <dialog> is a transparent, viewport-sized layer holding the scrim and the panel. */
.kit-sheet {
  position: fixed; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none;
  margin: 0; padding: 0; border: 0; background: transparent; color: var(--kit-ink);
  /* clip, not just hidden: an overflow:hidden box can still be scrolled by script and by
     "scroll into view". showModal() focuses the panel while it's still parked below the screen,
     and iOS Safari scrolled this layer to show it: the sheet appeared fully open in one frame,
     then the slide-in carried it up off the top until the scroll reset (v1.2.0 bug, 2026-10-18). */
  overflow: hidden; overflow: clip;
}
.kit-sheet::backdrop { background: transparent; }
.kit-sheet__scrim {
  position: absolute; inset: 0; background: var(--kit-scrim);
  touch-action: none; /* a drag on the backdrop never scrolls the page under it */
  opacity: 0; transition: opacity var(--kit-dur) ease;
}
.kit-sheet__panel {
  --kit-sheet-pad-x: max(var(--kit-gutter), env(safe-area-inset-left, 0px));
  position: absolute; left: 0; right: 0; bottom: 0;
  /* svh fallback, dvh when supported: never taller than the visible page, minus a strip of
     page above it so it reads as a sheet (compare). */
  max-height: calc(100svh - env(safe-area-inset-top, 0px) - 24px);
  max-height: calc(100dvh - env(safe-area-inset-top, 0px) - 24px);
  /* overscroll-behavior-y: none, not contain: contain still lets iOS rubber-band the panel's own
     content, which slid the text down inside a background that stayed put whenever a drag
     wasn't taken by swipe.js (v1.0 bug). The panel is the ONE element that moves in a swipe:
     it paints the background and holds everything, so content and background move together. */
  overflow-y: auto; overscroll-behavior: none;
  background: var(--kit-surface);
  border-radius: var(--kit-radius-lg) var(--kit-radius-lg) 0 0;
  box-shadow: var(--kit-shadow);
  padding: 0 max(var(--kit-gutter), env(safe-area-inset-right, 0px)) calc(24px + env(safe-area-inset-bottom, 0px)) var(--kit-sheet-pad-x);
  transform: translateY(100%);
  transition: transform var(--kit-dur) var(--kit-ease);
}
.kit-sheet__panel:focus { outline: none; }
/* Keyboard up (sheet.js sets data-kb and the --kit-kb-* lengths from visualViewport): the panel
   sits on the keyboard and fits in the part of the page still showing; no home-indicator padding. */
.kit-sheet[data-kb] .kit-sheet__panel {
  bottom: var(--kit-kb-bottom, 0px);
  max-height: calc(var(--kit-kb-h, 100dvh) - env(safe-area-inset-top, 0px) - 24px);
  padding-bottom: 16px;
}
/* The open starts one frame in (a negative delay, v1.2.5): its first frame already shows the panel
   coming up, not the t = 0 picture (panel still off-screen), which was a frame of nothing. Only
   on the way in: the close's delay comes from the rules above (none). */
.kit-sheet.is-in .kit-sheet__scrim { opacity: 1; transition-delay: -16ms; }
.kit-sheet.is-in .kit-sheet__panel { transform: none; transition-delay: -16ms; }

/* The handle says "this drags". The whole panel drags (from scrollTop 0), not only the handle. */
.kit-sheet__grab { width: 40px; height: 5px; border-radius: 3px; background: var(--kit-line); margin: 8px auto 4px; flex: none; }

/* Sticky head with a visible Close: a swipe is a shortcut, never the only way out. */
.kit-sheet__head {
  position: sticky; top: 0; z-index: 2;
  display: flex; align-items: center; gap: 8px;
  padding: 8px 0; background: var(--kit-surface);
}
.kit-sheet__head h2 { flex: 1; min-width: 0; margin: 0; font-size: 20px; }

@media (min-width: 900px) {
  .kit-sheet--side .kit-sheet__panel {
    left: auto; top: 0; width: 440px; max-height: none;
    border-radius: 0;
    padding-top: env(safe-area-inset-top, 0px);
    transform: translateX(100%);
  }
  .kit-sheet--side .kit-sheet__grab { visibility: hidden; }
  .kit-sheet--side[data-kb] .kit-sheet__panel { top: var(--kit-kb-top, 0px); max-height: none; }
}