/* =====================================================================
   /biblia — ler a Bíblia escolhendo a versão
   =====================================================================
   Coluna estreita, como a da parashá: aqui a pessoa vai LER, e linha
   comprida cansa. O seletor de versão fica grudado no topo, porque
   trocar de versão é o motivo de a página existir.

   ⚠️ Todo <b> dentro de <p> aqui é inline e continua inline.
   Ver ERROS.md 11 — o erro que eu cometi duas vezes no mesmo dia.
   ===================================================================== */

.bb-volta{max-width:820px;margin:22px auto 0;padding:0 22px;font-size:13px}
.bb-volta a{color:var(--tx2)}
.bb-volta a:hover{color:var(--acc)}

/* ------------------------------------------------------------- topo */
.bb-topo{max-width:820px;margin:26px auto 0;padding:0 22px;text-align:center}
.bb-etq{font-size:10px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--acc);font-weight:800}
.bb-topo h1{font-size:clamp(30px,6vw,46px);line-height:1.1;margin:9px 0 0;
  letter-spacing:-.02em}
.bb-sub{margin:10px 0 0;font-size:15px;color:var(--tx2)}

.bb-ctopo{max-width:820px;margin:18px auto 0;padding:0 22px;text-align:center}
.bb-ctopo h1{font-size:clamp(26px,5vw,38px);margin:0;letter-spacing:-.02em}

.bb-pular{display:flex;gap:8px;justify-content:center;margin:14px 0 0}
.bb-pular select{background:var(--surf2);color:var(--tx);font:inherit;font-size:13px;
  border:1px solid var(--linha);border-radius:8px;padding:7px 10px;max-width:200px}

/* ------------------------------------------------------- o aviso */
.bb-aviso{max-width:820px;margin:26px auto 0;padding:18px 20px;
  background:var(--surf);border:1px solid var(--linha);
  border-left:3px solid var(--acc);border-radius:var(--raio)}
.bb-aviso > b{display:block;font-size:13px;color:var(--acc);margin-bottom:9px}
.bb-aviso p,.bb-aviso li{margin:0 0 9px;font-size:13.5px;line-height:1.65;color:var(--tx2)}
.bb-aviso p:last-child{margin-bottom:0}
.bb-aviso p b,.bb-aviso li b{color:var(--tx);font-weight:600}
.bb-aviso ul{margin:0 0 9px;padding-left:20px}

/* --------------------------------------------------- as três versões */
.bb-versoes,.bb-faltam,.bb-indice{max-width:820px;margin:38px auto 0;padding:0 22px}
.bb-versoes h2,.bb-faltam h2,.bb-indice h2{font-size:13px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--tx3);margin:0 0 14px;font-weight:800}
.bb-faltam > p,.bb-divisao{margin:-6px 0 14px;font-size:13px;color:var(--tx2)}
.bb-divisao b{color:var(--tx)}

.bb-vgrade{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
.bb-vcard{background:var(--surf);border:1px solid var(--linha);border-radius:var(--raio);
  padding:16px 16px 14px}
.bb-vcard.rascunho{border-style:dashed}
.bb-vcard h3{margin:0 0 8px;font-size:16px;line-height:1.25}
.bb-vedicao{margin:0 0 10px;font-size:12.5px;line-height:1.55;color:var(--tx2)}
.bb-vlic{margin:0 0 8px;font-size:12px;line-height:1.5;color:var(--tx3)}
.bb-vlic b{color:var(--acc);font-weight:600}
.bb-vconta{margin:0;font-size:11.5px;color:var(--tx3)}
.bb-vrascunho{margin:8px 0 0;font-size:12px;color:var(--vivo)}
.bb-vrascunho b{color:var(--vivo);font-weight:700}

.bb-semranking{margin:14px 0 0;font-size:13px;line-height:1.65;color:var(--tx2)}
.bb-semranking b{color:var(--tx)}

/* ------------------------------------------------- o que não temos */
.bb-fgrade{display:grid;gap:8px;grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}
.bb-falta{display:block;padding:11px 13px;background:var(--surf);
  border:1px solid var(--linha);border-radius:8px;transition:border-color .15s}
.bb-falta:hover{border-color:var(--acc)}
.bb-falta b{display:block;font-size:13px;color:var(--tx);font-weight:600;line-height:1.35}
.bb-falta i{display:block;margin-top:3px;font-size:11.5px;font-style:normal;color:var(--tx3)}

/* --------------------------------------------------- índice de livros */
.bb-lgrade{display:grid;gap:6px;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));
  margin-bottom:26px}
