/* Formulário: o campo tem um desenho só, e o Dev não o estiliza.
   ---------------------------------------------------------------------------
   Design system v2 §E (05/09/2026). Medido antes: o rótulo tinha 14px em oito
   páginas e 16px em duas; o campo saía em Arial em nove; ajuda e erro eram
   escritos por cada página. Aqui: rótulo, campo, ajuda, erro, foco,
   desabilitado, número com stepper, select, toggle e chips, anatomia e
   estados. Tudo token; nenhuma medida fora da escala de 4.

   Anatomia de um grupo (`.grupo-campo`), de cima para baixo:
     rótulo (.campo)           14px/600, --texto
       ↓ --ritmo-rotulo (8)
     campo (.entrada)          16px, alvo --toque-min, borda --borda-forte
       ↓ --ritmo-rotulo (8)
     ajuda (.campo-ajuda)      14px, --texto-3   |  erro (.campo-erro) 14px, --acento + ícone
   grupo → grupo: --ritmo-paragrafo (16). Rótulo, campo e ajuda começam no
   mesmo x, é a linha-guia do container, sem recuo. */

.grupo-campo { display: grid; gap: var(--ritmo-rotulo); margin: 0 0 var(--ritmo-paragrafo); min-width: 0; }
.grupo-campo:last-child { margin-bottom: 0; }
.linha-campos { display: grid; gap: var(--ritmo-paragrafo); grid-template-columns: 1fr; }
@media (min-width: 720px) { .linha-campos { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); } }

/* Rótulo: mesmo em toda página. O "opcional" é um <small> dentro dele. */
.campo { display: block; font-size: 14px; line-height: 1.4; font-weight: 600; color: var(--texto); margin: 0; }
.campo small { font-weight: 400; color: var(--texto-3); font-size: 14px; }
.grupo-campo > .campo { margin-bottom: 0; }   /* o gap do grupo já é o ritmo */

/* Campo: texto, número, e-mail, textarea, select, a mesma caixa. */
.entrada {
  display: block; width: 100%; min-width: 0;
  min-height: var(--toque-min);
  padding: var(--e-3) var(--e-4);
  font-size: 16px; line-height: 1.4;
  color: var(--texto); background: var(--fundo);
  border: 1px solid var(--borda-forte); border-radius: var(--r-m);
  transition: border-color var(--t-medio);
}
.entrada::placeholder { color: var(--texto-3); opacity: 1; }
.entrada:hover { border-color: var(--secundaria); }
/* Foco: o anel global do design system (3px --secundaria) e nada mais. */
.entrada[aria-invalid="true"] { border-color: var(--acento); }
.entrada[disabled], .entrada[readonly] { background: var(--fundo-3); color: var(--texto-4); border-color: var(--borda); cursor: not-allowed; }
textarea.entrada { min-height: calc(var(--toque-min) * 2); resize: vertical; }

/* Ajuda e erro: os dois têm o mesmo corpo (14px) e o mesmo lugar (abaixo do
   campo). O erro leva ícone além da cor (RD-03) e `role="alert"`. */
.campo-ajuda { margin: 0; font-size: 14px; line-height: 1.5; color: var(--texto-3); }
.campo-erro { display: flex; gap: var(--e-2); align-items: flex-start; margin: 0; font-size: 14px; line-height: 1.5; color: var(--acento); }
.campo-erro svg { flex: none; width: 16px; height: 16px; margin-top: 2px; }
.campo-erro[hidden] { display: none; }

/* Número com stepper: −, o campo, +. Os dois botões têm o alvo mínimo, e o
   campo do meio continua sendo `.entrada` (mesma borda, mesma fonte). */
.stepper { display: inline-grid; grid-template-columns: var(--toque-min) minmax(72px, 1fr) var(--toque-min); align-items: stretch;
  border: 1px solid var(--borda-forte); border-radius: var(--r-m); background: var(--fundo); overflow: hidden; }
.stepper .entrada { border: 0; border-radius: 0; text-align: center; font-family: 'JetBrains Mono', monospace; -moz-appearance: textfield; appearance: textfield; }
.stepper .entrada::-webkit-inner-spin-button, .stepper .entrada::-webkit-outer-spin-button { appearance: none; margin: 0; }
.stepper button { appearance: none; border: 0; background: transparent; color: var(--texto-2); cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; min-height: var(--toque-min); }
.stepper button:hover { background: color-mix(in srgb, var(--primaria) 12%, transparent); color: var(--texto); }
.stepper button svg { width: 16px; height: 16px; }
.stepper:focus-within { border-color: var(--secundaria); }
.stepper .entrada:focus-visible { outline: none; }   /* o anel vai no contorno do stepper */
.stepper:has(.entrada:focus-visible) { outline: 3px solid var(--secundaria); outline-offset: 2px; }

