/* public/css/oracle-kit-screens.css
   ───────────────────────────────────────────────────────────────
   Per-screen styling for the oracle-ui-kit-v1 implementation.
   Load AFTER oracle-kit.css (which holds the shared primitives).

   One section per kit screen — each adapts the kit's preview-only
   .device-anchored layout to production's existing full-bleed
   step sections (#step-welcome, #step-calculating, etc.).
   ─────────────────────────────────────────────────────────── */

/* ─────────────────────────────────────────────────────────────
   The whole #step-welcome is now the kit's home substrate host.
   Each home-view fills the section absolutely; the substrate +
   veil already cover the full viewport from a single layer
   inserted in the section. The existing .home-screen rules in
   oracle.css set the section size; we just paint over them.
   ───────────────────────────────────────────────────────────── */
.ok-arrival-host {
  position: relative;
  background: #000;
  /* Belt-and-suspenders: ensure the substrate paints right to
     the edges even if oracle.css adds padding to .home-screen. */
  padding: 0;
  /* Clip the substrate's 100vh height so a tiny over-fill from
     iOS dvh quirks doesn't introduce scroll. */
  overflow: hidden;
}
/* CRITICAL: only the .active home-view paints. The base .home-view rule
   in oracle.css sets `display: none`; we layer the kit absolute-fill
   on top of `.active` ONLY so the inactive view stays hidden. The
   previous version of this rule forced display:flex unconditionally,
   which caused Step 1 + Step 2 to render simultaneously (overlapping
   wordmark + headline + BEGIN button). */
.ok-arrival-host > .home-view.active {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center;
  padding: 0;
}

/* When home-step-2 is active, swap the veil to the awake variant
   so the chartreuse glow reads behind the BEGIN button. The
   ok-home-veil id is on the single substrate layer; we toggle
   via a class on the host. */
.ok-arrival-host.is-invitation #ok-home-veil {
  background:
    radial-gradient(ellipse 80% 50% at 50% 36%, rgba(224,242,81,0.05) 0%, rgba(0,0,0,0.35) 75%, rgba(0,0,0,0.92) 100%),
    linear-gradient(180deg, rgba(0,0,0,0.42) 0%, rgba(0,0,0,0.28) 38%, rgba(0,0,0,0.72) 78%, rgba(0,0,0,0.97) 100%);
}

/* ── 01 — Arrival ───────────────────────────────────────────── */
.ok-arrival {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; padding: 0; color: var(--parchment);
  font-family: var(--font-body);
}
.ok-arrival__top {
  position: absolute; top: 56px; left: 28px; right: 28px; z-index: 3;
  display: flex; flex-direction: column; align-items: center; gap: 10px;
}
.ok-arrival__centre {
  /* 7.5ad fix — anchor below the top eyebrow band instead of vertical
     centering. The prior top:50% + translateY(-50%) + 80vh max-height
     let the centre block's top edge rise into the top:56px eyebrow
     zone on phones (sigil collided with the "Step One · Arrival"
     gold caps). Pinning to top: 132px + bottom: 88px gives the centre
     a bounded scroll region between the eyebrow above and the
     Sign In row below; the sigil/wordmark sit at the top of that
     region, the install steps flow below them and scroll if they
     exceed the space. */
  position: absolute;
  top: 132px;
  left: 0; right: 0;
  bottom: 88px;
  z-index: 2;
  display: flex; flex-direction: column; align-items: center; gap: 20px;
  padding: 0 28px;
  overflow-y: auto;
}
.ok-arrival__sigil { width: 140px; height: auto; }
.ok-arrival__since {
  font-size: 12.5px; letter-spacing: .02em;
}
.ok-arrival__since .dot { color: var(--smoke); }
.ok-arrival__bottom {
  position: absolute; bottom: 28px; left: 28px; right: 28px; z-index: 3;
  display: flex; justify-content: center;
}
.ok-arrival__signin {
  color: var(--smoke); font-size: 9.5px; letter-spacing: .32em;
  text-transform: uppercase; font-weight: 500;
}
.ok-arrival__signin a { color: var(--rose); text-decoration: none; }
/* The "Skip → Identity (dev)" button is dev-only; keep it tucked
   under the CTA but visually quiet. */
.ok-arrival__dev,
.ok-invite__dev {
  background: transparent; border: none;
  color: var(--smoke); font-size: 10px; letter-spacing: .14em;
  text-transform: uppercase; cursor: pointer; font-family: var(--font-body);
  margin-top: 6px; padding: 4px 8px;
}
.ok-arrival__dev:hover, .ok-invite__dev:hover { color: var(--rose); }

