/* RUNNING A CODE — full screen, painted in the Code's own colour.
   Brand law: painted surfaces only, no shadows, one radius plus the capsule,
   and the button is a solid accent fill, never a gradient. */

.page-sequence { overflow: hidden; }
.seq {
  position: relative; isolation: isolate;
  min-height: 100svh; display: grid; grid-template-rows: auto 1fr auto;
  padding: calc(env(safe-area-inset-top) + 1rem) 0 calc(env(safe-area-inset-bottom) + 1.4rem);
  background:
    radial-gradient(120% 80% at 50% 42%, color-mix(in srgb, var(--code-accent) 22%, transparent), transparent 64%),
    linear-gradient(168deg, var(--code-bg) 0%, color-mix(in srgb, var(--code-bg) 70%, #0A0A0E) 62%, #0A0A0E 100%);
  color: var(--code-ink, #fff);
}
.seq__geo {
  position: absolute; inset: 0; z-index: 0;
  display: grid; place-items: center; pointer-events: none; opacity: .55;
}
.seq__geo .geo { width: min(112%, 720px); }
/* The session drives the breath: slower while it holds, quicker on return. */
.seq__geo .geo--breathe { animation-duration: var(--breath, 8s); }

/* Everything stands over the form; the form itself stays behind, out of the
   layout (as one row of the grid it took 720px, and on an iPad on its side
   BEGIN fell off the bottom — the paid check, 2026-09-26). */
.seq > :not(.seq__geo) { position: relative; z-index: 1; }

.seq__top { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); padding-inline: var(--gutter); }
.seq__id { font-size: var(--fs-micro); letter-spacing: var(--track-hud); text-transform: uppercase; color: rgba(255,255,255,.4); }
/* A protocol's step (routes/library.js, protocolStep): the protocol and the
   step, on a line of its own under the Code's name, a little brighter. */
.seq__of { display: block; margin-top: .35rem; color: rgba(255,255,255,.7); }
.seq__exit {
  min-height: 44px; padding: 0 1rem; border-radius: var(--r-pill);
  border: 1px solid rgba(255,255,255,.22); background: transparent; color: inherit;
  font-size: var(--fs-micro); letter-spacing: var(--track-hud); text-transform: uppercase;
}
.seq__exit:hover { background: rgba(255,255,255,.07); }

/* min-height: 0 lets this row actually shrink inside the grid; without it a
   long line pushes the controls off the bottom of a phone. */
.seq__stage {
  display: grid; place-content: center; justify-items: center; gap: var(--s-4);
  text-align: center; padding-inline: var(--gutter);
  min-height: 0; overflow-y: auto;
}
.seq__phase {
  font-family: var(--font-display); font-weight: 300;
  font-size: clamp(2.2rem, 11vw, 4rem); letter-spacing: .16em; text-transform: uppercase;
  transition: opacity 1.2s var(--ease);
}
.seq__hz { font-family: var(--font-mark); font-size: var(--fs-small); letter-spacing: .1em; color: var(--code-accent); }
.seq__line { max-width: 26rem; color: rgba(255,255,255,.58); font-size: var(--fs-small); line-height: 1.7; }
.seq__affirm {
  max-width: 28rem; margin-top: .6rem;
  font-family: var(--font-display); font-weight: 300; line-height: 1.55;
  font-size: clamp(.95rem, 4vw, 1.2rem); letter-spacing: .06em; text-transform: uppercase;
  color: var(--code-accent);
}

.seq__foot { display: grid; gap: var(--s-3); justify-items: center; padding-inline: var(--gutter); }
.seq__track { width: min(100%, 34rem); height: 1px; background: rgba(255,255,255,.16); overflow: hidden; }
.seq__bar { display: block; height: 100%; background: var(--code-accent); transform-origin: left; transform: scaleX(0); transition: transform .3s linear; }
.seq__time { font-family: var(--font-mark); font-size: var(--fs-micro); letter-spacing: .1em; color: rgba(255,255,255,.5); }
.seq__play {
  min-width: min(100%, 20rem); min-height: 56px; padding: 0 2rem; border: 0;
  border-radius: var(--r-pill); background: var(--code-accent); color: var(--code-accent-ink);
  font-size: var(--fs-hud); letter-spacing: var(--track-wide); text-transform: uppercase; font-weight: 600;
  transition: opacity var(--t-fast), transform var(--t-fast);
}
.seq__play:hover { opacity: .9; }
.seq__play:active { transform: scale(.985); }
.seq__note { font-size: var(--fs-micro); letter-spacing: .06em; color: rgba(255,255,255,.35); text-align: center; max-width: 26rem; }

.seq__done { display: grid; gap: var(--s-3); justify-items: center; }

/* A LIGHT CODE (DETOX; HEAL and GENEROSITY when they open) is painted the
   way the Codes app paints its session (ExperienceView.swift): the Code's
   ground at about half strength over the app's own, falling to deep, and the
   words white all the way down. This page used to flip a light Code's words
   to ink while its ground still fell to near-black, so the line, the time and
   the note sat ink on black. Its small coloured words, its bar and its form
   take the light end of its own ramp (the colour the app draws the geometry
   in); the button keeps the accent, whose ink is judged against it. */
.page-sequence.is-light .seq {
  background:
    radial-gradient(120% 80% at 50% 42%, color-mix(in srgb, var(--code-accent) 22%, transparent), transparent 64%),
    linear-gradient(168deg, color-mix(in srgb, var(--code-bg) 45%, #15151C) 0%, color-mix(in srgb, var(--code-bg) 22%, #0A0A0E) 62%, #0A0A0E 100%);
  color: #fff;
}
.page-sequence.is-light .seq__geo,
.page-sequence.is-light .seq__hz,
.page-sequence.is-light .seq__affirm,
.page-sequence.is-light .seq__bar { --code-accent: var(--code-grad-from); }
.page-sequence.is-light .seq__id { color: rgba(255,255,255,.72); }
.page-sequence.is-light .seq__exit { border-color: rgba(255,255,255,.4); }

/* A Code with its own recording (library.js, codeFiles): without scripts it
   stands as a plain player under the words; with them it is hidden and BEGIN
   drives it (code-sequence.js). */
.seq__audio { display: block; width: min(100%, 360px); margin: 1.4rem auto 0; }
/* Its guide, at the close: a quiet link, like the others here. */
.seq__guides { margin: 1rem 0 0; display: flex; flex-wrap: wrap; gap: .6rem 1.2rem; justify-content: center; }
.seq__guide {
  font-size: .64rem; font-weight: 600; letter-spacing: .2em; text-transform: uppercase;
  text-decoration: underline; text-underline-offset: 4px; opacity: .85;
}
.seq__guide:hover { opacity: 1; }