/*
 * Modal / sheet. Centred dialog on desktop; at ≤640px every modal
 * becomes a bottom sheet (full width, rounded top). `.modal--sheet`
 * forces the sheet shape at all widths.
 *
 *   <div class="modal" id="m" aria-hidden="true" role="dialog" aria-labelledby="m-t">
 *     <div class="modal__backdrop" data-modal-close></div>
 *     <div class="modal__panel">
 *       <header class="modal__header">
 *         <h2 class="modal__title" id="m-t">Title</h2>
 *         <button class="btn btn--ghost btn--icon modal__close" aria-label="Close" data-modal-close>×</button>
 *       </header>
 *       <div class="modal__body">…</div>
 *       <footer class="modal__footer">…buttons…</footer>
 *     </div>
 *   </div>
 *
 * Open with aria-hidden="false". `.sheet` is a synonym of `.modal--sheet`.
 */
.modal {
    position: fixed;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    padding: var(--sp-4);
    z-index: var(--z-modal);
}
.modal[aria-hidden="false"], .modal.is-open { display: flex; }
.modal__backdrop { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.6); backdrop-filter: blur(2px); }
.modal__panel {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 560px;
    max-height: calc(100vh - 2 * var(--sp-4));
    max-height: calc(100dvh - 2 * var(--sp-4));
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-lg);
    overflow: hidden;
}
.modal__panel--wide { max-width: 880px; }
.modal__header {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    padding: var(--sp-4) var(--sp-5);
    border-bottom: 1px solid var(--color-border);
}
.modal__title { margin: 0; font-size: var(--fs-lg); font-weight: 600; flex: 1 1 auto; min-width: 0; }
.modal__close { margin-left: auto; color: var(--color-text-muted); font-size: var(--fs-lg); line-height: 1; }
.modal__body { padding: var(--sp-4) var(--sp-5); overflow-y: auto; min-height: 0; }
.modal__footer {
    display: flex;
    justify-content: flex-end;
    gap: var(--sp-2);
    flex-wrap: wrap;
    padding: var(--sp-3) var(--sp-5);
    border-top: 1px solid var(--color-border);
}
/* Legacy panels put everything straight in .modal__panel. */
.modal__panel > :not(.modal__header):not(.modal__body):not(.modal__footer):not(.modal__close) { padding: 0 var(--sp-5); }
.modal__panel > :first-child:not(.modal__header):not(.modal__close) { padding-top: var(--sp-5); }
.modal__panel > :last-child:not(.modal__footer) { padding-bottom: var(--sp-5); }
.modal__panel > .modal__close:not(.modal__header .modal__close) { position: absolute; top: var(--sp-3); right: var(--sp-3); }

/* Sheet shape */
.modal--sheet, .sheet { align-items: flex-end; padding: 0; }
.modal--sheet .modal__panel, .sheet .modal__panel {
    max-width: none;
    max-height: 90vh;
    max-height: 90dvh;
    border-radius: var(--radius-xl) var(--radius-xl) 0 0;
    border-bottom: 0;
    padding-bottom: env(safe-area-inset-bottom);
}
@media (max-width: 640px) {
    .modal { align-items: flex-end; padding: 0; }
    .modal__panel {
        max-width: none;
        max-height: 90vh;
        max-height: 90dvh;
        border-radius: var(--radius-xl) var(--radius-xl) 0 0;
        border-bottom: 0;
        padding-bottom: env(safe-area-inset-bottom);
    }
    .modal__header, .modal__body, .modal__footer { padding-left: var(--sp-4); padding-right: var(--sp-4); }
}