@aurea-uds/core 0.2.0 → 0.4.0

package/dist/aurea.css

@@ -56,7 +56,7 @@
   --z-modal:80;
   --z-toast:100;
   --sidebar-width:16.5rem;
-  --sidebar-rail:5.5rem;
+  --sidebar-rail:4.25rem;
   --topbar-height:4rem;
   --content-max:102.5rem;
   --breakpoint-sm:640px;
@@ -286,6 +286,20 @@ button,a,[role="button"],input,textarea,select { outline:none; }
 :focus-visible { outline:2px solid var(--focus-strong); outline-offset:2px; box-shadow:none; border-color:var(--focus-strong)!important; }
 button { color:inherit; }
 a { color:var(--primary); text-underline-offset:3px; }
+/* LINK DE TEXTO NO TEMA CLARO — reprovação de WCAG AA que estava latente desde sempre, e que só
+   apareceu quando o catálogo ganhou a primeira página com link em corpo de texto (a do `Prose`,
+   item L5). Medido em 15/08/2026 na página gerada: o amarelo puro sobre a superfície clara dá
+   **1,68:1**, contra os 4,5:1 do AA. Com a correção, **6,92:1**.
+   NÃO é decisão de aparência nova, e é por isso que entra sem interromper o lote: a fórmula, o
+   guarda de tema e a razão já estão neste arquivo, escritos para o `.btn-link-primary` (linha
+   ~247) e para a linguagem de selecionado — "no tema claro o amarelo puro como texto dá 1.6:1,
+   longe dos 4.5:1 do AA, então o rótulo aprofunda com --foreground e segue âmbar". O bare `<a>`
+   simplesmente nunca tinha recebido o mesmo tratamento.
+   `:not([class])` é a parte cirúrgica, e não zelo: sem ele esta regra (0,2,1) passaria por cima
+   de `.btn` (0,1,0), de `.doc-nav a` e de `.toc a`, trocando a cor de componentes que já resolvem
+   a própria. Assim ela alcança exatamente o que está quebrado — o link que o conteúdo escreve —
+   e nenhum outro. Limite declarado: link de conteúdo que carregue classe própria é do consumidor. */
+[data-theme="light"] a:not([class]) { color:color-mix(in oklab, var(--primary) 45%, var(--foreground)); }
 img,svg { display:block; }
 /* O `display:none` que o browser dá pro atributo `hidden` vem da folha do UA e PERDE de
    qualquer `display:` de classe nossa — o painel some do fluxo de acessibilidade mas
@@ -299,6 +313,13 @@ img,svg { display:block; }
 .muted { color:var(--muted-foreground); }
 .stack { display:flex; flex-direction:column; gap:var(--space-4); }
 .cluster { display:flex; align-items:center; flex-wrap:wrap; gap:var(--space-3); }
+/* SEPARATOR. `background` num box de 1px e NÃO `border`: assim a espessura não depende de qual
+   lado do border está escrito, e a mesma classe serve nas duas orientações. `<hr>` chega com
+   margem e borda do navegador — as duas são zeradas aqui, senão a régua vem com folga que ninguém
+   pediu. O vertical precisa de `align-self:stretch` para acompanhar a altura do irmão mais alto, e
+   de um piso: sem `min-height` ele mede ZERO num pai que não define altura, e desaparece. */
+.separator { flex:none; width:100%; height:1px; margin:0; border:0; background:var(--border); }
+.separator-vertical { align-self:stretch; width:1px; height:auto; min-height:var(--space-2); }
 /* Grid: o terceiro primitivo de layout, com o mesmo gap do .stack. A pele nasceu na Fase 11
    (achado A13): o componente existia desde sempre e saía `display:block` — empilhava. Ninguém
    via porque o chrome do catálogo REDEFINIA .grid, então ele parecia pronto na nossa
@@ -322,7 +343,11 @@ img,svg { display:block; }
    26 telas de referência inteiras (aconteceu; o portão visual pegou). Por isso a folga
    entre as caixas sai da MARGEM de cada filho, não de gap/padding no shell. As linhas
    extras do grid nascem sozinhas por auto-placement. */
-.app-shell { min-height:100vh; display:grid; grid-template-columns:var(--sidebar-width) minmax(0,1fr); background:var(--background); }
+.app-shell { --sidebar-track:calc(var(--sidebar-width) + var(--space-4)*2); min-height:100vh; display:grid; grid-template-columns:var(--sidebar-track) minmax(0,1fr); background:var(--background); }
+/* `--sidebar-width` nomeia o PAINEL, não a trilha inteira. A variante flutuante ainda gasta
+   `--space-4` dos dois lados; reservar só o token fazia 264px virarem 232px. A rente não tem
+   margem, então a trilha dela continua sendo o token cru. */
+.app-shell:has(> .sidebar-flush) { --sidebar-track:var(--sidebar-width); }
 /* A base do topo carrega só o ARRANJO; cada variante traz a própria superfície.
    floating = caixa solta (a que já estava) · flush = faixa encostada nas bordas com fio
    embaixo, para o topo virar moldura da janela · pill = cápsula centrada, de cabeçalho
@@ -340,7 +365,41 @@ img,svg { display:block; }
 .topbar .brand { min-height:auto; margin:0; padding:0; border:0; }
 /* altura fixa = janela menos topo e as 3 folgas; assim a caixa parece cheia mesmo com
    poucos itens (é o que as referências mostram) e sobra o que rolar por dentro. */
-.sidebar { --shell-top:calc(var(--topbar-height) + var(--space-4)*2); position:sticky; top:var(--shell-top); align-self:start; height:calc(100vh - var(--shell-top) - var(--space-4)); margin:var(--space-4); display:flex; flex-direction:column; gap:var(--space-1); padding:var(--space-4); overflow:auto; scrollbar-width:none; border:1px solid var(--sidebar-border); border-radius:var(--radius-card); background:var(--sidebar); color:var(--sidebar-foreground); }
+/* E O TETO É O CONTAINER, NÃO A JANELA. A altura acima é da JANELA, e sozinha ela faz a lateral
+   presumir que é dona da tela: dentro de qualquer caixa menor ela calcula 818px, transborda e é
+   CORTADA — medido em 18/08/2026 na prévia do catálogo, 818px dentro de 272px, sem nem rolar.
+   `max-height:100%` contra um pai de altura INDEFINIDA é ignorado, então no `AppShell` (onde a
+   lateral realmente é dona da tela) nada muda — conferido: 818px antes e depois, idêntico. Contra
+   um pai de altura definida ele manda, e a caixa passa a caber. Os `--space-4`*2 descontam a
+   própria margem, senão ela transborda pelo dobro da folga.
+   O intento da altura continua o mesmo: caixa cheia mesmo com poucos itens, e o que sobra rola
+   por dentro (`overflow:auto`, logo abaixo). O que muda é de onde vem o teto. */
+/* O PAINEL DÁ QUASE NADA E A LINHA DÁ O RESTO — o mesmo padrão do `.card:has(> .nav-list)`.
+   Era `--space-4` (16px): o item começava a 17px da borda e ocupava 88% da largura, com o
+   realce flutuando no meio do painel. */
+/* A LATERAL FLUTUA POR PADRÃO — é a identidade desta casa, e o `CLAUDE.md` manda.
+   EM 18/08/2026 O PADRÃO FOI INVERTIDO AQUI, E ESTAVA ERRADO. O Victor abriu exceção para a
+   lateral PODER ser rente; uma sessão leu "abriu exceção" como "troque o padrão". São coisas
+   diferentes, e ele separou as duas em 20/08/2026:
+     "uma coisa é a gente ter o componente outra coisa é usar no nosso próprio projeto,
+      o nosso vai ser tudo flutuante mas isso não impede da gente ter outras variações para
+      as pessoas que nos acharem no npm usarem"
+   E o estrago não foi de gosto: as 106 páginas do catálogo montam por `AppShell`, que chama a
+   `Sidebar` SEM variante — inverter o padrão reescreveu o catálogo inteiro, e quatro baselines
+   de pixel foram regravadas para aceitar. Ver ADR-0034.
+   Esta regra é a de `b0599be`, íntegra: estado conhecido bom, provado pelo portão de pixel em vez
+   de reafinado à mão. */
+.sidebar { --shell-top:calc(var(--topbar-height) + var(--space-4)*2); position:sticky; top:var(--shell-top); align-self:start; height:calc(100vh - var(--shell-top) - var(--space-4)); max-height:calc(100% - var(--space-4)*2); margin:var(--space-4); display:flex; flex-direction:column; gap:var(--space-1); padding:var(--space-1); overflow:auto; scrollbar-width:none; border:1px solid var(--sidebar-border); border-radius:var(--radius-card); background:var(--sidebar); color:var(--sidebar-foreground); }
+/* RENTE É A VARIANTE, e ela existe porque o Victor mediu quatro aplicativos que rodam na mão:
+   Cloudflare, Sophos, o app do Claude e o painel do próprio HeroUI. Nenhum flutua a lateral — ela
+   encosta nas bordas, ocupa a altura toda e se separa do conteúdo por UM TRAÇO, não por um vão.
+   É a ÚNICA exceção à caixa flutuante nesta casa, e não generaliza: card, diálogo e painel seguem
+   flutuando.
+   Ela desfaz exatamente o que a flutuante põe — as duas contas de altura, a margem, o raio e de
+   que lados vem a borda —, e é por isso que a trava de pele exige que as duas MEÇAM diferente:
+   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; }
 /* 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. */
@@ -349,7 +408,10 @@ img,svg { display:block; }
    e do conteúdo é --space-1 (4px), e o --shell-top acompanha. */
 /* flush cola no conteúdo com --space-05 (2px) — o degrau mais apertado da escala, criado
    pra este caso (o Victor aprovou os 2px; tokenizado, não cru). */
