/**
 * Component — Modal
 *
 * Expected HTML:
 *   <div class="ec-modal" data-ec-component="modal" id="my-modal" hidden>
 *     <div class="ec-modal__backdrop" data-ec-modal-dismiss></div>
 *     <div class="ec-modal__panel" role="dialog" aria-modal="true" aria-labelledby="my-modal-title">
 *       <header class="ec-modal__header">
 *         <h2 class="ec-modal__title" id="my-modal-title">Title</h2>
 *         <button class="ec-modal__close" type="button" data-ec-modal-dismiss aria-label="Close">
 *           <svg class="ec-icon" aria-hidden="true">...</svg>
 *         </button>
 *       </header>
 *       <div class="ec-modal__body">...</div>
 *       <footer class="ec-modal__footer">
 *         <button class="ec-button ec-button--tertiary" data-ec-modal-dismiss>Cancel</button>
 *         <button class="ec-button ec-button--primary" data-material="water">Confirm</button>
 *       </footer>
 *     </div>
 *   </div>
 *
 *   Trigger: <button data-ec-modal-target="my-modal">Open</button>
 *
 * Composes Button (footer actions) and Icon (close button); this file
 * styles neither. Behaviour (open/close, focus trap, Escape) lives in
 * modal.js — this file only owns the visual states it toggles
 * (ec-modal--visible) and the [hidden] attribute it removes/restores.
 *
 * Glass-eligible per EC-DESIGN.md — apply ec-modal__panel--glass where
 * a page calls for it; not the default, since glass is meant to be
 * used sparingly.
 */

.ec-modal {
	position: fixed;
	inset: 0;
	z-index: var(--ec-z-modal);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: var(--ec-space-4);
	opacity: 0;
	transition: opacity var(--ec-duration-base) var(--ec-ease-standard);
}

.ec-modal[hidden] {
	display: none;
}

.ec-modal--visible {
	opacity: 1;
}

.ec-modal__backdrop {
	position: absolute;
	inset: 0;
	z-index: var(--ec-z-overlay);
	background-color: rgba(15, 23, 42, 0.48);
}

.ec-modal__panel {
	position: relative;
	z-index: var(--ec-z-modal);
	width: 100%;
	max-width: 32rem;
	max-height: calc(100vh - var(--ec-space-8));
	overflow-y: auto;
	background-color: var(--ec-color-surface);
	border-radius: var(--ec-radius-lg);
	box-shadow: var(--ec-elevation-3);
	transform: scale(0.96) translateY(var(--ec-space-2));
	transition: transform var(--ec-duration-base) var(--ec-ease-standard);
}

.ec-modal--visible .ec-modal__panel {
	transform: scale(1) translateY(0);
}

.ec-modal__panel--glass {
	background-color: var(--ec-glass-surface);
	backdrop-filter: blur(var(--ec-glass-blur));
	-webkit-backdrop-filter: blur(var(--ec-glass-blur));
}

.ec-modal__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--ec-space-4);
	padding: var(--ec-space-5) var(--ec-space-5) var(--ec-space-4);
}

.ec-modal__title {
	font-family: var(--ec-font-family-base);
	font-weight: var(--ec-font-weight-semibold);
	font-size: var(--ec-font-size-h4);
	color: var(--ec-color-text-primary);
	margin: 0;
}

.ec-modal__close {
	background: none;
	border: none;
	padding: var(--ec-space-2);
	color: var(--ec-color-text-secondary);
	cursor: pointer;
	border-radius: var(--ec-radius-sm);
}

.ec-modal__close:hover {
	background-color: var(--ec-color-surface-elevated);
}

.ec-modal__close:focus-visible {
	outline: 2px solid var(--ec-material-color);
	outline-offset: 2px;
}

.ec-modal__body {
	padding: 0 var(--ec-space-5) var(--ec-space-5);
	color: var(--ec-color-text-primary);
	font-size: var(--ec-font-size-body);
	line-height: var(--ec-line-height-base);
}

.ec-modal__footer {
	display: flex;
	justify-content: flex-end;
	gap: var(--ec-space-3);
	padding: var(--ec-space-4) var(--ec-space-5) var(--ec-space-5);
	border-top: 1px solid var(--ec-color-border);
}