/* ══════════════════════════════════════════════════════════════════════════
   3wi · formulário de escola — CAMADA DE ESTADO
   Onda C · 03/Set/2026

   🔴 ESTE ARQUIVO NÃO REDEFINE NADA DE static/css/site.css.
   `.formwrap` `.formcard` `.formside` `.alt-contact` `.label` `.btn` já estão
   lá (§16) e continuam mandando. Aqui entra só o que falta, porque até agora o
   formulário não enviava nada: estados, erro por campo, honeypot e foco.

   ONDE VAI: concatenar ao fim de src/static/css/site.css, ou publicar como
   /css/form.css com um <link> DEPOIS do de site.css. Nunca antes.

   Tokens: todos de B2-design.md. As únicas cores novas são as de estado — B2
   não tinha token de erro. Contraste medido nos dois temas, pior caso 5,10:1,
   todos passam AA.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Tokens de estado ────────────────────────────────────────────────────────
   Definidos em :root nu (nunca só dentro do @media — regra do B2 §1.2) e
   redefinidos nos dois blocos de tema escuro, para o data-theme vencer nos
   dois sentidos.                                                             */
:root{
  --form-ok-ink:#2f7259;  --form-ok-wash:#e8f5ef;  --form-ok-line:#cbe7db;
  --form-err-ink:#a3352f; --form-err-wash:#fdecea; --form-err-line:#f3c8c4;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --form-ok-ink:#6cc39c;  --form-ok-wash:#16281f;  --form-ok-line:#25422f;
    --form-err-ink:#f0a49e; --form-err-wash:#2b1a1a; --form-err-line:#4a2a28;
  }
}
:root[data-theme="dark"]{
  --form-ok-ink:#6cc39c;  --form-ok-wash:#16281f;  --form-ok-line:#25422f;
  --form-err-ink:#f0a49e; --form-err-wash:#2b1a1a; --form-err-line:#4a2a28;
}

/* ── Campo ───────────────────────────────────────────────────────────────────
   Estrutura PLANA (label + input + p.fielderr como irmãos), igual à de
   src/form.fallback.html: assim `.formcard label{margin:…}` de site.css
   continua governando o ritmo vertical e não há duas regras disputando. */
.f3w .req{color:var(--form-err-ink);font-weight:600;margin-left:.15em}

/* Foco: `:focus-visible` para o anel não piscar no clique de mouse, e
   `:focus` como rede para navegador sem suporte. Anel de 2px + offset,
   nunca `outline:none`. */
.f3w input:focus,
.f3w select:focus,
.f3w textarea:focus{outline:2px solid var(--color-accent-ink);outline-offset:2px}
.f3w input:focus:not(:focus-visible),
.f3w select:focus:not(:focus-visible),
.f3w textarea:focus:not(:focus-visible){outline:2px solid var(--color-accent-ink)}
.f3w .btn:focus-visible{outline:2px solid var(--color-accent-ink);outline-offset:3px}

.f3w input::placeholder,
.f3w textarea::placeholder{color:var(--color-muted);opacity:1}

/* 🔴 O erro NUNCA é só a borda vermelha: quem não distingue vermelho de cinza
   fica sem sinal nenhum. Borda + texto + `aria-invalid` — três canais. */
.f3w [aria-invalid="true"]{border-color:var(--form-err-line);background:var(--form-err-wash)}
.f3w .fielderr{
  margin:var(--space-1) 0 0;
  font-size:var(--text-xs);line-height:1.4;color:var(--form-err-ink);
}
.f3w .fielderr::before{content:"\26A0\FE0E";margin-right:.4em}   /* ⚠︎ texto, não emoji colorido */
.f3w .fielderr[hidden]{display:none}

/* ── Honeypot ────────────────────────────────────────────────────────────────
   🔴 Nunca `display:none` nem `visibility:hidden`: robô moderno pula campo
   escondido assim. Fora da viewport ele continua "visível" para o robô.
   Também nunca `left:-9999px` sozinho em RTL — daí o `clip-path` de reserva. */
.f3w .hp{
  position:absolute;left:-9999px;top:auto;width:1px;height:1px;
  overflow:hidden;clip-path:inset(50%);white-space:nowrap;
}

/* ── Botão em trânsito ───────────────────────────────────────────────────── */
.f3w .btn[disabled]{opacity:.6;cursor:not-allowed;transform:none;box-shadow:none}
.f3w .btn[disabled]:hover{transform:none}
.f3w .btn[aria-busy="true"]::before{
  content:"";width:1em;height:1em;flex:0 0 auto;border-radius:var(--radius-full);
  border:2px solid currentColor;border-top-color:transparent;
  animation:f3w-spin .8s linear infinite;
}
@keyframes f3w-spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion: reduce){
  .f3w .btn[aria-busy="true"]::before{animation:none;border-top-color:currentColor;opacity:.5}
}

/* ── Faixa de status ─────────────────────────────────────────────────────────
   Nasce com `display:none` para o `aria-live` não anunciar caixa vazia; as
   classes `.is-ok` / `.is-err` a acendem. O texto é sempre em cima de um wash
   com contraste medido, não de cor pura. */
.f3w .form-status{
  display:none;margin:var(--space-4) 0 0;padding:.7em .85em;
  border-radius:var(--radius-md);font-size:var(--text-sm);line-height:1.5;
  text-wrap:pretty;
}
.f3w .form-status.is-ok{
  display:block;background:var(--form-ok-wash);
  border:1px solid var(--form-ok-line);color:var(--form-ok-ink);
}
.f3w .form-status.is-err{
  display:block;background:var(--form-err-wash);
  border:1px solid var(--form-err-line);color:var(--form-err-ink);
}
.f3w .form-status a{color:inherit;text-decoration:underline;text-underline-offset:3px}

/* ── Orçamento de trilinguismo ───────────────────────────────────────────────
   Rótulo em espanhol é o mais longo ("¿Cuántos alumnos, más o menos?").
   `min-height` em vez de `height`, padding em `em`: a caixa cresce, o texto
   não trunca. Nenhuma altura fixa neste arquivo. */
@media (max-width:420px){
  .f3w .form-status{font-size:var(--text-xs)}
}