/* Generic <dialog> shell + open/close chrome, reusable by any dialog on the
   page (driven by markup: dialog.modal, .modal-header/.modal-close,
   optional .modal-sub, and the [data-open-dialog]/[data-close-dialog]
   attributes wired up in dialogs.js). Feature-specific content (form
   fields, buttons for a particular dialog's content) lives in its own
   stylesheet instead, e.g. request-forms.css. */

dialog.modal {
    /* Native <dialog> centers itself via the UA stylesheet's `margin: auto`,
       but the theme's global `* { margin: 0 }` reset (_elements.sass) kills
       that trick, so centering is done explicitly here instead. */
    position: fixed;
    inset: 0;
    margin: auto;
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-xl);
    background: var(--glass-hover);
    box-shadow: var(--shadow-strong);
    color: var(--text-primary);
    padding: var(--space-lg);
    width: min(920px, 92vw);
    max-height: min(90vh, 720px);
    /* Mobile browsers' address/toolbar chrome shrinks the real visible area
       without changing `vh` (which tracks the largest possible viewport),
       so the dialog can render taller than what's actually on screen and
       get clipped top/bottom. `dvh` tracks the real, current viewport;
       falls back to the `vh` line above on browsers that don't support it. */
    max-height: min(90dvh, 720px);
    overflow: auto;
    /* z-index is not load-bearing here: a showModal() dialog renders in the
       browser's top layer and always paints above regular DOM regardless of
       z-index. Set anyway to keep the design-token vocabulary consistent. */
    z-index: var(--z-modal);
}

/* Smaller variant for dialogs that hold a single short form rather than a
   full tile-grid (e.g. the request-user/request-book dialogs). */
dialog.modal.modal-sub {
    width: min(480px, 92vw);
}

dialog.modal:focus {
    /* Focused programmatically on open (see dialogs.js) so the close button
       doesn't grab the default focus ring instead - not a real interactive
       control itself, so no visible outline needed here. */
    outline: none;
}

@supports (backdrop-filter: blur(12px)) {
    dialog.modal {
        backdrop-filter: var(--blur-strength);
        -webkit-backdrop-filter: var(--blur-strength);
    }
}

dialog.modal::backdrop {
    background: rgba(10, 10, 10, 0.7);
}

dialog.modal[open] {
    display: flex;
    flex-direction: column;
    gap: var(--space-lg);
}

.modal-header {
    position: relative;
    text-align: center;
}

.modal-header h2 {
    margin: 0;
}

.modal-close {
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: var(--text-secondary);
    font-size: var(--text-base);
    line-height: 1;
    cursor: pointer;
    padding: var(--space-xs);
}

.modal-close:hover {
    color: var(--text-primary);
}

/* .tile is normally an <a>; a <button class="tile"> needs a small reset
   the theme doesn't provide for bare buttons. Reused so dialog trigger
   buttons (e.g. the ones inside listen-dialog) look identical to the
   splash page's own tiles. */
button.tile {
    appearance: none;
    -webkit-appearance: none;
    font: inherit;
    text-align: inherit;
    cursor: pointer;
}

/* Generic pill-style action button, for form submits or similar - .btn
   (a <button>) matching a plain <a>'s rendered height requires giving both
   an explicit height rather than relying on padding/line-height, since
   <button> and <a> can compute text metrics slightly differently even with
   identical CSS (most visible on mobile Safari). */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 2.75rem;
    padding: 0 var(--space-md);
    font: inherit;
    line-height: 1.2;
    text-decoration: none;
    color: var(--text-primary);
    border-radius: var(--radius-pill);
    border: 1px solid var(--glass-border-hover);
    background: var(--glass-active);
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
}

.btn:hover {
    background: var(--glass-hover);
}