-.app-shell-flush .sidebar { --shell-top:calc(var(--topbar-height) + var(--space-05)); margin-block-start:var(--space-05); }
+/* E ela NÃO vale para a lateral rente: `.app-shell-flush .sidebar` é mais específico que
+   `.sidebar-flush` e roubaria dela a margem e o `--shell-top`. Esta regra é sobre o TOPO
+   encostado, não sobre a lateral — a rente já encosta sozinha. */
+.app-shell-flush .sidebar:not(.sidebar-flush) { --shell-top:calc(var(--topbar-height) + var(--space-05)); margin-block-start:var(--space-05); }
 .app-shell-flush .content { margin-block-start:var(--space-05); }
 .content { min-width:0; margin:var(--space-4) var(--space-4) var(--space-4) 0; padding:var(--space-6); border:1px solid var(--border); border-radius:var(--radius-card); background:var(--card); color:var(--card-foreground); }
 /* O topo é presentational — não conhece o conteúdo — então garante o mínimo universal:
@@ -361,13 +423,14 @@ img,svg { display:block; }
    mexer no viewport: o @media não disparava e a nav passava 27px da borda direita, em todas
    as páginas. Quebrar por conteúdo cobre os dois casos e não muda nada quando cabe. */
 .topbar,.topbar > nav { flex-wrap:wrap; }
