@aurea-uds/core 0.34.0 → 0.36.0

package/dist/aurea.css

@@ -4,6 +4,7 @@
   --brand-yellow:oklch(0.795 0.184 86.047);
   --brand-yellow-foreground:oklch(0.421 0.095 57.708);
   --brand-yellow-text:oklch(0.516 0.105 86.047);
+  --brand-yellow-ink:#242424;
   --white:oklch(1 0 0);
   --black:oklch(0 0 0);
   --font-ui:"Atkinson Hyperlegible Next","Segoe UI",sans-serif;
@@ -20,6 +21,8 @@
   --text-3xl:1.875rem;
   --text-4xl:2.25rem;
   --text-5xl:3rem;
+  --text-6xl:3.75rem;
+  --text-7xl:4.5rem;
   --leading-tight:1.2;
   --leading-normal:1.5;
   --leading-relaxed:1.7;
@@ -72,6 +75,11 @@
   --z-toast:100;
   --sidebar-width:16.5rem;
   --sidebar-rail:4.25rem;
+  --docs-width:87.5rem;
+  --docs-sidebar-width:13.75rem;
+  --docs-aside-width:16.75rem;
+  --docs-toc-width:15rem;
+  --docs-text-width:56.25rem;
   --topbar-height:4rem;
   --content-max:102.5rem;
   --breakpoint-2xs:360px;
@@ -147,7 +155,7 @@
   --popover:#292929;
   --popover-foreground:#ffffff;
   --primary:var(--brand-yellow);
-  --primary-foreground:var(--brand-yellow-foreground);
+  --primary-foreground:var(--brand-yellow-ink);
   --link:var(--brand-yellow);
   --link-hover:var(--brand-yellow);
   --secondary:#333333;
@@ -169,7 +177,7 @@
   --sidebar:#292929;
   --sidebar-foreground:#ffffff;
   --sidebar-primary:var(--brand-yellow);
-  --sidebar-primary-foreground:var(--brand-yellow-foreground);
+  --sidebar-primary-foreground:var(--brand-yellow-ink);
   --sidebar-accent:#333333;
   --sidebar-accent-foreground:#ffffff;
   --sidebar-border:#525252;
@@ -193,7 +201,9 @@
   --primary-emphasis:var(--primary);
   --primary-outline:var(--primary);
   --control-selected:var(--primary);
-  --control-selected-foreground:var(--primary-foreground);
+  --control-selected-foreground:var(--brand-yellow-ink);
+  --control-selected-dot:oklch(0.985 0 0);
+  --primary-mark:var(--brand-yellow-foreground);
   --selection:oklch(0.795 0.184 86.047 / 0.22);
   --success-bg:#052505;
   --warning-bg:#4a1e04;
@@ -237,9 +247,9 @@
   --popover:#ffffff;
   --popover-foreground:#242424;
   --primary:var(--brand-yellow);
-  --primary-foreground:var(--brand-yellow-foreground);
-  --link:oklch(0.52 0.106 86.047);
-  --link-hover:oklch(0.44 0.106 86.047);
+  --primary-foreground:var(--brand-yellow-ink);
+  --link:var(--brand-yellow);
+  --link-hover:var(--brand-yellow);
   --secondary:#ebebeb;
   --secondary-foreground:#242424;
   --muted:var(--secondary);
@@ -259,7 +269,7 @@
   --sidebar:var(--card);
   --sidebar-foreground:#242424;
   --sidebar-primary:var(--primary-emphasis);
-  --sidebar-primary-foreground:var(--brand-yellow-foreground);
+  --sidebar-primary-foreground:var(--brand-yellow-ink);
   --sidebar-accent:var(--secondary);
   --sidebar-accent-foreground:#242424;
   --sidebar-border:#e0e0e0;
@@ -279,11 +289,13 @@
   --secondary-hover:var(--surface-hover);
   --segment:oklch(1 0 0);
   --focus:var(--primary);
-  --focus-strong:var(--brand-yellow-foreground);
-  --primary-emphasis:var(--brand-yellow-text);
-  --primary-outline:var(--brand-yellow-text);
-  --control-selected:var(--brand-yellow-foreground);
-  --control-selected-foreground:oklch(0.985 0 0);
+  --focus-strong:var(--foreground);
+  --primary-emphasis:var(--brand-yellow);
+  --primary-outline:var(--brand-yellow);
+  --control-selected:var(--brand-yellow);
+  --control-selected-foreground:var(--brand-yellow-ink);
+  --control-selected-dot:oklch(0.985 0 0);
+  --primary-mark:var(--brand-yellow-foreground);
   --success-400:#0e700e;
   --warning-400:#8a3707;
   --danger-400:#b10e1c;
@@ -361,6 +373,8 @@
   --selection:oklch(0.32 0.08 50);
   --control-selected:oklch(0.72 0.19 48);
   --control-selected-foreground:oklch(0.16 0.02 250);
+  --control-selected-dot:oklch(0.16 0.02 250);
+  --primary-mark:oklch(0.16 0.02 250);
   --overlay:oklch(0 0 0 / 0.6);
   --chart-1:oklch(0.74 0.18 50);
   --chart-2:oklch(0.84 0.14 88);
@@ -423,6 +437,8 @@
   --selection:oklch(0.96 0.04 60);
   --control-selected:oklch(0.682 0.197 44.5);
   --control-selected-foreground:oklch(1 0 0);
+  --control-selected-dot:oklch(1 0 0);
+  --primary-mark:oklch(1 0 0);
   --overlay:oklch(0.16 0.018 250 / 0.45);
   --chart-1:oklch(0.682 0.197 44.5);
   --chart-2:oklch(0.82 0.15 88);
@@ -445,6 +461,8 @@
   --warning-bg:oklch(0.95 0.06 80);
   --danger-bg:oklch(0.95 0.05 25);
   --info-bg:oklch(0.95 0.04 235);
