/* Layer after site.css / thread.css. No animated speech indicator or auto-scroll. */
.narration-settings-button { min-height:44px; padding:8px 0; border:0; background:none; color:inherit; font:inherit; text-align:start; }
.narration-settings-button:hover { text-decoration:underline; text-underline-offset:4px; }
#audio-dock.narration-dock {
  --narration-cream:#fff8e9; --narration-muted:#e1e5d8;
  display:block; position:fixed; z-index:95; inset:auto max(18px,env(safe-area-inset-right)) max(18px,env(safe-area-inset-bottom)) auto;
  transform:none; width:auto; max-width:calc(100vw - 36px); max-height:none;
  padding:0; overflow:visible; border:0; border-radius:0;
  background:transparent; color:var(--narration-cream); box-shadow:none; pointer-events:none;
  font:1rem/1.5 var(--sans,system-ui,sans-serif); color-scheme:dark;
}
#audio-dock.narration-dock[hidden], #audio-dock [hidden] { display:none!important; }
#audio-dock .narration-popover {
  width:min(340px,calc(100vw - 36px)); max-height:calc(100vh - 120px); max-height:calc(100svh - 120px - env(safe-area-inset-bottom));
  overflow:auto; overscroll-behavior:contain; padding:16px; margin:0 0 12px;
  border:1px solid #cbb27e; border-radius:14px; background:#17372c;
  box-shadow:0 10px 32px #00110c35; pointer-events:auto;
}
.narration-heading { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; }
#audio-dock .narration-heading>div { min-width:0; }
#audio-dock .audio-kicker { color:#efd7a7; font-size:.88rem; letter-spacing:.04em; }
#audio-dock #audio-title { display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; max-width:none; white-space:normal; overflow:hidden; font-size:1rem; line-height:1.45; overflow-wrap:anywhere; }
#audio-dock .narration-close { flex:none; min-width:44px; padding:3px 10px; font-size:1.6rem; line-height:1; border-color:transparent; background:transparent; }
#audio-dock #narration-source-label { max-width:none; margin:10px 0 12px; color:var(--narration-muted); font-size:1rem; line-height:1.5; overflow-wrap:anywhere; }
#audio-dock .audio-dock-actions { width:100%; display:flex; flex-wrap:wrap; gap:8px; }
#audio-dock .audio-dock-actions button { flex:1; }
#audio-dock button, #audio-dock select { min-height:44px; max-width:100%; border:1px solid #b9c6b4; border-radius:6px; padding:8px 12px; background:#203f32; color:var(--narration-cream); font:inherit; }
#audio-dock button:hover:not(:disabled) { background:#e9d7ad; color:#14392c; border-color:#e9d7ad; }
#audio-dock button:disabled { opacity:.55; cursor:not-allowed; }
#audio-dock button:focus-visible, #audio-dock select:focus-visible, #audio-dock summary:focus-visible { outline:3px solid #fff0c7; outline-offset:3px; }
#audio-dock .narration-feedback { margin:12px 0 0; max-width:none; color:var(--narration-cream); font-size:1rem; line-height:1.5; }
.narration-options { margin-top:12px; border-top:1px solid #728778; }
.narration-options>summary { min-height:44px; display:list-item; padding:12px 0 4px; color:#f0d9aa; font-size:1rem; cursor:pointer; }
.narration-fields { display:grid; grid-template-columns:minmax(0,1fr); gap:14px; margin-top:14px; }
#audio-dock .narration-fields label { display:flex; flex-direction:column; align-items:stretch; gap:7px; min-width:0; font-size:.94rem; }
.narration-voice-field { grid-column:1/-1; }
#audio-dock .narration-fields select { width:100%; min-width:0; font-size:1rem; text-overflow:ellipsis; }
#audio-dock .narration-note { margin:12px 0 0; max-width:none; color:var(--narration-muted); font-size:.9rem; line-height:1.6; }
#audio-dock .narration-availability { padding-inline-start:12px; border-inline-start:2px solid #cbb27e; overflow-wrap:anywhere; }
.narration-preview-row { display:flex; flex-wrap:wrap; gap:10px; margin-top:16px; }
#audio-dock .narration-preview-row button { white-space:normal; overflow-wrap:anywhere; text-align:start; }
#audio-dock .narration-mini { display:flex; align-items:center; justify-content:flex-end; gap:8px; pointer-events:none; }
#audio-dock .narration-mini button { display:grid; place-items:center; flex:none; padding:0; pointer-events:auto; border:1px solid #cbb27e; border-radius:50%; background:#17372c; box-shadow:0 4px 14px #00110c25; }
#audio-dock .narration-launcher { width:54px; height:54px; min-height:54px; position:relative; }
#audio-dock .narration-mini-pause { width:44px; height:44px; min-height:44px; }
#audio-dock .narration-mini svg { width:23px; height:23px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; pointer-events:none; }
#audio-dock .narration-mini-pause svg { width:20px; height:20px; }
#audio-dock .narration-status-dot { position:absolute; inset:auto 6px 6px auto; width:7px; height:7px; border:1px solid #edd4a3; border-radius:50%; background:#edd4a3; pointer-events:none; }
#audio-dock .narration-play-symbol { display:none; }
#audio-dock[data-state=paused] .narration-play-symbol { display:block; }
#audio-dock[data-state=paused] .narration-pause-symbol { display:none; }
#audio-dock[data-state=paused] .narration-status-dot { background:transparent; }
/* A cached, pre-compact document remains usable until its HTML is rebuilt. */
#audio-dock.narration-dock:not(.narration-compact) { width:min(340px,calc(100vw - 36px)); max-height:72svh; padding:16px; overflow:auto; background:#17372c; border:1px solid #cbb27e; border-radius:14px; pointer-events:auto; }
/* Mark only the current original block; don't rewrite text or move keyboard focus. */
main .narration-reading { text-decoration:underline; text-decoration-color:#af8d4b; text-decoration-thickness:2px; text-underline-offset:.22em; scroll-margin-block:20vh; }
main .article-content .narration-reading { background:#eee5c8; outline:3px solid #eee5c8; border-radius:3px; }
main :is(.hero,.page-hero) .narration-reading { background:#14392c66; outline:0; border-radius:3px; text-decoration-color:#f0d3a0; }
html[data-narrating=true] { scroll-padding-bottom:88px; }
@media(max-width:600px) {
  #audio-dock.narration-dock { inset-inline-end:max(10px,env(safe-area-inset-right)); inset-block-end:max(10px,env(safe-area-inset-bottom)); max-width:calc(100vw - 20px); }
  #audio-dock .narration-popover { width:min(340px,calc(100vw - 20px)); padding:14px; }
}
@media(prefers-reduced-motion:reduce) { #audio-dock, main .narration-reading { animation:none; transition:none; scroll-behavior:auto; } }
@media(forced-colors:active) { main .narration-reading { outline:2px solid Highlight; } #audio-dock .narration-popover, #audio-dock .narration-mini button { border:2px solid CanvasText; } }
@media print { #audio-dock.narration-dock, .narration-settings-button { display:none!important; } main .narration-reading { background:transparent!important; outline:0!important; text-decoration:none!important; } }