/* One "Listen" (static/listen.js) and the collapsed guide picker: shared by the program page, the
   journey page and the journey cards. */
[data-listen][aria-busy] { cursor: progress; opacity: .85; }
[data-listen].listen-ready { animation: listen-pulse 1.6s ease-in-out infinite; }
@keyframes listen-pulse { 50% { box-shadow: 0 0 0 6px color-mix(in srgb, var(--accent) 25%, transparent); } }
@media (prefers-reduced-motion: reduce) { [data-listen].listen-ready { animation: none; outline: 3px solid var(--accent); outline-offset: 2px; } }
.listen-top .listen-actions, .jtop-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.listen-top .btn-big { min-width: 12rem; }
.guide-panel > summary { cursor: pointer; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; list-style: none; }
.guide-panel > summary::-webkit-details-marker { display: none; }
.guide-panel > summary::after { content: ""; width: .5em; height: .5em; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(45deg); margin-left: auto; }
.guide-panel[open] > summary::after { transform: rotate(225deg); }
.guide-summary { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
.guide-summary img { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; flex: none; }
.course-note { margin: 0; }
.btn-small { padding: 6px 14px; font-size: .9rem; min-height: 44px; }   /* iOS tap target (mobile e2e 2026-10-13) */
/* Card actions sit after the card's link (never inside it). */
.jcard:has(> .jcard-actions) { display: flex; flex-direction: column; }
.jcard:has(> .jcard-actions) > .jcard-link { height: auto; flex: 1 1 auto; }
.jcard-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; padding: 0 20px 20px; }
/* Same card, same row: the body fills the card so meta + progress + actions line up at the bottom, and the
   play and Settings buttons share one line (the play label shrinks with an ellipsis before the row wraps). */
.jcard:has(> .jcard-actions) .jcard-body { flex: 1 1 auto; }
.jcard:has(> .jcard-actions) .jcard-meta { margin-top: auto; }
.jcard-actions > .play-btn { flex: 0 1 auto; min-width: 0; }
.jcard-actions > .play-btn .play-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.jcard-actions > a.btn { flex: none; white-space: nowrap; }
.jcard-actions { flex-wrap: nowrap; }
.jcard-actions > :not(.play-btn):not(a.btn):not(.jcard-status) { flex: none; }
.jcard-actions:has(> .jcard-status:not(:empty)) { flex-wrap: wrap; }
.jcard-status { flex-basis: 100%; margin: 0; }
.jcard-status:empty { display: none; }
.guide-panel > summary h2 { margin: 0; }
/* A script line's ▶ while its excerpt is made on demand: a small spinner in place of the icon. */
button.play[aria-busy] span[aria-hidden] { visibility: hidden; }
button.play[aria-busy] { position: relative; }
button.play[aria-busy]::after { content: ""; position: absolute; inset: 0; margin: auto; width: 14px; height: 14px; border-radius: 50%;
  border: 2px solid currentColor; border-right-color: transparent; animation: line-spin .8s linear infinite; }
@keyframes line-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { button.play[aria-busy]::after { animation-duration: 2.4s; } }

/* The one Play button (_play.html). Sizes lg / md / sm; the icon is drawn here: ▶, ❚❚ while playing, a
   spinner while preparing (aria-busy). One look everywhere (Gergo, 2026-10-13). */
.play-btn { display: inline-flex; align-items: center; justify-content: center; gap: .5em; border-radius: 999px; white-space: nowrap; }
.play-btn .play-ico { display: inline-grid; place-items: center; width: 1.1em; height: 1.1em; flex: none; }
.play-btn .play-ico::before { content: "▶"; font-size: .85em; line-height: 1; }
.play-btn.is-playing .play-ico::before { content: "❚❚"; font-size: .7em; letter-spacing: -.1em; }
.play-btn[aria-busy] .play-ico::before { content: ""; width: .9em; height: .9em; border-radius: 50%; border: 2px solid currentColor;
  border-right-color: transparent; animation: line-spin .8s linear infinite; }
.play-btn[aria-busy] { cursor: progress; opacity: .9; }
.play-lg { min-height: 52px; padding: 12px 28px; font-size: 1.1rem; min-width: 12rem; }
.play-md { min-height: 44px; padding: 9px 20px; font-size: 1rem; }
.play-sm { min-height: 44px; padding: 6px 16px; font-size: .92rem; }
/* The program page: the Play buttons drive the player; the bar's own ▶ would be a second control. */
.listen-player .pp { display: none; }
/* Tap targets >= 44 px on phones (site review m26): text buttons, ghost buttons, the footer's cookie link. */
@media (pointer: coarse) {
  button.ghost, .btn-text, button.link { min-height: 44px; }
  .footer-cookies a, .site-footer nav a, footer nav a { display: inline-flex; align-items: center; min-height: 44px; }
}

