/**
 * Component: Modal
 * Usage: <dialog class="modal" data-modal> — opened via
 * [data-modal-trigger="id"], closed via [data-modal-close] (see js/modal.js).
 * Built on the native <dialog> element: browser handles focus trapping,
 * Escape-to-close, and the ::backdrop.
 */

.modal {
	position: fixed;
	max-width: 28rem;
	width: calc(100% - var(--space-5));
	padding: var(--space-5);
	border: none;
	border-radius: var(--radius);
	background: var(--color-paper);
	color: var(--color-ink);
	box-shadow: var(--shadow-raised);
	opacity: 0;
	transform: translateY(0.75rem) scale(0.97);
	/*
	 * transition-behavior: allow-discrete lets `display`/`overlay`
	 * (both normally non-animatable discrete properties) take part in
	 * this transition — the browser keeps the dialog rendered for the
	 * transition's duration on close instead of yanking it away
	 * instantly, so this single rule animates both open AND close
	 * without any JS changes to js/modal.js's native .showModal()/
	 * .close() calls.
	 */
	transition: opacity 250ms ease, transform 250ms ease, overlay 250ms ease allow-discrete, display 250ms ease allow-discrete;
}

.modal[open] {
	opacity: 1;
	transform: translateY(0) scale(1);
}

/* Starting point for the OPEN transition — without this, a dialog's
   very first paint after showModal() has no "before" state to animate
   from, since [open] is already present by the time it renders. */
@starting-style {
	.modal[open] {
		opacity: 0;
		transform: translateY(0.75rem) scale(0.97);
	}
}

.modal::backdrop {
	background: var(--color-scrim);
	opacity: 0;
	transition: opacity 250ms ease, overlay 250ms ease allow-discrete, display 250ms ease allow-discrete;
}

.modal[open]::backdrop {
	opacity: 1;
}

@starting-style {
	.modal[open]::backdrop {
		opacity: 0;
	}
}

@media (prefers-reduced-motion: reduce) {
	.modal,
	.modal::backdrop {
		transition: none;
	}
}

.modal h2 {
	margin-top: 0;
}

.modal__close {
	position: absolute;
	top: var(--space-3);
	right: var(--space-3);
	width: 2rem;
	height: 2rem;
	border: none;
	background: none;
	font-size: var(--font-size-lg);
	line-height: 1;
	cursor: pointer;
	color: var(--color-ink-soft);
	transition: color var(--transition-base);
}

.modal__close:hover,
.modal__close:focus-visible {
	color: var(--color-ink);
}

.modal__form label {
	display: block;
	font-family: var(--font-sans);
	font-size: var(--font-size-sm);
	font-weight: 600;
	margin-top: var(--space-3);
	margin-bottom: var(--space-1);
}

.modal__form input[type='email'],
.modal__form input[type='text'] {
	width: 100%;
	padding: var(--space-2);
	border: 1px solid var(--color-border);
	border-radius: var(--radius);
	font-family: var(--font-sans);
	font-size: var(--font-size-base);
	/* Without an explicit background/color, native <input> rendering
	   defaults to a white background + black text regardless of the
	   page's own dark-mode CSS — same fix already applied to
	   .comment-form/.search-field inputs in content.css. */
	background: var(--color-paper);
	color: var(--color-ink);
	transition: border-color var(--transition-base);
}

.modal__form input[type='email']:focus-visible,
.modal__form input[type='text']:focus-visible {
	border-color: var(--color-primary);
}

.modal__form .button {
	margin-top: var(--space-4);
	border: none;
	cursor: pointer;
}