/* A página da questão, desenhada a partir de 360 px.
 *
 * Usa os tokens de `tokens.css`, que em 03/09/2026 passaram a ser os do
 * protótipo do Claude Design.
 *
 * A alternativa não está mais aqui: desde o item F.4b ela é componente, em
 * `componentes/alternativa.css`, e a mesma linha serve à demonstração da
 * página inicial, à página da questão e à questão do simulado. O que ficou
 * neste arquivo é o que é só desta página.
 *
 * Duas medidas do item E.4 continuam sendo cobradas aqui: enunciado em
 * serifada, e nada com alvo de toque menor que o `--toque` de 44 px.
 */

.q-pagina {
  max-width: 46rem;
  margin: 0 auto;
  padding: 1rem 1.1rem 3rem;
}

/* ── a atribuição, exigida pelo item D.7 em toda página de questão ───────── */

.q-atribuicao {
  margin: 0 0 1rem;
  font-size: .8125rem;
  color: var(--text-2);
  font-variant-numeric: tabular-nums;
}

/* ── o bloco de contexto, compartilhado por várias questões ─────────────── */

.q-contexto {
  margin: 0 0 1.5rem;
  padding: 1rem;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--r);
}
.q-contexto-titulo { font-size: 1rem; margin-bottom: .5rem; }

/* ── a questão ──────────────────────────────────────────────────────────── */

.q-questao {
  padding: 1.15rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: var(--shadow);
}

.q-numero {
  font-size: .6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--text-2);
  margin-bottom: .75rem;
}

.q-anulada {
  margin: 0 0 1rem;
  padding: .5rem .75rem;
  background: var(--warn-soft);
  color: var(--warn);
  border-radius: 8px;
  font-size: .875rem;
}

/* O enunciado é serifado. Item E.4. */
.q-enunciado {
  font-family: var(--serif);
  font-size: 1.0625rem;
  line-height: 1.6;
}
.q-enunciado p { margin: 0 0 .85rem; }
.q-enunciado p:last-child { margin-bottom: 0; }

/* Decisão 32.3, fase 8L: o aviso do exemplo resolvido, no lugar das alternativas. */
.q-exemplo {
  margin: 14px 0 0;
  padding: 10px 14px;
  border-left: 3px solid var(--brand);
  background: var(--brand-soft);
  color: var(--text);
  font-size: 14.5px;
  line-height: 1.45;
}

.q-sem-alternativas {
  margin: 1.25rem 0 0;
  font-size: .875rem;
  color: var(--text-2);
  font-style: italic;
}

/* ── o gabarito, aberto pela decisão 5 e recolhido para não estragar ────── */

.q-gabarito {
  margin-top: 1.25rem;
  border-top: 1px solid var(--line);
  padding-top: .85rem;
}
.q-gabarito summary {
  cursor: pointer;
  min-height: var(--toque);
  display: flex; align-items: center;
  font-size: .9375rem;
  color: var(--brand);
  font-weight: 500;
}
.q-gabarito p { margin: .5rem 0 0; font-size: .9375rem; }

/* ── figura da prova ────────────────────────────────────────────────────── */

.q-figura-prova {
  margin: 1rem 0;
  text-align: center;
}
.q-figura-prova img {
  max-width: 100%;
  /* Grupo B da inspeção no Chrome, 30/09/2026: o renderizador traduz a
   * largura do LaTeX em porcentagem, e `0.18\linewidth` virava 46 px a 390 px,
   * com as fórmulas das alternativas da questão 15 de 2023 ilegíveis. A
   * largura mínima vence a porcentagem inline quando ela fica pequena, e a
   * máxima continua sendo a coluna. */
  min-width: min(100%, 11rem);
  height: auto;
  border-radius: 6px;
  background: var(--surface);               /* raster da banca é preto no branco */
}

/* O glifo inline: o `\epoxi` da questão 31 de 2006-05-07, único caso do acervo.
 * Ele se alinha na linha de base do texto e não se desenha em bloco. */
.q-glifo {
  display: inline;
  height: 1.4em;
  width: auto;
  vertical-align: -.35em;
  background: var(--surface);
}

