/* listen.css — shared "Listen" (browser-native TTS) widget for apprised.news.
   Loaded by the SPA (index.html), signals.html, and every server-rendered page
   (via _header.mjs), the same single-source-of-truth pattern as site-nav.css.
   Self-contained color tokens so it looks right on any surface regardless of the
   host page's own variables; theme via [data-theme] with a prefers-color-scheme
   fallback for pages that don't stamp the attribute. */

.al-bar,.al-panel{
  --al-accent:#c9a84c; --al-accent-ink:#161616;
  --al-bg:#1b1e24; --al-bg2:#23272f; --al-line:#333a46;
  --al-txt:#e8eaef; --al-txt2:#aeb6c2; --al-shadow:rgba(0,0,0,.42);
}
:root[data-theme="light"] .al-bar,:root[data-theme="light"] .al-panel{
  --al-accent:#92710c; --al-accent-ink:#ffffff;
  --al-bg:#f4f5f7; --al-bg2:#e9ecf0; --al-line:#d4d8df;
  --al-txt:#1b2230; --al-txt2:#586274; --al-shadow:rgba(20,25,35,.18);
}
@media (prefers-color-scheme:light){
  :root:not([data-theme="dark"]):not([data-theme="light"]) .al-bar,
  :root:not([data-theme="dark"]):not([data-theme="light"]) .al-panel{
    --al-accent:#92710c; --al-accent-ink:#ffffff;
    --al-bg:#f4f5f7; --al-bg2:#e9ecf0; --al-line:#d4d8df;
    --al-txt:#1b2230; --al-txt2:#586274; --al-shadow:rgba(20,25,35,.18);
  }
}

.al-bar{
  display:flex; align-items:center; gap:.5rem; flex-wrap:wrap;
  margin:1rem 0; position:relative; font-family:inherit;
}
.al-bar[hidden]{ display:none; }
.al-bar.al-bottom{ margin-top:1.4rem; }

.al-play{
  display:inline-flex; align-items:center; gap:.45rem;
  padding:.52rem 1rem; border-radius:999px;
  border:1px solid var(--al-accent); background:var(--al-accent);
  color:var(--al-accent-ink); font:600 .9rem/1 inherit; cursor:pointer;
  transition:filter .15s,background .15s,color .15s;
}
.al-play:hover{ filter:brightness(1.06); }
.al-play .al-ico{ font-size:1.02rem; }
.al-bar.al-playing .al-play{ background:transparent; color:var(--al-accent); }
.al-bar.al-playing .al-play .al-ico{ animation:al-pulse 1.4s ease-in-out infinite; }

.al-toggle{
  display:inline-flex; align-items:center; gap:.35rem;
  padding:.52rem .85rem; border-radius:999px;
  border:1px solid var(--al-line); background:var(--al-bg2);
  color:var(--al-txt2); font:500 .82rem/1 inherit; cursor:pointer;
  transition:color .15s,border-color .15s;
}
.al-toggle:hover{ color:var(--al-txt); border-color:var(--al-accent); }
.al-toggle[aria-expanded="true"]{ color:var(--al-txt); border-color:var(--al-accent); }

.al-status{ font-size:.76rem; color:var(--al-txt2); font-family:inherit; }

.al-panel{
  position:absolute; top:calc(100% + .45rem); left:0; z-index:60;
  width:min(320px,92vw); padding:.95rem;
  background:var(--al-bg); border:1px solid var(--al-line); border-radius:13px;
  box-shadow:0 12px 36px var(--al-shadow);
  display:flex; flex-direction:column; gap:.8rem; color:var(--al-txt);
}
.al-panel[hidden]{ display:none; }
.al-field{ display:flex; flex-direction:column; gap:.32rem; }
.al-field > span{ display:flex; justify-content:space-between; align-items:baseline;
  font:600 .78rem/1.2 inherit; color:var(--al-txt); }
.al-field > span b{ font:600 .74rem/1 inherit; color:var(--al-accent); }
.al-voice{
  padding:.42rem .55rem; border:1px solid var(--al-line); border-radius:8px;
  background:var(--al-bg2); color:var(--al-txt); font:inherit; font-size:.82rem;
  max-width:100%;
}
.al-rate,.al-pitch{ width:100%; accent-color:var(--al-accent); cursor:pointer; }
.al-format{ display:flex; gap:.3rem; }
.al-format button{
  flex:1; padding:.42rem .3rem; border:1px solid var(--al-line); border-radius:8px;
  background:var(--al-bg2); color:var(--al-txt2); font:500 .76rem/1 inherit; cursor:pointer;
  transition:background .12s,color .12s,border-color .12s;
}
.al-format button:hover{ color:var(--al-txt); }
.al-format button.is-active{
  background:var(--al-accent); color:var(--al-accent-ink);
  border-color:var(--al-accent); font-weight:600;
}
.al-hint{ font-size:.72rem; color:var(--al-txt2); line-height:1.45; margin:0; }

.al-play:focus-visible,.al-toggle:focus-visible,
.al-format button:focus-visible,.al-voice:focus-visible,
.al-rate:focus-visible,.al-pitch:focus-visible{
  outline:2px solid var(--al-accent); outline-offset:2px; border-radius:6px;
}

@keyframes al-pulse{ 0%,100%{ opacity:1; } 50%{ opacity:.4; } }
@media (prefers-reduced-motion:reduce){
  .al-bar.al-playing .al-play .al-ico{ animation:none; }
  .al-play,.al-toggle,.al-format button{ transition:none; }
}