/* A concha: cabeçalho, barra inferior, rodapé e a coluna única. Itens E.1,
 * E.2 e E.3, redesenhados em 03/09/2026 sobre o protótipo do Claude Design.
 *
 * **Desenhada a partir de 360 px e crescendo**, e não de desktop com recuo. O
 * defeito 2 medido na análise do protótipo de 03/09/2026 é
 * exatamente o contrário: o protótipo antigo tinha trilha lateral de 232 px e
 * empilhava abaixo de 820 px. Aqui a coluna única é a forma primária, e a
 * largura maior é que acrescenta: os links do cabeçalho aparecem a partir de
 * 720 px, e a página inicial abre duas colunas a partir de 1024 px.
 *
 * **A trilha lateral de 232 px não é portada**, e o item E.1 proíbe.
 *
 * O que este arquivo garante, da seção 4.3 daquela análise:
 *
 * 1. a barra superior não estoura a largura: nada tem `flex: none` com
 *    largura mínima intrínseca, e a busca por código **não existe**, por
 *    decisão do autor
 * 2. o desenho é de 360 px
 * 3. há navegação inferior, com as cinco áreas e o contador, e o autor pediu
 *    em 03/09 que ela ficasse fixa em toda página, a inicial inclusive
 * 5. os alvos de toque têm o piso `--toque`, 44 px, e os botões de confiança
 *    ocupam a largura inteira
 * 7. o código público nunca lidera linha de lista: ele é URL, QR e ficha
 */

/* `display` em classe anula o atributo `hidden` do HTML, e foi assim que o
 * bloco de confiança apareceu antes de o aluno verificar. Esta regra vem antes
 * de tudo e vale para a folha inteira: o que o HTML esconde fica escondido, e
 * quem mostra é o JavaScript, tirando o atributo. */
[hidden] { display: none !important; }

/* ── a página, em coluna única ───────────────────────────────────────────── */

body {
  /* A barra inferior é fixa, e o conteúdo não pode terminar embaixo dela. */
  padding-bottom: calc(var(--barra-altura) + env(safe-area-inset-bottom, 0px));
}

:root {
  --barra-altura: 58px;
  --coluna: 46rem;
  --largo: 72rem;
}

.pv-coluna,
.pv-estreito,
.q-pagina {
  width: 100%;
  max-width: var(--coluna);
  margin: 0 auto;
  padding: 1.25rem 1.1rem 2rem;
}
.pv-estreito { max-width: 28rem; }

/* ── E.3: o cabeçalho, o do protótipo do Claude Design ──────────────────
 *
 * Igual em toda página, por pedido do autor em 03/09/2026. Os valores são os
 * inline do mock: 14px 16px de padding e links em segunda linha no celular,
 * 16px 56px e links ao lado da marca a partir de 1024 px. Sem `flex: none`
 * com largura intrínseca, que era a causa do defeito 1 da análise de 03/09. */

