/* =========================================================================
 * The Coherence Breath Pacer (#gil-pacer, templates/public/partials/breath-pacer.php, assets/js/breath-pacer.js) on the
 * guest Inner Science Lab. Loaded after guest.css and guest-inner-lab.css. Temple Dawn (parchment) by default, Temple Dark
 * under [data-theme="dark"]. The mandala breathes with transform: scale() and opacity only (no layout, no shift) inside a
 * fixed square stage; under prefers-reduced-motion it stays still and its opacity, the cue and the ring carry the rhythm.
 * Phones first: no horizontal scroll from 320px, every control at least 44px.
 * ========================================================================= */

.inner-lab-pacer { border-bottom: 1px solid var(--champagne); }
.inner-lab-pacer, .inner-lab-pacer *, .inner-lab-pacer *::before, .inner-lab-pacer *::after { box-sizing: border-box; }

.bp {
  --bp-gold: #B45309; --bp-amber: #D97706; --bp-petal: rgba(245, 158, 11, 0.16); --bp-petal-2: rgba(217, 119, 6, 0.22);
  --bp-line: rgba(180, 83, 9, 0.55); --bp-bindu: #FBF8F1; --bp-glow: rgba(245, 158, 11, 0.34);
  --bp-track: rgba(180, 83, 9, 0.16); --bp-bar: #B45309; --bp-cue: #78350F; --bp-seg: rgba(251, 248, 241, 0.7);
  --bp-panel: radial-gradient(70% 55% at 50% 38%, rgba(245, 158, 11, 0.16), transparent 72%),
    linear-gradient(170deg, #FBF8F1 0%, #F5EEDF 62%, #F1E6D2 100%);
  --bp-ease: cubic-bezier(0.4, 0, 0.2, 1);
  position: relative; isolation: isolate; overflow: hidden; display: grid; gap: 16px; min-width: 0; width: 100%;
  padding: clamp(16px, 3.4vw, 28px); border-radius: 24px; border: 1px solid var(--card-border);
  background: var(--bp-panel); box-shadow: var(--shadow-soft);
}
[data-theme="dark"] .bp {
  --bp-gold: #F59E0B; --bp-amber: #D97706; --bp-petal: rgba(245, 158, 11, 0.12); --bp-petal-2: rgba(217, 119, 6, 0.2);
  --bp-line: rgba(245, 158, 11, 0.6); --bp-bindu: #FCFBF7; --bp-glow: rgba(245, 158, 11, 0.32);
  --bp-track: rgba(217, 119, 6, 0.2); --bp-bar: #F59E0B; --bp-cue: #FCFBF7; --bp-seg: rgba(13, 11, 9, 0.45);
  --bp-panel: radial-gradient(70% 55% at 50% 38%, rgba(217, 119, 6, 0.2), transparent 72%),
    radial-gradient(60% 40% at 50% 100%, rgba(136, 19, 55, 0.16), transparent 75%),
    linear-gradient(170deg, #1A1511 0%, #120F0C 60%, #0D0B09 100%);
}
/* phones: intro, the pacer, then the science; from 960px the pacer sits beside both */
.bp-split { display: grid; gap: clamp(24px, 4vw, 40px); grid-template-columns: minmax(0, 1fr); grid-template-areas: "intro" "card" "science"; }
.bp-intro { grid-area: intro; } .bp { grid-area: card; } .bp-science { grid-area: science; }
@media (max-width: 959.98px) { .bp { max-width: 600px; justify-self: center; } }
@media (min-width: 960px) {
  .bp-split { column-gap: clamp(32px, 4vw, 56px); row-gap: 8px; grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
    grid-template-areas: "intro card" "science card"; grid-template-rows: auto 1fr; }
  .bp { align-self: center; }
}
.bp-sub { margin: 0 0 0.3em; }
.bp-copy .g-note { margin-top: 18px; }
.bp-not { color: var(--ink); }

/* ---- session length: a segmented radiogroup ----------------------------------------------------------------- */
.bp-len {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.35fr); gap: 4px; padding: 4px;
  border-radius: 999px; border: 1px solid var(--champagne-strong); background: var(--bp-seg);
}
.bp-len__opt {
  position: relative; min-width: 0; min-height: 44px; padding: 0 8px; border: 0; border-radius: 999px; cursor: pointer;
  background: transparent; color: var(--muted); font: 600 0.92rem/1.1 var(--sans); white-space: nowrap;
  transition: background-color 200ms var(--ease), color 200ms var(--ease);
}
.bp-len__opt[aria-checked="true"] {
  background: linear-gradient(135deg, #F8D888 0%, #E7AE45 55%, #D97706 100%); color: #2A0A14;
  box-shadow: 0 6px 16px -10px rgba(217, 119, 6, 0.9);
}
.bp-len__opt:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) { .bp-len__opt[aria-checked="false"]:hover { color: var(--ink); background: rgba(245, 158, 11, 0.1); } }

/* ---- the stage: a fixed square, so nothing around it moves -------------------------------------------------- */
.bp-stage { position: relative; width: min(100%, 380px); aspect-ratio: 1 / 1; margin-inline: auto; contain: layout paint; }
.bp-ring { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); overflow: visible; }
.bp-ring circle { fill: none; stroke-width: 3; }
.bp-ring__track { stroke: var(--bp-track); }
.bp-ring__bar { stroke: var(--bp-bar); stroke-linecap: round; stroke-dasharray: 100 100; stroke-dashoffset: 0; }
.bp[data-bp-state="idle"] .bp-ring__bar { stroke-dashoffset: 0; }

