/* Encryption onboarding — visual layer for the 5-screen post-verify stage.
   Self-contained dark scope. Deliberately does NOT inherit from .sf-auth /
   .sf-plan; this stage owns its own type + spacing + buttons so the security
   moment reads distinct from the marketing/auth chrome around it. */

.sf-screen--encryption {
  background: #07070b;
  color: #f5f4f0;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100%;
  padding: 32px 20px calc(32px + env(safe-area-inset-bottom));
  font-family: 'Geist', -apple-system, BlinkMacSystemFont, 'SF Pro Display', system-ui, sans-serif;
}

.eo-card {
  width: 100%;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 22px;
}
.eo-card--narrow { max-width: 520px; }
.eo-card--wide   { max-width: 600px; }

/* ---------- Step indicator ---------- */
.eo-steps { display: flex; gap: 8px; }
.eo-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: rgba(245, 244, 240, 0.16);
  transition: background 220ms ease;
}
.eo-dot--active { background: #FA3A05; }
.eo-dot--done   { background: rgba(250, 58, 5, 0.45); }

/* ---------- Logo + icon plate ---------- */
.eo-mark {
  width: 56px; height: 56px;
  border-radius: 14px;
  background: #FA3A05;
  color: #07070b;
  font-weight: 800; font-size: 28px;
  letter-spacing: -0.02em;
  display: grid; place-items: center;
}
.eo-iconwrap {
  width: 56px; height: 56px;
  border-radius: 14px;
  border: 1px solid rgba(245, 244, 240, 0.12);
  background: rgba(245, 244, 240, 0.02);
  color: #f5f4f0;
  display: grid; place-items: center;
}

/* ---------- Headings + body ---------- */
/* v0.2.0.152: encryption-onboarding title uses the holo gradient + Geist
   to match the rest of the brand system (signin, privacy, terms, paywall, etc). */
.eo-title {
  font-family: 'Geist', -apple-system, system-ui, sans-serif;
  font-size: 36px;
  line-height: 1.1;
  font-weight: 500;
  letter-spacing: -0.02em;
  margin: 0;
  text-wrap: balance;
  position: relative; display: inline-block;
  background:
    linear-gradient(105deg, transparent 25%, rgba(255,255,255,0.55) 46%, rgba(255,255,255,0.95) 50%, rgba(255,255,255,0.55) 54%, transparent 75%),
    linear-gradient(110deg,
      oklch(0.82 0.13 250) 0%, oklch(0.88 0.10 200) 12%,
      oklch(0.92 0.10 110) 24%, oklch(0.85 0.18 70) 34%,
      oklch(0.80 0.20 25) 44%, oklch(0.78 0.22 340) 55%,
      oklch(0.80 0.18 295) 67%, oklch(0.86 0.13 220) 78%,
      oklch(0.90 0.12 175) 88%, oklch(0.82 0.13 250) 100%);
  background-size: 220% 100%, 260% 100%;
  background-position: -120% 0, 0% 50%;
  -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
  animation: sv-holo-flow-eo 7.5s linear infinite;
}
@keyframes sv-holo-flow-eo {
  0%   { background-position: -130% 0,   0% 50%; }
  100% { background-position:  130% 0, 200% 50%; }
}
@media (prefers-reduced-motion: reduce) {
  .eo-title { animation: none; background-position: 0 0, 50% 50%; }
}
.eo-sub {
  font-size: 15px;
  color: rgba(245, 244, 240, 0.66);
  margin: 0;
  max-width: 44ch;
  line-height: 1.5;
}
.eo-status {
  font-size: 14px;
  color: rgba(245, 244, 240, 0.66);
  margin: -4px 0 0;
  min-height: 1.6em;
}
.eo-error {
  font-size: 13px;
  color: #ffb86b;
  margin: 0;
  min-height: 1.4em;
}
.eo-fineprint {
  font-size: 13px;
  color: rgba(245, 244, 240, 0.55);
  max-width: 48ch;
  line-height: 1.55;
  margin: 0;
}

/* ---------- Bullets (screen 1) ---------- */
.eo-bullets {
  list-style: none;
  margin: 0; padding: 0;
  display: flex;
  flex-direction: column;
  gap: 18px;
  width: 100%;
  text-align: left;
}
.eo-bullets li {
  display: flex;
  gap: 14px;
  align-items: flex-start;
}
.eo-bullets__dot {
  flex: 0 0 auto;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #FA3A05;
  margin-top: 9px;
}
.eo-bullets h3 {
  font-size: 15px;
  font-weight: 600;
  margin: 0 0 4px;
  color: #f5f4f0;
}
.eo-bullets p {
  font-size: 14px;
  color: rgba(245, 244, 240, 0.62);
  margin: 0;
  line-height: 1.5;
}

/* ---------- Buttons ---------- */
.eo-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 999px;
  font-family: inherit;
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0.01em;
  cursor: pointer;
  transition: transform 120ms ease, background 220ms ease, opacity 220ms ease;
  font-variant-numeric: tabular-nums;
}
.eo-btn--primary {
  background: #FA3A05;
  color: #fff;
  padding: 14px 28px;
  margin-top: 4px;
}
.eo-btn--primary:hover { transform: translateY(-1px); }
.eo-btn--primary:disabled { opacity: 0.5; cursor: default; transform: none; }
.eo-btn:focus-visible { outline: 2px solid #FA3A05; outline-offset: 3px; }

.eo-btn-ghost {
  background: transparent;
  color: rgba(245, 244, 240, 0.85);
  border: 1px solid rgba(245, 244, 240, 0.16);
  border-radius: 999px;
  padding: 10px 18px;
  font-family: inherit; font-size: 13px; font-weight: 500;
  cursor: pointer;
  transition: border-color 200ms ease, color 200ms ease;
}
.eo-btn-ghost:hover { border-color: rgba(245, 244, 240, 0.36); color: #f5f4f0; }
.eo-btn-ghost:focus-visible { outline: 2px solid #FA3A05; outline-offset: 2px; }

.eo-link {
  background: none;
  border: none;
  color: rgba(245, 244, 240, 0.55);
  font-family: inherit;
  font-size: 13px;
  cursor: pointer;
  padding: 6px 0;
}
.eo-link:hover { color: #f5f4f0; }
.eo-link:focus-visible { outline: 2px solid #FA3A05; outline-offset: 2px; border-radius: 4px; }

.eo-secondary-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
}

/* ---------- Recovery grid (screen 3) ---------- */
.recovery-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  width: 100%;
}
.recovery-word {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  padding: 18px 16px;
  border: 1px solid rgba(245, 244, 240, 0.12);
  border-radius: 14px;
  background: rgba(245, 244, 240, 0.02);
  font-family: 'SF Mono', ui-monospace, Menlo, Consolas, monospace;
}
.recovery-word__num {
  font-size: 11px;
  letter-spacing: 0.08em;
  color: rgba(250, 58, 5, 0.85);
}
.recovery-word__text {
  font-size: 18px;
  font-weight: 500;
  color: #f5f4f0;
  letter-spacing: 0.01em;
}

@media (max-width: 540px) {
  .recovery-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ---------- Verify input (screen 4) ---------- */
.eo-verify-form {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.verify-input {
  width: 100%;
  max-width: 360px;
  padding: 16px 18px;
  background: rgba(245, 244, 240, 0.04);
  border: 1px solid rgba(245, 244, 240, 0.16);
  border-radius: 14px;
  color: #f5f4f0;
  font-family: 'SF Mono', ui-monospace, Menlo, Consolas, monospace;
  font-size: 18px;
  letter-spacing: 0.02em;
  text-align: center;
  outline: none;
  transition: border-color 180ms ease, box-shadow 180ms ease;
}
.verify-input:focus {
  border-color: rgba(250, 58, 5, 0.55);
  box-shadow: 0 0 0 3px rgba(250, 58, 5, 0.18);
}
.verify-input--error {
  border-color: #ffb86b;
}

/* ---------- Success (screen 5) ---------- */
.checkmark-pulse {
  width: 76px;
  height: 76px;
  border-radius: 50%;
  background: rgba(93, 211, 158, 0.14);
  border: 1.5px solid #5DD39E;
  color: #5DD39E;
  display: grid;
  place-items: center;
  position: relative;
  animation: eoPulse 1.6s ease-out infinite;
}
@keyframes eoPulse {
  0%   { box-shadow: 0 0 0 0 rgba(93, 211, 158, 0.4); }
  70%  { box-shadow: 0 0 0 18px rgba(93, 211, 158, 0); }
  100% { box-shadow: 0 0 0 0 rgba(93, 211, 158, 0); }
}

@media (prefers-reduced-motion: reduce) {
  .checkmark-pulse { animation: none; }
  .eo-btn--primary { transition: none; }
}

/* ---------- Toast ---------- */
.eo-toast {
  min-height: 22px;
  font-size: 12px;
  color: rgba(93, 211, 158, 0.9);
  letter-spacing: 0.02em;
}