/* ============================================================
   ENTREVISTA — FOLHA DA PÁGINA DE TESTE (11/09/2026)

   ⚠ SÓ A PÁGINA DE TESTE CARREGA ESTA FOLHA. `pages/entrevista-teste.html` a
   pede depois da `tiezzi.css`, e nenhuma outra página a menciona. A entrevista
   de produção não é tocada por nada daqui.

   O QUE ELA FAZ. A `tiezzi.css` veste o formulário para viver dentro do
   showcase: painel cinza, palco de altura fixa, navegação colada no pé, tudo
   medido contra a dobra. Aqui o formulário vive dentro do painel branco da
   página de advogados, que é documento em fluxo e não tem dobra nenhuma. Esta
   folha desfaz o que era do showcase e põe no lugar o desenho do painel.

   ⚠ ELA NÃO REDESENHA OS CAMPOS. Dropdown, campo de texto, botão, asterisco,
   barra de progresso: tudo continua vindo da `tiezzi.css`. Duplicar aquele
   desenho aqui seria criar um segundo lugar para consertá-lo.
   ============================================================ */

/* ---------- o painel branco ----------
   O `.search-controls` da página de advogados já é o painel: fundo branco,
   largura do `wrapper--narrow`, 100px de folga embaixo. A folga de cima é
   nossa, e o valor dela está medido no bloco "as medidas saem do filtro de
   Notícias & Análises", no fim desta folha. */
.tz-teste {
  padding-top: 1.71875rem;
}

/* ---------- desfazer o que era do showcase ----------
   ⚠ A CADEIA DE ALTURA INTEIRA TEM DE CAIR. No showcase o formulário ocupa a
   altura do painel e o palco rola por dentro; aqui a página é que rola, e um
   elo de `height: 100%` de pé deixaria a entrevista presa numa caixa de altura
   zero — o pai não tem altura para herdar. */
.tz-teste .tz-form,
.tz-teste .tz-palco {
  height: auto;
  min-height: 0;
  overflow: visible;
}
.tz-teste .tz-palco { flex: none; }

/* A pergunta ativa não precisa de margem automática: sem palco de altura fixa
   não há o que centralizar. */
.tz-teste .tz-pergunta--ativa { margin: 0; }
.tz-teste .tz-pergunta--ativa:has(textarea) { height: auto; }
.tz-teste .tz-intro { margin: 0; max-height: none; overflow-y: visible; }

/* ---------- o título do campo ----------
   ⚠ CAIXA ALTA, PEDIDO DO LUCCA EM 11/09/2026: "o mais direto e objetivo
   possível, em caps lock". O texto curto vem do `data-curto` de cada rótulo no
   molde; a caixa alta vem daqui, como em todo rótulo deste site — o conteúdo
   fica escrito uma vez só, na forma normal.

   ⚠ E O `data-curto` PRECISA FICAR NA FORMA NORMAL, não é preferência. Ele
   esteve em caixa alta até 12/09/2026, e o preço apareceu na aba do dropdown: a
   lista de um `<select>` nativo é desenhada pelo sistema operacional, que não lê
   CSS nenhum, então o `text-transform` daqui não a alcança e o placeholder saía
   "BENEFÍCIO" gritado no meio de opções em caixa normal. Escrito "Benefício", a
   aba mostra "Benefício" e a caixa fechada continua mostrando "BENEFÍCIO".

   As medidas são as da sobrelinha do formulário (`.tz-form__eyebrow`): 13px,
   `.08em` de entreletra. É o tom de quem etiqueta um campo, e não de quem faz
   uma pergunta — que é a diferença que esta página está testando. */
.tz-teste .tz-campo__rotulo {
  color: #7c7c7c;
  font-size: .8125rem;
  font-weight: 400;
  letter-spacing: .08em;
  margin-bottom: .75em;
  text-transform: uppercase;
}

/* A explicação vem logo abaixo do campo, como na produção, e continua cinza. */
.tz-teste .tz-campo__dica { margin-top: 1.25rem; }

/* ---------- a navegação ----------
   ⚠ NÃO É MAIS BARRA FIXA. No celular a produção prega Voltar e Avançar no pé
   da tela, porque lá o formulário ocupa a tela inteira. Aqui ele é um trecho
   de uma página que rola: barra fixa taparia o conteúdo de baixo e ficaria
   solta no meio da matéria. Os botões voltam para o fluxo, no fim do painel.

   ⚠ SEM FIO POR CIMA. Havia um `border-top: 1px solid #e3e3e3` aqui, para
   separar os botões do formulário; o Lucca mandou tirar em 12/09/2026. A
   produção nunca teve o fio, então não há o que desfazer lá.

   ⚠ OS 32px ACIMA SÃO MEDIDOS NO "ADVANCED SEARCH" DA REFERÊNCIA, e é o
   pedido do Lucca do mesmo dia. Lá o vão entre o último filtro e o botão dá 32px
   nas duas larguras, e ele é a soma de duas parcelas: os `1.375em` de
   `margin-bottom` que todo `.select-dropdown` carrega, mais os `.625em` de
   `margin-top` do próprio botão.

   ⚠ AQUI ELE VEM DE UMA PARCELA SÓ, e não de duas, porque a `tiezzi.css` zera
   de propósito a margem do último campo (`.tz-pergunta .tz-campo:last-child`)
   para ele não empurrar a navegação. Somar 22 + 10 exigiria desfazer aquela
   regra primeiro; `margin-top: 2rem` dá os mesmos 32px vistos na tela, com uma
   linha em vez de duas. O `padding-top` foi a zero junto: ele era o respiro que
   acompanhava o fio, e agora contaria em dobro.

   ⚠ A DISTÂNCIA ABAIXO NÃO PRECISOU DE NADA. Na referência ela é o
   `padding-bottom` do `.search-controls` (65px até 767px, 100px daí para cima),
   e esta página VIVE dentro de um `.search-controls` de verdade — os mesmos
   65 e 100 já estavam lá, medidos abaixo do Avançar.

   ⚠ O SELETOR REPETE O `:not(.tz-form--intro)` DA PRODUÇÃO, e não é enfeite:
   a regra que prega a barra no pé é `.tz-form:not(.tz-form--intro)
   .tz-navegacao`, que pesa (0,3,0). Um `.tz-teste .tz-navegacao` pesa (0,2,0)
   e perde — visto na tela, com os botões parados no escuro embaixo do painel.
   Com o mesmo qualificador os dois empatam em (0,4,0) e esta folha, que carrega
   depois, manda. */
.tz-teste .tz-form:not(.tz-form--intro) .tz-navegacao {
  bottom: auto;
  gap: 1.25rem;
  left: auto;
  margin-top: 2rem;
  padding: 0;
  position: static;
  right: auto;
  width: auto;
}

/* ---------- o Avançar é o botão "Advanced Search" ----------
   ⚠ ELE JÁ ERA, E A NAVEGAÇÃO O ESCONDIA. O `.tz-btn--seta` da `tiezzi.css` foi
   copiado do `.button-primary` do bundle valor a valor — fundo branco, fio azul
   de 1px, rótulo azul em caixa alta, `padding: .9375em 1.625em` (os 15px por
   26px do original) e o painel que sobe no hover. O que o descaracterizava eram
   as duas peles da navegação: o losango, de 768px para cima, e a barra azul
   chapada de largura total, no celular.

   Esta folha tira as duas e deixa o botão de baixo aparecer. Não há um valor
   novo aqui: o desenho continua vindo do mesmo lugar.

   ⚠ O VOLTAR VAI JUNTO, e é decisão de par: um losango vazado ao lado de um
   retângulo seria dois desenhos para a mesma função. Se ficar estranho, é uma
   linha para desfazer. */
.tz-teste .tz-navegacao [data-avancar],
.tz-teste .tz-navegacao [data-voltar] {
  background: #fff;
  border: 1px solid #2354e8;
  color: #2354e8;
  letter-spacing: normal;
  /* ⚠ A MARGEM AUTOMÁTICA DO AVANÇAR TEM DE MORRER, e ela não está em media
     query nenhuma: `.tz-navegacao [data-avancar] { margin-left: auto }`, na
     `tiezzi.css`, é o que prega o botão à direita na produção, sozinho ou
     acompanhado. Margem automática ABSORVE a folga toda da linha, e com isso
     ganha do `justify-content` — o `flex-end` desta folha simplesmente não
     tinha o que distribuir, e o Voltar ficava colado na margem esquerda.
     Visto de 768 a 999px em 12/09/2026; abaixo disso não aparecia porque lá a
     navegação da produção é outra. */
  margin-left: 0;
  min-width: 0;
  /* ⚠ E O RECORTE TAMBÉM PRECISA VOLTAR. O painel azul do hover é um `:before`
     absoluto estacionado logo ABAIXO do botão (`translateY(100%)`), esperando
     subir; quem o esconde é o `overflow: hidden` do `.tz-btn`. De 768 a 999px a
     produção troca os dois botões por losangos e abre o recorte para a ponta do
     losango sair da caixa — e aqui, sem losango e com o `:before` de volta, o
     que saía era um retângulo azul chapado embaixo de cada botão. */
  overflow: hidden;
  padding: .9375em 1.625em;
  width: auto;
}
.tz-teste .tz-navegacao [data-voltar] {
  border-color: #979797;
  color: #3f3f3f;
}
/* ---------- a animação do hover: só o Avançar, e só de 1000px para cima ----------
   Pedido do Lucca em 12/09/2026. Até 999px nenhum dos dois se mexe; de 1000 em
   diante o Avançar recupera o gesto da referência e o Voltar continua parado.

   ⚠ TIRAR A ANIMAÇÃO SÃO DUAS COISAS, E NÃO UMA. O painel azul que sobe é um
   `:before`; a cor branca que o rótulo assume no hover é outra regra. Apagar só
   o painel deixaria o rótulo ficando branco sobre fundo branco, ou seja, o
   botão sumindo ao passar o mouse. As duas saem juntas.

   ⚠ O `transition` FICA. Ele também serve ao opacity do estado desativado, que
   você pediu em 10/09/2026 para o Avançar não piscar entre 100% e 40% a cada
   tecla do CEP. Sem gesto de hover para animar, ele não faz mais nada aqui. */
