/* Escola da Água — monocromático, tipográfico, sem ícones. Claro/escuro automático. */

:root {
  --fundo: #ffffff;
  --tinta: #111111;
  --tinta-suave: #6b6b6b;
  --borda: #e2e2e2;
  --borda-forte: #111111;
  --marca-agua: #f5f5f5;
  --vidro: rgba(255, 255, 255, 0.82);
  --transicao: 160ms ease;
}

@media (prefers-color-scheme: dark) {
  :root {
    --fundo: #101010;
    --tinta: #ececec;
    --tinta-suave: #969696;
    --borda: #2c2c2c;
    --borda-forte: #ececec;
    --marca-agua: #1a1a1a;
    --vidro: rgba(16, 16, 16, 0.82);
  }
}

* { box-sizing: border-box; }

html { scroll-padding-top: 5rem; }

body {
  margin: 0;
  background: var(--fundo);
  color: var(--tinta);
  font-family: "Newsreader", Georgia, serif;
  font-size: 1.1875rem;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  hanging-punctuation: first last;
}

::selection { background: var(--tinta); color: var(--fundo); }

/* Barra de rolagem no vocabulário do site: trilho de fio, polegar reto e fino.
   O padrão só entra onde não há ::-webkit-scrollbar (Firefox), senão vence o
   desenho abaixo — no Chrome as propriedades padrão anulam os pseudoelementos. */
@supports not selector(::-webkit-scrollbar) {
  html { scrollbar-width: thin; scrollbar-color: var(--tinta-suave) var(--fundo); }
}
::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: var(--fundo); }
::-webkit-scrollbar-track:vertical { border-left: 1px solid var(--borda); }
::-webkit-scrollbar-track:horizontal { border-top: 1px solid var(--borda); }
/* O polegar encosta no fio do trilho (mesma borda), senão viram duas verticais
   desalinhadas: aqui a linha só engrossa no trecho em que você está. */
::-webkit-scrollbar-thumb {
  background: var(--tinta-suave);
  border: 0 solid var(--fundo);
  background-clip: padding-box;
}
::-webkit-scrollbar-thumb:vertical { border-right-width: 7px; }
::-webkit-scrollbar-thumb:horizontal { border-bottom-width: 7px; }
::-webkit-scrollbar-thumb:hover { background: var(--tinta); }
::-webkit-scrollbar-corner { background: var(--fundo); }

:focus-visible { outline: 1px solid var(--borda-forte); outline-offset: 3px; }

main {
  max-width: 66ch;
  margin: 0 auto;
  padding: 3rem 1.5rem 6rem;
  animation: entrada 400ms ease both;
}

@keyframes entrada {
  from { opacity: 0; transform: translateY(8px); }
}

/* Movimento reduzido: mantém a barra de leitura (segue o dedo do leitor) */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0.01ms !important; }
  main { animation: none; }
}

h1 {
  font-size: 2rem;
  line-height: 1.2;
  letter-spacing: -0.02em;
  font-weight: 700;
  text-wrap: balance;
}
h2 {
  font-size: 1.2rem;
  margin-top: 3rem;
  letter-spacing: -0.01em;
  text-wrap: balance;
}
h3 { font-size: 1rem; text-wrap: balance; }
p { text-wrap: pretty; }

a { color: var(--tinta); text-underline-offset: 3px; transition: color var(--transicao); }
a:hover { color: var(--tinta-suave); }

/* Separador curto e centrado — pausa de capítulo, não régua de formulário */
hr { border: 0; border-top: 1px solid var(--borda); width: 4rem; margin: 3.5rem auto; }

/* UI em sans; leitura em serifa */
.topo, .botao, .badge, .painel, .quiz-opcao, .card-notas, .rodape,
.professor, .professor-abrir {
  font-family: "Inter", -apple-system, sans-serif;
}

/* Rótulos pequenos em caixa alta — a "cor" do site */
.rotulo, .modulo-tag, .modulo-conta, .licao-meta, .hoje-rotulo, .card-contador,
.grade-min, .estatistica-rotulo {
  font-family: "Inter", -apple-system, sans-serif;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--tinta-suave);
}

