@aurea-uds/core 0.56.0 → 0.61.0

package/dist/aurea.css

@@ -1225,10 +1225,10 @@ img,svg { display:block; }
 /* `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); } }
+@media (min-width:48em) { .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); } }
+@media (min-width:48em) { .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`
@@ -1239,7 +1239,7 @@ img,svg { display:block; }
 .section-card { background:var(--card); color:var(--card-foreground); }
 .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); } }
+@media (min-width:48em) { .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
@@ -1297,7 +1297,7 @@ img,svg { display:block; }
 .section-footer-inline-links { display:flex; flex-wrap:wrap; align-items:center; gap:var(--space-2); margin:0; padding:0; list-style:none; }
 .section-footer-line .section-footer-link { display:inline-flex; align-items:center; }
 .section-footer-line .section-footer-link:hover { color:var(--foreground); }
-@media (min-width:768px) {
+@media (min-width:48em) {
   .section-footer-top { flex-direction:row; justify-content:space-between; }
   .section-footer-brand { flex:1 1 0; min-inline-size:0; }
   .section-footer-nav { flex:2 1 0; grid-template-columns:repeat(auto-fit,minmax(8rem,1fr)); }
@@ -1413,14 +1413,14 @@ img,svg { display:block; }
    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); } }
+@media (min-width:48em) { .topbar-tabs { gap:var(--space-3); } }
 /* A PONTA DA LINHA DAS ÁREAS (`Header tabsEnd`, bloco 1 — 23/10/2026): a chave Web | Native da documentação da
    referência, do lado oposto das áreas e no meio da altura da linha. As áreas continuam rolando de lado quando não cabem;
    a ponta não encolhe. Abaixo de 768 ela some, como lá. */
 .topbar-tabs-row { flex-basis:100%; display:flex; align-items:center; gap:var(--space-4); min-inline-size:0; }
 .topbar-tabs-row > .topbar-tabs { flex:1 1 auto; min-inline-size:0; }
 .topbar-tabs-end { flex:none; }
-@media (max-width:767px) { .topbar-tabs-end { display:none; } }
+@media (max-width:47.9375em) { .topbar-tabs-end { display:none; } }
 .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; }
@@ -1468,7 +1468,7 @@ img,svg { display:block; }
   .topbar-menu-panel:popover-open { position-anchor:--aurea-header; inset-block-start:calc(anchor(bottom) - var(--border-width)); inset-inline-start:anchor(start); inset-inline-end:anchor(end); }
 }
 @supports selector(:popover-open) {
-@media (max-width:767px) { .topbar-site .topbar-nav { display:none; } .topbar-site .topbar-actions { margin-inline-start:auto; } .topbar-site .btn.topbar-menu-toggle { display:inline-flex; } .topbar-menu-panel:popover-open { display:block; } }
+@media (max-width:47.9375em) { .topbar-site .topbar-nav { display:none; } .topbar-site .topbar-actions { margin-inline-start:auto; } .topbar-site .btn.topbar-menu-toggle { display:inline-flex; } .topbar-menu-panel:popover-open { display:block; } }
 }
 /* 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. */
@@ -1527,8 +1527,8 @@ img,svg { display:block; }
    (`.app-shell-collapsible > .sidebar`, mais abaixo na folha) prende TODA lateral na coluna 1, e com
    a mesma força ganharia por vir depois. */
 .app-shell-with-aside > .sidebar.app-shell-aside { grid-column:-2 / -1; grid-row:auto; }
