/* ============================================================================
   /home/ LOGGED-OUT sign-in gate — slate redesign (2026-06-08)

   The signed-in dashboard (/home/) is entirely account-scoped, so a logged-out
   visitor has nothing to render. Instead of the old plain white "Welcome" card
   they get a minimal, on-brand SIGN-IN GATE: one centered card over a calm
   scripture backdrop, wrapped in the shared marketing nav + footer (the new
   chrome). Not a marketing page — a gate that looks like the rest of the slate
   redesign.

   Scoped under `.mv-root .ho-*` so the slate tokens (set by .theme-light /
   .theme-dark on the wrapper) resolve. Tokens only — no hardcoded color hex.
   Hand-authored static CSS, linked directly like below_fold_styles.css; it is
   NOT run through the CSS scanner, so it must never use the pp-/tlp-/lt-/w100
   atomic classes (those are a separate, compiled system).
   ========================================================================== */

/* min-height:0 neutralises the documented .mv-root{min-height:100%} flex-stretch
   footgun (footer painting over content). */
.mv-root.ho-root { background: var(--bg); min-height: 0; }

/* ---- Stage: centers the card, owns the top breathing room (the shared
   marketing nav flows above and is NOT position:fixed here), and clips the
   oversized scripture backdrop so it can never trigger horizontal scroll. ---- */
.mv-root .ho-gate {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 60vh;
  padding: 88px 40px 120px;
  overflow: hidden;
}

/* ---- Calm backdrop — purely decorative, sits behind the (opaque) card so it
   can never reduce text contrast. ---- */
.mv-root .ho-backdrop {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* Soft radial accent + brand wash, built from the already-low-alpha token
   rgba()s so it stays a whisper in both themes. */
.mv-root .ho-wash {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 860px;
  max-width: 120vw;
  height: 860px;
  transform: translate(-50%, -52%);
  border-radius: 50%;
  background:
    radial-gradient(closest-side, var(--accent-soft), transparent 70%),
    radial-gradient(closest-side, var(--brand-soft), transparent 72%);
  background-position: 36% 40%, 64% 62%;
  background-repeat: no-repeat;
  background-size: 76% 76%, 58% 58%;
}
/* Oversized faint serif scripture line — the devotional signature. Very low
   opacity + accent-tinted so it reads as texture, never as content. */
.mv-root .ho-scripture {
  position: relative;
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(38px, 10vw, 124px);
  line-height: 1.06;
  letter-spacing: -0.02em;
  text-align: center;
  max-width: 15ch;
  color: var(--accent);
  opacity: 0.07;
  user-select: none;
}

/* ---- The gate card ---- */
.mv-root .ho-card {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 540px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 52px 52px 44px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-elev);
}

/* Square icon badge — focal anchor at the top of the card */
.mv-root .ho-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  border-radius: var(--radius-lg);
  background: var(--accent-soft);
  color: var(--accent-strong);
  margin-bottom: 22px;
}

.mv-root .ho-eyebrow {
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 14px;
}

.mv-root .ho-title {
  font-family: var(--font-serif);
  font-size: 42px;
  font-weight: 600;
  line-height: 1.06;
  letter-spacing: -0.02em;
  color: var(--text-1);
  margin: 0;
  max-width: 14ch;
}
.mv-root .ho-title em {
  font-style: italic;
  font-weight: 500;
  color: var(--accent);
}

.mv-root .ho-sub {
  font-family: var(--font-sans);
  font-size: 17px;
  line-height: 1.6;
  color: var(--text-2);
  margin: 18px 0 0;
  max-width: 42ch;
}

/* ---- CTAs. Deliberately LOCAL .ho-btn (not the shared .btn): the global
   .btn:hover applies a translate and there is a .hero-cta-row .btn width
   override in styles.css — staying off .btn avoids both leaks. ---- */
.mv-root .ho-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-top: 28px;
}
.mv-root .ho-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 24px;
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: 600;
  line-height: 1;
  border-radius: var(--radius-pill);
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  transition: transform .12s ease, filter .12s ease, background .12s ease, border-color .12s ease;
}
.mv-root .ho-btn:hover { transform: translateY(-1px); }
.mv-root .ho-btn-primary { background: var(--brand); color: var(--brand-fg); }
.mv-root .ho-btn-primary:hover { filter: brightness(1.04); }
.mv-root .ho-btn-primary svg { color: var(--brand-fg); }
.mv-root .ho-btn-secondary {
  background: var(--surface-2);
  color: var(--text-1);
  border-color: var(--border-strong);
}
.mv-root .ho-btn-secondary:hover { background: var(--surface-elev); border-color: var(--accent); }

/* ---- Trust meta line — quiet reassurance, not a feature list ---- */
.mv-root .ho-meta {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 26px;
  padding-top: 22px;
  border-top: 1px solid var(--border);
  width: 100%;
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 500;
  color: var(--text-3);
}
.mv-root .ho-meta-item { display: inline-flex; align-items: center; gap: 7px; }
.mv-root .ho-meta-item svg { color: var(--accent); flex-shrink: 0; }
.mv-root .ho-dot { width: 4px; height: 4px; border-radius: 50%; background: var(--border-strong); }

/* ============================ RESPONSIVE ============================ */
@media (max-width: 768px) {
  .mv-root .ho-gate { padding: 64px 24px 96px; min-height: 50vh; }
  .mv-root .ho-card { padding: 44px 32px 38px; }
  .mv-root .ho-title { font-size: 36px; }
  .mv-root .ho-sub { font-size: 16px; }
}
@media (max-width: 480px) {
  .mv-root .ho-gate { padding: 48px 16px 72px; }
  .mv-root .ho-card { padding: 36px 22px 30px; border-radius: var(--radius-lg); }
  .mv-root .ho-badge { width: 54px; height: 54px; margin-bottom: 18px; }
  .mv-root .ho-title { font-size: 30px; max-width: 18ch; }
  .mv-root .ho-sub { font-size: 15.5px; }
  .mv-root .ho-actions { flex-direction: column; align-items: stretch; width: 100%; }
  .mv-root .ho-btn { width: 100%; justify-content: center; }
  .mv-root .ho-dot { display: none; }
  .mv-root .ho-meta { gap: 8px 16px; }
}