/* A linha de alternativa. Item F.4b, decisão 12.4.
 *
 * Um desenho só para as três telas que a usam: a demonstração da página
 * inicial, a página da questão e a questão do simulado. Os valores do
 * componente são os da página da questão, do item E.4, e a variante `--demo`
 * traz os do protótipo do Claude Design, em píxel, porque a home é
 * transcrição e o `ferramentas/fidelidade.py` a mede.
 *
 * A ordem das regras importa e não é arbitrária: base, depois o `hover`,
 * depois a lista travada, depois os estados. Cada estado repete o seletor com
 * `:hover` para que a alternativa correta continue verde com o ponteiro em
 * cima, que era o que o `questao.css` já fazia antes de a linha vir para cá.
 */

.pv-alts {
  list-style: none;
  margin: 1.25rem 0 0;
  padding: 0;
  display: grid;
  gap: .5rem;
}
.pv-alt-item { display: flex; padding: 0; }

.pv-alt {
  /* Alternativa é `<button>` de verdade na página da questão, e `<label>` de
   * rádio no simulado, que envia por formulário. O desenho é o mesmo. */
  display: flex;
  align-items: flex-start;
  /* O `button` da concha centraliza; a alternativa alinha à esquerda. */
  justify-content: flex-start;
  gap: .7rem;
  width: 100%;
  min-height: 48px;                 /* item E.4 */
  padding: .65rem .8rem;
  background: var(--surface);
  border: 1px solid var(--line-2);
  border-radius: 9px;
  text-align: left;
  font: inherit;
  color: inherit;
  cursor: pointer;
  filter: none;
}
.pv-alt:hover { border-color: var(--brand); color: inherit; }

.pv-alt-chip {
  flex: none;
  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;
  color: var(--text-2);
}
.pv-alt-texto { font-family: var(--serif); padding-top: .1rem; flex: 1; min-width: 0; }
.pv-alt-texto p { margin: 0; }

/* Item E.7: foco visível em tudo o que se toca, nos dois temas. */
.pv-alt:focus-visible { outline: 2px solid var(--brand-2); outline-offset: 2px; }

/* Depois de verificar, as alternativas travam. Refazer é gesto explícito. */
.pv-alts.is-travada .pv-alt { cursor: default; }
.pv-alts.is-travada .pv-alt:hover { border-color: var(--line-2); }

/* Os três estados, na ordem em que a classe `Component` do mock os aplica:
 * o de resposta certa vence o de seleção, e o de erro vence os dois. O fundo
 * da seleção passa por variável e não por uma segunda regra mais abaixo: a
 * demonstração da home pinta outro azul, e uma regra dela no fim do arquivo
 * venceria o verde do acerto, que é o que ela tem de mostrar quando o aluno
 * marca a certa. Medido no Chrome em 03/09/2026, antes de virar isto. */
.pv-alt-item.is-sel .pv-alt,
.pv-alt-item.is-sel .pv-alt:hover { border-color: var(--brand); background: var(--pv-alt-sel, var(--brand-soft)); }
.pv-alt-item.is-sel .pv-alt-chip { background: var(--brand); color: var(--brand-ink); }
.pv-alt-item.is-ok .pv-alt,
.pv-alt-item.is-ok .pv-alt:hover { border-color: var(--ok); background: var(--ok-soft); }
.pv-alt-item.is-ok .pv-alt-chip { background: var(--ok); color: var(--sobre-brand); }
.pv-alt-item.is-err .pv-alt,
.pv-alt-item.is-err .pv-alt:hover { border-color: var(--warn); background: var(--warn-soft); }
.pv-alt-item.is-err .pv-alt-chip { background: var(--warn); color: var(--sobre-brand); }

/* ── a variante do protótipo, na demonstração da home ────────────────────── */

.pv-alts--demo { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0 0 14px; }
.pv-alt--demo {
  align-items: center;
  gap: 12px;
  padding: 11px 12px;
  border-color: var(--line-16);
}
/* O mock não muda a borda no ponteiro, só a cor do texto. */
.pv-alt--demo:hover { border-color: var(--line-16); color: var(--text); }
.pv-alt--demo .pv-alt-chip { width: 24px; height: 24px; background: var(--chip); font: 600 12px var(--sans); }
.pv-alt--demo .pv-alt-texto { font: 400 14.5px var(--sans); padding-top: 0; }
.pv-alt-item--demo { --pv-alt-sel: var(--brand-tint); }

@media (min-width: 1024px) {
  .pv-alts--demo { gap: 9px; margin-bottom: 20px; padding-bottom: 0; }
  .pv-alt--demo { padding: 13px 14px; min-height: 52px; }
  .pv-alt--demo .pv-alt-chip { width: 26px; height: 26px; font-size: 13px; }
  .pv-alt--demo .pv-alt-texto { font-size: 15.5px; }
}