/* =====================================================================
   assets/audio-lido.css · O ÁUDIO, LIDO (N04, P2-B) · o JS está em assets/audio-lido.js
   Cores do sistema: o osciloscópio é o O da marca (âmbar); a transcrição na cor do texto, aspas em cinza;
   o cursor em âmbar; a situação dele em --tinta (neutra); "ouça" e a fonte em verde (link de fonte).
   ===================================================================== */
.al{position:relative}
.al-corpo::after{content:""; display:block; clear:both}

/* o osciloscópio: flutua à esquerda e o texto contorna o círculo */
.al-osc{float:left; display:block; width:76px; height:76px; margin:3px 12px 6px 0; shape-outside:circle(50%); shape-margin:5px}
.al-osc svg{display:block; width:100%; height:100%}

/* a transcrição: o texto inteiro está no DOM; o que ainda não saiu fica transparente (a linha não pula) */
.al-q{margin:0; padding:0}
.al-p{margin:0 0 .5em; font-size:clamp(19px,5.3vw,25px); font-weight:700; line-height:1.24; letter-spacing:-.01em; color:var(--tinta); overflow-wrap:break-word; text-wrap:pretty}
.al-p:last-child{margin-bottom:0}
.al-aspa{color:var(--cinza)}
.al-aspa.off, .al-r{color:transparent}
.al-cur{position:relative; display:inline-block; width:0; height:1em; vertical-align:-.14em}
.al-cur::after{content:""; position:absolute; left:1px; top:0; bottom:0; width:.09em; min-width:2px; background:var(--amber)}
@media (prefers-reduced-motion:no-preference){
  .al-cur.pisca::after{animation:al-pisca 1.06s steps(1) infinite}
  @keyframes al-pisca{50%{opacity:0}}
}

/* a unidade inteira (a ficha Master da Foz): cartão .afl */
.al-cheio{margin:0 0 16px; padding:12px 14px 4px; border:1px solid var(--linha); border-radius:4px; background:var(--leve)}
.al-cab{display:flex; align-items:center; justify-content:space-between; gap:12px; min-height:40px; margin:-9px 0 4px}
.al-k{margin:0; font-family:var(--mono); font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--tinta)}
.al-m{margin:12px 0 8px; font-family:var(--mono); font-size:12px; line-height:1.5; color:var(--cinza)}
.al-s{margin:0 0 6px; padding-left:10px; border-left:2px solid var(--tinta); font-size:14.5px; line-height:1.45; color:var(--tinta)}
.al-acoes{display:flex; flex-wrap:wrap; align-items:center; gap:6px 16px; margin:10px 0 0}
.al-f{margin:0; font-family:var(--mono); font-size:12px; color:var(--cinza)}
.al-f a{display:inline-flex; align-items:center; min-height:40px; color:var(--azul); text-underline-offset:3px}
.al-de-novo{flex:none; display:inline-flex; align-items:center; min-height:40px; padding:0 2px; font-family:var(--mono); font-size:12px; color:var(--cinza); background:none; border:0; cursor:pointer}
.al-de-novo:hover{color:var(--amber)}
.al-de-novo[hidden]{display:none}

/* ouça na fonte: link verde (a fonte), com o círculo de play desenhado em CSS */
.al-ouca{display:inline-flex; align-items:center; gap:9px; min-height:44px; font-size:15.5px; font-weight:700; color:var(--azul); text-decoration:none; white-space:nowrap}
.al-ouca:hover{text-decoration:underline; text-underline-offset:3px}
.al-play{position:relative; flex:none; width:26px; height:26px; border:1.5px solid var(--azul); border-radius:50%; box-sizing:border-box}
.al-play::after{content:""; position:absolute; left:8.5px; top:6px; border-style:solid; border-width:5.5px 0 5.5px 8.5px; border-color:transparent transparent transparent var(--azul)}
.al-ouca:focus-visible, .al-f a:focus-visible, .al-de-novo:focus-visible{outline:2px solid var(--amber); outline-offset:2px}

@media (min-width:760px){
  /* com a linha longa, o osciloscópio vira uma coluna (o 2º trecho não começa ao lado dele) */
  .al-cheio{padding:14px 18px 6px}
  .al-cheio .al-corpo{display:grid; grid-template-columns:88px minmax(0,1fr); column-gap:18px; align-items:start}
  .al-cheio .al-corpo::after{display:none}
  .al-cheio .al-osc{float:none; width:88px; height:88px; margin:2px 0 0}
  .al-p{font-size:26px; text-wrap:balance}
}

/* no palco do Dark Horse: o tamanho vem do .dh-grande (em), que assets/darkhorse.js ajusta para caber */
.al-palco .al-osc{width:2.35em; height:2.35em; margin:.08em .42em .1em 0; shape-margin:.18em}
.al-palco .al-p{margin-bottom:.35em; font-size:1em; font-weight:inherit; line-height:inherit; letter-spacing:inherit}