/* =====================================================================
   /parasha/{porção} — a porção da Torá aberta
   =====================================================================
   Uma coluna só, estreita, com o hebraico grande em cima e o português
   miúdo embaixo. Estreita de propósito: linha comprida cansa, e aqui a
   pessoa vai LER, não bater o olho.

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

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

/* ------------------------------------------------------------- topo */
.pr-topo{max-width:760px;margin:18px auto 0;padding:0 22px;text-align:center}
.pr-etq{font-size:10px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--acc);font-weight:800}
.pr-topo h1{font-size:clamp(30px,6vw,46px);line-height:1.1;margin:9px 0 0;
  letter-spacing:-.02em}
.pr-trecho{margin:10px 0 0;font-size:17px;color:var(--tx)}
.pr-conta{margin:5px 0 0;font-size:12px;color:var(--tx3)}

/* ------------------------------------------------------- como ler */
.pr-aviso{max-width:760px;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)}
.pr-aviso > b{display:block;font-size:13px;color:var(--acc);margin-bottom:9px}
.pr-aviso p{margin:0 0 9px;font-size:13.5px;line-height:1.65;color:var(--tx2)}
.pr-aviso p:last-child{margin-bottom:0}
.pr-aviso p b{color:var(--tx);font-weight:600}
.pr-aviso i{font-style:italic;color:var(--tx)}
.pr-aviso span[lang=he]{font-size:17px;color:var(--tx)}

/* ------------------------------------------------------------ texto */
.pr-texto{max-width:760px;margin:30px auto 0;padding:0 22px}

.pr-cap{margin:34px 0 14px;font-size:12px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--tx3);font-weight:700;
  border-top:1px solid var(--linha);padding-top:14px}
.pr-cap:first-child{margin-top:0;border-top:0;padding-top:0}
.pr-cap::before{content:"capítulo ";color:var(--tx3)}

.pr-v{position:relative;padding:0 0 18px 34px;margin-bottom:4px}
.pr-v > b{position:absolute;left:0;top:3px;width:26px;text-align:right;
  font-size:11px;font-weight:600;color:var(--tx3);font-variant-numeric:tabular-nums}

/* O hebraico. Fonte serifada onde houver — os sinais de vogal e de
   cantilação ficam ilegíveis em corpo pequeno, por isso 26px e
   entrelinha larga. */
.pr-he{margin:0;font-size:26px;line-height:2.05;color:var(--tx);
  font-family:"Times New Roman","Frank Ruehl CLM",David,serif;
  font-weight:400;text-align:right}

/* A transcrição. Fica em corpo menor e cor recuada porque ela ACOMPANHA
   o texto, não o substitui — e itálico porque não é português: é o
   hebraico escrito com as nossas letras. */
.pr-tr{margin:7px 0 0;font-size:14px;line-height:1.7;color:var(--tx2);
  font-style:italic;letter-spacing:.005em}

/* ------------------------------------------------------------ passos */
.pr-passos{max-width:760px;margin:40px auto 0;padding:0 22px;
  display:grid;grid-template-columns:1fr 1fr;gap:12px}
.pr-passo{display:block;padding:14px 16px;background:var(--surf);
  border:1px solid var(--linha);border-radius:var(--raio)}
.pr-passo:hover{border-color:var(--acc)}
.pr-passo.dir{text-align:right}
.pr-passo i{display:block;font-style:normal;font-size:11px;color:var(--tx3);
  margin-bottom:4px}
.pr-passo b{display:block;font-size:15px;color:var(--tx)}

/* ------------------------------------------------------------ fonte */
.pr-fonte{max-width:760px;margin:26px auto 60px;padding:16px 20px;
  background:var(--surf2);border-radius:var(--raio)}
.pr-fonte > b{display:block;font-size:12px;color:var(--tx2);margin-bottom:9px;
  letter-spacing:.06em;text-transform:uppercase}
.pr-fonte p{margin:0 0 7px;font-size:12.5px;line-height:1.6;color:var(--tx3)}
.pr-fonte p span{display:inline-block;min-width:74px;color:var(--tx2);font-weight:600}
.pr-fonte a{color:var(--acc);text-decoration:underline}
.pr-nota{margin-top:11px !important;border-top:1px solid var(--linha);padding-top:11px}
.pr-nota span{min-width:0 !important}

@media(max-width:560px){
  .pr-he{font-size:22px;line-height:1.95}
  .pr-passos{grid-template-columns:1fr}
  .pr-passo.dir{text-align:left}
}

