/* The way in as a wizard (2026-10-10): one modal card (#wizard) over the way in's cobalt field
   (#start), where the city stays. The card is the same size on every step, growing only for the
   Briefing's text, which scrolls inside it, and shorter on the Welcome, which fits its content;
   only its content changes between the steps after it, and nothing moves between them. Begin's labels share one size, and the waking line keeps its space from
   the start. */

/* The field: the city filling it, in fog while the world wakes, clear once it is warm; a veil
   dims it under the card, lightly (30% since 2026-10-11), so the drawing reads around it.
   #cobalt (index.html) maps the drawing's greys onto the field's blues. */
.way-in {
  --pad-x: clamp(20px, 5vw, 72px);
  position: relative; isolation: isolate; overflow: hidden; min-height: 100svh;
  background: var(--w-lit); color: var(--w-ink);
}
.way-in::after { content: ''; position: absolute; inset: 0; z-index: -1; background: #0a1226; opacity: .3; pointer-events: none; }
.way-in .city {
  position: absolute; inset: 0; z-index: -2; pointer-events: none;
  -webkit-mask-image: linear-gradient(to top, transparent 0, #000 40%); mask-image: linear-gradient(to top, transparent 0, #000 40%);
  transition: opacity 2.2s ease-out, filter 2.2s ease-out;
}
.way-in[data-city="fog"] .city { opacity: .3; filter: blur(2px); }
.way-in .city img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 100% 100%; filter: url(#cobalt); }

/* The Sound Check's ears (2026-10-09; back 2026-10-16): while each voice plays, its side of the
   field glows (`--e`, set a frame at a time by app.ts) and its words show at that edge, above
   the card. */
.way-in .ear { position: absolute; top: 0; bottom: 0; width: 50%; pointer-events: none; }
.way-in .ear.l { left: 0; }
.way-in .ear.r { right: 0; }
.way-in .ear::before { content: ''; position: absolute; inset: 0; opacity: calc(var(--e, 0) * .2); }
.way-in .ear.l::before { background: linear-gradient(90deg, #fff, transparent 80%); }
.way-in .ear.r::before { background: linear-gradient(270deg, #fff, transparent 80%); }
.way-in .ear span { position: absolute; top: 8%; font-style: italic; font-size: clamp(22px, 2.4vw, 32px); color: var(--w-ink); opacity: 0; transition: opacity .5s; }
.way-in .ear.l span { left: var(--pad-x); }
.way-in .ear.r span { right: var(--pad-x); }
.way-in .ear.on span { opacity: 1; }

/* The card: deep blue, a 4px corner, centred by the dialog's own margins, its content a column:
   Back at the top left (its row kept when Back is hidden, so nothing moves), then the step, its
   buttons at the foot. The field's veil dims what is behind it, so the backdrop is clear. Its
   floor 670px under the crown (2026-10-11; the least the way in's check passes), so Practice
   with its list and reply (661px) keeps the size the other steps have; the keyed Microphone
   Check needs 587px. */
#wizard {
  --pad: clamp(22px, 3vw, 36px); --soft: var(--side-soft);
  width: min(640px, calc(100% - 32px)); max-width: none;
  min-height: min(670px, calc(100svh - 32px)); max-height: calc(100svh - 32px);
  overflow: hidden auto; overscroll-behavior: contain; scrollbar-width: thin;
  border-radius: var(--r); background: var(--side); color: var(--side-ink); box-shadow: 0 0 0 1px #ffffff2e, 0 34px 70px #000b;
}
#wizard[open] { display: flex; flex-direction: column; }
/* Welcome to Vesper alone is as tall as its content (2026-10-16): under the floor its few lines
   left a gap in the card's middle. The steps after it keep the floor and one size. */
#wizard:has(#step-threshold:not([hidden])) { min-height: 0; }
#wizard #step-threshold .step-actions { margin-top: 0; padding-top: 30px; }
#wizard::backdrop { background: transparent; }
/* The crown (B, the ochre crown, 2026-10-11): the Back row and each step's heading are one ochre
   block across the card's top, the heading in the block's ink, Back above it at 70%. The row is
   28px whether Back shows or not (the box is border-box), so nothing moves. The body below is the
   card's deep blue. */
.wizard-top { display: flex; align-items: center; gap: 12px; min-height: calc(28px + 26px); padding: 26px var(--pad) 0; background: var(--y-lit); color: var(--y-ink); }
.wizard-top .link { min-height: 28px; padding: 0; font-size: 15px; color: var(--y-ink); opacity: .7; }
#wizard-resume { min-height: 40px; margin-left: auto; padding: 0 16px; font-size: 14px; }
#wizard .step { flex: 1 0 auto; display: flex; flex-direction: column; padding: 0 var(--pad) var(--pad); }
#wizard h1, #wizard h2 { margin: 0 0 14px; font-weight: 650; font-stretch: 118%; font-size: clamp(32px, 4.2vw, 46px); line-height: 1; letter-spacing: -.02em; text-wrap: balance; }
#wizard .step > :is(h1, h2):first-child { margin: 0 calc(-1 * var(--pad)) 24px; padding: 4px var(--pad) 22px; background: var(--y-lit); color: var(--y-ink); }
#wizard h1:focus, #wizard h2:focus { outline: none; }
#wizard .lede { margin: 0; max-width: 30em; font-size: clamp(17px, 1.7vw, 20px); line-height: 1.45; text-wrap: pretty; }
/* The ochre is the crown's: the steps' primaries are pale, the card's ink filled with its blue;
   waiting (disabled), an outline in the soft ink, as everywhere. */
#wizard .primary { background: var(--w-ink); color: var(--side); }
#wizard .primary:hover:not(:disabled) { background: #fff; }
#wizard .primary:disabled { background: none; color: var(--soft); }
/* The trace (the wizard upgrade, 2026-10-11): edge to edge across the card's body, through its
   padding, in the middle of its step; wave.ts draws it at the device's pixels. */
#wizard .wave { display: block; flex-shrink: 0; width: calc(100% + 2 * var(--pad)); height: 110px; margin: auto calc(-1 * var(--pad)); }
/* The buttons' row keeps a button's height while none shows (the Microphone Check's Continue
   comes with the first words; Practice's with the reply), so its coming moves nothing. */
#wizard .step-actions { display: flex; flex-wrap: wrap; gap: 12px; min-height: calc(18px + 68px); margin-top: auto; padding-top: 18px; }
/* The consent and the steps' small lines share one small size, in the card's soft ink. */
#wizard .consent, #wizard .small { margin: 14px 0 0; font-size: 14px; line-height: 1.5; color: var(--side-soft); }
/* The world still waking (a cold first crossing waits about half a minute): under the consent, in
   space kept for it, so its showing moves nothing. */
#wizard .waking { margin: 4px 0 0; font-size: 14px; line-height: 1.5; font-style: italic; color: var(--side-soft); visibility: hidden; }
#wizard .waking.shown { visibility: visible; }
/* An error's sentence from the visit before, for a moment, under the heading. */
#wizard .notice { margin: 0 0 14px; padding: 10px 14px; border-radius: var(--r); background: rgb(0 0 0 / .3); font-size: 15px; line-height: 1.4; }
/* Begin's headphones show only beside "Begin" (app.ts's `drawBegin`). */
#begin:not([data-label="begin"]) .phones { display: none; }

/* The Briefing: its label, the story and its assignment, and Make the Crossing held at the card's
   foot while the story scrolls away under it. */
#briefing-body { max-width: 32em; font-size: clamp(17px, 1.8vw, 21px); line-height: 1.45; }
#briefing-body p { margin: 0 0 .75em; text-wrap: pretty; }
#briefing-body > :last-child { margin-bottom: 0; }
/* The assignment's bold run is a line of its own, the paragraph's opening. */
#briefing-body .assignment strong { display: block; font-weight: 700; }
#briefing-body h3 { margin: 1em 0 .4em; font-weight: 600; font-stretch: 112%; font-size: clamp(16px, 1.5vw, 19px); line-height: 1.3; }
/* A list of lines to say: Practice's "Try saying" (2026-10-11) and a script's examples before its
   `---`: quoted, rules between, never buttons. */
#wizard .examples { list-style: none; margin: 0 0 .75em; padding: 0; border-top: 1px solid var(--side-line); }
#wizard .examples li { padding: 10px 0; border-bottom: 1px solid var(--side-line); line-height: 1.35; }
#wizard .examples li::before { content: '“'; }
#wizard .examples li::after { content: '”'; }
#wizard .try-head { margin: 0 0 8px; font-weight: 600; font-stretch: 112%; font-size: clamp(17px, 1.6vw, 19px); line-height: 1.3; }
#step-briefing .acts {
  position: sticky; bottom: 0; margin: auto calc(-1 * var(--pad)) calc(-1 * var(--pad));
  padding: 24px var(--pad) var(--pad); background: linear-gradient(transparent, var(--side) 24px);
}
#cross { min-width: 340px; }

/* The steps' text links (Skip audio; the Microphone Check's "Or type instead", "Type instead" after
   a refusal), under their buttons. */
#wizard .alt { align-self: flex-start; margin-top: 14px; font-size: 15px; color: var(--side-soft); }
/* What Vesper hears (the Microphone Check; Practice): the words quoted, in the player's
   ochre and italic, on an ochre rule; before any, a quiet "Listening…" in their place. */
#wizard .heard { --heard: clamp(18px, 1.9vw, 22px); margin: 22px 0 0; padding: 10px 14px; border-left: 3px solid var(--y-lit); font-size: var(--heard); line-height: 1.4; font-style: italic; color: var(--w-you); overflow-wrap: anywhere; }
/* "Listening…" is smaller, in a line of the words' height, so the first words move nothing. */
#wizard .heard.waiting { border-left-color: var(--side-line); color: var(--side-soft); font-size: 16px; line-height: calc(var(--heard) * 1.4); }
/* The Microphone Check (2026-10-11): the narrator's question quoted in the world's soft ink, the
   soft line under it; under the trace, the hint, text alone. */
#wizard .quote { margin: 0; font-size: clamp(18px, 1.9vw, 22px); line-height: 1.4; color: var(--w-soft); }
#wizard #mic-ask { margin-top: 8px; }
#wizard .hint { margin: 12px 0 0; font-size: 16px; line-height: 1.45; }
/* Its space is kept while it is hidden (the page's [hidden] is display: none), so its showing
   moves nothing, the card on a phone included. */
#wizard .hint[hidden] { display: block !important; visibility: hidden; }
/* Recognition failing after the grant: a line, and Type instead beside it. */
#wizard .trouble { margin: 14px 0 0; font-size: 15px; line-height: 1.5; }
#wizard .trouble .link { margin-left: .4em; font-size: 15px; color: var(--side-soft); }

/* Practice typed: the box and Send in the card. */
.ask-form { display: flex; gap: 10px; margin-top: 22px; }
.ask-form input { flex: 1; min-width: 0; min-height: 52px; padding: 0 14px; border: 0; border-radius: var(--r); background: rgb(0 0 0 / .25); box-shadow: inset 0 0 0 1.5px var(--side-line); font-size: 18px; }
.ask-form input::placeholder { color: var(--side-soft); font-style: italic; opacity: 1; }
.ask-form input:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--side-ink); }
.ask-form input:disabled { opacity: .5; }
.ask-form button { min-height: 52px; }
/* The chamber's reply, captioned as each sentence plays. */
#wizard .reply { margin: 14px 0 0; font-size: clamp(17px, 1.7vw, 20px); line-height: 1.45; }

/* A phone (≤ 680px): the card is the width less 16px each side, its height following its content;
   the buttons share their row; a quarter of the drawing (the stepped tower and the dome's
   shoulder). */
@media (max-width: 680px) {
  #wizard { --pad: 20px; width: calc(100% - 32px); min-height: 0; }
  .wizard-top { min-height: calc(28px + 20px); padding-top: 20px; }
  #wizard .step-actions > button { flex: 1 1 0; min-width: 0; }
  #cross { width: 100%; min-width: 0; }
  .way-in .city img { object-position: 74% 100%; }
}