/* ==========================================================================
   COMPONENTE — uc-tabbar
   A barra de navegacao do celular, fixa no pe da tela.

   ==========================================================================
   1. ELA E' A NAVEGACAO DO CELULAR — E ISSO E' UMA DECISAO, NAO UM ENFEITE
   ==========================================================================
   O publico deste produto e' estudante no celular. Abaixo de 900px esta barra
   NAO acompanha a navegacao do topo: ela SUBSTITUI (o porque medido esta em
   `topo.css` §2 -- o tema antigo mostrava as duas ao mesmo tempo, com os
   mesmos tres destinos, no visor onde o espaco custa mais caro).
   Ela renderiza em todas as telas do site, sempre com os mesmos itens.

   ==========================================================================
   2. ⛔ POR QUE UM ITEM ERA `<button>` — E POR QUE AGORA NAO HA NENHUM
   ==========================================================================
   No tema antigo a barra tem CINCO itens: quatro `<a>` e um `<button>`. O
   botao nao era descuido nem inconsistencia -- estava certo pela regra
   ("acao sem navegacao e' botao; navegacao e' link"): ele nao levava a lugar
   nenhum, abria um painel de busca (`.uc-busca-sheet`). E existia por um
   motivo escrito em inc/site.php:

     "a busca do masthead (uc_topbar()) some abaixo de 900px sem deixar
      substituto -- achado ALTA da auditoria de UX"

   Ou seja: o quinto item era o CONSERTO de um defeito de outro componente.
   Aqui o defeito foi corrigido na origem -- a busca passou a existir em todas
   as larguras, dentro do topo, num formulario so' (topo.css §3). Sem o
   defeito, o conserto nao tem funcao, e a barra volta a ser o que ela e':
   quatro destinos, quatro `<a>`, `aria-current` no atual.

   ⚠️ O QUE ISSO CUSTA, dito antes que alguem descubra usando: no celular a
   busca deixa de estar ao alcance do polegar e passa a estar no topo da
   pagina. E' a troca de "dois formularios, um por breakpoint" por "um
   formulario, uma rolagem de distancia". Se a medicao de uso disser que a
   busca no polegar valia mais, o caminho de volta e' um item de disclosure
   (`<details>`/`<summary>`) AQUI, com o formulario mudando de casa -- nunca
   dois formularios de novo.

   ==========================================================================
   3. O ITEM ATIVO NAO SE DISTINGUE SO' POR COR — SAO TRES SINAIS
   ==========================================================================
     cor      --uc-ink-3 -> --uc-acao
     peso     550 -> 650
     forma    o fio no topo do item ACENDE

   E o terceiro e' o detalhe que faz o vocabulario fechar: o fio nao e' um
   quarto elemento desenhado por cima. E' O MESMO FIO que separa a pagina do
   chrome (`border-top` da barra), coberto na largura da aba ativa por um
   segmento em `--uc-acao`. Uma linha so', que muda de cor onde voce esta.
   A escada de fios que a tarefa F fixou continua com a mesma forma
   (`--uc-borda`) e o mesmo criterio de cor que o `uc-topo` declarou:
   fronteira e' `--uc-rule`, posicao e' acento.

   ⚠️ `--uc-acao` e nao `--uc-chrome-ativo`: esta barra e' CLARA, e
   `--uc-chrome-ativo` (#4E9BFF) sobre papel da 2,65:1, abaixo dos 3:1 que a
   WCAG 1.4.11 pede para elemento nao textual. `--uc-acao` da 11,4:1.
   Superficie diferente, mesmo papel, token diferente -- que e' exatamente o
   motivo de `--uc-foco` e `--uc-foco-chrome` existirem separados no :root.

   ==========================================================================
   4. ALVO DE TOQUE, NOS DOIS PISOS
   ==========================================================================
   `min-height:var(--uc-chrome-altura)` = 56px, acima dos 44 da WCAG 2.5.5 no
   dedo e MUITO acima dos 24x24 da 2.5.8 no mouse (que tambem vale aqui: um
   ponteiro fino numa janela estreita ve esta barra). A largura vem de
   `flex:1 1 0`, ou seja, a tela dividida pelo numero de itens -- com 4 itens
   num visor de 390px sao ~94px cada.
   Ela renderiza 160 vezes nas dez telas medidas: um erro de alvo aqui e' um
   erro em toda tela do site.

   ==========================================================================
   5. OS CINCO ESTADOS
   ==========================================================================
     preenchido   quatro itens, um deles com `aria-current="page"`.
     borda        rotulo que nao cabe, e visor de 320px. §6.
     vazio        ⛔ EXISTE, e nao e' uma barra vazia: se nao houver destino
                  nenhum (nenhum acervo publicado), a barra NAO RENDERIZA. Uma
                  barra fixa com zero itens ocuparia 56px do pe da tela para
                  nao oferecer nada -- e "esconder quando nao ha o que mostrar"
                  aqui e' o certo, ao contrario da `uc-secao`, que nao some
                  porque ela E' o assunto da pagina. Quem decide e' o PHP.
     erro         NAO EXISTE. A lista de destinos vem de contagem local
                  (`wp_count_posts`), nao de rede: nao ha pedido que possa
                  falhar. Se um dia vier de fora, o painel e' `uc-aviso`.
     carregando   NAO EXISTE, e pelo mesmo motivo do topo: a barra e' servida
                  no HTML, inteira, sem JavaScript nenhum. Nao ha espera para
                  desenhar.

   ==========================================================================
   6. ROTULO QUE NAO CABE — a decisao, com o custo escrito
   ==========================================================================
   `text-overflow:ellipsis` com `white-space:nowrap`: o rotulo corta na largura
   da aba em vez de quebrar em duas linhas (que mudaria a altura da barra) ou
   de estourar (que quebraria a grade das quatro).
   ⚠️ O CORTE E' SO' VISUAL: o texto continua inteiro no DOM, entao o NOME
   ACESSIVEL do link continua completo para leitor de tela. Medido com os
   rotulos reais em 390px: o mais longo ("Simulados") ocupa ~62px numa aba de
   ~94px, e nenhum corta hoje. A regra existe para o dia em que um rotulo
   crescer, e para a aba de 320px.

   ==========================================================================
   7. `--exemplar`: o unico modificador, e ele serve ao MOSTRUARIO
   ==========================================================================
   A barra e' `position:fixed` e `display:none` acima de 900px -- ou seja, no
   mostruario aberto no desktop ela seria invisivel, e no celular flutuaria por
   cima de tudo em vez de aparecer no lugar da peca. Sem uma saida, o
   mostruario precisaria escrever `.uc-mostruario__palco .uc-tabbar{...}`, que
   e' EXATAMENTE o acoplamento que a R16 passou a acusar.
   Entao a saida e' do convidado, que e' o dono: `--exemplar` desliga o fixo e
   liga o display. Ha precedente medido para uma declaracao de produto que
   serve a folha de exemplares -- `--uc-palco` e `--uc-palco-largo` vivem no
   :root pelo mesmo motivo (tarefa F). O que nao pode e' o hospedeiro decidir
   como o convidado aparece.
   ========================================================================== */

