/* ──────────────────────────────────────────────────────────
   modal.css — MSNYC shared modal.

   Pairs with /js/modal.js (window.MSNYCModal). Forms open here.

   DELIBERATELY does NOT close on a backdrop click — a stray
   click outside the card must never dismiss a half-filled form.
   Close via the ✕ button, a Cancel button, or Escape only, so
   backing out is always intentional and the renter keeps their
   place on the page underneath.

   Token refs carry hex fallbacks so it renders without tokens.css.
   ────────────────────────────────────────────────────────── */
.msnyc-modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(26, 26, 26, 0.55);
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 40px 16px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    z-index: 9000;
    animation: msnyc-modal-fade 0.16s ease;
}
@keyframes msnyc-modal-fade {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

.msnyc-modal {
    position: relative;
    width: 100%;
    max-width: 680px;
    margin: auto;
    background: var(--ed-surface, #fff);
    border-radius: 4px;
    box-shadow: var(--sh-modal, 0 20px 60px rgba(0, 0, 0, 0.3));
    animation: msnyc-modal-rise 0.18s ease;
}
@keyframes msnyc-modal-rise {
    from {
        transform: translateY(8px);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}
.msnyc-modal--sm {
    max-width: 460px;
}
.msnyc-modal--lg {
    max-width: 860px;
}

.msnyc-modal__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding: 20px 22px 14px;
    border-bottom: 1px solid var(--ed-border-soft, rgba(0, 0, 0, 0.06));
}
.msnyc-modal__title {
    font-family: var(--font-heading, 'Cormorant Garamond', Georgia, serif);
    font-size: 1.5rem;
    font-weight: 600;
    line-height: 1.15;
    margin: 0;
    color: var(--ed-ink, #1a1a1a);
}
.msnyc-modal__subtitle {
    margin: 4px 0 0;
    font-size: 0.82rem;
    color: #6b6b6b;
    line-height: 1.4;
}
.msnyc-modal__subtitle a {
    color: var(--ed-gold, #a08830);
    text-decoration: none;
    font-weight: 500;
}
.msnyc-modal__subtitle a:hover {
    text-decoration: underline;
}

.msnyc-modal__close {
    flex: none;
    width: 34px;
    height: 34px;
    border: none;
    background: transparent;
    color: #8a8470;
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
    border-radius: 50%;
    transition:
        background 0.15s,
        color 0.15s;
}
.msnyc-modal__close:hover {
    background: rgba(0, 0, 0, 0.06);
    color: var(--ed-ink, #1a1a1a);
}
.msnyc-modal__close:focus-visible {
    outline: 2px solid var(--ed-gold, #a08830);
    outline-offset: 2px;
}

.msnyc-modal__body {
    padding: 18px 22px 22px;
}

/* In a modal the card IS the surface, so strip the box chrome off
   nested .form-sections to avoid a box-in-box look. */
.msnyc-modal__body .form-section {
    background: transparent;
    border: none;
    padding: 0;
    margin: 0 0 18px;
}
.msnyc-modal__body .form-section:last-of-type {
    margin-bottom: 8px;
}
.msnyc-modal__body .form-section h3 {
    font-size: 1.05rem;
}

.apply-modal-success {
    text-align: center;
    padding: 14px 6px 24px;
    line-height: 1.6;
    color: var(--ed-ink, #1a1a1a);
}
.apply-modal-success b {
    font-family: var(--font-heading, 'Cormorant Garamond', Georgia, serif);
    font-size: 1.15rem;
}

@media (max-width: 680px) {
    .msnyc-modal-backdrop {
        padding: 0;
    }
    .msnyc-modal {
        max-width: none;
        min-height: 100%;
        border-radius: 0;
    }
    .msnyc-modal__title {
        font-size: 1.3rem;
    }
}