/* ==========================================================================
   COMPONENTE — uc-topo
   A barra do topo: identidade, secoes, busca e a acao principal.

   ==========================================================================
   1. ⛔ O NUMERO QUE MANDA NESTE DESENHO NAO E' DA BARRA — E' DO ANUNCIO
   ==========================================================================
   Medido em 05/09/2026 no site de hoje, anonimo, visor de 390x844, /questoes/:

     header.uc-top      91,6px
     div.uc-ad-topo    443,4px   (o <ins> do AdSense veio `data-ad-status="filled"`)
     ------------------------------------------------------------------
     antes da primeira linha de conteudo:  535px  =  63% da primeira tela

   O bloco de anuncio abaixo do cabecalho e' decisao em aberto do dono -- ele
   pediu para tirar e depois voltou atras ("deixa como esta, vou avaliar
   melhor"). Entao ele NAO SAI, e este chrome tem de ser desenhado com ele no
   lugar. Consequencia direta: cada pixel do topo disputa a primeira tela com
   443px que ja estao vendidos, e por isso duas decisoes deste arquivo:

     (a) A BARRA NAO E' STICKY. O tema antigo tambem nao e' (bancada.css:60
         escreve "o cabecalho (.uc-top), que nao e sticky"), e manter assim nao
         e' inercia: no celular quem carrega a navegacao permanente e' a
         `uc-tabbar`, que ja e' fixa e fica no alcance do polegar; grudar o
         topo tambem seria pagar duas vezes pelo mesmo servico, em cima da tela
         mais escassa do produto. No desktop nao ha tabbar, mas tambem nao ha
         escassez: a barra rola embora e o rodape repete a navegacao inteira.
         ⚠️ ISTO RESPONDE A PENDENCIA 2 DA TAREFA F: como a barra nao gruda,
         `scroll-margin-top` continua sem dono e sem necessidade -- as quatro
         secoes com `id` nao tem barra nenhuma para se esconder atras.
     (b) A BARRA CABE EM UMA LINHA NO CELULAR. Medido depois: 56px contra os
         91,6px de hoje -- 35,6px devolvidos ao conteudo, por remocao, nao por
         aperto (§2).

   ==========================================================================
   2. ⛔ A NAVEGACAO APARECIA DUAS VEZES NA MESMA TELA — MEDIDO E CORRIGIDO
   ==========================================================================
   Abaixo de 900px o tema antigo mostra as DUAS navegacoes ao mesmo tempo:
   `.uc-top__nav` vira um rolador horizontal dentro do cabecalho
   (bancada.css:494) e `.uc-tabbar` vira `display:flex` (bancada.css:1685).
   Medido no browser em 390px, na mesma tela, sem rolar:

     topo:    Questoes  Provas  Simulados          (3 links, 34,8px de altura)
     tabbar:  Inicio  Questoes  Provas  Simulados  Buscar

   Os mesmos tres destinos, duas vezes, no visor onde o espaco custa mais caro.
   E os do topo estao ABAIXO DO PISO DE TOQUE: 34,8px medidos, contra os 44 da
   WCAG 2.5.5 -- `theme.css:142` da 44px sob `(pointer:coarse)` a nove
   seletores e `.uc-top__nav a` nao e' nenhum deles.

   Aqui a divisao de trabalho e' declarada: ABAIXO DE 900px A TABBAR E' A
   NAVEGACAO, e o `<nav>` do topo sai de cena. Acima de 900px nao ha tabbar, e
   o `<nav>` do topo e' a navegacao. Uma superficie de navegacao por vez -- o
   que tambem para de anunciar dois `<nav>` para quem usa leitor de tela.

   ==========================================================================
   3. ⛔ A BUSCA: UM FORMULARIO SO', E ELE FUNCIONA SEM JAVASCRIPT
   ==========================================================================
   O tema antigo tem DOIS formularios de busca no HTML de toda pagina --
   `#uc-busca-topo` no cabecalho e `#uc-busca-mob` dentro de `.uc-busca-sheet`
   -- e uma media query decide qual aparece: `.uc-top__busca{display:none}`
   abaixo de 900px (bancada.css:491). Dois campos, dois ids, dois rotulos, a
   mesma funcao. E' a forma exata dos quatro forks que esta fase consolidou,
   so' que em HTML em vez de CSS.

   AQUI E' UM. Ele mora no topo, em todas as larguras, dentro de um
   `<details>`: o `<summary>` e' a lupa de 44x44 e o painel desce por cima do
   anuncio quando abre. `<details>` foi escolhido pelo precedente MEDIDO desta
   fase: a tarefa C trocou o `<button data-uc-mais>` do tema antigo por
   `<details>` justamente porque 723 dos 749 chips de /questoes/ ficavam
   inalcancaveis sem script. Um controle de chrome tem o mesmo dever.

   O QUE ISSO CUSTA, dito com todas as letras: no desktop a busca deixa de ser
   um campo sempre visivel e passa a ser um clique. Foi MEDIDO antes de
   decidir, e o campo inline no celular nao cabe: um visor de 390px da 336,2px
   uteis (375,2 menos dois gutters de 19,5), e so' a marca ja gasta 186. Um
   campo com largura util (>=128px), o vao e o controle de envio somam mais que
   o que sobra, e a barra volta para duas linhas -- que e' o defeito que a §1
   existe para corrigir. Entre "duas linhas sempre" e "um clique quando se quer
   buscar", o dono ja disse qual lado importa: "ninguem chega num site de
   concurso para buscar no site" (inc/topo.php).

   ==========================================================================
   4. OS CINCO ESTADOS — E ONDE ELES NAO EXISTEM, COM O MOTIVO
   ==========================================================================
   O chrome nao busca dado; a BUSCA aceita dado, e e' so' ela que tem estado:

     preenchido   `value` vem de `get_search_query()`: o que a pessoa procurou
                  continua no campo depois da navegacao. E' a regra de craft
                  "preserva o que ela digitou", e sem isso refinar uma busca
                  significa digitar tudo de novo.
     vazio        o campo com o `placeholder`. Nao e' erro nem defeito: e' o
                  estado de repouso.
     erro         O UNICO erro possivel aqui e' enviar vazio, e ele e' barrado
                  ANTES de virar navegacao, por `required`. A mensagem e' a da
                  plataforma, em portugues, no idioma do navegador. NAO ha
                  painel de erro proprio: um erro de RESULTADO ("nada
                  encontrado") pertence a pagina de resultado, e desenhar aqui
                  um segundo painel seria o `uc-aviso` copiado -- que e' a
                  divida que a tarefa E pagou.
     carregando   ⛔ NAO EXISTE, e a ausencia e' deliberada. Este formulario e'
                  uma navegacao de pagina inteira: quem mostra progresso e' o
                  navegador. Um esqueleto ou um giro aqui seria uma promessa
                  que este componente nao tem como cumprir -- e
                  craft/state-coverage.md e' explicito: "never leave a spinner
                  running indefinitely".
     borda       nome de marca longo, muitos itens de menu, 320px de largura.
                 Todos resolvidos por QUEBRA DE LINHA declarativa (§5), sem
                 media query e sem corte de texto.

   ==========================================================================
   5. A QUEBRA E' DECLARATIVA, NAO POR BREAKPOINT
   ==========================================================================
   `.uc-topo__in` e' um flex com `flex-wrap:wrap`, e cada bloco tem largura
   minima propria. Quando a soma nao cabe, o ultimo grupo desce -- em qualquer
   largura, com qualquer texto, sem ninguem ter escolhido um numero.
   MEDIDO no navegador, com o nome de marca real:
     390px   336,2 uteis   marca 186 + vao 24 + lupa 44 = 254   UMA linha, 56px
     320px   288,0 uteis   os mesmos 254                        UMA linha, 56px
   Com o nome de marca hostil (45 caracteres sem espaco) a barra quebra e
   CRESCE em altura, de proposito: duas linhas com tudo legivel e' melhor que
   uma linha com texto cortado. Quem decide a quebra e' a largura minima de
   cada bloco, nao um numero escolhido.
   Ha UMA media query neste arquivo, e ela e' a mesma do resto do chrome: 900px,
   o ponto onde a tabbar entra. ⚠️ 900 e' literal e NENHUMA regra da guarda o
   governa -- prelúdio de at-rule e' isento por construcao (R10/R11/R14). A
   disciplina aqui e' nao ter um SEGUNDO breakpoint: o tema antigo tem 900, 640
   e 400, e a diferenca entre eles nunca foi escrita em lugar nenhum.

   ==========================================================================
   6. O FIO, NA ESCALA DESTE COMPONENTE
   ==========================================================================
   A tarefa F fixou o vocabulario: uma linha de `--uc-borda` sobre `--uc-rule`,
   em cinco larguras, e a largura diz o tamanho do que ela separa (dois campos
   dentro de um chip; a base de um controle; acima de um bloco de divulgacao;
   entre corpo e rodape de um cartao; entre dois assuntos, atravessando a
   pagina).

   Este componente NAO gasta o fio como fronteira: quem separa o chrome do
   trabalho aqui e' a mudanca de superficie (a faixa escura), que e' um sinal
   mais forte e ja existe.

   ⚠️ ELE GASTA O FIO EM OUTRA FUNCAO, E ISSO ESTA DECLARADO: o tracinho sob a
   secao atual. E' a MENOR largura da escada -- atravessa UMA PALAVRA -- e e' o
   unico uso do fio neste sistema que nao e' fronteira entre territorios: e'
   marcacao de posicao. Entra assim mesmo, e o que separa os dois usos e' a
   COR, nao a forma: fronteira e' `--uc-rule` (cinza), posicao e'
   `--uc-chrome-ativo` (acento). Mesma forma, cor diferente, significado
   diferente -- em vez de inventar uma segunda forma para dizer "voce esta
   aqui", que seria o sexto vocabulario que a tarefa F pediu para nao criar.

   ==========================================================================
   7. O QUE ESTE ARQUIVO NAO FAZ
   ==========================================================================
   - Nao desenha a marca: e' `uc-marca`, e o unico contato entre os dois e' a
     heranca de `color` que `.uc-topo` declara em SI MESMO.
   - Nao desenha botao: a acao e o envio da busca sao `uc-botao` inteiros. A
     variante de chrome (`uc-botao--chrome`) vive em `botao.css`, no arquivo do
     dono -- escreve-la aqui seria a R16 do avesso (dono dividido).
   - Nao emite o bloco de anuncio. `uc-ad-topo` e' da tarefa H e nao se toca.
   - Nao gruda, nao mede `scroll-margin-top` e nao publica altura para
     ninguem: nao ha nada atras de que se esconder.
   ========================================================================== */