/* Topo — fica à mão durante a leitura */
.topo {
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--vidro);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--borda);
}
.topo-interno {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  max-width: 66ch;
  margin: 0 auto;
  padding: 1.1rem 1.5rem;
}
.marca {
  font-weight: 700;
  text-decoration: none;
  letter-spacing: -0.01em;
}
.topo-nav a { text-decoration: none; font-size: 0.9rem; }
.topo-nav a:hover { text-decoration: underline; }
.badge {
  display: inline-block;
  min-width: 1.4em;
  text-align: center;
  background: var(--tinta);
  color: var(--fundo);
  border-radius: 999px;
  padding: 0 0.45em;
  font-size: 0.75em;
  font-weight: 600;
  margin-left: 0.25em;
}

/* Progresso de leitura da lição — puro CSS, some onde não houver suporte */
.leitura {
  height: 2px;
  margin-bottom: -1px;
  background: var(--tinta);
  transform: scaleX(0);
  transform-origin: 0 50%;
}
/* Sem @supports a animação rodaria em 0s e a barra nasceria cheia */
@supports (animation-timeline: scroll()) {
  .leitura {
    animation-name: leitura;
    animation-timing-function: linear;
    animation-fill-mode: both;
    animation-timeline: scroll(root block);
  }
}
@keyframes leitura { to { transform: scaleX(1); } }

/* Home */
.hero h1 { font-size: clamp(2.1rem, 6vw, 2.75rem); margin: 0 0 0.6rem; }
.hero .subtitulo, .revisao .subtitulo {
  color: var(--tinta-suave);
  font-style: italic;
  font-size: 1.15rem;
  max-width: 46ch;
  margin: 0;
  text-wrap: balance;
}

/* Painel de estado — número em serifa, rótulo em caixa alta */
.painel {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem 3.5rem;
  margin: 2.75rem 0 0;
  padding: 1.5rem 0 1.35rem;
  border-top: 1px solid var(--borda);
}
.estatistica {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  text-decoration: none;
  color: inherit;
}
.estatistica-num {
  font-family: "Newsreader", Georgia, serif;
  font-size: 1.9rem;
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums lining-nums;
  transition: color var(--transicao);
}
a.estatistica:hover .estatistica-num { color: var(--tinta-suave); }
a.estatistica:hover .estatistica-rotulo { color: var(--tinta); }

/* A barra fecha o painel: seu avanço é literalmente a linha de base dele */
.progresso-barra { height: 2px; background: var(--borda); overflow: hidden; }
.progresso-fill {
  height: 100%;
  width: 0;
  background: var(--tinta);
  transition: width 900ms cubic-bezier(0.16, 1, 0.3, 1);
}

.hoje { margin: 3rem 0; }
.hoje-rotulo { display: block; margin-bottom: 0.7rem; }
.hoje-card {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  border: 1px solid var(--borda-forte);
  padding: 1.25rem 1.5rem;
  text-decoration: none;
  font-weight: 600;
  font-size: 1.05rem;
  transition: background var(--transicao), color var(--transicao);
}
.hoje-card:hover { background: var(--tinta); color: var(--fundo); }
.hoje-card:hover .hoje-cta { color: var(--fundo); }
.hoje-card:hover .seta { transform: translateX(4px); }
.hoje-cta {
  font-weight: 400;
  font-size: 0.9rem;
  white-space: nowrap;
  color: var(--tinta-suave);
  transition: color var(--transicao);
}
.seta { display: inline-block; transition: transform var(--transicao); }

.certificado {
  border: 1px solid var(--borda-forte);
  padding: 2.25rem 1.75rem;
  margin: 3rem 0;
  text-align: center;
}
.certificado h2 { margin-top: 0; }
.certificado p { margin-bottom: 0; }