.tz-teste .tz-navegacao [data-avancar]:before,
.tz-teste .tz-navegacao [data-voltar]:before { content: none; }
.tz-teste .tz-navegacao [data-avancar]:hover { box-shadow: none; color: #2354e8; }
.tz-teste .tz-navegacao [data-voltar]:hover { box-shadow: none; color: #3f3f3f; }

/* ⚠ E A COR DO RÓTULO PRECISA SER REESCRITA AQUI, que é o "adaptar as cores".
   A regra da produção é `.tz-btn--seta:not([disabled]):hover { color: #fff }`,
   e ela pesa (0,3,0) — exatamente o mesmo que o
   `.tz-teste .tz-navegacao [data-avancar]` que pinta o botão de azul. Empate se
   resolve por ordem, e esta folha carrega depois: o rótulo continuava AZUL
   enquanto o painel azul subia por baixo dele, ou seja, texto invisível durante
   o gesto inteiro. Com o `:not([disabled])` repetido aqui o seletor vai a
   (0,5,0) e o branco volta a ganhar.

   O azul do painel é o mesmo `#2354e8` da borda, e não precisou mudar: o botão
   branco de fio azul que enche de azul com o rótulo branco É o `.button-primary`
   da referência, gesto por gesto. */
@media screen and (min-width: 1000px) {
  .tz-teste .tz-navegacao [data-avancar]:before { content: ""; }
  .tz-teste .tz-navegacao [data-avancar]:not([disabled]):hover {
    box-shadow: 0 6px 20px 5px rgba(0, 0, 0, .15);
    color: #fff;
  }
}
/* O losango e a chevron são exclusivos da navegação; o botão da referência não
   tem ícone nenhum. */
.tz-teste .tz-navegacao [data-avancar] .tz-btn__icone,
.tz-teste .tz-navegacao [data-voltar] .tz-btn__icone { display: none; }

/* ⚠ CONTEÚDO, E NÃO LARGURA TOTAL. No celular a navegação é uma COLUNA, e num
   flex em coluna o `align-items` padrão estica os filhos de ponta a ponta — foi
   assim que o botão saiu com 362px contra os 228px da referência. Em linha eles
   voltam a ter a largura do próprio rótulo.

   ⚠ À DIREITA, OS DOIS, por pedido do Lucca em 12/09/2026. A produção usa
   `space-between`, que joga o Voltar para uma ponta e o Avançar para a outra;
   aqui eles andam juntos, na ordem em que se lê, encostados na margem direita do
   painel. O `order` logo abaixo é o que garante o Avançar por último, ou seja,
   o mais à direita.

   ⚠ O RECADO DE ERRO NÃO É AFETADO. Ele é filho da mesma navegação, mas tem
   `flex-basis: 100%` e `order: -1` na `tiezzi.css`: ocupa a linha inteira acima
   dos botões, então o alinhamento horizontal não o alcança. Foi por isso que ele
   deixou de ser a fatia do meio, em outra ocasião. */
.tz-teste .tz-form:not(.tz-form--intro) .tz-navegacao {
  align-items: flex-start;
  flex-direction: row;
  justify-content: flex-end;
}
/* A altura também é medida: 49px na referência, contra os 55 que o
   `line-height: 1.5` do `.tz-btn--seta` dava. O `1.2` é o do `.button`.

   ⚠ O CORPO TEM DE SER DECLARADO AQUI, e a falta dele era metade da
   "responsividade bugada" de 12/09/2026. A produção troca a fonte dos dois
   botões em faixas DIFERENTES: o Avançar cai para `.875rem` a partir de 768px,
   sem teto, e o Voltar só entre 768 e 999,98px. De 1000px para cima, portanto,
   um ficava com 14px e o outro com 16 — 44,4px de altura contra 50,5, lado a
   lado. Lá isso nunca aparece porque o Voltar está escondido acima de 1000px;
   aqui ele voltou, e a diferença veio junto.

   `1rem` fixo nas duas larguras acaba com a faixa: o botão é o mesmo de 320 a
   1280. (A referência faz o dela CRESCER no desktop — `padding: 1.40625em
   1.95em`, 63,9px de altura contra 48,9 no celular. Não segui, porque o
   tamanho que você vem aprovando é o do celular; é uma linha se quiser o
   crescimento também.) */
.tz-teste .tz-navegacao [data-avancar],
.tz-teste .tz-navegacao [data-voltar] {
  font-size: 1rem;
  line-height: 1.2;
}
/* O Voltar vem primeiro na leitura, e o `order` da produção o mandava para
   baixo do Avançar no celular. */
.tz-teste .tz-navegacao [data-voltar] { order: 0; }
.tz-teste .tz-navegacao [data-avancar] { order: 1; }

/* ⚠ E DE 1000px PARA CIMA O VOLTAR SIMPLESMENTE NÃO EXISTIA NESTA PÁGINA. A
   `tiezzi.css` o esconde ali de propósito: no showcase quem volta é o "Back" do
   painel, no alto à esquerda, que clica neste botão escondido. Esta página não
   tem painel nem Back, então acima de 1000px não havia como voltar uma
   pergunta. Visto em 12/09/2026, medindo a navegação faixa a faixa.

   ⚠ O `:not([hidden])` NÃO É ZELO. `display` de autor ganha do
   `[hidden]{display:none}` do navegador, e é assim que a entrevista esconde o
   Voltar na PRIMEIRA tela, onde não há para onde voltar. Sem o qualificador,
   devolver o botão aqui o faria aparecer lá também. A `tiezzi.css` já registra
   essa armadilha no `.tz-campo[hidden]`. */
.tz-teste .tz-navegacao [data-voltar]:not([hidden]) { display: block; }

/* ---------- sem subtítulo, e o freio só no clique ----------
   Pedido do Lucca em 11/09/2026. As explicações cinzas saem todas; as duas
   frases vermelhas (o porteiro do INSS e o do CEP) passam a aparecer só quando
   o clique no Avançar esbarra nelas. Quem as revela é `barrouNoClique`, em
   scripts/restore-interactions.js, ligado pelo `data-freio="no-clique"` da
   página.

   ⚠ UMA REGRA ESCONDE AS DUAS COISAS, e é de propósito: o freio É uma
   `.tz-campo__dica` — carrega a classe para herdar tamanho, peso e distância —
   e por isso some junto. O que o traz de volta é a classe do estado.

   ⚠ E ELA PRECISA DE (0,3,0). `.tz-teste .tz-campo__dica` pesa (0,2,0); um
   `.tz-teste .tz-campo__freio--visivel` pesaria o mesmo e a disputa cairia na
   ordem. Com as duas classes do elemento no seletor, o estado ganha sempre. */
.tz-teste .tz-campo__dica { display: none; }
.tz-teste .tz-campo__dica.tz-campo__freio--visivel { display: block; }

/* ---------- o cabeçalho da entrevista sai inteiro ----------
   Pedido do Lucca em 11/09/2026, e em três tempos: primeiro caiu a barra de
   progresso, agora caem com ela a sobrelinha ("ENTREVISTA") e a contagem
   ("PERGUNTA X DE X"). O `.tz-form__cabecalho` é o pai dos três, então uma
   linha resolve — e as regras que ajustavam a margem dele e o cinza da barra
   vazia saíram desta folha, porque não há mais o que ajustar.

   ⚠ A CONTAGEM JÁ ESTAVA ERRADA, e some antes de precisar de conserto: desde o
   agrupamento ela dizia "PERGUNTA 1 DE 4" numa tela com três perguntas. Se o
   cabeçalho voltar um dia, a conta precisa voltar a falar de telas.

   ⚠ SÓ AQUI. Na produção o cabeçalho é a única régua que a pessoa tem. */
.tz-teste .tz-form__cabecalho { display: none; }

/* ---------- o levante do primeiro campo foi desfeito ----------
   ⚠ ESTEVE AQUI, em 11/09/2026, o primeiro campo de cada tela montado metade
   na faixa escura e metade no painel, copiando o `transform: translateY(-50%)`
   que o `.searchbox` da referência usa. Durou algumas horas: o Lucca pediu para
   tirar no mesmo dia.

   Saíram com ele três coisas que só existiam para a conta fechar, e que não
   devem voltar sozinhas se alguém repuser o levante pela metade: o
   `padding-top: 0` do painel (hoje `1.71875rem`, no alto desta folha), o rótulo em
   `position: absolute` com `color: #fff` — que era o único jeito de ele não
   contar na altura medida pelo `-50%` — e o fundo branco no campo, para a
   metade de cima não ficar com o azul sobre o escuro.

   Fica registrado porque a receita custou medição: a referência não tem rótulo
   (o texto dela é `placeholder`), e é isso que torna o `-50%` simples lá e
   cheio de remendo aqui. */

/* ---------- o título dos dropdowns mora dentro da caixa ----------
   Pedido do Lucca em 11/09/2026, e é o desenho do `select-dropdown` do zip:

     <label class="sr-only">Practice</label>
     <select><option disabled value="">Practice</option> …
     <span class="select-dropdown__label">Practice</span>

   O mesmo texto no rótulo escondido e na caixa. Quem faz isso do nosso lado é
   `montarSelects`, em scripts/restore-interactions.js, ligado pelo
   `data-rotulo-no-dropdown` da página: o título vira o placeholder e o `<span>`
   de cima é removido do DOM.

   ⚠ NÃO HÁ REGRA DE ESTILO AQUI, e é de propósito. O rótulo sai do DOM em vez
   de ser escondido por CSS, porque o `aria-label` do `<select>` já carrega o
   mesmo texto para o leitor de tela. Esconder por CSS deixaria o texto sendo
   lido duas vezes.

   ⚠ SÓ OS DROPDOWNS. Data, CPF, CEP, e-mail e a caixa de texto continuam com o
   título em cima — eles não têm placeholder sobrando para abrigá-lo. */

/* ============================================================
   AS MEDIDAS SAEM DO FILTRO DE NOTÍCIAS & ANÁLISES (11/09/2026)

   Pedido do Lucca, com a captura `kirkland.com-insights-1789220061603` na mão:
   a distância até o cabeçalho, a distância entre um campo e o seguinte, a
   altura das caixas e o tamanho da seta passam a ser os do bloco de filtros
   daquela página — TYPE, PRACTICE, DATE RANGE, empilhados sob a busca.

   ⚠ O MOLDE É O `select-dropdown--large`, que é o TYPE. Os outros dois são
   `--medium` e medem menos: 46,7px contra os 54,9px do TYPE no celular. Quem
   foi copiado é o TYPE, porque foi ele que o Lucca nomeou.

   TUDO ISTO É DA PÁGINA DE TESTE. A produção não vê nada daqui.
   ============================================================ */

/* ---------- 1. entre o cabeçalho e o primeiro campo ----------
   Medido na referência, do fim da última caixa de busca ao topo do TYPE:

     até 767px    27,5px
     de 768px     38,7px

   ⚠ SÃO DUAS ORIGENS DIFERENTES, e por isso não há um valor só. No desktop os
   38,7px são o `margin-bottom: 2.42em` do `.keyword-search--grid`, um número
   escrito de propósito. No celular aquela margem não existe: lá a caixa de
   busca sobe meia altura por cima da faixa escura (`translateY(-50%)`), e o vão
   que sobra abaixo dela é justamente essa metade — 27,5px de uma caixa de 55.
   O que se vê acima do TYPE é isso, e é isso que está copiado.

   ⚠ EM `rem`, E NÃO EM `em`. O formulário roda numa escala própria de 20px;
   `em` aqui inflaria as duas medidas em 25%. Mesma armadilha que a `tiezzi.css`
   já registra no `.tz-select__gatilho`. */

/* ---------- 2. entre um campo e o seguinte ----------
   `1.375em` é o `margin-bottom` do `.select-dropdown`, e também o
   `margin-top` que separa as duas caixas de busca (`.searchbox + .searchbox`).
   Um número só para todo o bloco, nas duas larguras: 22px.

   ⚠ A CONTA MUDA DE PONTA NOS CAMPOS COM TÍTULO. Nos dropdowns, que perderam o
   título para dentro da caixa, os 22px ficam entre uma caixa e a outra, como na
   referência. Em DATA DA NEGATIVA, CPF, CEP e E-MAIL eles ficam entre a caixa
   de cima e o TÍTULO do campo seguinte — o título continua onde estava, com o
   seu próprio respiro até a caixa. Não há como ser os dois ao mesmo tempo. */
.tz-teste .tz-campo { margin-bottom: 1.375rem; }

/* ---------- 3. a altura das caixas ----------
   O TYPE é `.select-dropdown--large`, e a receita dele no bundle é:

     .select-dropdown__label          { line-height: 1.1; border: 1px }
     --large .select-dropdown__label  { font-size: 1em;  padding: 1.125em … }
     @48em --large                    { font-size: 20px; padding: .96em 1.2em }

   Ou seja: 16px de corpo e 1.125em de respiro até 767px; 20px e .96em daí para
   cima. Medido: 55,6px e 62,4px (54,9 e 61,7 nesta tela, que é HiDPI e desenha
   a borda de 1px com 2/3 de pixel).

   ⚠ O CORPO DO TEXTO VAI JUNTO, e não é efeito colateral: é dele que a altura
   sai. No desktop o rótulo do TYPE tem 20px, e o nosso passa a ter também.

   ⚠ SÓ O RESPIRO VERTICAL É COPIADO. O horizontal da referência (`1.2em` dos
   dois lados) deixaria o texto passando por baixo da seta; lá isso não aparece
   porque "TYPE" tem quatro letras, e aqui os rótulos são "AUXÍLIO POR
   INCAPACIDADE TEMPORÁRIA (AUXÍLIO-DOENÇA)". O recuo de 2.40625em à direita
   fica como está, e é o que faz as reticências pararem antes da seta. */
.tz-teste .tz-select__gatilho {
  line-height: 1.1;
  padding-bottom: 1.125em;
  padding-top: 1.125em;
}
/* (⚠ ESTEVE AQUI A ALTURA DA `.tz-campo__caixa`, `calc(1.1rem + 2 * 1.125rem +
   2px)`, que era a mesma soma do TYPE. Ela saiu em 15/09/2026 com a própria
   caixa — ver a lápide no fim desta folha. Os campos de escrita que restam
   medem pelo molde que vestem: o e-mail e o CPF pelo "Search by keyword", o
   relato pela moldura dele, e as caixas do "Outro" pelo anexo.) */

/* ---------- 4. a seta ----------
   A regra da referência, inteira:

     .select-dropdown__label:before         { font-size: inherit; line-height: 1;
                                              right: 1.0714285714em }
     @48em .select-dropdown__label:before   { right: 1.375em }
     --large .select-dropdown__label:before { font-size: .875em }

   O `.875em` é o que importa: a seta é sempre 7/8 do corpo do rótulo, então ela
   cresce de 14px para 17,5px junto com o texto. A nossa era `1em`, e ficava
   maior que a da referência nas duas larguras.

   ⚠ O `right` É EM `em` DA PRÓPRIA SETA, e não do rótulo. Como o corpo dela
   mudou, o mesmo `1.375em` de antes passaria a valer 19,25px em vez de 22 — por
   isso os dois valores da referência estão aqui, um por faixa. */
.tz-teste .tz-select__seta {
  font-size: .875em;
  right: 1.0714285714em;
}

@media screen and (min-width: 768px) {
  .tz-teste { padding-top: 2.42rem; }
  .tz-teste .tz-select__gatilho {
    font-size: 20px;
    padding-bottom: .96em;
    padding-top: .96em;
  }
  .tz-teste .tz-select__seta { right: 1.375em; }
}

/* (⚠ ESTEVE AQUI A `.tz-campo__caixa`, DE 12 A 15/09/2026, e o registro fica
   porque a ida e a volta custaram duas telas.

   Ela nasceu de um pedido do Lucca: "no input de CPF, o título deve ficar
   dentro do quadro de input, em azul e em maiúsculo, e ao lado do título,
   deixe um espaço e aí o placeholder do texto a ser escrito".

     [ CPF  000.000.000-00 ]
       azul       cinza

   Um `<input>` tem UM texto de repouso, de UMA cor, e ali eram dois textos em
   duas cores, com o da esquerda não sumindo ao escrever — então o script
   embrulhava o campo numa caixa, movia o `<label>` para dentro dela, e a borda
   e a altura mudavam de dono. Funcionava, e cobrava: um `font-size` escrito em
   dois lugares para a coluna do título bater com a do dropdown, um `min-width:
   0` para título longo não empurrar o exemplo, e um bloco `@media` que só
   podia morar no fim do arquivo por causa da ordem da cascata.

   Em 15/09/2026 o Lucca pediu que o e-mail e o CPF vestissem o "Search by
   keyword" da mesma referência, que é campo de escrita comum com UMA frase de
   repouso — e a caixa deixou de ter quem embrulhar. Os dois campos que
   sobraram com título dentro são o relato, que tem moldura própria (o título
   fica numa linha só dele, e por isso não precisa desta engenharia), e as
   caixas do "Outro", que nunca tiveram título.

   O que a caixa fazia e não voltou: o nome do campo em azul e em caixa alta
   DENTRO da borda, e o formato "000.000.000-00" ao lado do nome. Hoje a frase
   de repouso é uma só, cinza, e diz o nome do campo.) */

/* ---------- o asterisco sai ----------
   Pedido do Lucca em 12/09/2026, junto com os exemplos. Some das quatro caixas
   de escrita, do "O QUE ACONTECEU" e da PROPOSTA; os dropdowns já o tinham
   perdido quando o título virou placeholder.

   ⚠ COM ELE SAI A ÚNICA MARCA DE OBRIGATÓRIO DA PÁGINA. Nada mais separa os
   campos que travam o Avançar (benefício, status, data, relato, CPF, CEP,
   e-mail, o aceite da proposta) dos dois que não travam (profissão e estado
   civil). Quem descobre a diferença é quem clica em Avançar e não sai do lugar.
   Está escrito aqui porque foi uma escolha, e não um esquecimento.

   ⚠ ESCONDIDO, E NÃO REMOVIDO. `display: none` já o tira da árvore de
   acessibilidade, então o leitor de tela também não o anuncia, e o molde
   continua sendo o mesmo da produção — onde o asterisco fica. */
.tz-teste .tz-campo__obrigatorio { display: none; }

/* ---------- a barrinha de escrita, igual em todo campo ----------
   Pedido do Lucca em 12/09/2026: "padronize o estilo da barrinha de escrita
   entre todos os inputs de escrita, de forma fina".

   ⚠ O QUE DIFERIA ERA A ALTURA DELA, e não a cor. O cursor de texto ocupa a
   caixa de linha do campo, então ele mede o `line-height`. Os quatro campos que
   ganharam título dentro da caixa estavam em 1.1 (17,6px); os dois que a opção
   "Outro" abre e o "Conte o seu caso" continuavam nos 1.4 da `tiezzi.css`
   (22,4px). Lado a lado, em caixas do mesmo tamanho, a barrinha de um era um
   quinto maior que a do outro.

   `1.1` para todos é a fina: a barrinha passa a ter a altura das letras em vez
   da altura da entrelinha.

   ⚠ O "O QUE ACONTECEU" SAIU DA REGRA NO MESMO DIA, e era o risco anotado
   aqui: no textarea o mesmo `line-height` governa a barrinha E o espaço entre
   as linhas do parágrafo, e com 1.1 o texto ficou apertado demais. O Lucca
   mandou abrir de novo — primeiro para os `1.4` da `tiezzi.css`, e no mesmo dia
   um pouco mais, para `1.6`: 25,6px de entrelinha num corpo de 16.

   O que se perde é justamente o que esta regra queria: a barrinha dele mede
   25,6px contra os 17,6px dos campos de uma linha. Não há como separar as duas
   coisas no mesmo elemento — ou o parágrafo respira, ou o cursor combina.

   A cor fica escrita mesmo sem mudar nada hoje (o cursor herda o `color` do
   campo, que já é este): padronizar é também travar o que já está certo, e ela
   continua valendo para os sete campos, textarea incluído.

   ⚠ E O `1.1` VIROU `1.2` EM 15/09/2026, PORQUE ELE CORTAVA A FONTE. O Lucca
   viu o "g" de "luccaborges@hotmail.com" com o rabinho cortado no campo de
   e-mail. Não era o campo: era esta linha.

   A caixa de conteúdo da Rubik 300 mede 19px num corpo de 16 — é a soma da
   ascendente com a descendente, e ela NÃO cabe numa caixa de linha de 17,6.
   Faltavam 1,4px, e um `<input>` recorta o que passa da caixa de linha dele:
   sobrava 0,7px fora em cima (as hastes do "l" e do "b") e 0,7 embaixo (o rabo
   do "g" e do "@"). Em caixa alta ninguém via, porque maiúscula não tem
   descendente — por isso passou três dias sem aparecer.

   `1.2` dá 19,2px, que é o primeiro valor redondo acima dos 19 de que a fonte
   precisa. O cursor continua fino: a régua deste bloco era ter a altura das
   LETRAS em vez da altura da entrelinha, e 19,2 é a altura das letras.

   ⚠ QUEM TEM ALTURA PRÓPRIA NÃO SENTE NADA (as caixas do "Outro", que medem
   como um anexo). Quem tira a altura desta linha é o campo de busca, e lá o
   respiro de cima e de baixo desceu 0,05em para a caixa continuar com a altura
   da referência — ver "o e-mail e o CPF vestem o Search by keyword". */
.tz-teste .tz-campo__controle {
  caret-color: #3f3f3f;
  line-height: 1.2;
}
.tz-teste textarea.tz-campo__controle { line-height: 1.6; }

/* ---------- a etapa dos documentos ----------
   Pedido do Lucca em 12/09/2026: os documentos todos numa página só (menos os
   "Documentos diversos"), sem título em cima e com o nome do documento dentro
   da própria caixa de anexo. Quem faz as três coisas é o script
   (`juntarDocumentos`, `telaDoDocumento` e `caixaDeArquivo`, em
   scripts/restore-interactions.js), ligado pelo `data-documentos-juntos` e pelo
   `data-rotulo-na-caixa` da página.

   ⚠ AQUI SÓ FALTA UMA DISTÂNCIA, e é a de duas caixas DENTRO do mesmo campo. Os
   documentos ficam a `1.375rem` uns dos outros porque cada um é um `.tz-campo`,
   e a regra do começo desta folha já vale para todos; duas caixas no mesmo campo
   pegam os `.5rem` da `tiezzi.css` — 8px contra 22px, visível assim que as duas
   param lado a lado com as outras.

   ⚠ E HOJE NÃO HÁ NENHUM DOCUMENTO ASSIM. O caso era o documento pessoal, com
   Frente e Verso; em 15/09/2026 ele virou um campo só (ver `PARTES`, em
   motor/guia-trf4.js, que ficou vazia). A regra fica porque o mecanismo dos
   lados também ficou: quem repuser uma linha lá encontra a distância pronta. */
.tz-teste .tz-arquivo + .tz-arquivo { margin-top: 1.375rem; }

/* ---------- os arquivos já anexados ----------
   Pedido do Lucca em 12/09/2026, e são duas coisas: a distância entre um anexo
   e o seguinte, e o tamanho de cada linha.

   ⚠ ELES NÃO SÃO O CAMPO, SÃO A PILHA. Num documento que aceita vários, o
   escolhedor fica vazio no lugar e cada arquivo vira uma linha abaixo dele, com
   a própria lixeira (ver `desenharPilha`, em scripts/restore-interactions.js).
   É essa linha que muda aqui; a caixa que se clica para anexar continua com a
   altura do TYPE.

   ⚠ A LINHA PASSA A SER O `select-dropdown--medium` DA REFERÊNCIA, que é o
   PRACTICE e o DATE RANGE. Eles não têm regra própria no bundle: usam o
   `.select-dropdown__label` base, `font-size: .875em` com `1.0714285714em` de
   respiro até 767px, e `font-size: 1em` daí para cima. Medido: 47,4px e 53,9px,
   contra os 55,6 e 62,4 do TYPE. A hierarquia sai de graça — o anexo é menor
   que a caixa que o recebeu.

   ⚠ O SELETOR REPETE `.tz-select__gatilho` DE PROPÓSITO. A linha da pilha veste
   as duas classes, e a regra que dá ao gatilho as medidas do TYPE pesa (0,2,0);
   um `.tz-teste .tz-anexos__item` pesaria o mesmo e a disputa cairia na ordem.
   Com as duas classes no seletor, a linha ganha sempre. É a mesma armadilha que
   a `tiezzi.css` já registra logo acima da regra dela.

   ⚠ O VÃO NÃO É O DA PÁGINA, É O DA CAIXA FILHA. Pedido do Lucca em
   12/09/2026: o anexo pende do campo que o recebeu, como a caixa que a opção
   "Outro" abre pende do dropdown dela, e as duas distâncias têm de ser a mesma.
   A do "Outro" está no molde, num `style="margin:.75em 0 0"` de `jef.html`, e é
   ela que manda aqui.

   (⚠ ESTEVE EM `1.375rem` POR ALGUMAS HORAS DO MESMO DIA, quando o pedido era
   "padronize a distância". Com os 22px da página, o anexo lia como mais um
   campo da lista, e não como filho de um campo. Os 12px o devolvem ao dono.)

   ⚠ EM `em` DA LISTA, E NÃO EM `rem`. A `<ul>` herda o corpo do `.tz-campo`,
   que é o mesmo de quem hospeda a caixa do "Outro" — então `.75em` dá o mesmo
   número dos dois lados em qualquer largura, sem precisar repetir a conta por
   faixa. Em `rem` os dois se separariam no desktop, onde o painel muda de
   escala.

   ⚠ O VÃO ENTRE AS LINHAS É `gap`, E NÃO MARGEM DO ITEM, pelo mesmo motivo:
   a linha tem corpo PRÓPRIO (`.875rem`, a medida do PRACTICE), então `.75em`
   escrito nela mediria 10,5px em vez de 12. No `gap` da lista, o `em` volta a
   ser o do campo.

   ⚠ O `:not(:empty)` PRESERVA UMA REGRA DA PRODUÇÃO. A `<ul>` existe desde que
   a tela nasce, e lá `.tz-anexos:empty` zera a margem para não abrir um vão
   embaixo de um campo sem anexo nenhum. Aquele seletor pesa (0,2,0), o mesmo
   que um `.tz-teste .tz-anexos` pesaria, e esta folha carrega depois: sem o
   `:not`, o vão voltaria a aparecer com a lista vazia. */
.tz-teste .tz-anexos:not(:empty) {
  display: flex;
  flex-direction: column;
  gap: .75em;
  margin-top: .75em;
}
.tz-teste .tz-form .tz-anexos__item { margin-bottom: 0; }
.tz-teste .tz-select__gatilho.tz-anexos__item {
  font-size: .875rem;
  line-height: 1.1;
  padding: 1.0714285714em 1.875em 1.0714285714em 1.0714285714em;
}

@media screen and (min-width: 768px) {
  .tz-teste .tz-select__gatilho.tz-anexos__item {
    font-size: 1rem;
    padding-left: 1.375em;
    padding-right: 2.40625em;
  }
}

/* ---------- a caixa do "Outro" mede como um anexo ----------
   Pedido do Lucca em 12/09/2026: "deixe o input que aparece ao escolher Outro
   nas mesmas propriedades que esses arquivos filho".

   As duas coisas são a mesma coisa na tela: algo que pende de um campo acima,
   e que só existe por causa dele. Já compartilhavam a distância (`.75em`, do
   molde); passam a compartilhar o tamanho, que é o `select-dropdown--medium` da
   referência — o PRACTICE e o DATE RANGE.

   ⚠ A ALTURA DE `1rem` JÁ É A DA PRODUÇÃO. `calc(3.2428571428rem + 2px)` é o
   que a `tiezzi.css` declara para todo campo de uma linha, e aquele número saiu
   justamente de `1.1` de linha mais `2 × 1.0714285714` de respiro — a conta do
   `--medium`. Até 767px o mesmo bloco é multiplicado por `.875`, que é o corpo
   que a referência usa ali: `2.8375rem`, ou 47,4px com as bordas.

   ⚠ A ALTURA CONTINUA EXPLÍCITA, e o motivo é o mesmo que a `tiezzi.css` já
   registra: o navegador não deixa a linha de um `<input>` ficar menor que o
   line box natural da fonte, então repetir `line-height` e padding daria uma
   caixa mais alta que a do anexo, que é um `<span>` e obedece.

   ⚠ A COR NÃO VAI JUNTO, e é decisão. A linha do anexo é escura (borda e texto
   em `#1c1c1c`) porque ela representa algo JÁ ESCOLHIDO; a caixa do "Outro"
   nasce vazia, esperando o que a pessoa vai escrever, e o azul é o que diz
   isso no resto da página. Igualar as duas cores faria um campo em branco
   parecer preenchido. */
.tz-teste .tz-campo[data-campo] input.tz-campo__controle {
  font-size: .875rem;
  height: calc(2.8375rem + 2px);
  padding-left: 1.0714285714em;
  padding-right: 1.875em;
}

@media screen and (min-width: 768px) {
  .tz-teste .tz-campo[data-campo] input.tz-campo__controle {
    font-size: 1rem;
    height: calc(3.2428571428rem + 2px);
    padding-left: 1.375em;
    padding-right: 2.40625em;
  }
}

/* ---------- o título da proposta sai, como o dos outros ----------
   Pedido do Lucca em 12/09/2026. Era o último título que ainda ficava em cima
   de uma caixa: "PROPOSTA", sobre o quadro que já diz "PROPOSTA DE HONORÁRIOS
   ADVOCATÍCIOS.PDF". O nome do documento é o título, exatamente como nas caixas
   de anexo da etapa seguinte.

   ⚠ AQUI É CSS, E NÃO O SCRIPT, e a diferença tem motivo. Nos dropdowns e nos
   campos de escrita o rótulo é REMOVIDO do DOM, porque o nome dele passa a
   morar noutro lugar acessível (o `aria-label` do `<select>`, o `for` do
   `<label>` que mudou de lugar). Neste quadro não há para onde mover: quem
   anuncia o arquivo é o texto do próprio link, que já diz o nome inteiro. O
   rótulo aqui era repetição, e `display: none` o tira também da árvore de
   acessibilidade.

   ⚠ O ACEITE NÃO É AFETADO. A frase "Li e concordo com a proposta de honorários
   advocatícios" é um `.tz-concordo__frase` com `id`, apontada pelo
   `aria-labelledby` da caixa de seleção; ela não é um `.tz-campo__rotulo` e
   continua onde estava. */
.tz-teste [data-proposta] > .tz-campo__rotulo { display: none; }

/* ---------- o visor da proposta ----------
   Pedido do Lucca em 12/09/2026: em vez do quadro que leva o PDF para outra
   aba, o documento aberto na própria página, no leitor do navegador. Quem o
   monta é `mostrarProposta`, em scripts/restore-interactions.js, ligado pelo
   `data-proposta-embutida`.

   ⚠ DAQUI SAI SÓ A MOLDURA. Barra de ferramentas, zoom, rolagem, o cinza do
   fundo e o estado de "carregando" são desenho do navegador, dentro do
   `<iframe>` — nada disso é alcançável por CSS nosso, e é justamente esse o
   ponto: é o leitor de PDF que a pessoa já conhece.

   ⚠ A ALTURA É EM `vh` PORQUE NÃO HÁ COMO MEDIR O DOCUMENTO. O conteúdo de um
   `<iframe>` de outra origem de desenho não informa a própria altura, então
   `height: auto` daria os 150px do padrão. `70vh` dá uma página inteira de A4
   legível no desktop e cerca de duas dobras no celular; o `min-height` segura o
   caso da janela baixa, onde 70vh viraria uma fresta.

   ⚠ SEM `border-radius` E COM O MESMO FIO AZUL dos outros campos: o visor é um
   campo da tela, e não um cartão à parte. */
.tz-teste .tz-proposta__visor {
  background: #fff;
  border: 1px solid #2354e8;
  display: block;
  height: 70vh;
  min-height: 20rem;
  width: 100%;
}

/* ---------- o piso do miolo ----------
   Pedido do Lucca em 12/09/2026: 1000px, uma medida só em qualquer largura.

   (⚠ NASCEU DA PÁGINA DE ADVOGADOS, e por algumas horas do mesmo dia foi a
   altura medida do painel branco de lá: 618px até 767 e 400px daí para cima —
   no celular os filtros empilham e o painel estica, no desktop cabem numa linha
   e ele encolhe. Os 400 do desktop ficavam ABAIXO de duas das nossas telas, e o
   pulo da página continuava justamente onde mais incomodava. O número redondo
   cobre todas.)

   ⚠ CONTINUA SENDO UM PISO. `box-sizing: border-box` vem do reset do site,
   então os 1000px incluem o `padding-bottom` de 65px e 100px que já estava lá;
   tela mais alta que isso segue esticando.

   ⚠ É ISTO QUE SEGURA A PÁGINA NO LUGAR. Ela se mexia ao trocar de tela porque
   o documento mudava de altura e o navegador reencaixava a rolagem no novo
   limite — não há `scrollTo` nenhum no caminho do Avançar (conferido
   instrumentando `window.scrollTo`: zero chamadas). Com todas as telas medindo
   o mesmo, não há novo limite para reencaixar.

   ⚠ O SELETOR COMEÇA FORA DO `.tz-teste` DE PROPÓSITO. Quem tem de crescer é o
   painel, que é ANCESTRAL da caixa da entrevista, e CSS não sobe. O `:has()`
   resolve e mantém a regra presa a esta página: nenhum outro `.search-controls`
   do site tem um `.tz-teste` dentro. */
.search-controls:has(.tz-teste) { min-height: 1000px; }

/* ---------- sem animação de entrada e de saída ----------
   Pedido do Lucca em 12/09/2026. As telas entram e saem sem gesto nenhum: quem
   clica em Avançar vê a tela seguinte, e não uma tela se dissolvendo na outra.

   ⚠ SÃO QUATRO REGRAS PORQUE A PRODUÇÃO TEM QUATRO ANIMAÇÕES. `tz-entra` na
   tela ativa, `tz-sai` na que está saindo, `tz-aparece` na variante com caixa de
   texto (que troca só o `animation-name` para não quebrar a animação no meio do
   voo) e `.tz-entrando`, que é o gesto de aparecer usado pelo quadro da
   proposta, pelo botão Pagar e pelas telas de documento.

   ⚠ A VARIANTE DO TEXTAREA PRECISA DO SELETOR REPETIDO. Ela pesa (0,2,1), por
   causa do `:has(textarea)` e do `:not([data-etapa])`; um `.tz-teste` na frente
   das outras chega a (0,2,0) e PERDE para ela. Com os mesmos qualificadores a
   linha vai a (0,3,1) e ganha. É a mesma armadilha que esta folha já registra no
   `:not([disabled])` da navegação.

   ⚠ A TELA QUE SAI PRECISA SUMIR, E NÃO SÓ PARAR DE ANIMAR. De 1000px para cima
   a produção põe a tela de saída em `position: absolute` sobre o palco, contando
   com o desvanecer para ela ir embora; sem animação ela ficaria 200ms inteira
   POR CIMA da tela nova, as duas legíveis ao mesmo tempo. `display: none` a tira
   na hora, que é o que "sem animação de saída" quer dizer.

   ⚠ E A OUTRA METADE DISTO MORA NO SCRIPT. Existe um `setTimeout` de 200ms
   entre tirar a tela velha e pôr a nova, medido para caber o `tz-sai`; sem
   animação ele vira painel VAZIO no meio da troca. Por isso os seletores pedem
   `[data-sem-animacao]`, o mesmo atributo que zera aquela espera: as duas
   metades ficam presas ao mesmo interruptor e não têm como divergir.

   (A produção já faz a metade de CSS em `prefers-reduced-motion`, com um
   `animation: none` na mesma dupla de classes — e lá o buraco de 200ms existe,
   porque a espera não é condicionada. Não mexi nisso.) */
.tz-teste[data-sem-animacao] .tz-pergunta--ativa,
.tz-teste[data-sem-animacao] .tz-entrando,
.tz-teste[data-sem-animacao] .tz-pergunta--ativa:has(textarea):not([data-etapa="pagamento"]) {
  animation: none;
}
.tz-teste[data-sem-animacao] .tz-pergunta--saindo {
  animation: none;
  display: none;
}

/* ---------- o botão bloqueado diz que está bloqueado ----------
   Pedido do Lucca em 12/09/2026: passar o mouse sobre o Avançar enquanto ele
   está travado mostra o sinal de proibido.

   ⚠ O `.tz-btn` DECLARA `cursor: pointer` E ISSO NÃO CAI SOZINHO. `disabled`
   tira o clique, não o desenho do ponteiro: sem esta linha o botão continua
   convidando a clicar durante os sete segundos da precificação, que é
   exatamente o contrário do que ele está fazendo.

   ⚠ NESTA PÁGINA O ÚNICO BLOQUEIO É A ESPERA. Os porteiros daqui reprovam no
   CLIQUE (`data-freio="no-clique"`), então eles nunca desativam o botão; na
   produção, onde desativam, `not-allowed` diria "não dá" para quem só não
   respondeu ainda — outra conversa, e por isso a regra não sai daqui. */
.tz-teste .tz-navegacao [data-avancar][disabled],
.tz-teste .tz-navegacao [data-voltar][disabled] { cursor: not-allowed; }

/* ---------- as instruções voltam, mas só nos documentos ----------
   Pedido do Lucca em 13/09/2026, e é o desfazer parcial de uma coisa que ele
   próprio tinha pedido: em 11/09 os subtítulos saíram da página inteira, e só
   os dois freios vermelhos podiam reaparecer, no clique. Os documentos foram
   junto sem que ninguém tivesse olhado para eles, porque a etapa nem existia
   naquele dia.

   ⚠ O QUE ESTAVA SE PERDENDO ERA O PASSO A PASSO DO MEU INSS. A carta negativa,
   o extrato do CNIS e o processo administrativo não são papel de gaveta: a
   pessoa precisa BAIXAR os três, e é aí que o pedido morre. O roteiro numerado
   que ensina isso é montado dentro de uma `.tz-campo__dica` (ver `roteiro`, em
   scripts/restore-interactions.js), então a regra que escondia os subtítulos o
   escondia junto. Some com ele a lista dos "Documentos diversos", que é o que a
   IA sugeriu a partir do relato.

   ⚠ SÓ NAS TELAS DE DOCUMENTO, e por isso o seletor pede `data-etapa`. Nas
   perguntas o desenho continua o de 11/09: nada de subtítulo, e o freio
   vermelho aparecendo só quando o clique esbarra nele.

   ⚠ E ELE GANHA DA REGRA QUE ESCONDE por (0,4,0) contra (0,2,0), sem depender
   da ordem do arquivo. */
.tz-teste .tz-pergunta[data-etapa="documento"] .tz-campo__dica { display: block; }

/* ---------- o desenho das instruções ----------
   Pedido do Lucca em 13/09/2026: "deixe as instruções dos documentos mais
   bonitas". Elas voltaram no mesmo dia com a roupa da produção, que é a de um
   subtítulo comum — texto cinza e uma `<ol>` com os marcadores do navegador.
   Num roteiro de seis passos isso lê como um parágrafo que por acaso tem
   números.

   O vocabulário usado aqui é o da própria referência, e não um novo: sobrelinha
   em caixa alta entreletrada, azul como acento, e o fio de 1px #e3e3e3 que a
   página de Notícias & Análises usa para separar blocos.

   ⚠ SÓ NAS TELAS DE DOCUMENTO. As perguntas não têm subtítulo nenhum desde
   11/09; o que aparece nelas é o freio vermelho, e ele não passa por aqui. */

/* O bloco inteiro: um tom mais escuro que o `#7c7c7c` do subtítulo comum. Seis
   passos que a pessoa vai SEGUIR, com o celular na mão, pedem mais contraste
   que uma frase de apoio que ela lê de passagem. */
.tz-teste .tz-pergunta[data-etapa="documento"] .tz-campo__dica {
  color: #3f3f3f;
  margin-top: 1.75rem;
}

/* ⚠ O NÚMERO É O ACENTO, e é ele que faz o roteiro parecer um roteiro. O
   `::marker` aceita cor e peso sem precisar de `counter-reset` nem de
   pseudo-elemento montado à mão.

   ⚠ SEM RECUO E COM AS LINHAS ALINHADAS, e as duas coisas juntas obrigaram a
   abandonar o marcador do navegador. Pedido do Lucca em 13/09/2026, em duas
   etapas no mesmo dia: primeiro "tire o recuo", depois "as linhas de baixo
   niveladas com a primeira".

   O marcador nativo só sabe dois lugares, e nenhum dos dois serve:

     `outside` .. o número é desenhado FORA da caixa de conteúdo, então ou o
                  bloco inteiro entra (recuo, que ele tirou) ou o número sai
                  pela margem do painel e some.
     `inside` ... o número entra na primeira linha, e as seguintes voltam para a
                  coluna zero — texto desalinhado, que é o que ele acabou de
                  pedir para corrigir.

   Com `counter` e um `::before` absoluto os dois ficam de pé: o NÚMERO fica em
   zero, encostado na mesma coluna do título do campo, e o TEXTO começa em
   1.5em em todas as linhas. O recuo some do bloco e sobra só no texto, que é
   onde ele serve para alguma coisa.

   ⚠ O `padding` VAI NO `li`, E NÃO NA LISTA. É o `li` que é o bloco de
   posicionamento do `::before`; na lista, o número nasceria junto do texto em
   vez de à esquerda dele.

   (⚠ ESTEVE AQUI, por algumas horas do mesmo dia, um `.tz-passos__titulo` em
   sobrelinha: caixa alta entreletrada, em tinta cheia. Saiu junto com o título
   "Passo a passo para baixar a carta", que o Lucca mandou tirar — quem diz de
   que documento se trata é o rótulo do campo, logo acima. A regra da
   `.tz-passos__nota`, com fio e corpo menor, saiu pelo mesmo pedido: a nota do
   135 deixou de ser rodapé e virou o último passo, montada como `<li>` em
   `roteiro`.) */
.tz-teste .tz-pergunta[data-etapa="documento"] .tz-passos {
  counter-reset: passo;
  list-style: none;
  padding-left: 0;
}
.tz-teste .tz-pergunta[data-etapa="documento"] .tz-passos li {
  counter-increment: passo;
  margin-bottom: .9em;
  padding-left: 1.5em;
  position: relative;
}
/* ⚠ O PESO E DO NÚMERO, E NÃO DO BLOCO. O subtítulo inteiro roda em
   `font-weight: 300`, que é leve para um algarismo pequeno: ele fica fino
   demais ao lado do texto que ele numera. `400` é o peso normal da fonte, e um
   passo acima basta — `500` já começa a competir com o rótulo do campo. */
.tz-teste .tz-pergunta[data-etapa="documento"] .tz-passos li:before {
  color: #2354e8;
  font-weight: 400;
  left: 0;
  position: absolute;
  top: 0;
}
/* O número da sequência, e a bolinha de quem não é sequência: a lista dos
   "Documentos diversos" reúne coisas independentes, e numerá-las diria uma
   ordem que não existe. Mesma geometria nas duas. */
.tz-teste .tz-pergunta[data-etapa="documento"] ol.tz-passos li:before { content: counter(passo) "."; }
.tz-teste .tz-pergunta[data-etapa="documento"] ul.tz-passos li:before { content: "‚2"; }

/* ---------- as três larguras, e elas são as da página de filtros ----------
   Pedido do Lucca em 15/09/2026, com as duas capturas de kirkland.com/insights
   na mão (uma em 767px, outra em 768). Lá a tela de filtros tem três
   comportamentos de largura, e nenhum deles é o mesmo:

     .keyword-search--grid .searchbox   duas buscas, empilhadas até 767px e
                                        metade da linha de 768 para cima
     .select-dropdown--large            o TYPE, linha inteira sempre
     .select-dropdown--medium           PRACTICE e DATE RANGE, empilhados até
                                        549px e metade da linha de 550 para cima

   O 550 não é número escolhido por nós: é o `@media (min-width: 34.375em)` do
   bundle da referência, onde `.advanced-search__filters` vira flex e cada
   `.select-dropdown` passa a `calc(50% - 1em)`. Quem diz qual campo veste qual
   molde é o `data-medida` de cada `.tz-campo` (ver a nota no molde do `jef`).

   ⚠ ERA UMA GRADE DE DUAS COLUNAS, E VIROU FLEX, e a troca não é de gosto. Com
   `grid-template-columns` de duas colunas fixas, um campo de linha inteira
   precisa de `grid-column: 1 / -1` e um campo que só se divide em 768 precisa
   de outra regra ainda — três comportamentos numa grade de duas colunas viram
   três exceções. A referência resolve isso com `flex-wrap` e uma largura por
   campo, que é o que está aqui: cada um declara a sua e a linha se forma
   sozinha.

   ⚠ A CONTA DA LARGURA TEM O VÃO DENTRO, e ele tem nome: `--tz-vao` é METADE
   do vão entre dois campos, posto em cada lado de cada campo e devolvido pela
   margem negativa da caixa. A largura de cada campo desconta os dois lados.

   ⚠ O VÃO ENCOLHEU DE 1rem PARA .625rem EM 27/09/2026, e ele passou a vir da
   OUTRA referência. A grade e as quebras continuam sendo as dos dropdowns
   Practice/Level/Office (`.select-dropdown`, com `.5em` de cada lado); o vão é
   o dos dois campos de busca da página de insights, onde
   `.keyword-search--grid` põe `margin: 0 -.3125em` na caixa e `padding: 0
   .3125em` em cada campo — 5px de cada lado, 10px entre dois vizinhos, contra
   os 16px de antes. Pedido do Lucca: "diminua a distância entre os inputs de
   texto que estiverem na mesma linha, na mesma distância que os inputs de
   search do outro zip".

   ⚠ E CONTINUA EM `rem`, pela razão de sempre: o corpo do painel é 20px no
   desktop e 16px no celular, e uma conta em `em` daria vãos diferentes em cada
   largura onde a referência quer o mesmo.

   ⚠ O VÃO DE BAIXO NÃO ESTÁ AQUI: é o `margin-bottom: 1.375rem` que todo
   `.tz-campo` desta folha já tem, e que a referência também põe no
   `.select-dropdown`. Duas linhas de campos ficam à mesma distância que dois
   campos empilhados.

   ⚠ E O `align-items` É `flex-start`, herdeiro do `align-items: start` da
   grade: sem ele os campos de uma linha esticariam até a altura do mais alto da
   linha, e a caixa do relato faria o dropdown ao lado dela virar um retângulo
   de 200px. */
.tz-teste .tz-pergunta--ativa.tz-pergunta--lado-a-lado {
  --tz-vao: .3125rem;
  /* ⚠ SÃO DOIS VÃOS NESTA TELA, e cada um vem de uma referência. O de cima é o
     dos campos de busca (`.keyword-search--grid`, 5px de cada lado); este é o
     dos dropdowns (`.select-dropdown`, `.5em` de cada lado), e é o que separa
     Practice de Date Range na folha de advogados. O Lucca pediu os dois: o
     estreito entre e-mail, telefone e CPF, e o largo entre benefício e status e
     entre estado civil e profissão. */
  --tz-vao-select: .5rem;
  align-items: flex-start;
  display: flex;
  /* ⚠ `row` ESCRITO À MÃO, E SEM ISSO NADA DISTO FUNCIONA. A `.tz-pergunta--ativa`
     já é `display: flex` na tiezzi.css, e lá ela é uma COLUNA — é assim que uma
     pergunta empilha título, campo e dica. Herdando a direção, o `flex-wrap`
     passa a quebrar em COLUNAS: cada campo ganhava a largura certa e mesmo
     assim descia para a linha seguinte. Levou uma medição para achar, porque a
     largura estava certa na tela inteira e só a posição estava errada. */
  flex-direction: row;
  flex-wrap: wrap;
  /* ⚠ ELE EXISTE PARA O VÃO LARGO CABER SEM DESALINHAR A LINHA, e a conta é
     esta: com `margin: 0 v` em cada campo e `margin: 0 -v` na caixa, o vão entre
     dois vizinhos é `2v` e as pontas ficam rentes. Para um vão MAIOR que `2v`
     sem mexer nas margens (que são o que mantém as pontas rentes), o campo
     encolhe, e a sobra que isso deixa na linha é justamente o que falta no meio
     — `space-between` a põe lá.

     ⚠ E ELE NÃO MEXE EM MAIS NADA, porque nas outras linhas não há sobra: os
     campos de busca e os de linha inteira somam exatamente a largura da caixa,
     e `space-between` com sobra zero não distribui nada. Uma linha com um campo
     só (o CPF entre 550 e 991) fica no começo, que é o que `space-between` faz
     com um item. */
  justify-content: space-between;
  margin: 0 calc(-1 * var(--tz-vao));
  /* ⚠ `auto`, E SEM ISSO A MARGEM NEGATIVA NÃO ALARGA NADA. A `.tz-pergunta`
     nasce com `width: 100%` na tiezzi.css. Com a largura presa em 100%, o
     `margin: 0 -.5rem` só DESLOCA a caixa 8px para a esquerda em vez de
     esticá-la 8px para cada lado: a coluna dos campos continuava com a largura
     do painel, mas 8px fora do lugar, e o vão de 8px que sobrava do lado
     direito virava desalinho contra o Avançar e o cabeçalho. Em `auto`, a
     caixa de flex ocupa a largura disponível e as duas margens negativas fazem
     o que deviam. */
  width: auto;
}
.tz-teste .tz-pergunta--ativa.tz-pergunta--lado-a-lado > .tz-campo {
  margin-left: var(--tz-vao);
  margin-right: var(--tz-vao);
  /* ⚠ `flex: none` PARA A LARGURA MANDAR. O `.tz-campo` do relato carrega
     `flex: 1 1 auto` da tiezzi.css (lá ele é item de uma coluna, e cresce em
     ALTURA); aqui o eixo é o outro, e aquele `grow` o faria esticar sobre o
     vizinho. */
  flex: none;
  width: calc(100% - 2 * var(--tz-vao));
}
/* O TYPE: linha inteira em qualquer largura. */
.tz-teste .tz-pergunta--lado-a-lado > .tz-campo[data-medida="grande"] {
  width: calc(100% - 2 * var(--tz-vao));
}

/* PRACTICE e DATE RANGE, e o que não declarou medida (benefício e status). */
@media screen and (min-width: 550px) {
  .tz-teste .tz-pergunta--ativa.tz-pergunta--lado-a-lado > .tz-campo {
    width: calc(50% - 2 * var(--tz-vao));
  }
  .tz-teste .tz-pergunta--lado-a-lado > .tz-campo[data-medida="grande"] {
    width: calc(100% - 2 * var(--tz-vao));
  }

  /* ---------- os pares de select usam o vão do Practice/Date Range ----------
     Pedido do Lucca em 27/09/2026: "a distância entre os inputs Benefício e
     Status deve ficar como a distância entre os inputs Practice e Date Range.
     Isso se aplica também aos inputs Estado Civil e Profissão".

     São 16px, contra os 10px dos campos de busca. A conta da largura sai da
     geometria da linha: para dois campos com vão `G` rentes às duas pontas de
     uma caixa `C`, cada um mede `(C - G) / 2`; com a caixa esticada em `v` para
     cada lado, isso é `50% - v - G/2`. Aqui `G/2` é o próprio
     `--tz-vao-select`, que é o `.5em` da referência.

     ⚠ QUEM ENTREGA A DIFERENÇA É O `space-between` da caixa, não a margem. A
     margem continua sendo `v` dos dois lados em TODO campo, e é ela que mantém
     a primeira e a última coluna rentes ao painel; mexer nela para alargar o
     meio afastaria as pontas junto. Ver a nota lá em cima. */
  .tz-teste .tz-pergunta--ativa.tz-pergunta--lado-a-lado
    > .tz-campo:not([data-medida="busca"]):not([data-medida="grande"]) {
    width: calc(50% - var(--tz-vao) - var(--tz-vao-select));
  }
}

/* ---------- e-mail, telefone e CPF: a grade dos três dropdowns ----------
   Pedido do Lucca em 27/09/2026: "quero que os 3 inputs (email, telefone e cpf)
   fiquem lado a lado, como na referência do zip os inputs Practice, Level e
   Office, e quero que eles tenham a mesma responsividade: em uma determinada
   largura o do cpf vai para baixo".

   A referência (`.select-dropdown`, na folha da página de advogados) quebra
   assim, e é isto que está reproduzido abaixo:

     até 549      sem regra de largura: um por linha
     de 550       calc(50% - vão)        dois por linha, e o TERCEIRO DESCE
     de 992       calc(33.33333% - vão)  os três na mesma linha

   ⚠ O `max-width: 767px` QUE HAVIA AQUI FOI EMBORA, e com ele a regra de
   15/09/2026 que mandava os campos de busca se dividirem só em 768. Aquele 768
   vinha da OUTRA referência (`.keyword-search--grid`, que é uma grade de DOIS),
   e ela não descreve mais o que estes três campos fazem. Quem manda agora é a
   grade de três, que quebra em 550.

   ⚠ E SÃO SÓ OS TRÊS. O Estado é `grande` e ocupa a linha inteira; estado civil
   e profissão são `media` e ficam a 50%. Levar todo mundo para 33,33% faria a
   primeira tela — benefício e status, que são dois — sobrar um terço de linha
   vazio. */
@media screen and (min-width: 992px) {
  .tz-teste .tz-pergunta--lado-a-lado > .tz-campo[data-medida="busca"] {
    width: calc(33.33333% - 2 * var(--tz-vao));
  }
}

/* ---------- o e-mail e o CPF vestem o "Search by keyword" ----------
   Pedido do Lucca em 15/09/2026: "os inputs de e-mail e cpf ficam como os
   inputs Search by..., mas sem as lupinhas do lado direito".

   A receita da referência, junta das três regras que a compõem:

     .searchbox__input                      line-height 1.1
                                            padding 1.125em … 1.125em
     @48em .keyword-search .searchbox__input  padding 1.0416666667em … 1.25em
     @48em .keyword-search--grid …__input     font-size 1.375em
     @62em .keyword-search--grid …__input     font-size 1.5em

   ⚠ O RECUO DA DIREITA ERA DA LUPA, e por isso ele não veio. Na referência o
   campo reserva 2.375em (2.5em no desktop) do lado direito para o botão de
   busca posicionado por cima; sem botão, aquele espaço seria um buraco. Os dois
   lados ficam iguais, que é o que a referência faria sem o ícone.

   ⚠ AS MEDIDAS SÃO EM `rem`, E NÃO EM `em`. O corpo do painel é 20px no desktop
   e 16px no celular (está escrito na tiezzi.css); `1.375em` daria 27,5px onde a
   referência quer 22. O `rem` prende a conta ao mesmo 16 de lá.

   ⚠ A SOMBRA DO FOCO NÃO VOLTOU, e é decisão antiga: a referência pinta
   `box-shadow: 0 6px 20px 5px rgba(0,0,0,.15)` no foco, e o Lucca mandou tirar
   isso dos campos em 02/09/2026 ("num formulário de nove telas piscava a cada
   campo"). Se ele quiser a sombra de volta agora, é uma linha.

   ⚠ E A CAIXA DO "OUTRO" FICA DE FORA. Ela mede como um anexo desde 12/09/2026
   (ver mais acima nesta folha), e aquele bloco vem DEPOIS deste no arquivo — é
   a ordem que o mantém vencendo, já que os dois seletores pesam igual. */
.tz-teste .tz-campo[data-medida="busca"] input.tz-campo__controle {
  font-size: 1rem;
  height: auto;
  /* ⚠ A ENTRELINHA NÃO ESTÁ AQUI, e a da referência era `1.1`. Ela vem da regra
     da barrinha de escrita, mais acima nesta folha, e lá ela é `1.2` desde
     15/09/2026 — `1.1` cortava o "g" e o "@" deste campo, porque a caixa de
     conteúdo da Rubik não cabe nela. O porquê está escrito lá.

     ⚠ E O RESPIRO PAGA A DIFERENÇA, para a caixa não crescer junto. A altura
     daqui é `2 × respiro + entrelinha`, e a entrelinha subiu 0,1em; tirando
     0,05em de cada ponta, a caixa continua medindo o que mede na referência —
     55,6px até 767, 72 de 768 e 78,4 de 992. Conferido com régua. */
  padding: calc(1.125em - .05em) 1.125em;
}
@media screen and (min-width: 768px) {
  .tz-teste .tz-campo[data-medida="busca"] input.tz-campo__controle {
    font-size: 1.375rem;
    padding: calc(1.0416666667em - .05em) 1.25em;
  }
}
@media screen and (min-width: 992px) {
  .tz-teste .tz-campo[data-medida="busca"] input.tz-campo__controle {
    font-size: 1.5rem;
  }
}

/* ---------- as duas buscas montam na borda do cabeçalho ----------
   Pedido do Lucca em 15/09/2026: "os dois inputs e-mail e cpf devem ficar na
   metade da borda inferior do cabeçalho, exatamente como a referência".

   Na referência a regra é essa mesma, e vale nas duas larguras — o que muda é
   só o mecanismo:

     até 767px   .search-controls .keyword-search .searchbox
                 { transform: translateY(-50%) }
     de 768px    transform: none, e no lugar dele
                 .keyword-search--grid { margin-top: -2.24em; margin-bottom: 2.24em }
     de 992px    os mesmos, em 2.42em

   ⚠ E OS DOIS NÚMEROS SÃO A METADE DA CAIXA. A busca mede 72px de 768 para
   cima, e 2.24em dá 35,84; mede 78,4px de 992, e 2.42em dá 38,7. Ou seja: a
   referência escreve à mão, em dois lugares, a mesma metade que o `-50%` já
   calcula sozinho. Aqui fica só o `-50%`, que não tem número para envelhecer
   quando o corpo do campo mudar.

   ⚠ ISTO JÁ FOI TENTADO E DESFEITO EM 11/09/2026 (ver a lápide "o levante do
   primeiro campo foi desfeito", mais acima). Daquela vez valia para o PRIMEIRO
   CAMPO DE TODA TELA e custava três remendos: painel sem respiro de cima,
   rótulo em `position: absolute` e branco — para não entrar na altura que o
   `-50%` mede — e fundo branco no campo.

   Hoje sobrou UM. O rótulo não existe mais nestes dois campos: desde que eles
   vestiram o "Search by keyword", o nome do campo é o `placeholder`, que é
   exatamente o que torna o `-50%` simples na referência. A altura do
   `.tz-campo` passou a ser a altura da caixa, e a metade dela é a metade certa.
   O fundo branco já vem da `tiezzi.css`.

   ⚠ O RESPIRO DE CIMA DO PAINEL SAI, E SÓ NESTA TELA. Ele é `1.71875rem` no
   celular e `2.42rem` de 768 — e não por acaso: aqueles valores são a metade da
   caixa da referência, copiados em 11/09/2026 como distância do cabeçalho ao
   primeiro campo. Somados ao `-50%` dariam uma caixa alta demais, flutuando
   acima da borda em vez de sentada nela.

   ⚠ E A MARGEM DE BAIXO TAMBÉM, pelo mesmo motivo: o `transform` não mexe no
   layout, então a metade que a caixa sobe já vira vão embaixo dela. Com os
   `1.375rem` de sempre somados, o ESTADO desceria 49,5px em vez dos 27,5 da
   referência. Empilhadas, a de baixo recupera o vão em `margin-top` — que é o
   `.searchbox + .searchbox { margin-top: 1.375em }` de lá.

   ⚠ `z-index` PORQUE METADE DA CAIXA CAI SOBRE A FAIXA ESCURA. É o mesmo
   `z-index: 3` que a referência põe no `.searchbox`. */
.tz-teste:has(.tz-pergunta--ativa > .tz-campo[data-medida="busca"]) {
  padding-top: 0;
}
.tz-teste .tz-pergunta--ativa > .tz-campo[data-medida="busca"] {
  margin-bottom: 0;
  position: relative;
  transform: translateY(-50%);
  z-index: 3;
}
/* ⚠ O VÃO DE CIMA SÓ VALE ENQUANTO ELES ESTÃO EMPILHADOS, e o número da
   largura mudou em 27/09/2026 junto com a grade. Ele era `max-width: 767px`,
   herdado de quando os campos de busca só se dividiam em 768; com a grade de
   três, eles passam a emparelhar em 550, e o `margin-top` continuava empurrando
   o segundo e o terceiro para baixo DENTRO DA MESMA LINHA. Na tela ficavam três
   campos em degrau, 22px abaixo um do outro, e a medição dizia "três linhas"
   onde havia duas.

   É a mesma regra da referência, que zera o `margin-top` na largura em que os
   campos passam a dividir a linha (`@48em .keyword-search .searchbox+.searchbox
   { margin-top: 0 }`); o que muda aqui é só qual é essa largura. */
@media screen and (max-width: 549px) {
  .tz-teste .tz-pergunta--ativa > .tz-campo[data-medida="busca"]
    + .tz-campo[data-medida="busca"] {
    margin-top: 1.375rem;
  }
}

/* ⚠ E ENTRE 550 E 991 QUEM PRECISA DO VÃO É O TERCEIRO, porque é ele que
   quebra a linha. Nessa faixa os campos medem 50%: os dois primeiros dividem a
   primeira linha e o terceiro desce sozinho para a segunda — e descia COLADO,
   porque `margin-bottom: 0` (que existe para o `-50%` fazer o vão de baixo) vale
   para todos. Medido: 0px entre a linha do e-mail e a do CPF, contra os 22 de
   todo o resto da folha.

   ⚠ `row-gap` NA CAIXA NÃO SERVE, e foi a primeira ideia. Ele vale entre TODAS
   as linhas de flex, e as outras já têm o vão na `margin-bottom` de cada campo:
   o espaço entre o estado e o estado civil viraria 44px, e o do CPF ao estado,
   49.

   ⚠ ISTO CONTA QUE SÃO TRÊS. Com quatro campos de busca, o quarto também
   quebraria e precisaria da mesma regra; com dois, esta regra não casa com
   ninguém e não faz mal. Quem acrescentar um campo `busca` a esta tela lê aqui. */
@media screen and (min-width: 550px) and (max-width: 991px) {
  .tz-teste .tz-pergunta--ativa > .tz-campo[data-medida="busca"]
    + .tz-campo[data-medida="busca"]
    + .tz-campo[data-medida="busca"] {
    margin-top: 1.375rem;
  }
}

/* ---------- o PRACTICE e o DATE RANGE são menores que o TYPE ----------
   O resto desta folha copia o `select-dropdown--large`, que é o TYPE, porque
   foi ele que o Lucca nomeou em 11/09/2026. Em 15/09/2026 ele nomeou os outros
   dois para o estado civil e a profissão, e eles são `--medium`:

     .select-dropdown__label        font-size .875em · padding 1.0714285714em
     @48em .select-dropdown__label  font-size 1em    · padding-left 1.375em

   São 46,7px de altura contra os 54,9px do TYPE no celular. A diferença é da
   referência, e quem a pediu campo a campo foi ele.

   ⚠ A ALTURA NÃO PRECISA SER ESCRITA AQUI. Ela sai sozinha do corpo e do
   respiro, porque o gatilho é um `<span>` e obedece ao `line-height` — foi o
   `<input>` que obrigou a altura explícita nos campos de uma linha. */
.tz-teste .tz-campo[data-medida="media"] .tz-select__gatilho {
  font-size: .875rem;
  padding-bottom: 1.0714285714em;
  padding-top: 1.0714285714em;
}
/* ⚠ E A SETA DELES NÃO É A DO TYPE. Pedido do Lucca em 27/09/2026: "a setinha
   dos inputs Estado Civil e Profissão deve ser exatamente como as setinhas de
   Practice e Date Range".

   Na referência são duas regras diferentes, e a folha inteira copiava só a
   segunda:

     .select-dropdown__label:before          font-size: inherit   ← Practice, Date Range
     --large .select-dropdown__label:before  font-size: .875em    ← TYPE

   O `.875em` está no bloco da seta, mais acima, e vale para todos os selects
   desta tela porque o TYPE foi o primeiro a ser copiado. Nos médios ele
   multiplicava um corpo que já era menor, e errava nas duas faixas: no celular
   a seta saía com 12,25px onde a referência a desenha com 14, e no desktop com
   14 onde ela desenha 16. O `right`, que é em `em` da própria seta, encolhia
   junto (19,25px em vez de 22) e a encostava na borda. `inherit` devolve os
   dois de uma vez, e os dois foram medidos depois: 16px e 22px, iguais aos do
   Practice e do Date Range na referência. */
.tz-teste .tz-campo[data-medida="media"] .tz-select__seta {
  font-size: inherit;
}
@media screen and (min-width: 768px) {
  .tz-teste .tz-campo[data-medida="media"] .tz-select__gatilho {
    font-size: 1rem;
    padding-bottom: 1.0714285714em;
    padding-top: 1.0714285714em;
  }
}

/* ---------- a caixa do relato, com o título dentro e fixo ----------
   Pedido do Lucca em 15/09/2026: "não quero que 'Conte o que aconteceu:' saia
   ao clicar no input, mas que fique".

     +-------------------------------------------+
     | Conte o que aconteceu:                    |   #3f3f3f, fica
     | sempre trabalhei na roça e faz um ano...  |   #7c7c7c, some ao escrever
     +-------------------------------------------+

   ⚠ ISTO APAGA UMA ENGENHOCA, E É O PONTO. Por algumas horas do mesmo dia o
   título e o exemplo eram um `<span>` sobreposto à caixa, com o `<textarea>`
   vazio por baixo — a única forma de ter duas cores num `placeholder`, que só
   tem uma. Aquilo exigia repetir fonte, corpo, entrelinha, `padding` e uma
   borda transparente de 1px para a primeira letra digitada não pular de lugar.
   Com o título FIXO, nada disso é preciso: ele vira um elemento de verdade
   dentro da caixa e o exemplo volta a ser o `placeholder` do campo. Duas cores,
   dois donos, nada para manter alinhado.

   ⚠ A BORDA MUDA DE DONO, como já acontecia na `.tz-campo__caixa`: quem a
   desenha é a moldura, e o campo fica sem borda, sem fundo e sem respiro. Sem
   isso seriam duas bordas, uma dentro da outra.

   ⚠ O TÍTULO NÃO É `.tz-campo__rotulo`, e a troca de classe é do script: o
   rótulo de cima é cinza, 13px e com entreletra, que é o tom de etiqueta. Aqui
   ele é a frase que a pessoa lê antes de escrever, no mesmo corpo do texto que
   ela vai escrever.

   ⚠ E `cursor: text` PORQUE A MOLDURA PARECE O CAMPO. Clicar na borda ou na
   linha do título é clicar no que, para quem olha, é a caixa de escrita. */
.tz-teste .tz-campo__escrita {
  background: #fff;
  border: 1px solid #2354e8;
  cursor: text;
  display: block;
  /* ⚠ AS QUATRO DISTÂNCIAS ATÉ O TEXTO SÃO IGUAIS, e é por isso que o respiro
     NÃO é (pedido do Lucca, 15/09/2026: "a distância entre o texto e a borda
     esquerda igual à distância do texto para a borda superior, e a mesma coisa
     para a inferior").

     Com `padding: 1.125em` nos quatro lados, o que se media era 19px de lado e
     22 em cima. A culpa é do `line-height: 1.6`: ele põe o texto no MEIO de uma
     caixa de linha mais alta que ele, e o que sobra de cada lado (3,45px em 16px
     de corpo) entra na conta de cima e na de baixo, mas não na dos lados.

     Descontar esse resto em cima e embaixo é o que iguala as quatro. Quem o
     mede é `medirCaixaDoRelato`, em scripts/restore-interactions.js, e publica
     em `--tz-meia-entrelinha`; sem ele o `var()` cai no zero e a caixa volta ao
     respiro cru, que é o pior caso aceitável.

     ⚠ O RESPIRO MORA NUMA VARIÁVEL porque ele é lido em dois lugares: aqui e no
     `top`/`left` do título, que precisa nascer exatamente onde a primeira linha
     do campo nasce. Dois números soltos se separariam no primeiro ajuste. */
  /* ⚠ 20px DE RESPIRO, contados de DENTRO da borda até o texto (Lucca,
     15/09/2026). Ele esteve em 19 por alguns minutos, quando eu li o pedido
     como "20px da borda de fora" — a borda mede 1px, e a conta é outra. O
     número que vale é este: o vão que se vê.

     ⚠ E É PIXEL, E NÃO `em`. Era `1.125em`, que acompanhava o corpo do painel;
     o pedido é um número fixo, e um valor relativo daria 20px só enquanto o
     painel estivesse em 16. */
  --tz-respiro: 20px;
  padding: calc(var(--tz-respiro) - var(--tz-meia-entrelinha, 0px)) var(--tz-respiro);
  /* O canto de onde o título pende. */
  position: relative;
  transition: border-color .35s cubic-bezier(.86, 0, .07, 1);
}
.tz-teste .tz-campo__escrita:has(.tz-campo__controle:focus) { border-color: #1c1c1c; }

/* ---------- e o título divide a primeira linha com o texto ----------
   Pedido do Lucca em 15/09/2026: "não quero que tenha quebra de linha no
   placeholder". O título teve linha só dele por algumas horas do mesmo dia, e
   agora o texto continua na linha dele:

     Conte o que aconteceu: sempre trabalhei na roça e faz um ano que não
     consigo mais por causa da coluna. Tenho 62 anos e nunca fui no INSS.

   ⚠ NÃO DÁ PARA FAZER ISSO COM O TÍTULO NO FLUXO. Texto de `<textarea>` não
   contorna float nem elemento irmão: o que está dentro do campo é uma caixa
   fechada. Então o título sai do fluxo, encosta no canto da caixa, e quem abre
   espaço para ele é um `text-indent` no campo — medido por
   `medirCaixaDoRelato`, em scripts/restore-interactions.js.

   ⚠ `text-indent` VALE SÓ PARA A PRIMEIRA LINHA, e é essa a sorte deste
   desenho: é exatamente a linha onde o título está. A segunda em diante volta à
   margem e passa por baixo dele sem desviar de nada.

   ⚠ A POSIÇÃO REPETE O `padding` DA MOLDURA, e tem de repetir: é ali que a
   primeira linha do campo começa. Um valor diferente e o título deixa de estar
   na linha do texto — fica acima ou abaixo dela.

   ⚠ E A ENTRELINHA É A DO CAMPO, e não a do título. O `1.6` do textarea centra
   os glifos numa caixa de linha alta; com `1.1` aqui, o título ficaria alguns
   pixels acima do exemplo que começa ao lado dele. */
.tz-teste .tz-campo__titulo {
  color: #3f3f3f;
  left: var(--tz-respiro);
  position: absolute;
  /* O mesmo cálculo do `padding-top`, e tem de ser o mesmo: é aqui que a
     primeira linha do campo começa, e o título divide essa linha com ela. */
  top: calc(var(--tz-respiro) - var(--tz-meia-entrelinha, 0px));
  /* O espaço entre o título e o texto, escrito como respiro para entrar
     sozinho na largura que o script mede. */
  padding-right: .3em;
  /* ⚠ `inherit`, E NÃO `1rem`. O título e o texto que vem embaixo dele são a
     mesma linha de leitura, e o texto é `font-size: 1em` — o corpo do painel,
     que é 16px aqui e 20px na produção. Preso em `rem`, o título ficaria 4px
     menor que o exemplo no dia em que esta tela herdasse o painel de 20. */
  font-size: inherit;
  /* ⚠ UM PASSO ACIMA DO TEXTO (Lucca, 15/09/2026: "aumente em 1 a espessura").
     O campo escreve em 300, que é o peso do formulário inteiro; o título vai a
     400, que é o degrau seguinte da escala. É o segundo sinal de que ele não é
     o exemplo — o primeiro é a cor, um tom mais escura.

     ⚠ E 400 É UMA FONTE DE VERDADE, não um negrito fabricado. A página declara
     Rubik em 300, 400, 500 e 700, e a de 400 já vem carregada; pedir um peso
     que não existe faria o navegador engrossar o desenho da de 300 por conta
     própria, que é o que deixa texto com aparência de borrado. */
  font-weight: 400;
  line-height: 1.6;
}
/* Rolou, o título some junto com a linha dele. Ver o ouvinte de `scroll` em
   `tituloNoExemplo`. */
.tz-teste .tz-campo__escrita--rolada .tz-campo__titulo { visibility: hidden; }
.tz-teste .tz-campo__escrita textarea.tz-campo__controle {
  border: 0;
  padding: 0;
  /* ⚠ SEM ALÇA DE ESTICAR (Lucca, 15/09/2026). A `tiezzi.css` dá
     `resize: vertical` a todo textarea, e com a caixa travada aquela alça
     prometia o que a caixa não faz mais — e ainda deixava a moldura e o texto
     de tamanhos diferentes, porque quem esticava era só o campo de dentro. */
  resize: none;
}
.tz-teste .tz-campo__escrita textarea.tz-campo__controle::placeholder {
  color: #7c7c7c;
  opacity: 1;
}

/* ---------- o valor escolhido não empurra a caixa ----------
   O `.tz-select__gatilho` já é `overflow: hidden`, então o texto comprido nunca
   chegou a vazar; o que faltava era o corte AVISAR que cortou. Com as duas
   colunas de 15/09/2026, "Pedi e estou sem resposta há mais de 45 dias" não
   cabe numa coluna estreita, e sem as reticências ele terminava no meio de uma
   palavra, encostado na seta.

   ⚠ A LISTA ABERTA CONTINUA INTEIRA. Quem desenha as opções é o `<select>`
   nativo, que o sistema operacional pinta sem ler esta folha: as reticências
   valem para a caixa fechada, e não para a escolha. */
.tz-teste .tz-select__valor {
  overflow: hidden;
  text-overflow: ellipsis;
}

/* (⚠ ESTIVERAM AQUI as medidas do campo com `data-sob`, o que descia dentro de
   outro: a caixa media como a do "Outro" da profissão. Em 15/09/2026 saíram os
   dois campos que o usavam, a data e o nascimento, e a regra saiu com eles. A
   caixa do "Outro" continua com a medida dela, pelo `data-campo`.) */