/* ==========================================================================
   COMPONENTE — uc-chip (o item) + uc-chips (o conjunto)
   O componente mais renderizado do site: 1.165 ocorrencias em 10 telas
   medidas, uma ordem de grandeza acima do segundo colocado (160). Se ele sai
   5% errado, o site inteiro parece 5% errado.

   DOIS PREFIXOS, UM ARQUIVO, e por que os dois estao no inventario:
   a Regra 5 casa prefixo por IGUALDADE EXATA e le `.uc-chips` como um prefixo
   diferente de `.uc-chip`. Nao e' burocracia: um chip nunca aparece sozinho --
   o que a tela usa e' o CONJUNTO, e e' o conjunto que busca dado e portanto
   tem os cinco estados. Sao duas coisas com papeis diferentes, e por isso
   duas entradas.

   ==========================================================================
   1. ELEMENTO: E' LINK, NAO BOTAO -- decidido LENDO o JavaScript do tema
      antigo, nao por preferencia
   ==========================================================================
   `assets/js/banco.js` do tema `universo-concursos`, lido em 04/09/2026:

     - o arquivo inteiro comeca com "Melhoria progressiva. Cada ficha e um
       link de verdade: sem este arquivo, clicar recarrega a pagina e filtra
       do jeito antigo";
     - ele sai cedo se nao houver `fetch`/`history.pushState` -- e sem ele o
       `href` real (`/questoes/?banca=22`) e' o que filtra;
     - no clique ele faz `ev.preventDefault()` e ALTERNA classe + atributo,
       sem sair da pagina;
     - MAS deixa passar `metaKey`, `ctrlKey`, `shiftKey` e botao != 0, ou
       seja: abrir em nova aba, copiar endereco e clique do meio continuam
       funcionando de proposito;
     - `pintaLinks()` reescreve o `href` a cada recorte, e o href da ficha
       LIGADA e' a URL SEM aquele termo -- "clicar na ficha ligada desliga"
       tambem e' navegacao, so' que para outro recorte.

   Ou seja: o chip NAVEGA (sem JS) e ALTERNA (com JS), e as duas coisas sao a
   mesma acao -- "ir para este recorte". Isso e' um LINK.

   `aria-pressed` esta em 1.165 elementos e e' ARIA INVALIDO ali: e' atributo
   de botao de alternancia, e num `<a>` o leitor de tela pode simplesmente
   ignora-lo -- o "filtro ativo" deixa de ser anunciado justamente para quem
   depende do anuncio. O proprio tema antigo ja sabia disso (o comentario esta
   em `inc/filtro.php`, com o parametro `aria` => 'pressed'|'current' pronto);
   ele nao pode trocar porque o `banco.js` ESCREVE `aria-pressed` no clique e
   aquele JS estava fora do alcance. Aqui nos escrevemos os dois lados.

   ENTAO: `aria-current` no ativo. Nao `aria-current="page"` -- `page` afirma
   "esta e' a pagina atual dentro de um conjunto de paginas", e na capa o
   recorte NAO muda a URL (o `banco.js` so' faz `replaceState` quando nao ha
   `[data-uc-ir]`). `aria-current="true"` diz o que e' verdade nas duas telas:
   "este e' o item atual do conjunto". Um contrato, duas superficies.

   Trocar para `<button>` foi considerado e RECUSADO: mataria o funcionamento
   sem JS (723 dos 749 chips de /questoes/ ja chegam escondidos -- ver item 3),
   mataria abrir-em-nova-aba que o JS protege de proposito, e tiraria do
   Google 749 links de faceta por pagina.

   ==========================================================================
   2. ESTADO: ONDE MORA CADA UM, E POR QUE NAO E' `data-uc-estado` NO CHIP
   ==========================================================================
   A tarefa A2 fixou a convencao em `rotulo.css`: VARIANTE (propriedade
   permanente) -> classe modificadora; ESTADO (transitorio) -> `data-uc-estado`.
   O chip a REFINA em um ponto, e o motivo e' que aqui existem DOIS niveis ao
   mesmo tempo:

     `data-uc-estado` fica reservado a SUPERFICIE, `.uc-chips` -- e' ela que
     busca dado e por isso e' ela que tem os cinco estados obrigatorios.

   O item dentro dela nao tem cinco estados. Ele tem:
     - ATIVO -> `[aria-current]`, e SO' isso. Um `data-uc-estado="ativo"` em
       paralelo criaria duas fontes da verdade para a mesma coisa, que podem
       divergir -- e a que o leitor de tela usa e' a ARIA. Estilo que sai do
       proprio atributo de acessibilidade nao consegue mentir sobre ele.
       (Especificidade de seletor de atributo = de classe: nao cria escada.)
     - CONTAGEM ZERO -> `.uc-chip--zero`, modificador.
     - EXPANSOR e ESQUELETO -> `--mais` e `--osso`, modificadores.

   Repetir `data-uc-estado` nos dois niveis poria dois vocabularios com o
   mesmo nome dentro do mesmo componente -- que e' exatamente o defeito que
   `uc-sec`/`uc-sec2` tem no tema antigo, e o mais caro de desfazer depois.
   E, em numero: `data-uc-estado` no conjunto custa 1 atributo por grupo;
   no item custaria 1.165.

   NADA de `is-*`: sem prefixo, a Regra 6 barra -- e po-lo em
   `classes_externas` seria mentira (aquela lista e' do que o WordPress
   OBRIGA). O modificador tambem amarra o estado ao componente: `--zero` nao
   pode ser aplicado por engano num cartao.

   ==========================================================================
   3. OS 723 CHIPS ESCONDIDOS: `<details>`, e o defeito que isso conserta
   ==========================================================================
   MEDIDO: 723 dos 749 chips de /questoes/ chegam com `is-extra` + `hidden`, e
   quem os revela e' um `<button data-uc-mais>` que SO' funciona com
   JavaScript. Sem JS aquilo nao e' "escondido": e' inalcancavel -- 723 links
   no HTML que ninguem consegue abrir, e o controle continua na tela
   prometendo que da'.

   Aqui o expansor e' `<details>/<summary>`: abre sem uma linha de JavaScript,
   ja anuncia expandido/recolhido sozinho, e e' focavel por construcao. Nao e'
   invencao -- o proprio tema antigo ja usa esse padrao em `inc/taxonomia.php`
   e `inc/cpt.php`; o que faltou foi usa-lo tambem no filtro.

   CONSEQUENCIA DE PROJETO, e ela e' deliberada: NAO EXISTE `.uc-chip--extra`.
   "Oculto" deixou de ser propriedade do ITEM e virou posicao no CONJUNTO
   (dentro ou fora do `<details>`). Um modificador que so' servisse para
   esconder seria um segundo mecanismo de esconder convivendo com o nativo, e
   o segundo e' o que quebra sem JS.

   ESCOPO: QUANTOS chips uma tela despeja e' decisao da tela (Fase 4), nao
   deste componente. O que este componente garante e' nao OBRIGAR o despejo:
   o `<details>` funciona com 5 ou com 723 la' dentro, e a tela pode entregar
   so' os visiveis e buscar o resto quando o `<details>` abrir -- o estado
   `carregando` deste mesmo arquivo existe para esse caso.

   ==========================================================================
   4. RITMO
   ==========================================================================
     4px  (--sp-1)  dentro do proprio chip nao e' usado: rotulo e contagem sao
                    separados por FIO, e o fio pede 8px de cada lado para ler
                    como divisor e nao como glifo colado
     8px  (--sp-2)  entre chips do mesmo grupo, e entre rotulo e fio
    12px  (--sp-3)  respiro horizontal interno do chip
    16px  (--sp-4)  do conjunto para o painel de aviso (vazio/erro): sao
                    coisas diferentes, nao itens da mesma lista
   ========================================================================== */

