/* Leitor: texto, barra superior, barra de controles ("player") e "A seguir" */
body[data-view="read"] { background: #0f0f0f; }
.reader { min-height: 100vh; }
.reader-loading, .reader-error { min-height: 100vh; display: grid; place-content: center; justify-items: center; gap: 1rem; text-align: center; }

.reader-top {
  position: fixed; top: 0; left: 0; right: 0; z-index: 60; display: flex; align-items: center; gap: .8rem;
  padding: .7rem max(var(--pad), .8rem); background: linear-gradient(rgba(0, 0, 0, .9), transparent); transition: transform .3s;
}
.reader-top.hide { transform: translateY(-100%); }
.tool { width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; font-size: 1.6rem; flex: none; }
.tool:hover { background: rgba(255, 255, 255, .12); }
.tool.txt { font-size: .95rem; font-weight: 700; width: auto; padding: 0 .7rem; border-radius: 999px; }
.reader-title { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; }
.reader-title small { color: var(--muted); font-size: .78rem; }
.reader-title strong { font-size: 1.05rem; }
.reader-tools { margin-left: auto; display: flex; align-items: center; gap: .3rem; }

.reader-body { max-width: 740px; margin: 0 auto; padding: 6.5rem 1.3rem 11rem; }
.reader-heading { text-align: center; margin-bottom: 2.4rem; }
.reader-heading h1 { font-size: clamp(2rem, 6vw, 3.2rem); font-weight: 800; letter-spacing: -.01em; }
.reader-heading p { color: var(--muted); margin-top: .4rem; font-size: .95rem; }

.reader-text { font-family: var(--font-read); font-size: var(--fs, 1.2rem); line-height: 1.85; color: #e7e7e7; hyphens: auto; }
.v { cursor: pointer; border-radius: 3px; transition: background .2s; -webkit-tap-highlight-color: transparent; }
.v sup { font-family: var(--font); font-size: .58em; font-weight: 700; color: var(--accent-2); margin-right: .05em; vertical-align: super; }
.v:hover { background: rgba(255, 255, 255, .05); }
.v.sel { background: rgba(228, 32, 44, .28); }
.v.saved { box-shadow: inset 0 -2px 0 var(--gold); }
.v.speaking { background: rgba(242, 193, 78, .2); }
.v.flash { animation: flash 2.6s ease-out; }
@keyframes flash { 0%, 40% { background: rgba(242, 193, 78, .4); } 100% { background: transparent; } }
.sentinel { height: 1px; }

/* ---------- barra inferior ---------- */
.reader-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; background: rgba(15, 15, 15, .96); backdrop-filter: blur(10px);
  border-top: 1px solid var(--line); padding-bottom: env(safe-area-inset-bottom);
}
.bar-progress { display: block; width: 100%; height: 8px; background: rgba(255, 255, 255, .16); position: relative; }
.bar-progress i { display: block; height: 100%; background: var(--accent); border-radius: 0 3px 3px 0; }
.bar-progress:hover { height: 11px; }
.bar-row { max-width: 740px; margin: 0 auto; padding: .5rem 1rem .6rem; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; }
.bar-center { display: flex; align-items: center; gap: .5rem; }
.ctl { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; font-size: 1.7rem; }
.ctl:hover:not(:disabled) { background: rgba(255, 255, 255, .12); }
.ctl.play { width: 56px; height: 56px; background: #fff; color: #000; font-size: 1.9rem; }
.ctl.play:hover { background: rgba(255, 255, 255, .8) !important; }
.ctl.play.on { background: var(--accent); color: #fff; }
.ctl.label { width: auto; padding: 0 .8rem; border-radius: 999px; display: flex; gap: .5rem; font-size: 1.2rem; justify-self: start; }
.ctl.label span { font-size: .92rem; font-weight: 700; }
.ctl.txt { width: auto; padding: 0 .9rem; border-radius: 999px; font-size: .95rem; font-weight: 700; justify-self: end; }

/* ---------- seleção de versículos ---------- */
.sel-bar {
  position: fixed; left: 50%; bottom: 92px; transform: translateX(-50%); z-index: 70; display: flex; align-items: center; gap: .2rem;
  background: #2b2b2b; border-radius: 999px; padding: .35rem .5rem; box-shadow: 0 10px 30px rgba(0, 0, 0, .6); max-width: 96vw; overflow-x: auto;
}
.sel-count { padding: 0 .8rem; font-size: .85rem; color: var(--muted); white-space: nowrap; }
.sel-btn { display: flex; align-items: center; gap: .4rem; padding: .5rem .8rem; border-radius: 999px; font-size: .88rem; font-weight: 600; white-space: nowrap; }
.sel-btn svg { font-size: 1.15rem; }
.sel-btn:hover { background: rgba(255, 255, 255, .12); }
.sel-btn.on { color: var(--gold); }

/* ---------- "A seguir" ---------- */
.next-up { display: flex; margin-top: 3rem; background: #1c1c1c; border-radius: 10px; overflow: hidden; animation: rise .5s ease both; }
.next-up > h3 { padding: 2rem; text-align: center; width: 100%; font-size: 1.4rem; }
.next-art { position: relative; flex: 0 0 38%; min-height: 170px; }
.next-art .card-ghost { font-size: 6rem; }
.next-info { padding: 1.2rem 1.4rem; display: flex; flex-direction: column; gap: .45rem; min-width: 0; }
.next-info small { color: var(--accent-2); font-weight: 800; letter-spacing: .18em; font-size: .72rem; }
.next-info h3 { font-size: 1.5rem; }
.next-info p { color: var(--muted); font-family: var(--font-read); line-height: 1.5; font-size: .95rem; }
.next-actions { display: flex; align-items: center; gap: .7rem; flex-wrap: wrap; margin-top: .4rem; }
.countdown { color: var(--muted); font-size: .88rem; }
@keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

@media (max-width: 560px) {
  .next-up { flex-direction: column; }
  .next-art { flex-basis: auto; min-height: 110px; }
  .reader-tools .tool.txt { padding: 0 .5rem; }
  .bar-row { padding-inline: .4rem; }
}