/* The class player's look, "G · Landscape" (Olga, 2026-10-12, built on look F of 2026-10-11): the cloud is the screen and breathes with
   you; the cue and the count on its centre; the spoken line under them; the header in one voice (the part's name in the cue's serif,
   how to breathe it, what comes next); Voice and Breath as switches; one round icon button. New in G: the field behind the cloud
   deepens with the part's level (mild, medium, strong look different), a halo that grows with the level and breathes, the class as a
   landscape the whole width (the builder's flat parts and soft joins), lit part by part, with the playhead and its time pill; a tap on
   a dot jumps to that part; on a phone every part gets the same width. The big number is the serif, a little smaller than before. */

.player[class*="opt-"] { padding: 0; background: none; }
.player[class*="opt-"] .player__top, .player[class*="opt-"] .player__meta, .player[class*="opt-"] .player__stage, .player[class*="opt-"] .player__bottom { display: contents; }
.player[class*="opt-"] .player__pills { display: contents; }
.player[class*="opt-"] .player__label { margin: 0; }
.player[class*="opt-"] .player__next { max-width: none; min-height: 0; }
.player[class*="opt-"] .player__pill, .player[class*="opt-"] .player__dl, .player[class*="opt-"] .player__close, .player[class*="opt-"] .player__btn { transition: opacity .2s, background .2s, color .2s; }

.player.opt-g { --core: #5B2E5E; --edge: #3B2140; --halo: #B9B6F5; --halo-a: 0; --halo-s: 1;
  background: var(--plum-deep); display: grid; padding: 30px 40px 26px; overflow: hidden;
  grid-template-columns: 1fr auto; grid-template-rows: auto auto 1fr auto auto auto;
  grid-template-areas: "label tools" "head head" "text text" "next next" "nav nav" "ctl ctl"; }
