/* As páginas de conta — cadastro, entrada, download e Minha conta —, servidas
   pelo Worker (`apps/api/src/paginas.ts`).

   Elas carregam **duas** folhas, nesta ordem: `site.css` (fontes, tokens,
   cabeçalho, rodapé e o `.olho` do site) e esta, com o que só as contas usam —
   formulário, código do salão, escolha de plano. Era a folha inteira da antiga
   página de download; quando o site ganhou folha própria, ficou aqui só o que
   não é dele, e **escopado em `.pagina-conta`**: uma regra solta de `h1` ou de
   `body` daqui alcançaria o cabeçalho e o rodapé, que são do site.

   Sem modo escuro, e é decisão: o site é só claro (o protótipo não tem versão
   escura), e a entrada no escuro faria o cabeçalho trocar de cor entre a capa e
   o formulário de quem acabou de clicar "Entrar".

   Os nomes dos tokens são os do aplicativo (`theme/temas.ts`) — o Nude, o tema
   de quem nunca escolheu nenhum. `--ink2` é o #6B5B50 do site (5,8:1), e não o
   #8A7A6E do app (3,7:1): o app é tela de balcão, e isto é lido no celular. */

.pagina-conta {
  --bg: #f6f1ec;
  --sf: #fffdfb;
  --sf2: #f0e8e0;
  --ink: #2a211c;
  --ink2: #6b5b50;
  --line: #e4d8ce;
  --ac: #b0755a;
  --ac-texto: #955a40;
  --ai: #ffffff;
  --rad: 14px;

  /* Um degrau abaixo do severo: é o `ALERTA` de `theme/temas.ts`, constante e
     não token de tema — nível de aviso não se personaliza junto com o acento. */
  --alerta: #a85b4c;
}

/* O corpo em 17 px: é uma página que alguém lê uma vez, muitas vezes no
   celular, para não errar a instalação — os 12,5 px do app seriam pequenos. */
.pagina-conta main {
  font-size: 17px;
  line-height: 1.6;
}

.faixa {
  max-width: 720px;
  margin: 0 auto;
  padding: 0 24px 56px;
}

/* Mais estreita que o resto do site: formulário de uma coluna com 34em de
   largura vira linha de leitura ruim e campo largo demais para o olho percorrer
   entre o rótulo e o que ele nomeia. */
.faixa-conta {
  max-width: 520px;
}

.capa-conta {
  padding: 36px 0 24px;
}

.capa-conta h1 {
  margin: 12px 0 14px;
  font: 400 34px/1.08 var(--dp);
  letter-spacing: -0.02em;
  color: var(--ink);
}

/* Classe própria, e não `.capa-conta p`: o seletor de elemento alcançaria
   também o olho, e venceria a margem dele por especificidade. */
.resumo {
  margin: 0 0 14px;
  max-width: 34em;
}

.pagina-conta .apoio {
  display: block;
  margin-top: 5px;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--ink2);
}

.pagina-conta .apoio a,
.resumo a,
.nota-forma a,
.cartao a {
  color: var(--ac-texto);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* --------------------------------------------------------------- cartão -- */

.cartao {
  background: var(--sf);
  border: 1px solid var(--line);
  border-radius: var(--rad);
  padding: 22px;
}

.cartao p {
  margin: 0 0 12px;
}

.cartao p:last-child {
  margin-bottom: 0;
}

/* ----------------------------------------------------------- formulário -- */

.forma {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* O h2 dentro do formulário é separador, não título de seção — daí o corpo
   pequeno e a caixa alta. */
.secao {
  margin: 6px 0 -4px;
  font: 700 11.5px/1.2 var(--ui);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink2);
}

.secao:first-of-type {
  margin-top: 0;
}

.campo {
  display: block;
}

.rotulo {
  display: block;
  margin: 0 0 4px;
  font-size: 11.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink2);
}

/* 16 px no campo: abaixo disso o Safari do iPhone dá zoom ao focar, e a página
   salta debaixo do dedo de quem está preenchendo. */
.entrada {
  display: block;
  width: 100%;
  font: 400 16px/1.3 var(--ui);
  color: var(--ink);
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 9px;
  padding: 11px 13px;
}

.entrada:focus-visible {
  outline: 2px solid var(--ac-texto);
  outline-offset: 1px;
  border-color: var(--ac);
}

/* A recusa e o aviso são a mesma peça com tintas diferentes: uma mensagem só,
   acima do que a pessoa vai corrigir. Nunca uma lista de cinco erros. */
.recusa,
.pagina-conta .aviso {
  margin: 0;
  padding: 11px 13px;
  border-radius: 9px;
  font-size: 15px;
  line-height: 1.5;
  border: 1px solid;
}

.recusa {
  color: var(--alerta);
  border-color: var(--alerta);
  background: #fbf0ec;
}

.pagina-conta .aviso {
  color: var(--ink);
  border-color: var(--line);
  background: var(--sf2);
}

/* Pílula, como todo botão do sistema. 19 px e 600 não são gosto: branco sobre
   o acento fica em 3,8:1, que só vale para **texto grande** — e texto grande
   começa em 18,66 px negrito. Escurecer o acento até 4,5:1 foi descartado: ele
   é a cor da marca, e o botão passaria a ser o de outro produto. */
.baixar {
  display: inline-block;
  background: var(--ac);
  color: var(--ai);
  font: 600 19px/1.2 var(--ui);
  text-decoration: none;
  padding: 15px 30px;
  border-radius: 99px;
  transition:
    background-color 0.15s,
    color 0.15s;
}

