/* ===========================================================================
   Mesa aberta — a conta do consulente
   ---------------------------------------------------------------------------
   Folha separada de mesa.css de propósito. Não é organização por gosto: é
   para que uma alteração aqui nunca obrigue você a reenviar um arquivo de
   31 KB, e para que o mesa.css continue sendo o arquivo que você conhece.

   Carrega DEPOIS do mesa.css (ver _comum.php). É o que permite refinar o
   caderno — as palavras-chave, que antes eram nota de rodapé, agora são o
   conteúdo principal de cada anotação — sem editar nada lá.

   Usa as mesmas variáveis do :root de mesa.css. Nenhuma cor nova entra aqui.
   =========================================================================== */


/* ============================================================ cabeça: conta */

/* A cabeça acompanha a largura da página.

   O conteúdo das seções (.intro, .aberturas, .abertura-topo…) tem 78rem no
   máximo e fica centralizado. A cabeça não tinha esse limite: a marca colava
   na borda esquerda da tela e o menu na direita, cada vez mais longe do texto
   quanto maior o monitor.

   O ajuste é no ESPAÇO INTERNO, não na largura. Se a cabeça ganhasse
   `max-width`, a linha dourada de baixo encolheria junto e pararia no meio do
   caminho, o que é pior que o problema. Aumentando só o espaço interno, a
   linha continua atravessando a tela inteira e o conteúdo se alinha ao texto.

   A conta: a metade da sobra de cada lado, mais o respiro que as seções já
   têm. Em tela menor que 78rem a sobra é negativa, e o `max` com zero devolve
   o espaçamento normal. Um cálculo, nenhum ponto de quebra a manter. */
.cabeca {
  padding-inline: calc(var(--ritmo) + max(0px, (100% - 78rem) / 2));
}

/* A marca cresce de .95rem para algo entre 1.2 e 1.55rem.

   Ela ficava do mesmo tamanho dos links do menu — e nome de site que tem o
   corpo de um link vira mais um item da navegação, em vez de ser a assinatura
   da página. Em Cinzel maiúscula, .95rem é pequeno até para ler.

   O `clamp` cresce com a tela e trava nas duas pontas: no celular não empurra
   o menu para outra linha; no monitor grande não vira faixa.

   O espaçamento entre letras cai de .22em para .16em. Não é economia de
   espaço: espaço entre letras se percebe em proporção ao tamanho da letra, e
   manter .22em no corpo maior soltaria as sete letras de TAHARQA a ponto de o
   nome parecer sete iniciais separadas.

   `line-height: 1` porque a entrelinha do corpo do site (1.65) daria à marca
   quase o dobro da altura dela, inchando o cabeçalho por dentro. O
   alinhamento pela linha de base, que a cabeça já usa, mantém a marca e o
   menu assentados na mesma linha mesmo com corpos diferentes. */
.cabeca__marca {
  font-size: clamp(1.2rem, 2.4vw, 1.55rem);
  letter-spacing: .16em;
  line-height: 1;
}

.conta-topo {
  display: inline-flex;
  align-items: baseline;
  gap: .8rem;
}

