/* voice lab - the meji sky overlay - v4.0
 *
 * This file loads AFTER assets/css/meji-sky.css and carries ONLY what the voice
 * lab adds on top of the framework: the hero copy treatment, the facts line, the
 * studio plate and its three states, and the skip link. Everything else on the
 * page - the sky, the orbs, the buttons, the type - is meji sky.
 *
 * Pinned by scripts/voice-accessibility.test.mjs, do not rename or restructure:
 *   .voice-hero-copy{ ... color:var(--navy) }    the hero reads in navy, because
 *   .voice-facts span{ ... color:var(--navy) }   the top of the sky is its palest
 *                                                (the same AA pair as the footer)
 *   .voice-facts span:not(:last-child)::after{content:" /"}
 *   #voiceFrame{ ... height:1030px }             the studio needs its full height
 *
 * Pills stay reserved for actions (max two 999px radii in this file - currently
 * one, the skip link). Action buttons are meji sky's .btn.
 */

:root{
  --navy:#123A6C;
}

/* ---------- the sky, tuned to this page's height ---------- */
/* Same tokens as .sky-body, fewer stops: the homepage gradient is written for a
   very long scroll, and compressed onto this shorter page its bands show. This
   one puts the pale sky under the navy hero copy, the deep blues behind the
   plate, and returns to pale for the ink footer. Same specificity as .sky-body;
   this file loads later, so it wins. */
.voice-portal{
  background:linear-gradient(180deg,
    var(--sky) 0%,
    var(--day) 9%,
    var(--sea) 22%,
    var(--deep) 38%,
    var(--monitor) 52%,
    var(--dusk) 66%,
    var(--deep) 78%,
    var(--day) 90%,
    var(--sky) 100%);
}

/* ---------- the skip link: parked above the window until keyboard focus ---------- */
.skip-link{
  position:fixed;left:18px;top:14px;z-index:200;
  padding:10px 18px;border-radius:999px;
  color:var(--navy);background:var(--yellow);
  font-family:var(--px);font-size:19px;letter-spacing:.06em;text-decoration:none;
  transform:translateY(-180%);transition:transform .18s ease;
}
.skip-link:focus{transform:translateY(0)}

/* ---------- hero copy ---------- */
/* navy on the pale top of the sky - the footer's move, and the pair the
   accessibility suite verifies at AA */
.voice-hero-copy{color:var(--navy);max-width:560px;display:flex;flex-direction:column;gap:14px}
.voice-hero-copy p{margin:0;font-size:19px;line-height:1.75}
.voice-facts{display:flex;flex-wrap:wrap;justify-content:center;column-gap:6px}
.voice-facts span{color:var(--navy);font-size:17px;opacity:.85;letter-spacing:.06em}
.voice-facts span:not(:last-child)::after{content:" /";opacity:.5;margin-left:6px}

/* ---------- the voice room ---------- */
.voice-studio{
  display:flex;flex-direction:column;align-items:center;gap:26px;
  padding:90px 4vw;scroll-margin-top:30px;
}
.voice-studio-bar{display:flex;flex-direction:column;align-items:center;gap:10px}
#voiceRoute{
  font-size:17px;letter-spacing:.08em;min-height:1.3em;
  color:var(--yellow);text-shadow:0 0 14px rgba(245,238,122,.55);
}

/* the plate: the same surface as the player screen and the theater. The three
   children (gate, loading, iframe) share one grid cell, so whichever states are
   visible overlay instead of stacking - the handshake never doubles the height. */
.voice-frame-wrap{
  position:relative;width:min(96vw,1120px);
  display:grid;grid-template:1fr/1fr;
  border-radius:44px;overflow:hidden;
  background:var(--navy);
  box-shadow:0 30px 80px rgba(6,24,52,.5);
}
.voice-frame-wrap>*{grid-area:1/1}
#voiceFrame{display:block;width:100%;height:1030px;border:0;background:#EAF6FD}
.voice-frame-wrap.is-refreshing #voiceFrame{opacity:.75;transition:opacity .4s ease}

/* the two states: opaque, the plate's own colour, story centred */
.voice-account-gate,.voice-loading{
  position:relative;background:var(--navy);
  min-height:520px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:24px;padding:60px 8vw;text-align:center;
}
.voice-account-gate{z-index:3}
.voice-loading{z-index:2}
.voice-account-gate>div{display:flex;flex-direction:column;align-items:center;gap:14px;max-width:460px}
.voice-account-gate strong{font-weight:400;font-size:clamp(22px,3.2vw,28px);letter-spacing:.1em;line-height:1.4}
.voice-account-gate p{margin:0;font-size:18px;line-height:1.7;opacity:.9}
.voice-gate-orb{width:min(20vmin,120px)}
.voice-loading strong{font-weight:400;font-size:clamp(20px,3vw,26px);letter-spacing:.1em}
.voice-loading small{font-size:17px;opacity:.75}
.voice-loading-orb{width:min(16vmin,96px)}
.voice-loading.ready{opacity:0;transition:opacity .3s ease}

/* under the plate */
.voice-fallback{max-width:560px;line-height:1.7}
.voice-fallback a{text-decoration:underline;text-underline-offset:4px}
.voice-fallback a:hover{color:var(--yellow)}

/* ---------- keep the signal human ---------- */
.voice-trust{max-width:560px;line-height:1.8;margin:0}

/* ---------- small screens ---------- */
@media(max-width:760px){
  .voice-frame-wrap{border-radius:28px}
  #voiceFrame{height:84vh;min-height:640px}
  .voice-account-gate,.voice-loading{min-height:440px}
}

@media (prefers-reduced-motion:reduce){
  .skip-link{transition:none}
}