/* Praticar > Ouvir e ler: biblioteca de histórias, leitor com player grudado embaixo, balão de significado e perguntas */

/* biblioteca */
.ler-intro{display:grid;gap:10px}
.ler-intro>summary{cursor:pointer;font-weight:700;font-size:17px;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:12px;min-height:28px}
.ler-intro>summary::-webkit-details-marker{display:none}
.ler-intro>summary::after{content:"+";font:600 18px var(--f-mono);color:var(--muted)}
.ler-intro[open]>summary::after{content:"\2212"}
.ler-intro p{color:var(--ink-2);font-size:14.5px;max-width:72ch}
.ler-lvbar{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px}
.ler-lvbar .seg button{min-width:52px;min-height:40px;font-size:14px}
.ler-lvbar .seg small{margin-left:5px;font-size:11px;font-weight:500;opacity:.65}
.ler-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:12px}
.ler-card{display:grid;gap:6px;align-content:start;width:100%;min-width:0;text-align:left;border:1px solid var(--line);background:var(--surface);border-radius:var(--r-lg);padding:14px 16px;color:var(--ink)}
.ler-card:hover{border-color:var(--ink-2)}
.ler-card.done{border-color:color-mix(in srgb,var(--good) 40%,var(--line))}
.ler-card.rec{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent) inset}
.ler-card .t{font-size:17px;font-weight:700;line-height:1.25;overflow-wrap:anywhere}
.ler-card .p{font-size:14px;color:var(--ink-2)}
.ler-card .m{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;font-size:12.5px;color:var(--muted)}
.ler-ctop{display:flex;flex-wrap:wrap;align-items:center;gap:6px;min-height:22px}
.ler-rec{display:inline-flex;align-items:center;font-size:12px;font-weight:700;padding:3px 9px;border-radius:999px;background:var(--accent);color:var(--accent-ink)}

/* leitor: corpo em bloco (o player só gruda se o pai for alto), coluna de leitura confortável */
.ler-pb{display:block}
.ler-pb>*+*{margin-top:16px}
.ler-pb>:not(.ler-player){max-width:760px;margin-left:auto;margin-right:auto}
.ler-pb>:empty{display:none}
.ler-h{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.ler-sub{color:var(--ink-2);font-size:14px}
.ler-text{position:relative;display:grid;gap:4px}
.ler-para{display:grid;grid-template-columns:auto minmax(0,1fr);gap:10px;align-items:start;padding:10px 12px 10px 8px;border-radius:var(--r);transition:background .2s}
.ler-para.cur{background:var(--surface);box-shadow:inset 3px 0 0 var(--accent)}
.ler-para .audiobtn{width:38px;height:38px;margin-top:2px}
.ler-para .audiobtn svg{width:18px;height:18px}
.ler-en{font-size:18px;line-height:1.75;color:var(--ink);overflow-wrap:break-word}
.ler-pt{display:none;margin-top:6px;font-size:15px;line-height:1.55;color:var(--pt)}
.ler-text.pt-on .ler-pt{display:block}
.ler-w{cursor:pointer;border-radius:4px;transition:background .12s,color .12s}
@media (hover:hover){.ler-w:hover{background:var(--surface-2)}}
.ler-w.ls{background:color-mix(in srgb,var(--en) 12%,transparent)}
.ler-w.sel{background:color-mix(in srgb,var(--en) 24%,transparent);box-shadow:0 0 0 2px color-mix(in srgb,var(--en) 24%,transparent)}
.ler-w.on{background:var(--accent-soft);color:var(--accent-strong);box-shadow:0 0 0 2px var(--accent-soft)}
@media (max-width:420px){.ler-en{font-size:17px}.ler-para{padding:8px 8px 8px 4px;gap:8px}}

/* balão de significado */
.ler-pop{position:absolute;z-index:1;width:min(320px,100%);background:var(--surface);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow);padding:12px 14px;display:grid;gap:8px}
.ler-pophead{display:flex;align-items:flex-start;gap:8px}
.ler-pophead>.minw{flex:1}
.ler-popw{font-size:18px;font-weight:700;color:var(--en);overflow-wrap:anywhere}
.ler-popsrc{font-size:12px;color:var(--muted);text-transform:uppercase;letter-spacing:.06em;font-weight:600}
.ler-mean{font-size:15px;color:var(--ink)}
.ler-ent{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 8px;font-size:15px;color:var(--ink)}
.ler-popbtns{display:flex;flex-wrap:wrap;gap:8px}
.ler-popbtns .btn{min-height:40px}
.ler-pop .btn svg{width:16px;height:16px;flex:none}
.ler-pop .btn.on{border-color:var(--accent);color:var(--accent-strong)}