-@media (max-width:1279px) { .app-shell-with-aside > .sidebar.app-shell-aside { position:static; height:auto; max-height:none; } }
-@media (min-width:1280px) {
+@media (max-width:79.9375em) { .app-shell-with-aside > .sidebar.app-shell-aside { position:static; height:auto; max-height:none; } }
+@media (min-width:80em) {
   .app-shell-with-aside { grid-template-columns:var(--sidebar-track) minmax(0,1fr) var(--aside-track); }
   .app-shell-with-aside > .content.content { grid-column:2; grid-row:2; margin-inline-end:0; }
   .app-shell-with-aside > .sidebar.app-shell-aside { grid-column:3; grid-row:2; }
@@ -1567,18 +1567,18 @@ img,svg { display:block; }
 /* As colunas ficam a --space-4 das bordas da tela, alinhadas com a pílula (sem isto, abaixo de 1432 a lateral e o índice
    encostavam na borda — medido a 1280). De 768 para cima, e não de 1024 (0.52.1, aprovado pela imagem em 01/11/2026): de
    768 a 1023 a lateral é coluna, e encostava na borda com a cápsula a 16. */
-@media (min-width:768px) { .app-shell-docs.app-shell-pill { padding-inline:var(--space-4); } .app-shell-docs.app-shell-pill > .topbar { padding-inline:0; }
+@media (min-width:48em) { .app-shell-docs.app-shell-pill { padding-inline:var(--space-4); } .app-shell-docs.app-shell-pill > .topbar { padding-inline:0; }
   /* A lateral com caixa vai até 16 do pé da tela, e não mais (o desenho, medido em 31/10/2026). */
   .app-shell-docs.app-shell-pill > .sidebar:not(.app-shell-aside, .sidebar-plain) { block-size:auto; max-block-size:calc(100vh - var(--shell-top) - var(--space-4)); } }
 /* O conteúdo começa a 18 da pílula, como a lateral (78 + 18 = 96); de 768 a 1279, sem o índice, ele vai até a borda do
    bloco, a 28 da lateral; no celular, o bloco fica a 16 das bordas. */
-@media (min-width:768px) and (max-width:1279px) { .app-shell-docs.app-shell-pill > .content.content { padding:calc(var(--space-4) + var(--space-05)) 0 0 var(--space-7); } }
-@media (max-width:767px) { .app-shell-docs.app-shell-pill > .content.content { padding:calc(var(--space-4) + var(--space-05)) var(--space-4) 0; } }
+@media (min-width:48em) and (max-width:79.9375em) { .app-shell-docs.app-shell-pill > .content.content { padding:calc(var(--space-4) + var(--space-05)) 0 0 var(--space-7); } }
+@media (max-width:47.9375em) { .app-shell-docs.app-shell-pill > .content.content { padding:calc(var(--space-4) + var(--space-05)) var(--space-4) 0; } }
 .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) {
+@media (min-width:64em) {
   .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
@@ -1608,7 +1608,7 @@ img,svg { display:block; }
    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) {
+@media (min-width:80em) {
   .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
@@ -1639,7 +1639,7 @@ img,svg { display:block; }
 .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
+   mexer no viewport: o @media não disparava e a nav passava 1.6875em 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 lg (1023 = lg-1, escala): a lateral do AppShell deixa o fluxo e
@@ -1649,7 +1649,7 @@ img,svg { display:block; }
 /* Abaixo de lg o topo QUEBRA em duas linhas em vez de esconder a navegação: perder o acesso
    a uma área inteira não é colapso responsivo, é bug. A nav vai pra segunda linha, centrada
    e na largura toda; badge e selo (secundários) seguem escondidos pelos utilitários. */
-@media (max-width:1023px) { .app-shell { grid-template-columns:minmax(0,1fr); } .app-shell > .sidebar[popover] { position:static; height:auto; } .content { margin-inline-start:var(--space-4); }
+@media (max-width:63.9375em) { .app-shell { grid-template-columns:minmax(0,1fr); } .app-shell > .sidebar[popover] { position:static; height:auto; } .content { margin-inline-start:var(--space-4); }
   .topbar { flex-wrap:wrap; row-gap:var(--space-2); }
   .topbar > nav { order:3; flex-basis:100%; justify-content:center; }
   /* e a nav quebra entre os PRÓPRIOS itens: mandar a barra pra segunda linha não bastava,
@@ -1678,7 +1678,7 @@ img,svg { display:block; }
    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:1023px) {
+@media (max-width:63.9375em) {
   .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
@@ -1700,7 +1700,7 @@ img,svg { display:block; }
      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) {
+@media (min-width:48em) and (max-width:63.9375em) {
   .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; }
@@ -1713,12 +1713,12 @@ img,svg { display:block; }
   .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) {
+@media (min-width:64em) and (max-width:79.9375em) {
   .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) {
+@media (max-width:79.9375em) {
   .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; }
@@ -1728,7 +1728,7 @@ img,svg { display:block; }
   .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) {
+@media (max-width:79.9375em) {
   .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. */
@@ -1738,10 +1738,10 @@ img,svg { display:block; }
     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) {
+@media (min-width:48em) and (max-width:79.9375em) {
   .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) {
+@media (max-width:47.9375em) {
   /* 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);
@@ -1752,11 +1752,11 @@ img,svg { display:block; }
 }
 /* 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) {
+@media (min-width:80em) {
   .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) {
+@media (max-width:47.9375em) {
   .app-shell-docs > .content.content { padding-block-start:var(--space-8); }
 }
 
@@ -1976,7 +1976,7 @@ img,svg { display:block; }
 .sidebar-toggle-slot > .btn.sidebar-toggle { --toggle-size:var(--control-h-xs); --btn-bg:var(--card); --btn-border:var(--border-strong); position:absolute; inline-size:var(--toggle-size); block-size:var(--toggle-size); min-inline-size:0; min-block-size:0;
   inset-block-start:calc(var(--toggle-edge) + var(--space-1) + var(--control-h-md) / 2 - var(--toggle-size) / 2); inset-inline-start:calc(var(--toggle-x) - var(--toggle-size) / 2); }
 @media (pointer:coarse) { .sidebar-toggle-slot > .btn.sidebar-toggle { --toggle-size:var(--target-min); } }
-@media (max-width:1023px) {
+@media (max-width:63.9375em) {
   .sidebar-toggle-slot { display:none; }
   .app-shell-collapsible > .sidebar, .app-shell-collapsible > .content { grid-column:auto; grid-row:auto; } }
 /* A LATERAL ATÉ O TOPO (MNT-34, `AppShell layout="sidebar"`, 23/10/2026) — o pedido do app de rede (*"sidebar de canto e
@@ -1989,7 +1989,7 @@ img,svg { display:block; }
 .app-shell-lateral.app-shell-collapsible > .sidebar { grid-row:1; }
 /* A lateral começa no topo da janela: a flutuante com a margem dela, a de canto encostada. Só na tela larga — abaixo de
    1024 ela é gaveta, com a altura e a margem da gaveta. */
-@media (min-width:1024px) {
+@media (min-width:64em) {
   .app-shell-lateral > .sidebar { top:var(--space-4); height:calc(100vh - var(--space-4) * 2); max-height:none; }
   .app-shell-lateral > .sidebar-flush { top:0; height:100vh; }
 }
@@ -1999,10 +1999,10 @@ img,svg { display:block; }
    título — na barra do conteúdo, o primeiro dela. A bolinha da junção (ADR-0056) fica só no arranjo de sempre. Abaixo de
    1024 ele some: a lateral é gaveta, e quem abre é o botão da gaveta. */
 .app-shell-lateral > .app-shell-column > .topbar { gap:var(--space-3); justify-content:flex-start; }
-@media (max-width:1023px) { .btn.sidebar-collapse-trigger { display:none; } }
+@media (max-width:63.9375em) { .btn.sidebar-collapse-trigger { display:none; } }
 /* Sem barra, abaixo de 1024, uma faixa com o botão da gaveta e a marca (a altura da barra pequena, 56). */
 .app-shell-narrow-bar { display:none; }
-@media (max-width:1023px) {
+@media (max-width:63.9375em) {
   .app-shell-lateral > .app-shell-column { grid-column:1; }
   .app-shell-narrow-bar { display:flex; align-items:center; gap:var(--space-3); min-height:calc(var(--space-12) + var(--space-2)); padding-inline:var(--space-4); }
 }
@@ -2329,8 +2329,8 @@ img,svg { display:block; }
    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; } }
+@media (max-width:63.9375em) { .hide-below-lg { display:none !important; } }
+@media (max-width:47.9375em)  { .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 transparent; 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
@@ -2382,7 +2382,7 @@ img,svg { display:block; }
    deixa a regra com a força de UMA classe: a peça que tem medida própria de ícone (o X do
    `CloseButton`, o link do `MediaEmbed`) continua mandando. */
 .btn :where(.icon:not(.icon-sm,.icon-lg,.icon-xl)) { --step-icon:var(--icon-md); }
-@media (min-width:640px) { .btn :where(.icon:not(.icon-sm,.icon-lg,.icon-xl)) { --step-icon:var(--icon-sm); } }
+@media (min-width:40em) { .btn :where(.icon:not(.icon-sm,.icon-lg,.icon-xl)) { --step-icon:var(--icon-sm); } }
 .btn-sm :where(.icon:not(.icon-lg,.icon-xl)),.btn-xs :where(.icon:not(.icon-lg,.icon-xl)) { --step-icon:var(--icon-sm); }
 .btn:hover:not(:disabled):not([aria-disabled="true"]) { transform:none; } .btn:active:not(:disabled) { transform:scale(.97); opacity:.9; }
 /* Duas formas de "não dá para fazer isto", e a diferença é QUEM alcança a explicação.
@@ -2735,7 +2735,7 @@ img,svg { display:block; }
 /* ESCALA DA REFERÊNCIA (ADR-0050, 24/09/2026): no computador o texto digitado é 14, como toda peça;
    no telefone ele sobe para 16. É a regra dela (a troca é em 640px), e a razão
    é do Safari do iPhone: campo com letra menor que 16 faz a página AMPLIAR sozinha ao ganhar foco. */
-@media (max-width:639.98px) { .input,.textarea,.number-field-input,.select-value { font-size:var(--text-base); } }
+@media (max-width:39.99875em) { .input,.textarea,.number-field-input,.select-value { font-size:var(--text-base); } }
 [data-theme="light"] .input:where(:not([data-theme="dark"] *),[data-theme="dark"] [data-theme="light"] *),[data-theme="light"] .textarea:where(:not([data-theme="dark"] *),[data-theme="dark"] [data-theme="light"] *),[data-theme="light"] .select:where(:not([data-theme="dark"] *),[data-theme="dark"] [data-theme="light"] *) { color-scheme:light; }
 /* NumberField (Lote 1): menos · campo · mais numa peça só, que é onde as referências convergem.
    O campo é `.input` — a mesma altura, o mesmo raio, o mesmo foco de qualquer campo do sistema.
@@ -3161,8 +3161,8 @@ img,svg { display:block; }
 .slider-color .slider-thumb { box-sizing:border-box; inline-size:var(--space-4); block-size:var(--space-4); align-self:center; border:0; background:var(--color-checker) center/var(--space-2) var(--space-2); box-shadow:inset 0 0 0 var(--space-4) var(--slider-thumb-color,var(--primary)), var(--shadow-md); forced-color-adjust:none; }
 .slider-color .slider-thumb::after { content:none; }
 .slider-color[data-orientation="vertical"] .slider-thumb { inline-size:var(--space-4); block-size:var(--space-4); }
-/* COLORAREA (0.32.0, ADR-0069) — a área de cor. A pintura (o gradiente, a ÚNICA exceção à ADR-0007) chega pela
-   variável que o componente põe (`--color-area-fill`): esta folha não escreve gradiente nenhum (check 4).
+/* COLORAREA (0.32.0, ADR-0069) — a área de cor. A pintura (o gradiente) chega pela
+   variável que o componente põe (`--color-area-fill`).
    Medidas da referência, lidas no CSS publicado dela (3.2.6): quadrada, até 224 de largura, canto 16; o pino de
    16 que cresce para 20 ao arrastar, com o anel de 3. 224 não tem token: sai de dois `--space-24` e um `--space-8`.
    O anel é BRANCO nos dois temas, e não um token de tema: ele fica sobre a cor escolhida, e não sobre a página.
@@ -3554,7 +3554,7 @@ img,svg { display:block; }
    para baixo do texto, na mesma coluna — a referência repete o botão no celular; aqui ele só muda de lugar. */
 .alert-has-action { grid-template-columns:auto minmax(0,1fr) auto auto; }
 .alert-action { display:flex; align-items:center; align-self:center; gap:var(--space-2); }
-@media (max-width:639px) { .alert-has-action { grid-template-columns:auto minmax(0,1fr) auto; } .alert-has-action > .alert-action { grid-column:2; grid-row:2; justify-self:start; align-self:start; } }
+@media (max-width:39.9375em) { .alert-has-action { grid-template-columns:auto minmax(0,1fr) auto; } .alert-has-action > .alert-action { grid-column:2; grid-row:2; justify-self:start; align-self:start; } }
 /* 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 transparent; border-radius:var(--radius-card); background:var(--secondary); }
@@ -3596,7 +3596,7 @@ img,svg { display:block; }
 .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; } }
+@media (max-width:40em) { .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
@@ -3662,6 +3662,17 @@ img,svg { display:block; }
 .tabs-secondary .tab { border-radius:0; }
 .tabs-secondary .tab.active,.tabs-secondary .tab[data-active] { background:transparent; box-shadow:none; color:var(--foreground); }
 .tabs-secondary .tab[data-active]::after { display:block; }
+/* O ESCOLHIDO DESLIZA (S-04, 05/11/2026): no `SegmentedControl` e no `Tabs` ele PULAVA, porque o fundo do escolhido é
+   pintado no próprio item. A referência tem uma peça separada atrás dos itens, que anda. Aqui o desenho do escolhido NÃO
+   muda (as sete cores do segmento, as treze marcas e os dois temas continuam nas regras de sempre): quando a escolha
+   troca, o gancho `useDeslize` copia a pintura do NOVO escolhido para uma peça de passagem (`.selection-indicator`, atrás
+   dos itens), esconde a do item e a leva da posição de antes até a nova — a cápsula, a sombra, o aro e o fio de baixo,
+   que na aba secundária é o próprio indicador. No fim, a peça sai e o item volta a se pintar. Quem pede "reduzir
+   movimento" vê a troca de uma vez, como antes. A letra troca de cor no mesmo passo, em vez de saltar. */
+.segmented :is(button,a),.tab { transition:color var(--duration-base) var(--ease-standard); }
+.selection-indicator { position:absolute; z-index:-1; pointer-events:none; }
+.selection-indicator > span { position:absolute; }
+:is(.segmented :is(button,a),.tab)[data-sliding]::after { visibility:hidden; }
 /* `panel="plain"` (MNT-05 e C9, 06/10/2026): o painel sem caixa, como o painel de abas da
    referência. Sem recheio dos lados — o conteúdo começa na linha do que está fora do `Tabs` —, e o
    espaço de cima é o mesmo `space-3` do painel do nativo. Na vertical, quem separa é o `gap` da
@@ -3801,6 +3812,13 @@ img,svg { display:block; }
 .table tbody tr:last-child > :last-child,.table-wrap tbody tr:last-child > :last-child { border-end-end-radius:var(--table-cell-r); }
 .table tr:last-child td,.table-wrap tr:last-child td { border-bottom:0; }
 @media (hover:hover) { .table tbody tr:hover > :is(td,th),.table-wrap tbody tr:hover > :is(td,th) { background:color-mix(in oklab,var(--card) 40%,var(--surface-2)); } }
+/* A LINHA ENTRE AS FILEIRAS (MNT-38, `dividers` na `Table` e na `DataGrid` — a forma "A", aprovada pela bancada em 05/11/2026,
+   *"Pode, sem a Ember"*): a moldura de sempre e uma linha clara entre as fileiras do corpo, menos depois da última, como a
+   referência (a linha de baixo da célula, a 50% do separador). A borda de baixo da célula já existe, transparente (ADR-0072);
+   a variação só lhe dá cor — o texto a 10%, a mesma linha clara do cartão de contorno —, e nenhuma medida muda. É uma exceção
+   NOMEADA ao sem linha: só com a escolha do app, e só esta regra (`tests/unit/sem-linha.test.tsx`). A Ember fica sem ela. Sem
+   efeito no arranjo `rows`, onde cada fileira já é uma cápsula solta. */
+:is(.table.table-dividers:not(.table-rows),.datagrid-dividers .table-wrap table) tbody tr:not(:last-child) > :is(td,th):where(:not([data-brand="ember"] *)) { border-bottom-color:color-mix(in oklab,var(--foreground) 10%,transparent); }
 /* AS LINHAS EM CÁPSULA (`Table variant="rows"`, o site B — a lista de membros da página inicial, aprovada pela bancada em
    01/11/2026, o D-7.6): sem a caixa em volta; cada linha é uma cápsula de 54 (`--target-min` + 10), 4 entre elas; com o
    mouse o `--fill-1`; a linha com `data-selected` (a que o app marcou), o amarelo a 14% (18% com o mouse). O cabeçalho em
@@ -3848,6 +3866,9 @@ img,svg { display:block; }
 .table td[data-best],.table-wrap td[data-best] { font-weight:var(--weight-semibold); }
 /* `fit`: sem o mínimo de 720 — a comparação de dois itens cabe num celular de 360. */
 .table.table-fit { min-width:0; }
+/* E na `DataGrid` (S-02, *"Pode, com fit"*, 05/11/2026): o mesmo `fit` — as tabelas do site, numa coluna de texto de ~680,
+   passavam do mínimo de 720 e saíam cortadas, rolando de lado. */
+.datagrid-fit .table-wrap table { min-width:0; }
 /* `differencesOnly`: o "Só diferenças" esconde as linhas que o site marcou como iguais. */
 .table-differences-only tr[data-same] { display:none; }
 /* `stickyHeader`: o mesmo mecanismo do `DataGrid` (F6, mais abaixo). A caixa é o contêiner de
@@ -4085,7 +4106,7 @@ button.tag-main { cursor:pointer; }
    valia nada — mídia não soma especificidade, então a base vencia por vir por último. Foi
    exatamente o que aconteceu na primeira tentativa, e é a armadilha que o comentário do
    `.banner` lá em cima já registrava. */
-@media (max-width:640px) { .data-list { grid-template-columns:minmax(0,1fr); } }
+@media (max-width:40em) { .data-list { grid-template-columns:minmax(0,1fr); } }
 /* Timeline: o trilho existia e o PONTO não — `.timeline-dot` media 0×0 (achado A13), então a
    linha do tempo saía com a régua e sem as marcas, e o <ol> ainda mostrava a numeração do
    navegador. Agora os dois derivam do MESMO token: o trilho fica a meio diâmetro do ponto, e
@@ -4255,8 +4276,7 @@ button.tag-main { cursor:pointer; }
 /* A CAIXA EMPILHADA (`CodeBlock previewLayout="stacked"`, o site B, 02/11/2026 — o Victor: "preciso que seja fiel a
    referencia", e "Com degradê"; ADR-0089): a peça em cima e o código embaixo, sem a chave Prévia | Código, nas medidas da
    referência — a peça em 350 (3 x 96 + 48 + 12 + 2) com recheio de 40, no fundo da página; o código no cartão, 16 em cima,
-   12 dos lados e 14 embaixo. Mais de 5 linhas: recolhido em 150 (96 + 48 + 4 + 2), sumindo num DEGRADÊ (a 3ª exceção à
-   regra sem gradiente, só nesta regra — o check 4 cobra), com o "Expand code" (32, letra 12) a 8 do fundo; aberto, o código
+   12 dos lados e 14 embaixo. Mais de 5 linhas: recolhido em 150 (96 + 48 + 4 + 2), sumindo num DEGRADÊ, com o "Expand code" (32, letra 12) a 8 do fundo; aberto, o código
    inteiro e o "Collapse code" embaixo dele. Sem linha: a peça e o código se separam pelo fundo. */
 .demo.demo-stacked { display:flex; flex-direction:column; min-block-size:0; padding:0; overflow:hidden; }
 .demo.demo-stacked > .demo-panel { flex:none; }
@@ -4279,6 +4299,14 @@ button.tag-main { cursor:pointer; }
    botão (a distância da borda, o botão e um vão), e a linha mais longa ROLA antes de chegar nele. Vale para todo bloco
    com copiar: o sozinho, o do texto do site (`.prose pre`) e o do exemplo (`.demo-code`) — por isso vem depois deles. */
 .code-block-wrap > .code-block { padding-inline-end:calc(var(--space-3) + var(--control-h-md) + var(--space-2)); }
+/* O CÓDIGO É SEMPRE DA ESQUERDA PARA A DIREITA (06/11/2026, a auditoria externa A-014 — o desenho do FigCraft aprovado
+   pelo Victor). Numa página `dir="rtl"` o navegador espelhava o código: a pontuação pulava para o outro lado
+   (`;"import …`) e o número de linha ia para a direita. O código fica da esquerda para a direita, como em todo editor; a
+   moldura em volta continua espelhada — o botão de copiar fica no fim da linha DELA (à esquerda), e o código reserva o
+   lugar dele também desse lado. `[dir="rtl"]`, e não `:dir()`: o empacotador do app reescreve o `:dir()` (§11 do
+   CLAUDE.md). Quem cobra: `tests/visual/rtl-codigo.spec.ts`. */
+.code-block { direction:ltr; unicode-bidi:isolate; text-align:left; }
+[dir="rtl"] .code-block-wrap > .code-block { padding-inline-start:calc(var(--space-3) + var(--control-h-md) + var(--space-2)); }
 .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); }
 /* A CABEÇA DO ARQUIVO (`CodeBlock filename`, o site B — aprovada pela bancada em 01/11/2026, o item 6, "Ícone + nome"): o
@@ -4696,6 +4724,14 @@ button.tag-main { cursor:pointer; }
 .sortable-item[data-grabbed] { border-color:transparent; box-shadow:var(--shadow-lg); }
 .sortable-handle { display:grid; place-items:center; min-width:var(--space-6); min-height:var(--space-6); padding:0; border:0; border-radius:var(--radius-sm); background:transparent; color:var(--muted-foreground); cursor:grab; touch-action:none; }
 .sortable-handle[aria-pressed="true"] { cursor:grabbing; color:var(--primary); }
+/* O ARRASTO QUE ANDA (S-05, 05/11/2026): era "meio estático" — a linha pulava de casa em casa e os vizinhos pulavam junto.
+   Agora a linha pega SEGUE o ponteiro (o `useReorder` a desloca com `translate`, sem transição: é a mão que move) e os
+   vizinhos deslizam para abrir o lugar (o mesmo gancho, pela animação do navegador). A linha pega fica POR CIMA das outras
+   (`z-index`) — e o fundo dela é o do cartão, opaco, então o texto de baixo não aparece através. A sombra de erguer entra
+   e sai em vez de aparecer de uma vez. Quem pede "reduzir movimento": a linha continua seguindo o ponteiro (é
+   manipulação direta, não animação), e os vizinhos trocam de lugar sem deslizar. */
+:is(.sortable-item,.block-item) { transition:box-shadow var(--duration-base) var(--ease-standard); }
+:is(.sortable-item,.block-item)[data-dragging] { position:relative; z-index:1; cursor:grabbing; }
 .sortable-label { min-width:0; }
 
 /* EDITOR POR BLOCOS (PLANO-1.0, item N1). A Aurea é dona da MOLDURA; o texto rico de dentro é do
@@ -4775,12 +4811,12 @@ button.tag-main { cursor:pointer; }
 .dialog { --dialog-margin:var(--space-4); --dialog-w:28rem; position:fixed; inset-inline:0; top:50%; translate:0 -50%; z-index:var(--z-modal); display:flex; flex-direction:column; inline-size:min(var(--dialog-w),calc(100vw - 2 * var(--dialog-margin))); max-block-size:calc(100dvh - 2 * var(--dialog-margin)); margin-inline:auto; padding:var(--space-6); border:var(--border-width) solid transparent; border-radius:var(--radius-card); background:var(--popover); color:var(--popover-foreground); box-shadow:var(--shadow-lg); outline:none; transition:opacity var(--duration-slow) var(--ease-standard),scale var(--duration-slow) var(--ease-standard); }
 .dialog[data-starting-style] { opacity:0; scale:1.05; }
 .dialog[data-ending-style] { opacity:0; scale:.95; transition-duration:var(--duration-fast); }
-@media (min-width:640px) { .dialog { --dialog-margin:var(--space-10); } }
+@media (min-width:40em) { .dialog { --dialog-margin:var(--space-10); } }
 /* `placement` (o dela): `auto` senta a janela EMBAIXO no celular, onde o polegar alcança, e no meio de
    640 para cima. Sem o atributo (a marcação pura), a janela fica no meio, como sempre ficou. */
 .dialog[data-placement="top"] { top:var(--dialog-margin); translate:none; }
 .dialog[data-placement="bottom"] { top:auto; bottom:var(--dialog-margin); translate:none; }
-@media (max-width:639.98px) { .dialog[data-placement="auto"] { top:auto; bottom:var(--dialog-margin); translate:none; } }
+@media (max-width:39.99875em) { .dialog[data-placement="auto"] { top:auto; bottom:var(--dialog-margin); translate:none; } }
 /* size (B-03), decisão do Victor em 24/09/2026: as quatro larguras da referência — as do
    pacote de estilos dela, 20/24/28/32rem = 320/384/448/512 — mais 1024
    (o token --breakpoint-lg) e a tela cheia. O padrão passou a ser o `md` da referência, 448; até a 0.8.14
@@ -4828,7 +4864,7 @@ button.tag-main { cursor:pointer; }
 .drawer[data-swiping] { transition-duration:0ms; }
 .drawer[data-ending-style] { transition-duration:calc(var(--drawer-swipe-strength,1) * var(--duration-slow)); }
 .drawer-left,.drawer-right { top:0; bottom:0; inline-size:min(20rem,85vw); transform:translateX(var(--drawer-swipe-movement-x,0px)); }
-@media (min-width:640px) { .drawer-left,.drawer-right { inline-size:min(24rem,85vw); } }
+@media (min-width:40em) { .drawer-left,.drawer-right { inline-size:min(24rem,85vw); } }
 .drawer-right { right:0; border-left-width:var(--border-width); border-radius:var(--radius-card) 0 0 var(--radius-card); }
 .drawer-left { left:0; border-right-width:var(--border-width); border-radius:0 var(--radius-card) var(--radius-card) 0; }
 .drawer-top,.drawer-bottom { left:0; right:0; max-block-size:85dvh; transform:translateY(var(--drawer-swipe-movement-y,0px)); }
@@ -4872,7 +4908,7 @@ button.tag-main { cursor:pointer; }
 .toast-description { margin:0; color:var(--muted-foreground); font-size:var(--text-sm); line-height:var(--space-5); }
 .toast-action { flex:none; align-self:center; }
 /* No celular a ação desce para baixo do texto, alinhada com ele — como a dela. */
-@media (max-width:639.98px) { .toast-content { flex-wrap:wrap; } .toast-text { flex-basis:calc(100% - var(--space-6) - var(--space-1) - var(--space-05)); } .toast-action { margin-inline-start:calc(var(--space-6) + var(--space-1) + var(--space-05)); } }
+@media (max-width:39.99875em) { .toast-content { flex-wrap:wrap; } .toast-text { flex-basis:calc(100% - var(--space-6) - var(--space-1) - var(--space-05)); } .toast-action { margin-inline-start:calc(var(--space-6) + var(--space-1) + var(--space-05)); } }
 /* As faces do tipo (desde 16/08/2026 elas pintam; o check 18 não enxerga classe por template). Em
    0.32.0 o tipo deixou de tingir o fundo e a borda: pinta o ícone e o título, no par `-400` da
    ADR-0061, como o aviso da referência. */
@@ -4916,6 +4952,14 @@ button.tag-main { cursor:pointer; }
    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 transparent; border-radius:var(--radius-card); background:var(--popover); color:var(--popover-foreground); box-shadow:var(--shadow-lg); }
+/* A PALETA ENTRA E SAI (S-04, 05/11/2026), como o `Dialog`: o fundo esmaece e a caixa cresce um pouco, pelos estados
+   de abrir e fechar que o motor marca na moldura (`Viewport`) e na caixa (`Popup`). Fechar é mais rápido que abrir. */
+.command-overlay { transition:opacity var(--duration-slow) var(--ease-standard); }
+.command-overlay[data-starting-style],.command-overlay[data-ending-style] { opacity:0; }
+.command-overlay[data-ending-style] { transition-duration:var(--duration-fast); }
+.command-palette { transition:scale var(--duration-slow) var(--ease-emphasized); }
+.command-palette[data-starting-style],.command-palette[data-ending-style] { scale:.95; }
+.command-palette[data-ending-style] { transition-duration:var(--duration-fast); }
 /* Camadas flutuantes (Base UI): tooltip, popover, menu. z-modal para funcionarem sobre diálogos; empilhamento mútuo pela ordem do portal no DOM. */
 /* 0.32.0, a dica da referência: recheio de 8, letra de 12/16, até 320 de largura, o fundo das janelas
    (era o fundo afundado), e a palavra longa quebra onde precisar. O canto continua o 10 da Aurea (o
@@ -4949,6 +4993,15 @@ button.tag-main { cursor:pointer; }
    e `--space-1` de respiro. Vale para toda lista que usa `.menu`: Combobox, MultiCombobox,
    DropdownMenu, ContextMenu, Menubar e a lista da CommandPalette. */
 .menu { --menu-px:10px; z-index:var(--z-modal); min-width:200px; max-width:min(320px,calc(100vw - 32px)); padding:var(--space-1); border:1px solid transparent; border-radius:var(--radius-card); background:var(--popover); color:var(--popover-foreground); box-shadow:var(--shadow-lg); }
+/* O MENU ENTRA E SAI (S-04, 05/11/2026): aparecia de uma vez. Como o `Popover` e a dica daqui, e como a lista da
+   referência: esmaece e cresce um pouco a partir do lado do gatilho (`--transform-origin`, que o motor publica), pelos
+   estados de abrir e fechar que o motor marca (`data-starting-style`/`data-ending-style`). Vale para toda lista `.menu`
+   que o motor abre: `DropdownMenu`, `ContextMenu`, `Menubar`, o submenu, o `Select`, o `Combobox`. A lista de DENTRO da
+   `CommandPalette` (`.command-list`) não abre sozinha — quem entra é a janela, abaixo. Quem pede "reduzir movimento" não
+   vê movimento: a regra global do fim da folha zera a duração. */
+.menu { transform-origin:var(--transform-origin,center); transition:opacity var(--duration-base) var(--ease-standard),scale var(--duration-base) var(--ease-standard); }
+.menu[data-starting-style],.menu[data-ending-style] { opacity:0; scale:.95; }
+.menu[data-ending-style] { transition-duration:var(--duration-fast); }
 .menu-item { display:flex; align-items:center; gap:10px; width:100%; min-height:var(--control-h-md); padding:0 var(--menu-px,10px); border:0; border-radius:calc(var(--radius-card) - var(--space-1)); background:transparent; color:var(--foreground); font:inherit; text-align:start; text-decoration:none; cursor:pointer; }
 /* O ITEM COM EXPLICAÇÃO e o ÍCONE NA PONTA (0.55.0, o Victor, 04/11/2026: "pegue o código" da referência): a anatomia do
    item dela — o nome e, embaixo, a explicação na letra pequena e na cor de apoio; o recheio de 6 em cima e embaixo; o ícone
@@ -5032,7 +5085,7 @@ button.tag-main { cursor:pointer; }
   border-radius:var(--radius-card); background:var(--fill-1); }
 .command-foot { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:var(--space-4); }
 .command-foot > .command-shortcuts { padding:0; }
-@media (max-width:1280px) { .command-body { grid-template-columns:minmax(0,1fr); } .command-preview { display:none; } }
+@media (max-width:80em) { .command-body { grid-template-columns:minmax(0,1fr); } .command-preview { display:none; } }
 
 .menu-sep { height:1px; margin:6px 4px; background:var(--border); border:0; }
 /* G-API-02 — a anatomia que o menu ganhou quando o dado deixou de ter uma forma só.
@@ -5339,6 +5392,10 @@ th[aria-sort] .datagrid-sort-icon { color:var(--primary); }
    provadas. */
 .datagrid-sticky thead th { position:sticky; inset-block-start:0; z-index:1; }
 .datagrid-sticky .datagrid-filters th { inset-block-start:var(--table-head-h); }
+/* S-10 (o MNT-40), `stickyHeader="page"`: o cabeçalho preso ao topo da PÁGINA, sem caixa de rolagem própria — a caixa
+   continua sem teto (uma rolagem só, a da página) e o `DataGrid` move as células do cabeçalho com `translate` enquanto a
+   página rola. Aqui só a camada: as fileiras passam POR BAIXO do cabeçalho, que já tem o fundo da moldura. */
+.datagrid-sticky-page thead th { z-index:1; }
 
 /* F7: a alça de redimensionar. Fina, colada no fim da célula e da altura toda —
    alvo estreito de propósito, porque largo demais rouba o clique do cabeçalho
@@ -5365,7 +5422,7 @@ th[aria-sort] .datagrid-sort-icon { color:var(--primary); }
    honesta: grade estreita dentro de janela larga divide mesmo assim — o escape é
    `--datagrid-detail-w`. */
 .datagrid-split { display:grid; gap:var(--space-3); align-items:start; }
-@media (min-width:768px) {
+@media (min-width:48em) {
   .datagrid-split { grid-template-columns:1fr var(--datagrid-detail-w,20rem); }
 }
 .datagrid-detail { border:1px solid transparent; border-radius:var(--radius-card); background:var(--card); padding:var(--space-4); }
@@ -5757,11 +5814,11 @@ button.graph-node-body { cursor:pointer; }
    Agora vale SÓ para o shell que não tem gaveta — o `apps/docs/index.html`, que traz a
    própria `.doc-sidebar` e o próprio JS de abrir. O shell do sistema segue em grid de uma
    coluna com a gaveta acima. Sai junto com aquela página (achado M13). */
-@media (max-width:640px) { :root { --card-pad:16px; --section-gap:16px; } .doc-actions .select { flex:1; width:auto!important; min-width:0; } .doc-actions>.btn-primary { width:var(--control-h-md); padding:0; font-size:0; } .doc-actions>.btn-primary .mono { display:none; } .tabs,.pagination,.segmented { max-width:100%; overflow-x:auto; } .step:nth-child(3):before { display:none; } .alert { grid-template-columns:auto minmax(0,1fr); } .alert>:last-child { grid-column:2; justify-self:start; } .log-line { grid-template-columns:70px 58px minmax(0,1fr); gap:6px; } .queue-item>.badge { grid-column:2; justify-self:start; } .event-row>.badge { grid-column:3; justify-self:start; } .message { grid-template-columns:1fr; } .media-player { min-height:330px; aspect-ratio:auto; } .media-overlay-title { top:12px; left:12px; right:12px; } .media-controls { padding:10px; } .media-control-row { align-items:flex-start; flex-direction:column; gap:8px; } .media-control-row>.media-control-group { width:100%; justify-content:space-between; } .media-optional,.media-volume { display:none; } .media-time { padding:0 4px; font-size:11px; } .toast-stack { inset-inline:12px; bottom:12px; } .toast { width:100%; min-width:0; grid-template-columns:minmax(0,1fr) auto; } .drawer { width:100%; padding:20px; } .dialog { padding:20px; } }
+@media (max-width:40em) { :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}}
+.operational-grid .demo{min-height:0}@media(max-width:40em){.operational-grid .demo{grid-column:span 12}}
 .universal-grid .demo { min-height:0; }
 .pattern-toolbar .input-group { flex:1 1 180px; }
 .media-library-row.active { border-color:transparent; background:color-mix(in oklab,var(--primary) 10%,transparent); }
@@ -5797,6 +5854,15 @@ button.graph-node-body { cursor:pointer; }
      cor do texto), e o glifo pinta na cor do texto. */
   .accordion-plus .accordion-chevron, .accordion-plus .accordion-item[open] > summary .accordion-chevron { background:transparent; }
   .accordion-plus .accordion-chevron::before { forced-color-adjust:none; background:CanvasText; }
+  /* O ESCOLHIDO SE VÊ (06/11/2026, a auditoria externa A-015 — a forma "B" do desenho no FigCraft, aprovada pelo Victor:
+     *"o alto contraste aprovo a B"*). O segmento e a aba escolhidos se distinguiam só pelo FUNDO, que a troca apaga: ficavam
+     iguais aos outros. Agora o fundo é o destaque do sistema (Highlight) e a letra a cor sobre ele (HighlightText) — as
+     duas são cores do sistema, que a troca respeita. A referência não trata esse modo. E o ponto do selo (`.badge-dot`),
+     que é fundo, sai da troca na cor do texto. A Ember recebe também (o Victor, 06/11/2026: *"Ember entra"* — no alto
+     contraste o sistema troca as cores de toda marca, e a dela sumia igual).
+     Quem cobra: `tests/visual/alto-contraste-escolhido.spec.ts`. */
+  /* (o segmento e a aba: a regra está depois das do tema escolhido, mais abaixo — ver "O ESCOLHIDO NO ALTO CONTRASTE") */
+  .badge-dot { forced-color-adjust:none; background:CanvasText; }
 }
 
 
@@ -5808,10 +5874,10 @@ button.graph-node-body { cursor:pointer; }
 .table-region{outline:none}
 .table-region:focus-visible{outline:var(--focus-width) solid var(--focus-strong);outline-offset:calc(-1 * var(--focus-width));box-shadow:none}
 /* CONTAINER QUERY, e não breakpoint de viewport — Parte D, item D3 (08/08/2026).
-   Era `@media (max-width:400px)`, o último dos seis legados do achado M13. Trocar por um degrau
-   da escala (639px) teria resolvido o gate e mantido o defeito: a largura que aperta os
-   controles é a do PLAYER, não a da janela. Um player numa lateral de 400px dentro de uma tela
-   de 1920px tem exatamente o mesmo aperto, e o breakpoint de viewport nunca o via.
+   Era `@media (max-width:25em)`, o último dos seis legados do achado M13. Trocar por um degrau
+   da escala (39.9375em) teria resolvido o gate e mantido o defeito: a largura que aperta os
+   controles é a do PLAYER, não a da janela. Um player numa lateral de 25em dentro de uma tela
+   de 120em tem exatamente o mesmo aperto, e o breakpoint de viewport nunca o via.
    `.media-player` já era `position:relative` + `overflow:hidden`, então a contenção não muda o
    posicionamento do que está dentro — medido antes de escrever. */
 .media-player { container-type:inline-size; }
@@ -5905,7 +5971,7 @@ button.graph-node-body { cursor:pointer; }
    emitida e o valor computado são os mesmos (a geometria e as baselines de pixel cobram isso).
 
    O NOME DIZ O MENSURÁVEL: `vp-md:` é viewport, `ct-md:` é container. Uma escala só, um nome um
-   número — `md` é sempre 768px, e o prefixo diz 768px DE QUÊ. Era a condição do Victor para os
+   número — `md` é sempre 48em, e o prefixo diz 48em DE QUÊ. Era a condição do Victor para os
    nomes não ficarem ambíguos.
 
    `@media`/`@container` não leem `var()`, então os valores aqui são literais da escala — o
@@ -6097,8 +6163,7 @@ button.graph-node-body { cursor:pointer; }
    variações saíam todas iguais: "Sim, como as outras"). O padrão dela, sem estilo escolhido, continua congelado — as
    regras do passo A continuam sem alcançá-la. Por isso o botão ligado dela, com um estilo escolhido, ganha aqui a
    pintura que o passo A dá às outras marcas (logo abaixo do 2.8).
-   As duas exceções desta seção, registradas na ADR-0084: o DEGRADÊ do `brand-gradient` (a segunda exceção à ADR-0007,
-   depois da escolha de cor da ADR-0069) e os AROS dos estilos de aro (o desenho que dá nome ao estilo — exceção nomeada à
+   A exceção desta seção, registrada na ADR-0084: os AROS dos estilos de aro (o desenho que dá nome ao estilo — exceção nomeada à
    ADR-0072, só quando o app escolhe o estilo). */
 
 /* 2.8 · O BOTÃO LIGADO (Toggle, ToggleGroup, ToolbarButton): o C, amarelo, é o padrão desde a 0.45.0 (a regra do passo A
@@ -6255,6 +6320,30 @@ button.graph-node-body { cursor:pointer; }
    (o `AppShell`) refaz a conta para o que tem dentro. Na raiz (`<html>`) não: lá o `font-size` mudaria o `rem`. */
 [data-text="lg"]:not(:root) { font-size:var(--text-sm); }
 
+/* O ESCOLHIDO NO ALTO CONTRASTE (06/11/2026, a auditoria externa A-015, a forma "B" — ver a nota no bloco
+   `forced-colors` lá em cima). Mora AQUI, na seção dos modos — depois das regras do escolhido de cada tema (na paleta, lá em cima) e fora da paleta,
+   que deixa a Ember de fora —, e com a forma
+   `[data-theme] …`, que pesa o mesmo que elas: antes, a do claro (mais forte) ganhava e a letra ficava preta sobre o
+   ciano. A Ember recebe também (o Victor, 06/11/2026: *"Ember entra"*). */
+@media (forced-colors:active) {
+  :is(.segmented :is(button,a).active,.tab[data-active]),
+  [data-theme] :is(.segmented :is(button,a).active,.tab[data-active])
+    { background:Highlight; color:HighlightText; }
+  /* E as outras sete que a pergunta "quem mais?" achou (06/11/2026, o Victor: "vamos fazer logo todas agora"), a mesma
+     forma B: o botão ligado (`Toggle`, `ToggleGroup`, o filtro fixo — o `toggle-area` entra na lista para o `:is()` pesar
+     o que ele pesa), a etiqueta escolhida do `TagGroup`, o item escolhido da `ListBox` (lá o visto já aparecia; fica a
+     mesma forma), o dia escolhido do `Calendar` e do `DatePicker`, e a linha escolhida da `Table`/`DataGrid`. */
+  :is(.btn[aria-pressed="true"],.btn.toggle[data-pressed],.btn.toggle.toggle-area[aria-pressed="true"],.tag[data-selected],
+    .list-box-item[aria-selected="true"],.calendar td[data-selected] button,tr[data-selected] > :is(td,th)),
+  [data-theme] :is(.btn[aria-pressed="true"],.btn.toggle[data-pressed],.btn.toggle.toggle-area[aria-pressed="true"],
+    .tag[data-selected],.list-box-item[aria-selected="true"],.calendar td[data-selected] button,tr[data-selected] > :is(td,th))
+    { background:Highlight; color:HighlightText; }
+  /* O ponto do `Carousel` é FUNDO (o `::before`), e a troca apagava TODOS — não só o atual. Saem da troca: os outros na cor
+     do texto, o atual no destaque. */
+  .carousel-dot::before { forced-color-adjust:none; background:CanvasText; }
+  .carousel-dot[aria-current="true"]::before { background:Highlight; }
+}
+
 /* >>> camada responsiva — GERADA por scripts/build-responsive-layer.mjs <<< */
 /* As variáveis de passo NÃO HERDAM. Ver o comentário de VARIAVEIS no gerador: um ícone dentro
    de um botão responsivo herdaria o passo do botão e mudaria de tamanho sozinho. */
@@ -6283,13 +6372,13 @@ button.graph-node-body { cursor:pointer; }
 .container-scope { container:aurea / inline-size; }
 
 /* por VIEWPORT — a decisão depende do tamanho da APLICAÇÃO */
-@media (min-width:360px) { .vp-2xs\:size-xs{--step-h:var(--control-h-xs);--step-fs:var(--text-xs);--step-gap:6px;--step-px:10px;--step-field-px:var(--space-3);--step-select-pe:var(--space-8)} .vp-2xs\:size-sm{--step-h:var(--control-h-sm);--step-fs:var(--text-sm);--step-gap:8px;--step-px:var(--space-3);--step-field-px:var(--space-3);--step-select-pe:var(--space-8);--step-icon:var(--icon-sm);--step-qr:7.5rem;--step-avatar-fs:var(--text-xs);--step-avatar:var(--space-8)} .vp-2xs\:size-md{--step-h:var(--control-h-md);--step-fs:var(--text-sm);--step-gap:8px;--step-px:var(--space-4);--step-field-px:var(--space-3);--step-select-pe:38px;--step-icon:var(--icon-md);--step-qr:10rem;--step-avatar-fs:var(--text-sm);--step-avatar:var(--space-10)} .vp-2xs\:size-lg{--step-h:var(--control-h-lg);--step-fs:var(--text-base);--step-gap:8px;--step-px:var(--space-4);--step-field-px:var(--space-4);--step-select-pe:calc(var(--space-10) + var(--space-1));--step-icon:var(--icon-lg);--step-qr:15rem;--step-avatar-fs:var(--text-base);--step-avatar:var(--space-12)} .vp-2xs\:size-xl{--step-h:var(--control-h-xl);--step-fs:var(--text-base);--step-gap:10px;--step-px:26px;--step-field-px:var(--space-4);--step-select-pe:calc(var(--space-10) + var(--space-1));--step-icon:var(--icon-xl)} .vp-2xs\:btn-group-vertical { flex-direction:column; align-items:stretch; --btn-group-h:0; --btn-group-v:var(--radius-full); --btn-group-sep-i:25%; --btn-group-sep-b:0; --btn-group-sep-w:50%; --btn-group-sep-h:var(--border-width); --btn-group-bi:var(--border-width); --btn-group-bb:0; } .vp-2xs\:btn-group-horizontal { flex-direction:row; align-items:center; --btn-group-h:var(--radius-full); --btn-group-v:0; --btn-group-sep-i:0; --btn-group-sep-b:25%; --btn-group-sep-w:var(--border-width); --btn-group-sep-h:50%; --btn-group-bi:0; --btn-group-bb:var(--border-width); } .vp-2xs\:range-vertical { writing-mode:vertical-rl; direction:rtl; inline-size:var(--range-vertical-size,10rem); width:auto; } .vp-2xs\:range-horizontal { writing-mode:horizontal-tb; direction:inherit; inline-size:auto; width:100%; } .vp-2xs\:field-horizontal { display:grid; grid-template-columns:minmax(0,var(--field-label-width,12rem)) minmax(0,1fr); align-items:center; column-gap:var(--space-4); row-gap:var(--space-1); } .vp-2xs\:field-horizontal>.label { grid-column:1; flex-direction:column; align-items:flex-start; justify-content:center; gap:var(--space-05); } .vp-2xs\:field-horizontal>*:not(.label) { grid-column:2; } .vp-2xs\:field-vertical { display:flex; flex-direction:column; gap:7px; } .vp-2xs\:field-vertical>.label { flex-direction:row; align-items:stretch; justify-content:space-between; gap:12px; } .vp-2xs\:input-group-addon-inline { inline-size:auto; justify-content:normal; } .vp-2xs\:input-group-addon-inline.input-group-addon-start { padding-inline:var(--space-3); } .vp-2xs\:input-group-addon-inline.input-group-addon-end { padding-inline-end:var(--space-3); } .vp-2xs\:input-group-addon-inline.input-group-addon-end:where(:has(> .btn:last-child)) { padding-inline-end:var(--space-1); } .vp-2xs\:input-group-addon-inline.input-group-addon-end:where(:has(> .kbd:last-child)) { padding-inline-end:var(--space-2); } .vp-2xs\:input-group-addon-inline.input-group-addon-start + :is(.input,.select,.textarea) { padding-inline-start:0; } .vp-2xs\:input-group-addon-block { inline-size:100%; justify-content:flex-start; } .vp-2xs\:input-group-addon-block.input-group-addon-start { padding:var(--space-2) var(--space-3) 0; } .vp-2xs\:input-group-addon-block.input-group-addon-end { padding:0 var(--space-3) var(--space-2); } .vp-2xs\:input-group-addon-block.input-group-addon-start + :is(.input,.select,.textarea) { padding-inline-start:var(--step-field-px,var(--space-3)); } .vp-2xs\:grid-span-1 { grid-column:span 1 / span 1; } .vp-2xs\:grid-span-2 { grid-column:span 2 / span 2; } .vp-2xs\:grid-span-3 { grid-column:span 3 / span 3; } .vp-2xs\:grid-span-4 { grid-column:span 4 / span 4; } .vp-2xs\:grid-span-5 { grid-column:span 5 / span 5; } .vp-2xs\:grid-span-6 { grid-column:span 6 / span 6; } .vp-2xs\:grid-span-7 { grid-column:span 7 / span 7; } .vp-2xs\:grid-span-8 { grid-column:span 8 / span 8; } .vp-2xs\:grid-span-9 { grid-column:span 9 / span 9; } .vp-2xs\:grid-span-10 { grid-column:span 10 / span 10; } .vp-2xs\:grid-span-11 { grid-column:span 11 / span 11; } .vp-2xs\:grid-span-12 { grid-column:span 12 / span 12; } }
-@media (min-width:480px) { .vp-xs\:size-xs{--step-h:var(--control-h-xs);--step-fs:var(--text-xs);--step-gap:6px;--step-px:10px;--step-field-px:var(--space-3);--step-select-pe:var(--space-8)} .vp-xs\:size-sm{--step-h:var(--control-h-sm);--step-fs:var(--text-sm);--step-gap:8px;--step-px:var(--space-3);--step-field-px:var(--space-3);--step-select-pe:var(--space-8);--step-icon:var(--icon-sm);--step-qr:7.5rem;--step-avatar-fs:var(--text-xs);--step-avatar:var(--space-8)} .vp-xs\:size-md{--step-h:var(--control-h-md);--step-fs:var(--text-sm);--step-gap:8px;--step-px:var(--space-4);--step-field-px:var(--space-3);--step-select-pe:38px;--step-icon:var(--icon-md);--step-qr:10rem;--step-avatar-fs:var(--text-sm);--step-avatar:var(--space-10)} .vp-xs\:size-lg{--step-h:var(--control-h-lg);--step-fs:var(--text-base);--step-gap:8px;--step-px:var(--space-4);--step-field-px:var(--space-4);--step-select-pe:calc(var(--space-10) + var(--space-1));--step-icon:var(--icon-lg);--step-qr:15rem;--step-avatar-fs:var(--text-base);--step-avatar:var(--space-12)} .vp-xs\:size-xl{--step-h:var(--control-h-xl);--step-fs:var(--text-base);--step-gap:10px;--step-px:26px;--step-field-px:var(--space-4);--step-select-pe:calc(var(--space-10) + var(--space-1));--step-icon:var(--icon-xl)} .vp-xs\:btn-group-vertical { flex-direction:column; align-items:stretch; --btn-group-h:0; --btn-group-v:var(--radius-full); --btn-group-sep-i:25%; --btn-group-sep-b:0; --btn-group-sep-w:50%; --btn-group-sep-h:var(--border-width); --btn-group-bi:var(--border-width); --btn-group-bb:0; } .vp-xs\:btn-group-horizontal { flex-direction:row; align-items:center; --btn-group-h:var(--radius-full); --btn-group-v:0; --btn-group-sep-i:0; --btn-group-sep-b:25%; --btn-group-sep-w:var(--border-width); --btn-group-sep-h:50%; --btn-group-bi:0; --btn-group-bb:var(--border-width); } .vp-xs\:range-vertical { writing-mode:vertical-rl; direction:rtl; inline-size:var(--range-vertical-size,10rem); width:auto; } .vp-xs\:range-horizontal { writing-mode:horizontal-tb; direction:inherit; inline-size:auto; width:100%; } .vp-xs\:field-horizontal { display:grid; grid-template-columns:minmax(0,var(--field-label-width,12rem)) minmax(0,1fr); align-items:center; column-gap:var(--space-4); row-gap:var(--space-1); } .vp-xs\:field-horizontal>.label { grid-column:1; flex-direction:column; align-items:flex-start; justify-content:center; gap:var(--space-05); } .vp-xs\:field-horizontal>*:not(.label) { grid-column:2; } .vp-xs\:field-vertical { display:flex; flex-direction:column; gap:7px; } .vp-xs\:field-vertical>.label { flex-direction:row; align-items:stretch; justify-content:space-between; gap:12px; } .vp-xs\:input-group-addon-inline { inline-size:auto; justify-content:normal; } .vp-xs\:input-group-addon-inline.input-group-addon-start { padding-inline:var(--space-3); } .vp-xs\:input-group-addon-inline.input-group-addon-end { padding-inline-end:var(--space-3); } .vp-xs\:input-group-addon-inline.input-group-addon-end:where(:has(> .btn:last-child)) { padding-inline-end:var(--space-1); } .vp-xs\:input-group-addon-inline.input-group-addon-end:where(:has(> .kbd:last-child)) { padding-inline-end:var(--space-2); } .vp-xs\:input-group-addon-inline.input-group-addon-start + :is(.input,.select,.textarea) { padding-inline-start:0; } .vp-xs\:input-group-addon-block { inline-size:100%; justify-content:flex-start; } .vp-xs\:input-group-addon-block.input-group-addon-start { padding:var(--space-2) var(--space-3) 0; } .vp-xs\:input-group-addon-block.input-group-addon-end { padding:0 var(--space-3) var(--space-2); } .vp-xs\:input-group-addon-block.input-group-addon-start + :is(.input,.select,.textarea) { padding-inline-start:var(--step-field-px,var(--space-3)); } .vp-xs\:grid-span-1 { grid-column:span 1 / span 1; } .vp-xs\:grid-span-2 { grid-column:span 2 / span 2; } .vp-xs\:grid-span-3 { grid-column:span 3 / span 3; } .vp-xs\:grid-span-4 { grid-column:span 4 / span 4; } .vp-xs\:grid-span-5 { grid-column:span 5 / span 5; } .vp-xs\:grid-span-6 { grid-column:span 6 / span 6; } .vp-xs\:grid-span-7 { grid-column:span 7 / span 7; } .vp-xs\:grid-span-8 { grid-column:span 8 / span 8; } .vp-xs\:grid-span-9 { grid-column:span 9 / span 9; } .vp-xs\:grid-span-10 { grid-column:span 10 / span 10; } .vp-xs\:grid-span-11 { grid-column:span 11 / span 11; } .vp-xs\:grid-span-12 { grid-column:span 12 / span 12; } }
-@media (min-width:640px) { .vp-sm\:size-xs{--step-h:var(--control-h-xs);--step-fs:var(--text-xs);--step-gap:6px;--step-px:10px;--step-field-px:var(--space-3);--step-select-pe:var(--space-8)} .vp-sm\:size-sm{--step-h:var(--control-h-sm);--step-fs:var(--text-sm);--step-gap:8px;--step-px:var(--space-3);--step-field-px:var(--space-3);--step-select-pe:var(--space-8);--step-icon:var(--icon-sm);--step-qr:7.5rem;--step-avatar-fs:var(--text-xs);--step-avatar:var(--space-8)} .vp-sm\:size-md{--step-h:var(--control-h-md);--step-fs:var(--text-sm);--step-gap:8px;--step-px:var(--space-4);--step-field-px:var(--space-3);--step-select-pe:38px;--step-icon:var(--icon-md);--step-qr:10rem;--step-avatar-fs:var(--text-sm);--step-avatar:var(--space-10)} .vp-sm\:size-lg{--step-h:var(--control-h-lg);--step-fs:var(--text-base);--step-gap:8px;--step-px:var(--space-4);--step-field-px:var(--space-4);--step-select-pe:calc(var(--space-10) + var(--space-1));--step-icon:var(--icon-lg);--step-qr:15rem;--step-avatar-fs:var(--text-base);--step-avatar:var(--space-12)} .vp-sm\:size-xl{--step-h:var(--control-h-xl);--step-fs:var(--text-base);--step-gap:10px;--step-px:26px;--step-field-px:var(--space-4);--step-select-pe:calc(var(--space-10) + var(--space-1));--step-icon:var(--icon-xl)} .vp-sm\:btn-group-vertical { flex-direction:column; align-items:stretch; --btn-group-h:0; --btn-group-v:var(--radius-full); --btn-group-sep-i:25%; --btn-group-sep-b:0; --btn-group-sep-w:50%; --btn-group-sep-h:var(--border-width); --btn-group-bi:var(--border-width); --btn-group-bb:0; } .vp-sm\:btn-group-horizontal { flex-direction:row; align-items:center; --btn-group-h:var(--radius-full); --btn-group-v:0; --btn-group-sep-i:0; --btn-group-sep-b:25%; --btn-group-sep-w:var(--border-width); --btn-group-sep-h:50%; --btn-group-bi:0; --btn-group-bb:var(--border-width); } .vp-sm\:range-vertical { writing-mode:vertical-rl; direction:rtl; inline-size:var(--range-vertical-size,10rem); width:auto; } .vp-sm\:range-horizontal { writing-mode:horizontal-tb; direction:inherit; inline-size:auto; width:100%; } .vp-sm\:field-horizontal { display:grid; grid-template-columns:minmax(0,var(--field-label-width,12rem)) minmax(0,1fr); align-items:center; column-gap:var(--space-4); row-gap:var(--space-1); } .vp-sm\:field-horizontal>.label { grid-column:1; flex-direction:column; align-items:flex-start; justify-content:center; gap:var(--space-05); } .vp-sm\:field-horizontal>*:not(.label) { grid-column:2; } .vp-sm\:field-vertical { display:flex; flex-direction:column; gap:7px; } .vp-sm\:field-vertical>.label { flex-direction:row; align-items:stretch; justify-content:space-between; gap:12px; } .vp-sm\:input-group-addon-inline { inline-size:auto; justify-content:normal; } .vp-sm\:input-group-addon-inline.input-group-addon-start { padding-inline:var(--space-3); } .vp-sm\:input-group-addon-inline.input-group-addon-end { padding-inline-end:var(--space-3); } .vp-sm\:input-group-addon-inline.input-group-addon-end:where(:has(> .btn:last-child)) { padding-inline-end:var(--space-1); } .vp-sm\:input-group-addon-inline.input-group-addon-end:where(:has(> .kbd:last-child)) { padding-inline-end:var(--space-2); } .vp-sm\:input-group-addon-inline.input-group-addon-start + :is(.input,.select,.textarea) { padding-inline-start:0; } .vp-sm\:input-group-addon-block { inline-size:100%; justify-content:flex-start; } .vp-sm\:input-group-addon-block.input-group-addon-start { padding:var(--space-2) var(--space-3) 0; } .vp-sm\:input-group-addon-block.input-group-addon-end { padding:0 var(--space-3) var(--space-2); } .vp-sm\:input-group-addon-block.input-group-addon-start + :is(.input,.select,.textarea) { padding-inline-start:var(--step-field-px,var(--space-3)); } .vp-sm\:grid-span-1 { grid-column:span 1 / span 1; } .vp-sm\:grid-span-2 { grid-column:span 2 / span 2; } .vp-sm\:grid-span-3 { grid-column:span 3 / span 3; } .vp-sm\:grid-span-4 { grid-column:span 4 / span 4; } .vp-sm\:grid-span-5 { grid-column:span 5 / span 5; } .vp-sm\:grid-span-6 { grid-column:span 6 / span 6; } .vp-sm\:grid-span-7 { grid-column:span 7 / span 7; } .vp-sm\:grid-span-8 { grid-column:span 8 / span 8; } .vp-sm\:grid-span-9 { grid-column:span 9 / span 9; } .vp-sm\:grid-span-10 { grid-column:span 10 / span 10; } .vp-sm\:grid-span-11 { grid-column:span 11 / span 11; } .vp-sm\:grid-span-12 { grid-column:span 12 / span 12; } }
-@media (min-width:768px) { .vp-md\:size-xs{--step-h:var(--control-h-xs);--step-fs:var(--text-xs);--step-gap:6px;--step-px:10px;--step-field-px:var(--space-3);--step-select-pe:var(--space-8)} .vp-md\:size-sm{--step-h:var(--control-h-sm);--step-fs:var(--text-sm);--step-gap:8px;--step-px:var(--space-3);--step-field-px:var(--space-3);--step-select-pe:var(--space-8);--step-icon:var(--icon-sm);--step-qr:7.5rem;--step-avatar-fs:var(--text-xs);--step-avatar:var(--space-8)} .vp-md\:size-md{--step-h:var(--control-h-md);--step-fs:var(--text-sm);--step-gap:8px;--step-px:var(--space-4);--step-field-px:var(--space-3);--step-select-pe:38px;--step-icon:var(--icon-md);--step-qr:10rem;--step-avatar-fs:var(--text-sm);--step-avatar:var(--space-10)} .vp-md\:size-lg{--step-h:var(--control-h-lg);--step-fs:var(--text-base);--step-gap:8px;--step-px:var(--space-4);--step-field-px:var(--space-4);--step-select-pe:calc(var(--space-10) + var(--space-1));--step-icon:var(--icon-lg);--step-qr:15rem;--step-avatar-fs:var(--text-base);--step-avatar:var(--space-12)} .vp-md\:size-xl{--step-h:var(--control-h-xl);--step-fs:var(--text-base);--step-gap:10px;--step-px:26px;--step-field-px:var(--space-4);--step-select-pe:calc(var(--space-10) + var(--space-1));--step-icon:var(--icon-xl)} .vp-md\:btn-group-vertical { flex-direction:column; align-items:stretch; --btn-group-h:0; --btn-group-v:var(--radius-full); --btn-group-sep-i:25%; --btn-group-sep-b:0; --btn-group-sep-w:50%; --btn-group-sep-h:var(--border-width); --btn-group-bi:var(--border-width); --btn-group-bb:0; } .vp-md\:btn-group-horizontal { flex-direction:row; align-items:center; --btn-group-h:var(--radius-full); --btn-group-v:0; --btn-group-sep-i:0; --btn-group-sep-b:25%; --btn-group-sep-w:var(--border-width); --btn-group-sep-h:50%; --btn-group-bi:0; --btn-group-bb:var(--border-width); } .vp-md\:range-vertical { writing-mode:vertical-rl; direction:rtl; inline-size:var(--range-vertical-size,10rem); width:auto; } .vp-md\:range-horizontal { writing-mode:horizontal-tb; direction:inherit; inline-size:auto; width:100%; } .vp-md\:field-horizontal { display:grid; grid-template-columns:minmax(0,var(--field-label-width,12rem)) minmax(0,1fr); align-items:center; column-gap:var(--space-4); row-gap:var(--space-1); } .vp-md\:field-horizontal>.label { grid-column:1; flex-direction:column; align-items:flex-start; justify-content:center; gap:var(--space-05); } .vp-md\:field-horizontal>*:not(.label) { grid-column:2; } .vp-md\:field-vertical { display:flex; flex-direction:column; gap:7px; } .vp-md\:field-vertical>.label { flex-direction:row; align-items:stretch; justify-content:space-between; gap:12px; } .vp-md\:input-group-addon-inline { inline-size:auto; justify-content:normal; } .vp-md\:input-group-addon-inline.input-group-addon-start { padding-inline:var(--space-3); } .vp-md\:input-group-addon-inline.input-group-addon-end { padding-inline-end:var(--space-3); } .vp-md\:input-group-addon-inline.input-group-addon-end:where(:has(> .btn:last-child)) { padding-inline-end:var(--space-1); } .vp-md\:input-group-addon-inline.input-group-addon-end:where(:has(> .kbd:last-child)) { padding-inline-end:var(--space-2); } .vp-md\:input-group-addon-inline.input-group-addon-start + :is(.input,.select,.textarea) { padding-inline-start:0; } .vp-md\:input-group-addon-block { inline-size:100%; justify-content:flex-start; } .vp-md\:input-group-addon-block.input-group-addon-start { padding:var(--space-2) var(--space-3) 0; } .vp-md\:input-group-addon-block.input-group-addon-end { padding:0 var(--space-3) var(--space-2); } .vp-md\:input-group-addon-block.input-group-addon-start + :is(.input,.select,.textarea) { padding-inline-start:var(--step-field-px,var(--space-3)); } .vp-md\:grid-span-1 { grid-column:span 1 / span 1; } .vp-md\:grid-span-2 { grid-column:span 2 / span 2; } .vp-md\:grid-span-3 { grid-column:span 3 / span 3; } .vp-md\:grid-span-4 { grid-column:span 4 / span 4; } .vp-md\:grid-span-5 { grid-column:span 5 / span 5; } .vp-md\:grid-span-6 { grid-column:span 6 / span 6; } .vp-md\:grid-span-7 { grid-column:span 7 / span 7; } .vp-md\:grid-span-8 { grid-column:span 8 / span 8; } .vp-md\:grid-span-9 { grid-column:span 9 / span 9; } .vp-md\:grid-span-10 { grid-column:span 10 / span 10; } .vp-md\:grid-span-11 { grid-column:span 11 / span 11; } .vp-md\:grid-span-12 { grid-column:span 12 / span 12; } }
-@media (min-width:1024px) { .vp-lg\:size-xs{--step-h:var(--control-h-xs);--step-fs:var(--text-xs);--step-gap:6px;--step-px:10px;--step-field-px:var(--space-3);--step-select-pe:var(--space-8)} .vp-lg\:size-sm{--step-h:var(--control-h-sm);--step-fs:var(--text-sm);--step-gap:8px;--step-px:var(--space-3);--step-field-px:var(--space-3);--step-select-pe:var(--space-8);--step-icon:var(--icon-sm);--step-qr:7.5rem;--step-avatar-fs:var(--text-xs);--step-avatar:var(--space-8)} .vp-lg\:size-md{--step-h:var(--control-h-md);--step-fs:var(--text-sm);--step-gap:8px;--step-px:var(--space-4);--step-field-px:var(--space-3);--step-select-pe:38px;--step-icon:var(--icon-md);--step-qr:10rem;--step-avatar-fs:var(--text-sm);--step-avatar:var(--space-10)} .vp-lg\:size-lg{--step-h:var(--control-h-lg);--step-fs:var(--text-base);--step-gap:8px;--step-px:var(--space-4);--step-field-px:var(--space-4);--step-select-pe:calc(var(--space-10) + var(--space-1));--step-icon:var(--icon-lg);--step-qr:15rem;--step-avatar-fs:var(--text-base);--step-avatar:var(--space-12)} .vp-lg\:size-xl{--step-h:var(--control-h-xl);--step-fs:var(--text-base);--step-gap:10px;--step-px:26px;--step-field-px:var(--space-4);--step-select-pe:calc(var(--space-10) + var(--space-1));--step-icon:var(--icon-xl)} .vp-lg\:btn-group-vertical { flex-direction:column; align-items:stretch; --btn-group-h:0; --btn-group-v:var(--radius-full); --btn-group-sep-i:25%; --btn-group-sep-b:0; --btn-group-sep-w:50%; --btn-group-sep-h:var(--border-width); --btn-group-bi:var(--border-width); --btn-group-bb:0; } .vp-lg\:btn-group-horizontal { flex-direction:row; align-items:center; --btn-group-h:var(--radius-full); --btn-group-v:0; --btn-group-sep-i:0; --btn-group-sep-b:25%; --btn-group-sep-w:var(--border-width); --btn-group-sep-h:50%; --btn-group-bi:0; --btn-group-bb:var(--border-width); } .vp-lg\:range-vertical { writing-mode:vertical-rl; direction:rtl; inline-size:var(--range-vertical-size,10rem); width:auto; } .vp-lg\:range-horizontal { writing-mode:horizontal-tb; direction:inherit; inline-size:auto; width:100%; } .vp-lg\:field-horizontal { display:grid; grid-template-columns:minmax(0,var(--field-label-width,12rem)) minmax(0,1fr); align-items:center; column-gap:var(--space-4); row-gap:var(--space-1); } .vp-lg\:field-horizontal>.label { grid-column:1; flex-direction:column; align-items:flex-start; justify-content:center; gap:var(--space-05); } .vp-lg\:field-horizontal>*:not(.label) { grid-column:2; } .vp-lg\:field-vertical { display:flex; flex-direction:column; gap:7px; } .vp-lg\:field-vertical>.label { flex-direction:row; align-items:stretch; justify-content:space-between; gap:12px; } .vp-lg\:input-group-addon-inline { inline-size:auto; justify-content:normal; } .vp-lg\:input-group-addon-inline.input-group-addon-start { padding-inline:var(--space-3); } .vp-lg\:input-group-addon-inline.input-group-addon-end { padding-inline-end:var(--space-3); } .vp-lg\:input-group-addon-inline.input-group-addon-end:where(:has(> .btn:last-child)) { padding-inline-end:var(--space-1); } .vp-lg\:input-group-addon-inline.input-group-addon-end:where(:has(> .kbd:last-child)) { padding-inline-end:var(--space-2); } .vp-lg\:input-group-addon-inline.input-group-addon-start + :is(.input,.select,.textarea) { padding-inline-start:0; } .vp-lg\:input-group-addon-block { inline-size:100%; justify-content:flex-start; } .vp-lg\:input-group-addon-block.input-group-addon-start { padding:var(--space-2) var(--space-3) 0; } .vp-lg\:input-group-addon-block.input-group-addon-end { padding:0 var(--space-3) var(--space-2); } .vp-lg\:input-group-addon-block.input-group-addon-start + :is(.input,.select,.textarea) { padding-inline-start:var(--step-field-px,var(--space-3)); } .vp-lg\:grid-span-1 { grid-column:span 1 / span 1; } .vp-lg\:grid-span-2 { grid-column:span 2 / span 2; } .vp-lg\:grid-span-3 { grid-column:span 3 / span 3; } .vp-lg\:grid-span-4 { grid-column:span 4 / span 4; } .vp-lg\:grid-span-5 { grid-column:span 5 / span 5; } .vp-lg\:grid-span-6 { grid-column:span 6 / span 6; } .vp-lg\:grid-span-7 { grid-column:span 7 / span 7; } .vp-lg\:grid-span-8 { grid-column:span 8 / span 8; } .vp-lg\:grid-span-9 { grid-column:span 9 / span 9; } .vp-lg\:grid-span-10 { grid-column:span 10 / span 10; } .vp-lg\:grid-span-11 { grid-column:span 11 / span 11; } .vp-lg\:grid-span-12 { grid-column:span 12 / span 12; } }
-@media (min-width:1280px) { .vp-xl\:size-xs{--step-h:var(--control-h-xs);--step-fs:var(--text-xs);--step-gap:6px;--step-px:10px;--step-field-px:var(--space-3);--step-select-pe:var(--space-8)} .vp-xl\:size-sm{--step-h:var(--control-h-sm);--step-fs:var(--text-sm);--step-gap:8px;--step-px:var(--space-3);--step-field-px:var(--space-3);--step-select-pe:var(--space-8);--step-icon:var(--icon-sm);--step-qr:7.5rem;--step-avatar-fs:var(--text-xs);--step-avatar:var(--space-8)} .vp-xl\:size-md{--step-h:var(--control-h-md);--step-fs:var(--text-sm);--step-gap:8px;--step-px:var(--space-4);--step-field-px:var(--space-3);--step-select-pe:38px;--step-icon:var(--icon-md);--step-qr:10rem;--step-avatar-fs:var(--text-sm);--step-avatar:var(--space-10)} .vp-xl\:size-lg{--step-h:var(--control-h-lg);--step-fs:var(--text-base);--step-gap:8px;--step-px:var(--space-4);--step-field-px:var(--space-4);--step-select-pe:calc(var(--space-10) + var(--space-1));--step-icon:var(--icon-lg);--step-qr:15rem;--step-avatar-fs:var(--text-base);--step-avatar:var(--space-12)} .vp-xl\:size-xl{--step-h:var(--control-h-xl);--step-fs:var(--text-base);--step-gap:10px;--step-px:26px;--step-field-px:var(--space-4);--step-select-pe:calc(var(--space-10) + var(--space-1));--step-icon:var(--icon-xl)} .vp-xl\:btn-group-vertical { flex-direction:column; align-items:stretch; --btn-group-h:0; --btn-group-v:var(--radius-full); --btn-group-sep-i:25%; --btn-group-sep-b:0; --btn-group-sep-w:50%; --btn-group-sep-h:var(--border-width); --btn-group-bi:var(--border-width); --btn-group-bb:0; } .vp-xl\:btn-group-horizontal { flex-direction:row; align-items:center; --btn-group-h:var(--radius-full); --btn-group-v:0; --btn-group-sep-i:0; --btn-group-sep-b:25%; --btn-group-sep-w:var(--border-width); --btn-group-sep-h:50%; --btn-group-bi:0; --btn-group-bb:var(--border-width); } .vp-xl\:range-vertical { writing-mode:vertical-rl; direction:rtl; inline-size:var(--range-vertical-size,10rem); width:auto; } .vp-xl\:range-horizontal { writing-mode:horizontal-tb; direction:inherit; inline-size:auto; width:100%; } .vp-xl\:field-horizontal { display:grid; grid-template-columns:minmax(0,var(--field-label-width,12rem)) minmax(0,1fr); align-items:center; column-gap:var(--space-4); row-gap:var(--space-1); } .vp-xl\:field-horizontal>.label { grid-column:1; flex-direction:column; align-items:flex-start; justify-content:center; gap:var(--space-05); } .vp-xl\:field-horizontal>*:not(.label) { grid-column:2; } .vp-xl\:field-vertical { display:flex; flex-direction:column; gap:7px; } .vp-xl\:field-vertical>.label { flex-direction:row; align-items:stretch; justify-content:space-between; gap:12px; } .vp-xl\:input-group-addon-inline { inline-size:auto; justify-content:normal; } .vp-xl\:input-group-addon-inline.input-group-addon-start { padding-inline:var(--space-3); } .vp-xl\:input-group-addon-inline.input-group-addon-end { padding-inline-end:var(--space-3); } .vp-xl\:input-group-addon-inline.input-group-addon-end:where(:has(> .btn:last-child)) { padding-inline-end:var(--space-1); } .vp-xl\:input-group-addon-inline.input-group-addon-end:where(:has(> .kbd:last-child)) { padding-inline-end:var(--space-2); } .vp-xl\:input-group-addon-inline.input-group-addon-start + :is(.input,.select,.textarea) { padding-inline-start:0; } .vp-xl\:input-group-addon-block { inline-size:100%; justify-content:flex-start; } .vp-xl\:input-group-addon-block.input-group-addon-start { padding:var(--space-2) var(--space-3) 0; } .vp-xl\:input-group-addon-block.input-group-addon-end { padding:0 var(--space-3) var(--space-2); } .vp-xl\:input-group-addon-block.input-group-addon-start + :is(.input,.select,.textarea) { padding-inline-start:var(--step-field-px,var(--space-3)); } .vp-xl\:grid-span-1 { grid-column:span 1 / span 1; } .vp-xl\:grid-span-2 { grid-column:span 2 / span 2; } .vp-xl\:grid-span-3 { grid-column:span 3 / span 3; } .vp-xl\:grid-span-4 { grid-column:span 4 / span 4; } .vp-xl\:grid-span-5 { grid-column:span 5 / span 5; } .vp-xl\:grid-span-6 { grid-column:span 6 / span 6; } .vp-xl\:grid-span-7 { grid-column:span 7 / span 7; } .vp-xl\:grid-span-8 { grid-column:span 8 / span 8; } .vp-xl\:grid-span-9 { grid-column:span 9 / span 9; } .vp-xl\:grid-span-10 { grid-column:span 10 / span 10; } .vp-xl\:grid-span-11 { grid-column:span 11 / span 11; } .vp-xl\:grid-span-12 { grid-column:span 12 / span 12; } }
-@media (min-width:1536px) { .vp-2xl\:size-xs{--step-h:var(--control-h-xs);--step-fs:var(--text-xs);--step-gap:6px;--step-px:10px;--step-field-px:var(--space-3);--step-select-pe:var(--space-8)} .vp-2xl\:size-sm{--step-h:var(--control-h-sm);--step-fs:var(--text-sm);--step-gap:8px;--step-px:var(--space-3);--step-field-px:var(--space-3);--step-select-pe:var(--space-8);--step-icon:var(--icon-sm);--step-qr:7.5rem;--step-avatar-fs:var(--text-xs);--step-avatar:var(--space-8)} .vp-2xl\:size-md{--step-h:var(--control-h-md);--step-fs:var(--text-sm);--step-gap:8px;--step-px:var(--space-4);--step-field-px:var(--space-3);--step-select-pe:38px;--step-icon:var(--icon-md);--step-qr:10rem;--step-avatar-fs:var(--text-sm);--step-avatar:var(--space-10)} .vp-2xl\:size-lg{--step-h:var(--control-h-lg);--step-fs:var(--text-base);--step-gap:8px;--step-px:var(--space-4);--step-field-px:var(--space-4);--step-select-pe:calc(var(--space-10) + var(--space-1));--step-icon:var(--icon-lg);--step-qr:15rem;--step-avatar-fs:var(--text-base);--step-avatar:var(--space-12)} .vp-2xl\:size-xl{--step-h:var(--control-h-xl);--step-fs:var(--text-base);--step-gap:10px;--step-px:26px;--step-field-px:var(--space-4);--step-select-pe:calc(var(--space-10) + var(--space-1));--step-icon:var(--icon-xl)} .vp-2xl\:btn-group-vertical { flex-direction:column; align-items:stretch; --btn-group-h:0; --btn-group-v:var(--radius-full); --btn-group-sep-i:25%; --btn-group-sep-b:0; --btn-group-sep-w:50%; --btn-group-sep-h:var(--border-width); --btn-group-bi:var(--border-width); --btn-group-bb:0; } .vp-2xl\:btn-group-horizontal { flex-direction:row; align-items:center; --btn-group-h:var(--radius-full); --btn-group-v:0; --btn-group-sep-i:0; --btn-group-sep-b:25%; --btn-group-sep-w:var(--border-width); --btn-group-sep-h:50%; --btn-group-bi:0; --btn-group-bb:var(--border-width); } .vp-2xl\:range-vertical { writing-mode:vertical-rl; direction:rtl; inline-size:var(--range-vertical-size,10rem); width:auto; } .vp-2xl\:range-horizontal { writing-mode:horizontal-tb; direction:inherit; inline-size:auto; width:100%; } .vp-2xl\:field-horizontal { display:grid; grid-template-columns:minmax(0,var(--field-label-width,12rem)) minmax(0,1fr); align-items:center; column-gap:var(--space-4); row-gap:var(--space-1); } .vp-2xl\:field-horizontal>.label { grid-column:1; flex-direction:column; align-items:flex-start; justify-content:center; gap:var(--space-05); } .vp-2xl\:field-horizontal>*:not(.label) { grid-column:2; } .vp-2xl\:field-vertical { display:flex; flex-direction:column; gap:7px; } .vp-2xl\:field-vertical>.label { flex-direction:row; align-items:stretch; justify-content:space-between; gap:12px; } .vp-2xl\:input-group-addon-inline { inline-size:auto; justify-content:normal; } .vp-2xl\:input-group-addon-inline.input-group-addon-start { padding-inline:var(--space-3); } .vp-2xl\:input-group-addon-inline.input-group-addon-end { padding-inline-end:var(--space-3); } .vp-2xl\:input-group-addon-inline.input-group-addon-end:where(:has(> .btn:last-child)) { padding-inline-end:var(--space-1); } .vp-2xl\:input-group-addon-inline.input-group-addon-end:where(:has(> .kbd:last-child)) { padding-inline-end:var(--space-2); } .vp-2xl\:input-group-addon-inline.input-group-addon-start + :is(.input,.select,.textarea) { padding-inline-start:0; } .vp-2xl\:input-group-addon-block { inline-size:100%; justify-content:flex-start; } .vp-2xl\:input-group-addon-block.input-group-addon-start { padding:var(--space-2) var(--space-3) 0; } .vp-2xl\:input-group-addon-block.input-group-addon-end { padding:0 var(--space-3) var(--space-2); } .vp-2xl\:input-group-addon-block.input-group-addon-start + :is(.input,.select,.textarea) { padding-inline-start:var(--step-field-px,var(--space-3)); } .vp-2xl\:grid-span-1 { grid-column:span 1 / span 1; } .vp-2xl\:grid-span-2 { grid-column:span 2 / span 2; } .vp-2xl\:grid-span-3 { grid-column:span 3 / span 3; } .vp-2xl\:grid-span-4 { grid-column:span 4 / span 4; } .vp-2xl\:grid-span-5 { grid-column:span 5 / span 5; } .vp-2xl\:grid-span-6 { grid-column:span 6 / span 6; } .vp-2xl\:grid-span-7 { grid-column:span 7 / span 7; } .vp-2xl\:grid-span-8 { grid-column:span 8 / span 8; } .vp-2xl\:grid-span-9 { grid-column:span 9 / span 9; } .vp-2xl\:grid-span-10 { grid-column:span 10 / span 10; } .vp-2xl\:grid-span-11 { grid-column:span 11 / span 11; } .vp-2xl\:grid-span-12 { grid-column:span 12 / span 12; } }
+@media (min-width:22.5em) { .vp-2xs\:size-xs{--step-h:var(--control-h-xs);--step-fs:var(--text-xs);--step-gap:6px;--step-px:10px;--step-field-px:var(--space-3);--step-select-pe:var(--space-8)} .vp-2xs\:size-sm{--step-h:var(--control-h-sm);--step-fs:var(--text-sm);--step-gap:8px;--step-px:var(--space-3);--step-field-px:var(--space-3);--step-select-pe:var(--space-8);--step-icon:var(--icon-sm);--step-qr:7.5rem;--step-avatar-fs:var(--text-xs);--step-avatar:var(--space-8)} .vp-2xs\:size-md{--step-h:var(--control-h-md);--step-fs:var(--text-sm);--step-gap:8px;--step-px:var(--space-4);--step-field-px:var(--space-3);--step-select-pe:38px;--step-icon:var(--icon-md);--step-qr:10rem;--step-avatar-fs:var(--text-sm);--step-avatar:var(--space-10)} .vp-2xs\:size-lg{--step-h:var(--control-h-lg);--step-fs:var(--text-base);--step-gap:8px;--step-px:var(--space-4);--step-field-px:var(--space-4);--step-select-pe:calc(var(--space-10) + var(--space-1));--step-icon:var(--icon-lg);--step-qr:15rem;--step-avatar-fs:var(--text-base);--step-avatar:var(--space-12)} .vp-2xs\:size-xl{--step-h:var(--control-h-xl);--step-fs:var(--text-base);--step-gap:10px;--step-px:26px;--step-field-px:var(--space-4);--step-select-pe:calc(var(--space-10) + var(--space-1));--step-icon:var(--icon-xl)} .vp-2xs\:btn-group-vertical { flex-direction:column; align-items:stretch; --btn-group-h:0; --btn-group-v:var(--radius-full); --btn-group-sep-i:25%; --btn-group-sep-b:0; --btn-group-sep-w:50%; --btn-group-sep-h:var(--border-width); --btn-group-bi:var(--border-width); --btn-group-bb:0; } .vp-2xs\:btn-group-horizontal { flex-direction:row; align-items:center; --btn-group-h:var(--radius-full); --btn-group-v:0; --btn-group-sep-i:0; --btn-group-sep-b:25%; --btn-group-sep-w:var(--border-width); --btn-group-sep-h:50%; --btn-group-bi:0; --btn-group-bb:var(--border-width); } .vp-2xs\:range-vertical { writing-mode:vertical-rl; direction:rtl; inline-size:var(--range-vertical-size,10rem); width:auto; } .vp-2xs\:range-horizontal { writing-mode:horizontal-tb; direction:inherit; inline-size:auto; width:100%; } .vp-2xs\:field-horizontal { display:grid; grid-template-columns:minmax(0,var(--field-label-width,12rem)) minmax(0,1fr); align-items:center; column-gap:var(--space-4); row-gap:var(--space-1); } .vp-2xs\:field-horizontal>.label { grid-column:1; flex-direction:column; align-items:flex-start; justify-content:center; gap:var(--space-05); } .vp-2xs\:field-horizontal>*:not(.label) { grid-column:2; } .vp-2xs\:field-vertical { display:flex; flex-direction:column; gap:7px; } .vp-2xs\:field-vertical>.label { flex-direction:row; align-items:stretch; justify-content:space-between; gap:12px; } .vp-2xs\:input-group-addon-inline { inline-size:auto; justify-content:normal; } .vp-2xs\:input-group-addon-inline.input-group-addon-start { padding-inline:var(--space-3); } .vp-2xs\:input-group-addon-inline.input-group-addon-end { padding-inline-end:var(--space-3); } .vp-2xs\:input-group-addon-inline.input-group-addon-end:where(:has(> .btn:last-child)) { padding-inline-end:var(--space-1); } .vp-2xs\:input-group-addon-inline.input-group-addon-end:where(:has(> .kbd:last-child)) { padding-inline-end:var(--space-2); } .vp-2xs\:input-group-addon-inline.input-group-addon-start + :is(.input,.select,.textarea) { padding-inline-start:0; } .vp-2xs\:input-group-addon-block { inline-size:100%; justify-content:flex-start; } .vp-2xs\:input-group-addon-block.input-group-addon-start { padding:var(--space-2) var(--space-3) 0; } .vp-2xs\:input-group-addon-block.input-group-addon-end { padding:0 var(--space-3) var(--space-2); } .vp-2xs\:input-group-addon-block.input-group-addon-start + :is(.input,.select,.textarea) { padding-inline-start:var(--step-field-px,var(--space-3)); } .vp-2xs\:grid-span-1 { grid-column:span 1 / span 1; } .vp-2xs\:grid-span-2 { grid-column:span 2 / span 2; } .vp-2xs\:grid-span-3 { grid-column:span 3 / span 3; } .vp-2xs\:grid-span-4 { grid-column:span 4 / span 4; } .vp-2xs\:grid-span-5 { grid-column:span 5 / span 5; } .vp-2xs\:grid-span-6 { grid-column:span 6 / span 6; } .vp-2xs\:grid-span-7 { grid-column:span 7 / span 7; } .vp-2xs\:grid-span-8 { grid-column:span 8 / span 8; } .vp-2xs\:grid-span-9 { grid-column:span 9 / span 9; } .vp-2xs\:grid-span-10 { grid-column:span 10 / span 10; } .vp-2xs\:grid-span-11 { grid-column:span 11 / span 11; } .vp-2xs\:grid-span-12 { grid-column:span 12 / span 12; } }
+@media (min-width:30em) { .vp-xs\:size-xs{--step-h:var(--control-h-xs);--step-fs:var(--text-xs);--step-gap:6px;--step-px:10px;--step-field-px:var(--space-3);--step-select-pe:var(--space-8)} .vp-xs\:size-sm{--step-h:var(--control-h-sm);--step-fs:var(--text-sm);--step-gap:8px;--step-px:var(--space-3);--step-field-px:var(--space-3);--step-select-pe:var(--space-8);--step-icon:var(--icon-sm);--step-qr:7.5rem;--step-avatar-fs:var(--text-xs);--step-avatar:var(--space-8)} .vp-xs\:size-md{--step-h:var(--control-h-md);--step-fs:var(--text-sm);--step-gap:8px;--step-px:var(--space-4);--step-field-px:var(--space-3);--step-select-pe:38px;--step-icon:var(--icon-md);--step-qr:10rem;--step-avatar-fs:var(--text-sm);--step-avatar:var(--space-10)} .vp-xs\:size-lg{--step-h:var(--control-h-lg);--step-fs:var(--text-base);--step-gap:8px;--step-px:var(--space-4);--step-field-px:var(--space-4);--step-select-pe:calc(var(--space-10) + var(--space-1));--step-icon:var(--icon-lg);--step-qr:15rem;--step-avatar-fs:var(--text-base);--step-avatar:var(--space-12)} .vp-xs\:size-xl{--step-h:var(--control-h-xl);--step-fs:var(--text-base);--step-gap:10px;--step-px:26px;--step-field-px:var(--space-4);--step-select-pe:calc(var(--space-10) + var(--space-1));--step-icon:var(--icon-xl)} .vp-xs\:btn-group-vertical { flex-direction:column; align-items:stretch; --btn-group-h:0; --btn-group-v:var(--radius-full); --btn-group-sep-i:25%; --btn-group-sep-b:0; --btn-group-sep-w:50%; --btn-group-sep-h:var(--border-width); --btn-group-bi:var(--border-width); --btn-group-bb:0; } .vp-xs\:btn-group-horizontal { flex-direction:row; align-items:center; --btn-group-h:var(--radius-full); --btn-group-v:0; --btn-group-sep-i:0; --btn-group-sep-b:25%; --btn-group-sep-w:var(--border-width); --btn-group-sep-h:50%; --btn-group-bi:0; --btn-group-bb:var(--border-width); } .vp-xs\:range-vertical { writing-mode:vertical-rl; direction:rtl; inline-size:var(--range-vertical-size,10rem); width:auto; } .vp-xs\:range-horizontal { writing-mode:horizontal-tb; direction:inherit; inline-size:auto; width:100%; } .vp-xs\:field-horizontal { display:grid; grid-template-columns:minmax(0,var(--field-label-width,12rem)) minmax(0,1fr); align-items:center; column-gap:var(--space-4); row-gap:var(--space-1); } .vp-xs\:field-horizontal>.label { grid-column:1; flex-direction:column; align-items:flex-start; justify-content:center; gap:var(--space-05); } .vp-xs\:field-horizontal>*:not(.label) { grid-column:2; } .vp-xs\:field-vertical { display:flex; flex-direction:column; gap:7px; } .vp-xs\:field-vertical>.label { flex-direction:row; align-items:stretch; justify-content:space-between; gap:12px; } .vp-xs\:input-group-addon-inline { inline-size:auto; justify-content:normal; } .vp-xs\:input-group-addon-inline.input-group-addon-start { padding-inline:var(--space-3); } .vp-xs\:input-group-addon-inline.input-group-addon-end { padding-inline-end:var(--space-3); } .vp-xs\:input-group-addon-inline.input-group-addon-end:where(:has(> .btn:last-child)) { padding-inline-end:var(--space-1); } .vp-xs\:input-group-addon-inline.input-group-addon-end:where(:has(> .kbd:last-child)) { padding-inline-end:var(--space-2); } .vp-xs\:input-group-addon-inline.input-group-addon-start + :is(.input,.select,.textarea) { padding-inline-start:0; } .vp-xs\:input-group-addon-block { inline-size:100%; justify-content:flex-start; } .vp-xs\:input-group-addon-block.input-group-addon-start { padding:var(--space-2) var(--space-3) 0; } .vp-xs\:input-group-addon-block.input-group-addon-end { padding:0 var(--space-3) var(--space-2); } .vp-xs\:input-group-addon-block.input-group-addon-start + :is(.input,.select,.textarea) { padding-inline-start:var(--step-field-px,var(--space-3)); } .vp-xs\:grid-span-1 { grid-column:span 1 / span 1; } .vp-xs\:grid-span-2 { grid-column:span 2 / span 2; } .vp-xs\:grid-span-3 { grid-column:span 3 / span 3; } .vp-xs\:grid-span-4 { grid-column:span 4 / span 4; } .vp-xs\:grid-span-5 { grid-column:span 5 / span 5; } .vp-xs\:grid-span-6 { grid-column:span 6 / span 6; } .vp-xs\:grid-span-7 { grid-column:span 7 / span 7; } .vp-xs\:grid-span-8 { grid-column:span 8 / span 8; } .vp-xs\:grid-span-9 { grid-column:span 9 / span 9; } .vp-xs\:grid-span-10 { grid-column:span 10 / span 10; } .vp-xs\:grid-span-11 { grid-column:span 11 / span 11; } .vp-xs\:grid-span-12 { grid-column:span 12 / span 12; } }
+@media (min-width:40em) { .vp-sm\:size-xs{--step-h:var(--control-h-xs);--step-fs:var(--text-xs);--step-gap:6px;--step-px:10px;--step-field-px:var(--space-3);--step-select-pe:var(--space-8)} .vp-sm\:size-sm{--step-h:var(--control-h-sm);--step-fs:var(--text-sm);--step-gap:8px;--step-px:var(--space-3);--step-field-px:var(--space-3);--step-select-pe:var(--space-8);--step-icon:var(--icon-sm);--step-qr:7.5rem;--step-avatar-fs:var(--text-xs);--step-avatar:var(--space-8)} .vp-sm\:size-md{--step-h:var(--control-h-md);--step-fs:var(--text-sm);--step-gap:8px;--step-px:var(--space-4);--step-field-px:var(--space-3);--step-select-pe:38px;--step-icon:var(--icon-md);--step-qr:10rem;--step-avatar-fs:var(--text-sm);--step-avatar:var(--space-10)} .vp-sm\:size-lg{--step-h:var(--control-h-lg);--step-fs:var(--text-base);--step-gap:8px;--step-px:var(--space-4);--step-field-px:var(--space-4);--step-select-pe:calc(var(--space-10) + var(--space-1));--step-icon:var(--icon-lg);--step-qr:15rem;--step-avatar-fs:var(--text-base);--step-avatar:var(--space-12)} .vp-sm\:size-xl{--step-h:var(--control-h-xl);--step-fs:var(--text-base);--step-gap:10px;--step-px:26px;--step-field-px:var(--space-4);--step-select-pe:calc(var(--space-10) + var(--space-1));--step-icon:var(--icon-xl)} .vp-sm\:btn-group-vertical { flex-direction:column; align-items:stretch; --btn-group-h:0; --btn-group-v:var(--radius-full); --btn-group-sep-i:25%; --btn-group-sep-b:0; --btn-group-sep-w:50%; --btn-group-sep-h:var(--border-width); --btn-group-bi:var(--border-width); --btn-group-bb:0; } .vp-sm\:btn-group-horizontal { flex-direction:row; align-items:center; --btn-group-h:var(--radius-full); --btn-group-v:0; --btn-group-sep-i:0; --btn-group-sep-b:25%; --btn-group-sep-w:var(--border-width); --btn-group-sep-h:50%; --btn-group-bi:0; --btn-group-bb:var(--border-width); } .vp-sm\:range-vertical { writing-mode:vertical-rl; direction:rtl; inline-size:var(--range-vertical-size,10rem); width:auto; } .vp-sm\:range-horizontal { writing-mode:horizontal-tb; direction:inherit; inline-size:auto; width:100%; } .vp-sm\:field-horizontal { display:grid; grid-template-columns:minmax(0,var(--field-label-width,12rem)) minmax(0,1fr); align-items:center; column-gap:var(--space-4); row-gap:var(--space-1); } .vp-sm\:field-horizontal>.label { grid-column:1; flex-direction:column; align-items:flex-start; justify-content:center; gap:var(--space-05); } .vp-sm\:field-horizontal>*:not(.label) { grid-column:2; } .vp-sm\:field-vertical { display:flex; flex-direction:column; gap:7px; } .vp-sm\:field-vertical>.label { flex-direction:row; align-items:stretch; justify-content:space-between; gap:12px; } .vp-sm\:input-group-addon-inline { inline-size:auto; justify-content:normal; } .vp-sm\:input-group-addon-inline.input-group-addon-start { padding-inline:var(--space-3); } .vp-sm\:input-group-addon-inline.input-group-addon-end { padding-inline-end:var(--space-3); } .vp-sm\:input-group-addon-inline.input-group-addon-end:where(:has(> .btn:last-child)) { padding-inline-end:var(--space-1); } .vp-sm\:input-group-addon-inline.input-group-addon-end:where(:has(> .kbd:last-child)) { padding-inline-end:var(--space-2); } .vp-sm\:input-group-addon-inline.input-group-addon-start + :is(.input,.select,.textarea) { padding-inline-start:0; } .vp-sm\:input-group-addon-block { inline-size:100%; justify-content:flex-start; } .vp-sm\:input-group-addon-block.input-group-addon-start { padding:var(--space-2) var(--space-3) 0; } .vp-sm\:input-group-addon-block.input-group-addon-end { padding:0 var(--space-3) var(--space-2); } .vp-sm\:input-group-addon-block.input-group-addon-start + :is(.input,.select,.textarea) { padding-inline-start:var(--step-field-px,var(--space-3)); } .vp-sm\:grid-span-1 { grid-column:span 1 / span 1; } .vp-sm\:grid-span-2 { grid-column:span 2 / span 2; } .vp-sm\:grid-span-3 { grid-column:span 3 / span 3; } .vp-sm\:grid-span-4 { grid-column:span 4 / span 4; } .vp-sm\:grid-span-5 { grid-column:span 5 / span 5; } .vp-sm\:grid-span-6 { grid-column:span 6 / span 6; } .vp-sm\:grid-span-7 { grid-column:span 7 / span 7; } .vp-sm\:grid-span-8 { grid-column:span 8 / span 8; } .vp-sm\:grid-span-9 { grid-column:span 9 / span 9; } .vp-sm\:grid-span-10 { grid-column:span 10 / span 10; } .vp-sm\:grid-span-11 { grid-column:span 11 / span 11; } .vp-sm\:grid-span-12 { grid-column:span 12 / span 12; } }
+@media (min-width:48em) { .vp-md\:size-xs{--step-h:var(--control-h-xs);--step-fs:var(--text-xs);--step-gap:6px;--step-px:10px;--step-field-px:var(--space-3);--step-select-pe:var(--space-8)} .vp-md\:size-sm{--step-h:var(--control-h-sm);--step-fs:var(--text-sm);--step-gap:8px;--step-px:var(--space-3);--step-field-px:var(--space-3);--step-select-pe:var(--space-8);--step-icon:var(--icon-sm);--step-qr:7.5rem;--step-avatar-fs:var(--text-xs);--step-avatar:var(--space-8)} .vp-md\:size-md{--step-h:var(--control-h-md);--step-fs:var(--text-sm);--step-gap:8px;--step-px:var(--space-4);--step-field-px:var(--space-3);--step-select-pe:38px;--step-icon:var(--icon-md);--step-qr:10rem;--step-avatar-fs:var(--text-sm);--step-avatar:var(--space-10)} .vp-md\:size-lg{--step-h:var(--control-h-lg);--step-fs:var(--text-base);--step-gap:8px;--step-px:var(--space-4);--step-field-px:var(--space-4);--step-select-pe:calc(var(--space-10) + var(--space-1));--step-icon:var(--icon-lg);--step-qr:15rem;--step-avatar-fs:var(--text-base);--step-avatar:var(--space-12)} .vp-md\:size-xl{--step-h:var(--control-h-xl);--step-fs:var(--text-base);--step-gap:10px;--step-px:26px;--step-field-px:var(--space-4);--step-select-pe:calc(var(--space-10) + var(--space-1));--step-icon:var(--icon-xl)} .vp-md\:btn-group-vertical { flex-direction:column; align-items:stretch; --btn-group-h:0; --btn-group-v:var(--radius-full); --btn-group-sep-i:25%; --btn-group-sep-b:0; --btn-group-sep-w:50%; --btn-group-sep-h:var(--border-width); --btn-group-bi:var(--border-width); --btn-group-bb:0; } .vp-md\:btn-group-horizontal { flex-direction:row; align-items:center; --btn-group-h:var(--radius-full); --btn-group-v:0; --btn-group-sep-i:0; --btn-group-sep-b:25%; --btn-group-sep-w:var(--border-width); --btn-group-sep-h:50%; --btn-group-bi:0; --btn-group-bb:var(--border-width); } .vp-md\:range-vertical { writing-mode:vertical-rl; direction:rtl; inline-size:var(--range-vertical-size,10rem); width:auto; } .vp-md\:range-horizontal { writing-mode:horizontal-tb; direction:inherit; inline-size:auto; width:100%; } .vp-md\:field-horizontal { display:grid; grid-template-columns:minmax(0,var(--field-label-width,12rem)) minmax(0,1fr); align-items:center; column-gap:var(--space-4); row-gap:var(--space-1); } .vp-md\:field-horizontal>.label { grid-column:1; flex-direction:column; align-items:flex-start; justify-content:center; gap:var(--space-05); } .vp-md\:field-horizontal>*:not(.label) { grid-column:2; } .vp-md\:field-vertical { display:flex; flex-direction:column; gap:7px; } .vp-md\:field-vertical>.label { flex-direction:row; align-items:stretch; justify-content:space-between; gap:12px; } .vp-md\:input-group-addon-inline { inline-size:auto; justify-content:normal; } .vp-md\:input-group-addon-inline.input-group-addon-start { padding-inline:var(--space-3); } .vp-md\:input-group-addon-inline.input-group-addon-end { padding-inline-end:var(--space-3); } .vp-md\:input-group-addon-inline.input-group-addon-end:where(:has(> .btn:last-child)) { padding-inline-end:var(--space-1); } .vp-md\:input-group-addon-inline.input-group-addon-end:where(:has(> .kbd:last-child)) { padding-inline-end:var(--space-2); } .vp-md\:input-group-addon-inline.input-group-addon-start + :is(.input,.select,.textarea) { padding-inline-start:0; } .vp-md\:input-group-addon-block { inline-size:100%; justify-content:flex-start; } .vp-md\:input-group-addon-block.input-group-addon-start { padding:var(--space-2) var(--space-3) 0; } .vp-md\:input-group-addon-block.input-group-addon-end { padding:0 var(--space-3) var(--space-2); } .vp-md\:input-group-addon-block.input-group-addon-start + :is(.input,.select,.textarea) { padding-inline-start:var(--step-field-px,var(--space-3)); } .vp-md\:grid-span-1 { grid-column:span 1 / span 1; } .vp-md\:grid-span-2 { grid-column:span 2 / span 2; } .vp-md\:grid-span-3 { grid-column:span 3 / span 3; } .vp-md\:grid-span-4 { grid-column:span 4 / span 4; } .vp-md\:grid-span-5 { grid-column:span 5 / span 5; } .vp-md\:grid-span-6 { grid-column:span 6 / span 6; } .vp-md\:grid-span-7 { grid-column:span 7 / span 7; } .vp-md\:grid-span-8 { grid-column:span 8 / span 8; } .vp-md\:grid-span-9 { grid-column:span 9 / span 9; } .vp-md\:grid-span-10 { grid-column:span 10 / span 10; } .vp-md\:grid-span-11 { grid-column:span 11 / span 11; } .vp-md\:grid-span-12 { grid-column:span 12 / span 12; } }
+@media (min-width:64em) { .vp-lg\:size-xs{--step-h:var(--control-h-xs);--step-fs:var(--text-xs);--step-gap:6px;--step-px:10px;--step-field-px:var(--space-3);--step-select-pe:var(--space-8)} .vp-lg\:size-sm{--step-h:var(--control-h-sm);--step-fs:var(--text-sm);--step-gap:8px;--step-px:var(--space-3);--step-field-px:var(--space-3);--step-select-pe:var(--space-8);--step-icon:var(--icon-sm);--step-qr:7.5rem;--step-avatar-fs:var(--text-xs);--step-avatar:var(--space-8)} .vp-lg\:size-md{--step-h:var(--control-h-md);--step-fs:var(--text-sm);--step-gap:8px;--step-px:var(--space-4);--step-field-px:var(--space-3);--step-select-pe:38px;--step-icon:var(--icon-md);--step-qr:10rem;--step-avatar-fs:var(--text-sm);--step-avatar:var(--space-10)} .vp-lg\:size-lg{--step-h:var(--control-h-lg);--step-fs:var(--text-base);--step-gap:8px;--step-px:var(--space-4);--step-field-px:var(--space-4);--step-select-pe:calc(var(--space-10) + var(--space-1));--step-icon:var(--icon-lg);--step-qr:15rem;--step-avatar-fs:var(--text-base);--step-avatar:var(--space-12)} .vp-lg\:size-xl{--step-h:var(--control-h-xl);--step-fs:var(--text-base);--step-gap:10px;--step-px:26px;--step-field-px:var(--space-4);--step-select-pe:calc(var(--space-10) + var(--space-1));--step-icon:var(--icon-xl)} .vp-lg\:btn-group-vertical { flex-direction:column; align-items:stretch; --btn-group-h:0; --btn-group-v:var(--radius-full); --btn-group-sep-i:25%; --btn-group-sep-b:0; --btn-group-sep-w:50%; --btn-group-sep-h:var(--border-width); --btn-group-bi:var(--border-width); --btn-group-bb:0; } .vp-lg\:btn-group-horizontal { flex-direction:row; align-items:center; --btn-group-h:var(--radius-full); --btn-group-v:0; --btn-group-sep-i:0; --btn-group-sep-b:25%; --btn-group-sep-w:var(--border-width); --btn-group-sep-h:50%; --btn-group-bi:0; --btn-group-bb:var(--border-width); } .vp-lg\:range-vertical { writing-mode:vertical-rl; direction:rtl; inline-size:var(--range-vertical-size,10rem); width:auto; } .vp-lg\:range-horizontal { writing-mode:horizontal-tb; direction:inherit; inline-size:auto; width:100%; } .vp-lg\:field-horizontal { display:grid; grid-template-columns:minmax(0,var(--field-label-width,12rem)) minmax(0,1fr); align-items:center; column-gap:var(--space-4); row-gap:var(--space-1); } .vp-lg\:field-horizontal>.label { grid-column:1; flex-direction:column; align-items:flex-start; justify-content:center; gap:var(--space-05); } .vp-lg\:field-horizontal>*:not(.label) { grid-column:2; } .vp-lg\:field-vertical { display:flex; flex-direction:column; gap:7px; } .vp-lg\:field-vertical>.label { flex-direction:row; align-items:stretch; justify-content:space-between; gap:12px; } .vp-lg\:input-group-addon-inline { inline-size:auto; justify-content:normal; } .vp-lg\:input-group-addon-inline.input-group-addon-start { padding-inline:var(--space-3); } .vp-lg\:input-group-addon-inline.input-group-addon-end { padding-inline-end:var(--space-3); } .vp-lg\:input-group-addon-inline.input-group-addon-end:where(:has(> .btn:last-child)) { padding-inline-end:var(--space-1); } .vp-lg\:input-group-addon-inline.input-group-addon-end:where(:has(> .kbd:last-child)) { padding-inline-end:var(--space-2); } .vp-lg\:input-group-addon-inline.input-group-addon-start + :is(.input,.select,.textarea) { padding-inline-start:0; } .vp-lg\:input-group-addon-block { inline-size:100%; justify-content:flex-start; } .vp-lg\:input-group-addon-block.input-group-addon-start { padding:var(--space-2) var(--space-3) 0; } .vp-lg\:input-group-addon-block.input-group-addon-end { padding:0 var(--space-3) var(--space-2); } .vp-lg\:input-group-addon-block.input-group-addon-start + :is(.input,.select,.textarea) { padding-inline-start:var(--step-field-px,var(--space-3)); } .vp-lg\:grid-span-1 { grid-column:span 1 / span 1; } .vp-lg\:grid-span-2 { grid-column:span 2 / span 2; } .vp-lg\:grid-span-3 { grid-column:span 3 / span 3; } .vp-lg\:grid-span-4 { grid-column:span 4 / span 4; } .vp-lg\:grid-span-5 { grid-column:span 5 / span 5; } .vp-lg\:grid-span-6 { grid-column:span 6 / span 6; } .vp-lg\:grid-span-7 { grid-column:span 7 / span 7; } .vp-lg\:grid-span-8 { grid-column:span 8 / span 8; } .vp-lg\:grid-span-9 { grid-column:span 9 / span 9; } .vp-lg\:grid-span-10 { grid-column:span 10 / span 10; } .vp-lg\:grid-span-11 { grid-column:span 11 / span 11; } .vp-lg\:grid-span-12 { grid-column:span 12 / span 12; } }
+@media (min-width:80em) { .vp-xl\:size-xs{--step-h:var(--control-h-xs);--step-fs:var(--text-xs);--step-gap:6px;--step-px:10px;--step-field-px:var(--space-3);--step-select-pe:var(--space-8)} .vp-xl\:size-sm{--step-h:var(--control-h-sm);--step-fs:var(--text-sm);--step-gap:8px;--step-px:var(--space-3);--step-field-px:var(--space-3);--step-select-pe:var(--space-8);--step-icon:var(--icon-sm);--step-qr:7.5rem;--step-avatar-fs:var(--text-xs);--step-avatar:var(--space-8)} .vp-xl\:size-md{--step-h:var(--control-h-md);--step-fs:var(--text-sm);--step-gap:8px;--step-px:var(--space-4);--step-field-px:var(--space-3);--step-select-pe:38px;--step-icon:var(--icon-md);--step-qr:10rem;--step-avatar-fs:var(--text-sm);--step-avatar:var(--space-10)} .vp-xl\:size-lg{--step-h:var(--control-h-lg);--step-fs:var(--text-base);--step-gap:8px;--step-px:var(--space-4);--step-field-px:var(--space-4);--step-select-pe:calc(var(--space-10) + var(--space-1));--step-icon:var(--icon-lg);--step-qr:15rem;--step-avatar-fs:var(--text-base);--step-avatar:var(--space-12)} .vp-xl\:size-xl{--step-h:var(--control-h-xl);--step-fs:var(--text-base);--step-gap:10px;--step-px:26px;--step-field-px:var(--space-4);--step-select-pe:calc(var(--space-10) + var(--space-1));--step-icon:var(--icon-xl)} .vp-xl\:btn-group-vertical { flex-direction:column; align-items:stretch; --btn-group-h:0; --btn-group-v:var(--radius-full); --btn-group-sep-i:25%; --btn-group-sep-b:0; --btn-group-sep-w:50%; --btn-group-sep-h:var(--border-width); --btn-group-bi:var(--border-width); --btn-group-bb:0; } .vp-xl\:btn-group-horizontal { flex-direction:row; align-items:center; --btn-group-h:var(--radius-full); --btn-group-v:0; --btn-group-sep-i:0; --btn-group-sep-b:25%; --btn-group-sep-w:var(--border-width); --btn-group-sep-h:50%; --btn-group-bi:0; --btn-group-bb:var(--border-width); } .vp-xl\:range-vertical { writing-mode:vertical-rl; direction:rtl; inline-size:var(--range-vertical-size,10rem); width:auto; } .vp-xl\:range-horizontal { writing-mode:horizontal-tb; direction:inherit; inline-size:auto; width:100%; } .vp-xl\:field-horizontal { display:grid; grid-template-columns:minmax(0,var(--field-label-width,12rem)) minmax(0,1fr); align-items:center; column-gap:var(--space-4); row-gap:var(--space-1); } .vp-xl\:field-horizontal>.label { grid-column:1; flex-direction:column; align-items:flex-start; justify-content:center; gap:var(--space-05); } .vp-xl\:field-horizontal>*:not(.label) { grid-column:2; } .vp-xl\:field-vertical { display:flex; flex-direction:column; gap:7px; } .vp-xl\:field-vertical>.label { flex-direction:row; align-items:stretch; justify-content:space-between; gap:12px; } .vp-xl\:input-group-addon-inline { inline-size:auto; justify-content:normal; } .vp-xl\:input-group-addon-inline.input-group-addon-start { padding-inline:var(--space-3); } .vp-xl\:input-group-addon-inline.input-group-addon-end { padding-inline-end:var(--space-3); } .vp-xl\:input-group-addon-inline.input-group-addon-end:where(:has(> .btn:last-child)) { padding-inline-end:var(--space-1); } .vp-xl\:input-group-addon-inline.input-group-addon-end:where(:has(> .kbd:last-child)) { padding-inline-end:var(--space-2); } .vp-xl\:input-group-addon-inline.input-group-addon-start + :is(.input,.select,.textarea) { padding-inline-start:0; } .vp-xl\:input-group-addon-block { inline-size:100%; justify-content:flex-start; } .vp-xl\:input-group-addon-block.input-group-addon-start { padding:var(--space-2) var(--space-3) 0; } .vp-xl\:input-group-addon-block.input-group-addon-end { padding:0 var(--space-3) var(--space-2); } .vp-xl\:input-group-addon-block.input-group-addon-start + :is(.input,.select,.textarea) { padding-inline-start:var(--step-field-px,var(--space-3)); } .vp-xl\:grid-span-1 { grid-column:span 1 / span 1; } .vp-xl\:grid-span-2 { grid-column:span 2 / span 2; } .vp-xl\:grid-span-3 { grid-column:span 3 / span 3; } .vp-xl\:grid-span-4 { grid-column:span 4 / span 4; } .vp-xl\:grid-span-5 { grid-column:span 5 / span 5; } .vp-xl\:grid-span-6 { grid-column:span 6 / span 6; } .vp-xl\:grid-span-7 { grid-column:span 7 / span 7; } .vp-xl\:grid-span-8 { grid-column:span 8 / span 8; } .vp-xl\:grid-span-9 { grid-column:span 9 / span 9; } .vp-xl\:grid-span-10 { grid-column:span 10 / span 10; } .vp-xl\:grid-span-11 { grid-column:span 11 / span 11; } .vp-xl\:grid-span-12 { grid-column:span 12 / span 12; } }
+@media (min-width:96em) { .vp-2xl\:size-xs{--step-h:var(--control-h-xs);--step-fs:var(--text-xs);--step-gap:6px;--step-px:10px;--step-field-px:var(--space-3);--step-select-pe:var(--space-8)} .vp-2xl\:size-sm{--step-h:var(--control-h-sm);--step-fs:var(--text-sm);--step-gap:8px;--step-px:var(--space-3);--step-field-px:var(--space-3);--step-select-pe:var(--space-8);--step-icon:var(--icon-sm);--step-qr:7.5rem;--step-avatar-fs:var(--text-xs);--step-avatar:var(--space-8)} .vp-2xl\:size-md{--step-h:var(--control-h-md);--step-fs:var(--text-sm);--step-gap:8px;--step-px:var(--space-4);--step-field-px:var(--space-3);--step-select-pe:38px;--step-icon:var(--icon-md);--step-qr:10rem;--step-avatar-fs:var(--text-sm);--step-avatar:var(--space-10)} .vp-2xl\:size-lg{--step-h:var(--control-h-lg);--step-fs:var(--text-base);--step-gap:8px;--step-px:var(--space-4);--step-field-px:var(--space-4);--step-select-pe:calc(var(--space-10) + var(--space-1));--step-icon:var(--icon-lg);--step-qr:15rem;--step-avatar-fs:var(--text-base);--step-avatar:var(--space-12)} .vp-2xl\:size-xl{--step-h:var(--control-h-xl);--step-fs:var(--text-base);--step-gap:10px;--step-px:26px;--step-field-px:var(--space-4);--step-select-pe:calc(var(--space-10) + var(--space-1));--step-icon:var(--icon-xl)} .vp-2xl\:btn-group-vertical { flex-direction:column; align-items:stretch; --btn-group-h:0; --btn-group-v:var(--radius-full); --btn-group-sep-i:25%; --btn-group-sep-b:0; --btn-group-sep-w:50%; --btn-group-sep-h:var(--border-width); --btn-group-bi:var(--border-width); --btn-group-bb:0; } .vp-2xl\:btn-group-horizontal { flex-direction:row; align-items:center; --btn-group-h:var(--radius-full); --btn-group-v:0; --btn-group-sep-i:0; --btn-group-sep-b:25%; --btn-group-sep-w:var(--border-width); --btn-group-sep-h:50%; --btn-group-bi:0; --btn-group-bb:var(--border-width); } .vp-2xl\:range-vertical { writing-mode:vertical-rl; direction:rtl; inline-size:var(--range-vertical-size,10rem); width:auto; } .vp-2xl\:range-horizontal { writing-mode:horizontal-tb; direction:inherit; inline-size:auto; width:100%; } .vp-2xl\:field-horizontal { display:grid; grid-template-columns:minmax(0,var(--field-label-width,12rem)) minmax(0,1fr); align-items:center; column-gap:var(--space-4); row-gap:var(--space-1); } .vp-2xl\:field-horizontal>.label { grid-column:1; flex-direction:column; align-items:flex-start; justify-content:center; gap:var(--space-05); } .vp-2xl\:field-horizontal>*:not(.label) { grid-column:2; } .vp-2xl\:field-vertical { display:flex; flex-direction:column; gap:7px; } .vp-2xl\:field-vertical>.label { flex-direction:row; align-items:stretch; justify-content:space-between; gap:12px; } .vp-2xl\:input-group-addon-inline { inline-size:auto; justify-content:normal; } .vp-2xl\:input-group-addon-inline.input-group-addon-start { padding-inline:var(--space-3); } .vp-2xl\:input-group-addon-inline.input-group-addon-end { padding-inline-end:var(--space-3); } .vp-2xl\:input-group-addon-inline.input-group-addon-end:where(:has(> .btn:last-child)) { padding-inline-end:var(--space-1); } .vp-2xl\:input-group-addon-inline.input-group-addon-end:where(:has(> .kbd:last-child)) { padding-inline-end:var(--space-2); } .vp-2xl\:input-group-addon-inline.input-group-addon-start + :is(.input,.select,.textarea) { padding-inline-start:0; } .vp-2xl\:input-group-addon-block { inline-size:100%; justify-content:flex-start; } .vp-2xl\:input-group-addon-block.input-group-addon-start { padding:var(--space-2) var(--space-3) 0; } .vp-2xl\:input-group-addon-block.input-group-addon-end { padding:0 var(--space-3) var(--space-2); } .vp-2xl\:input-group-addon-block.input-group-addon-start + :is(.input,.select,.textarea) { padding-inline-start:var(--step-field-px,var(--space-3)); } .vp-2xl\:grid-span-1 { grid-column:span 1 / span 1; } .vp-2xl\:grid-span-2 { grid-column:span 2 / span 2; } .vp-2xl\:grid-span-3 { grid-column:span 3 / span 3; } .vp-2xl\:grid-span-4 { grid-column:span 4 / span 4; } .vp-2xl\:grid-span-5 { grid-column:span 5 / span 5; } .vp-2xl\:grid-span-6 { grid-column:span 6 / span 6; } .vp-2xl\:grid-span-7 { grid-column:span 7 / span 7; } .vp-2xl\:grid-span-8 { grid-column:span 8 / span 8; } .vp-2xl\:grid-span-9 { grid-column:span 9 / span 9; } .vp-2xl\:grid-span-10 { grid-column:span 10 / span 10; } .vp-2xl\:grid-span-11 { grid-column:span 11 / span 11; } .vp-2xl\:grid-span-12 { grid-column:span 12 / span 12; } }
 
 /* por CONTAINER — o componente responde ao ESPAÇO EM QUE FOI COLOCADO */
 @container aurea (min-width:360px) { .ct-2xs\:size-xs{--step-h:var(--control-h-xs);--step-fs:var(--text-xs);--step-gap:6px;--step-px:10px;--step-field-px:var(--space-3);--step-select-pe:var(--space-8)} .ct-2xs\:size-sm{--step-h:var(--control-h-sm);--step-fs:var(--text-sm);--step-gap:8px;--step-px:var(--space-3);--step-field-px:var(--space-3);--step-select-pe:var(--space-8);--step-icon:var(--icon-sm);--step-qr:7.5rem;--step-avatar-fs:var(--text-xs);--step-avatar:var(--space-8)} .ct-2xs\:size-md{--step-h:var(--control-h-md);--step-fs:var(--text-sm);--step-gap:8px;--step-px:var(--space-4);--step-field-px:var(--space-3);--step-select-pe:38px;--step-icon:var(--icon-md);--step-qr:10rem;--step-avatar-fs:var(--text-sm);--step-avatar:var(--space-10)} .ct-2xs\:size-lg{--step-h:var(--control-h-lg);--step-fs:var(--text-base);--step-gap:8px;--step-px:var(--space-4);--step-field-px:var(--space-4);--step-select-pe:calc(var(--space-10) + var(--space-1));--step-icon:var(--icon-lg);--step-qr:15rem;--step-avatar-fs:var(--text-base);--step-avatar:var(--space-12)} .ct-2xs\:size-xl{--step-h:var(--control-h-xl);--step-fs:var(--text-base);--step-gap:10px;--step-px:26px;--step-field-px:var(--space-4);--step-select-pe:calc(var(--space-10) + var(--space-1));--step-icon:var(--icon-xl)} .ct-2xs\:btn-group-vertical { flex-direction:column; align-items:stretch; --btn-group-h:0; --btn-group-v:var(--radius-full); --btn-group-sep-i:25%; --btn-group-sep-b:0; --btn-group-sep-w:50%; --btn-group-sep-h:var(--border-width); --btn-group-bi:var(--border-width); --btn-group-bb:0; } .ct-2xs\:btn-group-horizontal { flex-direction:row; align-items:center; --btn-group-h:var(--radius-full); --btn-group-v:0; --btn-group-sep-i:0; --btn-group-sep-b:25%; --btn-group-sep-w:var(--border-width); --btn-group-sep-h:50%; --btn-group-bi:0; --btn-group-bb:var(--border-width); } .ct-2xs\:range-vertical { writing-mode:vertical-rl; direction:rtl; inline-size:var(--range-vertical-size,10rem); width:auto; } .ct-2xs\:range-horizontal { writing-mode:horizontal-tb; direction:inherit; inline-size:auto; width:100%; } .ct-2xs\:field-horizontal { display:grid; grid-template-columns:minmax(0,var(--field-label-width,12rem)) minmax(0,1fr); align-items:center; column-gap:var(--space-4); row-gap:var(--space-1); } .ct-2xs\:field-horizontal>.label { grid-column:1; flex-direction:column; align-items:flex-start; justify-content:center; gap:var(--space-05); } .ct-2xs\:field-horizontal>*:not(.label) { grid-column:2; } .ct-2xs\:field-vertical { display:flex; flex-direction:column; gap:7px; } .ct-2xs\:field-vertical>.label { flex-direction:row; align-items:stretch; justify-content:space-between; gap:12px; } .ct-2xs\:input-group-addon-inline { inline-size:auto; justify-content:normal; } .ct-2xs\:input-group-addon-inline.input-group-addon-start { padding-inline:var(--space-3); } .ct-2xs\:input-group-addon-inline.input-group-addon-end { padding-inline-end:var(--space-3); } .ct-2xs\:input-group-addon-inline.input-group-addon-end:where(:has(> .btn:last-child)) { padding-inline-end:var(--space-1); } .ct-2xs\:input-group-addon-inline.input-group-addon-end:where(:has(> .kbd:last-child)) { padding-inline-end:var(--space-2); } .ct-2xs\:input-group-addon-inline.input-group-addon-start + :is(.input,.select,.textarea) { padding-inline-start:0; } .ct-2xs\:input-group-addon-block { inline-size:100%; justify-content:flex-start; } .ct-2xs\:input-group-addon-block.input-group-addon-start { padding:var(--space-2) var(--space-3) 0; } .ct-2xs\:input-group-addon-block.input-group-addon-end { padding:0 var(--space-3) var(--space-2); } .ct-2xs\:input-group-addon-block.input-group-addon-start + :is(.input,.select,.textarea) { padding-inline-start:var(--step-field-px,var(--space-3)); } .ct-2xs\:grid-span-1 { grid-column:span 1 / span 1; } .ct-2xs\:grid-span-2 { grid-column:span 2 / span 2; } .ct-2xs\:grid-span-3 { grid-column:span 3 / span 3; } .ct-2xs\:grid-span-4 { grid-column:span 4 / span 4; } .ct-2xs\:grid-span-5 { grid-column:span 5 / span 5; } .ct-2xs\:grid-span-6 { grid-column:span 6 / span 6; } .ct-2xs\:grid-span-7 { grid-column:span 7 / span 7; } .ct-2xs\:grid-span-8 { grid-column:span 8 / span 8; } .ct-2xs\:grid-span-9 { grid-column:span 9 / span 9; } .ct-2xs\:grid-span-10 { grid-column:span 10 / span 10; } .ct-2xs\:grid-span-11 { grid-column:span 11 / span 11; } .ct-2xs\:grid-span-12 { grid-column:span 12 / span 12; } }

package/dist/aurea.js

@@ -395,10 +395,11 @@
   });
   // 2. Subir para o desktop fecha. O top layer é estado do DOM, e nenhuma media query tira um
   // elemento de lá: sem isto a gaveta ficava flutuando, sem véu, e o botão que a fecharia sumia.
-  // 1024 é o `--breakpoint-lg`, o mesmo corte do `@media (max-width:1023px)` acima; o
-  // `consumidores-lote1.test` reprova se os dois divergirem.
+  // 64em é o `--breakpoint-lg` (1024 ÷ 16), o mesmo corte do `@media (max-width:63.9375em)` acima — em `em`, como
+  // os pontos de quebra do CSS (ADR-0092): em px, com a fonte do navegador aumentada, o CSS ainda mostrava a gaveta e
+  // isto já a fechava. O `consumidores-lote1.test` reprova se os dois divergirem.
   if (typeof window.matchMedia === "function") {
-    var desktop = window.matchMedia("(min-width: 1024px)");
+    var desktop = window.matchMedia("(min-width: 64em)");
     var aoSubir = function (e) {
       if (!e.matches) return;
       var abertas = document.querySelectorAll(".sidebar[popover]");

package/package.json

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