@aurea-uds/core 0.19.1 → 0.23.0

package/dist/aurea.css

@@ -40,6 +40,7 @@
   --radius-md:10px;
   --radius-lg:16px;
   --radius-card:22px;
+  --radius-sheet:32px;
   --radius-control:999px;
   --radius-full:var(--radius-control);
   --border-width:1px;
@@ -496,12 +497,61 @@ img,svg { display:block; }
 .grid-fixed { grid-template-columns:repeat(var(--grid-cols,1),minmax(0,1fr)); }
 /* AN-08 (03/10/2026): a largura mínima da coluna, por nome — a trava de um consumidor reprova medida
    escrita, e `min="sm"` virava UMA coluna sem aviso (o `--grid-min` inválido derruba a regra inteira).
-   O HeroUI não tem `Grid`; nenhum número é novo, cada um já mede uma grade ou uma caixa daqui:
+   A referência não tem `Grid`; nenhum número é novo, cada um já mede uma grade ou uma caixa daqui:
      xs  8rem — a miniatura da `.gallery` (`--gallery-min`)
      sm 12rem — a célula da `.health-matrix`
      md 15rem — o padrão do `.grid`, logo acima (sem classe)
-     lg 20rem — o `.dialog-xs`, o `max-w-xs` do HeroUI */
+     lg 20rem — o `.dialog-xs`, a menor largura de diálogo da referência */
 .grid-min-xs { --grid-min:8rem; } .grid-min-sm { --grid-min:12rem; } .grid-min-lg { --grid-min:20rem; }
+/* GAR-03 (06/10/2026): `Grid.Item span` — o item ocupa N colunas da grade, o "7 de 12" de página
+   de site (`<Grid columns={12}>`). Estas são as regras do valor SIMPLES; o valor por tela
+   (`vp-md:grid-span-7`) e por contêiner (`ct-sm:grid-span-6`) é gerado na camada responsiva, no
+   fim deste arquivo, e o gerador confere que os corpos são idênticos aos daqui. */
+.grid-span-1 { grid-column:span 1 / span 1; } .grid-span-2 { grid-column:span 2 / span 2; } .grid-span-3 { grid-column:span 3 / span 3; }
+.grid-span-4 { grid-column:span 4 / span 4; } .grid-span-5 { grid-column:span 5 / span 5; } .grid-span-6 { grid-column:span 6 / span 6; }
+.grid-span-7 { grid-column:span 7 / span 7; } .grid-span-8 { grid-column:span 8 / span 8; } .grid-span-9 { grid-column:span 9 / span 9; }
+.grid-span-10 { grid-column:span 10 / span 10; } .grid-span-11 { grid-column:span 11 / span 11; } .grid-span-12 { grid-column:span 12 / span 12; }
+.grid-item { min-width:0; }
+/* GAR-02 (06/10/2026): `Container` — a largura de leitura de uma página de SITE, centrada, com o
+   respiro dos lados que cresce com a tela. A referência principal não tem; na fila de referências,
+   a primeira que tem usa um contêiner de 1280px (na folha de tema dela) e o respiro de 16
+   que vira 32 na tela média (o cabeçalho dela). Nenhum número é novo: 1280 é
+   o `--breakpoint-xl`, 16 e 32 são `--space-4` e `--space-8`, e o ponto da troca é o
+   `--breakpoint-md` (768 — `@media` não lê `var()`, daí o literal, como na camada responsiva).
+   `size` usa os mesmos nomes da escala de pontos; `full` tira o teto. */
+.container { box-sizing:border-box; inline-size:100%; max-inline-size:var(--breakpoint-xl); margin-inline:auto; padding-inline:var(--space-4); }
+.container-sm { max-inline-size:var(--breakpoint-sm); } .container-md { max-inline-size:var(--breakpoint-md); }
+.container-lg { max-inline-size:var(--breakpoint-lg); } .container-2xl { max-inline-size:var(--breakpoint-2xl); }
+.container-full { max-inline-size:none; }
+@media (min-width:768px) { .container { padding-inline:var(--space-8); } }
+/* GAR-04 e GAR-05 (06/10/2026): `Section` — a faixa de ponta a ponta de uma página de site, com
+   fundo próprio e respiro vertical de site. Nenhuma referência aberta tem a peça (as seções de uma
+   delas são pagas, não lidas), então o respiro é escolha da Aurea, com tokens que já existem: `--space-16`
+   (64) e `--space-24` (96) a partir do `md`; `sm` é a metade, `--space-8` e `--space-12`. O fundo e a letra
+   saem dos tokens do PRÓPRIO elemento: com `theme="dark"` a seção vira uma faixa escura dentro da
+   página clara, e as regras de tema claro não vazam para dentro dela (a guarda do GAR-05). */
+.section { box-sizing:border-box; inline-size:100%; padding-block:var(--space-16); background:var(--background); color:var(--foreground); }
+.section-card { background:var(--card); color:var(--card-foreground); }
+.section-inset { background:var(--surface-inset); }
+.section-spacing-sm { padding-block:var(--space-8); }
+@media (min-width:768px) { .section { padding-block:var(--space-24); } .section-spacing-sm { padding-block:var(--space-12); } }
+/* GAR-06 (07/10/2026): a `Section` variant="footer" — o rodapé de site, uma faixa como as outras
+   (fundo, respiro e tema vêm dela). No celular tudo empilha numa coluna; a partir de 768 a marca
+   fica à esquerda e as colunas de links se repartem à direita, cada uma com pelo menos 8rem (a
+   mesma medida do `.grid-min-xs`). A linha legal fecha embaixo, separada por um fio. */
+.section-footer-top { display:flex; flex-direction:column; gap:var(--space-8); }
+.section-footer-nav { display:grid; grid-template-columns:minmax(0,1fr); gap:var(--space-8); }
+.section-footer-group { min-inline-size:0; }
+.section-footer-title { margin:0 0 var(--space-3); font-size:var(--text-sm); font-weight:var(--weight-semibold); line-height:var(--leading-tight); color:var(--foreground); }
+.section-footer-links { display:grid; gap:var(--space-2); margin:0; padding:0; list-style:none; }
+.section-footer-link { color:var(--muted-foreground); font-size:var(--text-sm); text-decoration:none; }
+.section-footer-link:hover { color:var(--foreground); }
+.section-footer-legal { display:flex; flex-wrap:wrap; justify-content:space-between; gap:var(--space-2) var(--space-6); margin-block-start:var(--space-8); padding-block-start:var(--space-6); border-block-start:var(--border-width) solid var(--border); color:var(--muted-foreground); font-size:var(--text-sm); }
+@media (min-width:768px) {
+  .section-footer-top { flex-direction:row; justify-content:space-between; }
+  .section-footer-brand { flex:1 1 0; min-inline-size:0; }
+  .section-footer-nav { flex:2 1 0; grid-template-columns:repeat(auto-fit,minmax(8rem,1fr)); }
+}
 
 /* ========================================================================== */
 /* 03. APP SHELL E DOCUMENTAÇÃO                                                */
@@ -545,6 +595,56 @@ img,svg { display:block; }
 /* .brand nasceu como cabeçalho VERTICAL da lateral (borda embaixo + respiro); no topo
    ele deita, então some com a borda e a margem — o lockup em si continua o mesmo. */
 .topbar .brand { min-height:auto; margin:0; padding:0; border:0; }
