/* IGP App · "Hoje em 1 minuto" (recursos/audio.js): o player no topo da aba Hoje e o atalho no Início. Só tokens do app.css
   (claro e escuro vêm deles), fontes da marca (General Sans no título, Inter no texto, IBM Plex Mono nos tempos), sem vidro novo.
   Azul elétrico localizado: o botão de tocar; a barra e o polegar em --marca-tinta (contraste 3:1 de componente nos dois temas). */

.ouvir-bloco { padding: 0 16px; }
.ouvir {
  display: grid; gap: 12px; padding: 16px 16px 0;
  background: var(--superficie); border: 1px solid var(--linha-forte); border-radius: var(--raio);
  scroll-margin-top: calc(var(--barra-altura) + env(safe-area-inset-top, 0px) + 8px);
}
.ouvir:not(:has(.ouvir-transcricao)) { padding-bottom: 14px; }
.ouvir-topo { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 14px; align-items: center; }

/* tocar e pausar: 56 pt, o único azul cheio do cartão */
.ouvir-play {
  position: relative; width: 56px; height: 56px; margin: 0; padding: 0; border: 0; border-radius: 50%;
  display: grid; place-items: center; background: var(--marca); color: var(--sobre-marca); cursor: pointer;
  transition: transform .15s var(--facil), filter .15s;
}
.ouvir-play svg { width: 26px; height: 26px; }
.ouvir-play:active { transform: scale(.96); filter: brightness(.94); }
.ouvir-play:focus-visible { outline: 2px solid var(--marca-tinta); outline-offset: 3px; border-radius: 50%; }
.ouvir-play.is-carregando::after,
.ouvir-atalho-icone.is-carregando::after {
  content: ""; position: absolute; inset: -4px; border-radius: inherit; border: 2px solid transparent;
  border-top-color: var(--marca-tinta); animation: ouvir-gira .9s linear infinite;
}
@keyframes ouvir-gira { to { transform: rotate(1turn); } }

.ouvir-texto { display: grid; gap: 3px; min-width: 0; }
.ouvir-rotulo { color: var(--marca-tinta); }
.ouvir-titulo { margin: 0; font: 700 1.2rem/1.2 var(--f-titulo); letter-spacing: -.015em; color: var(--tinta); }
.ouvir-meta { font: 400 .84rem/1.35 var(--f-texto); color: var(--tinta-3); overflow-wrap: anywhere; }

/* velocidade: um botão que alterna 1× e 1,5× (como no app de podcasts), com área de toque estendida */
.ouvir-vel {
  position: relative; min-width: 50px; min-height: 32px; margin: 0; padding: 0 10px;
  border: 1px solid var(--linha-forte); border-radius: 999px; background: var(--superficie-2); color: var(--tinta-2);
  font: 400 .82rem/1 var(--f-mono); font-variant-numeric: tabular-nums; cursor: pointer;
}
.ouvir-vel::after { content: ""; position: absolute; inset: -6px -4px; }
.ouvir-vel:active { background: var(--superficie-3); }

/* barra de progresso: input range nativo (teclado e leitor de tela de graça), trilho fino, alvo de 32 px de altura */
.ouvir-progresso { display: grid; gap: 0; }
.ouvir-barra {
  --progresso: 0%;
  width: 100%; height: 32px; margin: 0; padding: 0; background: transparent; cursor: pointer; touch-action: pan-y;
  -webkit-appearance: none; appearance: none;
}
.ouvir-barra::-webkit-slider-runnable-track {
  height: 4px; border-radius: 999px;
  background: linear-gradient(to right, var(--marca-tinta) var(--progresso), var(--superficie-3) var(--progresso));
}
.ouvir-barra::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; width: 16px; height: 16px; margin-top: -6px; border-radius: 50%;
  background: var(--marca-tinta); border: 2px solid var(--superficie); box-shadow: 0 1px 3px rgba(5, 20, 42, .28);
}
.ouvir-barra::-moz-range-track { height: 4px; border-radius: 999px; background: var(--superficie-3); }
.ouvir-barra::-moz-range-progress { height: 4px; border-radius: 999px; background: var(--marca-tinta); }
.ouvir-barra::-moz-range-thumb { width: 12px; height: 12px; border-radius: 50%; background: var(--marca-tinta); border: 2px solid var(--superficie); }
.ouvir-barra:focus-visible { outline: 2px solid var(--marca-tinta); outline-offset: 0; border-radius: 8px; }
.ouvir-tempos { display: flex; justify-content: space-between; margin-top: -4px; font-size: .74rem; line-height: 1.2; color: var(--tinta-3); }

.ouvir-erro { font: 500 .82rem/1.4 var(--f-texto); color: var(--queda); }
.ouvir-erro[hidden] { display: none; }

/* transcrição: <details> nativo, abre abaixo do player */
.ouvir-transcricao { margin: 0 -16px; padding: 0 16px; border-top: 1px solid var(--linha); }
.ouvir-transcricao > summary {
  display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 48px;
  font: 600 .9rem var(--f-texto); color: var(--marca-tinta); cursor: pointer; list-style: none;
}
.ouvir-transcricao > summary::-webkit-details-marker { display: none; }
.ouvir-transcricao > summary:focus-visible { outline: 2px solid var(--marca-tinta); outline-offset: -3px; border-radius: 8px; }
.ouvir-chevron { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--superficie-2); color: var(--tinta-3); }
.ouvir-chevron svg { width: 18px; height: 18px; transform: rotate(90deg); transition: transform .3s var(--facil); }
.ouvir-transcricao[open] .ouvir-chevron svg { transform: rotate(-90deg); }
.ouvir-transcricao-texto { display: grid; gap: 10px; padding: 2px 0 18px; }
.ouvir-transcricao-texto p { margin: 0; font: 400 .95rem/1.55 var(--f-texto); color: var(--tinta-2); max-width: 65ch; text-wrap: pretty; }

/* atalho no Início (uma linha do grupo de atalhos): toca e pausa ali mesmo */
.ouvir-atalho-icone { position: relative; background: var(--marca); color: var(--sobre-marca); }
.ouvir-atalho-icone svg { width: 18px; height: 18px; }
.ouvir-atalho.is-tocando .linha-titulo { color: var(--marca-tinta); }
.ouvir-atalho-duracao { flex: none; font: 400 .8rem/1 var(--f-mono); font-variant-numeric: tabular-nums; color: var(--tinta-3); }
.ouvir-atalho:focus-visible { outline-offset: -3px; }

@media (prefers-reduced-motion: reduce) {
  .ouvir-play { transition: none; }
  .ouvir-chevron svg { transition: none; }
  .ouvir-play.is-carregando::after, .ouvir-atalho-icone.is-carregando::after { animation: none; border-color: var(--linha-forte); border-top-color: var(--marca-tinta); }
}
@media (forced-colors: active) {
  .ouvir-play, .ouvir-atalho-icone { border: 1px solid ButtonText; }
  .ouvir-barra::-webkit-slider-runnable-track { background: ButtonText; }
}