/* Grade de módulos */
.modulo { margin-top: 3.5rem; }
.modulo h2 { display: flex; align-items: baseline; gap: 0.75rem; margin-bottom: 0.25rem; }
.modulo-conta { margin-left: auto; font-variant-numeric: tabular-nums; }
.modulo-desc { color: var(--tinta-suave); font-size: 0.95rem; margin-top: 0.25rem; }
.grade { list-style: none; padding: 0; margin: 1.25rem 0 0; border-top: 1px solid var(--borda); }
.grade-item { transition: opacity var(--transicao); }
.grade-item a {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  padding: 0.7rem 0.25rem;
  border-bottom: 1px solid var(--borda);
  text-decoration: none;
  transition: background var(--transicao), padding-left var(--transicao);
}
.grade-item a:hover { background: var(--marca-agua); padding-left: 0.75rem; }
.grade-status {
  width: 0.8em;
  flex-shrink: 0;
  font-size: 0.8em;
  color: var(--tinta-suave);
  transition: color var(--transicao);
}
.grade-status::before { content: "○"; }
.grade-item.feita .grade-status::before { content: "●"; color: var(--tinta); }
.grade-item.travada { opacity: 0.4; }
.grade-titulo { flex: 1; }

/* Lição */
.licao-meta { margin-bottom: 0.5rem; }
.licao h1 { font-size: clamp(1.9rem, 5vw, 2.4rem); margin-top: 0.25rem; }
.licao img { max-width: 100%; filter: grayscale(1); }
/* Hierarquia: o H2 do texto precisa se destacar do corpo (1.1875rem) */
#corpo-licao > h2 { font-size: 1.45rem; line-height: 1.3; }
#corpo-licao > h3 { font-size: 1.1rem; margin-top: 2rem; }
/* Marcador de seção: fio curto acima de cada H2 do texto (não do quiz) */
#corpo-licao > h2::before {
  content: "";
  display: block;
  width: 2rem;
  border-top: 1px solid var(--borda);
  margin-bottom: 0.9rem;
}
#corpo-licao > p:first-child { font-size: 1.06em; }
.trava {
  border: 1px solid var(--borda-forte);
  padding: 1.25rem 1.5rem;
  margin: 2rem 0;
}
.trava p:first-child { margin-top: 0; }

/* Boxes didáticos — apenas tipografia e uma linha */
.box-criadouro, .box-atencao {
  border-left: 2px solid var(--borda-forte);
  padding: 0.25rem 0 0.25rem 1.35rem;
  margin: 2rem 0;
}
.box-criadouro > p:first-child, .box-atencao > p:first-child {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--tinta-suave);
  margin: 0 0 0.35rem;
}
.box-criadouro > p, .box-atencao > p { margin: 0.35rem 0; }

blockquote {
  margin: 2rem 0;
  padding-left: 1.35rem;
  border-left: 2px solid var(--borda-forte);
  font-style: italic;
  font-weight: 500;
}

table { border-collapse: collapse; width: 100%; font-size: 0.92rem; margin: 1.5rem 0; }
th, td { text-align: left; padding: 0.5rem 0.75rem 0.5rem 0; border-bottom: 1px solid var(--borda); vertical-align: top; }
th { font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--tinta-suave); font-weight: 600; }
tbody tr { transition: background var(--transicao); }
tbody tr:hover { background: var(--marca-agua); }

code {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 0.9em;
  background: var(--marca-agua);
  padding: 0.1em 0.35em;
}

/* Quiz */
.quiz { margin-top: 4rem; border-top: 1px solid var(--borda-forte); padding-top: 1.5rem; }
.quiz h2 { margin-top: 0; }
.quiz-intro { color: var(--tinta-suave); font-size: 0.95rem; }
.quiz-pergunta {
  border: 1px solid var(--borda);
  margin: 0 0 1.25rem;
  padding: 1.2rem 1.35rem;
  transition: border-color var(--transicao);
}
/* Enunciado longo cortava a borda do fieldset: float tira a legend de cima dela */
.quiz-pergunta legend {
  float: left;
  width: 100%;
  padding: 0;
  margin-bottom: 0.8rem;
  font-weight: 600;
}
.quiz-pergunta legend + .quiz-opcao { clear: both; }
.quiz-opcao {
  display: flex;
  align-items: baseline;
  gap: 0.55em;
  padding: 0.35rem 0.6rem;
  margin: 0 -0.6rem;
  cursor: pointer;
  transition: background var(--transicao);
}
.quiz-opcao:hover { background: var(--marca-agua); }
.quiz-opcao input { accent-color: var(--tinta); flex-shrink: 0; }
.quiz-pergunta.certa { border-color: var(--borda-forte); }
.quiz-pergunta.errada { border-color: var(--borda-forte); border-style: dashed; }
.quiz-explica { font-size: 0.9rem; color: var(--tinta-suave); margin-bottom: 0.25rem; }
.quiz-sucesso { font-weight: 600; }
#quiz-resultado:not([hidden]) { animation: entrada 300ms ease both; }