.pv-topo { background: var(--surface); }
.pv-topo-linha {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--line-10);
}
.pv-marca {
  display: flex; align-items: center; gap: 8px;
  color: var(--text); text-decoration: none;
  min-width: 0;
}
.pv-marca:hover { color: var(--text); }
.pv-marca .pv-glifo {
  width: 26px; height: 26px; flex: none;
  border-radius: 6px;
  background: var(--brand-fundo); color: var(--sobre-brand);
  display: grid; place-items: center;
  font: 700 11px var(--sans); letter-spacing: -.3px;
}
.pv-marca b {
  font: 700 15px var(--sans); color: var(--text); letter-spacing: -.2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pv-links { display: none; }
.pv-links-celular {
  display: flex; gap: 18px;
  padding: 9px 16px;
  background: var(--surface);
  border-bottom: 1px solid var(--line-10);
}
.pv-links-celular a { font: 500 12.5px var(--sans); color: var(--brand); text-decoration: none; }
.pv-topo-acoes { display: flex; align-items: center; gap: 8px; }
.pv-entrar, .pv-assinar {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 36px;
  border-radius: 7px;
  cursor: pointer;
  white-space: nowrap;
  text-decoration: none;
}
.pv-entrar {
  border: 1px solid var(--line-2);
  background: var(--surface); color: var(--text);
  font: 500 12px var(--sans);
  padding: 8px 11px;
}
.pv-entrar:hover { color: var(--text); filter: brightness(.95); }
.pv-assinar {
  border: none;
  background: var(--acento); color: var(--sobre-brand);
  font: 600 12px var(--sans);
  padding: 8px 13px;
  box-shadow: var(--sombra-botao);
}
.pv-assinar:hover { color: var(--sobre-brand); filter: brightness(.95); }

@media (min-width: 1024px) {
  .pv-topo-linha { padding: 16px max(56px, calc((100% - 1168px) / 2)); gap: 0; }
  .pv-marca { gap: 9px; }
  .pv-marca .pv-glifo { width: 30px; height: 30px; border-radius: 7px; font-size: 12px; }
  .pv-marca b { font-size: 17px; letter-spacing: -.3px; }
  .pv-links { display: flex; gap: 24px; margin-left: 34px; margin-right: auto; }
  .pv-links a { font: 500 14px var(--sans); color: var(--text); text-decoration: none; }
  .pv-links a:hover { color: var(--acento); }
  .pv-links-celular { display: none; }
  .pv-topo-acoes { gap: 12px; }
  .pv-entrar { font-size: 13.5px; padding: 9px 16px; border-radius: 8px; min-height: 0; }
  .pv-assinar { font-size: 13.5px; padding: 11px 22px; border-radius: 8px; min-height: 0; box-shadow: var(--acento-sombra-sm); }
}

/* ── E.2: a barra inferior, com três áreas desde a decisão 37 ──────────── */

.pv-barra {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 70;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  height: calc(var(--barra-altura) + env(safe-area-inset-bottom, 0px));
  padding-bottom: env(safe-area-inset-bottom, 0px);
  background: color-mix(in srgb, var(--surface) 96%, transparent);
  backdrop-filter: blur(12px);
  border-top: 1px solid var(--line);
}

.pv-aba {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-height: var(--toque);
  text-decoration: none;
  color: var(--text-3);
  font-size: .6875rem;
  font-weight: 500;
  position: relative;
  background: none;
  border: 0;
}
.pv-aba:hover { color: var(--brand); }
.pv-aba svg { width: 20px; height: 20px; }
.pv-aba[aria-current="page"] { color: var(--brand); font-weight: 600; }

/* Em D1 duas abas aparecem desabilitadas, com "em breve" e a data. Elas
 * existem para o aluno saber que vêm, e não para frustrá-lo ao tocar. */
.pv-aba[aria-disabled="true"] {
  color: var(--text-3);
  opacity: .45;
  pointer-events: none;
}
.pv-aba .pv-em-breve {
  font-size: .5625rem;
  letter-spacing: .02em;
  text-transform: uppercase;
}

/* O contador de revisões, que o protótipo de 03/09/2026 dizia precisar de presença
 * constante. Ele não zera, e não conta questões respondidas: conta revisões
 * vencidas, que é evidência de trabalho pendente e não de volume. Decisão 10. */
.pv-contador {
  position: absolute;
  top: 4px; left: 50%;
  transform: translateX(6px);
  min-width: 16px; height: 16px;
  padding: 0 4px;
  display: grid; place-items: center;
  background: var(--brand); color: var(--brand-ink);
  border-radius: 9px;
  font-size: .625rem; font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* Emenda 37.1, 01/10/2026: no computador a barra some, e quem entrou tem as
 * três áreas no cabeçalho. 1024 px é onde o cabeçalho já troca de desenho. */
.pv-contador-topo {
  display: inline-grid;
  place-items: center;
  min-width: 18px; height: 18px;
  margin-left: 4px;
  padding: 0 5px;
  background: var(--brand); color: var(--brand-ink);
  border-radius: 9px;
  font-size: 11px; font-weight: 700;
  font-variant-numeric: tabular-nums;
  vertical-align: 1px;
}
@media (min-width: 1024px) {
  body { padding-bottom: 0; }
  .pv-barra { display: none; }
  .pv-links a[aria-current="page"] { color: var(--brand); font-weight: 600; }
}

/* ── o rodapé, o do protótipo do Claude Design, acima da barra ──────────── */

.pv-rodape { padding: 24px 18px 28px; background: var(--brand-fundo-2); }
.pv-rodape-marca { font: 700 14px var(--sans); color: var(--sobre-brand); margin-bottom: 14px; }
.pv-rodape-frase { display: none; }
.pv-rodape-colunas { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 16px; margin-bottom: 16px; }
.pv-rodape-coluna { display: contents; }
.pv-rodape-titulo { display: none; }
.pv-rodape-colunas a { font: 400 12.5px var(--sans); color: var(--sobre-brand-2); text-decoration: none; }
.pv-rodape-colunas a:hover { color: var(--sobre-brand); }
.pv-rodape-linha {
  padding-top: 14px;
  border-top: 1px solid var(--linha-clara);
  font: 400 11px/1.6 var(--sans); color: var(--sobre-brand-4);
}
.pv-so-desktop { display: none; }

@media (min-width: 1024px) {
  .pv-rodape { padding: 40px max(56px, calc((100% - 1168px) / 2)) 32px; }
  .pv-rodape-topo {
    display: flex; justify-content: space-between; gap: 40px;
    padding-bottom: 26px;
    border-bottom: 1px solid var(--linha-clara);
  }
  .pv-rodape-marca { font-size: 16px; margin-bottom: 8px; }
  .pv-rodape-frase { display: block; font: 400 13px/1.6 var(--sans); color: var(--sobre-brand-4); max-width: 280px; }
  .pv-rodape-colunas { display: flex; gap: 56px; margin-bottom: 0; }
  .pv-rodape-coluna { display: flex; flex-direction: column; gap: 9px; }
  .pv-rodape-titulo { display: block; font: 600 11px var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--sobre-brand-5); }
  .pv-rodape-colunas a { font-size: 13.5px; }
  .pv-rodape-linha { padding-top: 20px; border-top: 0; font-size: 12px; line-height: 1.7; }
  a.pv-so-desktop { display: flex; }
  span.pv-so-desktop { display: inline; }
}

/* ── tipografia da concha ────────────────────────────────────────────────── */

.pv-apoio { color: var(--text-2); font-size: .9375rem; }

/* O rótulo de seção do protótipo: caixa alta, espaçado, na cor da marca.
 * Sobre fundo pintado de azul, usa o tom claro. */
.pv-olho {
  font-size: .6875rem; font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--brand);
  margin: 0 0 .5rem;
}
.pv-sobre-marca .pv-olho { color: var(--sobre-brand-3); }