/* The original install-ios / install-android / install-skip
   styling lives in oracle.css; the new kit ghost CTA wraps the
   Android install button. iOS instructions still render their
   own block. We tuck install-skip below for parity. */
#step-welcome .install-skip {
  margin-top: 10px;
}

/* ── 02 — Invitation ────────────────────────────────────────── */
.ok-invite {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; padding: 0; color: var(--parchment);
  font-family: var(--font-body);
}
.ok-invite__top {
  position: absolute; top: 56px; left: 28px; right: 28px; z-index: 3;
  display: flex; flex-direction: column; align-items: center; gap: 10px;
}
.ok-invite__centre {
  position: absolute; top: 50%; left: 0; right: 0; transform: translateY(-50%); z-index: 2;
  display: flex; flex-direction: column; align-items: center; gap: 24px; padding: 0 28px;
}
.ok-invite__sigil { width: 180px; height: auto; }
.ok-invite__headline {
  text-align: center; color: #F4F1EC;
  font-family: "The Silver Editorial", serif; font-style: italic;
  font-size: 22px; line-height: 1.3; max-width: 280px;
  text-wrap: balance; text-shadow: 0 2px 14px rgba(0,0,0,0.9);
}
.ok-invite__headline i { color: var(--rose); font-style: italic; }
.ok-invite__cta-wrap { margin-top: 6px; width: 252px; }
.ok-invite__cta {
  width: 100%;
  /* The kit explicitly DROPPED the corner-bracket frame this round.
     This is a plain chartreuse pill — that's the whole change. The
     pill already uses .ok-cta-fill which is the canonical
     chartreuse fill button. */
}

/* ── 02b — Calling Unlocked (post-purchase beat, 7.9zc) ─────────
   The threshold between Stripe and Step 04's questions. Hosts the
   SAME .ok-invite block as the Invitation screen above — this rule
   only supplies the stage it needs, mirroring .ok-arrival-host:
   .ok-invite is `position: absolute; inset: 0`, so it needs a
   positioned host WITH HEIGHT. #step-welcome gets its height from
   .home-screen; this step has no such rule, hence min-height here —
   without it the host collapses to 0 and the beat renders invisible.
   `display: block` on .active overrides .step.active's flex, which
   would otherwise fight the absolute children. */
.step.cu-stage {
  position: relative;
  background: #000;
  padding: 0;
  overflow: hidden;
  min-height: 100vh;
  min-height: 100dvh;
}
.step.cu-stage.active { display: block; }

