/* Chance & Me — the narrated read-along (read-along.js). Uses the page's own
   colours (--gold, --ink, --paper, --brick) so it follows Dusk / Daylight. */

/* the Listen button, beside Begin reading */
.btn.listen{display:inline-flex; align-items:center; gap:.55rem; background:var(--brick); border-color:var(--brick); color:#FBF5E9}
.btn.listen[hidden]{display:none}
.btn.listen:hover{background:var(--ink); border-color:var(--ink); color:var(--paper)}
.btn.listen .ic{font-size:.85em; line-height:1}
.btn.listen .by{text-transform:none; letter-spacing:.04em; font-style:italic; font-family:Lora,Georgia,serif;
  font-size:1.05em; opacity:.9}

/* the word being said: only that one */
.story .ra-w{border-radius:.14em; transition:background-color .08s linear, color .08s linear, box-shadow .08s linear}
.story .ra-w.lit{background:var(--gold); color:#1B2430; box-shadow:0 0 0 .12em var(--gold)}
body.ra-on .story > p{cursor:pointer}
@media(hover:hover){body.ra-on .story > p:hover{background:color-mix(in srgb, var(--gold) 7%, transparent); border-radius:2px}}

/* while listening the song's own bar makes way, and the page leaves room at the bottom */
body.ra-on{padding-bottom:5.2rem}
body.ra-on .bar{display:none}
body.ra-on .steps{bottom:calc(5.4rem + env(safe-area-inset-bottom, 0px))}

/* the player bar */
.ra-bar{
  position:fixed; left:0; right:0; bottom:0; z-index:59; display:none;
  background:color-mix(in srgb, var(--ink) 96%, transparent); color:var(--paper);
  border-top:2px solid var(--gold); padding-bottom:env(safe-area-inset-bottom, 0px);
  backdrop-filter:blur(8px);
}
body.ra-on .ra-bar{display:block; animation:ra-up .35s cubic-bezier(.2,.8,.2,1)}
@keyframes ra-up{from{transform:translateY(110%)}to{transform:none}}
.ra-in{max-width:46rem; margin:0 auto; padding:.6rem clamp(.8rem,4vw,2rem); display:flex; align-items:center; gap:.75rem}
.ra-bar button{
  flex:none; display:grid; place-items:center; cursor:pointer; color:var(--paper);
  background:none; border:1px solid rgba(243,234,216,.35); border-radius:50%;
  font-family:"Courier Prime",monospace; -webkit-tap-highlight-color:transparent;
}
.ra-bar button:hover{border-color:var(--gold)}
.ra-play{width:46px; height:46px; font-size:1rem; background:var(--gold) !important; border-color:var(--gold) !important; color:#1B2430 !important}
.ra-play.paused{padding-left:.15em}
.ra-back{width:40px; height:40px; position:relative; font-size:.62rem; letter-spacing:0}
.ra-back svg{position:absolute; inset:5px; width:28px; height:28px; opacity:.6}
.ra-back span{position:relative; font-weight:700; margin-top:1px}
.ra-close{width:32px; height:32px; font-size:.8rem; opacity:.75}
.ra-txt{flex:1; min-width:0}
.ra-t{font-family:Bevan,serif; font-size:.86rem; line-height:1.2; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.ra-prog{height:14px; margin:.15rem 0; cursor:pointer; position:relative}
.ra-prog:before{content:""; position:absolute; left:0; right:0; top:5px; height:4px; border-radius:2px; background:rgba(243,234,216,.22)}
.ra-prog i{position:absolute; left:0; top:5px; height:4px; width:0; border-radius:2px; background:var(--gold)}
.ra-prog:focus-visible{outline:1px solid var(--gold); outline-offset:2px}
.ra-s{display:flex; justify-content:space-between; gap:.6rem; font-family:"Courier Prime",monospace;
  font-size:.62rem; letter-spacing:.12em; text-transform:uppercase; opacity:.72; white-space:nowrap}
.ra-s .ra-what{overflow:hidden; text-overflow:ellipsis}

/* back to the voice after scrolling away (right side: the step counter sits on the left) */
.ra-follow{
  position:fixed; right:clamp(.6rem,2vw,1.4rem); bottom:calc(5.6rem + env(safe-area-inset-bottom, 0px)); z-index:59;
  transform:translateY(1rem); opacity:0; pointer-events:none;
  transition:opacity .25s, transform .25s cubic-bezier(.2,.8,.2,1);
  font-family:"Courier Prime",monospace; font-size:.72rem; letter-spacing:.16em; text-transform:uppercase;
  background:var(--gold); color:#1B2430; border:none; border-radius:999px; padding:.6rem 1.1rem .6rem 2rem;
  box-shadow:0 8px 22px var(--shadow); cursor:pointer;
}
.ra-follow:before{content:""; position:absolute; left:1rem; top:50%; width:.5rem; height:.5rem; margin-top:-.25rem;
  border-radius:50%; background:#1B2430; animation:ra-blink 1.6s ease-in-out infinite}
@keyframes ra-blink{50%{opacity:.25}}
.ra-follow.show{opacity:1; transform:none; pointer-events:auto}

@media(max-width:520px){
  .ra-in{gap:.55rem}
  .ra-t{font-size:.8rem}
}
@media(prefers-reduced-motion:reduce){
  body.ra-on .ra-bar{animation:none}
  .ra-follow:before{animation:none}
}