+  --link:oklch(0.52 0.106 86.047);
+  --link-hover:oklch(0.44 0.106 86.047);
 }
 [data-density="compact"]{
   --control-h-xs:1.5rem;
@@ -595,7 +613,13 @@ img,svg { display:block; }
 .container-sm { max-inline-size:var(--breakpoint-sm); } .container-md { max-inline-size:var(--breakpoint-md); }
 .container-lg { max-inline-size:var(--breakpoint-lg); } .container-2xl { max-inline-size:var(--breakpoint-2xl); }
 .container-full { max-inline-size:none; }
+/* `docs` (lote T, 17/10/2026): o bloco da documentação, `--docs-width` (1400) — o da referência; a escala de pontos não
+   tem esse número. */
+.container-docs { max-inline-size:var(--docs-width); }
 @media (min-width:768px) { .container { padding-inline:var(--space-8); } }
+/* E o recheio dela é o da barra da referência: 16 no celular (o de todo `Container`) e 24 de 768 para cima, e não 32 — a
+   768, com 32, a busca e as ações não cabiam na linha da marca e desciam (a bancada do lote T pegou). */
+@media (min-width:768px) { .container-docs { padding-inline:var(--space-6); } }
 /* GAR-04 e GAR-05 (06/10/2026): `Section` — a faixa de ponta a ponta de uma página de site, com
    fundo próprio e respiro vertical de site. Nenhuma referência aberta tem a peça (as seções de uma
    delas são pagas, não lidas), então o respiro é escolha da Aurea, com tokens que já existem: `--space-16`
@@ -607,6 +631,43 @@ img,svg { display:block; }
 .section-inset { background:var(--surface-inset); }
 .section-spacing-sm { padding-block:var(--space-8); }
 @media (min-width:768px) { .section { padding-block:var(--space-24); } .section-spacing-sm { padding-block:var(--space-12); } }
+/* GAR-21 e GAR-22 (lote U, 19/10/2026): a `Section` variant="hero" — a abertura de página. Os vãos são os do início da
+   referência (medidos em 15/10/2026): a sobrelinha a 8 do título (16 a partir de 1024), o texto colado no título, os
+   botões a 16, o que vier depois a 8 (16 a partir de 1024); o texto 16/24, e 18/28 a partir de 768, em 672 de largura (o
+   640 da escala mais o --space-8). O título 36, 60 a partir de 768 e 72 a partir de 1024 (os três tamanhos são decisão
+   do Victor; as larguras, desta peça). Com imagem e align="start", o texto e a imagem lado a lado a partir de 1024;
+   abaixo disso, a imagem desce.
+   As larguras são da FAIXA, e não da janela (`@container`, como o `.media-player`): de ponta a ponta, a faixa tem a
+   largura da janela e dá o mesmo; numa coluna mais estreita (a prévia do catálogo), o título não passa dela. O 72 entra
+   em 1024, e não em 1280: numa janela de 1280 a barra de rolagem deixa a faixa com menos de 1280, e o 72 não apareceria
+   na tela larga mais comum. */
+.section-hero { container:aurea-hero / inline-size; }
+.section-hero-content { display:grid; justify-items:start; min-inline-size:0; }
+.section-hero-center .section-hero-content { justify-items:center; text-align:center; }
+.section-hero-text { display:grid; justify-items:inherit; }
+/* A sobrelinha em flex: com um selo ou link dentro de um bloco comum, a linha de texto do bloco somava 2 à altura dele. */
+.section-hero-eyebrow { display:flex; align-items:center; }
+.section-hero-content > * + * { margin-block-start:var(--space-2); }
+.section-hero-content > * + .section-hero-actions { margin-block-start:var(--space-4); }
+.section-hero-title { margin:0; color:var(--foreground); font-family:var(--font-heading); font-size:var(--text-4xl); line-height:var(--text-4xl-leading); font-weight:var(--weight-bold); letter-spacing:var(--tracking-tight); text-wrap:balance; }
+.section-hero-description { max-inline-size:calc(var(--breakpoint-sm) + var(--space-8)); margin:0; color:var(--muted-foreground); font-size:var(--text-base); line-height:var(--leading-normal); text-wrap:pretty; }
+.section-hero-center .section-hero-description { text-wrap:balance; }
+.section-hero-actions { display:flex; flex-wrap:wrap; align-items:center; gap:var(--space-3); }
+.section-hero-center .section-hero-actions { justify-content:center; }
+/* O campo de e-mail no lugar dos botões: o formulário cresce até 480 (o --breakpoint-xs), e não fica do tamanho do texto
+   de exemplo. */
+.section-hero-actions > form { flex:1 1 auto; max-inline-size:var(--breakpoint-xs); }
+.section-hero-media { min-inline-size:0; margin-block-start:var(--space-12); }
+@container aurea-hero (min-width:768px) {
+  .section-hero-title { font-size:var(--text-6xl); line-height:var(--leading-none); }
+  .section-hero-description { font-size:var(--text-lg); line-height:var(--text-lg-leading); }
+}
+@container aurea-hero (min-width:1024px) {
+  .section-hero-content > * + :not(.section-hero-actions) { margin-block-start:var(--space-4); }
+  .section-hero-split .section-hero-inner { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); align-items:center; gap:var(--space-12); }
+  .section-hero-split .section-hero-media { margin-block-start:0; }
+  .section-hero-title { font-size:var(--text-7xl); }
+}
 /* GAR-06 (07/10/2026): a `Section` variant="footer" — o rodapé de site, uma faixa como as outras
    (fundo, respiro e tema vêm dela). No celular tudo empilha numa coluna; a partir de 768 a marca
    fica à esquerda e as colunas de links se repartem à direita, cada uma com pelo menos 8rem (a
@@ -709,6 +770,40 @@ img,svg { display:block; }
    64, o nosso padrão), com 6 entre as ações (o gap-1.5 dela). O painel do celular segue a altura, pela mesma variável. */
 .topbar-sm { --topbar-height:calc(var(--space-12) + var(--space-2)); }
 .topbar-sm .topbar-actions { gap:calc(var(--space-1) + var(--space-05)); }
+/* A SEGUNDA LINHA DO CABEÇALHO (`Header tabs`, lote T, 17/10/2026 — os pedidos SITE-04 e SITE-05 do Victor): as áreas do
+   site, cada uma com o ícone, como a linha das áreas da documentação da referência (medida no código dela): 40 de altura,
+   4 abaixo da linha de cima, as áreas a 12 uma da outra, letra 14 em peso médio, o ícone a 8 do nome, com a altura da
+   letra. A área atual tem a cor do texto e o traço de 2 embaixo, na cor de destaque, encostado na linha de baixo. A linha
+   fica por último na ordem do Tab: as áreas vêm depois das ações. */
+.topbar-with-tabs, .topbar-with-tabs > .topbar-inner { flex-wrap:wrap; row-gap:var(--space-1); }
+.topbar-with-tabs { padding-block:0; border-block-end-width:0; }
+/* Com as áreas, a barra tem 100 cravados e a linha de baixo fica PENDURADA logo abaixo dela, sobre o começo da página,
+   como a da referência (a dela é um `::after` com `bottom:-1px`): a borda invisível de 1 do sem linha somava 1 à barra
+   e empurrava tudo o que vem embaixo (medido: a lateral a 117 e não 116). */
+.topbar-with-tabs.topbar-divider::after { inset-block-end:calc(-1 * var(--border-width)); }
+/* A linha de cima tem a altura da barra (56 na `sm`, como a da referência): é a marca que a segura — sem isso a linha
+   ficava da altura da busca (36) e a barra inteira com 89, e não 100. */
+.topbar-with-tabs .brand { min-block-size:var(--topbar-height); }
+/* As áreas ficam EMBAIXO da linha (como lá: a área tem 30 — a letra, 8 e o traço de 2 — numa linha de 40) e numa linha só,
+   que ROLA DE LADO quando não cabe (medido na página da referência a 375: ela não quebra nem some; a página não rola).
+   No celular, 4 entre as áreas; de 768 para cima, 12. Como a linha recorta o que passa dela, o anel do foco fica POR
+   DENTRO da área, como o do item de menu — por fora, ele seria cortado embaixo. */
+.topbar-tabs { flex-basis:100%; display:flex; align-items:flex-end; gap:var(--space-1); min-block-size:var(--space-10);
+  overflow-x:auto; overflow-y:hidden; }
+@media (min-width:768px) { .topbar-tabs { gap:var(--space-3); } }
+.topbar-tab { position:relative; flex-shrink:0; display:inline-flex; align-items:center; gap:var(--space-2);
+  padding:0 var(--space-1) calc(var(--space-2) + var(--focus-width)); color:var(--muted-foreground); font-size:var(--text-sm);
+  font-weight:var(--weight-medium); white-space:nowrap; text-decoration:none; }
+.topbar-tab:focus-visible { outline-offset:calc(-1 * var(--focus-width)); }
+.topbar-tab:hover, .topbar-tab[aria-current] { color:var(--foreground); }
+.topbar-tab[aria-current]::after { content:""; position:absolute; z-index:1; inset-inline:0; inset-block-end:0; block-size:var(--focus-width);
+  background:var(--primary); }
+.topbar-tab-icon { display:inline-flex; font-size:var(--text-sm); }
+.topbar-tab-icon > .icon { inline-size:1em; block-size:1em; }
+/* A LINHA DE BAIXO (`divider`) volta como LINHA (lote T, SITE-05, o Victor: "a linha que vai de uma ponta a outra"): a
+   segunda exceção ao sem linha (ADR-0072), desenhada, de uma ponta à outra da barra, na cor da linha. */
+.topbar-divider::after { content:""; position:absolute; inset-inline:0; inset-block-end:0; block-size:var(--border-width);
+  background:var(--border); pointer-events:none; }
 /* blurred (15/10/2026), só na `flush`: o fundo transparente que embaça o que passa por baixo — o desfoque de 16 da
    referência. Quem pede menos transparência ao sistema, e o navegador sem desfoque, ficam com o fundo cheio. */
 .topbar-flush.topbar-blurred { background:transparent; -webkit-backdrop-filter:blur(var(--space-4)); backdrop-filter:blur(var(--space-4)); }
@@ -818,6 +913,60 @@ img,svg { display:block; }
    encostado, não sobre a lateral — a rente já encosta sozinha. */
 .app-shell-flush .sidebar:not(.sidebar-flush) { --shell-top:calc(var(--topbar-height) + var(--space-05)); margin-block-start:var(--space-05); }
 .app-shell-flush .content { margin-block-start:var(--space-05); }
