/* Páginas públicas do ArkObra — CSS próprio, enxuto, sem framework.
 *
 * Regras que este arquivo obedece:
 *   - mobile-first: o canteiro de obra é a tela de 360 px;
 *   - tipografia de sistema (CSP `font-src 'self' data:` bloqueia fonte
 *     externa, e carregar Google Fonts atrasaria a primeira dobra);
 *   - zero JavaScript: estados por CSS + semântica do HTML;
 *   - aviso/erro legível sem depender de cor (texto + borda + ícone de
 *     texto), para quem não distingue vermelho de verde;
 *   - tabelas largas rolam na horizontal no celular em vez de estourar o
 *     layout.
  *   - escopo `body.pf` (todas as utilidades públicas): identidade
 *     prancheta do app com fontes self-hosted — adições puras no final do
 *     arquivo (ver bloco "Redesign prancheta" abaixo).
 */

:root {
  --tinta: #1c1c1e;
  --tinta-fraca: #55555c;
  --fundo: #f7f7f5;
  --papel: #ffffff;
  --borda: #d8d8d2;
  --acento: #0b5c4b;
  --acento-claro: #e6f1ee;
  --erro: #9e1b1b;
  --erro-claro: #fdeceb;
  --aviso-claro: #fff6e0;
  --aviso-borda: #a86a00;
  --raio: 6px;
  --medida: 62rem;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--fundo);
  color: var(--tinta);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue",
    Arial, sans-serif;
  font-size: 1rem;
  line-height: 1.55;
}

.pagina,
.cabecalho,
.rodape {
  width: 100%;
  max-width: var(--medida);
  margin-inline: auto;
  padding-inline: 1rem;
}

/* ── Cabeçalho e rodapé ─────────────────────────────────────────────── */

.cabecalho {
  padding-block: 1rem;
  border-bottom: 1px solid var(--borda);
}

.marca {
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--acento);
  text-decoration: none;
}

.marca:focus-visible {
  outline: 2px solid var(--acento);
  outline-offset: 2px;
  border-radius: 2px;
}

/* Nav das 4 utilidades (header e rodapé) — a mesma classe nos dois.

   Mobile-first SEM JavaScript: os itens ficam em linha com `wrap` e em
   360 px quebram em 2–3 linhas. Nada de menu hambúrguer (que exigiria
   JS ou `details`/`summary` com mais marcou) e nada de rolagem
   horizontal. O destaque da página atual é `aria-current="page"`, que
   o template põe pelo `request.path`. */
.utilidades {
  margin-top: 0.6rem;
}

.utilidades ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0.2rem 1rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.utilidades a {
  display: inline-block;
  padding-block: 0.15rem;
  color: var(--tinta);
  font-size: 0.9375rem;
  text-decoration: none;
  border-bottom: 2px solid transparent;
}

.utilidades a:hover {
  color: var(--acento);
  text-decoration: underline;
}

.utilidades a:focus-visible {
  outline: 2px solid var(--acento);
  outline-offset: 2px;
  border-radius: 2px;
}

/* Página atual: cor + peso + sublinhado — nunca SÓ cor. */
.utilidades a[aria-current="page"] {
  color: var(--acento);
  font-weight: 700;
  border-bottom-color: var(--acento);
}

.rodape {
  padding-block: 1.5rem 2.5rem;
  border-top: 1px solid var(--borda);
  color: var(--tinta-fraca);
  font-size: 0.875rem;
}

.rodape .utilidades {
  margin-top: 0;
}

.rodape .utilidades a {
  color: var(--tinta-fraca);
  font-size: 0.875rem;
}

.rodape .utilidades a:hover,
.rodape .utilidades a[aria-current="page"] {
  color: var(--acento);
}

.rodape p {
  margin: 0.75rem 0 0;
}

/* CTA de conversão — a única âncora destacada do rodapé. Fundo
   `--acento` sobre texto branco dá ~9:1 de contraste (AA em qualquer
   tamanho). */
.rodape p.rodape-cta {
  margin-top: 1rem;
}

.cta {
  display: inline-block;
  padding: 0.6rem 1.1rem;
  background: var(--acento);
  color: #ffffff;
  border: 1px solid var(--acento);
  border-radius: var(--raio);
  font-weight: 600;
  text-decoration: none;
}

