/* ==========================================================================
   Mentropy — AS TELAS DO APP RECONSTRUÍDAS EM HTML E CSS, para os mockups do
   site (2026-09-24, decisão do Arthur; registro em
   08_web/output/ciclo-01/estrutura.md).

   Três telas — a Home, a sessão da prática e o feed da comunidade — dentro
   de um celular em linha fina, no modelo do Stoic: contorno quase sumido,
   a tela dentro.

   AS CORES VÊM DE `cores.css`, GERADO dos tokens do app. Nenhum hex aqui. Os
   nomes `--app-<papel>` são os mesmos de `app/src/tokens/cores.ts`, e a
   troca de tema é um radio com id `tema-<chave>` em qualquer lugar da
   página — CSS puro, sem script.

   AS MEDIDAS SÃO AS DO APP, copiadas do código: escala tipográfica cheia
   (Display 28, Título 20, Corpo 20, Apoio 16, Label 16), espaçamento
   4·8·12·16·20·24·32·48, cartão com raio 20 e padding 24, borda 0,5. Cada
   tela é desenhada em PONTOS (1 unidade = 1pt do iPhone) numa caixa de 428
   de largura e escalada por `transform` — texto continua vetor, nítido em
   qualquer tamanho.

   O MOCKUP DA HOME É IDEALIZADO (decisão de 2026-09-24): a moldura é um
   pouco mais alta que um iPhone real (980 contra 926 do 13 Pro Max) e o
   vão entre os blocos é 24 em vez de 32, para os três cartões aparecerem
   inteiros. É mockup de site, não captura de loja — NUNCA usar como captura
   da App Store (ver requisitos-de-loja.md).

   TODA MUDANÇA VISUAL NA HOME, NA PRÁTICA OU NA COMUNIDADE do app pede
   "conferir os mockups do site" antes de submeter.
   ========================================================================== */

/* --- A moldura ------------------------------------------------------------ */

.moldura {
  --largura: 488; /* nasceu em 428 (a do Pro Max); 448 e depois 488 em 2026-09-25, Arthur: a 428 a moldura ficava alta demais, "girafa" - o miolo ganha a diferenca */
  --altura: 980;
  --escala: 0.6;
  --bisel: 0; /* sem ar entre o contorno e a tela: ela preenche a moldura (2026-09-24) */

  width: calc((var(--largura) + 2 * var(--bisel)) * var(--escala) * 1px);
  height: calc((var(--altura) + 2 * var(--bisel)) * var(--escala) * 1px);
  flex: none;
  position: relative;
  /* É um <figure>: o navegador lhe dá margem de 40px dos lados e de 1em em
     cima por padrão, e isso deslocava o conjunto inteiro. */
  margin: 0;
}

.celular {
  position: absolute;
  inset: 0;
  width: calc((var(--largura) + 2 * var(--bisel)) * 1px);
  height: calc((var(--altura) + 2 * var(--bisel)) * 1px);
  transform: scale(var(--escala));
  transform-origin: top left;
  box-sizing: border-box;
  padding: calc(var(--bisel) * 1px);
  border-radius: 55px;
  overflow: hidden;
  /* O contorno em linha fina: a tinta apagada, diluída. */
  border: 1.5px solid color-mix(in srgb, var(--tinta-apagada) 55%, transparent);
}

.tela {
  position: relative;
  overflow: hidden;
  box-sizing: border-box;
  width: calc(var(--largura) * 1px);
  height: calc(var(--altura) * 1px);
  border-radius: 53.5px; /* o raio da moldura menos a borda */
  background: var(--app-background);
  color: var(--app-ink);
  font-family: 'Work Sans', system-ui, sans-serif;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
}

/* A barra do sistema, no desenho do mockup do Stoic: sem a ilha, a hora à
   esquerda em negrito, e rede, wi-fi e bateria à direita, na mesma linha,
   maiores. É hardware, não tema: a cor é a tinta do tema. As medidas vêm
   do print do Stoic, em proporção à largura do aparelho (2026-09-24). */
