/* v436 sit/sit-before.css: sit/breath-circle.css + sit/kids-card.css */
/* v363 (draft for Jimmy): the in-meditation breath guide is an original fine-line gold mandala
   (inline SVG in sit/index.html): layered lotus petal rings, a dotted ring and a glowing centre.
   Soft luminous palette: champagne gold, a gentle rose-gold outer ring, ivory inner petals and a
   faint pearl / lavender-blush halo, still clearly gold on black. breath-guide.js scales the orb
   and sets --bloom (0 exhale low .. 1 inhale peak): the outer rings open, turn and brighten as it
   blooms. A very slow turn and an occasional light sweep; both stop for reduced motion.
   Kept in its own file because the glow is a deliberate exception to the flat "no glow" rule
   used elsewhere on /sit. Loaded after sit.css and overrides its v337 .breath-guide block.
   v433: inside the full-screen player the same SVG mandala grows into the free vertical
   space. The diameter is min() of 90vw, the guide's own width and height, 66dvh and a
   clamp() gap for the cue, capped at 38rem, so Pause and Silent/Guided stay on screen
   from 320×568 through 412×915 and on tablets. The glow scales with the circle. Bloom,
   the slow turn, the light sweep and the reduced-motion still state are unchanged. */
.breath-guide {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.9rem;
  margin: 1rem auto 0.6rem;
  pointer-events: none;
}
.breath-guide[hidden] { display: none; }
.breath-guide-orb {
  --bloom: 0;
  position: relative;
  display: block;
  width: 156px;
  height: 156px;
  border-radius: 50%;
  background: none;
  border: 0;
  transform: scale(0.5);
  transform-origin: center;
  will-change: transform;
}
/* Warm halo behind the mandala: champagne into blush, brighter as it blooms. */
.breath-guide-orb::before {
  content: "";
  position: absolute;
  inset: -18%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 226, 160, 0.42) 0%, rgba(246, 206, 170, 0.2) 38%, rgba(236, 200, 222, 0.08) 58%, rgba(236, 200, 222, 0) 72%);
  opacity: calc(0.55 + var(--bloom) * 0.45);
  pointer-events: none;
}
.breath-guide-orb .mandala {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
  filter: drop-shadow(0 0 3px rgba(255, 220, 140, 0.75)) drop-shadow(0 0 14px rgba(255, 205, 120, 0.45)) drop-shadow(0 0 28px rgba(240, 190, 200, 0.22));
}
.mandala g, .mandala circle { transform-box: view-box; transform-origin: 0 0; }
.mandala .md-spin { animation: dd-mandala-turn 180s linear infinite; }
.mandala .md-outer {
  transform: rotate(calc(var(--bloom) * 11.25deg)) scale(calc(0.8 + var(--bloom) * 0.2));
  opacity: calc(0.4 + var(--bloom) * 0.6);
}
.mandala .md-mid {
  transform: rotate(calc(var(--bloom) * -7.5deg)) scale(calc(0.88 + var(--bloom) * 0.12));
  opacity: calc(0.62 + var(--bloom) * 0.38);
}
.mandala .md-inner { transform: scale(calc(0.94 + var(--bloom) * 0.06)); }
.mandala .md-dots { opacity: calc(0.5 + var(--bloom) * 0.5); }
.mandala .mv { fill: none; stroke-width: 0.4; stroke-opacity: 0.55; }
.mandala .md-core { transform: scale(calc(0.9 + var(--bloom) * 0.25)); }
@keyframes dd-mandala-turn { to { transform: rotate(360deg); } }
/* An occasional soft light sweep through the gold, clipped to the mandala's circle. */
.breath-guide-orb::after {
  content: "";
  position: absolute;
  inset: 4%;
  border-radius: 50%;
  background: linear-gradient(115deg, rgba(255, 250, 236, 0) 40%, rgba(255, 250, 236, 0.32) 50%, rgba(255, 250, 236, 0) 60%) no-repeat;
  background-size: 300% 100%;
  background-position: 100% 0;
  mix-blend-mode: screen;
  animation: dd-breath-shine 9s ease-in-out infinite;
  pointer-events: none;
}
@keyframes dd-breath-shine {
  0%, 60% { background-position: 100% 0; }
  88%, 100% { background-position: 0% 0; }
}
.breath-guide-word {
  min-height: 1.3em;
  font-size: 1.08rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  color: #ffe2a3;
  text-shadow: 0 0 14px rgba(255, 213, 107, 0.6), 0 0 22px rgba(240, 196, 210, 0.25), 0 0 2px rgba(0, 0, 0, 0.9);
  transition: opacity 0.8s ease;
}
.breath-guide[data-phase="rest"] .breath-guide-word { opacity: 0; }
/* Reduced motion: breath-guide.js keeps the mandala still and only fades it (data-still); no turn, no sweep. */
.breath-guide[data-still] .breath-guide-orb { --bloom: 1; transform: none !important; transition: opacity 1.2s ease; }
.breath-guide[data-still] .breath-guide-orb::after { animation: none; display: none; }
.breath-guide[data-still] .mandala .md-spin { animation: none; }
.breath-guide[data-still][data-phase="rest"] .breath-guide-orb,
.breath-guide[data-still][data-phase="out"] .breath-guide-orb { opacity: 0.7; }
@media (prefers-reduced-motion: reduce) {
  .breath-guide-orb::after { animation: none; display: none; }
  .mandala .md-spin { animation: none; }
}