-/* Colapso do shell abaixo de md (767 = md-1, escala): a lateral deixa de flutuar e de ter
-   altura de janela — empilha acima do conteúdo, que passa a ocupar a largura toda. Sem
-   estado (o off-canvas com botão é refino da Fase 3); o essencial é nunca rolar de lado. */
-/* Abaixo de md o topo QUEBRA em duas linhas em vez de esconder a navegação: perder o acesso
-   a uma área inteira não é colapso responsivo, é bug. A nav vai pra segunda linha, centrada
-   e na largura toda; badge e selo (secundários) seguem escondidos pelos utilitários. */
-@media (max-width:767px) { .app-shell { grid-template-columns:minmax(0,1fr); } .sidebar { position:static; height:auto; } .content { margin-inline-start:var(--space-4); }
+/* Colapso do shell abaixo de lg (1023 = lg-1, escala): a lateral do AppShell deixa o fluxo e
+   vira a gaveta definida abaixo. A regra mira o filho `[popover]` de propósito: uma `Sidebar`
+   standalone dentro de um preview estreito continua sendo o componente inteiro, não herda
+   comportamento do shell que não existe ao redor dela. */
+/* Abaixo de lg o topo QUEBRA em duas linhas em vez de esconder a navegação: perder o acesso
+   a uma área inteira não é colapso responsivo, é bug. A nav vai pra segunda linha, centrada
+   e na largura toda; badge e selo (secundários) seguem escondidos pelos utilitários. */
+@media (max-width:1023px) { .app-shell { grid-template-columns:minmax(0,1fr); } .app-shell > .sidebar[popover] { position:static; height:auto; } .content { margin-inline-start:var(--space-4); }
   .topbar { flex-wrap:wrap; row-gap:var(--space-2); }
   .topbar > nav { order:3; flex-basis:100%; justify-content:center; }
   /* e a nav quebra entre os PRÓPRIOS itens: mandar a barra pra segunda linha não bastava,
@@ -375,12 +438,13 @@ img,svg { display:block; }
   .topbar > nav { flex-wrap:wrap; row-gap:var(--space-1); } }
 
 /* ── GAVETA DE NAVEGAÇÃO (achado A8) ───────────────────────────────────────────────
-   Empilhar a lateral acima do conteúdo passava, no gate de rolagem lateral, e era
+   Empilhar a lateral acima do conteúdo passava, no gate de rolagem lateral, e era
    inutilizável: medido em 375px, o `h1` da página começava 4,6 telas abaixo, atrás dos 65
-   itens da navegação. Abaixo de md ela sai do fluxo e vira gaveta.
-   SEM UMA LINHA DE JS: o <aside> é um popover nativo e o botão do topo é o invoker. O
-   navegador entrega Escape, clique fora para fechar, `aria-expanded` no disparador, a volta
-   do foco ao fechar e o ::backdrop. Baseline desde 04/2025; verificado em 30/07/2026.
+   itens da navegação. Abaixo de lg ela sai do fluxo e vira gaveta — o mesmo corte da
+   referência e o breakpoint `--breakpoint-lg` já publicado pela Aurea.
+   A MECÂNICA é nativa: o <aside> é popover e o botão do topo é o invoker. O navegador entrega
+   Escape, clique fora, `aria-expanded` e ::backdrop; o AppShell normaliza entrada e retorno de
+   foco nos três motores, porque o WebKit não os entregou sozinho (ADR-0019).
    Não-modal de propósito (o foco não fica preso), como o CommandPaletteShell: declarar
    modalidade sem entregá-la é pior que não declarar. */
 .btn.nav-toggle { display:none; }
@@ -394,14 +458,16 @@ img,svg { display:block; }
    Medido: sem esta linha a lateral seguia empilhada em 375px, com o botão já visível.
    O @supports é a rede: em navegador sem popover a regra inteira não aplica, a lateral volta a
    empilhar (o comportamento de antes, feio e usável) em vez de sumir sem botão que a abra. */
-@supports selector(:popover-open) {
-@media (max-width:767px) {
+@supports selector(:popover-open) {
+@media (max-width:1023px) {
   .sidebar[popover]:not(:popover-open) { display:none; }
   .btn.nav-toggle { display:inline-flex; }
   /* altura EXPLÍCITA, não `auto`: medido em 30/07/2026, com `top` e `bottom` postos e
      `height:auto` o Chromium resolveu pela altura do CONTEÚDO (3.498px de lateral rolando a
      página inteira), não pelas âncoras. `dvh` porque a barra do navegador móvel some e volta. */
-  .sidebar[popover]:popover-open { position:fixed; inset-block:var(--space-4); inset-inline-start:var(--space-4); width:min(20rem,calc(100vw - var(--space-8))); height:calc(100dvh - var(--space-4) * 2); margin:0; }
+  /* 296px no teto: `--sidebar-width` (264) + as duas folgas externas (32), a mesma medida
+     do drawer da referência. Em viewport menor, a segunda conta sempre preserva as bordas. */
+  .sidebar[popover]:popover-open { position:fixed; inset-block:var(--space-4); inset-inline-start:var(--space-4); width:min(calc(var(--sidebar-width) + var(--space-4)*2),calc(100vw - var(--space-8))); height:calc(100dvh - var(--space-4) * 2); margin:0; }
   .sidebar[popover]::backdrop { background:var(--overlay); }
 }
 }
@@ -418,7 +484,7 @@ img,svg { display:block; }
 .sidebar-list { display:flex; flex-direction:column; gap:var(--space-1); margin:0; padding:0; list-style:none; }
 /* `width:100%` + `font:inherit` + `border:0`: o item também é <button> quando não navega, e
    sem isto o botão vem com a caixa do navegador e quebra a fila. */
-.sidebar-item { display:flex; align-items:center; gap:var(--space-2); width:100%; min-height:var(--control-h-md); padding:var(--space-1) var(--space-3); border:0; border-radius:var(--radius-control); background:transparent; color:var(--sidebar-foreground); font:inherit; font-size:var(--text-sm); text-align:start; text-decoration:none; cursor:pointer; }
+.sidebar-item { display:flex; align-items:center; gap:var(--space-2); width:100%; min-height:var(--control-h-md); padding:var(--space-1) var(--space-3); border:0; border-radius:calc(var(--radius-card) - var(--space-1)); background:transparent; color:var(--sidebar-foreground); font:inherit; font-size:var(--text-sm); text-align:start; text-decoration:none; cursor:pointer; }
 .sidebar-item .icon { flex:none; opacity:.8; }
 /* min-width:0 é o que deixa o ellipsis funcionar dentro do flex; sem ele o nome longo empurra
    o acessório para fora da caixa em vez de cortar. */
@@ -426,22 +492,216 @@ img,svg { display:block; }
 @media (hover:hover) and (pointer:fine) { .sidebar-item:hover { background:var(--secondary); } }
 .sidebar-item[aria-current] { background:var(--secondary); color:var(--foreground); font-weight:var(--weight-medium); }
 .sidebar-item[aria-current] .icon { opacity:1; }
-.sidebar-group-label { margin:var(--space-3) var(--space-2) var(--space-1); color:var(--subtle-foreground); font-size:var(--text-xs); font-weight:var(--weight-medium); letter-spacing:var(--tracking-widest); text-transform:uppercase; }
+/* Alinha com o TEXTO do item: padding do painel (4) + padding do item (12) = 16px. Com o
+   painel apertado, os 8px de antes deixavam a rubrica fora do prumo da lista. */
+.sidebar-group-label { margin:var(--space-3) var(--space-3) var(--space-1); color:var(--subtle-foreground); font-size:var(--text-xs); font-weight:var(--weight-medium); letter-spacing:var(--tracking-widest); text-transform:uppercase; }
 .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
    sozinho não nomeia nada, e essa é a falha clássica do padrão de trilho. */
 .sidebar-collapsed { padding-inline:var(--space-2); }
-.sidebar-collapsed .sidebar-item { justify-content:center; padding-inline:var(--space-2); }
+/* NO TRILHO O ITEM É QUADRADO E CENTRADO, não uma linha esticada. Medido no fonte da referência
+   em 18/08/2026: `NavButton` com `iconOnly` é `size-9` — 36×36, exatamente o nosso `--control-h-md`.
+   Antes o item herdava `width:100%` e virava 71×36 dentro de um trilho de 88: um retângulo largo
+   que, com o raio de linha, fechava nas pontas e lia como CÁPSULA. Quadrado é o que a referência
+   desenha, e é o que o olho reconhece como botão de ícone. */
+.sidebar-collapsed .sidebar-item { justify-content:center; width:var(--control-h-md); padding-inline:0; margin-inline:auto; }
 .sidebar-collapsed .sidebar-sub { padding-inline-start:0; }
-/* A ÚNICA regra que toca `.app-shell`, e está aqui porque a coluna do grid é do shell: a
-   lateral não consegue encolher a própria coluna.
+/* Estas regras tocam `.app-shell` porque a coluna do grid é do shell: a
+   lateral não consegue encolher a própria trilha. `--sidebar-rail` continua sendo a largura
+   do PAINEL; a flutuante soma as margens na trilha, a rente usa o token cru.
    O `>` NÃO É ENFEITE, e quem achou isso foi o navegador em 06/08/2026. Escrita como
    `:has(.sidebar-collapsed)`, a regra casa com QUALQUER descendente — e a página do catálogo
    que mostra uma lateral recolhida como EXEMPLO, dentro do <main>, recolhia a lateral de
    verdade do documento inteiro. Medido: a coluna do shell saía 88px numa página que não pediu
    nada. Gate nenhum via, porque `sidebar.html` não tem baseline de pixel. */
-.app-shell:has(> .sidebar-collapsed) { grid-template-columns:var(--sidebar-rail) minmax(0,1fr); }
+.app-shell:has(> .sidebar-collapsed) { --sidebar-track:calc(var(--sidebar-rail) + var(--space-4)*2); }
+.app-shell:has(> .sidebar-collapsed.sidebar-flush) { --sidebar-track:var(--sidebar-rail); }
+
+/* ── Navegação inferior — o vocabulário de APLICATIVO ───────────────────────────────
+   Lacuna estrutural medida no `CONSUMIDOR-GARAGEM.md` §4.1: `.topbar` e `.sidebar` são
+   vocabulário de DESKTOP, e aplicativo não navega assim.
+   `sticky` e NÃO `fixed`, e a razão é o catálogo: fixo escapa do contêiner e a prévia
+   cobriria a página inteira — o mesmo defeito que o `:has(> …)` da linha acima pagou.
+   Grudado no fim do fluxo dá o mesmo efeito e degrada para estático sem rolagem.
+   O `max()` do recuo inferior é o que impede a barra de ficar SOB o indicador de tela
+   cheia do iPhone. Ele só tem efeito se o consumidor declarar `viewport-fit=cover` na
+   meta viewport (está na ficha); sem isso `env()` devolve 0 e o `max()` entrega o
+   espaço normal — degrada, não quebra. Nenhuma das nove referências usa isto: medido,
+   `grep -ri safe-area-inset Referencia/` = 0. Veio de pesquisa, pelo BUILDING.md §2
+   passo 4. */
+.bottom-nav { --bottomnav-ring:2rem; --bottomnav-surface:var(--card); position:sticky; bottom:0; z-index:var(--z-sticky); display:flex; gap:var(--space-1); margin:var(--space-4); padding:var(--space-1); padding-bottom:max(var(--space-1),env(safe-area-inset-bottom)); border:1px solid var(--border); border-radius:var(--radius-control); background:var(--card); color:var(--card-foreground); box-shadow:var(--shadow-md); }
+/* `--control-h-lg` e não `--control-h-md`: alvo de toque. O md dá 36px em comfortable e
+   o alvo confortável de dedo é maior — com o recuo, o item renderiza acima de 44px. */
+.bottom-nav-item { flex:1; min-width:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:var(--space-1); min-height:var(--control-h-lg); padding:var(--space-1); border:0; border-radius:var(--radius-control); background:transparent; color:var(--muted-foreground); font:inherit; font-size:var(--text-xs); text-align:center; text-decoration:none; cursor:pointer; }
+.bottom-nav-item .icon { flex:none; opacity:.8; }
+.bottom-nav-label { max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
+/* O CONTADOR PENDURA NO ÍCONE — canto superior da ponta, encostando na borda dele.
+   A primeira versão pendurava no ITEM, com `inset-inline-start:50%`: em barra de coluna passa
+   despercebido, e na variante de LINHA os 50% do item caem no meio do RÓTULO. O Victor achou
+   assim, com o número cobrindo o nome inteiro (17/08/2026).
+   A pesquisa que corrigiu: Material 3 põe o distintivo "sobre o ícone, no canto superior
+   direito", e os guias de barra de abas do iOS dizem o mesmo com a razão junto — encostar na
+   borda é para ser visto, sobrepor conteúdo é hesitação num controle que se usa o tempo todo.
+   `inset-inline-end` e não `right`: o eixo espelha sozinho em RTL, e transform não espelharia.
+   O `min-` da caixa é para o contador ter onde se ancorar quando o item não tem ícone.
+   A CAIXA É `--icon-lg` (24px) e o contador `--space-4` (16px) porque a PROPORÇÃO foi medida
+   em aplicativo que roda: WhatsApp, YouTube, Mercado Livre e Shopee, nos prints do Victor de
+   17/08/2026 — ícone ~24, contador ~16, razão **0,67**. A primeira versão tinha ícone de 16 e
+   contador de 18: razão 1,12, o contador MAIOR que o ícone. Foi o que ele viu e mandou refazer. */
+/* A MOLDURA É FIXA E VALE PARA OS SETE INDICADORES. Medido em 20/08/2026, e quem viu foi o
+   Victor: os três indicadores redondos saíam com a BARRA MAIS LARGA que os outros quatro, porque
+   só eles davam largura à moldura e a largura do item vinha do conteúdo. Trocar de indicador
+   mudava a medida da barra — que é o defeito estrutural que esta reescrita existe para acabar.
+   O achado 8 da auditoria pede a mesma coisa por outro caminho: o contador tem de se ancorar na
+   caixa do ícone e ficar PREVISÍVEL, e caixa que muda de tamanho conforme a variante não é
+   ancoragem previsível. Agora quem pinta é o indicador; quem MEDE é sempre esta regra.
+
+   O NÚMERO É PESQUISADO, e a exigência é do Victor em 20/08/2026: *"vá pesquisar e descubra qual
+   padrão é usado, pesquise não invente medidas"*. Ele pegou 2.25rem saído da minha cabeça.
+   `2rem` = 32px é a ALTURA DO INDICADOR ATIVO do Material 3 (`m3.material.io/components/
+   navigation-bar/specs` e a doc do `material-components-android`: indicador 64×32dp, canto
+   totalmente arredondado, sobre um ícone de 24dp). 24 de ícone dentro de 32 deixa 4 de folga de
+   cada lado, que é a mesma folga de 4dp que o M3 usa entre o indicador e o rótulo.
+   O ALVO DE TOQUE não é este número e continua sendo o `min-height` do item: `--control-h-lg`
+   entrega 42px em comfortable e 48 em spacious, contra os 44pt mínimos da HIG da Apple e os
+   48dp do Material. A moldura é a caixa do DESENHO; o alvo é o item inteiro. */
+.bottom-nav-mark { position:relative; flex:none; display:inline-flex; align-items:center; justify-content:center; width:var(--bottomnav-ring); height:var(--bottomnav-ring); border-radius:var(--radius-control); }
+/* `inline-flex` no envoltório: como `<span>` solto ele é caixa de LINHA, e mede a entrelinha do
+   item (18px) em vez do contador que carrega (16px). A diferença não aparece na tela — aparece
+   na medição, e medição errada é o que faz a razão parecer 0,75 quando é 0,67. */
+.bottom-nav-badge { position:absolute; display:inline-flex; inset-block-start:calc(var(--space-05)*-1); inset-inline-end:calc(var(--space-05)*-1); }
+/* O contador da barra usa `<Badge size="xs">`, e NÃO uma sobrescrita local de `.badge` aqui.
+   A primeira versão sobrescrevia, e o `geometry.spec` reprovou com razão: `.badge` tem altura
+   ÚNICA por contrato, e uma regra contextual fazia o mesmo nome medir 16px numa página e 24px
+   noutra. Tamanho é do componente, não do lugar onde ele cai. */
+/* SEM NÚMERO, É PONTO. Três dos quatro aplicativos medidos usam o ponto puro para "tem coisa
+   nova" — YouTube (Inscrições), WhatsApp (Atualizações e Você). O consumidor pede pelo vazio:
+   `badge: ""`. A cor é a de AVISO e não a da marca, também como nos quatro: o contador não é
+   decoração do item atual, é alerta.
+   ⚠ Ponto não tem nome acessível — não há o que ler. Quem usa ponto põe o sentido no RÓTULO do
+   item (`label: <>Updates <span className="sr-only">(new)</span></>`). Está na ficha. */
+.bottom-nav-badge:empty { width:var(--space-2); height:var(--space-2); border-radius:var(--radius-full); background:var(--primary); }
+/* SEM REALCE DE PASSAR O MOUSE, e isso é decisão do Victor em 20/08/2026: *"essa bola cinza
+   que aparece quando mouse passar em cima pode retirar, é um recurso irrelevante no celular"*.
+   Ele tem razão pelo escopo do componente: esta barra é o chrome de aplicativo de TELEFONE, e o
+   dedo não tem estado de passar por cima. Pior: o realce cinza desenhava a MESMA forma que o
+   indicador `subtle` usa para dizer "você está aqui", então passar o mouse por um item inativo
+   fingia seleção — dois significados no mesmo desenho.
+   O FOCO CONTINUA, e a diferença não é de gosto: `:focus-visible` é o que o teclado enxerga, vem
+   do contrato de foco global e o `geometry.spec` cobra. Tirar hover é tirar enfeite; tirar foco
+   seria tirar acesso. */
+.bottom-nav-item[aria-current] { color:var(--foreground); font-weight:var(--weight-medium); }
+.bottom-nav-item[aria-current] .icon { opacity:1; }
+/* ── A GRAMÁTICA: DOIS EIXOS, E ELES NÃO SE MISTURAM ────────────────────────────────
+   Reescrito em 20/08/2026 pela auditoria de UI/UX do BottomNav que o Victor encomendou.
+   O achado dela não é estético, é ESTRUTURAL: `flat`, `surface`, `pill` e `dock` eram quatro
+   implementações conceitualmente separadas — cada uma dizia "esta é a página atual" com uma
+   linguagem diferente (uma pela cor, outra por cápsula cinza, outra por bloco amarelo), e duas
+   delas escondiam o rótulo. Trocar de variante trocava o MODELO MENTAL do componente, não a
+   forma dele.
+
+   Agora são dois eixos independentes, e é isso que faz variante ser variante:
+
+   • LAYOUT (a barra)   — `floating` (padrão, pílula solta) e `edge` (encostada, fio em cima).
+   • INDICADOR (o item) — a FORMA que marca o atual. A SEMÂNTICA é sempre a mesma: ouro.
+
+   O que TODO indicador compartilha, e por isso vive aqui em cima e não dentro de cada um:
+   altura de alvo, moldura do ícone, tipografia, ancoragem do contador, rótulo sempre visível.
+   A auditoria pedia exatamente isso — "a variante altera a forma, não toda a lógica visual".
+
+   O RÓTULO NUNCA SOME em nenhum indicador. Era o defeito 6/7 da auditoria: a `dock` escondia
+   todos e a `pill` escondia os inativos, e as sete telas que o Victor desenhou mostram o rótulo
+   em todos os itens, nas sete. Ícone sozinho só funciona quando o símbolo é inequívoco, e
+   `Garage`/`Fuel`/`Service` não são.
+
+   `--bottomnav-ring` é a moldura do ícone quando o indicador é redondo. Válvula no idioma do
+   `--chart-h` e do `--datagrid-max-h`: quem hospeda decide, o componente não vira prop nova. */
+.bottom-nav-edge { --bottomnav-surface:var(--background); margin:0; padding-inline:0; border-width:1px 0 0; border-radius:0; background:var(--background); box-shadow:none; }
+/* `--primary-emphasis` e não `--primary`: sem fundo, a marca vira TEXTO, e o amarelo puro
+   sobre o claro não se lê. É o mesmo token que o `.badge-primary` já usa por essa razão. */
+.bottom-nav-ind-none .bottom-nav-item[aria-current] { color:var(--primary-emphasis); }
+.bottom-nav-ind-none .bottom-nav-item[aria-current] .icon { opacity:1; }
+/* SUAVE e PÍLULA envolvem ícone E rótulo — muda só o raio. O fundo é o amarelo a 12%, a mesma
+   receita do `.badge-primary`, e não um cinza: a auditoria mediu que a cápsula cinza da antiga
+   `surface` tirava a cor da marca justo do estado mais importante da barra. */
+.bottom-nav-ind-subtle .bottom-nav-item[aria-current],.bottom-nav-ind-pill .bottom-nav-item[aria-current] { background:color-mix(in srgb,var(--primary) 12%,transparent); color:var(--primary-emphasis); }
+.bottom-nav-ind-subtle .bottom-nav-item[aria-current] .icon,.bottom-nav-ind-pill .bottom-nav-item[aria-current] .icon { opacity:1; }
+.bottom-nav-ind-subtle .bottom-nav-item { border-radius:calc(var(--radius-card) - var(--space-1)); }
+.bottom-nav-ind-pill .bottom-nav-item { border-radius:var(--radius-control); }
+/* OS QUATRO REDONDOS envolvem SÓ O ÍCONE, e o rótulo fica embaixo, fora da forma. É o que as
+   quatro telas do Victor mostram e o que o WhatsApp faz no aplicativo que roda; pintar o item
+   inteiro não aparece em nenhum dos dois lugares. A moldura vira quadrado de lado fixo para ser
+   CÍRCULO e não elipse — o rótulo é que é largo, e ele está fora daqui. */
+.bottom-nav-ind-circle .bottom-nav-mark,.bottom-nav-ind-circle-raised .bottom-nav-mark,.bottom-nav-ind-circle-outline .bottom-nav-mark { border-radius:var(--radius-full); }
+.bottom-nav-ind-circle .bottom-nav-item[aria-current],.bottom-nav-ind-circle-raised .bottom-nav-item[aria-current],.bottom-nav-ind-circle-outline .bottom-nav-item[aria-current] { color:var(--primary-emphasis); }
+.bottom-nav-ind-circle .bottom-nav-item[aria-current] .icon,.bottom-nav-ind-circle-raised .bottom-nav-item[aria-current] .icon,.bottom-nav-ind-circle-outline .bottom-nav-item[aria-current] .icon { opacity:1; }
+.bottom-nav-ind-circle .bottom-nav-item[aria-current] .bottom-nav-mark { background:color-mix(in srgb,var(--primary) 14%,transparent); }
+/* ELEVADO: a moldura é uma superfície PRÓPRIA sobre a barra — por isso `--popover` e sombra, e
+   não uma cor de fundo. É o único indicador que usa profundidade em vez de cor para separar. */
+.bottom-nav-ind-circle-raised .bottom-nav-item[aria-current] .bottom-nav-mark { background:var(--popover); box-shadow:var(--shadow-md); }
+.bottom-nav-ind-circle-outline .bottom-nav-item[aria-current] .bottom-nav-mark { border:1px solid var(--primary-emphasis); }
+/* CHEIO é o único que preenche com o amarelo sólido, e por isso é o único que troca o primeiro
+   plano inteiro para `--primary-foreground` — ícone, rótulo e contador juntos dentro da forma.
+   A auditoria recusou a antiga `pill` sólida (achado 5: "o ativo assume presença de CTA"), e a
+   diferença aqui é a FORMA: círculo do tamanho do alvo de toque lê como destino marcado; cápsula
+   larga, esticada pelo rótulo, lê como botão de ação primária dentro da navegação. */
+/* 3.5rem = 56px, e também é número de fora: é a largura do indicador ativo do Material 3
+   Expressive (56dp) e a altura do indicador expandido na mesma doc. É a única forma aqui que
+   envolve ícone E rótulo, então usa a medida expandida e não a de 32. */
+.bottom-nav-ind-circle-bold .bottom-nav-item[aria-current] { flex:none; width:var(--bottomnav-bold,3.5rem); border-radius:var(--radius-full); background:var(--primary); color:var(--primary-foreground); }
+.bottom-nav-ind-circle-bold .bottom-nav-item[aria-current] .icon { opacity:1; }
+/* O contador do `circle-bold` INVERTE, como o do `.btn-primary`, e a volta atrás está medida.
+   Tentei em 20/08/2026 deixá-lo dourado com um anel da cor da barra em volta — é o que as telas
+   do Victor mostram. O gate de contraste reprovou no tema CLARO: sobre o amarelo sólido, nem o
+   fundo do contador nem o anel branco chegam a 3:1. No escuro passava, e é assim que este defeito
+   se esconde. Fio fino não substitui contraste quando as duas cores são claras. */
+.bottom-nav-ind-circle-bold .bottom-nav-item[aria-current] .badge { background:var(--primary-foreground); color:var(--primary); border-color:transparent; }
+.bottom-nav-ind-circle-bold .bottom-nav-item[aria-current] .bottom-nav-badge { color:var(--primary-foreground); }
+
+/* ── A LINHA DE LISTA TOCÁVEL (§4.3 do CONSUMIDOR-GARAGEM) ──────────────────────────
+   A LISTA NÃO PINTA SUPERFÍCIE. Quem dá o card é o `Card`, e repintar aqui seria um segundo
+   lugar para a mesma coisa — a `DIRECTION.md` §3.9 diz que composto REUSA o menor.
+   E SEM DIVISOR entre as linhas, que é decisão e não esquecimento: o realce de linha desta casa
+   é a PÍLULA (é o que `.sidebar-item` faz), e pílula com traço embaixo se contradizem — o traço
+   promete grade, a pílula promete alvo. Quem agrupa é a superfície de fora. */
+.nav-list { display:flex; flex-direction:column; gap:var(--space-05); margin:0; padding:0; list-style:none; }
+/* ── O RAIO DA LINHA SAI DE UMA CONTA, NÃO DE UM NÚMERO ─────────────────────────────
+   `raio do filho = raio do pai − padding do pai`. É o que faz o vão ser CONSTANTE na curva; sem
+   isso a curva da linha e a curva do painel divergem e o olho vê o desalinhamento antes de
+   qualquer medição — foi o Victor que achou, riscando o canto num print (18/08/2026).
+   POR QUE A PÍLULA NÃO SERVE AQUI, medido: `999px` não desenha 999 — o navegador limita à METADE
+   DA ALTURA. Então o raio efetivo da pílula MUDA com a altura da linha: 21px numa linha de um
+   texto, 26,8px numa de dois. Com o card em 22px e padding 4px o erro era de **8,8px**, e nenhum
+   raio de card conserta os dois casos ao mesmo tempo. A conta conserta sempre.
+   Escrito como `calc()` de propósito: se alguém mudar o raio do card ou o padding, a linha segue
+   sozinha. Número cravado divergiria em silêncio. */
+.nav-list-row { display:flex; align-items:center; gap:var(--space-3); width:100%; min-height:var(--control-h-lg); padding:var(--space-2) var(--space-3); border:0; border-radius:calc(var(--radius-card) - var(--space-1)); background:transparent; color:var(--foreground); font:inherit; font-size:var(--text-sm); text-align:start; text-decoration:none; cursor:pointer; }
+.nav-list-row .icon { flex:none; opacity:.8; }
+/* O TEXTO É A ÚNICA TRILHA QUE ENCOLHE, e o par `flex:1` + `min-width:0` é o que faz isso: sem o
+   `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-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
+   cortada deixa de dizer que a linha abre. Quem cede espaço é o texto, que reticencia dizendo. */
+.nav-list-value { flex:none; color:var(--muted-foreground); font-size:var(--text-sm); }
+.nav-list-row .nav-list-chevron { flex:none; opacity:.6; }
+@media (hover:hover) and (pointer:fine) { .nav-list-row:hover { background:var(--secondary); } }
+/* `aria-disabled` e NÃO `:disabled` — a razão está escrita ao lado de `.btn:disabled`, medida em
+   13/08/2026: `:disabled` tira da ordem de foco e quem usa teclado nunca acha a linha. */
+.nav-list-row[aria-disabled="true"] { opacity:.45; cursor:not-allowed; }
+/* O PAINEL DÁ QUASE NADA, A LINHA DÁ O RESTO. Medido em 18/08/2026, depois de o Victor circular a
+   folga no print: com o `--card-pad` de 20px o realce da linha começava a 21px da borda e o texto
+   a 65px, e a linha ocupava só 88% da largura — realce flutuando no meio de uma caixa grande em
+   vez de preencher o painel. `--card-pad` é padding de CONTEÚDO; lista de linhas tocáveis quer
+   outra escala. É a anatomia dos dois exemplos de `NavigationMenu` que ele mandou: o item leva
+   `p-3` (que a nossa linha já tem) e o contêiner quase não leva nada.
+   Filho DIRETO de propósito: um card com layout grande e uma lista pequena dentro não pode perder
+   o padding dele. E `:has()` já é idioma desta folha (quatro usos antes deste). */
+.card:has(> .nav-list) { padding:var(--space-1); }
 
 /* ── Visibilidade responsiva — o mecanismo PADRÃO de colapsar uma barra ─────────────
    Regra do projeto (enraizada): todo layout horizontal que aperta esconde o secundário
@@ -475,8 +735,14 @@ img,svg { display:block; }
 /* 04. COMPONENTES PRIMITIVOS                                                  */
 /* ========================================================================== */
 .btn { --btn-bg:transparent; --btn-fg:var(--foreground); --btn-border:transparent; display:inline-flex; align-items:center; justify-content:center; gap:8px; height:var(--control-h-md); padding:0 15px; border:1px solid var(--btn-border); border-radius:var(--radius-control); background:var(--btn-bg); color:var(--btn-fg); font-size:var(--text-sm); font-weight:var(--weight-medium); line-height:var(--leading-none); text-decoration:none; white-space:nowrap; cursor:pointer; transition:transform var(--duration-fast) var(--ease-standard),background var(--duration-fast),border-color var(--duration-fast),color var(--duration-fast),opacity var(--duration-fast); }
-.btn:hover:not(:disabled) { transform:none; } .btn:active:not(:disabled) { transform:scale(.97); opacity:.9; }
-.btn:disabled { opacity:.45; cursor:not-allowed; }
+.btn:hover:not(:disabled):not([aria-disabled="true"]) { transform:none; } .btn:active:not(:disabled) { transform:scale(.97); opacity:.9; }
+/* Duas formas de "não dá para fazer isto", e a diferença é QUEM alcança a explicação.
+   `:disabled` tira o controle da ordem de foco — medido em 13/08/2026: quem usa teclado nunca
+   chega nele, então uma dica pendurada ali não é lida por ninguém. O embrulho de <span> que a
+   referência do MUI documenta resolve o ponteiro e NÃO resolve o teclado (o span nasce com
+   tabIndex -1, medido). `[aria-disabled="true"]` mantém o controle focável e inerte — é ele
+   que se usa quando existe um PORQUÊ a dizer. A pele é a mesma; o que muda é o alcance. */
+.btn:disabled,.btn[aria-disabled="true"] { opacity:.45; cursor:not-allowed; }
 /* Cinco alturas, todas de token de densidade (autorizado pelo Victor em 24/07/2026). O raio
    é pill em TODAS — o tamanho muda altura e respiro, nunca a forma. Em ponteiro grosso o
    mínimo de 44px lá embaixo pega o xs e o sm, então alvo pequeno não vira alvo impossível. */
@@ -487,22 +753,22 @@ img,svg { display:block; }
 /* Largura total: para rodapé de formulário e tela estreita. Só a largura muda. */
 .btn-block { width:100%; }
 .btn-primary { --btn-bg:var(--primary); --btn-fg:var(--primary-foreground); --btn-border:transparent; }
-.btn-primary:hover:not(:disabled) { --btn-bg:var(--primary-hover); --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; }
-.btn-secondary:hover:not(:disabled) { --btn-bg:var(--secondary-hover); --btn-border:transparent; }
+.btn-secondary: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) { --btn-bg:var(--accent); }
+.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; }
-.btn-ghost:hover:not(:disabled) { --btn-bg:var(--accent); --btn-fg:var(--accent-foreground); }
+.btn-ghost:hover:not(:disabled):not([aria-disabled="true"]) { --btn-bg:var(--accent); --btn-fg:var(--accent-foreground); }
 .btn-danger { --btn-bg:var(--destructive); --btn-fg:var(--destructive-foreground); --btn-border:transparent; }
-.btn-danger:hover:not(:disabled) { --btn-bg:var(--danger-400); }
+.btn-danger:hover:not(:disabled):not([aria-disabled="true"]) { --btn-bg:var(--danger-400); }
 /* Destrutivo em OUTRAS hierarquias: apagar não é sempre a ação principal da tela. O tom é o
    mesmo (--destructive); o que muda é o peso. No claro o vermelho puro como texto não chega
    a 4.5:1, então aprofunda com --foreground — mesmo tratamento do amarelo. */
 .btn-danger-outline { --btn-bg:transparent; --btn-fg:var(--destructive); --btn-border:var(--destructive); }
-.btn-danger-outline:hover:not(:disabled) { --btn-bg:color-mix(in oklab, var(--destructive) 14%, transparent); }
+.btn-danger-outline:hover:not(:disabled):not([aria-disabled="true"]) { --btn-bg:color-mix(in oklab, var(--destructive) 14%, transparent); }
 .btn-danger-ghost { --btn-bg:transparent; --btn-fg:var(--destructive); --btn-border:transparent; }
-.btn-danger-ghost:hover:not(:disabled) { --btn-bg:color-mix(in oklab, var(--destructive) 14%, transparent); }
+.btn-danger-ghost:hover:not(:disabled):not([aria-disabled="true"]) { --btn-bg:color-mix(in oklab, var(--destructive) 14%, transparent); }
 [data-theme="light"] .btn-danger-outline,[data-theme="light"] .btn-danger-ghost,[data-theme="light"] .btn-link-danger { --btn-fg:color-mix(in oklab, var(--destructive) 62%, var(--foreground)); }
 /* LINK: aparência de texto, sem cápsula e sem altura de controle — o sublinhado é o que diz
    que é clicável, então ele existe desde o repouso (revelar no hover esconde a affordance).
@@ -511,7 +777,7 @@ img,svg { display:block; }
    medido no catálogo, o "Learn more" é ação isolada dentro de um flex, não link no meio de
    prosa, e media 67×13px. O texto continua onde está — a caixa cresce centrada nele. */
 .btn-link { height:auto; min-height:24px; padding:0; gap:6px; border:0; border-radius:var(--radius-sm); --btn-bg:transparent; --btn-fg:var(--foreground); text-decoration:underline; text-underline-offset:3px; text-decoration-thickness:1px; }
-.btn-link:hover:not(:disabled) { text-decoration-thickness:2px; }
+.btn-link:hover:not(:disabled):not([aria-disabled="true"]) { text-decoration-thickness:2px; }
 .btn-link-primary { --btn-fg:var(--primary); }
 [data-theme="light"] .btn-link-primary { --btn-fg:color-mix(in oklab, var(--primary) 45%, var(--foreground)); }
 .btn-link-danger { --btn-fg:var(--destructive); }
@@ -530,7 +796,7 @@ img,svg { display:block; }
    "ativa", porque ele também anuncia "página atual" pro leitor de tela. O traço é
    ::after, pill, alinhado ao padding do texto; posição pelo eixo bloco (não espelha RTL). */
 .btn-nav { --btn-bg:transparent; --btn-fg:var(--muted-foreground); --btn-border:transparent; }
-.btn-nav:hover:not(:disabled) { --btn-fg:var(--foreground); }
+.btn-nav:hover:not(:disabled):not([aria-disabled="true"]) { --btn-fg:var(--foreground); }
 .btn-icon { width:var(--control-h-md); padding:0; border-radius:var(--radius-md); }
 .btn-icon.btn-xs { width:var(--control-h-xs); border-radius:var(--radius-sm); }
 .btn-icon.btn-sm { width:var(--control-h-sm); border-radius:var(--radius-sm); } .btn-icon.btn-lg { width:var(--control-h-lg); border-radius:var(--radius-md); }
@@ -590,6 +856,10 @@ img,svg { display:block; }
 /* 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))); }
 .input-wrap { position:relative; } .input-wrap>.icon { position:absolute; inset-inline-start:12px; top:50%; transform:translateY(-50%); color:var(--subtle-foreground); pointer-events:none; } .input-wrap .input { padding-inline-start:40px; }
+/* 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); }
 .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; }
 .checkbox input,.radio input { position:absolute; opacity:0; pointer-events:none; }
@@ -637,17 +907,81 @@ 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 { display:inline-flex; align-items: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; }
+.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; }
 /* 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. */
 .badge .icon { width:var(--icon-sm); height:var(--icon-sm); }
-.badge-primary { color:var(--primary-emphasis); border-color:var(--primary-outline); background:color-mix(in srgb,var(--primary) 10%,transparent); }
+.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); }
+/* 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; }
+.badge-image { flex:none; width:var(--space-4); height:var(--space-4); border-radius:var(--radius-full); object-fit:cover; }
+.badge-dismiss { display:inline-flex; align-items:center; justify-content:center; flex:none; width:var(--space-4); height:var(--space-4); margin-inline-end:calc(var(--space-1)*-1); padding:0; border:0; border-radius:var(--radius-full); background:transparent; color:inherit; cursor:pointer; }
+.badge-dismiss:hover { background:color-mix(in srgb,currentColor 16%,transparent); }
+.badge-dismiss .icon { width:var(--space-3); height:var(--space-3); }
 
-.badge-success { color:var(--success-400); background:var(--success-bg); border-color:color-mix(in srgb,var(--success-400) 35%,var(--border)); }
-.badge-warning { color:var(--warning-400); background:var(--warning-bg); border-color:color-mix(in srgb,var(--warning-400) 35%,var(--border)); }
-.badge-danger { color:var(--danger-400); background:var(--danger-bg); border-color:color-mix(in srgb,var(--danger-400) 35%,var(--border)); }
-.badge-info,.badge-running { color:var(--info-400); background:var(--info-bg); border-color:color-mix(in srgb,var(--info-400) 35%,var(--border)); }
+/* ── O BADGE SOBREPOSTO — contador no canto de outra coisa ──────────────────────────
+   Anatomia da `Badge.js` da MUI, medida no fonte: raiz `relative/inline-flex/flex-shrink:0`,
+   o contador `absolute` com `z-index:1`, e o deslocamento do canto valendo **0 para caixa
+   quadrada e 14% para redonda** — é `overlap`, e sem ele o contador de um avatar fica solto
+   fora do círculo.
+   O ANEL DE RECORTE é o que faltava e o que fazia parecer sujo: um fio da cor da superfície
+   entre o contador e o que está atrás. Três fontes independentes: `ring-[1.5px] ring-bg-primary`
+   da Untitled UI, `border-background border-2` do ReUI e `box-shadow: 0 0 0 2px background.paper`
+   do exemplo de contato da MUI.
+   A superfície de trás NÃO é adivinhável em CSS — dentro de um card ela é `--card`, não
+   `--background`. Por isso ela é uma propriedade: sobrescreva `--badge-ring` no contêiner. */
+.badge-anchor { position:relative; display:inline-flex; vertical-align:middle; flex-shrink:0; }
+.badge-overlay { --badge-ring:var(--background); --badge-inset:0%; position:absolute; z-index:1; min-height:var(--space-4); padding:0 var(--space-1); box-shadow:0 0 0 var(--space-05) var(--badge-ring); }
+.badge-on-circle { --badge-inset:14%; }
+/* O ponto sozinho não tem conteúdo, então ele precisa de medida própria. */
+.badge-overlay.badge-is-dot { width:var(--space-2); min-width:var(--space-2); height:var(--space-2); min-height:var(--space-2); padding:0; }
+.badge-at-top-end { inset-block-start:var(--badge-inset); inset-inline-end:var(--badge-inset); transform:translate(50%,-50%); }
+.badge-at-top-start { inset-block-start:var(--badge-inset); inset-inline-start:var(--badge-inset); transform:translate(-50%,-50%); }
+.badge-at-bottom-end { inset-block-end:var(--badge-inset); inset-inline-end:var(--badge-inset); transform:translate(50%,50%); }
+.badge-at-bottom-start { inset-block-end:var(--badge-inset); inset-inline-start:var(--badge-inset); transform:translate(-50%,50%); }
+/* `transform` não espelha sozinho, e `inset-inline-*` sim: em RTL o par sai trocado e o
+   contador vai para dentro da caixa. As quatro regras abaixo são o preço disso. */
+.badge-at-top-end:dir(rtl) { transform:translate(-50%,-50%); }
+.badge-at-top-start:dir(rtl) { transform:translate(50%,-50%); }
+.badge-at-bottom-end:dir(rtl) { transform:translate(-50%,50%); }
+.badge-at-bottom-start:dir(rtl) { transform:translate(50%,50%); }
+/* ACESSÓRIO SOBRE A MARCA — o badge INVERTE quando o que está debaixo dele é o amarelo.
+   Achado pelo Victor em 17/08/2026 na barra inferior, e a pergunta obrigatória do CLAUDE.md
+   ("quem mais tem esse problema?") devolveu um defeito ANTIGO e publicado: `.badge-primary`
+   dentro de `.btn-primary` é amarelo translúcido com texto `--primary-emphasis` — medido no
+   navegador, texto `oklch(0.795 0.184 86.047)` sobre fundo `oklch(0.795 0.184 86.047)`.
+   Contraste 1:1, literalmente invisível, e nenhum gate via: check nenhum compara a cor de um
+   filho com a do pai.
+   A inversão é a saída óbvia e a única que não inventa cor nova — o par da marca já existe
+   (`--primary`/`--primary-foreground`) e é o mesmo que o botão usa.
+   O ENVOLTÓRIO leva só a cor de texto, nunca fundo: ele é a caixa de posição do acessório, e
+   pintá-lo desenharia um retângulo atrás de um badge que é pílula. */
+.btn-primary .badge { background:var(--primary-foreground); color:var(--primary); border-color:transparent; }
+/* O `circle-bold` é o único indicador que preenche com o amarelo sólido, então é o único onde
+   o contador cai sobre a cor da marca e precisa da mesma inversão do botão primário. Os outros
+   seis deixam o contador sobre a superfície da barra, onde ele já se lê. */
+
+.badge-success { --badge-accent:var(--success-400); color:var(--success-400); background:var(--success-bg); border-color:color-mix(in srgb,var(--success-400) 35%,var(--border)); }
+.badge-warning { --badge-accent:var(--warning-400); color:var(--warning-400); background:var(--warning-bg); border-color:color-mix(in srgb,var(--warning-400) 35%,var(--border)); }
+.badge-danger { --badge-accent:var(--danger-400); color:var(--danger-400); background:var(--danger-bg); border-color:color-mix(in srgb,var(--danger-400) 35%,var(--border)); }
+.badge-info,.badge-running { --badge-accent:var(--info-400); color:var(--info-400); background:var(--info-bg); border-color:color-mix(in srgb,var(--info-400) 35%,var(--border)); }
+/* ── AS TRÊS ÊNFASES — e elas vêm DEPOIS das variantes de propósito ─────────────────
+   Cada variante declara só o ACENTO; as ênfases saem dele. Antes cada variante escrevia
+   cor + fundo + borda na mão, e uma ênfase nova custaria seis regras novas.
+   A POSIÇÃO NO ARQUIVO É A REGRA, não estilo: `.badge-solid` e `.badge-success` têm a MESMA
+   especificidade (0,1,0), então quem vem depois vence. Escritas antes, as três não faziam
+   nada em quatro das seis variantes — medido no navegador, `solid` e `outline` devolviam o
+   número do `soft`. É a mesma armadilha que o `.banner` e o `.data-list` já pagaram aqui.
+   `--background` como texto do sólido serve aos DOIS temas porque o acento já vira com o
+   tema: `--success-400` é verde CLARO no escuro e verde ESCURO no claro. */
+.badge-solid { background:var(--badge-accent); color:var(--background); border-color:transparent; }
+.badge-outline { background:transparent; color:var(--badge-accent); border-color:var(--badge-accent); }
 .status-dot { width:8px; height:8px; border-radius:50%; background:currentColor; box-shadow:0 0 0 3px color-mix(in srgb,currentColor 14%,transparent); }
 /* Status: condição operacional (DIRECTION §3.6) — NÃO é o pill do Badge; é ponto + rótulo
    solto na linha. A variante pinta o .status (o ponto herda por currentColor) e o rótulo
@@ -688,6 +1022,10 @@ img,svg { display:block; }
 @media (max-width:640px) { .banner { grid-template-columns:auto minmax(0,1fr); } .banner>:last-child { grid-column:2; justify-self:start; } }
 .progress { height:8px; overflow:hidden; border-radius:999px; background:var(--surface-3); }
 .progress>span { display:block; height:100%; border-radius:inherit; background:var(--primary); }
+/* DataState (M3): a região que troca de cara. Ela NÃO desenha nada próprio — só empilha o que
+   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 { animation:skeleton-pulse 1.35s ease-in-out infinite; } @keyframes skeleton-pulse { 50% { opacity:.55; } }
 
@@ -731,7 +1069,16 @@ img,svg { display:block; }
    tabela; `DataGrid` embrulha em `.table-wrap`; e as 3 tabelas da página legada estão todas
    dentro de `.table-wrap`. Nenhuma <table> do repositório fica descoberta — o gate de pixel é
    quem prova, e ele tem de acusar ZERO mudança nas superfícies de tabela. */
-.table-wrap { overflow:auto; border:1px solid var(--border); border-radius:var(--radius-card); background:var(--card); }
+/* `.table-region` entrou nesta regra em 13/08/2026, e a linha acima ("o gate tem de acusar ZERO
+   mudança nas superfícies de tabela") vale para o ESCOPO daquele lote, não para sempre: aqui a
+   mudança de superfície é o pedido. O `Table` embrulhava em `.table-region`, que tinha só
+   `overflow` e `--radius-lg` — sem borda e sem fundo. Resultado na tela: a tabela aparecia solta
+   na página enquanto o `DataGrid`, do lado, tinha a caixa flutuante da marca. Duas peles para a
+   mesma coisa, e a do componente mais simples era a errada.
+   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; }
 .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); }
 .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; }
@@ -760,9 +1107,27 @@ img,svg { display:block; }
 /* DataList: chave/valor em duas colunas. O termo é secundário — mesmo idioma do cabeçalho de
    tabela. Sem a regra (achado A13) o <dl> saía cru: dt e dd empilhados, com o recuo de 40px
    que o navegador dá ao <dd>. */
-.data-list { display:grid; grid-template-columns:max-content minmax(0,1fr); gap:var(--space-2) var(--space-6); margin:0; }
-.data-list dt { color:var(--muted-foreground); }
+/* A coluna do TERMO era `max-content`, que não encolhe nunca: um `dt` comprido empurrava a
+   PÁGINA para fora em telas estreitas — medido em 16/08/2026 a 320px, quando a página de hooks
+   estreou termos de frase inteira e a varredura acusou +179px de rolagem lateral. `auto` sizes
+   igual quando há espaço (por isso nenhuma baseline mudou) e cai para min-content quando não há,
+   deixando o termo quebrar em vez de arrastar o documento. O defeito era do COMPONENTE, não da
+   página nova: o `DataList` é publicado, e quem escrevesse um termo longo levava o mesmo.
+   `auto` foi TENTADO primeiro e não resolveu — medido, não suposto: a trilha `auto` tem
+   max-content como máximo e não encolhe abaixo dele quando o contêiner aperta, e a sobra caiu de
+   179px para 90px em vez de zerar. `minmax(0,max-content)` é o que encolhe: com espaço mede
+   igual ao que media antes (nenhuma baseline mudou), sem espaço o termo quebra. */
+.data-list { display:grid; grid-template-columns:minmax(0,max-content) minmax(0,1fr); gap:var(--space-2) var(--space-6); margin:0; }
+.data-list dt { min-width:0; color:var(--muted-foreground); }
 .data-list dd { min-width:0; margin:0; }
+/* E no ESTREITO ele empilha — a outra metade da correção. Medido a 320px com termos de frase
+   inteira: duas colunas não cabem, o termo resolvia em 164px, a calha comia o resto e a coluna do
+   valor ficava com `0px`, jogando o texto para fora da PÁGINA. Mesmo remédio que `.message` e
+   `.log-line` já usam aqui. A regra mora DEPOIS da base de propósito: escrita antes, ela não
+   valia nada — mídia não soma especificidade, então a base vencia por vir por último. Foi
+   exatamente o que aconteceu na primeira tentativa, e é a armadilha que o comentário do
+   `.banner` lá em cima já registrava. */
+@media (max-width:640px) { .data-list { grid-template-columns:minmax(0,1fr); } }
 /* Timeline: o trilho existia e o PONTO não — `.timeline-dot` media 0×0 (achado A13), então a
    linha do tempo saía com a régua e sem as marcas, e o <ol> ainda mostrava a numeração do
    navegador. Agora os dois derivam do MESMO token: o trilho fica a meio diâmetro do ponto, e
@@ -880,7 +1245,7 @@ img,svg { display:block; }
 .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) { background:var(--secondary); color:var(--foreground); }
+.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; }
 .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); }
@@ -893,7 +1258,7 @@ img,svg { display:block; }
 .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 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:hover:not(:disabled) { background:var(--secondary); }
+.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); }
@@ -946,6 +1311,151 @@ img,svg { display:block; }
 .media-time { padding:0 7px; color:var(--media-muted); font:var(--text-xs) var(--font-code); white-space:nowrap; }
 .media-volume { width:82px; accent-color:var(--primary); }
 
+/* IMAGEM (PLANO-1.0, item L4). A caixa é reservada ANTES do byte chegar — é a mesma razão que o
+   comentário do `--media-ar` acima registra: sem proporção, a imagem mede zero até carregar e a
+   página salta quando ela chega (CLS). O fundo é a superfície do esqueleto, e o bitmap a cobre ao
+   pintar — marcador de carregamento sem uma linha de JavaScript.
+
+   ⚠ NÃO declare `aspect-ratio` aqui, e isto foi MEDIDO em 15/08/2026, não deduzido. A primeira
+   versão desta regra tinha `aspect-ratio:var(--image-ratio,auto)`, e o fallback `auto` PASSA POR
+   CIMA do `aspect-ratio: auto <width> / <height>` que o navegador deriva dos atributos do
+   elemento. Resultado medido numa caixa de 400px: com `width=300 height=200` e sem a prop `ratio`,
+   a imagem saía **400×0** — ou seja, a regra escrita para impedir o salto de layout produzia
+   exatamente o salto. Sem a declaração, o mesmo caso reserva 400×267. Quem tem proporção declarada
+   recebe `aspect-ratio` inline, do componente; quem não tem fica com o comportamento do navegador,
+   que já é o certo. */
+.image { display:block; width:100%; height:auto; object-fit:cover; border-radius:var(--radius-lg); background:var(--surface-3); }
+.image-contain { object-fit:contain; background:transparent; }
+.image-broken { display:grid; place-items:center; color:var(--muted-foreground); }
+
+/* GALERIA (PLANO-1.0, item L2). A grade se adapta sozinha — `auto-fill` com um mínimo, e não um
+   número de colunas —, porque quem sabe quanta largura existe é o contêiner, não o componente.
+   `--gallery-min` é a válvula, no idioma do `--carousel-slide` e do `--qr-size`.
+   O SELECIONADO NÃO INVENTA LINGUAGEM: o ladrilho recebe `.is-selected`, a mesma classe da aba
+   ativa, do item de lateral e do botão alternado — cápsula elevada, rótulo na cor da marca e o
+   fio amarelo embaixo. É a regra "uma linguagem só" deste arquivo, e por isso aqui não há uma
+   segunda maneira de dizer "este está escolhido". O recuo existe para a cápsula aparecer: com
+   `padding:0` o fundo do selecionado fica exatamente sob a foto e não se vê.
+   Foco também não tem regra própria: a global do topo deste arquivo já desenha o anel, e ele é
+   de cor DIFERENTE da seleção — senão focar e escolher viram o mesmo sinal. */
+.gallery { display:grid; grid-template-columns:repeat(auto-fill,minmax(var(--gallery-min,8rem),1fr)); gap:var(--space-3); margin:0; padding:0; list-style:none; }
+.gallery-item { min-width:0; }
+.gallery-tile { display:grid; gap:var(--space-1); width:100%; padding:var(--space-1); border:0; border-radius:var(--radius-lg); font:inherit; text-align:start; cursor:pointer; }
+/* `:not(.is-selected)` e não uma regra de selecionado própria, e a diferença foi MEDIDA em
+   15/08/2026: `.gallery-tile` e `.is-selected` têm a MESMA especificidade, e a do ladrilho vem
+   depois no arquivo — então `background:transparent` matava a cápsula da linguagem da casa e o
+   selecionado saía só com o fio amarelo. Reescrever a cápsula aqui seria a segunda cópia da
+   linguagem "uma linguagem só" existe para impedir; tirar o fundo só de quem NÃO está escolhido
+   deixa a regra de lá governar sem competição. O fundo de botão do navegador precisa morrer de
+   qualquer forma — ele é `buttonface`, não transparente. */
+.gallery-tile:not(.is-selected) { background:transparent; color:var(--muted-foreground); }
+.gallery-caption { font-size:var(--text-sm); }
+
+/* PROSA (PLANO-1.0, item L5). É a PELE do texto longo, não o parser — quem transforma Markdown em
+   elementos é o consumidor. Aqui só se decide como esses elementos se leem.
+
+   ⚠ TODA regra abaixo é ESCOPADA em `.prose`, e isso não é estilo de escrita: é a trava do item, e
+   ela tem uma conta paga atrás. As cinco regras de tabela deste arquivo eram de ELEMENTO e valiam
+   para toda <table> do documento — o calendário nasceu com 720px de largura por causa disso, e
+   nenhum gate viu, porque os checks 15 e 18 comparam CLASSE e seletor de elemento não tem
+   nenhuma. Escrever `blockquote{...}` aqui repetiria o Lote 4 com outro elemento.
+
+   O tamanho sobe para `--text-base`: o corpo do documento é `--text-md` (14px), que serve a
+   interface e é pequeno para ler artigo. A entrelinha é `--leading-relaxed`, que existe no token
+   e não tinha uso. A MEDIDA de linha é `--prose-measure`, no idioma das outras válvulas.
+
+   A FONTE não muda: `--font-editorial` (IBM Plex Serif) existe e está sem uso, e usá-la aqui
+   seria decisão de APARÊNCIA que o BUILDING.md §3.1 manda levar ao Victor com imagem do antes e
+   do depois. Quem quiser serifa na prosa aponta a variável; a Aurea não decide isso sozinha. */
+.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 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); }
+/* `0.9em` e não um token: código dentro do texto se mede em relação à LINHA em que está, e um
+   valor absoluto o deixaria maior que o parágrafo dentro de um h2. É o mesmo motivo pelo qual o
+   `.badge` tem `line-height:1` — geometria que depende do contexto se escreve relativa. */
+.prose code { padding:var(--space-05) var(--space-1); border-radius:var(--radius-xs); background:var(--surface-2); font-family:var(--font-code); font-size:0.9em; }
+.prose pre { overflow-x:auto; padding:var(--space-4); border:1px solid var(--border); border-radius:var(--radius-card); background:var(--surface-2); }
+.prose pre code { padding:0; border-radius:0; background:transparent; font-size:var(--text-sm); }
+.prose img { max-width:100%; height:auto; border-radius:var(--radius-lg); }
+.prose hr { border:0; border-block-start:1px solid var(--border); }
+.prose figcaption { color:var(--muted-foreground); font-size:var(--text-sm); }
+/* A tabela da prosa NÃO é a tabela de dados: sem `min-width:720px`, sem faixa de cabeçalho em
+   caixa alta e sem hover de linha. Uma tabela de três colunas no meio de um artigo não é uma
+   grade — forçá-la a 720px é exatamente o defeito que o calendário sofreu. */
+.prose table { width:100%; border-collapse:collapse; font-size:var(--text-md); }
+.prose th,.prose td { padding:var(--space-2) var(--space-3); text-align:start; border-block-end:1px solid var(--border); }
+.prose th { color:var(--subtle-foreground); font-weight:var(--weight-semibold); }
+
+/* LISTA ORDENÁVEL (PLANO-1.0, item L3). Duas regras aqui não são decoração e quebram
+   comportamento se saírem:
+   • `touch-action:none` na alça — sem ela o navegador rola a página em vez de deixar arrastar, e
+     o componente não funciona em toque nenhum. É o par obrigatório do `setPointerCapture`;
+   • `cursor:grab`/`grabbing`, que é a única affordance de que aquilo se arrasta.
+   O item PEGO se marca com `data-grabbed`, e o sinal é ELEVAÇÃO e borda — não cor sozinha
+   (WCAG 1.4.1), e não a cápsula de `.is-selected`: pego e escolhido são coisas diferentes e não
+   podem falar a mesma língua. */
+.sortable-list { display:grid; gap:var(--space-2); margin:0; padding:0; list-style:none; }
+.sortable-item { display:flex; align-items:center; gap:var(--space-2); padding:var(--space-2) var(--space-3); border:1px solid var(--border); border-radius:var(--radius-lg); background:var(--card); }
+.sortable-item[data-grabbed] { border-color:var(--border-strong); box-shadow:var(--shadow-lg); }
+.sortable-handle { display:grid; place-items:center; min-width:var(--space-6); min-height:var(--space-6); padding:0; border:0; border-radius:var(--radius-sm); background:transparent; color:var(--muted-foreground); cursor:grab; touch-action:none; }
+.sortable-handle[aria-pressed="true"] { cursor:grabbing; color:var(--primary); }
+.sortable-label { min-width:0; }
+
+/* EDITOR POR BLOCOS (PLANO-1.0, item N1). A Aurea é dona da MOLDURA; o texto rico de dentro é do
+   consumidor — ADR-0025, e o comentário do `inputs.tsx` traz a medição inteira.
+   Duas regras aqui são COMPORTAMENTO e não enfeite, as mesmas da lista ordenável, porque o
+   protocolo de arrasto é o mesmo (`useReorder`):
+   • `touch-action:none` na alça — sem ela o navegador rola a página em vez de deixar arrastar, e
+     o componente não funciona em toque nenhum. É o par obrigatório do `setPointerCapture`;
+   • `cursor:grab`/`grabbing`, a única affordance de que aquilo se arrasta.
+   `min-width:0` no corpo NÃO é enfeite tampouco: sem ele um filho largo (imagem, tabela, bloco de
+   código) estoura a coluna do grid em vez de encolher, e a página ganha rolagem lateral — que é
+   exatamente o que o `catalog-sweep` reprova.
+   O raio é `--radius-lg` e não `--radius-card`: bloco é LINHA de uma lista, no mesmo idioma do
+   `.sortable-item`, e não um cartão flutuante. Sai da identidade que já existe, sem decisão de
+   aparência nova. O bloco PEGO se marca com `data-grabbed`, e o sinal é ELEVAÇÃO e borda — não
+   cor sozinha (WCAG 1.4.1). */
+.block-editor { display:grid; gap:var(--space-3); margin:0; padding:0; list-style:none; }
+.block-item { display:grid; grid-template-columns:auto minmax(0,1fr); gap:var(--space-3); padding:var(--space-3); border:1px solid var(--border); border-radius:var(--radius-lg); background:var(--card); }
+.block-item[data-grabbed] { border-color:var(--border-strong); box-shadow:var(--shadow-lg); }
+.block-rail { display:grid; grid-auto-rows:min-content; gap:var(--space-1); }
+.block-handle,.block-remove { display:grid; place-items:center; min-width:var(--space-6); min-height:var(--space-6); padding:0; border:0; border-radius:var(--radius-sm); background:transparent; color:var(--muted-foreground); }
+.block-handle { cursor:grab; touch-action:none; }
+.block-handle[aria-pressed="true"] { cursor:grabbing; color:var(--primary); }
+.block-body { min-width:0; }
+
+/* CARROSSEL (PLANO-1.0, item L1). A pele É o motor: o encaixe, a rolagem por toque, a inércia e
+   as setas de teclado saem de `scroll-snap` num contêiner nativo — o React só descobre em qual
+   slide se está. Por isso estas regras não são decoração, e apagá-las quebra comportamento.
+   `--carousel-slide` é a válvula que faz o caso `multiple` da referência sem uma prop: quantos
+   aparecem por vez é decisão de layout da página, no idioma do `--qr-size` e do `--media-h`.
+   `scroll-behavior:smooth` mora AQUI e não no JavaScript de propósito: `scrollBy` sem `behavior`
+   obedece ao valor computado, e a regra global de `prefers-reduced-motion` deste arquivo já o
+   derruba para `auto` — quem pediu menos movimento recebe menos movimento, sem código novo. */
+.carousel { display:grid; gap:var(--space-3); }
+.carousel-track { display:flex; gap:var(--space-3); overflow-x:auto; overflow-y:hidden; scroll-snap-type:inline mandatory; scroll-behavior:smooth; overscroll-behavior-inline:contain; scrollbar-width:none; }
+.carousel-track::-webkit-scrollbar { width:0; height:0; }
+/* Sem regra de foco própria: a global do topo deste arquivo já dá o anel, e ela usa
+   `--focus-strong` — que é `--primary` no escuro e `--brand-yellow-foreground` no claro. A versão
+   anterior desta linha fixava `--primary` nos dois e teria trocado a cor do foco num deles. */
+.carousel-slide { flex:0 0 var(--carousel-slide,100%); min-width:0; scroll-snap-align:start; }
+.carousel-controls { display:flex; align-items:center; justify-content:center; gap:var(--space-2); }
+.carousel-dots { display:flex; align-items:center; gap:var(--space-1); }
+/* 24×24 de ALVO com 8×8 de desenho: abaixo disso é reprovação do WCAG 2.2 AA (2.5.8), e uma fila
+   de pontos é onde esse erro nasce. O ponto vem do ::before para não custar um elemento nem uma
+   classe a mais — o alvo é o botão inteiro, o desenho é o miolo. */
+.carousel-dot { width:var(--space-6); height:var(--space-6); display:grid; place-items:center; padding:0; border:0; background:transparent; cursor:pointer; }
+.carousel-dot::before { content:""; width:var(--space-2); height:var(--space-2); border-radius:var(--radius-full); background:var(--border); }
+.carousel-dot[aria-current="true"]::before { background:var(--primary); }
+
 /* ========================================================================== */
 /* 08. ÍCONES                                                                  */
 /* ========================================================================== */