/* `position:relative` + camada existem por UM motivo so': o painel da busca
   desce POR CIMA do bloco de anuncio que vem logo abaixo. Sem os dois, o
   painel ficaria atras do <ins> do AdSense, que cria contexto proprio. */
.uc-topo{
  position:relative;
  z-index:var(--uc-camada-topo);
  background:var(--uc-chrome-bg);
  color:var(--uc-chrome-ink);
}

/* O anel de foco dentro do chrome. `--uc-acao` sobre `--uc-chrome-bg` da
   1,17:1 -- invisivel -- e por isso o :root ja traz `--uc-foco-chrome` com o
   papel escrito. Trocar so' a COR mantem largura e recuo do sistema.
   ⚠️ Este seletor mira `:focus-visible`, que nao e' componente: a R16 nao o
   julga, e o limite esta nomeado no cabecalho dela. E' de proposito -- o anel
   e' da plataforma, e o chrome so' declara em que superficie ele esta. */
.uc-topo :focus-visible{
  outline-color:var(--uc-foco-chrome);
}

/* `padding-block:var(--sp-1)`: 4px de folga em cima e embaixo de um alvo de
   44px da 52px, abaixo dos 56 do `min-height` -- ou seja, a altura da barra e'
   decidida pelo TOKEN e nao pela soma dos paddings. Quando a linha quebra
   (320px), os 4px passam a valer e as duas linhas ficam com respiro proprio. */