/* v433: one quiet column. The name, the sentence and the time sit together at the
   top in a clear scale; the mandala rests in the middle; Pause and the voice
   choice close the screen. The circle yields when the words need the room. */
.sit-box-panel {
  box-sizing: border-box;
  height: 100dvh;
  max-height: 100dvh;
  padding-top: calc(clamp(3.15rem, 6.5dvh, 3.7rem) + env(safe-area-inset-top, 0px));
  padding-bottom: calc(clamp(0.8rem, 2dvh, 1.25rem) + env(safe-area-inset-bottom, 0px));
  padding-left: clamp(1.2rem, 5vw, 1.8rem);
  padding-right: clamp(1.2rem, 5vw, 1.8rem);
}
.sit-box-title,
.sit-box-line,
.sit-box-soon,
.sit-box-nudge,
.sit-box-digits,
.sit-box-play,
.sit-box-voice {
  flex-shrink: 0;
}
body.page-sit .sit-box-title {
  max-width: min(18.5rem, 100%);
  font-family: var(--display);
  font-weight: 500;
  font-size: clamp(2.2rem, 8.2vw, 3.05rem);
  line-height: 1.06;
  letter-spacing: 0.005em;
  color: #f0d59a;
}
body.page-sit .sit-box-line {
  max-width: 22rem;
  margin: clamp(0.45rem, 1.15dvh, 0.7rem) 0 0;
  color: rgba(246, 239, 226, 0.94);
  font-family: var(--body);
  font-size: clamp(1rem, 3.7vw, 1.14rem);
  font-weight: 400;
  letter-spacing: 0.01em;
  line-height: 1.45;
  text-transform: none;
}
body.page-sit .sit-box-digits {
  margin-top: clamp(0.5rem, 1.8dvh, 0.95rem);
  font-family: var(--display);
  font-weight: 500;
  font-size: clamp(4.35rem, 18vw, 5.85rem);
  line-height: 0.88;
  letter-spacing: 0.03em;
  color: #fbf6ee;
}
/* Taller phones can carry a larger name and time; the circle gives up the difference. */
@media (min-height: 700px) and (max-width: 520px) {
  body.page-sit .sit-box-title {
    font-size: clamp(2.55rem, 10.2vw, 3.25rem);
  }
  body.page-sit .sit-box-line {
    font-size: clamp(1.06rem, 4.15vw, 1.22rem);
  }
  body.page-sit .sit-box-digits {
    font-size: clamp(4.75rem, 20vw, 6.15rem);
  }
}
.sit-box-play {
  margin-top: clamp(0.35rem, 1.35dvh, 0.8rem);
  min-height: 48px;
}
.sit-box-voice {
  margin-top: clamp(0.55rem, 1.7dvh, 1rem);
  margin-bottom: 0;
}
.sit-box-voice button {
  height: 44px;
  min-height: 44px;
  min-width: 44px;
  padding: 0 1.05rem;
  font-size: 0.72rem;
  line-height: 44px;
}
.sit-box-voice button::before {
  top: 0;
  bottom: 0;
}
.sit-box .breath-guide:not([hidden]) {
  flex: 1 1 0%;
  min-height: 0;
  width: 100%;
  margin: 0;
  padding-block: clamp(0.45rem, 1.8dvh, 1rem);
  gap: clamp(0.4rem, 1.25dvh, 0.7rem);
  justify-content: center;
  container-type: size;
  container-name: breath;
}
.sit-box .breath-guide-word {
  font-size: clamp(1.02rem, 3.4vw, 1.2rem);
  font-weight: 500;
  letter-spacing: 0.18em;
  line-height: 1.3;
}
.sit-box .breath-guide-orb {
  /* Floor keeps a circle if a container unit is still 0; the min() is the real size. */
  --orb: min(
    76vw,
    100cqi,
    48dvh,
    calc(100cqb - clamp(2rem, 5.5dvh, 3rem)),
    28rem
  );
  width: max(6.5rem, var(--orb));
  height: max(6.5rem, var(--orb));
  max-width: 100%;
  flex: 0 1 auto;
  min-width: 0;
  min-height: 0;
  container-type: size;
}
/* Glow radii track the circle so the halo stays soft and the linework stays sharp. */
.sit-box .breath-guide-orb .mandala {
  shape-rendering: geometricPrecision;
  filter:
    drop-shadow(0 0 clamp(3px, 1.6cqmin, 12px) rgba(255, 220, 140, 0.75))
    drop-shadow(0 0 clamp(12px, 7cqmin, 48px) rgba(255, 205, 120, 0.45))
    drop-shadow(0 0 clamp(22px, 14cqmin, 90px) rgba(240, 190, 200, 0.22));
}
@media (min-width: 900px) {
  .sit-box-panel {
    height: calc(100dvh - 4rem);
    max-height: calc(100dvh - 4rem);
    width: min(92vw, 42rem);
  }
}