+/* GAR-01 (07/10/2026): o cabeçalho de SITE — o `Header` com `items`. A altura é o `--topbar-height`
+   (64, a mesma da referência principal); os links ficam a --space-4 um do outro, como nela; o atual
+   é o `[aria-current]`, com a cor de destaque e o peso médio. Abaixo de 768 (md-1, escala) os links
+   saem da barra e descem num painel que é um POPOVER nativo (`<nav popover="auto">`), sem
+   JavaScript — o mesmo mecanismo da gaveta do `AppShell`: o Esc e o toque fora fecham. O desenho do
+   botão é o glifo `list` do Phosphor (e o `x` com o painel aberto), em máscara: a cor é a do texto. */
+/* Os 64 são a faixa inteira, como na referência: sem respiro vertical, e o fio (`divider`) fica por
+   fora. Medido: com o respiro da `flush` a barra saía com 81. */
+.topbar-site { min-height:var(--topbar-height); padding-block:0; }
+.topbar-contained { padding-inline:0; }
+.topbar-inner { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:var(--space-4); min-height:inherit; }
+/* Os links vão para a direita, logo antes das ações, como no guia da referência (a marca numa ponta,
+   a navegação na outra). No celular eles saem, e são as ações que encostam à direita. */
+.topbar-nav { display:flex; margin-inline-start:auto; }
+/* Abaixo de 1024 a regra da barra do `AppShell` manda o `nav` filho para uma segunda linha
+   (`.topbar > nav`, mais abaixo). O cabeçalho de SITE sem `maxWidth` também tem o `nav` como filho
+   e caía junto: medido em 900, os links desciam e a barra ia de 64 para 80. Aqui os links ficam na
+   linha da marca; se não couberem, a barra quebra por conteúdo, como já faz. */
+.topbar-site > .topbar-nav { order:0; flex-basis:auto; }
+.topbar-links { display:flex; align-items:center; gap:var(--space-4); margin:0; padding:0; list-style:none; }
+.topbar-link { display:inline-flex; align-items:center; min-block-size:var(--control-h-md); color:var(--muted-foreground); font-size:var(--text-sm); text-decoration:none; }
+.topbar-link:hover { color:var(--foreground); }
+.topbar-link[aria-current] { color:var(--primary-emphasis); font-weight:var(--weight-medium); }
+.topbar-actions { display:flex; align-items:center; gap:var(--space-2); margin-inline-start:auto; }
+.topbar-site .topbar-actions { margin-inline-start:0; }
+/* O botão e o painel só existem no celular, e só onde há popover. O @supports lá embaixo é a rede,
+   como na gaveta do `AppShell`: navegador sem popover não esconde o `<nav popover>` sozinho, e o
+   painel apareceria solto na barra. Ali os links ficam na barra, que já quebra linha por conteúdo, e
+   o botão não aparece (não haveria o que abrir). Duas classes no botão porque o `.btn` declara o
+   próprio `display`. */
+.btn.topbar-menu-toggle, .topbar-menu-panel { display:none; }
+.topbar-menu-icon { display:block; inline-size:var(--icon-md); block-size:var(--icon-md); background:currentColor; -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M224,128a8,8,0,0,1-8,8H40a8,8,0,0,1,0-16H216A8,8,0,0,1,224,128ZM40,72H216a8,8,0,0,0,0-16H40a8,8,0,0,0,0,16ZM216,184H40a8,8,0,0,0,0,16H216a8,8,0,0,0,0-16Z'/%3E%3C/svg%3E") center/contain no-repeat; mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M224,128a8,8,0,0,1-8,8H40a8,8,0,0,1,0-16H216A8,8,0,0,1,224,128ZM40,72H216a8,8,0,0,0,0-16H40a8,8,0,0,0,0,16ZM216,184H40a8,8,0,0,0,0,16H216a8,8,0,0,0,0-16Z'/%3E%3C/svg%3E") center/contain no-repeat; }
+.topbar:has(.topbar-menu-panel:popover-open) .topbar-menu-icon { -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M205.66,194.34a8,8,0,0,1-11.32,11.32L128,139.31,61.66,205.66a8,8,0,0,1-11.32-11.32L116.69,128,50.34,61.66A8,8,0,0,1,61.66,50.34L128,116.69l66.34-66.35a8,8,0,0,1,11.32,11.32L139.31,128Z'/%3E%3C/svg%3E"); mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M205.66,194.34a8,8,0,0,1-11.32,11.32L128,139.31,61.66,205.66a8,8,0,0,1-11.32-11.32L116.69,128,50.34,61.66A8,8,0,0,1,61.66,50.34L128,116.69l66.34-66.35a8,8,0,0,1,11.32,11.32L139.31,128Z'/%3E%3C/svg%3E"); }
+/* Aberto, o painel vai para a camada de cima, fora do fluxo da barra, e o navegador lhe dá `inset:0`,
+   `margin:auto`, borda e a largura do conteúdo: tudo isso se desfaz aqui. Sem âncora, ele fica fixo
+   logo abaixo dos 64 da barra. Com âncora (o @supports abaixo), cola no fim da barra onde ela estiver
+   e toma a largura dela — na `floating`, a da caixa. O `- border-width` põe o fio de cima do painel
+   EM CIMA do fio da barra (o `divider`, a borda da `floating`), e não um fio duplo. A altura tem teto
+   e rola por dentro; a folga de --space-8 cobre a margem de cima da `floating`. */
+.topbar-menu-panel:popover-open { position:fixed; inset:auto; inset-block-start:var(--topbar-height); inset-inline:0; inline-size:auto; block-size:auto; max-block-size:calc(100dvh - var(--topbar-height) - var(--space-8)); overflow:auto; margin:0; padding:var(--space-4); border:0; border-block:var(--border-width) solid var(--border); background:var(--background); color:var(--foreground); }
+.topbar-menu-panel .topbar-links { flex-direction:column; align-items:stretch; gap:var(--space-2); }
+/* `anchor-scope` prende o nome da âncora a cada cabeçalho: com dois na página (cada um com o seu
+   `menuId`), o painel de um não cola no outro. Onde não houver `anchor-scope`, vale o último. */
+@supports (anchor-name:--a) {
+  .topbar-site { anchor-name:--aurea-header; anchor-scope:--aurea-header; }
+  .topbar-menu-panel:popover-open { position-anchor:--aurea-header; inset-block-start:calc(anchor(bottom) - var(--border-width)); inset-inline-start:anchor(start); inset-inline-end:anchor(end); }
+}
+@supports selector(:popover-open) {
+@media (max-width:767px) { .topbar-site .topbar-nav { display:none; } .topbar-site .topbar-actions { margin-inline-start:auto; } .topbar-site .btn.topbar-menu-toggle { display:inline-flex; } .topbar-menu-panel:popover-open { display:block; } }
+}
 /* altura fixa = janela menos topo e as 3 folgas; assim a caixa parece cheia mesmo com
    poucos itens (é o que as referências mostram) e sobra o que rolar por dentro. */
 /* E O TETO É O CONTAINER, NÃO A JANELA. A altura acima é da JANELA, e sozinha ela faz a lateral
@@ -572,8 +672,8 @@ img,svg { display:block; }
    Esta regra é a de `b0599be`, íntegra: estado conhecido bom, provado pelo portão de pixel em vez
    de reafinado à mão. */
 .sidebar { --shell-top:calc(var(--topbar-height) + var(--space-4)*2); position:sticky; top:var(--shell-top); align-self:start; height:calc(100vh - var(--shell-top) - var(--space-4)); max-height:calc(100% - var(--space-4)*2); margin:var(--space-4); display:flex; flex-direction:column; gap:var(--space-1); padding:var(--space-1); overflow:auto; border:1px solid var(--sidebar-border); border-radius:var(--radius-card); background:var(--sidebar); color:var(--sidebar-foreground); }
-/* RENTE É A VARIANTE, e ela existe porque o Victor mediu quatro aplicativos que rodam na mão:
-   Cloudflare, Sophos, o app do Claude e o painel do próprio HeroUI. Nenhum flutua a lateral — ela
+/* RENTE É A VARIANTE, e ela existe porque o Victor mediu quatro aplicativos que rodam na mão,
+   um deles o painel da própria referência de desenho. Nenhum flutua a lateral — ela
    encosta nas bordas, ocupa a altura toda e se separa do conteúdo por UM TRAÇO, não por um vão.
    É a ÚNICA exceção à caixa flutuante nesta casa, e não generaliza: card, diálogo e painel seguem
    flutuando.
@@ -710,7 +810,7 @@ img,svg { display:block; }
    sozinho não nomeia nada, e essa é a falha clássica do padrão de trilho. */
 .sidebar-collapsed { padding-inline:var(--space-2); }
 /* NO TRILHO O ITEM É QUADRADO E CENTRADO, não uma linha esticada. Medido no fonte da referência
-   em 18/08/2026: `NavButton` com `iconOnly` é `size-9` — 36×36, exatamente o nosso `--control-h-md`.
+   em 18/08/2026: o botão de navegação só de ícone é 36×36, exatamente o nosso `--control-h-md`.
    Antes o item herdava `width:100%` e virava 71×36 dentro de um trilho de 88: um retângulo largo
    que, com o raio de linha, fechava nas pontas e lia como CÁPSULA. Quadrado é o que a referência
    desenha, e é o que o olho reconhece como botão de ícone. */
@@ -783,13 +883,13 @@ img,svg { display:block; }
    A primeira versão pendurava no ITEM, com `inset-inline-start:50%`: em barra de coluna passa
    despercebido, e na variante de LINHA os 50% do item caem no meio do RÓTULO. O Victor achou
    assim, com o número cobrindo o nome inteiro (17/08/2026).
-   A pesquisa que corrigiu: Material 3 põe o distintivo "sobre o ícone, no canto superior
-   direito", e os guias de barra de abas do iOS dizem o mesmo com a razão junto — encostar na
+   A pesquisa que corrigiu: uma das referências de desenho põe o distintivo "sobre o ícone, no
+   canto superior direito", e os guias de barra de abas do iOS dizem o mesmo com a razão junto — encostar na
    borda é para ser visto, sobrepor conteúdo é hesitação num controle que se usa o tempo todo.
    `inset-inline-end` e não `right`: o eixo espelha sozinho em RTL, e transform não espelharia.
    O `min-` da caixa é para o contador ter onde se ancorar quando o item não tem ícone.
    A CAIXA É `--icon-lg` (24px) e o contador `--space-4` (16px) porque a PROPORÇÃO foi medida
-   em aplicativo que roda: WhatsApp, YouTube, Mercado Livre e Shopee, nos prints do Victor de
+   em aplicativo que roda: um de mensagens, um de vídeo e duas lojas, nos prints do Victor de
    17/08/2026 — ícone ~24, contador ~16, razão **0,67**. A primeira versão tinha ícone de 16 e
    contador de 18: razão 1,12, o contador MAIOR que o ícone. Foi o que ele viu e mandou refazer. */
 /* A MOLDURA É FIXA E VALE PARA OS SETE INDICADORES. Medido em 20/08/2026, e quem viu foi o
@@ -802,13 +902,13 @@ img,svg { display:block; }
 
    O NÚMERO É PESQUISADO, e a exigência é do Victor em 20/08/2026: *"vá pesquisar e descubra qual
    padrão é usado, pesquise não invente medidas"*. Ele pegou 2.25rem saído da minha cabeça.
-   `2rem` = 32px é a ALTURA DO INDICADOR ATIVO do Material 3 (`m3.material.io/components/
-   navigation-bar/specs` e a doc do `material-components-android`: indicador 64×32dp, canto
+   `2rem` = 32px é a ALTURA DO INDICADOR ATIVO de uma das referências de desenho (a especificação
+   da barra de navegação dela e a doc da implementação dela para Android: indicador 64×32dp, canto
    totalmente arredondado, sobre um ícone de 24dp). 24 de ícone dentro de 32 deixa 4 de folga de
-   cada lado, que é a mesma folga de 4dp que o M3 usa entre o indicador e o rótulo.
+   cada lado, que é a mesma folga de 4dp que essa referência usa entre o indicador e o rótulo.
    O ALVO DE TOQUE não é este número e continua sendo o `min-height` do item: `--control-h-lg`
-   entrega 42px em comfortable e 48 em spacious, contra os 44pt mínimos da HIG da Apple e os
-   48dp do Material. A moldura é a caixa do DESENHO; o alvo é o item inteiro. */
+   entrega 42px em comfortable e 48 em spacious, contra os 44pt mínimos das diretrizes do iOS e
+   os 48dp da mesma referência. A moldura é a caixa do DESENHO; o alvo é o item inteiro. */
 .bottom-nav-mark { position:relative; flex:none; display:inline-flex; align-items:center; justify-content:center; width:var(--bottomnav-ring); height:var(--bottomnav-ring); border-radius:var(--radius-control); }
 /* A BARRA MAIS BAIXA — pedido do Victor, 30/09/2026, aprovado pela imagem: *"ele é muito largo, e
    é assim por conta da distância entre o ícone em cima e o texto embaixo"*. A moldura de 32 só
@@ -817,7 +917,7 @@ img,svg { display:block; }
    ícone e o texto. Fora dos redondos (e na barra sem classe de indicador, a do HTML puro) a
    moldura fica da altura do ícone, e o vão do item cai para
    `--space-05`. A largura continua 32: é ela que dá o canto ao contador. O mesmo conserto está no
-   nativo (`navigation.tsx`). ~~A folga de 4dp do M3 entre o indicador e o rótulo~~ vale só para
+   nativo (`navigation.tsx`). ~~A folga de 4dp da referência entre o indicador e o rótulo~~ vale só para
    os redondos agora. */
 .bottom-nav-mark { height:var(--icon-lg); }
 .bottom-nav-ind-circle .bottom-nav-mark, .bottom-nav-ind-circle-raised .bottom-nav-mark, .bottom-nav-ind-circle-outline .bottom-nav-mark { height:var(--bottomnav-ring); }
@@ -830,7 +930,7 @@ img,svg { display:block; }
    ÚNICA por contrato, e uma regra contextual fazia o mesmo nome medir 16px numa página e 24px
    noutra. Tamanho é do componente, não do lugar onde ele cai. */
 /* SEM NÚMERO, É PONTO. Três dos quatro aplicativos medidos usam o ponto puro para "tem coisa
-   nova" — YouTube (Inscrições), WhatsApp (Atualizações e Você). O consumidor pede pelo vazio:
+   nova" — o de vídeo (na aba de inscrições) e o de mensagens (em duas abas). O consumidor pede pelo vazio:
    `badge: ""`. A cor é a de AVISO e não a da marca, também como nos quatro: o contador não é
    decoração do item atual, é alerta.
    ⚠ Ponto não tem nome acessível — não há o que ler. Quem usa ponto põe o sentido no RÓTULO do
@@ -848,21 +948,22 @@ img,svg { display:block; }
 /* O PESO DO RÓTULO NÃO MUDA COM A ESCOLHA — 03/10/2026, pedido do Victor: *"quero ele estático,
    apenas os botões dinâmicos"*. Era `--weight-medium` só no escolhido, e texto mais grosso é texto
    mais LARGO: no `width="content"` a barra mudava de largura a cada toque, nos sete indicadores
-   (medido: 247,7 contra 249,0). Agora todos os rótulos são `--weight-medium` — o "Label medium" do
-   Material 3, que no Expressive também deixou de engrossar o escolhido. O que marca a escolha é a
+   (medido: 247,7 contra 249,0). Agora todos os rótulos são `--weight-medium` — o rótulo médio de
+   uma das referências de desenho, que na revisão mais nova também deixou de engrossar o escolhido. O que marca a escolha é a
    cor, o ícone cheio e a forma. Quem cobra: `geometry.spec`, "a barra não se mexe". */
 .bottom-nav-item { font-weight:var(--weight-medium); }
-/* A ALTURA DO TELEGRAM — 03/10/2026, pedido do Victor (*"ainda acho ele muito largo comparado a
-   bottomnav como do telegram"*; "largo" é a grossura). Medido no fonte do Telegram para Android
-   12.10.6: pílula de 56, botão de 48, ícone de 24, nome de 12 numa linha de 16. O recheio de cima
-   e de baixo cai de `--space-1` para `--space-05`, e a linha do nome é a do Telegram: o tamanho
+/* A ALTURA DE REFERÊNCIA — 03/10/2026, pedido do Victor (*"ainda acho ele muito largo comparado a
+   bottomnav como do [aplicativo de mensagens]"*; "largo" é a grossura). Medido no fonte desse
+   aplicativo para Android: pílula de 56, botão de 48, ícone de 24, nome de 12 numa
+   linha de 16. O recheio de cima
+   e de baixo cai de `--space-1` para `--space-05`, e a linha do nome é a desse aplicativo: o tamanho
    mais `--space-1` (12 + 4). Com a do corpo (1,5) ela media 18; com a `--leading-tight` (14,4) a
    perna do "j" passava 1 da caixa, e a caixa corta (`overflow:hidden`, para as reticências).
-   Fica 56 nos indicadores sem moldura e 64 nos que têm a de 32 — a altura do Material 3
-   Expressive. O mesmo no `navigation.tsx`. */
+   Fica 56 nos indicadores sem moldura e 64 nos que têm a de 32 — a altura de uma das referências
+   de desenho. O mesmo no `navigation.tsx`. */
 .bottom-nav-item { padding-block:var(--space-05); }
 /* O NOME COLADO NO ÍCONE — 03/10/2026, pedido do Victor (*"o texto pode ficar mais próximo do
-   ícone"*): vão ZERO, como no Telegram, em que o nome começa onde a caixa do ícone acaba. O
+   ícone"*): vão ZERO, como no aplicativo de mensagens medido, em que o nome começa onde a caixa do ícone acaba. O
    `--space-05` de 30/09/2026 somava 2 aos 2 de folga da linha do nome: medido de tinta a tinta,
    eram 9 no `pill` e 13 no `circle-bold`. No `circle-bold` a moldura de 32 também sai (logo
    abaixo): lá o círculo é o disco, não ela. */
@@ -915,7 +1016,7 @@ img,svg { display:block; }
 .bottom-nav-ind-subtle .bottom-nav-item { border-radius:calc(var(--radius-card) - var(--space-1)); }
 .bottom-nav-ind-pill .bottom-nav-item { border-radius:var(--radius-control); }
 /* OS QUATRO REDONDOS envolvem SÓ O ÍCONE, e o rótulo fica embaixo, fora da forma. É o que as
-   quatro telas do Victor mostram e o que o WhatsApp faz no aplicativo que roda; pintar o item
+   quatro telas do Victor mostram e o que um aplicativo de mensagens faz rodando; pintar o item
    inteiro não aparece em nenhum dos dois lugares. A moldura vira quadrado de lado fixo para ser
    CÍRCULO e não elipse — o rótulo é que é largo, e ele está fora daqui. */
 .bottom-nav-ind-circle .bottom-nav-mark,.bottom-nav-ind-circle-raised .bottom-nav-mark,.bottom-nav-ind-circle-outline .bottom-nav-mark { border-radius:var(--radius-full); }
@@ -931,8 +1032,8 @@ img,svg { display:block; }
    A auditoria recusou a antiga `pill` sólida (achado 5: "o ativo assume presença de CTA"), e a
    diferença aqui é a FORMA: círculo do tamanho do alvo de toque lê como destino marcado; cápsula
    larga, esticada pelo rótulo, lê como botão de ação primária dentro da navegação. */
-/* 3.5rem = 56px, e também é número de fora: é a largura do indicador ativo do Material 3
-   Expressive (56dp) e a altura do indicador expandido na mesma doc. É a única forma aqui que
+/* 3.5rem = 56px, e também é número de fora: é a largura do indicador ativo de uma das referências
+   de desenho (56dp) e a altura do indicador expandido na mesma doc. É a única forma aqui que
    envolve ícone E rótulo, então usa a medida expandida e não a de 32. */
 /* `padding-inline: space-1` — o recheio de sempre do item (`.bottom-nav-item`). No `width="content"`
    o item ganha `space-3` dos lados, e dentro dos 56 sobravam 32 para o rótulo: "Avisos" (35)
@@ -954,8 +1055,8 @@ img,svg { display:block; }
    se esconde. Fio fino não substitui contraste quando as duas cores são claras. */
 .bottom-nav-ind-circle-bold .bottom-nav-item[aria-current] .badge { background:var(--primary-foreground); color:var(--primary); border-color:transparent; }
 .bottom-nav-ind-circle-bold .bottom-nav-item[aria-current] .bottom-nav-badge { color:var(--primary-foreground); }
-/* ── CÁPSULA (`capsule`) — a "A" da bancada do Victor, 03/10/2026: o Material 3 Expressive ────
-   A moldura do ícone vira a cápsula de 56 × 32 do indicador ativo do M3 Expressive
+/* ── CÁPSULA (`capsule`) — a "A" da bancada do Victor, 03/10/2026: o modelo de uma das referências ─
+   A moldura do ícone vira a cápsula de 56 × 32 do indicador ativo dessa referência
    (`--bottomnav-bold` × `--bottomnav-ring`), em TODOS os itens; só a do escolhido é pintada, de
    amarelo sólido. O rótulo fica embaixo, fora dela — é isso que a separa do antigo bloco amarelo
    que a auditoria de 20/08/2026 recusou (achado 5): a forma não estica com o nome.
@@ -1031,8 +1132,8 @@ img,svg { display:block; }
    folga no print: com o `--card-pad` de 20px o realce da linha começava a 21px da borda e o texto
    a 65px, e a linha ocupava só 88% da largura — realce flutuando no meio de uma caixa grande em
    vez de preencher o painel. `--card-pad` é padding de CONTEÚDO; lista de linhas tocáveis quer
-   outra escala. É a anatomia dos dois exemplos de `NavigationMenu` que ele mandou: o item leva
-   `p-3` (que a nossa linha já tem) e o contêiner quase não leva nada.
+   outra escala. É a anatomia dos dois exemplos de menu de navegação que ele mandou: o item leva
+   o recheio que a nossa linha já tem, e o contêiner quase não leva nada.
    Filho DIRETO de propósito: um card com layout grande e uma lista pequena dentro não pode perder
    o padding dele. E `:has()` já é idioma desta folha (quatro usos antes deste). */
 .card:has(> .nav-list) { padding:var(--space-1); }
@@ -1062,7 +1163,17 @@ img,svg { display:block; }
 .eyebrow { display:inline-flex; align-items:center; gap:8px; color:var(--primary); font-size:12px; font-weight:var(--weight-bold); letter-spacing:var(--tracking-widest); text-transform:uppercase; }
 /* No claro o amarelo puro como texto não alcança 4.5:1 (axe). Aprofundar com --foreground
    mantém o matiz da marca e passa o AA; no escuro segue o amarelo cheio. */
-[data-theme="light"] .eyebrow { color:color-mix(in oklab, var(--primary) 45%, var(--foreground)); }
+/* GAR-05 (06/10/2026): TODA regra `[data-theme="light"] X` deste arquivo leva a guarda
+   `:where(:not([data-theme="dark"] *),[data-theme="dark"] [data-theme="light"] *)`. Sem ela, uma
+   faixa ESCURA dentro de uma página clara (`<section data-theme="dark">`) herdava as 22 regras de
+   tema claro: o botão de contorno saía com a tinta escurecida do claro sobre o fundo escuro. A
+   guarda diz "não vale dentro de uma faixa escura, a não ser que haja de novo uma faixa clara
+   dentro dela", e é `:where` para a força de cada regra não mudar — a ordem entre elas continua a
+   de sempre, e numa página sem faixa escura o computado é o mesmo byte a byte. Limite declarado:
+   quatro níveis alternados (escuro > claro > escuro > claro) não são cobertos. Quem cobra:
+   `tests/visual/tema-na-secao.spec.ts`, e o `tema-na-secao.test.tsx` reprova regra nova sem a
+   guarda. */
+[data-theme="light"] .eyebrow:where(:not([data-theme="dark"] *),[data-theme="dark"] [data-theme="light"] *) { color:color-mix(in oklab, var(--primary) 45%, var(--foreground)); }
 .demo { min-width:0; padding:var(--card-pad); border:1px solid var(--border); border-radius:var(--radius-card); background:var(--card); color:var(--card-foreground); box-shadow:none; }
 
 /* ========================================================================== */
@@ -1075,8 +1186,8 @@ img,svg { display:block; }
 .btn:hover:not(:disabled):not([aria-disabled="true"]) { transform:none; } .btn:active:not(:disabled) { transform:scale(.97); opacity:.9; }
 /* Duas formas de "não dá para fazer isto", e a diferença é QUEM alcança a explicação.
    `:disabled` tira o controle da ordem de foco — medido em 13/08/2026: quem usa teclado nunca
-   chega nele, então uma dica pendurada ali não é lida por ninguém. O embrulho de <span> que a
-   referência do MUI documenta resolve o ponteiro e NÃO resolve o teclado (o span nasce com
+   chega nele, então uma dica pendurada ali não é lida por ninguém. O embrulho de <span> que uma
+   das referências documenta resolve o ponteiro e NÃO resolve o teclado (o span nasce com
    tabIndex -1, medido). `[aria-disabled="true"]` mantém o controle focável e inerte — é ele
    que se usa quando existe um PORQUÊ a dizer. A pele é a mesma; o que muda é o alcance. */
 .btn:disabled,.btn[aria-disabled="true"] { opacity:.45; cursor:not-allowed; }
@@ -1104,7 +1215,7 @@ img,svg { display:block; }
    Medido em 21/08/2026: existia só no `apps/docs/index.html`, escrito à mão. O core não tinha,
    o `AppShell` não tinha, e as 200 páginas do catálogo não tinham — ou seja, a página de
    demonstração era acessível e o componente que o consumidor instala não era. Achado ao
-   conferir se o `skip-nav` da `shark-ui` era gap de verdade (`G-A11Y-03`).
+   conferir se o `skip-nav` de uma das referências era gap de verdade (`G-A11Y-03`).
    Fora da tela por TRANSFORMAÇÃO, não por `display:none` nem por `left:-9999px`: o primeiro
    tira do foco (e um link que não recebe foco não pula nada), e o segundo faz o navegador
    rolar a página lateralmente ao focar. Aparece no foco, que é o único momento em que precisa
@@ -1138,16 +1249,16 @@ img,svg { display:block; }
 .btn-danger-outline:hover:not(:disabled):not([aria-disabled="true"]) { --btn-bg:color-mix(in oklab, var(--destructive) 14%, transparent); }
 .btn-danger-ghost { --btn-bg:transparent; --btn-fg:var(--destructive); --btn-border:transparent; }
 .btn-danger-ghost:hover:not(:disabled):not([aria-disabled="true"]) { --btn-bg:color-mix(in oklab, var(--destructive) 14%, transparent); }
-[data-theme="light"] .btn-danger-outline,[data-theme="light"] .btn-danger-ghost,[data-theme="light"] .btn-link-danger { --btn-fg:color-mix(in oklab, var(--destructive) 62%, var(--foreground)); }
+[data-theme="light"] .btn-danger-outline:where(:not([data-theme="dark"] *),[data-theme="dark"] [data-theme="light"] *),[data-theme="light"] .btn-danger-ghost:where(:not([data-theme="dark"] *),[data-theme="dark"] [data-theme="light"] *),[data-theme="light"] .btn-link-danger:where(:not([data-theme="dark"] *),[data-theme="dark"] [data-theme="light"] *) { --btn-fg:color-mix(in oklab, var(--destructive) 62%, var(--foreground)); }
 /* A MESMA correção para a marca, que estava faltando. Medido em 21/08/2026 na varredura de AA
    da matriz de tom: `.btn-primary-outline` e `.btn-primary-ghost` pintavam o rótulo com
    `--primary` cru, e no tema claro isso dá **1.73:1** — reprovação grave, em componente
    publicado. O `.btn-link-primary` logo abaixo já tinha a correção; as duas irmãs nasceram sem
    ela. Não é conserto local: é a mesma pergunta do §21 — quem MAIS tem esse problema? — e a
    resposta foram estas duas, mais a borda, que é componente de UI e pede 3:1. */
-[data-theme="light"] .btn-primary-outline,[data-theme="light"] .btn-primary-ghost { --btn-fg:color-mix(in oklab, var(--primary) 45%, var(--foreground)); }
-[data-theme="light"] .btn-primary-outline { --btn-border:color-mix(in oklab, var(--primary) 45%, var(--foreground)); }
-[data-theme="light"] .btn-outline.btn-tone-brand { --btn-border:color-mix(in oklab, var(--primary) 45%, var(--foreground)); }
+[data-theme="light"] .btn-primary-outline:where(:not([data-theme="dark"] *),[data-theme="dark"] [data-theme="light"] *),[data-theme="light"] .btn-primary-ghost:where(:not([data-theme="dark"] *),[data-theme="dark"] [data-theme="light"] *) { --btn-fg:color-mix(in oklab, var(--primary) 45%, var(--foreground)); }
+[data-theme="light"] .btn-primary-outline:where(:not([data-theme="dark"] *),[data-theme="dark"] [data-theme="light"] *) { --btn-border:color-mix(in oklab, var(--primary) 45%, var(--foreground)); }
+[data-theme="light"] .btn-outline.btn-tone-brand:where(:not([data-theme="dark"] *),[data-theme="dark"] [data-theme="light"] *) { --btn-border:color-mix(in oklab, var(--primary) 45%, var(--foreground)); }
 /* LINK: aparência de texto, sem cápsula e sem altura de controle — o sublinhado é o que diz
    que é clicável, então ele existe desde o repouso (revelar no hover esconde a affordance).
    Três tons: neutro, marca e destrutivo. No claro a marca aprofunda, senão não passa o AA. */
@@ -1157,7 +1268,7 @@ img,svg { display:block; }
 .btn-link { height:auto; min-height:24px; padding:0; gap:6px; border:0; border-radius:var(--radius-sm); --btn-bg:transparent; --btn-fg:var(--foreground); text-decoration:underline; text-underline-offset:3px; text-decoration-thickness:1px; }
 .btn-link:hover:not(:disabled):not([aria-disabled="true"]) { text-decoration-thickness:2px; }
 .btn-link-primary { --btn-fg:var(--primary); }
-[data-theme="light"] .btn-link-primary { --btn-fg:color-mix(in oklab, var(--primary) 45%, var(--foreground)); }
+[data-theme="light"] .btn-link-primary:where(:not([data-theme="dark"] *),[data-theme="dark"] [data-theme="light"] *) { --btn-fg:color-mix(in oklab, var(--primary) 45%, var(--foreground)); }
 .btn-link-danger { --btn-fg:var(--destructive); }
 /* pressed entra na linguagem única de "selecionado" acima; só-ícone não leva o fio. */
 /* Kbd — a tecla que dispara a ação, dentro ou fora do botão. Peça própria, não decoração. */
@@ -1204,11 +1315,11 @@ img,svg { display:block; }
 /* e o mesmo tom SEM caixa: contorno, fantasma, link e navegação. O token de tom já é
    "esta cor, legível contra a superfície DESTE tema", então não há correção por tema aqui. */
 .btn-tone-brand,.btn-tone-brand:hover:not(:disabled) { --btn-fg:var(--primary); }
-[data-theme="light"] .btn-tone-brand,[data-theme="light"] .btn-tone-brand:hover:not(:disabled) { --btn-fg:color-mix(in oklab, var(--primary) 45%, var(--foreground)); }
+[data-theme="light"] .btn-tone-brand:where(:not([data-theme="dark"] *),[data-theme="dark"] [data-theme="light"] *),[data-theme="light"] .btn-tone-brand:hover:not(:disabled):where(:not([data-theme="dark"] *),[data-theme="dark"] [data-theme="light"] *) { --btn-fg:color-mix(in oklab, var(--primary) 45%, var(--foreground)); }
 .btn-outline.btn-tone-brand { --btn-border:var(--primary); }
 .btn-tone-brand:not(.btn-link):hover:not(:disabled) { --btn-bg:color-mix(in oklab, var(--primary) 14%, transparent); }
 .btn-tone-danger,.btn-tone-danger:hover:not(:disabled) { --btn-fg:var(--destructive); }
-[data-theme="light"] .btn-tone-danger,[data-theme="light"] .btn-tone-danger:hover:not(:disabled) { --btn-fg:color-mix(in oklab, var(--destructive) 62%, var(--foreground)); }
+[data-theme="light"] .btn-tone-danger:where(:not([data-theme="dark"] *),[data-theme="dark"] [data-theme="light"] *),[data-theme="light"] .btn-tone-danger:hover:not(:disabled):where(:not([data-theme="dark"] *),[data-theme="dark"] [data-theme="light"] *) { --btn-fg:color-mix(in oklab, var(--destructive) 62%, var(--foreground)); }
 .btn-outline.btn-tone-danger { --btn-border:var(--destructive); }
 .btn-tone-danger:not(.btn-link):hover:not(:disabled) { --btn-bg:color-mix(in oklab, var(--destructive) 14%, transparent); }
 .btn-tone-success,.btn-tone-success:hover:not(:disabled) { --btn-fg:var(--success); }
@@ -1222,8 +1333,8 @@ img,svg { display:block; }
 .btn-tone-warning:not(.btn-link):not(.btn-solid):hover:not(:disabled) { --btn-bg:color-mix(in oklab, var(--warning) 14%, transparent); }
 .btn-nav:hover:not(:disabled):not([aria-disabled="true"]) { --btn-fg:var(--foreground); }
 /* O botão só de ícone é REDONDO, em todos os tamanhos — decisão do Victor, 25/09/2026
-   (ADR-0052). Era um quadrado de canto 10px (6px nos dois menores). O HeroUI 3.2.6 faz o botão só
-   de ícone redondo, e os botões de texto da Aurea já são cápsula: o de ícone era o único quadrado. */
+   (ADR-0052). Era um quadrado de canto 10px (6px nos dois menores). A referência faz o
+   botão só de ícone redondo, e os botões de texto da Aurea já são cápsula: o de ícone era o único quadrado. */
 .btn-icon { width:var(--control-h-md); padding:0; border-radius:var(--radius-full); }
 .btn-icon.btn-xs { width:var(--control-h-xs); }
 .btn-icon.btn-sm { width:var(--control-h-sm); } .btn-icon.btn-lg { width:var(--control-h-lg); }
@@ -1302,14 +1413,14 @@ img,svg { display:block; }
 .textarea { min-block-size:104px; padding-block:var(--space-3); padding-inline:var(--step-field-px,14px); resize:vertical; border-radius:var(--radius-lg); }
 /* chevron: cor = --muted-foreground de cada tema (dark #a1a1a1, light #505050); tokenizar na Fase 1 */
 .select { appearance:none; padding-inline-end:var(--step-select-pe,38px); background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23a1a1a1' stroke-width='1.6'/%3E%3C/svg%3E"); background-position:calc(100% - 12px) 50%; background-size:12px 8px; background-repeat:no-repeat; }
-[data-theme="light"] .select { background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23505050' stroke-width='1.6'/%3E%3C/svg%3E"); }
+[data-theme="light"] .select:where(:not([data-theme="dark"] *),[data-theme="dark"] [data-theme="light"] *) { background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23505050' stroke-width='1.6'/%3E%3C/svg%3E"); }
 /* Widgets nativos dos campos (calendário do type=date, dropdown do select, scrollbar do textarea) seguem o tema */
 .input,.textarea,.select { color-scheme:dark; font-size:var(--step-fs,inherit); }
-/* ESCALA DO HEROUI (ADR-0050, 24/09/2026): no computador o texto digitado é 14, como toda peça; no
-   telefone ele sobe para 16. É a regra deles (`text-base sm:text-sm`, a partir de 640px), e a razão
+/* ESCALA DA REFERÊNCIA (ADR-0050, 24/09/2026): no computador o texto digitado é 14, como toda peça;
+   no telefone ele sobe para 16. É a regra dela (a troca é em 640px), e a razão
    é do Safari do iPhone: campo com letra menor que 16 faz a página AMPLIAR sozinha ao ganhar foco. */
 @media (max-width:639.98px) { .input,.textarea,.number-field-input,.select-value { font-size:var(--text-base); } }
-[data-theme="light"] .input,[data-theme="light"] .textarea,[data-theme="light"] .select { color-scheme:light; }
+[data-theme="light"] .input:where(:not([data-theme="dark"] *),[data-theme="dark"] [data-theme="light"] *),[data-theme="light"] .textarea:where(:not([data-theme="dark"] *),[data-theme="dark"] [data-theme="light"] *),[data-theme="light"] .select:where(:not([data-theme="dark"] *),[data-theme="dark"] [data-theme="light"] *) { color-scheme:light; }
 /* NumberField (Lote 1): menos · campo · mais numa peça só, que é onde as referências convergem.
    O campo é `.input` — a mesma altura, o mesmo raio, o mesmo foco de qualquer campo do sistema.
    Largura em token para caber de 3 a 4 dígitos sem virar caixa de texto. */
@@ -1386,7 +1497,7 @@ img,svg { display:block; }
 .input-group-addon-inline.input-group-addon-end { padding-inline-end:var(--space-1); }
 /* ADORNO EM BLOCO — a barra de ações ACIMA ou ABAIXO do campo, dentro da mesma moldura. É a
    forma da caixa de composição moderna: o texto em cima, os controles embaixo, tudo numa caixa
-   só. Vem do `G-AXIS-01`; a `shadcn` e a `reui` têm as quatro posições e a Aurea tinha duas.
+   só. Vem do `G-AXIS-01`; duas das referências têm as quatro posições e a Aurea tinha duas.
    Registro de correção: escrevi neste lugar que o `MessageComposer` da Aurea já desenhava essa
    forma à mão, e fui conferir — NÃO desenha. Ele é uma LINHA (`.message-composer` é flex com o
    grupo e o botão lado a lado). Então isto não é consolidação de solução local como foi o
@@ -1429,8 +1540,8 @@ img,svg { display:block; }
    .select` fixavam --control-h-md e não havia modificador nenhum. Os tokens de altura já
    existiam e o `.btn-*` já os usava desde sempre — o campo é que tinha ficado para trás.
    `md` é a classe base e não tem modificador, como não existe `.btn-md`.
-   O que muda por tamanho é o que converge nas referências (Untitled UI `input.tsx` e
-   `select.tsx`, MUI `InputBase` com sizeSmall) e o que o `.btn-*` daqui já fazia: altura,
+   O que muda por tamanho é o que converge nas referências (o campo e a lista de uma delas, o
+   campo base de outra no tamanho pequeno) e o que o `.btn-*` daqui já fazia: altura,
    padding inline e corpo do texto. Tudo em token: a catraca do check 12 não aceita px cru novo,
    e é ela que obrigou o `calc()` em vez de um 44 escrito na mão. */
 /* G-AXIS-04 — as classes de tamanho do campo passam a SETAR variáveis, como as do botão. A
@@ -1536,6 +1647,11 @@ img,svg { display:block; }
 .segmented { display:inline-flex; gap:3px; padding:3px; min-height:var(--control-h-md); border-radius:var(--radius-control); background:var(--muted); border:1px solid transparent; box-shadow:none; }
 .segmented button { padding:0 14px; border:0; border-radius:var(--radius-control); color:var(--muted-foreground); background:transparent; cursor:pointer; }
 .segmented button.active { color:var(--foreground); background:var(--secondary); box-shadow:none; border:0; }
+/* `fullWidth` (A5, 06/10/2026): ocupa a linha, e cada segmento cresce a partir do rótulo sem
+   encolher abaixo dele — o mesmo desenho do nativo. `1 0 auto` e não `1` (= `1 1 0%`): base zero
+   reparte a largura em partes iguais, e é isso que quebrava o rótulo no nativo rodando no
+   navegador. Quando não cabe, rola pela regra de tela estreita, como sem a prop. */
+.segmented-full { display:flex; } .segmented-full button { flex:1 0 auto; }
 /* Toggle (Lote 1): pressionado usa o MESMO par de tokens do segmento aceso, logo acima. Um
    toggle solto e um segmento selecionado dizem a mesma coisa — se parecessem diferentes, o
    sistema teria dois idiomas para "isto está ligado". O estado vem do motor (`data-pressed`),
@@ -1568,14 +1684,14 @@ img,svg { display:block; }
    `:not(.active)` NÃO é enfeite — a primeira versão desta linha não tinha, pesava igual à regra do
    item atual e, vindo depois, APAGAVA o laranja dele. Medido no mesmo minuto: ativo e inativo
    saíram com a mesma cor. Com o `:not` ela pesa (0,3,1) e só alcança quem está em repouso. */
-[data-theme="light"] .doc-nav a:not(.active) { color:color-mix(in oklab, var(--sidebar-foreground) 72%, transparent); }
+[data-theme="light"] .doc-nav a:not(.active):where(:not([data-theme="dark"] *),[data-theme="dark"] [data-theme="light"] *) { color:color-mix(in oklab, var(--sidebar-foreground) 72%, transparent); }
 .is-selected::after,.btn-nav[aria-current]:not([aria-current="false"])::after,
 .btn[aria-pressed="true"]:not(.btn-icon)::after,.segmented button.active::after,
 .doc-nav a.active::after,.sidebar-item[aria-current]::after { content:""; position:absolute; inset-inline:15px; bottom:0; height:2px; border-radius:var(--radius-full); background:color-mix(in oklab, var(--primary) 75%, transparent); }
 /* e o fio do ativo da lateral segue a marca DELA, pelo mesmo motivo da regra de cor acima. */
 .doc-nav a.active::after,.sidebar-item[aria-current]::after { background:color-mix(in oklab, var(--sidebar-primary) 75%, transparent); }
-[data-theme="light"] .is-selected,[data-theme="light"] .btn-nav[aria-current]:not([aria-current="false"]),
-[data-theme="light"] .btn[aria-pressed="true"],[data-theme="light"] .segmented button.active
+[data-theme="light"] .is-selected:where(:not([data-theme="dark"] *),[data-theme="dark"] [data-theme="light"] *),[data-theme="light"] .btn-nav[aria-current]:not([aria-current="false"]):where(:not([data-theme="dark"] *),[data-theme="dark"] [data-theme="light"] *),
+[data-theme="light"] .btn[aria-pressed="true"]:where(:not([data-theme="dark"] *),[data-theme="dark"] [data-theme="light"] *),[data-theme="light"] .segmented button.active:where(:not([data-theme="dark"] *),[data-theme="dark"] [data-theme="light"] *)
   { --btn-fg:color-mix(in oklab, var(--primary) 45%, var(--foreground)); color:color-mix(in oklab, var(--primary) 45%, var(--foreground)); }
 /* A NAV DA LATERAL SAIU DESTA LISTA em 20/08/2026. O ajuste existe porque o amarelo puro não se lê
    sobre o claro — mas ele mistura o `--foreground` da PÁGINA, e o item da lateral não está sobre a
@@ -1614,14 +1730,14 @@ img,svg { display:block; }
    deixado uma SEGUNDA cópia delas aqui em cima, sem o acento: mesma especificidade, e a de
    baixo vencia por ordem de fonte. Quatro regras mortas, medidas em 29/08/2026. */
 /* ── O BADGE SOBREPOSTO — contador no canto de outra coisa ──────────────────────────
-   Anatomia da `Badge.js` da MUI, medida no fonte: raiz `relative/inline-flex/flex-shrink:0`,
+   Anatomia do selo de uma das referências, medida no fonte: raiz `relative/inline-flex/flex-shrink:0`,
    o contador `absolute` com `z-index:1`, e o deslocamento do canto valendo **0 para caixa
-   quadrada e 14% para redonda** — é `overlap`, e sem ele o contador de um avatar fica solto
+   quadrada e 14% para redonda** — é a prop de sobreposição dela, e sem ele o contador de um avatar fica solto
    fora do círculo.
    O ANEL DE RECORTE é o que faltava e o que fazia parecer sujo: um fio da cor da superfície
-   entre o contador e o que está atrás. Três fontes independentes: `ring-[1.5px] ring-bg-primary`
-   da Untitled UI, `border-background border-2` do ReUI e `box-shadow: 0 0 0 2px background.paper`
-   do exemplo de contato da MUI.
+   entre o contador e o que está atrás. Três fontes independentes, todas entre as referências:
+   um anel de 1,5px da cor do fundo, uma borda de 2 da cor do fundo e uma sombra `0 0 0 2px` da
+   cor da superfície (esta no exemplo de contato da mesma referência da anatomia).
    A superfície de trás NÃO é adivinhável em CSS — dentro de um card ela é `--card`, não
    `--background`. Por isso ela é uma propriedade: sobrescreva `--badge-ring` no contêiner. */
 .badge-anchor { position:relative; display:inline-flex; vertical-align:middle; flex-shrink:0; }
@@ -1692,8 +1808,8 @@ img,svg { display:block; }
 /* padding="none" (C-05): sem respiro, e a mídia recortada no raio 22 do próprio cartão. */
 .card-flush { padding:0; overflow:hidden; }
 /* Card.Media e orientation (A-14). Vertical: a mídia primeira sangra até a borda de cima e dos
-   lados. Horizontal (o modo lista): a mídia à esquerda, 96 de largura (o `size-24` do exemplo do
-   HeroUI, nosso --space-24), 16 até o texto, e o raio concêntrico da casa. */
+   lados. Horizontal (o modo lista): a mídia à esquerda, 96 de largura (a do exemplo da
+   referência, nosso --space-24), 16 até o texto, e o raio concêntrico da casa. */
 .card-media { display:block; overflow:hidden; }
 .card-media > :is(img,video,.image) { display:block; width:100%; }
 .card:not(.card-horizontal) > .card-media:first-child { margin:calc(var(--card-pad) * -1) calc(var(--card-pad) * -1) var(--card-pad); border-radius:calc(var(--radius-card) - var(--border-width)) calc(var(--radius-card) - var(--border-width)) 0 0; }
@@ -1708,14 +1824,26 @@ img,svg { display:block; }
    centraliza o texto, encolhe até o conteúdo e é inline-block. Sem elas o cartão-botão desenharia
    diferente do cartão-div, e a identidade dependeria de qual elemento o consumidor escolheu.
    É a mesma lição do `.step-trigger` (G-A11Y-10): o elemento certo precisa da pele certa. */
-.card-interactive { cursor:pointer; display:block; inline-size:100%; font:inherit; text-align:inherit; color:inherit; transition:transform var(--duration-fast),border-color var(--duration-fast),background var(--duration-fast); }
+/* GAR-08 (06/10/2026): o `display:block` daqui vinha DEPOIS do `.card-horizontal { display:grid }`,
+   com a mesma força, e ganhava — o cartão clicável na horizontal perdia a coluna da foto. Agora o
+   bloco é só o padrão do alvo (um `<a>` ou `<button>` nasceria em linha), com força ZERO
+   (`:where`): qualquer orientação ganha dele, sem depender da ordem das regras. */
+:where(.card-interactive) { display:block; }
+/* E o sublinhado (achado ao medir o GAR-08, 06/10/2026): o cartão clicável costuma ser um `<a>`
+   (o `render` do `Card`), e todo o texto dele saía sublinhado pelo navegador. Os outros alvos que
+   viram link (`.btn`, `.sidebar-item`, `.nav-list-row`…) já tiravam; o cartão e o item de menu
+   não. Quem cobra é o `link-sem-sublinhado.spec.ts`. */
+.card-interactive { cursor:pointer; inline-size:100%; text-decoration:none; font:inherit; text-align:inherit; color:inherit; transition:transform var(--duration-fast),border-color var(--duration-fast),background var(--duration-fast); }
 .card-interactive:hover { transform:translateY(-2px); border-color:var(--border-strong); background:var(--surface-2); }
 .card-selected { border-color:var(--primary-outline); box-shadow:inset 0 0 0 1px var(--primary-outline); }
 .card-danger { border-color:color-mix(in srgb,var(--danger-400) 50%,var(--border)); background:var(--danger-bg); }
 .card-header { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; margin-bottom:16px; }
 .card-title { margin:0; font-size:var(--text-sm); font-weight:var(--weight-medium); } .card-subtitle { margin:3px 0 0; color:var(--muted-foreground); font-size:var(--text-sm); }
 
-.alert { display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:start; gap:12px; padding:14px 16px; border:1px solid var(--border); border-radius:var(--radius-lg); background:var(--secondary); box-shadow:none; }
+/* HER-02 (06/10/2026): o `.alert` e o `.toast` eram `--radius-lg` (16). Painel e superfície
+   flutuante são `--radius-card` (22) na identidade da Aurea, como o `.popover`, o `.dialog` e o
+   `.banner`; a referência usa 24 nos dois. */
+.alert { display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:start; gap:12px; padding:14px 16px; border:1px solid var(--border); border-radius:var(--radius-card); background:var(--secondary); box-shadow:none; }
 /* Banner: aviso de largura de página. Base ANTES das variantes — mesma
    especificidade, então a última regra vence e a base apagaria as cores. */
 .banner { display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:12px; padding:14px 18px; border:1px solid var(--border); border-radius:var(--radius-card); background:var(--secondary); }
@@ -1734,9 +1862,9 @@ img,svg { display:block; }
 @media (max-width:640px) { .banner { grid-template-columns:auto minmax(0,1fr); } .banner>:last-child { grid-column:2; justify-self:start; } }
 .progress { height:8px; overflow:hidden; border-radius:999px; background:var(--surface-3); }
 .progress>span { display:block; height:100%; border-radius:inherit; background:var(--primary); }
-/* AN-07 (03/10/2026): a caixa de fora, o texto de apoio e o tom. A anatomia é a do `ProgressBar` do
-   HeroUI 3.2.6 (`@heroui/styles`, progress-bar.css): a saída no alto à direita, `text-sm` médio com
-   algarismos de largura igual, e `gap-1` até o trilho. O tom é a lista fechada do `ButtonTone`:
+/* AN-07 (03/10/2026): a caixa de fora, o texto de apoio e o tom. A anatomia é a da barra de progresso da
+   referência (o pacote de estilos dela): a saída no alto à direita, `text-sm` médio com
+   algarismos de largura igual, e um vão pequeno até o trilho. O tom é a lista fechada do `ButtonTone`:
    pausado é `neutral`, falha é `danger`. */
 .progress-field { display:grid; gap:var(--space-1); }
 .progress-detail { justify-self:end; color:var(--muted-foreground); font-size:var(--text-sm); font-weight:var(--weight-medium); font-variant-numeric:tabular-nums; }
@@ -1745,8 +1873,8 @@ img,svg { display:block; }
 .progress-tone-warning>span { background:var(--warning); }
 .progress-tone-danger>span { background:var(--destructive); }
 .progress-tone-info>span { background:var(--info); }
-/* Sem total, um pedaço de 2/5 corre pelo trilho: os números do HeroUI (`w-2/5`, de -100% a 350% da
-   própria largura, 1,5 s, a curva dele). O HeroUI anda com `translateX`; aqui anda a MARGEM LÓGICA
+/* Sem total, um pedaço de 2/5 corre pelo trilho: os números da referência (a largura de 2/5, de -100% a 350%
+   da própria largura, 1,5 s, a curva dela). A referência anda com `translateX`; aqui anda a MARGEM LÓGICA
    (de -40% a 140% do trilho, o mesmo percurso), para correr ao contrário na escrita da direita para
    a esquerda sem `:dir(rtl)` — o empacotador do app reescreve `:dir()` como lista de idiomas e a
    regra deixa de pegar (medido no Vite, 03/10/2026). O pedaço tem 8 de altura: a conta por quadro é
@@ -1778,6 +1906,11 @@ img,svg { display:block; }
 .tabs[data-orientation="vertical"] .tab { min-block-size:var(--control-h-md); text-align:start; }
 .tab { position:relative; padding:0 14px; border:0; border-radius:var(--radius-control); background:transparent; color:var(--muted-foreground); cursor:pointer; }
 .tab.active,.tab[data-active] { color:var(--foreground); background:var(--secondary); } .tab.active:after,.tab[data-active]:after { display:none; }
+/* `panel="plain"` (MNT-05 e C9, 06/10/2026): o painel sem caixa, como o painel de abas da
+   referência. Sem recheio dos lados — o conteúdo começa na linha do que está fora do `Tabs` —, e o
+   espaço de cima é o mesmo `space-3` do painel do nativo. Na vertical, quem separa é o `gap` da
+   grade da raiz, então o espaço de cima não entra. */
+.tabs-panel { min-width:0; } .tabs-root:not([data-orientation="vertical"])>.tabs-panel { padding-block-start:var(--space-3); }
 .breadcrumb { display:flex; align-items:center; flex-wrap:wrap; gap:7px; color:var(--muted-foreground); font-size:var(--text-sm); }
 .breadcrumb a { color:inherit; text-decoration:none; } .breadcrumb a:hover { color:var(--foreground); }
 .pagination { display:flex; gap:6px; align-items:center; }
@@ -1895,7 +2028,7 @@ img,svg { display:block; }
 .timeline > li > div { display:flex; flex-direction:column; gap:var(--space-05); min-width:0; }
 .timeline > li > div > p { margin:0; }
 .timeline-dot { flex:none; width:var(--space-3); height:var(--space-3); border-radius:var(--radius-full); margin-block-start:var(--space-1); background:var(--primary); box-shadow:0 0 0 var(--space-05) var(--surface-1); }
-/* Accordion: anatomia medida no Carbon em 30/07/2026 (REFERENCES.md) — cabeçalho na altura de
+/* Accordion: anatomia medida numa das referências de desenho em 30/07/2026 (REFERENCES.md) — cabeçalho na altura de
    controle, divisória de 1px por item, corpo com respiro pequeno em cima e grande embaixo.
    O marcador é o NATIVO do <summary>: gira sozinho e custa zero código, e é por isso que o
    summary continua `display:list-item` — pôr flex nele apagaria o marcador. */
@@ -2073,7 +2206,7 @@ img,svg { display:block; }
    `MediaPlayer` não repassa `style` para esta caixa (as props sobrando vão para o `<video>`, de
    propósito). Quem sabe quanta altura tem é a página, e altura não vira prop (check 23).
    ⚠ `--media-ar:auto` SÓ é seguro junto com `--media-h`. A razão do `aspect-ratio` aqui não é
-   estética: é CLS. O exemplo de playlist do `media-chrome` declara o mesmo com o motivo escrito —
+   estética: é CLS. O exemplo de playlist de uma das referências declara o mesmo com o motivo escrito —
    sem proporção fixa, um player com `preload=none` mede zero até a mídia chegar e a página SALTA.
    Tirar a proporção sem fixar a altura devolve o salto. */
 /* A cor do foco no player é a do contexto, não uma regra à parte (B-09, 24/09/2026). O fundo do
@@ -2172,19 +2305,20 @@ img,svg { display:block; }
    (`--media-foreground`). O `--media-track` que o `.media-player` dá ao `Badge` é branco a 18% e só
    funciona sobre o véu: sobre foto clara, o tempo sumia (visto no banco em 04/10/2026). O canto é lógico (`inset-inline-end`), então vira sozinho na escrita da
    direita para a esquerda; o recuo do canto é `--space-2`.
-   A LINHA DE "CARREGANDO MAIS" tem a medida do `Table.LoadMore` do HeroUI (`py-3`, centrada): é
+   A LINHA DE "CARREGANDO MAIS" tem a medida da linha de "carregar mais" da tabela da referência (centrada): é
    ela que o observador vigia, então existe também parada, sem a rodinha. A do `MessageList` (AN-02),
    nas duas pontas da conversa, é a mesma linha. */
 .gallery-media { position:relative; display:block; }
 .gallery-media > .gallery-duration { position:absolute; inset-block-end:var(--space-2); inset-inline-end:var(--space-2); border-color:var(--media-scrim); background:var(--media-scrim); color:var(--media-foreground); }
 .gallery-more,.message-more { display:flex; align-items:center; justify-content:center; min-block-size:var(--icon-sm); padding-block:var(--space-3); color:var(--muted-foreground); }
 
-/* TIPOGRAFIA (B-02, 25/09/2026) — `Text`, `Heading`, `Paragraph` e `Code`, no molde do HeroUI
-   3.2.6 (`typography.css`), por ordem do Victor: HeroUI sempre primeiro. O que vem dele é a FORMA:
+/* TIPOGRAFIA (B-02, 25/09/2026) — `Text`, `Heading`, `Paragraph` e `Code`, no molde da
+   referência (a folha de tipografia dela), por ordem do Victor: a referência sempre primeiro.
+   O que vem dela é a FORMA:
    uma LISTA FECHADA de papéis em vez de tamanhos soltos (título 1–6, texto, texto pequeno, texto
    mínimo, código), cor só normal ou apagada, quatro pesos. O que é nosso são os números, todos de
-   token: a escala de letras é a dele desde a ADR-0050, a entrelinha do texto é `--leading-relaxed`
-   (27, 24 e 20px, contra os 28, 24 e 20 dele) e o código reusa a pele do `code` do `.prose`.
+   token: a escala de letras é a dela desde a ADR-0050, a entrelinha do texto é `--leading-relaxed`
+   (27, 24 e 20px, contra os 28, 24 e 20 dela) e o código reusa a pele do `code` do `.prose`.
    A margem vai a zero porque `h1`…`h6` e `p` trazem a do navegador; o espaço entre blocos é de
    quem os empilha (`Stack`), não do texto. */
 .typography { margin:0; color:var(--foreground); }
@@ -2325,9 +2459,9 @@ img,svg { display:block; }
 @media (hover:hover) and (pointer:fine) { .icon-tile:hover { color:var(--foreground); border-color:var(--primary); transform:translateY(-1px); } } .icon-tile:focus-visible { color:var(--foreground); border-color:var(--primary); } .icon-tile span { overflow:hidden; max-width:100%; text-overflow:ellipsis; white-space:nowrap; font:11px var(--font-code); }
 .dialog-backdrop { position:fixed; inset:0; z-index:var(--z-modal); background:var(--overlay); backdrop-filter:blur(5px); }
 .dialog { position:fixed; top:50%; left:50%; transform:translate(-50%,-50%); z-index:var(--z-modal); width:min(28rem,calc(100vw - 40px)); max-height:calc(100vh - 40px); overflow:auto; padding:24px; border:1px solid var(--border); border-radius:var(--radius-card); background:var(--popover); color:var(--popover-foreground); box-shadow:var(--shadow-lg); }
-/* size (B-03), decisão do Victor em 24/09/2026: as quatro larguras do HeroUI — `max-w-xs` a
-   `max-w-lg` do @heroui/styles 3.2.6, 20/24/28/32rem = 320/384/448/512 — mais 1024 (o token
-   --breakpoint-lg) e a tela cheia. O padrão passou a ser o `md` do HeroUI, 448; até a 0.8.14
+/* size (B-03), decisão do Victor em 24/09/2026: as quatro larguras da referência — as do
+   pacote de estilos dela, 20/24/28/32rem = 320/384/448/512 — mais 1024
+   (o token --breakpoint-lg) e a tela cheia. O padrão passou a ser o `md` da referência, 448; até a 0.8.14
    era 560. */
 .dialog-xs { width:min(20rem,calc(100vw - 40px)); }
 .dialog-sm { width:min(24rem,calc(100vw - 40px)); }
@@ -2344,7 +2478,7 @@ img,svg { display:block; }
 .drawer-wrap { position:fixed; inset:0; z-index:var(--z-drawer); display:none; background:var(--overlay); } .drawer-wrap.open { display:block; }
 .drawer-backdrop { position:fixed; inset:0; z-index:var(--z-drawer); background:var(--overlay); }
 .drawer { position:fixed; top:0; bottom:0; z-index:var(--z-drawer); width:min(480px,92vw); padding:24px; background:var(--surface-1); box-shadow:var(--shadow-lg); overflow:auto; } .drawer-right { right:0; border-left:1px solid var(--border); } .drawer-left { left:0; border-right:1px solid var(--border); }
-.toast-stack { position:fixed; inset-inline-end:22px; bottom:22px; z-index:var(--z-toast); width:min(360px,calc(100vw - 44px)); display:flex; flex-direction:column; gap:10px; } .toast { display:flex; align-items:center; gap:11px; padding:14px; border:1px solid var(--border); border-radius:var(--radius-lg); background:var(--popover); color:var(--popover-foreground); box-shadow:var(--shadow-md); transition:opacity .28s var(--ease-standard), transform .28s var(--ease-emphasized); } .toast>:first-child { flex:1; min-width:0; } .toast-text { display:flex; flex-direction:column; gap:2px; min-width:0; } .toast[data-starting-style],.toast[data-ending-style] { opacity:0; transform:translateY(12px); }
+.toast-stack { position:fixed; inset-inline-end:22px; bottom:22px; z-index:var(--z-toast); width:min(360px,calc(100vw - 44px)); display:flex; flex-direction:column; gap:10px; } .toast { display:flex; align-items:center; gap:11px; padding:14px; border:1px solid var(--border); border-radius:var(--radius-card); background:var(--popover); color:var(--popover-foreground); box-shadow:var(--shadow-md); transition:opacity .28s var(--ease-standard), transform .28s var(--ease-emphasized); } .toast>:first-child { flex:1; min-width:0; } .toast-text { display:flex; flex-direction:column; gap:2px; min-width:0; } .toast[data-starting-style],.toast[data-ending-style] { opacity:0; transform:translateY(12px); }
 /* As quatro faces do `AureaToastType`, escritas em 16/08/2026 — elas NÃO existiam, e o tipo
    publicado não pintava nada. O `system.tsx` emite `toast-${t.type}` desde sempre; classe por
    template é o ponto CEGO do check 18, que só enxerga classe literal — o mesmo defeito que o
@@ -2380,11 +2514,11 @@ img,svg { display:block; }
    e `--space-1` de respiro. Vale para toda lista que usa `.menu`: Combobox, MultiCombobox,
    DropdownMenu, ContextMenu, Menubar e a lista da CommandPalette. */
 .menu { --menu-px:10px; z-index:var(--z-modal); min-width:200px; max-width:min(320px,calc(100vw - 32px)); padding:var(--space-1); border:1px solid var(--border); border-radius:var(--radius-card); background:var(--popover); color:var(--popover-foreground); box-shadow:var(--shadow-lg); }
-.menu-item { display:flex; align-items:center; gap:10px; width:100%; min-height:var(--control-h-md); padding:0 var(--menu-px,10px); border:0; border-radius:calc(var(--radius-card) - var(--space-1)); background:transparent; color:var(--foreground); font:inherit; text-align:start; cursor:pointer; }
+.menu-item { display:flex; align-items:center; gap:10px; width:100%; min-height:var(--control-h-md); padding:0 var(--menu-px,10px); border:0; border-radius:calc(var(--radius-card) - var(--space-1)); background:transparent; color:var(--foreground); font:inherit; text-align:start; text-decoration:none; cursor:pointer; }
 .menu-item[data-highlighted],.menu-item:hover:not([data-disabled]) { background:var(--surface-3); }
 /* Foco de TECLADO no item: a linha de foco, por dentro, porque a lista recorta o que passa da borda
-   (B-09 e a ordem de 25/09/2026, "HeroUI sempre primeiro": o `menu-item` do HeroUI 3.2.6 leva o
-   `status-focused` no foco de teclado). Até aqui a regra de cima apagava a linha com
+   (B-09 e a ordem de 25/09/2026, "a referência sempre primeiro": o item de menu dela
+   leva a linha de foco no foco de teclado). Até aqui a regra de cima apagava a linha com
    `outline:none` e vencia a global: com o teclado, o item em foco era só o fundo cinza — igual ao
    do mouse em cima. O mouse continua só com o fundo: `:focus-visible` não acende por ponteiro.
    ⚠ Onde o foco fica no CAMPO (`Combobox`, `CommandPalette`: o item é destacado por
@@ -2612,7 +2746,7 @@ button.notification-item:hover { background:var(--surface-3); }
 /* EmptyState é o membro GRANDE da família "aqui não há nada" — .notification-empty acima e
    .datagrid-empty abaixo já respondiam a mesma pergunta do mesmo jeito (centralizado, muted),
    e o componente público era o único dos três sem regra (achado A13). A ordem das partes
-   (imagem → título → corpo → ação) é a do padrão de empty state do Carbon, registrado em
+   (imagem → título → corpo → ação) é a do padrão de empty state de uma das referências, registrado em
    REFERENCES.md; a pele é Aurea. O título vinha com o h3 do NAVEGADOR (16,38px). */
 .empty-state { display:flex; flex-direction:column; align-items:center; gap:var(--space-3); padding:var(--space-10) var(--space-6); color:var(--muted-foreground); text-align:center; }
 .empty-state > .icon { color:var(--subtle-foreground); }
@@ -2798,7 +2932,7 @@ th[aria-sort] .datagrid-sort-icon { color:var(--primary); }
 .health-name { font-weight:var(--weight-medium); }
 
 /* H.e — custo e memória.
-   O número total é o `TotalMetric` da referência, e ele é UMA linha de arranjo: a escala
+   O número total é a métrica total da referência, e ele é UMA linha de arranjo: a escala
    tipográfica da Aurea vai só até `--text-base`, e o `text-3xl` de lá é a identidade DELA.
    Aqui o destaque vem do peso e do contraste com o rótulo em `--text-xs`, não de um degrau
    de fonte que a escala não tem. Compartilhado pelo ModelUsage e pelo CostMeter porque é a
@@ -2940,7 +3074,7 @@ button.graph-node-body { cursor:pointer; }
 /* superfície (overflow, borda, fundo, raio) mora junto com a do `.table-wrap` lá em cima — aqui
    fica só o que é DESTA região: ela é focável, e o foco dela é a linha de dentro, abaixo. Era um
    halo de `--focus` a 38% (B-09, 24/09/2026): claro demais para se ver, e fora do contrato de foco.
-   A linha vai para DENTRO porque a região é o próprio contêiner recortado — como no HeroUI 3.2.6,
+   A linha vai para DENTRO porque a região é o próprio contêiner recortado — como na referência,
    que desenha o foco da tabela com `inset 0 0 0 2px var(--focus)`. */
 .table-region{outline:none}
 .table-region:focus-visible{outline:var(--focus-width) solid var(--focus-strong);outline-offset:calc(-1 * var(--focus-width));box-shadow:none}
@@ -2997,7 +3131,7 @@ button.graph-node-body { cursor:pointer; }
 /* ========================================================================== */
 /* 99. EIXO RESPONSIVO — a infraestrutura do G-AXIS-04                        */
 /* ========================================================================== */
-/* A Aurea tinha ZERO eixo responsivo e a Radix Themes tem em 47 de 50. O Victor decidiu que a
+/* A Aurea tinha ZERO eixo responsivo e uma das referências tem em 47 de 50. O Victor decidiu que a
    Aurea terá os DOIS mecanismos, explícitos na API, e que a abstração vem ANTES dos componentes:
    uma camada compartilhada, não uma solução diferente por peça.
 
@@ -3053,19 +3187,19 @@ button.graph-node-body { cursor:pointer; }
 .container-scope { container:aurea / inline-size; }
 
 /* por VIEWPORT — a decisão depende do tamanho da APLICAÇÃO */
-@media (min-width:360px) { .vp-2xs\:size-xs{--step-h:var(--control-h-xs);--step-fs:var(--text-xs);--step-gap:6px;--step-px:10px;--step-field-px:var(--space-3);--step-select-pe:var(--space-8)} .vp-2xs\:size-sm{--step-h:var(--control-h-sm);--step-fs:var(--text-sm);--step-gap:8px;--step-px:12px;--step-field-px:var(--space-3);--step-select-pe:var(--space-8);--step-icon:var(--icon-sm);--step-qr:7.5rem;--step-avatar-fs:var(--text-xs)} .vp-2xs\:size-md{--step-h:var(--control-h-md);--step-fs:var(--text-sm);--step-gap:8px;--step-px:15px;--step-field-px:13px;--step-select-pe:38px;--step-icon:var(--icon-md);--step-qr:10rem} .vp-2xs\:size-lg{--step-h:var(--control-h-lg);--step-fs:var(--text-base);--step-gap:8px;--step-px:20px;--step-field-px:var(--space-4);--step-select-pe:calc(var(--space-10) + var(--space-1));--step-icon:var(--icon-lg);--step-qr:15rem} .vp-2xs\:size-xl{--step-h:var(--control-h-xl);--step-fs:var(--text-base);--step-gap:10px;--step-px:26px;--step-field-px:var(--space-4);--step-select-pe:calc(var(--space-10) + var(--space-1));--step-icon:var(--icon-xl)} .vp-2xs\:btn-group-vertical { flex-direction:column; align-items:stretch; } .vp-2xs\:btn-group-horizontal { flex-direction:row; align-items:center; } .vp-2xs\:range-vertical { writing-mode:vertical-rl; direction:rtl; inline-size:var(--range-vertical-size,10rem); width:auto; } .vp-2xs\:range-horizontal { writing-mode:horizontal-tb; direction:inherit; inline-size:auto; width:100%; } .vp-2xs\:field-horizontal { display:grid; grid-template-columns:minmax(0,var(--field-label-width,12rem)) minmax(0,1fr); align-items:center; column-gap:var(--space-4); row-gap:var(--space-1); } .vp-2xs\:field-horizontal>.label { grid-column:1; flex-direction:column; align-items:flex-start; justify-content:center; gap:var(--space-05); } .vp-2xs\:field-horizontal>*:not(.label) { grid-column:2; } .vp-2xs\:field-vertical { display:flex; flex-direction:column; gap:7px; } .vp-2xs\:field-vertical>.label { flex-direction:row; align-items:stretch; justify-content:space-between; gap:12px; } .vp-2xs\:input-group-addon-inline { inline-size:auto; justify-content:normal; } .vp-2xs\:input-group-addon-inline.input-group-addon-start { padding-inline:var(--space-3); } .vp-2xs\:input-group-addon-inline.input-group-addon-end { padding-inline-end:var(--space-1); } .vp-2xs\:input-group-addon-block { inline-size:100%; justify-content:flex-start; } .vp-2xs\:input-group-addon-block.input-group-addon-start { padding:var(--space-2) var(--space-3) 0; } .vp-2xs\:input-group-addon-block.input-group-addon-end { padding:0 var(--space-3) var(--space-2); } }
-@media (min-width:480px) { .vp-xs\:size-xs{--step-h:var(--control-h-xs);--step-fs:var(--text-xs);--step-gap:6px;--step-px:10px;--step-field-px:var(--space-3);--step-select-pe:var(--space-8)} .vp-xs\:size-sm{--step-h:var(--control-h-sm);--step-fs:var(--text-sm);--step-gap:8px;--step-px:12px;--step-field-px:var(--space-3);--step-select-pe:var(--space-8);--step-icon:var(--icon-sm);--step-qr:7.5rem;--step-avatar-fs:var(--text-xs)} .vp-xs\:size-md{--step-h:var(--control-h-md);--step-fs:var(--text-sm);--step-gap:8px;--step-px:15px;--step-field-px:13px;--step-select-pe:38px;--step-icon:var(--icon-md);--step-qr:10rem} .vp-xs\:size-lg{--step-h:var(--control-h-lg);--step-fs:var(--text-base);--step-gap:8px;--step-px:20px;--step-field-px:var(--space-4);--step-select-pe:calc(var(--space-10) + var(--space-1));--step-icon:var(--icon-lg);--step-qr:15rem} .vp-xs\:size-xl{--step-h:var(--control-h-xl);--step-fs:var(--text-base);--step-gap:10px;--step-px:26px;--step-field-px:var(--space-4);--step-select-pe:calc(var(--space-10) + var(--space-1));--step-icon:var(--icon-xl)} .vp-xs\:btn-group-vertical { flex-direction:column; align-items:stretch; } .vp-xs\:btn-group-horizontal { flex-direction:row; align-items:center; } .vp-xs\:range-vertical { writing-mode:vertical-rl; direction:rtl; inline-size:var(--range-vertical-size,10rem); width:auto; } .vp-xs\:range-horizontal { writing-mode:horizontal-tb; direction:inherit; inline-size:auto; width:100%; } .vp-xs\:field-horizontal { display:grid; grid-template-columns:minmax(0,var(--field-label-width,12rem)) minmax(0,1fr); align-items:center; column-gap:var(--space-4); row-gap:var(--space-1); } .vp-xs\:field-horizontal>.label { grid-column:1; flex-direction:column; align-items:flex-start; justify-content:center; gap:var(--space-05); } .vp-xs\:field-horizontal>*:not(.label) { grid-column:2; } .vp-xs\:field-vertical { display:flex; flex-direction:column; gap:7px; } .vp-xs\:field-vertical>.label { flex-direction:row; align-items:stretch; justify-content:space-between; gap:12px; } .vp-xs\:input-group-addon-inline { inline-size:auto; justify-content:normal; } .vp-xs\:input-group-addon-inline.input-group-addon-start { padding-inline:var(--space-3); } .vp-xs\:input-group-addon-inline.input-group-addon-end { padding-inline-end:var(--space-1); } .vp-xs\:input-group-addon-block { inline-size:100%; justify-content:flex-start; } .vp-xs\:input-group-addon-block.input-group-addon-start { padding:var(--space-2) var(--space-3) 0; } .vp-xs\:input-group-addon-block.input-group-addon-end { padding:0 var(--space-3) var(--space-2); } }
-@media (min-width:640px) { .vp-sm\:size-xs{--step-h:var(--control-h-xs);--step-fs:var(--text-xs);--step-gap:6px;--step-px:10px;--step-field-px:var(--space-3);--step-select-pe:var(--space-8)} .vp-sm\:size-sm{--step-h:var(--control-h-sm);--step-fs:var(--text-sm);--step-gap:8px;--step-px:12px;--step-field-px:var(--space-3);--step-select-pe:var(--space-8);--step-icon:var(--icon-sm);--step-qr:7.5rem;--step-avatar-fs:var(--text-xs)} .vp-sm\:size-md{--step-h:var(--control-h-md);--step-fs:var(--text-sm);--step-gap:8px;--step-px:15px;--step-field-px:13px;--step-select-pe:38px;--step-icon:var(--icon-md);--step-qr:10rem} .vp-sm\:size-lg{--step-h:var(--control-h-lg);--step-fs:var(--text-base);--step-gap:8px;--step-px:20px;--step-field-px:var(--space-4);--step-select-pe:calc(var(--space-10) + var(--space-1));--step-icon:var(--icon-lg);--step-qr:15rem} .vp-sm\:size-xl{--step-h:var(--control-h-xl);--step-fs:var(--text-base);--step-gap:10px;--step-px:26px;--step-field-px:var(--space-4);--step-select-pe:calc(var(--space-10) + var(--space-1));--step-icon:var(--icon-xl)} .vp-sm\:btn-group-vertical { flex-direction:column; align-items:stretch; } .vp-sm\:btn-group-horizontal { flex-direction:row; align-items:center; } .vp-sm\:range-vertical { writing-mode:vertical-rl; direction:rtl; inline-size:var(--range-vertical-size,10rem); width:auto; } .vp-sm\:range-horizontal { writing-mode:horizontal-tb; direction:inherit; inline-size:auto; width:100%; } .vp-sm\:field-horizontal { display:grid; grid-template-columns:minmax(0,var(--field-label-width,12rem)) minmax(0,1fr); align-items:center; column-gap:var(--space-4); row-gap:var(--space-1); } .vp-sm\:field-horizontal>.label { grid-column:1; flex-direction:column; align-items:flex-start; justify-content:center; gap:var(--space-05); } .vp-sm\:field-horizontal>*:not(.label) { grid-column:2; } .vp-sm\:field-vertical { display:flex; flex-direction:column; gap:7px; } .vp-sm\:field-vertical>.label { flex-direction:row; align-items:stretch; justify-content:space-between; gap:12px; } .vp-sm\:input-group-addon-inline { inline-size:auto; justify-content:normal; } .vp-sm\:input-group-addon-inline.input-group-addon-start { padding-inline:var(--space-3); } .vp-sm\:input-group-addon-inline.input-group-addon-end { padding-inline-end:var(--space-1); } .vp-sm\:input-group-addon-block { inline-size:100%; justify-content:flex-start; } .vp-sm\:input-group-addon-block.input-group-addon-start { padding:var(--space-2) var(--space-3) 0; } .vp-sm\:input-group-addon-block.input-group-addon-end { padding:0 var(--space-3) var(--space-2); } }
-@media (min-width:768px) { .vp-md\:size-xs{--step-h:var(--control-h-xs);--step-fs:var(--text-xs);--step-gap:6px;--step-px:10px;--step-field-px:var(--space-3);--step-select-pe:var(--space-8)} .vp-md\:size-sm{--step-h:var(--control-h-sm);--step-fs:var(--text-sm);--step-gap:8px;--step-px:12px;--step-field-px:var(--space-3);--step-select-pe:var(--space-8);--step-icon:var(--icon-sm);--step-qr:7.5rem;--step-avatar-fs:var(--text-xs)} .vp-md\:size-md{--step-h:var(--control-h-md);--step-fs:var(--text-sm);--step-gap:8px;--step-px:15px;--step-field-px:13px;--step-select-pe:38px;--step-icon:var(--icon-md);--step-qr:10rem} .vp-md\:size-lg{--step-h:var(--control-h-lg);--step-fs:var(--text-base);--step-gap:8px;--step-px:20px;--step-field-px:var(--space-4);--step-select-pe:calc(var(--space-10) + var(--space-1));--step-icon:var(--icon-lg);--step-qr:15rem} .vp-md\:size-xl{--step-h:var(--control-h-xl);--step-fs:var(--text-base);--step-gap:10px;--step-px:26px;--step-field-px:var(--space-4);--step-select-pe:calc(var(--space-10) + var(--space-1));--step-icon:var(--icon-xl)} .vp-md\:btn-group-vertical { flex-direction:column; align-items:stretch; } .vp-md\:btn-group-horizontal { flex-direction:row; align-items:center; } .vp-md\:range-vertical { writing-mode:vertical-rl; direction:rtl; inline-size:var(--range-vertical-size,10rem); width:auto; } .vp-md\:range-horizontal { writing-mode:horizontal-tb; direction:inherit; inline-size:auto; width:100%; } .vp-md\:field-horizontal { display:grid; grid-template-columns:minmax(0,var(--field-label-width,12rem)) minmax(0,1fr); align-items:center; column-gap:var(--space-4); row-gap:var(--space-1); } .vp-md\:field-horizontal>.label { grid-column:1; flex-direction:column; align-items:flex-start; justify-content:center; gap:var(--space-05); } .vp-md\:field-horizontal>*:not(.label) { grid-column:2; } .vp-md\:field-vertical { display:flex; flex-direction:column; gap:7px; } .vp-md\:field-vertical>.label { flex-direction:row; align-items:stretch; justify-content:space-between; gap:12px; } .vp-md\:input-group-addon-inline { inline-size:auto; justify-content:normal; } .vp-md\:input-group-addon-inline.input-group-addon-start { padding-inline:var(--space-3); } .vp-md\:input-group-addon-inline.input-group-addon-end { padding-inline-end:var(--space-1); } .vp-md\:input-group-addon-block { inline-size:100%; justify-content:flex-start; } .vp-md\:input-group-addon-block.input-group-addon-start { padding:var(--space-2) var(--space-3) 0; } .vp-md\:input-group-addon-block.input-group-addon-end { padding:0 var(--space-3) var(--space-2); } }
-@media (min-width:1024px) { .vp-lg\:size-xs{--step-h:var(--control-h-xs);--step-fs:var(--text-xs);--step-gap:6px;--step-px:10px;--step-field-px:var(--space-3);--step-select-pe:var(--space-8)} .vp-lg\:size-sm{--step-h:var(--control-h-sm);--step-fs:var(--text-sm);--step-gap:8px;--step-px:12px;--step-field-px:var(--space-3);--step-select-pe:var(--space-8);--step-icon:var(--icon-sm);--step-qr:7.5rem;--step-avatar-fs:var(--text-xs)} .vp-lg\:size-md{--step-h:var(--control-h-md);--step-fs:var(--text-sm);--step-gap:8px;--step-px:15px;--step-field-px:13px;--step-select-pe:38px;--step-icon:var(--icon-md);--step-qr:10rem} .vp-lg\:size-lg{--step-h:var(--control-h-lg);--step-fs:var(--text-base);--step-gap:8px;--step-px:20px;--step-field-px:var(--space-4);--step-select-pe:calc(var(--space-10) + var(--space-1));--step-icon:var(--icon-lg);--step-qr:15rem} .vp-lg\:size-xl{--step-h:var(--control-h-xl);--step-fs:var(--text-base);--step-gap:10px;--step-px:26px;--step-field-px:var(--space-4);--step-select-pe:calc(var(--space-10) + var(--space-1));--step-icon:var(--icon-xl)} .vp-lg\:btn-group-vertical { flex-direction:column; align-items:stretch; } .vp-lg\:btn-group-horizontal { flex-direction:row; align-items:center; } .vp-lg\:range-vertical { writing-mode:vertical-rl; direction:rtl; inline-size:var(--range-vertical-size,10rem); width:auto; } .vp-lg\:range-horizontal { writing-mode:horizontal-tb; direction:inherit; inline-size:auto; width:100%; } .vp-lg\:field-horizontal { display:grid; grid-template-columns:minmax(0,var(--field-label-width,12rem)) minmax(0,1fr); align-items:center; column-gap:var(--space-4); row-gap:var(--space-1); } .vp-lg\:field-horizontal>.label { grid-column:1; flex-direction:column; align-items:flex-start; justify-content:center; gap:var(--space-05); } .vp-lg\:field-horizontal>*:not(.label) { grid-column:2; } .vp-lg\:field-vertical { display:flex; flex-direction:column; gap:7px; } .vp-lg\:field-vertical>.label { flex-direction:row; align-items:stretch; justify-content:space-between; gap:12px; } .vp-lg\:input-group-addon-inline { inline-size:auto; justify-content:normal; } .vp-lg\:input-group-addon-inline.input-group-addon-start { padding-inline:var(--space-3); } .vp-lg\:input-group-addon-inline.input-group-addon-end { padding-inline-end:var(--space-1); } .vp-lg\:input-group-addon-block { inline-size:100%; justify-content:flex-start; } .vp-lg\:input-group-addon-block.input-group-addon-start { padding:var(--space-2) var(--space-3) 0; } .vp-lg\:input-group-addon-block.input-group-addon-end { padding:0 var(--space-3) var(--space-2); } }
-@media (min-width:1280px) { .vp-xl\:size-xs{--step-h:var(--control-h-xs);--step-fs:var(--text-xs);--step-gap:6px;--step-px:10px;--step-field-px:var(--space-3);--step-select-pe:var(--space-8)} .vp-xl\:size-sm{--step-h:var(--control-h-sm);--step-fs:var(--text-sm);--step-gap:8px;--step-px:12px;--step-field-px:var(--space-3);--step-select-pe:var(--space-8);--step-icon:var(--icon-sm);--step-qr:7.5rem;--step-avatar-fs:var(--text-xs)} .vp-xl\:size-md{--step-h:var(--control-h-md);--step-fs:var(--text-sm);--step-gap:8px;--step-px:15px;--step-field-px:13px;--step-select-pe:38px;--step-icon:var(--icon-md);--step-qr:10rem} .vp-xl\:size-lg{--step-h:var(--control-h-lg);--step-fs:var(--text-base);--step-gap:8px;--step-px:20px;--step-field-px:var(--space-4);--step-select-pe:calc(var(--space-10) + var(--space-1));--step-icon:var(--icon-lg);--step-qr:15rem} .vp-xl\:size-xl{--step-h:var(--control-h-xl);--step-fs:var(--text-base);--step-gap:10px;--step-px:26px;--step-field-px:var(--space-4);--step-select-pe:calc(var(--space-10) + var(--space-1));--step-icon:var(--icon-xl)} .vp-xl\:btn-group-vertical { flex-direction:column; align-items:stretch; } .vp-xl\:btn-group-horizontal { flex-direction:row; align-items:center; } .vp-xl\:range-vertical { writing-mode:vertical-rl; direction:rtl; inline-size:var(--range-vertical-size,10rem); width:auto; } .vp-xl\:range-horizontal { writing-mode:horizontal-tb; direction:inherit; inline-size:auto; width:100%; } .vp-xl\:field-horizontal { display:grid; grid-template-columns:minmax(0,var(--field-label-width,12rem)) minmax(0,1fr); align-items:center; column-gap:var(--space-4); row-gap:var(--space-1); } .vp-xl\:field-horizontal>.label { grid-column:1; flex-direction:column; align-items:flex-start; justify-content:center; gap:var(--space-05); } .vp-xl\:field-horizontal>*:not(.label) { grid-column:2; } .vp-xl\:field-vertical { display:flex; flex-direction:column; gap:7px; } .vp-xl\:field-vertical>.label { flex-direction:row; align-items:stretch; justify-content:space-between; gap:12px; } .vp-xl\:input-group-addon-inline { inline-size:auto; justify-content:normal; } .vp-xl\:input-group-addon-inline.input-group-addon-start { padding-inline:var(--space-3); } .vp-xl\:input-group-addon-inline.input-group-addon-end { padding-inline-end:var(--space-1); } .vp-xl\:input-group-addon-block { inline-size:100%; justify-content:flex-start; } .vp-xl\:input-group-addon-block.input-group-addon-start { padding:var(--space-2) var(--space-3) 0; } .vp-xl\:input-group-addon-block.input-group-addon-end { padding:0 var(--space-3) var(--space-2); } }
-@media (min-width:1536px) { .vp-2xl\:size-xs{--step-h:var(--control-h-xs);--step-fs:var(--text-xs);--step-gap:6px;--step-px:10px;--step-field-px:var(--space-3);--step-select-pe:var(--space-8)} .vp-2xl\:size-sm{--step-h:var(--control-h-sm);--step-fs:var(--text-sm);--step-gap:8px;--step-px:12px;--step-field-px:var(--space-3);--step-select-pe:var(--space-8);--step-icon:var(--icon-sm);--step-qr:7.5rem;--step-avatar-fs:var(--text-xs)} .vp-2xl\:size-md{--step-h:var(--control-h-md);--step-fs:var(--text-sm);--step-gap:8px;--step-px:15px;--step-field-px:13px;--step-select-pe:38px;--step-icon:var(--icon-md);--step-qr:10rem} .vp-2xl\:size-lg{--step-h:var(--control-h-lg);--step-fs:var(--text-base);--step-gap:8px;--step-px:20px;--step-field-px:var(--space-4);--step-select-pe:calc(var(--space-10) + var(--space-1));--step-icon:var(--icon-lg);--step-qr:15rem} .vp-2xl\:size-xl{--step-h:var(--control-h-xl);--step-fs:var(--text-base);--step-gap:10px;--step-px:26px;--step-field-px:var(--space-4);--step-select-pe:calc(var(--space-10) + var(--space-1));--step-icon:var(--icon-xl)} .vp-2xl\:btn-group-vertical { flex-direction:column; align-items:stretch; } .vp-2xl\:btn-group-horizontal { flex-direction:row; align-items:center; } .vp-2xl\:range-vertical { writing-mode:vertical-rl; direction:rtl; inline-size:var(--range-vertical-size,10rem); width:auto; } .vp-2xl\:range-horizontal { writing-mode:horizontal-tb; direction:inherit; inline-size:auto; width:100%; } .vp-2xl\:field-horizontal { display:grid; grid-template-columns:minmax(0,var(--field-label-width,12rem)) minmax(0,1fr); align-items:center; column-gap:var(--space-4); row-gap:var(--space-1); } .vp-2xl\:field-horizontal>.label { grid-column:1; flex-direction:column; align-items:flex-start; justify-content:center; gap:var(--space-05); } .vp-2xl\:field-horizontal>*:not(.label) { grid-column:2; } .vp-2xl\:field-vertical { display:flex; flex-direction:column; gap:7px; } .vp-2xl\:field-vertical>.label { flex-direction:row; align-items:stretch; justify-content:space-between; gap:12px; } .vp-2xl\:input-group-addon-inline { inline-size:auto; justify-content:normal; } .vp-2xl\:input-group-addon-inline.input-group-addon-start { padding-inline:var(--space-3); } .vp-2xl\:input-group-addon-inline.input-group-addon-end { padding-inline-end:var(--space-1); } .vp-2xl\:input-group-addon-block { inline-size:100%; justify-content:flex-start; } .vp-2xl\:input-group-addon-block.input-group-addon-start { padding:var(--space-2) var(--space-3) 0; } .vp-2xl\:input-group-addon-block.input-group-addon-end { padding:0 var(--space-3) var(--space-2); } }
+@media (min-width:360px) { .vp-2xs\:size-xs{--step-h:var(--control-h-xs);--step-fs:var(--text-xs);--step-gap:6px;--step-px:10px;--step-field-px:var(--space-3);--step-select-pe:var(--space-8)} .vp-2xs\:size-sm{--step-h:var(--control-h-sm);--step-fs:var(--text-sm);--step-gap:8px;--step-px:12px;--step-field-px:var(--space-3);--step-select-pe:var(--space-8);--step-icon:var(--icon-sm);--step-qr:7.5rem;--step-avatar-fs:var(--text-xs)} .vp-2xs\:size-md{--step-h:var(--control-h-md);--step-fs:var(--text-sm);--step-gap:8px;--step-px:15px;--step-field-px:13px;--step-select-pe:38px;--step-icon:var(--icon-md);--step-qr:10rem} .vp-2xs\:size-lg{--step-h:var(--control-h-lg);--step-fs:var(--text-base);--step-gap:8px;--step-px:20px;--step-field-px:var(--space-4);--step-select-pe:calc(var(--space-10) + var(--space-1));--step-icon:var(--icon-lg);--step-qr:15rem} .vp-2xs\:size-xl{--step-h:var(--control-h-xl);--step-fs:var(--text-base);--step-gap:10px;--step-px:26px;--step-field-px:var(--space-4);--step-select-pe:calc(var(--space-10) + var(--space-1));--step-icon:var(--icon-xl)} .vp-2xs\:btn-group-vertical { flex-direction:column; align-items:stretch; } .vp-2xs\:btn-group-horizontal { flex-direction:row; align-items:center; } .vp-2xs\:range-vertical { writing-mode:vertical-rl; direction:rtl; inline-size:var(--range-vertical-size,10rem); width:auto; } .vp-2xs\:range-horizontal { writing-mode:horizontal-tb; direction:inherit; inline-size:auto; width:100%; } .vp-2xs\:field-horizontal { display:grid; grid-template-columns:minmax(0,var(--field-label-width,12rem)) minmax(0,1fr); align-items:center; column-gap:var(--space-4); row-gap:var(--space-1); } .vp-2xs\:field-horizontal>.label { grid-column:1; flex-direction:column; align-items:flex-start; justify-content:center; gap:var(--space-05); } .vp-2xs\:field-horizontal>*:not(.label) { grid-column:2; } .vp-2xs\:field-vertical { display:flex; flex-direction:column; gap:7px; } .vp-2xs\:field-vertical>.label { flex-direction:row; align-items:stretch; justify-content:space-between; gap:12px; } .vp-2xs\:input-group-addon-inline { inline-size:auto; justify-content:normal; } .vp-2xs\:input-group-addon-inline.input-group-addon-start { padding-inline:var(--space-3); } .vp-2xs\:input-group-addon-inline.input-group-addon-end { padding-inline-end:var(--space-1); } .vp-2xs\:input-group-addon-block { inline-size:100%; justify-content:flex-start; } .vp-2xs\:input-group-addon-block.input-group-addon-start { padding:var(--space-2) var(--space-3) 0; } .vp-2xs\:input-group-addon-block.input-group-addon-end { padding:0 var(--space-3) var(--space-2); } .vp-2xs\:grid-span-1 { grid-column:span 1 / span 1; } .vp-2xs\:grid-span-2 { grid-column:span 2 / span 2; } .vp-2xs\:grid-span-3 { grid-column:span 3 / span 3; } .vp-2xs\:grid-span-4 { grid-column:span 4 / span 4; } .vp-2xs\:grid-span-5 { grid-column:span 5 / span 5; } .vp-2xs\:grid-span-6 { grid-column:span 6 / span 6; } .vp-2xs\:grid-span-7 { grid-column:span 7 / span 7; } .vp-2xs\:grid-span-8 { grid-column:span 8 / span 8; } .vp-2xs\:grid-span-9 { grid-column:span 9 / span 9; } .vp-2xs\:grid-span-10 { grid-column:span 10 / span 10; } .vp-2xs\:grid-span-11 { grid-column:span 11 / span 11; } .vp-2xs\:grid-span-12 { grid-column:span 12 / span 12; } }
+@media (min-width:480px) { .vp-xs\:size-xs{--step-h:var(--control-h-xs);--step-fs:var(--text-xs);--step-gap:6px;--step-px:10px;--step-field-px:var(--space-3);--step-select-pe:var(--space-8)} .vp-xs\:size-sm{--step-h:var(--control-h-sm);--step-fs:var(--text-sm);--step-gap:8px;--step-px:12px;--step-field-px:var(--space-3);--step-select-pe:var(--space-8);--step-icon:var(--icon-sm);--step-qr:7.5rem;--step-avatar-fs:var(--text-xs)} .vp-xs\:size-md{--step-h:var(--control-h-md);--step-fs:var(--text-sm);--step-gap:8px;--step-px:15px;--step-field-px:13px;--step-select-pe:38px;--step-icon:var(--icon-md);--step-qr:10rem} .vp-xs\:size-lg{--step-h:var(--control-h-lg);--step-fs:var(--text-base);--step-gap:8px;--step-px:20px;--step-field-px:var(--space-4);--step-select-pe:calc(var(--space-10) + var(--space-1));--step-icon:var(--icon-lg);--step-qr:15rem} .vp-xs\:size-xl{--step-h:var(--control-h-xl);--step-fs:var(--text-base);--step-gap:10px;--step-px:26px;--step-field-px:var(--space-4);--step-select-pe:calc(var(--space-10) + var(--space-1));--step-icon:var(--icon-xl)} .vp-xs\:btn-group-vertical { flex-direction:column; align-items:stretch; } .vp-xs\:btn-group-horizontal { flex-direction:row; align-items:center; } .vp-xs\:range-vertical { writing-mode:vertical-rl; direction:rtl; inline-size:var(--range-vertical-size,10rem); width:auto; } .vp-xs\:range-horizontal { writing-mode:horizontal-tb; direction:inherit; inline-size:auto; width:100%; } .vp-xs\:field-horizontal { display:grid; grid-template-columns:minmax(0,var(--field-label-width,12rem)) minmax(0,1fr); align-items:center; column-gap:var(--space-4); row-gap:var(--space-1); } .vp-xs\:field-horizontal>.label { grid-column:1; flex-direction:column; align-items:flex-start; justify-content:center; gap:var(--space-05); } .vp-xs\:field-horizontal>*:not(.label) { grid-column:2; } .vp-xs\:field-vertical { display:flex; flex-direction:column; gap:7px; } .vp-xs\:field-vertical>.label { flex-direction:row; align-items:stretch; justify-content:space-between; gap:12px; } .vp-xs\:input-group-addon-inline { inline-size:auto; justify-content:normal; } .vp-xs\:input-group-addon-inline.input-group-addon-start { padding-inline:var(--space-3); } .vp-xs\:input-group-addon-inline.input-group-addon-end { padding-inline-end:var(--space-1); } .vp-xs\:input-group-addon-block { inline-size:100%; justify-content:flex-start; } .vp-xs\:input-group-addon-block.input-group-addon-start { padding:var(--space-2) var(--space-3) 0; } .vp-xs\:input-group-addon-block.input-group-addon-end { padding:0 var(--space-3) var(--space-2); } .vp-xs\:grid-span-1 { grid-column:span 1 / span 1; } .vp-xs\:grid-span-2 { grid-column:span 2 / span 2; } .vp-xs\:grid-span-3 { grid-column:span 3 / span 3; } .vp-xs\:grid-span-4 { grid-column:span 4 / span 4; } .vp-xs\:grid-span-5 { grid-column:span 5 / span 5; } .vp-xs\:grid-span-6 { grid-column:span 6 / span 6; } .vp-xs\:grid-span-7 { grid-column:span 7 / span 7; } .vp-xs\:grid-span-8 { grid-column:span 8 / span 8; } .vp-xs\:grid-span-9 { grid-column:span 9 / span 9; } .vp-xs\:grid-span-10 { grid-column:span 10 / span 10; } .vp-xs\:grid-span-11 { grid-column:span 11 / span 11; } .vp-xs\:grid-span-12 { grid-column:span 12 / span 12; } }
+@media (min-width:640px) { .vp-sm\:size-xs{--step-h:var(--control-h-xs);--step-fs:var(--text-xs);--step-gap:6px;--step-px:10px;--step-field-px:var(--space-3);--step-select-pe:var(--space-8)} .vp-sm\:size-sm{--step-h:var(--control-h-sm);--step-fs:var(--text-sm);--step-gap:8px;--step-px:12px;--step-field-px:var(--space-3);--step-select-pe:var(--space-8);--step-icon:var(--icon-sm);--step-qr:7.5rem;--step-avatar-fs:var(--text-xs)} .vp-sm\:size-md{--step-h:var(--control-h-md);--step-fs:var(--text-sm);--step-gap:8px;--step-px:15px;--step-field-px:13px;--step-select-pe:38px;--step-icon:var(--icon-md);--step-qr:10rem} .vp-sm\:size-lg{--step-h:var(--control-h-lg);--step-fs:var(--text-base);--step-gap:8px;--step-px:20px;--step-field-px:var(--space-4);--step-select-pe:calc(var(--space-10) + var(--space-1));--step-icon:var(--icon-lg);--step-qr:15rem} .vp-sm\:size-xl{--step-h:var(--control-h-xl);--step-fs:var(--text-base);--step-gap:10px;--step-px:26px;--step-field-px:var(--space-4);--step-select-pe:calc(var(--space-10) + var(--space-1));--step-icon:var(--icon-xl)} .vp-sm\:btn-group-vertical { flex-direction:column; align-items:stretch; } .vp-sm\:btn-group-horizontal { flex-direction:row; align-items:center; } .vp-sm\:range-vertical { writing-mode:vertical-rl; direction:rtl; inline-size:var(--range-vertical-size,10rem); width:auto; } .vp-sm\:range-horizontal { writing-mode:horizontal-tb; direction:inherit; inline-size:auto; width:100%; } .vp-sm\:field-horizontal { display:grid; grid-template-columns:minmax(0,var(--field-label-width,12rem)) minmax(0,1fr); align-items:center; column-gap:var(--space-4); row-gap:var(--space-1); } .vp-sm\:field-horizontal>.label { grid-column:1; flex-direction:column; align-items:flex-start; justify-content:center; gap:var(--space-05); } .vp-sm\:field-horizontal>*:not(.label) { grid-column:2; } .vp-sm\:field-vertical { display:flex; flex-direction:column; gap:7px; } .vp-sm\:field-vertical>.label { flex-direction:row; align-items:stretch; justify-content:space-between; gap:12px; } .vp-sm\:input-group-addon-inline { inline-size:auto; justify-content:normal; } .vp-sm\:input-group-addon-inline.input-group-addon-start { padding-inline:var(--space-3); } .vp-sm\:input-group-addon-inline.input-group-addon-end { padding-inline-end:var(--space-1); } .vp-sm\:input-group-addon-block { inline-size:100%; justify-content:flex-start; } .vp-sm\:input-group-addon-block.input-group-addon-start { padding:var(--space-2) var(--space-3) 0; } .vp-sm\:input-group-addon-block.input-group-addon-end { padding:0 var(--space-3) var(--space-2); } .vp-sm\:grid-span-1 { grid-column:span 1 / span 1; } .vp-sm\:grid-span-2 { grid-column:span 2 / span 2; } .vp-sm\:grid-span-3 { grid-column:span 3 / span 3; } .vp-sm\:grid-span-4 { grid-column:span 4 / span 4; } .vp-sm\:grid-span-5 { grid-column:span 5 / span 5; } .vp-sm\:grid-span-6 { grid-column:span 6 / span 6; } .vp-sm\:grid-span-7 { grid-column:span 7 / span 7; } .vp-sm\:grid-span-8 { grid-column:span 8 / span 8; } .vp-sm\:grid-span-9 { grid-column:span 9 / span 9; } .vp-sm\:grid-span-10 { grid-column:span 10 / span 10; } .vp-sm\:grid-span-11 { grid-column:span 11 / span 11; } .vp-sm\:grid-span-12 { grid-column:span 12 / span 12; } }
+@media (min-width:768px) { .vp-md\:size-xs{--step-h:var(--control-h-xs);--step-fs:var(--text-xs);--step-gap:6px;--step-px:10px;--step-field-px:var(--space-3);--step-select-pe:var(--space-8)} .vp-md\:size-sm{--step-h:var(--control-h-sm);--step-fs:var(--text-sm);--step-gap:8px;--step-px:12px;--step-field-px:var(--space-3);--step-select-pe:var(--space-8);--step-icon:var(--icon-sm);--step-qr:7.5rem;--step-avatar-fs:var(--text-xs)} .vp-md\:size-md{--step-h:var(--control-h-md);--step-fs:var(--text-sm);--step-gap:8px;--step-px:15px;--step-field-px:13px;--step-select-pe:38px;--step-icon:var(--icon-md);--step-qr:10rem} .vp-md\:size-lg{--step-h:var(--control-h-lg);--step-fs:var(--text-base);--step-gap:8px;--step-px:20px;--step-field-px:var(--space-4);--step-select-pe:calc(var(--space-10) + var(--space-1));--step-icon:var(--icon-lg);--step-qr:15rem} .vp-md\:size-xl{--step-h:var(--control-h-xl);--step-fs:var(--text-base);--step-gap:10px;--step-px:26px;--step-field-px:var(--space-4);--step-select-pe:calc(var(--space-10) + var(--space-1));--step-icon:var(--icon-xl)} .vp-md\:btn-group-vertical { flex-direction:column; align-items:stretch; } .vp-md\:btn-group-horizontal { flex-direction:row; align-items:center; } .vp-md\:range-vertical { writing-mode:vertical-rl; direction:rtl; inline-size:var(--range-vertical-size,10rem); width:auto; } .vp-md\:range-horizontal { writing-mode:horizontal-tb; direction:inherit; inline-size:auto; width:100%; } .vp-md\:field-horizontal { display:grid; grid-template-columns:minmax(0,var(--field-label-width,12rem)) minmax(0,1fr); align-items:center; column-gap:var(--space-4); row-gap:var(--space-1); } .vp-md\:field-horizontal>.label { grid-column:1; flex-direction:column; align-items:flex-start; justify-content:center; gap:var(--space-05); } .vp-md\:field-horizontal>*:not(.label) { grid-column:2; } .vp-md\:field-vertical { display:flex; flex-direction:column; gap:7px; } .vp-md\:field-vertical>.label { flex-direction:row; align-items:stretch; justify-content:space-between; gap:12px; } .vp-md\:input-group-addon-inline { inline-size:auto; justify-content:normal; } .vp-md\:input-group-addon-inline.input-group-addon-start { padding-inline:var(--space-3); } .vp-md\:input-group-addon-inline.input-group-addon-end { padding-inline-end:var(--space-1); } .vp-md\:input-group-addon-block { inline-size:100%; justify-content:flex-start; } .vp-md\:input-group-addon-block.input-group-addon-start { padding:var(--space-2) var(--space-3) 0; } .vp-md\:input-group-addon-block.input-group-addon-end { padding:0 var(--space-3) var(--space-2); } .vp-md\:grid-span-1 { grid-column:span 1 / span 1; } .vp-md\:grid-span-2 { grid-column:span 2 / span 2; } .vp-md\:grid-span-3 { grid-column:span 3 / span 3; } .vp-md\:grid-span-4 { grid-column:span 4 / span 4; } .vp-md\:grid-span-5 { grid-column:span 5 / span 5; } .vp-md\:grid-span-6 { grid-column:span 6 / span 6; } .vp-md\:grid-span-7 { grid-column:span 7 / span 7; } .vp-md\:grid-span-8 { grid-column:span 8 / span 8; } .vp-md\:grid-span-9 { grid-column:span 9 / span 9; } .vp-md\:grid-span-10 { grid-column:span 10 / span 10; } .vp-md\:grid-span-11 { grid-column:span 11 / span 11; } .vp-md\:grid-span-12 { grid-column:span 12 / span 12; } }
+@media (min-width:1024px) { .vp-lg\:size-xs{--step-h:var(--control-h-xs);--step-fs:var(--text-xs);--step-gap:6px;--step-px:10px;--step-field-px:var(--space-3);--step-select-pe:var(--space-8)} .vp-lg\:size-sm{--step-h:var(--control-h-sm);--step-fs:var(--text-sm);--step-gap:8px;--step-px:12px;--step-field-px:var(--space-3);--step-select-pe:var(--space-8);--step-icon:var(--icon-sm);--step-qr:7.5rem;--step-avatar-fs:var(--text-xs)} .vp-lg\:size-md{--step-h:var(--control-h-md);--step-fs:var(--text-sm);--step-gap:8px;--step-px:15px;--step-field-px:13px;--step-select-pe:38px;--step-icon:var(--icon-md);--step-qr:10rem} .vp-lg\:size-lg{--step-h:var(--control-h-lg);--step-fs:var(--text-base);--step-gap:8px;--step-px:20px;--step-field-px:var(--space-4);--step-select-pe:calc(var(--space-10) + var(--space-1));--step-icon:var(--icon-lg);--step-qr:15rem} .vp-lg\:size-xl{--step-h:var(--control-h-xl);--step-fs:var(--text-base);--step-gap:10px;--step-px:26px;--step-field-px:var(--space-4);--step-select-pe:calc(var(--space-10) + var(--space-1));--step-icon:var(--icon-xl)} .vp-lg\:btn-group-vertical { flex-direction:column; align-items:stretch; } .vp-lg\:btn-group-horizontal { flex-direction:row; align-items:center; } .vp-lg\:range-vertical { writing-mode:vertical-rl; direction:rtl; inline-size:var(--range-vertical-size,10rem); width:auto; } .vp-lg\:range-horizontal { writing-mode:horizontal-tb; direction:inherit; inline-size:auto; width:100%; } .vp-lg\:field-horizontal { display:grid; grid-template-columns:minmax(0,var(--field-label-width,12rem)) minmax(0,1fr); align-items:center; column-gap:var(--space-4); row-gap:var(--space-1); } .vp-lg\:field-horizontal>.label { grid-column:1; flex-direction:column; align-items:flex-start; justify-content:center; gap:var(--space-05); } .vp-lg\:field-horizontal>*:not(.label) { grid-column:2; } .vp-lg\:field-vertical { display:flex; flex-direction:column; gap:7px; } .vp-lg\:field-vertical>.label { flex-direction:row; align-items:stretch; justify-content:space-between; gap:12px; } .vp-lg\:input-group-addon-inline { inline-size:auto; justify-content:normal; } .vp-lg\:input-group-addon-inline.input-group-addon-start { padding-inline:var(--space-3); } .vp-lg\:input-group-addon-inline.input-group-addon-end { padding-inline-end:var(--space-1); } .vp-lg\:input-group-addon-block { inline-size:100%; justify-content:flex-start; } .vp-lg\:input-group-addon-block.input-group-addon-start { padding:var(--space-2) var(--space-3) 0; } .vp-lg\:input-group-addon-block.input-group-addon-end { padding:0 var(--space-3) var(--space-2); } .vp-lg\:grid-span-1 { grid-column:span 1 / span 1; } .vp-lg\:grid-span-2 { grid-column:span 2 / span 2; } .vp-lg\:grid-span-3 { grid-column:span 3 / span 3; } .vp-lg\:grid-span-4 { grid-column:span 4 / span 4; } .vp-lg\:grid-span-5 { grid-column:span 5 / span 5; } .vp-lg\:grid-span-6 { grid-column:span 6 / span 6; } .vp-lg\:grid-span-7 { grid-column:span 7 / span 7; } .vp-lg\:grid-span-8 { grid-column:span 8 / span 8; } .vp-lg\:grid-span-9 { grid-column:span 9 / span 9; } .vp-lg\:grid-span-10 { grid-column:span 10 / span 10; } .vp-lg\:grid-span-11 { grid-column:span 11 / span 11; } .vp-lg\:grid-span-12 { grid-column:span 12 / span 12; } }
+@media (min-width:1280px) { .vp-xl\:size-xs{--step-h:var(--control-h-xs);--step-fs:var(--text-xs);--step-gap:6px;--step-px:10px;--step-field-px:var(--space-3);--step-select-pe:var(--space-8)} .vp-xl\:size-sm{--step-h:var(--control-h-sm);--step-fs:var(--text-sm);--step-gap:8px;--step-px:12px;--step-field-px:var(--space-3);--step-select-pe:var(--space-8);--step-icon:var(--icon-sm);--step-qr:7.5rem;--step-avatar-fs:var(--text-xs)} .vp-xl\:size-md{--step-h:var(--control-h-md);--step-fs:var(--text-sm);--step-gap:8px;--step-px:15px;--step-field-px:13px;--step-select-pe:38px;--step-icon:var(--icon-md);--step-qr:10rem} .vp-xl\:size-lg{--step-h:var(--control-h-lg);--step-fs:var(--text-base);--step-gap:8px;--step-px:20px;--step-field-px:var(--space-4);--step-select-pe:calc(var(--space-10) + var(--space-1));--step-icon:var(--icon-lg);--step-qr:15rem} .vp-xl\:size-xl{--step-h:var(--control-h-xl);--step-fs:var(--text-base);--step-gap:10px;--step-px:26px;--step-field-px:var(--space-4);--step-select-pe:calc(var(--space-10) + var(--space-1));--step-icon:var(--icon-xl)} .vp-xl\:btn-group-vertical { flex-direction:column; align-items:stretch; } .vp-xl\:btn-group-horizontal { flex-direction:row; align-items:center; } .vp-xl\:range-vertical { writing-mode:vertical-rl; direction:rtl; inline-size:var(--range-vertical-size,10rem); width:auto; } .vp-xl\:range-horizontal { writing-mode:horizontal-tb; direction:inherit; inline-size:auto; width:100%; } .vp-xl\:field-horizontal { display:grid; grid-template-columns:minmax(0,var(--field-label-width,12rem)) minmax(0,1fr); align-items:center; column-gap:var(--space-4); row-gap:var(--space-1); } .vp-xl\:field-horizontal>.label { grid-column:1; flex-direction:column; align-items:flex-start; justify-content:center; gap:var(--space-05); } .vp-xl\:field-horizontal>*:not(.label) { grid-column:2; } .vp-xl\:field-vertical { display:flex; flex-direction:column; gap:7px; } .vp-xl\:field-vertical>.label { flex-direction:row; align-items:stretch; justify-content:space-between; gap:12px; } .vp-xl\:input-group-addon-inline { inline-size:auto; justify-content:normal; } .vp-xl\:input-group-addon-inline.input-group-addon-start { padding-inline:var(--space-3); } .vp-xl\:input-group-addon-inline.input-group-addon-end { padding-inline-end:var(--space-1); } .vp-xl\:input-group-addon-block { inline-size:100%; justify-content:flex-start; } .vp-xl\:input-group-addon-block.input-group-addon-start { padding:var(--space-2) var(--space-3) 0; } .vp-xl\:input-group-addon-block.input-group-addon-end { padding:0 var(--space-3) var(--space-2); } .vp-xl\:grid-span-1 { grid-column:span 1 / span 1; } .vp-xl\:grid-span-2 { grid-column:span 2 / span 2; } .vp-xl\:grid-span-3 { grid-column:span 3 / span 3; } .vp-xl\:grid-span-4 { grid-column:span 4 / span 4; } .vp-xl\:grid-span-5 { grid-column:span 5 / span 5; } .vp-xl\:grid-span-6 { grid-column:span 6 / span 6; } .vp-xl\:grid-span-7 { grid-column:span 7 / span 7; } .vp-xl\:grid-span-8 { grid-column:span 8 / span 8; } .vp-xl\:grid-span-9 { grid-column:span 9 / span 9; } .vp-xl\:grid-span-10 { grid-column:span 10 / span 10; } .vp-xl\:grid-span-11 { grid-column:span 11 / span 11; } .vp-xl\:grid-span-12 { grid-column:span 12 / span 12; } }
+@media (min-width:1536px) { .vp-2xl\:size-xs{--step-h:var(--control-h-xs);--step-fs:var(--text-xs);--step-gap:6px;--step-px:10px;--step-field-px:var(--space-3);--step-select-pe:var(--space-8)} .vp-2xl\:size-sm{--step-h:var(--control-h-sm);--step-fs:var(--text-sm);--step-gap:8px;--step-px:12px;--step-field-px:var(--space-3);--step-select-pe:var(--space-8);--step-icon:var(--icon-sm);--step-qr:7.5rem;--step-avatar-fs:var(--text-xs)} .vp-2xl\:size-md{--step-h:var(--control-h-md);--step-fs:var(--text-sm);--step-gap:8px;--step-px:15px;--step-field-px:13px;--step-select-pe:38px;--step-icon:var(--icon-md);--step-qr:10rem} .vp-2xl\:size-lg{--step-h:var(--control-h-lg);--step-fs:var(--text-base);--step-gap:8px;--step-px:20px;--step-field-px:var(--space-4);--step-select-pe:calc(var(--space-10) + var(--space-1));--step-icon:var(--icon-lg);--step-qr:15rem} .vp-2xl\:size-xl{--step-h:var(--control-h-xl);--step-fs:var(--text-base);--step-gap:10px;--step-px:26px;--step-field-px:var(--space-4);--step-select-pe:calc(var(--space-10) + var(--space-1));--step-icon:var(--icon-xl)} .vp-2xl\:btn-group-vertical { flex-direction:column; align-items:stretch; } .vp-2xl\:btn-group-horizontal { flex-direction:row; align-items:center; } .vp-2xl\:range-vertical { writing-mode:vertical-rl; direction:rtl; inline-size:var(--range-vertical-size,10rem); width:auto; } .vp-2xl\:range-horizontal { writing-mode:horizontal-tb; direction:inherit; inline-size:auto; width:100%; } .vp-2xl\:field-horizontal { display:grid; grid-template-columns:minmax(0,var(--field-label-width,12rem)) minmax(0,1fr); align-items:center; column-gap:var(--space-4); row-gap:var(--space-1); } .vp-2xl\:field-horizontal>.label { grid-column:1; flex-direction:column; align-items:flex-start; justify-content:center; gap:var(--space-05); } .vp-2xl\:field-horizontal>*:not(.label) { grid-column:2; } .vp-2xl\:field-vertical { display:flex; flex-direction:column; gap:7px; } .vp-2xl\:field-vertical>.label { flex-direction:row; align-items:stretch; justify-content:space-between; gap:12px; } .vp-2xl\:input-group-addon-inline { inline-size:auto; justify-content:normal; } .vp-2xl\:input-group-addon-inline.input-group-addon-start { padding-inline:var(--space-3); } .vp-2xl\:input-group-addon-inline.input-group-addon-end { padding-inline-end:var(--space-1); } .vp-2xl\:input-group-addon-block { inline-size:100%; justify-content:flex-start; } .vp-2xl\:input-group-addon-block.input-group-addon-start { padding:var(--space-2) var(--space-3) 0; } .vp-2xl\:input-group-addon-block.input-group-addon-end { padding:0 var(--space-3) var(--space-2); } .vp-2xl\:grid-span-1 { grid-column:span 1 / span 1; } .vp-2xl\:grid-span-2 { grid-column:span 2 / span 2; } .vp-2xl\:grid-span-3 { grid-column:span 3 / span 3; } .vp-2xl\:grid-span-4 { grid-column:span 4 / span 4; } .vp-2xl\:grid-span-5 { grid-column:span 5 / span 5; } .vp-2xl\:grid-span-6 { grid-column:span 6 / span 6; } .vp-2xl\:grid-span-7 { grid-column:span 7 / span 7; } .vp-2xl\:grid-span-8 { grid-column:span 8 / span 8; } .vp-2xl\:grid-span-9 { grid-column:span 9 / span 9; } .vp-2xl\:grid-span-10 { grid-column:span 10 / span 10; } .vp-2xl\:grid-span-11 { grid-column:span 11 / span 11; } .vp-2xl\:grid-span-12 { grid-column:span 12 / span 12; } }
 
 /* por CONTAINER — o componente responde ao ESPAÇO EM QUE FOI COLOCADO */
-@container aurea (min-width:360px) { .ct-2xs\:size-xs{--step-h:var(--control-h-xs);--step-fs:var(--text-xs);--step-gap:6px;--step-px:10px;--step-field-px:var(--space-3);--step-select-pe:var(--space-8)} .ct-2xs\:size-sm{--step-h:var(--control-h-sm);--step-fs:var(--text-sm);--step-gap:8px;--step-px:12px;--step-field-px:var(--space-3);--step-select-pe:var(--space-8);--step-icon:var(--icon-sm);--step-qr:7.5rem;--step-avatar-fs:var(--text-xs)} .ct-2xs\:size-md{--step-h:var(--control-h-md);--step-fs:var(--text-sm);--step-gap:8px;--step-px:15px;--step-field-px:13px;--step-select-pe:38px;--step-icon:var(--icon-md);--step-qr:10rem} .ct-2xs\:size-lg{--step-h:var(--control-h-lg);--step-fs:var(--text-base);--step-gap:8px;--step-px:20px;--step-field-px:var(--space-4);--step-select-pe:calc(var(--space-10) + var(--space-1));--step-icon:var(--icon-lg);--step-qr:15rem} .ct-2xs\:size-xl{--step-h:var(--control-h-xl);--step-fs:var(--text-base);--step-gap:10px;--step-px:26px;--step-field-px:var(--space-4);--step-select-pe:calc(var(--space-10) + var(--space-1));--step-icon:var(--icon-xl)} .ct-2xs\:btn-group-vertical { flex-direction:column; align-items:stretch; } .ct-2xs\:btn-group-horizontal { flex-direction:row; align-items:center; } .ct-2xs\:range-vertical { writing-mode:vertical-rl; direction:rtl; inline-size:var(--range-vertical-size,10rem); width:auto; } .ct-2xs\:range-horizontal { writing-mode:horizontal-tb; direction:inherit; inline-size:auto; width:100%; } .ct-2xs\:field-horizontal { display:grid; grid-template-columns:minmax(0,var(--field-label-width,12rem)) minmax(0,1fr); align-items:center; column-gap:var(--space-4); row-gap:var(--space-1); } .ct-2xs\:field-horizontal>.label { grid-column:1; flex-direction:column; align-items:flex-start; justify-content:center; gap:var(--space-05); } .ct-2xs\:field-horizontal>*:not(.label) { grid-column:2; } .ct-2xs\:field-vertical { display:flex; flex-direction:column; gap:7px; } .ct-2xs\:field-vertical>.label { flex-direction:row; align-items:stretch; justify-content:space-between; gap:12px; } .ct-2xs\:input-group-addon-inline { inline-size:auto; justify-content:normal; } .ct-2xs\:input-group-addon-inline.input-group-addon-start { padding-inline:var(--space-3); } .ct-2xs\:input-group-addon-inline.input-group-addon-end { padding-inline-end:var(--space-1); } .ct-2xs\:input-group-addon-block { inline-size:100%; justify-content:flex-start; } .ct-2xs\:input-group-addon-block.input-group-addon-start { padding:var(--space-2) var(--space-3) 0; } .ct-2xs\:input-group-addon-block.input-group-addon-end { padding:0 var(--space-3) var(--space-2); } }
-@container aurea (min-width:480px) { .ct-xs\:size-xs{--step-h:var(--control-h-xs);--step-fs:var(--text-xs);--step-gap:6px;--step-px:10px;--step-field-px:var(--space-3);--step-select-pe:var(--space-8)} .ct-xs\:size-sm{--step-h:var(--control-h-sm);--step-fs:var(--text-sm);--step-gap:8px;--step-px:12px;--step-field-px:var(--space-3);--step-select-pe:var(--space-8);--step-icon:var(--icon-sm);--step-qr:7.5rem;--step-avatar-fs:var(--text-xs)} .ct-xs\:size-md{--step-h:var(--control-h-md);--step-fs:var(--text-sm);--step-gap:8px;--step-px:15px;--step-field-px:13px;--step-select-pe:38px;--step-icon:var(--icon-md);--step-qr:10rem} .ct-xs\:size-lg{--step-h:var(--control-h-lg);--step-fs:var(--text-base);--step-gap:8px;--step-px:20px;--step-field-px:var(--space-4);--step-select-pe:calc(var(--space-10) + var(--space-1));--step-icon:var(--icon-lg);--step-qr:15rem} .ct-xs\:size-xl{--step-h:var(--control-h-xl);--step-fs:var(--text-base);--step-gap:10px;--step-px:26px;--step-field-px:var(--space-4);--step-select-pe:calc(var(--space-10) + var(--space-1));--step-icon:var(--icon-xl)} .ct-xs\:btn-group-vertical { flex-direction:column; align-items:stretch; } .ct-xs\:btn-group-horizontal { flex-direction:row; align-items:center; } .ct-xs\:range-vertical { writing-mode:vertical-rl; direction:rtl; inline-size:var(--range-vertical-size,10rem); width:auto; } .ct-xs\:range-horizontal { writing-mode:horizontal-tb; direction:inherit; inline-size:auto; width:100%; } .ct-xs\:field-horizontal { display:grid; grid-template-columns:minmax(0,var(--field-label-width,12rem)) minmax(0,1fr); align-items:center; column-gap:var(--space-4); row-gap:var(--space-1); } .ct-xs\:field-horizontal>.label { grid-column:1; flex-direction:column; align-items:flex-start; justify-content:center; gap:var(--space-05); } .ct-xs\:field-horizontal>*:not(.label) { grid-column:2; } .ct-xs\:field-vertical { display:flex; flex-direction:column; gap:7px; } .ct-xs\:field-vertical>.label { flex-direction:row; align-items:stretch; justify-content:space-between; gap:12px; } .ct-xs\:input-group-addon-inline { inline-size:auto; justify-content:normal; } .ct-xs\:input-group-addon-inline.input-group-addon-start { padding-inline:var(--space-3); } .ct-xs\:input-group-addon-inline.input-group-addon-end { padding-inline-end:var(--space-1); } .ct-xs\:input-group-addon-block { inline-size:100%; justify-content:flex-start; } .ct-xs\:input-group-addon-block.input-group-addon-start { padding:var(--space-2) var(--space-3) 0; } .ct-xs\:input-group-addon-block.input-group-addon-end { padding:0 var(--space-3) var(--space-2); } }
-@container aurea (min-width:640px) { .ct-sm\:size-xs{--step-h:var(--control-h-xs);--step-fs:var(--text-xs);--step-gap:6px;--step-px:10px;--step-field-px:var(--space-3);--step-select-pe:var(--space-8)} .ct-sm\:size-sm{--step-h:var(--control-h-sm);--step-fs:var(--text-sm);--step-gap:8px;--step-px:12px;--step-field-px:var(--space-3);--step-select-pe:var(--space-8);--step-icon:var(--icon-sm);--step-qr:7.5rem;--step-avatar-fs:var(--text-xs)} .ct-sm\:size-md{--step-h:var(--control-h-md);--step-fs:var(--text-sm);--step-gap:8px;--step-px:15px;--step-field-px:13px;--step-select-pe:38px;--step-icon:var(--icon-md);--step-qr:10rem} .ct-sm\:size-lg{--step-h:var(--control-h-lg);--step-fs:var(--text-base);--step-gap:8px;--step-px:20px;--step-field-px:var(--space-4);--step-select-pe:calc(var(--space-10) + var(--space-1));--step-icon:var(--icon-lg);--step-qr:15rem} .ct-sm\:size-xl{--step-h:var(--control-h-xl);--step-fs:var(--text-base);--step-gap:10px;--step-px:26px;--step-field-px:var(--space-4);--step-select-pe:calc(var(--space-10) + var(--space-1));--step-icon:var(--icon-xl)} .ct-sm\:btn-group-vertical { flex-direction:column; align-items:stretch; } .ct-sm\:btn-group-horizontal { flex-direction:row; align-items:center; } .ct-sm\:range-vertical { writing-mode:vertical-rl; direction:rtl; inline-size:var(--range-vertical-size,10rem); width:auto; } .ct-sm\:range-horizontal { writing-mode:horizontal-tb; direction:inherit; inline-size:auto; width:100%; } .ct-sm\:field-horizontal { display:grid; grid-template-columns:minmax(0,var(--field-label-width,12rem)) minmax(0,1fr); align-items:center; column-gap:var(--space-4); row-gap:var(--space-1); } .ct-sm\:field-horizontal>.label { grid-column:1; flex-direction:column; align-items:flex-start; justify-content:center; gap:var(--space-05); } .ct-sm\:field-horizontal>*:not(.label) { grid-column:2; } .ct-sm\:field-vertical { display:flex; flex-direction:column; gap:7px; } .ct-sm\:field-vertical>.label { flex-direction:row; align-items:stretch; justify-content:space-between; gap:12px; } .ct-sm\:input-group-addon-inline { inline-size:auto; justify-content:normal; } .ct-sm\:input-group-addon-inline.input-group-addon-start { padding-inline:var(--space-3); } .ct-sm\:input-group-addon-inline.input-group-addon-end { padding-inline-end:var(--space-1); } .ct-sm\:input-group-addon-block { inline-size:100%; justify-content:flex-start; } .ct-sm\:input-group-addon-block.input-group-addon-start { padding:var(--space-2) var(--space-3) 0; } .ct-sm\:input-group-addon-block.input-group-addon-end { padding:0 var(--space-3) var(--space-2); } }
-@container aurea (min-width:768px) { .ct-md\:size-xs{--step-h:var(--control-h-xs);--step-fs:var(--text-xs);--step-gap:6px;--step-px:10px;--step-field-px:var(--space-3);--step-select-pe:var(--space-8)} .ct-md\:size-sm{--step-h:var(--control-h-sm);--step-fs:var(--text-sm);--step-gap:8px;--step-px:12px;--step-field-px:var(--space-3);--step-select-pe:var(--space-8);--step-icon:var(--icon-sm);--step-qr:7.5rem;--step-avatar-fs:var(--text-xs)} .ct-md\:size-md{--step-h:var(--control-h-md);--step-fs:var(--text-sm);--step-gap:8px;--step-px:15px;--step-field-px:13px;--step-select-pe:38px;--step-icon:var(--icon-md);--step-qr:10rem} .ct-md\:size-lg{--step-h:var(--control-h-lg);--step-fs:var(--text-base);--step-gap:8px;--step-px:20px;--step-field-px:var(--space-4);--step-select-pe:calc(var(--space-10) + var(--space-1));--step-icon:var(--icon-lg);--step-qr:15rem} .ct-md\:size-xl{--step-h:var(--control-h-xl);--step-fs:var(--text-base);--step-gap:10px;--step-px:26px;--step-field-px:var(--space-4);--step-select-pe:calc(var(--space-10) + var(--space-1));--step-icon:var(--icon-xl)} .ct-md\:btn-group-vertical { flex-direction:column; align-items:stretch; } .ct-md\:btn-group-horizontal { flex-direction:row; align-items:center; } .ct-md\:range-vertical { writing-mode:vertical-rl; direction:rtl; inline-size:var(--range-vertical-size,10rem); width:auto; } .ct-md\:range-horizontal { writing-mode:horizontal-tb; direction:inherit; inline-size:auto; width:100%; } .ct-md\:field-horizontal { display:grid; grid-template-columns:minmax(0,var(--field-label-width,12rem)) minmax(0,1fr); align-items:center; column-gap:var(--space-4); row-gap:var(--space-1); } .ct-md\:field-horizontal>.label { grid-column:1; flex-direction:column; align-items:flex-start; justify-content:center; gap:var(--space-05); } .ct-md\:field-horizontal>*:not(.label) { grid-column:2; } .ct-md\:field-vertical { display:flex; flex-direction:column; gap:7px; } .ct-md\:field-vertical>.label { flex-direction:row; align-items:stretch; justify-content:space-between; gap:12px; } .ct-md\:input-group-addon-inline { inline-size:auto; justify-content:normal; } .ct-md\:input-group-addon-inline.input-group-addon-start { padding-inline:var(--space-3); } .ct-md\:input-group-addon-inline.input-group-addon-end { padding-inline-end:var(--space-1); } .ct-md\:input-group-addon-block { inline-size:100%; justify-content:flex-start; } .ct-md\:input-group-addon-block.input-group-addon-start { padding:var(--space-2) var(--space-3) 0; } .ct-md\:input-group-addon-block.input-group-addon-end { padding:0 var(--space-3) var(--space-2); } }
-@container aurea (min-width:1024px) { .ct-lg\:size-xs{--step-h:var(--control-h-xs);--step-fs:var(--text-xs);--step-gap:6px;--step-px:10px;--step-field-px:var(--space-3);--step-select-pe:var(--space-8)} .ct-lg\:size-sm{--step-h:var(--control-h-sm);--step-fs:var(--text-sm);--step-gap:8px;--step-px:12px;--step-field-px:var(--space-3);--step-select-pe:var(--space-8);--step-icon:var(--icon-sm);--step-qr:7.5rem;--step-avatar-fs:var(--text-xs)} .ct-lg\:size-md{--step-h:var(--control-h-md);--step-fs:var(--text-sm);--step-gap:8px;--step-px:15px;--step-field-px:13px;--step-select-pe:38px;--step-icon:var(--icon-md);--step-qr:10rem} .ct-lg\:size-lg{--step-h:var(--control-h-lg);--step-fs:var(--text-base);--step-gap:8px;--step-px:20px;--step-field-px:var(--space-4);--step-select-pe:calc(var(--space-10) + var(--space-1));--step-icon:var(--icon-lg);--step-qr:15rem} .ct-lg\:size-xl{--step-h:var(--control-h-xl);--step-fs:var(--text-base);--step-gap:10px;--step-px:26px;--step-field-px:var(--space-4);--step-select-pe:calc(var(--space-10) + var(--space-1));--step-icon:var(--icon-xl)} .ct-lg\:btn-group-vertical { flex-direction:column; align-items:stretch; } .ct-lg\:btn-group-horizontal { flex-direction:row; align-items:center; } .ct-lg\:range-vertical { writing-mode:vertical-rl; direction:rtl; inline-size:var(--range-vertical-size,10rem); width:auto; } .ct-lg\:range-horizontal { writing-mode:horizontal-tb; direction:inherit; inline-size:auto; width:100%; } .ct-lg\:field-horizontal { display:grid; grid-template-columns:minmax(0,var(--field-label-width,12rem)) minmax(0,1fr); align-items:center; column-gap:var(--space-4); row-gap:var(--space-1); } .ct-lg\:field-horizontal>.label { grid-column:1; flex-direction:column; align-items:flex-start; justify-content:center; gap:var(--space-05); } .ct-lg\:field-horizontal>*:not(.label) { grid-column:2; } .ct-lg\:field-vertical { display:flex; flex-direction:column; gap:7px; } .ct-lg\:field-vertical>.label { flex-direction:row; align-items:stretch; justify-content:space-between; gap:12px; } .ct-lg\:input-group-addon-inline { inline-size:auto; justify-content:normal; } .ct-lg\:input-group-addon-inline.input-group-addon-start { padding-inline:var(--space-3); } .ct-lg\:input-group-addon-inline.input-group-addon-end { padding-inline-end:var(--space-1); } .ct-lg\:input-group-addon-block { inline-size:100%; justify-content:flex-start; } .ct-lg\:input-group-addon-block.input-group-addon-start { padding:var(--space-2) var(--space-3) 0; } .ct-lg\:input-group-addon-block.input-group-addon-end { padding:0 var(--space-3) var(--space-2); } }
+@container aurea (min-width:360px) { .ct-2xs\:size-xs{--step-h:var(--control-h-xs);--step-fs:var(--text-xs);--step-gap:6px;--step-px:10px;--step-field-px:var(--space-3);--step-select-pe:var(--space-8)} .ct-2xs\:size-sm{--step-h:var(--control-h-sm);--step-fs:var(--text-sm);--step-gap:8px;--step-px:12px;--step-field-px:var(--space-3);--step-select-pe:var(--space-8);--step-icon:var(--icon-sm);--step-qr:7.5rem;--step-avatar-fs:var(--text-xs)} .ct-2xs\:size-md{--step-h:var(--control-h-md);--step-fs:var(--text-sm);--step-gap:8px;--step-px:15px;--step-field-px:13px;--step-select-pe:38px;--step-icon:var(--icon-md);--step-qr:10rem} .ct-2xs\:size-lg{--step-h:var(--control-h-lg);--step-fs:var(--text-base);--step-gap:8px;--step-px:20px;--step-field-px:var(--space-4);--step-select-pe:calc(var(--space-10) + var(--space-1));--step-icon:var(--icon-lg);--step-qr:15rem} .ct-2xs\:size-xl{--step-h:var(--control-h-xl);--step-fs:var(--text-base);--step-gap:10px;--step-px:26px;--step-field-px:var(--space-4);--step-select-pe:calc(var(--space-10) + var(--space-1));--step-icon:var(--icon-xl)} .ct-2xs\:btn-group-vertical { flex-direction:column; align-items:stretch; } .ct-2xs\:btn-group-horizontal { flex-direction:row; align-items:center; } .ct-2xs\:range-vertical { writing-mode:vertical-rl; direction:rtl; inline-size:var(--range-vertical-size,10rem); width:auto; } .ct-2xs\:range-horizontal { writing-mode:horizontal-tb; direction:inherit; inline-size:auto; width:100%; } .ct-2xs\:field-horizontal { display:grid; grid-template-columns:minmax(0,var(--field-label-width,12rem)) minmax(0,1fr); align-items:center; column-gap:var(--space-4); row-gap:var(--space-1); } .ct-2xs\:field-horizontal>.label { grid-column:1; flex-direction:column; align-items:flex-start; justify-content:center; gap:var(--space-05); } .ct-2xs\:field-horizontal>*:not(.label) { grid-column:2; } .ct-2xs\:field-vertical { display:flex; flex-direction:column; gap:7px; } .ct-2xs\:field-vertical>.label { flex-direction:row; align-items:stretch; justify-content:space-between; gap:12px; } .ct-2xs\:input-group-addon-inline { inline-size:auto; justify-content:normal; } .ct-2xs\:input-group-addon-inline.input-group-addon-start { padding-inline:var(--space-3); } .ct-2xs\:input-group-addon-inline.input-group-addon-end { padding-inline-end:var(--space-1); } .ct-2xs\:input-group-addon-block { inline-size:100%; justify-content:flex-start; } .ct-2xs\:input-group-addon-block.input-group-addon-start { padding:var(--space-2) var(--space-3) 0; } .ct-2xs\:input-group-addon-block.input-group-addon-end { padding:0 var(--space-3) var(--space-2); } .ct-2xs\:grid-span-1 { grid-column:span 1 / span 1; } .ct-2xs\:grid-span-2 { grid-column:span 2 / span 2; } .ct-2xs\:grid-span-3 { grid-column:span 3 / span 3; } .ct-2xs\:grid-span-4 { grid-column:span 4 / span 4; } .ct-2xs\:grid-span-5 { grid-column:span 5 / span 5; } .ct-2xs\:grid-span-6 { grid-column:span 6 / span 6; } .ct-2xs\:grid-span-7 { grid-column:span 7 / span 7; } .ct-2xs\:grid-span-8 { grid-column:span 8 / span 8; } .ct-2xs\:grid-span-9 { grid-column:span 9 / span 9; } .ct-2xs\:grid-span-10 { grid-column:span 10 / span 10; } .ct-2xs\:grid-span-11 { grid-column:span 11 / span 11; } .ct-2xs\:grid-span-12 { grid-column:span 12 / span 12; } }
+@container aurea (min-width:480px) { .ct-xs\:size-xs{--step-h:var(--control-h-xs);--step-fs:var(--text-xs);--step-gap:6px;--step-px:10px;--step-field-px:var(--space-3);--step-select-pe:var(--space-8)} .ct-xs\:size-sm{--step-h:var(--control-h-sm);--step-fs:var(--text-sm);--step-gap:8px;--step-px:12px;--step-field-px:var(--space-3);--step-select-pe:var(--space-8);--step-icon:var(--icon-sm);--step-qr:7.5rem;--step-avatar-fs:var(--text-xs)} .ct-xs\:size-md{--step-h:var(--control-h-md);--step-fs:var(--text-sm);--step-gap:8px;--step-px:15px;--step-field-px:13px;--step-select-pe:38px;--step-icon:var(--icon-md);--step-qr:10rem} .ct-xs\:size-lg{--step-h:var(--control-h-lg);--step-fs:var(--text-base);--step-gap:8px;--step-px:20px;--step-field-px:var(--space-4);--step-select-pe:calc(var(--space-10) + var(--space-1));--step-icon:var(--icon-lg);--step-qr:15rem} .ct-xs\:size-xl{--step-h:var(--control-h-xl);--step-fs:var(--text-base);--step-gap:10px;--step-px:26px;--step-field-px:var(--space-4);--step-select-pe:calc(var(--space-10) + var(--space-1));--step-icon:var(--icon-xl)} .ct-xs\:btn-group-vertical { flex-direction:column; align-items:stretch; } .ct-xs\:btn-group-horizontal { flex-direction:row; align-items:center; } .ct-xs\:range-vertical { writing-mode:vertical-rl; direction:rtl; inline-size:var(--range-vertical-size,10rem); width:auto; } .ct-xs\:range-horizontal { writing-mode:horizontal-tb; direction:inherit; inline-size:auto; width:100%; } .ct-xs\:field-horizontal { display:grid; grid-template-columns:minmax(0,var(--field-label-width,12rem)) minmax(0,1fr); align-items:center; column-gap:var(--space-4); row-gap:var(--space-1); } .ct-xs\:field-horizontal>.label { grid-column:1; flex-direction:column; align-items:flex-start; justify-content:center; gap:var(--space-05); } .ct-xs\:field-horizontal>*:not(.label) { grid-column:2; } .ct-xs\:field-vertical { display:flex; flex-direction:column; gap:7px; } .ct-xs\:field-vertical>.label { flex-direction:row; align-items:stretch; justify-content:space-between; gap:12px; } .ct-xs\:input-group-addon-inline { inline-size:auto; justify-content:normal; } .ct-xs\:input-group-addon-inline.input-group-addon-start { padding-inline:var(--space-3); } .ct-xs\:input-group-addon-inline.input-group-addon-end { padding-inline-end:var(--space-1); } .ct-xs\:input-group-addon-block { inline-size:100%; justify-content:flex-start; } .ct-xs\:input-group-addon-block.input-group-addon-start { padding:var(--space-2) var(--space-3) 0; } .ct-xs\:input-group-addon-block.input-group-addon-end { padding:0 var(--space-3) var(--space-2); } .ct-xs\:grid-span-1 { grid-column:span 1 / span 1; } .ct-xs\:grid-span-2 { grid-column:span 2 / span 2; } .ct-xs\:grid-span-3 { grid-column:span 3 / span 3; } .ct-xs\:grid-span-4 { grid-column:span 4 / span 4; } .ct-xs\:grid-span-5 { grid-column:span 5 / span 5; } .ct-xs\:grid-span-6 { grid-column:span 6 / span 6; } .ct-xs\:grid-span-7 { grid-column:span 7 / span 7; } .ct-xs\:grid-span-8 { grid-column:span 8 / span 8; } .ct-xs\:grid-span-9 { grid-column:span 9 / span 9; } .ct-xs\:grid-span-10 { grid-column:span 10 / span 10; } .ct-xs\:grid-span-11 { grid-column:span 11 / span 11; } .ct-xs\:grid-span-12 { grid-column:span 12 / span 12; } }
+@container aurea (min-width:640px) { .ct-sm\:size-xs{--step-h:var(--control-h-xs);--step-fs:var(--text-xs);--step-gap:6px;--step-px:10px;--step-field-px:var(--space-3);--step-select-pe:var(--space-8)} .ct-sm\:size-sm{--step-h:var(--control-h-sm);--step-fs:var(--text-sm);--step-gap:8px;--step-px:12px;--step-field-px:var(--space-3);--step-select-pe:var(--space-8);--step-icon:var(--icon-sm);--step-qr:7.5rem;--step-avatar-fs:var(--text-xs)} .ct-sm\:size-md{--step-h:var(--control-h-md);--step-fs:var(--text-sm);--step-gap:8px;--step-px:15px;--step-field-px:13px;--step-select-pe:38px;--step-icon:var(--icon-md);--step-qr:10rem} .ct-sm\:size-lg{--step-h:var(--control-h-lg);--step-fs:var(--text-base);--step-gap:8px;--step-px:20px;--step-field-px:var(--space-4);--step-select-pe:calc(var(--space-10) + var(--space-1));--step-icon:var(--icon-lg);--step-qr:15rem} .ct-sm\:size-xl{--step-h:var(--control-h-xl);--step-fs:var(--text-base);--step-gap:10px;--step-px:26px;--step-field-px:var(--space-4);--step-select-pe:calc(var(--space-10) + var(--space-1));--step-icon:var(--icon-xl)} .ct-sm\:btn-group-vertical { flex-direction:column; align-items:stretch; } .ct-sm\:btn-group-horizontal { flex-direction:row; align-items:center; } .ct-sm\:range-vertical { writing-mode:vertical-rl; direction:rtl; inline-size:var(--range-vertical-size,10rem); width:auto; } .ct-sm\:range-horizontal { writing-mode:horizontal-tb; direction:inherit; inline-size:auto; width:100%; } .ct-sm\:field-horizontal { display:grid; grid-template-columns:minmax(0,var(--field-label-width,12rem)) minmax(0,1fr); align-items:center; column-gap:var(--space-4); row-gap:var(--space-1); } .ct-sm\:field-horizontal>.label { grid-column:1; flex-direction:column; align-items:flex-start; justify-content:center; gap:var(--space-05); } .ct-sm\:field-horizontal>*:not(.label) { grid-column:2; } .ct-sm\:field-vertical { display:flex; flex-direction:column; gap:7px; } .ct-sm\:field-vertical>.label { flex-direction:row; align-items:stretch; justify-content:space-between; gap:12px; } .ct-sm\:input-group-addon-inline { inline-size:auto; justify-content:normal; } .ct-sm\:input-group-addon-inline.input-group-addon-start { padding-inline:var(--space-3); } .ct-sm\:input-group-addon-inline.input-group-addon-end { padding-inline-end:var(--space-1); } .ct-sm\:input-group-addon-block { inline-size:100%; justify-content:flex-start; } .ct-sm\:input-group-addon-block.input-group-addon-start { padding:var(--space-2) var(--space-3) 0; } .ct-sm\:input-group-addon-block.input-group-addon-end { padding:0 var(--space-3) var(--space-2); } .ct-sm\:grid-span-1 { grid-column:span 1 / span 1; } .ct-sm\:grid-span-2 { grid-column:span 2 / span 2; } .ct-sm\:grid-span-3 { grid-column:span 3 / span 3; } .ct-sm\:grid-span-4 { grid-column:span 4 / span 4; } .ct-sm\:grid-span-5 { grid-column:span 5 / span 5; } .ct-sm\:grid-span-6 { grid-column:span 6 / span 6; } .ct-sm\:grid-span-7 { grid-column:span 7 / span 7; } .ct-sm\:grid-span-8 { grid-column:span 8 / span 8; } .ct-sm\:grid-span-9 { grid-column:span 9 / span 9; } .ct-sm\:grid-span-10 { grid-column:span 10 / span 10; } .ct-sm\:grid-span-11 { grid-column:span 11 / span 11; } .ct-sm\:grid-span-12 { grid-column:span 12 / span 12; } }
+@container aurea (min-width:768px) { .ct-md\:size-xs{--step-h:var(--control-h-xs);--step-fs:var(--text-xs);--step-gap:6px;--step-px:10px;--step-field-px:var(--space-3);--step-select-pe:var(--space-8)} .ct-md\:size-sm{--step-h:var(--control-h-sm);--step-fs:var(--text-sm);--step-gap:8px;--step-px:12px;--step-field-px:var(--space-3);--step-select-pe:var(--space-8);--step-icon:var(--icon-sm);--step-qr:7.5rem;--step-avatar-fs:var(--text-xs)} .ct-md\:size-md{--step-h:var(--control-h-md);--step-fs:var(--text-sm);--step-gap:8px;--step-px:15px;--step-field-px:13px;--step-select-pe:38px;--step-icon:var(--icon-md);--step-qr:10rem} .ct-md\:size-lg{--step-h:var(--control-h-lg);--step-fs:var(--text-base);--step-gap:8px;--step-px:20px;--step-field-px:var(--space-4);--step-select-pe:calc(var(--space-10) + var(--space-1));--step-icon:var(--icon-lg);--step-qr:15rem} .ct-md\:size-xl{--step-h:var(--control-h-xl);--step-fs:var(--text-base);--step-gap:10px;--step-px:26px;--step-field-px:var(--space-4);--step-select-pe:calc(var(--space-10) + var(--space-1));--step-icon:var(--icon-xl)} .ct-md\:btn-group-vertical { flex-direction:column; align-items:stretch; } .ct-md\:btn-group-horizontal { flex-direction:row; align-items:center; } .ct-md\:range-vertical { writing-mode:vertical-rl; direction:rtl; inline-size:var(--range-vertical-size,10rem); width:auto; } .ct-md\:range-horizontal { writing-mode:horizontal-tb; direction:inherit; inline-size:auto; width:100%; } .ct-md\:field-horizontal { display:grid; grid-template-columns:minmax(0,var(--field-label-width,12rem)) minmax(0,1fr); align-items:center; column-gap:var(--space-4); row-gap:var(--space-1); } .ct-md\:field-horizontal>.label { grid-column:1; flex-direction:column; align-items:flex-start; justify-content:center; gap:var(--space-05); } .ct-md\:field-horizontal>*:not(.label) { grid-column:2; } .ct-md\:field-vertical { display:flex; flex-direction:column; gap:7px; } .ct-md\:field-vertical>.label { flex-direction:row; align-items:stretch; justify-content:space-between; gap:12px; } .ct-md\:input-group-addon-inline { inline-size:auto; justify-content:normal; } .ct-md\:input-group-addon-inline.input-group-addon-start { padding-inline:var(--space-3); } .ct-md\:input-group-addon-inline.input-group-addon-end { padding-inline-end:var(--space-1); } .ct-md\:input-group-addon-block { inline-size:100%; justify-content:flex-start; } .ct-md\:input-group-addon-block.input-group-addon-start { padding:var(--space-2) var(--space-3) 0; } .ct-md\:input-group-addon-block.input-group-addon-end { padding:0 var(--space-3) var(--space-2); } .ct-md\:grid-span-1 { grid-column:span 1 / span 1; } .ct-md\:grid-span-2 { grid-column:span 2 / span 2; } .ct-md\:grid-span-3 { grid-column:span 3 / span 3; } .ct-md\:grid-span-4 { grid-column:span 4 / span 4; } .ct-md\:grid-span-5 { grid-column:span 5 / span 5; } .ct-md\:grid-span-6 { grid-column:span 6 / span 6; } .ct-md\:grid-span-7 { grid-column:span 7 / span 7; } .ct-md\:grid-span-8 { grid-column:span 8 / span 8; } .ct-md\:grid-span-9 { grid-column:span 9 / span 9; } .ct-md\:grid-span-10 { grid-column:span 10 / span 10; } .ct-md\:grid-span-11 { grid-column:span 11 / span 11; } .ct-md\:grid-span-12 { grid-column:span 12 / span 12; } }
+@container aurea (min-width:1024px) { .ct-lg\:size-xs{--step-h:var(--control-h-xs);--step-fs:var(--text-xs);--step-gap:6px;--step-px:10px;--step-field-px:var(--space-3);--step-select-pe:var(--space-8)} .ct-lg\:size-sm{--step-h:var(--control-h-sm);--step-fs:var(--text-sm);--step-gap:8px;--step-px:12px;--step-field-px:var(--space-3);--step-select-pe:var(--space-8);--step-icon:var(--icon-sm);--step-qr:7.5rem;--step-avatar-fs:var(--text-xs)} .ct-lg\:size-md{--step-h:var(--control-h-md);--step-fs:var(--text-sm);--step-gap:8px;--step-px:15px;--step-field-px:13px;--step-select-pe:38px;--step-icon:var(--icon-md);--step-qr:10rem} .ct-lg\:size-lg{--step-h:var(--control-h-lg);--step-fs:var(--text-base);--step-gap:8px;--step-px:20px;--step-field-px:var(--space-4);--step-select-pe:calc(var(--space-10) + var(--space-1));--step-icon:var(--icon-lg);--step-qr:15rem} .ct-lg\:size-xl{--step-h:var(--control-h-xl);--step-fs:var(--text-base);--step-gap:10px;--step-px:26px;--step-field-px:var(--space-4);--step-select-pe:calc(var(--space-10) + var(--space-1));--step-icon:var(--icon-xl)} .ct-lg\:btn-group-vertical { flex-direction:column; align-items:stretch; } .ct-lg\:btn-group-horizontal { flex-direction:row; align-items:center; } .ct-lg\:range-vertical { writing-mode:vertical-rl; direction:rtl; inline-size:var(--range-vertical-size,10rem); width:auto; } .ct-lg\:range-horizontal { writing-mode:horizontal-tb; direction:inherit; inline-size:auto; width:100%; } .ct-lg\:field-horizontal { display:grid; grid-template-columns:minmax(0,var(--field-label-width,12rem)) minmax(0,1fr); align-items:center; column-gap:var(--space-4); row-gap:var(--space-1); } .ct-lg\:field-horizontal>.label { grid-column:1; flex-direction:column; align-items:flex-start; justify-content:center; gap:var(--space-05); } .ct-lg\:field-horizontal>*:not(.label) { grid-column:2; } .ct-lg\:field-vertical { display:flex; flex-direction:column; gap:7px; } .ct-lg\:field-vertical>.label { flex-direction:row; align-items:stretch; justify-content:space-between; gap:12px; } .ct-lg\:input-group-addon-inline { inline-size:auto; justify-content:normal; } .ct-lg\:input-group-addon-inline.input-group-addon-start { padding-inline:var(--space-3); } .ct-lg\:input-group-addon-inline.input-group-addon-end { padding-inline-end:var(--space-1); } .ct-lg\:input-group-addon-block { inline-size:100%; justify-content:flex-start; } .ct-lg\:input-group-addon-block.input-group-addon-start { padding:var(--space-2) var(--space-3) 0; } .ct-lg\:input-group-addon-block.input-group-addon-end { padding:0 var(--space-3) var(--space-2); } .ct-lg\:grid-span-1 { grid-column:span 1 / span 1; } .ct-lg\:grid-span-2 { grid-column:span 2 / span 2; } .ct-lg\:grid-span-3 { grid-column:span 3 / span 3; } .ct-lg\:grid-span-4 { grid-column:span 4 / span 4; } .ct-lg\:grid-span-5 { grid-column:span 5 / span 5; } .ct-lg\:grid-span-6 { grid-column:span 6 / span 6; } .ct-lg\:grid-span-7 { grid-column:span 7 / span 7; } .ct-lg\:grid-span-8 { grid-column:span 8 / span 8; } .ct-lg\:grid-span-9 { grid-column:span 9 / span 9; } .ct-lg\:grid-span-10 { grid-column:span 10 / span 10; } .ct-lg\:grid-span-11 { grid-column:span 11 / span 11; } .ct-lg\:grid-span-12 { grid-column:span 12 / span 12; } }
 /* <<< fim da camada responsiva >>> */
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@aurea-uds/core",
-  "version": "0.19.1",
+  "version": "0.23.0",
   "description": "O CSS da Aurea UDS e o comportamento em JavaScript puro. Importe @aurea-uds/fonts/css antes deste.",
   "keywords": [
     "aurea",