/* O selo: banca, órgão e ano, disciplina e assunto. */
.pv-selo {
  display: inline-block;
  font-size: .6875rem; font-weight: 600;
  color: var(--brand); background: var(--brand-soft);
  padding: .25rem .5rem;
  border-radius: 4px;
  /* O selo do assunto secundário, "também em Matemática · Funções e
   * equações polinomiais (2º grau)", de 12/09, estourava os 390 px com
   * `nowrap`, e a página da questão rolava na horizontal. Quebra como o
   * texto, e a `max-width` prende o selo à coluna. Achado no Playwright em
   * 13/09/2026, na fase 8A. */
  max-width: 100%;
  overflow-wrap: anywhere;
}
.pv-selos { display: flex; flex-wrap: wrap; gap: .375rem; margin: 0 0 .75rem; }

.pv-conta {
  font-size: .875rem;
  color: var(--text-2);
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: .6rem .75rem;
}
/* A dobra "Como calculamos", decisão 20.1: toda conta continua escrita e a um
   toque, e nunca imposta a quem não a pediu. Fechada por padrão; o `summary`
   tem o piso de toque. A `.pv-conta` de dentro perde a moldura, porque a
   dobra já a dá. */
.pv-dobra {
  margin-top: .75rem;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-2);
}
.pv-dobra > summary {
  display: flex; align-items: center; gap: .5rem;
  min-height: var(--toque);
  padding: 0 .75rem;
  font-size: .875rem; font-weight: 600; color: var(--brand);
  cursor: pointer; list-style: none;
}
.pv-dobra > summary::-webkit-details-marker { display: none; }
.pv-dobra > summary::before { content: "▸"; font-size: .75rem; }
.pv-dobra[open] > summary::before { content: "▾"; }
.pv-dobra .pv-conta { border: 0; border-radius: 0; background: transparent; padding: 0 .75rem .6rem; }
.pv-dobra > p, .pv-dobra > ol { margin: 0; padding: 0 .75rem .6rem; font-size: .875rem; color: var(--text-2); }
.pv-dobra > ol { padding-left: 2rem; }
/* A segunda dobra, "Ver a conta", dentro do "Como calculamos": a frase curta
   primeiro e a conta completa a um toque, opção A de 30/09/2026. */
