/* Superficie de resposta. Sem fonte externa, sem CDN, sem rastreio: a pagina nao faz
   nenhuma requisicao para fora do proprio dominio.

   Direcao visual: laboratorio de evidencia. Papel claro clinico, superficies que
   flutuam com sombra em camadas, hairlines no lugar de borda pesada, e uma assinatura
   unica: o trilho de evidencia, a linha verde luminosa da barra de progresso. Tudo com
   as cores de sempre; o futurismo vem de luz, respiro e precisao, nao de cor nova. */

:root {
  --tinta: #17222b;
  --tinta-fraca: #55636e;
  --papel: #f6f7f5;
  --cartao: #ffffff;
  --linha: #dfe3e0;
  --hairline: rgba(23, 34, 43, .08);
  --acento: #1f5f4f;
  --acento-claro: #e7f0ec;
  --brilho: rgba(31, 95, 79, .16);
  --alerta: #8a3324;
  --raio: 16px;
  --sombra-flutuante:
    0 1px 2px rgba(23, 34, 43, .04),
    0 8px 24px -12px rgba(23, 34, 43, .18);
  --transicao: 160ms cubic-bezier(.2, .7, .3, 1);
  --mono: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  padding: 0 0 6rem;
  color: var(--tinta);
  font: 16px/1.55 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  /* Aurora minima no topo: um sopro do verde institucional sobre o papel. */
  background:
    radial-gradient(90rem 26rem at 50% -14rem, var(--brilho), transparent 65%),
    var(--papel);
  background-attachment: fixed;
}

main {
  max-width: 46rem;
  margin: 0 auto;
  padding: 1.75rem 1.25rem 2rem;
}

h1 {
  font-size: 1.5rem;
  line-height: 1.22;
  letter-spacing: -.022em;
  font-weight: 680;
  margin: 0 0 .75rem;
}
h2 { font-size: 1.15rem; letter-spacing: -.01em; margin: 0 0 .35rem; }
p { margin: 0 0 1rem; }

.cartao {
  background: var(--cartao);
  border: 1px solid var(--hairline);
  border-radius: var(--raio);
  padding: 1.6rem 1.5rem;
  margin-bottom: 1rem;
  box-shadow: var(--sombra-flutuante);
}

.rotulo-fraco { color: var(--tinta-fraca); font-size: .9rem; }

.lista-info { margin: 0 0 1.25rem; padding-left: 1.1rem; }
.lista-info li { margin-bottom: .5rem; }

.destaque {
  background: linear-gradient(135deg, var(--acento-claro), rgba(231, 240, 236, .45));
  border: 1px solid rgba(31, 95, 79, .18);
  border-left: 3px solid var(--acento);
  padding: 1rem 1.1rem;
  border-radius: 12px;
  margin-bottom: 1.25rem;
}

button {
  font: inherit;
  font-weight: 600;
  border-radius: 999px;
  border: 1px solid transparent;
  padding: .7rem 1.5rem;
  cursor: pointer;
  min-height: 44px;
  transition: background var(--transicao), border-color var(--transicao),
              box-shadow var(--transicao), transform var(--transicao);
}

.primario {
  background: var(--acento);
  color: #fff;
  box-shadow: 0 6px 16px -8px rgba(31, 95, 79, .55);
}
.primario:hover { background: #17493d; box-shadow: 0 8px 20px -8px rgba(31, 95, 79, .6); }
.primario:active { transform: translateY(1px); }
.secundario { background: rgba(255, 255, 255, .7); color: var(--tinta); border-color: var(--linha); }
.secundario:hover { background: #fff; border-color: var(--acento); }

.acoes { display: flex; gap: .75rem; flex-wrap: wrap; align-items: center; }
.acoes .espaco { flex: 1; }

/* ---------------------------------------------------------------------------
   Trilho de evidencia: a barra de progresso. Linha fina, ponta luminosa. E a
   assinatura visual desta superficie, entao ela e a unica coisa que brilha. */

.progresso { margin-bottom: 1.25rem; }
.progresso .barra {
  height: 4px;
  background: rgba(23, 34, 43, .08);
  border-radius: 999px;
  overflow: hidden;
}
.progresso .barra span {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(31, 95, 79, .55), var(--acento));
  box-shadow: 0 0 10px 1px var(--brilho);
  transition: width .28s cubic-bezier(.2, .7, .3, 1);
}
.progresso .texto {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  margin-top: .45rem;
  font-family: var(--mono);
  font-size: .74rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--tinta-fraca);
}
.progresso .contexto { color: var(--tinta-fraca); opacity: .85; }