.tela__sistema {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 54px;
}
.tela__hora {
  position: absolute;
  left: 40px; /* a mesma distância da margem que a bateria tem da direita */
  top: 25px;
  font-family: 'Whois Mono', monospace;
  font-size: 16px;
  line-height: 16px;
}
.tela__ilha { display: none; }
.tela__estado {
  position: absolute;
  right: 40px;
  top: 25px;
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--app-ink);
}
.tela__estado svg { fill: currentColor; display: block; }
.tela__rede { width: 22px; height: 15px; }
.tela__wifi { width: 21px; height: 15px; } /* o wi-fi da Apple: faixas a 50 graus, a de baixo em cunha */
.tela__bateria { width: 30px; height: 15px; }

/* --- A tipografia do app -------------------------------------------------- */

.t-titulo {
  font-family: 'Fraunces', serif;
  font-weight: 300;
  font-size: 20px;
  line-height: 26px;
  margin: 0;
}
.t-corpo { font-size: 20px; line-height: 30px; margin: 0; }
.t-apoio { font-size: 16px; line-height: 24px; margin: 0; }
.t-label {
  font-family: 'Whois Mono', monospace;
  font-size: 16px;
  line-height: 16px;
  letter-spacing: 0.12em;
  text-transform: uppercase; /* o nivel Label do app e sempre caixa alta (escala-por-altura.ts) */
  margin: 0;
}
.t-numero { font-family: 'Whois Mono', monospace; }
.t-suave { color: var(--app-softInk); }
.t-apagada { color: var(--app-mutedInk); }
.t-medio { font-weight: 500; }

/* Os ícones do Lucide, no traço do app: 24 de caixa, 1,5 de linha. */
.icone {
  width: 24px;
  height: 24px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex: none;
}
.icone--16 { width: 16px; height: 16px; }
.icone--28 { width: 28px; height: 28px; }

/* --- O logo --------------------------------------------------------------- */

.logo-app {
  display: block;
  width: 165px;
  height: 40px;
}
/* As cores da placa, do símbolo e da palavra vão inline no <symbol>, por
   variável — ver o comentário do logo em pt/index.html. */

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

.cartao {
  box-sizing: border-box;
  border-radius: 20px;
  padding: 24px;
  background: var(--app-surface);
  /* A caixa tem a borda de 0,5 e ela é transparente: flat é o único estilo
     do app desde 2026-09-30 (a bandeira `cartoesFlat` saiu). */
  border: 0.5px solid transparent;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* --- A barra de navegação ------------------------------------------------- */

.navegacao {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  display: flex;
  /* A linha fica onde o app a põe (12 mais 42, com os 34 da área segura),
     e SÓ OS ÍCONES DESCEM 8 (Arthur, 2026-09-25): o total da barra não
     muda. Um 16/16 centrado foi testado duas vezes e revertido no mesmo
     dia. */
  padding: 20px 0 34px;
  border-top: 0.5px solid var(--app-accent);
  /* A base do gradiente da Home por cima do fundo: onde não há gradiente o
     papel é transparente e sobra o fundo. */
  background: linear-gradient(var(--app-homeFundoBase), var(--app-homeFundoBase)), var(--app-background);
}
.navegacao__item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  color: var(--app-mutedInk);
  font-size: 12px;
  line-height: 16px;
}
.navegacao__item--ativa { color: var(--app-ink); }

/* --- A HOME --------------------------------------------------------------- */

.tela--home {
  background: linear-gradient(var(--app-homeFundoTopo), var(--app-homeFundoBase)), var(--app-background);
  padding: 78px 24px 0; /* 54 do sistema + 24 do respiro da tela */
  display: flex;
  flex-direction: column;
  gap: 24px; /* IDEALIZADO: o app usa 32 entre blocos */
}
.home__logo { margin-bottom: -4px; }

.home__linha-do-dia {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 32px;
}
.home__texto-do-dia {
  font-size: 18px;
  line-height: 18px;
  letter-spacing: 0.3px;
}
.home__fase { display: flex; align-items: center; gap: 4px; }
.home__fase .icone { width: 16px; height: 16px; color: var(--app-softInk); }

