/* ΠΑΙΔΕΙΑ — o instrumento de estudo do Bruno.
 *
 * A carta de design, em cinco linhas:
 * 1. O mundo é o do manuscrito de estudo: pergaminho, fólio, tinta, e a
 *    RUBRICA (vermelho de rubricador) marcando âncoras do mapa (T1, O2) e
 *    vereditos. A rubrica é a assinatura da página: estrutura, não enfeite.
 * 2. A ação é AZUL ULTRAMAR de iluminura (--lapis), nunca o vermelho: o
 *    vermelho aqui sempre significa algo (âncora, erro).
 * 3. Tipografia de verdade: EB Garamond local (400/500, com grego) para o
 *    conteúdo; a interface (botões, etiquetas, progresso) fala em
 *    system-ui pequeno e espaçado, como lápis ao lado da pena.
 * 4. Parentesco com a estela do portal (ΛΟΓΟΣ): filete duplo, marca grega
 *    em capitais espaçadas. Parentesco, não cópia: lá é mármore, aqui é papel.
 * 5. Sem JavaScript, sem estilo embutido (CSP), claro e escuro.
 */

:root {
  color-scheme: light dark;
  --pergaminho: #e9e4d8;   /* a mesa forrada */
  --folio: #f9f6ed;        /* a folha sob leitura */
  --tinta: #221d14;
  --tinta-2: #6b6355;
  --fio: #d8d1bf;          /* regra d'água */
  --fio-forte: #b5ab92;
  --lapis: #2c4d95;        /* ação: ultramar de iluminura */
  --lapis-tinta: #f9f6ed;  /* texto sobre o ultramar */
  --rubrica: #9c2e1e;      /* âncoras e erro */
  --certo: #35663d;
  --espera: #7d611d;
  --serifa: 'EB Garamond', Georgia, 'Times New Roman', serif;
  --utilitaria: system-ui, -apple-system, 'Segoe UI', sans-serif;
  --r: 3px;                /* papel tem canto quase reto */
  --entra: 90ms ease-out;
}

@media (prefers-color-scheme: dark) {
  :root {
    --pergaminho: #17120a;
    --folio: #221b10;
    --tinta: #ece3d0;
    --tinta-2: #a89c86;
    --fio: #3e3422;
    --fio-forte: #5b4d32;
    --lapis: #a7bbe9;
    --lapis-tinta: #17120a;
    --rubrica: #e29579;
    --certo: #93c49b;
    --espera: #d6b968;
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--pergaminho);
  color: var(--tinta);
  font-family: var(--serifa);
  font-size: 18px;
  line-height: 1.55;
}

main {
  max-width: 620px;
  margin: 0 auto;
  padding: 20px 18px 72px;
}

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

/* ------------------------------------------------------------------ topo */
.topo { background: var(--pergaminho); }
.topo nav {
  max-width: 620px;
  margin: 0 auto;
  padding: 18px 18px 0;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
}
.marca {
  font-family: var(--serifa);
  font-weight: 500;
  font-size: 21px;
  letter-spacing: 0.22em;
  color: var(--tinta);
  text-decoration: none;
}
.marca:hover { color: var(--rubrica); }
.topo .vias { display: flex; gap: 18px; }
.topo .vias a {
  font-family: var(--utilitaria);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--tinta-2);
  text-decoration: none;
  padding-bottom: 2px;
}
.topo .vias a:hover { color: var(--lapis); border-bottom: 1px solid var(--lapis); }
/* o filete duplo da estela, em miniatura: fecha o frontão */
.filete {
  max-width: 620px;
  margin: 12px auto 0;
  padding: 0 18px;
}
.filete::after {
  content: "";
  display: block;
  border-top: 1px solid var(--fio-forte);
  border-bottom: 1px solid var(--fio-forte);
  height: 3px;
}