.uc-topo__in{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:var(--sp-2) var(--sp-5);
  max-width:var(--uc-maxw);
  min-height:var(--uc-chrome-altura);
  margin-inline:auto;
  padding-block:var(--sp-1);
  padding-inline:var(--uc-gutter);
}

.uc-topo__nav{
  min-width:0;
}

.uc-topo__lista{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:var(--sp-2) var(--sp-4);
  margin:0;
  padding:0;
  list-style:none;
}

/* `min-height` de 44px em vez de padding: o link e' o alvo, e o alvo tem de
   ser o elemento inteiro. Atende os dois pisos com uma declaracao (44 no dedo,
   e 44 > 24 no mouse). `white-space:nowrap` e' seguro AQUI e so' aqui porque
   quem quebra e' a LISTA (flex-wrap acima), nao o item -- a armadilha que a
   tarefa F mediu em theme.css:291 (nowrap estourando a pagina em 152px) era
   num item sem lista que quebrasse. */
.uc-topo__link{
  position:relative;
  display:inline-flex;
  align-items:center;
  min-height:var(--uc-alvo-toque);
  color:var(--uc-chrome-ink-2);
  font-size:var(--uc-s--1);
  font-weight:var(--uc-w-realce);
  line-height:var(--uc-lh-controle);
  text-decoration:none;
  white-space:nowrap;
  transition:color var(--uc-dur-1) var(--uc-ease);
}