/* --------------------------------------------------------------------------
   O CONJUNTO
   -------------------------------------------------------------------------- */

.uc-chips{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:var(--sp-2);
  /* Item de flex herda min-width:auto e nao deixa o conteudo encolher --
     e' a mesma armadilha que o `rotulo` pagou no <dt>. Sem isto, um conjunto
     dentro de uma coluna estreita empurra a coluna em vez de quebrar. */
  min-width:0;
}

/* --------------------------------------------------------------------------
   O ITEM
   -------------------------------------------------------------------------- */

.uc-chip{
  display:inline-flex;
  align-items:center;
  gap:var(--sp-2);
  max-width:100%;
  min-width:0;
  padding:var(--sp-2) var(--sp-3);
  border:var(--uc-borda) solid var(--uc-rule-forte);
  border-radius:var(--uc-r-2);
  background:var(--uc-field);
  color:var(--uc-ink-2);
  font-family:var(--uc-sans);
  font-size:var(--uc-s--1);
  font-weight:var(--uc-w-realce);
  letter-spacing:var(--uc-tr-rotulo);
  line-height:var(--uc-lh-controle);
  text-decoration:none;
  /* `anywhere`, e nao o `break-word` que a 01-base.css poe no body.
     MEDIDO no `rotulo` em 04/09/2026 e vale igual aqui: `break-word` quebra a
     palavra na LINHA mas NAO reduz o tamanho min-content do item -- entao um
     nome de banca de 43 caracteres sem espaco continua empurrando a coluna
     inteira. `anywhere` reduz o min-content, que e' o que o caso de borda
     exige. So' age quando falta espaco: com largura sobrando, "FUNDATEC"
     nunca e' partido. */
  overflow-wrap:anywhere;
  transition:background-color var(--uc-dur-1) var(--uc-ease),
             border-color var(--uc-dur-1) var(--uc-ease),
             color var(--uc-dur-1) var(--uc-ease),
             transform var(--uc-dur-1) var(--uc-ease);
}

