/**
 * Booknetic for Theme V4 — Design System overlays.
 *
 *   .ds-overlay         — root scrim wrapper (positions and animates)
 *   .ds-overlay__scrim  — backdrop with blur
 *   .ds-modal           — centered modal panel
 *   .ds-drawer          — side drawer (left/right)
 *   .ds-sheet           — bottom sheet (mobile)
 *   .ds-popover         — small floating panel anchored to a trigger
 *   .ds-toast           — ephemeral notification
 *
 * Open state is driven by [data-state="open"] (set by ds-overlays-v4.js or
 * by any controller). Closed = default (display:none via attribute selector).
 *
 * Focus trap, ESC handling, scroll lock, and toast queueing live in
 * ds-overlays-v4.js.
 */

/* ============================================================ */
/* OVERLAY ROOT                                                  */
/* ============================================================ */

.ds-overlay {
	position: fixed;
	inset: 0;
	z-index: var(--ds-z-overlay);
	display: flex;
	pointer-events: none;
	opacity: 0;
	transition: opacity var(--ds-dur-base) var(--ds-ease-out);
}
.ds-overlay[data-state="open"] {
	pointer-events: auto;
	opacity: 1;
}

.ds-overlay__scrim {
	position: absolute;
	inset: 0;
	background: var(--ds-color-overlay-scrim);
	backdrop-filter: blur(var(--ds-blur-sm));
	cursor: pointer;
}

body.ds-overlay-open { overflow: hidden; }

/* ============================================================ */
/* MODAL                                                         */
/* ============================================================ */

.ds-modal {
	position: relative;
	width: 100%;
	max-width: 520px;
	margin: auto;
	background: var(--ds-color-bg-elevated);
	border: 1px solid var(--ds-color-border);
	border-radius: var(--ds-radius-overlay) var(--ds-radius-overlay) 0 0;
	box-shadow: var(--ds-shadow-2xl);
	padding: var(--ds-space-6);
	color: var(--ds-color-text);
	transform: translateY(40px) scale(0.98);
	transition: transform var(--ds-dur-slow) var(--ds-ease-out);
	max-height: 92vh;
	overflow-y: auto;
	z-index: var(--ds-z-modal);
}
@media (min-width: 720px) {
	.ds-modal { border-radius: var(--ds-radius-overlay); }
	.ds-overlay--modal { padding: var(--ds-space-6); align-items: center; justify-content: center; }
}
.ds-overlay--modal { align-items: flex-end; justify-content: center; }
.ds-overlay--modal[data-state="open"] .ds-modal { transform: translateY(0) scale(1); }

.ds-modal--sm { max-width: 420px; }
.ds-modal--lg { max-width: 640px; }
.ds-modal--xl { max-width: 800px; }

.ds-modal__close {
	position: absolute;
	top: var(--ds-space-3);
	right: var(--ds-space-3);
	width: 32px;
	height: 32px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: transparent;
	border: 0;
	border-radius: var(--ds-radius-sm);
	color: var(--ds-color-text-muted);
	cursor: pointer;
	transition: var(--ds-transition-color), var(--ds-transition-bg);
}
.ds-modal__close:hover { color: var(--ds-color-text); background: var(--ds-color-surface); }
.ds-modal__close:focus-visible { outline: 0; box-shadow: var(--ds-ring-focus); }

.ds-modal__header  { display: flex; flex-direction: column; gap: var(--ds-space-1); margin-bottom: var(--ds-space-4); }
.ds-modal__title   { font-family: var(--ds-font-display); font-size: var(--ds-text-2xl); font-weight: var(--ds-font-bold); letter-spacing: var(--ds-tracking-tight); color: var(--ds-color-text); margin: 0; }
.ds-modal__sub     { font-size: var(--ds-text-sm); color: var(--ds-color-text-muted); margin: 0; line-height: var(--ds-leading-relaxed); }
.ds-modal__body    { font-size: var(--ds-text-sm); color: var(--ds-color-text); line-height: var(--ds-leading-relaxed); }
.ds-modal__actions {
	display: flex;
	gap: var(--ds-space-2);
	flex-direction: column-reverse;
	margin-top: var(--ds-space-5);
}
@media (min-width: 480px) {
	.ds-modal__actions { flex-direction: row; justify-content: flex-end; }
}
.ds-modal__actions .ds-btn { flex: 1; }
@media (min-width: 480px) {
	.ds-modal__actions .ds-btn { flex: 0 0 auto; }
}

/* ============================================================ */
/* DRAWER                                                        */
/* ============================================================ */

.ds-overlay--drawer { align-items: stretch; justify-content: flex-end; }
.ds-overlay--drawer-left { justify-content: flex-start; }

.ds-drawer {
	position: relative;
	width: 100%;
	max-width: 420px;
	background: var(--ds-color-bg-elevated);
	border-left: 1px solid var(--ds-color-border);
	box-shadow: var(--ds-shadow-2xl);
	padding: var(--ds-space-5);
	color: var(--ds-color-text);
	transform: translateX(40px);
	transition: transform var(--ds-dur-slow) var(--ds-ease-out);
	overflow-y: auto;
	z-index: var(--ds-z-sheet);
	display: flex;
	flex-direction: column;
}
.ds-overlay--drawer-left .ds-drawer {
	border-left: 0;
	border-right: 1px solid var(--ds-color-border);
	transform: translateX(-40px);
}
.ds-overlay--drawer[data-state="open"] .ds-drawer,
.ds-overlay--drawer-left[data-state="open"] .ds-drawer {
	transform: translateX(0);
}

