/* =========================================================================
   Drawer — a portable, dependency-free drawer/sheet.
   Bottom / top / left / right, grab-and-move with velocity dismiss.
   Reverse-engineered from the Vaul / Etch drawer pattern; standalone.

   Markup:
     <div class="c-drawer__wrapper" data-opened-by="#trigger">
       <div class="c-drawer__overlay"></div>
       <div class="c-drawer" data-direction="bottom">
         <div class="c-drawer__handle-wrapper"><div class="c-drawer__handle"></div></div>
         <div class="c-drawer__body"> ...content... </div>
       </div>
     </div>

   Config (CSS vars, set on .c-drawer or an ancestor):
     --drawer-duration, --drawer-easing, --drawer-radius, --drawer-inset,
     --drawer-max-width, --drawer-max-height, --drawer-bg, --drawer-color,
     --drawer-overlay-color, --drawer-handle-color, --drawer-handle-width,
     --drawer-handle-height, --drawer-body-padding, --drawer-handle-padding.
   ========================================================================= */

.c-drawer__wrapper {
	--duration: var(--drawer-duration, 0.5s);
	--easing: var(--drawer-easing, cubic-bezier(0.32, 0.72, 0, 1));
	position: fixed;
	inset: 0;
	z-index: var(--drawer-z, 9999);
	pointer-events: none;
	visibility: hidden;
}
.c-drawer__wrapper.is-visible {
	pointer-events: auto;
	visibility: visible;
}

/* Passive (toast): no overlay, wrapper clicks pass through, panel stays live. */
.c-drawer__wrapper[data-passive="true"] .c-drawer__overlay { display: none; }
.c-drawer__wrapper[data-passive="true"].is-visible { pointer-events: none; }
.c-drawer__wrapper[data-passive="true"] .c-drawer { pointer-events: auto; }

/* --- Overlay ----------------------------------------------------------- */
.c-drawer__overlay {
	position: fixed;
	inset: 0;
	background: var(--drawer-overlay-color, rgba(0, 0, 0, 0.4));
	opacity: 0;
	transition: opacity var(--duration) var(--easing);
}
.c-drawer__overlay[data-state="open"] { opacity: 1; }