/* perguntas */
.ler-quiz{display:grid;gap:20px}
.ler-q{display:grid;gap:10px}
.ler-qq{display:flex;align-items:baseline;gap:10px;font-size:16px;font-weight:600}
.ler-qn{flex:none;width:24px;height:24px;border-radius:50%;background:var(--surface-2);display:inline-grid;place-items:center;font:600 12px var(--f-mono);color:var(--ink-2)}
.ler-opts{display:grid;gap:8px}
.ler-opt{display:flex;align-items:center;gap:10px;width:100%;min-height:46px;padding:10px 14px;text-align:left;border:1px solid var(--line);background:transparent;border-radius:var(--r);font-size:15px;color:var(--ink)}
.ler-opt:hover:not([disabled]){border-color:var(--ink-2)}
.ler-opt[disabled]{cursor:default;color:var(--muted)}
.ler-opt svg{width:18px;height:18px;flex:none}
.ler-opt.ok{border-color:var(--good);background:color-mix(in srgb,var(--good) 12%,transparent);color:var(--ink)}
.ler-opt.ok svg{color:var(--good)}
.ler-opt.bad{border-color:var(--crit);background:color-mix(in srgb,var(--crit) 10%,transparent);color:var(--ink)}
.ler-opt.bad svg{color:var(--crit)}
.ler-fb{font-size:14px;font-weight:600}

/* conclusão */
.ler-endbar{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px}
.ler-endbar .btn{min-height:44px}
.ler-endbar .btn svg{width:18px;height:18px}
.ler-sum{display:grid;gap:14px;border-color:color-mix(in srgb,var(--good) 40%,var(--line))}
.ler-sum h3{display:flex;align-items:center;gap:8px}
.ler-sum h3 svg{width:20px;height:20px;color:var(--good)}
.ler-kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
@media (max-width:560px){.ler-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}}
.ler-sum .btn{min-height:44px}

/* player grudado embaixo do painel */
.ler-pb .ler-player{position:sticky;bottom:0;z-index:2;margin:18px -20px -20px;padding:10px 20px calc(10px + env(safe-area-inset-bottom,0px));background:var(--surface);border-top:1px solid var(--line)}
.ler-player>*{max-width:760px;margin-left:auto;margin-right:auto}
.ler-player>*+*{margin-top:8px}
.ler-ctl{display:flex;align-items:center;gap:10px}
.ler-play{flex:none;width:56px;height:56px;border-radius:50%;border:0;background:var(--accent);color:var(--accent-ink);display:grid;place-items:center;padding:0}
.ler-play:hover{background:var(--accent-strong)}
.ler-play svg{width:26px;height:26px}
.ler-play.on{background:var(--ink);color:var(--bg)}
.ler-skip{flex:none;width:44px;height:44px}
.ler-skip svg{width:18px;height:18px}
.ler-stat{flex:1;min-width:0;font-size:13px;line-height:1.35;color:var(--ink-2)}
.ler-stat b{color:var(--accent-strong)}
.ler-turn{display:block;height:4px;margin-top:6px;border-radius:999px;background:var(--accent-soft);overflow:hidden}
.ler-turn i{display:block;height:100%;background:var(--accent);transform-origin:left center;animation:ler-turn linear forwards}
@keyframes ler-turn{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.ler-opts2{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.ler-opts2 .seg button{min-width:40px;min-height:36px;padding:6px 8px}
.ler-opts2 .chip{min-height:38px;padding:6px 12px}
@media (max-width:760px){.ler-pb .ler-player{margin:16px -16px -16px;padding:8px 16px calc(8px + env(safe-area-inset-bottom,0px))}}