/* Visitor builds, phase 2: the homepage's visitor player
   (templates/partials/visitor_player.html). The look is the Studio's
   "Your meditation is ready" modal (studio_autoplay_modal.css), copied
   rather than shared so neither page's stylesheet can move the other.
   Loaded only when the homepage offers a visitor build. Every rule sits
   under .visitor-player or .visitor-turnstile. Mobile first: a 16px
   gutter each side, the card 440px at most and scrolling inside itself on
   a short screen, so the save section is always reachable. The player
   is moved to the end of <body> (visitor_player.js), so its z-index is
   above the site's sticky header. */

.visitor-player {
  position: fixed; inset: 0; z-index: 1200;
  display: flex; align-items: center; justify-content: center;
  padding: 16px;
  background: rgba(44, 36, 22, 0.65);
}
.visitor-player[hidden] { display: none; }

.visitor-player .visitor-player__card {
  position: relative; box-sizing: border-box;
  width: 100%; max-width: min(440px, calc(100vw - 32px));
  max-height: calc(100vh - 32px); max-height: calc(100dvh - 32px);
  overflow-y: auto; overscroll-behavior: contain;
  /* --visitor-cookie-h: the cookie banner's height while it shows
     (visitor_player.js fitBanner), else 0. */
  padding: 32px 24px calc(24px + var(--visitor-cookie-h, 0px));
  background: #fff; border-radius: 20px;
  box-shadow: 0 18px 48px rgba(44, 36, 22, 0.28);
  text-align: center;
}

.visitor-player .visitor-player__title {
  font-family: 'Playfair Display', serif;
  font-size: 1.6rem; line-height: 1.25; color: var(--text-dark);
  margin: 4px 24px 6px;
}
.visitor-player .visitor-player__sub {
  font-family: 'Inter', sans-serif;
  font-size: .92rem; color: var(--text-light); margin: 0 0 4px;
}
/* The crisis support line: stays for as long as the player is open. */
.visitor-player .visitor-player__crisis {
  font-family: 'Inter', sans-serif;
  font-size: .95rem; line-height: 1.5; color: var(--text-dark);
  background: var(--cream-dark); border-radius: 12px;
  margin: 10px 0 0; padding: 12px 14px;
}
.visitor-player .visitor-player__sub[hidden],
.visitor-player .visitor-player__crisis[hidden],
.visitor-player .visitor-player__time[hidden] { display: none; }

/* The shared breathing circle (breath_circle.css), smaller here so the save
   section stays close on a phone. */
.visitor-player .breath-circle { --breath-size: 56px; margin: 6px 0 0; }
.visitor-player .breath-circle__text { margin-top: 4px; font-family: 'Inter', sans-serif; font-size: .9rem; }

.visitor-player .visitor-player__wave {
  display: flex; align-items: center; justify-content: center; gap: 4px;
  height: 48px; margin: 14px 0 12px;
}
.visitor-player .visitor-player__wave span {
  display: block; width: 4px; height: 40%;
  border-radius: 2px; background: var(--terracotta);
  transform-origin: center; opacity: 0.4;
}
.visitor-player.is-playing .visitor-player__wave span {
  opacity: 1;
  animation: visitor-player-wave 1.2s ease-in-out infinite alternate;
}
.visitor-player .visitor-player__wave span:nth-child(4n+1) { height: 35%; animation-delay: -0.1s; }
.visitor-player .visitor-player__wave span:nth-child(4n+2) { height: 70%; animation-delay: -0.45s; }
.visitor-player .visitor-player__wave span:nth-child(4n+3) { height: 50%; animation-delay: -0.8s; }
.visitor-player .visitor-player__wave span:nth-child(4n)   { height: 85%; animation-delay: -0.3s; }
.visitor-player .visitor-player__wave span:nth-child(3n)   { animation-duration: 1.5s; }
.visitor-player .visitor-player__wave span:nth-child(5n)   { animation-duration: 0.9s; }
@keyframes visitor-player-wave {
  from { transform: scaleY(0.35); }
  to   { transform: scaleY(1); }
}