/* --- Panel ------------------------------------------------------------- */
.c-drawer {
	--default-radius: 16px;
	--default-max-height: 92dvh;
	--default-inset: 8px;
	--default-max-width: 24rem;
	--default-body-padding: 20px;

	position: fixed;
	background: var(--drawer-bg, #fff);
	color: var(--drawer-color, inherit);
	outline: none;
	overflow: visible;
	touch-action: none;
	will-change: transform;
	transition: transform var(--duration) var(--easing);
	display: flex;
	flex-direction: column;
	box-shadow: 0 8px 40px rgba(0, 0, 0, 0.18);
}
@media (hover: hover) and (pointer: fine) {
	.c-drawer { user-select: none; }
}

/* No-drag: re-enable native scroll/pan on the panel. */
.c-drawer__wrapper[data-no-drag="true"] .c-drawer { touch-action: auto; }

/* Over-drag fill: a bg extension so a bounce past the edge shows drawer bg,
   not a gap. Vertical directions only. */
.c-drawer:is([data-direction="bottom"], [data-direction="top"])::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	height: 200%;
	background-color: var(--drawer-bg, #fff);
	transform: translateZ(0);
}

/* Direction variants — closed transform + open reset (transitioned). */
.c-drawer[data-direction="bottom"] {
	--inset: var(--drawer-inset, var(--default-inset));
	bottom: 0;
	left: var(--inset);
	right: var(--inset);
	max-height: var(--drawer-max-height, var(--default-max-height));
	max-width: var(--drawer-max-width, none);
	margin-inline: auto;
	border-radius: var(--drawer-radius, var(--default-radius)) var(--drawer-radius, var(--default-radius)) 0 0;
	transform: translate3d(0, 100%, 0);
}
.c-drawer[data-direction="bottom"]::after { top: 100%; }

.c-drawer[data-direction="top"] {
	--inset: var(--drawer-inset, var(--default-inset));
	top: 0;
	left: var(--inset);
	right: var(--inset);
	max-height: var(--drawer-max-height, var(--default-max-height));
	max-width: var(--drawer-max-width, none);
	margin-inline: auto;
	border-radius: 0 0 var(--drawer-radius, var(--default-radius)) var(--drawer-radius, var(--default-radius));
	transform: translate3d(0, -100%, 0);
}
.c-drawer[data-direction="top"]::after { bottom: 100%; }

.c-drawer[data-direction="left"] {
	--inset: var(--drawer-inset, var(--default-inset));
	top: var(--inset);
	left: var(--inset);
	bottom: var(--inset);
	max-width: var(--drawer-max-width, var(--default-max-width));
	border-radius: var(--drawer-radius, var(--default-radius));
	transform: translate3d(calc(-100% - var(--inset)), 0, 0);
}
.c-drawer[data-direction="right"] {
	--inset: var(--drawer-inset, var(--default-inset));
	top: var(--inset);
	right: var(--inset);
	bottom: var(--inset);
	max-width: var(--drawer-max-width, var(--default-max-width));
	border-radius: var(--drawer-radius, var(--default-radius));
	margin-left: auto;
	transform: translate3d(calc(100% + var(--inset)), 0, 0);
}
.c-drawer[data-state="open"] { transform: translate3d(0, 0, 0); }

/* Keep content clear of device safe areas (home indicator, notch). Needs
   viewport-fit=cover on the page to resolve to a non-zero value — a harmless
   no-op otherwise. The panel background fills the inset; content pads off it. */
.c-drawer[data-direction="bottom"] { padding-bottom: env(safe-area-inset-bottom); }
.c-drawer[data-direction="top"] { padding-top: env(safe-area-inset-top); }
.c-drawer:is([data-direction="left"], [data-direction="right"]) {
	padding-top: env(safe-area-inset-top);
	padding-bottom: env(safe-area-inset-bottom);
}

.c-drawer.is-dragging,
.c-drawer.is-dragging * { cursor: grabbing !important; }

@media (prefers-reduced-motion: reduce) {
	.c-drawer,
	.c-drawer__overlay { transition: none !important; }
}

/* --- Handle ------------------------------------------------------------ */
.c-drawer__handle-wrapper {
	position: relative;
	display: flex;
	justify-content: center;
	padding: var(--drawer-handle-padding, 20px 0 16px);
}
.c-drawer__wrapper:not([data-no-drag="true"]) .c-drawer__handle-wrapper { cursor: grab; }
.c-drawer__wrapper[data-no-drag="true"] .c-drawer__handle-wrapper,
.c-drawer:is([data-direction="left"], [data-direction="right"]) .c-drawer__handle-wrapper { display: none; }

.c-drawer__handle {
	--handle-width: var(--drawer-handle-width, 48px);
	--handle-height: var(--drawer-handle-height, 4px);
	display: block;
	width: var(--handle-width);
	height: var(--handle-height);
	background: var(--drawer-handle-color, #b4b4b8);
	border-radius: 999px;
	opacity: 0.7;
	touch-action: none;
	transition: width 0.3s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.15s;
}
.c-drawer__handle:active { opacity: 1; }
@media (hover: hover) and (pointer: fine) {
	.c-drawer__handle-wrapper:hover .c-drawer__handle {
		opacity: 1;
		width: calc(var(--handle-width) * 1.4);
	}
}
@media (prefers-reduced-motion: reduce) {
	.c-drawer__handle { transition: none !important; }
}

/* --- Body -------------------------------------------------------------- */
.c-drawer__body {
	padding: var(--drawer-body-padding, var(--default-body-padding, 20px));
	overflow-y: auto;
	flex-grow: 1;
}
/* Top drawer: content above the handle (you drag up to close). */
.c-drawer[data-direction="top"] .c-drawer__body { order: -1; }