/* ================= Read aloud (single-catch.php + assets/js/read-aloud.js) ================= */
.wn-listen-btn{ display:inline-flex; align-items:center; gap:6px; }
.wn-listen-btn[hidden]{ display:none !important; }
.wn-listen-btn svg{ flex-shrink:0; }
.wn-listen-btn.is-active{ background:var(--ink); color:var(--gold); border-color:var(--ink); }

/* paragraph currently being read */
.post-body .wn-listen-current{
  background:linear-gradient(transparent 8%, rgba(247,198,0,.28) 8%, rgba(247,198,0,.28) 92%, transparent 92%);
  border-radius:4px; box-decoration-break:clone; -webkit-box-decoration-break:clone;
  transition:background .2s ease;
}
.post-body.body-text{ cursor:auto; }
body.wn-listen-open .post-body.body-text p,
body.wn-listen-open .post-body.body-text li{ cursor:pointer; } /* tap a paragraph to read from there */

/* mini player */
.wn-listen-player{
  position:fixed; left:50%; bottom:24px; transform:translateX(-50%); z-index:96;
  width:min(440px, calc(100% - 24px)); box-sizing:border-box;
  display:flex; flex-wrap:wrap; align-items:center; gap:6px;
  background:var(--ink); color:#fff; border-radius:18px; padding:8px 10px;
  box-shadow:0 10px 30px rgba(18,10,8,.35); font-family:'Work Sans',sans-serif;
  animation:wnListenIn .2s ease-out;
}
.wn-listen-player[hidden]{ display:none; }
@keyframes wnListenIn{ from{ opacity:0; transform:translate(-50%, 10px); } to{ opacity:1; transform:translate(-50%, 0); } }
.wn-listen-player button{
  background:none; border:none; color:#fff; cursor:pointer; border-radius:50%;
  width:36px; height:36px; display:flex; align-items:center; justify-content:center; padding:0;
  -webkit-tap-highlight-color:transparent; flex-shrink:0;
}
.wn-listen-player button:hover{ background:rgba(255,255,255,.12); }
.wn-listen-player .wn-listen-play{ width:42px; height:42px; background:var(--gold); color:var(--ink); }
.wn-listen-player .wn-listen-play:hover{ background:var(--gold); filter:brightness(1.05); }
.wn-listen-meta{ flex:1; min-width:0; display:flex; flex-direction:column; line-height:1.2; padding:0 4px; }
.wn-listen-title{ font-size:.8rem; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.wn-listen-progress{ font-size:.7rem; opacity:.7; }
.wn-listen-player .wn-listen-rate{ width:auto; border-radius:99px; padding:0 10px; font-size:.78rem; font-weight:700; border:1px solid rgba(255,255,255,.3); height:30px; }
.wn-listen-player .wn-listen-stop{ font-size:.9rem; opacity:.8; }
.wn-listen-note{ flex-basis:100%; margin:2px 4px 2px; font-size:.7rem; line-height:1.35; color:rgba(255,255,255,.75); }
.wn-listen-note[hidden]{ display:none; }

/* sit above the mobile bottom tab bar */
@media (max-width:680px){
  .wn-listen-player{ bottom:calc(78px + env(safe-area-inset-bottom, 0px)); }
}
/* keep the last paragraph from hiding behind the player */
body.wn-listen-open .post-body.body-text{ padding-bottom:90px; }