/* ── 03 — Loader (Calculating) ──────────────────────────────── */
.ok-loader-host { position: relative; background: #000; padding: 0; }
.ok-loader {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; padding: 0; color: var(--parchment);
  font-family: var(--font-body);
}
.ok-loader__top {
  position: absolute; top: 56px; left: 28px; right: 28px; z-index: 3;
  display: flex; flex-direction: column; align-items: center; gap: 10px;
}
.ok-loader__diagram {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 2;
  width: 300px; height: 300px;
}
.ok-loader__bottom {
  position: absolute; bottom: 80px; left: 28px; right: 28px; z-index: 3;
  display: flex; flex-direction: column; align-items: center; gap: 16px;
}
.ok-loader__phase {
  font-family: "The Silver Editorial", serif; font-style: italic;
  font-size: 20px; color: #F4F1EC; text-align: center; text-wrap: balance;
  max-width: 280px; line-height: 1.25;
  text-shadow: 0 2px 14px rgba(0,0,0,0.85);
  min-height: 1.25em * 2;     /* prevent collapse during phase swap */
  transition: opacity 600ms ease;
}
.ok-loader__phase.is-fading { opacity: 0; }
.ok-loader__dots { display: flex; gap: 14px; align-items: center; }
.ok-loader__dots span {
  width: 7px; height: 7px; border-radius: 50%;
  border: 1px solid rgba(247,209,172,0.4);
  transition: all 600ms ease;
}
.ok-loader__dots span.on {
  width: 10px; height: 10px; border: none;
  background: radial-gradient(circle, #E0F251 0%, rgba(224,242,81,0.55) 60%, transparent 80%);
  box-shadow: 0 0 14px rgba(224,242,81,0.6);
}
/* Kit's ring-mid uses its own slow counter-rotation; reuse the
   shared .ok-ring--spin-rev class so motion is consistent
   everywhere the ring appears (Account, Library use --spin). */

/* ── 04 — Library (Welcome Back) ────────────────────────────── */
/* Production library uses .library-ornate; the kit's resin-07
   substrate + wash + watermark slot in as background layers.
   The chamber-card markup stays as-is — only the wrapping
   substrate + lunar context line are new. */
.ok-library-bg-host > .ok-substrate {
  /* Sit at z-index:0 — same layer as library-ornate's ambient/stars/mark.
     Because the substrate is the FIRST positioned child in DOM order,
     CSS paint order puts it underneath ambient → stars → mark, which is
     exactly what we want.
     IMPORTANT: do NOT use z-index:-1. The parent .step.library-ornate
     has `background: #000`, which paints during step 1 of the
     stacking-context paint order — anything at z<0 gets covered by
     that black wall and you see a black screen instead of the resin
     photograph. */
  z-index: 0;
}
/* Library img opacity restored to kit value .85. */
.ok-library-bg-host > .ok-substrate img { opacity: .85; }
.ok-library-bg {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
}
.ok-library-wash {
  position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(ellipse 80% 40% at 50% 12%, rgba(201,169,109,0.12), transparent 65%),
    radial-gradient(ellipse 60% 40% at 50% 92%, rgba(247,209,172,0.05), transparent 65%);
}
.ok-library-watermark {
  position: absolute; top: 80px; left: 50%; transform: translateX(-50%);
  opacity: .28; pointer-events: none;
}
.ok-lunar {
  color: var(--gold); font-size: 10px; letter-spacing: .32em;
  text-transform: uppercase; font-family: var(--font-body); font-weight: 500;
  margin-bottom: 8px;
}

/* ── 05 — Account (Profile + Cosmic Blueprint) ──────────────── */
.ok-account-bg {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
}
/* Establish a positioning context on the section so substrate +
   wash anchor to the section top (not bubble up to #app-shell). */
.ok-account-bg-host { position: relative; }
/* Account img opacity restored to kit value .78. */
.ok-account-bg-host > .ok-substrate img { opacity: .78; }
.ok-account-wash {
  /* Match the substrate's anchor + sizing — top of page, one viewport
     tall. Both scroll off together so the wash gold radial stays
     glued to the photograph and exits cleanly past the hero area. */
  position: absolute; top: 0; left: 0; right: 0;
  height: 100vh; height: 100dvh;
  pointer-events: none;
  background: radial-gradient(ellipse 80% 36% at 50% 10%, rgba(201,169,109,0.10), transparent 65%);
  z-index: 1;
}
/* Avatar with chart-wheel halo (renders inside the existing
   .sub-account-identity__avatar). The wheel uses .ok-ring--spin
   so it shares motion with the Loader. */
.ok-account-avatar-wrap {
  position: relative;
  width: 220px; height: 220px;
  margin: 0 auto 16px;
  display: flex; align-items: center; justify-content: center;
}
/* Halo is now the canonical oracle-loader.svg img (matches the library
   watermark + calc loader sigil). The img itself gets .ok-ring--spin
   for slow rotation; reduced-motion override in oracle-kit.css
   disables rotation globally. */
.ok-account-avatar-wrap .ok-wheel {
  position: absolute; inset: 0;
  width: 220px; height: 220px;
  display: block;
  opacity: .55;
  pointer-events: none;
}

/* ── 06 — Share card ────────────────────────────────────────── */
/* The corner-tick frame around the plate VI card. */
.ok-share-card-frame { position: absolute; inset: 14px; pointer-events: none; }
.ok-share-card-frame .ok-tick {
  position: absolute; width: 12px; height: 12px;
  border: 1px solid rgba(247,209,172,0.55);
}
.ok-share-card-frame .ok-tick--tl { top: 0; left: 0;   border-right: 0; border-bottom: 0; }
.ok-share-card-frame .ok-tick--tr { top: 0; right: 0;  border-left: 0;  border-bottom: 0; }
.ok-share-card-frame .ok-tick--bl { bottom: 0; left: 0;  border-right: 0; border-top: 0; }
.ok-share-card-frame .ok-tick--br { bottom: 0; right: 0; border-left: 0;  border-top: 0; }
.ok-share-card-frame .ok-edge {
  position: absolute; left: 24px; right: 24px; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(247,209,172,0.4) 25%, rgba(247,209,172,0.4) 75%, transparent);
}
.ok-share-card-frame .ok-edge--top { top: 0; }
.ok-share-card-frame .ok-edge--bot { bottom: 0; }

/* Constellation watermark behind the quote */
.ok-share-card-watermark {
  position: absolute; left: 50%; top: 38%; transform: translate(-50%,-50%);
  opacity: 0.06; pointer-events: none;
}