/* ============================================================
   tryzen — ajustes por tela
   ============================================================ */

/* utilitarios de layout usados nas telas */
.line-between {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gap);
}
.line-between--base { align-items: baseline; }

.block-link { display: block; color: inherit; }
/* O titulo que e link (o treino do dia na Hoje) ganha 48 px de toque sem
   empurrar nada: a faixa invisivel cresce pra cima e pra baixo. */
a.block-link { position: relative; }
a.block-link::before { content: ''; position: absolute; left: 0; right: 0; top: -4px; bottom: -4px; }
.block-link:active { opacity: .7; }

/* ---------- 01 splash ---------- */
/* O conjunto da marca: corredor + nome, sempre por `logotipo()` do
   js/ui.js. Aqui esta so a COR; o tamanho e o vao entre as duas pecas
   saem do proprio desenho, no ui.js.

   Ate a v1.46 o nome era a palavra "tryzen" escrita em Figtree com um
   ponto colado no fim — a fonte da interface fazendo as vezes do logo.
   Agora e a letra desenhada da marca, e o ponto nao existe mais.

   Alinha pela BASE, nao pelo centro: o corredor e um desenho EM PE,
   mais alto que a letra, e centrado ele deixaria a palavra pendurada
   nele. */
.logotipo {
  display: flex;
  align-items: flex-end;
  line-height: 0;      /* SVG e inline: sem isto sobra a entrelinha embaixo */
}
/* O verde do LOGO, nao o verde do app: aqui a cor e a marca, nao um
   estado. Ver o bloco "a marca" em css/tokens.css. */
.logotipo .marca { color: var(--marca); flex: none; }
/* O nome acompanha a cor do texto da tela — preto no claro, branco no
   escuro —, que e como o arquivo da marca mostra o conjunto. */
.logotipo .marca-nome { color: var(--text); flex: none; }

/* ---------- a entrada, o cadastro e o login ----------
   A tela de quem ainda nao tem conta virou um filme de tela cheia com
   a frase por cima (pedido do dono, 14/09/2026). Desde 21/09/2026 o
   MESMO filme fica atras do cadastro e do login, e nessas duas o
   formulario aparece como um cartao no meio da tela (pedido do dono).
   A marcacao da entrada mora em js/screens/splash.js, e la esta
   escrito por que sobe so o NOME da marca e nao o logotipo inteiro.

   ---------- por que o filme saiu de dentro da tela ----------
   Ate aqui o <video> era filho da splash. Trocar de tela e um
   innerHTML: tocar em "Criar conta" apagava aquele video e o da tela
   seguinte comecava do zero — a corredora saltava pra tras a cada
   toque. Agora e UM elemento so, irmao do #app, escrito e apagado por
   js/filme-entrada.js; as telas so pedem que ele apareca.

   E por isso que ele agora PODE ser `fixed`, o que este mesmo bloco
   proibia antes: a tela entra deslizando (`.is-entering` no
   js/router.js) e `transform` no ancestral faz `fixed` virar
   `absolute`. Fora do #app nao ha ancestral transformado. De quebra o
   filme cobre a janela inteira, inclusive os 168px que a faixa do
   cookie encurta da tela — que era todo o motivo do `body.na-entrada
   #app` que morava aqui.

   O filme e escuro e nao tem versao clara. Entao estas tres telas — e
   so elas — ignoram o tema: preto esverdeado e letra branca nos dois.
   E a mesma regra que o hero do Tryzen Pro segue quando escreve por
   cima de foto, e e por isso que a frase da entrada nao tem verde
   nenhum. Dentro do cartao quem vira o tema e a `.paleta-escura`
   (css/tokens.css).                                                 */

/* O preto esverdeado do proprio filme: e a cor do quadro escuro em que
   o loop fecha, entao a foto e o video encostam nela sem costura
   aparecer. Mora no `:root` porque o BODY tambem precisa dele. */
:root { --filme-fundo: #07100b; }

/* O filme e fixo e cobre a janela, mas o sacolejo de fim de rolagem do
   iOS mostra o fundo do DOCUMENTO atras dele — branco, no tema claro. */
body.com-filme { background: var(--filme-fundo); }

/* O app inteiro passa a flutuar por cima do filme: sem o z-index o
   filme, que e posicionado, cobriria as telas, que sao estaticas. O
   fundo tem que sair junto — no desktop o #app pinta `--bg` na coluna
   de 430px (bloco do desktop, la embaixo) e taparia o filme
   exatamente onde ele precisa aparecer. */
body.com-filme #app { position: relative; z-index: 1; background: transparent; }

/* A foto e o fundo DESTA caixa, e nao o `poster` do <video>: assim ela
   aparece antes de o filme ter um quadro pronto, continua atras dele o
   tempo todo, e e o unico que sobra quando o video nao existe (menos
   movimento) ou quando o navegador recusa o autoplay. O quadro
   escolhido e o do meio do filme, com ela inteira — o primeiro quadro
   e quase preto e deixaria a tela vazia nesses casos.

   A mira em 42% e a mesma do video: a corredora corre um pouco acima
   do meio do quadro, e e isso que a mantem inteira quando a tela e
   mais larga que 9:16. */
.filme-entrada {
  position: fixed;
  inset: 0;
  z-index: 0;
  background: var(--filme-fundo) url('../assets/filme/entrada.jpg') 50% 42% / cover no-repeat;
  pointer-events: none;   /* e fundo: nao intercepta toque de ninguem */
}
.filme-entrada__video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 42%;
  /* Entra por cima da foto. Em condicao normal nem se ve: o js poe a
     agulha no quadro de que a foto foi tirada, e o fade dissolve uma
     imagem na mesma imagem. Ele existe pro caso de o seek ser recusado
     — ai o filme comeca no quadro escuro do tronco, e sem o fade a
     foto viraria preto num corte seco. */
  animation: filme-abre .9s var(--ease) both;
}
@keyframes filme-abre { from { opacity: 0; } to { opacity: 1; } }

/* ---------- os dois veus ----------
   Sao dois porque as telas pedem coisas diferentes do mesmo filme, e a
   troca entre elas precisa ser um fade: gradiente nao se anima, mas
   opacidade sim — entao cada veu e uma camada, e acende a que for a
   vez.

   O da ENTRADA e escuro em cima (onde esta o nome) e escuro embaixo
   (onde estao a frase e os botoes), quase limpo no meio, que e por
   onde ela passa correndo. Sem ele a letra branca some no ceu claro
   do fundo.

   O do CARTAO e parelho: ali toda a letra mora dentro de uma caixa
   opaca, e o servico do veu passa a ser outro — afastar o filme um
   passo pra ele nao disputar com o formulario. Com o gradiente da
   entrada a corredora apareceria em tamanho natural bem ao lado do
   campo de senha, que e o pedaco da tela que menos pode ter
   companhia. */
.filme-entrada__veu {
  position: absolute;
  inset: 0;
  transition: opacity .3s var(--ease);
}
.filme-entrada__veu--entrada {
  background: linear-gradient(to bottom,
    rgba(7, 16, 11, .72) 0%,
    rgba(7, 16, 11, .24) 17%,
    rgba(7, 16, 11, .12) 30%,
    rgba(7, 16, 11, .44) 46%,
    rgba(7, 16, 11, .72) 64%,
    rgba(7, 16, 11, .90) 100%);
}
.filme-entrada__veu--cartao {
  /* Quase parelho, com UM degrau: a tira de cima escurece porque a
     setinha de voltar mora la, branca e sem sombra, e um quadro claro
     do filme passando por tras dela a apagaria. Do cartao pra baixo o
     veu e leve: ali nao ha letra nenhuma solta, so filme.
     (A setinha chegou a sair em 21/09/2026 e voltou no mesmo dia; o
     degrau acompanhou ela nas duas viagens.) */
  background: linear-gradient(to bottom,
    rgba(7, 16, 11, .62) 0%,
    rgba(7, 16, 11, .30) 13%,
    rgba(7, 16, 11, .26) 100%);
  opacity: 0;
}
.filme-entrada[data-veu="cartao"] .filme-entrada__veu--entrada { opacity: 0; }
.filme-entrada[data-veu="cartao"] .filme-entrada__veu--cartao  { opacity: 1; }