.botao {
  display: inline-block;
  background: var(--tinta);
  color: var(--fundo);
  border: 1px solid var(--tinta);
  padding: 0.55rem 1.6rem;
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  font-family: inherit;
  transition: background var(--transicao), color var(--transicao), transform var(--transicao);
}
.botao:hover { background: var(--fundo); color: var(--tinta); }
.botao:active { transform: translateY(1px); }

/* Navegação da lição */
.licao-nav {
  display: flex;
  justify-content: space-between;
  gap: 1.5rem;
  margin-top: 4rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--borda);
  font-size: 0.95rem;
}
.licao-nav a { display: inline-block; text-decoration: none; transition: transform var(--transicao), color var(--transicao); }
.licao-nav a:hover { text-decoration: underline; }
.licao-nav .nav-prev:hover { transform: translateX(-3px); }
.licao-nav .nav-next:hover { transform: translateX(3px); }

/* Revisão (flashcards) */
.card {
  border: 1px solid var(--borda-forte);
  padding: 1.75rem;
  margin-top: 2rem;
}
.card-contador { margin-top: 0; }
.card-face { font-size: 1.15rem; font-weight: 600; margin: 1.25rem 0 1.5rem; }
.card-verso { font-weight: 400; border-top: 1px solid var(--borda); padding-top: 1.25rem; }
#rev-verso-area:not([hidden]) { animation: entrada 260ms ease both; }
.card-pergunta { color: var(--tinta-suave); font-size: 0.9rem; }
.card-notas { display: flex; gap: 0.75rem; flex-wrap: wrap; }
.card-notas .botao-erro, .card-notas .botao-quase {
  background: var(--fundo);
  color: var(--tinta);
}
.card-notas .botao-erro:hover, .card-notas .botao-quase:hover {
  background: var(--tinta);
  color: var(--fundo);
}

.rodape {
  max-width: 66ch;
  margin: 0 auto;
  padding: 1.5rem;
  border-top: 1px solid var(--borda);
  color: var(--tinta-suave);
  font-size: 0.78rem;
  letter-spacing: 0.04em;
}
.rodape p { margin: 0; }

/* Professor da lição — gaveta à direita, mesmo vocabulário: fio de 1px,
   inversão no hover, rótulo em caixa alta. Nenhum ícone. */
.professor-abrir {
  position: fixed;
  right: 1.5rem;
  bottom: 1.5rem;
  z-index: 20;
  background: var(--fundo);
  color: var(--tinta);
  border: 1px solid var(--borda-forte);
  padding: 0.6rem 1.1rem;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background var(--transicao), color var(--transicao), transform var(--transicao);
}
.professor-abrir:hover { background: var(--tinta); color: var(--fundo); }
.professor-abrir:active { transform: translateY(1px); }
/* Com a gaveta aberta o botão cairia sobre o "Perguntar" — e ela já tem o
   próprio "Fechar", então ele sai de cena. */
body.com-professor .professor-abrir { display: none; }

.professor {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 15;
  width: min(34rem, 100%);
  flex-direction: column;
  background: var(--fundo);
  border-left: 1px solid var(--borda-forte);
}
/* `display` mora aqui, não em `.professor`: um `display: flex` de autor vence o
   `[hidden] { display: none }` do navegador e a gaveta nasceria aberta.
   Como `hidden` é display:none, a entrada é animação e não transição — mesmo
   padrão do resultado do quiz. */
.professor:not([hidden]) {
  display: flex;
  animation: deslize 260ms cubic-bezier(0.16, 1, 0.3, 1) both;
}
@keyframes deslize {
  from { opacity: 0; transform: translateX(1.5rem); }
}

/* Em tela larga a página abre espaço em vez de ficar embaixo da gaveta: só o
   centro do bloco se desloca, o texto não reflui. */
