/* =====================================================================
   Saans — the breathing experience.
   The guide is driven by ONE value, --b (0 = empty, 1 = full), written
   every frame by breathing-engine.js from elapsed time. CSS only maps
   --b to shape. No CSS keyframes pace the breath.
   ===================================================================== */

.breathe-page { background: linear-gradient(180deg, var(--sky-top) 0%, var(--sky-bottom) 55%) fixed, var(--bg); }

.breathe {
  flex: 1 0 auto;
  width: 100%;
  max-width: 44rem;
  margin: 0 auto;
  padding: var(--space-5) var(--space-4) var(--space-7);
}
.breathe__stage[hidden] { display: none; }
.breathe__heading { font-size: var(--step-3); margin-bottom: var(--space-2); }
.breathe__hint { color: var(--text-muted); margin-bottom: var(--space-5); }

.unsafe-line {
  margin-top: var(--space-5);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-m);
  background: var(--surface-2);
  border: 1px solid var(--border);
  font-size: var(--step--1);
}
.unsafe-line a { font-weight: 650; }

/* ---------- Recommendation ---------- */
.rec-card {
  display: grid;
  gap: var(--space-4);
  padding: var(--space-5);
  border-radius: var(--radius-l);
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-lift);
}
.rec-card__title { font-size: var(--step-2); margin: 0; }
.rec-card__desc { margin: 0; color: var(--text-muted); }
.rec-card__orb {
  width: 5.5rem; height: 5.5rem;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, var(--breath-core), var(--breath-in) 55%, var(--breath-out));
  box-shadow: 0 0 40px color-mix(in srgb, var(--breath-in) 55%, transparent);
  justify-self: center;
}
.durations { display: flex; flex-wrap: wrap; gap: var(--space-2); }

/* ---------- Safety card (first use) ---------- */
.safety-card {
  padding: var(--space-5);
  border-radius: var(--radius-l);
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-soft);
}
.safety-card ul { padding-inline-start: 1.1rem; }
.safety-card .reassure { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-2); }
.safety-card .reassure li { margin: 0; }

/* =====================================================================
   SESSION (immersive)
   ===================================================================== */
.in-session .site-header,
.in-session .site-footer { display: none; }
.in-session body, body.in-session { overflow: hidden; }

.session {
  position: fixed;
  inset: 0;
  z-index: 30;
  display: grid;
  grid-template-rows: auto 1fr auto auto;
  grid-template-columns: minmax(0, 1fr);
  height: 100vh;
  height: 100dvh;
  padding: max(var(--space-3), env(safe-area-inset-top)) var(--space-4) max(var(--space-4), env(safe-area-inset-bottom));
  background: linear-gradient(180deg, var(--sky-top) 0%, var(--sky-bottom) 70%), var(--bg);
  color: var(--text);
  overflow: hidden;
}
.session[hidden] { display: none; }