/* Formato por dimensao (bloco inteiro numa tela) */

.item { border-top: 1px solid var(--hairline); padding: 1.1rem 0; }
.item:first-of-type { border-top: none; }
.item .enunciado { margin-bottom: .7rem; }

.escala { display: grid; gap: .4rem; }
@media (min-width: 40rem) {
  .escala { grid-template-columns: repeat(var(--colunas, 5), 1fr); }
}

.opcao {
  display: flex;
  align-items: center;
  gap: .5rem;
  border: 1px solid var(--linha);
  border-radius: 10px;
  padding: .6rem .7rem;
  background: #fff;
  cursor: pointer;
  min-height: 44px;
  transition: border-color var(--transicao), background var(--transicao),
              box-shadow var(--transicao);
}
.opcao:hover { border-color: var(--acento); box-shadow: 0 0 0 3px var(--brilho); }
.opcao input { accent-color: var(--acento); margin: 0; }
.opcao.marcada { border-color: var(--acento); background: var(--acento-claro); }
.opcao .rotulo { font-size: .93rem; }

.omissao { font-size: .85rem; color: var(--tinta-fraca); margin-top: .6rem; }

.revisao-bloco { border-top: 1px solid var(--hairline); padding: .9rem 0; }
.revisao-bloco h3 { margin: 0 0 .4rem; font-size: 1rem; }
.revisao-linha { display: flex; justify-content: space-between; gap: 1rem; font-size: .92rem; padding: .2rem 0; }
.revisao-linha .valor { color: var(--tinta-fraca); white-space: nowrap; }
.revisao-linha .em-branco { color: var(--alerta); }

.aviso {
  background: #fdf3f1;
  border: 1px solid #e6c8c1;
  color: var(--alerta);
  padding: 1rem;
  border-radius: 12px;
  margin-bottom: 1rem;
}