@@ -957,10 +1467,28 @@ img,svg { display:block; }
 .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(560px,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); }
 .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; }
+/* 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 de 560px) 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); }
 .drawer-wrap { position:fixed; inset:0; z-index:var(--z-drawer); display:none; background:var(--overlay); } .drawer-wrap.open { display:block; }
 .drawer-backdrop { position:fixed; inset:0; z-index:var(--z-drawer); background:var(--overlay); }
 .drawer { position:fixed; top:0; bottom:0; z-index:var(--z-drawer); width:min(480px,92vw); padding:24px; background:var(--surface-1); box-shadow:var(--shadow-lg); overflow:auto; } .drawer-right { right:0; border-left:1px solid var(--border); } .drawer-left { left:0; border-right:1px solid var(--border); }
 .toast-stack { position:fixed; inset-inline-end:22px; bottom:22px; z-index:var(--z-toast); width:min(360px,calc(100vw - 44px)); display:flex; flex-direction:column; gap:10px; } .toast { display:flex; align-items:center; gap:11px; padding:14px; border:1px solid var(--border); border-radius:var(--radius-lg); background:var(--popover); color:var(--popover-foreground); box-shadow:var(--shadow-md); transition:opacity .28s var(--ease-standard), transform .28s var(--ease-emphasized); } .toast>:first-child { flex:1; min-width:0; } .toast-text { display:flex; flex-direction:column; gap:2px; min-width:0; } .toast[data-starting-style],.toast[data-ending-style] { opacity:0; transform:translateY(12px); }
+/* 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); }
 /* CommandPaletteShell (Fase 11, achado A13). A superfície já existia aqui sob o nome
    `.command` — e `.command` é chrome da página de docs manual: nenhum componente React a
    emite. Ela passava no check 15 por ACIDENTE, porque o rótulo padrão "Type a command…" põe
@@ -977,6 +1505,18 @@ img,svg { display:block; }
 .menu-item { display:flex; align-items:center; gap:10px; width:100%; min-height:var(--control-h-md); padding:0 10px; border:0; border-radius:var(--radius-sm); background:transparent; color:var(--foreground); font:inherit; text-align:start; cursor:pointer; }
 .menu-item[data-highlighted],.menu-item:hover:not([data-disabled]) { background:var(--surface-3); outline:none; }
 .menu-item[data-disabled] { opacity:.5; cursor:not-allowed; }
+/* CommandPalette (M6): a lista dentro da paleta. Reusa `.menu` e `.menu-item` — a paleta nao
+   inventa uma segunda pele de lista, que e o defeito que a `.table-region` cobrou caro. O que se
+   acrescenta e o teto de altura (a lista rola, a caixa nao cresce sem fim) e a linha do item,
+   que tem icone, rotulo que se estica e atalho no fim.
+   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; }
+.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; }
+
 .menu-sep { height:1px; margin:6px 4px; background:var(--border); border:0; }
 /* Combobox: reaproveita .menu/.menu-item; só dimensionamento e a coluna do check são próprios.
    --anchor-width e --available-height vêm do positioner do Base UI. */
