/* Listen mode. Fixed layers and highlights only: nothing here changes the page layout. */
.listen-button { display:inline-flex; align-items:center; gap:10px; margin:16px 0 0 10px; padding:16px 22px; border:1px solid var(--line); border-radius:100px; background:var(--bg); color:var(--fg); font-size:14px; font-weight:500; position:relative; isolation:isolate; vertical-align:top; }
.listen-button svg,.listen-fab svg { width:18px; height:18px; color:var(--reading-accent); flex:none; }
.listen-button:hover { border-color:var(--reading-accent); }
.listen-button[aria-pressed="true"] svg path { animation:listen-wave 1s ease-in-out infinite; transform-origin:center; transform-box:fill-box; }
.listen-button:after { content:''; position:absolute; inset:-1px; border-radius:inherit; border:1px solid var(--reading-accent); opacity:0; z-index:-1; pointer-events:none; }
html[data-listen="on"] .listen-button:after { animation:listen-ring 1.4s ease-out 1; }

.listen-dock { position:fixed; left:50%; bottom:max(18px, env(safe-area-inset-bottom)); transform:translateX(-50%); z-index:40; width:min(620px, calc(100% - 32px)); display:flex; justify-content:center; pointer-events:none; font-family:var(--font-body); }
.listen-dock > * { pointer-events:auto; }
.listen-fab { display:inline-flex; align-items:center; gap:10px; padding:13px 20px; border:1px solid var(--line); border-radius:100px; background:var(--card); color:var(--fg); font-size:14px; font-weight:500; box-shadow:0 14px 34px -18px rgba(0,0,0,.35); transition:opacity .35s ease, transform .35s ease; }
.listen-dock[data-hero-visible="true"] .listen-fab { opacity:0; transform:translateY(16px); pointer-events:none; }
.listen-dock[data-mode="player"] .listen-fab,.listen-dock:not([data-mode="player"]) .listen-player { display:none; }

.listen-player { width:100%; display:flex; align-items:center; gap:6px; padding:9px 10px 9px 9px; border:1px solid color-mix(in srgb, var(--reading-accent) 28%, var(--line)); border-radius:22px; background:color-mix(in srgb, var(--card) 88%, transparent); -webkit-backdrop-filter:blur(18px) saturate(1.4); backdrop-filter:blur(18px) saturate(1.4); box-shadow:0 22px 50px -24px rgba(0,0,0,.45), 0 0 0 6px color-mix(in srgb, var(--tint) 7%, transparent); animation:listen-rise .55s cubic-bezier(.2,.9,.25,1.15) both; }
.listen-player button { display:grid; place-items:center; border:0; background:none; color:var(--fg2); min-width:40px; min-height:40px; border-radius:50%; padding:0; }
.listen-player button:hover { color:var(--fg); background:var(--soft); }
.listen-player svg { width:20px; height:20px; fill:currentColor; }
.listen-player .lp-play { min-width:46px; min-height:46px; background:var(--btn-bg); color:var(--btn-fg); }
.listen-player .lp-play:hover { background:var(--btn-bg); color:var(--btn-fg); transform:scale(1.04); }
.lp-main { flex:1; min-width:0; padding:0 6px; }
.lp-top { display:flex; align-items:center; gap:8px; font-size:12px; line-height:1.3; color:var(--fg2); margin-bottom:7px; }
.lp-title { flex:1; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; color:var(--fg); font-weight:500; }
.lp-time { font-variant-numeric:tabular-nums; flex:none; }
.lp-bars { display:inline-flex; align-items:flex-end; gap:2px; height:12px; flex:none; }
.lp-bars i { width:2.5px; height:100%; border-radius:2px; background:var(--reading-accent); transform:scaleY(.3); transform-origin:bottom; }
.listen-dock[data-playing="true"] .lp-bars i { animation:listen-bars .9s ease-in-out infinite; }
.lp-bars i:nth-child(2) { animation-delay:-.3s !important; } .lp-bars i:nth-child(3) { animation-delay:-.6s !important; } .lp-bars i:nth-child(4) { animation-delay:-.15s !important; }
.lp-track { position:relative; height:4px; border-radius:4px; background:var(--line); }
.lp-fill { position:absolute; inset:0; border-radius:inherit; background:var(--reading-accent); transform:scaleX(0); transform-origin:left; pointer-events:none; }
.lp-track input { position:absolute; inset:-10px 0; width:100%; height:24px; margin:0; opacity:0; cursor:pointer; }
.listen-player .lp-speed { font-size:12px; font-weight:600; font-variant-numeric:tabular-nums; border-radius:12px; min-width:44px; }
.listen-player .lp-follow { color:var(--reading-accent); animation:listen-nudge 1.6s ease-in-out infinite; }

/* The voice-mode glow: a warm wash rises once, then settles behind the player. */
.listen-glow { position:fixed; inset:auto 0 0; height:44vh; z-index:30; pointer-events:none; opacity:0; background:radial-gradient(120% 90% at 50% 115%, color-mix(in srgb, var(--tint) 26%, transparent), transparent 62%); transition:opacity .8s ease; }
.listen-glow.is-on { opacity:.55; animation:listen-dawn 1.6s ease-out 1; }

/* Focus: other passages soften, the one being read stays bright. */
.narr-block { transition:opacity .6s ease; }
html[data-listen="on"] .narr-block { opacity:.42; cursor:pointer; }
html[data-listen="on"] .narr-block.is-narrating { opacity:1; }
::highlight(narration-sentence) { background-color:color-mix(in srgb, var(--tint) 16%, transparent); color:var(--fg); }
::highlight(narration-word) { color:var(--reading-accent); text-decoration:underline 2px color-mix(in srgb, var(--tint) 70%, transparent); text-underline-offset:6px; }
[data-theme^="mono"] ::highlight(narration-sentence) { background-color:color-mix(in srgb, var(--fg) 10%, transparent); }

@keyframes listen-rise { from { opacity:0; transform:translateY(26px) scale(.96); } }
@keyframes listen-dawn { 0% { opacity:0; transform:scaleY(.6); } 35% { opacity:1; } 100% { opacity:.55; transform:none; } }
@keyframes listen-ring { 0% { opacity:.9; transform:scale(1); } 100% { opacity:0; transform:scale(1.35, 1.8); } }
@keyframes listen-bars { 0%,100% { transform:scaleY(.3); } 50% { transform:scaleY(1); } }
@keyframes listen-wave { 0%,100% { transform:scaleY(1); } 50% { transform:scaleY(.55); } }
@keyframes listen-nudge { 0%,100% { transform:translateY(0); } 50% { transform:translateY(3px); } }

@media(max-width:620px) {
  .listen-button { margin-left:0; padding:15px 20px; }
  .listen-player { gap:2px; padding:8px; border-radius:20px; }
  .listen-player [data-act="back"],.listen-player [data-act="next"] { display:none; }
  .lp-top { margin-bottom:6px; }
  .lp-time { font-size:11px; }
}
@media(prefers-reduced-motion:reduce) {
  .listen-player,.listen-glow.is-on { animation:none; }
  .narr-block { transition:none; }
}
@media print { .listen-dock,.listen-glow,.listen-button { display:none !important; } }