/* A CONTAGEM — e o fio, que e' a assinatura deste sistema.
   Rotulo e numero sao dois CAMPOS do mesmo dado, nao uma frase; um fio de
   1,5px entre eles faz uma parede de chips ler como INSTRUMENTO (indice,
   painel de medida) e nao como fileira de pilulas de framework. E' a peca de
   personalidade do componente, e ela custa uma borda -- nao uma cor nova, nao
   uma segunda superficie, nao um gradiente.
   Mono + tabular-nums porque numero que dança de largura entre um recorte e
   outro faz a parede inteira tremer a cada clique. */
.uc-chip__n{
  flex:none;
  padding-left:var(--sp-2);
  border-left:var(--uc-borda) solid var(--uc-rule);
  color:var(--uc-ink-3);
  font-family:var(--uc-mono);
  font-weight:var(--uc-w-ler);
  font-variant-numeric:tabular-nums;
  white-space:nowrap;
}

/* --------------------------------------------------------------------------
   ESTADO: ATIVO / SELECIONADO
   -------------------------------------------------------------------------- */

/* COR NAO E' O UNICO SINAL, e aqui sao tres, dois deles nao-cromaticos:
     1. o preenchimento (cor);
     2. o X desenhado, que aparece SO' no ativo -- e ele nao diz apenas
        "escolhido", diz o que o clique FAZ: o href do chip ligado e' a URL
        SEM este filtro. Marca de "certo" mentiria sobre a acao;
     3. `aria-current`, que e' anunciado como tal por leitor de tela.
   O X muda a largura do chip quando liga. E' aceito e nao disfarcado:
   reservar 20px em todos os 749 chips para evitar isso custaria mais do que
   o proprio deslocamento -- e o mesmo clique ja recalcula TODAS as contagens
   cruzadas, entao a parede reflui de qualquer jeito.
   O acento aparece aqui e so' aqui neste componente. Numa tela sem filtro
   escolhido, o chip contribui com ZERO uso do acento; cada uso a mais e' uma
   escolha que a pessoa fez, nao decoracao que o tema despejou. */