.pv-dobra .pv-dobra-dentro { margin: 0 .75rem .6rem; background: var(--surface); }
.pv-dobra > ol li { margin: 0 0 .3rem; }
/* O botão de sair da conta, emenda 8c.6, logo abaixo do e-mail. */
.pv-sair { margin: 0; }
/* 30/09/2026: o "Sair" vira link discreto ao lado do e-mail, com o piso de
   toque, e deixa de ser o primeiro botão da Conta. */
.pv-conta-quem { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 1.25rem; }
.pv-conta-quem .pv-apoio { margin: 0; min-width: 0; overflow-wrap: anywhere; }
button.pv-sair-link {
  width: auto; min-height: var(--toque); padding: 0 4px;
  background: transparent; border: 0; box-shadow: none;
  color: var(--brand); font-size: .9375rem; font-weight: 600;
  text-decoration: underline; text-underline-offset: 3px;
}
button.pv-sair-link:hover { color: var(--brand); filter: none; }

/* Os próximos passos do resultado do simulado, emenda 8c.5: um link por linha. */
.pv-passos a { color: var(--brand); font-weight: 600; }
.pv-alerta {
  padding: .6rem .8rem;
  border-radius: 8px;
  background: var(--warn-soft);
  color: var(--warn);
  font-size: .9375rem;
}
/* A confirmação, emenda 8S.1: o que deu certo não se diz na cor do alerta. */
.pv-alerta-ok { background: var(--ok-soft); color: var(--ok); }
.pv-aviso { color: var(--warn); }

/* ── formulários, com o piso de toque ────────────────────────────────────── */

.pv-estreito label,
.pv-coluna label { display: block; margin: 1rem 0 .35rem; font-size: .875rem; font-weight: 500; }

input[type="email"], input[type="text"], input[type="number"], select {
  width: 100%;
  min-height: var(--toque);
  padding: 0 .75rem;
  background: var(--surface);
  border: 1px solid var(--line-2);
  border-radius: 8px;
  font-size: 1rem;                 /* 16px: abaixo disso o iOS dá zoom sozinho */
}
/* Os dias do plano se-então da conta, decisão 18: sete caixas com o piso de
 * toque, a marcada em azul fraco, `.dias` e `.dia` do mock de 12/09. */
.pv-dias { display: flex; gap: 6px; flex-wrap: wrap; margin: .35rem 0 .5rem; }
/* `label.pv-dia` e o pai, para vencer o `.pv-estreito label` de cima. */
.pv-estreito label.pv-dia, .pv-coluna label.pv-dia, label.pv-dia {
  min-width: 44px;
  min-height: var(--toque);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line-2);
  border-radius: 7px;
  font-size: 13px;
  color: var(--text-2);
  cursor: pointer;
  margin: 0;
}
.pv-dia input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.pv-dia.is-on, .pv-dia:has(input:checked) { background: var(--brand-soft); color: var(--brand); border-color: transparent; font-weight: 600; }
.pv-dia:has(input:focus-visible) { outline: 2px solid var(--brand-2); outline-offset: 2px; }
/* A conta em blocos recolhíveis, emenda 18.1, fase 8S: uma linha por bloco,
 * com o título, o resumo do que está salvo e a ação à direita, e o corpo
 * abaixo quando aberto. O `summary` tem o piso de toque. */
.pv-bloco {
  margin: 0 0 .75rem;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
}
.pv-bloco > summary {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: .15rem .6rem;
  min-height: var(--toque);
  padding: .7rem .9rem;
  cursor: pointer; list-style: none;
}
.pv-bloco > summary::-webkit-details-marker { display: none; }
.pv-bloco-titulo { font-weight: 600; color: var(--text); }
.pv-bloco-resumo { flex: 1 1 100%; order: 3; font-size: .875rem; color: var(--text-2); }
.pv-bloco-acao { margin-left: auto; font-size: .875rem; font-weight: 600; color: var(--brand); }
.pv-bloco[open] > summary .pv-bloco-acao { visibility: hidden; }
.pv-bloco-corpo { padding: 0 .9rem .9rem; }
.pv-bloco-corpo > .pv-apoio:first-child { margin-top: 0; }
.pv-bloco-pe { margin-top: 1.75rem; background: transparent; }
.pv-bloco-pe .pv-bloco-titulo { font-weight: 500; color: var(--text-2); }

