/* A fórmula centrada com legenda, e a fração empilhada. Item F.4b.
 *
 * Os valores são os do protótipo do Claude Design, em píxel, porque a página
 * inicial é transcrição e o `ferramentas/fidelidade.py` a mede nas duas
 * pranchas, a de 390 e a de 1280. Exceção, por ordem do autor de 12/09/2026:
 * o tamanho da fórmula em destaque e da forma rápida. Os 26 e 34 px do mock
 * viravam 31 e 41 px no KaTeX, que renderiza a 1,21 em, e uma fórmula curta
 * de conceito já transbordava a caixa em tela larga. Agora são 20 e 22 px, o
 * que dá 24 e 27 px renderizados: legível no celular e na tela, e sem rolagem
 * lateral. A demonstração da página inicial deixou de ter a altura cobrada
 * pela fidelidade na emenda 12.5, e por isso a mudança não a quebra.
 *
 * A fração é do componente e não da página: ela nasceu dentro da fórmula, e
 * as duas variantes `--passo` e `--realce` existem porque o mock a usa também
 * nos passos da aba Resolver e no trecho de resolução da seção de dúvidas,
 * em tamanhos próprios.
 */

.pv-formula {
  border: 1px solid var(--brand-borda);
  border-left: 3px solid var(--brand);
  border-radius: 8px;
  background: var(--surface);
  padding: 14px 14px 12px;
}
.pv-formula i { font-style: italic; }
.pv-formula sup, .pv-formula sub { font-size: .6em; }

.pv-formula-destaque {
  text-align: center;
  font-family: var(--serif); font-size: 20px; color: var(--text);
  line-height: 1.1;
  margin-bottom: 14px;
}
.pv-formula-igual { margin: 0 8px; }
.pv-formula-mv { margin-left: 4px; }

.pv-formula-legenda {
  display: flex; flex-direction: column; gap: 7px;
  border-top: 1px solid var(--line-10);
  padding-top: 11px;
}
.pv-formula-legenda > div { display: flex; gap: 10px; align-items: baseline; }
.pv-formula-simbolo { font-family: var(--serif); font-style: italic; font-size: 16px; color: var(--brand); min-width: 26px; }
.pv-formula-simbolo sub { font-size: .65em; }
.pv-formula-legenda > div > span:last-child { font: 400 12.5px/1.4 var(--sans); color: var(--text-2); }

/* A variante laranja: a forma pronta da aba Acelerar, sem legenda. */
.pv-formula--acelerar {
  border-color: var(--acento-borda);
  border-left-color: var(--acento);
  padding: 14px;
  text-align: center;
  font-family: var(--serif); font-size: 20px; color: var(--text);
}

/* A fração empilhada do mock: numerador e denominador em coluna. */
.pv-fracao {
  display: inline-flex; flex-direction: column;
  vertical-align: middle; text-align: center;
  font-size: .68em; line-height: 1.15;
}
.pv-fracao > * { padding: 0 3px; }
.pv-fracao > :last-child { border-top: 1px solid var(--text); }
.pv-formula--acelerar .pv-fracao { font-size: .7em; }
.pv-formula--acelerar .pv-fracao > * { padding: 0 4px; }
.pv-fracao--passo { font-size: .72em; }
.pv-fracao--realce > * { background: var(--acento-soft); }

@media (min-width: 1024px) {
  .pv-formula { border-radius: 9px; padding: 20px; }
  .pv-formula-destaque { font-size: 22px; margin-bottom: 18px; }
  .pv-formula-destaque .pv-fracao { font-size: .66em; }
  .pv-formula-destaque .pv-fracao > * { padding: 0 4px; }
  .pv-formula-igual { margin: 0 10px; }
  .pv-formula-mv { margin-left: 6px; }
  .pv-formula-legenda { gap: 9px; padding-top: 14px; }
  .pv-formula-legenda > div { gap: 14px; }
  .pv-formula-simbolo { font-size: 19px; min-width: 30px; }
  .pv-formula-legenda > div > span:last-child { font-size: 14px; }
  .pv-formula--acelerar { border-radius: 9px; padding: 22px; font-size: 22px; }
  .pv-formula--acelerar .pv-fracao { font-size: .68em; line-height: 1.2; }
  .pv-formula--acelerar .pv-fracao > * { padding: 0 5px; }
  .pv-fracao--passo { font-size: .7em; }
  .pv-fracao--passo > * { padding: 0 4px; }
}