.visitor-player .visitor-player__time {
  font-family: 'Inter', sans-serif; font-variant-numeric: tabular-nums;
  font-size: 1rem; color: var(--text-light); margin: 0 0 4px;
}
.visitor-player .visitor-player__elapsed { color: var(--terracotta); font-weight: 600; }
.visitor-player .visitor-player__status {
  font-family: 'Inter', sans-serif;
  font-size: .88rem; color: var(--text-light); margin: 0 0 12px;
  min-height: 1.2em;
}

.visitor-player .visitor-player__play {
  display: inline-flex; align-items: center; justify-content: center;
  width: 72px; height: 72px; padding: 0;
  border: none; border-radius: 50%;
  background: var(--terracotta); color: #fff; cursor: pointer;
  box-shadow: 0 6px 18px rgba(190, 126, 111, 0.45);
  transition: transform 160ms ease, background 160ms ease;
}
.visitor-player .visitor-player__play:hover { transform: scale(1.05); background: var(--terracotta-dark); }
.visitor-player .visitor-player__play:focus-visible { outline: 3px solid var(--text-dark); outline-offset: 3px; }
.visitor-player .visitor-player__play[aria-disabled="true"] { opacity: .55; cursor: progress; transform: none; }
.visitor-player .visitor-player__icon-play { margin-left: 4px; }
.visitor-player .visitor-player__icon-pause,
.visitor-player .visitor-player__icon-replay,
.visitor-player.is-playing .visitor-player__icon-play,
.visitor-player.is-ended .visitor-player__icon-play { display: none; }
.visitor-player.is-playing .visitor-player__icon-pause,
.visitor-player.is-ended .visitor-player__icon-replay { display: block; }

.visitor-player .visitor-player__label {
  font-family: 'Inter', sans-serif; font-weight: 600;
  font-size: .95rem; color: var(--text-dark); margin: 8px 0 0;
}
.visitor-player .visitor-player__note {
  font-family: 'Inter', sans-serif;
  font-size: .82rem; color: var(--text-light); margin: 6px 0 0;
}

.visitor-player .visitor-player__save {
  margin: 20px 0 0; padding: 18px 16px 4px;
  border-top: 1.5px solid var(--cream-dark);
  text-align: left;
}
.visitor-player .visitor-player__save-title {
  font-family: 'Playfair Display', serif;
  font-size: 1.15rem; line-height: 1.3; color: var(--text-dark);
  margin: 0 0 8px; text-align: center;
}
.visitor-player .visitor-player__save-lead,
.visitor-player .visitor-player__save-list,
.visitor-player .visitor-player__fine {
  font-family: 'Inter', sans-serif; color: var(--text-dark);
}
.visitor-player .visitor-player__save-lead { font-size: .9rem; margin: 0 0 6px; }
.visitor-player .visitor-player__save-list {
  font-size: .86rem; line-height: 1.45; margin: 0 0 16px; padding-left: 18px;
}
.visitor-player .visitor-player__save-list li { margin: 0 0 4px; }
.visitor-player .visitor-player__cta {
  display: block; box-sizing: border-box; width: 100%;
  padding: 12px 16px; border-radius: 10px;
  background: var(--terracotta); color: #fff; text-align: center;
  font-family: 'Inter', sans-serif; font-weight: 600; font-size: .95rem;
  text-decoration: none;
}
.visitor-player .visitor-player__cta:hover { background: var(--terracotta-dark); }
.visitor-player .visitor-player__signin {
  display: block; margin: 10px 0 0; text-align: center;
  font-family: 'Inter', sans-serif; font-size: .9rem;
  color: var(--terracotta-dark);
}
.visitor-player .visitor-player__cta:focus-visible,
.visitor-player .visitor-player__signin:focus-visible { outline: 3px solid var(--text-dark); outline-offset: 2px; }
.visitor-player .visitor-player__fine {
  font-size: .78rem; color: var(--text-light); margin: 12px 0 8px;
  text-align: center;
}

/* First in the card and sticky, so it stays at the card's top right
   while the card scrolls. 44px square; its negative margins keep the
   title where it was. */
