@aurea-uds/core 0.30.0 → 0.32.0

package/dist/aurea.css

@@ -21,6 +21,11 @@
   --leading-tight:1.2;
   --leading-normal:1.5;
   --leading-relaxed:1.7;
+  --text-4xl-leading:1.111111;
+  --text-3xl-leading:1.2;
+  --text-2xl-leading:1.333333;
+  --text-xl-leading:1.4;
+  --text-lg-leading:1.555556;
   --space-0:0;
   --space-05:0.125rem;
   --space-1:0.25rem;
@@ -75,12 +80,12 @@
   --breakpoint-xl:1280px;
   --breakpoint-2xl:1536px;
   --control-h-xs:1.625rem;
-  --control-h-sm:1.875rem;
+  --control-h-sm:2rem;
   --control-h-md:2.25rem;
-  --control-h-lg:2.625rem;
+  --control-h-lg:2.5rem;
   --control-h-xl:3.125rem;
   --row-h:3rem;
-  --card-pad:1.25rem;
+  --card-pad:1rem;
   --section-gap:1.5rem;
   --media-canvas:oklch(0.085 0 0);
   --media-foreground:oklch(0.985 0 0);
@@ -443,30 +448,39 @@
   --control-h-xs:1.5rem;
   --control-h-sm:1.75rem;
   --control-h-md:2rem;
-  --control-h-lg:2.375rem;
+  --control-h-lg:2.25rem;
   --control-h-xl:2.75rem;
+  --touch-control-h-sm:2.25rem;
+  --touch-control-h-md:2.75rem;
+  --touch-control-h-lg:3.25rem;
   --row-h:2.625rem;
-  --card-pad:1rem;
+  --card-pad:0.75rem;
   --section-gap:1.125rem;
 }
 [data-density="comfortable"]{
   --control-h-xs:1.625rem;
-  --control-h-sm:1.875rem;
+  --control-h-sm:2rem;
   --control-h-md:2.25rem;
-  --control-h-lg:2.625rem;
+  --control-h-lg:2.5rem;
   --control-h-xl:3.125rem;
+  --touch-control-h-sm:2.5rem;
+  --touch-control-h-md:3rem;
+  --touch-control-h-lg:3.5rem;
   --row-h:3rem;
-  --card-pad:1.25rem;
+  --card-pad:1rem;
   --section-gap:1.5rem;
 }
 [data-density="spacious"]{
   --control-h-xs:1.75rem;
-  --control-h-sm:2.125rem;
+  --control-h-sm:2.25rem;
   --control-h-md:2.5rem;
-  --control-h-lg:3rem;
+  --control-h-lg:2.75rem;
   --control-h-xl:3.5rem;
+  --touch-control-h-sm:2.75rem;
+  --touch-control-h-md:3.25rem;
+  --touch-control-h-lg:3.75rem;
   --row-h:3.375rem;
-  --card-pad:1.5rem;
+  --card-pad:1.25rem;
   --section-gap:2rem;
 }
 /* Aurea core — component styles. Built with @aurea-uds/tokens into dist/aurea.css. Load @aurea-uds/fonts/css for Atkinson Hyperlegible (ADR-0053). */
@@ -489,7 +503,11 @@ button,a,[role="button"],input,textarea,select { outline:none; }
    o vão: colado, o anel amarelo sumiria no botão amarelo.
    Quem cobra que nenhuma peça ficou de fora é o catálogo inteiro, no navegador:
    `tests/visual/foco-uma-linha.spec.ts`. */
-:is(.input,.textarea,.select,.btn-outline,.btn-primary-outline,.btn-danger-outline,.media-control,.card,.code-block,.graph-node-body):focus-visible { outline-offset:0; border-color:var(--focus-strong); }
+:is(.input,.textarea,.select,.btn-outline,.btn-primary-outline,.btn-danger-outline,.media-control,.card,.code-block,.graph-node-body,.pagination-link):focus-visible { outline-offset:0; border-color:var(--focus-strong); }
+/* A amostra ESCOLHIDA do `ColorSwatch options` (0.32.0) tem borda — a da cor dela — e o foco mora no botão de
+   opção invisível de dentro, por isso o `:has`. A referência mostra a borda da cor + vão + anel; a ADR-0059 é a
+   escolha A do Victor, nenhuma peça com duas linhas (a varredura do catálogo pegou, 14/10/2026). */
+.color-swatch-option:has(:checked:focus-visible) { outline-offset:0; border-color:var(--focus-strong); }
 button { color:inherit; }
 /* O link NÃO é `--primary`. Medido em 22/08/2026 com o axe e depois à mão: o amarelo da
    marca sobre o fundo do tema CLARO dá 1,73:1, e o AA de texto (WCAG 1.4.3) pede 4,5:1 —
@@ -734,6 +752,32 @@ img,svg { display:block; }
    variante que desenha igual é enfeite. `--shell-top` volta a ser só a altura do topo, porque sem
    margem não há as duas folgas a descontar. */
 .sidebar-flush { --shell-top:var(--topbar-height); height:calc(100vh - var(--shell-top)); max-height:100%; margin:0; border:0; border-inline-end:1px solid var(--sidebar-border); border-radius:0; }
+/* `placement="right"` (0.32.0, DOC-01): a lateral do outro lado. A flutuante já tem margem nos quatro
+   lados; a encostada leva o fio para o lado de dentro, que agora é o começo da linha. */
+.sidebar-flush.sidebar-right { border-inline-end:0; border-inline-start:1px solid var(--sidebar-border); }
+/* SEM CAIXA é outra variante (0.32.0): `plain`, o nome que a Aurea já dá ao "sem caixa" (`contentVariant`,
+   o painel do `Tabs`, o `KPI`). É a coluna "On this page" de uma documentação, como a da referência: os
+   itens soltos na página. Tira só a PINTURA — fundo, cor da borda, sombra — e guarda a geometria da
+   flutuante (margens, altura, a mesma borda de 1, agora invisível), então trocar de variante não mexe em
+   nada de lugar. O texto continua na escala da lateral: medido nos quatro (Aurea e `lory`, claro e
+   escuro), o `--sidebar-foreground` é o mesmo `--foreground` da página. */
+.sidebar-plain { border-color:transparent; background:transparent; box-shadow:none; }
+/* A COLUNA DA DIREITA do `AppShell` (`aside`): a terceira trilha, da largura da lateral, de 1280 para
+   cima. Abaixo, ela desce para depois do conteúdo, na última coluna que houver (a do conteúdo entre
+   1024 e 1279; a única abaixo de 1024), sem grudar. Com ela, o conteúdo perde a margem da direita: a
+   folga entre os dois é a margem da coluna, como entre a lateral e o conteúdo. */
+.app-shell-with-aside { --aside-track:calc(var(--sidebar-width) + var(--space-4)*2); }
+.app-shell-with-aside:has(> .app-shell-aside.sidebar-flush) { --aside-track:var(--sidebar-width); }
+/* `.sidebar.app-shell-aside` (três classes) e não só a classe da coluna: a regra do shell recolhível
+   (`.app-shell-collapsible > .sidebar`, mais abaixo na folha) prende TODA lateral na coluna 1, e com
+   a mesma força ganharia por vir depois. */
+.app-shell-with-aside > .sidebar.app-shell-aside { grid-column:-2 / -1; grid-row:auto; }
+@media (max-width:1279px) { .app-shell-with-aside > .sidebar.app-shell-aside { position:static; height:auto; max-height:none; } }
+@media (min-width:1280px) {
+  .app-shell-with-aside { grid-template-columns:var(--sidebar-track) minmax(0,1fr) var(--aside-track); }
+  .app-shell-with-aside > .content.content { grid-column:2; grid-row:2; margin-inline-end:0; }
+  .app-shell-with-aside > .sidebar.app-shell-aside { grid-column:3; grid-row:2; }
+}
 /* a lateral ROLA mas nunca mostra a barra (pedido do Victor): a barra nativa risca a
    superfície flutuante e não segue o raio de 22px. `scrollbar-width` cobre Firefox e
    Chrome 121+; o pseudo cobre Safari e Chrome antigo. */
@@ -838,7 +882,14 @@ img,svg { display:block; }
    `--sidebar-accent` e `--sidebar-accent-foreground` já eram PUBLICADOS e não tinham um único
    uso no core — token publicado que ninguém usa é promessa sem entrega, e era o par certo o
    tempo todo. O defeito não é da marca: a marca só o tornou visível. */
-@media (hover:hover) and (pointer:fine) { .sidebar-item:hover { background:var(--sidebar-accent); } }
+/* O ITEM ESMAECIDO, como o da referência (ADR-0067, decisão do Victor de 13/10/2026, vendo os dois rodando:
+   "B, igual ao dela"): o item que não é o atual fica cinza, e o título de grupo e o item atual ficam fortes;
+   passando o mouse, o item acende. O cinza sai da ESCALA DA LATERAL (o texto dela, esmaecido), e não do
+   `--muted-foreground` da página — sob a marca `lory` a lateral é escura e a página não (a lição de
+   20/08/2026, logo abaixo). Medido contra o fundo da lateral (13/10/2026): 7,6:1 no escuro e 5,4:1 no
+   claro; na marca `lory`, 7,8:1 e 5,6:1 — o branco de antes era 14,5:1. */
+.sidebar-item:not([aria-current]) { color:color-mix(in oklab, var(--sidebar-foreground) 68%, transparent); }
+@media (hover:hover) and (pointer:fine) { .sidebar-item:hover { background:var(--sidebar-accent); } .sidebar-item:not([aria-current]):hover { color:var(--sidebar-foreground); } }
 /* A-05 (24/09/2026), decisão do Victor: o item atual da lateral passa a usar a MARCA DA CASA para
    "selecionado" — fundo, texto na cor da marca e o fio de 2px embaixo —, que o `Toggle`, o
    `SegmentedControl`, o `Button variant="nav"` e a navegação do catálogo (`.doc-nav`) já usavam.
@@ -857,7 +908,10 @@ img,svg { display:block; }
    `--sidebar-foreground` em vez de token novo — a lateral não publica um "muted" dela. */
 /* 72% e não 62% desde a 0.27.0 (ADR-0061): com a letra da paleta nova (#242424, menos preta) os 62%
    davam 4,4:1 sobre o branco — o axe pegou na varredura. 72% é o cinza de texto apagado da paleta. */
-.sidebar-group-label { margin:var(--space-3) var(--space-3) var(--space-1); color:color-mix(in oklab, var(--sidebar-foreground) 72%, transparent); font-size:var(--text-xs); font-weight:var(--weight-medium); letter-spacing:var(--tracking-widest); text-transform:uppercase; }
+/* O título de grupo da lateral é o da referência (ADR-0067, decisão do Victor de 13/10/2026: "igual ao dela"):
+   letra 14, peso médio, SEM maiúsculas, na cor do texto da lateral — mais forte que o item, que é
+   esmaecido; 16 antes do grupo. Era 12, em maiúsculas espaçadas, esmaecido. */
+.sidebar-group-label { margin:var(--space-4) var(--space-3) var(--space-1); color:var(--sidebar-foreground); font-size:var(--text-sm); font-weight:var(--weight-medium); }
 .sidebar-sub { padding-inline-start:var(--space-5); }
 /* RECOLHIDA — a lateral vira trilho de ícones. O rótulo NÃO some do DOM: o React troca a
    classe dele por `.sr-only`, então quem usa leitor de tela continua ouvindo o nome. Ícone
@@ -1166,7 +1220,10 @@ img,svg { display:block; }
    `min-width:0` o conteúdo mínimo do flex é o texto inteiro, e o rótulo longo empurra o valor e a
    seta para fora da linha em vez de reticenciar. É a mesma família do defeito que a `pill` da
    barra inferior pagou em 18/08/2026 — lá o rótulo virava zero, aqui ele expulsaria os vizinhos. */