@@ -993,6 +1533,10 @@ img,svg { display:block; }
 .combobox-multi:hover { border-color:var(--border); }
 .combobox-multi:focus-within { outline:2px solid var(--focus-strong); outline-offset:2px; border-color:var(--focus-strong); }
 .combobox-multi>.combobox-actions { position:static; inset-inline-end:auto; }
+/* o campo de chips não é `.input`, então a regra de :disabled dos campos não o alcança. Quem
+   marca aqui é o `data-disabled` que o Base UI põe no InputGroup a partir do estado da Root. */
+.combobox-multi[data-disabled] { opacity:.5; cursor:not-allowed; }
+.combobox-multi[data-disabled] .combobox-chip-input { cursor:not-allowed; }
 .combobox-chips { display:flex; flex:1; flex-wrap:wrap; align-items:center; gap:var(--space-2); min-width:0; }
 .combobox-chip { display:inline-flex; align-items:center; gap:var(--space-1); padding-block:var(--space-1); padding-inline:var(--space-3) var(--space-1); background:var(--secondary); color:var(--foreground); border-radius:var(--radius-control); font-size:var(--text-sm); }
 .combobox-chip-remove { display:inline-flex; padding:0; border:0; background:transparent; color:var(--muted-foreground); border-radius:var(--radius-full); cursor:pointer; }