.ajuda {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  background: rgba(23, 34, 43, .94);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: #fff;
  text-align: center;
  padding: .7rem 1rem;
  font-size: .9rem;
  border-top: 1px solid rgba(255, 255, 255, .06);
}
.ajuda a { color: #8fd0bb; }

.selo-demo {
  display: inline-block;
  background: #fff3cd;
  border: 1px solid #e0cd8f;
  color: #6b5312;
  font-family: var(--mono);
  font-size: .72rem;
  letter-spacing: .05em;
  text-transform: uppercase;
  padding: .25rem .6rem;
  border-radius: 999px;
  margin-bottom: .75rem;
}

/* ---------------------------------------------------------------------------
   Uma pergunta por tela. A escala ocupa a largura toda; no celular vira uma
   coluna de alvos de 56px, o tamanho que se acerta com o polegar em pe, de
   luva, no chao de fabrica. */

.cartao-item { padding: 1.75rem 1.5rem; }

/* Contexto da dimensao e frase, nao rotulo: fica em caixa normal e discreto. O
   monospace maiusculo e reservado ao que e curto (trilho, contagens, hashes). */
.cabecalho-bloco {
  font-size: .9rem;
  color: var(--acento);
  font-weight: 600;
  margin: 0 0 .7rem;
}

.enunciado-unico {
  font-size: 1.35rem;
  line-height: 1.32;
  letter-spacing: -.018em;
  font-weight: 650;
  margin: 0 0 1.5rem;
}

.escala-unica {
  display: grid;
  gap: .6rem;
}

.opcao-unica {
  display: flex;
  align-items: center;
  gap: .85rem;
  min-height: 56px;
  padding: .65rem 1.05rem;
  border: 1.5px solid var(--linha);
  border-radius: 14px;
  background: #fff;
  cursor: pointer;
  transition: border-color var(--transicao), background var(--transicao),
              box-shadow var(--transicao), transform var(--transicao);
}
.opcao-unica:hover {
  border-color: var(--acento);
  box-shadow: 0 0 0 3px var(--brilho), 0 4px 14px -8px rgba(23, 34, 43, .25);
  transform: translateY(-1px);
}
.opcao-unica:focus-within { outline: 3px solid #9fd3c3; outline-offset: 2px; }

/* O input continua existindo para leitor de tela e teclado; some so visualmente. */
.opcao-unica input {
  position: absolute;
  width: 1px; height: 1px;
  opacity: 0;
  pointer-events: none;
}

.opcao-unica .rotulo { font-size: 1.05rem; }

.opcao-unica.marcada {
  border-color: var(--acento);
  background: var(--acento-claro);
  font-weight: 600;
  box-shadow: 0 0 0 3px var(--brilho);
}
/* A marca de selecao substitui o circulo numerado: diz "foi esta" sem sugerir nota. */
.opcao-unica.marcada::after {
  content: '✓';
  margin-left: auto;
  color: var(--acento);
  font-weight: 700;
  animation: confirmar .18s cubic-bezier(.2, .7, .3, 1);
}
@keyframes confirmar {
  from { transform: scale(.4); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}

.atalho { text-align: center; margin-top: 1.25rem; font-size: .82rem; }
/* Atalho de teclado nao ajuda quem responde no celular; so aparece com teclado provavel. */
@media (max-width: 48rem) { .atalho { display: none; } }

/* Numa tela larga, a escala vira uma linha: mesma leitura, menos rolagem. */
@media (min-width: 52rem) {
  .escala-unica { grid-template-columns: repeat(var(--colunas, 5), 1fr); gap: .5rem; }
  .opcao-unica {
    flex-direction: column;
    justify-content: center;
    gap: .5rem;
    text-align: center;
    min-height: 96px;
    padding: .8rem .5rem;
  }
  .opcao-unica.marcada::after { margin: 0; }
  .opcao-unica .rotulo { font-size: .95rem; }
}

/* Classes no lugar de `style=` inline: a CSP desta superficie nao permite atributo de
   estilo, e o que era inline simplesmente nao era aplicado. */
.campo-token {
  width: 100%;
  padding: .8rem .9rem;
  font-family: var(--mono);
  font-size: 1rem;
  letter-spacing: .04em;
  border: 1px solid var(--linha);
  border-radius: 10px;
  transition: border-color var(--transicao), box-shadow var(--transicao);
}
.campo-token:focus { border-color: var(--acento); box-shadow: 0 0 0 3px var(--brilho); outline: none; }
.acoes-espacadas { margin-top: 1rem; }
.acoes-juntas { margin-top: .5rem; }
.sem-margem { margin: 0; }
.sem-margem-baixo { margin: 0 0 .5rem; }

/* Revisao compacta: uma linha por dimensao, nao uma por pergunta. */
.contagem-grande {
  font-size: 1.15rem;
  font-weight: 650;
  letter-spacing: -.01em;
  margin: 0 0 1rem;
}

.titulo-resumo {
  font-family: var(--mono);
  font-size: .74rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  margin: 1.5rem 0 .5rem;
  color: var(--tinta-fraca);
  font-weight: 600;
}

.resumo-blocos { display: grid; gap: .4rem; }

.linha-resumo {
  display: flex;
  align-items: center;
  gap: 1rem;
  width: 100%;
  text-align: left;
  background: #fff;
  border: 1px solid var(--linha);
  border-radius: 12px;
  padding: .7rem 1rem;
  min-height: 48px;
  font-weight: 500;
}
.linha-resumo:hover { border-color: var(--acento); box-shadow: 0 0 0 3px var(--brilho); }
.linha-resumo .nome { flex: 1; }
.linha-resumo .contagem {
  font-family: var(--mono);
  color: var(--acento);
  font-size: .82rem;
  white-space: nowrap;
}
.linha-resumo .contagem.pendente { color: var(--alerta); }
.linha-resumo.incompleta { border-color: #e6c8c1; }

.aviso-envio { margin: .75rem 0 0; }

.revisao-detalhe { margin-top: 1.25rem; }
.revisao-detalhe summary {
  cursor: pointer;
  color: var(--acento);
  font-size: .92rem;
  padding: .5rem 0;
}

/* Carimbo do build no rodape: quem relata problema consegue dizer qual versao viu. */
.marca-build { opacity: .55; font-size: .78rem; font-family: var(--mono); font-variant-numeric: tabular-nums; }

/* ---------------------------------------------------------------------------
   Acessibilidade.

   Foco visivel em TUDO que recebe foco: quem navega por teclado precisa saber onde
   esta. O foco programatico do titulo (focarTitulo) nao ganha anel, ele orienta o
   leitor de tela, nao o teclado. */

button:focus-visible,
a:focus-visible,
input:focus-visible,
summary:focus-visible,
.linha-resumo:focus-visible {
  outline: 3px solid #1f5f4f;
  outline-offset: 2px;
}

h1[tabindex="-1"]:focus,
h2[tabindex="-1"]:focus { outline: none; }

/* Quem pede menos movimento recebe menos movimento. */
@media (prefers-reduced-motion: reduce) {
  .progresso .barra span,
  .opcao-unica,
  .opcao,
  button { transition: none; }
  .opcao-unica.marcada::after { animation: none; }
  .opcao-unica:hover { transform: none; }
}