/* Email confirmation pages (forwarding_verified, etc.).
   Replaces oversized inline-style attributes the inline-style scanner
   was flagging on web/email/forwarding_verified.html. */

.email-confirm-wrap {
  max-width: 540px;
  margin: 4rem auto;
  padding: 2rem;
}

.email-confirm-card {
  background: var(--c-surface, #fff);
  border: 1px solid var(--c-border, #e5e9f0);
  border-radius: var(--radius-lg, 16px);
  padding: 22px 24px;
  box-shadow: var(--shadow-1, 0 6px 16px rgba(15,23,42,0.06));
  border-left: 4px solid var(--c-indigo, #14B8A6);
}

.email-confirm-card h1 {
  font-family: var(--font-display, ui-serif), Georgia, serif;
  font-size: 1.5rem;
  font-weight: 650;
  margin: 0 0 0.5rem;
  color: var(--c-ink, #0F172A);
  letter-spacing: -0.005em;
}

.email-confirm-card p {
  margin: 0 0 1rem;
  color: var(--c-ink, #0F172A);
  line-height: 1.55;
}

.email-confirm-card p.muted {
  color: var(--c-ink-soft, #475569);
  font-size: 0.875rem;
  margin: 0;
}

/* Status pip in front of the heading: success / failure variants share
   the geometry and only swap the colour mix + glyph colour. */
.email-confirm-pip {
  display: inline-grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 10px;
  font-weight: 900;
  vertical-align: middle;
  margin-right: 8px;
}

.email-confirm-pip--ok {
  background: color-mix(in srgb, var(--c-lime, #A3E635) 22%, var(--c-surface, #fff));
  color: var(--c-lime-text, #4D7C0F);
}

.email-confirm-pip--fail {
  background: color-mix(in srgb, var(--c-error, #EF4444) 20%, var(--c-surface, #fff));
  color: var(--c-error, #EF4444);
}

.email-confirm-actions {
  margin: 1.5rem 0 0;
}

.btn.email-confirm-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: 10px;
  background: var(--c-indigo, #14B8A6);
  color: #fff;
  text-decoration: none;
  font-weight: 700;
  font-size: 13px;
  box-shadow: 0 4px 12px color-mix(in srgb, var(--c-indigo, #14B8A6) 30%, transparent);
}