/* `bottom:0` e nao `bottom:var(--uc-ancora-h,0px)`: o tema antigo subia a
   barra pela altura da ancora do AdSense, publicada em tempo de execucao pelo
   site.js. Aqui esse token nao existe e consumi-lo sem declarar seria achado
   da R9 -- e a ancora esta configurada no TOPO na conta do AdSense. Quando a
   tarefa H trouxer o anuncio, este e' o gancho. */
.uc-tabbar{
  position:fixed;
  right:0;
  bottom:0;
  left:0;
  z-index:var(--uc-camada-tabbar);
  display:none;
  border-top:var(--uc-borda) solid var(--uc-rule);
  background:var(--uc-field);
  /* O tapete do iPhone: sem isto a ultima linha de rotulo fica embaixo do
     indicador de home. `env()` nao e' `var()` e nao passa pela R8. */
  padding-bottom:env(safe-area-inset-bottom);
}

.uc-tabbar__item{
  position:relative;
  display:flex;
  flex:1 1 0;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:var(--sp-1);
  min-width:0;
  min-height:var(--uc-chrome-altura);
  padding:var(--sp-2) var(--sp-1);
  color:var(--uc-ink-3);
  font-family:var(--uc-sans);
  font-size:var(--uc-s--1);
  font-weight:var(--uc-w-realce);
  line-height:var(--uc-lh-controle);
  text-align:center;
  text-decoration:none;
  /* Sem isto o Android pinta um retangulo cinza por cima da aba inteira no
     toque -- e' o detalhe que faz parecer pagina, nao aplicativo. */
  -webkit-tap-highlight-color:transparent;
  transition:color var(--uc-dur-1) var(--uc-ease);
}

.uc-tabbar__icone{
  display:block;
  flex:none;
  width:24px;
  height:24px;
}

.uc-tabbar__rotulo{
  display:block;
  max-width:100%;
  overflow:hidden;
  white-space:nowrap;
  text-overflow:ellipsis;
}

.uc-tabbar__item:hover{
  color:var(--uc-acao);
}

.uc-tabbar__item:active{
  background:var(--uc-paper-2);
}

/* O anel de foco para dentro: a aba encosta na borda da barra e um anel para
   fora seria cortado pela beirada da tela. Largura e cor continuam as do
   sistema -- so' o recuo inverte. */
.uc-tabbar__item:focus-visible{
  outline-offset:calc(var(--uc-foco-offset) * -1);
}

.uc-tabbar__item[aria-current="page"]{
  color:var(--uc-acao);
  font-weight:var(--uc-w-anunciar);
}

/* O fio da barra ACENDE na largura da aba atual: `top` negativo de uma borda
   poe o segmento exatamente em cima do `border-top` da barra, em vez de somar
   uma segunda linha embaixo dele. Uma linha, duas cores, dois significados --
   fronteira em `--uc-rule`, posicao em `--uc-acao`. */
.uc-tabbar__item[aria-current="page"]::before{
  content:"";
  position:absolute;
  top:calc(var(--uc-borda) * -1);
  right:0;
  left:0;
  height:var(--uc-borda);
  background:var(--uc-acao);
}

/* O exemplar do mostruario: sai do fixo e aparece em qualquer largura. Ver §7.
   Vem DEPOIS da regra base de proposito -- `position` precisa vencer o `fixed`
   por ordem, ja que a especificidade e' a mesma. */
.uc-tabbar--exemplar{
  position:static;
  display:flex;
}

@media (max-width:900px){
  .uc-tabbar{
    display:flex;
  }

  /* O chao. Sem isto o rodape do site termina EMBAIXO da barra fixa e as
     ultimas linhas ficam inalcancaveis.
     ⚠️ Este e' o unico seletor de ELEMENTO deste componente, e ele mira
     `body` de proposito: quem reserva o chao tem de ser quem ocupa o teto, e
     nao ha outro dono possivel. A R16 nao o julga (o alvo nao e' componente),
     e o limite esta nomeado no cabecalho dela. */
  body{
    padding-bottom:calc(var(--uc-chrome-altura) + env(safe-area-inset-bottom));
  }
}