/* A single flow owns the preview. Nothing is independently pinned over another
   control. The forest remains scenery; text gets its own contrast surface. */
.breathing[open]{
 --session-ink:#30483e;--session-paper:#f5f1e6;--session-edge:#30483e24;
 display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto auto minmax(160px,1fr) auto;
 align-content:stretch;gap:10px;padding:20px 24px 16px;
 padding-top:max(20px,env(safe-area-inset-top));padding-bottom:max(16px,env(safe-area-inset-bottom));
 width:100%;height:100dvh;overflow-x:hidden;overflow-y:auto;isolation:isolate;
 color:var(--session-ink);overscroll-behavior:contain;
}
.breathing.evening{--session-ink:#f7f3e7;--session-paper:#102b31;--session-edge:#eef2e32e}
.breathing .breath-world{position:fixed;z-index:-2;inset:0;pointer-events:none}
.breathing .breath-world:after{inset:0;background:linear-gradient(180deg,#f5f1e6fa 0%,#f5f1e6f2 21%,#f5f1e6a6 35%,#f5f1e600 52%,#f5f1e622 74%,#f5f1e6f5 100%)}
.breathing.evening .breath-world:after{background:linear-gradient(180deg,#102b31fa 0%,#102b31f2 21%,#102b31a6 35%,#102b3100 52%,#102b3122 74%,#102b31f5 100%)}
.session-topbar{position:relative;z-index:1;display:flex;align-items:center;justify-content:space-between;gap:16px;width:100%;max-width:1280px;margin:0 auto}
.breathing .sound-control,.breathing .close{position:static;margin:0;min-height:44px;background:color-mix(in srgb,var(--session-paper) 90%,transparent);color:var(--session-ink);border:1px solid var(--session-edge);box-shadow:inset 0 1px 0 #ffffff40;flex-shrink:0}
.breathing .sound-control{font-size:13px;padding:9px 16px}
.breathing .close{width:44px;height:44px;font-size:26px;font-weight:400}
.breathing .technique-control{position:relative;inset:auto;transform:none;justify-self:center;max-width:100%;width:380px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:3px;padding:4px;margin:0;border-color:var(--session-edge);background:color-mix(in srgb,var(--session-paper) 94%,transparent);border-radius:28px;white-space:normal}
.breathing .technique-control button{padding:8px 6px;min-height:40px;min-width:0;font-size:13px;line-height:1.2;color:var(--session-ink)}
.breathing .technique-control button[aria-pressed=true]{background:#30483e;color:#fff8e8}
.breathing.evening .technique-control button[aria-pressed=true]{background:#edf0dc;color:#203d32}
.breathing .breath-heading{position:relative;inset:auto;align-self:start;justify-self:center;width:min(100%,760px);min-height:146px;text-align:center;padding:10px 0 0;margin:0;z-index:1}
.breathing .breath-heading .eyebrow{margin:0 0 12px;line-height:1.5;color:inherit;font-size:10px;letter-spacing:.14em}
.breathing .breath-heading h2{font-size:clamp(32px,4.8vw,64px);line-height:1.08;letter-spacing:-.055em;margin:0;text-wrap:balance}
.breathing .breath-heading #breath-note{font-size:14px;line-height:1.5;max-width:420px;min-height:42px;margin:12px auto 0;padding:0 12px;color:inherit}
.breathing[data-guiding=true] .breath-heading #breath-note{font-size:28px;line-height:1.2;font-variant-numeric:tabular-nums}
.session-character{position:relative;min-width:0;min-height:160px;container-type:size;display:grid;grid-template-columns:minmax(0,1fr);place-items:center;overflow:clip;z-index:0}
.breathing .session-character canvas{position:static;inset:auto;transform:none;width:min(125cqh,120cqw);height:auto;max-width:none;max-height:none;aspect-ratio:1100/1000;object-fit:contain}
.session-footer{position:relative;z-index:1;justify-self:center;width:min(100%,480px)}
.breathing .breath-controls{position:static;inset:auto;display:flex;align-items:center;justify-content:center;gap:8px;width:100%;margin:0}
.breathing .session-button{display:flex;align-items:center;justify-content:center;gap:9px;min-height:50px;flex:1 1 0;min-width:0;border-radius:18px;padding:12px 16px;font-size:14px;font-weight:500;line-height:1.2;color:var(--session-ink);background:color-mix(in srgb,var(--session-paper) 94%,transparent);border:1px solid var(--session-edge);box-shadow:inset 0 1px 0 #ffffff40,0 3px 12px #18382c08;transition:background-color .16s,border-color .16s,transform .16s}
.breathing .session-primary{background:#30483e;color:#fff8e8;border-color:#30483e;box-shadow:inset 0 1px 0 #ffffff16,0 3px 12px #18382c16}
.breathing.evening .session-primary{background:#edf0dc;color:#203d32;border-color:#edf0dc}
.session-button svg{width:18px;height:18px;flex-shrink:0;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.session-button .play-glyph{display:none}
.breathing[data-paused=true] .play-glyph{display:block}
.breathing[data-paused=true] .pause-glyph{display:none}
.breathing button:disabled{opacity:.55;cursor:wait}
.breathing button:active{transform:translateY(1px)}
.breathing button:focus-visible{outline:2px solid var(--session-ink);outline-offset:3px}
.breathing .preview-note{position:static;inset:auto;color:var(--session-ink);opacity:1;text-align:center;margin:13px 0 0;line-height:1.5;font-size:11px}
/* Scene-two cue: one count/phase unit, held still during both box holds. */
.breath-cue .scene-phase{display:flex;align-items:center;justify-content:center;gap:13px}
#scene-breath-count{font-variant-numeric:tabular-nums;font-size:22px;line-height:1;min-width:27px;padding-right:13px;border-right:1px solid #fff8e850}
/* A quiet readout beneath Miro, sized independently from interactive buttons. */
@media(max-width:700px){
 .companion-dock .breath-cue{min-width:0;width:120px;padding:6px 10px 7px;border-radius:12px;font-size:12px;gap:5px}
 .breath-cue .scene-phase{gap:8px}
 #scene-breath-count{font-size:17px;min-width:18px;padding-right:8px}
 .breath-cue .breath-trace{width:76px}
}
@media(hover:hover) and (pointer:fine){
 .breathing .session-button:hover{background:var(--session-paper);border-color:color-mix(in srgb,var(--session-ink) 38%,transparent)}
 .breathing .session-primary:hover{background:#3a5548;color:#fff8e8;border-color:#3a5548}
 .breathing.evening .session-primary:hover{background:#fff8e8;color:#203d32}
}
@media(max-width:600px){
 .breathing[open]{padding-inline:16px;gap:8px;padding-top:max(14px,env(safe-area-inset-top))}
 .breathing .breath-heading{min-height:128px;padding-top:8px}
 .breathing .breath-heading h2{font-size:clamp(30px,8vw,44px)}
 .breathing .session-button{padding:12px 9px;gap:7px;font-size:13px;border-radius:16px}
}
@media(max-height:700px){
 .breathing[open]{gap:6px;padding-block:10px}
 .breathing .breath-heading{min-height:110px;padding-top:6px}
 .breathing .breath-heading h2{font-size:32px}
 .breathing .breath-heading .eyebrow{margin-bottom:8px}
 .breathing .breath-heading #breath-note{margin-top:8px;font-size:13px;min-height:39px}
 .breathing[data-guiding=true] .breath-heading #breath-note{font-size:24px}
 .breathing .session-button{min-height:46px}
 .breathing .preview-note{margin-top:10px}
}
@media(max-width:360px){.breathing .session-button{gap:5px;font-size:12px;padding-inline:7px}.session-button svg{width:15px}}
@media(prefers-reduced-motion:reduce){.breathing .session-button{transition:none}}

/* On phones the future-feature invitation sits beside the quiet scene, not in
   the vertical space that determines the companion's size. Desktop is intact. */
@media(max-width:700px){
 .continuous-journey .night-copy .make-yours{position:absolute;top:calc(100% + 12px);right:0;width:100px;min-height:44px;margin:0;padding:4px 0;display:flex;flex-direction:column;align-items:flex-end;justify-content:center;gap:3px;line-height:1.35;font-size:12px}
 .continuous-journey .night-copy .make-yours span{font-size:10px}
}