> + .uc-bq__placar (__n + .uc-lbl) 3 questoes, prova, simulado

.uc-faixa__d ( + .uc-lbl) 3 capa > + .uc-capa2__saldo (+) 1 capa

> + E os quatro carregam a MESMA intencao tipografica escrita com numeros diferentes -- a assinatura exata do par `.uc-lbl`/`.uc-eyebrow` que a tarefa D desfez ("a diferenca sao dois numeros que ninguem escolheu"), agora em quadruplicata: nome tamanho peso entreletra tabular .uc-bq__n 2.6rem 800 -.045em sim .uc-capa2__saldo strong 1.8rem 800 -.035em sim .uc-faixa__d strong 1.4rem 700 -.03em sim .uc-ledger__n 1.35rem (400) -.02em sim VEREDITO: UMA PECA, em duas entradas -- o ITEM (`.uc-contador`) e o CONJUNTO (`.uc-contadores`). Sao dois papeis, como em `.uc-chip`/`.uc-chips` (tarefa C) e `.uc-cartao`/`.uc-cartoes` (E): e' o conjunto que carrega `data-uc-estado` e que da' o vao entre os itens. Medido que os dois existem de verdade: 4 das 13 ocorrencias sao um contador SOZINHO (o placar do recorte, o saldo da capa), 9 estao em linha (ledger, faixa). ⚠️ ESTE NOME PASSOU POR UM DESVIO, E O DESVIO FICA REGISTRADO. A primeira versao entregue chamou o conjunto de `uc-contador-linha` -- nao porque fosse o nome certo, mas porque ele CABIA no prefixo `.uc-contador` que ja estava declarado, pelo mesmo mecanismo que faz `.uc-botao-motivo` caber em `.uc-botao` (tarefa D). `.uc-contadores` e' um PREFIXO NOVO: a Regra 5 casa por igualdade exata ate' o primeiro hifen depois de `uc-`, entao `.uc-contador` NAO o cobre, e o inventario nao era desta tarefa. Declarado o prefixo, o nome voltou a sair do PAPEL DA PECA e nao da lista. Fica registrado porque a proxima pessoa encontra a mesma parede: um componente novo com par item/conjunto custa DUAS entradas de inventario, nao uma -- e quem escreve o componente pode nao ser quem escreve a lista. ========================================================================== 2. ⛔ OS DOIS TAMANHOS NAO ERAM ARBITRARIOS — ERAM A ESCALA, ESCRITA A MAO ========================================================================== Os quatro tamanhos acima colapsam em DOIS papeis, e cada um cai EXATAMENTE num degrau da escala de tipo que o `00-tokens.css` ja tem: serie linha de contagens 1.35 / 1.4rem -> --uc-s-2 (1.4-1.9rem) destaque o numero que decide 1.8 / 2.6rem -> --uc-s-3 (1.75-2.6rem) O minimo do `--uc-s-2` e' 1.4rem, que e' o `uc-faixa__d`; o maximo do `--uc-s-3` e' 2.6rem, que e' o `uc-bq__n`. Ou seja: o tema antigo ja estava usando a escala, so' que escrita como literal em quatro lugares -- e por isso ela derivava um pouco em cada um. Aqui sao dois tokens e um modificador (`--destaque`), e o clamp resolve de graca o caso de borda de sete digitos em 320px (medido abaixo, secao 5). ========================================================================== 3. ⛔ O NUMERO NAO E' MONO — E O ATRIBUTO `uc-mono` DO TEMA ANTIGO E' MORTO ========================================================================== Este componente e' a UNICA excecao a regra que a tarefa C fixou e as D e E estenderam ("neste sistema, numero e' dado, e dado se escreve em mono com largura fixa"), e a excecao esta MEDIDA, com controle positivo. O TEMA ANTIGO JA SABIA, e escreveu o motivo em `theme.css:126`: "Em mono todo glifo ocupa um em inteiro, inclusive o ponto: '3.526' era lido como '3 . 526' e parecia defeito de renderizacao." e por isso `theme.css:131` poe `.uc-fig,.uc-ledger__n,.uc-opt__n, .uc-score__n{font-family:var(--uc-sans)}`. ⛔ SO' QUE O TEMPLATE ESCREVE O CONTRARIO. O HTML de producao entrega `917` -- e `.uc-mono` (theme.css:124) declara mono, sete linhas ANTES. Mesma especificidade (0,0,1,0); quem vem depois vence. MEDIDO no navegador, na taxonomia de producao, anonimo: 917 font-family COMPUTADO: "Public Sans" <- a SANS font-size 21.6px font-weight 400 font-variant-numeric tabular-nums Ou seja: a classe `uc-mono` naquele elemento nao pinta nada ha' meses. O briefing desta tarefa descrevia o contador como "__n (mono)" -- essa e' a descricao do ATRIBUTO, nao da forma. A forma renderizada e' sans. E A DIFERENCA E' MEDIVEL. Canvas, 41.6px (2.6rem), peso 650, com CONTROLE POSITIVO (em monoespacada todo glifo avanca igual; em proporcional, nao): controle IBM Plex Mono: '.' = 25.0px '0' = 25.0px IGUAIS (ok) controle Public Sans: '.' = 10.8px '0' = 26.5px DIFERENTES (ok) '1.234.567' mono 224.6px sans 200.3px (+12% em mono) o SEPARADOR ocupa 100% da largura de um algarismo em mono, 41% em sans. ⚠️ ENTAO O VOCABULARIO GANHA UMA FRONTEIRA, e ela e' verificavel: MONO quando o numero e' um CAMPO dentro de um controle -- pequeno, alinhado contra um irmao (uc-chip__n, uc-botao__n, o rodape do uc-cartao). Ali a grade de caracteres e' o que impede a parede de tremer a cada clique. SANS + tabular-nums + lining-nums quando o numero e' o TITULO -- grande, com separador de milhar. Ali a mesma grade estica o ponto e o numero passa a parecer tres numeros. Nao e' um sexto vocabulario: e' o quinto com o limite escrito. ========================================================================== 4. O ROTULO E' `uc-rotulo`, E ISSO E' A QUINTA COPIA DA FORMULA ========================================================================== Medido no navegador, `.uc-ledger__l` computa: IBM Plex Mono, 12.68px, letter-spacing 1.27px (.1em), caixa alta, cor #616C7A. Isso e' a formula de rotulo, letra por letra -- a quinta copia dela, depois das quatro que a tarefa D encontrou (`.uc-lbl`, `.uc-eyebrow`, `.uc-rotulo__nome`, `.uc-mostruario__marcador`). E os outros tres forks do contador JA usam `.uc-lbl` no rotulo, o que fecha a questao. Por isso NAO EXISTE `.uc-contador__l`: o rotulo e' ``, inteiro, sem uma linha de override. O afastamento entre ele e o numero e' `gap` do proprio contador -- do HOSPEDEIRO, como a tarefa D exige (o `uc-rotulo` nao emite margem, de proposito). ========================================================================== 5. ⛔ UM DEFEITO MEDIDO NO TEMA ANTIGO: O ALVO DE TOQUE DO LINK ========================================================================== No ledger o destino nao e' o contador -- e' a PALAVRA. Medido no navegador, na taxonomia de producao, mouse: .uc-ledger__l a "questoes" 71 x 16.8 px "provas" 53.3 x 16.8 px "simulado" 71 x 16.8 px 16.8px de altura esta ABAIXO do piso legal de 24x24 da WCAG 2.5.8 (AA) -- o mesmo defeito que a tarefa D encontrou no `.uc-botao--texto` (17px) e que a E encontrou no CTA do cartao (19px). CONSERTO, e ele nao e' de tamanho: O CONTADOR INTEIRO E' O DESTINO. `` em vez de `` so' na palavra. O alvo passa a ser o numero + o rotulo, o que ja passa os dois pisos com folga, e o destino passa a ser coerente com o que a pessoa le ("ir para as 917 questoes", nao "ir para a palavra questoes"). O ELEMENTO carrega a verdade -- `` navega, `
`/`
` nao --, exatamente como a tarefa D fixou no botao: nao existe `.uc-contador--link`. ========================================================================== 6. CONTRATO DE MARCACAO ========================================================================== UM contador, solto (o "placar" do recorte):
22.011 questoes neste recorte
UMA LINHA de contadores, cada um um destino:

917 questoes
...
O `
` nao leva classe: ele e' so' o item da lista, e nao ha nada para decidir nele alem de nao encolher. CONVENCAO DE ESTADO (tarefa A2, refinada pela C, confirmada pela E e F): `data-uc-estado` fica na SUPERFICIE QUE BUSCA DADO, e aqui isso e' uma afirmacao com duas metades: - quando a LINHA e' o assunto (o hub de taxonomia e o 404 buscam as tres contagens de uma vez), o atributo fica na linha -- exatamente como no `.uc-chips`; - quando o contador vive DENTRO de outra superficie (o placar do montador), quem busca e' ela, e o atributo fica la'. Por isso TODA regra de estado aqui embaixo sai de um ANCESTRAL com o atributo, e nunca de uma classe propria do contador: assim as duas metades funcionam com o mesmo seletor. E' a mesma mecanica do `aviso.css` (`[data-uc-estado="erro"] .uc-aviso__icone`), e ela existe justamente para "esta superficie esta em erro" nao ficar escrito em dois lugares que podem discordar. ========================================================================== */ /* -------------------------------------------------------------------------- A LINHA -------------------------------------------------------------------------- */ /* Flex e nao grade de 3 colunas fixas. O tema antigo trava a faixa da capa em `repeat(3,auto)` com o motivo escrito (`bancada.css:748`: "com flex-wrap os tres itens quebravam 1+2 abaixo de ~430px, e serie com orfao parece erro de contagem"). O motivo esta certo e o remedio prende a peca em TRES: o ledger da taxonomia tem 3, o do 404 tem 3, mas nada garante o proximo. Aqui a quebra e' livre e o orfao e' evitado do jeito que nao depende da contagem: os itens sao larguras proprias, com vao GRANDE entre eles (32px), entao quando quebra, quebra por falta de espaco de verdade -- e o que separa grupo de grupo continua sendo 32px, dentro da faixa do craft. */ .uc-contadores{ display:flex; flex-wrap:wrap; /* ⛔ BASELINE, E NAO O `stretch` PADRAO. Um `--destaque` na MESMA linha que contadores normais tem numero maior (--uc-s-3 contra --uc-s-2): com o alinhamento padrao os itens comecam no mesmo TOPO, e ai os numeros descansam em linhas diferentes e os rotulos abaixo deles tambem. Medido em 06/09/2026, com o item de destaque em linha: tela antes depois /disciplina/ no celular 8px de desnivel 0 /disciplina/ no desktop 13px 0 capa no desktop 13px 0 404 no desktop 13px 0 Numero de corpo diferente lado a lado se alinha pela BASE -- e' a regra tipografica, e e' o que faz a fileira ler como uma linha de dados em vez de tres blocos soltos. O dono nota o desnivel antes de conseguir nomea-lo. ⚠️ NAO MEXE na capa no CELULAR, onde o destaque ja cai sozinho numa linha e os dois normais tem o mesmo corpo: medido 0 antes e 0 depois. A regra so' age onde havia desnivel. */ align-items:baseline; gap:var(--sp-4) var(--sp-6); min-width:0; margin:0; padding:0; list-style:none; } /* Item de flex herda `min-width:auto` e nao deixa o conteudo encolher -- a mesma armadilha que o rotulo pagou no
e o chip no conjunto. */ .uc-contadores > li{ min-width:0; } /* -------------------------------------------------------------------------- O ITEM -------------------------------------------------------------------------- */ /* Coluna, numero em cima. E' a forma de 3 dos 4 forks medidos (ledger, faixa, placar); so' o `uc-capa2__saldo` poe lado a lado, e ele e' 1 de 13. `gap:var(--sp-1)` = 4px: numero e rotulo sao dois campos do MESMO dado, e 4px e' o piso de "mesmo grupo" -- nao ha nada mais junto neste sistema. */ .uc-contador{ display:flex; flex-direction:column; gap:var(--sp-1); min-width:0; margin:0; color:inherit; text-decoration:none; } /* O NUMERO. Sans com figura tabular e alinhada -- secao 3. `tabular-nums` alinha a coluna de algarismos entre contadores vizinhos (e' o que faz uma linha de contagens ler como indice em vez de tres numeros soltos); `lining-nums` impede que a fonte entregue algarismo de caixa antiga, que num numero grande le como erro de fonte. Os dois vem do `theme.css:131`, que ja tinha resolvido isto e cuja regra o proprio template cancelava. */ .uc-contador__n{ color:var(--uc-ink); font-family:var(--uc-sans); font-size:var(--uc-s-2); font-weight:var(--uc-w-anunciar); font-variant-numeric:tabular-nums lining-nums; font-feature-settings:'tnum' 1,'lnum' 1; letter-spacing:var(--uc-tr-display); line-height:var(--uc-lh-apertado); } /* -------------------------------------------------------------------------- VARIANTE: DESTAQUE -------------------------------------------------------------------------- */ /* O numero que E' a decisao -- o placar do recorte no montador, o saldo da capa. Um degrau acima na escala, e SO' isso: nao muda peso, nem cor, nem entreletra. Quatro numeros de tamanhos diferentes ja foram tentados neste site; o que os distinguia de verdade era o papel, nao a decoracao. */ .uc-contador--destaque .uc-contador__n{ font-size:var(--uc-s-3); } /* -------------------------------------------------------------------------- QUANDO O CONTADOR E' UM DESTINO -------------------------------------------------------------------------- */ /* ⛔ O SUBLINHADO EXISTE EM REPOUSO, E ISSO FOI UM DEFEITO CORRIGIDO NO MESMO CICLO. A primeira versao so' sublinhava no `:hover` -- e afordancia que so' aparece no hover NAO EXISTE para quem usa o dedo, que e' a maioria deste site. Visto na captura: no palco "preenchido", "917 QUESTOES", "49 PROVAS" e "1 SIMULADO" eram links e, parados, nao tinham UM sinal sequer de que levavam a algum lugar. Zero sinais e' pior que "cor e' o unico sinal". O tema antigo acertava nisso e errava no alvo: ele punha `border-bottom:1px solid var(--uc-rule)` na PALAVRA (theme.css:560) -- havia afordancia, mas o clicavel era so' o rotulo, com 16,8px de altura. Aqui o clicavel e' o contador inteiro E a afordancia fica. O sublinhado e' declarado no proprio `` (nao no numero) para valer nas duas linhas, e a cor dele em repouso e' `--uc-rule-forte`: o mesmo hairline que o chip usa na borda. No hover ele assume `currentColor`, ou seja, escurece junto com o numero. COR NAO E' O UNICO SINAL: em repouso sao dois (sublinhado + cursor, nenhum dos dois cromatico); no hover sao tres (mais a cor). O anel de foco vem da `01-base.css` e nao e' redeclarado -- quem desenha foco duas vezes acaba com dois aneis (defeito 6.3 da tarefa E). */ .uc-contador[href]{ cursor:pointer; text-decoration:underline; text-decoration-color:var(--uc-rule-forte); text-underline-offset:var(--uc-sublinhado-recuo); } .uc-contador[href]:hover{ text-decoration-color:currentColor; } .uc-contador[href]:hover .uc-contador__n{ color:var(--uc-acao); } /* -------------------------------------------------------------------------- ESTADO DA SUPERFICIE: CARREGANDO -------------------------------------------------------------------------- */ /* O osso ocupa o lugar do numero SEM mudar a altura da linha: `color: transparent` mantem a caixa de texto que o proprio font-size produz, entao quando o numero chega nada pula. E' a mesma intencao do `.uc-chip--osso::before`, resolvida com menos: la o osso e' um elemento vazio e precisa de altura fabricada; aqui o texto continua no DOM (o servidor manda o numero velho ou um zero) e so' fica invisivel. O ROTULO NAO VIRA OSSO: ele e' texto do servidor e nao esta carregando -- esqueletizar o que ja se sabe e' fingir que a peca inteira esta vindo (mesma decisao que a tarefa F tomou no cabecalho da secao). A LARGURA E' `6ch`, E A UNIDADE E' O ARGUMENTO: o osso imita um numero de milhar com separador ("22.011"), que e' o caso dominante medido. Escrever em `ch` e' escrever o valor na unidade do que ele SIGNIFICA -- a saida que a Regra 11 obrigou na tarefa D -- e e' o lado certo do corte que a tarefa E escreveu: `ch` quando o osso imita uma PALAVRA de comprimento proprio num container que cresce; `%` quando imita onde a linha para. Sem token, e sem precisar de token: nao ha um segundo consumidor. */ [data-uc-estado="carregando"] .uc-contador__n{ width:6ch; border-radius:var(--uc-r-1); background:var(--uc-esqueleto); color:transparent; } /* 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. Keyframe de nome PROPRIO -- nome de `@keyframes` e' global no documento, e consumir aqui o de outro componente e' dependencia que quebra calada no dia em que aquela folha nao for enfileirada (Regra 15). */ html[data-uc-js] [data-uc-estado="carregando"] .uc-contador__n{ background-image:linear-gradient( 90deg, var(--uc-esqueleto) 0%, var(--uc-esqueleto-brilho) 50%, var(--uc-esqueleto) 100% ); background-size:300% 100%; animation:uc-contador-brilho var(--uc-esqueleto-dur) var(--uc-ease) infinite; } @keyframes uc-contador-brilho{ from{ background-position:150% 0 } to{ background-position:-150% 0 } } /* -------------------------------------------------------------------------- VARIANTE: SEM NUMERO -------------------------------------------------------------------------- */ /* "Nao se sabe quantos" e "zero" sao coisas diferentes, e so' UMA delas e' variante: ZERO e' um numero. Sai como `0`, no mesmo tamanho e na mesma cor de qualquer outro -- e NAO e' rebaixado. No chip o zero perde enfase porque ali ele e' um item entre 749 e precisa parar de disputar atencao; aqui o zero E' A RESPOSTA ("este recorte nao tem questao"), e apagar a resposta e' esconder o que a pessoa veio saber. DESCONHECIDO nao e' numero. Sai como PALAVRA -- nunca um travessao: travessao e' caractere fora do Latin basico (a tarefa E mediu que a mono do tema nem o traz) E e' mudo no leitor de tela. Aqui cor nao e' o unico sinal porque COR NAO E' SINAL NENHUM: o que informa e' o texto. A variante existe para a palavra nao herdar a tipografia de numero grande: "sem contagem" em 2.6rem, peso 650 e entreletra negativa vira titulo. */ .uc-contador--ausente .uc-contador__n{ color:var(--uc-ink-3); font-size:var(--uc-s-0); font-weight:var(--uc-w-ler); font-variant-numeric:normal; letter-spacing:normal; line-height:var(--uc-lh-normal); } /* -------------------------------------------------------------------------- ESTADO DA SUPERFICIE: ERRO -------------------------------------------------------------------------- */ /* Em erro nao existe numero fresco -- o que ocupa o lugar dele e' sempre a palavra, ou seja, a variante acima. Por isso a cor de erro mira a combinacao das duas coisas e nao o numero solto: um contador com numero de verdade dentro de uma superficie em erro seria dado velho pintado de vermelho, que e' pior que dado velho. O QUE ACONTECEU / POR QUE / O QUE FAZER continua sendo trabalho do `uc-aviso`, que a tarefa E entregou. O contador so' para de mentir. */ [data-uc-estado="erro"] .uc-contador--ausente .uc-contador__n{ color:var(--uc-errado); }