/* ════════════════════════════════════════════════════════════════════════════
   AEDO · barra de comando em três partes
   À esquerda a marca e o modo (PDF/Texto); no meio, sempre no centro, os
   controles de leitura e o botão de recolher; à direita velocidade, voz, texto,
   "mais" e conta. A faixa de ritmo (frase, tempo) fica numa linha fina embaixo.
   Recolhida, a barra vira uma cápsula só com os controles de leitura.
   Vale para a doca de cima e a de baixo; no celular e nas docas laterais os
   grupos .lado somem (display:contents) e a disposição antiga continua.
   ════════════════════════════════════════════════════════════════════════════ */

.lado{display:contents}
#recolher,#relogio{display:none}
#relogio svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
html[data-info="off"] #relogio{display:none !important}
.strip{display:none !important}          /* frase e tempo moram no relógio */
#recolher svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
#recolher .r-out{display:none}
html[data-barra="recolhida"] #recolher .r-in{display:none}
html[data-barra="recolhida"] #recolher .r-out{display:inline}

/* ── três partes (docas de cima e de baixo, fora do celular) ── */
html:not([data-celular]):not([data-dock="left"]):not([data-dock="right"]) .bar-in{
  display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);
  align-items:center;column-gap:14px;row-gap:0;max-width:1320px;
}
html:not([data-celular]):not([data-dock="left"]):not([data-dock="right"]) .lado{
  display:flex;align-items:center;gap:6px 8px;min-width:0;flex-wrap:wrap;
}
html:not([data-celular]):not([data-dock="left"]):not([data-dock="right"]) .lado.esq{grid-column:1;grid-row:1;justify-self:start}
html:not([data-celular]):not([data-dock="left"]):not([data-dock="right"]) .centro{grid-column:2;grid-row:1;justify-self:center;margin:0;
  display:flex;align-items:center;gap:6px}
html:not([data-celular]):not([data-dock="left"]):not([data-dock="right"]) .grp.transport{margin:0}
html:not([data-celular]):not([data-dock="left"]):not([data-dock="right"]) .lado.dir{grid-column:3;grid-row:1;justify-self:end;justify-content:flex-end}
html:not([data-celular]):not([data-dock="left"]):not([data-dock="right"]) .grp.tools{margin-left:0;flex-wrap:nowrap}
html:not([data-celular]):not([data-dock="left"]):not([data-dock="right"]) .bar-brand{margin-right:0;width:auto}
/* o recolher fica pendurado à direita do grupo, para o play cair no centro exato */
html:not([data-celular]):not([data-dock="left"]):not([data-dock="right"]) .grp.transport{position:relative}
html:not([data-celular]):not([data-dock="left"]):not([data-dock="right"]) #recolher{display:inline-flex;color:var(--muted);
  position:absolute;right:10px;left:auto;top:50%;transform:translateY(-50%);margin:0}
html:not([data-celular]):not([data-dock="left"]):not([data-dock="right"]) #recolher:active{transform:translateY(-50%) scale(.94)}
/* o relógio é o espelho do recolher, à esquerda do "anterior" */
html:not([data-celular]):not([data-dock="left"]):not([data-dock="right"]) #relogio{display:inline-flex;color:var(--muted);
  position:absolute;right:100%;top:50%;transform:translateY(-50%);margin-right:6px}
html:not([data-celular]):not([data-dock="left"]):not([data-dock="right"]) #relogio:active{transform:translateY(-50%) scale(.94)}
#relogio:hover,#relogio[aria-expanded="true"]{color:var(--accent)}
html:not([data-celular]):not([data-dock="left"]):not([data-dock="right"]) #recolher:hover{color:var(--ink)}

/* faixa de ritmo: linha fina sob as três partes, centrada como o player */
html:not([data-celular]):not([data-dock="left"]):not([data-dock="right"]) .strip{
  grid-column:1 / -1;grid-row:2;justify-content:center;flex:none;padding:0 4px 1px;gap:4px 18px;
}
html:not([data-celular]):not([data-dock="left"]):not([data-dock="right"]) .strip span{font-size:11px}