.conta-topo__nome {
  font-family: var(--letra-grav);
  font-size: .78rem; letter-spacing: .12em;
  color: var(--latao-claro);
  max-width: 9rem;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.conta-topo__link {
  padding: 0;
  color: var(--marfim-3);
  font: inherit; font-size: .9rem;
  background: none; border: none;
  cursor: pointer;
}
.conta-topo__link:hover { color: var(--marfim); }

/* A cabeça ganhou um terceiro item. Em tela estreita ela quebra a linha em
   vez de espremer os links até virarem alvo impossível de acertar com o
   polegar. */
@media (max-width: 560px) {
  .cabeca { flex-wrap: wrap; }
  .cabeca__nav { gap: 1rem; font-size: .84rem; }
  .conta-topo__nome { max-width: 6rem; }
}


/* ============================================ ajuda embaixo de um campo

   Nasceu com a pergunta obrigatória, no formulário de abertura. Está aqui, e
   não no mesa.css, pelo motivo de sempre: evitar reenviar 31 KB por causa de
   quatro linhas. */

.campo__ajuda {
  margin-top: -.1rem;
  font-size: .78rem; line-height: 1.5;
  color: var(--marfim-1);
}


/* ============================================ caderno: a anotação da carta */

/* As palavras-chave voltam a ser a nota de rodapé da anotação: pequenas,
   cinza, sem competir. Quem manda na leitura da carta é o verbete.

   (Na primeira versão era o contrário — as chaves em destaque e o verbete
   apagado. Estava errado: quem abre o verbete está lendo O VERBETE, e o texto
   principal não pode ser o mais fraco da tela.) */
.nota__chaves {
  margin: 0;
  font-family: var(--letra-ui);
  font-size: .8rem; font-style: normal; line-height: 1.5;
  color: var(--marfim-3);
}

/* O verbete completo é o texto principal da anotação: maior, branco, com
   entrelinha de leitura corrida. */
.nota__verbete {
  margin: .8rem 0 0; padding-top: .8rem;
  font-size: 1.02rem; line-height: 1.7;
  color: var(--marfim);
  border-top: 1px solid rgba(192,138,62,.18);
  animation: verbete-surge .3s ease-out both;
}

/* O texto da IA acompanha o mesmo corpo do verbete.

   Não é capricho: os dois nunca aparecem juntos, mas quem leu os verbetes de
   graça e DEPOIS comprou a leitura veria o texto encolher justamente ao
   pagar. Se você não quiser esse ajuste, apague este bloco — o resto continua
   funcionando igual. */
.nota__ia { font-size: 1.02rem; line-height: 1.7; }

@keyframes verbete-surge { from { opacity: 0; transform: translateY(-4px); } }

/* Botão de verdade, com a mesma cara dos outros botões discretos do site —
   os de "Virar todas" e "Nova tiragem". A aparência inteira vem do
   .botao--fantasma do mesa.css; o que sobra para cá é só o encaixe dentro da
   anotação.

   Antes era um texto sublinhado. Sublinhado dentro de uma anotação parece
   nota de rodapé, e este é o convite para o cadastro: precisa ter contorno
   para ser visto como coisa em que se clica. */
.nota__acao {
  margin: .9rem 0 0;
  /* .botao vira `stretch` em tela estreita; aqui o botão acompanha o próprio
     texto, senão atravessaria a anotação de ponta a ponta. */
  width: auto;
}
.nota__acao[disabled] { cursor: progress; }

/* --------------------------------------------------------- caderno em modo IA

   Leitura comprada: cada casa passa a mostrar o texto que a IA escreveu para
   ELA, e mais nada. As palavras-chave, o verbete e o botão saem de cena.

   Some por completo, não fica escondido atrás de um clique: quem pagou pela
   interpretação da mesa não precisa de duas leituras da mesma carta lado a
   lado, dizendo quase a mesma coisa com autoridades diferentes. */
.caderno--ia .nota__chaves,
.caderno--ia .nota__verbete,
.caderno--ia .nota__acao { display: none; }

/* Sem as palavras-chave acima, o texto da IA não precisa mais da linha que o
   separava delas. */
.caderno--ia .nota__ia { margin-top: .2rem; padding-top: 0; border-top: none; }


/* ================================================= janela de cadastro/entrada */

/* A janela é ela mesma a área de rolagem.

   ERRO CORRIGIDO: aqui havia `overflow: visible`, e essa única linha desligava
   a rolagem que o navegador dá de graça ao <dialog>. O navegador limita a
   altura da janela ao tamanho da tela; sem rolagem, tudo o que passasse disso
   ficava fora de alcance — inclusive o "Já tem conta?", que é justamente a
   última linha do formulário.

   `dvh` em vez de `vh` por causa do celular: a barra de endereço aparece e
   some, e `vh` congela na altura da tela SEM a barra, o que empurra o rodapé
   da janela para fora. `dvh` acompanha. A linha com `vh` fica antes como
   reserva para navegador que não conhece `dvh`.

   A moldura, o fundo e a sombra saíram do formulário e vieram para cá: assim
   o fundo fica parado enquanto o texto rola por cima, em vez de deslizar
   junto e deixar aparecer o pano da página atrás. */
.conta {
  width: min(30rem, calc(100% - 2rem));
  max-height: calc(100vh - 2rem);
  max-height: calc(100dvh - 2rem);
  margin: auto;
  padding: 0;
  color: var(--marfim);
  background:
    radial-gradient(120% 90% at 50% 0%, var(--pano-luz) 0%, var(--pano) 55%, var(--pano-sombra) 100%);
  border: 1px solid rgba(192,138,62,.35);
  border-radius: 5px;
  box-shadow: 0 24px 60px rgba(0,0,0,.55);
  overflow-y: auto;
  /* chegar ao fim da janela não passa a rolagem para a página atrás */
  overscroll-behavior: contain;
}
.conta::backdrop {
  background: rgba(4, 10, 8, .8);
  backdrop-filter: blur(3px);
}

/* Navegador sem <dialog>: a janela vira um bloco fixo no centro da tela. Não
   tem foco preso nem Esc, mas abre, rola, funciona e fecha no × — que é o
   mínimo aceitável para quem chegou aqui com um navegador de dez anos atrás. */
.conta--simples {
  position: fixed;
  z-index: 90;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  box-shadow: 0 0 0 100vmax rgba(4, 10, 8, .8);
}

.conta__caixa {
  position: relative;
  display: grid;
  gap: 1.05rem;
  padding: 2.1rem clamp(1.2rem, 5vw, 2.1rem);
}

/* O × acompanha a rolagem em vez de sumir no topo. `sticky` num item de grade
   funciona porque quem rola é a janela, não o formulário; as margens negativas
   o encaixam no canto sem gastar uma linha da grade. */
.conta__fechar {
  position: sticky;
  top: .2rem;
  z-index: 2;
  justify-self: end;
  width: 2.2rem; height: 2.2rem;
  margin: -1.3rem -.7rem -1.5rem 0;
  color: var(--marfim-1);
  font-size: 1.6rem; line-height: 1;
  background: none; border: none;
  cursor: pointer;
}
.conta__fechar:hover { color: var(--marfim); }

.conta__sobre {
  margin: 0;
  font-size: .68rem; letter-spacing: .2em; text-transform: uppercase;
  color: var(--latao);
}
.conta__titulo {
  margin: 0;
  font-family: var(--letra-display);
  font-size: clamp(1.35rem, 4vw, 1.7rem); font-weight: 300; line-height: 1.2;
  color: var(--marfim);
}
.conta__linha {
  margin: 0;
  font-size: .92rem; line-height: 1.6;
  color: var(--marfim-3);
}

/* O consentimento é caixa de marcar com texto de duas ou três linhas: o
   quadrado precisa ficar alinhado com a PRIMEIRA linha, não centralizado no
   bloco todo. Mesma correção já feita na oferta, em mesa.css. */
.conta__consent { align-items: flex-start; line-height: 1.45; }
.conta__consent input { margin-top: .18rem; flex: none; }

.conta__erro {
  margin: 0; padding: .7rem .9rem;
  font-size: .88rem;
  color: #F3C9CE;
  background: rgba(138,52,65,.25);
  border: 1px solid rgba(233,191,197,.35);
  border-radius: 4px;
}

/* Aviso neutro — a resposta do "esqueci minha senha". Não é erro nem festa:
   é uma informação, e a cor diz isso. Verde ou vermelho aqui insinuariam se a
   conta existe ou não, que é justamente o que a frase se recusa a dizer. */
.conta__aviso {
  margin: 0; padding: .8rem .95rem;
  font-size: .88rem; line-height: 1.55;
  color: var(--marfim);
  background: rgba(192,138,62,.12);
  border: 1px solid rgba(192,138,62,.35);
  border-radius: 4px;
}

.conta__enviar { justify-self: stretch; text-align: center; }

.conta__troca {
  margin: 0;
  font-size: .88rem;
  color: var(--marfim-3);
  text-align: center;
}
.conta__link {
  padding: 0;
  color: var(--latao-claro);
  font: inherit;
  background: none; border: none;
  border-bottom: 1px solid rgba(192,138,62,.5);
  cursor: pointer;
}
.conta__link:hover { color: var(--marfim); }

/* Fica abaixo do "Ainda não tem conta?", com um pouco de ar entre os dois:
   são duas saídas diferentes e não podem parecer a mesma frase quebrada. */
.conta__esqueci {
  margin: -.4rem 0 0;
  font-size: .84rem;
  text-align: center;
}
.conta__esqueci .conta__link { color: var(--marfim-3); border-bottom-color: rgba(239,230,213,.25); }
.conta__esqueci .conta__link:hover { color: var(--latao-claro); border-bottom-color: var(--latao); }

.conta__nota {
  margin: 0;
  font-size: .76rem; line-height: 1.55;
  color: var(--marfim-1);
}

/* --------------------------------------------- página de troca de senha

   redefinir.php reaproveita .vazio, .titulo e .campo do mesa.css. Só o
   formulário precisa de ajuste: dentro de um bloco centralizado, um <form>
   com max-width e alinhamento à esquerda ficaria encostado numa borda. */
.redefinir {
  margin: 0 auto;
  max-width: 24rem;
  text-align: left;
}
.redefinir .botao { justify-self: stretch; text-align: center; }

/* Com a janela aberta, a página atrás para de rolar. Sem isso, o dedo que
   tenta chegar ao fim do formulário arrasta a MESA em vez da janela — e a
   sensação é exatamente a de que a tela travou. */
body.conta-aberta { overflow: hidden; }

/* Tela baixa: celular deitado, janela do navegador pequena, teclado aberto.
   A rolagem já resolve o alcance; isto faz o formulário caber inteiro na
   maioria dos aparelhos, que é melhor do que resolver rolando. */
@media (max-height: 760px) {
  .conta__caixa { gap: .8rem; padding-top: 1.6rem; padding-bottom: 1.6rem; }
  .conta__titulo { font-size: clamp(1.2rem, 3.6vw, 1.45rem); }
  .conta__linha  { font-size: .86rem; line-height: 1.5; }
  .conta__nota   { font-size: .72rem; }
  .conta__fechar { margin: -1rem -.7rem -1.2rem 0; }
}

@media (prefers-reduced-motion: reduce) {
  .nota__verbete { animation: none; }
}

/* ============================================ a caixa da pergunta

   O campo da pergunta virou <textarea>. O mesa.css estiliza `.campo input` e
   não alcança textarea nenhum — as regras poderiam ir lá, mas vêm para cá
   pelo mesmo motivo que trouxe o `.campo__ajuda`: mexer no mesa.css obriga a
   reenviar 31 KB por causa de vinte linhas. Esta folha carrega DEPOIS do
   mesa.css, então o que estiver aqui vale.

   Repare que a aparência é copiada de `.campo input`, de propósito: a caixa
   grande e o campo de uma linha da chave de cortesia são o mesmo objeto da
   mesma tela, e não podem parecer dois. */

.campo textarea {
  width: 100%;
  padding: .85rem 1rem;
  color: var(--marfim);
  font: inherit;
  line-height: 1.6;
  background: rgba(8, 26, 21, .6);
  border: 1px solid rgba(192,138,62,.3);
  border-radius: 4px;

  /* Vertical só: arrastar para os lados quebraria a coluna do formulário.
     A altura mínima é o que separa esta caixa de um campo de uma linha —
     ela precisa PARECER um espaço para escrever antes de alguém escrever. */
  resize: vertical;
  min-height: 8.5rem;

  /* O celular dá zoom sozinho em campo com letra menor que 16px, e o zoom não
     volta ao sair do campo: a página inteira fica torta. */
  font-size: max(1rem, 16px);
}
.campo textarea::placeholder { color: var(--marfim-1); }
.campo textarea:focus {
  border-color: var(--latao);
  outline: none;
  box-shadow: 0 0 0 3px rgba(192,138,62,.18);
}

/* A contagem só é escrita pelo script quando falta pouco para o limite, e some
   de novo se a pessoa apagar. Fica alinhada à direita, sob o canto da caixa. */
.campo__conta {
  justify-self: end;
  margin-top: -.15rem;
  font-family: var(--letra-ui);
  font-size: .72rem; letter-spacing: .06em;
  font-variant-numeric: tabular-nums;
  color: var(--latao-claro);
}
.campo__conta--no-fim { color: #E9BFC5; }

/* ============================================ a pergunta no alto da mesa

   Com a caixa de várias linhas, o que a pessoa escreveu pode ter dez linhas.
   Repetir tudo isso acima das cartas empurraria a mesa para fora da tela no
   celular — e o alto da mesa é lembrete, não releitura. Ficam três linhas; o
   toque abre o resto. */
.mesa-cena__pergunta {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  overflow: hidden;
  max-width: 44rem;
  white-space: pre-line;   /* preserva as quebras que a pessoa escreveu */
}
/* O cursor de mão só aparece quando há mesmo texto escondido: prometer que
   abre e não abrir nada é pior do que não prometer. */
.mesa-cena__pergunta--dobrada { cursor: pointer; }
.mesa-cena__pergunta--inteira {
  -webkit-line-clamp: unset;
  line-clamp: unset;
  overflow: visible;
}


/* ============================================ guardar a leitura paga

   Aparece no fim da leitura interpretada, na mesa. É um <form> que posta o
   token para /leitura.php numa aba nova — de propósito, para que o endereço
   do documento não exista como link que se copie ou se marque. Reaproveita o
   .botao do mesa.css inteiro; o que falta é só o encaixe. */

.leitura__guardar {
  display: flex; flex-wrap: wrap; align-items: center; gap: .6rem;
  margin-top: 1.6rem;
}
/* O .botao do mesa.css tem `justify-self: start`, que é regra de grade e não
   vale dentro de um flex. Aqui quem segura a largura é o próprio flex. */
.leitura__guardar .botao { text-align: center; }

.leitura__guardar-linha {
  flex-basis: 100%;          /* a linha de apoio ocupa a fileira seguinte */
  margin: .3rem 0 0;
  font-size: .78rem; line-height: 1.55;
  color: var(--marfim-1);
}
.leitura__guardar-linha b { color: var(--marfim-3); font-weight: 500; }

/* Quando a leitura fica pronta, a página rola sozinha até o texto da primeira
   carta (ou até o acolhimento, se houver). Este respiro impede que o alvo
   nasça colado na borda de cima da janela. */
.caderno .nota,
.cuidado { scroll-margin-top: 1.5rem; }