/* the field and the halo: levels 0 and 1 are the plum; 2 and 3 warm toward periwinkle; 4 and 5 heat toward rose */
.player.opt-g .field { position: absolute; inset: 0; background: radial-gradient(120% 100% at 50% 46%, var(--core) 0%, var(--edge) 64%); transition: background 6s ease; }
.player.opt-g[data-level="1"] { --halo-a: .07; }
.player.opt-g[data-level="2"] { --core: #66357C; --edge: #3B2140; --halo: #B9B6F5; --halo-a: .14; }
.player.opt-g[data-level="3"] { --core: #7A3F8A; --edge: #371C44; --halo: #CFA0E6; --halo-a: .22; }
.player.opt-g[data-level="4"] { --core: #8A3A70; --edge: #2E1535; --halo: #F3A6C6; --halo-a: .3; }
.player.opt-g[data-level="5"] { --core: #93385F; --edge: #27122C; --halo: #F3A6C6; --halo-a: .4; }
.player.opt-g .halo { position: absolute; left: 50%; top: 46%; width: 92vmin; height: 92vmin; transform: translate(-50%, -50%) scale(var(--halo-s)); border-radius: 50%; opacity: var(--halo-a);
  background: radial-gradient(closest-side, var(--halo) 0%, transparent 70%); transition: opacity 2.4s ease; will-change: transform; pointer-events: none; }
.player.opt-g .breath { position: absolute; left: 50%; top: 46%; width: 160vmax; height: 160vmax; transform: translate(-50%, -50%); opacity: .9; }
.player.opt-g .player__label { grid-area: label; color: var(--rose-light); z-index: 1; }
.player.opt-g .player__phase { display: none; }
.player.opt-g .player__pills { display: flex; grid-area: tools; justify-self: end; gap: 22px; z-index: 1; }
.player.opt-g .player__dl, .player.opt-g .player__pill { height: auto; padding: 0; border: 0; background: none; }
.player.opt-g .player__dl { display: none; }   /* no Save in the player: the link is already in the inbox (Olga, 2026-10-11) */
.player.opt-g .player__pill { opacity: .7; gap: 10px; text-decoration: none !important; } .player.opt-g .player__pill.is-on { opacity: 1; background: none; }
.player.opt-g .player__pill i { width: 30px; height: 18px; border-radius: 9px; border: 1.5px solid rgba(255,247,238,.55); background: none; position: relative; transition: background .25s, border-color .25s; }
.player.opt-g .player__pill i::after { content: ''; position: absolute; top: 2px; left: 2px; width: 11px; height: 11px; border-radius: 50%; background: rgba(255,247,238,.6); transition: transform .25s, background .25s; }
.player.opt-g .player__pill.is-on i { background: var(--page); border-color: var(--page); }
.player.opt-g .player__pill.is-on i::after { transform: translateX(12px); background: var(--plum-deep); }
.player.opt-g .player__close { width: 32px; height: 32px; border-color: rgba(255,247,238,.3); font-size: 13px; }
/* the cue, the count and the small line under them, on the cloud's own centre (Olga, 2026-10-11) */
.player.opt-g .breath__text { position: absolute; left: 50%; top: 46%; transform: translate(-50%, -58%); z-index: 1; gap: 6px; width: max-content; max-width: 90vw; }
.player.opt-g .breath__cue { font-family: var(--serif); font-style: normal; font-size: 30px; letter-spacing: 0; text-transform: none; color: var(--page); padding: 0; min-height: 33px; }   /* upright, no italic (Olga, 2026-10-11) */
.player.opt-g .breath__count { font-size: clamp(104px, 26vh, 244px); line-height: .9; min-height: .9em; text-shadow: 0 2px 40px rgba(59,33,64,.4); }   /* the serif, a little smaller than before (Olga, 2026-10-12) */
.player.opt-g .breath__sub { font-family: var(--sans); font-size: 15px; opacity: .7; min-height: 22px; color: var(--page); }
.player.opt-g .player__next { grid-area: next; z-index: 1; font-family: var(--sans); font-style: normal; font-size: 20px; line-height: 1.5; margin: 0 auto 30px; max-width: 560px; color: var(--page); }
/* the landscape (main.js drawFlow): the class the whole width, lit part by part; press, drag or tap a dot to move */
.player.opt-g .flow { grid-area: nav; height: 118px; margin-bottom: 26px; z-index: 2; opacity: 1; }
.player.opt-g .flow .fl-area { transition: opacity .6s; }
.player.opt-g .flow .fl-line { fill: none; stroke-width: 2; stroke-linejoin: round; }
.player.opt-g .flow .fl-dot { transition: r .3s, fill .3s; cursor: pointer; }
.player.opt-g .flow .fl-floor { stroke: rgba(255,247,238,.22); stroke-width: 1; }
.player.opt-g .flow .fl-ph { stroke: var(--page); stroke-width: 1.5; }
.player.opt-g .flow.is-dragging .fl-ph { stroke-width: 2.5; }
.player.opt-g .flow .fl-pill { fill: var(--page); } .player.opt-g .flow .fl-pill-t { font: 500 11px var(--mono); fill: var(--plum-deep); letter-spacing: 0; }
.player.opt-g .player__controls { grid-area: ctl; z-index: 1; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; }   /* the button on the screen's centre line, whatever the two times are wide */
.player.opt-g .player__time--right { justify-self: end; }
.player.opt-g .player__time { opacity: .8; letter-spacing: .02em; }
.player.opt-g .player__btn { width: 48px; height: 48px; padding: 0; font-size: 0; line-height: 0; color: transparent; background: rgba(255,247,238,.92); position: relative; overflow: hidden; }
.player.opt-g .player__btn:focus { outline: none; } .player.opt-g .player__btn:focus-visible { box-shadow: 0 0 0 3px rgba(255,247,238,.45); }   /* no blue browser ring (her screenshot, 2026-10-12) */
/* the icon is pinned to the circle's centre on its own, so the button's hidden word (Pause / Resume / Replay) cannot push it (Olga saw it sit right of centre in her browser, 2026-10-11) */
.player.opt-g .player__btn::before { content: ''; position: absolute; left: 50%; top: 50%; width: 18px; height: 18px; margin: -9px 0 0 -9px; background: var(--plum); -webkit-mask: var(--ic) center / contain no-repeat; mask: var(--ic) center / contain no-repeat;
  --ic: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'><rect x='3.5' y='2.5' width='4' height='13' rx='1.5'/><rect x='10.5' y='2.5' width='4' height='13' rx='1.5'/></svg>"); }
.player.opt-g.is-paused .player__btn::before { --ic: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'><path d='M4.35 3.4 L13.75 9 L4.35 14.6 Z' stroke='black' stroke-width='2.2' stroke-linejoin='round' fill='black'/></svg>"); margin-left: -7.5px; }   /* the triangle sits 1.5 px right of the geometric centre: its weight is on the left, so the eye wants it there (Olga, 2026-10-11) */
.player.opt-g.is-done .player__btn::before { --ic: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'><path fill='none' stroke='black' stroke-width='2' stroke-linecap='round' d='M14.5 9a5.5 5.5 0 1 1-1.6-3.9'/><path d='M14.8 2.5v4h-4z'/></svg>"); }
.player:not(.opt-g) .flen, .flen { display: none; }

/* G on a phone: the parts share the width equally, finger-sized; no name, no close until the class is done; the length top right (Olga, 2026-10-11) */
@media (max-width: 760px) {
  .player.opt-g { padding: 22px 20px 24px; grid-template-columns: auto auto 1fr; grid-template-rows: auto auto 1fr auto auto auto; row-gap: 0;
    grid-template-areas: "voice breath close" "head head head" "text text text" "next next next" "nav nav nav" "ctl ctl ctl"; }
  .player.opt-g .player__label { display: none; }
  .player.opt-g .player__pills { display: contents; }
  .player.opt-g #voiceToggle { grid-area: voice; } .player.opt-g #breathToggle { grid-area: breath; margin-left: 22px; }
  .player.opt-g .player__pill { font-size: 11px; letter-spacing: .08em; z-index: 1; justify-self: start; }
  .player.opt-g .player__close { grid-area: close; justify-self: end; z-index: 1; display: none; }
  .player.opt-g.is-done .player__close { display: inline-flex; align-items: center; justify-content: center; }
  .player.opt-g .flen { display: block; grid-area: close; justify-self: end; align-self: center; font: 500 11px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--page); opacity: .8; z-index: 1; }
  .player.opt-g.is-done .flen { display: none; }
  .player.opt-g .player__next { align-self: end; font-size: 18px; margin-bottom: 34px; }
  .player.opt-g .breath__cue { font-size: 26px; }
  .player.opt-g .breath__count { font-size: clamp(104px, 22vh, 190px); }
  .player.opt-g .flow { height: 84px; margin-bottom: 12px; }
}

/* ===== the header: name of the breath, how to breathe it, what comes next. One voice only (Olga, 2026-10-11: "too many font
   variations, crowded"): the same Inter as the spoken line, the name in the cue's serif; top left, under the class label. ===== */
.phead { grid-area: head; z-index: 1; display: grid; gap: 4px; min-width: 0; font-family: var(--sans); font-size: 15px; line-height: 1.5; color: var(--page); margin-top: 40px; }
.phead__name { display: block; font-family: var(--serif); font-style: normal; font-weight: 400; font-size: 34px; line-height: 1.1; margin-bottom: 4px; }
.phead__how { display: block; opacity: .85; }
.phead__line { max-width: 560px; text-wrap: pretty; }
.phead__next { font: inherit; letter-spacing: 0; text-transform: none; opacity: .55; }
.phead__next b { font-weight: 500; } .phead__next em { font-style: normal; }
.player:not(.opt-g) .phead { display: none; }
@media (max-width: 760px) { .phead { font-size: 14px; margin-top: 34px; } .phead__line { max-width: none; } .phead__name { font-size: 29px; } }