/* ════════════════════════════════════════════════════════════════════════════
   AEDO · estilos do realce de leitura e movimento

   html[data-realce]  capsula (padrão) · foco · classico
   html[data-mov]     atual (padrão) · suave · fluido · preciso · nenhum

   As cores vêm de applyHl() (leitor.js) e seguem a cor e a intensidade
   escolhidas nos ajustes: --lav, --cap-fill, --cap-rim, --cap-glow,
   --foco-a, --foco-b.
   ════════════════════════════════════════════════════════════════════════════ */

/* ── movimento ─────────────────────────────────────────────────────────── */
html{--mv-dur:.13s;--mv-durv:.16s;--mv-ease:cubic-bezier(.22,1,.36,1);--mv-risca:.18s;--mv-frase:.22s}
html[data-mov="suave"]{--mv-dur:.42s;--mv-durv:.42s;--mv-ease:cubic-bezier(.25,.1,.25,1);--mv-risca:.38s;--mv-frase:.45s}
html[data-mov="fluido"]{--mv-dur:.38s;--mv-durv:.38s;--mv-ease:cubic-bezier(.34,1.56,.64,1);--mv-risca:.32s;--mv-frase:.4s}
html[data-mov="preciso"]{--mv-dur:.12s;--mv-durv:.12s;--mv-ease:cubic-bezier(.2,0,0,1);--mv-risca:.12s;--mv-frase:.14s}
html[data-mov="nenhum"]{--mv-dur:0s;--mv-durv:0s;--mv-risca:0s;--mv-frase:0s}

.track.anim{
  transition:left var(--mv-dur) var(--mv-ease),top var(--mv-durv) var(--mv-ease),
             width var(--mv-dur) var(--mv-ease),height var(--mv-dur) var(--mv-ease),opacity .18s;
}
.sheet .s{transition:background-color var(--mv-frase) ease,opacity var(--mv-frase) ease,color var(--mv-frase) ease}

/* ── cápsula: lavagem leve na frase, cápsula squircle de vidro na palavra ── */
html[data-realce="capsula"] .s.active{background:var(--lav);color:inherit;box-shadow:none;border-radius:7px;
  -webkit-box-decoration-break:clone;box-decoration-break:clone}
html[data-realce="capsula"] .s.active:hover{background:var(--lav)}
html[data-realce="capsula"] .pdfpage .hl:not(.wordhl){background:var(--lav);box-shadow:none;border-radius:5px}
html[data-realce="capsula"] .track{
  border-radius:9px;background:var(--cap-fill);
  box-shadow:0 0 0 3px var(--cap-fill),0 0 0 4px var(--cap-rim),0 8px 20px -9px var(--cap-glow);
}
html[data-realce="capsula"] .w.now,
html[data-realce="capsula"] .hl.wordhl{background:var(--cap-fill);border-radius:9px;box-shadow:0 0 0 1px var(--cap-rim)}
@supports (corner-shape: squircle){
  html[data-realce="capsula"] .track,
  html[data-realce="capsula"] .w.now,
  html[data-realce="capsula"] .hl.wordhl{border-radius:16px;corner-shape:squircle}
}

/* ── foco: a mesma lavagem da cápsula na frase; a palavra ganha um traço ──
   O traço já chega inteiro e desliza de uma palavra para a outra, no
   movimento escolhido. Degradê vertical: mais forte em cima, mais leve embaixo. */
html[data-realce="foco"] .s.active{background:var(--lav);color:inherit;box-shadow:none;border-radius:7px;
  -webkit-box-decoration-break:clone;box-decoration-break:clone}
html[data-realce="foco"] .s.active:hover{background:var(--lav)}
html[data-realce="foco"] .pdfpage .hl:not(.wordhl){background:var(--lav);box-shadow:none;border-radius:5px}
html[data-realce="foco"] .track{background:none;box-shadow:none;border-radius:0;mix-blend-mode:normal!important}
html[data-realce="foco"] .track::after{content:"";position:absolute;left:1px;right:1px;bottom:-2px;height:4px;border-radius:3px;
  background:linear-gradient(180deg,var(--foco-a),var(--foco-b))}
html[data-realce="foco"] .w.now{background:none;box-shadow:inset 0 -4px 0 -1px var(--foco-a)}
html[data-realce="foco"] .hl.wordhl{background:none;border-bottom:3px solid var(--foco-a);border-radius:0}

/* ── escolha nos ajustes ───────────────────────────────────────────────── */
.srow.realcerow{grid-template-columns:20px minmax(0,1fr)}
.realcepick{grid-column:1/-1;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:2px}
.realceopt{appearance:none;border:0;font:inherit;color:var(--ink);cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:7px;
  padding:12px 6px 9px;border-radius:14px;background:var(--fill);box-shadow:inset 0 0 0 1px transparent;transition:background .15s,box-shadow .15s}
.realceopt:hover{background:var(--fill-hi)}
.realceopt[aria-checked="true"]{box-shadow:inset 0 0 0 1.5px var(--cap-rim);background:var(--fill-hi)}
.realceopt .nm{font-size:12px;font-weight:650}
.rpv{font-size:13.5px;line-height:1.5;white-space:nowrap}
.rpv i{font-style:normal;padding:1px 2px}
.rp-capsula .rpv .a,.rp-capsula .rpv .c{background:var(--lav)}
.rp-capsula .rpv .b{background:var(--cap-fill);box-shadow:0 0 0 1px var(--cap-rim);border-radius:7px}
.rp-foco .rpv .a,.rp-foco .rpv .c{background:var(--lav)}
.rp-foco .rpv .b{box-shadow:inset 0 -3px 0 var(--foco-a)}
.rp-classico .rpv .a,.rp-classico .rpv .c{background:var(--mark)}
.rp-classico .rpv .b{background:var(--word);border-radius:4px}
@supports (corner-shape: squircle){ .rp-capsula .rpv .b{border-radius:12px;corner-shape:squircle} }