/* Select: a mesma caixa, com o chevron do sistema à direita. */
.seletor { position: relative; display: block; }
.seletor .entrada { appearance: none; padding-right: var(--e-7); cursor: pointer; }
.seletor svg { position: absolute; right: var(--e-4); top: 50%; width: 16px; height: 16px; transform: translateY(-50%); pointer-events: none; color: var(--texto-3); }

/* Toggle: o trilho é 44×24; o alvo de toque é o rótulo inteiro (≥ 44px). O
   estado é dito por `aria-checked` E pelo texto ao lado, nunca só pela cor. */
.toggle { display: inline-flex; align-items: center; gap: var(--e-3); min-height: var(--toque-min); cursor: pointer; font-size: 16px; color: var(--texto); }
.toggle-trilho { position: relative; flex: none; width: 44px; height: 24px; border-radius: var(--r-total);
  background: var(--fundo-3); border: 1px solid var(--borda-forte); transition: background var(--t-medio); }
.toggle-trilho::after { content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%;
  background: var(--texto-2); transition: transform var(--t-medio) var(--mola), background var(--t-medio); }
.toggle[aria-checked="true"] .toggle-trilho { background: var(--btn-fundo); border-color: var(--btn-fundo); }
.toggle[aria-checked="true"] .toggle-trilho::after { transform: translateX(20px); background: var(--btn-texto); }
.toggle[aria-disabled="true"] { color: var(--texto-4); cursor: not-allowed; }
.toggle[aria-disabled="true"] .toggle-trilho { border-color: var(--borda); }
.toggle .toggle-estado { font-size: 14px; color: var(--texto-3); }

/* Chips: seleção múltipla (ou única) por pílulas. Estado por `aria-pressed`
   e pelo ✓ que entra, não só pela cor. Alvo mínimo em altura. */
.chips { display: flex; flex-wrap: wrap; gap: var(--e-2); }
.chip { appearance: none; display: inline-flex; align-items: center; gap: var(--e-2);
  min-height: var(--toque-min); padding: 0 var(--e-4);
  border-radius: var(--r-total); border: 1px solid var(--borda-forte); background: transparent;
  color: var(--texto-2); font-size: 14px; font-weight: 600; cursor: pointer;
  transition: border-color var(--t-medio), background var(--t-medio), color var(--t-medio); }
.chip:hover { border-color: var(--secundaria); color: var(--texto); }
.chip[aria-pressed="true"] { background: color-mix(in srgb, var(--primaria) 16%, transparent); border-color: var(--primaria); color: var(--texto); }
.chip svg { width: 14px; height: 14px; flex: none; }
.chip[aria-pressed="false"] svg.chip-ok { display: none; }
.chip[disabled] { color: var(--texto-4); border-color: var(--borda); cursor: not-allowed; }
/* chip de item (nome numa lista) com o remover ao lado */
.chip .chip-remover { appearance: none; border: 0; background: transparent; color: inherit; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; margin-right: calc(var(--e-2) * -1); border-radius: 50%; }
.chip .chip-remover:hover { background: color-mix(in srgb, var(--acento) 20%, transparent); color: var(--acento); }

/* Conjunto de rádios/caixas nativos: linha de 44px cada, rótulo clicável. */
.opcoes { display: grid; gap: var(--e-1); }
.opcao { display: flex; align-items: center; gap: var(--e-3); min-height: var(--toque-min); font-size: 16px; cursor: pointer; }
.opcao input { width: 20px; height: 20px; margin: 0; flex: none; }

/* Campo de código (2FA, código da sala): §13 do design-system.md, entrou em
   06/09/2026 a pedido do Dev C. É `.entrada` com um modificador: mono, 20px,
   dígitos espaçados a .2em para a pessoa conferir seis de uma vez, centrado,
   largura da contagem (7 dígitos + 6 vãos), nunca a largura do bloco. O
   `inputmode="numeric"` e `autocomplete="one-time-code"` são da marcação. */
.entrada.entrada-codigo { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 20px; line-height: 1.4;
  letter-spacing: .2em; text-align: center; max-width: 12ch; font-variant-numeric: tabular-nums; }
.entrada.entrada-codigo::placeholder { letter-spacing: .2em; }