.session__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  max-width: 44rem;
  width: 100%;
  margin: 0 auto;
}
.session__title {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--step--1);
  font-weight: 600;
  color: var(--text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.session__center {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 0;
  gap: var(--space-4);
}

/* ---------- The guide ---------- */
.guide {
  --b: 0.35;
  --size: min(72vw, 46vh, 22rem);
  position: relative;
  width: var(--size);
  height: var(--size);
  flex: none;
}
.guide svg { width: 100%; height: 100%; }
.guide__layer { display: none; }
.guide[data-visual="orb"] .guide__layer--orb,
.guide[data-visual="flower"] .guide__layer--flower,
.guide[data-visual="wave"] .guide__layer--wave,
.guide[data-visual="cloud"] .guide__layer--cloud,
.guide[data-visual="leaf"] .guide__layer--leaf { display: inline; }

.guide .t-scale { transform-box: view-box; transform-origin: 100px 100px; }

/* Orb */
.orb-halo { fill: var(--breath-in); opacity: calc(0.12 + 0.18 * var(--b)); transform: scale(calc(0.62 + 0.38 * var(--b))); }
.orb-out  { fill: var(--breath-out); transform: scale(calc(0.5 + 0.42 * var(--b))); }
.orb-in   { fill: var(--breath-in); opacity: var(--b); transform: scale(calc(0.5 + 0.42 * var(--b))); }
.st-core { stop-color: var(--breath-core); }
.orb-core { opacity: calc(0.55 + 0.4 * var(--b)); transform: scale(calc(0.5 + 0.42 * var(--b))); }
.orb-shine { fill: none; stroke: var(--breath-core); stroke-width: 2.5; stroke-linecap: round; opacity: 0.55; transform: scale(calc(0.5 + 0.42 * var(--b))); }

/* Flower: petals grow outward from the centre */
.flower-turn { transform-box: view-box; transform-origin: 100px 100px; transform: rotate(calc(var(--b) * 14deg)); }
.petal-a, .petal-b { transform-box: view-box; transform-origin: 100px 100px; }
.petal-a { fill: var(--petal); opacity: calc(0.55 + 0.4 * var(--b)); transform: scale(calc(0.42 + 0.58 * var(--b))); }
.petal-b { fill: var(--breath-out); opacity: calc(0.45 + 0.35 * var(--b)); transform: scale(calc(0.32 + 0.5 * var(--b))); }
.flower-core { fill: var(--breath-core); stroke: var(--accent); stroke-width: 1.5; }

/* Wave: water rises and falls inside a soft vessel */
.wave-vessel { fill: var(--surface); opacity: 0.55; stroke: var(--breath-out); stroke-width: 2; }
.wave-water { fill: var(--water); transform: translateY(calc((1 - var(--b)) * 120px)); }
.wave-water-2 { fill: var(--breath-out); opacity: 0.55; transform: translate(calc(var(--b) * -24px), calc((1 - var(--b)) * 120px)); }
.wave-sun { fill: var(--breath-in); opacity: calc(0.3 + 0.5 * var(--b)); }

/* Cloud: puffs swell together */
.cloud-puff { fill: var(--cloud); stroke: var(--breath-out); stroke-width: 1.5; stroke-opacity: 0.5; transform-box: view-box; transform-origin: 100px 110px; }
.cloud-puff--1 { transform: scale(calc(0.62 + 0.38 * var(--b))); }
.cloud-puff--2 { transform: scale(calc(0.58 + 0.42 * var(--b))); }
.cloud-puff--3 { transform: scale(calc(0.66 + 0.34 * var(--b))); }
.cloud-glow { fill: var(--breath-in); opacity: calc(0.1 + 0.25 * var(--b)); transform: scale(calc(0.7 + 0.3 * var(--b))); }

/* Leaf: lifts on the in-breath, drifts down on the out-breath */
.leaf-group { transform-box: view-box; transform-origin: 100px 110px; transform: translateY(calc((1 - var(--b)) * 34px)) rotate(calc(-14deg + 24deg * var(--b))) scale(calc(0.8 + 0.2 * var(--b))); }
.leaf-blade { fill: var(--leaf); }
.leaf-vein { stroke: var(--breath-core); stroke-width: 2; fill: none; stroke-linecap: round; opacity: 0.8; }
.leaf-light { fill: var(--breath-in); opacity: calc(0.12 + 0.25 * var(--b)); transform: scale(calc(0.7 + 0.3 * var(--b))); }

/* Noticing mode (no pacing): soft, static glow */
.guide[data-mode="notice"] { --b: 0.62; }

/* Count in the centre (attention anchor) */
.guide__count {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-family: var(--font-display);
  font-size: clamp(2.2rem, 9vw, 3.4rem);
  color: var(--breath-ink);
  pointer-events: none;
  font-variant-numeric: tabular-nums;
}
.guide[data-visual="wave"] .guide__count,
.guide[data-visual="leaf"] .guide__count { color: var(--text); }

/* ---------- Words ---------- */
.phase-word {
  margin: 0;
  min-height: 1.3em;
  font-family: var(--font-display);
  font-size: var(--step-3);
  text-align: center;
  line-height: 1.2;
}
.phase-sub {
  margin: 0;
  min-height: 1.5em;
  max-width: 26rem;
  text-align: center;
  color: var(--text-muted);
  font-size: var(--step-0);
  transition: opacity 600ms var(--ease-calm);
}
.phase-sub.is-fading { opacity: 0; }

/* Reduced-motion phase steps (always present for AT, visible in reduced mode) */
.phase-steps {
  display: none;
  list-style: none;
  margin: 0;
  padding: 0;
  gap: var(--space-2);
  justify-content: center;
  flex-wrap: wrap;
}
.phase-steps li {
  margin: 0;
  padding: 0.3rem 0.8rem;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border-strong);
  font-size: var(--step--1);
  color: var(--text-muted);
}
.phase-steps li.is-now {
  color: var(--text);
  font-weight: 700;
  border-width: 2px;
  border-color: var(--primary);
  text-decoration: underline;
  text-underline-offset: 0.25em;
}
.phase-steps li.is-now::before { content: "▸ "; }
.phase-timer {
  display: none;
  font-variant-numeric: tabular-nums;
  font-size: var(--step-2);
  font-family: var(--font-display);
  margin: 0;
}