@media (min-width: 1180px) {
  body { transition: padding-right var(--transicao); }
  body.com-professor { padding-right: 34rem; }
}

/* O header da gaveta tem que fechar na mesma altura do topo da página: mesmo
   padding, mesma linha de base, mesmo fio. O +1px embaixo compensa a barra de
   leitura, que fica sob o fio do topo e o empurra um pixel para baixo. */
.professor-topo {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  padding: 1.1rem 1.5rem;
  /* Mesma conta do topo (padding + linha da marca), mais 1px do próprio fio e
     1px da barra de leitura. Altura fixa e não só padding porque as duas
     tipografias do header esticariam a caixa de linha e desalinhariam o fio. */
  height: calc(1.1rem * 2 + 1.1875rem * 1.7 + 2px);
  border-bottom: 1px solid var(--borda);
}
/* Trave invisível com a métrica da marca ("Escola da Água"): o rótulo do painel
   é bem menor, e sem uma referência do mesmo tamanho a linha de base dele
   subiria. Assim os dois títulos deitam na mesma linha sem número mágico.
   Vai DENTRO do rótulo, não no header: como item do flex ela contaria como um
   terceiro elemento e o `space-between` jogaria o rótulo para o meio. */
.professor-topo .rotulo::before {
  content: "\00a0";
  display: inline-block;
  width: 0;
  overflow: hidden;
  font-size: 1.1875rem;
  line-height: 1.7;
}
.professor-acoes { display: flex; gap: 1rem; }
.professor-acao {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--tinta-suave);
  cursor: pointer;
  transition: color var(--transicao);
}
.professor-acao:hover { color: var(--tinta); text-decoration: underline; }

.professor-conversa {
  flex: 1;
  overflow-y: auto;
  padding: 0.5rem 1.5rem 1.5rem;
  overscroll-behavior: contain;
}
.professor-turno { margin-top: 1.75rem; animation: entrada 240ms ease both; }
.professor-turno .rotulo { display: block; margin-bottom: 0.4rem; }
.professor-turno p { margin: 0; }

/* Pergunta: fio à esquerda, como citação. Resposta: prosa em serifa, para ler. */
.turno-aluno {
  border-left: 2px solid var(--borda-forte);
  padding-left: 1.1rem;
}
.turno-aluno p { white-space: pre-wrap; font-size: 0.95rem; }
.turno-professor p {
  font-family: "Newsreader", Georgia, serif;
  font-size: 1.05rem;
  line-height: 1.65;
  white-space: pre-wrap;
}
.turno-professor .professor-erro { font-style: italic; color: var(--tinta-suave); }

/* Cursor piscando enquanto a resposta está sendo escrita — desde antes do
   primeiro caractere até a fila do datilógrafo esvaziar */
.escrevendo::after {
  content: "";
  display: inline-block;
  width: 0.5ch;
  height: 1em;
  background: var(--tinta);
  vertical-align: -0.12em;
  animation: pisca 1s steps(2, jump-none) infinite;
}
@keyframes pisca { 50% { opacity: 0; } }

.professor-form {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  padding: 1.25rem 1.5rem;
  border-top: 1px solid var(--borda);
}
.professor-trecho {
  margin: 0;
  padding-left: 1.1rem;
  border-left: 2px solid var(--borda-forte);
  font-family: "Newsreader", Georgia, serif;
  font-style: italic;
  font-size: 0.92rem;
  line-height: 1.5;
  color: var(--tinta-suave);
  max-height: 5.5em;
  overflow-y: auto;
  cursor: pointer;
  transition: color var(--transicao);
}
.professor-trecho:hover { color: var(--tinta); text-decoration: line-through; }
.professor-campo {
  font: inherit;
  font-size: 0.95rem;
  color: var(--tinta);
  background: var(--fundo);
  border: 1px solid var(--borda);
  padding: 0.6rem 0.75rem;
  resize: vertical;
  transition: border-color var(--transicao);
}
.professor-campo:focus { border-color: var(--borda-forte); outline: 0; }
.professor-form .botao:disabled { opacity: 0.4; cursor: progress; }

@media (max-width: 600px) {
  .professor { border-left: 0; }
  .professor-abrir { right: 1rem; bottom: 1rem; }
}