.bb-livro{display:flex;justify-content:space-between;align-items:baseline;gap:8px;
  padding:9px 12px;background:var(--surf);border:1px solid var(--linha);
  border-radius:8px;transition:border-color .15s,background .15s}
.bb-livro:hover{border-color:var(--acc);background:var(--surf2)}
.bb-livro b{font-size:13.5px;color:var(--tx);font-weight:500}
.bb-livro i{font-size:11px;font-style:normal;color:var(--tx3)}

/* ------------------------------------------------------- o seletor */
.bb-seletor{position:sticky;top:0;z-index:5;display:flex;gap:6px;flex-wrap:wrap;
  justify-content:center;max-width:820px;margin:20px auto 0;padding:12px 22px;
  background:var(--bg);border-bottom:1px solid var(--linha)}
.bb-btn{font:inherit;font-size:12.5px;font-weight:600;color:var(--tx2);cursor:pointer;
  background:var(--surf);border:1px solid var(--linha);border-radius:999px;
  padding:8px 14px;transition:all .15s}
.bb-btn:hover{color:var(--tx);border-color:var(--tx3)}
.bb-btn.on{color:var(--bg);background:var(--acc);border-color:var(--acc)}
.bb-btn i{font-style:normal;opacity:.7;font-weight:400}

/* --------------------------------------------------------- o texto */
.bb-corpo{max-width:820px;margin:26px auto 0;padding:0 22px}
.bb-emrevisao{margin:0 0 18px;padding:10px 13px;font-size:12.5px;line-height:1.55;
  color:var(--vivo);background:var(--surf);border:1px dashed var(--linha);border-radius:8px}
.bb-emrevisao b{color:var(--vivo);font-weight:700}

.bb-v{display:flex;gap:11px;margin:0 0 13px;font-size:16.5px;line-height:1.75;color:var(--tx)}
.bb-v > b{flex:0 0 26px;text-align:right;font-size:11.5px;line-height:2.5;
  color:var(--tx3);font-weight:600}

/* ------------------------------------------------------------ passos */
.bb-passos{display:flex;gap:10px;max-width:820px;margin:34px auto 0;padding:0 22px}
.bb-passo{flex:1;padding:13px 15px;background:var(--surf);border:1px solid var(--linha);
  border-radius:var(--raio);transition:border-color .15s}
.bb-passo:hover{border-color:var(--acc)}
.bb-passo.dir{text-align:right}
.bb-passo.vazio{background:none;border:none;pointer-events:none}
.bb-passo i{display:block;font-size:11px;font-style:normal;color:var(--tx3)}
.bb-passo b{display:block;margin-top:3px;font-size:14px;color:var(--tx);font-weight:600}

/* ------------------------------------------------------------ fonte */
.bb-fonte{max-width:820px;margin:38px auto 46px;padding:18px 20px;
  background:var(--surf);border:1px solid var(--linha);border-radius:var(--raio)}
.bb-fonte > b{display:block;font-size:12px;letter-spacing:.06em;color:var(--tx3);
  margin-bottom:11px;text-transform:uppercase}
.bb-fonte p{margin:0 0 9px;font-size:12.5px;line-height:1.65;color:var(--tx3)}
.bb-fonte p:last-child{margin-bottom:0}
.bb-fonte p > span{display:inline-block;min-width:0;margin-right:6px;
  font-size:12.5px;color:var(--tx);font-weight:600}
.bb-fonte p b{color:var(--acc);font-weight:600}
.bb-fonte p i{font-style:italic;color:var(--vivo)}
.bb-fonte a{color:var(--tx2);text-decoration:underline}
.bb-fonte a:hover{color:var(--acc)}
.bb-nota{border-top:1px solid var(--linha);padding-top:10px;margin-top:12px !important}

/* =====================================================================
   A BÍBLIA NAS TRÊS TELAS
   =====================================================================
   O que existia aqui antes ENCOLHIA o texto no celular: 15,5px para ler
   Escritura no telefone. Isso é computador espremido, e é o contrário
   do que a tela pequena pede.

   Na tela pequena o texto tem de CRESCER: a distância do olho é a
   mesma, a largura é um terço, e não existe mouse para ficar caçando
   linha. Quem lê capítulo inteiro no ônibus precisa de letra grande e
   linha larga, não de mais coisa cabendo.
   ===================================================================== */

