/* ============================================================
   ALPHA STRIKE — MODAL COMPONENT
   Version: 1.0
   Status: Locked
   ============================================================ */


/* ============================================================
   1. DEMO FOUNDATION
   ============================================================ */

.alpha-modal-demo {
    max-width: var(--alpha-container-max);
    margin: 0 auto;
    padding: var(--alpha-spacing-8);
    color: var(--alpha-text-primary);
    font-family: var(--alpha-font-body);
    font-size: var(--alpha-font-size-body);
    line-height: var(--alpha-line-height-body);
}

.alpha-modal-demo__header {
    margin-bottom: var(--alpha-spacing-8);
}

.alpha-modal-demo__eyebrow {
    margin: 0 0 var(--alpha-spacing-2);
    color: var(--alpha-text-accent);
    font-size: var(--alpha-font-size-caption);
    letter-spacing: var(--alpha-letter-spacing-label);
}

.alpha-modal-demo__title {
    margin: 0 0 var(--alpha-spacing-3);
    color: var(--alpha-text-primary);
    font-family: var(--alpha-font-display);
    font-size: var(--alpha-font-size-h1);
    line-height: var(--alpha-line-height-heading);
}

.alpha-modal-demo__description {
    max-width: 720px;
    margin: 0;
    color: var(--alpha-text-secondary);
}


/* ============================================================
   2. MODAL OVERLAY
   ============================================================ */

.alpha-modal {
    position: fixed;
    inset: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: var(--alpha-spacing-6);

    background: var(--alpha-overlay-default);

    z-index: 1000;

    /* Added 2026-08-12: open/close were instant (a raw [hidden] toggle
       has no room for a transition). components/modal/modal.js now
       adds/removes .alpha-modal--visible a frame after removing
       [hidden] (and removes it again before re-adding [hidden] on
       close), giving these two rules something to animate. */
    opacity: 0;
    transition: opacity var(--alpha-motion-duration-normal) var(--alpha-motion-ease-standard);
}

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


/* ============================================================
   3. MODAL DIALOG
   ============================================================ */

.alpha-modal__dialog {
    width: min(100%, 560px);

    background: var(--alpha-surface-primary);
    border: var(--alpha-border-thin) solid var(--alpha-border-default);
    border-radius: var(--alpha-radius-lg);

    box-shadow: var(--alpha-shadow-strong);

    overflow: hidden;

    /* Paired with .alpha-modal's opacity transition above - the dialog
       itself settles in from a slight scale + vertical offset rather
       than just fading, so opening reads as arriving, not blinking on. */
    transform: scale(0.96) translateY(8px);
    transition: transform var(--alpha-motion-duration-normal) var(--alpha-motion-ease-enter);
}

.alpha-modal--visible .alpha-modal__dialog {
    transform: scale(1) translateY(0);
}


/* ============================================================
   4. MODAL HEADER
   ============================================================ */

.alpha-modal__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;

    gap: var(--alpha-spacing-4);

    padding: var(--alpha-spacing-6);

    border-bottom: var(--alpha-border-thin) solid var(--alpha-border-subtle);
}

.alpha-modal__heading {
    min-width: 0;
}

.alpha-modal__eyebrow {
    margin: 0 0 var(--alpha-spacing-2);

    color: var(--alpha-text-accent);

    font-size: var(--alpha-font-size-caption);
    letter-spacing: var(--alpha-letter-spacing-label);
}

.alpha-modal__title {
    margin: 0;

    color: var(--alpha-text-primary);

    font-family: var(--alpha-font-display);
    font-size: var(--alpha-font-size-h3);
    line-height: var(--alpha-line-height-heading);
}


/* ============================================================
   5. CLOSE CONTROL
   ============================================================ */

.alpha-modal__close {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    flex: 0 0 auto;

    width: 36px;
    height: 36px;

    padding: 0;

    background: transparent;
    border: var(--alpha-border-thin) solid transparent;
    border-radius: var(--alpha-radius-sm);

    color: var(--alpha-text-secondary);

    font-family: var(--alpha-font-body);
    font-size: var(--alpha-font-size-h3);
    line-height: 1;

    cursor: pointer;

    transition:
        background var(--alpha-motion-duration-fast) var(--alpha-motion-ease-standard),
        color var(--alpha-motion-duration-fast) var(--alpha-motion-ease-standard),
        border-color var(--alpha-motion-duration-fast) var(--alpha-motion-ease-standard);
}

.alpha-modal__close:hover {
    background: var(--alpha-surface-secondary);
    color: var(--alpha-text-primary);
}

.alpha-modal__close:active {
    background: var(--alpha-surface-tertiary);
    transform: translateY(1px);
}


/* ============================================================
   6. MODAL BODY
   ============================================================ */

.alpha-modal__body {
    padding: var(--alpha-spacing-6);

    color: var(--alpha-text-secondary);
}

.alpha-modal__body p {
    margin: 0;
}

.alpha-modal__body p + p {
    margin-top: var(--alpha-spacing-3);
}


/* ============================================================
   7. MODAL FOOTER
   ============================================================ */

.alpha-modal__footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;

    gap: var(--alpha-spacing-3);

    padding: var(--alpha-spacing-5) var(--alpha-spacing-6);

    background: var(--alpha-surface-secondary);

    border-top: var(--alpha-border-thin) solid var(--alpha-border-subtle);
}


/* ============================================================
   8. FOCUS
   ============================================================ */

.alpha-modal__close:focus-visible {
    outline: var(--alpha-border-medium) solid var(--alpha-interactive-focus);
    outline-offset: var(--alpha-spacing-1);
}


/* ============================================================
   9. REDUCED MOTION
   ============================================================ */

@media (prefers-reduced-motion: reduce) {

    .alpha-modal__close {
        transition: none;
    }

    .alpha-modal__close:active {
        transform: none;
    }

    .alpha-modal,
    .alpha-modal__dialog {
        transition: none;
    }
}


/* ============================================================
   10. RESPONSIVE
   ============================================================ */

@media (max-width: 640px) {

    .alpha-modal-demo {
        padding: var(--alpha-spacing-4);
    }

    .alpha-modal {
        align-items: flex-end;
        padding: var(--alpha-spacing-3);
    }

    .alpha-modal__dialog {
        width: 100%;
        border-radius: var(--alpha-radius-md);
    }

    .alpha-modal__header,
    .alpha-modal__body {
        padding: var(--alpha-spacing-5);
    }

    .alpha-modal__footer {
        padding: var(--alpha-spacing-4) var(--alpha-spacing-5);
    }

    .alpha-modal__footer .alpha-button {
        flex: 1;
    }
}