/* ============================================================================ GRAVIDADE ZERO · COMPONENTES — popover de filtro, caixa de seleção, gaveta ---------------------------------------------------------------------------- Os três nasceram de componentes React que os chefes mandaram como referência (Radix Popover + originui/checkbox, e o WorkflowBuilderCard do shadcn). Aqui eles são DOM puro, porque este projeto não tem build nem rede em runtime — a promessa do README é abrir por duplo clique numa palestra, e uma dependência de npm quebraria exatamente isso. O QUE FOI PRESERVADO de cada original, e o que foi trocado: Popover (Radix) · a mecânica inteira: trigger com aria-expanded, caixa em role="dialog", Esc fecha, clique fora fecha, foco volta para o trigger, animação de entrada por lado. · trocado: o portal. Radix teleporta a caixa para o para escapar de `overflow`; aqui a caixa PODE ficar ancorada porque nenhum ancestral corta — e ficar ancorada é o que a faz acompanhar o fit-scale de js/app.js. Teleportada, ela apareceria em escala 1:1 ao lado de uma barra reduzida a 0,8. Checkbox (originui) · o real continua lá, só que fora da tela: é ele que dá teclado, leitor de tela e o form. O que se vê é o irmão .cbx__box, controlado por :checked. WorkflowBuilderCard · a gaveta. No original o hover expande uma seção com descrição + badges e o card sobe 6px. Aqui a seção não pode empurrar layout (o card vive num slot de altura fixa dentro do cilindro), então ela é absoluta e desce POR CIMA — mesma leitura, custo zero de reflow. ========================================================================== */ /* ============================================================================ POPOVER ========================================================================== */ .pop{ position:relative; display:inline-flex; } .pop__caixa{ position:absolute; top:calc(100% + 10px); left:50%; z-index:60; max-height:min(60vh, 460px); /* TETO DE LARGURA — a última rede contra o corte. A ancoragem (js/filtro.js) escolhe o lado que cabe; quando NENHUM lado cabe, porque a caixa é mais larga que a tela inteira, não há lado a escolher e só o teto resolve. Vale em telefone deitado e em projetor com zoom alto. O `min-width` TAMBÉM tem que ceder, e isso não é simetria decorativa: no CSS o mínimo vence o máximo sempre, então um `min-width:15rem` fixo anularia o teto justamente na tela em que ele importa — a caixa continuava 240px numa viewport de 260 e vazava do mesmo jeito. Os dois pisam no mesmo limite. */ min-width:min(15rem, calc(100vw - 24px)); max-width:calc(100vw - 24px); /* ★ O ROLADOR PRINCIPAL DEIXOU DE SER A CAIXA (FIX-M0.3-q) — quem rola é a `.pop__lista`, e o porquê está inteiro no comentário do `.pop__rodape`, mais abaixo: um rodapé grudado flutua SOBRE a área rolável, e com os alvos em 44px o Tab passou a pousar em controle 100% coberto por ele. Título e rodapé são irmãos do rolador, não conteúdo dele. ★ MAS A CAIXA CONTINUA PODENDO ROLAR, E ISSO É RESGATE — achado CRÍTICO da revisão de código, medido. A primeira versão desta meta pôs `overflow:hidden` aqui, e numa janela MUITO baixa isso vira armadilha: título e rodapé são `flex:0 0 auto`, então quem cede é só a lista, e quando o teto `min(60vh,460px)` fica menor que os dois juntos ela ia a ZERO. Medido na árvore de então, estado travado: em 812×260 a lista media **altura 0** — nenhuma das cinco áreas visível ou clicável — e em 812×220 o "aplicar" terminava **15,1px abaixo** da base da caixa, recortado, sem rolagem nenhuma para resgatar. Não é hipótese: zoom de página a 200% (WCAG 1.4.4) sobre o celular deitado de 812×375 deixa a altura em ~187px de CSS. Com o rodapé fora do `sticky`, esta rolagem é inofensiva — ele não flutua mais sobre nada, então nada pode se esconder atrás dele. O que impede a sobreposição é o rodapé estar em FLUXO, não a caixa estar travada. */ display:flex; flex-direction:column; overflow-y:auto; overflow-x:hidden; /* O RECUO LATERAL MORA NOS FILHOS, e não aqui (FIX-M0.3-q). Quando a `.pop__lista` virou rolador, o recorte dela passou a ser a caixa de PADDING dela — que era zero. A `.cbx__box` é o primeiro item da linha e nasce colada nessa borda, então o anel de `:focus-visible` (`outline:2px` com `outline-offset:2px`) tinha **os 4px da esquerda cortados**, e o `box-shadow:0 0 12px` da caixinha marcada perdia o halo inteiro daquele lado. Medido no PIXEL, nas quatro larguras: na árvore anterior x=559 e 560 traziam o rosa (236,0,140); com o rolador na lista, fundo chapado. Com o recuo nos filhos, o rolador tem 14px de folga de cada lado — a mesma que o padding da caixa dava antes — e o anel volta inteiro. */ padding:14px 0; border:1px solid var(--vidro-borda); border-radius:16px; background:rgba(10,9,16,.92); -webkit-backdrop-filter:blur(var(--vidro-blur)) saturate(1.2); backdrop-filter:blur(var(--vidro-blur)) saturate(1.2); /* Modo B: a Diretriz zera --gz-shadow no escuro e libera glow. A sombra preta aqui não é decoração de card, é SEPARAÇÃO — sem ela a caixa de vidro encosta no palco de vidro e o olho não acha a borda. */ box-shadow:0 18px 48px rgba(0,0,0,.62), 0 0 0 1px rgba(255,255,255,.04) inset; text-align:left; /* estado fechado: a mesma animação do Radix (fade + zoom 95% + slide) */ opacity:0; transform:translateX(-50%) translateY(-8px) scale(.96); transform-origin:top center; pointer-events:none; transition:opacity .16s var(--ease-out), transform .16s var(--ease-out); } .pop.is-aberto .pop__caixa{ opacity:1; transform:translateX(-50%) translateY(0) scale(1); pointer-events:auto; } /* OS DOIS LADOS. O padrão é centrado sob o gatilho; quando a caixa não cabe centrada, js/filtro.js mede na abertura e põe uma destas duas classes. Elas NÃO são escritas à mão em lugar nenhum — a barra de controles já mudou de ponta três vezes, e cada vez que o lado foi cravado no código ele envelheceu junto com a posição da barra. `pop--esq` ancora no canto ESQUERDO do gatilho (a caixa cresce para a direita); `pop--dir` ancora no DIREITO (cresce para a esquerda). Em ambas a origem do zoom vai para o canto ancorado, senão a animação de entrada nasce fora da caixa e ela parece deslizar de lado. */ .pop--esq .pop__caixa{ left:0; right:auto; transform:translateX(0) translateY(-8px) scale(.96); transform-origin:top left; } .pop--esq.is-aberto .pop__caixa{ transform:translateX(0) translateY(0) scale(1); } .pop--esq .pop__seta{ left:22px; right:auto; transform:none; } .pop--dir .pop__caixa{ left:auto; right:0; transform:translateX(0) translateY(-8px) scale(.96); transform-origin:top right; } .pop--dir.is-aberto .pop__caixa{ transform:translateX(0) translateY(0) scale(1); } /* a seta acompanha o gatilho, não a caixa: 22px do canto ANCORADO */ .pop--dir .pop__seta{ left:auto; right:22px; transform:none; } /* a seta some junto com a caixa: ela é filha do transform do pai */ .pop__seta{ position:absolute; bottom:100%; left:50%; transform:translateX(-50%); width:0; height:0; border:6px solid transparent; border-bottom-color:rgba(10,9,16,.92); filter:drop-shadow(0 -1px 0 var(--vidro-borda)); } /* `flex:0 0 auto` porque a caixa virou uma coluna flex (FIX-M0.3-q): sem ele o título é item flexível e ENCOLHE quando a lista pede espaço numa janela baixa. Ele é uma linha de 10,56px — encolher aqui é sumir. */ .pop__titulo{ flex:0 0 auto; font-family:var(--gz-font-codigo); font-size:.66rem; letter-spacing:.18em; text-transform:uppercase; color:var(--tx-dim); margin:0 14px 11px; } /* O VÃO ENTRE AS LINHAS FOI A ZERO, E ISSO É PARTE DO ALVO DE TOQUE (FIX-M0.3-q). Ele valia 10px quando a linha media 17 de altura; com a linha em 44px (ver `.cbx`, mais abaixo) esses 10px viram ZONA MORTA entre dois alvos vizinhos — pixel que parece da lista e não pertence a controle nenhum. É o mesmo defeito que o `FIX-M0.6-q` desta sessão mediu em volta do cartão da Rede, um nível acima. Com `gap:0` todo pixel da lista pertence a uma linha. E O RESPIRO NÃO SE PERDE: ele passa a vir de DENTRO da linha. Com o texto de 13,44px centrado numa caixa de 44, sobram 15,28px acima e abaixo, contra os 10 de vão que havia — o branco entre dois rótulos vai de 13,56 para 30,56px. A conta também é o que segura o teto da caixa: 5 linhas a 44px com vão de 10 pediriam 381px de altura contra o `max-height:min(60vh,460px)`; com vão zero são 341, e a caixa continua sem rolar em 375×812 e em 1280×800, onde hoje o excesso medido é 0. Está preso por teste. */ /* ★ ESTA É A ÚNICA PEÇA QUE ROLA (FIX-M0.3-q). `min-height:0` é obrigatório e não é zelo: o padrão de um item flex é `min-height:auto`, que resolve para o min-content — a lista se recusaria a encolher abaixo das cinco linhas e quem estouraria o teto seria a CAIXA, devolvendo o rodapé para cima do conteúdo. É a mesma armadilha que a `FIX-M0.6-p` registrou para `min-width:auto`. */ .pop__lista{ display:flex; flex-direction:column; gap:0; overflow-y:auto; overflow-x:hidden; /* O PISO É UMA LINHA INTEIRA, e ele é o outro lado do achado CRÍTICO da revisão: sem piso a lista era o único item que cedia e ia a ZERO numa janela baixa (medido: altura 0 em 812×260, com as cinco áreas fora de alcance). Com 44px ela sempre mostra um alvo inteiro, e o que passar disso rola na caixa. Continua PODENDO encolher — `min-height:auto`, o padrão de um item flex, é que travaria no min-content das cinco linhas. */ min-height:44px; /* os 14px que saíram da `.pop__caixa`: é a folga que o anel de foco e o halo da caixinha marcada precisam para não serem cortados pelo recorte do rolador — ver o comentário da caixa */ padding-inline:14px; } .pop__sep{ height:1px; margin:12px -14px 11px; background:var(--hairline); } /* O RODAPÉ INTEIRO — nota, separador e ações — FICA COLADO NA BASE QUANDO A CAIXA ROLA. Não é enfeite: é conserto de uma regressão medida, em duas rodadas. PRIMEIRA RODADA. A `.pop__caixa` tem `max-height:min(60vh,460px)`: numa janela de 375px de altura (o celular DEITADO) o teto vale 225px, e ali ela já rolava 5px ANTES desta meta. A `.pop__nota` do FIX-M0.3-o acrescentou 41px e o "aplicar" saía da área visível — o botão ia de `folga +10,5` para `−30,6` e o hit-test no pixel dele respondia `SECTION.pc-card`: o dedo que mirasse o botão principal acertaria um card atrás. Grudei as AÇÕES. SEGUNDA RODADA, e foi a revisão de UX que mediu. Grudar só as ações trocou o problema de lugar: no instante em que a trava nasce, com `scrollTop:0`, sobravam **9,5px de 31,1** da nota, com `elementFromPoint` no meio dela respondendo `DIV.pop__acoes` e o texto fatiado no meio do glifo. Texto cortado na horizontal não comunica "há mais abaixo" — comunica quebrado. E vale para toda janela mais baixa que ~448px, ou seja **todo celular deitado**. Com o rodapé inteiro grudado, a explicação passou a estar sempre na tela — e é daí que vem o AGRUPAMENTO, que continua valendo. O GRUDE não: ele caiu na rodada seguinte. ★ TERCEIRA RODADA, E ELA TIROU O `position:sticky` DAQUI (FIX-M0.3-q). O grude resolvia "o aplicar sai de vista" e trazia junto um segundo problema que só apareceu quando os alvos cresceram para 44px: um elemento grudado FLUTUA SOBRE a área rolável, e o navegador não sabe disso quando rola o foco. Medido em 812×375 com Tab de VERDADE, com os alvos já em 44px: a terceira parada pousava com 16px atrás do rodapé e a QUARTA com **44 de 44** — o foco num controle 100% invisível, `elementFromPoint` no centro dele respondendo `DIV.pop__acoes`, e o `scrollTop` ainda em 0, porque geometricamente o alvo estava "dentro" do rolador. É a classe do FIX-M0.6-j, nascida aqui. AS DUAS SAÍDAS DE ROLAGEM FORAM MEDIDAS E AS DUAS FALHARAM. `scroll-margin` no ALVO: **44px de cobertura em TODOS os valores testados** (a altura do rodapé e ela mais 8), nos dois estados — o Chrome ignora a margem quando decide não rolar. `scroll-padding-bottom` no ROLADOR: funciona, mas o limiar que ZERA anda com o estado — **78px** com a nota escondida (rodapé de 70) e **140px** com ela visível (rodapé de 113,1). Um número que muda com o conteúdo não é piso, é coincidência com data de validade — e a fonte do navegador a 200% engorda a nota de novo. ENTÃO O ROLADOR MUDOU DE LUGAR, que é a régua do FIX-M0.6-l: **duas caixas em fluxo não podem se sobrepor.** Quem rola agora é a `.pop__lista`; o título e este rodapé são irmãos dela, fora do rolador. O invariante que o FIX-M0.3-o comprou continua de pé com garantia MAIOR — o "aplicar" não sai de vista porque ele não rola, ponto — e o alvo que o Tab alcança não pode ficar atrás de nada, por construção. Sem número mágico, sem depender do UA. A compensação de margem/padding FICA: o pai tem `padding:14px`, e sem ela o rodapé não alcançaria as bordas da caixa. O FUNDO SÃO TRÊS CAMADAS DA MESMA COR, e a primeira versão tinha UMA — com um comentário meu afirmando que 0,92 sobre 0,92 (0,9936) já bastava para ocultar o que passa por baixo. **O recorte ampliado em 812×375 me desmentiu: dava para LER "palco não pode ficar vazio" atravessando os botões.** Oito por cento de um texto que mede 10,36:1 continua legível. Três camadas levam a 0,99949 — e a revisão de código mostrou que a justificativa que eu tinha dado para manter o rgba É FALSA: 0,99949 deixa passar 0,13/255 por canal, ou seja a pilha JÁ é um opaco e apareceria sobre uma estrela igual a um `#0B0911` cravado. O rgba fica por consistência de token com a `.pop__caixa`, não por preservar translucidez nenhuma. ★ E COM O ROLADOR NA LISTA, A RAZÃO DE OCULTAÇÃO ACABOU: nada mais passa por baixo deste rodapé. As camadas ficam porque a superfície opaca é o que está no ar hoje e trocá-la mexeria no pixel sem pedido de ninguém — a limpeza está registrada nas Descobertas do ROADMAP, para a Revisão de Marco triar. */ .pop__rodape{ flex:0 0 auto; /* a margem lateral negativa SAIU junto com o padding lateral da caixa (FIX-M0.3-q): sem padding a compensar, ela puxaria o rodapé para fora */ margin:0 0 -14px; padding:0 14px 14px; background-color:rgba(10,9,16,.92); background-image:linear-gradient(rgba(10,9,16,.92), rgba(10,9,16,.92)), linear-gradient(rgba(10,9,16,.92), rgba(10,9,16,.92)); } .pop__acoes{ display:flex; justify-content:space-between; gap:8px; } /* botões do rodapé do popover — o "aplicar" é o único cheio da peça inteira */ /* O ALVO DE TOQUE CRESCE PARA BAIXO, SEM MARGEM NEGATIVA (FIX-M0.3-q), e é o mesmo desenho de `.painel__acoes .chip` em css/agentes.css: aqui o rodapé é o FIM da caixa, então crescer não cobre nada que esteja atrás. Medido antes: 101 × 27,52px, contra os 44 do item 6 do checklist do PADROES. O `display:inline-flex` NÃO É ENFEITE — sem ele o `min-height` é uma promessa que depende do default do agente de usuário. `