.uc-chip[aria-current]{
  border-color:var(--uc-acao);
  background:var(--uc-acao);
  color:var(--uc-acao-ink);
}
.uc-chip[aria-current] .uc-chip__n{
  border-left-color:var(--uc-acao-ink-2);
  color:var(--uc-acao-ink-2);
}

.uc-chip__x{
  flex:none;
  width:12px;
  height:12px;
  color:var(--uc-acao-ink-2);
}

/* --------------------------------------------------------------------------
   ESTADO: CONTAGEM ZERO
   -------------------------------------------------------------------------- */

/* NAO E' `disabled`, E A DECISAO E' DELIBERADA.
   O pedido chamava esta variante de "desabilitado (filtro que daria zero
   resultado)". Ela nao foi entregue como desabilitada, por dois motivos
   medidos:

   1. SEM JavaScript o href do chip zerado leva a um recorte REAL que devolve
      zero -- ou seja, ao estado VAZIO, que a tela tem de ter de qualquer
      forma. Link para uma pagina honesta nao e' controle quebrado, e marca-lo
      `aria-disabled` seria mentira: ele opera.
   2. Desabilitar de verdade tiraria a opcao da varredura de quem navega por
      teclado -- a pessoa deixaria de saber que aquela banca existe. Sumir com
      ele seria pior ainda: a lista mudaria embaixo do dedo a cada toque.

   O sinal nao-cromatico e' o proprio numero, que le `0`, mais o texto so' de
   leitor de tela que acompanha o chip. A cor apenas ACOMPANHA.
   MEDIDO: --uc-ink-3 sobre --uc-paper-2 da 4,72:1, acima do piso de 4,5:1 --
   "menos disputa de atencao" nao pode virar "ilegivel".
   Quando um chip de fato NAO for destino (nao ha para onde ir), o elemento
   certo e' `<span>`, nao link desabilitado: esta mesma classe desenha o
   `<span>` igual, e o ELEMENTO carrega a verdade. */
.uc-chip--zero{
  border-color:var(--uc-rule);
  background:var(--uc-paper-2);
  color:var(--uc-ink-3);
}

/* --------------------------------------------------------------------------
   ESTADO: PONTEIRO E TECLADO
   -------------------------------------------------------------------------- */

.uc-chip:hover{
  border-color:var(--uc-ink-3);
  background:var(--uc-paper-2);
  color:var(--uc-ink);
}
.uc-chip[aria-current]:hover{
  border-color:var(--uc-acao-forte);
  background:var(--uc-acao-forte);
  color:var(--uc-acao-ink);
}
.uc-chip--zero:hover{
  border-color:var(--uc-rule-forte);
  background:var(--uc-paper-3);
  color:var(--uc-ink-2);
}

/* PRESSIONADO: 1px para baixo, e nada mais.
   E' a micro-interacao que o craft/ trata como sinal de autoria ("a button
   press that moves 2px") -- e e' literalmente a linha que motivou a Regra 10:
   ate hoje `transform` nao passava por regra nenhuma, e um `translateY(13px)`
   entraria calado no componente mais renderizado do site. O valor vem de
   --uc-pressao (00-tokens.css), nao de literal.
   Sem `scale()` junto (o tema antigo usava `scale(.97)` no botao): reduzir um
   controle de 13px de texto borra a fonte durante a transicao.
   Movimento reduzido ja e' respeitado globalmente pela 01-base.css. */
.uc-chip:active{
  transform:translateY(var(--uc-pressao));
}