.home__faixa {
  display: flex;
  justify-content: space-between;
  margin-top: 20px;
}
.home__dia {
  box-sizing: border-box;
  width: 32px; height: 32px;
  border-radius: 999px;
  border: 0.5px solid var(--app-accent);
  font-family: 'Whois Mono', monospace;
  font-size: 16px;
  line-height: 31px;
  text-align: center;
  color: var(--app-mutedInk);
}
.home__dia--hoje { background: var(--app-accent); color: var(--app-ink); }

/* Os três cartões: o degradê para a direita por cima da cor do cartão — só o
   Shiva Blue o tem; nos outros o fim é transparente e nada se desenha. */
.home__pratica {
  background: linear-gradient(90deg, transparent, var(--app-degradeFim)), var(--app-homePratica);
}
.home__pilula {
  align-self: flex-start;
  border: 0.5px solid var(--app-mutedInk);
  border-radius: 999px;
  padding: 4px 12px;
}
.home__titulo-do-dia { margin-top: -2px; }
.home__botao {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 16px 24px;
  border-radius: 999px;
  background: var(--app-fundoDoBotao);
  color: var(--app-sobreBotao);
  font-size: 18px;
  line-height: 30px;
  font-weight: 500;
}
.home__constancia { display: flex; flex-direction: column; gap: 12px; }
.divisor { height: 0.5px; background: var(--app-accent); }