/* The 60 s sample before sign-up (samples.py, _sample.html) */
.sample { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin: 12px 0 4px; }
.sample-btn { gap: 8px; min-height: 44px; }
.sample-ico { display: inline-grid; place-items: center; width: 1.1em; flex: none; }
.sample-ico::before { content: "▶"; font-size: .85em; line-height: 1; }
.sample-btn.is-playing .sample-ico::before { content: "❚❚"; font-size: .7em; letter-spacing: -.1em; }

/* "Press Play" after sign-in (web_accounts.welcome): the cue above the Play button, which is focused */
.welcome-cue { margin: 10px 0 12px; padding: 12px 14px; border-radius: 10px; border: 1.5px solid var(--accent);
  background: color-mix(in srgb, var(--accent) 10%, transparent); font-weight: 600; }
.welcome-cue p { margin: 0; }
.welcome-cue .small { font-weight: 400; margin-top: 4px; }
.welcome-first { margin: 0 0 16px; }
.welcome-first h2 { margin: 0 0 6px; font-size: 1.15rem; }
.welcome-first .play-btn { margin-top: 8px; }
.play-btn:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }

/* Sign-in page: the deal line, and the "check your email" alternatives (web_templates/signin.html, check_email.html) */
.signin .signin-deal { margin: 0 0 8px; }
.signin .btn-big { width: 100%; }
.signin-alt { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin-top: 16px; }
.signin-alt .btn, .signin-alt .btn-text { min-height: 44px; }
/* The inline stereo note (listen.js) */
.stereo-note { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 6px; margin: 6px 0 0; }
.stereo-note .btn-text { min-height: 44px; padding: 0 6px; }
/* The shared progress button: a second-colour fill from the left at --progress, or a shimmer when no percent is
   known (listen.js TwhProgress). Used by Play while preparing / updating and by every other "making" state. */
.btn-progress { position: relative; overflow: hidden; isolation: isolate; }
.btn-progress::after { content: ""; position: absolute; inset: 0; z-index: -1; width: var(--progress, 0%);
  background: color-mix(in srgb, var(--on-accent, #fff) 28%, transparent); transition: width .6s ease; }
.btn-outline.btn-progress::after { background: color-mix(in srgb, var(--accent) 22%, transparent); }
.btn-progress.is-indeterminate::after { width: 40%; animation: btn-shimmer 1.4s ease-in-out infinite; }
@keyframes btn-shimmer { from { transform: translateX(-100%); } to { transform: translateX(260%); } }
@media (prefers-reduced-motion: reduce) { .btn-progress.is-indeterminate::after { animation: none; width: 100%; opacity: .35; } }
.btn-progress[aria-busy] { opacity: 1; }

/* The first-visit line (samples.first_visit): calm, inline, one button; no pop-up */
.fv-line { margin: 12px 0 8px; max-width: 60ch; }
.fv-text { margin: 0 0 10px; font-size: 1.05rem; line-height: 1.45; }
.fv-line .sample { margin-top: 0; }
.fv-line .sample-btn { width: 100%; max-width: 22rem; }
.fv-after { margin-top: 12px; padding: 12px 14px; border-radius: 10px; border: 1.5px solid var(--accent); }
.fv-after p { margin: 0 0 8px; }
.fv-after p:last-child { margin-bottom: 0; }
@media (pointer: coarse) { .footer-journeys a { display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; padding: 0 2px; } }
/* The card's whole-card link (.jcard-link::after, brand.css) must never cover the card's own controls: the
   actions row, the library's ⋯ menu and notices sit above it (Safari/Chromium hit-testing, 14 Oct). */
.jcard > *:not(.jcard-link) { position: relative; z-index: 1; }
/* "🎙 Live with your guide" in the player: one tap target, never two half-lines (14 Oct). */
.live-hint [data-live-go] { display: inline-flex; align-items: center; gap: 4px; min-height: 44px; padding: 0 6px; white-space: nowrap; }
/* Voice / tones balance: left = louder tones, right = louder voice (was an inline style, blocked by the CSP). */
.tone-range input[data-balance] { direction: rtl; }