/* O foco vem da 01-base.css (`:focus-visible` com --uc-foco-largura/-offset).
   Nao ha sobrescrita aqui de proposito: `outline` acompanha o `border-radius`
   do elemento em todos os navegadores atuais, entao o anel ja segue o raio de
   12px do chip; e o recuo de 2px poe o anel sobre o PAPEL, nunca sobre o
   preenchimento -- por isso ele continua visivel tambem no chip ativo, que e'
   navy sobre navy. Redeclarar aqui criaria um segundo lugar para o anel
   mudar. */

/* --------------------------------------------------------------------------
   VARIANTE: O EXPANSOR "MAIS"
   -------------------------------------------------------------------------- */

/* Borda tracejada: e' o sinal NAO-CROMATICO de que este nao e' um filtro --
   nao acrescenta recorte, so' revela o que ja estava. Nao usa o acento de
   proposito: numa tela com cinco grupos, cinco expansores em cor de marca
   competiriam com os proprios filtros. */
.uc-chips__mais{
  min-width:0;
}
.uc-chips__mais[open]{
  /* Aberto, o `<details>` toma a linha inteira e os chips revelados quebram
     em grade propria em vez de espremer numa coluna. Padrao ja provado no
     tema antigo (`.uc-mais[open]{flex-basis:100%}`). */
  flex-basis:100%;
}

.uc-chip--mais{
  border-style:dashed;
  background:var(--uc-paper);
  color:var(--uc-ink-2);
  cursor:pointer;
  /* O triangulo nativo do <summary> sai: a seta desenhada abaixo diz a mesma
     coisa dentro do sistema de icones do tema. Sao dois seletores porque o
     WebKit so' obedece ao pseudo-elemento proprio. */
  list-style:none;
}
.uc-chip--mais::-webkit-details-marker{
  display:none;
}
.uc-chip--mais:hover{
  border-color:var(--uc-ink-3);
  background:var(--uc-paper-2);
  color:var(--uc-ink);
}

.uc-chip__seta{
  flex:none;
  width:12px;
  height:12px;
  color:var(--uc-ink-3);
  transition:transform var(--uc-dur-2) var(--uc-ease);
}
/* Angulo, nao distancia: a Regra 10 olha esta linha e nao tem o que julgar --
   `deg` nunca foi medida da grade de 4px. */
.uc-chips__mais[open] .uc-chip__seta{
  transform:rotate(180deg);
}

/* O ROTULO TAMBEM TEM DE MUDAR, NAO SO' A SETA.
   Defeito relatado pelo dono em 05/09: abrir o expansor deixava escrito
   "mais 12 bancas" com as 12 JA na tela. O <summary> tem de continuar
   visivel -- e ele que fecha de novo -- mas o texto estava dizendo uma coisa
   falsa, e anunciando o oposto do que o proximo clique faz.
   E' o mesmo criterio que esta peca ja aplica no `x` do chip ligado: o
   rotulo descreve A ACAO, nunca um estado congelado.
   CSS puro, sem JavaScript: <details> ja carrega o estado, e a promessa
   desta peca e' funcionar com o JS desligado.
   Marcacao sem os dois rotulos continua funcionando como antes -- o texto
   solto aparece e nada e' escondido. */
.uc-chip__fechar{
  display:none;
}
.uc-chips__mais[open] .uc-chip__abrir{
  display:none;
}
.uc-chips__mais[open] .uc-chip__fechar{
  display:inline;
}

/* O conjunto revelado respira do expansor e nao se cola nele. */
.uc-chips--dobra{
  width:100%;
  margin-top:var(--sp-2);
}

/* --------------------------------------------------------------------------
   ESTADO DO CONJUNTO: CARREGANDO
   -------------------------------------------------------------------------- */