.uc-topo__link:hover{
  color:var(--uc-chrome-ink);
}

/* TRES SINAIS, e nenhum deles sozinho: cor, peso e o tracinho. `aria-current`
   e' a fonte da verdade -- nao ha classe `is-atual` paralela, pelo mesmo
   motivo que o chip da tarefa C nao tem `data-uc-estado="ativo"`: estilo que
   sai do proprio atributo de acessibilidade nao consegue mentir sobre ele.
   ⚠️ E `aria-current="page"`, nunca `aria-pressed`: a tarefa C mediu 1.165
   elementos com `aria-pressed` num `<a>`, que e' ARIA invalido (é de botao de
   alternancia). Aqui e' link, e link que representa a pagina atual usa
   `aria-current`. */
.uc-topo__link[aria-current="page"]{
  color:var(--uc-chrome-ink);
  font-weight:var(--uc-w-anunciar);
}

/* O tracinho nasce da linha de base do texto e nao de uma borda no <li>: assim
   ele tem a largura da PALAVRA, e nao a do alvo de toque de 44px -- que
   deixaria o traco boiando longe do texto. `bottom:var(--sp-2)` o traz para
   junto da palavra dentro do alvo. */
.uc-topo__link[aria-current="page"]::after{
  content:"";
  position:absolute;
  right:0;
  bottom:var(--sp-2);
  left:0;
  height:var(--uc-borda);
  border-radius:var(--uc-r-max);
  background:var(--uc-chrome-ativo);
}

/* `margin-left:auto` empurra o grupo da direita; quando a barra quebra, o
   grupo inteiro desce junto em vez de partir a busca da acao. */
.uc-topo__dir{
  display:flex;
  align-items:center;
  gap:var(--sp-3);
  margin-left:auto;
}

.uc-topo__busca{
  flex:none;
}