/* ── os quatro ambientes do projeto, que dão identidade à questão ───────── */

.q-texto-apoio,
.q-afirmativas,
.q-assertivas,
.q-considere {
  margin: 1rem 0;
  padding: .85rem 1rem;
  border-left: 3px solid var(--brand-2);
  background: var(--brand-soft);
  border-radius: 0 var(--r) var(--r) 0;
}
.q-titulo-apoio { font-size: .9375rem; margin-bottom: .5rem; color: var(--brand); }
.q-considere { border-left-color: var(--amber); background: var(--amber-soft); }

/* ── o texto de leitura com as linhas do caderno impresso ──────────────── */
/* A prova numera o texto de cinco em cinco na margem, e a questão cita a
   linha: "o trecho ... (l. 17-19)". A linha do caderno tem 80 caracteres de
   mediana, e num celular de 375px cabem uns 35, de modo que cada linha da
   prova ocupa duas ou três faixas na tela. O número fica na calha, alinhado ao
   alto da primeira faixa, e o que transborda recua, para que a calha nunca
   seja confundida com o texto. */

.q-texto-linhado { padding-left: 2.9rem; }

.q-texto-linha {
  display: block;
  position: relative;
  /* A linha do caderno não cabe na tela do celular, e o que transborda desce
     recuado, para que a continuação nunca se confunda com uma linha nova. */
  padding-left: 1.1rem;
  text-indent: -1.1rem;
  white-space: normal;
}
.q-texto-linha-paragrafo { margin-top: .55rem; }
.q-texto-linhado .q-texto-linha:first-of-type { margin-top: 0; }

/* O número de linha e o de parágrafo têm o mesmo desenho, o do chip da
   alternativa: os dois são o rótulo que a questão cita, "(l. 17-19)" ou
   "parágrafo 3", e em itálico apagado se confundiam com o texto (autor,
   12/09/2026). */
.q-texto-linha-numero,
.q-texto-paragrafo-numero {
  position: absolute;
  left: -2.4rem;
  top: .1rem;
  width: 1.5rem; height: 1.5rem;
  display: grid; place-items: center;
  border-radius: 6px;
  background: var(--brand-soft);
  font-family: var(--sans);
  font-size: .75rem; font-weight: 600;
  line-height: 1;
  /* a linha do caderno recua o transbordo com text-indent negativo, e o chip
     herdaria o recuo: o algarismo saía fora do quadradinho */
  text-indent: 0;
  color: var(--brand);
  user-select: none;
}

/* O caderno que numera por parágrafo, e não por linha, como o de 2023: o
   número vai para a mesma calha, ao alto do parágrafo, com o desenho acima. */
.q-texto-paragrafado { padding-left: 2.9rem; }
.q-texto-paragrafado p { position: relative; }

@media (max-width: 26rem) {
  .q-texto-linhado, .q-texto-paragrafado { padding-left: 2.4rem; }
  .q-texto-linha-numero, .q-texto-paragrafo-numero { left: -2.1rem; }
}

/* ── tabela: rola dentro do próprio contêiner, e a página nunca rola ───── */

