/* Email forms use the Auth Web brand lockup and Design_System/LAWS.md controls.
   All email routes share these interaction states; primitives come from tokens.css. */
.email-page, .email-page * { box-sizing: border-box; }
.email-page {
  margin: 0; min-height: 100svh; display: grid; place-items: center;
  padding: 24px; background: var(--bb-deep-space); color: var(--bb-white);
  font-family: var(--bb-font-family); line-height: 1.6; color-scheme: dark;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}
.email-page ::selection { color: var(--bb-white); background: rgba(var(--bb-cyan-rgb), var(--bb-line-neutral)); }
.email-card {
  position: relative; z-index: 1; width: min(100%, 460px); padding: 36px 40px;
  border: 1px solid rgba(var(--bb-white-rgb), var(--bb-line-quiet));
  border-radius: var(--bb-radius-card);
  /* Preserve the accepted login card's depth over its moving grid. */
  background: linear-gradient(180deg, rgba(var(--bb-deep-space-rgb), 0.7), rgba(var(--bb-deep-space-rgb), 0.5));
}
.email-brand { display: flex; align-items: center; gap: 8px; color: var(--bb-white); }
.email-brand img { width: 44px; height: 44px; object-fit: contain; flex: 0 0 auto; }
.email-brand-name { font-size: 24px; font-weight: var(--bb-weight-display); letter-spacing: var(--bb-tracking-display); line-height: 1.2; }
.email-card h1 { font-size: 26px; font-weight: var(--bb-weight-display); line-height: 1.25; letter-spacing: var(--bb-tracking-display); margin: 24px 0 4px; text-wrap: balance; }
.email-card p { color: var(--bb-text-secondary); font-size: 13px; margin: 6px 0 24px; }
.email-card .email-address { color: var(--bb-white); overflow-wrap: anywhere; }
.email-card label { display: block; font-size: 11px; font-weight: var(--bb-weight-bold); letter-spacing: var(--bb-tracking-label); text-transform: uppercase; color: var(--bb-text-secondary); margin: 18px 0 6px; }
.email-card input {
  width: 100%; height: 42px; padding: 0 14px;
  border: 1px solid rgba(var(--bb-white-rgb), 0.12);
  border-radius: var(--bb-radius-input); background: var(--bb-surface-none);
  color: var(--bb-white); caret-color: var(--bb-cyan); font: inherit;
  font-size: 14px; font-weight: var(--bb-weight-medium); outline: none;
  transition: border-color var(--bb-ease-state), box-shadow var(--bb-ease-state);
}
.email-card input:hover { border-color: rgba(var(--bb-cyan-rgb), var(--bb-line-strong)); }
.email-card input:focus { border-color: rgba(var(--bb-cyan-rgb), var(--bb-line-active)); box-shadow: var(--bb-glow-cyan); }
.email-action {
  display: inline-flex; justify-content: center; align-items: center; gap: 8px;
  width: 100%; min-height: 38px; padding: 9px 18px;
  border: 1px solid rgba(var(--bb-orange-rgb), var(--bb-line-strong));
  border-radius: var(--bb-radius-pill); color: var(--bb-white); background: var(--bb-surface-none);
  font: inherit; font-size: 13px; line-height: 1.5; font-weight: var(--bb-weight-bold);
  text-decoration: none; text-align: center; cursor: pointer; outline: none;
  transition: transform var(--bb-ease-state), border-color var(--bb-ease-state), box-shadow var(--bb-ease-state), filter var(--bb-ease-state), opacity var(--bb-ease-state);
}
.email-card form > .email-action { margin-top: 20px; }
.email-action:hover, .email-action:focus-visible {
  transform: translateY(var(--bb-motion-up-1));
  border-color: rgba(var(--bb-orange-rgb), var(--bb-line-active));
  box-shadow: var(--bb-glow-orange), var(--bb-shadow-lift);
}
.email-action:active { transform: translateY(0) scale(var(--bb-press-scale)); filter: brightness(0.98); }
.email-action--secondary { border-color: rgba(var(--bb-white-rgb), var(--bb-line-neutral)); font-weight: var(--bb-weight-strong); }
.email-action--secondary:hover, .email-action--secondary:focus-visible { border-color: rgba(var(--bb-white-rgb), var(--bb-line-neutral-hover)); box-shadow: var(--bb-glow-white), var(--bb-shadow-lift); }
.email-action:disabled { cursor: wait; opacity: var(--bb-line-card); transform: none; box-shadow: none; }
.email-card details { margin-top: 26px; }
.email-card summary { list-style: none; }
.email-card summary::-webkit-details-marker { display: none; }
.email-card summary svg { flex: 0 0 auto; transition: transform var(--bb-ease-move); }
.email-card details[open] summary svg { transform: rotate(90deg); }
.email-footer { display: grid; gap: 12px; margin-top: 24px; }
.email-card .email-hint { font-size: 13px; margin: 8px 0 0; }
.email-card .email-status { padding: 12px 14px; border: 1px solid rgba(var(--bb-cyan-rgb), var(--bb-line-strong)); border-radius: var(--bb-radius-input); color: var(--bb-white); }
.email-card .email-error { border-color: rgba(var(--bb-error-rgb), var(--bb-line-strong)); }
.email-verification { margin-bottom: 24px; }
.email-verification p { line-height: 1.6; margin: 12px 0 18px; }
[dir="rtl"] .email-card label { letter-spacing: 0; }
@media (max-width: 380px) { .email-page { padding-inline: 16px; } .email-card { padding: 28px 24px; } .email-brand-name { font-size: 21px; } }
@media (max-height: 680px) { .email-page { place-items: start center; padding-block: 16px 24px; } }
@media (prefers-reduced-motion: reduce) { .email-card summary svg { transition: none; } }

.email-page #bb-bg { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }

.email-verification .bb-btn { margin-top: 16px; }