+/* O ARRANJO DE DOCUMENTAÇÃO (`AppShell layout="docs"`, lote T, 17/10/2026 — os pedidos SITE-01 e SITE-02 do Victor): o
+   da documentação da referência, medido no código dela. Um bloco CENTRALIZADO de `--docs-width` (1400) em cinco trilhas —
+   a sobra dos dois lados, iguais, centralizam —: a lateral (`--docs-sidebar-width`, 220), o texto, o índice
+   (`--docs-aside-width`, 268, de 1280 para cima). Sem vão: o espaço vem do recheio de cada coluna. A lateral NÃO flutua
+   (sem caixa; 16 abaixo da linha, 32 acima da borda da tela, 12 no começo); o texto tem 48 dos lados de 1280 para cima e 24
+   abaixo, e cada bloco dele vai até `--docs-text-width` (900). Entre 1024 e 1279 o índice desce para depois do texto,
+   como no `AppShell` de sempre; abaixo de 1024 a lateral é a gaveta. A barra de cima tem 56 + 4 + 40 (a linha das
+   áreas): a lateral e o índice grudam logo abaixo dela. */
+/* O bloco mora DEPOIS da regra do topo rente (`.app-shell-flush .sidebar:not(.sidebar-flush)`) e tem a MESMA força (o
+   `:not`): mais fraca, ou antes dela, a lateral grudava a 66 do topo, por baixo da barra (medido). A linha de baixo
+   fica pendurada fora da barra, como a da referência, e não entra na conta. */
+.app-shell-docs { --docs-top:calc(var(--space-12) + var(--space-2) + var(--space-1) + var(--space-10)); }
+.app-shell-docs > .content > * { max-inline-size:var(--docs-text-width); }
+/* O texto a 24 da borda também no celular (o da página da referência a 375 e a 768; com o recheio de sempre do
+   `AppShell`, ele encostava a 16 — a bancada do lote T pegou). */
+.app-shell-docs > .content.content { margin:0; padding:var(--space-4) var(--space-6); }
+@media (min-width:1024px) {
+  .app-shell-docs { grid-template-columns:minmax(0,1fr) var(--docs-sidebar-width) minmax(0,calc(var(--docs-width) - var(--docs-sidebar-width))) minmax(0,1fr); }
+  /* As duas colunas COMEÇAM 16 abaixo da linha e PARAM 32 acima da borda de baixo da tela, como as da referência
+     medidas na página dela (17/10/2026, o Victor: "a distância do sidebar em relação aos itens de cima está muito
+     próxima" e "a distância no final da página"): a caixa que rola — e a barra dela — não encosta mais na linha. Dentro,
+     8 em cima e 16 embaixo, e o primeiro grupo sem a margem de cima: o "Overview" fica a 24 da linha, como lá. A
+     referência ainda apaga a lista aos poucos nas duas pontas com um degradê; a Aurea não tem degradê, e a lista corta
+     reto. Dos lados, 16 nos dois (12 + 4 lá) e 8 dentro do item e do nome do grupo: a cápsula começa a 16 da borda
+     da coluna e o texto a 24, como lá (medido na página dela a 1280, 17/10/2026). */
+  .app-shell-docs > .sidebar:not(.sidebar-flush) { --shell-top:calc(var(--docs-top) + var(--space-4)); grid-column:2; grid-row:2;
+    block-size:calc(100vh - var(--shell-top) - var(--space-8)); max-block-size:none; margin:var(--space-4) 0 0; border-width:0;
+    padding-block:var(--space-2) var(--space-4); padding-inline:var(--space-4); }
+  .app-shell-docs > .sidebar > .sidebar-nav > .sidebar-list > li:first-child > .sidebar-group-label { margin-block-start:0; }
+  .app-shell-docs > .sidebar .sidebar-item { padding-inline:var(--space-2); }
+  .app-shell-docs > .sidebar .sidebar-group-label { margin-inline:var(--space-2); }
+  .app-shell-docs > .content.content { grid-column:3; grid-row:2; }
+  .app-shell-docs > .sidebar.app-shell-aside { grid-column:3; grid-row:3; block-size:auto; }
+}
+/* O índice ("On this page") SEM a barra de rolagem, como o da referência (o Victor, 17/10/2026: "ocultar a barra de
+   rolagem"). Nem a da coluna nem a do PRÓPRIO índice: numa tela baixa ele encolhe para caber na coluna e rola sozinho
+   (a barra que o Victor ainda viu, 1280 × 663, era a dele). Ele continua rolando com a roda e o toque, e o Tab leva cada
+   link para a vista. É a ÚNICA exceção à regra da barra visível (`engine-batch.test.tsx`): o Victor escolheu "escondida
+   sempre" entre esta e a da lateral, que some parada e volta com o ponteiro (17/10/2026). */
+.app-shell-docs > .sidebar.app-shell-aside, .app-shell-docs > .sidebar.app-shell-aside > .toc { scrollbar-width:none; }
+.app-shell-docs > .sidebar.app-shell-aside::-webkit-scrollbar,
+.app-shell-docs > .sidebar.app-shell-aside > .toc::-webkit-scrollbar { display:none; }
+/* Quem gruda aqui é a COLUNA; o índice dentro dela fica no lugar. Grudado também, ele somava os 16 dele aos da coluna e
+   o "On this page" descia para 49 da linha (medido); assim, sem o recheio de cima, ele fica a 24, como o da referência. */
+/* E ele ocupa a largura da coluna (o `align-self:start` de sempre o encolhia até o nome mais largo, 168). */
+.app-shell-docs > .sidebar.app-shell-aside > .toc { position:static; align-self:stretch; }
+@media (min-width:1280px) {
+  .app-shell-docs { grid-template-columns:minmax(0,1fr) var(--docs-sidebar-width) minmax(0,calc(var(--docs-width) - var(--docs-sidebar-width) - var(--docs-aside-width))) var(--docs-aside-width) minmax(0,1fr); }
+  .app-shell-docs > .content.content { padding:var(--space-8) var(--space-12) var(--space-4); }
+  /* O índice tem 240 (`--docs-toc-width`) no começo da coluna de 268, com 16 dos dois lados, como o da referência: a
+     ponta direita dele fica alinhada com a da barra de cima (o Victor, 17/10/2026: "componentes não alinhados"). */
+  .app-shell-docs > .sidebar.app-shell-aside { grid-column:4; grid-row:2; justify-self:start; inline-size:var(--docs-toc-width);
+    block-size:calc(100vh - var(--shell-top) - var(--space-8)); padding-block-start:0; padding-inline:var(--space-4); }
+}
 /* A margem é LÓGICA desde 03/10/2026 (AN-01): era `margin:space-4 space-4 space-4 0`, física, e na
    escrita da direita para a esquerda o conteúdo encostava na borda da página e deixava 32 de vão na
    junção com a lateral. Medido no banco da moldura; na esquerda para a direita nada muda. */
@@ -883,6 +1032,75 @@ img,svg { display:block; }
 }
 }
 