.visitor-player .visitor-player__close {
  position: -webkit-sticky; position: sticky; top: 0; z-index: 2;
  display: flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; padding: 0;
  margin: -20px -12px -24px auto;
  border: none; border-radius: 50%;
  background: rgba(255, 255, 255, 0.94); color: var(--text-dark);
  box-shadow: 0 1px 6px rgba(44, 36, 22, 0.18);
  font-size: 1.7rem; line-height: 1; cursor: pointer;
}
.visitor-player .visitor-player__close:hover { background: var(--cream-dark); }
.visitor-player .visitor-player__close:focus-visible { outline: 3px solid var(--terracotta); outline-offset: 2px; }

/* The Invisible widget takes no room; an interactive challenge, when
   Cloudflare asks for one, shows here in its own box. */
.visitor-turnstile { display: flex; justify-content: center; margin: 8px 0 0; }
.visitor-turnstile:empty { margin: 0; }

body.visitor-player-open { overflow: hidden; }

/* Phase 3: "Your meditations", under the builder in the hero. Small and
   calm: the builder card's frosted cream, one compact row per meditation
   (two at most), never above the builder. */
.visitor-mine {
  width: 100%; max-width: 560px; box-sizing: border-box;
  padding: 12px 16px 10px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.5);
  background: rgba(248, 244, 238, 0.82);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  color: #3B2F28; text-align: left;
  font-family: 'Inter', sans-serif;
}
.visitor-mine[hidden] { display: none; }
.visitor-mine .visitor-mine__title {
  font-family: 'Inter', sans-serif;
  font-size: .8rem; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: #5A4A3E; margin: 0 0 4px;
}
.visitor-mine .visitor-mine__list { list-style: none; margin: 0; padding: 0; }
.visitor-mine .visitor-mine__row {
  display: flex; align-items: center; gap: 10px;
  min-height: 44px; padding: 4px 0;
  border-top: 1px solid rgba(59, 47, 40, 0.12);
}
.visitor-mine .visitor-mine__row:first-child { border-top: none; }
.visitor-mine .visitor-mine__name {
  flex: 1 1 auto; min-width: 0;
  font-size: .92rem; font-weight: 600;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.visitor-mine .visitor-mine__len { flex: 0 0 auto; font-size: .82rem; color: #5A4A3E; }
.visitor-mine .visitor-mine__play {
  flex: 0 0 auto; min-height: 36px; padding: 6px 14px;
  border: none; border-radius: 999px;
  background: #A9523E; color: #fff;
  font: 600 .86rem/1.2 'Inter', sans-serif; cursor: pointer;
}
.visitor-mine .visitor-mine__play:hover { background: #7F3A2A; }
.visitor-mine .visitor-mine__play:focus-visible { outline: 3px solid #3B2F28; outline-offset: 2px; }
.visitor-mine .visitor-mine__pitch {
  margin: 6px 0 0; padding: 8px 0 0;
  border-top: 1px solid rgba(59, 47, 40, 0.12);
}
.visitor-mine .visitor-mine__pitch-title { font-size: .9rem; font-weight: 700; margin: 0; }
.visitor-mine .visitor-mine__pitch-lead { font-size: .82rem; line-height: 1.4; margin: 2px 0 0; }
.visitor-mine .visitor-mine__pitch-list {
  margin: 4px 0 8px; padding-left: 18px;
  font-size: .82rem; line-height: 1.4;
}
.visitor-mine .visitor-mine__cta {
  display: inline-flex; align-items: center; min-height: 40px;
  padding: 8px 18px; border-radius: 999px; box-sizing: border-box;
  background: #A9523E; color: #fff; text-decoration: none;
  font: 600 .88rem/1.2 'Inter', sans-serif;
}
.visitor-mine .visitor-mine__cta:hover { background: #7F3A2A; color: #fff; }
.visitor-mine .visitor-mine__cta:focus-visible { outline: 3px solid #3B2F28; outline-offset: 2px; }
.visitor-mine .visitor-mine__keep { font-size: .8rem; line-height: 1.45; color: #5A4A3E; margin: 6px 0 0; }
.visitor-mine .visitor-mine__keep a { color: #A9523E; font-weight: 600; }