@aurea-uds/core 0.1.0 → 0.2.0

package/dist/aurea.css

@@ -56,6 +56,7 @@
   --z-modal:80;
   --z-toast:100;
   --sidebar-width:16.5rem;
+  --sidebar-rail:5.5rem;
   --topbar-height:4rem;
   --content-max:102.5rem;
   --breakpoint-sm:640px;
@@ -272,681 +273,1141 @@
   --card-pad:1.5rem;
   --section-gap:2rem;
 }
-/* Aurea core — component styles. Built with @aurea-uds/tokens into dist/aurea.css. Load @aurea-uds/fonts/css for IBM Plex. */
-/* ========================================================================== */
-/* 02. RESET, ACESSIBILIDADE E BASE                                            */
-/* ========================================================================== */
-* { box-sizing:border-box; }
-html { scroll-behavior:smooth; }
-body { margin:0; background:var(--background); color:var(--foreground); font-family:var(--font-ui); font-size:var(--text-md); line-height:var(--leading-normal); }
-::selection { background:var(--selection); }
-button,input,textarea,select { font:inherit; }
-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; }
-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
-   continua na tela. Já mordeu o popover do MediaPlayer e as abas do catálogo. Aqui a
-   regra fecha a classe inteira do bug, em vez de um remendo por componente.
-   `until-found` fica de fora: ali o `hidden` é revelável e o browser cuida. */
-[hidden]:not([hidden="until-found"]) { display:none!important; }
-.sr-only { position:absolute!important; width:1px!important; height:1px!important; padding:0!important; margin:-1px!important; overflow:hidden!important; clip:rect(0,0,0,0)!important; white-space:nowrap!important; border:0!important; }
-.icon { width:var(--icon-md); height:var(--icon-md); fill:currentColor; flex:none; }
-.icon-sm { width:var(--icon-sm); height:var(--icon-sm); } .icon-lg { width:var(--icon-lg); height:var(--icon-lg); } .icon-xl { width:var(--icon-xl); height:var(--icon-xl); }
-.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); }
-/* 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
-   documentação e chegava sem nada no consumidor. `min(...,100%)` porque `minmax(15rem,1fr)`
-   estoura o contêiner quando o texto vai a 200% e a coluna fica maior que a caixa (lição do
-   M12); --grid-min é o botão de ajuste, no idioma de --qr-module e --demo-height. */
-.grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(min(var(--grid-min,15rem),100%),1fr)); gap:var(--space-4); }
-
-/* ========================================================================== */
-/* 03. APP SHELL E DOCUMENTAÇÃO                                                */
-/* ========================================================================== */
-/* Regiões do AppShell — SUPERFÍCIES FLUTUANTES (decisão do Victor, 23/07/2026): topo,
-   lateral e conteúdo são caixas soltas de raio --radius-card, separadas por --space-4 e
-   descoladas da borda da janela pelo padding do shell. NADA de barra colada com linha
-   divisória: caixa retangular genérica é proibida (CLAUDE.md).
-   Arranjo escolhido: o TOPO atravessa toda a largura (grid-column 1/-1) e leva a marca;
-   a lateral começa abaixo dele. Ambos grudam na rolagem por `sticky` — o conteúdo passa
-   por baixo e as duas caixas seguem visíveis.
-   ATENÇÃO: `.app-shell` NÃO se toca. O catálogo escrito à mão (apps/docs) usa essa MESMA
-   classe como raiz, com filhos próprios (.doc-sidebar/.main-wrap) — mexer nela desloca as
-   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); }
-/* 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
-   de site. Só floating e flush entram no grid do AppShell; a pill é peça avulsa (numa
-   pílula não cabem busca + densidade + tema + comando). */
-.topbar { grid-column:1/-1; position:sticky; z-index:var(--z-sticky); display:flex; align-items:center; justify-content:space-between; gap:var(--space-4); min-height:var(--topbar-height); }
-.topbar-floating { top:var(--space-4); margin:var(--space-4) var(--space-4) 0; padding:var(--space-2) var(--space-4); border:1px solid var(--border); border-radius:var(--radius-card); background:var(--card); color:var(--card-foreground); }
-/* flush: encostada nas bordas. SEM fio embaixo (pedido do Victor — a referência não tem)
-   e sem superfície própria: ela se funde ao fundo e cola no conteúdo, que começa logo
-   abaixo. É o topo do nosso catálogo. */
-.topbar-flush { top:0; padding:var(--space-2) var(--space-5); background:var(--background); }
-.topbar-pill { top:var(--space-4); width:max-content; max-width:calc(100% - var(--space-8)); margin:var(--space-4) auto 0; justify-content:flex-start; gap:var(--space-2); padding:var(--space-2); border:1px solid var(--border); border-radius:var(--radius-control); background:var(--card); color:var(--card-foreground); }
-/* .brand nasceu como cabeçalho VERTICAL da lateral (borda embaixo + respiro); no topo
-   ele deita, então some com a borda e a margem — o lockup em si continua o mesmo. */
-.topbar .brand { min-height:auto; margin:0; padding:0; border:0; }
-/* 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); }
-/* 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. */
-.sidebar::-webkit-scrollbar { width:0; height:0; }
-/* com o topo `flush` a barra COLA no conteúdo (pedido do Victor): a folga acima da lateral
-   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); }
-.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:
-   os filhos encolhem em vez de forçar rolagem lateral. O COLAPSO de conteúdo (esconder a
-   busca, trocar a nav por menu) é do consumidor, com os utilitários responsivos abaixo. */
-.topbar > * { min-width:0; }
-/* QUEBRA POR CONTEÚDO. O `flex-wrap` vivia só dentro do @media abaixo, ou seja, a barra só
-   quebrava quando a JANELA era estreita. Texto a 200% (WCAG 1.4.4) aumenta o conteúdo sem
-   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); }
-  .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,
-     as cinco áreas somam 371px e estouravam a 320px (auditoria 26/07, A1). */
-  .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
-   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.
-   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; }
-/* O UA aplica um bloco inteiro a `[popover]` mesmo FECHADO — `width:fit-content`, `inset:0`,
-   `margin:auto`, borda e padding próprios. A `.sidebar` já sobrescreve quase tudo; sobravam
-   largura e insets, e isso encolheu a lateral do DESKTOP de 232px para 225px. Quem pegou foi o
-   gate de pixel, não o olho: 4.573 pixels de diferença numa captura de 0,03 de proporção. */
-.sidebar[popover]:not(:popover-open) { width:auto; inset-inline:auto; inset-block-end:auto; }
-/* Quem esconde a gaveta fechada é ESTA regra, não o `display:none` do UA para `[popover]`:
-   regra de autor vence regra de UA por ORIGEM, e a `.sidebar` já declara `display:flex`.
-   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) {
-  .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; }
-  .sidebar[popover]::backdrop { background:var(--overlay); }
-}
-}
-
-/* ── Visibilidade responsiva — o mecanismo PADRÃO de colapsar uma barra ─────────────
-   Regra do projeto (enraizada): todo layout horizontal que aperta esconde o secundário
-   por breakpoint da escala, nunca rola de lado. Estas 4 classes são esse mecanismo; o
-   gate (check 4b) trava os breakpoints. Mobile-first: `below` some acima do ponto. */
-@media (max-width:1023px) { .hide-below-lg { display:none !important; } }
-@media (max-width:767px)  { .hide-below-md { display:none !important; } }
-.brand { min-height:var(--topbar-height); display:flex; align-items:center; gap:12px; padding:2px 4px 16px; margin:0 0 16px; border:0; border-bottom:1px solid var(--sidebar-border); border-radius:0; background:transparent; box-shadow:none; }
-.brand strong { display:block; letter-spacing:var(--tracking-tight); } .brand small { display:block; color:var(--muted-foreground); font-size:11px; }
-/* minmax(0,1fr): a trilha `auto` do grid crescia até o nome mais longo e os itens
-   VAZAVAM pela direita da caixa (colavam na borda de um lado e sobrava do outro). */
-  .doc-nav { padding:0 0 8px; display:grid; grid-template-columns:minmax(0,1fr); gap:var(--space-1); }
-  .btn.mobile-nav-toggle,.btn.mobile-nav-close { display:none; }
-/* .nav-group-label é o rótulo de categoria SEM ser título de documento: mesma aparência do
-   h4 histórico, mas o grupo se nomeia por aria-labelledby e não entra na lista de títulos
-   do leitor de tela (senão a lateral vem antes do h1 da página). É o jeito preferido. */
-.doc-nav h4,.doc-nav .nav-group-label { margin:16px 8px 8px; color:var(--subtle-foreground); font-size:11px; letter-spacing:var(--tracking-widest); text-transform:uppercase; }
-.doc-nav .nav-group { display:grid; gap:var(--space-1); }
-.doc-nav a { display:flex; align-items:center; gap:10px; min-height:40px; margin:0; padding:9px 12px; border:1px solid transparent; border-radius:var(--radius-lg); background:transparent; color:var(--muted-foreground); text-decoration:none; box-shadow:none; }
-.doc-nav a:hover { color:var(--sidebar-accent-foreground); background:var(--sidebar-accent); border-color:var(--sidebar-border); }
-.doc-nav a.active { border-color:var(--sidebar-border); }
-/* o glifo da família fica na frente do rótulo e nunca encolhe o texto */
-.doc-nav a .icon { flex:none; opacity:.8; }
-.doc-nav a.active .icon { opacity:1; }
-.eyebrow { display:inline-flex; align-items:center; gap:8px; color:var(--primary); font-size:12px; font-weight:var(--weight-bold); letter-spacing:var(--tracking-widest); text-transform:uppercase; }
-/* No claro o amarelo puro como texto não alcança 4.5:1 (axe). Aprofundar com --foreground
-   mantém o matiz da marca e passa o AA; no escuro segue o amarelo cheio. */
-[data-theme="light"] .eyebrow { color:color-mix(in oklab, var(--primary) 45%, var(--foreground)); }
-.demo { min-width:0; padding:var(--card-pad); border:1px solid var(--border); border-radius:var(--radius-card); background:var(--card); color:var(--card-foreground); box-shadow:none; }
-
-/* ========================================================================== */
-/* 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; }
-/* 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. */
-.btn-xs { height:var(--control-h-xs); padding:0 10px; gap:6px; font-size:var(--text-xs); border-radius:var(--radius-control); }
-.btn-sm { height:var(--control-h-sm); padding:0 12px; font-size:var(--text-xs); border-radius:var(--radius-control); }
-.btn-lg { height:var(--control-h-lg); padding:0 20px; font-size:var(--text-base); border-radius:var(--radius-control); }
-.btn-xl { height:var(--control-h-xl); padding:0 26px; gap:10px; font-size: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%; }
-.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-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-outline { --btn-bg:transparent; --btn-fg:var(--foreground); --btn-border:var(--border-strong); }
-.btn-outline:hover:not(:disabled) { --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-danger { --btn-bg:var(--destructive); --btn-fg:var(--destructive-foreground); --btn-border:transparent; }
-.btn-danger:hover:not(:disabled) { --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-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); }
-[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).
-   Três tons: neutro, marca e destrutivo. No claro a marca aprofunda, senão não passa o AA. */
-/* `min-height:24px` = WCAG 2.2 SC 2.5.8. A exceção de "alvo em linha" NÃO cobre este caso:
-   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-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); }
-/* 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); }
-/* 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; }
-
-/* 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
-   "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-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); }
-/* 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); border-radius:var(--radius-md); }
-/* 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; }
-.btn-group .btn:first-child { margin-inline-start:0; border-radius:var(--radius-control); }
-.btn-group .btn:last-child { border-radius:var(--radius-control); }
-/* 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
-   dimensão e vira um oval num container alto. */
-.toolbar[data-orientation="vertical"] { flex-direction:column; align-items:stretch; border-radius:var(--radius-lg); }
-.toolbar-group { display:flex; align-items:center; gap:4px; }
-.toolbar-sep { flex:none; align-self:stretch; inline-size:1px; min-block-size:20px; margin-inline:4px; margin-block:0; background:var(--border); border:0; }
-.toolbar[data-orientation="vertical"] .toolbar-sep { align-self:auto; inline-size:auto; block-size:1px; min-block-size:0; margin-inline:0; margin-block:4px; }
-.spinner { width:16px; height:16px; border:2px solid currentColor; border-right-color:transparent; border-radius:50%; animation:spin .7s linear infinite; } @keyframes spin { to { transform:rotate(360deg); } }
-
-.field { display:flex; flex-direction:column; gap:7px; }
-.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; height:var(--control-h-md); padding:0 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); }
-.input:hover,.textarea:hover,.select:hover { border-color:var(--border); }
-.input::placeholder,.textarea::placeholder { color:var(--subtle-foreground); }
-.input:disabled,.textarea:disabled,.select:disabled { opacity:.5; cursor:not-allowed; }
-.input[aria-invalid="true"],.textarea[aria-invalid="true"] { border-color:var(--danger-400); }
-.textarea { min-height:104px; padding:12px 14px; resize:vertical; border-radius:var(--radius-lg); }
-/* chevron: cor = --muted-foreground de cada tema (dark #a1a1a1, light #505050); tokenizar na Fase 1 */
-.select { appearance:none; padding-inline-end:38px; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23a1a1a1' stroke-width='1.6'/%3E%3C/svg%3E"); background-position:calc(100% - 12px) 50%; background-size:12px 8px; background-repeat:no-repeat; }
-[data-theme="light"] .select { background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23505050' stroke-width='1.6'/%3E%3C/svg%3E"); }
-/* Widgets nativos dos campos (calendário do type=date, dropdown do select, scrollbar do textarea) seguem o tema */
-.input,.textarea,.select { color-scheme:dark; }
-[data-theme="light"] .input,[data-theme="light"] .textarea,[data-theme="light"] .select { color-scheme:light; }
-.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; }
-.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; }
-.control-mark { width:18px; height:18px; margin-top:1px; display:grid; place-items:center; border:1px solid var(--border-strong); background:var(--field-bg); }
-.checkbox .control-mark { border-radius:5px; } .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:2px solid var(--focus-strong); outline-offset:2px; }
-.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; }
-.switch-track { position:relative; width:42px; height:24px; 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:after { content:""; position:absolute; inset-inline-start:3px; top:3px; width:16px; height:16px; 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(18px); background:var(--control-selected-foreground); }
-.range { width:100%; accent-color:var(--primary); }
-/* 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; }
-.segmented button.active { color:var(--foreground); background:var(--secondary); box-shadow:none; border:0; }
-/* ── SELECIONADO: uma linguagem só ────────────────────────────────────────────────────
-   Item de nav ativo, aba ativa, item de lista lateral e botão alternado ligado mostram o
-   MESMO sinal: cápsula elevada + rótulo na cor da marca + fio amarelo encostado na borda de
-   baixo. Um usuário aprende uma vez e reconhece em todo lugar (pedido do Victor, 24/07).
-   O fio é 2px (fração de pixel borra), inset 15px, e o amarelo entra a 75% — cheio ele
-   grita mais que o próprio rótulo. 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. */
-.is-selected,.btn-nav[aria-current]:not([aria-current="false"]),.btn[aria-pressed="true"],
-.segmented button.active,.doc-nav a.active { --btn-bg:var(--secondary); --btn-fg:var(--primary); position:relative; background:var(--secondary); color:var(--primary); }
-.is-selected::after,.btn-nav[aria-current]:not([aria-current="false"])::after,
-.btn[aria-pressed="true"]:not(.btn-icon)::after,.segmented button.active::after,
-.doc-nav a.active::after { content:""; position:absolute; inset-inline:15px; bottom:0; height:2px; border-radius:var(--radius-full); background:color-mix(in oklab, var(--primary) 75%, transparent); }
-[data-theme="light"] .is-selected,[data-theme="light"] .btn-nav[aria-current]:not([aria-current="false"]),
-[data-theme="light"] .btn[aria-pressed="true"],[data-theme="light"] .segmented button.active,
-[data-theme="light"] .doc-nav a.active { --btn-fg:color-mix(in oklab, var(--primary) 45%, var(--foreground)); color:color-mix(in oklab, var(--primary) 45%, var(--foreground)); }
-
-/* `line-height:1` não é enfeite: sem ele o .badge herdava a entrelinha do pai e a MESMA
-   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; }
-/* 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-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)); }
-.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
-   volta pra --foreground, senão a frase inteira fica colorida e ilegível no claro. Os
-   nomes operacionais e os semânticos apontam pro mesmo par de tokens de propósito. */
-.status { display:inline-flex; align-items:center; gap:var(--space-2); color:var(--muted-foreground); font-size:var(--text-sm); }
-.status-label { color:var(--foreground); }
-.status-online,.status-success { color:var(--success-400); }
-.status-away,.status-warning { color:var(--warning-400); }
-.status-busy,.status-danger { color:var(--danger-400); }
-.status-running,.status-info { color:var(--info-400); }
-/* offline é o único que NÃO é "mais uma cor": --subtle-foreground e --muted-foreground
-   colapsam no MESMO valor no tema claro, então offline sairia idêntico ao neutral. Ponto
-   VAZADO resolve nos dois temas e ainda diz a coisa certa (ausência, não outro estado).
-   Escopado em .status-offline: o .status-dot dentro do Badge (Chat) segue preenchido. */
-.status-offline { color:var(--subtle-foreground); }
-.status-offline .status-dot { background:transparent; box-shadow:inset 0 0 0 2px currentColor,0 0 0 3px color-mix(in srgb,currentColor 14%,transparent); }
-
-.card { min-width:0; padding:var(--card-pad); border:1px solid var(--border); border-radius:var(--radius-card); background:var(--card); color:var(--card-foreground); box-shadow:none; }
-.card-raised { box-shadow:none; } .card-inset { background:var(--secondary); }
-.card-interactive { cursor:pointer; transition:transform var(--duration-fast),border-color var(--duration-fast),background var(--duration-fast); }
-.card-interactive:hover { transform:translateY(-2px); border-color:var(--border-strong); background:var(--surface-2); }
-.card-selected { border-color:var(--primary-outline); box-shadow:inset 0 0 0 1px var(--primary-outline); }
-.card-danger { border-color:color-mix(in srgb,var(--danger-400) 50%,var(--border)); background:var(--danger-bg); }
-.card-header { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; margin-bottom:16px; }
-.card-title { margin:0; font-size:var(--text-base); } .card-subtitle { margin:3px 0 0; color:var(--muted-foreground); font-size:var(--text-sm); }
-
-.alert { display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:start; gap:12px; padding:14px 16px; border:1px solid var(--border); border-radius:var(--radius-lg); background:var(--secondary); box-shadow:none; }
-/* 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-400) 38%,var(--border)); background:var(--info-bg); }
-.alert-success,.banner-success { border-color:color-mix(in srgb,var(--success-400) 38%,var(--border)); background:var(--success-bg); }
-.alert-warning,.banner-warning { border-color:color-mix(in srgb,var(--warning-400) 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); }
-.alert h4 { margin:0 0 2px; font-size:var(--text-sm); } .alert p { margin:0; color:var(--muted-foreground); font-size:var(--text-sm); }
-.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); }
-.progress>span { display:block; height:100%; border-radius:inherit; background:var(--primary); }
-.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; } }
-
-/* 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); }
-.tab { position:relative; padding:0 14px; border:0; border-radius:var(--radius-control); background:transparent; color:var(--muted-foreground); cursor:pointer; }
-.tab.active,.tab[data-active] { color:var(--foreground); background:var(--secondary); } .tab.active:after,.tab[data-active]:after { display:none; }
-.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); }
-.step { position:relative; text-align:center; color:var(--subtle-foreground); }
-.step:before { content:""; position:absolute; top:15px; inset-inline-start:-50%; width:100%; height:2px; background:var(--border); } .step:first-child:before { display:none; }
-.step.done,.step.active { color:var(--foreground); } .step.done:before,.step.active:before { background:var(--primary); } .step.done .step-dot { color:var(--primary-foreground); background:var(--primary); border-color:var(--primary); } .step.active .step-dot { border-color:var(--primary); box-shadow:0 0 0 4px color-mix(in srgb,var(--primary) 14%,transparent); }
-
-.table-wrap { overflow:auto; border:1px solid var(--border); border-radius:var(--radius-card); background:var(--card); }
-table { width:100%; border-collapse:collapse; min-width:720px; } th,td { height:var(--row-h); padding:0 14px; text-align:start; border-bottom:1px solid var(--border); }
-th { color:var(--subtle-foreground); background:var(--surface-2); font-size:var(--text-xs); letter-spacing:var(--tracking-wider); text-transform:uppercase; } tr:last-child td { border-bottom:0; } tbody tr:hover { background:var(--surface-2); }
-.avatar { width:36px; height:36px; display:grid; place-items:center; border-radius:50%; background:var(--surface-3); color:var(--foreground); border:1px solid var(--border-strong); font-weight:var(--weight-bold); } .avatar-group .avatar { margin-inline-start:-9px; border:2px solid var(--surface-1); } .avatar-group .avatar:first-child { margin-inline-start:0; }
-.kpi { display:flex; flex-direction:column; gap:5px; }
-/* 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); }
-.data-list dd { min-width:0; margin:0; }
-/* 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
-   alinham por construção em vez de por número copiado. Saem junto os 24px de recuo e os 7px
-   do trilho — dois px crus a menos na catraca do check 12. */
-.timeline { position:relative; display:flex; flex-direction:column; gap:var(--space-5); margin:0; padding:0; list-style:none; }
-.timeline:before { content:""; position:absolute; inset-inline-start:calc(var(--space-3) / 2); inset-block:var(--space-2); width:1px; background:var(--border); }
-.timeline > li { display:flex; align-items:flex-start; gap:var(--space-3); }
-/* A coluna de conteúdo é uma PILHA, e não por estética: sem isso o item empilhava quando
-   tinha descrição (o <p> é bloco) e colava título e horário na mesma linha quando não tinha —
-   "Shipped14:20". Geometria de componente não depende do conteúdo (achados A2/A3). */
-.timeline > li > div { display:flex; flex-direction:column; gap:var(--space-05); min-width:0; }
-.timeline > li > div > p { margin:0; }
-.timeline-dot { flex:none; width:var(--space-3); height:var(--space-3); border-radius:var(--radius-full); margin-block-start:var(--space-1); background:var(--primary); box-shadow:0 0 0 var(--space-05) var(--surface-1); }
-/* Accordion: anatomia medida no Carbon em 30/07/2026 (REFERENCES.md) — cabeçalho na altura de
-   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); }
-/* Mockup do kit de origem (apps/docs) — não é o Accordion do sistema, que é <details> nativo. */
-.accordion-item.open .accordion-panel { display:block; } .accordion-item.open .accordion-trigger .icon { transform:rotate(180deg); }
-
-/* QRCode: superfície flutuante Aurea, mas o miolo é de alto contraste FIXO — um QR
-   não segue o tema (dark inverteria e nem todo leitor decodifica invertido). Override
-   consciente por --qr-module/--qr-quiet. Módulos suaves (rx no SVG) sem perder escaneabilidade. */
-.qrcode { --qr-module:#0b0b0c; --qr-quiet:#fff; box-sizing:border-box; padding:var(--space-3); border:1px solid var(--border); border-radius:var(--radius-card); background:var(--qr-quiet); }
-.qrcode .qr-mod { fill:var(--qr-module); }
-.qrcode .qr-eye-gap { fill:var(--qr-quiet); }
-
-.code-block { overflow:auto; padding:16px; border:1px solid var(--border); border-radius:var(--radius-lg); background:var(--surface-inset); color:var(--muted-foreground); font:12px/1.7 var(--font-code); }
-/* Bloco de código COM copiar: a moldura não rola, o <pre> rola por dentro e o gatilho fica
-   parado no canto. O comportamento é do core (aurea.js, [data-aurea-copy]); aqui só a pele.
-   O check em amarelo é confirmação instantânea — dura 1,5s e volta ao ícone de copiar. */
-/* checkbox com rótulo fora da tela: sem o texto, o alvo é só a marca — nada de gap sobrando. */
-.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; }
-.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); }
-/* "On this page": índice da própria página, fixo na lateral. Navegação, não decoração —
-   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; scrollbar-width:none; padding:var(--space-2) 0; }
-.toc::-webkit-scrollbar { width: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; }
-.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); }
-.toc a.toc-sub { padding-inline-start:var(--space-6); }
-.log-stream { height:240px; overflow:auto; padding:14px; border:1px solid var(--border); border-radius:var(--radius-md); background:var(--surface-inset); font:12px/1.65 var(--font-code); }
-.log-line { display:grid; grid-template-columns:86px 72px minmax(0,1fr); gap:12px; padding:3px 0; } .log-time { color:var(--subtle-foreground); } .log-level { color:var(--primary); } .log-level.warn { color:var(--warning-400); } .log-level.error { color:var(--danger-400); }
-
-/* ========================================================================== */
-/* 05. GRÁFICOS E VISUALIZAÇÃO                                                 */
-/* ========================================================================== */
-.chart { width:100%; height:220px; } .chart-bar.alt { fill:var(--chart-1); } .health-cell.warn { background:var(--warning-500); } .health-cell.bad { background:var(--danger-500); } .health-cell.off { background:var(--surface-3); }
-.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). */
-.message-status { display:flex; align-items:center; flex-wrap:wrap; gap:var(--space-3); margin-block-start:var(--space-2); }
-.message-composer { display:flex; align-items:center; gap:var(--space-3); flex-wrap:nowrap; } .message-composer .input-wrap { flex:1; min-width:0; }
-
-/* ========================================================================== */
-/* 07. MÍDIA                                                                   */
-/* ========================================================================== */
-.media-player { position:relative; isolation:isolate; overflow:hidden; min-height:360px; aspect-ratio:16/9; border:1px solid var(--border); border-radius:var(--radius-card); background:var(--media-canvas); color:var(--media-foreground); }
-.media-viewport { position:absolute; inset:0; display:grid; place-items:center; background:var(--media-canvas); }
-.media-fill { width:100%; height:100%; object-fit:contain; } /* vídeo React preenche o viewport (auditoria 18/07, M14) */
-.media-placeholder { display:grid; place-items:center; gap:10px; color:var(--media-muted); text-align:center; }
-.media-placeholder .icon { width:48px; height:48px; color:var(--media-foreground); }
-.media-placeholder strong { color:var(--media-foreground); }
-.media-overlay-title { position:absolute; top:16px; inset-inline:16px; z-index:2; display:flex; align-items:flex-start; justify-content:space-between; gap:16px; color:var(--media-foreground); }
-.media-overlay-title>div>span { display:block; color:var(--media-muted); font-size:var(--text-xs); }
-.media-player .badge { border-color:var(--media-track); background:var(--media-track); color:var(--media-foreground); }
-.media-controls { position:absolute; inset:auto 0 0; z-index:3; display:grid; gap:8px; padding:12px; background:var(--media-scrim); color:var(--media-foreground); }
-.media-seek { --media-played:34%; position:relative; height:20px; display:flex; align-items:center; }
-.media-seek-track { position:absolute; inset-inline:0; height:4px; overflow:hidden; border-radius:var(--radius-full); background:var(--media-track); pointer-events:none; }
-.media-seek-buffered,.media-seek-played { position:absolute; inset-block:0; inset-inline:0 auto; border-radius:inherit; }
-.media-seek-buffered { width:62%; background:var(--media-buffered); }
-.media-seek-played { width:var(--media-played); background:var(--primary); }
-.media-seek input { position:relative; z-index:1; width:100%; height:20px; margin:0; appearance:none; background:transparent; cursor:pointer; }
-.media-seek input::-webkit-slider-runnable-track { height:4px; background:transparent; }
-.media-seek input::-webkit-slider-thumb { width:14px; height:14px; margin-top:-5px; appearance:none; border:2px solid var(--media-foreground); border-radius:50%; background:var(--primary); }
-.media-seek input::-moz-range-track { height:4px; background:transparent; }
-.media-seek input::-moz-range-thumb { width:12px; height:12px; border:2px solid var(--media-foreground); border-radius:50%; background:var(--primary); }
-.media-seek input:focus-visible { outline:2px solid var(--primary); outline-offset:3px; box-shadow:none; }
-.media-control-row,.media-control-group { display:flex; align-items:center; gap:4px; }
-.media-control-row { min-width:0; justify-content:space-between; }
-.media-control { min-width:36px; height:36px; display:inline-grid; place-items:center; padding:0 8px; border:1px solid transparent; border-radius:var(--radius-md); background:transparent; color:var(--media-foreground); cursor:pointer; }
-.media-control:hover,.media-control.active { background:var(--media-track); color:var(--primary); }
-.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); }
-
-/* ========================================================================== */
-/* 08. ÍCONES                                                                  */
-/* ========================================================================== */
-.icon-search { max-width:420px; }
-.icon-category { margin-top:26px; } .icon-category h3 { margin:0 0 12px; font-size:var(--text-base); }
-.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); }
-.icon-tile.copied { color:var(--primary); border-color:var(--primary); } .overlay.open { display:grid; }
-.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; }
-.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); }
-/* 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
-   a palavra "command" numa string do pacote React e o gate lê as strings do fonte. Foi para
-   apps/docs/docs.css, que é a casa dela; o sistema fica com os dois nomes que o componente
-   emite de verdade. Não-modal de propósito, como a gaveta do AppShell (ADR-0003): o foco não
-   fica preso, então não declaramos modalidade que não entregamos. */
-.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; }
-.menu { z-index:var(--z-modal); min-width:200px; max-width:min(320px,calc(100vw - 32px)); padding:6px; border:1px solid var(--border); border-radius:var(--radius-lg); background:var(--popover); color:var(--popover-foreground); box-shadow:var(--shadow-lg); }
-.menu-item { display:flex; align-items:center; gap:10px; width:100%; min-height:var(--control-h-md); padding:0 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; }
-.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. */
-.combobox-group { position:relative; display:flex; align-items:center; }
-.combobox-group .input { padding-inline-end:calc(var(--control-h-sm) * 2 + 10px); }
-.combobox-actions { position:absolute; inset-inline-end:5px; display:flex; align-items:center; gap:2px; }
-.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; }
-.combobox-empty { padding:12px 10px; color:var(--muted-foreground); font-size:var(--text-sm); }
-.combobox-empty:empty { display:none; }
-.combobox-item { display:grid; grid-template-columns:16px minmax(0,1fr); gap:8px; align-items:center; }
-.combobox-check { display:inline-flex; color:var(--primary); }
-/* MultiCombobox (Fase 4) — chips de multi-seleção + grupos. Espaçamento novo tokenizado. */
-.combobox-multi { display:flex; align-items:center; gap:var(--space-2); width:100%; min-width:0; min-height:var(--control-h-md); padding:var(--space-1) var(--space-2); background:var(--field-bg); border:1px solid var(--border-strong); border-radius:var(--radius-control); transition:border-color var(--duration-fast); }
-.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; }
-.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; }
-.combobox-chip-remove:hover { color:var(--foreground); }
-.combobox-chip-input { flex:1; min-width:6ch; height:var(--control-h-sm); border:0; background:transparent; padding:0 var(--space-1); color:var(--foreground); }
-.combobox-chip-input::placeholder { color:var(--subtle-foreground); }
-.combobox-chip-input:focus-visible { outline:none; }
-.combobox-group-label { padding:var(--space-1) var(--space-2); color:var(--muted-foreground); font-size:var(--text-xs); font-weight:var(--weight-semibold); }
-/* FileInput / DropZone (Fase 4) — só a UI de entrada; upload real é a Fase 5.
-   A zona é um <label> em volta do <input> nativo: clique/foco/teclado de graça,
-   o arrastar-soltar é reforço. Espaçamento novo tokenizado; superfície = card. */
-.dropzone { display:flex; flex-direction:column; align-items:center; gap:var(--space-2); padding:var(--space-8) var(--space-6); text-align:center; color:var(--muted-foreground); background:var(--surface-inset); border:1px dashed var(--border-strong); border-radius:var(--radius-card); cursor:pointer; transition:border-color var(--duration-fast),background-color var(--duration-fast); }
-.dropzone:hover { border-color:var(--border); }
-.dropzone:focus-within { outline:2px solid var(--focus-strong); outline-offset:2px; border-color:var(--focus-strong); }
-.dropzone[data-dragging="true"] { border-style:solid; border-color:var(--primary); background:var(--surface-2); }
-.dropzone strong { color:var(--foreground); }
-.dropzone-icon { color:var(--primary); }
-.dropzone-hint { font-size:var(--text-xs); }
-.file-list { display:flex; flex-direction:column; gap:var(--space-2); margin-top:var(--space-3); padding:0; list-style:none; }
-.file-item { display:flex; align-items:center; gap:var(--space-3); padding:var(--space-2) var(--space-3); background:var(--surface-2); border:1px solid var(--border); border-radius:var(--radius-md); }
-.file-progress { flex-basis:var(--space-20); flex-shrink:0; } /* largura fixa da barra de upload (auditoria 18/07, M14) */
-.file-name { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
-.file-size { flex:none; color:var(--muted-foreground); font-size:var(--text-xs); font-variant-numeric:tabular-nums; }
-
-/* TreeView (Fase 4) — árvore headless própria (Base UI 1.6 não tem tree).
-   role=tree/treeitem/group + roving tabindex vêm do React; aqui só a pele.
-   A indentação por nível é padding-inline-start inline (style). Espaço novo
-   tokenizado; a linha não é pill (radius-sm, como o .menu-item). */
-.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-sm); color:var(--foreground); cursor:pointer; user-select:none; }
-.tree-node:hover { background:var(--surface-3); }
-.tree-item:focus-visible > .tree-node { outline:2px solid var(--focus-strong); outline-offset:-2px; }
-.tree-node[data-selected] { background:color-mix(in srgb,var(--primary) 14%,transparent); }
-.tree-twist { flex:none; color:var(--muted-foreground); transition:transform var(--duration-fast); }
-.tree-item[aria-expanded="true"] > .tree-node > .tree-twist { transform:rotate(90deg); }
-.tree-item[aria-expanded="false"]:dir(rtl) > .tree-node > .tree-twist { transform:rotate(180deg); }
-.tree-indent { flex:none; width:1rem; }
-.tree-label { flex:1; 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
-   (não é pill, como o .menu-item/.tree-node). O painel NÃO é live region — a
-   chegada é anunciada por um role=status à parte no React. */
-.notification-trigger { position:relative; display:inline-flex; }
-.notification-count { position:absolute; inset-block-start:-4px; inset-inline-end:-4px; display:inline-flex; align-items:center; justify-content:center; min-width:18px; height:18px; padding:0 var(--space-1); border-radius:var(--radius-control); background:var(--primary); color:var(--primary-foreground); font-size:var(--text-xs); font-weight:var(--weight-semibold); line-height:var(--leading-none); pointer-events:none; }
-.notification-panel { width:min(360px,calc(100vw - 32px)); max-width:none; padding:0; gap:0; display:flex; flex-direction:column; overflow:hidden; }
-.notification-head { display:flex; align-items:center; justify-content:space-between; gap:var(--space-3); padding:var(--space-3) var(--space-4); border-block-end:1px solid var(--border); }
-.notification-head strong { font-size:var(--text-sm); }
-.notification-list { margin:0; padding:var(--space-1); overflow-y:auto; max-height:min(60vh,440px); }
-.notification-sublist { margin:0; padding:0; list-style:none; }
-.notification-group-label { margin:0; padding:var(--space-2) var(--space-3) var(--space-1); color:var(--muted-foreground); font-size:var(--text-xs); font-weight:var(--weight-semibold); letter-spacing:var(--tracking-wide); text-transform:uppercase; }
-.notification-item { display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:baseline; column-gap:var(--space-3); row-gap:var(--space-1); width:100%; padding:var(--space-3); border:0; border-radius:var(--radius-sm); background:none; color:var(--foreground); font:inherit; text-align:start; }
-button.notification-item { cursor:pointer; }
-button.notification-item:hover { background:var(--surface-3); }
-.notification-item:focus-visible { outline:2px solid var(--focus-strong); outline-offset:-2px; }
-.notification-dot { grid-row:1/-1; align-self:center; width:8px; height:8px; border-radius:50%; background:var(--primary); }
-.notification-item[data-read] .notification-dot { visibility:hidden; }
-.notification-item-title { grid-column:2; display:flex; align-items:center; gap:var(--space-2); min-width:0; font-size:var(--text-sm); font-weight:var(--weight-medium); }
-.notification-item[data-read] .notification-item-title { color:var(--muted-foreground); font-weight:var(--weight-regular); }
-.notification-item-desc { grid-column:2; color:var(--muted-foreground); font-size:var(--text-xs); }
-.notification-time { grid-column:3; grid-row:1; color:var(--muted-foreground); font-size:var(--text-xs); white-space:nowrap; }
-.notification-empty { margin:0; padding:var(--space-8) var(--space-4); color:var(--muted-foreground); font-size:var(--text-sm); text-align:center; }
-/* EmptyState é o membro GRANDE da família "aqui não há nada" — .notification-empty acima e
-   .datagrid-empty abaixo já respondiam a mesma pergunta do mesmo jeito (centralizado, muted),
-   e o componente público era o único dos três sem regra (achado A13). A ordem das partes
-   (imagem → título → corpo → ação) é a do padrão de empty state do Carbon, registrado em
-   REFERENCES.md; a pele é Aurea. O título vinha com o h3 do NAVEGADOR (16,38px). */
-.empty-state { display:flex; flex-direction:column; align-items:center; gap:var(--space-3); padding:var(--space-10) var(--space-6); color:var(--muted-foreground); text-align:center; }
-.empty-state > .icon { color:var(--subtle-foreground); }
-.empty-state p { max-width:46ch; margin:0; }
-.empty-title { margin:0; color:var(--foreground); font-size:var(--text-base); font-weight:var(--weight-semibold); line-height:var(--leading-tight); }
-
-/* DataGrid (Fase 4) — TanStack Table v8 headless; aqui só a pele, que reusa
-   .table-wrap/table/th/td. aria-sort fica só no th ordenado; a linha
-   selecionada usa data-selected (o estado acessível é o checkbox da linha).
-   Espaço novo tokenizado. */
-.datagrid { display:grid; gap:var(--space-3); }
-.datagrid > .table-wrap:focus-visible { outline:none; box-shadow:0 0 0 3px color-mix(in oklab,var(--focus) 38%,transparent); }
-.datagrid > .pagination { justify-self:end; }
-/* Fix aditivo: os 34px dos botões numéricos do .pagination esmagavam os botões
-   de TEXTO (Anterior/Próxima) do Pagination React. Não muda os numéricos. */
-/* text-transform/letter-spacing: o UA reseta nos <button>; herdar explícito
-   para o cabeçalho ordenável ficar idêntico ao th estático. */
-.datagrid-sort { display:inline-flex; align-items:center; gap:var(--space-1); padding:0; border:0; background:none; color:inherit; font:inherit; text-transform:inherit; letter-spacing:inherit; cursor:pointer; }
-.datagrid-sort:focus-visible { outline:2px solid var(--focus-strong); outline-offset:2px; border-radius:var(--radius-sm); }
-.datagrid-sort-icon { flex:none; color:var(--subtle-foreground); }
-th[aria-sort] .datagrid-sort-icon { color:var(--primary); }
-.datagrid-selcol { width:1%; white-space:nowrap; }
-.datagrid tbody tr[data-selected] { background:color-mix(in srgb,var(--primary) 14%,transparent); }
-.datagrid-empty { padding:var(--space-6); color:var(--muted-foreground); text-align:center; }
-
-/* ========================================================================== */
-/* 10. RESPONSIVIDADE                                                          */
-/* ========================================================================== */
-@media (max-width:1366px) and (min-width:821px) { :root { --sidebar-width:216px; } }
-/* Aperto de tela baixa: é densidade do SHELL DOS DOCS (.doc-sidebar), não da .doc-nav em
-   si — sem o escopo ela zerava o gap de qualquer nav, inclusive a do catálogo. */
-@media (max-height:800px) and (min-width:821px) { .doc-sidebar .brand { min-height:var(--target-min); padding:0 2px 8px; margin-bottom:6px; } .doc-sidebar .brand strong { font-size:var(--text-sm); } .doc-sidebar .brand small { font-size:10px; } .doc-sidebar .doc-nav { gap:0; padding-bottom:0; } .doc-sidebar .doc-nav h4 { margin:8px 4px 4px; font-size:10px; } .doc-sidebar .doc-nav a { min-height:30px; padding:5px 8px; font-size:var(--text-xs); } }
-/* Legado do catálogo escrito à mão: `display:block` desmancha o grid e empilha a lateral.
-   Agora vale SÓ para o shell que não tem gaveta — o `apps/docs/index.html`, que traz a
-   própria `.doc-sidebar` e o próprio JS de abrir. O shell do sistema segue em grid de uma
-   coluna com a gaveta acima. Sai junto com aquela página (achado M13). */
-@media (max-width:820px) { .app-shell:not(:has(> .sidebar[popover])) { display:block; } }
-@media (max-width:820px) { .btn.mobile-nav-toggle { display:inline-flex; } .btn.mobile-nav-close { display:inline-flex; margin-inline-start:auto; } .mobile-nav-backdrop.open { display:block; } }
-@media (max-width:640px) { :root { --card-pad:16px; --section-gap:16px; } .doc-actions .select { flex:1; width:auto!important; min-width:0; } .doc-actions>.btn-primary { width:var(--control-h-md); padding:0; font-size:0; } .doc-actions>.btn-primary .mono { display:none; } .tabs,.pagination,.segmented { max-width:100%; overflow-x:auto; } .step:nth-child(3):before { display:none; } .alert { grid-template-columns:auto minmax(0,1fr); } .alert>:last-child { grid-column:2; justify-self:start; } .log-line { grid-template-columns:70px 58px minmax(0,1fr); gap:6px; } .queue-item>.badge { grid-column:2; justify-self:start; } .event-row>.badge { grid-column:3; justify-self:start; } .message { grid-template-columns:1fr; } .media-player { min-height:330px; aspect-ratio:auto; } .media-overlay-title { top:12px; left:12px; right:12px; } .media-controls { padding:10px; } .media-control-row { align-items:flex-start; flex-direction:column; gap:8px; } .media-control-row>.media-control-group { width:100%; justify-content:space-between; } .media-optional,.media-volume { display:none; } .media-time { padding:0 4px; font-size:11px; } .toast-stack { inset-inline:12px; bottom:12px; } .toast { width:100%; min-width:0; grid-template-columns:minmax(0,1fr) auto; } .drawer { width:100%; padding:20px; } .dialog { padding:20px; } }
-@media (prefers-reduced-motion:reduce) { *,*:before,*:after { scroll-behavior:auto!important; animation-duration:.01ms!important; animation-iteration-count:1!important; transition-duration:.01ms!important; } }
-
-/* Padrões compostos Aurea 1.7: blocos de operação, não widgets de domínio. */
-.operational-grid .demo{min-height:0}@media(max-width:640px){.operational-grid .demo{grid-column:span 12}}
-.universal-grid .demo { min-height:0; }
-.pattern-toolbar .input-wrap { 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 { 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; }
-}
-
-
-/* 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)}
-.table-region:focus-visible{box-shadow:0 0 0 3px color-mix(in oklab,var(--focus) 38%,transparent)}
-@media(max-width:400px){
-  .media-controls{flex-wrap:wrap;overflow:visible!important;gap:8px}
-  .media-controls .time-display{order:2;width:100%}
-  .media-control{min-width:var(--target-min);min-height:var(--target-min)}
-}
-@media(pointer:coarse){
-  .media-control,.btn-icon{min-width:var(--target-min);min-height:var(--target-min)}
-}
-
-/* ========================================================================== */
-/* 12. RTL                                                                     */
-/* ========================================================================== */
-/* O eixo inline do CSS acima já é lógico e espelha sozinho. Aqui ficam só os
-   casos sem forma lógica: background-position e translateX.
-   Deliberadamente NÃO espelham:
-   - o check do .checkbox e o .spinner são glifos desenhados com borda;
-   - .map-* e .builder-* são geografia/arte com rotate() fixo — espelhar os
-     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); }
+/* Aurea core — component styles. Built with @aurea-uds/tokens into dist/aurea.css. Load @aurea-uds/fonts/css for IBM Plex. */
+/* ========================================================================== */
+/* 02. RESET, ACESSIBILIDADE E BASE                                            */
+/* ========================================================================== */
+* { box-sizing:border-box; }
+html { scroll-behavior:smooth; }
+body { margin:0; background:var(--background); color:var(--foreground); font-family:var(--font-ui); font-size:var(--text-md); line-height:var(--leading-normal); }
+::selection { background:var(--selection); }
+button,input,textarea,select { font:inherit; }
+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; }
+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
+   continua na tela. Já mordeu o popover do MediaPlayer e as abas do catálogo. Aqui a
+   regra fecha a classe inteira do bug, em vez de um remendo por componente.
+   `until-found` fica de fora: ali o `hidden` é revelável e o browser cuida. */
+[hidden]:not([hidden="until-found"]) { display:none!important; }
+.sr-only { position:absolute!important; width:1px!important; height:1px!important; padding:0!important; margin:-1px!important; overflow:hidden!important; clip:rect(0,0,0,0)!important; white-space:nowrap!important; border:0!important; }
+.icon { width:var(--icon-md); height:var(--icon-md); fill:currentColor; flex:none; }
+.icon-sm { width:var(--icon-sm); height:var(--icon-sm); } .icon-lg { width:var(--icon-lg); height:var(--icon-lg); } .icon-xl { width:var(--icon-xl); height:var(--icon-xl); }
+.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); }
+/* 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
+   documentação e chegava sem nada no consumidor. `min(...,100%)` porque `minmax(15rem,1fr)`
+   estoura o contêiner quando o texto vai a 200% e a coluna fica maior que a caixa (lição do
+   M12); --grid-min é o botão de ajuste, no idioma de --qr-module e --demo-height. */
+.grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(min(var(--grid-min,15rem),100%),1fr)); gap:var(--space-4); }
+
+/* ========================================================================== */
+/* 03. APP SHELL E DOCUMENTAÇÃO                                                */
+/* ========================================================================== */
+/* Regiões do AppShell — SUPERFÍCIES FLUTUANTES (decisão do Victor, 23/07/2026): topo,
+   lateral e conteúdo são caixas soltas de raio --radius-card, separadas por --space-4 e
+   descoladas da borda da janela pelo padding do shell. NADA de barra colada com linha
+   divisória: caixa retangular genérica é proibida (CLAUDE.md).
+   Arranjo escolhido: o TOPO atravessa toda a largura (grid-column 1/-1) e leva a marca;
+   a lateral começa abaixo dele. Ambos grudam na rolagem por `sticky` — o conteúdo passa
+   por baixo e as duas caixas seguem visíveis.
+   ATENÇÃO: `.app-shell` NÃO se toca. O catálogo escrito à mão (apps/docs) usa essa MESMA
+   classe como raiz, com filhos próprios (.doc-sidebar/.main-wrap) — mexer nela desloca as
+   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); }
+/* 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
+   de site. Só floating e flush entram no grid do AppShell; a pill é peça avulsa (numa
+   pílula não cabem busca + densidade + tema + comando). */
+.topbar { grid-column:1/-1; position:sticky; z-index:var(--z-sticky); display:flex; align-items:center; justify-content:space-between; gap:var(--space-4); min-height:var(--topbar-height); }
+.topbar-floating { top:var(--space-4); margin:var(--space-4) var(--space-4) 0; padding:var(--space-2) var(--space-4); border:1px solid var(--border); border-radius:var(--radius-card); background:var(--card); color:var(--card-foreground); }
+/* flush: encostada nas bordas. SEM fio embaixo (pedido do Victor — a referência não tem)
+   e sem superfície própria: ela se funde ao fundo e cola no conteúdo, que começa logo
+   abaixo. É o topo do nosso catálogo. */
+.topbar-flush { top:0; padding:var(--space-2) var(--space-5); background:var(--background); }
+.topbar-pill { top:var(--space-4); width:max-content; max-width:calc(100% - var(--space-8)); margin:var(--space-4) auto 0; justify-content:flex-start; gap:var(--space-2); padding:var(--space-2); border:1px solid var(--border); border-radius:var(--radius-control); background:var(--card); color:var(--card-foreground); }
+/* .brand nasceu como cabeçalho VERTICAL da lateral (borda embaixo + respiro); no topo
+   ele deita, então some com a borda e a margem — o lockup em si continua o mesmo. */
+.topbar .brand { min-height:auto; margin:0; padding:0; border:0; }
+/* 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); }
+/* 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. */
+.sidebar::-webkit-scrollbar { width:0; height:0; }
+/* com o topo `flush` a barra COLA no conteúdo (pedido do Victor): a folga acima da lateral
+   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); }
+.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:
+   os filhos encolhem em vez de forçar rolagem lateral. O COLAPSO de conteúdo (esconder a
+   busca, trocar a nav por menu) é do consumidor, com os utilitários responsivos abaixo. */
+.topbar > * { min-width:0; }
+/* QUEBRA POR CONTEÚDO. O `flex-wrap` vivia só dentro do @media abaixo, ou seja, a barra só
+   quebrava quando a JANELA era estreita. Texto a 200% (WCAG 1.4.4) aumenta o conteúdo sem
+   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); }
+  .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,
+     as cinco áreas somam 371px e estouravam a 320px (auditoria 26/07, A1). */
+  .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
+   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.
+   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; }
+/* O UA aplica um bloco inteiro a `[popover]` mesmo FECHADO — `width:fit-content`, `inset:0`,
+   `margin:auto`, borda e padding próprios. A `.sidebar` já sobrescreve quase tudo; sobravam
+   largura e insets, e isso encolheu a lateral do DESKTOP de 232px para 225px. Quem pegou foi o
+   gate de pixel, não o olho: 4.573 pixels de diferença numa captura de 0,03 de proporção. */
+.sidebar[popover]:not(:popover-open) { width:auto; inset-inline:auto; inset-block-end:auto; }
+/* Quem esconde a gaveta fechada é ESTA regra, não o `display:none` do UA para `[popover]`:
+   regra de autor vence regra de UA por ORIGEM, e a `.sidebar` já declara `display:flex`.
+   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) {
+  .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; }
+  .sidebar[popover]::backdrop { background:var(--overlay); }
+}
+}
+
+/* ── A LISTA DA LATERAL (PLANO-1.0, item B1) ───────────────────────────────────────
+   Até 06/08/2026 a Sidebar era só a caixa: item, grupo, aninhamento e marca de item atual
+   existiam neste arquivo como `.doc-nav`, que é CHROME do catálogo (achado A6) e nunca foi
+   API pública. Consequência medida: nenhum consumidor conseguia desenhar uma navegação sem
+   reescrevê-la, e a peça já estava aqui.
+   ITEM ATUAL por [aria-current] e não por uma classe `.active`: o estado que o leitor de tela
+   anuncia e o que o olho vê passam a ser o MESMO atributo, então não há como marcar um e
+   esquecer o outro — que é como o `.doc-nav` carrega `.active` E `aria-current` até hoje. */
+.sidebar-nav { display:flex; flex-direction:column; gap:var(--space-1); }
+.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 .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. */
+.sidebar-label { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
+@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; }
+.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); }
+.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.
+   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); }
+
+/* ── Visibilidade responsiva — o mecanismo PADRÃO de colapsar uma barra ─────────────
+   Regra do projeto (enraizada): todo layout horizontal que aperta esconde o secundário
+   por breakpoint da escala, nunca rola de lado. Estas 4 classes são esse mecanismo; o
+   gate (check 4b) trava os breakpoints. Mobile-first: `below` some acima do ponto. */
+@media (max-width:1023px) { .hide-below-lg { display:none !important; } }
+@media (max-width:767px)  { .hide-below-md { display:none !important; } }
+.brand { min-height:var(--topbar-height); display:flex; align-items:center; gap:12px; padding:2px 4px 16px; margin:0 0 16px; border:0; border-bottom:1px solid var(--sidebar-border); border-radius:0; background:transparent; box-shadow:none; }
+.brand strong { display:block; letter-spacing:var(--tracking-tight); } .brand small { display:block; color:var(--muted-foreground); font-size:11px; }
+/* minmax(0,1fr): a trilha `auto` do grid crescia até o nome mais longo e os itens
+   VAZAVAM pela direita da caixa (colavam na borda de um lado e sobrava do outro). */
+  .doc-nav { padding:0 0 8px; display:grid; grid-template-columns:minmax(0,1fr); gap:var(--space-1); }
+/* .nav-group-label é o rótulo de categoria SEM ser título de documento: mesma aparência do
+   h4 histórico, mas o grupo se nomeia por aria-labelledby e não entra na lista de títulos
+   do leitor de tela (senão a lateral vem antes do h1 da página). É o jeito preferido. */
+.doc-nav h4,.doc-nav .nav-group-label { margin:16px 8px 8px; color:var(--subtle-foreground); font-size:11px; letter-spacing:var(--tracking-widest); text-transform:uppercase; }
+.doc-nav .nav-group { display:grid; gap:var(--space-1); }
+.doc-nav a { display:flex; align-items:center; gap:10px; min-height:40px; margin:0; padding:9px 12px; border:1px solid transparent; border-radius:var(--radius-lg); background:transparent; color:var(--muted-foreground); text-decoration:none; box-shadow:none; }
+.doc-nav a:hover { color:var(--sidebar-accent-foreground); background:var(--sidebar-accent); border-color:var(--sidebar-border); }
+.doc-nav a.active { border-color:var(--sidebar-border); }
+/* o glifo da família fica na frente do rótulo e nunca encolhe o texto */
+.doc-nav a .icon { flex:none; opacity:.8; }
+.doc-nav a.active .icon { opacity:1; }
+.eyebrow { display:inline-flex; align-items:center; gap:8px; color:var(--primary); font-size:12px; font-weight:var(--weight-bold); letter-spacing:var(--tracking-widest); text-transform:uppercase; }
+/* No claro o amarelo puro como texto não alcança 4.5:1 (axe). Aprofundar com --foreground
+   mantém o matiz da marca e passa o AA; no escuro segue o amarelo cheio. */
+[data-theme="light"] .eyebrow { color:color-mix(in oklab, var(--primary) 45%, var(--foreground)); }
+.demo { min-width:0; padding:var(--card-pad); border:1px solid var(--border); border-radius:var(--radius-card); background:var(--card); color:var(--card-foreground); box-shadow:none; }
+
+/* ========================================================================== */
+/* 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; }
+/* 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. */
+.btn-xs { height:var(--control-h-xs); padding:0 10px; gap:6px; font-size:var(--text-xs); border-radius:var(--radius-control); }
+.btn-sm { height:var(--control-h-sm); padding:0 12px; font-size:var(--text-xs); border-radius:var(--radius-control); }
+.btn-lg { height:var(--control-h-lg); padding:0 20px; font-size:var(--text-base); border-radius:var(--radius-control); }
+.btn-xl { height:var(--control-h-xl); padding:0 26px; gap:10px; font-size: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%; }
+.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-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-outline { --btn-bg:transparent; --btn-fg:var(--foreground); --btn-border:var(--border-strong); }
+.btn-outline:hover:not(:disabled) { --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-danger { --btn-bg:var(--destructive); --btn-fg:var(--destructive-foreground); --btn-border:transparent; }
+.btn-danger:hover:not(:disabled) { --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-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); }
+[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).
+   Três tons: neutro, marca e destrutivo. No claro a marca aprofunda, senão não passa o AA. */
+/* `min-height:24px` = WCAG 2.2 SC 2.5.8. A exceção de "alvo em linha" NÃO cobre este caso:
+   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-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); }
+/* 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); }
+/* 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; }
+
+/* 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
+   "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-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); }
+/* 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); border-radius:var(--radius-md); }
+/* 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; }
+.btn-group .btn:first-child { margin-inline-start:0; border-radius:var(--radius-control); }
+.btn-group .btn:last-child { border-radius:var(--radius-control); }
+/* 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
+   dimensão e vira um oval num container alto. */
+.toolbar[data-orientation="vertical"] { flex-direction:column; align-items:stretch; border-radius:var(--radius-lg); }
+.toolbar-group { display:flex; align-items:center; gap:var(--space-1); }
+.toolbar-sep { flex:none; align-self:stretch; inline-size:1px; min-block-size:20px; margin-inline:4px; margin-block:0; background:var(--border); border:0; }
+.toolbar[data-orientation="vertical"] .toolbar-sep { align-self:auto; inline-size:auto; block-size:1px; min-block-size:0; margin-inline:0; margin-block:4px; }
+/* Spinner: o glifo existia desde sempre e só era usado por dentro do Button. Ganhou componente
+   e escala no Lote 1, e o eixo passou a ser o dos ÍCONES — mas o tamanho base continua o que
+   sempre foi: `--icon-sm` são os mesmos 16px de antes, então nenhum botão em nenhuma página
+   mudou de aparência. Cheguei a apontar o base para `--icon-md` (20px) e os baselines de pixel
+   acusaram na hora: teria trocado o tamanho do spinner dentro de todo botão sem ninguém pedir.
+   A casa do spinner é dentro de um controle, ao lado de texto; os degraus maiores existem para
+   quando ele é a única coisa na tela. */
+.spinner { width:var(--icon-sm); height:var(--icon-sm); border:2px solid currentColor; border-right-color:transparent; border-radius:50%; animation:spin .7s linear infinite; }
+.spinner-md { width:var(--icon-md); height:var(--icon-md); }
+.spinner-lg { width:var(--icon-lg); height:var(--icon-lg); } @keyframes spin { to { transform:rotate(360deg); } }
+
+.field { display:flex; flex-direction:column; gap:7px; }
+.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; height:var(--control-h-md); padding:0 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); }
+.input:hover,.textarea:hover,.select:hover { border-color:var(--border); }
+.input::placeholder,.textarea::placeholder { color:var(--subtle-foreground); }
+.input:disabled,.textarea:disabled,.select:disabled { opacity:.5; cursor:not-allowed; }
+.input[aria-invalid="true"],.textarea[aria-invalid="true"] { border-color:var(--danger-400); }
+.textarea { min-height:104px; padding:12px 14px; resize:vertical; border-radius:var(--radius-lg); }
+/* chevron: cor = --muted-foreground de cada tema (dark #a1a1a1, light #505050); tokenizar na Fase 1 */
+.select { appearance:none; padding-inline-end:38px; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23a1a1a1' stroke-width='1.6'/%3E%3C/svg%3E"); background-position:calc(100% - 12px) 50%; background-size:12px 8px; background-repeat:no-repeat; }
+[data-theme="light"] .select { background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23505050' stroke-width='1.6'/%3E%3C/svg%3E"); }
+/* Widgets nativos dos campos (calendário do type=date, dropdown do select, scrollbar do textarea) seguem o tema */
+.input,.textarea,.select { color-scheme:dark; }
+[data-theme="light"] .input,[data-theme="light"] .textarea,[data-theme="light"] .select { color-scheme:light; }
+/* NumberField (Lote 1): menos · campo · mais numa peça só, que é onde as referências convergem.
+   O campo é `.input` — a mesma altura, o mesmo raio, o mesmo foco de qualquer campo do sistema.
+   Largura em token para caber de 3 a 4 dígitos sem virar caixa de texto. */
+.number-field { display:inline-flex; }
+.number-field-group { display:inline-flex; align-items:center; gap:var(--space-1); }
+.number-field-input { width:var(--space-16); text-align:center; }
+/* 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); }
+/* 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; }
+.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; }
+.control-mark { width:18px; height:18px; margin-top:1px; display:grid; place-items:center; border:1px solid var(--border-strong); background:var(--field-bg); }
+.checkbox .control-mark { border-radius:5px; } .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:2px solid var(--focus-strong); outline-offset:2px; }
+.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; }
+.switch-track { position:relative; width:42px; height:24px; 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:after { content:""; position:absolute; inset-inline-start:3px; top:3px; width:16px; height:16px; 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(18px); background:var(--control-selected-foreground); }
+.range { width:100%; accent-color:var(--primary); }
+/* 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; }
+.segmented button.active { color:var(--foreground); background:var(--secondary); box-shadow:none; border:0; }
+/* Toggle (Lote 1): pressionado usa o MESMO par de tokens do segmento aceso, logo acima. Um
+   toggle solto e um segmento selecionado dizem a mesma coisa — se parecessem diferentes, o
+   sistema teria dois idiomas para "isto está ligado". O estado vem do motor (`data-pressed`),
+   não de uma classe que alguém precisa lembrar de pôr. */
+.toggle[data-pressed] { --btn-bg:var(--secondary); --btn-fg:var(--primary); }
+/* ── SELECIONADO: uma linguagem só ────────────────────────────────────────────────────
+   Item de nav ativo, aba ativa, item de lista lateral e botão alternado ligado mostram o
+   MESMO sinal: cápsula elevada + rótulo na cor da marca + fio amarelo encostado na borda de
+   baixo. Um usuário aprende uma vez e reconhece em todo lugar (pedido do Victor, 24/07).
+   O fio é 2px (fração de pixel borra), inset 15px, e o amarelo entra a 75% — cheio ele
+   grita mais que o próprio rótulo. 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. */
+.is-selected,.btn-nav[aria-current]:not([aria-current="false"]),.btn[aria-pressed="true"],
+.segmented button.active,.doc-nav a.active { --btn-bg:var(--secondary); --btn-fg:var(--primary); position:relative; background:var(--secondary); color:var(--primary); }
+.is-selected::after,.btn-nav[aria-current]:not([aria-current="false"])::after,
+.btn[aria-pressed="true"]:not(.btn-icon)::after,.segmented button.active::after,
+.doc-nav a.active::after { content:""; position:absolute; inset-inline:15px; bottom:0; height:2px; border-radius:var(--radius-full); background:color-mix(in oklab, var(--primary) 75%, transparent); }
+[data-theme="light"] .is-selected,[data-theme="light"] .btn-nav[aria-current]:not([aria-current="false"]),
+[data-theme="light"] .btn[aria-pressed="true"],[data-theme="light"] .segmented button.active,
+[data-theme="light"] .doc-nav a.active { --btn-fg:color-mix(in oklab, var(--primary) 45%, var(--foreground)); color:color-mix(in oklab, var(--primary) 45%, var(--foreground)); }
+
+/* `line-height:1` não é enfeite: sem ele o .badge herdava a entrelinha do pai e a MESMA
+   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; }
+/* 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-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)); }
+.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
+   volta pra --foreground, senão a frase inteira fica colorida e ilegível no claro. Os
+   nomes operacionais e os semânticos apontam pro mesmo par de tokens de propósito. */
+.status { display:inline-flex; align-items:center; gap:var(--space-2); color:var(--muted-foreground); font-size:var(--text-sm); }
+.status-label { color:var(--foreground); }
+.status-online,.status-success { color:var(--success-400); }
+.status-away,.status-warning { color:var(--warning-400); }
+.status-busy,.status-danger { color:var(--danger-400); }
+.status-running,.status-info { color:var(--info-400); }
+/* offline é o único que NÃO é "mais uma cor": --subtle-foreground e --muted-foreground
+   colapsam no MESMO valor no tema claro, então offline sairia idêntico ao neutral. Ponto
+   VAZADO resolve nos dois temas e ainda diz a coisa certa (ausência, não outro estado).
+   Escopado em .status-offline: o .status-dot dentro do Badge (Chat) segue preenchido. */
+.status-offline { color:var(--subtle-foreground); }
+.status-offline .status-dot { background:transparent; box-shadow:inset 0 0 0 2px currentColor,0 0 0 3px color-mix(in srgb,currentColor 14%,transparent); }
+
+.card { min-width:0; padding:var(--card-pad); border:1px solid var(--border); border-radius:var(--radius-card); background:var(--card); color:var(--card-foreground); box-shadow:none; }
+.card-raised { box-shadow:none; } .card-inset { background:var(--secondary); }
+.card-interactive { cursor:pointer; transition:transform var(--duration-fast),border-color var(--duration-fast),background var(--duration-fast); }
+.card-interactive:hover { transform:translateY(-2px); border-color:var(--border-strong); background:var(--surface-2); }
+.card-selected { border-color:var(--primary-outline); box-shadow:inset 0 0 0 1px var(--primary-outline); }
+.card-danger { border-color:color-mix(in srgb,var(--danger-400) 50%,var(--border)); background:var(--danger-bg); }
+.card-header { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; margin-bottom:16px; }
+.card-title { margin:0; font-size:var(--text-base); } .card-subtitle { margin:3px 0 0; color:var(--muted-foreground); font-size:var(--text-sm); }
+
+.alert { display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:start; gap:12px; padding:14px 16px; border:1px solid var(--border); border-radius:var(--radius-lg); background:var(--secondary); box-shadow:none; }
+/* 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-400) 38%,var(--border)); background:var(--info-bg); }
+.alert-success,.banner-success { border-color:color-mix(in srgb,var(--success-400) 38%,var(--border)); background:var(--success-bg); }
+.alert-warning,.banner-warning { border-color:color-mix(in srgb,var(--warning-400) 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); }
+.alert h4 { margin:0 0 2px; font-size:var(--text-sm); } .alert p { margin:0; color:var(--muted-foreground); font-size:var(--text-sm); }
+.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); }
+.progress>span { display:block; height:100%; border-radius:inherit; background:var(--primary); }
+.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; } }
+
+/* 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); }
+.tab { position:relative; padding:0 14px; border:0; border-radius:var(--radius-control); background:transparent; color:var(--muted-foreground); cursor:pointer; }
+.tab.active,.tab[data-active] { color:var(--foreground); background:var(--secondary); } .tab.active:after,.tab[data-active]:after { display:none; }
+.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); }
+/* 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`,
+   ancorada em -50%) cair no lugar certo. */
+.stepper { display:grid; grid-auto-flow:column; grid-auto-columns:1fr; }
+.step { position:relative; text-align:center; color:var(--subtle-foreground); }
+/* O ponto também morava só no docs.css, como o container. Os estados dele (`.step.done`,
+   `.step.active`) estavam no core e miravam uma regra que não existia aqui — meia peça. */
+.step-dot { position:relative; z-index:1; width:32px; height:32px; margin:0 auto var(--space-2); display:grid; place-items:center; border-radius:50%; border:1px solid var(--border-strong); background:var(--surface-1); }
+/* Erro é o estado que faltava: uma etapa que reprovou na validação não tinha como se mostrar.
+   Cor semântica, não a primária — reprovar não é progredir. */
+.step-error { color:var(--danger-400); } .step-error .step-dot { color:var(--danger-400); border-color:var(--danger-400); }
+.step-optional { display:block; color:var(--muted-foreground); font-size:var(--text-xs); }
+/* Etapa clicável (fluxo não-linear): o alvo é um botão de verdade, com o foco do sistema. */
+.step-trigger { display:contents; border:0; padding:0; background:none; color:inherit; font:inherit; cursor:pointer; }
+.step:before { content:""; position:absolute; top:15px; inset-inline-start:-50%; width:100%; height:2px; background:var(--border); } .step:first-child:before { display:none; }
+.step.done,.step.active { color:var(--foreground); } .step.done:before,.step.active:before { background:var(--primary); } .step.done .step-dot { color:var(--primary-foreground); background:var(--primary); border-color:var(--primary); } .step.active .step-dot { border-color:var(--primary); box-shadow:0 0 0 4px color-mix(in srgb,var(--primary) 14%,transparent); }
+
+/* TABELA DE DADOS — e só ela. Estas cinco regras eram de ELEMENTO (`table`, `th,td`, `th`,
+   `tr:last-child td`, `tbody tr:hover`) e valiam para toda <table> do documento, inclusive a de
+   um consumidor. Nenhum gate as via: os checks 15 e 18 comparam CLASSE, e seletor de elemento
+   não tem nenhuma. O Lote 4 pagou a conta — a grade do calendário nasceu com `min-width:720px`
+   e o cabeçalho de dias herdou a faixa cinza, a caixa alta e o espaçamento de letra de um
+   cabeçalho de tabela de dados. Medido no navegador em 01 e 02/08/2026.
+   Escopar é seguro e foi medido antes: `Table` embrulha em `.table-region` e emite `.table` na
+   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,.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; }
+.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); }
+/* 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
+   quebrava no primeiro uso real. */
+/* B5 do PLANO-1.0: os 36px viraram --control-h-md, que É 2.25rem = os mesmos 36px em
+   `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(--control-h-md); height:var(--control-h-md); 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 { width:var(--control-h-sm); height:var(--control-h-sm); font-size:var(--text-xs); }
+.avatar-lg { width:var(--control-h-lg); height:var(--control-h-lg); }
+.avatar img { width:100%; height:100%; object-fit:cover; }
+/* 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; }
+.avatar-group .avatar { margin-inline-start:-9px; border:2px solid var(--surface-1); } .avatar-group .avatar:first-child { margin-inline-start:0; }
+/* O "+N" é um avatar como os outros — mesma caixa, mesma borda —, só que menor por dentro e sem
+   peso de nome próprio: ele conta, não identifica. */
+.avatar-count { background:var(--secondary); color:var(--muted-foreground); font-size:var(--text-xs); font-weight:var(--weight-medium); }
+.kpi { display:flex; flex-direction:column; gap:5px; }
+/* 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); }
+.data-list dd { min-width:0; margin:0; }
+/* 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
+   alinham por construção em vez de por número copiado. Saem junto os 24px de recuo e os 7px
+   do trilho — dois px crus a menos na catraca do check 12. */
+.timeline { position:relative; display:flex; flex-direction:column; gap:var(--space-5); margin:0; padding:0; list-style:none; }
+.timeline:before { content:""; position:absolute; inset-inline-start:calc(var(--space-3) / 2); inset-block:var(--space-2); width:1px; background:var(--border); }
+.timeline > li { display:flex; align-items:flex-start; gap:var(--space-3); }
+/* A coluna de conteúdo é uma PILHA, e não por estética: sem isso o item empilhava quando
+   tinha descrição (o <p> é bloco) e colava título e horário na mesma linha quando não tinha —
+   "Shipped14:20". Geometria de componente não depende do conteúdo (achados A2/A3). */
+.timeline > li > div { display:flex; flex-direction:column; gap:var(--space-05); min-width:0; }
+.timeline > li > div > p { margin:0; }
+.timeline-dot { flex:none; width:var(--space-3); height:var(--space-3); border-radius:var(--radius-full); margin-block-start:var(--space-1); background:var(--primary); box-shadow:0 0 0 var(--space-05) var(--surface-1); }
+/* Accordion: anatomia medida no Carbon em 30/07/2026 (REFERENCES.md) — cabeçalho na altura de
+   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); }
+/* 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
+   não segue o tema (dark inverteria e nem todo leitor decodifica invertido). Override
+   consciente por --qr-module/--qr-quiet. Módulos suaves (rx no SVG) sem perder escaneabilidade. */
+/* B6 do PLANO-1.0: o tamanho saiu dos atributos width/height do SVG e virou --qr-size, no
+   mesmo idioma dos dois botões de ajuste que este componente já tinha. `md` são os 10rem =
+   160px de antes (com box-sizing:border-box o quiet zone continua por dentro da medida).
+   Três degraus e não um número livre: o número livre era o que obrigava pixel cru no
+   consumidor. Quem precisar de um QR de cartaz sobrescreve --qr-size, que é o mesmo caminho
+   já documentado para trocar a cor dos módulos. */
+.qrcode { --qr-module:#0b0b0c; --qr-quiet:#fff; --qr-size:10rem; box-sizing:border-box; width:var(--qr-size); height:var(--qr-size); padding:var(--space-3); border:1px solid var(--border); border-radius:var(--radius-card); background:var(--qr-quiet); }
+.qrcode-sm { --qr-size:7.5rem; }
+.qrcode-lg { --qr-size:15rem; }
+.qrcode .qr-mod { fill:var(--qr-module); }
+.qrcode .qr-eye-gap { fill:var(--qr-quiet); }
+
+/* `overflow:auto` faz do <pre> uma REGIÃO ROLÁVEL, e região rolável sem nada focável dentro
+   é inalcançável por teclado (axe scrollable-region-focusable). Quem escreve esta marcação à
+   mão precisa de `tabindex="0"` no <pre> — o componente React já o emite. */
+.code-block { overflow:auto; padding:16px; border:1px solid var(--border); border-radius:var(--radius-lg); background:var(--surface-inset); color:var(--muted-foreground); font:12px/1.7 var(--font-code); }
+/* Bloco de código COM copiar: a moldura não rola, o <pre> rola por dentro e o gatilho fica
+   parado no canto. O comportamento é do core (aurea.js, [data-aurea-copy]); aqui só a pele.
+   O check em amarelo é confirmação instantânea — dura 1,5s e volta ao ícone de copiar. */
+/* checkbox com rótulo fora da tela: sem o texto, o alvo é só a marca — nada de gap sobrando. */
+.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; }
+.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); }
+/* "On this page": índice da própria página, fixo na lateral. Navegação, não decoração —
+   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; scrollbar-width:none; padding:var(--space-2) 0; }
+.toc::-webkit-scrollbar { width: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; }
+.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); }
+.toc a.toc-sub { padding-inline-start:var(--space-6); }
+/* `--log-h` é a QUINTA válvula de altura do core, no idioma de `--chart-h` (I4), `--qr-size` (B6),
+   `--datagrid-max-h` (F6) e `--media-h` (I7). Default 240px — o de antes —, então nada muda para
+   quem não passa nada. A causa é medida em 11/08/2026: a altura era FIXA, e por isso três prévias
+   do catálogo gastavam 240px para mostrar três linhas de log e rolavam dentro da caixa de
+   demonstração, contra a ADR-0002. Altura é decisão da página, e não vira prop (check 23). */
+.log-stream { height:var(--log-h,240px); overflow:auto; padding:14px; border:1px solid var(--border); border-radius:var(--radius-md); background:var(--surface-inset); font:12px/1.65 var(--font-code); }
+.log-line { display:grid; grid-template-columns:86px 72px minmax(0,1fr); gap:12px; padding:3px 0; } .log-time { color:var(--subtle-foreground); } .log-level { color:var(--primary); } .log-level.warn { color:var(--warning-400); } .log-level.error { color:var(--danger-400); }
+/* O nível pintado a partir da classe que o pacote React emite no CONTAINER (`log-error`).
+   As duas formas convivem de propósito: `.log-level.warn` serve a apps/docs/index.html,
+   escrito à mão, e sai junto com ele na Parte D. Medido no item E13: sem estas três, a
+   prop `level` do LogStream não pintava nada — pele que existe e não faz nada. */
+.log-info .log-level { color:var(--info-400); }
+.log-warn .log-level { color:var(--warning-400); }
+.log-error .log-level { color:var(--danger-400); }
+
+/* ========================================================================== */
+/* 05. GRÁFICOS E VISUALIZAÇÃO                                                 */
+/* ========================================================================== */
+/* I4 do PLANO-1.0: a altura vira válvula de escape, no MESMO idioma do `--qr-size` e do
+   `--datagrid-max-h` — quem sabe quanta tela tem é quem hospeda, e altura não vira prop
+   numérica (check 23). O default é os mesmos 220px de antes, então nada muda para quem já
+   usa: medido, zero pixel nas capturas. O que ele destrava é a composição — o `I4
+   AnalyticsWorkbench` põe gráfico E tabela na mesma caixa de altura fixa (ADR-0002), e com
+   220 fixos as duas peças sozinhas já passavam do vão do painel em 95px. O fallback é
+   deliberado e é o que o check 29 exige de quem não declara o token. */
+.chart { width:100%; height:var(--chart-h,220px); } .chart-bar.alt { fill:var(--chart-1); } .health-cell.warn { background:var(--warning-500); } .health-cell.bad { background:var(--danger-500); } .health-cell.off { background:var(--surface-3); }
+/* Chart (Lote 3) — a pele do desenho que o Recharts emite. Os seletores são de ELEMENTO, nunca
+   `.recharts-*`: nome de classe de terceiro dentro do core reprovaria o check 15 (o core só
+   declara classe que a Aurea produz), e é a mesma razão pela qual a pele do CodeEditor vem pelo
+   EditorView.theme do CodeMirror e não daqui. O motor põe stroke/fill como ATRIBUTO de
+   apresentação (#ccc nas linhas de grade, #666 nos rótulos), e CSS vence atributo — medido em
+   01/08/2026: 20 <line> e 9 <text> num gráfico de linha com grade e dois eixos. */
+.chart svg line { stroke:var(--border); } .chart svg text { fill:var(--muted-foreground); font-size:var(--text-xs); }
+.chart-tooltip { display:grid; gap:var(--space-1); pointer-events:none; } .chart-tooltip strong { color:var(--foreground); font-weight:var(--weight-medium); }
+.chart-tooltip b { margin-inline-start:auto; color:var(--foreground); font-variant-numeric:tabular-nums; }
+.chart-legend { display:flex; flex-wrap:wrap; justify-content:center; gap:var(--space-1) var(--space-4); margin:0; padding:0; list-style:none; }
+.chart-key { display:flex; align-items:center; gap:var(--space-2); color:var(--muted-foreground); font-size:var(--text-xs); } .chart-key i { flex:none; width:9px; height:9px; border-radius:var(--radius-sm); }
+/* O cursor precisa de DOIS pontos de especificidade porque `.chart svg line` acima já tem dois
+   elementos: `.chart .chart-cursor` (0,2,0) vence `.chart svg line` (0,1,2). Em gráfico de linha
+   o cursor é <line> e em barra é <rect>, então a regra dá stroke E fill — cada um usa o seu. */
+.chart .chart-cursor { stroke:var(--border-strong); fill:var(--secondary); }
+/* Calendar (Lote 4) — a pele da grade que o react-day-picker emite. Mesma regra do Chart e pela
+   mesma razão: nada de `.rdp-*` aqui (o check 15 reprova nome de classe que a Aurea não produz).
+   Três nomes vêm renomeados pela API `classNames` do motor; o resto é ELEMENTO e `data-*`, e
+   atributo não é classe. Estado medido em 01/08/2026: data-selected, data-today, data-outside,
+   data-disabled e data-hidden — este último é obrigatório, senão o dia escondido das pontas
+   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) { 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); }
+/* 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 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[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[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). */
+.message-status { display:flex; align-items:center; flex-wrap:wrap; gap:var(--space-3); margin-block-start:var(--space-2); }
+.message-composer { display:flex; align-items:center; gap:var(--space-3); flex-wrap:nowrap; } .message-composer .input-wrap { flex:1; min-width:0; }
+
+/* ========================================================================== */
+/* 07. MÍDIA                                                                   */
+/* ========================================================================== */
+/* `--media-h` e `--media-ar` são VÁLVULA DE ESCAPE, autorizada pelo Victor em 11/08/2026 no item
+   I7 do PLANO-1.0, e no idioma exato das três que já existem: `--chart-h` (I4), `--qr-size` (B6) e
+   `--datagrid-max-h` (F6). O default é o de antes — 360px e 16/9 —, então nada muda para quem não
+   passa nada. A causa é medida: numa caixa de demonstração de 826px de largura o `aspect-ratio`
+   produz 464px de altura, contra um vão útil de 354; o player não cabe numa composição, e o
+   `MediaPlayer` não repassa `style` para esta caixa (as props sobrando vão para o `<video>`, de
+   propósito). Quem sabe quanta altura tem é a página, e altura não vira prop (check 23).
+   ⚠ `--media-ar:auto` SÓ é seguro junto com `--media-h`. A razão do `aspect-ratio` aqui não é
+   estética: é CLS. O exemplo de playlist do `media-chrome` declara o mesmo com o motivo escrito —
+   sem proporção fixa, um player com `preload=none` mede zero até a mídia chegar e a página SALTA.
+   Tirar a proporção sem fixar a altura devolve o salto. */
+.media-player { position:relative; isolation:isolate; overflow:hidden; min-height:var(--media-h,360px); aspect-ratio:var(--media-ar,16/9); border:1px solid var(--border); border-radius:var(--radius-card); background:var(--media-canvas); color:var(--media-foreground); }
+.media-viewport { position:absolute; inset:0; display:grid; place-items:center; background:var(--media-canvas); }
+.media-fill { width:100%; height:100%; object-fit:contain; } /* vídeo React preenche o viewport (auditoria 18/07, M14) */
+.media-placeholder { display:grid; place-items:center; gap:10px; color:var(--media-muted); text-align:center; }
+.media-placeholder .icon { width:48px; height:48px; color:var(--media-foreground); }
+.media-placeholder strong { color:var(--media-foreground); }
+.media-overlay-title { position:absolute; top:16px; inset-inline:16px; z-index:2; display:flex; align-items:flex-start; justify-content:space-between; gap:16px; color:var(--media-foreground); }
+.media-overlay-title>div>span { display:block; color:var(--media-muted); font-size:var(--text-xs); }
+.media-player .badge { border-color:var(--media-track); background:var(--media-track); color:var(--media-foreground); }
+.media-controls { position:absolute; inset:auto 0 0; z-index:3; display:grid; gap:8px; padding:12px; background:var(--media-scrim); color:var(--media-foreground); }
+.media-seek { --media-played:34%; position:relative; height:20px; display:flex; align-items:center; }
+.media-seek-track { position:absolute; inset-inline:0; height:4px; overflow:hidden; border-radius:var(--radius-full); background:var(--media-track); pointer-events:none; }
+.media-seek-buffered,.media-seek-played { position:absolute; inset-block:0; inset-inline:0 auto; border-radius:inherit; }
+.media-seek-buffered { width:62%; background:var(--media-buffered); }
+.media-seek-played { width:var(--media-played); background:var(--primary); }
+.media-seek input { position:relative; z-index:1; width:100%; height:20px; margin:0; appearance:none; background:transparent; cursor:pointer; }
+.media-seek input::-webkit-slider-runnable-track { height:4px; background:transparent; }
+.media-seek input::-webkit-slider-thumb { width:14px; height:14px; margin-top:-5px; appearance:none; border:2px solid var(--media-foreground); border-radius:50%; background:var(--primary); }
+.media-seek input::-moz-range-track { height:4px; background:transparent; }
+.media-seek input::-moz-range-thumb { width:12px; height:12px; border:2px solid var(--media-foreground); border-radius:50%; background:var(--primary); }
+.media-seek input:focus-visible { outline:2px solid var(--primary); outline-offset:3px; box-shadow:none; }
+.media-control-row,.media-control-group { display:flex; align-items:center; gap:4px; }
+.media-control-row { min-width:0; justify-content:space-between; }
+.media-control { min-width:36px; height:36px; display:inline-grid; place-items:center; padding:0 8px; border:1px solid transparent; border-radius:var(--radius-md); background:transparent; color:var(--media-foreground); cursor:pointer; }
+.media-control:hover,.media-control.active { background:var(--media-track); color:var(--primary); }
+.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); }
+
+/* ========================================================================== */
+/* 08. ÍCONES                                                                  */
+/* ========================================================================== */
+.icon-search { max-width:420px; }
+.icon-category { margin-top:26px; } .icon-category h3 { margin:0 0 12px; font-size:var(--text-base); }
+.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(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; }
+.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); }
+/* 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
+   a palavra "command" numa string do pacote React e o gate lê as strings do fonte. Foi para
+   apps/docs/docs.css, que é a casa dela; o sistema fica com os dois nomes que o componente
+   emite de verdade. Não-modal de propósito, como a gaveta do AppShell (ADR-0003): o foco não
+   fica preso, então não declaramos modalidade que não entregamos. */
+.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; }
+.menu { z-index:var(--z-modal); min-width:200px; max-width:min(320px,calc(100vw - 32px)); padding:6px; border:1px solid var(--border); border-radius:var(--radius-lg); background:var(--popover); color:var(--popover-foreground); box-shadow:var(--shadow-lg); }
+.menu-item { display:flex; align-items:center; gap:10px; width:100%; min-height:var(--control-h-md); padding:0 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; }
+.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. */
+.combobox-group { position:relative; display:flex; align-items:center; }
+.combobox-group .input { padding-inline-end:calc(var(--control-h-sm) * 2 + 10px); }
+.combobox-actions { position:absolute; inset-inline-end:5px; display:flex; align-items:center; gap:2px; }
+.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; }
+.combobox-empty { padding:12px 10px; color:var(--muted-foreground); font-size:var(--text-sm); }
+.combobox-empty:empty { display:none; }
+.combobox-item { display:grid; grid-template-columns:16px minmax(0,1fr); gap:8px; align-items:center; }
+.combobox-check { display:inline-flex; color:var(--primary); }
+/* MultiCombobox (Fase 4) — chips de multi-seleção + grupos. Espaçamento novo tokenizado. */
+.combobox-multi { display:flex; align-items:center; gap:var(--space-2); width:100%; min-width:0; min-height:var(--control-h-md); padding:var(--space-1) var(--space-2); background:var(--field-bg); border:1px solid var(--border-strong); border-radius:var(--radius-control); transition:border-color var(--duration-fast); }
+.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; }
+.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; }
+.combobox-chip-remove:hover { color:var(--foreground); }
+.combobox-chip-input { flex:1; min-width:6ch; height:var(--control-h-sm); border:0; background:transparent; padding:0 var(--space-1); color:var(--foreground); }
+.combobox-chip-input::placeholder { color:var(--subtle-foreground); }
+.combobox-chip-input:focus-visible { outline:none; }
+.combobox-group-label { padding:var(--space-1) var(--space-2); color:var(--muted-foreground); font-size:var(--text-xs); font-weight:var(--weight-semibold); }
+/* FileInput / DropZone (Fase 4) — só a UI de entrada; upload real é a Fase 5.
+   A zona é um <label> em volta do <input> nativo: clique/foco/teclado de graça,
+   o arrastar-soltar é reforço. Espaçamento novo tokenizado; superfície = card. */
+.dropzone { display:flex; flex-direction:column; align-items:center; gap:var(--space-2); padding:var(--space-8) var(--space-6); text-align:center; color:var(--muted-foreground); background:var(--surface-inset); border:1px dashed var(--border-strong); border-radius:var(--radius-card); cursor:pointer; transition:border-color var(--duration-fast),background-color var(--duration-fast); }
+.dropzone:hover { border-color:var(--border); }
+.dropzone:focus-within { outline:2px solid var(--focus-strong); outline-offset:2px; border-color:var(--focus-strong); }
+.dropzone[data-dragging="true"] { border-style:solid; border-color:var(--primary); background:var(--surface-2); }
+.dropzone strong { color:var(--foreground); }
+.dropzone-icon { color:var(--primary); }
+.dropzone-hint { font-size:var(--text-xs); }
+.file-list { display:flex; flex-direction:column; gap:var(--space-2); margin-top:var(--space-3); padding:0; list-style:none; }
+.file-item { display:flex; align-items:center; gap:var(--space-3); padding:var(--space-2) var(--space-3); background:var(--surface-2); border:1px solid var(--border); border-radius:var(--radius-md); }
+.file-progress { flex-basis:var(--space-20); flex-shrink:0; } /* largura fixa da barra de upload (auditoria 18/07, M14) */
+.file-name { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
+.file-size { flex:none; color:var(--muted-foreground); font-size:var(--text-xs); font-variant-numeric:tabular-nums; }
+
+/* TreeView (Fase 4) — árvore headless própria (Base UI 1.6 não tem tree).
+   role=tree/treeitem/group + roving tabindex vêm do React; aqui só a pele.
+   A indentação por nível é padding-inline-start inline (style). Espaço novo
+   tokenizado; a linha não é pill (radius-sm, como o .menu-item). */
+.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-sm); color:var(--foreground); cursor:pointer; user-select:none; }
+.tree-node:hover { background:var(--surface-3); }
+.tree-item:focus-visible > .tree-node { outline:2px solid var(--focus-strong); outline-offset:-2px; }
+.tree-node[data-selected] { background:color-mix(in srgb,var(--primary) 14%,transparent); }
+.tree-twist { flex:none; color:var(--muted-foreground); transition:transform var(--duration-fast); }
+.tree-item[aria-expanded="true"] > .tree-node > .tree-twist { transform:rotate(90deg); }
+.tree-item[aria-expanded="false"]:dir(rtl) > .tree-node > .tree-twist { transform:rotate(180deg); }
+.tree-indent { flex:none; width:1rem; }
+.tree-label { flex:1; 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
+   (não é pill, como o .menu-item/.tree-node). O painel NÃO é live region — a
+   chegada é anunciada por um role=status à parte no React. */
+.notification-trigger { position:relative; display:inline-flex; }
+.notification-count { position:absolute; inset-block-start:-4px; inset-inline-end:-4px; display:inline-flex; align-items:center; justify-content:center; min-width:18px; height:18px; padding:0 var(--space-1); border-radius:var(--radius-control); background:var(--primary); color:var(--primary-foreground); font-size:var(--text-xs); font-weight:var(--weight-semibold); line-height:var(--leading-none); pointer-events:none; }
+.notification-panel { width:min(360px,calc(100vw - 32px)); max-width:none; padding:0; gap:0; display:flex; flex-direction:column; overflow:hidden; }
+.notification-head { display:flex; align-items:center; justify-content:space-between; gap:var(--space-3); padding:var(--space-3) var(--space-4); border-block-end:1px solid var(--border); }
+.notification-head strong { font-size:var(--text-sm); }
+.notification-list { margin:0; padding:var(--space-1); overflow-y:auto; max-height:min(60vh,440px); }
+.notification-sublist { margin:0; padding:0; list-style:none; }
+.notification-group-label { margin:0; padding:var(--space-2) var(--space-3) var(--space-1); color:var(--muted-foreground); font-size:var(--text-xs); font-weight:var(--weight-semibold); letter-spacing:var(--tracking-wide); text-transform:uppercase; }
+.notification-item { display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:baseline; column-gap:var(--space-3); row-gap:var(--space-1); width:100%; padding:var(--space-3); border:0; border-radius:var(--radius-sm); background:none; color:var(--foreground); font:inherit; text-align:start; }
+button.notification-item { cursor:pointer; }
+button.notification-item:hover { background:var(--surface-3); }
+.notification-item:focus-visible { outline:2px solid var(--focus-strong); outline-offset:-2px; }
+.notification-dot { grid-row:1/-1; align-self:center; width:8px; height:8px; border-radius:50%; background:var(--primary); }
+.notification-item[data-read] .notification-dot { visibility:hidden; }
+.notification-item-title { grid-column:2; display:flex; align-items:center; gap:var(--space-2); min-width:0; font-size:var(--text-sm); font-weight:var(--weight-medium); }
+.notification-item[data-read] .notification-item-title { color:var(--muted-foreground); font-weight:var(--weight-regular); }
+.notification-item-desc { grid-column:2; color:var(--muted-foreground); font-size:var(--text-xs); }
+.notification-time { grid-column:3; grid-row:1; color:var(--muted-foreground); font-size:var(--text-xs); white-space:nowrap; }
+.notification-empty { margin:0; padding:var(--space-8) var(--space-4); color:var(--muted-foreground); font-size:var(--text-sm); text-align:center; }
+/* EmptyState é o membro GRANDE da família "aqui não há nada" — .notification-empty acima e
+   .datagrid-empty abaixo já respondiam a mesma pergunta do mesmo jeito (centralizado, muted),
+   e o componente público era o único dos três sem regra (achado A13). A ordem das partes
+   (imagem → título → corpo → ação) é a do padrão de empty state do Carbon, registrado em
+   REFERENCES.md; a pele é Aurea. O título vinha com o h3 do NAVEGADOR (16,38px). */
+.empty-state { display:flex; flex-direction:column; align-items:center; gap:var(--space-3); padding:var(--space-10) var(--space-6); color:var(--muted-foreground); text-align:center; }
+.empty-state > .icon { color:var(--subtle-foreground); }
+.empty-state p { max-width:46ch; margin:0; }
+.empty-title { margin:0; color:var(--foreground); font-size:var(--text-base); font-weight:var(--weight-semibold); line-height:var(--leading-tight); }
+
+/* DataGrid (Fase 4) — TanStack Table v8 headless; aqui só a pele, que reusa
+   .table-wrap/table/th/td. aria-sort fica só no th ordenado; a linha
+   selecionada usa data-selected (o estado acessível é o checkbox da linha).
+   Espaço novo tokenizado. */
+.datagrid { display:grid; gap:var(--space-3); }
+.datagrid > .table-wrap:focus-visible { outline:none; box-shadow:0 0 0 3px color-mix(in oklab,var(--focus) 38%,transparent); }
+.datagrid > .pagination { justify-self:end; }
+/* Fix aditivo: os 34px dos botões numéricos do .pagination esmagavam os botões
+   de TEXTO (Anterior/Próxima) do Pagination React. Não muda os numéricos. */
+/* text-transform/letter-spacing: o UA reseta nos <button>; herdar explícito
+   para o cabeçalho ordenável ficar idêntico ao th estático. */
+.datagrid-sort { display:inline-flex; align-items:center; gap:var(--space-1); padding:0; border:0; background:none; color:inherit; font:inherit; text-transform:inherit; letter-spacing:inherit; cursor:pointer; }
+.datagrid-sort:focus-visible { outline:2px solid var(--focus-strong); outline-offset:2px; border-radius:var(--radius-sm); }
+.datagrid-sort-icon { flex:none; color:var(--subtle-foreground); }
+th[aria-sort] .datagrid-sort-icon { color:var(--primary); }
+.datagrid-selcol { width:1%; white-space:nowrap; }
+
+/* F3: a linha de filtro é do PRÓPRIO cabeçalho, então herda o recuo lateral das
+   células e nasce alinhada com a coluna — ninguém escreve alinhamento aqui.
+   As três declarações abaixo foram provadas UMA A UMA no navegador, tirando cada
+   uma e medindo de novo: sem `text-transform` o campo digita em MAIÚSCULAS; sem
+   `vertical-align` os dois controles (36px e 40px) começam em linhas diferentes;
+   sem `gap:0` o rótulo só-para-leitor-de-tela cobra 7px de vão.
+   Três outras foram escritas e MORRERAM na mesma prova, por não mudarem nada:
+   `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; }
+.datagrid-filters .field { gap:0; }
+
+/* F6: cabeçalho fixo. A `.table-wrap` já é o contêiner de rolagem (overflow:auto),
+   e é ELE que ancora o sticky — não a janela. Por isso a altura precisa de teto:
+   sem teto a caixa nunca rola por dentro e o cabeçalho nunca teria de grudar.
+   `--datagrid-max-h` é a válvula de escape, no mesmo idioma do `--qr-size`: quem
+   sabe quanta tela tem é o consumidor, e altura não vira prop numérica (check 23).
+   A linha de FILTRO gruda logo abaixo do cabeçalho, e o deslocamento é `--row-h`
+   porque é essa a altura da célula de cabeçalho — medido, não deduzido. */
+.datagrid-sticky .table-wrap { max-block-size:var(--datagrid-max-h,60vh); }
+/* `z-index:1` fica DECLARADO COMO PRECAUÇÃO, não como fato provado: não consegui
+   medi-lo (elementFromPoint usa coordenada de janela, e a grade está a 7000px de
+   rolagem na página de prova). É prática corrente para cabeçalho fixo — sem ele o
+   fundo da linha do corpo pode passar por cima —, e removê-lo por não ter gate
+   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); }
+
+/* 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; }
+.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:2px solid var(--focus-strong); outline-offset:1px; }
+
+/* F8: o esqueleto dentro da célula. Sem altura própria ele mede zero — a `.skeleton`
+   é uma <div> vazia — e a linha de carregamento sairia rasa demais para parecer uma
+   linha. `1em` acompanha a tipografia em vez de fixar pixel. */
+.datagrid-skeleton { block-size:1em; }
+
+/* F9: lista e detalhe lado a lado.
+   LIMITE DECLARADO: a decisão é por largura de JANELA, não da grade. O `@container`
+   seria mais certo — quem sabe se o painel cabe é a grade — e foi tentado: exige
+   `container-type:inline-size` num ancestral, e pôr isso na `.datagrid` dá a ela
+   contenção de tamanho, o que COLAPSA a grade dentro de um pai que encolhe para
+   caber (float, inline-block, item de flex com largura automática). Trocar um
+   defeito de layout raro por um defeito de layout comum não vale. Consequência
+   honesta: grade estreita dentro de janela larga divide mesmo assim — o escape é
+   `--datagrid-detail-w`. */
+.datagrid-split { display:grid; gap:var(--space-3); align-items:start; }
+@media (min-width:768px) {
+  .datagrid-split { grid-template-columns:1fr var(--datagrid-detail-w,20rem); }
+}
+.datagrid-detail { border:1px solid var(--border); border-radius:var(--radius-card); background:var(--card); padding:var(--space-4); }
+.datagrid-detail-head { display:flex; justify-content:flex-end; }
+
+/* G2: a ação de conjunto fica à direita, acima da fila — perto do que ela comanda e
+   fora do caminho de leitura da lista. */
+.file-queue-actions { display:flex; justify-content:flex-end; }
+
+/* G3/G4: a miniatura ocupa o mesmo espaço do ícone que ela substitui — a linha da
+   fila não muda de altura por ter prévia. `object-fit:cover` porque foto não é
+   quadrada e deformar a prévia mente sobre o arquivo. */
+.file-thumb { flex:none; inline-size:var(--space-5); block-size:var(--space-5); border-radius:var(--radius-sm); object-fit:cover; }
+.file-checksum { color:var(--muted-foreground); font-family:var(--font-code); font-size:var(--text-xs); }
+
+/* G5/G6: a escolha do conflito e o recibo. Os dois são superfície de card porque são
+   blocos de decisão e de registro, não linhas da fila. */
+.file-conflict { display:flex; flex-wrap:wrap; align-items:center; gap:var(--space-2); padding:var(--space-3); border:1px solid var(--border); border-radius:var(--radius-card); background:var(--surface-2); }
+.file-receipt { padding:var(--space-3); border:1px solid var(--border); border-radius:var(--radius-card); background:var(--card); }
+.file-receipt-head { display:flex; align-items:center; justify-content:space-between; gap:var(--space-2); }
+.file-receipt ul { margin:0; padding-inline-start:var(--space-5); color:var(--muted-foreground); font-size:var(--text-sm); }
+
+/* Parte H — a camada operacional. As três primeiras peças são COMPOSIÇÃO: `.card` já
+   dá a superfície flutuante, `.status` já dá o estado, `.data-list` já dá o par
+   termo/valor. O que falta é só o arranjo — e arranjo é o que não vem de graça. */
+.agent-card { display:grid; gap:var(--space-3); }
+.agent-card-head { display:flex; align-items:center; gap:var(--space-3); }
+.agent-card-id { display:grid; flex:1; min-inline-size:0; }
+.agent-card-desc { margin:0; color:var(--muted-foreground); }
+.agent-caps { display:flex; flex-wrap:wrap; gap:var(--space-2); margin:0; padding:0; list-style:none; }
+.agent-cap { display:inline-flex; align-items:center; gap:var(--space-1); padding:var(--space-1) var(--space-3); border:1px solid var(--border); border-radius:var(--radius-control); font-size:var(--text-sm); }
+.agent-card-actions { display:flex; justify-content:flex-end; gap:var(--space-2); }
+.agent-inspector { display:grid; gap:var(--space-4); }
+.agent-inspector-head { display:flex; align-items:center; justify-content:space-between; }
+.agent-inspector-section { display:grid; gap:var(--space-2); }
+.agent-inspector-label { margin:0; color:var(--subtle-foreground); font-size:var(--text-xs); letter-spacing:var(--tracking-wider); text-transform:uppercase; font-weight:var(--weight-bold); }
+
+/* H.b — a execução. O passo dobrável é `<details>` nativo, então a marca de aberto/
+   fechado já é do navegador; o que se acrescenta é o arranjo e o traço de estado. */
+.invocation { display:grid; gap:var(--space-4); }
+.invocation-head { display:flex; align-items:center; justify-content:space-between; gap:var(--space-3); }
+.invocation-io { display:grid; gap:var(--space-2); }
+.invocation-label { margin:0; color:var(--subtle-foreground); font-size:var(--text-xs); letter-spacing:var(--tracking-wider); text-transform:uppercase; font-weight:var(--weight-bold); }
+.invocation-steps { display:grid; gap:var(--space-2); margin:0; padding:0; list-style:none; }
+/* O estado do passo entra por BORDA lateral, não por cor de fundo: fundo colorido
+   compete com o texto do passo, e a borda diz o mesmo sem disputar leitura. */
+.invocation-step { padding-inline-start:var(--space-3); border-inline-start:2px solid var(--border); }
+.invocation-step[data-state="running"] { border-inline-start-color:var(--primary); }
+.invocation-step[data-state="error"] { border-inline-start-color:var(--danger-400); }
+.invocation-step-body { padding-block-start:var(--space-2); }
+
+.task-queue { display:grid; gap:var(--space-3); margin:0; padding:0; list-style:none; }
+.task-item { display:grid; gap:var(--space-2); padding:var(--space-3); border:1px solid var(--border); border-radius:var(--radius-card); background:var(--card); }
+.task-line { display:flex; align-items:center; gap:var(--space-2); }
+.task-title { flex:1; min-inline-size:0; font-weight:var(--weight-medium); }
+.task-desc { margin:0; color:var(--muted-foreground); font-size:var(--text-sm); }
+
+/* H.c — governança da ação. */
+.approval { display:grid; gap:var(--space-3); }
+.approval-head { display:flex; align-items:center; justify-content:space-between; gap:var(--space-3); }
+.approval-desc, .approval-reason { margin:0; }
+.approval-reason { color:var(--muted-foreground); font-size:var(--text-sm); }
+/* Negar vem ANTES de aprovar na ordem de leitura e de tabulação: a ação destrutiva
+   não deve ser a primeira a receber foco nem a mais fácil de acertar sem ler. */
+.approval-actions { display:flex; justify-content:flex-end; gap:var(--space-2); }
+.tool-permission-list { display:grid; gap:var(--space-3); margin:0; padding:0; list-style:none; }
+.tool-permission-item { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:var(--space-3); }
+.tool-permission-id { display:flex; flex-wrap:wrap; align-items:baseline; gap:var(--space-2); min-inline-size:0; }
+.tool-permission-scope { padding:0 var(--space-1); border-radius:var(--radius-sm); background:var(--surface-2); font-family:var(--font-code); font-size:var(--text-xs); }
+
+/* H.d — a observação. */
+.event-stream { display:grid; gap:var(--space-2); }
+/* O feed é do GRUPO: `role="feed"` só aceita `article` como filho, então o rótulo do grupo
+   mora FORA dele. Ver o comentário do EventStream — a regra é do ARIA, não de estilo. */
+.event-group-feed { display:grid; gap:var(--space-2); }
+.event-group { margin:var(--space-3) 0 0; color:var(--subtle-foreground); font-size:var(--text-xs); letter-spacing:var(--tracking-wider); text-transform:uppercase; font-weight:var(--weight-bold); }
+.event-item { display:flex; align-items:baseline; gap:var(--space-3); }
+.event-body { display:grid; flex:1; min-inline-size:0; }
+/* O ponto do evento é o MESMO tamanho e a mesma escala do ponto do Status: dois
+   indicadores de gravidade com tamanhos diferentes na mesma tela leem como coisas
+   diferentes, e não são. */
+.event-dot { flex:none; inline-size:var(--space-2); block-size:var(--space-2); border-radius:var(--radius-full); background:var(--muted-foreground); }
+.event-item[data-severity="success"] .event-dot { background:var(--success-400); }
+.event-item[data-severity="warning"] .event-dot { background:var(--warning-400); }
+.event-item[data-severity="danger"] .event-dot { background:var(--danger-400); }
+.event-time { flex:none; color:var(--muted-foreground); font-family:var(--font-code); font-size:var(--text-xs); }
+
+.trace { display:grid; gap:var(--space-1); margin:0; padding:0; list-style:none; }
+/* A profundidade do span entra como RECUO, e por variável: a cascata precisa mostrar
+   quem chamou quem, e recuar por nível é o que a referência faz sem precisar desenhar
+   linhas de ligação. */
+/* O RÓTULO é quem cede, e a barra tem piso. A primeira versão era
+   `minmax(6rem,14rem) 1fr`, e num painel estreito o rótulo comia tudo: medido no catálogo em
+   09/08/2026, as colunas resolviam `224px 24px` e a cascata inteira desenhava em 24px — barras
+   de 24, 5, 6 e **0** pixels. O `1fr` só recebe a sobra, e não havia sobra. Com o mínimo do
+   lado da BARRA e o rótulo podendo encolher até zero, quem trunca é o texto, que já tem
+   reticência para isso — e o dado, que é a barra, nunca desaparece. */
+.trace-span { display:grid; grid-template-columns:minmax(0,14rem) minmax(8rem,1fr); align-items:center; gap:var(--space-3); padding-inline-start:calc(var(--trace-depth,0) * var(--space-3)); }
+.trace-label { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:var(--text-sm); }
+.trace-track { position:relative; block-size:var(--space-3); border-radius:var(--radius-full); background:var(--surface-2); }
+.trace-bar { position:absolute; inset-block:0; border-radius:var(--radius-full); background:var(--primary); }
+.trace-span[data-error] .trace-bar { background:var(--danger-400); }
+
+.health-matrix { display:grid; grid-template-columns:repeat(auto-fill,minmax(12rem,1fr)); gap:var(--space-3); margin:0; padding:0; list-style:none; }
+.health-cell { display:grid; gap:var(--space-1); padding:var(--space-3); border:1px solid var(--border); border-radius:var(--radius-card); background:var(--card); }
+.health-name { font-weight:var(--weight-medium); }
+
+/* H.e — custo e memória.
+   O número total é o `TotalMetric` da referência, e ele é UMA linha de arranjo: a escala
+   tipográfica da Aurea vai só até `--text-base`, e o `text-3xl` de lá é a identidade DELA.
+   Aqui o destaque vem do peso e do contraste com o rótulo em `--text-xs`, não de um degrau
+   de fonte que a escala não tem. Compartilhado pelo ModelUsage e pelo CostMeter porque é a
+   mesma coisa nos dois — duas classes diriam que são duas. */
+.metric-total { display:flex; align-items:baseline; gap:var(--space-2); }
+.metric-total strong { font-size:var(--text-base); font-weight:var(--weight-bold); font-variant-numeric:tabular-nums; }
+
+.model-usage { display:grid; gap:var(--space-3); }
+.model-usage-list { display:grid; gap:var(--space-2); margin:0; padding:0; list-style:none; }
+/* Mesma regra do `.trace-span`, e pelo mesmo defeito medido no mesmo dia: o mínimo fica do
+   lado da BARRA, e o nome do modelo encolhe com reticência. Barra sem piso desaparece antes
+   do texto, e é ela que carrega o dado. */
+.model-usage-row { display:grid; grid-template-columns:minmax(0,12rem) minmax(8rem,1fr) auto; align-items:center; gap:var(--space-3); }
+.model-usage-name { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:var(--text-sm); }
+/* A trilha mede o MESMO que a do rastro: são os dois um `meter`, e dois medidores de
+   alturas diferentes na mesma aplicação leem como coisas diferentes — não são. */
+.model-usage-track { position:relative; block-size:var(--space-3); border-radius:var(--radius-full); background:var(--surface-2); }
+.model-usage-bar { position:absolute; inset-block:0; inset-inline-start:0; border-radius:var(--radius-full); background:var(--primary); }
+.model-usage-value { font-size:var(--text-sm); font-variant-numeric:tabular-nums; }
+
+.cost-meter { display:grid; gap:var(--space-3); }
+.cost-meter-track { position:relative; block-size:var(--space-3); border-radius:var(--radius-full); background:var(--surface-2); }
+.cost-meter-bar { position:absolute; inset-block:0; inset-inline-start:0; border-radius:var(--radius-full); background:var(--primary); }
+/* Estourar o teto muda a BARRA, e não o fundo do cartão: fundo colorido num cartão inteiro
+   é o que a Aurea não faz, e a barra é justamente a peça que fala de quantidade.
+   O limite BRANDO não tem cor, e isso foi MEDIDO, não escolhido por gosto: no tema escuro
+   `--warning-400` É `var(--brand-yellow)`, o mesmo valor de `--primary`. Uma barra "de
+   aviso" ali sairia idêntica à barra normal — degrau invisível justo em metade dos temas.
+   O aviso do limite brando sai por PALAVRA, no Alert, que é o mesmo critério dos cinco
+   estados do HealthMatrix. A cor fica para o limite rígido, onde o vermelho separa nos dois. */
+.cost-meter[data-state="over"] .cost-meter-bar { background:var(--danger-400); }
+
+.memory-ledger { display:grid; gap:var(--space-2); margin:0; padding:0; list-style:none; }
+.memory-entry { display:grid; gap:var(--space-1); padding:var(--space-3); border:1px solid var(--border); border-radius:var(--radius-card); background:var(--card); }
+.memory-line { display:flex; flex-wrap:wrap; align-items:baseline; gap:var(--space-2); }
+.memory-content { flex:1; min-inline-size:0; }
+.memory-time { flex:none; color:var(--muted-foreground); font-family:var(--font-code); font-size:var(--text-xs); }
+/* Esquecida continua NA LISTA, riscada: o livro-razão registra o lançamento, não o estado
+   final. Sumir com a linha apaga exatamente o que se procura quando o agente para de
+   saber uma coisa. O risco não é a única marca — o selo ao lado diz "Forgotten" em palavra. */
+.memory-entry[data-operation="forgotten"] .memory-content { color:var(--muted-foreground); text-decoration:line-through; }
+.memory-provenance { font-size:var(--text-sm); }
+.memory-provenance summary { color:var(--subtle-foreground); font-size:var(--text-xs); letter-spacing:var(--tracking-wider); text-transform:uppercase; cursor:pointer; }
+.memory-source { margin:var(--space-2) 0 0; color:var(--muted-foreground); font-size:var(--text-sm); }
+
+/* H.f — a relação. */
+.agent-messages { display:grid; gap:var(--space-2); margin:0; padding:0; list-style:none; }
+.agent-message { display:grid; gap:var(--space-1); padding:var(--space-3); border:1px solid var(--border); border-radius:var(--radius-card); background:var(--card); }
+/* O recado que FALHOU muda a borda, não o fundo: é o mesmo tratamento do passo do
+   `InvocationPanel`, e pelo mesmo motivo — fundo colorido disputa leitura com o texto. */
+.agent-message[data-kind="error"] { border-color:var(--danger-400); }
+.agent-message-line { display:flex; flex-wrap:wrap; align-items:center; gap:var(--space-2); }
+.agent-message-route { display:inline-flex; align-items:center; gap:var(--space-1); flex:1; min-inline-size:0; }
+.agent-message-arrow { flex:none; color:var(--muted-foreground); }
+.agent-message-time { flex:none; color:var(--muted-foreground); font-family:var(--font-code); font-size:var(--text-xs); }
+.agent-message-body { margin:0; }
+.agent-message-why { font-size:var(--text-sm); }
+.agent-message-why summary { color:var(--subtle-foreground); font-size:var(--text-xs); letter-spacing:var(--tracking-wider); text-transform:uppercase; font-weight:var(--weight-bold); cursor:pointer; }
+.agent-message-reason { margin:var(--space-2) 0 0; color:var(--muted-foreground); font-size:var(--text-sm); }
+
+.automation { display:grid; gap:var(--space-3); }
+.automation-head { display:flex; align-items:flex-start; justify-content:space-between; gap:var(--space-3); }
+.automation-id { display:grid; flex:1; min-inline-size:0; }
+/* Regra DESLIGADA não some e não muda de cor — ela recua. O interruptor ao lado já diz o
+   estado em palavra e em teclado; apagar o cartão esconderia justamente a regra que alguém
+   precisa achar para religar. */
+.automation:not([data-enabled]) .automation-id { color:var(--muted-foreground); }
+.automation-foot { display:flex; flex-wrap:wrap; align-items:center; gap:var(--space-3); }
+
+/* H14 — o grafo. A pele do MOTOR entra por variável, e nenhuma classe dele aparece aqui:
+   o `@xyflow/react` publica tudo como `var(--xy-algo, --xy-algo-default)`, e sobrescrever a
+   variável na nossa raiz vale para toda a árvore dele (propriedade customizada herda). Escrever
+   `.react-flow__*` no core resolveria igual e criaria uma classe que componente nenhum daqui
+   produz — o check 15 existe exatamente para barrar isso. O consumidor importa o `base.css`
+   do motor (estrutura); o `style.css` dele, que é a identidade deles, nunca entra. */
+/* `inline-size:100%` não é enfeite, é a mesma lição do Chart: painel de demo é flex, e uma
+   caixa de largura automática entra como item que encolhe — medido no catálogo, a tela do grafo
+   deu 71px e os nós saíram todos para fora dela. A tela ocupa o que lhe derem. */
+.dependency-graph { inline-size:100%; block-size:28rem; border:1px solid var(--border); border-radius:var(--radius-card); background:var(--card); overflow:hidden;
+  --xy-background-color:transparent;
+  --xy-background-pattern-color:var(--border);
+  --xy-edge-stroke:var(--muted-foreground);
+  --xy-edge-stroke-selected:var(--primary);
+  --xy-edge-label-color:var(--muted-foreground);
+  --xy-edge-label-background-color:var(--card);
+  --xy-connectionline-stroke:var(--primary);
+  --xy-attribution-background-color:transparent; }
+/* 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
+   lição que o `table { min-width:720px }` do Lote 4 deixou: regra de elemento no core não tem
+   gate, então escreva-a presa a alguma coisa nossa ou ela é global.
+   E leva `[href]` para GANHAR de `.react-flow__attribution a`, que tem a MESMA especificidade
+   e vem depois na folha do consumidor. Subir por atributo evita citar a classe deles aqui —
+   classe de terceiro no nosso core é o que o check 15 barra, e com razão. */
+.dependency-graph a[href] { color:var(--muted-foreground); }
+/* O nó é uma superfície flutuante como qualquer outra da Aurea — mesmo raio de cartão, mesma
+   borda, mesmo fundo. É aqui que ele deixa de parecer React Flow. */
+.graph-node { position:relative; inline-size:180px; }
+.graph-node-body { display:grid; gap:var(--space-05); inline-size:100%; padding:var(--space-2) var(--space-3); border:1px solid var(--border); border-radius:var(--radius-card); background:var(--card); color:var(--foreground); font-family:inherit; font-size:var(--text-sm); text-align:start; }
+button.graph-node-body { cursor:pointer; }
+.graph-node[data-selected] .graph-node-body { border-color:var(--primary); }
+.graph-node-label { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-weight:var(--weight-medium); }
+/* `kind` é TEXTO, e não cor: a referência pinta dez tipos de nó em dez cores, e é a quarta vez
+   que esta parte recusa a mesma coisa. */
+.graph-node-kind { color:var(--subtle-foreground); font-size:var(--text-xs); letter-spacing:var(--tracking-wider); text-transform:uppercase; }
+.graph-handle { inline-size:var(--space-2); block-size:var(--space-2); border:1px solid var(--border); background:var(--surface-2); }
+.datagrid tbody tr[data-selected] { background:color-mix(in srgb,var(--primary) 14%,transparent); }
+.datagrid-empty { padding:var(--space-6); color:var(--muted-foreground); text-align:center; }
+
+/* ========================================================================== */
+/* 10. RESPONSIVIDADE                                                          */
+/* ========================================================================== */
+/* Aperto de tela baixa: é densidade do SHELL DOS DOCS (.doc-sidebar), não da .doc-nav em
+   si — sem o escopo ela zerava o gap de qualquer nav, inclusive a do catálogo. */
+/* Legado do catálogo escrito à mão: `display:block` desmancha o grid e empilha a lateral.
+   Agora vale SÓ para o shell que não tem gaveta — o `apps/docs/index.html`, que traz a
+   própria `.doc-sidebar` e o próprio JS de abrir. O shell do sistema segue em grid de uma
+   coluna com a gaveta acima. Sai junto com aquela página (achado M13). */
+@media (max-width:640px) { :root { --card-pad:16px; --section-gap:16px; } .doc-actions .select { flex:1; width:auto!important; min-width:0; } .doc-actions>.btn-primary { width:var(--control-h-md); padding:0; font-size:0; } .doc-actions>.btn-primary .mono { display:none; } .tabs,.pagination,.segmented { max-width:100%; overflow-x:auto; } .step:nth-child(3):before { display:none; } .alert { grid-template-columns:auto minmax(0,1fr); } .alert>:last-child { grid-column:2; justify-self:start; } .log-line { grid-template-columns:70px 58px minmax(0,1fr); gap:6px; } .queue-item>.badge { grid-column:2; justify-self:start; } .event-row>.badge { grid-column:3; justify-self:start; } .message { grid-template-columns:1fr; } .media-player { min-height:330px; aspect-ratio:auto; } .media-overlay-title { top:12px; left:12px; right:12px; } .media-controls { padding:10px; } .media-control-row { align-items:flex-start; flex-direction:column; gap:8px; } .media-control-row>.media-control-group { width:100%; justify-content:space-between; } .media-optional,.media-volume { display:none; } .media-time { padding:0 4px; font-size:11px; } .toast-stack { inset-inline:12px; bottom:12px; } .toast { width:100%; min-width:0; grid-template-columns:minmax(0,1fr) auto; } .drawer { width:100%; padding:20px; } .dialog { padding:20px; } }
+@media (prefers-reduced-motion:reduce) { *,*:before,*:after { scroll-behavior:auto!important; animation-duration:.01ms!important; animation-iteration-count:1!important; transition-duration:.01ms!important; } }
+
+/* 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 (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; }
+}
+
+
+/* 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)}
+.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
+   da escala (639px) teria resolvido o gate e mantido o defeito: a largura que aperta os
+   controles é a do PLAYER, não a da janela. Um player numa lateral de 400px dentro de uma tela
+   de 1920px tem exatamente o mesmo aperto, e o breakpoint de viewport nunca o via.
+   `.media-player` já era `position:relative` + `overflow:hidden`, então a contenção não muda o
+   posicionamento do que está dentro — medido antes de escrever. */
+.media-player { container-type:inline-size; }
+@container (max-width:400px) {
+  .media-controls { flex-wrap:wrap; overflow:visible!important; gap:8px; }
+  .media-control { min-width:var(--target-min); min-height:var(--target-min); }
+}
+@media(pointer:coarse){
+  .media-control,.btn-icon{min-width:var(--target-min);min-height:var(--target-min)}
+}
+
+/* ========================================================================== */
+/* 12. RTL                                                                     */
+/* ========================================================================== */
+/* O eixo inline do CSS acima já é lógico e espelha sozinho. Aqui ficam só os
+   casos sem forma lógica: background-position e translateX.
+   Deliberadamente NÃO espelham:
+   - o check do .checkbox e o .spinner são glifos desenhados com borda;
+   - .map-* e .builder-* são geografia/arte com rotate() fixo — espelhar os
+     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); }
 }