-.nav-list-text { flex:1; min-width:0; display:flex; flex-direction:column; }
+.nav-list-text { flex:1; min-width:0; display:grid; grid-template-columns:minmax(0,1fr); }
+/* MNT-23, "quem mais" (12/10/2026): a NavList empurrava a página como a árvore (360 → 729), pelo mesmo
+   motivo — o `min-width:0` faz o texto encolher DENTRO da linha, mas a largura mínima da lista ainda era
+   o rótulo inteiro. A grade de uma coluna `minmax(0,1fr)` pede zero e, quando cabe, mostra tudo. */
 .nav-list-label { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
 .nav-list-description { overflow:hidden; color:var(--muted-foreground); font-size:var(--text-xs); text-overflow:ellipsis; white-space:nowrap; }
 /* O VALOR E A SETA NÃO ENCOLHEM: valor cortado MENTE (um "R$ 1.2" no lugar de "R$ 1.234"), e seta
@@ -1240,7 +1297,15 @@ img,svg { display:block; }
 /* GAR-14 (0.28.0): o recheio do botão vale também para o aviso preso a ele (`.toast-anchored`),
    que tem a MEDIDA do botão — pedido do Victor na bancada. Uma regra só, para os dois nunca
    divergirem e para o número não se repetir. */
-.btn,.toast-anchored { padding-inline:var(--step-px,15px); }
+.btn,.toast-anchored { padding-inline:var(--step-px,var(--space-4)); }
+/* 0.32.0 — o ícone do botão é o da referência: 16 em tela de 640 para cima, 20 abaixo (no celular),
+   e 16 sempre no `sm` e no `xs`. Era 20 sempre. O tamanho vai no próprio `.icon` (o `--step-icon`
+   não herda), e o ícone de quem pediu outro tamanho (`size` no `Icon`) não é tocado. O `:where()`
+   deixa a regra com a força de UMA classe: a peça que tem medida própria de ícone (o X do
+   `CloseButton`, o link do `MediaEmbed`) continua mandando. */
+.btn :where(.icon:not(.icon-sm,.icon-lg,.icon-xl)) { --step-icon:var(--icon-md); }
+@media (min-width:640px) { .btn :where(.icon:not(.icon-sm,.icon-lg,.icon-xl)) { --step-icon:var(--icon-sm); } }
+.btn-sm :where(.icon:not(.icon-lg,.icon-xl)),.btn-xs :where(.icon:not(.icon-lg,.icon-xl)) { --step-icon:var(--icon-sm); }
 .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
@@ -1262,8 +1327,8 @@ img,svg { display:block; }
    sobrescrita por variável que o autor já não leu. Fazer o valor passar pela variável é o que
    permite a camada responsiva existir UMA vez, genérica, em vez de uma vez por componente. */
 .btn-xs { --step-h:var(--control-h-xs); --step-px:10px; --step-gap:6px; --step-fs:var(--text-xs); border-radius:var(--radius-control); }
-.btn-sm { --step-h:var(--control-h-sm); --step-px:12px; --step-fs:var(--text-sm); border-radius:var(--radius-control); }
-.btn-lg { --step-h:var(--control-h-lg); --step-px:20px; --step-fs:var(--text-base); border-radius:var(--radius-control); }
+.btn-sm { --step-h:var(--control-h-sm); --step-px:var(--space-3); --step-fs:var(--text-sm); border-radius:var(--radius-control); }
+.btn-lg { --step-h:var(--control-h-lg); --step-px:var(--space-4); --step-fs:var(--text-base); border-radius:var(--radius-control); }
 .btn-xl { --step-h:var(--control-h-xl); --step-px:26px; --step-gap:10px; --step-fs:var(--text-base); border-radius:var(--radius-control); }
 /* Largura total: para rodapé de formulário e tela estreita. Só a largura muda. */
 .btn-block { width:100%; }
@@ -1282,8 +1347,14 @@ img,svg { display:block; }
 .skip-link:focus-visible { transform:translateY(0); outline:var(--focus-width) solid var(--focus-strong); outline-offset:var(--focus-offset); }
 .btn-primary { --btn-bg:var(--primary); --btn-fg:var(--primary-foreground); --btn-border:transparent; }
 .btn-primary:hover:not(:disabled):not([aria-disabled="true"]) { --btn-bg:var(--primary-hover); --btn-border:transparent; }
-.btn-secondary { --btn-bg:var(--secondary); --btn-fg:var(--secondary-foreground); --btn-border:transparent; }
+/* 0.32.0 — os dois botões de fundo neutro da referência (decisão do Victor, 11/10/2026, "A"):
+   o `secondary` com a LETRA DA MARCA (o `--primary-emphasis`, que segue a marca) e o `tertiary` com a
+   letra normal — o `secondary` de até a 0.31.0, e o padrão do `Button` sem `variant`. A regra dela
+   para escolher: salvar é o primário, editar o secundário, cancelar o terciário. */
+.btn-secondary { --btn-bg:var(--secondary); --btn-fg:var(--primary-emphasis); --btn-border:transparent; }
 .btn-secondary:hover:not(:disabled):not([aria-disabled="true"]) { --btn-bg:var(--secondary-hover); --btn-border:transparent; }
+.btn-tertiary { --btn-bg:var(--secondary); --btn-fg:var(--secondary-foreground); --btn-border:transparent; }
+.btn-tertiary:hover:not(:disabled):not([aria-disabled="true"]) { --btn-bg:var(--secondary-hover); --btn-border:transparent; }
 .btn-outline { --btn-bg:transparent; --btn-fg:var(--foreground); --btn-border:var(--border-strong); }
 .btn-outline:hover:not(:disabled):not([aria-disabled="true"]) { --btn-bg:var(--accent); }
 .btn-ghost { --btn-bg:transparent; --btn-fg:var(--foreground); --btn-border:transparent; }
@@ -1329,14 +1400,24 @@ img,svg { display:block; }
 [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(--danger-400); }
 /* 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. */
-.kbd { display:inline-flex; align-items:center; justify-content:center; gap:2px; min-width:20px; height:20px; padding:0 6px; border:1px solid var(--border-strong); border-radius:var(--radius-sm); background:var(--secondary); color:var(--muted-foreground); font:500 11px/1 var(--font-code); }
+/* Kbd — a tecla que dispara a ação, dentro ou fora do botão. Peça própria, não decoração.
+   0.32.0: as medidas da referência (24 de altura, 8 dos lados, letra 14 peso médio na fonte do
+   texto, cinza neutro, sem borda); o canto é o nosso: cápsula, e CÍRCULO quando a tecla é um
+   caractere só (`kbd-single`, que o componente põe sozinho). Era 20, letra 11 de código, borda. */
+.kbd { display:inline-flex; align-items:center; justify-content:center; gap:var(--space-05); min-width:var(--space-6); height:var(--space-6); padding:0 var(--space-2); border:0; border-radius:var(--radius-full); background:var(--secondary); color:var(--muted-foreground); font:var(--weight-medium) var(--text-sm)/1 var(--font-ui); white-space:nowrap; }
+.kbd-single { width:var(--space-6); padding:0; }
 /* dentro do botão a tecla herda a cor do rótulo, SEM opacidade: a 85% o contraste caía
    para 3.67:1 (axe) e o atalho é informação, não enfeite. O fundo já o separa. */
 /* Dentro do botão a tecla NÃO ganha fundo próprio: qualquer tinta escurece a cápsula e o
    rótulo perde contraste (no primary claro caiu a 3.55:1). Sem fundo, o contraste da
-   tecla é o MESMO do rótulo — se o botão passa, ela passa. A borda de currentColor separa. */
-.btn .kbd { background:transparent; border-color:color-mix(in oklab, currentColor 35%, transparent); color:inherit; }
+   tecla é o MESMO do rótulo — se o botão passa, ela passa. O fio de currentColor separa (sem
+   borda desde a 0.32.0, o fio é sombra por dentro, e não muda a medida).
+   A MEDIDA de dentro do botão (20, para caber no botão pequeno) é declarada pela CLASSE que o `Button` põe no
+   atalho (`btn-kbd`), e não pelo contexto: com o botão de busca do site em toda página, o `.kbd` de 24 e o de 20
+   dividiam a página, e a trava de geometria (uma altura por classe) reprovou (14/10/2026). */
+.btn .kbd { background:transparent; box-shadow:inset 0 0 0 var(--border-width) color-mix(in oklab, currentColor 35%, transparent); color:inherit; }
+.btn-kbd { min-width:var(--space-5); height:var(--space-5); padding:0 var(--space-1); font-size:var(--text-xs); }
+.btn-kbd.kbd-single { width:var(--space-5); padding:0; }
 
 /* nav: item de navegação. Normal = ghost silencioso; o ATIVO (aria-current) ganha texto
    amarelo + traço embaixo — SEM borda (pedido do Victor). aria-current, não uma variante
@@ -1401,22 +1482,50 @@ img,svg { display:block; }
 /* xs e xl também precisam de largura: sem isto a altura mudava e a largura ficava na do
    md, e o alvo só-ícone deixava de ser quadrado (achado na onda Actions, 24/07). */
 .btn-icon.btn-xl { width:var(--control-h-xl); }
+/* CloseButton (HER-12, 0.32.0) — o botão de fechar da referência, quase idêntico: 24 × 24, o X de
+   16 no cinza neutro, esmaecido; escurece com o mouse (o `--secondary-hover` do `.btn-tertiary`) e
+   encolhe para 93% ao apertar, como o dela. O canto é o nosso: círculo cheio. O tamanho do X vai no
+   próprio `.icon`, porque o `--step-icon` não herda. No TOQUE o círculo não cresce: a área de 44
+   (`--target-min`) é um `::before` invisível em volta dele, e o `.btn` de toque o deixa de fora da
+   altura mínima (regra do `pointer:coarse`, mais abaixo). */
+.close-button { --btn-fg:var(--muted-foreground); position:relative; flex:none; inline-size:var(--space-6); block-size:var(--space-6); min-inline-size:0; min-block-size:0; padding:0; border-radius:var(--radius-full); }
+.close-button .icon { --step-icon:var(--icon-sm); }
+.close-button:active:not(:disabled) { transform:scale(.93); }
+@media (pointer:coarse) { .close-button::before { content:""; position:absolute; inset:calc((var(--space-6) - var(--target-min)) / 2); border-radius:var(--radius-full); } }
 /* ThemeToggle (25/09/2026): a cor no ícone mostra o tema para onde se vai. No claro a LUA, na tinta
    do texto; no escuro o SOL, no amarelo da marca — as duas combinações se enxergam, e é por isso
    que o botão nunca mostra a lua no escuro nem o sol no claro. Mais específico que o `.btn:hover`,
    então a cor fica também com o mouse em cima. */
 .theme-toggle-moon .icon { color:var(--foreground); }
 .theme-toggle-sun .icon { color:var(--primary); }
-/* wrap, não estoura: os botões do grupo são pills com gap (não segmentos colados), então
-   quebrar linha em tela estreita preserva o visual. Único gap de eixo horizontal que a
-   auditoria da Etapa 3 achou sem proteção — o resto já rola (tabela) ou já quebra (toolbar). */
-.btn-group { display:inline-flex; flex-wrap:wrap; align-items:center; gap:4px; } .btn-group .btn { border-radius:var(--radius-control); margin-inline-start:0; }
+/* GRUPOS COLADOS (0.32.0) — o `ButtonGroup` e o `ToggleGroup` da referência: os botões COLADOS numa
+   cápsula só (vão 0), canto só nas pontas, um fio entre eles (a cor do texto a 15%, metade da
+   altura), sem o encolher ao apertar (o grupo é uma peça só), e o contorno que não dobra entre
+   vizinhos. Os cantos de dentro são retos, como os dela: quem desenha a forma é a cápsula inteira.
+   Até a 0.31.0 eram cápsulas soltas com vão de 4 — continua existindo, como `detached` (o
+   `isDetached` dela), e só ele quebra linha.
+   A DIREÇÃO vem por variável, e não por regra de filho de cada direção: a direção do `ButtonGroup`
+   pode mudar com a largura (camada responsiva, que copia o corpo de `.btn-group-vertical` — o
+   gerador confere que os dois dizem o mesmo) e a do `ToggleGroup` vem do motor (`data-orientation`).
+   Deitado: canto na ponta de dentro da linha (`--btn-group-h`), fio em pé; em pé, o contrário. */
+.btn-group,.toggle-group { display:inline-flex; align-items:center; gap:0; --btn-group-h:var(--radius-full); --btn-group-v:0; --btn-group-sep-i:0; --btn-group-sep-b:25%; --btn-group-sep-w:var(--border-width); --btn-group-sep-h:50%; --btn-group-bi:0; --btn-group-bb:var(--border-width); }
 /* Grupo VERTICAL (`G-AXIS-01`). `align-items:stretch` é o que faz os botões medirem igual: sem
    ele cada um teria a largura do próprio rótulo e a coluna ficaria serrilhada — que é o defeito
    que um grupo vertical tem de não ter. */
-.btn-group-vertical { flex-direction:column; align-items:stretch; }
-.btn-group .btn:first-child { margin-inline-start:0; border-radius:var(--radius-control); }
-.btn-group .btn:last-child { border-radius:var(--radius-control); }
+.btn-group-vertical { flex-direction:column; align-items:stretch; --btn-group-h:0; --btn-group-v:var(--radius-full); --btn-group-sep-i:25%; --btn-group-sep-b:0; --btn-group-sep-w:50%; --btn-group-sep-h:var(--border-width); --btn-group-bi:var(--border-width); --btn-group-bb:0; }
+:is(.btn-group:not(.btn-group-detached),.toggle-group:not(.toggle-group-detached)) > .btn { position:relative; border-radius:0; }
+:is(.btn-group:not(.btn-group-detached),.toggle-group:not(.toggle-group-detached)) > .btn:first-child { border-start-start-radius:var(--radius-full); border-end-start-radius:var(--btn-group-h); border-start-end-radius:var(--btn-group-v); }
+:is(.btn-group:not(.btn-group-detached),.toggle-group:not(.toggle-group-detached)) > .btn:last-child { border-end-end-radius:var(--radius-full); border-start-end-radius:var(--btn-group-h); border-end-start-radius:var(--btn-group-v); }
+:is(.btn-group:not(.btn-group-detached),.toggle-group:not(.toggle-group-detached)) > .btn:only-child { border-radius:var(--radius-full); }
+:is(.btn-group:not(.btn-group-detached),.toggle-group:not(.toggle-group-detached)) > .btn + .btn::before { content:""; position:absolute; inset-inline-start:var(--btn-group-sep-i); inset-block-start:var(--btn-group-sep-b); inline-size:var(--btn-group-sep-w); block-size:var(--btn-group-sep-h); border-radius:var(--radius-full); background:currentColor; opacity:.15; pointer-events:none; }
+:is(.btn-group:not(.btn-group-detached),.toggle-group:not(.toggle-group-detached)) > .btn:active:not(:disabled) { transform:none; }
+:is(.btn-group:not(.btn-group-detached),.toggle-group:not(.toggle-group-detached)) > .btn-outline:not(:last-child) { border-inline-end-width:var(--btn-group-bi); border-block-end-width:var(--btn-group-bb); }
+:is(.btn-group:not(.btn-group-detached),.toggle-group:not(.toggle-group-detached)) > .btn-outline:not(:first-child) { border-inline-start-width:var(--btn-group-bi); border-block-start-width:var(--btn-group-bb); }
+/* o anel de foco de um botão do meio fica por cima dos vizinhos, e não por baixo */
+:is(.btn-group,.toggle-group) > .btn:focus-visible { z-index:1; }
+.btn-group-detached,.toggle-group-detached { flex-wrap:wrap; gap:var(--space-1); }
+.btn-group-full,.toggle-group-full { display:flex; inline-size:100%; }
+:is(.btn-group-full,.toggle-group-full) > .btn { flex:1 1 0%; min-inline-size:0; }
 /* Toolbar: contêiner de controles; o roving tabindex vem do Base UI. */
 .toolbar { display:flex; align-items:center; flex-wrap:wrap; gap:6px; padding:6px; border:1px solid var(--border); border-radius:var(--radius-control); background:var(--secondary); }
 /* Vertical sai da pílula: --radius-control (999px) clampa em 50% da menor
@@ -1445,8 +1554,11 @@ img,svg { display:block; }
 /* O spinner lê a MESMA escala de glifo, mas o degrau base dele é `sm` e não `md` — presumir
    `md` como base de toda família é o erro que esta atividade já cometeu duas vezes. */
 .spinner { width:var(--step-icon,var(--icon-sm)); height:var(--step-icon,var(--icon-sm)); border:2px solid currentColor; border-right-color:transparent; border-radius:50%; animation:spin .7s linear infinite; }
-.spinner-md { --step-icon:var(--icon-md); }
-.spinner-lg { --step-icon:var(--icon-lg); } @keyframes spin { to { transform:rotate(360deg); } }
+/* 0.32.0: a escala da referência — 16 · 24 · 32 · 40. O componente nasce no `md` (24); o glifo cru
+   continua no `sm` (16), dentro do botão e do aviso. */
+.spinner-md { --step-icon:var(--space-6); }
+.spinner-lg { --step-icon:var(--space-8); }
+.spinner-xl { --step-icon:var(--space-10); } @keyframes spin { to { transform:rotate(360deg); } }
 
 .field { display:flex; flex-direction:column; gap:7px; }
 /* CAMPO NA HORIZONTAL — rótulo à esquerda, controle à direita. É a linha do formulário de
@@ -1459,18 +1571,28 @@ img,svg { display:block; }
 .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); }
 .field-horizontal>.label { grid-column:1; flex-direction:column; align-items:flex-start; justify-content:center; gap:var(--space-05); }
 .field-horizontal>*:not(.label) { grid-column:2; }
-.label { display:flex; justify-content:space-between; gap:12px; color:var(--foreground); font-size:var(--text-sm); font-weight:var(--weight-semibold); }
-.hint { color:var(--muted-foreground); font-size:var(--text-xs); }
-.input,.textarea,.select { width:100%; min-width:0; block-size:var(--step-h,var(--control-h-md)); padding-block:0; padding-inline:var(--step-field-px,13px); color:var(--foreground); background:var(--field-bg); border:1px solid var(--border-strong); border-radius:var(--radius-control); transition:border-color var(--duration-fast),background-color var(--duration-fast),box-shadow var(--duration-fast); }
+/* 0.32.0 — o rótulo, a dica e a descrição da referência: rótulo 14 PESO MÉDIO (era 600); dica e
+   descrição 12 com entrelinha 16, esmaecidas e SEM negrito (a dica mora na linha do rótulo e herdava
+   o 600 dele). O obrigatório ganha o asterisco vermelho depois do rótulo, escondido do leitor de
+   tela — quem anuncia "obrigatório" é o `required` do controle, e não o desenho. */
+.label { display:flex; justify-content:space-between; gap:12px; color:var(--foreground); font-size:var(--text-sm); font-weight:var(--weight-medium); }
+.hint { color:var(--muted-foreground); font-size:var(--text-xs); font-weight:var(--weight-regular); line-height:var(--space-4); }
+.label-required { margin-inline-start:var(--space-05); color:var(--danger-400); }
+.input,.textarea,.select { width:100%; min-width:0; block-size:var(--step-h,var(--control-h-md)); padding-block:0; padding-inline:var(--step-field-px,var(--space-3)); color:var(--foreground); background:var(--field-bg); border:1px solid var(--border-strong); border-radius:var(--radius-control); transition:border-color var(--duration-fast),background-color var(--duration-fast),box-shadow var(--duration-fast); }
 .input:hover,.textarea:hover,.select:hover { border-color:var(--border); }
+/* `variant="secondary"` (0.32.0), o da referência: o campo de fundo NEUTRO e sem borda à vista, para
+   dentro de um cartão, onde o fundo de campo some contra o do cartão. A borda fica (transparente),
+   para o foco continuar sendo a borda que muda de cor (ADR-0059). */
+.input-secondary,.textarea-secondary { background:var(--secondary); border-color:transparent; }
+.input-secondary:hover,.textarea-secondary:hover { background:var(--secondary-hover); border-color:transparent; }
 .input::placeholder,.textarea::placeholder { color:var(--subtle-foreground); }
 .input:disabled,.textarea:disabled,.select:disabled { opacity:var(--opacity-disabled); cursor:not-allowed; }
 /* O `padding-inline` daqui tem de LER a variável também, e com o próprio padrão: a base do
    textarea vem DEPOIS da regra compartilhada e a sobrescrevia, congelando o padding em 14px nos
    três degraus. Medido em 22/08/2026 contra o estado anterior — era 12/14/16 e virou 14/14/14.
-   E o padrão é 14px, não 13px: a família de campo NÃO é uniforme no md, e presumir que era foi o
-   que produziu a regressão. */
-.textarea { min-block-size:104px; padding-block:var(--space-3); padding-inline:var(--step-field-px,14px); resize:vertical; border-radius:var(--radius-lg); }
+   0.32.0: a família de campo passa a ser uniforme no md, como na referência — 12 dos lados no campo
+   e na área de texto (eram 13 e 14), e a área com 8 em cima e embaixo (eram 12). */
+.textarea { min-block-size:104px; padding-block:var(--space-2); padding-inline:var(--step-field-px,var(--space-3)); 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: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"); }
@@ -1484,9 +1606,28 @@ img,svg { display:block; }
 /* 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. */
+/* 0.32.0 — o da referência: UM GRUPO SÓ, com a borda e o fundo de campo, e os botões DENTRO dele
+   (40 de largura, ícone 16), cada um separado do número por um fio (a cor esmaecida a 15%). Até a
+   0.31.0 eram dois botões fantasma soltos ao lado de um campo. O foco é o do `InputGroup`: o anel no
+   grupo inteiro, que é a peça que a pessoa vê. No toque o grupo sobe para o alvo de 44, como os
+   botões soltos subiam. */
 .number-field { display:inline-flex; }
-.number-field-group { display:inline-flex; align-items:center; gap:var(--space-1); }
+.number-field-group { display:inline-flex; align-items:stretch; block-size:var(--control-h-md); border:var(--border-width) solid var(--border-strong); border-radius:var(--radius-full); background:var(--field-bg); overflow:hidden; transition:border-color var(--duration-fast),box-shadow var(--duration-fast); }
+.number-field-group:hover { border-color:var(--border); }
+.number-field-group:focus-within { outline:var(--focus-width) solid var(--focus-strong); outline-offset:0; border-color:var(--focus-strong); }
 .number-field-input { width:var(--space-16); text-align:center; font-variant-numeric:tabular-nums; }
+.number-field-group > .number-field-input { block-size:auto; border:0; border-radius:0; background:transparent; }
+.number-field-group > .number-field-input:focus-visible { outline:none; }
+.number-field-button { flex:none; display:inline-flex; align-items:center; justify-content:center; inline-size:var(--space-10); padding:0; border:0; background:transparent; color:var(--foreground); cursor:pointer; transition:background var(--duration-fast); }
+.number-field-button .icon { --step-icon:var(--icon-sm); }
+.number-field-button:hover:not(:disabled) { background:var(--surface-hover); }
+.number-field-button:active:not(:disabled) { background:color-mix(in oklab, var(--foreground) 10%, transparent); }
+.number-field-button:disabled { opacity:var(--opacity-disabled); cursor:not-allowed; }
+/* o anel do botão fica DENTRO dele: o grupo corta o que passa da borda */
+.number-field-button:focus-visible { outline-offset:calc(-1 * var(--focus-width)); }
+.number-field-decrement { border-inline-end:var(--border-width) solid color-mix(in oklab, var(--muted-foreground) 15%, transparent); }
+.number-field-increment { border-inline-start:var(--border-width) solid color-mix(in oklab, var(--muted-foreground) 15%, transparent); }
+@media (pointer:coarse) { .number-field-group { block-size:var(--target-min); } }
 /* A ALÇA DE ARRASTO (G-API-02), e só quando `scrubbable` está ligada.
    O motor já põe por ESTILO EM LINHA tudo o que é mecânica — `touch-action:none` e
    `user-select:none` na alça, e `position:fixed` mais o `transform` no cursor virtual, que ele
@@ -1511,7 +1652,8 @@ img,svg { display:block; }
 /* OTPField (Lote 1): um quadrado por dígito. O lado é a altura de controle, então a fila mede o
    mesmo que qualquer campo ao lado dela; o padding zera porque o dígito é centralizado. */
 .otp-field { display:inline-flex; align-items:center; gap:var(--space-2); }
-.otp-slot { width:var(--control-h-md); padding:0; text-align:center; font-family:var(--font-code); }
+/* 0.32.0: a casa da referência — 38 × 40, o número 18 em seminegrito (era 36 × 36, letra 14). */
+.otp-slot { width:calc(var(--space-10) - var(--space-05)); block-size:var(--space-10); padding:0; text-align:center; font-family:var(--font-code); font-size:var(--text-lg); font-weight:var(--weight-semibold); }
 /* HoverCard (Lote 1) reusa `.popover`; só limita a largura, porque prévia é conteúdo, não rótulo. */
 .hover-card { max-width:min(20rem,calc(100vw - var(--space-8))); }
 
@@ -1523,6 +1665,11 @@ img,svg { display:block; }
    contorno do input de dentro ficaria escondido atrás da borda do grupo. */
 .input-group { display:flex; flex-wrap:wrap; align-items:center; inline-size:100%; min-inline-size:0; min-block-size:var(--control-h-md); background:var(--field-bg); border:1px solid var(--border-strong); border-radius:var(--radius-control); transition:border-color var(--duration-fast),box-shadow var(--duration-fast); }
 .input-group:hover { border-color:var(--border); }
+/* A pele `secondary` do campo vale para o GRUPO, como o tamanho (abaixo): quem desenha a caixa é o grupo, e o
+   `ColorField variant="secondary"` (e todo `InputGroup` com um `Input variant="secondary"` dentro) saía igual ao
+   `primary` (medido na bancada em 14/10/2026). Antes do foco, para a borda do foco valer. */
+.input-group:has(>.input-secondary) { background:var(--secondary); border-color:transparent; }
+.input-group:has(>.input-secondary):hover { background:var(--secondary-hover); }
 .input-group:focus-within { outline:var(--focus-width) solid var(--focus-strong); outline-offset:0; border-color:var(--focus-strong); }
 .input-group:has(.input-sm) { min-block-size:var(--control-h-sm); }
 .input-group:has(.input-lg) { min-block-size:var(--control-h-lg); }
@@ -1628,24 +1775,53 @@ img,svg { display:block; }
 .collapsible-chevron { flex:none; transition:transform var(--duration-fast) var(--ease-standard); }
 .collapsible-trigger[data-panel-open] .collapsible-chevron { transform:rotate(180deg); }
 .collapsible-panel { overflow:hidden; }
-/* TOGGLE GROUP. A pele é a do grupo de botões, porque é o que ele é. O que muda é o eixo. */
-.toggle-group { display:inline-flex; flex-wrap:wrap; align-items:center; gap:var(--space-1); }
+/* TOGGLE GROUP. A pele é a do grupo de botões, porque é o que ele é (colado, 0.32.0 — a regra
+   está no `.btn-group`). O que muda é o eixo, que aqui o MOTOR publica. */
 /* G-AXIS-06 — a pele destes cinco reage ao `data-orientation` que o MOTOR publica, e não a uma
    classe que o React escolhe por conta própria. É o que garante uma fonte de verdade só: o
    valor responsivo resolvido vai para o motor, o motor publica o atributo e ajusta o teclado,
    e o desenho segue o atributo. Enquanto a orientação vinha de classe, era possível o CSS
    dizer coluna e o `aria-orientation` dizer horizontal — foi o que impediu estes cinco de
    entrarem no eixo responsivo até 22/08/2026. Ver a ADR-0019. */
-.toggle-group[data-orientation="vertical"] { flex-direction:column; align-items:stretch; }
+.toggle-group[data-orientation="vertical"] { flex-direction:column; align-items:stretch; --btn-group-h:0; --btn-group-v:var(--radius-full); --btn-group-sep-i:25%; --btn-group-sep-b:0; --btn-group-sep-w:50%; --btn-group-sep-h:var(--border-width); --btn-group-bi:var(--border-width); --btn-group-bb:0; }
 
 /* Form (M1): empilhar campos com respiro. Nada além disso — sem borda, sem fundo, sem largura.
    Formulário é ARRANJO, e arranjo é do Stack/Grid; se esta classe crescer, ela vira uma terceira
    maneira de fazer layout e passa a brigar com as duas que já existem. */
 .form { display:grid; gap:var(--space-5); }
 /* description (B-12): a frase de ajuda embaixo do controle, com a letra e a cor do `.hint`. */
-.field-description { color:var(--muted-foreground); font-size:var(--text-xs); }
-.field-error { color:var(--danger-400); font-size:var(--text-xs); }
-.checkbox,.radio { display:inline-flex; align-items:flex-start; gap:9px; color:var(--foreground); cursor:pointer; }
+.field-description { color:var(--muted-foreground); font-size:var(--text-xs); line-height:var(--space-4); }
+/* o erro com 4 de recuo, como o da referência (0.32.0) */
+.field-error { padding-inline:var(--space-1); color:var(--danger-400); font-size:var(--text-xs); line-height:var(--space-4); }
+/* 0.32.0 — os marcáveis da referência: vão de 12 até o texto, texto 14 PESO MÉDIO (o da caixa era
+   negrito, o `<strong>`), descrição 12/16 esmaecida e sem negrito embaixo dele. */
+.checkbox,.radio { display:inline-flex; align-items:flex-start; gap:var(--space-3); color:var(--foreground); font-size:var(--text-sm); font-weight:var(--weight-medium); cursor:pointer; }
+.checkbox > span > strong { font-weight:inherit; }
+/* LISTBOX (0.32.0): a da referência — recheio de 4, 4 entre itens; item de 36 no mínimo, 8 dos lados
+   e 6 em cima e embaixo, vão 12; fundo neutro sob o mouse e no foco do teclado (com o anel); o visto
+   de 16 no fim do escolhido; perigo na cor de perigo. O canto é o nosso: cápsula. A seção é um título
+   pequeno e esmaecido em cima dos itens dela. */
+.list-box { position:relative; display:flex; flex-direction:column; gap:var(--space-1); inline-size:100%; padding:var(--space-1); }
+.list-box-section { display:flex; flex-direction:column; gap:var(--space-1); }
+.list-box-section-title { padding:var(--space-2) var(--space-2) var(--space-1); color:var(--muted-foreground); font-size:var(--text-xs); font-weight:var(--weight-medium); }
+.list-box-item { position:relative; display:flex; align-items:center; gap:var(--space-3); inline-size:100%; min-block-size:var(--control-h-md); padding:calc(var(--space-1) + var(--space-05)) var(--space-2); border-radius:var(--radius-full); color:var(--foreground); font-size:var(--text-sm); cursor:pointer; transition:background var(--duration-fast),transform var(--duration-fast) var(--ease-standard); }
+.list-box-item:has(.list-box-item-indicator) { padding-inline-end:var(--space-7); }
+.list-box-item:hover:not([aria-disabled="true"]),.list-box-item:focus-visible { background:var(--secondary); }
+.list-box-item:focus-visible { outline-offset:calc(-1 * var(--focus-width)); }
+.list-box-item:active:not([aria-disabled="true"]) { transform:scale(.98); }
+.list-box-item[aria-disabled="true"] { opacity:var(--opacity-disabled); cursor:not-allowed; }
+.list-box-item > .icon { --step-icon:var(--icon-sm); color:var(--muted-foreground); }
+.list-box-item-text { display:flex; flex-direction:column; min-inline-size:0; }
+.list-box-item-label { font-weight:var(--weight-medium); }
+.list-box-item-description { color:var(--muted-foreground); font-size:var(--text-xs); line-height:var(--space-4); }
+.list-box-item > .list-box-item-indicator { --step-icon:var(--icon-sm); position:absolute; inset-inline-end:var(--space-2); top:50%; translate:0 -50%; color:var(--foreground); }
+.list-box-item-danger,.list-box-item-danger > .icon,.list-box-item-danger .list-box-item-indicator { color:var(--danger-400); }
+/* CHECKBOXGROUP (0.32.0): o da referência — rótulo, descrição, as caixas com 16 antes de cada uma, o
+   erro no fim. A descrição de cada caixa fica alinhada com o texto dela, como no `Checkbox` solto. */
+.checkbox-group { display:flex; flex-direction:column; align-items:flex-start; }
+.checkbox-group > .checkbox { margin-block-start:var(--space-4); }
+.checkbox-group > .field-error { margin-block-start:var(--space-2); }
+.checkbox > span > .muted { font-size:var(--text-xs); font-weight:var(--weight-regular); line-height:var(--space-4); }
 .checkbox input,.radio input { position:absolute; opacity:0; pointer-events:none; }
 /* A MARCA DE SELEÇÃO acompanha a densidade, e antes não acompanhava. Era `18px` cru: em
    `comfortable` casava com metade da altura de controle por coincidência, e em `compact` e
@@ -1653,10 +1829,13 @@ img,svg { display:block; }
    defeito que o achado A1 pegou no SegmentedControl em 26/07/2026.
    Metade da altura de controle dá exatamente os 18px de antes em `comfortable`, então a captura
    não mexe; o que muda é que agora as outras duas densidades também ficam certas. */
-.control-mark { inline-size:calc(var(--step-h,var(--control-h-md)) / 2); block-size:calc(var(--step-h,var(--control-h-md)) / 2); margin-top:1px; display:grid; place-items:center; border:1px solid var(--border-strong); background:var(--field-bg); }
+/* 0.32.0: a marca da referência tem 16. A conta passa a "metade menos 2" — 14 · 16 · 18 no sm · md ·
+   lg, e continua andando com a densidade, sem número quebrado. Centrada na primeira linha do texto
+   (`1lh`), qualquer que seja a entrelinha. O canto da caixa é o 6 dela (`--radius-xs`; era 5 cru). */
+.control-mark { --mark:calc(var(--step-h,var(--control-h-md)) / 2 - var(--space-05)); flex:none; inline-size:var(--mark); block-size:var(--mark); margin-top:calc((1lh - var(--mark)) / 2); display:grid; place-items:center; border:1px solid var(--border-strong); background:var(--field-bg); }
 .control-mark-sm { --step-h:var(--control-h-sm); }
 .control-mark-lg { --step-h:var(--control-h-lg); }
-.checkbox .control-mark { border-radius:5px; } .radio .control-mark { border-radius:50%; }
+.checkbox .control-mark { border-radius:var(--radius-xs); } .radio .control-mark { border-radius:50%; }
 .checkbox input:checked + .control-mark { background:var(--control-selected); border-color:var(--control-selected); color:var(--control-selected-foreground); }
 .checkbox input:focus-visible + .control-mark,.radio input:focus-visible + .control-mark,.switch input:focus-visible + .switch-track { outline:var(--focus-width) solid var(--focus-strong); outline-offset:0; border-color:var(--focus-strong); }
 /* Cheia com a cor do foco (marcada, ligada), a peça volta ao VÃO (ADR-0059): colado, o anel sumiria
@@ -1665,11 +1844,16 @@ img,svg { display:block; }
    anel volta a colar (vermelho, pela regra do inválido). */
 .checkbox input:focus-visible:checked:not([aria-invalid="true"],:user-invalid) + .control-mark,.switch input:focus-visible:checked:not([aria-invalid="true"],:user-invalid) + .switch-track { outline-offset:var(--focus-offset); }
 .checkbox input:checked + .control-mark:after { content:""; width:8px; height:4px; border-left:2px solid currentColor; border-bottom:2px solid currentColor; transform:rotate(-45deg) translateY(-1px); }
-.radio input:checked + .control-mark:after { content:""; width:8px; height:8px; border-radius:50%; background:var(--control-selected); }
-.switch { display:inline-flex; align-items:center; gap:10px; cursor:pointer; } .switch input { position:absolute; opacity:0; }
-/* O TRILHO DO SWITCH, pela mesma razão. As proporções saem do mesmo token e dão os 42×24 de
-   antes em `comfortable`: 7/6 e 2/3 da altura de controle. */
-.switch-track { position:relative; inline-size:calc(var(--step-h,var(--control-h-md)) * 7 / 6); block-size:calc(var(--step-h,var(--control-h-md)) * 2 / 3); border-radius:999px; background:var(--muted); border:1px solid var(--border); transition:background var(--duration-base) var(--ease-standard),border-color var(--duration-base) var(--ease-standard); }
+/* A opção marcada fica CHEIA, com o ponto no meio, como a da referência (o ponto dela tem 8 numa
+   marca de 16: a metade). Era vazia, com o ponto amarelo. */
+.radio input:checked + .control-mark { background:var(--control-selected); border-color:var(--control-selected); }
+.radio input:checked + .control-mark:after { content:""; width:50%; height:50%; border-radius:50%; background:var(--control-selected-foreground); }
+.switch { display:inline-flex; align-items:center; gap:var(--space-3); font-size:var(--text-sm); font-weight:var(--weight-medium); cursor:pointer; } .switch input { position:absolute; opacity:0; }
+/* O TRILHO DO SWITCH (0.32.0): o da referência, 40 × 20 (sm 32 × 16, lg 48 × 24) — a largura é o
+   dobro da altura. Era 42 × 24. A altura é a de controle MENOS 16: dá exatamente os três dela
+   (32 · 36 · 40 → 16 · 20 · 24), continua andando com a densidade e passa pela `--step-h`, que é o
+   caminho do tamanho responsivo (`size-*`). */
+.switch-track { --switch-h:calc(var(--step-h,var(--control-h-md)) - var(--space-4)); position:relative; flex:none; inline-size:calc(var(--switch-h) * 2); block-size:var(--switch-h); border-radius:999px; background:var(--muted); border:1px solid var(--border); transition:background var(--duration-base) var(--ease-standard),border-color var(--duration-base) var(--ease-standard); }
 .switch-track-sm { --step-h:var(--control-h-sm); }
 .switch-track-lg { --step-h:var(--control-h-lg); }
 /* O botão TEM de encolher com o trilho: preso em 16px, num trilho `compact` de 20px de altura
@@ -1681,8 +1865,13 @@ img,svg { display:block; }
    eixo inline resolve contra a LARGURA do contêiner (40px) e não contra a altura. Escrever a
    mesma conta nos dois eixos dava um botão de 34×16 — medido no navegador, não deduzido, depois
    que a suíte de captura reprovou duas seções da página de docs. */
-.switch-track:after { content:""; position:absolute; inset-inline-start:3px; top:3px; block-size:calc(100% - var(--space-1) - var(--space-05)); aspect-ratio:1; border-radius:50%; background:var(--muted-foreground); transition:transform var(--duration-base) var(--ease-standard),background var(--duration-base) var(--ease-standard); }
-.switch input:checked + .switch-track { background:var(--control-selected); border-color:var(--control-selected); } .switch input:checked + .switch-track:after { transform:translateX(calc(100% + var(--space-05))); background:var(--control-selected-foreground); }
+/* 0.32.0 — a bolinha da referência é uma CÁPSULA (a altura do trilho menos 4; a largura, 11/8 dela:
+   22 × 16 no md), a 2 da borda de fora. O trilho tem borda de 1 (é ela que fica vermelha no
+   inválido), então a folga por dentro é 1. Ligada, ela anda até a outra ponta: `--switch-x`, a
+   mesma distância nos dois sentidos de escrita. */
+.switch-track:after { --thumb-h:calc(var(--switch-h) - 2 * var(--space-05)); --thumb-w:calc(var(--thumb-h) * 11 / 8); content:""; position:absolute; inset-inline-start:calc(var(--space-05) - var(--border-width)); top:calc(var(--space-05) - var(--border-width)); block-size:var(--thumb-h); inline-size:var(--thumb-w); border-radius:var(--radius-full); background:var(--muted-foreground); transition:transform var(--duration-base) var(--ease-standard),background var(--duration-base) var(--ease-standard); }
+.switch-track { --switch-x:calc(var(--switch-h) * 2 - (var(--switch-h) - 2 * var(--space-05)) * 11 / 8 - 2 * var(--space-05)); }
+.switch input:checked + .switch-track { background:var(--control-selected); border-color:var(--control-selected); } .switch input:checked + .switch-track:after { transform:translateX(var(--switch-x)); background:var(--control-selected-foreground); }
 .range { width:100%; accent-color:var(--primary); }
 /* Slider VERTICAL, no `<input type=range>` NATIVO — sem trocar de motor.
 
@@ -1703,14 +1892,96 @@ img,svg { display:block; }
    `.range{width:100%}` anulava o `width:auto` daqui — a caixa saía 129x16 nos três motores.
    Mesma armadilha de ordem de cascata que os tons do botão. */
 .range-vertical { writing-mode:vertical-rl; direction:rtl; inline-size:var(--range-vertical-size,10rem); width:auto; }
+/* SLIDER (HER-05, 0.32.0) — o desenhado da referência. Rótulo e valor na linha de cima (14, peso
+   médio, o número tabular); o trilho de 20 no cinza neutro, o preenchimento na cor da marca; a alça
+   é uma cápsula de 28 × 20 na cor da marca com o miolo de 24 × 16, que encolhe a 90% enquanto se
+   arrasta. O miolo dela é branco sobre o azul; aqui é a cor de LETRA sobre o amarelo
+   (`--primary-foreground`, escura) — branco sobre amarelo quase não se vê. O canto é o nosso: cápsula em tudo. Quem põe a alça e o preenchimento no lugar é o
+   motor, por estilo em linha (posição e tamanho); aqui fica só a pele. Nas pontas a alça fica dentro
+   do trilho pelo jeito da referência: 12 de borda TRANSPARENTE em cada ponta do trilho (o fundo pinta
+   por baixo dela, então o trilho continua inteiro), e a alça, centrada, anda só no miolo. O
+   preenchimento volta 12 para começar na ponta visível. O alinhamento "na borda" do motor faria o
+   mesmo, mas só depois de a página rodar no navegador — a alça sairia invisível no HTML do servidor.
+   Vertical: o valor em cima, o trilho no meio, o rótulo embaixo, e a altura é a do `Range` vertical
+   (`--range-vertical-size`). */
+.slider { display:grid; grid-template-areas:"label output" "track track"; grid-template-columns:minmax(0,1fr) auto; gap:var(--space-1); inline-size:100%; }
+.slider-label { grid-area:label; inline-size:fit-content; color:var(--foreground); font-size:var(--text-sm); font-weight:var(--weight-medium); }
+.slider-output { grid-area:output; color:var(--foreground); font-size:var(--text-sm); font-weight:var(--weight-medium); font-variant-numeric:tabular-nums; }
+.slider-control { grid-area:track; display:flex; align-items:center; touch-action:none; }
+.slider-track { position:relative; inline-size:100%; block-size:var(--space-5); border-inline:var(--space-3) solid transparent; border-radius:var(--radius-full); background:var(--secondary); }
+.slider-fill { box-sizing:content-box; block-size:100%; margin-inline-start:calc(-1 * var(--space-3)); padding-inline-start:var(--space-3); border-radius:var(--radius-full); background:var(--primary); }
+.slider-thumb { display:grid; place-items:center; inline-size:calc(var(--space-6) + var(--space-1)); block-size:100%; border-radius:var(--radius-full); background:var(--primary); cursor:grab; }
+.slider-thumb::after { content:""; inline-size:var(--space-6); block-size:var(--space-4); border-radius:var(--radius-full); background:var(--primary-foreground); box-shadow:var(--shadow-sm); transition:scale var(--duration-fast) var(--ease-standard); }
+.slider-thumb[data-dragging] { cursor:grabbing; }
+.slider-thumb[data-dragging]::after { scale:.9; }
+.slider-thumb:has(input:focus-visible) { outline:var(--focus-width) solid var(--focus-strong); outline-offset:var(--focus-offset); }
+.slider[data-disabled] { opacity:var(--opacity-disabled); }
+.slider[data-disabled] .slider-thumb { cursor:not-allowed; }
+.slider[data-orientation="vertical"] { grid-template-areas:"output" "track" "label"; grid-template-columns:minmax(0,1fr); justify-items:center; gap:var(--space-2); inline-size:auto; }
+.slider[data-orientation="vertical"] .slider-control { block-size:var(--range-vertical-size,10rem); }
+.slider[data-orientation="vertical"] .slider-track { inline-size:var(--space-5); block-size:100%; border-inline:0; border-block:var(--space-3) solid transparent; }
+.slider[data-orientation="vertical"] .slider-fill { inline-size:100%; margin-inline-start:0; padding-inline-start:0; margin-block-end:calc(-1 * var(--space-3)); padding-block-end:var(--space-3); }
+.slider[data-orientation="vertical"] .slider-thumb { inline-size:100%; block-size:calc(var(--space-6) + var(--space-1)); }
+.slider[data-orientation="vertical"] .slider-thumb::after { inline-size:var(--space-4); block-size:var(--space-6); }
+@media (prefers-reduced-motion:reduce) { .slider-thumb::after { transition:none; } }
+/* A TRILHA DE COR (0.32.0, ADR-0069) — a variação `channel` do Slider, em qualquer canal. A pintura (a exceção da
+   ADR-0069) chega pela variável que o componente põe; esta folha não escreve gradiente (check 4). O gradiente vai
+   de ponta a ponta do trilho (`background-origin: border-box`) e as paradas começam na folga (`--slider-cap`, a
+   mesma de onde o pino para): a ponta tem a cor chapada do mínimo e do máximo. Sem o preenchimento: a cor É a
+   trilha. O pino é o da referência (lido no CSS publicado dela, 3.2.6): redondo de 16, na cor do valor, com o anel
+   branco de 3 — branco nos dois temas, porque fica sobre a cor. A cor do pino vai por uma sombra por dentro, para o
+   xadrez aparecer por baixo quando ela é transparente.
+   O XADREZ (14/10/2026, o Victor: "xadrez sim", só onde há transparência) é desenho de SVG, e não gradiente: no
+   alfa, embaixo da trilha e do pino. E `forced-color-adjust:none`, como na biblioteca da referência: com o alto
+   contraste do sistema, a trilha continua mostrando as cores. */
+/* O xadrez da transparência, um desenho só para as peças que o mostram (a trilha do alfa, a amostra transparente). */
+.slider-color,.color-swatch-alpha { --color-checker:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8'%3E%3Cpath fill='%23fff' d='M0 0h8v8H0z'/%3E%3Cpath fill='%23c8c8c8' d='M0 0h4v4H0zM4 4h4v4H4z'/%3E%3C/svg%3E"); }
+.slider-color { --slider-cap:var(--space-3); }
+.slider-color .slider-track { background:var(--slider-track-fill,var(--secondary)); background-origin:border-box; forced-color-adjust:none; }
+.slider-alpha .slider-track { background-image:var(--slider-track-fill,none),var(--color-checker); background-size:auto,var(--space-2) var(--space-2); }
+.slider-color .slider-thumb { box-sizing:border-box; inline-size:var(--space-4); block-size:var(--space-4); align-self:center; border:calc(3 * var(--border-width)) solid #fff; background:var(--color-checker) center/var(--space-2) var(--space-2); box-shadow:inset 0 0 0 var(--space-4) var(--slider-thumb-color,var(--primary)), 0 0 0 var(--border-width) rgba(0,0,0,.1), var(--shadow-sm); forced-color-adjust:none; }
+.slider-color .slider-thumb::after { content:none; }
+.slider-color[data-orientation="vertical"] .slider-thumb { inline-size:var(--space-4); block-size:var(--space-4); }
+/* COLORAREA (0.32.0, ADR-0069) — a área de cor. A pintura (o gradiente, a ÚNICA exceção à ADR-0007) chega pela
+   variável que o componente põe (`--color-area-fill`): esta folha não escreve gradiente nenhum (check 4).
+   Medidas da referência, lidas no CSS publicado dela (3.2.6): quadrada, até 224 de largura, canto 16; o pino de
+   16 que cresce para 20 ao arrastar, com o anel de 3. 224 não tem token: sai de dois `--space-24` e um `--space-8`.
+   O anel é BRANCO nos dois temas, e não um token de tema: ele fica sobre a cor escolhida, e não sobre a página.
+   Os dois `range` escondidos (o motor da área) cobrem o pino com opacidade quase zero, como na referência: o
+   leitor de tela por toque os acha no lugar do pino. */
+.color-area { position:relative; inline-size:100%; max-inline-size:calc(2 * var(--space-24) + var(--space-8)); aspect-ratio:1; border-radius:var(--radius-lg); background:var(--color-area-fill,var(--secondary)); background-blend-mode:var(--color-area-blend,normal); box-shadow:inset 0 0 0 var(--border-width) rgba(0,0,0,.1); touch-action:none; cursor:crosshair; user-select:none; forced-color-adjust:none; }
+/* Os pontinhos (`showDots`, o da referência: um ponto branco a 20% a cada 8) são desenho de SVG por cima da área,
+   e não gradiente. O pino fica acima deles. */
+.color-area-dots::after { content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8'%3E%3Ccircle cx='4' cy='4' r='1' fill='%23fff' fill-opacity='.2'/%3E%3C/svg%3E"); background-size:var(--space-2) var(--space-2); }
+.color-area-dots .color-area-thumb { z-index:1; }
+.color-area[data-disabled] { opacity:var(--opacity-disabled); cursor:not-allowed; }
+.color-area-thumb { position:absolute; box-sizing:border-box; inline-size:var(--space-4); block-size:var(--space-4); margin-inline-start:calc(var(--space-4) / -2); margin-block-start:calc(var(--space-4) / -2); border:calc(3 * var(--border-width)) solid #fff; border-radius:var(--radius-full); background:var(--color-area-thumb,transparent); box-shadow:0 0 0 var(--border-width) rgba(0,0,0,.1), inset 0 0 0 var(--border-width) rgba(0,0,0,.1); pointer-events:none; forced-color-adjust:none; transition:inline-size var(--duration-base) var(--ease-standard), block-size var(--duration-base) var(--ease-standard), margin var(--duration-base) var(--ease-standard); }
+.color-area[data-dragging] .color-area-thumb { inline-size:var(--space-5); block-size:var(--space-5); margin-inline-start:calc(var(--space-5) / -2); margin-block-start:calc(var(--space-5) / -2); }
+.color-area-thumb[data-focus-visible] { outline:var(--focus-width) solid var(--focus-strong); outline-offset:var(--focus-offset); }
+.color-area-input { position:absolute; inset:0; inline-size:100%; block-size:100%; margin:0; opacity:.0001; pointer-events:none; }
+@media (prefers-reduced-motion:reduce) { .color-area-thumb { transition:none; } }
+/* COLORPICKER (0.32.0, ADR-0069) — o gatilho é a amostra com o nome, em linha, com o vão de 12 (o da referência,
+   lido no CSS publicado dela, 3.2.6). A janela é o `.popover` com o recheio dela — 8 em cima e dos lados, 12
+   embaixo — e o vão de 12; a largura é a da área (224) mais o recheio, sem número novo. Dentro, a área ocupa a
+   largura toda. */
+.color-picker-trigger { display:inline-flex; align-items:center; gap:var(--space-3); padding:0; border:0; border-radius:var(--radius-full); background:none; color:var(--foreground); font:inherit; font-size:var(--text-sm); font-weight:var(--weight-medium); cursor:pointer; }
+.color-picker-trigger:focus-visible { outline:var(--focus-width) solid var(--focus-strong); outline-offset:var(--focus-offset); }
+.color-picker-trigger:disabled { opacity:var(--opacity-disabled); cursor:not-allowed; }
+.color-picker-popover { min-width:0; inline-size:calc(2 * var(--space-24) + var(--space-8) + 2 * var(--space-2)); padding:var(--space-2) var(--space-2) var(--space-3); gap:var(--space-3); }
+.color-picker-popover > .color-area { max-inline-size:none; }
 
 /* A CÁPSULA é que tem de medir igual a um botão/campo ao lado — não o botão de dentro.
    Antes: `height:30px` no filho, cru. Em comfortable dava 30+3+3=36 = --control-h-md por
    coincidência; em compact a cápsula ficava 4px alta demais e em spacious 4px baixa demais,
    porque a densidade não alcançava a regra (achado A1, 26/07/2026). Com a altura na cápsula
    os filhos esticam sozinhos (align-items é stretch por padrão) e a conta fecha nas TRÊS. */
-.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; }
+/* 0.32.0 — as medidas das abas da referência (o segmentado é a mesma peça): trilho com 4 de recheio
+   e sem vão; cada segmento com a altura `sm` (32 no padrão, e anda com a densidade), 16 dos lados,
+   letra peso médio. O trilho dá 40 (era 36: 3 + 30 + 3). */
+/* A borda transparente de 1 (as abas não têm) entra no recheio: 1 + 3 = os 4 da referência, e o
+   trilho mede 40 como o das abas — sem o desconto, 42 (a geometria pegou). */
+.segmented { display:inline-flex; gap:0; padding:calc(var(--space-1) - var(--border-width)); border-radius:var(--radius-control); background:var(--muted); border:var(--border-width) solid transparent; box-shadow:none; }
+.segmented button { min-block-size:var(--control-h-sm); padding:0 var(--space-4); border:0; border-radius:var(--radius-control); color:var(--muted-foreground); background:transparent; font-weight:var(--weight-medium); cursor:pointer; }
 .segmented button.active { color:var(--foreground); background:var(--segment); box-shadow:var(--shadow-sm); 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
@@ -1736,6 +2007,14 @@ img,svg { display:block; }
    claro e 1,02:1 no escuro. Sobre o trilho a cápsula é --segment, com a sombra pequena — como a
    aba da referência principal. O rótulo na cor da marca e o fio continuam. */
 .segmented button.active { --btn-bg:var(--segment); background:var(--segment); box-shadow:var(--shadow-sm); }
+/* O TOGGLE LIGADO tem fundo próprio (0.32.0). Com o solto no fundo neutro (o `default` da referência),
+   o cinza do "selecionado" acima deixava ligado e desligado com o MESMO fundo — só a letra e o fio
+   mudavam, e o `skin.spec` cobra que o ligado pareça ligado pelo fundo. O ligado dela é o tom suave
+   da marca; o da Aurea é o "clarinho" (o amarelo a 10%, a receita do `.badge-primary` que o Victor
+   escolheu para a página atual da paginação), aqui sobre o cinza, para o grupo colado continuar uma
+   cápsula só. A letra da marca e o fio continuam os do "selecionado". */
+.btn.toggle[data-pressed] { --btn-bg:color-mix(in oklab, var(--primary) 10%, var(--secondary)); background:var(--btn-bg); }
+.btn.toggle[data-pressed]:hover:not(:disabled):not([aria-disabled="true"]) { --btn-bg:color-mix(in oklab, var(--primary) 10%, var(--secondary-hover)); }
 /* O ATIVO DA NAV DA LATERAL sai da escala DELA, e não da página (20/08/2026, o Victor viu sob a
    marca `lory`). Ele dividia esta regra com o `.segmented`, que vive no conteúdo — e `--secondary`
    é quase branco no tema claro. Numa lateral escura isso desenhava uma pílula branca com texto
@@ -1756,7 +2035,7 @@ img,svg { display:block; }
    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):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,
+.btn[aria-pressed="true"]:not(.btn-icon)::after,.segmented button.active::after,.tabs-secondary .tab[data-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); }
@@ -1773,7 +2052,11 @@ img,svg { display:block; }
    classe media 26px dentro do .brand (lh 18px) e 22px dentro de um .btn-nav (lh 12px) — na
    mesma barra (achado A2, 26/07/2026). Geometria de componente não se decide pelo contexto.
    O .chip do catálogo já tinha aprendido isso; o .badge não. */
-.badge { --badge-accent:var(--secondary-foreground); display:inline-flex; align-items:center; justify-content:center; gap:6px; min-height:var(--space-6); padding:3px 9px; border:1px solid var(--border); border-radius:var(--radius-control); background:var(--secondary); color:var(--secondary-foreground); font-size:var(--text-xs); font-weight:var(--weight-medium); line-height:var(--leading-none); white-space:nowrap; }
+/* 0.32.0: as medidas do Chip da referência (o `Badge` da Aurea é o Chip dela), lidas no CSS publicado:
+   24 de altura, 10 até o texto (8 da caixa + 2 do rótulo — aqui, com a borda de 1 que é nossa, 9), 4
+   entre o glifo e o texto (era 6); `sm` 20 com 6 até o texto, `lg` 28 com 14 e letra de 14. A cápsula e a
+   borda continuam da Aurea, como no nativo (0.11.0). */
+.badge { --badge-accent:var(--secondary-foreground); display:inline-flex; align-items:center; justify-content:center; gap:var(--space-1); min-height:var(--space-6); padding:0 calc(var(--space-2) + var(--space-05) - var(--border-width)); border:1px solid var(--border); border-radius:var(--radius-control); background:var(--secondary); color:var(--secondary-foreground); font-size:var(--text-xs); font-weight:var(--weight-medium); line-height:var(--space-4); white-space:nowrap; }
 /* O glifo do badge tem tamanho PRÓPRIO, senão o `.icon` padrão (20px) estoura os 24px e o
    badge com ícone fica mais alto que o badge de texto na mesma fila. 16px + 3+3 de padding
    + 1+1 de borda = 24px exatos: com ícone ou sem, mede o mesmo. */
@@ -1785,8 +2068,8 @@ img,svg { display:block; }
 .badge-primary { --badge-accent:var(--primary-emphasis); color:var(--primary-emphasis); border-color:var(--primary-outline); background:color-mix(in srgb,var(--primary) 10%,transparent); }
 /* TAMANHOS. O md é a base (24px), que não muda — é o que as 103 fichas já usam. */
 .badge-xs { min-height:var(--space-4); padding:0 var(--space-1); border-width:0; }
-.badge-sm { min-height:var(--space-5); padding:0 var(--space-2); }
-.badge-lg { min-height:var(--space-7); padding:0 var(--space-3); font-size:var(--text-sm); }
+.badge-sm { min-height:var(--space-5); padding:0 calc(var(--space-1) + var(--space-05) - var(--border-width)); }
+.badge-lg { min-height:var(--space-7); padding:0 calc(var(--space-3) + var(--space-05) - var(--border-width)); font-size:var(--text-sm); }
 /* ACESSÓRIOS de dentro do chip. O ponto herda a cor do texto por `currentColor`, então ele
    acompanha variante e ênfase sem uma regra por combinação. */
 .badge-dot { flex:none; width:var(--space-2); height:var(--space-2); border-radius:var(--radius-full); background:currentColor; }
@@ -1903,6 +2186,11 @@ img,svg { display:block; }
 .card-horizontal > .card-media { grid-row:1 / span 99; border-radius:calc(var(--radius-card) - var(--card-pad)); }
 .card-horizontal > :not(.card-media) { grid-column:2; min-width:0; }
 .card-raised { box-shadow:none; } .card-inset { background:var(--secondary); }
+/* `outline` (0.32.0): o cartão da cor de onde ele está, só com a linha em volta — a caixa grande do
+   Início da documentação da referência (o Victor, 13/10/2026: "na mesma cor do site, só tem uma linha
+   ao redor"). O nome é o da referência para "sem fundo, com contorno" (o botão dela); o `transparent`
+   do cartão dela tira também a linha, e esta guarda. A borda, o raio e o recheio são os do `.card`. */
+.card-outline { background:transparent; }
 /* A variante interativa é o ALVO, e desde o G-A11Y-11 ela exige `render` — o elemento vem de
    quem consome, e é `<button>` ou `<a href>` conforme a promessa seja ação ou navegação.
    As quatro normalizações abaixo existem por causa disso: um <button> traz fonte própria,
@@ -1939,26 +2227,32 @@ img,svg { display:block; }
 .card-accent-info { --card-accent:var(--info); } .card-accent-warning { --card-accent:var(--warning); }
 .card-accent-danger { --card-accent:var(--destructive); }
 .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); }
+/* 0.32.0: o título do cartão da referência, 14/24 peso médio, e a descrição 14/20 colada nele. */
+.card-title { margin:0; font-size:var(--text-sm); font-weight:var(--weight-medium); line-height:var(--space-6); } .card-subtitle { margin:0; color:var(--muted-foreground); font-size:var(--text-sm); line-height:var(--space-5); }
 
 /* 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; }
+/* 0.32.0, o Alert da referência (lido no CSS publicado dela, ordem do Victor: "igual ao dela"): o fundo
+   de CARTÃO, sem borda, com a sombra de superfície; 12 em cima e embaixo e 16 dos lados; 16 entre as
+   partes; o ícone de 16 numa caixa de 24; o título 14/24 peso médio NA COR DO ESTADO, e o corpo 14/20
+   esmaecido. Até a 0.31.0 a cor do estado tingia o fundo e a borda. `--alert-tone` é a cor do estado. */
+.alert { --alert-tone:var(--info-400); display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:start; gap:var(--space-4); padding:var(--space-3) var(--space-4); border:0; border-radius:var(--radius-card); background:var(--card); color:var(--muted-foreground); font-size:var(--text-sm); line-height:var(--space-5); box-shadow:var(--shadow-sm); }
+.alert-success { --alert-tone:var(--success-400); } .alert-warning { --alert-tone:var(--warning-400); } .alert-danger { --alert-tone:var(--danger-400); } .alert-accent { --alert-tone:var(--link); }
 /* 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); }
-.alert-info,.banner-info { border-color:color-mix(in srgb,var(--info) 38%,var(--border)); background:var(--info-bg); }
-.alert-success,.banner-success { border-color:color-mix(in srgb,var(--success) 38%,var(--border)); background:var(--success-bg); }
-.alert-warning,.banner-warning { border-color:color-mix(in srgb,var(--warning) 38%,var(--border)); background:var(--warning-bg); }
-.alert-danger,.banner-danger { border-color:color-mix(in srgb,var(--danger-400) 38%,var(--border)); background:var(--danger-bg); }
+.banner-info { border-color:color-mix(in srgb,var(--info) 38%,var(--border)); background:var(--info-bg); }
+.banner-success { border-color:color-mix(in srgb,var(--success) 38%,var(--border)); background:var(--success-bg); }
+.banner-warning { border-color:color-mix(in srgb,var(--warning) 38%,var(--border)); background:var(--warning-bg); }
+.banner-danger { border-color:color-mix(in srgb,var(--danger-400) 38%,var(--border)); background:var(--danger-bg); }
 /* O título do alerta é <strong> e não <h4>: alerta cai em qualquer profundidade da página e
    um h4 fixo quebraria a ordem de cabeçalhos. `display:block` porque o corpo vem embaixo
    dele, não ao lado — as duas linhas são o desenho da referência congelada. */
-.alert h4,.alert strong { display:block; margin:0 0 2px; font-size:var(--text-sm); } .alert p { margin:0; color:var(--muted-foreground); font-size:var(--text-sm); }
+.alert h4,.alert strong { display:block; margin:0; color:var(--alert-tone); font-size:var(--text-sm); font-weight:var(--weight-medium); line-height:var(--space-6); } .alert p { margin:0; color:var(--muted-foreground); font-size:var(--text-sm); }
 /* A cor do glifo é a da variante, senão o ícone vira enfeite cinza e não repete o sinal.
    Só o ícone DIRETO do alerta: um ícone dentro do corpo (num botão, num link) é do corpo. */
-.alert>.icon { color:var(--info-400); } .alert-success>.icon { color:var(--success-400); } .alert-warning>.icon { color:var(--warning-400); } .alert-danger>.icon { color:var(--danger-400); }
+.alert>.icon { --step-icon:var(--icon-sm); margin:var(--space-1); color:var(--alert-tone); }
 .banner strong { font-size:var(--text-sm); } .banner p { margin:0; color:var(--muted-foreground); font-size:var(--text-sm); }
 @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); }
@@ -1969,6 +2263,13 @@ img,svg { display:block; }
    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; }
+/* 0.32.0, a barra da referência: o rótulo à mostra no alto à esquerda (14 peso médio), a saída à direita,
+   e o trilho embaixo, ocupando as duas colunas. sm 4, md 8, lg 12 de espessura. */
+.progress-field:has(> .progress-label) { grid-template-columns:minmax(0,1fr) auto; }
+.progress-field:has(> .progress-label) > .progress { grid-column:1 / -1; }
+.progress-label { color:var(--foreground); font-size:var(--text-sm); font-weight:var(--weight-medium); }
+.progress-sm { height:var(--space-1); }
+.progress-lg { height:var(--space-3); }
 .progress-tone-neutral>span { background:var(--muted-foreground); }
 .progress-tone-success>span { background:var(--success-400); }
 .progress-tone-warning>span { background:var(--warning-400); }
@@ -1989,11 +2290,15 @@ img,svg { display:block; }
    já existe (esqueleto, alerta, estado vazio, conteúdo) com respiro entre eles. Se ganhar borda
    ou fundo, viram duas superfícies para a mesma coisa — o defeito que a `.table-region` cobrou. */
 .data-state { display:grid; gap:var(--space-3); }
-.skeleton { position:relative; overflow:hidden; border-radius:7px; background:var(--surface-3); }
+.skeleton { position:relative; overflow:hidden; border-radius:var(--radius-sm); background:var(--surface-3); }
 .skeleton { animation:skeleton-pulse 1.35s ease-in-out infinite; } @keyframes skeleton-pulse { 50% { opacity:.55; } }
+/* 0.32.0: `animation="none"` para o pulso; e quem pediu menos movimento ao sistema também não o vê. */
+.skeleton-static { animation:none; }
+@media (prefers-reduced-motion:reduce) { .skeleton { animation:none; } }
 
-/* Mesma regra da .segmented: a cápsula carrega a altura da densidade, o filho estica. */
-.tabs { display:inline-flex; gap:3px; padding:3px; min-height:var(--control-h-md); border:0; border-radius:var(--radius-control); background:var(--muted); }
+/* Mesma regra da .segmented (0.32.0, as medidas da referência): 4 de recheio, sem vão, a aba de 32
+   (`--control-h-sm`, que anda com a densidade), 16 dos lados, peso médio. */
+.tabs { display:inline-flex; gap:0; padding:var(--space-1); border:0; border-radius:var(--radius-control); background:var(--muted); }
 /* Abas VERTICAIS (a família da orientação, achada pela matriz do §13). A raiz vira GRADE e
    não linha: com `flex-direction:row` o painel herdaria a altura da lista, e uma aba com
    muito conteúdo esticaria a coluna de rótulos junto — medido no navegador em 22/08/2026.
@@ -2001,25 +2306,48 @@ img,svg { display:block; }
    painel porque `minmax(0,1fr)` sozinho deixa conteúdo largo (uma tabela) empurrar a coluna
    de rótulos para fora. */
 .tabs-root[data-orientation="vertical"] { display:grid; grid-template-columns:auto minmax(0,1fr); align-items:start; gap:var(--space-4); }
-.tabs[data-orientation="vertical"] { flex-direction:column; align-items:stretch; min-height:0; }
+.tabs[data-orientation="vertical"] { flex-direction:column; align-items:stretch; gap:var(--space-1); min-height:0; }
 /* o rótulo alinha ao INÍCIO da linha: centrado, uma coluna de abas de larguras diferentes
    sai serrilhada, que é o mesmo defeito que o `.btn-group-vertical` resolve com `stretch`. */
-.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; }
+.tabs[data-orientation="vertical"] .tab { text-align:start; }
+.tab { position:relative; min-block-size:var(--control-h-sm); padding:0 var(--space-4); border:0; border-radius:var(--radius-control); background:transparent; color:var(--muted-foreground); font-weight:var(--weight-medium); cursor:pointer; }
 .tab.active,.tab[data-active] { color:var(--foreground); background:var(--segment); box-shadow:var(--shadow-sm); } .tab.active:after,.tab[data-active]:after { display:none; }
+/* `variant="secondary"` (0.32.0): a aba secundária da referência — sem trilho e sem cápsula, um fio
+   embaixo da lista, a escolhida com a letra normal e o fio da casa (a regra do "selecionado", mais
+   abaixo). */
+.tabs-secondary { gap:var(--space-1); padding:0; border-block-end:var(--border-width) solid var(--border); border-radius:0; background:transparent; }
+.tabs-secondary[data-orientation="vertical"] { border-block-end:0; border-inline-start:var(--border-width) solid var(--border); }
+.tabs-secondary .tab { border-radius:0; }
+.tabs-secondary .tab.active,.tabs-secondary .tab[data-active] { background:transparent; box-shadow:none; color:var(--foreground); }
+.tabs-secondary .tab[data-active]::after { display:block; }
 /* `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; }
-/* `:not(.btn)` porque isto é o quadrado de NÚMERO de página. Sem o :not, o seletor de
-   elemento vencia o `.btn-sm` do Anterior/Próxima por especificidade (0,1,1 contra 0,1,0)
-   e forçava 34px neles — era a terceira altura de .btn-sm que a auditoria mediu (B3). */
-.pagination button:not(.btn) { width:var(--control-h-md); height:var(--control-h-md); border:1px solid var(--border); border-radius:var(--radius-control); background:transparent; color:var(--muted-foreground); cursor:pointer; }
-.pagination button.active { color:var(--primary-foreground); background:var(--primary); border-color:var(--primary); }
+/* 0.32.0 — a trilha da referência: vão 6, link 14 PESO MÉDIO esmaecido (sublinhado com o mouse, como o
+   dela), a página atual na cor do texto e em peso médio (era negrito), e o separador de 12 (era 16). */
+.breadcrumb { display:flex; align-items:center; flex-wrap:wrap; gap:calc(var(--space-1) + var(--space-05)); color:var(--muted-foreground); font-size:var(--text-sm); font-weight:var(--weight-medium); }
+.breadcrumb a { color:inherit; text-decoration:none; } .breadcrumb a:hover { color:var(--foreground); text-decoration:underline; text-underline-offset:var(--space-05); }
+.breadcrumb > .icon { --step-icon:var(--space-3); }
+.breadcrumb [aria-current="page"] { color:var(--foreground); font-weight:inherit; }
+/* PAGINATION (0.32.0) — a da referência: o resumo à esquerda (14 esmaecido) e os itens à direita,
+   com 4 entre eles; cada número é uma cápsula de 32 (`--control-h-sm`, 44 no toque), 14 PESO MÉDIO,
+   que escurece com o mouse; "anterior" e "próxima" com a seta de 16 e o texto, 10 dos lados e 6 entre
+   a seta e o texto; as reticências esmaecidas. A página ATUAL é o "clarinho" da Aurea — a receita do
+   `.badge-primary` suave (o amarelo a 10%, o contorno da marca e a letra da marca), decisão do Victor.
+   O `compact` (o desenho de até a 0.31.0) usa o `Button` e o `Badge`, e não passa por aqui. */
+.pagination { display:flex; flex-wrap:wrap; align-items:center; gap:var(--space-4); }
+.pagination-summary { margin-inline-end:auto; color:var(--muted-foreground); font-size:var(--text-sm); }
+.pagination-content { display:flex; flex-wrap:wrap; align-items:center; gap:var(--space-1); margin:0; padding:0; list-style:none; }
+.pagination-link { display:inline-flex; align-items:center; justify-content:center; gap:calc(var(--space-1) + var(--space-05)); min-inline-size:var(--control-h-sm); block-size:var(--control-h-sm); padding-inline:var(--space-1); border:var(--border-width) solid transparent; border-radius:var(--radius-full); background:transparent; color:var(--foreground); font-size:var(--text-sm); font-weight:var(--weight-medium); font-variant-numeric:tabular-nums; text-decoration:none; cursor:pointer; transition:background var(--duration-fast),transform var(--duration-fast) var(--ease-standard); }
+.pagination-link:hover:not(:disabled):not([aria-disabled="true"]) { background:var(--secondary); }
+.pagination-link:active:not(:disabled):not([aria-disabled="true"]) { transform:scale(.97); }
+.pagination-link:disabled,.pagination-link[aria-disabled="true"] { opacity:var(--opacity-disabled); cursor:not-allowed; }
+.pagination-link.active { border-color:var(--primary-outline); background:color-mix(in srgb, var(--primary) 10%, transparent); color:var(--primary-emphasis); }
+.pagination-link-nav { padding-inline:calc(var(--space-2) + var(--space-05)); }
+.pagination-nav-icon { --step-icon:var(--icon-sm); }
+.pagination-ellipsis { display:inline-grid; place-items:center; inline-size:var(--control-h-sm); color:var(--muted-foreground); font-size:var(--text-sm); }
 /* Stepper (Lote 2): o container NUNCA existiu no core — só no docs.css, e lá era
    `repeat(4,1fr)`, com o número de etapas cravado. `grid-auto-flow:column` distribui N etapas
    iguais sem saber quanto é N, e colunas iguais são o que faz a linha conectora (`.step:before`,
@@ -2065,14 +2393,31 @@ img,svg { display:block; }
    Somar o seletor em vez de copiar os valores: copiar deixaria duas listas para manter em sincronia,
    que é como as duas peles divergiram. O que continua só do `.table-region` é o foco — ele é
    `tabIndex=0` (região rolável precisa ser alcançável pelo teclado) e o `.table-wrap` não é. */
-.table-wrap,.table-region { overflow:auto; border:1px solid var(--border); border-radius:var(--radius-card); background:var(--card); }
-.table,.table-wrap table { width:100%; border-collapse:collapse; min-width:720px; }
+/* HER-13 (0.32.0, *"tabela quero como essa"*): a pele da referência, lida no CSS publicado dela — a
+   MOLDURA cinza (sem borda, 4 dos lados e embaixo), o cabeçalho sobre ela (12 peso médio esmaecido, sem
+   caixa-alta, 10 em cima e embaixo e 16 dos lados, com um fio de 16 entre as colunas) e o CORPO como um
+   cartão por dentro: as células no fundo de cartão, 12/16 de recheio, letra de 14/20, um fio a meio-tom
+   entre as linhas e o canto da casa (o da moldura menos a folga, como a ADR-0033) nas quatro pontas.
+   A moldura é a região que rola: no celular a tabela rola de lado dentro dela (a "A" do Victor).
+   A densidade continua da Aurea: o recheio de cima e de baixo sai do `--row-h` (no confortável, 12, o
+   dela). */
+.table-wrap,.table-region { --table-head-h:calc(var(--space-4) + 2 * (var(--space-2) + var(--space-05))); --table-cell-r:calc(var(--radius-card) - var(--space-1)); overflow:auto; padding:0 var(--space-1) var(--space-1); border-radius:var(--radius-card); background:var(--surface-2); }
+.table,.table-wrap table { width:100%; border-collapse:separate; border-spacing:0; min-width:720px; font-size:var(--text-sm); }
 /* GAR-16 (0.28.0): a tabela inteira com algarismos da mesma largura — a coluna de preço e de ano
    alinha. Só os algarismos mudam; o texto das outras colunas fica igual. */
-.table th,.table td,.table-wrap th,.table-wrap td { height:var(--row-h); padding:0 14px; text-align:start; border-bottom:1px solid var(--border); font-variant-numeric:tabular-nums; }
-.table th,.table-wrap th { color:var(--subtle-foreground); background:var(--surface-2); font-size:var(--text-xs); letter-spacing:var(--tracking-wider); text-transform:uppercase; }
+.table th,.table td,.table-wrap th,.table-wrap td { padding:calc((var(--row-h) - var(--space-5)) / 2 - var(--space-05)) var(--space-4); text-align:start; line-height:var(--space-5); border-bottom:var(--border-width) solid color-mix(in oklab,var(--border) 50%,transparent); font-variant-numeric:tabular-nums; }
+/* O título da tabela (`caption`) mora na moldura, em cima do cabeçalho, alinhado ao texto das colunas
+   (sem regra, o navegador o centralizava). */
+.table > caption,.table-wrap table > caption { padding:var(--space-3) var(--space-4) var(--space-1); color:var(--foreground); font-size:var(--text-sm); font-weight:var(--weight-medium); line-height:var(--space-5); text-align:start; }
+.table thead th,.table-wrap thead th { position:relative; block-size:var(--table-head-h); padding-block:0; border-bottom:0; color:var(--muted-foreground); background:var(--surface-2); font-size:var(--text-xs); font-weight:var(--weight-medium); line-height:var(--space-4); }
+.table thead th:not(:last-child)::after,.table-wrap thead th:not(:last-child)::after { content:""; position:absolute; inset-inline-end:0; inset-block-start:50%; translate:0 -50%; inline-size:var(--border-width); block-size:var(--space-4); border-radius:var(--radius-full); background:var(--border); pointer-events:none; }
+.table tbody :is(td,th),.table-wrap tbody :is(td,th) { background:var(--card); }
+.table tbody tr:first-child > :first-child,.table-wrap tbody tr:first-child > :first-child { border-start-start-radius:var(--table-cell-r); }
+.table tbody tr:first-child > :last-child,.table-wrap tbody tr:first-child > :last-child { border-start-end-radius:var(--table-cell-r); }
+.table tbody tr:last-child > :first-child,.table-wrap tbody tr:last-child > :first-child { border-end-start-radius:var(--table-cell-r); }
+.table tbody tr:last-child > :last-child,.table-wrap tbody tr:last-child > :last-child { border-end-end-radius:var(--table-cell-r); }
 .table tr:last-child td,.table-wrap tr:last-child td { border-bottom:0; }
-.table tbody tr:hover,.table-wrap tbody tr:hover { background:var(--surface-2); }
+@media (hover:hover) { .table tbody tr:hover > :is(td,th),.table-wrap tbody tr:hover > :is(td,th) { background:color-mix(in oklab,var(--card) 40%,var(--surface-2)); } }
 /* GAR-12 e GAR-13 (08/10/2026): a tabela de COMPARAÇÃO — as chaves da `Table` e a pele do HTML de
    comparação. A referência principal só tem o cabeçalho preso, à mão, numa caixa de altura fixa; o
    resto veio do mercado, por escolha do Victor (o detalhe está no comentário da `Table`).
@@ -2080,7 +2425,10 @@ img,svg { display:block; }
    cor do texto, peso médio. Antes herdava a pele do cabeçalho — e ninguém no repositório usava
    `th` no corpo (medido), então nenhum exemplo muda. A FAIXA DE GRUPO (`<th scope="rowgroup">`)
    continua com a pele do cabeçalho de propósito: é rótulo, no idioma que a tabela já usa. */
-.table tbody th[scope="row"],.table-wrap tbody th[scope="row"] { color:var(--foreground); background:transparent; font-size:inherit; font-weight:var(--weight-medium); letter-spacing:normal; text-transform:none; }
+.table tbody th[scope="row"],.table-wrap tbody th[scope="row"] { color:var(--foreground); font-size:inherit; font-weight:var(--weight-medium); }
+/* 0.32.0: a faixa de grupo continua rótulo — o cinza da moldura e a letra do cabeçalho —, agora que o
+   cabeçalho da referência mora só no `thead`. */
+.table tbody th[scope="rowgroup"],.table-wrap tbody th[scope="rowgroup"] { color:var(--muted-foreground); background:var(--surface-2); font-size:var(--text-xs); font-weight:var(--weight-medium); }
 .table tbody tr:last-child th,.table-wrap tbody tr:last-child th { border-bottom:0; }
 /* O melhor valor: negrito. O selo "Melhor", em TEXTO, é um `Badge` que o site põe na célula — a
    cor sozinha não diz nada a quem não a enxerga (WCAG 1.4.1). */
@@ -2105,8 +2453,13 @@ img,svg { display:block; }
 .table-sticky-first :is(thead,tbody,tfoot) > tr > :first-child { position:sticky; inset-inline-start:0; z-index:1; background:var(--card); }
 .table-sticky-first thead > tr > :first-child { z-index:2; background:var(--surface-2); }
 .table-sticky-first tbody > tr > th[scope="rowgroup"]:first-child { background:var(--surface-2); }
-.table-sticky-first tbody > tr:hover > :first-child { background:var(--surface-2); }
+@media (hover:hover) { .table-sticky-first tbody > tr:hover > :first-child { background:color-mix(in oklab,var(--card) 40%,var(--surface-2)); } }
 .table-sticky-first :is(thead,tbody,tfoot) > tr > :first-child:not([colspan])::after { content:""; position:absolute; inset-block:0; inset-inline-end:0; inline-size:var(--border-width); background:var(--border); }
+/* Achado em 12/10/2026 (o teste GAR-12, vencido desde o passo 6): a moldura da tabela tem recheio de 4 dos
+   lados, e a coluna parada gruda na borda de DENTRO dela — a 4. Ao rolar de lado, as células passavam
+   nessa faixa de 4 à esquerda da coluna parada. Cada célula parada tapa a faixa com a cor da moldura, por
+   fora; com propriedade lógica, vale também na escrita da direita para a esquerda. */
+.table-sticky-first :is(thead,tbody,tfoot) > tr > :first-child::before { content:""; position:absolute; inset-block:0; inset-inline-start:calc(-1 * var(--space-1)); inline-size:var(--space-1); background:var(--surface-2); }
 /* Avatar (Lote 2): `overflow:hidden` e o `object-fit` da imagem são a correção do defeito que
    a medição achou — foto que não é quadrada vazava inteira da caixa redonda, porque
    `border-radius` não recorta filho sozinho. Foto de perfil raramente vem quadrada, então isto
@@ -2115,10 +2468,104 @@ img,svg { display:block; }
    `comfortable`. Nada muda de aparência aqui; o que muda é que agora a DENSIDADE alcança o
    avatar, e a escala é a mesma dos controles — avatar e botão na mesma linha ficam da mesma
    altura por construção, em vez de por coincidência. */
-.avatar { width:var(--step-h,var(--control-h-md)); height:var(--step-h,var(--control-h-md)); font-size:var(--step-avatar-fs,inherit); display:grid; place-items:center; overflow:hidden; border-radius:50%; background:var(--surface-3); color:var(--foreground); border:1px solid var(--border-strong); font-weight:var(--weight-bold); }
-.avatar-sm { --step-h:var(--control-h-sm); --step-avatar-fs:var(--text-xs); }
-.avatar-lg { --step-h:var(--control-h-lg); }
+/* 0.32.0: a escala da referência, 32 · 40 · 48, com a letra de 12 · 14 · 16 em peso médio (era a
+   altura do botão, 32 · 36 · 40, e negrito). `--step-avatar` é a variável de passo própria do avatar
+   (a camada responsiva a emite junto das outras). */
+.avatar { width:var(--step-avatar,var(--space-10)); height:var(--step-avatar,var(--space-10)); font-size:var(--step-avatar-fs,var(--text-sm)); display:grid; place-items:center; overflow:hidden; border-radius:50%; background:var(--surface-3); color:var(--foreground); border:1px solid var(--border-strong); font-weight:var(--weight-medium); }
+.avatar-sm { --step-avatar:var(--space-8); --step-avatar-fs:var(--text-xs); }
+.avatar-lg { --step-avatar:var(--space-12); --step-avatar-fs:var(--text-base); }
 .avatar img { width:100%; height:100%; object-fit:cover; }
+/* LINK (0.32.0): o link de texto da referência — peso médio, a cor de link, sem sublinhado; com o mouse
+   ou apertado, o sublinhado de 1,5 a 4 da letra, na cor esmaecida (a meia força com o mouse). A seta do
+   `external` é o `arrow-up-right` do Phosphor por máscara, a 60% (inteira com o mouse). O desenho é
+   em LINHA (`inline`), e não o bloco em linha dela: o link longo quebra dentro do parágrafo, que é o
+   que a página ampliada a 200% precisa (baixa visão). */
+.link { border-radius:var(--radius-sm); color:var(--link); font-weight:var(--weight-medium); text-decoration-line:none; text-decoration-thickness:calc(var(--border-width) * 1.5); text-underline-offset:var(--space-1); text-decoration-color:color-mix(in oklab,var(--muted-foreground) 50%,transparent); cursor:pointer; }
+@media (hover:hover) { .link:hover { color:var(--link-hover); text-decoration-line:underline; } .link:hover > .link-external { opacity:1; } }
+.link:active { text-decoration-line:underline; text-decoration-color:var(--muted-foreground); }
+.link[aria-disabled="true"] { opacity:var(--opacity-disabled); text-decoration-line:none; cursor:not-allowed; }
+.link-external { --link-glifo:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M200,64V168a8,8,0,0,1-16,0V83.31L69.66,197.66a8,8,0,0,1-11.32-11.32L172.69,72H88a8,8,0,0,1,0-16H192A8,8,0,0,1,200,64Z'/%3E%3C/svg%3E"); display:inline-block; inline-size:.75em; block-size:.75em; margin-inline-start:var(--space-1); vertical-align:baseline; background:currentColor; opacity:.6; -webkit-mask:var(--link-glifo) center/contain no-repeat; mask:var(--link-glifo) center/contain no-repeat; }
+/* COLORSWATCH (0.32.0): a amostra de cor da referência — xs 16, sm 24, md 32, lg 36, xl 40 —, só redonda
+   e sem o xadrez (decisão do Victor). O anel de 1 por dentro, a 10% da cor do texto, segura a amostra da
+   cor do fundo no fundo. */
+.color-swatch { --color-swatch-size:var(--space-8); display:inline-block; flex:none; inline-size:var(--color-swatch-size); block-size:var(--color-swatch-size); border-radius:var(--radius-full); background:var(--color-swatch-current,transparent); box-shadow:inset 0 0 0 var(--border-width) color-mix(in oklab,var(--foreground) 10%,transparent); }
+.color-swatch-xs { --color-swatch-size:var(--space-4); }
+.color-swatch-sm { --color-swatch-size:var(--space-6); }
+.color-swatch-lg { --color-swatch-size:calc(var(--space-8) + var(--space-1)); }
+.color-swatch-xl { --color-swatch-size:var(--space-10); }
+/* A amostra TRANSPARENTE (14/10/2026): o xadrez embaixo, e a cor por uma sombra por dentro (a sombra pinta POR CIMA
+   do fundo; a cor de fundo pintaria por baixo do xadrez). O anel de 1 continua por cima de tudo. */
+.color-swatch-alpha { background:var(--color-checker) center/var(--space-2) var(--space-2); box-shadow:inset 0 0 0 var(--border-width) color-mix(in oklab,var(--foreground) 10%,transparent), inset 0 0 0 var(--color-swatch-size) var(--color-swatch-current,transparent); }
+/* AS AMOSTRAS PARA ESCOLHER (0.32.0, ADR-0069): a variação `options` do ColorSwatch. Cada cor é um rótulo com um
+   botão de opção nativo por cima, invisível (o navegador cuida da escolha e das setas). O desenho é o da
+   referência (3.2.6): opção de 32 (os mesmos tamanhos da amostra), borda de 2 transparente, vão de 8; a escolhida
+   ganha a borda na cor dela, a amostra encolhe a 77% por dentro e aparece o "visto" (1/3 da opção) — preto ou
+   branco pela conta de contraste (a classe `color-swatch-option-dark`, posta pelo componente). Ao passar o ponteiro, a amostra cresce 10%. */
+.color-swatch-picker { display:flex; flex-wrap:wrap; align-items:center; gap:var(--space-2); }
+.color-swatch-option { --color-swatch-size:var(--space-8); --swatch-glifo:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M229.66,77.66l-128,128a8,8,0,0,1-11.32,0l-56-56a8,8,0,0,1,11.32-11.32L96,188.69,218.34,66.34a8,8,0,0,1,11.32,11.32Z'/%3E%3C/svg%3E"); position:relative; display:inline-grid; place-items:center; box-sizing:border-box; inline-size:var(--color-swatch-size); block-size:var(--color-swatch-size); border:calc(2 * var(--border-width)) solid transparent; border-radius:var(--radius-full); cursor:pointer; transition:border-color var(--duration-fast) var(--ease-standard); }
+.color-swatch-option > .color-swatch { inline-size:100%; block-size:100%; transition:scale var(--duration-fast) var(--ease-standard); }
+.color-swatch-option::after { content:""; position:absolute; inset:0; margin:auto; inline-size:calc(var(--color-swatch-size) / 3); block-size:calc(var(--color-swatch-size) / 3); background:#fff; -webkit-mask:var(--swatch-glifo) center/contain no-repeat; mask:var(--swatch-glifo) center/contain no-repeat; scale:0; pointer-events:none; transition:scale var(--duration-fast) var(--ease-standard); }
+.color-swatch-option-dark::after { background:#000; }
+.color-swatch-option:has(:checked) { border-color:var(--color-swatch-current,transparent); }
+.color-swatch-option:has(:checked) > .color-swatch { scale:.77; }
+.color-swatch-option:has(:checked)::after { scale:1; }
+@media (hover:hover) { .color-swatch-option:not(:has(:checked,:disabled)):hover > .color-swatch { scale:1.1; } }
+.color-swatch-option:has(:focus-visible) { outline:var(--focus-width) solid var(--focus-strong); outline-offset:var(--focus-offset); }
+.color-swatch-option:has(:disabled) { opacity:var(--opacity-disabled); cursor:not-allowed; }
+.color-swatch-input { position:absolute; inset:0; z-index:1; margin:0; opacity:0; cursor:inherit; }
+/* Em coluna (`layout="stack"`) e a marca própria (`indicator`, no lugar do "visto"), como na referência. A marca
+   aparece só na escolhida, na tinta que contrasta, com 1/3 da opção. */
+.color-swatch-picker-stack { flex-direction:column; align-items:flex-start; }
+.color-swatch-indicator { position:absolute; inset:0; display:grid; place-items:center; color:#fff; pointer-events:none; scale:0; transition:scale var(--duration-fast) var(--ease-standard); }
+.color-swatch-indicator > * { inline-size:calc(var(--color-swatch-size) / 3); block-size:calc(var(--color-swatch-size) / 3); }
+.color-swatch-option-dark .color-swatch-indicator { color:#000; }
+.color-swatch-option:has(:checked) .color-swatch-indicator { scale:1; }
+.color-swatch-option:has(.color-swatch-indicator)::after { content:none; }
+.color-swatch-picker-xs .color-swatch-option { --color-swatch-size:var(--space-4); border-width:var(--border-width); }
+.color-swatch-picker-sm .color-swatch-option { --color-swatch-size:var(--space-6); }
+.color-swatch-picker-lg .color-swatch-option { --color-swatch-size:calc(var(--space-8) + var(--space-1)); }
+.color-swatch-picker-xl .color-swatch-option { --color-swatch-size:var(--space-10); }
+@media (prefers-reduced-motion:reduce) { .color-swatch-option,.color-swatch-option > .color-swatch,.color-swatch-option::after,.color-swatch-indicator { transition:none; } }
+/* PROGRESSCIRCLE (0.32.0): o anel da referência — traço de 4 num quadro de 36, ponta redonda, começando no
+   topo —, em 20 · 28 · 36. O trilho e as cores são as do `Progress`. Sem valor, gira. */
+.progress-circle { --progress-circle-size:calc(var(--space-6) + var(--space-1)); --progress-circle-fill:var(--primary); display:inline-flex; flex:none; inline-size:var(--progress-circle-size); block-size:var(--progress-circle-size); }
+.progress-circle > svg { inline-size:100%; block-size:100%; }
+.progress-circle-track,.progress-circle-fill { fill:none; stroke-width:4; }
+.progress-circle-track { stroke:var(--surface-3); }
+.progress-circle-fill { stroke:var(--progress-circle-fill); stroke-linecap:round; transform:rotate(-90deg); transform-box:fill-box; transform-origin:center; transition:stroke-dashoffset var(--duration-base) var(--ease-standard); }
+.progress-circle-sm { --progress-circle-size:var(--space-5); }
+.progress-circle-lg { --progress-circle-size:calc(var(--space-8) + var(--space-1)); }
+.progress-circle-neutral { --progress-circle-fill:var(--muted-foreground); }
+.progress-circle-success { --progress-circle-fill:var(--success-400); }
+.progress-circle-warning { --progress-circle-fill:var(--warning-400); }
+.progress-circle-danger { --progress-circle-fill:var(--danger-400); }
+.progress-circle-info { --progress-circle-fill:var(--info-400); }
+.progress-circle-indeterminate > svg { animation:spin 1s linear infinite; }
+@media (prefers-reduced-motion:reduce) { .progress-circle-indeterminate > svg { animation-duration:3s; } .progress-circle-fill { transition:none; } }
+/* TAGGROUP (0.32.0): as etiquetas da referência — 24 de altura (sm 20, lg 32), 8 dos lados (lg 10), letra
+   de 12 peso médio (lg 14), ícone de 12, 4 entre as partes, 6 entre as etiquetas; o fundo neutro (ou o de
+   cartão, `surface`), a escolhida no clarinho. O canto é a cápsula da Aurea. O anel de foco vai na
+   etiqueta inteira, e não só no botão de dentro. */
+.tag-group { display:flex; flex-direction:column; gap:var(--space-1); }
+.tag-group-list { display:flex; flex-wrap:wrap; gap:calc(var(--space-1) + var(--space-05)); }
+.tag { display:inline-flex; align-items:center; gap:var(--space-1); min-block-size:var(--space-6); padding:0 var(--space-2); border-radius:var(--radius-full); background:var(--secondary); color:var(--secondary-foreground); font-size:var(--text-xs); font-weight:var(--weight-medium); line-height:var(--space-4); user-select:none; }
+.tag-main { display:inline-flex; align-items:center; gap:var(--space-1); padding:0; border:0; background:none; color:inherit; font:inherit; }
+button.tag-main { cursor:pointer; }
+.tag-main > .icon { --step-icon:var(--space-3); }
+.tag-label { white-space:nowrap; }
+.tag-sm { min-block-size:var(--space-5); }
+.tag-lg { min-block-size:var(--space-8); padding-inline:calc(var(--space-2) + var(--space-05)); font-size:var(--text-sm); line-height:var(--space-5); }
+.tag-surface { background:var(--card); color:var(--card-foreground); }
+@media (hover:hover) { .tag:has(> button.tag-main):not([data-selected]):not([data-disabled]):hover { background:var(--secondary-hover); } }
+.tag[data-selected] { background:color-mix(in oklab,var(--primary) 10%,var(--secondary)); color:var(--primary-emphasis); }
+.tag[data-disabled] { opacity:var(--opacity-disabled); }
+.tag-main:focus-visible { outline:none; }
+.tag:has(> .tag-main:focus-visible) { outline:var(--focus-width) solid var(--focus-strong); outline-offset:var(--focus-offset); }
+.tag-remove { position:relative; display:inline-flex; align-items:center; justify-content:center; flex:none; inline-size:var(--space-3); block-size:var(--space-3); padding:0; border:0; border-radius:var(--radius-full); background:none; color:inherit; opacity:.7; cursor:pointer; }
+.tag-remove > .icon { --step-icon:var(--space-3); }
+.tag-remove:hover:not(:disabled) { opacity:1; }
+.tag-remove:disabled { cursor:not-allowed; }
+@media (pointer:coarse) { .tag-remove::before { content:""; position:absolute; inset:calc((var(--space-3) - var(--target-min)) / 2); border-radius:var(--radius-full); } }
 /* O container do grupo NUNCA teve regra: a sobreposição abaixo existia e os avatares empilhavam
    na vertical porque o pai saía `display:block`. Mesma falha do `.stepper` e do `.command`. */
 .avatar-group { display:inline-flex; align-items:center; }
@@ -2185,18 +2632,33 @@ 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 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. */
-.accordion { display:flex; flex-direction:column; border-block:1px solid var(--border); }
-.accordion > details + details { border-top:1px solid var(--border); }
-.accordion > details > summary { min-height:var(--control-h-md); padding-block:var(--space-2); padding-inline:var(--space-5) var(--space-2); color:var(--foreground); font-weight:var(--weight-medium); line-height:var(--leading-normal); cursor:pointer; }
-.accordion > details > summary:hover { background:var(--surface-hover); }
-.accordion > details > summary::marker { color:var(--muted-foreground); }
-/* Recuo INLINE, não `padding-left`: o marcador do <summary> troca de lado em RTL e o corpo
-   tem de acompanhar. Foi o gate de RTL que cobrou — ele mede o eixo inline do core. */
-.accordion-content { padding-block:0 var(--space-6); padding-inline:var(--space-5) var(--space-2); color:var(--muted-foreground); }
+/* ACCORDION (0.32.0) — o da referência, com o realce em CÁPSULA (decisão do Victor, 11/10/2026). Sem
+   caixa em volta: um fio de 1 entre os itens, nenhum depois do último. A pergunta: 16 de todos os
+   lados, 14 peso médio, a seta de 16 no FIM (esmaecida), que vira −180° ao abrir — o marcador do
+   navegador sai (era ele que girava, no começo da linha). O realce do mouse só no item fechado: a cor
+   do texto a 3%, em cápsula. A resposta: 14 esmaecida, 16 dos lados e embaixo. Recuo INLINE, não
+   `padding-left`: em RTL a seta troca de lado e o corpo acompanha (o gate de RTL mede o eixo inline).
+   `surface`: tudo num cartão, o fio a 94% (3% de cada lado) e o realce no cinza neutro. */
+.accordion { display:flex; flex-direction:column; }
+.accordion-item { position:relative; }
+.accordion-item::after { content:""; position:absolute; inset-inline-start:0; inset-block-end:0; inline-size:100%; block-size:var(--border-width); background:var(--border); }
+.accordion-item:last-child::after { content:none; }
+.accordion-item > summary { display:flex; align-items:center; justify-content:space-between; gap:var(--space-3); padding:var(--space-4); border-radius:var(--radius-full); color:var(--foreground); font-size:var(--text-sm); font-weight:var(--weight-medium); line-height:var(--leading-normal); list-style:none; cursor:pointer; transition:background var(--duration-fast); }
+.accordion-item > summary::-webkit-details-marker { display:none; }
+.accordion-title { min-inline-size:0; }
+.accordion-item:not([open]) > summary:hover:not([aria-disabled="true"]) { background:color-mix(in oklab, var(--foreground) 3%, transparent); }
+.accordion-item > summary[aria-disabled="true"] { opacity:var(--opacity-disabled); cursor:not-allowed; }
+/* A seta é desenho do CSS por máscara, como a do `KPI` e a do aviso preso ao botão (12/10/2026). No
+   passo 4 ela entrou como `<Icon>`, que busca o arquivo de ícones: quem usava só o `Accordion` — que
+   abre sem JavaScript e não pedia arquivo nenhum — passou a ver um erro de rede e uma seta vazia (a
+   prova A4 pegou). O desenho é o `caret-down` do Phosphor, o mesmo do arquivo, no mesmo tamanho. */
+.accordion-chevron { --accordion-glifo:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M213.66,101.66l-80,80a8,8,0,0,1-11.32,0l-80-80A8,8,0,0,1,53.66,90.34L128,164.69l74.34-74.35a8,8,0,0,1,11.32,11.32Z'/%3E%3C/svg%3E"); flex:none; inline-size:var(--icon-sm); block-size:var(--icon-sm); background:currentColor; color:var(--muted-foreground); -webkit-mask:var(--accordion-glifo) center/contain no-repeat; mask:var(--accordion-glifo) center/contain no-repeat; transition:transform var(--duration-fast) var(--ease-standard); }
+.accordion-item[open] > summary .accordion-chevron { transform:rotate(-180deg); }
+.accordion-content { padding-block:0 var(--space-4); padding-inline:var(--space-4); color:var(--muted-foreground); font-size:var(--text-sm); }
+.accordion-surface { border-radius:var(--radius-card); background:var(--card); }
+.accordion-surface > .accordion-item::after { inset-inline-start:3%; inline-size:94%; }
+.accordion-surface > .accordion-item:not([open]) > summary:hover:not([aria-disabled="true"]) { background:var(--secondary); }
+@media (prefers-reduced-motion:reduce) { .accordion-chevron { transition:none; } }
 /* Mockup do kit de origem (apps/docs) — não é o Accordion do sistema, que é <details> nativo. */
 
 /* QRCode: superfície flutuante Aurea, mas o miolo é de alto contraste FIXO — um QR
@@ -2225,6 +2687,21 @@ img,svg { display:block; }
 .checkbox-bare { gap:0; }
 .code-block-wrap { position:relative; display:flex; min-width:0; }
 .code-block-wrap > .code-block { flex:1; min-width:0; margin:0; }
+/* DOC-02 (0.32.0): a caixa de exemplo do site (`CodeBlock preview`), trazida para o core do jeito que
+   ela é no site — o cartão sem recheio, a barra de abas com o segmentado ocupando a largura, a prévia
+   no fundo afundado, centrada, e o código sem moldura (o cartão já é a moldura). A altura é do conteúdo;
+   o site fixa a dele (`--demo-height`). */
+.code-preview { display:flex; flex-direction:column; block-size:var(--demo-height,auto); padding:0; overflow:hidden; }
+.demo-tabs { display:flex; padding:var(--space-2); border-bottom:var(--border-width) solid var(--border); }
+.demo-tabs .segmented { flex:1; display:flex; }
+.demo-tabs .segmented button { flex:1; }
+.demo-panel { flex:1; min-height:0; overflow:auto; padding:var(--space-6); }
+.demo-panel[hidden] { display:none; }
+.demo-panel[data-panel="preview"] { display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:var(--space-4); background:var(--surface-inset); }
+.demo-panel[data-panel="preview"][hidden] { display:none; }
+.demo-code { display:flex; padding:0; overflow:hidden; }
+.demo-code .code-block-wrap { flex:1; }
+.demo-code .code-block { padding:var(--space-6); border:0; border-radius:0; }
 .copy-code { position:absolute; top:var(--space-3); inset-inline-end:var(--space-3); z-index:1; }
 .copy-code .c-done { display:none; }
 .copy-code.is-done .c-copy { display:none; } .copy-code.is-done .c-done { display:block; color:var(--primary); }
@@ -2232,7 +2709,11 @@ img,svg { display:block; }
    por isso é <nav> com rótulo, e o item atual se marca com aria-current. */
 .toc { position:sticky; top:var(--space-4); align-self:start; display:grid; gap:var(--space-1); max-height:calc(100vh - var(--space-8)); overflow:auto; padding:var(--space-2) 0; }
 
-.toc-label { margin:0 0 var(--space-1); padding-inline:var(--space-3); color:var(--subtle-foreground); font-size:11px; letter-spacing:var(--tracking-widest); text-transform:uppercase; }
+/* O "On this page" é o da referência (ADR-0067): letra 14, peso normal, esmaecido, SEM maiúsculas, e o
+   ícone de linhas ao lado — desenho do CSS por máscara (o `text-align-left` do Phosphor), para o sumário
+   não passar a depender do arquivo de ícones. Era 11, em maiúsculas espaçadas. */
+.toc-label { display:flex; align-items:center; gap:var(--space-2); margin:0 0 var(--space-1); padding-inline:var(--space-3); color:var(--muted-foreground); font-size:var(--text-sm); }
+.toc-label-icon { --toc-glifo:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M32,64a8,8,0,0,1,8-8H216a8,8,0,0,1,0,16H40A8,8,0,0,1,32,64Zm8,48H168a8,8,0,0,0,0-16H40a8,8,0,0,0,0,16Zm176,24H40a8,8,0,0,0,0,16H216a8,8,0,0,0,0-16Zm-48,40H40a8,8,0,0,0,0,16H168a8,8,0,0,0,0-16Z'/%3E%3C/svg%3E"); flex:none; inline-size:var(--icon-sm); block-size:var(--icon-sm); background:currentColor; -webkit-mask:var(--toc-glifo) center/contain no-repeat; mask:var(--toc-glifo) center/contain no-repeat; }
 .toc a { padding:var(--space-1) var(--space-3); border-inline-start:2px solid var(--border); color:var(--muted-foreground); font-size:var(--text-sm); text-decoration:none; }
 .toc a:hover { color:var(--foreground); }
 .toc a[aria-current] { border-inline-start-color:var(--primary); color:var(--foreground); }
@@ -2296,26 +2777,33 @@ img,svg { display:block; }
    APARECE (o motor conta com o CSS dele para escondê-lo, e nós não importamos o CSS dele). */
 .calendar { display:inline-block; padding:var(--space-3); border:1px solid var(--border); border-radius:var(--radius-card); background:var(--surface-1); }
 .calendar-months { position:relative; }
-.calendar nav { position:absolute; inset-block-start:0; inset-inline:0; display:flex; justify-content:space-between; }
-.calendar nav button { display:inline-flex; align-items:center; justify-content:center; width:var(--control-h-sm); height:var(--control-h-sm); padding:0; border:0; border-radius:var(--radius-control); background:transparent; color:var(--muted-foreground); cursor:pointer; }
-.calendar nav button:hover:not(:disabled):not([aria-disabled="true"]) { background:var(--secondary); color:var(--foreground); }
-.calendar nav button:disabled { opacity:.4; cursor:not-allowed; }
+/* 0.32.0, o calendário da referência, lido no CSS publicado dela: o mês no COMEÇO, em 14 peso médio, e as
+   duas setas juntas no FIM, botões de 24 na cor de letra da marca; 16 até a grade; o nome do dia em 12
+   peso médio esmaecido, com 8 embaixo; o dia de 36 redondo, em 14 peso médio; HOJE no clarinho (o "soft"
+   dela), o escolhido no amarelo cheio, o de fora do mês esmaecido a meia força, o desligado riscado. */
+.calendar nav { position:absolute; inset-block-start:0; inset-inline-end:0; display:flex; }
+.calendar nav button { display:inline-flex; align-items:center; justify-content:center; width:var(--space-6); height:var(--space-6); padding:0; border:0; border-radius:var(--radius-full); background:transparent; color:var(--primary-emphasis); cursor:pointer; }
+.calendar nav button:hover:not(:disabled):not([aria-disabled="true"]) { background:var(--secondary); }
+.calendar nav button:active:not(:disabled):not([aria-disabled="true"]) { transform:scale(.95); }
+.calendar nav button:disabled { opacity:var(--opacity-disabled); cursor:not-allowed; }
 .calendar nav svg { width:var(--icon-sm); height:var(--icon-sm); fill:currentColor; }
-.calendar-caption { display:flex; align-items:center; justify-content:center; height:var(--control-h-sm); color:var(--foreground); font-size:var(--text-sm); font-weight:var(--weight-medium); }
+.calendar-caption { display:flex; align-items:center; justify-content:flex-start; height:var(--space-6); padding-inline-start:var(--space-05); color:var(--foreground); font-size:var(--text-sm); font-weight:var(--weight-medium); }
 /* Estas três já foram um DESFAZIMENTO: `width:auto`, `min-width:0`, `height:auto` e
    `border-bottom:0` existiam só para anular a regra de elemento da seção de dados. A regra foi
    escopada em 02/08/2026 e o antídoto saiu junto — corrigir onde nasce, não onde dói.
    O `padding:0` FICA, e não é antídoto: é o 1px que o NAVEGADOR dá a `<td>`/`<th>`. Tirá-lo
    junto com o resto engordou a célula para 38px e a grade para 266px — medido, e voltado. */
-.calendar table { border-collapse:collapse; margin-block-start:var(--space-2); }
-.calendar th { padding:0 0 var(--space-1); text-align:center; color:var(--muted-foreground); font-size:var(--text-xs); font-weight:var(--weight-regular); }
+.calendar table { border-collapse:collapse; margin-block-start:var(--space-4); }
+.calendar th { padding:0 0 var(--space-2); text-align:center; color:var(--muted-foreground); font-size:var(--text-xs); font-weight:var(--weight-medium); }
 .calendar td { padding:0; text-align:center; }
-.calendar td button { display:flex; align-items:center; justify-content:center; width:var(--control-h-md); height:var(--control-h-md); border:0; border-radius:var(--radius-control); background:transparent; color:var(--foreground); font-size:var(--text-sm); font-variant-numeric:tabular-nums; cursor:pointer; }
+.calendar td button { display:flex; align-items:center; justify-content:center; width:var(--control-h-md); height:var(--control-h-md); border:0; border-radius:var(--radius-full); background:transparent; color:var(--foreground); font-size:var(--text-sm); font-weight:var(--weight-medium); font-variant-numeric:tabular-nums; cursor:pointer; }
 .calendar td button:hover:not(:disabled):not([aria-disabled="true"]) { background:var(--secondary); }
-.calendar td[data-today] button { font-weight:var(--weight-medium); box-shadow:inset 0 0 0 1px var(--border-strong); }
-.calendar td[data-selected] button { background:var(--primary); color:var(--primary-foreground); font-weight:var(--weight-medium); box-shadow:none; }
-.calendar td[data-outside] button { color:var(--subtle-foreground); }
-.calendar td button:disabled { opacity:.35; cursor:not-allowed; }
+.calendar td button:active:not(:disabled):not([aria-disabled="true"]) { transform:scale(.95); }
+.calendar td[data-today] button { background:color-mix(in oklab,var(--primary) 10%,var(--secondary)); color:var(--primary-emphasis); }
+.calendar td[data-selected] button { background:var(--primary); color:var(--primary-foreground); }
+.calendar td[data-outside] button { color:var(--muted-foreground); opacity:.5; }
+.calendar td[data-selected][data-outside] button { background:var(--secondary); color:var(--muted-foreground); }
+.calendar td button:disabled { opacity:var(--opacity-disabled); text-decoration:line-through; cursor:not-allowed; }
 .calendar td[data-hidden] { visibility:hidden; }
 .message { display:grid; grid-template-columns:auto minmax(0,1fr); gap:12px; } .message-bubble { padding:12px 14px; border-radius:6px var(--radius-lg) var(--radius-lg) var(--radius-lg); background:var(--secondary); } .message-bubble p { margin:0; }
 /* Chat React (Fase 5.4): estrutura fixa em classe, não inline (auditoria 18/07, M14). */
@@ -2493,20 +2981,31 @@ img,svg { display:block; }
    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. */
+   quem os empilha (`Stack`), não do texto.
+   0.32.0: a entrelinha do título passa a ser a de CADA tamanho, como na escala publicada dela
+   (40 · 36 · 32 · 28 · 28 · 24); até aqui era 1,2 em todos (43 · 36 · 29 · 24 · 22 · 19). */
 .typography { margin:0; color:var(--foreground); }
-.typography-h1,.typography-h2,.typography-h3,.typography-h4,.typography-h5,.typography-h6 { font-family:var(--font-heading); font-weight:var(--weight-semibold); line-height:var(--leading-tight); letter-spacing:var(--tracking-tight); }
-.typography-h1 { font-size:var(--text-4xl); }
-.typography-h2 { font-size:var(--text-3xl); }
-.typography-h3 { font-size:var(--text-2xl); }
-.typography-h4 { font-size:var(--text-xl); }
-.typography-h5 { font-size:var(--text-lg); }
-.typography-h6 { font-size:var(--text-base); }
+.typography-h1,.typography-h2,.typography-h3,.typography-h4,.typography-h5,.typography-h6 { font-family:var(--font-heading); font-weight:var(--weight-semibold); letter-spacing:var(--tracking-tight); }
+.typography-h1 { font-size:var(--text-4xl); line-height:var(--text-4xl-leading); }
+.typography-h2 { font-size:var(--text-3xl); line-height:var(--text-3xl-leading); }
+.typography-h3 { font-size:var(--text-2xl); line-height:var(--text-2xl-leading); }
+.typography-h4 { font-size:var(--text-xl); line-height:var(--text-xl-leading); }
+.typography-h5 { font-size:var(--text-lg); line-height:var(--text-lg-leading); }
+.typography-h6 { font-size:var(--text-base); line-height:var(--leading-normal); }
 .typography-body { font-size:var(--text-base); line-height:var(--leading-relaxed); }
 .typography-body-sm { font-size:var(--text-sm); line-height:var(--leading-relaxed); }
 .typography-body-xs { font-size:var(--text-xs); line-height:var(--leading-relaxed); }
 .typography-code { padding:var(--space-05) var(--space-1); border-radius:var(--radius-xs); background:var(--surface-2); font-family:var(--font-code); font-size:var(--text-sm); }
 .typography-muted { color:var(--muted-foreground); }
+/* DOC-11 (0.32.0): o `tone` do nativo, na web. `link` é o amarelo de escrever; `primary`, o de
+   preencher (no claro quase some, como no nativo); as cores de estado, o par `-400` (ADR-0061). */
+.typography-tone-subtle { color:var(--subtle-foreground); }
+.typography-tone-primary { color:var(--primary); }
+.typography-tone-link { color:var(--link); }
+.typography-tone-danger { color:var(--danger-400); }
+.typography-tone-success { color:var(--success-400); }
+.typography-tone-warning { color:var(--warning-400); }
+.typography-tone-info { color:var(--info-400); }
 .typography-weight-normal { font-weight:var(--weight-regular); }
 .typography-weight-medium { font-weight:var(--weight-medium); }
 .typography-weight-semibold { font-weight:var(--weight-semibold); }
@@ -2540,11 +3039,11 @@ img,svg { display:block; }
 .prose { max-width:var(--prose-measure,68ch); font-size:var(--text-base); line-height:var(--leading-relaxed); }
 .prose > * + * { margin-block-start:var(--space-4); }
 .prose > h2,.prose > h3,.prose > h4 { margin-block-start:var(--space-8); }
-.prose h1,.prose h2,.prose h3,.prose h4 { line-height:var(--leading-tight); font-weight:var(--weight-semibold); }
-.prose h1 { font-size:var(--text-3xl); }
-.prose h2 { font-size:var(--text-2xl); }
-.prose h3 { font-size:var(--text-xl); }
-.prose h4 { font-size:var(--text-lg); }
+.prose h1,.prose h2,.prose h3,.prose h4 { font-weight:var(--weight-semibold); }
+.prose h1 { font-size:var(--text-3xl); line-height:var(--text-3xl-leading); }
+.prose h2 { font-size:var(--text-2xl); line-height:var(--text-2xl-leading); }
+.prose h3 { font-size:var(--text-xl); line-height:var(--text-xl-leading); }
+.prose h4 { font-size:var(--text-lg); line-height:var(--text-lg-leading); }
 .prose blockquote { margin-inline:0; padding-inline-start:var(--space-4); border-inline-start:2px solid var(--border-strong); color:var(--muted-foreground); }
 .prose ul,.prose ol { padding-inline-start:var(--space-6); }
 .prose li + li { margin-block-start:var(--space-2); }
@@ -2634,40 +3133,131 @@ img,svg { display:block; }
 .icon-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:8px; }
 .icon-tile { min-height:86px; display:flex; flex-direction:column; align-items:flex-start; justify-content:space-between; gap:12px; padding:13px; border:1px solid var(--border); border-radius:var(--radius-lg); background:var(--secondary); color:var(--muted-foreground); cursor:pointer; text-align:start; transition:transform var(--duration-fast) var(--ease-standard),border-color var(--duration-fast),color var(--duration-fast); }
 @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); }
+/* JANELAS (0.32.0): o Dialog, o ConfirmDialog e o Drawer com a anatomia da referência, lida no CSS
+   PUBLICADO dela — recheio de 24; o X a 16 do topo e do fim; o cabeçalho em coluna (o ícone num círculo
+   de 40 em cima, 12 até o título de 16, peso médio); o corpo de 14/20 esmaecido, que é o que rola; 8
+   entre o cabeçalho e o corpo e 20 antes do rodapé; o rodapé ao fim, com 8 entre os botões. Da tela, a
+   janela guarda 16 no celular e 40 de 640 para cima. Entra crescendo de 0,95 a 1 e sai encolhendo, como
+   a dela. A borda continua (a dela é só sombra no claro): baixa visão, como nas outras janelas.
+   O que já rolava (a janela inteira) passou para o corpo — a ficha prometia isso desde sempre. */
+.dialog-backdrop { position:fixed; inset:0; z-index:var(--z-modal); background:var(--overlay); backdrop-filter:blur(5px); transition:opacity var(--duration-slow) var(--ease-standard); }
+.dialog-backdrop[data-starting-style],.dialog-backdrop[data-ending-style] { opacity:0; }
+.dialog-backdrop[data-ending-style] { transition-duration:var(--duration-fast); }
+.dialog { --dialog-margin:var(--space-4); --dialog-w:28rem; position:fixed; inset-inline:0; top:50%; translate:0 -50%; z-index:var(--z-modal); display:flex; flex-direction:column; inline-size:min(var(--dialog-w),calc(100vw - 2 * var(--dialog-margin))); max-block-size:calc(100dvh - 2 * var(--dialog-margin)); margin-inline:auto; padding:var(--space-6); border:var(--border-width) solid var(--border); border-radius:var(--radius-card); background:var(--popover); color:var(--popover-foreground); box-shadow:var(--shadow-lg); outline:none; transition:opacity var(--duration-slow) var(--ease-standard),scale var(--duration-slow) var(--ease-standard); }
+.dialog[data-starting-style] { opacity:0; scale:1.05; }
+.dialog[data-ending-style] { opacity:0; scale:.95; transition-duration:var(--duration-fast); }
+@media (min-width:640px) { .dialog { --dialog-margin:var(--space-10); } }
+/* `placement` (o dela): `auto` senta a janela EMBAIXO no celular, onde o polegar alcança, e no meio de
+   640 para cima. Sem o atributo (a marcação pura), a janela fica no meio, como sempre ficou. */
+.dialog[data-placement="top"] { top:var(--dialog-margin); translate:none; }
+.dialog[data-placement="bottom"] { top:auto; bottom:var(--dialog-margin); translate:none; }
+@media (max-width:639.98px) { .dialog[data-placement="auto"] { top:auto; bottom:var(--dialog-margin); translate:none; } }
 /* 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)); }
-.dialog-lg { width:min(32rem,calc(100vw - 40px)); }
-.dialog-xl { width:min(var(--breakpoint-lg),calc(100vw - 40px)); }
-.dialog-full { width:calc(100vw - 40px); height:calc(100vh - 40px); }
-.dialog>header,.drawer>header { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; margin-bottom:16px; } .dialog-body { display:grid; gap:14px; }
+.dialog-xs { --dialog-w:20rem; }
+.dialog-sm { --dialog-w:24rem; }
+.dialog-lg { --dialog-w:32rem; }
+.dialog-xl { --dialog-w:var(--breakpoint-lg); }
+.dialog-full { --dialog-w:100vw; block-size:calc(100dvh - 2 * var(--dialog-margin)); }
+/* As partes, as mesmas no Dialog, no ConfirmDialog e no Drawer. O corpo guarda, dos lados e em cima e
+   embaixo, o espaço do anel de foco (a largura e o afastamento dele): é ele que rola, e o que rola corta
+   o anel de quem encosta na borda — a referência faz a mesma conta, com 3. */
+/* 16 da borda de FORA, como a dela (que não tem borda): o absoluto conta de dentro da borda de 1. */
+.dialog-close { position:absolute; inset-block-start:calc(var(--space-4) - var(--border-width)); inset-inline-end:calc(var(--space-4) - var(--border-width)); }
+.dialog-header { display:flex; flex-direction:column; align-items:flex-start; gap:var(--space-3); }
+.dialog-heading { margin:0; padding-inline-end:var(--space-6); color:var(--popover-foreground); font-size:var(--text-base); font-weight:var(--weight-medium); line-height:var(--leading-normal); text-wrap:balance; }
+.dialog-icon { display:inline-flex; flex:none; align-items:center; justify-content:center; inline-size:var(--space-10); block-size:var(--space-10); border-radius:var(--radius-full); background:var(--secondary); color:var(--foreground); }
+.dialog-icon > .icon { --step-icon:var(--icon-md); }
+.dialog-icon-brand { background:color-mix(in oklab,var(--primary) 10%,var(--secondary)); color:var(--primary-emphasis); }
+.dialog-icon-info { background:var(--info-bg); color:var(--info-400); }
+.dialog-icon-success { background:var(--success-bg); color:var(--success-400); }
+.dialog-icon-warning { background:var(--warning-bg); color:var(--warning-400); }
+.dialog-icon-danger { background:var(--danger-bg); color:var(--danger-400); }
+.dialog-body { --dialog-ring:calc(var(--focus-width) + var(--focus-offset)); display:grid; gap:14px; flex:1 1 auto; min-block-size:0; overflow-y:auto; overscroll-behavior:contain; margin-inline:calc(-1 * var(--dialog-ring)); padding:var(--dialog-ring); color:var(--muted-foreground); font-size:var(--text-sm); line-height:var(--space-5); }
+.dialog-header + .dialog-body { margin-block-start:calc(var(--space-2) - var(--dialog-ring)); }
+.dialog-footer { display:flex; flex-wrap:wrap; align-items:center; justify-content:flex-end; gap:var(--space-2); }
+.dialog-body + .dialog-footer { margin-block-start:calc(var(--space-5) - var(--dialog-ring)); }
+.dialog-header + .dialog-footer { margin-block-start:var(--space-5); }
 /* O ConfirmDialog é o MESMO `.dialog` — não nasce uma segunda superfície flutuante, que seria a
    pele divergindo como divergiu entre `.table-wrap` e `.table-region`. O que muda é a caixa mais
-   estreita (uma frase e dois botões não precisam da largura do Dialog) e o rodapé alinhado ao fim, com o
-   destrutivo por último: a ordem visual é cancelar → agir, e é onde as quatro referências batem. */
-.dialog-confirm { width:min(420px,calc(100vw - 40px)); }
-.dialog-confirm>footer { display:flex; justify-content:flex-end; gap:var(--space-2); margin-block-start:var(--space-5); }
+   estreita (uma frase e dois botões não precisam da largura do Dialog), com o destrutivo por último no
+   rodapé: a ordem visual é cancelar → agir, e é onde as quatro referências batem. */
+.dialog-confirm { --dialog-w:26.25rem; }
 .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-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
-   `log-${level}` já tinha tido. Varridos os 18 padrões dinâmicos do pacote React: este era o
-   ÚNICO órfão (o `ev-${e.id}` do agents.tsx é `id`, não classe).
-   Mecanismo REUSADO do .alert/.banner, não inventado: borda tingida + fundo semântico. Vêm
-   DEPOIS da base `.toast` de propósito — mesma especificidade, a última regra vence, e é a
-   armadilha que o comentário do .banner já registrava lá em cima. */
-.toast-info { border-color:color-mix(in srgb,var(--info-400) 38%,var(--border)); background:var(--info-bg); }
-.toast-success { border-color:color-mix(in srgb,var(--success-400) 38%,var(--border)); background:var(--success-bg); }
-.toast-warning { border-color:color-mix(in srgb,var(--warning-400) 38%,var(--border)); background:var(--warning-bg); }
-.toast-danger { border-color:color-mix(in srgb,var(--danger-400) 38%,var(--border)); background:var(--danger-bg); }
+/* DRAWER (0.32.0): a gaveta da referência nos quatro lados, no motor de gaveta do Base UI, que arrasta
+   para fechar. Laterais de 320 (384 de 640 para cima, nunca mais que 85% da tela); a de cima e a de
+   baixo, a largura toda e até 85% da altura, com a alça de 36 × 4. Os cantos são da Aurea: 22 do lado de
+   dentro nas laterais (a dela é quadrada) e o 32 da folha na de cima e na de baixo (ADR-0058). Enquanto
+   o dedo arrasta, a gaveta segue o dedo (as variáveis do motor) e o fundo clareia junto. */
+.drawer-backdrop { position:fixed; inset:0; z-index:var(--z-drawer); background:var(--overlay); opacity:calc(1 - var(--drawer-swipe-progress,0)); transition:opacity var(--duration-slow) var(--ease-emphasized); }
+.drawer-backdrop[data-starting-style],.drawer-backdrop[data-ending-style] { opacity:0; }
+.drawer-backdrop[data-swiping] { transition-duration:0ms; }
+.drawer-viewport { position:fixed; inset:0; z-index:var(--z-drawer); }
+.drawer { position:fixed; z-index:var(--z-drawer); display:flex; flex-direction:column; padding:var(--space-6); border:0 solid var(--border); background:var(--popover); color:var(--popover-foreground); box-shadow:var(--shadow-lg); outline:none; overscroll-behavior:contain; transition:transform var(--duration-slow) var(--ease-emphasized); }
+.drawer[data-swiping] { transition-duration:0ms; }
+.drawer[data-ending-style] { transition-duration:calc(var(--drawer-swipe-strength,1) * var(--duration-slow)); }
+.drawer-left,.drawer-right { top:0; bottom:0; inline-size:min(20rem,85vw); transform:translateX(var(--drawer-swipe-movement-x,0px)); }
+@media (min-width:640px) { .drawer-left,.drawer-right { inline-size:min(24rem,85vw); } }
+.drawer-right { right:0; border-left-width:var(--border-width); border-radius:var(--radius-card) 0 0 var(--radius-card); }
+.drawer-left { left:0; border-right-width:var(--border-width); border-radius:0 var(--radius-card) var(--radius-card) 0; }
+.drawer-top,.drawer-bottom { left:0; right:0; max-block-size:85dvh; transform:translateY(var(--drawer-swipe-movement-y,0px)); }
+.drawer-bottom { bottom:0; border-top-width:var(--border-width); border-radius:var(--radius-sheet) var(--radius-sheet) 0 0; padding-block-end:calc(var(--space-6) + env(safe-area-inset-bottom,0px)); }
+.drawer-top { top:0; border-bottom-width:var(--border-width); border-radius:0 0 var(--radius-sheet) var(--radius-sheet); padding-block:calc(var(--space-6) + env(safe-area-inset-top,0px)) var(--space-2); }
+.drawer-right[data-starting-style],.drawer-right[data-ending-style] { transform:translateX(100%); }
+.drawer-left[data-starting-style],.drawer-left[data-ending-style] { transform:translateX(-100%); }
+.drawer-bottom[data-starting-style],.drawer-bottom[data-ending-style] { transform:translateY(100%); }
+.drawer-top[data-starting-style],.drawer-top[data-ending-style] { transform:translateY(-100%); }
+.drawer-handle { flex:none; align-self:center; inline-size:calc(var(--space-8) + var(--space-1)); block-size:var(--space-1); border-radius:var(--radius-full); background:var(--border-strong); }
+.drawer-bottom > .drawer-handle { margin-block-end:var(--space-2); }
+.drawer-top > .drawer-handle { margin-block-start:var(--space-2); }
+/* TOAST (0.32.0): o aviso da referência, lido no CSS e no código publicados dela, sobre a pilha do
+   motor (as variáveis `--toast-*` do Base UI). Os avisos moram todos no mesmo lugar: o da frente
+   inteiro, os de trás 12 acima e 5% menores a cada um, com o conteúdo apagado; passar o mouse ou o
+   foco abre a pilha, com 12 entre eles. Embaixo no meio por padrão (o dela), 460 de largura de 640
+   para cima e a tela menos 16 de cada lado no celular. `--toast-dir` é o sentido da pilha: para cima
+   quando ela mora embaixo, para baixo quando mora em cima. */
+.toast-stack { --toast-gap:var(--space-3); --toast-dir:-1; position:fixed; z-index:var(--z-toast); inset-block-end:var(--space-4); inset-inline:0; inline-size:min(28.75rem,calc(100vw - 2 * var(--space-4))); margin-inline:auto; outline:none; }
+.toast-stack:is(.toast-stack-top,.toast-stack-top-start,.toast-stack-top-end) { --toast-dir:1; inset-block:var(--space-4) auto; }
+.toast-stack:is(.toast-stack-bottom-start,.toast-stack-top-start) { inset-inline:var(--space-4) auto; margin-inline:0; }
+.toast-stack:is(.toast-stack-bottom-end,.toast-stack-top-end) { inset-inline:auto var(--space-4); margin-inline:0; }
+.toast { position:absolute; inset-inline:0; bottom:0; z-index:calc(1000 - var(--toast-index,0)); box-sizing:border-box; block-size:var(--toast-frontmost-height,var(--toast-height,auto)); padding:var(--space-3) var(--space-4); border:var(--border-width) solid var(--border); border-radius:var(--radius-card); background:var(--popover); color:var(--popover-foreground); box-shadow:var(--shadow-md); user-select:none; transform-origin:50% 100%; transform:translateX(var(--toast-swipe-movement-x,0px)) translateY(calc(var(--toast-swipe-movement-y,0px) + var(--toast-dir) * var(--toast-index,0) * var(--toast-gap))) scale(calc(1 - var(--toast-index,0) * .05)); transition:transform var(--duration-slow) var(--ease-emphasized),opacity var(--duration-slow) var(--ease-standard),block-size var(--duration-fast) var(--ease-standard); }
+.toast-stack:is(.toast-stack-top,.toast-stack-top-start,.toast-stack-top-end) .toast { top:0; bottom:auto; transform-origin:50% 0; }
+.toast[data-expanded] { block-size:var(--toast-height,auto); transform:translateX(var(--toast-swipe-movement-x,0px)) translateY(calc(var(--toast-swipe-movement-y,0px) + var(--toast-dir) * (var(--toast-offset-y,0px) + var(--toast-index,0) * var(--toast-gap)))); }
+.toast[data-starting-style],.toast[data-ending-style] { transform:translateY(calc(-1 * var(--toast-dir) * 150%)); }
+.toast[data-limited],.toast[data-ending-style] { opacity:0; }
+.toast[data-ending-style][data-swipe-direction="right"] { transform:translateX(calc(var(--toast-swipe-movement-x,0px) + 150%)); }
+.toast[data-ending-style][data-swipe-direction="up"] { transform:translateY(calc(var(--toast-swipe-movement-y,0px) - 150%)); }
+.toast[data-ending-style][data-swipe-direction="down"] { transform:translateY(calc(var(--toast-swipe-movement-y,0px) + 150%)); }
+/* A ponte entre dois avisos abertos: sem ela, o mouse que passa pelo vão de 12 sai da pilha e ela fecha. */
+.toast::after { content:""; position:absolute; inset-inline:0; top:100%; block-size:calc(var(--toast-gap) + var(--border-width)); }
+.toast-stack:is(.toast-stack-top,.toast-stack-top-start,.toast-stack-top-end) .toast::after { top:auto; bottom:100%; }
+.toast-content { display:flex; align-items:flex-start; gap:calc(var(--space-1) + var(--space-05)); block-size:100%; overflow:hidden; transition:opacity var(--duration-base) var(--ease-standard); }
+.toast-content[data-behind] { opacity:0; }
+.toast-content[data-expanded] { opacity:1; }
+.toast-indicator { display:inline-flex; flex:none; align-items:center; justify-content:center; inline-size:var(--space-6); block-size:var(--space-6); color:var(--popover-foreground); }
+.toast-indicator > .icon { --step-icon:var(--icon-sm); }
+.toast-text { display:flex; flex:1 1 0; flex-direction:column; align-self:center; min-inline-size:0; }
+.toast-title { color:var(--popover-foreground); font-size:var(--text-sm); font-weight:var(--weight-medium); line-height:var(--space-5); }
+.toast-description { margin:0; color:var(--muted-foreground); font-size:var(--text-sm); line-height:var(--space-5); }
+.toast-action { flex:none; align-self:center; }
+/* No celular a ação desce para baixo do texto, alinhada com ele — como a dela. */
+@media (max-width:639.98px) { .toast-content { flex-wrap:wrap; } .toast-text { flex-basis:calc(100% - var(--space-6) - var(--space-1) - var(--space-05)); } .toast-action { margin-inline-start:calc(var(--space-6) + var(--space-1) + var(--space-05)); } }
+/* As faces do tipo (desde 16/08/2026 elas pintam; o check 18 não enxerga classe por template). Em
+   0.32.0 o tipo deixou de tingir o fundo e a borda: pinta o ícone e o título, no par `-400` da
+   ADR-0061, como o aviso da referência. */
+.toast-info :is(.toast-indicator,.toast-title) { color:var(--info-400); }
+.toast-success :is(.toast-indicator,.toast-title) { color:var(--success-400); }
+.toast-warning :is(.toast-indicator,.toast-title) { color:var(--warning-400); }
+.toast-danger :is(.toast-indicator,.toast-title) { color:var(--danger-400); }
+/* O X do aviso: o `CloseButton` de 20 com o X de 12, na quina, com borda. Aparece com o mouse ou o
+   foco no aviso da frente (ou na pilha aberta); no toque, fica sempre à vista. */
+.toast-close.close-button { position:absolute; inset-block-start:calc(-1 * var(--space-1)); inset-inline-end:calc(-1 * var(--space-1)); inline-size:var(--space-5); block-size:var(--space-5); border:var(--border-width) solid var(--border); background:var(--popover); opacity:0; pointer-events:none; transition:opacity var(--duration-fast) var(--ease-standard); }
+.toast-close.close-button .icon { --step-icon:var(--space-3); }
+:is(.toast[data-expanded],.toast:has(> .toast-content:not([data-behind]))):is(:hover,:focus-within) > .toast-close { opacity:1; pointer-events:auto; }
+@media (hover:none) { :is(.toast[data-expanded],.toast:has(> .toast-content:not([data-behind]))) > .toast-close { opacity:1; pointer-events:auto; } }
+@media (pointer:coarse) { .toast-close.close-button::before { inset:calc((var(--space-5) - var(--target-min)) / 2); } }
 /* GAR-14 (0.28.0): o aviso do `Button share`, preso ao botão — "Link copiado", ou o erro com o link à
    mostra. Tem a medida do botão (a altura, o recheio da regra de cima, a letra e a cápsula) e a pele
    do aviso de sempre. O ícone é desenho de máscara, como a seta do `KPI`: a mesma marcação serve ao
@@ -2692,8 +3282,27 @@ img,svg { display:block; }
 .command-overlay { position:fixed; inset:0; z-index:var(--z-modal); display:grid; place-items:start center; padding:var(--space-16) var(--space-5) var(--space-5); background:var(--overlay); backdrop-filter:blur(5px); }
 .command-palette { display:grid; gap:var(--space-2); width:min(680px,100%); max-height:100%; overflow:auto; padding:var(--space-4); border:1px solid var(--border); border-radius:var(--radius-card); background:var(--popover); color:var(--popover-foreground); box-shadow:var(--shadow-lg); }
 /* Camadas flutuantes (Base UI): tooltip, popover, menu. z-modal para funcionarem sobre diálogos; empilhamento mútuo pela ordem do portal no DOM. */
-.tooltip { z-index:var(--z-modal); max-width:260px; padding:6px 10px; border:1px solid var(--border); border-radius:var(--radius-md); background:var(--surface-inset); color:var(--foreground); font-size:var(--text-xs); line-height:var(--leading-normal); box-shadow:var(--shadow-md); }
-.popover { z-index:var(--z-modal); min-width:220px; max-width:min(360px,calc(100vw - 32px)); padding:16px; border:1px solid var(--border); border-radius:var(--radius-card); background:var(--popover); color:var(--popover-foreground); box-shadow:var(--shadow-lg); display:grid; gap:10px; }
+/* 0.32.0, a dica da referência: recheio de 8, letra de 12/16, até 320 de largura, o fundo das janelas
+   (era o fundo afundado), e a palavra longa quebra onde precisar. O canto continua o 10 da Aurea (o
+   dela é 12, que a nossa escala não tem). Entra crescendo de 0,9 e sai encolhendo; pelo teclado, e
+   quando passa de uma dica para a vizinha, entra sem animação (`data-instant` do motor). */
+.tooltip { z-index:var(--z-modal); max-inline-size:min(20rem,calc(100vw - 2 * var(--space-4))); padding:var(--space-2); border:var(--border-width) solid var(--border); border-radius:var(--radius-md); background:var(--popover); color:var(--popover-foreground); font-size:var(--text-xs); line-height:var(--space-4); overflow-wrap:anywhere; box-shadow:var(--shadow-md); transform-origin:var(--transform-origin,center); transition:opacity var(--duration-base) var(--ease-standard),scale var(--duration-base) var(--ease-standard); }
+.tooltip[data-starting-style],.tooltip[data-ending-style],.popover[data-starting-style],.popover[data-ending-style] { opacity:0; scale:.9; }
+.tooltip[data-ending-style],.popover[data-ending-style] { transition-duration:var(--duration-fast); }
+.tooltip[data-instant] { transition:none; }
+.popover { z-index:var(--z-modal); min-width:220px; max-width:min(360px,calc(100vw - 32px)); padding:16px; border:1px solid var(--border); border-radius:var(--radius-card); background:var(--popover); color:var(--popover-foreground); font-size:var(--text-sm); box-shadow:var(--shadow-lg); display:grid; gap:10px; transform-origin:var(--transform-origin,center); transition:opacity var(--duration-base) var(--ease-standard),scale var(--duration-base) var(--ease-standard); }
+.popover-title { font-weight:var(--weight-medium); }
+/* A SETA (0.32.0): o desenho é nosso — uma curva de 12 × 6 —, com o fundo da janela e a linha da borda,
+   e ela entra 1 por cima da borda da janela para a linha dar a volta sem emenda. O motor põe a seta
+   no ponto certo do lado; aqui só se diz em que lado ela encosta e para onde aponta. */
+.overlay-arrow { display:flex; inline-size:var(--space-3); block-size:var(--space-3); }
+.overlay-arrow > svg { inline-size:100%; block-size:100%; overflow:visible; }
+.overlay-arrow-fill { fill:var(--popover); }
+.overlay-arrow-line { stroke:var(--border); stroke-width:var(--border-width); }
+.overlay-arrow[data-side="top"] { top:calc(100% - var(--border-width)); }
+.overlay-arrow[data-side="bottom"] { bottom:calc(100% - var(--border-width)); rotate:180deg; }
+.overlay-arrow[data-side="left"] { left:calc(100% - var(--border-width)); rotate:-90deg; }
+.overlay-arrow[data-side="right"] { right:calc(100% - var(--border-width)); rotate:90deg; }
 /* `--menu-px` existe porque o RÓTULO DE GRUPO tem de alinhar com o texto dos itens, e o número
    estava escrito duas vezes. Uma relação entre duas regras não se mantém repetindo a constante:
    quem mudar o recuo do item mudaria o alinhamento do rótulo sem perceber. */
@@ -2723,8 +3332,18 @@ img,svg { display:block; }
    DEPOIS do `.menu-item` de proposito: as duas regras tem a MESMA especificidade, entao quem vem
    por ultimo vence. Escrita antes, a grade de tres colunas era apagada pelo `display:flex` do
    menu — medido em 13/08/2026, e o gate de pele foi quem pegou. */
-.command-positioner { inline-size:var(--anchor-width); }
 .command-list { max-height:min(50vh,360px); overflow-y:auto; overscroll-behavior:contain; }
+/* 0.32.0 — a lista mora DENTRO da caixa da paleta (o `inline` do motor), e não num popup: o `.menu`
+   aqui não flutua — sem borda, sem sombra, sem largura própria; a caixa é a da paleta. */
+.command-palette .command-list { position:static; z-index:auto; min-width:0; max-width:none; border:0; box-shadow:none; padding:0; background:transparent; }
+/* O título do grupo (DOC-06) = o `Header` da seção da lista da referência: 12, peso médio,
+   esmaecido, sem maiúsculas; 6 em cima e 4 embaixo; alinhado ao texto do item (`--menu-px`). */
+.command-group + .command-group { margin-block-start:var(--space-1); }
+.command-group-label { padding:calc(var(--space-1) + var(--space-05)) var(--menu-px, var(--space-3)) var(--space-1); color:var(--muted-foreground); font-size:var(--text-xs); font-weight:var(--weight-medium); }
+/* A linha de atalhos (DOC-07): a tecla da referência (o `Kbd`) com o que ela faz, 12 esmaecido,
+   separada da lista por um fio. */
+.command-shortcuts { display:flex; flex-wrap:wrap; gap:var(--space-4); margin:0; padding:var(--space-2) var(--space-1) 0; border-top:var(--border-width) solid var(--border); color:var(--muted-foreground); font-size:var(--text-xs); }
+.command-shortcuts > span { display:inline-flex; align-items:center; gap:var(--space-1); }
 .command-item { display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:var(--space-3); align-items:center; }
 .command-item-label { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
 
@@ -2777,6 +3396,19 @@ img,svg { display:block; }
    centralizado; e o valor longo termina em "…" em vez de passar por baixo da seta. */
 .select-trigger { display:flex; align-items:center; text-align:start; cursor:pointer; }
 .select-trigger:disabled,.select-trigger[data-disabled] { cursor:not-allowed; }
+/* O GATILHO DO `DatePicker` (0.32.0, ADR-0068) é o campo do `Select`, com o calendário no lugar da seta:
+   sem a seta desenhada no fundo, o recheio do fim volta ao do lado de dentro, e o ícone vai no fim. */
+/* A seta sai com `.select.date-picker-trigger` (força 0,2,0), e não só `.date-picker-trigger`: a regra do tema claro
+   do `.select` (`[data-theme="light"] .select:where(…)`, mais acima) também tem 0,2,0 e repintava a seta por cima do
+   calendário — visto pelo Victor em 13/10/2026. Empate de força: vale a que vem depois, que é esta. */
+.date-picker-trigger { gap:var(--space-2); padding-inline-end:var(--step-field-px,var(--space-3)); }
+.select.date-picker-trigger { background-image:none; }
+.date-picker-trigger > .icon { flex:none; color:var(--muted-foreground); }
+/* A janela abraça o calendário (o `.popover` tem um piso de largura para texto, e aqui não há texto). E é UMA
+   superfície só, como na referência: a janela tem o fundo, a sombra e o canto, com recheio 12 (o `p-3` dela); o
+   calendário de dentro perde a moldura própria — antes saía caixa dentro de caixa (visto em 13/10/2026). */
+.date-picker-popover { min-width:0; padding:var(--space-3); }
+.date-picker-popover > .calendar { padding:0; border:0; border-radius:0; background:transparent; }
 .select-value { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
 .select-value[data-placeholder] { color:var(--muted-foreground); }
 .combobox-popup { inline-size:var(--anchor-width); min-inline-size:0; max-inline-size:none; max-block-size:min(320px,var(--available-height)); overflow-y:auto; overscroll-behavior:contain; }
@@ -2900,7 +3532,7 @@ img,svg { display:block; }
    (`.tree-label` não quebra), então a cápsula não deforma. */
 .tree, .tree-group { margin:0; padding:0; list-style:none; }
 .tree-item { outline:none; }
-.tree-node { display:flex; align-items:center; gap:var(--space-2); min-height:var(--control-h-md); padding-block:var(--space-1); padding-inline-end:var(--space-3); border-radius:var(--radius-control); color:var(--foreground); cursor:pointer; user-select:none; }
+.tree-node { display:grid; grid-template-columns:auto auto minmax(0,1fr); align-items:center; column-gap:0; min-height:var(--control-h-md); padding-block:var(--space-1); padding-inline-end:var(--space-3); border-radius:var(--radius-control); color:var(--foreground); cursor:pointer; user-select:none; }
 .tree-node:hover { background:var(--surface-3); }
 .tree-item:focus-visible > .tree-node { outline:var(--focus-width) solid var(--focus-strong); outline-offset:calc(-1 * var(--focus-width)); }
 .tree-node[data-selected] { background:color-mix(in srgb,var(--primary) 14%,transparent); }
@@ -2913,7 +3545,17 @@ img,svg { display:block; }
 .tree-twist-rtl { rotate:180deg; }
 .tree-item[aria-expanded="true"] > .tree-node > .tree-twist { rotate:90deg; }
 .tree-indent { flex:none; width:1rem; }
-.tree-label { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
+/* MNT-23 (12/10/2026): a árvore ALARGAVA A PÁGINA. O rótulo não quebra linha, e numa linha `flex` a
+   largura mínima da árvore era o rótulo inteiro: numa coluna `1fr` de grade, num filho `flex: 1` ou num
+   div dentro deles, ela empurrava a caixa (medido: 360 → 820). A linha é uma GRADE, e a trilha do
+   rótulo é `minmax(0,1fr)`: ela pede zero de largura mínima e, quando há espaço (um painel que se
+   ajusta ao conteúdo), mostra o rótulo inteiro — largura 0 no rótulo resolveria só a primeira metade.
+   As três colunas: a seta (ou o recuo, ou a rodinha), o ícone do nó e o rótulo. O vão vira margem do
+   ícone e do rótulo: sem ícone, a coluna dele fica vazia e não sobra vão dobrado. Quem cobra:
+   `tests/visual/rede3.spec.ts`. */
+.tree-node > .tree-twist, .tree-node > .tree-indent { grid-column:1; }
+.tree-node > .icon:not(.tree-twist) { grid-column:2; margin-inline-start:var(--space-2); }
+.tree-label { grid-column:3; margin-inline-start:var(--space-2); min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
 
 /* NotificationCenter (Fase 4) — compõe o .popover; aqui só o gatilho com count,
    o cabeçalho e as linhas do feed. Espaço novo tokenizado; a linha usa radius-sm
@@ -2975,7 +3617,8 @@ th[aria-sort] .datagrid-sort-icon { color:var(--primary); }
    `height:auto` (o conteúdo já passa de --row-h, e altura em célula é mínimo),
    `letter-spacing:normal` (o .input não herda o entreletras do cabeçalho) e
    `line-height:0` no rótulo (o <label> vazio já não ocupa altura). */
-.datagrid-filters th { padding-block:var(--space-2); text-transform:none; vertical-align:top; }
+.table-wrap thead tr.datagrid-filters th { block-size:auto; padding-block:var(--space-2); vertical-align:top; }
+.table-wrap thead tr.datagrid-filters th::after { content:none; }
 .datagrid-filters .field { gap:0; }
 
 /* F6: cabeçalho fixo. A `.table-wrap` já é o contêiner de rolagem (overflow:auto),
@@ -2993,12 +3636,14 @@ th[aria-sort] .datagrid-sort-icon { color:var(--primary); }
    seria trocar risco real por pureza de método. As outras três regras daqui foram
    provadas. */
 .datagrid-sticky thead th { position:sticky; inset-block-start:0; z-index:1; }
-.datagrid-sticky .datagrid-filters th { inset-block-start:var(--row-h); }
+.datagrid-sticky .datagrid-filters th { inset-block-start:var(--table-head-h); }
 
 /* F7: a alça de redimensionar. Fina, colada no fim da célula e da altura toda —
    alvo estreito de propósito, porque largo demais rouba o clique do cabeçalho
    ordenável que está ao lado. O `th` precisa de `position:relative` para ancorá-la. */
 .datagrid thead th:has(> .datagrid-resizer) { position:relative; }
+/* A alça de largura toma o lugar do fio entre as colunas, como na referência. */
+.table-wrap thead th:has(> .datagrid-resizer)::after { content:none; }
 .datagrid-resizer { position:absolute; inset-block:0; inset-inline-end:0; inline-size:var(--space-1); padding:0; border:0; background:none; cursor:col-resize; touch-action:none; }
 .datagrid-resizer:hover, .datagrid-resizer:focus-visible { background:var(--primary); }
 .datagrid-resizer:focus-visible { outline:var(--focus-width) solid var(--focus-strong); outline-offset:calc(-1 * var(--focus-width)); }
@@ -3223,7 +3868,12 @@ th[aria-sort] .datagrid-sort-icon { color:var(--primary); }
   --xy-minimap-node-stroke-color:transparent;
   /* A espessura de base da linha: a do sistema (1). O alto contraste dobra a base, e os pesos e
      traços são múltiplos dela — por isso nada aqui é número solto. */
-  --graph-edge-base:var(--border-width); }
+  --graph-edge-base:var(--border-width);
+  /* (Rodada 2) O rótulo de HTML fica ACIMA das linhas e dos contêineres: o motor eleva a linha de quem
+     está dentro de um contêiner ao andar do nó (1, 2…), e a caixa do contêiner é um nó — sem isto, o
+     "10G" saía por baixo da fibra e o nome da porta, por baixo do site (medido na bancada). 1000 é o
+     degrau que o próprio motor usa para elevar o escolhido; o rótulo que encosta num nó some (MNT-12.5). */
+  --graph-label-z:1000; }
 /* A atribuição do motor (que a licença dele manda manter, e mantemos) traz `color:#999`
    CRAVADO no `init.css` — o único ponto em que a folha "estrutural" carrega cor. Reprovou
    contraste no axe, tema claro. A regra é de ELEMENTO e vem ESCOPADA à nossa classe, que é a
@@ -3268,18 +3918,34 @@ button.graph-node-body { cursor:pointer; }
    com camada, qualquer que seja a força do seletor. Medido na bancada da rodada 1: a fibra saía com
    1 de espessura em vez de 6. A variável não tem rival na linha, então a nossa vale. O `stroke-width`
    fica para os desenhos que são nossos (a amostra da legenda e o miolo do traço duplo). */
-.dependency-graph .graph-edge { --graph-edge-w:var(--graph-edge-base); --xy-edge-stroke-width:var(--graph-edge-w); stroke-width:var(--graph-edge-w); }
-.dependency-graph .graph-edge-thick { --graph-edge-w:calc(var(--graph-edge-base) * 2); }
-.dependency-graph .graph-edge-heavy { --graph-edge-w:calc(var(--graph-edge-base) * 3); }
+.dependency-graph .graph-edge { --graph-edge-w:calc(var(--graph-edge-base) * var(--graph-edge-scale,1)); --xy-edge-stroke-width:var(--graph-edge-w); stroke-width:var(--graph-edge-w); }
+.dependency-graph .graph-edge-thick { --graph-edge-w:calc(var(--graph-edge-base) * 2 * var(--graph-edge-scale,1)); }
+.dependency-graph .graph-edge-heavy { --graph-edge-w:calc(var(--graph-edge-base) * 3 * var(--graph-edge-scale,1)); }
+/* MNT-26 (12/10/2026): a COR da linha é o ESTADO dela, o `status.tone` da linha, como o selo do nó (pedido
+   do dono do app: "senti falta de cores"). A cor é a de LETRA e borda sobre a tela (o par `-400`,
+   ADR-0061), e não o fundo cheio. Ela pinta a variável do motor no próprio traço — vence o alto contraste,
+   que pinta a do mapa inteiro: a linha de cor continua de cor, e o traço fica grosso como o resto. A
+   amostra da parte "Estado" da legenda usa a mesma classe, e a palavra ao lado dela é o que garante que a
+   cor não fala sozinha; a amostra do TIPO da ligação não leva cor.
+   A linha com cor tem o DOBRO da espessura (ordem do Victor, 13/10/2026: "pode engrossar a linha com cor").
+   Medido no "caber na tela" (zoom 0,57): com 1 — e com 1,5 —, nenhum ponto do traço chegava à cor de
+   verdade, e a linha verde parecia cinza; com 2, a cor aparece exata. As três espessuras dobram juntas
+   (`--graph-edge-scale`), para a velocidade continuar legível entre as linhas com cor; o miolo do duplo
+   leva a mesma classe e dobra junto. */
+.dependency-graph :is(.graph-edge-tone-info,.graph-edge-tone-success,.graph-edge-tone-warning,.graph-edge-tone-danger) { --graph-edge-scale:2; }
+.dependency-graph .graph-edge-tone-info { --xy-edge-stroke:var(--info-400); }
+.dependency-graph .graph-edge-tone-success { --xy-edge-stroke:var(--success-400); }
+.dependency-graph .graph-edge-tone-warning { --xy-edge-stroke:var(--warning-400); }
+.dependency-graph .graph-edge-tone-danger { --xy-edge-stroke:var(--danger-400); }
 .dependency-graph .graph-edge-dashed { stroke-dasharray:var(--space-2) var(--space-1); }
 .dependency-graph .graph-edge-dotted { --xy-edge-stroke-width:calc(var(--graph-edge-w) * 2); stroke-width:calc(var(--graph-edge-w) * 2); stroke-dasharray:0 calc(var(--graph-edge-w) * 5); stroke-linecap:round; }
 .dependency-graph .graph-edge-double { --xy-edge-stroke-width:calc(var(--graph-edge-w) * 3); stroke-width:calc(var(--graph-edge-w) * 3); }
-.graph-edge-double-core { --graph-edge-w:var(--graph-edge-base); fill:none; stroke:var(--xy-edge-label-background-color); stroke-width:var(--graph-edge-w); pointer-events:none; }
-.graph-edge-double-core.graph-edge-thick { --graph-edge-w:calc(var(--graph-edge-base) * 2); }
-.graph-edge-double-core.graph-edge-heavy { --graph-edge-w:calc(var(--graph-edge-base) * 3); }
+.graph-edge-double-core { --graph-edge-w:calc(var(--graph-edge-base) * var(--graph-edge-scale,1)); fill:none; stroke:var(--xy-edge-label-background-color); stroke-width:var(--graph-edge-w); pointer-events:none; }
+.graph-edge-double-core.graph-edge-thick { --graph-edge-w:calc(var(--graph-edge-base) * 2 * var(--graph-edge-scale,1)); }
+.graph-edge-double-core.graph-edge-heavy { --graph-edge-w:calc(var(--graph-edge-base) * 3 * var(--graph-edge-scale,1)); }
 /* A pastilha do meio (marca, número, grupo) e o nome da porta na ponta são HTML sobre o desenho. */
-.graph-edge-chip { position:absolute; display:inline-flex; align-items:center; gap:var(--space-1); padding:var(--space-05) var(--space-2); border-radius:var(--radius-control); background:var(--xy-edge-label-background-color); color:var(--xy-edge-label-color); font-size:var(--graph-edge-label-size,var(--text-xs)); line-height:var(--leading-tight); white-space:nowrap; pointer-events:all; }
-.graph-edge-end { position:absolute; padding:0 var(--space-1); border-radius:var(--radius-xs); background:var(--xy-edge-label-background-color); color:var(--xy-edge-label-color); font-size:var(--graph-edge-label-size,var(--text-xs)); line-height:var(--leading-tight); white-space:nowrap; pointer-events:none; }
+.graph-edge-chip { position:absolute; z-index:var(--graph-label-z); display:inline-flex; align-items:center; gap:var(--space-1); padding:var(--space-05) var(--space-2); border-radius:var(--radius-control); background:var(--xy-edge-label-background-color); color:var(--xy-edge-label-color); font-size:var(--graph-edge-label-size,var(--text-xs)); line-height:var(--leading-tight); white-space:nowrap; pointer-events:all; }
+.graph-edge-end { position:absolute; z-index:var(--graph-label-z); padding:0 var(--space-1); border-radius:var(--radius-xs); background:var(--xy-edge-label-background-color); color:var(--xy-edge-label-color); font-size:var(--graph-edge-label-size,var(--text-xs)); line-height:var(--leading-tight); white-space:nowrap; pointer-events:none; }
 /* `nodrag`/`nopan`: a pastilha é HTML sobre o mapa, e as duas classes dizem ao motor para não arrastar
    nem rolar a tela por ela (o botão do grupo precisa do clique). Fora do botão, o cursor é o comum. */
 .graph-edge-chip.nodrag.nopan { cursor:default; }
@@ -3292,7 +3958,12 @@ button.graph-node-body { cursor:pointer; }
 /* Os botões de zoom, o minimapa e a legenda flutuam sobre o mapa, com a pele de cartão. */
 .graph-controls { display:flex; gap:var(--space-1); padding:var(--space-1); border:var(--border-width) solid var(--border); border-radius:var(--radius-control); background:var(--card); }
 .graph-minimap { border:var(--border-width) solid var(--border); border-radius:var(--radius-md); overflow:hidden; }
-.graph-legend { display:grid; gap:var(--space-1); margin:0; padding:var(--space-2) var(--space-3); list-style:none; border:var(--border-width) solid var(--border); border-radius:var(--radius-md); background:var(--card); color:var(--foreground); font-size:var(--graph-edge-label-size,var(--text-xs)); }
+.graph-legend { display:grid; gap:var(--space-1); margin:0; padding:var(--space-2) var(--space-3); border:var(--border-width) solid var(--border); border-radius:var(--radius-md); background:var(--card); color:var(--foreground); font-size:var(--graph-edge-label-size,var(--text-xs)); }
+/* Duas partes (12/10/2026): o tipo da ligação e o estado, cada uma com o título à vista; com uma parte só,
+   a lista sozinha, como era. */
+.graph-legend ul { display:grid; gap:var(--space-1); margin:0; padding:0; list-style:none; }
+.graph-legend-title { margin:0; color:var(--muted-foreground); font-weight:var(--weight-medium); }
+.graph-legend ul + .graph-legend-title { margin-block-start:var(--space-2); }
 .graph-legend li { display:flex; align-items:center; gap:var(--space-2); }
 .graph-legend-sample { inline-size:var(--space-8); block-size:var(--space-2); overflow:visible; }
 .graph-legend-sample .graph-edge,.graph-legend-sample .graph-edge-double-core { fill:none; }
@@ -3307,7 +3978,53 @@ button.graph-node-body { cursor:pointer; }
 .dependency-graph[data-contrast="high"] { --xy-edge-stroke:var(--foreground); --xy-edge-label-color:var(--foreground); --graph-edge-base:calc(var(--border-width) * 2); }
 .dependency-graph[data-contrast="high"] .graph-node-body { border-color:var(--foreground); border-width:calc(var(--border-width) * 2); }
 .dependency-graph[data-contrast="high"] .graph-node-kind,.dependency-graph[data-contrast="high"] .graph-node-icon { color:var(--foreground); }
-.datagrid tbody tr[data-selected] { background:color-mix(in srgb,var(--primary) 14%,transparent); }
+/* ── RODADA 2 DA REDE (ADR-0065, 10/10/2026) ───────────────────────────────────────────────
+   O LAÇO do modo de arrumar e a caixa em volta dos escolhidos se vestem pelas variáveis do motor. */
+.dependency-graph { --xy-selection-background-color:color-mix(in oklab,var(--primary) 10%,transparent); --xy-selection-border:var(--border-width) dashed var(--primary); }
+/* No modo de arrumar, quem recebe o foco é a caixa do MOTOR (que não tem classe nossa): o anel vai
+   no corpo do nó, com o raio dele, e é UMA linha — a borda vira a cor do foco e o anel encosta nela
+   (ADR-0059). A caixa do motor, quadrada, não desenha anel nenhum. */
+.dependency-graph :focus-visible:has(> .graph-node) { outline:none; }
+.dependency-graph :focus-visible:has(> .graph-group) { outline:none; }
+.dependency-graph :focus-visible > .graph-node > .graph-node-body,.dependency-graph :focus-visible > .graph-group { outline:var(--focus-width) solid var(--focus-strong); outline-offset:0; border-color:var(--focus-strong); }
+/* O CONTÊINER aberto (site, andar, rack): a região em volta dos filhos, com a cabeça. A cabeça tem
+   `--space-10` e o recheio `--space-4` — os mesmos números com que o graph.tsx monta a caixa. */
+/* O fundo é um VÉU leve, e não uma cor cheia: a linha entre dois nós de fora que passa por cima da
+   região continua aparecendo (o contêiner é um nó, e o motor o desenha acima das linhas comuns). E o
+   véu soma: o andar dentro do site fica um tom acima, e o aninhamento se lê sem cor nova. */
+.graph-group { position:relative; inline-size:100%; block-size:100%; border:var(--border-width) solid var(--border); border-radius:var(--radius-card); background:color-mix(in oklab,var(--foreground) 3%,transparent); }
+.graph-group[data-selected] { border-color:var(--primary); }
+.graph-group[data-dimmed] { opacity:.3; }
+.graph-group-head { display:flex; align-items:center; gap:var(--space-2); block-size:var(--space-10); padding-inline:var(--space-2) var(--space-3); color:var(--foreground); font-size:var(--text-sm); }
+.graph-group-label { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-weight:var(--weight-medium); }
+/* Os dois botões de fechar e abrir têm 24 de lado (`--space-6`): o alvo mínimo de toque (WCAG 2.5.8). */
+.graph-group-toggle { display:inline-grid; place-items:center; flex:none; inline-size:var(--space-6); block-size:var(--space-6); padding:0; border:0; border-radius:var(--radius-full); background:none; color:var(--muted-foreground); cursor:pointer; }
+.graph-group-toggle:hover { background:var(--secondary); color:var(--foreground); }
+/* O de NÓ senta no CANTO de baixo, à direita, como a quantidade no de cima: fechado, mostra QUANTOS
+   guarda ("+12"). No canto, e não na borda: na borda ele cobria a alça da última porta (medido na
+   bancada, a "porta 3" do núcleo saía por baixo dele). O selo de estado, embaixo à esquerda, encolhe. */
+.graph-node-toggle { position:absolute; inset-block-end:0; inset-inline-end:0; display:inline-flex; align-items:center; justify-content:center; min-inline-size:var(--space-6); block-size:var(--space-6); padding:0 var(--space-2); border:var(--border-width) solid var(--border-strong); border-radius:var(--radius-control); background:var(--secondary); color:var(--foreground); font:inherit; font-size:var(--text-xs); font-variant-numeric:tabular-nums; font-weight:var(--weight-medium); transform:translate(25%,50%); cursor:pointer; }
+.graph-node-toggle[aria-expanded="false"] { border-color:var(--primary-outline); }
+.graph-node:has(.graph-node-toggle) .graph-node-status { max-inline-size:calc(100% - var(--space-16)); }
+/* O ALFINETE (nó fixo), no canto de cima à esquerda — a quantidade fica no da direita. */
+.graph-node-pin { position:absolute; inset-block-start:0; inset-inline-start:0; display:inline-grid; place-items:center; inline-size:var(--space-5); block-size:var(--space-5); border:var(--border-width) solid var(--border); border-radius:var(--radius-full); background:var(--card); color:var(--foreground); transform:translate(-25%,-50%); }
+/* A NUVEM é desenho de FUNDO: a caixa do nó fica sem borda e sem fundo, e o texto vai ao centro. */
+.graph-node-cloud { position:absolute; inset:0; inline-size:100%; block-size:100%; overflow:visible; pointer-events:none; }
+.graph-node-cloud path { fill:var(--card); stroke:var(--border); stroke-width:var(--border-width); }
+/* E o ícone vai JUNTO do texto, no meio da nuvem: na borda da caixa, onde fica nos outros nós, ele
+   saía para fora do contorno. */
+.graph-node[data-shape="cloud"] .graph-node-body { position:relative; border-color:transparent; background:none; justify-items:center; text-align:center; }
+.graph-node[data-shape="cloud"] .graph-node-has-icon { grid-template-columns:auto auto; justify-content:center; }
+.graph-node[data-shape="cloud"][data-selected] .graph-node-cloud path,.graph-node[data-shape="cloud"][data-focused] .graph-node-cloud path { stroke:var(--primary); }
+.dependency-graph[data-contrast="high"] .graph-node-cloud path { stroke:var(--foreground); stroke-width:calc(var(--border-width) * 2); }
+/* A BARRA do modo de arrumar quebra em mais linhas quando a tela é estreita. */
+.graph-toolbar { max-inline-size:calc(100% - var(--space-8)); }
+/* OS RÓTULOS QUE SOMEM (MNT-12.5): o que encosta noutro, pela prioridade (o graph.tsx mede e marca),
+   e o texto das linhas inteiro quando a câmera está longe — a 60%, a letra viraria um risco. */
+.dependency-graph [data-crowded],.dependency-graph[data-far] :is(.graph-edge-text,.graph-edge-end,.graph-edge-chip-text) { visibility:hidden; }
+/* 0.32.0: as células têm o fundo de cartão (o corpo da tabela da referência), então o escolhido pinta
+   a CÉLULA — na linha, ele ficava por baixo delas. É o clarinho da Aurea. */
+.datagrid tbody tr[data-selected] > :is(td,th) { background:color-mix(in oklab,var(--primary) 10%,var(--card)); }
 .datagrid-empty { padding:var(--space-6); color:var(--muted-foreground); text-align:center; }
 
 /* ========================================================================== */
@@ -3328,11 +4045,29 @@ button.graph-node-body { cursor:pointer; }
 .pattern-toolbar .input-group { flex:1 1 180px; }
 .media-library-row.active { border-color:var(--primary); }
 /* Alvo de toque. `.tabs`/`.segmented` no lugar de `.tab`/`.segmented button`: agora a altura
-   mora na cápsula, então é ela que precisa crescer — o filho estica atrás. */
-@media (pointer:coarse) { .btn:not(.btn-link),.tabs,.segmented,.pagination button,.schedule-grid button,.media-control,.nav-list-row { min-height:var(--target-min); } .btn-icon,.media-control { min-width:var(--target-min); } }
+   mora na cápsula, então é ela que precisa crescer — o filho estica atrás. O `CloseButton` fica de
+   fora (0.32.0): o alvo dele é o `::before` de 44, e o círculo continua de 24, como o da referência. */
+@media (pointer:coarse) { .btn:not(.btn-link):not(.close-button),.tabs,.segmented,.pagination button,.pagination-link,.schedule-grid button,.media-control,.nav-list-row { min-height:var(--target-min); } .btn-icon,.media-control,.pagination-link { min-width:var(--target-min); } }
 @media (forced-colors:active) {
   :focus-visible { outline:var(--focus-width) solid CanvasText; outline-offset:var(--focus-offset); box-shadow:none; }
   .badge,.pattern-gallery button[aria-pressed="true"],.device-grid button[aria-pressed="true"] { border:1px solid CanvasText; }
+  /* O glifo por máscara é FUNDO recortado, e aqui o navegador troca todo fundo pela cor da tela: o
+     glifo sumia (medido em 12/10/2026: zero ponto de tinta nos cinco). Ele sai da troca e pinta com a
+     cor do SISTEMA que o texto ao lado recebe — pelo nome, porque `inherit` aqui devolve a cor de
+     antes da troca (medido: o amarelo do link e o branco do tema escuro, sobre a tela branca). O
+     título do `Accordion` fica na cor de texto: sem isto, o Chromium o pintava na cor de link e o
+     Firefox na de texto, e a seta não tinha como acompanhar os dois. Glifo novo por máscara entra
+     nesta lista; quem cobra é `tests/visual/mascara-alto-contraste.spec.ts`. */
+  :is(.topbar-menu-icon,.link-external,.kpi-trend-icon,.accordion-chevron,.toast-anchored-icon,.toc-label-icon) { forced-color-adjust:none; background:CanvasText; }
+  .topbar-menu-icon { background:ButtonText; }
+  .link-external { background:LinkText; opacity:1; }
+  .accordion-item > summary { color:CanvasText; }
+  /* A AMOSTRA DE COR (0.32.0, ADR-0069): a cor É o conteúdo dela — no `ColorSwatch`, nas amostras para escolher, no
+     gatilho do `ColorPicker` e na frente do `ColorField`. Com a troca, viravam círculos brancos de contorno preto e o
+     "visto" sumia (medido em 14/10/2026). Ela sai da troca, como a área e a trilha; o anel de foco fica na cor do
+     sistema. Quem cobra: `tests/visual/mascara-alto-contraste.spec.ts`. */
+  :is(.color-swatch,.color-swatch-option) { forced-color-adjust:none; }
+  .color-swatch-option:has(:focus-visible) { outline-color:CanvasText; }
 }
 
 
@@ -3372,7 +4107,7 @@ button.graph-node-body { cursor:pointer; }
      nós sem as arestas quebraria o desenho;
    - .drawer-left/.drawer-right prometem lado físico no nome (prop side). */
 :dir(rtl) .select { background-position:12px 50%; }
-:dir(rtl) .switch input:checked + .switch-track:after { transform:translateX(-18px); }
+:dir(rtl) .switch input:checked + .switch-track:after { transform:translateX(calc(-1 * var(--switch-x))); }
 
 /* BARRA DE ROLAGEM. A Aurea ESCONDIA a dela: `.sidebar` e `.toc` tinham `scrollbar-width:none`
    mais `::-webkit-scrollbar{width:0}`. Região que rola sem barra visível não avisa que rola e
@@ -3388,12 +4123,33 @@ button.graph-node-body { cursor:pointer; }
    Ou seja: o par padrão cobre Firefox e Chrome e ainda não cobre o Safari da maioria; o caminho
    webkit cobre Safari e Chrome. Juntos cobrem os três, e onde os dois valem o padrão ganha por
    vir depois. Só cor e espessura — nada de desenhar seta ou canto. */
-.carousel-track,.code-block,.combobox-popup,.command-palette,.dialog,.drawer,.log-stream,.notification-list,.sidebar,.table-region,.table-wrap,.toc {
+.carousel-track,.code-block,.combobox-popup,.command-palette,.dialog,.dialog-body,.drawer,.log-stream,.notification-list,.sidebar,.table-region,.table-wrap,.toc {
   scrollbar-width:thin; scrollbar-color:var(--border-strong) transparent;
 }
-.carousel-track::-webkit-scrollbar,.code-block::-webkit-scrollbar,.combobox-popup::-webkit-scrollbar,.command-palette::-webkit-scrollbar,.dialog::-webkit-scrollbar,.drawer::-webkit-scrollbar,.log-stream::-webkit-scrollbar,.notification-list::-webkit-scrollbar,.sidebar::-webkit-scrollbar,.table-region::-webkit-scrollbar,.table-wrap::-webkit-scrollbar,.toc::-webkit-scrollbar { inline-size:var(--space-2); block-size:var(--space-2); }
-.carousel-track::-webkit-scrollbar-track,.code-block::-webkit-scrollbar-track,.combobox-popup::-webkit-scrollbar-track,.command-palette::-webkit-scrollbar-track,.dialog::-webkit-scrollbar-track,.drawer::-webkit-scrollbar-track,.log-stream::-webkit-scrollbar-track,.notification-list::-webkit-scrollbar-track,.sidebar::-webkit-scrollbar-track,.table-region::-webkit-scrollbar-track,.table-wrap::-webkit-scrollbar-track,.toc::-webkit-scrollbar-track { background:transparent; }
-.carousel-track::-webkit-scrollbar-thumb,.code-block::-webkit-scrollbar-thumb,.combobox-popup::-webkit-scrollbar-thumb,.command-palette::-webkit-scrollbar-thumb,.dialog::-webkit-scrollbar-thumb,.drawer::-webkit-scrollbar-thumb,.log-stream::-webkit-scrollbar-thumb,.notification-list::-webkit-scrollbar-thumb,.sidebar::-webkit-scrollbar-thumb,.table-region::-webkit-scrollbar-thumb,.table-wrap::-webkit-scrollbar-thumb,.toc::-webkit-scrollbar-thumb { background:var(--border-strong); border-radius:var(--radius-control); }
+.carousel-track::-webkit-scrollbar,.code-block::-webkit-scrollbar,.combobox-popup::-webkit-scrollbar,.command-palette::-webkit-scrollbar,.dialog::-webkit-scrollbar,.dialog-body::-webkit-scrollbar,.drawer::-webkit-scrollbar,.log-stream::-webkit-scrollbar,.notification-list::-webkit-scrollbar,.sidebar::-webkit-scrollbar,.table-region::-webkit-scrollbar,.table-wrap::-webkit-scrollbar,.toc::-webkit-scrollbar { inline-size:var(--space-2); block-size:var(--space-2); }
+.carousel-track::-webkit-scrollbar-track,.code-block::-webkit-scrollbar-track,.combobox-popup::-webkit-scrollbar-track,.command-palette::-webkit-scrollbar-track,.dialog::-webkit-scrollbar-track,.dialog-body::-webkit-scrollbar-track,.drawer::-webkit-scrollbar-track,.log-stream::-webkit-scrollbar-track,.notification-list::-webkit-scrollbar-track,.sidebar::-webkit-scrollbar-track,.table-region::-webkit-scrollbar-track,.table-wrap::-webkit-scrollbar-track,.toc::-webkit-scrollbar-track { background:transparent; }
+.carousel-track::-webkit-scrollbar-thumb,.code-block::-webkit-scrollbar-thumb,.combobox-popup::-webkit-scrollbar-thumb,.command-palette::-webkit-scrollbar-thumb,.dialog::-webkit-scrollbar-thumb,.dialog-body::-webkit-scrollbar-thumb,.drawer::-webkit-scrollbar-thumb,.log-stream::-webkit-scrollbar-thumb,.notification-list::-webkit-scrollbar-thumb,.sidebar::-webkit-scrollbar-thumb,.table-region::-webkit-scrollbar-thumb,.table-wrap::-webkit-scrollbar-thumb,.toc::-webkit-scrollbar-thumb { background:var(--border-strong); border-radius:var(--radius-control); }
+/* A LATERAL é a exceção (0.32.0; o Victor, 13/10/2026, olhando a da documentação da referência: a barra
+   "só aparece se o mouse fica em cima do sidebar e ela é clarinha" — e, sobre o padrão, "pode alterar o
+   atual para ser claro e sumir a rolagem"). A barra continua NATIVA e continua lá — a largura fina não
+   muda, então nada pula quando ela aparece; parada, o polegar é transparente. Ela aparece:
+     - com o ponteiro em cima da lateral (é quando quem usa mouse vai arrastá-la);
+     - com o foco do teclado dentro dela (quem navega com Tab vê que a lista rola);
+     - sempre, em tela sem ponteiro que paire (`hover: none`), onde o "em cima" não existe.
+   A cor sai da escala da LATERAL, não da página: é o texto dela, esmaecido.
+   O desenho de antes — a barra sempre à vista, na cor de borda forte — não saiu: é a variante
+   `scrollbar="visible"` (`.sidebar-scrollbar-visible`), para quem precisa da barra o tempo todo. */
+.sidebar { scrollbar-color:transparent transparent; }
+.sidebar::-webkit-scrollbar-thumb { background:transparent; }
+.sidebar:is(:hover,:focus-within) { scrollbar-color:color-mix(in oklab, var(--sidebar-foreground) 45%, transparent) transparent; }
+.sidebar:is(:hover,:focus-within)::-webkit-scrollbar-thumb { background:color-mix(in oklab, var(--sidebar-foreground) 45%, transparent); }
+@media (hover: none) {
+  .sidebar { scrollbar-color:color-mix(in oklab, var(--sidebar-foreground) 45%, transparent) transparent; }
+  .sidebar::-webkit-scrollbar-thumb { background:color-mix(in oklab, var(--sidebar-foreground) 45%, transparent); }
+}
+/* Duas classes, depois das de cima: ganha do "em cima" e do "sem ponteiro" com a mesma força, pela ordem. */
+.sidebar.sidebar-scrollbar-visible { scrollbar-color:var(--border-strong) transparent; }
+.sidebar.sidebar-scrollbar-visible::-webkit-scrollbar-thumb { background:var(--border-strong); }
 
 /* ========================================================================== */
 /* 99. EIXO RESPONSIVO — a infraestrutura do G-AXIS-04                        */
@@ -3439,13 +4195,14 @@ button.graph-node-body { cursor:pointer; }
 @property --step-icon { syntax:"*"; inherits:false; }
 @property --step-qr { syntax:"*"; inherits:false; }
 @property --step-avatar-fs { syntax:"*"; inherits:false; }
+@property --step-avatar { syntax:"*"; inherits:false; }
 
 /* o passo de escala, genérico: qualquer peça que leia `--step-*` obedece. `md` também tem
    classe, porque um responsivo precisa poder dizer `md` como valor base. */
 .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); }
-.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); }
-.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; }
-.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; }
+.size-sm { --step-h:var(--control-h-sm);--step-fs:var(--text-sm);--step-gap:8px;--step-px:var(--space-3);--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);--step-avatar:var(--space-8); }
+.size-md { --step-h:var(--control-h-md);--step-fs:var(--text-sm);--step-gap:8px;--step-px:var(--space-4);--step-field-px:var(--space-3);--step-select-pe:38px;--step-icon:var(--icon-md);--step-qr:10rem;--step-avatar-fs:var(--text-sm);--step-avatar:var(--space-10); }
+.size-lg { --step-h:var(--control-h-lg);--step-fs:var(--text-base);--step-gap:8px;--step-px:var(--space-4);--step-field-px:var(--space-4);--step-select-pe:calc(var(--space-10) + var(--space-1));--step-icon:var(--icon-lg);--step-qr:15rem;--step-avatar-fs:var(--text-base);--step-avatar:var(--space-12); }
 .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); }
 
 /* CONTÊINER NOMEADO. Sem nome, `@container` casa com o ancestral mais próximo que for contêiner
@@ -3454,19 +4211,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); } .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; } }
+@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:var(--space-3);--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);--step-avatar:var(--space-8)} .vp-2xs\:size-md{--step-h:var(--control-h-md);--step-fs:var(--text-sm);--step-gap:8px;--step-px:var(--space-4);--step-field-px:var(--space-3);--step-select-pe:38px;--step-icon:var(--icon-md);--step-qr:10rem;--step-avatar-fs:var(--text-sm);--step-avatar:var(--space-10)} .vp-2xs\:size-lg{--step-h:var(--control-h-lg);--step-fs:var(--text-base);--step-gap:8px;--step-px:var(--space-4);--step-field-px:var(--space-4);--step-select-pe:calc(var(--space-10) + var(--space-1));--step-icon:var(--icon-lg);--step-qr:15rem;--step-avatar-fs:var(--text-base);--step-avatar:var(--space-12)} .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; --btn-group-h:0; --btn-group-v:var(--radius-full); --btn-group-sep-i:25%; --btn-group-sep-b:0; --btn-group-sep-w:50%; --btn-group-sep-h:var(--border-width); --btn-group-bi:var(--border-width); --btn-group-bb:0; } .vp-2xs\:btn-group-horizontal { flex-direction:row; align-items:center; --btn-group-h:var(--radius-full); --btn-group-v:0; --btn-group-sep-i:0; --btn-group-sep-b:25%; --btn-group-sep-w:var(--border-width); --btn-group-sep-h:50%; --btn-group-bi:0; --btn-group-bb:var(--border-width); } .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:var(--space-3);--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);--step-avatar:var(--space-8)} .vp-xs\:size-md{--step-h:var(--control-h-md);--step-fs:var(--text-sm);--step-gap:8px;--step-px:var(--space-4);--step-field-px:var(--space-3);--step-select-pe:38px;--step-icon:var(--icon-md);--step-qr:10rem;--step-avatar-fs:var(--text-sm);--step-avatar:var(--space-10)} .vp-xs\:size-lg{--step-h:var(--control-h-lg);--step-fs:var(--text-base);--step-gap:8px;--step-px:var(--space-4);--step-field-px:var(--space-4);--step-select-pe:calc(var(--space-10) + var(--space-1));--step-icon:var(--icon-lg);--step-qr:15rem;--step-avatar-fs:var(--text-base);--step-avatar:var(--space-12)} .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; --btn-group-h:0; --btn-group-v:var(--radius-full); --btn-group-sep-i:25%; --btn-group-sep-b:0; --btn-group-sep-w:50%; --btn-group-sep-h:var(--border-width); --btn-group-bi:var(--border-width); --btn-group-bb:0; } .vp-xs\:btn-group-horizontal { flex-direction:row; align-items:center; --btn-group-h:var(--radius-full); --btn-group-v:0; --btn-group-sep-i:0; --btn-group-sep-b:25%; --btn-group-sep-w:var(--border-width); --btn-group-sep-h:50%; --btn-group-bi:0; --btn-group-bb:var(--border-width); } .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:var(--space-3);--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);--step-avatar:var(--space-8)} .vp-sm\:size-md{--step-h:var(--control-h-md);--step-fs:var(--text-sm);--step-gap:8px;--step-px:var(--space-4);--step-field-px:var(--space-3);--step-select-pe:38px;--step-icon:var(--icon-md);--step-qr:10rem;--step-avatar-fs:var(--text-sm);--step-avatar:var(--space-10)} .vp-sm\:size-lg{--step-h:var(--control-h-lg);--step-fs:var(--text-base);--step-gap:8px;--step-px:var(--space-4);--step-field-px:var(--space-4);--step-select-pe:calc(var(--space-10) + var(--space-1));--step-icon:var(--icon-lg);--step-qr:15rem;--step-avatar-fs:var(--text-base);--step-avatar:var(--space-12)} .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; --btn-group-h:0; --btn-group-v:var(--radius-full); --btn-group-sep-i:25%; --btn-group-sep-b:0; --btn-group-sep-w:50%; --btn-group-sep-h:var(--border-width); --btn-group-bi:var(--border-width); --btn-group-bb:0; } .vp-sm\:btn-group-horizontal { flex-direction:row; align-items:center; --btn-group-h:var(--radius-full); --btn-group-v:0; --btn-group-sep-i:0; --btn-group-sep-b:25%; --btn-group-sep-w:var(--border-width); --btn-group-sep-h:50%; --btn-group-bi:0; --btn-group-bb:var(--border-width); } .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:var(--space-3);--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);--step-avatar:var(--space-8)} .vp-md\:size-md{--step-h:var(--control-h-md);--step-fs:var(--text-sm);--step-gap:8px;--step-px:var(--space-4);--step-field-px:var(--space-3);--step-select-pe:38px;--step-icon:var(--icon-md);--step-qr:10rem;--step-avatar-fs:var(--text-sm);--step-avatar:var(--space-10)} .vp-md\:size-lg{--step-h:var(--control-h-lg);--step-fs:var(--text-base);--step-gap:8px;--step-px:var(--space-4);--step-field-px:var(--space-4);--step-select-pe:calc(var(--space-10) + var(--space-1));--step-icon:var(--icon-lg);--step-qr:15rem;--step-avatar-fs:var(--text-base);--step-avatar:var(--space-12)} .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; --btn-group-h:0; --btn-group-v:var(--radius-full); --btn-group-sep-i:25%; --btn-group-sep-b:0; --btn-group-sep-w:50%; --btn-group-sep-h:var(--border-width); --btn-group-bi:var(--border-width); --btn-group-bb:0; } .vp-md\:btn-group-horizontal { flex-direction:row; align-items:center; --btn-group-h:var(--radius-full); --btn-group-v:0; --btn-group-sep-i:0; --btn-group-sep-b:25%; --btn-group-sep-w:var(--border-width); --btn-group-sep-h:50%; --btn-group-bi:0; --btn-group-bb:var(--border-width); } .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:var(--space-3);--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);--step-avatar:var(--space-8)} .vp-lg\:size-md{--step-h:var(--control-h-md);--step-fs:var(--text-sm);--step-gap:8px;--step-px:var(--space-4);--step-field-px:var(--space-3);--step-select-pe:38px;--step-icon:var(--icon-md);--step-qr:10rem;--step-avatar-fs:var(--text-sm);--step-avatar:var(--space-10)} .vp-lg\:size-lg{--step-h:var(--control-h-lg);--step-fs:var(--text-base);--step-gap:8px;--step-px:var(--space-4);--step-field-px:var(--space-4);--step-select-pe:calc(var(--space-10) + var(--space-1));--step-icon:var(--icon-lg);--step-qr:15rem;--step-avatar-fs:var(--text-base);--step-avatar:var(--space-12)} .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; --btn-group-h:0; --btn-group-v:var(--radius-full); --btn-group-sep-i:25%; --btn-group-sep-b:0; --btn-group-sep-w:50%; --btn-group-sep-h:var(--border-width); --btn-group-bi:var(--border-width); --btn-group-bb:0; } .vp-lg\:btn-group-horizontal { flex-direction:row; align-items:center; --btn-group-h:var(--radius-full); --btn-group-v:0; --btn-group-sep-i:0; --btn-group-sep-b:25%; --btn-group-sep-w:var(--border-width); --btn-group-sep-h:50%; --btn-group-bi:0; --btn-group-bb:var(--border-width); } .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:var(--space-3);--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);--step-avatar:var(--space-8)} .vp-xl\:size-md{--step-h:var(--control-h-md);--step-fs:var(--text-sm);--step-gap:8px;--step-px:var(--space-4);--step-field-px:var(--space-3);--step-select-pe:38px;--step-icon:var(--icon-md);--step-qr:10rem;--step-avatar-fs:var(--text-sm);--step-avatar:var(--space-10)} .vp-xl\:size-lg{--step-h:var(--control-h-lg);--step-fs:var(--text-base);--step-gap:8px;--step-px:var(--space-4);--step-field-px:var(--space-4);--step-select-pe:calc(var(--space-10) + var(--space-1));--step-icon:var(--icon-lg);--step-qr:15rem;--step-avatar-fs:var(--text-base);--step-avatar:var(--space-12)} .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; --btn-group-h:0; --btn-group-v:var(--radius-full); --btn-group-sep-i:25%; --btn-group-sep-b:0; --btn-group-sep-w:50%; --btn-group-sep-h:var(--border-width); --btn-group-bi:var(--border-width); --btn-group-bb:0; } .vp-xl\:btn-group-horizontal { flex-direction:row; align-items:center; --btn-group-h:var(--radius-full); --btn-group-v:0; --btn-group-sep-i:0; --btn-group-sep-b:25%; --btn-group-sep-w:var(--border-width); --btn-group-sep-h:50%; --btn-group-bi:0; --btn-group-bb:var(--border-width); } .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:var(--space-3);--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);--step-avatar:var(--space-8)} .vp-2xl\:size-md{--step-h:var(--control-h-md);--step-fs:var(--text-sm);--step-gap:8px;--step-px:var(--space-4);--step-field-px:var(--space-3);--step-select-pe:38px;--step-icon:var(--icon-md);--step-qr:10rem;--step-avatar-fs:var(--text-sm);--step-avatar:var(--space-10)} .vp-2xl\:size-lg{--step-h:var(--control-h-lg);--step-fs:var(--text-base);--step-gap:8px;--step-px:var(--space-4);--step-field-px:var(--space-4);--step-select-pe:calc(var(--space-10) + var(--space-1));--step-icon:var(--icon-lg);--step-qr:15rem;--step-avatar-fs:var(--text-base);--step-avatar:var(--space-12)} .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; --btn-group-h:0; --btn-group-v:var(--radius-full); --btn-group-sep-i:25%; --btn-group-sep-b:0; --btn-group-sep-w:50%; --btn-group-sep-h:var(--border-width); --btn-group-bi:var(--border-width); --btn-group-bb:0; } .vp-2xl\:btn-group-horizontal { flex-direction:row; align-items:center; --btn-group-h:var(--radius-full); --btn-group-v:0; --btn-group-sep-i:0; --btn-group-sep-b:25%; --btn-group-sep-w:var(--border-width); --btn-group-sep-h:50%; --btn-group-bi:0; --btn-group-bb:var(--border-width); } .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); } .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; } }
+@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:var(--space-3);--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);--step-avatar:var(--space-8)} .ct-2xs\:size-md{--step-h:var(--control-h-md);--step-fs:var(--text-sm);--step-gap:8px;--step-px:var(--space-4);--step-field-px:var(--space-3);--step-select-pe:38px;--step-icon:var(--icon-md);--step-qr:10rem;--step-avatar-fs:var(--text-sm);--step-avatar:var(--space-10)} .ct-2xs\:size-lg{--step-h:var(--control-h-lg);--step-fs:var(--text-base);--step-gap:8px;--step-px:var(--space-4);--step-field-px:var(--space-4);--step-select-pe:calc(var(--space-10) + var(--space-1));--step-icon:var(--icon-lg);--step-qr:15rem;--step-avatar-fs:var(--text-base);--step-avatar:var(--space-12)} .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; --btn-group-h:0; --btn-group-v:var(--radius-full); --btn-group-sep-i:25%; --btn-group-sep-b:0; --btn-group-sep-w:50%; --btn-group-sep-h:var(--border-width); --btn-group-bi:var(--border-width); --btn-group-bb:0; } .ct-2xs\:btn-group-horizontal { flex-direction:row; align-items:center; --btn-group-h:var(--radius-full); --btn-group-v:0; --btn-group-sep-i:0; --btn-group-sep-b:25%; --btn-group-sep-w:var(--border-width); --btn-group-sep-h:50%; --btn-group-bi:0; --btn-group-bb:var(--border-width); } .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:var(--space-3);--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);--step-avatar:var(--space-8)} .ct-xs\:size-md{--step-h:var(--control-h-md);--step-fs:var(--text-sm);--step-gap:8px;--step-px:var(--space-4);--step-field-px:var(--space-3);--step-select-pe:38px;--step-icon:var(--icon-md);--step-qr:10rem;--step-avatar-fs:var(--text-sm);--step-avatar:var(--space-10)} .ct-xs\:size-lg{--step-h:var(--control-h-lg);--step-fs:var(--text-base);--step-gap:8px;--step-px:var(--space-4);--step-field-px:var(--space-4);--step-select-pe:calc(var(--space-10) + var(--space-1));--step-icon:var(--icon-lg);--step-qr:15rem;--step-avatar-fs:var(--text-base);--step-avatar:var(--space-12)} .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; --btn-group-h:0; --btn-group-v:var(--radius-full); --btn-group-sep-i:25%; --btn-group-sep-b:0; --btn-group-sep-w:50%; --btn-group-sep-h:var(--border-width); --btn-group-bi:var(--border-width); --btn-group-bb:0; } .ct-xs\:btn-group-horizontal { flex-direction:row; align-items:center; --btn-group-h:var(--radius-full); --btn-group-v:0; --btn-group-sep-i:0; --btn-group-sep-b:25%; --btn-group-sep-w:var(--border-width); --btn-group-sep-h:50%; --btn-group-bi:0; --btn-group-bb:var(--border-width); } .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:var(--space-3);--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);--step-avatar:var(--space-8)} .ct-sm\:size-md{--step-h:var(--control-h-md);--step-fs:var(--text-sm);--step-gap:8px;--step-px:var(--space-4);--step-field-px:var(--space-3);--step-select-pe:38px;--step-icon:var(--icon-md);--step-qr:10rem;--step-avatar-fs:var(--text-sm);--step-avatar:var(--space-10)} .ct-sm\:size-lg{--step-h:var(--control-h-lg);--step-fs:var(--text-base);--step-gap:8px;--step-px:var(--space-4);--step-field-px:var(--space-4);--step-select-pe:calc(var(--space-10) + var(--space-1));--step-icon:var(--icon-lg);--step-qr:15rem;--step-avatar-fs:var(--text-base);--step-avatar:var(--space-12)} .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; --btn-group-h:0; --btn-group-v:var(--radius-full); --btn-group-sep-i:25%; --btn-group-sep-b:0; --btn-group-sep-w:50%; --btn-group-sep-h:var(--border-width); --btn-group-bi:var(--border-width); --btn-group-bb:0; } .ct-sm\:btn-group-horizontal { flex-direction:row; align-items:center; --btn-group-h:var(--radius-full); --btn-group-v:0; --btn-group-sep-i:0; --btn-group-sep-b:25%; --btn-group-sep-w:var(--border-width); --btn-group-sep-h:50%; --btn-group-bi:0; --btn-group-bb:var(--border-width); } .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:var(--space-3);--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);--step-avatar:var(--space-8)} .ct-md\:size-md{--step-h:var(--control-h-md);--step-fs:var(--text-sm);--step-gap:8px;--step-px:var(--space-4);--step-field-px:var(--space-3);--step-select-pe:38px;--step-icon:var(--icon-md);--step-qr:10rem;--step-avatar-fs:var(--text-sm);--step-avatar:var(--space-10)} .ct-md\:size-lg{--step-h:var(--control-h-lg);--step-fs:var(--text-base);--step-gap:8px;--step-px:var(--space-4);--step-field-px:var(--space-4);--step-select-pe:calc(var(--space-10) + var(--space-1));--step-icon:var(--icon-lg);--step-qr:15rem;--step-avatar-fs:var(--text-base);--step-avatar:var(--space-12)} .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; --btn-group-h:0; --btn-group-v:var(--radius-full); --btn-group-sep-i:25%; --btn-group-sep-b:0; --btn-group-sep-w:50%; --btn-group-sep-h:var(--border-width); --btn-group-bi:var(--border-width); --btn-group-bb:0; } .ct-md\:btn-group-horizontal { flex-direction:row; align-items:center; --btn-group-h:var(--radius-full); --btn-group-v:0; --btn-group-sep-i:0; --btn-group-sep-b:25%; --btn-group-sep-w:var(--border-width); --btn-group-sep-h:50%; --btn-group-bi:0; --btn-group-bb:var(--border-width); } .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:var(--space-3);--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);--step-avatar:var(--space-8)} .ct-lg\:size-md{--step-h:var(--control-h-md);--step-fs:var(--text-sm);--step-gap:8px;--step-px:var(--space-4);--step-field-px:var(--space-3);--step-select-pe:38px;--step-icon:var(--icon-md);--step-qr:10rem;--step-avatar-fs:var(--text-sm);--step-avatar:var(--space-10)} .ct-lg\:size-lg{--step-h:var(--control-h-lg);--step-fs:var(--text-base);--step-gap:8px;--step-px:var(--space-4);--step-field-px:var(--space-4);--step-select-pe:calc(var(--space-10) + var(--space-1));--step-icon:var(--icon-lg);--step-qr:15rem;--step-avatar-fs:var(--text-base);--step-avatar:var(--space-12)} .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; --btn-group-h:0; --btn-group-v:var(--radius-full); --btn-group-sep-i:25%; --btn-group-sep-b:0; --btn-group-sep-w:50%; --btn-group-sep-h:var(--border-width); --btn-group-bi:var(--border-width); --btn-group-bb:0; } .ct-lg\:btn-group-horizontal { flex-direction:row; align-items:center; --btn-group-h:var(--radius-full); --btn-group-v:0; --btn-group-sep-i:0; --btn-group-sep-b:25%; --btn-group-sep-w:var(--border-width); --btn-group-sep-h:50%; --btn-group-bi:0; --btn-group-bb:var(--border-width); } .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 >>> */
 }