/* As marcas de parágrafo do rolo: petuchá e setumá. Vêm no texto e
   ficam à vista, discretas — ver app/paginas/parasha.js. */
.pr-marca{display:inline-block;font-size:.62em;vertical-align:.35em;
  padding:1px 6px;margin-right:6px;border-radius:5px;
  background:var(--surf2);color:var(--tx3);border:1px solid var(--linha);
  font-family:Inter,system-ui,sans-serif;cursor:help}
.pr-aviso .pr-marca{font-size:11px;vertical-align:baseline;margin:0 2px}

/* Qerê: onde o rolo escreve de um jeito e se lê de outro. Fica marcado
   porque é massorá, não erro de digitação — ver dados/baixar-tora.js. */
.pr-qere{background:#1E2634;border-radius:5px;padding:0 5px;
  box-shadow:inset 0 0 0 1px var(--linha)}

/* ------------------------------------------------- a chave de leitura
   Fechada por padrão: quem só quer ver o texto não precisa dela, e quem
   quer tentar ler junto abre uma vez e fecha. */
.pr-chave{max-width:760px;margin:12px auto 0;padding:0 22px}
.pr-chave summary{cursor:pointer;font-size:13px;color:var(--acc);
  padding:9px 0;list-style:none}
.pr-chave summary::before{content:"▸ ";font-size:11px}
.pr-chave[open] summary::before{content:"▾ "}
.pr-chave-grade{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:8px 18px;margin:4px 0 12px}
.pr-chave-grade span{font-size:13px;color:var(--tx2);line-height:1.6}
.pr-chave-grade i{font-style:italic;color:var(--tx);font-weight:600;
  display:inline-block;min-width:26px}
.pr-chave-grade b{color:var(--tx);font-weight:600}
.pr-chave-grade span[lang=he]{font-size:16px;color:var(--tx)}
.pr-chave > p{font-size:12.5px;line-height:1.65;color:var(--tx3);margin:0 0 6px}
.pr-chave > p b{color:var(--tx2)}
.pr-chave > p i{font-style:italic}

/* =====================================================================
   A TERCEIRA LINHA — o português no modelo hebraico
   =====================================================================
   NASCE DESLIGADA, e o interruptor é um checkbox com CSS, sem uma linha
   de JavaScript. Assim funciona com script bloqueado, e o estado mora no
   próprio HTML em vez de num script que pode não carregar.

   É a lente do MELHORIAS.md 10 na parte que já dá para fazer: enquanto
   não houver cadastro, todo mundo abre no estado "sem conta" — hebraico
   e leitura — e liga o português se quiser.
   ===================================================================== */
.pr-chaves{max-width:760px;margin:16px auto 0;padding:0 22px;
  display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.pr-ch{display:inline-flex;align-items:center;gap:8px;font-size:13px;
  padding:7px 15px;border-radius:20px;cursor:pointer;
  border:1px solid var(--linha);background:var(--surf);color:var(--tx2)}
.pr-ch i{width:13px;height:13px;border-radius:4px;border:1px solid #3A4453;
  display:inline-block;position:relative}
.pr-ch:hover{border-color:#4E7F58;color:#CFE3D2}
.pr-liga:checked ~ .pr-chaves .pr-ch{border-color:#4E7F58;background:#14201A;color:#CFE3D2}
.pr-liga:checked ~ .pr-chaves .pr-ch i{background:#4E7F58;border-color:#4E7F58}
.pr-liga:checked ~ .pr-chaves .pr-ch i::after{content:"";position:absolute;
  left:3.5px;top:.5px;width:4px;height:8px;border:solid #0E1A12;
  border-width:0 2px 2px 0;transform:rotate(45deg)}
.pr-ch-nota{font-size:11.5px;color:var(--tx3);line-height:1.5}
.pr-ch-nota b{color:#C6B48C;font-weight:600}

/* a linha em si — escondida até o interruptor virar */
.pr-nosso{display:none;margin:8px 0 0;font-size:14.5px;line-height:1.75;
  color:#D6E9D9;padding-left:11px;border-left:2px solid #3D6146}
.pr-liga:checked ~ .pr-texto .pr-nosso{display:block}
/* o "·" marca onde o hebraico corta o versículo */
.pr-corte{font-style:normal;color:#5E7F66;padding:0 3px}
.pr-aviso .pr-corte{color:#7FAE8A}