/* ── trilha de progresso: presa na borda da cápsula voltada para o texto ──
   Recuada do raio dos cantos, para não sobrar fora da curva. Em cima → borda
   de baixo; embaixo → borda de cima; à esquerda → borda direita; à direita →
   borda esquerda. */
html .bar-in > .rail{
  position:absolute;z-index:2;margin:0;max-width:none;width:auto;height:3px;
  top:auto;bottom:0;left:30px;right:30px;border-radius:999px;overflow:hidden;background:var(--fill-hi);
}
html .bar-in > .rail i{width:var(--prog,0%);height:100%;transition:width .25s ease,height .25s ease}
html[data-dock="bottom"] .bar-in > .rail{bottom:auto;top:0}
@media (min-width:641px){
  html[data-dock="left"] .bar-in > .rail,
  html[data-dock="right"] .bar-in > .rail{top:32px;bottom:32px;width:3px;height:auto}
  html[data-dock="left"] .bar-in > .rail{left:auto;right:0}
  html[data-dock="right"] .bar-in > .rail{right:auto;left:0}
  html:is([data-dock="left"],[data-dock="right"]) .bar-in > .rail i{width:100%;height:var(--prog,0%);
    background:linear-gradient(180deg,var(--accent),var(--accent2),var(--ic-to))}
  html:is([data-dock="left"],[data-dock="right"])[data-palette^="nanquim-"] .bar-in > .rail i{background:var(--pop)}
  html:is([data-dock="left"],[data-dock="right"])[data-palette="nanquim-tinta"] .bar-in > .rail i{
    background:linear-gradient(180deg,#B4C3FF,#7D96FF 60%,#5B7CFF)}
}

/* telas médias: a velocidade fica só no número (o ajuste fino abre ao tocar) */
@media (max-width:1180px){
  html:not([data-celular]) .grp.rate #ratedown,
  html:not([data-celular]) .grp.rate #rateup{display:none}
  html:not([data-celular]) .grp.voice .sel{max-width:128px}
}
@media (max-width:780px){
  /* Fold aberto e tablets pequenos: a voz fica no painel (aba Voz) */
  html:not([data-celular]) .grp.voice{display:none}
}
@media (max-width:980px){
  html:not([data-celular]) .seg button svg{display:none}
  html:not([data-celular]) #fsdown,html:not([data-celular]) #fsup{display:none}
}

/* ── recolhida: uma cápsula só com os controles de leitura ── */
html[data-tela="leitura"][data-barra="recolhida"]:not([data-celular]):not([data-dock="left"]):not([data-dock="right"]) .bar-in{
  display:flex;width:max-content;margin:0 auto;padding:6px 8px;gap:4px;
}
html[data-tela="leitura"][data-barra="recolhida"]:not([data-celular]):not([data-dock="left"]):not([data-dock="right"]) :is(.lado,.strip){display:none}
html[data-tela="leitura"][data-barra="recolhida"]:not([data-celular]):not([data-dock="left"]):not([data-dock="right"]) #recolher{color:var(--accent);position:static;transform:none;margin-left:2px}
html[data-tela="leitura"][data-barra="recolhida"]:not([data-celular]):not([data-dock="left"]):not([data-dock="right"]) #recolher::before{display:none}
html[data-tela="leitura"][data-barra="recolhida"]:not([data-celular]):not([data-dock="left"]):not([data-dock="right"]) #relogio{position:static;transform:none;margin-right:2px}

/* recolhida no computador: a cápsula sai do fluxo e flutua sobre a folha;
   folhas e páginas ocupam a altura e a largura que a barra usava. Em repouso
   (mouse parado), ela some; qualquer movimento, toque ou tecla a traz de volta. */
html[data-tela="leitura"][data-barra="recolhida"]:not([data-celular]):not([data-dock="left"]):not([data-dock="right"]) .bar{
  position:fixed;left:0;right:0;top:0;z-index:40}
html[data-tela="leitura"][data-barra="recolhida"][data-dock="bottom"]:not([data-celular]):not([data-dock="left"]):not([data-dock="right"]) .bar{top:auto;bottom:0}
html[data-tela="leitura"][data-barra="recolhida"][data-dock="bottom"]:not([data-celular]) body{padding-bottom:12px}
html[data-tela="leitura"][data-barra="recolhida"]:not([data-celular]):not([data-dock="left"]):not([data-dock="right"]) .wrap{max-width:none}
html[data-tela="leitura"][data-barra="recolhida"]:not([data-celular]):not([data-dock="left"]):not([data-dock="right"]):not([data-dock="bottom"]):not([data-book]) .wrap{padding-top:66px}
html[data-tela="leitura"][data-barra="recolhida"]:not([data-celular]) .bar-in{transition:opacity .35s ease,transform .35s cubic-bezier(.2,.8,.2,1)}
html[data-tela="leitura"][data-barra="recolhida"][data-repouso]:not([data-celular]) .bar-in{opacity:0;transform:translateY(-10px);pointer-events:none}
html[data-tela="leitura"][data-barra="recolhida"][data-repouso][data-dock="bottom"]:not([data-celular]) .bar-in{transform:translateY(10px)}
html[data-tela="leitura"][data-barra="recolhida"][data-repouso][data-dock="left"]:not([data-celular]) .bar-in{transform:translateX(-10px)}
html[data-tela="leitura"][data-barra="recolhida"][data-repouso][data-dock="right"]:not([data-celular]) .bar-in{transform:translateX(10px)}
@media (prefers-reduced-motion:reduce){html[data-barra="recolhida"] .bar-in{transition:opacity .2s linear}}

/* celular: o botão fica no player de baixo; recolher esconde a cápsula de cima */
html[data-celular] #recolher{display:inline-flex}
html[data-celular][data-tela="leitura"][data-barra="recolhida"] .bar-in{
  background:none;box-shadow:none;padding:0;min-height:3px;-webkit-backdrop-filter:none;backdrop-filter:none}
html[data-celular][data-tela="leitura"][data-barra="recolhida"] .bar-in::before{display:none}
html[data-celular][data-tela="leitura"][data-barra="recolhida"] .bar-in > :not(.rail){display:none !important}

/* ── docas laterais: o botão de recolher fica embaixo do "próxima"; recolhida,
   a doca vira uma cápsula estreita só com os controles de leitura, centrada
   na mesma borda, e a folha ganha a largura que a doca usava ── */
@media (min-width:641px){
  html:is([data-dock="left"],[data-dock="right"]):not([data-celular]) :is(#recolher,#relogio){display:inline-flex;color:var(--muted)}
  html[data-tela="leitura"][data-barra="recolhida"]:is([data-dock="left"],[data-dock="right"]):not([data-celular]) .bar{
    top:50%;bottom:auto;height:auto;width:auto;transform:translateY(-50%);padding-top:0;padding-bottom:0}
  html[data-tela="leitura"][data-barra="recolhida"]:is([data-dock="left"],[data-dock="right"]):not([data-celular]) .bar-in{
    height:auto;overflow:visible;padding:10px 6px;gap:4px;border-radius:999px}
  html[data-tela="leitura"][data-barra="recolhida"]:is([data-dock="left"],[data-dock="right"]):not([data-celular]) :is(.lado,.strip){display:none}
  html[data-tela="leitura"][data-barra="recolhida"]:is([data-dock="left"],[data-dock="right"]):not([data-celular]) #recolher{color:var(--accent)}
  html[data-tela="leitura"][data-barra="recolhida"]:is([data-dock="left"],[data-dock="right"]):not([data-celular]) .bar-in > .rail{top:26px;bottom:26px}
  html[data-tela="leitura"][data-barra="recolhida"][data-dock="left"]:not([data-celular]) body{padding-left:12px}
  html[data-tela="leitura"][data-barra="recolhida"][data-dock="right"]:not([data-celular]) body{padding-right:12px}
}

/* celular: relógio e recolher nas pontas do player */
html[data-celular] #relogio{display:inline-flex;color:var(--muted)}

/* ── frase e tempo: um balão de vidro que nasce do relógio ── */
.grp.transport{position:relative}
.ritmo{position:absolute;z-index:50;left:50%;top:calc(100% + 16px);transform:translateX(-50%);
  display:flex;align-items:center;gap:6px 14px;white-space:nowrap;
  padding:8px 14px;border-radius:999px;font-size:12px;font-weight:600;color:var(--muted);
  background:var(--glass-strong);-webkit-backdrop-filter:blur(var(--glass-blur)) saturate(190%);backdrop-filter:blur(var(--glass-blur)) saturate(190%);
  box-shadow:inset 0 1px 0 var(--spec),inset 0 0 0 1px var(--rim),0 14px 34px -14px rgba(11,12,16,.4);
  animation:ritmoAbre .18s ease both}
.ritmo[hidden]{display:none}
.ritmo #pos,.ritmo #eta{font-variant-numeric:tabular-nums}
.ritmo #eta{color:var(--accent)}
@keyframes ritmoAbre{from{opacity:0;transform:translateX(-50%) translateY(-4px)}to{opacity:1;transform:translateX(-50%)}}
/* barra embaixo e player do celular: o balão sobe */
html[data-dock="bottom"] .ritmo,html[data-celular] .ritmo{top:auto;bottom:calc(100% + 16px)}
/* docas laterais: o balão sai para o lado da folha */
@media (min-width:641px){
  html[data-dock="left"] .ritmo{left:calc(100% + 18px);top:50%;transform:translateY(-50%);animation:none}
  html[data-dock="right"] .ritmo{left:auto;right:calc(100% + 18px);top:50%;transform:translateY(-50%);animation:none}
}
html[data-celular] .ritmo{position:fixed;left:50%;right:auto;top:auto;bottom:calc(84px + var(--sab));
  white-space:normal;flex-wrap:wrap;justify-content:center;width:max-content;max-width:calc(100vw - 32px);border-radius:18px}


/* ════════════════════════════════════════════════════════════════════════════
   0.9.5 · centro da barra: [☰ fl. 12 / 93] ⏮ ▶ ⏭ [1,05×]
   O chip de navegação junta posição, ir para a folha, sumário e régua; a
   velocidade é um chip só (o ajuste fino abre ao tocar); o tamanho do texto
   foi para o painel ⋯; recolher fica na ponta direita, depois de um traço.
   ════════════════════════════════════════════════════════════════════════════ */
.centro{display:contents}
html:not([data-celular]):not([data-dock="left"]):not([data-dock="right"]) .bar-in > .centro{position:static;z-index:auto}
#ratedown,#rateup,#fsdown,#fsup{display:none !important}

/* símbolos de navegação maiores (o botão não muda de tamanho) */
#prev svg,#next svg{width:18px;height:18px}
#play svg{width:21px;height:21px}
button.icon.sm#prev,button.icon.sm#next{padding:7px}

.navchip{appearance:none;border:0;cursor:pointer;font:inherit;color:var(--ink);
  display:inline-flex;align-items:center;gap:6px;height:36px;padding:0 12px 0 10px;margin-right:6px;
  border-radius:999px;background:var(--fill);font-size:13px;font-weight:650;line-height:1;
  font-variant-numeric:tabular-nums;white-space:nowrap;transition:background .18s ease,color .18s ease,transform .18s cubic-bezier(.2,.8,.2,1)}
.navchip svg{width:16px;height:16px;flex:none}
.navchip .nc-tot{color:var(--muted);font-weight:500}
.navchip .nc-tot:empty{display:none}
.navchip:hover{background:var(--fill-hi)}
.navchip:active{transform:scale(.96)}
.navchip[aria-expanded="true"]{background:color-mix(in srgb,var(--pop,var(--accent)) 16%,var(--fill));color:var(--accent)}
.navchip:focus-visible{outline:2px solid var(--accent2);outline-offset:2px}
.centro #rateval,.player #rateval{height:36px;padding:0 12px;min-width:0;margin-left:6px;font-size:13px;font-weight:700;line-height:1}

/* recolher na ponta direita, separado por um traço fino */
html:not([data-celular]):not([data-dock="left"]):not([data-dock="right"]) .lado.dir{padding-right:46px}
html:not([data-celular]):not([data-dock="left"]):not([data-dock="right"]) #recolher::before{
  content:"";position:absolute;left:-7px;top:8px;bottom:8px;width:1px;background:var(--line)}

/* docas laterais: o chip mostra só a folha */
@media (min-width:641px){
  html:is([data-dock="left"],[data-dock="right"]):not([data-celular]) .navchip{margin:0 0 6px;padding:0 9px;height:32px;font-size:12px}
  html:is([data-dock="left"],[data-dock="right"]):not([data-celular]) .navchip :is(svg,.nc-tot){display:none}
  html:is([data-dock="left"],[data-dock="right"]):not([data-celular]) #rateval{margin:6px 0 0}
}

/* celular: [☰ fl. 12] ⏮ ▶ ⏭ [1,05×] ⤡ no player */
html[data-celular] .player :is(.grp.transport,.grp.rate){display:contents}
html[data-celular] .navchip{height:40px;margin-right:4px;padding:0 11px 0 9px}
html[data-celular] .navchip .nc-tot{display:none}
html[data-celular] .player #rateval{height:40px;margin-left:2px}
html[data-celular] .player #recolher{color:var(--muted)}

/* ════════════════ régua de capítulos ════════════════
   Mora junto à borda da barra voltada para o texto. Aparece com o mouse sobre
   a barra (ou o foco do teclado nela) e fica fixa com R. Cada trecho é um
   capítulo, do tamanho do capítulo, e enche conforme a leitura avança. */
#regua{position:absolute;z-index:3;left:28px;right:28px;top:100%;padding-top:8px;
  visibility:hidden;opacity:0;pointer-events:none;transition:opacity .18s ease,visibility 0s linear .18s}
html[data-dock="bottom"] #regua{top:auto;bottom:100%;padding:0 0 8px}
#regua.vazia{display:none}
html:not([data-tela="leitura"]) #regua,html:not([data-tela="leitura"]) .fiobtn{display:none !important}
html:is([data-dock="left"],[data-dock="right"]):not([data-celular]) #regua{display:none}
html[data-regua="fixa"] #regua,
html[data-regua-toque] #regua{visibility:visible;opacity:1;pointer-events:auto;transition-delay:0s}
html[data-barra="recolhida"]:not([data-celular]) #regua{left:50%;right:auto;width:min(560px,calc(100vw - 32px));margin-left:calc(min(560px,calc(100vw - 32px)) / -2)}
.rg-in{display:flex;align-items:center;gap:12px;padding:7px 16px;border-radius:18px;font-size:12px;font-weight:600;color:var(--muted);
  background:var(--glass-strong);-webkit-backdrop-filter:blur(var(--glass-blur)) saturate(190%);backdrop-filter:blur(var(--glass-blur)) saturate(190%);
  box-shadow:inset 0 1px 0 var(--spec),inset 0 0 0 1px var(--rim),0 14px 34px -16px rgba(11,12,16,.4)}
.rg-cap{color:var(--ink);font-weight:700;max-width:240px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rg-cap:empty{display:none}
.rg-trilho{flex:1;min-width:120px;display:flex;align-items:center;gap:3px;height:24px}
.rg-seg{appearance:none;border:0;background:none;padding:0;margin:0;cursor:pointer;position:relative;flex:1 1 0;min-width:4px;height:24px}
.rg-seg::before,.rg-seg i{content:"";position:absolute;left:0;top:50%;height:6px;margin-top:-3px;border-radius:4px;transition:height .18s ease,margin .18s ease,width .35s linear}
.rg-seg::before{right:0;background:var(--fill-hi)}
.rg-seg i{width:0;background:linear-gradient(90deg,var(--accent2),var(--accent))}
html[data-palette="nanquim-tinta"] .rg-seg i{background:linear-gradient(90deg,#7D96FF,#5B7CFF)}
.rg-seg.on::before,.rg-seg.on i,.rg-seg:hover::before,.rg-seg:hover i{height:11px;margin-top:-5.5px}
.rg-seg:hover::before{background:color-mix(in srgb,var(--ink) 18%,var(--fill-hi))}
.rg-seg:focus-visible{outline:2px solid var(--accent2);outline-offset:1px;border-radius:6px}
.rg-tempo{white-space:nowrap;font-variant-numeric:tabular-nums}
.rg-tempo:empty{display:none}
@media (prefers-reduced-motion:reduce){#regua,.rg-seg::before,.rg-seg i{transition:none}}

/* alvo de toque na borda (iPad, celular): mostra a régua por alguns segundos */
.fiobtn{appearance:none;border:0;background:none;padding:0;margin:0;cursor:pointer;position:absolute;z-index:4;
  left:30px;right:30px;height:12px;bottom:-6px}
html[data-dock="bottom"] .fiobtn{bottom:auto;top:-6px}
html:is([data-dock="left"],[data-dock="right"]):not([data-celular]) .fiobtn{display:none}
.fiobtn .fio{display:none}
.fiobtn:focus-visible{outline:2px solid var(--accent2);outline-offset:-2px;border-radius:6px}
/* no computador, o fio de progresso é o botão: passar o mouse o engrossa um pouco; clicar mostra ou esconde a régua */
html:not([data-celular]) .fiobtn:hover ~ .rail,html:not([data-celular]) .bar-in:has(.fiobtn:hover) > .rail{height:5px}

/* celular: a régua flutua sobre o player; o fio de progresso fica no topo dele */
html[data-celular] #regua{left:0;right:0;top:auto;bottom:100%;padding:0 0 8px}
html[data-celular] .bar-in > .rail{display:none}
html[data-celular] .fiobtn{left:28px;right:28px;top:-4px;bottom:auto;height:16px}
html[data-celular] .fiobtn .fio{display:block;position:absolute;left:0;right:0;top:8px;height:3px;border-radius:999px;background:var(--fill-hi);overflow:hidden}
html[data-celular] .fiobtn .fio i{display:block;height:100%;width:0;border-radius:inherit;background:var(--pop,var(--accent));transition:width .3s linear}
html[data-celular] .rg-in{padding:8px 12px;gap:10px}
html[data-celular] .rg-cap{max-width:120px}
html[data-celular][data-palette="nanquim-tinta"] .fiobtn .fio i{background:linear-gradient(90deg,#B4C3FF,#7D96FF 60%,#5B7CFF)}

/* telas médias (iPad em pé, Fold aberto): tudo numa linha só */
@media (max-width:1100px){
  html:not([data-celular]) .navchip .nc-tot{display:none}
  html:not([data-celular]) .navchip{padding:0 11px 0 9px}
}
@media (max-width:900px){
  html:not([data-celular]) .grp.voice .sel{max-width:112px}
  html[data-tela="leitura"]:not([data-celular]):not([data-dock="left"]):not([data-dock="right"]) .bar-brand b{display:none}
  html:not([data-celular]):not([data-dock="left"]):not([data-dock="right"]) .bar-in{column-gap:8px}
  html:not([data-celular]):not([data-dock="left"]):not([data-dock="right"]) .centro{gap:2px}
  html:not([data-celular]) .navchip{margin-right:2px}
  html:not([data-celular]) .centro #rateval{margin-left:2px}
}
html[data-celular] .player #play{flex:none}
@media (max-width:360px){
  html[data-celular] .navchip svg{display:none}
  html[data-celular] .navchip{padding:0 10px}
  html[data-celular] .player #rateval{padding:0 9px}
}


/* 0.9.6 · o recolher fica acima da área do lado direito (antes ela cobria o botão) */
html:not([data-celular]):not([data-dock="left"]):not([data-dock="right"]) #recolher{z-index:3}
/* na leitura, a bolinha da conta sai da barra (fica no painel ⋯); no lugar, claro/escuro */
#temabarra{display:none}
html[data-tela="leitura"] #temabarra{display:inline-flex}
html[data-tela="leitura"] #conta{display:none !important}
#temabarra svg{width:19px;height:19px}
#temabarra[aria-pressed="true"]{background:transparent;color:var(--ink)}
#temabarra:hover{background:var(--fill)}
html[data-celular] #temabarra{order:30}

/* 0.9.8 · a régua só aparece quando pedida (clique no fio, R, ou a chave no Navegar) */
.bar-in > .rail{transition:height .15s ease}