/*
 * signup-dialog.css - the "get notified" modal the footer's signup control
 * opens. A native <dialog>, so the backdrop, the focus trap and Escape are the
 * browser's job rather than ours.
 *
 * Requires shared/tokens.css. Contains no colour of its own.
 * Hard rule: zero em or en dashes anywhere in this file. Hyphens only.
 */

.hv-signup-dialog {
  border: none;
  padding: 0;
  background: transparent;
  color: var(--hv-ink);
  max-width: min(480px, 92vw);
  width: 100%;
  /* Centres both showModal() and the [open] attribute fallback. */
  margin: auto;
  inset: 0;
}
.hv-signup-dialog::backdrop {
  background: var(--hv-scrim);
  backdrop-filter: blur(4px);
}
.hv-signup-dialog[open] {
  animation: hv-signup-in 0.18s ease-out both;
}
@keyframes hv-signup-in {
  from { opacity: 0; transform: translateY(8px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

.hv-signup-form {
  position: relative;
  background:
    radial-gradient(900px 240px at 90% 0%, var(--hv-orange-mist) 0%, var(--hv-orange-clear) 60%),
    linear-gradient(160deg, var(--hv-navy-900) 0%, var(--hv-navy-800) 100%);
  border: 1px solid var(--hv-line-faint);
  box-shadow:
    inset 0 0 0 1px var(--hv-orange-wash),
    var(--hv-shadow-modal);
  border-radius: var(--hv-radius-lg);
  padding: 32px 28px 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  font-family: var(--hv-font-body);
}

.hv-signup-close {
  position: absolute;
  top: 10px;
  right: 14px;
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  border-radius: var(--hv-radius-pill);
  color: var(--hv-ink-dim);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  transition: background var(--hv-transition), color var(--hv-transition);
}
.hv-signup-close:hover,
.hv-signup-close:focus-visible {
  background: var(--hv-fill-hover);
  color: var(--hv-ink);
  outline: none;
}

.hv-signup-heading {
  font-family: var(--hv-font-display);
  font-size: 22px;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.01em;
  margin: 0;
  color: var(--hv-ink);
}

.hv-signup-sub {
  margin: 0 0 8px 0;
  font-size: 14px;
  line-height: 1.5;
  color: var(--hv-ink-dim);
}

.hv-signup-label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--hv-ink-muted);
  margin-top: 4px;
}

.hv-signup-input {
  font: inherit;
  /* 16px or larger, otherwise iOS Safari zooms the page on focus. */
  font-size: 16px;
  color: var(--hv-ink);
  background: var(--hv-field-bg);
  border: 1px solid var(--hv-line-soft);
  border-radius: 10px;
  padding: 12px 14px;
  transition: border-color var(--hv-transition), background var(--hv-transition);
}
.hv-signup-input::placeholder { color: var(--hv-placeholder); }
.hv-signup-input:focus {
  outline: none;
  border-color: var(--hv-orange);
  background: var(--hv-field-bg-focus);
}

/* Empty until the widget renders, and permanently empty when the captcha is
   off, so it must not reserve space of its own. */
.hv-signup-captcha { min-height: 0; margin-top: 4px; }
.hv-signup-captcha:empty { display: none; }

.hv-signup-error {
  font-size: 13px;
  color: var(--hv-error-ink);
  background: var(--hv-error-bg);
  border: 1px solid var(--hv-error-line);
  border-radius: var(--hv-radius-sm);
  padding: 10px 12px;
}

.hv-signup-submit {
  font: inherit;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--hv-ink);
  background: var(--hv-orange);
  border: none;
  border-radius: 10px;
  padding: 12px 16px;
  cursor: pointer;
  transition: transform 0.1s ease, filter var(--hv-transition);
  margin-top: 4px;
}
.hv-signup-submit:hover:not(:disabled) { filter: brightness(1.05); }
.hv-signup-submit:active:not(:disabled) { transform: translateY(1px); }
.hv-signup-submit:disabled { opacity: 0.65; cursor: default; }

.hv-signup-success {
  margin: 0;
  font-size: 13px;
  color: var(--hv-ok-ink);
  background: var(--hv-ok-bg);
  border: 1px solid var(--hv-ok-line);
  border-radius: var(--hv-radius-sm);
  padding: 10px 12px;
}