/* Mission Me — the run-through (play.html). One screen at a time: a phone-sized
   frame on desktop, the full screen on a phone. */

html, body { height: 100%; }
/* The small copy beside the big lines was hard to read (Angoline, Nov): in the run-through it's a
   size up and darker on paper. The design system itself keeps its sizes */
[data-theme="tactile"] .play { --type-body-size: 15px; --type-body-lh: 1.4; --type-small-size: 14px; --type-label-size: 13px; }
[data-theme="tactile"] .play :is(.screen--paper, .screen:has(> .scene--haze), .screen--chapter, .screen--blue, .screen--column, .screen--influence, .on-paper),
[data-theme="tactile"] .sheet__panel { --text-secondary: rgb(20 20 20 / .76); --text-tertiary: rgb(20 20 20 / .62); }
/* Every screen is laid out for one phone size (390 × 844) and still works down to 760 tall.
   play.js measures what the browser leaves free (--vw × --vh) and works out --fit, the scale
   at which the screen fits in it, so nothing is ever cut off or pushed under the buttons.
   On a laptop the run-through sits in a phone (.device, scaled by --dfit to fit the window),
   and can show a phone browser's bars round it (Safari, Chrome), which take their real share
   of the 844, so the screen in between is what that browser would really leave */
.play-body { margin: 0; min-height: 100dvh; position: relative; background: var(--surface-paper); overflow: hidden; }
.device { position: absolute; left: 50%; top: 50%; width: var(--size-screen-w); height: var(--size-screen-h); border-radius: var(--radius-screen); overflow: hidden;
  transform: translate(-50%, -50%) scale(var(--dfit, 1)); box-shadow: 0 24px 64px rgb(20 20 20 / .14); background: var(--surface-paper); }
.play { position: absolute; left: 0; top: var(--sim-top, 0px); width: calc(var(--vw, 390px) / var(--fit, 1)); height: calc(var(--vh, 844px) / var(--fit, 1)); overflow: hidden;
  transform: scale(var(--fit, 1)); transform-origin: 0 0; }
/* Typing on a phone: the screen keeps its size and follows what's visible (play.js), and the phone's
   frame (the whole page on a phone, in paper colour) never shows round it as a strip */
.is-typing .device { overflow: visible; background: none; }
/* With a browser's bars round it the screen sits as it does on a phone: no rounded corners, and
   the phone's spacing at top and bottom (the bars already keep it clear of the notch) */
.device:has(.sim-bar) .play > .screen { border-radius: 0; padding-top: 16px; padding-bottom: 20px; }
/* Safari runs the page up under the status bar, so the screen keeps clear of it as on a phone */
.device[data-sim="safari"] .play > .screen { padding-top: calc(47px / var(--fit, 1) + 16px); }
/* Chrome rounds the page's bottom corners over its dark toolbar */
.device[data-sim="chrome"] .play { z-index: 1; border-radius: 0 0 calc(28px / var(--fit, 1)) calc(28px / var(--fit, 1)); background: var(--surface-paper); }
.play-hint { position: fixed; left: 0; right: 0; bottom: 12px; text-align: center; color: var(--ink-900); opacity: .45; }