/* Opção em cartão: §13, 06/09/2026. Uma escolha (rádio ou caixa) que
   precisa de mais que um rótulo: nome 16/600, descrição 14 em --texto-3, o
   controle nativo a 20 na ponta esquerda, alinhado ao nome. Selecionada:
   borda --primaria e 12% de primária no fundo; desabilitada: --texto-4 e
   borda fraca. Estado nunca é só cor: o controle nativo marcado é o segundo
   sinal (RD-03). A grade é da lista (`.opcoes-cartao`): coluna única, duas
   a partir de 600; gap 8 (dentro do grupo). É o que a escolha das 4
   ferramentas em conta/ vestia localmente. */
.opcoes-cartao { display: grid; gap: var(--e-2); grid-template-columns: 1fr; }
@media (min-width: 600px) { .opcoes-cartao { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.opcao-cartao { display: flex; align-items: flex-start; gap: var(--e-3); min-height: var(--toque-min);
  padding: var(--e-3) var(--e-4); border-radius: var(--r-m); cursor: pointer;
  border: 1px solid var(--borda-forte); background: var(--fundo); color: var(--texto);
  transition: border-color var(--t-medio), background var(--t-medio); }
.opcao-cartao input { width: 20px; height: 20px; margin: 2px 0 0; flex: none; }
.opcao-cartao > span { display: grid; gap: var(--e-1); min-width: 0; }
.opcao-cartao b { font-size: 16px; font-weight: 600; line-height: 1.4; }
.opcao-cartao small { font-size: 14px; line-height: 1.5; color: var(--texto-3); }
.opcao-cartao:hover { border-color: var(--secundaria); }
.opcao-cartao:has(input:checked) { border-color: var(--primaria); background: color-mix(in srgb, var(--primaria) 12%, transparent); }
.opcao-cartao:has(input:disabled) { color: var(--texto-4); border-color: var(--borda); cursor: not-allowed; }
.opcao-cartao:has(input:disabled) small { color: var(--texto-4); }
.opcao-cartao:has(input:focus-visible) { outline: 3px solid var(--secundaria); outline-offset: 2px; }

/* ---------------------------------------------------------------------------
   §E.1 A DICA DE CAMPO NÃO É COLUNA DE LEITURA (Arquiteto, 06/09/2026)

   O DEFEITO, medido em `/duas-verdades/` a 1280: o campo tem 710px de largura
   e a dica embaixo dele tinha 494px. A dica parava no meio da tela, com 216px
   de vazio à direita, e o olho lia dois blocos onde há um.

   A CAUSA foi a §21 do `design-system.css`, e não a página. A §21 aplicou
   `max-width: var(--medida-leitura)` a TODO `p` dentro de `main.ferramenta`,
   para que ninguém escrevesse uma linha de 150 caracteres sem que nada
   reprovasse. A regra está certa para texto corrido, e errada para a dica: ela
   supôs que todo parágrafo é coluna de leitura.

   POR QUE A DICA É EXCEÇÃO: ela não é um parágrafo que se lê, é uma LEGENDA
   que pertence ao campo. Rótulo, campo e dica são um grupo, e o que faz o
   grupo ser lido como um só é começarem e terminarem no mesmo x. Quem escreve
   uma dica de 150 caracteres tem um problema de texto, não de folha, e o
   Revisor a corta na fonte. Estreitar a caixa não conserta o texto: só quebra
   o alinhamento do grupo.

   A REGRA: a dica e o erro acompanham a LARGURA DO CAMPO, sempre. O mesmo vale
   para o rótulo e para a legenda da opção em cartão. Especificidade 0,1,0
   contra o `:where()` de especificidade zero da §21: vence sem `!important` e
   em qualquer ordem de folha. */
.campo-ajuda, .campo-erro, .campo, .opcao-cartao small { max-width: none; }

/* ---------------------------------------------------------------------------
   §E.2 O CAMPO TEM A LARGURA DO QUE CABE NELE, E A FILEIRA ENCHE POR
   COMPOSIÇÃO (Dev e Designer de produto, 10/09/2026; design-system.md §13.1)

   O DEFEITO, medido a 1440 nas doze ferramentas depois do layout de app
   (§25): o campo de linha única dentro de um bloco media 950px. O apelido de
   20 caracteres de Duas Verdades tinha 950; o número de pessoas, 950; as três
   frases, 930 cada. Os SaaS medidos em 10/09 não esticam campo: o maior é o do
   Linear, 607; Notion 508; Intercom 448. Campo de 950 é difícil de ler e de
   preencher, e parece formulário amador.

   A CÓPIA. Tela de formulário larga divide a fileira entre o texto e o campo
   (rótulo e explicação de um lado, o controle do outro: Linear, Intercom), e
   campos curtos que andam juntos dividem a fileira entre si (Vercel: dois de
   275 lado a lado, um de 566). Nenhum deixa campo curto encostado à esquerda
   com a fileira vazia ao lado, e é por isso que aqui não há `max-width` solto
   em campo nenhum: a largura vem da trilha, e a trilha tem vizinho.

   AS DUAS COMPOSIÇÕES, ligadas pela largura do CARTÃO, não da tela
   (`@container campos`): na mesma tela o cartão de etapa tem 950px ao lado do
   painel e 434 na grade de dois blocos.

   1. FILEIRA DE CONFIGURAÇÃO: `.grupo-campo` com rótulo e UM controle. Rótulo
      e ajuda na coluna da esquerda, o controle na trilha do tipo dele, à
      direita: número 160, select curto e data 240, texto 360, pergunta e
      lista 600 (`--campo-*`). A coluna do texto tem piso de 240 e fica com o
      resto. Número entra na fileira a partir de 420px de cartão, select e
      data a partir de 520, texto e lista a partir de 640. Abaixo disso o grupo
      empilha e o campo tem a largura do cartão, que já é estreito.
   2. FILEIRA DE CAMPOS: `.linha-campos`. A partir de 560px de cartão os campos
      dividem a fileira na proporção do que cabe em cada um (número 1, select e
      data 1,5, texto 2, pergunta 3). A fileira sempre fecha, e cada campo tem
      um piso para ela quebrar antes de espremer.

   O TIPO sai do controle, sem classe: `type="number"` e `.stepper` são
   número; `.seletor`, `type="date"` e `type="time"` são curtos; `textarea` e
   `.linha-adicionar` são largos; o resto é médio. Onde o tipo não diz, a
   marcação diz: `.entrada-numero`, `.entrada-curta` (o apelido de 20
   caracteres), `.entrada-media`, `.entrada-larga` (a pergunta de 90), e
   `.seletor-medio` no invólucro do select de nomes longos. `.empilhado`
   desliga a fileira de um grupo.

   O QUE NÃO FAZER: `max-width` em `.entrada` na página, e campo curto sozinho
   numa fileira sem o rótulo ao lado. Campo curto sozinho É uma fileira de
   configuração. */

.cartao-etapa, .caixa-campos { container: campos / inline-size; }

/* A trilha de cada tipo. Fora da fileira de configuração ela não faz nada. */
.grupo-campo { --campo-trilha: var(--campo-medio); }
.grupo-campo:has(> .entrada[type="number"], > .stepper, > .entrada-numero) { --campo-trilha: var(--campo-numero); }
.grupo-campo:has(> .seletor:not(.seletor-medio), > .entrada[type="date"], > .entrada[type="time"], > .entrada-curta) { --campo-trilha: var(--campo-curto); }
.grupo-campo:has(> textarea.entrada, > .entrada-larga, > .linha-adicionar) { --campo-trilha: var(--campo-largo); }

/* 1. A fileira de configuração. As três faixas repetem as mesmas cinco regras
   porque condição de `@container` não lê variável: o que muda entre elas é
   só quem entra. `auto 1fr` nas linhas faz a sobra de altura do controle ir
   para a segunda linha, e a ajuda nasce logo abaixo do rótulo, não abaixo do
   campo. `dense` põe o erro embaixo do campo e a ajuda embaixo do rótulo em
   qualquer ordem de marcação. */
@container campos (min-width: 420px) {
  .grupo-campo:has(> .campo):has(> .entrada[type="number"], > .stepper, > .entrada-numero):not(.linha-campos > *, .empilhado) {
    grid-template-columns: minmax(var(--campo-texto-min), 1fr) minmax(0, var(--campo-trilha));
    grid-template-rows: auto 1fr; grid-auto-flow: row dense; column-gap: var(--e-6); align-items: start;
  }
  .grupo-campo:has(> .campo):has(> .entrada[type="number"], > .stepper, > .entrada-numero):not(.linha-campos > *, .empilhado) > * { grid-column: 2; }
  .grupo-campo:has(> .campo):has(> .entrada[type="number"], > .stepper, > .entrada-numero):not(.linha-campos > *, .empilhado) > :is(.campo, .campo-ajuda, .nota-ferramenta) { grid-column: 1; }
  .grupo-campo:has(> .campo):has(> .entrada[type="number"], > .stepper, > .entrada-numero):not(.linha-campos > *, .empilhado) > .campo { grid-row: 1; padding-top: var(--e-3); }
  .grupo-campo:has(> .campo):has(> .entrada[type="number"], > .stepper, > .entrada-numero):not(.linha-campos > *, .empilhado) > :is(.entrada, .seletor, .stepper, .linha-adicionar) { grid-row: 1 / span 2; }
}
@container campos (min-width: 520px) {
  .grupo-campo:has(> .campo):has(> .seletor:not(.seletor-medio), > .entrada[type="date"], > .entrada[type="time"], > .entrada-curta):not(.linha-campos > *, .empilhado) {
    grid-template-columns: minmax(var(--campo-texto-min), 1fr) minmax(0, var(--campo-trilha));
    grid-template-rows: auto 1fr; grid-auto-flow: row dense; column-gap: var(--e-6); align-items: start;
  }
  .grupo-campo:has(> .campo):has(> .seletor:not(.seletor-medio), > .entrada[type="date"], > .entrada[type="time"], > .entrada-curta):not(.linha-campos > *, .empilhado) > * { grid-column: 2; }
  .grupo-campo:has(> .campo):has(> .seletor:not(.seletor-medio), > .entrada[type="date"], > .entrada[type="time"], > .entrada-curta):not(.linha-campos > *, .empilhado) > :is(.campo, .campo-ajuda, .nota-ferramenta) { grid-column: 1; }
  .grupo-campo:has(> .campo):has(> .seletor:not(.seletor-medio), > .entrada[type="date"], > .entrada[type="time"], > .entrada-curta):not(.linha-campos > *, .empilhado) > .campo { grid-row: 1; padding-top: var(--e-3); }
  .grupo-campo:has(> .campo):has(> .seletor:not(.seletor-medio), > .entrada[type="date"], > .entrada[type="time"], > .entrada-curta):not(.linha-campos > *, .empilhado) > :is(.entrada, .seletor, .stepper, .linha-adicionar) { grid-row: 1 / span 2; }
}
@container campos (min-width: 640px) {
  .grupo-campo:has(> .campo):has(> .entrada, > .seletor, > .stepper, > .linha-adicionar):not(.linha-campos > *, .empilhado) {
    grid-template-columns: minmax(var(--campo-texto-min), 1fr) minmax(0, var(--campo-trilha));
    grid-template-rows: auto 1fr; grid-auto-flow: row dense; column-gap: var(--e-6); align-items: start;
  }
  .grupo-campo:has(> .campo):has(> .entrada, > .seletor, > .stepper, > .linha-adicionar):not(.linha-campos > *, .empilhado) > * { grid-column: 2; }
  .grupo-campo:has(> .campo):has(> .entrada, > .seletor, > .stepper, > .linha-adicionar):not(.linha-campos > *, .empilhado) > :is(.campo, .campo-ajuda, .nota-ferramenta) { grid-column: 1; }
  .grupo-campo:has(> .campo):has(> .entrada, > .seletor, > .stepper, > .linha-adicionar):not(.linha-campos > *, .empilhado) > .campo { grid-row: 1; padding-top: var(--e-3); }
  .grupo-campo:has(> .campo):has(> .entrada, > .seletor, > .stepper, > .linha-adicionar):not(.linha-campos > *, .empilhado) > :is(.entrada, .seletor, .stepper, .linha-adicionar) { grid-row: 1 / span 2; }
}

/* 2. A fileira de campos: o peso e o piso de cada tipo. */
.linha-campos > * { --campo-peso: 2; --campo-piso: 200px; }
.linha-campos > :has(> .entrada[type="number"], > .stepper, > .entrada-numero) { --campo-peso: 1; --campo-piso: 120px; }
.linha-campos > :has(> .seletor, > .entrada[type="date"], > .entrada[type="time"], > .entrada-curta) { --campo-peso: 1.5; --campo-piso: 160px; }
.linha-campos > :has(> textarea.entrada, > .entrada-larga) { --campo-peso: 3; --campo-piso: 180px; }
@container campos (min-width: 560px) {
  .linha-campos { display: flex; flex-wrap: wrap; align-items: flex-start; }
  .linha-campos > * { flex: var(--campo-peso) 1 0%; min-width: var(--campo-piso); margin-bottom: 0; }
}
/* A fileira de campos respira como um grupo: 16 até o que vem depois. */
.linha-campos { margin: 0 0 var(--ritmo-paragrafo); }
.linha-campos:last-child { margin-bottom: 0; }

/* A nota que a base põe no bloco "Quantas pessoas?" (`.nota-ferramenta`) é a
   ajuda daquele campo, e dentro do grupo tem o corpo da ajuda. A 16px, na
   coluna de texto da fileira, ela ocupava quatro linhas no cartão de 434 do
   Bingo, mais alta que o próprio campo. */
.grupo-campo > .nota-ferramenta { font-size: 14px; line-height: 1.5; }