.home__comunidade {
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  background: linear-gradient(90deg, transparent, var(--app-degradeFim)), var(--app-homeComunidade);
  color: var(--app-sobreDestaque);
  border-color: var(--app-bordaDoDestaque);
}
.home__lua {
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  background: linear-gradient(90deg, transparent, var(--app-degradeFim)), var(--app-homeLua);
  border-color: transparent;
}
.home__miolo { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.seta { font-size: 20px; line-height: 26px; }

/* --- A SESSÃO DA PRÁTICA -------------------------------------------------- */

.tela--pratica { padding: 78px 24px 0; }
.pratica__topo {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.pratica__centro {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.pratica__ancora {
  position: relative;
  width: 380px;
  height: 98px;
  display: flex;
  justify-content: center;
}
.pratica__anel {
  position: absolute;
  top: 50%; left: 50%;
  width: 146px; height: 146px;
  transform: translate(-50%, -50%);
  display: block;
  color: var(--app-ink); /* o tom neutro: a tinta */
}
.pratica__anel--vivo { color: var(--acento-vivo); } /* o esforço: o acento vivo */
.pratica__contador { color: var(--app-ink); }
.pratica__contador {
  font-family: 'Whois Mono', monospace;
  font-size: 98px;
  line-height: 98px;
  text-align: center;
  width: 100%;
  margin: 0;
}
.pratica__vivo { color: var(--acento-vivo); }
.pratica__abaixo {
  position: absolute;
  top: 100%;
  left: 0; right: 0;
  padding-top: 40px; /* o app usa 24; mais respiro no mockup, a pedido do Arthur (2026-09-24) */
  text-align: center;
}
.pratica__pausa {
  position: absolute;
  left: 50%;
  bottom: 140px;
  transform: translateX(-50%);
  width: 192px;
  padding: 12px 0;
  border-radius: 999px;
  background: var(--app-fundoDaPausa);
  display: flex;
  justify-content: center;
  color: var(--app-ink);
}
/* A pausa funciona na seção 2 (Arthur, 2026-09-25): ali o cursor avisa, e
   a classe `--pausada`, posta por sessao.js, mostra o Play no lugar do
   Pause - como no app. */
.bloco__tela .pratica__pausa { cursor: pointer; }
.pratica__pausa .icone--play { display: none; }
.pratica__pausa--pausada .icone--pause { display: none; }
.pratica__pausa--pausada .icone--play { display: block; }

/* --- O FEED DA COMUNIDADE ------------------------------------------------- */

.tela--comunidade { padding: 78px 0 0; }
.feed__cabecalho {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 24px 24px;
}
.feed__acoes { display: flex; align-items: center; gap: 16px; }
.feed__placa {
  width: 40px; height: 40px;
  border-radius: 3.6px; /* o mesmo canto da placa do logo, 27 em 302 */
  background: linear-gradient(90deg, transparent, var(--app-degradeFim)), var(--app-placaDoLivro);
  color: var(--app-sobrePlacaDoLivro);
  display: flex;
  align-items: center;
  justify-content: center;
}
.feed__filtro { color: var(--app-mutedInk); }
.feed__escrever {
  position: absolute;
  right: 24px;
  bottom: 122.5px; /* a barra (98,5) mais 24 */
  width: 48px; height: 48px;
  border-radius: 999px;
  background: var(--app-fundoDoBotao);
  color: var(--app-sobreBotao);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
}
.feed__lista { padding: 0 24px; }
.post {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 24px 0;
  border-bottom: 0.5px solid var(--app-surface);
}
.post__cabecalho, .post__rodape {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}
.post__categoria { display: flex; align-items: center; gap: 8px; min-width: 0; }
.post__circulo {
  width: 32px; height: 32px;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, var(--app-degradeFim)), var(--app-fundoDaCategoria);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--app-ink);
  flex: none;
}
.post__corpo {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.post__acoes { display: flex; align-items: center; gap: 16px; color: var(--app-mutedInk); }
.post__acao { display: flex; align-items: center; gap: 4px; }
.post__numero { font-family: 'Whois Mono', monospace; font-size: 16px; }

/* --- O Histórico ----------------------------------------------------------- */

/* A página do menu do Perfil (app: telas/perfil/historico.tsx), medidas do
   app: respiro 24, blocos a 24, cartão com gap 24, os círculos de 32 da faixa
   da Home, a legenda com 16 entre viradas e 4 dentro de cada uma. */
.tela--historico {
  padding: 78px 24px 0;
  display: flex;
  flex-direction: column;
  gap: 24px;
}
/* IDEALIZADO (Arthur, 2026-09-25): o app dá 8 de respiro acima e abaixo da
   seta; aqui zero, e o cartão sobe 16 - a legenda de baixo estava colada
   na curva da moldura. */
.hist__voltar {
  font-size: 32px;
  line-height: 40px;
  padding: 0;
  align-self: flex-start;
}
.hist__cartao { display: flex; flex-direction: column; gap: 24px; }
.hist__linha-do-mes { display: flex; justify-content: space-between; align-items: center; }
/* O mês e o ano em Corpo menos 2, com a seta do dropdown colada. */
.hist__controle { display: flex; align-items: center; gap: 4px; font-size: 18px; line-height: 27px; }
.hist__controle .icone { color: var(--app-softInk); }
.hist__calendario { display: flex; flex-direction: column; gap: 16px; }
.hist__semana { display: flex; }
.hist__celula { flex: 1 1 0; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.hist__dia {
  box-sizing: border-box;
  width: 32px; height: 32px;
  border-radius: 999px;
  border: 0.5px solid var(--app-accent);
  font-family: 'Whois Mono', monospace;
  font-size: 16px;
  line-height: 31px;
  text-align: center;
  color: var(--app-mutedInk);
}
.hist__dia--virada { background: var(--app-accent); color: var(--app-ink); }
/* O dia de hoje no acento vivo, por cima da virada quando coincidem. */
.hist__dia--hoje { background: var(--acento-vivo); border-color: var(--acento-vivo); color: var(--app-ink); }
.hist__conta { font-family: 'Whois Mono', monospace; font-size: 16px; line-height: 24px; color: var(--app-softInk); }
/* IDEALIZADO (Arthur, 2026-09-25): o total fica a 4 da última linha do calendário, sobre o gap de 24 do cartão. */
.hist__total { margin-top: -20px; }
.hist__legenda { display: flex; flex-direction: column; gap: 16px; }
.hist__virada { display: flex; flex-direction: column; gap: 4px; }
/* A fase em andamento no acento vivo: estado ligado. */
.hist__fase-atual { color: var(--acento-vivo); }