/* ---------------------------------------------------------------- blocos */
h1 { font-family: var(--serifa); font-weight: 500; font-size: 28px; line-height: 1.22; margin: 10px 0 12px; }
h2 {
  font-family: var(--utilitaria);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--tinta-2);
  margin: 34px 0 10px;
}
h3 { font-family: var(--serifa); font-weight: 500; font-size: 19px; margin: 0 0 6px; }
h3 a { color: var(--tinta); text-decoration: none; }
h3 a:hover { color: var(--lapis); text-decoration: underline; }

.cartao {
  background: var(--folio);
  border: 1px solid var(--fio);
  border-radius: var(--r);
  padding: 20px 22px;
  margin: 14px 0;
}
.cartao.destaque { text-align: center; padding: 30px 22px 26px; }
.cartao.estreito { max-width: 400px; margin: 56px auto; text-align: center; }
.cartao.compacto { padding: 10px 14px; margin: 8px 0; font-size: 16px; }

.numero-grande {
  font-family: var(--serifa);
  font-weight: 500;
  font-size: 56px;
  line-height: 1;
  display: block;
  margin-bottom: 4px;
}

.mudo { color: var(--tinta-2); font-size: 16px; }
.migalha { font-family: var(--utilitaria); font-size: 13px; margin: 2px 0 0; }
.migalha a { color: var(--tinta-2); }
.aviso { color: var(--rubrica); font-weight: 500; }

/* a rubrica: âncora do mapa (T1, O2) e marcas de margem */
.rubrica {
  font-family: var(--utilitaria);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--rubrica);
}

/* ----------------------------------------------------------------- botões */
.botao, button {
  display: inline-block;
  font-family: var(--utilitaria);
  font-size: 15px;
  font-weight: 500;
  padding: 11px 22px;
  border-radius: var(--r);
  border: 1px solid var(--fio-forte);
  background: var(--folio);
  color: var(--tinta);
  text-decoration: none;
  cursor: pointer;
  transition: border-color var(--entra), background-color var(--entra);
}
.botao:hover, button:hover { border-color: var(--lapis); color: var(--lapis); }
.principal {
  background: var(--lapis);
  border-color: var(--lapis);
  color: var(--lapis-tinta);
  font-weight: 600;
}
.principal:hover { color: var(--lapis-tinta); filter: brightness(1.08); }
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--lapis);
  outline-offset: 2px;
}
.refazer { margin: 14px 0 0; }

/* ------------------------------------------------------------------- quiz */
.progresso {
  font-family: var(--utilitaria);
  font-size: 13px;
  letter-spacing: 0.06em;
  color: var(--tinta-2);
  margin: 20px 4px 6px;
}
/* a trilha: um segmento por questão, preenchido conforme avança (sem JS,
   sem estilo embutido: cada passo é um elemento com/sem .feito) */
.trilha { display: flex; gap: 5px; margin: 8px 4px 2px; }
.trilha .passo {
  height: 3px;
  flex: 1;
  background: var(--fio);
  border-radius: 2px;
}
.trilha .passo.feito { background: var(--lapis); }

.enunciado { font-size: 22px; }

.opcoes { list-style: none; margin: 18px 0; padding: 0; }
.opcoes li { margin: 8px 0; }
.opcoes label {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 13px 15px;
  border: 1px solid var(--fio);
  border-radius: var(--r);
  cursor: pointer;
  transition: border-color var(--entra);
}
.opcoes label:hover { border-color: var(--lapis); }
.opcoes input { margin-top: 5px; accent-color: var(--lapis); }

.rotulo {
  display: block;
  font-family: var(--utilitaria);
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--tinta-2);
  margin: 14px 0 4px;
}
textarea, input[type="password"] {
  width: 100%;
  font: inherit;
  font-size: 17px;
  color: var(--tinta);
  background: var(--pergaminho);
  border: 1px solid var(--fio-forte);
  border-radius: var(--r);
  padding: 10px 12px;
  margin: 2px 0 14px;
}
input[type="file"] {
  width: 100%;
  font-family: var(--utilitaria);
  font-size: 14px;
  color: var(--tinta);
  border: 1px dashed var(--fio-forte);
  border-radius: var(--r);
  padding: 16px 12px;
  margin: 2px 0 6px;
  background: var(--pergaminho);
}