+/* O ARRANJO DE DOCUMENTAÇÃO NO CELULAR E NO TABLET (`AppShell layout="docs"`, lote U, 19/10/2026 — o Victor: "tudo como
+   ela"), medido na página da documentação da referência a 375, 768 e 1100:
+   - a LATERAL é coluna desde 768 (e não desde 1024): de 768 a 1023 ela fica à esquerda do texto, como lá;
+   - abaixo de 768 ela é a gaveta, e abre pela DIREITA, do lado do botão (que o `AppShell` põe no fim da barra);
+   - o índice ("On this page") é coluna só de 1280 para cima. Abaixo, ele é a GAVETA da BARRA DO ÍNDICE: uma barra de 40
+     presa logo abaixo do topo, na coluna do texto, com o nome da seção em vista e a setinha; tocar desce a lista. A
+     referência desenha um círculo de progresso; aqui é o ícone de lista, e nenhuma linha (ADR-0072).
+   Estas regras vêm DEPOIS das da gaveta de sempre e levam a classe do arranjo — com a mesma força, a ordem decide. */
+.docs-toc-bar { display:none; }
+@media (min-width:768px) and (max-width:1023px) {
+  .app-shell.app-shell-docs { grid-template-columns:var(--docs-sidebar-width) minmax(0,1fr); }
+  .app-shell-docs .btn.nav-toggle { display:none; }
+  .app-shell-docs > .sidebar[popover]:not(.app-shell-aside):not(:popover-open) { display:flex; }
+  .app-shell-docs > .sidebar:not(.app-shell-aside):not(.sidebar-flush) { --shell-top:calc(var(--docs-top) + var(--space-4)); grid-column:1; grid-row:2 / span 2;
+    position:sticky; inset-block-start:var(--shell-top); align-self:start; block-size:calc(100vh - var(--shell-top) - var(--space-8));
+    max-block-size:none; margin:var(--space-4) 0 0; border-width:0; padding-block:var(--space-2) var(--space-4); padding-inline:var(--space-4); }
+  .app-shell-docs > .sidebar > .sidebar-nav > .sidebar-list > li:first-child > .sidebar-group-label { margin-block-start:0; }
+  .app-shell-docs > .sidebar .sidebar-item { padding-inline:var(--space-2); }
+  .app-shell-docs > .sidebar .sidebar-group-label { margin-inline:var(--space-2); }
+  .app-shell-docs > .docs-toc-bar { grid-column:2; grid-row:2; }
+  .app-shell-docs > .content.content { grid-column:2; grid-row:3; }
+}
+@media (min-width:1024px) and (max-width:1279px) {
+  .app-shell-docs > .sidebar:not(.app-shell-aside):not(.sidebar-flush) { grid-row:2 / span 2; }
+  .app-shell-docs > .docs-toc-bar { grid-column:3; grid-row:2; }
+  .app-shell-docs > .content.content { grid-row:3; }
+}
+@media (max-width:1279px) {
+  .app-shell-docs > .docs-toc-bar { display:block; position:sticky; inset-block-start:var(--docs-top); z-index:var(--z-sticky); background:var(--background); }
+  .docs-toc-toggle { display:flex; align-items:center; gap:var(--space-2); inline-size:100%; min-block-size:var(--space-10); padding:0 var(--space-6);
+    border:0; background:transparent; color:var(--muted-foreground); font:inherit; font-size:var(--text-sm); text-align:start; cursor:pointer; }
+  .docs-toc-toggle:hover { color:var(--foreground); }
+  .docs-toc-toggle:focus-visible { outline:var(--focus-width) solid var(--focus-strong); outline-offset:calc(-1 * var(--focus-width)); }
+  .docs-toc-current { flex:1; min-inline-size:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
+  .app-shell-docs:has(> .app-shell-aside:popover-open) .docs-toc-toggle > .icon:last-child { rotate:180deg; }
+}
+@supports selector(:popover-open) {
+@media (max-width:1279px) {
+  .app-shell-docs > .sidebar.app-shell-aside[popover]:not(:popover-open) { display:none; }
+  /* Aberto, ele desce da barra: preso logo abaixo dela, na largura da coluna do texto, uma superfície que flutua por cima
+     do texto (o fundo opaco do popover, o canto do cartão). Sem véu: a lista é um atalho, não uma janela. */
+  .app-shell-docs > .sidebar.app-shell-aside[popover]:popover-open { position:fixed; inset-block-start:calc(var(--docs-top) + var(--space-10));
+    inset-block-end:auto; inset-inline:var(--space-4); inline-size:auto; block-size:auto;
+    max-block-size:calc(100dvh - var(--docs-top) - var(--space-10) - var(--space-4)); margin:0; padding:var(--space-2) var(--space-4) var(--space-4);
+    overflow:auto; border-radius:var(--radius-card); background:var(--popover); color:var(--popover-foreground); box-shadow:var(--shadow-lg); }
+  .app-shell-docs > .sidebar.app-shell-aside[popover]::backdrop { background:transparent; }
+}
+@media (min-width:768px) and (max-width:1279px) {
+  .app-shell-docs > .sidebar.app-shell-aside[popover]:popover-open { inset-inline-start:calc(var(--docs-sidebar-width) + var(--space-4)); }
+}
+@media (max-width:767px) {
+  /* A gaveta ABERTA é uma superfície, mesmo com a lateral sem caixa (`sidebarVariant="plain"`) do desktop: sem o fundo,
+     a lista se misturava ao texto da página por baixo (medido a 375). O fundo e o canto do popover, como o do índice. */
+  .app-shell-docs > .sidebar[popover]:not(.app-shell-aside):popover-open { inset-inline-start:auto; inset-inline-end:var(--space-4);
+    padding:var(--space-2) var(--space-4) var(--space-4); border-radius:var(--radius-card); background:var(--popover); color:var(--popover-foreground); box-shadow:var(--shadow-lg); }
+  .app-shell-docs > .sidebar[popover]:not(.app-shell-aside):popover-open .sidebar-item { padding-inline:var(--space-2); }
+  .app-shell-docs > .sidebar[popover]:not(.app-shell-aside):popover-open .sidebar-group-label { margin-inline:var(--space-2); }
+}
+}
+/* De 1280 para cima o índice é a coluna, e o atributo de gaveta não pode encolhê-lo: a regra da gaveta fechada
+   (`.sidebar[popover]:not(:popover-open)`, `width:auto`) vem antes na folha com a mesma força e o deixava com 200 (medido). */
+@media (min-width:1280px) {
+  .app-shell-docs > .sidebar.app-shell-aside[popover] { inline-size:var(--docs-toc-width); }
+}
+/* No celular o título fica a 32 da barra do índice, como o da referência a 375 (de 768 para cima, 16 nas duas). */
+@media (max-width:767px) {
+  .app-shell-docs > .content.content { padding-block-start:var(--space-8); }
+}
+
 /* ── 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
@@ -1180,7 +1398,7 @@ img,svg { display:block; }
    altura da barra não muda. O mesmo no `navigation.tsx`. */
 .bottom-nav.bottom-nav-ind-circle-bold .bottom-nav-item { padding:0; }
 .bottom-nav-disc { display:flex; flex-direction:column; align-items:center; justify-content:center; inline-size:var(--bottomnav-bold,3.5rem); max-inline-size:100%; min-height:var(--control-h-lg); padding:var(--space-1); border-radius:var(--radius-full); }
-.bottom-nav-ind-circle-bold .bottom-nav-item[aria-current] { color:var(--primary-foreground); }
+.bottom-nav-ind-circle-bold .bottom-nav-item[aria-current] { color:var(--primary-mark); }
 .bottom-nav-ind-circle-bold .bottom-nav-item[aria-current] .bottom-nav-disc { background:var(--primary); }
 .bottom-nav-ind-circle-bold .bottom-nav-item[aria-current] .icon { opacity:1; }
 /* O contador do `circle-bold` INVERTE, como o do `.btn-primary`, e a volta atrás está medida.
@@ -1188,8 +1406,8 @@ img,svg { display:block; }
    do Victor mostram. O gate de contraste reprovou no tema CLARO: sobre o amarelo sólido, nem o
    fundo do contador nem o anel branco chegam a 3:1. No escuro passava, e é assim que este defeito
    se esconde. Fio fino não substitui contraste quando as duas cores são claras. */
-.bottom-nav-ind-circle-bold .bottom-nav-item[aria-current] .badge { background:var(--primary-foreground); color:var(--primary); border-color:transparent; }
-.bottom-nav-ind-circle-bold .bottom-nav-item[aria-current] .bottom-nav-badge { color:var(--primary-foreground); }
+.bottom-nav-ind-circle-bold .bottom-nav-item[aria-current] .badge { background:var(--primary-mark); color:var(--primary); border-color:transparent; }
+.bottom-nav-ind-circle-bold .bottom-nav-item[aria-current] .bottom-nav-badge { color:var(--primary-mark); }
 /* ── CÁPSULA (`capsule`) — a "A" da bancada do Victor, 03/10/2026: o modelo de uma das referências ─
    A moldura do ícone vira a cápsula de 56 × 32 do indicador ativo dessa referência
    (`--bottomnav-bold` × `--bottomnav-ring`), em TODOS os itens; só a do escolhido é pintada, de
@@ -1200,9 +1418,9 @@ img,svg { display:block; }
    mesma razão medida do `circle-bold`, logo acima. */
 .bottom-nav-ind-capsule .bottom-nav-mark { width:var(--bottomnav-bold,3.5rem); height:var(--bottomnav-ring); border-radius:var(--radius-full); }
 .bottom-nav-ind-capsule .bottom-nav-badge { inset-inline-end:calc((var(--bottomnav-bold,3.5rem) - var(--bottomnav-ring)) / 2 - var(--space-05)); }
-.bottom-nav-ind-capsule .bottom-nav-item[aria-current] .bottom-nav-mark { background:var(--primary); color:var(--primary-foreground); }
+.bottom-nav-ind-capsule .bottom-nav-item[aria-current] .bottom-nav-mark { background:var(--primary); color:var(--primary-mark); }
 .bottom-nav-ind-capsule .bottom-nav-item[aria-current] .icon { opacity:1; }
-.bottom-nav-ind-capsule .bottom-nav-item[aria-current] .badge { background:var(--primary-foreground); color:var(--primary); border-color:transparent; }
+.bottom-nav-ind-capsule .bottom-nav-item[aria-current] .badge { background:var(--primary-mark); color:var(--primary); border-color:transparent; }
 /* No `content`, o recheio de sempre (`--space-1`) e não o `--space-3`: com ele cada item teria 80. */
 .bottom-nav-content:not(.bottom-nav-edge).bottom-nav-ind-capsule .bottom-nav-item { padding-inline:var(--space-1); }
 /* ── EXPANDE (`expand`) — a "C" da bancada do Victor, 03/10/2026 ───────────────────────────────
@@ -1216,9 +1434,9 @@ img,svg { display:block; }
 .bottom-nav-ind-expand .bottom-nav-item { flex-direction:row; gap:var(--space-2); min-width:var(--target-min); min-height:var(--target-min); padding:0; }
 .bottom-nav-ind-expand .bottom-nav-mark { width:var(--icon-lg); }
 .bottom-nav-ind-expand .bottom-nav-label { font-size:var(--text-sm); }
-.bottom-nav-ind-expand .bottom-nav-item[aria-current] { flex:none; inline-size:calc(var(--icon-lg) + var(--space-2) + var(--space-20) + 2 * var(--space-3)); padding-inline:var(--space-3); background:var(--primary); color:var(--primary-foreground); }
+.bottom-nav-ind-expand .bottom-nav-item[aria-current] { flex:none; inline-size:calc(var(--icon-lg) + var(--space-2) + var(--space-20) + 2 * var(--space-3)); padding-inline:var(--space-3); background:var(--primary); color:var(--primary-mark); }
 .bottom-nav-ind-expand .bottom-nav-item[aria-current] .icon { opacity:1; }
-.bottom-nav-ind-expand .bottom-nav-item[aria-current] .badge { background:var(--primary-foreground); color:var(--primary); border-color:transparent; }
+.bottom-nav-ind-expand .bottom-nav-item[aria-current] .badge { background:var(--primary-mark); color:var(--primary); border-color:transparent; }
 .bottom-nav-content:not(.bottom-nav-edge).bottom-nav-ind-expand .bottom-nav-item:not([aria-current]) { flex:none; inline-size:var(--target-min); padding-inline:0; }
 
 /* ── A LINHA DE LISTA TOCÁVEL (§4.3 do CONSUMIDOR-1) ──────────────────────────
@@ -1955,7 +2173,12 @@ img,svg { display:block; }
 /* A opção marcada fica CHEIA, com o ponto no meio, como a da referência (o ponto dela tem 8 numa
    marca de 16: a metade). Era vazia, com o ponto amarelo. */
 .radio input:checked + .control-mark { background:var(--control-selected); border-color:transparent; }
-.radio input:checked + .control-mark:after { content:""; width:50%; height:50%; border-radius:50%; background:var(--control-selected-foreground); }
+/* A BOLINHA tem 6 de 14, a da referência (`scale: 0.4286` no CSS publicado dela, 3.2.6), e é ENCOLHIDA POR ESCALA a
+   partir do miolo inteiro, e não desenhada pequena (17/10/2026 — o Victor: "a bolinha do rádio não está centralizada, é
+   torta"). Medido na imagem: a de antes, 7 dentro de 14, ficava meio ponto acima e à esquerda do centro em todo zoom —
+   a folga de 3,5 virava 3 de um lado e 4 do outro. A escala gira em torno do centro exato da caixa. */
+.radio input:checked + .control-mark:after { content:""; inline-size:100%; block-size:100%; border-radius:50%;
+  background:var(--control-selected-dot); scale:calc(3 / 7); }
 .switch { display:inline-flex; align-items:center; gap:var(--space-3); font-size:var(--text-sm); font-weight:var(--weight-medium); cursor:pointer; } .switch input { position:absolute; opacity:0; }
 /* O TRILHO DO SWITCH (0.32.0): o da referência, 40 × 20 (sm 32 × 16, lg 48 × 24) — a largura é o
    dobro da altura. Era 42 × 24. A altura é a de controle MENOS 16: dá exatamente os três dela
@@ -1979,7 +2202,7 @@ img,svg { display:block; }
    mesma distância nos dois sentidos de escrita. */
 .switch-track:after { --thumb-h:calc(var(--switch-h) - 2 * var(--space-05)); --thumb-w:calc(var(--thumb-h) * 11 / 8); content:""; position:absolute; inset-inline-start:calc(var(--space-05) - var(--border-width)); top:calc(var(--space-05) - var(--border-width)); block-size:var(--thumb-h); inline-size:var(--thumb-w); border-radius:var(--radius-full); background:var(--muted-foreground); transition:transform var(--duration-base) var(--ease-standard),background var(--duration-base) var(--ease-standard); }
 .switch-track { --switch-x:calc(var(--switch-h) * 2 - (var(--switch-h) - 2 * var(--space-05)) * 11 / 8 - 2 * var(--space-05)); }
-.switch input:checked + .switch-track { background:var(--control-selected); border-color:transparent; } .switch input:checked + .switch-track:after { transform:translateX(var(--switch-x)); background:var(--control-selected-foreground); }
+.switch input:checked + .switch-track { background:var(--control-selected); border-color:transparent; } .switch input:checked + .switch-track:after { transform:translateX(var(--switch-x)); background:var(--primary-mark); }
 .range { width:100%; accent-color:var(--primary); }
 /* Slider VERTICAL, no `<input type=range>` NATIVO — sem trocar de motor.
 
@@ -2019,7 +2242,7 @@ img,svg { display:block; }
 .slider-track { position:relative; inline-size:100%; block-size:var(--space-5); border-inline:var(--space-3) solid transparent; border-radius:var(--radius-full); background:var(--secondary); }
 .slider-fill { box-sizing:content-box; block-size:100%; margin-inline-start:calc(-1 * var(--space-3)); padding-inline-start:var(--space-3); border-radius:var(--radius-full); background:var(--primary); }
 .slider-thumb { display:grid; place-items:center; inline-size:calc(var(--space-6) + var(--space-1)); block-size:100%; border-radius:var(--radius-full); background:var(--primary); cursor:grab; }
-.slider-thumb::after { content:""; inline-size:var(--space-6); block-size:var(--space-4); border-radius:var(--radius-full); background:var(--primary-foreground); box-shadow:var(--shadow-sm); transition:scale var(--duration-fast) var(--ease-standard); }
+.slider-thumb::after { content:""; inline-size:var(--space-6); block-size:var(--space-4); border-radius:var(--radius-full); background:var(--primary-mark); box-shadow:var(--shadow-sm); transition:scale var(--duration-fast) var(--ease-standard); }
 .slider-thumb[data-dragging] { cursor:grabbing; }
 .slider-thumb[data-dragging]::after { scale:.9; }
 .slider-thumb:has(input:focus-visible) { outline:var(--focus-width) solid var(--focus-strong); outline-offset:var(--focus-offset); }
@@ -2159,7 +2382,8 @@ img,svg { display:block; }
 /* `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. */
+   A etiqueta de código do SITE (a classe `.chip` do `scripts/build-catalog.mjs`, que não é peça da Aurea) já tinha
+   aprendido isso; o .badge não. Desde 19/10/2026 (GAR-20), o componente `Chip` existe: é outro nome do `Badge`. */
 /* 0.32.0: as medidas do Chip da referência (o `Badge` da Aurea é o Chip dela), lidas no CSS publicado:
    24 de altura, 10 até o texto (8 da caixa + 2 do rótulo — aqui, com a borda de 1 que é nossa, 9), 4
    entre o glifo e o texto (era 6); `sm` 20 com 6 até o texto, `lg` 28 com 14 e letra de 14. A cápsula e a
@@ -2173,7 +2397,9 @@ img,svg { display:block; }
    numa fila, `align-self:flex-start` tiraria o selo do meio; o tamanho definido só desliga o
    esticar, que é o que a coluna faz com um item sem tamanho. */
 .badge-fit { inline-size:fit-content; }
-.badge-primary { --badge-accent:var(--primary-emphasis); color:var(--primary-emphasis); border-color:transparent; background:color-mix(in srgb,var(--primary) 10%,transparent); }
+/* O cheio da marca enche com o acento e escreve com a letra do botão amarelo (`--primary-foreground`): desde a ADR-0073
+   o acento do claro é o próprio amarelo, e a letra de antes (`--background`, clara) media 1,75:1 em cima dele. */
+.badge-primary { --badge-accent:var(--primary-emphasis); --badge-on:var(--primary-foreground); color:var(--primary-emphasis); border-color:transparent; background:color-mix(in srgb,var(--primary) 10%,transparent); }
 /* TAMANHOS. O md é a base (24px), que não muda — é o que as 103 fichas já usam. */
 .badge-xs { min-height:var(--space-4); padding:0 var(--space-1); border-width:0; }
 .badge-sm { min-height:var(--space-5); padding:0 calc(var(--space-1) + var(--space-05) - var(--border-width)); }
@@ -2258,8 +2484,8 @@ img,svg { display:block; }
    `--background` como texto do sólido serve aos DOIS temas porque o acento já vira com o
    tema: `--success-400` é verde CLARO no escuro e verde ESCURO no claro. */
 /* O selo CHEIO de estado é o botão cheio do mesmo tom (ADR-0061): a mesma cor funda e a mesma letra
-   (`--badge-fill`/`--badge-on`). Quem não declara o par (as categorias, a marca, o neutro) segue
-   enchendo com o acento, como antes. */
+   (`--badge-fill`/`--badge-on`). Quem não declara o par (as categorias, o neutro) segue enchendo com o
+   acento, como antes; a marca enche com o acento e declara só a letra (ADR-0073). */
 .badge-solid { background:var(--badge-fill, var(--badge-accent)); color:var(--badge-on, var(--background)); border-color:transparent; }
 .badge-outline { background:transparent; color:var(--badge-accent); border-color:transparent; }
 /* flat (15/10/2026): o tom de sempre sem a linha em volta — o selo da referência não tem borda em forma nenhuma. A
@@ -2379,7 +2605,23 @@ img,svg { display:block; }
    Só o ícone DIRETO do alerta: um ícone dentro do corpo (num botão, num link) é do corpo. */
 .alert>.icon { --step-icon:var(--icon-sm); margin:var(--space-1); color:var(--alert-tone); }
 .banner strong { font-size:var(--text-sm); } .banner p { margin:0; color:var(--muted-foreground); font-size:var(--text-sm); }
-@media (max-width:640px) { .banner { grid-template-columns:auto minmax(0,1fr); } .banner>:last-child { grid-column:2; justify-self:start; } }
+/* GAR-19 (lote U, 19/10/2026): o aviso de cookies, Banner variant="consent". Uma coluna: o título (h2), o texto e os
+   três botões de MESMO peso numa linha que quebra — rejeitar tão fácil de ver quanto aceitar (o guia da ANPD) —; depois
+   da escolha, a confirmação no lugar deles. O aviso mora no alto da página e não fica preso: com position:fixed ele
+   cobriria o que recebe o foco (WCAG 2.4.11). A janela de preferências é o Dialog, e as categorias, o Switch. */
+/* O fundo e a sombra são os do cartão, como os do Alert: no fundo cinza do Banner comum, os botões cinza sumiam (medido na
+   bancada). */
+.banner-consent { grid-template-columns:minmax(0,1fr); align-items:start; gap:var(--space-3); background:var(--card); box-shadow:var(--shadow-sm); }
+.banner-consent-title { margin:0; color:var(--foreground); font-size:var(--text-base); font-weight:var(--weight-semibold); line-height:var(--leading-tight); }
+.banner-consent-text { min-inline-size:0; color:var(--muted-foreground); font-size:var(--text-sm); }
+.banner-consent-text > * + * { margin-block-start:var(--space-2); }
+.banner-consent-actions { display:flex; flex-wrap:wrap; gap:var(--space-2); }
+.banner-consent-message { color:var(--foreground); font-size:var(--text-sm); }
+.banner-consent-categories { display:grid; gap:var(--space-5); }
+.banner-consent-required { display:grid; gap:var(--space-1); }
+.banner-consent-required-head { display:flex; flex-wrap:wrap; align-items:center; gap:var(--space-2); }
+.banner-consent-required p { margin:0; color:var(--muted-foreground); font-size:var(--text-xs); line-height:var(--space-4); }
+@media (max-width:640px) { .banner:not(.banner-consent) { grid-template-columns:auto minmax(0,1fr); } .banner:not(.banner-consent)>:last-child { grid-column:2; justify-self:start; } }
 .progress { height:8px; overflow:hidden; border-radius:999px; background:var(--surface-3); }
 .progress>span { display:block; height:100%; border-radius:inherit; background:var(--primary); }
 /* AN-07 (03/10/2026): a caixa de fora, o texto de apoio e o tom. A anatomia é a da barra de progresso da
@@ -3078,15 +3320,17 @@ button.tag-main { cursor:pointer; }
    `.image`; aqui fica só o que não varia. O `<iframe>` é absoluto porque a altura é da caixa, não
    dele. A fachada é um `<button>` que cobre a caixa inteira: o alvo de clique é o vídeo todo, e o
    anel de foco é o `:focus-visible` global da casa. A pastilha de tocar é amarela porque é a ação
-   da tela — o mesmo combinado do `Card variant="brand"`: amarelo só para pedir ação. O anel de
-   `--media-scrim` em volta dela não é enfeite: a capa é do consumidor, e numa capa amarela a
-   pastilha sumia — medido na primeira imagem mostrada ao Victor, em 24/09/2026. */
+   da tela — o mesmo combinado do `Card variant="brand"`: amarelo só para pedir ação. O ícone dela
+   é o marrom da marca (`--primary-mark`), e ela não tem mais o anel escuro em volta: decisão do
+   Victor, 17/10/2026 (*"não quero preto"*). Numa capa amarela, quem a separa é a sombra. A caixa
+   pinta o fundo só por dentro da borda transparente (`background-clip`): sem isso, o fundo escuro
+   aparecia como um aro de 1 em volta da capa. */
 .media-embed { display:grid; gap:var(--space-2); min-inline-size:0; }
-.media-embed-frame { position:relative; overflow:hidden; border:1px solid transparent; border-radius:var(--radius-card); background:var(--media-canvas); }
+.media-embed-frame { position:relative; overflow:hidden; border:1px solid transparent; border-radius:var(--radius-card); background:var(--media-canvas); background-clip:padding-box; }
 .media-embed-frame>iframe { position:absolute; inset:0; inline-size:100%; block-size:100%; border:0; }
 .media-embed-facade { position:absolute; inset:0; display:grid; place-items:center; padding:0; border:0; border-radius:inherit; background:var(--media-canvas); color:var(--media-foreground); cursor:pointer; }
 .media-embed-facade>img { position:absolute; inset:0; inline-size:100%; block-size:100%; object-fit:cover; }
-.media-embed-play { position:relative; display:grid; place-items:center; inline-size:var(--control-h-lg); block-size:var(--control-h-lg); border-radius:var(--radius-full); background:var(--primary); color:var(--primary-foreground); box-shadow:0 0 0 var(--space-1) var(--media-scrim),var(--shadow-lg); }
+.media-embed-play { position:relative; display:grid; place-items:center; inline-size:var(--control-h-lg); block-size:var(--control-h-lg); border-radius:var(--radius-full); background:var(--primary); color:var(--primary-mark); box-shadow:var(--shadow-lg); }
 .media-embed-facade:hover .media-embed-play { transform:scale(1.06); }
 .media-embed-link { display:inline-flex; align-items:center; gap:var(--space-1); justify-self:start; color:var(--muted-foreground); font-size:var(--text-sm); }
 .media-embed-link:hover { color:var(--foreground); }
@@ -3203,7 +3447,10 @@ button.tag-main { cursor:pointer; }
 /* `0.9em` e não um token: código dentro do texto se mede em relação à LINHA em que está, e um
    valor absoluto o deixaria maior que o parágrafo dentro de um h2. É o mesmo motivo pelo qual o
    `.badge` tem `line-height:1` — geometria que depende do contexto se escreve relativa. */
-.prose code { padding:var(--space-05) var(--space-1); border-radius:var(--radius-xs); background:var(--surface-2); font-family:var(--font-code); font-size:0.9em; }
+/* `overflow-wrap:anywhere` (18/10/2026, lote U): código no meio do texto é uma palavra só — `window.Aurea.setDensity("compact")`
+   —, e sem a quebra ele empurrava a página para o lado a 320 (medido na página Density do site; a WCAG 1.4.10 pede que
+   nada role para o lado). Dentro do `pre` ela não age: lá o `white-space` não quebra, e a caixa rola. */
+.prose code { padding:var(--space-05) var(--space-1); border-radius:var(--radius-xs); background:var(--surface-2); font-family:var(--font-code); font-size:0.9em; overflow-wrap:anywhere; }
 .prose pre { overflow-x:auto; padding:var(--space-4); border:1px solid transparent; border-radius:var(--radius-card); background:var(--surface-2); }
 .prose pre code { padding:0; border-radius:0; background:transparent; font-size:var(--text-sm); }
 .prose img { max-width:100%; height:auto; border-radius:var(--radius-lg); }
@@ -3517,7 +3764,8 @@ button.tag-main { cursor:pointer; }
 /* A largura é a do GLIFO que mora dentro (`--icon-sm`, o mesmo do `<Icon size="sm">`), e não um
    px cru: assim o slot acompanha a escala de glifo do sistema em vez de fixar um número. */
 .menu-mark { flex:none; display:inline-flex; align-items:center; justify-content:center; inline-size:var(--icon-sm); block-size:var(--icon-sm); color:var(--primary); }
-/* METADE do slot, pela mesma razão do `.control-mark:after` do rádio: a marca é proporcional. */
+/* METADE do slot: a marca é proporcional, e PAR (8 em 16), então fica no centro em qualquer zoom — o ponto do `Radio`
+   precisou de escala porque o dele era ímpar (17/10/2026). */
 .menu-ponto { inline-size:calc(var(--icon-sm) / 2); block-size:calc(var(--icon-sm) / 2); border-radius:50%; background:currentColor; }
 /* O rótulo de grupo NÃO é item: não é focável, não é clicável, e a pele não pode sugerir que é. */
 .menu-label { padding:var(--space-2) var(--menu-px) var(--space-1); color:var(--muted-foreground); font-size:var(--text-xs); font-weight:var(--weight-semibold); }
@@ -4051,6 +4299,15 @@ th[aria-sort] .datagrid-sort-icon { color:var(--primary); }
 .graph-node { position:relative; inline-size:var(--graph-node-w,180px); }
 .graph-node-body { display:grid; gap:var(--space-05); inline-size:100%; padding:var(--space-2) var(--space-3); border:1px solid transparent; 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; }
+/* O PONTEIRO NOS BOTÕES DO NÓ (lote U, 19/10/2026 — o pedido 16 do app de topologia). Fora do modo de arrumar, o nó vai ao
+   motor como não escolhível (`selectable:false`, pela trava `alvo-clicavel`), e o motor tira o ponteiro do invólucro
+   (`.react-flow__node`) quando o nó não é escolhível nem arrastável e o app não passa `onNodeClick`/`onNodeMouse*` — os
+   botões de dentro herdavam o `none`, e o clique de mouse no corpo não chegava ao `onSelect` (pelo teclado chegava). Os
+   botões pegam o ponteiro de volta: o corpo só é botão quando há `onSelect` (sem ele, segue sem ponteiro, como a trava
+   pede); o de recolher e o de fechar o contêiner são sempre botões. A regra sai presa ao `.dependency-graph`, e não à
+   classe do motor (o check 15 barra classe de terceiro no core): o `pointer-events` herda, e o `auto` no botão vale
+   embaixo de qualquer invólucro. */
+.dependency-graph :is(button.graph-node-body,.graph-node-toggle,.graph-group-toggle) { pointer-events:auto; }
 .graph-node[data-selected] .graph-node-body { border-color:transparent; background:color-mix(in oklab,var(--primary) 14%,var(--card)); }
 .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
@@ -4109,6 +4366,12 @@ button.graph-node-body { cursor:pointer; }
 /* A pastilha do meio (marca, número, grupo) e o nome da porta na ponta são HTML sobre o desenho. */
 .graph-edge-chip { position:absolute; z-index:var(--graph-label-z); display:inline-flex; align-items:center; gap:var(--space-1); padding:var(--space-05) var(--space-2); border-radius:var(--radius-control); background:var(--xy-edge-label-background-color); color:var(--xy-edge-label-color); font-size:var(--graph-edge-label-size,var(--text-xs)); line-height:var(--leading-tight); white-space:nowrap; pointer-events:all; }
 .graph-edge-end { position:absolute; z-index:var(--graph-label-z); padding:0 var(--space-1); border-radius:var(--radius-xs); background:var(--xy-edge-label-background-color); color:var(--xy-edge-label-color); font-size:var(--graph-edge-label-size,var(--text-xs)); line-height:var(--leading-tight); white-space:nowrap; pointer-events:none; }
+/* As guias do arraste (MNT-28, 17/10/2026): onde o nó encaixa no vizinho, como no draw.io — desenho cheio, na espessura
+   do foco e na cor dele (a que se vê nos dois temas), por cima das linhas e dos nós e sem receber o ponteiro. A posição e
+   o comprimento vêm do mapa, como os da pastilha da linha. */
+.graph-guide { position:absolute; z-index:var(--graph-label-z); background:var(--focus-strong); pointer-events:none; }
+.graph-guide-x { inline-size:var(--focus-width); margin-inline-start:calc(var(--focus-width) / -2); }
+.graph-guide-y { block-size:var(--focus-width); margin-block-start:calc(var(--focus-width) / -2); }
 /* `nodrag`/`nopan`: a pastilha é HTML sobre o mapa, e as duas classes dizem ao motor para não arrastar
    nem rolar a tela por ela (o botão do grupo precisa do clique). Fora do botão, o cursor é o comum. */
 .graph-edge-chip.nodrag.nopan { cursor:default; }
@@ -4289,12 +4552,12 @@ button.graph-node-body { cursor:pointer; }
    Ou seja: o par padrão cobre Firefox e Chrome e ainda não cobre o Safari da maioria; o caminho
    webkit cobre Safari e Chrome. Juntos cobrem os três, e onde os dois valem o padrão ganha por
    vir depois. Só cor e espessura — nada de desenhar seta ou canto. */
-.carousel-track,.code-block,.combobox-popup,.command-palette,.dialog,.dialog-body,.drawer,.log-stream,.notification-list,.sidebar,.table-region,.table-wrap,.toc {
+.carousel-track,.code-block,.combobox-popup,.command-palette,.dialog,.dialog-body,.drawer,.log-stream,.notification-list,.sidebar,.table-region,.table-wrap,.toc,.topbar-tabs {
   scrollbar-width:thin; scrollbar-color:var(--border-strong) transparent;
 }
-.carousel-track::-webkit-scrollbar,.code-block::-webkit-scrollbar,.combobox-popup::-webkit-scrollbar,.command-palette::-webkit-scrollbar,.dialog::-webkit-scrollbar,.dialog-body::-webkit-scrollbar,.drawer::-webkit-scrollbar,.log-stream::-webkit-scrollbar,.notification-list::-webkit-scrollbar,.sidebar::-webkit-scrollbar,.table-region::-webkit-scrollbar,.table-wrap::-webkit-scrollbar,.toc::-webkit-scrollbar { inline-size:var(--space-2); block-size:var(--space-2); }
-.carousel-track::-webkit-scrollbar-track,.code-block::-webkit-scrollbar-track,.combobox-popup::-webkit-scrollbar-track,.command-palette::-webkit-scrollbar-track,.dialog::-webkit-scrollbar-track,.dialog-body::-webkit-scrollbar-track,.drawer::-webkit-scrollbar-track,.log-stream::-webkit-scrollbar-track,.notification-list::-webkit-scrollbar-track,.sidebar::-webkit-scrollbar-track,.table-region::-webkit-scrollbar-track,.table-wrap::-webkit-scrollbar-track,.toc::-webkit-scrollbar-track { background:transparent; }
-.carousel-track::-webkit-scrollbar-thumb,.code-block::-webkit-scrollbar-thumb,.combobox-popup::-webkit-scrollbar-thumb,.command-palette::-webkit-scrollbar-thumb,.dialog::-webkit-scrollbar-thumb,.dialog-body::-webkit-scrollbar-thumb,.drawer::-webkit-scrollbar-thumb,.log-stream::-webkit-scrollbar-thumb,.notification-list::-webkit-scrollbar-thumb,.sidebar::-webkit-scrollbar-thumb,.table-region::-webkit-scrollbar-thumb,.table-wrap::-webkit-scrollbar-thumb,.toc::-webkit-scrollbar-thumb { background:var(--border-strong); border-radius:var(--radius-control); }
+.carousel-track::-webkit-scrollbar,.code-block::-webkit-scrollbar,.combobox-popup::-webkit-scrollbar,.command-palette::-webkit-scrollbar,.dialog::-webkit-scrollbar,.dialog-body::-webkit-scrollbar,.drawer::-webkit-scrollbar,.log-stream::-webkit-scrollbar,.notification-list::-webkit-scrollbar,.sidebar::-webkit-scrollbar,.table-region::-webkit-scrollbar,.table-wrap::-webkit-scrollbar,.toc::-webkit-scrollbar,.topbar-tabs::-webkit-scrollbar { inline-size:var(--space-2); block-size:var(--space-2); }
+.carousel-track::-webkit-scrollbar-track,.code-block::-webkit-scrollbar-track,.combobox-popup::-webkit-scrollbar-track,.command-palette::-webkit-scrollbar-track,.dialog::-webkit-scrollbar-track,.dialog-body::-webkit-scrollbar-track,.drawer::-webkit-scrollbar-track,.log-stream::-webkit-scrollbar-track,.notification-list::-webkit-scrollbar-track,.sidebar::-webkit-scrollbar-track,.table-region::-webkit-scrollbar-track,.table-wrap::-webkit-scrollbar-track,.toc::-webkit-scrollbar-track,.topbar-tabs::-webkit-scrollbar-track { background:transparent; }
+.carousel-track::-webkit-scrollbar-thumb,.code-block::-webkit-scrollbar-thumb,.combobox-popup::-webkit-scrollbar-thumb,.command-palette::-webkit-scrollbar-thumb,.dialog::-webkit-scrollbar-thumb,.dialog-body::-webkit-scrollbar-thumb,.drawer::-webkit-scrollbar-thumb,.log-stream::-webkit-scrollbar-thumb,.notification-list::-webkit-scrollbar-thumb,.sidebar::-webkit-scrollbar-thumb,.table-region::-webkit-scrollbar-thumb,.table-wrap::-webkit-scrollbar-thumb,.toc::-webkit-scrollbar-thumb,.topbar-tabs::-webkit-scrollbar-thumb { background:var(--border-strong); border-radius:var(--radius-control); }
 /* A LATERAL é a exceção (0.32.0; o Victor, 13/10/2026, olhando a da documentação da referência: a barra
    "só aparece se o mouse fica em cima do sidebar e ela é clarinha" — e, sobre o padrão, "pode alterar o
    atual para ser claro e sumir a rolagem"). A barra continua NATIVA e continua lá — a largura fina não
@@ -4390,6 +4653,11 @@ button.graph-node-body { cursor:pointer; }
    da "C" dos botões): com a letra de sempre, o verde caía a 3,79:1 no claro e o `success` a 4,15:1 no escuro, dentro do
    cartão. Medido em 16/10/2026: o pior caso passa a 4,79:1. Os outros selos (suave, plano) têm fundo próprio e não mudam. */
 .badge-outline { background-color:color-mix(in oklab,var(--badge-accent) 16%,transparent); color:color-mix(in oklab,var(--badge-accent) 80%,var(--foreground)); }
+/* Menos o primário da Aurea (ADR-0073, decisão do Victor de 18/10/2026, "A"): a letra é o próprio amarelo, a mesma
+   do selo suave e do botão de contorno da marca — misturado ao texto, ele virava mostarda (2,36:1) só nesta peça. A
+   referência principal usa a mesma letra no suave e no contorno. Só sem `data-brand`: na `lory` do claro, sem a
+   mistura, a letra cairia de 5,56 para 4,42:1. */
+.badge-primary.badge-outline:not(:where([data-brand],[data-brand] *)) { color:var(--badge-accent); }
 /* O registro ganhou o fundo dos campos; o nível `info` (o azul) caía a 4,08:1 sobre ele no claro. A mesma letra 20% para o texto. */
 .log-stream .log-level.info { color:color-mix(in oklab,var(--info-400) 80%,var(--foreground)); }
 .step:not(.step-done,.step-active,.step-error,.done,.active) .step-dot { background-color:var(--fill-3-solid); }

package/dist/aurea.js

@@ -240,6 +240,10 @@
     }
     if (!targets.length) return;
     var seen = {};
+    // A BARRA DO ÍNDICE do `AppShell layout="docs"` (lote U, 19/10/2026): abaixo de 1280 o índice é a gaveta dela, e ela
+    // mostra o nome da seção em vista, como a da referência. É o mesmo cálculo; aqui só se escreve o nome lá.
+    var shell = toc.closest ? toc.closest(".app-shell") : null;
+    var nomeNaBarra = shell ? shell.querySelector("[data-toc-current]") : null;
     var observer = new IntersectionObserver(function (entries) {
       // Se o React assumiu este índice depois de nós, saímos. A ordem importa e não é
       // controlável: `initTocs` roda no DOMContentLoaded, e a hidratação pode vir depois. Sem
@@ -255,6 +259,7 @@
         if (id === current) links[id].setAttribute("aria-current", "true");
         else links[id].removeAttribute("aria-current");
       }
+      if (nomeNaBarra && links[current]) nomeNaBarra.textContent = links[current].textContent;
     }, {rootMargin: "0px 0px -75% 0px"});
     for (var k = 0; k < targets.length; k++) observer.observe(targets[k]);
   }
@@ -350,6 +355,19 @@
       for (var g = 0; g < abertas.length; g++) if (estaAberta(abertas[g])) abertas[g].hidePopover();
     };
     if (desktop.addEventListener) desktop.addEventListener("change", aoSubir);
+    // No `layout="docs"` (lote U) a lateral é coluna desde 768 e o índice desde 1280: cada gaveta fecha no corte DELA.
+    // 768 e 1280 são o `--breakpoint-md` e o `--breakpoint-xl`, os cortes do arranjo na folha.
+    var cortes = [["(min-width: 768px)", ".app-shell-docs > .sidebar[popover]:not(.app-shell-aside)"],
+      ["(min-width: 1280px)", ".app-shell-docs > .sidebar.app-shell-aside[popover]"]];
+    cortes.forEach(function (par) {
+      var mq = window.matchMedia(par[0]);
+      if (!mq.addEventListener) return;
+      mq.addEventListener("change", function (e) {
+        if (!e.matches) return;
+        var gavetas = document.querySelectorAll(par[1]);
+        for (var g = 0; g < gavetas.length; g++) if (estaAberta(gavetas[g])) gavetas[g].hidePopover();
+      });
+    });
   }
 
   function toastStack() {

package/package.json

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