@aurea-uds/core 0.1.0

package/dist/aurea.css

@@ -0,0 +1,952 @@
+@layer aurea{
+/* Aurea tokens — generated from aurea.tokens.json (DTCG 2025.10). Do not edit. */
+:root{
+  --brand-yellow:oklch(0.795 0.184 86.047);
+  --brand-yellow-foreground:oklch(0.421 0.095 57.708);
+  --font-ui:"IBM Plex Sans","Segoe UI",sans-serif;
+  --font-editorial:"IBM Plex Serif",Georgia,serif;
+  --font-code:"IBM Plex Mono",SFMono-Regular,Consolas,monospace;
+  --text-xs:0.75rem;
+  --text-sm:0.8125rem;
+  --text-md:0.875rem;
+  --text-base:1rem;
+  --text-lg:1.125rem;
+  --text-xl:1.25rem;
+  --text-2xl:1.5rem;
+  --text-3xl:1.875rem;
+  --text-4xl:2.25rem;
+  --text-5xl:3rem;
+  --leading-tight:1.2;
+  --leading-normal:1.5;
+  --leading-relaxed:1.7;
+  --space-0:0;
+  --space-05:0.125rem;
+  --space-1:0.25rem;
+  --space-2:0.5rem;
+  --space-3:0.75rem;
+  --space-4:1rem;
+  --space-5:1.25rem;
+  --space-6:1.5rem;
+  --space-7:1.75rem;
+  --space-8:2rem;
+  --space-10:2.5rem;
+  --space-12:3rem;
+  --space-16:4rem;
+  --space-20:5rem;
+  --space-24:6rem;
+  --radius-xs:6px;
+  --radius-sm:8px;
+  --radius-md:10px;
+  --radius-lg:16px;
+  --radius-card:22px;
+  --radius-control:999px;
+  --radius-full:var(--radius-control);
+  --border-width:1px;
+  --shadow-md:0 16px 42px rgba(0,0,0,0.28);
+  --shadow-lg:0 28px 80px rgba(0,0,0,0.42);
+  --duration-fast:120ms;
+  --duration-base:180ms;
+  --duration-slow:280ms;
+  --ease-standard:cubic-bezier(0.2,0,0,1);
+  --ease-emphasized:cubic-bezier(0.2,0.8,0.2,1);
+  --z-base:0;
+  --z-sticky:20;
+  --z-dropdown:40;
+  --z-drawer:60;
+  --z-modal:80;
+  --z-toast:100;
+  --sidebar-width:16.5rem;
+  --topbar-height:4rem;
+  --content-max:102.5rem;
+  --breakpoint-sm:640px;
+  --breakpoint-md:768px;
+  --breakpoint-lg:1024px;
+  --breakpoint-xl:1280px;
+  --breakpoint-2xl:1536px;
+  --control-h-xs:1.625rem;
+  --control-h-sm:1.875rem;
+  --control-h-md:2.25rem;
+  --control-h-lg:2.625rem;
+  --control-h-xl:3.125rem;
+  --row-h:3rem;
+  --card-pad:1.25rem;
+  --section-gap:1.5rem;
+  --media-canvas:oklch(0.085 0 0);
+  --media-foreground:oklch(0.985 0 0);
+  --media-muted:oklch(0.74 0 0);
+  --media-scrim:oklch(0 0 0 / 0.82);
+  --media-track:oklch(1 0 0 / 0.18);
+  --media-buffered:oklch(1 0 0 / 0.42);
+  --media-caption-bg:oklch(0 0 0 / 0.82);
+  --media-control-bg:oklch(0 0 0 / 0.52);
+  --media-control-hover:oklch(1 0 0 / 0.14);
+  --text-muted:var(--muted-foreground);
+  --success-400:#42d392;
+  --success-500:#22c875;
+  --success-700:#147a4d;
+  --warning-400:var(--brand-yellow);
+  --warning-500:#d49c00;
+  --warning-800:#6d4d00;
+  --danger-400:#ff7180;
+  --danger-500:#e94b58;
+  --danger-800:#7f2029;
+  --info-400:#8ec5ff;
+  --info-500:#2b7fff;
+  --info-800:#1447e6;
+  --oracle-50:oklch(0.96 0.025 251.813);
+  --oracle-100:oklch(0.9 0.06 251.813);
+  --oracle-200:oklch(0.85 0.09 251.813);
+  --oracle-300:var(--chart-1);
+  --oracle-400:var(--chart-2);
+  --oracle-500:var(--chart-3);
+  --oracle-600:var(--chart-4);
+  --oracle-700:var(--chart-5);
+  --oracle-800:oklch(0.38 0.2 265.638);
+  --oracle-900:oklch(0.31 0.16 265.638);
+  --oracle-950:oklch(0.23 0.11 265.638);
+  --weight-regular:400;
+  --weight-medium:500;
+  --weight-semibold:600;
+  --weight-bold:700;
+  --icon-sm:1rem;
+  --icon-md:1.25rem;
+  --icon-lg:1.5rem;
+  --icon-xl:2rem;
+  --tracking-tight:-0.01em;
+  --tracking-normal:0;
+  --leading-none:1;
+  --target-min:2.75rem;
+  --tracking-wide:0.04em;
+  --tracking-wider:0.06em;
+  --tracking-widest:0.12em;
+}
+[data-theme="dark"]{
+  --background:oklch(0.145 0 0);
+  --foreground:oklch(0.985 0 0);
+  --card:oklch(0.205 0 0);
+  --card-foreground:oklch(0.985 0 0);
+  --popover:oklch(0.205 0 0);
+  --popover-foreground:oklch(0.985 0 0);
+  --primary:var(--brand-yellow);
+  --primary-foreground:var(--brand-yellow-foreground);
+  --secondary:oklch(0.274 0.006 286.033);
+  --secondary-foreground:oklch(0.985 0 0);
+  --muted:oklch(0.269 0 0);
+  --muted-foreground:oklch(0.708 0 0);
+  --accent:oklch(0.269 0 0);
+  --accent-foreground:oklch(0.985 0 0);
+  --destructive:oklch(0.704 0.191 22.216);
+  --destructive-foreground:oklch(0.2 0.02 22);
+  --border:oklch(1 0 0 / 0.1);
+  --input:oklch(1 0 0 / 0.15);
+  --ring:oklch(0.556 0 0);
+  --chart-1:oklch(0.809 0.105 251.813);
+  --chart-2:oklch(0.623 0.214 259.815);
+  --chart-3:oklch(0.546 0.245 262.881);
+  --chart-4:oklch(0.488 0.243 264.376);
+  --chart-5:oklch(0.424 0.199 265.638);
+  --sidebar:oklch(0.205 0 0);
+  --sidebar-foreground:oklch(0.985 0 0);
+  --sidebar-primary:var(--brand-yellow);
+  --sidebar-primary-foreground:var(--brand-yellow-foreground);
+  --sidebar-accent:oklch(0.269 0 0);
+  --sidebar-accent-foreground:oklch(0.985 0 0);
+  --sidebar-border:oklch(1 0 0 / 0.1);
+  --sidebar-ring:oklch(0.556 0 0);
+  --surface-1:var(--card);
+  --surface-2:var(--secondary);
+  --surface-3:var(--muted);
+  --surface-inset:oklch(0.145 0 0);
+  --surface-hover:oklch(0.3 0 0);
+  --foreground-strong:var(--foreground);
+  --subtle-foreground:oklch(0.76 0 0);
+  --border-strong:oklch(0.58 0 0);
+  --field-bg:var(--muted);
+  --overlay:oklch(0 0 0 / 0.74);
+  --primary-hover:oklch(0.835 0.19 89);
+  --primary-active:oklch(0.74 0.17 84);
+  --secondary-hover:oklch(0.31 0.006 286.033);
+  --focus:var(--primary);
+  --focus-strong:var(--primary);
+  --primary-emphasis:var(--primary);
+  --primary-outline:var(--primary);
+  --control-selected:var(--primary);
+  --control-selected-foreground:var(--primary-foreground);
+  --selection:oklch(0.795 0.184 86.047 / 0.22);
+  --success-bg:oklch(0.42 0.11 150 / 0.36);
+  --warning-bg:oklch(0.34 0.08 86 / 0.64);
+  --danger-bg:oklch(0.32 0.1 22 / 0.62);
+  --info-bg:oklch(0.29 0.08 260 / 0.62);
+}
+[data-theme="light"]{
+  --background:oklch(0.965 0 0);
+  --foreground:oklch(0.145 0 0);
+  --card:oklch(1 0 0);
+  --card-foreground:oklch(0.145 0 0);
+  --popover:oklch(1 0 0);
+  --popover-foreground:oklch(0.145 0 0);
+  --primary:var(--brand-yellow);
+  --primary-foreground:var(--brand-yellow-foreground);
+  --secondary:oklch(0.94 0 0);
+  --secondary-foreground:oklch(0.21 0.006 285.885);
+  --muted:var(--secondary);
+  --muted-foreground:oklch(0.43 0 0);
+  --accent:var(--secondary);
+  --accent-foreground:oklch(0.205 0 0);
+  --destructive:oklch(0.577 0.245 27.325);
+  --destructive-foreground:oklch(0.985 0 0);
+  --border:oklch(0.89 0 0);
+  --input:oklch(0.922 0 0);
+  --ring:oklch(0.708 0 0);
+  --chart-1:oklch(0.809 0.105 251.813);
+  --chart-2:oklch(0.623 0.214 259.815);
+  --chart-3:oklch(0.546 0.245 262.881);
+  --chart-4:oklch(0.488 0.243 264.376);
+  --chart-5:oklch(0.424 0.199 265.638);
+  --sidebar:var(--card);
+  --sidebar-foreground:oklch(0.145 0 0);
+  --sidebar-primary:var(--brand-yellow);
+  --sidebar-primary-foreground:var(--brand-yellow-foreground);
+  --sidebar-accent:var(--secondary);
+  --sidebar-accent-foreground:oklch(0.205 0 0);
+  --sidebar-border:oklch(0.89 0 0);
+  --sidebar-ring:oklch(0.708 0 0);
+  --surface-1:var(--card);
+  --surface-2:var(--secondary);
+  --surface-3:var(--muted);
+  --surface-inset:oklch(0.955 0 0);
+  --surface-hover:oklch(0.925 0 0);
+  --foreground-strong:var(--foreground);
+  --subtle-foreground:oklch(0.43 0 0);
+  --border-strong:oklch(0.56 0 0);
+  --field-bg:var(--muted);
+  --overlay:oklch(0.145 0 0 / 0.4);
+  --primary-hover:oklch(0.835 0.19 89);
+  --primary-active:oklch(0.74 0.17 84);
+  --secondary-hover:var(--surface-hover);
+  --focus:var(--primary);
+  --focus-strong:var(--brand-yellow-foreground);
+  --primary-emphasis:var(--brand-yellow-foreground);
+  --primary-outline:var(--brand-yellow-foreground);
+  --control-selected:var(--brand-yellow-foreground);
+  --control-selected-foreground:oklch(0.985 0 0);
+  --success-400:#0f6b3e;
+  --warning-400:#6d4d00;
+  --danger-400:#9f2330;
+  --info-400:#164f9d;
+  --oracle-300:var(--chart-4);
+  --oracle-400:var(--chart-4);
+  --selection:oklch(0.795 0.184 86.047 / 0.18);
+  --success-bg:oklch(0.94 0.05 150);
+  --warning-bg:oklch(0.95 0.06 86);
+  --danger-bg:oklch(0.95 0.05 22);
+  --info-bg:oklch(0.95 0.045 260);
+}
+[data-density="compact"]{
+  --control-h-xs:1.5rem;
+  --control-h-sm:1.75rem;
+  --control-h-md:2rem;
+  --control-h-lg:2.375rem;
+  --control-h-xl:2.75rem;
+  --row-h:2.625rem;
+  --card-pad:1rem;
+  --section-gap:1.125rem;
+}
+[data-density="comfortable"]{
+  --control-h-xs:1.625rem;
+  --control-h-sm:1.875rem;
+  --control-h-md:2.25rem;
+  --control-h-lg:2.625rem;
+  --control-h-xl:3.125rem;
+  --row-h:3rem;
+  --card-pad:1.25rem;
+  --section-gap:1.5rem;
+}
+[data-density="spacious"]{
+  --control-h-xs:1.75rem;
+  --control-h-sm:2.125rem;
+  --control-h-md:2.5rem;
+  --control-h-lg:3rem;
+  --control-h-xl:3.5rem;
+  --row-h:3.375rem;
+  --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); }
+}