/**
 * Modal — Geist clone.
 *
 * Adapted from https://github.com/geist-org/geist-ui/tree/master/components/modal
 *   - centered panel · 26rem default width · radius small · shadow-large
 *   - opacity + 30px translateY entrance · 350ms cubic-bezier(0.4, 0, 0.2, 1)
 *   - title CENTERED, normal weight, capitalize
 *   - subtitle CENTERED, UPPERCASE, muted
 *   - content left-aligned, full-bleed (extends to panel edges via negative margin)
 *   - footer absolute-positioned at bottom with split equal-flex action buttons
 *     and border-top separator + bottom border-radius
 *
 * Markup contract:
 *   <div class="st-modal" data-st-open="false">
 *     <div class="st-modal__panel">
 *       <h2 class="st-modal__title">…</h2>
 *       <p  class="st-modal__subtitle">…</p>
 *       <div class="st-modal__content">…</div>
 *       <div class="st-modal__footer">
 *         <button class="st-modal__action">…</button>
 *         <button class="st-modal__action st-modal__action--passive">…</button>
 *       </div>
 *     </div>
 *   </div>
 */

@layer components {

	/* --- Viewport (covers screen + holds backdrop) --- */

	.st-modal {
		position: fixed;
		inset: 0;
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 1.5rem;
		background: rgb(0 0 0 / 0);
		visibility: hidden;
		pointer-events: none;
		z-index: 1050;
		transition:
			background 350ms cubic-bezier(0.4, 0, 0.2, 1),
			visibility 0s linear 350ms;
	}

	.st-modal[data-st-open="true"] {
		visibility: visible;
		pointer-events: auto;
		background: rgb(0 0 0 / 0.5);
		transition:
			background 350ms cubic-bezier(0.4, 0, 0.2, 1),
			visibility 0s linear 0s;
	}

	/* --- Panel --- */

	.st-modal__panel {
		position: relative;
		display: flex;
		flex-direction: column;
		box-sizing: border-box;
		inline-size: min(26rem, 100%);
		max-block-size: calc(100vh - 3rem);
		overflow: auto;
		background: var(--st-bg);
		color: var(--st-text);
		border-radius: var(--st-radius);
		box-shadow: 0 30px 60px rgb(0 0 0 / 0.12);
		text-align: center;
		padding: 1.3125rem;
		opacity: 0;
		transform: translate3d(0, -30px, 0);
		transition:
			opacity 350ms cubic-bezier(0.4, 0, 0.2, 1),
			transform 350ms cubic-bezier(0.4, 0, 0.2, 1);
	}

	.st-modal[data-st-open="true"] .st-modal__panel {
		opacity: 1;
		transform: translate3d(0, 0, 0);
	}

	/* Width variants (Geist `width` prop) */
	.st-modal--small .st-modal__panel { inline-size: min(20rem, 100%); }
	.st-modal--wide  .st-modal__panel { inline-size: min(40rem, 100%); }

	/* Reserve bottom padding when footer is present (footer is absolute-positioned) */
	.st-modal__panel:has(.st-modal__footer) {
		padding-block-end: calc(1.3125rem + 3.5625rem);
	}

	/* --- Title (centered, capitalize, normal weight) --- */

	.st-modal__title {
		display: block;
		margin: 0;
		text-align: center;
		font-weight: 400;
		font-size: 1.5rem;
		line-height: 1.6;
		text-transform: capitalize;
		color: var(--st-text);
		word-break: break-word;
	}

	/* --- Subtitle (centered, UPPERCASE, muted) --- */

	.st-modal__subtitle {
		display: block;
		margin: 0;
		text-align: center;
		font-weight: 400;
		font-size: 0.875rem;
		line-height: 1.5;
		text-transform: uppercase;
		color: var(--st-text-muted);
		word-break: break-word;
	}

	/* --- Content (left-aligned, full-bleed via negative margins) --- */

	.st-modal__content {
		position: relative;
		text-align: left;
		font-size: 1rem;
		padding: 1.3125rem 1.3125rem 0.6625rem;
		margin-inline: -1.3125rem;
	}

	.st-modal__content > :first-child { margin-block-start: 0; }
	.st-modal__content > :last-child  { margin-block-end: 0; }

	/* --- Footer (absolute bottom, split-flex actions) --- */

	.st-modal__footer {
		position: absolute;
		inset-block-end: 0;
		inset-inline: 0;
		display: flex;
		block-size: 3.5625rem;
		border-block-start: 1px solid var(--st-border);
		border-end-start-radius: var(--st-radius);
		border-end-end-radius: var(--st-radius);
		overflow: hidden;
	}

	/* --- Action button (flex-equal split, no radius, separator border) --- */

	.st-modal__action {
		flex: 1;
		display: flex;
		align-items: center;
		justify-content: center;
		min-inline-size: 0;
		block-size: 100%;
		padding: 0 0.875rem;
		background: var(--st-bg);
		color: var(--st-text);
		border: 0;
		border-radius: 0;
		font-size: 0.75rem;
		font-weight: 400;
		cursor: pointer;
		transition: background 120ms, color 120ms;
	}

	.st-modal__action:hover,
	.st-modal__action:focus-visible {
		background: var(--st-bg-subtle);
	}

	.st-modal__action + .st-modal__action {
		border-inline-start: 1px solid var(--st-border);
	}

	.st-modal__action--passive {
		color: var(--st-text-muted);
	}

	.st-modal__action[disabled] {
		color: var(--st-text-muted);
		cursor: not-allowed;
		background: var(--st-bg);
	}

	body[data-st-modal-open] {
		overflow: hidden;
	}
}