.veredito {
  font-family: var(--utilitaria);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin: 4px 0 10px;
}
.veredito.certo { color: var(--certo); }
.veredito.errado { color: var(--rubrica); }
.explicacao {
  border-left: 2px solid var(--fio-forte);
  padding-left: 14px;
  color: var(--tinta-2);
  font-size: 17px;
}

/* -------------------------------------------------------------- etiquetas */
.etiqueta {
  display: inline-block;
  font-family: var(--utilitaria);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 3px 10px;
  border-radius: 999px;
  border: 1px solid var(--fio-forte);
  color: var(--tinta-2);
  margin-left: 8px;
  vertical-align: 2px;
}
.etiqueta.novo { color: var(--lapis); border-color: var(--lapis); }
.etiqueta.em-curso, .etiqueta.aguardando-correção,
.etiqueta.aguardando, .etiqueta.processando { color: var(--espera); border-color: var(--espera); }
.etiqueta.corrigido, .etiqueta.concluido { color: var(--certo); border-color: var(--certo); }
.etiqueta.erro { color: var(--rubrica); border-color: var(--rubrica); }

.lista-limpa { list-style: none; padding: 0; margin: 8px 0 0; }
.lista-limpa li { margin: 6px 0; }

/* ---------------------------------------------------------------- revisão */
/* o fólio: regra dupla no alto (a pauta do copista), rubrica na margem */
.carta-estudo { padding: 0 26px 26px; }
.carta-estudo::before {
  content: "";
  display: block;
  border-top: 1px solid var(--fio-forte);
  border-bottom: 1px solid var(--fio-forte);
  height: 3px;
  margin: 14px -4px 18px;
}
.rubrica-margem { margin: 0 0 12px; }
.carta-estudo .frente { font-size: 22px; }
.carta-estudo hr { border: none; border-top: 1px solid var(--fio); margin: 20px 0; }
.mostrar { text-align: center; margin: 26px 0 6px; }

.avaliacao {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin-top: 22px;
}
.botao-nota {
  padding: 13px 4px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.03em;
}
.botao-nota.errei { color: var(--rubrica); border-color: var(--rubrica); }
.botao-nota.dificil { color: var(--espera); border-color: var(--espera); }
.botao-nota.bom { color: var(--certo); border-color: var(--certo); }
.botao-nota.facil { color: var(--lapis); border-color: var(--lapis); }
.botao-nota:hover { filter: brightness(0.92); }
.suspender {
  grid-column: 1 / -1;
  margin-top: 8px;
  border: none;
  background: none;
  color: var(--tinta-2);
  font-family: var(--utilitaria);
  font-size: 12px;
  letter-spacing: 0.06em;
  text-decoration: underline;
  text-underline-offset: 3px;
  padding: 6px;
}
.suspender:hover { color: var(--rubrica); border: none; }

/* ------------------------------------------------------------------ prosa */
.prosa { font-family: var(--serifa); }
.prosa p { margin: 10px 0; }
.prosa ul, .prosa ol { padding-left: 22px; }
.prosa strong { font-weight: 500; color: var(--tinta); }
.prosa h2, .prosa h3 {
  font-family: var(--serifa);
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
  color: var(--tinta);
  font-size: 20px;
  margin: 22px 0 8px;
}
.prosa blockquote {
  margin: 12px 0;
  padding-left: 14px;
  border-left: 2px solid var(--rubrica);
  color: var(--tinta-2);
}
.prosa code {
  font-family: ui-monospace, Consolas, monospace;
  font-size: 0.85em;
  background: var(--pergaminho);
  padding: 1px 5px;
  border-radius: 3px;
}

@media (max-width: 430px) {
  body { font-size: 17px; }
  h1 { font-size: 25px; }
  .avaliacao { grid-template-columns: repeat(2, 1fr); }
  .cartao { padding: 16px 16px; }
  .carta-estudo { padding: 0 18px 20px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; }
}