/* ---------- 01 a entrada ---------- */
.s-splash { color: #fff; }
.s-splash .body { display: flex; flex-direction: column; }
/* O rodape pinta um degrade do fundo DO TEMA pra deixar o botao
   legivel quando a tela rola por baixo dele. Aqui isso seria uma
   mancha branca em cima do filme: quem cuida da legibilidade e o veu. */
.s-splash .footer { background: none; }
.s-splash .btn--ghost { color: #fff; }

.s-splash__marca { display: block; line-height: 0; color: #fff; }

/* Quatro linhas curtas, com as quebras cravadas em
   js/screens/splash.js. O tamanho acompanha a largura da tela (vw)
   justamente pra que o desenho das quatro linhas nao mude de celular
   pra celular: se o corpo fosse fixo, a linha mais longa estouraria no
   aparelho estreito. */
.s-splash__frase {
  font-size: clamp(28px, 9.6vw, 38px);
  line-height: 1.14;
  letter-spacing: var(--tr-tight);
  font-weight: 600;
  color: #fff;
  text-shadow: 0 2px 20px rgba(0, 0, 0, .45);
}

/* ---------- 02 cadastro e 03 entrar: o cartao ----------
   O formulario dentro de uma caixa OPACA, e nao de um vidro
   desfocado: e onde a pessoa digita, e vidro em cima de video em
   movimento e o pior fundo possivel pra um rotulo de 13px. O filme
   aparece em volta, que e onde ele nao atrapalha ninguem (escolha do
   dono, 21/09/2026).

   Centrado por `margin: auto`, e nao por `justify-content: center`:
   com o teclado aberto o cartao fica mais alto que a tela, e o centro
   geometrico jogaria o TOPO dele pra fora da area rolavel — sem
   volta, porque nao se rola pra cima do comeco. Com margem automatica
   a sobra desce pro fim e o titulo continua alcancavel. */
/* A cor do texto PRECISA ser pedida de novo aqui. A `.paleta-escura`
   troca os tokens, mas `color` ja foi resolvido la no body com o valor
   do tema claro: o que desce pra ca e a cor preta ja calculada, e nao
   o `var(--text)` que a virou. Sem esta linha o titulo e, pior, o que
   a pessoa digita nascem pretos dentro de um cartao preto. */
.s-auth { color: var(--text); }
.s-auth .body { display: flex; flex-direction: column; }
.cartao-auth {
  margin: auto 0;
  padding: 22px 20px 24px;
  border-radius: var(--r-card);
  background: var(--surface);
  /* A regra dos cartoes e "sem sombra: o que separa o cartao da pagina
     e a diferenca de TOM" (css/components.css). Este e a excecao que a
     propria regra abre — ele flutua de verdade, por cima de um filme
     que se mexe, e sem a sombra a beira dele se perde num quadro
     escuro do video. */
  box-shadow: 0 18px 50px rgba(0, 0, 0, .45);
}
/* O titulo e o mesmo `.h1` das outras telas, so que dentro de uma
   caixa 84px mais estreita que a tela (22 de pagina + 20 de cartao,
   dos dois lados): no celular de 360 "em 30 segundos." estourava a
   linha. */
.cartao-auth .h1 { font-size: clamp(26px, 7.6vw, 32px); }
/* O vao entre o titulo e o primeiro campo desce um degrau aqui
   dentro. Os 52px do `mt-xl` foram medidos pra uma tela inteira; numa
   caixa de 700px de altura eles viram um buraco no meio do cartao — e
   sao eles que jogam o ultimo botao pra fora da tela no celular de
   812. Com 24px o cartao fecha dentro da dobra e o titulo continua
   separado do formulario. */
.cartao-auth .mt-xl { margin-top: var(--gap-md); }

/* ---------- o que saiu daqui foi o botao do pe ----------
   Em 21/09/2026 a flecha de voltar chegou a sair, pra caber tudo na
   dobra. Ela voltou no mesmo dia, e quem saiu no lugar dela foi o par
   de baixo: o risco "ou" e o botao secundario — o "Ja tenho conta" do
   cadastro e o "Criar uma conta" do login (pedido do dono). Sao ~120px,
   quase o dobro dos 68 que a barra custa, e e por isso que agora cabe
   tudo COM a seta no lugar.

   Quem quer trocar de uma tela pra outra passa pelo inicio, onde os
   dois caminhos moram lado a lado. Vale lembrar antes de "devolver" o
   atalho: ele nao se perdeu, foi tirado.

   O `padding-bottom` e o respiro do pe pra quando o cartao precisa
   rolar (teclado aberto, tela deitada). De quebra ele deixa o cartao
   uns 10px acima do centro exato do que sobra, que e onde o olho
   procura o centro de qualquer jeito. */
.s-auth .body { padding-bottom: 20px; }

/* ---------- a seta flutua, e nao empurra ----------
   Nas outras telas a barra de cima faz parte da coluna: ela ocupa
   altura e o conteudo comeca depois dela. Aqui dentro nao ha coluna,
   ha UMA caixa, e o centro dela e o da tela — nao o do que sobra
   embaixo da barra. Em fluxo, a barra e o vao dela empurravam o cartao
   68px pra baixo, e o resultado era uma caixa com 138px de filme em
   cima e 60 embaixo: o olho le isso como "caiu", nao como "centro".

   Fora do fluxo ela para no mesmo lugar de sempre (os 20px do
   `.screen` mais a area segura) e o cartao acha o centro da tela
   inteira.

   O PISO (03/10/2026, pedido do dono): "a seta nao encosta" so era
   verdade no celular de 812 de altura. No navegador do celular, com a
   barra de endereco, sobram uns 700 e o cartao centrado subia por cima
   da seta. Agora o corpo reserva em cima a altura dela mais 12px de
   respiro (a seta acaba nos 64, o cartao nunca comeca antes dos 76), e
   um calco do mesmo tamanho embaixo mantem o centro sendo o da tela.
   O calco e `flex: 0 1`: quando falta altura ele encolhe ate zero
   antes de o cartao precisar rolar, entao o piso nao custa dobra. */
.s-auth { position: relative; }
.s-auth .topbar {
  position: absolute;
  top: calc(var(--safe-top) + 20px);
  left: 0;
  right: 0;
  margin-bottom: 0;
}
.s-auth .body { padding-top: 56px; }
.s-auth .body::after { content: ''; flex: 0 1 56px; }

/* ---------- celular curto ----------
   Medido com a seta no lugar e sem o botao do pe: o cartao do cadastro
   tem 614px. Num celular de 667 de altura sobram 627 — ele cabe, mas
   por 6px de cada lado, que na tela vira uma caixa encostada nas duas
   bordas; num de 640 nao cabe mais. Abaixo de 700 ele entao aperta ate
   484 e volta a ter folga de verdade (92px em cima e embaixo no 667),
   com o mesmo desenho do celular grande: titulo um degrau menor,
   campos mais juntos, menos respiro entre os blocos.

   E `max-height`, e nao largura, porque o que falta nesses aparelhos e
   altura. O toque continua com os 44px de area minima. */
@media (max-height: 700px) {
  .cartao-auth { padding: 16px 18px 18px; }
  .cartao-auth .h1 { font-size: clamp(23px, 6.4vw, 27px); }
  .cartao-auth .mt-xl { margin-top: var(--gap); }
  .cartao-auth .mt-md { margin-top: var(--gap); }
  .cartao-auth .field { padding: 12px 0 10px; }
  .cartao-auth .field__label { margin-bottom: 6px; }
  .cartao-auth .btn { min-height: 46px; }
  .cartao-auth .btn--ghost { min-height: 44px; }
}

/* Quem pediu menos movimento ve a foto parada (o `<video>` nem chega a
   ser escrito, em js/filme-entrada.js) — e sem o fade, que seria o
   unico movimento sobrando. */
@media (prefers-reduced-motion: reduce) {
  .filme-entrada__video { animation: none; }
  .filme-entrada__veu { transition: none; }
}

/* ---------- 07 gerando plano ---------- */
.s-gerando .body { display: flex; flex-direction: column; }
.steps__i {
  display: flex;
  align-items: baseline;
  gap: 14px;
  font-size: var(--fs-lg);
  line-height: 1.75;
  color: var(--text-3);
  transition: color .3s var(--ease);
}
.steps__mark {
  flex: none;
  width: 14px;
  text-align: center;
  color: var(--text-3);
}
.steps__i.is-done { color: var(--text-2); }
.steps__i.is-done .steps__mark::before { content: '✓'; }
.steps__i.is-now { color: var(--accent-texto); }
.steps__i.is-now .steps__mark { color: var(--accent-texto); }
.steps__i.is-now .steps__mark::before { content: '•'; }

.gp-bar {
  height: 3px;
  margin: 0 var(--pad) calc(var(--gap) + 4px);
  background: var(--surface);
  border-radius: 2px;
  overflow: hidden;
}
.gp-bar span {
  display: block;
  height: 100%;
  width: 0;
  background: var(--accent);
  transition: width .9s var(--ease);
}

/* ---------- 08 estreia: a primeira fala do Zentry ----------
   A tela entre montar o plano e o app. O `flex` e pelo mesmo motivo da
   de gerar: ela tem um `.grow` empurrando o rodape pro fim quando a
   leitura sai curta. */
.s-estreia .body { display: flex; flex-direction: column; }
.s-estreia .h1 { max-width: 11ch; }
/* O rodape tem dois destinos, e o de baixo e um `.btn--ghost` sem
   fundo: sem isto ele encosta no primario e os dois parecem um botao
   de duas linhas. */
.s-estreia .footer .btn--ghost { color: var(--text-2); }

/* ---------- 03-06 quiz ---------- */
.s-quiz .h2 { max-width: 15ch; }

/* ---------- 12 chat ---------- */
/* O campo de escrever gruda no fim da tela, e agora o fim da tela tem
   a tab bar em cima: o `bottom` do sticky para na altura dela, senao a
   barra de vidro cobre o campo justo enquanto se digita. A safe-area
   saiu do padding pelo mesmo motivo — quem cuida dela agora e a
   propria tab bar, embaixo. */
.chatbar-wrap {
  position: sticky;
  bottom: calc(var(--tabbar-h) + var(--safe-bottom));
  padding: var(--gap-sm) 0;
  background: linear-gradient(to top, var(--bg) 60%, transparent);
}

/* ---------- o teclado subiu ----------
   Pedido do dono (22/09/2026): "no momento que o usuario apertar pra
   digitar e subindo o teclado, suba tambem aquele card/box de chat".
   Ele nao subia porque o teclado NAO encurta a pagina: ele cobre o fim
   dela, e o fim da pagina era exatamente onde o campo estava colado. A
   medida de quanto esta coberto e o `--teclado`, escrito por
   js/teclado.js; o porque completo dos dois viewports esta la.

   Sao duas linhas, e uma sem a outra nao resolve:

     · o `bottom` tira o campo de tras do teclado. No lugar da tab bar
       (que sai de cena com o teclado aberto, ver components.css) entra
       o teclado, que e o que esta ocupando aquele pedaco agora;
     · o `padding-bottom` da a MESMA altura de volta pro fim da
       rolagem. Sem ele, a pagina termina atras do teclado e a ultima
       fala fica embaixo do campo: `sticky` sobe a caixa por cima do
       que vem antes dela, e o que vinha antes era a conversa.

   Quem rola pro fim depois disso e o `grudarNoFim()` do js/teclado.js,
   ligado pelas duas telas de conversa.                                */
body.com-teclado .chatbar-wrap { bottom: var(--teclado); }
body.com-teclado .screen--conversa {
  padding-bottom: var(--teclado);
  /* A altura minima cai junto, e e ela que segura a CONVERSA CURTA (o
     assunto novo, o Suporte sem mensagem): sem esta linha a tela
     continuaria com uma dobra inteira de altura, a rolagem pro fim
     comeria a topbar e a pessoa perderia o titulo, o "+" e a gaveta
     justo enquanto digita. Com ela, tela curta nao rola nada: cabe
     inteira no que sobrou.

     A conversa LONGA nao sente: `min-height` so vale quando o conteudo
     e menor que ela. E a medida e `dvh` (a janela) porque o Suporte
     rola a PAGINA: percentual ali cairia num pai de altura aberta e
     nao valeria nada. Ver o alto de css/base.css.                      */
  min-height: calc(100dvh - var(--teclado));
}

/* ---------- o convite: a tela antes da primeira pergunta ----------
   Os aneis (js/aneis.js) com a frase embaixo, os dois no meio do vao
   que sobra entre a topbar e o campo de escrever. O bloco ocupa esse
   vao INTEIRO de proposito: a conversa que ainda nao comecou nao tem
   conteudo nenhum pra empurrar, e a frase sozinha la no alto deixava
   a aba com cara de tela que falhou em carregar.

   O `.body` vira coluna flex so aqui. Com mensagens na tela nada muda
   de lugar: a lista continua sendo o unico filho que cresce, e as
   caixas de fala ja se alinham sozinhas pelo `.chat__turn`.          */
.s-chat .body { display: flex; flex-direction: column; }

.convite {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 42vh;
  text-align: center;
  transition: opacity var(--dur) var(--ease);
}
.convite--sai { opacity: 0; }

/* Quadrado, e limitado pelos TRES lados: a largura da tela, a altura
   que sobrou (o teclado do celular come metade dela) e um teto em px
   pro desktop, onde a moldura e estreita mas a janela nao e. Sem o
   `flex: none` a coluna espremeria a altura e o circulo viraria ovo.

   O toque atravessa: e enfeite por cima de uma tela onde a unica coisa
   pra fazer e escrever no campo la embaixo.

   A MASCARA e o que faz a animacao pertencer a tela. O shader espalha
   um grao fino pelo quadrado inteiro — no site de origem isso nao se
   ve, porque la ele mora dentro de um painel escuro com borda. Solto
   sobre o fundo do app, o grao desenha o retangulo do canvas: um
   quadrado levemente mais claro que a pagina, com quatro cantos. O
   degrade radial apaga a borda e deixa so o brilho; `closest-side`
   ancora o circulo no meio do lado, entao os cantos (que e onde o
   retangulo mais aparece) ja nascem fora dele.                       */
.convite__aneis {
  flex: none;
  width: min(76%, 46vh, 300px);
  aspect-ratio: 1;
  pointer-events: none;
  -webkit-mask-image: radial-gradient(closest-side, #000 86%, transparent 100%);
          mask-image: radial-gradient(closest-side, #000 86%, transparent 100%);
}
.convite__fala { max-width: 20ch; margin-top: var(--gap); }

/* Com o teclado aberto sobra pouco mais da metade da tela, e o convite
   foi medido pela tela INTEIRA: `42vh` de altura minima e aneis de
   `46vh` continuam valendo o mesmo com o teclado aberto, porque `vh` e
   do layout viewport — o que o teclado nao encolhe (ver js/teclado.js).
   Sem estas linhas o desenho vaza por baixo do campo e leva a frase
   junto, que e justamente o que ele existe pra emoldurar.

   O convite deixa de ser centrado e encosta no alto: centrado no vao
   inteiro, com o campo cobrindo o pe desse vao, o centro cai baixo
   demais e a frase termina atras do campo.

   Os aneis passam a caber no que SOBROU. Os 300px sao o resto da tela
   de conversa somado uma vez so: a topbar, o campo, a frase com a
   margem dela e os respiros do corpo. Nao e um numero de desenho — e o
   que nao e anel. Assim o circulo encolhe junto com o teclado do
   aparelho, e nao ha tamanho fixo que caiba num celular e estoure no
   outro.                                                               */
body.com-teclado .convite { min-height: 0; justify-content: flex-start; }
body.com-teclado .convite__aneis {
  width: min(62%, 220px, calc(100dvh - var(--teclado) - 300px));
}

/* ---------- 09 registrar ---------- */
/* Esta tela tem que caber numa dobra inteira: campo e botao de salvar
   visiveis juntos, sem rolar. O conteudo se empilha no topo e a sobra cai
   embaixo (.grow no fim). O padding-bottom fica: e ele que impede o
   segundo botao de encostar no fio da tab bar. */
.s-registrar .body {
  display: flex;
  flex-direction: column;
  padding-bottom: var(--gap-md);
}

/* A tela encolhe junto com o aparelho, em degraus, pra continuar cabendo
   numa dobra. Nao ha rolagem aceitavel aqui: se o "Salvar" sai da dobra,
   quem acabou de correr acha que o app nao tem onde salvar. Cede primeiro
   o vao vertical, depois o titulo. O alvo de toque nunca desce dos 44px. */
@media (max-height: 820px) {
  .s-registrar .body > .mt-md { margin-top: var(--gap); }
}
@media (max-height: 760px) {
  .s-registrar .body > .mt-md,
  .s-registrar .body > .mt-sm { margin-top: var(--gap-sm); }
  .s-registrar .h1 { font-size: 31px; }
  .s-registrar .field { padding: 10px 0 12px; }
  .s-registrar .field__label { margin-bottom: 6px; }
}
@media (max-height: 680px) {
  .s-registrar .h1 { font-size: 28px; }
  .s-registrar .btn--primary { min-height: 52px; }
}
/* Menor que qualquer celular em uso hoje (o 360x640 e o piso do mercado),
   mas cabe aqui porque custa tres linhas de CSS: teclado aberto em
   paisagem cai nesta faixa. Nada some — so aperta. */
@media (max-height: 620px) {
  .s-registrar .body > .mt-md,
  .s-registrar .body > .mt-sm { margin-top: var(--gap-xs); }
  .s-registrar .h1 { font-size: 26px; }
  .s-registrar .body-t { font-size: var(--fs-xs); line-height: 1.4; }
}

/* ---------- 26 historico ---------- */
.log-day {
  display: block;
  padding: 22px 0;
  border-bottom: 1px solid var(--border);
  color: inherit;
}
.log-day__date { display: flex; align-items: baseline; gap: 10px; margin-bottom: 14px; }
.log-day__title { font-size: var(--fs-h3); font-weight: 500; letter-spacing: -.015em; }

/* ---------- 17 provas / 22 segmentos: graficos ---------- */
.chart { width: 100%; height: 128px; display: block; overflow: visible; }
.chart__line { fill: none; stroke: var(--accent); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.chart__dash { fill: none; stroke: var(--text-3); stroke-width: 1.5; stroke-dasharray: 4 4; }
.chart__dot  { fill: var(--bg); stroke: var(--accent); stroke-width: 2; }
.chart__area { fill: url(#gradAccent); }
.chart__axis { display: flex; justify-content: space-between; margin-top: 14px; }

.legend { display: flex; gap: 26px; align-items: center; }
.legend__i { display: flex; align-items: center; gap: 8px; }
.legend__swatch { width: 20px; height: 0; border-top: 2px solid var(--accent); }
.legend__swatch--dash { border-top-style: dashed; border-color: var(--text-3); }

/* ---------- 18 rede / 19 post ---------- */
.feed-stats { display: flex; gap: var(--gap-lg); }
.feed-stats .stat__value { font-size: 27px; }
.feed-stats .stat__note { margin-top: 2px; }

.score-box {
  display: flex;
  align-items: center;
  gap: 20px;
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: 18px 20px;
}

/* ---------- 23 desafios: as conquistas ----------
   docs/cores.md § 3 aplicado a uma lista. Os dois cinzas fazem o
   trabalho que uma medalha dourada faria pior:

     em aberto    icone cru, so contorno   nao existe ainda
     conquistada  icone dentro de um disco cheio   aconteceu, tem corpo

   Verde entra so na barra do que falta, que e a unica coisa da tela
   ainda em pe. */
.conquista__medida { display: flex; align-items: center; gap: 12px; margin-top: 11px; }
.conquista__medida .progress,
.s-desafios .card__foot .progress { flex: 1; }
.conquista__n {
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  letter-spacing: var(--tr-mono);
  color: var(--text-3);
  white-space: nowrap;
}

.conquista--feita .row__icon {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--feito-fundo);
  color: var(--feito-texto);
}
.conquista--feita .row__icon svg { width: 19px; height: 19px; }
/* o titulo do que ja foi recua um tom: ele nao disputa com o que falta */
.conquista--feita .row__title { color: var(--text-2); }
/* No lugar da seta de "entra aqui", o simbolo de compartilhar: o destino
   da linha nao e uma tela de detalhe, e o cartao pra postar. */
.conquista--feita .row__chev svg { width: 20px; height: 20px; }
/* a data e informacao de arquivo, nao manchete: entra na mesma letra
   miuda da linha de baixo, e nao no corpo de 17px do `.row__value` */
.conquista--feita .row__value {
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  letter-spacing: var(--tr-mono);
  color: var(--text-3);
}

/* o duelo entre dois atletas do mockup original. Segue de pe pra quando
   a predicao existir (EM_BREVE nao cobre mais esta tela). */
.versus { display: flex; align-items: center; justify-content: space-between; gap: var(--gap); }
.versus__side { display: flex; flex-direction: column; align-items: center; gap: 10px; flex: 1; }
.versus__vs { color: var(--text-3); font-size: var(--fs-lg); font-weight: 500; }

/* ---------- 30 divulgar ----------
   O quadro do preview. O xadrez NAO e decoracao: o PNG e transparente,
   e transparencia so se enxerga contra alguma coisa. Sem ele o cartao
   apareceria sobre o fundo da tela e a pessoa postaria achando que ia
   sair com fundo branco.

   O padrao e feito com dois gradientes cruzados em vez de uma imagem:
   sao seis linhas de CSS contra um arquivo a mais no cache.

   ⚠️ O cinza dele e FIXO, e de proposito nao acompanha o tema. Ele nao
   representa o app: representa "o fundo que voce ainda nao sabe qual
   e". Num xadrez claro a letra clara some, num escuro some a escura, e
   ai a pessoa escolheria a cor olhando pro tema DELA em vez do lugar
   onde o adesivo vai parar. Um cinza no meio deixa as duas visiveis.

   Com foto escolhida ele quase nao aparece: sobra so a moldura em
   volta, porque a foto cobre o quadro inteiro. E e isso mesmo — o
   xadrez e a resposta a "o que ha atras disto?", e com foto a resposta
   passa a ser a foto. */
.preview {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 220px;
  padding: 14px;
  border-radius: var(--r-card);
  border: 1px solid var(--border);
  background-color: #9b9b9b;
  background-image:
    linear-gradient(45deg, rgba(0,0,0,.17) 25%, transparent 25%, transparent 75%, rgba(0,0,0,.17) 75%),
    linear-gradient(45deg, rgba(0,0,0,.17) 25%, transparent 25%, transparent 75%, rgba(0,0,0,.17) 75%);
  background-size: 26px 26px;
  background-position: 0 0, 13px 13px;
}
.preview img {
  display: block;
  max-width: 100%;
  max-height: 58vh;
  border-radius: var(--r-sm);
}
.preview__carregando {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  letter-spacing: var(--tr-mono);
  color: var(--text-3);
  background: var(--bg);
  border-radius: var(--r-card);
}
/* ---------- arrastar o mapa ----------
   `touch-action: none` e o que faz o gesto existir: sem ele o navegador
   entende o dedo andando como ROLAGEM DA PAGINA, come o evento e o
   `pointermove` nunca chega. Fica so na moldura, e nao no corpo, pra
   nao travar a rolagem do resto da tela.

   O cursor conta a historia toda: mao aberta quando da pra pegar, mao
   fechada enquanto esta pegando. Num aparelho de toque ninguem ve isso,
   e no desktop e a unica pista de que a imagem se move. */
.preview--vivo {
  touch-action: none;
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
}
.preview--vivo.is-arrastando { cursor: grabbing; }
/* A previa e uma <img>, e o navegador oferece "arrastar imagem" por
   cima do nosso gesto: sem isto o Chrome inicia um drag-and-drop e
   larga o mapa no meio do caminho. */
.preview img { -webkit-user-drag: none; user-drag: none; }

/* A linha de reenquadrar: dois botoes quadrados, o recado e a saida. */
.reenquadre {
  display: flex;
  align-items: center;
  gap: var(--gap-sm);
}
.reenquadre .chip--sq {
  font-size: 22px;
  font-weight: 500;
  line-height: 1;
}
.reenquadre .mono { min-width: 0; }

/* Numa tela estreita o recado do meio nao cabe junto dos botoes e da
   saida. Ele e o primeiro a sair: quem esta com o dedo na tela ja
   descobriu que o mapa anda; o botao de voltar a rota inteira, nao. */
@media (max-width: 379px) {
  .reenquadre .mono { display: none; }
}

/* O botao de compartilhar leva o icone junto: o alinhamento vem daqui
   pro simbolo nao ficar pendurado acima da linha da letra. */
.btn svg { vertical-align: -5px; width: 20px; height: 20px; }

/* "trocar a foto" e "tirar a foto": acoes de texto, na letra miuda do
   rotulo do grupo. Sublinhado porque sao a unica coisa clicavel da tela
   que nao tem forma de botao. */
.s-divulgar .tap--inline {
  font: inherit;
  color: var(--text-2);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.s-divulgar .tap--inline:active { opacity: .6; }

/* ---------- divulgar um treino: a grade dos modelos ----------
   Quem arruma as casas e o js/masonry.js (o Masonry do React Bits,
   portado): ele poe cada uma no lugar com `transform` e diz a altura da
   grade. Aqui mora so a aparencia.

   A margem negativa devolve a folga de 6px que cada casa tem por
   dentro: sem ela a grade ficaria 6px pra dentro da margem da tela dos
   dois lados, desalinhada do titulo. */
.modelos {
  position: relative;
  /* So os lados: um `margin` inteiro zeraria o `mt-md` de cima. */
  margin-left: -6px;
  margin-right: -6px;
}
.masonry__item {
  position: absolute;
  top: 0;
  left: 0;
  padding: 6px;
}

/* O cartaozinho. O cinza escuro e FIXO, como o da print, e nao segue o
   tema: ele e o "fundo qualquer" onde a figurinha branca se le. Com a
   letra preta ele vira claro, senao a letra sumiria nele.

   O retorno do toque e o `scaleOnHover` do componente original (0,95
   em 0,3s de power2.out) levado pro `:active`: o app nao tem hover em
   lugar nenhum, e no celular nao ha ponteiro pairando. */
.modelo {
  display: block;
  width: 100%;
  height: 100%;
  padding: 0;
  border-radius: var(--r);
  overflow: hidden;
  background: #2F2F2D;
  transition: transform .3s cubic-bezier(.33, 1, .68, 1);
  -webkit-tap-highlight-color: transparent;
}
.modelos[data-tinta="preta"] .modelo { background: #EDEDED; }
.modelo:active { transform: scale(.95); }
.modelo:focus-visible { outline: 2px solid var(--accent-texto); outline-offset: 3px; }
.modelo canvas { display: block; width: 100%; height: 100%; }

@media (prefers-reduced-motion: reduce) {
  .modelo { transition: none; }
}

/* Os chips da letra levam a amostra da cor na frente do nome. O `.chip`
   e grade de uma celula so, e a amostra empilharia em cima do texto. */
.chip.letra { display: inline-flex; align-items: center; gap: 8px; }
.letra__amostra {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1px rgba(128, 128, 128, .6);
}
.letra__amostra--branca { background: #FFFFFF; }
.letra__amostra--preta  { background: #111111; }
.letra__amostra--verde  { background: #0BD25C; }

/* ---------- a folha do modelo (js/folha-modelo.js) ----------
   A anatomia e a das outras folhas (css/components.css, `.escolha`).
   O que muda: ela e ALTA — previa, fundos, mapa, letra e os botoes —,
   entao rola por dentro e nunca passa da tela. O `100dvh` e a altura
   que sobra com a barra do navegador aberta; o `92vh` antes dele e pro
   navegador que ainda nao conhece `dvh`. */
.modelo-folha__folha {
  max-height: 92vh;
  max-height: calc(100dvh - var(--safe-top) - 12px);
  overflow-y: auto;
  overscroll-behavior: contain;
}
/* A alca do topo e botao: numa folha que ocupa a tela quase inteira
   nao sobra scrim pra tocar, e ela e o jeito de fechar que esta sempre
   a vista. */
.modelo-folha__alca {
  display: block;
  width: 44px;
  height: 22px;
  margin: -14px auto 6px;
  padding: 0;
  background: none;
}
.modelo-folha__alca::before {
  content: '';
  display: block;
  width: 40px;
  height: 5px;
  margin: 0 auto;
  border-radius: 3px;
  background: var(--border);
}
.modelo-folha .preview img { max-height: 44vh; }
.modelo-folha .tap--inline {
  font: inherit;
  color: var(--text-2);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.modelo-folha .tap--inline:active { opacity: .6; }

/* Copiar e Compartilhar lado a lado, cada um com metade. A letra desce
   um degrau pra "Compartilhar" com o icone caber na metade de um
   celular de 360px; abaixo disso um vai embaixo do outro. */
.modelo-folha__acoes {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--gap-sm);
  margin-top: var(--gap-lg);
}
/* Com o Baixar (12/10/2026) podem ser tres: o que sobra sozinho na
   ultima linha (o Compartilhar) ocupa a linha inteira. */
.modelo-folha__acoes > :last-child:nth-child(odd) { grid-column: 1 / -1; }
/* O pe preso (12/10/2026): Copiar, Baixar e Compartilhar ficam sempre a
   vista, e as opcoes do Baixar abrem ACIMA deles, dentro do pe. Ele sangra
   ate as bordas da folha pra tapar o que rola por baixo. */
.modelo-folha__pe {
  position: sticky;
  bottom: 0;
  z-index: 2;
  margin: var(--gap-lg) calc(-1 * var(--pad)) 0;
  padding: var(--gap-sm) var(--pad) calc(var(--gap-sm) + var(--safe-bottom));
  background: var(--bg-elev);
  border-top: 1px solid var(--border-soft);
}
.modelo-folha__pe .modelo-folha__acoes { margin-top: 0; }
.modelo-folha__pe .baixar-op { margin: 0 0 var(--gap-sm); }
.modelo-folha__pe + .btn { margin-top: 0; }
.baixar-op { margin-top: var(--gap-md); }
.baixar-op .group-label { margin-bottom: var(--gap-sm); }
.modelo-folha__acoes .btn { padding: 0 10px; font-size: var(--fs-sm); }
@media (max-width: 359px) {
  .modelo-folha__acoes { grid-template-columns: 1fr; }
}

/* ---------- 27 voce / 29 ajustes ---------- */
.danger .row__title { color: var(--risco-texto); }

/* ---------- responsivo: telas bem estreitas ---------- */
@media (max-width: 359px) {
  :root { --pad: 18px; --fs-body: 16px; --gap-xl: 42px; --gap-2xl: 60px; }
  .stats { gap: var(--gap); }
  .avatar--lg { width: 62px; height: 62px; font-size: 22px; }
}

/* ---------- desktop: nao e o foco, so nao deixa feio ---------- */
@media (min-width: 640px) {
  body { background: var(--fora-do-app); }
  #app {
    max-width: 430px;
    margin: 0 auto;
    background: var(--bg);
    min-height: 100vh;   /* fallback */
    min-height: 100dvh;
    box-shadow: 0 0 0 1px var(--border-soft);
  }
  .tabbar { max-width: 430px; left: 50%; transform: translateX(-50%); }
  /* Pela mesma razao da tab bar: a gaveta e fixed, e sem isto ela abriria
     na beira da JANELA, longe da moldura de 430px onde a conversa esta. */
  .lateral { right: auto; width: 430px; left: 50%; transform: translateX(-50%); }
  /* O filme fica na moldura de 430px como qualquer tela: ele e fixed e,
     sem isto, se espalharia pela janela inteira. Mesmo remendo da tab
     bar e da gaveta, logo acima. O que sobra dos lados continua sendo o
     "fora do app" — e por isso o fundo do body volta a ser o de sempre,
     que a regra `body.com-filme` tinha trocado pelo preto do filme. */
  .filme-entrada { right: auto; width: 430px; left: 50%; transform: translateX(-50%); }
  body.com-filme { background: var(--fora-do-app); }
  .toast { left: 50%; }
}

/* ---------- 17 historico de provas ---------- */
/* grid de 2 fileiras: rotulos em cima, valores embaixo — igual ao mockup */
.prova-row {
  display: grid;
  grid-template-columns: 84px 1fr auto;
  align-items: baseline;
  column-gap: 16px;
  row-gap: 4px;
  padding: 19px 0;
  border-bottom: 1px solid var(--border);
  color: inherit;
}
.prova-row__nome  { font-size: var(--fs-body); font-weight: 500; }
.prova-row__pr    { color: var(--accent-texto); font-size: 11px; margin-left: 2px; }
.prova-row__tempo { font-size: 25px; font-weight: 600; letter-spacing: -.03em; white-space: nowrap; }
.prova-row__meta  { font-size: var(--fs-mono-sm); }
.prova-row__score { font-size: 25px; font-weight: 600; letter-spacing: -.02em; text-align: right; }

/* pilha de acoes no topo de perfil publico */
.chips--nowrap { flex-wrap: nowrap; }

/* ============================================================
   30 termos e privacidade
   ------------------------------------------------------------
   Uma tela de LER, e a unica do app que é isso. Tudo aqui serve a duas
   coisas: achar a seção certa num documento longo, e enxergar onde uma
   seção termina e a outra começa num celular.

   A largura do texto continua sendo a do app (`.body`, 22px de lado).
   Não há coluna estreita nem letra menor: quem abre isto no celular já
   está lendo num vão de 4 cm, e apertar mais seria hostil.
   ============================================================ */

/* o resumo: o documento inteiro em cinco linhas, na bandeja do app */
.legal__resumo {
  padding: 18px;
  border-radius: var(--r-lg);
  background: var(--surface);
  color: var(--text);
}

/* fora do portugues: o aviso de que o original prevalece e o botao pra
   ler o original, acima do resumo */
.legal__traducao {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

/* ---------- o índice ----------
   Ele rola a página por JS, nunca por âncora: âncora trocaria o hash, e
   o hash aqui é a rota (ver o mount de js/screens/legal.js). */
.legal__ir {
  display: flex;
  align-items: baseline;
  gap: 10px;
  width: 100%;
  min-height: 44px;
  padding: 7px 0;
  text-align: left;
  font-size: var(--fs-sm);
  line-height: 1.45;
  color: var(--text);
}
.legal__ir:active { opacity: .6; }
.legal__ir-n { flex: none; color: var(--text-3); }

/* ---------- as seções ----------
   `scroll-margin-top` é o que faz o índice parar com o título inteiro à
   vista, em vez de encostado na borda de cima do vidro. */
.legal__secao {
  margin-top: var(--gap-xl);
  scroll-margin-top: calc(var(--safe-top) + 16px);
}
.legal__h { display: flex; gap: 8px; align-items: baseline; }
.legal__h-n { flex: none; }

.legal__p {
  margin-top: var(--gap-sm);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--text-2);
}

/* itens soltos. O marcador é o ponto do meio, que é o separador do app
   inteiro, e não a bolinha do navegador. */
.legal__lista { margin-top: var(--gap-sm); }
.legal__lista li {
  position: relative;
  padding-left: 16px;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--text-2);
}
.legal__lista li + li { margin-top: 6px; }
.legal__lista li::before {
  content: "·";
  position: absolute;
  left: 3px;
  color: var(--text-3);
}

/* termo e explicação: o formato de quase tudo nestes documentos. O
   navegador põe 40px de recuo no dd por conta própria; aqui o recuo é
   zero, porque a linha inteira já é curta no celular. */
.legal__dl { margin: var(--gap-sm) 0 0; }
.legal__dt {
  margin-top: var(--gap);
  font-size: var(--fs-body);
  line-height: 1.4;
  font-weight: 600;
  color: var(--text);
}
.legal__dd {
  margin: 3px 0 0;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--text-2);
}

/* o comentário de rodapé de uma seção: fio na lateral, como citação */
.legal__nota {
  margin-top: var(--gap);
  padding-left: 12px;
  border-left: 2px solid var(--border);
  color: var(--text-3);
}


/* ============================================================
   Dados Pessoais — a lista da evolucao
   ------------------------------------------------------------
   Cada linha e um PAR: o percentual e a frase que ele resume. O
   percentual vai numa coluna fixa a esquerda porque e o que se varre
   com o olho — tres linhas com o numero em posicoes diferentes viram
   um paragrafo, e o ponto da lista e justamente nao ser um.

   `align-items: baseline` e nao center: a frase quebra em duas ou tres
   linhas no celular, e centralizar joga o percentual pro meio do
   paragrafo, longe da linha a que ele pertence.
   ============================================================ */
.evolucao { display: flex; flex-direction: column; gap: var(--gap); }
.evolucao__i {
  display: flex;
  align-items: baseline;
  gap: var(--gap-sm);
}
/* A largura fixa alinha os percentuais entre si. 52px cabe "↓100%" sem
   quebrar; acima disso a coluna comeria a frase numa tela de 360px. */
.evolucao__pct {
  flex: none;
  min-width: 52px;
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  letter-spacing: var(--tr-mono);
  font-weight: 600;
}

/* ---------- 31 por que a sua semana e esta (0082) ----------
   A tela do raciocinio do motor. Quatro passos lidos de cima pra baixo
   como uma frase (vi -> considerei -> o quanto sei -> decidi), e por
   isso cada um abre com o NUMERO em mono: ele diz que ha ordem, e que
   ela importa.

   Nada aqui inventa cor propria: `--certo` e o estado saudavel, `--acao`
   o que pede atencao e `--feito` o que e pouco. A mesma regra do resto
   do app, pra "adequada" verde aqui significar o mesmo que verde em
   qualquer outra tela. */
.porque { margin-top: var(--gap-lg); }
.porque__passo + .porque__passo { margin-top: var(--gap-xl); }
.porque__kicker { margin-bottom: var(--gap-sm); }
.porque__frase { margin-bottom: var(--gap-md); }
.porque__sub { margin-top: var(--gap-lg); }

/* Cada sinal e uma frase do motor. O fio a esquerda amarra a lista: sem
   ele, duas frases soltas parecem paragrafo picado. */
.porque__sinais { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.porque__sinal {
  position: relative;
  padding-left: 16px;
  font-size: var(--fs-body);
  line-height: 1.5;
  color: var(--text-2);
}
.porque__sinal::before {
  content: "";
  position: absolute;
  left: 0;
  top: .55em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
}

/* A disputa das tres hipoteses de carga. UMA barra, porque elas somam 1
   e disputam entre si: tres barras separadas diriam que sao tres medidas
   independentes, que e o oposto do que o motor calculou. */
.porque__barra {
  display: flex;
  height: 12px;
  border-radius: 999px;
  overflow: hidden;
  background: var(--surface);
}
.porque__parte { min-width: 2px; transition: flex-grow var(--dur) var(--ease); }
.porque__parte--baixa    { background: var(--feito); }
.porque__parte--adequada { background: var(--certo); }
.porque__parte--alta     { background: var(--acao); }
/* A que lidera e a unica cheia; as outras recuam. Sem isso a barra vira
   enfeite: a pessoa precisa saber qual delas o motor escolheu. */
.porque__parte:not(.is-lider) { opacity: .38; }

.porque__legenda {
  list-style: none;
  margin: var(--gap-md) 0 0;
  padding: 0;
  display: grid;
  gap: 8px;
}
.porque__chave {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--fs-sm);
  color: var(--text-3);
}
.porque__chave b { margin-left: auto; font-variant-numeric: tabular-nums; }
.porque__chave.is-lider { color: var(--text); font-weight: 600; }
.porque__ponto { width: 10px; height: 10px; border-radius: 50%; flex: none; }
.porque__ponto--baixa    { background: var(--feito); }
.porque__ponto--adequada { background: var(--certo); }
.porque__ponto--alta     { background: var(--acao); }

.porque__hipoteses { list-style: none; margin: var(--gap-sm) 0 0; padding: 0; display: grid; gap: 10px; }
.porque__hipotese {
  display: flex;
  align-items: baseline;
  gap: var(--gap-sm);
  font-size: var(--fs-body);
  line-height: 1.45;
  color: var(--text-2);
}

/* Os degraus da evidencia. Tres, porque tres semanas medidas e a regua
   que a propria tela de assinatura promete. */
.porque__degraus { display: flex; align-items: center; gap: 6px; }
.porque__degrau {
  flex: 1;
  height: 8px;
  border-radius: 999px;
  background: var(--vazio);
}
.porque__degrau.is-cheio { background: var(--certo); }
.porque__conta { flex: none; margin-left: 4px; }

.porque__decisao {
  padding: var(--gap-md) var(--gap);
  border-radius: var(--r-card);
  background: var(--bg-elev);
  box-shadow: inset 0 0 0 1.5px var(--border);
}
.porque__decisao--certo  { box-shadow: inset 0 0 0 1.5px var(--certo-fio); background: var(--certo-fundo); }
.porque__decisao--alerta { box-shadow: inset 0 0 0 1.5px var(--acao-fio);  background: var(--acao-fundo); }
.porque__veto {
  color: var(--acao-texto);
  font-weight: 600;
}

/* O link pra tela do porque, no Plano: alinhado com a leitura acima e
   com respiro proprio, pra nao colar no primeiro dia da semana. */
.plano__porque { display: inline-block; margin-top: var(--gap-sm); }

/* ---------- a entrada: a marca e o idioma na mesma linha ---------- */
.s-splash__topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
/* Por cima do filme: vidro escuro, letra branca (a mesma regra da
   frase la embaixo). */
.s-splash .idioma-pilula {
  color: #fff;
  background: rgba(0, 0, 0, .38);
  border: 1px solid rgba(255, 255, 255, .22);
}

/* ============================================================
   HOJE (27/09/2026): um botao e o lembrete que abre e fecha. A semana
   continua no cartao da linha (js/saldo.js), como sempre foi.
   ============================================================ */
/* O botao principal do dia: largura inteira, 56px, na altura do polegar. */
.btn--grande { min-height: 56px; }

/* distancia e pace do treino, numa linha: o numero grande e o resto */

/* As duas portas secundarias como link de texto sairam em 28/09/2026:
   a Hoje voltou as tres pilulas (.par no css/components.css). */

/* ---------- um botao so, e as tres atras dele (29/09/2026) ----------
   Quem manda no estado e o `#hoje-dia`, o bloco inteiro: e ele que
   guarda `data-escolhendo`, e e por isso que o TITULO da tela pode
   trocar junto com o botao sem ninguem repintar nada.

   Fechado: o titulo do dia e o botao "Correr".
   Aberto:  a instrucao no lugar do titulo e as tres portas no lugar do
            botao. Nenhuma preenchida: a escolha do como nao tem
            favorita, e um preenchido sozinho na tela seria uma
            resposta que o app nao tem. */
.hoje-escolhendo { display: none; }
#hoje-dia[data-escolhendo="true"] .hoje-titulo { display: none; }
#hoje-dia[data-escolhendo="true"] .hoje-escolhendo { display: block; }

.saida__portas { display: none; }
#hoje-dia[data-escolhendo="true"] .saida__abre { display: none; }
#hoje-dia[data-escolhendo="true"] .saida__portas { display: block; }

/* O link da sensacao, embaixo de tudo e do tamanho do proprio recado. */
.saida__apagado {
  display: inline-flex; align-items: center;
  margin-top: 4px;
  color: var(--text-3);
  font-size: var(--fs-sm);
}

/* ---------- o que abre e fecha (lembrete) ----------
   Sem contorno (28/09/2026): o fundo e o mesmo tom dos cartoes do app. */
.recolhe {
  border-radius: var(--r-card);
  background: var(--surface);
}
.recolhe__cabeca {
  display: flex; align-items: center; gap: 12px;
  width: 100%; min-height: 56px; padding: 8px 16px;
  text-align: left; color: var(--text);
}
.recolhe__ic { display: flex; color: var(--text-2); }
.recolhe__ic svg { width: 20px; height: 20px; }
.recolhe__titulo { font-weight: 600; }
.recolhe__resumo { margin-left: auto; color: var(--text-2); font-size: var(--fs-sm); text-align: right; }
.recolhe__seta { display: flex; color: var(--text-3); transition: transform .2s var(--ease); }
.recolhe__seta svg { width: 18px; height: 18px; }
.recolhe[data-aberto="true"] .recolhe__seta { transform: rotate(90deg); }
.recolhe__dobra {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .22s var(--ease);
}
.recolhe[data-aberto="true"] .recolhe__dobra { grid-template-rows: 1fr; }
.recolhe__dentro { min-height: 0; overflow: hidden; }
.recolhe[data-aberto="false"] .recolhe__dentro { visibility: hidden; }
.recolhe__dentro > div { padding: 0 8px 8px; }
.recolhe__dentro > div > :first-child { margin-top: 0; }
/* dentro da dobra o cartao do lembrete nao repete o fundo de fora */
.recolhe .card { box-shadow: none; padding-top: 0; }
@media (prefers-reduced-motion: reduce) {
  .recolhe__dobra, .recolhe__seta { transition: none; }
}

/* ---------- plano: a prova como link, a 48px do polegar ---------- */
.plano__prova {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 48px; text-decoration: none; color: var(--text-2);
}
.plano__prova svg { width: 18px; height: 18px; flex: none; }
.plano__prova span { text-decoration: underline; text-underline-offset: 3px; }

/* ============================================================
   RESPOSTA EM BOTAO GRANDE (pos-treino, cadastro, Editar Plano)
   ------------------------------------------------------------
   Cada resposta e um botao de largura inteira e 56px (Fitts), com a
   palavra toda escrita (Krug: nada de "1 a 5" pra decifrar). Marcado:
   o verde cheio do app e um visto; o "Dolorido" marcado veste o
   vermelho, porque e a resposta que trava o plano.
   ============================================================ */
.opcoes { display: flex; flex-direction: column; gap: 8px; }
.opcao {
  display: flex; align-items: center; justify-content: space-between;
  width: 100%; min-height: 56px; padding: 0 16px;
  border-radius: var(--r);
  background: var(--surface);
  font-size: var(--fs-lg); font-weight: 500; color: var(--text);
  text-align: left;
  transition: background .12s var(--ease), box-shadow .12s var(--ease);
}
.opcao:active { transform: scale(.99); }
.opcao[aria-checked="true"] { background: var(--certo); color: var(--on-accent); box-shadow: none; }
.opcao[aria-checked="true"]::after { content: '✓'; font-weight: 800; }
.opcao--risco[aria-checked="true"] { background: #C4271C; color: #FFFFFF; }
.opcao__sub { display: block; font-size: var(--fs-sm); font-weight: 400; color: inherit; opacity: .8; }

/* "Publicar na rede": uma caixa de marcar, com a linha inteira tocavel */
.linha-marcar {
  display: flex; align-items: center; gap: 12px;
  min-height: 48px; color: var(--text-2); font-size: var(--fs-sm);
}
.linha-marcar input { appearance: auto; -webkit-appearance: checkbox; width: 22px; height: 22px; margin: 0; accent-color: var(--accent); flex: none; }
.linha-marcar span { display: inline-flex; align-items: center; gap: 6px; }
.linha-marcar svg { width: 18px; height: 18px; }
#erro:not([hidden]) { color: var(--risco-texto); font-weight: 600; }

/* ---------- com a faixa de cookie na tela (03/10/2026) ----------
   Quem abre o site pela primeira vez ve a faixa, e ela tira 168px da
   tela (css/components.css). Um celular de 812 vira um de 644: e o
   mesmo aperto do "celular curto" ali em cima, entao o cartao usa o
   mesmo desenho apertado ate 868 de altura (700 + 168).

   A margem embaixo e a saida pro que ainda assim nao couber: sem ela a
   faixa, que e fixa, cobria o "Criar conta" e a pagina nao tinha pra
   onde rolar. Quando o cartao cabe, tela encurtada + margem dao a
   altura exata da janela e nada rola. */
body.tem-consent .s-auth { margin-bottom: 168px; }
@media (max-height: 868px) {
  body.tem-consent .cartao-auth { padding: 16px 18px 18px; }
  body.tem-consent .cartao-auth .h1 { font-size: clamp(23px, 6.4vw, 27px); }
  body.tem-consent .cartao-auth .mt-xl { margin-top: var(--gap); }
  body.tem-consent .cartao-auth .mt-md { margin-top: var(--gap); }
  body.tem-consent .cartao-auth .field { padding: 12px 0 10px; }
  body.tem-consent .cartao-auth .field__label { margin-bottom: 6px; }
  body.tem-consent .cartao-auth .btn { min-height: 46px; }
  body.tem-consent .cartao-auth .btn--ghost { min-height: 44px; }
}

/* ============================================================
   PLANO: O CALENDARIO DO MES (08/10/2026, js/calendario-plano.js)
   ------------------------------------------------------------
   Pedido do dono: o plano vira calendario, bonito, com as cores. A cor
   e so o estado, a mesma da etiqueta: verde feito, amarelo pulou, cheio
   planejado, contorno descanso. A semana do plano e uma faixa verde
   diluida atravessando a fileira dela; hoje e o numero na pilula
   escura, como a etiqueta "Hoje".
   ============================================================ */
.calp {
  padding: 14px 12px 16px;
  border-radius: var(--r-card);
  background: var(--surface);
}
.calp__topo {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 8px;
}
.calp__mes { font-size: 17px; font-weight: 600; letter-spacing: -.01em; }
.calp__seta {
  display: grid; place-items: center;
  width: 44px; height: 44px; margin: -6px;
  border: 0; border-radius: var(--r-pill);
  background: none; color: var(--text-2);
}
.calp__seta svg {
  width: 18px; height: 18px;
  fill: none; stroke: currentColor; stroke-width: 1.8;
  stroke-linecap: round; stroke-linejoin: round;
}
.calp__seta:active { background: var(--surface-2); }

.calp__grade {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  row-gap: 4px;
}
.calp__sem {
  padding: 4px 0 6px;
  text-align: center;
  font-size: 12px; font-weight: 600; color: var(--text-3);
}
.calp__dia {
  position: relative;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 4px;
  height: 48px;
  padding: 0; border: 0;
  background: none; color: var(--text);
  font: inherit;
}
button.calp__dia { cursor: pointer; }
.calp__n {
  display: grid; place-items: center;
  min-width: 28px; height: 24px; padding: 0 4px;
  border-radius: var(--r-pill);
  font-size: 15px; font-variant-numeric: tabular-nums;
  transition: background .15s var(--ease), color .15s var(--ease);
}
.calp__dia.is-fora { color: var(--text-3); opacity: .45; }

/* a faixa da semana do plano: uma fileira so, porque a grade comeca na
   segunda como o plano */
.calp__dia.is-semana { background: var(--certo-fundo); }
.calp__dia.is-semana-ini { border-radius: 16px 0 0 16px; }
.calp__dia.is-semana-fim { border-radius: 0 16px 16px 0; }

.calp__dia.is-hoje .calp__n { background: var(--text); color: var(--bg); font-weight: 600; }
.calp__dia.is-sel .calp__n { box-shadow: 0 0 0 2px var(--text); }
.calp__dia.is-hoje.is-sel .calp__n { box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--text); }
button.calp__dia:active .calp__n { scale: .92; }

.calp__ponto {
  display: inline-block;
  width: 7px; height: 7px; border-radius: 50%;
  flex: none;
}
.calp__ponto--feito     { background: var(--certo); }
.calp__ponto--pulou     { background: var(--warn); }
.calp__ponto--planejado { background: var(--text); }
.calp__ponto--descanso  { box-shadow: inset 0 0 0 1.5px var(--text-3); }

.calp__legenda {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: 6px 14px;
  margin-top: 12px;
  font-size: 12px; color: var(--text-3);
}
.calp__legenda span { display: inline-flex; align-items: center; gap: 6px; }

/* ---------- o dia tocado ---------- */
.calp__detalhe {
  margin-top: 14px; padding-top: 14px;
  border-top: 1px solid var(--border);
}
.calp__dica { text-align: center; font-size: 14px; color: var(--text-3); }
.calp__linha {
  padding: 13px 14px 12px;
  border-radius: var(--r-lg);
  background: var(--bg);
}
.calp__linha + .calp__linha { margin-top: 8px; }
.calp__linha--certo { background: var(--certo-fundo); }
.calp__linha--acao  { background: var(--acao-fundo); }
.calp__linha--feito { background: var(--feito-fundo); box-shadow: inset 0 0 0 1px var(--border); }
.calp__linha--vazio { background: var(--vazio-fundo); box-shadow: inset 0 0 0 1px var(--vazio); }
.calp__linha-topo { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 22px; }
.calp__data { font-size: 13px; font-weight: 600; color: var(--text-2); }
.calp__acoes { display: inline-flex; align-items: center; gap: 10px; }
.calp__titulo { margin-top: 6px; font-size: 19px; font-weight: 600; letter-spacing: -.01em; }
.calp__linha--vazio .calp__titulo { color: var(--text-3); font-weight: 500; }
.calp__nota { margin-top: 2px; font-size: 14px; color: var(--text-2); }
.calp__abrir {
  display: inline-flex; align-items: center; gap: 2px;
  min-height: 44px; margin-bottom: -8px;
  font-size: 15px; font-weight: 600; color: var(--text); text-decoration: none;
}
.calp__abrir svg {
  width: 16px; height: 16px;
  fill: none; stroke: currentColor; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
}
.calp__detalhe.is-entrando > * { animation: calp-entra .26s var(--ease) both; }
@keyframes calp-entra {
  from { opacity: 0; transform: translateY(6px); filter: blur(4px); }
}
@media (prefers-reduced-motion: reduce) {
  .calp__detalhe.is-entrando > * { animation: none; }
  .calp__n { transition: none; }
  button.calp__dia:active .calp__n { scale: 1; }
}

/* ============================================================
   O calendario conectado (17/10/2026, segunda volta)
   ------------------------------------------------------------
   Pedido do dono: o mes inteiro sempre a vista, no desenho da referencia
   que ele mandou (o anel em volta do dia, a agenda por dia embaixo), o
   cartao preto do Briefing da semana no topo (a referencia "Go
   premium"), e os modais no molde do "Resolver tudo" do Coach, com os
   desenhos de la (css/desenhos.css). A cor do anel e so o estado.
   ============================================================ */

/* ---------- o anel do dia ---------- */
.calp__dia { gap: 2px; height: 46px; }
.calp__dia .calp__n { width: 34px; min-width: 34px; height: 34px; padding: 0; border-radius: 50%; border: 1.5px solid transparent; }
.calp__dia[data-estado="feito"] .calp__n { border-color: var(--certo); }
.calp__dia[data-estado="pulou"] .calp__n { border-color: var(--warn); }
.calp__dia[data-estado="planejado"] .calp__n { border-color: color-mix(in srgb, var(--text) 55%, transparent); }
.calp__dia[data-estado="descanso"] .calp__n { border-color: color-mix(in srgb, var(--text) 26%, transparent); border-style: dashed; }
.calp__dia.is-sel .calp__n { box-shadow: none; background: color-mix(in srgb, var(--text) 9%, transparent); }
.calp__dia.is-hoje .calp__n, .calp__dia.is-hoje.is-sel .calp__n { box-shadow: none; background: var(--text); color: var(--bg); }
.calp__ponto--coach { width: 4px; height: 4px; background: var(--text-2); box-shadow: none; }
.calp__anel { display: inline-block; width: 11px; height: 11px; border-radius: 50%; border: 1.5px solid transparent; }
.calp__anel--feito { border-color: var(--certo); }
.calp__anel--pulou { border-color: var(--warn); }
.calp__anel--planejado { border-color: color-mix(in srgb, var(--text) 55%, transparent); }
.calp__anel--descanso { border-color: color-mix(in srgb, var(--text) 26%, transparent); border-style: dashed; }
.calp__status:empty { display: none; }
.calp__status { margin-top: 10px; text-align: center; font-size: 13px; color: var(--text-3); }
.calp__status .link-texto { font-size: 13px; }

/* ============================================================
   O calendario minimalista (18/10/2026, terceira volta)
   ------------------------------------------------------------
   Pedido do dono, com a referencia de um app de treinos: o placar
   grande no topo, o mes e o ano fora do cartao e o dia feito como um
   circulo verde cheio com o desenho dentro. Segunda volta, no mesmo
   dia ("quanto mais simples visualmente, melhor"): a semana do plano e
   de novo a faixa verde transparente, hoje e o circulo cheio, e todo o
   resto e um cinza so. Sem amarelo, sem chama, sem legenda.
   ============================================================ */
.calp-placar { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 0 4px; }
.calp-placar__n { font-size: 68px; line-height: .9; font-weight: 700; letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.calp-placar__txt { display: flex; flex-direction: column; min-width: 0; font-size: 22px; line-height: 1.12; font-weight: 700; letter-spacing: -.02em; }
.calp-placar__txt span { overflow-wrap: anywhere; }
.calp-placar__lado { display: flex; flex-direction: column; align-items: flex-end; max-width: 92px; text-align: right; font-size: 13px; line-height: 1.25; font-weight: 600; }
.calp-placar__lado b { font-size: 17px; color: var(--text); }

.calp { padding: 0; background: none; border-radius: 0; }
.calp__topo { margin: 0 4px 8px; }
.calp__mes { font-size: 15px; font-weight: 600; color: var(--text-2); letter-spacing: 0; }
.calp__nav { display: inline-flex; align-items: center; gap: 2px; }
.calp__ano { margin-right: 8px; font-size: 15px; font-weight: 600; color: var(--text-2); font-variant-numeric: tabular-nums; }
.calp__seta { width: 36px; height: 36px; margin: 0; }
.calp__grade {
  row-gap: 8px;
  padding: 14px 10px 16px;
  border-radius: 26px;
  background: var(--surface);
}
.calp__sem { padding: 2px 0 4px; font-size: 13px; font-weight: 500; }
.calp__dia { height: 44px; }
.calp__dia .calp__n {
  width: 36px; min-width: 36px; height: 36px;
  border: 0; border-radius: 50%;
  font-size: 15px; color: var(--text);
}
.calp__dia .calp__n svg {
  width: 20px; height: 20px;
  fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}
.calp__dia.is-fora { opacity: .35; }
/* o estado em tinta transparente (18/10/2026, pedido do dono): verde
   fraco no dia que a pessoa foi, amarelo fraco no dia que pulou, cinza
   leve no planejado. O que ja passou sem nada apaga. */
.calp__dia.is-passado .calp__n { color: var(--text-3); }
.calp__dia[data-estado="descanso"] .calp__n { border-color: transparent; box-shadow: none; }
.calp__dia[data-estado="planejado"] .calp__n { background: color-mix(in srgb, var(--text) 8%, transparent); border-color: transparent; }
.calp__dia[data-estado="feito"] .calp__n { background: color-mix(in srgb, var(--certo) 34%, transparent); color: var(--text); border-color: transparent; box-shadow: none; }
.calp__dia[data-estado="pulou"] .calp__n { background: color-mix(in srgb, var(--warn) 30%, transparent); color: var(--text); border-color: transparent; box-shadow: none; }
/* o dia tocado: a MESMA cor, so que cheia */
.calp__dia.is-sel[data-estado="feito"] .calp__n { background: var(--certo); color: #fff; }
.calp__dia.is-sel[data-estado="pulou"] .calp__n { background: var(--warn); color: #3D2C00; }
.calp__dia.is-sel[data-estado="planejado"] .calp__n { background: color-mix(in srgb, var(--text) 26%, transparent); }
.calp__dia.is-sel:not(.is-hoje):not([data-estado="feito"]):not([data-estado="pulou"]):not([data-estado="planejado"]) .calp__n { background: color-mix(in srgb, var(--text) 14%, transparent); }
/* hoje: o circulo cheio, como a etiqueta "Hoje" */
.calp__dia.is-hoje .calp__n, .calp__dia.is-hoje.is-sel .calp__n { background: var(--text); color: var(--bg); font-weight: 700; box-shadow: none; }
.calp__dia.is-hoje[data-estado="feito"] .calp__n { background: var(--certo); color: #fff; }
.calp__ponto--coach { position: absolute; bottom: 0; left: 50%; translate: -50% 0; width: 4px; height: 4px; }

/* a faixa da semana do plano: o verde transparente atravessando a fileira */
.calp__dia.is-semana { background: var(--certo-fundo); }
.calp__dia.is-semana-ini { border-radius: 22px 0 0 22px; }
.calp__dia.is-semana-fim { border-radius: 0 22px 22px 0; }

/* o toque num dia: a folha da casa com as orbitas da pagina do treino */
.hist__orbita { display: block; width: 100%; }
.hist__orbita .treino-orbita { display: block; width: min(100%, 220px); height: auto; margin: 0 auto; color: var(--text); }
.hist__linha { margin: 10px 0 0; font-size: 14px; font-weight: 600; color: var(--text); font-variant-numeric: tabular-nums; }

/* a acao do Plano: correr em destaque, editar como link discreto */
.plano-correr .btn { width: 100%; }
.plano__editar-link { display: inline-flex; align-items: center; gap: 6px; }

/* ---------- a agenda (a lista por dia da referencia) ---------- */
.agenda__dia + .agenda__dia { margin-top: 22px; }
.agenda.is-entrando .agenda__dia { animation: calp-entra .32s var(--ease) both; animation-delay: calc(var(--i, 0) * 70ms); }
.agenda__cab { display: flex; align-items: center; gap: 12px; margin: 0 0 6px; font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--text-2); }
.agenda__cab::after { content: ''; flex: 1; height: 1px; background: var(--border); }
.agenda__item { position: relative; display: flex; align-items: center; }
.agenda__link {
  flex: 1; min-width: 0;
  display: grid; grid-template-columns: 62px 14px minmax(0, 1fr); align-items: center; gap: 10px;
  min-height: 56px; padding: 8px 0;
  color: var(--text); text-decoration: none;
}
a.agenda__link:active { opacity: .6; }
.agenda__med { display: grid; gap: 1px; font-variant-numeric: tabular-nums; }
.agenda__med b { font-size: 14px; font-weight: 600; color: var(--text-2); }
.agenda__med small { font-size: 12px; color: var(--text-3); }
.agenda__ponto { justify-self: center; width: 8px; height: 8px; border-radius: 50%; }
.agenda__ponto--feito { background: var(--certo); }
.agenda__ponto--pulou { background: var(--warn); }
.agenda__ponto--planejado { background: var(--text); }
.agenda__ponto--descanso { box-shadow: inset 0 0 0 1.5px var(--text-3); }
.agenda__ponto.is-coach { box-shadow: 0 0 0 2.5px var(--bg), 0 0 0 3.7px var(--text-2); }
.agenda__txt { display: grid; gap: 2px; min-width: 0; }
.agenda__txt b { font-size: 16px; font-weight: 600; letter-spacing: -.01em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.agenda__txt small { font-size: 13.5px; color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.agenda__item.is-descanso .agenda__txt b { font-weight: 500; color: var(--text-3); }
.agenda__lapis { flex: none; display: grid; place-items: center; width: 44px; height: 44px; margin-right: -10px; border: 0; background: none; color: var(--text-3); }
.agenda__lapis svg { width: 18px; height: 18px; }
.agenda__vazio { padding: 10px 0; font-size: 14px; color: var(--text-3); }
.agenda__comecar { margin-top: 8px; }
.cal-conflito {
  display: flex; align-items: flex-start; gap: 8px;
  margin: 4px 0 6px; padding: 10px 12px;
  border-radius: var(--r-sm);
  background: var(--acao-fundo); color: var(--acao-texto);
  font-size: 13px; line-height: 1.4;
}
.cal-conflito svg { flex: none; width: 16px; height: 16px; margin-top: 1px; }

/* ---------- o cartao do Briefing ----------
   Pedido do dono (17/10/2026, segunda vez): o cartao preto com brilho e
   pontos ficou "atipico"; agora e um cartao da casa, mais minimalista:
   a superficie do app, o raio do cartao, a faisca no verde do texto e a
   seta num circulo neutro. Um toque abre o Briefing. */
.brief-cartao {
  display: flex; align-items: center; gap: 14px; width: 100%;
  min-height: 68px; padding: 14px 14px 14px 18px;
  border: 0; border-radius: var(--r-card); cursor: pointer; text-align: left; font: inherit;
  color: var(--text); background: var(--surface);
  transition: scale .15s var(--ease);
}
.brief-cartao:active { scale: .985; }
.brief-cartao__ic { flex: none; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%;
  background: var(--accent-tint); color: var(--accent-texto); }
.brief-cartao__ic svg { width: 20px; height: 20px; }
.brief-cartao__txt { flex: 1; display: grid; gap: 2px; min-width: 0; }
.brief-cartao__txt b { font-size: 16px; font-weight: 600; letter-spacing: -.01em; }
.brief-cartao__txt small { font-size: 13.5px; color: var(--text-2); }
.brief-cartao__seta { flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%;
  background: var(--bg); color: var(--text-2); }
.brief-cartao__seta svg { width: 18px; height: 18px; }

/* o Editar plano como segunda opcao: contorno e menor (pedido do dono, 17/10/2026) */
.plano__editar { min-height: 46px; font-size: 15px; font-weight: 600; }
.plano__editar svg { width: 18px; height: 18px; }

/* ---------- o modal que conta em partes (o molde do Resolver do Coach) ---------- */
.hist { position: fixed; inset: 0; z-index: 120; display: grid; place-items: end center; padding: 8px; }
.hist__veu { position: absolute; inset: 0; background: rgba(0, 0, 0, .5); opacity: 0; transition: opacity .22s var(--ease); }
.hist__caixa {
  position: relative; width: min(500px, 100%); max-height: calc(100dvh - 16px); overflow-y: auto; overscroll-behavior: contain;
  padding: 22px 20px 0; border-radius: 26px;
  background: var(--bg-elev, var(--bg)); color: var(--text);
  box-shadow: 0 24px 64px rgba(0, 0, 0, .32);
  transform: translateY(40px); opacity: 0;
  transition: transform var(--mola-folha-dur) var(--mola-folha), opacity .2s var(--ease);
}
.hist.is-on .hist__veu { opacity: 1; }
.hist.is-on .hist__caixa { transform: none; opacity: 1; }
@media (min-width: 560px) { .hist { place-items: center; padding: 16px; } .hist__caixa { padding: 28px 28px 0; } }
.hist__topo { display: grid; gap: 10px; margin-bottom: 4px; }
.hist__passo { margin: 0; font-size: 14px; color: var(--text-2); }
.hist__trilha { list-style: none; display: flex; gap: 6px; margin: 0; padding: 0; }
.hist__trilha li { flex: 1; height: 4px; border-radius: 4px; background: color-mix(in srgb, var(--text) 12%, transparent); transition: background-color .3s ease; }
.hist__trilha li.is-on { background: var(--accent); }
.hist__corpo.is-entrando > * { animation: calp-entra .34s var(--ease) both; }
.hist__corpo.is-entrando > :nth-child(2) { animation-delay: 60ms; }
.hist__corpo.is-entrando > :nth-child(3) { animation-delay: 120ms; }
.hist__corpo.is-entrando > :nth-child(n+4) { animation-delay: 180ms; }
.hist__desenho { display: grid; place-items: center; margin: 14px 0 8px; color: var(--text); }
.hist__desenho .traco { width: 96px; height: 96px; }
.hist__kicker { margin: 14px 0 4px; font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--text-3); }
.hist__desenho + .hist__kicker { margin-top: 4px; }
.hist__titulo { margin: 6px 0 0; font-size: 22px; line-height: 1.3; font-weight: 600; letter-spacing: -.01em; }
.hist__texto { margin: 8px 0 0; font-size: 15px; line-height: 1.5; color: var(--text-2); }
.hist__lista { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 8px; }
.hist__lista li { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 12px; align-items: center; padding: 12px 14px;
  border-radius: 16px; border: 1px solid var(--border); background: color-mix(in srgb, var(--text) 3%, transparent); }
.hist__lista li > span:last-child { display: grid; gap: 1px; min-width: 0; }
.hist__lista b { font-size: 16px; font-weight: 600; }
.hist__lista small { font-size: 14px; color: var(--text-2); }
.hist__li-ic { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--accent); color: var(--on-accent, #fff); }
.hist__pe {
  position: sticky; bottom: 0; display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin: 22px -20px 0; padding: 14px 20px calc(16px + env(safe-area-inset-bottom, 0px));
  background: var(--bg-elev, var(--bg)); border-top: 1px solid var(--border);
}
@media (min-width: 560px) { .hist__pe { margin-inline: -28px; padding-inline: 28px; } }
.hist__pe .btn { width: auto; min-height: 48px; padding-inline: 24px; }
.hist__pe .btn--outline { border: 0; background: color-mix(in srgb, var(--text) 7%, transparent); }
.hist__pe .btn--primary { margin-left: auto; }

/* ---------- os graficos do Briefing (as referencias "Steps" e "Overall Progress") ---------- */
.brief-cartao-gr { margin-top: 16px; padding: 16px 16px 12px; border-radius: 22px; background: color-mix(in srgb, var(--text) 4%, transparent); }
.brief-stats { display: flex; gap: 14px; margin-bottom: 8px; }
.brief-stats p { display: grid; gap: 1px; margin: 0; }
.brief-stats p + p { padding-left: 14px; border-left: 1px solid var(--border); }
.brief-stats b { font-size: 24px; font-weight: 600; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.brief-stats small { font-size: 12px; color: var(--text-3); }
.gr { position: relative; }
.gr--linha svg { display: block; width: 100%; height: clamp(110px, 32vw, 140px); overflow: visible; }
.gr-traco { fill: none; stroke: var(--text); stroke-width: 2; stroke-linecap: round; vector-effect: non-scaling-stroke; stroke-dasharray: 1; stroke-dashoffset: 1; }
.gr-area { opacity: 0; }
.gr-hoje { stroke: var(--border); stroke-width: 1; stroke-dasharray: 3 3; vector-effect: non-scaling-stroke; }
.gr-guia { stroke: var(--text-3); stroke-width: 1; vector-effect: non-scaling-stroke; }
.gr-ponto { fill: var(--accent); stroke: var(--bg-elev, var(--bg)); stroke-width: 2; vector-effect: non-scaling-stroke; }
.gr-balao { opacity: 0; transform: scale(.4); }
.gr-valor { position: absolute; translate: -50% -150%; padding: 3px 8px; border-radius: 10px; background: var(--bg-elev, var(--bg));
  box-shadow: 0 2px 10px rgba(0, 0, 0, .12); font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; opacity: 0; }
.gr-dias, .gr--barras { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.gr-dias { margin-top: 6px; }
.gr-dias span, .gr-letra { text-align: center; font-size: 12px; font-weight: 600; color: var(--text-3); }
.gr-dias .is-hoje, .gr-col.is-hoje .gr-letra { color: var(--text); }
.gr.is-pronto .gr-traco { stroke-dashoffset: 0; transition: stroke-dashoffset .9s cubic-bezier(.33, 1, .68, 1); }
.gr.is-pronto .gr-area { opacity: 1; transition: opacity .6s var(--ease) .35s; }
.gr.is-pronto .gr-balao { opacity: 1; transform: none; transition: transform var(--mola-pilula-dur) var(--mola-pilula) .75s, opacity .2s .75s; }
.gr.is-pronto .gr-valor { opacity: 1; transition: opacity .25s var(--ease) .85s; }
.gr--barras { gap: 6px; height: clamp(120px, 36vw, 160px); }
.gr-col { display: grid; grid-template-rows: 16px 1fr 18px; justify-items: center; gap: 4px; min-width: 0; }
.gr-num { font-size: 11px; font-weight: 600; color: var(--text-2); font-variant-numeric: tabular-nums; white-space: nowrap; opacity: 0; }
.gr-trilho { position: relative; width: min(28px, 78%); height: 100%; border-radius: var(--r-pill); overflow: hidden;
  background: color-mix(in srgb, var(--text) 7%, transparent); }
.gr-cheio { position: absolute; left: 0; right: 0; bottom: 0; border-radius: var(--r-pill); background: var(--accent); transform: scaleY(0); transform-origin: 50% 100%; }
.gr.is-pronto .gr-cheio { transform: none; transition: transform var(--mola-trilho-dur) var(--mola-trilho) calc(var(--i, 0) * 50ms + 80ms); }
.gr.is-pronto .gr-num { opacity: 1; transition: opacity .25s var(--ease) .6s; }
.brief-anel { display: flex; align-items: center; gap: 18px; }
.gr--anel { flex: none; width: 112px; height: 112px; }
.gr--anel svg { width: 100%; height: 100%; }
.gr-anel-fundo, .gr-anel-arco { fill: none; stroke-width: 9; }
.gr-anel-fundo { stroke: color-mix(in srgb, var(--text) 8%, transparent); }
.gr-anel-arco { stroke: var(--accent); stroke-linecap: round; stroke-dasharray: var(--c); stroke-dashoffset: var(--c); }
.gr--anel.is-pronto .gr-anel-arco { stroke-dashoffset: var(--fim); transition: stroke-dashoffset 1s cubic-bezier(.33, 1, .68, 1) .1s; }
.gr-anel-num { position: absolute; inset: 0; display: grid; place-items: center; font-size: 15px; font-weight: 600; color: var(--text-2); }
.gr-anel-num b { font-size: 26px; color: var(--text); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.gr-anel-num { grid-auto-flow: column; align-content: center; justify-content: center; align-items: baseline; }
.brief-anel__txt { display: grid; gap: 3px; margin: 0; }
.brief-anel__txt b { font-size: 17px; font-weight: 600; }
.brief-anel__txt small { font-size: 13.5px; color: var(--text-2); }

@media (prefers-reduced-motion: reduce) {
  .agenda.is-entrando .agenda__dia, .hist__corpo.is-entrando > * { animation: none; }
  .hist__veu, .hist__caixa, .brief-cartao { transition: none; }
  .gr .gr-traco { stroke-dashoffset: 0; } .gr .gr-area, .gr .gr-balao, .gr .gr-valor, .gr .gr-num { opacity: 1; transform: none; }
  .gr .gr-cheio { transform: none; } .gr--anel .gr-anel-arco { stroke-dashoffset: var(--fim); }
  .gr.is-pronto * { transition: none !important; }
}

/* ---------- a origem na tela do treino ---------- */
.cal-origem { display: flex; align-items: center; gap: 6px; margin-top: 6px; font-size: 12.5px; color: var(--text-2); }
.cal-origem__ic { display: inline-flex; flex: none; color: var(--text-3); }
.cal-origem__ic svg { width: 15px; height: 15px; }
.cal-origem__ic .zentry-logo { width: auto; height: 13px; color: currentColor; fill: currentColor; }
.cal-origem[data-origem="coach"] { color: var(--text); font-weight: 600; }
.cal-origem[data-origem="coach"] .cal-origem__ic { color: var(--text); }
.cal-presc { margin: 0; }
.cal-presc__item + .cal-presc__item { margin-top: 10px; }
.cal-presc dt { font-size: 12px; font-weight: 600; color: var(--text-3); }
.cal-presc dd { margin: 2px 0 0; font-size: 14px; line-height: 1.45; color: var(--text); }

/* ============================================================
   A prescricao apresentada (17/10/2026, terceira volta)
   ------------------------------------------------------------
   Sem caixa cinza: o respiro e o fundo da tela. Um roteiro que desce
   (a linha liga os tempos), cada tempo com o seu desenho num circulo
   neutro, as repeticoes em capsulas, a regua do esforco e o recado como
   uma fala. Tudo entra quando a pessoa chega, uma parte depois da outra.
   ============================================================ */
.presc { margin-top: 36px; padding-top: 28px; border-top: 1px solid var(--border); }
.presc__abre { display: grid; justify-items: center; text-align: center; gap: 6px; margin-bottom: 30px; }
.presc__desenho .traco { width: 88px; height: 88px; }
.presc__quem { margin-top: 6px; font-size: 13px; font-weight: 600; letter-spacing: .02em; color: var(--text-2); }
.presc__titulo { max-width: 22ch; font-size: 24px; line-height: 1.25; font-weight: 600; letter-spacing: -.015em; }
.presc__tempos { position: relative; list-style: none; margin: 0; padding: 0; display: grid; gap: 26px; }
.presc__tempos::before { content: ''; position: absolute; left: 21px; top: 22px; bottom: 22px; width: 1.5px;
  background: color-mix(in srgb, var(--text) 14%, transparent); transform-origin: top; }
.presc__tempo { position: relative; display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 16px; align-items: start; }
.presc__ic { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%;
  background: var(--bg); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--text) 16%, transparent); color: var(--text); }
.presc__ic svg { width: 24px; height: 24px; }
.presc__tempo-txt { padding-top: 2px; min-width: 0; }
.presc__rotulo { font-size: 12px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--text-3); }
.presc__rotulo b { margin-left: 6px; letter-spacing: 0; text-transform: none; color: var(--text); }
.presc__texto { margin-top: 4px; font-size: 16px; line-height: 1.5; color: var(--text); }
.presc__serie { margin-top: 12px; }
.presc__caps { display: flex; flex-wrap: wrap; gap: 6px; }
.presc__caps span { width: 26px; height: 40px; border-radius: 13px; background: var(--accent);
  box-shadow: inset 0 -10px 0 color-mix(in srgb, #000 10%, transparent); }
.presc__serie-txt { margin-top: 10px; font-size: 14.5px; color: var(--text-2); }
.presc__serie-txt b { color: var(--text); font-weight: 600; }
.presc__esforco { margin-top: 30px; }
.presc__regua { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 4px; margin-top: 10px; }
.presc__regua span { height: 10px; border-radius: 5px; background: color-mix(in srgb, var(--text) 10%, transparent); }
.presc__regua span.is-on { background: color-mix(in srgb, var(--accent) calc(100% - var(--k) * 7%), var(--warn)); }
.presc__recado { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 16px; margin: 30px 0 0; padding: 20px 0 0;
  border-top: 1px solid var(--border); }
.presc__recado blockquote { margin: 0; font-size: 17px; line-height: 1.5; font-style: italic; color: var(--text); }
.presc__recado figcaption { grid-column: 2; margin-top: -8px; font-size: 13px; color: var(--text-3); }

/* a chegada: escondido ate a pessoa rolar ate ali */
.presc.is-esperando .presc__parte { opacity: 0; transform: translateY(14px); filter: blur(6px); }
.presc.is-esperando .presc__tempos::before { transform: scaleY(0); }
.presc.is-esperando .presc__caps span { transform: scale(.3); opacity: 0; }
.presc.is-esperando .presc__regua span.is-on { background: color-mix(in srgb, var(--text) 10%, transparent); }
.presc.is-pronta .presc__parte { opacity: 1; transform: none; filter: none;
  transition: opacity .5s var(--ease), transform .6s var(--mola-folha), filter .5s var(--ease); transition-delay: calc(var(--p, 0) * 160ms); }
.presc.is-pronta .presc__tempos::before { transform: none; transition: transform 1.1s cubic-bezier(.33, 1, .68, 1) .15s; }
.presc.is-pronta .presc__caps span { transform: none; opacity: 1;
  transition: transform var(--mola-pilula-dur) var(--mola-pilula), opacity .2s; transition-delay: calc(500ms + var(--k) * 70ms); }
.presc.is-pronta .presc__regua span { transition: background-color .25s var(--ease); transition-delay: calc(700ms + var(--k) * 60ms); }
.presc.is-pronta .presc__ponteiro { transform-box: view-box; transform-origin: 16px 18.5px; animation: presc-gira 1.4s var(--ease) .6s both; }
@keyframes presc-gira { from { transform: rotate(-120deg); } }
@media (prefers-reduced-motion: reduce) {
  .presc .presc__parte, .presc .presc__tempos::before, .presc .presc__caps span { opacity: 1; transform: none; filter: none; transition: none; }
  .presc .presc__ponteiro { animation: none; }
}

/* ---------- a area do painel Admin no Briefing (17/10/2026) ---------- */
.gr--area svg { display: block; width: 100%; height: clamp(130px, 38vw, 170px); overflow: visible; }
.gr-grade { stroke: color-mix(in srgb, var(--text) 9%, transparent); stroke-width: 1; vector-effect: non-scaling-stroke; }
.gr--area .gr-traco { fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke;
  stroke-dasharray: none; stroke-dashoffset: 0; }
.gr--area .gr-area { opacity: 1; }
.gr--area .gr-sobe { transform-box: view-box; transform: scaleY(.001); }
.gr--area.is-pronto .gr-sobe { transform: none; transition: transform .9s cubic-bezier(.34, 1.45, .64, 1); }
.gr--area .gr-ponto { position: absolute; width: 10px; height: 10px; translate: -50% -50%; border-radius: 50%;
  background: var(--accent); box-shadow: 0 0 0 2.5px var(--bg-elev, var(--bg)); opacity: 0; scale: .4; }
.gr--area.is-pronto .gr-ponto { opacity: 1; scale: 1; transition: scale var(--mola-pilula-dur) var(--mola-pilula) .8s, opacity .2s .8s; }
.gr--area .gr-guia { opacity: 0; }
.gr--area.is-pronto .gr-guia { opacity: 1; transition: opacity .3s .8s; }
@media (prefers-reduced-motion: reduce) {
  .gr--area .gr-sobe { transform: none; } .gr--area .gr-ponto, .gr--area .gr-guia { opacity: 1; scale: 1; }
}

/* ---------- o perfil da sessao e a prancheta do treino (17/10/2026) ----------
   O grafico e o dos modais (a curva com degrade do Briefing, as mesmas
   classes .gr--area), e a prancheta vive em LOOP (resposta do dono): a
   caneta escreve as tres linhas, o perfil do treino sobe na folha, o
   cronometro gira, a folha sobe e some como pagina virando, e recomeca.
   Um ciclo de 7 s. Quem pede menos movimento ve a folha escrita, parada. */
.pf { margin: 6px 0 30px; }
.pf__topo { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 10px; }
.pf__total { font-size: 13px; font-weight: 600; color: var(--text-2); font-variant-numeric: tabular-nums; }
.pf__cartao { margin-top: 0; }
.pf__gr svg { height: clamp(120px, 34vw, 150px); }
.pf__faixas { display: flex; gap: 6px; margin-top: 8px; }
.pf__faixa { flex-basis: 0; min-width: 0; display: grid; gap: 1px; padding-top: 8px; border-top: 2px solid color-mix(in srgb, var(--text) 14%, transparent); }
.pf__faixa--principal { border-top-color: var(--accent); }
.pf__faixa b { font-size: 12.5px; font-weight: 600; line-height: 1.25; overflow-wrap: anywhere; }
.pf__faixa small { font-size: 12px; color: var(--text-3); font-variant-numeric: tabular-nums; }

.presc__desenho .pp { display: block; width: 112px; height: 120px; color: var(--text); overflow: visible; }
.pp-leve { opacity: .38; }
.pp-mira { stroke-width: 1.6; opacity: .35; }
.pp-clip, .pp-fundo { fill: var(--bg); }
.pp-b { fill: color-mix(in srgb, var(--text) 30%, transparent); transform-box: fill-box; transform-origin: 50% 100%; }
.pp-b--tiro { fill: var(--accent); }
.pp-escreve { stroke-dasharray: 1; }
.pp-caneta, .pp-folha { transform-box: view-box; }
.pp-ponteiro { transform-box: view-box; transform-origin: 86px 96px; }

.pp .pp-escreve[style*="--e:0"] { animation: pp-l0 7s linear infinite; }
.pp .pp-escreve[style*="--e:1"] { animation: pp-l1 7s linear infinite; }
.pp .pp-escreve[style*="--e:2"] { animation: pp-l2 7s linear infinite; }
@keyframes pp-l0 { 0%, 3% { stroke-dashoffset: 1; } 13%, 100% { stroke-dashoffset: 0; } }
@keyframes pp-l1 { 0%, 15% { stroke-dashoffset: 1; } 23%, 100% { stroke-dashoffset: 0; } }
@keyframes pp-l2 { 0%, 25% { stroke-dashoffset: 1; } 37%, 100% { stroke-dashoffset: 0; } }
.pp .pp-caneta { animation: pp-caneta 7s linear infinite; }
@keyframes pp-caneta {
  0%   { transform: translate(80px, 66px) rotate(0); }
  3%   { transform: translate(32px, 43px); }
  13%  { transform: translate(59px, 43px); }
  15%  { transform: translate(32px, 52px); }
  23%  { transform: translate(52px, 52px); }
  25%  { transform: translate(32px, 61px); }
  37%  { transform: translate(65px, 61px); }
  44%, 100% { transform: translate(80px, 66px); }
}
.pp .pp-b { animation: pp-sobe 7s var(--ease) infinite; animation-delay: calc(var(--i) * 25ms); }
@keyframes pp-sobe { 0%, 40% { transform: scaleY(0); } 48%, 100% { transform: none; } }
/* a pagina vira: a folha escrita sobe e some, e a limpa ja esta embaixo */
.pp .pp-folha { animation: pp-vira 7s cubic-bezier(.5, 0, .3, 1) infinite; }
@keyframes pp-vira {
  0%, 84% { opacity: 1; transform: none; }
  94% { opacity: 0; transform: translateY(-7px) scale(.98); }
  95%, 100% { opacity: 0; transform: none; }
}
.pp .pp-ponteiro { animation: pp-gira 3.5s linear infinite; }
@keyframes pp-gira { to { transform: rotate(360deg); } }
.pp .pp-relogio { transform-box: view-box; transform-origin: 86px 96px; animation: pp-bate 7s var(--ease) infinite; }
@keyframes pp-bate { 0%, 46% { transform: none; } 50% { transform: scale(1.08); } 55%, 100% { transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .pp .pp-escreve, .pp .pp-caneta, .pp .pp-b, .pp .pp-folha, .pp .pp-ponteiro, .pp .pp-relogio { animation: none; }
  .pp .pp-escreve { stroke-dashoffset: 0; }
  .pp .pp-caneta { transform: translate(80px, 66px); }
}

/* Prescrição: identidade de FAQ/planos, linhas em construção contínua. */
.presc__desenho { width:100%; min-width:0; }
.presc__desenho .treino-orbita { display:block; width:min(100%, 272px); height:auto; color:var(--text); margin:0 auto; }
.treino-orbita__base { opacity:.08; }
.treino-orbita__linha { opacity:.24; stroke-dasharray:100; stroke-dashoffset:0; animation:treino-constroi 9s cubic-bezier(.22,1,.36,1) infinite; }
.treino-orbita__linha--2 { animation-delay:-1.2s; }
.treino-orbita__linha--3 { animation-delay:-2.4s; }
.treino-orbita__marca { transform-box:fill-box; transform-origin:center; animation:treino-respira 9s ease-in-out infinite; }
@keyframes treino-constroi {
  0% { stroke-dashoffset:100; opacity:.08; }
  42%,72% { stroke-dashoffset:0; opacity:.24; }
  100% { stroke-dashoffset:-100; opacity:.08; }
}
@keyframes treino-respira {
  0%,100% { transform:translateY(0); }
  50% { transform:translateY(-18px); }
}
@media (prefers-reduced-motion:reduce) {
  .treino-orbita__linha,.treino-orbita__marca { animation:none; }
  .treino-orbita__linha { stroke-dashoffset:0; }
}

/* ---------- a abertura que se transforma no app (18/10/2026, em teste: ?estilo=transforma) ----------
   O mesmo palco do Coach (js/movimento): canvas de celulas e a mira em SVG por cima. O passo com palco
   fica centralizado (palco, kicker, titulo, texto no mesmo eixo); o texto entra no mesmo 0,34 s dos
   outros passos e os botoes funcionam desde o primeiro quadro. */
.hist__corpo--palco { text-align: center; }
.hist__corpo--palco .hist__linha { justify-content: center; }
.palco { position: relative; width: 100%; aspect-ratio: 16 / 9; max-height: 34vh; margin: 12px 0 6px; border-radius: 18px; overflow: hidden;
  --palco-tinta: var(--text); --palco-acento: var(--accent);
  background: color-mix(in srgb, var(--text) 3.5%, var(--bg-elev, var(--bg))); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--text) 7%, transparent); }
.palco__tela { position: absolute; inset: 0; width: 100%; height: 100%; }
.palco__mira { position: absolute; overflow: visible; pointer-events: none; color: var(--text); }
.palco__mira * { fill: none; }
.palco__cruz, .palco__base, .palco__anel { vector-effect: non-scaling-stroke; }
.palco__cruz { stroke: currentColor; stroke-width: 1; stroke-dasharray: 2 4; opacity: 0; transition: opacity .5s ease .1s; }
.palco__anel { stroke: var(--palco-acento); stroke-width: 1.2; opacity: 0; transform-box: fill-box; transform-origin: center; transform: scale(2.2); transition: opacity .4s ease, transform .6s cubic-bezier(.22, 1, .36, 1); }
.palco__ponto { fill: var(--palco-acento) !important; opacity: 0; transition: opacity .3s ease .25s; }
.palco__linha { stroke: currentColor; stroke-width: .18; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; opacity: .6; transition: stroke-dashoffset .9s cubic-bezier(.22, 1, .36, 1); }
.palco__base { stroke: currentColor; stroke-width: 1; stroke-dasharray: 2 3; opacity: 0; transition: opacity .5s ease; }
.palco.is-revelado .palco__cruz { opacity: .28; }
.palco.is-revelado .palco__anel { opacity: 1; transform: scale(1); }
.palco.is-revelado .palco__ponto { opacity: 1; }
.palco.is-revelado .palco__linha { stroke-dashoffset: 0; }
.palco.is-revelado .palco__base { opacity: .35; }
@media (max-width: 560px) { .palco { border-radius: 14px; } }

/* as aberturas em SVG (js/movimento/aberturas.js), as mesmas regras do Coach (treinador.css) */
.palco__svg { position: absolute; inset: 0; width: 100%; height: 100%; color: var(--text); overflow: visible; }
.palco__svg * { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.ab-traco { stroke: currentColor; stroke-dasharray: 1; }
.ab-traco--mao { stroke: currentColor; }
.ab-area { fill: color-mix(in srgb, var(--text) 7%, transparent) !important; stroke: none; }
.ab-no { fill: currentColor !important; }
.ab-no.is-destaque { fill: var(--palco-acento) !important; }
.ab-anel { stroke: currentColor; opacity: .55; }
.ab-liga { stroke: currentColor; opacity: .38; stroke-dasharray: 1; }
.ab-liga--tracejada { stroke-dasharray: 1 1.4; opacity: .5; }
.ab-base { stroke: currentColor; stroke-width: .3; stroke-dasharray: 1 1.6; opacity: .45; }
.ab-barra { fill: color-mix(in srgb, var(--text) 82%, transparent) !important; }
.ab-barra.is-destaque { fill: var(--palco-acento) !important; }
.ab-celula { stroke: currentColor; opacity: .35; }
.ab-celula.is-acesa { fill: color-mix(in srgb, var(--text) 80%, transparent) !important; stroke: none; }
.ab-celula.is-destaque { fill: var(--palco-acento) !important; stroke: none; }
.ab-alvo { stroke: currentColor; fill: color-mix(in srgb, var(--palco-acento) 18%, transparent) !important; }
.ab-ponto { fill: var(--palco-acento) !important; }
.ab-mira-anel { stroke: var(--palco-acento); stroke-width: .5; }
.ab-cruz { stroke: currentColor; stroke-width: .25; stroke-dasharray: .8 1.4; }
.ab-arco { stroke: currentColor; stroke-width: .3; stroke-dasharray: 1; opacity: .6; }
.ab-tique { stroke: currentColor; stroke-width: .25; }
.ab-pixel { fill: currentColor !important; }
.ab-mancha { fill: var(--palco-acento) !important; }
.ab--mao .ab-ponto { fill: var(--bg) !important; stroke: currentColor; stroke-width: 1.6; }
.palco__ilustra { position: absolute; inset: 0; display: grid; place-items: center; transform-origin: center; transition: none; color: var(--text); }
.palco__ilustra .traco { width: 42%; height: auto; max-height: 82%; }


/* ---------- os icones de linha (18/10, em teste) ----------
   js/movimento/icones.js, o mesmo desenho do Coach (treinador.css): traco
   unico na grade de 24, uma cor (o texto suavizado), no maximo uma forma
   cheia em cinza. O traco se desenha uma vez; nada fica em loop. Tudo preso
   ao .palco--icone porque o app ja usa .ic no globo do idioma. */
.palco.palco--icone { aspect-ratio: auto; max-height: none; height: auto; display: grid; place-items: center; margin: 8px 0 14px; padding: 0;
  background: none; box-shadow: none; border-radius: 0; overflow: visible; }
.palco--icone .ic { display: block; width: 48px; height: 48px; color: color-mix(in srgb, var(--text) 78%, var(--bg)); overflow: visible; }
.palco--icone .ic * { stroke-width: 1.1; }
.palco--icone .ic-g { fill: color-mix(in srgb, var(--text) 38%, var(--bg)); stroke: none; }
@media (prefers-reduced-motion: no-preference) {
  .palco--icone .ic-t { stroke-dasharray: 1; stroke-dashoffset: 1; animation: ic-desenha .55s cubic-bezier(.25, 1, .5, 1) forwards; animation-delay: calc(.08s + var(--i, 0) * .07s); }
  .palco--icone .ic-g { animation: ic-aparece .25s ease-out both; animation-delay: calc(.35s + var(--i, 0) * .07s); }
}
@keyframes ic-desenha { to { stroke-dashoffset: 0; } }
@keyframes ic-aparece { from { opacity: 0; } }

/* ============================================================
   Tryzen Athlete Discovery (19/10/2026)
   ------------------------------------------------------------
   js/descobertas/. O molde e o Discovery do Coach no estilo estatico,
   aprovado e no ar (treinador.css, bloco "o desenho a mao parado" e
   "Descobertas no celular"): caixa de canto 12 com fio de 10%, tudo
   alinhado a esquerda, o desenho a mao em cima (88 px, 64 no celular),
   a nota e os cartoes com o icone de linha no canto, duas tintas e o
   verde so no botao. A entrada so mexe em transform.
   ============================================================ */
.mao { display: block; width: 100%; height: 100%; overflow: visible; }
.mao-m { fill: currentColor; }
.mao-s { fill: color-mix(in srgb, var(--text) 24%, var(--bg)); }

.adc { position: fixed; inset: 0; z-index: 125; display: grid; place-items: center; overflow-y: auto;
  padding: max(16px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) max(16px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left)); }
.adc__veu { position: fixed; inset: 0; background: color-mix(in srgb, #000 58%, transparent); }
.adc__caixa { position: relative; width: min(520px, 100%); padding: 14px 24px 20px; border-radius: 12px; outline: 0;
  background: var(--bg); color: var(--text); border: 1px solid color-mix(in srgb, var(--text) 10%, transparent); box-shadow: 0 24px 64px rgba(0, 0, 0, .32);
  max-height: calc(100dvh - max(16px, env(safe-area-inset-top)) - max(16px, env(safe-area-inset-bottom))); overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain;
  animation: adc-entra .42s cubic-bezier(.22, 1, .36, 1) both; }
.adc.is-saindo .adc__caixa { animation: adc-sai .18s ease-in both; }
@keyframes adc-entra { from { transform: translateY(14px) scale(.985); } }
@keyframes adc-sai { to { opacity: 0; } }
.adc__barra { display: flex; align-items: center; justify-content: space-between; min-height: 32px; margin: 0 -10px 2px 0; }
.adc__deck { margin: 0; font-size: 13px; color: var(--text-3); font-variant-numeric: tabular-nums; }
.adc__x { display: grid; place-items: center; width: 36px; height: 36px; border: 0; border-radius: 50%; background: none; color: var(--text-3); cursor: pointer; }
.adc__x:focus-visible, .adc__link:focus-visible, .adc__sec:focus-visible { outline: 2px solid var(--text); outline-offset: 2px; }
.adc__corpo { position: relative; }

.adc__arte { width: 88px; height: 88px; margin: 4px 0 16px; color: var(--text); }
.adc__arte--grande { width: 120px; height: 120px; }
.adc__kicker { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin: 0 0 8px; font-size: 12.5px; font-weight: 600; letter-spacing: .01em; color: var(--text-2); }
.adc__kicker i { font-style: normal; color: var(--text-3); }
.adc__kicker small { font-size: 12.5px; font-weight: 500; color: var(--text-3); }
.adc__titulo { margin: 0; font-size: 21px; line-height: 1.22; font-weight: 650; letter-spacing: -.018em; text-wrap: balance; max-width: 30ch; }
.adc__frase { margin: 10px 0 0; font-size: 15.5px; line-height: 1.5; color: var(--text); text-wrap: pretty; max-width: 52ch; }
.adc__ic { display: block; width: 20px; height: 20px; margin-bottom: 10px; font-style: normal; color: color-mix(in srgb, var(--text) 72%, var(--bg)); }
.adc__ic svg { display: block; width: 20px; height: 20px; }
.adc__ic .ic-g { fill: color-mix(in srgb, var(--text) 30%, var(--bg)); stroke: none; }
.adc__nota { display: grid; grid-template-columns: 20px 1fr; gap: 10px; align-items: start; margin-top: 12px; padding: 11px 14px;
  border-radius: 11px; border: 1px solid color-mix(in srgb, var(--text) 10%, transparent); }
.adc__nota .adc__ic { margin: 1px 0 0; }
.adc__nota p { margin: 0; font-size: 13.5px; line-height: 1.5; color: color-mix(in srgb, var(--text) 66%, var(--bg)); }
.adc__nota b { font-weight: 600; color: var(--text); }
.adc__cartoes { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 16px; }
.adc__nota + .adc__cartoes { margin-top: 12px; }
.adc__cartao { display: grid; gap: 2px; align-content: start; min-width: 0; padding: 12px 14px; border-radius: 11px; border: 1px solid color-mix(in srgb, var(--text) 10%, transparent); overflow-wrap: anywhere; }
.adc__cartao b { font-size: 14px; font-weight: 500; color: var(--text); font-variant-numeric: tabular-nums; }
.adc__cartao span { font-size: 13px; line-height: 1.45; color: color-mix(in srgb, var(--text) 62%, var(--bg)); }
.adc__cartao--agora { border-color: color-mix(in srgb, var(--text) 32%, transparent); }
.adc__estados { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 8px; margin-top: 16px; }
.adc__seta { display: grid; place-items: center; color: var(--text-3); }
.adc__fatores { list-style: none; margin: 12px 0 0; padding: 0; border-radius: 11px; border: 1px solid color-mix(in srgb, var(--text) 10%, transparent); }
.adc__fatores li { display: flex; justify-content: space-between; gap: 12px; padding: 9px 14px; font-size: 13.5px; }
.adc__fatores li + li { border-top: 1px solid color-mix(in srgb, var(--text) 8%, transparent); }
.adc__fatores span { color: color-mix(in srgb, var(--text) 62%, var(--bg)); }
.adc__fatores b { font-weight: 500; text-align: right; }
.adc__marcos { list-style: none; margin: 14px 0 0; padding: 0 0 0 4px; display: grid; gap: 12px; position: relative; }
.adc__marcos::before { content: ""; position: absolute; left: 9px; top: 8px; bottom: 8px; width: 1px; background: color-mix(in srgb, var(--text) 16%, transparent); }
.adc__marcos li { position: relative; display: grid; grid-template-columns: 22px auto 1fr auto; align-items: baseline; gap: 8px; font-size: 13.5px; }
.adc__marco-ponto { width: 11px; height: 11px; border-radius: 50%; border: 1.4px solid color-mix(in srgb, var(--text) 50%, transparent); background: var(--bg); align-self: center; }
.adc__marcos li:last-child .adc__marco-ponto { background: var(--text); border-color: var(--text); }
.adc__marcos small { font-size: 12.5px; color: var(--text-3); font-variant-numeric: tabular-nums; }
.adc__marcos b { font-weight: 500; }
.adc__marcos em { font-style: normal; color: var(--text-2); font-variant-numeric: tabular-nums; }
.adc__dado { margin: 16px 0 2px; padding: 12px 12px 8px; border-radius: 11px; border: 1px solid color-mix(in srgb, var(--text) 10%, transparent); }
.adc__dado--topo { margin: 2px 0 16px; }
.adc__dado-svg { color: var(--text); }
.adc__dado-svg svg { display: block; width: 100%; height: auto; max-height: 128px; overflow: visible; }
.adc__dado figcaption { margin: 6px 2px 0; font-size: 12px; color: var(--text-3); }
.adc__sec { display: inline-flex; align-items: center; gap: 6px; margin-top: 12px; min-height: 32px; padding: 0; border: 0; background: none; cursor: pointer;
  font: inherit; font-size: 14px; font-weight: 600; color: var(--text); }
/* os caminhos de baixo: a secundaria da descoberta e, sempre, a conversa com a Tryzen Intelligence (pedido do dono 20/10) */
.adc__secs { display: grid; justify-items: start; gap: 2px; margin-top: 10px; }
.adc__secs .adc__sec { margin-top: 0; }
.adc__sec--ia .adc__ic { width: 18px; height: 18px; margin: 0; }
.adc__sec--ia .adc__ic svg { width: 18px; height: 18px; }
.adc__pe { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-top: 22px; }
.adc__pe-links { display: inline-flex; align-items: center; gap: 16px; }
.adc__pe-acoes { display: flex; align-items: center; justify-content: flex-end; gap: 8px; margin-left: auto; }
.adc__pe .btn { width: auto; }
.adc__pe .adc__prox { padding-inline: 12px; }
.adc__link { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0; border: 0; background: none; color: var(--text-2); cursor: pointer;
  font: inherit; font-size: 14px; font-weight: 500; text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--text) 25%, transparent); text-underline-offset: 3px; }

/* o "Ver por quê" */
.adc--porque .adc__caixa { display: flex; flex-direction: column; max-height: min(86dvh, 760px); }
.adc--porque .adc__corpo { min-height: 0; overflow-y: auto; margin-right: -10px; padding-right: 10px; overscroll-behavior: contain; }
.adc__titulo--porque { font-size: 20px; }
.adc__tres { list-style: none; display: grid; gap: 10px; margin: 14px 0 0; padding: 0; counter-reset: adc; }
.adc__tres li { position: relative; display: grid; gap: 2px; padding-left: 30px; counter-increment: adc; font-size: 14.5px; line-height: 1.45; }
.adc__tres li::before { content: counter(adc); position: absolute; left: 0; top: 1px; display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%;
  font-size: 11.5px; font-weight: 700; color: var(--bg); background: var(--text); }
.adc__tres b { font-size: 13px; font-weight: 600; color: var(--text-3); }
.adc__rotulo { margin: 18px 0 6px; font-size: 13px; font-weight: 600; color: var(--text-3); }
.adc__texto-p { margin: 0; font-size: 14px; line-height: 1.5; color: var(--text-2); }
.adc__origem { margin: 16px 0 0; font-size: 13px; line-height: 1.45; color: var(--text-3); }
.adc__util { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 16px; padding-top: 14px; border-top: 1px solid color-mix(in srgb, var(--text) 9%, transparent); font-size: 14px; color: var(--text-2); }
.adc__util p { margin: 0; }
.adc__pref { margin-top: 12px; }
.adc__pref summary { cursor: pointer; font-size: 13.5px; color: var(--text-2); min-height: 32px; display: flex; align-items: center; }
.adc__modos { display: flex; flex-wrap: wrap; gap: 8px; }
.adc__modos .chip.is-on { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
.adc__cat { display: flex; align-items: center; gap: 8px; margin-top: 12px; font-size: 14px; color: var(--text-2); }
.adc__nota-pe { margin: 8px 0 0; font-size: 12.5px; color: var(--text-3); }
.adc__pref .adc__link { margin-top: 6px; }

/* Descobertas no celular (o mesmo bloco do Coach): compacto, sem corte, a caixa rola por dentro */
@media (max-width: 520px) {
  .adc__caixa { width: min(420px, 100%); max-height: calc(90dvh - max(16px, env(safe-area-inset-top)) - max(16px, env(safe-area-inset-bottom))); padding: 12px 16px 16px; }
  .adc__arte { width: 64px; height: 64px; margin: 2px 0 10px; }
  .adc__arte--grande { width: 88px; height: 88px; }
  .adc__titulo { font-size: 20px; }
  .adc__frase { font-size: 14px; line-height: 1.45; margin-top: 8px; }
  .adc__nota { gap: 8px; padding: 9px 10px; margin-top: 10px; }
  .adc__cartoes { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .adc__cartao { padding: 10px; }
  .adc__ic { margin-bottom: 6px; }
  .adc__pe { margin-top: 14px; gap: 6px; flex-direction: column-reverse; align-items: stretch; }
  .adc__pe-links { justify-content: center; }
  .adc__pe-acoes { width: 100%; margin-left: 0; }
  .adc__pe-acoes .btn--primary { flex: 1; }
}
@media (max-width: 340px) { .adc__cartoes { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .adc__caixa { animation: none; } }

/* a porta discreta de Dados, Voce e Historico (a .dsc-porta do Coach no estatico) */
.adc-porta { margin-bottom: 16px; }
.adc-porta__b { display: grid; grid-template-columns: 46px minmax(0, 1fr) auto; align-items: center; gap: 12px; width: 100%; padding: 10px 14px 10px 10px; text-align: left; cursor: pointer;
  border-radius: 12px; border: 1px solid color-mix(in srgb, var(--text) 10%, transparent); background: var(--bg); color: var(--text); font: inherit; }
.adc-porta__arte { width: 46px; height: 46px; padding: 5px; color: var(--text); }
.adc-porta__txt { display: grid; gap: 1px; min-width: 0; }
.adc-porta__txt small { font-size: 12.5px; color: var(--text-3); }
.adc-porta__txt b { font-size: 15px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.adc-porta__ver { font-size: 14px; font-weight: 600; color: var(--text); }

/* #/descobertas */
.adc-hist { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.adc-hist__item { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 12px; width: 100%; padding: 14px; text-align: left; cursor: pointer;
  border-radius: 12px; border: 1px solid color-mix(in srgb, var(--text) 10%, transparent); background: var(--bg); color: var(--text); font: inherit; }
.adc-hist__ic { width: 44px; height: 44px; color: var(--text); }
.adc-hist__txt { display: grid; gap: 3px; min-width: 0; }
.adc-hist__txt small { font-size: 12.5px; color: var(--text-3); }
.adc-hist__txt b { font-size: 15.5px; font-weight: 600; line-height: 1.3; }
.adc-hist__txt span { font-size: 14px; line-height: 1.45; color: var(--text-2); }
/* a lista de categorias (pedido do dono, 19/10): um travessao desenhado a esquerda de cada uma, como lista; o toque liga
   e desliga, o visto a direita diz o que pode abrir sozinho e a desligada fica apagada */
.adc-hist__cats { display: grid; gap: 0; }
.adc-hist__cat { position: relative; display: flex; align-items: center; gap: 12px; min-height: 44px; font-size: 15px; cursor: pointer; }
.adc-hist__cat::before { content: ""; flex: none; width: 14px; height: 1.5px; border-radius: 1px; background: currentColor; }
.adc-hist__cat input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.adc-hist__nome { flex: 1; }
.adc-hist__visto { flex: none; width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; opacity: 0; }
.adc-hist__cat:has(input:checked) .adc-hist__visto { opacity: 1; }
.adc-hist__cat:has(input:not(:checked)) { color: var(--text-3); }
.adc-hist__cat:has(input:not(:checked)) .adc-hist__nome { text-decoration: line-through; text-decoration-color: color-mix(in srgb, var(--text) 30%, transparent); }
.adc-hist__cat:has(input:focus-visible) { outline: 2px solid var(--text); outline-offset: 2px; border-radius: 6px; }
/* o modo escolhido em verde (pedido do dono, 19/10): e o botao que FAZ algo, como o verde do modal */
.adc-hist__modos .chip.is-on { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
/* sem descoberta ainda: a lupa com o X, no traco a mao, procurando (js/movimento/cenas-mao.js, lupaVazia) */
.adc-hist__vazio { display: grid; justify-items: start; gap: 12px; margin-top: 32px; }
.adc-hist__lupa { display: block; width: 72px; height: 72px; color: var(--text); }
.adc-hist__vazio p { margin: 0; }


/* regra do dono (21/10): dois cartoes nunca se encostam */
.recolhe + .recolhe { margin-top: 12px; }