.baixar:hover {
  background: var(--ink);
  color: var(--bg);
}

/* `.baixar` nasceu para um `<a>`; num `<button>` faltam as linhas que o
   navegador impõe por conta própria. */
.botao {
  border: none;
  cursor: pointer;
  width: 100%;
  margin-top: 6px;
}

.sob-botao {
  margin: 12px 0 0;
  font-size: 14px;
}

.nota-forma {
  text-align: center;
  font-size: 15px;
  margin: 18px 0 0;
}

.forma-linha {
  text-align: center;
  margin: 18px 0 0;
}

/* Assinar com os dois ciclos lado a lado: dois botões num formulário só. */
.forma-ciclos {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}

.forma-ciclos .apoio {
  margin: 0 0 2px;
}

/* Botão que parece link: "sair" e "reenviar" são `<form method="post">`,
   porque mudam estado e um `<a>` que muda estado é o que o navegador repete
   sozinho ao pré-carregar. O peso é de link porque a ação é secundária. */
.botao-discreto {
  background: none;
  border: none;
  padding: 7px 0;
  font: 400 15px/1.4 var(--ui);
  color: var(--ink2);
  text-decoration: underline;
  cursor: pointer;
}

.botao-discreto:hover {
  color: var(--ink);
}

/* -------------------------------------------------- o código do salão -- */

.salao + .salao {
  margin-top: 26px;
  padding-top: 22px;
  border-top: 1px solid var(--line);
}

.salao-nome {
  font: 400 23px/1.2 var(--dp);
}

.salao-apoio {
  font-size: 14px;
  color: var(--ink2);
  margin-top: 3px;
}

.codigo-rotulo {
  margin-top: 18px;
}

/* Monoespaçada, ao contrário do resto: este texto vai ser **digitado de
   volta**, caractere a caractere, num campo de outro programa. Aqui a largura
   fixa e o zero cortado são o sinal que se quer dar. */
.codigo {
  font: 600 27px/1.3 ui-monospace, Menlo, Consolas, monospace;
  letter-spacing: 0.06em;
  color: var(--ink);
  margin-top: 2px;
}

/* ---------------------------------------------------------- os planos -- */

.plano + .plano {
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}

.plano .plano-nome,
.escolha .plano-nome {
  font: 400 23px/1.2 var(--dp);
}

/* O preço na cor cheia do acento de texto: é o número que a pessoa veio ver. */
.plano .plano-preco,
.escolha .plano-preco {
  font: 600 16px/1.4 var(--ui);
  color: var(--ac-texto);
  margin-top: 2px;
}

/* A área de clique é o bloco inteiro, e não o círculo de 13 px — no celular o
   círculo sozinho é alvo menor que o mínimo de toque. */
.escolha {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  cursor: pointer;
}

.escolha input {
  margin-top: 6px;
  accent-color: var(--ac);
  flex: none;
}

.escolha .apoio,
.escolha .plano-nome,
.escolha .plano-preco {
  display: block;
}

/* ------------------------------------------------ aceite e anti-robô -- */

/* A caixa de marcar com o texto ao lado, e a área de toque é a linha inteira:
   o quadradinho sozinho é alvo menor que o mínimo de toque no celular. */
.caixa {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: 15px;
  line-height: 1.5;
  cursor: pointer;
}

.caixa input {
  flex: none;
  width: 18px;
  height: 18px;
  margin-top: 3px;
  accent-color: var(--ac);
}

.caixa a {
  color: var(--ac-texto);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* A altura do widget reservada antes de ele carregar: sem ela, o botão salta
   65 px para baixo debaixo do dedo de quem ia apertá-lo. */
.anti-robo {
  min-height: 65px;
}

/* ---------------------------------------------------- Minha conta -- */

/* O botão das ações da própria conta — mais forte que o link discreto, mais
   fraco que a pílula de "Criar conta": não é a ação principal da página. */
.botao-contorno,
.botao-perigo {
  align-self: flex-start;
  background: none;
  border: 1px solid var(--line);
  border-radius: 99px;
  padding: 9px 18px;
  font: 600 15px/1.3 var(--ui);
  color: var(--ink);
  cursor: pointer;
}

.botao-contorno:hover {
  border-color: var(--ink2);
}

/* Perigo é o alerta, e não o acento: excluir a conta não pode ter a cor de
   "criar conta". */
.botao-perigo {
  border-color: var(--alerta);
  color: var(--alerta);
}

.botao-perigo:hover {
  background: #fbf0ec;
}

.cartao-perigo {
  border-color: var(--alerta);
}

.cartao + .cartao {
  margin-top: 14px;
}

.forma-esquerda {
  text-align: left;
  margin: 0;
}

.lista-aparelhos {
  list-style: none;
  margin: 8px 0 0;
  padding: 0;
}

.lista-aparelhos li {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 0;
  border-top: 1px solid var(--line);
  font-size: 15px;
}

.lista-aparelhos .apoio {
  margin: 0;
  text-align: right;
}

.resumo-contrato {
  max-width: 30em;
  text-align: center;
}

@media print {
  .baixar[href]::after {
    content: ' — ' attr(href);
    font-size: 10pt;
    font-weight: 400;
    word-break: break-all;
  }

  .baixar {
    background: none;
    color: #000000;
    border: 1px solid #000000;
    padding: 8px 14px;
  }
}