/* A grade da semana: uma linha por dia, a chave com o nome, a hora e a
 * duração. Dia desligado fica esmaecido, e os campos dele não contam. */
.pv-grade { display: grid; gap: 6px; margin: .5rem 0 .75rem; }
.pv-grade-dia {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px 6px; align-items: center;
}
.pv-grade-chave { grid-column: 1 / -1; }
.pv-estreito label.pv-grade-chave, label.pv-grade-chave {
  display: flex; align-items: center; gap: .5rem;
  min-height: var(--toque);
  margin: 0;
  font-size: .9375rem; font-weight: 500;
  cursor: pointer;
}
.pv-grade-chave input { width: 20px; height: 20px; min-height: 0; flex: none; accent-color: var(--brand); }
.pv-grade-dia input[type="time"], .pv-grade-dia select { min-height: var(--toque); padding: 0 .5rem; }
.pv-grade-dia:has(.pv-grade-chave input:not(:checked)) .pv-grade-chave { color: var(--text-2); font-weight: 400; }
.pv-repetir { width: auto; margin: 0 0 .75rem; }
/* No celular a hora e a duração não cabem ao lado do nome do dia: a 360 px
 * sobravam 46 px para ele, e com a fonte ampliada do Android, nenhum, e o
 * nome passava por baixo do campo da hora, visto pelo autor no celular em
 * 30/09/2026. A forma base, que é a do celular, dá a cada dia a linha inteira
 * com o nome, e o dia marcado abre embaixo a hora e a duração, lado a lado; o
 * desmarcado não mostra os campos, que nada contam. Vale em toda largura,
 * porque a coluna da conta é estreita também no computador. */
.pv-grade-dia:has(.pv-grade-chave input:not(:checked)) input[type="time"],
.pv-grade-dia:has(.pv-grade-chave input:not(:checked)) select { display: none; }
.pv-grade-dia:has(.pv-grade-chave input:checked) { padding-bottom: 6px; border-bottom: 1px solid var(--line); }

input[type="time"] {
  width: 100%;
  min-height: var(--toque);
  padding: 0 .75rem;
  background: var(--surface);
  border: 1px solid var(--line-2);
  border-radius: 8px;
}

/* O campo do código de seis dígitos da entrada, decisão 19: largo, com os
 * algarismos tabulares, para o aluno conferir o que digitou. */
input.pv-codigo {
  font-size: 1.5rem;
  letter-spacing: .2em;
  font-variant-numeric: tabular-nums;
  text-align: center;
}

button, .pv-botao {
  min-height: var(--toque);
  padding: 0 1.1rem;
  border-radius: 9px;
  border: 1px solid var(--brand);
  background: var(--brand);
  color: var(--brand-ink);
  font-size: .9375rem;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}
button:hover, .pv-botao:hover { filter: brightness(.95); color: var(--brand-ink); }
button[disabled] { opacity: .45; cursor: not-allowed; filter: none; }
button.pv-secundario, .pv-botao.pv-secundario {
  background: transparent; color: var(--brand); border-color: var(--line-2);
}
button.pv-secundario:hover, .pv-botao.pv-secundario:hover { color: var(--brand); border-color: var(--brand); }
button.pv-perigo { background: var(--warn); border-color: var(--warn); color: var(--sobre-brand); }

/* O acento laranja tem um papel só: a ação principal da tela. */
button.pv-acento, .pv-botao.pv-acento {
  background: var(--acento);
  border-color: var(--acento);
  color: var(--acento-ink);
  font-weight: 700;
  box-shadow: var(--acento-sombra);
}
button.pv-acento:hover, .pv-botao.pv-acento:hover { color: var(--acento-ink); }
.pv-botao.pv-largo, button.pv-largo { width: 100%; min-height: 52px; font-size: 1rem; }

/* O botão da decisão 21, fase 8F: fundo claro, borda, e o G do Google em SVG
   inline à esquerda. As quatro cores do G são a marca do Google, escritas no
   próprio SVG do template, e não no vocabulário do tokens.css. */
