/* ==========================================================================
   Email capture (docs/05-email-capture.md)

   One component on five surfaces. The surface changes the field, the button
   and the success panel; everything else holds still, so swapping surface is
   a token change rather than a restyle.
   ========================================================================== */

.ec {
  --ec-field-bg: var(--input-bg);
  --ec-field-border: var(--input-border);
  --ec-panel-bg: var(--bg-2);
  --ec-panel-border: var(--line);
  --ec-panel-text: var(--text);
  --ec-muted: var(--muted);

  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  max-width: 560px;
}

/* ---------- Heading, intro ---------- */

.ec__heading {
  font-size: var(--fs-band-sub);
  line-height: var(--lh-band-sub);
}

.ec__intro {
  font-size: var(--fs-body);
  line-height: var(--lh-lead);
  color: var(--ec-muted);
}

/* ---------- Form ---------- */

.ec__form {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.ec__label {
  font-weight: 700;
  font-size: var(--fs-small);
  line-height: var(--lh-small);
}

/* Honeypot. Kept out of the accessibility tree and off screen rather than
   display:none, which some bots detect and skip. */
.ec__hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Below 500px the field sits above a full-width button. The component is
   often narrower than the viewport, so this is a container query, not a
   media query: it responds to the space the component actually has. */
.ec__row {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.ec__field {
  flex: 1 1 auto;
  min-width: 0;
  height: 56px;
  padding-inline: 18px;
  background: var(--ec-field-bg);
  color: var(--text);
  border: var(--border) solid var(--ec-field-border);
  border-radius: var(--radius);
  font-size: 20px;
}

.ec__field::placeholder {
  color: var(--ec-muted);
  opacity: 1;
}

.ec__field:disabled {
  opacity: .65;
  cursor: not-allowed;
}

.ec__field[aria-invalid="true"] {
  border-color: var(--error);
}

.ec__submit { flex: 0 0 auto; }

@container ec (min-width: 500px) {
  .ec__row { flex-direction: row; }
  .ec__field { height: 60px; }
  .ec__submit { min-height: 60px; }
}

/* The container query above needs a named container; @container is ignored
   by engines that do not support it, and the stacked layout is the fallback. */
.ec { container: ec / inline-size; }

/* ---------- Notify variant ---------- */

.ec__notify { width: 100%; }
.ec__bell { font-size: 24px; line-height: 1; }

/* ---------- Spinner ---------- */

.ec__spinner {
  width: 20px;
  height: 20px;
  border: 3px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  animation: ec-spin .9s linear infinite;
}

@keyframes ec-spin { to { transform: rotate(360deg); } }

/* Decorative: under reduced motion it goes, and the "Sending…" text carries
   the meaning on its own. */
@media (prefers-reduced-motion: reduce) {
  .ec__spinner { display: none; }
}

/* ---------- Error ---------- */

.ec__error {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  font-weight: 700;
  font-size: 17px;
  line-height: 1.4;
  color: var(--error);
}

.ec__error-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  flex: 0 0 auto;
  border: 2px solid currentColor;
  border-radius: 50%;
  font-size: 14px;
  line-height: 1;
}

/* ---------- Trust line ---------- */

.ec__trust,
.ec__parent {
  font-size: var(--fs-small);
  line-height: var(--lh-small);
  color: var(--ec-muted);
}

.ec__trust a {
  /* A 16px link needs a bigger hit area than its text box. */
  display: inline-block;
  padding-block: 4px;
  text-decoration: underline;
}

/* ---------- Success / already panel ---------- */

.ec__panel {
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);
  padding: 20px;
  background: var(--ec-panel-bg);
  color: var(--ec-panel-text);
  border: var(--border) solid var(--ec-panel-border);
  box-shadow: 5px 5px 0 var(--pink);
}

.ec__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  flex: 0 0 auto;
  background: var(--ok);
  color: var(--ink);
  font-size: 24px;
  line-height: 1;
}

.ec__panel-title {
  font-size: 34px;
  line-height: .95;
}

.ec__panel-body {
  margin-top: var(--space-2);
  font-size: var(--fs-body-s);
  line-height: var(--lh-body-s);
  /* An address can be long and must not push the panel wider than the page. */
  overflow-wrap: anywhere;
}

.ec__again {
  margin-top: var(--space-3);
  padding-block: 4px;
  font-weight: 700;
  font-size: var(--fs-small);
  color: inherit;
  text-decoration: underline;
  cursor: pointer;
}

/* ==========================================================================
   Surfaces
   ========================================================================== */

/* Pink band: ink fill with white text, yellow shadow. */
.ec--pink {
  --ec-field-bg: var(--white);
  --ec-field-border: var(--ink);
  --ec-panel-bg: var(--ink);
  --ec-panel-border: var(--ink);
  --ec-panel-text: var(--white);
  --ec-muted: var(--ink);
  color: var(--ink);
}

.ec--pink .ec__field { color: var(--ink); }
.ec--pink .ec__panel { box-shadow: 5px 5px 0 var(--yellow); }
.ec--pink .ec__error { color: var(--ink); }

/* Purple band: white-bordered field, yellow button with an ink shadow.
   Purple never carries ink text, so everything here is white or yellow. */
.ec--purple {
  --ec-field-bg: var(--white);
  --ec-field-border: var(--white);
  --ec-panel-bg: var(--ink);
  --ec-panel-border: var(--ink);
  --ec-panel-text: var(--white);
  --ec-muted: var(--white);
  color: var(--white);
}

.ec--purple .ec__field { color: var(--ink); }
.ec--purple .ec__panel { box-shadow: 5px 5px 0 var(--ink); }
.ec--purple .ec__error { color: var(--yellow); }

/* Blurped: pills, rounded panel, mint badge, coral shadow. */
.ec--teen,
.ec--teen-dark {
  --ec-panel-border: var(--teen-ink);
}

/* Cream ground: the component's own text must flip to ink, or the heading,
   label and trust line inherit the dark-mode light text and vanish. */
.ec--teen {
  --ec-field-bg: var(--white);
  --ec-field-border: var(--teen-ink);
  --ec-panel-bg: var(--white);
  --ec-panel-text: var(--teen-ink);
  --ec-muted: var(--slate);
  color: var(--teen-ink);
}

.ec--teen .ec__field { color: var(--teen-ink); }

.ec--teen-dark {
  --ec-field-bg: var(--teen-card);
  --ec-field-border: var(--cream);
  --ec-panel-bg: var(--bg-2);
  --ec-panel-text: var(--text);
}

.ec--teen-brand .ec__field,
.ec--teen-brand .ec__panel {
  border-width: var(--border-teen);
  border-radius: var(--radius-teen-card);
}

.ec--teen-brand .ec__field { border-radius: var(--radius-teen); }

.ec--teen-brand .ec__heading,
.ec--teen-brand .ec__panel-title {
  font-family: var(--font-teen), var(--font-display);
  text-transform: none;
}

.ec--teen-brand .ec__panel {
  box-shadow: 5px 5px 0 var(--coral);
}

.ec--teen-brand .ec__badge {
  background: var(--mint);
  border-radius: 50%;
}