/* =====================================================================
   The portal — mirabel.stub.africa

   The splash the dashboard opens on, without the figure. Her likeness stays
   on your own laptop; out here the name does the work, and the space the
   figure used to occupy is where the form goes.

   Deliberately single-theme: this is the dark ground from app.css's .splash —
   the same radial navy, the same gold stop, the same three tagline colours.
   Nothing here follows the viewer's light/dark preference, because the splash
   doesn't either. It's a lit stage, not a document.

   EVERY rule is scoped under .portal-stage. app.css loads first for its tokens
   (spacing, radii, type scale, --sans/--mono) and it defines .field, .hint and
   .stage UNSCOPED for the dashboard — which reached straight into this page
   and drew a box round every form field. Scoping is what keeps the token
   sharing free of side effects.
   ===================================================================== */

.portal-stage{
  --ground:#0c0f1c;
  --ink-on-dark:#ffffff;
  --dim:#c9d2e6;
  --dimmer:#8e9ab7;
  --faint:rgba(255,255,255,.16);
  --gold:#ffc83d;
  --green:#2fbd80;
  --violet:#b58cf0;
  --danger:#ff8a75;

  box-sizing:border-box;
  min-height:100vh;
  /* the same radial as .splash: lit from behind where she used to stand,
     which is now empty, so the light falls on the panel instead */
  background:radial-gradient(120% 100% at 78% 40%, #1e2a52 0%, #141a33 42%, #0c0f1c 100%);
  color:var(--ink-on-dark);
  font-family:var(--sans);
  font-size:var(--t-prose);
  line-height:var(--lh-prose);
  -webkit-font-smoothing:antialiased;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:var(--s5);
}
.portal-stage *{box-sizing:border-box}

body{margin:0;background:#0c0f1c}

.portal-stage .inner{
  width:min(1180px,92vw);
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,26rem);
  gap:clamp(var(--s5),5vw,var(--s7));
  align-items:center;
}

/* ---------------------------------------------------------------- pitch */
.portal-stage .pitch{min-width:0}

.portal-stage .kicker{
  margin:0 0 var(--s4);
  color:var(--gold);
  font-size:var(--t-sm);
  font-weight:700;
  letter-spacing:.14em;
  text-transform:uppercase;
}

.portal-stage .pitch h1{
  margin:0 0 var(--s5);
  color:#fff;
  font-size:clamp(40px,6vw,104px);
  line-height:.92;
  letter-spacing:-.035em;
  font-weight:800;
}
/* the full stop is the mark — a gold square, as on the splash */
.portal-stage .pitch h1 .stop{
  width:.19em;height:.19em;
  background:var(--gold);
  display:inline-block;
  margin-bottom:.06em;
  margin-left:.04em;
}

.portal-stage .lede{
  margin:0 0 var(--s5);
  color:var(--dim);
  font-size:clamp(15px,1.5vw,19px);
  line-height:1.55;
  max-width:34rem;
}
.portal-stage .lede em{color:#fff;font-style:italic}

.portal-stage .tagline{
  margin:0;
  font-size:clamp(15px,1.5vw,19px);
  font-weight:600;
  display:flex;
  flex-wrap:wrap;
  gap:.6em;
}
.portal-stage .tagline .a{color:var(--green)}
.portal-stage .tagline .b{color:var(--gold)}
.portal-stage .tagline .c{color:var(--violet)}

/* ---------------------------------------------------------------- panel */
/* Glass rather than a white card: a white card on this ground reads as a
   dialog dropped on top of the page instead of part of it. */
.portal-stage .panel{
  background:rgba(255,255,255,.045);
  border:1px solid var(--faint);
  border-radius:var(--r-lg);
  padding:var(--s6) var(--s5);
  display:flex;
  flex-direction:column;
  gap:var(--s4);
  backdrop-filter:blur(6px);
  box-shadow:0 24px 60px rgba(0,0,0,.35);
  min-width:0;
}

.portal-stage .panel h2{
  margin:0;
  font-size:var(--t-xl);
  font-weight:700;
  letter-spacing:-.02em;
  line-height:var(--lh-tight);
}
.portal-stage .blurb{margin:0;color:var(--dim);font-size:var(--t-base);line-height:1.55}
.portal-stage .blurb strong{color:#fff}
.portal-stage .aside{margin:0;font-size:var(--t-sm);color:var(--dimmer)}
.portal-stage a{color:var(--gold)}
.portal-stage .aside a{color:var(--dimmer)}

.portal-stage code{
  font-family:var(--mono);
  font-size:.88em;
  background:rgba(255,255,255,.08);
  padding:.1em .35em;
  border-radius:var(--r-sm);
  color:#fff;
}

/* --------------------------------------------------------------- forms */
.portal-stage form{display:flex;flex-direction:column;gap:var(--s4);margin:0}

.portal-stage .field{
  display:flex;flex-direction:column;gap:var(--s1);min-width:0;
  /* app.css's .field styles an INPUT; undo what it would impose on this label */
  background:none;border:0;padding:0;border-radius:0;box-shadow:none;
}
.portal-stage .field .label{
  font-size:var(--t-xs);
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--dimmer);
}
.portal-stage .field input{
  font:inherit;
  width:100%;
  color:#fff;
  background:rgba(0,0,0,.28);
  border:1px solid var(--faint);
  border-radius:var(--r-md);
  padding:.62rem .7rem;
}
.portal-stage .field input::placeholder{color:#6b7794}
.portal-stage .field input:focus-visible,
.portal-stage .check input:focus-visible,
.portal-stage .primary:focus-visible{
  outline:2px solid var(--gold);
  outline-offset:2px;
}
/* only complain once they've typed something wrong, never on an empty form */
.portal-stage .field input:not(:placeholder-shown):invalid{border-color:var(--danger)}
.portal-stage .hint{
  display:block;
  font-size:var(--t-sm);
  color:var(--dimmer);
  line-height:1.45;
}

.portal-stage .check{display:flex;gap:var(--s3);align-items:flex-start}
.portal-stage .check input{margin-top:.35rem;accent-color:var(--green);flex:none}
.portal-stage .check span{display:block}
.portal-stage .check strong{font-weight:600;font-size:var(--t-base)}

/* the gold button from the splash's "Enter Casita" */
.portal-stage .primary{
  font:inherit;
  font-weight:700;
  letter-spacing:-.005em;
  color:#20180a;
  background:var(--gold);
  border:0;
  border-radius:var(--r-full);
  padding:13px 26px;
  cursor:pointer;
  align-self:flex-start;
  text-decoration:none;
  display:inline-block;
  box-shadow:0 6px 22px rgba(255,200,61,.22);
  transition:transform .12s ease, box-shadow .12s ease;
}
.portal-stage .primary:hover{
  transform:translateY(-1px);
  box-shadow:0 10px 30px rgba(255,200,61,.3);
}

.portal-stage .alert{
  background:rgba(255,138,117,.12);
  border:1px solid rgba(255,138,117,.35);
  color:var(--danger);
  border-radius:var(--r-md);
  padding:var(--s3) var(--s4);
  font-size:var(--t-base);
  line-height:1.5;
}

/* --------------------------------------------------------------- steps */
.portal-stage .steps{
  margin:0;
  padding-left:1.15rem;
  color:var(--dim);
  font-size:var(--t-base);
  display:flex;
  flex-direction:column;
  gap:var(--s2);
}
.portal-stage .steps li::marker{color:var(--dimmer)}
.portal-stage .steps strong{color:#fff}

/* ------------------------------------------------------------- waiting */
.portal-stage .waiting{
  border-top:1px solid var(--faint);
  padding-top:var(--s4);
  font-size:var(--t-base);
}
.portal-stage .waiting p{margin:0;display:flex;align-items:center;gap:var(--s2)}
.portal-stage .pending{color:var(--dimmer)}
.portal-stage .awake{color:var(--green);font-weight:600}

.portal-stage .pulse{
  width:8px;height:8px;border-radius:var(--r-full);
  background:var(--green);
  flex:none;
  animation:portal-pulse 1.8s ease-in-out infinite;
}
@keyframes portal-pulse{
  0%,100%{opacity:.25;transform:scale(.85)}
  50%{opacity:1;transform:scale(1)}
}
@media (prefers-reduced-motion:reduce){
  .portal-stage .pulse{animation:none;opacity:.75}
  .portal-stage .primary{transition:none}
}

/* --------------------------------------------------------------- narrow */
/* One column: the pitch on top, the form under it. The wordmark shrinks but
   stays the loudest thing on the screen. */
@media (max-width:56rem){
  .portal-stage{align-items:flex-start;padding:var(--s5) var(--s4) var(--s6)}
  .portal-stage .inner{
    grid-template-columns:minmax(0,1fr);
    gap:var(--s6);
    padding-top:var(--s6);
  }
  .portal-stage .pitch h1{margin-bottom:var(--s4)}
  .portal-stage .lede{margin-bottom:var(--s4)}
}

/* ------------------------------------------------------------------ mfa */
/* Firebase asks for the second factor after the popup has already succeeded,
   so this is a continuation of signing in, not a retry of it. */
.portal-stage .mfa{display:flex;flex-direction:column;gap:var(--s4)}
.portal-stage .mfa[hidden]{display:none}

/* -------------------------------------------------------------- one-liner */
/* The install command is the primary control on this page, so it is styled as
   one: a thing you take, not a thing you read. */
.portal-stage .oneliner{
  display:flex;align-items:stretch;gap:var(--s2);
  background:rgba(0,0,0,.32);
  border:1px solid var(--faint);
  border-radius:var(--r-md);
  padding:var(--s2) var(--s2) var(--s2) var(--s3);
}
.portal-stage .oneliner code{
  flex:1;min-width:0;
  background:none;padding:0;
  font-size:12.5px;line-height:1.5;
  color:#e7edf7;
  overflow-x:auto;white-space:nowrap;
  align-self:center;
}
.portal-stage .copy{
  flex:none;font:inherit;font-size:var(--t-sm);font-weight:600;
  color:#20180a;background:var(--gold);
  border:0;border-radius:var(--r-sm);
  padding:.4rem .7rem;cursor:pointer;
}
.portal-stage .copy:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.portal-stage .copy.done{background:var(--green);color:#06210f}

.portal-stage .inspect{font-size:var(--t-sm);color:var(--dimmer)}
.portal-stage .inspect summary{cursor:pointer;color:var(--dimmer)}
.portal-stage .inspect summary:hover{color:var(--dim)}
.portal-stage .inspect .blurb{margin-top:var(--s2);font-size:var(--t-sm)}
.portal-stage .inspect code{font-size:11.5px;word-break:break-all}