.cta:hover {
  filter: brightness(1.15);
}

.cta:focus-visible {
  outline: 2px solid var(--tinta);
  outline-offset: 2px;
}

/* Link discreto do `/como-usar`: legível, mas sem competir com o CTA. */
a.discreto {
  color: var(--tinta-fraca);
  text-decoration: underline;
}

a.discreto:hover {
  color: var(--acento);
}

a.discreto:focus-visible {
  outline: 2px solid var(--acento);
  outline-offset: 2px;
  border-radius: 2px;
}

/* Desktop: marca à esquerda, nav na mesma linha à direita. */
@media (min-width: 52rem) {
  .cabecalho {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1.5rem;
  }

  .cabecalho .utilidades {
    margin-top: 0;
    text-align: right;
  }
}

/* ── Tipografia da página ───────────────────────────────────────────── */

.pagina {
  padding-block: 1.5rem 3rem;
}

h1 {
  margin: 0 0 0.5rem;
  font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.1rem);
  line-height: 1.2;
}

h2 {
  margin: 2.25rem 0 0.75rem;
  font-size: clamp(1.15rem, 1rem + 0.6vw, 1.4rem);
}

.intro {
  margin: 0 0 1.5rem;
  max-width: 46rem;
  color: var(--tinta-fraca);
}

.nota {
  margin: 0.75rem 0;
  max-width: 46rem;
  font-size: 0.9375rem;
  color: var(--tinta-fraca);
}

code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.9em;
  background: var(--acento-claro);
  padding: 0.1em 0.35em;
  border-radius: var(--raio);
  word-break: break-word;
}

/* ── Aviso (query inválida / fora de faixa) ─────────────────────────── */

.aviso {
  margin: 0 0 1.5rem;
  padding: 0.875rem 1rem;
  background: var(--aviso-claro);
  border: 1px solid var(--aviso-borda);
  border-left-width: 5px;
  border-radius: var(--raio);
}

.aviso-titulo {
  margin: 0 0 0.5rem;
  font-weight: 600;
}

.aviso-lista {
  margin: 0;
  padding-left: 1.1rem;
}

.aviso-lista li + li {
  margin-top: 0.25rem;
}

/* ── Formulário GET ─────────────────────────────────────────────────── */

.formulario fieldset {
  margin: 0;
  padding: 1rem;
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  background: var(--papel);
}

.formulario legend {
  padding-inline: 0.4rem;
  font-weight: 600;
}

.grade {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.875rem;
}

.campo label {
  display: block;
  margin-bottom: 0.3rem;
  font-size: 0.875rem;
  font-weight: 600;
}

.campo .numero {
  width: 100%;
  padding: 0.55rem 0.65rem;
  font: inherit;
  font-variant-numeric: tabular-nums;
  text-align: right;
  color: var(--tinta);
  background: var(--papel);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
}

.campo .numero:focus-visible {
  outline: 2px solid var(--acento);
  outline-offset: 1px;
  border-color: var(--acento);
}

/* Campo livre e seletor da página de desoneração (Fase 3): a mesma caixa
   do `.numero`, sem `text-align: right` — texto e UF não são números. */
.campo .texto,
.campo .seletor {
  width: 100%;
  padding: 0.55rem 0.65rem;
  font: inherit;
  color: var(--tinta);
  background: var(--papel);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
}

.campo .texto:focus-visible,
.campo .seletor:focus-visible {
  outline: 2px solid var(--acento);
  outline-offset: 1px;
  border-color: var(--acento);
}

/* Erro: borda + texto + fundo. Nunca só cor. */
.campo-erro .numero,
.numero[aria-invalid="true"] {
  border-color: var(--erro);
  border-width: 2px;
  background: var(--erro-claro);
}

/* ── Sugestões do typeahead (2026-10-15 · busca viva pública) ────────
   O dropdown é filho de `.campo` (âncora do posicionamento absoluto) e
   nasce `hidden` no HTML: sem JS nada renderiza e nenhuma regra abaixo
   é alcançada. `[hidden]` vem DEPOIS do bloco principal porque
   `.sugestoes { display: block }` sobrescreveria o atributo. */
.campo {
  position: relative;
}

