/* ==========================================================================
   Modal dialog (reusable; currently used by the command reference).
   Visibility is toggled via the [hidden] attribute (see base.css) so that the
   u-flex centering utility does not override the hidden state.
   ========================================================================== */

.modal {
	position: fixed;
	inset: 0;
	z-index: 100;
	padding: var(--space-16);
	background-color: rgba(0, 0, 0, 0.6);
	backdrop-filter: blur(2px);
}

.modal__dialog {
	width: 100%;
	max-width: 480px;
}

.modal__title {
	margin-left: var(--space-16);
	color: var(--color-accent);
	font-size: var(--font-size-sm);
	font-weight: var(--font-weight-semibold);
}

.modal__body {
	padding-top: var(--space-20);
	padding-bottom: var(--space-20);
}

.modal__description {
	color: var(--color-text);
	font-size: var(--font-size-sm);
	line-height: var(--line-height-base);
}

/* macOS-style close: the red traffic-light dot is the close button.
   The × glyph reveals on hover/focus (positioned, no flex needed). */
.modal__close-dot {
	position: relative;
	padding: 0;
	cursor: pointer;
}

.modal__close-dot::before {
	content: "×";
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	color: rgba(0, 0, 0, 0.6);
	font-size: 12px;
	font-weight: var(--font-weight-bold);
	line-height: 1;
	opacity: 0;
	transition: opacity var(--transition-fast);
}

.modal__close-dot:hover::before,
.modal__close-dot:focus-visible::before {
	opacity: 1;
}

@media (min-width: 640px) {
	.modal__dialog {
		max-width: 520px;
	}
}