/* the mandala: 65% of the stage at scale 1, so at 1.3 it still sits inside the ring */
.bp-orb {
  position: absolute; inset: 17.5%; transform: scale(0.7); opacity: 1; will-change: transform;
  transition-property: transform, opacity; transition-duration: 1200ms; transition-timing-function: var(--bp-ease);
}
.bp-glow {
  position: absolute; inset: -22%; border-radius: 50%; opacity: 0.4; pointer-events: none;
  background: radial-gradient(closest-side, var(--bp-glow), transparent 100%);
  transition-property: opacity; transition-duration: 1200ms; transition-timing-function: var(--bp-ease);
}
.bp-mandala { position: relative; display: block; width: 100%; height: 100%; overflow: visible; }
.bp-m-line { fill: none; stroke: var(--bp-line); stroke-width: 0.8; }
.bp-m-line--outer { stroke-width: 0.6; opacity: 0.7; }
.bp-m-dot { fill: var(--bp-gold); opacity: 0.75; }
.bp-m-petal { fill: var(--bp-petal); stroke: var(--bp-gold); stroke-width: 0.9; stroke-linejoin: round; }
.bp-m-petal-in { fill: none; stroke: var(--bp-amber); stroke-width: 0.5; opacity: 0.7; }
.bp-m-beads { fill: none; stroke: var(--bp-gold); stroke-width: 2.2; stroke-linecap: round; stroke-dasharray: 0.01 4.7; opacity: 0.8; }
.bp-m-petal2 { fill: var(--bp-petal-2); stroke: var(--bp-gold); stroke-width: 0.8; stroke-linejoin: round; }
.bp-m-seed { fill: var(--bp-gold); opacity: 0.55; }
.bp-m-bindu { fill: var(--bp-bindu); }

/* ---- the cue and the clock (fixed heights: no shift when the words change) ------------------------------------- */
.bp-read { display: grid; gap: 2px; justify-items: center; text-align: center; }
.bp-cue {
  margin: 0; min-height: 1.25em; font: 600 clamp(1.6rem, 1.3rem + 1.4vw, 2.1rem)/1.2 var(--serif); color: var(--bp-cue);
  letter-spacing: 0.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%;
}
.bp-time { margin: 0; color: var(--muted); font-size: 0.95rem; line-height: 1.5; }
.bp-time .g-num { color: var(--ink); font-weight: 600; font-size: 1.15rem; }
.bp-time__k { margin-left: 0.25em; }

/* ---- controls: Begin on its own row, so its label can change without moving anything --------------------------- */
.bp-controls { display: grid; gap: 10px; }
.bp-begin { width: 100%; min-height: 52px; }
.bp-controls__row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.3fr); gap: 8px; }
.bp-btn { position: relative; min-width: 0; min-height: 48px; padding-inline: 0.5em; font-size: 0.95rem; background: var(--bp-seg); }
.bp [aria-disabled="true"] { opacity: 0.5; cursor: default; }
.bp-chime { gap: 0.4em; }
.bp-chime__state {
  display: inline-block; min-width: 2.3em; padding: 2px 7px; border-radius: 999px; font-size: 0.78rem; font-weight: 700;
  border: 1px solid var(--champagne-strong); color: var(--muted);
}
.bp-chime[aria-pressed="true"] { border-color: var(--bp-gold); }
.bp-chime[aria-pressed="true"] .bp-chime__state { background: var(--bp-gold); border-color: var(--bp-gold); color: #2A0A14; }
@media (hover: hover) and (pointer: fine) { .bp .g-btn--ghost[aria-disabled="true"]:hover { border-color: var(--champagne-strong); background: var(--bp-seg); } }

.bp-done { margin: 0; min-height: 1.6em; text-align: center; color: var(--ink); font: italic 500 1.08rem/1.5 var(--serif); }
.bp-done[data-shown="false"] { visibility: hidden; }   /* keeps its space: no shift when it appears */
@media (max-width: 379.98px) { .bp-done { min-height: 3em; } }
.bp-illus { margin: 0; text-align: center; }

@media (max-width: 359.98px) {
  .bp { padding: 14px; }
  .bp-len__opt { font-size: 0.84rem; padding: 0 4px; }
  .bp-btn { font-size: 0.88rem; padding-inline: 0.3em; }
  .bp-chime__state { min-width: 0; padding: 1px 5px; }
}

/* motion: the mandala stays still; opacity, the cue and the ring carry the rhythm */
@media (prefers-reduced-motion: reduce) {
  .bp-orb { transform: none !important; will-change: auto; }
  .bp-len__opt { transition: none; }
}

/* schema patch 39.13: the pace choice (Resonant / Focus) above the lengths (2 · 3 · 5 min · Continuous) */
.bp-pattern { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-bottom: 8px; }
.bp-pattern__opt { display: flex; flex-direction: column; justify-content: center; line-height: 1.15; }
.bp-pattern__opt small { font-size: 0.74rem; font-weight: 500; opacity: 0.85; }
.bp-len:not(.bp-pattern) { grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(0, 1.4fr); }
.gil-try-link { margin: clamp(20px, 3vw, 32px) 0 0; color: var(--muted); }
.gil-try-link a { color: var(--gold-text); font-weight: 600; }