.ds-drawer--narrow { max-width: 320px; }
.ds-drawer--wide   { max-width: 540px; }

/* ============================================================ */
/* SHEET (bottom)                                                */
/* ============================================================ */

.ds-overlay--sheet { align-items: flex-end; justify-content: center; }

.ds-sheet {
	position: relative;
	width: 100%;
	max-width: 640px;
	background: var(--ds-color-bg-elevated);
	border-top-left-radius: var(--ds-radius-overlay);
	border-top-right-radius: var(--ds-radius-overlay);
	border: 1px solid var(--ds-color-border);
	border-bottom: 0;
	box-shadow: 0 -24px 60px rgba(0, 0, 0, 0.6);
	max-height: 88vh;
	color: var(--ds-color-text);
	display: flex;
	flex-direction: column;
	transform: translateY(100%);
	transition: transform var(--ds-dur-slow) var(--ds-ease-out);
	overflow: hidden;
	touch-action: pan-y;
	z-index: var(--ds-z-sheet);
}
.ds-overlay--sheet[data-state="open"] .ds-sheet { transform: translateY(0); }

.ds-sheet__handle {
	display: block;
	background: transparent;
	border: 0;
	padding: var(--ds-space-3) 0 var(--ds-space-1);
	cursor: grab;
	flex-shrink: 0;
}
.ds-sheet__handle::after {
	content: "";
	display: block;
	width: 40px;
	height: 4px;
	background: var(--ds-color-border-strong);
	border-radius: var(--ds-radius-pill);
	margin: 0 auto;
}

.ds-sheet__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: var(--ds-space-2) var(--ds-space-5) var(--ds-space-3);
	border-bottom: 1px solid var(--ds-color-border-subtle);
	flex-shrink: 0;
}
.ds-sheet__title { font-size: var(--ds-text-md); font-weight: var(--ds-font-bold); margin: 0; }
.ds-sheet__body  { padding: var(--ds-space-4) var(--ds-space-5); overflow-y: auto; -webkit-overflow-scrolling: touch; }
.ds-sheet__footer {
	padding: var(--ds-space-4) var(--ds-space-5) max(var(--ds-space-5), env(safe-area-inset-bottom));
	border-top: 1px solid var(--ds-color-border-subtle);
	display: flex;
	flex-direction: column;
	gap: var(--ds-space-2);
	flex-shrink: 0;
}

/* ============================================================ */
/* POPOVER (anchored to a trigger)                               */
/* ============================================================ */

.ds-popover {
	position: absolute;
	background: var(--ds-color-bg-elevated);
	border: 1px solid var(--ds-color-border);
	border-radius: var(--ds-radius-lg);
	box-shadow: var(--ds-shadow-xl);
	padding: var(--ds-space-3);
	color: var(--ds-color-text);
	min-width: 220px;
	max-width: 320px;
	z-index: var(--ds-z-dropdown);
	opacity: 0;
	transform: translateY(-4px) scale(0.97);
	transition: opacity var(--ds-dur-fast) var(--ds-ease-out), transform var(--ds-dur-fast) var(--ds-ease-out);
	pointer-events: none;
}
.ds-popover[data-state="open"] {
	opacity: 1;
	transform: translateY(0) scale(1);
	pointer-events: auto;
}

/* ============================================================ */
/* TOAST                                                         */
/* ============================================================ */

.ds-toast-region {
	position: fixed;
	top: calc(var(--ds-space-4) + env(safe-area-inset-top));
	right: var(--ds-space-4);
	z-index: var(--ds-z-toast);
	display: flex;
	flex-direction: column;
	gap: var(--ds-space-2);
	max-width: 380px;
	pointer-events: none;
}
@media (max-width: 480px) {
	.ds-toast-region {
		left: var(--ds-space-3);
		right: var(--ds-space-3);
		max-width: none;
	}
}

.ds-toast {
	pointer-events: auto;
	display: flex;
	align-items: flex-start;
	gap: var(--ds-space-2);
	padding: var(--ds-space-3) var(--ds-space-4);
	background: var(--ds-color-bg-elevated);
	border: 1px solid var(--ds-color-border);
	border-left-width: 3px;
	border-radius: var(--ds-radius-md);
	box-shadow: var(--ds-shadow-xl);
	color: var(--ds-color-text);
	font-size: var(--ds-text-sm);
	animation: ds-toast-in var(--ds-dur-base) var(--ds-ease-out) both;
}
.ds-toast--success { border-left-color: var(--ds-color-success); }
.ds-toast--warning { border-left-color: var(--ds-color-warning); }
.ds-toast--danger  { border-left-color: var(--ds-color-danger); }
.ds-toast--info    { border-left-color: var(--ds-color-info); }
.ds-toast__icon    { flex-shrink: 0; margin-top: 1px; }
.ds-toast__body    { min-width: 0; }
.ds-toast__title   { font-weight: var(--ds-font-semibold); margin: 0 0 2px; }
.ds-toast__msg     { color: var(--ds-color-text-muted); margin: 0; }
.ds-toast.is-leaving { animation: ds-toast-out var(--ds-dur-base) var(--ds-ease-in) both; }

@keyframes ds-toast-in  { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
@keyframes ds-toast-out { from { opacity: 1; transform: translateY(0); }  to { opacity: 0; transform: translateY(-8px); } }

/* ============================================================ */
/* REDUCED MOTION                                                */
/* ============================================================ */

@media (prefers-reduced-motion: reduce) {
	.ds-overlay,
	.ds-modal,
	.ds-drawer,
	.ds-sheet,
	.ds-popover,
	.ds-toast { transition: none !important; animation: none !important; transform: none !important; }
}