/* ---------------------------------------------------------- o tablet
   Em pé sobra largura: o texto ganha corpo sem virar linha comprida
   demais, que cansa a vista tanto quanto letra pequena. */
@media (min-width:701px) and (max-width:1024px){
  .bb-v{font-size:17.5px;line-height:1.8}
  .bb-corpo,.bb-ctopo,.bb-seletor,.bb-passos,.bb-fonte,.bb-volta{max-width:640px}
}

/* --------------------------------------------------------- o celular */
@media (max-width:700px){
  .bb-volta{margin-top:14px;padding:0 16px}
  .bb-ctopo{margin-top:12px;padding:0 16px}
  .bb-ctopo h1{font-size:26px}

  /* Livro e capítulo em duas caixas largas, do tamanho do dedo.
     Antes eram dois seletores pequenos lado a lado, herdados da tela
     grande — no telefone o dedo erra o alvo e abre o errado. */
  .bb-pular{gap:8px;margin-top:12px}
  .bb-pular select{flex:1;min-height:46px;font-size:15px;padding:0 12px;
    border-radius:10px;text-align:center;text-align-last:center}

  /* As versões rolam de lado em vez de quebrar em duas linhas. Fila
     que quebra empurra o texto para baixo e muda de altura conforme a
     versão escolhida — a página pula debaixo do dedo. */
  .bb-seletor{margin-top:14px;padding:10px 16px;gap:7px;flex-wrap:nowrap;
    overflow-x:auto;justify-content:flex-start;
    scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .bb-seletor::-webkit-scrollbar{display:none}
  .bb-btn{flex:none;min-height:40px;font-size:13px;padding:8px 15px}

  .bb-corpo{margin-top:18px;padding:0 18px}

  /* O TEXTO. 18,5px com linha de 1,85 — é o tamanho de livro, não o
     de rodapé. E o número do versículo deixa de ocupar uma coluna
     fixa de 26px: em tela de 375 pontos, isso é 7% da largura gasta
     com numeração. Vira sobrescrito, colado no texto. */
  .bb-v{display:block;font-size:18.5px;line-height:1.85;margin-bottom:15px;
    text-align:left;hyphens:auto}
  .bb-v > b{float:none;display:inline;flex:none;margin-right:6px;
    font-size:11px;line-height:1;vertical-align:super;
    color:var(--acc);opacity:.75;font-weight:600}

  /* Anterior e próximo: alvo de dedo, e o dedo alcança porque estão
     no fim. Mas o caminho normal no celular é DESLIZAR — ver
     app/publico/js/biblia.js. */
  .bb-passos{margin-top:26px;padding:0 18px;gap:8px}
  .bb-passo{min-height:56px;padding:11px 13px;display:flex;flex-direction:column;
    justify-content:center}
  .bb-passo b{font-size:13.5px}

  .bb-fonte{margin:26px 16px 30px;padding:15px 16px}
  .bb-caligrafia{margin:20px 16px 0;flex-direction:column;align-items:stretch}
  .bb-caligrafia .btn{width:100%;justify-content:center;min-height:46px}

  /* O índice de livros: duas colunas em vez de uma fila espremida */
  .bb-lgrade{grid-template-columns:1fr 1fr;gap:7px}
  .bb-livro{min-height:46px;padding:8px 11px}
  .bb-versoes,.bb-faltam,.bb-indice{margin-top:28px;padding:0 16px}
  .bb-topo{margin-top:16px;padding:0 16px}
  .bb-aviso{margin:18px 16px 0;padding:14px 16px}
  .bb-vgrade,.bb-fgrade{grid-template-columns:1fr}
}

/* Tela bem estreita — celular pequeno, ou letra grande do sistema */
@media (max-width:360px){
  .bb-lgrade{grid-template-columns:1fr}
  .bb-v{font-size:17.5px}
}

/* --------------------------------------- o aviso de deslizar
   Aparece uma vez só, na primeira visita ao capítulo, e some sozinho.
   Recurso escondido que ninguém descobre é recurso que não existe. */
.bb-dica{display:none}
@media (max-width:700px) and (hover:none){
  .bb-dica{display:flex;align-items:center;justify-content:center;gap:7px;
    margin:14px 18px 0;padding:9px 12px;border-radius:8px;
    background:var(--surf);border:1px solid var(--linha);
    font-size:12px;color:var(--tx3);transition:opacity .4s}
  .bb-dica.some{opacity:0}
}