/* shared/confirm.css — chrome for the app-wide confirm dialog (shared/confirm.js).
   Ported from the .dk-modal* / .dk-confirm* rules in sections/decks/decks.css
   when the dialog was promoted to shared (3.311.0.0).

   Namespaced .tcg-confirm* rather than sharing .dk-modal*: this stylesheet is a
   static <link> in shell.html while section stylesheets are runtime-injected by
   each section's ensureCss(), so a shared name would resolve differently
   depending on which section mounted first (LL-G: "stylesheet load order decides
   equal-specificity wins"). A private namespace removes the ordering question
   entirely instead of betting on it.

   Mobile-first: a bottom sheet on phones, a centered dialog at --bp-md+. */

.tcg-confirm-scrim {
	position: fixed;
	inset: 0;
	background: var(--color-overlay-scrim);
	z-index: var(--z-palette);
	display: flex;
	align-items: flex-end;
	justify-content: center;
	opacity: 0;
	transition: opacity 160ms ease;
	padding-bottom: env(safe-area-inset-bottom);
}
.tcg-confirm-scrim.open {
	opacity: 1;
}

.tcg-confirm {
	width: 100%;
	max-width: 400px;
	/* /ui-scale: `zoom` scales raw viewport units too (tokens.css invariant). */
	max-height: calc(88dvh / var(--ui-scale, 1));
	overflow-y: auto;
	background: var(--bg-elev-1);
	border: 1px solid var(--border);
	border-radius: 16px 16px 0 0;
	box-shadow: var(--shadow-pop);
	padding: 16px 18px calc(18px + env(safe-area-inset-bottom));
	transform: translateY(12px);
	transition: transform 180ms ease;
}
.tcg-confirm-scrim.open .tcg-confirm {
	transform: translateY(0);
}

.tcg-confirm-title {
	font-size: 16px;
	font-weight: 600;
	color: var(--text);
	margin-bottom: 6px;
}
.tcg-confirm-msg {
	font-size: 13px;
	color: var(--text-2);
	line-height: 1.55;
	margin: 0 0 10px;
}
.tcg-confirm-msg:last-of-type {
	margin-bottom: 16px;
}
.tcg-confirm-foot {
	display: flex;
	justify-content: flex-end;
	gap: 8px;
}

/* --bp-md */
@media (min-width: 768px) {
	.tcg-confirm-scrim {
		align-items: center;
		padding: 24px;
	}
	.tcg-confirm {
		border-radius: 14px;
		transform: scale(0.98);
	}
	.tcg-confirm-scrim.open .tcg-confirm {
		transform: scale(1);
	}
}