/* "Hear the first two minutes": the lesson preview card that public/preview.js mounts in every .lp-preview.
   Built on the /style.css tokens (fallbacks in case a page doesn't load it). Flat, like the rest of the site: no
   shadows, long decelerations, no bounce. Classes inside the card start with pv-. */
.lp-preview:empty{display:none}
.lp-preview{container-type:inline-size;width:100%;max-width:640px}
.pv-card{position:relative;border:1px solid var(--line-strong,rgba(34,38,36,.22));border-radius:var(--r-lg,24px);background:var(--surface,#ECEAE2);color:var(--ink,#222624);
  font-family:var(--body,system-ui,sans-serif);font-size:var(--step-0,1.0625rem);line-height:var(--lh-body,1.65);overflow:hidden;display:grid}
.pv-card [hidden]{display:none!important}
.pv-card p{margin:0}
.pv-vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* before Play: the lesson's picture, its name, and what this is */
.pv-head{display:grid;grid-template-columns:auto minmax(0,1fr);gap:16px;align-items:center;padding:18px 18px 0}
.pv-art{display:block;width:120px;height:90px;border-radius:12px;object-fit:cover}
.pv-head-t{display:grid;gap:4px;min-width:0}
.pv-kicker,.pv-part{font-size:var(--step--3,.8125rem);letter-spacing:var(--ls-caps,.08em);text-transform:uppercase;font-weight:600;line-height:1.3}
.pv-kicker{color:var(--accent,#3F6254)}
.pv-title{font-family:var(--display,Georgia,serif);font-size:var(--step-2,1.25rem);line-height:var(--lh-heading,1.25);letter-spacing:var(--ls-heading,-.01em);text-wrap:balance}

/* the controls: the big round button (its ring is the progress), then the smaller ones */
.pv-controls{display:flex;flex-wrap:wrap;align-items:center;gap:12px 18px;padding:16px 18px 18px}
.pv-play{display:inline-flex;align-items:center;gap:14px;background:none;border:0;padding:0;margin:0;cursor:pointer;color:inherit;font:inherit;text-align:left;border-radius:999px;-webkit-tap-highlight-color:transparent}
.pv-disc{position:relative;width:76px;height:76px;flex:none;display:grid;place-items:center}
.pv-ring{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg);overflow:visible}
.pv-ring circle{fill:none;stroke-width:2.5}
.pv-track{stroke:var(--line-strong,rgba(34,38,36,.22));opacity:0;transition:opacity var(--switch,350ms) var(--ease-detach,ease-out)}
.pv-fill{stroke:var(--accent,#3F6254);stroke-linecap:round;transition:stroke-dashoffset .25s linear}
.pv-card:not([data-state="idle"]) .pv-track{opacity:1}
.pv-card[data-state="idle"] .pv-fill,.pv-card[data-state="error"] .pv-fill{opacity:0}
/* at the end, "Play it again" steps back so the way into Lesson 1 leads */
.pv-card[data-state="done"] .pv-disc{width:48px;height:48px}
.pv-card[data-state="done"] .pv-ring{display:none}
.pv-card[data-state="done"] .pv-dot{width:44px;height:44px;background:transparent;color:var(--accent,#3F6254);border:1px solid var(--line-strong,rgba(34,38,36,.22))}
.pv-card[data-state="done"] .pv-dot svg{width:20px;height:20px}
.pv-card[data-state="done"] .pv-play:focus-visible .pv-dot{outline-offset:4px}
.pv-dot{width:60px;height:60px;border-radius:50%;background:var(--accent,#3F6254);color:var(--accent-ink,#F6F5F0);display:grid;place-items:center;transition:transform var(--switch,350ms) var(--ease-detach,ease-out),filter var(--switch,350ms)}
.pv-dot svg{width:24px;height:24px;fill:currentColor}
.pv-play:hover .pv-dot{filter:brightness(1.07)}
.pv-play:active .pv-dot{transform:scale(.96)}
.pv-play:focus-visible{outline:none}
.pv-play:focus-visible .pv-dot{outline:2px solid var(--accent,#3F6254);outline-offset:9px}
.pv-words{display:grid;gap:2px}
.pv-label{font-weight:500;font-size:var(--step-1,1.1875rem);line-height:var(--lh-snug,1.4);letter-spacing:var(--ls-heading,-.01em)}
.pv-card:not([data-state="idle"]):not([data-state="error"]) .pv-label{font-size:var(--step--1,.9375rem);letter-spacing:var(--ls-ui,.01em)}
.pv-sub{font-size:var(--step--2,.875rem);color:var(--muted,#5C635E)}
.pv-card[data-state="loading"] .pv-fill{stroke-dasharray:14 86;stroke-dashoffset:0;transform-origin:50% 50%;animation:pv-spin 1.6s linear infinite}
@keyframes pv-spin{to{transform:rotate(360deg)}}
.pv-more{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px}
.pv-chip{border:1px solid var(--line-strong,rgba(34,38,36,.22));background:none;border-radius:999px;padding:9px 15px;min-height:44px;font:inherit;font-size:var(--step--2,.875rem);font-weight:500;cursor:pointer;color:var(--muted,#5C635E);line-height:1.2}
.pv-chip:hover{color:var(--ink,#222624);border-color:var(--field-border,#7A807B)}
.pv-chip[aria-pressed="true"],.pv-chip[aria-expanded="true"]{border-color:var(--accent,#3F6254);color:var(--accent,#3F6254);background:var(--accent-soft,#DFEAE5)}
.pv-link{background:none;border:0;padding:10px 0;min-height:44px;font:inherit;font-size:var(--step--2,.875rem);font-weight:500;color:var(--accent,#3F6254);cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.pv-chip:focus-visible,.pv-link:focus-visible,.pv-go:focus-visible,.pv-end:focus-visible{outline:2px solid var(--accent,#3F6254);outline-offset:3px}
.pv-end:focus{outline:none}

/* playing: a strip of sky where the guide's cloud breathes, and the line being spoken */
.pv-sky{position:relative;height:88px;background:linear-gradient(to bottom,var(--sky-top,#E3EAEA),var(--sky-mid,#EDEFEA) 62%,var(--surface,#ECEAE2));overflow:hidden;--lvl:0}
.pv-sky svg{position:absolute;inset:0;width:100%;height:100%}
.pv-sky path{fill:var(--cloud,#FCFBF7);stroke:var(--cloud-edge,rgba(34,38,36,.07));stroke-width:2.6;stroke-linejoin:round}
.pv-drift{transform-box:fill-box;animation:pv-drift 70s ease-in-out infinite alternate}
.pv-d2{animation-duration:95s;animation-delay:-30s}
.pv-d3{animation-duration:120s;animation-delay:-60s;opacity:.8}
.pv-d4{animation-duration:110s;animation-delay:-15s}
.pv-d5{animation-duration:85s;animation-delay:-45s}
@keyframes pv-drift{from{transform:translateX(-14px)}to{transform:translateX(18px)}}
/* the clouds only drift while the guide is speaking: still when paused, loading, finished or reading ahead */
.pv-card:not([data-state="playing"]) .pv-drift{animation-play-state:paused}
.pv-cloud{transform-box:fill-box;transform-origin:50% 75%;transform:scale(calc(1 + var(--lvl) * .085))}
.pv-cloud .pv-aura{fill:none;stroke:var(--accent,#3F6254);stroke-width:3;opacity:calc(var(--lvl) * .55);transform-box:fill-box;transform-origin:50% 75%;
  transform:scale(calc(1.04 + var(--lvl) * .1))}
.pv-rest .pv-cloud,.pv-rest .pv-aura{transition:transform .9s var(--ease-detach,ease-out),opacity .9s var(--ease-detach,ease-out)}
/* no measurement (an older iPhone, or the line's sound couldn't be read): a slow breath while the voice plays */
.pv-pulse .pv-cloud{animation:pv-breathe 2.8s ease-in-out infinite alternate}
.pv-pulse .pv-aura{animation:pv-aura 2.8s ease-in-out infinite alternate}
@keyframes pv-breathe{from{transform:scale(1)}to{transform:scale(1.05)}}
@keyframes pv-aura{from{opacity:.05}to{opacity:.3}}
.pv-reading .pv-cloud{transform:none}
.pv-reading .pv-aura{opacity:0}

.pv-text{display:grid;gap:10px;padding:12px 18px 0}
.pv-meta{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.pv-part{color:var(--muted,#5C635E)}
.pv-left{font-size:var(--step--2,.875rem);color:var(--muted,#5C635E);font-variant-numeric:tabular-nums;white-space:nowrap}
/* the read-along line, as in a lesson: Lora, large and open; words not yet spoken are muted, not faded.
   Its box is as tall as the longest sentence of Lesson 1's opening at each width (5 lines on a phone, 3 on a wide card),
   set before anything loads, so pressing Play reshapes the card once and nothing moves after; preview.js makes it
   taller if another lesson needs it. */
.pv-line{font-family:var(--display,Georgia,serif);font-size:var(--step-2,1.25rem);line-height:var(--lh-read,1.75);font-weight:400;letter-spacing:0;
  min-height:calc(5lh);display:flex;align-items:center;text-wrap:pretty}
@supports not (height:1lh){.pv-line{min-height:calc(5 * 1.75em)}}
.pv-s{display:block;animation:pv-rise 600ms var(--ease-detach,ease-out)}
@keyframes pv-rise{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.pv-w{color:var(--muted,#5C635E);transition:color .35s var(--ease-detach,ease-out)}
.pv-w.said{color:var(--ink,#222624)}
.pv-note{font-size:var(--step--2,.875rem);color:var(--muted,#5C635E)}

/* the end: what a lesson is, and the way in */
.pv-end{display:grid;gap:16px;padding-block:6px 4px;min-height:calc(5 * 1.6rem)}
.pv-end-line{font-family:var(--display,Georgia,serif);font-size:var(--step-2,1.25rem);line-height:1.5;text-wrap:pretty;max-width:34ch}
/* the way in, and under it what happens next (Lesson 1 carries on from the last line heard) */
.pv-actions{display:grid;justify-items:start;gap:10px}
.pv-actions .pv-fine{max-width:42ch;line-height:1.5}
.pv-go{min-height:48px;padding-inline:24px;font-size:var(--step--1,.9375rem)}
.pv-fine{font-size:var(--step--2,.875rem);color:var(--muted,#5C635E)}

/* transcript */
.pv-tr{border-top:1px solid var(--line,rgba(34,38,36,.09));padding:16px 18px 20px;display:grid;gap:10px;font-size:var(--step--1,.9375rem);line-height:1.6;max-height:min(60vh,420px);overflow:auto;overscroll-behavior:contain}
.pv-tr-note{color:var(--muted,#5C635E);font-size:var(--step--2,.875rem)}
.pv-tr-part{font-family:var(--body,system-ui,sans-serif);font-size:var(--step--3,.8125rem);letter-spacing:var(--ls-caps,.08em);text-transform:uppercase;font-weight:600;color:var(--muted,#5C635E);margin:6px 0 0}
.pv-tr p{max-width:62ch}
.pv-tr p.pv-now{color:var(--ink,#222624);box-shadow:inset 2px 0 0 var(--accent,#3F6254);padding-left:12px;margin-left:-14px}

/* wider cards: the line has room for four lines, the controls sit on one row */
@container (min-width:520px){
  .pv-head{padding:22px 24px 0;gap:20px}
  .pv-art{width:140px;height:105px}
  .pv-controls{padding:18px 24px 22px}
  .pv-text{padding:18px 24px 0}
  .pv-tr{padding:18px 24px 22px}
  .pv-sky{height:112px}
  .pv-text{gap:12px;padding-top:16px}
  .pv-line{font-size:var(--step-3,1.375rem);min-height:calc(4lh)}
}
@container (min-width:572px){.pv-line{min-height:calc(3lh)}}
@container (max-width:300px){
  .pv-head{grid-template-columns:minmax(0,1fr)}
  .pv-art{width:96px;height:72px}
  .pv-line{min-height:calc(6lh)}
}

@media (prefers-reduced-motion:reduce){
  /* nothing moves: the cloud only brightens and fades with the voice */
  .pv-card *,.pv-card *::before,.pv-card *::after{animation:none!important;transition:none!important}
  .pv-cloud,.pv-pulse .pv-cloud{transform:none}
  .pv-cloud .pv-aura{transform:scale(1.06)}
  .pv-card[data-state="loading"] .pv-fill{stroke-dasharray:100;stroke-dashoffset:100}
}
@media (forced-colors:active){
  .pv-card{border-color:CanvasText}
  .pv-dot{forced-color-adjust:none;background:ButtonText;color:ButtonFace}
  .pv-fill{stroke:Highlight}.pv-track{stroke:CanvasText}
  .pv-w,.pv-w.said{color:CanvasText}
  .pv-sky{display:none}
}
@media print{.lp-preview{display:none!important}}