.sugestoes {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 20;
  max-height: 18rem;
  overflow-y: auto;
  margin-top: 0.2rem;
  background: var(--papel);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  box-shadow: 0 0.35rem 1rem rgb(0 0 0 / 0.18);
}

.sugestoes[hidden] {
  display: none;
}

.sugestao {
  display: flex;
  gap: 0.5rem;
  align-items: baseline;
  padding: 0.5rem 0.65rem;
  cursor: pointer;
}

.sugestao[aria-selected="true"],
.sugestao:hover {
  background: var(--acento-claro, #eef);
}

.sugestao-codigo {
  flex: 0 0 auto;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}

.sugestao-descricao {
  font-size: 0.8125rem;
  overflow-wrap: anywhere;
}

.sugestao-nota {
  margin: 0;
  padding: 0.5rem 0.65rem;
  font-size: 0.8125rem;
}

.erro {
  margin: 0.35rem 0 0;
  font-size: 0.8125rem;
  color: var(--erro);
  font-weight: 600;
}

.formulario button {
  margin-top: 1rem;
  padding: 0.7rem 1.4rem;
  font: inherit;
  font-weight: 600;
  color: #fff;
  background: var(--acento);
  border: 1px solid var(--acento);
  border-radius: var(--raio);
  cursor: pointer;
}

.formulario button:hover {
  filter: brightness(1.1);
}

.formulario button:focus-visible {
  outline: 2px solid var(--tinta);
  outline-offset: 2px;
}

/* ── Resultado ──────────────────────────────────────────────────────── */

.resultado {
  margin-top: 2rem;
  padding: 1.25rem;
  background: var(--papel);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
}

.bdi-total {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.5rem;
  margin: 0 0 1rem;
}

.bdi-total .rotulo {
  font-size: 1rem;
  color: var(--tinta-fraca);
}

.bdi-valor {
  font-size: clamp(2rem, 1.4rem + 2.6vw, 3rem);
  font-variant-numeric: tabular-nums;
  color: var(--acento);
}

.formula {
  margin: 0.5rem 0;
}

.formula-rotulo {
  display: block;
  font-size: 0.8125rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--tinta-fraca);
}

.formula code {
  display: inline-block;
  margin-top: 0.2rem;
}

.conferencia {
  margin: 1rem 0 0;
  font-size: 0.9375rem;
  color: var(--tinta-fraca);
}

/* Diferença entre os dois regimes (Fase 3). Mesma tipografia do total da
   calculadora, com nome próprio — a página não é de BDI e a classe não
   pode dizer que é. */
.diferenca {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.5rem;
  margin: 1.1rem 0 0;
}

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

.diferenca-valor {
  font-size: clamp(1.5rem, 1.1rem + 1.8vw, 2.25rem);
  font-variant-numeric: tabular-nums;
  color: var(--acento);
}

/* ── Tabelas ────────────────────────────────────────────────────────── */

.tabela-envolve {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.tabela {
  width: 100%;
  min-width: 34rem;
  border-collapse: collapse;
  background: var(--papel);
  font-size: 0.9375rem;
}

.tabela caption {
  caption-side: top;
  text-align: left;
  padding-bottom: 0.5rem;
  font-size: 0.875rem;
  color: var(--tinta-fraca);
}

.tabela th,
.tabela td {
  padding: 0.55rem 0.7rem;
  border-bottom: 1px solid var(--borda);
  text-align: left;
  vertical-align: top;
}

.tabela thead th {
  font-size: 0.8125rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--tinta-fraca);
}

.tabela tbody th[scope="row"] {
  font-weight: 600;
}