.reduced-motion .guide { --size: min(52vw, 32vh, 15rem); }
.reduced-motion .guide svg { opacity: calc(0.62 + 0.38 * var(--lvl, 0.5)); transition: none; }
.reduced-motion .phase-steps { display: flex; }
.reduced-motion .phase-timer { display: block; }

/* ---------- Progress ---------- */
.session__progress {
  max-width: 30rem;
  width: 100%;
  margin: 0 auto var(--space-3);
}
.progress {
  height: 6px;
  border-radius: 3px;
  background: color-mix(in srgb, var(--border) 80%, transparent);
  overflow: hidden;
}
.progress__fill {
  height: 100%;
  width: 100%;
  background: var(--primary);
  border-radius: 3px;
  transform-origin: left center;
  transform: scaleX(var(--p, 0));
}
[dir="rtl"] .progress__fill { transform-origin: right center; }
.progress__meta {
  display: flex;
  justify-content: space-between;
  gap: var(--space-3);
  margin-top: var(--space-2);
  font-size: var(--step--1);
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}

/* ---------- Controls ---------- */
.session__controls {
  display: grid;
  gap: var(--space-2);
  max-width: 30rem;
  width: 100%;
  margin: 0 auto;
}
.controls-main {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--space-2);
}
.controls-main .btn { font-weight: 550; }
.controls-main .btn:first-child { justify-self: start; }
.controls-main .btn:last-child { justify-self: end; }
.controls-main .btn { padding-inline: 0.75rem; }
.btn--pause {
  min-width: 7.5rem;
  min-height: 3.5rem;
  font-size: var(--step-1);
}
.controls-secondary {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-2);
}
.controls-secondary .btn { font-weight: 500; }

.comfort-link {
  justify-self: center;
  font-size: var(--step--1);
}

/* ---------- Sheets / dialogs inside session ---------- */
dialog.sheet {
  width: min(30rem, 100vw);
  max-width: 100vw;
  max-height: 85dvh;
  margin: auto auto 0;
  padding: var(--space-5) var(--space-5) calc(var(--space-5) + env(safe-area-inset-bottom));
  border: 1px solid var(--border);
  border-radius: var(--radius-l) var(--radius-l) 0 0;
  background: var(--surface);
  color: var(--text);
  box-shadow: var(--shadow-lift);
}
dialog.sheet::backdrop { background: rgb(15 10 8 / 0.35); }
@media (min-width: 40rem) {
  dialog.sheet { margin: auto; border-radius: var(--radius-l); }
}
.sheet__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-4); }
.sheet__head h2 { font-size: var(--step-2); margin: 0; }
.sheet .field { margin-bottom: var(--space-4); }