@@ -1371,7 +1915,7 @@ button.graph-node-body { cursor:pointer; }
 /* Padrões compostos Aurea 1.7: blocos de operação, não widgets de domínio. */
 /* 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 { min-height:var(--target-min); } .btn-icon,.media-control { min-width:var(--target-min); } }
+@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); } }
 @media (forced-colors:active) {
   :focus-visible { outline:2px solid CanvasText; outline-offset:2px; box-shadow:none; }
   .badge,.pattern-gallery button[aria-pressed="true"],.device-grid button[aria-pressed="true"] { border:1px solid CanvasText; }
@@ -1380,7 +1924,9 @@ button.graph-node-body { cursor:pointer; }
 
 /* Aurea v1.7 stabilization patch — visual design unchanged. */
 .badge-running{background:var(--success-bg);color:var(--success-400);border-color:color-mix(in oklab,var(--success-400) 32%,transparent)}
-.table-region{overflow:auto;outline:none;border-radius:var(--radius-lg)}
+/* superfície (overflow, borda, fundo, raio) mora junto com a do `.table-wrap` lá em cima — aqui
+   fica só o que é DESTA região: ela é focável, e o anel dela é o box-shadow abaixo. */
+.table-region{outline:none}
 .table-region:focus-visible{box-shadow:0 0 0 3px color-mix(in oklab,var(--focus) 38%,transparent)}
 /* CONTAINER QUERY, e não breakpoint de viewport — Parte D, item D3 (08/08/2026).
    Era `@media (max-width:400px)`, o último dos seis legados do achado M13. Trocar por um degrau

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@aurea-uds/core",
-  "version": "0.2.0",
+  "version": "0.4.0",
   "description": "The Aurea UDS stylesheet and its vanilla behaviour. Import @aurea-uds/fonts/css before this.",
   "keywords": ["aurea", "design-system", "css", "design-tokens"],
   "license": "Apache-2.0",