/* The phone browser's bars: images cut from iPhone screenshots (iOS 26), 390 wide */
.sim-bar { position: absolute; left: 0; width: 100%; height: auto; z-index: 3; pointer-events: none; }
.sim-bar--top { top: 0; }
.sim-bar--bottom { bottom: 0; }
.sim-bar--chrome.sim-bar--bottom { z-index: 0; }
/* Which browser to preview, outside the phone (laptop only) */
.sim-pick { position: fixed; left: 20px; top: 18px; z-index: 5; display: flex; align-items: center; gap: 6px; font-size: 13px; color: #141414; }
.sim-pick > span { opacity: .55; margin-right: 4px; }
.sim-pick button { padding: 6px 12px; border-radius: 999px; border: 1px solid rgb(20 20 20 / .25); background: none; color: inherit; font: inherit; cursor: pointer; }
.sim-pick button[aria-pressed="true"] { background: #141414; border-color: #141414; color: #fff; }
.sim-pick .sim-pick__restart { margin-left: 18px; border-style: dashed; opacity: .7; }
.sim-pick .sim-pick__restart:hover { opacity: 1; }
.sim-pick .sim-pick__fill { margin-left: 6px; }
.sim-pick .sim-pick__fill:disabled { opacity: .3; cursor: default; }
.sim-pick__lang { display: inline-flex; gap: 6px; margin-left: 18px; }

.play > .screen { position: absolute; inset: 0; width: 100%; height: 100%; display: none; }
.play > .screen.is-current, .play > .screen.is-leaving { display: grid; }
.play > .screen.is-current { animation: play-in 600ms var(--ease-out) both; }
.play > .screen.is-leaving { z-index: 2; pointer-events: none; animation: play-out 500ms var(--ease-in-out) both; }
@keyframes play-in  { from { opacity: 0; } }
@keyframes play-out { to { opacity: 0; } }

/* On a phone: the whole visible area, clear of the notch and home bar. The screen is as big as
   the visible area divided by --fit, then scaled by --fit, so it fills it exactly and is never
   shorter than 760 inside (a short browser window just gets a little extra width) */
@media (max-width: 520px) {
  .play-body { display: block; }
  .device { left: 0; top: 0; width: 100%; height: 100%; transform: none; border-radius: 0; box-shadow: none; }
  .play { top: 0; }
  .sim-bar, .sim-pick { display: none; }
  /* --bar-bottom: room for a browser bar floating over the page (play.js, fit) */
  .play > .screen { border-radius: 0; padding-top: calc(env(safe-area-inset-top) + 16px);
    padding-bottom: max(calc(env(safe-area-inset-bottom) + 20px), calc(var(--bar-bottom, 0px) / var(--fit, 1) + 16px)); }
  .play-hint { display: none; }
}

/* Gradients come in from below: each screen's colour rises into place and fades in as the
   screen opens (the gradient layer, the stop glow, Tea house's arch, the haze). Screens are
   display: none until shown, so it plays every time. */
.play > .screen > .grad-layer { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.play > .screen > :is(.grad-layer, .tea-glow, .scene--haze) { animation: grad-in var(--grad-in-dur) var(--grad-ease) var(--grad-delay) both; }
@media (prefers-reduced-motion: reduce) { .play > .screen > :is(.grad-layer, .tea-glow, .scene--haze) { animation: none; } }
/* ---- Small pieces ------------------------------------------------------------ */
.play__help { display: flex; justify-content: flex-end; padding: 0 var(--space-2); }
.play__help .btn--text { min-height: 32px; }
.play__chips { justify-content: center; }
.play__plain-head { justify-content: space-between; padding: var(--space-half) var(--space-2) 0; }
.play__after { opacity: 0; transition: opacity var(--dur-slow) var(--ease-out); }
.is-answered .play__after { opacity: .6; }
.play__later { opacity: 0; pointer-events: none; transition: opacity var(--dur-slow) var(--ease-out); }
.play__later.is-shown { opacity: 1; pointer-events: auto; }
.scene__dim { position: absolute; inset: 0; z-index: -1; background: rgb(7 9 13 / .3); }

/* Route on the haze */
.play__route { margin-top: var(--space-4); }
.play__route .stop.is-later { opacity: .35; }

/* Breath pacer: play.js plays the Figma timeline and sets --phase (0 → 1 → 0 per
   breath); the circle swells and the word fills with it */
.breath--paced::before { animation: none; transform: scale(calc(.62 + .38 * var(--phase, 0))); }
.breath--paced > span { grid-area: 1 / 1; font-weight: calc(400 + 300 * var(--phase, 0)); letter-spacing: calc(.24em * var(--phase, 0)); }
/* The colour behind the ring breathes with it: the gradient layer swells from the bottom as
   you breathe in (14%) and settles as you breathe out, driven by --breath (0 → 1 → 0) from breathing() */
.play > .play__breathe > .grad-layer { transform: scale(calc(1 + .14 * var(--breath, 0))); transform-origin: 50% 100%; will-change: transform; }
/* The ring's ticks, travelling line and echo belong to Tactile (theme-tactile.css) */
.breath__ticks, .breath__echo, .breath__tail { display: none; }
/* A heading over the breathing ring (Shibuya), in the same heading style as the other
   screens, starting 38px under the bar (y 140 in the frame; under the safe area on a phone) */
[data-theme] .play__breathe-q { position: absolute; left: 24px; right: 24px; top: 140px; z-index: 1; }
@media (max-width: 520px) { [data-theme] .play__breathe-q { top: calc(env(safe-area-inset-top) + 104px); } }
/* Shibuya's thinking animation (thoughtRings() in play.js) */
/* Placed by play.js: centred across the screen, and half-way between the question and Continue
   (--mid), no taller than that space (--room) and at most 384 high. The rings are drawn 342 × 340
   and fade out at the edge */
.think { position: absolute; left: 50%; top: var(--mid, 50%); transform: translate(-50%, -50%); display: grid; place-items: center; }
/* The rings ripple under a touch or swipe anywhere on the screen, so the page mustn't scroll or zoom */
.screen--think { touch-action: none; }
.think__canvas { height: min(384px, var(--room, 340px)); width: auto; aspect-ratio: 342 / 340;
  -webkit-mask-image: radial-gradient(closest-side, #000 86%, transparent); mask-image: radial-gradient(closest-side, #000 86%, transparent); }
/* Skip and Continue share one place: Skip first, and when Continue is due it takes over */
.screen--think .screen__foot > .btn { grid-area: 1 / 1; align-self: center; }
.screen--think .screen__foot > .btn--text { transition: opacity var(--dur-slow) var(--ease-out); }
.screen--think .play__later.is-shown + .btn--text { opacity: 0; pointer-events: none; }

/* Text comes into focus with opacity and blur only, never letter spacing: animating the
   spacing re-lays out the text every frame, so lines re-wrap and jump while it settles
   (a line that fits once settled breaks in two on the way), and it stutters on a phone */
.play .is-live :is(.t-in, .t-stagger > *) { animation-name: play-focus; }
.is-live .closing.t-in { will-change: opacity, filter; }
@keyframes play-focus { from { opacity: 0; filter: blur(12px); } 50% { opacity: 1; } to { opacity: 1; filter: blur(0); } }
/* The line sits over the screen, so Continue goes to the foot row itself */
.closing ~ .screen__foot { grid-row: 3; }
/* So do the stop titles and the bridge, which used to go on with a tap anywhere */
:is(.stop-title, .bridge) ~ .screen__foot { grid-row: 3; position: relative; z-index: 1; }
/* The filter cards are chosen with the button (people missed the press and hold, Nov), so holding
   a card does nothing here */
.play__filters .card-wheel { --hold: 86400000ms; }
.play__filters .wcard.is-holding { --press: 1; }
.play__filters .wcard.is-holding .wcard__face::before { transform: scaleY(0); }
/* A stop's closing reflection always sits centred in the room between the top bar and the button,
   however many lines it runs to (it used to hang from a fixed top, so longer ones sat low), and its
   lines wrap evenly */
.play > .screen > .closing:not(.done-line) { top: 0; bottom: 0; align-content: center; padding-block: 96px; pointer-events: none; }
.play > .screen > .closing:not(.done-line) > * { pointer-events: auto; }
.closing p { text-wrap: balance; }

/* The street (Neon lights) has the journey header here, so its window starts 16px under
   the bar: the bar ends 50px below the screen's top padding (52px in the frame, safe
   area + 16px on a phone). The title and the countdown move down with it. */
.play .screen--street { --head: 118px; }
@media (max-width: 520px) { .play .screen--street { --head: calc(env(safe-area-inset-top) + 82px); } }
.play .screen--street .street { top: var(--head); }
.play .screen--street .street__title { top: calc(var(--head) + 27px); }
.play .screen--street .street-count { top: calc(var(--head) + 9px); }
/* Looking again (from "See again"): no title or countdown, Continue at the foot of the window */
.street__again { display: none; position: absolute; left: 39px; right: 40px; bottom: 48px; z-index: 2; }
.street__again .btn--block { background: transparent; color: var(--white); border: 1px solid rgb(255 255 255 / .3); }
.screen--street.is-again .street__again { display: block; }
.screen--street.is-again :is(.street__title, .street-count) { display: none; }
.screen--street.is-again .street__hint { top: auto; bottom: 116px; }

/* Numbered answers (Figma 355:2586): ink-outlined pills, 58px, the chosen one filled ink */
.play__options { gap: 32px; }
.option-rows { display: grid; gap: 10px; }
.option-row { display: flex; align-items: center; gap: var(--space-2); min-height: 58px; padding: 0 var(--space-2); border-radius: var(--radius-pill);
  border: 1px solid var(--ink-900); background: transparent; color: var(--ink-900); font: inherit; font-size: var(--type-row-size); text-align: left;
  transition: background-color var(--dur) var(--ease-out), color var(--dur) var(--ease-out); }
.option-row__i { min-width: 18px; font-size: var(--type-small-size); opacity: .45; font-variant-numeric: tabular-nums; }
.option-row[aria-checked="true"] { background: #1F1F1F; border-color: #1F1F1F; color: var(--white); }
.option-row[aria-checked="true"] .option-row__i { opacity: .55; }

/* "The Blue was there all along" (Figma 355:3848): the paper, its grain and the blue
   rising from below, exported as one sheet; one line above the blue, one inside it */
/* The paper stays still and only the blue rises in (blue-reveal-glow: the export with its paper
   divided out, multiplied onto the paper) */
/* (its paper background lives in theme-tactile.css: var(--paper) holds a relative url that only resolves from ds/) */
[data-theme="tactile"] .play__reveal > .grad-layer { background: url("assets/img/paper/blue-reveal-glow.webp") center top / cover no-repeat; mix-blend-mode: multiply; }
.play__reveal-line { position: absolute; left: 30px; right: 30px; top: 27.3%; margin: 0; text-align: center; color: var(--ink-900);
  font-size: 22px; line-height: 1.18; }
.play__reveal-line--in { top: 72.7%; color: var(--white); }
.play__reveal .screen__foot { grid-row: 3; }
.play__reveal .btn--block { background: transparent; color: var(--white); border: 1px solid rgb(255 255 255 / .2); }
.play__reveal .btn--text { color: rgb(255 255 255 / .8); }

/* The filter wheel has its own card size here (200 × 300px; the design system's defaults are
   167 × 325px, radius 335px). The heading is short now, so the front card's top comes up to just
   under it, and the radius is wide enough that the cards never touch: at least 12px apart
   anywhere on screen, while the cards either side still show. For that the wheel reaches 30px
   below the bottom. The hub inside is bigger to match (play.js) */
.play__filters .card-wheel { --card-w: 200px; --card-h: 300px; --r: 330px; bottom: -30px; }
/* The backs explain the filter in two sentences, so they're set a size down */
.play__filters .wcard__back { font-size: 15px; line-height: 1.4; letter-spacing: 0; }

/* Shibuya, "What was in that moment?": the line to write your own shows once "Something else" is picked */
.play__own { display: none; margin-top: 0; }
.is-own .play__own { display: grid; }

/* Metro map: four Confident / Unsure lines stacked, one per situation, on the paper in ink;
   on the summary a soft violet route (the stop's colour) runs through the dots. Every dot
   starts in the middle and any line can be moved; the line you're on has its name in a pill
   and a warm glow round its dot. */
.metro-rows { --name: 96px; position: absolute; left: var(--gutter); right: var(--gutter); top: 44%; display: grid; gap: 30px;
  touch-action: none; -webkit-user-select: none; user-select: none; color: var(--ink-900); }
.metro-rows__ends, .metro-row { display: grid; grid-template-columns: var(--name) 1fr; align-items: center; }
.metro-rows__ends { margin-bottom: -14px; }
.metro-rows__ends > * { grid-row: 1; grid-column: 2; }
.metro-rows__ends > :last-child { justify-self: end; }
.metro-rows__ends, .metro-row__name { font-family: var(--font-kicker, inherit); font-size: 10px; font-style: normal; letter-spacing: .1em; text-transform: uppercase; }
.metro-rows__ends { color: rgb(20 20 20 / .45); }
.metro-row { position: relative; z-index: 1; cursor: grab; transition: opacity var(--dur-slow) var(--ease-out); }
.metro-row.is-locked { opacity: .35; cursor: default; }
.metro-row.is-dragging { cursor: grabbing; }
.metro-row__name { justify-self: start; margin-left: -10px; padding: 7px 10px; border-radius: var(--radius-pill); color: rgb(20 20 20 / .6);
  transition: background-color var(--dur) var(--ease-out), color var(--dur) var(--ease-out); }
.metro-row.is-active .metro-row__name { background: rgb(20 20 20 / .07); color: var(--ink-900); }
.metro-rows .metro__line { height: 1px; border-radius: 0; background: rgb(20 20 20 / .22); }
.metro-rows .metro__dot { width: 10px; height: 10px; margin: -5px 0 0 -5px; background: var(--ink-900); box-shadow: none;
  transition: width var(--dur) var(--ease-out), height var(--dur) var(--ease-out), margin var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out), opacity var(--dur) var(--ease-out); }
/* Every dot starts in the middle; until you've moved it, it's faded */
.metro-row:not(.is-set) .metro__dot { opacity: .35; }
.metro-row.is-active:not(.is-set) .metro__dot { opacity: .6; }
/* Each line starts and ends in a small open circle, under Confident and Unsure */
.metro-rows .metro__end { width: 7px; height: 7px; margin: -3.5px 0 0 -3.5px; background: var(--paper-100, #EFEDE9); border: 1px solid rgb(20 20 20 / .45); }
.metro-rows .metro__end + .metro__end { left: 100%; }
/* The line you're on: a bigger dot in a warm glow */
.metro-row.is-active .metro__dot { width: 14px; height: 14px; margin: -7px 0 0 -7px; box-shadow: 0 0 0 5px rgb(247 136 37 / .28), 0 0 18px 8px rgb(254 100 72 / .3); }
.metro-row.is-dragging .metro__dot { transform: scale(1.2); }
/* Letting go: an ink echo opens out from the dot */
.metro-rows .metro__dot::after { content: ""; position: absolute; inset: -6px; border-radius: 50%; border: 1px solid rgb(20 20 20 / .35); opacity: 0; pointer-events: none; }
.metro-rows .metro__dot.is-placed::after { animation: metro-echo 1.4s var(--ease-out) both; }
@keyframes metro-echo { from { opacity: .8; transform: scale(1); } to { opacity: 0; transform: scale(2.8); } }
/* The route, only on the summary: a soft haze swelling into a big glow at each dot, lilac into
   violet, grained and printed into the paper under the lines (built in metroRoute). It comes in
   in one step: the band fades in while all the swells grow, together. */
.metro-route { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; display: none;
  mix-blend-mode: var(--glow-blend, multiply); }
.metro-rows--spread .metro-route { display: block; }
.metro-route path { fill: none; stroke-linecap: round; stroke-linejoin: round; }
/* After Figma 383:11924, tuned by eye against it and a little fuller: Figma's blur reads
   softer than the same number in SVG, so the blurs here are smaller */
.metro-route__haze { stroke-width: 34; opacity: 0; }
.metro-route__blob { opacity: 0; transform: scale(.35); transform-box: fill-box; transform-origin: center; }
.metro-route.is-drawn .metro-route__haze { opacity: .62; transition: opacity 1400ms var(--ease-out) 600ms; }
.metro-route.is-drawn .metro-route__blob { opacity: .75; transform: none; transition: opacity 1000ms var(--ease-out) 600ms, transform 1600ms var(--ease-out) 600ms; }
/* The summary: no dragging, every line at full strength */
.metro-rows--spread, .metro-rows--spread .metro-row { cursor: default; pointer-events: none; }
@media (prefers-reduced-motion: reduce) { .metro-route .metro-route__haze { opacity: .62; transition: none !important; } .metro-route .metro-route__blob { opacity: .75; transform: none; transition: none !important; } }

/* Tea house (Figma DB8Ax… 390:12368) ------------------------------------------------ */
/* The glow: a tall soft arch of green from y 311 (Figma 390:12347, 390:12349), multiplied
   into the paper so the sheet shows through. Its colours carry the 15% white wash the frames
   lay over it. Deep green under "Impose"; the lighter one fades in from "Choose" on */
.tea-glow { position: absolute; inset: 0; z-index: -1; pointer-events: none; mix-blend-mode: multiply; }
.tea-glow > i { position: absolute; left: 0; top: 311px; width: 100%; height: 699px; border-radius: 195px; filter: blur(41px); }
.tea-glow__deep { background: radial-gradient(344px 617px at 50% 43px, rgb(188 224 192), rgb(155 200 151) 50%, rgb(122 177 111)); }
.tea-glow__light { background: radial-gradient(344px 617px at 50% 43px, rgb(222 230 179), rgb(186 211 155) 50%, rgb(150 192 132));
  opacity: 0; transition: opacity 1600ms var(--ease-in-out); }
.is-chosen .tea-glow__light { opacity: 1; }
/* The same arch in the Karaoke room's colours (#F3A7C4 → #B98BE0, with the same white wash), for its result */
.tea-glow--karaoke .tea-glow__deep { background: radial-gradient(344px 617px at 50% 43px, rgb(247 214 228), rgb(228 186 222) 50%, rgb(196 160 232)); }
/* And in the Dojo and garden's greens (#B5D4A6 → #7FAF83), for its result */
.tea-glow--dojo .tea-glow__deep { background: radial-gradient(344px 617px at 50% 43px, rgb(218 234 211), rgb(192 218 179) 50%, rgb(146 187 150)); }
/* Three headings in one place, one shown at a time: told, again, the question */
.tea-heads { display: grid; }
.tea-heads > * { grid-area: 1 / 1; opacity: 0; visibility: hidden; transition: opacity var(--dur-slow) var(--ease-out), visibility 0s var(--dur-slow); }
.tea-heads > :nth-child(1),
.is-chosen .tea-heads > :nth-child(2),
.is-asked .tea-heads > :nth-child(3) { opacity: 1; visibility: visible; transition-delay: 0s; }
.is-chosen .tea-heads > :nth-child(1),
.is-asked .tea-heads > :nth-child(2) { opacity: 0; visibility: hidden; transition-delay: 0s, var(--dur-slow); }
/* The sentence: 234 wide at y 371, centred, a small label over it (Figma 392:3111). The words
   are there for layout and screen readers; what shows is the canvas of dots over them
   (play.js), reaching 220px past them on every side so the cloud has room to spread */
.tea-card { position: absolute; left: 50%; top: 371px; pointer-events: none; width: 234px; margin-left: -117px; display: grid; justify-items: center; gap: 18px; text-align: center; }
.tea-card__label { display: grid; font-size: var(--type-small-size); line-height: normal; color: var(--text-secondary); }
.tea-card__label > * { grid-area: 1 / 1; transition: opacity var(--dur-slow) var(--ease-out); }
.tea-card__label > :last-child, .is-chosen .tea-card__label > :first-child { opacity: 0; }
.is-chosen .tea-card__label > :last-child { opacity: 1; }
.tea-card__text { position: relative; width: 100%; margin: 0; font-size: 26px; line-height: 34px; color: var(--text-primary); }
.tea-card__text em { font-style: italic; font-weight: inherit; }
.grain__said { color: transparent; }
/* As the grain arrives, the new sentence comes into focus underneath it */
.is-chosen .grain__said { color: var(--text-primary); animation: tea-focus 1800ms var(--ease-out) 500ms both; }
@keyframes tea-focus { from { opacity: 0; filter: blur(8px); } }
@media (prefers-reduced-motion: reduce) { .is-chosen .grain__said { animation: none; } }
.grain canvas { position: absolute; left: -220px; top: -220px; pointer-events: none; }
.screen--tea { cursor: pointer; }
.screen--tea.is-played { cursor: default; }
.tea-tap { position: absolute; left: var(--gutter); right: var(--gutter); top: 720px; margin: 0; pointer-events: none; font-size: var(--type-small-size); line-height: normal; color: var(--text-secondary); text-align: center;
  transition: opacity var(--dur-slow) var(--ease-out); }
.is-played .tea-tap { opacity: 0; }
/* The answers: outlined pills at the foot, in once the question is up (Figma 392:3165) */
.tea-answers { display: grid; gap: 8px; padding-bottom: 12px; opacity: 0; pointer-events: none; transition: opacity var(--dur-slow) var(--ease-out); }
.is-asked .tea-answers { opacity: 1; pointer-events: auto; }
.tea-answer { justify-content: center; min-height: 43px; padding: 12px 14px; border-color: rgb(30 30 30 / .2); font-size: 14px; color: var(--ink-btn, #1E1E1E); }
/* The line for your answer, centred at y 400 (Figma 392:3084) */
.tea-line { position: absolute; left: var(--gutter); right: var(--gutter); top: 400px; text-align: center; font-size: var(--type-title-size); line-height: 34px; color: var(--text-primary); }
/* a sentence that has to wrap breaks into even lines, never one word alone */
.tea-line p { margin: 0; text-wrap: balance; }
/* ...or centred up and down in the space between the journey header and Continue */
.tea-line--middle { top: 110px; bottom: 110px; display: grid; align-content: center; }
.tea-line .tea-line__lead { margin-bottom: var(--space-2); }   /* a description over the line, as a small lead-in */
.tea-line .tea-line__next { margin-top: 34px; }   /* a second statement, one blank line down */
.screen--tea .screen__foot { grid-row: 3; }

/* The last train: the drag screen (here only; screens.html keeps the system's layout) ------ */
/* The question sits on the axis between the two circles (their centres are at 133 and
   844 − 28), measured by the words alone. Continue has its own room under it, 48px the block
   keeps clear (so the words stay out of it) and shifts by half, so the text stays centred */
.play .screen--influence .screen__body { position: static; }
.play .screen--influence .drift-head { top: calc(50% + 52px); padding-bottom: 48px; transform: translateY(calc(-50% + 24px)); z-index: 1; }
.play .screen--influence .drift-next { position: absolute; bottom: 0; left: 0; right: 0; width: max-content; margin: 0 auto; }
/* "Can" and "Can't" in grey, so the words are what stand out (white still, once a circle fills) */
.play .screen--influence .drift__circle:not(.is-over) .drift__label { color: var(--text-secondary); }
/* The words in periwinkle ink: the station's colour (its glow runs #9FB0F2 → #5E73DD) worked
   down toward the ink, so it reads as printed colour on the paper (6:1) */
.play .screen--influence .drift__word:not(.is-inverted) { color: #4C5396; }
/* The circles grow and give way without the springy overshoot */
.play .screen--influence .drift__circle { transition-timing-function: var(--ease-out); }

/* Setting the scene: the stop's picture is still to be drawn, so a quiet placeholder fills the
   room under the heading and says what will go there */
.scene-art { flex: 1; min-height: 160px; margin-top: var(--space-1); display: grid; align-content: center; justify-items: center; gap: 6px;
  padding: var(--space-3); border: 1px dashed rgb(20 20 20 / .22); border-radius: 24px; background: rgb(255 255 255 / .18);
  text-align: center; color: var(--text-tertiary); font-size: var(--type-small-size); line-height: var(--type-small-lh); }
.scene-art > :first-child { font-size: var(--type-caption-size); letter-spacing: .08em; text-transform: uppercase; }
.scene-art > :last-child { max-width: 240px; font-style: italic; }
.screen--scene .screen__foot > .t-meta { display: block; }
/* …and where the film has come, it fills that room edge to edge (black while it loads) */
.scene-art--film { padding: 0; border: 0; overflow: hidden; background: #000; position: relative; }
.scene-art.scene-art--film > video { position: absolute; inset: 0; width: 100%; max-width: none; height: 100%; object-fit: cover; }
.scene-art.scene-art--film > .street__win { max-width: none; }   /* Neon lights: the street itself, live (neon-street.js) */
/* A film comes first: full screen under the journey header (made light over it), the heading and
   Continue held back. Then it settles into its window, the heading coming in as it goes and
   Continue once it's there (play.js playFilm) */
.scene-full { position: absolute; z-index: 1; top: 0; left: 0; width: 100%; height: 100%; overflow: hidden; background: #000; display: none;
  transition: top var(--dur-scene) var(--ease-in-out), left var(--dur-scene) var(--ease-in-out), width var(--dur-scene) var(--ease-in-out),
    height var(--dur-scene) var(--ease-in-out), border-radius var(--dur-scene) var(--ease-in-out); }
.scene-full > video { display: block; width: 100%; height: 100%; object-fit: cover; }
/* a faint shade at the top, so the header reads over a bright picture; gone as it settles */
.scene-full::after { content: ""; position: absolute; z-index: 1; inset: 0 0 auto; height: 160px; pointer-events: none;
  background: linear-gradient(rgb(0 0 0 / .5), transparent); transition: opacity var(--dur-slow) var(--ease-out); }
.screen--scene.is-settling > .scene-full::after { opacity: 0; }
.screen--scene:is(.is-film, .is-settling) > .scene-full { display: block; }
.screen--scene > .screen__top { position: relative; z-index: 2; }
.screen--scene.is-film > .screen__top { --text-primary: #fff; --text-secondary: rgb(255 255 255 / .82); --text-tertiary: rgb(255 255 255 / .7); color: #fff; }
.screen--scene:has(> .scene-full) .heading { --delay: 400ms; }
.screen--scene.is-film :is(.heading, .screen__foot) { opacity: 0; animation: none; pointer-events: none; }
.screen--scene:has(> .scene-full) .screen__foot { transition: opacity var(--dur-slow) var(--ease-out) var(--dur-scene); }
.screen--scene.is-film .screen__foot { transition: none; }
/* Sunrise: the sky is drawn, the land is filmed. The sky's own colours move from night (the night
   tokens) through the blue hour and dawn to morning over 10 s (as long as the film), four colours
   from the top down to the film's horizon (60%, the foot of the mountain) and a warm glow there
   that only comes with the light, with the films' grain. The film is multiplied over it, so its
   white sky takes the gradient's colour. Both go full screen first and settle into the window
   together. Plays once and holds; with reduced motion it is morning straight away.
   (Not the .sky component: that is a background) */
@property --dawn-1 { syntax: "<color>"; inherits: false; initial-value: transparent; }
@property --dawn-2 { syntax: "<color>"; inherits: false; initial-value: transparent; }
@property --dawn-3 { syntax: "<color>"; inherits: false; initial-value: transparent; }
@property --dawn-4 { syntax: "<color>"; inherits: false; initial-value: transparent; }
@property --dawn-glow { syntax: "<color>"; inherits: false; initial-value: transparent; }
:is(.scene-art.scene-art--film, .scene-full) > .sunrise { position: absolute; inset: 0; max-width: none; font-size: 0; isolation: isolate; }
.sunrise > .dawn { position: absolute; inset: 0;
  background: radial-gradient(120% 40% at 50% 60%, var(--dawn-glow), transparent 75%),
    linear-gradient(180deg, var(--dawn-1) 0%, var(--dawn-2) 24%, var(--dawn-3) 44%, var(--dawn-4) 60%);
  animation: dawn 10s cubic-bezier(.4, 0, .3, 1) both; }
/* the films' grain, light and dark specks, at film strength (the system's --grain is set to 0 in the tactile theme) */
.dawn::after { content: ""; position: absolute; inset: 0; opacity: .55; mix-blend-mode: overlay; pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.95' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E"); }
.sunrise > video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; mix-blend-mode: multiply; }
@keyframes dawn {
  from { --dawn-1: var(--night-edge); --dawn-2: #0A0E22; --dawn-3: #141B36; --dawn-4: var(--night-core); --dawn-glow: rgb(255 200 150 / 0); }
  30% { --dawn-1: #0A1030; --dawn-2: #1A2156; --dawn-3: #3A2D6A; --dawn-4: #5B3A72; --dawn-glow: rgb(255 190 150 / 0); }
  62% { --dawn-1: #1E2A5C; --dawn-2: #4A4A86; --dawn-3: #A3657F; --dawn-4: #E08A6A; --dawn-glow: rgb(255 200 150 / .35); }
  to { --dawn-1: #8C8DB6; --dawn-2: #E3A48C; --dawn-3: #F5AE78; --dawn-4: #F9C46B; --dawn-glow: rgb(255 228 180 / .7); } }
@media (prefers-reduced-motion: reduce) { .sunrise > .dawn { animation-duration: 1ms; } }

/* "Between two blinks" */
.screen.is-blinking::after { content: ""; position: absolute; inset: 0; z-index: 5; background: #000; pointer-events: none; animation: play-blink 700ms 350ms both; }
@keyframes play-blink { 0% { opacity: 0; } 35%, 60% { opacity: 1; } 100% { opacity: 0; } }

/* Sunrise: the light comes up before anything else */
.play__dawn .scene__img { animation: play-dawn 5s var(--ease-out) both; }
@keyframes play-dawn { from { filter: brightness(.2) saturate(.5); transform: scale(1.06); } }

/* ---- Look around: a wide street you drag (or tilt) along -------------------- */
.play__pan { touch-action: none; cursor: grab; }
.play__pan-layer { position: absolute; top: 0; bottom: 0; left: 0; aspect-ratio: 768 / 512; will-change: transform; }
.play__pan-layer img { width: 100%; height: 100%; display: block; user-select: none; -webkit-user-drag: none; pointer-events: none; }
.play__spot { position: absolute; width: 64px; height: 64px; margin: -32px 0 0 -32px; border-radius: 50%; color: var(--white); }
.play__spot::before { content: ""; position: absolute; inset: 18px; border-radius: 50%; border: 1px solid var(--white-30); animation: play-spot 3.2s var(--ease-in-out) infinite; }
.play__spot > span { position: absolute; left: 50%; top: 100%; transform: translate(-50%, 4px); white-space: nowrap; opacity: 0; transition: opacity var(--dur) var(--ease-out); }
.play__spot.is-picked::before { inset: 8px; border-color: var(--white); background: var(--white-16); animation: none; transition: inset var(--dur) var(--ease-spring); }
.play__spot.is-picked > span { opacity: 1; }
@keyframes play-spot { 0%, 100% { transform: scale(.7); opacity: .4; } 50% { transform: scale(1); opacity: .9; } }

/* ---- Paper answers (sunrise, mission) ----------------------------------------- */
.play__then { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-1); }
.play__card { display: grid; align-content: start; gap: var(--space-1); min-height: 150px; padding: var(--space-2); border-radius: var(--radius-l); background: var(--surface-glass); border: 1px solid var(--border-glass); box-shadow: var(--glass-shadow); }
.play__card--now { background: none; border: 1px dashed var(--indicator-inactive); box-shadow: none; }
.play__card textarea { width: 100%; border: 0; background: none; resize: none; color: inherit; font: inherit; padding: 0; outline: none; }
.play__scale { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--space-1); margin-top: var(--space-3); }
.play__num { display: grid; place-items: center; height: 56px; border-radius: var(--radius-m); background: var(--surface-glass); border: 1px solid var(--border-glass); box-shadow: var(--glass-shadow); color: var(--text-primary); font-size: var(--type-body-l-size); transition: background-color var(--dur) var(--ease-out), color var(--dur) var(--ease-out); }
.play__num[aria-checked="true"], .play__chip-ink[aria-checked="true"] { background: var(--indicator-active); color: var(--action-primary-fg); border-color: transparent; }
.play__chip-ink { color: var(--text-primary); border: 1px solid var(--border-glass); box-shadow: var(--glass-shadow); }
.play__mission { min-height: 0; gap: var(--space-half); padding: var(--space-2) var(--space-20); background-color: var(--surface-glass); border: 1px solid var(--border-glass); box-shadow: var(--glass-shadow); }
.play__mission[aria-checked="true"] .t-muted { opacity: .7; }
.play__influence .zone { min-height: 132px; }

/* ---- Sheets: help and pause ------------------------------------------------------ */
.sheet { position: absolute; inset: 0; z-index: 20; display: flex; align-items: flex-end; background: rgb(7 9 13 / .32); opacity: 0; pointer-events: none; transition: opacity var(--dur) var(--ease-out); }
.sheet.is-open { opacity: 1; pointer-events: auto; }
.sheet__panel { display: grid; gap: var(--space-2); width: 100%; padding: var(--space-2) var(--gutter) calc(var(--space-4) + env(safe-area-inset-bottom)); border-radius: var(--radius-l) var(--radius-l) 0 0;
  background: var(--paper-50); color: var(--ink-900); transform: translateY(24px); transition: transform var(--dur-slow) var(--ease-out); }
.sheet.is-open .sheet__panel { transform: none; }
/* Only the sheet you asked for: the panels' display: grid would otherwise override [hidden],
   so Help and Pause opened together, one on top of the other */
.sheet__panel[hidden] { display: none; }
.sheet__grip { justify-self: center; width: 36px; height: 4px; border-radius: 2px; background: var(--rule-light); margin-bottom: var(--space-1); }
.sheet__list { display: grid; border-top: 1px solid var(--rule-light); }
.sheet__row { display: grid; gap: 2px; padding: 14px 0; border-bottom: 1px solid var(--rule-light); color: inherit; text-decoration: none; }
.sheet__tools { display: grid; gap: var(--space-1); margin-top: var(--space-2); padding-top: var(--space-2); border-top: 1px solid var(--rule-light); }
.sheet__jump { display: flex; justify-content: space-between; align-items: center; gap: var(--space-2); }
.sheet__jump select { max-width: 60%; height: 40px; padding: 0 var(--space-1); border-radius: var(--radius-m); border: 1px solid var(--rule-light); background: none; color: inherit; }


/* Stop card: the picture resolves, then softens so the name can sit on it */
.play__stopcard .scene__img { animation: play-soften 1.6s 1.1s var(--ease-out) both; }
@keyframes play-soften { to { filter: blur(14px) brightness(.72); transform: scale(1.12); } }

/* After the journey: a smaller second line under AMMA's closing, and the way back from the mission screens */
.closing .closing__more { font-size: 16px; line-height: 23px; max-width: 270px; color: var(--text-secondary); }
.reflect-back { justify-self: start; padding-left: 0; }
/* ---- After the journey: the ending and the welcome into Reflect (Figma 476:29682) ----------
   The backgrounds are Giorgiana's frames themselves (paper, its light and grain), exported from
   Figma: they crossfade from one state to the next instead of the light being redrawn here */
.screen--done, .screen--welcome { grid-template-rows: auto 1fr auto; }
.rbg { position: absolute; inset: 0; z-index: 0; pointer-events: none; background: center top / cover no-repeat; opacity: 0; transition: opacity 2200ms var(--ease-in-out); }
.rbg--complete-1 { background-image: url("assets/img/paper/reflect-bg-complete-1.jpg"); }
.rbg--complete-2 { background-image: url("assets/img/paper/reflect-bg-complete-2.jpg"); }
.rbg--complete-3 { background-image: url("assets/img/paper/reflect-bg-complete-3.jpg"); }
.rbg--welcome { background-image: url("assets/img/paper/reflect-bg-welcome.jpg"); }
.rbg--reflect { background-image: url("assets/img/paper/reflect-bg-reflect.jpg"); }
.rbg--reflect-sheet { background-image: url("assets/img/paper/reflect-bg-reflect-sheet.jpg"); }
/* Journey complete: the sun low, then risen; Continue turns it to Reflect's blue */
.screen--done .rbg--complete-1 { opacity: 1; }
.screen--done.is-rising .rbg--complete-2 { opacity: 1; transition-duration: 2600ms; }
.screen--done.is-reflect .rbg--complete-3 { opacity: 1; z-index: 0; }
.screen--done.is-reflect .rbg--complete-2 { opacity: 0; transition-delay: 600ms; }
/* Welcome: the low blue rises into the high one */
.screen--welcome .rbg--complete-3 { opacity: 1; }
.screen--welcome .rbg--welcome { opacity: 1; animation: rbg-in 1800ms var(--ease-out) both; }
@keyframes rbg-in { from { opacity: 0; } }
/* The Reflect home, and its sheet states */
.screen--rf .rbg--reflect { opacity: 1; }
.done-toggle { display: flex; justify-content: center; position: relative; z-index: 6; transition: opacity 900ms var(--ease-out); }
.screen--done .done-toggle { opacity: 0; pointer-events: none; }
.screen--done.is-reflect .done-toggle { opacity: 1; pointer-events: auto; }
.done-line { transition: opacity 1100ms var(--ease-in-out); }
.done-line--reflect { top: 31.6%; opacity: 0; }
.screen--done.is-reflect .done-line--end { opacity: 0; }
.screen--done.is-reflect .done-line--reflect { opacity: 1; transition-delay: 700ms; }
/* The foot holds both buttons in one place: Continue once the sunrise has risen, then Continue to Reflect */
.done-foot { position: relative; z-index: 1; display: grid; }
.done-foot > .btn { grid-area: 1 / 1; opacity: 0; pointer-events: none; transition: opacity 900ms var(--ease-out); }
.screen--done.is-rising .done-continue { opacity: 1; pointer-events: auto; transition-delay: 2000ms; }
.screen--done.is-reflect .done-continue { opacity: 0; pointer-events: none; transition-delay: 0ms; }
.screen--done.is-reflect .done-foot > [data-next] { opacity: 1; pointer-events: auto; transition-delay: 1600ms; }
/* Welcome: the blue arch high, the words in the middle; then the sheet rises over a soft dim */
.welcome-title { position: absolute; left: 30px; right: 30px; top: 42.3%; text-align: center; color: var(--text-primary); transition: transform 700ms var(--ease-out); }
.welcome-title h2 { margin: 0; font-size: 42px; line-height: 50px; font-weight: 400; }
.welcome-title p { margin: 8px 0 0; font-size: 15px; line-height: 22px; color: var(--text-secondary); }
.screen--welcome.is-sheet .welcome-title { transform: translateY(-199px); }
.ws-dim { position: absolute; inset: 0; z-index: 4; background: rgb(0 0 0 / .2); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); opacity: 0; pointer-events: none; transition: opacity 600ms var(--ease-out); }
.screen--welcome.is-sheet .ws-dim { opacity: 1; }
.ws-sheet { position: absolute; left: 0; right: 0; top: 13%; bottom: 0; z-index: 5; background: #FFF; border-radius: 45px 45px 0 0; transform: translateY(102%); transition: transform 650ms var(--ease-out); }
.screen--welcome.is-sheet .ws-sheet { transform: none; }
.ws-sheet__handle { position: absolute; top: 15px; left: 50%; width: 62px; height: 5px; margin-left: -31px; border-radius: 3px; background: rgb(20 20 20 / .15); }
.ws-pane { position: absolute; inset: clamp(48px, 8.6%, 73px) 33px 0; display: flex; flex-direction: column; transition: opacity 400ms var(--ease-out), transform 400ms var(--ease-out); }
.ws-pane--nudge, .screen--welcome[data-step="nudge"] .ws-pane--mission { opacity: 0; pointer-events: none; transform: translateX(30px); }
.screen--welcome[data-step="nudge"] .ws-pane--mission { transform: translateX(-30px); }
.screen--welcome[data-step="nudge"] .ws-pane--nudge { opacity: 1; pointer-events: auto; transform: none; }
.ws-title { margin: 0 auto; max-width: 250px; text-align: center; font-size: 28px; line-height: 36px; font-weight: 400; color: var(--text-primary); }
.ws-sub { margin: 16px auto 0; max-width: 324px; text-align: center; font-size: 15px; line-height: 22px; color: var(--text-secondary); }
.ws-options { display: grid; gap: 10px; margin-top: clamp(24px, 5.7%, 48px); transition: opacity 260ms var(--ease-out); }
.ws-options.is-shuffling { opacity: 0; }
.ws-option { position: relative; display: grid; gap: 4px; padding: 18px 48px 18px 24px; border-radius: 18px; border: 1px solid rgb(20 20 20 / .1); background: none;
  text-align: left; font: inherit; color: var(--text-primary); cursor: pointer; transition: background var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out); }
.ws-option[aria-checked="true"] { background: rgb(20 20 20 / .05); border-color: rgb(0 0 0 / .5); }
.ws-option:focus:not(:focus-visible) { outline: none; box-shadow: none; }   /* no extra ring after a tap; keyboard focus keeps it */
.ws-option__area { font-size: 10px; line-height: 14px; letter-spacing: .12em; text-transform: uppercase; color: rgb(20 20 20 / .55); }
.ws-option__title { font-size: 17px; line-height: 23px; }
.ws-option__note { font-size: 13px; line-height: 19px; color: rgb(20 20 20 / .65); }
.ws-radio { position: absolute; right: 18px; top: 18px; width: 18px; height: 18px; border-radius: 50%; border: 1px solid rgb(20 20 20 / .35); }
.ws-option[aria-checked="true"] .ws-radio { border-color: var(--ink-900); background: radial-gradient(circle, var(--ink-900) 4px, transparent 4.5px); }
.ws-option--row { padding: 17px 48px 17px 24px; border-radius: 999px; }
.ws-option--row .ws-radio { top: 50%; margin-top: -9px; }
/* The buttons sit at the bottom of the sheet; on a short screen the content scrolls above them */
.ws-scroll { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; overflow-y: auto; scrollbar-width: none; margin: 0 -33px; padding: 0 33px 8px; }
.ws-scroll::-webkit-scrollbar { display: none; }
.ws-foot { position: relative; flex: none; margin: 0 -33px; padding: 16px 33px calc(24px + env(safe-area-inset-bottom)); display: grid; justify-items: center; background: #FFF; }
.ws-foot::before { content: ""; position: absolute; left: 0; right: 0; bottom: 100%; height: 20px; background: linear-gradient(rgb(255 255 255 / 0), #FFF); pointer-events: none; }
.ws-foot .btn--block { width: 100%; }
.ws-shuffle { display: inline-flex; align-items: center; gap: 10px; padding: 14px 36px; border-radius: 999px; border: 1px solid rgb(20 20 20 / .12); background: #FFF;
  font: inherit; font-size: 15px; color: var(--text-primary); cursor: pointer; }
.ws-shuffle svg { width: 22px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; }
.ws-continue, .screen--welcome.is-chosen .ws-shuffle { display: none; }
.screen--welcome.is-chosen .ws-continue { display: flex; }
.ws-foot--stack { gap: 8px; }
.ws-bell { align-self: center; color: #197FED; display: grid; place-items: center; width: 48px; height: 48px; margin-bottom: 16px; border-radius: 50%; background: rgb(25 127 237 / .1); flex: none; }
.ws-bell svg { width: 20px; height: 20px; fill: none; stroke: #197FED; stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; }
/* Journey | Reflect: a soft glass pill, as in the Figma frames (no ink outline) */
[data-theme] .play .toggle { position: relative; height: 48px; padding: 0 4px; border: 0; background: rgb(255 255 255 / .6); -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px);
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / .7), 0 16px 40px rgb(20 20 20 / .06); }
/* The black pill is one shape that slides between the two (--on: 0 Journey, 1 Reflect), the words
   crossfading from ink to white under it */
[data-theme] .play .toggle { isolation: isolate; }   /* keeps the pill under the words in Safari, whose blur can lift it above them */
[data-theme] .play .toggle::before { content: ""; position: absolute; z-index: 0; top: 4px; left: 4px; width: 108px; height: 40px; border-radius: 999px; background: var(--ink-900); will-change: transform;
  transform: translateX(calc(var(--on, 0) * 108px)); transition: transform 560ms cubic-bezier(.65, 0, .35, 1); }
[data-theme] .play .toggle__opt { position: relative; z-index: 1; width: 108px; white-space: nowrap;   /* room for the lock and Refleksjon on one line, clear of the black pill */ min-width: 0; height: 40px; padding: 0; font-size: 13px; background: none; color: rgb(20 20 20 / .6);
  transition: color 420ms var(--ease-in-out) 80ms; }
[data-theme] .play .toggle__opt[aria-pressed="true"] { background: none; color: var(--white); }
.screen--welcome .done-toggle { z-index: 3; }   /* dimmed under the sheet, as in the frames */

/* Reflect locked until the first journey is done: faded, with a small lock; a tap shakes it and
   a line under the toggle says when it opens */
.toggle__lock { display: none; width: 10px; height: 12px; margin: -2px 5px 0 0; vertical-align: middle; fill: none; stroke: currentColor; stroke-width: 1.2; stroke-linecap: round; }
[data-theme] .play .toggle.is-locked .toggle__opt:last-child { color: rgb(20 20 20 / .35); }
.toggle.is-locked .toggle__lock { display: inline-block; }
.toggle.is-nope { animation: toggle-nope 420ms var(--ease-out); }
@keyframes toggle-nope { 20% { transform: translateX(4px); } 45% { transform: translateX(-3px); } 70% { transform: translateX(2px); } }
.toggle-hint { position: absolute; top: calc(100% + 10px); left: 50%; width: 260px; margin: 0 0 0 -130px; text-align: center; font-size: 12px; line-height: 17px; color: var(--text-secondary);
  opacity: 0; transform: translateY(-4px); transition: opacity 400ms var(--ease-out), transform 400ms var(--ease-out); pointer-events: none; }
.toggle-hint.is-on { opacity: 1; transform: none; }

/* ---- A walked journey: Completed on the Journey tab, and the overview as a place to look back ----
   Tapping a stop in the list opens a sheet with its question, what you noticed, and its line */
.walked-check { width: 11px; height: 11px; margin: -2px 5px 0 0; vertical-align: middle; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
/* The journey's list, the same new, in progress and walked: a quiet numbered list with room to
   breathe, no timeline. A walked stop's number turns to a check; where you begin or carry on has
   a small ink tag. Rows you can open are in ink with a chevron; the rest wait in grey */
.map-list__go { display: none; }
/* Its heading: a balanced title and one line of body */
[data-theme] .screen--overview .heading { gap: 10px; }
[data-theme] .screen--overview .heading__title { text-wrap: balance; }
[data-theme] .screen--overview .heading__body { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* In list view the heading and the list scroll as one, under the top bar and above the button */
[data-theme] .screen--map .map-list { position: static; flex: none; margin: 20px 0 0; padding: 0; overflow: visible; background: none; }
.screen--map:not(.is-list) .map-list { display: none; }
.screen--map.is-list .screen__body { overflow-y: auto; scrollbar-width: none; margin: 0 calc(-1 * var(--gutter)); padding: 38px var(--gutter) 28px;
  -webkit-mask-image: linear-gradient(transparent, #000 16px, #000 calc(100% - 36px), transparent); mask-image: linear-gradient(transparent, #000 16px, #000 calc(100% - 36px), transparent); }
.screen--map.is-list .screen__body::-webkit-scrollbar { display: none; }
[data-theme] .play .screen--map .map-list li { height: 50px; grid-template-columns: 30px minmax(0, 1fr) auto 16px; gap: 0 12px; padding: 0 4px 0 0; color: var(--text-tertiary);
  box-shadow: inset 0 -1px 0 rgb(20 20 20 / .08); transition: background-color 200ms var(--ease-out), color 200ms var(--ease-out); -webkit-tap-highlight-color: transparent; }
[data-theme] .play .screen--map .map-list li:last-child { box-shadow: none; }
[data-theme] .play .screen--map .map-list li::before, [data-theme] .play .screen--map .map-list li::after { content: none; }
[data-theme] .play .screen--map .map-list li > .t-meta:first-child { display: block; grid-column: 1; font-family: var(--font-kicker); font-size: 11px; letter-spacing: .08em; color: var(--text-tertiary); font-variant-numeric: tabular-nums; }
[data-theme] .play .screen--map .map-list li > .t-body { grid-column: 2; font-size: 18px; }
[data-theme] .screen--map .map-list__time, [data-theme] .screen--map .map-list__mark { display: none; }
[data-theme] .play .screen--map .map-list li.is-done { color: var(--text-primary); }   /* walked stops are never grey, open or not */
[data-theme] .play .screen--map .map-list li.is-open { color: var(--text-primary); cursor: pointer; }
[data-theme] .play .screen--map .map-list li.is-open:active { background-color: rgb(20 20 20 / .035); }
.screen--map .map-list .walked-num { width: 14px; height: 14px; color: var(--ink-900); }
/* Begin / Paused: a small ink tag on the stop you begin from, or the one you paused at */
[data-theme] .play .screen--map .map-list__next { display: inline-flex; grid-column: 3; padding: 4px 10px; border-radius: 999px; background: var(--ink-900); color: #FFF;
  font-family: var(--font-kicker); font-size: 10px; line-height: 12px; letter-spacing: .1em; text-transform: uppercase; }
.screen--map .map-list__go { display: grid; grid-column: 4; place-items: center; color: var(--ink-900); visibility: hidden; }
.screen--map .map-list li.is-open .map-list__go { visibility: visible; }
.screen--map .map-list__go svg { width: 14px; height: 14px; }
/* The maps between stops have the same list view (the overview's own switch is in theme-tactile.css) */
.screen--map.is-list .map-list { opacity: 1; pointer-events: auto; }
[data-theme] .screen--map:not(.screen--overview) .terrain { transition: opacity var(--dur) var(--ease-out); }
[data-theme] .screen--map.is-list .terrain { opacity: 0; pointer-events: none; }
.rv-dim { position: absolute; inset: 0; z-index: 4; background: rgb(0 0 0 / .2); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); opacity: 0; pointer-events: none; transition: opacity 500ms var(--ease-out); }
.rv-sheet { position: absolute; left: 0; right: 0; bottom: 0; z-index: 5; max-height: 88%; display: flex; flex-direction: column; overflow: hidden; background: #FFF; border-radius: 45px 45px 0 0; transform: translateY(102%); transition: transform 600ms var(--ease-out); }
.screen--overview.is-recap .rv-dim { opacity: 1; pointer-events: auto; }
.screen--overview.is-recap .rv-sheet { transform: none; }
/* What you noticed scrolls if it's long; Walk this stop again stays at the foot of the sheet */
.rv-sheet__body { position: relative; flex: 0 1 auto; min-height: 0; overflow-y: auto; scrollbar-width: none; display: grid; align-content: start; gap: 10px; padding: 52px 33px 24px; text-align: left; isolation: isolate; }
.rv-sheet__body::-webkit-scrollbar { display: none; }
.rv-foot { margin: 0; }
.rv-glow { position: absolute; z-index: -1; left: 50%; top: -120px; width: 420px; height: 300px; margin-left: -210px; border-radius: 50%; background: radial-gradient(closest-side, var(--g), transparent); opacity: .45; filter: blur(30px); }
.rv-title { margin: 0; font-size: 30px; line-height: 38px; font-weight: 400; color: var(--text-primary); }
.rv-q { margin: 0 0 14px; font-size: 18px; line-height: 26px; color: var(--text-secondary); }
.rv-label { margin-top: 8px; }
.rv-said { margin: 0; font-size: 20px; line-height: 29px; color: var(--text-primary); }
.rv-line { margin: 14px 0 0; padding-top: 16px; border-top: 1px solid rgb(20 20 20 / .1); font-size: 15px; line-height: 23px; font-style: italic; color: var(--text-secondary); }

/* ---- Reflect: home once the journey is done (Figma 480:30067) ---------------------------------
   Reflect's blue from the top; this week's prompt as a frosted deck; Learn more by chapter. The
   deck opens over a dark blur into everything you've reflected; the sheet writes, or sends you to
   paper, then asks for the next mission */
.screen--rf { grid-template-rows: auto minmax(0, 1fr); }
/* One screen, no scrolling: the deck takes the room there is (smaller on a short screen), Learn more sits at the foot */
.rf-body { position: relative; z-index: 1; min-height: 0; overflow: hidden; margin: 0 calc(-1 * var(--gutter)); padding: 48px var(--gutter) calc(24px + env(safe-area-inset-bottom)); container-type: size;
  display: flex; flex-direction: column; }
/* The deck hugs its card: the two behind peek out evenly above and below */
.rf-deck { position: relative; flex: 1 1 auto; min-height: 0; display: flex; padding: 22px 0; margin: 0 4px; cursor: pointer; transition: opacity 260ms var(--ease-out); }   /* fills the room, 48px from the toggle and from Learn more */
.rf-deck__behind, .rf-deck__card { position: absolute; border-radius: 30px; background: rgb(255 255 255 / .45); -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px);
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / .6), 0 16px 40px rgb(20 20 20 / .06); }
/* The two behind are the same card, smaller, so all three share one shape; each peeks out above the one in front */
.rf-deck__behind { left: 0; right: 0; top: var(--peek); bottom: var(--peek); transform-origin: 50% 0; }
.rf-deck { --peek: 22px; }
.rf-deck__behind--1 { transform: translateY(calc(var(--peek) / -2)) scale(.92); }
.rf-deck__behind--2 { transform: translateY(calc(var(--peek) * -1)) scale(.84); }
/* The label and question fill the card and sit centred in it; Write / On paper at the bottom */
.rf-deck__card { position: relative; flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: space-between; padding: 28px; background: rgb(255 255 255 / .82); text-align: center; }
.rf-deck__q { margin: 16px 0 0; font-size: 28px; line-height: 40px; font-weight: 400; color: var(--text-primary); text-wrap: balance; }
.rf-deck__text { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; padding-bottom: 24px; }
.rf-deck__answer { display: flex; gap: 34px; }
.rf-round { display: grid; justify-items: center; gap: 8px; padding: 0; border: 0; background: none; font: inherit; color: var(--text-primary); cursor: pointer; }
.rf-round__c { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: rgb(255 255 255 / .75); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .7), 0 12px 30px rgb(20 20 20 / .06); }
.rf-round--ink .rf-round__c, .rf-round__c--ink { background: var(--ink-900); box-shadow: none; color: var(--white); }
.rf-round__c svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; }
.rf-round__l { font-size: 12px; line-height: 16px; color: rgb(20 20 20 / .7); }
.rf-learn { flex: none; margin: 24px 8px 4px;   /* 48px from the deck, with the 24px the heading brings */ font-size: 22px; line-height: 28px; font-weight: 400; color: var(--text-primary); }
.rf-cards { flex: none; display: flex; gap: 10px; margin: 0 calc(-1 * var(--gutter)); padding: 0 var(--gutter); overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding: 0 var(--gutter); scrollbar-width: none; }
.rf-cards::-webkit-scrollbar { display: none; }
/* Learn more: white see-through cards in ink, no colour. The chapter on top, the title, then how long it
   takes and a way in */
.rf-card { flex: 0 0 248px; height: 186px; display: grid; grid-template-rows: auto 1fr auto; gap: 8px; padding: 12px 12px 10px 14px; border-radius: 24px;
  background: rgb(255 255 255 / .55); -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px);   /* white, see-through, like the deck's cards */
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / .7), 0 10px 28px rgb(20 20 20 / .05); scroll-snap-align: start; color: var(--text-primary); }
.rf-card__top { display: flex; align-items: center; justify-content: space-between; }
.rf-card__area { padding: 5px 9px; border-radius: 999px; box-shadow: inset 0 0 0 1px rgb(20 20 20 / .18); font-size: 9.5px; line-height: 12px; letter-spacing: .12em; text-transform: uppercase; color: rgb(20 20 20 / .7); }
.rf-card__title { align-self: end; font-size: 19px; line-height: 24px; text-wrap: balance; }
.rf-card__foot { display: flex; align-items: center; justify-content: space-between; padding: 12px 0 4px; border-top: 1px solid rgb(20 20 20 / .1); }
.rf-card__kind { display: inline-flex; align-items: center; gap: 6px; font-size: 9.5px; line-height: 13px; letter-spacing: .12em; text-transform: uppercase; color: rgb(20 20 20 / .6); }
.rf-card__kind svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 1.1; stroke-linejoin: round; }
.rf-card__go { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgb(20 20 20 / .2); }
.rf-card__go svg { width: 14px; height: 14px; fill: none; stroke: var(--ink-900); stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; }
/* The deck, opened: a dark blur, a collapse button, and the cards one under another */
/* A Learn more piece, opened: a white page that rises over Reflect, chapter tag and close pinned at
   the top, the text with room to read. No gradients: paper-white, ink, one soft grey box */
.rf-card { cursor: pointer; -webkit-tap-highlight-color: transparent; transition: transform 200ms var(--ease-out); }
.rf-card:active { transform: scale(.98); }
.rf-read { position: absolute; inset: 0; z-index: 8; background: #FFF; transform: translateY(102%); transition: transform 600ms var(--ease-out); }
.screen--rf.is-reading .rf-read { transform: none; }
.rf-read__bar { position: absolute; left: 0; right: 0; top: 0; z-index: 1; display: flex; align-items: center; gap: 8px; padding: calc(var(--y-header) - 4px) var(--gutter) 12px; background: #FFF; }
.rf-read__bar::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 24px; background: linear-gradient(#FFF, rgb(255 255 255 / 0)); pointer-events: none; }
/* ← Back */
.rf-read__back { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 12px 0 4px; margin-left: -4px; border: 0; background: none; font: inherit; font-size: 17px; color: var(--text-primary); cursor: pointer; }
.rf-read__back .icon { width: 16px; height: 16px; }
.rf-read__kicker { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.rf-read__body { position: absolute; inset: 0; overflow-y: auto; scrollbar-width: none; display: flex; flex-direction: column; padding: calc(var(--y-header) + 76px) 33px calc(40px + env(safe-area-inset-bottom)); }
.rf-read__body::-webkit-scrollbar { display: none; }
.rf-read__meta { display: inline-flex; align-items: center; gap: 7px; font-family: var(--font-kicker); font-size: 11px; line-height: 14px; letter-spacing: .12em; text-transform: uppercase; color: var(--text-tertiary); }
.rf-read__meta svg { width: 13px; height: 13px; }
.rf-read__title { margin: 14px 0 28px; font-size: 34px; line-height: 42px; font-weight: 400; color: var(--text-primary); text-wrap: balance; }
.rf-read__p { margin: 0 0 18px; font-size: 17px; line-height: 29px; color: var(--text-secondary); text-wrap: pretty; }
.rf-read__p--lead { font-size: 21px; line-height: 32px; color: var(--text-primary); margin-bottom: 22px; }
.rf-read__label { margin: 0 0 14px; }
.rf-read__try { margin: 18px 0 8px; padding: 20px 22px 22px; border-radius: 24px; background: #F7F5F1; box-shadow: inset 0 0 0 1px rgb(20 20 20 / .06); }
.rf-read__try p { margin: 10px 0 0; font-size: 18px; line-height: 28px; font-style: italic; color: var(--text-primary); }
.rf-read__next { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 28px; padding: 20px 0 4px; border: 0; border-top: 1px solid rgb(20 20 20 / .1);
  background: none; font: inherit; text-align: left; color: var(--text-primary); cursor: pointer; }
.rf-read__next > span { display: grid; gap: 6px; }
.rf-read__next-title { font-size: 19px; line-height: 25px; }
.rf-read__next svg { flex: none; width: 18px; height: 18px; }
/* The player: a round ink button, a fine track that fills, the time */
.rf-player { display: grid; grid-template-columns: 56px 1fr; grid-template-rows: auto auto; column-gap: 16px; row-gap: 8px; align-items: center; margin: 0 0 30px; }
.rf-player__play { grid-row: 1 / 3; display: grid; place-items: center; width: 56px; height: 56px; padding: 0; border: 0; border-radius: 50%; background: var(--ink-900); color: #FFF; cursor: pointer; }
.rf-player__play svg { width: 22px; height: 22px; }
.rf-player__track { align-self: end; position: relative; height: 2px; border-radius: 2px; background: rgb(20 20 20 / .12); overflow: hidden; }
.rf-player__track i { position: absolute; inset: 0; background: var(--ink-900); transform-origin: 0 50%; transform: scaleX(var(--p, 0)); }
.rf-player__time { align-self: start; font-family: var(--font-kicker); font-size: 11px; letter-spacing: .06em; color: var(--text-tertiary); font-variant-numeric: tabular-nums; }
.rf-stack { position: absolute; inset: 0; z-index: 7; background: rgb(0 0 0 / .3); -webkit-backdrop-filter: blur(36px); backdrop-filter: blur(36px); opacity: 0; pointer-events: none; transition: opacity 450ms var(--ease-out); }
.screen--rf.is-open .rf-stack { opacity: 1; pointer-events: auto; }
.screen--rf:not(.is-open) .rf-stack { transition-duration: 260ms; }   /* closing is quicker than opening */
.rf-stack__close { position: absolute; left: 16px; top: 16px; display: grid; place-items: center; width: 56px; height: 56px; padding: 0; border: 0; border-radius: 50%; background: rgb(250 250 250 / .1); color: var(--white); cursor: pointer; }
.rf-stack__close svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
/* The list scrolls under a soft top edge (no hard cut under the close button), which only comes in
   once you scroll (--ft, play.js), and fades out at the foot */
.rf-stack__list { position: absolute; left: 16px; right: 16px; top: 0; bottom: 0; display: grid; align-content: start; gap: 10px; overflow-y: auto; padding: 96px 0 90px; scrollbar-width: none;
  -webkit-mask-image: linear-gradient(rgb(0 0 0 / calc(1 - var(--ft, 0))) 40px, rgb(0 0 0 / calc(1 - .65 * var(--ft, 0))) 88px, #000 150px, #000 calc(100% - 110px), rgb(0 0 0 / .35) calc(100% - 50px), transparent); mask-image: linear-gradient(rgb(0 0 0 / calc(1 - var(--ft, 0))) 40px, rgb(0 0 0 / calc(1 - .65 * var(--ft, 0))) 88px, #000 150px, #000 calc(100% - 110px), rgb(0 0 0 / .35) calc(100% - 50px), transparent); }
.rf-stack__close { z-index: 5; }
.rf-stack__list::-webkit-scrollbar { display: none; }
.rf-item { display: grid; gap: 12px; padding: 25px; border-radius: 30px; background: rgb(255 255 255 / .9); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .7), 0 16px 40px rgb(20 20 20 / .06); }
.rf-item__q { margin: 12px 0 0; font-size: 24px; line-height: 30px; font-weight: 400; color: var(--text-primary); }
.rf-item__a { margin: 0; font-size: 18px; line-height: 26px; color: rgb(20 20 20 / .6); }
/* Past reflections are quieter and more compact than this week's mission, so a long list reads quickly */
.rf-item:not(.rf-item--now) { gap: 6px; padding: 18px 22px 20px; border-radius: 24px; }
.rf-item:not(.rf-item--now) .rf-item__q { margin-top: 6px; font-size: 19px; line-height: 25px; }
.rf-item:not(.rf-item--now) .rf-item__a { font-size: 16px; line-height: 23px; }
.rf-item__write { display: flex; align-items: center; justify-content: space-between; margin-top: 8px; padding: 0; border: 0; background: none; font: inherit; font-size: 18px; color: rgb(20 20 20 / .4); cursor: pointer; text-align: left; }
/* The sheet: write (Keep it once there's something), on paper, then the next mission */
.screen--rf .rf-sheet { top: 5.7%; transition: transform 650ms var(--ease-out), top 500ms var(--ease-out); }
.screen--rf[data-pane="next"] .rf-sheet { top: 18.6%; }
.screen--rf.is-sheet .rf-sheet { transform: none; }
.screen--rf.is-sheet .rf-dim { opacity: 1; pointer-events: auto; }
.screen--rf .rf-dim { z-index: 9; } .screen--rf .rf-sheet { z-index: 10; }   /* over the opened reflections too */
/* A plain modal: the page behind stays as it is, only dimmed, and shows above the sheet */
.screen--rf .rf-dim { background: rgb(0 0 0 / .32); }
.screen--rf .rf-sheet { top: 12%; }
/* Typing in a sheet on a phone: its content ends at the top of the keyboard (--kb, from play.js),
   so the button stays in sight above the keys; the sheet's white carries on underneath */
.ws-sheet .ws-pane, .ws-sheet .rf-pane { bottom: var(--kb, 0px); }
.has-kb .ws-foot { padding-bottom: 14px; }
.rf-pane { position: absolute; inset: clamp(48px, 8.6%, 73px) 33px 0; display: flex; flex-direction: column; opacity: 0; pointer-events: none; transition: opacity 350ms var(--ease-out); }
.screen--rf[data-pane="write"] .rf-pane--write, .screen--rf[data-pane="paper"] .rf-pane--paper, .screen--rf[data-pane="next"] .rf-pane--next { opacity: 1; pointer-events: auto; }
.rf-sheet__q { margin: 16px 0 0; font-size: 26px; line-height: 34px; font-weight: 400; color: var(--text-primary); }
.rf-rule { display: block; height: 1px; margin: 48px -5px 0; background: rgb(20 20 20 / .12); flex: none; }
.rf-text { flex: 1; min-height: 160px; margin: 48px -5px 0; padding: 0; border: 0; background: none; resize: none; outline: none; font: inherit; font-size: 18px; line-height: 30px; color: var(--text-primary); }
/* Writing with the keyboard up: the sheet rises to the top, the question stays in sight a little
   smaller, and the field takes the room down to Keep it, just above the keys. Nothing scrolls but
   the writing itself */
.rf-sheet__q, .rf-rule, .rf-text { transition: font-size 400ms var(--ease-out), line-height 400ms var(--ease-out), margin 400ms var(--ease-out); }
.has-kb .screen--rf.is-sheet .rf-sheet { top: 2%; }
.has-kb .rf-sheet__q { margin-top: 10px; font-size: 21px; line-height: 28px; }
.has-kb .rf-rule { margin-top: 20px; }
.has-kb .rf-text { min-height: 0; margin-top: 16px; }
.has-kb .rf-pane--write .ws-scroll { overflow: hidden; }
.rf-text::placeholder { color: rgb(20 20 20 / .4); }
.rf-paper { margin: 48px 0 0; font-size: 18px; line-height: 30px; color: var(--text-secondary); }
.screen--rf .btn--block:disabled { background: rgb(20 20 20 / .3); color: var(--white); opacity: 1; }
.screen--rf.is-chosen .ws-shuffle { display: none; }
.screen--rf.is-chosen .ws-continue { display: flex; }
.screen--rf .rf-pane--next .ws-title { margin-top: 0; }
.screen--rf .done-toggle { z-index: 3; }   /* under the dim and the opened deck, as in the frames */
.play > .screen--rf, .device:has(.sim-bar) .play > .screen--rf { padding-bottom: 0; }   /* the body's own 24px is the only space at the foot */
/* A short screen (Safari's bars, a small phone): the deck and cards tighten a little so it all still fits */
@container (max-height: 690px) {
  .rf-deck { padding: 14px 0; --peek: 14px; }
  .rf-deck__card { padding: 22px 24px; }
  .rf-deck__q { margin: 12px 0 0; font-size: 26px; line-height: 34px; }
  .rf-card { height: 168px; }
}

/* Phosphor icons are filled shapes, not strokes: whatever box they sit in, fill them with the text colour */
svg.ph { fill: currentColor !important; stroke: none !important; flex: none; }
.toggle__lock { width: 12px; height: 12px; }

/* ===== The start: splash, welcome, private, get started (Figma "Start · splash, welcome, sign in") ===== */
.screen--start { display: flex; flex-direction: column; padding: var(--y-header) 24px calc(16px + env(safe-area-inset-bottom)); text-align: center; overflow: hidden; }
.screen--start > :not(.start-glow) { position: relative; z-index: 1; }
.start-mark { position: absolute !important; inset: 0; display: grid; place-content: center; justify-items: center; gap: 14px; }
.start-mark h1 { margin: 0; font-size: 40px; line-height: 48px; font-weight: 400; color: var(--text-primary); }
.start-mark span { font-size: 13px; color: var(--text-tertiary); }
.start-copy { margin: 236px 16px 0; display: grid; gap: 14px; justify-items: center; }
.start-kicker { font-family: var(--font-kicker); font-size: 13px; letter-spacing: .12em; text-transform: uppercase; color: var(--text-tertiary); }
.start-title { margin: 0; font-size: 30px; line-height: 40px; font-weight: 400; color: var(--text-primary); text-wrap: balance; }
.start-title--big { font-size: 38px; line-height: 46px; }
.start-body { margin: 0; max-width: 300px; font-size: 16px; line-height: 25px; color: var(--text-secondary); text-wrap: balance; }
.start-foot { margin-top: auto; display: grid; gap: 14px; justify-items: center; }
.start-foot .btn--block { width: 100%; }
.start-dots { display: flex; gap: 6px; margin-bottom: 6px; }
.start-dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--ink-900); opacity: .2; }
.start-dots i.is-on { opacity: 1; }
.start-skip { font-size: 15px; text-decoration: underline; text-underline-offset: 3px; }
.start-help { display: none; }
/* Get started / Welcome back / New here: one layout. Title at the top, the form at the foot */
.start-back { position: absolute !important; left: 18px; top: calc(var(--y-header) - 6px); display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 0; background: none; color: var(--ink-900); cursor: pointer; }
.start-back .icon { width: 16px; height: 16px; }
.start-head { margin-top: 112px; display: grid; gap: 14px; justify-items: center; }
.start-form { margin-top: auto; height: 372px; display: flex; flex-direction: column; gap: 14px; text-align: left; }
.start-form > .btn--block { width: 100%; }
.start-field { display: grid; gap: 8px; font-size: 15px; color: var(--text-secondary); }
.start-field input { height: 48px; padding: 0 18px; border: 1px solid rgb(255 255 255 / .7); border-radius: 999px; background: rgb(255 255 255 / .55); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  font: inherit; font-size: 16px; color: var(--text-primary); outline: none; }
.start-field input::placeholder { color: rgb(20 20 20 / .4); }
.start-field input:focus { border-color: rgb(20 20 20 / .35); }
.start-field input[readonly] { color: rgb(20 20 20 / .7); }
.start-or { display: flex; align-items: center; gap: 12px; margin-top: 6px; font-size: 13px; color: rgb(255 255 255 / .85); }
.start-or i { flex: 1; height: 1px; background: rgb(255 255 255 / .45); }
.start-social { display: flex; justify-content: center; gap: 14px; }
.start-round { display: grid; place-items: center; width: 48px; height: 48px; padding: 0; border: 1px solid rgb(255 255 255 / .7); border-radius: 50%; background: rgb(255 255 255 / .6); color: var(--ink-900); cursor: pointer; }
.start-round svg { width: 20px; height: 20px; fill: currentColor; }
.start-forgot { justify-self: center; font-size: 16px; color: #FFF; text-decoration: underline; text-underline-offset: 3px; }
.start-forgot[hidden] { display: none; }
.start-forgot:disabled { opacity: .6; }
/* The code from the email: spaced digits, and a line under the field when something goes wrong */
/* The code: six boxes (Figma 576:234), white and see-through with a soft shadow, a grey 0 until a digit is in.
   The real input lies over them, invisible, so tapping anywhere on them types into it */
.start-field--code { position: relative; }
.code-boxes { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; }
.code-boxes i { display: grid; place-items: center; height: 56px; border-radius: 16px; background: rgb(255 255 255 / .6);
  -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px); box-shadow: 0 16px 40px rgb(20 20 20 / .06);
  font-style: normal; font-size: 16px; line-height: 1; color: var(--ink-900); transition: box-shadow var(--dur-fast, .2s) var(--ease-out); }
.code-boxes i:empty::before { content: "0"; color: rgb(20 20 20 / .3); }
.code-boxes i.is-on { box-shadow: inset 0 0 0 1px rgb(20 20 20 / .35), 0 16px 40px rgb(20 20 20 / .06); }
.start-field--code input { position: absolute; left: 0; right: 0; bottom: 0; height: 56px; padding: 0; border: 0; border-radius: 16px;
  background: transparent; color: transparent; caret-color: transparent; font-size: 16px; letter-spacing: 0; opacity: .01; -webkit-backdrop-filter: none; backdrop-filter: none; }
.start-field--code input:focus { outline: none; }
.start-error { margin: -4px 0 0; padding: 0 18px; font-size: 15px; line-height: 22px; color: #8A1C12; }
.start-error[hidden] { display: none; }
.start-body b { font-weight: 600; }
.start-legal { display: flex; justify-content: center; gap: 24px; margin-top: auto; padding-top: 18px; font-size: 15px; }   /* sign-in texts big enough to read on a phone (Nov): 15px and up, the kicker 13 */
.start-legal a { color: #FFF; text-decoration: underline; text-underline-offset: 2px; }

/* The gradients: the app's glow arch (.tea-glow, as on Tea house, Karaoke and the Dojo), in the
   start frames' colours with the same 15% white wash: amber to coral, sky to blue, a cooler blue.
   It rises in like every other glow, then breathes, swelling a little from the foot and back */
.screen--start > .tea-glow { z-index: 0; }
.start-glow > i { transform-origin: 50% 100%; animation: start-breathe 7s ease-in-out 2.6s infinite alternate; }
.start-glow--warm > i { top: 360px; background: radial-gradient(344px 617px at 50% 43px, rgb(241 185 40), rgb(248 154 70) 50%, rgb(254 123 99)); }
.start-glow--sky  > i { top: 360px; background: radial-gradient(344px 617px at 50% 43px, rgb(204 233 250), rgb(132 190 245) 50%, rgb(59 146 240)); }
.start-glow--blue > i { top: 250px; background: radial-gradient(344px 617px at 50% 43px, rgb(190 208 235), rgb(138 169 227) 50%, rgb(85 129 218)); }
@keyframes start-breathe { from { transform: scale(1); } to { transform: scale(1.06, 1.08); } }
@media (prefers-reduced-motion: reduce) { .start-glow > i { animation: none; } }

/* ===== Profile ===== */
/* The way in: your initial in a round the height of the Journey | Reflect toggle, on its line,
   at the right edge of the content (Home's top row, Reflect's toggle row); the switch sits on the left */
.screen__top:has(> .profile-btn), .done-toggle:has(> .profile-btn) { position: relative; }
.done-toggle:has(> .profile-btn) { justify-content: flex-start; }   /* with the profile on the right, the switch on the left (as on Home) */
.profile-btn { position: absolute; z-index: 6; right: 0; top: 50%; translate: 0 -50%; display: grid; place-items: center; width: 48px; height: 48px;   /* as tall as the switch */ padding: 0; border: 0; border-radius: 50%;
  background: rgb(255 255 255 / .6); -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px);
  font: inherit; font-size: 15px; line-height: 1; color: var(--ink-900); cursor: pointer; }
.screen--profile { display: flex; flex-direction: column; padding: var(--y-header) 0 0; }
.pf-bar { position: relative; display: flex; align-items: center; justify-content: center; height: 41px; padding: 0 24px; }
.pf-bar .start-back { left: 14px; top: 0; height: 41px; }
.pf-bar h2 { margin: 0; font-size: 17px; line-height: 24px; font-weight: 400; color: var(--text-primary); }
.pf-body { flex: 1; min-height: 0; overflow-y: auto; scrollbar-width: none; padding: 24px 20px calc(32px + env(safe-area-inset-bottom)); }
.pf-body::-webkit-scrollbar { display: none; }
/* One card per group, one rhythm: rows 56 tall, 18 in from the card's edge, a hairline between
   them that starts where the text starts; section titles line up with that same edge */
.pf-card, .pf-group { border-radius: 24px; background: rgb(255 255 255 / .62); box-shadow: inset 0 0 0 1px rgb(20 20 20 / .06); }
.pf-card { display: flex; align-items: center; gap: 14px; padding: 16px 18px; }
.pf-avatar { flex: none; display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: var(--ink-900); color: #FFF; font-size: 21px; line-height: 1; }
.pf-who { flex: 1; display: grid; gap: 2px; min-width: 0; }
.pf-name { width: 100%; height: 26px; padding: 0; border: 0; background: none; font: inherit; font-size: 19px; line-height: 26px; color: var(--text-primary); outline: none; }
.pf-name::placeholder { color: rgb(20 20 20 / .4); }
.pf-email { font-size: 13px; line-height: 18px; color: var(--text-tertiary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pf-h { margin: 28px 18px 10px; font-family: var(--font-kicker); font-size: 11px; line-height: 14px; font-weight: 400; letter-spacing: .12em; text-transform: uppercase; color: var(--text-tertiary); }
.pf-group { overflow: hidden; }
.pf-row { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 16px; box-sizing: border-box; width: 100%; min-height: 56px; margin: 0; padding: 14px 18px;
  border: 0; background: none; font: inherit; font-size: 16px; line-height: 22px; color: var(--text-primary); text-align: left; text-decoration: none; }
.pf-row + .pf-row::before { content: ""; position: absolute; left: 18px; right: 0; top: 0; height: 1px; background: rgb(20 20 20 / .08); }
.pf-row__text { flex: 1; min-width: 0; display: grid; gap: 2px; }
.pf-row__note { font-size: 13px; line-height: 18px; color: var(--text-tertiary); }
.pf-row--stack { flex-direction: column; align-items: stretch; gap: 12px; padding-bottom: 16px; }
.pf-row--text { font-size: 14px; line-height: 21px; color: var(--text-secondary); }
.pf-row--danger { color: #B3261E; cursor: pointer; }
.pf-row--link { cursor: pointer; }
.pf-row--link > svg { flex: none; width: 14px; height: 14px; color: var(--text-tertiary); }
/* How often: a segmented track like the Journey | Reflect toggle, four equal parts */
.pf-seg { flex: 1; display: grid; grid-template-columns: repeat(4, 1fr); gap: 2px; padding: 3px; border-radius: 999px; background: rgb(20 20 20 / .06); }
.pf-seg__opt { display: grid; place-items: center; text-align: center; min-width: 0; height: 34px; padding: 0; border: 0; border-radius: 999px; background: none; font: inherit; font-size: 14px; color: var(--text-secondary); cursor: pointer; transition: background-color 200ms var(--ease-out), color 200ms var(--ease-out); }
.pf-seg__opt[aria-checked="true"] { background: var(--ink-900); color: #FFF; }
/* The time, as a value on the right in a small pill */
.pf-time { flex: none; -webkit-appearance: none; appearance: none; height: 34px; min-width: 84px; padding: 0 14px; border: 0; border-radius: 999px; background: rgb(20 20 20 / .06);
  font: inherit; font-size: 15px; line-height: 34px; text-align: center; color: var(--text-primary); }
.pf-time::-webkit-calendar-picker-indicator { display: none; }
.pf-time:focus { outline: none; box-shadow: inset 0 0 0 1px rgb(20 20 20 / .3); }
.pf-seg__opt:focus:not(:focus-visible), .pf-switch:focus:not(:focus-visible) { outline: none; }
.pf-time::-webkit-date-and-time-value { text-align: center; }
/* A switch: ink when on */
.pf-switch { position: relative; flex: none; width: 50px; height: 30px; padding: 0; border: 0; border-radius: 999px; background: rgb(20 20 20 / .14); cursor: pointer; transition: background-color 250ms var(--ease-out); }
.pf-switch i { position: absolute; left: 3px; top: 3px; width: 24px; height: 24px; border-radius: 50%; background: #FFF; box-shadow: 0 1px 3px rgb(20 20 20 / .22); transition: transform 250ms var(--ease-out); }
.pf-switch[aria-checked="true"] { background: var(--ink-900); }
.pf-switch[aria-checked="true"] i { transform: translateX(20px); }
.pf-out { margin-top: 32px; }
[data-theme] .play .pf-delete-account { display: block; margin: 14px auto 0; font-size: 15px; color: #B3261E; }
.pf-delete-account[hidden] { display: none; }
/* Asking before deleting: a small sheet over a dimmed Profile */
.pf-dim { position: absolute; inset: 0; z-index: 8; background: rgb(0 0 0 / .3); opacity: 0; pointer-events: none; transition: opacity 300ms var(--ease-out); }
.pf-confirm { position: absolute; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); z-index: 9; display: grid; gap: 10px; padding: 26px 22px 14px; border-radius: 32px; background: #FFF; text-align: center;
  transform: translateY(calc(100% + 24px)); transition: transform 450ms var(--ease-out); }
.pf-confirm h3 { margin: 0; font-size: 22px; line-height: 28px; font-weight: 400; color: var(--text-primary); }
.pf-confirm p { margin: 0 0 10px; font-size: 15px; line-height: 22px; color: var(--text-secondary); }
[data-theme] .play .pf-confirm__go { background: #B3261E; color: #FFF; }
.screen--profile.is-asking .pf-dim { opacity: 1; pointer-events: auto; }
.screen--profile.is-asking .pf-confirm { transform: none; }
.sim-pick > span.sim-pick__lang { opacity: 1; margin-right: 0; }
.pf-seg--2 { grid-template-columns: 1fr 1fr; }
/* Personvern and Vilkår: Profile's page, with the text in one card */
.legal { padding: 22px 20px 24px; font-size: 15px; line-height: 22px; color: var(--text-secondary); }
.legal h3 { margin: 22px 0 6px; font-size: 16px; line-height: 22px; font-weight: 600; color: var(--text-primary); }
.legal h3:first-child { margin-top: 0; font-size: 19px; line-height: 26px; }
.legal p, .legal ul, .legal ol { margin: 0 0 8px; }
.legal ul, .legal ol { padding-left: 20px; display: grid; gap: 6px; }
.legal ul { list-style: disc; } .legal ol { list-style: decimal; }
.legal li::marker { color: var(--text-tertiary); }
.legal strong { font-weight: 600; color: var(--text-primary); }
.legal .legal__meta { margin-top: 22px; font-size: 13px; line-height: 18px; color: var(--text-tertiary); }
/* Get started: who it's for and the terms, above Continue */
.start-consent { margin: 0; padding: 0 8px; font-size: 15px; line-height: 22px; text-align: center; color: var(--text-secondary); }
/* The consent tick box: a 22px ink outline square, filled with ink and a paper tick when on */
.start-check { display: flex; gap: 12px; align-items: flex-start; margin: 0 0 4px; font-size: 15px; line-height: 22px; color: var(--text-primary); cursor: pointer; }
.start-check input { appearance: none; -webkit-appearance: none; flex: none; width: 22px; height: 22px; margin: 0; border: 1px solid currentColor; border-radius: 4px; background: transparent; display: grid; place-items: center; cursor: pointer; transition: background-color 200ms var(--ease-out, ease-out); }
.start-check input::after { content: ""; width: 6px; height: 11px; margin-top: -2px; border: solid #EFEDE9; border-width: 0 1.5px 1.5px 0; transform: rotate(45deg) scale(.6); opacity: 0; transition: opacity 200ms, transform 200ms var(--ease-out, ease-out); }
.start-check input:checked { background: currentColor; }
.start-check input:checked::after { opacity: 1; transform: rotate(45deg) scale(1); }
.start-check input:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
.start-check a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.start-consent a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
/* Pause or Help open: the screen's own motion stops where it is (play.js holds the rest) */
.is-held .play > .screen, .is-held .play > .screen *, .is-held .play > .screen *::before, .is-held .play > .screen *::after { animation-play-state: paused !important; }
/* Reminders off: how often and the time stay, greyed out */
.pf-row.is-disabled { opacity: .4; }
.pf-row.is-disabled :is(.pf-seg__opt, .pf-time) { cursor: default; }

/* Before the journey: in place of the line under the title, the same quiet text, that it's best with sound */
.play .heading__body.sound-note { white-space: normal; overflow: visible; text-wrap: pretty; }
.sound-note svg { display: inline-block; width: 1.1em; height: 1.1em; margin-right: 6px; vertical-align: -0.18em; }

/* Stop 2's card wheel reaches down under «Velg dette kortet»: the button sits above it, and the rest of
   the foot lets drags through to the wheel */
.play__filters .screen__foot { position: relative; z-index: 2; pointer-events: none; }
.play__filters .screen__foot .btn { pointer-events: auto; }

/* User test Home: where you choose a journey. A headline and a quiet line under it, then the journeys as
   a row of tall cards you swipe through, the next one peeking in. Tokyo is the open one: white at the top
   with where you are, a warm gradient rising from the bottom and its name in white. The others are Reflect's
   paper cards with a lock. No wash behind */
.screen--home-hub .hub { display: flex; flex-direction: column; justify-content: flex-start; gap: 0; padding: 32px 0 0; }   /* 32px under the switch and profile */
.hub__head { flex: none; margin: 0 0 32px; }
.hub__title { margin: 0; font-size: 32px; line-height: 1.18; letter-spacing: -.005em; font-weight: 400; color: var(--text-primary); text-wrap: balance; }
.hub__sub { margin: 12px 0 0; max-width: 30ch; font-size: 15px; line-height: 1.45; color: rgb(20 20 20 / .55); }
/* the cards fill the room down to the bottom; 12px under them so their shadow isn't cut */
.hub-row { flex: 1 1 auto; min-height: 0; display: flex; gap: 12px; margin: 0 calc(-1 * var(--gutter)); padding: 0 var(--gutter) 12px;
  overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding: 0 var(--gutter); scrollbar-width: none; overscroll-behavior-x: contain; }
.hub-row::-webkit-scrollbar { display: none; }
/* The card as in Figma (Design, «Home · journey cards»): the journey's pill at the top; at the bottom the
   name, then a row with where you are and the round button */
.hub-card { flex: 0 0 calc(100% - 64px); min-height: 260px; scroll-snap-align: start; position: relative;
  display: flex; flex-direction: column; padding: 20px 20px 24px 22px; border-radius: 24px; color: var(--text-primary); cursor: pointer; -webkit-tap-highlight-color: transparent;
  /* white for the top third, then the welcome screen's warm colours rising smoothly to the bottom edge */
  background: radial-gradient(150% 82% at 50% 100%, rgb(244 78 48) 0%, rgb(249 114 60) 30%, rgb(251 158 94) 54%, rgb(252 208 170 / .75) 74%, rgb(255 255 255 / 0) 92%), #FFF;
  box-shadow: inset 0 0 0 1px rgb(20 20 20 / .05), 0 14px 34px rgb(150 60 20 / .12); transition: transform 200ms var(--ease-out); }
.hub-card:active { transform: scale(.985); }
/* the stops' grain on the gradient: the same paper sheet (its grain and ghost type), multiplied over the colour
   as it shows through the glows behind a stop, and only where the colour is */
.hub-card:not(.hub-card--locked)::after { content: ""; position: absolute; inset: 0; z-index: 0; border-radius: inherit; pointer-events: none;
  background: var(--paper-sheet) var(--paper-pos, 0 0) / var(--paper-size, 800px auto) no-repeat; mix-blend-mode: multiply; opacity: .5;
  -webkit-mask-image: linear-gradient(to top, #000 25%, transparent 78%); mask-image: linear-gradient(to top, #000 25%, transparent 78%); }
.hub-card > * { position: relative; z-index: 1; }
.hub-card__top { display: flex; }
.hub-pill { padding: 5px 9px; border-radius: 999px; box-shadow: inset 0 0 0 1px rgb(20 20 20 / .18); font-size: 9.5px; line-height: 12px; letter-spacing: .12em; text-transform: uppercase; white-space: nowrap; color: var(--ink-900); }
.hub-card__title { margin-top: auto; font-size: 32px; line-height: 1.25; color: #FFF; text-wrap: balance; }
.hub-card__foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 16px; min-height: 36px; }
.hub-card__status { display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px; border-radius: 999px; box-shadow: inset 0 0 0 1px rgb(255 255 255 / .5);
  font-size: 10.5px; line-height: 13px; letter-spacing: .12em; text-transform: uppercase; white-space: nowrap; color: #FFF; }
.hub-card__status svg { width: 12px; height: 12px; fill: currentColor; }
.hub-card__go { flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--ink-900); color: #FFF; }
.hub-card__go svg { width: 16px; height: 16px; fill: currentColor; }
/* Walked: the pill and the arrow go quiet, outlined in white */
.hub-card.is-done .hub-card__status { box-shadow: inset 0 0 0 1px rgb(255 255 255 / .2); }
.hub-card.is-done .hub-card__go { background: none; box-shadow: inset 0 0 0 1px rgb(255 255 255 / .2); }
/* Locked: white and see-through, the name in grey, Not available and a lock where Tokyo has its status and arrow */
.hub-card--locked { background: rgb(255 255 255 / .55); -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .7), 0 10px 28px rgb(20 20 20 / .05); cursor: default; }
.hub-card--locked:active { transform: none; }
.hub-card--locked .hub-card__title { color: rgb(20 20 20 / .4); }
.hub-card__note { font-size: 10.5px; line-height: 13px; letter-spacing: .12em; text-transform: uppercase; color: rgb(20 20 20 / .5); }
.hub-card--locked .hub-card__go { background: none; box-shadow: inset 0 0 0 1px rgb(20 20 20 / .2); color: var(--ink-900); }
.hub-card--locked .hub-card__go svg { width: 14px; height: 14px; }

/* Every button is at least 48px tall (Nov). The top icons (help, close, back) keep where they sit and what they
   look like: their box grows to 48 around the same 32px circle, the margins taking it back so nothing moves */
.play .icon-btn:not(.icon-btn--l) { width: 48px; height: 48px; margin: -8px; background-clip: content-box; padding: 8px; }
.play .icon-btn:not(.icon-btn--l)::before { inset: 0; }
.play .start-back { width: 48px; height: 48px; margin: -4px; }
.play .pf-bar .start-back { height: 48px; margin: -4px 0 0; }
.play .btn--text { min-height: 48px; }
.play :is(.chip, .chips--s .chip, .tea-answer) { min-height: 48px; }
.play :is(.hub-card__go) { width: 48px; height: 48px; }
.play .hub-card__go svg { width: 18px; height: 18px; }
.play .hub-card--locked .hub-card__go svg { width: 16px; height: 16px; }
.play .rf-round__c { width: 48px; height: 48px; }
.play .rf-round__c svg { width: 22px; height: 22px; }

/* Every input is 56px tall (Nov): the email field, the code boxes, the time in Profile, and the write-in lines
   on the stops, whose extra height goes above the words so the line and text keep their place and look */
.play .start-field input:not([data-start-code]) { height: 56px; }
.play .pf-time { height: 56px; }
.play .line-field__input { padding-top: 21px; }
.play .line-field__row { padding-top: 20px; }
.play .line-field__row .line-field__input { padding-top: 0; }