/* O <summary>. `list-style:none` mais o pseudo-elemento do WebKit tiram o
   triangulo padrao -- o icone JA e' o affordance, e dois affordances no mesmo
   controle e' ruido. Continua sendo o controle nativo de divulgacao: recebe
   foco, abre com Enter e com Espaco, e anuncia estado expandido sem uma linha
   de `aria-*` escrita a mao (que foi como o tema antigo errou). */
.uc-topo__lupa{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:var(--uc-alvo-toque);
  height:var(--uc-alvo-toque);
  border-radius:var(--uc-r-2);
  color:var(--uc-chrome-ink-2);
  cursor:pointer;
  list-style:none;
  transition:color var(--uc-dur-1) var(--uc-ease);
}

.uc-topo__lupa::-webkit-details-marker{
  display:none;
}

.uc-topo__lupa:hover{
  color:var(--uc-chrome-ink);
}

/* Aberto: a cor muda, mas o sinal primario e' o PAINEL aparecendo -- posicao,
   nao cor. E o estado tambem esta na arvore de acessibilidade, dado pelo
   proprio <details>. */
.uc-topo__busca[open] .uc-topo__lupa{
  color:var(--uc-chrome-ink);
}

.uc-topo__icone{
  display:block;
  width:24px;
  height:24px;
}

/* O painel sangra de ponta a ponta da barra: a busca e' um assunto da PAGINA
   inteira, nao daquele canto. `top:100%` o encosta na base da barra sem
   nenhum numero -- se a barra quebrar em duas linhas, ele acompanha. */
/* ⛔ `bottom:0` E NAO `top:100%` — corrigido em 07/09/2026 MEDINDO, nao lendo.
   `top:100%` significa "100% da altura do cabecalho", e o cabecalho agora
   RESERVA a altura do painel (regra no fim desta folha). Resultado do laco:
   cresci o cabecalho em 68px, o H1 desceu 68px -- e o painel desceu junto,
   continuando a cobrir 36px do titulo. Medido: header 56->124, painel base
   192, H1 topo 156.
   `bottom:0` ancora o painel na BASE do cabecalho, ou seja, dentro da faixa
   reservada. E e' MAIS robusto que `top:100%` para o caso que aquele
   comentario queria proteger: se a barra quebrar em duas linhas, a barra
   cresce, a reserva continua embaixo, e o painel segue nela. */
.uc-topo__painel{
  position:absolute;
  bottom:0;
  right:0;
  left:0;
  padding-block:var(--sp-3);
  padding-inline:var(--uc-gutter);
  background:var(--uc-chrome-bg);
  box-shadow:var(--uc-elev-2);
}

.uc-topo__form{
  display:flex;
  gap:var(--sp-2);
  max-width:var(--uc-maxw);
  margin-inline:auto;
}

/* `min-width:0` e' o que permite o campo encolher dentro do flex; sem ele o
   `min-content` do input (que os navegadores calculam a partir do `size`)
   estoura o painel em 320px. */
.uc-topo__campo{
  flex:1 1 auto;
  min-width:0;
  min-height:var(--uc-alvo-toque);
  padding-inline:var(--sp-3);
  border:var(--uc-borda) solid var(--uc-rule);
  border-radius:var(--uc-r-2);
  background:var(--uc-field);
  color:var(--uc-ink);
  font-family:var(--uc-sans);
  font-size:var(--uc-s-0);
  line-height:var(--uc-lh-controle);
}

/* `opacity:1` porque o Firefox aplica opacidade propria ao placeholder e
   derrubaria o contraste que --uc-ink-3 foi escolhido para dar. */
.uc-topo__campo::placeholder{
  color:var(--uc-ink-3);
  opacity:1;
}

/* ⛔ A CLASSE DO HOSPEDEIRO NUM ELEMENTO DO CONVIDADO -- e ela carrega
   POSICAO, nunca PINTURA. E' a saida 3 das tres que a R16 documenta: quem
   decide se o botao aparece NESTA barra e' a barra; quem decide de que cor ele
   e' continua sendo `botao.css` (a variante `--chrome`). A regra que separa as
   duas nao esta na guarda ainda -- e' o proximo buraco, nomeado no cabecalho
   da R16. */
