/*
 * Email chooser dialog (#653) — the small card email-chooser.js opens over any
 * mailto: link. Its own stylesheet, like explore-reminder.css, so the theme's
 * compiled Tailwind bundle need not be rebuilt for it; the shapes follow the
 * contact modal's .overlay/.modal in app.src.css, under the .nht-mailer-*
 * prefix so neither card's rules can reach the other.
 *
 * Above the contact modal (z 90), the login card (z 95) and the funnel's
 * overlays (up to 120): the "Prefer email?" link inside the contact modal,
 * or a mailto: link in a staff-edited consent or Terms text, opens this
 * dialog on top of whatever it was clicked in.
 */
.nht-mailer-overlay { position: fixed; inset: 0; background: rgba(46,38,32,.42); backdrop-filter: blur(3px); display: none; align-items: center; justify-content: center; z-index: 130; padding: 24px; }
.nht-mailer-overlay.on { display: flex; }
.nht-mailer { background: var(--paper, #FFFCF7); border: 1px solid var(--line, #E4D7C5); border-radius: 22px; width: 100%; max-width: 420px; padding: 30px; box-shadow: 0 40px 90px -40px rgba(46,38,32,.6); position: relative; transform: translateY(12px); opacity: 0; transition: .28s; }
.nht-mailer-overlay.on .nht-mailer { transform: translateY(0); opacity: 1; }
.nht-mailer-close { position: absolute; top: 18px; right: 18px; width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--line, #E4D7C5); background: var(--cream, #FAF4EC); cursor: pointer; display: flex; align-items: center; justify-content: center; color: var(--ink-soft, #5C5247); transition: .18s; }
.nht-mailer-close:hover { background: var(--cream-2, #F2E8DA); color: var(--ink, #2E2620); }
.nht-mailer .ey { display: block; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; font-size: 11px; color: var(--terracotta, #C2683F); margin-bottom: 8px; padding-right: 40px; }
.nht-mailer h3 { font-family: var(--display); font-size: 22px; line-height: 1.2; margin: 0 0 12px; padding-right: 40px; }
/* The address wraps anywhere rather than overflowing a 390px card. */
.nht-mailer-address { font-size: 16px; font-weight: 600; color: var(--ink, #2E2620); background: var(--cream, #FAF4EC); border: 1px solid var(--line, #E4D7C5); border-radius: 11px; padding: 12px 14px; margin: 0 0 18px; overflow-wrap: anywhere; word-break: break-word; }
.nht-mailer-actions { display: grid; gap: 10px; }
.nht-mailer-actions .nht-btn { width: 100%; justify-content: center; text-align: center; }
@media (max-width: 480px) {
  .nht-mailer-overlay { padding: 16px; }
  .nht-mailer { padding: 24px 18px; }
}