/* The page read aloud (28 Oct 2026, his request): a small player right under the title at every width
   (his choice the same day; it first sat under Share in the side column, where a computer visitor saw
   it only after scrolling). A quiet text button like Share, whose underline is the progress line
   (click it to move), the time, and the credit ElevenLabs asks for. site/js/listen.js drives it.
   Loaded only by pages that have a reading (build.py, LISTEN). */

.listen { display: grid; justify-items: start; }
.listener {
  display: inline-flex; align-items: center; gap: 0.45rem; min-height: 2.25rem; padding: 0 0.1rem;
  border: 0; background: none; cursor: pointer; color: var(--ink);
  font: 500 var(--fs-small)/1 var(--sans); letter-spacing: 0.01em;
}
.listener svg { width: 1rem; height: 1rem; color: var(--accent); }
.listener .icon--pause, .is-playing .listener .icon--play { display: none; }
.is-playing .listener .icon--pause { display: block; }
.listener:hover { color: var(--accent); }
.listener:focus-visible, .listener__bar:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.listener__time { color: var(--ink-3); font-weight: 400; font-variant-numeric: tabular-nums; }

/* the progress line, with room above and below so a finger or pointer can hit it */
.listener__bar { position: relative; justify-self: stretch; height: 0.9rem; margin-top: -0.45rem; cursor: pointer; }
.listener__bar::before, .listener__bar::after { content: ""; position: absolute; left: 0; top: 0.45rem; height: 1.5px; }
.listener__bar::before { right: 0; background: var(--line-strong); }
.listener__bar::after { width: calc(var(--p, 0) * 100%); background: var(--accent); }

.listener__credit { margin: 0.1rem 0 0; color: var(--ink-3); font: 400 var(--fs-meta)/1.4 var(--sans); letter-spacing: 0.01em; }
.listener__credit a { color: inherit; text-decoration: underline; text-decoration-thickness: var(--hair); text-underline-offset: 0.2em; }

/* the head's own spacing places it; the line keeps the width it had in the side column */
.listen-head .listen { max-width: 15rem; }
@media print { .listen-head { display: none !important; } }