/* narrate.css — the Listen control.
 *
 * Sits inside .section-head, after the heading and lead. It is an affordance,
 * not a feature announcement: a section that offers narration should look like
 * the same section, with one quiet control added. If the button competes with
 * the h2 for attention the page has been made worse, not more accessible.
 */

.vo-btn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-top: 22px;
  padding: 9px 16px 9px 13px;
  border: 1px solid var(--line-2);
  border-radius: 999px;
  background: transparent;
  color: var(--fg-2);
  font: inherit;
  font-size: 0.82rem;
  letter-spacing: 0.01em;
  line-height: 1;
  cursor: pointer;
  /* 44px minimum touch target without a 44px-tall pill: the padding above gives
     ~36px of drawn height, so the pseudo-element extends the hit area only.
     POLISH-QUEUE §2 records the audit that made this the house pattern. */
  position: relative;
  transition: border-color 160ms ease, color 160ms ease, background 160ms ease;
}
/* `display: inline-flex` above is an AUTHOR style, and author styles beat the
   user-agent sheet in every browser — including its `[hidden] { display: none }`.
   So `btn.hidden = true` in narrate.js set the attribute and changed nothing on
   screen: the control stayed fully drawn while `btn.disabled = true` made it
   ignore every click. A pill that looks pressable and does nothing is a worse
   outcome than either hiding it or leaving it working, and it is what a visitor
   would reasonably describe as "the narration isn't working".
   journey.css already establishes this exact pattern ten times over
   (`.j-depth[hidden]`, `.j-res[hidden]`, …); this component was the one that
   forgot. Any component with an explicit `display` needs its own [hidden] rule. */
.vo-btn[hidden] { display: none; }

/* Belt and braces for the state that should now be unreachable: if a control is
   ever disabled while still on screen, it must LOOK dead rather than inviting a
   press. Hover is suppressed for the same reason. */
.vo-btn:disabled { cursor: default; opacity: 0.45; }
.vo-btn:disabled:hover { color: var(--fg-2); border-color: var(--line-2); }

.vo-btn::after {
  content: "";
  position: absolute;
  inset: -5px -2px;
}

.vo-btn:hover { color: var(--fg); border-color: var(--line-strong); }

.vo-btn svg { width: 15px; height: 15px; flex: none; }

/* Play and stop are the same glyph slot — only one is ever drawn. Swapping the
   glyph rather than the whole button keeps the control from resizing mid-press,
   which on a pill that says "Listen to this section" would shift the layout. */
.vo-btn .vo-stop { display: none; }
.vo-btn[data-state="playing"] .vo-play,
.vo-btn[data-state="loading"] .vo-play { display: none; }
.vo-btn[data-state="playing"] .vo-stop,
.vo-btn[data-state="loading"] .vo-stop { display: inline; }

.vo-btn[data-state="playing"],
.vo-btn[data-state="loading"] {
  color: var(--cyan);
  border-color: var(--cyan-line);
  background: var(--cyan-dim);
}

/* Loading breathes; playing does not. A control that pulses for the whole
   28 minutes of a clip is a nervous tic. */
.vo-btn[data-state="loading"] svg { animation: vo-pulse 1.1s ease-in-out infinite; }
@keyframes vo-pulse { 0%, 100% { opacity: 1 } 50% { opacity: 0.45 } }

@media (prefers-reduced-motion: reduce) {
  .vo-btn[data-state="loading"] svg { animation: none; opacity: 0.6; }
  .vo-btn { transition: none; }
}

/* Narrow screens keep the icon and drop the words — but the accessible name is
   set on the button itself, so the control never becomes an unlabelled glyph. */
@media (max-width: 560px) {
  .vo-btn { padding: 10px; gap: 0; }
  /* The desktop extender is `inset: -5px -2px`, tuned for a wide pill where only
     the vertical axis is short. Here the label leaves the flow and the button
     collapses to a 37px square (15px glyph + 10px padding + 1px border, twice),
     so the -2px horizontal inset yields 37 + 4 = 41px — three short of the 44px
     the comment at the top of this file claims to guarantee. A symmetric -4px
     gives 45px in both axes, and the drawn pill is unchanged. */
  .vo-btn::after { inset: -4px; }
  .vo-btn .vo-btn-text {
    position: absolute;
    width: 1px; height: 1px;
    margin: -1px; padding: 0; border: 0;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    overflow: hidden;
    white-space: nowrap;
  }
}

/* Print and no-JS: there is nothing to press. */
@media print { .vo-btn { display: none !important; } }