.visual-picker {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(5.5rem, 1fr));
  gap: var(--space-2);
}
.visual-picker label { position: relative; }
.visual-picker input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.visual-picker span {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-3) var(--space-2);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-m);
  cursor: pointer;
  font-size: var(--step--1);
}
.visual-picker svg { width: 2.4rem; height: 2.4rem; }
.visual-picker input:checked + span { border-color: var(--primary); box-shadow: inset 0 0 0 2px var(--primary); font-weight: 650; }
.visual-picker input:focus-visible + span { outline: 3px solid var(--focus); outline-offset: 3px; }
.mini-a { fill: var(--breath-in); }
.mini-b { fill: var(--breath-out); }
.mini-c { fill: var(--breath-core); }
.mini-leaf { fill: var(--leaf); }

/* ---------- Background particles (decorative only) ---------- */
.particles { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.particles span {
  position: absolute;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--particle);
  opacity: 0.25;
  animation: drift 38s linear infinite;
}
.particles span:nth-child(1) { left: 12%; top: 80%; animation-delay: -4s; }
.particles span:nth-child(2) { left: 30%; top: 90%; animation-delay: -15s; width: 4px; height: 4px; }
.particles span:nth-child(3) { left: 68%; top: 85%; animation-delay: -22s; }
.particles span:nth-child(4) { left: 85%; top: 95%; animation-delay: -31s; width: 5px; height: 5px; }
.particles span:nth-child(5) { left: 50%; top: 100%; animation-delay: -9s; width: 3px; height: 3px; }
@keyframes drift {
  from { transform: translateY(0); opacity: 0; }
  15% { opacity: 0.25; }
  85% { opacity: 0.2; }
  to { transform: translateY(-75vh); opacity: 0; }
}
:root[data-atmosphere="night"] .particles,
.reduced-motion .particles { display: none; }

/* ---------- Completion ---------- */
.complete { text-align: center; }
.bloom { width: 9rem; height: 9rem; margin: 0 auto var(--space-4); }
.bloom .bloom-petal { fill: var(--petal); transform-box: view-box; transform-origin: 60px 56px; animation: bloom 1.6s var(--ease-calm) both; }
.bloom .bloom-petal--b { fill: var(--breath-out); animation-delay: 0.15s; }
.bloom .bloom-core { fill: var(--breath-core); stroke: var(--accent); stroke-width: 1.5; }
.bloom .bloom-stem { stroke: var(--leaf); stroke-width: 3; fill: none; stroke-linecap: round; }
.bloom .bloom-leaf { fill: var(--leaf); }
@keyframes bloom { from { transform: scale(0.2); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.complete__title { font-size: var(--step-3); margin-bottom: var(--space-2); }
.complete__duration { font-size: var(--step-1); margin-bottom: var(--space-2); }
.complete__delight { color: var(--text-muted); font-style: italic; }
.complete .btn-row { justify-content: center; margin: var(--space-5) 0; }
.after-choices { justify-content: center; }
.after-choices .btn[aria-pressed="true"] { border-color: var(--primary); box-shadow: inset 0 0 0 2px var(--primary); }
.after-reply { max-width: 28rem; margin: var(--space-4) auto 0; }

/* ---------- Landscape phones: guide beside the words ---------- */
@media (orientation: landscape) and (max-height: 32rem) {
  .session { grid-template-rows: auto 1fr auto; }
  .session__center { flex-direction: row; gap: var(--space-5); }
  .guide { --size: min(56vh, 40vw); }
  .session__progress { display: none; }
  .phase-word { font-size: var(--step-2); }
}

@media (forced-colors: active) {
  .guide svg * { fill: CanvasText; stroke: Canvas; }
  .progress__fill { background: Highlight; }
  .phase-steps { display: flex; }
}

.complete__after-title { font-size: var(--step-1); margin-top: var(--space-6); }

@media (max-width: 22rem) {
  .controls-main { gap: var(--space-1); }
  .controls-main .btn { padding-inline: 0.55rem; font-size: 0.85rem; }
  .btn--pause { min-width: 6.5rem; }
  .controls-secondary .btn { padding-inline: 0.5rem; }
}