/* Duas coisas diferentes chamam-se "carregando" aqui, e elas pedem desenhos
   diferentes:

   (a) NADA SE SABE AINDA -> esqueleto. O osso tem a forma e a ALTURA exata de
       um chip de verdade (calc(1em * --uc-lh-controle) reproduz a caixa de
       texto), para a linha nao pular quando o dado chegar.
   (b) OS CHIPS JA ESTAO NA TELA E SO' AS CONTAGENS ESTAO SENDO REFEITAS ->
       `aria-busy` no conjunto. E' o que de fato acontece neste site: cada
       clique refaz a contagem CRUZADA de todos os grupos. Os numeros ficam
       de lado enquanto sao numeros VELHOS -- mostrar contagem antiga como se
       fosse a nova e' o jeito mais rapido de a ferramenta parecer quebrada.
       O `aria-busy` nao e' enfeite: e' o que diz ao leitor de tela para nao
       anunciar a regiao pela metade. */

.uc-chip--osso{
  /* 96px e' a largura base; as duas regras abaixo alternam. Esqueleto com
     todos os blocos do mesmo tamanho nao parece dado chegando, parece grade
     de placeholder.
     A UNIDADE E' `ch`, E ELA E' O ARGUMENTO. Este comentario ja dizia, na
     tarefa C, que os tres valores "imitam o comprimento de um NOME DE BANCA
     (FGV, CESGRANRIO, FUNDATEC)" e que "largura de osso nao e' espaco -- e'
     um numero escolhido para parecer texto". Estava certo, e estava escrito
     em px: 96/128/72, tres numeros que so' o comentario explicava.
     A Regra 11 (05/09/2026) passou a julgar width, height, min-* e max-*, e a
     saida NAO foi excecao nem token -- foi escrever o valor na unidade do que
     ele significa. `ch` e' a largura do algarismo da propria fonte: 13ch e'
     "um chip com um nome de umas oito letras". O comentario virou verificavel,
     e a regra so' aceita porque toda unidade que nao e' px/rem ja e' escape
     legitimo da grade -- que e' o corte da R10 herdado inteiro. */
  width:13ch;
  border-color:transparent;
  background:var(--uc-esqueleto);
}
/* Reproduz a caixa de texto de um chip de verdade -- e' o que garante que a
   linha nao pule quando o dado chegar no lugar do osso. */
.uc-chip--osso::before{
  content:"";
  display:block;
  height:calc(1em * var(--uc-lh-controle));
}
.uc-chip--osso:nth-child(3n+2){ width:18ch }
.uc-chip--osso:nth-child(3n+3){ width:10ch }

/* O brilho e' a PROMESSA ("espere, esta vindo") e so' o JavaScript pode
   cumpri-la; sem `data-uc-js` o osso fica parado, que e' o que ele
   honestamente e': espaco reservado. Mesma decisao de fundacao que o
   `rotulo` ja usa (assets/js/uc-tema.js).
   O keyframe tem nome PROPRIO do componente, e nao um compartilhado: nome de
   `@keyframes` e' global no documento e NENHUMA regra da guarda o governa --
   consumir aqui um keyframe declarado em `rotulo.css` seria uma dependencia
   entre arquivos que o lint nao ve e que quebra calada no dia em que aquele
   componente nao for enfileirado. E' o mesmo defeito que a Regra 9 existe
   para pegar em `var()`, um nivel acima. */
html[data-uc-js] .uc-chip--osso{
  background-image:linear-gradient(
    90deg,
    var(--uc-esqueleto) 0%,
    var(--uc-esqueleto-brilho) 50%,
    var(--uc-esqueleto) 100%
  );
  background-size:300% 100%;
  animation:uc-chip-brilho var(--uc-esqueleto-dur) var(--uc-ease) infinite;
}

@keyframes uc-chip-brilho{
  from{ background-position:150% 0 }
  to{ background-position:-150% 0 }
}

.uc-chips[aria-busy="true"] .uc-chip__n{
  opacity:var(--uc-desabilitado-op);
}

/* --------------------------------------------------------------------------
   ESTADO DO CONJUNTO: VAZIO E ERRO
   -------------------------------------------------------------------------- */