.tabela .num {
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.tabela .detalhe {
  display: block;
  font-size: 0.8125rem;
  font-weight: 400;
  color: var(--tinta-fraca);
}

/* ── Composições-exemplo (Fase 3) ───────────────────────────────────── */
/* Cartões-links: sem JavaScript, o resultado é a própria URL da query. */

.exemplos {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.75rem;
  margin: 0 0 1.75rem;
  padding: 0;
  list-style: none;
}

.exemplo {
  display: block;
  height: 100%;
  padding: 0.75rem 0.9rem;
  background: var(--papel);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  text-decoration: none;
  color: var(--tinta);
}

.exemplo:hover,
.exemplo:focus-visible {
  border-color: var(--acento);
  background: var(--acento-claro);
}

.exemplo[aria-current="true"] {
  border-color: var(--acento);
  border-width: 2px;
}

.exemplo-codigo {
  display: block;
  font-size: 0.8125rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
  color: var(--acento);
}

.exemplo-rotulo {
  display: block;
  margin-top: 0.2rem;
  font-size: 0.9375rem;
}

/* ── Notas de método ────────────────────────────────────────────────── */

.notas ul {
  margin: 0;
  padding-left: 1.15rem;
  max-width: 46rem;
}

.notas li + li {
  margin-top: 0.6rem;
}

/* ── Celular maior / tablet ─────────────────────────────────────────── */

@media (min-width: 30rem) {
  .grade {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .exemplos {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* ── Desktop ────────────────────────────────────────────────────────── */

@media (min-width: 52rem) {
  .pagina {
    padding-block: 2.25rem 4rem;
  }

  .grade {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .exemplos {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .formulario button {
    margin-top: 1.25rem;
  }
}

/* ── Fase 4: composição SINAPI pública ────────────────────────────────
   Só o que faltava: o rótulo do tipo de insumo dentro da célula de
   descrição e o link de download da planilha. Todo o resto da página
   reusa as classes das Fases 1/3 (tabela, formulário, resultado,
   diferença, conferência). */

.tipo {
  color: var(--tinta-fraca);
  font-size: 0.85em;
}

.baixar {
  display: inline-block;
  margin-top: 0.5rem;
  padding: 0.5rem 1rem;
  border: 1px solid;
  border-radius: 6px;
  text-decoration: none;
  font-weight: 600;
}

.baixar:hover,
.baixar:focus-visible {
  text-decoration: underline;
}

/* ── Fase 6: página /ferramentas (escolha + pesquisa) ──────────────────
   Os cards reusam `.exemplo` das Fases 3/4 (mesmo bloco, mesmo hover);
   só o marcador de tipo e a descrição de uma linha eram classes novas.
   O tipo em caixa alta é a mesma convenção do thead (uppercase +
   letter-spacing) — o card não ganha segunda solução de tipografia. */

.exemplo-tipo {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--acento);
}

.exemplo-descricao {
  display: block;
  margin-top: 0.25rem;
  font-size: 0.875rem;
  color: var(--tinta-fraca);
}

/* Campo de pesquisa da página /ferramentas: o mesmo fundo/borda do
   fieldset das irmãs, sem fieldset — busca de campo único, e legend
   duplicaria o label. */
.formulario.busca {
  padding: 1rem;
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  background: var(--papel);
  margin-bottom: 1.75rem;
}

/* Busca viva: estado carregando */
[data-alvo-resultado].carregando,
.resultado.carregando {
  opacity: 0.6;
  pointer-events: none;
}

/* Esconder botão quando JS ativo */
.js-ativo .formulario button[type="submit"] {
  display: none;
}

/* ── Redesign prancheta — utilidades públicas (escopo body.pf) ──────
   Identidade do app (tema prancheta) aplicada em body.pf — o template
   _base.html põe a classe nas CINCO utilidades (ferramentas, bdi,
   desonerado, composição SINAPI e ORSE), então o bloco abaixo cobre
   todas as irmãs: formulários, botões, valores-herói, avisos e tabelas.
   Fontes: @fontsource-variable/space-grotesk (wght 300–700) e
   @fontsource-variable/jetbrains-mono (wght 100–800), subset latin,
   OFL 1.1 — woff2 e licenças em static/publico/fonts/
   (LICENSE-space-grotesk.txt, LICENSE-jetbrains-mono.txt). */
@font-face {
  font-family: 'Space Grotesk Variable';
  src: url('/static/publico/fonts/space-grotesk-latin-wght-normal.woff2') format('woff2-variations');
  font-weight: 300 700;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
  font-display: swap;
}

@font-face {
  font-family: 'JetBrains Mono Variable';
  src: url('/static/publico/fonts/jetbrains-mono-latin-wght-normal.woff2') format('woff2-variations');
  font-weight: 100 800;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
  font-display: swap;
}

body.pf {
  --pf-papel: #f4f2ed; --pf-tinta: #16324f; --pf-cota: #b03a1a;
  --pf-papel-elevado: #fdfcfa; --pf-tinta-suave: rgba(22,50,79,.72);
  background: var(--pf-papel); color: var(--pf-tinta);
  font-family: 'Space Grotesk Variable', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}

body.pf .pagina,
body.pf .cabecalho,
body.pf .rodape {
  max-width: 72rem;
}

body.pf h1 {
  font-size: clamp(1.75rem, 1.3rem + 2.2vw, 2.75rem);
  line-height: 1.1;
  letter-spacing: -0.02em;
}

body.pf h2 {
  font-size: clamp(1.25rem, 1.1rem + 0.8vw, 1.5rem);
}

body.pf .cabecalho {
  border-bottom: 2px solid var(--pf-tinta);
  background: var(--pf-papel-elevado);
  padding-block: clamp(.75rem, .5rem + 1vw, 1.25rem);
}

body.pf .marca {
  font-family: 'Space Grotesk Variable', sans-serif;
  font-weight: 700;
  font-size: 1.25rem;
  letter-spacing: -0.02em;
  color: var(--pf-tinta);
}



body.pf .utilidades a {
  border: 1.5px solid var(--pf-tinta);
  border-radius: 999px;
  padding: .375rem .5rem;
  min-height: 44px;
  font-family: 'JetBrains Mono Variable', monospace;
  font-size: .75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .06em;
  display: inline-flex;
  align-items: center;
  color: var(--pf-tinta);
  border-bottom-width: 1.5px;
}

body.pf .utilidades a:hover {
  border-color: var(--pf-cota);
  color: var(--pf-cota);
  text-decoration: none;
}

body.pf .utilidades a[aria-current="page"] {
  background: var(--pf-tinta);
  color: var(--pf-papel);
  border-color: var(--pf-tinta);
}

body.pf .rodape {
  border-top: 2px solid var(--pf-tinta);
  background: var(--pf-papel-elevado);
}

body.pf .cta {
  background: var(--pf-tinta);
  color: var(--pf-papel);
  border: 2px solid var(--pf-tinta);
  box-shadow: 3px 3px 0 var(--pf-tinta);
}

body.pf .pf-rotulo {
  font-family: 'JetBrains Mono Variable', monospace;
  font-size: 0.8rem;
  text-transform: uppercase;
  color: var(--pf-cota);
  letter-spacing: 0.1em;
  margin: 0 0 0.5rem;
}

body.pf .pf-sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

body.pf .formulario.busca {
  background: var(--pf-papel-elevado);
  border: 2px solid var(--pf-tinta);
  box-shadow: 4px 4px 0 var(--pf-tinta);
  border-radius: 10px;
  padding: 1rem;
}

body.pf .pf-busca-campo {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

body.pf .formulario.busca .texto {
  flex: 1;
  min-height: 44px;
  border: 2px solid var(--pf-tinta);
  border-radius: 6px;
  padding: 0.5rem;
}

body.pf .formulario.busca button {
  background: var(--pf-tinta);
  color: var(--pf-papel);
  border: 2px solid var(--pf-tinta);
  border-radius: 6px;
  min-height: 44px;
  padding: 0 1rem;
}

body.pf ul.exemplos {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(.75rem, .5rem + 1vw, 1.25rem);
}
@media (min-width: 40rem) {
  body.pf ul.exemplos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 67.5rem) {
  body.pf ul.exemplos { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

body.pf .exemplo {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: .75rem;
  align-items: start;
  background: var(--pf-papel-elevado);
  border: 2px solid var(--pf-tinta);
  border-radius: 10px;
  box-shadow: 4px 4px 0 var(--pf-tinta);
  padding: 1rem;
  transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
  position: relative;
}

/* Ícone à esquerda (ocupa as 3 linhas de texto), textos empilhados à
   direita em trilha minmax(0,1fr) — a coluna de texto encolhe e o
   conteúdo quebra em vez de expandir a grade além do viewport. */
body.pf .exemplo > .pf-icone { grid-column: 1; grid-row: 1 / span 3; }
body.pf .exemplo > .exemplo-tipo { grid-column: 2; grid-row: 1; }
body.pf .exemplo > .exemplo-rotulo { grid-column: 2; grid-row: 2; }
body.pf .exemplo > .exemplo-descricao { grid-column: 2; grid-row: 3; }

body.pf .exemplo:hover, body.pf .exemplo:focus-visible {
  transform: translate(-2px, -2px);
  box-shadow: 6px 6px 0 var(--pf-cota);
  border-color: var(--pf-cota);
}

body.pf .exemplo::after {
  content: "→";
  position: absolute;
  right: 1rem;
  bottom: 1rem;
  color: var(--pf-cota);
  opacity: 0;
  transition: opacity 0.2s;
}

body.pf .exemplo:hover::after {
  opacity: 1;
}

body.pf .pf-icone {
  flex-shrink: 0;
  padding: .5rem;
  border: 2px solid var(--pf-tinta);
  background: var(--pf-papel);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
}

body.pf .exemplo-tipo {
  font-family: 'JetBrains Mono Variable', monospace;
  font-size: 0.6875rem;
  letter-spacing: .12em;
  color: var(--pf-cota);
}

body.pf .exemplo-rotulo {
  font-family: 'Space Grotesk Variable', sans-serif;
  font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.15rem);
  font-weight: bold;
}

body.pf .exemplo-descricao {
  font-size: 0.875rem;
  color: var(--pf-tinta-suave);
}

/* Card das irmãs (desonerado) não tem ícone: empilha código e rótulo em
   coluna única. Na grade de 2 colunas do card do /ferramentas o rótulo
   caía numa faixa estreida e quebrava linha a linha no desktop. */
body.pf .exemplo:has(> .exemplo-codigo) {
  grid-template-columns: minmax(0, 1fr);
}
body.pf .exemplo:has(> .exemplo-codigo) > .exemplo-codigo { grid-column: 1; grid-row: 1; }
body.pf .exemplo:has(> .exemplo-codigo) > .exemplo-rotulo { grid-column: 1; grid-row: 2; }

body.pf .notas ul {
  list-style: none;
  padding: 0;
  display: grid;
  gap: .75rem;
  grid-template-columns: minmax(0, 1fr);
  counter-reset: notas;
}

body.pf .notas li {
  counter-increment: notas;
  padding: 1rem;
  border: 1.5px solid var(--pf-tinta);
  background: var(--pf-papel-elevado);
  border-radius: 8px;
}

body.pf .notas li::before {
  content: "0" counter(notas);
  display: block;
  font-family: 'JetBrains Mono Variable', monospace;
  color: var(--pf-cota);
  font-weight: 700;
  margin-bottom: 0.5rem;
}





/* ── Prancheta: formulários das irmãs (bdi/desonerado/composição) ────
   As irmãs usam fieldset com grade de campos — a mesma caixa da busca
   de /ferramentas: papel elevado, borda 2px tinta, sombra geométrica.
   Os rótulos técnicos (legend) seguem a convenção mono do thead. */

body.pf .formulario fieldset {
  background: var(--pf-papel-elevado);
  border: 2px solid var(--pf-tinta);
  border-radius: 10px;
  box-shadow: 4px 4px 0 var(--pf-tinta);
}

body.pf .formulario legend {
  font-family: 'JetBrains Mono Variable', monospace;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--pf-tinta);
}

body.pf .campo label {
  color: var(--pf-tinta);
}

body.pf .campo .numero,
body.pf .campo .texto,
body.pf .campo .seletor {
  min-height: 44px;
  background: var(--pf-papel);
  color: var(--pf-tinta);
  border: 2px solid var(--pf-tinta);
  border-radius: 6px;
}

body.pf .campo .numero:focus-visible,
body.pf .campo .texto:focus-visible,
body.pf .campo .seletor:focus-visible {
  outline: 2px solid var(--pf-cota);
  outline-offset: 1px;
  border-color: var(--pf-cota);
}

/* Erro de campo: a regra base perde no empate de specificity para
   `body.pf .campo .numero`, então o estado ganha versão própria —
   cota marca o campo a corrigir, nunca só cor. */
body.pf .campo-erro .numero,
body.pf .numero[aria-invalid="true"] {
  border-color: var(--pf-cota);
  background: var(--erro-claro);
}
body.pf .erro { color: var(--pf-cota); }

/* Botão de submit das irmãs — visual prancheta com sombra geométrica. */
body.pf .formulario button,
body.pf button[type="submit"] {
  background: var(--pf-tinta);
  color: var(--pf-papel);
  border: 2px solid var(--pf-tinta);
  border-radius: 6px;
  box-shadow: 3px 3px 0 var(--pf-cota);
  font-family: 'JetBrains Mono Variable', monospace;
  font-size: 0.8125rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  min-height: 44px;
  cursor: pointer;
}
body.pf .formulario button:hover,
body.pf button[type="submit"]:hover {
  filter: brightness(1.1);
}
body.pf .formulario button:focus-visible,
body.pf button[type="submit"]:focus-visible {
  outline: 2px solid var(--pf-cota);
  outline-offset: 2px;
}

/* Resultado da irmã — folha prancheta com elevação e sombra. */
body.pf .resultado {
  background: var(--pf-papel-elevado);
  border: 2px solid var(--pf-tinta);
  border-radius: 10px;
  box-shadow: 4px 4px 0 var(--pf-tinta);
}

/* Valores-herói da irmã — tipografia e cor conforme o caso. */
body.pf .bdi-valor {
  font-family: 'Space Grotesk Variable', sans-serif;
  font-size: clamp(2rem, 1.4rem + 2.6vw, 3rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--pf-tinta);
  font-variant-numeric: tabular-nums;
}
body.pf .diferenca-valor {
  font-family: 'JetBrains Mono Variable', monospace;
  font-size: clamp(1.5rem, 1.1rem + 1.8vw, 2.25rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--pf-cota);
  font-variant-numeric: tabular-nums;
}

/* Avisos da irmã — borda cota, legível sem depender só de cor. */
body.pf .aviso {
  background: var(--pf-papel-elevado);
  border: 2px solid var(--pf-cota);
  border-left-width: 6px;
  border-radius: 8px;
}
body.pf .aviso-titulo {
  color: var(--pf-cota);
  font-family: 'JetBrains Mono Variable', monospace;
  font-size: 0.8125rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

/* Aviso de transição (desonerado) — nota informativa em prancheta. */
body.pf .aviso-transicao {
  margin: 0 0 1.5rem;
  padding: 0.875rem 1rem;
  background: var(--pf-papel-elevado);
  border: 2px solid var(--pf-tinta);
  border-radius: 8px;
}
body.pf .aviso-transicao .aviso-titulo {
  color: var(--pf-tinta);
  font-family: 'JetBrains Mono Variable', monospace;
  font-size: 0.8125rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

/* Tabela da irmã — cabeçalho e células com bordas prancheta. */
body.pf .tabela {
  background: var(--pf-papel);
}
body.pf .tabela thead th {
  background: var(--pf-papel-elevado);
  color: var(--pf-tinta);
  font-size: 0.8125rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
body.pf .tabela tbody th[scope="row"] {
  color: var(--pf-tinta);
  font-weight: 600;
}
body.pf .tabela td,
body.pf .tabela th {
  border-color: var(--pf-tinta);
}

/* Ícone técnico (mono) nos cards das irmãs. */
body.pf .exemplo-codigo {
  font-family: 'JetBrains Mono Variable', monospace;
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--pf-cota);
}

/* Demais elementos técnicos das irmãs em prancheta. */
body.pf .badge { color: var(--pf-cota); }
body.pf .tipo { color: var(--pf-cota); font-size: 0.85em; }
body.pf .baixar {
  border: 2px solid var(--pf-tinta);
  border-radius: 6px;
  color: var(--pf-tinta);
}
body.pf .baixar:hover,
body.pf .baixar:focus-visible {
  text-decoration: underline;
}
body.pf .formula-rotulo {
  font-family: 'JetBrains Mono Variable', monospace;
  font-size: 0.8125rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--pf-tinta);
}
body.pf .conferencia {
  color: var(--pf-tinta-suave);
  font-size: 0.9375rem;
}
body.pf .nota,
body.pf .intro,
body.pf .detalhe {
  color: var(--pf-tinta-suave);
  font-size: 0.875rem;
}

/* Fim das regras para as irmãs. */


@media (min-width: 40rem) {
  body.pf .pf-busca-campo { flex-direction: row; }
  body.pf .notas ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (prefers-reduced-motion: reduce) {
  body.pf .exemplo { transition: none; transform: none; }
}

body.pf a:focus-visible, body.pf button:focus-visible, body.pf input:focus-visible, body.pf .exemplo:focus-visible { outline: 2px solid var(--pf-cota); outline-offset: 2px; }