/* UI components, overlays: Dialog and Toast (Lightbox joins in T7b-2). Loaded after ui-forms.css.
   Motion is transform/opacity only and is switched off by the class-driven .rm rule in base.css. */

html.dlg-open {
	overflow: hidden;
}

/* Dialog: native <dialog> opened with showModal() (modal, inert background, Esc, focus return) */
.dlg {
	inline-size: min(560px, 100% - 2 * var(--margin));
	max-block-size: calc(100dvh - 2 * var(--margin));
	margin: auto;
	padding: 0;
	border: 0;
	background: none;
	color: var(--fg);
	overflow: visible;
}

.dlg::backdrop {
	background: rgb(var(--ink-950-rgb) / 0.72);
}

.dlg[open],
.dlg[open]::backdrop {
	animation: dlg-in var(--d-base) var(--ease) both;
}

.dlg[open]::backdrop {
	animation-name: dlg-fade;
}

@keyframes dlg-in {
	from {
		opacity: 0;
		transform: translateY(12px);
	}
}

@keyframes dlg-fade {
	from {
		opacity: 0;
	}
}

.dlg-box {
	max-block-size: calc(100dvh - 2 * var(--margin));
	overflow-y: auto;
	padding: var(--sp-32);
	background: var(--surface-solid);
	border: var(--hairline) solid var(--ln-ctl);
	border-block-start: 2px solid var(--acc);
	border-radius: var(--radius-plate);
}

.dlg-bad .dlg-box {
	border-block-start-color: var(--bad);
}

.dlg-hd {
	display: flex;
	align-items: flex-start;
	gap: var(--sp-12);
}

.dlg-hd h2 {
	flex: 1;
	min-inline-size: 0;
	font-size: var(--fs-h4);
	font-weight: 700;
	line-height: 1.25;
	overflow-wrap: anywhere;
}

.dlg-ic {
	flex: none;
	inline-size: 24px;
	block-size: 24px;
	color: var(--bad-t);
}

.dlg-x,
.toast-x {
	flex: none;
	display: grid;
	place-items: center;
	inline-size: 44px;
	block-size: 44px;
	margin: -10px;
	padding: 0;
	border: 0;
	background: none;
	color: var(--fg2);
	cursor: pointer;
	transition: color var(--d-fast) var(--ease);
}

.dlg-x {
	margin-block: -10px;
	margin-inline: 0 -10px;
}

.dlg-x svg,
.toast-x svg {
	inline-size: 18px;
	block-size: 18px;
}

.dlg-x:hover,
.toast-x:hover {
	color: var(--fg);
}

.dlg-x:focus-visible,
.toast-x:focus-visible,
.toast-do:focus-visible {
	outline: var(--focus-width) solid var(--focus);
	outline-offset: var(--focus-offset);
}

.dlg-body {
	margin-block-start: var(--sp-16);
	color: var(--fg2);
	font-size: var(--fs-b);
	line-height: 1.55;
}

.dlg-body > * + * {
	margin-block-start: var(--sp-12);
}

/* inline error line: icon-less text in --bad-t on a wash, role=alert, shown by script */
.dlg-err {
	margin-block-start: var(--sp-16);
	padding: var(--sp-12) var(--sp-16);
	border-inline-start: 2px solid var(--bad);
	background: var(--bad-wash);
	color: var(--bad-t);
	font-size: var(--fs-s);
}

.dlg-err[hidden] {
	display: none;
}

.dlg-act {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
	gap: var(--sp-12);
	margin-block-start: var(--sp-24);
}

/* destructive confirm: ghost button with a --bad outline (shape + text carry the meaning too) */
.btn-g.btn-bad {
	color: var(--bad-t);
}

.btn-g.btn-bad::after {
	background: var(--bad);
}

.btn-g.btn-bad:hover,
.btn-g.btn-bad:focus-visible {
	color: var(--ink-900);
}

@media (max-width: 559px) {
	.dlg-box {
		padding: var(--sp-24);
	}

	.dlg-act .btn {
		flex: 1 1 100%;
		justify-content: space-between;
	}
}

/* Toast: one live region (#toasts, role=status) in the layout, toasts are inserted into it */
.toasts {
	position: fixed;
	inset-block-end: var(--sp-24);
	inset-inline-end: var(--sp-24);
	z-index: 600;
	display: grid;
	gap: var(--sp-12);
	inline-size: min(420px, 100% - 2 * var(--margin));
	pointer-events: none;
}

.toast {
	pointer-events: auto;
	display: flex;
	align-items: center;
	gap: var(--sp-12);
	padding: var(--sp-12) var(--sp-16);
	background: var(--surface-solid);
	color: var(--fg);
	border: var(--hairline) solid var(--ln-ctl);
	border-inline-start: 3px solid var(--acc);
	border-radius: var(--radius-plate);
	animation: toast-in var(--d-base) var(--ease) both;
}

.toast-ok {
	border-inline-start-color: var(--ok);
}

.toast-bad {
	border-inline-start-color: var(--bad);
}

.toast.out {
	opacity: 0;
	transform: translateY(8px);
	transition: opacity var(--d-fast) var(--ease), transform var(--d-fast) var(--ease);
}

@keyframes toast-in {
	from {
		opacity: 0;
		transform: translateY(12px);
	}
}

.toast-ic {
	flex: none;
	inline-size: 20px;
	block-size: 20px;
	color: var(--acc-t);
}

.toast-ok .toast-ic {
	color: var(--ok);
}

.toast-bad .toast-ic {
	color: var(--bad-t);
}

.toast-msg {
	flex: 1;
	min-inline-size: 0;
	font-size: var(--fs-s);
	line-height: 1.4;
	overflow-wrap: anywhere;
}

.toast-do {
	flex: none;
	min-block-size: 44px;
	padding-inline: var(--sp-12);
	border: 0;
	background: none;
	color: var(--acc-t);
	font: inherit;
	font-size: var(--fs-s);
	font-weight: 700;
	text-decoration: underline;
	text-underline-offset: 3px;
	cursor: pointer;
}

.toast-x {
	margin-block: -8px;
	margin-inline: 0 -12px;
}

/* demo page lists static toasts in normal flow */
.toast-static {
	animation: none;
	max-inline-size: 420px;
}

.rm .dlg[open],
.rm .dlg[open]::backdrop,
.rm .toast {
	animation: none;
}

.rm .toast.out {
	transition: none;
}