.uc-topo__acao{
  /* nada em largura de desktop: a acao aparece como o `uc-botao` a desenha. */
  flex:none;
}

@media (max-width:900px){
  /* A tabbar assumiu a navegacao (§2). O <nav> nao fica escondido "por
     enquanto": ele sai da arvore, para nao existirem dois `<nav>` anunciando
     os mesmos destinos. */
  .uc-topo__nav{
    display:none;
  }

  /* ⛔ E A ACAO SAI JUNTO -- MEDIDO, nao escolhido. Num visor de 390px sobram
     336,2px uteis (375,2 menos dois gutters de 19,5). A conta da barra com
     tudo: marca 186 + vao 24 + (lupa 44 + vao 12 + acao 99) = 365. Sao 29px a
     mais, e o resultado medido foi a barra quebrando em DUAS linhas, 104px --
     PIOR que os 91,6px do tema antigo, que e' justamente o defeito que este
     componente existe para corrigir.
     Com a acao fora: 186 + 24 + 44 = 254, e a barra fecha em UMA linha de
     56px. Em 320px sao 288 uteis contra 254 -- continua em uma linha.

     ⚠️ O QUE SE PERDE, dito antes que alguem descubra usando: no celular nao
     ha mais um botao azul dizendo "Resolver questoes". O que NAO se perde e' o
     destino: a aba "Questoes" da tabbar aponta para a mesma URL, esta visivel
     o tempo todo e fica ao alcance do polegar -- que e' melhor que um botao no
     topo da pagina, que rola embora. A regra fica coerente com a §2: ABAIXO DE
     900px A TABBAR CARREGA A NAVEGACAO E A ACAO PRINCIPAL; acima dela, quem
     carrega as duas e' esta barra. Se a medicao de uso disser que o botao
     valia mais que o nome da marca, o caminho de volta e' encolher a MARCA
     (que e' decisao de `marca.css`), nunca empilhar a barra de novo. */
  .uc-topo__acao{
    display:none;
  }
}

/* ⛔ QUANDO A BUSCA ABRE, O CABEÇALHO CRESCE — o painel não cobre a página.

   Até 07/09/2026 o painel era `position:absolute` e mais nada: flutuava POR
   CIMA do conteúdo e cortava o H1 do hero no meio da letra. Relato do dono:
   "quando clico na pesquisa, a parte de pesquisa abre por cima do hero".

   O que faz disso um DEFEITO e não uma escolha de projeto: o painel usa
   `background:var(--uc-chrome-bg)`, o MESMO fundo do cabeçalho. Ele promete
   "sou o cabeçalho crescendo" e se comporta como camada solta — e é essa
   contradição, mais do que a sobreposição em si, que faz a tela parecer
   quebrada.

   Reservar o espaço no cabeçalho resolve sem tocar no painel: ele continua
   `absolute`, que é o que lhe dá a sangria de ponta a ponta saindo da coluna
   de 218px onde o `<details>` mora. Com a reserva, não há mais nada embaixo
   para ser coberto.

   ⛔ A ALTURA É DERIVADA, NÃO CRAVADA. `--uc-alvo-toque` (44px, o alvo de
   toque da WCAG 2.5.5) é a altura do form, e `--sp-3` duas vezes é o
   `padding-block` do próprio painel. Medido no ar antes de escrever: 68px,
   constante em 502px e em 1536px de viewport — o form é `flex-wrap:nowrap` e
   nunca quebra em linha, então a altura não depende da largura. Se um dia o
   painel ganhar uma segunda linha, ESTA conta quebra: é o lugar de mexer. */
.uc-topo:has(.uc-topo__busca[open]){
  padding-bottom:calc(var(--uc-alvo-toque) + var(--sp-3) * 2);
}
