/* ========================================================================== COMPONENTE — uc-montador A ferramenta onde o estudante MONTA o recorte: escolhe banca, materia, ano e cargo, ve quantas questoes sobraram e decide quantas resolver agora. E' a tela que converte. Depois do chip (1.165 renderizacoes), e' a segunda superficie mais renderizada do site -- e os chips vivem dentro dela. ========================================================================== 1. A ANATOMIA, MEDIDA NO HTML RENDERIZADO DE NOVE TELAS ========================================================================== Medido em 05/09/2026, anonimo, por token de atributo `class` e com arvore DOM de verdade (BeautifulSoup), nao com regex: uc-bq__grupo 11
capa 3 · questoes 4 · prova 2 · simulado 2 uc-bq__chips 11
UM PARA UM com o grupo, sem excecao uc-bq__q 8

questoes 2 · taxonomia 6 uc-bq__opt 7 ...

O que vem neste recorte

...

⚠️ O `__saldo` E' UM INVOLUCRO, E NAO UMA CLASSE MINHA NO ELEMENTO DO CONVIDADO. A Regra 16 permitiria a segunda forma -- "o hospedeiro poe uma classe dele no elemento do convidado para decidir posicao" e' a terceira saida que ela nomeia, e foi o que a G1 usou em `.uc-topo__acao`. Aqui nao foi preciso: um `
` de posicao resolve com ZERO coabitacao, e coabitar e' justamente onde a propria R16 declara o proximo buraco dela (nada distingue uma classe de posicao de uma classe de pintura no mesmo elemento). Um no' a mais em troca de um acoplamento a menos. O que este involucro afirma e' "eu fico na coluna estreita" -- e isso e' layout do MONTADOR, nao propriedade do contador; e' o inverso exato do `grid-column:1/-1` que a tarefa E deixou em `aviso.css` porque "ocupo a linha inteira" descreve o componente. ORDEM DO DOM = ORDEM DE LEITURA, e ela e' o desenho: CONTEXTO (quantas existem) -> DECISAO (qual recorte) -> ACAO (quantas agora). E' literalmente o que o tema antigo escreveu como objetivo (bancada.css:670) e alcancou com `grid-template-areas` + `display:contents` + tres resets de `grid-area` em duas media queries. Aqui a ordem do DOM ja e' a ordem certa no empilhado, e o desktop e' UMA declaracao de areas. CONVENCAO DE ESTADO: `data-uc-estado` fica na SUPERFICIE que busca dado, e aqui a superficie e' o montador inteiro -- um clique num chip refaz a contagem CRUZADA de todos os grupos, do placar e da amostra ao mesmo tempo. Por isso o atributo esta em `.uc-montador` e NAO se repete nos `.uc-chips` de dentro: duas fontes da verdade para o mesmo fato e' o que a tarefa E recusou no `uc-aviso--erro`. `aria-busy="true"` e' outro fato e mora em outro lugar: ele vai em cada `.uc-chips`, porque quem tem numero VELHO na tela sao eles, e porque e' o `chip.css` (dono do chip) que ja sabe o que fazer com isso -- ele escreve `.uc-chips[aria-busy="true"] .uc-chip__n{opacity:...}`. "A superficie esta buscando" e "estes numeros estao velhos" nao sao a mesma afirmacao. ========================================================================== */ /* -------------------------------------------------------------------------- A FERRAMENTA -------------------------------------------------------------------------- Duas colunas, 2:1, em PROPORCAO e nao em pixel. O tema antigo escreve `minmax(0,1fr) 320px` (bancada.css:530) -- uma coluna de largura absoluta, que e' justamente o tipo de numero que a Regra 14 passou a cobrar. Mas o conserto certo nao e' batizar 320px: e' notar que a coluna da decisao e' UM TERCO DA FERRAMENTA, nao 320 pixels. Escrever a proporcao e' escrever o valor na unidade do que ele significa (tarefa D, Regra 11), e de quebra a regra nasce sem token nenhum. `align-items:start`: conteudo desigual NAO ganha altura igual -- a coluna dos filtros e a da decisao nunca tem o mesmo tamanho, e igualar seria a simetria vazia que o `02-mostruario.css` ja recusa por escrito. */ .uc-montador{ display:grid; grid-template-columns:minmax(0,2fr) minmax(0,1fr); grid-template-areas:"filtros saldo" "filtros decisao"; /* A LINHA DO SALDO E DO TAMANHO DELE (15/09/2026). `filtros` ocupa as duas linhas, e sem trilho declarado o grid reparte a altura dela IGUAL entre as duas: medido a 1440px, o saldo tinha 68px e a linha dele 206px, e o primeiro botao caia 138px abaixo do numero, em espaco morto. `1fr` na segunda linha manda a sobra para baixo da acao, nao para cima dela. */ grid-template-rows:auto 1fr; gap:var(--sp-5) var(--sp-6); align-items:start; min-width:0; } /* As tres areas, escopadas com `>` de proposito. Sem o escopo, um `.uc-montador__decisao` que aparecesse dentro de outro container herdaria uma area que aquele container nao declara -- que e' EXATAMENTE o defeito que o tema antigo teve em 27/08/2026 (bancada.css:527: "area nomeada inexistente cria trilha implicita, e isso colapsou a coluna do H1 da capa para 0px no desktop"). */ .uc-montador > .uc-montador__saldo{ grid-area:saldo } .uc-montador > .uc-montador__filtros{ grid-area:filtros } .uc-montador > .uc-montador__decisao{ grid-area:decisao } /* Involucro de POSICAO do contador (ver o contrato acima). Ele nao pinta nada e nao emite vao: o que ele faz e' ocupar a area `saldo` e nao deixar o numero de sete digitos esticar o trilho. */ .uc-montador__saldo{ min-width:0; } /* UMA declaracao para empilhar, e nenhum reset por filho. O breakpoint e' o MESMO 900px que o chrome (tarefa G1) ja usa e o unico do tema -- a G1 registrou que literal em prelúdio de at-rule e' invisivel para a guarda e que o risco e' aparecer um terceiro numero sem ninguem decidir. Aqui nao aparece. */ @media (max-width:900px){ .uc-montador{ grid-template-columns:minmax(0,1fr); grid-template-areas:"saldo" "filtros" "decisao"; grid-template-rows:none; } /* COM RESULTADO, A ACAO SOBE (15/09/2026). `uc_montador()` emite a decisao antes dos filtros neste estado, e a pilha segue o DOM. Medido a 375px: o primeiro botao estava em ~1.260px, atras de quatro grupos de chips. No vazio e no erro vale a declaracao de cima: sem acao, a saida e tirar um filtro. */ .uc-montador[data-uc-estado="preenchido"]{ grid-template-areas:"saldo" "decisao" "filtros"; } } /* -------------------------------------------------------------------------- OS FILTROS — o
-------------------------------------------------------------------------- */ .uc-montador__filtros{ min-width:0; } /* O ``. `list-style:none` mata o triangulo nativo; sao dois seletores porque o WebKit so' obedece ao pseudo-elemento proprio -- mesma dupla que o `chip.css` ja usa no expansor. `min-height:var(--uc-alvo-toque)` = 44px em TODA largura: e' um alvo so' na peca, nao oito empilhados como no rodape, entao nao ha motivo para pagar dois pisos diferentes. 44 passa os dois (2.5.5 no dedo, 2.5.8 no mouse). */ .uc-montador__resumo{ display:flex; align-items:center; gap:var(--sp-2); min-height:var(--uc-alvo-toque); min-width:0; cursor:pointer; list-style:none; } .uc-montador__resumo::-webkit-details-marker{ display:none; } /* A seta gira para BAIXO quando esta aberto -- o sentido do movimento e' o sentido do conteudo. `flex:none` para ela nao ser achatada quando o rotulo e' longo (foi o defeito que o `uc-botao__icone` ja pagou). 12px como no chip, e nao 16 como no botao: aqui ela acompanha um rotulo em caixa alta, nao um rotulo de frase. */ .uc-montador__seta{ flex:none; width:12px; height:12px; margin-left:auto; transition:transform var(--uc-dur-2) var(--uc-ease); } .uc-montador__filtros[open] .uc-montador__seta{ transform:rotate(180deg); } /* -------------------------------------------------------------------------- O GRUPO DE FILTRO — a peca que renderiza 11 vezes -------------------------------------------------------------------------- `gap:var(--sp-2)` = 8px entre o rotulo e a parede de chips: mesmo grupo, e e' o hospedeiro quem decide esse vao porque o `uc-rotulo` nao emite margem (tarefa D). O tema antigo escreve `.uc-bq__grupo>.uc-lbl{margin-bottom: .45rem}` = 7,2px para dizer a mesma coisa, com um numero fora de qualquer escala. 16px de respiro em cima e embaixo -> 32px entre dois grupos, que e' o piso da faixa "entre grupos" do craft; e o fio cai exatamente na fronteira. */ .uc-montador__grupo{ display:grid; gap:var(--sp-2); min-width:0; padding-block:var(--sp-4); } /* O FIO, na quarta escala do vocabulario (secao 3): atravessa UM objeto. */ .uc-montador__grupo + .uc-montador__grupo{ border-top:var(--uc-borda) solid var(--uc-rule); } /* -------------------------------------------------------------------------- A COLUNA DA DECISAO -------------------------------------------------------------------------- */ /* 24px entre o que e' rotulo, o que e' escolha e o que e' amostra: sao tres grupos diferentes dentro da mesma coluna. */ .uc-montador__decisao{ display:grid; gap:var(--sp-5); align-content:start; min-width:0; margin:0; } /* AS QUATRO OPCOES DE TAMANHO. `auto-fit` e nao `auto-fill`, e a diferenca com a tarefa E e' deliberada: la o assunto era uma GRADE DE ACERVO, onde a largura de um cartao nao pode depender de quantos irmaos ele tem (por isso `auto-fill`, que mantem os trilhos vazios). Aqui sao QUATRO controles fixos que dividem uma linha: deixar um trilho vazio no fim de uma fileira de botoes desenha um buraco onde a pessoa procura o quinto botao. Conjunto fechado estica; acervo aberto, nao. `16ch` e' a unidade do que o valor significa: "cada opcao cabe uma linha de umas dezesseis letras" -- e' o comprimento de "10 questoes, cerca de 20 min" quebrado em duas linhas. Escrever em `ch` e' o que a Regra 11 obrigou na tarefa D, e evita um token que teria um consumidor so'. */ .uc-montador__tamanhos{ display:grid; grid-template-columns:repeat(auto-fit,minmax(16ch,1fr)); gap:var(--sp-2); min-width:0; } /* O SEGUNDO CAMPO DO BOTAO. O tempo estimado nao e' enfeite: e' por ele que um estudante escolhe entre 10 e 40 quando tem meia hora. Ele e' um item de flex dentro do `uc-botao` -- nao ha uma linha sobrescrevendo o botao aqui, e nao podia haver (Regra 16). `min-width:0` para o texto quebrar DENTRO do controle em vez de esticar a coluna. */ .uc-montador__tempo{ min-width:0; } /* -------------------------------------------------------------------------- A AMOSTRA — "o que vem neste recorte" -------------------------------------------------------------------------- Sem fio e sem barra a esquerda. O tema antigo desenha `.uc-bq__q{padding-left:.7rem;border-left:2px solid var(--uc-rule)}`, e a forma esta na lista de tells do craft ("cartao com barra colorida a esquerda"). Aqui o que separa uma questao da outra e' espaco: 12px, que e' "mesmo grupo" -- porque elas SAO o mesmo grupo, sao a amostra. Fio e' fronteira, e entre dois itens de uma lista nao ha fronteira nenhuma. */ .uc-montador__amostra{ display:grid; gap:var(--sp-3); min-width:0; } .uc-montador__q{ min-width:0; margin:0; color:var(--uc-ink-2); font-size:var(--uc-s--1); font-weight:var(--uc-w-ler); line-height:var(--uc-lh-normal); /* Enunciado real traz codigo de lei, URL e formula sem espaco. `anywhere` e nao `break-word`: `break-word` quebra a palavra na linha mas nao reduz o min-content do item de grade, entao a coluna estoura. E' o mesmo defeito e o mesmo conserto que o chip e o botao ja pagaram. */ overflow-wrap:anywhere; } /* ========================================================================== O EXPANSOR DE CHIPS DEIXA DE SER PAREDE — 07/09/2026 ========================================================================== Relato do dono: "771 chips numa página". Medido antes de mexer, porque o número sozinho não diz onde dói: 844 chips · 291 KB de HTML -> 42 KB NO FIO (comprime 7:1) · TTFB 0,6s ⛔ ENTÃO PESO NÃO ERA O PROBLEMA, e cortar chip teria sido consertar um número que não machuca — além de tirar acesso: a cauda de ~300 matérias e ~500 cargos existe SÓ aqui. A seção "Comece pelo que você estuda" expõe 8 matérias e 7 bancas, e `/disciplina/` e `/cargo/` respondem 404. Sem estes chips, aqueles hubs ficam órfãos — o que a regra 6 do checklist de SEO proíbe. O QUE DÓI, medido: abrir "mais 500" cresce a página em **9.759px — 14,5 telas** (2.435 -> 12.194). Tudo que vem depois é empurrado para longe, e ninguém varre 500 chips. A correção é limitar a JANELA, não o conteúdo: o expansor abre num painel com altura de teto e rolagem própria. Os chips já vêm ordenados por contagem (o mais populoso primeiro), então as primeiras linhas são as úteis e o resto continua alcançável — para quem enxerga, para quem usa teclado e para quem não tem JavaScript. ⛔ `overscroll-behavior:contain` NÃO É ENFEITE. `resolvedor.css` registra que scroller aninhado dentro de página rolável é armadilha no celular: ao chegar no fim do painel, o gesto continua e rola a PÁGINA, e a pessoa perde o lugar. `contain` para a corrente no painel. Ali a decisão foi não ter scroller nenhum — mas aquilo é texto de leitura obrigatória, e isto é um seletor: quem escolhe uma matéria não está lendo, está procurando. */ .uc-montador__grupo details[open] > *:not(summary){ max-height:40vh; overflow-y:auto; overscroll-behavior:contain; /* respiro para o anel de foco do último chip não ser cortado pela borda do painel — foco cortado é foco que não se enxerga. */ padding-block:var(--sp-1); } /* ========================================================================== O ÍNDICE A–Z DAS LISTAS — /materias/ e /cargos/ ========================================================================== ⛔ POR QUE ELE EXISTE: a primeira versão de `/materias/` servia os 228 chips numa grade plana ordenada por contagem. Relato do dono: "ficou com muito chips, uma parede enorme" — o MESMO defeito que eu tinha acabado de corrigir no expansor de `/questoes/`, cometido de novo. Lista longa sem hierarquia não se lê, se abandona. E o comportamento dominante aqui não é navegar: é PROCURAR. Quem abre esta página já sabe que quer "Nutrição"; ela precisa da letra N, não de uma parede ordenada por tamanho. `craft/laws-of-ux.md`, Miller: agrupar com cabeçalho de seção claro bate uma lista plana de 30 itens — e aqui são 228. */ .uc-lista__az{ /* A régua de atalho respira mais que uma linha de chips comum: ela é NAVEGAÇÃO da própria página, não conteúdo dela. 32px é o piso da faixa "entre grupos" que este sistema já usa. */ margin-block-end:var(--sp-6); } .uc-lista__letra{ /* Alvo de toque cheio: letra é o menor alvo desta tela, e alvo pequeno num índice é o que faz a pessoa desistir e rolar. `--uc-alvo-toque` é o mesmo 44px da WCAG 2.5.5 que o topo já usa. */ min-width:var(--uc-alvo-toque); justify-content:center; font-variant-numeric:tabular-nums; } .uc-lista__grupo{ /* 32–48px ENTRE grupos, 8–12px DENTRO — a regra desta casa. Um grupo por letra só agrupa se a distância entre eles for maior que a de dentro deles; espaçamento uniforme não agrupa nada. */ margin-block-end:var(--sp-6); } .uc-lista__inicial{ /* `scroll-margin-top` para a âncora não parar com a letra colada no topo da janela — sem ele o primeiro chip do grupo fica meio escondido e o atalho parece ter errado o destino. */ scroll-margin-top:var(--sp-6); margin-block-end:var(--sp-3); } /* ⛔ GRUPO GRANDE TAMBÉM É PAREDE — medido em 07/09/2026, depois de eu achar que o índice A–Z já tinha resolvido. Ele resolveu a lista de 494 num nível, mas não no outro: em português os cargos se aglomeram em Agente, Analista, Assistente, Auxiliar e Administrador, e a letra **A sozinha ficou com 144 chips** — cerca de 29 fileiras. Pular para o A e cair numa parede menor continua sendo cair numa parede. Uma regra só resolve, sem contar filho: teto de altura em TODO grupo. Os pequenos (B tem 4, D tem 11) nunca chegam perto dele e ficam exatamente como estavam; só os grandes ganham rolagem própria. `overscroll-behavior:contain` pelo mesmo motivo já registrado no expansor de `/questoes/`: sem ele, ao chegar ao fim do painel o gesto continua e rola a PÁGINA, e a pessoa perde o lugar dentro do índice — que é justamente o que ela veio usar. */ .uc-lista__grupo > .uc-chips{ max-height:52vh; overflow-y:auto; overscroll-behavior:contain; /* respiro para o anel de foco do último chip não ser cortado pela borda */ padding-block:var(--sp-1); }