.q-tabela-rolagem {
  margin: 1rem 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.q-tabela {
  border-collapse: collapse;
  font-size: .875rem;
  min-width: 100%;
}
.q-tabela td {
  padding: .4rem .6rem;
  border: 1px solid var(--line);
  white-space: nowrap;
}
.q-linha-riscada td { border-top-width: 2px; }

/* O Mapa de Karnaugh da GYG6PD, `\kmapa` no acervo: cinco alternativas, cada
   uma um mapa de 2 por 4. A tabela de questão ocupa a largura toda por padrão,
   e um mapa esticado a 600px vira leitura de cabeça para o lado. */
.q-kmapa .q-tabela { min-width: 0; margin: .25rem 0; }
.q-kmapa td { text-align: center; min-width: 2.4em; }

/* ── listas, citação, dados ─────────────────────────────────────────────── */

.q-lista { margin: .85rem 0; padding-left: 1.5rem; }
.q-lista li { margin-bottom: .35rem; }
.q-rotulo { font-weight: 600; color: var(--text-2); }

.q-citacao {
  margin: 1rem 0;
  padding-left: 1rem;
  border-left: 2px solid var(--line-2);
  color: var(--text-2);
}

.q-dados {
  margin: 1rem 0;
  padding: .7rem 1rem;
  list-style: none;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 8px;
  font-size: .9375rem;
}
.q-dados li { margin: .2rem 0; }

.q-fonte { font-size: .8125rem; color: var(--text-2); font-style: italic; }
.q-linha { font-size: .8125rem; color: var(--text-2); white-space: nowrap; }

/* O trecho que a questão cita por linha, marcado no texto de apoio quando o
   bloco não tem a numeração da prova. Decisão 36, item 6. A cor é a do
   âmbar do semáforo, suave, e o texto fica o que era. */
mark.q-trecho { background: var(--amber-soft); color: inherit; padding: 0 .1em; border-radius: 2px; }

/* A lacuna das questões de Português, `\rule{1.2em}{0.4pt}` no acervo: o
   renderizador a entrega como um span vazio, e sem esta regra ela some da
   tela. Achado da 2DSZ26 na revisão da curadoria de 29/09/2026: o aluno lia
   "vários anos, existem hábitos" sem saber onde estava o espaço. */
.q-lacuna {
  display: inline-block;
  min-width: 3em;
  height: 1em;
  vertical-align: baseline;
  border-bottom: 1.5px solid currentColor;
}
.q-dado { font-family: var(--mono); font-size: .9em; }
.q-moldura { border: 1px solid var(--line-2); padding: 0 .25rem; border-radius: 3px; }

/* O centro rola sozinho quando traz uma equação mais larga que a tela, como a
   reação da Q52 de Inspeção de 2023 a 390 px, para a página não rolar. */
.q-centro { text-align: center; margin: 1rem 0; overflow-x: auto; }
.q-direita { text-align: right; margin: 1rem 0; }
.q-minipagina, .q-paisagem, .q-figura, .q-tabela { margin: 1rem 0; }

/* ── matemática ─────────────────────────────────────────────────────────── */

/* A fórmula em bloco rola sozinha se for larga, para a página não rolar.
 * Só na horizontal: com `overflow-x: auto` o eixo vertical vira `auto` também,
 * e as colunas invisíveis de alinhamento do KaTeX passam 2 a 8 px da caixa,
 * o que desenhava uma barra vertical inútil ao lado da fórmula. Medido em
 * 29/09/2026 na CWQ2W2: com `hidden` o desenho sai idêntico, píxel a píxel. */
.q-mat-bloco {
  display: block;
  margin: 1rem 0;
  overflow-x: auto;
  overflow-y: hidden;
  text-align: center;
}
.q-mat-erro { color: var(--warn); font-family: var(--mono); font-size: .9em; }

/* Sem KaTeX a fórmula fica como texto legível, e não como página quebrada. */
.sem-katex .q-mat { font-family: var(--mono); font-size: .9em; color: var(--text-2); }

/* ── defeito estrutural aparece, não some ───────────────────────────────── */

.q-defeito {
  padding: .6rem .8rem;
  background: var(--warn-soft);
  color: var(--warn);
  border-radius: 8px;
  font-size: .875rem;
}

.q-rodape {
  margin-top: 1.5rem;
  font-size: .8125rem;
  color: var(--text-2);
}
.q-rodape a { color: var(--brand); }


/* ── E.4: a interação da questão, acrescentada pela Fase E ───────────────── */

/* O cabeçalho do simulado com o relógio à direita, emenda 8c.5. */
.q-topo-simulado { display: flex; justify-content: space-between; align-items: baseline; gap: .75rem; }
.q-relogio { font-variant-numeric: tabular-nums; letter-spacing: .02em; }
/* Grupo B da inspeção no Chrome, 30/09/2026: o relógio tinha 11 px, cinza, e
 * sumia ao rolar o texto de apoio. A linha da posição e do relógio fica presa
 * no alto da tela, e o relógio sobe para o tamanho do texto. */
.q-topo-simulado {
  position: sticky; top: 0; z-index: 20;
  margin: 0 -1.1rem; padding: .5rem 1.1rem;
  background: var(--bg);
  border-bottom: 1px solid var(--line);
}
.q-topo-simulado .q-relogio { font-size: 1rem; font-weight: 700; color: var(--text); letter-spacing: 0; }
.q-topo-simulado .q-relogio.is-atrasado { color: var(--acento); }
/* Acima do ritmo da prova, emenda 8c.7: o laranja do acento, que é o de ação,
   e não o vermelho de erro, porque atraso se corrige e não se pune. */
.q-relogio.is-atrasado { color: var(--acento); font-weight: 700; }

/* A frase da volta, decisão 20.1: "Este assunto volta para você em 15 dias,
   com outra questão". Fala do item, e não da questão. */
.q-proxima { margin: .5rem 0 0; font-size: .875rem; color: var(--text-2); max-width: 34em; }

/* As camadas, e a tranca da camada 2 até a primeira resposta. */
/* A camada 2, a resolução comentada, é o próprio componente `abas-cora`
   desde a emenda 12.5 de 10/09/2026: o botão, a tranca e a seta moram em
   `componentes/abas-cora.css`. O que fica aqui é o veredito que o `portal.js`
   escreve depois de verificar, com as palavras do `cora.jsx`. */
.q-veredito {
  margin: 1rem 0 0; padding: .85rem 0 0;
  border-top: 1px solid var(--line);
  font-size: .9375rem; line-height: 1.55; max-width: 34em;
}
.q-veredito b { font-weight: 600; }
/* A segunda tentativa, decisão 20.3: a linha aparece sem a borda de cima,
   porque a questão ainda está aberta. */
.q-veredito.is-retry { border-top: 0; padding-top: 0; }

/* 8C: a celebração da decisão 10, no azul da marca, `.celebra` do mock de
 * 12/09. Entra em 400 ms, e o `prefers-reduced-motion` do tokens.css a
 * zera. O laranja não entra aqui: é da ação principal, e a celebração é azul. */
.q-celebra {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: .75rem 0 0;
  padding: 10px 12px;
  border-radius: 8px;
  background: var(--brand-soft);
  color: var(--brand);
  font-size: .875rem;
  line-height: 1.45;
}
.q-celebra b { font-weight: 600; }
.q-celebra-ponto { width: 12px; height: 12px; border-radius: 50%; flex: none; background: var(--brand); }
.q-celebra.is-viva { animation: q-celebra-entra .4s ease-out; }
.q-celebra.is-viva .q-celebra-ponto { animation: q-celebra-pulsa .6s ease-out; }
@keyframes q-celebra-entra { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes q-celebra-pulsa { 0% { transform: scale(.6); } 60% { transform: scale(1.25); } 100% { transform: scale(1); } }
.q-veredito.is-ok b:first-child { color: var(--ok); }
.q-veredito.is-err b:first-child { color: var(--warn); }

/* `display: flex` e não o `list-item` padrão: no Chrome a altura mínima não
 * pegava no list-item, e o Playwright mediu 23 px. Rodada F.4. */
.q-gabarito summary { min-height: var(--toque); display: flex; align-items: center; cursor: pointer; }

/* Item E.7: foco visível em tudo o que se toca, nos dois temas. O da
 * alternativa foi com ela, para o `componentes/alternativa.css`. */
.q-gabarito summary:focus-visible {
  outline: 2px solid var(--brand-2);
  outline-offset: 2px;
}

/* Rótulo só para leitor de tela. */
.pv-oculto {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ── a navegação na lista, quando o aluno veio de /questoes/ ────────────── */

.q-lista-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: .75rem;
  margin: 0 0 .75rem;
  font-size: .875rem;
}
.q-lista-voltar { min-height: var(--toque); display: inline-flex; align-items: center; }
.q-lista-posicao { color: var(--text-2); font-variant-numeric: tabular-nums; }
.q-lista-passos {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .75rem;
  margin: 1.5rem 0;
}
.q-lista-passos a {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: var(--toque);
  border: 1px solid var(--line-2);
  border-radius: 9px;
  text-decoration: none;
}