/* v371: compact For little ones card, dark and gold. Horizontal row, 56-64px rings, site fonts only. */
.kf-wrap { container-type: inline-size; }
.kids-find { position: relative; display: flex; flex-direction: row; align-items: center; gap: 12px; margin: 0.75rem auto; max-width: 720px; padding: 8px 12px; border-radius: 16px; overflow: hidden; text-decoration: none; color: inherit; border: 1.5px solid #e2bc4a;
  background: radial-gradient(circle at 18% 50%, rgba(243,190,80,.22), transparent 42%), radial-gradient(circle at 8% 0%, rgba(255,180,220,.13), transparent 36%), radial-gradient(circle at 96% 100%, rgba(150,200,255,.10), transparent 36%), radial-gradient(ellipse at 80% 0%, rgba(212,175,55,.08), transparent 55%), linear-gradient(160deg, #110d06, #060504 60%, #030303);
  box-shadow: 0 0 0 1px rgba(243,210,122,.12) inset, 0 0 18px rgba(212,175,55,.28), 0 0 40px rgba(212,175,55,.08); transition: transform .35s ease, box-shadow .35s ease; }
.kids-find:hover, .kids-find:focus-visible { border-color: #e2bc4a; transform: translateY(-3px); box-shadow: 0 0 0 1px rgba(243,210,122,.18) inset, 0 0 28px rgba(212,175,55,.45), 0 0 56px rgba(212,175,55,.12); }
.kids-find:focus-visible { outline: 2px solid #f3d27a; outline-offset: 3px; }
.kf-deco { position: absolute; inset: 0; pointer-events: none; }
.kf-rainbow { position: absolute; right: -70px; top: -78px; width: 150px; height: 150px; border-radius: 50%; opacity: .12; background: radial-gradient(circle, transparent 54%, #ff8a8a 54%, #ff8a8a 58%, #ffc36b 58%, #ffc36b 62%, #fff07a 62%, #fff07a 66%, #8ef0a0 66%, #8ef0a0 70%, #7fc8ff 70%, #7fc8ff 74%, #c39bff 74%, #c39bff 78%, transparent 78%); }
.kf-star { position: absolute; color: #f3d27a; text-shadow: 0 0 6px rgba(243,210,122,.7); opacity: .6; line-height: 1; animation: kf-tw 2.6s ease-in-out infinite; }
@keyframes kf-tw { 0%, 100% { opacity: .2; transform: scale(.7); } 50% { opacity: .85; transform: scale(1.1); } }
.kf-pals { position: relative; flex: 0 0 148px; height: 64px; animation: kf-fl 5s ease-in-out infinite; }
@keyframes kf-fl { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
.kf-mist { position: absolute; left: 0; right: 0; bottom: 0; height: 22px; border-radius: 50%; pointer-events: none; filter: blur(5px); background: radial-gradient(ellipse at 30% 60%, rgba(243,200,110,.16), transparent 60%), radial-gradient(ellipse at 50% 50%, rgba(255,190,225,.07), transparent 60%), radial-gradient(ellipse at 72% 50%, rgba(160,205,255,.06), transparent 60%); }
.kf-dust { position: absolute; width: 3px; height: 3px; border-radius: 50%; background: #f3d27a; box-shadow: 0 0 6px #e0a92e; animation: kf-tw 3.2s ease-in-out infinite; pointer-events: none; }
.kf-pal { position: absolute; top: 0; width: 64px; height: 64px; border-radius: 50%; object-fit: cover; background: #120d05; border: 2px solid #f3d27a; box-shadow: 0 3px 10px rgba(0,0,0,.4), 0 0 12px rgba(243,210,122,.4); transition: transform .5s cubic-bezier(.3,1.4,.5,1); }
.kf-d { left: 0; }
.kf-k { right: 0; }
.kids-find:hover .kf-d, .kids-find:focus-visible .kf-d { transform: translateX(4px) rotate(6deg); }
.kids-find:hover .kf-k, .kids-find:focus-visible .kf-k { transform: translateX(-4px) rotate(-6deg); }
.kf-heart { position: absolute; left: 50%; top: 23px; width: 18px; height: 18px; margin-left: -9px; animation: kf-pulse 2.4s ease-in-out infinite; filter: drop-shadow(0 0 8px rgba(255,190,70,.95)); transition: filter .4s; }
.kf-heart svg, .kf-float svg { display: block; width: 100%; height: 100%; }
.kids-find:hover .kf-heart { filter: drop-shadow(0 0 14px rgba(255,200,90,1)); }
@keyframes kf-pulse { 0%, 100% { transform: scale(.9); } 15% { transform: scale(1.12); } 30% { transform: scale(.95); } 45% { transform: scale(1.06); } }
.kf-float { position: absolute; left: 50%; top: 26px; width: 8px; height: 8px; opacity: 0; animation: kf-rise 6s ease-out infinite; pointer-events: none; }
@keyframes kf-rise { 0% { opacity: 0; transform: translate(0,0) scale(.6); } 15% { opacity: .7; } 100% { opacity: 0; transform: translate(var(--dx), -32px) scale(.9); } }
.kids-find-text { position: relative; z-index: 1; flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 0; padding-right: 0; }
.kids-find-title { font-family: var(--display); font-weight: 500; font-size: 22px; line-height: 1.02; letter-spacing: 0; color: #f3d27a; margin: 0 0 1px; text-shadow: 0 0 12px rgba(243,210,122,.45); }
.kids-find-line { font-family: var(--body); font-weight: 400; font-size: 13px; line-height: 1.25; color: #e6d9b8; margin: 0 0 4px; max-width: none; }
.kids-find-pill { position: relative; white-space: nowrap; display: inline-flex; align-items: center; justify-content: center; gap: .32em; min-height: 26px; padding: 2px 11px; border-radius: 999px; border: 1px solid #e2bc4a; font-family: var(--body); font-weight: 400; font-size: 13px; line-height: 1.1; color: #f8dc8a; background: linear-gradient(180deg, rgba(248,220,138,.2), rgba(224,176,64,.06)); box-shadow: 0 0 0 1px rgba(243,210,122,.12) inset; }
.kf-paw { width: 13px; height: 13px; flex: 0 0 auto; display: block; }
.kids-find-pill::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 44px; transform: translateY(-50%); }
@media (prefers-reduced-motion: no-preference) {
  .kids-find-pill { transition: box-shadow .35s ease, border-color .35s ease; }
}
.kids-find:hover .kids-find-pill, .kids-find:focus-visible .kids-find-pill { border-color: #f3d27a; box-shadow: 0 0 12px rgba(243,210,122,.5), 0 0 0 1px rgba(243,210,122,.2) inset; }
@container (max-width: 360px) {
  .kids-find { gap: 8px; padding: 8px 10px; }
  .kf-pals { flex-basis: 128px; height: 56px; }
  .kf-pal { width: 56px; height: 56px; }
  .kf-heart { top: 20px; width: 16px; height: 16px; margin-left: -8px; }
  .kf-float { top: 22px; }
  .kids-find-title { font-size: 20px; }
  .kids-find-line { font-size: 12px; }
  .kids-find-pill { font-size: 12.5px; }
}
@media (prefers-reduced-motion: reduce) {
  .kf-star, .kf-dust, .kf-pals, .kf-heart { animation: none; }
  .kf-float { display: none; }
  .kids-find, .kf-pal, .kids-find-pill, .kf-heart { transition: none; }
  .kids-find:hover, .kids-find:focus-visible { transform: none; }
  .kids-find:hover .kf-d, .kids-find:hover .kf-k, .kids-find:focus-visible .kf-d, .kids-find:focus-visible .kf-k { transform: none; }
}