/* ⛔ O PAINEL SAIU DAQUI em 05/09/2026 (tarefa E) e nao foi copiado para
   lugar nenhum: virou o componente `uc-aviso`, em
   `assets/css/componentes/aviso.css`.
     .uc-chips__aviso   -> .uc-aviso
     .uc-chips__icone   -> .uc-aviso__icone
     .uc-chips__corpo   -> .uc-aviso__corpo
     .uc-chips__titulo  -> .uc-aviso__titulo
     .uc-chips__nota    -> .uc-aviso__nota
   Motivo, medido: a grade de cartoes da tarefa E precisa do MESMO painel, e
   as tarefas F-I precisam dele mais sete vezes -- toda superficie com os
   cinco estados obrigatorios tem um vazio e um erro. Copiar as ~50 linhas
   seria repetir, com dono nenhum no plano para pagar depois, a divida que a
   tarefa C declarou (secao 13) e a tarefa D pagou.
   A SEVERIDADE continua vindo daqui, sem que este arquivo escreva uma linha:
   o `data-uc-estado` que a `.uc-chips` ja carrega e' o que o `aviso.css`
   consulta (`[data-uc-estado="erro"] .uc-aviso__icone`). Um seletor,
   nenhum hospedeiro nomeado.
   NAO FICOU NADA AQUI. */

/* ⛔ `.uc-chips__acao` SAIU DAQUI em 05/09/2026 (tarefa D) e nao foi copiado
   para lugar nenhum: virou `uc-botao--texto`.
   A secao 13 do relatorio da tarefa C declarou esta divida no dia em que ela
   nasceu -- `chip.css` e `rotulo.css` desenhavam, cada um, um controle de
   acao, porque o botao era a tarefa D e o chip a C. As ~10 linhas que estavam
   aqui e as ~17 que estavam no `rotulo.css` eram DUAS SEVERIDADES do mesmo
   controle, e agora sao duas variantes de um dono so'.
   O motivo da forma continua o mesmo, e agora esta escrito num lugar so'
   (`botao.css`, variante --texto): painel que JA TEM moldura nao pede uma
   segunda moldura dentro.
   NAO FICOU NADA AQUI. A primeira versao desta troca punha
   `.uc-chips__corpo > .uc-botao{ justify-self:start }` -- para o botao nao
   esticar a largura toda da celula e o alvo de clique nao cobrir o painel
   inteiro. Medido no navegador, o mesmo esticamento acontecia em TODO
   hospedeiro de grade, inclusive no mostruario: nao era peculiaridade deste
   painel, era o comportamento padrao do componente. Virou default do proprio
   `uc-botao` (`justify-self:start`, com `--bloco` devolvendo o stretch), e a
   regra daqui saiu. Regra de hospedeiro que na verdade descreve o componente
   e' duplicacao esperando para divergir. */

/* --------------------------------------------------------------------------
   ALVO DE TOQUE
   -------------------------------------------------------------------------- */

/* SO' NO DEDO, e a regra e' do PONTEIRO e nao da largura da tela: forcar 44px
   no mouse incharia uma parede de 749 chips sem motivo.
   44x44 e' o compromisso de craft (WCAG 2.5.5, AAA); o piso legal e' 24x24
   (2.5.8, AA), que o chip ja cumpre no desktop com folga.
   `min-width` junto com `min-height` porque altura nao diz nada sobre o eixo
   X: uma sigla de duas letras ("SP", "TI") ficava com 30px de largura no tema
   antigo. `justify-content:center` so' tem efeito quando sobra espaco -- num
   chip cujo rotulo quebra em varias linhas o conteudo ja preenche a largura,
   entao o caso de borda nao fica centralizado por acidente. */
@media (pointer:coarse){
  .uc-chip{
    min-height:var(--uc-alvo-toque);
    min-width:var(--uc-alvo-toque);
    justify-content:center;
  }
}