.pv-botao.pv-botao-google {
  background: var(--surface);
  color: var(--text);
  border-color: var(--line-2);
  gap: .75rem;
}
.pv-botao.pv-botao-google:hover { color: var(--text); border-color: var(--brand); filter: none; }
.pv-botao.pv-botao-google svg { width: 22px; height: 22px; flex: none; }

.pv-interruptor {
  display: flex; align-items: center; gap: .6rem;
  min-height: var(--toque);
  margin: .25rem 0;
  font-size: .9375rem;
}
.pv-interruptor input { width: 20px; height: 20px; min-height: 0; }

hr { border: 0; border-top: 1px solid var(--line); margin: 1.75rem 0; }

/* ── E.5: o painel ───────────────────────────────────────────────────────── */

.pv-cartao {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 1.1rem 1.15rem;
  margin-bottom: 1rem;
  box-shadow: var(--shadow);
}
/* O cartão pintado de azul, do "Estude hoje" do protótipo. */
.pv-cartao-marca {
  background: var(--brand-fundo);
  border-color: transparent;
  color: var(--sobre-brand);
}
.pv-cartao-marca .pv-apoio { color: var(--sobre-brand-2); }
.pv-cartao-marca .pv-olho { color: var(--sobre-brand-3); }
.pv-cartao-marca .pv-rotulo { color: var(--sobre-brand-3); }
.pv-cartao-marca .pv-numero-grande { color: var(--sobre-brand); }

.pv-numero-grande {
  font-size: 2.25rem;
  font-weight: 700;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.03em;
  color: var(--brand);
}
.pv-rotulo {
  font-size: .6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--text-2);
  margin-bottom: .3rem;
}
/* Os três cartões da fase 8A no painel, valores do mock de 12/09: a frase
 * menor sob o mapa, o link no pé do cartão e a conta abaixo do número. */
.pv-apoio-menor { font-size: .875rem; }
.pv-apoio-colado { margin: 6px 0 14px; }
.pv-cartao-marca .pv-sobre-marca-link { color: var(--sobre-brand-2); }
.pv-cartao-link { margin: 10px 0 0; }
.pv-conta-abaixo { margin-top: 10px; }
.pv-fase-linha {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: .75rem;
  padding: .55rem 0;
  border-top: 1px solid var(--line);
  font-size: .9375rem;
}
.pv-fase-linha:first-of-type { border-top: 0; }
.pv-distancia { font-variant-numeric: tabular-nums; font-weight: 600; }
.pv-acima { color: var(--ok); }
.pv-abaixo { color: var(--warn); }

/* ── D.3 e D.4: o diagnóstico ────────────────────────────────────────────── */

.pv-progresso {
  height: 4px;
  background: var(--line);
  border-radius: 2px;
  overflow: hidden;
  margin: .3rem 0 1.1rem;
}
.pv-progresso span { display: block; height: 100%; width: var(--progresso, 0%); background: var(--brand); }

.q-navegacao {
  display: flex;
  gap: .6rem;
  margin-top: 1.2rem;
}
.q-navegacao > * { flex: 1 1 0; }

.pv-cartao-alerta { border-color: var(--warn); background: var(--warn-soft); box-shadow: none; }
.pv-motivos { margin: .6rem 0 0; padding-left: 1.2rem; font-size: .9375rem; }
.pv-motivos li { margin-bottom: .3rem; }

.pv-gabarito-lista { list-style: none; margin: .5rem 0 0; padding: 0; }
.pv-gabarito-lista li {
  display: flex; flex-wrap: wrap; gap: .4rem .8rem;
  align-items: baseline;
  min-height: var(--toque);
  padding: .4rem 0;
  border-top: 1px solid var(--line);
  font-size: .875rem;
}
.pv-gabarito-lista a { color: var(--brand); }
.pv-gabarito-lista span { color: var(--text-2); }
.pv-numero-grande small { font-size: 1rem; font-weight: 400; color: var(--text-2); }

/* O lugar do texto do autor, marcado como a seção 11.6 pede: visível, com a
 * cor de atenção e a borda tracejada, para não passar por pronto. */
.pv-falta-texto {
  border: 1.5px dashed var(--amber);
  background: var(--amber-soft);
  border-radius: 12px;
  padding: 1rem 1.15rem;
}
.pv-falta-texto .pv-rotulo { color: var(--amber); }