/* ============================================================
   components/newsletter.css — .dd-newsletter
   The inline mailing-list signup: one email field and a round arrow.
   The footer carries one on every page, and the budget note carries
   a second under every price (#352), so it is a component rather
   than footer chrome.

   Markup: partials/_newsletter_form.html (never written out by hand —
   features/forms/newsletter.js wires every form[data-dd-newsletter],
   and reads the pieces below by class).
     <form class="dd-newsletter" data-dd-newsletter="<source>">
       <div class="dd-newsletter__row">
         <input class="dd-newsletter__input" type="email">
         <button class="dd-btn … dd-newsletter__button">
       </div>
       <p class="dd-newsletter__msg dd-newsletter__msg--ok" hidden>
       <p class="dd-newsletter__msg dd-newsletter__msg--err" hidden>
     </form>
   ============================================================ */

.dd-newsletter__row {
  display: flex;
  gap: var(--space-2);
  align-items: stretch;
}

.dd-newsletter__input {
  flex: 1 1 auto;
  min-width: 0;
  padding: var(--space-3) var(--space-4);
  font-family: var(--font-body);
  font-size: var(--fs-small);
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  transition: border-color var(--dur-base) var(--ease-soft),
              box-shadow var(--dur-base) var(--ease-soft);
}

.dd-newsletter__input::placeholder {
  color: var(--text-muted);
}

.dd-newsletter__input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--tint-20);
}

.dd-newsletter__button {
  flex-shrink: 0;
}

.dd-newsletter__msg {
  font-size: var(--fs-small);
  line-height: var(--lh-snug);
}

.dd-newsletter__msg--ok {
  color: var(--success);
}

.dd-newsletter__msg--err {
  color: var(--danger);
}

.dd-newsletter__msg--err a {
  color: var(--link);
  text-decoration: underline;
}

@media (prefers-reduced-motion: reduce) {
  .dd-newsletter__input {
    transition: none;
  }
}